Rewild Your Web
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.header-button {
72 background: var(--bg-menu);
73 border: none;
74 color: var(--color-text-menu);
75 width: 40px;
76 height: 40px;
77 border-radius: 50%;
78 display: flex;
79 align-items: center;
80 justify-content: center;
81 cursor: pointer;
82 transition: background 0.2s ease;
83}
84
85.header-button:hover {
86 background: var(--color-menu-item-hover);
87}
88
89.grid {
90 flex: 1;
91 overflow-y: auto;
92 padding: var(--spacing-md);
93 display: grid;
94 grid-template-columns: repeat(2, 1fr);
95 gap: var(--spacing-md);
96 align-content: start;
97}
98
99.tab-card {
100 background: var(--bg-menu);
101 border-radius: var(--radius-md);
102 overflow: hidden;
103 cursor: pointer;
104 transition:
105 transform 0.2s ease,
106 box-shadow 0.2s ease;
107 position: relative;
108}
109
110.tab-card:hover {
111 transform: translateY(-2px);
112 box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
113}
114
115.tab-card.active {
116 box-shadow: 0 0 0 2px var(--color-focus-ring);
117}
118
119.tab-card.closing {
120 animation: cardClose 0.3s ease forwards;
121}
122
123@keyframes cardClose {
124 to {
125 transform: translateY(-50px) scale(0.8);
126 opacity: 0;
127 }
128}
129
130.tab-screenshot {
131 width: 100%;
132 aspect-ratio: 4/3;
133 background: var(--bg-webview);
134 object-fit: cover;
135 object-position: top;
136}
137
138.tab-screenshot-placeholder {
139 width: 100%;
140 aspect-ratio: 4/3;
141 background: var(--bg-webview);
142 display: flex;
143 align-items: center;
144 justify-content: center;
145}
146
147.tab-screenshot-placeholder lucide-icon {
148 font-size: 32px;
149 color: var(--color-text-tertiary);
150 opacity: 0.5;
151}
152
153.tab-info {
154 padding: var(--spacing-sm);
155 display: flex;
156 align-items: center;
157 gap: var(--spacing-sm);
158}
159
160.tab-favicon {
161 width: 16px;
162 height: 16px;
163 object-fit: contain;
164 border-radius: 2px;
165 flex-shrink: 0;
166}
167
168.tab-favicon[src=""] {
169 display: none;
170}
171
172.tab-title {
173 flex: 1;
174 font-size: 12px;
175 color: var(--color-text-menu);
176 white-space: nowrap;
177 overflow: hidden;
178 text-overflow: ellipsis;
179}
180
181.close-button {
182 position: absolute;
183 top: var(--spacing-xs);
184 right: var(--spacing-xs);
185 width: 24px;
186 height: 24px;
187 background: rgba(0, 0, 0, 0.6);
188 border: none;
189 border-radius: 50%;
190 color: white;
191 display: flex;
192 align-items: center;
193 justify-content: center;
194 cursor: pointer;
195}
196
197.close-button lucide-icon {
198 font-size: 14px;
199}
200
201.home-card {
202 background: transparent;
203 border: 2px dashed var(--color-border);
204 border-radius: var(--radius-md);
205 display: flex;
206 flex-direction: column;
207 align-items: center;
208 justify-content: center;
209 cursor: pointer;
210 transition:
211 border-color 0.2s ease,
212 background 0.2s ease;
213 min-height: 120px;
214}
215
216.home-card:hover {
217 border-color: var(--color-focus-ring);
218 background: rgba(0, 122, 255, 0.1);
219}
220
221.home-card lucide-icon {
222 font-size: 32px;
223 color: var(--color-text-tertiary);
224 margin-bottom: var(--spacing-sm);
225}
226
227.home-card span {
228 font-size: 14px;
229 color: var(--color-text-tertiary);
230}