diff --git a/Theme/ElegantFin-theme-nightly.css b/Theme/ElegantFin-theme-nightly.css index f5d3672..096a55a 100644 --- a/Theme/ElegantFin-theme-nightly.css +++ b/Theme/ElegantFin-theme-nightly.css @@ -5,7 +5,7 @@ /* @import url("https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/assets/add-ons/custom-media-covers-latest-min.css"); */ /* Inter Font Family */ -@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap'); +@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"); :root { --elegantFinFooterText: "ElegantFin Nightly"; @@ -13,23 +13,23 @@ /* Base theme colors */ color-scheme: dark; --darkerGradientPoint: #111827; - --darkerGradientPointAlpha: rgba(17, 24, 39, .85); + --darkerGradientPointAlpha: rgba(17, 24, 39, 0.85); --lighterGradientPoint: #1d2635; - --lighterGradientPointAlpha: rgba(29, 38, 53, .85); - --headerColor: rgba(30, 40, 54, .8); - --drawerColor: rgba(30, 40, 54, .9); + --lighterGradientPointAlpha: rgba(29, 38, 53, 0.85); + --headerColor: rgba(30, 40, 54, 0.8); + --drawerColor: rgba(30, 40, 54, 0.9); --borderColor: hsl(214, 13%, 32%); --darkerBorderColor: hsl(214, 13%, 22%); - --lighterBorderColor: hsla(0, 0%, 100%, .2); + --lighterBorderColor: hsla(0, 0%, 100%, 0.2); --selectorBackgroundColor: rgb(55, 65, 81); - --selectorBackgroundColorAlpha: rgba(55, 65, 81, .5); + --selectorBackgroundColorAlpha: rgba(55, 65, 81, 0.5); - --activeColorAlpha: rgba(119, 91, 244, .9); + --activeColorAlpha: rgba(119, 91, 244, 0.9); --activeColor: rgb(119, 91, 244); --osdSeekBarPlayedColor: var(--textColor); - --osdSeekBarBufferedColorAlpha: rgba(128, 128, 128, .5); + --osdSeekBarBufferedColorAlpha: rgba(128, 128, 128, 0.5); --osdSeekBarThumbColor: white; --tableBodyColor: rgb(31 41 55 / 1); --uiAccentColor: rgb(117 111 226); @@ -54,27 +54,39 @@ /* textures */ --backgroundGradient: linear-gradient(0deg, var(--darkerGradientPoint) 35%, var(--lighterGradientPoint)); --cardBackgroundGradient: linear-gradient(0deg, var(--darkerGradientPoint), 25%, var(--lighterGradientPoint)); - --headerColorGradient: linear-gradient(180deg, rgba(30, 40, 54, .95) 30%, 55%, transparent 90%); + --headerColorGradient: linear-gradient(180deg, rgba(30, 40, 54, 0.95) 30%, 55%, transparent 90%); --headerColorGradientAlt: linear-gradient(180deg, rgba(30, 40, 54, 1), 70%, transparent); --headerBlurMask: linear-gradient(180deg, white 50%, 85%, transparent); --cardFooterGradient: linear-gradient(0deg, rgb(0 0 0 / 90%), 40%, transparent); - --topOSDGradient: linear-gradient(180deg, hsla(0, 0%, 0%, .8), 45%, hsla(0, 0%, 0%, 0)); - --bottomOSDGradient: linear-gradient(0deg, hsla(0, 0%, 0%, .8), 45%, hsla(0, 0%, 0%, 0)); + --topOSDGradient: linear-gradient(180deg, hsla(0, 0%, 0%, 0.8), 45%, hsla(0, 0%, 0%, 0)); + --bottomOSDGradient: linear-gradient(0deg, hsla(0, 0%, 0%, 0.8), 45%, hsla(0, 0%, 0%, 0)); - --hoverGradientV: linear-gradient(0deg, transparent, rgb(255 255 255 / 100%) 45%, rgb(255 255 255 / 100%) 55%, transparent); - --hoverGradientH: linear-gradient(90deg, transparent, rgb(255 255 255 / 100%) 45%, rgb(255 255 255 / 100%) 55%, transparent); + --hoverGradientV: linear-gradient( + 0deg, + transparent, + rgb(255 255 255 / 100%) 45%, + rgb(255 255 255 / 100%) 55%, + transparent + ); + --hoverGradientH: linear-gradient( + 90deg, + transparent, + rgb(255 255 255 / 100%) 45%, + rgb(255 255 255 / 100%) 55%, + transparent + ); - --itemBackdropMask: linear-gradient(180deg, rgba(0, 0, 0, .8), 75%, transparent); + --itemBackdropMask: linear-gradient(180deg, rgba(0, 0, 0, 0.8), 75%, transparent); /* --themeVideoPlayerMask: linear-gradient(180deg, rgba(0, 0, 0, 1), 85%, transparent); */ /* standard component sizes */ --largerRadius: 1.25em; --largeRadius: 1em; - --smallRadius: .5em; - --smallerRadius: .375em; - --borderWidth: .06em; - --borderWidthDouble: .12em; + --smallRadius: 0.5em; + --smallerRadius: 0.375em; + --borderWidth: 0.06em; + --borderWidthDouble: 0.12em; --sidePadding: 3.3%; --itemColumnGap: 1em; @@ -86,7 +98,7 @@ --blurLarge: blur(10px); --blurLargest: blur(20px); - --shadow: .1em .1em .15em hsla(0, 0%, 0%, .3); + --shadow: 0.1em 0.1em 0.15em hsla(0, 0%, 0%, 0.3); /* use "" to enable a fancy blur behind the app header / top bar [default]; use none (without quotes) to disable it */ @@ -107,7 +119,7 @@ /* use 'Material Icons Round' for the new icons [default]; use 'Material Icons' to revert to old icons */ - --iconPack: 'Material Icons Round', Material Icons; + --iconPack: "Material Icons Round", Material Icons; /* none: hides the watched and mark favorite buttons on hover [default]; block: makes them visible use block */ @@ -164,11 +176,12 @@ html { /* Material Icons Round */ /* https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200 */ @font-face { - font-family: 'Material Icons Round'; + font-family: "Material Icons Round"; font-style: normal; font-weight: 100 700; font-display: swap; - src: url(https://fonts.gstatic.com/s/materialsymbolsrounded/v267/sykg-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190Fjzag.woff2) format('woff2'); + src: url(https://fonts.gstatic.com/s/materialsymbolsrounded/v267/sykg-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190Fjzag.woff2) + format("woff2"); } .material-icons { @@ -187,12 +200,8 @@ html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; - font-feature-settings: 'liga'; - font-variation-settings: - 'FILL' 1, - 'wght' 400, - 'GRAD' 0, - 'opsz' 48; + font-feature-settings: "liga"; + font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 48; } .material-icons.info_outline:before { @@ -204,10 +213,10 @@ html { transition: transform 50ms; } -#myPreferencesMenuPage>div:after, +#myPreferencesMenuPage > div:after, .dashboardFooter::after { content: var(--elegantFinFooterText); - font-size: .8em; + font-size: 0.8em; color: var(--borderColor); display: inline-grid; width: 100%; @@ -234,8 +243,8 @@ html { } .mdl-radio__focus-circle, -.mdl-radio.show-focus .mdl-radio__button:focus+.mdl-radio__circles .mdl-radio__outer-circle, -.mdl-radio.show-focus .mdl-radio__button:focus+.mdl-radio__circles .mdl-radio__inner-circle { +.mdl-radio.show-focus .mdl-radio__button:focus + .mdl-radio__circles .mdl-radio__outer-circle, +.mdl-radio.show-focus .mdl-radio__button:focus + .mdl-radio__circles .mdl-radio__inner-circle { background: var(--uiAccentColor); color: var(--uiAccentColor); } @@ -251,18 +260,18 @@ html { outline: none !important; } -[dir=ltr] .itemsContainer>.card>.cardBox { +[dir="ltr"] .itemsContainer > .card > .cardBox { margin-left: auto; margin-right: auto; } .cardBox-bottompadded { - margin-bottom: .5em !important; + margin-bottom: 0.5em !important; } @media (max-width: 50em) { .cardBox-bottompadded { - margin-bottom: .25em !important; + margin-bottom: 0.25em !important; } } @@ -281,12 +290,11 @@ html { border-radius: var(--largeRadius); border: var(--darkerBorderColor) solid var(--borderWidthDouble) !important; overflow: hidden !important; - box-shadow: 0 0 .25em 0 rgba(0, 0, 0, .4); + box-shadow: 0 0 0.25em 0 rgba(0, 0, 0, 0.4); transition: transform 125ms; } @supports (aspect-ratio: 1 / 1) { - #castCollapsible .cardScalable, #guestCastContent .cardScalable { aspect-ratio: 1 / 1; @@ -323,21 +331,21 @@ html { } .cardImageContainer { - transition: transform .375s; + transition: transform 0.375s; } .card.squareCard[data-type="TvChannel"] .cardImageContainer.cardContent { - background-color: rgba(255, 255, 255, .2); + background-color: rgba(255, 255, 255, 0.2); } -.cardImageContainer>.cardDefaultText { +.cardImageContainer > .cardDefaultText { font-size: 2em; padding-top: 1.5em; color: transparent; white-space: pre; } -.cardImageContainer>.cardDefaultText::before { +.cardImageContainer > .cardDefaultText::before { content: "?\A"; color: var(--borderColor); } @@ -356,7 +364,7 @@ html { } .card-hoverable .itemSelectionPanel { - transition: transform .125s; + transition: transform 0.125s; } .card-hoverable:hover .cardScalable, @@ -365,22 +373,22 @@ html { } .card-hoverable .cardScalable:active { - transition: transform .075s; + transition: transform 0.075s; transform: scale(1); } -.cardScalable:has(.cardOverlayButton-hover:hover)>.cardImageContainer { +.cardScalable:has(.cardOverlayButton-hover:hover) > .cardImageContainer { transform: scale(1); } .cardOverlayContainer { - transition: .5s; - background: rgba(255, 255, 255, .05); + transition: 0.5s; + background: rgba(255, 255, 255, 0.05); } .card-hoverable .cardOverlayContainer:after { content: var(--cardHoverEffect); - transition: .5s; + transition: 0.5s; position: absolute; top: 0; bottom: 0; @@ -411,7 +419,7 @@ html { background-color: var(--lighterGradientPoint); } -.cardOverlayContainer>.cardOverlayFab-primary { +.cardOverlayContainer > .cardOverlayFab-primary { left: unset; margin-left: unset; margin-top: unset; @@ -420,9 +428,9 @@ html { bottom: calc(var(--overlayPlayButtonPosition) - 1.5em); } -.cardOverlayContainer>.cardOverlayFab-primary, +.cardOverlayContainer > .cardOverlayFab-primary, .listItemImageButton, -.layout-mobile .cardOverlayButton-br:not([data-action="menu"])>.cardOverlayButtonIcon { +.layout-mobile .cardOverlayButton-br:not([data-action="menu"]) > .cardOverlayButtonIcon { background-color: var(--btnMiniPlayColor) !important; color: white; border: var(--defaultLighterBorder); @@ -432,7 +440,7 @@ html { z-index: 2; } -.cardOverlayContainer>.cardOverlayFab-primary:hover, +.cardOverlayContainer > .cardOverlayFab-primary:hover, .listItemImageButton:hover { color: white; } @@ -443,9 +451,9 @@ html { } .layout-desktop .cardOverlayButton-br, -[dir=ltr].layout-desktop .cardOverlayButton-br { - bottom: .75em; - right: .5em; +[dir="ltr"].layout-desktop .cardOverlayButton-br { + bottom: 0.75em; + right: 0.5em; display: var(--extraCardButtonsVisibility); z-index: 1; } @@ -461,9 +469,9 @@ html { } .layout-mobile .cardOverlayButton-br, -[dir=ltr] .layout-mobile .cardOverlayButton-br { - bottom: .25em; - right: .25em; +[dir="ltr"] .layout-mobile .cardOverlayButton-br { + bottom: 0.25em; + right: 0.25em; display: var(--miniOverlayButtonVisibility); } @@ -472,11 +480,11 @@ html { display: none; } -.layout-mobile .cardOverlayButton-br[data-action="menu"]>.cardOverlayButtonIcon { +.layout-mobile .cardOverlayButton-br[data-action="menu"] > .cardOverlayButtonIcon { background-color: transparent !important; color: white; border: none; - text-shadow: 1px 1px .1em black; + text-shadow: 1px 1px 0.1em black; color: white; } @@ -509,7 +517,6 @@ html { /* if the window width is equal to or more than (at minimum) 300em then the code in the query will trigger */ /* 16 posters, 12 thumbs */ @media (min-width: 300em) { - .portraitCard, .squareCard { --cardCount: 16; @@ -536,7 +543,6 @@ html { /* if the window width is equal to or less than (at maximum) 300em then the code in the query will trigger */ /* 15 posters, 11 thumbs */ @media (max-width: 300em) { - .portraitCard, .squareCard { --cardCount: 15; @@ -562,7 +568,6 @@ html { /* 14 posters, 10 thumbs */ @media (max-width: 270em) { - .portraitCard, .squareCard { --cardCount: 14; @@ -588,7 +593,6 @@ html { /* 13 posters, 10 thumbs */ @media (max-width: 240em) { - .portraitCard, .squareCard { --cardCount: 13; @@ -614,7 +618,6 @@ html { /* 12 posters, 9 thumbs, 4K*/ @media (max-width: 220em) { - .portraitCard, .squareCard { --cardCount: 12; @@ -640,7 +643,6 @@ html { /* 11 posters, 9 thumbs */ @media (max-width: 200em) { - .portraitCard, .squareCard { --cardCount: 11; @@ -666,7 +668,6 @@ html { /* 10 posters, 8 thumbs */ @media (max-width: 170em) { - .portraitCard, .squareCard { --cardCount: 10; @@ -692,7 +693,6 @@ html { /* 9 posters, 7 thumbs */ @media (max-width: 140em) { - .portraitCard, .squareCard { --cardCount: 9; @@ -718,7 +718,6 @@ html { /* 8 posters, 7 thumbs, 1080p */ @media (max-width: 120em) { - .portraitCard, .squareCard { --cardCount: 8; @@ -756,7 +755,6 @@ html { /* 7 posters, 6 thumbs */ @media (max-width: 100em) { - .portraitCard, .squareCard, .overflowPortraitCard, @@ -779,7 +777,6 @@ html { /* 6 posters, 5 thumbs */ @media (max-width: 80em) { - .portraitCard, .squareCard, .overflowPortraitCard, @@ -799,7 +796,6 @@ html { /* 5 posters, 4 thumbs */ @media (max-width: 62em) { - .portraitCard, .squareCard, .overflowPortraitCard, @@ -819,7 +815,6 @@ html { /* 4 posters, 3 thumbs */ @media (max-width: 48.125em) { - .portraitCard, .squareCard, .overflowPortraitCard, @@ -839,7 +834,6 @@ html { /* 3 posters, 2 thumbs, 2 with footer */ @media (max-width: 30em) { - .portraitCard, .squareCard, .overflowPortraitCard, @@ -869,8 +863,8 @@ html { --effectiveWidth: calc((99vw - (var(--sidePadding) * 2))); --cardWidth: calc(var(--effectiveWidth) / var(--cardCount) - var(--itemColumnGap)); width: var(--cardWidth) !important; - padding: .375em; - transition: width .5s; + padding: 0.375em; + transition: width 0.5s; box-sizing: content-box; } @@ -956,12 +950,12 @@ html { } /* this places main media buttons below the title on 10.11.0 */ -.layout-desktop [dir=ltr] .detailRibbon, -.layout-tv [dir=ltr] .detailRibbon { +.layout-desktop [dir="ltr"] .detailRibbon, +.layout-tv [dir="ltr"] .detailRibbon { flex-direction: column; } -.detailPagePrimaryContainer>.detailPagePrimaryContent { +.detailPagePrimaryContainer > .detailPagePrimaryContent { padding-top: 0; } @@ -991,13 +985,13 @@ html { overflow: hidden; } -.paper-icon-button-light>.material-icons { +.paper-icon-button-light > .material-icons { font-size: 1.25em; } -.verticalSection.emby-scroller-container>h2.sectionTitle.sectionTitle-cards { +.verticalSection.emby-scroller-container > h2.sectionTitle.sectionTitle-cards { padding-top: 1.25em !important; - margin: 0 0 -.5em 0; + margin: 0 0 -0.5em 0; } #itemDetailPage .emby-scroller-container, @@ -1005,7 +999,7 @@ html { #itemDetailPage .scrollX { margin: 0 calc(-1 * var(--sidePadding)); padding: 0 var(--sidePadding); - padding-left: calc(var(--sidePadding) - .375em); + padding-left: calc(var(--sidePadding) - 0.375em); } .layout-desktop .emby-scroller-container, @@ -1016,7 +1010,7 @@ html { .emby-scroller, .hiddenScrollX.scrollX { - padding-left: calc(var(--sidePadding) - .375em); + padding-left: calc(var(--sidePadding) - 0.375em); } .itemsContainer:not(.editorsChoiceItemsContainer) { @@ -1030,24 +1024,24 @@ html { .sectionTitleContainer-cards { padding-top: 0; - margin: .75em 0 -.75em 0; + margin: 0.75em 0 -0.75em 0; } -.layout-mobile :not(.sectionTitleContainer-cards)>.sectionTitle-cards { +.layout-mobile :not(.sectionTitleContainer-cards) > .sectionTitle-cards { text-align: left; - margin: .75em 0 -.75em 0; + margin: 0.75em 0 -0.75em 0; } .emby-scrollbuttons, -[dir=ltr] .emby-scrollbuttons { +[dir="ltr"] .emby-scrollbuttons { padding-top: 1.25em; } -.sectionTitleContainer+.emby-scrollbuttons { +.sectionTitleContainer + .emby-scrollbuttons { padding-top: 0; } -.emby-scrollbuttons-button.paper-icon-button-light>.material-icons { +.emby-scrollbuttons-button.paper-icon-button-light > .material-icons { font-size: 1.5em; place-content: center; } @@ -1064,15 +1058,15 @@ html { } .itemMiscInfo-primary { - column-gap: .5em; + column-gap: 0.5em; } .mediaInfoOfficialRating { background: transparent !important; - font-size: .75em; - font-family: 'Noto Sans', sans-serif; + font-size: 0.75em; + font-family: "Noto Sans", sans-serif; line-height: 1.5em; - transform: translateY(-.15em); + transform: translateY(-0.15em); font-weight: 600; border: var(--defaultBorder); } @@ -1081,16 +1075,16 @@ html { background: linear-gradient(to right, #90cea1, #01b4e4); -webkit-background-clip: text; -webkit-text-fill-color: transparent; - margin-left: -.125em; - transform: translateY(-.02em); + margin-left: -0.125em; + transform: translateY(-0.02em); } -[dir=ltr] .mediaInfoCriticRating { +[dir="ltr"] .mediaInfoCriticRating { background-size: 30%; padding-left: 1.5em; } -[dir=ltr] .mediaInfoCriticRating::after { +[dir="ltr"] .mediaInfoCriticRating::after { content: "%"; } @@ -1126,7 +1120,7 @@ html { to { transform: translateY(0); - opacity: .3; + opacity: 0.3; } } @@ -1197,7 +1191,7 @@ html { top: -30%; -webkit-mask: var(--itemBackdropMask); mask: var(--itemBackdropMask); - animation: animMoveDown .5s ease-out forwards; + animation: animMoveDown 0.5s ease-out forwards; height: 45vh; } @@ -1268,12 +1262,12 @@ html { } .layout-mobile .detailImageContainer .card { - -webkit-filter: drop-shadow(0 0 .25rem rgba(0, 0, 0, .25)); - filter: drop-shadow(0 0 .25rem rgba(0, 0, 0, .25)); + -webkit-filter: drop-shadow(0 0 0.25rem rgba(0, 0, 0, 0.25)); + filter: drop-shadow(0 0 0.25rem rgba(0, 0, 0, 0.25)); } /* this brings the buttons and title to the center in main media page */ -.layout-mobile [dir=ltr] .infoWrapper, +.layout-mobile [dir="ltr"] .infoWrapper, .layout-mobile .infoWrapper { padding-left: 0; } @@ -1306,7 +1300,7 @@ html { .layout-mobile .detailPageWrapperContainer { padding-top: 0; - margin-top: .5em; + margin-top: 0.5em; } /* this hides the media card when detail logo is visible */ @@ -1319,18 +1313,18 @@ html { } /* this hides the main media title when the clear logo is available*/ -.detailLogo:not(.hide)~.detailPageWrapperContainer .nameContainer h1 { +.detailLogo:not(.hide) ~ .detailPageWrapperContainer .nameContainer h1 { z-index: 2; display: var(--itemTitleVisibility); } /* this shows the main media title and the poster when the clear logo is unavailable*/ -.detailLogo.hide~.detailPageWrapperContainer .nameContainer h1 { +.detailLogo.hide ~ .detailPageWrapperContainer .nameContainer h1 { display: block !important; } -.detailImageContainer:has(.backdropCard, .squareCard)~.nameContainer h1, -.detailImageContainer:has(.cardImageIcon.person)~.nameContainer h1 { +.detailImageContainer:has(.backdropCard, .squareCard) ~ .nameContainer h1, +.detailImageContainer:has(.cardImageIcon.person) ~ .nameContainer h1 { display: block !important; } @@ -1346,7 +1340,7 @@ html { .programGuideSection { border: var(--defaultBorder); border-radius: var(--largeRadius); - padding: .5em; + padding: 0.5em; background-color: var(--lighterGradientPointAlpha); } @@ -1359,7 +1353,8 @@ html { } /* This reduces the top padding in the cast, live tv, episode, song, album and artist pages i.e. shifts up page content */ -#itemDetailPage:has(.detailImageContainer .cardImageIcon.person, .detailImageContainer .cardImageIcon.book) .itemBackdrop, +#itemDetailPage:has(.detailImageContainer .cardImageIcon.person, .detailImageContainer .cardImageIcon.book) + .itemBackdrop, #itemDetailPage:has(.detailImageContainer .cardImageIcon.album) .itemBackdrop, #itemDetailPage:has(.detailImageContainer .backdropCard .cardImageIcon.tv) .itemBackdrop, #itemDetailPage:has(.detailImageContainer .squareCard) .itemBackdrop, @@ -1369,12 +1364,12 @@ html { #itemDetailPage:has(.detailImageContainer .card.backdropCard), #itemDetailPage:has(.detailImageContainer .card .cardImageIcon.album) { - background: linear-gradient(180deg, var(--darkerGradientPointAlpha) 80%, transparent) + background: linear-gradient(180deg, var(--darkerGradientPointAlpha) 80%, transparent); } .layout-mobile #itemDetailPage:has(.detailImageContainer .card.backdropCard) .itemBackdrop, .layout-mobile #itemDetailPage:has(.detailImageContainer .card .cardImageIcon.album) .itemBackdrop { - animation: animMoveDownSecondaryPage .5s ease-out forwards; + animation: animMoveDownSecondaryPage 0.5s ease-out forwards; } .layout-mobile .cardImageIcon { @@ -1388,14 +1383,13 @@ html { } .homeLibraryButton { - padding-inline-start: .25em; + padding-inline-start: 0.25em; min-width: 15%; } @media (orientation: portrait) and (max-width: 40em) { - - [data-type=Movie] .listItemImage, - [data-type=Series] .listItemImage { + [data-type="Movie"] .listItemImage, + [data-type="Series"] .listItemImage { display: unset; } @@ -1405,7 +1399,6 @@ html { } @media (orientation: portrait) { - /* hides sync button on home screen on phones only in portrait mode */ .layout-mobile .skinHeader.noHomeButtonHeader .headerSyncButton { display: none; @@ -1467,7 +1460,7 @@ html, } .layout-desktop .backdropImage:after { - transition: opacity .25s; + transition: opacity 0.25s; } .backdropImage:before { @@ -1476,16 +1469,16 @@ html, } .backgroundContainer.withBackdrop { - opacity: .9; - background: linear-gradient(0deg, var(--darkerGradientPoint), 45%, rgba(17, 24, 39, .25)); + opacity: 0.9; + background: linear-gradient(0deg, var(--darkerGradientPoint), 45%, rgba(17, 24, 39, 0.25)); } .layout-tv .backgroundContainer.withBackdrop { - background: linear-gradient(0deg, var(--darkerGradientPoint), 45%, rgba(17, 24, 39, .95)); + background: linear-gradient(0deg, var(--darkerGradientPoint), 45%, rgba(17, 24, 39, 0.95)); } .layout-mobile .withSectionTabs .backgroundContainer.withBackdrop { - opacity: .9; + opacity: 0.9; } .layout-mobile .backgroundContainer.withBackdrop { @@ -1519,7 +1512,7 @@ html, .backdropImageFadeIn { transform-origin: bottom center; - animation: animScaleUp .5s ease-out forwards; + animation: animScaleUp 0.5s ease-out forwards; } .appfooter { @@ -1537,18 +1530,18 @@ html, text-align: center; align-self: center; font-weight: 600; - transition: transform .125s; + transition: transform 0.125s; } .pastLyric, .futureLyric { - transform: scale(.85); + transform: scale(0.85); font-weight: 400; text-align: center; } .pastLyric { - opacity: .45; + opacity: 0.45; } .buttonActive { @@ -1573,7 +1566,7 @@ html, .itemProgressBar:not(.backgroundProgress):not(.playbackProgress):not(.transcodingProgress) { backdrop-filter: var(--blurLarge); background-color: var(--osdSeekBarBufferedColorAlpha) !important; - height: .35em; + height: 0.35em; overflow: hidden; border-radius: var(--largeRadius); } @@ -1593,12 +1586,12 @@ html, background-color: var(--dimTextColor); } -.backgroundProgress>div, +.backgroundProgress > div, .backgroundProgress { background-color: var(--darkerGradientPoint); } -.playbackProgress>div { +.playbackProgress > div { background-color: var(--uiAccentColor); } @@ -1620,14 +1613,14 @@ progress, overflow: hidden; } -progress+span { +progress + span { color: var(--uiAccentColor) !important; } .mdl-spinner__circle { border-color: var(--textColor); border-style: inset; - border-width: .25em; + border-width: 0.25em; } .mdl-slider-container { @@ -1645,15 +1638,15 @@ progress+span { /* this is the osd player slider */ .mdl-slider-background-flex { border-radius: var(--smallRadius); - height: .4em; - margin-top: -.2em; + height: 0.4em; + margin-top: -0.2em; background: var(--osdSeekBarBufferedColorAlpha); - transition: .2s linear; + transition: 0.2s linear; } .sliderContainer:active .mdl-slider-background-flex { - height: .6em; - margin-top: -.3em; + height: 0.6em; + margin-top: -0.3em; } .mdl-slider-background-lower { @@ -1667,22 +1660,22 @@ progress+span { .mdl-slider::-webkit-slider-thumb { background: var(--osdSeekBarThumbColor); width: 4px !important; - height: .4em !important; + height: 0.4em !important; border-radius: 0em; } .sliderContainer:hover .mdl-slider::-webkit-slider-thumb { - width: .2em !important; - height: .8em !important; - border-radius: .2em; + width: 0.2em !important; + height: 0.8em !important; + border-radius: 0.2em; transform: scale(1); } .sliderContainer:active .mdl-slider::-webkit-slider-thumb, .mdl-slider.show-focus:focus::-webkit-slider-thumb { - width: .2em !important; - height: .8em !important; - border-radius: .2em; + width: 0.2em !important; + height: 0.8em !important; + border-radius: 0.2em; transform: scale(1) scaleY(1.25); } @@ -1691,7 +1684,7 @@ progress+span { } .sliderMarkerContainer { - margin: 0 .1em; + margin: 0 0.1em; } .sliderMarker.watched { @@ -1738,7 +1731,7 @@ progress+span { .btnHeaderSave.button-flat { color: var(--uiAccentColor) !important; - gap: .3em; + gap: 0.3em; border-radius: var(--smallRadius); } @@ -1748,7 +1741,7 @@ progress+span { .button-flat:active { color: unset; - background-color: rgba(255, 255, 255, .2); + background-color: rgba(255, 255, 255, 0.2); } .playstatebutton-icon-played { @@ -1780,62 +1773,62 @@ progress+span { color: transparent; } -.itemExternalLinks.focuscontainer-x>.button-link { +.itemExternalLinks.focuscontainer-x > .button-link { color: var(--textColor); background-color: var(--selectorBackgroundColor); - padding: .125em .5em; + padding: 0.125em 0.5em; border-radius: var(--smallerRadius); - margin-bottom: .5em; + margin-bottom: 0.5em; } -.layout-mobile .itemExternalLinks.focuscontainer-x>.button-link:hover:not(:active) { +.layout-mobile .itemExternalLinks.focuscontainer-x > .button-link:hover:not(:active) { color: var(--textColor) !important; } -.layout-desktop .itemExternalLinks.focuscontainer-x>a:hover, -.itemExternalLinks.focuscontainer-x>a:active { +.layout-desktop .itemExternalLinks.focuscontainer-x > a:hover, +.itemExternalLinks.focuscontainer-x > a:active { background-color: var(--activeColor) !important; color: white !important; } -.layout-desktop .itemExternalLinks.focuscontainer-x>a[href*="themoviedb.org"]:hover, -.itemExternalLinks.focuscontainer-x>a[href*="themoviedb.org"]:active { +.layout-desktop .itemExternalLinks.focuscontainer-x > a[href*="themoviedb.org"]:hover, +.itemExternalLinks.focuscontainer-x > a[href*="themoviedb.org"]:active { background-color: rgb(26, 183, 216) !important; color: black !important; } -.layout-desktop .itemExternalLinks.focuscontainer-x>a[href*="imdb.com"]:hover, -.itemExternalLinks.focuscontainer-x>a[href*="imdb.com"]:active { +.layout-desktop .itemExternalLinks.focuscontainer-x > a[href*="imdb.com"]:hover, +.itemExternalLinks.focuscontainer-x > a[href*="imdb.com"]:active { background-color: rgb(226, 182, 22) !important; color: black !important; } -.layout-desktop .itemExternalLinks.focuscontainer-x>a[href*="thetvdb.com"]:hover, -.itemExternalLinks.focuscontainer-x>a[href*="thetvdb.com"]:active { +.layout-desktop .itemExternalLinks.focuscontainer-x > a[href*="thetvdb.com"]:hover, +.itemExternalLinks.focuscontainer-x > a[href*="thetvdb.com"]:active { background-color: rgb(108, 213, 145) !important; color: black !important; } -.layout-desktop .itemExternalLinks.focuscontainer-x>a[href*="trakt.tv"]:hover, -.itemExternalLinks.focuscontainer-x>a[href*="trakt.tv"]:active { +.layout-desktop .itemExternalLinks.focuscontainer-x > a[href*="trakt.tv"]:hover, +.itemExternalLinks.focuscontainer-x > a[href*="trakt.tv"]:active { background-color: rgb(171, 58, 173) !important; color: var(--textColor) !important; } -.layout-desktop .itemExternalLinks.focuscontainer-x>a[href*="theaudiodb.com"]:hover, -.itemExternalLinks.focuscontainer-x>a[href*="theaudiodb.com"]:active { +.layout-desktop .itemExternalLinks.focuscontainer-x > a[href*="theaudiodb.com"]:hover, +.itemExternalLinks.focuscontainer-x > a[href*="theaudiodb.com"]:active { background-color: rgb(99, 153, 204) !important; color: rgb(15, 22, 28) !important; } -.layout-desktop .itemExternalLinks.focuscontainer-x>a[href*="musicbrainz.org"]:hover, -.itemExternalLinks.focuscontainer-x>a[href*="musicbrainz.org"]:active { +.layout-desktop .itemExternalLinks.focuscontainer-x > a[href*="musicbrainz.org"]:hover, +.itemExternalLinks.focuscontainer-x > a[href*="musicbrainz.org"]:active { background-color: rgb(186, 71, 143) !important; color: var(--textColor) !important; } .itemTags, -.itemTags>a { +.itemTags > a { display: none; font-size: unset !important; font-weight: 200; @@ -1849,8 +1842,8 @@ progress+span { } .detail-clamp-text p { - margin-top: .25em; - margin-bottom: .25em; + margin-top: 0.25em; + margin-bottom: 0.25em; } .layout-desktop .detail-clamp-text { @@ -1875,22 +1868,22 @@ progress+span { .overview-expand.emby-button:after { content: "\e313"; - font-family: 'Material Icons'; + font-family: "Material Icons"; background: var(--selectorBackgroundColor); border-radius: 50%; width: 1.5em; height: 1.5em; align-content: center; line-height: 1.6ch; - transition: transform .5s; + transition: transform 0.5s; color: var(--textColor); } -.overview.detail-clamp-text~.overview-controls .overview-expand:after { +.overview.detail-clamp-text ~ .overview-controls .overview-expand:after { transform: rotateZ(0deg); } -.overview:not(.detail-clamp-text)~.overview-controls .overview-expand:after { +.overview:not(.detail-clamp-text) ~ .overview-controls .overview-expand:after { transform: rotateZ(180deg); } @@ -1903,7 +1896,7 @@ progress+span { } #seriesAirTime { - margin-top: .5em; + margin-top: 0.5em; } .itemMiscInfo { @@ -1914,7 +1907,7 @@ progress+span { .innerCardFooter, .chapterThumbTextContainer { background: var(--cardFooterGradient); - text-shadow: .1em .1em 0px black; + text-shadow: 0.1em 0.1em 0px black; width: 100%; height: 100%; width: -webkit-fill-available; @@ -1928,7 +1921,7 @@ progress+span { background-size: 135%; } -.chapterCardImageContainer+.innerCardFooter { +.chapterCardImageContainer + .innerCardFooter { padding: 0em 1em 1em 1em; height: auto; } @@ -1937,8 +1930,8 @@ progress+span { padding: 5em 1.5em 1.5em 1.5em; } -.layout-mobile .chapterCardImageContainer+.innerCardFooter { - padding: 0em .5em .5em .5em; +.layout-mobile .chapterCardImageContainer + .innerCardFooter { + padding: 0em 0.5em 0.5em 0.5em; } .centerMessage { @@ -1951,7 +1944,7 @@ progress+span { min-width: 11em; } -[dir=ltr] .emby-collapsible-button { +[dir="ltr"] .emby-collapsible-button { padding-left: 1em; } @@ -1960,9 +1953,7 @@ progress+span { border: var(--defaultBorder); } -@media (max-width: 80em), -(max-height: 45em) { - +@media (max-width: 80em), (max-height: 45em) { .dialog.dialog-fixedSize, .dialog.dialog-fullscreen-lowres { border-radius: unset !important; @@ -1975,9 +1966,8 @@ progress+span { } */ } - .dialogBackdropOpened { - opacity: .66; + opacity: 0.66; } .subtitleEditor-dropZone, @@ -1990,10 +1980,10 @@ progress+span { margin-inline-start: 0 !important; margin-inline-end: 0 !important; text-align: center; - padding: 0 .5em !important; + padding: 0 0.5em !important; } -.formDialogFooter:not(.formDialogFooter-clear.formDialogFooter-flex)>.formDialogFooterItem { +.formDialogFooter:not(.formDialogFooter-clear.formDialogFooter-flex) > .formDialogFooterItem { -webkit-flex-basis: 6em; flex-basis: 6em; } @@ -2009,7 +1999,7 @@ progress+span { backdrop-filter: var(--blurLarge); } -.selectionCommandsPanel>h1 { +.selectionCommandsPanel > h1 { font-size: large; } @@ -2018,9 +2008,9 @@ progress+span { background-color: transparent; } -.emby-checkbox:checked+span+.checkboxOutline { +.emby-checkbox:checked + span + .checkboxOutline { border-radius: var(--smallerRadius) !important; - box-shadow: inset 0em 7em 10em 20px rgba(0, 0, 0, .8); + box-shadow: inset 0em 7em 10em 20px rgba(0, 0, 0, 0.8); background: transparent; border-color: white; border-style: solid; @@ -2028,8 +2018,8 @@ progress+span { outline: none; } -@supports(display:revert) { - .emby-checkbox:checked+span+.checkboxOutline { +@supports (display: revert) { + .emby-checkbox:checked + span + .checkboxOutline { outline: solid var(--borderWidth) white; } } @@ -2044,23 +2034,23 @@ progress+span { .itemSelectionPanel .material-icons.check:before { font-size: 4em; color: #ffffff; - padding: .25em; + padding: 0.25em; } -.cardText-first+.itemSelectionPanel>.checkboxContainer { +.cardText-first + .itemSelectionPanel > .checkboxContainer { height: calc(100% - 1.75em); } -.overflowBackdropCard .cardText-first+.itemSelectionPanel>.checkboxContainer { +.overflowBackdropCard .cardText-first + .itemSelectionPanel > .checkboxContainer { height: calc(100% - 0em); } -.checkboxContainer .emby-checkbox:checked+span+.checkboxOutline.multiSelectCheckboxOutline { +.checkboxContainer .emby-checkbox:checked + span + .checkboxOutline.multiSelectCheckboxOutline { border-radius: var(--largeRadius) !important; } -#castCollapsible .checkboxContainer .emby-checkbox:checked+span+.checkboxOutline.multiSelectCheckboxOutline, -#guestCastContent .checkboxContainer .emby-checkbox:checked+span+.checkboxOutline.multiSelectCheckboxOutline { +#castCollapsible .checkboxContainer .emby-checkbox:checked + span + .checkboxOutline.multiSelectCheckboxOutline, +#guestCastContent .checkboxContainer .emby-checkbox:checked + span + .checkboxOutline.multiSelectCheckboxOutline { border-radius: 50% !important; } @@ -2073,13 +2063,13 @@ progress+span { display: none; } -.cardText-secondary+.itemSelectionPanel>.checkboxContainer, -.cardText.cardTextCentered:not(.cardText-secondary, .cardText-first)+.itemSelectionPanel>.checkboxContainer { +.cardText-secondary + .itemSelectionPanel > .checkboxContainer, +.cardText.cardTextCentered:not(.cardText-secondary, .cardText-first) + .itemSelectionPanel > .checkboxContainer { height: calc(100% - 3em); } -.cardFooter+.itemSelectionPanel>.checkboxContainer, -.cardScalable+.itemSelectionPanel>.checkboxContainer { +.cardFooter + .itemSelectionPanel > .checkboxContainer, +.cardScalable + .itemSelectionPanel > .checkboxContainer { height: calc(100% - 0em); } @@ -2091,61 +2081,61 @@ progress+span { } .checkboxOutline:not(.multiSelectCheckboxOutline) .checkboxIcon { - font-size: .9em; + font-size: 0.9em; font-weight: 900; } .checkboxOutline:not(.multiSelectCheckboxOutline) { border: solid gray var(--borderWidth); background-color: white; - transition: all .125s; + transition: all 0.125s; } -.emby-checkbox:checked+span+.checkboxOutline:not(.multiSelectCheckboxOutline) { +.emby-checkbox:checked + span + .checkboxOutline:not(.multiSelectCheckboxOutline) { box-shadow: none; background: var(--checkboxCheckedBgColor); border: var(--defaultLighterBorder); } -.emby-checkbox:focus:not(:checked)+span+.checkboxOutline { +.emby-checkbox:focus:not(:checked) + span + .checkboxOutline { border-color: var(--highlightOutlineColor) !important; outline: none; } -.emby-checkbox:focus+span+.checkboxOutline { +.emby-checkbox:focus + span + .checkboxOutline { border-color: var(--highlightOutlineColor) !important; outline: none; } -@supports(display:revert) { - .emby-checkbox:focus:not(:checked)+span+.checkboxOutline { +@supports (display: revert) { + .emby-checkbox:focus:not(:checked) + span + .checkboxOutline { outline: var(--borderWidth) solid gray; - outline-offset: calc(-2.5*var(--borderWidth)); + outline-offset: calc(-2.5 * var(--borderWidth)); } - .emby-checkbox:focus+span+.checkboxOutline { + .emby-checkbox:focus + span + .checkboxOutline { border-color: white !important; outline: var(--borderWidth) solid var(--highlightOutlineColor); } } -.layout-tv .emby-checkbox:focus+span+.checkboxOutline { +.layout-tv .emby-checkbox:focus + span + .checkboxOutline { transform: scale(1.75); } .cardIndicators { -webkit-align-items: center; align-items: center; - top: .5em; + top: 0.5em; } -[dir=ltr] .cardIndicators { - right: .5em; +[dir="ltr"] .cardIndicators { + right: 0.5em; } .layout-mobile .cardIndicators { - top: .2em; - right: .2em; + top: 0.2em; + right: 0.2em; } .indicator { @@ -2160,10 +2150,10 @@ progress+span { .videoIndicator { background: rgb(41 41 41); - padding: .5em; - transform: scale(.85); + padding: 0.5em; + transform: scale(0.85); border: var(--defaultLighterBorder); - font-size: .75em; + font-size: 0.75em; } .videoIndicator:has(.photo_album), @@ -2202,21 +2192,21 @@ div[data-type="PhotoAlbum"] .play_arrow:before { .raised, #btnDeleteImage, .manageRecordingButton, -.dashboardActionsContainer>.emby-button { +.dashboardActionsContainer > .emby-button { color: #fff; border-radius: var(--smallRadius); background: var(--lighterGradientPoint); border: var(--defaultBorder); - transition: all .125s; + transition: all 0.125s; } -.editItemMetadataForm>.metadataFormFields div:has(.formDialogFooterItem) { +.editItemMetadataForm > .metadataFormFields div:has(.formDialogFooterItem) { display: flex; justify-content: center; } -.btnBrowse>.folder { - margin-inline-end: .5em; +.btnBrowse > .folder { + margin-inline-end: 0.5em; } .fab { @@ -2244,29 +2234,29 @@ div[data-type="PhotoAlbum"] .play_arrow:before { .detailButton { border: var(--defaultLighterBorder); - padding: .5em .5em !important; + padding: 0.5em 0.5em !important; } .detailButton-icon { - font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48; + font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48; } .cardScalable .material-icons.check:before { - font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 20; + font-variation-settings: "FILL" 1, "wght" 700, "GRAD" 0, "opsz" 20; transform: scale(1.25); } .emby-button[title="Favorite"] .material-icons.favorite:before { - font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20; + font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 20; } .detailButton:not(.btnPlay) { color: var(--textColor); backdrop-filter: none; border-color: transparent; - margin: .5em !important; + margin: 0.5em !important; border-radius: 50%; - padding: .6em !important; + padding: 0.6em !important; background: transparent; } @@ -2287,7 +2277,7 @@ div[data-type="PhotoAlbum"] .play_arrow:before { border-color: var(--borderColor); height: 3em; min-width: 10em; - margin-right: .5em !important; + margin-right: 0.5em !important; flex-direction: row; } @@ -2296,12 +2286,12 @@ div[data-type="PhotoAlbum"] .play_arrow:before { padding: 0 1ch; } -.btnPlay>.detailButton-content::after { +.btnPlay > .detailButton-content::after { padding: 0 1ch; place-content: center; } -.btnPlay>.detailButton-content { +.btnPlay > .detailButton-content { -webkit-align-items: unset; align-items: unset; display: -webkit-flex; @@ -2327,7 +2317,7 @@ div[data-type="PhotoAlbum"] .play_arrow:before { margin: 0; } -.layout-mobile [dir=ltr] .mainDetailButtons { +.layout-mobile [dir="ltr"] .mainDetailButtons { flex-wrap: wrap; padding: 0 1.25em; } @@ -2339,13 +2329,13 @@ div[data-type="PhotoAlbum"] .play_arrow:before { } } -.localnav>.emby-button { +.localnav > .emby-button { background: var(--lighterGradientPoint) !important; color: #fff; - padding: .8em .8em; + padding: 0.8em 0.8em; } -div[data-role=controlgroup] a.ui-btn-active { +div[data-role="controlgroup"] a.ui-btn-active { background: var(--selectorBackgroundColor) !important; color: #fff !important; } @@ -2376,19 +2366,19 @@ div[data-role=controlgroup] a.ui-btn-active { } .paperList { - padding: .4em; + padding: 0.4em; } .serverInfo { padding: 1em; } -.serverInfo>:nth-child(1n) { +.serverInfo > :nth-child(1n) { -webkit-flex: 1 0 30%; flex: 1 0 30%; } -.serverInfo>:nth-child(2n) { +.serverInfo > :nth-child(2n) { -webkit-flex: 1 0 50%; flex: 1 0 50%; text-align: end; @@ -2425,26 +2415,29 @@ div[data-role=controlgroup] a.ui-btn-active { background: var(--drawerColor); backdrop-filter: var(--blurLarge); border-right: var(--defaultBorder); - padding: .25em; + padding: 0.25em; } .listItemImage { border-radius: var(--smallRadius); - margin-right: .75em !important; + margin-right: 0.75em !important; border: var(--defaultBorder); } -[dir=ltr] .listItem:not(.actionSheetMenuItem, .childrenItemsContainer .listItem, .activityLogListWidget .listItem) { - padding: .375em !important; +[dir="ltr"] .listItem:not(.actionSheetMenuItem, .childrenItemsContainer .listItem, .activityLogListWidget .listItem) { + padding: 0.375em !important; } -[dir=ltr] .listItem:not(.actionSheetMenuItem, .childrenItemsContainer .listItem, .activityLogListWidget .listItem):not(:last-child) { - margin-bottom: .5em; +[dir="ltr"] + .listItem:not(.actionSheetMenuItem, .childrenItemsContainer .listItem, .activityLogListWidget .listItem):not( + :last-child + ) { + margin-bottom: 0.5em; } [dir="ltr"] .listItem:not(.actionSheetMenuItem)[data-type="Episode"] { - padding: .375em; - margin-bottom: .5em; + padding: 0.375em; + margin-bottom: 0.5em; } .layout-mobile #songsTab .listItem[data-type="Audio"], @@ -2458,7 +2451,7 @@ div[data-role=controlgroup] a.ui-btn-active { } .listItem[data-type="Audio"]:has(.playlistIndexIndicatorImage):not(:hover) { - background-color: rgba(255, 255, 255, .07); + background-color: rgba(255, 255, 255, 0.07); } [dir="ltr"] .listItem:not(.actionSheetMenuItem)[data-type="Episode"] .listItemBodyText:not(.secondary) { @@ -2466,7 +2459,7 @@ div[data-role=controlgroup] a.ui-btn-active { font-weight: 600; } -.listItemBody>.listItemBodyText:not(.secondary) { +.listItemBody > .listItemBodyText:not(.secondary) { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; @@ -2483,19 +2476,19 @@ div[data-role=controlgroup] a.ui-btn-active { .listItem-bottomoverview, [dir="ltr"] .listItem:not(.actionSheetMenuItem)[data-type="Episode"] .listItem-overview p { - margin-top: .75em; + margin-top: 0.75em; margin-bottom: 0em; } .listItem, .navMenuOption { - border-radius: .7em; + border-radius: 0.7em; } .listItem:hover, .navMenuOption:hover { background: unset; - border-radius: .7em; + border-radius: 0.7em; } .listItem:focus { @@ -2504,7 +2497,7 @@ div[data-role=controlgroup] a.ui-btn-active { .listItem:active, .navMenuOption:active { - background: rgba(255, 255, 255, .125); + background: rgba(255, 255, 255, 0.125); } .listItem-border { @@ -2515,12 +2508,12 @@ div[data-role=controlgroup] a.ui-btn-active { border-radius: var(--smallRadius); } -.MuiListItem-root>a, -.MuiList-root>a, -.MuiListItem-root>div { +.MuiListItem-root > a, +.MuiList-root > a, +.MuiListItem-root > div { border: solid transparent var(--borderWidth); - border-radius: .7em; - margin: .25 .5em !important; + border-radius: 0.7em; + margin: 0.25 0.5em !important; } .Mui-selected { @@ -2537,15 +2530,15 @@ div[data-role=controlgroup] a.ui-btn-active { } .actionSheetContent { - padding: .4em !important; + padding: 0.4em !important; } -.actionSheetContent>h1 { +.actionSheetContent > h1 { font-size: unset; } -[dir=ltr] .actionsheetMenuItemIcon.check { - margin: 0 .45em 0 .45em !important; +[dir="ltr"] .actionsheetMenuItemIcon.check { + margin: 0 0.45em 0 0.45em !important; } .actionSheetMenuItem:has(.listItemIcon.check) { @@ -2565,7 +2558,7 @@ div[data-role=controlgroup] a.ui-btn-active { } .actionSheetMenuItem:has(.listItemIcon.check[style*="hidden"]):active { - background-color: rgba(255, 255, 255, .125); + background-color: rgba(255, 255, 255, 0.125); } .navMenuOption { @@ -2573,14 +2566,14 @@ div[data-role=controlgroup] a.ui-btn-active { margin: 0em 1em !important; } -[dir=ltr] .navMenuOption { - padding: .75em 1em !important; +[dir="ltr"] .navMenuOption { + padding: 0.75em 1em !important; margin-bottom: unset; } #myPreferencesMenuPage .listItemIcon { - margin-left: .5em; - margin-right: .25em; + margin-left: 0.5em; + margin-right: 0.25em; } .navMenuOption-selected { @@ -2615,7 +2608,7 @@ div[data-role=controlgroup] a.ui-btn-active { background-color: var(--lighterGradientPointAlpha); } -.layout-mobile .trackSelections{ +.layout-mobile .trackSelections { margin-top: 0; } @@ -2627,7 +2620,7 @@ div[data-role=controlgroup] a.ui-btn-active { order: 4; } -.recordingButton{ +.recordingButton { gap: 1ch; } @@ -2639,33 +2632,33 @@ div[data-role=controlgroup] a.ui-btn-active { .selectArrowContainer { top: 0em; - opacity: .5; + opacity: 0.5; } -.trackSelectionFieldContainer>.selectArrowContainer { - top: .5em; +.trackSelectionFieldContainer > .selectArrowContainer { + top: 0.5em; } -.trackSelectionFieldContainer>label { +.trackSelectionFieldContainer > label { max-width: 2.75em; background-repeat: no-repeat; color: transparent; - transform: scale(.9); + transform: scale(0.9); } -.selectVideoContainer.trackSelectionFieldContainer>label { +.selectVideoContainer.trackSelectionFieldContainer > label { background-image: url('data:image/svg+xml,'); } -.selectAudioContainer.trackSelectionFieldContainer>label { +.selectAudioContainer.trackSelectionFieldContainer > label { background-image: url('data:image/svg+xml,'); } -.selectSubtitlesContainer.trackSelectionFieldContainer>label { - background-image: url('data:image/svg+xml,') +.selectSubtitlesContainer.trackSelectionFieldContainer > label { + background-image: url('data:image/svg+xml,'); } -.selectSourceContainer.trackSelectionFieldContainer>label { +.selectSourceContainer.trackSelectionFieldContainer > label { background-image: url('data:image/svg+xml,'); } @@ -2679,7 +2672,7 @@ div[data-role=controlgroup] a.ui-btn-active { min-height: 16vh; } -.detailSectionContent:has(.tagline.hide+.overview.hide) { +.detailSectionContent:has(.tagline.hide + .overview.hide) { min-height: unset; } @@ -2690,19 +2683,19 @@ div[data-role=controlgroup] a.ui-btn-active { border-radius: var(--smallRadius); background-color: var(--lighterGradientPointAlpha); border: none; - box-shadow: inset 0 0 0 .06em var(--borderColor) !important; + box-shadow: inset 0 0 0 0.06em var(--borderColor) !important; order: 2; grid-column: 1 / 3; } -.layout-mobile .itemDetailsGroup{ +.layout-mobile .itemDetailsGroup { margin-top: 0; } .detailsGroupItem { margin: 0 !important; justify-content: space-between; - padding: .5em .9em; + padding: 0.5em 0.9em; align-items: baseline; } @@ -2710,36 +2703,35 @@ div[data-role=controlgroup] a.ui-btn-active { border-bottom: var(--defaultBorder); } -.detailsGroupItem>.label { +.detailsGroupItem > .label { font-weight: 600; flex-basis: 6em; } -.detailsGroupItem>.content>a { +.detailsGroupItem > .content > a { font-weight: 400; text-align: end; } -.detailsGroupItem>.content { +.detailsGroupItem > .content { text-align: end; color: var(--dimTextColor); } -.detailsGroupItem>.label { +.detailsGroupItem > .label { color: var(--textColor); } - .layout-tv .itemDetailsGroup { order: 2; } -.detailSection>.nextUpSection { +.detailSection > .nextUpSection { order: 5; grid-column: 1; } -.detailSection>#listChildrenCollapsible { +.detailSection > #listChildrenCollapsible { order: 6; grid-column: 2 / -1; } @@ -2749,8 +2741,8 @@ div[data-role=controlgroup] a.ui-btn-active { grid-column: 1 / -1; } -.nextUpSection.hide~#listChildrenCollapsible, -.trackSelections.hide~.recordingFields.hide~.itemDetailsGroup { +.nextUpSection.hide ~ #listChildrenCollapsible, +.trackSelections.hide ~ .recordingFields.hide ~ .itemDetailsGroup { grid-column: 1 / -1; } @@ -2758,28 +2750,28 @@ div[data-role=controlgroup] a.ui-btn-active { .layout-mobile .detailSectionContent, .layout-mobile .itemDetailsGroup, .layout-mobile .nextUpSection, -.layout-mobile .detailSection>#listChildrenCollapsible, +.layout-mobile .detailSection > #listChildrenCollapsible, .layout-tv .trackSelections, .layout-tv .detailSectionContent, .layout-tv .itemDetailsGroup, .layout-tv .nextUpSection, -.layout-tv .detailSection>#listChildrenCollapsible, +.layout-tv .detailSection > #listChildrenCollapsible, .collectionItems, .programGuideSection { grid-column: 1 / -1; } -.programGuideSection:not(.hide){ +.programGuideSection:not(.hide) { order: -1; margin-top: 2em; } -.layout-desktop .programGuide{ +.layout-desktop .programGuide { padding-right: var(--sidePadding); } .collectionItems .sectionTitleContainer.padded-left { - padding-left: .375em; + padding-left: 0.375em; } .collectionItemsContainer.padded-left { @@ -2795,8 +2787,8 @@ div[data-role=controlgroup] a.ui-btn-active { .alphaPickerButton { font-family: monospace; - margin: .15em; - color: rgba(255, 255, 255, .25); + margin: 0.15em; + color: rgba(255, 255, 255, 0.25); } .alphaPickerButton-selected { @@ -2812,7 +2804,7 @@ div[data-role=controlgroup] a.ui-btn-active { } .alphaPickerButton-tv { - transition: transform .2s; + transition: transform 0.2s; } .alphaPickerButton-tv:focus { @@ -2838,14 +2830,14 @@ div[data-role=controlgroup] a.ui-btn-active { padding-right: 0 !important; } */ -[dir=ltr] .detailPageContent, +[dir="ltr"] .detailPageContent, .content-primary { padding-left: var(--sidePadding) !important; padding-right: var(--sidePadding) !important; } /* this prevents double padding on Jellyfin pre-10.11.0 */ -[dir=ltr] .detailPageContent>.detailPagePrimaryContent { +[dir="ltr"] .detailPageContent > .detailPagePrimaryContent { padding-left: 0 !important; padding-right: 0 !important; } @@ -2855,8 +2847,8 @@ div[data-role=controlgroup] a.ui-btn-active { padding-right: 0 !important; } -.listPaging>span { - padding: 0 .5em; +.listPaging > span { + padding: 0 0.5em; } .layout-mobile #myPreferencesMenuPage { @@ -2894,7 +2886,7 @@ div[data-role=controlgroup] a.ui-btn-active { } .sectionTitleTextButton { - padding: 0 .5em; + padding: 0 0.5em; } .sectionTitleTextButton:hover { @@ -2905,26 +2897,27 @@ div[data-role=controlgroup] a.ui-btn-active { color: white !important; } -.sectionTitleTextButton>* { - padding: .3em 0 !important; +.sectionTitleTextButton > * { + padding: 0.3em 0 !important; margin: 0 0 !important; } -.dashboardSection .sectionTitleTextButton>.material-icons, -.sectionTitleTextButton>.material-icons, -.dashboardSection .sectionTitleTextButton>.material-icons.material-icons { +.dashboardSection .sectionTitleTextButton > .material-icons, +.sectionTitleTextButton > .material-icons, +.dashboardSection .sectionTitleTextButton > .material-icons.material-icons { font-size: unset; } -.sectionTitleTextButton>.material-icons::before { +.sectionTitleTextButton > .material-icons::before { display: none; } -.sectionTitleTextButton>.material-icons.chevron_right { - margin-left: .5rem !important; +.sectionTitleTextButton > .material-icons.chevron_right { + margin-left: 0.5rem !important; height: 1.5rem; width: 1.5rem; - background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23D1D5DB' aria-hidden='true'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12.75 15l3-3m0 0l-3-3m3 3h-7.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z'%3E%3C/path%3E%3C/svg%3E") no-repeat center center; + background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23D1D5DB' aria-hidden='true'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12.75 15l3-3m0 0l-3-3m3 3h-7.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z'%3E%3C/path%3E%3C/svg%3E") + no-repeat center center; background-size: contain; /* Stops miscalculating the size on hover effect */ } @@ -2938,7 +2931,7 @@ div[data-role=controlgroup] a.ui-btn-active { color: var(--textColor); } -[dir=ltr] .upNextContainer { +[dir="ltr"] .upNextContainer { margin: 2em; box-sizing: border-box; max-width: 80vw; @@ -2971,7 +2964,7 @@ div[data-role=controlgroup] a.ui-btn-active { background-color: whitesmoke; box-shadow: var(--shadow); margin-right: var(--sidePadding); - color: black + color: black; } /* this allows the skip button get focused correctly on TVs using remote navigation; needs 10.10.7*/ @@ -2985,7 +2978,7 @@ div[data-role=controlgroup] a.ui-btn-active { } .skip-button:active { - background-color: rgba(245, 245, 245, .7); + background-color: rgba(245, 245, 245, 0.7); box-shadow: none; } @@ -3002,7 +2995,6 @@ div[data-role=controlgroup] a.ui-btn-active { .emby-tab-button:hover { color: whitesmoke; - } @media (hover: hover) and (pointer: fine) { @@ -3012,7 +3004,7 @@ div[data-role=controlgroup] a.ui-btn-active { } .actionSheetMenuItem.emby-button:has(.listItemIcon.material-icons.check[style*="hidden"]):hover { - background-color: rgba(255, 255, 255, .125); + background-color: rgba(255, 255, 255, 0.125); } .emby-select-withcolor:hover:not(.emby-select[disabled], :focus), @@ -3027,7 +3019,7 @@ div[data-role=controlgroup] a.ui-btn-active { } .button-flat:hover { - background-color: rgba(255, 255, 255, .2); + background-color: rgba(255, 255, 255, 0.2); color: white; } @@ -3041,17 +3033,17 @@ div[data-role=controlgroup] a.ui-btn-active { } .listItem:hover { - background: rgba(255, 255, 255, .125); + background: rgba(255, 255, 255, 0.125); backdrop-filter: var(--blurLargest); } .navMenuOption:hover { - background: rgba(255, 255, 255, .125); + background: rgba(255, 255, 255, 0.125); } .searchfields-icon:hover, .inputContainer .emby-input-iconbutton:hover { - color: rgba(255, 255, 255, .8); + color: rgba(255, 255, 255, 0.8); } #scenesContent .cardScalable:hover { @@ -3090,7 +3082,7 @@ div[data-role=controlgroup] a.ui-btn-active { background-color: var(--selectorBackgroundColor); border: var(--defaultLighterBorder); border-radius: var(--smallRadius); - padding: .5em !important; + padding: 0.5em !important; } .inputLabelFocused, @@ -3106,8 +3098,7 @@ div[data-role=controlgroup] a.ui-btn-active { outline: none !important; } -@supports (display:revert) { - +@supports (display: revert) { .emby-select-withcolor:focus, .emby-input:focus, .emby-textarea:focus { @@ -3116,36 +3107,36 @@ div[data-role=controlgroup] a.ui-btn-active { } } -.emby-select-withcolor>option { +.emby-select-withcolor > option { color: inherit; background-color: var(--selectorBackgroundColor); } .inputContainer .emby-input-iconbutton { - color: rgba(255, 255, 255, .5); + color: rgba(255, 255, 255, 0.5); margin-left: -2.5em; background-color: transparent !important; } .searchfields-txtSearch { - padding: .75em 1.5em !important; + padding: 0.75em 1.5em !important; border-radius: 4em; } .searchfields-icon { - padding: .25em; + padding: 0.25em; margin-left: -1.75em; margin-bottom: 0; border-radius: var(--largeRadius); - color: rgba(255, 255, 255, .5); + color: rgba(255, 255, 255, 0.5); } .searchfields-icon:active, .inputContainer .emby-input-iconbutton:active { - color: rgba(255, 255, 255, .8); + color: rgba(255, 255, 255, 0.8); } -.searchFields>.searchFieldsInner { +.searchFields > .searchFieldsInner { flex-direction: row-reverse; } @@ -3153,7 +3144,7 @@ div[data-role=controlgroup] a.ui-btn-active { .infoWrapper h1.parentName { font-size: 4em; white-space: pre-wrap; - padding-bottom: .5ch; + padding-bottom: 0.5ch; color: white; } @@ -3183,7 +3174,7 @@ div[data-role=controlgroup] a.ui-btn-active { padding-bottom: 0ch; } -.subtitle{ +.subtitle { font-size: 2em; padding-bottom: 1em; } @@ -3193,14 +3184,14 @@ div[data-role=controlgroup] a.ui-btn-active { } .itemName.originalTitle { - padding-top: .25em; - padding-bottom: .25em; + padding-top: 0.25em; + padding-bottom: 0.25em; color: var(--dimTextColor); display: var(--itemOriginalTitleVisibility); } -.channelPrograms+.channelPrograms, -.guide-channelHeaderCell+.guide-channelHeaderCell { +.channelPrograms + .channelPrograms, +.guide-channelHeaderCell + .guide-channelHeaderCell { margin-top: 0; } @@ -3214,9 +3205,9 @@ div[data-role=controlgroup] a.ui-btn-active { } .guideProgramName { - background-color: rgba(255, 255, 255, .05); - height: calc(100% - .7em); - margin: .35em 0 .35em .7em; + background-color: rgba(255, 255, 255, 0.05); + height: calc(100% - 0.7em); + margin: 0.35em 0 0.35em 0.7em; border-radius: var(--smallerRadius); } @@ -3225,7 +3216,7 @@ div[data-role=controlgroup] a.ui-btn-active { } .programCell-active .guideProgramName { - background-color: rgba(255, 255, 255, .125); + background-color: rgba(255, 255, 255, 0.125); } .guideVerticalScroller { @@ -3233,11 +3224,11 @@ div[data-role=controlgroup] a.ui-btn-active { } .guideChannelImage { - background-color: rgba(255, 255, 255, .05); - bottom: .35em; - right: .35em; - top: .35em; - width: calc(100% - .7em); + background-color: rgba(255, 255, 255, 0.05); + bottom: 0.35em; + right: 0.35em; + top: 0.35em; + width: calc(100% - 0.7em); border-radius: var(--smallerRadius); } @@ -3298,7 +3289,7 @@ table:not(.MuiTable-root.MuiTable-stickyHeader) { } #serverActivityPage .MuiPaper-elevation2, -#serverActivityPage .MuiPaper-elevation2>.MuiBox-root, +#serverActivityPage .MuiPaper-elevation2 > .MuiBox-root, #serverActivityPage .MuiTableRow-root.MuiTableRow-head { background-color: var(--tableBodyColor); } @@ -3313,20 +3304,19 @@ table:not(.MuiTable-root.MuiTable-stickyHeader) { background: var(--lighterGradientPointAlpha) !important; } - .MuiList-root.MuiMenu-list { background-color: var(--drawerColor); } -ul.MuiList-root.MuiMenu-list.MuiList-dense>div:first-child { +ul.MuiList-root.MuiMenu-list.MuiList-dense > div:first-child { /* ! Don't change these units. They are rem because that is standard for MUI */ - gap: .5rem; + gap: 0.5rem; } .playerStats, .iconOsd { border-radius: var(--largeRadius); - background-color: rgba(69, 69, 69, .69); + background-color: rgba(69, 69, 69, 0.69); backdrop-filter: var(--blurDefault); } @@ -3356,7 +3346,8 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense>div:first-child { min-height: 100vh; padding: 1em; overflow-y: auto; - background: linear-gradient(to bottom, var(--darkerGradientPointAlpha), var(--lighterGradientPoint)), var(--loginPageBgUrl); + background: linear-gradient(to bottom, var(--darkerGradientPointAlpha), var(--lighterGradientPoint)), + var(--loginPageBgUrl); background-size: cover; background-position: center; background-repeat: no-repeat; @@ -3365,7 +3356,7 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense>div:first-child { #loginPage .padded-left.padded-right.padded-bottom-page { width: 28em; - background: rgba(30, 40, 54, .7); + background: rgba(30, 40, 54, 0.7); padding: 2em 2em 1em 2em !important; border-radius: var(--largerRadius); backdrop-filter: var(--blurDefault); @@ -3374,7 +3365,7 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense>div:first-child { } .manualLoginForm .sectionTitle, -.visualLoginForm>h1 { +.visualLoginForm > h1 { display: none; } @@ -3433,13 +3424,13 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense>div:first-child { .endTimeText { justify-content: right; - padding-inline-end: .8em; - margin: 0 0 0 .75em !important; + padding-inline-end: 0.8em; + margin: 0 0 0 0.75em !important; } .startTimeText, .endTimeText { - padding-top: .25em; + padding-top: 0.25em; } .startTimeText, @@ -3538,7 +3529,7 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense>div:first-child { background-size: cover; border-radius: var(--smallerRadius); height: 3.5em; - margin: .25em; + margin: 0.25em; width: 3.5em; } @@ -3564,11 +3555,11 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense>div:first-child { .nowPlayingAlbum.nowPlayingSeason { color: var(--dimTextColor); - margin-bottom: .5em; + margin-bottom: 0.5em; } .nowPlayingArtist.nowPlayingSerie { - margin-bottom: .5em; + margin-bottom: 0.5em; } .playlistIndexIndicatorImage { @@ -3582,7 +3573,7 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense>div:first-child { } #dialogToc { - background-color: rgba(0, 0, 0, .5); + background-color: rgba(0, 0, 0, 0.5); max-height: unset; max-width: unset; } @@ -3591,7 +3582,7 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense>div:first-child { font-size: unset; font-weight: 600; list-style-type: circle; - margin-bottom: .5em; + margin-bottom: 0.5em; font-family: "Math", serif; } @@ -3599,17 +3590,17 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense>div:first-child { display: none; } -.MuiTabs-root>.MuiTabs-scroller { +.MuiTabs-root > .MuiTabs-scroller { align-content: center; } -.MuiTabs-flexContainer>.MuiButtonBase-root { +.MuiTabs-flexContainer > .MuiButtonBase-root { border-radius: var(--largeRadius); min-height: 40px; min-width: 72px; } -.MuiTabs-flexContainer>.MuiButtonBase-root.Mui-selected { +.MuiTabs-flexContainer > .MuiButtonBase-root.Mui-selected { color: white; background-color: transparent !important; } @@ -3636,7 +3627,7 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense>div:first-child { } .headroom { - transition: transform .5s; + transition: transform 0.5s; } /* this is the default solid header, visible in home and libraries */ @@ -3700,7 +3691,7 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense>div:first-child { } .layout-tv .headerTop { - padding: 0 .5em; + padding: 0 0.5em; } /* this prevents the section tabs from hiding all the way up */ @@ -3718,10 +3709,10 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense>div:first-child { } .noHomeButtonHeader .emby-tab-button:before { - font-family: 'Material Icons Round'; - padding-inline-end: .5ch; + font-family: "Material Icons Round"; + padding-inline-end: 0.5ch; font-size: 1.2em; - font-variation-settings: 'FILL' 0; + font-variation-settings: "FILL" 0; } .layout-tv .sectionTabs .emby-tabs.smoothScrollX { @@ -3737,7 +3728,7 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense>div:first-child { .headerTabs.sectionTabs .emby-tab-button { display: inline-flex; - margin: .25em .5em; + margin: 0.25em 0.5em; padding: 0 1.25em; height: 2.5em; color: var(--textColor); @@ -3747,7 +3738,7 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense>div:first-child { } .headerTabs.sectionTabs .emby-tab-button-active { - margin: .25em .5em; + margin: 0.25em 0.5em; color: black; background-color: var(--textColor); } @@ -3761,7 +3752,6 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense>div:first-child { } @media (min-width: 75em) { - .sectionTabs { -webkit-align-items: center; align-items: center; @@ -3781,7 +3771,6 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense>div:first-child { } @media (max-width: 100em) { - /* this makes the font size consistent */ .sectionTabs { font-size: 100%; @@ -3800,18 +3789,17 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense>div:first-child { .layout-tv .headerLeft { overflow: unset; - margin: 0em .6em; + margin: 0em 0.6em; } /* this allows switching between the header styles easily */ -#reactRoot>div:nth-of-type(3) { +#reactRoot > div:nth-of-type(3) { container-name: skinHeader; container-type: size; height: var(--appBarHeight); } @container skinHeader (min-height: 4.9em) { - /* this is the alternative faded app bar */ .skinHeader-blurred:not(.osdHeader):not(.semiTransparent) { backdrop-filter: none; @@ -3847,10 +3835,9 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense>div:first-child { } .headroom--unpinned { - -webkit-transform: translateY(calc(-.75 * var(--appBarHeight) - var(--borderWidth))); - transform: translateY(calc(-.75 * var(--appBarHeight) - var(--borderWidth))); + -webkit-transform: translateY(calc(-0.75 * var(--appBarHeight) - var(--borderWidth))); + transform: translateY(calc(-0.75 * var(--appBarHeight) - var(--borderWidth))); } - } .remoteControlContent { diff --git a/workspace.code-workspace b/workspace.code-workspace index 876a149..12344e5 100644 --- a/workspace.code-workspace +++ b/workspace.code-workspace @@ -1,8 +1,13 @@ { - "folders": [ - { - "path": "." - } - ], - "settings": {} + "folders": [ + { + "path": "." + } + ], + "settings": { + "editor.defaultFormatter": "esbenp.prettier-vscode", + "editor.formatOnSave": true, + "prettier.useTabs": false, + "prettier.printWidth": 120, + } } \ No newline at end of file