Skip to content

E
ecommerce-ui
Commit 1b0bf116 authored by Sven Franck's avatar Sven Franck
Browse files
Options

updated themes css

parent 742474f1
Show whitespace changes
Inline Side-by-side
Showing with 346 additions and 51 deletions
css/themes.css
View file @ 1b0bf116
......@@ -103,7 +103,8 @@ html .ui-page-theme-slapos-white .ui-table-wrapper.ui-table-wrapper-bottom .ui-p
html .ui-page-theme-slapos-white .ui-controlbar .ui-btn,
html .ui-page-theme-slapos-white .ui-collapsible-set .ui-collapsible h1 a.ui-btn,
html .ui-page-theme-slapos-white .ui-table thead a.ui-btn,
html .ui-page-theme-slapos-white .ui-table thead label{
html .ui-page-theme-slapos-white .ui-table thead label,
html .ui-page-theme-slapos-white .ui-table thead tr th {
color: #aaa;
text-shadow: #FFFFFF 0px 1px 0px;
}
......@@ -141,6 +142,7 @@ html .ui-page-theme-slapos-white .ui-collapsible-set .ui-collapsible h1 a.ui-btn
/* Body: Read-only lists, text inputs, collapsible content */
.ui-body-slapos-white,
.ui-page-theme-slapos-white .ui-body-inherit,
.ui-page-theme-slapos-white .ui-content-element,
html .ui-bar-slapos-white .ui-body-inherit,
html .ui-body-slapos-white .ui-body-inherit,
html body .ui-group-theme-slapos-white .ui-body-inherit,
......@@ -186,7 +188,8 @@ html body .ui-group-theme-slapos-white h2,
html body .ui-group-theme-slapos-white h3,
html body .ui-group-theme-slapos-white h4,
html body .ui-group-theme-slapos-white h5,
html body .ui-group-theme-slapos-white h6 {
html body .ui-group-theme-slapos-white h6,
html .ui-page-theme-slapos-white .ui-content-element {
color: rgb(115, 115, 115);
color: rgba(0, 0, 0, 0.55);
}
......@@ -395,6 +398,7 @@ html .ui-page-theme-slapos-black .ui-collapsible-set .ui-collapsible h1 a.ui-btn
/* Body: Read-only lists, text inputs, collapsible content */
.ui-body-slapos-black,
.ui-page-theme-slapos-black .ui-body-inherit,
.ui-page-theme-slapos-black .ui-content-element,
html .ui-bar-slapos-black .ui-body-inherit,
html .ui-body-slapos-black .ui-body-inherit,
html body .ui-group-theme-slapos-black .ui-body-inherit,
......@@ -453,7 +457,8 @@ html body .ui-group-theme-slapos-black h2,
html body .ui-group-theme-slapos-black h3,
html body .ui-group-theme-slapos-black h4,
html body .ui-group-theme-slapos-black h5,
html body .ui-group-theme-slapos-black h6 {
html body .ui-group-theme-slapos-black h6,
html .ui-page-theme-slapos-black .ui-content-element {
color: #fff;
}
/* Button up */
......@@ -847,26 +852,51 @@ html .ui-header .ui-last-wrap .ui-controlgroup-controls .ui-btn {
border-left: 1px solid rgb(232, 232, 232);
border-left: 1px solid rgba(232, 232, 232, 0.5);
}
@media (max-width: 40em) {
/* hide button text on small screens */
.responsive.ui-btn,
.ui-select span.responsive /*,
.responsive .ui-btn */ {
text-indent: -9999px;
white-space: nowrap !important;
}
.responsive.ui-btn:after /*,
.responsive .ui-btn:after*/ {
text-indent: 0px;
left: .6em;
}
/* center select(!) icons on response layouts */
.ui-mini.ui-btn-icon-left:after,
.ui-mini .ui-btn-icon-left:after,
.ui-header .ui-btn-icon-left:after,
.ui-footer .ui-btn-icon-left:after {
left: .6em;
}
}
/* form & fieldcontain */
/* set label/input width on large screens */
/* TODO: form fields should auto-expand to full width */
@media (min-width: 40em) {
.ui-fieldcontain label,
.ui-fieldcontain label:not(.ui-btn),
.ui-fieldcontain div.ui-input-text,
.ui-fieldcontain div.ui-input-search,
.ui-fieldcontain div.ui-select {
display: inline-block;
vertical-align: middle;
}
.ui-fieldcontain label {
width: 40%;
.ui-fieldcontain label:not(.ui-btn) {
/* width: 46% *//*40% not working either*/
max-width: 30%;
min-width: 30%;
}
.ui-fieldcontain div.ui-input-text,
.ui-fieldcontain div.ui-input-search {
width: 50%;
}
.ui-fieldcontain div.ui-select {
width: 56%;
width: 46%;
}
.ui-fieldcontain div.ui-select .ui-btn {
-webkit-box-shadow: none;
......@@ -875,39 +905,39 @@ html .ui-header .ui-last-wrap .ui-controlgroup-controls .ui-btn {
min-height: 19px;
padding-top: 5px;
padding-bottom: 5px;
width: 100%;
}
.ui-fieldcontain div.ui-select .ui-btn.ui-btn-icon-right:after {
right: 0.25em;
}
}
/* ============================= forms ============================= */
form {
font-size: .85em;
}
@media (max-width: 40em) {
form {
font-size: 1em;
}
}
/* ============================= content grid ============================= */
.span_1, .span_2 {
display: inline-block;
vertical-align: top;
vertical-align: middle;
width: 45%;
padding-left: 2%;
padding-right: 2%;
/* ~ 98% for 2 col layout */
padding-top: 2%;
}
/* form need no padding and align top */
form .span_1, form .span_2 {
vertical-align: top;
padding-left: 0%;
padding-right: 0%;
}
.span_1 textarea {
width: 56%;
width: 57.5%;
display: inline-block;
vertical-align: middle;
}
.span_2 {
width: 96% /* 2% padding-left/right */
}
form .span_1 {
width: 50%;
}
/* is this padding really necessary? */
.span_1 .ui-controlgroup-vertical,
.span_2 .ui-controlgroup-vertical,
......@@ -920,7 +950,7 @@ form {
vertical-align: middle;
}
@media (max-width: 40em) {
.span_1, .span_2 {
.span_1, .span_2, form .span_1, form .span_2 {
width: 100%;
padding: 0;
}
......@@ -953,10 +983,27 @@ form {
width: 60%;
}
}
/* ============================= content elements ============================= */
/* TODO: merge with span_1 span_2... */
html div.ui-page div.ui-content .ui-content-element {
/* TODO: should have corners and shadow - but not like this!*/
/*
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.15);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,.15);
box-shadow: 0 1px 3px rgba(0,0,0,.15);
*/
-webkit-border-radius: .3125em;
border-radius: .3125em;
border: 1px solid #aaa;
padding: 1em;
margin: 1em auto;
text-align: center;
}
html div.ui-page div.ui-content .ui-content-element > .ui-btn {
max-width: 10%;
margin: 1em auto 0;
display: block;
}
.panel .ui-panel-inner .panel_element {
......@@ -984,7 +1031,7 @@ form {
.ui-header .ui-controlgroup fieldset.ui-controlgroup,
/* controlgroup header outside of page */
.ui-controlgroup,
.ui-controlgroup fieldset.ui-controlgroup{
.ui-controlgroup fieldset.ui-controlgroup {
padding: 0;
margin: 0;
height: 100%;
......@@ -992,35 +1039,27 @@ form {
.ui-header .ui-controlgroup-controls {
height: 100%;
}
/* single button controlgroup */
/* single button controlgroup - does not work on right side */
.ui-controlgroup.ui-corner-all .ui-controlgroup-controls .ui-btn.ui-first-child.ui-last-child {
border-radius: inherit;
border-radius: .6em;
}
/* button */
.ui-header a.ui-btn ,
html .ui-header a.ui-btn ,
html body .ui-header a.ui-btn {
html body .ui-header a.ui-btn,
html body .ui-header .ui-controlgroup .ui-controlgroup-controls div.ui-select .ui-btn{
height: 100%;
margin: 0;
position: relative; /* otherwise multiple buttons break */
padding-top: 0;
padding-bottom: 0;
border-radius: 0;
-webkit-border-radius: 0;
}
html .ui-btn, label.ui-btn {
font-weight: normal;
}
/* hide button text on small screens */
@media (max-width: 40em) {
.responsive.ui-btn,
.responsive .ui-btn {
text-indent: -9999px;
white-space: nowrap !important;
}
.responsive.ui-btn:after,
.responsive .ui-btn:after {
text-indent: 0px;
}
}
/* no bold buttons */
html .ui-btn, label.ui-btn {
font-weight: normal;
......@@ -1037,7 +1076,8 @@ html .ui-btn, label.ui-btn {
.ui-nosvg .ui-btn-icon-left:after,
.ui-nosvg .ui-btn-icon-right:after,
.ui-nosvg .ui-listview > li > .ui-btn[class*="ui-icon-"]:after,
.ui-input-clear.ui-btn-icon-notext:after {
.ui-input-clear.ui-btn-icon-notext:after,
.ui-table .ui-controlgroup .ui-controlgroup-controls .ui-btn-icon-notext:after {
margin-top: -11px;
}
/* fix text-indent when trying to use custom icons on iconpos-notext buttons */
......@@ -1389,7 +1429,201 @@ html .ui-filterable {
.list li a {
text-decoration: none;
}
/* listview */
/* ================================== listview ============================ */
/* responsive listview */
.ui-listview.responsive > li.ui-first-child:only-child {
border-bottom-right-radius: .3125em;
border-bottom-left-radius: .3125em;
-webkit-border-bottom-right-radius: .3125em;
-webkit-border-bottom-left-radius: .3125em;
}
.ui-listview.responsive > li:only-child > a.ui-btn {
border-bottom-width: 1px;
}
/* icon size in regular listview */
.ui-listview.responsive li .ui-btn .ui-li-icon-custom:after {
font-size: 1.5em;
padding: 0.5em 0.1em;
}
/* text padding in regular listview */
.ui-listview.responsive > .ui-li-has-icon > .ui-btn,
.ui-listview.responsive > .ui-li-static.ui-li-has-icon {
padding-left: 3.5em;
}
/* First breakpoint is 48em (768px). 3 column layout. Tiles 250x250 pixels incl. margin at the breakpoint. */
@media ( min-width: 48em ) {
/* TODO: fix this - app icons */
.ui-listview.responsive .ui-li-has-thumb > img:first-child,
.ui-listview.responsive .ui-li-has-thumb > .ui-btn > img:first-child,
.ui-listview.responsive .ui-li-has-thumb .ui-li-thumb {
max-width: 8em;
max-height: 8em;
left: 20%;
top: 5%;
}
/* limit controlbar width */
html .ui-page .ui-controlbar.responsive,
html form.responsive,
html form {
max-width: 40em; /* 640px */
margin: 0 auto;
clear: both;
}
.ui-listview.responsive li {
float: left;
width: 30.9333%; /* 33.3333% incl. 2 x 1.2% margin */
height: 14.5em; /* 232p */
margin: .5625em 1.2%;
}
.ui-listview.responsive li > .ui-btn {
-webkit-box-sizing: border-box; /* include padding and border in height so we can set it to 100% */
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
height: 100%;
border-bottom-width: 1px;
}
.ui-listview.responsive li.ui-li-has-thumb .ui-li-thumb,
.ui-listview.responsive li.ui-li-has-icon .ui-li-icon-custom {
height: auto; /* To keep aspect ratio. */
max-width: 100% !important;
max-height: none;
}
/* Overwrite custom icon width 22px */
.ui-listview.responsive li span.ui-li-icon-custom {
width: 100% !important;
}
/* Make all list items and anchors inherit the border-radius from the UL. */
.ui-listview.responsive li,
.ui-listview.responsive li .ui-btn,
.ui-listview.responsive .ui-li-thumb,
.ui-listview.responsive .ui-li-icon-custom {
-webkit-border-radius: inherit;
border-radius: inherit;
}
/* Hide the icon */
.ui-listview.responsive .ui-btn-icon-right:after {
display: none;
}
/* Enlarge custom icon */
.ui-listview.responsive li .ui-btn .ui-li-icon-custom:after {
font-size: 3em;
}
/* Align center */
.ui-listview.responsive li > .ui-btn {
text-align: center;
}
/* Make text wrap. */
.ui-listview.responsive h1,
.ui-listview.responsive p {
white-space: normal;
overflow: visible;
position: absolute;
left: 0;
right: 0;
}
/* Text position */
.ui-listview.responsive h1 {
font-size: 1.25em;
margin: 0;
padding: .125em 1em;
bottom: 40%;
}
.ui-listview.responsive p {
font-size: 1em;
margin: 0;
padding: 0 1.25em;
min-height: 40%;
bottom: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* Semi transparent background and different position if there is a thumb. The button has overflow hidden so we don't need to set border-radius. */
.ui-listview.responsive .ui-li-has-thumb h1,
.ui-listview.responsive .ui-li-has-thumb p,
.ui-listview.responsive .ui-li-has-icon h1,
.ui-listview.responsive .ui-li-has-icon p,{
background: #111;
background: rgba(0,0,0,.8);
}
.ui-listview.responsive .ui-li-has-thumb h1,
.ui-listview.responsive .ui-li-has-icon h1 {
bottom: 25%;
}
.ui-listview.responsive .ui-li-has-thumb p,
.ui-listview.responsive .ui-li-has-icon p{
min-height: 25%;
}
/* ui-li-aside has class .ui-li-desc as well so we have to override some things. */
.ui-listview.responsive .ui-li-aside {
padding: .125em .625em;
width: auto;
min-height: 0;
top: 0;
left: auto;
bottom: auto;
/* Custom styling. */
background: #990099;
background: rgba(153,0,153,.85);
-webkit-border-top-right-radius: inherit;
border-top-right-radius: inherit;
-webkit-border-bottom-left-radius: inherit;
border-bottom-left-radius: inherit;
-webkit-border-bottom-right-radius: 0;
border-bottom-right-radius: 0;
}
/* Animate focus and hover style, and resizing. */
.ui-listview.responsive li,
.ui-listview.responsive .ui-btn {
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-o-transition: all 500ms ease;
-ms-transition: all 500ms ease;
transition: all 500ms ease;
}
}
/* Second breakpoint is 63.75em (1020px). 4 column layout. Tiles will be 250x250 pixels incl. margin again at the breakpoint. */
@media ( min-width: 63.75em ) {
/* Set a max-width for the last breakpoint to prevent too much stretching on large screens.
By setting the max-width equal to the breakpoint width minus padding we keep square tiles. */
/* responsive content */
html form.responsive,
html form,
html .ui-page .ui-content-element.responsive,
html .ui-page .ui-listview.responsive,
html .ui-page .ui-controlbar.responsive {
max-width: 62.5em; /* 1000px */
margin: 0 auto;
clear: both;
}
/* Enlarge custom icon */
.ui-listview.responsive li .ui-btn .ui-li-icon-custom:after {
font-size: 4em;
}
/* Align center */
.ui-listview.responsive li > .ui-btn {
text-align: center;
}
/* Overwrite custom icon width 22px */
.ui-listview.responsive li span.ui-li-icon-custom {
width: 100% !important;
}
/* Because of the 1000px max-width the width will always be 230px (and margin left/right 10px),
but we stick to percentage values for demo purposes. */
.ui-listview.responsive li {
width: 23%;
height: 230px;
margin: .625em 1%;
}
}
/* handle listviews inside panels */
html .ui-panel-inner .ui-listview .ui-li-divider {
font-weight: bold;
padding: 0.5em 1em;
......@@ -1419,7 +1653,64 @@ html .ui-panel-inner .ui-listview li a {
padding: 0.2em 0;
}
/* allow checkbox and radio in split listview */
html .ui-listview li.ui-li-has-alt a.ui-btn.ui-icon-caret-right:after,
html .ui-listview li.ui-li-has-alt a.ui-btn.ui-icon-carat-r:after {
content: "";
}
html .ui-listview li div.ui-radio,
html .ui-listview li div.ui-checkbox {
border-left-width: 0px;
-moz-box-sizing: border-box;
height: 100%;
margin: 0;
padding: 0;
position: absolute;
right: 0;
top: 0;
width: 2.5em;
z-index: 2;
}
html .ui-listview li div.ui-radio label,
html .ui-listview li div.ui-checkbox label {
border-radius: .375em;
height: 100%;
width: auto;
}
html .ui-listview li div.ui-radio,
html .ui-listview li div.ui-radio label,
html .ui-listview li div.ui-checkbox,
html .ui-listview li div.ui-checkbox label {
border-radius: 0;
-webkit-border-radius: 0;
border-top-width: 1px;
border-bottom-width: 0;
}
html .ui-listview li.ui-first-child div.ui-radio,
html .ui-listview li.ui-first-child div.ui-radio label,
html .ui-listview li.ui-first-child div.ui-checkbox,
html .ui-listview li.ui-first-child div.ui-checkbox label {
border-top-right-radius: inherit;
-webkit-border-top-right-radius: inherit;
}
html .ui-listview li.ui-last-child div.ui-radio,
html .ui-listview li.ui-last-child div.ui-radio label,
html .ui-listview li.ui-last-child div.ui-checkbox,
html .ui-listview li.ui-last-child div.ui-checkbox label{
border-bottom-right-radius: inherit;
-webkit-border-bottom-right-radius: inherit;
border-bottom-width: 1px;
margin-bottom: -1px;
}
/* reposition radio and checkbox icons */
html .ui-listview li .ui-radio .ui-btn.ui-radio-on:after,
html .ui-listview li .ui-radio .ui-btn.ui-radio-off:after,
html .ui-listview li .ui-checkbox .ui-btn.ui-checkbox-on:after,
html .ui-listview li .ui-checkbox .ui-btn.ui-checkbox-off:after {
margin: -14px -10px 0;
}
/* overwrite icon positioning for fontawesome */
/*
.ui-panel-inner .ui-btn-icon-right:after,
.ui-panel-inner .ui-listview > li > .ui-btn[class*="ui-icon-"]:after {
right: 0;
......@@ -1428,7 +1719,9 @@ html .ui-panel-inner .ui-listview li a {
.ui-listview > li > .ui-btn[class*="ui-icon-"]:after {
right: 0.3625em;
}
*/
/* reset */
/*
html.ui-nosvg .ui-btn-icon-right:after,
html.ui-nosvg .ui-panel-inner .ui-listview > li > .ui-btn[class*="ui-icon-"]:after {
right: 0.5625em;
......@@ -1439,7 +1732,7 @@ html.ui-nosvg .ui-panel-inner .ui-listview > li > .ui-btn[class*="ui-icon-"]:aft
html.ui-nosvg .ui-btn-icon-left:after {
left: 0.5625em;
}
*/
/* custom icons */
.ui-listview li span.ui-li-icon-custom {
bottom: 0;
......@@ -1493,7 +1786,7 @@ html.ui-nosvg .ui-btn-icon-left:after {
.ui-checkbox .ui-btn.ui-checkbox-off:after {
background: 0 none;
background-image: none;
margin: -9px 2px 0;
margin: -11px 2px 0;
}
/* overwrite JQM showing focus icon */
.ui-icon-check:after,
......@@ -1582,6 +1875,10 @@ html .ui-select .ui-btn-icon-left:after,
html .ui-select .ui-btn-icon-right:after {
margin-top: -12px;
}
html .ui-select .ui-btn-corner-all,
html .ui-select .ui-btn.ui-corner-all {
border-radius: .375em;
}
.ui-input-text .ui-input-clear:hover {
background: transparent;
}
......@@ -1598,8 +1895,6 @@ html .ui-header .ui-header-logo img {
}
}
/* breadcrumbs - need work!
.ui-breadcrumbs {
background: none repeat scroll 0 0 #DDDDDD;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7