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: transparent;
15 overflow: hidden;
16}
17
18h1 {
19 font-family: Pacifico;
20 color: var(--color-text-menu);
21 text-align: center;
22 margin-bottom: var(--spacing-sm);
23 cursor: pointer;
24}
25
26.container {
27 width: 100%;
28 height: 100%;
29 display: flex;
30 flex-direction: column;
31 align-items: center;
32 justify-content: flex-start;
33 padding: var(--spacing-lg);
34 padding-top: calc(var(--spacing-lg) * 2);
35}
36
37.search-card {
38 width: 100%;
39 max-width: 600px;
40 display: flex;
41 flex-direction: column;
42 background: var(--bg-menu);
43 border-radius: var(--radius-md);
44 padding: var(--spacing-lg);
45 max-height: calc(100vh - var(--spacing-lg) * 4);
46 overflow: hidden;
47 color: var(--color-text-menu);
48 box-shadow: 0 8px 32px var(--color-shadow);
49}
50
51.search-header {
52 display: flex;
53 align-items: center;
54 gap: var(--spacing-md);
55 width: 100%;
56 margin-bottom: var(--spacing-md);
57 padding: 0 var(--spacing-sm);
58}
59
60.logo {
61 width: var(--size-logo);
62 height: var(--size-logo);
63 flex-shrink: 0;
64}
65
66.search-input {
67 flex: 1;
68 padding: var(--spacing-sm) var(--spacing-md);
69 font-size: 1.1em;
70 border: 2px solid var(--color-border);
71 border-radius: var(--radius-md);
72 background: var(--bg-webview);
73 color: var(--color-text-menu);
74 outline: none;
75 transition: border-color var(--transition-fast);
76}
77
78.search-input:focus {
79 border-color: var(--color-focus-ring);
80}
81
82.search-input::placeholder {
83 color: var(--color-text-tertiary);
84}
85
86.results-container {
87 width: 100%;
88 max-height: 0;
89 overflow-y: auto;
90 margin-top: 0;
91 padding: 0 var(--spacing-sm);
92 transition:
93 max-height 0.3s ease,
94 margin-top 0.3s ease;
95}
96
97.container.has-results .results-container {
98 flex: 1;
99 min-height: 0;
100 max-height: none;
101 margin-top: var(--spacing-md);
102}
103
104.results-list {
105 list-style: none;
106 padding-bottom: var(--spacing-md);
107}
108
109.result-group {
110 display: flex;
111 margin-bottom: var(--spacing-xs);
112}
113
114.result-group-icon {
115 width: 2em;
116 display: flex;
117 align-items: flex-start;
118 padding-top: var(--spacing-sm);
119 flex-shrink: 0;
120}
121
122.result-group-icon lucide-icon {
123 font-size: 1em;
124 opacity: var(--opacity-muted);
125}
126
127.result-group-items {
128 flex: 1;
129}
130
131.result-item {
132 padding: var(--spacing-sm) var(--spacing-md);
133 background: var(--bg-webview);
134 transition: background var(--transition-fast);
135}
136
137.result-group-items .result-item:first-child {
138 border-radius: var(--radius-sm) var(--radius-sm) 0 0;
139}
140
141.result-group-items .result-item:last-child {
142 border-radius: 0 0 var(--radius-sm) var(--radius-sm);
143}
144
145.result-group-items .result-item:only-child {
146 border-radius: var(--radius-sm);
147}
148
149.result-item[data-kind="link"],
150.result-item[data-kind="webview"] {
151 cursor: pointer;
152}
153
154.result-item[data-kind="link"]:hover,
155.result-item[data-kind="webview"]:hover {
156 background: var(--bg-header);
157}
158
159.result-link {
160 color: var(--color-primary);
161 text-decoration: none;
162 font-weight: var(--font-weight-bold);
163 display: block;
164}
165
166.result-item[data-kind="link"]:hover .result-link,
167.result-item[data-kind="webview"]:hover .result-link {
168 color: var(--color-text-on-header);
169}
170
171.result-item[data-kind="text"] {
172 cursor: default;
173}
174
175.result-text {
176 color: inherit;
177}