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 bottom: 0;
7 left: var(--sidebar-width);
8 width: var(--size-panel-width);
9 z-index: var(--z-panel);
10 pointer-events: none;
11 font-family: var(--font-family-base);
12}
13
14:host([open]) {
15 pointer-events: auto;
16}
17
18.panel {
19 position: absolute;
20 top: 0;
21 left: 0;
22 bottom: 0;
23 width: 100%;
24 background: var(--bg-menu);
25 box-shadow: 4px 0 16px var(--color-shadow-menu);
26 transform: translateX(-100%);
27 transition: transform var(--transition-fast),
28 visibility var(--transition-fast);
29 display: flex;
30 flex-direction: column;
31 visibility: hidden;
32}
33
34:host([open]) .panel {
35 transform: translateX(0);
36 visibility: visible;
37}
38
39.header {
40 display: flex;
41 align-items: center;
42 justify-content: space-between;
43 padding: var(--spacing-sm) var(--spacing-md);
44 border-bottom: 1px solid var(--color-border);
45}
46
47.header-title {
48 font-weight: var(--font-weight-bold);
49 font-size: var(--font-size-menu);
50 color: var(--color-text);
51}
52
53.header-actions {
54 display: flex;
55 gap: var(--spacing-sm);
56}
57
58.clear-btn {
59 background: none;
60 border: none;
61 color: var(--color-primary);
62 font-size: var(--font-size-sm);
63 cursor: pointer;
64 padding: var(--spacing-xs) var(--spacing-sm);
65 border-radius: var(--radius-sm);
66}
67
68.clear-btn:hover {
69 background: var(--bg-hover);
70}
71
72.close-btn {
73 background: none;
74 border: none;
75 cursor: pointer;
76 padding: var(--spacing-xs);
77 border-radius: var(--radius-sm);
78 display: flex;
79 align-items: center;
80 justify-content: center;
81}
82
83.close-btn:hover {
84 background: var(--bg-hover);
85}
86
87.notification-list {
88 flex: 1;
89 overflow-y: auto;
90 padding: var(--spacing-sm) 0;
91}
92
93.notification-item {
94 padding: var(--spacing-sm) var(--spacing-md);
95 border-bottom: 1px solid var(--color-border);
96 cursor: pointer;
97 transition: background var(--transition-fast);
98 position: relative;
99}
100
101.notification-item:hover {
102 background: var(--bg-hover);
103}
104
105.notification-item:last-child {
106 border-bottom: none;
107}
108
109.notification-header {
110 display: flex;
111 align-items: flex-start;
112 gap: var(--spacing-sm);
113}
114
115.notification-icon {
116 width: var(--size-notification-icon);
117 height: var(--size-notification-icon);
118 border-radius: var(--radius-sm);
119 background: var(--bg-icon);
120 display: flex;
121 align-items: center;
122 justify-content: center;
123 flex-shrink: 0;
124 overflow: hidden;
125}
126
127.notification-icon img {
128 width: 100%;
129 height: 100%;
130 object-fit: cover;
131}
132
133.notification-icon lucide-icon {
134 color: var(--color-primary);
135}
136
137.notification-content {
138 flex: 1;
139 min-width: 0;
140}
141
142.notification-title {
143 font-weight: var(--font-weight-bold);
144 font-size: var(--font-size-menu);
145 color: var(--color-text);
146 margin-bottom: 2px;
147 white-space: nowrap;
148 overflow: hidden;
149 text-overflow: ellipsis;
150}
151
152.notification-body {
153 font-size: var(--font-size-sm);
154 color: var(--color-text-secondary);
155 overflow: hidden;
156}
157
158.notification-meta {
159 display: flex;
160 align-items: center;
161 gap: var(--spacing-sm);
162 margin-top: var(--spacing-xs);
163 font-size: var(--font-size-xs);
164 color: var(--color-text-tertiary);
165}
166
167.notification-time {
168 white-space: nowrap;
169}
170
171.notification-dismiss {
172 position: absolute;
173 top: var(--spacing-sm);
174 right: var(--spacing-sm);
175 width: var(--size-icon-sm);
176 height: var(--size-icon-sm);
177 border: none;
178 background: none;
179 cursor: pointer;
180 border-radius: var(--radius-sm);
181 display: flex;
182 align-items: center;
183 justify-content: center;
184 opacity: 0;
185 transition: opacity var(--transition-fast);
186}
187
188.notification-item:hover .notification-dismiss {
189 opacity: 1;
190}
191
192.notification-dismiss:hover {
193 background: var(--bg-hover);
194}
195
196.empty-state {
197 display: flex;
198 flex-direction: column;
199 align-items: center;
200 justify-content: center;
201 height: 100%;
202 color: var(--color-text-secondary);
203 padding: var(--spacing-lg);
204 text-align: center;
205}
206
207.empty-state lucide-icon {
208 font-size: 3em;
209 margin-bottom: var(--spacing-md);
210 opacity: var(--opacity-muted);
211}
212
213.empty-state-text {
214 font-size: var(--font-size-menu);
215}
216
217.backdrop {
218 position: fixed;
219 top: 0;
220 left: var(--sidebar-width);
221 right: 0;
222 bottom: 0;
223 background: var(--color-backdrop);
224 opacity: 0;
225 transition: opacity var(--transition-fast), visibility var(--transition-fast);
226 pointer-events: none;
227 visibility: hidden;
228}
229
230:host([open]) .backdrop {
231 opacity: 1;
232 pointer-events: auto;
233 visibility: visible;
234}