Rewild Your Web
me.webbeef.org
web
browser
dweb
1/* SPDX-License-Identifier: AGPL-3.0-or-later */
2
3:host {
4 position: fixed;
5 top: 0;
6 left: 0;
7 right: 0;
8 bottom: 0;
9 z-index: var(--z-sheet);
10 pointer-events: none;
11}
12
13:host([open]) {
14 pointer-events: auto;
15}
16
17.overlay {
18 position: absolute;
19 top: 0;
20 left: 0;
21 right: 0;
22 bottom: 0;
23 background: var(--bg-main);
24 opacity: 0;
25 transition: opacity 0.3s ease;
26}
27
28:host([open]) .overlay {
29 opacity: 1;
30}
31
32.container {
33 position: absolute;
34 top: 0;
35 left: 0;
36 right: 0;
37 bottom: 0;
38 display: flex;
39 flex-direction: column;
40 opacity: 0;
41 transform: scale(0.9);
42 transition:
43 opacity 0.3s ease,
44 transform 0.3s ease;
45}
46
47:host([open]) .container {
48 opacity: 1;
49 transform: scale(1);
50}
51
52.header {
53 display: flex;
54 align-items: center;
55 justify-content: space-between;
56 padding: var(--spacing-md);
57 padding-top: var(--spacing-md);
58}
59
60.header-title {
61 font-size: 18px;
62 font-weight: 600;
63 color: var(--color-text-menu);
64}
65
66.header-actions {
67 display: flex;
68 gap: var(--spacing-sm);
69}
70
71.grid {
72 flex: 1;
73 overflow-y: auto;
74 padding: var(--spacing-md);
75 display: grid;
76 grid-template-columns: repeat(2, 1fr);
77 gap: var(--spacing-md);
78 align-content: start;
79}
80
81.tab-card {
82 background: var(--bg-menu);
83 border-radius: var(--radius-md);
84 overflow: hidden;
85 cursor: pointer;
86 transition:
87 transform 0.2s ease,
88 box-shadow 0.2s ease;
89 position: relative;
90}
91
92.tab-card:hover {
93 transform: translateY(-2px);
94 box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
95}
96
97.tab-card.active {
98 box-shadow: 0 0 0 2px var(--color-focus-ring);
99}
100
101.tab-card.closing {
102 animation: cardClose 0.3s ease forwards;
103}
104
105@keyframes cardClose {
106 to {
107 transform: translateY(-50px) scale(0.8);
108 opacity: 0;
109 }
110}
111
112.tab-screenshot {
113 width: 100%;
114 aspect-ratio: 4/3;
115 background: var(--bg-webview);
116 object-fit: cover;
117 object-position: top;
118}
119
120.tab-screenshot-placeholder {
121 width: 100%;
122 aspect-ratio: 4/3;
123 background: var(--bg-webview);
124 display: flex;
125 align-items: center;
126 justify-content: center;
127}
128
129.tab-screenshot-placeholder lucide-icon {
130 font-size: 32px;
131 color: var(--color-text-tertiary);
132 opacity: 0.5;
133}
134
135.tab-info {
136 padding: var(--spacing-sm);
137 display: flex;
138 align-items: center;
139 gap: var(--spacing-sm);
140}
141
142.tab-favicon {
143 width: 16px;
144 height: 16px;
145 object-fit: contain;
146 border-radius: 2px;
147 flex-shrink: 0;
148}
149
150.tab-favicon[src=""] {
151 display: none;
152}
153
154.tab-title {
155 flex: 1;
156 font-size: 12px;
157 color: var(--color-text-menu);
158 white-space: nowrap;
159 overflow: hidden;
160 text-overflow: ellipsis;
161}
162
163.close-button {
164 position: absolute;
165 top: var(--spacing-xs);
166 right: var(--spacing-xs);
167 width: 24px;
168 height: 24px;
169 background: rgba(0, 0, 0, 0.6);
170 border: none;
171 border-radius: 50%;
172 color: white;
173 display: flex;
174 align-items: center;
175 justify-content: center;
176 cursor: pointer;
177}
178
179.close-button lucide-icon {
180 font-size: 14px;
181}
182
183.home-card {
184 background: transparent;
185 border: 2px dashed var(--color-border);
186 border-radius: var(--radius-md);
187 display: flex;
188 flex-direction: column;
189 align-items: center;
190 justify-content: center;
191 cursor: pointer;
192 transition:
193 border-color 0.2s ease,
194 background 0.2s ease;
195 min-height: 120px;
196}
197
198.home-card:hover {
199 border-color: var(--color-focus-ring);
200 background: rgba(0, 122, 255, 0.1);
201}
202
203.home-card lucide-icon {
204 font-size: 32px;
205 color: var(--color-text-tertiary);
206 margin-bottom: var(--spacing-sm);
207}
208
209.home-card span {
210 font-size: 14px;
211 color: var(--color-text-tertiary);
212}