diff --git a/package.json b/package.json index 02ae28eaa7..4392f12153 100644 --- a/package.json +++ b/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" } } diff --git a/src/assets/css/librarybrowser.css b/src/assets/css/librarybrowser.css index e5f45f7ab1..8475b72b2f 100644 --- a/src/assets/css/librarybrowser.css +++ b/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%; } diff --git a/src/components/alphapicker/style.css b/src/components/alphapicker/style.css index 2f396d1fec..4e94c0f754 100644 --- a/src/components/alphapicker/style.css +++ b/src/components/alphapicker/style.css @@ -112,7 +112,6 @@ } @media all and (min-width: 62.5em) { - .alphaPicker-fixed-right { right: 1em; } diff --git a/src/components/emby-scroller/emby-scroller.css b/src/components/emby-scroller/emby-scroller.css index 11c2c73271..d4d2c69c85 100644 --- a/src/components/emby-scroller/emby-scroller.css +++ b/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%; diff --git a/src/components/emby-tabs/emby-tabs.css b/src/components/emby-tabs/emby-tabs.css index 8d1ac464fb..733a05fb0b 100644 --- a/src/components/emby-tabs/emby-tabs.css +++ b/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; diff --git a/src/components/listview/listview.css b/src/components/listview/listview.css index 9c32d01222..b653502dae 100644 --- a/src/components/listview/listview.css +++ b/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; } diff --git a/src/elements/emby-input/emby-input.css b/src/elements/emby-input/emby-input.css index 683498455b..18ad37a87a 100644 --- a/src/elements/emby-input/emby-input.css +++ b/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 { diff --git a/src/themes/dark/theme.css b/src/themes/dark/theme.css index 4912e591c7..58e9ab1856 100644 --- a/src/themes/dark/theme.css +++ b/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 {