added headroom scrolling

dashboard-ui/css/card.css

@@ -204,6 +204,16 @@
     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;
+}
+
 @media all and (max-width: 600px) {
 
     .packageReviewText {

dashboard-ui/css/librarybrowser.css

@@ -30,7 +30,7 @@
 
 .backdropContainer {
     position: fixed;
-    top: 50px;
+    top: 0;
     right: 0;
     left: 0;
     bottom: 0;
@@ -773,7 +773,7 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
     }
 }
 
-@media all and (max-height: 600px), (max-width: 600px) {
+@media all and (max-height: 540px), (max-width: 540px) {
 
     .itemBackdrop:not(.noBackdrop) {
         height: 280px;

dashboard-ui/css/librarymenu.css

@@ -3,7 +3,7 @@
 }
 
     .libraryPage:not(.metadataEditorPage):not(.noSecondaryNavPage) {
-        padding-top: 98px !important;
+        padding-top: 99px !important;
     }
 
 .libraryMenuDivider {
@@ -124,7 +124,7 @@
 }
 
 .libraryViewNav {
-    height: 48px;
+    height: 49px;
     overflow: hidden;
     position: fixed;
     right: 0;
@@ -132,7 +132,7 @@
     top: 50px;
     z-index: 999;
     text-align: center;
-    font-size: 15px;
+    font-size: 14px;
     white-space: nowrap;
     padding: 0 0 0;
     overflow-x: scroll;
@@ -142,7 +142,7 @@
 }
 
 .viewMenuBar {
-    background-color: #000;
+    background-color: #111;
 }
 
 .libraryViewNav {
@@ -224,12 +224,12 @@
 .libraryViewNav a {
     display: inline-block;
     padding: 12px 0 9px;
-    color: #ddd !important;
+    color: rgba(255,255,255,.8) !important;
     text-decoration: none;
     margin: 0 0;
     position: relative;
     font-weight: normal;
-    border-bottom: 4px solid transparent;
+    border-bottom: 5px solid transparent;
 }
 
     .libraryViewNav a:not(.ui-btn-active):hover {

dashboard-ui/css/livetv.css

@@ -1,4 +1,8 @@
-
+.tvGuideHeader.headroom--unpinned {
+    -webkit-transform: translateY(-98px);
+    transform: translateY(-98px);
+}
+
 .tvProgramSectionHeader {
     margin: 0;
 }
@@ -90,7 +94,7 @@
 }
 
 .tvProgram:hover, .tvProgram:hover .tvProgramInfo {
-    background-color: #4d90fe;
+    background-color: #444;
 }
 
 .timerCircle {
@@ -215,7 +219,7 @@
 }
 
 .channelHeaderCell:hover {
-    background-color: #38c;
+    background-color: #444;
 }
 
 .channelList {
@@ -254,7 +258,7 @@
 }
 
     .programCellInner:hover {
-        background-color: #38c;
+        background-color: #444;
     }
 
 .timeslotCellInner {
@@ -322,7 +326,7 @@
         width: 6500px;
     }
 
-    .channelList, .channelTimeslotHeader .accentButton  {
+    .channelList, .channelTimeslotHeader .accentButton {
         font-size: 14px;
     }
 

dashboard-ui/css/site.css

@@ -162,6 +162,30 @@ h1 a:hover {
     margin: -10px 0 0 -10px;
 }
 
+/**
+ * Note: I have omitted any vendor-prefixes for clarity.
+ * Adding them is left as an exercise for the reader.
+ */
+.headroom {
+    -webkit-transition: transform 200ms linear;
+    transition: transform 200ms linear;
+}
+
+.headroom--pinned {
+    -webkit-transform: translateY(0%);
+    transform: translateY(0%);
+}
+
+.headroom--unpinned {
+    -webkit-transform: translateY(-100%);
+    transform: translateY(-100%);
+}
+
+.libraryViewNav.headroom--unpinned {
+    -webkit-transform: translateY(-200%);
+    transform: translateY(-200%);
+}
+
 .largePanel {
     width: 270px;
 }
@@ -597,7 +621,7 @@ h1 .imageLink {
     z-index: 1097;
     color: #fff;
     border: 0 !important;
-    background-color: #1a1a1a;
+    background-color: rgba(26,26,26,.9);
 }
 
 .footerNotification {