mates-css 0.1.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/LICENSE +21 -0
- package/README.md +110 -0
- package/demo.html +286 -0
- package/mates.css +711 -0
- package/mates.min.css +4 -0
- package/package.json +49 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
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.
|
package/README.md
ADDED
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
# Mates CSS
|
|
2
|
+
|
|
3
|
+
A compact pure-CSS UI kit — **21.9kb (5.4kb gzipped)**. No JS, no SCSS, no build step needed.
|
|
4
|
+
|
|
5
|
+
Same design system as the Cirrus fork it came from: blue primary with hover/active ramps, layered surface tokens, automatic dark mode with manual override, keyboard-only focus rings.
|
|
6
|
+
|
|
7
|
+
## Use it
|
|
8
|
+
|
|
9
|
+
### CDN
|
|
10
|
+
|
|
11
|
+
```html
|
|
12
|
+
<link rel="stylesheet" href="https://unpkg.com/mates-css@0.1.0/mates.min.css">
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
### npm
|
|
16
|
+
|
|
17
|
+
```sh
|
|
18
|
+
npm install mates-css
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
```html
|
|
22
|
+
<link rel="stylesheet" href="node_modules/mates-css/mates.min.css">
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
Or copy `mates.css` into your project. That's all.
|
|
26
|
+
|
|
27
|
+
## Dark mode
|
|
28
|
+
|
|
29
|
+
Automatic via `prefers-color-scheme`. Force it per page:
|
|
30
|
+
|
|
31
|
+
```html
|
|
32
|
+
<html data-theme="dark">
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
Toggle at runtime (the only JS you'd ever need, and only if you want a switch):
|
|
36
|
+
|
|
37
|
+
```js
|
|
38
|
+
document.documentElement.setAttribute('data-theme', 'dark');
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
## Tokens
|
|
42
|
+
|
|
43
|
+
Everything is a `--m-*` CSS variable. Override on `:root` to rebrand:
|
|
44
|
+
|
|
45
|
+
```css
|
|
46
|
+
:root {
|
|
47
|
+
--m-primary: #0172ad;
|
|
48
|
+
--m-primary-h: #016091; /* hover */
|
|
49
|
+
--m-primary-a: #014e75; /* active */
|
|
50
|
+
--m-on-primary: #ffffff; /* text on primary fills */
|
|
51
|
+
--m-r: 8px; /* reshape everything */
|
|
52
|
+
--m-font: "Inter", sans-serif;
|
|
53
|
+
}
|
|
54
|
+
```
|
|
55
|
+
|
|
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
|
+
|
|
58
|
+
## Components
|
|
59
|
+
|
|
60
|
+
| Class | Notes |
|
|
61
|
+
|---|---|
|
|
62
|
+
| `.btn` + `.btn-primary/dark/light/success/warning/danger/outline/ghost/link` | hover + darker active states |
|
|
63
|
+
| `.btn-elevated` | big resting shadow that shrinks when pressed |
|
|
64
|
+
| `.btn-sm/lg/block`, `.btn-group`, `.btn-spin`, `.btn-close` | |
|
|
65
|
+
| `.tag` + `.tag-primary/success/warning/danger/soft/soft-success/soft-danger/rounded` | `.tag-x` removable dot |
|
|
66
|
+
| `.input`, `.check`, `.switch`, `.range`, `.fgroup` | custom checkbox/radio SVGs, select arrow, search icon, success/error states |
|
|
67
|
+
| `.card`, `.card-body/bar/title/sub`, `.card-hover` | |
|
|
68
|
+
| `.table` + `.striped/.bordered/.selected` | |
|
|
69
|
+
| `.tabs` / `.tabs-line` | pill or underline, `.tab.selected` |
|
|
70
|
+
| `.toast-*`, `.alert-*` | neutral + semantic variants |
|
|
71
|
+
| `.tooltip` (all 4 directions) | pure CSS via `data-tip` |
|
|
72
|
+
| `.modal` | pure CSS, hidden-checkbox pattern |
|
|
73
|
+
| `details.acc` | native accordion |
|
|
74
|
+
| `.nav`, `.avatar`, `progress.progress` | |
|
|
75
|
+
|
|
76
|
+
## Flex & grid
|
|
77
|
+
|
|
78
|
+
```html
|
|
79
|
+
<div class="m-flex m-items-center m-justify-between m-gap-sm">…</div>
|
|
80
|
+
|
|
81
|
+
<div class="m-grid m-grid-cols-3 m-gap">…</div>
|
|
82
|
+
<div class="m-grid m-grid-cols-auto">…</div> <!-- responsive auto-fit -->
|
|
83
|
+
```
|
|
84
|
+
|
|
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`
|
|
89
|
+
|
|
90
|
+
## Accessibility
|
|
91
|
+
|
|
92
|
+
- Focus rings are keyboard-only (`:focus-visible`) — no ring on mouse click, visible 2px primary ring on Tab
|
|
93
|
+
- Custom checkboxes/radios/switches are real inputs
|
|
94
|
+
- Contrast-checked: white on `#0172ad` is 5.2:1; dark ink on dark-mode fills 6–11:1
|
|
95
|
+
|
|
96
|
+
## Size
|
|
97
|
+
|
|
98
|
+
| | |
|
|
99
|
+
|---|---|
|
|
100
|
+
| Raw | 25.2kb |
|
|
101
|
+
| Minified | 21.9kb |
|
|
102
|
+
| **Min + gzip** | **5.4kb** |
|
|
103
|
+
|
|
104
|
+
## Demo
|
|
105
|
+
|
|
106
|
+
Open `demo.html` — every component, light and dark.
|
|
107
|
+
|
|
108
|
+
## License
|
|
109
|
+
|
|
110
|
+
MIT
|
package/demo.html
ADDED
|
@@ -0,0 +1,286 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en" data-theme="light">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Mates CSS — Demo</title>
|
|
7
|
+
<link rel="stylesheet" href="mates.css">
|
|
8
|
+
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans:200,300,400,600,700" rel="stylesheet">
|
|
9
|
+
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,600,700" rel="stylesheet">
|
|
10
|
+
<style>
|
|
11
|
+
.demo { max-width: 56rem; margin: 0 auto; padding: 1rem 1.25rem 4rem; }
|
|
12
|
+
.theme-toggle { position: fixed; top: 1rem; right: 1rem; z-index: 999; }
|
|
13
|
+
.row-demo { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-bottom: .75rem; }
|
|
14
|
+
</style>
|
|
15
|
+
</head>
|
|
16
|
+
<body>
|
|
17
|
+
<div class="theme-toggle">
|
|
18
|
+
<button class="btn btn-sm" onclick="cycleTheme()">Theme: light</button>
|
|
19
|
+
</div>
|
|
20
|
+
|
|
21
|
+
<div class="demo">
|
|
22
|
+
<p class="overline">v0.1.0 · ~6kb gzipped</p>
|
|
23
|
+
<h1 style="margin-top:.2em;">Mates CSS</h1>
|
|
24
|
+
<p class="muted">Compact pure-CSS UI kit. Same design system as the full framework — blue primary, tokens, auto dark mode. No JS required (the theme toggle below is only for previewing).</p>
|
|
25
|
+
|
|
26
|
+
<!-- nav -->
|
|
27
|
+
<nav class="nav" style="margin: 1.5rem 0;">
|
|
28
|
+
<span class="nav-brand">Mates</span>
|
|
29
|
+
<a href="#buttons" class="selected">Buttons</a>
|
|
30
|
+
<a href="#forms">Forms</a>
|
|
31
|
+
<a href="#overlays">Overlays</a>
|
|
32
|
+
<span class="nav-space"></span>
|
|
33
|
+
<span class="avatar avatar-sm" data-tip="AV">AV</span>
|
|
34
|
+
</nav>
|
|
35
|
+
|
|
36
|
+
<h2 id="buttons">Buttons</h2>
|
|
37
|
+
<div class="row-demo">
|
|
38
|
+
<button class="btn">Default</button>
|
|
39
|
+
<button class="btn btn-primary">Primary</button>
|
|
40
|
+
<button class="btn btn-dark">Dark</button>
|
|
41
|
+
<button class="btn btn-light">Light</button>
|
|
42
|
+
<button class="btn btn-success">Success</button>
|
|
43
|
+
<button class="btn btn-warning">Warning</button>
|
|
44
|
+
<button class="btn btn-danger">Danger</button>
|
|
45
|
+
<button class="btn btn-outline">Outline</button>
|
|
46
|
+
<button class="btn btn-ghost">Ghost</button>
|
|
47
|
+
<button class="btn btn-link">Link</button>
|
|
48
|
+
<button class="btn" disabled>Disabled</button>
|
|
49
|
+
<button class="btn btn-close" aria-label="Close"></button>
|
|
50
|
+
</div>
|
|
51
|
+
<div class="row-demo">
|
|
52
|
+
<button class="btn btn-sm btn-spin">Loading</button>
|
|
53
|
+
<button class="btn btn-sm">Small</button>
|
|
54
|
+
<button class="btn">Normal</button>
|
|
55
|
+
<button class="btn btn-lg">Large</button>
|
|
56
|
+
<div class="btn-group">
|
|
57
|
+
<button class="btn btn-primary">Left</button>
|
|
58
|
+
<button class="btn btn-primary">Middle</button>
|
|
59
|
+
<button class="btn btn-primary">Right</button>
|
|
60
|
+
</div>
|
|
61
|
+
</div>
|
|
62
|
+
<div class="row-demo">
|
|
63
|
+
<button class="btn btn-elevated">Elevated</button>
|
|
64
|
+
<button class="btn btn-elevated btn-primary">Elevated primary</button>
|
|
65
|
+
<button class="btn btn-elevated btn-light">Elevated light</button>
|
|
66
|
+
<span class="hint" style="margin:0;">Hold click — the shadow shrinks (button sinks).</span>
|
|
67
|
+
</div>
|
|
68
|
+
|
|
69
|
+
<h2>Tags</h2>
|
|
70
|
+
<div class="row-demo">
|
|
71
|
+
<span class="tag">Default</span>
|
|
72
|
+
<span class="tag tag-primary">Primary</span>
|
|
73
|
+
<span class="tag tag-success">Success</span>
|
|
74
|
+
<span class="tag tag-warning">Warning</span>
|
|
75
|
+
<span class="tag tag-danger">Danger</span>
|
|
76
|
+
<span class="tag tag-soft">Soft</span>
|
|
77
|
+
<span class="tag tag-soft-success">Soft success</span>
|
|
78
|
+
<span class="tag tag-soft-danger">Soft danger</span>
|
|
79
|
+
<span class="tag tag-rounded">Rounded</span>
|
|
80
|
+
<span class="tag tag-primary">Removable <span class="tag-x"></span></span>
|
|
81
|
+
</div>
|
|
82
|
+
|
|
83
|
+
<h2 id="forms">Forms</h2>
|
|
84
|
+
<div class="row g-lg">
|
|
85
|
+
<div class="col c-6">
|
|
86
|
+
<label class="label" for="t1">Text</label>
|
|
87
|
+
<input class="input" id="t1" type="text" placeholder="Placeholder…">
|
|
88
|
+
<span class="hint">Hint text under inputs.</span>
|
|
89
|
+
<label class="label" for="s1">Select</label>
|
|
90
|
+
<select class="input" id="s1"><option>Choose one…</option><option>Option A</option></select>
|
|
91
|
+
<label class="label" for="ok">States</label>
|
|
92
|
+
<input class="input input-success" id="ok" type="text" value="Looks good">
|
|
93
|
+
<input class="input input-error" type="text" value="Has an error" style="margin-top:.5rem;">
|
|
94
|
+
<label class="label">Checks & radios</label>
|
|
95
|
+
<label style="display:block;"><input type="checkbox" class="check" checked> Checked</label>
|
|
96
|
+
<label style="display:block;"><input type="checkbox" class="check"> Unchecked</label>
|
|
97
|
+
<label style="display:block;"><input type="radio" class="check" name="r" checked> Radio A</label>
|
|
98
|
+
</div>
|
|
99
|
+
<div class="col c-6">
|
|
100
|
+
<label class="label" for="ta">Textarea</label>
|
|
101
|
+
<textarea class="input" id="ta" placeholder="Write something…"></textarea>
|
|
102
|
+
<label class="label">Switch</label>
|
|
103
|
+
<label class="switch"><input type="checkbox" checked><i></i></label>
|
|
104
|
+
<label class="switch" style="margin-left:.75rem;"><input type="checkbox"><i></i></label>
|
|
105
|
+
<label class="label" for="rg">Range</label>
|
|
106
|
+
<input type="range" class="range" id="rg" value="60">
|
|
107
|
+
<label class="label">Form group</label>
|
|
108
|
+
<div class="fgroup">
|
|
109
|
+
<span class="fgroup-label">https://</span>
|
|
110
|
+
<input class="input" type="text" value="example.com">
|
|
111
|
+
<button class="btn btn-primary">Go</button>
|
|
112
|
+
</div>
|
|
113
|
+
</div>
|
|
114
|
+
</div>
|
|
115
|
+
|
|
116
|
+
<h2>Cards</h2>
|
|
117
|
+
<div class="grid">
|
|
118
|
+
<div class="card card-hover">
|
|
119
|
+
<div class="card-body">
|
|
120
|
+
<p class="card-title">Card title</p>
|
|
121
|
+
<p class="card-sub">With subtitle</p>
|
|
122
|
+
<p>Shadow deepens on hover. No JS, no jumping.</p>
|
|
123
|
+
</div>
|
|
124
|
+
<div class="card-bar">
|
|
125
|
+
<button class="btn btn-primary btn-sm">Action</button>
|
|
126
|
+
<button class="btn btn-sm">Cancel</button>
|
|
127
|
+
</div>
|
|
128
|
+
</div>
|
|
129
|
+
<div class="card">
|
|
130
|
+
<div class="card-body">
|
|
131
|
+
<p class="card-title">Badges inside</p>
|
|
132
|
+
<p class="muted" style="display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.5rem;">
|
|
133
|
+
<span class="tag tag-soft-success">active</span>
|
|
134
|
+
<span class="tag tag-soft-danger">failed</span>
|
|
135
|
+
<span class="tag">draft</span>
|
|
136
|
+
</p>
|
|
137
|
+
</div>
|
|
138
|
+
</div>
|
|
139
|
+
</div>
|
|
140
|
+
|
|
141
|
+
<h2>Table & tabs</h2>
|
|
142
|
+
<div class="table-wrap">
|
|
143
|
+
<table class="table striped">
|
|
144
|
+
<thead><tr><th>Plan</th><th>Price</th><th>Status</th></tr></thead>
|
|
145
|
+
<tbody>
|
|
146
|
+
<tr><td>Free</td><td>$0</td><td><span class="tag tag-soft-success">active</span></td></tr>
|
|
147
|
+
<tr class="selected"><td>Pro</td><td>$20</td><td><span class="tag tag-primary">selected</span></td></tr>
|
|
148
|
+
<tr><td>Team</td><td>$75</td><td><span class="tag">draft</span></td></tr>
|
|
149
|
+
</tbody>
|
|
150
|
+
</table>
|
|
151
|
+
</div>
|
|
152
|
+
<div class="tabs" style="margin-top:1rem;">
|
|
153
|
+
<button class="tab selected">Overview</button>
|
|
154
|
+
<button class="tab">Analytics</button>
|
|
155
|
+
<button class="tab">Settings</button>
|
|
156
|
+
</div>
|
|
157
|
+
<div class="tabs tabs-line" style="margin-top:1rem;">
|
|
158
|
+
<button class="tab selected">Underline</button>
|
|
159
|
+
<button class="tab">Variant</button>
|
|
160
|
+
</div>
|
|
161
|
+
|
|
162
|
+
<h2>Alerts & toasts</h2>
|
|
163
|
+
<div class="alert">Neutral alert with a left accent bar.</div>
|
|
164
|
+
<div class="alert alert-success"><strong>Done.</strong> Changes saved.</div>
|
|
165
|
+
<div class="alert alert-warning"><strong>Careful.</strong> Cannot be undone.</div>
|
|
166
|
+
<div class="alert alert-danger"><strong>Error.</strong> Please retry.</div>
|
|
167
|
+
<div class="row-demo" style="margin-top:1rem;">
|
|
168
|
+
<div class="toast" style="max-width:18rem;"><p class="toast-title">Toast</p><p>Neutral dark toast.</p></div>
|
|
169
|
+
<div class="toast toast-primary" style="max-width:18rem;"><p class="toast-title">Primary</p><p>Brand colored.</p></div>
|
|
170
|
+
<div class="toast toast-success" style="max-width:18rem;"><p class="toast-title">Success</p><p>Saved.</p></div>
|
|
171
|
+
</div>
|
|
172
|
+
|
|
173
|
+
<h2 id="overlays">Tooltips, modal, accordion</h2>
|
|
174
|
+
<div class="row-demo" style="padding:1.5rem 0;">
|
|
175
|
+
<button class="btn tooltip" data-tip="Top tooltip">Top</button>
|
|
176
|
+
<button class="btn tooltip tooltip-b" data-tip="Bottom tooltip">Bottom</button>
|
|
177
|
+
<button class="btn tooltip tooltip-r" data-tip="Right">Right</button>
|
|
178
|
+
<label for="m1" class="btn btn-primary">Open modal</label>
|
|
179
|
+
</div>
|
|
180
|
+
<input type="checkbox" id="m1" class="modal-toggle" hidden>
|
|
181
|
+
<div class="modal">
|
|
182
|
+
<label class="modal-overlay" for="m1"></label>
|
|
183
|
+
<div class="modal-box">
|
|
184
|
+
<div class="modal-head">
|
|
185
|
+
<p class="modal-title">Modal title</p>
|
|
186
|
+
<label class="btn btn-close" for="m1" style="margin:0;"></label>
|
|
187
|
+
</div>
|
|
188
|
+
<div class="modal-body"><p>Pure CSS modal via hidden checkbox. Click overlay to close.</p></div>
|
|
189
|
+
<div class="modal-foot">
|
|
190
|
+
<label class="btn" for="m1">Close</label>
|
|
191
|
+
<label class="btn btn-primary" for="m1">Got it</label>
|
|
192
|
+
</div>
|
|
193
|
+
</div>
|
|
194
|
+
</div>
|
|
195
|
+
<details class="acc">
|
|
196
|
+
<summary>Accordion item one</summary>
|
|
197
|
+
<p>Expand/collapse with native details — no JS.</p>
|
|
198
|
+
</details>
|
|
199
|
+
<details class="acc">
|
|
200
|
+
<summary>Accordion item two</summary>
|
|
201
|
+
<p>Another panel.</p>
|
|
202
|
+
</details>
|
|
203
|
+
|
|
204
|
+
<h2>Flex & grid</h2>
|
|
205
|
+
<div class="m-grid m-grid-cols-3 m-gap-sm" style="margin-bottom:1rem;">
|
|
206
|
+
<div class="alert" style="margin:0">col</div>
|
|
207
|
+
<div class="alert alert-primary" style="margin:0">col</div>
|
|
208
|
+
<div class="alert" style="margin:0">col</div>
|
|
209
|
+
</div>
|
|
210
|
+
<div class="m-grid m-grid-cols-4 m-gap-sm" style="margin-bottom:1rem;">
|
|
211
|
+
<div class="alert" style="margin:0">auto</div>
|
|
212
|
+
<div class="alert" style="margin:0">auto</div>
|
|
213
|
+
<div class="alert" style="margin:0">auto</div>
|
|
214
|
+
<div class="alert" style="margin:0">auto</div>
|
|
215
|
+
</div>
|
|
216
|
+
<div class="m-grid m-grid-cols-3 m-gap-sm" style="margin-bottom:1rem;">
|
|
217
|
+
<div class="alert" style="margin:0">span 1</div>
|
|
218
|
+
<div class="alert alert-primary m-col-span-2" style="margin:0">m-col-span-2</div>
|
|
219
|
+
</div>
|
|
220
|
+
<div class="m-flex m-items-center m-justify-between m-gap-sm m-flex-wrap" style="margin-bottom:1rem;">
|
|
221
|
+
<span class="tag tag-soft">m-justify-between</span>
|
|
222
|
+
<span class="tag">with</span>
|
|
223
|
+
<span class="tag">m-gap-sm</span>
|
|
224
|
+
</div>
|
|
225
|
+
<div class="m-flex m-items-end m-gap" style="margin-bottom:1rem;">
|
|
226
|
+
<button class="btn btn-sm">items-end</button>
|
|
227
|
+
<button class="btn">center row</button>
|
|
228
|
+
<button class="btn btn-lg">varied heights</button>
|
|
229
|
+
</div>
|
|
230
|
+
<div class="card" style="max-width:24rem;">
|
|
231
|
+
<div class="card-body m-flex m-items-center m-gap-sm">
|
|
232
|
+
<span class="avatar">M</span>
|
|
233
|
+
<div class="m-flex-1">
|
|
234
|
+
<p class="card-title" style="margin:0">m-flex-1 filler</p>
|
|
235
|
+
<p class="card-sub">text takes remaining space</p>
|
|
236
|
+
</div>
|
|
237
|
+
<button class="btn btn-sm">Open</button>
|
|
238
|
+
</div>
|
|
239
|
+
</div>
|
|
240
|
+
|
|
241
|
+
<h2>Spacing utilities</h2>
|
|
242
|
+
<div class="card" style="max-width:30rem;">
|
|
243
|
+
<div class="card-body">
|
|
244
|
+
<p class="m-0 m-b-10"><span class="tag tag-soft">m-b-10</span> margin-bottom: 10px</p>
|
|
245
|
+
<p class="m-0 p-10" style="background:var(--m-surface); border-radius:4px;"><span class="tag">p-10</span> padding: 10px</p>
|
|
246
|
+
<p class="m-0 m-t-5 p-x-5 subtle" style="font-size:.8rem;">m-t-5 + p-x-5 on this line</p>
|
|
247
|
+
</div>
|
|
248
|
+
</div>
|
|
249
|
+
|
|
250
|
+
<h2>Misc</h2>
|
|
251
|
+
<progress class="progress" value="65" max="100"></progress>
|
|
252
|
+
<div class="divider">divider</div>
|
|
253
|
+
<div class="row-demo">
|
|
254
|
+
<span class="avatar">AL</span>
|
|
255
|
+
<span class="avatar avatar-sm">SM</span>
|
|
256
|
+
<span class="avatar avatar-lg">LG</span>
|
|
257
|
+
<kbd>Ctrl</kbd> <kbd>K</kbd>
|
|
258
|
+
<mark>marked</mark>
|
|
259
|
+
<blockquote style="margin:0;">Blockquote</blockquote>
|
|
260
|
+
</div>
|
|
261
|
+
<div class="row g-sm" style="margin-top:1rem;">
|
|
262
|
+
<div class="c-4"><div class="alert" style="margin:0">c-4</div></div>
|
|
263
|
+
<div class="c-8"><div class="alert" style="margin:0">c-8</div></div>
|
|
264
|
+
</div>
|
|
265
|
+
</div>
|
|
266
|
+
|
|
267
|
+
<footer class="container center" style="padding-block:2rem;">
|
|
268
|
+
<hr>
|
|
269
|
+
<small>Mates CSS — 19.8kb / 4.8kb gzipped. MIT.</small>
|
|
270
|
+
</footer>
|
|
271
|
+
|
|
272
|
+
<script>
|
|
273
|
+
const modes = ['light', 'dark', 'auto'];
|
|
274
|
+
let idx = 0;
|
|
275
|
+
function cycleTheme() {
|
|
276
|
+
idx = (idx + 1) % modes.length;
|
|
277
|
+
const mode = modes[idx];
|
|
278
|
+
if (mode === 'auto') document.documentElement.removeAttribute('data-theme');
|
|
279
|
+
else document.documentElement.setAttribute('data-theme', mode);
|
|
280
|
+
document.querySelector('.theme-toggle .btn').textContent = 'Theme: ' + mode;
|
|
281
|
+
}
|
|
282
|
+
// demo-only: removable tags
|
|
283
|
+
document.querySelectorAll('.tag-x').forEach(x => x.addEventListener('click', e => e.target.closest('.tag').remove()));
|
|
284
|
+
</script>
|
|
285
|
+
</body>
|
|
286
|
+
</html>
|
package/mates.css
ADDED
|
@@ -0,0 +1,711 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* Mates CSS v0.1.0 — a compact pure-CSS UI kit.
|
|
3
|
+
* No JS, no SCSS. MIT licensed.
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
:root {
|
|
8
|
+
--m-font: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
|
9
|
+
--m-font-head: Montserrat, system-ui, sans-serif;
|
|
10
|
+
--m-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
11
|
+
--m-r: 8px;
|
|
12
|
+
--m-r-sm: 5px;
|
|
13
|
+
--m-r-full: 999px;
|
|
14
|
+
--m-bg: #ffffff;
|
|
15
|
+
--m-surface: #f6f7f9;
|
|
16
|
+
--m-border: #e5e8ec;
|
|
17
|
+
--m-border-2: #d0d5db;
|
|
18
|
+
--m-fg: #14161a;
|
|
19
|
+
--m-fg-2: #5a6472;
|
|
20
|
+
--m-fg-3: #8a939f;
|
|
21
|
+
--m-on-primary: #ffffff;
|
|
22
|
+
--m-primary: #0172ad;
|
|
23
|
+
--m-primary-h: #016091;
|
|
24
|
+
--m-primary-a: #014e75;
|
|
25
|
+
--m-primary-soft: rgba(1,114,173,.12);
|
|
26
|
+
--m-success: #0e9f6e;
|
|
27
|
+
--m-warning: #c27803;
|
|
28
|
+
--m-danger: #e02424;
|
|
29
|
+
--m-shadow: 0 1px 2px rgba(16,24,40,.06), 0 4px 12px rgba(16,24,40,.07);
|
|
30
|
+
--m-dur: .2s;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
@media (prefers-color-scheme: dark) {
|
|
34
|
+
:root:not([data-theme="light"]) {
|
|
35
|
+
--m-bg: #14161a;
|
|
36
|
+
--m-surface: #1d2026;
|
|
37
|
+
--m-border: #2c3138;
|
|
38
|
+
--m-border-2: #3d434b;
|
|
39
|
+
--m-fg: #e8eaed;
|
|
40
|
+
--m-fg-2: #a8b0ba;
|
|
41
|
+
--m-fg-3: #6f7780;
|
|
42
|
+
--m-primary: #2fabdf;
|
|
43
|
+
--m-primary-h: #45b9e6;
|
|
44
|
+
--m-primary-a: #5ac3ed;
|
|
45
|
+
--m-primary-soft: rgba(47,171,223,.16);
|
|
46
|
+
--m-on-primary: #14161a;
|
|
47
|
+
--m-success: #2ee06e;
|
|
48
|
+
--m-warning: #ffc757;
|
|
49
|
+
--m-danger: #ff5c5c;
|
|
50
|
+
--m-shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.35);
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
:root[data-theme="dark"] {
|
|
55
|
+
--m-bg: #14161a;
|
|
56
|
+
--m-surface: #1d2026;
|
|
57
|
+
--m-border: #2c3138;
|
|
58
|
+
--m-border-2: #3d434b;
|
|
59
|
+
--m-fg: #e8eaed;
|
|
60
|
+
--m-fg-2: #a8b0ba;
|
|
61
|
+
--m-fg-3: #6f7780;
|
|
62
|
+
--m-primary: #2fabdf;
|
|
63
|
+
--m-primary-h: #45b9e6;
|
|
64
|
+
--m-primary-a: #5ac3ed;
|
|
65
|
+
--m-primary-soft: rgba(47,171,223,.16);
|
|
66
|
+
--m-on-primary: #14161a;
|
|
67
|
+
--m-success: #2ee06e;
|
|
68
|
+
--m-warning: #ffc757;
|
|
69
|
+
--m-danger: #ff5c5c;
|
|
70
|
+
--m-shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.35);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
/* reset */
|
|
74
|
+
*, *::before, *::after { box-sizing: border-box; }
|
|
75
|
+
* { margin: 0; }
|
|
76
|
+
body {
|
|
77
|
+
font-family: var(--m-font);
|
|
78
|
+
font-size: 15px;
|
|
79
|
+
line-height: 1.6;
|
|
80
|
+
color: var(--m-fg);
|
|
81
|
+
background: var(--m-bg);
|
|
82
|
+
-webkit-font-smoothing: antialiased;
|
|
83
|
+
}
|
|
84
|
+
:root { color-scheme: light dark; }
|
|
85
|
+
:root[data-theme="dark"] { color-scheme: dark; }
|
|
86
|
+
:root[data-theme="light"] { color-scheme: light; }
|
|
87
|
+
img, svg, video { display: block; max-width: 100%; }
|
|
88
|
+
input, button, select, textarea { font: inherit; color: inherit; }
|
|
89
|
+
|
|
90
|
+
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; }
|
|
91
|
+
h1{font-size:2rem}h2{font-size:1.55rem}h3{font-size:1.25rem}h4{font-size:1.1rem}h5{font-size:.95rem}
|
|
92
|
+
h6 { font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; color: var(--m-fg-3); }
|
|
93
|
+
p { margin: .6em 0; }
|
|
94
|
+
small { font-size: .84em; color: var(--m-fg-3); }
|
|
95
|
+
a { color: var(--m-primary); text-decoration: none; }
|
|
96
|
+
a:hover { text-decoration: underline; }
|
|
97
|
+
hr { border: 0; border-top: 1px solid var(--m-border); margin: 1.6em 0; }
|
|
98
|
+
blockquote {
|
|
99
|
+
border-left: 3px solid var(--m-border-2);
|
|
100
|
+
background: var(--m-surface);
|
|
101
|
+
border-radius: 0 var(--m-r-sm) var(--m-r-sm) 0;
|
|
102
|
+
padding: .7em 1.1em;
|
|
103
|
+
margin: 1em 0;
|
|
104
|
+
color: var(--m-fg-2);
|
|
105
|
+
}
|
|
106
|
+
ul, ol { padding-left: 1.4em; }
|
|
107
|
+
li { margin: .25em 0; }
|
|
108
|
+
li::marker { color: var(--m-fg-3); }
|
|
109
|
+
kbd {
|
|
110
|
+
font-family: var(--m-mono);
|
|
111
|
+
font-size: .8em;
|
|
112
|
+
padding: .15em .45em;
|
|
113
|
+
border: 1px solid var(--m-border);
|
|
114
|
+
border-bottom-width: 2px;
|
|
115
|
+
border-radius: var(--m-r-sm);
|
|
116
|
+
background: var(--m-surface);
|
|
117
|
+
}
|
|
118
|
+
mark { padding: .1em .3em; border-radius: 3px; background: rgba(255,199,87,.35); }
|
|
119
|
+
::selection { background: var(--m-primary); color: var(--m-on-primary); }
|
|
120
|
+
:focus { outline: none; }
|
|
121
|
+
:focus-visible { outline: 2px solid var(--m-primary); outline-offset: 2px; }
|
|
122
|
+
|
|
123
|
+
/* buttons */
|
|
124
|
+
.btn {
|
|
125
|
+
display: inline-flex;
|
|
126
|
+
align-items: center;
|
|
127
|
+
justify-content: center;
|
|
128
|
+
gap: .45em;
|
|
129
|
+
padding: .38em .95em;
|
|
130
|
+
border: 1px solid transparent;
|
|
131
|
+
border-radius: var(--m-r-sm);
|
|
132
|
+
font-family: var(--m-font-head);
|
|
133
|
+
font-size: .8rem;
|
|
134
|
+
font-weight: 600;
|
|
135
|
+
letter-spacing: .02em;
|
|
136
|
+
line-height: 1.5;
|
|
137
|
+
cursor: pointer;
|
|
138
|
+
user-select: none;
|
|
139
|
+
text-decoration: none;
|
|
140
|
+
background: var(--m-surface);
|
|
141
|
+
color: var(--m-fg);
|
|
142
|
+
transition: background var(--m-dur), color var(--m-dur), border-color var(--m-dur);
|
|
143
|
+
}
|
|
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; }
|
|
147
|
+
|
|
148
|
+
.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); }
|
|
151
|
+
.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; }
|
|
154
|
+
.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: #fff; }
|
|
158
|
+
.btn-success:hover { filter: brightness(1.1); }
|
|
159
|
+
.btn-success:active { filter: brightness(.92); }
|
|
160
|
+
.btn-danger { background: var(--m-danger); color: #fff; }
|
|
161
|
+
.btn-danger:hover { filter: brightness(1.1); }
|
|
162
|
+
.btn-danger:active { filter: brightness(.92); }
|
|
163
|
+
.btn-warning { background: var(--m-warning); color: #fff; }
|
|
164
|
+
.btn-warning:hover { filter: brightness(1.1); }
|
|
165
|
+
.btn-warning:active { filter: brightness(.92); }
|
|
166
|
+
.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); }
|
|
169
|
+
.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); }
|
|
172
|
+
.btn-link { background: transparent; color: var(--m-primary); padding-inline: .2em; }
|
|
173
|
+
.btn-link:hover { background: transparent; text-decoration: underline; }
|
|
174
|
+
.btn-sm { padding: .25em .7em; font-size: .72rem; }
|
|
175
|
+
.btn-lg { padding: .55em 1.3em; font-size: .92rem; }
|
|
176
|
+
.btn-block { display: flex; width: 100%; }
|
|
177
|
+
.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; }
|
|
181
|
+
|
|
182
|
+
.btn-spin::after {
|
|
183
|
+
content: "";
|
|
184
|
+
width: 1em;
|
|
185
|
+
height: 1em;
|
|
186
|
+
border: 2px solid currentColor;
|
|
187
|
+
border-right-color: transparent;
|
|
188
|
+
border-top-color: transparent;
|
|
189
|
+
border-radius: 50%;
|
|
190
|
+
animation: m-spin .6s linear infinite;
|
|
191
|
+
}
|
|
192
|
+
@keyframes m-spin { to { transform: rotate(360deg); } }
|
|
193
|
+
|
|
194
|
+
.btn-close {
|
|
195
|
+
width: 20px;
|
|
196
|
+
height: 20px;
|
|
197
|
+
min-width: 0;
|
|
198
|
+
padding: 0;
|
|
199
|
+
border: 0;
|
|
200
|
+
border-radius: var(--m-r-full);
|
|
201
|
+
background: rgb(from currentColor r g b / .18);
|
|
202
|
+
position: relative;
|
|
203
|
+
}
|
|
204
|
+
.btn-close::before, .btn-close::after {
|
|
205
|
+
content: "";
|
|
206
|
+
position: absolute;
|
|
207
|
+
left: 50%;
|
|
208
|
+
top: 50%;
|
|
209
|
+
width: 50%;
|
|
210
|
+
height: 2px;
|
|
211
|
+
background: currentColor;
|
|
212
|
+
translate: -50% -50%;
|
|
213
|
+
rotate: 45deg;
|
|
214
|
+
}
|
|
215
|
+
.btn-close::after { rotate: -45deg; }
|
|
216
|
+
.btn-close:hover { background: rgb(from currentColor r g b / .3); }
|
|
217
|
+
|
|
218
|
+
/* tags */
|
|
219
|
+
.tag {
|
|
220
|
+
display: inline-flex;
|
|
221
|
+
align-items: center;
|
|
222
|
+
gap: .35em;
|
|
223
|
+
padding: .18em .7em;
|
|
224
|
+
border-radius: var(--m-r-full);
|
|
225
|
+
font-size: .78rem;
|
|
226
|
+
font-weight: 600;
|
|
227
|
+
line-height: 1.6;
|
|
228
|
+
background: var(--m-surface);
|
|
229
|
+
color: var(--m-fg-2);
|
|
230
|
+
border: 1px solid var(--m-border);
|
|
231
|
+
white-space: nowrap;
|
|
232
|
+
}
|
|
233
|
+
.tag-primary { background: var(--m-primary); border-color: var(--m-primary); color: var(--m-on-primary); }
|
|
234
|
+
.tag-success { background: var(--m-success); border-color: var(--m-success); color: #fff; }
|
|
235
|
+
.tag-warning { background: var(--m-warning); border-color: var(--m-warning); color: #fff; }
|
|
236
|
+
.tag-danger { background: var(--m-danger); border-color: var(--m-danger); color: #fff; }
|
|
237
|
+
.tag-soft { background: var(--m-primary-soft); border-color: transparent; color: var(--m-primary); }
|
|
238
|
+
.tag-soft-success { background: color-mix(in srgb, var(--m-success) 14%, transparent); border-color: transparent; color: var(--m-success); }
|
|
239
|
+
.tag-soft-danger { background: color-mix(in srgb, var(--m-danger) 12%, transparent); border-color: transparent; color: var(--m-danger); }
|
|
240
|
+
.tag-rounded { border-radius: 6px; }
|
|
241
|
+
.tag-x {
|
|
242
|
+
display: inline-block;
|
|
243
|
+
width: 1.1em;
|
|
244
|
+
height: 1.1em;
|
|
245
|
+
border-radius: 50%;
|
|
246
|
+
background: rgb(from currentColor r g b / .2);
|
|
247
|
+
position: relative;
|
|
248
|
+
cursor: pointer;
|
|
249
|
+
}
|
|
250
|
+
.tag-x::before, .tag-x::after {
|
|
251
|
+
content: "";
|
|
252
|
+
position: absolute;
|
|
253
|
+
left: 50%;
|
|
254
|
+
top: 50%;
|
|
255
|
+
width: 55%;
|
|
256
|
+
height: 1.5px;
|
|
257
|
+
background: currentColor;
|
|
258
|
+
translate: -50% -50%;
|
|
259
|
+
rotate: 45deg;
|
|
260
|
+
}
|
|
261
|
+
.tag-x::after { rotate: -45deg; }
|
|
262
|
+
.tag-x:hover { background: rgb(from currentColor r g b / .4); }
|
|
263
|
+
|
|
264
|
+
/* forms */
|
|
265
|
+
.label { display: block; font-weight: 700; font-size: .85rem; line-height: 1.4; margin: .8rem 0 .15rem; }
|
|
266
|
+
.hint { display: block; font-size: .78rem; color: var(--m-fg-3); margin-top: .25rem; }
|
|
267
|
+
.input {
|
|
268
|
+
width: 100%;
|
|
269
|
+
padding: .45em .8em;
|
|
270
|
+
background: var(--m-bg);
|
|
271
|
+
border: 1px solid var(--m-border-2);
|
|
272
|
+
border-radius: var(--m-r-sm);
|
|
273
|
+
color: var(--m-fg);
|
|
274
|
+
transition: border-color var(--m-dur), box-shadow var(--m-dur);
|
|
275
|
+
}
|
|
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 {
|
|
284
|
+
appearance: none;
|
|
285
|
+
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
|
+
background-repeat: no-repeat;
|
|
287
|
+
background-position: right .8em center;
|
|
288
|
+
background-size: .5em .6em;
|
|
289
|
+
padding-right: 2.2em;
|
|
290
|
+
}
|
|
291
|
+
input[type="search"].input {
|
|
292
|
+
padding-left: 2.1em;
|
|
293
|
+
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
|
+
background-repeat: no-repeat;
|
|
295
|
+
background-position: left .6em center;
|
|
296
|
+
}
|
|
297
|
+
|
|
298
|
+
.check {
|
|
299
|
+
appearance: none;
|
|
300
|
+
width: 1.1em;
|
|
301
|
+
height: 1.1em;
|
|
302
|
+
margin: 0 .45em 0 0;
|
|
303
|
+
flex-shrink: 0;
|
|
304
|
+
vertical-align: -.18em;
|
|
305
|
+
border: 1.5px solid var(--m-border-2);
|
|
306
|
+
background: var(--m-bg);
|
|
307
|
+
cursor: pointer;
|
|
308
|
+
transition: background var(--m-dur), border-color var(--m-dur);
|
|
309
|
+
}
|
|
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 {
|
|
315
|
+
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
|
+
background-size: .72em;
|
|
317
|
+
background-position: center;
|
|
318
|
+
background-repeat: no-repeat;
|
|
319
|
+
}
|
|
320
|
+
input[type="radio"].check:checked {
|
|
321
|
+
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
|
+
background-size: 1em;
|
|
323
|
+
background-position: center;
|
|
324
|
+
background-repeat: no-repeat;
|
|
325
|
+
}
|
|
326
|
+
.check:disabled { opacity: .4; cursor: not-allowed; }
|
|
327
|
+
|
|
328
|
+
.switch { position: relative; display: inline-block; width: 2.6em; height: 1.45em; flex-shrink: 0; }
|
|
329
|
+
.switch input { opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; position: absolute; z-index: 1; }
|
|
330
|
+
.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; }
|
|
331
|
+
.switch i::after {
|
|
332
|
+
content: "";
|
|
333
|
+
position: absolute;
|
|
334
|
+
left: 3px;
|
|
335
|
+
top: 50%;
|
|
336
|
+
translate: 0 -50%;
|
|
337
|
+
width: 1.05em;
|
|
338
|
+
height: 1.05em;
|
|
339
|
+
border-radius: 50%;
|
|
340
|
+
background: #fff;
|
|
341
|
+
box-shadow: 0 1px 3px rgba(0,0,0,.25);
|
|
342
|
+
transition: left var(--m-dur);
|
|
343
|
+
}
|
|
344
|
+
.switch input:checked + i { background: var(--m-primary); }
|
|
345
|
+
.switch input:checked + i::after { left: calc(100% - 1.05em - 3px); }
|
|
346
|
+
.switch input:focus-visible + i { outline: 2px solid var(--m-primary); outline-offset: 2px; }
|
|
347
|
+
|
|
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 {
|
|
351
|
+
appearance: none;
|
|
352
|
+
width: 1em;
|
|
353
|
+
height: 1em;
|
|
354
|
+
margin-top: calc(2px - .5em);
|
|
355
|
+
border-radius: 50%;
|
|
356
|
+
background: var(--m-primary);
|
|
357
|
+
border: 2px solid var(--m-bg);
|
|
358
|
+
box-shadow: 0 0 0 1px var(--m-border-2);
|
|
359
|
+
}
|
|
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; }
|
|
363
|
+
|
|
364
|
+
.fgroup { display: flex; margin: .5rem 0; }
|
|
365
|
+
.fgroup > * { border-radius: 0; }
|
|
366
|
+
.fgroup > :first-child { border-radius: var(--m-r-sm) 0 0 var(--m-r-sm); }
|
|
367
|
+
.fgroup > :last-child { border-radius: 0 var(--m-r-sm) var(--m-r-sm) 0; }
|
|
368
|
+
.fgroup > * + * { margin-left: -1px; }
|
|
369
|
+
.fgroup-label {
|
|
370
|
+
display: inline-flex;
|
|
371
|
+
align-items: center;
|
|
372
|
+
padding: 0 .8em;
|
|
373
|
+
background: var(--m-surface);
|
|
374
|
+
border: 1px solid var(--m-border-2);
|
|
375
|
+
color: var(--m-fg-2);
|
|
376
|
+
font-size: .88rem;
|
|
377
|
+
white-space: nowrap;
|
|
378
|
+
}
|
|
379
|
+
.fgroup .btn { flex-shrink: 0; }
|
|
380
|
+
|
|
381
|
+
/* card */
|
|
382
|
+
.card {
|
|
383
|
+
background: var(--m-bg);
|
|
384
|
+
border: 1px solid var(--m-border);
|
|
385
|
+
border-radius: var(--m-r);
|
|
386
|
+
box-shadow: var(--m-shadow);
|
|
387
|
+
overflow: hidden;
|
|
388
|
+
}
|
|
389
|
+
.card-body { padding: 1rem 1.25rem; }
|
|
390
|
+
.card-title { font-size: 1.08rem; margin: 0 0 .2em; }
|
|
391
|
+
.card-sub { font-size: .85rem; color: var(--m-fg-3); margin: 0; }
|
|
392
|
+
.card-bar {
|
|
393
|
+
display: flex;
|
|
394
|
+
align-items: center;
|
|
395
|
+
gap: .5rem;
|
|
396
|
+
padding: .8rem 1.25rem;
|
|
397
|
+
border-top: 1px solid var(--m-border);
|
|
398
|
+
background: var(--m-surface);
|
|
399
|
+
}
|
|
400
|
+
.card-img { width: 100%; display: block; }
|
|
401
|
+
.card-hover { transition: box-shadow var(--m-dur); }
|
|
402
|
+
.card-hover:hover { box-shadow: 0 2px 4px rgba(16,24,40,.08), 0 10px 24px rgba(16,24,40,.12); }
|
|
403
|
+
|
|
404
|
+
/* table */
|
|
405
|
+
.table-wrap { overflow-x: auto; }
|
|
406
|
+
.table { width: 100%; border-collapse: collapse; font-size: .92rem; }
|
|
407
|
+
.table th, .table td { padding: .55em .8em; text-align: left; border-bottom: 1px solid var(--m-border); }
|
|
408
|
+
.table thead th {
|
|
409
|
+
font-size: .74rem;
|
|
410
|
+
font-weight: 700;
|
|
411
|
+
text-transform: uppercase;
|
|
412
|
+
letter-spacing: .05em;
|
|
413
|
+
color: var(--m-fg-3);
|
|
414
|
+
background: var(--m-surface);
|
|
415
|
+
}
|
|
416
|
+
.table tbody tr { transition: background var(--m-dur); }
|
|
417
|
+
.table tbody tr:hover { background: var(--m-surface); }
|
|
418
|
+
.table tr.selected { background: var(--m-primary-soft); }
|
|
419
|
+
.table.striped tbody tr:nth-child(even) { background: color-mix(in srgb, var(--m-surface) 55%, transparent); }
|
|
420
|
+
.table.bordered th, .table.bordered td { border: 1px solid var(--m-border); }
|
|
421
|
+
.table caption { caption-side: bottom; padding: .5em 0; font-size: .8rem; color: var(--m-fg-3); text-align: left; }
|
|
422
|
+
|
|
423
|
+
/* tabs */
|
|
424
|
+
.tabs { display: flex; gap: .25rem; padding: .25rem; background: var(--m-surface); border-radius: var(--m-r-sm); width: fit-content; max-width: 100%; }
|
|
425
|
+
.tab {
|
|
426
|
+
padding: .38em 1em;
|
|
427
|
+
border: 0;
|
|
428
|
+
border-radius: calc(var(--m-r-sm) - 1px);
|
|
429
|
+
background: transparent;
|
|
430
|
+
color: var(--m-fg-3);
|
|
431
|
+
font-weight: 600;
|
|
432
|
+
font-size: .88rem;
|
|
433
|
+
cursor: pointer;
|
|
434
|
+
transition: color var(--m-dur), background var(--m-dur);
|
|
435
|
+
}
|
|
436
|
+
.tab:hover { color: var(--m-fg); }
|
|
437
|
+
.tab.selected { background: var(--m-bg); color: var(--m-fg); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
|
|
438
|
+
.tabs-line { background: none; padding: 0; border-radius: 0; border-bottom: 2px solid var(--m-border); width: auto; }
|
|
439
|
+
.tabs-line .tab { border-radius: 0; margin-bottom: -2px; border-bottom: 2px solid transparent; }
|
|
440
|
+
.tabs-line .tab.selected { background: transparent; box-shadow: none; color: var(--m-primary); border-bottom-color: var(--m-primary); }
|
|
441
|
+
|
|
442
|
+
/* toast */
|
|
443
|
+
.toast {
|
|
444
|
+
padding: .8rem 1.1rem;
|
|
445
|
+
border-radius: var(--m-r-sm);
|
|
446
|
+
background: var(--m-fg);
|
|
447
|
+
color: var(--m-bg);
|
|
448
|
+
box-shadow: var(--m-shadow);
|
|
449
|
+
margin: .5rem 0;
|
|
450
|
+
}
|
|
451
|
+
.toast-title { font-weight: 700; margin: 0 0 .15em; }
|
|
452
|
+
.toast p { margin: 0; font-size: .88rem; opacity: .85; }
|
|
453
|
+
.toast-success { background: var(--m-success); color: #fff; }
|
|
454
|
+
.toast-danger { background: var(--m-danger); color: #fff; }
|
|
455
|
+
.toast-primary { background: var(--m-primary); color: var(--m-on-primary); }
|
|
456
|
+
|
|
457
|
+
/* alert */
|
|
458
|
+
.alert {
|
|
459
|
+
padding: .8rem 1.1rem;
|
|
460
|
+
border: 1px solid var(--m-border);
|
|
461
|
+
border-left: 3px solid var(--m-fg-3);
|
|
462
|
+
border-radius: var(--m-r-sm);
|
|
463
|
+
background: var(--m-surface);
|
|
464
|
+
margin: .8rem 0;
|
|
465
|
+
}
|
|
466
|
+
.alert p { margin: 0; }
|
|
467
|
+
.alert-success { border-left-color: var(--m-success); background: color-mix(in srgb, var(--m-success) 10%, var(--m-bg)); }
|
|
468
|
+
.alert-warning { border-left-color: var(--m-warning); background: color-mix(in srgb, var(--m-warning) 12%, var(--m-bg)); }
|
|
469
|
+
.alert-danger { border-left-color: var(--m-danger); background: color-mix(in srgb, var(--m-danger) 10%, var(--m-bg)); }
|
|
470
|
+
.alert-primary { border-left-color: var(--m-primary); background: var(--m-primary-soft); }
|
|
471
|
+
|
|
472
|
+
/* tooltip */
|
|
473
|
+
.tooltip { position: relative; }
|
|
474
|
+
.tooltip::after {
|
|
475
|
+
content: attr(data-tip);
|
|
476
|
+
position: absolute;
|
|
477
|
+
bottom: calc(100% + 6px);
|
|
478
|
+
left: 50%;
|
|
479
|
+
translate: -50% 2px;
|
|
480
|
+
padding: .3em .7em;
|
|
481
|
+
border-radius: var(--m-r-sm);
|
|
482
|
+
background: var(--m-fg);
|
|
483
|
+
color: var(--m-bg);
|
|
484
|
+
font-size: .72rem;
|
|
485
|
+
white-space: nowrap;
|
|
486
|
+
opacity: 0;
|
|
487
|
+
pointer-events: none;
|
|
488
|
+
transition: opacity var(--m-dur), translate var(--m-dur);
|
|
489
|
+
z-index: 50;
|
|
490
|
+
}
|
|
491
|
+
.tooltip:hover::after { opacity: 1; translate: -50% 0; }
|
|
492
|
+
.tooltip-b::after { bottom: auto; top: calc(100% + 6px); translate: -50% -2px; }
|
|
493
|
+
.tooltip-b:hover::after { translate: -50% 0; }
|
|
494
|
+
.tooltip-r::after { bottom: auto; top: 50%; left: calc(100% + 6px); translate: -2px -50%; }
|
|
495
|
+
.tooltip-r:hover::after { translate: 0 -50%; }
|
|
496
|
+
.tooltip-l::after { bottom: auto; top: 50%; right: calc(100% + 6px); left: auto; translate: 2px -50%; }
|
|
497
|
+
.tooltip-l:hover::after { translate: 0 -50%; }
|
|
498
|
+
|
|
499
|
+
/* modal (checkbox trick) */
|
|
500
|
+
.modal-toggle { display: none; }
|
|
501
|
+
.modal {
|
|
502
|
+
position: fixed;
|
|
503
|
+
inset: 0;
|
|
504
|
+
display: flex;
|
|
505
|
+
align-items: center;
|
|
506
|
+
justify-content: center;
|
|
507
|
+
padding: 1rem;
|
|
508
|
+
visibility: hidden;
|
|
509
|
+
opacity: 0;
|
|
510
|
+
transition: opacity var(--m-dur), visibility var(--m-dur);
|
|
511
|
+
z-index: 100;
|
|
512
|
+
}
|
|
513
|
+
.modal-toggle:checked ~ .modal { visibility: visible; opacity: 1; }
|
|
514
|
+
.modal-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
|
|
515
|
+
.modal-box {
|
|
516
|
+
position: relative;
|
|
517
|
+
width: min(28rem, 100%);
|
|
518
|
+
background: var(--m-bg);
|
|
519
|
+
border: 1px solid var(--m-border);
|
|
520
|
+
border-radius: var(--m-r);
|
|
521
|
+
box-shadow: var(--m-shadow);
|
|
522
|
+
}
|
|
523
|
+
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem .5rem; }
|
|
524
|
+
.modal-title { margin: 0; font-size: 1.1rem; }
|
|
525
|
+
.modal-foot { display: flex; justify-content: flex-end; gap: .5rem; padding: .75rem 1.25rem 1.1rem; }
|
|
526
|
+
.modal-box > .modal-body { padding: .25rem 1.25rem; }
|
|
527
|
+
|
|
528
|
+
/* accordion */
|
|
529
|
+
details.acc {
|
|
530
|
+
border: 1px solid var(--m-border);
|
|
531
|
+
border-radius: var(--m-r-sm);
|
|
532
|
+
background: var(--m-bg);
|
|
533
|
+
padding: .7em 1em;
|
|
534
|
+
margin: .5em 0;
|
|
535
|
+
}
|
|
536
|
+
details.acc summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; align-items: center; justify-content: space-between; }
|
|
537
|
+
details.acc summary::-webkit-details-marker { display: none; }
|
|
538
|
+
details.acc summary::after {
|
|
539
|
+
content: "";
|
|
540
|
+
width: .55em;
|
|
541
|
+
height: .55em;
|
|
542
|
+
border: 2px solid var(--m-fg-3);
|
|
543
|
+
border-top: 0;
|
|
544
|
+
border-left: 0;
|
|
545
|
+
rotate: 45deg;
|
|
546
|
+
transition: rotate var(--m-dur);
|
|
547
|
+
}
|
|
548
|
+
details.acc[open] summary::after { rotate: 225deg; }
|
|
549
|
+
details.acc[open] summary { margin-bottom: .4em; }
|
|
550
|
+
|
|
551
|
+
/* nav */
|
|
552
|
+
.nav {
|
|
553
|
+
display: flex;
|
|
554
|
+
align-items: center;
|
|
555
|
+
gap: 1.25rem;
|
|
556
|
+
padding: .6rem 1.1rem;
|
|
557
|
+
background: var(--m-bg);
|
|
558
|
+
border: 1px solid var(--m-border);
|
|
559
|
+
border-radius: var(--m-r);
|
|
560
|
+
box-shadow: var(--m-shadow);
|
|
561
|
+
flex-wrap: wrap;
|
|
562
|
+
}
|
|
563
|
+
.nav-brand { font-family: var(--m-font-head); font-weight: 700; font-size: 1.02rem; color: var(--m-fg); }
|
|
564
|
+
.nav a { color: var(--m-fg-3); font-weight: 600; font-size: .9rem; }
|
|
565
|
+
.nav a:hover { color: var(--m-fg); text-decoration: none; }
|
|
566
|
+
.nav .selected { color: var(--m-fg); }
|
|
567
|
+
.nav-space { flex: 1; }
|
|
568
|
+
|
|
569
|
+
/* avatar */
|
|
570
|
+
.avatar {
|
|
571
|
+
display: inline-flex;
|
|
572
|
+
align-items: center;
|
|
573
|
+
justify-content: center;
|
|
574
|
+
width: 2.6em;
|
|
575
|
+
height: 2.6em;
|
|
576
|
+
border-radius: 50%;
|
|
577
|
+
background: var(--m-primary-soft);
|
|
578
|
+
color: var(--m-primary);
|
|
579
|
+
font-weight: 700;
|
|
580
|
+
font-size: .85rem;
|
|
581
|
+
overflow: hidden;
|
|
582
|
+
flex-shrink: 0;
|
|
583
|
+
}
|
|
584
|
+
.avatar-sm { width: 2em; height: 2em; font-size: .7rem; }
|
|
585
|
+
.avatar-lg { width: 3.4em; height: 3.4em; font-size: 1.05rem; }
|
|
586
|
+
|
|
587
|
+
/* progress */
|
|
588
|
+
progress.progress {
|
|
589
|
+
appearance: none;
|
|
590
|
+
width: 100%;
|
|
591
|
+
height: .5rem;
|
|
592
|
+
border: 0;
|
|
593
|
+
overflow: hidden;
|
|
594
|
+
border-radius: var(--m-r-full);
|
|
595
|
+
background: var(--m-surface);
|
|
596
|
+
display: block;
|
|
597
|
+
}
|
|
598
|
+
progress.progress::-webkit-progress-bar { background: var(--m-surface); }
|
|
599
|
+
progress.progress::-webkit-progress-value { background: var(--m-primary); border-radius: var(--m-r-full); }
|
|
600
|
+
progress.progress::-moz-progress-bar { background: var(--m-primary); border-radius: var(--m-r-full); }
|
|
601
|
+
|
|
602
|
+
/* layout */
|
|
603
|
+
.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); }
|
|
609
|
+
|
|
610
|
+
.c-1{flex:0 0 8.3333%;max-width:8.3333%}.c-2{flex:0 0 16.6667%;max-width:16.6667%}
|
|
611
|
+
.c-3{flex:0 0 25%;max-width:25%}.c-4{flex:0 0 33.3333%;max-width:33.3333%}
|
|
612
|
+
.c-5{flex:0 0 41.6667%;max-width:41.6667%}.c-6{flex:0 0 50%;max-width:50%}
|
|
613
|
+
.c-7{flex:0 0 58.3333%;max-width:58.3333%}.c-8{flex:0 0 66.6667%;max-width:66.6667%}
|
|
614
|
+
.c-9{flex:0 0 75%;max-width:75%}.c-10{flex:0 0 83.3333%;max-width:83.3333%}
|
|
615
|
+
.c-11{flex:0 0 91.6667%;max-width:91.6667%}.c-12{flex:0 0 100%;max-width:100%}
|
|
616
|
+
|
|
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}
|
|
620
|
+
.center{text-align:center}
|
|
621
|
+
.divider{display:flex;align-items:center;gap:1rem;margin:1.5em 0;color:var(--m-fg-3);font-size:.8rem}
|
|
622
|
+
.divider::before,.divider::after{content:"";flex:1;border-top:1px solid var(--m-border)}
|
|
623
|
+
|
|
624
|
+
/* spacing utilities (px scale) */
|
|
625
|
+
.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}
|
|
626
|
+
.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}
|
|
627
|
+
.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}
|
|
628
|
+
.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}
|
|
629
|
+
.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}
|
|
630
|
+
.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}
|
|
631
|
+
.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}
|
|
632
|
+
.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}
|
|
633
|
+
.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}
|
|
634
|
+
.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}
|
|
635
|
+
.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}
|
|
636
|
+
.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}
|
|
637
|
+
.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}
|
|
638
|
+
.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}
|
|
639
|
+
|
|
640
|
+
/* utilities */
|
|
641
|
+
.mono{font-family:var(--m-mono);font-size:.86em}
|
|
642
|
+
.muted{color:var(--m-fg-2)}
|
|
643
|
+
.subtle{color:var(--m-fg-3)}
|
|
644
|
+
.overline{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--m-fg-3)}
|
|
645
|
+
.hidden{display:none!important}
|
|
646
|
+
|
|
647
|
+
/* flex utilities */
|
|
648
|
+
.m-flex{display:flex}
|
|
649
|
+
.m-inline-flex{display:inline-flex}
|
|
650
|
+
.m-flex-row{flex-direction:row}
|
|
651
|
+
.m-flex-col{flex-direction:column}
|
|
652
|
+
.m-flex-wrap{flex-wrap:wrap}
|
|
653
|
+
.m-flex-nowrap{flex-wrap:nowrap}
|
|
654
|
+
.m-flex-1{flex:1 1 0%;min-width:0}
|
|
655
|
+
.m-flex-auto{flex:1 1 auto}
|
|
656
|
+
.m-flex-none{flex:none}
|
|
657
|
+
.m-grow{flex-grow:1}
|
|
658
|
+
.m-shrink-0{flex-shrink:0}
|
|
659
|
+
.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}
|
|
665
|
+
.m-self-start{align-self:flex-start}
|
|
666
|
+
.m-self-center{align-self:center}
|
|
667
|
+
.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}
|
|
674
|
+
.m-content-start{align-content:flex-start}
|
|
675
|
+
.m-content-between{align-content:space-between}
|
|
676
|
+
.m-content-center{align-content:center}
|
|
677
|
+
.m-order-first{order:-1}
|
|
678
|
+
.m-order-last{order:99}
|
|
679
|
+
|
|
680
|
+
/* gap scale */
|
|
681
|
+
.m-gap-0{gap:0}
|
|
682
|
+
.m-gap-xs{gap:.4rem}
|
|
683
|
+
.m-gap-sm{gap:.65rem}
|
|
684
|
+
.m-gap{gap:1rem}
|
|
685
|
+
.m-gap-lg{gap:1.75rem}
|
|
686
|
+
.m-gap-xl{gap:2.5rem}
|
|
687
|
+
.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}
|
|
688
|
+
.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}
|
|
689
|
+
|
|
690
|
+
/* grid utilities */
|
|
691
|
+
.m-grid{display:grid}
|
|
692
|
+
.m-inline-grid{display:inline-grid}
|
|
693
|
+
.m-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
|
|
694
|
+
.m-grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
|
|
695
|
+
.m-grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
|
|
696
|
+
.m-grid-cols-auto{grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}
|
|
697
|
+
.m-grid-cols-auto-sm{grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}
|
|
698
|
+
.m-grid-cols-auto-lg{grid-template-columns:repeat(auto-fit,minmax(22rem,1fr))}
|
|
699
|
+
.m-grid-rows-2{grid-template-rows:repeat(2,minmax(0,1fr))}
|
|
700
|
+
.m-grid-rows-3{grid-template-rows:repeat(3,minmax(0,1fr))}
|
|
701
|
+
.m-grid-flow-dense{grid-auto-flow:row dense}
|
|
702
|
+
.m-col-span-2{grid-column:span 2/span 2}
|
|
703
|
+
.m-col-span-3{grid-column:span 3/span 3}
|
|
704
|
+
.m-col-span-full{grid-column:1/-1}
|
|
705
|
+
.m-row-span-2{grid-row:span 2/span 2}
|
|
706
|
+
|
|
707
|
+
/* responsive: stacked columns collapse on small screens */
|
|
708
|
+
@media (max-width:640px){
|
|
709
|
+
.m-grid-cols-2,.m-grid-cols-3,.m-grid-cols-4{grid-template-columns:1fr}
|
|
710
|
+
.m-col-span-2,.m-col-span-3{grid-column:auto}
|
|
711
|
+
}
|
package/mates.min.css
ADDED
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* Mates CSS v0.1.0 — a compact pure-CSS UI kit.
|
|
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}}
|
package/package.json
ADDED
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
{
|
|
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.",
|
|
5
|
+
"style": "mates.css",
|
|
6
|
+
"main": "mates.min.css",
|
|
7
|
+
"files": [
|
|
8
|
+
"mates.css",
|
|
9
|
+
"mates.min.css",
|
|
10
|
+
"demo.html"
|
|
11
|
+
],
|
|
12
|
+
"keywords": [
|
|
13
|
+
"css",
|
|
14
|
+
"ui-kit",
|
|
15
|
+
"components",
|
|
16
|
+
"buttons",
|
|
17
|
+
"cards",
|
|
18
|
+
"modals",
|
|
19
|
+
"dark-mode",
|
|
20
|
+
"css-variables",
|
|
21
|
+
"design-tokens",
|
|
22
|
+
"flexbox",
|
|
23
|
+
"grid",
|
|
24
|
+
"utilities",
|
|
25
|
+
"no-js",
|
|
26
|
+
"micro-framework"
|
|
27
|
+
],
|
|
28
|
+
"homepage": "https://github.com/your-username/mates-css#readme",
|
|
29
|
+
"repository": {
|
|
30
|
+
"type": "git",
|
|
31
|
+
"url": "git+https://github.com/your-username/mates-css.git"
|
|
32
|
+
},
|
|
33
|
+
"bugs": {
|
|
34
|
+
"url": "https://github.com/your-username/mates-css/issues"
|
|
35
|
+
},
|
|
36
|
+
"license": "MIT",
|
|
37
|
+
"author": "your-name",
|
|
38
|
+
"sideEffects": [
|
|
39
|
+
"*.css"
|
|
40
|
+
],
|
|
41
|
+
"exports": {
|
|
42
|
+
".": {
|
|
43
|
+
"style": "./mates.css",
|
|
44
|
+
"default": "./mates.min.css"
|
|
45
|
+
},
|
|
46
|
+
"./min": "./mates.min.css",
|
|
47
|
+
"./package.json": "./package.json"
|
|
48
|
+
}
|
|
49
|
+
}
|