mirror of
https://github.com/PR0M3TH3AN/bitvid.git
synced 2026-10-27 16:02:26 +00:00
thePR0M3TH3ANandClaude Opus 4.8
d23cfa6697
Blossom servers reject a .torrent (415), so a Blossom video's magnet is webseed-only and can't bootstrap WebTorrent. This restores P2P without hosting a .torrent: - Upload hardening: correct Content-Type (overrides empty/generic application/octet-stream), HTTP status surfaced in errors, and best-effort .torrent sidecar so a rejected sidecar no longer sinks the upload (URL-first fallback). - Publish: when the .torrent can't be hosted, publish the piece-map as an infohash-keyed companion event (kind 30078, d=bitvid:torrent:<infohash>) and ship a ws= magnet. Gated by FEATURE_BLOSSOM_TORRENT_METADATA (default off = no trace); size-capped. - Playback: torrentMetadataService lazily fetches the companion, VERIFIES the reconstructed infohash === the magnet's btih (untrusted content), sources the webseed from the video event, and hands the .torrent buffer to WebTorrent so it streams with zero peers. Relay reads go through the subscription manager. Inherited by any upload-based media (shorts, audio-publish); excludes ingest/live. See docs/blossom-torrent-metadata-plan.md. Includes a Prettier reflow in css/tailwind.source.css. Co-Authored-By: Claude Opus 4.8 <[email protected]>
6801 lines
172 KiB
CSS
6801 lines
172 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;
|
|
}
|
|
|
|
/* Admin "verified" star — sits in the corner opposite the notification dot.
|
|
A gold star on a page-colored disc so it stays legible on any avatar, and
|
|
pairs visually with the red dot. Positioned top-left by default (the dot is
|
|
top-right); per-surface rules below tune the inset for larger avatars. */
|
|
.admin-star {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 3;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
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-warning);
|
|
color: var(--color-warning-on);
|
|
font-size: var(--font-size-3xs);
|
|
line-height: 1;
|
|
pointer-events: none;
|
|
}
|
|
|
|
#profileButton .admin-star {
|
|
top: var(--space-2xs);
|
|
left: var(--space-2xs);
|
|
}
|
|
|
|
/* Non-clipped relative shell that decorateAdminAvatar wraps around a circular
|
|
avatar so the corner star isn't clipped. Sizes to the avatar it holds. */
|
|
.admin-avatar-wrap {
|
|
position: relative;
|
|
display: inline-flex;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Gold ring hugging an admin avatar. A thin page-colored gap makes it read as
|
|
a ring, not a border. box-shadow isn't clipped by the avatar's own
|
|
overflow, so it works on clipped circular avatars. */
|
|
.admin-ring {
|
|
box-shadow:
|
|
0 0 0 var(--border-width-hairline) var(--color-page),
|
|
0 0 0 calc(var(--border-width-hairline) * 3) var(--status-warning);
|
|
}
|
|
|
|
/* Gold ring around the avatar when the logged-in user is an admin — the
|
|
unmistakable "you're an admin" signal on your own profile button. A thin
|
|
page-colored gap separates the avatar from the ring so it reads as a ring,
|
|
not a border. Box-shadow isn't clipped by the avatar's own overflow. */
|
|
#profileButton.is-admin > div {
|
|
box-shadow:
|
|
0 0 0 var(--border-width-hairline) var(--color-page),
|
|
0 0 0 calc(var(--border-width-hairline) * 3) var(--status-warning);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.search-filter-chip {
|
|
@apply inline-flex items-center gap-2 rounded-full border border-border-subtle bg-surface-alt px-3 py-1 text-xs font-medium text-text transition-colors duration-base ease-out;
|
|
}
|
|
|
|
.search-filter-chip[data-state="on"] {
|
|
@apply border-accent-strong bg-accent-strong text-white;
|
|
}
|
|
|
|
@media (min-width: theme("screens.md")) {
|
|
.search-filters-panel.is-advanced-open {
|
|
width: var(--size-40rem);
|
|
}
|
|
}
|
|
|
|
[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));
|
|
}
|
|
|
|
/* `display: flex` above overrides the UA `[hidden] { display: none }`, so an
|
|
overlay with the `hidden` attribute (e.g. the beacon processing spinner)
|
|
would render on load and cover the whole page. Restore hide-on-hidden. */
|
|
.ds-overlay-backdrop[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
/* "Advanced — paste a connection manually" disclosure in the Wallet pane
|
|
(Bitcoin Connect). A subtle rotating caret replaces the default marker. */
|
|
.wallet-advanced__summary {
|
|
list-style: none;
|
|
}
|
|
|
|
.wallet-advanced__summary::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
.wallet-advanced__summary::before {
|
|
content: "▸ ";
|
|
color: var(--text-subtle);
|
|
}
|
|
|
|
.wallet-advanced[open] > .wallet-advanced__summary::before {
|
|
content: "▾ ";
|
|
}
|
|
|
|
.popularity-modal__backdrop {
|
|
z-index: var(--z-overlay-popover);
|
|
padding: var(--space-md);
|
|
}
|
|
|
|
.popularity-modal {
|
|
width: 100%;
|
|
max-width: var(--popularity-modal-max-width);
|
|
}
|
|
|
|
.popularity-modal__chart {
|
|
width: 100%;
|
|
height: var(--popularity-modal-chart-height);
|
|
}
|
|
|
|
.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") - 0.02px)) {
|
|
.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;
|
|
}
|
|
|
|
/* `display: inline-flex` above overrides the UA `[hidden] { display: none }`,
|
|
which left the zap button visible (and clickable-looking) while it was still
|
|
`hidden`+`disabled` during load — users clicked a dead button repeatedly. Make
|
|
the hidden attribute win so the button only appears once it's enabled/ready. */
|
|
.video-modal__action-button[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.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 {
|
|
position: relative;
|
|
inline-size: var(--comment-avatar-size);
|
|
block-size: var(--comment-avatar-size);
|
|
/* rounded so the admin ring (box-shadow) reads as a circle */
|
|
border-radius: var(--radius-full);
|
|
}
|
|
|
|
.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 content is inserted as a single text node, so preserve the
|
|
author's line breaks/paragraphs instead of collapsing them into one
|
|
run-on line. pre-wrap keeps newlines while still wrapping long lines. */
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
/* Zap total on video cards (#47 follow-up): orange, pushed to the row's end
|
|
so views/comments stay left-aligned and sats sit right-aligned. Hidden
|
|
(via the utility class) until a nonzero total is known. */
|
|
.video-card__zaps {
|
|
color: var(--color-zap);
|
|
margin-inline-start: auto;
|
|
}
|
|
|
|
.video-card__zaps .zap-total-text {
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* Same treatment in the player modal: orange sats on the far side of the
|
|
meta row (the row is justify-between, views stay left). */
|
|
.video-modal__zaps {
|
|
color: var(--color-zap);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* Zap orange as a currentColor source for the popularity chart's zaps line
|
|
+ legend swatch (mirrors how the views line uses .text-accent). */
|
|
.text-zap {
|
|
color: var(--color-zap);
|
|
}
|
|
|
|
.popularity-legend {
|
|
display: flex;
|
|
gap: var(--space-md);
|
|
align-items: center;
|
|
font-size: var(--font-size-2xs);
|
|
color: var(--color-text-muted);
|
|
margin-block-start: var(--space-2xs);
|
|
}
|
|
|
|
.popularity-legend__item {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--space-3xs);
|
|
}
|
|
|
|
.popularity-legend__swatch {
|
|
inline-size: var(--space-sm);
|
|
block-size: var(--size-3px, 0.1875rem);
|
|
border-radius: var(--radius-full);
|
|
background-color: currentColor;
|
|
}
|
|
|
|
/* #37: channel playlists — each card is a stacked "pile of clips" cover with a
|
|
themed gradient scrim and the title set bold over it. */
|
|
.playlist-grid {
|
|
@apply grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4;
|
|
gap: var(--space-lg);
|
|
}
|
|
|
|
.playlist-card {
|
|
position: relative;
|
|
display: block;
|
|
aspect-ratio: 16 / 9;
|
|
text-decoration: none;
|
|
/* leave room for the offset stack layers to peek out */
|
|
margin-block-start: var(--space-2xs);
|
|
margin-inline-end: var(--space-xs);
|
|
transition: transform 0.14s ease-out;
|
|
}
|
|
|
|
/* Two offset layers behind the cover read as a stack of videos. */
|
|
.playlist-card::before,
|
|
.playlist-card::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: var(--radius-md);
|
|
background-color: var(--color-page-alt);
|
|
border: var(--border-width-hairline) solid var(--color-overlay-strong);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.playlist-card::before {
|
|
transform: translate(var(--size-5px), calc(-1 * var(--size-5px)))
|
|
rotate(2.5deg);
|
|
}
|
|
|
|
.playlist-card::after {
|
|
transform: translate(calc(-1 * var(--size-4px)), calc(-1 * var(--size-3px)))
|
|
rotate(-2deg);
|
|
}
|
|
|
|
.playlist-card__thumb {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 1;
|
|
border-radius: var(--radius-md);
|
|
overflow: hidden;
|
|
background-color: var(--color-page-alt);
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
.playlist-card:hover {
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.playlist-card:hover .playlist-card__thumb {
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
|
|
.playlist-card__image {
|
|
position: absolute;
|
|
inset: 0;
|
|
inline-size: 100%;
|
|
block-size: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
/* Themed scrim: accent-tinted dark at the base fading to clear, so the bold
|
|
title reads over any cover (always dark, so the title is always white). */
|
|
.playlist-card__scrim {
|
|
position: absolute;
|
|
inset: 0;
|
|
background-image: linear-gradient(
|
|
to top,
|
|
color-mix(in srgb, var(--color-accent-strong) 62%, black) 0%,
|
|
color-mix(in srgb, var(--color-accent) 26%, transparent) 45%,
|
|
transparent 74%
|
|
);
|
|
}
|
|
|
|
.playlist-card__count {
|
|
position: absolute;
|
|
z-index: 2;
|
|
inset-block-start: var(--space-2xs);
|
|
inset-inline-end: var(--space-2xs);
|
|
border-radius: var(--radius-sm);
|
|
padding-block: var(--space-3xs);
|
|
padding-inline: var(--space-2xs);
|
|
font-size: var(--font-size-2xs);
|
|
font-weight: 600;
|
|
color: var(--color-white);
|
|
background-color: var(--color-overlay-strong);
|
|
}
|
|
|
|
.playlist-card__title {
|
|
position: absolute;
|
|
z-index: 2;
|
|
inset-inline: 0;
|
|
inset-block-end: 0;
|
|
margin: 0;
|
|
padding: var(--space-sm);
|
|
font-size: var(--font-size-sm);
|
|
font-weight: 700;
|
|
line-height: 1.2;
|
|
color: var(--color-white);
|
|
text-shadow: 0 var(--size-2px) var(--size-3px) var(--color-overlay-black);
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* #37: profile modal "Playlists" management pane — collapsible rows. */
|
|
.playlist-row {
|
|
border: var(--border-width-hairline) solid var(--color-border-subtle);
|
|
border-radius: var(--radius-md);
|
|
overflow: hidden;
|
|
background-color: var(--color-page-alt);
|
|
}
|
|
|
|
.playlist-row + .playlist-row {
|
|
margin-block-start: var(--space-2xs);
|
|
}
|
|
|
|
.playlist-row__head {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
padding: var(--space-sm);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.playlist-row__chevron svg {
|
|
color: var(--color-text-muted);
|
|
transition: transform 0.15s ease-out;
|
|
}
|
|
|
|
.playlist-row__chevron[data-open="true"] svg {
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
.playlist-row__meta {
|
|
flex: 1 1 auto;
|
|
min-inline-size: 0;
|
|
}
|
|
|
|
.playlist-row__title {
|
|
margin: 0;
|
|
font-weight: 600;
|
|
color: var(--color-text-strong);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.playlist-row__count {
|
|
margin: 0;
|
|
font-size: var(--font-size-2xs);
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
.playlist-row__actions {
|
|
display: flex;
|
|
gap: var(--space-2xs);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.playlist-row__videos {
|
|
border-block-start: var(--border-width-hairline) solid
|
|
var(--color-border-subtle);
|
|
padding: var(--space-2xs) var(--space-sm) var(--space-sm);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-2xs);
|
|
}
|
|
|
|
.playlist-row__empty {
|
|
padding-block: var(--space-2xs);
|
|
font-size: var(--font-size-sm);
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
.playlist-video {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
cursor: grab;
|
|
}
|
|
|
|
.playlist-video:active {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
.playlist-video--dragging {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.playlist-video--drop-target {
|
|
box-shadow: inset 0 var(--size-2px) 0 0 var(--color-accent);
|
|
}
|
|
|
|
.playlist-video__title {
|
|
flex: 1 1 auto;
|
|
min-inline-size: 0;
|
|
font-size: var(--font-size-sm);
|
|
color: var(--color-text);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.playlist-video__controls {
|
|
display: flex;
|
|
gap: var(--space-3xs);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* #23: admin Submissions cards. */
|
|
.submission-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-2xs);
|
|
padding: var(--space-sm);
|
|
border: var(--border-width-hairline) solid var(--color-border-subtle);
|
|
border-radius: var(--radius-md);
|
|
background-color: var(--color-page-alt);
|
|
}
|
|
|
|
.submission-card + .submission-card {
|
|
margin-block-start: var(--space-2xs);
|
|
}
|
|
|
|
.submission-card__head {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.submission-card__type {
|
|
padding-block: var(--space-3xs);
|
|
padding-inline: var(--space-2xs);
|
|
border-radius: var(--radius-full);
|
|
font-size: var(--font-size-2xs);
|
|
font-weight: 600;
|
|
color: var(--color-white);
|
|
background-color: var(--color-accent-strong);
|
|
}
|
|
|
|
.submission-card__applicant {
|
|
min-inline-size: 0;
|
|
font-size: var(--font-size-2xs);
|
|
color: var(--color-text-muted);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.submission-card__body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-3xs);
|
|
}
|
|
|
|
.submission-card__heading {
|
|
margin: 0;
|
|
font-size: var(--font-size-sm);
|
|
font-weight: 600;
|
|
color: var(--color-text-strong);
|
|
}
|
|
|
|
.submission-card__line {
|
|
margin: 0;
|
|
font-size: var(--font-size-sm);
|
|
color: var(--color-text);
|
|
word-break: break-word;
|
|
}
|
|
|
|
.submission-card__actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--space-sm);
|
|
align-items: flex-start;
|
|
}
|
|
|
|
/* Each action pairs its button with a one-line description so a moderator
|
|
knows exactly what the control does before clicking. */
|
|
.submission-card__action {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-3xs);
|
|
min-inline-size: 0;
|
|
}
|
|
|
|
.submission-card__action-hint {
|
|
font-size: var(--font-size-2xs);
|
|
color: var(--color-text-muted);
|
|
max-inline-size: 22ch;
|
|
}
|
|
|
|
/* #43: always-visible active-identity pill. Rendered after the header in
|
|
flow and pulled up with a negative block-start margin so it sits half-on /
|
|
half-off the header divider — every pane shows who you're acting as. */
|
|
.profile-modal__identity {
|
|
align-self: center;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--space-xs);
|
|
max-inline-size: min(80%, calc(var(--profile-modal-active-min-width) * 2));
|
|
padding: var(--space-3xs);
|
|
padding-inline-end: var(--space-md);
|
|
border-radius: var(--radius-full);
|
|
border: var(--border-width-hairline) solid var(--color-border-translucent);
|
|
background-color: var(--color-panel);
|
|
color: var(--color-text);
|
|
box-shadow: var(--shadow-md);
|
|
position: relative;
|
|
z-index: 2;
|
|
margin-block-start: calc(-1 * var(--space-sm));
|
|
margin-block-end: calc(-1 * var(--space-3xs));
|
|
cursor: pointer;
|
|
text-align: start;
|
|
}
|
|
|
|
.profile-modal__identity.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.profile-modal__identity:hover {
|
|
border-color: var(--color-accent);
|
|
}
|
|
|
|
.profile-modal__identity-avatar {
|
|
display: flex;
|
|
inline-size: var(--space-xl);
|
|
block-size: var(--space-xl);
|
|
flex-shrink: 0;
|
|
overflow: hidden;
|
|
border-radius: var(--radius-full);
|
|
border: var(--border-width-hairline) solid var(--color-accent);
|
|
background-color: var(--color-surface);
|
|
}
|
|
|
|
.profile-modal__identity-avatar img {
|
|
inline-size: 100%;
|
|
block-size: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.profile-modal__identity-copy {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-inline-size: 0;
|
|
}
|
|
|
|
.profile-modal__identity-kicker {
|
|
font-size: var(--font-size-3xs);
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: var(--tracking-extra-wide);
|
|
color: var(--color-accent);
|
|
line-height: var(--line-height-tight);
|
|
}
|
|
|
|
.profile-modal__identity-name {
|
|
font-size: var(--font-size-sm);
|
|
font-weight: 600;
|
|
line-height: var(--line-height-tight);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
/* Nav buttons host an absolutely-positioned unread dot, so they must be the
|
|
positioning context — otherwise the dot resolves against the whole nav
|
|
column (top:50%/left:-6px of the list, not the button). */
|
|
.profile-modal__nav > button {
|
|
position: relative;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
/* Pending-submissions dot on the Admin pane's "Submissions" subtab. The
|
|
subtabs sit in a horizontal row, so this dot rides the top-right corner
|
|
(not the left edge like the vertical nav dots). */
|
|
.admin-subtab-has-dot {
|
|
position: relative;
|
|
}
|
|
|
|
.admin-subtab-dot {
|
|
position: absolute;
|
|
top: calc(-1 * var(--space-3xs));
|
|
right: calc(-1 * var(--space-3xs));
|
|
width: var(--space-sm);
|
|
height: var(--space-sm);
|
|
border-radius: var(--radius-full);
|
|
border: var(--border-width-hairline) solid var(--surface-panel);
|
|
background-color: var(--status-danger);
|
|
display: none;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.admin-subtab-dot.is-visible {
|
|
display: block;
|
|
}
|
|
|
|
/* Compact creator/account cards (Subscriptions, Friends, Blocked, Admin
|
|
lists, Moderation). Desktop lays them out in a row: summary left, actions
|
|
right. `.profile-account-card` is the card itself (padded); the
|
|
`--row` variant is for a nested flex row inside an already-padded card. */
|
|
.profile-account-card,
|
|
.profile-account-card__row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--space-md);
|
|
}
|
|
|
|
.profile-account-card {
|
|
padding: var(--space-md);
|
|
}
|
|
|
|
.profile-account-card__actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
gap: var(--space-2xs);
|
|
}
|
|
|
|
/* Phones: stack the card so the name/npub get the full width (no more
|
|
4-line-wrapped npub in a crammed column), with the actions as a full-width
|
|
row of equal-width buttons below. */
|
|
@media (max-width: calc(theme("screens.sm") - 0.02px)) {
|
|
.profile-account-card,
|
|
.profile-account-card__row {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
gap: var(--space-sm);
|
|
}
|
|
|
|
.profile-account-card {
|
|
padding: var(--space-sm);
|
|
}
|
|
|
|
.profile-account-card__actions > * {
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
/* tighter buttons so all three fit one clean row */
|
|
.profile-account-card__actions .btn-ghost {
|
|
padding-inline: var(--space-sm);
|
|
}
|
|
}
|
|
|
|
.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") - 0.02px)) {
|
|
.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;
|
|
}
|
|
}
|
|
|
|
/* Mobile: the profile tab nav (full-width menu view) becomes an app-grid — icon
|
|
tiles with the title centered below each icon, instead of the desktop vertical
|
|
list. Desktop (>=lg) keeps its vertical nav (the min-width:lg rule below wins
|
|
at the exact breakpoint via source order). NOTE: the @media condition must NOT
|
|
use a CSS `var()` — custom properties are invalid inside media conditions and
|
|
Chromium drops the whole block. `theme("screens.lg")` resolves to a literal at
|
|
build time, which is valid. */
|
|
@media (max-width: calc(theme("screens.lg") - 0.02px)) {
|
|
.profile-modal__nav {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: var(--space-xs);
|
|
/* Every tile the SAME height, so a 2-line label can't stretch its row
|
|
taller than the others (the "ragged grid of ellipses" fix). */
|
|
grid-auto-rows: var(--profile-modal-nav-tile-height);
|
|
}
|
|
|
|
.profile-modal__nav > button {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
gap: var(--space-2xs);
|
|
width: 100%;
|
|
block-size: 100%;
|
|
/* Consistent rounded-square tiles, not rounded-full ellipses (btn's
|
|
default) that turn into circles once a tile gets taller. */
|
|
border-radius: var(--radius-xl);
|
|
/* Subtle fill so they read as solid cards, not floating outlines. The
|
|
active tile's bg-primary (higher specificity) still wins. */
|
|
background-color: var(--color-panel);
|
|
padding-block: var(--space-xs);
|
|
padding-inline: var(--space-3xs);
|
|
line-height: 1.15;
|
|
overflow: hidden;
|
|
/* wrap labels at spaces, not mid-word */
|
|
overflow-wrap: break-word;
|
|
word-break: normal;
|
|
hyphens: none;
|
|
}
|
|
|
|
/* slightly larger glyph for the tile */
|
|
.profile-modal__nav > button svg {
|
|
width: var(--space-lg);
|
|
height: var(--space-lg);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* In the tile grid the unread dot rides the tile's top-right corner instead
|
|
of the vertical-nav left edge (where it landed in the grid gutter). */
|
|
.profile-modal__nav > button .profile-nav__unread-dot {
|
|
top: var(--space-2xs);
|
|
left: auto;
|
|
right: var(--space-2xs);
|
|
transform: 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);
|
|
}
|
|
|
|
.modal-always-on-top {
|
|
z-index: var(--z-modal-always-top) !important;
|
|
}
|
|
|
|
#playerModal {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: var(--z-modal-player);
|
|
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;
|
|
}
|
|
|
|
#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 .form-hint {
|
|
margin-top: var(--space-xs);
|
|
font-size: var(--font-size-2xs);
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
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 {
|
|
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,
|
|
.dm-contact-row--active:hover,
|
|
.dm-contact-row--active:focus-visible {
|
|
background: color-mix(in srgb, var(--color-accent) 16%, transparent);
|
|
border-color: color-mix(
|
|
in srgb,
|
|
var(--color-accent) 60%,
|
|
var(--border-strong)
|
|
);
|
|
box-shadow: inset 3px 0 0 0 var(--color-accent);
|
|
}
|
|
|
|
.dm-contact-row--active .dm-contact-row__name {
|
|
color: var(--color-accent-strong);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
/* Non-clipped relative shell used only when a DM avatar needs an admin star
|
|
in its corner (the .dm-avatar itself clips to a circle). */
|
|
.dm-avatar-wrap {
|
|
position: relative;
|
|
display: inline-flex;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
/* Non-clipped relative shell used only when a message avatar needs an admin
|
|
star; the plain .dm-message-avatar img has no wrapper otherwise. */
|
|
.dm-message-avatar-wrap {
|
|
position: relative;
|
|
display: inline-flex;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.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") - 0.02px)) {
|
|
.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;
|
|
}
|
|
|
|
/* Embed & Video Modal Fixes */
|
|
@layer components {
|
|
/* Logo accent wiring */
|
|
.bv-logo__accent {
|
|
fill: var(--bitvid-accent, var(--logo-accent-color));
|
|
}
|
|
}
|