mirror of
https://github.com/PR0M3TH3AN/bitvid.git
synced 2026-10-27 07:52:24 +00:00
Remove legacy CSS and enable design system by default
This commit is contained in:
1 parent
0bdc578890
commit
3f1238b5a9
39 files changed
+1259
-1873
No files matched your search
@@ -10,7 +10,7 @@
|
||||
<!-- Include Tailwind CSS -->
|
||||
<link href="css/tailwind.generated.css" rel="stylesheet" />
|
||||
</head>
|
||||
<body class="bg-surface text-text" data-ds="legacy">
|
||||
<body class="bg-surface text-text" data-ds="new">
|
||||
<!-- Application Form Modal -->
|
||||
<div
|
||||
id="nostrFormModal"
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
aria-modal="true"
|
||||
aria-labelledby="bugFixModalTitle"
|
||||
aria-describedby="bugFixModalDescription"
|
||||
data-ds="legacy"
|
||||
data-ds="new"
|
||||
>
|
||||
<div class="bv-modal-backdrop" data-dismiss></div>
|
||||
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
aria-modal="true"
|
||||
aria-labelledby="contentAppealsModalTitle"
|
||||
aria-describedby="contentAppealsModalDescription"
|
||||
data-ds="legacy"
|
||||
data-ds="new"
|
||||
>
|
||||
<div class="bv-modal-backdrop" data-dismiss></div>
|
||||
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
aria-modal="true"
|
||||
aria-labelledby="disclaimerModalTitle"
|
||||
aria-describedby="disclaimerModalDescription"
|
||||
data-ds="legacy"
|
||||
data-ds="new"
|
||||
>
|
||||
<div class="bv-modal-backdrop" data-dismiss></div>
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
tabindex="-1"
|
||||
data-ds="legacy"
|
||||
data-ds="new"
|
||||
>
|
||||
<div id="editVideoModalOverlay" class="bv-modal-backdrop"></div>
|
||||
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
aria-modal="true"
|
||||
aria-labelledby="featureRequestModalTitle"
|
||||
aria-describedby="featureRequestModalDescription"
|
||||
data-ds="legacy"
|
||||
data-ds="new"
|
||||
>
|
||||
<div class="bv-modal-backdrop" data-dismiss></div>
|
||||
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
aria-modal="true"
|
||||
aria-labelledby="generalFeedbackModalTitle"
|
||||
aria-describedby="generalFeedbackModalDescription"
|
||||
data-ds="legacy"
|
||||
data-ds="new"
|
||||
>
|
||||
<div class="bv-modal-backdrop" data-dismiss></div>
|
||||
|
||||
|
||||
@@ -5,13 +5,11 @@
|
||||
<title>bitvid Whitelist Application Form</title>
|
||||
<!-- Link to your main stylesheet -->
|
||||
|
||||
<link rel="stylesheet" href="../../css/style.css?v=2024.10.29" />
|
||||
<link rel="stylesheet" href="../../css/tailwind.generated.css" />
|
||||
<link rel="stylesheet" href="./iframe-forms.css" />
|
||||
<!-- Load nostr‑tools v2.10.4 -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/nostr.bundle.min.js"></script>
|
||||
</head>
|
||||
<body data-ds="legacy">
|
||||
<body class="iframe-form" data-ds="new">
|
||||
<div class="container">
|
||||
<div class="form-container">
|
||||
<p>
|
||||
|
||||
@@ -5,13 +5,11 @@
|
||||
<title>bitvid Bug Report Form</title>
|
||||
<!-- Link to your main stylesheet -->
|
||||
|
||||
<link rel="stylesheet" href="../../css/style.css?v=2024.10.29" />
|
||||
<link rel="stylesheet" href="../../css/tailwind.generated.css" />
|
||||
<link rel="stylesheet" href="./iframe-forms.css" />
|
||||
<!-- Load nostr‑tools v2.10.4 -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/nostr.bundle.min.js"></script>
|
||||
</head>
|
||||
<body data-ds="legacy">
|
||||
<body class="iframe-form" data-ds="new">
|
||||
<div class="container">
|
||||
<div class="form-container">
|
||||
<p>
|
||||
|
||||
@@ -5,13 +5,11 @@
|
||||
<title>bitvid Content Appeals Form</title>
|
||||
<!-- Link to your main stylesheet -->
|
||||
|
||||
<link rel="stylesheet" href="../../css/style.css?v=2024.10.29" />
|
||||
<link rel="stylesheet" href="../../css/tailwind.generated.css" />
|
||||
<link rel="stylesheet" href="./iframe-forms.css" />
|
||||
<!-- Load nostr‑tools v2.10.4 -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/nostr.bundle.min.js"></script>
|
||||
</head>
|
||||
<body data-ds="legacy">
|
||||
<body class="iframe-form" data-ds="new">
|
||||
<div class="container">
|
||||
<div class="form-container">
|
||||
<p>
|
||||
|
||||
@@ -5,13 +5,11 @@
|
||||
<title>bitvid General Feedback Form</title>
|
||||
<!-- Link to your main stylesheet -->
|
||||
|
||||
<link rel="stylesheet" href="../../css/style.css?v=2024.10.29" />
|
||||
<link rel="stylesheet" href="../../css/tailwind.generated.css" />
|
||||
<link rel="stylesheet" href="./iframe-forms.css" />
|
||||
<!-- Load nostr‑tools v2.10.4 -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/nostr.bundle.min.js"></script>
|
||||
</head>
|
||||
<body data-ds="legacy">
|
||||
<body class="iframe-form" data-ds="new">
|
||||
<div class="container">
|
||||
<div class="form-container">
|
||||
<p>
|
||||
|
||||
@@ -1,140 +0,0 @@
|
||||
/* Shared styling for iframe-hosted forms so they match the modal design system. */
|
||||
body {
|
||||
background-color: transparent;
|
||||
color: var(--color-text);
|
||||
font-family: var(--font-family-sans);
|
||||
margin: var(--space-lg);
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.form-container > p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
form > * + * {
|
||||
margin-top: var(--space-sm);
|
||||
}
|
||||
|
||||
form h1,
|
||||
form h2 {
|
||||
color: var(--color-text);
|
||||
margin-top: var(--space-md);
|
||||
}
|
||||
|
||||
label {
|
||||
color: var(--color-subtle-text);
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
margin-top: var(--space-sm);
|
||||
}
|
||||
|
||||
label + .form-control,
|
||||
label + .textarea,
|
||||
label + .select {
|
||||
margin-top: var(--space-xs);
|
||||
}
|
||||
|
||||
.checkbox-group {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-sm);
|
||||
margin-top: var(--space-xs);
|
||||
}
|
||||
|
||||
.checkbox-group label {
|
||||
align-items: center;
|
||||
color: var(--color-subtle-text);
|
||||
display: inline-flex;
|
||||
font-weight: 500;
|
||||
gap: var(--space-xs);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.checkbox-group input[type="checkbox"] {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.radio-group {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-sm);
|
||||
margin-top: var(--space-xs);
|
||||
}
|
||||
|
||||
.radio-group label {
|
||||
align-items: center;
|
||||
color: var(--color-subtle-text);
|
||||
display: inline-flex;
|
||||
font-weight: 500;
|
||||
gap: var(--space-xs);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.radio-group input[type="radio"] {
|
||||
accent-color: var(--color-info-strong);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
button.btn {
|
||||
align-self: flex-start;
|
||||
margin-top: var(--space-md);
|
||||
}
|
||||
|
||||
#status {
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--radius-sm);
|
||||
box-shadow: inset 0 0 0 1px var(--color-border-translucent);
|
||||
color: var(--color-subtle-text);
|
||||
min-height: 5rem;
|
||||
padding: var(--space-sm);
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.status-line {
|
||||
color: var(--color-subtle-text);
|
||||
margin: var(--space-2xs) 0;
|
||||
}
|
||||
|
||||
.status-line.error {
|
||||
color: var(--color-critical-strong);
|
||||
}
|
||||
|
||||
.status-line.success {
|
||||
color: var(--color-info-strong);
|
||||
}
|
||||
|
||||
.status-line.warn {
|
||||
color: var(--color-warning-strong);
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
body {
|
||||
margin: var(--space-md);
|
||||
}
|
||||
|
||||
.form-container {
|
||||
padding: var(--space-md);
|
||||
}
|
||||
}
|
||||
@@ -4,13 +4,11 @@
|
||||
<meta charset="utf-8" />
|
||||
<title>bitvid Feature Request Form</title>
|
||||
<!-- Link to your main stylesheet -->
|
||||
<link rel="stylesheet" href="../../css/style.css?v=2024.10.29" />
|
||||
<link rel="stylesheet" href="../../css/tailwind.generated.css" />
|
||||
<link rel="stylesheet" href="./iframe-forms.css" />
|
||||
<!-- Load nostr‑tools v2.10.4 -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/nostr.bundle.min.js"></script>
|
||||
</head>
|
||||
<body data-ds="legacy">
|
||||
<body class="iframe-form" data-ds="new">
|
||||
<div class="container">
|
||||
<div class="form-container">
|
||||
<p>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
aria-modal="true"
|
||||
aria-labelledby="loginModalTitle"
|
||||
aria-describedby="loginModalDescription"
|
||||
data-ds="legacy"
|
||||
data-ds="new"
|
||||
>
|
||||
<div class="bv-modal-backdrop" data-dismiss></div>
|
||||
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
aria-modal="true"
|
||||
aria-labelledby="profileModalTitle"
|
||||
tabindex="-1"
|
||||
data-ds="legacy"
|
||||
data-ds="new"
|
||||
>
|
||||
<div class="bv-modal-backdrop"></div>
|
||||
|
||||
@@ -106,8 +106,8 @@
|
||||
aria-labelledby="profileNavAccount"
|
||||
>
|
||||
<!--
|
||||
The account pane now relies on bespoke CSS (see css/style.css under
|
||||
"Profile modal account pane") so we are not dependent on utility
|
||||
The account pane now relies on bespoke CSS (see css/tailwind.source.css under
|
||||
the "profile modal" section) so we are not dependent on utility
|
||||
classes that may be purged or overridden by other builds.
|
||||
-->
|
||||
<div id="profileSwitcherTray" class="card space-y-6 p-6">
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
aria-modal="true"
|
||||
aria-labelledby="revertModalTitle"
|
||||
aria-describedby="revertModalSubtitle"
|
||||
data-ds="legacy"
|
||||
data-ds="new"
|
||||
>
|
||||
<div
|
||||
id="revertVideoModalOverlay"
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
id="sidebar"
|
||||
class="fade-in fade-in-delay-100 sidebar-collapsed"
|
||||
data-state="collapsed"
|
||||
data-ds="legacy"
|
||||
data-ds="new"
|
||||
>
|
||||
<div class="sidebar__inner">
|
||||
<div class="sidebar-scroll">
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
aria-modal="true"
|
||||
aria-labelledby="uploadModalTitle"
|
||||
aria-describedby="uploadModalDescription"
|
||||
data-ds="legacy"
|
||||
data-ds="new"
|
||||
>
|
||||
<div class="bv-modal-backdrop" data-dismiss></div>
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
class="bv-modal hidden"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
data-ds="legacy"
|
||||
data-ds="new"
|
||||
>
|
||||
<div class="bv-modal-backdrop" data-dismiss></div>
|
||||
<div class="bv-modal__panel" tabindex="-1">
|
||||
|
||||
-1668
File diff suppressed because it is too large.
Load diff
@@ -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-warning-glass:rgba(250,204,21,.18);--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(26,34,52,.82);--color-overlay-panel-soft:rgba(26,34,52,.65);--color-overlay-panel-tint:rgba(31,41,55,.5);--color-overlay-panel-glass:rgba(28,37,58,.72);--color-overlay-panel-glass-soft:rgba(31,41,55,.55);--color-modal-backdrop:rgba(8,12,24,.58);--color-modal-surface:rgba(20,28,46,.78);--color-overlay-veil:rgba(11,17,32,.96);--color-overlay-banner:rgba(51,65,85,.95);--color-sidebar-surface:rgba(17,24,39,.94);--color-sidebar-surface-alt:rgba(11,22,48,.78);--color-sidebar-border:rgba(148,163,184,.28);--color-sidebar-border-strong:rgba(148,163,184,.42);--color-sidebar-hover:rgba(56,189,248,.18);--color-sidebar-hover-strong:rgba(129,140,248,.28);--color-sidebar-glow:rgba(56,189,248,.35);--color-sidebar-accent-start:rgba(56,189,248,.9);--color-sidebar-accent-end:rgba(129,140,248,.85);--color-sidebar-text-muted:rgba(203,213,225,.75);--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;--spaLine 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-warning-glass:rgba(250,204,21,.18);--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(26,34,52,.82);--color-overlay-panel-soft:rgba(26,34,52,.65);--color-overlay-panel-tint:rgba(31,41,55,.5);--color-overlay-panel-glass:rgba(28,37,58,.72);--color-overlay-panel-glass-soft:rgba(31,41,55,.55);--color-modal-backdrop:rgba(8,12,24,.58);--color-modal-surface:rgba(20,28,46,.78);--color-overlay-veil:rgba(11,17,32,.96);--color-overlay-banner:rgba(51,65,85,.95);--color-sidebar-surface:rgba(17,24,39,.94);--color-sidebar-surface-alt:rgba(11,22,48,.78);--color-sidebar-border:rgba(148,163,184,.28);--color-sidebar-border-strong:rgba(148,163,184,.42);--color-sidebar-hover:rgba(56,189,248,.18);--color-sidebar-hover-strong:rgba(129,140,248,.28);--color-sidebar-glow:rgba(56,189,248,.35);--color-sidebar-accent-start:rgba(56,189,248,.9);--color-sidebar-accent-end:rgba(129,140,248,.85);--color-sidebar-text-muted:rgba(203,213,225,.75);--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);--scrollbar-width:0.5rem;--scrollbar-track:var(--color-white-soft);--scrollbar-thumb:var(--color-white-softer);--scrollbar-thumb-hover:var(--color-white-softest);--z-sidebar-overlay:10;--z-sidebar:20;--z-modal-root:100;--z-modal-overlay:110;--z-modal-content:120;--z-modal-player:130;--sidebar-width-expanded:16rem;--sidebar-width-collapsed:4rem;--sidebar-width:var(--sidebar-width-expanded);--sidebar-control-size:2.75rem;--sidebar-content-gap:1rem;--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;--colLine 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{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}html{font-size:100%}@media (min-width:1024px){html{font-size:75%}}*,:after,:before{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) transparent}::-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:.25rem}::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover)}body{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}#editNip71TagsFieldset>legend,#nip71TagsFieldset>legend{margin-left:0;padding:0}#app{background-color:var(--color-page);color:inherit}header{margin-bottom:2rem;padding:1rem 0;display:flex;justify-content:flex-start}header img{height:6rem;width:auto;max-width:none}body.modal-open,html.modal-open{overflow:hidden;height:100%}body.modal-open #app{overflow:hidden}body.modal-open #sidebar,body.modal-open #sidebarOverlay{pointer-events:none;opacity:0;visibility:hidden}body.modal-open #sidebar{z-index:var(--z-sidebar-overlay)}body.modal-open #sidebarOverlay{z-index:calc(var(--z-sidebar-overlay) - 1)}.\!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(--Line truncated
|
||||
+1188
-1
File diff suppressed because it is too large.
Load diff
@@ -94,6 +94,24 @@
|
||||
--color-text-frosted: rgb(226 232 240 / 0.9);
|
||||
--color-text-frosted-soft: rgb(226 232 240 / 0.82);
|
||||
|
||||
/* Layout & stacking */
|
||||
--scrollbar-width: 0.5rem;
|
||||
--scrollbar-track: var(--color-white-soft);
|
||||
--scrollbar-thumb: var(--color-white-softer);
|
||||
--scrollbar-thumb-hover: var(--color-white-softest);
|
||||
/* Sidebar stack must remain below modal overlays. */
|
||||
--z-sidebar-overlay: 10;
|
||||
--z-sidebar: 20;
|
||||
--z-modal-root: 100;
|
||||
--z-modal-overlay: 110;
|
||||
--z-modal-content: 120;
|
||||
--z-modal-player: 130;
|
||||
--sidebar-width-expanded: 16rem;
|
||||
--sidebar-width-collapsed: 4rem;
|
||||
--sidebar-width: var(--sidebar-width-expanded);
|
||||
--sidebar-control-size: 2.75rem;
|
||||
--sidebar-content-gap: 1rem;
|
||||
|
||||
/* Blog palette */
|
||||
--color-blog-transparent: rgb(0 0 0 / 0);
|
||||
--color-blog-cyan-500: rgb(6 182 212);
|
||||
|
||||
@@ -2,8 +2,8 @@
|
||||
|
||||
## FEATURE_DESIGN_SYSTEM rollout
|
||||
|
||||
- **Default:** `false` (legacy styling). The flag lives in `js/constants.js` and is exposed through `window.__BITVID_RUNTIME_FLAGS__` at runtime.
|
||||
- **Enable for canaries:** Before deploying a canary, run `window.__BITVID_RUNTIME_FLAGS__.FEATURE_DESIGN_SYSTEM = true` (or call `setFeatureDesignSystemEnabled(true)`) in the browser console. The change propagates immediately, flipping every `[data-ds]` container to `data-ds="new"` so controllers can hydrate the updated primitives.
|
||||
- **Disable / rollback:** Set the flag back to `false` via the runtime object or redeploy with the default configuration. All root containers revert to `data-ds="legacy"`, forcing controllers and templates to stay on the existing class list.
|
||||
- **Default:** `true` (design system styling). The flag lives in `js/constants.js` and is exposed through `window.__BITVID_RUNTIME_FLAGS__` at runtime.
|
||||
- **Enable for canaries:** No action required—the new primitives ship enabled by default.
|
||||
- **Disable / rollback:** Set the flag to `false` via the runtime object or redeploy with an override. All root containers revert to `data-ds="new"`, forcing controllers and templates to stay on the existing class list.
|
||||
- **Template contract:** Every layout, view, and partial now includes `data-ds` on the root element. Keep this attribute intact when editing HTML so the runtime can swap modes without re-rendering.
|
||||
- **Controllers:** UI controllers receive a `designSystem` context in their constructors. Call `context.isNew()` before attaching new components or classes, and lean on `context.getMode()` when logging or telemetry need to differentiate between legacy and new renders.
|
||||
+14
-14
@@ -4,10 +4,10 @@ bitvid's visual language is now powered by Tailwind utilities backed by our desi
|
||||
|
||||
## Feature Flag Rollout
|
||||
|
||||
The new design system ships behind the `FEATURE_DESIGN_SYSTEM` runtime flag defined in `js/constants.js`. Deployments should keep the flag disabled (`false`) until the new primitives are ready for broad adoption.
|
||||
The new design system ships behind the `FEATURE_DESIGN_SYSTEM` runtime flag defined in `js/constants.js`. Deployments can temporarily disable the flag (`false`) if they need to fall back to the legacy primitives during an incident.
|
||||
|
||||
- **Default state:** `FEATURE_DESIGN_SYSTEM` is `false`, so templates render with `data-ds="legacy"` on root containers.
|
||||
- **Runtime toggle:** Set `window.__BITVID_RUNTIME_FLAGS__.FEATURE_DESIGN_SYSTEM = true` (or call `setFeatureDesignSystemEnabled(true)`) to opt into the new primitives. The entrypoint automatically updates every `[data-ds]` container to `data-ds="new"` and notifies controllers.
|
||||
- **Default state:** `FEATURE_DESIGN_SYSTEM` is `true`, so templates render with `data-ds="new"` on root containers.
|
||||
- **Runtime toggle:** Set `window.__BITVID_RUNTIME_FLAGS__.FEATURE_DESIGN_SYSTEM = false` (or call `setFeatureDesignSystemEnabled(false)`) to temporarily fall back to the legacy primitives. The entrypoint automatically updates every `[data-ds]` container to `data-ds="new"` and notifies controllers.
|
||||
- **DOM contract:** Templates and partials must include `data-ds` on their root elements. Controllers should rely on the `designSystem` context (see `js/designSystem.js`) before attaching classes or behaviors that only exist in the new system.
|
||||
|
||||
## Theming
|
||||
@@ -56,17 +56,17 @@ Never hide focus styles without providing an accessible alternative.
|
||||
The `rg "transition"` audit surfaces the components that animate by default. Keep this list in sync when new motion primitives land:
|
||||
|
||||
- **Buttons:** `.btn` and `.btn-ghost` transition their backgrounds, borders, and shadows using the shared token durations. 【F:css/tailwind.source.css†L18-L55】
|
||||
- **Cards and watch history:** `.card`, `.watch-history-card`, and their nested controls use hover/focus transitions plus optional entry animations via `data-motion="enter"`. 【F:css/style.css†L182-L185】【F:css/tailwind.source.css†L196-L247】
|
||||
- **Popovers:** `.popover__panel` fades and scales between `[data-state]` values. 【F:css/style.css†L150-L166】
|
||||
- **Modals:** `.bv-modal__panel`, `.video-modal__panel`, and `.player-modal__content` animate in concert with the modal nav/header layout helpers. 【F:docs/kitchen-sink.html†L335-L391】【F:css/style.css†L335-L468】
|
||||
- **Feedback & loading:** `.progress-bar-fill`, `.status-spinner--inline`, and `.status-banner .status-spinner` communicate state changes with width transitions or spin animations. 【F:css/style.css†L532-L695】
|
||||
- **Sidebar controls:** `.sidebar-nav-link`, `.sidebar-dropup-trigger`, `.sidebar-collapse-toggle`, and related chevrons/toggles translate, fade, and resize during rail expansion. 【F:css/style.css†L889-L1147】
|
||||
- **Cards and watch history:** `.card`, `.watch-history-card`, and their nested controls use hover/focus transitions plus optional entry animations via `data-motion="enter"`. 【F:css/tailwind.source.css†L238-L804】
|
||||
- **Popovers:** `.popover__panel` fades and scales between `[data-state]` values. 【F:css/tailwind.source.css†L119-L141】
|
||||
- **Modals:** `.bv-modal__panel`, `.video-modal__panel`, and `.player-modal__content` animate in concert with the modal nav/header layout helpers. 【F:docs/kitchen-sink.html†L335-L391】【F:css/tailwind.source.css†L385-L640】
|
||||
- **Feedback & loading:** `.progress-bar-fill`, `.status-spinner--inline`, and `.status-banner .status-spinner` communicate state changes with width transitions or spin animations. 【F:css/tailwind.source.css†L907-L948】
|
||||
- **Sidebar controls:** `.sidebar-nav-link`, `.sidebar-dropup-trigger`, `.sidebar-collapse-toggle`, and related chevrons/toggles translate, fade, and resize during rail expansion. 【F:css/tailwind.source.css†L1164-L1598】
|
||||
|
||||
### Reduced-motion policy
|
||||
|
||||
- A consolidated `@media (prefers-reduced-motion: reduce)` block now zeroes out transition and animation durations globally, removes motion-only transforms, and leaves opacity state changes in place so surfaces still show and hide instantly. 【F:css/style.css†L287-L339】
|
||||
- A consolidated `@media (prefers-reduced-motion: reduce)` block now zeroes out transition and animation durations globally, removes motion-only transforms, and leaves opacity state changes in place so surfaces still show and hide instantly. 【F:css/tailwind.source.css†L1766-L1981】
|
||||
- Motion tokens also collapse to `0s` inside Tailwind's component layer so the primitives (`.btn`, `.card`, `.popover__panel`, watch-history tiles) inherit the same behaviour without per-selector overrides. 【F:css/tailwind.source.css†L229-L270】
|
||||
- Spinners fall back to static indicators when reduced motion is requested, while focus rings remain intact because the underlying styles are unaffected—only the timing curves are reset. 【F:css/style.css†L329-L339】
|
||||
- Spinners fall back to static indicators when reduced motion is requested, while focus rings remain intact because the underlying styles are unaffected—only the timing curves are reset. 【F:css/tailwind.source.css†L1778-L1981】
|
||||
- When adding a new animated component, register its selector in this block (or reuse the tokenised durations) so reduced-motion users never see unintended transitions. Document the addition here alongside the inventory.
|
||||
|
||||
## Component Primitives
|
||||
@@ -235,7 +235,7 @@ The helpers rely on layout utilities (`flex`, `gap-*`) so you can safely inject
|
||||
|
||||
### Zap Popover
|
||||
|
||||
Compose `.popover` with a zap-specific panel variant when you need to surface the tipping form inline. Toggle `data-state="open"` on the `.popover__panel` and remove its `hidden` attribute when the dialog is visible. The `data-variant="zap"` hook reuses the frosted-glass styling defined in `css/style.css`.
|
||||
Compose `.popover` with a zap-specific panel variant when you need to surface the tipping form inline. Toggle `data-state="open"` on the `.popover__panel` and remove its `hidden` attribute when the dialog is visible. The `data-variant="zap"` hook reuses the frosted-glass styling defined in `css/tailwind.source.css`.
|
||||
|
||||
```html
|
||||
<div class="popover">
|
||||
@@ -277,7 +277,7 @@ Compose `.popover` with a zap-specific panel variant when you need to surface th
|
||||
|
||||
## Legacy Compatibility Shims
|
||||
|
||||
During migration we keep existing selectors alive by layering `@apply` calls in `css/style.css`. Notable shims:
|
||||
During migration we keep existing selectors alive by layering `@apply` calls in `css/tailwind.source.css`. Notable shims:
|
||||
|
||||
- `#profileModal .profile-switcher*` → `.card`, `.badge`, `.btn-ghost`
|
||||
|
||||
@@ -291,8 +291,8 @@ We continue to expose aliases such as `.profile-switcher` and nested variations
|
||||
|
||||
- [ ] Confirm no production templates emit `.profile-switcher*` selectors (owners: @ui-templates, @design-systems).
|
||||
- [ ] Verify the torrent beacon renders `.card`, `.btn`, `.btn-ghost`, and `.input` primitives with no fallback selectors (owner: @torrent-beacon).
|
||||
- [ ] Flip `FEATURE_DESIGN_SYSTEM` to `true` in staging and run kitchen-sink visual snapshots to ensure no regressions.
|
||||
- [ ] Delete residual `@apply` rules under "Legacy component compatibility" in `css/style.css`.
|
||||
- [ ] Verify `FEATURE_DESIGN_SYSTEM` remains `true` in staging and run kitchen-sink visual snapshots to ensure no regressions.
|
||||
- [ ] Delete residual `@apply` rules under "Legacy component compatibility" in `css/tailwind.source.css`.
|
||||
- [ ] Announce the removal in release notes and update downstream embed documentation.
|
||||
|
||||
**Owners:** Design Systems Guild (@design-systems) with support from the Templates crew (@ui-templates) and the torrent beacon maintainers (@torrent-beacon).
|
||||
|
||||
+1
-2
@@ -56,10 +56,9 @@
|
||||
-->
|
||||
<script src="js/tracking.js?v=2024.10.29" defer></script>
|
||||
<link href="css/tailwind.generated.css?v=2024.10.29" rel="stylesheet" />
|
||||
<link href="css/style.css?v=2024.10.29" rel="stylesheet" />
|
||||
<link href="css/markdown.css?v=2024.10.29" rel="stylesheet" />
|
||||
</head>
|
||||
<body class="sidebar-collapsed" data-ds="legacy">
|
||||
<body class="sidebar-collapsed" data-ds="new">
|
||||
<!--
|
||||
SIDEBAR CONTAINER:
|
||||
The <aside id="sidebar"> inside handles visibility.
|
||||
|
||||
+1
-1
@@ -4,7 +4,7 @@ const DEFAULT_FLAGS = Object.freeze({
|
||||
VIEW_FILTER_INCLUDE_LEGACY_VIDEO: false,
|
||||
FEATURE_WATCH_HISTORY_V2: false,
|
||||
FEATURE_PUBLISH_NIP71: false,
|
||||
FEATURE_DESIGN_SYSTEM: false,
|
||||
FEATURE_DESIGN_SYSTEM: true,
|
||||
WSS_TRACKERS: Object.freeze([
|
||||
"wss://tracker.openwebtorrent.com",
|
||||
"wss://tracker.fastcast.nz",
|
||||
|
||||
+1
-1
@@ -5,7 +5,7 @@
|
||||
"version": "1.0.0",
|
||||
"scripts": {
|
||||
"build:css": "npx tailwindcss -c tailwind.config.cjs -i css/tailwind.source.css -o css/tailwind.generated.css --minify",
|
||||
"format": "prettier --cache --write css/style.css css/tailwind.source.css css/tokens.css \"docs/**/*.html\" tailwind.config.cjs README.md",
|
||||
"format": "prettier --cache --write css/tailwind.source.css css/tokens.css \"docs/**/*.html\" tailwind.config.cjs README.md",
|
||||
"lint": "npm run lint:css && npm run lint:hex",
|
||||
"lint:css": "stylelint css/tailwind.source.css css/tokens.css",
|
||||
"lint:hex": "node scripts/check-hex.js",
|
||||
|
||||
+1
-1
@@ -1,5 +1,5 @@
|
||||
<!-- views/about.html -->
|
||||
<section class="bv-stack" data-ds="legacy" aria-labelledby="aboutHeading">
|
||||
<section class="bv-stack" data-ds="new" aria-labelledby="aboutHeading">
|
||||
<article class="card p-lg">
|
||||
<div class="bv-stack bv-stack--tight">
|
||||
<h2 id="aboutHeading" class="text-2xl font-semibold text-text-strong">
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<section class="channel-profile-container" data-ds="legacy">
|
||||
<section class="channel-profile-container" data-ds="new">
|
||||
<!-- Modified banner wrapper for taller, rounded style -->
|
||||
<div class="profile-banner relative mb-6 rounded-lg shadow-lg">
|
||||
<!-- Increase the default height classes -->
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<!-- views/community-guidelines.html -->
|
||||
<section class="bv-stack" data-ds="legacy" aria-labelledby="communityGuidelinesHeading">
|
||||
<section class="bv-stack" data-ds="new" aria-labelledby="communityGuidelinesHeading">
|
||||
<article class="card p-lg">
|
||||
<div class="bv-stack bv-stack--tight">
|
||||
<h2
|
||||
|
||||
+1
-1
@@ -1,5 +1,5 @@
|
||||
<!-- views/explore.html -->
|
||||
<section data-ds="legacy">
|
||||
<section data-ds="new">
|
||||
<h2 class="mb-4 text-xl text-text-strong">Explore</h2>
|
||||
<p class="text-muted-strong">Coming Soon...</p>
|
||||
</section>
|
||||
@@ -1,5 +1,5 @@
|
||||
<!-- views/getting-started.html -->
|
||||
<section class="bv-stack" data-ds="legacy" aria-labelledby="gettingStartedHeading">
|
||||
<section class="bv-stack" data-ds="new" aria-labelledby="gettingStartedHeading">
|
||||
<article class="card p-lg">
|
||||
<div class="bv-stack bv-stack--tight">
|
||||
<h2
|
||||
|
||||
+1
-1
@@ -1,5 +1,5 @@
|
||||
<!-- views/history.html -->
|
||||
<section id="watchHistoryView" class="bv-stack" data-ds="legacy">
|
||||
<section id="watchHistoryView" class="bv-stack" data-ds="new">
|
||||
<div class="bv-stack bv-stack--tight">
|
||||
<div
|
||||
class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between"
|
||||
|
||||
+1
-1
@@ -1,5 +1,5 @@
|
||||
<!-- views/ipns.html -->
|
||||
<section class="bv-stack" data-ds="legacy" aria-labelledby="ipnsHeading">
|
||||
<section class="bv-stack" data-ds="new" aria-labelledby="ipnsHeading">
|
||||
<article class="card p-lg">
|
||||
<div class="bv-stack bv-stack--tight">
|
||||
<h2 id="ipnsHeading" class="text-2xl font-semibold text-text-strong">
|
||||
|
||||
+1
-1
@@ -1,5 +1,5 @@
|
||||
<!-- views/links.html -->
|
||||
<section class="bv-stack" data-ds="legacy" aria-labelledby="linksHeading">
|
||||
<section class="bv-stack" data-ds="new" aria-labelledby="linksHeading">
|
||||
<article class="card p-lg">
|
||||
<div class="bv-stack bv-stack--tight">
|
||||
<h2 id="linksHeading" class="text-2xl font-semibold text-text-strong">
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<!-- views/most-recent-videos.html -->
|
||||
<section data-ds="legacy">
|
||||
<section data-ds="new">
|
||||
<!-- You can have a heading if you want -->
|
||||
<h2 class="mb-4 text-xl text-text-strong">Most Recent Videos</h2>
|
||||
|
||||
|
||||
+1
-1
@@ -1,5 +1,5 @@
|
||||
<!-- views/roadmap.html -->
|
||||
<section class="bv-stack" data-ds="legacy" aria-labelledby="roadmapHeading">
|
||||
<section class="bv-stack" data-ds="new" aria-labelledby="roadmapHeading">
|
||||
<article class="card p-lg">
|
||||
<div class="bv-stack bv-stack--tight">
|
||||
<h2 id="roadmapHeading" class="text-2xl font-semibold text-text-strong">
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<!-- views/subscriptions.html -->
|
||||
<section data-ds="legacy">
|
||||
<section data-ds="new">
|
||||
<h2 class="mb-4 text-xl">Subscriptions</h2>
|
||||
<div id="subscriptionsVideoList" class="bv-grid-video">
|
||||
<div class="sidebar-loading-wrapper" role="status" aria-live="polite">
|
||||
|
||||
Reference in new issue
Block a user