Rewild Your Web
me.webbeef.org
web
browser
dweb
1/* SPDX-License-Identifier: AGPL-3.0-or-later */
2
3* {
4 margin: 0;
5 padding: 0;
6 box-sizing: border-box;
7}
8
9html,
10body {
11 width: 100%;
12 height: 100%;
13 font-family: var(--font-family-base);
14 background: var(--bg-main);
15 color: var(--color-text-menu);
16}
17
18/* TODO: extract this styling to some shared stylsheet */
19input {
20 padding: var(--spacing-sm) var(--spacing-md);
21 font-size: 1em;
22 border: 2px solid var(--color-border);
23 border-radius: var(--radius-md);
24 background: var(--bg-webview);
25 color: inherit;
26 outline: none;
27 transition: border-color var(--transition-fast);
28}
29
30input:focus {
31 border-color: var(--color-focus-ring);
32}
33
34input::placeholder {
35 color: var(--color-text-tertiary);
36}
37
38select {
39 padding: var(--spacing-sm) var(--spacing-sm);
40}
41
42/* End of shareable styling */
43
44input {
45 width: 100%;
46}
47
48/* Number input - fixed width for numeric values */
49input.number-input {
50 width: 100px;
51 text-align: right;
52}
53
54/* Main layout with sidebar */
55body {
56 display: flex;
57}
58
59label {
60 display: block;
61}
62
63/* Left sidebar */
64.settings-sidebar {
65 width: 200px;
66 background: var(--bg-header);
67 display: flex;
68 flex-direction: column;
69 border-right: 1px solid var(--color-border);
70}
71
72.settings-sidebar h1 {
73 font-size: 1.2em;
74 font-weight: var(--font-weight-bold);
75 padding: var(--spacing-md);
76 border-bottom: 1px solid var(--color-border);
77}
78
79.settings-nav {
80 flex: 1;
81 display: flex;
82 flex-direction: column;
83 padding: var(--spacing-sm);
84 gap: var(--spacing-xs);
85}
86
87.nav-item {
88 display: flex;
89 align-items: center;
90 gap: var(--spacing-sm);
91 padding: var(--spacing-sm) var(--spacing-md);
92 border-radius: var(--radius-sm);
93 color: inherit;
94 text-decoration: none;
95 cursor: pointer;
96 transition: background var(--transition-fast);
97}
98
99.nav-item:hover {
100 background: var(--color-menu-item-hover);
101}
102
103.nav-item.active {
104 background: var(--bg-menu);
105 font-weight: var(--font-weight-bold);
106}
107
108.nav-item lucide-icon {
109 font-size: 1.1em;
110}
111
112/* Right content area */
113.settings-content {
114 flex: 1;
115 overflow-y: auto;
116 padding: var(--spacing-md);
117}
118
119.settings-category {
120 margin-bottom: var(--spacing-md);
121}
122
123/* Details/Summary styling */
124details {
125 background: var(--bg-menu);
126 border-radius: var(--radius-md);
127 box-shadow: 0 2px 8px var(--color-shadow);
128}
129
130summary {
131 display: flex;
132 align-items: center;
133 gap: var(--spacing-sm);
134 padding: var(--spacing-md);
135 font-size: 1.1em;
136 font-weight: var(--font-weight-bold);
137 cursor: pointer;
138 user-select: none;
139 border-radius: var(--radius-md);
140 transition: background var(--transition-fast);
141}
142
143summary:hover {
144 background: var(--color-menu-item-hover);
145}
146
147summary::before {
148 content: "▶";
149 font-size: 0.7em;
150 transition: transform var(--transition-fast);
151}
152
153details[open] summary::before {
154 transform: rotate(90deg);
155}
156
157summary lucide-icon {
158 font-size: 1.2em;
159}
160
161.category-content {
162 padding: var(--spacing-md);
163 padding-top: 0;
164}
165
166.category-description {
167 opacity: var(--opacity-muted);
168 margin-bottom: var(--spacing-md);
169 font-size: var(--font-size-menu);
170}
171
172/* Theme grid */
173.theme-grid {
174 display: grid;
175 grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
176 gap: var(--spacing-md);
177}
178
179.theme-card {
180 border-radius: var(--radius-sm);
181 overflow: hidden;
182 cursor: pointer;
183 transition:
184 transform var(--transition-fast),
185 box-shadow var(--transition-fast);
186 border: 3px solid transparent;
187 background: var(--bg-webview);
188}
189
190.theme-card:hover {
191 transform: translateY(-2px);
192 box-shadow: 0 4px 12px var(--color-shadow);
193}
194
195.theme-card.selected {
196 border-color: var(--color-focus-ring);
197 box-shadow: 0 0 0 2px var(--color-focus-ring);
198}
199
200.theme-preview {
201 height: 80px;
202 display: flex;
203 flex-direction: column;
204 position: relative;
205}
206
207.theme-preview-header {
208 height: 20px;
209 border-radius: var(--radius-sm) var(--radius-sm) 0 0;
210}
211
212.theme-preview-main {
213 flex: 1;
214 display: flex;
215 align-items: center;
216 justify-content: center;
217 padding: var(--spacing-xs);
218}
219
220.theme-preview-webview {
221 width: 80%;
222 height: 100%;
223 border-radius: var(--radius-sm);
224 box-shadow: 0 1px 3px var(--color-shadow);
225}
226
227.theme-info {
228 padding: var(--spacing-sm);
229}
230
231.theme-name {
232 font-weight: var(--font-weight-bold);
233 font-size: var(--font-size-menu);
234}
235
236.theme-description {
237 font-size: var(--font-size-sm);
238 opacity: var(--opacity-muted);
239 margin-top: 2px;
240}
241
242/* Theme-specific preview colors */
243/* TODO: Don't hardcode the previews! */
244.preview-default .theme-preview-header {
245 background: oklch(95% 0.5 110);
246}
247.preview-default .theme-preview-main {
248 background: linear-gradient(
249 to bottom right,
250 oklch(95% 0.5 110),
251 oklch(72% 0.5 90)
252 );
253}
254.preview-default .theme-preview-webview {
255 background: white;
256}
257
258.preview-lcars .theme-preview-header {
259 background: #ff9900;
260}
261.preview-lcars .theme-preview-main {
262 background: #000000;
263}
264.preview-lcars .theme-preview-webview {
265 background: #1a1a2e;
266}
267
268.preview-meadow .theme-preview-header {
269 background: oklch(65% 0.08 55);
270}
271.preview-meadow .theme-preview-main {
272 background: linear-gradient(
273 to bottom,
274 oklch(92% 0.03 220),
275 oklch(88% 0.08 140)
276 );
277}
278.preview-meadow .theme-preview-webview {
279 background: oklch(97% 0.01 90);
280}
281
282.preview-winamp .theme-preview-header {
283 background: #3a3a3a;
284}
285.preview-winamp .theme-preview-main {
286 background: #232323;
287}
288.preview-winamp .theme-preview-webview {
289 background: #000000;
290 border: 1px solid #00ff00;
291}
292
293/* Setting row with toggle */
294.setting-row {
295 display: flex;
296 align-items: center;
297 justify-content: space-between;
298 gap: var(--spacing-md);
299 padding: var(--spacing-sm) 0;
300}
301
302.setting-info {
303 display: flex;
304 flex-direction: column;
305 gap: var(--spacing-xs);
306}
307
308.setting-label {
309 font-weight: var(--font-weight-bold);
310 font-size: var(--font-size-menu);
311}
312
313.setting-description {
314 font-size: var(--font-size-sm);
315 opacity: var(--opacity-muted);
316}
317
318/* Toggle switch */
319.toggle-switch {
320 position: relative;
321 display: inline-block;
322 width: 48px;
323 height: 26px;
324 flex-shrink: 0;
325}
326
327.toggle-switch input {
328 opacity: 0;
329 width: 0;
330 height: 0;
331}
332
333.toggle-slider {
334 position: absolute;
335 cursor: pointer;
336 top: 0;
337 left: 0;
338 right: 0;
339 bottom: 0;
340 background-color: var(--color-border);
341 transition: var(--transition-fast);
342 border-radius: 26px;
343}
344
345.toggle-slider::before {
346 position: absolute;
347 content: "";
348 height: 20px;
349 width: 20px;
350 left: 3px;
351 bottom: 3px;
352 background-color: white;
353 transition: var(--transition-fast);
354 border-radius: 50%;
355}
356
357input:checked + .toggle-slider {
358 background-color: var(--color-focus-ring);
359}
360
361input:checked + .toggle-slider::before {
362 transform: translateX(22px);
363}
364
365input:focus + .toggle-slider {
366 box-shadow: 0 0 0 2px var(--color-shadow);
367}
368
369/* Mobile header - hidden on desktop */
370.mobile-header {
371 display: none;
372}
373
374@media (max-width: 600px) {
375 body {
376 flex-direction: column;
377 }
378
379 /* Sidebar becomes full-width nav list, extending to full height */
380 .settings-sidebar {
381 width: 100%;
382 flex: 1;
383 border-right: none;
384 }
385
386 .settings-sidebar h1 {
387 border-bottom: none;
388 }
389
390 /* Hide content area initially */
391 .settings-content {
392 display: none;
393 }
394
395 /* When a category is active, show content and hide sidebar */
396 body.show-detail .settings-sidebar {
397 display: none;
398 }
399
400 body.show-detail .settings-content {
401 display: flex;
402 flex-direction: column;
403 flex: 1;
404 padding: 0;
405 }
406
407 /* Mobile header visible in detail view */
408 body.show-detail .mobile-header {
409 display: flex;
410 align-items: center;
411 gap: var(--spacing-sm);
412 background: var(--bg-header);
413 border-bottom: 1px solid var(--color-border);
414 }
415
416 .back-button {
417 background: none;
418 border: none;
419 color: inherit;
420 cursor: pointer;
421 padding: var(--spacing-md);
422 display: flex;
423 align-items: center;
424 }
425
426 .mobile-title {
427 font-size: 1.1em;
428 font-weight: var(--font-weight-bold);
429 }
430
431 /* Style nav items as full-width list items */
432 .nav-item {
433 padding: var(--spacing-md);
434 border-bottom: 1px solid var(--color-border);
435 border-radius: 0;
436 }
437
438 /* Add chevron indicator */
439 .nav-item::after {
440 content: "›";
441 margin-left: auto;
442 font-size: 1.2em;
443 opacity: 0.5;
444 }
445
446 /* In detail view, hide all categories except active */
447 body.show-detail .settings-category {
448 display: none;
449 }
450
451 body.show-detail .settings-category.active {
452 display: flex;
453 flex-direction: column;
454 flex: 1;
455 margin: 0;
456 }
457
458 /* Hide details wrapper and summary, show content directly */
459 body.show-detail .settings-category.active details {
460 display: flex;
461 flex-direction: column;
462 flex: 1;
463 border-radius: 0;
464 box-shadow: none;
465 }
466
467 body.show-detail .settings-category.active summary {
468 display: none;
469 }
470
471 /* Style category content as a card container - edge to edge, full height */
472 body.show-detail .settings-category.active .category-content {
473 background: var(--bg-menu);
474 padding: var(--spacing-md);
475 flex: 1;
476 }
477}