forked from
me.webbeef.org/browser.html
Rewild Your Web
1/* SPDX-License-Identifier: AGPL-3.0-or-later */
2
3:host {
4 display: flex;
5 font-family: var(--font-family-base);
6 box-sizing: border-box;
7 min-width: 0;
8}
9
10:host .wrapper {
11 background: var(--bg-webview);
12 border-radius: var(--radius-md) var(--radius-md) 0 0;
13 display: flex;
14 flex-direction: column;
15 flex: 1;
16 min-width: 0;
17 min-height: 0;
18 box-shadow: 0 2px 8px var(--color-shadow-menu);
19 transition: box-shadow var(--transition-fast);
20 position: relative; /* Needed for absolutely positioned menu overlay */
21}
22
23:host .wrapper.active {
24 box-shadow:
25 0 0 0 2px var(--color-focus-ring),
26 0 2px 12px var(--color-shadow);
27}
28
29/* Container for iframe and dialog overlay */
30:host .iframe-container {
31 flex: 1;
32 position: relative;
33 min-width: 0;
34 min-height: 0;
35 display: flex;
36}
37
38:host iframe {
39 flex: 1;
40 border: none;
41 min-width: 0;
42 min-height: 0;
43}
44
45:host .bar {
46 display: flex;
47 align-items: center;
48 gap: var(--spacing-sm);
49 padding: var(--spacing-xs) var(--spacing-sm) var(--spacing-xs)
50 var(--spacing-sm);
51 border-radius: var(--radius-md) var(--radius-md) 0 0;
52 box-shadow: 0 1px 4px var(--color-shadow-menu);
53 position: relative;
54 transition:
55 opacity var(--transition-fast),
56 max-height var(--transition-fast),
57 padding var(--transition-fast);
58 overflow: hidden;
59}
60
61:host .bar.hidden {
62 opacity: 0;
63 max-height: 0;
64 padding-top: 0;
65 padding-bottom: 0;
66 pointer-events: none;
67 transition-delay: 0.5s;
68}
69
70:host .bar img {
71 width: var(--size-icon);
72}
73
74:host .icon {
75 cursor: pointer;
76}
77
78:host .icon.enabled-false {
79 cursor: not-allowed;
80 opacity: 0.4;
81}
82
83:host .title {
84 flex: 1;
85 white-space: nowrap;
86 overflow: hidden;
87 text-overflow: ellipsis;
88 cursor: pointer;
89}
90
91:host .menu-container {
92 position: relative;
93 display: flex;
94 align-items: center;
95}
96
97:host .blocker-icon {
98 position: relative;
99 display: flex;
100 align-items: center;
101 cursor: pointer;
102 padding: 0 0.4em;
103 border-radius: var(--radius-sm);
104 transition: background var(--transition-fast);
105}
106
107:host .blocker-icon:hover {
108 background: var(--bg-hover);
109}
110
111:host .blocker-icon lucide-icon {
112 font-size: 1.1em;
113 color: var(--color-primary);
114 transition: color var(--transition-fast);
115}
116
117:host .blocker-icon.disabled lucide-icon {
118 color: var(--color-text-secondary);
119}
120
121:host .blocker-badge {
122 position: absolute;
123 top: -4px;
124 right: -2px;
125 min-width: 14px;
126 height: 14px;
127 border-radius: 7px;
128 background: var(--color-primary);
129 color: var(--color-text-on-header);
130 font-size: 9px;
131 font-weight: var(--font-weight-bold);
132 display: flex;
133 align-items: center;
134 justify-content: center;
135 padding: 0 3px;
136}
137
138/* Dialog overlay styles - positioned within iframe-container */
139:host .dialog-overlay {
140 position: absolute;
141 top: 0;
142 left: 0;
143 right: 0;
144 bottom: 0;
145 background: var(--color-backdrop);
146 display: flex;
147 align-items: center;
148 justify-content: center;
149 z-index: var(--z-dialog);
150}
151
152:host .dialog-box {
153 background: var(--bg-surface);
154 border-radius: var(--radius-md);
155 padding: var(--spacing-lg);
156 min-width: 280px;
157 max-width: 80%;
158 box-shadow: 0 8px 32px var(--color-shadow);
159 font-family: var(--font-family-base);
160}
161
162:host .dialog-message {
163 margin-bottom: var(--spacing-md);
164 color: var(--color-text);
165 font-size: var(--font-size-menu);
166 line-height: 1.5;
167 white-space: pre-wrap;
168 word-wrap: break-word;
169}
170
171:host .dialog-input {
172 width: 100%;
173 padding: var(--spacing-sm) var(--spacing-md);
174 margin-bottom: var(--spacing-md);
175 border: 1px solid var(--color-border);
176 border-radius: var(--radius-sm);
177 font-size: var(--font-size-menu);
178 background: var(--bg-surface);
179 color: var(--color-text);
180 box-sizing: border-box;
181}
182
183:host .dialog-input:focus {
184 outline: none;
185 border-color: var(--color-primary);
186 box-shadow: 0 0 0 2px var(--color-focus-ring);
187}
188
189:host .dialog-buttons {
190 display: flex;
191 justify-content: flex-end;
192 gap: var(--spacing-sm);
193}
194
195:host .dialog-button {
196 padding: var(--spacing-sm) var(--spacing-md);
197 border-radius: var(--radius-sm);
198 font-size: var(--font-size-menu);
199 font-weight: var(--font-weight-bold);
200 cursor: pointer;
201 border: 1px solid var(--color-border);
202 background: var(--bg-surface);
203 color: var(--color-text);
204 transition:
205 background var(--transition-fast),
206 border-color var(--transition-fast);
207}
208
209:host .dialog-button:hover {
210 background: var(--bg-hover);
211}
212
213:host .dialog-button.primary {
214 background: var(--color-primary);
215 color: var(--color-text-on-header);
216 border-color: var(--color-primary);
217}
218
219:host .dialog-button.primary:hover {
220 filter: brightness(0.9);
221}
222
223:host .permission-prompt {
224 text-align: center;
225}
226
227:host .permission-icon {
228 width: var(--size-logo);
229 height: var(--size-logo);
230 margin: 0 auto var(--spacing-sm);
231 display: flex;
232 align-items: center;
233 justify-content: center;
234 background: var(--bg-icon);
235 border-radius: 50%;
236 color: var(--color-primary);
237}
238
239:host .permission-icon lucide-icon {
240 width: var(--size-notification-icon);
241 height: var(--size-notification-icon);
242}
243
244:host .permission-title {
245 font-size: var(--font-size-menu);
246 font-weight: var(--font-weight-bold);
247 color: var(--color-text);
248 margin-bottom: var(--spacing-sm);
249}
250
251:host .permission-prompt .dialog-message {
252 text-align: center;
253}
254
255:host .permission-prompt .dialog-buttons {
256 justify-content: center;
257}
258
259/* Loading progress bar */
260:host .load-progress {
261 position: absolute;
262 bottom: 0;
263 left: 0;
264 height: 2px;
265 background: var(--color-primary);
266 transition:
267 width 0.3s cubic-bezier(0.16, 1, 0.3, 1),
268 opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
269 opacity: 0;
270 width: 0;
271 z-index: var(--z-base);
272}
273
274:host .load-progress.load-started {
275 width: 30%;
276 opacity: 1;
277 animation: load-travel 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
278}
279
280:host .load-progress.load-headparsed {
281 width: 65%;
282 opacity: 1;
283 animation: load-travel 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
284}
285
286:host .load-progress.load-complete {
287 width: 100%;
288 opacity: 0;
289 animation: none;
290 transition:
291 width 0.2s cubic-bezier(0.16, 1, 0.3, 1),
292 opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
293}
294
295@keyframes load-travel {
296 0% {
297 opacity: 1;
298 }
299 50% {
300 opacity: 0.5;
301 }
302 100% {
303 opacity: 1;
304 }
305}
306
307/* ============================================================================
308 Mobile-specific styles
309 ============================================================================ */
310
311/* When mobile-mode is detected, adjust the wrapper */
312:host(.mobile-mode) .wrapper {
313 border-radius: 0;
314 box-shadow: none;
315}
316
317:host(.mobile-mode) .wrapper.active {
318 box-shadow: none;
319}
320
321/* Hide the title bar completely on mobile */
322:host(.mobile-mode) .bar {
323 display: none !important;
324}
325
326/* Make iframe container fill entire space */
327:host(.mobile-mode) .iframe-container {
328 border-radius: 0;
329}
330
331/* ============================================================================
332 Media center styles
333 ============================================================================ */
334
335:host(.mediacenter-mode) .wrapper {
336 border-radius: 0;
337 box-shadow: none;
338}
339
340:host(.mediacenter-mode) .wrapper.active {
341 box-shadow: none;
342}
343
344:host(.mediacenter-mode) .bar {
345 display: none !important;
346}
347
348:host(.mediacenter-mode) .iframe-container {
349 border-radius: 0;
350}
351
352/* Inline task provider overlay */
353:host .inline-provider-overlay {
354 position: absolute;
355 inset: 0;
356 background: var(--color-backdrop);
357 display: flex;
358 align-items: center;
359 justify-content: center;
360 z-index: var(--z-dialog);
361}
362
363:host .inline-provider-dialog {
364 background: var(--bg-surface);
365 border-radius: var(--radius-md);
366 width: 90%;
367 max-width: 500px;
368 height: 70%;
369 max-height: 600px;
370 display: flex;
371 flex-direction: column;
372 box-shadow: 0 8px 32px var(--color-shadow);
373 overflow: hidden;
374}
375
376:host .inline-provider-header {
377 display: flex;
378 align-items: center;
379 gap: var(--spacing-sm);
380 padding: var(--spacing-xs) var(--spacing-sm);
381 background: var(--bg-surface);
382 border-bottom: 1px solid var(--color-border);
383 font-family: var(--font-family-base);
384}
385
386:host .inline-provider-title {
387 flex: 1;
388 font-size: var(--font-size-sm);
389 font-weight: var(--font-weight-bold);
390 color: var(--color-text);
391}
392
393:host .inline-provider-close {
394 background: none;
395 border: none;
396 font-size: var(--font-size-lg);
397 cursor: pointer;
398 padding: var(--spacing-xs) var(--spacing-sm);
399 color: var(--color-text-secondary);
400 border-radius: var(--radius-sm);
401 transition: background var(--transition-fast);
402}
403
404:host .inline-provider-close:hover {
405 background: var(--bg-hover);
406}
407
408:host .inline-provider-dialog iframe {
409 flex: 1;
410 border: none;
411 width: 100%;
412}