Rewild Your Web
me.webbeef.org
web
browser
dweb
1/* SPDX-License-Identifier: AGPL-3.0-or-later */
2
3:host {
4 display: none;
5 position: fixed;
6 top: 0;
7 left: 0;
8 width: 100%;
9 height: 100%;
10 z-index: var(--z-dialog);
11 font-family: var(--font-family-base);
12 overflow: hidden;
13}
14
15:host([open]) {
16 display: block;
17}
18
19* {
20 margin: 0;
21 padding: 0;
22 box-sizing: border-box;
23}
24
25.container {
26 width: 100%;
27 height: 100%;
28 display: flex;
29 align-items: center;
30 justify-content: center;
31 padding: var(--spacing-md);
32 background: var(--color-backdrop);
33}
34
35.panels {
36 display: flex;
37 align-items: center;
38 justify-content: center;
39 gap: var(--spacing-md);
40}
41
42.panel-wrapper {
43 position: relative;
44}
45
46.panel {
47 position: relative;
48}
49
50.thumbnail {
51 position: absolute;
52 background: var(--bg-webview);
53 border-radius: var(--radius-sm);
54 overflow: hidden;
55 cursor: pointer;
56 transition:
57 transform var(--transition-fast),
58 box-shadow var(--transition-fast);
59 box-shadow: 0 2px 8px var(--color-shadow);
60 display: flex;
61 flex-direction: column;
62}
63
64.thumbnail:hover {
65 transform: scale(1.05);
66 box-shadow: 0 8px 24px var(--color-shadow);
67 z-index: 10;
68}
69
70.thumbnail.active {
71 box-shadow:
72 0 0 0 3px var(--color-focus-ring),
73 0 4px 16px var(--color-shadow);
74}
75
76.thumbnail.active:hover {
77 box-shadow:
78 0 0 0 3px var(--color-focus-ring),
79 0 8px 24px var(--color-shadow);
80}
81
82.thumbnail img {
83 flex: 1;
84 width: 100%;
85 min-height: 0;
86 object-fit: cover;
87 object-position: top center;
88}
89
90.thumbnail .label {
91 padding: var(--spacing-xs) var(--spacing-sm);
92 font-size: var(--font-size-sm);
93 font-weight: var(--font-weight-bold);
94 white-space: nowrap;
95 overflow: hidden;
96 text-overflow: ellipsis;
97 flex-shrink: 0;
98}