Skip to content

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

css: updated to latest css

parent 532766d6
Hide whitespace changes
Inline Side-by-side
Showing with 176 additions and 190 deletions
css/css.css
View file @ 703f599a
......@@ -4,7 +4,8 @@ html body .ui-select .ui-btn.invalid,
html body .required.invalid ~ label {
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: "*";
position: absolute;
width: 100%;
......@@ -172,7 +173,7 @@ span.static {
}
}
.downloads:before {
content: "·";
content: "·";
}
.inline-icon {
padding: 0 .5em;
......@@ -326,6 +327,11 @@ html body form input.secure_form {
display: none;
}
/* ============================== breadcrumbs ============================== */
/* make sure content does not flow next to crumbs*/
.crumbs {
display: block;
clear: both;
}
.crumbs a.ui-btn,
.crumbs a.ui-link {
font-size: 80%;
......@@ -358,11 +364,6 @@ html body form input.secure_form {
margin-top: -6px;
font-size: 1.2em;
}
@media (max-width: 40em) {
.crumbs {
display: none;
}
}
/* ============================== status loader ============================== */
/* fadeout "heartbeat" transition with 1sec delay */
.loader_icon {
......@@ -414,7 +415,7 @@ html body div.ui-panel a.unenhanced {
background: none repeat scroll 0 center rgba(0, 0, 0, 0);
border: 0 none;
font-size: 0.7em;
padding-top: 0.25em;
padding-top: 0.25em;
margin: 0;
}
html body div.ui-panel a.unenhanced:focus,
......@@ -435,6 +436,24 @@ html body div.ui-panel a.unenhanced:active {
width: 100%;
}
/* ============================= content grid ============================= */
/* 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;
}
.span_1, .span_2, .span_3 {
vertical-align: middle;
padding-left: 2%;
......@@ -461,38 +480,26 @@ form .span_2 {
form .span_3 {
width: 33%;
}
/* mh....*/
form {
max-width: 80%;
margin-left: auto;
margin-right: auto;
}
@media (max-width: 40em) {
.span_1, .span_2, .span_3, form .span_1, form .span_2, form .span_3 {
width: 100% !important;
form {
max-width: auto;
margin: auto;
}
.span_1, .span_2, .span_3, form .span_1, form .span_2, form .span_3 {
width: auto; /* 100 does not work... why? */
display: block;
padding: .25em 0;
}
.span_1 textarea {
.span_2 textarea {
width: 100%;
}
}
.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;
}
.span_1, html body .ui-content .ui-controlbar.span_1{
width: 96%; /* 2% padding-left/right */
display: block;
}
.span_2, html body .ui-content .ui-controlbar.span_2 {
width: 45%;
display: inline-block;
}
.span_3, html body .ui-content .ui-controlbar.span_3 {
width: 30%; /* no idea why this is needed, fix asap */
display: inline-block;
padding: 1.5%;
}
*/
/* ======================== status (red...) ========================= */
html body div.ui-page a.ui-btn.error.status,
html body div.ui-page a.ui-btn.error.status:hover,
......@@ -542,14 +549,21 @@ tbody .large {
.dyno {
padding-top: 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;
}
.dyno > div.ui-table-wrapper:first-child {
margin: 0;
}
/* ================================= CUSTOM CSS =========================== */
.vert {
background-color: #79AC21;
background-color: #79AC21 !important;
}
.vert.light {
background-color: #A3ED24;
......@@ -558,7 +572,7 @@ tbody .large {
background: url("../img/bg-offre02.png") no-repeat scroll center 90px / 60% auto #B01B99;
}
.rose {
background-color: #B01B99;
background-color: #B01B99 !important;
}
.rose .light {
background-color: #E156CC;
......@@ -567,7 +581,7 @@ tbody .large {
background: url("../img/bg-offre03.png") no-repeat scroll center 90px / 60% auto #2296C9;
}
.bleu {
background-color: #2296C9;
background-color: #2296C9 !important;
}
.bleu .light {
background-color: #5FC2EF;
......@@ -576,7 +590,14 @@ tbody .large {
background: url("../img/bg-offre01.png") no-repeat scroll center 90px / 60% auto #7B40B8;
}
.violet {
background-color: #7B40B8;
background-color: #7B40B8 !important;
color: #fff;
}
.violet > *,
.rouge > *,
.bleu > *,
.rose > *,
.vert > * {
color: #fff;
}
.violet .light {
......@@ -586,21 +607,23 @@ tbody .large {
background: url("../img/website-bg-libert-vacances.png") no-repeat scroll center 30px / 200px auto #EB5757;
}
.rouge {
background-color: #EB5757;
background-color: #EB5757 !important;
}
.rouge .light {
background-color: #FC8484;
}
.offer.custom_offer {
max-height: 150px;
min-height: 150px;
text-align: left;
}
.offer {
width: 100%;
min-height: 300px;
max-height: 300px;
border-radius: .6em;
-webkit-border-radius: .6em;
}
.offer.custom_offer {
max-height: 150px;
min-height: 150px;
text-align: center;
}
.offer > img{
padding: .25em;
......@@ -705,6 +728,7 @@ html body .ui-controlbar .ui-carousel-controls .ui-btn[class*="ui-icon-"]:after
/* intro text in header */
.beeper_text {
display: inline-block;
padding: 0 .5em;
}
/* custom footer > override everything here, but many things are like in
the panel and some class assignment (first/last) is not working properly*/
......@@ -936,6 +960,35 @@ html body .custom_bar a.ui-btn.custom_profit:hover {
display: inline-block;
}
}
.dyno > .ui-controlgroup {
text-align: center;
}
@media (max-width: 60em) {
.dyno > .ui-controlgroup {
margin: 1em 0;
}
.dyno > .ui-controlgroup .ui-controlgroup-controls .ui-btn {
padding-left: 12px;
padding-right: 12px;
}
}
/* subscription_selector */
ul.ui-listview.subscription_selector {
vertical-align: top;
margin-top: 0.5em;
}
ul.ui-listview.subscription_selector li:first-child {
border-top-left-radius: .6em;
border-top-right-radius: .6em;
-webkit-top-left-radius: .6em;
-webkit-top-right-radius: .6em;
}
ul.ui-listview.subscription_selector li:last-child {
border-bottom-left-radius: .6em;
border-bottom-right-radius: .6em;
-webkit-bottom-left-radius: .6em;
-webkit-bottom-right-radius: .6em;
}
......
css/themes.css
View file @ 703f599a
......@@ -119,7 +119,9 @@ html .ui-page-theme-slapos-white .ui-table-caption {
color: #aaa;
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;
border-color: #aaa;
}
......@@ -361,7 +363,9 @@ html .ui-page-theme-slapos-black .ui-table-caption{
text-shadow: 0 1px 0 #111111;
}
/* 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;
border-color: rgb(232, 232, 232);
border-color: rgba(255,255,255,.3);
......@@ -632,7 +636,8 @@ html body .ui-group-theme-slapos-black .ui-li-count,
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#79AC21', EndColorStr='#A3ED24');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#79AC21', EndColorStr='#A3ED24')";
}
/* Bar */
html hr.ui-hr-active,
/* Button down */
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,
......@@ -737,6 +742,7 @@ html .ui-loader.ui-body-loader-active {
text-shadow: none;
cursor: pointer;
}
/* Table rows ,no pointer... */
html table.ui-table tbody tr:hover td {
cursor: default;
......@@ -1441,6 +1447,7 @@ html body .ui-page .ui-listview > li h6 {
/* pad controlbar if its after a listview (which may be inset)*/
.ui-content .ui-listview ~ .ui-controlbar {
margin-top: 1em;
clear: both; /* make sure it drops below */
}
/* First breakpoint is at 20em (320px) 2 column layout. Tiles 250x250px */
@media ( min-width: 24em) {
......@@ -1507,10 +1514,34 @@ html body .ui-page .ui-listview > li h6 {
font-size: 3em;
}
/* Align center */
.ui-listview.responsive li > .ui-btn {
.ui-listview.responsive.ui-icon-grid li > .ui-btn {
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 h2,
.ui-listview.responsive h3,
......@@ -1556,9 +1587,8 @@ html body .ui-page .ui-listview > li h6 {
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;
......@@ -1738,6 +1768,19 @@ html .ui-panel .ui-listview li .ui-checkbox .ui-btn.ui-checkbox-off:after {
width: 22px;
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 {
background: none repeat scroll 0 center transparent;
}
......@@ -1831,6 +1874,13 @@ html body .ui-input-search .ui-input-clear:active {
-webkit-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 - fix default 200% font-size set by browser */
......@@ -1893,106 +1943,3 @@ html .ui-select .ui-btn.ui-corner-all {
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 @ 703f599a
......@@ -233,33 +233,6 @@ html .ui-table-caption {
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...) */
.ui-page .ui-table-wrapper-top .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 {
padding-top: 0;
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:hover,
html table tbody th .ui-checkbox:hover,
html table tbody th .ui-radio .ui-btn,
html table tbody th .ui-radio .ui-btn:hover,
/* why? white is white and black is black...
html table tbody td .ui-controlgroup-controls .ui-btn,
html table tbody td .ui-controlgroup-controls .ui-btn:hover */
{
html table tbody th .ui-radio:hover {
background-color: transparent;
background-image: none;
}
......@@ -604,6 +576,16 @@ html table tr td .ui-radio label.ui-btn {
padding-top: 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 {
padding-top: .5em;
......@@ -805,9 +787,9 @@ html table tr td .ui-radio label.ui-btn {
/* ================================= contolbar ============================*/
.ui-controlbar {
position: static;
text-align: center;
/* text-align: center; */
white-space: pre-line;
line-height: 0;
/* line-height: 0; will prevent any content inside a controlbar */
display: block;
margin: 0 auto 1em;
}
......@@ -820,12 +802,13 @@ html table tr td .ui-radio label.ui-btn {
line-height: 1.4em;
margin: 0 auto 1em;
}
/* this breaks so much...
.ui-controlbar > * {
/*display: inline-block; break listview */
display: inline-block;
vertical-align: middle;
/* padding: 0; breaks lonely buttons multiple levels deep ?*/
padding: 0;
}
*/
.ui-controlbar .ui-input-search {
display: block;
margin: 0 auto;
......@@ -860,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 {
margin: 2% 0;
}
html body .ui-controlbar ~ .ui-listview {
padding: .5em 0;
}
}
@media (min-width: 30em) {
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