From 8b6ee8cad5ce555c215dbbbba18bb483eff065da Mon Sep 17 00:00:00 2001 From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com> Date: Mon, 19 Jan 2026 19:45:04 -0500 Subject: [PATCH] update --- config/instance-config.js | 2 +- css/tailwind.source (1).css | 5800 ----------------------------------- css/tailwind.source.css | 25 - 3 files changed, 1 insertion(+), 5826 deletions(-) delete mode 100644 css/tailwind.source (1).css diff --git a/config/instance-config.js b/config/instance-config.js index 249347de..abc257b6 100644 --- a/config/instance-config.js +++ b/config/instance-config.js @@ -40,7 +40,7 @@ export const IS_VERBOSE_DEV_MODE = true; * Leave this `false` for normal operation so downstream modules (via * `js/config.js`) continue exposing the full experience. */ -export const IS_LOCKDOWN_MODE = true; +export const IS_LOCKDOWN_MODE = fales; /** * The title displayed in the header when the site is in lockdown mode. diff --git a/css/tailwind.source (1).css b/css/tailwind.source (1).css deleted file mode 100644 index 90bd850f..00000000 --- a/css/tailwind.source (1).css +++ /dev/null @@ -1,5800 +0,0 @@ -@import "./tokens.css"; - -@tailwind base; -@tailwind components; -@tailwind utilities; - -@layer base { - html { - font-size: 80%; - } - - @media (min-width: theme("screens.md")) { - html { - font-size: 100%; - } - } - - @media (min-width: theme("screens.lg")) { - html { - font-size: 75%; - } - } - - *, - *::before, - *::after { - scrollbar-width: thin; - scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); - } - - *::-webkit-scrollbar { - width: var(--scrollbar-width); - height: var(--scrollbar-width); - } - - *::-webkit-scrollbar-track { - background: var(--scrollbar-track); - } - - *::-webkit-scrollbar-thumb { - background: var(--scrollbar-thumb); - border-radius: var(--radius-sm); - } - - *::-webkit-scrollbar-thumb:hover { - background: var(--scrollbar-thumb-hover); - } - - body { - --app-header-centerline: calc( - env(safe-area-inset-top, 0) + var(--app-header-centerline-offset) - ); - font-family: var(--font-family-sans); - background-color: var(--color-page); - color: var(--color-text-strong); - line-height: 1.5; - margin: 0; - padding: 0; - overflow-x: hidden; - } - - :root[data-theme-accent="override"] { - --color-accent: var(--color-accent-override); - --color-accent-strong: var(--color-accent-strong-override); - --color-accent-pressed: var(--color-accent-pressed-override); - } - - #uiOverlay { - position: fixed; - inset: 0; - pointer-events: none; - z-index: var(--z-overlay-popover); - } - - #uiOverlay > * { - pointer-events: auto; - } - - #nip71TagsFieldset > legend, - #editNip71TagsFieldset > legend { - margin-left: 0; - padding: 0; - } - - #app { - background-color: var(--color-page); - color: inherit; - } - - html.modal-open, - body.modal-open { - overflow: hidden; - height: 100%; - } - - body.modal-open #app { - overflow: hidden; - } - - body.modal-open #sidebar { - pointer-events: none; - opacity: 0; - visibility: hidden; - } - - body.modal-open #sidebar { - z-index: var(--z-sidebar-overlay); - } - - #sidebar.is-modal-hidden { - pointer-events: none; - opacity: 0; - visibility: hidden; - } - - [ng\:cloak], - [ng-cloak], - [data-ng-cloak], - [x-ng-cloak], - .ng-cloak, - .x-ng-cloak, - .ng-hide:not(.ng-hide-animate) { - display: none !important; - } - - ng\:form { - display: block; - } - - .ng-animate-shim { - visibility: hidden; - } - - .ng-anchor { - position: absolute; - } -} - -@layer components { - .ds-header { - @apply flex items-center justify-start py-sm; - } - - .app-shell__header { - position: sticky; - top: env(safe-area-inset-top, 0); - z-index: var(--z-app-header); - padding-top: calc(var(--space-sm) + env(safe-area-inset-top, 0)); - padding-bottom: var(--space-sm); - background-color: transparent; - background-image: var(--surface-overlay-banner-gradient-header); - background-repeat: no-repeat; - background-size: 100% 100%; - } - - .ds-metric-probe { - position: absolute; - top: 0; - left: 0; - visibility: hidden; - pointer-events: none; - contain: layout size style; - inline-size: 0; - block-size: var(--ds-metric-probe-length, 0); - overflow: hidden; - } - - .ds-header__logo { - @apply h-2xl-plus w-auto max-w-none; - } - - .focus-ring { - @apply outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-opacity-70 focus-visible:ring-offset-2 focus-visible:ring-offset-surface focus-visible:transition-shadow focus-visible:duration-fast focus-visible:ease-out; - } - - .focus-ring:focus-visible { - --tw-ring-color: var(--color-accent); - } - - .author-pic { - @apply block h-full w-full rounded-full object-cover; - } - - .header-icon-toggle { - @apply focus-ring inline-flex items-center justify-center rounded-full transition-colors duration-150 ease-out; - width: var(--icon-size-lg); - height: var(--icon-size-lg); - min-width: var(--icon-size-lg); - min-height: var(--icon-size-lg); - padding: 0; - border: none; - background: transparent; - color: var(--color-text-muted); - line-height: 1; - } - - .header-icon-toggle[data-theme-state="light"] { - color: var(--color-text-strong); - } - - .header-icon-toggle[data-theme-state="dark"] { - color: var(--color-text); - } - - .header-icon-toggle__icon-wrapper { - @apply inline-flex items-center justify-center; - inline-size: var(--space-lg); - block-size: var(--space-lg); - } - - .header-icon-toggle__icon { - inline-size: 100%; - block-size: 100%; - display: none; - fill: currentColor; - } - - .header-icon-toggle__icon-wrapper:not([data-theme-icon-state]), - .header-icon-toggle__icon-wrapper[data-theme-icon-state="light"] { - color: inherit; - } - - .header-icon-toggle__icon-wrapper[data-theme-icon-state="light"] - .header-icon-toggle__icon--dark { - display: block; - } - - .header-icon-toggle__icon-wrapper[data-theme-icon-state="dark"] - .header-icon-toggle__icon--light { - display: block; - } - - .header-icon-toggle__icon-wrapper:not([data-theme-icon-state]) - .header-icon-toggle__icon--dark { - display: block; - } - - #profileUnreadDot { - position: absolute; - top: var(--space-2xs); - right: var(--space-2xs); - width: var(--space-sm); - height: var(--space-sm); - border-radius: var(--radius-full); - border: var(--border-width-hairline) solid var(--color-page); - background-color: var(--status-danger); - display: none; - pointer-events: none; - } - - #profileUnreadDot.is-visible { - display: block; - } - - .header-icon-toggle[data-theme-state="light"]:hover, - .header-icon-toggle[data-theme-state="light"]:focus-visible { - color: var(--color-text); - } - - .header-icon-toggle[data-theme-state="dark"]:hover, - .header-icon-toggle[data-theme-state="dark"]:focus-visible { - color: var(--color-text-strong); - } - - .header-icon-toggle[aria-pressed="true"] { - color: var(--color-text-strong); - } - - .header-icon-toggle[aria-pressed="true"]:hover, - .header-icon-toggle[aria-pressed="true"]:focus-visible { - color: var(--color-text-strong); - } - - .header-search__region { - @apply hidden flex-1 justify-center md:flex; - min-width: 0; - padding-inline: clamp(var(--space-md), 4vw, var(--space-3xl)); - } - - .header-search { - @apply flex items-center gap-3 rounded-full border border-border border-opacity-40 bg-overlay-panel px-4 shadow-sm transition-colors duration-base ease-out; - backdrop-filter: blur(var(--popover-backdrop-blur)); - -webkit-backdrop-filter: blur(var(--popover-backdrop-blur)); - padding-block: calc(var(--space-sm) * 0.9); - inline-size: min(100%, var(--header-search-max-inline)); - } - - .header-search:focus-within { - @apply border-accent-strong; - } - - .header-search__icon { - @apply block h-5 w-5; - background-color: currentColor; - mask-repeat: no-repeat; - mask-position: center; - mask-size: contain; - -webkit-mask-repeat: no-repeat; - -webkit-mask-position: center; - -webkit-mask-size: contain; - } - - .header-search__icon--filter { - mask-image: url("../assets/svg/filter.svg"); - -webkit-mask-image: url("../assets/svg/filter.svg"); - } - - .header-search__icon--submit { - mask-image: url("../assets/svg/search.svg"); - -webkit-mask-image: url("../assets/svg/search.svg"); - } - - .header-search__filter { - @apply focus-ring inline-flex shrink-0 items-center justify-center rounded-full border border-transparent bg-transparent transition-colors duration-base ease-out; - color: var(--color-accent); - inline-size: calc(var(--icon-size-lg) * 0.9); - block-size: calc(var(--icon-size-lg) * 0.9); - min-inline-size: calc(var(--icon-size-lg) * 0.9); - min-block-size: calc(var(--icon-size-lg) * 0.9); - } - - .header-search__filter:hover, - .header-search__filter:focus-visible { - color: var(--color-accent-strong); - } - - .header-search__input { - @apply flex-1 appearance-none bg-transparent text-sm text-text outline-none placeholder:text-muted; - min-width: 0; - } - - .header-search__input:focus-visible { - @apply outline-none ring-0; - } - - .header-search__submit { - @apply focus-ring inline-flex items-center justify-center rounded-full border border-transparent transition-colors duration-base ease-out; - background-color: var(--color-accent-strong); - color: var(--color-white); - inline-size: calc(var(--icon-size-lg) * 0.9); - block-size: calc(var(--icon-size-lg) * 0.9); - min-inline-size: calc(var(--icon-size-lg) * 0.9); - min-block-size: calc(var(--icon-size-lg) * 0.9); - padding: 0; - } - - .header-search__submit:hover { - background-color: var(--color-accent); - } - - .header-search__submit:focus-visible { - background-color: var(--color-accent-pressed); - } - - .bv-logo { - --logo-wordmark-color: var(--color-logo-wordmark); - --logo-accent-color: var(--color-logo-accent); - --logo-background-color: var(--color-logo-background); - } - - .bv-logo[data-variant="inverse"] { - --logo-wordmark-color: var(--color-logo-wordmark-inverse); - --logo-background-color: var(--color-logo-background-inverse); - } - - .bv-logo[data-wordmark="current"] { - --logo-wordmark-color: currentColor; - } - - .bv-logo[data-accent="current"] { - --logo-accent-color: currentColor; - } - - .bv-logo[data-background="transparent"] { - --logo-background-color: transparent; - } - - .bv-logo__wordmark { - fill: var(--logo-wordmark-color); - color: var(--logo-wordmark-color); - } - - .bv-logo__accent { - fill: var(--logo-accent-color); - color: var(--logo-accent-color); - } - - .bv-logo__background { - fill: var(--logo-background-color); - color: var(--logo-background-color); - } - - .markdown-prose { - @apply prose max-w-none leading-relaxed text-text; - --tw-prose-body: var(--color-text); - --tw-prose-headings: var(--color-text-strong); - --tw-prose-invert-headings: var(--color-text-strong); - --tw-prose-lead: var(--color-text); - --tw-prose-links: var(--color-accent-strong); - --tw-prose-bold: var(--color-text-strong); - --tw-prose-counters: var(--color-text-muted); - --tw-prose-bullets: var(--color-text-muted); - --tw-prose-hr: var(--color-border-translucent-strong); - --tw-prose-quotes: var(--color-text-strong); - --tw-prose-quote-borders: var(--color-border-subtle); - --tw-prose-captions: var(--color-text-muted); - --tw-prose-code: var(--color-text-strong); - --tw-prose-pre-code: var(--color-text); - --tw-prose-pre-bg: var(--surface-muted); - --tw-prose-th-borders: var(--color-border); - --tw-prose-td-borders: var(--color-border-subtle); - } - - .markdown-prose :where(h1, h2, h3, h4, h5, h6) { - color: var(--color-text-strong); - } - - .markdown-prose :where(h1, h2, h3, h4, h5, h6) strong { - color: inherit; - } - - .markdown-prose a { - color: var(--color-accent-strong); - text-decoration-color: color-mix( - in srgb, - var(--color-accent-strong) 65%, - transparent - ); - text-decoration-thickness: var(--link-underline-thickness); - text-underline-offset: 0.2em; - } - - .markdown-prose a:hover, - .markdown-prose a:focus-visible { - color: var(--color-accent); - text-decoration-line: underline; - } - - .markdown-prose blockquote { - @apply rounded-md border-l-4 border-border-subtle bg-surface-muted bg-opacity-50 px-4 py-2 text-muted; - } - - .markdown-prose :where(pre, code) { - @apply font-mono; - } - - .markdown-prose code { - @apply rounded-md bg-surface-muted px-1 py-0.5 text-accent-strong; - } - - .markdown-prose pre { - @apply overflow-x-auto rounded-lg border border-border-subtle bg-surface-muted p-4 text-text; - } - - .markdown-prose pre code { - background-color: transparent; - color: inherit; - padding: 0; - } - - .popover { - @apply relative inline-flex; - } - - .popover-panel, - .popover__panel { - @apply focus-ring pointer-events-none z-overlay-popover min-w-menu max-w-popover-safe scale-95 rounded-overlay border border-border border-opacity-40 bg-overlay-panel px-overlay-panel-inline py-overlay-panel-block text-sm text-text opacity-0 shadow-overlay-panel transition-opacity transition-transform duration-base ease-out; - position: var(--popover-strategy, fixed); - left: var(--popover-left, 0); - top: var(--popover-top, 0); - max-width: var(--popover-max-width, none); - max-height: var(--popover-max-height, none); - } - - .popover-panel[data-state="open"], - .popover__panel[data-state="open"] { - @apply pointer-events-auto scale-100 opacity-100; - } - - .popover-panel[data-state="closed"], - .popover__panel[data-state="closed"] { - @apply pointer-events-none scale-95 opacity-0; - } - - [data-popover-arrow="true"] { - left: var(--popover-arrow-left, auto); - right: var(--popover-arrow-right, auto); - top: var(--popover-arrow-top, auto); - bottom: var(--popover-arrow-bottom, auto); - } - - .p-overlay-panel { - @apply px-overlay-panel-inline py-overlay-panel-block; - } - - .ds-overlay-backdrop { - position: fixed; - inset: 0; - display: flex; - align-items: center; - justify-content: center; - background: var(--overlay-backdrop-color); - backdrop-filter: blur(var(--overlay-backdrop-blur)); - -webkit-backdrop-filter: blur(var(--overlay-backdrop-blur)); - } - - .popover-panel[data-variant="zap"], - .popover__panel[data-variant="zap"] { - background: var(--color-overlay-veil); - color: var(--color-subtle); - border: var(--border-width-hairline) solid - var(--color-border-translucent-stronger); - box-shadow: var(--shadow-popover-zap); - backdrop-filter: blur(var(--popover-backdrop-blur)); - -webkit-backdrop-filter: blur(var(--popover-backdrop-blur)); - } - - .btn { - @apply focus-ring inline-flex items-center justify-center gap-2 rounded-full border border-transparent bg-accent-strong px-5 py-2.5 text-base font-semibold text-white shadow-lg transition duration-base ease-in-out; - } - - .btn[data-size="sm"], - .btn-ghost[data-size="sm"] { - @apply px-3 py-1.5 text-sm; - } - - .btn[data-size="sm"], - .btn-ghost[data-size="sm"] { - @apply gap-1.5; - } - - .btn:hover { - @apply bg-accent; - } - - .btn:focus-visible { - @apply bg-accent-pressed; - } - - .btn:disabled { - @apply pointer-events-none cursor-not-allowed opacity-60 shadow-none; - } - - .btn-link { - @apply focus-ring inline-flex items-center gap-1 text-sm font-semibold text-accent transition duration-base ease-out; - } - - .btn-link:hover, - .btn-link:focus-visible { - @apply text-accent-strong underline; - } - - .progress, - [data-progress-meter] { - --progress-height: var(--progress-height-md); - --progress-track: var(--progress-track-color); - --progress-fill: var(--progress-fill-color); - --progress-radius-current: var(--progress-radius); - display: block; - width: 100%; - height: var(--progress-height); - border: none; - border-radius: var(--progress-radius-current); - overflow: hidden; - background-color: var(--progress-track); - appearance: none; - } - - .progress::-webkit-progress-bar, - [data-progress-meter]::-webkit-progress-bar { - background-color: var(--progress-track); - border-radius: var(--progress-radius-current); - } - - .progress::-webkit-progress-value, - [data-progress-meter]::-webkit-progress-value { - background-color: var(--progress-fill); - border-radius: var(--progress-radius-current); - transition: width var(--progress-transition-duration) - var(--progress-transition-ease); - } - - .progress::-moz-progress-bar, - [data-progress-meter]::-moz-progress-bar { - background-color: var(--progress-fill); - border-radius: var(--progress-radius-current); - transition: width var(--progress-transition-duration) - var(--progress-transition-ease); - } - - .progress[data-variant="surface"], - [data-progress-meter][data-variant="surface"], - .progress.progress--surface, - [data-progress-meter].progress--surface { - --progress-track: var(--color-panel); - } - - .progress[data-variant="accent"], - [data-progress-meter][data-variant="accent"], - .progress.progress--accent, - [data-progress-meter].progress--accent { - --progress-fill: var(--color-info-strong); - } - - .btn-ghost { - @apply btn border border-border border-opacity-60 bg-transparent text-text shadow-none; - } - - .btn-ghost:hover { - @apply bg-panel-hover text-text; - } - - .btn-ghost:focus-visible { - @apply bg-panel-hover; - } - - .btn-ghost:disabled { - @apply pointer-events-none opacity-50 shadow-none; - } - - .btn-ghost[data-variant="critical"] { - @apply border border-critical border-opacity-60 text-critical; - } - - .btn-ghost[data-variant="critical"]:hover, - .btn-ghost[data-variant="critical"]:focus-visible { - @apply bg-critical bg-opacity-20 text-critical-strong; - } - - .login-option { - @apply focus-ring relative flex h-full w-full flex-col gap-4 overflow-hidden border border-border bg-overlay-panel-soft px-6 py-5 text-left text-text shadow-lg transition duration-300 ease-out; - border-radius: calc(var(--radius-xl) * 1.12); - isolation: isolate; - backdrop-filter: blur(var(--blur-modal-backdrop)); - background-image: linear-gradient( - 140deg, - color-mix(in srgb, var(--surface-overlay-panel-soft) 88%, transparent) 0%, - color-mix(in srgb, var(--surface-overlay-panel) 72%, transparent) 100% - ); - transform: translate3d(0, 0, 0); - transition-property: border-color, box-shadow, transform; - } - - .login-option::after { - content: ""; - position: absolute; - inset: 0; - z-index: 0; - border-radius: inherit; - opacity: 0; - transform: translate3d(0, 14%, 0); - transition: - opacity 220ms ease, - transform 220ms ease; - background: radial-gradient( - 115% 115% at 0% 0%, - color-mix(in srgb, var(--status-neutral) 32%, transparent) 0%, - transparent 65% - ); - } - - .login-option:hover, - .login-option:focus-visible { - @apply border-border-strong; - box-shadow: var(--shadow-modal); - transform: translate3d(0, var(--motion-login-option-hover-translate), 0); - } - - .login-option:hover::after, - .login-option:focus-visible::after { - opacity: 0.65; - transform: translate3d(0, 0, 0); - } - - .login-option:disabled, - .login-option[aria-disabled="true"] { - @apply cursor-not-allowed opacity-60 shadow-none; - transform: none; - } - - .login-option[data-tone="accent"]::after { - background: radial-gradient( - 120% 120% at 0% 0%, - color-mix(in srgb, var(--status-info) 38%, transparent) 0%, - transparent 65% - ); - } - - .login-option[data-tone="warning"]::after { - background: radial-gradient( - 120% 120% at 0% 0%, - color-mix(in srgb, var(--status-warning) 42%, transparent) 0%, - transparent 65% - ); - } - - .login-option--primary { - @apply border-border; - } - - .login-option--ghost { - background-image: linear-gradient( - 145deg, - color-mix(in srgb, var(--surface-overlay-panel-soft) 82%, transparent) 0%, - color-mix(in srgb, var(--surface-overlay-panel-soft) 68%, transparent) - 100% - ); - } - - .login-option--outline { - @apply border-border-strong; - } - - .login-option--link { - @apply border border-transparent bg-transparent text-accent shadow-none; - } - - .login-option__header, - .login-option__copy, - .login-option__status, - .login-option__capabilities { - position: relative; - z-index: 1; - } - - .login-option__header { - @apply flex w-full items-start justify-between gap-4; - } - - .login-option__copy { - @apply flex min-w-0 flex-col items-start gap-2; - } - - .login-option__eyebrow { - @apply text-[length:var(--font-size-2xs)] font-semibold uppercase text-text-muted; - letter-spacing: 0.18em; - } - - .login-option:hover .login-option__eyebrow, - .login-option:focus-visible .login-option__eyebrow { - @apply text-text; - } - - .login-option__label { - @apply text-lg font-semibold text-text; - } - - .login-option__description { - @apply text-sm leading-relaxed text-text-muted; - } - - .login-option__chevron { - @apply inline-flex h-9 w-9 items-center justify-center rounded-full bg-overlay-panel text-text-muted transition duration-200 ease-out; - box-shadow: inset 0 0 0 var(--border-width-hairline) - color-mix(in srgb, var(--border-overlay) 60%, transparent); - } - - .login-option:hover .login-option__chevron, - .login-option:focus-visible .login-option__chevron { - @apply bg-accent text-white; - box-shadow: none; - } - - .login-option__status { - @apply flex w-full items-center justify-between gap-2 text-sm text-text-muted; - } - - .login-option__capabilities { - @apply flex flex-wrap gap-2; - position: relative; - } - - .btn-ghost[data-state="active"], - .btn-ghost[aria-pressed="true"] { - @apply border-transparent bg-primary text-white shadow-md; - } - - .btn-ghost[data-state="active"]:hover, - .btn-ghost[data-state="active"]:focus-visible, - .btn-ghost[aria-pressed="true"]:hover, - .btn-ghost[aria-pressed="true"]:focus-visible { - @apply bg-accent-strong; - } - - .modal-progress { - width: var(--progress-width, 0%); - transition: width var(--motion-duration-base, 160ms) - var(--motion-ease-out, ease-out); - } - - .cloudflare-progress__fill { - width: var(--cloudflare-progress-width, 0%); - transition: width var(--motion-duration-base, 160ms) - var(--motion-ease-out, ease-out); - } - - /* - * Blog embed heights are now driven by the iframe content via postMessage. - * Styling lives inline so the shell can expand naturally with its card. - */ - - /* - * Blog carousel component styles - * Tokens consumed here are defined in css/tokens.css under the - * "Blog carousel tokens" section: - */ - - .badge { - @apply inline-flex items-center gap-1 rounded-full border border-status-neutral-border bg-status-neutral-surface px-3 py-1 text-2xs font-semibold uppercase tracking-extra-wide text-status-neutral-on; - } - - .badge[data-variant="info"] { - @apply border-status-info-border bg-status-info-surface text-status-info-on; - } - - .badge[data-variant="success"] { - @apply border-status-success-border bg-status-success-surface text-status-success-on; - } - - .badge[data-variant="warning"] { - @apply border-status-warning-border bg-status-warning-surface text-status-warning-on; - } - - .badge[data-variant="critical"] { - @apply border-status-danger-border bg-status-danger-surface text-status-danger-on; - } - - .badge[data-variant="private"] { - @apply border-status-private-border bg-status-private-surface text-status-private-on; - } - - .badge[data-variant="neutral"] { - @apply border-status-neutral-border bg-status-neutral-surface text-status-neutral-on; - } - - .moderation-badge { - @apply inline-flex flex-col items-start gap-sm rounded-xl border px-3 py-1.5 text-xs font-semibold normal-case tracking-tight shadow-sm; - } - - .moderation-badge--interactive { - pointer-events: auto; - } - - .moderation-badge__actions { - @apply inline-flex flex-nowrap items-center gap-sm; - } - - .moderation-badge__label { - @apply inline-flex items-center gap-xs whitespace-nowrap; - } - - .moderation-badge[data-variant="warning"] { - @apply border-status-warning-border bg-status-warning-surface text-status-warning-on; - box-shadow: 0 var(--shadow-badge-offset-y) var(--shadow-badge-blur) - color-mix(in srgb, var(--status-warning) 18%, transparent); - } - - .moderation-badge[data-variant="neutral"] { - @apply border-status-neutral-border bg-status-neutral-surface text-status-neutral-on; - box-shadow: 0 var(--shadow-badge-offset-y) var(--shadow-badge-blur) - color-mix(in srgb, var(--status-neutral) 18%, transparent); - } - - .moderation-badge__icon { - @apply inline-flex h-5 w-5 items-center justify-center rounded-full bg-status-warning-surface text-status-warning-on; - background-color: color-mix( - in srgb, - var(--status-warning) 18%, - transparent - ); - color: var(--status-warning-on); - } - - .moderation-badge[data-variant="neutral"] .moderation-badge__icon { - @apply bg-status-neutral-surface text-status-neutral-on; - background-color: color-mix( - in srgb, - var(--status-neutral) 18%, - transparent - ); - color: var(--status-neutral-on); - } - - .moderation-badge__icon-mark { - @apply h-3.5 w-3.5; - } - - .moderation-badge__text { - @apply whitespace-nowrap text-xs font-semibold tracking-tight; - } - - .moderation-badge__action { - @apply inline-flex items-center gap-1.5 rounded-full border border-status-warning-border bg-status-warning-surface px-3 py-1 text-xs font-semibold normal-case tracking-tight text-status-warning-on transition duration-150 ease-out; - background-color: color-mix( - in srgb, - var(--status-warning) 16%, - transparent - ); - border-color: color-mix( - in srgb, - var(--status-warning-border) 80%, - transparent - ); - color: var(--status-warning-on); - } - - .moderation-badge[data-variant="warning"] .moderation-badge__action:hover { - background-color: color-mix( - in srgb, - var(--status-warning) 24%, - transparent - ); - } - - .moderation-badge[data-variant="neutral"] .moderation-badge__action { - @apply border-status-neutral-border bg-status-neutral-surface text-status-neutral-on; - background-color: color-mix( - in srgb, - var(--status-neutral) 16%, - transparent - ); - border-color: color-mix( - in srgb, - var(--status-neutral-border) 80%, - transparent - ); - color: var(--status-neutral-on); - } - - .moderation-badge[data-variant="neutral"] .moderation-badge__action:hover { - background-color: color-mix( - in srgb, - var(--status-neutral) 24%, - transparent - ); - } - - .moderation-badge__action:focus-visible { - outline: var(--outline-thick-width) solid - color-mix(in srgb, var(--status-warning) 38%, transparent); - outline-offset: var(--space-3xs); - } - - .moderation-badge[data-variant="neutral"] - .moderation-badge__action:focus-visible { - outline: var(--outline-thick-width) solid - color-mix(in srgb, var(--status-neutral) 38%, transparent); - } - - .moderation-badge__action[disabled] { - cursor: wait; - opacity: 0.7; - } - - .pill { - @apply inline-flex items-center gap-2 rounded-full border border-status-neutral-border bg-status-neutral-surface px-3 py-1 text-xs font-medium text-status-neutral-on; - } - - .pill[data-size="compact"] { - @apply px-2 py-0.5 text-2xs; - } - - .pill[data-variant="info"] { - @apply border-status-info-border bg-status-info-surface text-status-info-on; - } - - .pill[data-variant="success"] { - @apply border-status-success-border bg-status-success-surface text-status-success-on; - } - - .pill[data-variant="warning"] { - @apply border-status-warning-border bg-status-warning-surface text-status-warning-on; - } - - .pill[data-variant="critical"] { - @apply border-status-danger-border bg-status-danger-surface text-status-danger-on; - } - - .pill[data-variant="private"] { - @apply border-status-private-border bg-status-private-surface text-status-private-on; - } - - .pill[data-variant="neutral"] { - @apply border-status-neutral-border bg-status-neutral-surface text-status-neutral-on; - } - - .overlay-scrim { - background-color: var(--surface-overlay); - } - - .overlay-scrim[data-strength="muted"] { - background-color: var(--surface-overlay-muted); - } - - .overlay-scrim[data-strength="strong"] { - background-color: var(--surface-overlay-strong); - } - - .overlay-panel { - background-color: var(--surface-overlay-panel); - } - - .overlay-panel[data-variant="soft"] { - background-color: var(--surface-overlay-panel-soft); - } - - .overlay-panel[data-variant="glass"] { - background-color: var(--surface-overlay-panel-glass); - } - - .menu { - @apply flex flex-col gap-1 py-2; - } - - .menu__heading { - @apply px-4 pb-2 text-xs font-semibold uppercase tracking-wide text-muted; - } - - .menu__separator { - @apply my-2 h-px bg-border bg-opacity-20; - } - - .menu__item { - @apply focus-ring relative flex w-full items-center gap-3 rounded-md px-4 py-2 text-sm font-medium text-text transition-colors duration-[var(--motion-duration-fast)] ease-[var(--motion-ease-in-out)]; - } - - .menu__item:hover { - @apply bg-panel-hover text-text; - } - - .menu__item[data-state="active"] { - @apply bg-accent bg-opacity-20 text-accent-strong; - } - - .menu__item[data-variant="critical"] { - @apply text-critical-strong; - } - - .menu__item[data-variant="critical"]:hover { - @apply bg-critical bg-opacity-20; - } - - .menu__item:disabled, - .menu__item[aria-disabled="true"] { - @apply cursor-not-allowed bg-transparent text-muted opacity-60; - } - - .menu__item:disabled:hover, - .menu__item[aria-disabled="true"]:hover { - @apply bg-transparent text-muted; - } - - .card { - --video-card-lift-translate-y: 0; - --video-card-backdrop-opacity: 0; - --video-card-backdrop-translate-y: var(--space-md-plus); - --video-card-backdrop-scale: 1.08; - --video-card-backdrop-blur: var(--blur-thumbnail-blur); - @apply focus-ring relative rounded-lg border border-transparent bg-card text-text shadow-md transition duration-base ease-in-out; - transform: translate3d(0, var(--video-card-lift-translate-y), 0); - transition-property: - transform, box-shadow, border-color, background-color, color; - will-change: transform; - isolation: isolate; - } - - .card::before { - content: ""; - position: absolute; - inset: 0; - z-index: 0; - opacity: var(--video-card-backdrop-opacity); - background-image: var(--video-card-thumb-url, none); - background-position: center; - background-repeat: no-repeat; - background-size: cover; - transform: translate3d(0, var(--video-card-backdrop-translate-y), 0) - scale(var(--video-card-backdrop-scale)); - filter: blur(var(--video-card-backdrop-blur)); - transition: - opacity var(--motion-duration-base) var(--motion-ease-in-out), - transform var(--motion-duration-base) var(--motion-ease-in-out), - filter var(--motion-duration-base) var(--motion-ease-in-out); - pointer-events: none; - will-change: opacity, transform, filter; - } - - .card > * { - position: relative; - z-index: 1; - } - - .card--compact { - @apply flex flex-row items-start gap-md; - } - - .card--compact .video-card__media { - inline-size: clamp( - var(--video-card-compact-media-min), - calc(var(--video-modal-secondary-min) * 0.4), - var(--video-card-compact-media-max) - ); - flex-basis: clamp( - var(--video-card-compact-media-min), - calc(var(--video-modal-secondary-min) * 0.4), - var(--video-card-compact-media-max) - ); - @apply block shrink-0 overflow-hidden rounded-lg; - } - - .card--compact .video-card__content { - @apply flex min-w-0 flex-1 flex-col gap-sm p-md; - } - - .card--compact .video-card__title { - @apply text-base font-semibold leading-snug; - } - - .card--compact .video-card__author-name { - @apply text-xs; - } - - .card--compact .video-card__meta { - @apply mt-0 flex items-center gap-2 text-2xs text-muted-strong; - } - - .card--compact .video-card__meta .view-count-text { - @apply text-2xs; - } - - .card:hover, - .card:focus-within { - --video-card-lift-translate-y: var(--motion-video-card-hover-translate); - --video-card-backdrop-opacity: 0.425; - --video-card-backdrop-translate-y: var( - --motion-video-card-backdrop-translate - ); - --video-card-backdrop-scale: 1.12; - --video-card-backdrop-blur: var(--blur-video-card-backdrop-strong); - @apply shadow-lg; - } - - .card:focus-visible { - @apply border-accent border-opacity-40 shadow-lg; - } - - .card[data-state="critical"] { - @apply border border-critical border-opacity-40 bg-card-critical; - } - - .card[data-state="private"] { - @apply bg-card-private shadow-lg; - } - - .card[data-state="disabled"] { - @apply opacity-60 shadow-none; - } - - .video-card__title { - transition: color var(--motion-duration-base) var(--motion-ease-in-out); - } - - .video-card__title:hover, - .video-card__title:focus-visible { - color: var(--color-accent); - } - - .form-control { - @apply focus-ring block w-full rounded-md border border-border-subtle bg-surface-alt px-3 py-2 text-sm text-text shadow-sm transition duration-base ease-in-out placeholder:text-muted; - } - - .form-control:hover { - @apply border-border; - } - - .form-control:focus-visible { - @apply border-accent-strong; - } - - .form-control:disabled { - @apply cursor-not-allowed bg-surface text-muted opacity-60; - } - - .form-control:invalid { - @apply border-critical border-opacity-60; - } - - .form-control[data-state="locked"], - .input[data-state="locked"], - .textarea[data-state="locked"], - .select[data-state="locked"], - textarea.form-control[data-state="locked"], - select.form-control[data-state="locked"] { - @apply cursor-default border-border-sidebar-strong bg-overlay-panel-soft text-muted; - } - - .form-control[data-state="locked"]:focus-visible, - .input[data-state="locked"]:focus-visible, - .textarea[data-state="locked"]:focus-visible, - .select[data-state="locked"]:focus-visible, - textarea.form-control[data-state="locked"]:focus-visible, - select.form-control[data-state="locked"]:focus-visible { - @apply border-border-sidebar-strong shadow-none outline-none ring-0 ring-offset-0; - } - - .form-control[data-state="locked"]:disabled, - .input[data-state="locked"]:disabled, - .textarea[data-state="locked"]:disabled, - .select[data-state="locked"]:disabled, - textarea.form-control[data-state="locked"]:disabled, - select.form-control[data-state="locked"]:disabled { - @apply cursor-default opacity-100; - } - - .input { - @apply form-control; - } - - .textarea { - @apply form-control min-h-[var(--form-textarea-min-height)] resize-y; - } - - .select { - @apply form-control appearance-none pr-10; - --select-arrow-color: var(--color-border); - background-image: - linear-gradient(135deg, transparent 50%, var(--select-arrow-color) 50%), - linear-gradient(45deg, var(--select-arrow-color) 50%, transparent 50%), - linear-gradient( - to right, - var(--color-border-subtle), - var(--color-border-subtle) - ); - background-position: - right var(--form-select-icon-offset) center, - right var(--form-select-icon-gap) center, - right var(--form-select-icon-hit-area) center; - background-size: - var(--form-select-icon-size) var(--form-select-icon-size), - var(--form-select-icon-size) var(--form-select-icon-size), - var(--form-select-divider-width) 60%; - background-repeat: no-repeat; - } - - .select:hover { - --select-arrow-color: var(--color-border); - } - - .select:focus-visible { - --select-arrow-color: var(--color-accent-strong); - } - - .select:disabled { - --select-arrow-color: var(--color-border-subtle); - } - - .select:invalid { - --select-arrow-color: var(--color-critical); - } - - .checkbox { - @apply focus-ring inline-flex h-5 w-5 cursor-pointer appearance-none items-center justify-center rounded border border-border-subtle bg-surface-alt text-white transition duration-base ease-in-out; - } - - .checkbox:hover { - @apply border-border; - } - - .checkbox:disabled { - @apply cursor-not-allowed border-border-subtle bg-surface text-muted opacity-60; - } - - .checkbox::after { - content: ""; - @apply pointer-events-none h-2 w-3 border-b-2 border-r-2 border-white opacity-0 transition duration-base ease-in-out; - transform: rotate(45deg) translateY(var(--form-checkbox-checkmark-offset)) - scale(0.85); - } - - .checkbox:checked, - .checkbox[aria-checked="true"] { - @apply border-accent-strong bg-accent-strong; - } - - .checkbox:checked::after, - .checkbox[aria-checked="true"]::after { - @apply opacity-100; - transform: rotate(45deg) translateY(var(--form-checkbox-checkmark-offset)) - scale(1); - } - - .switch { - @apply focus-ring relative inline-flex h-6 w-11 cursor-pointer items-center rounded-full border border-border-subtle bg-border-subtle transition-colors duration-base ease-in-out; - } - - .switch::before { - content: ""; - @apply pointer-events-none absolute left-0.5 top-1/2 h-5 w-5 -translate-y-1/2 transform rounded-full bg-surface shadow-md transition duration-base ease-in-out; - } - - .switch:disabled { - @apply cursor-not-allowed border-border-subtle bg-surface text-muted opacity-60; - } - - .switch[aria-checked="true"], - .switch.is-on { - @apply border-accent-strong bg-accent-strong; - } - - .switch[aria-checked="true"]::before, - .switch.is-on::before { - @apply translate-x-5; - } - - @media (prefers-reduced-motion: reduce) { - .form-control, - .checkbox, - .checkbox::after, - .switch, - .switch::before, - .popover-panel, - .popover__panel, - .menu__item { - transition: none !important; - } - } - - .bv-modal { - @apply fixed inset-0 z-[var(--z-modal-root)] flex items-center justify-center p-6 sm:p-8; - } - - .bv-modal[hidden], - .bv-modal.hidden { - display: none !important; - } - - .bv-modal__panel { - @apply focus-ring relative z-[var(--z-modal-content)] w-full max-w-modal rounded-modal-xl border border-border-translucent px-8 pb-8 pt-7 text-left text-text shadow-modal transition duration-base ease-out; - background-color: var(--color-modal-surface, var(--color-overlay-panel)); - } - - .bv-modal__panel:focus-visible { - @apply border-border-translucent-bright; - } - - .bv-modal-backdrop { - @apply fixed inset-0 z-[var(--z-modal-overlay)] backdrop-saturate-150; - background-color: var(--color-modal-backdrop, var(--color-overlay-muted)); - backdrop-filter: blur(var(--blur-modal-backdrop)); - -webkit-backdrop-filter: blur(var(--blur-modal-backdrop)); - } - - .bv-modal-backdrop[data-variant="veil"] { - @apply backdrop-blur-3xl; - background-color: var(--color-overlay-veil); - } - - .bv-modal-backdrop[data-variant="muted"] { - background-color: var(--color-overlay-muted); - } - - .modal-sheet { - @apply bv-modal__panel relative my-0 w-full overflow-hidden; - max-width: var(--modal-sheet-inline-max); - overscroll-behavior: contain; - } - - @media (max-width: calc(theme("screens.lg") - var(--breakpoint-edge-offset))) { - .bv-modal { - align-items: stretch; - justify-content: stretch; - padding: 0; - } - - .bv-modal__panel, - .modal-sheet { - inline-size: 100vw; - block-size: 100vh; - max-width: none; - max-height: none; - margin: 0; - border-radius: 0; - border: 0; - padding-top: calc(var(--space-lg) + env(safe-area-inset-top)); - padding-right: calc(var(--space-lg) + env(safe-area-inset-right)); - padding-bottom: calc(var(--space-lg) + env(safe-area-inset-bottom)); - padding-left: calc(var(--space-lg) + env(safe-area-inset-left)); - overflow: auto; - } - } - - .modal-header { - @apply flex items-start justify-between gap-md px-8 pb-4 pt-7; - background: transparent; - border: 0; - } - - .modal-header[data-variant="flush"] { - @apply px-0 pb-0 pt-0; - background: transparent; - } - - .modal-header__title { - @apply text-xl font-bold text-text; - } - - .modal-close { - @apply focus-ring flex h-10 w-10 items-center justify-center rounded-full transition duration-base ease-out; - border: var(--border-width-hairline) solid - var(--color-border-translucent-medium); - background: var(--color-surface-tint-subtle); - color: var(--color-text-frosted-strong); - } - - .modal-close:hover { - background: var(--color-border-translucent); - border-color: var(--color-border-translucent-stronger); - color: var(--color-text); - } - - .modal-back { - @apply inline-flex items-center gap-2; - } - - @media (min-width: theme("screens.lg")) { - .modal-back { - display: none !important; - } - } - - .modal-body { - @apply space-y-5 px-8 pb-8 pt-2; - overscroll-behavior: contain; - } - - .modal-body { - scrollbar-width: thin; - } - - .modal-body::-webkit-scrollbar { - width: var(--scrollbar-thin-width); - } - - .modal-body::-webkit-scrollbar-track { - background: transparent; - } - - .modal-body::-webkit-scrollbar-thumb { - background: var(--color-border-translucent); - border-radius: var(--radius-full); - } - - /* Modal embed containers ensure iframe wrappers respect modal sizing tokens. */ - .modal-embed-frame { - @apply flex h-modal-embed max-h-modal-embed w-full flex-col; - } - - .modal-footer { - @apply flex flex-col gap-3 px-8 pb-8 pt-4; - } - - .modal-alert { - @apply flex items-start gap-3 rounded-md border border-warning-strong border-opacity-60 px-4 py-3 text-sm text-warning-strong; - backdrop-filter: blur(var(--blur-modal-alert)); - background-color: var(--color-warning-glass); - } - - .modal-alert__icon { - @apply mt-0.5 h-5 w-5 flex-shrink-0 text-warning-strong; - } - - .modal-tile { - @apply rounded-xl border border-border-translucent bg-overlay-panel-soft px-5 py-4 text-sm text-text-frosted; - background-color: var(--color-overlay-panel-glass-soft); - } - - .modal-tile > h3 { - @apply text-base font-semibold text-text; - } - - .modal-primary { - @apply btn w-full justify-center; - } - - .grid-stack { - @apply grid gap-lg; - } - - .grid-stack[data-variant="cards"] { - @apply grid-cols-1 sm:grid-cols-2 xl:grid-cols-3; - } - - .grid-stack[data-orientation="vertical"] { - @apply flex flex-col gap-md; - } - - .bv-stack { - @apply flex flex-col gap-lg; - } - - .bv-stack--tight { - @apply gap-md; - } - - .bv-grid-video { - @apply grid gap-xl py-lg; - grid-template-columns: repeat( - auto-fill, - minmax(var(--grid-card-min-width), 1fr) - ); - } - - .card[data-alert="nsfw-owner"] { - @apply border border-critical border-opacity-40 bg-black; - } - - .card[data-alert="nsfw-owner"]:hover { - @apply border-opacity-60 shadow-lg; - } - - .card img[data-thumbnail-state="blurred"], - .card img[data-visual-state="blurred"], - .channel-profile-container img[data-visual-state="blurred"] { - @apply transition duration-base ease-in-out; - filter: blur(var(--blur-thumbnail-blur)); - transform: scale(1.05); - } - - .channel-moderation-badge-anchor { - @apply flex flex-col gap-sm; - pointer-events: none; - width: 100%; - } - - .channel-moderation-badge-anchor:empty { - display: none; - } - - .channel-moderation-badge-anchor > [data-moderation-badge="true"] { - pointer-events: auto; - max-width: min(100%, var(--moderation-badge-max-inline)); - } - - #playerModal .video-modal__video { - position: relative; - } - - #playerModal - .video-modal__video[data-visual-state="blurred"] - .video-modal__media { - @apply transition duration-base ease-in-out; - filter: blur(var(--blur-thumbnail-blur)); - transform: scale(1.05); - } - - #playerModal .video-modal__moderation-bar { - width: 100%; - display: flex; - align-items: center; - justify-content: center; - padding-bottom: var(--space-md); - } - - #playerModal .video-modal__moderation-bar[hidden] { - display: none; - } - - #playerModal .video-modal__moderation-bar .moderation-badge { - width: 100%; - max-width: none; - flex-direction: row; - flex-wrap: wrap; - justify-content: space-between; - align-items: center; - gap: var(--space-sm); - @apply px-4 py-3; - } - - #playerModal .video-modal__moderation-bar .moderation-badge__label { - flex: 1 1 auto; - } - - #playerModal .video-modal__moderation-bar .moderation-badge__actions { - flex-shrink: 0; - } - - .card[data-owner-is-viewer="true"][data-url-health-state="offline"][data-stream-health-state="unhealthy"] { - @apply border border-critical border-opacity-40 bg-card-critical; - } - - .video-visibility-toggle { - @apply inline-flex items-center gap-1 rounded-full border border-border bg-panel px-1 py-1; - } - - .video-visibility-toggle__option { - @apply inline-flex items-center justify-center rounded-full border border-transparent bg-panel px-3 py-2 text-xs font-semibold uppercase text-muted transition duration-base ease-in-out; - } - - .video-visibility-toggle__option:not(.is-disabled):hover { - @apply bg-panel-hover text-text; - } - - .video-visibility-toggle__option[data-active="true"] { - @apply border border-accent border-opacity-60 text-text shadow-lg; - } - - .video-visibility-toggle__option.is-disabled { - @apply cursor-not-allowed opacity-45; - } - - .video-modal__container { - @apply flex h-full min-h-screen w-full flex-1 flex-col; - } - - .player-modal__container { - @apply video-modal__container gap-6; - } - - #playerModal { - --player-modal-vertical-padding: var(--space-md-plus); - --player-modal-primary-inline-padding-lg: clamp( - var(--space-sm), - 2.75vw, - var(--space-lg) - ); - } - - #playerModal > .bv-modal__panel { - max-width: none; - width: 100%; - min-height: 100%; - padding: 0; - border-radius: 0; - box-shadow: none; - border: none; - background-color: var(--color-surface); - display: flex; - flex-direction: column; - align-items: stretch; - justify-content: flex-start; - flex: 1 1 auto; - } - - .video-modal__panel { - position: relative; - z-index: var(--z-modal-content); - display: flex; - flex: 1 1 auto; - width: 100%; - min-height: 100%; - flex-direction: column; - overflow: visible; - padding: 0; - margin: 0; - border: none; - border-radius: 0; - background-color: var(--color-surface); - box-shadow: none; - } - - #playerModal .watch-container { - width: 100%; - max-width: var(--player-modal-inline-max, var(--layout-player-max-width)); - margin-inline: auto; - padding-inline: var( - --player-modal-inline-padding, - clamp(var(--space-md), 4vw, var(--space-xl-plus)) - ); - overflow: visible; - } - - #playerModal .watch-container.video-modal__similar { - padding-inline: clamp(var(--space-3xs), 0.6vw, var(--space-2xs)); - } - - #playerModal .video-modal__primary > .watch-container:first-child { - padding-block-start: var(--player-modal-vertical-padding); - } - - #playerModal .video-modal__primary > .watch-container:last-child { - padding-block-end: var(--player-modal-vertical-padding); - } - - #playerModal .video-modal__secondary > .watch-container:last-child { - padding-block-end: var(--player-modal-vertical-padding); - } - - #playerModal .modal-nav .watch-container { - max-width: none; - margin-inline: 0; - } - - #playerModal .modal-info-panel { - display: flex; - flex-direction: column; - gap: var(--space-md-plus); - } - - #playerModal h2#videoTitle { - margin: 0; - font-size: clamp( - var(--font-size-xl), - calc(var(--font-size-modal-title-base) + 0.5vw), - var(--font-size-xl-plus) - ); - font-weight: 600; - line-height: 1.3; - color: var(--color-text); - min-width: 0; - overflow-wrap: break-word; - word-break: break-word; - } - - @media (min-width: theme("screens.lg")) { - .video-modal__headline #videoTitle.video-modal__title { - flex: 1 1 0%; - min-width: 0; - max-width: calc(100% - var(--space-3xl) - var(--space-md)); - } - - .video-modal__headline .video-modal__status { - flex: 0 0 auto; - max-width: clamp(var(--space-xl), 25%, var(--space-3xl)); - margin-left: auto; - } - } - - #playerModal .modal-meta { - font-size: var(--font-size-sm); - line-height: 1.4; - color: var(--color-text-muted); - } - - #playerModal .modal-view-count { - font-weight: 600; - color: var(--color-text); - } - - #playerModal .channel-card { - display: flex; - align-items: center; - gap: var(--space-md); - padding: var(--space-md) var(--space-lg); - border-radius: var(--radius-xl); - border: var(--border-width-hairline) solid var(--color-border-translucent); - background-color: var(--color-surface); - box-shadow: var(--shadow-sm); - } - - #playerModal .player-modal__module { - display: flex; - flex-direction: column; - gap: clamp(var(--space-2xs), 1vw, var(--space-sm)); - width: 100%; - padding: clamp(var(--space-xs), 1vw, var(--space-sm)); - border-radius: var(--radius-xl); - border: var(--border-width-hairline) solid var(--color-border-translucent); - background-color: var(--color-surface); - box-shadow: var(--shadow-sm); - } - - #playerModal .player-modal__module-title { - margin: 0; - font-size: var(--font-size-lg); - font-weight: 600; - line-height: 1.3; - color: var(--color-text); - } - - #playerModal .player-modal__module-list { - display: flex; - flex-direction: column; - gap: var(--space-sm); - width: 100%; - margin: 0; - padding: 0; - list-style: none; - } - - #playerModal .video-modal__similar .player-modal__module { - gap: clamp(var(--space-3xs), 0.6vw, var(--space-xs)); - padding: clamp(var(--space-2xs), 0.6vw, var(--space-xs)); - border-width: 0; - box-shadow: none; - background-color: transparent; - } - - #playerModal .video-modal__similar .player-modal__module-title { - padding-inline: clamp(var(--space-3xs), 0.6vw, var(--space-2xs)); - } - - #playerModal .video-modal__similar .player-modal__module-list { - gap: clamp(var(--space-3xs), 0.6vw, var(--space-xs)); - padding-inline: clamp(var(--space-3xs), 0.6vw, var(--space-2xs)); - padding-bottom: clamp(var(--space-3xs), 0.6vw, var(--space-2xs)); - } - - #playerModal .player-modal__module-scroll { - max-height: clamp( - var(--player-modal-module-scroll-min-height), - calc( - 100vh - (var(--player-modal-vertical-padding) * 2) - var(--space-2xl) - ), - var(--player-modal-module-scroll-max-height) - ); - overflow-y: auto; - overflow-x: hidden; - overscroll-behavior: contain; - scrollbar-gutter: stable; - padding-inline-end: var(--space-xs); - } - - #playerModal .video-modal__similar .player-modal__module-scroll { - max-height: none; - overflow: visible; - padding-inline-end: 0; - scrollbar-gutter: auto; - } - - #playerModal .player-modal__module-scroll > li { - scroll-margin-block: var(--space-xs); - } - - @media (max-width: theme("screens.xs")) { - #playerModal .modal-nav .icon-button { - width: var(--space-xl); - height: var(--space-xl); - min-width: var(--space-xl); - min-height: var(--space-xl); - } - - #playerModal .watch-container { - padding-inline: var(--space-sm); - } - - #playerModal .channel-card { - gap: var(--space-sm); - padding: var(--space-sm) var(--space-md); - } - } - - #playerModal .channel-card__avatar { - flex-shrink: 0; - width: var(--avatar-size-lg); - height: var(--avatar-size-lg); - border-radius: var(--radius-full); - overflow: hidden; - background-color: var(--color-border-subtle); - } - - #playerModal .channel-card__avatar img { - display: block; - width: 100%; - height: 100%; - object-fit: cover; - } - - #playerModal .channel-card__name { - margin: 0; - font-size: var(--font-size-lg); - font-weight: 600; - color: var(--color-text); - } - - #playerModal .channel-card__npub { - margin: 0; - font-size: var(--font-size-sm); - color: var(--color-text-muted); - } - - #playerModal .description-panel { - padding: var(--space-md-plus) var(--space-lg); - border-radius: var(--radius-xl); - border: var(--border-width-hairline) solid var(--color-border-translucent); - background-color: var(--color-surface); - box-shadow: var(--shadow-sm); - } - - #playerModal .description-panel p { - margin: 0; - font-size: var(--font-size-sm); - line-height: 1.6; - color: var(--color-text); - } - - .player-modal__content { - @apply video-modal__panel; - } - - #playerModal .modal-nav { - @apply sticky top-0 z-overlay-nav translate-y-0 transition-transform duration-150; - background-color: var(--surface-overlay-panel); - background-image: linear-gradient( - 180deg, - color-mix(in srgb, var(--surface-overlay-panel) 94%, transparent) 0%, - color-mix(in srgb, var(--surface-overlay-panel) 88%, transparent) 100% - ); - border-bottom: var(--border-width-hairline) solid var(--border-overlay); - backdrop-filter: blur(var(--modal-nav-backdrop-blur)); - -webkit-backdrop-filter: blur(var(--modal-nav-backdrop-blur)); - } - - #playerModal .modal-nav__bar { - @apply flex w-full items-center justify-start gap-2; - padding-block: var(--space-xs); - padding-inline: clamp(var(--space-sm), 2.5vw, var(--space-lg)); - } - - #playerModal .modal-nav__rail { - @apply flex w-full items-center justify-between gap-2; - } - - #playerModal .modal-nav__slot { - @apply flex items-center gap-2; - } - - #playerModal .modal-nav__slot--context { - @apply justify-end; - margin-inline-start: auto; - min-inline-size: 0; - } - - #playerModal .modal-nav__context { - @apply text-xs font-semibold uppercase tracking-wide text-muted; - } - - #playerModal .modal-nav .modal-actions { - @apply flex items-center gap-2; - margin-left: 0; - align-self: stretch; - } - - #playerModal .modal-nav .icon-button { - @apply inline-flex items-center justify-center rounded-full text-muted transition duration-150 ease-out; - inline-size: var(--icon-size-md); - block-size: var(--icon-size-md); - background: var(--surface-overlay-panel-tint); - border: var(--border-width-hairline) solid var(--border-overlay); - color: var(--color-text-muted); - } - - #playerModal .modal-nav .icon-button:hover, - #playerModal .modal-nav .icon-button:focus-visible { - background: var(--surface-overlay-panel-soft); - border-color: var(--border-overlay-strong); - color: var(--color-text); - } - - .modal-nav--hidden { - @apply -translate-y-full; - } - - .modal-nav--visible { - @apply translate-y-0; - } - - .video-modal__layout { - --video-modal-secondary-size: clamp( - var(--video-modal-secondary-min), - 46vw, - var(--video-modal-secondary-max) - ); - --video-modal-gap: clamp(var(--space-2xs), 0.85vw, var(--space-sm)); - @apply grid; - gap: var(--video-modal-gap); - width: min(100%, var(--video-modal-layout-max)); - margin-inline: auto; - grid-template-columns: minmax(0, 1fr); - grid-template-areas: - "primary" - "secondary"; - align-items: start; - } - - @media (min-width: theme("screens.lg")) { - .video-modal__layout { - --video-modal-secondary-size: clamp( - var(--video-modal-secondary-min), - 30vw, - var(--video-modal-secondary-max) - ); - grid-template-columns: - minmax(0, 1fr) - minmax( - var(--video-modal-secondary-min), - var(--video-modal-secondary-size) - ); - grid-template-areas: "primary secondary"; - align-items: stretch; - grid-auto-flow: column; - } - - .video-modal__primary { - min-width: 0; - min-height: 0; - grid-area: primary; - } - - .video-modal__secondary { - min-width: var(--video-modal-secondary-min); - min-height: 0; - max-width: var(--video-modal-secondary-size); - grid-area: secondary; - height: 100%; - } - - #playerModal .video-modal__layout .watch-container { - max-width: none; - margin-inline: 0; - width: 100%; - } - } - - @media (min-width: theme("screens.xl")) { - .video-modal__layout { - --video-modal-secondary-size: clamp( - var(--video-modal-secondary-min), - 28vw, - var(--video-modal-secondary-max) - ); - } - } - - #playerModal .video-modal__layout { - display: grid; - } - - @media (min-width: theme("screens.lg")) { - #playerModal .video-modal__layout { - grid-template-columns: - minmax(0, 1fr) - minmax( - var(--video-modal-secondary-min), - var(--video-modal-secondary-size) - ); - grid-template-areas: "primary secondary"; - align-items: stretch; - grid-auto-flow: column; - } - - #playerModal .video-modal__primary { - grid-area: primary; - } - - #playerModal .video-modal__secondary { - grid-area: secondary; - } - } - - @media (min-width: theme("screens.lg")) { - #playerModal .video-modal__primary { - --player-modal-inline-padding: var( - --player-modal-primary-inline-padding-lg, - clamp(var(--space-sm), 2.75vw, var(--space-lg)) - ); - } - - #playerModal .modal-nav__bar { - --player-modal-inline-padding: var( - --player-modal-primary-inline-padding-lg, - clamp(var(--space-sm), 2.75vw, var(--space-lg)) - ); - } - } - - .revert-modal__layout { - @apply grid gap-6; - } - - @media (min-width: theme("screens.lg")) { - .revert-modal__layout { - grid-template-columns: - minmax( - var(--revert-modal-sidebar-min), - var(--revert-modal-sidebar-width) - ) - minmax(0, 1fr); - } - } - - .video-modal__primary { - @apply flex flex-col gap-6; - min-width: 0; - min-height: 0; - } - - .video-modal__secondary { - @apply flex flex-col gap-4; - min-width: 0; - min-height: 0; - width: 100%; - align-self: stretch; - } - - .video-modal__similar { - display: none; - } - - @media (min-width: theme("screens.lg")) { - .video-modal__similar { - @apply flex flex-col gap-6; - align-self: stretch; - flex: 1 1 auto; - min-height: 0; - } - } - - @media (min-width: theme("screens.lg")) { - #playerModal .video-modal__similar .player-modal__module { - height: 100%; - display: flex; - flex: 1 1 auto; - min-height: 0; - flex-direction: column; - } - - #playerModal .video-modal__similar .player-modal__module-list { - flex: 1 1 auto; - min-height: 0; - } - - #playerModal .video-modal__similar .player-modal__module-scroll { - height: 100%; - max-height: none; - min-height: 0; - } - } - - #playerModal .player-modal__module-item { - width: 100%; - } - - #playerModal - .player-modal__module-item - > .card:not(.player-modal__similar-card) { - @apply flex w-full flex-row flex-nowrap items-stretch gap-md; - } - - #playerModal - .player-modal__module-item - > .card:not(.player-modal__similar-card) - .video-card__media { - width: clamp( - var(--video-modal-item-media-min), - 18vw, - var(--video-modal-item-media-max) - ); - @apply shrink-0 overflow-hidden rounded-lg; - } - - #playerModal - .player-modal__module-item - > .card:not(.player-modal__similar-card) - .video-card__content { - padding: clamp(var(--space-sm), 1.25vw, var(--space-md)); - @apply flex min-w-0 flex-1 flex-col gap-sm; - } - - #playerModal - .player-modal__module-item - > .card:not(.player-modal__similar-card) - .video-card__meta { - @apply flex flex-wrap items-center gap-2 text-xs text-muted-strong; - } - - #playerModal .video-modal__similar .player-modal__module-list { - gap: clamp(var(--space-2xs), 0.85vw, var(--space-sm)); - } - - .player-modal__similar-card { - @apply focus-ring relative flex w-full min-w-0 items-start gap-3 rounded-xl p-2 transition duration-base ease-out; - } - - .player-modal__similar-card:hover, - .player-modal__similar-card:focus-within { - background-color: var(--surface-panel-hover); - } - - .player-modal__similar-card-media { - @apply relative block shrink-0 overflow-hidden rounded-lg bg-surface-alt; - width: var(--similar-card-media-width); - aspect-ratio: 16 / 9; - background-image: var(--similar-card-thumb-url, none); - background-position: center; - background-size: cover; - } - - @media (max-width: theme("screens.sm")) { - .player-modal__similar-card-media { - width: var(--similar-card-media-width-sm); - } - } - - .player-modal__similar-card-media img { - display: block; - width: 100%; - height: 100%; - object-fit: cover; - border-radius: inherit; - } - - .player-modal__similar-card-content { - @apply flex min-w-0 flex-1 flex-col gap-1; - } - - .player-modal__similar-card-title { - @apply text-sm font-semibold leading-snug text-text transition-colors duration-base ease-out; - min-width: 0; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - overflow: hidden; - } - - .player-modal__similar-card:hover .player-modal__similar-card-title, - .player-modal__similar-card-title:focus-visible { - color: var(--color-accent-strong); - } - - .player-modal__similar-card-author { - @apply flex min-w-0 items-center; - } - - .player-modal__similar-card-author-meta { - @apply flex min-w-0 flex-col; - } - - .player-modal__similar-card-author-name { - @apply truncate text-xs font-medium text-muted transition-colors duration-base ease-out; - } - - .player-modal__similar-card:hover .player-modal__similar-card-author-name { - @apply text-text-strong; - } - - /* Hidden for now to match cleaner modern look, but kept in DOM if needed */ - .player-modal__similar-card-author-npub { - display: none; - } - - .player-modal__similar-card-meta { - @apply flex flex-wrap items-center gap-1 text-2xs text-muted-strong; - min-width: 0; - } - - .player-modal__similar-card-timestamp { - white-space: nowrap; - } - - .player-modal__similar-card-separator { - @apply text-muted opacity-60; - } - - .player-modal__similar-card-views { - white-space: nowrap; - } - - .video-modal__stage { - position: relative; - isolation: isolate; - overflow: visible; - --video-modal-ambient-bleed: clamp( - var(--space-2xl), - 12vw, - var(--space-5xl) - ); - --video-modal-ambient-scale: 1.38; - --video-modal-ambient-blur: clamp( - var(--video-modal-ambient-blur-min), - 20vw, - var(--video-modal-ambient-blur-max) - ); - --video-modal-ambient-opacity: 1; - } - - .video-modal__video { - position: relative; - z-index: 1; - border-radius: var(--radius-xl); - padding-block: clamp(var(--space-xs), 2.5vw, var(--space-md-plus)); - background-color: transparent; - box-shadow: 0 0 0 var(--border-width-hairline) - color-mix(in srgb, var(--color-border-strong) 8%, transparent) inset; - overflow: visible; - } - - .video-modal__ambient { - position: absolute; - inset: calc(var(--video-modal-ambient-bleed) * -1); - border-radius: calc(var(--radius-3xl) + var(--video-modal-ambient-bleed)); - pointer-events: none; - z-index: 0; - display: block; - overflow: visible; - } - - .video-modal__ambient::before { - content: ""; - position: absolute; - inset: 0; - border-radius: inherit; - background: radial-gradient( - circle at 50% 50%, - color-mix(in srgb, var(--color-overlay-strong) 18%, transparent) 0%, - color-mix(in srgb, var(--color-overlay) 34%, transparent) 62%, - transparent 100% - ); - opacity: 0.9; - mix-blend-mode: screen; - pointer-events: none; - } - - .video-modal__ambient-canvas { - position: relative; - width: 100%; - height: 100%; - display: block; - transform: scale(var(--video-modal-ambient-scale)); - filter: blur(var(--video-modal-ambient-blur)) saturate(2) brightness(1.24); - opacity: var(--video-modal-ambient-opacity); - } - - @media (min-width: theme("screens.lg")) { - .video-modal__video { - position: sticky; - top: calc(var(--space-2xl) + var(--space-3xl)); - z-index: 1; - } - - .video-modal__status { - flex-basis: clamp(var(--space-xl), 25%, var(--space-3xl)); - max-width: clamp(var(--space-xl), 25%, var(--space-3xl)); - } - - .video-modal__details { - position: relative; - z-index: 2; - margin-top: var(--space-lg); - } - } - - #playerModal .video-modal__video video { - position: relative; - z-index: 1; - background-color: var(--color-black); - border-radius: var(--radius-lg); - box-shadow: var(--shadow-video-modal); - max-height: min(80vh, calc(100vw * 9 / 16)); - object-fit: contain; - } - - .video-modal__media { - display: block; - aspect-ratio: 16 / 9; - width: 100%; - object-fit: contain; - } - - .video-modal__details { - @apply flex flex-col gap-6; - } - - .video-modal__meta { - @apply border-b border-border border-opacity-20 pb-4; - } - - /* Video modal tag strip */ - .video-modal__tags { - @apply -mx-1 flex gap-2 px-1; - } - - .video-modal__similar .video-modal__tags { - margin-bottom: clamp(var(--space-xs), 0.9vw, var(--space-md)); - } - - .video-modal__tags[hidden] { - display: none; - } - - .video-modal__tags[data-fade] { - position: relative; - } - - .video-modal__tags[data-fade]::before, - .video-modal__tags[data-fade]::after { - content: ""; - position: sticky; - top: 0; - bottom: 0; - width: var(--space-lg); - pointer-events: none; - z-index: 1; - } - - .video-modal__tags[data-fade]::before { - left: 0; - background: linear-gradient( - to right, - var(--surface-overlay-muted), - transparent - ); - } - - .video-modal__tags[data-fade]::after { - right: 0; - background: linear-gradient( - to left, - var(--surface-overlay-muted), - transparent - ); - } - - .video-tag-strip { - display: flex; - flex-wrap: nowrap; - align-items: center; - gap: var(--space-xs); - overflow: hidden; - } - - .video-tag-pill { - @apply inline-flex items-center gap-2 rounded-full border border-status-neutral-border bg-status-neutral-surface px-3 py-1 text-2xs font-medium text-status-neutral-on; - @apply relative justify-center whitespace-nowrap transition; - @apply min-h-[calc(var(--space-sm)+var(--space-xs))]; - @apply me-1; - } - - .video-tag-pill__label { - @apply transition-opacity duration-150 ease-in-out; - opacity: 1; - } - - .video-tag-pill__icon { - @apply absolute inset-0 flex items-center justify-center transition duration-150 ease-in-out; - opacity: 0; - transform: scale(0.8); - } - - .video-tag-pill__icon svg { - @apply h-3 w-3; - } - - .video-tag-pill:hover .video-tag-pill__label, - .video-tag-pill:focus-visible .video-tag-pill__label { - opacity: 0; - } - - .video-tag-pill:hover .video-tag-pill__icon, - .video-tag-pill:focus-visible .video-tag-pill__icon { - opacity: 1; - transform: scale(1); - } - - .video-modal__actions-row { - @apply flex w-full flex-wrap items-start gap-x-3 gap-y-3 sm:gap-x-4; - } - - .video-modal__reactions, - .video-modal__actions-group { - flex: 1 1 var(--menu-min-width); - min-inline-size: 0; - } - - .video-modal__reactions { - @apply flex basis-full flex-wrap items-start gap-3 sm:gap-4 md:basis-auto; - } - - .video-modal__reaction-buttons { - @apply inline-flex flex-wrap items-center gap-2; - } - - .video-modal__reaction-button { - --video-modal-reaction-active-bg: color-mix( - in srgb, - var(--color-accent) 22%, - var(--surface-overlay-panel) - ); - --video-modal-reaction-active-border: color-mix( - in srgb, - var(--color-accent) 38%, - var(--border-overlay) - ); - } - - .video-modal__reaction-button[aria-pressed="true"] { - color: var(--color-accent-strong); - background-color: var(--video-modal-reaction-active-bg); - border-color: var(--video-modal-reaction-active-border); - } - - .video-modal__reaction-button[aria-pressed="true"] - .video-modal__reaction-count { - color: var(--color-accent-strong); - } - - .video-modal__reaction-count { - @apply text-sm font-semibold text-muted; - } - - .video-modal__reaction-meter { - display: flex; - align-items: center; - gap: var(--space-sm); - flex-wrap: wrap; - flex: 1 1 var(--menu-min-width); - max-inline-size: 100%; - } - - .video-modal__reaction-meter-label { - @apply text-sm font-medium text-muted; - min-inline-size: var(--video-modal-reaction-label-min-inline); - } - - .video-modal__reaction-meter-track { - position: relative; - flex: 1 1 auto; - inline-size: 100%; - block-size: var(--space-xs); - border-radius: var(--radius-full); - background-color: var(--color-border-muted); - overflow: hidden; - } - - .video-modal__reaction-meter-fill { - position: absolute; - inset-inline-start: 0; - inset-block-start: 0; - block-size: 100%; - max-inline-size: 100%; - inline-size: var(--video-modal-reaction-fill, 0%); - width: var(--video-modal-reaction-fill, 0%); - background-image: linear-gradient( - 90deg, - var(--color-accent) 0%, - var(--color-accent-strong) 100% - ); - transition: inline-size var(--motion-duration-base) var(--motion-ease-out); - } - - .video-modal__reaction-meter-fill--empty { - inline-size: 0%; - width: 0%; - } - - .video-modal__actions-group { - @apply flex basis-full flex-wrap items-start justify-start gap-3 md:basis-auto md:justify-end; - } - - @media (min-width: theme("screens.md")) { - .video-modal__actions-group { - margin-inline-start: auto; - } - } - - .video-modal__action-button { - @apply inline-flex h-11 items-center justify-center gap-2 rounded-full text-sm font-semibold transition duration-base ease-out; - min-width: var(--video-modal-action-min-width); - padding-inline: var(--space-md); - border-width: var(--border-width-hairline); - border-style: solid; - } - - .video-modal__action-label { - @apply hidden sm:inline; - } - - .video-modal__action-icon { - @apply h-5 w-5; - } - - .video-modal__channel, - .video-modal__description, - .video-modal__stats { - @apply rounded-2xl border border-border border-opacity-20 bg-surface px-5 py-4 shadow-sm; - } - - .video-modal__description-body { - overflow-wrap: anywhere; - word-break: break-word; - } - - .video-modal__description-body a { - color: var(--color-accent-strong); - text-decoration: underline; - text-decoration-color: currentColor; - word-break: break-word; - } - - .video-modal__description-body a:hover, - .video-modal__description-body a:focus-visible { - color: var(--color-accent-pressed); - } - - .video-modal__comments { - @apply rounded-2xl border border-border border-opacity-20 bg-surface px-5 py-5 shadow-sm; - display: flex; - flex-direction: column; - gap: var(--space-lg); - } - - .comment-thread { - display: flex; - flex-direction: column; - gap: var(--space-lg); - } - - .comment-thread__header { - display: flex; - align-items: flex-start; - justify-content: space-between; - gap: var(--space-sm); - } - - .comment-thread__title { - @apply text-lg font-semibold text-text; - } - - .comment-thread__count { - @apply text-sm text-muted; - margin: 0; - } - - .comment-thread__empty { - @apply text-sm text-muted; - margin: 0; - padding: var(--space-md); - border-radius: var(--radius-lg); - border: var(--border-width-hairline) dashed - color-mix(in srgb, var(--border-default) 40%, transparent); - background-color: var(--surface-alt); - } - - .comment-thread__list { - display: flex; - flex-direction: column; - gap: var(--space-md); - margin: 0; - padding: 0; - list-style: none; - } - - .comment-thread__item { - display: grid; - grid-template-columns: auto 1fr; - gap: var(--space-md); - padding-block: var(--space-sm); - border-bottom: var(--border-width-hairline) solid var(--border-subtle); - } - - .comment-thread__item:last-child { - border-bottom: none; - padding-bottom: 0; - } - - .comment-thread__avatar { - inline-size: var(--comment-avatar-size); - block-size: var(--comment-avatar-size); - } - - .comment-thread__avatar img { - @apply rounded-full object-cover; - inline-size: 100%; - block-size: 100%; - } - - .comment-thread__content { - display: flex; - flex-direction: column; - gap: var(--space-xs); - min-inline-size: 0; - } - - .comment-thread__meta { - @apply text-xs text-muted; - display: flex; - flex-wrap: wrap; - align-items: center; - gap: var(--space-xs); - } - - .comment-thread__author { - font-weight: 600; - color: var(--text-primary); - } - - .comment-thread__timestamp { - color: var(--text-muted); - } - - .comment-thread__body { - color: var(--text-primary); - line-height: 1.6; - word-break: break-word; - } - - .comment-thread__actions { - @apply text-xs; - display: flex; - flex-wrap: wrap; - align-items: center; - gap: var(--space-sm); - } - - .comment-thread__actions button { - @apply focus-ring inline-flex items-center gap-1 rounded-full border border-border-subtle bg-surface px-3 py-1 text-xs font-semibold text-muted transition duration-base ease-out; - } - - .comment-thread__actions button:hover, - .comment-thread__actions button:focus-visible { - color: var(--text-primary); - border-color: var(--border-default); - } - - .comment-thread__replies { - display: flex; - flex-direction: column; - gap: var(--space-md); - margin: 0; - margin-inline-start: calc(var(--space-lg) + var(--space-sm)); - padding-inline-start: var(--space-md); - padding-block-start: var(--space-md); - border-inline-start: var(--border-width-hairline) solid var(--border-subtle); - list-style: none; - } - - .comment-thread__load-more { - @apply inline-flex items-center justify-center gap-2 rounded-full border border-border-subtle bg-surface px-4 py-2 text-sm font-semibold text-text transition duration-base ease-out; - } - - .comment-thread__load-more:hover, - .comment-thread__load-more:focus-visible { - border-color: var(--border-default); - color: var(--text-primary); - background-color: color-mix(in srgb, var(--surface-alt) 70%, transparent); - } - - .comment-thread__disabled { - @apply text-sm text-muted; - border-radius: var(--radius-lg); - border: var(--border-width-hairline) dashed - color-mix(in srgb, var(--border-default) 32%, transparent); - background-color: var(--surface-alt); - padding: var(--space-md); - } - - .comment-composer { - display: flex; - flex-direction: column; - gap: var(--space-md); - border-top: var(--border-width-hairline) solid var(--border-subtle); - padding-top: var(--space-lg); - } - - .comment-composer__field { - display: flex; - flex-direction: column; - gap: var(--space-2xs); - } - - .comment-composer__label { - @apply text-sm font-semibold text-text; - } - - .comment-composer__textarea { - min-block-size: var(--comment-composer-min-height); - } - - .comment-composer__footer { - display: flex; - flex-direction: column; - gap: var(--space-sm); - } - - .comment-composer__hint { - @apply text-xs text-muted; - margin: 0; - } - - .comment-composer__actions { - display: flex; - flex-wrap: wrap; - align-items: center; - justify-content: flex-end; - gap: var(--space-sm); - } - - .comment-composer__char-count { - @apply text-xs font-medium text-muted; - } - - .comment-composer__submit { - @apply focus-ring; - } - - .comment-composer__status { - margin: 0; - } - - @media (min-width: theme("screens.sm")) { - .comment-composer__footer { - flex-direction: row; - align-items: center; - justify-content: space-between; - } - } - - .video-modal__progress { - @apply h-2 w-full overflow-hidden rounded-full bg-border-subtle; - } - - .video-modal__stat-metrics { - @apply flex flex-wrap items-center justify-between gap-3 text-sm text-muted; - } - - .profile-modal { - display: flex; - flex-direction: column; - inline-size: 100%; - block-size: 100%; - min-block-size: 100%; - max-block-size: none; - overflow: hidden; - --modal-sheet-inline-max: var(--profile-modal-inline-max); - --profile-modal-scale: 0.9; - --profile-modal-gap: calc( - (var(--space-md) - var(--space-3xs)) * var(--profile-modal-scale) - ); - --profile-modal-padding-inline: calc( - (var(--space-lg) - var(--space-md)) * var(--profile-modal-scale) - ); - --profile-modal-padding-block-start: calc( - (var(--space-md) - var(--space-2xs)) * var(--profile-modal-scale) - ); - --profile-modal-padding-block-end: calc( - (var(--space-lg) - var(--space-sm)) * var(--profile-modal-scale) - ); - --profile-modal-nav-gap: calc(var(--space-xs) * var(--profile-modal-scale)); - } - - .profile-modal__content { - display: flex; - flex: 1 1 auto; - flex-direction: column; - block-size: 100%; - min-block-size: 0; - transform: scale(var(--profile-modal-scale)); - transform-origin: top center; - } - - .profile-modal__active-profile { - @apply focus-ring flex flex-wrap items-center gap-4 p-4; - } - - .profile-modal__active-details { - display: flex; - flex: 1 1 var(--profile-modal-active-min-width); - flex-direction: column; - gap: var(--space-2xs); - min-inline-size: 0; - } - - .profile-modal__active-meta { - display: flex; - flex-wrap: wrap; - align-items: center; - gap: var(--space-xs); - } - - .profile-modal__channel-link { - margin-inline-start: auto; - align-self: center; - white-space: nowrap; - } - - .profile-hashtag-list { - display: flex; - flex-wrap: wrap; - gap: var(--space-xs); - margin: 0; - padding: 0; - list-style: none; - } - - .profile-hashtag-item { - display: inline-flex; - align-items: center; - gap: var(--space-3xs); - padding-block: var(--space-3xs); - padding-inline: var(--space-sm); - border-radius: var(--radius-full); - border: var(--border-width-hairline) solid var(--color-border-translucent); - background-color: var(--color-panel); - color: var(--color-text); - font-size: var(--font-size-sm); - font-weight: var(--font-weight-medium); - line-height: var(--font-lineheight-tight); - } - - .profile-hashtag-remove { - display: inline-flex; - align-items: center; - justify-content: center; - inline-size: var(--space-md); - block-size: var(--space-md); - border-radius: var(--radius-full); - color: var(--color-text-muted); - background: transparent; - border: none; - padding: 0; - cursor: pointer; - } - - .profile-hashtag-remove:hover { - color: var(--color-text); - } - - .profile-modal__remove-button { - @apply border-2; - } - - .profile-modal__remove-button:focus-visible { - --tw-ring-color: var(--color-critical-strong); - } - - .profile-modal__add-profile { - --tw-ring-color: var(--color-ring-alert); - @apply focus-ring relative flex w-full items-center justify-start gap-4 rounded-xl px-5 py-4 text-left text-text transition duration-base ease-in-out; - border: var(--outline-thick-width) solid var(--color-ring-alert); - background-color: var(--surface-panel-hover); - } - - .profile-modal__add-profile:hover { - background-color: color-mix( - in srgb, - var(--surface-panel-hover) 88%, - var(--color-ring-alert) 12% - ); - } - - .profile-modal__add-profile:focus-visible { - background-color: color-mix( - in srgb, - var(--surface-panel-hover) 80%, - var(--color-ring-alert) 20% - ); - } - - .profile-modal__add-profile-icon { - @apply flex h-10 w-10 items-center justify-center rounded-full; - background-color: color-mix( - in srgb, - var(--color-ring-alert) 18%, - var(--surface-panel) - ); - color: var(--color-ring-alert); - } - - .profile-modal__body { - display: flex; - flex: 1 1 auto; - flex-direction: column; - gap: var(--profile-modal-gap); - inline-size: 100%; - min-block-size: 0; - overflow: hidden; - overflow-x: hidden; - padding-block-start: var(--profile-modal-padding-block-start); - padding-block-end: var(--profile-modal-padding-block-end); - padding-inline: var(--profile-modal-padding-inline); - } - - .profile-modal__layout { - display: flex; - flex: 1 1 auto; - flex-direction: column; - gap: var(--profile-modal-gap); - inline-size: 100%; - min-block-size: 0; - } - - .profile-modal__header { - align-items: center; - } - - .profile-modal__header-title { - display: flex; - align-items: center; - gap: var(--space-sm); - } - - .profile-modal__menu { - display: flex; - flex-direction: column; - gap: var(--space-sm); - } - - .profile-modal__pane-wrapper { - display: flex; - flex: 1 1 auto; - flex-direction: column; - min-block-size: 0; - } - - .profile-modal__nav { - display: flex; - flex-wrap: wrap; - gap: var(--profile-modal-nav-gap); - align-self: flex-start; - overflow-x: hidden; - } - - .profile-nav__unread-dot { - position: absolute; - top: var(--space-3xs); - right: var(--space-3xs); - width: var(--space-sm); - height: var(--space-sm); - border-radius: var(--radius-full); - border: var(--border-width-hairline) solid var(--surface-panel); - background-color: var(--status-danger); - display: none; - pointer-events: none; - } - - .profile-nav__unread-dot.is-visible { - display: block; - } - - .profile-modal__panes { - display: flex; - flex: 1 1 auto; - flex-direction: column; - block-size: 100%; - min-block-size: 0; - overflow-y: auto; - overflow-x: hidden; - padding-inline-end: var(--profile-modal-scrollbar-offset); - scrollbar-gutter: stable; - } - - .profile-pane { - display: flex; - flex-direction: column; - min-block-size: auto; - overflow-x: hidden; - } - - .profile-pane.hidden { - display: none !important; - } - - @supports not (scrollbar-gutter: stable) { - .profile-modal__panes { - padding-inline-end: calc( - var(--profile-modal-scrollbar-offset) + var(--space-2xs) - ); - } - } - - @media (max-width: calc(theme("screens.lg") - var(--breakpoint-edge-offset))) { - .profile-modal__layout[data-mobile-view="menu"] - .profile-modal__pane-wrapper { - display: none; - } - - .profile-modal__layout[data-mobile-view="pane"] .profile-modal__menu { - display: none; - } - } - - @media (min-width: theme("screens.lg")) { - .profile-modal { - max-block-size: var(--modal-shell-max-height); - } - - .profile-modal__body { - gap: calc(var(--profile-modal-gap) + var(--space-2xs)); - padding-inline: calc( - var(--profile-modal-padding-inline) + var(--space-xs) - ); - } - - .profile-modal__layout { - display: grid; - align-items: stretch; - block-size: 100%; - gap: calc(var(--profile-modal-gap) + var(--space-2xs)); - grid-template-columns: - minmax( - var(--profile-modal-nav-min-width), - var(--profile-modal-nav-max-width) - ) - minmax(0, 1fr); - grid-auto-rows: minmax(0, 1fr); - } - - .profile-modal__nav { - flex-direction: column; - flex-wrap: nowrap; - gap: var(--profile-modal-nav-gap); - justify-self: start; - inline-size: var(--profile-modal-nav-max-width); - min-inline-size: var(--profile-modal-nav-min-width); - } - - .profile-modal__pane-wrapper { - block-size: 100%; - } - } - - /* Torrent helper classes */ - .beacon-hidden-download, - [data-beacon-hidden-download], - .torrent-download-anchor { - display: none !important; - } - - .beacon-clipboard-offscreen, - [data-beacon-clipboard-state="offscreen"], - [data-beacon-clipboard="offscreen"], - .torrent-clipboard-textarea { - position: fixed; - top: 0; - left: var(--offscreen-offset); - opacity: 0; - width: 0; - height: 0; - pointer-events: none; - } - - .beacon-toast-motion, - .torrent-toast-motion { - transition-property: opacity, transform; - will-change: opacity, transform; - opacity: 0; - transform: translateY(var(--toast-translate)); - } - - .beacon-toast-motion[data-beacon-motion="enter"], - .beacon-toast-motion[data-beacon-motion="show"], - .torrent-toast-motion[data-beacon-motion="enter"], - .torrent-toast-motion[data-beacon-motion="show"] { - opacity: 1; - transform: translateY(0); - } - - .beacon-toast-motion[data-beacon-motion="exit"], - .torrent-toast-motion[data-beacon-motion="exit"] { - opacity: 0; - transform: translateY(var(--toast-translate)); - } - - .torrent-toast { - @apply pointer-events-auto w-full max-w-md rounded-lg px-4 py-3 text-sm font-medium tracking-tight shadow-lg ring-1 ring-inset; - } - - .torrent-toast--info { - @apply border border-border-translucent bg-surface text-text; - } - - .torrent-toast--success { - @apply border border-info border-opacity-60 bg-info text-white; - } - - .torrent-toast--error { - @apply border border-critical border-opacity-60 bg-critical text-white; - } - - .torrent-toast--warn { - @apply border border-warning-strong border-opacity-70 bg-warning-strong text-warning-strong; - } - - .profile-switcher { - @apply card flex flex-col gap-lg; - } - - .profile-switcher__badge { - @apply badge self-start; - } - - .profile-switcher__header { - @apply flex flex-col gap-sm sm:flex-row sm:items-center sm:justify-between; - } - - .profile-switcher__intro { - @apply flex flex-col gap-2xs; - } - - .profile-switcher__title { - @apply text-base font-semibold text-text; - } - - .profile-switcher__subtitle { - @apply text-sm text-muted; - } - - .profile-switcher__list { - @apply flex flex-col gap-md; - } - - .profile-switcher__helper { - @apply text-xs text-muted; - } - - .profile-card { - @apply card relative flex cursor-pointer flex-col gap-md p-4 text-text transition duration-base ease-out hover:shadow-lg focus-visible:border-accent focus-visible:border-opacity-60 focus-visible:shadow-lg sm:flex-row sm:items-center; - } - - .profile-card--active { - @apply border-accent border-opacity-60 shadow-lg; - } - - .profile-card__avatar { - @apply flex h-12 w-12 flex-none items-center justify-center overflow-hidden rounded-full border border-border border-opacity-30 bg-surface; - } - - .profile-card__avatar img { - @apply h-full w-full rounded-full object-cover; - } - - .profile-card--active .profile-card__avatar { - @apply border-accent border-opacity-70 ring-2; - --tw-ring-color: color-mix(in srgb, var(--color-accent) 32%, transparent); - --tw-ring-opacity: 1; - } - - .profile-card__meta { - @apply flex min-w-0 flex-1 flex-col gap-sm; - } - - .profile-card__topline { - @apply flex w-full flex-wrap items-center gap-sm sm:justify-between; - } - - .profile-card__label { - @apply text-xs font-semibold uppercase tracking-wide text-accent; - } - - .profile-card__name { - @apply truncate text-sm font-semibold text-text; - } - - .profile-card__npub { - @apply break-all font-mono text-xs text-muted; - } - - .profile-card__action, - .profile-nav-button { - @apply btn-ghost ml-auto flex-shrink-0 px-3 py-1 text-xs; - } - - .profile-switcher__add { - --profile-switcher-add-hover-bg: color-mix( - in srgb, - var(--color-accent) 14%, - transparent - ); - - @apply card flex cursor-pointer items-center gap-4 border border-dashed border-border border-opacity-40 bg-surface text-left text-muted transition duration-base ease-out hover:border-accent hover:border-opacity-60 hover:text-text focus-visible:border-accent focus-visible:border-opacity-60; - } - - .profile-switcher__add:hover, - .profile-switcher__add:focus-visible { - background-color: var(--profile-switcher-add-hover-bg); - } - - .profile-switcher__addAvatar { - @apply flex h-12 w-12 flex-none items-center justify-center rounded-full border border-dashed border-current bg-surface; - } - - .profile-switcher__addAvatar svg { - @apply h-5 w-5; - } - - .profile-switcher__addCopy { - @apply flex flex-col gap-1 text-left; - } - - .profile-switcher__addTitle { - @apply text-sm font-semibold text-inherit; - } - - .profile-switcher__addHint { - @apply text-xs text-muted; - } - - .watch-history-grid { - @apply flex w-full flex-col gap-5 py-6 sm:gap-6; - } - - .watch-history-grid.watch-history-grid--modal { - @apply gap-5 py-0 sm:gap-6; - } - - .watch-history-card { - @apply card flex flex-wrap items-stretch gap-5 p-4 transition duration-base ease-out hover:-translate-y-0.5 hover:shadow-lg sm:gap-6 sm:p-5; - } - - .watch-history-card--private { - @apply border-info border-opacity-60; - } - - .watch-history-card__primary { - @apply flex min-w-0 flex-1 flex-col items-stretch gap-4 sm:flex-row; - } - - .watch-history-card__thumbnail { - @apply block w-56 max-w-full flex-none text-text no-underline; - } - - .watch-history-card__thumbnailInner { - @apply aspect-video w-full overflow-hidden rounded-lg bg-surface; - } - - .watch-history-card__thumbnailInner img { - @apply h-full w-full object-cover; - } - - .watch-history-card [data-thumbnail-state="blurred"] img, - .watch-history-card [data-visual-state="blurred"] img { - @apply transition duration-base ease-in-out; - filter: blur(var(--blur-thumbnail-blur)); - transform: scale(1.05); - } - - .watch-history-card__details { - @apply flex min-w-0 flex-1 flex-col justify-center gap-sm; - } - - .watch-history-card__title { - @apply cursor-pointer text-lg font-semibold leading-snug text-text transition duration-base ease-out; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - overflow: hidden; - } - - .watch-history-card__title:hover, - .watch-history-card__title:focus { - @apply text-accent; - } - - .watch-history-card__created { - @apply text-sm text-muted; - } - - .watch-history-card__meta { - @apply flex min-w-0 flex-col justify-between gap-4 sm:min-w-56 sm:flex-none sm:basis-64; - } - - .watch-history-card__watched { - @apply text-sm text-border-subtle; - } - - .watch-history-card__creator { - @apply flex items-center gap-3; - } - - .watch-history-card__creatorAvatar { - @apply flex h-10 w-10 items-center justify-center overflow-hidden rounded-full bg-panel transition duration-base ease-out hover:ring-2 hover:ring-opacity-50 focus-visible:ring-2 focus-visible:ring-opacity-50; - } - - .watch-history-card__creatorAvatar:hover, - .watch-history-card__creatorAvatar:focus-visible { - --tw-ring-color: color-mix(in srgb, var(--color-accent) 38%, transparent); - } - - .watch-history-card__creatorAvatar img { - @apply h-full w-full rounded-full object-cover; - } - - .watch-history-card__creatorName { - @apply cursor-pointer bg-transparent p-0 text-left text-base font-medium text-muted transition duration-base ease-out hover:text-accent focus-visible:text-accent; - } - - .watch-history-card__actions { - @apply flex flex-wrap items-center gap-3; - } - - .watch-history-card__action { - @apply inline-flex items-center justify-center gap-2 rounded-full border border-transparent bg-panel px-4 py-2 text-sm font-medium text-muted transition duration-base ease-out hover:border-border hover:bg-surface-alt hover:text-text focus-visible:border-border focus-visible:bg-surface-alt focus-visible:text-text; - } - - .watch-history-card__action--primary { - @apply bg-accent-strong text-white hover:bg-accent-pressed focus-visible:bg-accent-pressed; - } - - .watch-history-card__action--danger { - @apply bg-critical text-white hover:bg-critical-strong focus-visible:bg-critical-strong; - } - - .watch-history-card__moderation { - @apply mt-sm flex flex-wrap items-center gap-sm; - } - - .watch-history-card__hidden { - @apply mt-md rounded-lg border border-dashed border-border bg-overlay-panel-soft text-sm text-text; - } - - .watch-history-card__hidden .moderation-badge { - @apply self-start; - } - - /* Ensure the video modal avatar respects the blur state */ - #playerModal .channel-card__avatar img[data-visual-state="blurred"] { - @apply transition duration-base ease-in-out; - filter: blur(var(--blur-thumbnail-blur)); - transform: scale(1.05); - } - - /* Override moderation badge text color inside the modal bar for better contrast in all themes */ - #playerModal .video-modal__moderation-bar .moderation-badge { - --text-status-neutral-on: var(--color-text); - --text-status-warning-on: var(--color-warning-on); - } - - #playerModal - .video-modal__moderation-bar - .moderation-badge[data-variant="neutral"] { - color: var(--color-text); - } -} - -@layer components { - .container { - max-width: var(--layout-docs-max-width); - margin: 0 auto; - padding: var(--space-md); - } - - .docs-popover-scenarios__scroll-spacer { - height: var(--docs-popover-scroll-height); - } - - .qr-code__table { - border: 0; - border-collapse: collapse; - margin: var(--qr-code-table-margin, 0); - } - - .qr-code__cell { - border: 0; - border-collapse: collapse; - padding: 0; - margin: 0; - width: var(--qr-code-cell-width); - height: var(--qr-code-cell-height); - background-color: var(--qr-code-color-light); - } - - .qr-code__cell--dark { - background-color: var(--qr-code-color-dark); - } - - .qr-code__container[data-qr-code-mode="image"] .qr-code__canvas { - display: none; - } - - .qr-code__container[data-qr-code-mode="image"] .qr-code__image { - display: block; - } - - .qr-code__container[data-qr-code-mode="canvas"] .qr-code__canvas { - display: block; - } - - .qr-code__container[data-qr-code-mode="canvas"] .qr-code__image { - display: none; - } - - .fade-in { - opacity: 0; - animation: interface-fade-in 280ms ease-out forwards; - animation-delay: var(--fade-in-delay, 0ms); - } - - .fade-in-delay-100 { - --fade-in-delay: 100ms; - } - - .fade-in-delay-200 { - --fade-in-delay: 200ms; - } - - .fade-in-delay-300 { - --fade-in-delay: 300ms; - } - - .fade-in-delay-400 { - --fade-in-delay: 400ms; - } - - .card[data-motion="enter"] { - opacity: 0; - animation: card-motion-enter 220ms ease-out forwards; - } - - .icon-button { - display: inline-flex; - align-items: center; - justify-content: center; - width: var(--icon-size-lg); - height: var(--icon-size-lg); - min-width: var(--icon-size-lg); - min-height: var(--icon-size-lg); - flex: 0 0 var(--icon-size-lg); - line-height: 0; - background-color: var(--color-neutral-700); - color: var(--color-white); - border: none; - border-radius: var(--radius-full); - cursor: pointer; - transition: - background-color 200ms ease, - box-shadow 200ms ease; - } - - .icon-button:hover { - background-color: var(--color-neutral-600); - } - - .icon-button:focus, - .icon-button:active { - outline: none; - box-shadow: 0 0 0 var(--icon-button-ring-width) var(--color-ring-alert); - } - - .icon-image { - width: var(--icon-size-md); - height: var(--icon-size-md); - pointer-events: none; - } - - .accent-action-button, - .channel-action-button { - --accent-action-bg: color-mix( - in srgb, - var(--surface-overlay-panel) 78%, - transparent - ); - --accent-action-border: color-mix( - in srgb, - var(--border-overlay) 92%, - transparent - ); - --accent-action-bg-hover: color-mix( - in srgb, - var(--color-accent) 22%, - var(--surface-overlay-panel) - ); - --accent-action-ring: color-mix( - in srgb, - var(--color-accent) 48%, - transparent - ); - --accent-action-bg-active: color-mix( - in srgb, - var(--color-accent-pressed) 28%, - var(--surface-overlay-panel) - ); - - color: var(--color-text); - background-color: var(--accent-action-bg); - border-color: var(--accent-action-border); - border-style: solid; - border-width: var(--border-width-hairline); - } - - .accent-action-button:hover, - .accent-action-button:focus-visible, - .channel-action-button:hover, - .channel-action-button:focus-visible { - color: var(--color-accent-strong); - background-color: var(--accent-action-bg-hover); - } - - .accent-action-button:focus, - .accent-action-button:focus-visible, - .channel-action-button:focus, - .channel-action-button:focus-visible { - box-shadow: 0 0 0 var(--icon-button-ring-width) var(--accent-action-ring); - } - - .accent-action-button:active, - .channel-action-button:active { - color: var(--color-accent-pressed); - background-color: var(--accent-action-bg-active); - } - - .modal-nav .icon-button { - box-shadow: none; - padding: 0; - gap: 0; - width: var(--icon-size-lg); - height: var(--icon-size-lg); - min-width: var(--icon-size-lg); - min-height: var(--icon-size-lg); - } - - .modal-nav - .icon-button:not(.accent-action-button):not(.channel-action-button) { - border: none; - } - - .modal-meta { - display: inline-flex; - align-items: center; - gap: var(--space-xs); - } - - .modal-view-count { - display: inline-flex; - align-items: center; - gap: var(--space-2xs); - font-size: var(--font-size-sm); - line-height: var(--space-md-plus); - color: var(--color-muted-alt); - white-space: nowrap; - } - - .view-count-text { - white-space: nowrap; - color: var(--color-muted-strong); - } - - .progress-bar { - width: 100%; - height: var(--modal-progress-height); - border-radius: var(--radius-full); - background-color: var(--color-border-translucent); - overflow: hidden; - } - - .progress-bar-fill { - width: 0; - height: 100%; - border-radius: inherit; - background: linear-gradient( - 90deg, - var(--color-info-strong), - var(--color-info) - ); - transition: width 240ms ease; - } - - .ratio-16-9 { - position: relative; - width: 100%; - padding-top: 56.25%; - background-color: var(--color-card); - } - - .ratio-16-9 > img { - position: absolute; - inset: 0; - width: 100%; - height: 100%; - object-fit: cover; - } - - #modalContainer { - position: fixed; - inset: 0; - z-index: var(--z-modal-root); - pointer-events: none; - isolation: isolate; - } - - #modalContainer > * { - pointer-events: auto; - } - - #modalContainer > [id$="Modal"]:not(#playerModal) { - z-index: var(--z-modal-root); - } - - #modalContainer > [id$="Modal"]:not(#playerModal) > .bv-modal-backdrop { - z-index: var(--z-modal-overlay); - } - - #modalContainer > [id$="Modal"]:not(#playerModal) .bv-modal__panel { - z-index: var(--z-modal-content); - } - - #modalContainer > #profileModal, - #profileModal[data-modal-stack="top"] { - z-index: var(--z-modal-top-root); - } - - #modalContainer > #profileModal > .bv-modal-backdrop, - #profileModal[data-modal-stack="top"] > .bv-modal-backdrop { - z-index: var(--z-modal-top-overlay); - } - - #modalContainer > #profileModal .bv-modal__panel, - #profileModal[data-modal-stack="top"] .bv-modal__panel { - z-index: var(--z-modal-top-content); - } - - #modalContainer > #eventDetailsModal { - z-index: var(--z-modal-top-root); - } - - #modalContainer > #eventDetailsModal > .bv-modal-backdrop { - z-index: var(--z-modal-top-overlay); - } - - #modalContainer > #eventDetailsModal .bv-modal__panel { - z-index: var(--z-modal-top-content); - } - - .bv-modal[data-nested-modal-active="true"] { - pointer-events: none; - visibility: hidden; - } - - #modalContainer > #loginModal { - z-index: var(--z-modal-peak-root); - } - - #modalContainer > #loginModal > .bv-modal-backdrop { - z-index: var(--z-modal-peak-overlay); - } - - #modalContainer > #loginModal .bv-modal__panel { - z-index: var(--z-modal-peak-content); - } - - #modalContainer > #playerModal { - z-index: var(--z-modal-player); - } - - #modalContainer > #playerModal .player-modal__container, - #modalContainer > #playerModal .player-modal__content { - z-index: var(--z-modal-content); - } - - #playerModal { - position: fixed; - inset: 0; - z-index: var(--z-modal-player); - display: none; - flex-direction: column; - align-items: stretch; - justify-content: flex-start; - width: 100vw; - height: 100vh; - padding: 0; - background-color: var(--color-surface); - color: var(--color-subtle-text); - --player-modal-inline-max: var(--layout-player-max-width); - --player-modal-inline-padding: clamp( - var(--space-md-plus), - 4vw, - var(--space-2xl) - ); - overflow-x: hidden; - overflow-y: auto; - overscroll-behavior: contain; - -webkit-overflow-scrolling: touch; - } - - #playerModal.flex { - display: block; - } - - #modalVideo { - width: 100%; - aspect-ratio: 16 / 9; - background-color: var(--color-black); - } - - .notification-portal { - position: fixed; - top: 0; - left: 0; - right: 0; - z-index: var(--z-overlay-toast); - display: flex; - flex-direction: column; - align-items: center; - gap: var(--space-md); - padding: calc(var(--space-xl) + env(safe-area-inset-top)) var(--space-lg) - var(--space-lg); - pointer-events: none; - opacity: 0; - transform: translateY(var(--toast-translate)); - transition: - transform var(--motion-duration-base) var(--motion-ease-out), - opacity var(--motion-duration-base) var(--motion-ease-out); - } - - @media (min-width: theme("screens.sm")) { - .notification-portal { - padding-inline: var(--space-xl); - } - } - - .notification-portal:has(.notification-banner:not(.hidden)) { - opacity: 1; - transform: translateY(0); - } - - .notification-portal--active { - opacity: 1; - transform: translateY(0); - } - - .notification-banner, - .torrent-toast { - --notify-accent: var(--notification-banner-accent); - --notify-accent-strong: var(--notification-banner-accent-strong); - --notify-border: var(--notification-banner-border); - --notify-background: var(--notification-banner-background); - --notify-foreground: var(--notification-banner-text); - - position: relative; - display: flex; - align-items: center; - gap: var(--space-md); - width: min(var(--notification-banner-max-inline), 100%); - padding: var(--space-md) var(--space-xl); - border-radius: var(--radius-xl); - border: var(--border-width-hairline) solid var(--notify-border); - background: var(--notify-background); - color: var(--notify-foreground); - box-shadow: 0 var(--shadow-notification-offset-y) - var(--shadow-notification-blur) var(--color-shadow-notification); - backdrop-filter: blur(var(--overlay-backdrop-blur)); - pointer-events: auto; - isolation: isolate; - @apply text-sm font-semibold leading-snug; - transition: - transform var(--motion-duration-base) var(--motion-ease-out), - opacity var(--motion-duration-base) var(--motion-ease-out); - } - - .notification-banner::before, - .torrent-toast::before { - content: ""; - position: absolute; - inset: 0; - border-radius: inherit; - background: linear-gradient( - 135deg, - var(--notify-accent) 0%, - var(--notify-accent-strong) 100% - ); - opacity: 0.18; - pointer-events: none; - } - - .notification-banner > *, - .torrent-toast > * { - position: relative; - z-index: 1; - } - - .notification-dismiss { - @apply inline-flex h-8 w-8 items-center justify-center rounded-full border border-transparent transition duration-base ease-out; - color: inherit; - opacity: 0.75; - background-color: var(--notify-dismiss-background); - } - - .notification-dismiss:hover, - .notification-dismiss:focus-visible { - opacity: 1; - background-color: var(--notify-dismiss-background-hover); - } - - .notification-dismiss svg { - @apply h-4 w-4; - } - - .notification-banner:not(.hidden) { - animation: notification-slide-in var(--motion-duration-base) - var(--motion-ease-out); - } - - .notification-banner--critical, - .torrent-toast--error { - --notify-accent: var(--notification-banner-critical-accent); - --notify-accent-strong: var(--notification-banner-critical-accent-strong); - --notify-border: var(--notification-banner-critical-border); - --notify-background: var(--notification-banner-critical-background); - --notify-foreground: var(--notification-banner-critical-text); - } - - .notification-banner--success, - .torrent-toast--success { - --notify-accent: var(--notification-banner-success-accent); - --notify-accent-strong: var(--notification-banner-success-accent-strong); - --notify-border: var(--notification-banner-success-border); - --notify-background: var(--notification-banner-success-background); - --notify-foreground: var(--notification-banner-success-text); - } - - .notification-banner--info, - .torrent-toast--info { - --notify-accent: var(--notification-banner-info-accent); - --notify-accent-strong: var(--notification-banner-info-accent-strong); - --notify-border: var(--notification-banner-info-border); - --notify-background: var(--notification-banner-info-background); - --notify-foreground: var(--notification-banner-info-text); - } - - .notification-banner--warning, - .torrent-toast--warn { - --notify-accent: var(--notification-banner-warning-accent); - --notify-accent-strong: var(--notification-banner-warning-accent-strong); - --notify-border: var(--notification-banner-warning-border); - --notify-background: var(--notification-banner-warning-background); - --notify-foreground: var(--notification-banner-warning-text); - } - - .status-banner .status-spinner { - animation: spin 1s linear infinite; - border: var(--space-3xs) solid var(--color-info-border); - border-radius: var(--radius-full); - border-top-color: var(--color-info); - flex-shrink: 0; - height: var(--icon-size-md); - width: var(--icon-size-md); - } - - .status-banner .status-message { - flex: 1 1 auto; - } - - @keyframes notification-slide-in { - from { - opacity: 0; - transform: translateY(var(--toast-translate)); - } - - to { - opacity: 1; - transform: translateY(0); - } - } - - .status-spinner--inline { - animation: spin 1s linear infinite; - border: var(--space-3xs) solid var(--color-border-info-soft); - border-radius: var(--radius-full); - border-top-color: var(--color-info); - display: inline-block; - height: var(--space-md); - width: var(--space-md); - } - - body.iframe-form { - background-color: transparent; - color: var(--color-text); - font-family: var(--font-family-sans); - margin: var(--space-lg); - } - - body.iframe-form .container { - width: 100%; - max-width: 100%; - margin: 0; - padding: 0; - } - - body.iframe-form .form-container { - background-color: var(--color-surface-alt); - border-radius: var(--radius-md); - box-shadow: var(--shadow-md); - color: var(--color-text); - display: flex; - flex-direction: column; - gap: var(--space-md); - padding: var(--space-lg); - } - - body.iframe-form .form-container > p { - margin: 0; - } - - body.iframe-form form { - display: flex; - flex-direction: column; - } - - body.iframe-form form > * + * { - margin-top: var(--space-sm); - } - - body.iframe-form form h1, - body.iframe-form form h2 { - color: var(--color-text); - margin-top: var(--space-md); - } - - body.iframe-form label { - color: var(--color-subtle-text); - display: block; - font-weight: 600; - margin-top: var(--space-sm); - } - - body.iframe-form label + .form-control, - body.iframe-form label + .textarea, - body.iframe-form label + .select { - margin-top: var(--space-xs); - } - - body.iframe-form .checkbox-group, - body.iframe-form .radio-group { - display: flex; - flex-wrap: wrap; - gap: var(--space-sm); - margin-top: var(--space-xs); - } - - body.iframe-form .checkbox-group label, - body.iframe-form .radio-group label { - align-items: center; - color: var(--color-subtle-text); - display: inline-flex; - font-weight: 500; - gap: var(--space-xs); - margin: 0; - } - - body.iframe-form .checkbox-group input[type="checkbox"], - body.iframe-form .radio-group input[type="radio"] { - margin: 0; - } - - body.iframe-form .radio-group input[type="radio"] { - accent-color: var(--color-accent-strong); - } - - body.iframe-form button.btn { - align-self: flex-start; - margin-top: var(--space-md); - } - - body.iframe-form #status { - background: var(--color-surface); - border-radius: var(--radius-sm); - box-shadow: inset 0 0 0 var(--border-width-hairline) - var(--color-border-translucent); - color: var(--color-subtle-text); - min-height: calc(var(--space-2xl) + var(--space-xl)); - padding: var(--space-sm); - white-space: pre-wrap; - } - - body.iframe-form .status-line { - color: var(--color-subtle-text); - margin: var(--space-2xs) 0; - } - - body.iframe-form .status-line.error { - color: var(--color-critical-strong); - } - - body.iframe-form .status-line.success { - color: var(--color-info-strong); - } - - body.iframe-form .status-line.warn { - color: var(--color-warning-strong); - } - - @media (max-width: theme("screens.sm")) { - body.iframe-form { - margin: var(--space-md); - } - - body.iframe-form .form-container { - padding: var(--space-md); - } - } - - #sidebarContainer { - position: relative; - overflow: visible; - } - - #sidebar { - position: fixed; - top: 0; - left: 0; - width: var(--sidebar-width); - min-width: var(--sidebar-width); - height: 100vh; - height: 100dvh; - color: var(--color-text-frosted-strong); - overflow-x: hidden; - overflow-y: auto; - -webkit-overflow-scrolling: touch; - overscroll-behavior: contain; - overscroll-behavior-inline: contain; - touch-action: pan-y; - scrollbar-gutter: stable both-edges; - background: transparent; - border-right: none; - backdrop-filter: none; - -webkit-backdrop-filter: none; - transition: - width 200ms ease, - transform 300ms ease; - z-index: var(--z-sidebar); - box-shadow: none; - isolation: isolate; - } - - body.sidebar-collapsed, - #sidebar.sidebar-collapsed, - #sidebar[data-state="collapsed"], - #app.sidebar-collapsed { - --sidebar-width: var(--sidebar-width-collapsed); - } - - body.sidebar-expanded, - #sidebar.sidebar-expanded, - #sidebar[data-state="expanded"], - #app.sidebar-expanded { - --sidebar-width: var(--sidebar-width-expanded); - } - - #sidebar .sidebar__inner { - display: flex; - flex-direction: column; - height: 100%; - padding-block-start: max( - var(--space-sidebar-shell-block-start), - calc(var(--app-header-centerline) - (var(--sidebar-control-size) / 2)) - ); - padding-block-end: var(--space-sidebar-shell-block-end); - padding-inline: var(--space-sidebar-shell-inline); - width: 100%; - border-radius: var(--radius-sidebar-shell); - border: none; - background: none; - box-shadow: none; - backdrop-filter: none; - -webkit-backdrop-filter: none; - overflow: visible; - isolation: isolate; - transition: color 200ms ease; - } - - .sidebar-scroll { - display: flex; - flex-direction: column; - gap: var(--space-sidebar-scroll-gap); - width: 100%; - height: 100%; - min-height: 0; - flex: 1 1 auto; - overflow: visible; - } - - .sidebar-panel { - position: relative; - width: 100%; - display: flex; - flex-direction: column; - gap: var(--space-sidebar-panel-gap); - padding: var(--space-sidebar-panel-padding-block) - var(--space-sidebar-panel-padding-inline); - border-radius: var(--radius-sidebar-panel); - border: none; - background: transparent; - box-shadow: none; - color: inherit; - backdrop-filter: none; - -webkit-backdrop-filter: none; - overflow: hidden; - isolation: isolate; - transition: - border-color 200ms ease, - box-shadow 220ms ease, - background 220ms ease; - } - - .sidebar-panel--primary { - flex: 1 1 auto; - min-height: 0; - padding-block-start: 0; - } - - .sidebar-panel__header { - display: flex; - justify-content: flex-end; - margin-bottom: var(--space-md); - } - - .sidebar-collapse-toggle { - display: inline-flex; - align-items: center; - justify-content: center; - width: var(--sidebar-control-size); - height: var(--sidebar-control-size); - border-radius: var(--radius-full); - border: var(--border-width-hairline) solid - var(--color-border-translucent-medium); - background: var(--color-surface-tint-subtle); - color: inherit; - cursor: pointer; - transition: - background 180ms ease, - color 180ms ease, - border-color 180ms ease; - flex-shrink: 0; - box-sizing: border-box; - } - - .sidebar-collapse-toggle:hover { - background: var(--color-border-translucent); - border-color: var(--color-border-translucent-stronger); - color: var(--color-text); - } - - .sidebar-collapse-toggle:focus-visible { - outline: var(--space-3xs) solid var(--color-secondary); - outline-offset: var(--space-2xs); - } - - .sidebar-collapse-toggle__icon { - width: var(--icon-size-sm); - height: var(--icon-size-sm); - transition: transform 200ms ease; - } - - .sidebar-nav { - display: flex; - flex-direction: column; - gap: var(--space-xs); - opacity: 1; - transition: opacity 160ms ease; - width: 100%; - } - - .sidebar-nav-link { - --sidebar-nav-translate-x: 0; - --sidebar-nav-link-highlight-opacity: 0; - --sidebar-nav-link-highlight-scale: 0.96; - display: flex; - align-items: center; - gap: var(--space-sidebar-footer-gap); - padding-block: var(--space-sidebar-nav-padding-block); - padding-inline-start: var(--space-sidebar-nav-padding-inline-start); - padding-inline-end: var(--space-sidebar-nav-padding-inline-end); - min-height: var(--sidebar-control-size); - border-radius: var(--radius-sidebar-nav); - font-size: var(--font-size-sidebar-nav); - font-weight: 600; - letter-spacing: 0.015em; - color: var(--color-text); - text-decoration: none; - width: 100%; - position: relative; - border: var(--border-width-hairline) solid transparent; - background: none; - box-shadow: none; - transform: translateX(var(--sidebar-nav-translate-x)); - transition: - color 180ms ease, - border-color 200ms ease, - box-shadow 220ms ease, - transform 220ms ease; - overflow: hidden; - isolation: isolate; - backdrop-filter: none; - -webkit-backdrop-filter: none; - } - - .sidebar-nav-link::before, - .sidebar-nav-link::after { - content: ""; - position: absolute; - inset: calc(var(--border-width-hairline) * -1); - border-radius: inherit; - pointer-events: none; - transition: - opacity 220ms ease, - transform 240ms ease; - z-index: -1; - } - - .sidebar-nav-link::before { - background: linear-gradient( - 120deg, - var(--color-sidebar-accent-start) 0%, - var(--color-sidebar-accent-end) 100% - ); - opacity: var(--sidebar-nav-link-highlight-opacity); - transform: scale(var(--sidebar-nav-link-highlight-scale)); - filter: saturate(140%); - } - - .sidebar-nav-link::after { - background: linear-gradient( - 105deg, - var(--color-sidebar-hover) 0%, - transparent 75% - ); - opacity: 0.22; - mix-blend-mode: screen; - z-index: -2; - } - - .sidebar-nav-link:hover, - .sidebar-nav-link:focus-visible { - --sidebar-nav-link-highlight-opacity: 1; - --sidebar-nav-link-highlight-scale: 1.02; - --sidebar-nav-translate-x: var(--space-sidebar-nav-translate); - color: var(--color-white); - border-color: var(--color-sidebar-hover-strong); - box-shadow: - 0 0 0 var(--border-width-hairline) var(--color-sidebar-hover-strong), - var(--shadow-sidebar-accent); - } - - .sidebar-nav-link:focus-visible { - outline: none; - box-shadow: var(--shadow-sidebar-focus-ring), var(--shadow-sidebar-accent); - } - - .sidebar-nav-link:hover::after, - .sidebar-nav-link:focus-visible::after { - opacity: 0.35; - } - - .sidebar-nav-link--sub { - font-size: var(--font-size-sidebar-subnav); - font-weight: 500; - color: var(--color-sidebar-text-muted); - padding-block: var(--space-sidebar-subnav-padding-block); - letter-spacing: 0.02em; - --sidebar-nav-link-highlight-opacity: 0.25; - --sidebar-nav-link-highlight-scale: 1; - } - - .sidebar-icon { - width: var(--space-lg); - height: var(--space-lg); - min-width: var(--space-lg); - min-height: var(--space-lg); - flex-shrink: 0; - display: block; - filter: var(--sidebar-icon-filter); - transition: filter 180ms ease; - } - - .sidebar-footer { - display: flex; - flex-direction: column; - gap: var(--space-sidebar-footer-gap); - margin-top: auto; - position: relative; - z-index: 2; - } - - .sidebar-dropup-trigger { - position: relative; - display: flex; - align-items: center; - justify-content: space-between; - gap: var(--space-sidebar-footer-gap); - width: 100%; - padding-block: var(--space-sidebar-trigger-padding-block); - padding-inline-start: var(--space-sidebar-nav-padding-inline-start); - padding-inline-end: var(--space-sidebar-nav-padding-inline-end); - min-height: var(--sidebar-control-size); - border-radius: var(--radius-sidebar-nav); - border: var(--border-width-hairline) solid transparent; - background: none; - color: var(--color-text); - font-size: var(--font-size-sidebar-trigger); - font-weight: 600; - cursor: pointer; - box-sizing: border-box; - flex-shrink: 0; - overflow: hidden; - isolation: isolate; - backdrop-filter: none; - -webkit-backdrop-filter: none; - box-shadow: none; - transition: - border-color 200ms ease, - color 200ms ease, - box-shadow 220ms ease; - } - - .sidebar-dropup-trigger::before { - content: ""; - position: absolute; - inset: calc(var(--border-width-hairline) * -1); - border-radius: inherit; - pointer-events: none; - background: linear-gradient( - 120deg, - var(--color-sidebar-accent-start) 0%, - var(--color-sidebar-accent-end) 100% - ); - opacity: 0; - transform: scale(0.96); - transition: - opacity 200ms ease, - transform 220ms ease; - z-index: -1; - filter: saturate(140%); - } - - .sidebar-dropup-trigger::after { - content: ""; - position: absolute; - inset: calc(var(--border-width-hairline) * -1); - border-radius: inherit; - pointer-events: none; - background: linear-gradient( - 110deg, - var(--color-sidebar-hover) 0%, - transparent 80% - ); - opacity: 0.18; - mix-blend-mode: screen; - transition: opacity 200ms ease; - z-index: -2; - } - - .sidebar-dropup-trigger:hover, - .sidebar-dropup-trigger:focus-visible { - color: var(--color-white); - border-color: var(--color-sidebar-hover-strong); - box-shadow: - 0 0 0 var(--border-width-hairline) var(--color-sidebar-hover-strong), - var(--shadow-sidebar-dropup); - } - - .sidebar-dropup-trigger:hover::before, - .sidebar-dropup-trigger:focus-visible::before { - opacity: 1; - transform: scale(1.02); - } - - .sidebar-dropup-trigger:hover::after, - .sidebar-dropup-trigger:focus-visible::after { - opacity: 0.35; - } - - .sidebar-dropup-trigger:focus-visible { - outline: none; - box-shadow: var(--shadow-sidebar-focus-ring), var(--shadow-sidebar-dropup); - } - - .sidebar-dropup-trigger__glyph { - width: var(--icon-size-md); - height: var(--icon-size-md); - opacity: 0.9; - } - - .sidebar-dropup-trigger__chevron { - width: var(--icon-size-sm); - height: var(--icon-size-sm); - transition: transform 180ms ease; - } - - .sidebar-dropup-trigger__chevron.is-rotated, - .sidebar-dropup-trigger[aria-expanded="true"] - .sidebar-dropup-trigger__chevron { - transform: rotate(180deg); - } - - .sidebar-dropup-panel { - position: absolute; - left: 0; - right: 0; - bottom: calc(100% + var(--space-sidebar-popover-offset)); - border-radius: var(--radius-xl); - border: var(--border-width-hairline) solid - var(--color-sidebar-border-strong); - background: linear-gradient( - 160deg, - color-mix(in srgb, var(--color-sidebar-surface) 88%, transparent) 0%, - color-mix(in srgb, var(--color-sidebar-surface-alt) 68%, transparent) 100% - ); - box-shadow: - inset 0 0 0 var(--border-width-fine) var(--color-sidebar-border), - var(--shadow-sidebar-panel); - padding: var(--space-sidebar-popover-padding-block) - var(--space-sidebar-popover-padding-inline); - color: var(--color-text-frosted); - opacity: 0; - visibility: hidden; - pointer-events: none; - transform: translateY(var(--space-sm)); - transition: - opacity 180ms ease, - transform 180ms ease, - visibility 180ms ease, - box-shadow 220ms ease; - backdrop-filter: blur(var(--sidebar-panel-backdrop-blur)) - saturate(var(--sidebar-panel-backdrop-saturation)); - -webkit-backdrop-filter: blur(var(--sidebar-panel-backdrop-blur)) - saturate(var(--sidebar-panel-backdrop-saturation)); - z-index: 5; - isolation: isolate; - } - - .sidebar-dropup-panel[data-state="expanded"] { - opacity: 1; - visibility: visible; - pointer-events: auto; - transform: translateY(0); - } - - .sidebar-dropup-panel__inner { - display: flex; - flex-direction: column; - gap: var(--space-sidebar-popover-gap); - width: 100%; - padding-inline-end: var(--space-sidebar-dropup-scroll-reserve); - max-height: var(--sidebar-dropup-max-height); - overflow-y: auto; - overflow-x: hidden; - scrollbar-gutter: stable both-edges; - } - - .sidebar-dropup-panel__inner.is-measuring { - position: absolute; - width: max-content; - max-width: none; - visibility: hidden; - pointer-events: none; - left: var(--offscreen-offset); - right: auto; - top: auto; - bottom: auto; - } - - .sidebar-dropup-measure { - position: absolute; - visibility: hidden; - pointer-events: none; - height: 0; - overflow: hidden; - } - - .sidebar-dropup-panel__inner > * { - width: 100%; - min-width: 0; - } - - #sidebar[data-footer-state="expanded"] .sidebar-nav { - opacity: 0; - pointer-events: none; - } - - #sidebar[data-footer-state="collapsed"] .sidebar-nav { - opacity: 1; - } - - .sidebar-loading-wrapper { - display: flex; - justify-content: center; - align-items: center; - padding: var(--space-2xl) 0; - width: 100%; - grid-column: 1 / -1; - } - - .sidebar-loading-indicator { - display: inline-flex; - align-items: center; - gap: var(--space-sm); - color: var(--color-muted-strong); - font-size: var(--font-size-sm); - font-weight: 500; - letter-spacing: 0.01em; - } - - .sidebar-loading-text { - white-space: nowrap; - } - - #app { - box-sizing: border-box; - transition: - margin-left 200ms ease, - width 200ms ease, - max-width 200ms ease; - } - - #app[data-sidebar-state="collapsed"] { - margin-left: var(--sidebar-width-collapsed); - width: calc(100vw - var(--sidebar-width-collapsed)); - max-width: calc(100vw - var(--sidebar-width-collapsed)); - } - - #app[data-sidebar-state="expanded"] { - margin-left: max( - var(--sidebar-width-expanded-base), - var(--sidebar-dropup-content-width) - ); - width: min( - calc(100vw - var(--sidebar-width-expanded-base)), - calc(100vw - var(--sidebar-dropup-content-width)) - ); - max-width: min( - calc(100vw - var(--sidebar-width-expanded-base)), - calc(100vw - var(--sidebar-dropup-content-width)) - ); - } - - body.sidebar-collapsed #sidebar .sidebar-nav-link, - #sidebar.sidebar-collapsed .sidebar-nav-link { - justify-content: center; - width: var(--sidebar-control-size); - padding: 0; - margin-inline: auto; - border-radius: var(--radius-full); - --sidebar-nav-translate-x: 0; - --sidebar-nav-link-highlight-scale: 1; - } - - body.sidebar-expanded #sidebar .sidebar-nav-link, - #sidebar.sidebar-expanded .sidebar-nav-link { - justify-content: flex-start; - } - - body.sidebar-collapsed #sidebar .sidebar-text, - #sidebar.sidebar-collapsed .sidebar-text { - display: none; - } - - body.sidebar-collapsed #sidebar .sidebar__inner, - #sidebar.sidebar-collapsed .sidebar__inner { - padding-inline: var(--space-2xs); - } - - body.sidebar-collapsed #sidebar .sidebar-panel, - #sidebar.sidebar-collapsed .sidebar-panel { - padding-inline: calc(var(--space-3xs) * 3); - } - - body.sidebar-collapsed #sidebar .sidebar-panel__header, - #sidebar.sidebar-collapsed .sidebar-panel__header { - justify-content: center; - } - - body.sidebar-collapsed #sidebar .sidebar-collapse-toggle, - #sidebar.sidebar-collapsed .sidebar-collapse-toggle { - margin-inline: auto; - } - - #sidebar .sidebar-toggle-icon--rotated { - transform: rotate(180deg); - } - - body.sidebar-collapsed #sidebar .sidebar-toggle-icon--rotated, - #sidebar.sidebar-collapsed .sidebar-toggle-icon--rotated { - transform: rotate(0deg); - } - - body.sidebar-collapsed #sidebar .sidebar-dropup-trigger, - #sidebar.sidebar-collapsed .sidebar-dropup-trigger { - justify-content: center; - width: var(--sidebar-control-size); - height: var(--sidebar-control-size); - padding: 0; - margin-inline: auto; - border-radius: var(--radius-full); - } - - body.sidebar-collapsed #sidebar .sidebar-dropup-trigger .sidebar-text, - #sidebar.sidebar-collapsed .sidebar-dropup-trigger .sidebar-text { - display: none; - } - - body.sidebar-collapsed #sidebar .sidebar-dropup-trigger__chevron { - display: none; - } - - body.sidebar-collapsed #sidebar .sidebar-dropup-trigger__glyph, - #sidebar.sidebar-collapsed .sidebar-dropup-trigger__glyph { - margin: 0; - } - - body.sidebar-collapsed #sidebar .sidebar-nav-link:hover, - #sidebar.sidebar-collapsed .sidebar-nav-link:hover, - body.sidebar-collapsed #sidebar .sidebar-nav-link:focus-visible, - #sidebar.sidebar-collapsed .sidebar-nav-link:focus-visible { - --sidebar-nav-translate-x: 0; - } - - @media (min-width: theme("screens.md")) { - .sidebar-panel__header { - display: flex; - } - - .sidebar-collapse-toggle { - display: inline-flex; - } - - #sidebar { - transform: translateX(0) !important; - width: var(--sidebar-width); - overflow: visible; - } - - #app[data-sidebar-state="collapsed"] { - margin-left: calc( - var(--sidebar-width-collapsed) + var(--sidebar-content-gap) - ); - width: calc( - 100vw - var(--sidebar-width-collapsed) - var(--sidebar-content-gap) - ); - max-width: calc( - 100vw - var(--sidebar-width-collapsed) - var(--sidebar-content-gap) - ); - } - - #app[data-sidebar-state="expanded"] { - margin-left: max( - calc(var(--sidebar-width-expanded-base) + var(--sidebar-content-gap)), - calc(var(--sidebar-dropup-content-width) + var(--sidebar-content-gap)) - ); - width: min( - calc( - 100vw - var(--sidebar-width-expanded-base) - - var(--sidebar-content-gap) - ), - calc( - 100vw - var(--sidebar-dropup-content-width) - - var(--sidebar-content-gap) - ) - ); - max-width: min( - calc( - 100vw - var(--sidebar-width-expanded-base) - - var(--sidebar-content-gap) - ), - calc( - 100vw - var(--sidebar-dropup-content-width) - - var(--sidebar-content-gap) - ) - ); - } - } - - @keyframes card-motion-enter { - from { - opacity: 0; - transform: translateY(var(--motion-card-enter-translate)); - } - - to { - opacity: 1; - transform: translateY(0); - } - } - - @keyframes video-thumbnail-fade-in { - from { - opacity: 0; - } - - to { - opacity: 1; - } - } - - @keyframes interface-fade-in { - from { - opacity: 0; - } - - to { - opacity: 1; - } - } - - @keyframes fadeIn { - from { - opacity: 0; - transform: translateY(var(--motion-fade-in-translate)); - } - - to { - opacity: 1; - transform: translateY(0); - } - } - - @keyframes spin { - to { - transform: rotate(360deg); - } - } -} - -@layer utilities { - @media (max-width: theme("screens.compact")) { - .u-max-400-flex-wrap { - flex-wrap: wrap; - } - - .u-max-400-gap-y-sm { - row-gap: var(--space-sm); - } - - .u-max-400-gap-y-xs { - row-gap: var(--space-xs); - } - - .u-max-400-w-full { - width: 100%; - } - - .u-max-400-justify-between { - justify-content: space-between; - } - - .u-max-400-ml-0 { - margin-left: 0; - } - - .u-max-400-px-sm { - padding-left: var(--space-sm); - padding-right: var(--space-sm); - } - - .u-max-400-square-9 { - height: var(--space-xl-compact); - width: var(--space-xl-compact); - min-height: var(--space-xl-compact); - min-width: var(--space-xl-compact); - } - } -} - -@media (max-width: theme("screens.sm")) { - .bv-grid-video { - gap: var(--space-md); - grid-template-columns: 1fr; - } -} - -@media (prefers-reduced-motion: reduce) { - :root { - --motion-duration-fast: 0s; - --motion-duration-base: 0s; - --motion-duration-slow: 0s; - --modal-motion-duration: 0s; - } - - *, - *::before, - *::after { - animation-delay: 0s !important; - animation-duration: 0s !important; - animation-iteration-count: 1 !important; - animation-timing-function: linear !important; - transition-delay: 0s !important; - transition-duration: 0s !important; - transition-timing-function: linear !important; - } - - .player-modal__similar-card::before { - transition: none !important; - } - - .btn, - .btn-ghost, - .card, - .card[data-motion="enter"], - .fade-in, - .icon-button, - .menu__item, - .modal-nav, - .popover-panel, - .popover__panel, - .progress-bar-fill, - .notification-banner, - .notification-portal, - .torrent-toast, - .status-banner .status-spinner, - .status-spinner--inline, - .video-modal__panel, - .watch-history-card, - .watch-history-card__creatorAvatar, - .watch-history-card__creatorName, - .watch-history-card__action, - .watch-history-card__title, - #app, - #playerModal .player-modal__content, - #sidebar, - .sidebar-collapse-toggle, - .sidebar-collapse-toggle__icon, - .sidebar-dropup-panel, - .sidebar-dropup-trigger, - .sidebar-dropup-trigger__chevron, - .sidebar-nav, - .sidebar-nav-link, - .sidebar-loading-indicator, - .sidebar-loading-wrapper { - transition-property: none !important; - } - - .popover-panel, - .popover__panel { - transform: none !important; - } - - .popover-panel[data-state="open"], - .popover__panel[data-state="open"] { - opacity: 1; - } - - .popover-panel[data-state="closed"], - .popover__panel[data-state="closed"] { - opacity: 0; - } - - .card[data-motion="enter"], - .fade-in { - opacity: 1; - animation: none !important; - } - - [data-video-thumbnail][data-thumbnail-loaded="true"] { - animation: none !important; - opacity: 1; - } - - .notification-banner, - .torrent-toast, - .status-banner .status-spinner, - .status-spinner--inline { - animation: none !important; - } - - .notification-portal { - transform: none !important; - opacity: 1 !important; - } -} - -@layer components { - .ui-grid-row { - border-bottom: var(--border-width-hairline) solid - var(--color-border-subtle, var(--color-border)); - } - - .status-line { - @apply my-1 text-sm leading-snug text-text; - } - - /* Status log containers reserve space for dynamic messages. */ - .status-log { - @apply min-h-status-log; - } - - .status-line.error { - color: var(--color-critical-strong); - } - - .status-line.success { - } - - .status-line.warn { - color: var(--color-warning-strong); - } - - /* Blog layout root scaffolding */ - - @keyframes ztr-rotate { - 100% { - transform: rotate(360deg); - } - } - - @keyframes ztr-dash { - 0% { - stroke-dasharray: 1, 150; - stroke-dashoffset: 0; - } - - 50% { - stroke-dasharray: 90, 150; - stroke-dashoffset: -35; - } - - 100% { - stroke-dasharray: 90, 150; - stroke-dashoffset: -124; - } - } - - @keyframes svelte-181fgen-loader-animation { - 0% { - transform: rotate(0); - } - - to { - transform: rotate(360deg); - } - } - - @keyframes svelte-181fgen-fade-in { - to { - opacity: 1; - } - } -} - -@layer components { - .dm-app-shell { - display: flex; - flex-direction: column; - gap: var(--space-lg); - padding: var(--space-lg); - background: var(--surface-base); - color: var(--text-primary); - min-height: 100vh; - } - - .profile-modal .dm-app-shell { - min-height: 0; - height: auto; - padding: var(--space-md); - } - - .dm-app-shell__sidebar, - .dm-app-shell__main { - border-radius: var(--radius-lg); - border: var(--border-width-hairline) solid var(--border-default); - background: var(--surface-panel); - box-shadow: var(--shadow-soft); - } - - .profile-modal .dm-app-shell__sidebar, - .profile-modal .dm-app-shell__main { - height: auto; - min-height: 0; - } - - .dm-app-shell__sidebar { - display: flex; - flex-direction: column; - gap: var(--space-md); - padding: var(--space-md); - } - - .dm-app-shell__title { - font-size: var(--font-size-lg); - margin: 0; - } - - .dm-app-shell__main { - flex: 1; - display: flex; - flex-direction: column; - gap: var(--space-md); - padding: var(--space-md); - background: var(--surface-raised); - } - - .profile-modal .dm-app-shell__main, - .profile-modal .dm-app-shell__sidebar { - min-width: 0; - } - - .dm-conversation-list { - display: flex; - flex-direction: column; - gap: var(--space-sm); - } - - .dm-conversation-list__header { - display: flex; - justify-content: space-between; - align-items: center; - } - - .dm-conversation-list__title { - font-size: var(--font-size-sm); - text-transform: uppercase; - letter-spacing: 0.08em; - color: var(--text-muted); - margin: 0; - } - - .dm-conversation-list__items { - display: flex; - flex-direction: column; - gap: var(--space-xs); - overflow-y: auto; - max-height: 60vh; - padding-right: var(--space-xs); - } - - .dm-conversation-list__state { - font-size: var(--font-size-sm); - color: var(--text-muted); - padding: var(--space-md); - text-align: center; - background: var(--surface-sunken); - border-radius: var(--radius-md); - } - - .dm-contact-row { - display: flex; - align-items: center; - gap: var(--space-sm); - padding: var(--space-sm) var(--space-md); - border-radius: var(--radius-md); - border: var(--border-width-hairline) solid var(--border-subtle); - background: transparent; - color: inherit; - text-align: left; - cursor: pointer; - } - - .dm-contact-row:hover, - .dm-contact-row:focus-visible { - background: var(--surface-muted); - border-color: var(--border-strong); - outline: none; - } - - .dm-contact-row--active { - background: var(--surface-sunken); - border-color: var(--border-strong); - } - - .dm-contact-row__content { - display: flex; - flex-direction: column; - gap: var(--space-2xs); - flex: 1; - } - - .dm-contact-row__header { - display: flex; - justify-content: space-between; - align-items: baseline; - gap: var(--space-xs); - } - - .dm-contact-row__meta { - display: inline-flex; - align-items: center; - gap: var(--space-xs); - } - - .dm-contact-row__name { - font-weight: 600; - } - - .dm-contact-row__time { - font-size: var(--font-size-2xs); - color: var(--text-muted); - } - - .dm-contact-row__preview { - font-size: var(--font-size-xs); - color: var(--text-muted); - } - - .dm-contact-row__badge { - align-self: flex-start; - padding: var(--space-3xs) var(--space-xs); - border-radius: var(--radius-full); - background: var(--color-accent); - color: var(--color-white); - font-size: var(--font-size-3xs); - } - - .dm-avatar { - display: inline-flex; - align-items: center; - justify-content: center; - flex-shrink: 0; - border-radius: var(--radius-full); - background: var(--surface-sunken); - color: var(--text-muted); - font-weight: 600; - overflow: hidden; - border: var(--border-width-hairline) solid var(--border-subtle); - } - - .dm-avatar--md { - width: var(--space-xl-plus); - height: var(--space-xl-plus); - } - - .dm-avatar--sm { - width: var(--space-xl); - height: var(--space-xl); - } - - .dm-avatar__image { - width: 100%; - height: 100%; - object-fit: cover; - } - - .dm-message-thread { - display: flex; - flex-direction: column; - gap: var(--space-sm); - flex: 1; - min-height: 0; - } - - .dm-message-thread__header { - display: flex; - align-items: baseline; - gap: var(--space-sm); - } - - .dm-message-thread__title { - font-size: var(--font-size-base); - margin: 0; - } - - .dm-message-thread__status { - font-size: var(--font-size-xs); - color: var(--text-muted); - } - - .dm-message-thread__zap-summary { - display: inline-flex; - align-items: center; - gap: var(--space-xs); - padding: var(--space-2xs) var(--space-xs); - border-radius: var(--radius-full); - border: var(--border-width-hairline) solid var(--border-subtle); - background: var(--surface-sunken); - color: var(--text-muted); - font-size: var(--font-size-2xs); - } - - .dm-message-thread__zap-label { - text-transform: uppercase; - letter-spacing: var(--tracking-wide); - } - - .dm-message-thread__zap-total { - font-weight: 600; - color: var(--text-primary); - } - - .dm-message-thread__zap-profile { - color: var(--text-muted); - } - - .dm-message-thread__timeline { - display: flex; - flex-direction: column; - gap: var(--space-sm); - padding: var(--space-sm); - border-radius: var(--radius-md); - background: var(--surface-panel); - border: var(--border-width-hairline) solid var(--border-subtle); - overflow-y: auto; - min-height: var(--size-16rem); - } - - .dm-message-thread__state { - padding: var(--space-md); - text-align: center; - color: var(--text-muted); - background: var(--surface-sunken); - border-radius: var(--radius-md); - } - - .dm-message-bubble { - max-width: 85%; - display: flex; - flex-direction: column; - gap: var(--space-2xs); - padding: var(--space-sm) var(--space-md); - border-radius: var(--radius-lg); - border: var(--border-width-hairline) solid var(--message-bubble-border); - background: var(--message-bubble-background); - color: var(--message-bubble-text); - } - - .dm-message-bubble--incoming { - align-self: flex-start; - } - - .dm-message-bubble--outgoing { - align-self: flex-end; - background: var(--color-accent); - color: var(--color-white); - border-color: var(--color-accent-strong); - } - - .dm-message-bubble--outgoing .dm-message-bubble__meta, - .dm-message-bubble--outgoing .dm-message-bubble__status { - color: var(--color-white); - opacity: 0.9; - } - - .dm-message-bubble__content { - font-size: var(--font-size-sm); - overflow-wrap: anywhere; - white-space: pre-wrap; - } - - .dm-message-bubble__meta { - display: flex; - gap: var(--space-xs); - font-size: var(--font-size-2xs); - color: var(--message-bubble-meta); - } - - .dm-message-bubble__status { - color: var(--text-muted); - } - - .dm-message-bubble__status[data-status="pending"] { - color: var(--status-warning); - } - - .dm-message-bubble__status[data-status="sending"] { - color: var(--status-info); - } - - .dm-message-bubble__status[data-status="failed"] { - color: var(--status-danger); - } - - .dm-message-thread__new { - align-self: center; - border-radius: var(--radius-full); - border: var(--border-width-hairline) solid var(--border-subtle); - padding: var(--space-2xs) var(--space-sm); - font-size: var(--font-size-2xs); - background: var(--surface-sunken); - color: var(--text-muted); - } - - .dm-message-thread__new:hover, - .dm-message-thread__new:focus-visible { - background: var(--surface-overlay-panel-soft); - color: var(--text-primary); - outline: none; - } - - .dm-day-divider { - display: grid; - grid-template-columns: 1fr auto 1fr; - align-items: center; - gap: var(--space-xs); - color: var(--text-muted); - font-size: var(--font-size-2xs); - } - - .dm-day-divider__line { - height: var(--border-width-hairline); - background: var(--border-subtle); - } - - .dm-notification-center { - display: flex; - flex-direction: column; - gap: var(--space-sm); - } - - .dm-notification-center__filters { - display: flex; - flex-wrap: wrap; - align-items: center; - gap: var(--space-xs); - } - - .dm-notification-center__filter-button { - border-radius: var(--radius-full); - border: var(--border-width-hairline) solid var(--border-subtle); - background: var(--surface-sunken); - padding: var(--space-2xs) var(--space-sm); - font-size: var(--font-size-2xs); - font-weight: 600; - color: var(--text-muted); - transition: - color var(--motion-duration-fast) var(--motion-ease-out), - background var(--motion-duration-fast) var(--motion-ease-out), - border-color var(--motion-duration-fast) var(--motion-ease-out); - } - - .dm-notification-center__filter-button:hover, - .dm-notification-center__filter-button:focus-visible { - outline: none; - border-color: var(--border-strong); - background: var(--surface-raised); - color: var(--text-primary); - } - - .dm-notification-center__filter-button--active { - border-color: var(--border-strong); - background: var(--surface-overlay-panel); - color: var(--text-primary); - } - - .dm-notification-center__groups { - display: flex; - flex-direction: column; - gap: var(--space-md); - } - - .dm-notification-center__group { - display: flex; - flex-direction: column; - gap: var(--space-xs); - } - - .dm-notification-center__group-title { - font-size: var(--font-size-2xs); - font-weight: 600; - text-transform: uppercase; - letter-spacing: var(--tracking-wide); - color: var(--text-muted); - } - - .dm-notification-center__list { - display: flex; - flex-direction: column; - gap: var(--space-xs); - } - - .dm-notification-center__empty { - font-size: var(--font-size-xs); - color: var(--text-muted); - } - - .dm-notification-item { - display: grid; - grid-template-columns: auto 1fr auto; - align-items: center; - gap: var(--space-sm); - padding: var(--space-sm); - border-radius: var(--radius-md); - border: var(--border-width-hairline) solid var(--border-subtle); - background: var(--surface-sunken); - font-size: var(--font-size-xs); - text-align: left; - transition: - border-color var(--motion-duration-fast) var(--motion-ease-out), - background var(--motion-duration-fast) var(--motion-ease-out); - } - - .dm-notification-item:hover, - .dm-notification-item:focus-visible { - outline: none; - border-color: var(--border-strong); - background: var(--surface-raised); - } - - .dm-notification-item__icon { - display: inline-flex; - align-items: center; - justify-content: center; - width: var(--icon-size-md); - height: var(--icon-size-md); - border-radius: var(--radius-full); - background: var(--surface-overlay-panel-soft); - color: var(--text-muted); - font-size: var(--font-size-xs); - } - - .dm-notification-item__body { - display: flex; - flex-direction: column; - gap: var(--space-2xs); - min-width: 0; - } - - .dm-notification-item__title { - font-weight: 600; - color: var(--text-primary); - } - - .dm-notification-item__message { - color: var(--text-muted); - } - - .dm-notification-item__meta { - display: flex; - align-items: center; - gap: var(--space-2xs); - color: var(--text-muted); - } - - .dm-notification-item__timestamp { - font-variant-numeric: tabular-nums; - white-space: nowrap; - } - - .dm-notification-item--info { - background: var(--status-info-surface); - border-color: var(--status-info-border); - color: var(--status-info-on); - } - - .dm-notification-item--success { - background: var(--status-success-surface); - border-color: var(--status-success-border); - color: var(--status-success-on); - } - - .dm-notification-item--warning { - background: var(--status-warning-surface); - border-color: var(--status-warning-border); - color: var(--status-warning-on); - } - - .dm-notification-item--error { - background: var(--status-danger-surface); - border-color: var(--status-danger-border); - color: var(--status-danger-on); - } - - .reply-highlight { - padding: var(--space-xs) var(--space-sm); - border-radius: var(--radius-md); - border: var(--border-width-hairline) solid var(--reply-highlight-border); - background: var(--reply-highlight-background); - color: var(--reply-highlight-text); - } - - .reply-highlight svg { - color: var(--reply-highlight-icon); - } - - .dm-composer { - display: flex; - flex-direction: column; - gap: var(--space-xs); - } - - .dm-composer__label { - font-size: var(--font-size-xs); - color: var(--text-muted); - } - - .dm-composer__input { - resize: vertical; - border-radius: var(--radius-md); - border: var(--border-width-hairline) solid var(--border-default); - background: var(--surface-base); - color: var(--text-primary); - padding: var(--space-sm); - font-family: inherit; - } - - .dm-composer__input:focus-visible { - outline: var(--space-3xs) solid var(--color-accent); - outline-offset: var(--space-3xs); - } - - .dm-composer__actions { - display: flex; - justify-content: space-between; - align-items: center; - gap: var(--space-sm); - } - - .dm-composer__tools { - display: flex; - align-items: center; - gap: var(--space-sm); - flex-wrap: wrap; - position: relative; - } - - .dm-composer__hint { - font-size: var(--font-size-2xs); - color: var(--text-muted); - } - - .dm-composer__attach, - .dm-composer__more-btn { - border-radius: var(--radius-md); - border: var(--border-width-hairline) solid var(--border-default); - background: var(--surface-base); - color: var(--text-muted); - padding: var(--space-2xs) var(--space-sm); - font-size: var(--font-size-2xs); - cursor: pointer; - } - - .dm-composer__more-btn { - font-weight: 700; - line-height: 1; - min-width: 2rem; - } - - .dm-composer__more-menu { - position: absolute; - bottom: 100%; - left: 0; - margin-bottom: var(--space-xs); - background: var(--surface-overlay-panel); - border: var(--border-width-hairline) solid var(--border-default); - border-radius: var(--radius-md); - box-shadow: var(--shadow-popover); - z-index: 10; - display: flex; - flex-direction: column; - min-width: 8rem; - padding: var(--space-xs); - } - - .dm-composer__menu-item { - text-align: left; - padding: var(--space-xs) var(--space-sm); - border-radius: var(--radius-sm); - font-size: var(--font-size-xs); - color: var(--text-muted); - background: transparent; - border: none; - cursor: pointer; - transition: background var(--motion-duration-fast) ease-out; - } - - .dm-composer__menu-item:hover, - .dm-composer__menu-item:focus-visible { - background: var(--surface-overlay-panel-soft); - color: var(--text-primary); - outline: none; - } - - .dm-composer__menu-item[aria-pressed="true"] { - background: var(--color-accent); - color: var(--color-white); - } - - .dm-composer__attach:hover, - .dm-composer__attach:focus-visible, - .dm-composer__more-btn:hover, - .dm-composer__more-btn:focus-visible { - background: var(--surface-overlay-panel-soft); - color: var(--text-primary); - outline: none; - } - - .dm-composer__send { - border-radius: var(--radius-md); - border: var(--border-width-hairline) solid var(--border-strong); - background: var(--surface-overlay-panel); - color: var(--text-primary); - padding: var(--space-xs) var(--space-md); - font-weight: 600; - cursor: pointer; - } - - .dm-composer__send:hover, - .dm-composer__send:focus-visible { - background: var(--surface-overlay-panel-soft); - outline: none; - } - - .dm-composer__zap-panel { - display: flex; - flex-direction: column; - gap: var(--space-xs); - padding: var(--space-sm); - border-radius: var(--radius-md); - border: var(--border-width-hairline) solid var(--border-subtle); - background: var(--surface-sunken); - } - - .dm-composer__zap-recipient { - font-size: var(--font-size-xs); - font-weight: 600; - color: var(--text-primary); - } - - .dm-composer__zap-address { - font-size: var(--font-size-2xs); - color: var(--text-muted); - } - - .dm-composer__zap-label { - font-size: var(--font-size-2xs); - text-transform: uppercase; - letter-spacing: var(--tracking-wide); - color: var(--text-muted); - } - - .dm-composer__zap-input { - border-radius: var(--radius-md); - border: var(--border-width-hairline) solid var(--border-default); - background: var(--surface-base); - color: var(--text-primary); - padding: var(--space-2xs) var(--space-sm); - font-size: var(--font-size-xs); - font-family: inherit; - } - - .dm-composer__zap-input:focus-visible { - outline: var(--size-2px) solid var(--color-accent); - outline-offset: var(--size-2px); - } - - .dm-composer__zap-actions { - display: flex; - justify-content: flex-end; - } - - .dm-composer__zap-send { - border-radius: var(--radius-md); - border: var(--border-width-hairline) solid var(--border-strong); - background: var(--surface-overlay-panel); - color: var(--text-primary); - padding: var(--space-2xs) var(--space-md); - font-size: var(--font-size-xs); - font-weight: 600; - cursor: pointer; - } - - .dm-composer__zap-send:hover, - .dm-composer__zap-send:focus-visible { - background: var(--surface-overlay-panel-soft); - outline: none; - } - - .dm-composer__zap-status { - font-size: var(--font-size-2xs); - color: var(--text-muted); - min-height: var(--space-md); - } - - .dm-composer__zap-status[data-state="error"] { - color: var(--status-danger); - } - - .dm-composer__zap-status[data-state="success"] { - color: var(--status-success); - } - - .dm-composer__status { - font-size: var(--font-size-2xs); - color: var(--status-danger); - min-height: var(--space-md); - } - - @media (min-width: theme("screens.md")) { - .dm-app-shell { - flex-direction: row; - align-items: stretch; - } - - .dm-app-shell__sidebar { - flex: 0 0 var(--size-18rem); - max-width: var(--size-20rem); - height: calc(100vh - var(--space-lg) * 2); - } - - .dm-app-shell__main { - height: calc(100vh - var(--space-lg) * 2); - } - - .dm-conversation-list__items { - max-height: none; - flex: 1; - } - } - - @media (min-width: theme("screens.md")) { - .profile-modal .dm-app-shell { - flex-direction: row; - align-items: stretch; - } - - .profile-modal .dm-app-shell__sidebar { - flex: 0 0 var(--size-18rem); - max-width: var(--size-20rem); - height: auto; - } - - .profile-modal .dm-app-shell__main { - flex: 1 1 auto; - height: auto; - } - } - - @media (min-width: theme("screens.lg")) { - .dm-app-shell__sidebar { - flex-basis: var(--size-20rem); - } - - .dm-message-thread__timeline { - padding: var(--space-md); - } - } -} diff --git a/css/tailwind.source.css b/css/tailwind.source.css index 92fd2e3e..90bd850f 100644 --- a/css/tailwind.source.css +++ b/css/tailwind.source.css @@ -5798,28 +5798,3 @@ } } } - -/* Profile Modal Full Screen Overrides */ -#profileModal { - padding: 0; - width: 100vw; - height: 100vh; - max-width: none; - max-height: none; -} - -#profileModal .bv-modal__panel { - width: 100%; - height: 100%; - max-width: none; - max-height: none; - border-radius: 0; - border: none; -} - -/* Override responsive max-height constraint */ -@media (min-width: theme("screens.lg")) { - #profileModal .profile-modal { - max-block-size: none; - } -}