swadhin / justapi public

🎨 docs: WebTUI redesign β€” terminal UI components (badges, buttons, boxes, tabs), catppuccin theme, landing with stats/bars/terminal, removed broken anime.js layer

swadhinbiswas committed 2 months ago
ba6e73d
1 parent 4705f15
commit ba6e73d
31 files changed
+617 -874
Showing 31 changed files+617-872
docs_site/astro.config.mjsdocs_site/package-lock.jsondocs_site/package.jsondocs_site/src/components/PageFrame.astrodocs_site/src/content/docs/index.mdxdocs_site/src/scripts/animations.jsdocs_site/src/scripts/landing.tsdocs_site/src/styles/custom.cssdocs_site/src/styles/webtui/base.cssdocs_site/src/styles/webtui/box.cssdocs_site/src/styles/webtui/catppuccin.cssdocs_site/src/styles/webtui/components/accordion.cssdocs_site/src/styles/webtui/components/badge.cssdocs_site/src/styles/webtui/components/button.cssdocs_site/src/styles/webtui/components/checkbox.cssdocs_site/src/styles/webtui/components/dialog.cssdocs_site/src/styles/webtui/components/input.cssdocs_site/src/styles/webtui/components/mark.cssdocs_site/src/styles/webtui/components/popover.cssdocs_site/src/styles/webtui/components/pre.cssdocs_site/src/styles/webtui/components/progress.cssdocs_site/src/styles/webtui/components/radio.cssdocs_site/src/styles/webtui/components/range.cssdocs_site/src/styles/webtui/components/separator.cssdocs_site/src/styles/webtui/components/spinner.cssdocs_site/src/styles/webtui/components/switch.cssdocs_site/src/styles/webtui/components/table.cssdocs_site/src/styles/webtui/components/textarea.cssdocs_site/src/styles/webtui/components/tooltip.cssdocs_site/src/styles/webtui/components/typography.cssdocs_site/src/styles/webtui/components/view.css
β–Όdocs_site/astro.config.mjs
+5-7
@@ -26,9 +26,6 @@ export default defineConfig({
26
26
{ icon: 'x.com', label: 'X (Twitter)', href: 'https://x.com/justapidev' },
27
27
],
28
28
customCss: ['./src/styles/custom.css'],
29
- components: {
30
- PageFrame: './src/components/PageFrame.astro',
31
- },
32
29
editLink: {
33
30
baseUrl: 'https://github.com/swadhinbiswas/JustAPI/edit/main/docs_site',
34
31
},
@@ -36,10 +33,11 @@ export default defineConfig({
36
33
{
37
34
tag: 'script',
38
35
attrs: { is: 'inline' },
39
- content: `// JustAPI theme switcher (dark/light/dracula/rose-pine/warm)
36
+ content: `// JustAPI theme switcher (webtui themes)
40
37
(function () {
41
- var THEMES = ['dark', 'light', 'dracula', 'rose-pine', 'warm'];
38
+ var THEMES = ['dark', 'light', 'catppuccin', 'nord', 'gruvbox'];
42
39
function apply(t) {
40
+ document.documentElement.setAttribute('data-webtui-theme', t);
43
41
document.documentElement.setAttribute('data-theme', t);
44
42
try { localStorage.setItem('ja-theme', t); } catch (e) {}
45
43
document.querySelectorAll('.ja-theme-btn').forEach(function (b) {
@@ -54,7 +52,7 @@ export default defineConfig({
54
52
w.className = 'ja-theme-switcher';
55
53
THEMES.forEach(function (t) {
56
54
var b = document.createElement('button');
57
- b.className = 'ja-theme-btn ja-theme-btn--' + (t === 'rose-pine' ? 'rosepine' : t);
55
+ b.className = 'ja-theme-btn ja-theme-btn--' + (t === 'catppuccin' ? 'catppuccin' : t);
58
56
b.dataset.theme = t;
59
57
b.title = t;
60
58
b.setAttribute('aria-label', 'Theme: ' + t);
@@ -62,7 +60,7 @@ export default defineConfig({
62
60
w.appendChild(b);
63
61
});
64
62
document.body.appendChild(w);
65
- apply(saved || (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark'));
63
+ apply(saved || 'dark');
66
64
});
67
65
})();`,
68
66
},
69
67
β–Όdocs_site/package-lock.json
+14-23
@@ -10,7 +10,8 @@
10
10
"dependencies": {
11
11
"@astrojs/sitemap": "^3.7.3",
12
12
"@astrojs/starlight": "^0.41.4",
13
- "animejs": "^4.5.0",
13
+ "@webtui/css": "^0.1.9",
14
+ "@webtui/theme-catppuccin": "^0.0.5",
14
15
"astro": "^7.1.3"
15
16
},
16
17
"engines": {
@@ -2276,6 +2277,18 @@
2276
2277
"integrity": "sha512-60YRaenCQcVjYEKOcG824+DRGGIQ3VKErcBoAEDJZz5bKIs2ZG+X/H9Nk+Q6EVkwJk5QNApxbrc5QtBSwtrXAg==",
2277
2278
"license": "ISC"
2278
2279
},
2280
+ "node_modules/@webtui/css": {
2281
+ "version": "0.1.9",
2282
+ "resolved": "https://registry.npmmirror.com/@webtui/css/-/css-0.1.9.tgz",
2283
+ "integrity": "sha512-frEwcxRihw3VlmUxLzu5gsvp2KaPtETJvKKgCFHq+9KJ/kqZrgGoil9W56SOgW3T6/9CMtRG8fciU4yixGwPOg==",
2284
+ "license": "MIT"
2285
+ },
2286
+ "node_modules/@webtui/theme-catppuccin": {
2287
+ "version": "0.0.5",
2288
+ "resolved": "https://registry.npmmirror.com/@webtui/theme-catppuccin/-/theme-catppuccin-0.0.5.tgz",
2289
+ "integrity": "sha512-Lpq6vC1pcvaszLynCpoSd96GpyzumdLGeB7eFaxBRbIbgV4YjiICZuwzi4wsT4FlWrpsefaBg5jN3UHs+wLU2Q==",
2290
+ "license": "MIT"
2291
+ },
2279
2292
"node_modules/acorn": {
2280
2293
"version": "8.17.0",
2281
2294
"resolved": "https://registry.npmmirror.com/acorn/-/acorn-8.17.0.tgz",
@@ -2309,28 +2322,6 @@
2309
2322
"am-i-vibing": "dist/cli.mjs"
2310
2323
}
2311
2324
},
2312
- "node_modules/animejs": {
2313
- "version": "4.5.0",
2314
- "resolved": "https://registry.npmmirror.com/animejs/-/animejs-4.5.0.tgz",
2315
- "integrity": "sha512-NQimYX+lz8WaXonGS9zVVoviCIAjONeJayxacUditaivYLqyXgGjFKjuyl0aUUhFKm5MriX9ty1TGovNzoJQWA==",
2316
- "license": "MIT",
2317
- "funding": {
2318
- "type": "github",
2319
- "url": "https://github.com/sponsors/juliangarnier"
2320
- },
2321
- "peerDependencies": {
2322
- "@types/three": ">=0.150.0",
2323
- "three": ">=0.150.0"
2324
- },
2325
- "peerDependenciesMeta": {
2326
- "@types/three": {
2327
- "optional": true
2328
- },
2329
- "three": {
2330
- "optional": true
2331
- }
2332
- }
2333
- },
2334
2325
"node_modules/anymatch": {
2335
2326
"version": "3.1.3",
2336
2327
"resolved": "https://registry.npmmirror.com/anymatch/-/anymatch-3.1.3.tgz",
2337
2328
β–Όdocs_site/package.json
+2-1
@@ -12,7 +12,8 @@
12
12
"dependencies": {
13
13
"@astrojs/sitemap": "^3.7.3",
14
14
"@astrojs/starlight": "^0.41.4",
15
- "animejs": "^4.5.0",
15
+ "@webtui/css": "^0.1.9",
16
+ "@webtui/theme-catppuccin": "^0.0.5",
16
17
"astro": "^7.1.3"
17
18
},
18
19
"engines": {
19
20
β–Όdocs_site/src/components/PageFrame.astro
+0-7
@@ -1,9 +0,0 @@
1
-import PageFrame from '@astrojs/starlight/components/PageFrame.astro';
2
-<PageFrame>
3
- <script>
4
- import '../scripts/animations.js';
5
- </script>
6
- <slot />
7
-</PageFrame>
8
0
β–Όdocs_site/src/content/docs/index.mdx
+63-64
@@ -4,55 +4,54 @@ description: Python web framework powered by Rust. 766k req/s hello-world. FastA
4
4
template: splash
5
5
---
6
6
7
-<div class="ja-hero" data-reveal>
8
- <div class="ja-hero-badge">
9
- <span class="dot"></span>
10
- v2.0.9 Β· published on PyPI Β· 8 platforms
11
- </div>
12
- <h1 data-hero-title>
7
+<div class="ja-hero">
8
+ <span is="badge" variant="green">v2.0.9 Β· published on PyPI Β· 8 platforms</span>
9
+ <h1>
13
10
Python writes the logic.<br/>
14
- <span class="grad">Rust does everything else.</span>
11
+ <span class="accent">Rust does everything else.</span>
15
12
</h1>
16
13
<p class="ja-hero-sub">
17
14
JustAPI is a Python web framework with a Rust core. One import, zero config β€”
18
15
routing, TLS, validation, serialization and the server itself run in Rust.
19
16
</p>
20
17
<div class="ja-hero-actions">
21
- <a class="ja-btn ja-btn--primary" href="/getting-started/overview/">Get Started β†’</a>
22
- <a class="ja-btn ja-btn--ghost" href="https://github.com/swadhinbiswas/JustAPI" target="_blank">GitHub β†—</a>
18
+ <a href="/getting-started/overview/" is="button" size="large">Get Started β†’</a>
19
+ <a href="https://github.com/swadhinbiswas/JustAPI" is="button" box="" size="large">GitHub β†—</a>
23
20
</div>
24
21
</div>
25
22
26
-<div class="ja-stats" data-reveal-group>
27
- <div class="ja-stat" data-reveal-item>
28
- <div class="ja-stat-value" data-count="766" data-suffix="k">0</div>
23
+## Performance
24
+
25
+<div class="ja-stats">
26
+ <div class="ja-stat">
27
+ <div class="ja-stat-value">766k</div>
29
28
<div class="ja-stat-label">req/s hello-world</div>
30
29
</div>
31
- <div class="ja-stat" data-reveal-item>
32
- <div class="ja-stat-value" data-count="782" data-suffix="k">0</div>
30
+ <div class="ja-stat">
31
+ <div class="ja-stat-value">782k</div>
33
32
<div class="ja-stat-label">req/s JSON echo</div>
34
33
</div>
35
- <div class="ja-stat" data-reveal-item>
36
- <div class="ja-stat-value" data-count="2.4" data-decimals="1" data-suffix="x">0</div>
34
+ <div class="ja-stat">
35
+ <div class="ja-stat-value">2.4x</div>
37
36
<div class="ja-stat-label">faster than Granian</div>
38
37
</div>
39
- <div class="ja-stat" data-reveal-item>
40
- <div class="ja-stat-value" data-count="53" data-suffix="x">0</div>
41
- <div class="ja-stat-label">native async DB awaits</div>
38
+ <div class="ja-stat">
39
+ <div class="ja-stat-value">53x</div>
40
+ <div class="ja-stat-label">native async DB</div>
42
41
</div>
43
- <div class="ja-stat" data-reveal-item>
44
- <div class="ja-stat-value" data-count="181" data-suffix="k">0</div>
42
+ <div class="ja-stat">
43
+ <div class="ja-stat-value">181k</div>
45
44
<div class="ja-stat-label">native CRUD SELECT</div>
46
45
</div>
47
- <div class="ja-stat" data-reveal-item>
48
- <div class="ja-stat-value" data-count="12" data-suffix=" MB">0</div>
46
+ <div class="ja-stat">
47
+ <div class="ja-stat-value">12MB</div>
49
48
<div class="ja-stat-label">resident memory</div>
50
49
</div>
51
50
</div>
52
51
53
-<div class="ja-section" data-reveal>Install in seconds</div>
52
+## Quick start
54
53
55
-<div class="ja-tabs" data-tabs data-reveal>
54
+<div class="ja-tabs">
56
55
<div class="ja-tabs-bar">
57
56
<button class="ja-tab-btn" data-tab-btn="pip" data-active="true">pip</button>
58
57
<button class="ja-tab-btn" data-tab-btn="uv">uv</button>
@@ -79,109 +78,107 @@ cd my_app && python app/main.py
79
78
</div>
80
79
</div>
81
80
82
-<div class="ja-section" data-reveal>Minimal app</div>
81
+## Minimal app
83
82
84
-<div class="ja-terminal" data-terminal data-reveal>
83
+<div class="ja-terminal">
85
84
<div class="ja-terminal-bar">
86
- <span class="ja-terminal-dot"></span>
87
- <span class="ja-terminal-dot"></span>
88
- <span class="ja-terminal-dot"></span>
85
+ <span>●</span><span>●</span><span>●</span>
89
86
<span class="ja-terminal-title">main.py</span>
90
87
</div>
91
88
<div class="ja-terminal-body">
92
- <div data-term-line><span class="cm">from</span> justapi <span class="cm">import</span> JustAPIApp</div>
93
- <div data-term-line>&nbsp;</div>
94
- <div data-term-line>app = JustAPIApp()</div>
95
- <div data-term-line>&nbsp;</div>
96
- <div data-term-line><span class="cm">@app.get</span>(<span class="ok">"/"</span>)</div>
97
- <div data-term-line><span class="cm">def</span> hello():</div>
98
- <div data-term-line>&nbsp;&nbsp;&nbsp;&nbsp;<span class="cm">return</span> &#123;<span class="ok">"Hello"</span>: <span class="ok">"World"</span>&#125;</div>
99
- <div data-term-line>&nbsp;</div>
100
- <div data-term-line>app.run()<span data-cursor style="display:inline-block">β–Œ</span></div>
101
- <div data-term-line><span class="ok">βœ“</span> <span class="dim">server started Β· /docs Β· /redoc Β· OpenAPI auto</span></div>
89
+ <span class="cm">from</span> justapi <span class="cm">import</span> JustAPIApp<br/>
90
+ <br/>
91
+ app = JustAPIApp()<br/>
92
+ <br/>
93
+ <span class="cm">@app.get</span>(<span class="ok">"/"</span>)<br/>
94
+ <span class="cm">def</span> hello():<br/>
95
+ &nbsp;&nbsp;&nbsp;&nbsp;<span class="cm">return</span> &#123;<span class="ok">"Hello"</span>: <span class="ok">"World"</span>&#125;<br/>
96
+ <br/>
97
+ app.run()<br/>
98
+ <span class="ok">βœ“</span> <span class="dim">server started Β· /docs Β· /redoc Β· OpenAPI auto</span>
102
99
</div>
103
100
</div>
104
101
105
-<div class="ja-section" data-reveal>Benchmarks</div>
102
+## Benchmarks
106
103
107
-<div class="ja-bars" data-reveal>
104
+<div class="ja-bars">
108
105
<div class="ja-bar-row ja-bar-row--winner">
109
106
<span class="ja-bar-label">JustAPI</span>
110
- <div class="ja-bar-track"><div class="ja-bar-fill" data-bar data-w="100%" data-delay="0"></div></div>
107
+ <div class="ja-bar-track"><div class="ja-bar-fill" data-w="100%"></div></div>
111
108
<span class="ja-bar-value">766k</span>
112
109
</div>
113
110
<div class="ja-bar-row">
114
111
<span class="ja-bar-label">Granian</span>
115
- <div class="ja-bar-track"><div class="ja-bar-fill" data-bar data-w="41%" data-delay="150"></div></div>
112
+ <div class="ja-bar-track"><div class="ja-bar-fill" data-w="41%"></div></div>
116
113
<span class="ja-bar-value">314k</span>
117
114
</div>
118
115
<div class="ja-bar-row">
119
116
<span class="ja-bar-label">Robyn</span>
120
- <div class="ja-bar-track"><div class="ja-bar-fill" data-bar data-w="5%" data-delay="300"></div></div>
117
+ <div class="ja-bar-track"><div class="ja-bar-fill" data-w="5%"></div></div>
121
118
<span class="ja-bar-value">39k</span>
122
119
</div>
123
120
<div class="ja-bar-row">
124
121
<span class="ja-bar-label">FastAPI</span>
125
- <div class="ja-bar-track"><div class="ja-bar-fill" data-bar data-w="5%" data-delay="450"></div></div>
122
+ <div class="ja-bar-track"><div class="ja-bar-fill" data-w="5%"></div></div>
126
123
<span class="ja-bar-value">36k</span>
127
124
</div>
128
125
</div>
129
126
130
-<p style="font-size: 0.8rem; color: var(--ja-muted); margin-top: -0.5rem;">
127
+<blockquote>
131
128
hello-world, 100 concurrent connections, 30s, same hardware β€” full methodology in <a href="https://github.com/swadhinbiswas/JustAPI/blob/main/BENCHMARKS.md">BENCHMARKS.md</a>
132
-</p>
129
+</blockquote>
133
130
134
-<div class="ja-section" data-reveal>Features</div>
131
+## Features
135
132
136
-<div class="ja-grid" data-reveal-group>
137
- <div class="ja-card" data-reveal-item>
133
+<div class="ja-grid">
134
+ <div class="ja-card">
138
135
<div class="ja-card-icon">⚑</div>
139
136
<h3>Rust core</h3>
140
137
<p>Networking, TLS, routing, serialization run in Rust. Python executes only your logic.</p>
141
138
</div>
142
- <div class="ja-card" data-reveal-item>
139
+ <div class="ja-card">
143
140
<div class="ja-card-icon">πŸ—„οΈ</div>
144
141
<h3>Native async DB</h3>
145
142
<p><code>await app.db.query_async()</code> runs SQL on Rust's tokio runtime β€” 53Γ— faster on slow queries.</p>
146
143
</div>
147
- <div class="ja-card" data-reveal-item>
144
+ <div class="ja-card">
148
145
<div class="ja-card-icon">πŸ“‘</div>
149
146
<h3>Rust-native SSE</h3>
150
147
<p><code>app.sse_native()</code> streams events with zero Python per event.</p>
151
148
</div>
152
- <div class="ja-card" data-reveal-item>
149
+ <div class="ja-card">
153
150
<div class="ja-card-icon">πŸš€</div>
154
151
<h3>Multi-worker</h3>
155
152
<p><code>justapi serve --workers N</code> β€” 1.88Γ— throughput at 4 workers, auto-scale.</p>
156
153
</div>
157
- <div class="ja-card" data-reveal-item>
154
+ <div class="ja-card">
158
155
<div class="ja-card-icon">🧠</div>
159
156
<h3>Free-threaded</h3>
160
157
<p>CPython 3.14t wheels β€” CPU-bound Python scales with cores, 12.4Γ— measured.</p>
161
158
</div>
162
- <div class="ja-card" data-reveal-item>
159
+ <div class="ja-card">
163
160
<div class="ja-card-icon">πŸ”</div>
164
161
<h3>Security built-in</h3>
165
162
<p>JWT, rate limiting, CORS, security headers β€” all in Rust middleware.</p>
166
163
</div>
167
- <div class="ja-card" data-reveal-item>
164
+ <div class="ja-card">
168
165
<div class="ja-card-icon">πŸ›‘οΈ</div>
169
166
<h3>Production-ready</h3>
170
167
<p>Circuit breakers, OTel tracing, Prometheus metrics, health checks.</p>
171
168
</div>
172
- <div class="ja-card" data-reveal-item>
169
+ <div class="ja-card">
173
170
<div class="ja-card-icon">πŸ“‹</div>
174
171
<h3>Type-checked</h3>
175
172
<p><code>py.typed</code> + complete stubs β€” mypy-clean on user code.</p>
176
173
</div>
177
- <div class="ja-card" data-reveal-item>
174
+ <div class="ja-card">
178
175
<div class="ja-card-icon">πŸ”—</div>
179
176
<h3>FastAPI-compatible</h3>
180
177
<p>Same decorators, Pydantic models, Depends. Migrate with one import.</p>
181
178
</div>
182
179
</div>
183
180
184
-<div class="ja-section" data-reveal>Framework comparison</div>
181
+## Framework comparison
185
182
186
183
| | FastAPI | JustAPI |
187
184
|---|---|---|
@@ -191,8 +188,10 @@ cd my_app && python app/main.py
191
188
| **Native DB SELECT** | Python driver | **181k req/s (Γ—125)** |
192
189
| **Memory** | 29 MB | **12 MB** |
193
190
194
-<div class="ja-cta" data-reveal>
195
- <div class="ja-cta-title">Ready to build something fast?</div>
196
- <p class="ja-cta-sub">One import. Rust underneath. Zero config.</p>
197
- <a class="ja-btn ja-btn--primary" href="/getting-started/overview/">Get Started β†’</a>
191
+<div class="ja-cta">
192
+ <h2>Ready to build something fast?</h2>
193
+ <p>One import. Rust underneath. Zero config.</p>
194
+ <a href="/getting-started/overview/" is="button" size="large">Get Started β†’</a>
198
195
</div>
196
+
197
+
199
198
β–Όdocs_site/src/scripts/animations.js
+0-182
@@ -1,182 +0,0 @@
1
-// JustAPI docs β€” animations (anime.js v4)
2
-// Count-up stats, scroll-reveal, hero entrance, benchmark bars, terminal.
3
-import { animate, createTimeline, utils } from 'animejs';
4
-
5
-export function initAnimations() {
6
- const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
7
- if (prefersReduced) return;
8
-
9
- // ─── Animated stat counters (data-count attributes) ───
10
- document.querySelectorAll('[data-count]').forEach((el) => {
11
- const target = parseFloat(el.dataset.count);
12
- const suffix = el.dataset.suffix || '';
13
- const decimals = el.dataset.decimals ? parseInt(el.dataset.decimals, 10) : 0;
14
- const obj = { v: 0 };
15
- const io = new IntersectionObserver(
16
- (entries) => {
17
- if (!entries[0].isIntersecting) return;
18
- io.disconnect();
19
- animate({
20
- targets: obj,
21
- v: target,
22
- duration: 1400,
23
- ease: 'outExpo',
24
- update: () => {
25
- el.textContent = obj.v.toFixed(decimals) + suffix;
26
- },
27
- });
28
- },
29
- { threshold: 0.4 },
30
- );
31
- io.observe(el);
32
- });
33
-
34
- // ─── Scroll-reveal sections ───
35
- document.querySelectorAll('[data-reveal]').forEach((el) => {
36
- el.style.opacity = '0';
37
- el.style.transform = 'translateY(24px)';
38
- const io = new IntersectionObserver(
39
- (entries) => {
40
- if (!entries[0].isIntersecting) return;
41
- io.disconnect();
42
- animate({
43
- targets: el,
44
- opacity: [0, 1],
45
- translateY: [24, 0],
46
- duration: 700,
47
- ease: 'outCubic',
48
- delay: parseInt(el.dataset.revealDelay || '0', 10),
49
- });
50
- },
51
- { threshold: 0.15 },
52
- );
53
- io.observe(el);
54
- });
55
-
56
- // ─── Staggered children reveal ───
57
- document.querySelectorAll('[data-reveal-group]').forEach((group) => {
58
- const items = Array.from(group.querySelectorAll('[data-reveal-item]'));
59
- items.forEach((it) => {
60
- it.style.opacity = '0';
61
- it.style.transform = 'translateY(20px)';
62
- });
63
- const io = new IntersectionObserver(
64
- (entries) => {
65
- if (!entries[0].isIntersecting) return;
66
- io.disconnect();
67
- animate({
68
- targets: items,
69
- opacity: [0, 1],
70
- translateY: [20, 0],
71
- duration: 650,
72
- delay: (el, i) => i * 90,
73
- ease: 'outCubic',
74
- });
75
- },
76
- { threshold: 0.12 },
77
- );
78
- io.observe(group);
79
- });
80
-
81
- // ─── Hero entrance ───
82
- const heroTitle = document.querySelector('[data-hero-title]');
83
- if (heroTitle) {
84
- createTimeline({ ease: 'outExpo' })
85
- .add({
86
- targets: heroTitle,
87
- opacity: [0, 1],
88
- translateY: [30, 0],
89
- duration: 800,
90
- })
91
- .add({
92
- targets: heroTitle,
93
- textShadow: ['0 0 0px rgba(34,197,94,0)', '0 0 40px rgba(34,197,94,0.35)'],
94
- duration: 900,
95
- }, '-=400');
96
- }
97
-
98
- // ─── Terminal typing reveal ───
99
- const term = document.querySelector('[data-terminal]');
100
- if (term) {
101
- const lines = Array.from(term.querySelectorAll('[data-term-line]'));
102
- lines.forEach((l) => { l.style.opacity = '0'; });
103
- const io = new IntersectionObserver(
104
- (entries) => {
105
- if (!entries[0].isIntersecting) return;
106
- io.disconnect();
107
- createTimeline({ ease: 'outCubic' })
108
- .add({
109
- targets: lines,
110
- opacity: [0, 1],
111
- translateX: [-8, 0],
112
- duration: 220,
113
- delay: (el, i) => i * 140,
114
- });
115
- },
116
- { threshold: 0.3 },
117
- );
118
- io.observe(term);
119
- }
120
-
121
- // ─── Cursor blink ───
122
- const cursor = document.querySelector('[data-cursor]');
123
- if (cursor) {
124
- animate({
125
- targets: cursor,
126
- opacity: [1, 0],
127
- duration: 500,
128
- loop: true,
129
- ease: 'steps(1)',
130
- });
131
- }
132
-
133
- // ─── Benchmark bars ───
134
- document.querySelectorAll('[data-bar]').forEach((bar) => {
135
- const w = bar.dataset.w || '0%';
136
- bar.style.width = '0%';
137
- const io = new IntersectionObserver(
138
- (entries) => {
139
- if (!entries[0].isIntersecting) return;
140
- io.disconnect();
141
- animate({
142
- targets: bar,
143
- width: w,
144
- duration: 1200,
145
- ease: 'outExpo',
146
- delay: parseInt(bar.dataset.delay || '0', 10),
147
- });
148
- },
149
- { threshold: 0.4 },
150
- );
151
- io.observe(bar);
152
- });
153
-
154
- // ─── Tabs (shadcn-style) ───
155
- document.querySelectorAll('[data-tabs]').forEach((tabs) => {
156
- const btns = tabs.querySelectorAll('[data-tab-btn]');
157
- const panels = tabs.querySelectorAll('[data-tab-panel]');
158
- btns.forEach((btn) => {
159
- btn.addEventListener('click', () => {
160
- const target = btn.dataset.tabBtn;
161
- btns.forEach((b) => b.setAttribute('data-active', b === btn ? 'true' : 'false'));
162
- panels.forEach((p) => {
163
- const show = p.dataset.tabPanel === target;
164
- p.style.display = show ? 'block' : 'none';
165
- if (show) {
166
- animate({ targets: p, opacity: [0, 1], translateY: [6, 0], duration: 300, ease: 'outCubic' });
167
- }
168
- });
169
- });
170
- });
171
- const first = tabs.querySelector('[data-tab-btn]');
172
- if (first) first.click();
173
- });
174
-}
175
-
176
-if (typeof window !== 'undefined') {
177
- if (document.readyState === 'loading') {
178
- document.addEventListener('DOMContentLoaded', initAnimations);
179
- } else {
180
- initAnimations();
181
- }
182
-}
183
0
β–Όdocs_site/src/scripts/landing.ts
+30-0
@@ -0,0 +1,30 @@
1
+// Landing page: terminal tabs + benchmark bars (no anime.js β€” WebTUI is pure CSS)
2
+export function initLanding() {
3
+ // Terminal tabs
4
+ document.querySelectorAll('.ja-tabs').forEach((tabs) => {
5
+ const btns = tabs.querySelectorAll('[data-tab-btn]');
6
+ const panels = tabs.querySelectorAll('[data-tab-panel]');
7
+ btns.forEach((btn) => {
8
+ btn.addEventListener('click', () => {
9
+ const target = btn.dataset.tabBtn;
10
+ btns.forEach((b) => b.setAttribute('data-active', b === btn ? 'true' : 'false'));
11
+ panels.forEach((p) => {
12
+ p.style.display = p.dataset.tabPanel === target ? 'block' : 'none';
13
+ });
14
+ });
15
+ });
16
+ });
17
+ // Benchmark bars: animate width on scroll
18
+ const bars = document.querySelectorAll('.ja-bar-fill');
19
+ if (bars.length && 'IntersectionObserver' in window) {
20
+ const io = new IntersectionObserver((entries) => {
21
+ entries.forEach((e) => {
22
+ if (e.isIntersecting) {
23
+ (e.target as HTMLElement).style.width = e.target.getAttribute('data-w') || '0%';
24
+ io.unobserve(e.target);
25
+ }
26
+ });
27
+ }, { threshold: 0.4 });
28
+ bars.forEach((b) => io.observe(b));
29
+ }
30
+}
0
31
β–Όdocs_site/src/styles/custom.css
+480-588
@@ -1,595 +1,487 @@
1
1
/* ═══════════════════════════════════════════════════════════════════
2
- JustAPI Docs β€” Clean, readable design system
3
- Inspired by shadcn/ui + Stripe docs patterns.
4
- Themes: dark (default) Β· light Β· dracula Β· rose-pine Β· warm
2
+ JustAPI Docs β€” WebTUI terminal aesthetic
3
+ WebTUI: pure CSS terminal-UIs-in-the-browser (@webtui/css)
4
+ Keeps Starlight's dual-sidebar docs layout; restyles content with
5
+ WebTUI components and themes.
5
6
═══════════════════════════════════════════════════════════════════ */
6
7
7
-:root,
8
-[data-theme='dark'] {
9
- --ja-bg: #09090b;
10
- --ja-bg-2: #101012;
11
- --ja-bg-3: #18181b;
12
- --ja-panel: #101012;
13
- --ja-border: #27272a;
14
- --ja-green: #22c55e;
15
- --ja-green-dim: #16a34a;
16
- --ja-red: #ef4444;
17
- --ja-white: #fafafa;
18
- --ja-muted: #a1a1aa;
19
- --ja-accent: #22c55e;
20
- --ja-accent-2: #3b82f6;
21
-
22
- --sl-color-accent-low: #052e16;
23
- --sl-color-accent: #22c55e;
24
- --sl-color-accent-high: #86efac;
25
- --sl-color-white: #fafafa;
26
- --sl-color-gray-1: #fafafa;
27
- --sl-color-gray-2: #d4d4d8;
28
- --sl-color-gray-3: #a1a1aa;
29
- --sl-color-gray-4: #71717a;
30
- --sl-color-gray-5: #3f3f46;
31
- --sl-color-gray-6: #18181b;
32
- --sl-color-black: #09090b;
33
- --sl-color-bg: #09090b;
34
- --sl-color-bg-nav: #0c0c0e;
35
- --sl-color-bg-sidebar: #0c0c0e;
36
- --sl-color-bg-hover: #18181b;
37
- --sl-color-text: #fafafa;
38
- --sl-color-text-muted: #a1a1aa;
39
- --sl-color-border: #27272a;
8
+/* WebTUI layer order: base, utils, components */
9
+@layer base, utils, components;
10
+
11
+@import './webtui/base.css';
12
+
13
+/* Components we use */
14
+@import './webtui/box.css';
15
+@import './webtui/components/typography.css';
16
+@import './webtui/components/button.css';
17
+@import './webtui/components/badge.css';
18
+@import './webtui/components/mark.css';
19
+@import './webtui/components/pre.css';
20
+@import './webtui/components/progress.css';
21
+@import './webtui/components/spinner.css';
22
+@import './webtui/components/separator.css';
23
+@import './webtui/components/table.css';
24
+@import './webtui/components/accordion.css';
25
+@import './webtui/components/tooltip.css';
26
+@import './webtui/components/view.css';
27
+
28
+/* Themes (Catppuccin for the terminal vibe) */
29
+@import './webtui/catppuccin.css';
30
+
31
+/* ─── Base: terminal typography ─── */
32
+@layer base {
33
+ :root {
34
+ --font-size: 16px;
35
+ --line-height: 1.45;
36
+ --font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', ui-monospace, monospace;
37
+ --font-weight-normal: 400;
38
+ --font-weight-bold: 700;
39
+ }
40
+}
41
+
42
+/* ─── Starlight chrome mapped to WebTUI colors ─── */
43
+@layer components {
44
+ /* Sidebar + nav follow the theme */
45
+ .site-header,
46
+ .sidebar,
47
+ .page-frame {
48
+ background-color: var(--background0) !important;
49
+ }
50
+
51
+ .sidebar-content,
52
+ .sidebar-pane {
53
+ background-color: var(--background0) !important;
54
+ }
55
+
56
+ /* Links: terminal underline */
57
+ .content a {
58
+ color: var(--foreground2);
59
+ text-decoration: underline;
60
+ text-decoration-thickness: 1px;
61
+ text-underline-offset: 3px;
62
+ }
63
+ .content a:hover {
64
+ color: var(--foreground0);
65
+ text-decoration-thickness: 2px;
66
+ }
67
+
68
+ /* Headings: monospace, terminal weight */
69
+ .content h1,
70
+ .content h2,
71
+ .content h3,
72
+ .content h4,
73
+ .content h5,
74
+ .content h6 {
75
+ font-family: var(--font-family);
76
+ color: var(--foreground0);
77
+ }
78
+
79
+ .content h1 {
80
+ font-size: 2rem;
81
+ letter-spacing: -0.02em;
82
+ }
83
+ .content h2 {
84
+ font-size: 1.4rem;
85
+ border-bottom: var(--box-border-width, 2px) solid var(--background2);
86
+ padding-bottom: 0.4rem;
87
+ }
88
+
89
+ /* Code: terminal inline */
90
+ .content :not(pre) > code {
91
+ background-color: var(--background1);
92
+ color: var(--foreground0);
93
+ padding: 0 1ch;
94
+ }
95
+
96
+ /* Inline code blocks inside pre keep WebTUI pre style */
97
+ pre {
98
+ background-color: var(--background1) !important;
99
+ border: var(--box-border-width, 2px) solid var(--foreground0);
100
+ border-radius: 0;
101
+ color: var(--foreground0);
102
+ }
103
+ pre code {
104
+ background: none !important;
105
+ color: inherit;
106
+ }
107
+
108
+ /* Tables: terminal grid */
109
+ .content table {
110
+ border-collapse: collapse;
111
+ }
112
+ .content th,
113
+ .content td {
114
+ border: var(--table-border-color, var(--foreground0)) solid var(--box-border-width, 1px);
115
+ padding: 0.4rem 1ch;
116
+ }
117
+ .content th {
118
+ color: var(--foreground0);
119
+ font-weight: var(--font-weight-bold);
120
+ }
121
+ .content td {
122
+ color: var(--foreground1);
123
+ }
124
+
125
+ /* Callouts β†’ terminal blocks */
126
+ .starlight-aside {
127
+ border: var(--box-border-width, 2px) solid var(--foreground0);
128
+ border-left: calc(var(--box-border-width, 2px) * 3) solid var(--foreground0);
129
+ border-radius: 0;
130
+ background-color: var(--background1);
131
+ padding: 0.75rem 1.5ch;
132
+ }
133
+ .starlight-aside--note {
134
+ border-left-color: var(--blue, var(--foreground2));
135
+ }
136
+ .starlight-aside--tip {
137
+ border-left-color: var(--green, var(--foreground2));
138
+ }
139
+ .starlight-aside--caution {
140
+ border-left-color: var(--yellow, var(--foreground2));
141
+ }
142
+ .starlight-aside--danger {
143
+ border-left-color: var(--red, var(--foreground2));
144
+ }
145
+
146
+ /* Badges β†’ terminal badges */
147
+ .badge,
148
+ [is-~='badge'] {
149
+ border: 1px solid var(--foreground0);
150
+ }
151
+
152
+ /* Search input: terminal */
153
+ .search-input {
154
+ border: 1px solid var(--foreground0) !important;
155
+ border-radius: 0 !important;
156
+ background-color: var(--background0) !important;
157
+ color: var(--foreground0) !important;
158
+ font-family: var(--font-family) !important;
159
+ }
160
+}
161
+
162
+/* ─── Landing page: WebTUI components ─── */
163
+@layer components {
164
+ .ja-hero {
165
+ text-align: center;
166
+ padding: 4rem 1rem 2rem;
167
+ }
168
+
169
+ .ja-hero h1 {
170
+ font-size: clamp(2.2rem, 5vw, 3.5rem);
171
+ margin-bottom: 1rem;
172
+ letter-spacing: -0.03em;
173
+ }
174
+
175
+ .ja-hero h1 .accent {
176
+ color: var(--green, var(--foreground0));
177
+ }
178
+
179
+ .ja-hero-sub {
180
+ max-width: 40rem;
181
+ margin: 0 auto 2rem;
182
+ }
183
+
184
+ .ja-hero-actions {
185
+ display: flex;
186
+ gap: 1rem;
187
+ justify-content: center;
188
+ flex-wrap: wrap;
189
+ }
190
+
191
+ .ja-actions a,
192
+ .ja-actions button {
193
+ font-size: var(--font-size);
194
+ }
195
+
196
+ /* Stats: terminal box grid */
197
+ .ja-stats {
198
+ display: grid;
199
+ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
200
+ gap: 0.75rem;
201
+ margin: 2rem 0;
202
+ }
203
+
204
+ .ja-stat {
205
+ border: var(--box-border-width, 2px) solid var(--foreground0);
206
+ background-color: var(--background1);
207
+ padding: 1rem 0.5rem;
208
+ text-align: center;
209
+ }
210
+
211
+ .ja-stat-value {
212
+ font-size: 1.5rem;
213
+ font-weight: var(--font-weight-bold);
214
+ color: var(--green, var(--foreground0));
215
+ }
216
+
217
+ .ja-stat-label {
218
+ font-size: 0.8rem;
219
+ color: var(--foreground1);
220
+ }
221
+
222
+ /* Cards: terminal boxes */
223
+ .ja-grid {
224
+ display: grid;
225
+ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
226
+ gap: 0.75rem;
227
+ margin: 1.5rem 0;
228
+ }
229
+
230
+ .ja-card {
231
+ border: var(--box-border-width, 2px) solid var(--foreground0);
232
+ background-color: var(--background0);
233
+ padding: 1.25rem;
234
+ }
235
+
236
+ .ja-card:hover {
237
+ background-color: var(--background1);
238
+ }
239
+
240
+ .ja-card-icon {
241
+ font-size: 1.25rem;
242
+ margin-bottom: 0.5rem;
243
+ }
244
+
245
+ .ja-card h3 {
246
+ font-size: 1rem;
247
+ margin: 0 0 0.5rem;
248
+ }
249
+
250
+ .ja-card p {
251
+ font-size: 0.85rem;
252
+ color: var(--foreground1);
253
+ margin: 0;
254
+ line-height: 1.5;
255
+ }
256
+
257
+ /* Terminal window */
258
+ .ja-terminal {
259
+ border: var(--box-border-width, 2px) solid var(--foreground0);
260
+ background-color: var(--background1);
261
+ margin: 1.5rem 0;
262
+ }
263
+
264
+ .ja-terminal-bar {
265
+ display: flex;
266
+ gap: 0.75ch;
267
+ align-items: center;
268
+ padding: 0.5rem 1ch;
269
+ border-bottom: var(--box-border-width, 2px) solid var(--foreground0);
270
+ background-color: var(--background2);
271
+ font-size: 0.8rem;
272
+ }
273
+
274
+ .ja-terminal-title {
275
+ color: var(--foreground0);
276
+ margin-left: 1ch;
277
+ }
278
+
279
+ .ja-terminal-body {
280
+ padding: 1rem 1.5ch;
281
+ font-size: 0.85rem;
282
+ line-height: 1.7;
283
+ color: var(--green, var(--foreground0));
284
+ overflow-x: auto;
285
+ }
286
+
287
+ .ja-terminal-body .cm { color: var(--foreground2); }
288
+ .ja-terminal-body .ok { color: var(--green, var(--foreground0)); }
289
+ .ja-terminal-body .dim { color: var(--foreground2); }
290
+
291
+ /* Benchmark bars: terminal progress */
292
+ .ja-bars {
293
+ margin: 1.5rem 0;
294
+ display: flex;
295
+ flex-direction: column;
296
+ gap: 0.6rem;
297
+ }
298
+
299
+ .ja-bar-row {
300
+ display: grid;
301
+ grid-template-columns: 7rem 1fr 4rem;
302
+ align-items: center;
303
+ gap: 1ch;
304
+ font-size: 0.85rem;
305
+ }
306
+
307
+ .ja-bar-label {
308
+ text-align: right;
309
+ color: var(--foreground1);
310
+ }
311
+
312
+ .ja-bar-row--winner .ja-bar-label {
313
+ color: var(--green, var(--foreground0));
314
+ font-weight: var(--font-weight-bold);
315
+ }
316
+
317
+ .ja-bar-track {
318
+ height: 1.5rem;
319
+ border: var(--box-border-width, 2px) solid var(--foreground0);
320
+ background-color: var(--background0);
321
+ padding: 2px;
322
+ }
323
+
324
+ .ja-bar-fill {
325
+ height: 100%;
326
+ width: 0%;
327
+ background-color: var(--green, var(--foreground0));
328
+ transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1);
329
+ }
330
+
331
+ .ja-bar-value {
332
+ font-family: var(--font-family);
333
+ color: var(--foreground0);
334
+ }
335
+
336
+ /* CTA */
337
+ .ja-cta {
338
+ border: var(--box-border-width, 2px) solid var(--foreground0);
339
+ background-color: var(--background1);
340
+ padding: 2rem 1rem;
341
+ text-align: center;
342
+ margin: 2rem 0 1rem;
343
+ }
344
+
345
+ .ja-cta h2 {
346
+ margin: 0 0 0.5rem;
347
+ border: none;
348
+ }
349
+
350
+ .ja-cta p {
351
+ color: var(--foreground1);
352
+ margin: 0 0 1.5rem;
353
+ }
354
+
355
+ /* Section headings */
356
+ .ja-section {
357
+ display: flex;
358
+ align-items: center;
359
+ gap: 1ch;
360
+ margin: 2.5rem 0 1rem;
361
+ font-size: 1.1rem;
362
+ font-weight: var(--font-weight-bold);
363
+ color: var(--foreground0);
364
+ }
365
+
366
+ .ja-section::after {
367
+ content: '';
368
+ flex: 1;
369
+ border-bottom: var(--box-border-width, 2px) solid var(--background2);
370
+ }
371
+}
372
+
373
+/* ─── Tabs (terminal) ─── */
374
+@layer components {
375
+ .ja-tabs {
376
+ border: var(--box-border-width, 2px) solid var(--foreground0);
377
+ background-color: var(--background0);
378
+ margin: 1.5rem 0;
379
+ }
380
+
381
+ .ja-tabs-bar {
382
+ display: flex;
383
+ gap: 0;
384
+ border-bottom: var(--box-border-width, 2px) solid var(--foreground0);
385
+ background-color: var(--background1);
386
+ overflow-x: auto;
387
+ }
388
+
389
+ .ja-tab-btn {
390
+ padding: 0.5rem 2ch;
391
+ font-size: 0.85rem;
392
+ font-weight: var(--font-weight-normal);
393
+ color: var(--foreground1);
394
+ background: none;
395
+ border: none;
396
+ border-right: 1px solid var(--background2);
397
+ cursor: pointer;
398
+ font-family: var(--font-family);
399
+ height: auto !important;
400
+ }
401
+
402
+ .ja-tab-btn:hover {
403
+ background-color: var(--background2);
404
+ color: var(--foreground0);
405
+ }
406
+
407
+ .ja-tab-btn[data-active='true'] {
408
+ background-color: var(--foreground0);
409
+ color: var(--background0);
410
+ font-weight: var(--font-weight-bold);
411
+ text-decoration: none !important;
412
+ }
413
+
414
+ .ja-tab-panel {
415
+ padding: 1rem;
416
+ background-color: var(--background0);
417
+ }
418
+
419
+ .ja-tab-panel pre {
420
+ margin: 0;
421
+ border: none;
422
+ background: none !important;
423
+ }
424
+}
425
+
426
+/* ─── Theme switcher (terminal dots) ─── */
427
+@layer components {
428
+ .ja-theme-switcher {
429
+ position: fixed;
430
+ bottom: 1rem;
431
+ right: 1rem;
432
+ z-index: 1000;
433
+ display: flex;
434
+ gap: 0.25rem;
435
+ padding: 0.4rem;
436
+ border: var(--box-border-width, 2px) solid var(--foreground0);
437
+ background-color: var(--background0);
438
+ }
439
+
440
+ .ja-theme-btn {
441
+ width: 1.75rem;
442
+ height: 1.75rem;
443
+ border: 1px solid var(--foreground2);
444
+ cursor: pointer;
445
+ transition: transform 0.2s ease;
446
+ padding: 0;
447
+ }
448
+
449
+ .ja-theme-btn:hover {
450
+ transform: scale(1.2);
451
+ }
452
+
453
+ .ja-theme-btn[data-active='true'] {
454
+ border: 2px solid var(--foreground0);
455
+ }
456
+
457
+ .ja-theme-btn--dark { background: #09090b; color: #22c55e; }
458
+ .ja-theme-btn--light { background: #e5e7eb; color: #111; }
459
+ .ja-theme-btn--catppuccin { background: #1e1e2e; color: #89b4fa; }
460
+ .ja-theme-btn--nord { background: #2e3440; color: #88c0d0; }
461
+ .ja-theme-btn--gruvbox { background: #282828; color: #fabd2f; }
462
+}
463
+
464
+/* ─── Print / a11y / misc ─── */
465
+:focus-visible {
466
+ outline: 2px solid var(--foreground0);
467
+ outline-offset: 2px;
468
+}
469
+
470
+@media print {
471
+ .sidebar,
472
+ .toc-panel,
473
+ .edit-link,
474
+ .prev-next-nav,
475
+ .ja-theme-switcher {
476
+ display: none !important;
477
+ }
40
478
}
41
479
42
-/* ─── Light ─── */
43
-[data-theme='light'] {
44
- --ja-bg: #ffffff;
45
- --ja-bg-2: #fafafa;
46
- --ja-bg-3: #f4f4f5;
47
- --ja-panel: #ffffff;
48
- --ja-border: #e4e4e7;
49
- --ja-green: #16a34a;
50
- --ja-green-dim: #15803d;
51
- --ja-red: #dc2626;
52
- --ja-white: #18181b;
53
- --ja-muted: #71717a;
54
- --ja-accent: #16a34a;
55
- --ja-accent-2: #2563eb;
56
-
57
- --sl-color-accent-low: #dcfce7;
58
- --sl-color-accent: #16a34a;
59
- --sl-color-accent-high: #14532d;
60
- --sl-color-white: #18181b;
61
- --sl-color-gray-1: #18181b;
62
- --sl-color-gray-2: #3f3f46;
63
- --sl-color-gray-3: #71717a;
64
- --sl-color-gray-4: #a1a1aa;
65
- --sl-color-gray-5: #e4e4e7;
66
- --sl-color-gray-6: #f4f4f5;
67
- --sl-color-black: #ffffff;
68
- --sl-color-bg: #ffffff;
69
- --sl-color-bg-nav: #ffffff;
70
- --sl-color-bg-sidebar: #ffffff;
71
- --sl-color-bg-hover: #f4f4f5;
72
- --sl-color-text: #18181b;
73
- --sl-color-text-muted: #71717a;
74
- --sl-color-border: #e4e4e7;
75
-}
76
-
77
-/* ─── Dracula ─── */
78
-[data-theme='dracula'] {
79
- --ja-bg: #282a36; --ja-bg-2: #21222c; --ja-bg-3: #343746; --ja-panel: #21222c;
80
- --ja-border: #44475a; --ja-green: #50fa7b; --ja-green-dim: #3dd962; --ja-red: #ff5555;
81
- --ja-white: #f8f8f2; --ja-muted: #6272a4; --ja-accent: #bd93f9; --ja-accent-2: #8be9fd;
82
- --sl-color-accent-low: #3d3552; --sl-color-accent: #bd93f9; --sl-color-accent-high: #e3d5ff;
83
- --sl-color-white: #f8f8f2; --sl-color-gray-1: #f8f8f2; --sl-color-gray-2: #bfc2d8;
84
- --sl-color-gray-3: #6272a4; --sl-color-gray-4: #4d5a80; --sl-color-gray-5: #343746;
85
- --sl-color-gray-6: #21222c; --sl-color-black: #282a36; --sl-color-bg: #282a36;
86
- --sl-color-bg-nav: #21222c; --sl-color-bg-sidebar: #21222c; --sl-color-bg-hover: #343746;
87
- --sl-color-text: #f8f8f2; --sl-color-text-muted: #6272a4; --sl-color-border: #44475a;
88
-}
89
-
90
-/* ─── RosΓ© Pine ─── */
91
-[data-theme='rose-pine'] {
92
- --ja-bg: #191724; --ja-bg-2: #1f1d2e; --ja-bg-3: #26233a; --ja-panel: #1f1d2e;
93
- --ja-border: #403d52; --ja-green: #9ccfd8; --ja-green-dim: #7fb4bd; --ja-red: #eb6f92;
94
- --ja-white: #e0def4; --ja-muted: #908caa; --ja-accent: #c4a7e7; --ja-accent-2: #ebbcba;
95
- --sl-color-accent-low: #3d3552; --sl-color-accent: #c4a7e7; --sl-color-accent-high: #e0def4;
96
- --sl-color-white: #e0def4; --sl-color-gray-1: #e0def4; --sl-color-gray-2: #b5b1d6;
97
- --sl-color-gray-3: #908caa; --sl-color-gray-4: #6e6a86; --sl-color-gray-5: #403d52;
98
- --sl-color-gray-6: #26233a; --sl-color-black: #191724; --sl-color-bg: #191724;
99
- --sl-color-bg-nav: #1f1d2e; --sl-color-bg-sidebar: #1f1d2e; --sl-color-bg-hover: #26233a;
100
- --sl-color-text: #e0def4; --sl-color-text-muted: #908caa; --sl-color-border: #403d52;
101
-}
102
-
103
-/* ─── Warm ─── */
104
-[data-theme='warm'] {
105
- --ja-bg: #1c1412; --ja-bg-2: #241a17; --ja-bg-3: #33241e; --ja-panel: #241a17;
106
- --ja-border: #4a362e; --ja-green: #ffb454; --ja-green-dim: #e89b3a; --ja-red: #ff6b6b;
107
- --ja-white: #f8ead9; --ja-muted: #a88b7a; --ja-accent: #ff9d5c; --ja-accent-2: #ffd166;
108
- --sl-color-accent-low: #4a2c1a; --sl-color-accent: #ff9d5c; --sl-color-accent-high: #ffd0a8;
109
- --sl-color-white: #f8ead9; --sl-color-gray-1: #f8ead9; --sl-color-gray-2: #d4bca8;
110
- --sl-color-gray-3: #a88b7a; --sl-color-gray-4: #7d6353; --sl-color-gray-5: #4a362e;
111
- --sl-color-gray-6: #33241e; --sl-color-black: #1c1412; --sl-color-bg: #1c1412;
112
- --sl-color-bg-nav: #241a17; --sl-color-bg-sidebar: #241a17; --sl-color-bg-hover: #33241e;
113
- --sl-color-text: #f8ead9; --sl-color-text-muted: #a88b7a; --sl-color-border: #4a362e;
114
-}
115
-
116
-/* ─── Typography (readable, not flashy) ─── */
117
-html {
118
- font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
119
- -webkit-font-smoothing: antialiased;
120
- text-rendering: optimizeLegibility;
121
-}
122
-
123
-body { line-height: 1.7; }
124
-
125
-.content h1 {
126
- font-size: 2rem;
127
- font-weight: 800;
128
- letter-spacing: -0.02em;
129
- line-height: 1.2;
130
- margin-bottom: 1rem;
131
- color: var(--ja-white);
132
-}
133
-
134
-.content h2 {
135
- font-size: 1.4rem;
136
- font-weight: 700;
137
- margin-top: 2.5rem;
138
- margin-bottom: 0.75rem;
139
- padding-bottom: 0.5rem;
140
- border-bottom: 1px solid var(--sl-color-border);
141
-}
142
-
143
-.content h3 { font-size: 1.15rem; font-weight: 600; margin-top: 2rem; margin-bottom: 0.5rem; }
144
-.content h4 { font-size: 1rem; font-weight: 600; margin-top: 1.5rem; }
145
-
146
-.content a {
147
- color: var(--ja-accent);
148
- text-decoration: none;
149
- transition: color 0.15s ease;
150
-}
151
-.content a:hover { text-decoration: underline; text-underline-offset: 3px; }
152
-
153
-/* ─── Code blocks (shiki themes from astro.config) ─── */
154
-code {
155
- font-family: 'JetBrains Mono', 'Fira Code', monospace;
156
- font-size: 0.85em;
157
- border-radius: 6px;
158
- padding: 0.15em 0.4em;
159
- background: var(--sl-color-gray-5);
160
- color: var(--ja-accent);
161
-}
162
-
163
-pre {
164
- font-family: 'JetBrains Mono', 'Fira Code', monospace;
165
- font-size: 0.875rem;
166
- line-height: 1.65;
167
- border-radius: 10px;
168
- border: 1px solid var(--sl-color-border);
169
- padding: 1.1rem 1.25rem;
170
- overflow-x: auto;
171
- background: var(--ja-bg-2);
172
-}
173
-
174
-pre code { background: none; padding: 0; color: inherit; }
175
-
176
-/* ─── Tables ─── */
177
-.content table {
178
- width: 100%;
179
- font-size: 0.875rem;
180
- border-collapse: collapse;
181
- border: 1px solid var(--sl-color-border);
182
- margin: 1.25rem 0;
183
- border-radius: 10px;
184
- overflow: hidden;
185
-}
186
-
187
-.content th {
188
- font-weight: 600;
189
- text-align: left;
190
- padding: 0.65rem 0.9rem;
191
- background: var(--ja-bg-3);
192
- border-bottom: 1px solid var(--sl-color-border);
193
-}
194
-
195
-.content td {
196
- padding: 0.65rem 0.9rem;
197
- border-bottom: 1px solid var(--sl-color-border);
198
-}
199
-
200
-.content tbody tr:last-child td { border-bottom: none; }
201
-.content tbody tr:hover { background: var(--ja-bg-3); }
202
-
203
-/* ─── Callouts ─── */
204
-.starlight-aside { border-radius: 10px; border-left-width: 3px; padding: 0.9rem 1.1rem; margin: 1.25rem 0; }
205
-.starlight-aside--note { border-left-color: var(--ja-accent-2); background: color-mix(in srgb, var(--ja-accent-2) 6%, transparent); }
206
-.starlight-aside--tip { border-left-color: var(--ja-green); background: color-mix(in srgb, var(--ja-green) 6%, transparent); }
207
-.starlight-aside--caution { border-left-color: #f59e0b; background: color-mix(in srgb, #f59e0b 6%, transparent); }
208
-.starlight-aside--danger { border-left-color: var(--ja-red); background: color-mix(in srgb, var(--ja-red) 6%, transparent); }
209
-
210
-/* ═══════════════════════════════════════════════════════════════════
211
- Landing page β€” shadcn-style components
212
- ═══════════════════════════════════════════════════════════════════ */
213
-
214
-/* Hero */
215
-.ja-hero {
216
- position: relative;
217
- text-align: center;
218
- padding: 4rem 1rem 3rem;
219
- margin: 0 0 2rem;
220
-}
221
-
222
-.ja-hero-badge {
223
- display: inline-flex;
224
- align-items: center;
225
- gap: 0.4rem;
226
- padding: 0.25rem 0.75rem;
227
- border-radius: 9999px;
228
- border: 1px solid var(--sl-color-border);
229
- background: var(--ja-bg-2);
230
- font-size: 0.8rem;
231
- color: var(--ja-muted);
232
- margin-bottom: 1.25rem;
233
-}
234
-
235
-.ja-hero-badge .dot {
236
- width: 6px; height: 6px;
237
- border-radius: 9999px;
238
- background: var(--ja-green);
239
- animation: pulse 2s ease-in-out infinite;
240
-}
241
-
242
-@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
243
-
244
-.ja-hero h1 {
245
- font-size: clamp(2.4rem, 6vw, 3.75rem);
246
- font-weight: 800;
247
- letter-spacing: -0.03em;
248
- line-height: 1.1;
249
- margin: 0 0 1rem;
250
- background: linear-gradient(180deg, var(--ja-white), var(--ja-muted));
251
- -webkit-background-clip: text;
252
- -webkit-text-fill-color: transparent;
253
- background-clip: text;
254
-}
255
-
256
-.ja-hero h1 .grad {
257
- background: linear-gradient(90deg, var(--ja-accent), var(--ja-accent-2));
258
- -webkit-background-clip: text;
259
- -webkit-text-fill-color: transparent;
260
- background-clip: text;
261
-}
262
-
263
-.ja-hero-sub {
264
- font-size: 1.1rem;
265
- color: var(--ja-muted);
266
- max-width: 34rem;
267
- margin: 0 auto 2rem;
268
-}
269
-
270
-.ja-hero-actions {
271
- display: flex;
272
- gap: 0.75rem;
273
- justify-content: center;
274
- flex-wrap: wrap;
275
-}
276
-
277
-.ja-btn {
278
- display: inline-flex;
279
- align-items: center;
280
- gap: 0.4rem;
281
- padding: 0.55rem 1.25rem;
282
- border-radius: 8px;
283
- font-size: 0.9rem;
284
- font-weight: 600;
285
- transition: all 0.15s ease;
286
- border: 1px solid transparent;
287
-}
288
-
289
-.ja-btn--primary {
290
- background: var(--ja-accent);
291
- color: #052e16;
292
-}
293
-.ja-btn--primary:hover {
294
- filter: brightness(1.1);
295
- text-decoration: none;
296
-}
297
-[data-theme='light'] .ja-btn--primary { color: #fff; }
298
-
299
-.ja-btn--ghost {
300
- border-color: var(--sl-color-border);
301
- color: var(--ja-white);
302
- background: transparent;
303
-}
304
-.ja-btn--ghost:hover { background: var(--ja-bg-3); text-decoration: none; }
305
-
306
-/* Stats */
307
-.ja-stats {
308
- display: grid;
309
- grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
310
- gap: 0.75rem;
311
- margin: 2rem 0;
312
-}
313
-
314
-.ja-stat {
315
- border: 1px solid var(--sl-color-border);
316
- border-radius: 12px;
317
- padding: 1.1rem 0.75rem;
318
- text-align: center;
319
- background: var(--ja-panel);
320
- transition: border-color 0.2s ease, box-shadow 0.2s ease;
321
-}
322
-
323
-.ja-stat:hover {
324
- border-color: var(--ja-accent);
325
- box-shadow: 0 4px 20px -4px color-mix(in srgb, var(--ja-accent) 25%, transparent);
326
-}
327
-
328
-.ja-stat-value {
329
- font-size: 1.6rem;
330
- font-weight: 800;
331
- color: var(--ja-white);
332
- font-family: 'JetBrains Mono', monospace;
333
- font-variant-numeric: tabular-nums;
334
-}
335
-
336
-.ja-stat-label {
337
- font-size: 0.8rem;
338
- color: var(--ja-muted);
339
- margin-top: 0.25rem;
340
-}
341
-
342
-/* Cards (shadcn-style) */
343
-.ja-grid {
344
- display: grid;
345
- grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
346
- gap: 0.9rem;
347
- margin: 1.5rem 0;
348
-}
349
-
350
-.ja-card {
351
- border: 1px solid var(--sl-color-border);
352
- border-radius: 12px;
353
- padding: 1.25rem;
354
- background: var(--ja-panel);
355
- transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
356
-}
357
-
358
-.ja-card:hover {
359
- border-color: color-mix(in srgb, var(--ja-accent) 60%, var(--sl-color-border));
360
- box-shadow: 0 8px 30px -8px color-mix(in srgb, var(--ja-accent) 20%, transparent);
361
-}
362
-
363
-.ja-card-icon {
364
- width: 2rem;
365
- height: 2rem;
366
- border-radius: 8px;
367
- display: flex;
368
- align-items: center;
369
- justify-content: center;
370
- font-size: 1rem;
371
- margin-bottom: 0.75rem;
372
- background: color-mix(in srgb, var(--ja-accent) 12%, transparent);
373
- color: var(--ja-accent);
374
-}
375
-
376
-.ja-card h3 {
377
- font-size: 0.95rem;
378
- font-weight: 600;
379
- margin: 0 0 0.4rem;
380
- color: var(--ja-white);
381
-}
382
-
383
-.ja-card p {
384
- font-size: 0.85rem;
385
- color: var(--ja-muted);
386
- margin: 0;
387
- line-height: 1.6;
388
-}
389
-
390
-/* Tabs (shadcn) */
391
-.ja-tabs {
392
- border: 1px solid var(--sl-color-border);
393
- border-radius: 12px;
394
- overflow: hidden;
395
- background: var(--ja-panel);
396
- margin: 1.5rem 0;
397
-}
398
-
399
-.ja-tabs-bar {
400
- display: flex;
401
- gap: 0.25rem;
402
- padding: 0.4rem;
403
- border-bottom: 1px solid var(--sl-color-border);
404
- background: var(--ja-bg-2);
405
- overflow-x: auto;
406
-}
407
-
408
-.ja-tab-btn {
409
- padding: 0.4rem 0.9rem;
410
- border-radius: 8px;
411
- font-size: 0.82rem;
412
- font-weight: 500;
413
- color: var(--ja-muted);
414
- border: none;
415
- background: transparent;
416
- cursor: pointer;
417
- white-space: nowrap;
418
- transition: all 0.15s ease;
419
- font-family: inherit;
420
-}
421
-
422
-.ja-tab-btn:hover { color: var(--ja-white); background: var(--ja-bg-3); }
423
-.ja-tab-btn[data-active='true'] {
424
- color: var(--ja-white);
425
- background: var(--ja-bg-3);
426
-}
427
-
428
-.ja-tab-panel { padding: 1rem; }
429
-.ja-tab-panel pre { margin: 0; border: none; background: transparent; }
430
-
431
-/* Terminal */
432
-.ja-terminal {
433
- border: 1px solid var(--sl-color-border);
434
- border-radius: 12px;
435
- overflow: hidden;
436
- margin: 1.5rem 0;
437
- background: var(--ja-bg-2);
438
-}
439
-
440
-.ja-terminal-bar {
441
- display: flex;
442
- align-items: center;
443
- gap: 0.4rem;
444
- padding: 0.55rem 0.9rem;
445
- background: var(--ja-bg-3);
446
- border-bottom: 1px solid var(--sl-color-border);
447
-}
448
-
449
-.ja-terminal-dot { width: 10px; height: 10px; border-radius: 9999px; }
450
-.ja-terminal-dot:nth-child(1) { background: #ef4444; }
451
-.ja-terminal-dot:nth-child(2) { background: #f59e0b; }
452
-.ja-terminal-dot:nth-child(3) { background: var(--ja-green); }
453
-
454
-.ja-terminal-title {
455
- margin-left: 0.5rem;
456
- font-size: 0.75rem;
457
- color: var(--ja-muted);
458
- font-family: 'JetBrains Mono', monospace;
459
-}
460
-
461
-.ja-terminal-body {
462
- padding: 1rem 1.1rem;
463
- font-family: 'JetBrains Mono', monospace;
464
- font-size: 0.8rem;
465
- line-height: 1.7;
466
- color: var(--ja-green);
467
- overflow-x: auto;
468
-}
469
-
470
-.ja-terminal-body .cm { color: var(--ja-muted); }
471
-.ja-terminal-body .ok { color: var(--ja-green); }
472
-.ja-terminal-body .err { color: var(--ja-red); }
473
-.ja-terminal-body .dim { color: var(--ja-muted); }
474
-
475
-/* Benchmark bars */
476
-.ja-bars { margin: 1.5rem 0; display: flex; flex-direction: column; gap: 0.6rem; }
477
-
478
-.ja-bar-row {
479
- display: grid;
480
- grid-template-columns: 7rem 1fr 4rem;
481
- align-items: center;
482
- gap: 0.75rem;
483
- font-size: 0.85rem;
484
-}
485
-
486
-.ja-bar-label { color: var(--ja-muted); text-align: right; font-weight: 500; }
487
-.ja-bar-track {
488
- height: 1.6rem;
489
- border-radius: 6px;
490
- background: var(--ja-bg-3);
491
- overflow: hidden;
492
-}
493
-
494
-.ja-bar-fill {
495
- height: 100%;
496
- border-radius: 6px;
497
- background: linear-gradient(90deg, var(--ja-accent), var(--ja-accent-2));
498
- width: 0%;
499
-}
500
-
501
-.ja-bar-row--winner .ja-bar-fill { background: linear-gradient(90deg, var(--ja-green), var(--ja-accent-2)); }
502
-.ja-bar-row--winner .ja-bar-label { color: var(--ja-green); font-weight: 700; }
503
-.ja-bar-value { font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; color: var(--ja-white); }
504
-
505
-/* CTA */
506
-.ja-cta {
507
- border: 1px solid var(--sl-color-border);
508
- border-radius: 16px;
509
- padding: 2.5rem 1.5rem;
510
- text-align: center;
511
- margin: 2.5rem 0 1rem;
512
- background:
513
- radial-gradient(ellipse at top, color-mix(in srgb, var(--ja-accent) 8%, transparent), transparent 60%),
514
- var(--ja-panel);
515
-}
516
-
517
-.ja-cta-title {
518
- font-size: 1.6rem;
519
- font-weight: 800;
520
- margin: 0 0 0.5rem;
521
- color: var(--ja-white);
522
-}
523
-
524
-.ja-cta-sub { color: var(--ja-muted); margin: 0 0 1.5rem; font-size: 0.95rem; }
525
-
526
-/* Theme switcher */
527
-.ja-theme-switcher {
528
- position: fixed;
529
- bottom: 1rem;
530
- right: 1rem;
531
- z-index: 1000;
532
- display: flex;
533
- gap: 0.3rem;
534
- padding: 0.3rem;
535
- border-radius: 9999px;
536
- border: 1px solid var(--sl-color-border);
537
- background: var(--ja-panel);
538
- box-shadow: 0 4px 20px -4px rgba(0,0,0,0.4);
539
-}
540
-
541
-.ja-theme-btn {
542
- width: 1.75rem;
543
- height: 1.75rem;
544
- border-radius: 9999px;
545
- border: 1px solid transparent;
546
- cursor: pointer;
547
- transition: all 0.2s ease;
548
-}
549
-.ja-theme-btn:hover { transform: scale(1.15); }
550
-.ja-theme-btn[data-active='true'] { border-color: var(--ja-white); box-shadow: 0 0 8px currentColor; }
551
-
552
-.ja-theme-btn--dark { background: #09090b; color: #22c55e; }
553
-.ja-theme-btn--light { background: #ffffff; color: #16a34a; }
554
-.ja-theme-btn--dracula { background: #282a36; color: #bd93f9; }
555
-.ja-theme-btn--rosepine { background: #191724; color: #c4a7e7; }
556
-.ja-theme-btn--warm { background: #1c1412; color: #ff9d5c; }
557
-
558
-/* Section headings on landing */
559
-.ja-section {
560
- margin: 2.5rem 0 1.25rem;
561
- font-size: 1.1rem;
562
- font-weight: 700;
563
- color: var(--ja-white);
564
- display: flex;
565
- align-items: center;
566
- gap: 0.5rem;
567
-}
568
-
569
-.ja-section::after {
570
- content: '';
571
- flex: 1;
572
- height: 1px;
573
- background: var(--sl-color-border);
574
-}
575
-
576
-/* Accessibility */
577
-:focus-visible { outline: 2px solid var(--ja-accent); outline-offset: 2px; }
578
-::selection { background: color-mix(in srgb, var(--ja-accent) 25%, transparent); }
579
-
580
-/* Scrollbar */
581
-::-webkit-scrollbar { width: 8px; height: 8px; }
582
-::-webkit-scrollbar-track { background: transparent; }
583
-::-webkit-scrollbar-thumb { background: var(--sl-color-gray-5); border-radius: 4px; }
584
-::-webkit-scrollbar-thumb:hover { background: var(--sl-color-gray-4); }
585
-
586
-/* Mobile */
587
480
@media (max-width: 768px) {
588
- .content h1 { font-size: 1.6rem; }
589
- .ja-hero { padding: 2.5rem 0.5rem 2rem; }
590
- .ja-bar-row { grid-template-columns: 5.5rem 1fr 3.5rem; }
591
- .ja-stats { grid-template-columns: repeat(2, 1fr); }
481
+ .ja-bar-row {
482
+ grid-template-columns: 5.5rem 1fr 3.5rem;
483
+ }
484
+ .ja-stats {
485
+ grid-template-columns: repeat(2, 1fr);
486
+ }
592
487
}
593
-
594
-/* Print */
595
-@media print { .sidebar, .toc-panel, .edit-link, .prev-next-nav, .ja-theme-switcher { display: none !important; } }
596
488
β–Όdocs_site/src/styles/webtui/base.css
+1-0
@@ -0,0 +1 @@
1
+@layer base{:root{--background0: #fff;--background1: #ddd;--background2: #bbb;--background3: #999;--foreground0: #000;--foreground1: #444;--foreground2: #888;--font-size: 16px;--line-height: 1.3;--font-weight-bold: 700;--font-weight-normal: 400;--font-family: monospace;--box-border-color: var(--foreground0)}[data-webtui-theme=dark]{--background0: #000;--background1: #222;--background2: #444;--background3: #666;--foreground0: #fff;--foreground1: #ccc;--foreground2: #999}body,html{background-color:var(--background0);color:var(--foreground0);font-family:var(--font-family);font-size:var(--font-size);font-weight:var(--font-weight-normal);line-height:var(--line-height, 1.5);font-variant-ligatures:common-ligatures;word-break:break-all}*{box-sizing:border-box;margin:0;padding:0;outline:none}}
0
2
β–Όdocs_site/src/styles/webtui/box.css
+1-0
@@ -0,0 +1 @@
1
+@layer utils{@property --box-rounded-radius{syntax: "<length>"; inherits: false; initial-value: 4px;}@property --box-border-width{syntax: "<length>"; inherits: false; initial-value: 2px;}@property --box-double-border-width{syntax: "<length>"; inherits: false; initial-value: 1px;}[box-=square],[box-=round],[box-=double]{position:relative;isolation:isolate;padding:1lh 1ch}[box-=square]:before,[box-=round]:before,[box-=double]:before{content:"";position:absolute;top:50%;left:50%;translate:-50% -50%;width:calc(100% - 1ch - var(--box-border-width));height:calc(100% - 1lh - var(--box-border-width));border:solid var(--box-border-width) var(--box-border-color);z-index:-1}[box-=square][box-=round]:before,[box-=round][box-=round]:before,[box-=double][box-=round]:before{border-radius:var(--box-rounded-radius)}[box-=square][box-=round]:after,[box-=round][box-=round]:after,[box-=double][box-=round]:after{border-radius:calc(var(--box-rounded-radius) + 2px)}[box-=square][box-=double]:before,[box-=round][box-=double]:before,[box-=double][box-=double]:before{border-width:var(--box-double-border-width)}[box-=square][box-=double]:after,[box-=round][box-=double]:after,[box-=double][box-=double]:after{content:"";position:absolute;top:50%;left:50%;translate:-50% -50%;width:calc(100% - 1ch + var(--box-double-border-width) * 2);height:calc(100% - 1lh + var(--box-double-border-width) * 2);border:solid var(--box-double-border-width) var(--box-border-color);z-index:-1}[box-=square][shear-=both],[box-=round][shear-=both],[box-=double][shear-=both]{padding-top:0;padding-bottom:0}[box-=square][shear-=top],[box-=round][shear-=top],[box-=double][shear-=top]{padding-top:0}[box-=square][shear-=bottom],[box-=round][shear-=bottom],[box-=double][shear-=bottom]{padding-bottom:0}}
0
2
β–Όdocs_site/src/styles/webtui/catppuccin.css
+1-0
@@ -0,0 +1 @@
1
+@layer base{[data-webtui-theme=catppuccin],[data-webtui-theme=catppuccin-mocha]{--rosewater: #f5e0dc;--flamingo: #f2cdcd;--pink: #f5c2e7;--mauve: #cba6f7;--red: #f38ba8;--maroon: #eba0ac;--peach: #fab387;--yellow: #f9e2af;--green: #a6e3a1;--teal: #94e2d5;--sky: #89dceb;--sapphire: #74c7ec;--blue: #89b4fa;--lavender: #b4befe;--text: #cdd6f4;--subtext1: #bac2de;--subtext0: #a6adc8;--overlay2: #9399b2;--overlay1: #7f849c;--overlay0: #6c7086;--surface2: #585b70;--surface1: #45475a;--surface0: #313244;--base: #1e1e2e;--mantle: #181825;--crust: #11111b}[data-webtui-theme=catppuccin-macchiato]{--rosewater: #f4dbd6;--flamingo: #f0c6c6;--pink: #f5bde6;--mauve: #c6a0f6;--red: #ed8796;--maroon: #ee99a0;--peach: #f5a97f;--yellow: #eed49f;--green: #a6da95;--teal: #8bd5ca;--sky: #91d7e3;--sapphire: #7dc4e4;--blue: #8aadf4;--lavender: #b7bdf8;--text: #cad3f5;--subtext1: #b8c0e0;--subtext0: #a5adcb;--overlay2: #939ab7;--overlay1: #8087a2;--overlay0: #6e738d;--surface2: #5b6078;--surface1: #494d64;--surface0: #363a4f;--base: #24273a;--mantle: #1e2030;--crust: #181926}[data-webtui-theme=catppuccin-frappe]{--rosewater: #f2d5cf;--flamingo: #eebebe;--pink: #f4b8e4;--mauve: #ca9ee6;--red: #e78284;--maroon: #ea999c;--peach: #ef9f76;--yellow: #e5c890;--green: #a6d189;--teal: #81c8be;--sky: #99d1db;--sapphire: #85c1dc;--blue: #8caaee;--lavender: #babbf1;--text: #c6d0f5;--subtext1: #b5bfe2;--subtext0: #a5adce;--overlay2: #949cbb;--overlay1: #838ba7;--overlay0: #737994;--surface2: #626880;--surface1: #51576d;--surface0: #414559;--base: #303446;--mantle: #292c3c;--crust: #232634}[data-webtui-theme=catppuccin-latte]{--rosewater: #dc8a78;--flamingo: #dd7878;--pink: #ea76cb;--mauve: #8839ef;--red: #d20f39;--maroon: #e64553;--peach: #fe640b;--yellow: #df8e1d;--green: #40a02b;--teal: #179299;--sky: #04a5e5;--sapphire: #209fb5;--blue: #1e66f5;--lavender: #7287fd;--text: #4c4f69;--subtext1: #5c5f77;--subtext0: #6c6f85;--overlay2: #7c7f93;--overlay1: #8c8fa1;--overlay0: #9ca0b0;--surface2: #acb0be;--surface1: #bcc0cc;--surface0: #ccd0da;--base: #eff1f5;--mantle: #e6e9ef;--crust: #dce0e8}[data-webtui-theme|=catppuccin]{--background0: var(--base);--background1: var(--surface0);--background2: var(--surface1);--background3: var(--surface2);--foreground0: var(--text);--foreground1: var(--subtext1);--foreground2: var(--overlay2)}}@layer components{[data-webtui-theme|=catppuccin] button[variant-=rosewater]{--button-primary: var(--rosewater);--button-secondary: var(--background0)}[data-webtui-theme|=catppuccin] button[variant-=flamingo]{--button-primary: var(--flamingo);--button-secondary: var(--background0)}[data-webtui-theme|=catppuccin] button[variant-=pink]{--button-primary: var(--pink);--button-secondary: var(--background0)}[data-webtui-theme|=catppuccin] button[variant-=mauve]{--button-primary: var(--mauve);--button-secondary: var(--background0)}[data-webtui-theme|=catppuccin] button[variant-=red]{--button-primary: var(--red);--button-secondary: var(--background0)}[data-webtui-theme|=catppuccin] button[variant-=maroon]{--button-primary: var(--maroon);--button-secondary: var(--background0)}[data-webtui-theme|=catppuccin] button[variant-=peach]{--button-primary: var(--peach);--button-secondary: var(--background0)}[data-webtui-theme|=catppuccin] button[variant-=yellow]{--button-primary: var(--yellow);--button-secondary: var(--background0)}[data-webtui-theme|=catppuccin] button[variant-=green]{--button-primary: var(--green);--button-secondary: var(--background0)}[data-webtui-theme|=catppuccin] button[variant-=teal]{--button-primary: var(--teal);--button-secondary: var(--background0)}[data-webtui-theme|=catppuccin] button[variant-=sky]{--button-primary: var(--sky);--button-secondary: var(--background0)}[data-webtui-theme|=catppuccin] button[variant-=sapphire]{--button-primary: var(--sapphire);--button-secondary: var(--background0)}[data-webtui-theme|=catppuccin] button[variant-=blue]{--button-primary: var(--blue);--button-secondary: var(--background0)}[data-webtui-theme|=catppuccin] button[variant-=lavender]{--button-primary: var(--lavender);--button-secondary: var(--background0)}}@layer components{[data-webtui-theme|=catppuccin] h1{color:var(--red)}[data-webtui-theme|=catppuccin] h2{color:var(--peach)}[data-webtui-theme|=catppuccin] h3{color:var(--yellow)}[data-webtui-theme|=catppuccin] h4{color:var(--green)}[data-webtui-theme|=catppuccin] h5{color:var(--blue)}[data-webtui-theme|=catppuccin] h6{color:var(--lavender)}[data-webtui-theme|=catppuccin] p a,[data-webtui-theme|=catppuccin] blockquote a,[data-webtui-theme|=catppuccin] li a,[data-webtui-theme|=catppuccin] [is-~=typography-block] a{color:var(--sky);text-decoration:underline}[data-webtui-theme|=catppuccin] p a:hover,[data-webtui-theme|=catppuccin] blockquote a:hover,[data-webtui-theme|=catppuccin] li a:hover,[data-webtui-theme|=catppuccin] [is-~=typography-block] a:hover{color:var(--blue)}[data-webtui-theme|=catppuccin] p code,[data-webtui-theme|=catppuccin] blockquote code,[data-webtui-theme|=catppuccin] li code,[data-webtui-theme|=catppuccin] [is-~=typography-block] code{color:var(--red)}}@layer components{[data-webtui-theme|=catppuccin] [is-~=badge][variant-=rosewater]{--badge-color: var(--rosewater);--badge-text: var(--background0)}[data-webtui-theme|=catppuccin] [is-~=badge][variant-=flamingo]{--badge-color: var(--flamingo);--badge-text: var(--background0)}[data-webtui-theme|=catppuccin] [is-~=badge][variant-=pink]{--badge-color: var(--pink);--badge-text: var(--background0)}[data-webtui-theme|=catppuccin] [is-~=badge][variant-=mauve]{--badge-color: var(--mauve);--badge-text: var(--background0)}[data-webtui-theme|=catppuccin] [is-~=badge][variant-=red]{--badge-color: var(--red);--badge-text: var(--background0)}[data-webtui-theme|=catppuccin] [is-~=badge][variant-=maroon]{--badge-color: var(--maroon);--badge-text: var(--background0)}[data-webtui-theme|=catppuccin] [is-~=badge][variant-=peach]{--badge-color: var(--peach);--badge-text: var(--background0)}[data-webtui-theme|=catppuccin] [is-~=badge][variant-=yellow]{--badge-color: var(--yellow);--badge-text: var(--background0)}[data-webtui-theme|=catppuccin] [is-~=badge][variant-=green]{--badge-color: var(--green);--badge-text: var(--background0)}[data-webtui-theme|=catppuccin] [is-~=badge][variant-=teal]{--badge-color: var(--teal);--badge-text: var(--background0)}[data-webtui-theme|=catppuccin] [is-~=badge][variant-=sky]{--badge-color: var(--sky);--badge-text: var(--background0)}[data-webtui-theme|=catppuccin] [is-~=badge][variant-=sapphire]{--badge-color: var(--sapphire);--badge-text: var(--background0)}[data-webtui-theme|=catppuccin] [is-~=badge][variant-=blue]{--badge-color: var(--blue);--badge-text: var(--background0)}[data-webtui-theme|=catppuccin] [is-~=badge][variant-=lavender]{--badge-color: var(--lavender);--badge-text: var(--background0)}}@layer components{[data-webtui-theme|=catppuccin] mark[bg-=rosewater],[data-webtui-theme|=catppuccin] [is-~=mark][bg-=rosewater]{background-color:var(--rosewater)}[data-webtui-theme|=catppuccin] mark[bg-=flamingo],[data-webtui-theme|=catppuccin] [is-~=mark][bg-=flamingo]{background-color:var(--flamingo)}[data-webtui-theme|=catppuccin] mark[bg-=pink],[data-webtui-theme|=catppuccin] [is-~=mark][bg-=pink]{background-color:var(--pink)}[data-webtui-theme|=catppuccin] mark[bg-=mauve],[data-webtui-theme|=catppuccin] [is-~=mark][bg-=mauve]{background-color:var(--mauve)}[data-webtui-theme|=catppuccin] mark[bg-=red],[data-webtui-theme|=catppuccin] [is-~=mark][bg-=red]{background-color:var(--red)}[data-webtui-theme|=catppuccin] mark[bg-=maroon],[data-webtui-theme|=catppuccin] [is-~=mark][bg-=maroon]{background-color:var(--maroon)}[data-webtui-theme|=catppuccin] mark[bg-=peach],[data-webtui-theme|=catppuccin] [is-~=mark][bg-=peach]{background-color:var(--peach)}[data-webtui-theme|=catppuccin] mark[bg-=yellow],[data-webtui-theme|=catppuccin] [is-~=mark][bg-=yellow]{background-color:var(--yellow)}[data-webtui-theme|=catppuccin] mark[bg-=green],[data-webtui-theme|=catppuccin] [is-~=mark][bg-=green]{background-color:var(--green)}[data-webtui-theme|=catppuccin] mark[bg-=teal],[data-webtui-theme|=catppuccin] [is-~=mark][bg-=teal]{background-color:var(--teal)}[data-webtui-theme|=catppuccin] mark[bg-=sky],[data-webtui-theme|=catppuccin] [is-~=mark][bg-=sky]{background-color:var(--sky)}[data-webtui-theme|=catppuccin] mark[bg-=sapphire],[data-webtui-theme|=catppuccin] [is-~=mark][bg-=sapphire]{background-color:var(--sapphire)}[data-webtui-theme|=catppuccin] mark[bg-=blue],[data-webtui-theme|=catppuccin] [is-~=mark][bg-=blue]{background-color:var(--blue)}[data-webtui-theme|=catppuccin] mark[bg-=lavender],[data-webtui-theme|=catppuccin] [is-~=mark][bg-=lavender]{background-color:var(--lavender)}[data-webtui-theme|=catppuccin] mark[fg-=rosewater],[data-webtui-theme|=catppuccin] [is-~=mark][fg-=rosewater]{color:var(--rosewater)}[data-webtui-theme|=catppuccin] mark[fg-=flamingo],[data-webtui-theme|=catppuccin] [is-~=mark][fg-=flamingo]{color:var(--flamingo)}[data-webtui-theme|=catppuccin] mark[fg-=pink],[data-webtui-theme|=catppuccin] [is-~=mark][fg-=pink]{color:var(--pink)}[data-webtui-theme|=catppuccin] mark[fg-=mauve],[data-webtui-theme|=catppuccin] [is-~=mark][fg-=mauve]{color:var(--mauve)}[data-webtui-theme|=catppuccin] mark[fg-=red],[data-webtui-theme|=catppuccin] [is-~=mark][fg-=red]{color:var(--red)}[data-webtui-theme|=catppuccin] mark[fg-=maroon],[data-webtui-theme|=catppuccin] [is-~=mark][fg-=maroon]{color:var(--maroon)}[data-webtui-theme|=catppuccin] mark[fg-=peach],[data-webtui-theme|=catppuccin] [is-~=mark][fg-=peach]{color:var(--peach)}[data-webtui-theme|=catppuccin] mark[fg-=yellow],[data-webtui-theme|=catppuccin] [is-~=mark][fg-=yellow]{color:var(--yellow)}[data-webtui-theme|=catppuccin] mark[fg-=green],[data-webtui-theme|=catppuccin] [is-~=mark][fg-=green]{color:var(--green)}[data-webtui-theme|=catppuccin] mark[fg-=teal],[data-webtui-theme|=catppuccin] [is-~=mark][fg-=teal]{color:var(--teal)}[data-webtui-theme|=catppuccin] mark[fg-=sky],[data-webtui-theme|=catppuccin] [is-~=mark][fg-=sky]{color:var(--sky)}[data-webtui-theme|=catppuccin] mark[fg-=sapphire],[data-webtui-theme|=catppuccin] [is-~=mark][fg-=sapphire]{color:var(--sapphire)}[data-webtui-theme|=catppuccin] mark[fg-=blue],[data-webtui-theme|=catppuccin] [is-~=mark][fg-=blue]{color:var(--blue)}[data-webtui-theme|=catppuccin] mark[fg-=lavender],[data-webtui-theme|=catppuccin] [is-~=mark][fg-=lavender]{color:var(--lavender)}}
0
2
β–Όdocs_site/src/styles/webtui/components/accordion.css
+1-0
@@ -0,0 +1 @@
1
+@layer components{details[is-~=accordion][open]::details-content{padding-left:2ch}details[is-~=accordion]>summary:before{content:"Λƒ "}details[is-~=accordion]>summary::-webkit-details-marker{display:none}details[is-~=accordion]>summary::marker{content:"";display:none}details[is-~=accordion]>summary:focus{text-decoration:underline}details[is-~=accordion][open] summary:before{content:"Λ… "}}
0
2
β–Όdocs_site/src/styles/webtui/components/badge.css
+1-0
@@ -0,0 +1 @@
1
+@layer components{[is-~=badge]{color:var(--badge-text);background-image:linear-gradient(90deg,transparent 0,transparent calc(1ch - 1px),var(--badge-color) calc(1ch - 1px),var(--badge-color) calc(100% - 1ch + 1px),transparent calc(100% - 1ch + 1px),transparent);display:inline-flex;vertical-align:top;white-space:nowrap;height:1lh;line-height:1lh}[is-~=badge][variant-=foreground0],[is-~=badge]:not([variant-]){--badge-color: var(--foreground0);--badge-text: var(--background0)}[is-~=badge][variant-=foreground1]{--badge-color: var(--foreground1);--badge-text: var(--background0)}[is-~=badge][variant-=foreground2]{--badge-color: var(--foreground2);--badge-text: var(--background0)}[is-~=badge][variant-=background0]{--badge-color: var(--background0);--badge-text: var(--foreground0)}[is-~=badge][variant-=background1]{--badge-color: var(--background1);--badge-text: var(--foreground0)}[is-~=badge][variant-=background2]{--badge-color: var(--background2);--badge-text: var(--foreground0)}[is-~=badge][variant-=background3]{--badge-color: var(--background3);--badge-text: var(--foreground0)}[is-~=badge]:before,[is-~=badge]:after{content:"";width:1ch;height:1lh;display:inline-block;vertical-align:middle;background-color:var(--badge-color);overflow:hidden}[is-~=badge][cap-^=round]:before{border-top-left-radius:1lh;border-bottom-left-radius:1lh}[is-~=badge][cap-$=round]:after{border-top-right-radius:1lh;border-bottom-right-radius:1lh}[is-~=badge][cap-^=triangle]:before{clip-path:polygon(100% 0,100% 100%,0 50%)}[is-~=badge][cap-$=triangle]:after{clip-path:polygon(0 0,0 100%,100% 50%)}[is-~=badge][cap-^=slant-top]:before{clip-path:polygon(0 0,100% 0,100% 100%)}[is-~=badge][cap-$=slant-top]:after{clip-path:polygon(0 0,100% 0,0 100%)}[is-~=badge][cap-^=slant-bottom]:before{clip-path:polygon(100% 0,100% 100%,0 100%)}[is-~=badge][cap-$=slant-bottom]:after{clip-path:polygon(0 0,100% 100%,0 100%)}[is-~=badge][cap-^=ribbon]:before{clip-path:polygon(0 0,100% 0,100% 100%,0 100%,100% 50%)}[is-~=badge][cap-$=ribbon]:after{clip-path:polygon(0 0,100% 0,0% 50%,100% 100%,0% 100%)}}
0
2
β–Όdocs_site/src/styles/webtui/components/button.css
+1-0
@@ -0,0 +1 @@
1
+@layer components{button,input[type=button],input[type=submit],input[type=reset],[is-~=button]{--button-primary: var(--foreground0);--button-secondary: var(--background0);--mapped-primary: var(--button-primary);--mapped-secondary: var(--button-secondary);color:var(--mapped-secondary);background-color:var(--mapped-primary);font-family:var(--font-family);font-size:var(--font-size);line-height:var(--line-height);display:inline-flex;align-items:center;justify-content:center;border:none;padding:0 2ch;outline:none}button[box-],input[type=button][box-],input[type=submit][box-],input[type=reset][box-],[is-~=button][box-]{color:var(--mapped-primary);background-color:transparent;--box-border-color: var(--mapped-primary)}button:focus,input[type=button]:focus,input[type=submit]:focus,input[type=reset]:focus,[is-~=button]:focus{font-weight:700;text-decoration:underline}button:active,input[type=button]:active,input[type=submit]:active,input[type=reset]:active,[is-~=button]:active{--mapped-primary: var(--mapped-secondary);--mapped-secondary: var(--mapped-primary)}button:disabled,input[type=button]:disabled,input[type=submit]:disabled,input[type=reset]:disabled,[is-~=button]:disabled{text-decoration:line-through;pointer-events:none}button[size-=small],input[type=button][size-=small],input[type=submit][size-=small],input[type=reset][size-=small],[is-~=button][size-=small]{padding:0 1ch;height:1lh}button:not([size-]):not([box-]),button[size-=default]:not([box-]),input[type=button]:not([size-]):not([box-]),input[type=button][size-=default]:not([box-]),input[type=submit]:not([size-]):not([box-]),input[type=submit][size-=default]:not([box-]),input[type=reset]:not([size-]):not([box-]),input[type=reset][size-=default]:not([box-]),[is-~=button]:not([size-]):not([box-]),[is-~=button][size-=default]:not([box-]){background-color:transparent;background-image:linear-gradient(to bottom,transparent 0,transparent .5lh,var(--mapped-primary) .5lh,var(--mapped-primary) calc(100% - .5lh),transparent calc(100% - .5lh),transparent)}button[size-=large],button[size-=default],button:not([size-]),input[type=button][size-=large],input[type=button][size-=default],input[type=button]:not([size-]),input[type=submit][size-=large],input[type=submit][size-=default],input[type=submit]:not([size-]),input[type=reset][size-=large],input[type=reset][size-=default],input[type=reset]:not([size-]),[is-~=button][size-=large],[is-~=button][size-=default],[is-~=button]:not([size-]){height:3lh}button[variant-=foreground0],button:not([variant-]),input[type=button][variant-=foreground0],input[type=button]:not([variant-]),input[type=submit][variant-=foreground0],input[type=submit]:not([variant-]),input[type=reset][variant-=foreground0],input[type=reset]:not([variant-]),[is-~=button][variant-=foreground0],[is-~=button]:not([variant-]){--button-primary: var(--foreground0);--button-secondary: var(--background0)}button[variant-=foreground1],input[type=button][variant-=foreground1],input[type=submit][variant-=foreground1],input[type=reset][variant-=foreground1],[is-~=button][variant-=foreground1]{--button-primary: var(--foreground1);--button-secondary: var(--background0)}button[variant-=foreground2],input[type=button][variant-=foreground2],input[type=submit][variant-=foreground2],input[type=reset][variant-=foreground2],[is-~=button][variant-=foreground2]{--button-primary: var(--foreground2);--button-secondary: var(--background0)}button[variant-=background0],input[type=button][variant-=background0],input[type=submit][variant-=background0],input[type=reset][variant-=background0],[is-~=button][variant-=background0]{--button-primary: var(--background0);--button-secondary: var(--foreground0)}button[variant-=background1],input[type=button][variant-=background1],input[type=submit][variant-=background1],input[type=reset][variant-=background1],[is-~=button][variant-=background1]{--button-primary: var(--background1);--button-secondary: var(--foreground0)}button[variant-=background2],input[type=button][variant-=background2],input[type=submit][variant-=background2],input[type=reset][variant-=background2],[is-~=button][variant-=background2]{--button-primary: var(--background2);--button-secondary: var(--foreground0)}button[variant-=background3],input[type=button][variant-=background3],input[type=submit][variant-=background3],input[type=reset][variant-=background3],[is-~=button][variant-=background3]{--button-primary: var(--background3);--button-secondary: var(--foreground0)}}
0
2
β–Όdocs_site/src/styles/webtui/components/checkbox.css
+1-0
@@ -0,0 +1 @@
1
+@layer components{input[type=checkbox]:not([is-=switch]){appearance:none;-webkit-appearance:none;-moz-appearance:none;display:inline-block;position:relative;width:3ch;min-width:initial;vertical-align:text-top;color:var(--foreground2);font-family:var(--font-family);font-size:var(--font-size);line-height:var(--line-height);outline:none}input[type=checkbox]:not([is-=switch]):before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;display:inline-flex;align-items:center;justify-content:center;width:3ch;height:1lh;background:var(--background1)}input[type=checkbox]:not([is-=switch]):checked:before{content:"X"}label:has(input[type=checkbox]:not([is-=switch])){display:inline-flex;align-items:flex-start;gap:1ch;max-width:fit-content}label:has(input[type=checkbox]:not([is-=switch]):focus){font-weight:700;text-decoration:underline}input[type=checkbox]:not([is-=switch]):disabled{color:var(--foreground2);pointer-events:none}label:has(input[type=checkbox]:not([is-=switch]):disabled){color:var(--foreground2);text-decoration:line-through}}
0
2
β–Όdocs_site/src/styles/webtui/components/dialog.css
+1-0
@@ -0,0 +1 @@
1
+@layer components{@property --dialog-offset-x{syntax: "<length>"; inherits: true; initial-value: 0;}@property --dialog-offset-y{syntax: "<length>"; inherits: true; initial-value: 0;}@property --dialog-max-width{syntax: "<length>"; inherits: true; initial-value: 0;}@property --dialog-max-height{syntax: "<length>"; inherits: true; initial-value: 0;}dialog{--dialog-offset-top: auto;--dialog-offset-right: auto;--dialog-offset-bottom: auto;--dialog-offset-left: auto;background-color:var(--background0);color:var(--foreground0);font-family:var(--font-family);font-size:var(--font-size);line-height:var(--line-height);border:none;outline:none;position:absolute;max-width:var(--dialog-max-width);max-height:var(--dialog-max-height);overflow:hidden;inset:var(--dialog-offset-top) var(--dialog-offset-right) var(--dialog-offset-bottom) var(--dialog-offset-left)}dialog[open],dialog:popover-open{display:flex;flex-direction:column}dialog[size-=full]{--dialog-max-width: 100vw;--dialog-max-height: 100vh}dialog[size-=default],dialog:not([size-]){--dialog-max-width: 64ch;--dialog-max-height: 24lh}dialog[size-=small]{--dialog-max-width: 48ch;--dialog-max-height: 16lh}dialog[container-^=auto],dialog:not([container-]){width:auto}dialog[container-^=fill]{width:calc(100% - var(--dialog-offset-x) * 2)}dialog[container-$=auto],dialog:not([container-]){height:auto}dialog[container-$=fill]{height:calc(100% - var(--dialog-offset-y) * 2)}dialog[position-^=start]{--dialog-offset-left: var(--dialog-offset-x);--dialog-offset-right: auto}dialog[position-^=end]{--dialog-offset-left: auto;--dialog-offset-right: var(--dialog-offset-x)}dialog[position-^=center],dialog:not([position-]){--dialog-offset-left: 50%;translate:-50%}dialog[position-$=start]{--dialog-offset-top: var(--dialog-offset-y);--dialog-offset-bottom: auto}dialog[position-$=end]{--dialog-offset-top: auto;--dialog-offset-bottom: var(--dialog-offset-y)}dialog[position-$=center],dialog:not([position-]){--dialog-offset-top: 50%;transform:translateY(-50%)}}
0
2
β–Όdocs_site/src/styles/webtui/components/input.css
+1-0
@@ -0,0 +1 @@
1
+@layer components{input[type=text],input[type=email],input[type=password],input[type=search],input[type=tel],input[type=url],input[type=number],input[type=date],input[type=datetime],input[type=datetime-local],input[type=month],input[type=time],input[type=week],input:not([type]),[is-~=input]{background-color:var(--background1);color:var(--foreground0);font-family:var(--font-family);font-size:var(--font-size);font-weight:var(--font-weight-normal);line-height:var(--line-height);outline:none;border:none;min-width:24ch}input[type=text]::placeholder,input[type=email]::placeholder,input[type=password]::placeholder,input[type=search]::placeholder,input[type=tel]::placeholder,input[type=url]::placeholder,input[type=number]::placeholder,input[type=date]::placeholder,input[type=datetime]::placeholder,input[type=datetime-local]::placeholder,input[type=month]::placeholder,input[type=time]::placeholder,input[type=week]::placeholder,input:not([type])::placeholder,[is-~=input]::placeholder{color:var(--foreground2)}input[type=text]:not([size-]),input[type=email]:not([size-]),input[type=password]:not([size-]),input[type=search]:not([size-]),input[type=tel]:not([size-]),input[type=url]:not([size-]),input[type=number]:not([size-]),input[type=date]:not([size-]),input[type=datetime]:not([size-]),input[type=datetime-local]:not([size-]),input[type=month]:not([size-]),input[type=time]:not([size-]),input[type=week]:not([size-]),input:not([type]):not([size-]),[is-~=input]:not([size-]){height:1lh;padding:0 1ch}input[type=text][size-=small],input[type=email][size-=small],input[type=password][size-=small],input[type=search][size-=small],input[type=tel][size-=small],input[type=url][size-=small],input[type=number][size-=small],input[type=date][size-=small],input[type=datetime][size-=small],input[type=datetime-local][size-=small],input[type=month][size-=small],input[type=time][size-=small],input[type=week][size-=small],input:not([type])[size-=small],[is-~=input][size-=small]{height:1lh;padding:0}input[type=text][size-=large],input[type=email][size-=large],input[type=password][size-=large],input[type=search][size-=large],input[type=tel][size-=large],input[type=url][size-=large],input[type=number][size-=large],input[type=date][size-=large],input[type=datetime][size-=large],input[type=datetime-local][size-=large],input[type=month][size-=large],input[type=time][size-=large],input[type=week][size-=large],input:not([type])[size-=large],[is-~=input][size-=large]{height:3lh;padding:1lh 2ch}}
0
2
β–Όdocs_site/src/styles/webtui/components/mark.css
+1-0
@@ -0,0 +1 @@
1
+@layer components{mark,[is-~=mark]{background-color:inherit;color:inherit}mark[bg-][bg-=background0],[is-~=mark][bg-][bg-=background0]{background-color:var(--background0)}mark[bg-][bg-=background1],[is-~=mark][bg-][bg-=background1]{background-color:var(--background1)}mark[bg-][bg-=background2],[is-~=mark][bg-][bg-=background2]{background-color:var(--background2)}mark[bg-][bg-=background3],[is-~=mark][bg-][bg-=background3]{background-color:var(--background3)}mark[bg-][bg-=foreground0],[is-~=mark][bg-][bg-=foreground0]{background-color:var(--foreground0)}mark[bg-][bg-=foreground1],[is-~=mark][bg-][bg-=foreground1]{background-color:var(--foreground1)}mark[bg-][bg-=foreground2],[is-~=mark][bg-][bg-=foreground2]{background-color:var(--foreground2)}mark[fg-][fg-=background0],[is-~=mark][fg-][fg-=background0]{color:var(--background0)}mark[fg-][fg-=background1],[is-~=mark][fg-][fg-=background1]{color:var(--background1)}mark[fg-][fg-=background2],[is-~=mark][fg-][fg-=background2]{color:var(--background2)}mark[fg-][fg-=background3],[is-~=mark][fg-][fg-=background3]{color:var(--background3)}mark[fg-][fg-=foreground0],[is-~=mark][fg-][fg-=foreground0]{color:var(--foreground0)}mark[fg-][fg-=foreground1],[is-~=mark][fg-][fg-=foreground1]{color:var(--foreground1)}mark[fg-][fg-=foreground2],[is-~=mark][fg-][fg-=foreground2]{color:var(--foreground2)}}
0
2
β–Όdocs_site/src/styles/webtui/components/popover.css
+1-0
@@ -0,0 +1 @@
1
+@layer components{@property --popover-offset-x{syntax: "<length>"; inherits: true; initial-value: 0;}@property --popover-offset-y{syntax: "<length>"; inherits: true; initial-value: 0;}details[is-~=popover]{--popover-backdrop-color: transparent;position:relative}details[is-~=popover] summary:focus{text-decoration:underline}details[is-~=popover] summary::-webkit-details-marker{display:none}details[is-~=popover] summary::marker{content:"";display:none}details[is-~=popover][open] summary:before{content:"";display:block;width:100vw;height:100vh;position:fixed;top:0;right:0;bottom:0;left:0;z-index:1;background-color:var(--popover-backdrop-color)}details[is-~=popover][open] summary+*{position:absolute;z-index:2}details[is-~=popover][open][position-~=baseline-left] summary+*,details[is-~=popover][open]:not([position-]) summary+*{left:0%}details[is-~=popover][open][position-~=baseline-right] summary+*{left:100%;translate:-100%}details[is-~=popover][open][position-~=left] summary+*{left:calc(var(--popover-offset-x) * -1);translate:-100%}details[is-~=popover][open][position-~=right] summary+*{left:calc(100% + var(--popover-offset-x))}details[is-~=popover][open][position-~=baseline-top] summary+*{top:0%}details[is-~=popover][open][position-~=baseline-bottom] summary+*{top:100%;transform:translateY(-100%)}details[is-~=popover][open][position-~=top] summary+*{top:calc(var(--popover-offset-y) * -1);transform:translateY(-100%)}details[is-~=popover][open][position-~=bottom] summary+*,details[is-~=popover][open]:not([position-]) summary+*{top:calc(100% + var(--popover-offset-y))}}
0
2
β–Όdocs_site/src/styles/webtui/components/pre.css
+1-0
@@ -0,0 +1 @@
1
+@layer components{pre,[is-~=pre]{--pre-background: var(--background1);background-color:var(--pre-background);white-space:pre-wrap;color:var(--foreground0);font-family:var(--font-family);font-size:var(--font-size);font-weight:var(--font-weight-normal);line-height:var(--line-height);outline:none;border:none;padding:1lh 1ch}pre[size-=small],[is-~=pre][size-=small]{padding:0 1ch}pre:not([size-]),[is-~=pre]:not([size-]){background-color:transparent;background-image:linear-gradient(to bottom,transparent,transparent .5lh,var(--pre-background) .5lh,var(--pre-background) calc(100% - .5lh),transparent calc(100% - .5lh),transparent)}}
0
2
β–Όdocs_site/src/styles/webtui/components/progress.css
+1-0
@@ -0,0 +1 @@
1
+@layer components{@property --progress-value{syntax: "<number>"; inherits: true; initial-value: 0;}@property --progress-max{syntax: "<number>"; inherits: true; initial-value: 100;}[is-~=progress]{--progress-value-background: var(--foreground0);--progress-value-color: var(--foreground0);--progress-value-content: "";--progress-empty-background: var(--background1);--progress-empty-color: var(--foreground0);--progress-empty-content: "";width:round(down,100%,1ch);height:1lh;margin:0;background-color:var(--progress-background-empty);color:var(--progress-color-empty);color:transparent;position:relative;vertical-align:top;display:inline-flex}[is-~=progress]:before{content:var(--progress-value-content);position:absolute;top:0;left:0;height:1lh;vertical-align:top;color:var(--progress-value-color);width:round(nearest,calc((var(--progress-value) / var(--progress-max)) * 100%),1ch);overflow:hidden;white-space:nowrap;background-color:var(--progress-value-background);z-index:1}[is-~=progress]:after{content:var(--progress-empty-content);position:absolute;top:0;right:0;height:1lh;vertical-align:top;color:var(--progress-empty-color);overflow:hidden;width:round(up,calc(100% - (var(--progress-value) / var(--progress-max) * 100%)),1ch);white-space:nowrap;background-color:var(--progress-empty-background);z-index:0}}
0
2
β–Όdocs_site/src/styles/webtui/components/radio.css
+1-0
@@ -0,0 +1 @@
1
+@layer components{input[type=radio]{appearance:none;-webkit-appearance:none;-moz-appearance:none;display:inline-block;position:relative;width:3ch;min-width:initial;vertical-align:text-top;color:var(--foreground2);font-family:var(--font-family);font-size:var(--font-size);line-height:var(--line-height);outline:none}input[type=radio]:before{content:"( )";position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;width:3ch;height:1lh;background:var(--background1)}input[type=radio]:checked:before{content:"(*)"}input[type=radio]:disabled{color:var(--foreground2);pointer-events:none}label:has(input[type=radio]){display:inline-flex;align-items:flex-start;gap:1ch;max-width:fit-content}label:has(input[type=radio]:focus){font-weight:700;text-decoration:underline}label:has(input[type=radio]:disabled){color:var(--foreground2);text-decoration:line-through}}
0
2
β–Όdocs_site/src/styles/webtui/components/range.css
+1-0
@@ -0,0 +1 @@
1
+@layer components{input[type=range]{--range-track-color: var(--background1);--range-thumb-color: var(--foreground2);--range-thumb-color-focus: var(--foreground0);--range-track-height: 2px;appearance:none;-webkit-appearance:none;-moz-appearance:none;background:transparent;outline:none;min-width:20ch;height:1lh;font-family:var(--font-family);font-size:var(--font-size);line-height:var(--line-height);position:relative}input[type=range]::-webkit-slider-runnable-track{-moz-appearance:none;appearance:none;-webkit-appearance:none;width:100%;height:var(--range-track-height);background:var(--range-track-color);border:none;outline:none}input[type=range]::-webkit-slider-thumb{-moz-appearance:none;appearance:none;-webkit-appearance:none;width:1ch;height:1lh;background:transparent;border:1px solid var(--range-thumb-color);border-radius:0;box-sizing:border-box;position:relative;top:50%;transform:translateY(-50%)}input[type=range]:not(:disabled):focus::-webkit-slider-thumb,input[type=range]:not(:disabled):active::-webkit-slider-thumb{background:var(--range-thumb-color-focus);border:none}input[type=range]::-moz-range-track{width:100%;height:var(--range-track-height);background:var(--range-track-color);border:none;outline:none}input[type=range]::-moz-range-thumb{width:1ch;height:1lh;background:transparent;border:1px solid var(--range-thumb-color);border-radius:0;box-sizing:border-box}input[type=range]:not(:disabled):focus::-moz-range-thumb,input[type=range]:not(:disabled):active::-moz-range-thumb{background:var(--range-thumb-color-focus);border:none}input[type=range]:disabled{--range-track-color: var(--background2);--range-thumb-color: var(--foreground2);pointer-events:none;opacity:.6}input[type=range][bar-=thick]{--range-track-height: 1lh}input[type=range][bar-=thick]::-webkit-slider-thumb{height:1lh}input[type=range][bar-=thick]::-moz-range-thumb{height:1lh}input[type=range][bar-=line]{--range-track-height: 1px}label:has(input[type=range]){display:inline-flex;align-items:center;gap:1ch;max-width:fit-content}label:has(input[type=range]:focus){font-weight:700;text-decoration:underline}label:has(input[type=range]:disabled){color:var(--foreground2);text-decoration:line-through}}
0
2
β–Όdocs_site/src/styles/webtui/components/separator.css
+1-0
@@ -0,0 +1 @@
1
+@layer components{@property --separator-width{syntax: "<length>"; inherits: true; initial-value: 2px;}[is-~=separator]{--separator-color: var(--box-border-color);--separator-background: transparent;display:inline-flex;position:relative}[is-~=separator][direction-=x],[is-~=separator][direction-=horizontal],[is-~=separator]:not([direction-]){height:1lh;background-image:linear-gradient(0deg,var(--separator-background) 0,var(--separator-background) calc(.5lh - var(--separator-width) / 2),var(--separator-color) calc(.5lh - (var(--separator-width) / 2)),var(--separator-color) calc(.5lh + (var(--separator-width) / 2)),var(--separator-background) calc(.5lh + (var(--separator-width) / 2)),var(--separator-background))}[is-~=separator][direction-=x][cap-^=bisect]:before,[is-~=separator][direction-=horizontal][cap-^=bisect]:before,[is-~=separator]:not([direction-])[cap-^=bisect]:before{left:-.5ch}[is-~=separator][direction-=x][cap-$=bisect]:after,[is-~=separator][direction-=horizontal][cap-$=bisect]:after,[is-~=separator]:not([direction-])[cap-$=bisect]:after{right:-.5ch}[is-~=separator][direction-=x][cap-^=edge]:not([cap-=edge]),[is-~=separator][direction-=horizontal][cap-^=edge]:not([cap-=edge]),[is-~=separator]:not([direction-])[cap-^=edge]:not([cap-=edge]){clip-path:inset(0 -.5ch 0 .5ch)}[is-~=separator][direction-=x][cap-$=edge]:not([cap-=edge]),[is-~=separator][direction-=horizontal][cap-$=edge]:not([cap-=edge]),[is-~=separator]:not([direction-])[cap-$=edge]:not([cap-=edge]){clip-path:inset(0 .5ch 0 -.5ch)}[is-~=separator][direction-=x][cap-=edge],[is-~=separator][direction-=horizontal][cap-=edge],[is-~=separator]:not([direction-])[cap-=edge]{clip-path:inset(0 .5ch)}[is-~=separator][direction-=y],[is-~=separator][direction-=vertical]{width:1ch;background-image:linear-gradient(to right,var(--separator-background) 0,var(--separator-background) calc(.5ch - (var(--separator-width) / 2)),var(--separator-color) calc(.5ch - (var(--separator-width) / 2)),var(--separator-color) calc(.5ch + (var(--separator-width) / 2)),var(--separator-background) calc(.5ch + (var(--separator-width) / 2)),var(--separator-background))}[is-~=separator][direction-=y][cap-^=bisect]:before,[is-~=separator][direction-=vertical][cap-^=bisect]:before{top:-.5lh}[is-~=separator][direction-=y][cap-$=bisect]:after,[is-~=separator][direction-=vertical][cap-$=bisect]:after{bottom:-.5lh}[is-~=separator][direction-=y][cap-^=edge]:not([cap-=edge]),[is-~=separator][direction-=vertical][cap-^=edge]:not([cap-=edge]){clip-path:inset(.5lh 0 -.5lh 0)}[is-~=separator][direction-=y][cap-$=edge]:not([cap-=edge]),[is-~=separator][direction-=vertical][cap-$=edge]:not([cap-=edge]){clip-path:inset(-.5lh 0 .5lh 0)}[is-~=separator][direction-=y][cap-=edge],[is-~=separator][direction-=vertical][cap-=edge]{clip-path:inset(.5lh 0)}[is-~=separator][cap-]:before,[is-~=separator][cap-]:after{content:"";position:absolute;width:1ch;height:1lh;background-image:inherit}[is-~=separator][variant-=foreground0]{--separator-color: var(--foreground0)}[is-~=separator][variant-=foreground1]{--separator-color: var(--foreground1)}[is-~=separator][variant-=foreground2]{--separator-color: var(--foreground2)}[is-~=separator][variant-=background0]{--separator-color: var(--background0)}[is-~=separator][variant-=background1]{--separator-color: var(--background1)}[is-~=separator][variant-=background2]{--separator-color: var(--background2)}[is-~=separator][variant-=background3]{--separator-color: var(--background3)}}
0
2
β–Όdocs_site/src/styles/webtui/components/spinner.css
+1-0
@@ -0,0 +1 @@
1
+@layer components{[is-=spinner]{--spinner-steps: 4;--spinner-chars: "/-\\|";--spinner-duration: 1s;width:1ch;height:1lh;overflow:hidden;position:relative;display:inline-block;vertical-align:top}[is-=spinner][variant-=dots]{--spinner-steps: 8;--spinner-chars: "⣷⣯⣟⑿Ⓙ⣻⣽⣾"}[is-=spinner][variant-=arrows]{--spinner-steps: 8;--spinner-chars: "β†β†–β†‘β†—β†’β†˜β†“β†™"}[is-=spinner][variant-=cross]{--spinner-steps: 2;--spinner-chars: "+x"}[is-=spinner][variant-=square]{--spinner-steps: 4;--spinner-chars: "β—°β—³β—²β—±"}[is-=spinner][variant-=pie]{--spinner-steps: 4;--spinner-chars: "β—΄β—·β—Άβ—΅"}[is-=spinner][variant-=half]{--spinner-steps: 4;--spinner-chars: "◐◓◑◒"}[is-=spinner][variant-=bar-vertical]{--spinner-steps: 12;--spinner-chars: "β–β–ƒβ–„β–…β–†β–‡β–ˆβ–‡β–†β–…β–„β–ƒ"}[is-=spinner][variant-=bar-horizontal]{--spinner-steps: 13;--spinner-chars: "β–‰β–Šβ–‹β–Œβ–β–Žβ–β–Žβ–β–Œβ–‹β–Šβ–‰"}[is-=spinner][speed-=slow]{--spinner-duration: 2s}[is-=spinner][speed-=medium],[is-=spinner][speed-=default],[is-=spinner]:not([speed-]){--spinner-duration: 1s}[is-=spinner][speed-=fast]{--spinner-duration: .5s}[is-=spinner]:before{content:var(--spinner-chars);position:absolute;top:0;left:0;color:inherit;white-space:nowrap;height:1lh;animation:spinner-pan var(--spinner-duration) steps(var(--spinner-steps)) infinite}[is-=spinner][direction-=reverse]:before{animation-direction:reverse}@keyframes spinner-pan{0%{translate:0ch}to{translate:-100%}}}
0
2
β–Όdocs_site/src/styles/webtui/components/switch.css
+1-0
@@ -0,0 +1 @@
1
+@layer components{input[type=checkbox][is-=switch]{--switch-thumb-color: var(--foreground2);--switch-track-color: var(--background1);--switch-thin-track-width: 2px;appearance:none;-webkit-appearance:none;-moz-appearance:none;display:inline-block;position:relative;width:4ch;height:1lh;min-width:initial;vertical-align:text-top;font-family:var(--font-family);font-size:var(--font-size);line-height:var(--line-height);background-color:transparent;outline:none}input[type=checkbox][is-=switch]:before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:4ch;height:1lh;background:var(--switch-track-color)}input[type=checkbox][is-=switch]:after{content:"";position:absolute;left:0;width:2ch;height:1lh;background:var(--switch-thumb-color)}input[type=checkbox][is-=switch]:checked:after{left:unset;right:0;--switch-thumb-color: var(--foreground0)}input[type=checkbox][is-=switch]:disabled{--switch-thumb-color: var(--background2);pointer-events:none}input[type=checkbox][is-=switch]:disabled:checked:after{--switch-thumb-color: var(--background2)}input[type=checkbox][is-=switch][size-=small]{width:2ch}input[type=checkbox][is-=switch][size-=small]:before{width:2ch}input[type=checkbox][is-=switch][size-=small]:after{width:1ch}input[type=checkbox][is-=switch][bar-=thin]:before{height:.5lh}input[type=checkbox][is-=switch][bar-=line]:before{height:var(--switch-thin-track-width)}label:has(input[type=checkbox][is-=switch]){display:inline-flex;align-items:flex-start;gap:1ch;max-width:fit-content}label:has(input[type=checkbox][is-=switch]:focus){font-weight:700;text-decoration:underline}label:has(input[type=checkbox][is-=switch]:disabled){color:var(--foreground2);text-decoration:line-through}}
0
2
β–Όdocs_site/src/styles/webtui/components/table.css
+1-0
@@ -0,0 +1 @@
1
+@layer components{@property --table-border-width{syntax: "<length>"; inherits: true; initial-value: 2px;}table{--table-border-color: var(--box-border-color);border:none;outline:none;font-family:var(--font-family);font-size:var(--font-size);font-weight:var(--font-weight-normal);line-height:var(--line-height);text-align:left;position:relative;border-spacing:0 0}table th{font-weight:var(--font-weight-bold)}table th,table td{position:relative;padding-right:1ch}table th:last-of-type,table td:last-of-type{padding-right:0}table[divide-=vertical] th:not(:last-of-type):before,table[divide-=vertical] td:not(:last-of-type):before,table[divide-=both] th:not(:last-of-type):before,table[divide-=both] td:not(:last-of-type):before,table:not([divide-]) th:not(:last-of-type):before,table:not([divide-]) td:not(:last-of-type):before{content:"";position:absolute;right:calc(.5ch - var(--table-border-width) / 2);bottom:0;border-left:solid var(--table-border-width) var(--table-border-color);height:100%}table[box-] :is(table[divide-=vertical] th:not(:last-of-type)):before,table[box-] :is(table[divide-=vertical] td:not(:last-of-type)):before,table[box-] :is(table[divide-=both] th:not(:last-of-type)):before,table[box-] :is(table[divide-=both] td:not(:last-of-type)):before,table[box-] :is(table:not([divide-]) th:not(:last-of-type)):before,table[box-] :is(table:not([divide-]) td:not(:last-of-type)):before{bottom:calc(-.5lh - var(--table-border-width) / 2);border-left:solid var(--table-border-width) var(--table-border-color);height:calc(100% + 1lh)}table[divide-=horizontal] tr,table[divide-=both] tr,table:not([divide-]) tr{position:relative}table[divide-=horizontal] tr th,table[divide-=horizontal] tr td,table[divide-=both] tr th,table[divide-=both] tr td,table:not([divide-]) tr th,table:not([divide-]) tr td{padding-bottom:1lh}table[divide-=horizontal] tr th:after,table[divide-=horizontal] tr td:after,table[divide-=both] tr th:after,table[divide-=both] tr td:after,table:not([divide-]) tr th:after,table:not([divide-]) tr td:after{content:"";position:absolute;left:0;bottom:calc(.5lh - var(--table-border-width) / 2);width:100%;border-top:solid var(--table-border-width) var(--table-border-color)}table[box-] :is(table[divide-=horizontal] tr th):after,table[box-] :is(table[divide-=horizontal] tr td):after,table[box-] :is(table[divide-=both] tr th):after,table[box-] :is(table[divide-=both] tr td):after,table[box-] :is(table:not([divide-]) tr th):after,table[box-] :is(table:not([divide-]) tr td):after{left:calc(-.5ch - var(--table-border-width) / 2);width:calc(100% + 1ch);border-top:solid var(--table-border-width) var(--table-border-color)}table[divide-=horizontal] *:last-child tr:last-child th,table[divide-=horizontal] *:last-child tr:last-child td,table[divide-=both] *:last-child tr:last-child th,table[divide-=both] *:last-child tr:last-child td,table:not([divide-]) *:last-child tr:last-child th,table:not([divide-]) *:last-child tr:last-child td{padding-bottom:0}table[divide-=horizontal] *:last-child tr:last-child th:after,table[divide-=horizontal] *:last-child tr:last-child td:after,table[divide-=both] *:last-child tr:last-child th:after,table[divide-=both] *:last-child tr:last-child td:after,table:not([divide-]) *:last-child tr:last-child th:after,table:not([divide-]) *:last-child tr:last-child td:after{display:none}}
0
2
β–Όdocs_site/src/styles/webtui/components/textarea.css
+1-0
@@ -0,0 +1 @@
1
+@layer components{textarea,[is-~=textarea]{background-color:var(--background1);color:var(--foreground0);font-family:var(--font-family);font-size:var(--font-size);font-weight:var(--font-weight-normal);line-height:var(--line-height);outline:none;border:none;resize:vertical;min-width:24ch}textarea::placeholder,[is-~=textarea]::placeholder{color:var(--foreground2)}textarea:not([size-]),[is-~=textarea]:not([size-]){min-height:2lh;padding:0 1ch}textarea[size-=small],[is-~=textarea][size-=small]{min-height:2lh;padding:0}textarea[size-=large],[is-~=textarea][size-=large]{min-height:4lh;padding:1lh 2ch}}
0
2
β–Όdocs_site/src/styles/webtui/components/tooltip.css
+1-0
@@ -0,0 +1 @@
1
+@layer components{@property --tooltip-offset-x{syntax: "<length>"; inherits: true; initial-value: 0;}@property --tooltip-offset-y{syntax: "<length>"; inherits: true; initial-value: 0;}@property --tooltip-delay{syntax: "<time>"; inherits: true; initial-value: .5s;}[is-~=tooltip]{position:relative}[is-~=tooltip] [is-~=tooltip-content]{opacity:0;transition:all 0s linear 0s;transform:scale(0);overflow:hidden;position:absolute}[is-~=tooltip]:has([is-~=tooltip-trigger]:hover)>[is-~=tooltip-content],[is-~=tooltip]:has([is-~=tooltip-trigger]:focus)>[is-~=tooltip-content],[is-~=tooltip]:has([is-~=tooltip-content]:hover)>[is-~=tooltip-content]{opacity:1;z-index:2;transform:scale(1);transition-delay:var(--tooltip-delay)}[is-~=tooltip]:has([is-~=tooltip-trigger]:hover)>[is-~=tooltip-content][position-~=baseline-left],[is-~=tooltip]:has([is-~=tooltip-trigger]:hover)>[is-~=tooltip-content]:not([position-]),[is-~=tooltip]:has([is-~=tooltip-trigger]:focus)>[is-~=tooltip-content][position-~=baseline-left],[is-~=tooltip]:has([is-~=tooltip-trigger]:focus)>[is-~=tooltip-content]:not([position-]),[is-~=tooltip]:has([is-~=tooltip-content]:hover)>[is-~=tooltip-content][position-~=baseline-left],[is-~=tooltip]:has([is-~=tooltip-content]:hover)>[is-~=tooltip-content]:not([position-]){left:0%}[is-~=tooltip]:has([is-~=tooltip-trigger]:hover)>[is-~=tooltip-content][position-~=baseline-right],[is-~=tooltip]:has([is-~=tooltip-trigger]:focus)>[is-~=tooltip-content][position-~=baseline-right],[is-~=tooltip]:has([is-~=tooltip-content]:hover)>[is-~=tooltip-content][position-~=baseline-right]{left:100%;translate:-100%}[is-~=tooltip]:has([is-~=tooltip-trigger]:hover)>[is-~=tooltip-content][position-~=left],[is-~=tooltip]:has([is-~=tooltip-trigger]:focus)>[is-~=tooltip-content][position-~=left],[is-~=tooltip]:has([is-~=tooltip-content]:hover)>[is-~=tooltip-content][position-~=left]{left:calc(var(--tooltip-offset-x) * -1);translate:-100%}[is-~=tooltip]:has([is-~=tooltip-trigger]:hover)>[is-~=tooltip-content][position-~=right],[is-~=tooltip]:has([is-~=tooltip-trigger]:focus)>[is-~=tooltip-content][position-~=right],[is-~=tooltip]:has([is-~=tooltip-content]:hover)>[is-~=tooltip-content][position-~=right]{left:calc(100% + var(--tooltip-offset-x))}[is-~=tooltip]:has([is-~=tooltip-trigger]:hover)>[is-~=tooltip-content][position-~=baseline-top],[is-~=tooltip]:has([is-~=tooltip-trigger]:focus)>[is-~=tooltip-content][position-~=baseline-top],[is-~=tooltip]:has([is-~=tooltip-content]:hover)>[is-~=tooltip-content][position-~=baseline-top]{top:0%}[is-~=tooltip]:has([is-~=tooltip-trigger]:hover)>[is-~=tooltip-content][position-~=baseline-bottom],[is-~=tooltip]:has([is-~=tooltip-trigger]:focus)>[is-~=tooltip-content][position-~=baseline-bottom],[is-~=tooltip]:has([is-~=tooltip-content]:hover)>[is-~=tooltip-content][position-~=baseline-bottom]{top:100%;transform:translateY(-100%)}[is-~=tooltip]:has([is-~=tooltip-trigger]:hover)>[is-~=tooltip-content][position-~=top],[is-~=tooltip]:has([is-~=tooltip-trigger]:hover)>[is-~=tooltip-content]:not([position-]),[is-~=tooltip]:has([is-~=tooltip-trigger]:focus)>[is-~=tooltip-content][position-~=top],[is-~=tooltip]:has([is-~=tooltip-trigger]:focus)>[is-~=tooltip-content]:not([position-]),[is-~=tooltip]:has([is-~=tooltip-content]:hover)>[is-~=tooltip-content][position-~=top],[is-~=tooltip]:has([is-~=tooltip-content]:hover)>[is-~=tooltip-content]:not([position-]){top:calc(var(--tooltip-offset-y) * -1);transform:translateY(-100%)}[is-~=tooltip]:has([is-~=tooltip-trigger]:hover)>[is-~=tooltip-content][position-~=bottom],[is-~=tooltip]:has([is-~=tooltip-trigger]:focus)>[is-~=tooltip-content][position-~=bottom],[is-~=tooltip]:has([is-~=tooltip-content]:hover)>[is-~=tooltip-content][position-~=bottom]{top:calc(100% + var(--tooltip-offset-y))}}
0
2
β–Όdocs_site/src/styles/webtui/components/typography.css
+1-0
@@ -0,0 +1 @@
1
+@layer components{h1,h2,h3,h4,h5,h6{font-family:var(--font-family);font-size:var(--font-size);line-height:var(--line-height);font-weight:var(--font-weight-bold)}h1 code,h2 code,h3 code,h4 code,h5 code,h6 code{color:inherit;background-color:var(--background1);padding:0 1ch}ol{list-style-position:inside}ol li>ol{margin-left:2ch}ul{list-style-type:none}ul li:before{color:var(--list-marker-color, inherit);content:"- "}ul[marker-=bullet] li:before{content:"β€’ "}ul[marker-~=tree] li:before{content:"β”œ "}ul[marker-~=tree]:not([marker-^=open]) li:first-of-type:before{content:"β”Œ "}ul[marker-~=tree]:not([marker-$=open]) li:last-of-type:before{content:"β”” "}ul[marker-~=round-tree] li:before{content:"β”œ "}ul[marker-~=round-tree]:not([marker-^=open]) li:first-of-type:before{content:"β•­ "}ul[marker-~=round-tree]:not([marker-$=open]) li:last-of-type:before{content:"β•° "}ul li>ul{margin-left:2ch}p,blockquote,li,[is-~=typography-block]{font-family:var(--font-family);font-size:var(--font-size);line-height:var(--line-height);color:var(--foreground1)}p:is(blockquote),blockquote:is(blockquote),li:is(blockquote),[is-~=typography-block]:is(blockquote){padding-left:2ch;position:relative}p:is(blockquote):before,blockquote:is(blockquote):before,li:is(blockquote):before,[is-~=typography-block]:is(blockquote):before{content:"";position:absolute;top:0;left:.5ch;width:var(--box-border-width, 2px);height:100%;translate:-50%;background-color:var( --blockquote-indent-color, var(--background2) )}p strong,blockquote strong,li strong,[is-~=typography-block] strong{font-weight:var(--font-weight-bold);color:var(--foreground0)}p a,blockquote a,li a,[is-~=typography-block] a{text-decoration:underline;color:var(--foreground2)}p code,blockquote code,li code,[is-~=typography-block] code{display:inline-block;background-color:var(--background1);padding-left:1ch;padding-right:1ch}}
0
2
β–Όdocs_site/src/styles/webtui/components/view.css
+1-0
@@ -0,0 +1 @@
1
+@layer components{[is-~=view]{position:relative}[is-~=view-content]{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:round(down,100%,1ch);height:round(down,100%,1lh);overflow:hidden;word-break:break-all}}
0
2