euv_ui/style/class/overlay/
fn.rs1use super::*;
2
3class! {
4 pub c_euv_tooltip {
5 position: "relative";
6 display: "inline-flex";
7 align-items: "center";
8 }
9
10 pub c_euv_tooltip_bubble {
11 position: "absolute";
12 z-index: "100";
13 padding: format!("{} {}", var!(space-xs), var!(space-sm));
14 box-sizing: "border-box";
15 border: format!("1px solid {}", var!(border));
16 border-radius: "0px";
17 background: var!(accent);
18 color: var!(text-on-accent);
19 font-size: var!(font-xs);
20 font-weight: "500";
21 line-height: "1.3";
22 white-space: "nowrap";
23 opacity: "0";
24 visibility: "hidden";
25 pointer-events: "none";
26 transition: format!("opacity {} {}", var!(duration-fast), var!(ease-out));
27 }
28
29 pub c_euv_tooltip_bubble_top {
30 position: "absolute";
31 z-index: "100";
32 padding: format!("{} {}", var!(space-xs), var!(space-sm));
33 box-sizing: "border-box";
34 border: format!("1px solid {}", var!(border));
35 border-radius: "0px";
36 background: var!(accent);
37 color: var!(text-on-accent);
38 font-size: var!(font-xs);
39 font-weight: "500";
40 line-height: "1.3";
41 white-space: "nowrap";
42 opacity: "0";
43 visibility: "hidden";
44 pointer-events: "none";
45 bottom: "calc(100% + 8px)";
46 left: "50%";
47 transform: "translateX(-50%)";
48 transition: format!("opacity {} {}", var!(duration-fast), var!(ease-out));
49 }
50
51 pub c_euv_tooltip_bubble_bottom {
52 position: "absolute";
53 z-index: "100";
54 padding: format!("{} {}", var!(space-xs), var!(space-sm));
55 box-sizing: "border-box";
56 border: format!("1px solid {}", var!(border));
57 border-radius: "0px";
58 background: var!(accent);
59 color: var!(text-on-accent);
60 font-size: var!(font-xs);
61 font-weight: "500";
62 line-height: "1.3";
63 white-space: "nowrap";
64 opacity: "0";
65 visibility: "hidden";
66 pointer-events: "none";
67 top: "calc(100% + 8px)";
68 left: "50%";
69 transform: "translateX(-50%)";
70 transition: format!("opacity {} {}", var!(duration-fast), var!(ease-out));
71 }
72
73 pub c_euv_tooltip_bubble_left {
74 position: "absolute";
75 z-index: "100";
76 padding: format!("{} {}", var!(space-xs), var!(space-sm));
77 box-sizing: "border-box";
78 border: format!("1px solid {}", var!(border));
79 border-radius: "0px";
80 background: var!(accent);
81 color: var!(text-on-accent);
82 font-size: var!(font-xs);
83 font-weight: "500";
84 line-height: "1.3";
85 white-space: "nowrap";
86 opacity: "0";
87 visibility: "hidden";
88 pointer-events: "none";
89 top: "50%";
90 right: "calc(100% + 8px)";
91 transform: "translateY(-50%)";
92 transition: format!("opacity {} {}", var!(duration-fast), var!(ease-out));
93 }
94
95 pub c_euv_tooltip_bubble_right {
96 position: "absolute";
97 z-index: "100";
98 padding: format!("{} {}", var!(space-xs), var!(space-sm));
99 box-sizing: "border-box";
100 border: format!("1px solid {}", var!(border));
101 border-radius: "0px";
102 background: var!(accent);
103 color: var!(text-on-accent);
104 font-size: var!(font-xs);
105 font-weight: "500";
106 line-height: "1.3";
107 white-space: "nowrap";
108 opacity: "0";
109 visibility: "hidden";
110 pointer-events: "none";
111 top: "50%";
112 left: "calc(100% + 8px)";
113 transform: "translateY(-50%)";
114 transition: format!("opacity {} {}", var!(duration-fast), var!(ease-out));
115 }
116
117 pub c_euv_popover {
118 position: "relative";
119 display: "inline-flex";
120 align-items: "center";
121 }
122
123 pub c_euv_popover_body {
124 position: "absolute";
125 z-index: "100";
126 min-width: "200px";
127 box-sizing: "border-box";
128 border-radius: "0px";
129 background: var!(background);
130 color: var!(foreground);
131 font-size: var!(font-base);
132 transition: format!("opacity {} {}, visibility {} {}", var!(duration-overlay), var!(ease-out), var!(duration-overlay), var!(ease-out));
133 }
134
135 pub c_euv_popover_body_open {
136 position: "absolute";
137 z-index: "100";
138 min-width: "200px";
139 box-sizing: "border-box";
140 border: format!("1px solid {}", var!(border));
141 box-shadow: var!(shadow-sm);
142 border-radius: "0px";
143 background: var!(background);
144 color: var!(foreground);
145 font-size: var!(font-base);
146 opacity: "1";
147 visibility: "visible";
148 pointer-events: "auto";
149 transition: format!("opacity {} {}, visibility {} {}", var!(duration-overlay), var!(ease-out), var!(duration-overlay), var!(ease-out));
150 }
151
152 pub c_euv_popover_body_closed {
153 position: "absolute";
154 z-index: "100";
155 min-width: "200px";
156 box-sizing: "border-box";
157 border: format!("1px dashed {}", var!(border));
158 border-radius: "0px";
159 background: var!(background);
160 color: var!(foreground);
161 font-size: var!(font-base);
162 opacity: "0";
163 visibility: "hidden";
164 pointer-events: "none";
165 transition: format!("opacity {} {}, visibility {} {}", var!(duration-overlay), var!(ease-out), var!(duration-overlay), var!(ease-out));
166 }
167
168 pub c_euv_popover_header {
169 display: "flex";
170 align-items: "center";
171 justify-content: "space-between";
172 gap: var!(space-sm);
173 padding: format!("{} {}", var!(space-sm), var!(space-md));
174 border-bottom: format!("1px dashed {}", var!(border));
175 }
176
177 pub c_euv_popover_title {
178 font-size: var!(font-base);
179 font-weight: "600";
180 color: var!(foreground);
181 margin: "0px";
182 }
183
184 pub c_euv_calendar {
185 display: "flex";
186 flex-direction: "column";
187 gap: var!(space-md);
188 width: "100%";
189 box-sizing: "border-box";
190 padding: var!(space-md);
191 border: format!("1px solid {}", var!(border));
192 background: var!(background);
193 }
194
195 pub c_euv_calendar_header {
196 display: "flex";
197 align-items: "center";
198 justify-content: "space-between";
199 gap: var!(space-sm);
200 }
201
202 pub c_euv_calendar_title {
203 font-size: var!(font-base);
204 font-weight: "600";
205 color: var!(foreground);
206 margin: "0px";
207 }
208
209 pub c_euv_calendar_nav {
210 display: "flex";
211 align-items: "center";
212 gap: var!(space-xs);
213 }
214
215 pub c_euv_calendar_weekdays {
216 display: "grid";
217 grid-template-columns: "repeat(7, 1fr)";
218 gap: "0px";
219 width: "100%";
220 }
221
222 pub c_euv_calendar_weekday {
223 display: "flex";
224 align-items: "center";
225 justify-content: "center";
226 min-height: "24px";
227 font-size: var!(font-xs);
228 font-weight: "600";
229 color: var!(muted-foreground);
230 border-bottom: format!("1px dashed {}", var!(border));
231 }
232
233 pub c_euv_calendar_grid {
234 display: "grid";
235 grid-template-columns: "repeat(7, 1fr)";
236 gap: "0px";
237 width: "100%";
238 }
239
240 pub c_euv_calendar_day {
241 display: "flex";
242 align-items: "center";
243 justify-content: "center";
244 min-height: "36px";
245 box-sizing: "border-box";
246 font-size: var!(font-base);
247 font-weight: "500";
248 color: var!(foreground);
249 background: var!(background);
250 border: "1px solid transparent";
251 border-radius: "0px";
252 cursor: "pointer";
253 touch-action: "manipulation";
254 user-select: "none";
255 -webkit-user-select: "none";
256 :hover {
257 background: var!(accent-muted);
258 color: var!(accent);
259 }
260 }
261
262 pub c_euv_calendar_day_muted {
263 display: "flex";
264 align-items: "center";
265 justify-content: "center";
266 min-height: "36px";
267 box-sizing: "border-box";
268 font-size: var!(font-base);
269 font-weight: "400";
270 color: var!(muted-foreground);
271 background: var!(background);
272 border: "1px dashed transparent";
273 border-radius: "0px";
274 cursor: "pointer";
275 touch-action: "manipulation";
276 user-select: "none";
277 -webkit-user-select: "none";
278 }
279
280 pub c_euv_calendar_day_today {
281 display: "flex";
282 align-items: "center";
283 justify-content: "center";
284 min-height: "36px";
285 box-sizing: "border-box";
286 font-size: var!(font-base);
287 font-weight: "700";
288 color: var!(foreground);
289 background: var!(background);
290 border: format!("2px solid {}", var!(accent));
291 border-radius: "0px";
292 cursor: "pointer";
293 touch-action: "manipulation";
294 user-select: "none";
295 -webkit-user-select: "none";
296 :hover {
297 background: var!(accent-muted);
298 color: var!(accent);
299 }
300 }
301
302 pub c_euv_calendar_day_selected {
303 display: "flex";
304 align-items: "center";
305 justify-content: "center";
306 min-height: "36px";
307 box-sizing: "border-box";
308 font-size: var!(font-base);
309 font-weight: "600";
310 color: var!(text-on-accent);
311 background: var!(accent);
312 border: format!("2px solid {}", var!(accent));
313 border-radius: "0px";
314 cursor: "pointer";
315 touch-action: "manipulation";
316 user-select: "none";
317 -webkit-user-select: "none";
318 }
319
320 pub c_euv_upload {
321 display: "flex";
322 flex-direction: "column";
323 gap: var!(space-md);
324 width: "100%";
325 }
326
327 pub c_euv_upload_input {
328 position: "absolute";
329 width: "1px";
330 height: "1px";
331 opacity: "0";
332 pointer-events: "none";
333 margin: "0px";
334 padding: "0px";
335 border: "none";
336 outline: "none";
337 }
338
339 pub c_euv_upload_drop_active {
340 display: "flex";
341 flex-direction: "column";
342 align-items: "center";
343 justify-content: "center";
344 gap: var!(space-sm);
345 width: "100%";
346 min-height: var!(space-7xl);
347 box-sizing: "border-box";
348 padding: var!(space-2xl);
349 border: format!("2px solid {}", var!(accent));
350 background: var!(accent-muted);
351 color: var!(accent);
352 font-size: var!(font-base);
353 text-align: "center";
354 cursor: "pointer";
355 touch-action: "manipulation";
356 user-select: "none";
357 -webkit-user-select: "none";
358 @media ((max-width: 767px)) {
359 padding: var!(space-lg);
360 }
361 }
362
363 pub c_euv_upload_list {
364 display: "flex";
365 flex-direction: "column";
366 gap: var!(space-sm);
367 width: "100%";
368 }
369
370 pub c_euv_upload_file {
371 display: "flex";
372 align-items: "center";
373 justify-content: "space-between";
374 gap: var!(space-sm);
375 width: "100%";
376 min-height: var!(min-height-base);
377 box-sizing: "border-box";
378 padding: format!("{} {}", var!(space-sm), var!(space-md));
379 border: format!("1px dashed {}", var!(border));
380 }
381
382 pub c_euv_upload_file_name {
383 font-size: var!(font-sm);
384 font-weight: "500";
385 color: var!(foreground);
386 overflow: "hidden";
387 text-overflow: "ellipsis";
388 white-space: "nowrap";
389 min-width: "0px";
390 }
391
392 pub c_euv_upload_file_size {
393 font-size: var!(font-xs);
394 color: var!(muted-foreground);
395 font-family: "ui-monospace, monospace";
396 white-space: "nowrap";
397 flex-shrink: "0";
398 }
399
400 pub c_euv_upload_file_status_pending {
401 display: "flex";
402 align-items: "center";
403 gap: var!(space-xs);
404 font-size: var!(font-xs);
405 font-weight: "400";
406 color: var!(muted-foreground);
407 border: format!("1px dashed {}", var!(border));
408 padding: "0px";
409 white-space: "nowrap";
410 flex-shrink: "0";
411 }
412
413 pub c_euv_upload_file_status_uploading {
414 display: "flex";
415 align-items: "center";
416 gap: var!(space-xs);
417 font-size: var!(font-xs);
418 font-weight: "500";
419 color: var!(foreground);
420 border: format!("1px solid {}", var!(border));
421 padding: "0px";
422 white-space: "nowrap";
423 flex-shrink: "0";
424 }
425
426 pub c_euv_upload_file_status_done {
427 display: "flex";
428 align-items: "center";
429 gap: var!(space-xs);
430 font-size: var!(font-xs);
431 font-weight: "600";
432 color: var!(accent);
433 border: format!("2px solid {}", var!(accent));
434 padding: "0px";
435 white-space: "nowrap";
436 flex-shrink: "0";
437 }
438
439 pub c_euv_upload_file_status_failed {
440 display: "flex";
441 align-items: "center";
442 gap: var!(space-xs);
443 font-size: var!(font-xs);
444 font-weight: "700";
445 color: var!(muted-foreground);
446 border: format!("1px dashed {}", var!(foreground));
447 padding: "0px";
448 text-decoration: "line-through";
449 white-space: "nowrap";
450 flex-shrink: "0";
451 }
452
453 pub c_euv_feature_grid {
454 display: "grid";
455 grid-template-columns: "repeat(auto-fit, minmax(220px, 1fr))";
456 gap: var!(space-md);
457 width: "100%";
458 @media ((max-width: 767px)) {
459 grid-template-columns: "1fr";
460 }
461 }
462
463 pub c_euv_feature_card {
464 display: "flex";
465 flex-direction: "column";
466 gap: var!(space-sm);
467 padding: var!(space-lg);
468 overflow: "hidden";
469 box-sizing: "border-box";
470 border: format!("1px dashed {}", var!(border));
471 }
472
473 pub c_euv_feature_header {
474 display: "flex";
475 align-items: "center";
476 gap: var!(space-sm);
477 }
478
479 pub c_euv_feature_icon {
480 display: "flex";
481 align-items: "center";
482 justify-content: "center";
483 font-size: var!(font-2xl);
484 line-height: "1";
485 color: var!(foreground);
486 flex-shrink: "0";
487 }
488
489 pub c_euv_feature_name {
490 font-size: var!(font-lg);
491 font-weight: "600";
492 color: var!(foreground);
493 margin: "0px";
494 overflow: "hidden";
495 text-overflow: "ellipsis";
496 white-space: "nowrap";
497 }
498
499 pub c_euv_feature_desc {
500 font-size: var!(font-sm);
501 color: var!(foreground);
502 margin: "0px";
503 }
504}