css: added custom css, updated ui-image-grid

css/css.css

@@ -358,11 +358,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 {
@@ -563,3 +558,43 @@ tbody .large {
   padding: 0;
 }
 
+/* ======================== CUSTOM CSS ===================================*/
+/* white background */
+.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;
+}
+/* override responsive text blocks in grid */
+.ui-listview.responsive .ui-li-has-thumb p, .ui-listview.responsive .ui-li-has-icon p {
+    display: inline-block;
+    max-width: 46%;
+    min-height: 25%;
+    padding: 0 0.5em;
+}
+/* position aside */
+.ui-listview.responsive .ui-li-aside {
+  background: transparent;
+  bottom: 0;
+  top: auto;
+  font-size: 80%;
+}
+@media ( min-width: 48em ) {
+  .ui-listview.responsive .ui-li-aside {
+    background: #fff;
+    right: 0;
+    top: 0;
+    bottom: auto;
+  }
+}
+/* hide crumbs on mobile */
+@media (max-width: 48em) {
+  .crumbs {
+    display: auto;
+  }
+}
\ No newline at end of file

css/themes.css

@@ -120,7 +120,8 @@ html .ui-page-theme-slapos-white .ui-table-caption {
   text-shadow: #FFF 0px 1px 0px;
 }
 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-icon-grid li,
+html .ui-page-theme-slapos-white .ui-listview.ui-image-grid li {
   background-color: #fff;
   border-color: #aaa;
 }
@@ -363,7 +364,8 @@ html .ui-page-theme-slapos-black .ui-table-caption{
 }
 /* tables & controlbars */
 .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-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);
@@ -1582,9 +1584,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;
@@ -1764,11 +1765,13 @@ 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-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-icon-grid li:not(:first-child) a,
+  .ui-listview.responsive.ui-image-grid li:not(:first-child) a {
     border-top-width: 0;
   }
 }