update card layouts

dashboard-ui/css/card.css

@@ -48,7 +48,7 @@
 }
 
 .largeCardMargin .cardBox {
-    margin: 6px;
+    margin: 10px;
 }
 
 /*@media all and (max-width: 600px) {
@@ -68,13 +68,7 @@
     margin-bottom: 5px;
 }
 
-.visualFooterCard .outerCardFooter {
-    background: #111;
-    padding-bottom: 4px;
-}
-
 .visualCardBox {
-    padding: 5px;
     -moz-border-radius: 2px;
     -webkit-border-radius: 2px;
     border-radius: 2px;
@@ -83,16 +77,15 @@
     -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.1);
     box-shadow: 0 2px 4px rgba(0,0,0,0.1);
     background: #fff;
-    margin: 1px;
+    margin: 8px;
 }
 
-/*.visualCardBox .cardFooter {
-    padding: 0 2px;
-}*/
+.largeCardMargin .visualCardBox {
+    margin: 18px;
+}
 
 .ui-page-theme-b .visualCardBox {
     background: rgba(45,45,45,.85);
-    border: 1px solid #1f1f1f;
     border-radius: 3px;
 }
 
@@ -187,6 +180,18 @@
     right: 0;
 }
 
+.visualCardBox .outerCardFooter {
+    padding: 5px;
+    position: relative;
+}
+
+.btnCardOptions {
+    padding: 10px !important;
+    margin: 0 !important;
+    color: inherit;
+    font-size: 20px;
+}
+
 .cardText {
     text-overflow: ellipsis;
     overflow: hidden;
@@ -221,16 +226,6 @@
     padding: 0 6px 4px 5px;
 }
 
-.outerCardFooter .cardText + .cardText {
-    color: #ddd;
-}
-
-/*.cardBox:not(.visualCardBox) .outerCardFooter .cardText {
-    font-size: 14px;
-    background: rgba(51, 51, 51,.6);
-    padding: 5px;
-}*/
-
 .cardBox:not(.visualCardBox) .outerCardFooter .cardText:last-child {
     margin-bottom: 2em;
 }
@@ -250,6 +245,11 @@
     height: 100%;
 }
 
+    .cardImage canvas {
+        width: 100%;
+        height: 100%;
+    }
+
 .coveredCardImage {
     background-size: cover;
 }
@@ -298,7 +298,7 @@
 }
 
 .smallPortraitCard {
-    width: 25%;
+    width: 33.334%;
 }
 
 .cardProgress {
@@ -319,17 +319,6 @@
     }
 }
 
-@media all and (min-width: 500px) {
-
-    .squareCard {
-        width: 33.3%;
-    }
-
-    .smallSquareCard {
-        width: 25%;
-    }
-}
-
 @media all and (min-width: 400px) {
 
     .smallBackdropCard {
@@ -337,23 +326,25 @@
     }
 }
 
+@media all and (min-width: 500px) {
 
-@media all and (min-width: 540px) {
-
-    .smallBackdropCard {
-        width: 25%;
+    .squareCard {
+        width: 33.3%;
     }
 }
 
-
 @media all and (min-width: 640px) {
 
+    .smallSquareCard {
+        width: 25%;
+    }
+
     .portraitCard {
         width: 25%;
     }
 
     .smallPortraitCard {
-        width: 20%;
+        width: 25%;
     }
 }
 
@@ -377,11 +368,15 @@
         width: 20%;
     }
 
-    .smallBackdropCard {
+    .smallSquareCard {
         width: 20%;
     }
 
-    .smallSquareCard {
+    .smallBackdropCard {
+        width: 25%;
+    }
+
+    .smallPortraitCard {
         width: 20%;
     }
 }

dashboard-ui/css/librarybrowser.css

@@ -1535,3 +1535,7 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
 .movieTrailersTabDisabled .movieTrailersTab {
     display: none !important;
 }
+
+.homeFavoritesTabDisabled .homeFavoritesTab {
+    display: none !important;
+}