Merge pull request #429 from PR0M3TH3AN/codex/refactor-modal-templates-with-tailwind-classes

Refactor modal styles to tokenized palette
This commit is contained in:
thePR0M3TH3AN authored and GitHub committed 2025-10-10 22:26:43 -04:00
commit bd95638ffb
16 files changed
+544 -548

No files matched your search

+9 -14
View File
@@ -10,7 +10,7 @@
<!-- Include Tailwind CSS -->
<link href="css/tailwind.generated.css" rel="stylesheet" />
</head>
<body class="bg-gray-900 text-gray-100">
<body class="bg-surface text-text">
<!-- Application Form Modal -->
<div
id="nostrFormModal"
@@ -19,23 +19,19 @@
<div class="bv-modal-backdrop" data-dismiss></div>
<!-- Inner content container -->
<div
class="bv-modal__panel relative my-0 w-full max-w-[90%] overflow-hidden rounded-lg bg-gray-900 lg:max-w-6xl"
>
<div class="modal-sheet">
<!-- Header bar with updated styling -->
<div
class="sticky top-0 bg-gradient-to-b from-black/80 to-transparent p-4 flex items-center justify-between border-b border-gray-700"
>
<h2 class="text-3xl font-extrabold text-white tracking-wide pb-2">
<div class="modal-header">
<h2 class="pb-2 text-3xl font-extrabold tracking-wide text-text">
Application Form
</h2>
<button
id="closeNostrFormModal"
class="flex items-center justify-center w-10 h-10 rounded-full bg-black/50 hover:bg-black/70 transition-all duration-200 backdrop-blur focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-black focus:ring-blue-500"
class="modal-close"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-6 h-6 text-gray-300"
class="h-6 w-6 text-muted"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
@@ -51,13 +47,12 @@
</div>
<!-- Main Content -->
<div class="p-6">
<div class="w-full" style="height: 80vh">
<div class="modal-body">
<div class="h-[80vh] w-full">
<iframe
src="./components/iframe_forms/iframe-application-form.html"
class="w-full h-full"
class="h-full w-full rounded-lg border border-border/30 shadow-sm"
frameborder="0"
style="border: none; box-shadow: 0 0 2px rgba(0, 0, 0, 0.2)"
></iframe>
</div>
</div>
+8 -13
View File
@@ -7,23 +7,19 @@
<div id="bugFixModal" class="bv-modal hidden items-start justify-center overflow-y-auto">
<div class="bv-modal-backdrop" data-dismiss></div>
<div
class="bv-modal__panel relative my-0 w-full max-w-[90%] overflow-hidden rounded-lg bg-gray-900 lg:max-w-6xl"
>
<div class="modal-sheet">
<!-- Header bar (sticky) with updated title styling -->
<div
class="sticky top-0 flex items-center justify-between border-b border-gray-700 bg-gradient-to-b from-black/80 to-transparent p-4"
>
<h2 class="pb-2 text-3xl font-extrabold tracking-wide text-white">
<div class="modal-header">
<h2 class="pb-2 text-3xl font-extrabold tracking-wide text-text">
Bug Fix Form
</h2>
<button
id="closeBugFixModal"
class="flex h-10 w-10 items-center justify-center rounded-full bg-black/50 transition-all duration-200 backdrop-blur hover:bg-black/70 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-black focus:ring-blue-500"
class="modal-close"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 text-gray-300"
class="h-6 w-6 text-muted"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
@@ -38,13 +34,12 @@
</button>
</div>
<div class="p-6">
<div class="w-full" style="height: 80vh">
<div class="modal-body">
<div class="h-[80vh] w-full">
<iframe
src="./components/iframe_forms/iframe-bug-fix-form.html"
class="h-full w-full"
class="h-full w-full rounded-lg border border-border/30 shadow-sm"
frameborder="0"
style="border: none; box-shadow: 0 0 2px rgba(0, 0, 0, 0.2)"
></iframe>
</div>
</div>
+8 -13
View File
@@ -7,23 +7,19 @@
>
<div class="bv-modal-backdrop" data-dismiss></div>
<div
class="bv-modal__panel relative my-0 w-full max-w-[90%] overflow-hidden rounded-lg bg-gray-900 lg:max-w-6xl"
>
<div class="modal-sheet">
<!-- Header bar (sticky) with improved title styling -->
<div
class="sticky top-0 flex items-center justify-between border-b border-gray-700 bg-gradient-to-b from-black/80 to-transparent p-4"
>
<h2 class="pb-2 text-3xl font-extrabold tracking-wide text-white">
<div class="modal-header">
<h2 class="pb-2 text-3xl font-extrabold tracking-wide text-text">
Content Appeals Form
</h2>
<button
id="closeContentAppealsModal"
class="flex h-10 w-10 items-center justify-center rounded-full bg-black/50 transition-all duration-200 backdrop-blur hover:bg-black/70 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-black focus:ring-blue-500"
class="modal-close"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 text-gray-300"
class="h-6 w-6 text-muted"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
@@ -38,13 +34,12 @@
</button>
</div>
<div class="p-6">
<div class="w-full" style="height: 80vh">
<div class="modal-body">
<div class="h-[80vh] w-full">
<iframe
src="./components/iframe_forms/iframe-content-appeals-form.html"
class="h-full w-full"
class="h-full w-full rounded-lg border border-border/30 shadow-sm"
frameborder="0"
style="border: none; box-shadow: 0 0 2px rgba(0, 0, 0, 0.2)"
></iframe>
</div>
</div>
+20 -24
View File
@@ -6,18 +6,14 @@
<div class="bv-modal-backdrop" data-dismiss></div>
<!-- Outer container with wide layout, just like content-appeals-form -->
<div
class="bv-modal__panel relative my-0 flex w-full max-w-[90%] flex-col overflow-hidden rounded-lg bg-gray-900 lg:max-w-6xl"
>
<div class="modal-sheet flex flex-col overflow-hidden" tabindex="-1">
<!-- Sticky top bar, if you want a top heading or 'X' button up here -->
<div
class="modal-header sticky top-0 flex items-center justify-between bg-gradient-to-b from-black/80 to-transparent p-4"
></div>
<div class="modal-header"></div>
<!-- Main Content -->
<div class="modal-body flex-1 overflow-y-auto">
<!-- Scrollable disclaimers area -->
<div class="space-y-6 text-gray-300">
<div class="space-y-6 text-muted-strong">
<!-- Example: Insert your disclaimers here -->
<div class="mb-8 flex justify-center">
@@ -27,13 +23,13 @@
class="h-16"
/>
</div>
<h2 class="mb-0 text-2xl font-bold text-white">Welcome to bitvid</h2>
<h2 class="mb-0 text-2xl font-bold text-text">Welcome to bitvid</h2>
<!-- Warning Alert -->
<div
class="mb-6 flex items-start rounded-lg border border-yellow-700/50 bg-yellow-900/20 p-4"
class="mb-6 flex items-start rounded-lg border border-warning-strong/60 bg-warning-surface p-4"
>
<svg
class="mt-0.5 mr-3 h-5 w-5 flex-shrink-0 text-yellow-500"
class="mt-0.5 mr-3 h-5 w-5 flex-shrink-0 text-warning-strong"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
@@ -45,7 +41,7 @@
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
/>
</svg>
<p class="text-yellow-200">
<p class="text-warning">
This platform is currently in development and only supports Chrome
and Firefox-based browsers. Other browsers are not supported at
this time. You may encounter bugs or missing features. Give it a
@@ -59,37 +55,37 @@
</p>
<div class="space-y-4">
<div class="rounded-lg bg-gray-800 p-4">
<h3 class="mb-2 font-semibold text-white">Early Access Status</h3>
<p class="text-gray-400">
<div class="rounded-lg bg-panel p-4">
<h3 class="mb-2 font-semibold text-text">Early Access Status</h3>
<p class="text-muted">
Currently, video posting is invite-only as we carefully scale
our platform. While anyone can watch videos, content creation is
limited to approved creators. This helps us maintain quality
content during our early stages.
</p>
</div>
<div class="rounded-lg bg-gray-800 p-4">
<h3 class="mb-2 font-semibold text-white">
<div class="rounded-lg bg-panel p-4">
<h3 class="mb-2 font-semibold text-text">
Content Responsibility &amp; Moderation
</h3>
<p class="text-gray-400">
<p class="text-muted">
While we don't host videos directly, we maintain community
standards through access control. Users who violate our
guidelines may be blocked from accessing the platform. All
content must follow local laws and platform guidelines.
</p>
</div>
<div class="rounded-lg bg-gray-800 p-4">
<h3 class="mb-2 font-semibold text-white">Platform Status</h3>
<p class="text-gray-400">
<div class="rounded-lg bg-panel p-4">
<h3 class="mb-2 font-semibold text-text">Platform Status</h3>
<p class="text-muted">
bitvid is a work in progress. Features may change or break, and
security improvements are ongoing. Your feedback and patience
help us build a better platform.
</p>
</div>
<div class="rounded-lg bg-gray-800 p-4">
<h3 class="mb-2 font-semibold text-white">Get Involved</h3>
<p class="text-gray-400">
<div class="rounded-lg bg-panel p-4">
<h3 class="mb-2 font-semibold text-text">Get Involved</h3>
<p class="text-muted">
Are you a developer? We'd love your help! Visit our GitHub
repository to contribute to building the future of decentralized
video sharing.
@@ -103,7 +99,7 @@
<div class="modal-footer">
<button
id="acceptDisclaimer"
class="w-full rounded-md bg-blue-500 px-4 py-2 text-white transition-colors duration-200 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-black"
class="w-full rounded-md bg-info px-4 py-2 text-text transition-colors duration-200 hover:bg-info-strong focus:outline-none focus:ring-2 focus:ring-info focus:ring-offset-2 focus:ring-offset-surface"
>
I Understand
</button>
+93 -101
View File
@@ -8,43 +8,35 @@
>
<div id="editVideoModalOverlay" class="bv-modal-backdrop"></div>
<div
class="bv-modal__panel modal-content bg-gray-900 w-full max-w-[90%] lg:max-w-4xl my-0 overflow-y-auto relative max-h-[90vh]"
tabindex="-1"
>
<div class="sticky top-0 p-4">
<div class="card flex items-center justify-between gap-4 p-4">
<h2 class="text-xl font-bold text-white">Edit Video Note</h2>
<button
id="closeEditVideoModal"
class="focus-ring inline-flex h-10 w-10 items-center justify-center rounded-full bg-black/50 text-gray-300 transition hover:bg-black/70"
<div class="modal-sheet modal-content max-h-[90vh] overflow-y-auto lg:max-w-4xl" tabindex="-1">
<div class="modal-header">
<h2 class="text-xl font-bold text-text">Edit Video Note</h2>
<button id="closeEditVideoModal" class="modal-close">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
</div>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
</div>
<div class="p-6 space-y-6">
<p class="text-sm text-gray-400">
<div class="modal-body space-y-6">
<p class="text-sm text-muted">
Fields that already have values are locked. Click <strong>Edit field</strong> to make changes.
</p>
<form id="editVideoForm" class="space-y-5">
<div class="space-y-1">
<label for="editVideoTitle" class="block text-sm font-medium text-gray-200">
<label for="editVideoTitle" class="block text-sm font-medium text-text">
Title
</label>
<div class="flex flex-col gap-2 sm:flex-row">
@@ -66,7 +58,7 @@
<!-- NOTE: Keep this NIP-71 markup in sync with the upload and revert modals. -->
<div
class="space-y-4 rounded-lg border border-gray-800 bg-black/30 p-4"
class="space-y-4 rounded-lg border border-border/70 bg-overlay-black/30 p-4"
id="editNip71EventDetails"
data-nip71-section="event-details"
>
@@ -75,12 +67,12 @@
class="space-y-2"
data-nip71-fieldset="kind"
>
<legend class="text-sm font-semibold text-gray-200">
<legend class="text-sm font-semibold text-text">
NIP-71 event type
</legend>
<p class="text-xs text-gray-400">
Choose the video format. <span class="font-medium text-gray-300">Kind 21</span> is a full video, while
<span class="font-medium text-gray-300">Kind 22</span> is a short.
<p class="text-xs text-muted">
Choose the video format. <span class="font-medium text-muted-strong">Kind 21</span> is a full video, while
<span class="font-medium text-muted-strong">Kind 22</span> is a short.
</p>
<div
class="form-control"
@@ -96,9 +88,9 @@
value="21"
checked
data-nip71-input="kind"
class="h-4 w-4 border-gray-600 bg-gray-800 text-blue-500 focus:ring-blue-500"
class="h-4 w-4 border-border bg-panel text-info focus:ring-info"
/>
<span class="text-sm text-gray-200">Normal video (kind 21)</span>
<span class="text-sm text-text">Normal video (kind 21)</span>
</label>
<label class="menu__item gap-3 px-0 py-0" for="editNip71KindShort">
<input
@@ -107,9 +99,9 @@
id="editNip71KindShort"
value="22"
data-nip71-input="kind"
class="h-4 w-4 border-gray-600 bg-gray-800 text-blue-500 focus:ring-blue-500"
class="h-4 w-4 border-border bg-panel text-info focus:ring-info"
/>
<span class="text-sm text-gray-200">Short video (kind 22)</span>
<span class="text-sm text-text">Short video (kind 22)</span>
</label>
</div>
</div>
@@ -117,7 +109,7 @@
<div class="grid gap-4 md:grid-cols-2" data-nip71-grid="metadata">
<div class="space-y-2">
<label for="editNip71PublishedAt" class="block text-sm font-medium text-gray-200">
<label for="editNip71PublishedAt" class="block text-sm font-medium text-text">
Published at
</label>
<input
@@ -126,12 +118,12 @@
data-nip71-input="published_at"
class="input"
/>
<p class="text-xs text-gray-400">
<p class="text-xs text-muted">
Set the canonical publish time for cross-client ordering.
</p>
</div>
<div class="space-y-2">
<label for="editNip71AltText" class="block text-sm font-medium text-gray-200">
<label for="editNip71AltText" class="block text-sm font-medium text-text">
Alt text
</label>
<input
@@ -141,12 +133,12 @@
placeholder="Describe the visuals for screen readers"
class="input"
/>
<p class="text-xs text-gray-400">
<p class="text-xs text-muted">
Plain-language fallback shown when the media cannot load.
</p>
</div>
<div class="space-y-2">
<label for="editNip71Duration" class="block text-sm font-medium text-gray-200">
<label for="editNip71Duration" class="block text-sm font-medium text-text">
Duration (seconds)
</label>
<input
@@ -157,12 +149,12 @@
data-nip71-input="duration"
class="input"
/>
<p class="text-xs text-gray-400">
<p class="text-xs text-muted">
Provide the runtime in whole seconds for timeline scrubbing.
</p>
</div>
<div class="space-y-2">
<label for="editNip71ContentWarning" class="block text-sm font-medium text-gray-200">
<label for="editNip71ContentWarning" class="block text-sm font-medium text-text">
Content warning
</label>
<input
@@ -172,14 +164,14 @@
placeholder="e.g., Flashing lights"
class="input"
/>
<p class="text-xs text-gray-400">
<p class="text-xs text-muted">
Leave blank if the video is safe for all audiences.
</p>
</div>
</div>
<div class="space-y-2">
<label for="editNip71Summary" class="block text-sm font-medium text-gray-200">
<label for="editNip71Summary" class="block text-sm font-medium text-text">
Summary
</label>
<textarea
@@ -189,7 +181,7 @@
class="textarea"
placeholder="Short synopsis used as the Nostr content field"
></textarea>
<p class="text-xs text-gray-400">
<p class="text-xs text-muted">
This becomes the event content. Keep it concise for Nostr readers.
</p>
</div>
@@ -197,19 +189,19 @@
<fieldset
id="editNip71TagsFieldset"
class="space-y-6 rounded-lg border border-gray-800 bg-black/30 p-4"
class="space-y-6 rounded-lg border border-border/70 bg-overlay-black/30 p-4"
data-nip71-section="tags"
>
<legend class="relative text-sm font-semibold text-gray-200">
<span class="inline-block -ml-2 rounded px-2 bg-black/30">NIP-71 tags</span>
<legend class="relative text-sm font-semibold text-text">
<span class="inline-block -ml-2 rounded px-2 bg-overlay-black/30">NIP-71 tags</span>
</legend>
<p class="text-xs text-gray-400">
<p class="text-xs text-muted">
Use the controls below to describe media variants, captions, chapters, participants, and references.
</p>
<section class="space-y-4" aria-labelledby="editNip71ImetaLabel" data-nip71-repeater="imeta">
<div class="flex items-center justify-between">
<h3 id="editNip71ImetaLabel" class="text-sm font-medium text-gray-200">Image metadata (imeta)</h3>
<h3 id="editNip71ImetaLabel" class="text-sm font-medium text-text">Image metadata (imeta)</h3>
<button
type="button"
class="btn-ghost focus-ring text-xs font-semibold"
@@ -219,16 +211,16 @@
Add variant
</button>
</div>
<p id="editNip71ImetaHelp" class="text-xs text-gray-400">
<p id="editNip71ImetaHelp" class="text-xs text-muted">
Provide dimensions, MIME type, and resource links for each variant. Nested repeaters let you attach multiple
<code>image</code>, <code>fallback</code>, or <code>service</code> values.
</p>
<div id="editNip71ImetaList" class="space-y-4" data-nip71-list="imeta"></div>
<template id="editNip71ImetaTemplate" data-nip71-template="imeta">
<article class="card space-y-3 bg-gray-900/60 p-4" data-nip71-entry="imeta">
<article class="card space-y-3 bg-surface/60 p-4" data-nip71-entry="imeta">
<div class="grid gap-3 md:grid-cols-2">
<div class="space-y-2">
<label class="block text-xs font-medium text-gray-300">
<label class="block text-xs font-medium text-muted-strong">
MIME type (<code>m</code>)
</label>
<input
@@ -237,10 +229,10 @@
placeholder="video/mp4"
class="input"
/>
<p class="text-[11px] text-gray-500">RFC 2046 media type for this encoding.</p>
<p class="text-[11px] text-muted">RFC 2046 media type for this encoding.</p>
</div>
<div class="space-y-2">
<label class="block text-xs font-medium text-gray-300">
<label class="block text-xs font-medium text-muted-strong">
Pixel dimensions (<code>dim</code>)
</label>
<input
@@ -249,10 +241,10 @@
placeholder="1920x1080"
class="input"
/>
<p class="text-[11px] text-gray-500">Formatted as widthxheight.</p>
<p class="text-[11px] text-muted">Formatted as widthxheight.</p>
</div>
<div class="space-y-2">
<label class="block text-xs font-medium text-gray-300">
<label class="block text-xs font-medium text-muted-strong">
Streaming URL (<code>url</code>)
</label>
<input
@@ -261,10 +253,10 @@
placeholder="https://cdn.example.com/variant.m3u8"
class="input"
/>
<p class="text-[11px] text-gray-500">HTTPS variant URL shared across clients.</p>
<p class="text-[11px] text-muted">HTTPS variant URL shared across clients.</p>
</div>
<div class="space-y-2">
<label class="block text-xs font-medium text-gray-300">
<label class="block text-xs font-medium text-muted-strong">
Magnet (<code>x</code>)
</label>
<input
@@ -273,13 +265,13 @@
placeholder="magnet:?xt=urn:btih:..."
class="input"
/>
<p class="text-[11px] text-gray-500">Optional magnet pointer if the variant is seeded via P2P.</p>
<p class="text-[11px] text-muted">Optional magnet pointer if the variant is seeded via P2P.</p>
</div>
</div>
<div class="space-y-3" data-nip71-nested="image">
<div class="flex items-center justify-between">
<h4 class="text-xs font-semibold uppercase tracking-wide text-gray-400">Image values</h4>
<h4 class="text-xs font-semibold uppercase tracking-wide text-muted">Image values</h4>
<button
type="button"
class="btn-ghost focus-ring text-[11px] font-medium"
@@ -311,7 +303,7 @@
<div class="space-y-3" data-nip71-nested="fallback">
<div class="flex items-center justify-between">
<h4 class="text-xs font-semibold uppercase tracking-wide text-gray-400">Fallback URLs</h4>
<h4 class="text-xs font-semibold uppercase tracking-wide text-muted">Fallback URLs</h4>
<button
type="button"
class="btn-ghost focus-ring text-[11px] font-medium"
@@ -343,7 +335,7 @@
<div class="space-y-3" data-nip71-nested="service">
<div class="flex items-center justify-between">
<h4 class="text-xs font-semibold uppercase tracking-wide text-gray-400">Services</h4>
<h4 class="text-xs font-semibold uppercase tracking-wide text-muted">Services</h4>
<button
type="button"
class="btn-ghost focus-ring text-[11px] font-medium"
@@ -388,7 +380,7 @@
<section class="space-y-4" aria-labelledby="editNip71TextTracksLabel" data-nip71-repeater="text-track">
<div class="flex items-center justify-between">
<h3 id="editNip71TextTracksLabel" class="text-sm font-medium text-gray-200">
<h3 id="editNip71TextTracksLabel" class="text-sm font-medium text-text">
Caption &amp; subtitle tracks (text-track)
</h3>
<button
@@ -400,15 +392,15 @@
Add track
</button>
</div>
<p id="editNip71TextTracksHelp" class="text-xs text-gray-400">
<p id="editNip71TextTracksHelp" class="text-xs text-muted">
Supply caption or subtitle URLs along with file type and language so players can surface accessibility features.
</p>
<div id="editNip71TextTrackList" class="space-y-4" data-nip71-list="text-track"></div>
<template id="editNip71TextTrackTemplate" data-nip71-template="text-track">
<article class="card space-y-3 bg-gray-900/60 p-4" data-nip71-entry="text-track">
<article class="card space-y-3 bg-surface/60 p-4" data-nip71-entry="text-track">
<div class="grid gap-3 md:grid-cols-3">
<div class="space-y-2">
<label class="block text-xs font-medium text-gray-300">Track URL</label>
<label class="block text-xs font-medium text-muted-strong">Track URL</label>
<input
type="url"
data-nip71-field="url"
@@ -417,7 +409,7 @@
/>
</div>
<div class="space-y-2">
<label class="block text-xs font-medium text-gray-300">Type</label>
<label class="block text-xs font-medium text-muted-strong">Type</label>
<input
type="text"
data-nip71-field="type"
@@ -426,7 +418,7 @@
/>
</div>
<div class="space-y-2">
<label class="block text-xs font-medium text-gray-300">Language</label>
<label class="block text-xs font-medium text-muted-strong">Language</label>
<input
type="text"
data-nip71-field="language"
@@ -450,7 +442,7 @@
<section class="space-y-4" aria-labelledby="editNip71SegmentsLabel" data-nip71-repeater="segment">
<div class="flex items-center justify-between">
<h3 id="editNip71SegmentsLabel" class="text-sm font-medium text-gray-200">Chapters &amp; segments (segment)</h3>
<h3 id="editNip71SegmentsLabel" class="text-sm font-medium text-text">Chapters &amp; segments (segment)</h3>
<button
type="button"
class="btn-ghost focus-ring text-xs font-semibold"
@@ -460,15 +452,15 @@
Add segment
</button>
</div>
<p id="editNip71SegmentsHelp" class="text-xs text-gray-400">
<p id="editNip71SegmentsHelp" class="text-xs text-muted">
Outline chapters with start and end times, titles, and optional thumbnails.
</p>
<div id="editNip71SegmentList" class="space-y-4" data-nip71-list="segment"></div>
<template id="editNip71SegmentTemplate" data-nip71-template="segment">
<article class="card space-y-3 bg-gray-900/60 p-4" data-nip71-entry="segment">
<article class="card space-y-3 bg-surface/60 p-4" data-nip71-entry="segment">
<div class="grid gap-3 md:grid-cols-2">
<div class="space-y-2">
<label class="block text-xs font-medium text-gray-300">Start (seconds)</label>
<label class="block text-xs font-medium text-muted-strong">Start (seconds)</label>
<input
type="number"
data-nip71-field="start"
@@ -478,7 +470,7 @@
/>
</div>
<div class="space-y-2">
<label class="block text-xs font-medium text-gray-300">End (seconds)</label>
<label class="block text-xs font-medium text-muted-strong">End (seconds)</label>
<input
type="number"
data-nip71-field="end"
@@ -488,7 +480,7 @@
/>
</div>
<div class="space-y-2">
<label class="block text-xs font-medium text-gray-300">Title</label>
<label class="block text-xs font-medium text-muted-strong">Title</label>
<input
type="text"
data-nip71-field="title"
@@ -497,7 +489,7 @@
/>
</div>
<div class="space-y-2">
<label class="block text-xs font-medium text-gray-300">Thumbnail URL</label>
<label class="block text-xs font-medium text-muted-strong">Thumbnail URL</label>
<input
type="url"
data-nip71-field="thumbnail"
@@ -521,7 +513,7 @@
<section class="space-y-4" aria-labelledby="editNip71HashtagsLabel" data-nip71-repeater="t">
<div class="flex items-center justify-between">
<h3 id="editNip71HashtagsLabel" class="text-sm font-medium text-gray-200">Hashtags (<code>t</code>)</h3>
<h3 id="editNip71HashtagsLabel" class="text-sm font-medium text-text">Hashtags (<code>t</code>)</h3>
<button
type="button"
class="btn-ghost focus-ring text-xs font-semibold"
@@ -530,7 +522,7 @@
Add hashtag
</button>
</div>
<p class="text-xs text-gray-400">
<p class="text-xs text-muted">
Enter keywords; leading <code>#</code> characters are stripped automatically when saving.
</p>
<div id="editNip71HashtagList" class="space-y-2" data-nip71-list="t"></div>
@@ -555,7 +547,7 @@
<section class="space-y-4" aria-labelledby="editNip71ParticipantsLabel" data-nip71-repeater="p">
<div class="flex items-center justify-between">
<h3 id="editNip71ParticipantsLabel" class="text-sm font-medium text-gray-200">Participants (<code>p</code>)</h3>
<h3 id="editNip71ParticipantsLabel" class="text-sm font-medium text-text">Participants (<code>p</code>)</h3>
<button
type="button"
class="btn-ghost focus-ring text-xs font-semibold"
@@ -566,10 +558,10 @@
</div>
<div id="editNip71ParticipantList" class="space-y-3" data-nip71-list="p"></div>
<template id="editNip71ParticipantTemplate" data-nip71-template="p">
<article class="card space-y-3 bg-gray-900/60 p-4" data-nip71-entry="p">
<article class="card space-y-3 bg-surface/60 p-4" data-nip71-entry="p">
<div class="grid gap-3 md:grid-cols-2">
<div class="space-y-2">
<label class="block text-xs font-medium text-gray-300">Participant pubkey</label>
<label class="block text-xs font-medium text-muted-strong">Participant pubkey</label>
<input
type="text"
data-nip71-field="pubkey"
@@ -578,7 +570,7 @@
/>
</div>
<div class="space-y-2">
<label class="block text-xs font-medium text-gray-300">Relay hint</label>
<label class="block text-xs font-medium text-muted-strong">Relay hint</label>
<input
type="text"
data-nip71-field="relay"
@@ -602,7 +594,7 @@
<section class="space-y-4" aria-labelledby="editNip71ReferencesLabel" data-nip71-repeater="r">
<div class="flex items-center justify-between">
<h3 id="editNip71ReferencesLabel" class="text-sm font-medium text-gray-200">Reference links (<code>r</code>)</h3>
<h3 id="editNip71ReferencesLabel" class="text-sm font-medium text-text">Reference links (<code>r</code>)</h3>
<button
type="button"
class="btn-ghost focus-ring text-xs font-semibold"
@@ -633,7 +625,7 @@
</fieldset>
<div class="space-y-1">
<label for="editVideoUrl" class="block text-sm font-medium text-gray-200">
<label for="editVideoUrl" class="block text-sm font-medium text-text">
Hosted video URL (https)
</label>
<div class="flex flex-col gap-2 sm:flex-row">
@@ -654,7 +646,7 @@
</div>
<div class="space-y-1">
<label for="editVideoWs" class="block text-sm font-medium text-gray-200">
<label for="editVideoWs" class="block text-sm font-medium text-text">
Web seed (ws=)
</label>
<div class="flex flex-col gap-2 sm:flex-row">
@@ -675,7 +667,7 @@
</div>
<div class="space-y-1">
<label for="editVideoXs" class="block text-sm font-medium text-gray-200">
<label for="editVideoXs" class="block text-sm font-medium text-text">
.torrent URL (xs=)
</label>
<div class="flex flex-col gap-2 sm:flex-row">
@@ -696,7 +688,7 @@
</div>
<div class="space-y-1">
<label for="editVideoMagnet" class="block text-sm font-medium text-gray-200">
<label for="editVideoMagnet" class="block text-sm font-medium text-text">
Magnet link
</label>
<div class="flex flex-col gap-2 sm:flex-row">
@@ -717,7 +709,7 @@
</div>
<div class="space-y-1">
<label for="editVideoThumbnail" class="block text-sm font-medium text-gray-200">
<label for="editVideoThumbnail" class="block text-sm font-medium text-text">
Thumbnail URL
</label>
<div class="flex flex-col gap-2 sm:flex-row">
@@ -738,7 +730,7 @@
</div>
<div class="space-y-1">
<label for="editVideoDescription" class="block text-sm font-medium text-gray-200">
<label for="editVideoDescription" class="block text-sm font-medium text-text">
Description
</label>
<div class="flex flex-col gap-2">
@@ -759,11 +751,11 @@
</div>
<div class="space-y-1">
<span id="editVideoVisibilityLabel" class="block text-sm font-medium text-gray-200">
<span id="editVideoVisibilityLabel" class="block text-sm font-medium text-text">
Visibility
</span>
<div
class="space-y-3 rounded-md border border-gray-800 bg-black/30 p-3"
class="space-y-3 rounded-md border border-border/70 bg-overlay-black/30 p-3"
role="group"
aria-labelledby="editVideoVisibilityLabel"
data-visibility-toggle
@@ -798,7 +790,7 @@
aria-hidden="true"
/>
</div>
<p class="text-xs text-gray-400" data-visibility-helper>
<p class="text-xs text-muted" data-visibility-helper>
Private notes stay visible only to you. Switch back to public when you're ready to share.
</p>
<button
@@ -815,7 +807,7 @@
<label
for="editVideoIsNsfw"
id="editVideoIsNsfwLabel"
class="block text-sm font-medium text-gray-200"
class="block text-sm font-medium text-text"
>
NSFW content
</label>
@@ -831,7 +823,7 @@
class="checkbox"
data-default-checked="false"
/>
<span class="text-sm text-gray-300">
<span class="text-sm text-muted-strong">
Mark as sensitive to blur previews and gate playback.
</span>
</label>
@@ -851,7 +843,7 @@
<label
for="editVideoIsForKids"
id="editVideoIsForKidsLabel"
class="block text-sm font-medium text-gray-200"
class="block text-sm font-medium text-text"
>
Made for kids
</label>
@@ -867,7 +859,7 @@
class="checkbox"
data-default-checked="false"
/>
<span class="text-sm text-gray-300">
<span class="text-sm text-muted-strong">
Flag kid-friendly videos to adjust recommendations and controls.
</span>
</label>
@@ -887,7 +879,7 @@
<label
for="editEnableComments"
id="editEnableCommentsLabel"
class="block text-sm font-medium text-gray-200"
class="block text-sm font-medium text-text"
>
Enable comments
</label>
@@ -904,7 +896,7 @@
data-default-checked="true"
checked
/>
<span class="text-sm text-gray-300">
<span class="text-sm text-muted-strong">
Allow replies once comment threads are available.
</span>
</label>
+8 -13
View File
@@ -7,23 +7,19 @@
>
<div class="bv-modal-backdrop" data-dismiss></div>
<div
class="bv-modal__panel relative my-0 w-full max-w-[90%] overflow-hidden rounded-lg bg-gray-900 lg:max-w-6xl"
>
<div class="modal-sheet">
<!-- Header bar (sticky) with updated title styling -->
<div
class="sticky top-0 flex items-center justify-between border-b border-gray-700 bg-gradient-to-b from-black/80 to-transparent p-4"
>
<h2 class="pb-2 text-3xl font-extrabold tracking-wide text-white">
<div class="modal-header">
<h2 class="pb-2 text-3xl font-extrabold tracking-wide text-text">
Feature Request Form
</h2>
<button
id="closeFeatureRequestModal"
class="flex h-10 w-10 items-center justify-center rounded-full bg-black/50 transition-all duration-200 backdrop-blur hover:bg-black/70 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-black focus:ring-blue-500"
class="modal-close"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 text-gray-300"
class="h-6 w-6 text-muted"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
@@ -38,13 +34,12 @@
</button>
</div>
<div class="p-6">
<div class="w-full" style="height: 80vh">
<div class="modal-body">
<div class="h-[80vh] w-full">
<iframe
src="./components/iframe_forms/iframe-request-form.html"
class="h-full w-full"
class="h-full w-full rounded-lg border border-border/30 shadow-sm"
frameborder="0"
style="border: none; box-shadow: 0 0 2px rgba(0, 0, 0, 0.2)"
></iframe>
</div>
</div>
+8 -13
View File
@@ -11,23 +11,19 @@
>
<div class="bv-modal-backdrop" data-dismiss></div>
<div
class="bv-modal__panel relative my-0 w-full max-w-[90%] overflow-hidden rounded-lg bg-gray-900 lg:max-w-6xl"
>
<div class="modal-sheet">
<!-- Header bar (sticky) with updated title styling -->
<div
class="sticky top-0 flex items-center justify-between border-b border-gray-700 bg-gradient-to-b from-black/80 to-transparent p-4"
>
<h2 class="pb-2 text-3xl font-extrabold tracking-wide text-white">
<div class="modal-header">
<h2 class="pb-2 text-3xl font-extrabold tracking-wide text-text">
General Feedback Form
</h2>
<button
id="closeGeneralFeedbackModal"
class="flex h-10 w-10 items-center justify-center rounded-full bg-black/50 transition-all duration-200 backdrop-blur hover:bg-black/70 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-black focus:ring-blue-500"
class="modal-close"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 text-gray-300"
class="h-6 w-6 text-muted"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
@@ -42,13 +38,12 @@
</button>
</div>
<div class="p-6">
<div class="w-full" style="height: 80vh">
<div class="modal-body">
<div class="h-[80vh] w-full">
<iframe
src="./components/iframe_forms/iframe-feedback-form.html"
class="h-full w-full"
class="h-full w-full rounded-lg border border-border/30 shadow-sm"
frameborder="0"
style="border: none; box-shadow: 0 0 2px rgba(0, 0, 0, 0.2)"
></iframe>
</div>
</div>
+10 -14
View File
@@ -1,21 +1,17 @@
<div id="loginModal" class="bv-modal hidden items-start justify-center">
<div class="bv-modal-backdrop" data-dismiss></div>
<div
class="bv-modal__panel bg-gray-900 w-full max-w-[90%] overflow-hidden lg:max-w-6xl"
>
<div class="modal-sheet overflow-hidden" tabindex="-1">
<!-- Header with the special exit button (unchanged) -->
<div
class="sticky top-0 flex items-center justify-between bg-gradient-to-b from-black/80 to-transparent p-4"
>
<h2 class="text-xl font-bold text-white">Login Options</h2>
<div class="modal-header">
<h2 class="text-xl font-bold text-text">Login Options</h2>
<button
id="closeLoginModal"
class="flex h-10 w-10 items-center justify-center rounded-full bg-black/50 transition-all duration-200 backdrop-blur hover:bg-black/70 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-black focus:ring-blue-500"
class="modal-close"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 text-gray-300"
class="h-6 w-6 text-muted-strong"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
@@ -31,28 +27,28 @@
</div>
<!-- Body with buttons (unchanged) -->
<div class="space-y-4 p-6">
<div class="modal-body space-y-4">
<!-- Application Form button -->
<button
id="openApplicationModal"
class="w-full rounded-md bg-indigo-500 px-4 py-2 text-white hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
class="w-full rounded-md bg-info px-4 py-2 text-text hover:bg-info-strong focus:outline-none focus:ring-2 focus:ring-info focus:ring-offset-2"
>
Application Form
</button>
<!-- Simple horizontal rule -->
<div class="my-2 border-t border-gray-700"></div>
<div class="my-2 border-t border-border/60"></div>
<!-- Existing login buttons -->
<button
id="loginNIP07"
class="w-full rounded-md bg-blue-500 px-4 py-2 text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
class="w-full rounded-md bg-info px-4 py-2 text-text hover:bg-info-strong focus:outline-none focus:ring-2 focus:ring-info focus:ring-offset-2"
>
Login with Extension (NIP-07)
</button>
<button
id="loginNSEC"
class="w-full cursor-not-allowed rounded-md bg-gray-500 px-4 py-2 text-white"
class="w-full cursor-not-allowed rounded-md bg-border/40 px-4 py-2 text-muted"
disabled
>
Login with NSEC (Coming Soon)
+59 -67
View File
@@ -9,34 +9,26 @@
>
<div class="bv-modal-backdrop"></div>
<div
class="bv-modal__panel modal-content bg-gray-900 w-full max-w-[90%] lg:max-w-6xl my-0 flex flex-col overflow-hidden relative max-h-[90vh]"
tabindex="-1"
>
<div class="modal-sheet modal-content relative flex max-h-[90vh] flex-col overflow-hidden lg:max-w-6xl" tabindex="-1">
<!-- Modal Header -->
<div class="sticky top-0 p-4">
<div class="card flex items-center justify-between gap-4 p-4">
<h2 id="profileModalTitle" class="text-xl font-bold text-white">Profile</h2>
<button
id="closeProfileModal"
class="focus-ring inline-flex h-10 w-10 items-center justify-center rounded-full bg-black/50 text-gray-300 transition hover:bg-black/70"
<div class="modal-header">
<h2 id="profileModalTitle" class="text-xl font-bold text-text">Profile</h2>
<button id="closeProfileModal" class="modal-close">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
</div>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
</div>
<!-- Modal Body -->
@@ -120,8 +112,8 @@
<div id="profileSwitcherTray" class="card space-y-6 p-6">
<div class="flex flex-wrap items-start justify-between gap-4">
<div class="space-y-2">
<h3 class="text-lg font-semibold text-white">Switch profiles</h3>
<p class="text-sm text-gray-400">
<h3 class="text-lg font-semibold text-text">Switch profiles</h3>
<p class="text-sm text-muted">
Save multiple Nostr profiles so you can swap identities without leaving bitvid.
</p>
</div>
@@ -137,7 +129,7 @@
data-state="active"
>
<span
class="flex h-12 w-12 flex-shrink-0 items-center justify-center overflow-hidden rounded-full border-2 border-blue-400/50 bg-slate-900"
class="flex h-12 w-12 flex-shrink-0 items-center justify-center overflow-hidden rounded-full border-2 border-info/50 bg-surface"
>
<img
id="profileModalAvatar"
@@ -148,7 +140,7 @@
</span>
<div class="flex min-w-0 flex-1 flex-col gap-2">
<div class="flex flex-wrap items-center gap-3">
<span class="text-[11px] font-semibold uppercase tracking-[0.2em] text-blue-200">
<span class="text-[11px] font-semibold uppercase tracking-[0.2em] text-info">
Active profile
</span>
<a
@@ -159,8 +151,8 @@
View channel
</a>
</div>
<span id="profileModalName" class="truncate text-sm font-semibold text-white">Loading...</span>
<span id="profileModalNpub" class="break-all font-mono text-xs text-gray-400">npub1...</span>
<span id="profileModalName" class="truncate text-sm font-semibold text-text">Loading...</span>
<span id="profileModalNpub" class="break-all font-mono text-xs text-muted">npub1...</span>
</div>
</div>
@@ -180,7 +172,7 @@
aria-label="Add a new Nostr profile"
>
<span
class="flex h-10 w-10 items-center justify-center rounded-full bg-blue-500/20 text-blue-400"
class="flex h-10 w-10 items-center justify-center rounded-full bg-info/20 text-info"
aria-hidden="true"
>
<svg
@@ -197,12 +189,12 @@
</svg>
</span>
<span class="flex flex-col text-left">
<span data-profile-add-title class="text-sm font-semibold text-white">Add profile</span>
<span data-profile-add-hint class="text-xs text-gray-300">Link another npub</span>
<span data-profile-add-title class="text-sm font-semibold text-text">Add profile</span>
<span data-profile-add-hint class="text-xs text-muted-strong">Link another npub</span>
</span>
</button>
<p class="text-sm text-gray-400">
<p class="text-sm text-muted">
Profiles you add here will stay on this device so you can quickly switch before posting or moderating.
</p>
</div>
@@ -215,11 +207,11 @@
aria-labelledby="profileNavRelays"
>
<div class="space-y-4">
<p class="text-sm text-gray-400">
<p class="text-sm text-muted">
Configure the relays bitvid will use to discover and publish your videos.
</p>
<div class="flex flex-col gap-3 sm:flex-row sm:items-end">
<label class="flex-1 text-sm text-gray-300" for="relayInput">
<label class="flex-1 text-sm text-muted-strong" for="relayInput">
<span class="mb-2 block font-medium">Add a relay</span>
<input
id="relayInput"
@@ -256,11 +248,11 @@
aria-labelledby="profileNavWallet"
>
<div class="space-y-4">
<p class="text-sm text-gray-400">
<p class="text-sm text-muted">
Connect a Nostr Wallet Connect (NWC) compatible wallet to zap creators directly from bitvid.
</p>
<div class="space-y-4">
<label class="block text-sm text-gray-300" for="profileWalletUri">
<label class="block text-sm text-muted-strong" for="profileWalletUri">
<span class="mb-2 block font-medium">Wallet Connect URI</span>
<input
id="profileWalletUri"
@@ -269,7 +261,7 @@
class="input"
/>
</label>
<label class="block text-sm text-gray-300" for="profileWalletDefaultZap">
<label class="block text-sm text-muted-strong" for="profileWalletDefaultZap">
<span class="mb-2 block font-medium">Default zap amount (sats)</span>
<input
id="profileWalletDefaultZap"
@@ -308,7 +300,7 @@
</div>
<p
id="profileWalletStatus"
class="text-sm text-gray-400"
class="text-sm text-muted"
role="status"
aria-live="polite"
></p>
@@ -321,12 +313,12 @@
role="tabpanel"
aria-labelledby="profileNavBlocked"
>
<p class="text-sm text-gray-400">
<p class="text-sm text-muted">
Creators you block are hidden from your bitvid experience. This
list is private to your account.
</p>
<div class="flex flex-col gap-3 sm:flex-row sm:items-end">
<label class="flex-1 text-sm text-gray-300" for="blockedInput">
<label class="flex-1 text-sm text-muted-strong" for="blockedInput">
<span class="mb-2 block font-medium">Creator npub</span>
<input
id="blockedInput"
@@ -347,7 +339,7 @@
</div>
<div
id="blockedEmpty"
class="card border border-dashed border-gray-700 p-6 text-center text-sm text-gray-400"
class="card border border-dashed border-border/60 p-6 text-center text-sm text-muted"
>
You haven’t blocked any creators yet.
</div>
@@ -359,7 +351,7 @@
role="tabpanel"
aria-labelledby="profileNavHistory"
>
<p class="text-sm text-gray-400">
<p class="text-sm text-muted">
Your recently watched videos appear here so you can jump back into favorites.
</p>
<div
@@ -394,13 +386,13 @@
<div class="flex flex-col">
<span
id="profileHistoryMetadataLabel"
class="text-sm font-medium text-gray-200"
class="text-sm font-medium text-text"
>
Store titles/thumbnails locally
</span>
<span
id="profileHistoryMetadataDescription"
class="text-xs text-gray-400"
class="text-xs text-muted"
>
When disabled, bitvid skips saving rich metadata to this device.
</span>
@@ -408,7 +400,7 @@
<button
id="profileHistoryMetadataToggle"
type="button"
class="focus-ring relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer items-center rounded-full border border-gray-600 bg-gray-700 transition"
class="focus-ring relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer items-center rounded-full border border-border bg-panel transition"
role="switch"
aria-checked="true"
aria-labelledby="profileHistoryMetadataLabel"
@@ -458,13 +450,13 @@
</div>
<div
id="profileHistoryError"
class="card hidden border border-red-500/40 bg-red-500/10 px-4 py-3 text-sm text-red-100"
class="card hidden border border-critical/40 bg-critical/10 px-4 py-3 text-sm text-critical"
role="alert"
aria-live="assertive"
></div>
<div
id="profileHistoryEmpty"
class="card hidden border border-dashed border-gray-700 p-6 text-center text-sm text-gray-400"
class="card hidden border border-dashed border-border/60 p-6 text-center text-sm text-muted"
>
You haven’t watched any videos yet.
</div>
@@ -487,24 +479,24 @@
aria-labelledby="profileNavAdmin"
>
<div class="space-y-2">
<h3 class="text-lg font-semibold text-white">Platform moderation</h3>
<p class="text-sm text-gray-400">
<h3 class="text-lg font-semibold text-text">Platform moderation</h3>
<p class="text-sm text-muted">
Manage bitvid’s moderator roles and creator allow/block lists. Changes apply instantly across the app.
</p>
</div>
<div id="adminModeratorsSection" class="space-y-4 hidden" aria-hidden="true">
<div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
<h4 class="text-base font-semibold text-white">Moderators</h4>
<p class="text-xs uppercase tracking-wide text-gray-400">
<h4 class="text-base font-semibold text-text">Moderators</h4>
<p class="text-xs uppercase tracking-wide text-muted">
Super Admin only
</p>
</div>
<p class="text-sm text-gray-400">
<p class="text-sm text-muted">
Moderators can edit the whitelist and blacklist but cannot manage other moderators or whitelist mode.
</p>
<div class="flex flex-col gap-3 sm:flex-row sm:items-end">
<label class="flex-1 text-sm text-gray-300" for="adminModeratorInput">
<label class="flex-1 text-sm text-muted-strong" for="adminModeratorInput">
<span class="mb-2 block font-medium">Moderator npub</span>
<input
id="adminModeratorInput"
@@ -525,7 +517,7 @@
</div>
<div
id="adminModeratorsEmpty"
class="card border border-dashed border-gray-700 p-4 text-center text-sm text-gray-400"
class="card border border-dashed border-border/60 p-4 text-center text-sm text-muted"
>
No moderators configured yet.
</div>
@@ -534,13 +526,13 @@
<div id="adminWhitelistSection" class="space-y-4">
<div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
<h4 class="text-base font-semibold text-white">Whitelist</h4>
<h4 class="text-base font-semibold text-text">Whitelist</h4>
</div>
<p class="text-sm text-gray-400">
<p class="text-sm text-muted">
Creators listed here remain visible when whitelist mode is enabled. Adding someone removes them from the blacklist.
</p>
<div class="flex flex-col gap-3 sm:flex-row sm:items-end">
<label class="flex-1 text-sm text-gray-300" for="adminWhitelistInput">
<label class="flex-1 text-sm text-muted-strong" for="adminWhitelistInput">
<span class="mb-2 block font-medium">Creator npub</span>
<input
id="adminWhitelistInput"
@@ -561,7 +553,7 @@
</div>
<div
id="adminWhitelistEmpty"
class="card border border-dashed border-gray-700 p-4 text-center text-sm text-gray-400"
class="card border border-dashed border-border/60 p-4 text-center text-sm text-muted"
>
No whitelisted creators yet.
</div>
@@ -570,13 +562,13 @@
<div id="adminBlacklistSection" class="space-y-4">
<div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
<h4 class="text-base font-semibold text-white">Blacklist</h4>
<h4 class="text-base font-semibold text-text">Blacklist</h4>
</div>
<p class="text-sm text-gray-400">
<p class="text-sm text-muted">
Creators on the blacklist are hidden from bitvid everywhere. Adding someone removes them from the whitelist.
</p>
<div class="flex flex-col gap-3 sm:flex-row sm:items-end">
<label class="flex-1 text-sm text-gray-300" for="adminBlacklistInput">
<label class="flex-1 text-sm text-muted-strong" for="adminBlacklistInput">
<span class="mb-2 block font-medium">Creator npub</span>
<input
id="adminBlacklistInput"
@@ -597,7 +589,7 @@
</div>
<div
id="adminBlacklistEmpty"
class="card border border-dashed border-gray-700 p-4 text-center text-sm text-gray-400"
class="card border border-dashed border-border/60 p-4 text-center text-sm text-muted"
>
No blacklisted creators yet.
</div>
@@ -609,7 +601,7 @@
</div>
<!-- Modal Footer -->
<div class="flex items-center justify-end gap-3 border-t border-gray-700 p-4">
<div class="flex items-center justify-end gap-3 border-t border-border/60 p-4">
<button id="profileLogoutBtn" class="btn focus-ring" data-variant="danger">
Logout
</button>
+42 -51
View File
@@ -13,30 +13,25 @@
data-dismiss
></div>
<div
class="bv-modal__panel relative my-0 w-full max-h-[92vh] max-w-[95%] overflow-hidden rounded-lg bg-gray-900 lg:max-w-5xl"
tabindex="-1"
>
<div
class="from-black/80 sticky top-0 flex items-center justify-between bg-gradient-to-b to-transparent p-4 transition-transform duration-150"
>
<div class="modal-sheet max-h-[92vh] overflow-hidden lg:max-w-5xl" tabindex="-1">
<div class="modal-header transition-transform duration-150">
<div class="flex flex-col">
<h2 id="revertModalTitle" class="text-xl font-bold text-white">
<h2 id="revertModalTitle" class="text-xl font-bold text-text">
Revert Video Note
</h2>
<p id="revertModalSubtitle" class="text-xs text-gray-400">
<p id="revertModalSubtitle" class="text-xs text-muted">
Review previous versions before restoring an older state.
</p>
</div>
<button
id="closeRevertVideoModal"
class="bg-black/50 hover:bg-black/70 flex h-10 w-10 items-center justify-center rounded-full backdrop-blur transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-black"
class="modal-close"
type="button"
aria-label="Close revert modal"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 text-gray-300"
class="h-6 w-6 text-muted-strong"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
@@ -51,26 +46,23 @@
</button>
</div>
<div
class="space-y-6 overflow-y-auto p-6"
style="max-height: calc(92vh - 4rem)"
>
<div class="modal-body space-y-6 overflow-y-auto max-h-[calc(92vh-4rem)]">
<div
class="rounded-md border border-gray-700 bg-gray-800/60 p-4 text-sm text-gray-300"
class="rounded-md border border-border/60 bg-panel/60 p-4 text-sm text-muted-strong"
>
<p>
Selecting an older version will mark any newer edits as reverted.
The previous revision will become the active note on the relays.
</p>
<p class="mt-2 text-xs text-gray-400">
<p class="mt-2 text-xs text-muted">
Versions are grouped by their
<code
class="rounded border border-gray-700 bg-gray-900/60 px-1 py-0.5 text-[0.7rem]"
class="rounded border border-border/60 bg-surface/60 px-1 py-0.5 text-[0.7rem]"
>d</code
>
tag or shared
<code
class="rounded border border-gray-700 bg-gray-900/60 px-1 py-0.5 text-[0.7rem]"
class="rounded border border-border/60 bg-surface/60 px-1 py-0.5 text-[0.7rem]"
>videoRootId</code
>. This ensures legacy clients see consistent history when multiple
edits were published, and keeps audience flags (NSFW / for kids)
@@ -81,24 +73,23 @@
<div class="grid gap-6 lg:grid-cols-[minmax(240px,280px)_1fr]">
<aside class="space-y-4">
<div class="flex items-center justify-between">
<h3 class="text-sm font-semibold text-gray-200">
<h3 class="text-sm font-semibold text-text">
Revision history
</h3>
<span
id="revertHistoryCount"
class="rounded-full bg-gray-800 px-2 py-0.5 text-xs text-gray-400"
class="rounded-full bg-panel px-2 py-0.5 text-xs text-muted"
></span>
</div>
<div
id="revertVersionsList"
class="space-y-2 overflow-y-auto pr-1"
style="max-height: 48vh"
class="space-y-2 overflow-y-auto pr-1 max-h-[48vh]"
></div>
</aside>
<section
id="revertVersionDetails"
class="rounded-lg border border-gray-800 bg-gray-900/70 p-4 text-sm text-gray-200"
class="rounded-lg border border-border/70 bg-surface/70 p-4 text-sm text-text"
aria-live="polite"
>
<!-- NOTE: Keep Upload/Edit metadata fields mirrored when adjusting these sections. -->
@@ -109,80 +100,80 @@
<div class="space-y-2 text-center">
<h3
id="revertVersionPlaceholderHeading"
class="text-sm font-semibold text-gray-200"
class="text-sm font-semibold text-text"
>
Revision metadata
</h3>
<p id="revertVersionPlaceholder" class="text-sm text-gray-500">
<p id="revertVersionPlaceholder" class="text-sm text-muted">
Select an earlier revision to inspect its metadata.
</p>
</div>
<section class="space-y-2">
<h4
class="text-xs font-semibold uppercase tracking-wide text-gray-400"
class="text-xs font-semibold uppercase tracking-wide text-muted"
>
Playback sources
</h4>
<dl class="grid gap-2 text-xs text-gray-400 sm:grid-cols-2">
<dl class="grid gap-2 text-xs text-muted sm:grid-cols-2">
<div class="space-y-1">
<dt class="font-semibold text-gray-300">Hosted URL</dt>
<dd class="text-gray-500">Awaiting selection</dd>
<dt class="font-semibold text-muted-strong">Hosted URL</dt>
<dd class="text-muted">Awaiting selection</dd>
</div>
<div class="space-y-1">
<dt class="font-semibold text-gray-300">Magnet</dt>
<dd class="text-gray-500">Awaiting selection</dd>
<dt class="font-semibold text-muted-strong">Magnet</dt>
<dd class="text-muted">Awaiting selection</dd>
</div>
</dl>
</section>
<section class="space-y-2">
<h4
class="text-xs font-semibold uppercase tracking-wide text-gray-400"
class="text-xs font-semibold uppercase tracking-wide text-muted"
>
Audience flags
</h4>
<dl class="grid gap-2 text-xs text-gray-400 sm:grid-cols-2">
<dl class="grid gap-2 text-xs text-muted sm:grid-cols-2">
<div class="space-y-1">
<dt class="font-semibold text-gray-300">NSFW flag</dt>
<dd class="text-gray-500">Awaiting selection</dd>
<dt class="font-semibold text-muted-strong">NSFW flag</dt>
<dd class="text-muted">Awaiting selection</dd>
</div>
<div class="space-y-1">
<dt class="font-semibold text-gray-300">For kids flag</dt>
<dd class="text-gray-500">Awaiting selection</dd>
<dt class="font-semibold text-muted-strong">For kids flag</dt>
<dd class="text-muted">Awaiting selection</dd>
</div>
</dl>
</section>
<section class="space-y-2">
<h4
class="text-xs font-semibold uppercase tracking-wide text-gray-400"
class="text-xs font-semibold uppercase tracking-wide text-muted"
>
NIP-71 event metadata
</h4>
<dl class="grid gap-2 text-xs text-gray-400 sm:grid-cols-2">
<dl class="grid gap-2 text-xs text-muted sm:grid-cols-2">
<div class="space-y-1">
<dt class="font-semibold text-gray-300">Kind</dt>
<dd class="text-gray-500">Awaiting selection</dd>
<dt class="font-semibold text-muted-strong">Kind</dt>
<dd class="text-muted">Awaiting selection</dd>
</div>
<div class="space-y-1">
<dt class="font-semibold text-gray-300">Duration</dt>
<dd class="text-gray-500">Awaiting selection</dd>
<dt class="font-semibold text-muted-strong">Duration</dt>
<dd class="text-muted">Awaiting selection</dd>
</div>
<div class="space-y-1 sm:col-span-2">
<dt class="font-semibold text-gray-300">Summary</dt>
<dd class="text-gray-500">Awaiting selection</dd>
<dt class="font-semibold text-muted-strong">Summary</dt>
<dd class="text-muted">Awaiting selection</dd>
</div>
</dl>
</section>
<section class="space-y-2">
<h4
class="text-xs font-semibold uppercase tracking-wide text-gray-400"
class="text-xs font-semibold uppercase tracking-wide text-muted"
>
NIP-71 media metadata
</h4>
<p class="text-xs text-gray-500">
<p class="text-xs text-muted">
Media variants, text tracks, chapters, hashtags, participants,
and references will appear once a revision is selected.
</p>
@@ -191,20 +182,20 @@
</section>
</div>
<p id="revertSelectionStatus" class="text-xs text-gray-400"></p>
<p id="revertSelectionStatus" class="text-xs text-muted"></p>
<div class="flex flex-col gap-3 sm:flex-row sm:justify-end">
<button
type="button"
id="cancelRevertVideo"
class="w-full rounded-md bg-gray-800 px-4 py-2 text-gray-200 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 focus:ring-offset-gray-900 sm:w-auto"
class="w-full rounded-md bg-panel px-4 py-2 text-text hover:bg-panel focus:outline-none focus:ring-2 focus:ring-info focus:ring-offset-2 focus:ring-offset-surface sm:w-auto"
>
Cancel
</button>
<button
type="button"
id="confirmRevertVideo"
class="w-full rounded-md bg-red-600 px-4 py-2 text-white hover:bg-red-500 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 focus:ring-offset-gray-900 disabled:cursor-not-allowed disabled:opacity-60 sm:w-auto"
class="w-full rounded-md bg-critical px-4 py-2 text-text hover:bg-critical-strong focus:outline-none focus:ring-2 focus:ring-critical-strong focus:ring-offset-2 focus:ring-offset-surface disabled:cursor-not-allowed disabled:opacity-60 sm:w-auto"
disabled
>
Revert to selected version
File diff suppressed because it is too large. Load diff
+4 -4
View File
@@ -235,7 +235,7 @@
</button>
<div class="my-2 border-t border-border/40"></div>
<button
class="focus-ring block w-full px-4 py-2 text-left font-semibold text-critical transition hover:bg-critical hover:text-white"
class="focus-ring block w-full px-4 py-2 text-left font-semibold text-critical transition hover:bg-critical hover:text-text"
data-action="blacklist-author"
data-context="modal"
data-blacklist-menu="true"
@@ -243,7 +243,7 @@
Blacklist creator
</button>
<button
class="focus-ring block w-full px-4 py-2 text-left font-semibold text-critical transition hover:bg-critical hover:text-white"
class="focus-ring block w-full px-4 py-2 text-left font-semibold text-critical transition hover:bg-critical hover:text-text"
data-action="block-author"
data-context="modal"
>
@@ -280,7 +280,7 @@
<div class="flex items-start justify-between gap-4">
<h2
id="videoTitle"
class="text-2xl font-semibold leading-tight text-white"
class="text-2xl font-semibold leading-tight text-text"
></h2>
<div
id="modalStatus"
@@ -311,7 +311,7 @@
<div class="flex flex-col gap-1">
<h3
id="creatorName"
class="text-lg font-semibold text-white"
class="text-lg font-semibold text-text"
>
Creator Name
</h3>
+2 -2
View File
@@ -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-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);--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-contaiLine 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);--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: ;--tLine 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
/*! 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
+51
View File
@@ -270,6 +270,57 @@
@apply absolute inset-0 z-[var(--z-modal-overlay)] bg-overlay bg-opacity-80 backdrop-blur;
}
.bv-modal-backdrop[data-variant="veil"] {
@apply bg-overlay-veil bg-opacity-100;
}
.bv-modal-backdrop[data-variant="muted"] {
@apply bg-overlay-muted;
}
.modal-sheet {
@apply bv-modal__panel relative my-0 w-full max-w-[90%] overflow-hidden rounded-xl bg-surface lg:max-w-6xl;
}
.modal-header {
@apply sticky top-0 flex items-center justify-between border-b border border-border border-opacity-60 px-4 py-4;
background: linear-gradient(
to bottom,
var(--color-overlay-panel-gradient-start),
var(--color-overlay-panel-gradient-end, transparent)
);
backdrop-filter: blur(var(--modal-header-blur, 18px));
}
.modal-header[data-variant="flush"] {
@apply border-transparent;
background: linear-gradient(
to bottom,
var(--color-overlay-panel-tint),
transparent
);
}
.modal-header__title {
@apply text-xl font-bold text-text;
}
.modal-close {
@apply focus-ring flex h-10 w-10 items-center justify-center rounded-full bg-overlay-black bg-opacity-50 text-muted transition duration-base ease-out;
}
.modal-close:hover {
@apply bg-overlay-black bg-opacity-70 text-text;
}
.modal-body {
@apply space-y-4 p-6;
}
.modal-footer {
@apply border-t border border-border border-opacity-60 bg-surface px-6 py-4;
}
.grid-stack {
@apply grid gap-lg;
}
+3
View File
@@ -27,6 +27,9 @@
--color-subtle: rgb(229 231 235);
--color-critical: rgb(127 29 29);
--color-critical-strong: rgb(153 27 27);
--color-warning: rgb(250 204 21);
--color-warning-strong: rgb(217 119 6);
--color-warning-surface: rgb(146 64 14 / 0.24);
--color-neutral-700: rgb(63 63 70);
--color-neutral-600: rgb(82 82 91);
--color-white: rgb(255 255 255);
+5
View File
@@ -72,6 +72,11 @@ module.exports = {
DEFAULT: "var(--color-critical)",
strong: "var(--color-critical-strong)"
},
warning: {
DEFAULT: "var(--color-warning)",
strong: "var(--color-warning-strong)",
surface: "var(--color-warning-surface)"
},
neutral: {
600: "var(--color-neutral-600)",
700: "var(--color-neutral-700)"