me.webbeef.org
forked from
me.webbeef.org/browser.html
Rewild Your Web
webbeef.tngl.sh
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/* Media panel (local + remote controls) */
203#media-panel {
204 position: fixed;
205 bottom: 0;
206 left: var(--sidebar-width);
207 width: var(--size-panel-width);
208 z-index: var(--z-panel);
209 background: var(--bg-menu);
210 box-shadow: 4px -4px 16px var(--color-shadow-menu);
211 border-radius: var(--radius-md) var(--radius-md) 0 0;
212 transform: translateY(100%);
213 transition: transform var(--transition-fast), visibility var(--transition-fast);
214 visibility: hidden;
215 pointer-events: none;
216}
217
218#media-panel.open {
219 transform: translateY(0);
220 visibility: visible;
221 pointer-events: auto;
222}
223
224#media-panel media-control {
225 border-bottom: 1px solid var(--color-border);
226}
227
228#media-panel media-control:last-child {
229 border-bottom: none;
230}
231
232/* Each panel is a full-viewport-width container that holds a split tree */
233.panel {
234 position: relative; /* For absolutely positioned resize handles */
235 display: grid;
236 gap: var(--spacing-sm);
237 width: calc(100vw - var(--sidebar-width));
238 height: 100%;
239 scroll-snap-align: start;
240 padding: var(--spacing-sm);
241 /* Grid template is set dynamically by LayoutManager */
242}
243
244/* Disable pointer events on webviews during resize */
245body.resizing web-view {
246 pointer-events: none;
247}
248
249/* Resize handles between split views */
250.resize-handle {
251 z-index: var(--z-local-ui);
252 background: transparent;
253 transition: background var(--transition-fast);
254}
255
256.resize-handle:hover {
257 background: var(--color-resize-handle-hover);
258}
259
260.resize-handle-horizontal {
261 cursor: col-resize;
262}
263
264.resize-handle-vertical {
265 cursor: row-resize;
266}
267
268#notifications-icon-container {
269 position: relative;
270 display: flex;
271 align-items: center;
272 justify-content: center;
273 cursor: pointer;
274 padding: var(--spacing-xs) 0;
275}
276
277#notifications-icon {
278 opacity: var(--opacity-muted);
279 transition: opacity var(--transition-fast);
280}
281
282#notifications-icon-container:hover #notifications-icon {
283 opacity: 1;
284}
285
286#notifications-badge {
287 position: absolute;
288 top: 0;
289 right: -0.1em;
290 min-width: 1em;
291 height: 1em;
292 border-radius: 0.5em;
293 background: var(--color-danger);
294 color: var(--color-text-on-header);
295 font-size: var(--font-size-xs);
296 font-weight: var(--font-weight-bold);
297 display: flex;
298 align-items: center;
299 justify-content: center;
300 padding: 0 var(--spacing-xs);
301}
302
303#notifications-badge.hidden {
304 display: none;
305}
306
307#media-icon.hidden {
308 display: none;
309}
310
311/* Pairing dialog */
312#pairing-dialog,
313#p2p-open-dialog {
314 position: fixed;
315 z-index: 10000;
316 background: var(--bg-menu);
317 color: var(--color-text-menu);
318 border: 1px solid var(--color-border);
319 border-radius: 12px;
320 padding: 1.5rem;
321 min-width: 320px;
322 max-width: 90vw;
323 box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
324}
325
326#pairing-dialog::backdrop,
327#p2p-open-dialog::backdrop {
328 background: rgba(0, 0, 0, 0.6);
329 z-index: 9999;
330}
331
332#pairing-dialog h2,
333#p2p-open-dialog h2 {
334 font-size: 1.1rem;
335 margin: 0 0 1rem;
336}
337
338.pairing-request-item {
339 padding: 0.75rem;
340 margin: 0.5rem 0;
341 background: var(--bg-webview);
342 border-radius: 8px;
343}
344
345.pairing-request-name {
346 font-weight: bold;
347}
348
349.pairing-request-id {
350 font-size: 0.75rem;
351 opacity: 0.7;
352 word-break: break-all;
353 margin-bottom: 0.5rem;
354}
355
356.pairing-request-buttons {
357 display: flex;
358 gap: 0.5rem;
359}
360
361.pairing-request-buttons button {
362 padding: 0.4rem 1rem;
363 border: none;
364 border-radius: 6px;
365 cursor: pointer;
366 font-size: 0.85rem;
367}
368
369.btn-accept {
370 background: #2d7a2d;
371 color: white;
372}
373
374.btn-reject {
375 background: #7a2d2d;
376 color: white;
377}
378
379.btn-close-dialog {
380 margin-top: 1rem;
381 padding: 0.5rem 1.5rem;
382 background: transparent;
383 border: 1px solid var(--color-border);
384 color: inherit;
385 border-radius: 6px;
386 cursor: pointer;
387}