Skip to content

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

css: updated to latest generator css

parent 4ca43fc2
Hide whitespace changes
Inline Side-by-side
Showing with 171 additions and 283 deletions
css/css.css
View file @ b6a3bf4a
...@@ -4,7 +4,8 @@ html body .ui-select .ui-btn.invalid, ...@@ -4,7 +4,8 @@ html body .ui-select .ui-btn.invalid,
html body .required.invalid ~ label { html body .required.invalid ~ label {
border: 1px solid red !important; border: 1px solid red !important;
} }
html body label.required_label:after { html body label.required_label:not(.ui-btn):after,
html body legend.required_label:after {
content: "*"; content: "*";
position: absolute; position: absolute;
width: 100%; width: 100%;
...@@ -172,7 +173,7 @@ span.static { ...@@ -172,7 +173,7 @@ span.static {
} }
} }
.downloads:before { .downloads:before {
content: "·"; content: "·";
} }
.inline-icon { .inline-icon {
padding: 0 .5em; padding: 0 .5em;
...@@ -326,6 +327,11 @@ html body form input.secure_form { ...@@ -326,6 +327,11 @@ html body form input.secure_form {
display: none; display: none;
} }
/* ============================== breadcrumbs ============================== */ /* ============================== breadcrumbs ============================== */
/* make sure content does not flow next to crumbs*/
.crumbs {
display: block;
clear: both;
}
.crumbs a.ui-btn, .crumbs a.ui-btn,
.crumbs a.ui-link { .crumbs a.ui-link {
font-size: 80%; font-size: 80%;
...@@ -358,11 +364,6 @@ html body form input.secure_form { ...@@ -358,11 +364,6 @@ html body form input.secure_form {
margin-top: -6px; margin-top: -6px;
font-size: 1.2em; font-size: 1.2em;
} }
@media (max-width: 40em) {
.crumbs {
display: none;
}
}
/* ============================== status loader ============================== */ /* ============================== status loader ============================== */
/* fadeout "heartbeat" transition with 1sec delay */ /* fadeout "heartbeat" transition with 1sec delay */
.loader_icon { .loader_icon {
...@@ -414,7 +415,7 @@ html body div.ui-panel a.unenhanced { ...@@ -414,7 +415,7 @@ html body div.ui-panel a.unenhanced {
background: none repeat scroll 0 center rgba(0, 0, 0, 0); background: none repeat scroll 0 center rgba(0, 0, 0, 0);
border: 0 none; border: 0 none;
font-size: 0.7em; font-size: 0.7em;
padding-top: 0.25em; padding-top: 0.25em;
margin: 0; margin: 0;
} }
html body div.ui-panel a.unenhanced:focus, html body div.ui-panel a.unenhanced:focus,
...@@ -435,13 +436,28 @@ html body div.ui-panel a.unenhanced:active { ...@@ -435,13 +436,28 @@ html body div.ui-panel a.unenhanced:active {
width: 100%; width: 100%;
} }
/* ============================= content grid ============================= */ /* ============================= content grid ============================= */
.span_1, .span_2 { /* everything wrapped in a span as sibling of content goes top! */
html div.ui-content > .span_1,
html div.ui-content > .span_2,
html div.ui-content > .span_3 {
vertical-align: top;
}
.span_1 {
width: 96%; /* 2% padding-left/right */
display: block;
}
.span_2 {
width: 45%;
display: inline-block;
}
.span_3 {
width: 29%;
display: inline-block; display: inline-block;
}
.span_1, .span_2, .span_3 {
vertical-align: middle; vertical-align: middle;
width: 45%;
padding-left: 2%; padding-left: 2%;
padding-right: 2%; padding-right: 2%;
/* ~ 98% for 2 col layout */
padding-top: 2%; padding-top: 2%;
} }
/* form need no padding and align top */ /* form need no padding and align top */
...@@ -450,53 +466,39 @@ form .span_1, form .span_2 { ...@@ -450,53 +466,39 @@ form .span_1, form .span_2 {
padding-left: 0%; padding-left: 0%;
padding-right: 0%; padding-right: 0%;
} }
.span_1 textarea { .span_2 textarea {
width: 57.5%; width: 57.5%;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
} }
.span_2 {
width: 96% /* 2% padding-left/right */
}
form .span_1 { form .span_1 {
width: 100%;
}
form .span_2 {
width: 50%; width: 50%;
} }
form .span_3 {
width: 33%;
}
/* mh.... no!*/
form {
margin-left: auto;
margin-right: auto;
}
@media (max-width: 40em) { @media (max-width: 40em) {
.span_1, .span_2, form .span_1, form .span_2 { form {
width: 100%; max-width: 80%; /* allow scrolling! */
padding: .25em 0; margin: auto;
} }
.span_1 textarea { .span_1, .span_2, .span_3, form .span_1, form .span_2, form .span_3 {
width: 100%; width: auto; /* 100 does not work... why? */
display: block;
padding: .25em 0;
} }
} .span_2 textarea {
.span_1 .ui-table-wrapper .ui-input-search,
.span_2 .ui-table-wrapper .ui-input-search{
width: auto;
margin: 0;
box-shadow: none;
-webkit-box-shadow: none;
border-width: 0;
border-bottom-width: 1px;
}
/* this should always be set on the parent whatever widget (controlbar...)
.span_1 .ui-input-search,
.span_2 .ui-input-search {
width: 50%;
}
@media (max-width: 45em) {
.span_1 .ui-input-search,
.span_2 .ui-input-search {
width: 100%; width: 100%;
} }
} }
@media (min-width: 45em) {
.span_1 .ui-input-search,
.span_2 .ui-input-search {
width: 60%;
}
}
*/
/* ======================== status (red...) ========================= */ /* ======================== status (red...) ========================= */
html body div.ui-page a.ui-btn.error.status, html body div.ui-page a.ui-btn.error.status,
html body div.ui-page a.ui-btn.error.status:hover, html body div.ui-page a.ui-btn.error.status:hover,
...@@ -546,71 +548,14 @@ tbody .large { ...@@ -546,71 +548,14 @@ tbody .large {
.dyno { .dyno {
padding-top: 1em; padding-top: 1em;
padding-bottom: 1em; padding-bottom: 1em;
width: 100%;
} }
.ui-panel .dyno { .ui-panel .dyno,
.ui-content .span_1 .dyno,
.ui-content .span_2 .dyno,
.ui-content .span_3 .dyno {
padding: 0; padding: 0;
} }
.dyno > div.ui-table-wrapper:first-child {
/* ================================= CUSTOM CSS =========================== */ margin: 0;
/* no hover on listitems */
.teaser {
display: block;
margin-left: auto;
margin-right: auto;
max-width: 300px;
}
@media (max-width: 24em) {
.teaser {
padding-top: 3em;
}
}
body {
/* background: url("../img/bg.jpg") repeat scroll 0 0 #DDCBBF !important; */
}
@media (min-width: 24em) {
.ui-page-theme-slapos-white ul.ui-listview .ui-btn:hover {
background: #fff;
-webkit-box-shadow: 0 0 6px #0fbabd;
-moz-box-shadow: 0 0 6px #0fbabd;
box-shadow: 0 0 6px #0fbabd;
}
}
.ui-page-theme-slapos-white, .ui-page-theme-slapos-white .ui-panel-wrapper {
background: none repeat scroll 0 0 #FFFFFF;
color: #aaa;
}
html .ui-page-theme-slapos-white .ui-input-clear:active,
html .ui-page-theme-slapos-white .ui-input-clear.ui-btn-active,
html .ui-page-theme-slapos-white .ui-input-action:active,
html .ui-page-theme-slapos-white .ui-input-action.ui-btn-active {
background: #fff !important;
}
/* Header Buttons */
.ui-page-theme-slapos-white .ui-header .ui-btn,
html .ui-bar-slapos-white .ui-header .ui-btn,
html .ui-bar-slapos-white.ui-header .ui-btn,
html .ui-body-slapos-white .ui-header .ui-btn,
html body .ui-header .ui-btn.ui-btn-slapos-white,
html body .ui-header .ui-group-theme-slapos-white .ui-btn,
.ui-header [class*="ui-group-theme-"] .ui-btn.ui-btn-slapos-white,
/* Button visited */
.ui-page-theme-slapos-white .ui-header .ui-btn:visited,
html .ui-bar-slapos-white .ui-header .ui-btn:visited,
html .ui-body-slapos-white .ui-header .ui-btn:visited,
html body .ui-header .ui-btn.ui-btn-slapos-white:visited,
html body .ui-header .ui-group-theme-slapos-white .ui-btn:visited,
.ui-header [class*="ui-group-theme-"] .ui-btn.ui-btn-slapos-white:visited,
.ui-page-theme-slapos-white .ui-header a:visited,
html .ui-bar-slapos-white .ui-header a:visited,
html .ui-body-slapos-white .ui-header a:visited,
html body .ui-header a.ui-btn-slapos-white:visited,
html body .ui-header .ui-group-theme-slapos-white a:visited,
.ui-header [class*="ui-group-theme-"] a.ui-btn-slapos-white:visited {
color: #aaa;
}
.override_header .ui-wrap a.ui-btn,
.override_header .ui-controlgroup a.ui-btn,
.override_header .ui-wrap a.ui-btn:before {
border: 0 none;
} }
css/themes.css
View file @ b6a3bf4a
...@@ -119,7 +119,9 @@ html .ui-page-theme-slapos-white .ui-table-caption { ...@@ -119,7 +119,9 @@ html .ui-page-theme-slapos-white .ui-table-caption {
color: #aaa; color: #aaa;
text-shadow: #FFF 0px 1px 0px; text-shadow: #FFF 0px 1px 0px;
} }
html .ui-page-theme-slapos-white .ui-table { html .ui-page-theme-slapos-white .ui-table,
html .ui-page-theme-slapos-white .ui-listview.ui-icon-grid li,
html .ui-page-theme-slapos-white .ui-listview.ui-image-grid li {
background-color: #fff; background-color: #fff;
border-color: #aaa; border-color: #aaa;
} }
...@@ -361,7 +363,9 @@ html .ui-page-theme-slapos-black .ui-table-caption{ ...@@ -361,7 +363,9 @@ html .ui-page-theme-slapos-black .ui-table-caption{
text-shadow: 0 1px 0 #111111; text-shadow: 0 1px 0 #111111;
} }
/* tables & controlbars */ /* tables & controlbars */
.ui-page-theme-slapos-black .ui-table { .ui-page-theme-slapos-black .ui-table,
html .ui-page-theme-slapos-black .ui-listview.ui-icon-grid li,
html .ui-page-theme-slapos-black .ui-listview.ui-image-grid li{
background-color: #222; background-color: #222;
border-color: rgb(232, 232, 232); border-color: rgb(232, 232, 232);
border-color: rgba(255,255,255,.3); border-color: rgba(255,255,255,.3);
...@@ -622,17 +626,18 @@ html body .ui-group-theme-slapos-black .ui-li-count, ...@@ -622,17 +626,18 @@ html body .ui-group-theme-slapos-black .ui-li-count,
right: 0; right: 0;
line-height: 1.75em; line-height: 1.75em;
top: -14px; top: -14px;
background-color: #0FBABD; background-color: #79AC21;
background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0,#0FBABD),color-stop(1,#94f2f1)); background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0,#79AC21),color-stop(1,#A3ED24));
background-image: -webkit-linear-gradient(top, #0FBABD, #94f2f1); background-image: -webkit-linear-gradient(top, #79AC21, #A3ED24);
background-image: linear-gradient(top, #0FBABD, #94f2f1); background-image: linear-gradient(top, #79AC21, #A3ED24);
background-image: -moz-linear-gradient(top, #0FBABD, #94f2f1); background-image: -moz-linear-gradient(top, #79AC21, #A3ED24);
background-image: -o-linear-gradient(top, #0FBABD, #94f2f1); background-image: -o-linear-gradient(top, #79AC21, #A3ED24);
background-image: -ms-linear-gradient(top, #0FBABD, #94f2f1); background-image: -ms-linear-gradient(top, #79AC21, #A3ED24);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#0FBABD', EndColorStr='#94f2f1'); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#79AC21', EndColorStr='#A3ED24');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#0FBABD', EndColorStr='#94f2f1')"; -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#79AC21', EndColorStr='#A3ED24')";
} }
/* Bar */
html hr.ui-hr-active,
/* Button down */ /* Button down */
html .ui-page-theme-slapos-white .ui-bar-active, /* if we do more like this, we need to have a proper theme */ html .ui-page-theme-slapos-white .ui-bar-active, /* if we do more like this, we need to have a proper theme */
.ui-page-theme-slapos-white .ui-btn:active, .ui-page-theme-slapos-white .ui-btn:active,
...@@ -726,17 +731,18 @@ html .ui-page-theme-slapos-black .ui-collapsible-set .ui-collapsible h1 a.ui-btn ...@@ -726,17 +731,18 @@ html .ui-page-theme-slapos-black .ui-collapsible-set .ui-collapsible h1 a.ui-btn
html .ui-page-theme-slapos-black .ui-collapsible-set .ui-collapsible h1 a.ui-btn.ui-btn-active, html .ui-page-theme-slapos-black .ui-collapsible-set .ui-collapsible h1 a.ui-btn.ui-btn-active,
/* LOADER */ /* LOADER */
html .ui-loader.ui-body-loader-active { html .ui-loader.ui-body-loader-active {
background-color: #94f2f1; background-color: #A3ED24;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0fbabd), to(#94f2f1)); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#79AC21), to(#A3ED24));
background: -webkit-linear-gradient(bottom, #0fbabd, #94f2f1); background: -webkit-linear-gradient(bottom, #79AC21, #A3ED24);
background: linear-gradient(bottom, #0fbabd, #94f2f1); background: linear-gradient(bottom, #79AC21, #A3ED24);
background: -moz-linear-gradient(bottom, #0fbabd, #94f2f1); background: -moz-linear-gradient(bottom, #79AC21, #A3ED24);
background: -o-linear-gradient(bottom, #0fbabd, #94f2f1); background: -o-linear-gradient(bottom, #79AC21, #A3ED24);
background: -ms-linear-gradient(bottom, #0fbabd, #94f2f1); background: -ms-linear-gradient(bottom, #79AC21, #A3ED24);
color: #fff !important; color: #fff !important;
text-shadow: none; text-shadow: none;
cursor: pointer; cursor: pointer;
} }
/* Table rows ,no pointer... */ /* Table rows ,no pointer... */
html table.ui-table tbody tr:hover td { html table.ui-table tbody tr:hover td {
cursor: default; cursor: default;
...@@ -766,6 +772,8 @@ html .ui-bar-slapos-white .ui-btn:focus, ...@@ -766,6 +772,8 @@ html .ui-bar-slapos-white .ui-btn:focus,
html .ui-body-slapos-white .ui-btn:focus, html .ui-body-slapos-white .ui-btn:focus,
html body .ui-group-theme-slapos-white .ui-btn:focus, html body .ui-group-theme-slapos-white .ui-btn:focus,
html head + body .ui-btn.ui-btn-slapos-white:focus, html head + body .ui-btn.ui-btn-slapos-white:focus,
/* select */
html body .ui-select .ui-btn.ui-focus,
/* Focus buttons and text inputs with div wrap */ /* Focus buttons and text inputs with div wrap */
.ui-overlay-slapos-white .ui-focus, .ui-overlay-slapos-white .ui-focus,
.ui-page-theme-slapos-white .ui-focus, .ui-page-theme-slapos-white .ui-focus,
...@@ -789,9 +797,9 @@ html .ui-body-slapos-black .ui-focus, ...@@ -789,9 +797,9 @@ html .ui-body-slapos-black .ui-focus,
html body .ui-group-theme-slapos-black .ui-focus, html body .ui-group-theme-slapos-black .ui-focus,
html head + body .ui-btn-slapos-black.ui-focus, html head + body .ui-btn-slapos-black.ui-focus,
html head + body .ui-body-slapos-black.ui-focus{ html head + body .ui-body-slapos-black.ui-focus{
-webkit-box-shadow: 0 0 6px #0fbabd; -webkit-box-shadow: 0 0 6px #79AC21;
-moz-box-shadow: 0 0 6px #0fbabd; -moz-box-shadow: 0 0 6px #79AC21;
box-shadow: 0 0 6px #0fbabd; box-shadow: 0 0 6px #79AC21;
} }
/* ================================ overwriting widgets ==================================== */ /* ================================ overwriting widgets ==================================== */
...@@ -878,18 +886,23 @@ html .ui-header .ui-subheader { ...@@ -878,18 +886,23 @@ html .ui-header .ui-subheader {
.ui-fieldcontain div.ui-controlgroup, .ui-fieldcontain div.ui-controlgroup,
.ui-fieldcontain div.ui-input-text, .ui-fieldcontain div.ui-input-text,
.ui-fieldcontain div.ui-input-search, .ui-fieldcontain div.ui-input-search,
.ui-fieldcontain div.ui-select { .ui-fieldcontain div.ui-select,
.ui-fieldcontain legend,
.ui-fieldcontain ul.ui-listview {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
} }
.ui-fieldcontain div.ui-controlgroup-label, .ui-fieldcontain div.ui-controlgroup-label,
.ui-fieldcontain div.ui-controlgroup { .ui-fieldcontain div.ui-controlgroup,
.ui-fieldcontain legend {
vertical-align: top; vertical-align: top;
padding-top: .5em; padding-top: .5em;
padding-bottom: .5em; padding-bottom: .5em;
} }
.ui-fieldcontain label:not(.ui-btn), .ui-fieldcontain label:not(.ui-btn),
.ui-fieldcontain div.ui-controlgroup-label { .ui-fieldcontain div.ui-controlgroup-label,
/* NOTE: this is for custom made legends used with listview inside forms! */
.ui-fieldcontain > legend {
/* width: 46% *//*40% not working either*/ /* width: 46% *//*40% not working either*/
max-width: 30%; max-width: 30%;
min-width: 30%; min-width: 30%;
...@@ -901,7 +914,8 @@ html .ui-header .ui-subheader { ...@@ -901,7 +914,8 @@ html .ui-header .ui-subheader {
.ui-fieldcontain div.ui-select { .ui-fieldcontain div.ui-select {
width: 46%; width: 46%;
} }
.ui-fieldcontain div.ui-controlgroup { .ui-fieldcontain div.ui-controlgroup,
.ui-fieldcontain ul.ui-listview {
width: 57%; width: 57%;
} }
.ui-fieldcontain div.ui-select .ui-btn { .ui-fieldcontain div.ui-select .ui-btn {
...@@ -945,6 +959,7 @@ html div.ui-page div.ui-content .ui-content-element { ...@@ -945,6 +959,7 @@ html div.ui-page div.ui-content .ui-content-element {
margin: 1em auto; margin: 1em auto;
text-align: center; text-align: center;
} }
/* TODO: remove this!!! */
html div.ui-page div.ui-content .ui-content-element > .ui-btn { html div.ui-page div.ui-content .ui-content-element > .ui-btn {
max-width: 10%; max-width: 10%;
margin: 1em auto 0; margin: 1em auto 0;
...@@ -1441,9 +1456,10 @@ html body .ui-page .ui-listview > li h6 { ...@@ -1441,9 +1456,10 @@ html body .ui-page .ui-listview > li h6 {
/* pad controlbar if its after a listview (which may be inset)*/ /* pad controlbar if its after a listview (which may be inset)*/
.ui-content .ui-listview ~ .ui-controlbar { .ui-content .ui-listview ~ .ui-controlbar {
margin-top: 1em; margin-top: 1em;
clear: both; /* make sure it drops below */
} }
/* First breakpoint is at 20em (320px) 2 column layout. Tiles 250x250px */ /* First breakpoint is at 20em (320px) 2 column layout. Tiles 250x250px */
@media ( min-width: 24em) { @media (min-width: 24em) {
.ui-listview.responsive a.ui-btn { .ui-listview.responsive a.ui-btn {
padding: .5em; padding: .5em;
} }
...@@ -1507,10 +1523,34 @@ html body .ui-page .ui-listview > li h6 { ...@@ -1507,10 +1523,34 @@ html body .ui-page .ui-listview > li h6 {
font-size: 3em; font-size: 3em;
} }
/* Align center */ /* Align center */
.ui-listview.responsive li > .ui-btn { .ui-listview.responsive.ui-icon-grid li > .ui-btn {
text-align: center; text-align: center;
} }
/* Make text wrap. */ /* ICONGRID: Make text wrap. */
.ui-listview.responsive.ui-icon-grid h1,
.ui-listview.responsive.ui-icon-grid p {
white-space: normal;
overflow: visible;
position: absolute;
left: 0;
right: 0;
}
/* ICONGRID Text position */
.ui-listview.responsive.ui-icon-grid h1 {
font-size: 1.25em;
margin: 0;
padding: .125em 1em;
bottom: 40%;
}
.ui-listview.responsive.ui-icon-grid p {
font-size: 1em;
margin: 0;
padding: 0 1.25em;
min-height: 40%;
bottom: 0;
}
/* REGULAR: Make text wrap. */
.ui-listview.responsive h1, .ui-listview.responsive h1,
.ui-listview.responsive h2, .ui-listview.responsive h2,
.ui-listview.responsive h3, .ui-listview.responsive h3,
...@@ -1536,7 +1576,7 @@ html body .ui-page .ui-listview > li h6 { ...@@ -1536,7 +1576,7 @@ html body .ui-page .ui-listview > li h6 {
.ui-listview.responsive .ui-li-has-thumb h1, .ui-listview.responsive .ui-li-has-thumb h1,
.ui-listview.responsive .ui-li-has-thumb p, .ui-listview.responsive .ui-li-has-thumb p,
.ui-listview.responsive .ui-li-has-icon h1, .ui-listview.responsive .ui-li-has-icon h1,
.ui-listview.responsive .ui-li-has-icon p,{ .ui-listview.responsive .ui-li-has-icon p {
background: #111; background: #111;
background: rgba(0,0,0,.8); background: rgba(0,0,0,.8);
} }
...@@ -1556,9 +1596,8 @@ html body .ui-page .ui-listview > li h6 { ...@@ -1556,9 +1596,8 @@ html body .ui-page .ui-listview > li h6 {
top: 0; top: 0;
left: auto; left: auto;
bottom: auto; bottom: auto;
/* Custom styling. */ /* Custom styling. */
background: #990099;
background: rgba(153,0,153,.85);
-webkit-border-top-right-radius: inherit; -webkit-border-top-right-radius: inherit;
border-top-right-radius: inherit; border-top-right-radius: inherit;
-webkit-border-bottom-left-radius: inherit; -webkit-border-bottom-left-radius: inherit;
...@@ -1577,7 +1616,7 @@ html body .ui-page .ui-listview > li h6 { ...@@ -1577,7 +1616,7 @@ html body .ui-page .ui-listview > li h6 {
} }
} }
/* First breakpoint is 48em (768px). 3 column layout. Tiles 250x250 pixels */ /* First breakpoint is 48em (768px). 3 column layout. Tiles 250x250 pixels */
@media ( min-width: 48em ) { @media (min-width: 48em) {
/* limit controlbar width */ /* limit controlbar width */
html .ui-page .ui-controlbar.responsive { html .ui-page .ui-controlbar.responsive {
...@@ -1594,7 +1633,7 @@ html body .ui-page .ui-listview > li h6 { ...@@ -1594,7 +1633,7 @@ html body .ui-page .ui-listview > li h6 {
} }
/* Second breakpoint is 63.75em (1020px). 4 column layout. Tiles will be 250x250 pixels incl. margin again at the breakpoint. */ /* 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 ) { @media (min-width: 63.75em) {
/* Set a max-width for the last breakpoint to prevent too much stretching on large screens. /* 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. */ By setting the max-width equal to the breakpoint width minus padding we keep square tiles. */
...@@ -1738,6 +1777,19 @@ html .ui-panel .ui-listview li .ui-checkbox .ui-btn.ui-checkbox-off:after { ...@@ -1738,6 +1777,19 @@ html .ui-panel .ui-listview li .ui-checkbox .ui-btn.ui-checkbox-off:after {
width: 22px; width: 22px;
top: 29%; /* no friend... */ top: 29%; /* no friend... */
} }
.ui-listview.responsive.ui-icon-grid li a,
.ui-listview.responsive.ui-image-grid li a {
border: 1px solid #aaa;
}
@media (max-width: 32em) {
.ui-listview.responsive.ui-icon-grid li:not(:first-child) a,
.ui-listview.responsive.ui-image-grid li:not(:first-child) a {
border-top-width: 0;
}
}
.ui-listview.ui-icon-grid li span.ui-li-icon-custom {
top: 0;
}
.ui-listview li span.ui-li-icon-custom:after { .ui-listview li span.ui-li-icon-custom:after {
background: none repeat scroll 0 center transparent; background: none repeat scroll 0 center transparent;
} }
...@@ -1831,6 +1883,13 @@ html body .ui-input-search .ui-input-clear:active { ...@@ -1831,6 +1883,13 @@ html body .ui-input-search .ui-input-clear:active {
-webkit-box-shadow: none /* iOS3 */ !important; -webkit-box-shadow: none /* iOS3 */ !important;
box-shadow: none /* iOS3 */ !important; box-shadow: none /* iOS3 */ !important;
} }
/* ================================== hr ============================ */
.ui-hr {
height: 2px;
margin-left: auto;
margin-right: auto;
width: 80%;
}
/* ================================== collapsibles ============================ */ /* ================================== collapsibles ============================ */
/* collapsibles - fix default 200% font-size set by browser */ /* collapsibles - fix default 200% font-size set by browser */
...@@ -1893,106 +1952,3 @@ html .ui-select .ui-btn.ui-corner-all { ...@@ -1893,106 +1952,3 @@ html .ui-select .ui-btn.ui-corner-all {
background: transparent; background: transparent;
} }
/* breadcrumbs - need work!
.ui-breadcrumbs {
background: none repeat scroll 0 0 #DDDDDD;
border-bottom: 1px solid #81898A;
box-shadow: 0 -7px 4px -6px #aaa inset;
-webkit-box-shadow: 0 -7px 4px -6px #aaa inset;
display: block;
margin: -15px -15px 0;
padding: 0.5em 0;
white-space: nowrap;
}
/* experimental ... thx http://fiddle.jshell.net/leaverou/EjE7c/show/light */
/* -moz-border-radius: 0.6em 10px 10px 0.6em / 0.6em 100px 100px 0.6em; */
/*
div.round {
background:
-moz-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
-moz-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
-moz-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
-moz-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
background:
-o-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
-o-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
-o-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
-o-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
background:
-webkit-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
-webkit-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
-webkit-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
-webkit-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
}
div, div.round {
background-position: bottom left, bottom right, top right, top left;
-moz-background-size: 50% 50%;
-webkit-background-size: 50% 50%;
background-size: 50% 50%;
background-repeat: no-repeat;
}*/
/*
.ui-breadcrumbs .ui-btn {
border-top-left-radius: .6em ;
border-bottom-left-radius: .6em;
border-top-right-radius: 10px / 100px;
border-bottom-right-radius: 10px / 100px;
border-right-width: 0;
padding-right: 2em;
overflow: visible;
margin: auto .5em;
padding-left: 30px;
font-weight: bold;
}
.ui-breadcrumbs .ui-btn.ui-btn-active {
cursor: default;
}
.ui-breadcrumbs .ui-btn:before {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background: none repeat scroll 0 0 transparent;
border-color: #DDDDDD #DDDDDD transparent;
border-style: solid;
border-width: 0.4em 2em 2em;
content: "";
display: block;
height: 0;
position: absolute;
right: -1.2em;
top: 0.25em;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
width: 0;
}
.ui-breadcrumbs .ui-btn.ui-last-child {
border-right-width: 1px;
padding-right: .5em;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
outline: 0 !important;
display: inline-block;
border-radius: .6em;
}
.ui-breadcrumbs .ui-btn.ui-last-child:before {
content: none;
}
.ui-breadcrumbs .ui-btn.ui-crumbs {
font-size: 70%;
max-width: 23%;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
margin: auto .5em;
}
.ui-breadcrumbs .ui-btn.ui-crumbs:after {
margin-top: -10px;
}*/
ext/libs/jquery-mobile/extensions.css
View file @ b6a3bf4a
...@@ -233,33 +233,6 @@ html .ui-table-caption { ...@@ -233,33 +233,6 @@ html .ui-table-caption {
padding: 0.25em 0; padding: 0.25em 0;
} }
/* font-size */
/*
html table.ui-table {
font-size: 90%;
}
html div.ui-table-wrapper-top > *,
html div.ui-table-wrapper-bottom > *,
html div.ui-collapsible-set {
font-size: 100%;
}
@media (min-width: 40em) {
html table.ui-table {
font-size: 80%;
}
html div.ui-collapsible-set table.ui-table {
font-size: 90%;
}
html div.ui-table-wrapper-top > *,
html div.ui-table-wrapper-bottom > *,
html div.ui-collapsible-set {
font-size: 90%;
}
html table thead th a.ui-btn {
font-size: 100%;
}
}
*/
/* shrink icon font-size (should not be set here...) */ /* shrink icon font-size (should not be set here...) */
.ui-page .ui-table-wrapper-top .ui-btn[class*="ui-icon-"]:after , .ui-page .ui-table-wrapper-top .ui-btn[class*="ui-icon-"]:after ,
.ui-page .ui-table-wrapper-bottom .ui-btn[class*="ui-icon-"]:after, .ui-page .ui-table-wrapper-bottom .ui-btn[class*="ui-icon-"]:after,
...@@ -353,14 +326,13 @@ html table.ui-table tbody th { ...@@ -353,14 +326,13 @@ html table.ui-table tbody th {
padding-top: 0; padding-top: 0;
width: auto; width: auto;
} }
/* NOTE: why? white is white and black is black... because hover should active swatch */
html table tbody th .ui-checkbox .ui-btn, html table tbody th .ui-checkbox .ui-btn,
html table tbody th .ui-checkbox .ui-btn:hover, html table tbody th .ui-checkbox .ui-btn:hover,
html table tbody th .ui-checkbox:hover,
html table tbody th .ui-radio .ui-btn, html table tbody th .ui-radio .ui-btn,
html table tbody th .ui-radio .ui-btn:hover, html table tbody th .ui-radio .ui-btn:hover,
/* why? white is white and black is black... html table tbody th .ui-radio:hover {
html table tbody td .ui-controlgroup-controls .ui-btn,
html table tbody td .ui-controlgroup-controls .ui-btn:hover */
{
background-color: transparent; background-color: transparent;
background-image: none; background-image: none;
} }
...@@ -509,9 +481,9 @@ html table tr td .ui-radio label.ui-btn { ...@@ -509,9 +481,9 @@ html table tr td .ui-radio label.ui-btn {
box-shadow: none /* iOS3 */ !important; box-shadow: none /* iOS3 */ !important;
} }
.ui-table-wrapper-top div > .ui-select, .ui-table-wrapper-top div > .ui-select,
.ui-table-wrapper-top div > .ui-btn:not(.ui-input-clear, .ui-input-action), .ui-table-wrapper-top div > .ui-btn:not(.ui-input-clear):not(.ui-input-action),
.ui-table-wrapper-bottom div > .ui-select, .ui-table-wrapper-bottom div > .ui-select,
.ui-table-wrapper-bottom div > .ui-btn:not(.ui-input-clear, .ui-input-action) { .ui-table-wrapper-bottom div > .ui-btn:not(.ui-input-clear):not(.ui-input-action) {
width: auto; width: auto;
margin: 0; margin: 0;
} }
...@@ -604,6 +576,16 @@ html table tr td .ui-radio label.ui-btn { ...@@ -604,6 +576,16 @@ html table tr td .ui-radio label.ui-btn {
padding-top: 0; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
} }
/* search input */
.ui-table-wrapper .ui-input-search,
.ui-table-wrapper .ui-input-text {
width: auto;
margin: 0;
box-shadow: none;
-webkit-box-shadow: none;
border-width: 0;
border-bottom-width: 1px;
}
.ui-table .ui-controlgroup-controls .ui-btn-icon-notext { .ui-table .ui-controlgroup-controls .ui-btn-icon-notext {
padding-top: .5em; padding-top: .5em;
...@@ -805,9 +787,9 @@ html table tr td .ui-radio label.ui-btn { ...@@ -805,9 +787,9 @@ html table tr td .ui-radio label.ui-btn {
/* ================================= contolbar ============================*/ /* ================================= contolbar ============================*/
.ui-controlbar { .ui-controlbar {
position: static; position: static;
text-align: center; /* text-align: center; */
white-space: pre-line; white-space: pre-line;
line-height: 0; /* line-height: 0; will prevent any content inside a controlbar */
display: block; display: block;
margin: 0 auto 1em; margin: 0 auto 1em;
} }
...@@ -820,11 +802,13 @@ html table tr td .ui-radio label.ui-btn { ...@@ -820,11 +802,13 @@ html table tr td .ui-radio label.ui-btn {
line-height: 1.4em; line-height: 1.4em;
margin: 0 auto 1em; margin: 0 auto 1em;
} }
/* this breaks so much...
.ui-controlbar > * { .ui-controlbar > * {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
padding: 0; padding: 0;
} }
*/
.ui-controlbar .ui-input-search { .ui-controlbar .ui-input-search {
display: block; display: block;
margin: 0 auto; margin: 0 auto;
...@@ -844,7 +828,7 @@ html body .ui-controlbar .ui-btn[class*="ui-icon-"]:after { ...@@ -844,7 +828,7 @@ html body .ui-controlbar .ui-btn[class*="ui-icon-"]:after {
} }
/* remove margin on controlbar buttons */ /* remove margin on controlbar buttons */
html body .ui-controlbar > .ui-select, html body .ui-controlbar > .ui-select,
html body .ui-controlbar > .ui-btn:not(.ui-input-clear, .ui-input-action) { html body .ui-controlbar > .ui-btn:not(.ui-input-clear):not(.ui-input-action) {
width: auto; width: auto;
margin: 0; margin: 0;
} }
...@@ -859,6 +843,9 @@ html body .ui-controlbar > .ui-btn:not(.ui-input-clear, .ui-input-action) { ...@@ -859,6 +843,9 @@ html body .ui-controlbar > .ui-btn:not(.ui-input-clear, .ui-input-action) {
html body div.ui-content .ui-controlbar .ui-controlgroup { html body div.ui-content .ui-controlbar .ui-controlgroup {
margin: 2% 0; margin: 2% 0;
} }
html body .ui-controlbar ~ .ui-listview {
padding: .5em 0;
}
} }
@media (min-width: 30em) { @media (min-width: 30em) {
html body .ui-content .ui-controlbar { html body .ui-content .ui-controlbar {
......
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