Seregon/zftpd

Zero-copy FTP/HTTP Daemon compatible with all POSIX systems

C/11.0 KB/No license
web/css/variables.css
zftpd / web / css / variables.css
1/* ══ THEMES ═══════════════════════════════════════════════════════════════
2 * CSS custom properties for all color themes.
3 * Each theme defines a complete palette: backgrounds, surfaces, borders,
4 * accent colors, text colors, and semantic states (ok/warn/error).
5 * ═══════════════════════════════════════════════════════════════════════ */
6 
7:root,
8[data-theme="ps5"] {
9 --bg: #080b10;
10 --sf: #101520;
11 --sf2: #171d28;
12 --sf3: #1e2535;
13 --bd: #1e2d40;
14 --bd2: #273550;
15 --ac: #2b8cff;
16 --ac2: #00c2ff;
17 --acR: 43, 140, 255;
18 --tx: #dce8f8;
19 --tx2: #7a94b8;
20 --tx3: #445a78;
21 --ok: #2ecc71;
22 --wn: #f0a500;
23 --er: #ff5f57;
24 --tg: rgba(43, 140, 255, .12);
25 --tgb: rgba(43, 140, 255, .3);
26 --tl: #2b8cff;
27 --gw: rgba(43, 140, 255, .08);
28 --glass: rgba(16, 21, 32, .75);
29 --glass-border: rgba(43, 140, 255, .15);
30 --shadow: rgba(0, 0, 0, .5);
31 --radius-sm: 8px;
32 --radius-md: 14px;
33 --radius-lg: 20px;
34 --radius-pill: 999px;
35 --transition-fast: .12s ease;
36 --transition-med: .2s ease;
37 --transition-slow: .35s cubic-bezier(.22, 1, .36, 1);
38 /* ── Premium visual tokens ── */
39 --glow-sm: 0 0 8px rgba(var(--acR), .2);
40 --glow-md: 0 0 20px rgba(var(--acR), .25);
41 --glow-lg: 0 0 40px rgba(var(--acR), .3);
42 --card-shadow: 0 2px 8px rgba(0, 0, 0, .3);
43 --card-hover-shadow: 0 12px 40px rgba(0, 0, 0, .5), 0 0 0 1px rgba(var(--acR), .25);
44 --card-hover-lift: translateY(-3px);
45 --topbar-bg: linear-gradient(180deg, var(--sf) 0%, rgba(16,21,32,.95) 100%);
46 --glass-blur: 12px;
47}
48 
49[data-theme="matrix"] {
50 --bg: #030804;
51 --sf: #07100a;
52 --sf2: #0b160d;
53 --sf3: #101c12;
54 --bd: #132a16;
55 --bd2: #1c4022;
56 --ac: #00e639;
57 --ac2: #a8ff3e;
58 --acR: 0, 230, 57;
59 --tx: #c8f5cc;
60 --tx2: #56a060;
61 --tx3: #2e6035;
62 --ok: #00e639;
63 --wn: #d4ff00;
64 --er: #ff3333;
65 --tg: rgba(0, 230, 57, .1);
66 --tgb: rgba(0, 230, 57, .3);
67 --tl: #00e639;
68 --gw: rgba(0, 230, 57, .05);
69 --glass: rgba(7, 16, 10, .75);
70 --glass-border: rgba(0, 230, 57, .15);
71 --shadow: rgba(0, 0, 0, .5);
72}
73 
74[data-theme="sunset"] {
75 --bg: #0c080f;
76 --sf: #16101e;
77 --sf2: #1e1528;
78 --sf3: #261b32;
79 --bd: #2e1f40;
80 --bd2: #44285c;
81 --ac: #ff6535;
82 --ac2: #ff2d78;
83 --acR: 255, 101, 53;
84 --tx: #f2e4ff;
85 --tx2: #a87ac4;
86 --tx3: #6e4a8c;
87 --ok: #80ff44;
88 --wn: #ffcc00;
89 --er: #ff2d78;
90 --tg: rgba(255, 101, 53, .12);
91 --tgb: rgba(255, 101, 53, .3);
92 --tl: #ff6535;
93 --gw: rgba(255, 101, 53, .07);
94 --glass: rgba(22, 16, 30, .75);
95 --glass-border: rgba(255, 101, 53, .15);
96 --shadow: rgba(0, 0, 0, .5);
97}
98 
99[data-theme="arctic"] {
100 --bg: #060a0d;
101 --sf: #0b1218;
102 --sf2: #101a22;
103 --sf3: #16222e;
104 --bd: #162232;
105 --bd2: #1e3048;
106 --ac: #00d4ff;
107 --ac2: #00ffcc;
108 --acR: 0, 212, 255;
109 --tx: #d4eef8;
110 --tx2: #5aaccc;
111 --tx3: #2e7090;
112 --ok: #00ffcc;
113 --wn: #ffee00;
114 --er: #ff4466;
115 --tg: rgba(0, 212, 255, .1);
116 --tgb: rgba(0, 212, 255, .28);
117 --tl: #00d4ff;
118 --gw: rgba(0, 212, 255, .06);
119 --glass: rgba(11, 18, 24, .75);
120 --glass-border: rgba(0, 212, 255, .15);
121 --shadow: rgba(0, 0, 0, .5);
122}
123 
124[data-theme="neon"] {
125 --bg: #07040e;
126 --sf: #0e0a1c;
127 --sf2: #150f26;
128 --sf3: #1c1432;
129 --bd: #241a40;
130 --bd2: #352560;
131 --ac: #c800ff;
132 --ac2: #ff00cc;
133 --acR: 200, 0, 255;
134 --tx: #eddeff;
135 --tx2: #9a70cc;
136 --tx3: #5e3d8a;
137 --ok: #44ff88;
138 --wn: #ffaa00;
139 --er: #ff3344;
140 --tg: rgba(200, 0, 255, .1);
141 --tgb: rgba(200, 0, 255, .28);
142 --tl: #c800ff;
143 --gw: rgba(200, 0, 255, .06);
144 --glass: rgba(14, 10, 28, .75);
145 --glass-border: rgba(200, 0, 255, .15);
146 --shadow: rgba(0, 0, 0, .5);
147}
148 
149[data-theme="amber"] {
150 --bg: #090700;
151 --sf: #120e00;
152 --sf2: #1a1400;
153 --sf3: #221b00;
154 --bd: #2e2200;
155 --bd2: #453300;
156 --ac: #ffb700;
157 --ac2: #ff8c00;
158 --acR: 255, 183, 0;
159 --tx: #fff4cc;
160 --tx2: #c49a00;
161 --tx3: #7a5e00;
162 --ok: #88ff44;
163 --wn: #ff8c00;
164 --er: #ff4422;
165 --tg: rgba(255, 183, 0, .12);
166 --tgb: rgba(255, 183, 0, .3);
167 --tl: #ffb700;
168 --gw: rgba(255, 183, 0, .07);
169 --glass: rgba(18, 14, 0, .75);
170 --glass-border: rgba(255, 183, 0, .15);
171 --shadow: rgba(0, 0, 0, .5);
172}
173 
174/* ── Cloud — clean white / light theme ─────────────────────────────────── */
175[data-theme="cloud"] {
176 --bg: #f0f2f5;
177 --sf: #ffffff;
178 --sf2: #f5f7fa;
179 --sf3: #ebeef3;
180 --bd: #dce1e8;
181 --bd2: #c5cdd8;
182 --ac: #3b82f6;
183 --ac2: #2563eb;
184 --acR: 59, 130, 246;
185 --tx: #1a1d23;
186 --tx2: #5b6577;
187 --tx3: #8b95a8;
188 --ok: #16a34a;
189 --wn: #d97706;
190 --er: #dc2626;
191 --tg: rgba(59, 130, 246, .08);
192 --tgb: rgba(59, 130, 246, .2);
193 --tl: #3b82f6;
194 --gw: rgba(59, 130, 246, .06);
195 --glass: rgba(255, 255, 255, .85);
196 --glass-border: rgba(255, 255, 255, .4);
197 --shadow: rgba(0, 0, 0, .08);
198}
199