3619 lines
83 KiB
CSS
3619 lines
83 KiB
CSS
/* ElegantFin Theme for Jellyfin by lscambo13 */
|
|
|
|
/* Add-ons: Uncomment to enable */
|
|
/* @import url(./assets/add-ons/extras-media-bar-nightly.css); */
|
|
/* @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');
|
|
|
|
:root {
|
|
--elegantFinFooterText: "ElegantFin Nightly";
|
|
|
|
/* Base theme colors */
|
|
color-scheme: dark;
|
|
--darkerGradientPoint: #111827;
|
|
--darkerGradientPointAlpha: rgba(17, 24, 39, .85);
|
|
--lighterGradientPoint: #1d2635;
|
|
--lighterGradientPointAlpha: rgba(29, 38, 53, .85);
|
|
--headerColor: rgba(30, 40, 54, .8);
|
|
--drawerColor: rgba(30, 40, 54, .9);
|
|
|
|
--borderColor: hsl(214, 13%, 32%);
|
|
--darkerBorderColor: hsl(214, 13%, 22%);
|
|
--lighterBorderColor: hsla(0, 0%, 100%, .2);
|
|
|
|
--selectorBackgroundColor: rgb(55, 65, 81);
|
|
--selectorBackgroundColorAlpha: rgba(55, 65, 81, .5);
|
|
|
|
--activeColorAlpha: rgba(119, 91, 244, .9);
|
|
--activeColor: rgb(119, 91, 244);
|
|
--osdSeekBarPlayedColor: var(--textColor);
|
|
--osdSeekBarBufferedColorAlpha: rgba(128, 128, 128, .5);
|
|
--osdSeekBarThumbColor: white;
|
|
--tableBodyColor: rgb(31 41 55 / 1);
|
|
--uiAccentColor: rgb(117 111 226);
|
|
--btnMiniPlayColor: rgb(41 154 93);
|
|
--btnMiniPlayBorderColor: rgb(50, 167, 105);
|
|
|
|
/* Base component colors */
|
|
--btnDeleteColor: rgb(169, 29, 29);
|
|
--btnDeleteBorderColor: rgb(217, 84, 84);
|
|
--btnSubmitColor: rgb(61, 54, 178);
|
|
--btnSubmitBorderColor: rgb(117 111 226);
|
|
--checkboxCheckedBgColor: rgb(79, 70, 229);
|
|
--highlightOutlineColor: rgb(37, 99, 235);
|
|
|
|
--defaultBorder: var(--borderWidth) solid var(--borderColor);
|
|
--defaultLighterBorder: var(--borderWidth) solid var(--lighterBorderColor);
|
|
|
|
/* dark theme based text colors */
|
|
--textColor: rgb(209, 213, 219);
|
|
--dimTextColor: rgb(156, 163, 175);
|
|
|
|
/* 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%);
|
|
--headerColorGradientAlt: linear-gradient(180deg, rgba(30, 40, 54, .95), 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));
|
|
|
|
--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);
|
|
/* --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;
|
|
|
|
--sidePadding: 3.3%;
|
|
--itemColumnGap: 1em;
|
|
--primaryItemPageNegativeSpace: 15vh;
|
|
--secondaryItemPageNegativeSpace: 35vh;
|
|
|
|
--blurSmallest: blur(2px);
|
|
--blurDefault: blur(5px);
|
|
--blurLarge: blur(10px);
|
|
--blurLargest: blur(20px);
|
|
|
|
--shadow: .1em .1em .15em hsla(0, 0%, 0%, .3);
|
|
|
|
/* use "" to enable a fancy blur behind the app header / top bar [default];
|
|
use none (without quotes) to disable it */
|
|
--headerBlurLayerVisibility: "";
|
|
|
|
/* use --headerColorGradient if the above is enabled [default];
|
|
use --headerColorGradientAlt otherwise */
|
|
--headerBackground: var(--headerColorGradient);
|
|
|
|
/* fill out YOUR-JELLYFIN-SERVER-ADDRESS with a relevant host address;
|
|
url("<YOUR-JELLYFIN-SERVER-ADDRESS>/Branding/Splashscreen?format=webp&foregroundLayer=1&quality=33&width=3840&height=2160&blur=2"); */
|
|
--loginPageBgUrl: url("");
|
|
--loginPageText: "Sign in to continue";
|
|
|
|
/* use 2.8em keep the overlay play button at bottom-left corner [default];
|
|
use 50% to place it at the center of a card */
|
|
--overlayPlayButtonPosition: 2.8em;
|
|
|
|
/* use 'Material Icons Round' for the new icons [default];
|
|
use 'Material Icons' to revert to old icons */
|
|
--iconPack: 'Material Icons Round', Material Icons;
|
|
|
|
/* none: hides the watched and mark favorite buttons on hover [default];
|
|
block: makes them visible use block */
|
|
--extraCardButtonsVisibility: none;
|
|
|
|
/* none: hides the media library card labels [default];
|
|
block: makes them visible */
|
|
--libraryLabelVisibility: none;
|
|
|
|
/* use "" to enable the card hover effect [default];
|
|
use none (without quotes) to disable it */
|
|
--cardHoverEffect: "";
|
|
}
|
|
|
|
html {
|
|
font-family: "Inter", serif;
|
|
font-optical-sizing: auto;
|
|
font-weight: 425;
|
|
font-style: normal;
|
|
-webkit-tap-highlight-color: transparent !important;
|
|
}
|
|
|
|
.layout-mobile {
|
|
--itemColumnGap: 0;
|
|
--sidePadding: 5%;
|
|
}
|
|
|
|
/* 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-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');
|
|
}
|
|
|
|
.material-icons {
|
|
font-family: var(--iconPack) !important;
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
display: inline-block;
|
|
line-height: 1;
|
|
text-transform: none;
|
|
letter-spacing: normal;
|
|
word-wrap: normal;
|
|
white-space: nowrap;
|
|
direction: ltr;
|
|
line-height: 1;
|
|
vertical-align: middle;
|
|
-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;
|
|
}
|
|
|
|
.material-icons.info_outline:before {
|
|
font-family: Material Icons;
|
|
}
|
|
|
|
.dashboardFooter {
|
|
font-family: "Noto Sans", serif;
|
|
transition: transform 50ms;
|
|
}
|
|
|
|
.dashboardFooter::after {
|
|
content: var(--elegantFinFooterText);
|
|
font-size: .8em;
|
|
color: #4e4e60;
|
|
}
|
|
|
|
::selection {
|
|
background: var(--activeColorAlpha);
|
|
}
|
|
|
|
.cardImageIcon {
|
|
color: var(--borderColor);
|
|
}
|
|
|
|
.card {
|
|
padding: .375em;
|
|
transition: width .5s;
|
|
}
|
|
|
|
.card:focus .cardBox:not(.visualCardBox) .cardScalable {
|
|
border-color: white !important;
|
|
}
|
|
|
|
.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 {
|
|
background: var(--uiAccentColor);
|
|
color: var(--uiAccentColor);
|
|
}
|
|
|
|
.emby-button.show-focus:focus,
|
|
.paper-icon-button-light.show-focus:focus,
|
|
.emby-tabs .emby-button.show-focus:focus {
|
|
background-color: var(--highlightOutlineColor) !important;
|
|
color: #fff !important;
|
|
}
|
|
|
|
.emby-tabs .emby-button.show-focus:focus {
|
|
outline: none !important;
|
|
}
|
|
|
|
.card.show-animation:focus>.cardBox {
|
|
-webkit-transform: scale(1.125);
|
|
transform: scale(1.125);
|
|
}
|
|
|
|
[dir=ltr] .itemsContainer>.card>.cardBox {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.cardBox-bottompadded {
|
|
margin-bottom: .5em !important;
|
|
}
|
|
|
|
@media (max-width: 50em) {
|
|
.cardBox-bottompadded {
|
|
margin-bottom: .25em !important;
|
|
}
|
|
}
|
|
|
|
.vertical-wrap:not(.centered) {
|
|
justify-content: flex-start !important;
|
|
}
|
|
|
|
.countIndicator,
|
|
.fullSyncIndicator,
|
|
.mediaSourceIndicator {
|
|
background: rgb(31, 80, 189);
|
|
border: var(--defaultLighterBorder);
|
|
}
|
|
|
|
.cardScalable {
|
|
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);
|
|
transition: transform 125ms;
|
|
}
|
|
|
|
@supports (aspect-ratio: 1 / 1) {
|
|
|
|
#castCollapsible .cardScalable,
|
|
#guestCastContent .cardScalable {
|
|
aspect-ratio: 1 / 1;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
|
|
#castCollapsible .cardContent.cardImageContainer,
|
|
#guestCastContent .cardContent.cardImageContainer {
|
|
background-position-y: 33%;
|
|
}
|
|
|
|
.layout-mobile .cardScalable {
|
|
border: var(--defaultBorder) !important;
|
|
}
|
|
|
|
.visualCardBox,
|
|
.paperList {
|
|
background-color: var(--headerColor) !important;
|
|
border-radius: var(--largeRadius) !important;
|
|
border: var(--defaultBorder) !important;
|
|
box-shadow: unset !important;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.layout-desktop .visualCardBox {
|
|
border-width: var(--borderWidthDouble) !important;
|
|
}
|
|
|
|
.visualCardBox .cardScalable {
|
|
border-width: 0 0 var(--borderWidth) 0 !important;
|
|
border-radius: 0 !important;
|
|
border-color: var(--darkerBorderColor) !important;
|
|
}
|
|
|
|
.cardImageContainer {
|
|
transition: transform .375s;
|
|
}
|
|
|
|
.card.squareCard[data-type="TvChannel"] .cardImageContainer.cardContent {
|
|
background-color: rgba(255, 255, 255, .2);
|
|
}
|
|
|
|
.cardImageContainer>.cardDefaultText {
|
|
font-size: 2em;
|
|
padding-top: 1.5em;
|
|
color: transparent;
|
|
white-space: pre;
|
|
}
|
|
|
|
.cardImageContainer>.cardDefaultText::before {
|
|
content: "?\A";
|
|
color: var(--borderColor);
|
|
}
|
|
|
|
.card.card-hoverable:hover .cardScalable,
|
|
.card.card-hoverable:hover .visualCardBox {
|
|
border-color: white !important;
|
|
}
|
|
|
|
.card.card-hoverable:hover .visualCardBox .cardScalable {
|
|
border-color: var(--darkerBorderColor) !important;
|
|
}
|
|
|
|
.card.card-hoverable:hover .cardImageContainer {
|
|
transform: scale(1.025);
|
|
}
|
|
|
|
.card.card-hoverable .itemSelectionPanel {
|
|
transition: transform .125s;
|
|
}
|
|
|
|
.card.card-hoverable:hover .cardScalable,
|
|
.card.card-hoverable:hover .itemSelectionPanel {
|
|
transform: scale(1.02);
|
|
}
|
|
|
|
.card.card-hoverable .cardScalable:active {
|
|
transition: transform .075s;
|
|
transform: scale(1);
|
|
}
|
|
|
|
.cardScalable:has(.cardOverlayButton:hover)>.cardImageContainer {
|
|
transform: scale(1);
|
|
}
|
|
|
|
.cardOverlayContainer {
|
|
transition: .5s;
|
|
background: rgba(255, 255, 255, .05);
|
|
}
|
|
|
|
.card.card-hoverable .cardOverlayContainer:after {
|
|
content: var(--cardHoverEffect);
|
|
transition: .5s;
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
transform: translateY(-50%) translateX(0);
|
|
background: var(--hoverGradientV);
|
|
}
|
|
|
|
.card.card-hoverable:hover .cardOverlayContainer:after {
|
|
transform: translateY(50%) translateX(0);
|
|
opacity: 0;
|
|
}
|
|
|
|
.backdropCard.card-hoverable .cardOverlayContainer:after,
|
|
.overflowBackdropCard.card-hoverable .cardOverlayContainer:after {
|
|
transform: translateY(0) translateX(-50%);
|
|
background: var(--hoverGradientH);
|
|
}
|
|
|
|
.backdropCard.card-hoverable:hover .cardOverlayContainer:after,
|
|
.overflowBackdropCard.card-hoverable:hover .cardOverlayContainer:after {
|
|
transform: translateY(0) translateX(50%);
|
|
opacity: 0;
|
|
}
|
|
|
|
.cardBox:not(.visualCardBox) .cardPadder {
|
|
background-color: var(--lighterGradientPoint);
|
|
}
|
|
|
|
.cardOverlayContainer>.cardOverlayFab-primary {
|
|
left: unset;
|
|
margin-left: unset;
|
|
margin-top: unset;
|
|
top: unset;
|
|
left: calc(var(--overlayPlayButtonPosition) - 1.5em);
|
|
bottom: calc(var(--overlayPlayButtonPosition) - 1.5em);
|
|
}
|
|
|
|
.cardOverlayContainer>.cardOverlayFab-primary,
|
|
.listItemImageButton,
|
|
.layout-mobile .cardOverlayButton-br:not([data-action="menu"])>.cardOverlayButtonIcon {
|
|
background-color: var(--btnMiniPlayColor) !important;
|
|
color: white;
|
|
border: var(--defaultLighterBorder);
|
|
border-color: var(--btnMiniPlayBorderColor);
|
|
font-size: 75%;
|
|
box-shadow: var(--shadow);
|
|
z-index: 2;
|
|
}
|
|
|
|
.cardOverlayContainer>.cardOverlayFab-primary:hover,
|
|
.listItemImageButton:hover {
|
|
color: white;
|
|
}
|
|
|
|
.layout-desktop .cardOverlayButton-br button[data-action="menu"],
|
|
.layout-desktop .listItemButton[data-action="menu"] {
|
|
display: none;
|
|
}
|
|
|
|
.layout-desktop .cardOverlayButton-br,
|
|
[dir=ltr].layout-desktop .cardOverlayButton-br {
|
|
bottom: .75em;
|
|
right: .5em;
|
|
display: var(--extraCardButtonsVisibility);
|
|
z-index: 1;
|
|
}
|
|
|
|
.layout-desktop .cardOverlayButton-br button {
|
|
color: white;
|
|
text-shadow: var(--shadow);
|
|
}
|
|
|
|
.layout-mobile .cardOverlayButton {
|
|
padding: 1em;
|
|
font-size: 60%;
|
|
}
|
|
|
|
.layout-mobile .cardOverlayButton-br,
|
|
[dir=ltr] .layout-mobile .cardOverlayButton-br {
|
|
bottom: .25em;
|
|
right: .25em;
|
|
}
|
|
|
|
.layout-mobile .portraitCard .cardOverlayButton-br:not([data-action="menu"]),
|
|
.layout-mobile .backdropCard .cardOverlayButton-br:not([data-action="menu"]) {
|
|
display: none;
|
|
}
|
|
|
|
.layout-mobile .cardOverlayButton-br[data-action="menu"]>.cardOverlayButtonIcon {
|
|
background-color: transparent !important;
|
|
color: white;
|
|
border: none;
|
|
text-shadow: 1px 1px .1em black;
|
|
color: white;
|
|
}
|
|
|
|
.cardOverlayContainer:has(.cardOverlayButton:hover) {
|
|
backdrop-filter: var(--blurDefault);
|
|
}
|
|
|
|
.listViewUserDataButtons {
|
|
font-size: small;
|
|
}
|
|
|
|
.layout-mobile .listViewUserDataButtons {
|
|
flex-direction: column;
|
|
font-size: x-small;
|
|
}
|
|
|
|
.listItem-largeImage[data-type="Episode"] .listViewUserDataButtons {
|
|
flex-direction: column;
|
|
font-size: small;
|
|
}
|
|
|
|
.portraitCard {
|
|
min-width: 5em;
|
|
}
|
|
|
|
.bannerCard {
|
|
--cardCount: 2;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
.overflowPortraitCard,
|
|
.overflowSquareCard {
|
|
--cardCount: 15;
|
|
}
|
|
|
|
.squareCard:has(.cardFooter) {
|
|
--cardCount: 12;
|
|
}
|
|
|
|
.backdropCard {
|
|
--cardCount: 12;
|
|
}
|
|
|
|
.overflowBackdropCard {
|
|
--cardCount: 11;
|
|
}
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
.overflowPortraitCard,
|
|
.overflowSquareCard {
|
|
--cardCount: 14;
|
|
}
|
|
|
|
.squareCard:has(.cardFooter) {
|
|
--cardCount: 11;
|
|
}
|
|
|
|
.backdropCard {
|
|
--cardCount: 11;
|
|
}
|
|
|
|
.overflowBackdropCard {
|
|
--cardCount: 10;
|
|
}
|
|
}
|
|
|
|
/* 14 posters, 10 thumbs */
|
|
@media (max-width: 270em) {
|
|
|
|
.portraitCard,
|
|
.squareCard {
|
|
--cardCount: 14;
|
|
}
|
|
|
|
.overflowPortraitCard,
|
|
.overflowSquareCard {
|
|
--cardCount: 13;
|
|
}
|
|
|
|
.squareCard:has(.cardFooter) {
|
|
--cardCount: 10;
|
|
}
|
|
|
|
.backdropCard {
|
|
--cardCount: 10;
|
|
}
|
|
|
|
.overflowBackdropCard {
|
|
--cardCount: 9;
|
|
}
|
|
}
|
|
|
|
/* 13 posters, 10 thumbs */
|
|
@media (max-width: 240em) {
|
|
|
|
.portraitCard,
|
|
.squareCard {
|
|
--cardCount: 13;
|
|
}
|
|
|
|
.overflowPortraitCard,
|
|
.overflowSquareCard {
|
|
--cardCount: 12;
|
|
}
|
|
|
|
.squareCard:has(.cardFooter) {
|
|
--cardCount: 10;
|
|
}
|
|
|
|
.backdropCard {
|
|
--cardCount: 10;
|
|
}
|
|
|
|
.overflowBackdropCard {
|
|
--cardCount: 9;
|
|
}
|
|
}
|
|
|
|
/* 12 posters, 9 thumbs, 4K*/
|
|
@media (max-width: 220em) {
|
|
|
|
.portraitCard,
|
|
.squareCard {
|
|
--cardCount: 12;
|
|
}
|
|
|
|
.overflowPortraitCard,
|
|
.overflowSquareCard {
|
|
--cardCount: 11;
|
|
}
|
|
|
|
.squareCard:has(.cardFooter) {
|
|
--cardCount: 9;
|
|
}
|
|
|
|
.backdropCard {
|
|
--cardCount: 9;
|
|
}
|
|
|
|
.overflowBackdropCard {
|
|
--cardCount: 8;
|
|
}
|
|
}
|
|
|
|
/* 11 posters, 9 thumbs */
|
|
@media (max-width: 200em) {
|
|
|
|
.portraitCard,
|
|
.squareCard {
|
|
--cardCount: 11;
|
|
}
|
|
|
|
.overflowPortraitCard,
|
|
.overflowSquareCard {
|
|
--cardCount: 10;
|
|
}
|
|
|
|
.squareCard:has(.cardFooter) {
|
|
--cardCount: 9;
|
|
}
|
|
|
|
.backdropCard {
|
|
--cardCount: 9;
|
|
}
|
|
|
|
.overflowBackdropCard {
|
|
--cardCount: 8;
|
|
}
|
|
}
|
|
|
|
/* 10 posters, 8 thumbs */
|
|
@media (max-width: 170em) {
|
|
|
|
.portraitCard,
|
|
.squareCard {
|
|
--cardCount: 10;
|
|
}
|
|
|
|
.overflowPortraitCard,
|
|
.overflowSquareCard {
|
|
--cardCount: 9;
|
|
}
|
|
|
|
.squareCard:has(.cardFooter) {
|
|
--cardCount: 9;
|
|
}
|
|
|
|
.backdropCard {
|
|
--cardCount: 8;
|
|
}
|
|
|
|
.overflowBackdropCard {
|
|
--cardCount: 7;
|
|
}
|
|
}
|
|
|
|
/* 9 posters, 7 thumbs */
|
|
@media (max-width: 140em) {
|
|
|
|
.portraitCard,
|
|
.squareCard {
|
|
--cardCount: 9;
|
|
}
|
|
|
|
.overflowPortraitCard,
|
|
.overflowSquareCard {
|
|
--cardCount: 8;
|
|
}
|
|
|
|
.squareCard:has(.cardFooter) {
|
|
--cardCount: 7;
|
|
}
|
|
|
|
.backdropCard {
|
|
--cardCount: 7;
|
|
}
|
|
|
|
.overflowBackdropCard {
|
|
--cardCount: 6;
|
|
}
|
|
}
|
|
|
|
/* 8 posters, 7 thumbs, 1080p */
|
|
@media (max-width: 120em) {
|
|
|
|
.portraitCard,
|
|
.squareCard {
|
|
--cardCount: 8;
|
|
}
|
|
|
|
.overflowPortraitCard,
|
|
.overflowSquareCard {
|
|
--cardCount: 7;
|
|
}
|
|
|
|
.squareCard:has(.cardFooter) {
|
|
--cardCount: 6;
|
|
}
|
|
|
|
.backdropCard {
|
|
--cardCount: 6;
|
|
}
|
|
|
|
.overflowBackdropCard {
|
|
--cardCount: 5;
|
|
}
|
|
}
|
|
|
|
/* 7 posters, 6 thumbs */
|
|
@media (max-width: 100em) {
|
|
|
|
.portraitCard,
|
|
.squareCard,
|
|
.overflowPortraitCard,
|
|
.overflowSquareCard {
|
|
--cardCount: 7;
|
|
}
|
|
|
|
.squareCard:has(.cardFooter) {
|
|
--cardCount: 6;
|
|
}
|
|
|
|
.backdropCard {
|
|
--cardCount: 6;
|
|
}
|
|
|
|
.overflowBackdropCard {
|
|
--cardCount: 5;
|
|
}
|
|
}
|
|
|
|
/* 6 posters, 5 thumbs */
|
|
@media (max-width: 80em) {
|
|
|
|
.portraitCard,
|
|
.squareCard,
|
|
.overflowPortraitCard,
|
|
.overflowSquareCard {
|
|
--cardCount: 6;
|
|
}
|
|
|
|
.squareCard:has(.cardFooter) {
|
|
--cardCount: 5;
|
|
}
|
|
|
|
.overflowBackdropCard,
|
|
.backdropCard {
|
|
--cardCount: 4;
|
|
}
|
|
}
|
|
|
|
/* 5 posters, 4 thumbs */
|
|
@media (max-width: 62em) {
|
|
|
|
.portraitCard,
|
|
.squareCard,
|
|
.overflowPortraitCard,
|
|
.overflowSquareCard {
|
|
--cardCount: 5;
|
|
}
|
|
|
|
.squareCard:has(.cardFooter) {
|
|
--cardCount: 4;
|
|
}
|
|
|
|
.backdropCard,
|
|
.overflowBackdropCard {
|
|
--cardCount: 4;
|
|
}
|
|
}
|
|
|
|
/* 4 posters, 3 thumbs */
|
|
@media (max-width: 48.125em) {
|
|
|
|
.portraitCard,
|
|
.squareCard,
|
|
.overflowPortraitCard,
|
|
.overflowSquareCard {
|
|
--cardCount: 4;
|
|
}
|
|
|
|
.squareCard:has(.cardFooter) {
|
|
--cardCount: 3;
|
|
}
|
|
|
|
.backdropCard,
|
|
.overflowBackdropCard {
|
|
--cardCount: 3;
|
|
}
|
|
}
|
|
|
|
/* 3 posters, 2 thumbs, 2 with footer */
|
|
@media (max-width: 30em) {
|
|
|
|
.portraitCard,
|
|
.squareCard,
|
|
.overflowPortraitCard,
|
|
.overflowSquareCard,
|
|
.layout-mobile .portraitCard,
|
|
.layout-mobile .squareCard,
|
|
.layout-mobile .overflowPortraitCard,
|
|
.layout-mobile .overflowSquareCard {
|
|
--cardCount: 3;
|
|
}
|
|
|
|
.squareCard:has(.cardFooter) {
|
|
--cardCount: 2;
|
|
}
|
|
|
|
.backdropCard,
|
|
.overflowBackdropCard {
|
|
--cardCount: 2;
|
|
}
|
|
}
|
|
|
|
.card {
|
|
--effectiveWidth: calc((99vw - (var(--sidePadding) * 2)));
|
|
--cardWidth: calc(var(--effectiveWidth) / var(--cardCount) - var(--itemColumnGap));
|
|
box-sizing: border-box;
|
|
width: var(--cardWidth) !important;
|
|
}
|
|
|
|
.layout-mobile .card {
|
|
--cardWidth: calc(var(--effectiveWidth) / var(--cardCount));
|
|
}
|
|
|
|
/* this makes the card sizes smaller when phone is in landscape mode */
|
|
@media (orientation: landscape) and (max-height: 40em) {
|
|
.layout-mobile .card {
|
|
--effectiveWidth: calc((65vw - (var(--sidePadding) * 2)));
|
|
}
|
|
}
|
|
|
|
.detailPageWrapperContainer {
|
|
padding-top: unset;
|
|
margin-top: unset;
|
|
}
|
|
|
|
.layout-desktop .detailPageWrapperContainer {
|
|
background: transparent;
|
|
min-height: 46vh;
|
|
background: linear-gradient(0deg, var(--darkerGradientPointAlpha) 70%, 85%, transparent);
|
|
}
|
|
|
|
.layout-tv .detailPageWrapperContainer {
|
|
padding-left: 30vw;
|
|
background: transparent;
|
|
min-height: 46vh;
|
|
background: linear-gradient(0deg, var(--darkerGradientPointAlpha) 70%, 85%, transparent);
|
|
}
|
|
|
|
.detailPagePrimaryContainer {
|
|
align-content: space-between;
|
|
align-items: stretch;
|
|
justify-content: end;
|
|
flex-direction: column;
|
|
/* center content on desktop */
|
|
align-items: center;
|
|
text-align: center;
|
|
margin-bottom: -1.5em;
|
|
}
|
|
|
|
.layout-mobile .detailPagePrimaryContainer {
|
|
padding: .5em var(--sidePadding);
|
|
}
|
|
|
|
[dir=ltr] .detailPagePrimaryContent {
|
|
padding-right: 0;
|
|
}
|
|
|
|
.layout-desktop .detailPagePrimaryContainer {
|
|
background: transparent;
|
|
}
|
|
|
|
.layout-desktop .detailPageSecondaryContainer {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.detailPageSecondaryContainer {
|
|
padding-top: 0;
|
|
}
|
|
|
|
/* this hides the header home button everywhere except the main media page */
|
|
.skinHeader-withBackground:not(.semiTransparent) .headerHomeButton {
|
|
display: none;
|
|
}
|
|
|
|
/* workaround to show the header home button on the main media page on phones*/
|
|
.layout-mobile:has(#itemDetailPage:not(.hide)) .headerHomeButton {
|
|
display: block;
|
|
}
|
|
|
|
.pageTitle {
|
|
height: 1.5em;
|
|
}
|
|
|
|
.headerLeft .pageTitle {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 1;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.paper-icon-button-light>.material-icons {
|
|
font-size: 1.25em;
|
|
}
|
|
|
|
.verticalSection.emby-scroller-container>h2.sectionTitle.sectionTitle-cards {
|
|
padding-top: 1.25em !important;
|
|
}
|
|
|
|
#itemDetailPage .emby-scroller-container,
|
|
#itemDetailPage .emby-scroller,
|
|
#itemDetailPage .scrollX {
|
|
margin: 0 calc(-1 * var(--sidePadding));
|
|
padding: 0 var(--sidePadding);
|
|
}
|
|
|
|
.layout-desktop .emby-scroller-container,
|
|
.layout-desktop .emby-scroller,
|
|
.layout-desktop .scrollX {
|
|
--itemColumnGap: 0.5em;
|
|
}
|
|
|
|
.itemsContainer {
|
|
column-gap: var(--itemColumnGap);
|
|
}
|
|
|
|
.layout-desktop .sectionTitle,
|
|
.layout-tv .sectionTitle {
|
|
font-size: 1.5rem !important;
|
|
}
|
|
|
|
.sectionTitleContainer-cards {
|
|
padding-top: 0;
|
|
}
|
|
|
|
.sectionTitleContainer+.emby-scrollbuttons {
|
|
padding-top: 0;
|
|
}
|
|
|
|
.layout-mobile :not(.sectionTitleContainer-cards)>.sectionTitle-cards {
|
|
text-align: left;
|
|
}
|
|
|
|
.emby-scrollbuttons-button.paper-icon-button-light>.material-icons {
|
|
font-size: 1.5em;
|
|
place-content: center;
|
|
}
|
|
|
|
.detailRibbon {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.mediaInfoItem {
|
|
border-radius: var(--smallRadius);
|
|
font-weight: 500;
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.itemMiscInfo-primary {
|
|
column-gap: .5em;
|
|
}
|
|
|
|
.mediaInfoOfficialRating {
|
|
background: transparent !important;
|
|
font-size: .75em;
|
|
font-family: 'Noto Sans', sans-serif;
|
|
line-height: 1.5em;
|
|
transform: translateY(-.15em);
|
|
font-weight: 600;
|
|
border: var(--defaultBorder);
|
|
}
|
|
|
|
.starIcon {
|
|
background: linear-gradient(to right, #90cea1, #01b4e4);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
margin-left: -.125em;
|
|
transform: translateY(-.02em);
|
|
}
|
|
|
|
[dir=ltr] .mediaInfoCriticRating {
|
|
background-size: 30%;
|
|
padding-left: 1.5em;
|
|
}
|
|
|
|
[dir=ltr] .mediaInfoCriticRating::after {
|
|
content: "%";
|
|
}
|
|
|
|
.layout-desktop .detailRibbon {
|
|
height: 32vh !important;
|
|
margin-top: unset !important;
|
|
}
|
|
|
|
.layout-desktop [dir=ltr] .detailPagePrimaryContainer,
|
|
.layout-tv [dir=ltr] .detailPagePrimaryContainer {
|
|
padding-left: var(--sidePadding);
|
|
}
|
|
|
|
@keyframes animMoveDown {
|
|
from {
|
|
transform: translateY(-2em);
|
|
opacity: 0;
|
|
}
|
|
|
|
to {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes animMoveDownSecondaryPage {
|
|
from {
|
|
transform: translateY(-2em);
|
|
opacity: 0;
|
|
}
|
|
|
|
to {
|
|
transform: translateY(0);
|
|
opacity: .3;
|
|
}
|
|
}
|
|
|
|
@keyframes animMoveUp {
|
|
from {
|
|
transform: translateY(-90%);
|
|
opacity: 0;
|
|
}
|
|
|
|
to {
|
|
transform: translateY(-100%);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.detailLogo {
|
|
/* this hides the detail logo by default to make it only show up on modern browsers */
|
|
display: none;
|
|
}
|
|
|
|
@supports (aspect-ratio: 1 / 1) {
|
|
/* this shows the detail logo on modern browsers */
|
|
|
|
.detailLogo {
|
|
display: block;
|
|
top: calc(100vh - 10em - var(--primaryItemPageNegativeSpace));
|
|
left: 0;
|
|
width: 40%;
|
|
transform: translateY(-100%);
|
|
margin: auto 30%;
|
|
height: 25vh;
|
|
background-position: bottom;
|
|
}
|
|
|
|
.layout-tv .detailLogo {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.layout-mobile .detailLogo {
|
|
display: block;
|
|
z-index: 1;
|
|
position: absolute;
|
|
left: 1em;
|
|
top: 45vh;
|
|
margin: auto 0%;
|
|
width: calc(100vw - 2em);
|
|
max-height: 17vh;
|
|
animation: animMoveUp 1s ease-out forwards;
|
|
}
|
|
|
|
.itemBackdrop {
|
|
display: block !important;
|
|
}
|
|
|
|
/* Theme video styling rolled back because jellyfin does not differentiate between the main video player and theme video playback nicely*/
|
|
/* .videoPlayerContainer {
|
|
position: relative !important;
|
|
-webkit-mask: var(--themeVideoPlayerMask);
|
|
mask: var(--themeVideoPlayerMask);
|
|
height: 90vh;
|
|
}
|
|
|
|
.layout-mobile .videoPlayerContainer {
|
|
z-index: 1;
|
|
height: 35vh;
|
|
}
|
|
|
|
.videoPlayerContainer>.htmlvideoplayer {
|
|
width: -webkit-fill-available;
|
|
object-fit: cover;
|
|
} */
|
|
|
|
.layout-desktop .itemBackdrop {
|
|
height: calc(100vh - 32vh - var(--primaryItemPageNegativeSpace)) !important;
|
|
}
|
|
|
|
.layout-mobile .itemBackdrop {
|
|
margin-top: 0;
|
|
position: sticky;
|
|
top: -30%;
|
|
-webkit-mask: var(--itemBackdropMask);
|
|
mask: var(--itemBackdropMask);
|
|
animation: animMoveDown .5s ease-out forwards;
|
|
height: 45vh;
|
|
}
|
|
|
|
.layout-mobile #itemDetailPage:has(.detailLogo.hide) .itemBackdrop {
|
|
margin-bottom: -10vh;
|
|
}
|
|
|
|
.layout-tv .detailLogo {
|
|
height: 20vh;
|
|
top: 39vh;
|
|
left: 30vw;
|
|
width: 60vw;
|
|
margin: auto 5vw;
|
|
}
|
|
|
|
.layout-tv .itemBackdrop {
|
|
height: 33vh;
|
|
}
|
|
|
|
.detailImageContainer.padded-left {
|
|
padding-left: 0;
|
|
}
|
|
|
|
.layout-tv .detailImageContainer.padded-left {
|
|
padding-left: 0;
|
|
height: 0;
|
|
position: fixed;
|
|
}
|
|
|
|
.layout-desktop .detailImageContainer .card {
|
|
top: unset !important;
|
|
width: 22vh !important;
|
|
}
|
|
|
|
.detailImageContainer .card.backdropCard {
|
|
width: 40vh !important;
|
|
max-width: 50vw;
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
.detailImageContainer .card {
|
|
display: none;
|
|
}
|
|
|
|
.layout-tv .detailImageContainer .card {
|
|
width: 23vw !important;
|
|
display: block !important;
|
|
}
|
|
|
|
.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));
|
|
}
|
|
|
|
/* this brings the buttons and title to the center in main media page */
|
|
.layout-mobile [dir=ltr] .infoWrapper,
|
|
.layout-mobile .infoWrapper {
|
|
padding-left: 0;
|
|
}
|
|
|
|
.infoWrapper {
|
|
align-content: end;
|
|
place-items: center;
|
|
display: grid;
|
|
}
|
|
|
|
/* Both the blocks below position the poster in main media page in the center */
|
|
.layout-mobile .detailImageContainer {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: center;
|
|
padding-left: 0 !important;
|
|
}
|
|
|
|
.layout-mobile .detailImageContainer:has(.card:not(.portraitCard)) {
|
|
height: 0;
|
|
}
|
|
|
|
.layout-mobile .detailImageContainer .card {
|
|
position: inherit !important;
|
|
margin-top: -150%;
|
|
max-width: 60vw;
|
|
}
|
|
|
|
.layout-mobile .detailPageWrapperContainer {
|
|
padding-top: 0;
|
|
margin-top: .5em;
|
|
}
|
|
|
|
/* this hides the main media title when the clear logo is available*/
|
|
.detailLogo:not(.hide)~.detailPageWrapperContainer .nameContainer h1,
|
|
#itemDetailPage:has(.detailImageContainer .card.backdropCard) .detailLogo,
|
|
#itemDetailPage:has(.detailImageContainer .cardImageIcon.album) .detailLogo,
|
|
#itemDetailPage:has(.detailImageContainer .cardImageIcon.person) .detailLogo,
|
|
.detailImageContainer .card:not(.portraitCard):has(.cardImageIcon.person) {
|
|
z-index: 2;
|
|
display: none;
|
|
}
|
|
|
|
/* this shows the main media title and the poster when the clear logo is unavailable*/
|
|
.detailLogo.hide~.detailPageWrapperContainer .nameContainer h1 {
|
|
display: block !important;
|
|
}
|
|
|
|
.detailImageContainer:has(.backdropCard, .squareCard)~.nameContainer h1,
|
|
.detailImageContainer:has(.cardImageIcon.person)~.nameContainer h1 {
|
|
display: block !important;
|
|
}
|
|
|
|
.detailImageContainer .card.backdropCard:has(.cardImageIcon.album) {
|
|
max-width: 20vh;
|
|
}
|
|
|
|
.detailImageContainer .card.backdropCard:has(.cardImageIcon.album) .cardScalable {
|
|
aspect-ratio: 1 / 1;
|
|
}
|
|
|
|
#childrenContent:has(.listItem[data-type="Audio"]) {
|
|
border: var(--defaultBorder);
|
|
border-radius: var(--largeRadius);
|
|
padding: .5em;
|
|
background-color: var(--lighterGradientPointAlpha);
|
|
}
|
|
|
|
/* this shows the poster in the cast, book and music pages */
|
|
.detailImageContainer .card:has(.book, .person, .album),
|
|
.detailImageContainer .card.backdropCard:has(.tv),
|
|
.detailImageContainer .card.backdropCard:has(.live_tv) {
|
|
display: block;
|
|
}
|
|
|
|
/* 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.album) .itemBackdrop,
|
|
#itemDetailPage:has(.detailImageContainer .backdropCard .cardImageIcon.tv) .itemBackdrop,
|
|
#itemDetailPage:has(.detailImageContainer .squareCard) .itemBackdrop,
|
|
#itemDetailPage:has(.detailImageContainer .cardImageIcon.live_tv) .itemBackdrop {
|
|
height: calc(100vh - 32vh - var(--secondaryItemPageNegativeSpace)) !important;
|
|
}
|
|
|
|
#itemDetailPage:has(.detailImageContainer .card.backdropCard),
|
|
#itemDetailPage:has(.detailImageContainer .card .cardImageIcon.album) {
|
|
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;
|
|
}
|
|
|
|
.layout-mobile .cardImageIcon {
|
|
font-size: 3.5em;
|
|
}
|
|
|
|
@media (max-width: 50em) {
|
|
.homeLibraryButton {
|
|
width: 45.6% !important;
|
|
}
|
|
}
|
|
|
|
.homeLibraryButton {
|
|
padding-inline-start: .25em;
|
|
min-width: 15%;
|
|
}
|
|
|
|
@media (orientation: portrait) and (max-width: 40em) {
|
|
|
|
[data-type=Movie] .listItemImage,
|
|
[data-type=Series] .listItemImage {
|
|
display: unset;
|
|
}
|
|
|
|
.dashboardActionsContainer {
|
|
font-size: min(3.6vw, 98%);
|
|
}
|
|
}
|
|
|
|
@media (orientation: portrait) {
|
|
|
|
/* hides sync button on home screen on phones only in portrait mode */
|
|
.layout-mobile .skinHeader.noHomeButtonHeader .headerSyncButton {
|
|
display: none;
|
|
}
|
|
|
|
.layout-mobile .btnPlay.detailButton:not(.play-button) {
|
|
flex: 0 0 100%;
|
|
margin-right: 0 !important;
|
|
}
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1.25em;
|
|
}
|
|
|
|
h1,
|
|
h2 {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.tagline {
|
|
font-size: 1.3em;
|
|
font-weight: 400;
|
|
margin: 0;
|
|
font-style: italic;
|
|
color: var(--textColor);
|
|
}
|
|
|
|
html,
|
|
.nowPlayingPlaylist,
|
|
.nowPlayingContextMenu,
|
|
.backgroundContainer:not(.withBackdrop),
|
|
.backgroundContainer:not(.backgroundContainer-transparent),
|
|
.backdropContainer {
|
|
background-color: var(--darkerGradientPoint);
|
|
background: var(--backgroundGradient);
|
|
}
|
|
|
|
.backdropImage:after,
|
|
.backdropImage:before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: inherit;
|
|
}
|
|
|
|
.backdropImage:after {
|
|
z-index: 0;
|
|
height: 80vh;
|
|
-webkit-mask: linear-gradient(180deg, rgba(0, 0, 0, 1) 75%, transparent);
|
|
mask: linear-gradient(180deg, rgba(0, 0, 0, 1) 75%, transparent);
|
|
}
|
|
|
|
.layout-desktop .backdropImage:after {
|
|
transition: opacity .25s;
|
|
}
|
|
|
|
.backdropImage:before {
|
|
transform: scale(1.1);
|
|
filter: var(--blurLargest);
|
|
}
|
|
|
|
.backgroundContainer.withBackdrop {
|
|
opacity: .9;
|
|
background: linear-gradient(0deg, var(--darkerGradientPoint), 45%, rgba(17, 24, 39, .25));
|
|
}
|
|
|
|
.layout-mobile .withSectionTabs .backgroundContainer.withBackdrop {
|
|
opacity: .9;
|
|
}
|
|
|
|
.layout-mobile .backgroundContainer.withBackdrop {
|
|
opacity: 1;
|
|
background: var(--darkerGradientPoint);
|
|
}
|
|
|
|
.withSectionTabs .backgroundContainer.withBackdrop {
|
|
background: var(--darkerGradientPoint);
|
|
}
|
|
|
|
.layout-desktop .withSectionTabs .backdropImage:after {
|
|
opacity: 0;
|
|
}
|
|
|
|
.layout-mobile .withSectionTabs .backdropImage:after {
|
|
display: none;
|
|
}
|
|
|
|
@keyframes animScaleUp {
|
|
from {
|
|
transform: translateY(-2.5%);
|
|
opacity: 0;
|
|
}
|
|
|
|
to {
|
|
transform: translateY(0%);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.backdropImageFadeIn {
|
|
transform-origin: bottom center;
|
|
animation: animScaleUp .5s ease-out forwards;
|
|
}
|
|
|
|
.appfooter {
|
|
background-color: var(--headerColor) !important;
|
|
backdrop-filter: var(--blurLargest) !important;
|
|
}
|
|
|
|
.lyricPage {
|
|
padding: 0 var(--sidePadding);
|
|
}
|
|
|
|
.lyricsLine {
|
|
font-size: 2em;
|
|
color: var(--textColor);
|
|
text-align: center;
|
|
align-self: center;
|
|
font-weight: 600;
|
|
transition: transform .125s;
|
|
}
|
|
|
|
.pastLyric,
|
|
.futureLyric {
|
|
transform: scale(.85);
|
|
font-weight: 400;
|
|
text-align: center;
|
|
}
|
|
|
|
.pastLyric {
|
|
opacity: .45;
|
|
}
|
|
|
|
.buttonActive {
|
|
color: var(--uiAccentColor) !important;
|
|
}
|
|
|
|
#divRunningTasks progress {
|
|
width: calc(100% - 7em);
|
|
}
|
|
|
|
.listItemImage .itemProgressBar {
|
|
position: absolute;
|
|
margin: 8%;
|
|
}
|
|
|
|
.layout-mobile .listItemImage .itemProgressBar {
|
|
position: absolute;
|
|
justify-self: center;
|
|
margin-bottom: 5%;
|
|
}
|
|
|
|
.itemProgressBar:not(.backgroundProgress):not(.playbackProgress):not(.transcodingProgress) {
|
|
backdrop-filter: var(--blurLarge);
|
|
background-color: var(--osdSeekBarBufferedColorAlpha) !important;
|
|
height: .35em;
|
|
overflow: hidden;
|
|
border-radius: var(--largeRadius);
|
|
}
|
|
|
|
.layout-mobile .itemProgressBar:not(.backgroundProgress, .playbackProgress, .transcodingProgress) {
|
|
width: calc(100% - 2em);
|
|
}
|
|
|
|
.layout-mobile .backdropCard .itemProgressBar:not(.backgroundProgress, .playbackProgress, .transcodingProgress),
|
|
.layout-mobile .portraitCard .itemProgressBar:not(.backgroundProgress, .playbackProgress, .transcodingProgress) {
|
|
width: 100%;
|
|
width: -webkit-fill-available;
|
|
}
|
|
|
|
.itemProgressBarForeground {
|
|
border-radius: 0 var(--largeRadius) var(--largeRadius) 0;
|
|
background-color: var(--dimTextColor);
|
|
}
|
|
|
|
.backgroundProgress>div,
|
|
.backgroundProgress {
|
|
background-color: var(--darkerGradientPoint);
|
|
}
|
|
|
|
.playbackProgress>div {
|
|
background-color: var(--uiAccentColor);
|
|
}
|
|
|
|
::-moz-progress-bar {
|
|
background: var(--uiAccentColor) !important;
|
|
border-radius: var(--smallRadius) inherit var(--smallRadius) 0;
|
|
}
|
|
|
|
::-webkit-progress-value {
|
|
background: var(--uiAccentColor) !important;
|
|
border-radius: var(--smallRadius) inherit var(--smallRadius) 0;
|
|
}
|
|
|
|
progress,
|
|
::-webkit-progress-bar {
|
|
background: var(--darkerGradientPoint) !important;
|
|
border: var(--defaultBorder) !important;
|
|
border-radius: var(--smallRadius);
|
|
overflow: hidden;
|
|
}
|
|
|
|
progress+span {
|
|
color: var(--uiAccentColor) !important;
|
|
}
|
|
|
|
.mdl-spinner__circle {
|
|
border-color: var(--textColor);
|
|
border-style: inset;
|
|
border-width: .25em;
|
|
}
|
|
|
|
.mdl-slider-container {
|
|
height: 1em;
|
|
}
|
|
|
|
.mdl-slider {
|
|
height: unset;
|
|
}
|
|
|
|
.mdl-slider-background-flex-container {
|
|
padding: 0;
|
|
}
|
|
|
|
/* this is the osd player slider */
|
|
.mdl-slider-background-flex {
|
|
border-radius: var(--smallRadius);
|
|
height: .4em;
|
|
margin-top: -.2em;
|
|
background: var(--osdSeekBarBufferedColorAlpha);
|
|
transition: .2s linear;
|
|
}
|
|
|
|
.sliderContainer:active .mdl-slider-background-flex {
|
|
height: .6em;
|
|
margin-top: -.3em;
|
|
}
|
|
|
|
.mdl-slider-background-lower {
|
|
background-color: var(--osdSeekBarPlayedColor);
|
|
}
|
|
|
|
.mdl-slider-background-upper {
|
|
background-color: var(--osdSeekBarBufferedColorAlpha);
|
|
}
|
|
|
|
.mdl-slider::-webkit-slider-thumb {
|
|
background: var(--osdSeekBarThumbColor);
|
|
width: 4px !important;
|
|
height: .4em !important;
|
|
border-radius: 0em;
|
|
}
|
|
|
|
.sliderContainer:hover .mdl-slider::-webkit-slider-thumb {
|
|
width: .2em !important;
|
|
height: .8em !important;
|
|
border-radius: .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;
|
|
transform: scale(1) scaleY(1.25);
|
|
}
|
|
|
|
.mdl-slider::-moz-range-thumb {
|
|
background: var(--osdSeekBarThumbColor);
|
|
}
|
|
|
|
.sliderMarkerContainer {
|
|
margin: 0 .1em;
|
|
}
|
|
|
|
.sliderMarker.watched {
|
|
background-color: var(--osdSeekBarPlayedColor);
|
|
}
|
|
|
|
.sliderMarker {
|
|
height: 4px;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.iconOsdProgressInner {
|
|
background: var(--osdSeekBarPlayedColor);
|
|
}
|
|
|
|
.selectLabel {
|
|
max-height: 2em;
|
|
}
|
|
|
|
.button-link {
|
|
color: rgb(200, 200, 200);
|
|
}
|
|
|
|
.button-link:hover {
|
|
color: unset !important;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.button-link:active {
|
|
color: rgb(243, 243, 243) !important;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.mainDrawer,
|
|
.drawer-open {
|
|
background-color: var(--drawerColor);
|
|
border-right: var(--defaultBorder);
|
|
backdrop-filter: var(--blurLarge);
|
|
}
|
|
|
|
.mainDrawer-scrollContainer {
|
|
padding-bottom: 5vh;
|
|
}
|
|
|
|
.btnHeaderSave.button-flat {
|
|
color: var(--uiAccentColor) !important;
|
|
gap: .3em;
|
|
border-radius: var(--smallRadius);
|
|
}
|
|
|
|
.button-flat:hover {
|
|
color: unset;
|
|
}
|
|
|
|
.button-flat:active {
|
|
color: unset;
|
|
background-color: rgba(255, 255, 255, .2);
|
|
}
|
|
|
|
.playstatebutton-icon-played {
|
|
color: rgb(34, 197, 94);
|
|
}
|
|
|
|
.videoOsdBottom.videoOsdBottom-maincontrols .btnPause {
|
|
font-size: 2em;
|
|
}
|
|
|
|
.nowPlayingBar .playPauseButton {
|
|
font-size: 2em;
|
|
}
|
|
|
|
.nowPlayingInfoContainer .btnPlayPause {
|
|
font-size: 3em;
|
|
}
|
|
|
|
.osdControls {
|
|
display: flex;
|
|
flex-direction: column-reverse;
|
|
}
|
|
|
|
.itemDetailsGroup {
|
|
outline: none;
|
|
overflow: hidden;
|
|
margin-top: 1em;
|
|
border: var(--defaultBorder);
|
|
border-radius: var(--smallRadius);
|
|
background-color: var(--lighterGradientPointAlpha);
|
|
}
|
|
|
|
@supports(display:revert) {
|
|
.itemDetailsGroup {
|
|
outline: var(--defaultBorder);
|
|
outline-offset: calc(-1 * var(--borderWidth));
|
|
border: none;
|
|
}
|
|
|
|
/* this somehow fixes border overflow on mobile */
|
|
.layout-mobile .itemDetailsGroup {
|
|
outline-offset: calc(-1 * var(--borderWidthDouble));
|
|
}
|
|
}
|
|
|
|
.itemDetailsGroup>div:not(:last-child) {
|
|
border-bottom: var(--defaultBorder);
|
|
}
|
|
|
|
.detailsGroupItem {
|
|
margin: 0 !important;
|
|
justify-content: space-between;
|
|
padding: .5em .9em;
|
|
align-items: baseline;
|
|
}
|
|
|
|
.detailsGroupItem>.label {
|
|
font-weight: 600;
|
|
flex-basis: 6em;
|
|
}
|
|
|
|
.detailsGroupItem>.content>a {
|
|
font-weight: 400;
|
|
text-align: end;
|
|
}
|
|
|
|
.detailsGroupItem>.content {
|
|
text-align: end;
|
|
color: var(--dimTextColor);
|
|
}
|
|
|
|
.detailsGroupItem>.label {
|
|
color: var(--textColor);
|
|
}
|
|
|
|
.itemExternalLinks {
|
|
color: var(--textColor);
|
|
}
|
|
|
|
.itemExternalLinks.focuscontainer-x {
|
|
color: transparent;
|
|
}
|
|
|
|
.itemExternalLinks.focuscontainer-x>.button-link {
|
|
color: var(--textColor);
|
|
background-color: var(--selectorBackgroundColor);
|
|
padding: .125em .5em;
|
|
border-radius: var(--smallerRadius);
|
|
margin-bottom: .5em;
|
|
}
|
|
|
|
.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 {
|
|
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 {
|
|
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 {
|
|
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 {
|
|
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 {
|
|
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 {
|
|
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 {
|
|
background-color: rgb(186, 71, 143) !important;
|
|
color: var(--textColor) !important;
|
|
}
|
|
|
|
.itemTags,
|
|
.itemTags>a {
|
|
display: none;
|
|
font-size: unset !important;
|
|
font-weight: 200;
|
|
}
|
|
|
|
.detail-clamp-text {
|
|
text-align: start;
|
|
color: var(--dimTextColor);
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
-webkit-line-clamp: 2;
|
|
}
|
|
|
|
.detail-clamp-text p {
|
|
margin-top: .25em;
|
|
margin-bottom: .25em;
|
|
}
|
|
|
|
.layout-mobile .detail-clamp-text {
|
|
-webkit-line-clamp: 4;
|
|
}
|
|
|
|
.overview-expand.emby-button {
|
|
padding: 0;
|
|
margin-top: 1.4em;
|
|
margin-bottom: 1.4em;
|
|
color: transparent;
|
|
}
|
|
|
|
.overview-expand.emby-button:after {
|
|
content: "\e313";
|
|
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;
|
|
color: var(--textColor);
|
|
}
|
|
|
|
.overview.detail-clamp-text~.overview-controls .overview-expand:after {
|
|
transform: rotateZ(0deg);
|
|
}
|
|
|
|
.overview:not(.detail-clamp-text)~.overview-controls .overview-expand:after {
|
|
transform: rotateZ(180deg);
|
|
}
|
|
|
|
.overview-controls {
|
|
height: 0;
|
|
}
|
|
|
|
.detailSectionContent:has(.itemExternalLinks.hide) .overview-controls {
|
|
height: 1em;
|
|
}
|
|
|
|
#seriesAirTime {
|
|
margin-top: .5em;
|
|
}
|
|
|
|
.itemMiscInfo {
|
|
align-items: flex-end !important;
|
|
justify-content: center;
|
|
}
|
|
|
|
.innerCardFooter,
|
|
.chapterThumbTextContainer {
|
|
background: var(--cardFooterGradient);
|
|
text-shadow: .1em .1em 0px black;
|
|
width: -webkit-fill-available;
|
|
height: -webkit-fill-available;
|
|
padding: 0em 2em 2em 2em;
|
|
align-content: end;
|
|
display: grid;
|
|
}
|
|
|
|
.chapterCardImageContainer {
|
|
background-size: 135%;
|
|
}
|
|
|
|
.chapterCardImageContainer+.innerCardFooter {
|
|
padding: 0em 1em 1em 1em;
|
|
height: auto;
|
|
}
|
|
|
|
.layout-mobile .innerCardFooter {
|
|
padding: 5em 1.5em 1.5em 1.5em;
|
|
}
|
|
|
|
.layout-mobile .chapterCardImageContainer+.innerCardFooter {
|
|
padding: 0em .5em .5em .5em;
|
|
}
|
|
|
|
.centerMessage {
|
|
width: unset;
|
|
}
|
|
|
|
.dialog {
|
|
backdrop-filter: var(--blurDefault);
|
|
background-color: var(--drawerColor);
|
|
min-width: 11em;
|
|
}
|
|
|
|
[dir=ltr] .emby-collapsible-button {
|
|
padding-left: 1em;
|
|
}
|
|
|
|
.dialog:not(.dialog-fullscreen) {
|
|
border-radius: var(--largeRadius) !important;
|
|
border: var(--defaultBorder);
|
|
}
|
|
|
|
@media (max-width: 80em),
|
|
(max-height: 45em) {
|
|
|
|
.dialog.dialog-fixedSize,
|
|
.dialog.dialog-fullscreen-lowres {
|
|
border-radius: unset !important;
|
|
border: unset;
|
|
}
|
|
|
|
body:has(.dialog.dialog-fixedSize.opened,
|
|
.dialog.dialog-fullscreen-lowres.opened) {
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
|
|
.dialogBackdropOpened {
|
|
opacity: .66;
|
|
}
|
|
|
|
.subtitleEditor-dropZone,
|
|
.imageEditor-dropZone,
|
|
.lyricsEditor-dropZone {
|
|
border-radius: var(--largeRadius);
|
|
}
|
|
|
|
.formDialogHeaderTitle {
|
|
margin-inline-start: 0 !important;
|
|
margin-inline-end: 0 !important;
|
|
text-align: center;
|
|
padding: 0 .5em !important;
|
|
}
|
|
|
|
.formDialogFooter:not(.formDialogFooter-clear.formDialogFooter-flex)>.formDialogFooterItem {
|
|
-webkit-flex-basis: 6em;
|
|
flex-basis: 6em;
|
|
}
|
|
|
|
.collapseContent {
|
|
background-color: unset !important;
|
|
backdrop-filter: unset !important;
|
|
}
|
|
|
|
.selectionCommandsPanel {
|
|
background: var(--lighterGradientPoint);
|
|
border-bottom: var(--defaultBorder);
|
|
backdrop-filter: var(--blurLarge);
|
|
}
|
|
|
|
.selectionCommandsPanel>h1 {
|
|
font-size: large;
|
|
}
|
|
|
|
.itemSelectionPanel {
|
|
border: unset;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.emby-checkbox:checked+span+.checkboxOutline {
|
|
border-radius: var(--smallerRadius) !important;
|
|
box-shadow: inset 0em 7em 10em 20px rgba(0, 0, 0, .8);
|
|
background: transparent;
|
|
border-color: white;
|
|
border-style: solid;
|
|
border-width: var(--borderWidthDouble);
|
|
outline: none;
|
|
}
|
|
|
|
@supports(display:revert) {
|
|
.emby-checkbox:checked+span+.checkboxOutline {
|
|
outline: solid var(--borderWidth) white;
|
|
}
|
|
}
|
|
|
|
.checkboxOutline {
|
|
top: unset;
|
|
height: 1.3em;
|
|
width: 1.3em;
|
|
border-radius: var(--smallerRadius);
|
|
}
|
|
|
|
.itemSelectionPanel .material-icons.check:before {
|
|
font-size: 4em;
|
|
color: #ffffff;
|
|
padding: .25em;
|
|
}
|
|
|
|
.cardText-first+.itemSelectionPanel>.checkboxContainer {
|
|
height: calc(100% - 1.75em);
|
|
}
|
|
|
|
.overflowBackdropCard .cardText-first+.itemSelectionPanel>.checkboxContainer {
|
|
height: calc(100% - 0em);
|
|
}
|
|
|
|
.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 {
|
|
border-radius: 50% !important;
|
|
}
|
|
|
|
.cardPadder {
|
|
text-align: center;
|
|
}
|
|
|
|
#castCollapsible .cardPadder .cardImageIcon,
|
|
#guestCastContent .cardPadder .cardImageIcon {
|
|
display: none;
|
|
}
|
|
|
|
.cardText-secondary+.itemSelectionPanel>.checkboxContainer,
|
|
.cardText.cardTextCentered:not(.cardText-secondary, .cardText-first)+.itemSelectionPanel>.checkboxContainer {
|
|
height: calc(100% - 3em);
|
|
}
|
|
|
|
.cardFooter+.itemSelectionPanel>.checkboxContainer,
|
|
.cardScalable+.itemSelectionPanel>.checkboxContainer {
|
|
height: calc(100% - 0em);
|
|
}
|
|
|
|
.checkboxOutline.multiSelectCheckboxOutline {
|
|
border-radius: var(--largeRadius);
|
|
border-width: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.checkboxOutline:not(.multiSelectCheckboxOutline) .checkboxIcon {
|
|
font-size: .9em;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.checkboxOutline:not(.multiSelectCheckboxOutline) {
|
|
border: solid gray var(--borderWidth);
|
|
background-color: white;
|
|
transition: all .125s;
|
|
}
|
|
|
|
.emby-checkbox:checked+span+.checkboxOutline:not(.multiSelectCheckboxOutline) {
|
|
box-shadow: none;
|
|
background: var(--checkboxCheckedBgColor);
|
|
border: var(--defaultLighterBorder);
|
|
}
|
|
|
|
.emby-checkbox:focus:not(:checked)+span+.checkboxOutline {
|
|
border-color: var(--highlightOutlineColor) !important;
|
|
outline: none;
|
|
}
|
|
|
|
.emby-checkbox:focus+span+.checkboxOutline {
|
|
border-color: var(--highlightOutlineColor) !important;
|
|
outline: none;
|
|
}
|
|
|
|
@supports(display:revert) {
|
|
.emby-checkbox:focus:not(:checked)+span+.checkboxOutline {
|
|
outline: var(--borderWidth) solid gray;
|
|
outline-offset: calc(-2.5*var(--borderWidth));
|
|
}
|
|
|
|
.emby-checkbox:focus+span+.checkboxOutline {
|
|
border-color: white !important;
|
|
outline: var(--borderWidth) solid var(--highlightOutlineColor);
|
|
}
|
|
}
|
|
|
|
.layout-tv .emby-checkbox:focus+span+.checkboxOutline {
|
|
transform: scale(1.75);
|
|
}
|
|
|
|
.cardIndicators {
|
|
-webkit-align-items: center;
|
|
align-items: center;
|
|
top: .5em;
|
|
}
|
|
|
|
[dir=ltr] .cardIndicators {
|
|
right: .5em;
|
|
}
|
|
|
|
.layout-mobile .cardIndicators {
|
|
top: .2em;
|
|
right: .2em;
|
|
}
|
|
|
|
.indicator {
|
|
border: solid rgb(124 124 124 / 50%) var(--borderWidth);
|
|
border-radius: 100em;
|
|
}
|
|
|
|
.playedIndicator {
|
|
background: rgb(34, 197, 94);
|
|
border: var(--defaultLighterBorder);
|
|
}
|
|
|
|
.videoIndicator {
|
|
background: rgb(41 41 41);
|
|
padding: .5em;
|
|
transform: scale(.85);
|
|
border: var(--defaultLighterBorder);
|
|
font-size: .75em;
|
|
}
|
|
|
|
.videoIndicator:has(.photo_album),
|
|
.videoIndicator:has(.folder) {
|
|
background: peru;
|
|
}
|
|
|
|
.videoIndicator:has(.photo) {
|
|
background: steelblue;
|
|
}
|
|
|
|
.videoIndicator:has(.videocam) {
|
|
background: indianred;
|
|
}
|
|
|
|
.defaultCardBackground,
|
|
.cardScalable {
|
|
background: var(--cardBackgroundGradient);
|
|
}
|
|
|
|
div[data-type="Book"] .play_arrow:before {
|
|
content: "\f1c6";
|
|
font-size: 85%;
|
|
}
|
|
|
|
div[data-type="Photo"] .play_arrow:before {
|
|
content: "\e5d0";
|
|
}
|
|
|
|
div[data-type="PhotoAlbum"] .play_arrow:before {
|
|
content: "\e8eb";
|
|
}
|
|
|
|
.emby-button.block,
|
|
.button-alt,
|
|
.raised,
|
|
#btnDeleteImage,
|
|
.manageRecordingButton,
|
|
.dashboardActionsContainer>.emby-button {
|
|
color: #fff;
|
|
border-radius: var(--smallRadius);
|
|
background: var(--lighterGradientPoint);
|
|
border: var(--defaultBorder);
|
|
transition: all .125s;
|
|
}
|
|
|
|
.editItemMetadataForm>.metadataFormFields div:has(.formDialogFooterItem) {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.btnBrowse>.folder {
|
|
margin-inline-end: .5em;
|
|
}
|
|
|
|
.fab {
|
|
color: #fff;
|
|
background: var(--lighterGradientPoint);
|
|
border: var(--defaultBorder);
|
|
}
|
|
|
|
.fab:focus {
|
|
background: var(--lighterGradientPoint) !important;
|
|
filter: brightness(1.2);
|
|
}
|
|
|
|
.raised:focus {
|
|
background: inherit;
|
|
filter: brightness(1.2);
|
|
}
|
|
|
|
.raised:active,
|
|
.fab:active,
|
|
.emby-button:active {
|
|
filter: brightness(1.2) !important;
|
|
transform: scale(0.98);
|
|
}
|
|
|
|
.detailButton {
|
|
border: var(--defaultLighterBorder);
|
|
padding: .5em .5em !important;
|
|
}
|
|
|
|
.detailButton-icon {
|
|
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;
|
|
transform: scale(1.25);
|
|
}
|
|
|
|
.emby-button[title="Favorite"] .material-icons.favorite:before {
|
|
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;
|
|
border-radius: 50%;
|
|
padding: .6em !important;
|
|
background: transparent;
|
|
}
|
|
|
|
.layout-desktop .detailButton:not(.btnPlay):hover {
|
|
color: black;
|
|
background: var(--dimTextColor);
|
|
}
|
|
|
|
.detailButton:active {
|
|
color: black;
|
|
background: var(--textColor);
|
|
}
|
|
|
|
.btnPlay.detailButton {
|
|
background-color: var(--textColor);
|
|
color: black;
|
|
border-radius: 3em;
|
|
border-color: var(--borderColor);
|
|
height: 3em;
|
|
min-width: 10em;
|
|
margin-right: .5em !important;
|
|
}
|
|
|
|
.btnPlay>.detailButton-content {
|
|
-webkit-align-items: unset;
|
|
align-items: unset;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
-webkit-flex-direction: unset;
|
|
flex-direction: unset;
|
|
-webkit-justify-content: unset;
|
|
align-content: unset;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.mainDetailButtons:has(.detailButton[data-type="Book"]) .btnPlay[title="Play"]>.detailButton-content::after {
|
|
content: "Read";
|
|
}
|
|
|
|
.mainDetailButtons:has(.detailButton[data-type="Book"]) .btnPlay .material-icons.play_arrow:before {
|
|
content: "\f1c6";
|
|
padding-inline-end: 1ch;
|
|
}
|
|
|
|
.btnPlay[title="Play"]>.detailButton-content::after {
|
|
content: "Play";
|
|
}
|
|
|
|
.btnPlay[title="Resume"]>.detailButton-content::after {
|
|
content: "Resume";
|
|
}
|
|
|
|
.btnPlay>.detailButton-content::after {
|
|
padding: 0 1ch;
|
|
place-content: center;
|
|
}
|
|
|
|
.mainDetailButtons {
|
|
justify-content: center;
|
|
margin: 0 0 1em 0;
|
|
}
|
|
|
|
.layout-mobile [dir=ltr] .mainDetailButtons {
|
|
flex-wrap: wrap;
|
|
padding: 0 1.25em;
|
|
}
|
|
|
|
@media (min-width: 100em) {
|
|
.mainDetailButtons {
|
|
font-size: unset;
|
|
margin: 0 0 1em 0;
|
|
}
|
|
}
|
|
|
|
.localnav>.emby-button {
|
|
background: var(--lighterGradientPoint) !important;
|
|
color: #fff;
|
|
padding: .8em .8em;
|
|
}
|
|
|
|
div[data-role=controlgroup] a.ui-btn-active {
|
|
background: var(--selectorBackgroundColor) !important;
|
|
color: #fff !important;
|
|
}
|
|
|
|
.guide-date-tab-button.emby-tab-button-active,
|
|
.guide-date-tab-button:focus {
|
|
color: white;
|
|
}
|
|
|
|
#btnDeleteImage,
|
|
.button-delete,
|
|
.btnRevoke,
|
|
#btnShutdown {
|
|
background: var(--btnDeleteColor);
|
|
border: solid var(--btnDeleteBorderColor) var(--borderWidth);
|
|
}
|
|
|
|
.button-submit {
|
|
background: var(--btnSubmitColor) !important;
|
|
border: solid var(--btnSubmitBorderColor) var(--borderWidth) !important;
|
|
}
|
|
|
|
.collapseContent,
|
|
.formDialogFooter:not(.formDialogFooter-clear),
|
|
.formDialogHeader:not(.formDialogHeader-clear) {
|
|
background-color: var(--headerColor);
|
|
backdrop-filter: var(--blurDefault);
|
|
}
|
|
|
|
.paperList {
|
|
padding: .4em;
|
|
}
|
|
|
|
.serverInfo {
|
|
padding: 1em;
|
|
}
|
|
|
|
.serverInfo>:nth-child(1n) {
|
|
-webkit-flex: 1 0 30%;
|
|
flex: 1 0 30%;
|
|
}
|
|
|
|
.serverInfo>:nth-child(2n) {
|
|
-webkit-flex: 1 0 50%;
|
|
flex: 1 0 50%;
|
|
text-align: end;
|
|
}
|
|
|
|
.listItemIcon:not(.listItemIcon-transparent) {
|
|
background-color: var(--lighterGradientPoint) !important;
|
|
}
|
|
|
|
.listItemIcon.notification_important {
|
|
background-color: var(--btnDeleteColor) !important;
|
|
border: solid var(--btnDeleteBorderColor) var(--borderWidth);
|
|
}
|
|
|
|
.listItemIcon.notifications:not(.listItemIcon-transparent),
|
|
.listItemIcon.schedule:not(.listItemIcon-transparent),
|
|
.listItemIcon.person:not(.listItemIcon-transparent),
|
|
.listItemIcon.live_tv:not(.listItemIcon-transparent) {
|
|
background-color: rgb(41, 49, 83) !important;
|
|
border: var(--defaultBorder);
|
|
}
|
|
|
|
.readOnlyContent {
|
|
flex-direction: column !important;
|
|
}
|
|
|
|
.MuiAppBar-root {
|
|
background: var(--headerColor);
|
|
backdrop-filter: var(--blurDefault);
|
|
border-bottom: var(--defaultBorder);
|
|
}
|
|
|
|
.MuiDrawer-paper {
|
|
background: var(--drawerColor);
|
|
backdrop-filter: var(--blurLarge);
|
|
border-right: var(--defaultBorder);
|
|
padding: .25em;
|
|
}
|
|
|
|
.listItemImage {
|
|
border-radius: var(--smallRadius);
|
|
margin-right: .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):not(:last-child) {
|
|
margin-bottom: .5em;
|
|
}
|
|
|
|
[dir="ltr"] .listItem:not(.actionSheetMenuItem)[data-type="Episode"] {
|
|
padding: .375em;
|
|
margin-bottom: .5em;
|
|
}
|
|
|
|
.layout-mobile #songsTab .listItem[data-type="Audio"],
|
|
.layout-mobile #playlist .listItem[data-type="Audio"] {
|
|
margin: auto 1em;
|
|
}
|
|
|
|
.listItem[data-type="Audio"]:has(.playlistIndexIndicatorImage) .listItemBodyText {
|
|
color: white;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.listItem[data-type="Audio"]:has(.playlistIndexIndicatorImage):not(:hover) {
|
|
background-color: rgba(255, 255, 255, .07);
|
|
}
|
|
|
|
[dir="ltr"] .listItem:not(.actionSheetMenuItem)[data-type="Episode"] .listItemBodyText:not(.secondary) {
|
|
font-size: 1.17em;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.listItemBody>.listItemBodyText:not(.secondary) {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 3;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
color: var(--textColor);
|
|
}
|
|
|
|
.listItem-overview {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 4;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.listItem-bottomoverview,
|
|
[dir="ltr"] .listItem:not(.actionSheetMenuItem)[data-type="Episode"] .listItem-overview p {
|
|
margin-top: .75em;
|
|
margin-bottom: 0em;
|
|
}
|
|
|
|
.listItem,
|
|
.navMenuOption {
|
|
border-radius: .7em;
|
|
}
|
|
|
|
.listItem:hover,
|
|
.navMenuOption:hover {
|
|
background: unset;
|
|
border-radius: .7em;
|
|
}
|
|
|
|
.listItem:focus {
|
|
background: var(--highlightOutlineColor);
|
|
}
|
|
|
|
.listItem:active,
|
|
.navMenuOption:active {
|
|
background: rgba(255, 255, 255, .125);
|
|
}
|
|
|
|
.listItem-border {
|
|
border-color: transparent !important;
|
|
}
|
|
|
|
.listItem-border.emby-button.show-focus:focus {
|
|
border-radius: var(--smallRadius);
|
|
}
|
|
|
|
.MuiListItem-root>a,
|
|
.MuiList-root>a,
|
|
.MuiListItem-root>div {
|
|
border: solid transparent var(--borderWidth);
|
|
border-radius: .7em;
|
|
margin: .25 .5em !important;
|
|
}
|
|
|
|
.Mui-selected {
|
|
background-color: var(--activeColor) !important;
|
|
}
|
|
|
|
.actionsheetDivider {
|
|
height: 2px;
|
|
background: rgb(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.actionsheet-xlargeFont {
|
|
line-height: normal;
|
|
}
|
|
|
|
.actionSheetContent {
|
|
padding: .4em !important;
|
|
}
|
|
|
|
.actionSheetContent>h1 {
|
|
font-size: unset;
|
|
}
|
|
|
|
[dir=ltr] .actionsheetMenuItemIcon.check {
|
|
margin: 0 .45em 0 .45em !important;
|
|
}
|
|
|
|
.actionSheetMenuItem:has(.listItemIcon.check) {
|
|
background-color: var(--activeColor);
|
|
}
|
|
|
|
.actionSheetMenuItem:has(.listItemIcon.check) .listItemBodyText {
|
|
color: white;
|
|
}
|
|
|
|
.actionSheetMenuItem:has(.listItemIcon.check) .listItemIcon.check {
|
|
display: none;
|
|
}
|
|
|
|
.actionSheetMenuItem:has(.listItemIcon.check[style*="hidden"]) {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.actionSheetMenuItem:has(.listItemIcon.check[style*="hidden"]):active {
|
|
background-color: rgba(255, 255, 255, .125);
|
|
}
|
|
|
|
.navMenuOption {
|
|
border-radius: var(--smallRadius) !important;
|
|
margin: 0em 1em !important;
|
|
}
|
|
|
|
[dir=ltr] .navMenuOption {
|
|
padding: .75em 1em !important;
|
|
margin-bottom: unset;
|
|
}
|
|
|
|
#myPreferencesMenuPage .listItemIcon {
|
|
margin-left: .5em;
|
|
margin-right: .25em;
|
|
}
|
|
|
|
.navMenuOption-selected {
|
|
background-color: var(--activeColor) !important;
|
|
}
|
|
|
|
#itemDetailPage .detailSection {
|
|
display: grid;
|
|
row-gap: 1em;
|
|
column-gap: 3em;
|
|
max-width: unset !important;
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
|
|
.layout-mobile .detailSection {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.detailPageContent {
|
|
gap: 1em;
|
|
}
|
|
|
|
.detailImageContainer .card {
|
|
position: inherit !important;
|
|
}
|
|
|
|
.trackSelections {
|
|
order: 3;
|
|
max-width: unset !important;
|
|
margin-top: 1em;
|
|
border: var(--defaultBorder);
|
|
border-radius: var(--smallRadius);
|
|
padding: 1em;
|
|
grid-column: 2;
|
|
background-color: var(--lighterGradientPointAlpha);
|
|
}
|
|
|
|
.recordingFields {
|
|
order: 4;
|
|
}
|
|
|
|
.detailsGroupItem,
|
|
.trackSelections .selectContainer {
|
|
max-width: unset !important;
|
|
align-items: baseline;
|
|
}
|
|
|
|
.selectArrowContainer {
|
|
top: 0em;
|
|
opacity: .5;
|
|
}
|
|
|
|
.trackSelectionFieldContainer>.selectArrowContainer {
|
|
top: .5em;
|
|
}
|
|
|
|
.trackSelectionFieldContainer>label {
|
|
max-width: 2.75em;
|
|
background-repeat: no-repeat;
|
|
color: transparent;
|
|
transform: scale(.9);
|
|
}
|
|
|
|
.selectVideoContainer.trackSelectionFieldContainer>label {
|
|
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="%23d1d5db" viewBox="0 0 24 24"><g stroke-width="1.5"><path d="M2 12c0-4.7 0-7 1.5-8.5C4.9 2 7.3 2 12 2s7 0 8.5 1.5C22 4.9 22 7.3 22 12s0 7-1.5 8.5C19.1 22 16.7 22 12 22s-7 0-8.5-1.5C2 19.1 2 16.7 2 12Z"/><path stroke-linecap="round" d="M17 2.5v19M7 2.5v19M2.5 7H7m14.5 0H17M2.5 17H7m14.5 0H17M2 12h20"/></g></svg>');
|
|
}
|
|
|
|
.selectAudioContainer.trackSelectionFieldContainer>label {
|
|
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="%23d1d5db" viewBox="0 0 24 24"><g stroke-width="1.5"><path d="M9 19a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM21 17a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM9 19V8M21 17V6"/><path stroke-linecap="round" d="m15.7 3.8-4 1.3c-1.3.4-2 .6-2.3 1.2C9 6.8 9 7.5 9 8.9V12l12-4v-.5c0-2.5 0-3.7-.8-4.3-.9-.6-2-.2-4.5.6Z"/></g></svg>');
|
|
}
|
|
|
|
.selectSubtitlesContainer.trackSelectionFieldContainer>label {
|
|
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="%23d1d5db" viewBox="0 0 24 24"><g stroke-width="1.5"><path d="M2 12c0-3.8 0-5.7 1.2-6.8C4.3 4 6.2 4 10 4h4c3.8 0 5.7 0 6.8 1.2C22 6.3 22 8.2 22 12s0 5.7-1.2 6.8C19.7 20 17.8 20 14 20h-4c-3.8 0-5.7 0-6.8-1.2C2 17.7 2 15.8 2 12Z"/><path stroke-linecap="round" d="M10 16H6M14 13h4M14 16h-1.5M9.5 13h2M18 16h-1.5M6 13h1"/></g></svg>')
|
|
}
|
|
|
|
.selectSourceContainer.trackSelectionFieldContainer>label {
|
|
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23d1d5db" d="m15.4 4.05-.5.56.5-.56Zm3.95 3.57-.5.55.5-.55Zm2.3 2.53-.68.3.68-.3ZM3.17 20.83l.53-.53-.53.53Zm17.66 0-.53-.53.53.53Zm-6.83.42h-4v1.5h4v-1.5ZM2.75 14v-4h-1.5v4h1.5Zm18.5-.44V14h1.5v-.44h-1.5Zm-6.36-8.95 3.96 3.56 1-1.11L15.9 3.5l-1 1.11Zm7.86 8.95c0-1.69.02-2.75-.41-3.71l-1.37.6c.26.6.28 1.3.28 3.11h1.5Zm-3.9-5.39c1.35 1.22 1.85 1.7 2.12 2.29l1.37-.61c-.43-.96-1.23-1.66-2.49-2.8l-1 1.12Zm-8.82-5.42c1.58 0 2.18.01 2.71.22l.54-1.4c-.85-.33-1.78-.32-3.25-.32v1.5Zm5.86.75c-1.08-.98-1.76-1.6-2.61-1.93l-.54 1.4c.53.2.98.59 2.15 1.64l1-1.11ZM10 21.25c-1.9 0-3.26 0-4.29-.14-1-.13-1.58-.39-2-.81l-1.07 1.06c.75.75 1.7 1.08 2.87 1.24 1.15.15 2.63.15 4.49.15v-1.5ZM1.25 14c0 1.86 0 3.34.15 4.49a4.71 4.71 0 0 0 1.24 2.87L3.7 20.3c-.42-.43-.67-1-.81-2.01A36 36 0 0 1 2.75 14h-1.5ZM14 22.75c1.86 0 3.34 0 4.49-.15a4.71 4.71 0 0 0 2.87-1.24L20.3 20.3c-.43.42-1 .68-2.01.81-1.03.14-2.38.14-4.29.14v1.5ZM21.25 14c0 1.9 0 3.26-.14 4.29-.13 1-.39 1.58-.81 2l1.06 1.07a4.71 4.71 0 0 0 1.24-2.87c.15-1.15.15-2.63.15-4.49h-1.5Zm-18.5-4c0-1.9 0-3.26.14-4.29.14-1 .39-1.58.81-2L2.64 2.63A4.71 4.71 0 0 0 1.4 5.51c-.15 1.15-.15 2.63-.15 4.49h1.5Zm7.28-8.75c-1.87 0-3.36 0-4.51.15a4.72 4.72 0 0 0-2.88 1.24L3.7 3.7c.42-.42 1-.67 2.02-.81 1.03-.14 2.4-.14 4.31-.14v-1.5Z"/><path stroke="%23d1d5db" stroke-width="1.5" d="M13 2.5V5c0 2.36 0 3.54.73 4.27.73.73 1.91.73 4.27.73h4"/></svg>');
|
|
}
|
|
|
|
.detailSectionContent {
|
|
order: 1;
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
.detailSectionContent a:not(.overview-expand) {
|
|
text-align: start;
|
|
}
|
|
|
|
.layout-desktop .detailSectionContent {
|
|
align-content: end;
|
|
min-height: 15vh;
|
|
}
|
|
|
|
.itemDetailsGroup {
|
|
order: 2;
|
|
grid-column: 1;
|
|
}
|
|
|
|
.trackSelections.hide~.recordingFields.hide~.itemDetailsGroup {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
.layout-mobile .trackSelections,
|
|
.layout-mobile .detailSectionContent,
|
|
.layout-mobile .itemDetailsGroup,
|
|
.layout-tv .trackSelections,
|
|
.layout-tv .detailSectionContent,
|
|
.layout-tv .itemDetailsGroup {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
.sliderBubble {
|
|
border-radius: var(--largeRadius);
|
|
border: var(--defaultBorder);
|
|
overflow: hidden;
|
|
z-index: 3;
|
|
}
|
|
|
|
.alphaPickerButton {
|
|
font-family: monospace;
|
|
margin: .15em;
|
|
color: rgba(255, 255, 255, .25);
|
|
}
|
|
|
|
.alphaPickerButton-selected {
|
|
color: rgba(255, 255, 255, 1);
|
|
}
|
|
|
|
.alphaPicker-vertical {
|
|
height: 70%;
|
|
}
|
|
|
|
.alphaPicker {
|
|
justify-content: center;
|
|
}
|
|
|
|
.alphaPickerButton-tv {
|
|
transition: transform .2s;
|
|
}
|
|
|
|
.alphaPickerButton-tv:focus {
|
|
background-color: var(--highlightOutlineColor);
|
|
transform: scale(1.75);
|
|
}
|
|
|
|
.padded-right {
|
|
padding-right: var(--sidePadding) !important;
|
|
}
|
|
|
|
.paddded-left {
|
|
padding-left: var(--sidePadding) !important;
|
|
}
|
|
|
|
.layout-mobile .padded-right-withalphapicker {
|
|
padding-left: 4.5%;
|
|
padding-right: 6.5%;
|
|
}
|
|
|
|
.detailPagePrimaryContent.padded-right {
|
|
padding-right: 0 !important;
|
|
}
|
|
|
|
[dir=ltr] .detailPageContent,
|
|
.content-primary {
|
|
padding-left: var(--sidePadding) !important;
|
|
padding-right: var(--sidePadding) !important;
|
|
}
|
|
|
|
/* this removes right padding from cast page sections to place cards evenly*/
|
|
#itemDetailPage .verticalSection .itemsContainer.padded-right {
|
|
padding-right: 0 !important;
|
|
}
|
|
|
|
.listPaging>span {
|
|
padding: 0 .5em;
|
|
}
|
|
|
|
.layout-mobile #myPreferencesMenuPage {
|
|
padding-top: 3.75em !important;
|
|
}
|
|
|
|
.headerUserButton {
|
|
width: 2em;
|
|
height: 2em;
|
|
margin-inline-end: 1em;
|
|
border: var(--defaultBorder);
|
|
}
|
|
|
|
.MuiAvatar-circular {
|
|
width: 1.5em;
|
|
height: 1.5em;
|
|
border: var(--defaultBorder);
|
|
}
|
|
|
|
.dashboardDocument .content-primary {
|
|
padding-top: 4.25rem;
|
|
}
|
|
|
|
.editorNode {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.metadataSidebarIcon {
|
|
color: #6c7bab;
|
|
}
|
|
|
|
.jstree-default .jstree-wholerow-clicked {
|
|
background: var(--selectorBackgroundColor) !important;
|
|
}
|
|
|
|
.sectionTitleTextButton {
|
|
padding: 0 .5em;
|
|
}
|
|
|
|
.sectionTitleTextButton:hover {
|
|
background: transparent !important;
|
|
}
|
|
|
|
.sectionTitleTextButton:active {
|
|
color: white !important;
|
|
}
|
|
|
|
.sectionTitleTextButton>* {
|
|
padding: .3em 0 !important;
|
|
margin: 0 0 !important;
|
|
}
|
|
|
|
.dashboardSection .sectionTitleTextButton>.material-icons,
|
|
.sectionTitleTextButton>.material-icons,
|
|
.dashboardSection .sectionTitleTextButton>.material-icons.material-icons {
|
|
font-size: unset;
|
|
}
|
|
|
|
.sectionTitleTextButton>.material-icons::before {
|
|
display: none;
|
|
}
|
|
|
|
.sectionTitleTextButton>.material-icons.chevron_right {
|
|
margin-left: .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-size: contain;
|
|
/* Stops miscalculating the size on hover effect */
|
|
}
|
|
|
|
.toast {
|
|
border-radius: var(--smallRadius);
|
|
}
|
|
|
|
.upNextContainer {
|
|
border-radius: var(--largeRadius);
|
|
color: var(--textColor);
|
|
}
|
|
|
|
[dir=ltr] .upNextContainer {
|
|
margin: 2em;
|
|
box-sizing: border-box;
|
|
max-width: 80vw;
|
|
}
|
|
|
|
.upNextContainer .btnStartNow {
|
|
background-color: var(--btnSubmitColor);
|
|
border-color: var(--btnSubmitBorderColor);
|
|
}
|
|
|
|
.upNextDialog-title {
|
|
white-space: pre-wrap;
|
|
width: unset;
|
|
}
|
|
|
|
.upNextDialog-buttons {
|
|
width: unset;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.upNextContainer .upNextDialog-countdownText {
|
|
color: white;
|
|
}
|
|
|
|
.skip-button {
|
|
background-color: whitesmoke;
|
|
box-shadow: var(--shadow);
|
|
bottom: 25%;
|
|
right: var(--sidePadding);
|
|
}
|
|
|
|
/* this workaround allows the skip button get focused correctly on TVs using remote navigation*/
|
|
/* issue: back button can no longer be focused correctly when this button is focused,
|
|
but that is a non-issue because users can use the back button on their remotes */
|
|
.layout-tv .skip-button {
|
|
right: unset;
|
|
left: var(--sidePadding);
|
|
}
|
|
|
|
.skip-button:hover {
|
|
background-color: white;
|
|
}
|
|
|
|
.skip-button:active {
|
|
background-color: rgba(245, 245, 245, .7);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.toast,
|
|
.upNextContainer {
|
|
background: var(--headerColor) !important;
|
|
border: var(--defaultBorder) !important;
|
|
backdrop-filter: var(--blurDefault);
|
|
}
|
|
|
|
.activeSession {
|
|
width: 98% !important;
|
|
}
|
|
|
|
.emby-tab-button:hover {
|
|
color: whitesmoke;
|
|
|
|
}
|
|
|
|
@media (hover: hover) and (pointer: fine) {
|
|
.paper-icon-button-light:hover:not(:disabled) {
|
|
color: #fff;
|
|
background-color: rgb(255 255 255 / 5%);
|
|
}
|
|
|
|
.actionSheetMenuItem.emby-button:has(.listItemIcon.material-icons.check[style*="hidden"]):hover {
|
|
background-color: rgba(255, 255, 255, .125);
|
|
}
|
|
|
|
.emby-select-withcolor:hover:not(.emby-select[disabled], :focus),
|
|
.emby-input:hover:not(:focus),
|
|
.emby-textarea:hover:not(:focus) {
|
|
border-color: var(--dimTextColor) !important;
|
|
}
|
|
|
|
.checkboxContainer:hover .checkboxOutline:not(.multiSelectCheckboxOutline) {
|
|
border-color: var(--checkboxCheckedBgColor);
|
|
border-width: var(--borderWidthDouble);
|
|
}
|
|
|
|
.button-flat:hover {
|
|
background-color: rgba(255, 255, 255, .2);
|
|
color: white;
|
|
}
|
|
|
|
.btnPlay.detailButton:hover {
|
|
background-color: var(--textColor);
|
|
color: black;
|
|
}
|
|
|
|
.alphaPickerButton:hover {
|
|
color: rgba(255, 255, 255, 1);
|
|
}
|
|
|
|
.listItem:hover {
|
|
background: rgba(255, 255, 255, .125);
|
|
backdrop-filter: var(--blurLargest);
|
|
}
|
|
|
|
.navMenuOption:hover {
|
|
background: rgba(255, 255, 255, .125);
|
|
}
|
|
|
|
.searchfields-icon:hover,
|
|
.inputContainer .emby-input-iconbutton:hover {
|
|
color: rgba(255, 255, 255, .8);
|
|
}
|
|
|
|
#scenesContent .cardScalable:hover {
|
|
border-color: var(--dimTextColor) !important;
|
|
}
|
|
|
|
.sectionTitleTextButton:hover {
|
|
background: transparent !important;
|
|
color: white !important;
|
|
}
|
|
|
|
.button-link:hover {
|
|
color: rgb(243, 243, 243) !important;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
.paper-icon-button-light:active:not(:disabled) {
|
|
color: #fff;
|
|
background-color: rgb(255 255 255 / 5%);
|
|
}
|
|
|
|
.emby-textarea {
|
|
font-family: consolas, monaco, monospace;
|
|
}
|
|
|
|
.emby-select-withcolor,
|
|
.emby-select,
|
|
.emby-input,
|
|
.emby-textarea {
|
|
background-color: var(--selectorBackgroundColor);
|
|
border: var(--defaultLighterBorder);
|
|
border-radius: var(--smallRadius);
|
|
padding: .5em !important;
|
|
}
|
|
|
|
.inputLabelFocused,
|
|
.selectLabelFocused,
|
|
.textareaLabelFocused {
|
|
color: #fff;
|
|
}
|
|
|
|
.emby-select-withcolor:focus,
|
|
.emby-input:focus,
|
|
.emby-textarea:focus {
|
|
border-color: var(--highlightOutlineColor) !important;
|
|
outline: none !important;
|
|
}
|
|
|
|
@supports (display:revert) {
|
|
|
|
.emby-select-withcolor:focus,
|
|
.emby-input:focus,
|
|
.emby-textarea:focus {
|
|
border-color: var(--highlightOutlineColor) !important;
|
|
outline: thin solid var(--highlightOutlineColor) !important;
|
|
}
|
|
}
|
|
|
|
.emby-select-withcolor>option {
|
|
color: inherit;
|
|
background-color: var(--selectorBackgroundColor);
|
|
}
|
|
|
|
.inputContainer .emby-input-iconbutton {
|
|
color: rgba(255, 255, 255, .5);
|
|
margin-left: -2.5em;
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
.searchfields-txtSearch {
|
|
padding: .75em 1.5em !important;
|
|
border-radius: 4em;
|
|
}
|
|
|
|
.searchfields-icon {
|
|
padding: .25em;
|
|
margin-left: -1.75em;
|
|
margin-bottom: 0;
|
|
border-radius: var(--largeRadius);
|
|
color: rgba(255, 255, 255, .5);
|
|
}
|
|
|
|
.searchfields-icon:active,
|
|
.inputContainer .emby-input-iconbutton:active {
|
|
color: rgba(255, 255, 255, .8);
|
|
}
|
|
|
|
.searchFields>.searchFieldsInner {
|
|
flex-direction: row-reverse;
|
|
}
|
|
|
|
.infoWrapper h1.itemName,
|
|
.infoWrapper h1.parentName {
|
|
font-size: 4em;
|
|
white-space: pre-wrap;
|
|
padding-bottom: .5ch;
|
|
color: white;
|
|
}
|
|
|
|
.infoWrapper h1.itemName,
|
|
.infoWrapper h1.parentName,
|
|
.infoWrapper h1.itemName a,
|
|
.infoWrapper h1.parentName a {
|
|
font-weight: 200;
|
|
}
|
|
|
|
.infoWrapper h1.itemName bdi,
|
|
.infoWrapper h1.parentName bdi,
|
|
.infoWrapper h1.itemName a,
|
|
.infoWrapper h1.parentName a {
|
|
/* overflow: hidden; */
|
|
display: -webkit-box !important;
|
|
-webkit-line-clamp: 3;
|
|
line-clamp: 3;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
|
|
.layout-mobile .infoWrapper h1.itemName,
|
|
.layout-mobile .infoWrapper h1.parentName,
|
|
.layout-mobile .infoWrapper h1.parentNameLast {
|
|
font-size: 2em;
|
|
word-wrap: break-word;
|
|
padding-bottom: 0ch;
|
|
}
|
|
|
|
.itemName.originalTitle {
|
|
padding-top: .25em;
|
|
padding-bottom: .25em;
|
|
color: var(--dimTextColor);
|
|
}
|
|
|
|
.channelPrograms+.channelPrograms,
|
|
.guide-channelHeaderCell+.guide-channelHeaderCell {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.channelPrograms,
|
|
.guide-channelHeaderCell,
|
|
.programCell {
|
|
border-color: transparent;
|
|
/* this disables the 'color coded backgrounds' */
|
|
background-color: transparent !important;
|
|
border-radius: var(--smallRadius);
|
|
}
|
|
|
|
.guideProgramName {
|
|
background-color: rgba(255, 255, 255, .05);
|
|
height: -webkit-fill-available;
|
|
margin: .35em 0 .35em .7em;
|
|
border-radius: var(--smallerRadius);
|
|
}
|
|
|
|
.guide-programNameCaret {
|
|
display: none;
|
|
}
|
|
|
|
.programCell-active .guideProgramName {
|
|
background-color: rgba(255, 255, 255, .125);
|
|
}
|
|
|
|
.guideVerticalScroller {
|
|
padding: 0;
|
|
}
|
|
|
|
.guideChannelImage {
|
|
background-color: rgba(255, 255, 255, .05);
|
|
bottom: .35em;
|
|
right: .35em;
|
|
top: .35em;
|
|
width: calc(100% - .7em);
|
|
border-radius: var(--smallerRadius);
|
|
}
|
|
|
|
#guideTab {
|
|
padding-top: 3em !important;
|
|
}
|
|
|
|
.guide-channelHeaderCell:focus,
|
|
.programCell:focus {
|
|
background-color: var(--highlightOutlineColor) !important;
|
|
}
|
|
|
|
.emby-select-iconbutton {
|
|
background-color: var(--selectorBackgroundColor);
|
|
border: var(--defaultLighterBorder);
|
|
border-radius: var(--smallRadius);
|
|
margin-inline-start: 1em;
|
|
}
|
|
|
|
.subtitleappearance-preview {
|
|
border-radius: var(--smallRadius);
|
|
}
|
|
|
|
.infoBanner {
|
|
display: flex;
|
|
place-content: center;
|
|
background-color: var(--headerColor) !important;
|
|
border-radius: var(--largeRadius) !important;
|
|
border: var(--defaultBorder) !important;
|
|
}
|
|
|
|
.sliderBubbleText {
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
fieldset {
|
|
border-radius: var(--smallRadius);
|
|
border: var(--defaultBorder);
|
|
}
|
|
|
|
table:not(.MuiTable-root.MuiTable-stickyHeader) {
|
|
border-color: var(--borderColor) !important;
|
|
border-radius: var(--smallRadius);
|
|
border-spacing: 1px;
|
|
border: var(--defaultBorder);
|
|
background: var(--tableBodyColor);
|
|
border-collapse: separate;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.detailTableHeaderCell {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
#serverActivityPage .MuiPaper-elevation2 {
|
|
border: var(--defaultBorder) !important;
|
|
box-shadow: unset !important;
|
|
}
|
|
|
|
#serverActivityPage .MuiPaper-elevation2,
|
|
#serverActivityPage .MuiPaper-elevation2>.MuiBox-root,
|
|
#serverActivityPage .MuiTableRow-root.MuiTableRow-head {
|
|
background-color: var(--tableBodyColor);
|
|
}
|
|
|
|
.detailTableBodyRow-shaded:nth-child(odd),
|
|
#serverActivityPage .MuiTableBody-root .MuiTableRow-root:nth-child(odd) {
|
|
background: var(--darkerGradientPointAlpha) !important;
|
|
}
|
|
|
|
.detailTableBodyRow-shaded:nth-child(even),
|
|
#serverActivityPage .MuiTableBody-root .MuiTableRow-root:nth-child(even) {
|
|
background: var(--lighterGradientPointAlpha) !important;
|
|
}
|
|
|
|
|
|
.MuiList-root.MuiMenu-list {
|
|
background-color: var(--drawerColor);
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
.playerStats,
|
|
.iconOsd {
|
|
border-radius: var(--largeRadius);
|
|
background-color: rgba(69, 69, 69, .69);
|
|
backdrop-filter: var(--blurDefault);
|
|
}
|
|
|
|
.playerStats-stats {
|
|
max-height: 50vh;
|
|
flex-wrap: wrap;
|
|
overflow-x: auto;
|
|
padding: 1em !important;
|
|
}
|
|
|
|
#scenesContent .cardScalable:active {
|
|
border-color: var(--dimTextColor) !important;
|
|
}
|
|
|
|
.progressring-spiner {
|
|
border-color: var(--uiAccentColor);
|
|
}
|
|
|
|
.skinHeader.focuscontainer-x.skinHeader-withBackground.skinHeader-blurred.semiTransparent.noHeaderRight {
|
|
display: none;
|
|
}
|
|
|
|
#loginPage {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
min-height: 100vh;
|
|
padding: 1em;
|
|
overflow-y: auto;
|
|
background: linear-gradient(to bottom, var(--darkerGradientPointAlpha), var(--lighterGradientPoint)), var(--loginPageBgUrl);
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
#loginPage .padded-left.padded-right.padded-bottom-page {
|
|
width: 28em;
|
|
background: rgba(30, 40, 54, .7);
|
|
padding: 2em 2em 1em 2em !important;
|
|
border-radius: var(--largerRadius);
|
|
backdrop-filter: var(--blurDefault);
|
|
box-sizing: border-box;
|
|
transform: translateY(3em);
|
|
}
|
|
|
|
.manualLoginForm .sectionTitle,
|
|
.visualLoginForm>h1 {
|
|
display: none;
|
|
}
|
|
|
|
#loginPage .padded-left.padded-right.padded-bottom-page:has(.visualLoginForm:not(.hide)) {
|
|
width: 40em;
|
|
}
|
|
|
|
#divUsers .squareCard {
|
|
width: 30% !important;
|
|
}
|
|
|
|
.layout-mobile #divUsers .squareCard {
|
|
width: 45% !important;
|
|
}
|
|
|
|
.manualLoginForm::before,
|
|
.visualLoginForm::before {
|
|
content: var(--loginPageText);
|
|
position: relative;
|
|
display: block;
|
|
top: -3.5em;
|
|
margin-bottom: -1em;
|
|
font-size: 1.875em;
|
|
font-weight: 800;
|
|
color: white;
|
|
text-align: center;
|
|
}
|
|
|
|
.manualLoginForm,
|
|
.visualLoginForm {
|
|
position: relative;
|
|
}
|
|
|
|
#quickConnectPreferencesPage .padded-left.padded-right.padded-bottom-page {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
#txtLoginDisclaimer {
|
|
resize: none;
|
|
}
|
|
|
|
.startTimeText,
|
|
.endTimeText,
|
|
.positionTime,
|
|
.runtime {
|
|
width: 4.5em;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.startTimeText {
|
|
margin: 0 !important;
|
|
}
|
|
|
|
.endTimeText {
|
|
justify-content: right;
|
|
padding-inline-end: .8em;
|
|
margin: 0 0 0 .75em !important;
|
|
}
|
|
|
|
.startTimeText,
|
|
.endTimeText {
|
|
padding-top: .25em;
|
|
}
|
|
|
|
.startTimeText,
|
|
.positionTime {
|
|
text-align: start;
|
|
justify-content: left;
|
|
}
|
|
|
|
.endTimeText,
|
|
.runtime {
|
|
text-align: end;
|
|
justify-content: right;
|
|
}
|
|
|
|
.filterIndicator {
|
|
background: var(--activeColor);
|
|
}
|
|
|
|
#homeTab .overflowBackdropCard[data-isfolder="true"] .cardPadder-overflowBackdrop {
|
|
padding-bottom: 50%;
|
|
}
|
|
|
|
#homeTab .overflowBackdropCard[data-isfolder="true"] .cardText-first,
|
|
#homeTab .overflowBackdropCard[data-isfolder="true"] .cardText.cardTextCentered {
|
|
display: var(--libraryLabelVisibility);
|
|
}
|
|
|
|
.nowPlayingButtonsContainer {
|
|
margin-top: 1em;
|
|
}
|
|
|
|
.nowPlayingPageImageContainerNoAlbum {
|
|
border: var(--defaultBorder);
|
|
border-radius: var(--smallRadius);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.nowPlayingPageImageContainerNoAlbum .defaultCardBackground {
|
|
background: repeating-radial-gradient(black, transparent 10em);
|
|
}
|
|
|
|
.nowPlayingPageImageContainerNoAlbum .cardImageContainer .cardImageIcon {
|
|
color: var(--borderColor);
|
|
}
|
|
|
|
.layout-mobile .playlistSection .playlist {
|
|
padding: 4.3em 0;
|
|
top: 0;
|
|
bottom: 4.3em;
|
|
background: var(--headerColor);
|
|
backdrop-filter: var(--blurLargest);
|
|
z-index: 0;
|
|
}
|
|
|
|
.layout-mobile .playlistSectionButton {
|
|
background: var(--drawerColor);
|
|
border-top: var(--defaultBorder);
|
|
backdrop-filter: var(--blurSmallest);
|
|
z-index: 1;
|
|
}
|
|
|
|
.layout-mobile .playlistSectionButton.playlistSectionButtonTransparent {
|
|
background: transparent;
|
|
border-top: var(--defaultBorder);
|
|
border-color: transparent;
|
|
}
|
|
|
|
.layout-desktop .nowPlayingInfoContainer {
|
|
position: -webkit-sticky;
|
|
position: sticky;
|
|
top: 5em;
|
|
padding: 1em;
|
|
margin-bottom: 2em;
|
|
backdrop-filter: var(--blurLargest);
|
|
border: var(--defaultLighterBorder);
|
|
z-index: 2;
|
|
background-color: var(--headerColor);
|
|
box-shadow: var(--shadow);
|
|
border-radius: var(--largerRadius);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.layout-desktop .nowPlayingInfoControls {
|
|
margin: 0em 2em;
|
|
}
|
|
|
|
.nowPlayingPageImage {
|
|
box-shadow: var(--shadow);
|
|
border-radius: var(--smallRadius);
|
|
object-fit: cover;
|
|
aspect-ratio: 1 / 1;
|
|
}
|
|
|
|
.nowPlayingBar .nowPlayingImage {
|
|
background-size: cover;
|
|
border-radius: var(--smallerRadius);
|
|
height: 3.5em;
|
|
margin: .25em;
|
|
width: 3.5em;
|
|
}
|
|
|
|
.nowPlayingBarPositionContainer {
|
|
top: -0.7em;
|
|
}
|
|
|
|
@media (orientation: portrait) and (max-width: 43em) {
|
|
.nowPlayingPageImageContainerNoAlbum .cardImageContainer .cardImageIcon {
|
|
font-size: 8em !important;
|
|
}
|
|
|
|
.nowPlayingInfoContainer {
|
|
height: calc(95% - 4.2em);
|
|
}
|
|
}
|
|
|
|
.nowPlayingSongName.nowPlayingEpisode {
|
|
margin-bottom: 1em;
|
|
font-size: 1.25em;
|
|
color: var(--textColor);
|
|
}
|
|
|
|
.nowPlayingAlbum.nowPlayingSeason {
|
|
color: var(--dimTextColor);
|
|
margin-bottom: .5em;
|
|
}
|
|
|
|
.nowPlayingArtist.nowPlayingSerie {
|
|
margin-bottom: .5em;
|
|
}
|
|
|
|
.playlistIndexIndicatorImage {
|
|
background-blend-mode: difference;
|
|
background-color: var(--textColor);
|
|
background-size: contain !important;
|
|
}
|
|
|
|
.playlistIndexIndicatorImage.defaultCardBackground .audiotrack {
|
|
display: none;
|
|
}
|
|
|
|
#dialogToc {
|
|
background-color: rgba(0, 0, 0, .5);
|
|
max-height: unset;
|
|
max-width: unset;
|
|
}
|
|
|
|
#dialogToc .toc li {
|
|
font-size: unset;
|
|
font-weight: 600;
|
|
list-style-type: circle;
|
|
margin-bottom: .5em;
|
|
font-family: "Math", serif;
|
|
}
|
|
|
|
.MuiTabs-indicator {
|
|
display: none;
|
|
}
|
|
|
|
.MuiTabs-root>.MuiTabs-scroller {
|
|
align-content: center;
|
|
}
|
|
|
|
.MuiTabs-flexContainer>.MuiButtonBase-root {
|
|
border-radius: var(--largeRadius);
|
|
min-height: 40px;
|
|
min-width: 72px;
|
|
}
|
|
|
|
.MuiTabs-flexContainer>.MuiButtonBase-root.Mui-selected {
|
|
color: white;
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
.MuiToggleButtonGroup-grouped.Mui-selected {
|
|
color: white;
|
|
}
|
|
|
|
.MuiButtonBase-root.MuiIconButton-root:hover {
|
|
color: white;
|
|
background-color: transparent;
|
|
}
|
|
|
|
#viewPanel .ui-panel-inner {
|
|
margin-top: 4em;
|
|
}
|
|
|
|
.videoOsdBottom.videoOsdBottom-maincontrols {
|
|
background: var(--bottomOSDGradient);
|
|
}
|
|
|
|
.skinHeader-withBackground.osdHeader {
|
|
background: var(--topOSDGradient);
|
|
}
|
|
|
|
.headroom {
|
|
transition: transform .5s;
|
|
}
|
|
|
|
/* this is the default header, visible in home and libraries */
|
|
.skinHeader-blurred:not(.osdHeader) {
|
|
backdrop-filter: none;
|
|
background-color: transparent;
|
|
border: none;
|
|
background: var(--headerBackground);
|
|
padding-top: .75em;
|
|
}
|
|
|
|
.layout-mobile .skinHeader-blurred:not(.osdHeader) {
|
|
padding-top: .25em;
|
|
}
|
|
|
|
.layout-mobile .withSectionTabs .headerTop {
|
|
padding-bottom: 1.45em;
|
|
}
|
|
|
|
.skinHeader-blurred:not(.osdHeader):not(.semiTransparent)::after {
|
|
content: var(--headerBlurLayerVisibility);
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
backdrop-filter: var(--blurLargest);
|
|
-webkit-mask: var(--headerBlurMask);
|
|
mask: var(--headerBlurMask);
|
|
z-index: -1;
|
|
}
|
|
|
|
.headerTabs.sectionTabs {
|
|
margin: 0;
|
|
height: 6em;
|
|
}
|
|
|
|
/* this is the transparent header, visible in main media page */
|
|
.skinHeader-withBackground.semiTransparent {
|
|
--headerBackground: none;
|
|
backdrop-filter: none;
|
|
background-color: transparent;
|
|
border: none;
|
|
}
|
|
|
|
.skinHeader.headroom:not(.osdHeader, .noHomeButtonHeader):has(.pageTitle:empty)::after,
|
|
.skinHeader.headroom:not(.osdHeader, .noHomeButtonHeader):has(.pageTitle:empty) {
|
|
--headerBackground: none;
|
|
backdrop-filter: none;
|
|
background-color: transparent;
|
|
border: none;
|
|
}
|
|
|
|
.skinHeader-withBackground.semiTransparent .headerButton,
|
|
.skinHeader.headroom:not(.osdHeader, .noHomeButtonHeader):has(.pageTitle:empty) .headerButton {
|
|
text-shadow: 1px 1px 0 #00000080;
|
|
}
|
|
|
|
/* this keeps the header elements aligned when its height is modified */
|
|
.headerTop {
|
|
-webkit-align-items: flex-end;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
/* this prevents the section tabs from hiding all the way up */
|
|
.headroom--unpinned {
|
|
-webkit-transform: translateY(-3.7em);
|
|
transform: translateY(-3.7em);
|
|
}
|
|
|
|
.noHomeButtonHeader .emby-tab-button[data-index="1"]:before {
|
|
content: "\e87d";
|
|
}
|
|
|
|
.noHomeButtonHeader .emby-tab-button[data-index="0"]:before {
|
|
content: "\e88a";
|
|
}
|
|
|
|
.noHomeButtonHeader .emby-tab-button:before {
|
|
font-family: 'Material Icons Round';
|
|
padding-inline-end: .5ch;
|
|
font-size: 1.2em;
|
|
font-variation-settings: 'FILL' 0;
|
|
}
|
|
|
|
.layout-tv .sectionTabs .emby-tabs.smoothScrollX {
|
|
overflow: visible !important;
|
|
}
|
|
|
|
.layout-tv .sectionTabs {
|
|
/* this prevents the section tabs from being off-center in the music library
|
|
after I set the overflow to visible to fix visual glitches */
|
|
width: 100%;
|
|
}
|
|
|
|
.headerTabs.sectionTabs .emby-tab-button {
|
|
display: inline-flex;
|
|
margin: .25em .5em;
|
|
padding: 0 1.25em;
|
|
height: 2.5em;
|
|
color: var(--textColor);
|
|
font-weight: 400;
|
|
border-radius: var(--largeRadius);
|
|
background-color: var(--darkerGradientPointAlpha);
|
|
}
|
|
|
|
.headerTabs.sectionTabs .emby-tab-button-active {
|
|
margin: .25em .5em;
|
|
color: black;
|
|
background-color: var(--textColor);
|
|
}
|
|
|
|
.layout-mobile .headerTabs.sectionTabs .emby-tab-button:first-child {
|
|
margin-left: var(--sidePadding);
|
|
}
|
|
|
|
.layout-mobile .headerTabs.sectionTabs .emby-tab-button:last-child {
|
|
margin-right: var(--sidePadding);
|
|
}
|
|
|
|
@media (min-width: 75em) {
|
|
|
|
.layout-desktop .sectionTabs,
|
|
.layout-mobile .sectionTabs {
|
|
-webkit-align-items: center;
|
|
align-items: center;
|
|
-webkit-align-self: center;
|
|
align-self: center;
|
|
-webkit-justify-content: center;
|
|
justify-content: center;
|
|
margin-top: -3em;
|
|
position: relative;
|
|
width: auto;
|
|
}
|
|
|
|
.libraryPage:not(.noSecondaryNavPage):not(.layout-tv .libraryPage) {
|
|
padding-top: 6.8em !important;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 100em) {
|
|
.sectionTabs {
|
|
font-size: 100%;
|
|
}
|
|
}
|
|
|
|
.libraryPage:not(.noSecondaryNavPage) {
|
|
padding-top: 9.5em !important;
|
|
}
|
|
|
|
.layout-tv .headerLeft {
|
|
overflow: unset;
|
|
margin: .25em .5em;
|
|
}
|
|
|
|
.remoteControlContent {
|
|
padding: 0 var(--sidePadding) !important;
|
|
}
|
|
|
|
/* Uncomment this to bring back the original ElegantFin header design - start */
|
|
|
|
/* .skinHeader-blurred:not(.osdHeader):not(.semiTransparent) {
|
|
backdrop-filter: var(--blurLarge);
|
|
background: var(--headerColor);
|
|
border: var(--defaultBorder);
|
|
border-width: 0 0 var(--borderWidth) 0;
|
|
}
|
|
|
|
.skinHeader-blurred:not(.osdHeader):not(.semiTransparent)::after {
|
|
content: none;
|
|
}
|
|
|
|
.headerTabs.sectionTabs {
|
|
height: 4em;
|
|
} */
|
|
|
|
/* Uncomment this to bring back the original ElegantFin header design - end */ |