diff --git a/src/assets/css/dashboard.css b/src/assets/css/dashboard.css index 7c905b2c21..507179af23 100644 --- a/src/assets/css/dashboard.css +++ b/src/assets/css/dashboard.css @@ -49,8 +49,9 @@ progress[aria-valuenow]:before { @media all and (min-width:50em) { - .type-interior>.ui-panel-content-wrap>div[data-role=content], - .type-interior>div[data-role=content] { + .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; @@ -74,6 +75,22 @@ progress[aria-valuenow]:before { 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 .25em !important; + display: inline-block; + padding: .8em 1em; + text-align: center; + text-decoration: none !important; +} + div[data-role=controlgroup] a[data-role=button] { display: inline-block !important; margin: 0 !important; @@ -107,6 +124,24 @@ div[data-role=controlgroup] a.ui-btn-active { 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: .5em; + position: relative; + top: -.3em +} + .header .imageLink { display: inline-block } @@ -167,6 +202,18 @@ div[data-role=controlgroup] a.ui-btn-active { flex-grow: 1 } +.sessionNowPlayingContent { + -webkit-background-size: cover; + background-size: cover; + background-repeat: no-repeat; + background-position: center center; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0 +} + .activeSession:not(.playingSession) .sessionNowPlayingContent { display: none } @@ -213,15 +260,6 @@ div[data-role=controlgroup] a.ui-btn-active { } } -.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; @@ -237,14 +275,6 @@ div[data-role=controlgroup] a.ui-btn-active { max-width: 100% } -.wizardContent h2 img { - height: 2.5em; - vertical-align: middle; - margin-right: .5em; - position: relative; - top: -.3em -} - .scheduledTaskPaperIconItem { outline: 0 !important } @@ -296,18 +326,6 @@ div[data-role=controlgroup] a.ui-btn-active { margin: 0 } -.sessionNowPlayingContent { - -webkit-background-size: cover; - background-size: cover; - background-repeat: no-repeat; - background-position: center center; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0 -} - .sessionNowPlayingInnerContent { position: absolute; top: 0; @@ -340,12 +358,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 +369,13 @@ div[data-role=controlgroup] a.ui-btn-active { white-space: nowrap; } +.playbackProgress, +.transcodingProgress { + margin: 0px; + width: 100%; + background: transparent !important; +} + .activeSession .playbackProgress, .activeSession .transcodingProgress { position: absolute; @@ -367,13 +386,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; @@ -412,26 +424,6 @@ div[data-role=controlgroup] a.ui-btn-active { margin-left: 5px } -.appLinks img { - height: 36px -} - -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 .25em !important; - display: inline-block; - padding: .8em 1em; - text-align: center; - text-decoration: none !important; -} - @-webkit-keyframes rotating { from { -webkit-transform: rotate(0); diff --git a/src/assets/css/librarybrowser.css b/src/assets/css/librarybrowser.css index 6ca85ae941..f6dbed1cbc 100644 --- a/src/assets/css/librarybrowser.css +++ b/src/assets/css/librarybrowser.css @@ -84,6 +84,22 @@ display: none } +.headerLeft, +.headerRight { + justify-content: center; +} + +.headerRight { + display: -webkit-box; + display: -webkit-flex; + display: flex; + -webkit-align-items: center; + align-items: center; + -webkit-box-pack: end; + -webkit-justify-content: flex-end; + justify-content: flex-end +} + .noHeaderRight .headerRight, .noHomeButtonHeader .headerHomeButton { display: none !important @@ -164,17 +180,6 @@ width: 100% } -.headerRight { - display: -webkit-box; - display: -webkit-flex; - display: flex; - -webkit-align-items: center; - align-items: center; - -webkit-box-pack: end; - -webkit-justify-content: flex-end; - justify-content: flex-end -} - .selectedMediaFolder { background-color: #f2f2f2 !important } @@ -358,6 +363,11 @@ margin: 0 0 .25em } +.listTopPaging, +.viewControls { + display: inline-block +} + .viewControls+.listTopPaging { margin-left: .5em !important } @@ -445,15 +455,6 @@ bottom: .75em } -.layout-mobile .detailPagePrimaryContainer { - display: block; - position: relative; -} - -.layout-tv .detailPagePrimaryContainer { - position: relative; -} - .detailPagePrimaryContainer { display: flex; align-items: center; @@ -464,6 +465,15 @@ z-index: 2; } +.layout-mobile .detailPagePrimaryContainer { + display: block; + position: relative; +} + +.layout-tv .detailPagePrimaryContainer { + position: relative; +} + .infoWrapper { flex: 1 0 0; } @@ -483,11 +493,6 @@ padding-right: 2%; } -.layout-mobile .detailImageContainer, -.layout-tv .detailImageContainer { - position: relative; -} - .detailImageContainer { margin: 1.25em 0; position: sticky; @@ -496,6 +501,11 @@ width: 22.786458333333332vw; } +.layout-mobile .detailImageContainer, +.layout-tv .detailImageContainer { + position: relative; +} + .detailPagePrimaryContent { position: relative; -webkit-box-flex: 1; @@ -741,11 +751,6 @@ } } -.listTopPaging, -.viewControls { - display: inline-block -} - @media all and (max-width:50em) { .editorMenuLink { display: none diff --git a/src/components/cardbuilder/card.css b/src/components/cardbuilder/card.css index ede4c79438..00a11a8eb5 100644 --- a/src/components/cardbuilder/card.css +++ b/src/components/cardbuilder/card.css @@ -1,12 +1,12 @@ +button { + -webkit-border-fit: border !important; +} + button::-moz-focus-inner { padding: 0; border: 0; } -button { - -webkit-border-fit: border !important; -} - .card { border: 0; font-size: inherit !important; @@ -87,6 +87,11 @@ button { contain: style; } +.card.show-animation .cardBox { + will-change: transform; + transition: transform 200ms ease-out; +} + .card.show-focus:not(.show-animation) .cardBox { margin: .4em; } @@ -96,11 +101,6 @@ button { border: .5em solid transparent; } -.card.show-animation .cardBox { - will-change: transform; - transition: transform 200ms ease-out; -} - .card.show-animation:focus > .cardBox { transform: scale(1.18, 1.18); } @@ -298,6 +298,23 @@ button { padding-top: .24em; } +.textActionButton { + border: 0 !important; + background: transparent; + padding: 0 !important; + cursor: pointer; + -webkit-tap-highlight-color: rgba(0,0,0,0); + outline: none !important; + color: inherit; + vertical-align: middle; + font-family: inherit; + font-size: inherit; +} + +.textActionButton:hover { + text-decoration: underline; +} + .cardText > .textActionButton { width: 100%; overflow: hidden; @@ -337,23 +354,6 @@ button { text-align: center; } -.textActionButton { - border: 0 !important; - background: transparent; - padding: 0 !important; - cursor: pointer; - -webkit-tap-highlight-color: rgba(0,0,0,0); - outline: none !important; - color: inherit; - vertical-align: middle; - font-family: inherit; - font-size: inherit; -} - -.textActionButton:hover { - text-decoration: underline; -} - .cardImageIcon { font-size: 5em; color: inherit; diff --git a/src/components/guide/guide.css b/src/components/guide/guide.css index ad3f4e7971..c6807a9607 100644 --- a/src/components/guide/guide.css +++ b/src/components/guide/guide.css @@ -123,6 +123,10 @@ width: 2.0833333333333333333333333333333%; } +.programCell, .guide-channelHeaderCell { + outline: none !important; +} + .guide-channelHeaderCell, .guide-channelTimeslotHeader { padding: 0 !important; cursor: pointer; @@ -362,10 +366,6 @@ contain: layout style paint; } -.programCell, .guide-channelHeaderCell { - outline: none !important; -} - .timerIcon, .seriesTimerIcon { color: #cc3333 !important; } diff --git a/src/components/listview/listview.css b/src/components/listview/listview.css index bdd9cd8acf..347d983f96 100644 --- a/src/components/listview/listview.css +++ b/src/components/listview/listview.css @@ -85,6 +85,11 @@ justify-content: center; } +.listItem, .listItemBody, .listItemMediaInfo { + display: flex; + contain: layout style; +} + .layout-tv .listItemBody { padding: .35em .75em; } @@ -241,11 +246,6 @@ align-items: center; } -.listItem, .listItemBody, .listItemMediaInfo { - display: flex; - contain: layout style; -} - .listItem-bottomoverview { font-size: 88%; margin-bottom: 1em; diff --git a/src/components/loading/loading.css b/src/components/loading/loading.css index 6d8472fc15..210746be12 100644 --- a/src/components/loading/loading.css +++ b/src/components/loading/loading.css @@ -345,19 +345,6 @@ } } -.mdl-spinner__circle-clipper { - display: inline-block; - position: relative; - width: 50%; - height: 100%; - overflow: hidden; - border-color: inherit; -} - - .mdl-spinner__circle-clipper .mdl-spinner__circle { - width: 200%; - } - .mdl-spinner__circle { box-sizing: border-box; height: 100%; @@ -375,6 +362,19 @@ left: 0; } +.mdl-spinner__circle-clipper { + display: inline-block; + position: relative; + width: 50%; + height: 100%; + overflow: hidden; + border-color: inherit; +} + + .mdl-spinner__circle-clipper .mdl-spinner__circle { + width: 200%; + } + .mdl-spinner__circleLeft { border-right-color: transparent !important; -webkit-transform: rotate(129deg); diff --git a/src/elements/emby-select/emby-select.css b/src/elements/emby-select/emby-select.css index 76b28c4208..391f131a63 100644 --- a/src/elements/emby-select/emby-select.css +++ b/src/elements/emby-select/emby-select.css @@ -25,6 +25,10 @@ appearance: none; } +.emby-select::-moz-focus-inner { + border: 0; +} + .selectContainer-inline > .emby-select { padding: .3em 1.9em .3em .5em; font-size: inherit; @@ -35,10 +39,6 @@ padding-right: 0; } -.emby-select::-moz-focus-inner { - border: 0; -} - .emby-select-focusscale { transition: transform 180ms ease-out !important; -webkit-transform-origin: center center; diff --git a/src/themes/appletv/theme.css b/src/themes/appletv/theme.css index 806482d5e9..03a1128df3 100644 --- a/src/themes/appletv/theme.css +++ b/src/themes/appletv/theme.css @@ -280,6 +280,11 @@ html { border-color: #fff; } +.emby-checkbox:checked+span+.checkboxOutline, +.itemProgressBarForeground { + background-color: #00a4dc +} + .emby-checkbox:focus:not(:checked)+span+.checkboxOutline { border-color: #00a4dc; } @@ -294,11 +299,6 @@ html { color: #fff } -.emby-checkbox:checked+span+.checkboxOutline, -.itemProgressBarForeground { - background-color: #00a4dc -} - .itemProgressBarForeground-recording { background-color: #CB272A } diff --git a/src/themes/blueradiance/theme.css b/src/themes/blueradiance/theme.css index 6040d9b19f..a4c4531e41 100644 --- a/src/themes/blueradiance/theme.css +++ b/src/themes/blueradiance/theme.css @@ -290,15 +290,15 @@ html { border-color: #fff; } -.emby-checkbox:focus:not(:checked)+span+.checkboxOutline { - border-color: #00a4dc; -} - .emby-checkbox:checked+span+.checkboxOutline, .itemProgressBarForeground { background-color: #00a4dc } +.emby-checkbox:focus:not(:checked)+span+.checkboxOutline { + border-color: #00a4dc; +} + .itemProgressBarForeground-recording { background-color: #CB272A } @@ -437,11 +437,6 @@ html { border-color: #00a4dc !important } -.layout-desktop ::-webkit-scrollbar { - width: 1em; - height: 1em -} - ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3) } @@ -450,6 +445,11 @@ html { background-color: #3b3b3b } +.layout-desktop ::-webkit-scrollbar { + width: 1em; + height: 1em +} + ::-webkit-scrollbar-thumb:horizontal, ::-webkit-scrollbar-thumb:vertical { -webkit-border-radius: 2px; diff --git a/src/themes/dark/theme.css b/src/themes/dark/theme.css index d32b47279c..006aabf852 100644 --- a/src/themes/dark/theme.css +++ b/src/themes/dark/theme.css @@ -264,15 +264,15 @@ html { border-color: #fff; } -.emby-checkbox:focus:not(:checked)+span+.checkboxOutline { - border-color: #00a4dc; -} - .emby-checkbox:checked+span+.checkboxOutline, .itemProgressBarForeground { background-color: #00a4dc } +.emby-checkbox:focus:not(:checked)+span+.checkboxOutline { + border-color: #00a4dc; +} + .itemProgressBarForeground-recording { background-color: #CB272A } @@ -407,11 +407,6 @@ html { border-color: #00a4dc !important } -.layout-desktop ::-webkit-scrollbar { - width: 1em; - height: 1em -} - ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3) } @@ -420,6 +415,11 @@ html { background-color: #3b3b3b } +.layout-desktop ::-webkit-scrollbar { + width: 1em; + height: 1em +} + ::-webkit-scrollbar-thumb:horizontal, ::-webkit-scrollbar-thumb:vertical { -webkit-border-radius: 2px; diff --git a/src/themes/light/theme.css b/src/themes/light/theme.css index 0824134df2..449ddb0912 100644 --- a/src/themes/light/theme.css +++ b/src/themes/light/theme.css @@ -273,6 +273,11 @@ html { border-color: #000; } +.emby-checkbox:checked+span+.checkboxOutline, +.itemProgressBarForeground { + background-color: #00a4dc +} + .emby-checkbox:focus:not(:checked)+span+.checkboxOutline { border-color: #00a4dc; } @@ -287,11 +292,6 @@ html { color: #fff } -.emby-checkbox:checked+span+.checkboxOutline, -.itemProgressBarForeground { - background-color: #00a4dc -} - .itemProgressBarForeground-recording { background-color: #CB272A } diff --git a/src/themes/purplehaze/theme.css b/src/themes/purplehaze/theme.css index 12045f50b2..02c6d844f7 100644 --- a/src/themes/purplehaze/theme.css +++ b/src/themes/purplehaze/theme.css @@ -117,6 +117,20 @@ a[data-role=button] { color: rgb(225, 229, 242) } +#btnResetPassword, +.btnForgotPassword, +.btnCancel, +.button-cancel { + background: rgba(0, 0, 0, .5); + color: rgba(255, 255, 255, .87); +} + +.alphaPickerButton { + color: #999; + color: rgba(255, 255, 255, .5); + background-color: transparent +} + #btnResetPassword:hover, #btnRestart:hover, #btnDeleteImage:hover, @@ -148,14 +162,6 @@ a[data-role=button] { color: rgba(255, 255, 255, .87) } -#btnResetPassword, -.btnForgotPassword, -.btnCancel, -.button-cancel { - background: rgba(0, 0, 0, .5); - color: rgba(255, 255, 255, .87); -} - .itemName { color: #f1f7ee } @@ -289,12 +295,6 @@ a[data-role=button] { color: #48C3C8 } -.alphaPickerButton { - color: #999; - color: rgba(255, 255, 255, .5); - background-color: transparent -} - .alphaPickerButton-selected { color: #0ce8d6 } @@ -379,14 +379,14 @@ a[data-role=button] { color: rgb(12, 232, 214); } -.emby-checkbox:focus:not(:checked)+span+.checkboxOutline { - border:2px solid #ff77f1; -} - .emby-checkbox:focus+span+.checkboxOutline { border-color: #ff77f1; } +.emby-checkbox:focus:not(:checked)+span+.checkboxOutline { + border:2px solid #ff77f1; +} + .itemProgressBarForeground { background-color: rgb(12, 232, 214); } @@ -525,6 +525,11 @@ a[data-role=button] { color: #4285F4 } +.personCard .cardScalable { + border-radius: 50%; + border: 1px solid rgb(255, 255, 255); +} + .card:focus .cardBox.visualCardBox, .card:focus .cardBox:not(.visualCardBox) .cardScalable { border-color: #ff77f1 !important @@ -536,11 +541,6 @@ a[data-role=button] { scrollbar-color: #888 rgba(59, 59, 59, 0.5) } -.layout-desktop ::-webkit-scrollbar { - width: .4em; - height: 1em -} - ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3) } @@ -549,6 +549,11 @@ a[data-role=button] { background-color: rgba(59, 59, 59, 0.5) } +.layout-desktop ::-webkit-scrollbar { + width: .4em; + height: 1em +} + ::-webkit-scrollbar-thumb:horizontal, ::-webkit-scrollbar-thumb:vertical { -webkit-border-radius: 2px; @@ -573,11 +578,6 @@ a[data-role=button] { width: 40vw; } -.personCard .cardScalable { - border-radius: 50%; - border: 1px solid rgb(255, 255, 255); -} - .personCard .cardPadder-overflowPortrait, .personCard .cardPadder-portrait { padding-bottom: 100%; diff --git a/src/themes/wmc/theme.css b/src/themes/wmc/theme.css index d0691877b5..6fd3ed001f 100644 --- a/src/themes/wmc/theme.css +++ b/src/themes/wmc/theme.css @@ -263,6 +263,11 @@ html { border-color: #fff; } +.emby-checkbox:checked+span+.checkboxOutline, +.itemProgressBarForeground { + background-color: #00a4dc +} + .emby-checkbox:focus:not(:checked)+span+.checkboxOutline { border-color: #00a4dc; } @@ -277,11 +282,6 @@ html { color: #fff } -.emby-checkbox:checked+span+.checkboxOutline, -.itemProgressBarForeground { - background-color: #00a4dc -} - .itemProgressBarForeground-recording { background-color: #CB272A } @@ -421,11 +421,6 @@ html { border-color: #fff !important } -.layout-desktop ::-webkit-scrollbar { - width: 1em; - height: 1em -} - ::-webkit-scrollbar-track { box-shadow: inset 0 0 6px rgba(0, 0, 0, .3) -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3) @@ -435,6 +430,11 @@ html { background-color: #081B3B } +.layout-desktop ::-webkit-scrollbar { + width: 1em; + height: 1em +} + ::-webkit-scrollbar-thumb:horizontal, ::-webkit-scrollbar-thumb:vertical { border-radius: 2px;