${HeaderApiKeysHelp}
diff --git a/src/assets/css/clearbutton.css b/src/assets/css/clearbutton.css index 2d3f8d6800..9e6c105258 100644 --- a/src/assets/css/clearbutton.css +++ b/src/assets/css/clearbutton.css @@ -9,4 +9,4 @@ vertical-align: middle; font-family: inherit; font-size: inherit; -} \ No newline at end of file +} diff --git a/src/assets/css/dashboard.css b/src/assets/css/dashboard.css index d1f0b540aa..8c8a9ca7f1 100644 --- a/src/assets/css/dashboard.css +++ b/src/assets/css/dashboard.css @@ -2,16 +2,16 @@ .dashboardSections { flex-direction: column; -webkit-box-orient: vertical; - -webkit-box-direction: normal + -webkit-box-direction: normal; } .dashboardFooter { margin-top: 3.5em; - text-align: center + text-align: center; } .dashboardFooter a { - margin: 0 .7em + margin: 0 0.7em; } progress { @@ -19,59 +19,74 @@ progress { -moz-appearance: none; -webkit-appearance: none; margin: 0; - background: #ccc !important + background: #ccc !important; } -progress[role]:after { - background-image: none +progress[role]::after { + background-image: none; } progress::-webkit-progress-bar { - background: #ccc + background: #ccc; } progress::-moz-progress-bar { - background-color: #00a4dc + background-color: #00a4dc; } progress::-webkit-progress-value { - background-color: #00a4dc + background-color: #00a4dc; } -progress[aria-valuenow]:before { - border-radius: .4em; - background-color: #00a4dc +progress[aria-valuenow]::before { + border-radius: 0.4em; + background-color: #00a4dc; } .localnav { - margin-bottom: 2.2em !important + margin-bottom: 2.2em !important; } -@media all and (min-width:50em) { - - .type-interior>.ui-panel-content-wrap>div[data-role=content], - .type-interior>div[data-role=content] { +@media all and (min-width: 50em) { + .type-interior > div[data-role=content], + .type-interior > .ui-panel-content-wrap > div[data-role=content] { padding-right: 0; padding-left: 0; padding-top: 0; - overflow: hidden + overflow: hidden; } } .dashboardDocument .dashboardEntryHeaderButton, .dashboardDocument .lnkManageServer { - display: none !important + display: none !important; } .adminDrawerLogo { padding: 1.5em 1em 1.2em; border-bottom: 1px solid #e0e0e0; margin-bottom: 1em; - display: block + display: block; } .adminDrawerLogo img { - height: 4em + height: 4em; +} + +a[data-role=button] { + background: #292929 !important; + background-clip: padding-box; + -webkit-font-smoothing: antialiased; + -webkit-user-select: none; + -webkit-background-clip: padding-box; + cursor: pointer !important; + font-family: inherit !important; + font-weight: 500 !important; + margin: 0 0.25em !important; + display: inline-block; + padding: 0.8em 1em; + text-align: center; + text-decoration: none !important; } div[data-role=controlgroup] a[data-role=button] { @@ -80,70 +95,88 @@ div[data-role=controlgroup] a[data-role=button] { -webkit-box-shadow: none !important; box-shadow: none !important; -webkit-border-radius: 0; - border-radius: 0 + border-radius: 0; } div[data-role=controlgroup] a[data-role=button]:first-child { - -webkit-border-bottom-left-radius: .3125em; - border-bottom-left-radius: .3125em; - -webkit-border-top-left-radius: .3125em; - border-top-left-radius: .3125em + -webkit-border-bottom-left-radius: 0.3125em; + border-bottom-left-radius: 0.3125em; + -webkit-border-top-left-radius: 0.3125em; + border-top-left-radius: 0.3125em; } div[data-role=controlgroup] a[data-role=button]:last-child { - -webkit-border-bottom-right-radius: .3125em; - border-bottom-right-radius: .3125em; - -webkit-border-top-right-radius: .3125em; - border-top-right-radius: .3125em + -webkit-border-bottom-right-radius: 0.3125em; + border-bottom-right-radius: 0.3125em; + -webkit-border-top-right-radius: 0.3125em; + border-top-right-radius: 0.3125em; } -div[data-role=controlgroup] a[data-role=button]+a[data-role=button] { +div[data-role=controlgroup] a[data-role=button] + a[data-role=button] { border-left-width: 0 !important; - margin: 0 0 0 -.4em !important + margin: 0 0 0 -0.4em !important; } div[data-role=controlgroup] a.ui-btn-active { background: #00a4dc !important; - color: #292929 !important + color: #292929 !important; +} + +.sessionAppInfo img { + max-width: 40px; + max-height: 40px; + margin-right: 8px; +} + +.appLinks img { + height: 36px; +} + +.wizardContent h2 img { + height: 2.5em; + vertical-align: middle; + margin-right: 0.5em; + position: relative; + top: -0.3em; } .header .imageLink { - display: inline-block + display: inline-block; } .header .imageLink img { height: 2.1em; - vertical-align: middle + vertical-align: middle; } .content-primary { padding-top: 6em; padding-right: 1em; - padding-left: 1em + padding-left: 1em; } .withTabs .content-primary { - padding-top: 9em !important + padding-top: 9em !important; } -@media all and (min-width:40em) { +@media all and (min-width: 40em) { .content-primary { - padding-top: 7em + padding-top: 7em; } .withTabs .content-primary { - padding-top: 10em !important + padding-top: 10em !important; } } -@media all and (min-width:84em) { +@media all and (min-width: 84em) { .withTabs .content-primary { - padding-top: 7em !important + padding-top: 7em !important; } } .content-primary ul:first-child { - margin-top: 0 + margin-top: 0; } .dashboardSections { @@ -151,7 +184,7 @@ div[data-role=controlgroup] a.ui-btn-active { display: -webkit-flex; display: flex; -webkit-flex-direction: column; - flex-direction: column + flex-direction: column; } .dashboardColumn { @@ -164,136 +197,7 @@ div[data-role=controlgroup] a.ui-btn-active { flex-shrink: 0; -webkit-box-flex: 1; -webkit-flex-grow: 1; - flex-grow: 1 -} - -.activeSession:not(.playingSession) .sessionNowPlayingContent { - display: none -} - -.dashboardSection { - -webkit-flex-shrink: 0; - flex-shrink: 0; - margin: 0 0 2em -} - -.dashboardSection h3 { - margin-top: .5em; - margin-bottom: .5em -} - -.activeRecordingItems>.card { - width: 50% -} - -@media all and (min-width:70em) { - .dashboardSections { - -webkit-flex-wrap: wrap; - flex-wrap: wrap; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -webkit-flex-direction: row; - flex-direction: row - } - - .dashboardColumn-2-60 { - width: 46% - } - - .dashboardColumn-2-40 { - width: 27% - } - - .dashboardSection { - padding: 0 1.5em - } - - .activeRecordingItems>.card { - width: 25% - } -} - -.premiumBanner img { - position: absolute; - text-align: right; - top: 0; - right: 0; - width: 4.4em; - height: 4.4em -} - -.wizardContent { - max-width: 62em; - padding: .5em 2em 1em; - margin: 0 auto; - background: #fff -} - -.wizardNavigation { - text-align: right -} - -.wizardContent form { - max-width: 100% -} - -.wizardContent h2 img { - height: 2.5em; - vertical-align: middle; - margin-right: .5em; - position: relative; - top: -.3em -} - -.scheduledTaskPaperIconItem { - outline: 0 !important -} - -.activeSession { - width: 100% !important -} - -.activitylogUserPhoto { - height:1.71em; - width:1.71em; - border-radius:100%; - margin-right:.5em; - background-size:cover; - background-repeat:no-repeat; - background-position:center; -} - -@media all and (min-width:40em) { - .activeSession { - width: 100% !important - } -} - -@media all and (min-width:50em) { - .activeSession { - width: 50% !important - } -} - -.sessionCardFooter { - padding-top: .5em !important; - padding-bottom: 1em !important; - border-top: 1px solid #eee; - text-align: center; - position: relative -} - -.sessionAppInfo { - padding: 0.5em; - overflow: hidden; -} - -.sessionCardButtons { - min-height: 2.7em -} - -.sessionCardButton { - margin: 0 + flex-grow: 1; } .sessionNowPlayingContent { @@ -305,7 +209,119 @@ div[data-role=controlgroup] a.ui-btn-active { top: 0; left: 0; right: 0; - bottom: 0 + bottom: 0; +} + +.activeSession:not(.playingSession) .sessionNowPlayingContent { + display: none; +} + +.dashboardSection { + -webkit-flex-shrink: 0; + flex-shrink: 0; + margin: 0 0 2em; +} + +.dashboardSection h3 { + margin-top: 0.5em; + margin-bottom: 0.5em; +} + +.activeRecordingItems > .card { + width: 50%; +} + +@media all and (min-width: 70em) { + .dashboardSections { + -webkit-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -webkit-flex-direction: row; + flex-direction: row; + } + + .dashboardColumn-2-60 { + width: 46%; + } + + .dashboardColumn-2-40 { + width: 27%; + } + + .dashboardSection { + padding: 0 1.5em; + } + + .activeRecordingItems > .card { + width: 25%; + } +} + +.wizardContent { + max-width: 62em; + padding: 0.5em 2em 1em; + margin: 0 auto; + background: #fff; +} + +.wizardNavigation { + text-align: right; +} + +.wizardContent form { + max-width: 100%; +} + +.scheduledTaskPaperIconItem { + outline: 0 !important; +} + +.activeSession { + width: 100% !important; +} + +.activitylogUserPhoto { + height: 1.71em; + width: 1.71em; + border-radius: 100%; + margin-right: 0.5em; + background-size: cover; + background-repeat: no-repeat; + background-position: center; +} + +@media all and (min-width: 40em) { + .activeSession { + width: 100% !important; + } +} + +@media all and (min-width: 50em) { + .activeSession { + width: 50% !important; + } +} + +.sessionCardFooter { + padding-top: 0.5em !important; + padding-bottom: 1em !important; + border-top: 1px solid #eee; + text-align: center; + position: relative; +} + +.sessionAppInfo { + padding: 0.5em; + overflow: hidden; +} + +.sessionCardButtons { + min-height: 2.7em; +} + +.sessionCardButton { + margin: 0; } .sessionNowPlayingInnerContent { @@ -314,23 +330,23 @@ div[data-role=controlgroup] a.ui-btn-active { left: 0; right: 0; bottom: 0; - font-weight: 400 + font-weight: 400; } -.sessionNowPlayingContent-withbackground+.sessionNowPlayingInnerContent { +.sessionNowPlayingContent-withbackground + .sessionNowPlayingInnerContent { color: #fff !important; - background: rgba(0, 0, 0, .7) + background: rgba(0, 0, 0, 0.7); } .sessionAppName { vertical-align: top; - max-width: 200px + max-width: 200px; } .sessionNowPlayingDetails { display: flex; position: absolute; - bottom: 0px; + bottom: 0; width: 100%; } @@ -340,12 +356,6 @@ div[data-role=controlgroup] a.ui-btn-active { padding: 0.8em 0.5em; } -.sessionAppInfo img { - max-width: 40px; - max-height: 40px; - margin-right: 8px; -} - .sessionNowPlayingTime { flex-shrink: 0; align-self: flex-end; @@ -357,6 +367,13 @@ div[data-role=controlgroup] a.ui-btn-active { white-space: nowrap; } +.playbackProgress, +.transcodingProgress { + margin: 0; + width: 100%; + background: transparent !important; +} + .activeSession .playbackProgress, .activeSession .transcodingProgress { position: absolute; @@ -367,13 +384,6 @@ div[data-role=controlgroup] a.ui-btn-active { width: 100%; } -.playbackProgress, -.transcodingProgress { - margin: 0px; - width: 100%; - background: transparent !important; -} - .playbackProgress > div { z-index: 1000; background-color: #00a4dc; @@ -383,90 +393,70 @@ div[data-role=controlgroup] a.ui-btn-active { background-color: #dd4919; } -@media all and (max-width:34.375em) { +@media all and (max-width: 34.375em) { .sessionAppName { - max-width: 160px + max-width: 160px; } } -@media all and (max-width:31.25em) { +@media all and (max-width: 31.25em) { .sessionAppName { - max-width: 150px + max-width: 150px; } } .disabledUser { -webkit-filter: grayscale(100%); - filter: grayscale(100%) + filter: grayscale(100%); } .disabledUserBanner { - margin: 0 0 2em + margin: 0 0 2em; } .appLinks a { - text-decoration: none !important -} - -.appLinks a+a { - margin-left: 5px -} - -.appLinks img { - height: 36px -} - -a[data-role=button] { - background-clip: padding-box; - -webkit-font-smoothing: antialiased; - -webkit-user-select: none; - -webkit-background-clip: padding-box; - cursor: pointer !important; - font-family: inherit !important; - font-weight: 500 !important; - margin: 0 .25em !important; - display: inline-block; - padding: .8em 1em; - text-align: center; text-decoration: none !important; - background: #292929 !important; +} + +.appLinks a + a { + margin-left: 5px; } @-webkit-keyframes rotating { from { -webkit-transform: rotate(0); - transform: rotate(0) + transform: rotate(0); } to { -webkit-transform: rotate(360deg); - transform: rotate(360deg) + transform: rotate(360deg); } } @keyframes rotating { from { -webkit-transform: rotate(0); - transform: rotate(0) + transform: rotate(0); } to { -webkit-transform: rotate(360deg); - transform: rotate(360deg) + transform: rotate(360deg); } } .rotatingCircle { -webkit-animation: rotating 2s linear infinite; - animation: rotating 2s linear infinite + animation: rotating 2s linear infinite; } .pluginPreviewImg { - -webkit-box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37); - box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37) + -webkit-box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37); + box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37); } -.ui-bar-a{ +.ui-bar-a { text-align: center; padding: 0 20px; } diff --git a/src/assets/css/detailtable.css b/src/assets/css/detailtable.css index 33f0608365..4e2e16511c 100644 --- a/src/assets/css/detailtable.css +++ b/src/assets/css/detailtable.css @@ -1,7 +1,7 @@ .detailTableBodyCell, .detailTableHeaderCell { border-spacing: 0; - padding: .4em + padding: 0.4em; } .detailTable { @@ -9,11 +9,11 @@ border-spacing: 0; text-align: left; width: 100%; - margin: 0 auto + margin: 0 auto; } .detailTableHeaderCell { font-weight: 700; text-align: left; - vertical-align: top -} \ No newline at end of file + vertical-align: top; +} diff --git a/src/assets/css/flexstyles.css b/src/assets/css/flexstyles.css index b35e25d57b..a5a479f2f5 100644 --- a/src/assets/css/flexstyles.css +++ b/src/assets/css/flexstyles.css @@ -44,4 +44,4 @@ .align-self-flex-end { align-self: flex-end; -} \ No newline at end of file +} diff --git a/src/assets/css/fonts.css b/src/assets/css/fonts.css index 12f1eaf4b7..30fd1e2eb6 100644 --- a/src/assets/css/fonts.css +++ b/src/assets/css/fonts.css @@ -1,14 +1,13 @@ html { font-family: -apple-system, "Helvetica", system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", 'Open Sans', sans-serif; -} - -html { font-size: 93%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } -h1, h2, h3 { +h1, +h2, +h3 { /* For better bolding, since Helvetica does not support 500 weight, and 600 is too thick */ font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", 'Open Sans', sans-serif; } diff --git a/src/assets/css/ios.css b/src/assets/css/ios.css index 47fa7bd538..57de0c5fdd 100644 --- a/src/assets/css/ios.css +++ b/src/assets/css/ios.css @@ -1,8 +1,8 @@ html { - font-size: 82% !important + font-size: 82% !important; } .formDialogFooter { position: static !important; - margin: 0 -1em !important -} \ No newline at end of file + margin: 0 -1em !important; +} diff --git a/src/assets/css/librarybrowser.css b/src/assets/css/librarybrowser.css index 6ca85ae941..e5f45f7ab1 100644 --- a/src/assets/css/librarybrowser.css +++ b/src/assets/css/librarybrowser.css @@ -1,15 +1,15 @@ .headerUserImage, .navMenuOption, .pageTitle { - vertical-align: middle + vertical-align: middle; } -.detailButton-mobile, +.detailButton, .itemLinks, .listPaging, .sectionTabs, .viewSettings { - text-align: center + text-align: center; } .headerSelectedPlayer, @@ -17,27 +17,27 @@ .navMenuOptionText { -o-text-overflow: ellipsis; text-overflow: ellipsis; - overflow: hidden + overflow: hidden; } .libraryPage { - padding-top: 7em !important + padding-top: 7em !important; } .itemDetailPage { - padding-top: 0em !important + padding-top: 0 !important; } .standalonePage { - padding-top: 4.5em !important + padding-top: 4.5em !important; } .wizardPage { - padding-top: 7em !important + padding-top: 7em !important; } .libraryPage:not(.noSecondaryNavPage) { - padding-top: 7.5em !important + padding-top: 7.5em !important; } .absolutePageTabContent { @@ -48,13 +48,13 @@ z-index: 1; margin: 0 !important; top: 6.9em !important; - -webkit-transition: -webkit-transform .2s ease-out; - -o-transition: transform .2s ease-out; - transition: transform .2s ease-out + -webkit-transition: -webkit-transform 0.2s ease-out; + -o-transition: transform 0.2s ease-out; + transition: transform 0.2s ease-out; } .pageTabContent:not(.is-active) { - display: none !important + display: none !important; } .headerUserImage { @@ -64,7 +64,7 @@ background-position: center center; -webkit-border-radius: 100em; border-radius: 100em; - display: inline-block + display: inline-block; } .headerUserButtonRound div { @@ -77,76 +77,11 @@ .headerButton { -webkit-flex-shrink: 0; - flex-shrink: 0 + flex-shrink: 0; } .hideMainDrawer .mainDrawerButton { - display: none -} - -.noHeaderRight .headerRight, -.noHomeButtonHeader .headerHomeButton { - display: none !important -} - -.pageTitle { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: inline-flex; - margin: .3em 0 0 .5em; - height: 1.7em; - -webkit-box-align: center; - -webkit-align-items: center; - align-items: center; - -webkit-flex-shrink: 1; - flex-shrink: 1 -} - -.headerLeft, -.skinHeader { - display: -webkit-box; - display: -webkit-flex -} - -.detailButton-mobile, -.skinHeader { - flex-direction: column; - -webkit-flex-direction: column; - -webkit-box-orient: vertical; - -webkit-box-direction: normal -} - -.pageTitleWithLogo { - background-position: left center; - -webkit-background-size: contain; - background-size: contain; - background-repeat: no-repeat; - width: 13.2em -} - -.skinHeader { - position: fixed; - right: 0; - left: 0; - z-index: 999; - top: 0; - border: 0; - display: flex; - flex-direction: column; - contain: layout style paint -} - -.headerLeft, -.headerRight { - -webkit-box-align: center -} - -.hiddenViewMenuBar .skinHeader { - display: none -} - -.headerTop { - padding: .54em 0 + display: none; } .headerLeft { @@ -160,10 +95,6 @@ justify-content: flex-start; } -.sectionTabs { - width: 100% -} - .headerRight { display: -webkit-box; display: -webkit-flex; @@ -172,11 +103,75 @@ align-items: center; -webkit-box-pack: end; -webkit-justify-content: flex-end; - justify-content: flex-end + justify-content: flex-end; +} + +.noHeaderRight .headerRight, +.noHomeButtonHeader .headerHomeButton { + display: none !important; +} + +.pageTitle { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: inline-flex; + margin: 0.3em 0 0 0.5em; + height: 1.7em; + -webkit-box-align: center; + -webkit-align-items: center; + align-items: center; + -webkit-flex-shrink: 1; + flex-shrink: 1; +} + +.headerLeft, +.skinHeader { + display: -webkit-box; + display: -webkit-flex; +} + +.detailButton, +.skinHeader { + flex-direction: column; + -webkit-flex-direction: column; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; +} + +.pageTitleWithLogo { + background-position: left center; + -webkit-background-size: contain; + background-size: contain; + background-repeat: no-repeat; + width: 13.2em; +} + +.skinHeader { + position: fixed; + right: 0; + left: 0; + z-index: 999; + top: 0; + border: 0; + display: flex; + flex-direction: column; + contain: layout style paint; +} + +.hiddenViewMenuBar .skinHeader { + display: none; +} + +.headerTop { + padding: 0.54em 0; +} + +.sectionTabs { + width: 100%; } .selectedMediaFolder { - background-color: #f2f2f2 !important + background-color: #f2f2f2 !important; } .navMenuOption { @@ -188,57 +183,56 @@ align-items: center; text-decoration: none; color: inherit; - padding: .9em 0 .9em 2.4em !important; + padding: 0.9em 0 0.9em 2.4em !important; -webkit-box-flex: 1; -webkit-flex-grow: 1; flex-grow: 1; font-weight: 400 !important; margin: 0 !important; -webkit-border-radius: 0 !important; - border-radius: 0 !important + border-radius: 0 !important; } .navMenuOptionIcon { margin-right: 1.2em; -webkit-flex-shrink: 0; - flex-shrink: 0 + flex-shrink: 0; } .navMenuOptionText { - white-space: nowrap + white-space: nowrap; } .sidebarHeader { padding-left: 1.2em; - margin: 1em 0 .5em + margin: 1em 0 0.5em; } .dashboardDocument .skinBody { - -webkit-transition: left ease-in-out .3s, padding ease-in-out .3s; - -o-transition: left ease-in-out .3s, padding ease-in-out .3s; - transition: left ease-in-out .3s, padding ease-in-out .3s; + -webkit-transition: left ease-in-out 0.3s, padding ease-in-out 0.3s; + -o-transition: left ease-in-out 0.3s, padding ease-in-out 0.3s; + transition: left ease-in-out 0.3s, padding ease-in-out 0.3s; position: absolute; top: 0; right: 0; bottom: 0; - left: 0 + left: 0; } .layout-desktop .searchTabButton, .layout-mobile .searchTabButton, .layout-tv .headerSearchButton { - display: none !important + display: none !important; } .mainDrawer-scrollContainer { - padding-bottom: 10vh + padding-bottom: 10vh; } -@media all and (min-width:40em) { - +@media all and (min-width: 40em) { .dashboardDocument .adminDrawerLogo, .dashboardDocument .mainDrawerButton { - display: none !important + display: none !important; } .dashboardDocument .mainDrawer { @@ -250,25 +244,25 @@ -webkit-box-shadow: none !important; box-shadow: none !important; width: 20.205em !important; - font-size: 94% + font-size: 94%; } .dashboardDocument .mainDrawer-scrollContainer { - margin-top: 5em !important + margin-top: 5em !important; } .dashboardDocument .skinBody { - left: 20em + left: 20em; } } -@media all and (max-width:60em) { +@media all and (max-width: 60em) { .libraryDocument .mainDrawerButton { - display: none + display: none; } } -@media all and (max-width:84em) { +@media all and (max-width: 84em) { .withSectionTabs .headerTop { padding-bottom: 0.2em; } @@ -279,35 +273,16 @@ } @media all and (min-width:84em) { - .headerTop { - padding: 1.489em 0 - } - - .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; - margin-top: -3.34em; - position: relative; - top: -1.05em - } - .libraryPage:not(.noSecondaryNavPage) { - padding-top: 4.6em !important + padding-top: 4.6em !important; } .pageWithAbsoluteTabs:not(.noSecondaryNavPage) { - padding-top: 6.7em !important + padding-top: 6.7em !important; } .absolutePageTabContent { - top: 5.7em !important + top: 5.7em !important; } .dashboardDocument .mainDrawer-scrollContainer { @@ -317,22 +292,22 @@ .headerSelectedPlayer { max-width: 10em; - white-space: nowrap + white-space: nowrap; } -@media all and (max-width:37.5em) { +@media all and (max-width: 37.5em) { .headerSelectedPlayer { - display: none + display: none; } } .hidingAnimatedTab { - visibility: hidden + visibility: hidden; } .headerArrowImage { height: 20px; - margin-left: .5em + margin-left: 0.5em; } .backdropContainer { @@ -341,87 +316,92 @@ left: 0; right: 0; bottom: 0; - z-index: -1 + z-index: -1; } .libraryPage .header { - padding-bottom: 0 + padding-bottom: 0; } .flexPageTabContent.is-active { display: -webkit-box !important; display: -webkit-flex !important; - display: flex !important + display: flex !important; } .viewSettings { - margin: 0 0 .25em + margin: 0 0 0.25em; } -.viewControls+.listTopPaging { - margin-left: .5em !important +.listTopPaging, +.viewControls { + display: inline-block; +} + +.viewControls + .listTopPaging { + margin-left: 0.5em !important; } .criticReview { margin: 1.5em 0; background: #222; - padding: .8em .8em .8em 3em; - -webkit-border-radius: .3em; - border-radius: .3em; - position: relative + padding: 0.8em 0.8em 0.8em 3em; + -webkit-border-radius: 0.3em; + border-radius: 0.3em; + position: relative; } .detailLogo, .itemBackdrop { background-repeat: no-repeat; - background-position: center center + background-position: center center; } .criticReview:first-child { - margin-top: .5em + margin-top: 0.5em; } .criticReview img { - width: 2.4em + width: 2.4em; } .criticRatingScore { - margin-bottom: .5em + margin-bottom: 0.5em; } .itemTag { display: inline-block; - margin-right: 1em + margin-right: 1em; } .itemOverview { - white-space: pre-wrap + white-space: pre-wrap; } .itemLinks { - padding: 0 + padding: 0; } .itemLinks p { - margin: .5em 0 + margin: 0.5em 0; } .reviewLink, .reviewerName { - margin-top: .5em + margin-top: 0.5em; } .reviewerName { - color: #ccc + color: #ccc; } .reviewDate { - margin-left: 1em + margin-left: 1em; } .reviewScore { position: absolute; - left: .8em + left: 0.8em; } .itemBackdrop { @@ -430,14 +410,18 @@ background-repeat: no-repeat; background-position: center; height: 50vh; - position: relative + position: relative; +} + +.personBackdrop { + background-size: contain; } .itemBackdropProgressBar { position: absolute !important; bottom: 0; left: 0; - right: 0 + right: 0; } .desktopMiscInfoContainer { @@ -450,6 +434,19 @@ position: relative; } +.layout-mobile .parentName, +.layout-mobile .itemName, +.layout-mobile .itemMiscInfo, +.layout-mobile .mainDetailButtons { + display: flex; + align-items: center; + justify-content: center; +} + +.layout-mobile .infoText { + white-space: normal; +} + .layout-tv .detailPagePrimaryContainer { position: relative; } @@ -459,11 +456,14 @@ align-items: center; align-content: center; position: sticky; - background-color: #101010; - top: 0; + top: 8%; z-index: 2; } +.detailSticky { + background-color: #101010; +} + .infoWrapper { flex: 1 0 0; } @@ -477,30 +477,29 @@ .detailPageSecondaryContainer { margin: 1.25em 0; +} + +.detailPageContent { display: flex; flex-direction: column; padding-left: 2%; padding-right: 2%; } +.detailImageContainer { + position: sticky; + top: 25%; + float: left; + width: 22.786458333333332vw; +} + .layout-mobile .detailImageContainer, .layout-tv .detailImageContainer { position: relative; } -.detailImageContainer { - margin: 1.25em 0; - position: sticky; - top: 15%; - float: left; - width: 22.786458333333332vw; -} - .detailPagePrimaryContent { position: relative; - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - flex-grow: 1 } .detailLogo { @@ -510,22 +509,22 @@ top: 14.5%; right: 10.5%; -webkit-background-size: contain; - background-size: contain + background-size: contain; } -@media all and (max-width:87.5em) { +@media all and (max-width: 87.5em) { .detailLogo { - right: 5% + right: 5%; } } -@media all and (max-width:75em) { +@media all and (max-width: 75em) { .detailLogo { - right: 2% + right: 2%; } } -@media all and (max-width:68.75em) { +@media all and (max-width: 68.75em) { .detailLogo { width: 14.91em; height: 3.5em; @@ -533,99 +532,108 @@ bottom: 5%; top: auto; background-position: center right; - display: none + display: none; } } .itemDetailImage { width: 100% !important; - box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37); - -webkit-box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37); + box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37); + -webkit-box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37); } @media all and (max-width:62.5em) { - .detailPageContent { + .detailPageWrapperContainer { position: relative } .btnPlaySimple { - display: none !important + display: none !important; } } -@media all and (max-width:75em) { +@media all and (max-width: 75em) { .lnkSibling { - display: none !important + display: none !important; } } .parentName { display: block; - margin-bottom: .5em + margin-bottom: 0.5em; +} + +.btnSyncComplete { + background: #673ab7 !important; +} + +.btnSyncComplete i { + -webkit-border-radius: 100em; + border-radius: 100em; } .emby-button.detailFloatingButton { position: absolute; - background-color: rgba(0, 0, 0, .5) !important; + background-color: rgba(0, 0, 0, 0.5) !important; z-index: 1; top: 50%; left: 50%; margin: -2.2em 0 0 -2.2em; padding: 0.4em !important; - color: rgba(255, 255, 255, .76) + color: rgba(255, 255, 255, 0.76); } .emby-button.detailFloatingButton i { - font-size: 3.5em + font-size: 3.5em; } -@media all and (max-width:62.5em) { +@media all and (max-width: 62.5em) { .parentName { - margin-bottom: 1em + margin-bottom: 1em; } .itemDetailPage { - padding-top: 0 !important + padding-top: 0 !important; } .detailimg-hidemobile { - display: none + display: none; } } -@media all and (min-width:31.25em) { +@media all and (min-width: 31.25em) { .mobileDetails { - display: none + display: none; } } -@media all and (max-width:31.25em) { +@media all and (max-width: 31.25em) { .desktopDetails { - display: none !important + display: none !important; } } -.detailButton-mobile, +.detailButton, .mainDetailButtons { display: flex; display: -webkit-box; - display: -webkit-flex + display: -webkit-flex; } .itemName { - margin: .5em 0 + margin: 0.5em 0; } .empty { - margin: 0 + margin: 0; } -.detailCollapsibleSection:not(.hide)+.detailCollapsibleSection { - margin-top: -2em +.detailCollapsibleSection:not(.hide) + .detailCollapsibleSection { + margin-top: -2em; } .detailPageCollabsible { - margin-top: 0 + margin-top: 0; } .mainDetailButtons { @@ -640,16 +648,16 @@ .recordingFields button { margin-left: 0; - margin-right: .5em; + margin-right: 0.5em; -webkit-flex-shrink: 0; - flex-shrink: 0 + flex-shrink: 0; } -.mainDetailButtons.hide+.recordingFields { - margin-top: 1.5em !important +.mainDetailButtons.hide + .recordingFields { + margin-top: 1.5em !important; } -.detailButton-mobile { +.detailButton { display: flex; flex-direction: column; -webkit-box-pack: center; @@ -659,35 +667,31 @@ -webkit-align-items: center; align-items: center; margin: 0 !important; - padding: .5em .7em !important -} - -.detailButton { - margin: 0 .5em 0 0 !important + padding: 0.5em 0.7em !important; } @media all and (min-width:29em) { - .detailButton-mobile { + .detailButton { padding-left: .75em !important; padding-right: .75em !important } } @media all and (min-width:32em) { - .detailButton-mobile { + .detailButton { padding-left: .8em !important; padding-right: .8em !important } } @media all and (min-width:35em) { - .detailButton-mobile { + .detailButton { padding-left: .85em !important; padding-right: .85em !important } } -.detailButton-mobile-content { +.detailButton-content { display: -webkit-box; display: -webkit-flex; display: flex; @@ -700,55 +704,68 @@ justify-content: center; -webkit-box-align: center; -webkit-align-items: center; - align-items: center + align-items: center; } -.detailButton-mobile-icon { +.detailButton-icon { font-size: 1.6em !important; width: 1em; - height: 1em + height: 1em; } .detailImageProgressContainer { - margin-left: 6px; - width: 21.886458333333332vw; + position: absolute; + bottom: 0; + width: 22.786458333333332vw; } -.detailButton-mobile-text { +.detailButton-text { margin-top: .7em; font-size: 80%; - font-weight: 400 + font-weight: 400; } -@media all and (max-width:62.5em) { +@media all and (max-width: 62.5em) { .mainDetailButtons { - margin-left: -.5em + margin-left: -0.5em; } - .detailButton { + .detailButtonHideonMobile { display: none !important } } @media all and (min-width:62.5em) { + .headerTop { + padding: 0.8em 0 + } + + .headerTabs { + align-self: center; + width: auto; + align-items: center; + justify-content: center; + margin-top: -3.34em; + position: relative; + } + .detailFloatingButton { + display: none !important; + } + + .personBackdrop { display: none !important } .mainDetailButtons { font-size: 108%; - margin: 1.25em 0 + margin: 1.25em 0; } } -.listTopPaging, -.viewControls { - display: inline-block -} - -@media all and (max-width:50em) { +@media all and (max-width: 50em) { .editorMenuLink { - display: none + display: none; } } @@ -760,109 +777,90 @@ flex-wrap: wrap; -webkit-box-align: center; -webkit-align-items: center; - align-items: center + align-items: center; } -@media all and (max-width:31.25em) { +@media all and (max-width: 31.25em) { .mobileDetails .itemMiscInfo { text-align: center; -webkit-box-pack: center; -webkit-justify-content: center; - justify-content: center + justify-content: center; } .itemMiscInfo .endsAt { - display: none + display: none; } } .layout-tv .detailVerticalSection { - margin-bottom: 3.4em !important + margin-bottom: 3.4em !important; } -.detailPageContent { +.detailPageWrapperContainer { border-spacing: 0; border-collapse: collapse; } -@media all and (max-width:62.5em) { - .detailPageContent-nodetailimg { - padding-top: 0; - } -} - .mediaInfoStream { margin: 0 3em 0 0; display: inline-block; - vertical-align: top + vertical-align: top; } .mediaInfoStreamType { display: block; - margin: 1em 0 + margin: 1em 0; } .mediaInfoAttribute, .mediaInfoLabel { - display: inline-block + display: inline-block; } .mediaInfoLabel { margin-right: 1em; - font-weight: 600 + font-weight: 600; } .recordingProgressBar::-moz-progress-bar { - background-color: #c33 + background-color: #c33; } .recordingProgressBar::-webkit-progress-value { - background-color: #c33 + background-color: #c33; } -.recordingProgressBar[aria-valuenow]:before { - background-color: #c33 +.recordingProgressBar[aria-valuenow]::before { + background-color: #c33; } .timelineHeader { - margin-bottom: .25em; + margin-bottom: 0.25em; line-height: 1.25em; - line-height: initial + line-height: initial; } .itemsContainer { - margin: 0 auto + margin: 0 auto; } -@media all and (max-height:31.25em) { +@media all and (max-height: 31.25em) { .itemBackdrop { - height: 52vh + height: 52vh; } } -@media all and (max-width:75em) { +@media all and (max-width: 75em) { .listViewUserDataButtons { - display: none !important + display: flex; + align-items: center; + font-size: 65%; } } -@media all and (max-width:62.5em) { - .detailsHiddenOnMobile { - display: none - } -} - -.btnSyncComplete { - background: #673AB7 !important -} - -.btnSyncComplete i { - -webkit-border-radius: 100em; - border-radius: 100em -} - .bulletSeparator { - margin: 0 .35em + margin: 0 0.35em; } .mediaInfoIcons { @@ -874,18 +872,18 @@ align-items: center; margin: 1em 0; -webkit-flex-wrap: wrap; - flex-wrap: wrap + flex-wrap: wrap; } .verticalSection-extrabottompadding { - margin-bottom: 2.7em + margin-bottom: 2.7em; } .sectionTitleButton, .sectionTitleIconButton { margin-right: 0 !important; display: inline-block; - vertical-align: middle + vertical-align: middle; } .sectionTitleContainer { @@ -912,11 +910,11 @@ div:not(.sectionTitleContainer-cards) > .sectionTitle-cards { .sectionTitleButton { margin-left: 1.5em !important; -webkit-flex-shrink: 0; - flex-shrink: 0 + flex-shrink: 0; } .sectionTitleButton + .sectionTitleButton { - margin-left: .5em !important + margin-left: 0.5em !important; } .sectionTitleIconButton { @@ -924,13 +922,13 @@ div:not(.sectionTitleContainer-cards) > .sectionTitle-cards { -webkit-flex-shrink: 0; flex-shrink: 0; font-size: 84% !important; - padding: .5em !important + padding: 0.5em !important; } .horizontalItemsContainer { display: -webkit-box; display: -webkit-flex; - display: flex + display: flex; } .sectionTitleTextButton { @@ -938,22 +936,22 @@ div:not(.sectionTitleContainer-cards) > .sectionTitle-cards { display: -webkit-inline-box !important; display: -webkit-inline-flex !important; display: inline-flex !important; - color: inherit !important + color: inherit !important; } .sectionTitleTextButton:not(.padded-left) { - padding: 0 !important + padding: 0 !important; } .sectionTitleTextButton.padded-left { padding-bottom: 0 !important; padding-right: 0 !important; - padding-top: 0 !important + padding-top: 0 !important; } -.sectionTitleTextButton>.sectionTitle { +.sectionTitleTextButton > .sectionTitle { margin-bottom: 0; - margin-top: 0 + margin-top: 0; } .padded-left { @@ -983,17 +981,13 @@ div:not(.sectionTitleContainer-cards) > .sectionTitle-cards { } @media all and (min-height:31.25em) { - .padded-left-withalphapicker { - padding-left: 7.5%; - } - .padded-right-withalphapicker { padding-right: 7.5%; } } .searchfields-icon { - color: #aaaaaa; + color: #aaa; } .button-accent-flat { @@ -1004,27 +998,27 @@ div:not(.sectionTitleContainer-cards) > .sectionTitle-cards { text-decoration: none; font-weight: inherit !important; vertical-align: middle; - color: inherit !important + color: inherit !important; } .itemsViewSettingsContainer { -webkit-box-pack: center; -webkit-justify-content: center; - justify-content: center + justify-content: center; } -@media all and (min-width:40em) { +@media all and (min-width: 40em) { .listIconButton-autohide { - display: none !important + display: none !important; } } -@media all and (max-width:40em) { +@media all and (max-width: 40em) { .listTextButton-autohide { - display: none !important + display: none !important; } } -.itemsViewSettingsContainer>.button-flat { - margin: 0 +.itemsViewSettingsContainer > .button-flat { + margin: 0; } diff --git a/src/assets/css/livetv.css b/src/assets/css/livetv.css index 93e3e029c8..695adff8c5 100644 --- a/src/assets/css/livetv.css +++ b/src/assets/css/livetv.css @@ -1,9 +1,9 @@ .guideVerticalScroller { - padding-bottom: 15em + padding-bottom: 15em; } -@media all and (min-width:62.5em) { +@media all and (min-width: 62.5em) { #guideTab { - padding-left: .5em + padding-left: 0.5em; } -} \ No newline at end of file +} diff --git a/src/assets/css/material-icons/flUhRq6tzZclQEJ-Vdg-IuiaDsNa.woff b/src/assets/css/material-icons/flUhRq6tzZclQEJ-Vdg-IuiaDsNa.woff deleted file mode 100644 index 9357bfc6ff..0000000000 Binary files a/src/assets/css/material-icons/flUhRq6tzZclQEJ-Vdg-IuiaDsNa.woff and /dev/null differ diff --git a/src/assets/css/material-icons/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2 b/src/assets/css/material-icons/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2 deleted file mode 100644 index db867bc362..0000000000 Binary files a/src/assets/css/material-icons/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2 and /dev/null differ diff --git a/src/assets/css/material-icons/style.css b/src/assets/css/material-icons/style.css deleted file mode 100644 index 2d410b9985..0000000000 --- a/src/assets/css/material-icons/style.css +++ /dev/null @@ -1,25 +0,0 @@ -@font-face { - font-family: 'Material Icons'; - font-style: normal; - font-weight: 400; - src: local('Material Icons'), local('MaterialIcons-Regular'), url(flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2'), url(flUhRq6tzZclQEJ-Vdg-IuiaDsNa.woff) format('woff'); -} - -.md-icon { - font-family: 'Material Icons'; - font-weight: normal; - font-style: normal; - letter-spacing: normal; - text-transform: none; - display: inline-block; - white-space: nowrap; - word-wrap: normal; - direction: ltr; - -webkit-font-feature-settings: 'liga'; - -webkit-font-smoothing: antialiased; - text-rendering: optimizeLegibility; - font-feature-settings: "liga" 1; - line-height: 1; - overflow: hidden; - vertical-align: middle; -} diff --git a/src/assets/css/metadataeditor.css b/src/assets/css/metadataeditor.css index 542c7c8f2b..190f53187f 100644 --- a/src/assets/css/metadataeditor.css +++ b/src/assets/css/metadataeditor.css @@ -1,29 +1,29 @@ .editPageSidebar { - display: block + display: block; } .editPageSidebar-withcontent { - display: none + display: none; } .libraryTree { - margin-left: .25em + margin-left: 0.25em; } .offlineEditorNode { - color: #c33 + color: #c33; } .editorNode img { height: 18px; - margin: 0 .35em; + margin: 0 0.35em; vertical-align: middle; position: relative; - top: -2px + top: -2px; } .jstree-anchor { - font-weight: 400 !important + font-weight: 400 !important; } .jstree-wholerow-hovered { @@ -31,7 +31,7 @@ -webkit-border-radius: 0 !important; border-radius: 0 !important; -webkit-box-shadow: none !important; - box-shadow: none !important + box-shadow: none !important; } .jstree-default .jstree-hovered { @@ -40,18 +40,18 @@ border-radius: 0 !important; -webkit-box-shadow: none !important; box-shadow: none !important; - color: #fff !important + color: #fff !important; } .jstree-default .jstree-wholerow-clicked { - background: #00a4dc !important + background: #00a4dc !important; } .metadataSidebarIcon { - margin-right: .4em + margin-right: 0.4em; } -@media all and (min-width:50em) { +@media all and (min-width: 50em) { .editPageSidebar { position: fixed; top: 5.2em; @@ -59,21 +59,21 @@ left: 0; width: 30%; border-right: 1px solid #555; - display: block + display: block; } .editPageInnerContent { float: right; - width: 68.5% + width: 68.5%; } } -@media all and (min-width:112.5em) { +@media all and (min-width: 112.5em) { .editPageSidebar { - width: 25% + width: 25%; } .editPageInnerContent { - width: 73.5% + width: 73.5%; } } diff --git a/src/assets/css/scrollstyles.css b/src/assets/css/scrollstyles.css index 431cd2ba1f..1cb3207e06 100644 --- a/src/assets/css/scrollstyles.css +++ b/src/assets/css/scrollstyles.css @@ -9,7 +9,8 @@ scroll-behavior: smooth; } -.hiddenScrollX, .layout-tv .scrollX { +.hiddenScrollX, +.layout-tv .scrollX { -ms-overflow-style: none; } @@ -17,7 +18,8 @@ overflow: -moz-scrollbars-none; } -.hiddenScrollX::-webkit-scrollbar, .layout-tv .scrollX::-webkit-scrollbar { +.hiddenScrollX::-webkit-scrollbar, +.layout-tv .scrollX::-webkit-scrollbar { height: 0 !important; display: none; } @@ -35,17 +37,22 @@ scroll-behavior: smooth; } -.hiddenScrollY, .layout-tv .smoothScrollY { +.hiddenScrollY, +.layout-tv .smoothScrollY { -ms-overflow-style: none; + /* Can't do this because it not only hides the scrollbar, but also prevents scrolling */ - /*overflow: -moz-scrollbars-none;*/ + + /* overflow: -moz-scrollbars-none; */ } .hiddenScrollY-forced { overflow: -moz-scrollbars-none; } -.hiddenScrollY::-webkit-scrollbar, .layout-tv .smoothScrollY::-webkit-scrollbar, .layout-tv .scrollY::-webkit-scrollbar { +.hiddenScrollY::-webkit-scrollbar, +.layout-tv .smoothScrollY::-webkit-scrollbar, +.layout-tv .scrollY::-webkit-scrollbar { width: 0 !important; display: none; } diff --git a/src/assets/css/site.css b/src/assets/css/site.css index 292fc67454..55ce4c8807 100644 --- a/src/assets/css/site.css +++ b/src/assets/css/site.css @@ -2,7 +2,7 @@ body, html { margin: 0; padding: 0; - height: 100% + height: 100%; } .backgroundContainer { @@ -11,11 +11,11 @@ html { left: 0; right: 0; bottom: 0; - contain: strict + contain: strict; } html { - line-height: 1.35 + line-height: 1.35; } .layout-mobile, @@ -25,44 +25,44 @@ html { -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; - user-select: none + user-select: none; } body { overflow-x: hidden; background-color: transparent !important; - -webkit-font-smoothing: antialiased + -webkit-font-smoothing: antialiased; } .mainAnimatedPage { - contain: style size !important + contain: style size !important; } .pageContainer { - overflow-x: visible !important + overflow-x: visible !important; } .bodyWithPopupOpen { - overflow-y: hidden !important + overflow-y: hidden !important; } div[data-role=page] { - outline: 0 + outline: 0; } .pageTitle { margin-top: 0; - font-family: inherit + font-family: inherit; } .fieldDescription { - padding-left: .15em; + padding-left: 0.15em; font-weight: 400; - white-space: normal !important + white-space: normal !important; } -.fieldDescription+.fieldDescription { - margin-top: .3em +.fieldDescription + .fieldDescription { + margin-top: 0.3em; } .content-primary, @@ -73,21 +73,21 @@ div[data-role=page] { padding-bottom: 5em !important; } -@media all and (min-width:50em) { +@media all and (min-width: 50em) { .readOnlyContent, form { - max-width: 54em + max-width: 54em; } } .headerHelpButton { margin-left: 1.25em !important; - padding-bottom: .4em !important; - padding-top: .4em !important + padding-bottom: 0.4em !important; + padding-top: 0.4em !important; } .mediaInfoContent { margin-left: auto; margin-right: auto; - width: 85% + width: 85%; } diff --git a/src/assets/css/videoosd.css b/src/assets/css/videoosd.css index c43696dd45..f4f198325b 100644 --- a/src/assets/css/videoosd.css +++ b/src/assets/css/videoosd.css @@ -3,7 +3,7 @@ user-select: none; -webkit-user-select: none; -moz-user-select: none; - -ms-user-select: none + -ms-user-select: none; } .osdPoster img, @@ -11,13 +11,13 @@ .videoOsdBottom { bottom: 0; left: 0; - right: 0 + right: 0; } .osdHeader { - -webkit-transition: opacity .3s ease-out; - -o-transition: opacity .3s ease-out; - transition: opacity .3s ease-out; + -webkit-transition: opacity 0.3s ease-out; + -o-transition: opacity 0.3s ease-out; + transition: opacity 0.3s ease-out; position: relative; z-index: 1; background: rgba(0, 0, 0, 0.7) !important; @@ -27,11 +27,11 @@ } .osdHeader-hidden { - opacity: 0 + opacity: 0; } .osdHeader .headerButton:not(.headerBackButton):not(.headerCastButton) { - display: none + display: none; } .chapterThumbContainer { @@ -40,7 +40,7 @@ -webkit-box-flex: 1; -webkit-flex-grow: 1; flex-grow: 1; - position: relative + position: relative; } .chapterThumb { @@ -50,20 +50,20 @@ background-repeat: no-repeat; border: 0; height: 20vh; - min-width: 20vh + min-width: 20vh; } -@media all and (orientation:portrait) { +@media all and (orientation: portrait) { .chapterThumb { height: 30vw; - min-width: 30vw + min-width: 30vw; } } -@media all and (max-height:50em) and (orientation:landscape) { +@media all and (max-height: 50em) and (orientation: landscape) { .chapterThumb { height: 30vh; - min-width: 30vh + min-width: 30vh; } } @@ -72,19 +72,19 @@ bottom: 0; left: 0; right: 0; - background: rgba(0, 0, 0, .7); - padding: .25em .5em; - user-select: none + background: rgba(0, 0, 0, 0.7); + padding: 0.25em 0.5em; + user-select: none; } .chapterThumbText { - padding: .25em 0; + padding: 0.25em 0; margin: 0; - opacity: 1 + opacity: 1; } .chapterThumbText-dim { - opacity: .6 + opacity: 0.6; } .videoOsdBottom { @@ -104,21 +104,21 @@ transition: opacity 0.3s ease-out; color: #fff; user-select: none; - -webkit-touch-callout: none + -webkit-touch-callout: none; } .videoOsdBottom-hidden { - opacity: 0 + opacity: 0; } .osdControls { -webkit-box-flex: 1; -webkit-flex-grow: 1; - flex-grow: 1 + flex-grow: 1; } .videoOsdBottom .buttons { - padding: .25em 0 0; + padding: 0.25em 0 0; display: -webkit-box; display: -webkit-flex; display: flex; @@ -126,14 +126,14 @@ flex-wrap: wrap; -webkit-box-align: center; -webkit-align-items: center; - align-items: center + align-items: center; } .osdVolumeSliderContainer { width: 9em; -webkit-box-flex: 1; -webkit-flex-grow: 1; - flex-grow: 1 + flex-grow: 1; } .osdMediaInfo, @@ -142,14 +142,14 @@ display: -webkit-box; display: -webkit-flex; align-items: center; - -webkit-box-align: center + -webkit-box-align: center; } .volumeButtons { - margin: 0 .5em 0 auto; + margin: 0 0.5em 0 auto; display: flex; -webkit-align-items: center; - align-items: center + align-items: center; } .osdTimeText { @@ -157,13 +157,13 @@ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; - user-select: none + user-select: none; } .osdPoster { width: 10%; position: relative; - margin-right: .5em + margin-right: 0.5em; } .osdPoster img { @@ -172,28 +172,28 @@ width: 100%; -webkit-box-shadow: 0 0 1.9vh #000; box-shadow: 0 0 1.9vh #000; - border: .08em solid #222; + border: 0.08em solid #222; user-drag: none; user-select: none; -moz-user-select: none; -webkit-user-drag: none; -webkit-user-select: none; - -ms-user-select: none + -ms-user-select: none; } .osdTitle, .osdTitleSmall { - margin: 0 1em 0 0 + margin: 0 1em 0 0; } .osdMediaInfo { display: flex; -webkit-align-items: center; - align-items: center + align-items: center; } .osdSecondaryMediaInfo { - padding-left: .6em !important + padding-left: 0.6em !important; } .osdTextContainer { @@ -207,14 +207,14 @@ -moz-user-select: none; -ms-user-select: none; user-select: none; - margin-bottom: .7em; - padding-left: .5em + margin-bottom: 0.7em; + padding-left: 0.5em; } .osdMainTextContainer { -webkit-box-align: baseline; -webkit-align-items: baseline; - align-items: baseline + align-items: baseline; } .osdMediaStatus { @@ -224,63 +224,66 @@ @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); + transform: rotate(360deg); } } @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); + transform: rotate(360deg); } } @keyframes spin { 100% { -webkit-transform: rotate(360deg); - transform:rotate(360deg); + transform: rotate(360deg); } } .osdMediaStatus .animate { - -webkit-animation:spin 4s linear infinite; - -moz-animation:spin 4s linear infinite; - animation:spin 4s linear infinite; + -webkit-animation: spin 4s linear infinite; + -moz-animation: spin 4s linear infinite; + animation: spin 4s linear infinite; } .pageContainer { top: 0; - position: fixed + position: fixed; } -@media all and (max-width:30em) { - +@media all and (max-width: 30em) { .btnFastForward, .btnRewind, .osdMediaInfo, .osdPoster { - display: none !important + display: none !important; } } -@media all and (max-width:33.75em) { +@media all and (max-width: 33.75em) { .videoOsdBottom .paper-icon-button-light { - margin: 0 + margin: 0; } } -@media all and (max-width:43em) { +@media all and (max-width: 43em) { .videoOsdBottom .volumeButtons, .osdMediaStatus span { - display: none !important - } -} -@media all and (max-width:50em) { - .videoOsdBottom .btnFastForward, .videoOsdBottom .btnRewind { - display: none !important + display: none !important; } } -@media all and (max-width:75em) { - .videoOsdBottom .endsAtText { - display: none !important +@media all and (max-width: 50em) { + .videoOsdBottom .btnFastForward, + .videoOsdBottom .btnRewind { + display: none !important; + } +} + +@media all and (max-width: 75em) { + .videoOsdBottom .endsAtText { + display: none !important; } } diff --git a/src/bundle.js b/src/bundle.js index 28626c2a02..9e3bc4f237 100644 --- a/src/bundle.js +++ b/src/bundle.js @@ -96,3 +96,9 @@ var libass_wasm = require("libass-wasm"); _define("JavascriptSubtitlesOctopus", function() { return libass_wasm; }); + +// material-icons +var material_icons = require("material-design-icons-iconfont/dist/material-design-icons.css"); +_define("material-icons", function() { + return material_icons; +}); diff --git a/src/components/accessschedule/accessschedule.template.html b/src/components/accessschedule/accessschedule.template.html index 50d172ae49..a0d05537c4 100644 --- a/src/components/accessschedule/accessschedule.template.html +++ b/src/components/accessschedule/accessschedule.template.html @@ -1,6 +1,6 @@