euv_ui/style/class/identity/
fn.rs

1use super::*;
2
3class! {
4    pub c_euv_avatar {
5        display: "flex";
6        align-items: "center";
7        justify-content: "center";
8        flex-shrink: "0";
9        width: "40px";
10        height: "40px";
11        box-sizing: "border-box";
12        border: format!("1px solid {}", var!(border));
13        border-radius: "0px";
14        background: var!(accent-muted);
15        color: var!(foreground);
16        font-size: var!(font-sm);
17        font-weight: "600";
18        line-height: "1";
19        text-align: "center";
20        overflow: "hidden";
21        user-select: "none";
22        -webkit-user-select: "none";
23    }
24
25    pub c_euv_avatar_small {
26        display: "flex";
27        align-items: "center";
28        justify-content: "center";
29        flex-shrink: "0";
30        width: "24px";
31        height: "24px";
32        box-sizing: "border-box";
33        border: format!("1px solid {}", var!(border));
34        border-radius: "0px";
35        background: var!(accent-muted);
36        color: var!(foreground);
37        font-size: var!(font-xs);
38        font-weight: "600";
39        line-height: "1";
40        text-align: "center";
41        overflow: "hidden";
42        user-select: "none";
43        -webkit-user-select: "none";
44    }
45
46    pub c_euv_avatar_medium {
47        display: "flex";
48        align-items: "center";
49        justify-content: "center";
50        flex-shrink: "0";
51        width: "32px";
52        height: "32px";
53        box-sizing: "border-box";
54        border: format!("1px solid {}", var!(border));
55        border-radius: "0px";
56        background: var!(accent-muted);
57        color: var!(foreground);
58        font-size: var!(font-sm);
59        font-weight: "600";
60        line-height: "1";
61        text-align: "center";
62        overflow: "hidden";
63        user-select: "none";
64        -webkit-user-select: "none";
65    }
66
67    pub c_euv_avatar_large {
68        display: "flex";
69        align-items: "center";
70        justify-content: "center";
71        flex-shrink: "0";
72        width: "40px";
73        height: "40px";
74        box-sizing: "border-box";
75        border: format!("1px solid {}", var!(border));
76        border-radius: "0px";
77        background: var!(accent-muted);
78        color: var!(foreground);
79        font-size: var!(font-lg);
80        font-weight: "600";
81        line-height: "1";
82        text-align: "center";
83        overflow: "hidden";
84        user-select: "none";
85        -webkit-user-select: "none";
86    }
87
88    pub c_euv_avatar_square {
89        border-radius: "50%";
90    }
91
92    pub c_euv_icon {
93        display: "inline-flex";
94        align-items: "center";
95        justify-content: "center";
96        color: "inherit";
97        line-height: "1";
98        flex-shrink: "0";
99        user-select: "none";
100        -webkit-user-select: "none";
101    }
102
103    pub c_euv_icon_label {
104        display: "inline-flex";
105        align-items: "center";
106        justify-content: "center";
107        color: "inherit";
108        font-size: var!(font-sm);
109        font-weight: "500";
110        line-height: "1";
111        flex-shrink: "0";
112    }
113
114    pub c_euv_space {
115        display: "block";
116    }
117
118    pub c_euv_panel {
119        display: "flex";
120        flex-direction: "column";
121        gap: var!(gap-element);
122        width: "100%";
123        box-sizing: "border-box";
124    }
125
126    pub c_euv_panel_plain {
127        display: "flex";
128        flex-direction: "column";
129        gap: var!(gap-element);
130        width: "100%";
131        box-sizing: "border-box";
132        border: "none";
133        background: "transparent";
134    }
135
136    pub c_euv_panel_bordered {
137        display: "flex";
138        flex-direction: "column";
139        gap: var!(gap-element);
140        width: "100%";
141        box-sizing: "border-box";
142        padding: var!(space-lg);
143        border: format!("1px solid {}", var!(border));
144        background: var!(background);
145    }
146
147    pub c_euv_panel_dashed {
148        display: "flex";
149        flex-direction: "column";
150        gap: var!(gap-element);
151        width: "100%";
152        box-sizing: "border-box";
153        padding: var!(space-lg);
154        border: format!("1px dashed {}", var!(border));
155        background: var!(background);
156    }
157
158    pub c_euv_panel_header {
159        display: "flex";
160        align-items: "center";
161        justify-content: "space-between";
162        gap: var!(space-sm);
163        width: "100%";
164    }
165
166    pub c_euv_panel_title {
167        font-size: var!(font-lg);
168        font-weight: "600";
169        color: var!(foreground);
170        margin: "0px";
171    }
172
173    pub c_euv_panel_subtitle {
174        font-size: var!(font-sm);
175        color: var!(muted-foreground);
176        margin: "0px";
177    }
178
179    pub c_euv_panel_body {
180        display: "flex";
181        flex-direction: "column";
182        gap: var!(gap-element);
183        font-size: var!(font-base);
184        color: var!(foreground);
185    }
186
187    pub c_euv_rating {
188        position: "relative";
189        display: "inline-flex";
190        align-items: "center";
191        gap: var!(space-2xs);
192        font-size: var!(font-lg);
193        line-height: "1";
194        user-select: "none";
195        -webkit-user-select: "none";
196    }
197
198    pub c_euv_rating_star {
199        font-size: var!(font-lg);
200        line-height: "1";
201        color: var!(muted-foreground);
202    }
203
204    pub c_euv_rating_fill {
205        position: "absolute";
206        left: "0px";
207        top: "0px";
208        display: "flex";
209        align-items: "center";
210        gap: var!(space-2xs);
211        overflow: "hidden";
212        white-space: "nowrap";
213        font-size: var!(font-lg);
214        line-height: "1";
215        color: var!(accent);
216        pointer-events: "none";
217    }
218
219    // ═══════════════════════════════════════════════════════════════════════════
220    // Global Utilities
221    // ═══════════════════════════════════════════════════════════════════════════
222
223    // Dev-only readouts produced by `euv_debug`. The base wrapper
224    // establishes the inline-flex layout so the label and the value
225    // share a baseline; the `code` / `pre` value elements apply
226    // monospace font and wrap behaviour for the two modes
227    // (`expanded: false` = single-line `code`, `expanded: true` =
228    // multi-line `pre`).
229    pub c_debug {
230        display: "flex";
231        flex-direction: "row";
232        align-items: "baseline";
233        gap: var!(space-sm);
234        padding: var!(space-xs);
235        border: format!("1px dashed {}", var!(accent-muted));
236        border-radius: var!(radius-sm);
237        background: var!(surface-muted);
238        font-family: "ui-monospace, SFMono-Regular, monospace";
239        font-size: var!(font-sm);
240        color: var!(foreground);
241        margin: format!("{} 0px", var!(space-xs));
242    }
243
244    pub c_debug_label {
245        font-weight: "600";
246        color: var!(accent);
247        flex-shrink: "0";
248    }
249
250    pub c_debug_value {
251        font-family: "ui-monospace, SFMono-Regular, monospace";
252        color: var!(foreground);
253        margin: "0px";
254    }
255}
euv_ui/style/class/identity/fn.rs

euv_ui/style/class/identity/
fn.rs
