mates-css 0.1.0 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +23 -8
- package/demo.html +60 -6
- package/mates.css +153 -69
- package/mates.min.css +1 -1
- package/package.json +14 -5
- package/LICENSE +0 -21
package/README.md
CHANGED
|
@@ -55,11 +55,24 @@ Everything is a `--m-*` CSS variable. Override on `:root` to rebrand:
|
|
|
55
55
|
|
|
56
56
|
Semantic on-colors: `--m-on-primary`, `--m-on-success`, `--m-on-warning`, `--m-on-danger` flip per theme (white ink in light, dark ink in dark) so fills always stay readable.
|
|
57
57
|
|
|
58
|
+
## Zero-class styling
|
|
59
|
+
|
|
60
|
+
`<button>`, `<input>`, `<select>`, `<textarea>`, and checkboxes/radios are styled with no classes at all:
|
|
61
|
+
|
|
62
|
+
```html
|
|
63
|
+
<button>Test</button> <!-- looks like a default btn -->
|
|
64
|
+
<button class="btn-primary">Go</button> <!-- variant class on the bare tag -->
|
|
65
|
+
<input type="text" placeholder="…">
|
|
66
|
+
<input type="checkbox"> Remember me
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
Classes like `.btn` exist to extend the same styling to non-button elements (`<a class="btn">`), and variant classes (`btn-primary`, `input-error`, …) work on both bare tags and classed elements.
|
|
70
|
+
|
|
58
71
|
## Components
|
|
59
72
|
|
|
60
73
|
| Class | Notes |
|
|
61
74
|
|---|---|
|
|
62
|
-
| `.btn` + `.btn-primary/dark/light/success/warning/danger/outline/ghost/link` | hover + darker active states |
|
|
75
|
+
| `.btn` (or bare `<button>`) + `.btn-primary/dark/light/success/warning/danger/outline/ghost/link` | hover + darker active states |
|
|
63
76
|
| `.btn-elevated` | big resting shadow that shrinks when pressed |
|
|
64
77
|
| `.btn-sm/lg/block`, `.btn-group`, `.btn-spin`, `.btn-close` | |
|
|
65
78
|
| `.tag` + `.tag-primary/success/warning/danger/soft/soft-success/soft-danger/rounded` | `.tag-x` removable dot |
|
|
@@ -82,10 +95,12 @@ Semantic on-colors: `--m-on-primary`, `--m-on-success`, `--m-on-warning`, `--m-o
|
|
|
82
95
|
<div class="m-grid m-grid-cols-auto">…</div> <!-- responsive auto-fit -->
|
|
83
96
|
```
|
|
84
97
|
|
|
85
|
-
- **
|
|
86
|
-
- **
|
|
87
|
-
- **
|
|
88
|
-
- **
|
|
98
|
+
- **Directional stacks**: `.m-row`, `.m-col` — flex containers whose children share space equally; `.m-row-nowrap`, `.m-col-auto`
|
|
99
|
+
- **Flex**: `.m-flex`, `.m-inline-flex`, `.m-flex-col`, `.m-flex-wrap/nowrap`, `.m-flex-1`, `.m-flex-auto`, `.m-flex-none`, `.m-grow`, `.m-shrink-0`, `.m-order-first/last`
|
|
100
|
+
- **Alignment**: `.m-items-*` / short `.m-i-start/center/end/stretch/baseline`, `.m-self-*`, `.m-justify-*` / short `.m-j-start/center/end/between/around/evenly`
|
|
101
|
+
- **Grid**: `.m-grid` (cols-2/3/4), `.m-grid-auto` (responsive auto-fit), `.m-grid-cols-auto-sm/auto-lg`, `.m-grid-rows-2/3`, `.m-grid-flow-dense`, `.m-col-span-2/3/full`, `.m-row-span-2` (multi-col grids collapse to 1 column under 640px)
|
|
102
|
+
- **Gaps**: named `.m-gap-0/xs/sm/lg/xl` and **numeric px** `.m-gap-5/10/15/20/30/40`, plus directional `.m-gap-x-*` / `.m-gap-y-*` in both flavors; `.m-g-xs/sm/lg` set the stack gap variable
|
|
103
|
+
- **Helpers**: `.container`, `.c-1`–`.c-12` 12-col widths, `.divider`, `.center`, `.muted`, `.subtle`, `.overline`, `.mono`, `.hidden`
|
|
89
104
|
|
|
90
105
|
## Accessibility
|
|
91
106
|
|
|
@@ -97,9 +112,9 @@ Semantic on-colors: `--m-on-primary`, `--m-on-success`, `--m-on-warning`, `--m-o
|
|
|
97
112
|
|
|
98
113
|
| | |
|
|
99
114
|
|---|---|
|
|
100
|
-
| Raw |
|
|
101
|
-
| Minified |
|
|
102
|
-
| **Min + gzip** | **
|
|
115
|
+
| Raw | 28.2kb |
|
|
116
|
+
| Minified | 24.7kb |
|
|
117
|
+
| **Min + gzip** | **6.1kb** |
|
|
103
118
|
|
|
104
119
|
## Demo
|
|
105
120
|
|
package/demo.html
CHANGED
|
@@ -81,29 +81,39 @@
|
|
|
81
81
|
</div>
|
|
82
82
|
|
|
83
83
|
<h2 id="forms">Forms</h2>
|
|
84
|
-
<div class="row g-lg">
|
|
85
|
-
<div class="col c-6">
|
|
84
|
+
<div class="m-row m-g-lg">
|
|
85
|
+
<div class="m-col c-6">
|
|
86
86
|
<label class="label" for="t1">Text</label>
|
|
87
87
|
<input class="input" id="t1" type="text" placeholder="Placeholder…">
|
|
88
88
|
<span class="hint">Hint text under inputs.</span>
|
|
89
89
|
<label class="label" for="s1">Select</label>
|
|
90
90
|
<select class="input" id="s1"><option>Choose one…</option><option>Option A</option></select>
|
|
91
91
|
<label class="label" for="ok">States</label>
|
|
92
|
-
<input class="input
|
|
93
|
-
<
|
|
92
|
+
<input class="input-success" id="ok" type="text" value="Bare input + .input-success">
|
|
93
|
+
<div class="m-error">
|
|
94
|
+
<label class="label" for="err1" style="margin-top:.5rem;">Username</label>
|
|
95
|
+
<input id="err1" type="text" value="ada!!">
|
|
96
|
+
<span class="hint">Only letters and numbers allowed.</span>
|
|
97
|
+
</div>
|
|
98
|
+
<div class="m-valid">
|
|
99
|
+
<label class="label" for="ok1" style="margin-top:.5rem;">Email</label>
|
|
100
|
+
<input id="ok1" type="email" value="ada@example.com">
|
|
101
|
+
<span class="hint">Looks good.</span>
|
|
102
|
+
</div>
|
|
94
103
|
<label class="label">Checks & radios</label>
|
|
95
104
|
<label style="display:block;"><input type="checkbox" class="check" checked> Checked</label>
|
|
96
105
|
<label style="display:block;"><input type="checkbox" class="check"> Unchecked</label>
|
|
97
106
|
<label style="display:block;"><input type="radio" class="check" name="r" checked> Radio A</label>
|
|
98
107
|
</div>
|
|
99
|
-
<div class="col c-6">
|
|
108
|
+
<div class="m-col c-6">
|
|
100
109
|
<label class="label" for="ta">Textarea</label>
|
|
101
110
|
<textarea class="input" id="ta" placeholder="Write something…"></textarea>
|
|
102
111
|
<label class="label">Switch</label>
|
|
103
112
|
<label class="switch"><input type="checkbox" checked><i></i></label>
|
|
104
113
|
<label class="switch" style="margin-left:.75rem;"><input type="checkbox"><i></i></label>
|
|
105
114
|
<label class="label" for="rg">Range</label>
|
|
106
|
-
<input type="range"
|
|
115
|
+
<input type="range" id="rg" value="60">
|
|
116
|
+
<input type="range" value="35" style="--m-range-h: 12px; margin-top:.5rem;" aria-label="Thick track example">
|
|
107
117
|
<label class="label">Form group</label>
|
|
108
118
|
<div class="fgroup">
|
|
109
119
|
<span class="fgroup-label">https://</span>
|
|
@@ -238,6 +248,44 @@
|
|
|
238
248
|
</div>
|
|
239
249
|
</div>
|
|
240
250
|
|
|
251
|
+
<h2>Layout — m-row / m-col / flex & grid</h2>
|
|
252
|
+
<p class="subtle" style="font-size:.85rem;">m-row / m-col are directional flex containers; children share space equally.</p>
|
|
253
|
+
<div class="m-row m-g-sm" style="margin-bottom:1rem;">
|
|
254
|
+
<div class="alert" style="margin:0; text-align:center;">auto</div>
|
|
255
|
+
<div class="alert" style="margin:0; text-align:center;">auto</div>
|
|
256
|
+
<div class="alert" style="margin:0; text-align:center;">auto</div>
|
|
257
|
+
</div>
|
|
258
|
+
<div class="m-row m-gap-10" style="margin-bottom:1rem;">
|
|
259
|
+
<div class="alert m-col-span-full" style="margin:0;"></div>
|
|
260
|
+
<div class="c-4"><div class="alert" style="margin:0; text-align:center;">c-4</div></div>
|
|
261
|
+
<div class="c-8"><div class="alert" style="margin:0; text-align:center;">c-8</div></div>
|
|
262
|
+
</div>
|
|
263
|
+
<div class="m-col m-gap-10" style="max-width:16rem; margin-bottom:1rem;">
|
|
264
|
+
<button class="btn">Stacked</button>
|
|
265
|
+
<button class="btn btn-primary">In m-col</button>
|
|
266
|
+
<button class="btn">gap-10</button>
|
|
267
|
+
</div>
|
|
268
|
+
<div class="m-flex m-j-between m-i-center m-gap-10 m-flex-wrap" style="margin-bottom:1rem;">
|
|
269
|
+
<span class="tag tag-soft">m-j-between</span>
|
|
270
|
+
<span class="tag">m-i-center</span>
|
|
271
|
+
<span class="tag">m-gap-10</span>
|
|
272
|
+
</div>
|
|
273
|
+
<div class="m-flex m-i-end m-gap-15" style="margin-bottom:1rem;">
|
|
274
|
+
<button class="btn btn-sm">i-end</button>
|
|
275
|
+
<button class="btn">varied</button>
|
|
276
|
+
<button class="btn btn-lg">heights</button>
|
|
277
|
+
</div>
|
|
278
|
+
<div class="m-grid-auto m-gap-10" style="margin-bottom:1rem;">
|
|
279
|
+
<div class="alert" style="margin:0">auto-fit</div>
|
|
280
|
+
<div class="alert" style="margin:0">auto-fit</div>
|
|
281
|
+
<div class="alert" style="margin:0">auto-fit</div>
|
|
282
|
+
</div>
|
|
283
|
+
<div class="m-grid m-grid-cols-3 m-gap-10" style="margin-bottom:1rem;">
|
|
284
|
+
<div class="alert" style="margin:0">1</div>
|
|
285
|
+
<div class="alert alert-primary" style="margin:0">2</div>
|
|
286
|
+
<div class="alert" style="margin:0">3</div>
|
|
287
|
+
</div>
|
|
288
|
+
|
|
241
289
|
<h2>Spacing utilities</h2>
|
|
242
290
|
<div class="card" style="max-width:30rem;">
|
|
243
291
|
<div class="card-body">
|
|
@@ -279,6 +327,12 @@
|
|
|
279
327
|
else document.documentElement.setAttribute('data-theme', mode);
|
|
280
328
|
document.querySelector('.theme-toggle .btn').textContent = 'Theme: ' + mode;
|
|
281
329
|
}
|
|
330
|
+
// demo-only: live range fill (WebKit needs --m-range-progress; Firefox is native)
|
|
331
|
+
document.querySelectorAll('input[type="range"]').forEach(r => {
|
|
332
|
+
const update = () => r.style.setProperty('--m-range-progress', (r.value / (r.max || 100) * 100) + '%');
|
|
333
|
+
update();
|
|
334
|
+
r.addEventListener('input', update);
|
|
335
|
+
});
|
|
282
336
|
// demo-only: removable tags
|
|
283
337
|
document.querySelectorAll('.tag-x').forEach(x => x.addEventListener('click', e => e.target.closest('.tag').remove()));
|
|
284
338
|
</script>
|
package/mates.css
CHANGED
|
@@ -26,7 +26,13 @@
|
|
|
26
26
|
--m-success: #0e9f6e;
|
|
27
27
|
--m-warning: #c27803;
|
|
28
28
|
--m-danger: #e02424;
|
|
29
|
+
--m-on-success: #ffffff;
|
|
30
|
+
--m-on-warning: #ffffff;
|
|
31
|
+
--m-on-danger: #ffffff;
|
|
29
32
|
--m-shadow: 0 1px 2px rgba(16,24,40,.06), 0 4px 12px rgba(16,24,40,.07);
|
|
33
|
+
--m-elev: 0 1px 2px rgba(16,24,40,.10), 0 3px 8px rgba(16,24,40,.14), 0 8px 20px rgba(16,24,40,.10);
|
|
34
|
+
--m-elev-active: 0 1px 2px rgba(16,24,40,.16), 0 2px 4px rgba(16,24,40,.12);
|
|
35
|
+
--m-range-h: 6px;
|
|
30
36
|
--m-dur: .2s;
|
|
31
37
|
}
|
|
32
38
|
|
|
@@ -47,7 +53,12 @@
|
|
|
47
53
|
--m-success: #2ee06e;
|
|
48
54
|
--m-warning: #ffc757;
|
|
49
55
|
--m-danger: #ff5c5c;
|
|
56
|
+
--m-on-success: #14161a;
|
|
57
|
+
--m-on-warning: #14161a;
|
|
58
|
+
--m-on-danger: #14161a;
|
|
50
59
|
--m-shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.35);
|
|
60
|
+
--m-elev: 0 2px 4px rgba(0,0,0,.45), 0 8px 20px rgba(0,0,0,.35);
|
|
61
|
+
--m-elev-active: 0 1px 3px rgba(0,0,0,.5);
|
|
51
62
|
}
|
|
52
63
|
}
|
|
53
64
|
|
|
@@ -67,7 +78,12 @@
|
|
|
67
78
|
--m-success: #2ee06e;
|
|
68
79
|
--m-warning: #ffc757;
|
|
69
80
|
--m-danger: #ff5c5c;
|
|
81
|
+
--m-on-success: #14161a;
|
|
82
|
+
--m-on-warning: #14161a;
|
|
83
|
+
--m-on-danger: #14161a;
|
|
70
84
|
--m-shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.35);
|
|
85
|
+
--m-elev: 0 2px 4px rgba(0,0,0,.45), 0 8px 20px rgba(0,0,0,.35);
|
|
86
|
+
--m-elev-active: 0 1px 3px rgba(0,0,0,.5);
|
|
71
87
|
}
|
|
72
88
|
|
|
73
89
|
/* reset */
|
|
@@ -120,7 +136,8 @@ mark { padding: .1em .3em; border-radius: 3px; background: rgba(255,199,87,.35);
|
|
|
120
136
|
:focus { outline: none; }
|
|
121
137
|
:focus-visible { outline: 2px solid var(--m-primary); outline-offset: 2px; }
|
|
122
138
|
|
|
123
|
-
/* buttons */
|
|
139
|
+
/* buttons — <button> is styled by default; .btn applies the same to links/spans */
|
|
140
|
+
button,
|
|
124
141
|
.btn {
|
|
125
142
|
display: inline-flex;
|
|
126
143
|
align-items: center;
|
|
@@ -141,43 +158,56 @@ mark { padding: .1em .3em; border-radius: 3px; background: rgba(255,199,87,.35);
|
|
|
141
158
|
color: var(--m-fg);
|
|
142
159
|
transition: background var(--m-dur), color var(--m-dur), border-color var(--m-dur);
|
|
143
160
|
}
|
|
144
|
-
.btn:hover { background: var(--m-border); text-decoration: none; }
|
|
145
|
-
.btn:active { background: var(--m-border-2); }
|
|
146
|
-
.btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; pointer-events: none; }
|
|
161
|
+
button:hover, .btn:hover { background: var(--m-border); text-decoration: none; }
|
|
162
|
+
button:active, .btn:active { background: var(--m-border-2); }
|
|
163
|
+
button:disabled, .btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; pointer-events: none; }
|
|
147
164
|
|
|
148
165
|
.btn-primary { background: var(--m-primary); color: var(--m-on-primary); }
|
|
149
|
-
.btn-primary:hover { background: var(--m-primary-h); }
|
|
150
|
-
.btn-primary:active { background: var(--m-primary-a); }
|
|
166
|
+
button.btn-primary:hover, .btn.btn-primary:hover { background: var(--m-primary-h); }
|
|
167
|
+
button.btn-primary:active, .btn.btn-primary:active { background: var(--m-primary-a); }
|
|
151
168
|
.btn-dark { background: var(--m-fg); color: var(--m-bg); }
|
|
152
|
-
.btn-dark:hover { background: var(--m-fg); opacity: .88; }
|
|
153
|
-
.btn-dark:active { opacity: .75; }
|
|
169
|
+
button.btn-dark:hover, .btn.btn-dark:hover { background: var(--m-fg); opacity: .88; }
|
|
170
|
+
button.btn-dark:active, .btn.btn-dark:active { opacity: .75; }
|
|
154
171
|
.btn-light { background: var(--m-bg); color: var(--m-fg); border-color: var(--m-border); }
|
|
155
|
-
.btn-light:hover { background: var(--m-surface); }
|
|
156
|
-
.btn-light:active { background: var(--m-border); }
|
|
157
|
-
.btn-success { background: var(--m-success); color:
|
|
158
|
-
.btn-success:hover { filter: brightness(1.
|
|
159
|
-
.btn-success:active { filter: brightness(.92); }
|
|
160
|
-
.btn-danger { background: var(--m-danger); color:
|
|
161
|
-
.btn-danger:hover { filter: brightness(1.
|
|
162
|
-
.btn-danger:active { filter: brightness(.92); }
|
|
163
|
-
.btn-warning { background: var(--m-warning); color:
|
|
164
|
-
.btn-warning:hover { filter: brightness(1.
|
|
165
|
-
.btn-warning:active { filter: brightness(.92); }
|
|
172
|
+
button.btn-light:hover, .btn.btn-light:hover { background: var(--m-surface); }
|
|
173
|
+
button.btn-light:active, .btn.btn-light:active { background: var(--m-border); }
|
|
174
|
+
.btn-success { background: var(--m-success); color: var(--m-on-success); }
|
|
175
|
+
button.btn-success:hover, .btn.btn-success:hover { background: var(--m-success); filter: brightness(1.08); }
|
|
176
|
+
button.btn-success:active, .btn.btn-success:active { background: var(--m-success); filter: brightness(.92); }
|
|
177
|
+
.btn-danger { background: var(--m-danger); color: var(--m-on-danger); }
|
|
178
|
+
button.btn-danger:hover, .btn.btn-danger:hover { background: var(--m-danger); filter: brightness(1.08); }
|
|
179
|
+
button.btn-danger:active, .btn.btn-danger:active { background: var(--m-danger); filter: brightness(.92); }
|
|
180
|
+
.btn-warning { background: var(--m-warning); color: var(--m-on-warning); }
|
|
181
|
+
button.btn-warning:hover, .btn.btn-warning:hover { background: var(--m-warning); filter: brightness(1.08); }
|
|
182
|
+
button.btn-warning:active, .btn.btn-warning:active { background: var(--m-warning); filter: brightness(.92); }
|
|
166
183
|
.btn-outline { background: transparent; border-color: var(--m-border-2); color: var(--m-primary); }
|
|
167
|
-
.btn-outline:hover { background: var(--m-primary-soft); border-color: var(--m-primary); }
|
|
168
|
-
.btn-outline:active { background: var(--m-primary); color: var(--m-on-primary); }
|
|
184
|
+
button.btn-outline:hover, .btn.btn-outline:hover { background: var(--m-primary-soft); border-color: var(--m-primary); }
|
|
185
|
+
button.btn-outline:active, .btn.btn-outline:active { background: var(--m-primary); color: var(--m-on-primary); }
|
|
169
186
|
.btn-ghost { background: transparent; color: var(--m-fg-2); }
|
|
170
|
-
.btn-ghost:hover { background: var(--m-surface); color: var(--m-fg); }
|
|
171
|
-
.btn-ghost:active { background: var(--m-border); }
|
|
187
|
+
button.btn-ghost:hover, .btn.btn-ghost:hover { background: var(--m-surface); color: var(--m-fg); }
|
|
188
|
+
button.btn-ghost:active, .btn.btn-ghost:active { background: var(--m-border); }
|
|
172
189
|
.btn-link { background: transparent; color: var(--m-primary); padding-inline: .2em; }
|
|
173
|
-
.btn-link:hover { background: transparent; text-decoration: underline; }
|
|
190
|
+
button.btn-link:hover, .btn.btn-link:hover { background: transparent; text-decoration: underline; }
|
|
191
|
+
:where(button, .btn).btn-elevated {
|
|
192
|
+
box-shadow: var(--m-elev);
|
|
193
|
+
}
|
|
194
|
+
:where(button, .btn).btn-elevated:hover {
|
|
195
|
+
box-shadow: var(--m-elev);
|
|
196
|
+
filter: brightness(1.04);
|
|
197
|
+
}
|
|
198
|
+
:where(button, .btn).btn-elevated:active {
|
|
199
|
+
box-shadow: var(--m-elev-active);
|
|
200
|
+
}
|
|
201
|
+
:where(button, .btn).btn-elevated.btn-primary:hover { background: var(--m-primary-h); filter: none; }
|
|
202
|
+
:where(button, .btn).btn-elevated.btn-primary:active { background: var(--m-primary-a); }
|
|
203
|
+
|
|
174
204
|
.btn-sm { padding: .25em .7em; font-size: .72rem; }
|
|
175
205
|
.btn-lg { padding: .55em 1.3em; font-size: .92rem; }
|
|
176
206
|
.btn-block { display: flex; width: 100%; }
|
|
177
207
|
.btn-group { display: inline-flex; }
|
|
178
|
-
.btn-group .btn { border-radius: 0; margin-left: -1px; }
|
|
179
|
-
.btn-group .btn:first-child { border-radius: var(--m-r-sm) 0 0 var(--m-r-sm); margin-left: 0; }
|
|
180
|
-
.btn-group .btn:last-child { border-radius: 0 var(--m-r-sm) var(--m-r-sm) 0; }
|
|
208
|
+
.btn-group button, .btn-group .btn { border-radius: 0; margin-left: -1px; }
|
|
209
|
+
.btn-group button:first-child, .btn-group .btn:first-child { border-radius: var(--m-r-sm) 0 0 var(--m-r-sm); margin-left: 0; }
|
|
210
|
+
.btn-group button:last-child, .btn-group .btn:last-child { border-radius: 0 var(--m-r-sm) var(--m-r-sm) 0; }
|
|
181
211
|
|
|
182
212
|
.btn-spin::after {
|
|
183
213
|
content: "";
|
|
@@ -264,6 +294,32 @@ mark { padding: .1em .3em; border-radius: 3px; background: rgba(255,199,87,.35);
|
|
|
264
294
|
/* forms */
|
|
265
295
|
.label { display: block; font-weight: 700; font-size: .85rem; line-height: 1.4; margin: .8rem 0 .15rem; }
|
|
266
296
|
.hint { display: block; font-size: .78rem; color: var(--m-fg-3); margin-top: .25rem; }
|
|
297
|
+
|
|
298
|
+
/* validation: wrap a field in .m-error to color control + message */
|
|
299
|
+
.m-error .input,
|
|
300
|
+
.m-error input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
|
|
301
|
+
.m-error select,
|
|
302
|
+
.m-error textarea {
|
|
303
|
+
border-color: var(--m-danger);
|
|
304
|
+
}
|
|
305
|
+
.m-error .input:focus-visible,
|
|
306
|
+
.m-error input:focus-visible, .m-error select:focus-visible, .m-error textarea:focus-visible {
|
|
307
|
+
box-shadow: 0 0 0 3px color-mix(in srgb, var(--m-danger) 18%, transparent);
|
|
308
|
+
}
|
|
309
|
+
.m-error .hint { color: var(--m-danger); }
|
|
310
|
+
.m-error .label { color: var(--m-danger); }
|
|
311
|
+
|
|
312
|
+
/* success variant for the wrapper */
|
|
313
|
+
.m-valid .input,
|
|
314
|
+
.m-valid input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
|
|
315
|
+
.m-valid select,
|
|
316
|
+
.m-valid textarea {
|
|
317
|
+
border-color: var(--m-success);
|
|
318
|
+
}
|
|
319
|
+
.m-valid .hint { color: var(--m-success); }
|
|
320
|
+
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
|
|
321
|
+
select,
|
|
322
|
+
textarea),
|
|
267
323
|
.input {
|
|
268
324
|
width: 100%;
|
|
269
325
|
padding: .45em .8em;
|
|
@@ -273,14 +329,21 @@ mark { padding: .1em .3em; border-radius: 3px; background: rgba(255,199,87,.35);
|
|
|
273
329
|
color: var(--m-fg);
|
|
274
330
|
transition: border-color var(--m-dur), box-shadow var(--m-dur);
|
|
275
331
|
}
|
|
276
|
-
|
|
277
|
-
.input:focus { border-color: var(--m-primary); }
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
332
|
+
::placeholder { color: var(--m-fg-3); }
|
|
333
|
+
:where(input, select, textarea):focus, .input:focus { border-color: var(--m-primary); }
|
|
334
|
+
:where(input, select, textarea):focus-visible {
|
|
335
|
+
outline: none;
|
|
336
|
+
box-shadow: 0 0 0 3px var(--m-primary-soft);
|
|
337
|
+
}
|
|
338
|
+
input:disabled, select:disabled, textarea:disabled, .input:disabled {
|
|
339
|
+
background: var(--m-surface);
|
|
340
|
+
color: var(--m-fg-3);
|
|
341
|
+
cursor: not-allowed;
|
|
342
|
+
}
|
|
343
|
+
.input-success, input.input-success, select.input-success, textarea.input-success { border-color: var(--m-success); }
|
|
344
|
+
.input-error, input.input-error, select.input-error, textarea.input-error { border-color: var(--m-danger); }
|
|
345
|
+
textarea { min-height: 6rem; resize: vertical; }
|
|
346
|
+
select {
|
|
284
347
|
appearance: none;
|
|
285
348
|
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23667189' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E");
|
|
286
349
|
background-repeat: no-repeat;
|
|
@@ -288,13 +351,15 @@ select.input {
|
|
|
288
351
|
background-size: .5em .6em;
|
|
289
352
|
padding-right: 2.2em;
|
|
290
353
|
}
|
|
291
|
-
input[type="search"]
|
|
354
|
+
input[type="search"] {
|
|
292
355
|
padding-left: 2.1em;
|
|
293
356
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%238a939f'%3E%3Cpath d='M14.9 14.4l-.5.5a.4.4 0 0 1-.5 0L9.5 10.5A5.3 5.3 0 1 1 11.6 6.3a5.3 5.3 0 0 1-1.1 3.2l4.4 4.4a.4.4 0 0 1 0 .5zM6.3 2.4a3.9 3.9 0 1 0 3.9 3.9 3.9 3.9 0 0 0-3.9-3.9z'/%3E%3C/svg%3E");
|
|
294
357
|
background-repeat: no-repeat;
|
|
295
358
|
background-position: left .6em center;
|
|
296
359
|
}
|
|
297
360
|
|
|
361
|
+
input[type="checkbox"],
|
|
362
|
+
input[type="radio"],
|
|
298
363
|
.check {
|
|
299
364
|
appearance: none;
|
|
300
365
|
width: 1.1em;
|
|
@@ -307,23 +372,23 @@ input[type="search"].input {
|
|
|
307
372
|
cursor: pointer;
|
|
308
373
|
transition: background var(--m-dur), border-color var(--m-dur);
|
|
309
374
|
}
|
|
310
|
-
input[type="checkbox"]
|
|
311
|
-
input[type="radio"]
|
|
312
|
-
.check:hover { border-color: var(--m-fg-3); }
|
|
313
|
-
.check:checked { background: var(--m-primary); border-color: var(--m-primary); }
|
|
314
|
-
input[type="checkbox"]
|
|
375
|
+
input[type="checkbox"] { border-radius: 4px; }
|
|
376
|
+
input[type="radio"] { border-radius: 50%; }
|
|
377
|
+
input[type="checkbox"]:hover, input[type="radio"]:hover, .check:hover { border-color: var(--m-fg-3); }
|
|
378
|
+
input[type="checkbox"]:checked, input[type="radio"]:checked, .check:checked { background: var(--m-primary); border-color: var(--m-primary); }
|
|
379
|
+
input[type="checkbox"]:checked {
|
|
315
380
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E");
|
|
316
381
|
background-size: .72em;
|
|
317
382
|
background-position: center;
|
|
318
383
|
background-repeat: no-repeat;
|
|
319
384
|
}
|
|
320
|
-
input[type="radio"]
|
|
385
|
+
input[type="radio"]:checked {
|
|
321
386
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3.2' fill='%23ffffff'/%3E%3C/svg%3E");
|
|
322
387
|
background-size: 1em;
|
|
323
388
|
background-position: center;
|
|
324
389
|
background-repeat: no-repeat;
|
|
325
390
|
}
|
|
326
|
-
.check:disabled { opacity: .4; cursor: not-allowed; }
|
|
391
|
+
input[type="checkbox"]:disabled, input[type="radio"]:disabled, .check:disabled { opacity: .4; cursor: not-allowed; }
|
|
327
392
|
|
|
328
393
|
.switch { position: relative; display: inline-block; width: 2.6em; height: 1.45em; flex-shrink: 0; }
|
|
329
394
|
.switch input { opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; position: absolute; z-index: 1; }
|
|
@@ -345,21 +410,33 @@ input[type="radio"].check:checked {
|
|
|
345
410
|
.switch input:checked + i::after { left: calc(100% - 1.05em - 3px); }
|
|
346
411
|
.switch input:focus-visible + i { outline: 2px solid var(--m-primary); outline-offset: 2px; }
|
|
347
412
|
|
|
348
|
-
input[type="range"]
|
|
349
|
-
|
|
350
|
-
|
|
413
|
+
input[type="range"] {
|
|
414
|
+
appearance: none;
|
|
415
|
+
width: 100%;
|
|
416
|
+
height: 1.4em;
|
|
417
|
+
background: transparent;
|
|
418
|
+
cursor: pointer;
|
|
419
|
+
/* filled portion: set --m-range-progress (0-100) from JS on input; default 50% */
|
|
420
|
+
--m-range-progress: 50%;
|
|
421
|
+
background: linear-gradient(to right,
|
|
422
|
+
var(--m-primary) var(--m-range-progress),
|
|
423
|
+
var(--m-border) var(--m-range-progress)) no-repeat center / 100% var(--m-range-h);
|
|
424
|
+
}
|
|
425
|
+
input[type="range"]::-webkit-slider-runnable-track { height: var(--m-range-h); border-radius: var(--m-r-full); background: transparent; }
|
|
426
|
+
input[type="range"]::-webkit-slider-thumb {
|
|
351
427
|
appearance: none;
|
|
352
428
|
width: 1em;
|
|
353
429
|
height: 1em;
|
|
354
|
-
margin-top: calc(
|
|
430
|
+
margin-top: calc(var(--m-range-h) / 2 - .5em);
|
|
355
431
|
border-radius: 50%;
|
|
356
432
|
background: var(--m-primary);
|
|
357
433
|
border: 2px solid var(--m-bg);
|
|
358
434
|
box-shadow: 0 0 0 1px var(--m-border-2);
|
|
359
435
|
}
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
input[type="
|
|
436
|
+
input[type="range"]::-moz-range-track { height: var(--m-range-h); border-radius: var(--m-r-full); background: var(--m-border); }
|
|
437
|
+
input[type="range"]::-moz-range-progress { height: var(--m-range-h); border-radius: var(--m-r-full); background: var(--m-primary); }
|
|
438
|
+
input[type="range"]::-moz-range-thumb { width: 1em; height: 1em; border-radius: 50%; background: var(--m-primary); border: 2px solid var(--m-bg); }
|
|
439
|
+
input[type="color"] { width: 2.8em; height: 2.2em; padding: .15em; cursor: pointer; }
|
|
363
440
|
|
|
364
441
|
.fgroup { display: flex; margin: .5rem 0; }
|
|
365
442
|
.fgroup > * { border-radius: 0; }
|
|
@@ -601,11 +678,16 @@ progress.progress::-moz-progress-bar { background: var(--m-primary); border-radi
|
|
|
601
678
|
|
|
602
679
|
/* layout */
|
|
603
680
|
.container { max-width: 72rem; margin-inline: auto; padding-inline: 1.25rem; }
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
.row
|
|
607
|
-
.
|
|
608
|
-
.
|
|
681
|
+
|
|
682
|
+
/* flex direction rows/cols: children share space equally */
|
|
683
|
+
.m-row { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--m-gap, 1rem); align-items: center; }
|
|
684
|
+
.m-col { display: flex; flex-direction: column; gap: var(--m-gap, 1rem); }
|
|
685
|
+
.m-row > * { flex: 1 1 0; min-width: 0; }
|
|
686
|
+
.m-row > .m-col-auto { flex: 0 0 auto; width: auto; }
|
|
687
|
+
.m-row-nowrap { flex-wrap: nowrap; }
|
|
688
|
+
|
|
689
|
+
/* grid */
|
|
690
|
+
.m-grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--m-gap, 1rem); }
|
|
609
691
|
|
|
610
692
|
.c-1{flex:0 0 8.3333%;max-width:8.3333%}.c-2{flex:0 0 16.6667%;max-width:16.6667%}
|
|
611
693
|
.c-3{flex:0 0 25%;max-width:25%}.c-4{flex:0 0 33.3333%;max-width:33.3333%}
|
|
@@ -614,9 +696,7 @@ progress.progress::-moz-progress-bar { background: var(--m-primary); border-radi
|
|
|
614
696
|
.c-9{flex:0 0 75%;max-width:75%}.c-10{flex:0 0 83.3333%;max-width:83.3333%}
|
|
615
697
|
.c-11{flex:0 0 91.6667%;max-width:91.6667%}.c-12{flex:0 0 100%;max-width:100%}
|
|
616
698
|
|
|
617
|
-
.g-0{--m-gap:0}.g-xs{--m-gap:.4rem}.g-sm{--m-gap:.65rem}.g-lg{--m-gap:1.75rem}
|
|
618
|
-
.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-stretch{align-items:stretch}
|
|
619
|
-
.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}
|
|
699
|
+
.m-g-0{--m-gap:0}.m-g-xs{--m-gap:.4rem}.m-g-sm{--m-gap:.65rem}.m-g-lg{--m-gap:1.75rem}
|
|
620
700
|
.center{text-align:center}
|
|
621
701
|
.divider{display:flex;align-items:center;gap:1rem;margin:1.5em 0;color:var(--m-fg-3);font-size:.8rem}
|
|
622
702
|
.divider::before,.divider::after{content:"";flex:1;border-top:1px solid var(--m-border)}
|
|
@@ -657,20 +737,21 @@ progress.progress::-moz-progress-bar { background: var(--m-primary); border-radi
|
|
|
657
737
|
.m-grow{flex-grow:1}
|
|
658
738
|
.m-shrink-0{flex-shrink:0}
|
|
659
739
|
.m-basis-0{flex-basis:0}
|
|
660
|
-
.m-items-start{align-items:flex-start}
|
|
661
|
-
.m-items-center{align-items:center}
|
|
662
|
-
.m-items-end{align-items:flex-end}
|
|
663
|
-
.m-items-stretch{align-items:stretch}
|
|
664
|
-
.m-items-baseline{align-items:baseline}
|
|
740
|
+
.m-items-start,.m-i-start{align-items:flex-start}
|
|
741
|
+
.m-items-center,.m-i-center{align-items:center}
|
|
742
|
+
.m-items-end,.m-i-end{align-items:flex-end}
|
|
743
|
+
.m-items-stretch,.m-i-stretch{align-items:stretch}
|
|
744
|
+
.m-items-baseline,.m-i-baseline{align-items:baseline}
|
|
665
745
|
.m-self-start{align-self:flex-start}
|
|
666
746
|
.m-self-center{align-self:center}
|
|
667
747
|
.m-self-end{align-self:flex-end}
|
|
668
|
-
.m-justify-start{justify-content:flex-start}
|
|
669
|
-
.m-justify-center{justify-content:center}
|
|
670
|
-
.m-justify-end{justify-content:flex-end}
|
|
671
|
-
.m-justify-between{justify-content:space-between}
|
|
672
|
-
.m-justify-around{justify-content:space-around}
|
|
673
|
-
.m-justify-evenly{justify-content:space-evenly}
|
|
748
|
+
.m-justify-start,.m-j-start{justify-content:flex-start}
|
|
749
|
+
.m-justify-center,.m-j-center{justify-content:center}
|
|
750
|
+
.m-justify-end,.m-j-end{justify-content:flex-end}
|
|
751
|
+
.m-justify-between,.m-j-between{justify-content:space-between}
|
|
752
|
+
.m-justify-around,.m-j-around{justify-content:space-around}
|
|
753
|
+
.m-justify-evenly,.m-j-evenly{justify-content:space-evenly}
|
|
754
|
+
.m-j-center-v{justify-content:center}
|
|
674
755
|
.m-content-start{align-content:flex-start}
|
|
675
756
|
.m-content-between{align-content:space-between}
|
|
676
757
|
.m-content-center{align-content:center}
|
|
@@ -684,8 +765,11 @@ progress.progress::-moz-progress-bar { background: var(--m-primary); border-radi
|
|
|
684
765
|
.m-gap{gap:1rem}
|
|
685
766
|
.m-gap-lg{gap:1.75rem}
|
|
686
767
|
.m-gap-xl{gap:2.5rem}
|
|
768
|
+
.m-gap-5{gap:5px}.m-gap-10{gap:10px}.m-gap-15{gap:15px}.m-gap-20{gap:20px}.m-gap-30{gap:30px}.m-gap-40{gap:40px}
|
|
687
769
|
.m-gap-x-0{column-gap:0}.m-gap-x-xs{column-gap:.4rem}.m-gap-x-sm{column-gap:.65rem}.m-gap-x{column-gap:1rem}.m-gap-x-lg{column-gap:1.75rem}
|
|
770
|
+
.m-gap-x-5{column-gap:5px}.m-gap-x-10{column-gap:10px}.m-gap-x-15{column-gap:15px}.m-gap-x-20{column-gap:20px}.m-gap-x-30{column-gap:30px}
|
|
688
771
|
.m-gap-y-0{row-gap:0}.m-gap-y-xs{row-gap:.4rem}.m-gap-y-sm{row-gap:.65rem}.m-gap-y{row-gap:1rem}.m-gap-y-lg{row-gap:1.75rem}
|
|
772
|
+
.m-gap-y-5{row-gap:5px}.m-gap-y-10{row-gap:10px}.m-gap-y-15{row-gap:15px}.m-gap-y-20{row-gap:20px}.m-gap-y-30{row-gap:30px}
|
|
689
773
|
|
|
690
774
|
/* grid utilities */
|
|
691
775
|
.m-grid{display:grid}
|
package/mates.min.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* Mates CSS v0.1.0 — a compact pure-CSS UI kit.
|
|
3
3
|
* No JS, no SCSS. MIT licensed.
|
|
4
|
-
*/:root{--m-font: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--m-font-head: Montserrat, system-ui, sans-serif;--m-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;--m-r: 8px;--m-r-sm: 5px;--m-r-full: 999px;--m-bg: #ffffff;--m-surface: #f6f7f9;--m-border: #e5e8ec;--m-border-2: #d0d5db;--m-fg: #14161a;--m-fg-2: #5a6472;--m-fg-3: #8a939f;--m-on-primary: #ffffff;--m-primary: #0172ad;--m-primary-h: #016091;--m-primary-a: #014e75;--m-primary-soft: rgba(1,114,173,.12);--m-success: #0e9f6e;--m-warning: #c27803;--m-danger: #e02424;--m-shadow: 0 1px 2px rgba(16,24,40,.06), 0 4px 12px rgba(16,24,40,.07);--m-dur: .2s}@media (prefers-color-scheme: dark){:root:not([data-theme=light]){--m-bg: #14161a;--m-surface: #1d2026;--m-border: #2c3138;--m-border-2: #3d434b;--m-fg: #e8eaed;--m-fg-2: #a8b0ba;--m-fg-3: #6f7780;--m-primary: #2fabdf;--m-primary-h: #45b9e6;--m-primary-a: #5ac3ed;--m-primary-soft: rgba(47,171,223,.16);--m-on-primary: #14161a;--m-success: #2ee06e;--m-warning: #ffc757;--m-danger: #ff5c5c;--m-shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.35)}}:root[data-theme=dark]{--m-bg: #14161a;--m-surface: #1d2026;--m-border: #2c3138;--m-border-2: #3d434b;--m-fg: #e8eaed;--m-fg-2: #a8b0ba;--m-fg-3: #6f7780;--m-primary: #2fabdf;--m-primary-h: #45b9e6;--m-primary-a: #5ac3ed;--m-primary-soft: rgba(47,171,223,.16);--m-on-primary: #14161a;--m-success: #2ee06e;--m-warning: #ffc757;--m-danger: #ff5c5c;--m-shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.35)}*,*:before,*:after{box-sizing:border-box}*{margin:0}body{font-family:var(--m-font);font-size:15px;line-height:1.6;color:var(--m-fg);background:var(--m-bg);-webkit-font-smoothing:antialiased}:root{color-scheme:light dark}:root[data-theme=dark]{color-scheme:dark}:root[data-theme=light]{color-scheme:light}img,svg,video{display:block;max-width:100%}input,button,select,textarea{font:inherit;color:inherit}h1,h2,h3,h4,h5,h6{font-family:var(--m-font-head);font-weight:600;line-height:1.3;letter-spacing:-.01em;margin:1.4em 0 .5em}h1{font-size:2rem}h2{font-size:1.55rem}h3{font-size:1.25rem}h4{font-size:1.1rem}h5{font-size:.95rem}h6{font-size:.78rem;text-transform:uppercase;letter-spacing:.07em;color:var(--m-fg-3)}p{margin:.6em 0}small{font-size:.84em;color:var(--m-fg-3)}a{color:var(--m-primary);text-decoration:none}a:hover{text-decoration:underline}hr{border:0;border-top:1px solid var(--m-border);margin:1.6em 0}blockquote{border-left:3px solid var(--m-border-2);background:var(--m-surface);border-radius:0 var(--m-r-sm) var(--m-r-sm) 0;padding:.7em 1.1em;margin:1em 0;color:var(--m-fg-2)}ul,ol{padding-left:1.4em}li{margin:.25em 0}li::marker{color:var(--m-fg-3)}kbd{font-family:var(--m-mono);font-size:.8em;padding:.15em .45em;border:1px solid var(--m-border);border-bottom-width:2px;border-radius:var(--m-r-sm);background:var(--m-surface)}mark{padding:.1em .3em;border-radius:3px;background:#ffc75759}::selection{background:var(--m-primary);color:var(--m-on-primary)}:focus{outline:none}:focus-visible{outline:2px solid var(--m-primary);outline-offset:2px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45em;padding:.38em .95em;border:1px solid transparent;border-radius:var(--m-r-sm);font-family:var(--m-font-head);font-size:.8rem;font-weight:600;letter-spacing:.02em;line-height:1.5;cursor:pointer;user-select:none;text-decoration:none;background:var(--m-surface);color:var(--m-fg);transition:background var(--m-dur),color var(--m-dur),border-color var(--m-dur)}.btn:hover{background:var(--m-border);text-decoration:none}.btn:active{background:var(--m-border-2)}.btn:disabled,.btn[disabled]{opacity:.5;cursor:not-allowed;pointer-events:none}.btn-primary{background:var(--m-primary);color:var(--m-on-primary)}.btn-primary:hover{background:var(--m-primary-h)}.btn-primary:active{background:var(--m-primary-a)}.btn-dark{background:var(--m-fg);color:var(--m-bg)}.btn-dark:hover{background:var(--m-fg);opacity:.88}.btn-dark:active{opacity:.75}.btn-light{background:var(--m-bg);color:var(--m-fg);border-color:var(--m-border)}.btn-light:hover{background:var(--m-surface)}.btn-light:active{background:var(--m-border)}.btn-success{background:var(--m-success);color:#fff}.btn-success:hover{filter:brightness(1.1)}.btn-success:active{filter:brightness(.92)}.btn-danger{background:var(--m-danger);color:#fff}.btn-danger:hover{filter:brightness(1.1)}.btn-danger:active{filter:brightness(.92)}.btn-warning{background:var(--m-warning);color:#fff}.btn-warning:hover{filter:brightness(1.1)}.btn-warning:active{filter:brightness(.92)}.btn-outline{background:transparent;border-color:var(--m-border-2);color:var(--m-primary)}.btn-outline:hover{background:var(--m-primary-soft);border-color:var(--m-primary)}.btn-outline:active{background:var(--m-primary);color:var(--m-on-primary)}.btn-ghost{background:transparent;color:var(--m-fg-2)}.btn-ghost:hover{background:var(--m-surface);color:var(--m-fg)}.btn-ghost:active{background:var(--m-border)}.btn-link{background:transparent;color:var(--m-primary);padding-inline:.2em}.btn-link:hover{background:transparent;text-decoration:underline}.btn-sm{padding:.25em .7em;font-size:.72rem}.btn-lg{padding:.55em 1.3em;font-size:.92rem}.btn-block{display:flex;width:100%}.btn-group{display:inline-flex}.btn-group .btn{border-radius:0;margin-left:-1px}.btn-group .btn:first-child{border-radius:var(--m-r-sm) 0 0 var(--m-r-sm);margin-left:0}.btn-group .btn:last-child{border-radius:0 var(--m-r-sm) var(--m-r-sm) 0}.btn-spin:after{content:"";width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-top-color:transparent;border-radius:50%;animation:m-spin .6s linear infinite}@keyframes m-spin{to{transform:rotate(360deg)}}.btn-close{width:20px;height:20px;min-width:0;padding:0;border:0;border-radius:var(--m-r-full);background:rgb(from currentColor r g b / .18);position:relative}.btn-close:before,.btn-close:after{content:"";position:absolute;left:50%;top:50%;width:50%;height:2px;background:currentColor;translate:-50% -50%;rotate:45deg}.btn-close:after{rotate:-45deg}.btn-close:hover{background:rgb(from currentColor r g b / .3)}.tag{display:inline-flex;align-items:center;gap:.35em;padding:.18em .7em;border-radius:var(--m-r-full);font-size:.78rem;font-weight:600;line-height:1.6;background:var(--m-surface);color:var(--m-fg-2);border:1px solid var(--m-border);white-space:nowrap}.tag-primary{background:var(--m-primary);border-color:var(--m-primary);color:var(--m-on-primary)}.tag-success{background:var(--m-success);border-color:var(--m-success);color:#fff}.tag-warning{background:var(--m-warning);border-color:var(--m-warning);color:#fff}.tag-danger{background:var(--m-danger);border-color:var(--m-danger);color:#fff}.tag-soft{background:var(--m-primary-soft);border-color:transparent;color:var(--m-primary)}.tag-soft-success{background:color-mix(in srgb,var(--m-success) 14%,transparent);border-color:transparent;color:var(--m-success)}.tag-soft-danger{background:color-mix(in srgb,var(--m-danger) 12%,transparent);border-color:transparent;color:var(--m-danger)}.tag-rounded{border-radius:6px}.tag-x{display:inline-block;width:1.1em;height:1.1em;border-radius:50%;background:rgb(from currentColor r g b / .2);position:relative;cursor:pointer}.tag-x:before,.tag-x:after{content:"";position:absolute;left:50%;top:50%;width:55%;height:1.5px;background:currentColor;translate:-50% -50%;rotate:45deg}.tag-x:after{rotate:-45deg}.tag-x:hover{background:rgb(from currentColor r g b / .4)}.label{display:block;font-weight:700;font-size:.85rem;line-height:1.4;margin:.8rem 0 .15rem}.hint{display:block;font-size:.78rem;color:var(--m-fg-3);margin-top:.25rem}.input{width:100%;padding:.45em .8em;background:var(--m-bg);border:1px solid var(--m-border-2);border-radius:var(--m-r-sm);color:var(--m-fg);transition:border-color var(--m-dur),box-shadow var(--m-dur)}.input::placeholder{color:var(--m-fg-3)}.input:focus{border-color:var(--m-primary)}.input:focus-visible{outline:none;box-shadow:0 0 0 3px var(--m-primary-soft)}.input:disabled{background:var(--m-surface);color:var(--m-fg-3);cursor:not-allowed}.input-success{border-color:var(--m-success)}.input-error{border-color:var(--m-danger)}textarea.input{min-height:6rem;resize:vertical}select.input{appearance:none;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23667189' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .8em center;background-size:.5em .6em;padding-right:2.2em}input[type=search].input{padding-left:2.1em;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%238a939f'%3E%3Cpath d='M14.9 14.4l-.5.5a.4.4 0 0 1-.5 0L9.5 10.5A5.3 5.3 0 1 1 11.6 6.3a5.3 5.3 0 0 1-1.1 3.2l4.4 4.4a.4.4 0 0 1 0 .5zM6.3 2.4a3.9 3.9 0 1 0 3.9 3.9 3.9 3.9 0 0 0-3.9-3.9z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:left .6em center}.check{appearance:none;width:1.1em;height:1.1em;margin:0 .45em 0 0;flex-shrink:0;vertical-align:-.18em;border:1.5px solid var(--m-border-2);background:var(--m-bg);cursor:pointer;transition:background var(--m-dur),border-color var(--m-dur)}input[type=checkbox].check{border-radius:4px}input[type=radio].check{border-radius:50%}.check:hover{border-color:var(--m-fg-3)}.check:checked{background:var(--m-primary);border-color:var(--m-primary)}input[type=checkbox].check:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E");background-size:.72em;background-position:center;background-repeat:no-repeat}input[type=radio].check:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3.2' fill='%23ffffff'/%3E%3C/svg%3E");background-size:1em;background-position:center;background-repeat:no-repeat}.check:disabled{opacity:.4;cursor:not-allowed}.switch{position:relative;display:inline-block;width:2.6em;height:1.45em;flex-shrink:0}.switch input{opacity:0;width:100%;height:100%;margin:0;cursor:pointer;position:absolute;z-index:1}.switch i{position:absolute;inset:0;border-radius:var(--m-r-full);background:var(--m-border-2);transition:background var(--m-dur);pointer-events:none}.switch i:after{content:"";position:absolute;left:3px;top:50%;translate:0 -50%;width:1.05em;height:1.05em;border-radius:50%;background:#fff;box-shadow:0 1px 3px #00000040;transition:left var(--m-dur)}.switch input:checked+i{background:var(--m-primary)}.switch input:checked+i:after{left:calc(100% - 1.05em - 3px)}.switch input:focus-visible+i{outline:2px solid var(--m-primary);outline-offset:2px}input[type=range].range{appearance:none;width:100%;height:1.4em;background:transparent;cursor:pointer}.range::-webkit-slider-runnable-track{height:4px;border-radius:var(--m-r-full);background:var(--m-border)}.range::-webkit-slider-thumb{appearance:none;width:1em;height:1em;margin-top:calc(2px - .5em);border-radius:50%;background:var(--m-primary);border:2px solid var(--m-bg);box-shadow:0 0 0 1px var(--m-border-2)}.range::-moz-range-track{height:4px;border-radius:var(--m-r-full);background:var(--m-border)}.range::-moz-range-thumb{width:1em;height:1em;border-radius:50%;background:var(--m-primary);border:2px solid var(--m-bg)}input[type=color].input{width:2.8em;height:2.2em;padding:.15em;cursor:pointer}.fgroup{display:flex;margin:.5rem 0}.fgroup>*{border-radius:0}.fgroup>:first-child{border-radius:var(--m-r-sm) 0 0 var(--m-r-sm)}.fgroup>:last-child{border-radius:0 var(--m-r-sm) var(--m-r-sm) 0}.fgroup>*+*{margin-left:-1px}.fgroup-label{display:inline-flex;align-items:center;padding:0 .8em;background:var(--m-surface);border:1px solid var(--m-border-2);color:var(--m-fg-2);font-size:.88rem;white-space:nowrap}.fgroup .btn{flex-shrink:0}.card{background:var(--m-bg);border:1px solid var(--m-border);border-radius:var(--m-r);box-shadow:var(--m-shadow);overflow:hidden}.card-body{padding:1rem 1.25rem}.card-title{font-size:1.08rem;margin:0 0 .2em}.card-sub{font-size:.85rem;color:var(--m-fg-3);margin:0}.card-bar{display:flex;align-items:center;gap:.5rem;padding:.8rem 1.25rem;border-top:1px solid var(--m-border);background:var(--m-surface)}.card-img{width:100%;display:block}.card-hover{transition:box-shadow var(--m-dur)}.card-hover:hover{box-shadow:0 2px 4px #10182814,0 10px 24px #1018281f}.table-wrap{overflow-x:auto}.table{width:100%;border-collapse:collapse;font-size:.92rem}.table th,.table td{padding:.55em .8em;text-align:left;border-bottom:1px solid var(--m-border)}.table thead th{font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--m-fg-3);background:var(--m-surface)}.table tbody tr{transition:background var(--m-dur)}.table tbody tr:hover{background:var(--m-surface)}.table tr.selected{background:var(--m-primary-soft)}.table.striped tbody tr:nth-child(2n){background:color-mix(in srgb,var(--m-surface) 55%,transparent)}.table.bordered th,.table.bordered td{border:1px solid var(--m-border)}.table caption{caption-side:bottom;padding:.5em 0;font-size:.8rem;color:var(--m-fg-3);text-align:left}.tabs{display:flex;gap:.25rem;padding:.25rem;background:var(--m-surface);border-radius:var(--m-r-sm);width:fit-content;max-width:100%}.tab{padding:.38em 1em;border:0;border-radius:calc(var(--m-r-sm) - 1px);background:transparent;color:var(--m-fg-3);font-weight:600;font-size:.88rem;cursor:pointer;transition:color var(--m-dur),background var(--m-dur)}.tab:hover{color:var(--m-fg)}.tab.selected{background:var(--m-bg);color:var(--m-fg);box-shadow:0 1px 3px #0000001f}.tabs-line{background:none;padding:0;border-radius:0;border-bottom:2px solid var(--m-border);width:auto}.tabs-line .tab{border-radius:0;margin-bottom:-2px;border-bottom:2px solid transparent}.tabs-line .tab.selected{background:transparent;box-shadow:none;color:var(--m-primary);border-bottom-color:var(--m-primary)}.toast{padding:.8rem 1.1rem;border-radius:var(--m-r-sm);background:var(--m-fg);color:var(--m-bg);box-shadow:var(--m-shadow);margin:.5rem 0}.toast-title{font-weight:700;margin:0 0 .15em}.toast p{margin:0;font-size:.88rem;opacity:.85}.toast-success{background:var(--m-success);color:#fff}.toast-danger{background:var(--m-danger);color:#fff}.toast-primary{background:var(--m-primary);color:var(--m-on-primary)}.alert{padding:.8rem 1.1rem;border:1px solid var(--m-border);border-left:3px solid var(--m-fg-3);border-radius:var(--m-r-sm);background:var(--m-surface);margin:.8rem 0}.alert p{margin:0}.alert-success{border-left-color:var(--m-success);background:color-mix(in srgb,var(--m-success) 10%,var(--m-bg))}.alert-warning{border-left-color:var(--m-warning);background:color-mix(in srgb,var(--m-warning) 12%,var(--m-bg))}.alert-danger{border-left-color:var(--m-danger);background:color-mix(in srgb,var(--m-danger) 10%,var(--m-bg))}.alert-primary{border-left-color:var(--m-primary);background:var(--m-primary-soft)}.tooltip{position:relative}.tooltip:after{content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);left:50%;translate:-50% 2px;padding:.3em .7em;border-radius:var(--m-r-sm);background:var(--m-fg);color:var(--m-bg);font-size:.72rem;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity var(--m-dur),translate var(--m-dur);z-index:50}.tooltip:hover:after{opacity:1;translate:-50% 0}.tooltip-b:after{bottom:auto;top:calc(100% + 6px);translate:-50% -2px}.tooltip-b:hover:after{translate:-50% 0}.tooltip-r:after{bottom:auto;top:50%;left:calc(100% + 6px);translate:-2px -50%}.tooltip-r:hover:after{translate:0 -50%}.tooltip-l:after{bottom:auto;top:50%;right:calc(100% + 6px);left:auto;translate:2px -50%}.tooltip-l:hover:after{translate:0 -50%}.modal-toggle{display:none}.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:1rem;visibility:hidden;opacity:0;transition:opacity var(--m-dur),visibility var(--m-dur);z-index:100}.modal-toggle:checked~.modal{visibility:visible;opacity:1}.modal-overlay{position:absolute;inset:0;background:#00000080}.modal-box{position:relative;width:min(28rem,100%);background:var(--m-bg);border:1px solid var(--m-border);border-radius:var(--m-r);box-shadow:var(--m-shadow)}.modal-head{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem .5rem}.modal-title{margin:0;font-size:1.1rem}.modal-foot{display:flex;justify-content:flex-end;gap:.5rem;padding:.75rem 1.25rem 1.1rem}.modal-box>.modal-body{padding:.25rem 1.25rem}details.acc{border:1px solid var(--m-border);border-radius:var(--m-r-sm);background:var(--m-bg);padding:.7em 1em;margin:.5em 0}details.acc summary{cursor:pointer;font-weight:700;list-style:none;display:flex;align-items:center;justify-content:space-between}details.acc summary::-webkit-details-marker{display:none}details.acc summary:after{content:"";width:.55em;height:.55em;border:2px solid var(--m-fg-3);border-top:0;border-left:0;rotate:45deg;transition:rotate var(--m-dur)}details.acc[open] summary:after{rotate:225deg}details.acc[open] summary{margin-bottom:.4em}.nav{display:flex;align-items:center;gap:1.25rem;padding:.6rem 1.1rem;background:var(--m-bg);border:1px solid var(--m-border);border-radius:var(--m-r);box-shadow:var(--m-shadow);flex-wrap:wrap}.nav-brand{font-family:var(--m-font-head);font-weight:700;font-size:1.02rem;color:var(--m-fg)}.nav a{color:var(--m-fg-3);font-weight:600;font-size:.9rem}.nav a:hover{color:var(--m-fg);text-decoration:none}.nav .selected{color:var(--m-fg)}.nav-space{flex:1}.avatar{display:inline-flex;align-items:center;justify-content:center;width:2.6em;height:2.6em;border-radius:50%;background:var(--m-primary-soft);color:var(--m-primary);font-weight:700;font-size:.85rem;overflow:hidden;flex-shrink:0}.avatar-sm{width:2em;height:2em;font-size:.7rem}.avatar-lg{width:3.4em;height:3.4em;font-size:1.05rem}progress.progress{appearance:none;width:100%;height:.5rem;border:0;overflow:hidden;border-radius:var(--m-r-full);background:var(--m-surface);display:block}progress.progress::-webkit-progress-bar{background:var(--m-surface)}progress.progress::-webkit-progress-value{background:var(--m-primary);border-radius:var(--m-r-full)}progress.progress::-moz-progress-bar{background:var(--m-primary);border-radius:var(--m-r-full)}.container{max-width:72rem;margin-inline:auto;padding-inline:1.25rem}.row{display:flex;flex-wrap:wrap;gap:var(--m-gap, 1rem);align-items:center}.col{display:flex;flex-direction:column;gap:var(--m-gap, 1rem)}.row>*{flex:1 1 0;min-width:0}.row>.col-auto{flex:0 0 auto;width:auto}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:var(--m-gap, 1rem)}.c-1{flex:0 0 8.3333%;max-width:8.3333%}.c-2{flex:0 0 16.6667%;max-width:16.6667%}.c-3{flex:0 0 25%;max-width:25%}.c-4{flex:0 0 33.3333%;max-width:33.3333%}.c-5{flex:0 0 41.6667%;max-width:41.6667%}.c-6{flex:0 0 50%;max-width:50%}.c-7{flex:0 0 58.3333%;max-width:58.3333%}.c-8{flex:0 0 66.6667%;max-width:66.6667%}.c-9{flex:0 0 75%;max-width:75%}.c-10{flex:0 0 83.3333%;max-width:83.3333%}.c-11{flex:0 0 91.6667%;max-width:91.6667%}.c-12{flex:0 0 100%;max-width:100%}.g-0{--m-gap:0}.g-xs{--m-gap:.4rem}.g-sm{--m-gap:.65rem}.g-lg{--m-gap:1.75rem}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-stretch{align-items:stretch}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.center{text-align:center}.divider{display:flex;align-items:center;gap:1rem;margin:1.5em 0;color:var(--m-fg-3);font-size:.8rem}.divider:before,.divider:after{content:"";flex:1;border-top:1px solid var(--m-border)}.m-0{margin:0}.m-5{margin:5px}.m-10{margin:10px}.m-15{margin:15px}.m-20{margin:20px}.m-30{margin:30px}.m-40{margin:40px}.m-t-0{margin-top:0}.m-t-5{margin-top:5px}.m-t-10{margin-top:10px}.m-t-15{margin-top:15px}.m-t-20{margin-top:20px}.m-t-30{margin-top:30px}.m-t-40{margin-top:40px}.m-b-0{margin-bottom:0}.m-b-5{margin-bottom:5px}.m-b-10{margin-bottom:10px}.m-b-15{margin-bottom:15px}.m-b-20{margin-bottom:20px}.m-b-30{margin-bottom:30px}.m-b-40{margin-bottom:40px}.m-l-0{margin-left:0}.m-l-5{margin-left:5px}.m-l-10{margin-left:10px}.m-l-15{margin-left:15px}.m-l-20{margin-left:20px}.m-l-30{margin-left:30px}.m-l-40{margin-left:40px}.m-r-0{margin-right:0}.m-r-5{margin-right:5px}.m-r-10{margin-right:10px}.m-r-15{margin-right:15px}.m-r-20{margin-right:20px}.m-r-30{margin-right:30px}.m-r-40{margin-right:40px}.m-x-0{margin-left:0;margin-right:0}.m-x-5{margin-left:5px;margin-right:5px}.m-x-10{margin-left:10px;margin-right:10px}.m-x-15{margin-left:15px;margin-right:15px}.m-x-20{margin-left:20px;margin-right:20px}.m-x-auto{margin-left:auto;margin-right:auto}.m-y-0{margin-top:0;margin-bottom:0}.m-y-5{margin-top:5px;margin-bottom:5px}.m-y-10{margin-top:10px;margin-bottom:10px}.m-y-15{margin-top:15px;margin-bottom:15px}.m-y-20{margin-top:20px;margin-bottom:20px}.p-0{padding:0}.p-5{padding:5px}.p-10{padding:10px}.p-15{padding:15px}.p-20{padding:20px}.p-30{padding:30px}.p-40{padding:40px}.p-t-0{padding-top:0}.p-t-5{padding-top:5px}.p-t-10{padding-top:10px}.p-t-15{padding-top:15px}.p-t-20{padding-top:20px}.p-t-30{padding-top:30px}.p-b-0{padding-bottom:0}.p-b-5{padding-bottom:5px}.p-b-10{padding-bottom:10px}.p-b-15{padding-bottom:15px}.p-b-20{padding-bottom:20px}.p-b-30{padding-bottom:30px}.p-l-0{padding-left:0}.p-l-5{padding-left:5px}.p-l-10{padding-left:10px}.p-l-15{padding-left:15px}.p-l-20{padding-left:20px}.p-l-30{padding-left:30px}.p-r-0{padding-right:0}.p-r-5{padding-right:5px}.p-r-10{padding-right:10px}.p-r-15{padding-right:15px}.p-r-20{padding-right:20px}.p-r-30{padding-right:30px}.p-x-0{padding-left:0;padding-right:0}.p-x-5{padding-left:5px;padding-right:5px}.p-x-10{padding-left:10px;padding-right:10px}.p-x-15{padding-left:15px;padding-right:15px}.p-x-20{padding-left:20px;padding-right:20px}.p-y-0{padding-top:0;padding-bottom:0}.p-y-5{padding-top:5px;padding-bottom:5px}.p-y-10{padding-top:10px;padding-bottom:10px}.p-y-15{padding-top:15px;padding-bottom:15px}.p-y-20{padding-top:20px;padding-bottom:20px}.mono{font-family:var(--m-mono);font-size:.86em}.muted{color:var(--m-fg-2)}.subtle{color:var(--m-fg-3)}.overline{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--m-fg-3)}.hidden{display:none!important}.m-flex{display:flex}.m-inline-flex{display:inline-flex}.m-flex-row{flex-direction:row}.m-flex-col{flex-direction:column}.m-flex-wrap{flex-wrap:wrap}.m-flex-nowrap{flex-wrap:nowrap}.m-flex-1{flex:1 1 0%;min-width:0}.m-flex-auto{flex:1 1 auto}.m-flex-none{flex:none}.m-grow{flex-grow:1}.m-shrink-0{flex-shrink:0}.m-basis-0{flex-basis:0}.m-items-start{align-items:flex-start}.m-items-center{align-items:center}.m-items-end{align-items:flex-end}.m-items-stretch{align-items:stretch}.m-items-baseline{align-items:baseline}.m-self-start{align-self:flex-start}.m-self-center{align-self:center}.m-self-end{align-self:flex-end}.m-justify-start{justify-content:flex-start}.m-justify-center{justify-content:center}.m-justify-end{justify-content:flex-end}.m-justify-between{justify-content:space-between}.m-justify-around{justify-content:space-around}.m-justify-evenly{justify-content:space-evenly}.m-content-start{align-content:flex-start}.m-content-between{align-content:space-between}.m-content-center{align-content:center}.m-order-first{order:-1}.m-order-last{order:99}.m-gap-0{gap:0}.m-gap-xs{gap:.4rem}.m-gap-sm{gap:.65rem}.m-gap{gap:1rem}.m-gap-lg{gap:1.75rem}.m-gap-xl{gap:2.5rem}.m-gap-x-0{column-gap:0}.m-gap-x-xs{column-gap:.4rem}.m-gap-x-sm{column-gap:.65rem}.m-gap-x{column-gap:1rem}.m-gap-x-lg{column-gap:1.75rem}.m-gap-y-0{row-gap:0}.m-gap-y-xs{row-gap:.4rem}.m-gap-y-sm{row-gap:.65rem}.m-gap-y{row-gap:1rem}.m-gap-y-lg{row-gap:1.75rem}.m-grid{display:grid}.m-inline-grid{display:inline-grid}.m-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.m-grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.m-grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.m-grid-cols-auto{grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}.m-grid-cols-auto-sm{grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}.m-grid-cols-auto-lg{grid-template-columns:repeat(auto-fit,minmax(22rem,1fr))}.m-grid-rows-2{grid-template-rows:repeat(2,minmax(0,1fr))}.m-grid-rows-3{grid-template-rows:repeat(3,minmax(0,1fr))}.m-grid-flow-dense{grid-auto-flow:row dense}.m-col-span-2{grid-column:span 2/span 2}.m-col-span-3{grid-column:span 3/span 3}.m-col-span-full{grid-column:1/-1}.m-row-span-2{grid-row:span 2/span 2}@media (max-width:640px){.m-grid-cols-2,.m-grid-cols-3,.m-grid-cols-4{grid-template-columns:1fr}.m-col-span-2,.m-col-span-3{grid-column:auto}}
|
|
4
|
+
*/:root{--m-font: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--m-font-head: Montserrat, system-ui, sans-serif;--m-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;--m-r: 8px;--m-r-sm: 5px;--m-r-full: 999px;--m-bg: #ffffff;--m-surface: #f6f7f9;--m-border: #e5e8ec;--m-border-2: #d0d5db;--m-fg: #14161a;--m-fg-2: #5a6472;--m-fg-3: #8a939f;--m-on-primary: #ffffff;--m-primary: #0172ad;--m-primary-h: #016091;--m-primary-a: #014e75;--m-primary-soft: rgba(1,114,173,.12);--m-success: #0e9f6e;--m-warning: #c27803;--m-danger: #e02424;--m-on-success: #ffffff;--m-on-warning: #ffffff;--m-on-danger: #ffffff;--m-shadow: 0 1px 2px rgba(16,24,40,.06), 0 4px 12px rgba(16,24,40,.07);--m-elev: 0 1px 2px rgba(16,24,40,.1), 0 3px 8px rgba(16,24,40,.14), 0 8px 20px rgba(16,24,40,.1);--m-elev-active: 0 1px 2px rgba(16,24,40,.16), 0 2px 4px rgba(16,24,40,.12);--m-range-h: 6px;--m-dur: .2s}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--m-bg: #14161a;--m-surface: #1d2026;--m-border: #2c3138;--m-border-2: #3d434b;--m-fg: #e8eaed;--m-fg-2: #a8b0ba;--m-fg-3: #6f7780;--m-primary: #2fabdf;--m-primary-h: #45b9e6;--m-primary-a: #5ac3ed;--m-primary-soft: rgba(47,171,223,.16);--m-on-primary: #14161a;--m-success: #2ee06e;--m-warning: #ffc757;--m-danger: #ff5c5c;--m-on-success: #14161a;--m-on-warning: #14161a;--m-on-danger: #14161a;--m-shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.35);--m-elev: 0 2px 4px rgba(0,0,0,.45), 0 8px 20px rgba(0,0,0,.35);--m-elev-active: 0 1px 3px rgba(0,0,0,.5)}}:root[data-theme=dark]{--m-bg: #14161a;--m-surface: #1d2026;--m-border: #2c3138;--m-border-2: #3d434b;--m-fg: #e8eaed;--m-fg-2: #a8b0ba;--m-fg-3: #6f7780;--m-primary: #2fabdf;--m-primary-h: #45b9e6;--m-primary-a: #5ac3ed;--m-primary-soft: rgba(47,171,223,.16);--m-on-primary: #14161a;--m-success: #2ee06e;--m-warning: #ffc757;--m-danger: #ff5c5c;--m-on-success: #14161a;--m-on-warning: #14161a;--m-on-danger: #14161a;--m-shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.35);--m-elev: 0 2px 4px rgba(0,0,0,.45), 0 8px 20px rgba(0,0,0,.35);--m-elev-active: 0 1px 3px rgba(0,0,0,.5)}*,*:before,*:after{box-sizing:border-box}*{margin:0}body{font-family:var(--m-font);font-size:15px;line-height:1.6;color:var(--m-fg);background:var(--m-bg);-webkit-font-smoothing:antialiased}:root{color-scheme:light dark}:root[data-theme=dark]{color-scheme:dark}:root[data-theme=light]{color-scheme:light}img,svg,video{display:block;max-width:100%}input,button,select,textarea{font:inherit;color:inherit}h1,h2,h3,h4,h5,h6{font-family:var(--m-font-head);font-weight:600;line-height:1.3;letter-spacing:-.01em;margin:1.4em 0 .5em}h1{font-size:2rem}h2{font-size:1.55rem}h3{font-size:1.25rem}h4{font-size:1.1rem}h5{font-size:.95rem}h6{font-size:.78rem;text-transform:uppercase;letter-spacing:.07em;color:var(--m-fg-3)}p{margin:.6em 0}small{font-size:.84em;color:var(--m-fg-3)}a{color:var(--m-primary);text-decoration:none}a:hover{text-decoration:underline}hr{border:0;border-top:1px solid var(--m-border);margin:1.6em 0}blockquote{border-left:3px solid var(--m-border-2);background:var(--m-surface);border-radius:0 var(--m-r-sm) var(--m-r-sm) 0;padding:.7em 1.1em;margin:1em 0;color:var(--m-fg-2)}ul,ol{padding-left:1.4em}li{margin:.25em 0}li::marker{color:var(--m-fg-3)}kbd{font-family:var(--m-mono);font-size:.8em;padding:.15em .45em;border:1px solid var(--m-border);border-bottom-width:2px;border-radius:var(--m-r-sm);background:var(--m-surface)}mark{padding:.1em .3em;border-radius:3px;background:#ffc75759}::selection{background:var(--m-primary);color:var(--m-on-primary)}:focus{outline:none}:focus-visible{outline:2px solid var(--m-primary);outline-offset:2px}button,.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45em;padding:.38em .95em;border:1px solid transparent;border-radius:var(--m-r-sm);font-family:var(--m-font-head);font-size:.8rem;font-weight:600;letter-spacing:.02em;line-height:1.5;cursor:pointer;user-select:none;text-decoration:none;background:var(--m-surface);color:var(--m-fg);transition:background var(--m-dur),color var(--m-dur),border-color var(--m-dur)}button:hover,.btn:hover{background:var(--m-border);text-decoration:none}button:active,.btn:active{background:var(--m-border-2)}button:disabled,.btn:disabled,.btn[disabled]{opacity:.5;cursor:not-allowed;pointer-events:none}.btn-primary{background:var(--m-primary);color:var(--m-on-primary)}button.btn-primary:hover,.btn.btn-primary:hover{background:var(--m-primary-h)}button.btn-primary:active,.btn.btn-primary:active{background:var(--m-primary-a)}.btn-dark{background:var(--m-fg);color:var(--m-bg)}button.btn-dark:hover,.btn.btn-dark:hover{background:var(--m-fg);opacity:.88}button.btn-dark:active,.btn.btn-dark:active{opacity:.75}.btn-light{background:var(--m-bg);color:var(--m-fg);border-color:var(--m-border)}button.btn-light:hover,.btn.btn-light:hover{background:var(--m-surface)}button.btn-light:active,.btn.btn-light:active{background:var(--m-border)}.btn-success{background:var(--m-success);color:var(--m-on-success)}button.btn-success:hover,.btn.btn-success:hover{background:var(--m-success);filter:brightness(1.08)}button.btn-success:active,.btn.btn-success:active{background:var(--m-success);filter:brightness(.92)}.btn-danger{background:var(--m-danger);color:var(--m-on-danger)}button.btn-danger:hover,.btn.btn-danger:hover{background:var(--m-danger);filter:brightness(1.08)}button.btn-danger:active,.btn.btn-danger:active{background:var(--m-danger);filter:brightness(.92)}.btn-warning{background:var(--m-warning);color:var(--m-on-warning)}button.btn-warning:hover,.btn.btn-warning:hover{background:var(--m-warning);filter:brightness(1.08)}button.btn-warning:active,.btn.btn-warning:active{background:var(--m-warning);filter:brightness(.92)}.btn-outline{background:transparent;border-color:var(--m-border-2);color:var(--m-primary)}button.btn-outline:hover,.btn.btn-outline:hover{background:var(--m-primary-soft);border-color:var(--m-primary)}button.btn-outline:active,.btn.btn-outline:active{background:var(--m-primary);color:var(--m-on-primary)}.btn-ghost{background:transparent;color:var(--m-fg-2)}button.btn-ghost:hover,.btn.btn-ghost:hover{background:var(--m-surface);color:var(--m-fg)}button.btn-ghost:active,.btn.btn-ghost:active{background:var(--m-border)}.btn-link{background:transparent;color:var(--m-primary);padding-inline:.2em}button.btn-link:hover,.btn.btn-link:hover{background:transparent;text-decoration:underline}:where(button,.btn).btn-elevated{box-shadow:var(--m-elev)}:where(button,.btn).btn-elevated:hover{box-shadow:var(--m-elev);filter:brightness(1.04)}:where(button,.btn).btn-elevated:active{box-shadow:var(--m-elev-active)}:where(button,.btn).btn-elevated.btn-primary:hover{background:var(--m-primary-h);filter:none}:where(button,.btn).btn-elevated.btn-primary:active{background:var(--m-primary-a)}.btn-sm{padding:.25em .7em;font-size:.72rem}.btn-lg{padding:.55em 1.3em;font-size:.92rem}.btn-block{display:flex;width:100%}.btn-group{display:inline-flex}.btn-group button,.btn-group .btn{border-radius:0;margin-left:-1px}.btn-group button:first-child,.btn-group .btn:first-child{border-radius:var(--m-r-sm) 0 0 var(--m-r-sm);margin-left:0}.btn-group button:last-child,.btn-group .btn:last-child{border-radius:0 var(--m-r-sm) var(--m-r-sm) 0}.btn-spin:after{content:"";width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-top-color:transparent;border-radius:50%;animation:m-spin .6s linear infinite}@keyframes m-spin{to{transform:rotate(360deg)}}.btn-close{width:20px;height:20px;min-width:0;padding:0;border:0;border-radius:var(--m-r-full);background:rgb(from currentColor r g b / .18);position:relative}.btn-close:before,.btn-close:after{content:"";position:absolute;left:50%;top:50%;width:50%;height:2px;background:currentColor;translate:-50% -50%;rotate:45deg}.btn-close:after{rotate:-45deg}.btn-close:hover{background:rgb(from currentColor r g b / .3)}.tag{display:inline-flex;align-items:center;gap:.35em;padding:.18em .7em;border-radius:var(--m-r-full);font-size:.78rem;font-weight:600;line-height:1.6;background:var(--m-surface);color:var(--m-fg-2);border:1px solid var(--m-border);white-space:nowrap}.tag-primary{background:var(--m-primary);border-color:var(--m-primary);color:var(--m-on-primary)}.tag-success{background:var(--m-success);border-color:var(--m-success);color:#fff}.tag-warning{background:var(--m-warning);border-color:var(--m-warning);color:#fff}.tag-danger{background:var(--m-danger);border-color:var(--m-danger);color:#fff}.tag-soft{background:var(--m-primary-soft);border-color:transparent;color:var(--m-primary)}.tag-soft-success{background:color-mix(in srgb,var(--m-success) 14%,transparent);border-color:transparent;color:var(--m-success)}.tag-soft-danger{background:color-mix(in srgb,var(--m-danger) 12%,transparent);border-color:transparent;color:var(--m-danger)}.tag-rounded{border-radius:6px}.tag-x{display:inline-block;width:1.1em;height:1.1em;border-radius:50%;background:rgb(from currentColor r g b / .2);position:relative;cursor:pointer}.tag-x:before,.tag-x:after{content:"";position:absolute;left:50%;top:50%;width:55%;height:1.5px;background:currentColor;translate:-50% -50%;rotate:45deg}.tag-x:after{rotate:-45deg}.tag-x:hover{background:rgb(from currentColor r g b / .4)}.label{display:block;font-weight:700;font-size:.85rem;line-height:1.4;margin:.8rem 0 .15rem}.hint{display:block;font-size:.78rem;color:var(--m-fg-3);margin-top:.25rem}.m-error .input,.m-error input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=submit]):not([type=button]):not([type=reset]),.m-error select,.m-error textarea{border-color:var(--m-danger)}.m-error .input:focus-visible,.m-error input:focus-visible,.m-error select:focus-visible,.m-error textarea:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--m-danger) 18%,transparent)}.m-error .hint,.m-error .label{color:var(--m-danger)}.m-valid .input,.m-valid input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=submit]):not([type=button]):not([type=reset]),.m-valid select,.m-valid textarea{border-color:var(--m-success)}.m-valid .hint{color:var(--m-success)}:where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=submit]):not([type=button]):not([type=reset]),select,textarea),.input{width:100%;padding:.45em .8em;background:var(--m-bg);border:1px solid var(--m-border-2);border-radius:var(--m-r-sm);color:var(--m-fg);transition:border-color var(--m-dur),box-shadow var(--m-dur)}::placeholder{color:var(--m-fg-3)}:where(input,select,textarea):focus,.input:focus{border-color:var(--m-primary)}:where(input,select,textarea):focus-visible{outline:none;box-shadow:0 0 0 3px var(--m-primary-soft)}input:disabled,select:disabled,textarea:disabled,.input:disabled{background:var(--m-surface);color:var(--m-fg-3);cursor:not-allowed}.input-success,input.input-success,select.input-success,textarea.input-success{border-color:var(--m-success)}.input-error,input.input-error,select.input-error,textarea.input-error{border-color:var(--m-danger)}textarea{min-height:6rem;resize:vertical}select{appearance:none;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23667189' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .8em center;background-size:.5em .6em;padding-right:2.2em}input[type=search]{padding-left:2.1em;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%238a939f'%3E%3Cpath d='M14.9 14.4l-.5.5a.4.4 0 0 1-.5 0L9.5 10.5A5.3 5.3 0 1 1 11.6 6.3a5.3 5.3 0 0 1-1.1 3.2l4.4 4.4a.4.4 0 0 1 0 .5zM6.3 2.4a3.9 3.9 0 1 0 3.9 3.9 3.9 3.9 0 0 0-3.9-3.9z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:left .6em center}input[type=checkbox],input[type=radio],.check{appearance:none;width:1.1em;height:1.1em;margin:0 .45em 0 0;flex-shrink:0;vertical-align:-.18em;border:1.5px solid var(--m-border-2);background:var(--m-bg);cursor:pointer;transition:background var(--m-dur),border-color var(--m-dur)}input[type=checkbox]{border-radius:4px}input[type=radio]{border-radius:50%}input[type=checkbox]:hover,input[type=radio]:hover,.check:hover{border-color:var(--m-fg-3)}input[type=checkbox]:checked,input[type=radio]:checked,.check:checked{background:var(--m-primary);border-color:var(--m-primary)}input[type=checkbox]:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E");background-size:.72em;background-position:center;background-repeat:no-repeat}input[type=radio]:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3.2' fill='%23ffffff'/%3E%3C/svg%3E");background-size:1em;background-position:center;background-repeat:no-repeat}input[type=checkbox]:disabled,input[type=radio]:disabled,.check:disabled{opacity:.4;cursor:not-allowed}.switch{position:relative;display:inline-block;width:2.6em;height:1.45em;flex-shrink:0}.switch input{opacity:0;width:100%;height:100%;margin:0;cursor:pointer;position:absolute;z-index:1}.switch i{position:absolute;inset:0;border-radius:var(--m-r-full);background:var(--m-border-2);transition:background var(--m-dur);pointer-events:none}.switch i:after{content:"";position:absolute;left:3px;top:50%;translate:0 -50%;width:1.05em;height:1.05em;border-radius:50%;background:#fff;box-shadow:0 1px 3px #00000040;transition:left var(--m-dur)}.switch input:checked+i{background:var(--m-primary)}.switch input:checked+i:after{left:calc(100% - 1.05em - 3px)}.switch input:focus-visible+i{outline:2px solid var(--m-primary);outline-offset:2px}input[type=range]{appearance:none;width:100%;height:1.4em;background:transparent;cursor:pointer;--m-range-progress: 50%;background:linear-gradient(to right,var(--m-primary) var(--m-range-progress),var(--m-border) var(--m-range-progress)) no-repeat center / 100% var(--m-range-h)}input[type=range]::-webkit-slider-runnable-track{height:var(--m-range-h);border-radius:var(--m-r-full);background:transparent}input[type=range]::-webkit-slider-thumb{appearance:none;width:1em;height:1em;margin-top:calc(var(--m-range-h) / 2 - .5em);border-radius:50%;background:var(--m-primary);border:2px solid var(--m-bg);box-shadow:0 0 0 1px var(--m-border-2)}input[type=range]::-moz-range-track{height:var(--m-range-h);border-radius:var(--m-r-full);background:var(--m-border)}input[type=range]::-moz-range-progress{height:var(--m-range-h);border-radius:var(--m-r-full);background:var(--m-primary)}input[type=range]::-moz-range-thumb{width:1em;height:1em;border-radius:50%;background:var(--m-primary);border:2px solid var(--m-bg)}input[type=color]{width:2.8em;height:2.2em;padding:.15em;cursor:pointer}.fgroup{display:flex;margin:.5rem 0}.fgroup>*{border-radius:0}.fgroup>:first-child{border-radius:var(--m-r-sm) 0 0 var(--m-r-sm)}.fgroup>:last-child{border-radius:0 var(--m-r-sm) var(--m-r-sm) 0}.fgroup>*+*{margin-left:-1px}.fgroup-label{display:inline-flex;align-items:center;padding:0 .8em;background:var(--m-surface);border:1px solid var(--m-border-2);color:var(--m-fg-2);font-size:.88rem;white-space:nowrap}.fgroup .btn{flex-shrink:0}.card{background:var(--m-bg);border:1px solid var(--m-border);border-radius:var(--m-r);box-shadow:var(--m-shadow);overflow:hidden}.card-body{padding:1rem 1.25rem}.card-title{font-size:1.08rem;margin:0 0 .2em}.card-sub{font-size:.85rem;color:var(--m-fg-3);margin:0}.card-bar{display:flex;align-items:center;gap:.5rem;padding:.8rem 1.25rem;border-top:1px solid var(--m-border);background:var(--m-surface)}.card-img{width:100%;display:block}.card-hover{transition:box-shadow var(--m-dur)}.card-hover:hover{box-shadow:0 2px 4px #10182814,0 10px 24px #1018281f}.table-wrap{overflow-x:auto}.table{width:100%;border-collapse:collapse;font-size:.92rem}.table th,.table td{padding:.55em .8em;text-align:left;border-bottom:1px solid var(--m-border)}.table thead th{font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--m-fg-3);background:var(--m-surface)}.table tbody tr{transition:background var(--m-dur)}.table tbody tr:hover{background:var(--m-surface)}.table tr.selected{background:var(--m-primary-soft)}.table.striped tbody tr:nth-child(2n){background:color-mix(in srgb,var(--m-surface) 55%,transparent)}.table.bordered th,.table.bordered td{border:1px solid var(--m-border)}.table caption{caption-side:bottom;padding:.5em 0;font-size:.8rem;color:var(--m-fg-3);text-align:left}.tabs{display:flex;gap:.25rem;padding:.25rem;background:var(--m-surface);border-radius:var(--m-r-sm);width:fit-content;max-width:100%}.tab{padding:.38em 1em;border:0;border-radius:calc(var(--m-r-sm) - 1px);background:transparent;color:var(--m-fg-3);font-weight:600;font-size:.88rem;cursor:pointer;transition:color var(--m-dur),background var(--m-dur)}.tab:hover{color:var(--m-fg)}.tab.selected{background:var(--m-bg);color:var(--m-fg);box-shadow:0 1px 3px #0000001f}.tabs-line{background:none;padding:0;border-radius:0;border-bottom:2px solid var(--m-border);width:auto}.tabs-line .tab{border-radius:0;margin-bottom:-2px;border-bottom:2px solid transparent}.tabs-line .tab.selected{background:transparent;box-shadow:none;color:var(--m-primary);border-bottom-color:var(--m-primary)}.toast{padding:.8rem 1.1rem;border-radius:var(--m-r-sm);background:var(--m-fg);color:var(--m-bg);box-shadow:var(--m-shadow);margin:.5rem 0}.toast-title{font-weight:700;margin:0 0 .15em}.toast p{margin:0;font-size:.88rem;opacity:.85}.toast-success{background:var(--m-success);color:#fff}.toast-danger{background:var(--m-danger);color:#fff}.toast-primary{background:var(--m-primary);color:var(--m-on-primary)}.alert{padding:.8rem 1.1rem;border:1px solid var(--m-border);border-left:3px solid var(--m-fg-3);border-radius:var(--m-r-sm);background:var(--m-surface);margin:.8rem 0}.alert p{margin:0}.alert-success{border-left-color:var(--m-success);background:color-mix(in srgb,var(--m-success) 10%,var(--m-bg))}.alert-warning{border-left-color:var(--m-warning);background:color-mix(in srgb,var(--m-warning) 12%,var(--m-bg))}.alert-danger{border-left-color:var(--m-danger);background:color-mix(in srgb,var(--m-danger) 10%,var(--m-bg))}.alert-primary{border-left-color:var(--m-primary);background:var(--m-primary-soft)}.tooltip{position:relative}.tooltip:after{content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);left:50%;translate:-50% 2px;padding:.3em .7em;border-radius:var(--m-r-sm);background:var(--m-fg);color:var(--m-bg);font-size:.72rem;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity var(--m-dur),translate var(--m-dur);z-index:50}.tooltip:hover:after{opacity:1;translate:-50% 0}.tooltip-b:after{bottom:auto;top:calc(100% + 6px);translate:-50% -2px}.tooltip-b:hover:after{translate:-50% 0}.tooltip-r:after{bottom:auto;top:50%;left:calc(100% + 6px);translate:-2px -50%}.tooltip-r:hover:after{translate:0 -50%}.tooltip-l:after{bottom:auto;top:50%;right:calc(100% + 6px);left:auto;translate:2px -50%}.tooltip-l:hover:after{translate:0 -50%}.modal-toggle{display:none}.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:1rem;visibility:hidden;opacity:0;transition:opacity var(--m-dur),visibility var(--m-dur);z-index:100}.modal-toggle:checked~.modal{visibility:visible;opacity:1}.modal-overlay{position:absolute;inset:0;background:#00000080}.modal-box{position:relative;width:min(28rem,100%);background:var(--m-bg);border:1px solid var(--m-border);border-radius:var(--m-r);box-shadow:var(--m-shadow)}.modal-head{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem .5rem}.modal-title{margin:0;font-size:1.1rem}.modal-foot{display:flex;justify-content:flex-end;gap:.5rem;padding:.75rem 1.25rem 1.1rem}.modal-box>.modal-body{padding:.25rem 1.25rem}details.acc{border:1px solid var(--m-border);border-radius:var(--m-r-sm);background:var(--m-bg);padding:.7em 1em;margin:.5em 0}details.acc summary{cursor:pointer;font-weight:700;list-style:none;display:flex;align-items:center;justify-content:space-between}details.acc summary::-webkit-details-marker{display:none}details.acc summary:after{content:"";width:.55em;height:.55em;border:2px solid var(--m-fg-3);border-top:0;border-left:0;rotate:45deg;transition:rotate var(--m-dur)}details.acc[open] summary:after{rotate:225deg}details.acc[open] summary{margin-bottom:.4em}.nav{display:flex;align-items:center;gap:1.25rem;padding:.6rem 1.1rem;background:var(--m-bg);border:1px solid var(--m-border);border-radius:var(--m-r);box-shadow:var(--m-shadow);flex-wrap:wrap}.nav-brand{font-family:var(--m-font-head);font-weight:700;font-size:1.02rem;color:var(--m-fg)}.nav a{color:var(--m-fg-3);font-weight:600;font-size:.9rem}.nav a:hover{color:var(--m-fg);text-decoration:none}.nav .selected{color:var(--m-fg)}.nav-space{flex:1}.avatar{display:inline-flex;align-items:center;justify-content:center;width:2.6em;height:2.6em;border-radius:50%;background:var(--m-primary-soft);color:var(--m-primary);font-weight:700;font-size:.85rem;overflow:hidden;flex-shrink:0}.avatar-sm{width:2em;height:2em;font-size:.7rem}.avatar-lg{width:3.4em;height:3.4em;font-size:1.05rem}progress.progress{appearance:none;width:100%;height:.5rem;border:0;overflow:hidden;border-radius:var(--m-r-full);background:var(--m-surface);display:block}progress.progress::-webkit-progress-bar{background:var(--m-surface)}progress.progress::-webkit-progress-value{background:var(--m-primary);border-radius:var(--m-r-full)}progress.progress::-moz-progress-bar{background:var(--m-primary);border-radius:var(--m-r-full)}.container{max-width:72rem;margin-inline:auto;padding-inline:1.25rem}.m-row{display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--m-gap, 1rem);align-items:center}.m-col{display:flex;flex-direction:column;gap:var(--m-gap, 1rem)}.m-row>*{flex:1 1 0;min-width:0}.m-row>.m-col-auto{flex:0 0 auto;width:auto}.m-row-nowrap{flex-wrap:nowrap}.m-grid-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:var(--m-gap, 1rem)}.c-1{flex:0 0 8.3333%;max-width:8.3333%}.c-2{flex:0 0 16.6667%;max-width:16.6667%}.c-3{flex:0 0 25%;max-width:25%}.c-4{flex:0 0 33.3333%;max-width:33.3333%}.c-5{flex:0 0 41.6667%;max-width:41.6667%}.c-6{flex:0 0 50%;max-width:50%}.c-7{flex:0 0 58.3333%;max-width:58.3333%}.c-8{flex:0 0 66.6667%;max-width:66.6667%}.c-9{flex:0 0 75%;max-width:75%}.c-10{flex:0 0 83.3333%;max-width:83.3333%}.c-11{flex:0 0 91.6667%;max-width:91.6667%}.c-12{flex:0 0 100%;max-width:100%}.m-g-0{--m-gap:0}.m-g-xs{--m-gap:.4rem}.m-g-sm{--m-gap:.65rem}.m-g-lg{--m-gap:1.75rem}.center{text-align:center}.divider{display:flex;align-items:center;gap:1rem;margin:1.5em 0;color:var(--m-fg-3);font-size:.8rem}.divider:before,.divider:after{content:"";flex:1;border-top:1px solid var(--m-border)}.m-0{margin:0}.m-5{margin:5px}.m-10{margin:10px}.m-15{margin:15px}.m-20{margin:20px}.m-30{margin:30px}.m-40{margin:40px}.m-t-0{margin-top:0}.m-t-5{margin-top:5px}.m-t-10{margin-top:10px}.m-t-15{margin-top:15px}.m-t-20{margin-top:20px}.m-t-30{margin-top:30px}.m-t-40{margin-top:40px}.m-b-0{margin-bottom:0}.m-b-5{margin-bottom:5px}.m-b-10{margin-bottom:10px}.m-b-15{margin-bottom:15px}.m-b-20{margin-bottom:20px}.m-b-30{margin-bottom:30px}.m-b-40{margin-bottom:40px}.m-l-0{margin-left:0}.m-l-5{margin-left:5px}.m-l-10{margin-left:10px}.m-l-15{margin-left:15px}.m-l-20{margin-left:20px}.m-l-30{margin-left:30px}.m-l-40{margin-left:40px}.m-r-0{margin-right:0}.m-r-5{margin-right:5px}.m-r-10{margin-right:10px}.m-r-15{margin-right:15px}.m-r-20{margin-right:20px}.m-r-30{margin-right:30px}.m-r-40{margin-right:40px}.m-x-0{margin-left:0;margin-right:0}.m-x-5{margin-left:5px;margin-right:5px}.m-x-10{margin-left:10px;margin-right:10px}.m-x-15{margin-left:15px;margin-right:15px}.m-x-20{margin-left:20px;margin-right:20px}.m-x-auto{margin-left:auto;margin-right:auto}.m-y-0{margin-top:0;margin-bottom:0}.m-y-5{margin-top:5px;margin-bottom:5px}.m-y-10{margin-top:10px;margin-bottom:10px}.m-y-15{margin-top:15px;margin-bottom:15px}.m-y-20{margin-top:20px;margin-bottom:20px}.p-0{padding:0}.p-5{padding:5px}.p-10{padding:10px}.p-15{padding:15px}.p-20{padding:20px}.p-30{padding:30px}.p-40{padding:40px}.p-t-0{padding-top:0}.p-t-5{padding-top:5px}.p-t-10{padding-top:10px}.p-t-15{padding-top:15px}.p-t-20{padding-top:20px}.p-t-30{padding-top:30px}.p-b-0{padding-bottom:0}.p-b-5{padding-bottom:5px}.p-b-10{padding-bottom:10px}.p-b-15{padding-bottom:15px}.p-b-20{padding-bottom:20px}.p-b-30{padding-bottom:30px}.p-l-0{padding-left:0}.p-l-5{padding-left:5px}.p-l-10{padding-left:10px}.p-l-15{padding-left:15px}.p-l-20{padding-left:20px}.p-l-30{padding-left:30px}.p-r-0{padding-right:0}.p-r-5{padding-right:5px}.p-r-10{padding-right:10px}.p-r-15{padding-right:15px}.p-r-20{padding-right:20px}.p-r-30{padding-right:30px}.p-x-0{padding-left:0;padding-right:0}.p-x-5{padding-left:5px;padding-right:5px}.p-x-10{padding-left:10px;padding-right:10px}.p-x-15{padding-left:15px;padding-right:15px}.p-x-20{padding-left:20px;padding-right:20px}.p-y-0{padding-top:0;padding-bottom:0}.p-y-5{padding-top:5px;padding-bottom:5px}.p-y-10{padding-top:10px;padding-bottom:10px}.p-y-15{padding-top:15px;padding-bottom:15px}.p-y-20{padding-top:20px;padding-bottom:20px}.mono{font-family:var(--m-mono);font-size:.86em}.muted{color:var(--m-fg-2)}.subtle{color:var(--m-fg-3)}.overline{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--m-fg-3)}.hidden{display:none!important}.m-flex{display:flex}.m-inline-flex{display:inline-flex}.m-flex-row{flex-direction:row}.m-flex-col{flex-direction:column}.m-flex-wrap{flex-wrap:wrap}.m-flex-nowrap{flex-wrap:nowrap}.m-flex-1{flex:1 1 0%;min-width:0}.m-flex-auto{flex:1 1 auto}.m-flex-none{flex:none}.m-grow{flex-grow:1}.m-shrink-0{flex-shrink:0}.m-basis-0{flex-basis:0}.m-items-start,.m-i-start{align-items:flex-start}.m-items-center,.m-i-center{align-items:center}.m-items-end,.m-i-end{align-items:flex-end}.m-items-stretch,.m-i-stretch{align-items:stretch}.m-items-baseline,.m-i-baseline{align-items:baseline}.m-self-start{align-self:flex-start}.m-self-center{align-self:center}.m-self-end{align-self:flex-end}.m-justify-start,.m-j-start{justify-content:flex-start}.m-justify-center,.m-j-center{justify-content:center}.m-justify-end,.m-j-end{justify-content:flex-end}.m-justify-between,.m-j-between{justify-content:space-between}.m-justify-around,.m-j-around{justify-content:space-around}.m-justify-evenly,.m-j-evenly{justify-content:space-evenly}.m-j-center-v{justify-content:center}.m-content-start{align-content:flex-start}.m-content-between{align-content:space-between}.m-content-center{align-content:center}.m-order-first{order:-1}.m-order-last{order:99}.m-gap-0{gap:0}.m-gap-xs{gap:.4rem}.m-gap-sm{gap:.65rem}.m-gap{gap:1rem}.m-gap-lg{gap:1.75rem}.m-gap-xl{gap:2.5rem}.m-gap-5{gap:5px}.m-gap-10{gap:10px}.m-gap-15{gap:15px}.m-gap-20{gap:20px}.m-gap-30{gap:30px}.m-gap-40{gap:40px}.m-gap-x-0{column-gap:0}.m-gap-x-xs{column-gap:.4rem}.m-gap-x-sm{column-gap:.65rem}.m-gap-x{column-gap:1rem}.m-gap-x-lg{column-gap:1.75rem}.m-gap-x-5{column-gap:5px}.m-gap-x-10{column-gap:10px}.m-gap-x-15{column-gap:15px}.m-gap-x-20{column-gap:20px}.m-gap-x-30{column-gap:30px}.m-gap-y-0{row-gap:0}.m-gap-y-xs{row-gap:.4rem}.m-gap-y-sm{row-gap:.65rem}.m-gap-y{row-gap:1rem}.m-gap-y-lg{row-gap:1.75rem}.m-gap-y-5{row-gap:5px}.m-gap-y-10{row-gap:10px}.m-gap-y-15{row-gap:15px}.m-gap-y-20{row-gap:20px}.m-gap-y-30{row-gap:30px}.m-grid{display:grid}.m-inline-grid{display:inline-grid}.m-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.m-grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.m-grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.m-grid-cols-auto{grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}.m-grid-cols-auto-sm{grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}.m-grid-cols-auto-lg{grid-template-columns:repeat(auto-fit,minmax(22rem,1fr))}.m-grid-rows-2{grid-template-rows:repeat(2,minmax(0,1fr))}.m-grid-rows-3{grid-template-rows:repeat(3,minmax(0,1fr))}.m-grid-flow-dense{grid-auto-flow:row dense}.m-col-span-2{grid-column:span 2/span 2}.m-col-span-3{grid-column:span 3/span 3}.m-col-span-full{grid-column:1/-1}.m-row-span-2{grid-row:span 2/span 2}@media(max-width:640px){.m-grid-cols-2,.m-grid-cols-3,.m-grid-cols-4{grid-template-columns:1fr}.m-col-span-2,.m-col-span-3{grid-column:auto}}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "mates-css",
|
|
3
|
-
"version": "0.
|
|
4
|
-
"description": "A compact pure-CSS UI kit. Design tokens, blue primary with hover/active ramps, automatic dark mode
|
|
3
|
+
"version": "0.3.0",
|
|
4
|
+
"description": "A compact pure-CSS UI kit. Design tokens, blue primary with hover/active ramps, automatic dark mode and flex & grid utilities. No JS.",
|
|
5
5
|
"style": "mates.css",
|
|
6
6
|
"main": "mates.min.css",
|
|
7
7
|
"files": [
|
|
@@ -25,13 +25,13 @@
|
|
|
25
25
|
"no-js",
|
|
26
26
|
"micro-framework"
|
|
27
27
|
],
|
|
28
|
-
"homepage": "https://github.com/
|
|
28
|
+
"homepage": "https://github.com/thejsmaster/mates-css#readme",
|
|
29
29
|
"repository": {
|
|
30
30
|
"type": "git",
|
|
31
|
-
"url": "git+https://github.com/
|
|
31
|
+
"url": "git+https://github.com/thejsmaster/mates-css.git"
|
|
32
32
|
},
|
|
33
33
|
"bugs": {
|
|
34
|
-
"url": "https://github.com/
|
|
34
|
+
"url": "https://github.com/thejsmaster/mates-css/issues"
|
|
35
35
|
},
|
|
36
36
|
"license": "MIT",
|
|
37
37
|
"author": "your-name",
|
|
@@ -44,6 +44,15 @@
|
|
|
44
44
|
"default": "./mates.min.css"
|
|
45
45
|
},
|
|
46
46
|
"./min": "./mates.min.css",
|
|
47
|
+
"./mates.css": "./mates.css",
|
|
48
|
+
"./style.css": "./mates.css",
|
|
47
49
|
"./package.json": "./package.json"
|
|
50
|
+
},
|
|
51
|
+
"devDependencies": {
|
|
52
|
+
"esbuild": "^0.28.2"
|
|
53
|
+
},
|
|
54
|
+
"scripts": {
|
|
55
|
+
"build": "esbuild mates.css --minify --outfile=mates.min.css",
|
|
56
|
+
"watch": "esbuild mates.css --minify --outfile=mates.min.css --watch"
|
|
48
57
|
}
|
|
49
58
|
}
|
package/LICENSE
DELETED
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
The MIT License (MIT)
|
|
2
|
-
|
|
3
|
-
Copyright (c) 2022 Stanley Lim
|
|
4
|
-
|
|
5
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
-
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
-
in the Software without restriction, including without limitation the rights
|
|
8
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
-
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
-
furnished to do so, subject to the following conditions:
|
|
11
|
-
|
|
12
|
-
The above copyright notice and this permission notice shall be included in
|
|
13
|
-
all copies or substantial portions of the Software.
|
|
14
|
-
|
|
15
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
|
21
|
-
THE SOFTWARE.
|