6284 lines
198 KiB
CSS
6284 lines
198 KiB
CSS
/*! Netflin: a Netflix-style theme for Jellyfin (Modern layout) */
|
|
@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600;700;800&display=swap");
|
|
|
|
/* ═══════════════════════════════════════════════════════════════════════
|
|
* 1. Tokens
|
|
* ═══════════════════════════════════════════════════════════════════════ */
|
|
|
|
:root {
|
|
--nf-red: #e50914;
|
|
--nf-red-hover: #c11119;
|
|
|
|
--nf-bg: #101010;
|
|
--nf-bg-rgb: 16 16 16;
|
|
--nf-surface: #181818;
|
|
--nf-surface-2: #232323;
|
|
--nf-surface-3: #2f2f2f;
|
|
--nf-surface-4: #404040;
|
|
--nf-line: rgb(255 255 255 / 0.1);
|
|
--nf-outline: rgb(255 255 255 / 0.5);
|
|
|
|
--nf-text: #fff;
|
|
--nf-text-2: #e5e5e5;
|
|
--nf-text-dim: #b3b3b3;
|
|
--nf-text-mute: #8c8c8c;
|
|
|
|
--nf-fill-btn: rgb(109 109 110 / 0.7);
|
|
--nf-fill-btn-hover: rgb(109 109 110 / 0.4);
|
|
--nf-fill-disc: rgb(42 42 42 / 0.6);
|
|
--nf-fill-disc-hover: rgb(42 42 42 / 0.85);
|
|
--nf-fill-hover: rgb(255 255 255 / 0.08);
|
|
--nf-fill-panel: rgb(255 255 255 / 0.04);
|
|
--nf-fill-tag: rgb(255 255 255 / 0.12);
|
|
--nf-fill-white-hover: rgb(255 255 255 / 0.75);
|
|
--nf-fill-menu: rgb(24 24 24 / 0.96);
|
|
--nf-track: rgb(128 128 128 / 0.55);
|
|
--nf-scrim: rgb(0 0 0 / 0.7);
|
|
--nf-scrim-card: linear-gradient(0deg, rgb(0 0 0 / 0.75), rgb(0 0 0 / 0) 60%);
|
|
|
|
--nf-field-bg: rgb(22 22 22 / 0.7);
|
|
--nf-field-line: rgb(128 128 128 / 0.7);
|
|
--nf-field-line-hover: rgb(255 255 255 / 0.7);
|
|
|
|
--nf-success: #46d369;
|
|
--nf-warning: #e87c03;
|
|
--nf-error: #eb3942;
|
|
--nf-star: #f5c518;
|
|
|
|
--nf-font: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
--nf-font-brand: "Bebas Neue", var(--nf-font);
|
|
--nf-fs-h1: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem);
|
|
--nf-fs-h2: clamp(1.05rem, 0.7rem + 0.75vw, 1.5rem);
|
|
|
|
--nf-gutter: 3.3%;
|
|
|
|
--nf-radius-xs: 2px;
|
|
--nf-radius: 4px;
|
|
--nf-radius-lg: 6px;
|
|
|
|
--nf-shadow-1: 0 0.5em 1em -0.6em rgb(0 0 0 / 0.9);
|
|
--nf-shadow-2: 0 3px 10px rgb(0 0 0 / 0.75);
|
|
--nf-shadow-3: 0 1.5rem 3rem rgb(0 0 0 / 0.7);
|
|
--nf-shadow-disc: 0 1px 2px rgb(0 0 0 / 0.3), 0 6px 18px -4px rgb(0 0 0 / 0.55);
|
|
--nf-shadow-disc-hover: 0 1px 2px rgb(0 0 0 / 0.3), 0 10px 24px -6px rgb(0 0 0 / 0.65);
|
|
|
|
--nf-ease: cubic-bezier(0.5, 0, 0.1, 1);
|
|
--nf-ease-out: cubic-bezier(0.2, 0, 0, 1);
|
|
--nf-dur-1: 150ms;
|
|
--nf-dur-2: 250ms;
|
|
--nf-dur-3: 400ms;
|
|
|
|
--nf-focus: 2px solid #fff;
|
|
--nf-focus-offset: 2px;
|
|
|
|
--nf-icon-play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.67 4.5 20.67 12 7.67 19.5Z' fill='%23000' stroke='%23000' stroke-width='2.2' stroke-linejoin='round'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
/* ── Jellyfin palette ────────────────────────────────────────────────────── */
|
|
:root,
|
|
:root[data-theme] {
|
|
--jf-palette-background-default: var(--nf-bg);
|
|
--jf-palette-background-defaultChannel: var(--nf-bg-rgb);
|
|
--jf-palette-background-paper: var(--nf-surface);
|
|
--jf-palette-background-paperChannel: 24 24 24;
|
|
--jf-palette-AppBar-defaultBg: var(--nf-bg);
|
|
--jf-palette-AppBar-transparentBg: transparent;
|
|
--jf-palette-text-primary: var(--nf-text);
|
|
--jf-palette-text-primaryChannel: 255 255 255;
|
|
--jf-palette-text-secondary: var(--nf-text-dim);
|
|
--jf-palette-text-secondaryChannel: 179 179 179;
|
|
--jf-palette-primary-main: var(--nf-red);
|
|
--jf-palette-primary-mainChannel: 229 9 20;
|
|
--jf-palette-primary-light: var(--nf-red-hover);
|
|
--jf-palette-primary-dark: var(--nf-red-hover);
|
|
--jf-palette-primary-contrastText: #fff;
|
|
--jf-palette-secondary-main: var(--nf-red);
|
|
--jf-palette-secondary-mainChannel: 229 9 20;
|
|
--jf-palette-secondary-contrastText: #fff;
|
|
--jf-palette-error-light: var(--nf-red);
|
|
--jf-palette-error-main: var(--nf-error);
|
|
--jf-palette-error-mainChannel: 235 57 66;
|
|
--jf-palette-warning-main: var(--nf-warning);
|
|
--jf-palette-warning-mainChannel: 232 124 3;
|
|
--jf-palette-success-main: var(--nf-success);
|
|
--jf-palette-success-mainChannel: 70 211 105;
|
|
--jf-palette-info-main: #6d6d6e;
|
|
--jf-palette-info-mainChannel: 109 109 110;
|
|
--jf-palette-TableCell-border: var(--nf-line);
|
|
--jf-palette-Avatar-defaultBg: var(--nf-surface-3);
|
|
--jf-palette-LinearProgress-primaryBg: var(--nf-track);
|
|
--jf-palette-LinearProgress-secondaryBg: var(--nf-track);
|
|
--jf-palette-LinearProgress-errorBg: var(--nf-track);
|
|
--jf-palette-LinearProgress-infoBg: var(--nf-track);
|
|
--jf-palette-LinearProgress-successBg: var(--nf-track);
|
|
--jf-palette-LinearProgress-warningBg: var(--nf-track);
|
|
--jf-palette-divider: var(--nf-line);
|
|
--jf-palette-action-hover: var(--nf-fill-hover);
|
|
--jf-palette-action-focus: rgb(255 255 255 / 0.12);
|
|
--jf-palette-FilledInput-bg: var(--nf-field-bg);
|
|
--jf-palette-FilledInput-hoverBg: var(--nf-field-bg);
|
|
--jf-palette-FilledInput-borderColor: var(--nf-field-line);
|
|
--jf-palette-Button-inheritContainedBg: var(--nf-fill-btn);
|
|
--jf-palette-Button-inheritContainedHoverBg: var(--nf-fill-btn-hover);
|
|
--jf-palette-SnackbarContent-bg: var(--nf-surface-2);
|
|
--jf-palette-SnackbarContent-color: var(--nf-text-2);
|
|
--jf-card-borderRadius: var(--nf-radius);
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════════════════════════
|
|
* 2. Base
|
|
* ═══════════════════════════════════════════════════════════════════════ */
|
|
|
|
html,
|
|
body,
|
|
.backgroundContainer,
|
|
.mainDrawer,
|
|
.dialog {
|
|
background-color: var(--nf-bg);
|
|
}
|
|
|
|
html {
|
|
font-family: var(--nf-font);
|
|
color: var(--nf-text-2);
|
|
}
|
|
|
|
body,
|
|
h1, h2, h3, h4, h5, h6,
|
|
button, input, select, textarea,
|
|
.emby-button,
|
|
[class*="Mui"]:not(.MuiIcon-root, .material-icons) {
|
|
font-family: var(--nf-font);
|
|
}
|
|
|
|
* {
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
::selection {
|
|
background: var(--nf-red);
|
|
color: #fff;
|
|
}
|
|
|
|
body {
|
|
position: relative;
|
|
}
|
|
|
|
body::before {
|
|
content: "";
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: calc(env(safe-area-inset-bottom) + 5em);
|
|
background: linear-gradient(to top, var(--nf-bg) 0%, transparent 100%);
|
|
z-index: 100;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════════════════════════
|
|
* 3. App bar
|
|
* ═══════════════════════════════════════════════════════════════════════ */
|
|
|
|
.MuiAppBar-root.MuiAppBar-colorTransparent,
|
|
.MuiAppBar-root.MuiAppBar-colorDefault {
|
|
background: transparent;
|
|
box-shadow: none;
|
|
border: 0;
|
|
color: var(--nf-text-2);
|
|
transition: background-color var(--nf-dur-3) var(--nf-ease-out);
|
|
}
|
|
|
|
.MuiAppBar-root.MuiAppBar-colorTransparent {
|
|
background-image: linear-gradient(180deg, rgb(0 0 0 / 0.7) 10%, transparent);
|
|
}
|
|
|
|
.MuiAppBar-root.MuiAppBar-colorDefault {
|
|
background-color: rgb(var(--nf-bg-rgb) / 0.72);
|
|
-webkit-backdrop-filter: blur(18px) saturate(1.4);
|
|
backdrop-filter: blur(18px) saturate(1.4);
|
|
}
|
|
|
|
/* ── Nav links ───────────────────────────────────────────────────────────── */
|
|
.MuiAppBar-root .MuiStack-root > .MuiButton-root {
|
|
background: none !important;
|
|
color: var(--nf-text-2);
|
|
font-size: 0.875rem;
|
|
font-weight: 400;
|
|
letter-spacing: normal;
|
|
text-transform: none;
|
|
min-width: 0;
|
|
padding: 0.25rem 0;
|
|
flex: none;
|
|
margin-inline: 0 1.25rem;
|
|
white-space: nowrap;
|
|
transition: color var(--nf-dur-3) var(--nf-ease-out);
|
|
}
|
|
|
|
@media (max-width: 60em) {
|
|
.MuiAppBar-root .MuiToolbar-root:has(> .MuiStack-root > .MuiButton-root) {
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
.MuiAppBar-root .MuiToolbar-root > .MuiStack-root:has(> .MuiButton-root) {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
overflow-x: auto;
|
|
scrollbar-width: none;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 36em) {
|
|
.MuiAppBar-root .MuiToolbar-root:has(> .MuiStack-root > .MuiButton-root) {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.MuiAppBar-root .MuiToolbar-root > .MuiStack-root:has(> .MuiButton-root) {
|
|
order: 1;
|
|
flex-basis: 100%;
|
|
padding-bottom: 0.25rem;
|
|
}
|
|
|
|
.MuiAppBar-root .MuiToolbar-root > .MuiStack-root > .MuiButton-root:has(.MuiButton-startIcon > img) {
|
|
position: absolute; /* out of the scrolling links, onto the icons' row */
|
|
top: 0;
|
|
height: var(--nf-appbar);
|
|
}
|
|
|
|
.MuiAppBar-root .MuiToolbar-root > .MuiStack-root:has(> .MuiButton-root) + .MuiBox-root {
|
|
margin-left: auto;
|
|
}
|
|
}
|
|
|
|
.MuiAppBar-root .MuiStack-root > .MuiButton-root:hover {
|
|
color: var(--nf-text-dim);
|
|
}
|
|
|
|
.MuiAppBar-root .MuiStack-root > .MuiButton-root .MuiButton-startIcon {
|
|
display: none;
|
|
}
|
|
|
|
.MuiAppBar-root .MuiStack-root > .MuiButton-textPrimary {
|
|
color: var(--nf-text) !important;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.MuiAppBar-root .MuiStack-root > .MuiButton-root .MuiTouchRipple-root {
|
|
display: none;
|
|
}
|
|
|
|
/* ── Brand ───────────────────────────────────────────────────────────────── */
|
|
.MuiAppBar-root .MuiStack-root > .MuiButton-root:has(.MuiButton-startIcon > img) {
|
|
font-size: 0 !important;
|
|
margin-right: 2.5rem;
|
|
}
|
|
|
|
.MuiAppBar-root .MuiStack-root > .MuiButton-root:has(.MuiButton-startIcon > img)::before,
|
|
.MuiDrawer-paper > .MuiBox-root > .MuiList-root:first-child > li:first-child > a::before {
|
|
content: "JELLYFIN";
|
|
color: var(--nf-red);
|
|
font: 400 2.25rem/1 var(--nf-font-brand);
|
|
letter-spacing: 0.02em;
|
|
filter: drop-shadow(0 1px 6px rgb(0 0 0 / 0.35));
|
|
}
|
|
|
|
/* ── Icons and avatar ────────────────────────────────────────────────────── */
|
|
.MuiAppBar-root .MuiIconButton-root {
|
|
color: var(--nf-text);
|
|
}
|
|
|
|
.MuiAppBar-root .MuiIconButton-root:hover {
|
|
background: var(--nf-fill-hover);
|
|
}
|
|
|
|
.MuiAppBar-root .MuiAvatar-root,
|
|
.MuiAppBar-root .MuiToolbar-root > .MuiBox-root:last-child img {
|
|
border-radius: var(--nf-radius);
|
|
}
|
|
|
|
.MuiAppBar-root .MuiAvatar-root {
|
|
width: 1.75rem;
|
|
height: 1.75rem;
|
|
}
|
|
|
|
.MuiAppBar-root .MuiIconButton-root:has(> .MuiAvatar-root) {
|
|
padding: 0.4rem;
|
|
}
|
|
|
|
/* ── User menu ───────────────────────────────────────────────────────────── */
|
|
:is(#app-user-menu, #library-view-menu) .MuiMenu-paper {
|
|
min-width: 13.5rem;
|
|
margin-top: 0.4rem;
|
|
}
|
|
|
|
/* ── Library toolbar ─────────────────────────────────────────────────────── */
|
|
.MuiAppBar-root > .MuiToolbar-root:nth-child(2) {
|
|
padding-bottom: 1rem;
|
|
}
|
|
|
|
.MuiAppBar-root > .MuiToolbar-root:nth-child(2) > .MuiStack-root > .MuiButtonGroup-text ~ .MuiButtonGroup-text {
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
margin-left: 0.75rem;
|
|
}
|
|
|
|
.MuiAppBar-root > .MuiToolbar-root:nth-child(2) > .MuiStack-root > .MuiButtonGroup-text ~ .MuiButtonGroup-text > .MuiButton-root {
|
|
box-sizing: border-box;
|
|
width: 2rem;
|
|
min-width: 0;
|
|
height: 2rem;
|
|
padding: 0;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.MuiAppBar-root > .MuiToolbar-root:nth-child(2) > .MuiStack-root > .MuiButtonGroup-text ~ .MuiButtonGroup-text > .MuiButton-root:disabled {
|
|
opacity: 0.35;
|
|
}
|
|
|
|
.MuiAppBar-root > .MuiToolbar-root:nth-child(2) > .MuiButton-root {
|
|
color: var(--nf-text);
|
|
font-size: 2.1rem;
|
|
font-weight: 700;
|
|
letter-spacing: -0.01em;
|
|
text-transform: none;
|
|
padding-left: 0;
|
|
background: none;
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════════════════════════
|
|
* 4. Buttons, fields, menus, dialogs
|
|
* ═══════════════════════════════════════════════════════════════════════ */
|
|
|
|
/* ── Focus ───────────────────────────────────────────────────────────────── */
|
|
|
|
:is(a, button, [tabindex], .card, .listItem, .emby-tab-button):focus-visible {
|
|
outline: var(--nf-focus);
|
|
outline-offset: var(--nf-focus-offset);
|
|
}
|
|
|
|
/* ── Buttons ─────────────────────────────────────────────────────────────── */
|
|
|
|
.MuiButton-root {
|
|
text-transform: none;
|
|
border-radius: var(--nf-radius);
|
|
}
|
|
|
|
.MuiButton-containedPrimary,
|
|
.button-submit {
|
|
font-weight: 700;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.button-submit:focus {
|
|
background: var(--nf-red-hover);
|
|
}
|
|
|
|
.raised,
|
|
.fab,
|
|
.button-submit,
|
|
.button-delete,
|
|
.emby-button.raised {
|
|
border-radius: var(--nf-radius);
|
|
}
|
|
|
|
.raised:not(.button-submit, .button-delete),
|
|
.raised:not(.button-submit, .button-delete):focus,
|
|
.dashboardDocument .mainAnimatedPage .MuiButton-containedError {
|
|
background: var(--nf-fill-btn);
|
|
color: var(--nf-text);
|
|
}
|
|
|
|
.raised:not(.button-submit, .button-delete):hover,
|
|
.dashboardDocument .mainAnimatedPage .MuiButton-containedError:hover {
|
|
background: var(--nf-fill-btn-hover);
|
|
}
|
|
|
|
.button-flat.button-flat:hover,
|
|
.button-link.button-link {
|
|
color: inherit;
|
|
}
|
|
|
|
.button-flat:not(.detailButton, .cardOverlayButton):hover {
|
|
color: var(--nf-text);
|
|
}
|
|
|
|
.raised:is(.button-cancel, .btnCancel),
|
|
.raised:is(.button-cancel, .btnCancel):focus,
|
|
.upNextDialog .upNextDialog-button.btnHide,
|
|
body .sections.watchlist :is(.sort-button, .show-all-btn) {
|
|
background: transparent;
|
|
box-shadow: inset 0 0 0 1px var(--nf-outline);
|
|
color: var(--nf-text);
|
|
}
|
|
|
|
.raised:is(.button-cancel, .btnCancel):hover,
|
|
.upNextDialog .upNextDialog-button.btnHide:hover,
|
|
body .sections.watchlist :is(.sort-button, .show-all-btn):hover {
|
|
background: var(--nf-fill-hover);
|
|
box-shadow: inset 0 0 0 1px #fff;
|
|
}
|
|
|
|
:is(.formDialogContent, .dashboardDocument .mainAnimatedPage) .fab,
|
|
.mainDetailButtons .detailButton,
|
|
body #slides-container :is(.detail-button, .favorite-button, .watchlist-button, .arrow),
|
|
.MuiAppBar-root > .MuiToolbar-root:nth-child(2) > .MuiStack-root > .MuiButtonGroup-text ~ .MuiButtonGroup-text > .MuiButton-root,
|
|
.skip-button {
|
|
border: 2px solid var(--nf-outline);
|
|
background: var(--nf-fill-disc);
|
|
color: var(--nf-text);
|
|
}
|
|
|
|
:is(.formDialogContent, .dashboardDocument .mainAnimatedPage) .fab:hover,
|
|
.mainDetailButtons .detailButton:hover,
|
|
body #slides-container :is(.detail-button, .favorite-button, .watchlist-button, .arrow):hover,
|
|
.MuiAppBar-root > .MuiToolbar-root:nth-child(2) > .MuiStack-root > .MuiButtonGroup-text ~ .MuiButtonGroup-text > .MuiButton-root:not(:disabled):hover,
|
|
.skip-button:hover {
|
|
border-color: #fff;
|
|
background: var(--nf-fill-disc-hover);
|
|
color: var(--nf-text);
|
|
}
|
|
|
|
.MuiAppBar-root .MuiButtonGroup-contained {
|
|
gap: 0.5rem;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.MuiAppBar-root .MuiButtonGroup-contained > .MuiButton-containedPrimary {
|
|
border: 0 !important;
|
|
border-radius: var(--nf-radius) !important;
|
|
background: var(--nf-fill-btn);
|
|
color: #fff;
|
|
transition: background-color var(--nf-dur-1) var(--nf-ease-out);
|
|
}
|
|
|
|
.MuiAppBar-root .MuiButtonGroup-contained > .MuiButton-containedPrimary:hover {
|
|
background: var(--nf-fill-btn-hover);
|
|
}
|
|
|
|
.MuiAppBar-root .MuiButtonGroup-contained > .MuiButton-containedPrimary:first-child,
|
|
.upNextDialog .upNextDialog-button.btnStartNow {
|
|
background: #fff;
|
|
color: #000;
|
|
}
|
|
|
|
.MuiAppBar-root .MuiButtonGroup-contained > .MuiButton-containedPrimary:first-child:hover,
|
|
.upNextDialog .upNextDialog-button.btnStartNow:hover {
|
|
background: var(--nf-fill-white-hover);
|
|
}
|
|
|
|
.paper-icon-button-light:hover:not(:disabled),
|
|
.paper-icon-button-light:active:not(:disabled) {
|
|
background-color: var(--nf-fill-hover);
|
|
color: var(--nf-text);
|
|
}
|
|
|
|
/* ── Chips ───────────────────────────────────────────────────────────────── */
|
|
.MuiChip-root.MuiChip-filledDefault {
|
|
height: 1.6rem;
|
|
border-radius: var(--nf-radius-xs);
|
|
background: var(--nf-fill-tag);
|
|
color: var(--nf-text-2);
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.MuiChip-root.MuiChip-filledDefault .MuiChip-label {
|
|
padding: 0 0.55em;
|
|
}
|
|
|
|
/* ── Filter chips ────────────────────────────────────────────────────────── */
|
|
.dashboardDocument .MuiToggleButtonGroup-root .MuiToggleButton-root.MuiToggleButton-root,
|
|
.dashboardDocument .MuiChip-root.MuiChip-clickable.MuiChip-clickable,
|
|
#searchPage .smart-search-btn,
|
|
body .sections.watchlist .stats-range-chip,
|
|
.verticalSection .scrollSlider > a.emby-button.raised {
|
|
height: 2rem;
|
|
border: 1px solid var(--nf-line);
|
|
border-radius: var(--nf-radius);
|
|
background: var(--nf-surface-2);
|
|
color: var(--nf-text-2);
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.dashboardDocument .MuiToggleButtonGroup-root .MuiToggleButton-root.MuiToggleButton-root:hover,
|
|
.dashboardDocument .MuiChip-root.MuiChip-clickable.MuiChip-clickable:hover,
|
|
#searchPage .smart-search-btn:hover,
|
|
body .sections.watchlist .stats-range-chip:hover,
|
|
.verticalSection .scrollSlider > a.emby-button.raised:hover {
|
|
background: var(--nf-surface-3);
|
|
color: var(--nf-text);
|
|
}
|
|
|
|
.dashboardDocument .MuiToggleButtonGroup-root .MuiToggleButton-root.MuiToggleButton-root.Mui-selected,
|
|
.dashboardDocument .MuiChip-root.MuiChip-clickable.MuiChip-colorPrimary,
|
|
#searchPage .smart-search-btn.active,
|
|
body .sections.watchlist .stats-range-chip.is-active {
|
|
border-color: #fff;
|
|
background: #fff;
|
|
color: #000;
|
|
}
|
|
|
|
.dashboardDocument .MuiToggleButtonGroup-root .MuiToggleButton-root.MuiToggleButton-root,
|
|
#searchPage .smart-search-btn {
|
|
margin: 0;
|
|
padding: 0 0.875rem;
|
|
text-transform: none;
|
|
}
|
|
|
|
/* ── Panels ──────────────────────────────────────────────────────────────── */
|
|
.formDialogContent .paperList,
|
|
.formDialog .mediaInfoStream,
|
|
.trackSelections,
|
|
#itemDetailPage .programGuide .vertical-list,
|
|
.dashboardDocument .mainAnimatedPage :is(.MuiPaper-root, .MuiCard-root):not(.MuiAlert-root, .MuiAppBar-root),
|
|
.dashboardDocument .mainAnimatedPage .MuiList-root:not(.MuiPaper-root *),
|
|
.MuiAlert-root.MuiAlert-standard,
|
|
.dashboardDocument .mainAnimatedPage .checkboxList.paperList,
|
|
body .sections.watchlist .progress-card,
|
|
body .sections.watchlist .progress-card-completed,
|
|
body .sections.watchlist :is(.stat-card, .top-shows-container, .stats-chart-card, .stats-list-card) {
|
|
border: 1px solid var(--nf-line);
|
|
border-radius: var(--nf-radius-lg);
|
|
background: var(--nf-fill-panel);
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* ── Fields ──────────────────────────────────────────────────────────────── */
|
|
|
|
.emby-input.emby-input, /* doubled: core's lazy chunks can load after */
|
|
.emby-textarea.emby-textarea,
|
|
.emby-select-withcolor.emby-select-withcolor,
|
|
.MuiInputBase-root.MuiFilledInput-root,
|
|
.dashboardDocument .mainAnimatedPage div:has(> .MuiInputBase-root:not(.MuiFilledInput-root, .MuiOutlinedInput-root, .MuiInput-root)) {
|
|
border: 1px solid var(--nf-field-line);
|
|
border-radius: var(--nf-radius);
|
|
background: var(--nf-field-bg);
|
|
color: var(--nf-text);
|
|
transition: border-color var(--nf-dur-1) var(--nf-ease-out), box-shadow var(--nf-dur-1) var(--nf-ease-out);
|
|
}
|
|
|
|
.emby-select-withcolor > option {
|
|
background: var(--nf-surface-2);
|
|
color: var(--nf-text);
|
|
}
|
|
|
|
:is(.emby-input, .emby-textarea, .emby-select-withcolor):not(:disabled, .detailTrackSelect):hover,
|
|
.MuiInputBase-root.MuiFilledInput-root:hover:not(.Mui-disabled),
|
|
.dashboardDocument .mainAnimatedPage div:has(> .MuiInputBase-root:not(.MuiFilledInput-root, .MuiOutlinedInput-root, .MuiInput-root)):hover {
|
|
border-color: var(--nf-field-line-hover);
|
|
}
|
|
|
|
:is(.emby-input, .emby-textarea, .emby-select-withcolor):not(.detailTrackSelect):focus,
|
|
.MuiInputBase-root.MuiFilledInput-root.Mui-focused,
|
|
.dashboardDocument .mainAnimatedPage div:has(> .MuiInputBase-root.Mui-focused:not(.MuiFilledInput-root, .MuiOutlinedInput-root, .MuiInput-root)) {
|
|
border-color: #fff !important;
|
|
box-shadow: 0 0 0 1px #fff;
|
|
outline: none;
|
|
}
|
|
|
|
.inputLabel.inputLabel,
|
|
.selectLabel.selectLabel,
|
|
.textareaLabel.textareaLabel,
|
|
.checkboxListLabel.checkboxListLabel,
|
|
.paperListLabel.paperListLabel {
|
|
color: var(--nf-text-2);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.inputLabelFocused,
|
|
.selectLabelFocused,
|
|
.textareaLabelFocused {
|
|
color: var(--nf-text);
|
|
}
|
|
|
|
.fieldDescription {
|
|
color: var(--nf-text-mute);
|
|
margin-top: .75em;
|
|
}
|
|
|
|
/* ── Checkboxes ──────────────────────────────────────────────────────────── */
|
|
.checkboxOutline.checkboxOutline {
|
|
top: 50%;
|
|
translate: 0 -50%;
|
|
width: 1.25em;
|
|
height: 1.25em;
|
|
border: 1px solid var(--nf-field-line-hover);
|
|
border-radius: var(--nf-radius-xs);
|
|
background: transparent;
|
|
transition: background-color var(--nf-dur-1) var(--nf-ease-out), border-color var(--nf-dur-1) var(--nf-ease-out);
|
|
}
|
|
|
|
.checkboxOutline > .checkboxIcon {
|
|
font-size: 1.05em;
|
|
}
|
|
|
|
.emby-checkbox-label:hover .checkboxOutline,
|
|
.emby-checkbox:focus:not(:checked) + span + .checkboxOutline {
|
|
border-color: #fff;
|
|
}
|
|
|
|
.emby-checkbox.emby-checkbox:checked + span + .checkboxOutline {
|
|
background-color: #fff;
|
|
border-color: #fff;
|
|
}
|
|
|
|
.emby-checkbox.emby-checkbox:checked + span + .checkboxOutline > .checkboxIcon {
|
|
color: #000;
|
|
}
|
|
|
|
.emby-checkbox:focus-visible + span + .checkboxOutline {
|
|
outline: var(--nf-focus);
|
|
outline-offset: var(--nf-focus-offset);
|
|
}
|
|
|
|
/* ── Menus ───────────────────────────────────────────────────────────────── */
|
|
|
|
.MuiPaper-root.MuiMenu-paper,
|
|
.MuiPaper-root.MuiPopover-paper,
|
|
.actionSheet,
|
|
.kefinTweaks-popover,
|
|
.playerStats,
|
|
.iconOsd,
|
|
.upNextContainer {
|
|
border: 1px solid var(--nf-line);
|
|
border-radius: var(--nf-radius-lg) !important;
|
|
background: var(--nf-fill-menu) !important;
|
|
-webkit-backdrop-filter: blur(20px) saturate(1.4) !important;
|
|
backdrop-filter: blur(20px) saturate(1.4) !important;
|
|
box-shadow: var(--nf-shadow-2) !important;
|
|
}
|
|
|
|
.MuiMenu-list,
|
|
.actionSheetContent {
|
|
padding: 0.375rem 0;
|
|
}
|
|
|
|
.actionSheetContent {
|
|
border: 0;
|
|
border-radius: 0;
|
|
background: none !important;
|
|
}
|
|
|
|
.MuiMenuItem-root,
|
|
.actionSheet .actionSheetMenuItem {
|
|
gap: 0;
|
|
min-height: 0;
|
|
margin: 0;
|
|
padding: 0.55rem 1rem;
|
|
color: var(--nf-text-2);
|
|
font-size: 0.875rem;
|
|
transition: background-color var(--nf-dur-1) var(--nf-ease-out), color var(--nf-dur-1) var(--nf-ease-out);
|
|
}
|
|
|
|
.MuiMenuItem-root:hover,
|
|
.actionSheetMenuItem:hover {
|
|
background: var(--nf-fill-hover);
|
|
color: var(--nf-text);
|
|
}
|
|
|
|
.MuiMenuItem-root.Mui-selected,
|
|
.MuiMenuItem-root.Mui-selected:hover {
|
|
background: var(--nf-fill-hover);
|
|
color: var(--nf-text);
|
|
font-weight: 600;
|
|
}
|
|
|
|
:is(.MuiMenuItem-root, .actionSheetMenuItem) :is(.MuiListItemIcon-root, .actionsheetMenuItemIcon) {
|
|
min-width: 2rem;
|
|
margin: 0;
|
|
color: var(--nf-text-mute);
|
|
transition: color var(--nf-dur-1) var(--nf-ease-out);
|
|
}
|
|
|
|
:is(.MuiMenuItem-root, .actionSheetMenuItem):hover :is(.MuiListItemIcon-root, .actionsheetMenuItemIcon) {
|
|
color: var(--nf-text);
|
|
}
|
|
|
|
.MuiMenu-list > .MuiDivider-root,
|
|
.actionSheet .actionsheetDivider {
|
|
margin: 0.375rem 0;
|
|
}
|
|
|
|
.MuiMenuItem-root .MuiTypography-root {
|
|
font-size: inherit;
|
|
font-weight: inherit;
|
|
}
|
|
|
|
:is(.MuiMenuItem-root, .actionSheetMenuItem) :is(.MuiListItemIcon-root > *, .actionsheetMenuItemIcon) {
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.actionSheet .actionsheetMenuItemIcon {
|
|
margin: 0 !important;
|
|
}
|
|
|
|
.actionSheet .actionsheetListItemBody,
|
|
.actionSheet .actionSheetItemText {
|
|
padding: 0 !important;
|
|
font-size: inherit;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.actionSheet .actionSheetTitle {
|
|
margin: 0;
|
|
padding: 0.6rem 1rem 0.35rem;
|
|
}
|
|
|
|
.actionSheetMenuItem:has(.actionsheetMenuItemIcon.delete),
|
|
.actionSheetMenuItem:has(.actionsheetMenuItemIcon.delete) .actionsheetMenuItemIcon {
|
|
color: var(--nf-error);
|
|
}
|
|
|
|
.dialogBackdrop:has(+ .dialogContainer > .actionsheet-not-fullscreen) {
|
|
opacity: 0;
|
|
}
|
|
|
|
/* ── Dialogs ─────────────────────────────────────────────────────────────── */
|
|
|
|
.dialog:not(.actionSheet),
|
|
.formDialogHeader:not(.formDialogHeader-clear),
|
|
.formDialogFooter:not(.formDialogFooter-clear) {
|
|
background-color: var(--nf-surface);
|
|
}
|
|
|
|
.dialog:not(.actionSheet) {
|
|
box-shadow: var(--nf-shadow-3);
|
|
}
|
|
|
|
.dialog:not(.actionSheet, [class*="fullscreen"]) {
|
|
border-radius: var(--nf-radius-lg);
|
|
}
|
|
|
|
.dialogBackdropOpened {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* ── Form dialogs ────────────────────────────────────────────────────────── */
|
|
.formDialogHeader:not(.formDialogHeader-clear) {
|
|
gap: 0.25rem;
|
|
padding: 1rem 1rem 1rem 1.5rem;
|
|
border-bottom: 1px solid var(--nf-line);
|
|
}
|
|
|
|
.formDialogHeader:not(.formDialogHeader-clear):has(> .btnCancel:first-child:not(.hide)) {
|
|
padding-left: 0.75rem;
|
|
}
|
|
|
|
.formDialogHeaderTitle {
|
|
margin: 0;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.formDialogHeader .paper-icon-button-light {
|
|
color: var(--nf-text-dim);
|
|
}
|
|
|
|
.formDialogHeader .paper-icon-button-light:hover {
|
|
color: var(--nf-text);
|
|
}
|
|
|
|
.formDialog .dialogContentInner {
|
|
padding-top: 1.5rem;
|
|
padding-left: 1.5rem;
|
|
padding-right: 1.5rem;
|
|
}
|
|
|
|
.formDialog .dialog-content-centered {
|
|
max-width: 42rem;
|
|
margin: 0;
|
|
}
|
|
|
|
@media (min-width: 80em) and (min-height: 45em) {
|
|
.dialog-small:has(.dialog-content-centered) {
|
|
width: min(47rem, 60%);
|
|
height: auto;
|
|
max-height: 80%;
|
|
}
|
|
|
|
.dialog-small:has(.dialog-content-centered) .dialog-content-centered {
|
|
padding-bottom: 1.5rem;
|
|
}
|
|
}
|
|
|
|
.formDialogFooter:not(.formDialogFooter-clear) {
|
|
justify-content: flex-end;
|
|
gap: 0.5rem;
|
|
padding: 1rem 1.5rem;
|
|
border-top: 1px solid var(--nf-line);
|
|
}
|
|
|
|
.formDialogFooter:not(.formDialogFooter-clear) > .formDialogFooterItem,
|
|
.formDialogFooter:not(.formDialogFooter-clear) > .raised {
|
|
flex: 0 0 auto;
|
|
width: auto; /* .emby-button.block is 100% */
|
|
min-width: 7rem;
|
|
margin: 0 !important; /* core: margin !important */
|
|
}
|
|
|
|
.formDialogContent h2 {
|
|
color: var(--nf-text);
|
|
font-size: 1.125rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
:is(.formDialogContent, .dashboardDocument .mainAnimatedPage) .fab {
|
|
width: 2rem;
|
|
height: 2rem;
|
|
margin: 0 0 0 0.5rem;
|
|
padding: 0;
|
|
border-radius: 50%;
|
|
transition: border-color var(--nf-dur-1) var(--nf-ease-out), background-color var(--nf-dur-1) var(--nf-ease-out);
|
|
}
|
|
|
|
:is(.formDialogContent, .dashboardDocument .mainAnimatedPage) .fab .material-icons {
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.formDialogContent :is(.editableListviewContainer, .imageEditor-buttons) {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
}
|
|
|
|
.formDialogContent :is(.editableListviewContainer, .imageEditor-buttons) > h2 {
|
|
margin: 0;
|
|
}
|
|
|
|
.formDialogContent .editableListviewContainer > .paperList {
|
|
flex-basis: 100%;
|
|
}
|
|
|
|
.formDialogContent .paperList {
|
|
margin: 0.75rem 0 0;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.formDialogContent .paperList > .listItem + .listItem,
|
|
#itemDetailPage .programGuide .listItem + .listItem {
|
|
border-top: 1px solid var(--nf-line);
|
|
}
|
|
|
|
.formDialogContent .paperList .listItemBodyText:not(.secondary) {
|
|
color: var(--nf-text-2);
|
|
}
|
|
|
|
.formDialogContent .paperList .secondary {
|
|
color: var(--nf-text-mute);
|
|
}
|
|
|
|
.formDialogContent .paperList .listItem .paper-icon-button-light {
|
|
color: var(--nf-text-mute);
|
|
}
|
|
|
|
.formDialogContent .paperList .listItem .paper-icon-button-light:hover {
|
|
color: var(--nf-error);
|
|
}
|
|
|
|
.imageEditorCard .visualCardBox {
|
|
background: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.imageEditorCard .cardFooter {
|
|
padding: 0.4rem 0 0;
|
|
background: none;
|
|
}
|
|
|
|
.imageEditorCard .cardFooter .paper-icon-button-light {
|
|
color: var(--nf-text-mute);
|
|
}
|
|
|
|
.imageEditorCard .cardFooter .paper-icon-button-light:hover {
|
|
color: var(--nf-text);
|
|
}
|
|
|
|
.formDialog .mediaInfoContent {
|
|
width: auto;
|
|
margin: 0;
|
|
}
|
|
|
|
.formDialog .mediaInfoStream {
|
|
width: min(100%, 22rem);
|
|
margin: 1rem 1rem 0 0;
|
|
padding: 0.25rem 1.25rem 1rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.formDialog .mediaInfoLabel {
|
|
color: var(--nf-text-mute);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.formDialog .mediaInfoAttribute {
|
|
color: var(--nf-text-2);
|
|
}
|
|
|
|
.formDialog .mediaInfoContent .btnCopy {
|
|
color: var(--nf-text-mute);
|
|
}
|
|
|
|
.formDialog .mediaInfoContent .btnCopy:hover {
|
|
color: var(--nf-text);
|
|
}
|
|
|
|
/* ── Type ────────────────────────────────────────────────────────────────── */
|
|
|
|
#myPreferencesMenuPage .verticalSection:first-child > .headerUsername,
|
|
.dashboardDocument .mainAnimatedPage .MuiTypography-h1,
|
|
.dashboardDocument .content-primary > .verticalSection:first-child > .sectionTitleContainer > .sectionTitle,
|
|
body .sections.watchlist .tab-header h2 {
|
|
color: var(--nf-text);
|
|
font-size: var(--nf-fs-h1);
|
|
font-weight: 700;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.MuiDialog-paper .MuiDialogTitle-root,
|
|
.dashboardDocument .mainAnimatedPage .MuiTypography-h2,
|
|
.dashboardDocument .mainAnimatedPage h2.paperListLabel,
|
|
.userPreferencesPage form :is(.verticalSection > .sectionTitle, .MuiStack-root > h2.MuiTypography-h2),
|
|
.formDialogHeaderTitle {
|
|
color: var(--nf-text);
|
|
font-size: 1.25rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.actionSheet .actionSheetTitle,
|
|
#myPreferencesMenuPage .verticalSection:not(:first-child) > .sectionTitle,
|
|
.MuiDrawer-paper .MuiListSubheader-root,
|
|
.playerStats .playerStats-stat-header > .playerStats-stat-label,
|
|
.upNextDialog .upNextDialog-nextVideoText,
|
|
.formDialog:has(.menuSortBy):not(:has(.formDialogHeaderTitle)) .formDialogHeader + div > h2 {
|
|
color: var(--nf-text-mute);
|
|
font-size: 0.6875rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
/* ── Tooltips and notices ────────────────────────────────────────────────── */
|
|
|
|
.MuiTooltip-tooltip {
|
|
padding: 0.45rem 0.75rem;
|
|
border-radius: var(--nf-radius);
|
|
background: #fff;
|
|
color: #141414;
|
|
font: 700 0.8125rem/1.2 var(--nf-font);
|
|
box-shadow: var(--nf-shadow-2);
|
|
}
|
|
|
|
.MuiTooltip-arrow {
|
|
color: #fff;
|
|
}
|
|
|
|
.toast,
|
|
.MuiSnackbarContent-root {
|
|
border: 1px solid var(--nf-line);
|
|
border-radius: var(--nf-radius-lg);
|
|
box-shadow: var(--nf-shadow-2);
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════════════════════════
|
|
* 5. Rows and cards
|
|
* ═══════════════════════════════════════════════════════════════════════ */
|
|
|
|
.sectionTitle,
|
|
.sectionTitle-cards {
|
|
color: var(--nf-text-2);
|
|
font-size: var(--nf-fs-h2);
|
|
font-weight: 700;
|
|
letter-spacing: -0.005em;
|
|
margin-bottom: 0.15em;
|
|
}
|
|
|
|
.sectionTitleTextButton,
|
|
a.more,
|
|
.sectionTitle a {
|
|
color: inherit;
|
|
}
|
|
|
|
/* ── Row titles ──────────────────────────────────────────────────────────── */
|
|
.sectionTitle.sectionTitle {
|
|
line-height: 1.35;
|
|
}
|
|
|
|
:is(.sectionTitleTextButton, a.more) > .material-icons,
|
|
a.clearLink > .sectionTitle + svg,
|
|
.sectionTitle .material-icons {
|
|
flex: none;
|
|
width: 1em;
|
|
height: 1em;
|
|
align-self: flex-start;
|
|
translate: 0 0.25em;
|
|
color: var(--nf-text-mute);
|
|
font-size: var(--nf-fs-h2);
|
|
transition: transform var(--nf-dur-2) var(--nf-ease), color var(--nf-dur-2) var(--nf-ease-out);
|
|
}
|
|
|
|
a.clearLink > .sectionTitle + svg {
|
|
padding: 0;
|
|
}
|
|
|
|
:is(.sectionTitleTextButton, a.more, a.clearLink) > .sectionTitle {
|
|
transition: color var(--nf-dur-2) var(--nf-ease-out);
|
|
}
|
|
|
|
:is(.sectionTitleTextButton, a.more, a.clearLink):is(:hover, :focus-visible) > .sectionTitle {
|
|
color: var(--nf-text);
|
|
}
|
|
|
|
:is(.sectionTitleTextButton, a.more):is(:hover, :focus-visible) > .material-icons,
|
|
a.clearLink:is(:hover, :focus-visible) > .sectionTitle + svg,
|
|
.sectionTitle a:is(:hover, :focus-visible) .material-icons,
|
|
#myPreferencesMenuPage a.listItem-border:hover .listItem::after,
|
|
.dashboardDocument a.MuiButton-root:has(> .MuiTypography-h3):is(:hover, :focus-visible) .MuiButton-endIcon {
|
|
color: var(--nf-text);
|
|
transform: translateX(0.2em);
|
|
}
|
|
|
|
.sectionTitleContainer > a.clearLink:has(> button.more) {
|
|
align-self: center;
|
|
margin: 0 0 0.15em 1em;
|
|
padding: 0;
|
|
}
|
|
|
|
.sectionTitleContainer > a.clearLink > button.more.raised {
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
background: none;
|
|
box-shadow: none;
|
|
color: var(--nf-text-mute);
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
transition: color var(--nf-dur-2) var(--nf-ease-out);
|
|
}
|
|
|
|
.sectionTitleContainer > a.clearLink > button.more.raised::after {
|
|
content: "\e5cc"; /* chevron_right */
|
|
font-family: "Material Icons";
|
|
font-size: 1.35em;
|
|
font-weight: 400;
|
|
line-height: 1;
|
|
transition: transform var(--nf-dur-2) var(--nf-ease);
|
|
}
|
|
|
|
.sectionTitleContainer > a.clearLink:is(:hover, :focus-visible) > button.more.raised {
|
|
color: var(--nf-text);
|
|
}
|
|
|
|
.sectionTitleContainer > a.clearLink:is(:hover, :focus-visible) > button.more.raised::after {
|
|
transform: translateX(0.2em);
|
|
}
|
|
|
|
/* ── Cards ───────────────────────────────────────────────────────────────── */
|
|
.cardScalable,
|
|
.cardImageContainer,
|
|
.cardPadder,
|
|
.cardContent,
|
|
.cardOverlayContainer,
|
|
.blurhash-canvas {
|
|
border-radius: var(--nf-radius);
|
|
}
|
|
|
|
.cardBox:not(.visualCardBox) .cardPadder {
|
|
background-color: var(--nf-surface-2);
|
|
}
|
|
|
|
.cardPadder .cardImageIcon {
|
|
color: #3a3a3a;
|
|
}
|
|
|
|
/* ── Loading skeleton ────────────────────────────────────────────────────── */
|
|
.card :is(.blurhash-canvas, .cardImageContainer > div:not([class]) > canvas) {
|
|
display: none;
|
|
}
|
|
|
|
.card:has(> .cardBox > .cardScalable .cardImageContainer > div:not([class]) > span) {
|
|
--nf-skeleton-clock: paused;
|
|
}
|
|
|
|
.card:has(> .cardBox > .cardScalable :is(.cardImageContainer > div:not([class]) > :is(span, img[style*="opacity: 0"]), .cardImageContainer.lazy-hidden)),
|
|
.card:has(> .cardBox > .cardScalable :is(.cardImageContainer > div:not([class]) > :is(span, img[style*="opacity: 0"]), .cardImageContainer.lazy-hidden)) * {
|
|
animation: nf-skeleton-inert 10s;
|
|
animation-play-state: var(--nf-skeleton-clock, running);
|
|
}
|
|
|
|
.card:has(> .cardBox > .cardScalable :is(.cardImageContainer > div:not([class]) > :is(span, img[style*="opacity: 0"]), .cardImageContainer.lazy-hidden)) .cardText {
|
|
width: fit-content;
|
|
max-width: 100%;
|
|
animation: nf-skeleton-text 10s;
|
|
animation-play-state: var(--nf-skeleton-clock, running);
|
|
}
|
|
|
|
.card:has(> .cardBox > .cardScalable :is(.cardImageContainer > div:not([class]) > :is(span, img[style*="opacity: 0"]), .cardImageContainer.lazy-hidden)) :is(.cardPadder > .cardImageIcon, .cardImageContainer > .indicators, .cardImageContainer > .MuiLinearProgress-root),
|
|
.card:has(> .cardBox > .cardScalable :is(.cardImageContainer > div:not([class]) > :is(span, img[style*="opacity: 0"]), .cardImageContainer.lazy-hidden)) .cardText::before {
|
|
animation: nf-skeleton-hide 10s;
|
|
animation-play-state: var(--nf-skeleton-clock, running);
|
|
}
|
|
|
|
@keyframes nf-skeleton-inert {
|
|
from, to { pointer-events: none; }
|
|
}
|
|
|
|
@keyframes nf-skeleton-hide {
|
|
from, to { opacity: 0; pointer-events: none; }
|
|
}
|
|
|
|
@keyframes nf-skeleton-text {
|
|
from, to {
|
|
pointer-events: none;
|
|
--kefin-card-title-color: transparent;
|
|
color: transparent;
|
|
background: linear-gradient(var(--nf-surface-2), var(--nf-surface-2)) 0 50% / 100% 0.85em no-repeat content-box;
|
|
}
|
|
}
|
|
|
|
@keyframes nf-skeleton {
|
|
50% { opacity: 0.45; }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
.card:has(> .cardBox > .cardScalable :is(.cardImageContainer > div:not([class]) > :is(span, img[style*="opacity: 0"]), .cardImageContainer.lazy-hidden)) .cardPadder {
|
|
animation: nf-skeleton 1.6s ease-in-out 6;
|
|
animation-play-state: var(--nf-skeleton-clock, running);
|
|
}
|
|
|
|
.card:has(> .cardBox > .cardScalable :is(.cardImageContainer > div:not([class]) > :is(span, img[style*="opacity: 0"]), .cardImageContainer.lazy-hidden)) .cardText {
|
|
animation: nf-skeleton-text 10s, nf-skeleton 1.6s ease-in-out 6;
|
|
animation-play-state: var(--nf-skeleton-clock, running);
|
|
}
|
|
}
|
|
|
|
.defaultCardBackground,
|
|
[class*="defaultCardBackground"] {
|
|
background-color: var(--nf-surface-2) !important;
|
|
}
|
|
|
|
.card.card:not(.show-animation) { /* core's paint containment clips the zoom */
|
|
contain: layout style;
|
|
}
|
|
|
|
/* ── Card hover ──────────────────────────────────────────────────────────── */
|
|
@media (hover: hover) and (pointer: fine) {
|
|
:is(.card-hoverable, .chapterCard) .cardBox {
|
|
transition: transform var(--nf-dur-3) var(--nf-ease);
|
|
}
|
|
|
|
:is(.card-hoverable, .chapterCard):hover {
|
|
z-index: 2;
|
|
position: relative;
|
|
}
|
|
|
|
:is(.card-hoverable, .chapterCard):hover .cardBox {
|
|
transform: scale(1.06);
|
|
}
|
|
|
|
:is(.card-hoverable, .chapterCard):hover .cardScalable {
|
|
box-shadow: 0 0 0 1px var(--nf-line), var(--nf-shadow-1);
|
|
}
|
|
}
|
|
|
|
.emby-scroller {
|
|
overflow-y: visible;
|
|
}
|
|
|
|
/* ── Card overlay ────────────────────────────────────────────────────────── */
|
|
.cardOverlayContainer {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
align-content: flex-end;
|
|
justify-content: center;
|
|
gap: 0.25rem;
|
|
padding: 0.6rem;
|
|
background: var(--nf-scrim-card);
|
|
}
|
|
|
|
.cardOverlayContainer > .cardOverlayButton-br {
|
|
position: relative;
|
|
padding: 0;
|
|
}
|
|
|
|
.cardOverlayContainer > .cardImageContainer {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: auto;
|
|
height: auto;
|
|
}
|
|
|
|
:is(.backdropCard, .overflowBackdropCard, .smallBackdropCard) .cardOverlayContainer {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
:is(.backdropCard, .overflowBackdropCard, .smallBackdropCard) .cardOverlayContainer > .cardOverlayButton-br {
|
|
margin: 0 -0.35rem 0 auto;
|
|
}
|
|
|
|
.cardOverlayButton,
|
|
.cardOverlayButton-br,
|
|
.cardOverlayButton-br .cardOverlayButton {
|
|
color: var(--nf-text);
|
|
}
|
|
|
|
.cardOverlayButton:hover {
|
|
background: rgb(255 255 255 / 0.15);
|
|
}
|
|
|
|
/* ── Play disc ───────────────────────────────────────────────────────────── */
|
|
|
|
.cardOverlayContainer > .cardOverlayFab-primary,
|
|
.listItemImageButton,
|
|
.chapterCard .cardScalable > [class*="cardPadder"],
|
|
.layout-mobile :is(.backdropCard, .overflowBackdropCard, .smallBackdropCard) :is(.cardScalable > button.cardOverlayButton-br[data-action="play"], .cardScalable > a > .cardOverlayButton-br > .cardOverlayButton) {
|
|
--nf-rise: 0.35rem;
|
|
--nf-grow: 1;
|
|
width: 2.75rem;
|
|
height: 2.75rem;
|
|
min-width: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
border-radius: 50%;
|
|
background: var(--nf-icon-play) center / 50% no-repeat, #fff !important;
|
|
color: transparent !important;
|
|
box-shadow: var(--nf-shadow-disc);
|
|
transform: translateY(var(--nf-rise)) scale(var(--nf-grow));
|
|
transition: opacity var(--nf-dur-2) var(--nf-ease-out), transform var(--nf-dur-3) var(--nf-ease), box-shadow var(--nf-dur-2) var(--nf-ease-out);
|
|
}
|
|
|
|
:is(.cardOverlayFab-primary, .listItemImageButton) > :is(.material-icons, svg),
|
|
.layout-mobile :is(.backdropCard, .overflowBackdropCard, .smallBackdropCard) :is(.cardScalable > button.cardOverlayButton-br[data-action="play"], .cardScalable > a > .cardOverlayButton-br > .cardOverlayButton) > :is(.material-icons, svg) {
|
|
display: none;
|
|
}
|
|
|
|
.cardOverlayContainer > .cardOverlayFab-primary:hover,
|
|
.listItemImageButton:hover,
|
|
.chapterCard .cardScalable > [class*="cardPadder"]:hover {
|
|
--nf-grow: 1.08;
|
|
box-shadow: var(--nf-shadow-disc-hover);
|
|
transform: translateY(var(--nf-rise)) scale(var(--nf-grow));
|
|
transition: opacity var(--nf-dur-2) var(--nf-ease-out), transform var(--nf-dur-3) var(--nf-ease), box-shadow var(--nf-dur-2) var(--nf-ease-out);
|
|
}
|
|
|
|
.cardOverlayContainer > .cardOverlayFab-primary:active,
|
|
.listItemImageButton:active,
|
|
.chapterCard .cardScalable > [class*="cardPadder"]:active {
|
|
--nf-grow: 0.96;
|
|
transition-duration: var(--nf-dur-1);
|
|
}
|
|
|
|
.card:is(:hover, :focus-within) .cardOverlayFab-primary,
|
|
.listItem:is(:hover, :focus-within) .listItemImageButton {
|
|
--nf-rise: 0rem;
|
|
}
|
|
|
|
.cardOverlayContainer > .cardOverlayFab-primary,
|
|
.listItemImage .listItemImageButton {
|
|
position: absolute;
|
|
inset: 0;
|
|
margin: auto;
|
|
}
|
|
|
|
:is(.backdropCard, .overflowBackdropCard, .smallBackdropCard) .cardOverlayContainer > .cardOverlayFab-primary {
|
|
position: static;
|
|
margin: 0;
|
|
}
|
|
|
|
:is(.backdropCard, .overflowBackdropCard, .smallBackdropCard) .cardOverlayContainer > .cardOverlayFab-primary,
|
|
.layout-mobile :is(.backdropCard, .overflowBackdropCard, .smallBackdropCard) :is(.cardScalable > button.cardOverlayButton-br[data-action="play"], .cardScalable > a > .cardOverlayButton-br > .cardOverlayButton),
|
|
.layout-desktop #itemDetailPage .listItem-largeImage .listItemImageButton,
|
|
.chapterCard .cardScalable > [class*="cardPadder"],
|
|
#liveTvPage .vertical-wrap > .squareCard .cardOverlayContainer > .cardOverlayFab-primary {
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
}
|
|
|
|
:is(.backdropCard, .overflowBackdropCard, .smallBackdropCard) .cardOverlayContainer > .cardOverlayFab-primary:hover:not(:active),
|
|
.layout-desktop #itemDetailPage .listItem-largeImage .listItemImageButton:hover:not(:active),
|
|
.chapterCard .cardScalable > [class*="cardPadder"]:hover:not(:active),
|
|
#liveTvPage .vertical-wrap > .squareCard .cardOverlayContainer > .cardOverlayFab-primary:hover:not(:active) {
|
|
--nf-grow: 1.04;
|
|
}
|
|
|
|
.listItemImage {
|
|
position: relative;
|
|
}
|
|
|
|
.listItemImage:not(.listItemImage-large) .listItemImageButton {
|
|
width: 2rem;
|
|
height: 2rem;
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
.listItemImageButton {
|
|
opacity: 0;
|
|
}
|
|
|
|
.listItem:is(:hover, :focus-within) .listItemImageButton {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* ── Card text ───────────────────────────────────────────────────────────── */
|
|
.cardFooter {
|
|
padding-top: 0;
|
|
text-align: left;
|
|
}
|
|
|
|
.cardText,
|
|
.cardTextCentered,
|
|
.cardTextCentered > .textActionButton {
|
|
text-align: left !important; /* core sets center with !important */
|
|
}
|
|
|
|
.cardText {
|
|
--kefin-card-title-color: var(--nf-text-mute);
|
|
padding: 0.1rem 0.1em 0;
|
|
color: var(--nf-text-mute);
|
|
font-size: 0.8125rem;
|
|
font-weight: 400;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.cardText-first {
|
|
--kefin-card-title-color: var(--nf-text-2);
|
|
padding-top: 0.5rem;
|
|
color: var(--nf-text-2);
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.cardText > :is(a, button, .textActionButton) {
|
|
color: inherit;
|
|
font: inherit;
|
|
}
|
|
|
|
/* ── Progress ────────────────────────────────────────────────────────────── */
|
|
.itemProgressBar {
|
|
background: var(--nf-track);
|
|
height: 3px;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.MuiLinearProgress-root .MuiLinearProgress-bar:not([class*="barColorSuccess"], [class*="barColorWarning"], [class*="barColorError"], .MuiLinearProgress-bar2, [class*="bar2Buffer"]) {
|
|
background-color: var(--nf-red) !important;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.MuiLinearProgress-root.itemLinearProgress {
|
|
height: 3px;
|
|
border-radius: 0;
|
|
background-color: var(--nf-track) !important;
|
|
}
|
|
|
|
.starIcon {
|
|
color: var(--nf-star);
|
|
}
|
|
|
|
.innerCardFooter.fullInnerCardFooter {
|
|
background: none;
|
|
}
|
|
|
|
/* ── Watched badge ───────────────────────────────────────────────────────── */
|
|
.cardIndicators:has(> .playedIndicator) {
|
|
top: 0;
|
|
right: 0;
|
|
}
|
|
|
|
.cardIndicators > .playedIndicator,
|
|
body .sections.watchlist .movie-watched-badge {
|
|
align-items: flex-start;
|
|
justify-content: flex-end;
|
|
width: 2.1rem;
|
|
height: 2.1rem;
|
|
padding: 0.2rem;
|
|
border-radius: 0 var(--nf-radius) 0 0;
|
|
clip-path: polygon(0 0, 100% 0, 100% 100%);
|
|
}
|
|
|
|
.cardIndicators > .playedIndicator > :is(svg, .indicatorIcon),
|
|
body .sections.watchlist .movie-watched-badge > .material-icons {
|
|
width: 0.95rem;
|
|
height: 0.95rem;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.emby-scrollbuttons-button {
|
|
color: var(--nf-text);
|
|
}
|
|
|
|
/* ── Programme lists ─────────────────────────────────────────────────────── */
|
|
.libraryPage:has(.itemsContainer .card[data-type="Program"]) .itemsViewSettingsContainer .btnFilter {
|
|
display: none;
|
|
}
|
|
|
|
/* ── Buttons in rows ─────────────────────────────────────────────────────── */
|
|
.verticalSection .emby-button.raised,
|
|
.verticalSection .emby-button.button-flat {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.verticalSection .scrollSlider > a.emby-button.raised {
|
|
margin: 0 0.5rem 0 0;
|
|
padding: 0 0.875rem;
|
|
}
|
|
|
|
.verticalSection > h2.sectionTitle-cards.padded-left {
|
|
padding-top: 1em; /* as a .sectionTitleContainer, so the scroll arrows line up */
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════════════════════════
|
|
* 6. Library pages
|
|
* ═══════════════════════════════════════════════════════════════════════ */
|
|
|
|
.alphaPickerButton {
|
|
color: var(--nf-text-mute);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.alphaPickerButton:hover,
|
|
.alphaPickerButton-selected {
|
|
color: var(--nf-text);
|
|
background: none;
|
|
}
|
|
|
|
.emby-tab-button {
|
|
color: var(--nf-text-dim);
|
|
}
|
|
|
|
.emby-tab-button-active {
|
|
color: var(--nf-text);
|
|
font-weight: 700;
|
|
box-shadow: inset 0 -2px 0 #fff;
|
|
}
|
|
|
|
.MuiTabs-indicator.MuiTabs-indicator {
|
|
background-color: #fff;
|
|
}
|
|
|
|
.emby-tab-button:hover,
|
|
.emby-tab-button.show-focus:focus {
|
|
color: var(--nf-text);
|
|
}
|
|
|
|
/* ── List view ───────────────────────────────────────────────────────────── */
|
|
|
|
.itemsContainer.vertical-list:has(> .MuiBox-root > .listItem) {
|
|
padding-top: 1rem;
|
|
}
|
|
|
|
.vertical-list > .MuiBox-root > .listItem {
|
|
display: grid;
|
|
grid-template-columns: auto minmax(0, 1fr) auto;
|
|
grid-template-areas:
|
|
"image title buttons"
|
|
"image meta buttons";
|
|
align-items: center;
|
|
column-gap: 1rem;
|
|
padding: 0.5rem;
|
|
border: 0;
|
|
border-radius: var(--nf-radius-lg);
|
|
transition: background-color var(--nf-dur-2) var(--nf-ease-out);
|
|
}
|
|
|
|
.vertical-list > .MuiBox-root > .listItem:is(:hover, :focus-within) {
|
|
background: var(--nf-fill-hover);
|
|
}
|
|
|
|
.vertical-list > .MuiBox-root > .listItem > .listItemImage {
|
|
display: block; /* core hides it under 40em */
|
|
grid-area: image;
|
|
width: 3rem;
|
|
height: auto;
|
|
aspect-ratio: 2 / 3;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
border-radius: var(--nf-radius);
|
|
background: var(--nf-surface-2);
|
|
}
|
|
|
|
.vertical-list > .MuiBox-root > .listItem > .listItemBody {
|
|
grid-area: title;
|
|
align-self: end;
|
|
min-width: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.vertical-list > .MuiBox-root > .listItem .listItemBodyText {
|
|
margin: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
color: var(--nf-text);
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.vertical-list > .MuiBox-root > .listItem > .listItemMediaInfo {
|
|
display: flex; /* core hides it under 50em */
|
|
grid-area: meta;
|
|
align-self: start;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 0.25em 0.75em;
|
|
margin: 0.3rem 0 0;
|
|
color: var(--nf-text-dim);
|
|
font-size: 0.85rem;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.vertical-list > .MuiBox-root > .listItem > .listItemMediaInfo > .mediaInfoItem {
|
|
margin: 0;
|
|
}
|
|
|
|
.vertical-list > .MuiBox-root > .listItem > .listItemMediaInfo > .mediaInfoText:not(.mediaInfoOfficialRating) {
|
|
padding: 0;
|
|
border: 0;
|
|
background: none;
|
|
}
|
|
|
|
.vertical-list > .MuiBox-root > .listItem > .listItemMediaInfo svg {
|
|
font-size: 1.15rem;
|
|
}
|
|
|
|
.vertical-list > .MuiBox-root > .listItem > .listViewUserDataButtons {
|
|
grid-area: buttons;
|
|
}
|
|
|
|
.vertical-list > .MuiBox-root > .listItem > .listViewUserDataButtons > :is(.listItemButton, .paper-icon-button-light) {
|
|
color: var(--nf-text-mute);
|
|
}
|
|
|
|
.vertical-list > .MuiBox-root > .listItem > .listViewUserDataButtons > :is(.listItemButton, .paper-icon-button-light):hover {
|
|
color: var(--nf-text);
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════════════════════════
|
|
* 7. Detail page
|
|
* ═══════════════════════════════════════════════════════════════════════ */
|
|
|
|
:root {
|
|
--nf-hero-height: 100vh;
|
|
--nf-hero-logo: 24vh;
|
|
--nf-hero-logo-width: 36%;
|
|
--nf-hero-pad: 3.3vw;
|
|
--nf-hero-fs: clamp(15px, 8px + 0.55vw, 22px);
|
|
--nf-hero-veil: 0.98;
|
|
--nf-hero-blur: 22px;
|
|
--nf-appbar: 48px; /* MUI dense toolbar */
|
|
}
|
|
|
|
#itemDetailPage {
|
|
--nf-hero-band: calc(var(--nf-hero-fs) * (6.9 + var(--nf-band-subtitle, 0) + var(--nf-band-original, 0)) + var(--nf-hero-pad));
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.nameContainer .subtitle) {
|
|
--nf-band-subtitle: 2.3;
|
|
--nf-hero-height: 65vh;
|
|
--nf-hero-logo: 19vh;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.nameContainer .originalTitle:not(.hide)) {
|
|
--nf-band-original: 1.8;
|
|
}
|
|
|
|
.itemName,
|
|
.parentName {
|
|
color: var(--nf-text);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.mediaInfoOfficialRating,
|
|
.mediaInfoText {
|
|
border-color: var(--nf-outline);
|
|
border-radius: var(--nf-radius-xs);
|
|
}
|
|
|
|
.detailRibbon {
|
|
background: transparent;
|
|
}
|
|
|
|
/* ── Hero: backdrop ──────────────────────────────────────────────────────── */
|
|
|
|
.layout-desktop body:has(#itemDetailPage:not(.hide) .detailImageContainer :is(.portraitCard, .backdropCard)):not(:has(#itemDetailPage:not(.hide) .detailImageContainer .cardImageIcon.person, #itemDetailPage:not(.hide) .programGuideSection:not(.hide))) .backgroundContainer.withBackdrop {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.detailImageContainer :is(.portraitCard, .backdropCard), .recordingFields .recordingButton):not(:has(.detailImageContainer .cardImageIcon.person, .programGuideSection:not(.hide))) .itemBackdrop {
|
|
height: var(--nf-hero-height);
|
|
margin-top: calc(-1 * var(--nf-appbar));
|
|
background-attachment: scroll;
|
|
background-position: center 20%;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.detailImageContainer :is(.portraitCard, .backdropCard), .recordingFields .recordingButton):not(:has(.detailImageContainer .cardImageIcon.person, .programGuideSection:not(.hide))) .itemBackdrop::after,
|
|
.layout-desktop #itemDetailPage:has(.recordingFields:not(.hide) .recordingButton):not(:has(.detailImageContainer .cardImageIcon.person, .programGuideSection:not(.hide))) .detailPagePrimaryContainer > .detailImageContainer .cardScalable::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
background:
|
|
linear-gradient(180deg, rgb(0 0 0 / 0.6) 0%, transparent 20%),
|
|
linear-gradient(77deg, rgb(0 0 0 / 0.8) 0%, rgb(0 0 0 / 0.35) 40%, transparent 70%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.detailImageContainer :is(.portraitCard, .backdropCard), .recordingFields .recordingButton):not(:has(.detailImageContainer .cardImageIcon.person, .programGuideSection:not(.hide))) .detailImageContainer {
|
|
display: none;
|
|
}
|
|
|
|
/* ── Hero: episode still ─────────────────────────────────────────────────── */
|
|
.layout-desktop #itemDetailPage:has(.detailImageContainer .backdropCard):not(:has(.detailImageContainer .cardImageIcon.person, .programGuideSection:not(.hide))) .detailPagePrimaryContainer > .detailImageContainer {
|
|
--nf-still-w: min(32vw, 44rem);
|
|
display: block;
|
|
position: absolute;
|
|
right: var(--nf-gutter);
|
|
top: calc(var(--nf-hero-band) - var(--nf-hero-pad) - var(--nf-still-w) * 9 / 16);
|
|
width: var(--nf-still-w);
|
|
z-index: 3;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.detailImageContainer .backdropCard):not(:has(.detailImageContainer .cardImageIcon.person, .programGuideSection:not(.hide))) .detailPagePrimaryContainer > .detailImageContainer .card {
|
|
position: relative !important;
|
|
float: none;
|
|
left: 0 !important;
|
|
top: 0;
|
|
width: 100% !important;
|
|
max-width: none;
|
|
margin: 0;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.detailImageContainer .backdropCard):not(:has(.detailImageContainer .cardImageIcon.person, .programGuideSection:not(.hide))) .detailPagePrimaryContainer > .detailImageContainer .cardScalable {
|
|
border-radius: var(--nf-radius-lg);
|
|
box-shadow:
|
|
0 0 0 1px rgb(255 255 255 / 0.14),
|
|
0 1.2em 2.5em rgb(0 0 0 / 0.6);
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.detailImageContainer :is(.portraitCard, .backdropCard), .recordingFields .recordingButton):not(:has(.detailImageContainer .cardImageIcon.person, .programGuideSection:not(.hide))) .detailLogo {
|
|
display: block;
|
|
left: var(--nf-gutter);
|
|
right: calc(100% - var(--nf-gutter) - var(--nf-hero-logo-width));
|
|
width: auto;
|
|
height: var(--nf-hero-logo);
|
|
top: calc(var(--nf-hero-height) - var(--nf-appbar) - var(--nf-hero-band) - var(--nf-hero-logo));
|
|
background-position: left bottom;
|
|
background-size: contain;
|
|
filter: drop-shadow(0 2px 12px rgb(0 0 0 / 0.5));
|
|
z-index: 3;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.detailImageContainer :is(.portraitCard, .backdropCard), .recordingFields .recordingButton):not(:has(.detailImageContainer .cardImageIcon.person, .programGuideSection:not(.hide))) .detailLogo:not(.hide) ~ .detailPageWrapperContainer .nameContainer > .itemName.parentNameLast {
|
|
display: none;
|
|
}
|
|
|
|
/* ── Hero: info block ────────────────────────────────────────────────────── */
|
|
|
|
.layout-desktop #itemDetailPage:has(.detailImageContainer :is(.portraitCard, .backdropCard), .recordingFields .recordingButton):not(:has(.detailImageContainer .cardImageIcon.person, .programGuideSection:not(.hide))) .detailPageWrapperContainer {
|
|
margin-top: calc(-1 * var(--nf-hero-band));
|
|
min-height: 0;
|
|
position: relative;
|
|
z-index: 2;
|
|
background: none; /* core: noBackdropTransparency */
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.detailImageContainer :is(.portraitCard, .backdropCard), .recordingFields .recordingButton):not(:has(.detailImageContainer .cardImageIcon.person, .programGuideSection:not(.hide))) .detailPageWrapperContainer::before {
|
|
--nf-veil-rise: calc(var(--nf-hero-logo));
|
|
--nf-veil-ramp: calc(var(--nf-veil-rise) + var(--nf-hero-band) - var(--nf-hero-pad) + 0.5em);
|
|
content: "";
|
|
position: absolute;
|
|
top: calc(-1 * var(--nf-veil-rise));
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: -1;
|
|
background: rgb(var(--nf-bg-rgb) / var(--nf-hero-veil));
|
|
-webkit-backdrop-filter: blur(var(--nf-hero-blur)) saturate(1.15);
|
|
backdrop-filter: blur(var(--nf-hero-blur)) saturate(1.15);
|
|
--nf-veil-mask: linear-gradient(180deg,
|
|
transparent 0,
|
|
rgb(0 0 0 / 0.3) calc(var(--nf-veil-ramp) * 0.15),
|
|
rgb(0 0 0 / 0.52) calc(var(--nf-veil-ramp) * 0.3),
|
|
rgb(0 0 0 / 0.68) calc(var(--nf-veil-ramp) * 0.45),
|
|
rgb(0 0 0 / 0.8) calc(var(--nf-veil-ramp) * 0.6),
|
|
rgb(0 0 0 / 0.89) calc(var(--nf-veil-ramp) * 0.75),
|
|
rgb(0 0 0 / 0.96) calc(var(--nf-veil-ramp) * 0.88),
|
|
#000 var(--nf-veil-ramp));
|
|
-webkit-mask-image: var(--nf-veil-mask);
|
|
mask-image: var(--nf-veil-mask);
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* ── Hero: collections ───────────────────────────────────────────────────── */
|
|
.layout-desktop #itemDetailPage:has(.collectionItems:not(.hide)) {
|
|
--nf-hero-height: calc(var(--nf-hero-band) + 16vh);
|
|
--nf-hero-logo: calc(16vh - var(--nf-appbar) - 1.5rem);
|
|
--nf-content-top: 0.75em;
|
|
--nf-children-gap: 0;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.collectionItems:not(.hide)):has(.detailImageContainer :is(.portraitCard, .backdropCard), .recordingFields .recordingButton):not(:has(.detailImageContainer .cardImageIcon.person, .programGuideSection:not(.hide))) .detailPageWrapperContainer::before {
|
|
-webkit-mask-image: var(--nf-veil-mask), linear-gradient(to top right, #000 50%, transparent);
|
|
mask-image: var(--nf-veil-mask), linear-gradient(to top right, #000 50%, transparent);
|
|
-webkit-mask-composite: source-in;
|
|
mask-composite: intersect;
|
|
}
|
|
|
|
#itemDetailPage .collectionItems :is(.sectionTitleContainer, .itemsContainer) {
|
|
padding-inline: 0; /* the section is already on the gutter */
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.detailImageContainer :is(.portraitCard, .backdropCard), .recordingFields .recordingButton):not(:has(.detailImageContainer .cardImageIcon.person, .programGuideSection:not(.hide))) .detailRibbon {
|
|
text-shadow: 0 1px 10px rgb(0 0 0 / 0.65);
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-end;
|
|
align-items: stretch;
|
|
box-sizing: border-box;
|
|
height: auto;
|
|
min-height: var(--nf-hero-band);
|
|
margin-top: 0;
|
|
padding: 0 var(--nf-gutter) var(--nf-hero-pad);
|
|
font-size: var(--nf-hero-fs);
|
|
text-align: left;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.detailImageContainer :is(.portraitCard, .backdropCard), .recordingFields .recordingButton):not(:has(.detailImageContainer .cardImageIcon.person, .programGuideSection:not(.hide))) :is(.itemMiscInfo-primary, .mainDetailButtons) {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.detailImageContainer :is(.portraitCard, .backdropCard), .recordingFields .recordingButton):not(:has(.detailImageContainer .cardImageIcon.person, .programGuideSection:not(.hide))) .detailRibbon > .infoWrapper {
|
|
flex: none;
|
|
max-width: 60%;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.detailImageContainer :is(.portraitCard, .backdropCard), .recordingFields .recordingButton):not(:has(.detailImageContainer .cardImageIcon.person, .programGuideSection:not(.hide))) .nameContainer {
|
|
display: block;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.detailImageContainer :is(.portraitCard, .backdropCard), .recordingFields .recordingButton):not(:has(.detailImageContainer .cardImageIcon.person, .programGuideSection:not(.hide))) .itemName {
|
|
font-size: 2.8em;
|
|
letter-spacing: -0.02em;
|
|
line-height: 1.1;
|
|
white-space: normal;
|
|
text-shadow: 0 2px 16px rgb(0 0 0 / 0.5);
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.detailImageContainer :is(.portraitCard, .backdropCard), .recordingFields .recordingButton):not(:has(.detailImageContainer .cardImageIcon.person, .programGuideSection:not(.hide))) .nameContainer > .itemName:not(.parentNameLast),
|
|
.layout-desktop #itemDetailPage:has(.detailImageContainer :is(.portraitCard, .backdropCard), .recordingFields .recordingButton):not(:has(.detailImageContainer .cardImageIcon.person, .programGuideSection:not(.hide))) .nameContainer > .parentName ~ .itemName {
|
|
font-size: 1.6em;
|
|
font-weight: 700;
|
|
letter-spacing: -0.01em;
|
|
line-height: 1.15;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.detailImageContainer :is(.portraitCard, .backdropCard), .recordingFields .recordingButton):not(:has(.detailImageContainer .cardImageIcon.person, .programGuideSection:not(.hide))) .nameContainer > .itemName.originalTitle {
|
|
font-size: 1em;
|
|
font-weight: 500;
|
|
letter-spacing: 0;
|
|
line-height: 1.3;
|
|
color: var(--nf-text-dim);
|
|
margin: 0.3em 0 0;
|
|
text-shadow: none;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.detailImageContainer :is(.portraitCard, .backdropCard), .recordingFields .recordingButton):not(:has(.detailImageContainer .cardImageIcon.person, .programGuideSection:not(.hide))) .itemMiscInfo-primary {
|
|
color: var(--nf-text-2);
|
|
font-size: 1.05em;
|
|
font-weight: 500;
|
|
gap: 0.25em 0.75em;
|
|
margin: 0.6em 0 0 !important; /* core sets margin-bottom inline */
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.detailImageContainer :is(.portraitCard, .backdropCard), .recordingFields .recordingButton):not(:has(.detailImageContainer .cardImageIcon.person, .programGuideSection:not(.hide))) .itemMiscInfo-primary > .mediaInfoItem {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.detailImageContainer :is(.portraitCard, .backdropCard), .recordingFields .recordingButton):not(:has(.detailImageContainer .cardImageIcon.person, .programGuideSection:not(.hide))) .itemMiscInfo-primary > .mediaInfoOfficialRating {
|
|
padding: 0.05em 0.45em;
|
|
font-size: 0.85em;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
:root .anime-tag-badge.anime-tag-badge.colored {
|
|
height: 1.6em;
|
|
padding: 0 0.55em !important;
|
|
border: 0;
|
|
border-radius: var(--nf-radius-xs);
|
|
color: var(--nf-text-2);
|
|
font-weight: 600;
|
|
line-height: 1.6em;
|
|
text-shadow: none;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.detailImageContainer :is(.portraitCard, .backdropCard), .recordingFields .recordingButton):not(:has(.detailImageContainer .cardImageIcon.person, .programGuideSection:not(.hide))) .itemMiscInfo .endsAt {
|
|
display: block;
|
|
color: var(--nf-text-dim);
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.detailImageContainer :is(.portraitCard, .backdropCard), .recordingFields .recordingButton):not(:has(.detailImageContainer .cardImageIcon.person, .programGuideSection:not(.hide))) .mainDetailButtons {
|
|
gap: 0.65em;
|
|
margin: 1.3em 0 0;
|
|
font-size: 1em;
|
|
}
|
|
|
|
/* ── Hero: body ──────────────────────────────────────────────────────────── */
|
|
|
|
.layout-desktop #itemDetailPage:has(.detailImageContainer :is(.portraitCard, .backdropCard), .recordingFields .recordingButton):not(:has(.detailImageContainer .cardImageIcon.person, .programGuideSection:not(.hide))) .detailPagePrimaryContent {
|
|
padding: var(--nf-content-top, 3.5em) var(--nf-gutter) 0 !important;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.detailImageContainer :is(.portraitCard, .backdropCard), .recordingFields .recordingButton):not(:has(.detailImageContainer .cardImageIcon.person, .programGuideSection:not(.hide))) .detailSection {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1.7fr) minmax(20em, 1fr);
|
|
column-gap: 4vw;
|
|
row-gap: 1.75em;
|
|
align-items: start;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.detailImageContainer :is(.portraitCard, .backdropCard), .recordingFields .recordingButton):not(:has(.detailImageContainer .cardImageIcon.person, .programGuideSection:not(.hide))) .detailSection > * {
|
|
grid-column: 1 / -1;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.detailImageContainer :is(.portraitCard, .backdropCard), .recordingFields .recordingButton):not(:has(.detailImageContainer .cardImageIcon.person, .programGuideSection:not(.hide))) .detailSection > .detailSectionContent {
|
|
grid-column: 1;
|
|
grid-row: 1;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.detailImageContainer :is(.portraitCard, .backdropCard), .recordingFields .recordingButton):not(:has(.detailImageContainer .cardImageIcon.person, .programGuideSection:not(.hide))) .detailSection > .itemDetailsGroup {
|
|
grid-column: 1;
|
|
grid-row: 2;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.detailImageContainer :is(.portraitCard, .backdropCard), .recordingFields .recordingButton):not(:has(.detailImageContainer .cardImageIcon.person, .programGuideSection:not(.hide))) .detailSection > .trackSelections {
|
|
grid-column: 2;
|
|
grid-row: 1 / span 2;
|
|
margin: 0;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.detailImageContainer :is(.portraitCard, .backdropCard), .recordingFields .recordingButton):not(:has(.detailImageContainer .cardImageIcon.person, .programGuideSection:not(.hide))) .detailSection:has(> .trackSelections.hide) {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.detailImageContainer :is(.portraitCard, .backdropCard), .recordingFields .recordingButton):not(:has(.detailImageContainer .cardImageIcon.person, .programGuideSection:not(.hide))) .detailSection > :is(.nextUpSection, #listChildrenCollapsible, .programGuideSection, .collectionItems) {
|
|
margin-top: var(--nf-children-gap, 1.5em);
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.detailImageContainer :is(.portraitCard, .backdropCard), .recordingFields .recordingButton):not(:has(.detailImageContainer .cardImageIcon.person, .programGuideSection:not(.hide))) .detailPageSecondaryContainer {
|
|
padding-top: 1.5em;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.detailImageContainer :is(.portraitCard, .backdropCard), .recordingFields .recordingButton):not(:has(.detailImageContainer .cardImageIcon.person, .programGuideSection:not(.hide))) .detailLogo:not(.hide) ~ .detailPageWrapperContainer .nameContainer > .parentName {
|
|
display: none;
|
|
}
|
|
|
|
/* ── Episodes ────────────────────────────────────────────────────────────── */
|
|
|
|
.layout-desktop #itemDetailPage .vertical-list:has(> .listItem-largeImage) {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(min(24em, 100%), 1fr));
|
|
gap: 2.2em 1.4vw;
|
|
padding-right: 0;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage .listItem-largeImage {
|
|
display: block;
|
|
padding: 0.6em 0.6em 0.9em;
|
|
margin: -0.6em -0.6em -0.9em;
|
|
border-radius: var(--nf-radius-lg);
|
|
background: transparent;
|
|
transition: background-color var(--nf-dur-2) var(--nf-ease-out);
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage .listItem-largeImage:hover,
|
|
.layout-desktop #itemDetailPage .listItem-largeImage:focus-within {
|
|
background: var(--nf-fill-hover);
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage .listItem-largeImage > .listItem-content {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
grid-template-areas:
|
|
"image image"
|
|
"title buttons"
|
|
"meta meta"
|
|
"overview overview";
|
|
align-items: center;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage .listItem-largeImage .listItemImage-large {
|
|
grid-area: image;
|
|
position: relative;
|
|
isolation: isolate;
|
|
width: 100%;
|
|
height: auto;
|
|
aspect-ratio: 16 / 9;
|
|
margin: 0;
|
|
border-radius: var(--nf-radius);
|
|
background-size: cover;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage .listItem-largeImage .listItemImage-large::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: -1;
|
|
background: inherit;
|
|
background-size: cover;
|
|
background-position: center;
|
|
transition: transform 0.6s var(--nf-ease);
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage .listItem-largeImage:hover .listItemImage-large::before {
|
|
transform: scale(1.04);
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage .listItem-largeImage .listItemBody {
|
|
display: contents;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage .listItem-largeImage .listItemBodyText:first-child {
|
|
grid-area: title;
|
|
min-width: 0;
|
|
padding-top: 0.7em;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
color: var(--nf-text);
|
|
font-size: 1.02em;
|
|
font-weight: 700;
|
|
margin-bottom: 0.2em;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage .listItem-largeImage .listItemMediaInfo {
|
|
grid-area: meta;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 0.25em 0.75em;
|
|
white-space: nowrap;
|
|
color: var(--nf-text-dim);
|
|
font-size: 0.85rem;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage .listItem-largeImage .listItemMediaInfo > .mediaInfoItem {
|
|
margin: 0;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage .listItem-largeImage .listItemMediaInfo .starIcon {
|
|
margin-right: 0.15em;
|
|
font-size: 1.25em;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage .listItem-largeImage .listItemMediaInfo > .anime-tag-badge {
|
|
font-size: 0.6875rem;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage .listItem-largeImage .listItem-overview {
|
|
grid-area: overview;
|
|
color: var(--nf-text-mute);
|
|
font-size: 0.88em;
|
|
line-height: 1.45;
|
|
margin-top: 0.5em;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 3;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
white-space: normal;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage .listItem-largeImage .listViewUserDataButtons {
|
|
grid-area: buttons;
|
|
padding: 0.7em 0 0 0.5em;
|
|
gap: 0;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage .listItem-largeImage .listItemButton {
|
|
color: var(--nf-text-mute);
|
|
font-size: 0.85em;
|
|
padding: 0.35em;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage .listItem-largeImage .listItemButton:hover {
|
|
color: var(--nf-text);
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage .listItem-largeImage .listItem-bottomoverview {
|
|
display: none;
|
|
}
|
|
|
|
/* ── KefinTweaks breadcrumbs ─────────────────────────────────────────────── */
|
|
|
|
.MuiAppBar-root .MuiToolbar-root:has(.kefinTweaks-breadcrumbs-wrapper) {
|
|
display: flex; /* KefinTweaks makes it a 3-column grid */
|
|
}
|
|
|
|
.kefinTweaks-breadcrumbs-wrapper--modern {
|
|
position: absolute;
|
|
top: 100%;
|
|
left: var(--nf-gutter);
|
|
margin: 0;
|
|
transition: opacity var(--nf-dur-2) var(--nf-ease-out);
|
|
}
|
|
|
|
.kefinTweaks-breadcrumbs-wrapper--modern .kefinTweaks-breadcrumbs {
|
|
padding-left: 0;
|
|
}
|
|
|
|
.MuiAppBar-colorDefault .kefinTweaks-breadcrumbs-wrapper--modern {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.kefinTweaks-breadcrumbs {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 0.15rem 0.5rem;
|
|
font-size: 0.85rem;
|
|
text-shadow: 0 1px 6px rgb(0 0 0 / 0.7);
|
|
}
|
|
|
|
.kefinTweaks-breadcrumb-element {
|
|
color: var(--nf-text-dim);
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: color var(--nf-dur-1) var(--nf-ease-out);
|
|
}
|
|
|
|
.kefinTweaks-breadcrumb-element:hover {
|
|
color: var(--nf-text);
|
|
}
|
|
|
|
.kefinTweaks-breadcrumb-element:last-child {
|
|
color: var(--nf-text);
|
|
font-weight: 600;
|
|
cursor: default;
|
|
}
|
|
|
|
.kefinTweaks-breadcrumb-separator {
|
|
color: var(--nf-text-dim);
|
|
font-size: 0;
|
|
}
|
|
|
|
.kefinTweaks-breadcrumb-separator::before {
|
|
content: "chevron_right";
|
|
font-family: "Material Icons";
|
|
font-size: 1rem;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
/* ── Buttons ─────────────────────────────────────────────────────────────── */
|
|
|
|
.mainDetailButtons .detailButton {
|
|
border-radius: 50%;
|
|
width: 2.6em;
|
|
height: 2.6em;
|
|
margin: 0;
|
|
padding: 0 !important;
|
|
transition: border-color var(--nf-dur-1) var(--nf-ease-out), background-color var(--nf-dur-1) var(--nf-ease-out);
|
|
}
|
|
|
|
.mainDetailButtons .detailButton-icon {
|
|
font-size: 1.35em !important;
|
|
}
|
|
|
|
.mainDetailButtons .detailButton.btnPlay {
|
|
flex-direction: row;
|
|
width: auto;
|
|
min-width: 7.5em;
|
|
margin-right: 0.25em;
|
|
padding: 0 1.7em 0 1.15em !important;
|
|
border: 0;
|
|
border-radius: var(--nf-radius);
|
|
background: #fff;
|
|
color: #000;
|
|
font-weight: 700;
|
|
text-shadow: none;
|
|
}
|
|
|
|
.mainDetailButtons .detailButton.btnPlay:hover {
|
|
background: var(--nf-fill-white-hover);
|
|
color: #000;
|
|
}
|
|
|
|
.mainDetailButtons .detailButton.btnPlay .detailButton-content {
|
|
flex-direction: row;
|
|
gap: 0.3em;
|
|
}
|
|
|
|
.mainDetailButtons .detailButton.btnPlay .detailButton-icon {
|
|
font-size: 1.7em !important;
|
|
}
|
|
|
|
.mainDetailButtons .detailButton.btnPlay::after {
|
|
content: attr(title);
|
|
font-size: 1.1em;
|
|
letter-spacing: 0.01em;
|
|
}
|
|
|
|
/* ── Technical panel ─────────────────────────────────────────────────────── */
|
|
|
|
.trackSelections {
|
|
display: flex;
|
|
flex-direction: column;
|
|
max-width: none;
|
|
padding: 0.35em 1.1em;
|
|
}
|
|
|
|
.layout-mobile .trackSelections {
|
|
margin-bottom: 2em;
|
|
}
|
|
|
|
.trackSelections .selectContainer {
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-columns: 7.5rem minmax(0, 1fr);
|
|
align-items: center;
|
|
max-width: none;
|
|
margin: 0 !important;
|
|
padding: 0.6em 0;
|
|
border-bottom: 1px solid rgb(255 255 255 / 0.06);
|
|
}
|
|
|
|
.trackSelections .selectContainer:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.trackSelections .selectContainer .selectLabel {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.45rem;
|
|
margin: 0;
|
|
color: var(--nf-text-mute);
|
|
font-size: 0.72rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.08em;
|
|
line-height: 1;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.trackSelections .selectContainer .selectLabel::before {
|
|
font-family: "Material Icons";
|
|
font-size: 1.1rem;
|
|
font-weight: 400;
|
|
letter-spacing: 0;
|
|
text-transform: none;
|
|
}
|
|
|
|
.trackSelections .selectVideoContainer .selectLabel::before { content: "movie"; }
|
|
.trackSelections .selectAudioContainer .selectLabel::before { content: "volume_up"; }
|
|
.trackSelections .selectSubtitlesContainer .selectLabel::before { content: "subtitles"; }
|
|
.trackSelections .selectSourceContainer .selectLabel::before { content: "video_file"; }
|
|
|
|
.trackSelections .detailTrackSelect,
|
|
.trackSelections .detailTrackSelect.emby-select-withcolor {
|
|
width: 100%;
|
|
max-width: none;
|
|
padding: 0.35em 2em 0.35em 0.55em !important;
|
|
border: 0;
|
|
border-radius: var(--nf-radius);
|
|
background: transparent;
|
|
color: var(--nf-text-2);
|
|
font-size: 0.9em;
|
|
font-weight: 500;
|
|
text-overflow: ellipsis;
|
|
cursor: pointer;
|
|
transition: background-color var(--nf-dur-1) var(--nf-ease-out), color var(--nf-dur-1) var(--nf-ease-out);
|
|
}
|
|
|
|
.trackSelections .detailTrackSelect:not(:disabled):hover,
|
|
.trackSelections .detailTrackSelect:focus-visible {
|
|
background: var(--nf-fill-hover);
|
|
color: var(--nf-text);
|
|
}
|
|
|
|
.trackSelections .detailTrackSelect:disabled {
|
|
padding-right: 0.55em !important;
|
|
color: var(--nf-text-dim);
|
|
cursor: default;
|
|
opacity: 1;
|
|
}
|
|
|
|
.trackSelections .detailTrackSelect > option {
|
|
background: var(--nf-surface-2);
|
|
color: var(--nf-text);
|
|
}
|
|
|
|
.trackSelections .selectArrowContainer {
|
|
position: absolute;
|
|
right: 0.4em;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
color: var(--nf-text-mute);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.trackSelections .selectContainer:has(.detailTrackSelect:disabled) .selectArrowContainer {
|
|
display: none;
|
|
}
|
|
|
|
/* ── Synopsis, links and credits ─────────────────────────────────────────── */
|
|
|
|
#itemDetailPage .detailSectionContent {
|
|
display: flex;
|
|
flex-direction: column;
|
|
max-width: 60rem;
|
|
}
|
|
|
|
#itemDetailPage .detailSectionContent > .itemExternalLinks {
|
|
order: -2;
|
|
margin: 0 0 1.5rem !important; /* core sets margin inline */
|
|
}
|
|
|
|
#itemDetailPage .detailSectionContent > .itemExternalLinks:not(:has(> a)) {
|
|
display: none;
|
|
}
|
|
|
|
#itemDetailPage .detailSectionContent > .tagline:not(.hide, :empty) {
|
|
display: block;
|
|
order: -1;
|
|
margin: 0 0 0.8rem;
|
|
color: var(--nf-text);
|
|
font: italic 500 1.25rem/1.5 var(--nf-font);
|
|
letter-spacing: -0.005em;
|
|
}
|
|
|
|
#itemDetailPage .detailSectionContent > .tagline:not(.hide, :empty)::before {
|
|
content: "\201C";
|
|
margin-right: 0.15em;
|
|
}
|
|
|
|
#itemDetailPage .detailSectionContent > .tagline:not(.hide, :empty)::after {
|
|
content: "\201D";
|
|
margin-left: 0.05em;
|
|
}
|
|
|
|
#itemDetailPage .overview-controls {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
#itemDetailPage .overview-controls .overview-expand {
|
|
margin: 0.5rem 0 0;
|
|
padding: 0;
|
|
background: none;
|
|
color: var(--nf-text-dim);
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
transition: color var(--nf-dur-1) var(--nf-ease-out);
|
|
}
|
|
|
|
#itemDetailPage .overview-controls .overview-expand:hover {
|
|
color: var(--nf-text);
|
|
}
|
|
|
|
.detailSectionContent .overview {
|
|
max-width: none; /* core: 90% */
|
|
margin: 0;
|
|
color: var(--nf-text-2);
|
|
font-size: 1.1rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.detailSectionContent .overview > bdi > p { margin: 0; }
|
|
|
|
.detailSectionContent .itemGenres {
|
|
display: none;
|
|
}
|
|
|
|
#itemDetailPage .detailSectionContent .itemTags {
|
|
display: none;
|
|
}
|
|
|
|
/* ── External links ──────────────────────────────────────────────────────── */
|
|
.itemExternalLinks {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
row-gap: 0.5rem;
|
|
margin-top: 1.4em;
|
|
color: transparent;
|
|
font-size: 0 !important; /* core sets font-size inline */
|
|
}
|
|
|
|
.itemExternalLinks > a.button-link + a.button-link {
|
|
margin-left: 0.5rem;
|
|
}
|
|
|
|
.itemExternalLinks > a.button-link {
|
|
--nf-brand: var(--nf-text);
|
|
--nf-brand-ink: #000;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
margin: 0;
|
|
padding: .2em .75em;
|
|
border: 1px solid var(--nf-outline);
|
|
border-radius: var(--nf-radius);
|
|
background: transparent;
|
|
color: var(--nf-text);
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
transition: background-color var(--nf-dur-1) var(--nf-ease-out), color var(--nf-dur-1) var(--nf-ease-out), border-color var(--nf-dur-1) var(--nf-ease-out);
|
|
}
|
|
|
|
.itemExternalLinks > a.button-link:hover,
|
|
.itemExternalLinks > a.button-link:focus-visible {
|
|
background: var(--nf-brand);
|
|
border-color: var(--nf-brand);
|
|
color: var(--nf-brand-ink) !important;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.itemExternalLinks > a[href*="imdb.com"] { --nf-brand: #f5c518; }
|
|
.itemExternalLinks > a[href*="themoviedb.org"] { --nf-brand: #01b4e4; }
|
|
.itemExternalLinks > a[href*="thetvdb.com"] { --nf-brand: #6cd591; }
|
|
.itemExternalLinks > a[href*="anidb.net"] { --nf-brand: #2a5fa8; --nf-brand-ink: #fff; }
|
|
.itemExternalLinks > a[href*="myanimelist.net"] { --nf-brand: #2e51a2; --nf-brand-ink: #fff; }
|
|
.itemExternalLinks > a[href*="anilist.co"] { --nf-brand: #02a9ff; }
|
|
.itemExternalLinks > a[href*="trakt.tv"] { --nf-brand: #ed1c24; --nf-brand-ink: #fff; }
|
|
.itemExternalLinks > a[href*="letterboxd.com"] { --nf-brand: #00e054; }
|
|
.itemExternalLinks > a[href*="musicbrainz.org"] { --nf-brand: #ba478f; --nf-brand-ink: #fff; }
|
|
.itemExternalLinks > a[href*="theaudiodb.com"] { --nf-brand: #6399cc; }
|
|
.itemExternalLinks > a[href*="tvmaze.com"] { --nf-brand: #3c948b; --nf-brand-ink: #fff; }
|
|
.itemExternalLinks > a[href*="wikidata.org"] { --nf-brand: #990000; --nf-brand-ink: #fff; }
|
|
.itemExternalLinks > a[title*="Radarr"] { --nf-brand: #ffc230; }
|
|
.itemExternalLinks > a[title*="Sonarr"] { --nf-brand: #35c5f4; }
|
|
|
|
.itemDetailsGroup {
|
|
max-width: 60rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.itemDetailsGroup > div:not(:empty) {
|
|
margin-bottom: .75em;
|
|
}
|
|
|
|
.itemDetailsGroup .detailsGroupItem {
|
|
display: block;
|
|
max-width: none; /* core: 44em */
|
|
margin: 0 !important;
|
|
font-size: 0.92em;
|
|
}
|
|
|
|
.itemDetailsGroup div:last-child:not(:empty) {
|
|
order: -1;
|
|
}
|
|
|
|
.layout-desktop .itemDetailsGroup > div:last-child:not(:empty) {
|
|
margin-bottom: 2em;
|
|
}
|
|
|
|
.itemDetailsGroup .detailsGroupItem .label {
|
|
display: inline;
|
|
color: var(--nf-text-mute);
|
|
margin: 0;
|
|
}
|
|
|
|
.itemDetailsGroup .detailsGroupItem .label::after {
|
|
content: ": ";
|
|
}
|
|
|
|
.itemDetailsGroup .detailsGroupItem > :not(.label) {
|
|
display: inline;
|
|
color: var(--nf-text-2);
|
|
}
|
|
|
|
.itemDetailsGroup .detailsGroupItem a {
|
|
display: inline;
|
|
color: var(--nf-text-2);
|
|
font-weight: 400;
|
|
}
|
|
|
|
.itemDetailsGroup .detailsGroupItem a:hover,
|
|
.layout-desktop #itemDetailPage:has(.detailImageContainer .cardImageIcon.person) .detailSectionContent > p:not(.overview) a:hover {
|
|
color: var(--nf-text);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* ── Genres ──────────────────────────────────────────────────────────────── */
|
|
.itemDetailsGroup > :last-child .detailsGroupItem > .label {
|
|
display: none;
|
|
}
|
|
|
|
.itemDetailsGroup > :last-child .detailsGroupItem > :not(.label) {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
margin-top: 0.35em;
|
|
}
|
|
|
|
.itemDetailsGroup > :last-child .detailsGroupItem > :not(.label) > span {
|
|
font-size: 0;
|
|
}
|
|
|
|
.itemDetailsGroup > :last-child .detailsGroupItem > :not(.label) > span > a {
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.itemDetailsGroup > :last-child .detailsGroupItem > :not(.label) > span + span::before {
|
|
content: "•";
|
|
margin: 0 0.5em;
|
|
color: var(--nf-surface-4);
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
/* ── Scenes ──────────────────────────────────────────────────────────────── */
|
|
|
|
.chapterCard .chapterCardImageContainer {
|
|
transition: filter var(--nf-dur-3) var(--nf-ease-out);
|
|
}
|
|
|
|
.chapterCard .innerCardFooter {
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
width: auto;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 0.6em;
|
|
padding: 2.4em 0.75em 0.65em;
|
|
background: linear-gradient(0deg, rgb(0 0 0 / 0.85), rgb(0 0 0 / 0.45) 55%, transparent);
|
|
border-radius: 0 0 var(--nf-radius) var(--nf-radius);
|
|
}
|
|
|
|
.chapterCard .innerCardFooter .cardText {
|
|
min-width: 0;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
color: var(--nf-text);
|
|
font-size: 0.85em;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.chapterCard .innerCardFooter .cardText + .cardText {
|
|
flex: 0 0 auto;
|
|
padding: 0.15em 0.45em;
|
|
border-radius: var(--nf-radius-xs);
|
|
background: rgb(255 255 255 / 0.16);
|
|
color: var(--nf-text-2);
|
|
font-size: 0.75em;
|
|
font-weight: 600;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.chapterCard .cardScalable {
|
|
aspect-ratio: 16 / 9;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.chapterCard .cardScalable > [class*="cardPadder"] {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 2;
|
|
margin: auto;
|
|
padding: 0 !important;
|
|
opacity: 0;
|
|
}
|
|
|
|
@media (hover: hover) and (pointer: fine) {
|
|
.chapterCard:hover .chapterCardImageContainer {
|
|
filter: brightness(1.15);
|
|
}
|
|
|
|
.chapterCard:hover .cardScalable > [class*="cardPadder"] {
|
|
--nf-rise: 0rem;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* ── Cast and crew ───────────────────────────────────────────────────────── */
|
|
|
|
:is(#castCollapsible, #guestCastCollapsible) .cardScalable {
|
|
margin-bottom: 1rem;
|
|
aspect-ratio: 1 / 1;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
box-shadow: 0 0 0 0 transparent;
|
|
transition: box-shadow var(--nf-dur-3) var(--nf-ease);
|
|
}
|
|
|
|
:is(#castCollapsible, #guestCastCollapsible) :is(.cardPadder, .cardImageContainer, .blurhash-canvas, .cardContent) {
|
|
border-radius: 50%;
|
|
}
|
|
|
|
:is(#castCollapsible, #guestCastCollapsible) .cardImageContainer {
|
|
background-position: center 22%;
|
|
filter: grayscale(0.35) brightness(0.9);
|
|
transition: transform 0.5s var(--nf-ease), filter var(--nf-dur-3) var(--nf-ease-out);
|
|
}
|
|
|
|
:is(#castCollapsible, #guestCastCollapsible) .cardOverlayContainer {
|
|
display: none;
|
|
}
|
|
|
|
:is(#castCollapsible, #guestCastCollapsible) .card-hoverable:hover .cardBox {
|
|
transform: none;
|
|
}
|
|
|
|
:is(#castCollapsible, #guestCastCollapsible) .card:hover .cardScalable {
|
|
box-shadow:
|
|
0 0 0 3px var(--nf-bg),
|
|
0 0 0 5px #fff;
|
|
}
|
|
|
|
:is(#castCollapsible, #guestCastCollapsible) .card:hover .cardImageContainer {
|
|
transform: scale(1.12);
|
|
filter: none;
|
|
}
|
|
|
|
:is(#castCollapsible, #guestCastCollapsible) .cardText {
|
|
text-align: center !important;
|
|
padding-top: 0.25em;
|
|
}
|
|
|
|
:is(#castCollapsible, #guestCastCollapsible) .cardText-first {
|
|
transition: color var(--nf-dur-1) var(--nf-ease-out);
|
|
}
|
|
|
|
:is(#castCollapsible, #guestCastCollapsible) .card:hover .cardText-first,
|
|
:is(#castCollapsible, #guestCastCollapsible) .card:hover .cardText-first a {
|
|
color: var(--nf-text);
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════════════════════════
|
|
* 7b. Person pages
|
|
* ═══════════════════════════════════════════════════════════════════════ */
|
|
|
|
.layout-desktop #itemDetailPage:has(.detailImageContainer .cardImageIcon.person) {
|
|
--nf-person-photo: clamp(12rem, 18vw, 22rem);
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.detailImageContainer .cardImageIcon.person) .itemBackdrop {
|
|
height: 2.5rem;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.detailImageContainer .cardImageIcon.person) .detailPagePrimaryContainer {
|
|
display: grid;
|
|
grid-template-columns: var(--nf-person-photo) minmax(0, 1fr);
|
|
column-gap: 4vw;
|
|
align-items: start;
|
|
padding: 0 var(--nf-gutter);
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.detailImageContainer .cardImageIcon.person) :is(.detailRibbon, .infoWrapper, .detailPagePrimaryContent, .detailSection, .detailSectionContent) {
|
|
display: contents;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.detailImageContainer .cardImageIcon.person) .detailPagePrimaryContainer :is(.nameContainer, .mainDetailButtons, .detailSectionContent > *, .detailSection > *) {
|
|
grid-column: 2;
|
|
min-width: 0;
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.detailImageContainer .cardImageIcon.person) .detailImageContainer {
|
|
display: block;
|
|
position: sticky;
|
|
top: calc(var(--nf-appbar) + 1.5rem);
|
|
grid-column: 1;
|
|
grid-row: 1 / span 30;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.detailImageContainer .cardImageIcon.person) .detailImageContainer .card {
|
|
position: relative !important;
|
|
top: 0 !important;
|
|
left: 0 !important;
|
|
width: 100% !important;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.detailImageContainer .cardImageIcon.person) .detailImageContainer .cardScalable {
|
|
isolation: isolate;
|
|
border-radius: var(--nf-radius-lg);
|
|
box-shadow: 0 0 0 1px var(--nf-line), var(--nf-shadow-3);
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.detailImageContainer .cardImageIcon.person) .detailImageContainer :is(.cardImageContainer, .cardPadder, [class*="cardPadder"]) {
|
|
border-radius: var(--nf-radius-lg);
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.detailImageContainer .cardImageIcon.person) .detailImageContainer .cardImageContainer {
|
|
overflow: visible;
|
|
contain: none; /* core's contain: strict draws the glow on top */
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.detailImageContainer .cardImageIcon.person) .detailImageContainer .cardImageContainer::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 4% -6% -6%;
|
|
z-index: -1;
|
|
border-radius: inherit;
|
|
background: inherit;
|
|
background-size: cover;
|
|
filter: blur(48px) saturate(1.3);
|
|
opacity: 0.45;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.detailImageContainer .cardImageIcon.person) .nameContainer {
|
|
order: -6;
|
|
display: block;
|
|
margin: 0;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.detailImageContainer .cardImageIcon.person) .nameContainer .itemName {
|
|
margin: 0;
|
|
color: var(--nf-text);
|
|
font: 800 clamp(2.25rem, 1.4rem + 2.4vw, 3.75rem)/1.05 var(--nf-font);
|
|
letter-spacing: -0.03em;
|
|
white-space: normal;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.detailImageContainer .cardImageIcon.person) .detailSectionContent > p:not(.overview) {
|
|
order: -5;
|
|
margin: 0.35rem 0 0;
|
|
color: var(--nf-text-dim);
|
|
font-size: 0.95rem;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.detailImageContainer .cardImageIcon.person) .detailSectionContent > p:not(.overview) a {
|
|
color: var(--nf-text-2);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.detailImageContainer .cardImageIcon.person) .mainDetailButtons {
|
|
order: -4;
|
|
justify-content: flex-start;
|
|
gap: 0.65em;
|
|
margin: 1.5rem 0 0;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.detailImageContainer .cardImageIcon.person) .mainDetailButtons .detailButton {
|
|
width: 2.6em;
|
|
height: 2.6em;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.detailImageContainer .cardImageIcon.person) .detailSectionContent > .itemExternalLinks {
|
|
order: -3;
|
|
margin: 1.5rem 0 0 !important; /* core sets margin inline */
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.detailImageContainer .cardImageIcon.person) .detailSectionContent > .overview {
|
|
order: -2;
|
|
max-width: 75ch;
|
|
margin: 1.5rem 0 0;
|
|
color: var(--nf-text-2);
|
|
font-size: 1rem;
|
|
line-height: 1.65;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.detailImageContainer .cardImageIcon.person) .detailSectionContent > .overview-controls {
|
|
order: -2;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.detailImageContainer .cardImageIcon.person) .detailSection > .detailVerticalSection {
|
|
margin-top: 2.5rem;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.detailImageContainer .cardImageIcon.person) .detailSection > .detailVerticalSection + .detailVerticalSection {
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.detailImageContainer .cardImageIcon.person) .detailSection > .detailVerticalSection .itemsContainer {
|
|
padding-right: 0;
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════════════════════════
|
|
* 7c. Live TV
|
|
* ═══════════════════════════════════════════════════════════════════════ */
|
|
|
|
/* ── Guide: day picker ───────────────────────────────────────────────────── */
|
|
|
|
.tvguide .guideHeaderDateSelection {
|
|
padding: 0.5rem var(--nf-gutter) 0.75rem;
|
|
}
|
|
|
|
.tvguide .guideDateTabsSlider {
|
|
display: flex;
|
|
gap: 0.375rem;
|
|
text-align: left;
|
|
}
|
|
|
|
#liveTvPage .guide-date-tab-button {
|
|
min-width: 3.25rem;
|
|
margin: 0;
|
|
padding: 0.4rem 0.6rem;
|
|
border-radius: var(--nf-radius-lg);
|
|
background: none;
|
|
color: var(--nf-text-dim);
|
|
font-size: 1rem;
|
|
font-weight: 700;
|
|
line-height: 1.2;
|
|
font-variant-numeric: tabular-nums;
|
|
transition: background-color var(--nf-dur-1) var(--nf-ease-out), color var(--nf-dur-1) var(--nf-ease-out);
|
|
}
|
|
|
|
#liveTvPage .guide-date-tab-button .emby-button-foreground::first-line {
|
|
font-size: 0.6875rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
#liveTvPage .guide-date-tab-button:is(:hover, :focus-visible) {
|
|
background: var(--nf-fill-hover);
|
|
color: var(--nf-text);
|
|
}
|
|
|
|
#liveTvPage .guide-date-tab-button.emby-tab-button-active {
|
|
background: #fff;
|
|
box-shadow: none;
|
|
color: #000;
|
|
}
|
|
|
|
/* ── Guide: time ruler ───────────────────────────────────────────────────── */
|
|
|
|
.tvguide .guide-headerTimeslots {
|
|
padding: 0 var(--nf-gutter);
|
|
}
|
|
|
|
.tvguide .timeslotHeader {
|
|
padding-left: 0.6rem;
|
|
border-left: 1px solid var(--nf-line);
|
|
color: var(--nf-text-dim);
|
|
font-size: 0.8125rem;
|
|
font-weight: 600;
|
|
text-indent: 0;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* ── Guide: channel column ───────────────────────────────────────────────── */
|
|
|
|
.tvguide :is(.channelsContainer, .guide-channelTimeslotHeader) {
|
|
width: 11rem;
|
|
}
|
|
|
|
.tvguide .guide-channelTimeslotHeader {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.tvguide .guide-channelHeaderCell {
|
|
border: 0;
|
|
border-radius: var(--nf-radius);
|
|
background: none;
|
|
transition: background-color var(--nf-dur-1) var(--nf-ease-out);
|
|
}
|
|
|
|
.tvguide .guide-channelHeaderCell:hover {
|
|
background: var(--nf-fill-hover);
|
|
}
|
|
|
|
.tvguide .guideChannelImage {
|
|
box-sizing: border-box;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: auto;
|
|
right: 0.75rem;
|
|
width: 5.5rem;
|
|
height: 2.75rem;
|
|
margin: auto 0;
|
|
padding: 0.35rem 0.6rem;
|
|
border-radius: var(--nf-radius);
|
|
background-color: #3a3a3a;
|
|
background-origin: content-box;
|
|
background-position: center;
|
|
box-shadow: inset 0 0 0 1px var(--nf-line);
|
|
}
|
|
|
|
.tvguide .guideChannelNumber {
|
|
max-width: none;
|
|
padding-left: 0.5rem;
|
|
color: var(--nf-text-mute);
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* ── Guide: programmes ───────────────────────────────────────────────────── */
|
|
|
|
.tvguide .channelPrograms {
|
|
border: 0;
|
|
}
|
|
|
|
.tvguide .programCell {
|
|
border: 2px solid var(--nf-bg);
|
|
border-radius: calc(var(--nf-radius) + 2px);
|
|
transition: background-color var(--nf-dur-1) var(--nf-ease-out), color var(--nf-dur-1) var(--nf-ease-out);
|
|
}
|
|
|
|
.tvguide .programCell:not(.programCell-active),
|
|
.tvguide .programCell:not(.programCell-active):is(:focus, .programCell-sports, .programCell-movie, .programCell-kids, .programCell-news) {
|
|
background: var(--nf-surface) !important;
|
|
color: var(--nf-text-dim) !important;
|
|
}
|
|
|
|
.tvguide .programCell:not(.programCell-active):hover {
|
|
background: var(--nf-surface-3) !important;
|
|
color: var(--nf-text) !important;
|
|
}
|
|
|
|
.tvguide .programCell.programCell-active,
|
|
.tvguide .programCell.programCell-active:focus {
|
|
background: linear-gradient(90deg, rgb(229 9 20 / 0.18), rgb(229 9 20 / 0) 18rem), #333 !important;
|
|
color: var(--nf-text) !important;
|
|
}
|
|
|
|
.tvguide .programCell.programCell-active:hover {
|
|
background: linear-gradient(90deg, rgb(229 9 20 / 0.22), rgb(229 9 20 / 0) 18rem), #3d3d3d !important;
|
|
}
|
|
|
|
.tvguide .programCell-active .guideProgramNameText::before,
|
|
#itemDetailPage .programGuide > .verticalDetailSection:first-child .listItem:first-child .listItemBodyText:first-child::before, /* ponytail: assumes no gaps in the schedule */
|
|
#liveTvPage .vertical-wrap > .squareCard .cardText-secondary:last-child:not(:empty)::before {
|
|
content: "";
|
|
display: inline-block;
|
|
flex: none;
|
|
width: 0.4rem;
|
|
height: 0.4rem;
|
|
margin-right: 0.4em;
|
|
border-radius: 50%;
|
|
background: var(--nf-red);
|
|
vertical-align: 0.12em;
|
|
}
|
|
|
|
.tvguide .guide-channelHeaderCell:focus {
|
|
background-color: var(--nf-fill-hover) !important;
|
|
color: inherit !important;
|
|
}
|
|
|
|
.tvguide .guideProgramName {
|
|
padding: 0 0.75rem;
|
|
}
|
|
|
|
.tvguide .guideProgramNameText {
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.tvguide .programCell-active .guideProgramNameText {
|
|
color: var(--nf-text);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.tvguide .guideProgramSecondaryInfo {
|
|
margin-top: 0.15rem;
|
|
color: var(--nf-text-mute);
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.tvguide .programCell-active .guideProgramSecondaryInfo {
|
|
color: var(--nf-text-2);
|
|
}
|
|
|
|
.tvguide .guideProgramIndicator {
|
|
margin: 0 0.5em 0 0;
|
|
padding: 0.2em 0.45em;
|
|
border-radius: var(--nf-radius-xs);
|
|
font-size: 0.6875rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.03em;
|
|
line-height: 1.2;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.tvguide .guideProgramIndicator:is(.liveTvProgram, .newTvProgram) {
|
|
background: var(--nf-red);
|
|
color: #fff;
|
|
}
|
|
|
|
.tvguide .guideProgramIndicator:is(.premiereTvProgram, .repeatTvProgram) {
|
|
background: var(--nf-fill-tag);
|
|
color: var(--nf-text-2);
|
|
}
|
|
|
|
/* ── Channels ────────────────────────────────────────────────────────────── */
|
|
|
|
#liveTvPage .vertical-wrap > .squareCard .cardPadder,
|
|
#itemDetailPage:has(.programGuideSection:not(.hide)) .detailImageContainer .cardScalable {
|
|
background: radial-gradient(90% 110% at 50% 45%, #4a4a4a 0%, #333 55%, #262626 100%);
|
|
box-shadow: inset 0 0 0 1px var(--nf-line);
|
|
}
|
|
|
|
#liveTvPage .vertical-wrap > .squareCard .cardImageContainer img {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 62% !important;
|
|
height: 62% !important;
|
|
margin: auto;
|
|
object-fit: contain;
|
|
filter: drop-shadow(0 2px 8px rgb(0 0 0 / 0.35));
|
|
}
|
|
|
|
#liveTvPage .vertical-wrap > .squareCard .cardBox {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
#liveTvPage .vertical-wrap > .squareCard .cardText-first {
|
|
--kefin-card-title-color: var(--nf-text);
|
|
order: 1;
|
|
padding-top: 0.6rem;
|
|
color: var(--nf-text);
|
|
font-size: 1rem;
|
|
font-weight: 700;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
#liveTvPage .vertical-wrap > .squareCard .cardText-secondary:empty {
|
|
display: none;
|
|
}
|
|
|
|
#liveTvPage .vertical-wrap > .squareCard .cardText-secondary:not(:last-child) {
|
|
--kefin-card-title-color: var(--nf-text-dim);
|
|
order: 2;
|
|
padding-top: 0.2rem;
|
|
color: var(--nf-text-dim);
|
|
font-size: 0.8125rem;
|
|
}
|
|
|
|
#liveTvPage .vertical-wrap > .squareCard .cardText-secondary:last-child:not(:empty) {
|
|
order: 3;
|
|
padding-top: 0.15rem;
|
|
color: var(--nf-text-mute);
|
|
font-size: 0.75rem;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* ── Channel page ────────────────────────────────────────────────────────── */
|
|
|
|
.layout-desktop #itemDetailPage:has(.programGuideSection:not(.hide)) {
|
|
--nf-ch-top: 3.5rem;
|
|
--nf-ch-logo: 10rem;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.programGuideSection:not(.hide)) .itemBackdrop {
|
|
display: none;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.programGuideSection:not(.hide)) .detailPageWrapperContainer {
|
|
overflow-x: clip;
|
|
background: none;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.programGuideSection:not(.hide)) .detailPagePrimaryContainer {
|
|
box-sizing: border-box;
|
|
display: grid;
|
|
grid-template-columns: var(--nf-ch-logo) minmax(0, 1fr);
|
|
grid-template-rows: auto minmax(0, 1fr);
|
|
height: calc(100dvh - var(--nf-appbar));
|
|
min-height: 36rem;
|
|
column-gap: 2.5rem;
|
|
align-items: center;
|
|
padding: var(--nf-ch-top) var(--nf-gutter) 1.5rem;
|
|
isolation: isolate;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.programGuideSection:not(.hide)) .detailImageContainer {
|
|
grid-area: 1 / 1;
|
|
height: auto;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.programGuideSection:not(.hide)) .detailImageContainer .card {
|
|
position: relative !important;
|
|
left: 0 !important;
|
|
top: 0;
|
|
float: none;
|
|
width: 100% !important;
|
|
max-width: none;
|
|
margin: 0;
|
|
z-index: auto; /* core's z-index: 3 covers the name */
|
|
}
|
|
|
|
#itemDetailPage:has(.programGuideSection:not(.hide)) .detailImageContainer .cardPadder {
|
|
padding-bottom: 100%;
|
|
}
|
|
|
|
#itemDetailPage:has(.programGuideSection:not(.hide)) .detailImageContainer .cardScalable {
|
|
border-radius: var(--nf-radius-lg);
|
|
box-shadow: inset 0 0 0 1px var(--nf-line), var(--nf-shadow-3);
|
|
}
|
|
|
|
#itemDetailPage:has(.programGuideSection:not(.hide)) .detailImageContainer .cardContent {
|
|
box-sizing: border-box;
|
|
padding: 16% !important; /* core zeroes .cardContent padding with !important */
|
|
overflow: visible;
|
|
contain: none;
|
|
background-color: transparent;
|
|
background-origin: content-box;
|
|
background-size: contain;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.programGuideSection:not(.hide)) .detailImageContainer .cardContent::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: calc(-1 * (var(--nf-appbar) + var(--nf-ch-top) + 6rem));
|
|
left: calc(-1 * var(--nf-hero-pad) - 6rem);
|
|
width: calc(100vw + 12rem);
|
|
height: calc(var(--nf-appbar) + var(--nf-ch-top) + var(--nf-ch-logo) + 14rem);
|
|
z-index: -1;
|
|
background: inherit;
|
|
background-origin: border-box;
|
|
background-size: 5rem 5rem;
|
|
background-repeat: repeat;
|
|
filter: blur(40px) saturate(2) brightness(1.15);
|
|
-webkit-mask-image: linear-gradient(to top, transparent 0, #000 70%);
|
|
mask-image: linear-gradient(to top, transparent 0, #000 70%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.programGuideSection:not(.hide)) .detailRibbon {
|
|
grid-area: 1 / 2;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 1.25rem;
|
|
height: auto;
|
|
margin: 0;
|
|
padding: 0;
|
|
background: none;
|
|
text-shadow: 0 1px 10px rgb(0 0 0 / 0.45);
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.programGuideSection:not(.hide)) .detailRibbon > .infoWrapper {
|
|
flex: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.programGuideSection:not(.hide)) .itemName {
|
|
font-size: var(--nf-fs-h1);
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.programGuideSection:not(.hide)) .mainDetailButtons {
|
|
justify-content: flex-start;
|
|
gap: 0.65em;
|
|
margin: 0;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.programGuideSection:not(.hide)) .detailPagePrimaryContent {
|
|
grid-area: 2 / 1 / 3 / -1;
|
|
align-self: stretch;
|
|
padding: 2.5rem 0 0 !important;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.programGuideSection:not(.hide)) :is(.detailPagePrimaryContent, .detailSection, .programGuideSection) {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.programGuideSection:not(.hide)) :is(.detailSection, .programGuideSection) {
|
|
flex: 1;
|
|
margin: 0;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.programGuideSection:not(.hide)) .programGuide {
|
|
flex: 1;
|
|
height: auto;
|
|
min-height: 0;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.programGuideSection:not(.hide)) .detailPageSecondaryContainer:not(:has(> :not(.hide))) {
|
|
display: none;
|
|
}
|
|
|
|
#itemDetailPage .programGuide {
|
|
--nf-days-inset: 0px;
|
|
anchor-name: --nf-days;
|
|
display: grid;
|
|
grid-auto-flow: column;
|
|
grid-auto-columns: min(46rem, 100% - 2.5rem);
|
|
grid-template-rows: minmax(0, 1fr);
|
|
gap: 1.5rem;
|
|
height: calc(100dvh - var(--nf-appbar) - 5.5rem);
|
|
overflow-x: auto;
|
|
overscroll-behavior-x: contain;
|
|
scroll-snap-type: x mandatory;
|
|
scroll-behavior: smooth;
|
|
scroll-marker-group: before;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.programGuideSection:not(.hide)) .programGuide {
|
|
--nf-days-inset: var(--nf-hero-pad);
|
|
--nf-days-fade: linear-gradient(to right, transparent, #000 var(--nf-hero-pad), #000 calc(100% - var(--nf-hero-pad)), transparent);
|
|
margin: 0 calc(-1 * var(--nf-hero-pad));
|
|
padding: 0 var(--nf-hero-pad);
|
|
scroll-padding: 0 var(--nf-hero-pad);
|
|
-webkit-mask-image: var(--nf-days-fade);
|
|
mask-image: var(--nf-days-fade);
|
|
}
|
|
|
|
#itemDetailPage .programGuide .verticalDetailSection {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
margin: 0;
|
|
scroll-snap-align: start;
|
|
}
|
|
|
|
#itemDetailPage .programGuide :is(.sectionTitle, .vertical-list) {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
|
|
#itemDetailPage .programGuide .sectionTitle {
|
|
flex: none;
|
|
margin: 0 0 0.85rem;
|
|
}
|
|
|
|
#itemDetailPage .programGuide .vertical-list {
|
|
display: block;
|
|
flex: 0 1 auto;
|
|
min-height: 0;
|
|
margin: 0; /* core centres it, which shrinks it */
|
|
overflow-y: auto;
|
|
scroll-snap-type: y mandatory;
|
|
scroll-padding: 0.5rem 0;
|
|
}
|
|
|
|
#itemDetailPage .programGuide .listItem {
|
|
scroll-snap-align: start;
|
|
padding: 0.2rem 0.5rem 0.2rem 1rem;
|
|
border-bottom: 0;
|
|
transition: background-color var(--nf-dur-1) var(--nf-ease-out);
|
|
}
|
|
|
|
#itemDetailPage .programGuide .listItem:hover {
|
|
background: var(--nf-fill-hover);
|
|
}
|
|
|
|
#itemDetailPage .programGuide .listItemBody {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-start;
|
|
align-items: baseline;
|
|
gap: 1rem;
|
|
padding: 0;
|
|
}
|
|
|
|
#itemDetailPage .programGuide .listItemBodyText {
|
|
margin: 0;
|
|
}
|
|
|
|
#itemDetailPage .programGuide .listItemBodyText:first-child {
|
|
flex: none;
|
|
width: 3.75rem;
|
|
color: var(--nf-text-dim);
|
|
text-align: right;
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
#itemDetailPage .programGuide .listItemBodyText.secondary {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
color: var(--nf-text);
|
|
font-size: 0.95rem;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* ── Channel page: day pager ─────────────────────────────────────────────── */
|
|
#itemDetailPage .programGuide::scroll-marker-group { /* own rules: unsupported browsers drop a whole list */
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
height: 2.25rem;
|
|
margin-bottom: 0.75rem;
|
|
padding-right: 5.75rem;
|
|
}
|
|
|
|
#itemDetailPage .programGuide .verticalDetailSection::scroll-marker {
|
|
content: "";
|
|
display: block;
|
|
flex: none;
|
|
width: 0.45rem;
|
|
height: 0.45rem;
|
|
border-radius: 999px;
|
|
background: rgb(255 255 255 / 0.28);
|
|
cursor: pointer;
|
|
transition: width var(--nf-dur-2) var(--nf-ease-out), background-color var(--nf-dur-1) var(--nf-ease-out);
|
|
}
|
|
|
|
#itemDetailPage .programGuide .verticalDetailSection::scroll-marker:hover {
|
|
background: rgb(255 255 255 / 0.6);
|
|
}
|
|
|
|
#itemDetailPage .programGuide .verticalDetailSection::scroll-marker:target-current {
|
|
width: 1.35rem;
|
|
background: #fff;
|
|
}
|
|
|
|
#itemDetailPage .programGuide::scroll-button(*) {
|
|
position: absolute;
|
|
position-anchor: --nf-days;
|
|
bottom: calc(anchor(top) + 0.75rem);
|
|
box-sizing: border-box;
|
|
width: 2.25rem;
|
|
height: 2.25rem;
|
|
border: 1px solid var(--nf-line);
|
|
background: rgb(24 24 24 / 0.6);
|
|
-webkit-backdrop-filter: blur(14px) saturate(1.3);
|
|
backdrop-filter: blur(14px) saturate(1.3);
|
|
box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 0.3);
|
|
color: var(--nf-text);
|
|
font: 1.35rem/1 "Material Icons";
|
|
cursor: pointer;
|
|
transition: background-color var(--nf-dur-1) var(--nf-ease-out), color var(--nf-dur-1) var(--nf-ease-out);
|
|
}
|
|
|
|
#itemDetailPage .programGuide::scroll-button(*):hover:not(:disabled) {
|
|
background: rgb(70 70 70 / 0.75);
|
|
}
|
|
|
|
#itemDetailPage .programGuide::scroll-button(*):active:not(:disabled) {
|
|
background: rgb(90 90 90 / 0.8);
|
|
}
|
|
|
|
#itemDetailPage .programGuide::scroll-button(*):focus-visible {
|
|
outline: 2px solid #fff;
|
|
outline-offset: -2px;
|
|
}
|
|
|
|
#itemDetailPage .programGuide::scroll-button(*):disabled {
|
|
color: rgb(255 255 255 / 0.25);
|
|
cursor: default;
|
|
}
|
|
|
|
#itemDetailPage .programGuide::scroll-button(left) {
|
|
content: "chevron_left" / "Previous day";
|
|
right: calc(anchor(right) + var(--nf-days-inset) + 2.25rem);
|
|
border-right: 0;
|
|
border-radius: 999px 0 0 999px;
|
|
padding-left: 0.15rem;
|
|
}
|
|
|
|
#itemDetailPage .programGuide::scroll-button(right) {
|
|
content: "chevron_right" / "Next day";
|
|
right: calc(anchor(right) + var(--nf-days-inset));
|
|
border-radius: 0 999px 999px 0;
|
|
padding-right: 0.15rem;
|
|
}
|
|
|
|
#itemDetailPage .programGuide .listItemButton {
|
|
color: var(--nf-text-mute);
|
|
}
|
|
|
|
#itemDetailPage .programGuide .listItemButton:hover {
|
|
color: var(--nf-text);
|
|
}
|
|
|
|
#itemDetailPage .programGuide > .verticalDetailSection:first-child .listItem:first-child .listItemBodyText:first-child {
|
|
color: var(--nf-text);
|
|
}
|
|
|
|
/* ── Programme page ──────────────────────────────────────────────────────── */
|
|
|
|
.layout-desktop #itemDetailPage:has(.recordingFields:not(.hide) .recordingButton):not(:has(.detailImageContainer .cardImageIcon.person, .programGuideSection:not(.hide))) {
|
|
--nf-prog-hero: 66vh;
|
|
--nf-prog-poster: 100%;
|
|
--nf-prog-poster-y: 15%;
|
|
--nf-hero-height: var(--nf-prog-hero);
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.recordingFields:not(.hide) .recordingButton):not(:has(.detailImageContainer .cardImageIcon.person, .programGuideSection:not(.hide))) .detailPagePrimaryContainer > .detailImageContainer {
|
|
display: block;
|
|
position: absolute;
|
|
top: calc(var(--nf-hero-band) - var(--nf-hero-height));
|
|
left: 0;
|
|
right: 0;
|
|
width: auto;
|
|
height: var(--nf-hero-height);
|
|
overflow: hidden;
|
|
z-index: -2;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.recordingFields:not(.hide) .recordingButton):not(:has(.detailImageContainer .cardImageIcon.person, .programGuideSection:not(.hide))) .detailPagePrimaryContainer > .detailImageContainer .card {
|
|
position: relative !important;
|
|
left: 0 !important;
|
|
top: 0;
|
|
float: none;
|
|
width: 100% !important;
|
|
max-width: none;
|
|
margin: 0;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.recordingFields:not(.hide) .recordingButton):not(:has(.detailImageContainer .cardImageIcon.person, .programGuideSection:not(.hide))) .detailPagePrimaryContainer > .detailImageContainer :is(.card, .cardBox, .cardScalable) {
|
|
height: 100%;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.recordingFields:not(.hide) .recordingButton):not(:has(.detailImageContainer .cardImageIcon.person, .programGuideSection:not(.hide))) .detailPagePrimaryContainer > .detailImageContainer .cardScalable {
|
|
border-radius: 0;
|
|
background: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.recordingFields:not(.hide) .recordingButton):not(:has(.detailImageContainer .cardImageIcon.person, .programGuideSection:not(.hide))) .detailPagePrimaryContainer > .detailImageContainer .cardPadder {
|
|
display: none;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.recordingFields:not(.hide) .recordingButton):not(:has(.detailImageContainer .cardImageIcon.person, .programGuideSection:not(.hide))) .detailPagePrimaryContainer > .detailImageContainer .cardContent {
|
|
border-radius: 0;
|
|
background-color: transparent;
|
|
background-position: center 20%;
|
|
contain: none;
|
|
}
|
|
|
|
@supports (anchor-name: --a) {
|
|
.layout-desktop #itemDetailPage:has(.recordingFields:not(.hide) .recordingButton):not(:has(.detailImageContainer .cardImageIcon.person, .programGuideSection:not(.hide))) .detailRibbon {
|
|
anchor-name: --nf-hero-ribbon;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.recordingFields:not(.hide) .recordingButton):not(:has(.detailImageContainer .cardImageIcon.person, .programGuideSection:not(.hide))) .detailPagePrimaryContainer > .detailImageContainer {
|
|
position-anchor: --nf-hero-ribbon;
|
|
bottom: anchor(bottom);
|
|
height: auto;
|
|
}
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.recordingFields:not(.hide) .recordingButton):not(:has(.detailImageContainer .cardImageIcon.person, .programGuideSection:not(.hide))):has(.detailImageContainer .portraitCard) .detailPagePrimaryContainer > .detailImageContainer .cardContent {
|
|
background-size: 0 0;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.recordingFields:not(.hide) .recordingButton):not(:has(.detailImageContainer .cardImageIcon.person, .programGuideSection:not(.hide))):has(.detailImageContainer .portraitCard) .detailPagePrimaryContainer > .detailImageContainer .cardContent::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: -10%;
|
|
background: inherit;
|
|
background-size: cover;
|
|
background-position: center;
|
|
filter: blur(60px) saturate(1.3) brightness(0.7);
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.recordingFields:not(.hide) .recordingButton):not(:has(.detailImageContainer .cardImageIcon.person, .programGuideSection:not(.hide))):has(.detailImageContainer .portraitCard) .detailPagePrimaryContainer > .detailImageContainer .cardContent::after {
|
|
--nf-poster-fade: linear-gradient(to right, transparent, rgb(0 0 0 / 0.6) 15%, #000 35%), linear-gradient(to bottom, transparent, #000 22%);
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
width: max(var(--nf-prog-poster), var(--nf-prog-hero) * 2 / 3);
|
|
background: inherit;
|
|
background-size: cover;
|
|
background-position: center var(--nf-prog-poster-y);
|
|
-webkit-mask-image: var(--nf-poster-fade);
|
|
mask-image: var(--nf-poster-fade);
|
|
-webkit-mask-composite: source-in;
|
|
mask-composite: intersect;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.recordingFields:not(.hide) .recordingButton):not(:has(.detailImageContainer .cardImageIcon.person, .programGuideSection:not(.hide))):has(.detailImageContainer .squareCard) .detailPagePrimaryContainer > .detailImageContainer .cardScalable {
|
|
background: radial-gradient(70% 90% at 72% 30%, #2a2a2a 0%, #1a1a1a 45%, var(--nf-bg) 80%);
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.recordingFields:not(.hide) .recordingButton):not(:has(.detailImageContainer .cardImageIcon.person, .programGuideSection:not(.hide))):has(.detailImageContainer .squareCard) .detailPagePrimaryContainer > .detailImageContainer .cardContent::after {
|
|
content: "live_tv";
|
|
position: absolute;
|
|
top: 42%;
|
|
right: calc(var(--nf-hero-pad) + 6vw);
|
|
translate: 0 -50%;
|
|
color: rgb(255 255 255 / 0.06);
|
|
font: min(34vh, 24vw)/1 "Material Icons";
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.recordingFields:not(.hide) .recordingButton):not(:has(.detailImageContainer .cardImageIcon.person, .programGuideSection:not(.hide))) .detailPagePrimaryContent {
|
|
padding-top: 0 !important;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.recordingFields:not(.hide) .recordingButton):not(:has(.detailImageContainer .cardImageIcon.person, .programGuideSection:not(.hide))) .nameContainer > .itemName {
|
|
overflow: visible;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.recordingFields:not(.hide) .recordingButton):not(:has(.detailImageContainer .cardImageIcon.person, .programGuideSection:not(.hide))) .nameContainer > .itemName.subtitle {
|
|
margin-top: 0.25em;
|
|
color: var(--nf-text-2);
|
|
font-size: 1.2em;
|
|
font-weight: 600;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.recordingFields:not(.hide) .recordingButton):not(:has(.detailImageContainer .cardImageIcon.person, .programGuideSection:not(.hide))) .detailRibbon > .infoWrapper {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
column-gap: 0.6em;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.recordingFields:not(.hide) .recordingButton):not(:has(.detailImageContainer .cardImageIcon.person, .programGuideSection:not(.hide))) .infoWrapper > .nameContainer {
|
|
flex-basis: 100%;
|
|
margin-top: 0.35em;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.recordingFields:not(.hide) .recordingButton):not(:has(.detailImageContainer .cardImageIcon.person, .programGuideSection:not(.hide))) .infoWrapper > .itemMiscInfo-secondary {
|
|
display: contents;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.recordingFields:not(.hide) .recordingButton):not(:has(.detailImageContainer .cardImageIcon.person, .programGuideSection:not(.hide))) .itemMiscInfo-secondary > .mediaInfoItem {
|
|
order: 1;
|
|
margin: 0.45em 0.9em 0 0;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.recordingFields:not(.hide) .recordingButton):not(:has(.detailImageContainer .cardImageIcon.person, .programGuideSection:not(.hide))) .itemMiscInfo-secondary > .mediaInfoItem:has(+ a.mediaInfoItem) {
|
|
order: -2;
|
|
margin: 0;
|
|
padding: 0.2em 0.5em;
|
|
border-radius: var(--nf-radius-xs);
|
|
background: var(--nf-red);
|
|
color: #fff;
|
|
font-size: 0.8em;
|
|
font-weight: 700;
|
|
letter-spacing: 0.04em;
|
|
line-height: 1.2;
|
|
text-shadow: none;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.recordingFields:not(.hide) .recordingButton):not(:has(.detailImageContainer .cardImageIcon.person, .programGuideSection:not(.hide))) .itemMiscInfo-secondary > a.mediaInfoItem {
|
|
order: -1;
|
|
margin: 0;
|
|
padding: 0;
|
|
color: var(--nf-text);
|
|
font-size: 0.95em;
|
|
font-weight: 800;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.recordingFields:not(.hide) .recordingButton):not(:has(.detailImageContainer .cardImageIcon.person, .programGuideSection:not(.hide))) .itemMiscInfo-secondary > a.mediaInfoItem:hover {
|
|
text-decoration: underline;
|
|
text-underline-offset: 0.2em;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.recordingFields:not(.hide) .recordingButton):not(:has(.detailImageContainer .cardImageIcon.person, .programGuideSection:not(.hide))) .itemDetailsGroup > :last-child .detailsGroupItem > :not(.label) {
|
|
gap: 0.4rem;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.recordingFields:not(.hide) .recordingButton):not(:has(.detailImageContainer .cardImageIcon.person, .programGuideSection:not(.hide))) .itemDetailsGroup > :last-child .detailsGroupItem > :not(.label) > span + span::before {
|
|
content: none;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.recordingFields:not(.hide) .recordingButton):not(:has(.detailImageContainer .cardImageIcon.person, .programGuideSection:not(.hide))) .itemDetailsGroup > :last-child .detailsGroupItem > :not(.label) > span > a {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
height: 1.6rem;
|
|
padding: 0 0.6em;
|
|
border-radius: var(--nf-radius-xs);
|
|
background: var(--nf-fill-tag);
|
|
color: var(--nf-text-2);
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
transition: background-color var(--nf-dur-1) var(--nf-ease-out), color var(--nf-dur-1) var(--nf-ease-out);
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.recordingFields:not(.hide) .recordingButton):not(:has(.detailImageContainer .cardImageIcon.person, .programGuideSection:not(.hide))) .itemDetailsGroup > :last-child .detailsGroupItem > :not(.label) > span > a:hover {
|
|
background: rgb(255 255 255 / 0.2);
|
|
color: var(--nf-text);
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* ── Programme page: record buttons ──────────────────────────────────────── */
|
|
@supports (anchor-name: --a) {
|
|
.layout-desktop #itemDetailPage:has(.recordingFields:not(.hide) .recordingButton):not(:has(.detailImageContainer .cardImageIcon.person, .programGuideSection:not(.hide))) .mainDetailButtons {
|
|
anchor-name: --nf-hero-buttons;
|
|
align-self: flex-start;
|
|
min-height: 2.6em;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.recordingFields:not(.hide) .recordingButton):not(:has(.detailImageContainer .cardImageIcon.person, .programGuideSection:not(.hide))) .mainDetailButtons:has(> .detailButton:not(.hide)) {
|
|
padding-right: 0.65em;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.recordingFields:not(.hide) .recordingButton):not(:has(.detailImageContainer .cardImageIcon.person, .programGuideSection:not(.hide))) .mainDetailButtons.hide {
|
|
display: flex !important;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.recordingFields:not(.hide) .recordingButton):not(:has(.detailImageContainer .cardImageIcon.person, .programGuideSection:not(.hide))) :is(.detailPagePrimaryContent, .detailSection) {
|
|
position: static;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.recordingFields:not(.hide) .recordingButton):not(:has(.detailImageContainer .cardImageIcon.person, .programGuideSection:not(.hide))) .detailSection > .recordingFields {
|
|
position: absolute;
|
|
position-anchor: --nf-hero-buttons;
|
|
top: anchor(top);
|
|
left: anchor(right);
|
|
height: 2.6em;
|
|
margin: 0 !important; /* core sets a margin inline */
|
|
font-size: var(--nf-hero-fs);
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.recordingFields:not(.hide) .recordingButton):not(:has(.detailImageContainer .cardImageIcon.person, .programGuideSection:not(.hide))) .detailSection > .recordingFields > .recordingFields {
|
|
height: 100%;
|
|
gap: 0.65em;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.recordingFields:not(.hide) .recordingButton):not(:has(.detailImageContainer .cardImageIcon.person, .programGuideSection:not(.hide))) .detailSection > .recordingFields :is(.recordingFields-buttons, .recordingFields-buttons > div) {
|
|
height: 100%;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.recordingFields:not(.hide) .recordingButton):not(:has(.detailImageContainer .cardImageIcon.person, .programGuideSection:not(.hide))) .detailSection > .recordingFields .recordingButton {
|
|
gap: 0.4em;
|
|
height: 100%;
|
|
min-width: 0;
|
|
padding: 0 1.4em 0 1.1em;
|
|
font-size: 1.1em;
|
|
font-weight: 700;
|
|
text-shadow: none;
|
|
}
|
|
|
|
.layout-desktop #itemDetailPage:has(.recordingFields:not(.hide) .recordingButton):not(:has(.detailImageContainer .cardImageIcon.person, .programGuideSection:not(.hide))) .detailSection > .recordingFields .recordingIcon {
|
|
font-size: 1.15em;
|
|
font-weight: 400; /* the icon font has no bold */
|
|
}
|
|
}
|
|
|
|
#itemDetailPage .recordingFields > .recordingFields {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.65rem;
|
|
}
|
|
|
|
#itemDetailPage .recordingFields-buttons {
|
|
margin: 0;
|
|
}
|
|
|
|
#itemDetailPage .recordingFields-buttons:has(.singleRecordingButton) {
|
|
order: -1;
|
|
}
|
|
|
|
#itemDetailPage .recordingButton {
|
|
margin: 0;
|
|
}
|
|
|
|
#itemDetailPage .recordingButton .recordingIcon {
|
|
color: var(--nf-red);
|
|
}
|
|
|
|
.layout-mobile #itemDetailPage .recordingFields-buttons:not(.hide) {
|
|
flex: 1 1 0;
|
|
}
|
|
|
|
.layout-mobile #itemDetailPage .recordingFields-buttons > div,
|
|
.layout-mobile #itemDetailPage .recordingButton {
|
|
width: 100%;
|
|
}
|
|
|
|
.layout-mobile #itemDetailPage .recordingButton {
|
|
justify-content: center;
|
|
}
|
|
|
|
.material-icons.play_arrow::before { /* restated: the glyph chunk can be mis-decoded */
|
|
content: "\e037";
|
|
}
|
|
|
|
.material-icons.fiber_manual_record::before {
|
|
content: "\e061";
|
|
}
|
|
|
|
.material-icons.fiber_smart_record::before {
|
|
content: "\e062";
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════════════════════════
|
|
* 7d. Search
|
|
* ═══════════════════════════════════════════════════════════════════════ */
|
|
|
|
#searchPage .searchFields {
|
|
align-items: flex-start;
|
|
padding-top: 1.5rem;
|
|
}
|
|
|
|
#searchPage .searchFieldsInner {
|
|
position: relative;
|
|
width: 100%;
|
|
max-width: 36rem;
|
|
margin: 0;
|
|
}
|
|
|
|
#searchPage .searchfields-icon {
|
|
position: absolute;
|
|
left: 0.8rem;
|
|
top: 50%;
|
|
z-index: 1;
|
|
margin: 0;
|
|
transform: translateY(-50%);
|
|
color: var(--nf-text);
|
|
font-size: 1.5rem;
|
|
pointer-events: none;
|
|
}
|
|
|
|
#searchPage .searchFields .inputContainer {
|
|
margin: 0;
|
|
}
|
|
|
|
#searchPage .searchFields .inputLabel {
|
|
display: none;
|
|
}
|
|
|
|
#searchPage .searchfields-txtSearch {
|
|
height: 3rem;
|
|
padding: 0 1rem 0 3rem;
|
|
border-color: #fff;
|
|
background: rgb(0 0 0 / 0.75);
|
|
font-size: 1rem;
|
|
}
|
|
|
|
#searchPage .searchfields-txtSearch::placeholder {
|
|
color: var(--nf-text-mute);
|
|
}
|
|
|
|
#searchPage .searchSuggestions:not([style*="none"]) {
|
|
display: flex !important;
|
|
}
|
|
|
|
#searchPage .searchSuggestions {
|
|
flex-wrap: wrap;
|
|
align-items: baseline;
|
|
gap: 0.4rem 0.6em;
|
|
margin: 1.25rem 0 0;
|
|
padding: 0 var(--nf-gutter);
|
|
font-size: clamp(0.95rem, 0.8rem + 0.35vw, 1.2rem);
|
|
}
|
|
|
|
#searchPage .searchSuggestionsList {
|
|
display: contents;
|
|
}
|
|
|
|
#searchPage .searchSuggestions .sectionTitle {
|
|
margin: 0;
|
|
padding: 0;
|
|
color: var(--nf-text-mute);
|
|
font-size: 1em;
|
|
font-weight: 400;
|
|
}
|
|
|
|
#searchPage .searchSuggestions .sectionTitle::after {
|
|
content: ":";
|
|
}
|
|
|
|
#searchPage .searchSuggestionsList > div + div::before {
|
|
content: "|";
|
|
margin-right: 0.6em;
|
|
color: var(--nf-text-mute);
|
|
}
|
|
|
|
#searchPage .searchSuggestionsList a {
|
|
margin: 0;
|
|
padding: 0 !important;
|
|
color: var(--nf-text);
|
|
font-size: 1em;
|
|
font-weight: 400;
|
|
}
|
|
|
|
#searchPage .searchSuggestionsList a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
#searchPage .searchResults {
|
|
padding-top: 1.75rem;
|
|
}
|
|
|
|
#searchPage .noItemsMessage {
|
|
margin: 0;
|
|
padding: 2rem var(--nf-gutter);
|
|
color: var(--nf-text-dim);
|
|
font-size: clamp(0.95rem, 0.8rem + 0.35vw, 1.2rem);
|
|
text-align: left;
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════════════════════════
|
|
* 7e. Settings
|
|
* ═══════════════════════════════════════════════════════════════════════ */
|
|
|
|
.userPreferencesPage > :first-child {
|
|
margin-top: 2.5rem;
|
|
}
|
|
|
|
#myPreferencesMenuPage .verticalSection:first-child > .headerUsername {
|
|
margin: 0 0 1.25rem;
|
|
padding: 0;
|
|
}
|
|
|
|
#myPreferencesMenuPage .verticalSection:not(:first-child) > .sectionTitle {
|
|
margin: 0 0 0.75rem;
|
|
padding: 0;
|
|
}
|
|
|
|
#myPreferencesMenuPage a.listItem-border {
|
|
display: block;
|
|
margin: 0;
|
|
border: 1px solid var(--nf-line);
|
|
border-top: 0;
|
|
background: var(--nf-fill-panel);
|
|
transition: background-color var(--nf-dur-1) var(--nf-ease-out);
|
|
}
|
|
|
|
#myPreferencesMenuPage a.listItem-border:nth-child(1 of a.listItem-border:not(.hide)) {
|
|
border-top: 1px solid var(--nf-line);
|
|
border-radius: var(--nf-radius-lg) var(--nf-radius-lg) 0 0;
|
|
}
|
|
|
|
#myPreferencesMenuPage a.listItem-border:nth-last-child(1 of a.listItem-border:not(.hide)) {
|
|
border-radius: 0 0 var(--nf-radius-lg) var(--nf-radius-lg);
|
|
}
|
|
|
|
#myPreferencesMenuPage a.listItem-border:nth-child(1 of a.listItem-border:not(.hide)):nth-last-child(1 of a.listItem-border:not(.hide)) {
|
|
border-radius: var(--nf-radius-lg);
|
|
}
|
|
|
|
#myPreferencesMenuPage a.listItem-border:hover {
|
|
background: var(--nf-fill-hover);
|
|
}
|
|
|
|
#myPreferencesMenuPage a.listItem-border .listItem {
|
|
gap: 1rem;
|
|
padding: 0.9rem 1rem 0.9rem 1.25rem;
|
|
}
|
|
|
|
#myPreferencesMenuPage a.listItem-border .listItemIcon {
|
|
margin: 0;
|
|
color: var(--nf-text-mute);
|
|
font-size: 1.375rem;
|
|
transition: color var(--nf-dur-1) var(--nf-ease-out);
|
|
}
|
|
|
|
#myPreferencesMenuPage a.listItem-border .listItemBody {
|
|
padding: 0;
|
|
}
|
|
|
|
#myPreferencesMenuPage a.listItem-border .listItemBodyText {
|
|
color: var(--nf-text-2);
|
|
font-size: 1rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
#myPreferencesMenuPage a.listItem-border .listItem::after {
|
|
content: "chevron_right";
|
|
margin-left: auto;
|
|
color: var(--nf-text-mute);
|
|
font: 400 1.5rem/1 "Material Icons";
|
|
transition: color var(--nf-dur-1) var(--nf-ease-out), transform var(--nf-dur-2) var(--nf-ease);
|
|
}
|
|
|
|
#myPreferencesMenuPage a.listItem-border:hover :is(.listItemIcon, .listItemBodyText) {
|
|
color: var(--nf-text);
|
|
}
|
|
|
|
.userPreferencesPage form :is(.verticalSection > .sectionTitle, .MuiStack-root > h2.MuiTypography-h2) {
|
|
margin: 0 0 1.25rem;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
.userPreferencesPage form .MuiStack-root > h2.MuiTypography-h2 {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.userPreferencesPage form > .verticalSection ~ .verticalSection,
|
|
.userPreferencesPage form > .MuiStack-root > .MuiStack-root ~ .MuiStack-root,
|
|
.dashboardDocument .mainAnimatedPage .MuiStack-root > .MuiTypography-h2:not(:first-child, h1 + *),
|
|
.dashboardDocument .mainAnimatedPage .MuiStack-root > .MuiStack-root:not(:first-child, h1 + *):has(> .MuiTypography-h2:first-child) {
|
|
margin-top: 2rem;
|
|
padding-top: 2rem;
|
|
border-top: 1px solid var(--nf-line);
|
|
}
|
|
|
|
.subtitleappearance-preview {
|
|
border-radius: var(--nf-radius-lg);
|
|
background: radial-gradient(120% 140% at 30% 20%, #4a4a4a, #1c1c1c 60%, #0a0a0a) !important;
|
|
}
|
|
|
|
#userProfilePage .imagePlaceHolder #image {
|
|
border-radius: var(--nf-radius-lg) !important; /* core sets 100% inline */
|
|
}
|
|
|
|
#userProfilePage .username {
|
|
margin: 0;
|
|
color: var(--nf-text);
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* ── Settings: layout ────────────────────────────────────────────────────── */
|
|
.userPreferencesPage :is(.readOnlyContent, form) {
|
|
margin-left: 0 !important;
|
|
margin-right: 0 !important;
|
|
}
|
|
|
|
@media (min-width: 50em) {
|
|
.userPreferencesPage :is(.readOnlyContent, form) {
|
|
max-width: 42rem;
|
|
}
|
|
}
|
|
|
|
#myPreferencesMenuPage a.listItem-border:focus-visible {
|
|
position: relative;
|
|
z-index: 1;
|
|
outline: var(--nf-focus);
|
|
outline-offset: -2px;
|
|
background: var(--nf-fill-hover);
|
|
}
|
|
|
|
:is(.formDialogContent, .userPreferencesPage, .dashboardDocument .mainAnimatedPage) :is(.emby-select-withcolor, .emby-input) {
|
|
height: 3rem;
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
:is(.formDialogContent, .userPreferencesPage, .dashboardDocument .mainAnimatedPage) .checkboxFieldDescription {
|
|
margin-top: 0.15rem;
|
|
padding-left: 2.4rem;
|
|
}
|
|
|
|
@media (min-width: 50em) {
|
|
.userPreferencesPage form > .verticalSection:has(> .selectContainer #selectHomeSection1) {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
column-gap: 1.5rem;
|
|
}
|
|
|
|
.userPreferencesPage form > .verticalSection:has(> .selectContainer #selectHomeSection1) > :not(.selectContainer) {
|
|
grid-column: 1 / -1;
|
|
}
|
|
}
|
|
|
|
/* ── Sticky Save ─────────────────────────────────────────────────────────── */
|
|
:is(.userPreferencesPage form, .dashboardDocument .mainAnimatedPage form:last-child) > .btnSave,
|
|
:is(.userPreferencesPage form, .dashboardDocument .mainAnimatedPage form:last-child) .MuiButton-root[type="submit"] {
|
|
position: sticky;
|
|
bottom: 1.25rem;
|
|
z-index: 2;
|
|
margin-top: 2rem;
|
|
box-shadow:
|
|
0 1.25rem 0 1.25rem var(--nf-bg),
|
|
0 -1rem 1.5rem 1rem color-mix(in srgb, var(--nf-bg) 85%, transparent);
|
|
}
|
|
|
|
/* ── MUI fields ──────────────────────────────────────────────────────────── */
|
|
.MuiFormControl-root > .MuiInputLabel-root.MuiInputLabel-root:has(+ .MuiFilledInput-root) {
|
|
position: static;
|
|
max-width: none;
|
|
margin-bottom: 0.45rem;
|
|
transform: none;
|
|
color: var(--nf-text-2);
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.MuiFilledInput-root::before,
|
|
.MuiFilledInput-root::after {
|
|
display: none;
|
|
}
|
|
|
|
.MuiFilledInput-root.MuiInputBase-multiline {
|
|
padding: 0;
|
|
}
|
|
|
|
.MuiFilledInput-root .MuiFilledInput-input {
|
|
padding: 0.7rem 0.9rem;
|
|
color: var(--nf-text);
|
|
}
|
|
|
|
.MuiFilledInput-root .MuiSelect-select.MuiSelect-select {
|
|
padding-right: 2.5rem;
|
|
}
|
|
|
|
.MuiFilledInput-root .MuiSelect-icon {
|
|
right: 0.6rem;
|
|
color: var(--nf-text-dim);
|
|
}
|
|
|
|
.MuiFormControl-root .MuiFormHelperText-root {
|
|
margin: 0.45rem 0 0;
|
|
color: var(--nf-text-mute);
|
|
font-size: 0.8125rem;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.MuiFormHelperText-root .MuiLink-root {
|
|
color: var(--nf-text-2);
|
|
text-decoration-color: rgb(255 255 255 / 0.4);
|
|
}
|
|
|
|
.MuiFormHelperText-root .MuiLink-root:hover {
|
|
color: var(--nf-text);
|
|
text-decoration-color: currentColor;
|
|
}
|
|
|
|
.MuiCheckbox-root.MuiCheckbox-root,
|
|
.MuiRadio-root.MuiRadio-root {
|
|
color: var(--nf-field-line-hover);
|
|
}
|
|
|
|
.MuiCheckbox-root.MuiCheckbox-root.Mui-checked,
|
|
.MuiRadio-root.MuiRadio-root.Mui-checked {
|
|
color: #fff;
|
|
}
|
|
|
|
.MuiCheckbox-root.MuiCheckbox-root:hover {
|
|
background-color: var(--nf-fill-hover);
|
|
}
|
|
|
|
.MuiFormControlLabel-root .MuiFormControlLabel-label {
|
|
color: var(--nf-text-2);
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.MuiSwitch-root .MuiSwitch-switchBase {
|
|
color: var(--nf-text-dim);
|
|
}
|
|
|
|
.MuiSwitch-root .MuiSwitch-track {
|
|
background-color: var(--nf-surface-4);
|
|
opacity: 1;
|
|
}
|
|
|
|
.MuiSwitch-root .MuiSwitch-switchBase.Mui-checked {
|
|
color: var(--nf-bg);
|
|
}
|
|
|
|
.MuiSwitch-root .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track {
|
|
background-color: #fff;
|
|
opacity: 1;
|
|
}
|
|
|
|
.MuiTab-root.MuiTab-root {
|
|
color: var(--nf-text-dim);
|
|
text-transform: none;
|
|
}
|
|
|
|
.MuiTab-root.MuiTab-root:hover,
|
|
.MuiTab-root.MuiTab-root.Mui-selected {
|
|
color: var(--nf-text);
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════════════════════════
|
|
* 7f. Dashboard
|
|
* ═══════════════════════════════════════════════════════════════════════ */
|
|
|
|
/* ── Drawer ──────────────────────────────────────────────────────────────── */
|
|
.MuiDrawer-paper {
|
|
border-right: 1px solid var(--nf-line);
|
|
background: var(--nf-bg);
|
|
}
|
|
|
|
.MuiDrawer-paper .MuiListSubheader-root {
|
|
position: static;
|
|
padding: 1.5rem 1.25rem 0.5rem;
|
|
background: none;
|
|
line-height: 1;
|
|
}
|
|
|
|
.MuiDrawer-paper .MuiListItemButton-root {
|
|
min-height: 0;
|
|
margin: 0.0625rem 0.5rem;
|
|
padding: 0.5rem 0.75rem;
|
|
border-radius: var(--nf-radius);
|
|
color: var(--nf-text-dim);
|
|
transition: background-color var(--nf-dur-1) var(--nf-ease-out), color var(--nf-dur-1) var(--nf-ease-out);
|
|
}
|
|
|
|
.MuiDrawer-paper .MuiListItemButton-root:hover {
|
|
background: var(--nf-fill-hover);
|
|
color: var(--nf-text);
|
|
}
|
|
|
|
.MuiDrawer-paper .MuiListItemButton-root.Mui-selected {
|
|
background: var(--nf-surface-2);
|
|
color: var(--nf-text);
|
|
}
|
|
|
|
.MuiDrawer-paper .MuiListItemButton-root.Mui-selected .MuiListItemText-primary {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.MuiDrawer-paper .MuiListItemIcon-root {
|
|
min-width: 2rem;
|
|
color: var(--nf-text-mute);
|
|
transition: color var(--nf-dur-1) var(--nf-ease-out);
|
|
}
|
|
|
|
.MuiDrawer-paper :is(.MuiListItemIcon-root > svg, .MuiListItemButton-root > svg) {
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.MuiDrawer-paper .MuiListItemButton-root > svg {
|
|
color: var(--nf-text-mute);
|
|
}
|
|
|
|
.MuiDrawer-paper .MuiListItemButton-root:is(:hover, .Mui-selected) .MuiListItemIcon-root {
|
|
color: var(--nf-text);
|
|
}
|
|
|
|
.MuiDrawer-paper .MuiListItemText-root {
|
|
margin: 0;
|
|
}
|
|
|
|
.MuiDrawer-paper .MuiListItemText-primary {
|
|
font-size: 0.875rem;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.MuiDrawer-paper > .MuiList-root:first-child {
|
|
padding-top: 0.75rem;
|
|
}
|
|
|
|
.MuiDrawer-paper > .MuiList-root:first-child .MuiListItemIcon-root {
|
|
min-width: 0;
|
|
margin-right: 0.75rem;
|
|
}
|
|
|
|
.MuiDrawer-paper > .MuiList-root:first-child .MuiListItemText-primary {
|
|
color: var(--nf-text);
|
|
font-size: 1rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.MuiDrawer-paper > .MuiList-root:first-child .MuiListItemText-secondary {
|
|
color: var(--nf-text-mute);
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
/* ── Page ────────────────────────────────────────────────────────────────── */
|
|
.dashboardDocument .mainAnimatedPage > .content-primary {
|
|
padding: 1rem clamp(1rem, 2.5vw, 3rem) 4rem;
|
|
}
|
|
|
|
.dashboardDocument a.MuiButton-root:has(> .MuiTypography-h3) {
|
|
min-width: 0;
|
|
margin: 0 0 0.75rem;
|
|
padding: 0;
|
|
background: none;
|
|
color: var(--nf-text-2);
|
|
}
|
|
|
|
.dashboardDocument a.MuiButton-root:has(> .MuiTypography-h3) .MuiTouchRipple-root {
|
|
display: none;
|
|
}
|
|
|
|
.dashboardDocument a.MuiButton-root > .MuiTypography-h3 {
|
|
font-size: 1.25rem;
|
|
font-weight: 700;
|
|
letter-spacing: -0.005em;
|
|
line-height: 1.35;
|
|
transition: color var(--nf-dur-2) var(--nf-ease-out);
|
|
}
|
|
|
|
.dashboardDocument a.MuiButton-root:has(> .MuiTypography-h3) .MuiButton-endIcon {
|
|
margin-left: 0.2rem;
|
|
color: var(--nf-text-mute);
|
|
transition: transform var(--nf-dur-2) var(--nf-ease), color var(--nf-dur-2) var(--nf-ease-out);
|
|
}
|
|
|
|
.dashboardDocument a.MuiButton-root:has(> .MuiTypography-h3) .MuiButton-endIcon > svg {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.dashboardDocument a.MuiButton-root:has(> .MuiTypography-h3):is(:hover, :focus-visible) {
|
|
background: none;
|
|
color: var(--nf-text);
|
|
}
|
|
|
|
/* ── Panels ──────────────────────────────────────────────────────────────── */
|
|
.dashboardDocument .mainAnimatedPage .MuiCard-root {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.dashboardDocument .mainAnimatedPage .MuiList-root:not(.MuiPaper-root *) {
|
|
padding: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.dashboardDocument .mainAnimatedPage .MuiList-root:not(.MuiPaper-root *) > li + li {
|
|
border-top: 1px solid var(--nf-line);
|
|
}
|
|
|
|
.dashboardDocument .mainAnimatedPage .MuiListItemButton-root:hover {
|
|
background: var(--nf-fill-hover);
|
|
}
|
|
|
|
.dashboardDocument .mainAnimatedPage .MuiListItemIcon-root {
|
|
color: var(--nf-text-mute);
|
|
}
|
|
|
|
.dashboardDocument .mainAnimatedPage .MuiListItemAvatar-root {
|
|
min-width: 3rem;
|
|
}
|
|
|
|
.dashboardDocument .mainAnimatedPage .MuiListItemAvatar-root > .MuiAvatar-root {
|
|
width: 2.25rem;
|
|
height: 2.25rem;
|
|
}
|
|
|
|
.dashboardDocument .mainAnimatedPage .MuiListItemAvatar-root > .MuiAvatar-root > svg {
|
|
font-size: 1.15rem;
|
|
}
|
|
|
|
.dashboardDocument .mainAnimatedPage:not(#dashboardPage) .MuiListItemAvatar-root > .MuiAvatar-root {
|
|
background: var(--nf-surface-3);
|
|
color: var(--nf-text-dim);
|
|
}
|
|
|
|
.dashboardDocument .mainAnimatedPage:not(#dashboardPage) .MuiListItemAvatar-root > .MuiAvatar-root > svg {
|
|
color: inherit !important; /* sx sets #fff */
|
|
}
|
|
|
|
#scheduledTasksPage .MuiListItemText-root > :not(h3) {
|
|
margin-top: 0.15rem;
|
|
color: var(--nf-text-mute);
|
|
font-size: 0.8125rem;
|
|
}
|
|
|
|
.dashboardDocument .mainAnimatedPage .MuiListItemText-root > h3.MuiTypography-h3 {
|
|
color: var(--nf-text-2);
|
|
font-size: 0.9375rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.dashboardDocument .mainAnimatedPage .MuiListItemSecondaryAction-root .MuiIconButton-root {
|
|
color: var(--nf-text-dim);
|
|
}
|
|
|
|
.dashboardDocument .mainAnimatedPage .MuiListItemSecondaryAction-root .MuiIconButton-root:hover {
|
|
background: var(--nf-fill-hover);
|
|
color: var(--nf-text);
|
|
}
|
|
|
|
.dashboardDocument .mainAnimatedPage h3.MuiTypography-h3:not(.MuiListItemText-root > *) {
|
|
color: var(--nf-text);
|
|
font-size: 1.0625rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.dashboardDocument #dashboardPage .MuiListItemText-root {
|
|
margin: 0;
|
|
}
|
|
|
|
.dashboardDocument #dashboardPage .MuiListItemText-root > .MuiTypography-body1 {
|
|
color: var(--nf-text-2);
|
|
font-size: 0.9375rem;
|
|
font-weight: 500;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.dashboardDocument #dashboardPage .MuiListItemText-root > .MuiStack-root > .MuiTypography-root {
|
|
color: var(--nf-text-mute);
|
|
font-size: 0.8125rem;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.dashboardDocument #dashboardPage .MuiListItemText-primary {
|
|
color: var(--nf-text-mute);
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.dashboardDocument #dashboardPage .MuiListItemText-secondary > .MuiTypography-root:first-child {
|
|
color: var(--nf-text-2);
|
|
font-size: 0.9375rem;
|
|
padding-bottom: 0.4rem;
|
|
}
|
|
|
|
.dashboardDocument #dashboardPage .MuiListItemText-secondary .MuiTypography-body2 {
|
|
margin-top: 0.35rem;
|
|
color: var(--nf-text-mute);
|
|
font-size: 0.75rem;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.MuiLinearProgress-root:has(> [class*="barColorSuccess"], > [class*="barColorWarning"], > [class*="barColorError"]) {
|
|
height: 3px;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.MuiLinearProgress-bar[class*="barColorSuccess"] {
|
|
background-color: var(--nf-text-dim);
|
|
}
|
|
|
|
.dashboardDocument #dashboardPage .MuiPaper-root > .MuiStack-root > .MuiStack-root:first-child > .MuiTypography-root {
|
|
color: var(--nf-text-mute);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.dashboardDocument #dashboardPage .MuiPaper-root > .MuiStack-root > .MuiStack-root + .MuiStack-root > .MuiTypography-root {
|
|
color: var(--nf-text);
|
|
}
|
|
|
|
.dashboardDocument #dashboardPage .MuiCard-root .MuiTypography-h5 {
|
|
color: var(--nf-text);
|
|
font-size: 1.75rem;
|
|
font-weight: 700;
|
|
line-height: 1.2;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.dashboardDocument #dashboardPage .MuiCard-root .MuiTypography-body2 {
|
|
color: var(--nf-text-mute);
|
|
font-size: 0.8125rem;
|
|
}
|
|
|
|
.dashboardDocument #dashboardPage .MuiCard-root > .MuiStack-root > svg {
|
|
color: var(--nf-text-mute);
|
|
}
|
|
|
|
.dashboardDocument .mainAnimatedPage .MuiCard-root .MuiIconButton-root {
|
|
color: var(--nf-text-dim);
|
|
}
|
|
|
|
.dashboardDocument .mainAnimatedPage .MuiCard-root .MuiIconButton-root:hover {
|
|
background: var(--nf-fill-hover);
|
|
color: var(--nf-text);
|
|
}
|
|
|
|
/* ── Buttons ─────────────────────────────────────────────────────────────── */
|
|
:is(.dashboardDocument .mainAnimatedPage, .MuiDialog-root) .MuiButton-root:not(.MuiButton-text, .MuiButton-sizeSmall) {
|
|
min-height: 2.5rem;
|
|
padding-inline: 1.25rem;
|
|
font-weight: 700;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.MuiButton-root.MuiButton-outlined:not(.MuiButton-outlinedError) {
|
|
border-color: var(--nf-outline);
|
|
color: var(--nf-text);
|
|
}
|
|
|
|
.MuiButton-root.MuiButton-outlined:not(.MuiButton-outlinedError):hover {
|
|
border-color: #fff;
|
|
background: var(--nf-fill-hover);
|
|
}
|
|
|
|
.MuiButton-root.MuiButton-textPrimary:not(.MuiAppBar-root *) {
|
|
color: var(--nf-text);
|
|
}
|
|
|
|
.MuiButton-root.MuiButton-textPrimary:not(.MuiAppBar-root *):hover {
|
|
background: var(--nf-fill-hover);
|
|
}
|
|
|
|
/* ── Alerts ──────────────────────────────────────────────────────────────── */
|
|
.MuiAlert-root.MuiAlert-standard {
|
|
color: var(--nf-text-2);
|
|
}
|
|
|
|
.MuiAlert-standardSuccess .MuiAlert-icon { color: var(--nf-success); }
|
|
.MuiAlert-standardWarning .MuiAlert-icon { color: var(--nf-warning); }
|
|
.MuiAlert-standardError .MuiAlert-icon { color: var(--nf-error); }
|
|
.MuiAlert-standardInfo .MuiAlert-icon { color: var(--nf-text-dim); }
|
|
|
|
/* ── MUI dialogs ─────────────────────────────────────────────────────────── */
|
|
.MuiDialog-paper.MuiPaper-root {
|
|
border: 1px solid var(--nf-line);
|
|
border-radius: var(--nf-radius-lg);
|
|
background: var(--nf-surface);
|
|
box-shadow: var(--nf-shadow-3);
|
|
}
|
|
|
|
.MuiDialog-paper .MuiDialogContentText-root {
|
|
color: var(--nf-text-dim);
|
|
}
|
|
|
|
.MuiDialog-paper .MuiDialogActions-root {
|
|
gap: 0.5rem;
|
|
padding: 0 1.5rem 1.5rem;
|
|
}
|
|
|
|
/* ── Tables ──────────────────────────────────────────────────────────────── */
|
|
.dashboardDocument .MuiPaper-root:has(> .MuiTableContainer-root) :is(.MuiTableRow-root, .MuiTableCell-root),
|
|
.dashboardDocument .MuiPaper-root:has(> .MuiTableContainer-root) > .MuiBox-root {
|
|
background-color: transparent !important; /* MRT's rows are !important */
|
|
}
|
|
|
|
.dashboardDocument .MuiPaper-root:has(> .MuiTableContainer-root) .MuiTableCell-head {
|
|
background-color: color-mix(in srgb, #fff 4%, var(--nf-bg)) !important;
|
|
color: var(--nf-text-mute);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.dashboardDocument .MuiPaper-root:has(> .MuiTableContainer-root) .MuiTableCell-head :is(.MuiTableSortLabel-icon, .MuiIconButton-root) {
|
|
color: var(--nf-text-mute);
|
|
}
|
|
|
|
.dashboardDocument .MuiPaper-root:has(> .MuiTableContainer-root) .MuiTableCell-body {
|
|
color: var(--nf-text-2);
|
|
}
|
|
|
|
.dashboardDocument .MuiTableBody-root > .MuiTableRow-root:hover > .MuiTableCell-root {
|
|
background-color: var(--nf-fill-hover) !important;
|
|
}
|
|
|
|
.dashboardDocument .MuiPaper-root:has(> .MuiTableContainer-root) :is(.MuiTablePagination-root, .MuiTablePagination-root .MuiIconButton-root, .MuiToolbar-root .MuiIconButton-root) {
|
|
color: var(--nf-text-dim);
|
|
}
|
|
|
|
.dashboardDocument .MuiToggleButtonGroup-root.MuiToggleButtonGroup-root {
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.dashboardDocument .MuiChip-root.MuiChip-clickable .MuiChip-label {
|
|
padding: 0 0.875rem;
|
|
}
|
|
|
|
/* ── Legacy pages ────────────────────────────────────────────────────────── */
|
|
.dashboardDocument .content-primary > .verticalSection:first-child > .sectionTitleContainer > .sectionTitle {
|
|
margin: 0;
|
|
}
|
|
|
|
.dashboardDocument .sectionTitleContainer > div > .sectionTitleButton.fab {
|
|
margin-left: 0.75rem;
|
|
}
|
|
|
|
.dashboardDocument input:is([type="checkbox"], [type="radio"]) {
|
|
accent-color: #fff;
|
|
}
|
|
|
|
.dashboardDocument .mainAnimatedPage .checkboxList.paperList {
|
|
padding: 0.5rem 1rem;
|
|
}
|
|
|
|
/* ── Users ───────────────────────────────────────────────────────────────── */
|
|
#userProfilesPage .visualCardBox {
|
|
background: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
#userProfilesPage .cardScalable {
|
|
border-radius: var(--nf-radius-lg);
|
|
overflow: hidden;
|
|
}
|
|
|
|
#userProfilesPage .cardFooter {
|
|
padding: 0.55rem 0 0;
|
|
background: none;
|
|
}
|
|
|
|
#userProfilesPage .cardText {
|
|
padding: 0;
|
|
color: var(--nf-text-2);
|
|
font-size: 0.9375rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
#userProfilesPage .cardText-secondary {
|
|
margin-top: 0.15rem;
|
|
color: var(--nf-text-mute);
|
|
font-size: 0.8125rem;
|
|
font-weight: 400;
|
|
}
|
|
|
|
#userProfilesPage .btnUserMenu {
|
|
color: var(--nf-text-dim);
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════════════════════════
|
|
* 7g. Mobile layout
|
|
* ═══════════════════════════════════════════════════════════════════════ */
|
|
|
|
.layout-mobile {
|
|
--nf-m-top: calc(var(--nf-appbar) + env(safe-area-inset-top));
|
|
--nf-m-hero: 50vh;
|
|
--nf-m-logo: 20vh;
|
|
--nf-fs-h2: clamp(1.25rem, 1rem + 0.75vw, 1.6rem);
|
|
}
|
|
|
|
.layout-mobile .MuiAppBar-root.MuiAppBar-positionFixed {
|
|
padding-top: env(safe-area-inset-top);
|
|
}
|
|
|
|
.layout-mobile .MuiAppBar-root.MuiAppBar-positionFixed + div[aria-hidden="true"] {
|
|
min-height: var(--nf-m-top);
|
|
}
|
|
|
|
/* ── Detail pages: hero ──────────────────────────────────────────────────── */
|
|
|
|
.layout-mobile #itemDetailPage .itemBackdrop {
|
|
height: var(--nf-m-hero);
|
|
margin-top: calc(-1 * var(--nf-m-top)) !important; /* core: -48px !important */
|
|
background-position: center 20%;
|
|
}
|
|
|
|
.layout-mobile #itemDetailPage .itemBackdrop:not([style*="url("], [data-src], .lazy, .lazy-hidden) {
|
|
height: var(--nf-m-top);
|
|
}
|
|
|
|
.layout-mobile #itemDetailPage:has(.programGuideSection:not(.hide)) .itemBackdrop[style*="url("] {
|
|
height: calc(var(--nf-m-top) + 12rem);
|
|
overflow: hidden;
|
|
isolation: isolate;
|
|
background-size: 0 0;
|
|
}
|
|
|
|
.layout-mobile #itemDetailPage:has(.programGuideSection:not(.hide)) .itemBackdrop::before {
|
|
background: linear-gradient(0deg, var(--nf-bg) 0, rgb(var(--nf-bg-rgb) / 0.5) 15%, transparent 40%);
|
|
}
|
|
|
|
.layout-mobile #itemDetailPage:has(.programGuideSection:not(.hide)):has(.itemBackdrop[style*="url("]) .detailPageWrapperContainer {
|
|
position: relative;
|
|
margin-top: -10rem;
|
|
background: none;
|
|
}
|
|
|
|
.layout-mobile #itemDetailPage:has(.programGuideSection:not(.hide)) .itemBackdrop::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: -3rem;
|
|
z-index: -1;
|
|
background: inherit;
|
|
background-size: 5rem 5rem;
|
|
background-repeat: repeat;
|
|
filter: blur(40px) saturate(2) brightness(1.15);
|
|
}
|
|
|
|
.layout-mobile #itemDetailPage .itemBackdrop::before {
|
|
background:
|
|
linear-gradient(180deg, rgb(0 0 0 / 0.55), transparent 25%),
|
|
linear-gradient(0deg,
|
|
var(--nf-bg) 0,
|
|
var(--nf-bg) 4%,
|
|
rgb(var(--nf-bg-rgb) / 0.88) 22%,
|
|
rgb(var(--nf-bg-rgb) / 0.66) 34%,
|
|
rgb(var(--nf-bg-rgb) / 0.38) 48%,
|
|
rgb(var(--nf-bg-rgb) / 0.14) 70%,
|
|
transparent 90%);
|
|
}
|
|
|
|
.layout-mobile #itemDetailPage .detailLogo:not(.hide) {
|
|
display: block;
|
|
left: 0;
|
|
right: 0;
|
|
top: calc(var(--nf-m-hero) - var(--nf-m-top) - var(--nf-m-logo) - 0.5rem);
|
|
width: min(80%, 28rem);
|
|
height: var(--nf-m-logo);
|
|
margin: 0 auto;
|
|
background-position: center bottom;
|
|
background-size: contain;
|
|
filter: drop-shadow(0 2px 12px rgb(0 0 0 / 0.5));
|
|
z-index: 2;
|
|
}
|
|
|
|
.layout-mobile #itemDetailPage .detailLogo:not(.hide) ~ .detailPageWrapperContainer .nameContainer > :is(.parentName, .itemName.parentNameLast) {
|
|
display: none;
|
|
}
|
|
|
|
.layout-mobile #itemDetailPage:not(:has(.detailImageContainer .cardImageIcon.person, .programGuideSection:not(.hide))) .infoWrapper > .detailImageContainer {
|
|
display: none;
|
|
}
|
|
|
|
.layout-mobile #itemDetailPage:has(.detailImageContainer .cardImageIcon.person, .programGuideSection:not(.hide)) .infoWrapper > .detailImageContainer {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin: 1.5rem 0 1.25rem;
|
|
}
|
|
|
|
.layout-mobile #itemDetailPage:has(.detailImageContainer .cardImageIcon.person, .programGuideSection:not(.hide)) .infoWrapper > .detailImageContainer .card,
|
|
.layout-mobile #itemDetailPage:has(.infoWrapper > .detailImageContainer .backdropCard):has(.nameContainer > .parentName):not(:has(.recordingFields:not(.hide) .recordingButton)) .infoWrapper > .detailImageContainer .card {
|
|
position: relative;
|
|
top: auto;
|
|
bottom: auto;
|
|
left: auto;
|
|
width: min(45%, 13rem);
|
|
max-width: none;
|
|
margin: 0;
|
|
filter: none;
|
|
}
|
|
|
|
.layout-mobile #itemDetailPage:has(.detailImageContainer .cardImageIcon.person, .programGuideSection:not(.hide)) .infoWrapper > .detailImageContainer .cardScalable,
|
|
.layout-mobile #itemDetailPage:has(.infoWrapper > .detailImageContainer .backdropCard):has(.nameContainer > .parentName):not(:has(.recordingFields:not(.hide) .recordingButton)) .infoWrapper > .detailImageContainer .cardScalable {
|
|
overflow: hidden;
|
|
border-radius: var(--nf-radius-lg);
|
|
box-shadow: 0 0 0 1px var(--nf-line), var(--nf-shadow-3);
|
|
}
|
|
|
|
.layout-mobile #itemDetailPage .detailRibbon {
|
|
padding: 0 var(--nf-gutter);
|
|
text-align: center;
|
|
}
|
|
|
|
.layout-mobile #itemDetailPage .infoWrapper {
|
|
padding-left: 0;
|
|
}
|
|
|
|
.layout-mobile #itemDetailPage :is(.nameContainer, .itemMiscInfo, .mainDetailButtons) {
|
|
justify-content: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.layout-mobile #itemDetailPage .itemName {
|
|
font-size: 1.75rem;
|
|
letter-spacing: -0.01em;
|
|
line-height: 1.15;
|
|
}
|
|
|
|
.layout-mobile #itemDetailPage .nameContainer > .itemName.originalTitle {
|
|
margin: 0.3em 0 0;
|
|
color: var(--nf-text-dim);
|
|
font-size: 0.9rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.layout-mobile #itemDetailPage .itemMiscInfo-primary {
|
|
flex-wrap: wrap;
|
|
gap: 0.25em 0.75em;
|
|
margin: 0.6rem 0 0 !important; /* core sets margin-bottom inline */
|
|
color: var(--nf-text-2);
|
|
}
|
|
|
|
.layout-mobile #itemDetailPage .itemMiscInfo-primary > .mediaInfoItem {
|
|
margin: 0;
|
|
}
|
|
|
|
.layout-mobile #itemDetailPage .mainDetailButtons {
|
|
flex-wrap: wrap;
|
|
gap: 0.65em;
|
|
margin: 1.25rem 0 0;
|
|
padding: 0;
|
|
}
|
|
|
|
@media (orientation: portrait) and (max-width: 40em) {
|
|
.layout-mobile #itemDetailPage .mainDetailButtons .detailButton.btnPlay {
|
|
flex: 1 0 100%;
|
|
justify-content: center;
|
|
margin: 0 0 0.35em;
|
|
}
|
|
}
|
|
|
|
/* ── Detail pages: episodes ──────────────────────────────────────────────── */
|
|
|
|
.layout-mobile #itemDetailPage:has(.infoWrapper > .detailImageContainer .backdropCard):has(.nameContainer > .parentName):not(:has(.recordingFields:not(.hide) .recordingButton)) {
|
|
--nf-m-still: min(78vw, 26rem);
|
|
}
|
|
|
|
.layout-mobile #itemDetailPage:has(.infoWrapper > .detailImageContainer .backdropCard):has(.nameContainer > .parentName):not(:has(.recordingFields:not(.hide) .recordingButton)) .detailLogo {
|
|
display: none;
|
|
}
|
|
|
|
.layout-mobile #itemDetailPage:has(.infoWrapper > .detailImageContainer .backdropCard):has(.nameContainer > .parentName):not(:has(.recordingFields:not(.hide) .recordingButton)) .itemBackdrop {
|
|
height: calc(var(--nf-m-top) + 2rem + var(--nf-m-still) * 9 / 16);
|
|
}
|
|
|
|
.layout-mobile #itemDetailPage:has(.infoWrapper > .detailImageContainer .backdropCard):has(.nameContainer > .parentName):not(:has(.recordingFields:not(.hide) .recordingButton)) .itemBackdrop::before {
|
|
background:
|
|
linear-gradient(180deg, rgb(0 0 0 / 0.6), transparent 25%),
|
|
linear-gradient(0deg,
|
|
var(--nf-bg) 0,
|
|
var(--nf-bg) 4%,
|
|
rgb(var(--nf-bg-rgb) / 0.92) 22%,
|
|
rgb(var(--nf-bg-rgb) / 0.83) 45%,
|
|
rgb(var(--nf-bg-rgb) / 0.69) 75%,
|
|
rgb(var(--nf-bg-rgb) / 0.62) 100%);
|
|
}
|
|
|
|
.layout-mobile #itemDetailPage:has(.infoWrapper > .detailImageContainer .backdropCard):has(.nameContainer > .parentName):not(:has(.recordingFields:not(.hide) .recordingButton)) .infoWrapper > .detailImageContainer {
|
|
display: flex;
|
|
position: relative;
|
|
justify-content: center;
|
|
margin: calc(-0.5rem - var(--nf-m-still) * 9 / 16) 0 1.25rem;
|
|
}
|
|
|
|
.layout-mobile #itemDetailPage:has(.infoWrapper > .detailImageContainer .backdropCard):has(.nameContainer > .parentName):not(:has(.recordingFields:not(.hide) .recordingButton)) .infoWrapper > .detailImageContainer .card {
|
|
z-index: auto; /* core's 3 puts the still's shadow over the title */
|
|
width: var(--nf-m-still);
|
|
}
|
|
|
|
.layout-mobile #itemDetailPage:has(.infoWrapper > .detailImageContainer .backdropCard):has(.nameContainer > .parentName):not(:has(.recordingFields:not(.hide) .recordingButton)) .nameContainer {
|
|
position: relative; /* above the still's shadow */
|
|
}
|
|
|
|
.layout-mobile #itemDetailPage:has(.infoWrapper > .detailImageContainer .backdropCard):has(.nameContainer > .parentName):not(:has(.recordingFields:not(.hide) .recordingButton)) .nameContainer > .parentName {
|
|
display: block;
|
|
margin: 0;
|
|
font-size: 1.75rem;
|
|
letter-spacing: -0.01em;
|
|
line-height: 1.15;
|
|
}
|
|
|
|
.layout-mobile #itemDetailPage:has(.infoWrapper > .detailImageContainer .backdropCard):has(.nameContainer > .parentName):not(:has(.recordingFields:not(.hide) .recordingButton)) .nameContainer > .parentName ~ .itemName:not(.originalTitle) {
|
|
margin: 0.35em 0 0;
|
|
color: var(--nf-text-2);
|
|
font-size: 1.05rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
/* ── Detail pages: below the hero ────────────────────────────────────────── */
|
|
|
|
.layout-mobile #itemDetailPage .detailPagePrimaryContent {
|
|
padding: 1.75rem var(--nf-gutter) 0 !important; /* core: 5% !important */
|
|
}
|
|
|
|
.layout-mobile #itemDetailPage :is(.detailSectionContent > .tagline, .detailSectionContent .overview, .itemDetailsGroup) {
|
|
max-width: none;
|
|
}
|
|
|
|
/* ── Detail pages: episode list ──────────────────────────────────────────── */
|
|
|
|
.layout-mobile #itemDetailPage .listItem-largeImage {
|
|
display: block;
|
|
margin: 0 0 1.5rem;
|
|
padding: 0;
|
|
background: none;
|
|
}
|
|
|
|
.layout-mobile #itemDetailPage .listItem-largeImage > .listItem-content {
|
|
align-items: center;
|
|
}
|
|
|
|
.layout-mobile #itemDetailPage .listItem-largeImage .listItemImage-large {
|
|
flex: none;
|
|
width: min(40%, 11rem);
|
|
height: auto;
|
|
aspect-ratio: 16 / 9;
|
|
margin: 0;
|
|
border-radius: var(--nf-radius);
|
|
background-size: cover;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.layout-mobile #itemDetailPage .listItem-largeImage .listItemImageButton {
|
|
width: 2rem;
|
|
height: 2rem;
|
|
}
|
|
|
|
.layout-mobile #itemDetailPage .listItem-largeImage .listItemBody {
|
|
min-width: 0;
|
|
padding: 0 0.25rem 0 0.85rem;
|
|
}
|
|
|
|
.layout-mobile #itemDetailPage .listItem-largeImage .listItemBodyText:first-child {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
margin: 0;
|
|
padding: 0;
|
|
color: var(--nf-text);
|
|
font-size: 0.95rem;
|
|
font-weight: 600;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.layout-mobile #itemDetailPage .listItem-largeImage .listItemMediaInfo {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.25em 0.75em;
|
|
margin-top: 0.3em;
|
|
color: var(--nf-text-dim);
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.layout-mobile #itemDetailPage .listItem-largeImage .listItemMediaInfo > .mediaInfoItem {
|
|
margin: 0;
|
|
}
|
|
|
|
.layout-mobile #itemDetailPage .listItem-largeImage .listItemMediaInfo > :is(.starRatingContainer, .endsAt) {
|
|
display: none;
|
|
}
|
|
|
|
.layout-mobile #itemDetailPage .listItem-largeImage .listViewUserDataButtons {
|
|
gap: 0;
|
|
}
|
|
|
|
.layout-mobile #itemDetailPage .listItem-largeImage .listItemButton {
|
|
padding: 0.35em;
|
|
color: var(--nf-text-mute);
|
|
font-size: 0.85em;
|
|
}
|
|
|
|
.layout-mobile #itemDetailPage .listItem-largeImage :is(.listItem-bottomoverview, .listItem-overview) {
|
|
margin: 0.5rem 0 0;
|
|
padding: 0;
|
|
color: var(--nf-text-mute);
|
|
font-size: 0.85rem;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
/* ── Cards ───────────────────────────────────────────────────────────────── */
|
|
.layout-mobile .card:is(.portraitCard, .overflowPortraitCard, .squareCard, .overflowSquareCard) :is(.cardScalable > button.cardOverlayButton-br[data-action="play"], .cardScalable > a > .cardOverlayButton-br) {
|
|
display: none;
|
|
}
|
|
|
|
.layout-mobile :is(.backdropCard, .overflowBackdropCard, .smallBackdropCard) :is(.cardScalable > button.cardOverlayButton-br[data-action="play"], .cardScalable > a > .cardOverlayButton-br > .cardOverlayButton) {
|
|
--nf-rise: 0rem;
|
|
}
|
|
|
|
.layout-mobile :is(.backdropCard, .overflowBackdropCard, .smallBackdropCard) :is(.cardScalable > button.cardOverlayButton-br[data-action="play"], .cardScalable > a > .cardOverlayButton-br) {
|
|
top: auto;
|
|
right: auto;
|
|
bottom: 0.6rem;
|
|
left: 0.6rem;
|
|
margin: 0;
|
|
}
|
|
|
|
.layout-mobile :is(.backdropCard, .overflowBackdropCard, .smallBackdropCard) .cardScalable > a > .cardOverlayButton-br {
|
|
padding: 0;
|
|
}
|
|
|
|
/* ── Navigation drawer ───────────────────────────────────────────────────── */
|
|
.MuiDrawer-modal > .MuiBackdrop-root {
|
|
background: rgb(0 0 0 / 0.7);
|
|
}
|
|
|
|
.MuiDrawer-paper:has(> .MuiBox-root) {
|
|
width: min(80vw, 18rem);
|
|
padding-top: env(safe-area-inset-top);
|
|
border-right: 0;
|
|
outline: 0; /* MUI focuses the sheet on open */
|
|
box-shadow: var(--nf-shadow-3);
|
|
}
|
|
|
|
.MuiDrawer-paper > .MuiBox-root > .MuiList-root:first-child > li:first-child > a {
|
|
min-height: var(--nf-appbar);
|
|
margin-bottom: 0.5rem;
|
|
background: none;
|
|
}
|
|
|
|
.MuiDrawer-paper > .MuiBox-root > .MuiList-root:first-child > li:first-child > a > * {
|
|
display: none;
|
|
}
|
|
|
|
.MuiDrawer-paper > .MuiBox-root .MuiListItemButton-root {
|
|
margin: 0;
|
|
padding: 0.8rem 1.25rem;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.MuiDrawer-paper > .MuiBox-root .MuiListItemButton-root.Mui-selected {
|
|
background: none;
|
|
box-shadow: inset 3px 0 0 var(--nf-text);
|
|
}
|
|
|
|
.MuiDrawer-paper > .MuiBox-root .MuiListItemIcon-root {
|
|
min-width: 2.5rem;
|
|
}
|
|
|
|
.MuiDrawer-paper > .MuiBox-root .MuiListItemText-primary {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.MuiDrawer-paper > .MuiBox-root > .MuiDivider-root {
|
|
margin: 0.5rem 1.25rem;
|
|
border-color: var(--nf-line);
|
|
}
|
|
|
|
/* ── Rows, guide ─────────────────────────────────────────────────────────── */
|
|
|
|
.layout-mobile a.clearLink > .sectionTitle + svg {
|
|
padding-top: 0.5em;
|
|
}
|
|
|
|
.layout-mobile .tvguide :is(.channelsContainer, .guide-channelTimeslotHeader) {
|
|
width: 6.5rem;
|
|
}
|
|
|
|
.layout-mobile .tvguide .guideChannelImage {
|
|
right: 0.5rem;
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════════════════════════
|
|
* 7h. Sign-in
|
|
* ═══════════════════════════════════════════════════════════════════════ */
|
|
|
|
#loginPage {
|
|
display: flex;
|
|
background: radial-gradient(70rem 40rem at 50% -10%, rgb(229 9 20 / 0.16), transparent 70%), #000;
|
|
}
|
|
|
|
#loginPage > div {
|
|
box-sizing: border-box;
|
|
width: min(100% - 2rem, 28.125rem);
|
|
margin: auto;
|
|
padding: 3rem 4.25rem 2.5rem !important; /* core: .padded-bottom-page */
|
|
border-radius: var(--nf-radius);
|
|
background: rgb(var(--nf-bg-rgb) / 0.75);
|
|
box-shadow: var(--nf-shadow-3);
|
|
}
|
|
|
|
#loginPage :is(.manualLoginForm, .readOnlyContent) {
|
|
max-width: none;
|
|
margin: 0 !important; /* core sets the bottom margin inline */
|
|
}
|
|
|
|
#loginPage .manualLoginForm > div:first-child {
|
|
justify-content: flex-start;
|
|
padding: 0;
|
|
}
|
|
|
|
#loginPage .manualLoginForm h1 {
|
|
margin: 0 0 1.75rem;
|
|
color: var(--nf-text);
|
|
font-size: 2rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
#loginPage .inputContainer {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
#loginPage .emby-input {
|
|
height: 3.25rem;
|
|
padding: 0 1rem;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
#loginPage .checkboxContainer {
|
|
margin: 0.25rem 0 1.5rem;
|
|
}
|
|
|
|
#loginPage .emby-button.block {
|
|
height: 2.75rem;
|
|
margin: 0 0 0.75rem;
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
#loginPage .readOnlyContent > :is(.btnForgotPassword, .btnSelectServer) {
|
|
height: auto;
|
|
margin: 1rem auto 0;
|
|
padding: 0;
|
|
background: none;
|
|
color: var(--nf-text);
|
|
font-weight: 500;
|
|
}
|
|
|
|
#loginPage .readOnlyContent > :is(.btnForgotPassword, .btnSelectServer):hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
#loginPage .loginDisclaimerContainer {
|
|
margin-top: 1.5rem;
|
|
color: var(--nf-text-mute);
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
#loginPage .loginDisclaimerContainer:has(.loginDisclaimer:empty) {
|
|
display: none;
|
|
}
|
|
|
|
@media (max-width: 40em) {
|
|
#loginPage {
|
|
background: #000;
|
|
}
|
|
|
|
#loginPage > div {
|
|
width: 100%;
|
|
padding: calc(var(--nf-appbar) + 1rem) 1.5rem 2rem !important;
|
|
background: none;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════════════════════════
|
|
* 8. Media Bar
|
|
* ═══════════════════════════════════════════════════════════════════════ */
|
|
|
|
:root {
|
|
--slideshow-font: var(--nf-font);
|
|
--slideshow-bottom-fade: linear-gradient(to top, #fff0 5%, rgb(0 0 0 / 0.1) 35%, #000000 80%);
|
|
--slideshow-gutter: 3.3%;
|
|
}
|
|
|
|
body #slides-container .gradient-overlay {
|
|
background:
|
|
linear-gradient(77deg, rgb(0 0 0 / 0.65) 0%, rgb(0 0 0 / 0.25) 45%, transparent 75%),
|
|
linear-gradient(0deg, var(--nf-bg) 0%, transparent 35%);
|
|
}
|
|
|
|
body #slides-container .spec-line {
|
|
font-family: var(--nf-font);
|
|
letter-spacing: 0.02em;
|
|
text-transform: none;
|
|
font-weight: 500;
|
|
color: var(--nf-text-2);
|
|
}
|
|
|
|
body #slides-container .spec-rail {
|
|
background: rgb(255 255 255 / 0.18);
|
|
}
|
|
|
|
body #slides-container .spec-progress {
|
|
background: var(--nf-red);
|
|
}
|
|
|
|
body #slides-container .slide-content {
|
|
text-shadow: 0 1px 10px rgb(0 0 0 / 0.65);
|
|
}
|
|
|
|
body #slides-container .misc-info {
|
|
gap: 0.25em 0.75em;
|
|
color: var(--nf-text-2);
|
|
font-size: 1.05rem;
|
|
font-weight: 500;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
body #slides-container .misc-info > .separator-icon {
|
|
display: none;
|
|
}
|
|
|
|
body #slides-container .misc-info > .age-rating {
|
|
padding: 0.05em 0.45em;
|
|
border: 1px solid var(--nf-outline);
|
|
border-radius: var(--nf-radius-xs);
|
|
background: none;
|
|
color: var(--nf-text-2);
|
|
font-size: 0.85em;
|
|
font-weight: 600;
|
|
line-height: 1.5;
|
|
text-shadow: none;
|
|
}
|
|
|
|
body #slides-container .genre {
|
|
gap: 0.5em;
|
|
color: var(--nf-text-dim);
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
body #slides-container .genre > .separator-icon {
|
|
font-size: 4px;
|
|
color: var(--nf-text-mute);
|
|
}
|
|
|
|
body #slides-container .plot {
|
|
max-width: 38em;
|
|
color: var(--nf-text-2);
|
|
font-size: 1.1rem; /* as .detailSectionContent .overview */
|
|
line-height: 1.6;
|
|
}
|
|
|
|
body #slides-container .button-container {
|
|
gap: 0.65rem;
|
|
}
|
|
|
|
body #slides-container :is(.detail-button, .favorite-button, .watchlist-button) {
|
|
text-shadow: none;
|
|
}
|
|
|
|
body #slides-container button {
|
|
background: var(--nf-text-2);
|
|
border: 1px solid var(--nf-text-2);
|
|
color: var(--nf-bg);
|
|
font-family: var(--nf-font);
|
|
font-weight: 700;
|
|
}
|
|
|
|
body #slides-container .play-button {
|
|
order: -1;
|
|
border-color: #fff;
|
|
border-radius: var(--nf-radius);
|
|
background: #fff;
|
|
color: #000;
|
|
text-shadow: none;
|
|
padding-inline: 1em 1.35em !important;
|
|
}
|
|
|
|
body #slides-container button:hover {
|
|
background: var(--nf-fill-white-hover);
|
|
}
|
|
|
|
body #slides-container .favorite-button.favorited {
|
|
color: var(--nf-red) !important;
|
|
border-color: var(--nf-red) !important;
|
|
}
|
|
|
|
body #slides-container .watchlist-button[data-active="true"] {
|
|
color: var(--nf-success) !important;
|
|
border-color: var(--nf-success) !important;
|
|
}
|
|
|
|
body #slides-container .dots-container {
|
|
display: none !important;
|
|
}
|
|
|
|
body #slides-container :is(.arrow, .ss-chrome) {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 2.25rem;
|
|
height: 2.25rem;
|
|
border-radius: 50%;
|
|
text-shadow: none;
|
|
}
|
|
|
|
body #slides-container .arrow {
|
|
box-sizing: border-box;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
-webkit-backdrop-filter: blur(8px);
|
|
backdrop-filter: blur(8px);
|
|
transition: opacity var(--nf-dur-2) var(--nf-ease-out), visibility var(--nf-dur-2) var(--nf-ease-out), background-color var(--nf-dur-1) var(--nf-ease-out), border-color var(--nf-dur-1) var(--nf-ease-out);
|
|
}
|
|
|
|
body #slides-container :is(.arrow, .ss-chrome) i {
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
body #slides-container .ss-chrome {
|
|
color: var(--nf-text);
|
|
filter: drop-shadow(0 1px 3px rgb(0 0 0 / 0.6));
|
|
transition: opacity var(--nf-dur-2) var(--nf-ease-out), visibility var(--nf-dur-2) var(--nf-ease-out);
|
|
}
|
|
|
|
body #slides-container:is(:hover, :focus-within, .is-paused, .settings-open) .ss-chrome {
|
|
opacity: 0.55;
|
|
}
|
|
|
|
body #slides-container .ss-chrome:is(:hover, :focus-visible) {
|
|
opacity: 1;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
body #slides-container:not([class*="layout-"]) :is(.arrow, .ss-chrome) {
|
|
top: auto;
|
|
left: auto;
|
|
bottom: calc(var(--slideshow-height) - var(--slideshow-content-top) + var(--slideshow-dots-reserve) + 25px - 1.125rem); /* centred on the 50px button row */
|
|
transform: none;
|
|
}
|
|
|
|
body #slides-container:not([class*="layout-"]) .arrow {
|
|
bottom: calc(var(--slideshow-height) - var(--slideshow-content-top) + var(--slideshow-dots-reserve) + 25px - 1rem);
|
|
}
|
|
|
|
body #slides-container:not([class*="layout-"]) .right-arrow {
|
|
right: var(--slideshow-gutter);
|
|
}
|
|
|
|
body #slides-container:not([class*="layout-"]) .left-arrow {
|
|
right: calc(var(--slideshow-gutter) + 3rem);
|
|
}
|
|
|
|
body #slides-container:not([class*="layout-"]) .pause-button {
|
|
right: calc(var(--slideshow-gutter) + 6.25rem);
|
|
}
|
|
|
|
body #slides-container:not([class*="layout-"]) .volume-toggle {
|
|
right: calc(var(--slideshow-gutter) + 8.75rem);
|
|
}
|
|
|
|
body #slides-container:not([class*="layout-"]) .ss-settings-toggle {
|
|
right: calc(var(--slideshow-gutter) + 11.25rem);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 767px) and (orientation: portrait) {
|
|
body #slides-container:not([class*="layout-"]) .ss-chrome {
|
|
right: var(--slideshow-gutter);
|
|
height: 1.75rem;
|
|
}
|
|
|
|
body #slides-container:not([class*="layout-"]) .ss-settings-toggle {
|
|
top: calc(var(--nf-m-top, var(--nf-appbar)) + 0.5rem);
|
|
}
|
|
|
|
body #slides-container:not([class*="layout-"]) .pause-button {
|
|
top: calc(var(--nf-m-top, var(--nf-appbar)) + 2.25rem);
|
|
}
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════════════════════════
|
|
* 9. KefinTweaks
|
|
* ═══════════════════════════════════════════════════════════════════════ */
|
|
|
|
.progress-bar-fill,
|
|
.progress-chunk.watched,
|
|
.pagination-btn.active,
|
|
.mdl-radio__focus-circle {
|
|
background: var(--nf-red);
|
|
border-color: var(--nf-red);
|
|
}
|
|
|
|
.view-episode-btn:hover {
|
|
color: var(--nf-red);
|
|
}
|
|
|
|
.import-export-tab.active {
|
|
border-bottom-color: var(--nf-red);
|
|
}
|
|
|
|
.watchlist-button[data-active="true"],
|
|
.watchlist-icon[data-active="true"] {
|
|
color: var(--nf-success) !important;
|
|
}
|
|
|
|
header .kefin-custom-menu-top-divider {
|
|
display: none;
|
|
}
|
|
|
|
/* ── Watchlist page ──────────────────────────────────────────────────────── */
|
|
|
|
body .sections.watchlist .watchlist-tabs {
|
|
justify-content: flex-start;
|
|
gap: 1.75rem;
|
|
padding: 0 var(--nf-gutter);
|
|
border-bottom: 1px solid var(--nf-line);
|
|
}
|
|
|
|
body .sections.watchlist .watchlist-tabs button {
|
|
padding: 0.75rem 0;
|
|
border: 0;
|
|
border-radius: 0;
|
|
background: none;
|
|
color: var(--nf-text-dim);
|
|
font: 500 1rem/1.2 var(--nf-font);
|
|
transition: color var(--nf-dur-1) var(--nf-ease-out);
|
|
}
|
|
|
|
body .sections.watchlist .watchlist-tabs button:hover {
|
|
background: none;
|
|
color: var(--nf-text);
|
|
}
|
|
|
|
body .sections.watchlist .watchlist-tabs button.active {
|
|
background: none;
|
|
box-shadow: inset 0 -2px 0 #fff;
|
|
color: var(--nf-text);
|
|
font-weight: 700;
|
|
}
|
|
|
|
body .sections.watchlist .tab-header h2 {
|
|
line-height: 1.15;
|
|
}
|
|
|
|
body .sections.watchlist .tab-header {
|
|
max-width: none;
|
|
margin: 0;
|
|
padding: 1.75rem var(--nf-gutter) 1.25rem;
|
|
border-bottom: 0;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
|
|
body .sections.watchlist :is(.watchlist-header-stats, .progress-header-stats, .movie-history-stats) {
|
|
padding: 0.3rem 0.6rem;
|
|
border: 0;
|
|
border-radius: var(--nf-radius-xs);
|
|
background: var(--nf-fill-tag);
|
|
color: var(--nf-text-2);
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
body .sections.watchlist :is(.progress-header-stats-container, .movie-history-stats-container) {
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
body .sections.watchlist :is(.progress-header-stats-container, .movie-history-stats-container) > * {
|
|
margin: 0;
|
|
}
|
|
|
|
body .sections.watchlist :is(.progress-header-stats, .movie-history-stats) {
|
|
display: flex;
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
height: 2rem;
|
|
}
|
|
|
|
body .sections.watchlist .sort-button,
|
|
body .sections.watchlist .show-all-btn {
|
|
height: 2rem;
|
|
padding: 0 0.85rem;
|
|
border: 0;
|
|
border-radius: var(--nf-radius);
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
transition: background-color var(--nf-dur-1) var(--nf-ease-out), box-shadow var(--nf-dur-1) var(--nf-ease-out);
|
|
}
|
|
|
|
body .sections.watchlist .search-container {
|
|
margin: 0 var(--nf-gutter) 1.5rem !important;
|
|
padding: 0;
|
|
justify-self: start;
|
|
}
|
|
|
|
body .sections.watchlist .search-input-wrapper {
|
|
max-width: 21rem;
|
|
margin: 0;
|
|
}
|
|
|
|
body .sections.watchlist .search-input-wrapper .search-icon {
|
|
left: 0.6rem;
|
|
transform: translateY(-50%);
|
|
color: var(--nf-text-dim);
|
|
}
|
|
|
|
body .sections.watchlist .search-input {
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
height: 2.25rem;
|
|
padding: 0 2.25rem;
|
|
border: 1px solid rgb(255 255 255 / 0.5);
|
|
border-radius: var(--nf-radius);
|
|
background: rgb(0 0 0 / 0.6);
|
|
color: var(--nf-text);
|
|
font-size: 0.875rem;
|
|
transition: border-color var(--nf-dur-1) var(--nf-ease-out);
|
|
}
|
|
|
|
body .sections.watchlist .search-input:focus {
|
|
border-color: #fff;
|
|
background: rgb(0 0 0 / 0.75);
|
|
box-shadow: none;
|
|
}
|
|
|
|
body .sections.watchlist .paginated-container {
|
|
max-width: none;
|
|
margin: 0;
|
|
padding: 0 var(--nf-gutter);
|
|
}
|
|
|
|
/* ── Watchlist: Series Progress ──────────────────────────────────────────── */
|
|
body .sections.watchlist .progress-series {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(min(36rem, 100%), 1fr));
|
|
gap: 1rem;
|
|
padding: 0;
|
|
}
|
|
|
|
body .sections.watchlist .progress-card {
|
|
margin: 0;
|
|
transition: background-color var(--nf-dur-1) var(--nf-ease-out);
|
|
}
|
|
|
|
body .sections.watchlist .progress-card:hover,
|
|
body .sections.watchlist .progress-card-completed:hover {
|
|
background: var(--nf-fill-hover);
|
|
}
|
|
|
|
body .sections.watchlist .progress-card-content {
|
|
gap: 1.25rem;
|
|
padding: 1rem;
|
|
}
|
|
|
|
body .sections.watchlist .progress-poster {
|
|
width: 7.5rem;
|
|
height: 11.25rem;
|
|
border-radius: var(--nf-radius);
|
|
}
|
|
|
|
body .sections.watchlist .progress-title {
|
|
font: 700 1.25rem/1.25 var(--nf-font);
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
body .sections.watchlist .progress-title .title-link:hover {
|
|
color: var(--nf-text);
|
|
}
|
|
|
|
body .sections.watchlist .completion-badge {
|
|
padding: 0.3em 0.55em;
|
|
border-radius: var(--nf-radius-xs);
|
|
background: var(--nf-fill-tag);
|
|
color: var(--nf-text-2);
|
|
font-size: 0.6875rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
body .sections.watchlist .progress-percentage {
|
|
color: var(--nf-text);
|
|
font: 700 1.25rem/1 var(--nf-font);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
body .sections.watchlist .progress-series .progress-bar {
|
|
height: 6px;
|
|
padding: 0;
|
|
border-radius: 3px;
|
|
background: rgb(128 128 128 / 0.35);
|
|
}
|
|
|
|
body .sections.watchlist .progress-bar-completed .progress-chunk.watched,
|
|
body .sections.watchlist .progress-bar-completed .progress-bar-fill {
|
|
background: var(--nf-red);
|
|
}
|
|
|
|
body .sections.watchlist .progress-stats {
|
|
color: var(--nf-text-dim);
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
body .sections.watchlist .progress-stats strong {
|
|
color: var(--nf-text);
|
|
}
|
|
|
|
body .sections.watchlist .progress-last-watched {
|
|
color: var(--nf-text-mute);
|
|
font-size: 0.8125rem;
|
|
}
|
|
|
|
body .sections.watchlist .progress-last-watched strong {
|
|
color: var(--nf-text-2);
|
|
}
|
|
|
|
body .sections.watchlist .action-link {
|
|
color: var(--nf-text-dim);
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
transition: color var(--nf-dur-1) var(--nf-ease-out);
|
|
}
|
|
|
|
body .sections.watchlist .action-link:hover {
|
|
color: var(--nf-text);
|
|
}
|
|
|
|
/* ── Watchlist: Movie History ────────────────────────────────────────────── */
|
|
body .sections.watchlist .movie-history-grid {
|
|
grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
|
|
gap: 1.75rem 0.75rem;
|
|
}
|
|
|
|
body .sections.watchlist .movie-card {
|
|
overflow: visible;
|
|
border: 0;
|
|
border-radius: 0;
|
|
background: none;
|
|
-webkit-backdrop-filter: none;
|
|
backdrop-filter: none;
|
|
transition: transform var(--nf-dur-3) var(--nf-ease);
|
|
}
|
|
|
|
body .sections.watchlist .movie-card:hover {
|
|
z-index: 2;
|
|
border: 0;
|
|
background: none;
|
|
box-shadow: none;
|
|
transform: scale(1.04);
|
|
}
|
|
|
|
body .sections.watchlist .movie-poster {
|
|
border-radius: var(--nf-radius);
|
|
transition: box-shadow var(--nf-dur-3) var(--nf-ease);
|
|
}
|
|
|
|
body .sections.watchlist .movie-card:hover .movie-poster {
|
|
box-shadow: 0 0 0 1px var(--nf-line), var(--nf-shadow-1);
|
|
transform: none;
|
|
}
|
|
|
|
body .sections.watchlist .movie-poster-overlay {
|
|
justify-content: flex-end;
|
|
padding: 0.6rem 0.3rem;
|
|
background: transparent;
|
|
}
|
|
|
|
body .sections.watchlist .movie-card:is(:hover, :focus-within) .movie-poster-overlay {
|
|
background: var(--nf-scrim-card);
|
|
}
|
|
|
|
body .sections.watchlist .movie-watched-badge {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
gap: 0;
|
|
background: var(--nf-red);
|
|
color: #fff;
|
|
font-size: 0;
|
|
}
|
|
|
|
body .sections.watchlist .movie-watched-badge > .material-icons::before {
|
|
content: "\e5ca"; /* check, not check_circle */
|
|
}
|
|
|
|
body .sections.watchlist .movie-poster-overlay .cardOverlayButton {
|
|
position: static;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
border: 0;
|
|
background: transparent;
|
|
-webkit-backdrop-filter: none;
|
|
backdrop-filter: none;
|
|
color: var(--nf-text);
|
|
transition: opacity var(--nf-dur-2) var(--nf-ease-out), background-color var(--nf-dur-1) var(--nf-ease-out);
|
|
}
|
|
|
|
body .sections.watchlist .movie-poster-overlay .cardOverlayButton:hover {
|
|
border: 0;
|
|
background: var(--nf-fill-hover);
|
|
color: var(--nf-text);
|
|
transform: none;
|
|
}
|
|
|
|
body .sections.watchlist .movie-poster-overlay .cardOverlayButton.favorited {
|
|
border: 0;
|
|
background: transparent;
|
|
color: var(--nf-red);
|
|
filter: drop-shadow(0 1px 3px rgb(0 0 0 / 0.6));
|
|
}
|
|
|
|
.layout-desktop body .sections.watchlist .movie-card:not(:hover, :focus-within) .cardOverlayButton:not(.favorited) {
|
|
opacity: 0;
|
|
}
|
|
|
|
body .sections.watchlist .movie-poster-overlay .cardOverlayButton .material-icons {
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
body .sections.watchlist .movie-details {
|
|
padding: 0.5rem 0.1em 0;
|
|
}
|
|
|
|
body .sections.watchlist .movie-title {
|
|
margin: 0;
|
|
color: var(--nf-text-2);
|
|
font: 500 0.875rem/1.35 var(--nf-font);
|
|
-webkit-line-clamp: 1;
|
|
}
|
|
|
|
body .sections.watchlist .movie-meta {
|
|
gap: 0.6em;
|
|
margin: 0.1rem 0 0;
|
|
color: var(--nf-text-mute);
|
|
font-size: 0.8125rem;
|
|
}
|
|
|
|
body .sections.watchlist .movie-meta .material-icons {
|
|
display: none;
|
|
}
|
|
|
|
body .sections.watchlist .movie-meta > * {
|
|
color: inherit;
|
|
font-size: inherit;
|
|
font-weight: 400;
|
|
}
|
|
|
|
body .sections.watchlist .movie-watched-date {
|
|
margin-top: 0.1rem;
|
|
color: var(--nf-text-mute);
|
|
font-size: 0.75rem;
|
|
font-style: normal;
|
|
}
|
|
|
|
/* ── Watchlist: Statistics ───────────────────────────────────────────────── */
|
|
body .sections.watchlist .progress-stats-container {
|
|
max-width: none;
|
|
margin: 1.5rem 0 !important;
|
|
padding: 0 var(--nf-gutter);
|
|
}
|
|
|
|
body .sections.watchlist .progress-stats-grid {
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
body .sections.watchlist :is(.stat-card, .top-shows-container, .stats-chart-card, .stats-list-card) {
|
|
-webkit-backdrop-filter: none;
|
|
backdrop-filter: none;
|
|
}
|
|
|
|
body .sections.watchlist .stat-card {
|
|
gap: 1rem;
|
|
padding: 1.25rem;
|
|
transition: background-color var(--nf-dur-1) var(--nf-ease-out);
|
|
}
|
|
|
|
body .sections.watchlist .stat-card:hover {
|
|
border-color: var(--nf-line);
|
|
background: var(--nf-fill-hover);
|
|
transform: none;
|
|
}
|
|
|
|
body .sections.watchlist .stat-icon {
|
|
width: 2.75rem;
|
|
height: 2.75rem;
|
|
background: var(--nf-fill-tag);
|
|
}
|
|
|
|
body .sections.watchlist .stat-icon .material-icons {
|
|
color: var(--nf-text-2);
|
|
font-size: 1.35rem;
|
|
}
|
|
|
|
body .sections.watchlist .stat-value {
|
|
margin-bottom: 0.3rem;
|
|
font: 800 2rem/1 var(--nf-font);
|
|
letter-spacing: -0.02em;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
body .sections.watchlist .stat-label {
|
|
color: var(--nf-text-mute);
|
|
font-size: 0.6875rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.08em;
|
|
}
|
|
|
|
body .sections.watchlist .top-shows-container {
|
|
padding: 1.25rem 1.5rem;
|
|
}
|
|
|
|
body .sections.watchlist :is(.top-shows-header, .stats-list-header) {
|
|
color: var(--nf-text);
|
|
font-size: 1.125rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
body .sections.watchlist :is(.top-shows-header, .stats-list-header) .material-icons {
|
|
color: var(--nf-text-dim);
|
|
}
|
|
|
|
body .sections.watchlist .top-shows-list {
|
|
gap: 0;
|
|
}
|
|
|
|
body .sections.watchlist .top-show-item,
|
|
body .sections.watchlist .top-show-item:is(.rank-1, .rank-2, .rank-3) {
|
|
padding: 0.75rem 0.5rem;
|
|
border: 0;
|
|
border-bottom: 1px solid var(--nf-line);
|
|
border-radius: 0;
|
|
background: none;
|
|
}
|
|
|
|
body .sections.watchlist .top-show-item:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
body .sections.watchlist .top-show-item:hover {
|
|
border-color: var(--nf-line);
|
|
background: var(--nf-fill-hover);
|
|
}
|
|
|
|
body .sections.watchlist .show-rank,
|
|
body .sections.watchlist .top-show-item:is(.rank-1, .rank-2, .rank-3) .show-rank {
|
|
min-width: 2.75rem;
|
|
margin-right: 0.75rem;
|
|
color: var(--nf-text-mute);
|
|
font: 800 1.75rem/1 var(--nf-font);
|
|
letter-spacing: -0.04em;
|
|
text-align: left;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
body .sections.watchlist .top-show-item:is(.rank-1, .rank-2, .rank-3) .show-rank {
|
|
color: var(--nf-text);
|
|
}
|
|
|
|
body .sections.watchlist .top-show-name {
|
|
color: var(--nf-text);
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
body .sections.watchlist .top-show-episodes {
|
|
padding: 0;
|
|
background: none;
|
|
color: var(--nf-text-mute);
|
|
font-size: 0.8125rem;
|
|
}
|
|
|
|
body .sections.watchlist .stats-chart-title {
|
|
color: var(--nf-text);
|
|
font-size: 1rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
body .sections.watchlist .stats-chart-subtitle {
|
|
color: var(--nf-text-mute);
|
|
font-size: 0.8125rem;
|
|
}
|
|
|
|
body .sections.watchlist .stats-range-chip {
|
|
height: auto;
|
|
padding: 0.3rem 0.7rem;
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
body .sections.watchlist .stats-chart-canvas-wrap canvas {
|
|
filter: hue-rotate(148deg) saturate(2.6) brightness(0.88);
|
|
}
|
|
|
|
body .sections.watchlist .stats-list-item {
|
|
border-color: var(--nf-line);
|
|
}
|
|
|
|
body .sections.watchlist .stats-list-item-title {
|
|
color: var(--nf-text);
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
body .sections.watchlist .stats-list-item-meta {
|
|
color: var(--nf-text-mute);
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
body .sections.watchlist .stats-media-icon {
|
|
color: var(--nf-text-dim);
|
|
}
|
|
|
|
/* ── Watchlist: narrow screens ───────────────────────────────────────────── */
|
|
body .sections.watchlist .watchlist-tabs {
|
|
overflow-x: auto;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
body .sections.watchlist .watchlist-tabs button {
|
|
flex: none;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
@media (max-width: 48em) {
|
|
body .sections.watchlist .watchlist-tabs {
|
|
gap: 1.25rem;
|
|
}
|
|
|
|
body .sections.watchlist .tab-header {
|
|
flex-wrap: wrap;
|
|
justify-content: flex-start;
|
|
gap: 1rem 0.5rem;
|
|
padding-top: 1.25rem;
|
|
}
|
|
|
|
body .sections.watchlist .tab-header > :not(h2) {
|
|
display: contents;
|
|
}
|
|
|
|
body .sections.watchlist .tab-header > h2 {
|
|
flex: 1 0 calc(100% - 3.5rem); /* leaves the refresh button beside it */
|
|
order: -2;
|
|
margin: 0;
|
|
}
|
|
|
|
body .sections.watchlist .tab-header > :not(h2) > :last-child {
|
|
order: -1;
|
|
margin: 0;
|
|
}
|
|
|
|
body .sections.watchlist :is(.watchlist-header-stats, .progress-header-stats, .movie-history-stats) {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
body .sections.watchlist .progress-poster {
|
|
width: 100%;
|
|
max-width: none;
|
|
height: auto;
|
|
aspect-ratio: 300 / 55; /* the plugin switches to banners */
|
|
overflow: hidden;
|
|
}
|
|
|
|
body .sections.watchlist .progress-poster img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
body .sections.watchlist .progress-stats-grid {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
|
|
body .sections.watchlist .stat-card {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 0.75rem;
|
|
padding: 1rem;
|
|
}
|
|
|
|
body .sections.watchlist .stat-card:last-child:nth-child(odd) {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
body .sections.watchlist .stats-list-card {
|
|
min-height: 0;
|
|
}
|
|
|
|
body .sections.watchlist .top-show-item {
|
|
display: grid;
|
|
grid-template-columns: auto minmax(0, 1fr);
|
|
}
|
|
|
|
body .sections.watchlist .top-show-item > .show-rank {
|
|
grid-row: span 2;
|
|
}
|
|
|
|
body .sections.watchlist .top-show-item > :is(.top-show-name, .top-show-episodes) {
|
|
justify-self: start;
|
|
max-width: 100%;
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
/* ── Menus ───────────────────────────────────────────────────────────────── */
|
|
.kefinTweaks-popover {
|
|
min-width: 12rem;
|
|
max-width: none;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
html body .kefinTweaks-popover.kefinTweaks-popover.kefinTweaks-popover.kefinTweaks-popover { /* beats KefinTweaks' 4-class !important */
|
|
padding: 0.375rem 0 !important;
|
|
}
|
|
|
|
html body .kefinTweaks-breadcrumbs-wrapper--modern .kefinTweaks-popover.kefinTweaks-popover:not(.kefinTweaks-popover--above) {
|
|
margin-top: 1.25rem !important;
|
|
}
|
|
|
|
.kefinTweaks-popover .kefinTweaks-popover-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
width: auto !important;
|
|
margin: 0 !important;
|
|
padding: 0.55rem 1rem !important;
|
|
border: 0;
|
|
border-radius: 0 !important;
|
|
background: none !important;
|
|
color: var(--nf-text-2);
|
|
font-size: inherit;
|
|
font-weight: 400;
|
|
line-height: 1.3;
|
|
transition: background-color var(--nf-dur-1) var(--nf-ease-out), color var(--nf-dur-1) var(--nf-ease-out);
|
|
}
|
|
|
|
.kefinTweaks-popover .kefinTweaks-popover-item:hover {
|
|
background: var(--nf-fill-hover) !important;
|
|
color: var(--nf-text);
|
|
}
|
|
|
|
.kefinTweaks-popover .section-controls-more-item-icon {
|
|
color: var(--nf-text-mute);
|
|
font-size: 1.25rem;
|
|
opacity: 1;
|
|
}
|
|
|
|
.kefinTweaks-popover .kefinTweaks-popover-item.selected {
|
|
color: var(--nf-text);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.kefinTweaks-popover .kefinTweaks-popover-item.selected::before {
|
|
content: none;
|
|
}
|
|
|
|
.kefinTweaks-popover .kefinTweaks-popover-item.selected::after {
|
|
content: "check";
|
|
margin-left: auto;
|
|
font: 400 1.25rem/1 "Material Icons";
|
|
}
|
|
|
|
/* ── Collection sort ─────────────────────────────────────────────────────── */
|
|
#itemDetailPage .collectionItems .sectionTitle:has(> .kt-collections-sort-btn) {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.35rem;
|
|
}
|
|
|
|
#itemDetailPage .collectionItems .kt-collections-sort-btn {
|
|
width: 2rem;
|
|
height: 2rem;
|
|
margin: 0;
|
|
padding: 0;
|
|
color: var(--nf-text-dim);
|
|
}
|
|
|
|
#itemDetailPage .collectionItems .kt-collections-sort-btn .material-icons {
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.formDialog:has(.menuSortBy):not(:has(.formDialogHeaderTitle)) {
|
|
min-width: 17rem;
|
|
}
|
|
|
|
.formDialog:has(.menuSortBy):not(:has(.formDialogHeaderTitle)) .formDialogHeader {
|
|
position: absolute;
|
|
top: 0.6rem;
|
|
right: 0.6rem;
|
|
z-index: 1;
|
|
padding: 0 !important; /* KefinTweaks sets padding and border inline */
|
|
border: 0 !important;
|
|
background: none;
|
|
}
|
|
|
|
.formDialog:has(.menuSortBy):not(:has(.formDialogHeaderTitle)) .formDialogHeader + div {
|
|
padding: 1.4rem 1.5rem 1.25rem;
|
|
}
|
|
|
|
.formDialog:has(.menuSortBy):not(:has(.formDialogHeaderTitle)) .formDialogHeader + div > h2 {
|
|
margin: 1.25rem 0 0.5rem;
|
|
}
|
|
|
|
.formDialog:has(.menuSortBy):not(:has(.formDialogHeaderTitle)) .formDialogHeader + div > h2:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.formDialog:has(.menuSortBy):not(:has(.formDialogHeaderTitle)) .radio-label-block {
|
|
margin: 0;
|
|
padding: 0.3rem 0;
|
|
color: var(--nf-text-2);
|
|
}
|
|
|
|
/* ── Enhanced search ─────────────────────────────────────────────────────── */
|
|
body.smart-search-mode #searchPage .searchFields {
|
|
padding-top: 0;
|
|
}
|
|
|
|
#searchPage .input-wrapper .searchfields-icon {
|
|
right: auto;
|
|
}
|
|
|
|
#searchPage .smart-search-buttons {
|
|
justify-content: flex-start;
|
|
gap: 0.5rem;
|
|
margin-top: 0.75rem;
|
|
}
|
|
|
|
#searchPage #smart-search-results {
|
|
margin-top: 0;
|
|
padding-left: 0;
|
|
padding-top: 1.75rem;
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════════════════════════
|
|
* 10. Leftover Jellyfin blue, player
|
|
* ═══════════════════════════════════════════════════════════════════════ */
|
|
|
|
.listItemIcon:not(.listItemIcon-transparent) {
|
|
background-color: var(--nf-surface-3);
|
|
color: var(--nf-text);
|
|
}
|
|
|
|
.mdl-spinner__layer-1,
|
|
.mdl-spinner__layer-2,
|
|
.mdl-spinner__layer-3,
|
|
.mdl-spinner__layer-4 {
|
|
border-color: var(--nf-red);
|
|
}
|
|
|
|
.playbackProgress > div,
|
|
.sliderMarker.watched,
|
|
.mdl-slider-background-lower {
|
|
background-color: var(--nf-red);
|
|
}
|
|
|
|
progress::-webkit-progress-value {
|
|
background-color: var(--nf-red);
|
|
}
|
|
|
|
progress::-moz-progress-bar {
|
|
background-color: var(--nf-red);
|
|
}
|
|
|
|
progress[aria-valuenow]::before {
|
|
background-color: var(--nf-red);
|
|
}
|
|
|
|
.button-accent-flat {
|
|
color: var(--nf-red) !important;
|
|
}
|
|
|
|
/* ── Player ──────────────────────────────────────────────────────────────── */
|
|
.mdl-slider {
|
|
color: var(--nf-red);
|
|
}
|
|
|
|
.mdl-slider::-webkit-slider-thumb {
|
|
background: var(--nf-red);
|
|
}
|
|
|
|
.mdl-slider::-moz-range-thumb {
|
|
background: var(--nf-red);
|
|
}
|
|
|
|
body:has(#videoOsdPage:not(.hide), .videoPlayerContainer-onTop)::before {
|
|
display: none;
|
|
}
|
|
|
|
.skinHeader-withBackground.osdHeader {
|
|
background: linear-gradient(180deg, rgb(0 0 0 / 0.7), transparent);
|
|
}
|
|
|
|
.layout-mobile body:has(#videoOsdPage:not(.hide)) .MuiAppBar-root.MuiAppBar-positionFixed + div[aria-hidden="true"] {
|
|
min-height: 0;
|
|
}
|
|
|
|
.osdHeader .videoOsd-appBar {
|
|
flex-wrap: nowrap;
|
|
padding: calc(0.75rem + env(safe-area-inset-top)) 1.25rem 0;
|
|
}
|
|
|
|
.osdHeader .videoOsd-appBar > .MuiBox-root {
|
|
flex: none;
|
|
}
|
|
|
|
.osdHeader .videoOsd-appBar .MuiIconButton-root:first-child .MuiSvgIcon-root {
|
|
font-size: 2.25rem;
|
|
}
|
|
|
|
.osdHeader .videoOsd-appBar > .MuiTypography-root {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
margin-left: 0.5rem;
|
|
color: var(--nf-text-2);
|
|
font: 500 1.125rem/1.3 var(--nf-font);
|
|
}
|
|
|
|
.videoOsdBottom {
|
|
padding-top: 10rem;
|
|
padding-bottom: max(env(safe-area-inset-bottom), 1.25rem);
|
|
background: linear-gradient(0deg, rgb(0 0 0 / 0.85), rgb(0 0 0 / 0.45) 45%, transparent);
|
|
}
|
|
|
|
.videoOsdBottom .osdControls {
|
|
padding: 0 2rem;
|
|
}
|
|
|
|
.videoOsdBottom .osdTextContainer {
|
|
color: var(--nf-text-2);
|
|
font-size: 0.875rem;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.videoOsdBottom :is(.osdPositionText, .osdDurationText) {
|
|
min-width: 8ch; /* fixed, so the bar doesn't move as they tick */
|
|
color: var(--nf-text);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.videoOsdBottom .osdPositionText, .videoOsdBottom .osdDurationText {
|
|
justify-content: center;
|
|
padding: 0;
|
|
}
|
|
|
|
.videoOsdBottom .osdTitle {
|
|
color: var(--nf-text);
|
|
font: 700 1.25rem/1.3 var(--nf-font);
|
|
}
|
|
|
|
.videoOsdBottom .mdl-slider-background-flex {
|
|
height: 4px;
|
|
margin-top: -2px;
|
|
border-radius: 2px;
|
|
background: rgb(255 255 255 / 0.25);
|
|
transition: height var(--nf-dur-1) var(--nf-ease-out), margin var(--nf-dur-1) var(--nf-ease-out);
|
|
}
|
|
|
|
.videoOsdBottom .mdl-slider-background-upper {
|
|
background: rgb(255 255 255 / 0.3);
|
|
}
|
|
|
|
.videoOsdBottom .sliderContainer:hover .mdl-slider-background-flex {
|
|
height: 6px;
|
|
margin-top: -3px;
|
|
}
|
|
|
|
.videoOsdBottom .sliderMarker,
|
|
.videoOsdBottom .sliderMarker.watched {
|
|
z-index: 1;
|
|
height: 4px;
|
|
background: rgb(0 0 0 / 0.6);
|
|
pointer-events: none;
|
|
transform: translateY(calc(0.625em - 2px)); /* centred on the track */
|
|
transition: height var(--nf-dur-1) var(--nf-ease-out), transform var(--nf-dur-1) var(--nf-ease-out);
|
|
}
|
|
|
|
.videoOsdBottom .sliderContainer:hover .sliderMarker {
|
|
height: 6px;
|
|
transform: translateY(calc(0.625em - 3px));
|
|
}
|
|
|
|
.videoOsdBottom .sliderBubble {
|
|
overflow: hidden;
|
|
border-radius: var(--nf-radius);
|
|
background: var(--nf-surface-2);
|
|
box-shadow: var(--nf-shadow-1);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.videoOsdBottom .sliderBubble:has(.chapterThumbContainer) {
|
|
overflow: visible;
|
|
border-radius: 0;
|
|
background: none;
|
|
box-shadow: none;
|
|
transform: translate3d(-50%, calc(-100% - 0.25rem), 0);
|
|
transition: left 0.35s cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|
|
|
|
.videoOsdBottom .chapterThumbContainer {
|
|
overflow: visible !important; /* core sets hidden inline, which clips the frame's shadow */
|
|
background: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.videoOsdBottom .chapterThumbWrapper {
|
|
border-radius: var(--nf-radius);
|
|
box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 0.6);
|
|
}
|
|
|
|
.videoOsdBottom .chapterThumbTextContainer {
|
|
position: static;
|
|
padding: 0.5rem 0 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.videoOsdBottom .chapterThumbText {
|
|
margin: 0;
|
|
padding: 0;
|
|
color: var(--nf-text);
|
|
text-shadow: 0 1px 4px rgb(0 0 0 / 0.9);
|
|
}
|
|
|
|
.videoOsdBottom .chapterThumbText:empty {
|
|
display: none;
|
|
}
|
|
|
|
.videoOsdBottom .chapterThumbText-dim {
|
|
color: var(--nf-text-2);
|
|
font: 500 0.8125rem/1.3 var(--nf-font);
|
|
opacity: 1;
|
|
}
|
|
|
|
.videoOsdBottom h2.chapterThumbText {
|
|
font: 700 1rem/1.3 var(--nf-font);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.videoOsdBottom .buttons {
|
|
padding-top: 0.5rem;
|
|
}
|
|
|
|
.videoOsdBottom .buttons .paper-icon-button-light {
|
|
margin: 0 0.15rem;
|
|
padding: 0.4rem;
|
|
color: var(--nf-text);
|
|
transition: transform var(--nf-dur-1) var(--nf-ease-out);
|
|
}
|
|
|
|
.videoOsdBottom .buttons .paper-icon-button-light:is(:hover, :active):not(:disabled) {
|
|
background: none;
|
|
color: var(--nf-text);
|
|
transform: scale(1.2);
|
|
}
|
|
|
|
.videoOsdBottom .buttons .paper-icon-button-light > .material-icons {
|
|
font-size: 1.875rem;
|
|
}
|
|
|
|
.videoOsdBottom .osdTimeText {
|
|
margin-left: 1.25rem;
|
|
color: var(--nf-text-dim);
|
|
font-size: 0.875rem;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.videoOsdBottom .osdVolumeSliderContainer {
|
|
flex-grow: 0;
|
|
width: 7rem;
|
|
}
|
|
|
|
@media (max-width: 40em) {
|
|
.osdHeader .videoOsd-appBar {
|
|
padding-inline: 0.5rem;
|
|
}
|
|
|
|
.videoOsdBottom .osdControls {
|
|
padding: 0 1rem;
|
|
}
|
|
|
|
.videoOsdBottom .osdPositionText {
|
|
padding-right: 0.5rem;
|
|
}
|
|
|
|
.videoOsdBottom .osdDurationText {
|
|
padding-left: 0.5rem;
|
|
}
|
|
|
|
.videoOsdBottom .sliderBubble:has(.chapterThumbContainer) {
|
|
left: 50% !important; /* centred over the bar, so it never leaves the screen */
|
|
transition: none;
|
|
}
|
|
|
|
.videoOsdBottom .chapterThumbWrapper {
|
|
zoom: 0.75;
|
|
}
|
|
|
|
.videoOsdBottom .buttons {
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
.videoOsdBottom .buttons .paper-icon-button-light {
|
|
margin: 0;
|
|
padding: 0.3rem;
|
|
}
|
|
|
|
.videoOsdBottom .buttons .paper-icon-button-light > .material-icons {
|
|
font-size: 1.6rem;
|
|
}
|
|
}
|
|
|
|
.videoOsdBottom .osdVolumeSliderContainer .sliderBubbleText {
|
|
padding: 0.2rem 0.45rem;
|
|
font-size: 0.75rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
body:has(#videoOsdPage:not(.hide)) .actionSheet.actionsheet-not-fullscreen {
|
|
top: auto !important; /* core centres it on the button, inline */
|
|
bottom: calc(max(env(safe-area-inset-bottom), 1.25rem) + 3.25rem) !important;
|
|
max-height: calc(100dvh - 10rem);
|
|
}
|
|
|
|
.iconOsd {
|
|
top: 4.5rem;
|
|
right: 2rem;
|
|
width: 5.5rem;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.iconOsd .iconOsdIcon {
|
|
margin: 0 auto;
|
|
font-size: 2rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.iconOsd .iconOsdProgressOuter {
|
|
height: 4px;
|
|
margin: 0.85rem 0 0;
|
|
border-radius: 2px;
|
|
background: rgb(255 255 255 / 0.25);
|
|
}
|
|
|
|
.iconOsd .iconOsdProgressInner {
|
|
border-radius: 2px;
|
|
background: var(--nf-red);
|
|
}
|
|
|
|
.upNextContainer.upNextDialog {
|
|
z-index: 2; /* over the controls' gradient */
|
|
width: auto;
|
|
max-width: min(26rem, calc(100vw - 4rem));
|
|
margin: 0 2rem calc(max(env(safe-area-inset-bottom), 1.25rem) + 6.5rem) 0; /* clear of the controls */
|
|
padding: 1.1rem 1.25rem 1.25rem;
|
|
}
|
|
|
|
@keyframes nf-upnext-in {
|
|
from { transform: translateX(calc(100% + 2rem)); }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
.upNextContainer.upNextDialog {
|
|
transition: opacity 0.3s ease-out, transform var(--nf-dur-3) var(--nf-ease);
|
|
animation: nf-upnext-in var(--nf-dur-3) var(--nf-ease-out);
|
|
}
|
|
|
|
.upNextContainer.upNextDialog-hidden {
|
|
transform: translateX(calc(100% + 2rem));
|
|
}
|
|
}
|
|
|
|
.upNextDialog .upNextDialog-nextVideoText {
|
|
margin: 0 0 0.5rem;
|
|
}
|
|
|
|
.upNextDialog .upNextDialog-countdownText {
|
|
color: var(--nf-text);
|
|
}
|
|
|
|
.upNextDialog .upNextDialog-title {
|
|
width: auto;
|
|
margin: 0;
|
|
color: var(--nf-text);
|
|
font: 700 1.125rem/1.3 var(--nf-font);
|
|
}
|
|
|
|
.upNextDialog .upNextDialog-mediainfo {
|
|
margin: 0.35rem 0 0;
|
|
color: var(--nf-text-dim);
|
|
font-size: 0.8125rem;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.upNextDialog .upNextDialog-buttons {
|
|
gap: 0.5rem;
|
|
width: auto;
|
|
margin-top: 1rem;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.upNextDialog .upNextDialog-button {
|
|
margin: 0;
|
|
padding: 0.55rem 1.1rem;
|
|
font-size: 0.875rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.playerStats {
|
|
z-index: 10; /* the OSD header covers its close button */
|
|
top: 4.5rem;
|
|
left: 2rem;
|
|
}
|
|
|
|
.playerStats .playerStats-content {
|
|
font-size: 0.8125rem;
|
|
}
|
|
|
|
.playerStats .playerStats-closeButton {
|
|
top: 0.5rem;
|
|
right: 0.5rem;
|
|
color: var(--nf-text-mute);
|
|
}
|
|
|
|
.playerStats .playerStats-stats {
|
|
padding: 1rem 3.25rem 1.1rem 1.25rem;
|
|
}
|
|
|
|
.playerStats .playerStats-stat {
|
|
display: grid;
|
|
grid-template-columns: 12rem minmax(0, 1fr);
|
|
column-gap: 1rem;
|
|
margin: 0;
|
|
padding: 0.2rem 0;
|
|
}
|
|
|
|
.playerStats .playerStats-stat-header {
|
|
margin: 1rem 0 0.2rem;
|
|
}
|
|
|
|
.playerStats .playerStats-stat-header:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.playerStats .playerStats-stat-header > .playerStats-stat-label {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
.playerStats .playerStats-stat-header > .playerStats-stat-value {
|
|
display: none;
|
|
}
|
|
|
|
.playerStats .playerStats-stat-label {
|
|
margin: 0;
|
|
color: var(--nf-text-dim);
|
|
font-weight: 400;
|
|
}
|
|
|
|
.playerStats .playerStats-stat-value {
|
|
color: var(--nf-text);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.skip-button {
|
|
gap: 0.4rem;
|
|
margin-right: 2rem;
|
|
padding: 0.7rem 1.4rem;
|
|
border-radius: var(--nf-radius);
|
|
-webkit-backdrop-filter: blur(8px);
|
|
backdrop-filter: blur(8px);
|
|
font: 600 1rem/1.2 var(--nf-font);
|
|
transition: border-color var(--nf-dur-1) var(--nf-ease-out), background-color var(--nf-dur-1) var(--nf-ease-out), opacity 0.2s ease-out;
|
|
}
|