euv_ui/style/class/data/
fn.rs1use super::*;
2
3class! {
4 pub(crate) c_euv_table {
5 width: "100%";
6 border-collapse: "collapse";
7 table-layout: "auto";
8 font-size: var!(font-base);
9 color: var!(foreground);
10 overflow-x: "auto";
11 display: "block";
12 @media ((max-width: 767px)) {
13 overflow-x: "auto";
14 }
15 }
16
17 pub(crate) c_euv_table_head {
18 font-size: var!(font-xs);
19 font-weight: "600";
20 letter-spacing: "0.04em";
21 text-transform: "uppercase";
22 }
23
24 pub(crate) c_euv_table_body {
25 font-size: var!(font-base);
26 }
27
28 pub(crate) c_euv_table_row {
29 border-bottom: format!("1px dashed {}", var!(border));
30 }
31
32 pub(crate) c_euv_table_row_zebra {
33 border-bottom: format!("1px dashed {}", var!(border));
34 background: var!(accent-muted);
35 }
36
37 pub(crate) c_euv_table_cell {
38 padding: format!("{} {}", var!(space-md), var!(space-lg));
39 text-align: "left";
40 vertical-align: "middle";
41 white-space: "nowrap";
42 }
43
44 pub(crate) c_euv_table_cell_center {
45 padding: format!("{} {}", var!(space-md), var!(space-lg));
46 text-align: "center";
47 vertical-align: "middle";
48 white-space: "nowrap";
49 }
50
51 pub(crate) c_euv_table_cell_right {
52 padding: format!("{} {}", var!(space-md), var!(space-lg));
53 text-align: "right";
54 vertical-align: "middle";
55 white-space: "nowrap";
56 }
57
58 pub(crate) c_euv_table_header_cell {
59 padding: format!("{} {}", var!(space-md), var!(space-lg));
60 text-align: "left";
61 vertical-align: "middle";
62 white-space: "nowrap";
63 font-size: var!(font-xs);
64 font-weight: "600";
65 letter-spacing: "0.04em";
66 text-transform: "uppercase";
67 border-bottom: format!("1px solid {}", var!(border));
68 }
69
70 pub(crate) c_euv_table_caption {
71 caption-side: "bottom";
72 padding-top: var!(space-sm);
73 font-size: var!(font-sm);
74 color: var!(muted-foreground);
75 text-align: "left";
76 }
77
78 pub(crate) c_euv_stat {
79 display: "flex";
80 flex-direction: "column";
81 gap: var!(space-2xs);
82 padding: var!(space-lg);
83 border: format!("1px dashed {}", var!(border));
84 }
85
86 pub(crate) c_euv_stat_icon {
87 display: "flex";
88 align-items: "center";
89 justify-content: "center";
90 font-size: var!(font-2xl);
91 line-height: "1";
92 color: var!(foreground);
93 flex-shrink: "0";
94 }
95
96 pub(crate) c_euv_stat_value {
97 font-size: var!(font-2xl);
98 font-weight: "700";
99 color: var!(accent);
100 line-height: "1.1";
101 font-family: "ui-monospace, monospace";
102 }
103
104 pub(crate) c_euv_stat_label {
105 font-size: var!(font-sm);
106 color: var!(muted-foreground);
107 }
108
109 pub(crate) c_euv_stat_hint {
110 font-size: var!(font-xs);
111 color: var!(muted-foreground);
112 }
113
114 pub(crate) c_euv_steps {
115 display: "flex";
116 flex-direction: "row";
117 align-items: "flex-start";
118 gap: var!(space-lg);
119 width: "100%";
120 @media ((max-width: 767px)) {
121 flex-direction: "column";
122 gap: var!(space-md);
123 }
124 }
125
126 pub(crate) c_euv_step {
127 display: "flex";
128 flex-direction: "row";
129 align-items: "flex-start";
130 gap: var!(space-sm);
131 flex: "1";
132 min-width: "0";
133 font-size: var!(font-base);
134 color: var!(muted-foreground);
135 @media ((max-width: 767px)) {
136 width: "100%";
137 }
138 }
139
140 pub(crate) c_euv_step_active {
141 display: "flex";
142 flex-direction: "row";
143 align-items: "flex-start";
144 gap: var!(space-sm);
145 flex: "1";
146 min-width: "0";
147 font-size: var!(font-base);
148 color: var!(foreground);
149 @media ((max-width: 767px)) {
150 width: "100%";
151 }
152 }
153
154 pub(crate) c_euv_step_done {
155 display: "flex";
156 flex-direction: "row";
157 align-items: "flex-start";
158 gap: var!(space-sm);
159 flex: "1";
160 min-width: "0";
161 font-size: var!(font-base);
162 color: var!(foreground);
163 @media ((max-width: 767px)) {
164 width: "100%";
165 }
166 }
167
168 pub(crate) c_euv_step_marker {
169 display: "flex";
170 align-items: "center";
171 justify-content: "center";
172 width: "24px";
173 height: "24px";
174 flex-shrink: "0";
175 box-sizing: "border-box";
176 border-radius: "50%";
177 border: format!("1px dashed {}", var!(border));
178 background: var!(background);
179 color: var!(muted-foreground);
180 font-size: var!(font-xs);
181 font-weight: "600";
182 line-height: "1";
183 }
184
185 pub(crate) c_euv_step_title {
186 font-size: var!(font-base);
187 font-weight: "500";
188 color: var!(foreground);
189 margin: "0px";
190 }
191
192 pub(crate) c_euv_step_desc {
193 font-size: var!(font-sm);
194 color: var!(muted-foreground);
195 margin: "0px";
196 }
197
198 pub(crate) c_euv_step_line {
199 flex: "1";
200 height: "0px";
201 align-self: "center";
202 border: "none";
203 border-top: format!("1px dashed {}", var!(border));
204 min-width: var!(space-lg);
205 @media ((max-width: 767px)) {
206 display: "none";
207 }
208 }
209
210 pub(crate) c_euv_timeline {
211 display: "flex";
212 flex-direction: "column";
213 gap: var!(space-lg);
214 width: "100%";
215 }
216
217 pub(crate) c_euv_timeline_item {
218 position: "relative";
219 display: "flex";
220 flex-direction: "row";
221 align-items: "flex-start";
222 gap: var!(space-md);
223 padding-left: var!(space-lg);
224 }
225
226 pub(crate) c_euv_timeline_marker {
227 position: "absolute";
228 left: "0px";
229 top: "0px";
230 display: "flex";
231 align-items: "center";
232 justify-content: "center";
233 width: "10px";
234 height: "10px";
235 box-sizing: "border-box";
236 border-radius: "50%";
237 border: format!("1px solid {}", var!(accent));
238 background: var!(background);
239 }
240
241 pub(crate) c_euv_timeline_content {
242 display: "flex";
243 flex-direction: "column";
244 gap: var!(space-2xs);
245 flex: "1";
246 min-width: "0";
247 }
248
249 pub(crate) c_euv_timeline_title {
250 font-size: var!(font-base);
251 font-weight: "600";
252 color: var!(foreground);
253 margin: "0px";
254 }
255
256 pub(crate) c_euv_timeline_desc {
257 font-size: var!(font-sm);
258 color: var!(foreground);
259 margin: "0px";
260 }
261
262 pub(crate) c_euv_timeline_time {
263 font-size: var!(font-xs);
264 color: var!(muted-foreground);
265 font-family: "ui-monospace, monospace";
266 }
267
268 pub(crate) c_euv_timeline_line {
269 position: "absolute";
270 left: "4px";
271 top: "12px";
272 bottom: format!("-{}", var!(space-lg));
273 width: "0px";
274 border: "none";
275 border-left: format!("1px solid {}", var!(border));
276 }
277
278 pub(crate) c_euv_skeleton {
279 display: "block";
280 width: "100%";
281 height: "16px";
282 border-radius: "0px";
283 border: format!("1px dashed {}", var!(border));
284 background: var!(accent-muted);
285 animation: format!("euv-pulse 1.5s {} infinite", var!(ease-in-out));
286 }
287
288 pub(crate) c_euv_skeleton_line {
289 display: "block";
290 width: "100%";
291 height: "12px";
292 border-radius: "0px";
293 border: format!("1px dashed {}", var!(border));
294 background: var!(accent-muted);
295 animation: format!("euv-pulse 1.5s {} infinite", var!(ease-in-out));
296 }
297
298 pub c_virtual_list_status {
303 display: "flex";
304 gap: var!(gap-component);
305 padding: format!("{} 0px", var!(gap-component));
306 flex-wrap: "nowrap";
307 overflow: "hidden";
308 text-overflow: "ellipsis";
309 white-space: "nowrap";
310 @media ((max-width: 767px)) {
311 gap: var!(gap-component-mobile);
312 }
313 }
314
315 pub c_virtual_list_status_item {
316 font-size: var!(font-base);
317 color: "inherit";
318 overflow: "hidden";
319 text-overflow: "ellipsis";
320 white-space: "nowrap";
321 }
322
323 pub c_virtual_list_status_value {
324 font-weight: "700";
325 color: var!(accent);
326 font-family: "ui-monospace, monospace";
327 }
328
329 pub(crate) c_virtual_list_container {
330 flex: "1";
331 height: "666px";
332 max-height: "666px";
333 overflow-y: "auto";
334 }
335
336 pub c_virtual_list_card {
337 flex: "1";
338 padding: var!(space-xl);
339 color: var!(foreground);
340 display: "flex";
341 flex-direction: "column";
342 @media ((max-width: 767px)) {
343 padding: var!(space-lg);
344 }
345 }
346
347 pub c_virtual_list_row {
348 display: "flex";
349 align-items: "center";
350 gap: var!(space-lg);
351 height: "100%";
352 box-sizing: "border-box";
353 }
354
355 pub c_virtual_list_row_index {
356 min-width: "36px";
357 font-size: var!(font-sm);
358 font-weight: "600";
359 color: var!(accent);
360 font-family: "ui-monospace, monospace";
361 flex-shrink: "0";
362 display: "flex";
363 align-items: "center";
364 }
365
366 pub c_virtual_list_row_label {
367 font-size: var!(font-base);
368 font-weight: "500";
369 color: "inherit";
370 min-width: "120px";
371 flex-shrink: "0";
372 overflow: "hidden";
373 text-overflow: "ellipsis";
374 white-space: "nowrap";
375 display: "flex";
376 align-items: "center";
377 }
378
379 pub c_virtual_list_row_description {
380 font-size: var!(font-base);
381 color: "inherit";
382 opacity: "1";
383 overflow: "hidden";
384 text-overflow: "ellipsis";
385 white-space: "nowrap";
386 flex: "1";
387 display: "flex";
388 align-items: "center";
389 }
390
391 pub c_net_messages_empty {
396 color: "inherit";
397 opacity: "1";
398 padding: var!(space-xl);
399 text-align: "center";
400 font-size: var!(font-base);
401 }
402
403 pub c_net_messages_list {
404 display: "flex";
405 flex-direction: "column";
406 gap: var!(space-xs);
407 }
408
409 pub c_net_message_item {
410 display: "flex";
411 align-items: "baseline";
412 gap: var!(gap-element);
413 justify-content: "space-between";
414 }
415
416 pub c_net_message_index {
417 color: var!(accent);
418 font-size: var!(font-sm);
419 font-weight: "600";
420 white-space: "nowrap";
421 flex-shrink: "0";
422 }
423
424 pub c_net_message_data {
425 color: "inherit";
426 font-size: var!(font-base);
427 word-break: "break-all";
428 overflow-wrap: "break-word";
429 flex: "1";
430 min-width: "0";
431 }
432
433 pub c_ws_message_input {
438 width: "100%";
439 flex: "1";
440 height: "42px";
441 padding: format!("0px {}", var!(space-lg));
442 color: var!(foreground);
443 border: format!("1px solid {}", var!(border));
444 font-size: var!(font-base);
445 line-height: "normal";
446 box-sizing: "border-box";
447 outline: "none";
448 appearance: "none";
449 -webkit-appearance: "none";
450 -moz-appearance: "none";
451 vertical-align: "middle";
452 :hover {
453 border-color: var!(accent);
454 background: var!(accent-muted);
455 }
456 :focus {
457 outline: "none";
458 border-color: var!(accent);
459 background: var!(accent-muted);
460 }
461 }
462
463 pub c_ws_message_time {
464 color: var!(foreground);
465 font-size: var!(font-sm);
466 white-space: "nowrap";
467 flex-shrink: "0";
468 margin-left: "auto";
469 }
470}