mirror of
https://github.com/PR0M3TH3AN/bitvid.git
synced 2026-10-27 07:52:24 +00:00
Merge pull request #429 from PR0M3TH3AN/codex/refactor-modal-templates-with-tailwind-classes
Refactor modal styles to tokenized palette
This commit is contained in:
16 files changed
+544
-548
No files matched your search
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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
@@ -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 & 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>
|
||||
|
||||
@@ -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 & 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 & segments (segment)</h3>
|
||||
<h3 id="editNip71SegmentsLabel" class="text-sm font-medium text-text">Chapters & 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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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
@@ -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)
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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
|
||||
|
||||
+214
-219
File diff suppressed because it is too large.
Load diff
@@ -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>
|
||||
|
||||
@@ -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
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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)"
|
||||
|
||||
Reference in new issue
Block a user