feat(upload): add dynamic expiry options and modern UI theme
- Implement dynamic expiry options on the upload page based on user roles and retention policies. - Add helper functions to build and format expiry options into human-readable labels. - Introduce a new modern theme featuring glassmorphism, gradients, and frosted glass cards.
This commit is contained in:
@@ -1,4 +1,41 @@
|
||||
/*
|
||||
* Theme tokens.
|
||||
* :root holds the default "revamp" (Aurora glass) theme so the page looks right
|
||||
* even before JS runs or when JS is disabled. [data-theme="classic"] restores the
|
||||
* original dark-zinc look exactly. The theme attribute is set on <html> by
|
||||
* /static/js/05-theme.js from localStorage before first paint.
|
||||
*/
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
--background: #0b0b16;
|
||||
--foreground: #f5f3ff;
|
||||
--card: #15132b;
|
||||
--card-foreground: #f5f3ff;
|
||||
--muted: #1e1b3a;
|
||||
--muted-foreground: #a8a4cf;
|
||||
--accent: #2a2550;
|
||||
--accent-foreground: #f5f3ff;
|
||||
--border: rgba(168, 150, 255, 0.16);
|
||||
--input: rgba(168, 150, 255, 0.22);
|
||||
--primary: #8b5cf6;
|
||||
--primary-foreground: #ffffff;
|
||||
--primary-hover: #7c3aed;
|
||||
--ring: #a78bfa;
|
||||
--success: #5eead4;
|
||||
--danger: #fb7185;
|
||||
--radius: 0.875rem;
|
||||
--shadow: 0 24px 70px rgba(8, 4, 32, 0.6);
|
||||
--font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
--header-bg: rgba(11, 11, 22, 0.68);
|
||||
--body-bg:
|
||||
radial-gradient(circle at 50% -10%, rgba(139, 92, 246, 0.18), transparent 34rem),
|
||||
linear-gradient(180deg, #0b0b16 0%, #0a0918 100%);
|
||||
--surface-1: rgba(139, 92, 246, 0.07);
|
||||
--surface-1-hover: rgba(139, 92, 246, 0.14);
|
||||
--surface-2: rgba(139, 92, 246, 0.05);
|
||||
}
|
||||
|
||||
:root[data-theme="classic"] {
|
||||
color-scheme: dark;
|
||||
--background: #09090b;
|
||||
--foreground: #fafafa;
|
||||
@@ -12,10 +49,20 @@
|
||||
--input: rgba(255, 255, 255, 0.15);
|
||||
--primary: #f4f4f5;
|
||||
--primary-foreground: #18181b;
|
||||
--primary-hover: #e4e4e7;
|
||||
--ring: #71717a;
|
||||
--success: #86efac;
|
||||
--danger: #fca5a5;
|
||||
--radius: 0.625rem;
|
||||
--shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
|
||||
--font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
--header-bg: rgba(9, 9, 11, 0.84);
|
||||
--body-bg:
|
||||
radial-gradient(circle at 50% -10%, rgba(82, 82, 91, 0.32), transparent 34rem),
|
||||
linear-gradient(180deg, #09090b 0%, #0f0f12 100%);
|
||||
--surface-1: rgba(39, 39, 42, 0.42);
|
||||
--surface-1-hover: rgba(39, 39, 42, 0.68);
|
||||
--surface-2: rgba(39, 39, 42, 0.28);
|
||||
}
|
||||
|
||||
* {
|
||||
@@ -23,19 +70,18 @@
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
font-family: var(--font-sans);
|
||||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
body {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background:
|
||||
radial-gradient(circle at 50% -10%, rgba(82, 82, 91, 0.32), transparent 34rem),
|
||||
linear-gradient(180deg, #09090b 0%, #0f0f12 100%);
|
||||
background: var(--body-bg);
|
||||
}
|
||||
|
||||
a {
|
||||
@@ -77,7 +123,7 @@ svg {
|
||||
top: 0;
|
||||
z-index: 20;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: rgba(9, 9, 11, 0.84);
|
||||
background: var(--header-bg);
|
||||
backdrop-filter: blur(14px);
|
||||
}
|
||||
|
||||
@@ -147,7 +193,7 @@ h1 {
|
||||
.hero-copy p,
|
||||
.download-subtitle,
|
||||
.panel-header p {
|
||||
margin: 0.55rem 0 0;
|
||||
margin: 0 0 1rem 0;
|
||||
color: var(--muted-foreground);
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.5;
|
||||
@@ -307,7 +353,7 @@ button {
|
||||
}
|
||||
|
||||
.button-primary:hover {
|
||||
background: #e4e4e7;
|
||||
background: var(--primary-hover);
|
||||
}
|
||||
|
||||
.button-outline {
|
||||
@@ -385,12 +431,35 @@ pre code {
|
||||
margin: 0 auto;
|
||||
padding: 1rem 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
color: var(--muted-foreground);
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.theme-picker {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
}
|
||||
|
||||
.theme-picker > span {
|
||||
display: block;
|
||||
margin: 0;
|
||||
color: var(--muted-foreground);
|
||||
font-size: 0.78rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.theme-picker select {
|
||||
width: auto;
|
||||
min-height: 1.9rem;
|
||||
padding: 0.2rem 0.55rem;
|
||||
border-radius: calc(var(--radius) - 0.25rem);
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.footer-links a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user