mates-css 0.1.0 → 0.2.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.
Files changed (6) hide show
  1. package/README.md +23 -8
  2. package/demo.html +41 -3
  3. package/mates.css +70 -50
  4. package/mates.min.css +1 -1
  5. package/package.json +9 -2
  6. 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
- - **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-items-*` (start/center/end/stretch/baseline), `.m-self-*`, `.m-justify-*` (start/center/end/between/around/evenly), `.m-order-first/last`
86
- - **Grid**: `.m-grid`, `.m-inline-grid`, `.m-grid-cols-2/3/4/auto/auto-sm/auto-lg`, `.m-grid-rows-2/3`, `.m-grid-flow-dense`, `.m-col-span-2/3/full`, `.m-row-span-2` (multi-column grids collapse to one column under 640px)
87
- - **Gaps**: `.m-gap-0/xs/sm/(default)/lg/xl`, plus directional `.m-gap-x-*` / `.m-gap-y-*`
88
- - **Helpers**: `.container`, `.row`, `.col`, `.c-1`–`.c-12`, `.divider`, `.center`, `.muted`, `.subtle`, `.overline`, `.mono`, `.hidden`
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 | 25.2kb |
101
- | Minified | 21.9kb |
102
- | **Min + gzip** | **5.4kb** |
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,8 +81,8 @@
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>
@@ -96,7 +96,7 @@
96
96
  <label style="display:block;"><input type="checkbox" class="check"> Unchecked</label>
97
97
  <label style="display:block;"><input type="radio" class="check" name="r" checked> Radio A</label>
98
98
  </div>
99
- <div class="col c-6">
99
+ <div class="m-col c-6">
100
100
  <label class="label" for="ta">Textarea</label>
101
101
  <textarea class="input" id="ta" placeholder="Write something…"></textarea>
102
102
  <label class="label">Switch</label>
@@ -238,6 +238,44 @@
238
238
  </div>
239
239
  </div>
240
240
 
241
+ <h2>Layout — m-row / m-col / flex &amp; grid</h2>
242
+ <p class="subtle" style="font-size:.85rem;">m-row / m-col are directional flex containers; children share space equally.</p>
243
+ <div class="m-row m-g-sm" style="margin-bottom:1rem;">
244
+ <div class="alert" style="margin:0; text-align:center;">auto</div>
245
+ <div class="alert" style="margin:0; text-align:center;">auto</div>
246
+ <div class="alert" style="margin:0; text-align:center;">auto</div>
247
+ </div>
248
+ <div class="m-row m-gap-10" style="margin-bottom:1rem;">
249
+ <div class="alert m-col-span-full" style="margin:0;"></div>
250
+ <div class="c-4"><div class="alert" style="margin:0; text-align:center;">c-4</div></div>
251
+ <div class="c-8"><div class="alert" style="margin:0; text-align:center;">c-8</div></div>
252
+ </div>
253
+ <div class="m-col m-gap-10" style="max-width:16rem; margin-bottom:1rem;">
254
+ <button class="btn">Stacked</button>
255
+ <button class="btn btn-primary">In m-col</button>
256
+ <button class="btn">gap-10</button>
257
+ </div>
258
+ <div class="m-flex m-j-between m-i-center m-gap-10 m-flex-wrap" style="margin-bottom:1rem;">
259
+ <span class="tag tag-soft">m-j-between</span>
260
+ <span class="tag">m-i-center</span>
261
+ <span class="tag">m-gap-10</span>
262
+ </div>
263
+ <div class="m-flex m-i-end m-gap-15" style="margin-bottom:1rem;">
264
+ <button class="btn btn-sm">i-end</button>
265
+ <button class="btn">varied</button>
266
+ <button class="btn btn-lg">heights</button>
267
+ </div>
268
+ <div class="m-grid-auto m-gap-10" style="margin-bottom:1rem;">
269
+ <div class="alert" style="margin:0">auto-fit</div>
270
+ <div class="alert" style="margin:0">auto-fit</div>
271
+ <div class="alert" style="margin:0">auto-fit</div>
272
+ </div>
273
+ <div class="m-grid m-grid-cols-3 m-gap-10" style="margin-bottom:1rem;">
274
+ <div class="alert" style="margin:0">1</div>
275
+ <div class="alert alert-primary" style="margin:0">2</div>
276
+ <div class="alert" style="margin:0">3</div>
277
+ </div>
278
+
241
279
  <h2>Spacing utilities</h2>
242
280
  <div class="card" style="max-width:30rem;">
243
281
  <div class="card-body">
package/mates.css CHANGED
@@ -120,7 +120,8 @@ mark { padding: .1em .3em; border-radius: 3px; background: rgba(255,199,87,.35);
120
120
  :focus { outline: none; }
121
121
  :focus-visible { outline: 2px solid var(--m-primary); outline-offset: 2px; }
122
122
 
123
- /* buttons */
123
+ /* buttons — <button> is styled by default; .btn applies the same to links/spans */
124
+ button,
124
125
  .btn {
125
126
  display: inline-flex;
126
127
  align-items: center;
@@ -141,13 +142,13 @@ mark { padding: .1em .3em; border-radius: 3px; background: rgba(255,199,87,.35);
141
142
  color: var(--m-fg);
142
143
  transition: background var(--m-dur), color var(--m-dur), border-color var(--m-dur);
143
144
  }
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; }
145
+ button:hover, .btn:hover { background: var(--m-border); text-decoration: none; }
146
+ button:active, .btn:active { background: var(--m-border-2); }
147
+ button:disabled, .btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; pointer-events: none; }
147
148
 
148
149
  .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); }
150
+ button.btn-primary:hover, .btn-primary:hover { background: var(--m-primary-h); }
151
+ button.btn-primary:active, .btn-primary:active { background: var(--m-primary-a); }
151
152
  .btn-dark { background: var(--m-fg); color: var(--m-bg); }
152
153
  .btn-dark:hover { background: var(--m-fg); opacity: .88; }
153
154
  .btn-dark:active { opacity: .75; }
@@ -175,9 +176,9 @@ mark { padding: .1em .3em; border-radius: 3px; background: rgba(255,199,87,.35);
175
176
  .btn-lg { padding: .55em 1.3em; font-size: .92rem; }
176
177
  .btn-block { display: flex; width: 100%; }
177
178
  .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; }
179
+ .btn-group button, .btn-group .btn { border-radius: 0; margin-left: -1px; }
180
+ .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; }
181
+ .btn-group button:last-child, .btn-group .btn:last-child { border-radius: 0 var(--m-r-sm) var(--m-r-sm) 0; }
181
182
 
182
183
  .btn-spin::after {
183
184
  content: "";
@@ -264,6 +265,9 @@ mark { padding: .1em .3em; border-radius: 3px; background: rgba(255,199,87,.35);
264
265
  /* forms */
265
266
  .label { display: block; font-weight: 700; font-size: .85rem; line-height: 1.4; margin: .8rem 0 .15rem; }
266
267
  .hint { display: block; font-size: .78rem; color: var(--m-fg-3); margin-top: .25rem; }
268
+ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
269
+ select,
270
+ textarea,
267
271
  .input {
268
272
  width: 100%;
269
273
  padding: .45em .8em;
@@ -273,14 +277,21 @@ mark { padding: .1em .3em; border-radius: 3px; background: rgba(255,199,87,.35);
273
277
  color: var(--m-fg);
274
278
  transition: border-color var(--m-dur), box-shadow var(--m-dur);
275
279
  }
276
- .input::placeholder { color: var(--m-fg-3); }
277
- .input:focus { border-color: var(--m-primary); }
278
- .input:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--m-primary-soft); }
279
- .input:disabled { background: var(--m-surface); color: var(--m-fg-3); cursor: not-allowed; }
280
- .input-success { border-color: var(--m-success); }
281
- .input-error { border-color: var(--m-danger); }
282
- textarea.input { min-height: 6rem; resize: vertical; }
283
- select.input {
280
+ ::placeholder { color: var(--m-fg-3); }
281
+ input:focus, select:focus, textarea:focus, .input:focus { border-color: var(--m-primary); }
282
+ input:focus-visible, select:focus-visible, textarea:focus-visible {
283
+ outline: none;
284
+ box-shadow: 0 0 0 3px var(--m-primary-soft);
285
+ }
286
+ input:disabled, select:disabled, textarea:disabled, .input:disabled {
287
+ background: var(--m-surface);
288
+ color: var(--m-fg-3);
289
+ cursor: not-allowed;
290
+ }
291
+ .input-success, input.input-success, select.input-success, textarea.input-success { border-color: var(--m-success); }
292
+ .input-error, input.input-error, select.input-error, textarea.input-error { border-color: var(--m-danger); }
293
+ textarea { min-height: 6rem; resize: vertical; }
294
+ select {
284
295
  appearance: none;
285
296
  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
297
  background-repeat: no-repeat;
@@ -288,13 +299,15 @@ select.input {
288
299
  background-size: .5em .6em;
289
300
  padding-right: 2.2em;
290
301
  }
291
- input[type="search"].input {
302
+ input[type="search"] {
292
303
  padding-left: 2.1em;
293
304
  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
305
  background-repeat: no-repeat;
295
306
  background-position: left .6em center;
296
307
  }
297
308
 
309
+ input[type="checkbox"],
310
+ input[type="radio"],
298
311
  .check {
299
312
  appearance: none;
300
313
  width: 1.1em;
@@ -307,23 +320,23 @@ input[type="search"].input {
307
320
  cursor: pointer;
308
321
  transition: background var(--m-dur), border-color var(--m-dur);
309
322
  }
310
- input[type="checkbox"].check { border-radius: 4px; }
311
- input[type="radio"].check { border-radius: 50%; }
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"].check:checked {
323
+ input[type="checkbox"] { border-radius: 4px; }
324
+ input[type="radio"] { border-radius: 50%; }
325
+ input[type="checkbox"]:hover, input[type="radio"]:hover, .check:hover { border-color: var(--m-fg-3); }
326
+ input[type="checkbox"]:checked, input[type="radio"]:checked, .check:checked { background: var(--m-primary); border-color: var(--m-primary); }
327
+ input[type="checkbox"]:checked {
315
328
  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
329
  background-size: .72em;
317
330
  background-position: center;
318
331
  background-repeat: no-repeat;
319
332
  }
320
- input[type="radio"].check:checked {
333
+ input[type="radio"]:checked {
321
334
  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
335
  background-size: 1em;
323
336
  background-position: center;
324
337
  background-repeat: no-repeat;
325
338
  }
326
- .check:disabled { opacity: .4; cursor: not-allowed; }
339
+ input[type="checkbox"]:disabled, input[type="radio"]:disabled, .check:disabled { opacity: .4; cursor: not-allowed; }
327
340
 
328
341
  .switch { position: relative; display: inline-block; width: 2.6em; height: 1.45em; flex-shrink: 0; }
329
342
  .switch input { opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; position: absolute; z-index: 1; }
@@ -345,9 +358,9 @@ input[type="radio"].check:checked {
345
358
  .switch input:checked + i::after { left: calc(100% - 1.05em - 3px); }
346
359
  .switch input:focus-visible + i { outline: 2px solid var(--m-primary); outline-offset: 2px; }
347
360
 
348
- input[type="range"].range { appearance: none; width: 100%; height: 1.4em; background: transparent; cursor: pointer; }
349
- .range::-webkit-slider-runnable-track { height: 4px; border-radius: var(--m-r-full); background: var(--m-border); }
350
- .range::-webkit-slider-thumb {
361
+ input[type="range"] { appearance: none; width: 100%; height: 1.4em; background: transparent; cursor: pointer; }
362
+ input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: var(--m-r-full); background: var(--m-border); }
363
+ input[type="range"]::-webkit-slider-thumb {
351
364
  appearance: none;
352
365
  width: 1em;
353
366
  height: 1em;
@@ -357,9 +370,9 @@ input[type="range"].range { appearance: none; width: 100%; height: 1.4em; backgr
357
370
  border: 2px solid var(--m-bg);
358
371
  box-shadow: 0 0 0 1px var(--m-border-2);
359
372
  }
360
- .range::-moz-range-track { height: 4px; border-radius: var(--m-r-full); background: var(--m-border); }
361
- .range::-moz-range-thumb { width: 1em; height: 1em; border-radius: 50%; background: var(--m-primary); border: 2px solid var(--m-bg); }
362
- input[type="color"].input { width: 2.8em; height: 2.2em; padding: .15em; cursor: pointer; }
373
+ input[type="range"]::-moz-range-track { height: 4px; border-radius: var(--m-r-full); background: var(--m-border); }
374
+ input[type="range"]::-moz-range-thumb { width: 1em; height: 1em; border-radius: 50%; background: var(--m-primary); border: 2px solid var(--m-bg); }
375
+ input[type="color"] { width: 2.8em; height: 2.2em; padding: .15em; cursor: pointer; }
363
376
 
364
377
  .fgroup { display: flex; margin: .5rem 0; }
365
378
  .fgroup > * { border-radius: 0; }
@@ -601,11 +614,16 @@ progress.progress::-moz-progress-bar { background: var(--m-primary); border-radi
601
614
 
602
615
  /* layout */
603
616
  .container { max-width: 72rem; margin-inline: auto; padding-inline: 1.25rem; }
604
- .row { display: flex; flex-wrap: wrap; gap: var(--m-gap, 1rem); align-items: center; }
605
- .col { display: flex; flex-direction: column; gap: var(--m-gap, 1rem); }
606
- .row > * { flex: 1 1 0; min-width: 0; }
607
- .row > .col-auto { flex: 0 0 auto; width: auto; }
608
- .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--m-gap, 1rem); }
617
+
618
+ /* flex direction rows/cols: children share space equally */
619
+ .m-row { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--m-gap, 1rem); align-items: center; }
620
+ .m-col { display: flex; flex-direction: column; gap: var(--m-gap, 1rem); }
621
+ .m-row > * { flex: 1 1 0; min-width: 0; }
622
+ .m-row > .m-col-auto { flex: 0 0 auto; width: auto; }
623
+ .m-row-nowrap { flex-wrap: nowrap; }
624
+
625
+ /* grid */
626
+ .m-grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--m-gap, 1rem); }
609
627
 
610
628
  .c-1{flex:0 0 8.3333%;max-width:8.3333%}.c-2{flex:0 0 16.6667%;max-width:16.6667%}
611
629
  .c-3{flex:0 0 25%;max-width:25%}.c-4{flex:0 0 33.3333%;max-width:33.3333%}
@@ -614,9 +632,7 @@ progress.progress::-moz-progress-bar { background: var(--m-primary); border-radi
614
632
  .c-9{flex:0 0 75%;max-width:75%}.c-10{flex:0 0 83.3333%;max-width:83.3333%}
615
633
  .c-11{flex:0 0 91.6667%;max-width:91.6667%}.c-12{flex:0 0 100%;max-width:100%}
616
634
 
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}
635
+ .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
636
  .center{text-align:center}
621
637
  .divider{display:flex;align-items:center;gap:1rem;margin:1.5em 0;color:var(--m-fg-3);font-size:.8rem}
622
638
  .divider::before,.divider::after{content:"";flex:1;border-top:1px solid var(--m-border)}
@@ -657,20 +673,21 @@ progress.progress::-moz-progress-bar { background: var(--m-primary); border-radi
657
673
  .m-grow{flex-grow:1}
658
674
  .m-shrink-0{flex-shrink:0}
659
675
  .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}
676
+ .m-items-start,.m-i-start{align-items:flex-start}
677
+ .m-items-center,.m-i-center{align-items:center}
678
+ .m-items-end,.m-i-end{align-items:flex-end}
679
+ .m-items-stretch,.m-i-stretch{align-items:stretch}
680
+ .m-items-baseline,.m-i-baseline{align-items:baseline}
665
681
  .m-self-start{align-self:flex-start}
666
682
  .m-self-center{align-self:center}
667
683
  .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}
684
+ .m-justify-start,.m-j-start{justify-content:flex-start}
685
+ .m-justify-center,.m-j-center{justify-content:center}
686
+ .m-justify-end,.m-j-end{justify-content:flex-end}
687
+ .m-justify-between,.m-j-between{justify-content:space-between}
688
+ .m-justify-around,.m-j-around{justify-content:space-around}
689
+ .m-justify-evenly,.m-j-evenly{justify-content:space-evenly}
690
+ .m-j-center-v{justify-content:center}
674
691
  .m-content-start{align-content:flex-start}
675
692
  .m-content-between{align-content:space-between}
676
693
  .m-content-center{align-content:center}
@@ -684,8 +701,11 @@ progress.progress::-moz-progress-bar { background: var(--m-primary); border-radi
684
701
  .m-gap{gap:1rem}
685
702
  .m-gap-lg{gap:1.75rem}
686
703
  .m-gap-xl{gap:2.5rem}
704
+ .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
705
  .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}
706
+ .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
707
  .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}
708
+ .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
709
 
690
710
  /* grid utilities */
691
711
  .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-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}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-primary:hover{background:var(--m-primary-h)}button.btn-primary:active,.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 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}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)}input:focus,select:focus,textarea:focus,.input:focus{border-color:var(--m-primary)}input:focus-visible,select:focus-visible,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}input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:var(--m-r-full);background:var(--m-border)}input[type=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)}input[type=range]::-moz-range-track{height:4px;border-radius:var(--m-r-full);background:var(--m-border)}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.1.0",
4
- "description": "A compact pure-CSS UI kit. Design tokens, blue primary with hover/active ramps, automatic dark mode, flex & grid utilities. No JS, no build step.",
3
+ "version": "0.2.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": [
@@ -45,5 +45,12 @@
45
45
  },
46
46
  "./min": "./mates.min.css",
47
47
  "./package.json": "./package.json"
48
+ },
49
+ "devDependencies": {
50
+ "esbuild": "^0.28.2"
51
+ },
52
+ "scripts": {
53
+ "build": "esbuild mates.css --minify --outfile=mates.min.css",
54
+ "watch": "esbuild mates.css --minify --outfile=mates.min.css --watch"
48
55
  }
49
56
  }
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.