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 top: 0;
7 left: 0;
8 width: 100%;
9 height: 100%;
10 z-index: var(--z-modal);
11}
12
13:host([open]) {
14 display: block;
15}
16
17.backdrop {
18 position: absolute;
19 top: 0;
20 left: 0;
21 width: 100%;
22 height: 100%;
23 background: var(--color-backdrop);
24}
25
26.picker {
27 position: absolute;
28 background: var(--bg-surface);
29 border-radius: var(--radius-lg);
30 box-shadow: 0 8px 32px var(--color-shadow);
31 padding: var(--spacing-md);
32 min-width: 280px;
33 font-family: var(--font-family-base);
34 font-size: var(--font-size-sm);
35}
36
37.picker-main {
38 display: flex;
39 gap: var(--spacing-sm);
40 margin-bottom: var(--spacing-sm);
41}
42
43/* Saturation/Lightness area */
44.sl-area {
45 width: 200px;
46 height: 150px;
47 position: relative;
48 cursor: crosshair;
49 border-radius: var(--radius-sm);
50 border: 1px solid var(--color-border);
51}
52
53.sl-cursor {
54 position: absolute;
55 width: 12px;
56 height: 12px;
57 border: 2px solid white;
58 border-radius: 50%;
59 box-shadow: 0 0 2px var(--color-shadow);
60 transform: translate(-50%, -50%);
61 pointer-events: none;
62}
63
64/* Hue bar */
65.hue-bar {
66 width: 20px;
67 height: 150px;
68 position: relative;
69 cursor: pointer;
70 border-radius: var(--radius-sm);
71 border: 1px solid var(--color-border);
72 background: linear-gradient(to bottom,
73 hsl(0, 100%, 50%),
74 hsl(60, 100%, 50%),
75 hsl(120, 100%, 50%),
76 hsl(180, 100%, 50%),
77 hsl(240, 100%, 50%),
78 hsl(300, 100%, 50%),
79 hsl(360, 100%, 50%)
80 );
81}
82
83.hue-cursor {
84 position: absolute;
85 left: -2px;
86 right: -2px;
87 height: 4px;
88 background: white;
89 border: 1px solid var(--color-text);
90 border-radius: 2px;
91 transform: translateY(-50%);
92 pointer-events: none;
93}
94
95.inputs-row {
96 display: flex;
97 gap: var(--spacing-sm);
98 margin-bottom: var(--spacing-sm);
99}
100
101.preview {
102 width: 48px;
103 height: 48px;
104 border-radius: var(--radius-sm);
105 border: 1px solid var(--color-border);
106}
107
108.inputs {
109 display: flex;
110 flex-wrap: wrap;
111 gap: var(--spacing-xs);
112 flex: 1;
113}
114
115.input-group {
116 display: flex;
117 align-items: center;
118 gap: 2px;
119}
120
121.input-group label {
122 color: var(--color-text);
123 min-width: 14px;
124}
125
126.input-group input {
127 width: 40px;
128 padding: 2px 4px;
129 border: 1px solid var(--color-border);
130 border-radius: var(--radius-sm);
131 font-size: inherit;
132 background: var(--bg-surface);
133 color: var(--color-text);
134}
135
136.input-group.hex input {
137 width: 70px;
138}
139
140.input-group input:focus {
141 outline: none;
142 border-color: var(--color-primary);
143}
144
145.presets {
146 display: flex;
147 flex-wrap: wrap;
148 gap: var(--spacing-xs);
149 margin-bottom: var(--spacing-sm);
150}
151
152.preset-swatch {
153 width: 20px;
154 height: 20px;
155 border-radius: var(--radius-sm);
156 border: 1px solid var(--color-border);
157 cursor: pointer;
158 transition: transform var(--transition-fast);
159}
160
161.preset-swatch:hover {
162 transform: scale(1.1);
163 border-color: var(--color-primary);
164}
165
166.buttons {
167 display: flex;
168 justify-content: flex-end;
169 gap: var(--spacing-sm);
170}
171
172.btn {
173 padding: var(--spacing-xs) var(--spacing-md);
174 border-radius: var(--radius-sm);
175 border: 1px solid var(--color-border);
176 background: var(--bg-surface);
177 color: var(--color-text);
178 cursor: pointer;
179 font-size: inherit;
180}
181
182.btn:hover {
183 background: var(--bg-hover);
184}
185
186.btn.primary {
187 background: var(--color-primary);
188 color: var(--color-text-on-header);
189 border-color: var(--color-primary);
190}
191
192.btn.primary:hover {
193 filter: brightness(0.9);
194}