Rewild Your Web
me.webbeef.org
web
browser
dweb
1/* SPDX-License-Identifier: AGPL-3.0-or-later */
2
3:root {
4 /* ===== Typography ===== */
5 --font-family-base: ReadexPro;
6 --font-weight-normal: normal;
7 --font-weight-bold: bolder;
8 --font-size-menu: 0.9em;
9 --font-size-sm: 0.85em;
10 --font-size-xs: 0.75em;
11
12 /* ===== Backgrounds ===== */
13 --bg-main: linear-gradient(
14 to bottom right in oklab,
15 oklch(95% 0.5 110) 0%,
16 oklch(72% 0.5 90) 100%
17 );
18 --bg-header: oklch(95% 0.5 110);
19 --bg-footer: oklch(72% 0.5 90);
20 --bg-webview: white;
21 --bg-menu: white;
22 --bg-surface: white;
23 --bg-hover: rgba(0, 0, 0, 0.05);
24 --bg-icon: oklch(92% 0.05 220);
25
26 /* ===== Colors - Text ===== */
27 --color-text-menu: black;
28 --color-text: black;
29 --color-text-secondary: oklch(45% 0 0);
30 --color-text-tertiary: oklch(60% 0 0);
31 /* Contrast text for use on header/primary backgrounds */
32 --color-text-on-header: white;
33
34 /* ===== Colors - Interactive ===== */
35 --color-focus-ring: rgba(0, 120, 255, 0.5);
36 --color-resize-handle-hover: rgba(0, 120, 255, 0.3);
37 --color-primary: oklch(55% 0.2 250);
38 --color-danger: oklch(55% 0.2 25);
39
40 --color-menu-item-hover: rgba(0, 0, 0, 0.1);
41
42 /* ===== Colors - Borders ===== */
43 --color-border: rgba(0, 0, 0, 0.15);
44
45 /* ===== Colors - Shadow ===== */
46 --color-shadow: rgba(0, 0, 0, 0.3);
47 --color-shadow-menu: rgba(0, 0, 0, 0.2);
48 --color-backdrop: rgba(0, 0, 0, 0.5);
49
50 /* ===== Border Radius ===== */
51 --radius-sm: 0.5em;
52 --radius-md: 1em;
53 --radius-lg: 1.5em;
54
55 /* ===== Spacing ===== */
56 --spacing-xs: 0.25em;
57 --spacing-sm: 0.5em;
58 --spacing-md: 1em;
59 --spacing-lg: 1.5em;
60
61 /* ===== Sizes ===== */
62 --size-header-height: 2em;
63 --size-footer-height: 1.5em;
64 --size-icon: 1em;
65 --size-icon-sm: 1.25em;
66 --size-menu-width: 150px;
67 --size-panel-width: 320px;
68 --size-logo: 3em;
69 --size-notification-icon: 2em;
70
71 /* ===== Transitions ===== */
72 --transition-fast: 0.15s ease;
73
74 /* ===== Opacity ===== */
75 --opacity-muted: 0.6;
76}