From 518a3931359033873b9c95b34468f16ed7ec14d5 Mon Sep 17 00:00:00 2001 From: lscambo13 Date: Fri, 20 Dec 2024 10:08:39 -0800 Subject: [PATCH] RELEASE: ElegantFin v24.12.20 --- ...n-jellyfin-theme-build-latest-minified.css | 4 +- Theme/ElegantFin-theme-v24.12.20.css | 1009 +++++++++++++++++ 2 files changed, 1011 insertions(+), 2 deletions(-) create mode 100644 Theme/ElegantFin-theme-v24.12.20.css diff --git a/Theme/ElegantFin-jellyfin-theme-build-latest-minified.css b/Theme/ElegantFin-jellyfin-theme-build-latest-minified.css index a65e68c..ebaf2ae 100644 --- a/Theme/ElegantFin-jellyfin-theme-build-latest-minified.css +++ b/Theme/ElegantFin-jellyfin-theme-build-latest-minified.css @@ -1,2 +1,2 @@ -/* ElegantFin Theme v24.12.11 for Jellyfin by lscambo13 */ -@import url("https://cdn.jsdelivr.net/gh/prayag17/Jellyfin-Icons/round.css");:root{--darkerGradientPoint:#111827;--lighterGradientPoint:#1d2635;--borderColor:rgba(75,85,99,.9);--headerColor:rgba(30,40,54,.8);--drawerColor:rgba(30,40,54,.9);--lighterBorderColor:rgb(255 255 255 / 20%);--selectorBackgroundColor:rgb(55,65,81);--btnSubmitColor:rgb(61,54,178);--btnSubmitBorderColor:rgb(117 111 226);--checkboxCheckedBgColor:rgb(79,70,229);--backgroundGradient:linear-gradient(0deg,var(--darkerGradientPoint) 35%,var(--lighterGradientPoint));--cardBackgroundGradient:linear-gradient(0deg,var(--darkerGradientPoint),var(--lighterGradientPoint) 25%);--hoverGradient:linear-gradient(130deg,rgb(255 255 255 / 20%) 20%,rgb(255 255 255 / 10%) 40%);}html{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;}.dashboardFooter::after{content:"ElegantFin v24.12.11";font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;font-size:.6em;opacity:.5;}.itemsContainer,.vertical-list{}.card{margin:.375em;}[dir=ltr] .itemsContainer>.card>.cardBox{margin-left:auto;margin-right:auto;}.vertical-wrap{justify-content:flex-start!important;}.countIndicator,.fullSyncIndicator,.mediaSourceIndicator{background:rgb(31,80,189);border:var(--lighterBorderColor) solid 1px;}.playedIndicator{background:rgb(34,197,94);border:var(--lighterBorderColor) solid 1px;}.cardScalable{border-radius:1em;border:var(--borderColor) solid 1px!important;overflow:hidden!important;transition:125ms transform;}.card:hover .cardScalable{}.cardImageContainer{border-radius:1em!important}.cardOverlayContainer{border-radius:1em!important;border:solid rgb(255 255 255 / 65%) .1em;mix-blend-mode:plus-lighter;background:var(--hoverGradient);}.cardBox:not(.visualCardBox) .cardPadder{background-color:var(--lighterGradientPoint);border-radius:1em;}.cardOverlayContainer>.cardOverlayFab-primary{display:none;}@media (min-width:31.25em){.portraitCard,.smallBackdropCard,.squareCard{width:30%!important}}@media (min-width:43.75em){.portraitCard,.squareCard{width:23%!important}}@media (min-width:50em){.portraitCard,.squareCard{width:23%!important}}@media (min-width:25em){.backdropCard{width:49%}}@media (min-width:48.125em){.backdropCard{width:32%}}.detailLogo{display:none;}h1{font-size:3em;}.detailPagePrimaryContainer{align-content:space-between;align-items:stretch;justify-content:end;flex-direction:column;}.portraitCard{min-width:5em;width:30%;max-width:15em;}.headerHomeButton,.cardOverlayButton{display:none;}.skinHeader.noHomeButtonHeader .headerSyncButton{display:none;}.skinHeader:not(.noHomeButtonHeader) .headerSyncButton{}.skinHeader:not(.noHomeButtonHeader) .headerSearchButton{}.pageTitle{height:1.5em;}.paper-icon-button-light>.material-icons{font-size:1.25em;}.detailRibbon{background-color:transparent;}.detailPageWrapperContainer{padding-top:30vh;background:linear-gradient(0deg,var(--darkerGradientPoint) 85%,transparent);margin-top:-40vh;}@media (orientation:portrait) and (max-width:40em){.layout-mobile .itemBackdrop{height:40vh;opacity:.35}}.itemBackdrop{height:45vh;}h2{font-size:1.25em;}h1,h2{font-weight:600;}.tagline{font-size:1.3em;font-style:italic;font-weight:400;margin-bottom:0;}.nowPlayingPlaylist,.nowPlayingContextMenu,html{background:var(--backgroundGradient)}.backgroundContainer:not(.withBackdrop){background:var(--backgroundGradient)}.backgroundContainer.withBackdrop{opacity:.9375;background:var(--backgroundGradient)}.skinHeader-blurred:not(.osdHeader){background-color:var(--headerColor)!important;backdrop-filter:blur(5px)!important;}.headroom--unpinned{-webkit-transform:translateY(-3.5em);transform:translateY(-3.5em);}.skinHeader:not(.osdHeader){border-style:solid;border-width:0 0 1px 0;border-color:var(--borderColor);transition:all .375s ease-in-out;}.itemProgressBar{background-color:rgb(123 123 123 / 30%)!important;height:.2em;overflow:hidden;border-radius:1em;}.itemProgressBarForeground{border-radius:1em;background-color:rgb(214 144 255 / 65%)}.selectLabel{max-height:2em;}.layout-mobile .mainDetailButtons{margin-top:2em;}.emby-select-withcolor,.emby-select,.emby-input,.emby-textarea{background-color:var(--selectorBackgroundColor);border:var(--lighterBorderColor) solid 1px;border-radius:.5em;padding:.5em!important;}.searchfields-txtSearch{border-radius:4em;}.btnPlay{background-color:rgba(255,255,255,.05);border:solid var(--lighterBorderColor) 1px;}.searchfields-icon{padding:.125em;margin-right:.25em;margin-bottom:0;border-radius:1em;background-color:rgba(255,255,255,.05);border:solid var(--lighterBorderColor) 1px;}.btnPlay>.detailButton-content{-webkit-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;}.btnPlay>.detailButton-content::after{padding-left:.25em;content:"Play";}.mainDrawer,.drawer-open{background-color:var(--drawerColor);border-right:solid var(--borderColor) 1px;backdrop-filter:blur(8px);}.mediaInfoOfficialRating{border-radius:.5em;font-size:66%;margin:0 1em .25em 0!important;padding:0 .5em;background:transparent!important;border:solid 1px var(--borderColor);}.detailButton{border-radius:.5em;border:solid var(--lighterBorderColor) 1px;padding:.5em .5em!important;margin:.125em!important;}.button-flat:hover{color:unset;background-color:rgba(255,255,255,.2);}.playstatebutton-icon-played{color:rgb(34,197,94);}.itemDetailsGroup{border:solid var(--borderColor) 1px;margin-top:1.5em;border-radius:.5em}.itemDetailsGroup>div:not(:last-child){border-bottom:solid var(--borderColor) 1px;}.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;}.genresGroup,.directorsGroup,.writersGroup{}.itemTags,.itemTags>a{display:none;font-size:unset!important;font-weight:200;}.detail-clamp-text{text-align:start;}.itemMiscInfo{align-items:flex-end!important;}.innerCardFooter,.chapterThumbTextContainer{background:transparent;font-weight:500;text-shadow:1px 1px 0 black;padding:1em;width:auto;}.centerMessage{width:unset;}.dialogContainer{margin:.33em;}.dialog{backdrop-filter:blur(5px);background-color:var(--drawerColor);border-radius:1em!important;border:solid var(--borderColor) 1px;}.dialogBackdropOpened{opacity:.66;}.actionSheetContent>h1{font-size:unset;}.collapseContent{background-color:unset!important;backdrop-filter:unset!important;}.selectionCommandsPanel{background:var(--lighterGradientPoint);border-bottom:solid var(--borderColor) 1px;backdrop-filter:blur(10px);}.selectionCommandsPanel>h1{font-size:large;}.itemSelectionPanel{border:unset;background-color:transparent;}.emby-checkbox:checked+span+.checkboxOutline{border-radius:.375em!important;box-shadow:inset 0 7em 10em 20px rgba(0,0,0,.8);background:transparent;border-color:white;border-style:groove;border-width:2px;}.checkboxOutline{top:unset;height:1.3em;width:1.3em;border-radius:.375em;}.itemSelectionPanel .material-icons.check:before{font-size:4em;color:#ffffff;padding:.25em;}.cardText-first+.itemSelectionPanel>.checkboxContainer{height:calc(100% - 1.75em);}.cardText-first+.itemSelectionPanel>.checkboxContainer>.emby-checkbox:checked+span+.checkboxOutline{border-radius:1em!important;}.cardText-secondary+.itemSelectionPanel>.checkboxContainer>.emby-checkbox:checked+span+.checkboxOutline{border-radius:1em!important;}.cardText-secondary+.itemSelectionPanel>.checkboxContainer{height:calc(100% - 3.125em);}.cardScalable+.itemSelectionPanel>.checkboxContainer>.emby-checkbox:checked+span+.checkboxOutline{border-radius:1em!important;}.cardScalable+.itemSelectionPanel>.checkboxContainer{height:calc(100% - 0);}.checkboxOutline.multiSelectCheckboxOutline{border-radius:1em;border-width:0;width:100%;height:100%;}.cardIndicators{-webkit-align-items:center;top:.2em;}.indicator{border:solid rgb(124 124 124 / 50%) 1px;border-radius:100em;}.defaultCardBackground,.cardScalable{background:var(--cardBackgroundGradient)!important;}.listItemImage{border-radius:.5em;}.emby-button.block,.button-alt,.raised,#btnDeleteImage,.dashboardActionsContainer>.emby-button{color:#fff;border-radius:.5em;background:var(--lighterGradientPoint);border:solid var(--borderColor) 1px;}.fab{color:#fff;background:var(--lighterGradientPoint);border:solid var(--borderColor) 1px;}.raised:focus{background:var(--lighterGradientPoint);filter:brightness(1.25);}.raised:hover,.emby-button:hover{filter:brightness(1.2)!important;}.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;}#btnDeleteImage,.button-delete{background:rgb(169,29,29);border:solid rgb(217,84,84) 1px;}.button-submit{background:var(--btnSubmitColor)!important;border:solid var(--btnSubmitBorderColor) 1px!important;}.collapseContent,.formDialogFooter:not(.formDialogFooter-clear),.formDialogHeader:not(.formDialogHeader-clear){background-color:var(--headerColor);backdrop-filter:blur(5px);}.visualCardBox,.paperList{background-color:var(--headerColor)!important;border-radius:1em!important;border:solid var(--borderColor) 1px!important;box-shadow:unset!important}.paperList{padding:.4em;}.serverInfo{padding:1em;}.serverInfo>:nth-child(2n){-webkit-flex:1 0 60%;flex:1 0 60%;}.listItemIcon:not(.listItemIcon-transparent){background-color:var(--lighterGradientPoint)!important;}.readOnlyContent{flex-direction:column!important;}.MuiAppBar-root{background:var(--headerColor);backdrop-filter:blur(5px);border-bottom:solid var(--borderColor) 1px;}.MuiDrawer-paper{background:var(--drawerColor);backdrop-filter:blur(5px);border-right:solid var(--borderColor) 1px;}[dir=ltr] .navMenuOption{padding:.75em 1em!important}[dir=ltr] .listItem:not(.actionSheetMenuItem){padding:.25em .25em .25em 1.5em!important;}.actionSheetContent{padding:.4em!important;}.navMenuOption{border-radius:.5em!important;margin:.5em 1em!important;}.listItem:hover,.navMenuOption:hover{background:rgba(255,255,255,.125);border-radius:.8em;}.navMenuOption-selected{background-color:rgb(201 143 255 / 42%)!important;border:solid rgb(255 255 255 / 20%) 1px;}.noBackdropTransparency .detailPageSecondaryContainer{background-color:transparent;}.detailSection{display:flex;flex-direction:column;gap:1em;max-width:unset!important;}.detailPageContent{gap:1em;}.trackSelections{order:2;max-width:unset!important;}.detailsGroupItem,.trackSelections .selectContainer{max-width:unset!important;align-items:center;}.trackSelectionFieldContainer>.selectArrowContainer{top:.5em;}.selectArrowContainer{opacity:.5;}.detailSectionContent{order:1;}.itemDetailsGroup{order:3;}.sliderBubble{border-radius:1em;border:solid 1px var(--borderColor);overflow:hidden;}.listItem-border{border-color:transparent!important;}.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;}[dir=ltr] .padded-left.vertical-wrap{padding-left:5%!important;}[dir=ltr] .padded-right.vertical-wrap{padding-right:5%!important;}.paging{padding-inline:1em;}.smallBackdropCard,.squareCard{width:47%;}.layout-mobile #myPreferencesMenuPage{padding-top:3.75em!important;}.headerUserButton{width:2em;height:2em;margin-inline-end:1em;border:solid var(--borderColor) 1px;}.MuiAvatar-circular{width:1.5em;height:1.5em;border:solid var(--borderColor) 1px;}.dashboardDocument .content-primary{padding-top:4.25rem;}.editorNode{display:flex;align-items:center;}.metadataSidebarIcon{color:#6c7bab;}.sectionTitleTextButton{padding-inline:.5em;}.sectionTitleTextButton>*{padding:.3em 0!important;margin:0 0!important;}.sectionTitleTextButton>.material-icons::before{border:solid 1px;border-radius:1em;font-size:.7em;line-height:1.4em;font-weight:600;margin-inline-start:.5em;}.backdropCard,.bannerCard{width:46%;}.toast{background:var(--headerColor);border:solid 1px var(--borderColor);border-radius:.5em;backdrop-filter:blur(1em);} \ No newline at end of file +/* ElegantFin Theme v24.12.20 for Jellyfin by lscambo13 */ +@import url("https://cdn.jsdelivr.net/gh/prayag17/Jellyfin-Icons/round.css");@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{--darkerGradientPoint:#111827;--lighterGradientPoint:#1d2635;--borderColor:rgb(71,80,92);--headerColor:rgba(30,40,54,.8);--drawerColor:rgba(30,40,54,.9);--lighterBorderColor:rgb(255 255 255 / 20%);--selectorBackgroundColor:rgb(55,65,81);--btnSubmitColor:rgb(61,54,178);--btnSubmitBorderColor:rgb(117 111 226);--checkboxCheckedBgColor:rgb(79,70,229);--backgroundGradient:linear-gradient(0deg,var(--darkerGradientPoint) 35%,var(--lighterGradientPoint));--cardBackgroundGradient:linear-gradient(0deg,var(--darkerGradientPoint),var(--lighterGradientPoint) 25%);--hoverGradient:linear-gradient(130deg,rgb(255 255 255 / 20%) 20%,rgb(255 255 255 / 10%) 40%);--activeColor:rgb(201 143 255 / 40%);--largerRadius:1.25em;--largeRadius:1em;--smallRadius:.5em;--smallerRadius:.375em;--borderWidth:.075em;}html{font-family:"Inter",serif;font-optical-sizing:auto;font-weight:425;font-style:normal;}.dashboardFooter{font-family:Noto Sans;transition:transform 50ms;}.dashboardFooter::after{content:"ElegantFin v24.12.20";font-size:.8em;color:#4e4e60;}.card{padding:.375em;}.card:focus .cardBox:not(.visualCardBox) .cardScalable{border-radius:var(--largerRadius)!important;border:solid rgba(0,0,0,1) var(--borderWidth)!important;outline:var(--borderWidth) rgba(255,255,255,1) solid;transition:border .1s;filter:brightness(1.125);}.emby-button.show-focus:focus,.paper-icon-button-light.show-focus:focus{background:#2f3a53;outline:var(--borderWidth) rgb(255 255 255) solid!important;outline-offset:calc(-1*var(--borderWidth));color:#fff;transition:outline 0s,border 0s;}.emby-tabs .emby-button.show-focus:focus{outline:.05em rgb(255 255 255) solid!important;outline-offset:-1em;color:#fff;border-radius:var(--largerRadius);}[dir=ltr] .itemsContainer>.card>.cardBox{margin-left:auto;margin-right:auto;}.vertical-wrap:not(.centered){justify-content:flex-start!important;}.countIndicator,.fullSyncIndicator,.mediaSourceIndicator{background:rgb(31,80,189);border:var(--lighterBorderColor) solid var(--borderWidth);}.playedIndicator{background:rgb(34,197,94);border:var(--lighterBorderColor) solid var(--borderWidth);}.cardScalable{border-radius:var(--largeRadius);border:var(--borderColor) solid var(--borderWidth)!important;overflow:hidden!important;transition:125ms transform}.cardImageContainer{border-radius:var(--largeRadius)!important}.cardOverlayContainer{border-radius:var(--largeRadius)!important;border:solid rgb(255 255 255 / 65%) var(--borderWidth);mix-blend-mode:plus-lighter;background:var(--hoverGradient);}.cardBox:not(.visualCardBox) .cardPadder{background-color:var(--lighterGradientPoint);border-radius:var(--largeRadius);}.cardOverlayContainer>.cardOverlayFab-primary{display:none;}@media (min-width:31.25em){.portraitCard,.smallBackdropCard,.squareCard{width:30%!important}}@media (min-width:43.75em){.portraitCard,.squareCard{width:23%!important}}@media (min-width:50em){.portraitCard,.squareCard{width:23%!important}}@media (min-width:25em){.backdropCard{width:49%}}@media (min-width:48.125em){.backdropCard{width:32%}}.detailLogo{display:none;}h1{font-size:3em;}.detailPagePrimaryContainer{align-content:space-between;align-items:stretch;justify-content:end;flex-direction:column;}.portraitCard{min-width:5em;width:29.5%;max-width:12.9em;}.headerHomeButton,.cardOverlayButton{display:none;}.skinHeader.noHomeButtonHeader .headerSyncButton{display:none;}.pageTitle{height:1.5em;}.paper-icon-button-light>.material-icons{font-size:1.25em;}.emby-scrollbuttons-button.paper-icon-button-light>.material-icons{font-size:1.5em;place-content:center;}.detailRibbon{background-color:transparent;}.itemBackdrop{height:13em;}.mediaInfoOfficialRating{border-radius:var(--smallRadius);font-size:66%;line-height:1em;margin:0 .5em .15em 0!important;padding-inline:.5em;padding-block-start:.4em;font-weight:600;background:transparent!important;border:solid var(--borderWidth) var(--borderColor);}.layout-desktop .detailRibbon{height:auto!important;margin-top:unset!important;}.layout-desktop .detailImageContainer .card{top:unset!important;}.detailPageWrapperContainer{padding-top:unset;margin-top:unset;background:linear-gradient(0deg,var(--darkerGradientPoint) 85%,transparent);}@media (max-width:62.5em){.layout-desktop .itemBackdrop{height:7em!important}}@media (orientation:portrait) and (max-width:40em){.layout-mobile .itemBackdrop{height:40vh;opacity:.35}.mediaInfoOfficialRating{padding-inline-start:.5em;padding-inline-end:.475em;padding-block-start:.470em}.detailPageWrapperContainer{padding-top:35vh;margin-top:-45vh}}@media (max-height:31.25em){.itemBackdrop{height:62vh}}.layout-mobile .itemBackdrop{margin-top:3.5em;}h2{font-size:1.25em;}h1,h2{font-weight:600;}.tagline{font-size:1.3em;font-weight:400;margin-bottom:0;}.nowPlayingPlaylist,.nowPlayingContextMenu,html{background:var(--backgroundGradient)}.backgroundContainer:not(.withBackdrop){background:var(--backgroundGradient)}.backgroundContainer.withBackdrop{opacity:.9375;background:var(--backgroundGradient)}.skinHeader-blurred:not(.osdHeader){background-color:var(--headerColor)!important;backdrop-filter:blur(5px)!important;}.headroom--unpinned{-webkit-transform:translateY(-3.5em);transform:translateY(-3.5em);}.skinHeader:not(.osdHeader){border-style:solid;border-width:0 0 var(--borderWidth) 0;border-color:var(--borderColor);transition:all .375s ease-in-out;}.itemProgressBar{background-color:rgb(123 123 123 / 30%)!important;height:.2em;overflow:hidden;border-radius:var(--largeRadius);}.itemProgressBarForeground{border-radius:var(--largeRadius);background-color:var(--activeColor);}.selectLabel{max-height:2em;}.layout-mobile .mainDetailButtons{margin-top:2em;}.emby-select-withcolor,.emby-select,.emby-input,.emby-textarea{background-color:var(--selectorBackgroundColor);border:var(--lighterBorderColor) solid var(--borderWidth);border-radius:var(--smallRadius);padding:.5em!important;}.btnPlay{background-color:rgba(255,255,255,.05);border:solid var(--lighterBorderColor) var(--borderWidth);}.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:hover,.searchfields-icon:active,.inputContainer .emby-input-iconbutton:hover,.inputContainer .emby-input-iconbutton:active{color:rgba(255,255,255,.8);}.searchFields>.searchFieldsInner{flex-direction:row-reverse;}.button-link{color:rgb(200,200,200);}.button-link:hover{color:rgb(243,243,243)!important;text-decoration:none;}.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;}.btnPlay>.detailButton-content::after{padding-left:.25em;margin-top:.1em;content:"Play";}.mainDrawer,.drawer-open{background-color:var(--drawerColor);border-right:solid var(--borderColor) var(--borderWidth);backdrop-filter:blur(8px);}.detailButton{border-radius:var(--smallRadius);border:solid var(--lighterBorderColor) var(--borderWidth);padding:.5em .5em!important;margin:.125em!important;}.button-flat:hover{color:unset;background-color:rgba(255,255,255,.2);}.playstatebutton-icon-played{color:rgb(34,197,94);}.itemDetailsGroup{outline:var(--borderWidth) solid var(--borderColor);outline-offset:calc(-1*var(--borderWidth));overflow:hidden;margin-top:1.5em;border-radius:var(--smallRadius);}.itemDetailsGroup>div:not(:last-child){border-bottom:solid var(--borderColor) var(--borderWidth);}.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;}.itemTags,.itemTags>a{display:none;font-size:unset!important;font-weight:200;}.detail-clamp-text{text-align:start;}.itemMiscInfo{align-items:flex-end!important;}.innerCardFooter,.chapterThumbTextContainer{background:transparent;font-weight:500;text-shadow:.1em .1em 0 black;padding:1em;width:auto;}.centerMessage{width:unset;}.dialogContainer{margin:.33em;}.dialog{backdrop-filter:blur(5px);background-color:var(--drawerColor);border-radius:var(--largeRadius)!important;border:solid var(--borderColor) var(--borderWidth);min-width:15em;}.dialogBackdropOpened{opacity:.66;}.subtitleEditor-dropZone,.imageEditor-dropZone{border-radius:var(--largeRadius);}.actionSheetContent>h1{font-size:unset;}.formDialogHeader>h1{margin-inline:0!important;}.collapseContent{background-color:unset!important;backdrop-filter:unset!important;}.selectionCommandsPanel{background:var(--lighterGradientPoint);border-bottom:solid var(--borderColor) var(--borderWidth);backdrop-filter:blur(10px);}.selectionCommandsPanel>h1{font-size:large;}.itemSelectionPanel{border:unset;background-color:transparent;}.emby-checkbox:checked+span+.checkboxOutline{border-radius:var(--smallerRadius)!important;box-shadow:inset 0 7em 10em 20px rgba(0,0,0,.8);background:transparent;border-color:white;border-style:groove;border-width:2px;}.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);}.cardText-first+.itemSelectionPanel>.checkboxContainer>.emby-checkbox:checked+span+.checkboxOutline{border-radius:var(--largeRadius)!important;}.cardText-secondary+.itemSelectionPanel>.checkboxContainer>.emby-checkbox:checked+span+.checkboxOutline{border-radius:var(--largeRadius)!important;}.cardText-secondary+.itemSelectionPanel>.checkboxContainer{height:calc(100% - 3.125em);}.cardScalable+.itemSelectionPanel>.checkboxContainer>.emby-checkbox:checked+span+.checkboxOutline{border-radius:var(--largeRadius)!important;}.cardScalable+.itemSelectionPanel>.checkboxContainer{height:calc(100% - 0);}.checkboxOutline.multiSelectCheckboxOutline{border-radius:var(--largeRadius);border-width:0;width:100%;height:100%;}.cardIndicators{-webkit-align-items:center;align-items:center;top:.2em;}.indicator{border:solid rgb(124 124 124 / 50%) var(--borderWidth);border-radius:100em;}.defaultCardBackground,.cardScalable{background:var(--cardBackgroundGradient)!important;}.listItemImage{border-radius:var(--smallRadius);}.emby-button.block,.button-alt,.raised,#btnDeleteImage,.dashboardActionsContainer>.emby-button{color:#fff;border-radius:var(--smallRadius);background:var(--lighterGradientPoint);border:solid var(--borderColor) var(--borderWidth);}.btnBrowse>.folder{margin-inline-end:.5em;}.fab{color:#fff;background:var(--lighterGradientPoint);border:solid var(--borderColor) var(--borderWidth);}.fab:focus{background:var(--lighterGradientPoint)!important;filter:brightness(1.35);}.raised:focus{background:inherit;filter:brightness(1.35);}.raised:hover,.fab:hover,.emby-button:hover{filter:brightness(1.2)!important;}.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;}#btnDeleteImage,.button-delete{background:rgb(169,29,29);border:solid rgb(217,84,84) 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:blur(5px);}.visualCardBox,.paperList{background-color:var(--headerColor)!important;border-radius:var(--largeRadius)!important;border:solid var(--borderColor) var(--borderWidth)!important;box-shadow:unset!important;}.paperList{padding:.4em;}.serverInfo{padding:1em;}.serverInfo>:nth-child(2n){-webkit-flex:1 0 60%;flex:1 0 60%;}.listItemIcon:not(.listItemIcon-transparent){background-color:var(--lighterGradientPoint)!important;}.readOnlyContent{flex-direction:column!important;}.MuiAppBar-root{background:var(--headerColor);backdrop-filter:blur(5px);border-bottom:solid var(--borderColor) var(--borderWidth);}.MuiDrawer-paper{background:var(--drawerColor);backdrop-filter:blur(5px);border-right:solid var(--borderColor) var(--borderWidth);}.MuiDrawer-paper:first-child{margin-block-start:.25em;}[dir=ltr] .navMenuOption{padding:.75em 1em!important;}[dir=ltr] .listItem:not(.actionSheetMenuItem){padding:.25em .25em .25em 1.5em!important;}.actionSheetContent{padding:.4em!important;}.navMenuOption{border-radius:var(--smallRadius)!important;margin:.5em 1em!important;}.listItem:hover,.navMenuOption:hover{background:rgba(255,255,255,.125);border-radius:.7em;}.navMenuOption-selected{background-color:var(--activeColor)!important;border:solid var(--lighterBorderColor) var(--borderWidth);}.MuiListItem-root>a,.MuiList-root>a,.MuiListItem-root>div{border:solid transparent var(--borderWidth);border-radius:.7em;margin-inline:.5em!important;margin-block:.25em!important;}.Mui-selected{background-color:var(--activeColor)!important;border:solid var(--lighterBorderColor) var(--borderWidth)!important;}.noBackdropTransparency .detailPageSecondaryContainer{background-color:transparent;}.detailSection{display:flex;flex-direction:column;gap:1em;max-width:unset!important;}.detailPageContent{gap:1em;}.trackSelections{order:2;max-width:unset!important;}.detailsGroupItem,.trackSelections .selectContainer{max-width:unset!important;align-items:center;}.selectArrowContainer{top:0;opacity:.5;}.trackSelectionFieldContainer>.selectArrowContainer{top:.5em;}.detailSectionContent{order:1;}.itemDetailsGroup{order:3;}.sliderBubble{border-radius:var(--largeRadius);border:solid var(--borderWidth) var(--borderColor);overflow:hidden;}.listItem-border{border-color:transparent!important;}.alphaPickerButton{font-family:monospace;margin:.15em;color:rgba(255,255,255,.25);}.alphaPickerButton-selected,.alphaPickerButton:hover{color:rgba(255,255,255,1);}.alphaPicker-vertical{height:70%;}.alphaPicker{justify-content:center;}[dir=ltr] .padded-left.vertical-wrap{padding-left:5%!important;}[dir=ltr] .padded-right.vertical-wrap{padding-right:5%!important;}.paging{padding-inline:1em;}.smallBackdropCard,.squareCard,.backdropCard,.bannerCard{width:46%;max-width:18em;}.layout-mobile #myPreferencesMenuPage{padding-top:3.75em!important;}.headerUserButton{width:2em;height:2em;margin-inline-end:1em;border:solid var(--borderColor) var(--borderWidth);}.MuiAvatar-circular{width:1.5em;height:1.5em;border:solid var(--borderColor) var(--borderWidth);}.dashboardDocument .content-primary{padding-top:4.25rem;}.editorNode{display:flex;align-items:center;}.metadataSidebarIcon{color:#6c7bab;}.sectionTitleTextButton{padding-inline:.5em;}.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{border:solid var(--borderWidth);border-radius:var(--largeRadius);font-size:.85em;line-height:unset;font-weight:600;margin-inline-start:.5em;}.toast{background:var(--headerColor);border:solid var(--borderWidth) var(--borderColor);border-radius:var(--smallRadius);backdrop-filter:blur(1em);}.activeSession{width:98%!important;max-width:27rem!important;}.layout-tv .itemBackdrop{display:block;height:13vh;}.emby-tab-button:hover{color:#c1c1c1;}@media (hover:hover) and (pointer:fine){.paper-icon-button-light:hover:not(:disabled){color:#fff;background-color:rgb(255 255 255 / 5%)}}.paper-icon-button-light:active:not(:disabled){color:#fff;background-color:rgb(255 255 255 / 5%);}.inputLabelFocused,.selectLabelFocused,.textareaLabelFocused{color:#fff;}.emby-select-withcolor:focus,.emby-input:focus,.emby-textarea:focus{border-color:#c1c1c1!important;}.layout-mobile [dir=ltr] .infoWrapper{padding-left:34%;}[dir=ltr] .mediaInfoItem{transform:scale(.85);margin:0 .4em 0 0;}.programCell-active{background-color:var(--activeColor)!important;border-radius:.5em;margin-block:.5em!important;}.emby-select-iconbutton{background-color:var(--selectorBackgroundColor);border:var(--lighterBorderColor) solid var(--borderWidth);border-radius:var(--smallRadius);margin-inline-start:1em;}@media (min-width:62em){.sectionTabs:not(.layout-tv .sectionTabs){-webkit-align-items:center;align-items:center;-webkit-align-self:center;align-self:center;-webkit-justify-content:center;justify-content:center;margin-top:-4.3em;position:relative;width:auto}.libraryPage:not(.noSecondaryNavPage){padding-top:4.8em!important}}.emby-select-withcolor>option{color:inherit;background-color:var(--selectorBackgroundColor);} \ No newline at end of file diff --git a/Theme/ElegantFin-theme-v24.12.20.css b/Theme/ElegantFin-theme-v24.12.20.css new file mode 100644 index 0000000..76f3d91 --- /dev/null +++ b/Theme/ElegantFin-theme-v24.12.20.css @@ -0,0 +1,1009 @@ +/* ElegantFin Theme for Jellyfin by lscambo13 */ + +@import url("https://cdn.jsdelivr.net/gh/prayag17/Jellyfin-Icons/round.css"); +@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 { + --darkerGradientPoint: #111827; + --lighterGradientPoint: #1d2635; + --borderColor: rgb(71, 80, 92); + --headerColor: rgba(30, 40, 54, 0.8); + --drawerColor: rgba(30, 40, 54, 0.9); + --lighterBorderColor: rgb(255 255 255 / 20%); + --selectorBackgroundColor: rgb(55, 65, 81); + --btnSubmitColor: rgb(61, 54, 178); + --btnSubmitBorderColor: rgb(117 111 226); + --checkboxCheckedBgColor: rgb(79, 70, 229); + --backgroundGradient: linear-gradient(0deg, var(--darkerGradientPoint) 35%, var(--lighterGradientPoint)); + --cardBackgroundGradient: linear-gradient(0deg, var(--darkerGradientPoint), var(--lighterGradientPoint) 25%); + --hoverGradient: linear-gradient(130deg, rgb(255 255 255 / 20%) 20%, rgb(255 255 255 / 10%) 40%); + --activeColor: rgb(201 143 255 / 40%); + --largerRadius: 1.25em; + --largeRadius: 1em; + --smallRadius: .5em; + --smallerRadius: .375em; + --borderWidth: 0.075em; +} + +html { + font-family: "Inter", serif; + font-optical-sizing: auto; + font-weight: 425; + font-style: normal; +} + +.dashboardFooter { + font-family: Noto Sans; + transition: transform 50ms; +} + +.dashboardFooter::after { + content: "ElegantFin v24.12.20"; + font-size: .8em; + color: #4e4e60; +} + +.card { + padding: .375em; +} + +.card:focus .cardBox:not(.visualCardBox) .cardScalable { + border-radius: var(--largerRadius) !important; + border: solid rgba(0, 0, 0, 1) var(--borderWidth) !important; + outline: var(--borderWidth) rgba(255, 255, 255, 1) solid; + transition: border .1s; + filter: brightness(1.125); +} + +.emby-button.show-focus:focus, +.paper-icon-button-light.show-focus:focus { + background: #2f3a53; + /* border-radius: var(--smallRadius); */ + outline: var(--borderWidth) rgb(255 255 255) solid !important; + outline-offset: calc(-1*var(--borderWidth)); + color: #fff; + transition: outline 0s, border 0s; +} + +.emby-tabs .emby-button.show-focus:focus { + outline: .05em rgb(255 255 255) solid !important; + outline-offset: -1em; + color: #fff; + border-radius: var(--largerRadius); +} + +[dir=ltr] .itemsContainer>.card>.cardBox { + margin-left: auto; + margin-right: auto; +} + +.vertical-wrap:not(.centered) { + justify-content: flex-start !important; +} + +.countIndicator, +.fullSyncIndicator, +.mediaSourceIndicator { + background: rgb(31, 80, 189); + border: var(--lighterBorderColor) solid var(--borderWidth); +} + +.playedIndicator { + background: rgb(34, 197, 94); + border: var(--lighterBorderColor) solid var(--borderWidth); +} + +.cardScalable { + border-radius: var(--largeRadius); + border: var(--borderColor) solid var(--borderWidth) !important; + overflow: hidden !important; + transition: 125ms transform; + /* box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37); */ +} + +.cardImageContainer { + border-radius: var(--largeRadius) !important +} + +.cardOverlayContainer { + border-radius: var(--largeRadius) !important; + border: solid rgb(255 255 255 / 65%) var(--borderWidth); + mix-blend-mode: plus-lighter; + background: var(--hoverGradient); +} + +.cardBox:not(.visualCardBox) .cardPadder { + background-color: var(--lighterGradientPoint); + border-radius: var(--largeRadius); +} + +.cardOverlayContainer>.cardOverlayFab-primary { + display: none; +} + + +@media (min-width: 31.25em) { + + .portraitCard, + .smallBackdropCard, + .squareCard { + width: 30% !important; + } +} + +@media (min-width: 43.75em) { + + .portraitCard, + .squareCard { + width: 23% !important; + } +} + +@media (min-width: 50em) { + + .portraitCard, + .squareCard { + width: 23% !important; + } +} + +@media (min-width: 25em) { + .backdropCard { + width: 49%; + } +} + +@media (min-width: 48.125em) { + .backdropCard { + width: 32%; + } +} + +.detailLogo { + display: none; +} + +h1 { + font-size: 3em; +} + +.detailPagePrimaryContainer { + align-content: space-between; + align-items: stretch; + justify-content: end; + flex-direction: column; +} + +.portraitCard { + min-width: 5em; + width: 29.5%; + max-width: 12.9em; +} + +.headerHomeButton, +.cardOverlayButton { + display: none; +} + +/* hide sync button on home screen */ +.skinHeader.noHomeButtonHeader .headerSyncButton { + display: none; +} + +.pageTitle { + height: 1.5em; +} + +.paper-icon-button-light>.material-icons { + font-size: 1.25em; +} + +.emby-scrollbuttons-button.paper-icon-button-light>.material-icons { + font-size: 1.5em; + place-content: center; +} + +.detailRibbon { + background-color: transparent; +} + +.itemBackdrop { + height: 13em; +} + +.mediaInfoOfficialRating { + border-radius: var(--smallRadius); + font-size: 66%; + line-height: 1em; + margin: 0em 0.5em .15em 0em !important; + padding-inline: .5em; + padding-block-start: .4em; + font-weight: 600; + background: transparent !important; + border: solid var(--borderWidth) var(--borderColor); +} + +.layout-desktop .detailRibbon { + height: auto !important; + margin-top: unset !important; +} + +.layout-desktop .detailImageContainer .card { + top: unset !important; +} + +.detailPageWrapperContainer { + padding-top: unset; + margin-top: unset; + background: linear-gradient(0deg, var(--darkerGradientPoint) 85%, transparent); +} + +@media (max-width: 62.5em) { + .layout-desktop .itemBackdrop { + height: 7em !important; + } +} + +@media (orientation: portrait) and (max-width: 40em) { + .layout-mobile .itemBackdrop { + height: 40vh; + opacity: .35; + } + + .mediaInfoOfficialRating { + padding-inline-start: .5em; + padding-inline-end: .475em; + padding-block-start: 0.470em; + } + + .detailPageWrapperContainer { + padding-top: 35vh; + margin-top: -45vh; + } +} + +@media (max-height: 31.25em) { + .itemBackdrop { + height: 62vh; + } +} + +.layout-mobile .itemBackdrop { + margin-top: 3.5em; +} + +h2 { + font-size: 1.25em; +} + +h1, +h2 { + font-weight: 600; +} + +.tagline { + font-size: 1.3em; + font-weight: 400; + margin-bottom: 0; +} + +.nowPlayingPlaylist, +.nowPlayingContextMenu, +html { + background: var(--backgroundGradient) +} + +.backgroundContainer:not(.withBackdrop) { + background: var(--backgroundGradient) +} + +.backgroundContainer.withBackdrop { + opacity: .9375; + background: var(--backgroundGradient) +} + +.skinHeader-blurred:not(.osdHeader) { + background-color: var(--headerColor) !important; + backdrop-filter: blur(5px) !important; +} + +.headroom--unpinned { + -webkit-transform: translateY(-3.5em); + transform: translateY(-3.5em); +} + +.skinHeader:not(.osdHeader) { + border-style: solid; + border-width: 0 0 var(--borderWidth) 0; + border-color: var(--borderColor); + transition: all .375s ease-in-out; +} + +.itemProgressBar { + background-color: rgb(123 123 123 / 30%) !important; + height: .2em; + overflow: hidden; + border-radius: var(--largeRadius); +} + +.itemProgressBarForeground { + border-radius: var(--largeRadius); + background-color: var(--activeColor); +} + +.selectLabel { + max-height: 2em; +} + +.layout-mobile .mainDetailButtons { + margin-top: 2em; +} + +.emby-select-withcolor, +.emby-select, +.emby-input, +.emby-textarea { + background-color: var(--selectorBackgroundColor); + border: var(--lighterBorderColor) solid var(--borderWidth); + border-radius: var(--smallRadius); + padding: .5em !important; +} + +.btnPlay { + background-color: rgba(255, 255, 255, 0.05); + border: solid var(--lighterBorderColor) var(--borderWidth); +} + +.inputContainer .emby-input-iconbutton { + color: rgba(255, 255, 255, 0.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, 0.5); +} + +.searchfields-icon:hover, +.searchfields-icon:active, +.inputContainer .emby-input-iconbutton:hover, +.inputContainer .emby-input-iconbutton:active { + color: rgba(255, 255, 255, 0.8); +} + +.searchFields>.searchFieldsInner { + flex-direction: row-reverse; +} + +.button-link { + color: rgb(200, 200, 200); +} + +.button-link:hover { + color: rgb(243, 243, 243) !important; + text-decoration: none; +} + +.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; +} + + +.btnPlay>.detailButton-content::after { + padding-left: .25em; + margin-top: .1em; + content: "Play"; +} + +.mainDrawer, +.drawer-open { + background-color: var(--drawerColor); + border-right: solid var(--borderColor) var(--borderWidth); + backdrop-filter: blur(8px); +} + +.detailButton { + border-radius: var(--smallRadius); + border: solid var(--lighterBorderColor) var(--borderWidth); + padding: .5em .5em !important; + margin: 0.125em !important; +} + +.button-flat:hover { + color: unset; + background-color: rgba(255, 255, 255, 0.2); +} + +.playstatebutton-icon-played { + color: rgb(34, 197, 94); +} + +.itemDetailsGroup { + outline: var(--borderWidth) solid var(--borderColor); + outline-offset: calc(-1*var(--borderWidth)); + overflow: hidden; + margin-top: 1.5em; + border-radius: var(--smallRadius); +} + +.itemDetailsGroup>div:not(:last-child) { + border-bottom: solid var(--borderColor) var(--borderWidth); +} + +.detailsGroupItem { + margin: 0 !important; + justify-content: space-between; + padding: 0.5em 0.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; +} + +.itemTags, +.itemTags>a { + display: none; + font-size: unset !important; + font-weight: 200; +} + +.detail-clamp-text { + text-align: start; +} + +.itemMiscInfo { + align-items: flex-end !important; +} + +.innerCardFooter, +.chapterThumbTextContainer { + background: transparent; + font-weight: 500; + text-shadow: .1em .1em 0px black; + padding: 1em; + width: auto; +} + +.centerMessage { + width: unset; +} + +.dialogContainer { + margin: .33em; +} + +.dialog { + backdrop-filter: blur(5px); + background-color: var(--drawerColor); + border-radius: var(--largeRadius) !important; + border: solid var(--borderColor) var(--borderWidth); + min-width: 15em; +} + +.dialogBackdropOpened { + opacity: .66; +} + +.subtitleEditor-dropZone, +.imageEditor-dropZone { + border-radius: var(--largeRadius); +} + +.actionSheetContent>h1 { + font-size: unset; +} + +.formDialogHeader>h1 { + margin-inline: 0 !important; +} + +.collapseContent { + background-color: unset !important; + backdrop-filter: unset !important; +} + +.selectionCommandsPanel { + background: var(--lighterGradientPoint); + border-bottom: solid var(--borderColor) var(--borderWidth); + backdrop-filter: blur(10px); +} + +.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, 0.8); + background: transparent; + border-color: white; + border-style: groove; + border-width: 2px; +} + +.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); +} + +.cardText-first+.itemSelectionPanel>.checkboxContainer>.emby-checkbox:checked+span+.checkboxOutline { + border-radius: var(--largeRadius) !important; +} + +.cardText-secondary+.itemSelectionPanel>.checkboxContainer>.emby-checkbox:checked+span+.checkboxOutline { + border-radius: var(--largeRadius) !important; +} + +.cardText-secondary+.itemSelectionPanel>.checkboxContainer { + height: calc(100% - 3.125em); +} + +.cardScalable+.itemSelectionPanel>.checkboxContainer>.emby-checkbox:checked+span+.checkboxOutline { + border-radius: var(--largeRadius) !important; +} + +.cardScalable+.itemSelectionPanel>.checkboxContainer { + height: calc(100% - 0em); +} + +.checkboxOutline.multiSelectCheckboxOutline { + border-radius: var(--largeRadius); + border-width: 0; + width: 100%; + height: 100%; +} + +.cardIndicators { + -webkit-align-items: center; + align-items: center; + top: .2em; +} + +.indicator { + border: solid rgb(124 124 124 / 50%) var(--borderWidth); + border-radius: 100em; +} + +.defaultCardBackground, +.cardScalable { + background: var(--cardBackgroundGradient) !important; +} + +.listItemImage { + border-radius: var(--smallRadius); +} + +.emby-button.block, +.button-alt, +.raised, +#btnDeleteImage, +.dashboardActionsContainer>.emby-button { + color: #fff; + border-radius: var(--smallRadius); + background: var(--lighterGradientPoint); + border: solid var(--borderColor) var(--borderWidth); +} + +.btnBrowse>.folder { + margin-inline-end: .5em; +} + +.fab { + color: #fff; + background: var(--lighterGradientPoint); + border: solid var(--borderColor) var(--borderWidth); +} + +.fab:focus { + background: var(--lighterGradientPoint) !important; + filter: brightness(1.35); +} + +.raised:focus { + background: inherit; + filter: brightness(1.35); +} + +.raised:hover, +.fab:hover, +.emby-button:hover { + filter: brightness(1.2) !important; +} + +.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; +} + +#btnDeleteImage, +.button-delete { + background: rgb(169, 29, 29); + border: solid rgb(217, 84, 84) 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: blur(5px); +} + +.visualCardBox, +.paperList { + background-color: var(--headerColor) !important; + border-radius: var(--largeRadius) !important; + border: solid var(--borderColor) var(--borderWidth) !important; + box-shadow: unset !important; +} + +.paperList { + padding: .4em; +} + +.serverInfo { + padding: 1em; +} + +.serverInfo>:nth-child(2n) { + -webkit-flex: 1 0 60%; + flex: 1 0 60%; +} + +.listItemIcon:not(.listItemIcon-transparent) { + background-color: var(--lighterGradientPoint) !important; +} + +.readOnlyContent { + flex-direction: column !important; +} + +.MuiAppBar-root { + background: var(--headerColor); + backdrop-filter: blur(5px); + border-bottom: solid var(--borderColor) var(--borderWidth); +} + +.MuiDrawer-paper { + background: var(--drawerColor); + backdrop-filter: blur(5px); + border-right: solid var(--borderColor) var(--borderWidth); +} + +.MuiDrawer-paper:first-child { + margin-block-start: .25em; +} + +[dir=ltr] .navMenuOption { + padding: .75em 1em !important; +} + +[dir=ltr] .listItem:not(.actionSheetMenuItem) { + padding: 0.25em 0.25em 0.25em 1.5em !important; +} + +.actionSheetContent { + padding: .4em !important; +} + +.navMenuOption { + border-radius: var(--smallRadius) !important; + margin: .5em 1em !important; +} + +.listItem:hover, +.navMenuOption:hover { + background: rgba(255, 255, 255, 0.125); + border-radius: .7em; +} + +.navMenuOption-selected { + background-color: var(--activeColor) !important; + border: solid var(--lighterBorderColor) var(--borderWidth); +} + +.MuiListItem-root>a, +.MuiList-root>a, +.MuiListItem-root>div { + border: solid transparent var(--borderWidth); + border-radius: .7em; + margin-inline: .5em !important; + margin-block: .25em !important; +} + +.Mui-selected { + background-color: var(--activeColor) !important; + border: solid var(--lighterBorderColor) var(--borderWidth) !important; +} + +.noBackdropTransparency .detailPageSecondaryContainer { + background-color: transparent; +} + +.detailSection { + display: flex; + flex-direction: column; + gap: 1em; + max-width: unset !important; +} + +.detailPageContent { + gap: 1em; +} + +.trackSelections { + order: 2; + max-width: unset !important; +} + +.detailsGroupItem, +.trackSelections .selectContainer { + max-width: unset !important; + align-items: center; +} + +.selectArrowContainer { + top: 0em; + opacity: .5; +} + +.trackSelectionFieldContainer>.selectArrowContainer { + top: .5em; +} + +.detailSectionContent { + order: 1; +} + +.itemDetailsGroup { + order: 3; +} + +.sliderBubble { + border-radius: var(--largeRadius); + border: solid var(--borderWidth) var(--borderColor); + overflow: hidden; +} + +.listItem-border { + border-color: transparent !important; +} + +.alphaPickerButton { + font-family: monospace; + margin: .15em; + color: rgba(255, 255, 255, 0.25); +} + +.alphaPickerButton-selected, +.alphaPickerButton:hover { + color: rgba(255, 255, 255, 1); +} + +.alphaPicker-vertical { + height: 70%; +} + +.alphaPicker { + justify-content: center; +} + +[dir=ltr] .padded-left.vertical-wrap { + padding-left: 5% !important; +} + +[dir=ltr] .padded-right.vertical-wrap { + padding-right: 5% !important; +} + +.paging { + padding-inline: 1em; +} + +.smallBackdropCard, +.squareCard, +.backdropCard, +.bannerCard { + width: 46%; + max-width: 18em; +} + +.layout-mobile #myPreferencesMenuPage { + padding-top: 3.75em !important; +} + +.headerUserButton { + width: 2em; + height: 2em; + margin-inline-end: 1em; + border: solid var(--borderColor) var(--borderWidth); +} + +.MuiAvatar-circular { + width: 1.5em; + height: 1.5em; + border: solid var(--borderColor) var(--borderWidth); +} + +.dashboardDocument .content-primary { + padding-top: 4.25rem; +} + +.editorNode { + display: flex; + align-items: center; +} + +.metadataSidebarIcon { + color: #6c7bab; +} + +.sectionTitleTextButton { + padding-inline: .5em; +} + +.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 { + border: solid var(--borderWidth); + border-radius: var(--largeRadius); + font-size: .85em; + line-height: unset; + font-weight: 600; + margin-inline-start: .5em; +} + +.toast { + background: var(--headerColor); + border: solid var(--borderWidth) var(--borderColor); + border-radius: var(--smallRadius); + backdrop-filter: blur(1em); +} + +.activeSession { + width: 98% !important; + max-width: 27rem !important; +} + +.layout-tv .itemBackdrop { + display: block; + height: 13vh; +} + +.emby-tab-button:hover { + color: #c1c1c1; +} + +@media (hover: hover) and (pointer: fine) { + .paper-icon-button-light:hover:not(:disabled) { + color: #fff; + background-color: rgb(255 255 255 / 5%); + } +} + +.paper-icon-button-light:active:not(:disabled) { + color: #fff; + background-color: rgb(255 255 255 / 5%); +} + +.inputLabelFocused, +.selectLabelFocused, +.textareaLabelFocused { + color: #fff; +} + +.emby-select-withcolor:focus, +.emby-input:focus, +.emby-textarea:focus { + border-color: #c1c1c1 !important; +} + +.layout-mobile [dir=ltr] .infoWrapper { + padding-left: 34%; +} + +[dir=ltr] .mediaInfoItem { + transform: scale(.85); + margin: 0 .4em 0 0; +} + +.programCell-active { + background-color: var(--activeColor) !important; + border-radius: .5em; + margin-block: .5em !important; +} + +.emby-select-iconbutton { + background-color: var(--selectorBackgroundColor); + border: var(--lighterBorderColor) solid var(--borderWidth); + border-radius: var(--smallRadius); + margin-inline-start: 1em; +} + +@media (min-width: 62em) { + .sectionTabs:not(.layout-tv .sectionTabs) { + -webkit-align-items: center; + align-items: center; + -webkit-align-self: center; + align-self: center; + -webkit-justify-content: center; + justify-content: center; + margin-top: -4.3em; + position: relative; + width: auto; + } + + .libraryPage:not(.noSecondaryNavPage) { + padding-top: 4.8em !important; + } +} + +.emby-select-withcolor>option { + color: inherit; + background-color: var(--selectorBackgroundColor); +} \ No newline at end of file