updated themes css

css/themes.css

@@ -19,7 +19,7 @@ html .listview .ui-li-divider {
   font-size: 80%;
 }
 
-/* Watermark NOTE: breaks links if ui-content is kept position:static 
+/* Watermark NOTE: breaks links if ui-content is kept position:static
 .ui-page-active:before,
 .ui-page-active .ui-panel-wrapper:before {
   background: url("../img/slapos.png") no-repeat center center;
@@ -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);
 }
@@ -211,7 +214,7 @@ html .ui-body-slapos-white .ui-btn:visited,
 html body .ui-btn.ui-btn-slapos-white:visited,
 html body .ui-group-theme-slapos-white .ui-btn:visited,
 [class*="ui-group-theme-"] .ui-btn.ui-btn-slapos-white:visited,
-/* table wrappers 
+/* table wrappers
 html .ui-page-theme-slapos-white .ui-table-wrapper-top,
 html .ui-page-theme-slapos-white .ui-table-wrapper-bottom,*/
 html .ui-page-theme-slapos-white .ui-table-wrapper-top ~ table,
@@ -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 */
@@ -478,7 +483,7 @@ html body a.ui-btn-slapos-black:visited,
 html body .ui-group-theme-slapos-black a:visited,
 [class*="ui-group-theme-"] a.ui-btn-slapos-black:visited,
 html .ui-page-theme-slapos-black table tr td a:visited,
-/* table wrappers 
+/* table wrappers
 html .ui-page-theme-slapos-black .ui-table-wrapper-top,
 html .ui-page-theme-slapos-black .ui-table-wrapper-bottom, */
 html .ui-page-theme-slapos-black .ui-table-wrapper-top ~ table,
@@ -567,7 +572,7 @@ html body .ui-group-theme-slapos-black li.ui-last-child a.ui-btn {
 html .ui-bar-slapos-black .ui-btn:hover,
 html .ui-body-slapos-black .ui-btn:hover,
 html body .ui-btn.ui-btn-slapos-black:hover,
-html body .ui-group-theme-slapos-black .ui-btn:hover, 
+html body .ui-group-theme-slapos-black .ui-btn:hover,
 [class*="ui-group-theme-"] .ui-btn.ui-btn-slapos-black:hover,
 /* table wrapper buttons */
 html .ui-page-theme-slapos-black .ui-table-wrapper .ui-btn:hover,
@@ -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,9 +1895,7 @@ html .ui-header .ui-header-logo img {
   }
 }
 
-
-
-/* breadcrumbs - need work! 
+/* breadcrumbs - need work!
 .ui-breadcrumbs {
   background: none repeat scroll 0 0 #DDDDDD;
   border-bottom: 1px solid #81898A;