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/displaysettings/displaysettings.js b/src/components/displaysettings/displaysettings.js index fea7d9bd3e..da407c11f1 100644 --- a/src/components/displaysettings/displaysettings.js +++ b/src/components/displaysettings/displaysettings.js @@ -180,6 +180,7 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', ' context.querySelector('#chkThemeSong').checked = userSettings.enableThemeSongs(); context.querySelector('#chkThemeVideo').checked = userSettings.enableThemeVideos(); + context.querySelector('#chkFadein').checked = userSettings.enableFastFadein(); context.querySelector('#chkBackdrops').checked = userSettings.enableBackdrops(); context.querySelector('#selectLanguage').value = userSettings.language() || ''; @@ -216,6 +217,7 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', ' userSettingsInstance.skin(context.querySelector('.selectSkin').value); + userSettingsInstance.enableFastFadein(context.querySelector('#chkFadein').checked); userSettingsInstance.enableBackdrops(context.querySelector('#chkBackdrops').checked); if (user.Id === apiClient.getCurrentUserId()) { diff --git a/src/components/displaysettings/displaysettings.template.html b/src/components/displaysettings/displaysettings.template.html index f469d8d5ce..16bbf0dd8a 100644 --- a/src/components/displaysettings/displaysettings.template.html +++ b/src/components/displaysettings/displaysettings.template.html @@ -3,6 +3,7 @@

${Display}

+
+
@@ -141,6 +143,14 @@ +
+ +
${EnableFastImageFadeInHelp}
+
+
${EnableBackdropsHelp}
+
${EnableThemeSongsHelp}
+