mirror of
https://github.com/PR0M3TH3AN/bitvid.git
synced 2026-10-30 01:12:39 +00:00
Merge pull request #457 from PR0M3TH3AN/codex/update-modal-styling-and-layout
Refine modal styling and disclaimer layout
This commit is contained in:
5 files changed
+129
-88
No files matched your search
+39
-47
@@ -12,37 +12,36 @@
|
||||
|
||||
<!-- Outer container with wide layout, just like content-appeals-form -->
|
||||
<div class="bv-modal__panel 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"></div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="modal-body flex-1 overflow-y-auto">
|
||||
<!-- Scrollable disclaimers area -->
|
||||
<div class="space-y-6 text-muted-strong">
|
||||
<!-- Example: Insert your disclaimers here -->
|
||||
|
||||
<div class="mb-8 flex justify-center">
|
||||
<div class="mx-auto max-w-3xl space-y-8 text-base text-text">
|
||||
<div class="flex justify-center pt-1">
|
||||
<img
|
||||
src="assets/svg/bitvid-logo-dark-mode.svg"
|
||||
alt="bitvid logo"
|
||||
class="h-16"
|
||||
class="h-12 w-auto"
|
||||
/>
|
||||
</div>
|
||||
<h2
|
||||
id="disclaimerModalTitle"
|
||||
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-warning-strong/60 bg-warning-surface p-4"
|
||||
>
|
||||
<header class="space-y-4 text-center">
|
||||
<h2
|
||||
id="disclaimerModalTitle"
|
||||
class="text-4xl font-semibold tracking-tight text-text"
|
||||
>
|
||||
Welcome to bitvid
|
||||
</h2>
|
||||
<p class="mx-auto max-w-2xl text-base leading-relaxed text-text-frosted">
|
||||
bitvid is a decentralized video platform where content is shared
|
||||
directly between users. We want you to understand a few important
|
||||
points before you continue.
|
||||
</p>
|
||||
</header>
|
||||
<div class="modal-alert" role="status">
|
||||
<svg
|
||||
class="mt-0.5 mr-3 h-5 w-5 flex-shrink-0 text-warning-strong"
|
||||
class="modal-alert__icon"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
@@ -51,65 +50,58 @@
|
||||
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-warning">
|
||||
<p class="text-sm">
|
||||
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
|
||||
sec. Videos might take 10 to 60 seconds to load initially.
|
||||
sec—videos might take 10 to 60 seconds to load initially.
|
||||
</p>
|
||||
</div>
|
||||
<p>
|
||||
bitvid is a decentralized video platform where content is shared
|
||||
directly between users. We want you to understand a few important
|
||||
points before you continue:
|
||||
</p>
|
||||
|
||||
<div id="disclaimerModalDescription" class="space-y-4">
|
||||
<div class="rounded-lg bg-panel p-4">
|
||||
<h3 class="mb-2 font-semibold text-text">Early Access Status</h3>
|
||||
<p class="text-muted">
|
||||
<article class="modal-tile space-y-2">
|
||||
<h3>Early Access Status</h3>
|
||||
<p>
|
||||
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-panel p-4">
|
||||
<h3 class="mb-2 font-semibold text-text">
|
||||
Content Responsibility & Moderation
|
||||
</h3>
|
||||
<p class="text-muted">
|
||||
</article>
|
||||
<article class="modal-tile space-y-2">
|
||||
<h3>Content Responsibility & Moderation</h3>
|
||||
<p>
|
||||
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-panel p-4">
|
||||
<h3 class="mb-2 font-semibold text-text">Platform Status</h3>
|
||||
<p class="text-muted">
|
||||
</article>
|
||||
<article class="modal-tile space-y-2">
|
||||
<h3>Platform Status</h3>
|
||||
<p>
|
||||
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-panel p-4">
|
||||
<h3 class="mb-2 font-semibold text-text">Get Involved</h3>
|
||||
<p class="text-muted">
|
||||
</article>
|
||||
<article class="modal-tile space-y-2">
|
||||
<h3>Get Involved</h3>
|
||||
<p>
|
||||
Are you a developer? We'd love your help! Visit our GitHub
|
||||
repository to contribute to building the future of decentralized
|
||||
video sharing.
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Button at bottom -->
|
||||
<div class="modal-footer">
|
||||
<div class="modal-footer pt-6">
|
||||
<button
|
||||
id="acceptDisclaimer"
|
||||
class="btn w-full"
|
||||
class="modal-primary"
|
||||
type="button"
|
||||
>
|
||||
I Understand
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
:root{--color-page:#fff;--color-page-alt:#f9fafb;--color-surface:#0f172a;--color-surface-alt:#111827;--color-bg:var(--color-surface);--color-card:#1e293b;--color-card-private:#3b1d74;--color-card-critical:#3f0b13;--color-panel:#1f2937;--color-panel-hover:#334155;--color-border:#374151;--color-border-subtle:#d1d5db;--color-primary:#fe0032;--color-secondary:#ff93a5;--color-info:#60a5fa;--color-info-strong:#2563eb;--color-info-pressed:#1d4ed8;--color-muted-strong:#6b7280;--color-text:#f8fafc;--color-text-strong:#0f172a;--color-text-muted:var(--color-muted);--color-muted:#94a3b8;--color-muted-alt:#9ca3af;--color-subtle-text:#e2e8f0;--color-subtle:#e5e7eb;--color-critical:#7f1d1d;--color-critical-strong:#991b1b;--color-warning:#facc15;--color-warning-strong:#d97706;--color-warning-surface:rgba(146,64,14,.24);--color-neutral-700:#3f3f46;--color-neutral-600:#52525b;--color-white:#fff;--color-black:#000;--color-overlay:#1a2234;--color-overlay-black:rgba(0,0,0,.9);--color-overlay-muted:rgba(15,23,42,.55);--color-overlay-strong:rgba(15,23,42,.75);--color-overlay-darker:rgba(15,23,42,.88);--color-overlay-panel:rgba(31,41,55,.9);--color-overlay-panel-soft:rgba(31,41,55,.75);--color-overlay-panel-tint:rgba(31,41,55,.5);--color-overlay-panel-glass:rgba(30,41,59,.85);--color-overlay-veil:rgba(11,17,32,.96);--color-overlay-banner:rgba(51,65,85,.95);--color-overlay-panel-gradient-start:rgba(30,41,59,.92);--color-overlay-panel-gradient-end:rgba(15,23,42,.92);--color-surface-tint-subtle:rgba(148,163,184,.08);--color-border-translucent:rgba(148,163,184,.18);--color-border-translucent-strong:rgba(148,163,184,.25);--color-border-translucent-bright:rgba(148,163,184,.32);--color-border-translucent-stronger:rgba(148,163,184,.35);--color-border-translucent-strongest:rgba(148,163,184,.4);--color-border-translucent-glow:rgba(148,163,184,.55);--color-border-translucent-medium:rgba(148,163,184,.2);--color-border-neutral-soft:rgba(229,231,235,.35);--color-border-info-soft:rgba(96,165,250,.35);--color-border-sidebar-strong:rgba(55,65,81,.9);--color-ring-private:rgba(168,85,247,.55);--color-ring-private-hover:rgba(192,132,252,.65);--color-ring-critical:rgba(239,68,68,.4);--color-ring-critical-soft:rgba(239,68,68,.35);--color-ring-critical-hover:rgba(239,68,68,.45);--color-ring-critical-strong:rgba(239,68,68,.55);--color-ring-alert:rgba(220,38,38,.6);--color-gradient-visibility-start:rgba(129,140,248,.4);--color-gradient-visibility-end:rgba(192,132,252,.32);--color-white-soft:hsla(0,0%,100%,.1);--color-white-softer:hsla(0,0%,100%,.3);--color-white-softest:hsla(0,0%,100%,.4);--color-shadow-floating:rgba(8,11,30,.55);--color-shadow-elevated:rgba(8,11,30,.45);--color-shadow-panel:rgba(15,23,42,.35);--color-shadow-notification:rgba(15,23,42,.3);--color-shadow-sidebar:rgba(0,0,0,.45);--color-divider-strong:rgba(15,23,42,.35);--color-text-frosted-strong:rgba(226,232,240,.94);--color-text-frosted:rgba(226,232,240,.9);--color-text-frosted-soft:rgba(226,232,240,.82);--color-blog-transparent:transparent;--color-blog-cyan-500:#06b6d4;--color-blog-sky-500:#0bf;--color-blog-teal-600:#0e7490;--color-blog-green-800:#14532d;--color-blog-green-700:#15803d;--color-blog-teal-700:#164e63;--color-blog-gray-900:#171717;--color-blog-coffee-900:#1c1917;--color-blog-green-500:#22c55e;--color-blog-gray-800:#2b2b2b;--color-blog-gray-700:#3b3b3b;--color-blog-teal-accent:#3e8b8a;--color-blog-gray-650:#404040;--color-blog-brown-700:#44403c;--color-blog-purple-900:#581c87;--color-blog-gray-500:#666;--color-blog-gray-450:#737373;--color-blog-gray-440:#747474;--color-blog-brown-500:#78716c;--color-blog-rust-700:#7c2d12;--color-blog-purple-700:#7e22ce;--color-blog-purple-accent:#92379c;--color-blog-purple-muted:#96609c;--color-blog-gray-300:#999;--color-blog-purple-500:#a855f7;--color-blog-gray-275:#a9a9a9;--color-blog-red-600:#b91c1c;--color-blog-rust-600:#c2410c;--color-blog-error:#ca1717;--color-blog-gray-220:#cbcbcb;--color-blog-gray-210:#ccc;--color-blog-gray-200:#dedede;--color-blog-amber-500:#e4984d;--color-blog-gray-190:#e0e0e0;--color-blog-orange-600:#e35428;--color-blog-gray-180:#e9e9e9;--color-blog-gray-170:#ebebeb;--color-blog-red-500:#ef4444;--color-blog-amber-400:#f6ad55;--color-blog-neutral-100:#f5f5f5;--color-blog-neutral-120:#f6f6f6;--color-blog-orange-500:#f97316;--color-blog-neutral-50:#fdfdfd;--space-2xs:0.25rem;--space-xs:0.5rem;--space-sm:0.75rem;--space-md:1rem;--space-lg:1.5rem;--space-xl:2rem;--space-2xl:3rem;--radius-sm:0.25rem;--radius-md:0.5rem;--radius-lg:0.75rem;--radius-xl:1rem;--radius-full:9999px;--shadow-sm:0 0.0625rem 0.125rem 0 rgb(0 0 0/5%);--shadow-md:0 0.25rem 0.375rem -0.0625rem rgba(0,0,0,.1);--shadow-lg:0 0.625rem 0.9375rem -0.1875rem rgba(0,0,0,.1);--shadow-modal:0 1.25rem 2.5rem -0.375rem rgba(15,23,42,.55);--font-family-sans:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;--font-family-mono:"Fira Code","SFMono-Regular",ui-monospace,monospace;--font-size-xs:0.75rem;--font-size-sm:0.875rem;--font-size-base:1rem;--font-size-lLine truncated
|
||||
:root{--color-page:#fff;--color-page-alt:#f9fafb;--color-surface:#0f172a;--color-surface-alt:#111827;--color-bg:var(--color-surface);--color-card:#1e293b;--color-card-private:#3b1d74;--color-card-critical:#3f0b13;--color-panel:#1f2937;--color-panel-hover:#334155;--color-border:#374151;--color-border-subtle:#d1d5db;--color-primary:#fe0032;--color-secondary:#ff93a5;--color-info:#60a5fa;--color-info-strong:#2563eb;--color-info-pressed:#1d4ed8;--color-muted-strong:#6b7280;--color-text:#f8fafc;--color-text-strong:#0f172a;--color-text-muted:var(--color-muted);--color-muted:#94a3b8;--color-muted-alt:#9ca3af;--color-subtle-text:#e2e8f0;--color-subtle:#e5e7eb;--color-critical:#7f1d1d;--color-critical-strong:#991b1b;--color-warning:#facc15;--color-warning-strong:#d97706;--color-warning-surface:rgba(146,64,14,.24);--color-warning-glass:rgba(250,204,21,.18);--color-neutral-700:#3f3f46;--color-neutral-600:#52525b;--color-white:#fff;--color-black:#000;--color-overlay:#1a2234;--color-overlay-black:rgba(0,0,0,.9);--color-overlay-muted:rgba(15,23,42,.55);--color-overlay-strong:rgba(15,23,42,.75);--color-overlay-darker:rgba(15,23,42,.88);--color-overlay-panel:rgba(26,34,52,.82);--color-overlay-panel-soft:rgba(26,34,52,.65);--color-overlay-panel-tint:rgba(31,41,55,.5);--color-overlay-panel-glass:rgba(28,37,58,.72);--color-overlay-panel-glass-soft:rgba(31,41,55,.55);--color-modal-backdrop:rgba(8,12,24,.58);--color-modal-surface:rgba(20,28,46,.78);--color-overlay-veil:rgba(11,17,32,.96);--color-overlay-banner:rgba(51,65,85,.95);--color-overlay-panel-gradient-start:rgba(30,41,59,.92);--color-overlay-panel-gradient-end:rgba(15,23,42,.92);--color-surface-tint-subtle:rgba(148,163,184,.08);--color-border-translucent:rgba(148,163,184,.18);--color-border-translucent-strong:rgba(148,163,184,.25);--color-border-translucent-bright:rgba(148,163,184,.32);--color-border-translucent-stronger:rgba(148,163,184,.35);--color-border-translucent-strongest:rgba(148,163,184,.4);--color-border-translucent-glow:rgba(148,163,184,.55);--color-border-translucent-medium:rgba(148,163,184,.2);--color-border-neutral-soft:rgba(229,231,235,.35);--color-border-info-soft:rgba(96,165,250,.35);--color-border-sidebar-strong:rgba(55,65,81,.9);--color-ring-private:rgba(168,85,247,.55);--color-ring-private-hover:rgba(192,132,252,.65);--color-ring-critical:rgba(239,68,68,.4);--color-ring-critical-soft:rgba(239,68,68,.35);--color-ring-critical-hover:rgba(239,68,68,.45);--color-ring-critical-strong:rgba(239,68,68,.55);--color-ring-alert:rgba(220,38,38,.6);--color-gradient-visibility-start:rgba(129,140,248,.4);--color-gradient-visibility-end:rgba(192,132,252,.32);--color-white-soft:hsla(0,0%,100%,.1);--color-white-softer:hsla(0,0%,100%,.3);--color-white-softest:hsla(0,0%,100%,.4);--color-shadow-floating:rgba(8,11,30,.55);--color-shadow-elevated:rgba(8,11,30,.45);--color-shadow-panel:rgba(15,23,42,.35);--color-shadow-notification:rgba(15,23,42,.3);--color-shadow-sidebar:rgba(0,0,0,.45);--color-divider-strong:rgba(15,23,42,.35);--color-text-frosted-strong:rgba(226,232,240,.94);--color-text-frosted:rgba(226,232,240,.9);--color-text-frosted-soft:rgba(226,232,240,.82);--color-blog-transparent:transparent;--color-blog-cyan-500:#06b6d4;--color-blog-sky-500:#0bf;--color-blog-teal-600:#0e7490;--color-blog-green-800:#14532d;--color-blog-green-700:#15803d;--color-blog-teal-700:#164e63;--color-blog-gray-900:#171717;--color-blog-coffee-900:#1c1917;--color-blog-green-500:#22c55e;--color-blog-gray-800:#2b2b2b;--color-blog-gray-700:#3b3b3b;--color-blog-teal-accent:#3e8b8a;--color-blog-gray-650:#404040;--color-blog-brown-700:#44403c;--color-blog-purple-900:#581c87;--color-blog-gray-500:#666;--color-blog-gray-450:#737373;--color-blog-gray-440:#747474;--color-blog-brown-500:#78716c;--color-blog-rust-700:#7c2d12;--color-blog-purple-700:#7e22ce;--color-blog-purple-accent:#92379c;--color-blog-purple-muted:#96609c;--color-blog-gray-300:#999;--color-blog-purple-500:#a855f7;--color-blog-gray-275:#a9a9a9;--color-blog-red-600:#b91c1c;--color-blog-rust-600:#c2410c;--color-blog-error:#ca1717;--color-blog-gray-220:#cbcbcb;--color-blog-gray-210:#ccc;--color-blog-gray-200:#dedede;--color-blog-amber-500:#e4984d;--color-blog-gray-190:#e0e0e0;--color-blog-orange-600:#e35428;--color-blog-gray-180:#e9e9e9;--color-blog-gray-170:#ebebeb;--color-blog-red-500:#ef4444;--color-blog-amber-400:#f6ad55;--color-blog-neutral-100:#f5f5f5;--color-blog-neutral-120:#f6f6f6;--color-blog-orange-500:#f97316;--color-blog-neutral-50:#fdfdfd;--space-2xs:0.25rem;--space-xs:0.5rem;--space-sm:0.75rem;--space-md:1rem;--space-lg:1.5rem;--space-xl:2rem;--space-2xl:3rem;--radius-sm:0.25rem;--radius-md:0.5rem;--radius-lg:0.75rem;--radius-xl:1rem;--radius-full:9999px;--shadow-sm:0 0.0625rem 0.125rem 0 rgb(0 0 0/5%);--shadow-md:0 0.25rem 0.375rem -0.0625rem rgba(0,0,0,.1);--shadow-lg:0 0.625rem 0.9375rem -0.1875rem rgba(0,0,0,.1);--shadow-modal:0 2.75rem 6rem -1.25rem rgba(8,11,30,.75);--font-family-sans:"Inter","Segoe UI",system-ui,-appLine truncated
|
||||
|
||||
/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:var(--font-family-sans);font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:var(--font-family-mono);font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.\!container{width:100%!important}.container{width:100%}@media (min-width:640px){.\!container{max-width:640px!important}.container{max-width:640px}}@media (min-width:768px){.\!container{max-width:768px!important}.container{max-width:768px}}@media (min-width:1024px){.\!container{max-width:1024px!important}.container{max-width:1024px}}@media (min-width:1280px){.\!container{max-width:1280px!important}.container{max-width:1280px}}@media (min-width:1536px){.\!container{max-width:1536px!important}.container{max-width:1536px}}.focus-ring{outline:2px solid transparent;outline-offset:2px}.focus-ring:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-color:var(--color-info);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--color-surface);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1)}.popover{position:relative;display:inline-flex}.popover__panel{outline:2px solid transparent;outline-offset:2px}.popover__panel:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-color:var(--color-info);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--color-surface);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1)}.popover__panel{pointer-events:none;position:absolute;left:0;top:100%;z-index:70;margin-top:.5rem;min-width:12rem;transform-origin:top;--tw-scale-x:.95;--tw-scale-y:.95;border-radius:var(--radius-lg);border-width:1px;border-color:var(--color-border);--tw-border-opacity:0.4;background-color:var(--color-panel);padding:.75rem 1rem;font-size:var(--font-size-sm);line-height:var(--line-height-snug);color:var(--color-text);opacity:0;--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)Line truncated
|
||||
/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:var(--font-family-sans);font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:var(--font-family-mono);font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.\!container{width:100%!important}.container{width:100%}@media (min-width:640px){.\!container{max-width:640px!important}.container{max-width:640px}}@media (min-width:768px){.\!container{max-width:768px!important}.container{max-width:768px}}@media (min-width:1024px){.\!container{max-width:1024px!important}.container{max-width:1024px}}@media (min-width:1280px){.\!container{max-width:1280px!important}.container{max-width:1280px}}@media (min-width:1536px){.\!container{max-width:1536px!important}.container{max-width:1536px}}.focus-ring{outline:2px solid transparent;outline-offset:2px}.focus-ring:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-color:var(--color-info);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--color-surface);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1)}.popover{position:relative;display:inline-flex}.popover__panel{outline:2px solid transparent;outline-offset:2px}.popover__panel:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-color:var(--color-info);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--color-surface);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1)}.popover__panel{pointer-events:none;position:absolute;left:0;top:100%;z-index:70;margin-top:.5rem;min-width:12rem;transform-origin:top;--tw-scale-x:.95;--tw-scale-y:.95;border-radius:var(--radius-lg);border-width:1px;border-color:var(--color-border);--tw-border-opacity:0.4;background-color:var(--color-panel);padding:.75rem 1rem;font-size:var(--font-size-sm);line-height:var(--line-height-snug);color:var(--color-text);opacity:0;--tw-shadow:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)Line truncated
|
||||
+63
-26
@@ -22,11 +22,11 @@
|
||||
}
|
||||
|
||||
.btn {
|
||||
@apply focus-ring inline-flex items-center justify-center gap-2 rounded-lg border border-transparent bg-primary px-4 py-2 text-sm font-semibold uppercase tracking-wide text-white shadow-md transition duration-base ease-in-out;
|
||||
@apply focus-ring inline-flex items-center justify-center gap-2 rounded-full border border-transparent bg-info-strong px-5 py-2.5 text-base font-semibold text-white shadow-lg transition duration-base ease-in-out;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
@apply bg-info-strong shadow-lg;
|
||||
@apply bg-info;
|
||||
}
|
||||
|
||||
.btn:focus-visible {
|
||||
@@ -276,50 +276,47 @@
|
||||
}
|
||||
|
||||
.bv-modal {
|
||||
@apply fixed inset-0 z-[var(--z-modal-root)] flex items-center justify-center p-4 sm:p-6;
|
||||
@apply fixed inset-0 z-[var(--z-modal-root)] flex items-center justify-center p-6 sm:p-8;
|
||||
}
|
||||
|
||||
.bv-modal__panel {
|
||||
@apply focus-ring relative z-[var(--z-modal-content)] w-full max-w-3xl rounded-xl border border-border border-opacity-40 bg-surface px-6 py-8 text-left text-text shadow-modal transition duration-base ease-out;
|
||||
@apply focus-ring relative z-[var(--z-modal-content)] w-full max-w-[38rem] rounded-[1.75rem] border border-border-translucent px-8 pb-8 pt-7 text-left text-text shadow-modal transition duration-base ease-out;
|
||||
background-color: var(--color-modal-surface, var(--color-overlay-panel));
|
||||
}
|
||||
|
||||
.bv-modal__panel:focus-visible {
|
||||
@apply border-info border-opacity-50;
|
||||
@apply border-border-translucent-bright;
|
||||
}
|
||||
|
||||
.bv-modal-backdrop {
|
||||
@apply absolute inset-0 z-[var(--z-modal-overlay)] bg-overlay bg-opacity-80 backdrop-blur;
|
||||
@apply absolute inset-0 z-[var(--z-modal-overlay)] backdrop-saturate-150;
|
||||
background-color: var(--color-modal-backdrop, var(--color-overlay-muted));
|
||||
backdrop-filter: blur(28px);
|
||||
-webkit-backdrop-filter: blur(28px);
|
||||
}
|
||||
|
||||
.bv-modal-backdrop[data-variant="veil"] {
|
||||
@apply bg-overlay-veil bg-opacity-100;
|
||||
@apply backdrop-blur-3xl;
|
||||
background-color: var(--color-overlay-veil);
|
||||
}
|
||||
|
||||
.bv-modal-backdrop[data-variant="muted"] {
|
||||
@apply bg-overlay-muted;
|
||||
background-color: var(--color-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;
|
||||
@apply bv-modal__panel relative my-0 w-full max-w-[90%] overflow-hidden lg:max-w-4xl;
|
||||
}
|
||||
|
||||
.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));
|
||||
@apply flex items-start justify-between gap-md px-8 pb-4 pt-7;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.modal-header[data-variant="flush"] {
|
||||
@apply border-transparent;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
var(--color-overlay-panel-tint),
|
||||
transparent
|
||||
);
|
||||
@apply px-0 pb-0 pt-0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.modal-header__title {
|
||||
@@ -327,19 +324,59 @@
|
||||
}
|
||||
|
||||
.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;
|
||||
@apply focus-ring flex h-10 w-10 items-center justify-center rounded-full bg-overlay-black bg-opacity-40 text-muted transition duration-base ease-out;
|
||||
}
|
||||
|
||||
.modal-close:hover {
|
||||
@apply bg-overlay-black bg-opacity-70 text-text;
|
||||
@apply bg-overlay-black bg-opacity-60 text-text;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
@apply space-y-4 p-6;
|
||||
@apply space-y-5 px-8 pb-8 pt-2;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
.modal-body::-webkit-scrollbar {
|
||||
width: 0.4rem;
|
||||
}
|
||||
|
||||
.modal-body::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.modal-body::-webkit-scrollbar-thumb {
|
||||
background: var(--color-border-translucent);
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
@apply border-t border border-border border-opacity-60 bg-surface px-6 py-4;
|
||||
@apply flex flex-col gap-3 px-8 pb-8 pt-4;
|
||||
}
|
||||
|
||||
.modal-alert {
|
||||
@apply flex items-start gap-3 rounded-md border border-warning-strong border-opacity-60 px-4 py-3 text-sm text-warning-strong;
|
||||
backdrop-filter: blur(14px);
|
||||
background-color: var(--color-warning-glass);
|
||||
}
|
||||
|
||||
.modal-alert__icon {
|
||||
@apply mt-0.5 h-5 w-5 flex-shrink-0 text-warning-strong;
|
||||
}
|
||||
|
||||
.modal-tile {
|
||||
@apply rounded-xl border border-border-translucent bg-overlay-panel-soft px-5 py-4 text-sm text-text-frosted;
|
||||
background-color: var(--color-overlay-panel-glass-soft);
|
||||
}
|
||||
|
||||
.modal-tile > h3 {
|
||||
@apply text-base font-semibold text-text;
|
||||
}
|
||||
|
||||
.modal-primary {
|
||||
@apply btn w-full justify-center;
|
||||
}
|
||||
|
||||
.grid-stack {
|
||||
|
||||
+10
-4
@@ -30,6 +30,7 @@
|
||||
--color-warning: rgb(250 204 21);
|
||||
--color-warning-strong: rgb(217 119 6);
|
||||
--color-warning-surface: rgb(146 64 14 / 0.24);
|
||||
--color-warning-glass: rgb(250 204 21 / 0.18);
|
||||
--color-neutral-700: rgb(63 63 70);
|
||||
--color-neutral-600: rgb(82 82 91);
|
||||
--color-white: rgb(255 255 255);
|
||||
@@ -39,10 +40,13 @@
|
||||
--color-overlay-muted: rgb(15 23 42 / 0.55);
|
||||
--color-overlay-strong: rgb(15 23 42 / 0.75);
|
||||
--color-overlay-darker: rgb(15 23 42 / 0.88);
|
||||
--color-overlay-panel: rgb(31 41 55 / 0.9);
|
||||
--color-overlay-panel-soft: rgb(31 41 55 / 0.75);
|
||||
--color-overlay-panel: rgb(26 34 52 / 0.82);
|
||||
--color-overlay-panel-soft: rgb(26 34 52 / 0.65);
|
||||
--color-overlay-panel-tint: rgb(31 41 55 / 0.5);
|
||||
--color-overlay-panel-glass: rgb(30 41 59 / 0.85);
|
||||
--color-overlay-panel-glass: rgb(28 37 58 / 0.72);
|
||||
--color-overlay-panel-glass-soft: rgb(31 41 55 / 0.55);
|
||||
--color-modal-backdrop: rgb(8 12 24 / 0.58);
|
||||
--color-modal-surface: rgb(20 28 46 / 0.78);
|
||||
--color-overlay-veil: rgb(11 17 32 / 0.96);
|
||||
--color-overlay-banner: rgb(51 65 85 / 0.95);
|
||||
--color-overlay-panel-gradient-start: rgb(30 41 59 / 0.92);
|
||||
@@ -146,7 +150,7 @@
|
||||
--shadow-sm: 0 0.0625rem 0.125rem 0 rgb(0 0 0 / 5%);
|
||||
--shadow-md: 0 0.25rem 0.375rem -0.0625rem rgb(0 0 0 / 10%);
|
||||
--shadow-lg: 0 0.625rem 0.9375rem -0.1875rem rgb(0 0 0 / 10%);
|
||||
--shadow-modal: 0 1.25rem 2.5rem -0.375rem rgb(15 23 42 / 55%);
|
||||
--shadow-modal: 0 2.75rem 6rem -1.25rem rgb(8 11 30 / 75%);
|
||||
|
||||
/* Typography */
|
||||
--font-family-sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
|
||||
@@ -196,6 +200,8 @@
|
||||
--color-overlay-panel: rgb(15 23 42 / 0.78);
|
||||
--color-overlay-panel-soft: rgb(15 23 42 / 0.6);
|
||||
--color-overlay-panel-tint: rgb(148 163 184 / 0.2);
|
||||
--color-modal-backdrop: rgb(15 23 42 / 0.45);
|
||||
--color-modal-surface: rgb(248 250 252 / 0.92);
|
||||
--color-overlay-panel-glass: rgb(255 255 255 / 0.82);
|
||||
--color-overlay-veil: rgb(148 163 184 / 0.5);
|
||||
--color-overlay-panel-gradient-start: rgb(255 255 255 / 0.92);
|
||||
|
||||
+15
-9
@@ -332,16 +332,22 @@
|
||||
<div class="absolute inset-0" style="position: relative">
|
||||
<div class="bv-modal" style="position: absolute; inset: 0">
|
||||
<div class="bv-modal-backdrop"></div>
|
||||
<div class="bv-modal__panel space-y-sm">
|
||||
<h3 class="text-lg font-semibold">Upload Video</h3>
|
||||
<p class="text-muted">
|
||||
Use `.input` and `.btn` primitives inside panels for
|
||||
consistency.
|
||||
</p>
|
||||
<div class="bv-modal__panel space-y-6">
|
||||
<header class="space-y-2">
|
||||
<h3 class="text-2xl font-semibold tracking-tight text-text">
|
||||
Upload Video
|
||||
</h3>
|
||||
<p class="text-sm text-text">
|
||||
Use `.input`, `.btn-ghost`, and `.modal-primary`
|
||||
primitives for consistent modal actions.
|
||||
</p>
|
||||
</header>
|
||||
<input class="input" type="text" placeholder="Magnet URI" />
|
||||
<div class="flex justify-end gap-sm">
|
||||
<button class="btn-ghost">Cancel</button>
|
||||
<button class="btn">Publish</button>
|
||||
<div class="flex flex-col gap-3 pt-2 sm:flex-row sm:justify-end">
|
||||
<button class="btn-ghost w-full sm:w-auto">Cancel</button>
|
||||
<button class="modal-primary sm:w-auto">
|
||||
Publish
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in new issue
Block a user