Rewild Your Web
me.webbeef.org
web
browser
dweb
1/* SPDX-License-Identifier: AGPL-3.0-or-later */
2
3:root {
4 --sidebar-width: 2em;
5 --keyboard-height: 220px;
6
7 /* Z-index layers */
8 --z-base: 1;
9 --z-base-active: 10;
10 --z-local-ui: 100;
11 --z-panel: 500;
12 --z-dialog: 1000;
13 --z-gesture: 5000;
14 --z-chrome: 6000;
15 --z-sheet: 7000;
16 --z-modal: 8000;
17
18 /* Keyboard offset - set to keyboard height when keyboard is open */
19 --keyboard-offset: 0px;
20}
21
22body.keyboard-open {
23 --keyboard-offset: var(--keyboard-height);
24}
25
26* {
27 box-sizing: border-box;
28}
29
30html {
31 padding: 0;
32 margin: 0;
33 height: 100%;
34 width: 100%;
35 font-family: var(--font-family-base);
36}
37
38body {
39 padding: 0;
40 margin: 0;
41 height: 100%;
42 width: 100%;
43 overflow: hidden;
44 display: flex;
45 flex-direction: column;
46 color: var(--color-text-menu);
47}
48
49#header {
50 height: var(--size-header-height);
51 padding: var(--spacing-xs) var(--spacing-sm);
52 width: fit-content;
53 background: var(--bg-header);
54 font-weight: var(--font-weight-bold);
55 border-radius: var(--radius-sm) var(--radius-sm) 0 0;
56 cursor: default;
57 display: flex;
58 align-items: center;
59 gap: var(--spacing-xs);
60 /* switch back (permanently?) to a regular OS provided window frame */
61 display: none;
62}
63
64#header img {
65 width: var(--size-icon);
66}
67
68#header .close {
69 cursor: pointer;
70}
71
72#header .resize {
73 cursor: nw-resize;
74}
75
76main {
77 display: flex;
78 background: var(--bg-main);
79 height: 100%;
80}
81
82#sidebar {
83 display: flex;
84 flex-direction: column;
85 padding: var(--spacing-xs);
86 gap: var(--spacing-xs);
87 width: var(--sidebar-width);
88}
89
90#views-icons {
91 flex: 1;
92 display: flex;
93 flex-direction: column;
94 gap: var(--spacing-xs);
95 overflow-y: auto;
96 overflow-x: hidden;
97}
98
99.view-icon {
100 width: 1.5em;
101 height: 1.5em;
102 border-radius: var(--radius-sm);
103 cursor: pointer;
104 display: flex;
105 align-items: center;
106 justify-content: center;
107 background: var(--bg-webview);
108 border: 2px solid transparent;
109 transition: border-color var(--transition-fast), opacity var(--transition-fast);
110 opacity: var(--opacity-muted);
111}
112
113.view-icon:hover {
114 opacity: 1;
115}
116
117.view-icon.active {
118 border-color: var(--color-focus-ring);
119 opacity: 1;
120}
121
122.view-icon-img {
123 width: 1em;
124 height: 1em;
125 object-fit: contain;
126}
127
128.view-icon-img[src=""] {
129 display: none;
130}
131
132.sidebar-preview {
133 position: fixed;
134 z-index: var(--z-dialog);
135 background: var(--bg-menu);
136 border-radius: var(--radius-md);
137 box-shadow: 0 4px 16px var(--color-shadow-menu);
138 padding: var(--spacing-sm);
139 width: 200px;
140 opacity: 0;
141 visibility: hidden;
142 transform: translateX(-8px);
143 transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
144 pointer-events: none;
145}
146
147.sidebar-preview.visible {
148 opacity: 1;
149 visibility: visible;
150 transform: translateX(0);
151}
152
153.sidebar-preview-title {
154 font-size: var(--font-size-sm);
155 font-weight: var(--font-weight-bold);
156 margin-bottom: var(--spacing-xs);
157 white-space: nowrap;
158 overflow: hidden;
159 text-overflow: ellipsis;
160}
161
162.sidebar-preview-screenshot {
163 width: 100%;
164 height: auto;
165 border-radius: var(--radius-sm);
166 display: block;
167}
168
169lucide-icon {
170 font-size: var(--size-icon-sm);
171 cursor: pointer;
172 font-weight: var(--font-weight-bold);
173}
174
175#root {
176 flex: 1;
177 display: flex;
178 overflow-x: auto;
179 overflow-y: hidden;
180 scroll-behavior: smooth;
181 scroll-snap-type: x mandatory;
182 position: relative; /* For overview overlay positioning */
183}
184
185#footer {
186 display: none; /* Hidden by default, shown when keyboard is active */
187 height: var(--keyboard-height);
188 padding: 0;
189 background: var(--bg-footer);
190}
191
192#footer.visible {
193 display: block;
194}
195
196#keyboard-frame {
197 width: 100%;
198 height: 100%;
199 border: none;
200}
201
202/* Each panel is a full-viewport-width container that holds a split tree */
203.panel {
204 position: relative; /* For absolutely positioned resize handles */
205 display: grid;
206 gap: var(--spacing-sm);
207 width: calc(100vw - var(--sidebar-width));
208 height: 100%;
209 scroll-snap-align: start;
210 padding: var(--spacing-sm);
211 /* Grid template is set dynamically by LayoutManager */
212}
213
214/* Disable pointer events on webviews during resize */
215body.resizing web-view {
216 pointer-events: none;
217}
218
219/* Resize handles between split views */
220.resize-handle {
221 z-index: var(--z-local-ui);
222 background: transparent;
223 transition: background var(--transition-fast);
224}
225
226.resize-handle:hover {
227 background: var(--color-resize-handle-hover);
228}
229
230.resize-handle-horizontal {
231 cursor: col-resize;
232}
233
234.resize-handle-vertical {
235 cursor: row-resize;
236}
237
238#notifications-icon-container {
239 position: relative;
240 display: flex;
241 align-items: center;
242 justify-content: center;
243 cursor: pointer;
244 padding: var(--spacing-xs) 0;
245}
246
247#notifications-icon {
248 opacity: var(--opacity-muted);
249 transition: opacity var(--transition-fast);
250}
251
252#notifications-icon-container:hover #notifications-icon {
253 opacity: 1;
254}
255
256#notifications-badge {
257 position: absolute;
258 top: 0;
259 right: -0.1em;
260 min-width: 1em;
261 height: 1em;
262 border-radius: 0.5em;
263 background: var(--color-danger);
264 color: var(--color-text-on-header);
265 font-size: var(--font-size-xs);
266 font-weight: var(--font-weight-bold);
267 display: flex;
268 align-items: center;
269 justify-content: center;
270 padding: 0 var(--spacing-xs);
271}
272
273#notifications-badge.hidden {
274 display: none;
275}