Merge pull request #737 from MrTimscampi/css-fixes

Miscellaneous CSS fixes

package.json

@@ -60,7 +60,7 @@
     "serve": "webpack-dev-server --config webpack.dev.js --open",
     "build": "webpack --config webpack.prod.js",
     "lint": "eslint \"src\"",
-    "stylelint": "stylelint src/**/*.css",
+    "stylelint": "stylelint \"src/**/*.css\"",
     "prepare": "webpack --config webpack.prod.js"
   }
 }

src/assets/css/librarybrowser.css

@@ -201,6 +201,7 @@
 
 .navMenuOptionText {
     white-space: nowrap;
+    margin-top: 0.25em;
 }
 
 .sidebarHeader {
@@ -272,7 +273,25 @@
     }
 }
 
-@media all and (min-width:84em) {
+@media all and (min-width: 84em) {
+    .headerTop {
+        padding: 0.8em 0.8em;
+    }
+
+    .headerTabs {
+        -webkit-align-self: center;
+        align-self: center;
+        width: auto;
+        -webkit-box-align: center;
+        -webkit-align-items: center;
+        align-items: center;
+        -webkit-box-pack: center;
+        -webkit-justify-content: center;
+        justify-content: center;
+        position: relative;
+        margin-top: -4.3em;
+    }
+
     .libraryPage:not(.noSecondaryNavPage) {
         padding-top: 4.6em !important;
     }
@@ -426,12 +445,44 @@
 
 .desktopMiscInfoContainer {
     position: absolute;
-    bottom: .75em
+    bottom: 0.75em;
 }
 
-.layout-mobile .detailPagePrimaryContainer {
+.parentName {
     display: block;
-    position: relative;
+    margin-bottom: 0.5em;
+}
+
+.mainDetailButtons {
+    display: flex;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+    align-items: center;
+    -webkit-flex-wrap: wrap;
+    flex-wrap: wrap;
+    margin: 1em 0;
+}
+
+.detailButton,
+.mainDetailButtons {
+    display: flex;
+    display: -webkit-box;
+    display: -webkit-flex;
+}
+
+.itemName {
+    margin: 0.5em 0;
+}
+
+.itemMiscInfo {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-flex-wrap: wrap;
+    flex-wrap: wrap;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+    align-items: center;
 }
 
 .layout-mobile .parentName,
@@ -443,14 +494,6 @@
     justify-content: center;
 }
 
-.layout-mobile .infoText {
-    white-space: normal;
-}
-
-.layout-tv .detailPagePrimaryContainer {
-    position: relative;
-}
-
 .detailPagePrimaryContainer {
     display: flex;
     align-items: center;
@@ -460,6 +503,15 @@
     z-index: 2;
 }
 
+.layout-mobile .detailPagePrimaryContainer {
+    display: block;
+    position: relative;
+}
+
+.layout-tv .detailPagePrimaryContainer {
+    position: relative;
+}
+
 .detailSticky {
     background-color: #101010;
 }
@@ -475,6 +527,10 @@
     text-align: left;
 }
 
+.layout-mobile .infoText {
+    white-space: normal;
+}
+
 .detailPageSecondaryContainer {
     margin: 1.25em 0;
 }
@@ -542,9 +598,9 @@
     -webkit-box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37);
 }
 
-@media all and (max-width:62.5em) {
+@media all and (max-width: 62.5em) {
     .detailPageWrapperContainer {
-        position: relative
+        position: relative;
     }
 
     .btnPlaySimple {
@@ -558,11 +614,6 @@
     }
 }
 
-.parentName {
-    display: block;
-    margin-bottom: 0.5em;
-}
-
 .btnSyncComplete {
     background: #673ab7 !important;
 }
@@ -613,17 +664,6 @@
     }
 }
 
-.detailButton,
-.mainDetailButtons {
-    display: flex;
-    display: -webkit-box;
-    display: -webkit-flex;
-}
-
-.itemName {
-    margin: 0.5em 0;
-}
-
 .empty {
     margin: 0;
 }
@@ -636,16 +676,6 @@
     margin-top: 0;
 }
 
-.mainDetailButtons {
-    display: flex;
-    -webkit-box-align: center;
-    -webkit-align-items: center;
-    align-items: center;
-    -webkit-flex-wrap: wrap;
-    flex-wrap: wrap;
-    margin: 1em 0;
-}
-
 .recordingFields button {
     margin-left: 0;
     margin-right: 0.5em;
@@ -670,24 +700,24 @@
     padding: 0.5em 0.7em !important;
 }
 
-@media all and (min-width:29em) {
+@media all and (min-width: 29em) {
     .detailButton {
-        padding-left: .75em !important;
-        padding-right: .75em !important
+        padding-left: 0.75em !important;
+        padding-right: 0.75em !important;
     }
 }
 
-@media all and (min-width:32em) {
+@media all and (min-width: 32em) {
     .detailButton {
-        padding-left: .8em !important;
-        padding-right: .8em !important
+        padding-left: 0.8em !important;
+        padding-right: 0.8em !important;
     }
 }
 
-@media all and (min-width:35em) {
+@media all and (min-width: 35em) {
     .detailButton {
-        padding-left: .85em !important;
-        padding-right: .85em !important
+        padding-left: 0.85em !important;
+        padding-right: 0.85em !important;
     }
 }
 
@@ -720,7 +750,7 @@
 }
 
 .detailButton-text {
-    margin-top: .7em;
+    margin-top: 0.7em;
     font-size: 80%;
     font-weight: 400;
 }
@@ -731,13 +761,14 @@
     }
 
     .detailButtonHideonMobile {
-        display: none !important
+        display: none !important;
     }
 }
 
-@media all and (min-width:62.5em) {
+@media all and (min-width: 62.5em) {
     .headerTop {
-        padding: 0.8em 0
+        padding-left: 0.8em;
+        padding-right: 0.8em;
     }
 
     .headerTabs {
@@ -745,7 +776,7 @@
         width: auto;
         align-items: center;
         justify-content: center;
-        margin-top: -3.34em;
+        margin-top: -4.3em;
         position: relative;
     }
 
@@ -754,7 +785,7 @@
     }
 
     .personBackdrop {
-        display: none !important
+        display: none !important;
     }
 
     .mainDetailButtons {
@@ -769,17 +800,6 @@
     }
 }
 
-.itemMiscInfo {
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: flex;
-    -webkit-flex-wrap: wrap;
-    flex-wrap: wrap;
-    -webkit-box-align: center;
-    -webkit-align-items: center;
-    align-items: center;
-}
-
 @media all and (max-width: 31.25em) {
     .mobileDetails .itemMiscInfo {
         text-align: center;
@@ -950,7 +970,7 @@ div:not(.sectionTitleContainer-cards) > .sectionTitle-cards {
 }
 
 .sectionTitleTextButton > .sectionTitle {
-    margin-bottom: 0;
+    margin-bottom: 0.35em;
     margin-top: 0;
 }
 
@@ -980,7 +1000,7 @@ div:not(.sectionTitleContainer-cards) > .sectionTitle-cards {
     margin-bottom: -1em;
 }
 
-@media all and (min-height:31.25em) {
+@media all and (min-height: 31.25em) {
     .padded-right-withalphapicker {
         padding-right: 7.5%;
     }

src/components/alphapicker/style.css

@@ -112,7 +112,6 @@
 }
 
 @media all and (min-width: 62.5em) {
-
     .alphaPicker-fixed-right {
         right: 1em;
     }

src/components/emby-scroller/emby-scroller.css

@@ -13,6 +13,11 @@
     margin-right: 1.2em;
 }
 
+.servers > .card > .cardBox {
+    margin-left: 0.6em;
+    margin-right: 0.6em;
+}
+
 .layout-tv .emby-scroller,
 .layout-mobile .emby-scroller {
     padding-left: 3.3%;

src/components/emby-tabs/emby-tabs.css

@@ -1,4 +1,7 @@
 .emby-tab-button {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
     background: transparent;
     box-shadow: none;
     cursor: pointer;
@@ -10,7 +13,7 @@
     vertical-align: middle;
     flex-shrink: 0;
     margin: 0;
-    padding: 1em 0.9em;
+    padding: 1.5em;
     position: relative;
     height: auto;
     min-width: initial;

src/components/listview/listview.css

@@ -111,6 +111,10 @@
     text-overflow: ellipsis;
 }
 
+.layout-desktop .listItemBodyText {
+    margin: 0.25em 0 0 0;
+}
+
 .listItemBodyText-nowrap {
     white-space: nowrap;
 }

src/elements/emby-input/emby-input.css

@@ -21,8 +21,8 @@
     border: 0;
 }
 
-.emby-input:required { 
-    box-shadow: none; 
+.emby-input:required {
+    box-shadow: none;
 }
 
 .inputContainer {

src/themes/dark/theme.css

@@ -311,6 +311,14 @@ html {
 
 .emby-tab-button-active {
     color: #fff;
+    border-bottom: 2px solid #fff;
+    padding-top: 1.55em;
+    padding-bottom: 1.38em;
+}
+
+.layout-mobile .emby-tab-button-active {
+    padding-top: 1.56em; /* Add one pixel to get a better fit in mobile layout */
+    padding-bottom: 1.38em;
 }
 
 .emby-tab-button.show-focus:focus {