remote control progress

dashboard-ui/css/remotecontrol.css

@@ -0,0 +1,95 @@
+#remoteControlFlyout {
+    width: 300px;
+    min-height: 400px;
+}
+
+.playMenuOptions {
+    max-height: 200px;
+    overflow-y: auto;
+    border: 1px solid #aaa;
+}
+
+.tblRemoteControl {
+    width: 100%;
+    border-spacing: 0;
+    border-collapse: collapse;
+}
+
+    .tblRemoteControl tbody tr:hover {
+        background: #ddd;
+    }
+
+    .tblRemoteControl td {
+        padding: 2px 5px;
+        border-top: 1px solid #ccc;
+        text-align: left;
+    }
+
+    .tblRemoteControl th {
+        padding: 2px 5px;
+        text-align: left;
+    }
+
+        .tblRemoteControl th:first-child, .tblRemoteControl td:first-child {
+            padding-left: 0;
+            padding-right: 0;
+        }
+
+.tblRemoteControlNoHeader tr:first-child td {
+    border-top: 0;
+}
+
+.tdSelectPlayTime, .tdSelectItem {
+    vertical-align: middle!important;
+    width: 30px;
+}
+
+.tdRemoteControlImage {
+    width: 100px;
+}
+
+.tblRemoteControl img {
+    height: 50px;
+}
+
+@media all and (max-width: 400px) {
+    .nowPlayingCell {
+        display: none;
+    }
+}
+
+@media all and (min-height: 500px) {
+    #remoteControlFlyout {
+        min-height: 450px;
+    }
+}
+
+@media all and (min-height: 600px) {
+    #remoteControlFlyout {
+        min-height: 500px;
+    }
+}
+
+@media all and (min-height: 800px) {
+    .playMenuOptions {
+        max-height: 300px;
+    }
+}
+
+@media all and (min-width: 500px) {
+    #remoteControlFlyout {
+        width: 450px;
+    }
+}
+
+@media all and (min-width: 600px) {
+    #remoteControlFlyout {
+        width: 550px;
+    }
+}
+
+@media all and (min-width: 700px) {
+    #remoteControlFlyout {
+        width: 650px;
+    }
+}