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.overlay {
14 position: fixed;
15 top: 0;
16 left: 0;
17 right: 0;
18 bottom: 0;
19 background: rgba(0, 0, 0, 0.3);
20 opacity: 0;
21 transition: opacity 0.2s ease;
22 pointer-events: none;
23}
24
25:host([open]) .overlay {
26 opacity: 1;
27 pointer-events: auto;
28}
29
30.sheet {
31 position: absolute;
32 top: 0;
33 left: 0;
34 right: 0;
35 max-height: 70vh;
36 background: var(--bg-menu);
37 border-radius: 0 0 var(--radius-lg) var(--radius-lg);
38 transform: translateY(-100%);
39 transition: transform 0.3s ease;
40 pointer-events: auto;
41 box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
42 display: flex;
43 flex-direction: column;
44 overflow: hidden;
45}
46
47:host([open]) .sheet {
48 transform: translateY(0);
49}
50
51.sheet-header {
52 display: flex;
53 align-items: center;
54 justify-content: space-between;
55 padding: var(--spacing-md);
56 border-bottom: 1px solid var(--color-border);
57}
58
59.status-info {
60 display: flex;
61 align-items: center;
62 gap: var(--spacing-sm);
63 font-size: 14px;
64 color: var(--color-text-menu);
65}
66
67.tab-count {
68 background: var(--color-focus-ring);
69 color: white;
70 padding: 2px 8px;
71 border-radius: 12px;
72 font-size: 12px;
73 font-weight: 600;
74}
75
76.clear-all-button {
77 background: transparent;
78 border: none;
79 color: var(--color-focus-ring);
80 font-size: 14px;
81 cursor: pointer;
82 padding: var(--spacing-xs) var(--spacing-sm);
83}
84
85.clear-all-button:disabled {
86 opacity: 0.5;
87 cursor: not-allowed;
88}
89
90.notifications-list {
91 flex: 1;
92 overflow-y: auto;
93 padding: var(--spacing-sm);
94}
95
96.notification-item {
97 display: flex;
98 align-items: flex-start;
99 gap: var(--spacing-sm);
100 padding: var(--spacing-sm) var(--spacing-md);
101 background: var(--bg-webview);
102 border-radius: var(--radius-md);
103 margin-bottom: var(--spacing-sm);
104 cursor: pointer;
105 transition: background 0.2s ease, transform 0.2s ease;
106 position: relative;
107}
108
109.notification-item:hover {
110 background: var(--color-menu-item-hover);
111}
112
113.notification-item.swiping {
114 transition: none;
115}
116
117.notification-icon {
118 width: 40px;
119 height: 40px;
120 border-radius: 8px;
121 background: var(--bg-header);
122 display: flex;
123 align-items: center;
124 justify-content: center;
125 flex-shrink: 0;
126}
127
128.notification-icon img {
129 width: 24px;
130 height: 24px;
131 object-fit: contain;
132}
133
134.notification-icon lucide-icon {
135 font-size: 20px;
136 color: var(--color-text-tertiary);
137}
138
139.notification-content {
140 flex: 1;
141 min-width: 0;
142}
143
144.notification-title {
145 font-weight: 600;
146 font-size: 14px;
147 color: var(--color-text-menu);
148 white-space: nowrap;
149 overflow: hidden;
150 text-overflow: ellipsis;
151}
152
153.notification-body {
154 font-size: 13px;
155 color: var(--color-text-tertiary);
156 margin-top: 2px;
157 overflow: hidden;
158}
159
160.notification-time {
161 font-size: 11px;
162 color: var(--color-text-tertiary);
163 margin-top: 4px;
164}
165
166.dismiss-button {
167 background: transparent;
168 border: none;
169 color: var(--color-text-tertiary);
170 padding: var(--spacing-xs);
171 cursor: pointer;
172 opacity: 0;
173 transition: opacity 0.2s ease;
174}
175
176.notification-item:hover .dismiss-button {
177 opacity: 1;
178}
179
180.empty-state {
181 display: flex;
182 flex-direction: column;
183 align-items: center;
184 justify-content: center;
185 padding: var(--spacing-md);
186 color: var(--color-text-tertiary);
187}
188
189.empty-state lucide-icon {
190 font-size: 48px;
191 margin-bottom: var(--spacing-md);
192 opacity: 0.5;
193}
194
195.empty-state-text {
196 font-size: 14px;
197}