Rewild Your Web
me.webbeef.org
web
browser
dweb
1/* SPDX-License-Identifier: AGPL-3.0-or-later */
2
3:host {
4 display: none;
5 position: absolute;
6 inset: 0;
7 z-index: var(--z-local-ui);
8}
9
10:host([open]) {
11 display: flex;
12}
13
14.backdrop {
15 position: absolute;
16 inset: 0;
17 background: var(--color-backdrop);
18}
19
20.overlay {
21 position: absolute;
22 top: 5%;
23 left: 5%;
24 right: 5%;
25 bottom: 5%;
26 background: var(--bg-main);
27 border-radius: var(--radius-md);
28 display: flex;
29 flex-direction: column;
30 align-items: center;
31 padding: var(--spacing-lg);
32 box-shadow: 0 8px 32px var(--color-shadow);
33 overflow: hidden;
34}
35
36.search-header {
37 display: flex;
38 align-items: center;
39 gap: var(--spacing-md);
40 width: 100%;
41 max-width: 600px;
42 padding-top: calc(var(--spacing-lg));
43 padding-bottom: var(--spacing-lg);
44}
45
46.logo {
47 width: var(--size-logo);
48 height: var(--size-logo);
49 flex-shrink: 0;
50}
51
52.search-input {
53 flex: 1;
54 padding: var(--spacing-sm) var(--spacing-md);
55 font-size: 1.1em;
56 border: 2px solid var(--color-border);
57 border-radius: var(--radius-md);
58 background: var(--bg-webview);
59 color: inherit;
60 outline: none;
61 transition: border-color var(--transition-fast);
62}
63
64.search-input:focus {
65 border-color: var(--color-focus-ring);
66}
67
68.results-container {
69 width: 100%;
70 max-width: 600px;
71 flex: 1;
72 overflow-y: auto;
73}
74
75.results-list {
76 list-style: none;
77 margin: 0;
78 padding: 0;
79}
80
81.result-group {
82 display: flex;
83 margin-bottom: var(--spacing-xs);
84}
85
86.result-group-icon {
87 width: 2em;
88 display: flex;
89 align-items: flex-start;
90 padding-top: var(--spacing-sm);
91 flex-shrink: 0;
92}
93
94.result-group-icon lucide-icon {
95 font-size: 1em;
96 opacity: var(--opacity-muted);
97}
98
99.result-group-items {
100 flex: 1;
101}
102
103.result-item {
104 padding: var(--spacing-sm) var(--spacing-md);
105 background: var(--bg-webview);
106 transition: background var(--transition-fast);
107}
108
109.result-group-items .result-item:first-child {
110 border-radius: var(--radius-sm) var(--radius-sm) 0 0;
111}
112
113.result-group-items .result-item:last-child {
114 border-radius: 0 0 var(--radius-sm) var(--radius-sm);
115}
116
117.result-group-items .result-item:only-child {
118 border-radius: var(--radius-sm);
119}
120
121.result-item[data-kind="link"],
122.result-item[data-kind="webview"] {
123 cursor: pointer;
124}
125
126.result-item[data-kind="link"]:hover,
127.result-item[data-kind="webview"]:hover {
128 background: var(--bg-header);
129}
130
131.result-link {
132 color: var(--color-primary);
133 text-decoration: none;
134 font-weight: var(--font-weight-bold);
135 display: block;
136}
137
138.result-item[data-kind="link"]:hover .result-link,
139.result-item[data-kind="webview"]:hover .result-link {
140 color: var(--color-text-on-header);
141}
142
143.result-item[data-kind="text"] {
144 cursor: default;
145}
146
147.result-text {
148 color: inherit;
149}