Add remote control chapter menu

dashboard-ui/css/librarybrowser.css

@@ -12,12 +12,12 @@
     margin-left: .5em;
 }
 
-.libraryPage {
+.page[data-theme=b] {
     background-color: #202020;
 }
 
 .backdropPage {
-    background-color: rgba(0, 0, 0, .85);
+    background-color: rgba(0, 0, 0, .85)!important;
 }
 
 .backdropContainer {
@@ -1036,62 +1036,6 @@ a.itemTag:hover {
         }
 }
 
-.nowPlayingPage .btnCommand, .nowPlayingPage .btnPlayStateCommand {
-    font-size: 30px;
-}
-
-.nowPlayingPageImage img {
-    max-height: 300px;
-    max-width: 300px;
-}
-
-.nowPlayingPage .positionSliderContainer {
-    width: 350px;
-}
-
-.nowPlayingNavButtonContainer {
-    width: 400px;
-}
-
-@media all and (max-width: 600px) {
-
-    .nowPlayingPage .btnCommand, .nowPlayingPage .btnPlayStateCommand {
-        font-size: 26px;
-    }
-
-    .nowPlayingPageImage img {
-        max-height: 200px;
-        max-width: 250px;
-    }
-
-    .nowPlayingPage .positionSliderContainer {
-        width: 300px;
-    }
-}
-
-
-@media all and (max-width: 500px) {
-
-    .nowPlayingPage .btnCommand, .nowPlayingPage .btnPlayStateCommand {
-        font-size: 22px;
-    }
-}
-
-@media all and (max-width: 400px) {
-
-    .nowPlayingPage .btnCommand, .nowPlayingPage .btnPlayStateCommand {
-        font-size: 19px;
-    }
-
-    .nowPlayingPage .positionSliderContainer {
-        width: 220px;
-    }
-
-    .nowPlayingNavButtonContainer {
-        width: 300px;
-    }
-}
-
 .spotlight {
     position: absolute;
     left: 0;

dashboard-ui/css/librarymenu.css

@@ -232,6 +232,9 @@
     background-image: url(images/items/folders/settings.png);
     background-position: 16px 8px;
 }
+.reportsViewMenu {
+    background-image: url(images/items/folders/report.png);
+}
 
 .viewMenuSecondary {
     position: absolute;

dashboard-ui/css/nowplaying.css

@@ -0,0 +1,97 @@
+.nowPlayingPage .btnCommand, .nowPlayingPage .btnPlayStateCommand {
+    font-size: 30px;
+}
+
+.nowPlayingPageImage img {
+    max-height: 300px;
+    max-width: 300px;
+}
+
+.nowPlayingPage .positionSliderContainer {
+    width: 350px;
+}
+
+.nowPlayingNavButtonContainer {
+    width: 400px;
+}
+
+.chapterMenuOverlay {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 1000;
+}
+
+.chapterMenu {
+    position: fixed;
+    top: 30%;
+    height: 180px;
+    left: 0;
+    right: 0;
+    background-color: rgba(0,0,0,.9);
+    overflow-x: auto;
+    overflow-y: hidden;
+    z-index: 1001;
+}
+
+.chapterMenuInner {
+    padding: 1em 0;
+    text-align: center;
+    white-space: nowrap;
+}
+
+.chapterPosterItem {
+    width: 240px!important;
+    cursor: pointer;
+}
+
+    .chapterPosterItem .posterItemImage {
+        height: 135px!important;
+    }
+
+.currentChapter {
+    -moz-box-shadow: 0 0 12px 7px #cc3333;
+    -webkit-box-shadow: 0 0 12px 7px #cc3333;
+    box-shadow: 0 0 12px 7px #cc3333;
+}
+
+@media all and (max-width: 600px) {
+
+    .nowPlayingPage .btnCommand, .nowPlayingPage .btnPlayStateCommand {
+        font-size: 26px;
+    }
+
+    .nowPlayingPageImage img {
+        max-height: 160px;
+        max-width: 250px;
+    }
+
+    .nowPlayingPage .positionSliderContainer {
+        width: 300px;
+    }
+}
+
+
+@media all and (max-width: 500px) {
+
+    .nowPlayingPage .btnCommand, .nowPlayingPage .btnPlayStateCommand {
+        font-size: 24px;
+    }
+}
+
+@media all and (max-width: 400px) {
+
+    .nowPlayingPage .btnCommand, .nowPlayingPage .btnPlayStateCommand {
+        font-size: 19px;
+    }
+
+    .nowPlayingPage .positionSliderContainer {
+        width: 220px;
+    }
+
+    .nowPlayingNavButtonContainer {
+        width: 300px;
+    }
+}

dashboard-ui/css/posteritem.css

@@ -92,15 +92,10 @@
     .posterItemTextOverlay .posterItemText {
         background-color: transparent;
         padding-left: 5px;
-        padding: 0 5px 3px;
+        padding: 0 5px 4px;
     }
 
-        .posterItemTextOverlay .posterItemText:first-child {
-            font-weight: bold;
-            font-size: 14px;
-        }
-
-        .posterItemTextOverlay .posterItemText:last-child {
+        .posterItemTextOverlay .posterItemText:last-child:not(.posterItemProgress) {
             padding-bottom: 8px;
         }
 
@@ -165,12 +160,16 @@
         height: 51.8px;
     }
 
-.posterItemProgress .itemProgressBar {
-    height: 8px;
-    width: 100%;
-    opacity: .8;
+.posterItemProgress {
+    line-height: 7px;
 }
 
+    .posterItemProgress .itemProgressBar {
+        height: 7px;
+        width: 100%;
+        opacity: .8;
+    }
+
 .miniPosterItemProgress {
     /* Make sure it's on top of the fade gradient '*/
     z-index: 1000;

dashboard-ui/css/site.css

@@ -90,6 +90,14 @@ h2 {
     font-size: 1.68em;
 }
 
+a, a.ui-link {
+    font-weight: normal;
+}
+
+.ui-controlgroup a, a.ui-btn {
+    font-weight: bold;
+}
+
 h1 a {
     text-decoration: none;
 }