mirror of
https://github.com/PR0M3TH3AN/bitvid.git
synced 2026-10-27 16:02:26 +00:00
google-labs-jules[bot]
3cd0532972
Replaces hardcoded breakpoint values in `VideoCard.js` and `tailwind.source.css` with token constants and valid CSS calculations. Updates the token linting script to enforce these rules by removing the previous allowlists for these files. This ensures that all UI elements are defined by the central styling system.
6084 lines
151 KiB
CSS
6084 lines
151 KiB
CSS
@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 {
|
|
min-width: 0;
|
|
--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-strip--scroll {
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
-webkit-overflow-scrolling: touch;
|
|
padding-bottom: var(--space-xs);
|
|
scrollbar-width: none;
|
|
-ms-overflow-style: none;
|
|
}
|
|
|
|
.video-tag-strip--scroll::-webkit-scrollbar {
|
|
display: none;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
.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: visible;
|
|
}
|
|
|
|
.profile-nav__unread-dot {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: -6px;
|
|
right: auto;
|
|
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;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
/* Specific override for messages pane to prevent parent scrolling on desktop */
|
|
@media (min-width: theme("screens.md")) {
|
|
#profilePaneMessages {
|
|
height: 100%;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#dmAppShellMount {
|
|
height: 100%;
|
|
min-height: 0;
|
|
}
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
#shareNostrModal {
|
|
z-index: var(--z-modal-peak-root) !important;
|
|
}
|
|
|
|
#shareNostrModal > .bv-modal-backdrop {
|
|
z-index: var(--z-modal-peak-overlay) !important;
|
|
}
|
|
|
|
#shareNostrModal .bv-modal__panel {
|
|
z-index: var(--z-modal-peak-content) !important;
|
|
}
|
|
|
|
.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: 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: calc(
|
|
var(--sidebar-width-expanded) + var(--sidebar-content-gap)
|
|
);
|
|
width: calc(
|
|
100vw - var(--sidebar-width-expanded) - var(--sidebar-content-gap)
|
|
);
|
|
max-width: calc(
|
|
100vw - var(--sidebar-width-expanded) - var(--sidebar-content-gap)
|
|
);
|
|
}
|
|
|
|
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: 0;
|
|
gap: 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;
|
|
border: none;
|
|
box-shadow: none;
|
|
background: transparent;
|
|
padding: 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);
|
|
min-width: var(--space-xl-plus);
|
|
min-height: var(--space-xl-plus);
|
|
}
|
|
|
|
.dm-avatar--sm {
|
|
width: var(--space-xl);
|
|
height: var(--space-xl);
|
|
min-width: var(--space-xl);
|
|
min-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-row {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
gap: var(--space-xs);
|
|
width: 100%;
|
|
}
|
|
|
|
.dm-message-row--incoming {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.dm-message-row--outgoing {
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.dm-message-avatar {
|
|
width: var(--space-xl);
|
|
height: var(--space-xl);
|
|
flex-shrink: 0;
|
|
border-radius: var(--radius-full);
|
|
object-fit: cover;
|
|
background-color: var(--surface-sunken);
|
|
border: var(--border-width-hairline) solid var(--border-subtle);
|
|
}
|
|
|
|
.dm-message-bubble {
|
|
max-width: 75%;
|
|
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 {
|
|
border-bottom-left-radius: var(--radius-sm);
|
|
}
|
|
|
|
.dm-message-bubble--outgoing {
|
|
background: var(--color-accent);
|
|
color: var(--color-white);
|
|
border-color: var(--color-accent-strong);
|
|
border-bottom-right-radius: var(--radius-sm);
|
|
}
|
|
|
|
.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: var(--space-xl);
|
|
}
|
|
|
|
.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: var(--size-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 (max-width: calc(theme("screens.md") - 0.02px)) {
|
|
.dm-app-shell[data-dm-view="list"] .dm-app-shell__main {
|
|
display: none !important;
|
|
}
|
|
|
|
.dm-app-shell[data-dm-view="thread"] .dm-app-shell__sidebar {
|
|
display: none !important;
|
|
}
|
|
|
|
.dm-message-thread__back {
|
|
@apply inline-flex items-center gap-2;
|
|
}
|
|
}
|
|
|
|
@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);
|
|
display: flex !important;
|
|
}
|
|
|
|
.dm-app-shell__main {
|
|
height: calc(100vh - var(--space-lg) * 2);
|
|
display: flex !important;
|
|
}
|
|
|
|
.dm-conversation-list__items {
|
|
max-height: none;
|
|
flex: 1;
|
|
}
|
|
|
|
.dm-message-thread__back {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
/* Ensure the profile pane for messages takes full height */
|
|
#profilePaneMessages {
|
|
height: 100%;
|
|
min-height: 0;
|
|
}
|
|
|
|
@media (min-width: theme("screens.md")) {
|
|
.profile-modal .dm-app-shell {
|
|
flex-direction: row;
|
|
align-items: stretch;
|
|
height: 100%;
|
|
min-height: 0;
|
|
}
|
|
|
|
.profile-modal .dm-app-shell__sidebar {
|
|
flex: 0 0 var(--size-18rem);
|
|
max-width: var(--size-20rem);
|
|
height: 100%;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.profile-modal .dm-app-shell__main {
|
|
flex: 1 1 auto;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.profile-modal .dm-conversation-list {
|
|
flex: 1;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.profile-modal .dm-conversation-list__items {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
min-height: 0;
|
|
overscroll-behavior-y: contain;
|
|
@apply no-scrollbar;
|
|
}
|
|
|
|
.profile-modal .dm-message-thread {
|
|
flex: 1;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.profile-modal .dm-message-thread__timeline {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
min-height: 0;
|
|
overscroll-behavior-y: contain;
|
|
@apply no-scrollbar;
|
|
}
|
|
}
|
|
|
|
@media (min-width: theme("screens.lg")) {
|
|
.dm-app-shell__sidebar {
|
|
flex-basis: var(--size-20rem);
|
|
}
|
|
|
|
.dm-message-thread__timeline {
|
|
padding: var(--space-md);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
.marquee-host {
|
|
position: relative;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
width: 100%;
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.marquee-static {
|
|
@apply truncate;
|
|
opacity: 1;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.marquee-anim {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
pointer-events: none;
|
|
mask-image: linear-gradient(
|
|
to right,
|
|
transparent,
|
|
black 4%,
|
|
black 96%,
|
|
transparent
|
|
);
|
|
-webkit-mask-image: linear-gradient(
|
|
to right,
|
|
transparent,
|
|
black 4%,
|
|
black 96%,
|
|
transparent
|
|
);
|
|
}
|
|
|
|
.marquee-track {
|
|
display: flex;
|
|
width: max-content;
|
|
animation: marquee-scroll linear infinite;
|
|
animation-duration: var(--marquee-duration, 10s);
|
|
animation-play-state: paused;
|
|
}
|
|
|
|
.marquee-item {
|
|
flex-shrink: 0;
|
|
padding-right: var(--space-xl); /* Gap between loop items */
|
|
}
|
|
|
|
@keyframes marquee-scroll {
|
|
0% {
|
|
transform: translateX(0);
|
|
}
|
|
100% {
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
|
|
/* Desktop Hover State */
|
|
@media (min-width: theme("screens.lg")) {
|
|
.card:hover .marquee-host.can-marquee .marquee-static {
|
|
opacity: 0;
|
|
}
|
|
.card:hover .marquee-host.can-marquee .marquee-anim {
|
|
opacity: 1;
|
|
}
|
|
.card:hover .marquee-host.can-marquee .marquee-track {
|
|
animation-play-state: running;
|
|
}
|
|
}
|
|
|
|
/* Mobile Active State */
|
|
@media (max-width: calc(theme("screens.lg") - var(--breakpoint-edge-offset))) {
|
|
.card[data-mobile-active="true"] {
|
|
--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[data-mobile-active="true"] .video-card__title {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.card[data-mobile-active="true"] .marquee-host.can-marquee .marquee-static {
|
|
opacity: 0;
|
|
}
|
|
.card[data-mobile-active="true"] .marquee-host.can-marquee .marquee-anim {
|
|
opacity: 1;
|
|
}
|
|
.card[data-mobile-active="true"] .marquee-host.can-marquee .marquee-track {
|
|
animation-play-state: running;
|
|
}
|
|
}
|
|
}
|
|
|
|
.no-scrollbar {
|
|
scrollbar-width: none !important;
|
|
-ms-overflow-style: none !important;
|
|
}
|
|
|
|
.no-scrollbar::-webkit-scrollbar {
|
|
display: none !important;
|
|
}
|