1355 lines
29 KiB
CSS
1355 lines
29 KiB
CSS
/* 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;
|
|
--darkerGradientPointAlpha: rgba(17, 24, 39, 0.85);
|
|
--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);
|
|
--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);
|
|
--textColor: rgb(209, 213, 219);
|
|
--dimTextColor: rgb(156, 163, 175);
|
|
--activeColorAlpha: rgb(201 143 255 / 40%);
|
|
--activeColor: rgb(119 82 153);
|
|
--tableBodyColor: rgb(31 41 55 / 1);
|
|
--backgroundGradient: linear-gradient(0deg, var(--darkerGradientPoint) 35%, var(--lighterGradientPoint));
|
|
--cardBackgroundGradient: linear-gradient(0deg, var(--darkerGradientPoint), var(--lighterGradientPoint) 25%);
|
|
--hoverGradientA: linear-gradient(130deg, rgb(255 255 255 / 35%) 20%, rgb(255 255 255 / 15%) 40%);
|
|
--hoverGradientB: radial-gradient(100% 250% at 90% 190%, rgba(255, 255, 255, 0.15) 85%, rgba(255, 255, 255, 0.33) 100%);
|
|
--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 v25.01.03";
|
|
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 calc(2 * var(--borderWidth)) !important;
|
|
overflow: hidden !important;
|
|
transition: 125ms transform;
|
|
}
|
|
|
|
.layout-mobile .cardScalable {
|
|
border: var(--borderColor) solid var(--borderWidth) !important;
|
|
}
|
|
|
|
.cardImageContainer {
|
|
transition: transform .375s;
|
|
}
|
|
|
|
.card.card-hoverable:hover .cardScalable {
|
|
border-color: var(--textColor) !important;
|
|
}
|
|
|
|
.card.card-hoverable:hover .cardImageContainer {
|
|
transform: scale(1.025);
|
|
}
|
|
|
|
.card.card-hoverable:hover .itemSelectionPanel {
|
|
transform: scale(1.025);
|
|
}
|
|
|
|
.cardOverlayContainer {
|
|
transition: .25s;
|
|
background: var(--hoverGradientA);
|
|
background-size: 200%;
|
|
background-position-x: 100%;
|
|
}
|
|
|
|
.layout-desktop .card.card-hoverable:hover .cardOverlayContainer {
|
|
background-position-x: 0%;
|
|
}
|
|
|
|
.cardBox:not(.visualCardBox) .cardPadder {
|
|
background-color: var(--lighterGradientPoint);
|
|
}
|
|
|
|
.cardOverlayContainer>.cardOverlayFab-primary {
|
|
left: unset;
|
|
margin-left: unset;
|
|
margin-top: unset;
|
|
top: unset;
|
|
right: 1.25em;
|
|
bottom: 1.25em;
|
|
}
|
|
|
|
.cardOverlayContainer>.cardOverlayFab-primary,
|
|
.listItemImageButton {
|
|
background-color: rgba(0, 0, 0, 0.9);
|
|
color: var(--textColor);
|
|
border: solid var(--borderColor) var(--borderWidth);
|
|
font-size: 75%;
|
|
}
|
|
|
|
.cardOverlayContainer>.cardOverlayFab-primary:hover,
|
|
.listItemImageButton:hover {
|
|
background-color: rgba(0, 0, 0, 0.75) !important;
|
|
}
|
|
|
|
.layout-desktop .cardOverlayButton-br {
|
|
display: none;
|
|
}
|
|
|
|
.layout-mobile .portraitCard .cardOverlayButton-br,
|
|
.layout-mobile .backdropCard .cardOverlayButton-br {
|
|
display: none;
|
|
}
|
|
|
|
.cardOverlayContainer:has(.cardOverlayButton:hover) {
|
|
backdrop-filter: blur(.25em);
|
|
}
|
|
|
|
.cardScalable:has(.cardOverlayContainer .cardOverlayButton:hover)>.cardImageContainer {
|
|
transform: scale(1);
|
|
}
|
|
|
|
.card.card-hoverable:hover .cardScalable {
|
|
transform: scale(1.02);
|
|
}
|
|
|
|
.listViewUserDataButtons {
|
|
flex-direction: column;
|
|
padding-inline-end: .75em;
|
|
padding-inline-start: 1em;
|
|
}
|
|
|
|
.smallBackdropCard,
|
|
.squareCard,
|
|
.backdropCard,
|
|
.bannerCard {
|
|
width: 46%;
|
|
max-width: 18em;
|
|
}
|
|
|
|
@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: 46%;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 48.125em) {
|
|
.backdropCard {
|
|
width: 31%;
|
|
}
|
|
}
|
|
|
|
.detailLogo {
|
|
display: none;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 3em;
|
|
}
|
|
|
|
.detailPageWrapperContainer {
|
|
padding-top: unset;
|
|
margin-top: unset;
|
|
}
|
|
|
|
.layout-mobile .detailPageWrapperContainer {
|
|
background: var(--darkerGradientPointAlpha);
|
|
}
|
|
|
|
.layout-desktop .detailPageWrapperContainer {
|
|
background: linear-gradient(0deg, var(--darkerGradientPoint) 80%, transparent);
|
|
min-height: calc(100vh - 13em);
|
|
}
|
|
|
|
.detailPagePrimaryContainer {
|
|
align-content: space-between;
|
|
align-items: stretch;
|
|
justify-content: end;
|
|
flex-direction: column;
|
|
}
|
|
|
|
[dir=ltr] .detailPagePrimaryContent {
|
|
padding-right: 0;
|
|
}
|
|
|
|
.layout-mobile .detailPagePrimaryContainer {
|
|
background: linear-gradient(0deg, var(--darkerGradientPoint) 70%, transparent);
|
|
}
|
|
|
|
.layout-desktop .detailPagePrimaryContainer {
|
|
background: transparent;
|
|
}
|
|
|
|
.layout-mobile .detailPageSecondaryContainer {
|
|
background-color: var(--darkerGradientPoint);
|
|
}
|
|
|
|
.layout-desktop .detailPageSecondaryContainer {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.portraitCard {
|
|
min-width: 5em;
|
|
width: 29.5%;
|
|
max-width: 12.9em;
|
|
}
|
|
|
|
.headerHomeButton {
|
|
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;
|
|
}
|
|
|
|
.verticalSection.emby-scroller-container>h2.sectionTitle.sectionTitle-cards {
|
|
padding-top: 1.25em !important;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
@media (max-width: 62.5em) {
|
|
.layout-desktop .itemBackdrop {
|
|
height: 7em !important;
|
|
}
|
|
|
|
.layout-desktop .detailPageWrapperContainer {
|
|
min-height: calc(100vh - 7em);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 50em) {
|
|
.homeLibraryButton {
|
|
width: 45% !important;
|
|
}
|
|
}
|
|
|
|
.homeLibraryButton {
|
|
min-width: 15%;
|
|
}
|
|
|
|
@media (orientation: landscape) and (min-width: 40em) {
|
|
.layout-mobile .itemBackdrop {
|
|
height: 40vh;
|
|
opacity: .10;
|
|
}
|
|
|
|
.layout-mobile .detailPageWrapperContainer {
|
|
padding-top: 35vh;
|
|
margin-top: -47vh;
|
|
}
|
|
}
|
|
|
|
@media (orientation: portrait) and (max-width: 40em) {
|
|
.layout-mobile .itemBackdrop {
|
|
height: 40vh;
|
|
}
|
|
|
|
.mediaInfoOfficialRating {
|
|
padding-inline-start: .5em;
|
|
padding-inline-end: .475em;
|
|
padding-block-start: 0.470em;
|
|
}
|
|
|
|
.layout-mobile .detailPageWrapperContainer {
|
|
padding-top: 35vh;
|
|
margin-top: -47vh;
|
|
}
|
|
}
|
|
|
|
@media (orientation: landscape) and (max-height: 40em) {
|
|
|
|
.portraitCard {
|
|
min-width: 2em;
|
|
width: 8.5%;
|
|
max-width: 6.5em;
|
|
}
|
|
|
|
.backdropCard {
|
|
width: 23%;
|
|
}
|
|
}
|
|
|
|
.layout-mobile .itemBackdrop {
|
|
margin-top: 3.5em;
|
|
}
|
|
|
|
.layout-tv .itemBackdrop {
|
|
display: block;
|
|
height: 13vh;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1.25em;
|
|
}
|
|
|
|
h1,
|
|
h2 {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.tagline {
|
|
font-size: 1.3em;
|
|
font-weight: 400;
|
|
margin-bottom: 0;
|
|
font-style: italic;
|
|
color: var(--textColor);
|
|
}
|
|
|
|
.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:not(.backgroundProgress, .playbackProgress, .transcodingProgress) {
|
|
backdrop-filter: blur(.1em);
|
|
background-color: rgb(123 123 123 / 30%) !important;
|
|
height: .3em;
|
|
box-shadow: inset 0px 0px 0.01em .01em #969696;
|
|
overflow: hidden;
|
|
border-radius: var(--largeRadius);
|
|
}
|
|
|
|
.itemProgressBarForeground {
|
|
border-radius: var(--largeRadius);
|
|
background-color: var(--btnSubmitBorderColor);
|
|
}
|
|
|
|
.backgroundProgress>div {
|
|
background-color: var(--darkerGradientPoint);
|
|
}
|
|
|
|
.playbackProgress>div {
|
|
background-color: var(--btnSubmitBorderColor);
|
|
}
|
|
|
|
::-moz-progress-bar {
|
|
background: var(--btnSubmitBorderColor) !important;
|
|
border-radius: var(--smallRadius) inherit var(--smallRadius) 0;
|
|
}
|
|
|
|
::-webkit-progress-value {
|
|
background: var(--btnSubmitBorderColor) !important;
|
|
border-radius: var(--smallRadius) inherit var(--smallRadius) 0;
|
|
}
|
|
|
|
progress,
|
|
::-webkit-progress-bar {
|
|
background: var(--darkerGradientPoint) !important;
|
|
border: solid var(--borderColor) var(--borderWidth) !important;
|
|
border-radius: var(--smallRadius);
|
|
overflow: hidden;
|
|
}
|
|
|
|
progress+span {
|
|
color: var(--btnSubmitBorderColor) !important;
|
|
}
|
|
|
|
.selectLabel {
|
|
max-height: 2em;
|
|
}
|
|
|
|
.layout-mobile .mainDetailButtons {
|
|
margin-top: 2em;
|
|
}
|
|
|
|
.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;
|
|
padding-right: .5em;
|
|
place-content: center;
|
|
content: "Play";
|
|
}
|
|
|
|
.mainDrawer,
|
|
.drawer-open {
|
|
background-color: var(--drawerColor);
|
|
border-right: solid var(--borderColor) var(--borderWidth);
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
|
|
.mainDrawer-scrollContainer {
|
|
padding-bottom: 5vh;
|
|
}
|
|
|
|
.detailButton {
|
|
border-radius: var(--smallRadius);
|
|
border: solid var(--lighterBorderColor) var(--borderWidth);
|
|
padding: .5em .5em !important;
|
|
margin: 0.125em !important;
|
|
backdrop-filter: blur(.1em);
|
|
}
|
|
|
|
.btnHeaderSave.button-flat {
|
|
color: var(--btnSubmitBorderColor) !important;
|
|
gap: 0.3em;
|
|
border-radius: var(--smallRadius);
|
|
}
|
|
|
|
.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;
|
|
color: var(--dimTextColor);
|
|
}
|
|
|
|
.detailsGroupItem>.label {
|
|
color: var(--textColor);
|
|
}
|
|
|
|
.itemExternalLinks {
|
|
color: var(--textColor);
|
|
}
|
|
|
|
.itemTags,
|
|
.itemTags>a {
|
|
display: none;
|
|
font-size: unset !important;
|
|
font-weight: 200;
|
|
}
|
|
|
|
.detail-clamp-text {
|
|
text-align: start;
|
|
color: var(--dimTextColor);
|
|
}
|
|
|
|
.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: 11em;
|
|
}
|
|
|
|
.dialogBackdropOpened {
|
|
opacity: .66;
|
|
}
|
|
|
|
[dir=ltr] .actionsheetMenuItemIcon.check {
|
|
margin: 0 .45em 0 .45em !important;
|
|
}
|
|
|
|
.subtitleEditor-dropZone,
|
|
.imageEditor-dropZone {
|
|
border-radius: var(--largeRadius);
|
|
}
|
|
|
|
.actionSheetContent>h1 {
|
|
font-size: unset;
|
|
}
|
|
|
|
.formDialogHeaderTitle {
|
|
margin-inline: 0 !important;
|
|
text-align: center;
|
|
padding: 0 0.5em !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);
|
|
}
|
|
|
|
.checkboxContainer .emby-checkbox:checked+span+.checkboxOutline.multiSelectCheckboxOutline {
|
|
border-radius: var(--largeRadius) !important;
|
|
}
|
|
|
|
.cardText-secondary+.itemSelectionPanel>.checkboxContainer,
|
|
.cardText.cardTextCentered:not(.cardText-secondary, .cardText-first)+.itemSelectionPanel>.checkboxContainer {
|
|
height: calc(100% - 3.125em);
|
|
}
|
|
|
|
.cardFooter+.itemSelectionPanel>.checkboxContainer {
|
|
height: calc(100% - 3.75em);
|
|
}
|
|
|
|
.cardScalable+.itemSelectionPanel>.checkboxContainer {
|
|
height: calc(100% - 0em);
|
|
}
|
|
|
|
.checkboxContainer:hover .checkboxOutline:not(.multiSelectCheckboxOutline) {
|
|
border-color: var(--checkboxCheckedBgColor);
|
|
border-width: calc(2 * var(--borderWidth));
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.emby-checkbox:checked+span+.checkboxOutline:not(.multiSelectCheckboxOutline) {
|
|
box-shadow: none;
|
|
background: var(--checkboxCheckedBgColor);
|
|
border: var(--lighterBorderColor) solid var(--borderWidth);
|
|
}
|
|
|
|
.emby-checkbox:focus:not(:checked)+span+.checkboxOutline {
|
|
border-color: var(--highlightOutlineColor) !important;
|
|
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);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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: 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: 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;
|
|
}
|
|
|
|
.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: solid var(--borderColor) var(--borderWidth);
|
|
}
|
|
|
|
|
|
.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, .childrenItemsContainer .listItem, .activityLogListWidget .listItem) {
|
|
padding: 0.25em 0.25em 0.25em 1.5em !important;
|
|
}
|
|
|
|
[dir="ltr"] .listItem:not(.actionSheetMenuItem)[data-type="Episode"] {
|
|
padding: .5em 0.25em 0.5em 0.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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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:hover {
|
|
background: transparent !important;
|
|
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);
|
|
}
|
|
|
|
.upNextContainer .btnStartNow {
|
|
background-color: var(--btnSubmitColor);
|
|
border-color: var(--btnSubmitBorderColor);
|
|
}
|
|
|
|
.upNextContainer .upNextDialog-countdownText {
|
|
color: white;
|
|
}
|
|
|
|
.toast,
|
|
.upNextContainer {
|
|
background: var(--headerColor) !important;
|
|
border: solid var(--borderWidth) var(--borderColor) !important;
|
|
backdrop-filter: blur(1em);
|
|
}
|
|
|
|
.activeSession {
|
|
width: 98% !important;
|
|
max-width: 27rem !important;
|
|
}
|
|
|
|
.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%);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.inputLabelFocused,
|
|
.selectLabelFocused,
|
|
.textareaLabelFocused {
|
|
color: #fff;
|
|
}
|
|
|
|
.emby-select-withcolor:focus,
|
|
.emby-input:focus,
|
|
.emby-textarea:focus {
|
|
border-color: var(--highlightOutlineColor) !important;
|
|
outline: thin solid var(--highlightOutlineColor) !important;
|
|
}
|
|
|
|
.emby-select-withcolor:hover:not(.emby-select[disabled], :focus),
|
|
.emby-input:hover:not(:focus),
|
|
.emby-textarea:hover:not(:focus) {
|
|
border-color: var(--dimTextColor) !important;
|
|
}
|
|
|
|
.emby-select-withcolor>option {
|
|
color: inherit;
|
|
background-color: var(--selectorBackgroundColor);
|
|
}
|
|
|
|
.layout-mobile [dir=ltr] .infoWrapper {
|
|
padding-left: 34%;
|
|
}
|
|
|
|
[dir=ltr] .mediaInfoItem {
|
|
transform-origin: left;
|
|
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):not(.layout-tv .libraryPage) {
|
|
padding-top: 4.8em !important;
|
|
}
|
|
}
|
|
|
|
.layout-tv .headerLeft {
|
|
overflow: unset;
|
|
}
|
|
|
|
.mdl-spinner__circle {
|
|
border-color: var(--dimTextColor);
|
|
border-style: inset;
|
|
}
|
|
|
|
.subtitleappearance-preview {
|
|
border-radius: var(--smallRadius);
|
|
}
|
|
|
|
.infoBanner {
|
|
display: flex;
|
|
place-content: center;
|
|
background-color: var(--headerColor) !important;
|
|
border-radius: var(--largeRadius) !important;
|
|
border: solid var(--borderColor) var(--borderWidth) !important;
|
|
}
|
|
|
|
.sliderBubbleText {
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
fieldset {
|
|
border-radius: var(--smallRadius);
|
|
border-color: var(--borderColor) solid var(--borderWidth);
|
|
}
|
|
|
|
#serverActivityPage .MuiPaper-elevation2 {
|
|
border: solid var(--borderColor) var(--borderWidth) !important;
|
|
box-shadow: unset !important;
|
|
background-color: var(--tableBodyColor);
|
|
}
|
|
|
|
#serverActivityPage .MuiPaper-elevation2>.MuiBox-root,
|
|
#serverActivityPage .MuiTableRow-root.MuiTableRow-head,
|
|
#serverActivityPage .MuiTableRow-root {
|
|
background-color: var(--tableBodyColor) !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: 0.5rem;
|
|
}
|
|
|
|
.playerStats {
|
|
border-radius: var(--largeRadius);
|
|
}
|
|
|
|
#scenesContent .cardScalable:hover {
|
|
border-color: var(--dimTextColor) !important;
|
|
}
|
|
|
|
.progressring-spiner {
|
|
border-color: var(--btnSubmitBorderColor);
|
|
} |