Rewild Your Web
me.webbeef.org
web
browser
dweb
1/* SPDX-License-Identifier: AGPL-3.0-or-later */
2
3* {
4 margin: 0;
5 padding: 0;
6 box-sizing: border-box;
7}
8
9html,
10body {
11 width: 100%;
12 height: 100%;
13 font-family: var(--font-family-base);
14 background: var(--bg-main);
15 margin: 0;
16 padding: 0;
17}
18
19/* Container fills viewport */
20.container {
21 display: flex;
22 flex-direction: column;
23 min-height: 100%;
24 height: 100%;
25 background: var(--bg-main);
26 color: var(--color-text-menu);
27}
28
29/* Widgets area at top */
30.widgets-area {
31 padding: var(--spacing-md);
32 padding-top: var(--spacing-md);
33 display: flex;
34 flex-direction: column;
35 gap: var(--spacing-sm);
36}
37
38.widget-frame {
39 border: none;
40 border-radius: var(--radius-lg);
41 background: transparent;
42}
43
44/* Bookmarks area fills available space, aligns content to bottom */
45.bookmarks-area {
46 flex: 1;
47 overflow-y: auto;
48 padding: var(--spacing-md);
49 padding-bottom: var(--spacing-sm);
50 display: flex;
51 flex-direction: column;
52 justify-content: flex-end;
53}
54
55/* Bookmarks grid */
56.bookmarks-grid {
57 display: grid;
58 grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
59 gap: var(--spacing-xs);
60 justify-items: center;
61 max-width: 600px;
62 margin: 0 auto;
63 width: 100%;
64}
65
66.bookmark-item {
67 display: flex;
68 flex-direction: column;
69 align-items: center;
70 text-decoration: none;
71 color: inherit;
72 padding: var(--spacing-xs);
73 border-radius: var(--radius-md);
74 transition: background var(--transition-fast);
75 cursor: pointer;
76}
77
78.bookmark-item:hover {
79 background: var(--bg-hover);
80}
81
82.bookmark-item:active {
83 transform: scale(0.95);
84}
85
86.bookmark-icon {
87 width: 56px;
88 height: 56px;
89 border-radius: var(--radius-md);
90 background: var(--bg-surface);
91 display: flex;
92 align-items: center;
93 justify-content: center;
94 margin-bottom: var(--spacing-xs);
95 overflow: hidden;
96}
97
98.bookmark-icon img {
99 width: 40px;
100 height: 40px;
101 border-radius: var(--radius-sm);
102 object-fit: contain;
103}
104
105.bookmark-title {
106 font-size: var(--font-size-sm);
107 text-align: center;
108 max-width: 80px;
109 overflow: hidden;
110 text-overflow: ellipsis;
111 white-space: nowrap;
112 color: var(--color-text-menu);
113}
114
115/* Results area - overlays bookmarks when searching */
116.results-area {
117 display: none;
118 flex: 1;
119 overflow-y: auto;
120 padding: var(--spacing-lg);
121 padding-top: var(--spacing-lg);
122 background: var(--bg-main);
123}
124
125body.searching .bookmarks-area {
126 display: none;
127}
128
129body.searching .widgets-area {
130 display: none;
131}
132
133body.searching .results-area {
134 display: block;
135}
136
137/* Search bar fixed at bottom */
138.search-bar {
139 padding: var(--spacing-md);
140 padding-bottom: var(--spacing-md);
141 background: var(--bg-menu);
142 border-top: 1px solid var(--color-border);
143}
144
145.search-input-container {
146 display: flex;
147 align-items: center;
148 background: var(--bg-webview);
149 border-radius: var(--radius-md);
150 padding: var(--spacing-sm) var(--spacing-md);
151 max-width: 600px;
152 margin: 0 auto;
153}
154
155.search-input-container lucide-icon {
156 color: var(--color-text-tertiary);
157 margin-right: var(--spacing-sm);
158 flex-shrink: 0;
159}
160
161.search-input {
162 flex: 1;
163 border: none;
164 background: transparent;
165 font-size: 16px;
166 color: var(--color-text);
167 outline: none;
168 min-width: 0;
169}
170
171.search-input::placeholder {
172 color: var(--color-text-tertiary);
173}
174
175/* Results list styling (adapted from new_view.css) */
176.results-list {
177 list-style: none;
178 max-width: 600px;
179 margin: 0 auto;
180}
181
182.result-group {
183 display: flex;
184 margin-bottom: var(--spacing-xs);
185}
186
187.result-group-icon {
188 width: 2em;
189 display: flex;
190 align-items: flex-start;
191 padding-top: var(--spacing-sm);
192 flex-shrink: 0;
193}
194
195.result-group-icon lucide-icon {
196 font-size: 1em;
197 opacity: var(--opacity-muted);
198}
199
200.result-group-items {
201 flex: 1;
202}
203
204.result-item {
205 padding: var(--spacing-sm) var(--spacing-md);
206 background: var(--bg-webview);
207 transition: background var(--transition-fast);
208}
209
210.result-group-items .result-item:first-child {
211 border-radius: var(--radius-sm) var(--radius-sm) 0 0;
212}
213
214.result-group-items .result-item:last-child {
215 border-radius: 0 0 var(--radius-sm) var(--radius-sm);
216}
217
218.result-group-items .result-item:only-child {
219 border-radius: var(--radius-sm);
220}
221
222.result-item[data-kind="link"],
223.result-item[data-kind="webview"] {
224 cursor: pointer;
225}
226
227.result-item[data-kind="link"]:hover,
228.result-item[data-kind="webview"]:hover {
229 background: var(--bg-header);
230}
231
232.result-link {
233 color: var(--color-primary);
234 text-decoration: none;
235 font-weight: var(--font-weight-bold);
236 display: block;
237}
238
239.result-item[data-kind="link"]:hover .result-link,
240.result-item[data-kind="webview"]:hover .result-link {
241 color: var(--color-text-on-header);
242}
243
244.result-item[data-kind="text"] {
245 cursor: default;
246}
247
248.result-text {
249 color: var(--color-text);
250}