mirror of
https://github.com/PR0M3TH3AN/bitvid.git
synced 2026-10-27 07:52:24 +00:00
Remove video card shim classes
This commit is contained in:
thePR0M3TH3AN committed
1 parent
87d8dd7411
commit
18b1972fd8
7 files changed
+76
-108
No files matched your search
+13
-62
@@ -98,44 +98,36 @@ header img {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
/* --------------------------------------------------------------------------
|
||||
Legacy component compatibility shims
|
||||
--------------------------------------------------------------------------
|
||||
These selectors bridge existing markup to the token-backed primitives while
|
||||
templates migrate to the new utility classes. Remove once all views are
|
||||
updated. The shared token mappings now live in `css/tailwind.source.css`
|
||||
so this file only maintains bespoke overrides.
|
||||
--------------------------------------------------------------------------- */
|
||||
.video-card[data-owner-is-viewer="false"][data-url-health-state="offline"][data-stream-health-state="unhealthy"] {
|
||||
.card[data-owner-is-viewer="false"][data-url-health-state="offline"][data-stream-health-state="unhealthy"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.video-card.video-card--owner-private {
|
||||
.card[data-state="private"] {
|
||||
box-shadow:
|
||||
0 0 0 0.125rem var(--color-ring-private),
|
||||
var(--shadow-md);
|
||||
}
|
||||
|
||||
.video-card.video-card--owner-private:hover {
|
||||
.card[data-state="private"]:hover {
|
||||
box-shadow:
|
||||
0 0 0 0.125rem var(--color-ring-private-hover),
|
||||
var(--shadow-lg);
|
||||
}
|
||||
|
||||
.video-card.video-card--nsfw-owner {
|
||||
.card[data-alert="nsfw-owner"] {
|
||||
background-color: var(--color-black);
|
||||
box-shadow:
|
||||
0 0 0 0.0625rem var(--color-ring-critical),
|
||||
var(--shadow-md);
|
||||
}
|
||||
|
||||
.video-card.video-card--nsfw-owner:hover {
|
||||
.card[data-alert="nsfw-owner"]:hover {
|
||||
box-shadow:
|
||||
0 0 0 0.0625rem var(--color-ring-critical-strong),
|
||||
var(--shadow-lg);
|
||||
}
|
||||
|
||||
.video-card img.video-card__thumbnail--blurred {
|
||||
.card img[data-thumbnail-state="blurred"] {
|
||||
filter: blur(18px);
|
||||
transform: scale(1.05);
|
||||
transition:
|
||||
@@ -143,21 +135,21 @@ header img {
|
||||
transform 200ms ease;
|
||||
}
|
||||
|
||||
.video-card[data-owner-is-viewer="true"][data-url-health-state="offline"][data-stream-health-state="unhealthy"] {
|
||||
.card[data-owner-is-viewer="true"][data-url-health-state="offline"][data-stream-health-state="unhealthy"] {
|
||||
box-shadow:
|
||||
0 0 0 0.0625rem var(--color-ring-critical-soft),
|
||||
var(--shadow-md);
|
||||
}
|
||||
|
||||
.video-card[data-owner-is-viewer="true"][data-url-health-state="offline"][data-stream-health-state="unhealthy"]:hover {
|
||||
.card[data-owner-is-viewer="true"][data-url-health-state="offline"][data-stream-health-state="unhealthy"]:hover {
|
||||
box-shadow:
|
||||
0 0 0 0.0625rem var(--color-ring-critical-hover),
|
||||
var(--shadow-lg);
|
||||
}
|
||||
|
||||
.video-card--enter {
|
||||
.card[data-motion="enter"] {
|
||||
opacity: 0;
|
||||
animation: video-card-fade-in 220ms ease-out forwards;
|
||||
animation: card-motion-enter 220ms ease-out forwards;
|
||||
}
|
||||
|
||||
.video-visibility-toggle__option {
|
||||
@@ -198,7 +190,7 @@ header img {
|
||||
}
|
||||
|
||||
/* Watch history cards */
|
||||
@keyframes video-card-fade-in {
|
||||
@keyframes card-motion-enter {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(0.5rem);
|
||||
@@ -267,7 +259,7 @@ header img {
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.video-card--enter,
|
||||
.card[data-motion="enter"],
|
||||
.fade-in {
|
||||
opacity: 1;
|
||||
animation: none;
|
||||
@@ -279,40 +271,6 @@ header img {
|
||||
}
|
||||
}
|
||||
|
||||
.video-card:hover {
|
||||
transform: translateY(-0.25rem);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.video-card .thumbnail-container {
|
||||
position: relative;
|
||||
padding-top: 56.25%;
|
||||
background-color: var(--color-surface);
|
||||
overflow: hidden;
|
||||
border-top-left-radius: inherit;
|
||||
border-top-right-radius: inherit;
|
||||
}
|
||||
|
||||
.video-card img.thumbnail {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.video-card .details {
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
.video-card h3 {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-text);
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
/* Ensure modal portals always sit above the sidebar stack */
|
||||
#modalContainer {
|
||||
position: fixed;
|
||||
@@ -888,14 +846,7 @@ footer a:hover {
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.video-card .ratio-16-9 {
|
||||
border-radius: 0.75rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.video-card .ratio-16-9 > [data-video-thumbnail] {
|
||||
border-radius: inherit;
|
||||
}
|
||||
/* Legacy ratio helpers remain for static markup but modern cards apply rounding via utilities. */
|
||||
|
||||
/* Sidebar default states */
|
||||
#sidebarContainer {
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
:root{--color-page:#fff;--color-page-alt:#f9fafb;--color-surface:#0f172a;--color-surface-alt:#111827;--color-bg:var(--color-surface);--color-card:#1e293b;--color-card-private:#3b1d74;--color-card-critical:#3f0b13;--color-panel:#1f2937;--color-panel-hover:#334155;--color-border:#374151;--color-border-subtle:#d1d5db;--color-primary:#fe0032;--color-secondary:#ff93a5;--color-info:#60a5fa;--color-info-strong:#2563eb;--color-info-pressed:#1d4ed8;--color-muted-strong:#6b7280;--color-text:#f8fafc;--color-text-strong:#0f172a;--color-text-muted:var(--color-muted);--color-muted:#94a3b8;--color-muted-alt:#9ca3af;--color-subtle-text:#e2e8f0;--color-subtle:#e5e7eb;--color-critical:#7f1d1d;--color-critical-strong:#991b1b;--color-warning:#facc15;--color-warning-strong:#d97706;--color-warning-surface:rgba(146,64,14,.24);--color-neutral-700:#3f3f46;--color-neutral-600:#52525b;--color-white:#fff;--color-black:#000;--color-overlay:#1a2234;--color-overlay-black:rgba(0,0,0,.9);--color-overlay-muted:rgba(15,23,42,.55);--color-overlay-strong:rgba(15,23,42,.75);--color-overlay-darker:rgba(15,23,42,.88);--color-overlay-panel:rgba(31,41,55,.9);--color-overlay-panel-soft:rgba(31,41,55,.75);--color-overlay-panel-tint:rgba(31,41,55,.5);--color-overlay-panel-glass:rgba(30,41,59,.85);--color-overlay-veil:rgba(11,17,32,.96);--color-overlay-banner:rgba(51,65,85,.95);--color-overlay-panel-gradient-start:rgba(30,41,59,.92);--color-overlay-panel-gradient-end:rgba(15,23,42,.92);--color-surface-tint-subtle:rgba(148,163,184,.08);--color-border-translucent:rgba(148,163,184,.18);--color-border-translucent-strong:rgba(148,163,184,.25);--color-border-translucent-bright:rgba(148,163,184,.32);--color-border-translucent-stronger:rgba(148,163,184,.35);--color-border-translucent-strongest:rgba(148,163,184,.4);--color-border-translucent-glow:rgba(148,163,184,.55);--color-border-translucent-medium:rgba(148,163,184,.2);--color-border-neutral-soft:rgba(229,231,235,.35);--color-border-info-soft:rgba(96,165,250,.35);--color-border-sidebar-strong:rgba(55,65,81,.9);--color-ring-private:rgba(168,85,247,.55);--color-ring-private-hover:rgba(192,132,252,.65);--color-ring-critical:rgba(239,68,68,.4);--color-ring-critical-soft:rgba(239,68,68,.35);--color-ring-critical-hover:rgba(239,68,68,.45);--color-ring-critical-strong:rgba(239,68,68,.55);--color-ring-alert:rgba(220,38,38,.6);--color-gradient-visibility-start:rgba(129,140,248,.4);--color-gradient-visibility-end:rgba(192,132,252,.32);--color-white-soft:hsla(0,0%,100%,.1);--color-white-softer:hsla(0,0%,100%,.3);--color-white-softest:hsla(0,0%,100%,.4);--color-shadow-floating:rgba(8,11,30,.55);--color-shadow-elevated:rgba(8,11,30,.45);--color-shadow-panel:rgba(15,23,42,.35);--color-shadow-notification:rgba(15,23,42,.3);--color-shadow-sidebar:rgba(0,0,0,.45);--color-divider-strong:rgba(15,23,42,.35);--color-text-frosted-strong:rgba(226,232,240,.94);--color-text-frosted:rgba(226,232,240,.9);--color-text-frosted-soft:rgba(226,232,240,.82);--color-blog-transparent:transparent;--color-blog-cyan-500:#06b6d4;--color-blog-sky-500:#0bf;--color-blog-teal-600:#0e7490;--color-blog-green-800:#14532d;--color-blog-green-700:#15803d;--color-blog-teal-700:#164e63;--color-blog-gray-900:#171717;--color-blog-coffee-900:#1c1917;--color-blog-green-500:#22c55e;--color-blog-gray-800:#2b2b2b;--color-blog-gray-700:#3b3b3b;--color-blog-teal-accent:#3e8b8a;--color-blog-gray-650:#404040;--color-blog-brown-700:#44403c;--color-blog-purple-900:#581c87;--color-blog-gray-500:#666;--color-blog-gray-450:#737373;--color-blog-gray-440:#747474;--color-blog-brown-500:#78716c;--color-blog-rust-700:#7c2d12;--color-blog-purple-700:#7e22ce;--color-blog-purple-accent:#92379c;--color-blog-purple-muted:#96609c;--color-blog-gray-300:#999;--color-blog-purple-500:#a855f7;--color-blog-gray-275:#a9a9a9;--color-blog-red-600:#b91c1c;--color-blog-rust-600:#c2410c;--color-blog-error:#ca1717;--color-blog-gray-220:#cbcbcb;--color-blog-gray-210:#ccc;--color-blog-gray-200:#dedede;--color-blog-amber-500:#e4984d;--color-blog-gray-190:#e0e0e0;--color-blog-orange-600:#e35428;--color-blog-gray-180:#e9e9e9;--color-blog-gray-170:#ebebeb;--color-blog-red-500:#ef4444;--color-blog-amber-400:#f6ad55;--color-blog-neutral-100:#f5f5f5;--color-blog-neutral-120:#f6f6f6;--color-blog-orange-500:#f97316;--color-blog-neutral-50:#fdfdfd;--space-2xs:0.25rem;--space-xs:0.5rem;--space-sm:0.75rem;--space-md:1rem;--space-lg:1.5rem;--space-xl:2rem;--space-2xl:3rem;--radius-sm:0.25rem;--radius-md:0.5rem;--radius-lg:0.75rem;--radius-xl:1rem;--radius-full:9999px;--shadow-sm:0 0.0625rem 0.125rem 0 rgb(0 0 0/5%);--shadow-md:0 0.25rem 0.375rem -0.0625rem rgba(0,0,0,.1);--shadow-lg:0 0.625rem 0.9375rem -0.1875rem rgba(0,0,0,.1);--shadow-modal:0 1.25rem 2.5rem -0.375rem rgba(15,23,42,.55);--font-family-sans:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;--font-family-mono:"Fira Code","SFMono-Regular",ui-monospace,monospace;--font-size-xs:0.75rem;--font-size-sm:0.875rem;--font-size-base:1rem;--font-size-lLine truncated
|
||||
:root{--color-page:#fff;--color-page-alt:#f9fafb;--color-surface:#0f172a;--color-surface-alt:#111827;--color-bg:var(--color-surface);--color-card:#1e293b;--color-card-private:#3b1d74;--color-card-critical:#3f0b13;--color-panel:#1f2937;--color-panel-hover:#334155;--color-border:#374151;--color-border-subtle:#d1d5db;--color-primary:#fe0032;--color-secondary:#ff93a5;--color-info:#60a5fa;--color-info-strong:#2563eb;--color-info-pressed:#1d4ed8;--color-muted-strong:#6b7280;--color-text:#f8fafc;--color-text-strong:#0f172a;--color-text-muted:var(--color-muted);--color-muted:#94a3b8;--color-muted-alt:#9ca3af;--color-subtle-text:#e2e8f0;--color-subtle:#e5e7eb;--color-critical:#7f1d1d;--color-critical-strong:#991b1b;--color-warning:#facc15;--color-warning-strong:#d97706;--color-warning-surface:rgba(146,64,14,.24);--color-neutral-700:#3f3f46;--color-neutral-600:#52525b;--color-white:#fff;--color-black:#000;--color-overlay:#1a2234;--color-overlay-black:rgba(0,0,0,.9);--color-overlay-muted:rgba(15,23,42,.55);--color-overlay-strong:rgba(15,23,42,.75);--color-overlay-darker:rgba(15,23,42,.88);--color-overlay-panel:rgba(31,41,55,.9);--color-overlay-panel-soft:rgba(31,41,55,.75);--color-overlay-panel-tint:rgba(31,41,55,.5);--color-overlay-panel-glass:rgba(30,41,59,.85);--color-overlay-veil:rgba(11,17,32,.96);--color-overlay-banner:rgba(51,65,85,.95);--color-overlay-panel-gradient-start:rgba(30,41,59,.92);--color-overlay-panel-gradient-end:rgba(15,23,42,.92);--color-surface-tint-subtle:rgba(148,163,184,.08);--color-border-translucent:rgba(148,163,184,.18);--color-border-translucent-strong:rgba(148,163,184,.25);--color-border-translucent-bright:rgba(148,163,184,.32);--color-border-translucent-stronger:rgba(148,163,184,.35);--color-border-translucent-strongest:rgba(148,163,184,.4);--color-border-translucent-glow:rgba(148,163,184,.55);--color-border-translucent-medium:rgba(148,163,184,.2);--color-border-neutral-soft:rgba(229,231,235,.35);--color-border-info-soft:rgba(96,165,250,.35);--color-border-sidebar-strong:rgba(55,65,81,.9);--color-ring-private:rgba(168,85,247,.55);--color-ring-private-hover:rgba(192,132,252,.65);--color-ring-critical:rgba(239,68,68,.4);--color-ring-critical-soft:rgba(239,68,68,.35);--color-ring-critical-hover:rgba(239,68,68,.45);--color-ring-critical-strong:rgba(239,68,68,.55);--color-ring-alert:rgba(220,38,38,.6);--color-gradient-visibility-start:rgba(129,140,248,.4);--color-gradient-visibility-end:rgba(192,132,252,.32);--color-white-soft:hsla(0,0%,100%,.1);--color-white-softer:hsla(0,0%,100%,.3);--color-white-softest:hsla(0,0%,100%,.4);--color-shadow-floating:rgba(8,11,30,.55);--color-shadow-elevated:rgba(8,11,30,.45);--color-shadow-panel:rgba(15,23,42,.35);--color-shadow-notification:rgba(15,23,42,.3);--color-shadow-sidebar:rgba(0,0,0,.45);--color-divider-strong:rgba(15,23,42,.35);--color-text-frosted-strong:rgba(226,232,240,.94);--color-text-frosted:rgba(226,232,240,.9);--color-text-frosted-soft:rgba(226,232,240,.82);--color-blog-transparent:transparent;--color-blog-cyan-500:#06b6d4;--color-blog-sky-500:#0bf;--color-blog-teal-600:#0e7490;--color-blog-green-800:#14532d;--color-blog-green-700:#15803d;--color-blog-teal-700:#164e63;--color-blog-gray-900:#171717;--color-blog-coffee-900:#1c1917;--color-blog-green-500:#22c55e;--color-blog-gray-800:#2b2b2b;--color-blog-gray-700:#3b3b3b;--color-blog-teal-accent:#3e8b8a;--color-blog-gray-650:#404040;--color-blog-brown-700:#44403c;--color-blog-purple-900:#581c87;--color-blog-gray-500:#666;--color-blog-gray-450:#737373;--color-blog-gray-440:#747474;--color-blog-brown-500:#78716c;--color-blog-rust-700:#7c2d12;--color-blog-purple-700:#7e22ce;--color-blog-purple-accent:#92379c;--color-blog-purple-muted:#96609c;--color-blog-gray-300:#999;--color-blog-purple-500:#a855f7;--color-blog-gray-275:#a9a9a9;--color-blog-red-600:#b91c1c;--color-blog-rust-600:#c2410c;--color-blog-error:#ca1717;--color-blog-gray-220:#cbcbcb;--color-blog-gray-210:#ccc;--color-blog-gray-200:#dedede;--color-blog-amber-500:#e4984d;--color-blog-gray-190:#e0e0e0;--color-blog-orange-600:#e35428;--color-blog-gray-180:#e9e9e9;--color-blog-gray-170:#ebebeb;--color-blog-red-500:#ef4444;--color-blog-amber-400:#f6ad55;--color-blog-neutral-100:#f5f5f5;--color-blog-neutral-120:#f6f6f6;--color-blog-orange-500:#f97316;--color-blog-neutral-50:#fdfdfd;--space-2xs:0.25rem;--space-xs:0.5rem;--space-sm:0.75rem;--space-md:1rem;--space-lg:1.5rem;--space-xl:2rem;--space-2xl:3rem;--radius-sm:0.25rem;--radius-md:0.5rem;--radius-lg:0.75rem;--radius-xl:1rem;--radius-full:9999px;--shadow-sm:0 0.0625rem 0.125rem 0 rgb(0 0 0/5%);--shadow-md:0 0.25rem 0.375rem -0.0625rem rgba(0,0,0,.1);--shadow-lg:0 0.625rem 0.9375rem -0.1875rem rgba(0,0,0,.1);--shadow-modal:0 1.25rem 2.5rem -0.375rem rgba(15,23,42,.55);--font-family-sans:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;--font-family-mono:"Fira Code","SFMono-Regular",ui-monospace,monospace;--font-size-xs:0.75rem;--font-size-sm:0.875rem;--font-size-base:1rem;--font-size-lLine truncated
|
||||
|
||||
/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:var(--font-family-sans);font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:var(--font-family-mono);font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.\!container{width:100%!important}.container{width:100%}@media (min-width:640px){.\!container{max-width:640px!important}.container{max-width:640px}}@media (min-width:768px){.\!container{max-width:768px!important}.container{max-width:768px}}@media (min-width:1024px){.\!container{max-width:1024px!important}.container{max-width:1024px}}@media (min-width:1280px){.\!container{max-width:1280px!important}.container{max-width:1280px}}@media (min-width:1536px){.\!container{max-width:1536px!important}.container{max-width:1536px}}.focus-ring{outline:2px solid transparent;outline-offset:2px}.focus-ring:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-color:var(--color-info);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--color-surface);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1)}.popover{position:relative;display:inline-flex}.popover__panel{outline:2px solid transparent;outline-offset:2px}.popover__panel:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-color:var(--color-info);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--color-surface);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1)}.popover__panel{pointer-events:none;position:absolute;left:0;top:100%;z-index:70;margin-top:.5rem;min-width:12rem;transform-origin:top;--tw-scale-x:.95;--tw-scale-y:.95;border-radius:var(--radius-lg);border-width:1px;border-color:var(--color-border);--tw-border-opacity:0.4;background-color:var(--color-panel);padding:.75rem 1rem;font-size:var(--font-size-sm);line-height:var(--line-height-snug);color:var(--color-text);opacity:0;--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)Line truncated
|
||||
/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:var(--font-family-sans);font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:var(--font-family-mono);font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.\!container{width:100%!important}.container{width:100%}@media (min-width:640px){.\!container{max-width:640px!important}.container{max-width:640px}}@media (min-width:768px){.\!container{max-width:768px!important}.container{max-width:768px}}@media (min-width:1024px){.\!container{max-width:1024px!important}.container{max-width:1024px}}@media (min-width:1280px){.\!container{max-width:1280px!important}.container{max-width:1280px}}@media (min-width:1536px){.\!container{max-width:1536px!important}.container{max-width:1536px}}.focus-ring{outline:2px solid transparent;outline-offset:2px}.focus-ring:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-color:var(--color-info);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--color-surface);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1)}.popover{position:relative;display:inline-flex}.popover__panel{outline:2px solid transparent;outline-offset:2px}.popover__panel:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-color:var(--color-info);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--color-surface);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1)}.popover__panel{pointer-events:none;position:absolute;left:0;top:100%;z-index:70;margin-top:.5rem;min-width:12rem;transform-origin:top;--tw-scale-x:.95;--tw-scale-y:.95;border-radius:var(--radius-lg);border-width:1px;border-color:var(--color-border);--tw-border-opacity:0.4;background-color:var(--color-panel);padding:.75rem 1rem;font-size:var(--font-size-sm);line-height:var(--line-height-snug);color:var(--color-text);opacity:0;--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)Line truncated
|
||||
+4
-13
@@ -367,30 +367,21 @@
|
||||
grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
|
||||
}
|
||||
|
||||
/* Legacy compatibility shims */
|
||||
.video-card {
|
||||
@apply overflow-visible;
|
||||
}
|
||||
|
||||
.video-card.video-card--owner-private {
|
||||
@apply bg-card-private;
|
||||
}
|
||||
|
||||
.video-card.video-card--nsfw-owner {
|
||||
.card[data-alert="nsfw-owner"] {
|
||||
@apply border border-critical border-opacity-40 bg-black;
|
||||
}
|
||||
|
||||
.video-card.video-card--nsfw-owner:hover {
|
||||
.card[data-alert="nsfw-owner"]:hover {
|
||||
@apply border-opacity-60 shadow-lg;
|
||||
}
|
||||
|
||||
.video-card img.video-card__thumbnail--blurred {
|
||||
.card img[data-thumbnail-state="blurred"] {
|
||||
@apply transition duration-base ease-in-out;
|
||||
filter: blur(18px);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.video-card[data-owner-is-viewer="true"][data-url-health-state="offline"][data-stream-health-state="unhealthy"] {
|
||||
.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;
|
||||
}
|
||||
|
||||
|
||||
@@ -74,6 +74,8 @@ Mix in Tailwind utilities for icon spacing (`gap-3`), sizing (`px-lg`, `py-sm`),
|
||||
|
||||
Combine with padding utilities per layout. Interactive cards should maintain `cursor-pointer` manually (see legacy shim example below) until templates adopt dedicated controller classes.
|
||||
|
||||
> **2025-10-11 update:** The legacy `.video-card*` shim selectors were removed. Video grids should now render plain `.card` elements and opt into semantic variants via `data-state`, `data-alert`, and `data-motion` attributes. Runtime code no longer maps the deprecated classes, so older selectors will not receive token updates.
|
||||
|
||||
### Form Inputs
|
||||
|
||||
`.form-control` is the base primitive for text entry surfaces. It handles layout (`block`, `w-full`), rounded corners, subtle borders, muted placeholders, and the shared focus ring. Hovering deepens the border, focus highlights with `border-info-strong`, `:invalid` raises a critical border, and `:disabled` mutes the field while blocking pointer events.
|
||||
@@ -215,9 +217,10 @@ Compose `.popover` with a zap-specific panel variant when you need to surface th
|
||||
|
||||
During migration we keep existing selectors alive by layering `@apply` calls in `css/style.css`. Notable shims:
|
||||
|
||||
- `.video-card` → `.card`
|
||||
- `#profileModal .profile-switcher*` → `.card`, `.badge`, `.btn-ghost`
|
||||
|
||||
> **2025-10-11:** The `.video-card` shim family was removed. Templates must emit `.card` elements with the appropriate `data-state` and `data-alert` attributes instead of relying on the legacy class names.
|
||||
|
||||
We continue to expose aliases such as `.profile-switcher` and nested variations (for example, `.profile-switcher__item`) so existing profile and admin controllers stay functional while downstream templates finish their migration. These shims live under the "Legacy component compatibility" section and will be removed once templates switch to the new primitives.
|
||||
|
||||
> **Update (Q1 2025):** The modal shim that mapped `.modal-container`/`.modal-content` to the new primitives has been removed. All modal templates must mount `.bv-modal`, `.bv-modal-backdrop`, and `.bv-modal__panel` directly.
|
||||
|
||||
@@ -1917,14 +1917,13 @@ function renderChannelVideosFromList({
|
||||
? app.formatTimeAgo(video.created_at)
|
||||
: new Date(video.created_at * 1000).toLocaleString();
|
||||
|
||||
const highlightClasses = [];
|
||||
let cardState = "";
|
||||
if (canEdit && video.isPrivate) {
|
||||
highlightClasses.push("video-card--owner-private");
|
||||
cardState = "private";
|
||||
}
|
||||
if (!allowNsfw && video?.isNsfw === true && canEdit) {
|
||||
highlightClasses.push("video-card--nsfw-owner");
|
||||
cardState = "critical";
|
||||
}
|
||||
const highlightClass = highlightClasses.join(" ");
|
||||
|
||||
const videoCard = new VideoCard({
|
||||
document,
|
||||
@@ -1933,7 +1932,7 @@ function renderChannelVideosFromList({
|
||||
shareUrl,
|
||||
pointerInfo,
|
||||
timeAgo,
|
||||
highlightClass,
|
||||
cardState,
|
||||
capabilities: {
|
||||
canEdit,
|
||||
canDelete: canEdit,
|
||||
|
||||
@@ -7,8 +7,8 @@ export class VideoCard {
|
||||
timeAgo = "",
|
||||
postedAt = null,
|
||||
pointerInfo = null,
|
||||
highlightClass = "",
|
||||
animationClass = "",
|
||||
cardState = "",
|
||||
motionState = "",
|
||||
capabilities = {},
|
||||
formatters = {},
|
||||
helpers = {},
|
||||
@@ -30,9 +30,10 @@ export class VideoCard {
|
||||
this.video = video;
|
||||
this.index = index;
|
||||
this.shareUrl = shareUrl;
|
||||
this.highlightClass =
|
||||
typeof highlightClass === "string" ? highlightClass : "";
|
||||
this.animationClass = animationClass || "";
|
||||
this.cardState =
|
||||
typeof cardState === "string" ? cardState.trim() : "";
|
||||
this.motionState =
|
||||
typeof motionState === "string" ? motionState.trim() : "";
|
||||
this.pointerInfo = pointerInfo;
|
||||
this.capabilities = {
|
||||
canEdit: false,
|
||||
@@ -223,14 +224,14 @@ export class VideoCard {
|
||||
const doc = this.document;
|
||||
|
||||
const root = this.createElement("div", {
|
||||
classNames: ["video-card", "card"]
|
||||
classNames: ["card"]
|
||||
});
|
||||
|
||||
this.applyClassListFromString(root, this.highlightClass);
|
||||
this.applyClassListFromString(root, this.animationClass);
|
||||
|
||||
this.root = root;
|
||||
|
||||
this.root.dataset.component = "video-card";
|
||||
this.syncCardState();
|
||||
this.syncMotionState();
|
||||
if (this.video?.id) {
|
||||
root.dataset.videoId = this.video.id;
|
||||
}
|
||||
@@ -358,7 +359,7 @@ export class VideoCard {
|
||||
this.thumbnailEl = img;
|
||||
|
||||
if (this.shouldMaskNsfwForOwner) {
|
||||
img.classList.add("video-card__thumbnail--blurred");
|
||||
img.dataset.thumbnailState = "blurred";
|
||||
}
|
||||
|
||||
const markThumbnailAsLoaded = () => {
|
||||
@@ -1212,18 +1213,27 @@ export class VideoCard {
|
||||
if (this.root.dataset.nsfwVisibility) {
|
||||
delete this.root.dataset.nsfwVisibility;
|
||||
}
|
||||
if (this.root.dataset.alert) {
|
||||
delete this.root.dataset.alert;
|
||||
}
|
||||
this.syncCardState();
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.shouldMaskNsfwForOwner) {
|
||||
this.root.dataset.nsfwVisibility = "owner-only";
|
||||
this.root.classList.add("video-card--nsfw-owner");
|
||||
this.root.dataset.alert = "nsfw-owner";
|
||||
this.root.dataset.state = "critical";
|
||||
return;
|
||||
}
|
||||
|
||||
this.root.dataset.nsfwVisibility = this.nsfwContext.allowNsfw
|
||||
? "allowed"
|
||||
: "hidden";
|
||||
if (this.root.dataset.alert) {
|
||||
delete this.root.dataset.alert;
|
||||
}
|
||||
this.syncCardState();
|
||||
}
|
||||
|
||||
applyPointerDataset() {
|
||||
@@ -1550,15 +1560,30 @@ export class VideoCard {
|
||||
});
|
||||
}
|
||||
|
||||
applyClassListFromString(el, classString) {
|
||||
if (!el || !classString) {
|
||||
syncCardState() {
|
||||
if (!this.root) {
|
||||
return;
|
||||
}
|
||||
classString
|
||||
.split(/\s+/)
|
||||
.map((cls) => cls.trim())
|
||||
.filter(Boolean)
|
||||
.forEach((cls) => el.classList.add(cls));
|
||||
if (this.cardState) {
|
||||
this.root.dataset.state = this.cardState;
|
||||
return;
|
||||
}
|
||||
if (this.root.dataset.state && !this.shouldMaskNsfwForOwner) {
|
||||
delete this.root.dataset.state;
|
||||
}
|
||||
}
|
||||
|
||||
syncMotionState() {
|
||||
if (!this.root) {
|
||||
return;
|
||||
}
|
||||
if (this.motionState) {
|
||||
this.root.dataset.motion = this.motionState;
|
||||
return;
|
||||
}
|
||||
if (this.root.dataset.motion) {
|
||||
delete this.root.dataset.motion;
|
||||
}
|
||||
}
|
||||
|
||||
createElement(tagName, { classNames = [], attrs = {}, textContent } = {}) {
|
||||
|
||||
@@ -348,18 +348,17 @@ export class VideoListView {
|
||||
const shareUrl = this.buildShareUrl(video, shareBase);
|
||||
const canEdit = this.utils.canEditVideo(video);
|
||||
const canDelete = this.utils.canDeleteVideo(video);
|
||||
const highlightClasses = [];
|
||||
let cardState = "";
|
||||
if (canEdit && video.isPrivate) {
|
||||
highlightClasses.push("video-card--owner-private");
|
||||
cardState = "private";
|
||||
}
|
||||
const viewerSeesBlockedNsfw =
|
||||
!this.allowNsfw && video?.isNsfw === true && canEdit;
|
||||
if (viewerSeesBlockedNsfw) {
|
||||
highlightClasses.push("video-card--nsfw-owner");
|
||||
cardState = "critical";
|
||||
}
|
||||
const highlightClass = highlightClasses.join(" ");
|
||||
const isNewlyRendered = !previouslyRenderedIds.has(video.id);
|
||||
const animationClass = isNewlyRendered ? "video-card--enter" : "";
|
||||
const motionState = isNewlyRendered ? "enter" : "";
|
||||
const knownPostedAt = this.utils.getKnownVideoPostedAt(video);
|
||||
const normalizedPostedAt = Number.isFinite(knownPostedAt)
|
||||
? Math.floor(knownPostedAt)
|
||||
@@ -393,8 +392,8 @@ export class VideoListView {
|
||||
pointerInfo,
|
||||
timeAgo,
|
||||
postedAt: normalizedPostedAt,
|
||||
highlightClass,
|
||||
animationClass,
|
||||
cardState,
|
||||
motionState,
|
||||
nsfwContext: {
|
||||
isNsfw: video?.isNsfw === true,
|
||||
allowNsfw: this.allowNsfw,
|
||||
|
||||
Reference in new issue
Block a user