mirror of
https://github.com/PR0M3TH3AN/bitvid.git
synced 2026-11-02 02:42:28 +00:00
docs: document shim migration and rebuild styles
This commit is contained in:
thePR0M3TH3AN committed
1 parent
bbe560e84e
commit
b44901626f
5 files changed
+100
-36
No files matched your search
+3
-1
@@ -162,7 +162,9 @@ header img {
|
||||
.video-card img.video-card__thumbnail--blurred {
|
||||
filter: blur(18px);
|
||||
transform: scale(1.05);
|
||||
transition: filter 200ms ease, transform 200ms ease;
|
||||
transition:
|
||||
filter 200ms ease,
|
||||
transform 200ms ease;
|
||||
}
|
||||
|
||||
.video-card[data-owner-is-viewer="true"][data-url-health-state="offline"][data-stream-health-state="unhealthy"] {
|
||||
|
||||
@@ -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-muted:#94a3b8;--color-muted-alt:#9ca3af;--color-subtle-text:#e2e8f0;--color-subtle:#e5e7eb;--color-critical:#7f1d1d;--color-critical-strong:#991b1b;--color-neutral-700:#3f3f46;--color-neutral-600:#52525b;--color-white:#fff;--color-black:#000;--color-overlay:#1a2234;--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-lg:1.125rem;--font-size-xl:1.5rem;--font-size-2xl:2rem;--line-height-tight:1.1;--line-height-snug:1.25;--line-height-base:1.5;--line-height-relaxed:1.75;--motion-duration-fast:120ms;--motion-duration-base:160ms;--motion-duration-slow:280ms;--motion-ease-out:cubic-bezier(0.16,1,0.3,1);--motion-ease-in-out:cubic-bezier(0.4,0,0.2,1);--modal-motion-duration:var(--motion-duration-base)}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }
|
||||
|
||||
/*! 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)}.btn{outline:2px solid transparent;outline-offset:2px}.btn: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)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:var(--radius-lg);border-width:1px;border-color:transparent;background-color:var(--color-primary);padding:.5rem 1rem;font-size:var(--font-size-sm);line-height:var(--line-height-snug);font-weight:600;text-transform:uppercase;letter-spacing:.025em;color:var(--color-white);--tw-shadow:var(--shadow-md);--tw-shadow-colored:var(--shadow-md);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-funLine 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)}.btn{outline:2px solid transparent;outline-offset:2px}.btn: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)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:var(--radius-lg);border-width:1px;border-color:transparent;background-color:var(--color-primary);padding:.5rem 1rem;font-size:var(--font-size-sm);line-height:var(--line-height-snug);font-weight:600;text-transform:uppercase;letter-spacing:.025em;color:var(--color-white);--tw-shadow:var(--shadow-md);--tw-shadow-colored:var(--shadow-md);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.15s;transition-duration:var(--motion-duration-base);transition-timing-funLine truncated
|
||||
@@ -221,7 +221,7 @@
|
||||
}
|
||||
|
||||
.video-modal__media {
|
||||
@apply aspect-video block w-full rounded-xl bg-black object-contain shadow-2xl;
|
||||
@apply block aspect-video w-full rounded-xl bg-black object-contain shadow-2xl;
|
||||
}
|
||||
|
||||
.player-modal__video video {
|
||||
@@ -322,7 +322,7 @@
|
||||
}
|
||||
|
||||
.profile-switcher__add {
|
||||
@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-info hover:border-opacity-60 hover:bg-info/10 hover:text-white focus-visible:border-info focus-visible:border-opacity-60;
|
||||
@apply card hover:bg-info/10 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-info hover:border-opacity-60 hover:text-white focus-visible:border-info focus-visible:border-opacity-60;
|
||||
}
|
||||
|
||||
.profile-switcher__addAvatar {
|
||||
@@ -399,7 +399,7 @@
|
||||
}
|
||||
|
||||
.watch-history-card__meta {
|
||||
@apply flex min-w-0 flex-col justify-between gap-4 sm:flex-[0_0_16rem] sm:min-w-[14rem];
|
||||
@apply flex min-w-0 flex-col justify-between gap-4 sm:min-w-[14rem] sm:flex-[0_0_16rem];
|
||||
}
|
||||
|
||||
.watch-history-card__watched {
|
||||
@@ -427,7 +427,7 @@
|
||||
}
|
||||
|
||||
.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:bg-surface-alt hover:text-white hover:border-border focus-visible:bg-surface-alt focus-visible:text-white focus-visible:border-border;
|
||||
@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-white focus-visible:border-border focus-visible:bg-surface-alt focus-visible:text-white;
|
||||
}
|
||||
|
||||
.watch-history-card__action--primary {
|
||||
@@ -437,5 +437,4 @@
|
||||
.watch-history-card__action--danger {
|
||||
@apply bg-critical text-white hover:bg-critical-strong focus-visible:bg-critical-strong;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -76,9 +76,14 @@ During migration we keep existing selectors alive by layering `@apply` calls in
|
||||
- `.modal-content` → `.bv-modal__panel`
|
||||
- `#profileModal .profile-switcher*` → `.card`, `.badge`, `.btn-ghost`
|
||||
|
||||
These shims live under the "Legacy component compatibility" section and will be removed once templates switch to the new primitives.
|
||||
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.
|
||||
|
||||
**Target removal:** Audit usage after the Q1 2025 UI refresh and delete remaining shims no later than April 2025.
|
||||
**Target removal:** Audit usage after the Q1 2025 UI refresh and delete remaining shims no later than April 2025. At that point the compatibility layer will be deleted once dependent feature flags confirm that no legacy selectors remain in production HTML.
|
||||
|
||||
### Migration Notes (Q4 2024)
|
||||
|
||||
- Modal templates across the app now mount `.bv-modal`, `.bv-modal-backdrop`, and `.bv-modal__panel` primitives directly. Controllers such as `ProfileModalController` and the upload modal orchestrator were updated to expect these primitives, so any new modal should follow the same structure for consistent accessibility and animation hooks.
|
||||
- The compatibility shim keeps the `.profile-switcher` selector family alive temporarily so third-party embeds and cached HTML fragments continue to render while operators redeploy updated templates. Keep the aliases until the April 2025 removal window above, then delete the shim and update any last callers to the new `.card`/`.btn-ghost` structure.
|
||||
|
||||
## When to Mix Utilities
|
||||
|
||||
|
||||
+85
-27
@@ -274,8 +274,8 @@
|
||||
Profile & Edit Modal Shells
|
||||
</h2>
|
||||
<p class="text-sm text-muted">
|
||||
Both shells share the `.bv-modal` overlay and tokenized
|
||||
primitives (`.card`, `.btn`, `.btn-ghost`, `.badge`, `.grid-stack`,
|
||||
Both shells share the `.bv-modal` overlay and tokenized primitives
|
||||
(`.card`, `.btn`, `.btn-ghost`, `.badge`, `.grid-stack`,
|
||||
`.focus-ring`). Compatibility hooks like `modal-content` remain on
|
||||
the panels so legacy CSS selectors keep working alongside the new
|
||||
primitives.
|
||||
@@ -304,12 +304,17 @@
|
||||
role="dialog"
|
||||
aria-labelledby="profileModalTitle"
|
||||
>
|
||||
<header class="card flex items-center justify-between gap-sm p-md">
|
||||
<header
|
||||
class="card flex items-center justify-between gap-sm p-md"
|
||||
>
|
||||
<div>
|
||||
<p class="text-xs uppercase tracking-wide text-muted">
|
||||
Modal header
|
||||
</p>
|
||||
<h4 id="profileModalTitle" class="text-lg font-semibold">
|
||||
<h4
|
||||
id="profileModalTitle"
|
||||
class="text-lg font-semibold"
|
||||
>
|
||||
Active profile
|
||||
</h4>
|
||||
</div>
|
||||
@@ -323,7 +328,7 @@
|
||||
</header>
|
||||
<div class="flex flex-1 flex-col gap-lg lg:flex-row">
|
||||
<nav
|
||||
class="grid gap-xs sm:grid-cols-3 lg:w-56 lg:flex lg:flex-col"
|
||||
class="grid gap-xs sm:grid-cols-3 lg:flex lg:w-56 lg:flex-col"
|
||||
aria-label="Profile sections"
|
||||
>
|
||||
<button
|
||||
@@ -349,20 +354,31 @@
|
||||
Blocked users
|
||||
</button>
|
||||
</nav>
|
||||
<div class="grid-stack flex-1 gap-md" data-variant="cards">
|
||||
<div
|
||||
class="grid-stack flex-1 gap-md"
|
||||
data-variant="cards"
|
||||
>
|
||||
<article
|
||||
id="profilePaneAccount"
|
||||
class="card space-y-sm p-md"
|
||||
data-profile-pane
|
||||
>
|
||||
<div class="flex items-start justify-between gap-sm">
|
||||
<div
|
||||
class="flex items-start justify-between gap-sm"
|
||||
>
|
||||
<div>
|
||||
<p class="text-xs uppercase tracking-wide text-muted">
|
||||
<p
|
||||
class="text-xs uppercase tracking-wide text-muted"
|
||||
>
|
||||
Current identity
|
||||
</p>
|
||||
<h5 class="text-base font-semibold">npub1example...</h5>
|
||||
<h5 class="text-base font-semibold">
|
||||
npub1example...
|
||||
</h5>
|
||||
</div>
|
||||
<span class="badge" data-variant="info">Active</span>
|
||||
<span class="badge" data-variant="info"
|
||||
>Active</span
|
||||
>
|
||||
</div>
|
||||
<p class="text-sm text-muted">
|
||||
`.grid-stack` arranges saved identities with
|
||||
@@ -374,13 +390,19 @@
|
||||
<button class="btn-ghost">Manage keys</button>
|
||||
</footer>
|
||||
</article>
|
||||
<article class="card space-y-sm p-md" data-profile-pane>
|
||||
<h5 class="text-base font-semibold">Relay presets</h5>
|
||||
<article
|
||||
class="card space-y-sm p-md"
|
||||
data-profile-pane
|
||||
>
|
||||
<h5 class="text-base font-semibold">
|
||||
Relay presets
|
||||
</h5>
|
||||
<p class="text-sm text-muted">
|
||||
Use badges to indicate status (e.g.
|
||||
<span class="badge" data-variant="neutral">New</span>)
|
||||
while keeping content spacing consistent with the
|
||||
production modal.
|
||||
<span class="badge" data-variant="neutral"
|
||||
>New</span
|
||||
>) while keeping content spacing consistent with
|
||||
the production modal.
|
||||
</p>
|
||||
<ul class="space-y-xs text-sm text-muted">
|
||||
<li data-relay-row>relay.example.com</li>
|
||||
@@ -390,14 +412,19 @@
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="card flex flex-wrap items-center justify-between gap-sm p-md">
|
||||
<footer
|
||||
class="card flex flex-wrap items-center justify-between gap-sm p-md"
|
||||
>
|
||||
<p class="text-xs text-muted">
|
||||
Footer keeps shared spacing tokens while exposing
|
||||
legacy hooks like `data-profile-action` for scripts if
|
||||
needed.
|
||||
</p>
|
||||
<div class="flex gap-sm">
|
||||
<button class="btn-ghost" data-profile-action="cancel">
|
||||
<button
|
||||
class="btn-ghost"
|
||||
data-profile-action="cancel"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button class="btn" data-profile-action="save">
|
||||
@@ -434,12 +461,17 @@
|
||||
class="bv-modal__panel modal-content flex max-h-[80vh] flex-col gap-lg"
|
||||
data-modal="edit"
|
||||
>
|
||||
<header class="card flex items-center justify-between gap-sm p-md">
|
||||
<header
|
||||
class="card flex items-center justify-between gap-sm p-md"
|
||||
>
|
||||
<div class="space-y-xs">
|
||||
<p class="text-xs uppercase tracking-wide text-muted">
|
||||
Edit metadata
|
||||
</p>
|
||||
<h4 id="editVideoModalTitle" class="text-lg font-semibold">
|
||||
<h4
|
||||
id="editVideoModalTitle"
|
||||
class="text-lg font-semibold"
|
||||
>
|
||||
Update video note
|
||||
</h4>
|
||||
</div>
|
||||
@@ -460,7 +492,10 @@
|
||||
</p>
|
||||
<div class="card space-y-md p-md">
|
||||
<div class="space-y-xs">
|
||||
<label class="text-sm font-medium text-text" for="editTitleDemo">
|
||||
<label
|
||||
class="text-sm font-medium text-text"
|
||||
for="editTitleDemo"
|
||||
>
|
||||
Title
|
||||
</label>
|
||||
<div class="flex flex-wrap gap-sm sm:flex-nowrap">
|
||||
@@ -479,24 +514,45 @@
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid gap-md md:grid-cols-2" data-nip71-grid>
|
||||
<div
|
||||
class="grid gap-md md:grid-cols-2"
|
||||
data-nip71-grid
|
||||
>
|
||||
<div class="space-y-xs">
|
||||
<label class="text-sm font-medium text-text" for="editKindDemo">
|
||||
<label
|
||||
class="text-sm font-medium text-text"
|
||||
for="editKindDemo"
|
||||
>
|
||||
NIP-71 kind
|
||||
</label>
|
||||
<div class="card space-y-xs p-sm" data-nip71-fieldset>
|
||||
<div
|
||||
class="card space-y-xs p-sm"
|
||||
data-nip71-fieldset
|
||||
>
|
||||
<label class="flex items-center gap-xs text-sm">
|
||||
<input class="focus-ring" type="radio" name="editKindDemo" checked />
|
||||
<input
|
||||
class="focus-ring"
|
||||
type="radio"
|
||||
name="editKindDemo"
|
||||
checked
|
||||
/>
|
||||
Kind 21 — Full video
|
||||
</label>
|
||||
<label class="flex items-center gap-xs text-sm">
|
||||
<input class="focus-ring" type="radio" name="editKindDemo" />
|
||||
<input
|
||||
class="focus-ring"
|
||||
type="radio"
|
||||
name="editKindDemo"
|
||||
/>
|
||||
Kind 22 — Short
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-xs">
|
||||
<label class="text-sm font-medium text-text" for="editPublishDemo">
|
||||
<label
|
||||
class="text-sm font-medium text-text"
|
||||
for="editPublishDemo"
|
||||
>
|
||||
Published at
|
||||
</label>
|
||||
<input
|
||||
@@ -514,7 +570,9 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="card flex flex-wrap items-center justify-between gap-sm p-md">
|
||||
<footer
|
||||
class="card flex flex-wrap items-center justify-between gap-sm p-md"
|
||||
>
|
||||
<p class="text-xs text-muted">
|
||||
Footer actions mix `.btn` variants while referencing
|
||||
`data-submit-state` for controller hand-offs.
|
||||
|
||||
Reference in new issue
Block a user