updated mobile and tablet layouts in web client

dashboard-ui/css/librarybrowser.css

@@ -176,8 +176,11 @@
     margin-left: 1em;
 }
 
-.labelPageSize, .selectPageSize {
-    display: none;
+
+@media all and (max-width: 650px) {
+    .labelPageSize, .selectPageSize {
+        display: none!important;
+    }
 }
 
 .galleryImageContainer {
@@ -559,11 +562,11 @@ a.itemTag:hover {
     text-align: center;
 }
 
-.detailImageProgressContainer progress {
-    width: 100%;
-    margin: 0 auto;
-    height: 6px;
-}
+    .detailImageProgressContainer progress {
+        width: 100%;
+        margin: 0 auto;
+        height: 6px;
+    }
 
 @media all and (max-width: 550px) {
 
@@ -696,10 +699,6 @@ a.itemTag:hover {
         .viewControls + .listTopPaging {
             margin-left: 1em;
         }
-
-    .labelPageSize, .selectPageSize {
-        display: inline;
-    }
 }
 
 @media all and (min-width: 750px) {
@@ -846,9 +845,9 @@ a.itemTag:hover {
     background: rgba(82, 181, 75, .8);
 }
 
-.unplayedIndicator div:after {
-    background-color: transparent !important;
-}
+    .unplayedIndicator div:after {
+        background-color: transparent !important;
+    }
 
 .itemProgress {
     vertical-align: top;

dashboard-ui/css/mediaplayer.css

@@ -1,6 +1,6 @@
 /* Now playing bar */
 .nowPlayingBar {
-    padding: 6px 0 6px 0;
+    padding: 6px 0 24px 0;
     border-top: 2px solid green;
 }
 
@@ -17,7 +17,7 @@
     .nowPlayingBar .barBackground {
         border-top: 2px solid green;
         position: absolute;
-        margin: -8px -0.5em !important;
+        margin: -8px -0.5em -26px !important;
         width: 100%;
         height: 100%;
     }

dashboard-ui/css/posteritem.css

@@ -113,11 +113,11 @@
 }
 
 .squarePosterItem {
-    width: 154px;
+    width: 142px;
 }
 
     .squarePosterItem .posterItemImage {
-        height: 150px;
+        height: 138px;
     }
 
 .storeReviewCount {
@@ -126,27 +126,27 @@
 
 
 .backdropPosterItem {
-    width: 292px;
+    width: 142px;
 }
 
     .backdropPosterItem .posterItemImage {
-        height: 162px;
+        height: 77.625px;
     }
 
 .smallBackdropPosterItem {
-    width: 172px;
+    width: 160px;
 }
 
     .smallBackdropPosterItem .posterItemImage {
-        height: 94.5px;
+        height: 87.75px;
     }
 
 .portraitPosterItem {
-    width: 106px;
+    width: 90px;
 }
 
     .portraitPosterItem .posterItemImage {
-        height: 153px;
+        height: 129px;
     }
 
 .posterItemProgress .itemProgressBar {
@@ -155,13 +155,6 @@
     opacity: .6;
 }
 
-@media all and (max-width: 400px) {
-
-    .backdropPosterItem {
-        display: block;
-    }
-}
-
 @media all and (min-width: 540px) {
 
     .backdropPosterItem {
@@ -171,9 +164,6 @@
         .backdropPosterItem .posterItemImage {
             height: 144px;
         }
-}
-
-@media all and (min-width: 540px) {
 
     .smallBackdropPosterItem {
         width: 188px;
@@ -184,6 +174,26 @@
         }
 }
 
+@media all and (min-width: 600px) {
+
+
+    .squarePosterItem {
+        width: 164px;
+    }
+
+        .squarePosterItem .posterItemImage {
+            height: 160px;
+        }
+
+    .portraitPosterItem {
+        width: 122px;
+    }
+
+        .portraitPosterItem .posterItemImage {
+            height: 177px;
+        }
+}
+
 @media all and (min-width: 650px) {
 
     .backdropPosterItem {

dashboard-ui/css/search.css

@@ -59,7 +59,7 @@
 
 .searchHintSecondaryText {
     font-size: 13px;
-    color: #bbb;
+    color: #ddd;
     margin-top: 3px;
     white-space: nowrap;
     text-overflow: ellipsis;

dashboard-ui/css/site.css

@@ -311,8 +311,8 @@ h1 .imageLink {
 
     .dashboardPanelLink:hover {
         background: #f2f2f2;
-           color: #000!important;
- }
+        color: #000!important;
+    }
 
 .selectedDashboardPanelLink {
     background: #2572EB;
@@ -408,7 +408,7 @@ h1 .imageLink {
 
 @media all and (min-width: 900px) {
 
-    .header {
+    .page:not(.wizardPage) .header {
         padding-top: 0;
     }
 }