@nazuraki/styles 0.2.1 → 0.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/luminous-precision/base.css +50 -0
- package/luminous-precision/components/alert.css +26 -0
- package/luminous-precision/components/badge.css +19 -0
- package/luminous-precision/components/button.css +88 -0
- package/luminous-precision/components/card.css +12 -0
- package/luminous-precision/components/dialog.css +31 -0
- package/luminous-precision/components/form.css +126 -0
- package/luminous-precision/components/link.css +46 -0
- package/luminous-precision/components/progress.css +41 -0
- package/luminous-precision/components/table.css +28 -0
- package/luminous-precision/components/tabs.css +33 -0
- package/luminous-precision/design.md +76 -0
- package/luminous-precision/index.css +13 -0
- package/luminous-precision/tokens.css +55 -0
- package/package.json +13 -3
- package/summer-cloud/base.css +48 -0
- package/summer-cloud/components/alert.css +29 -0
- package/summer-cloud/components/badge.css +49 -0
- package/summer-cloud/components/button.css +109 -0
- package/summer-cloud/components/card.css +35 -0
- package/summer-cloud/components/dialog.css +30 -0
- package/summer-cloud/components/form.css +146 -0
- package/summer-cloud/components/link.css +60 -0
- package/summer-cloud/components/progress.css +43 -0
- package/summer-cloud/components/table.css +34 -0
- package/summer-cloud/components/tabs.css +38 -0
- package/summer-cloud/design.md +115 -0
- package/summer-cloud/index.css +13 -0
- package/summer-cloud/tokens.css +74 -0
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
/* summer-cloud — base styles
|
|
2
|
+
* Global defaults. Requires tokens.css. Apps that need the webfonts should
|
|
3
|
+
* include the Google Fonts <link>s for Plus Jakarta Sans (400;600;700;800),
|
|
4
|
+
* Inter (400;600) and JetBrains Mono (500;700), or self-host; every token
|
|
5
|
+
* stack falls back to a system family.
|
|
6
|
+
*/
|
|
7
|
+
*,
|
|
8
|
+
*::before,
|
|
9
|
+
*::after {
|
|
10
|
+
box-sizing: border-box;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
body {
|
|
14
|
+
margin: 0;
|
|
15
|
+
min-height: 100vh;
|
|
16
|
+
background-color: var(--nb-bg);
|
|
17
|
+
color: var(--nb-on-surface);
|
|
18
|
+
font-family: var(--nb-font-body);
|
|
19
|
+
font-weight: var(--nb-font-weight);
|
|
20
|
+
-webkit-font-smoothing: antialiased;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
/* Opt-in page background: the sky gradient. Flat --nb-bg is also correct, but
|
|
24
|
+
* the gradient is the signature — the theme reads as "airy" only against it.
|
|
25
|
+
* Apply to <body>. */
|
|
26
|
+
.nb-bg {
|
|
27
|
+
background: linear-gradient(135deg, var(--nb-sky-start) 0%, var(--nb-sky-end) 100%);
|
|
28
|
+
background-attachment: fixed;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
h1,
|
|
32
|
+
h2,
|
|
33
|
+
h3,
|
|
34
|
+
h4 {
|
|
35
|
+
font-family: var(--nb-font-display);
|
|
36
|
+
font-weight: var(--nb-font-weight-bold);
|
|
37
|
+
letter-spacing: var(--nb-tracking-tight);
|
|
38
|
+
color: var(--nb-on-surface);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
a {
|
|
42
|
+
color: var(--nb-primary);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
::selection {
|
|
46
|
+
background: var(--nb-primary);
|
|
47
|
+
color: #fff;
|
|
48
|
+
}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
/* summer-cloud — alert / callout: glass card with a semantic left rule */
|
|
2
|
+
.nb-alert {
|
|
3
|
+
padding: var(--nb-space-4);
|
|
4
|
+
background: var(--nb-surface-glass);
|
|
5
|
+
border: 1px solid var(--nb-border);
|
|
6
|
+
border-left: 4px solid var(--nb-accent);
|
|
7
|
+
border-radius: var(--nb-radius);
|
|
8
|
+
backdrop-filter: blur(var(--nb-blur));
|
|
9
|
+
-webkit-backdrop-filter: blur(var(--nb-blur));
|
|
10
|
+
box-shadow: var(--nb-shadow-soft);
|
|
11
|
+
color: var(--nb-on-surface);
|
|
12
|
+
font-size: var(--nb-text-sm);
|
|
13
|
+
}
|
|
14
|
+
.nb-alert--info { border-left-color: var(--nb-info); }
|
|
15
|
+
.nb-alert--success { border-left-color: var(--nb-success); }
|
|
16
|
+
.nb-alert--warning { border-left-color: var(--nb-warning); }
|
|
17
|
+
.nb-alert--danger { border-left-color: var(--nb-danger); }
|
|
18
|
+
.nb-alert__title {
|
|
19
|
+
display: block;
|
|
20
|
+
margin-bottom: var(--nb-space-1);
|
|
21
|
+
font-family: var(--nb-font-display);
|
|
22
|
+
font-weight: var(--nb-font-weight-medium);
|
|
23
|
+
font-size: var(--nb-text-sm);
|
|
24
|
+
color: var(--nb-on-surface);
|
|
25
|
+
}
|
|
26
|
+
.nb-alert--info .nb-alert__title { color: var(--nb-accent-deep); }
|
|
27
|
+
.nb-alert--success .nb-alert__title { color: #1a7a1a; }
|
|
28
|
+
.nb-alert--warning .nb-alert__title { color: #594400; }
|
|
29
|
+
.nb-alert--danger .nb-alert__title { color: #93000a; }
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
/* summer-cloud — badge: solid pill, mono uppercase, for retail energy */
|
|
2
|
+
.nb-badge {
|
|
3
|
+
display: inline-flex;
|
|
4
|
+
align-items: center;
|
|
5
|
+
gap: var(--nb-space-1);
|
|
6
|
+
padding: 0.25rem 0.75rem;
|
|
7
|
+
background: var(--nb-surface-glass-high);
|
|
8
|
+
border: 1px solid var(--nb-border);
|
|
9
|
+
border-radius: var(--nb-radius-pill);
|
|
10
|
+
color: var(--nb-faint);
|
|
11
|
+
text-transform: uppercase;
|
|
12
|
+
font-family: var(--nb-font-mono);
|
|
13
|
+
font-size: 12px;
|
|
14
|
+
font-weight: 500;
|
|
15
|
+
letter-spacing: var(--nb-tracking-wide);
|
|
16
|
+
box-shadow: 0 1px 2px rgba(93, 43, 255, 0.06);
|
|
17
|
+
}
|
|
18
|
+
.nb-badge--primary { background: var(--nb-primary); border-color: transparent; color: #fff; }
|
|
19
|
+
.nb-badge--info { background: var(--nb-info); border-color: transparent; color: #004261; }
|
|
20
|
+
.nb-badge--success { background: var(--nb-success); border-color: transparent; color: #0a2e0a; }
|
|
21
|
+
.nb-badge--warning { background: var(--nb-warning); border-color: transparent; color: #241a00; }
|
|
22
|
+
.nb-badge--danger { background: var(--nb-danger); border-color: transparent; color: #4a0000; }
|
|
23
|
+
|
|
24
|
+
/* Chip — the filter variant: outlined until selected. */
|
|
25
|
+
.nb-chip {
|
|
26
|
+
display: inline-flex;
|
|
27
|
+
align-items: center;
|
|
28
|
+
gap: var(--nb-space-1);
|
|
29
|
+
padding: var(--nb-space-2) var(--nb-space-3);
|
|
30
|
+
background: none;
|
|
31
|
+
border: 1px solid var(--nb-outline);
|
|
32
|
+
border-radius: var(--nb-radius-pill);
|
|
33
|
+
color: var(--nb-faint);
|
|
34
|
+
font-family: var(--nb-font-display);
|
|
35
|
+
font-size: 12px;
|
|
36
|
+
font-weight: var(--nb-font-weight-medium);
|
|
37
|
+
cursor: pointer;
|
|
38
|
+
transition: background var(--nb-transition), color var(--nb-transition),
|
|
39
|
+
border-color var(--nb-transition);
|
|
40
|
+
}
|
|
41
|
+
.nb-chip:hover {
|
|
42
|
+
background: var(--nb-sky-tint);
|
|
43
|
+
}
|
|
44
|
+
.nb-chip--selected,
|
|
45
|
+
.nb-chip[aria-pressed="true"] {
|
|
46
|
+
background: var(--nb-primary-bright);
|
|
47
|
+
border-color: transparent;
|
|
48
|
+
color: #fff;
|
|
49
|
+
}
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
/* summer-cloud — button: pill-shaped, bouncy, tinted-shadow lift */
|
|
2
|
+
.nb-btn {
|
|
3
|
+
display: inline-flex;
|
|
4
|
+
align-items: center;
|
|
5
|
+
justify-content: center;
|
|
6
|
+
gap: var(--nb-space-2);
|
|
7
|
+
padding: 0.75rem var(--nb-space-4);
|
|
8
|
+
background: rgba(255, 255, 255, 0.4);
|
|
9
|
+
border: 1px solid var(--nb-border);
|
|
10
|
+
border-radius: var(--nb-radius-pill);
|
|
11
|
+
color: var(--nb-faint);
|
|
12
|
+
font-family: var(--nb-font-display);
|
|
13
|
+
font-weight: var(--nb-font-weight-medium);
|
|
14
|
+
font-size: var(--nb-text-sm);
|
|
15
|
+
cursor: pointer;
|
|
16
|
+
transition:
|
|
17
|
+
background var(--nb-transition),
|
|
18
|
+
border-color var(--nb-transition),
|
|
19
|
+
color var(--nb-transition),
|
|
20
|
+
box-shadow 0.2s ease,
|
|
21
|
+
transform 0.2s var(--nb-ease-bounce);
|
|
22
|
+
}
|
|
23
|
+
.nb-btn:hover,
|
|
24
|
+
.nb-btn:focus-visible {
|
|
25
|
+
background: rgba(255, 255, 255, 0.6);
|
|
26
|
+
border-color: var(--nb-primary-border);
|
|
27
|
+
color: var(--nb-primary);
|
|
28
|
+
transform: scale(1.03);
|
|
29
|
+
outline: none;
|
|
30
|
+
}
|
|
31
|
+
.nb-btn:focus-visible {
|
|
32
|
+
box-shadow: 0 0 0 4px var(--nb-accent-glow);
|
|
33
|
+
}
|
|
34
|
+
.nb-btn:active {
|
|
35
|
+
transform: scale(0.95);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
/* Primary — the solid violet CTA. One per view. */
|
|
39
|
+
.nb-btn--primary {
|
|
40
|
+
background: var(--nb-primary);
|
|
41
|
+
border-color: transparent;
|
|
42
|
+
color: #fff;
|
|
43
|
+
font-weight: var(--nb-font-weight-bold);
|
|
44
|
+
box-shadow: var(--nb-shadow-raised);
|
|
45
|
+
}
|
|
46
|
+
.nb-btn--primary:hover {
|
|
47
|
+
background: var(--nb-primary-bright);
|
|
48
|
+
color: #fff;
|
|
49
|
+
box-shadow: var(--nb-shadow-raised-hover);
|
|
50
|
+
}
|
|
51
|
+
.nb-btn--primary:focus-visible {
|
|
52
|
+
background: var(--nb-primary-bright);
|
|
53
|
+
color: #fff;
|
|
54
|
+
box-shadow: var(--nb-shadow-raised-hover), 0 0 0 4px var(--nb-primary-glow);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
/* Accent — glass with a sky-blue edge, for the secondary path. */
|
|
58
|
+
.nb-btn--accent {
|
|
59
|
+
border-color: var(--nb-accent);
|
|
60
|
+
color: var(--nb-accent-deep);
|
|
61
|
+
}
|
|
62
|
+
.nb-btn--accent:hover,
|
|
63
|
+
.nb-btn--accent:focus-visible {
|
|
64
|
+
color: var(--nb-accent-deep);
|
|
65
|
+
box-shadow: 0 0 0 4px var(--nb-accent-glow);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
/* Ghost — no chrome until hovered. */
|
|
69
|
+
.nb-btn--ghost {
|
|
70
|
+
background: none;
|
|
71
|
+
border-color: transparent;
|
|
72
|
+
box-shadow: none;
|
|
73
|
+
}
|
|
74
|
+
.nb-btn--ghost:hover,
|
|
75
|
+
.nb-btn--ghost:focus-visible {
|
|
76
|
+
background: var(--nb-sky-tint);
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.nb-btn--danger {
|
|
80
|
+
background: var(--nb-danger-deep);
|
|
81
|
+
border-color: transparent;
|
|
82
|
+
color: #fff;
|
|
83
|
+
font-weight: var(--nb-font-weight-bold);
|
|
84
|
+
box-shadow: 0 4px 14px rgba(204, 31, 31, 0.39);
|
|
85
|
+
}
|
|
86
|
+
.nb-btn--danger:hover,
|
|
87
|
+
.nb-btn--danger:focus-visible {
|
|
88
|
+
background: var(--nb-danger);
|
|
89
|
+
color: #4a0000;
|
|
90
|
+
box-shadow: 0 6px 20px rgba(255, 77, 77, 0.5);
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.nb-btn:disabled {
|
|
94
|
+
opacity: 0.5;
|
|
95
|
+
cursor: not-allowed;
|
|
96
|
+
transform: none;
|
|
97
|
+
box-shadow: none;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
@media (prefers-reduced-motion: reduce) {
|
|
101
|
+
.nb-btn {
|
|
102
|
+
transition: background var(--nb-transition), color var(--nb-transition);
|
|
103
|
+
}
|
|
104
|
+
.nb-btn:hover,
|
|
105
|
+
.nb-btn:focus-visible,
|
|
106
|
+
.nb-btn:active {
|
|
107
|
+
transform: none;
|
|
108
|
+
}
|
|
109
|
+
}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
/* summer-cloud — card: the glassmorphic panel everything else sits in */
|
|
2
|
+
.nb-card {
|
|
3
|
+
padding: var(--nb-space-5);
|
|
4
|
+
background: var(--nb-surface-glass);
|
|
5
|
+
border: 1px solid var(--nb-border);
|
|
6
|
+
border-radius: var(--nb-radius);
|
|
7
|
+
backdrop-filter: blur(var(--nb-blur));
|
|
8
|
+
-webkit-backdrop-filter: blur(var(--nb-blur));
|
|
9
|
+
box-shadow: var(--nb-shadow);
|
|
10
|
+
color: var(--nb-on-surface);
|
|
11
|
+
}
|
|
12
|
+
.nb-card > :first-child { margin-top: 0; }
|
|
13
|
+
.nb-card > :last-child { margin-bottom: 0; }
|
|
14
|
+
|
|
15
|
+
/* Level 2 — floating: higher-opacity white, lifts on hover. Use for
|
|
16
|
+
* interactive cards (products, tiles), not for static content panels. */
|
|
17
|
+
.nb-card--floating {
|
|
18
|
+
background: var(--nb-surface-glass-high);
|
|
19
|
+
backdrop-filter: blur(var(--nb-blur-high));
|
|
20
|
+
-webkit-backdrop-filter: blur(var(--nb-blur-high));
|
|
21
|
+
transition: transform var(--nb-transition), box-shadow var(--nb-transition);
|
|
22
|
+
}
|
|
23
|
+
.nb-card--floating:hover {
|
|
24
|
+
transform: translateY(-4px);
|
|
25
|
+
box-shadow: var(--nb-shadow-raised-hover);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
@media (prefers-reduced-motion: reduce) {
|
|
29
|
+
.nb-card--floating {
|
|
30
|
+
transition: none;
|
|
31
|
+
}
|
|
32
|
+
.nb-card--floating:hover {
|
|
33
|
+
transform: none;
|
|
34
|
+
}
|
|
35
|
+
}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
/* summer-cloud — dialog (native <dialog>): the floating tier, fully opaque */
|
|
2
|
+
.nb-dialog {
|
|
3
|
+
padding: var(--nb-space-5);
|
|
4
|
+
max-width: 32rem;
|
|
5
|
+
width: calc(100vw - 2rem);
|
|
6
|
+
background: var(--nb-surface);
|
|
7
|
+
border: 1px solid var(--nb-border);
|
|
8
|
+
border-radius: var(--nb-radius);
|
|
9
|
+
color: var(--nb-on-surface);
|
|
10
|
+
font-family: var(--nb-font-body);
|
|
11
|
+
box-shadow: var(--nb-shadow);
|
|
12
|
+
}
|
|
13
|
+
.nb-dialog::backdrop {
|
|
14
|
+
background: rgba(23, 28, 31, 0.3);
|
|
15
|
+
backdrop-filter: blur(4px);
|
|
16
|
+
}
|
|
17
|
+
.nb-dialog__title {
|
|
18
|
+
margin: 0 0 var(--nb-space-3);
|
|
19
|
+
color: var(--nb-primary);
|
|
20
|
+
font-family: var(--nb-font-display);
|
|
21
|
+
font-size: 1.5rem;
|
|
22
|
+
font-weight: var(--nb-font-weight-bold);
|
|
23
|
+
letter-spacing: var(--nb-tracking-tight);
|
|
24
|
+
}
|
|
25
|
+
.nb-dialog__actions {
|
|
26
|
+
display: flex;
|
|
27
|
+
justify-content: flex-end;
|
|
28
|
+
gap: var(--nb-space-2);
|
|
29
|
+
margin-top: var(--nb-space-5);
|
|
30
|
+
}
|
|
@@ -0,0 +1,146 @@
|
|
|
1
|
+
/* summer-cloud — form controls: input, textarea, select, checkbox, radio, switch
|
|
2
|
+
* Fields are sunken (no resting border) and bloom a sky-blue ring on focus. */
|
|
3
|
+
.nb-input,
|
|
4
|
+
.nb-select,
|
|
5
|
+
.nb-textarea {
|
|
6
|
+
display: block;
|
|
7
|
+
width: 100%;
|
|
8
|
+
padding: 0.75rem var(--nb-space-3);
|
|
9
|
+
background: var(--nb-surface-sunken);
|
|
10
|
+
border: 1px solid transparent;
|
|
11
|
+
border-radius: var(--nb-radius);
|
|
12
|
+
color: var(--nb-on-surface);
|
|
13
|
+
font-family: var(--nb-font-body);
|
|
14
|
+
font-weight: var(--nb-font-weight);
|
|
15
|
+
font-size: 16px;
|
|
16
|
+
transition: border-color var(--nb-transition), box-shadow var(--nb-transition);
|
|
17
|
+
}
|
|
18
|
+
.nb-select {
|
|
19
|
+
appearance: none;
|
|
20
|
+
padding-right: 2.25rem;
|
|
21
|
+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23484457' stroke-width='1.5'/%3E%3C/svg%3E");
|
|
22
|
+
background-repeat: no-repeat;
|
|
23
|
+
background-position: right 0.75rem center;
|
|
24
|
+
}
|
|
25
|
+
.nb-input::placeholder,
|
|
26
|
+
.nb-textarea::placeholder {
|
|
27
|
+
color: var(--nb-outline);
|
|
28
|
+
}
|
|
29
|
+
.nb-input:focus,
|
|
30
|
+
.nb-select:focus,
|
|
31
|
+
.nb-textarea:focus {
|
|
32
|
+
outline: none;
|
|
33
|
+
border-color: var(--nb-accent);
|
|
34
|
+
box-shadow: 0 0 0 4px var(--nb-accent-glow);
|
|
35
|
+
}
|
|
36
|
+
.nb-input[aria-invalid="true"],
|
|
37
|
+
.nb-textarea[aria-invalid="true"] {
|
|
38
|
+
border-color: var(--nb-danger);
|
|
39
|
+
}
|
|
40
|
+
.nb-input[aria-invalid="true"]:focus,
|
|
41
|
+
.nb-textarea[aria-invalid="true"]:focus {
|
|
42
|
+
box-shadow: 0 0 0 4px rgba(255, 77, 77, 0.2);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
/* Labels are the mono voice: small, tracked, utility-grade. */
|
|
46
|
+
.nb-label {
|
|
47
|
+
display: block;
|
|
48
|
+
margin-bottom: var(--nb-space-1);
|
|
49
|
+
padding-left: var(--nb-space-1);
|
|
50
|
+
color: var(--nb-faint);
|
|
51
|
+
font-family: var(--nb-font-mono);
|
|
52
|
+
font-size: 12px;
|
|
53
|
+
font-weight: 500;
|
|
54
|
+
letter-spacing: var(--nb-tracking-wide);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.nb-field {
|
|
58
|
+
margin-bottom: var(--nb-space-3);
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
/* checkbox & radio */
|
|
62
|
+
.nb-checkbox,
|
|
63
|
+
.nb-radio {
|
|
64
|
+
appearance: none;
|
|
65
|
+
width: 1.25rem;
|
|
66
|
+
height: 1.25rem;
|
|
67
|
+
margin: 0;
|
|
68
|
+
vertical-align: text-bottom;
|
|
69
|
+
background: var(--nb-surface-sunken);
|
|
70
|
+
border: 1px solid var(--nb-outline);
|
|
71
|
+
border-radius: var(--nb-radius-sm);
|
|
72
|
+
cursor: pointer;
|
|
73
|
+
transition: background var(--nb-transition), border-color var(--nb-transition),
|
|
74
|
+
box-shadow var(--nb-transition);
|
|
75
|
+
}
|
|
76
|
+
.nb-radio {
|
|
77
|
+
border-radius: 50%;
|
|
78
|
+
}
|
|
79
|
+
.nb-checkbox:checked,
|
|
80
|
+
.nb-radio:checked {
|
|
81
|
+
background: var(--nb-primary);
|
|
82
|
+
border-color: var(--nb-primary);
|
|
83
|
+
}
|
|
84
|
+
.nb-checkbox:checked {
|
|
85
|
+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
|
|
86
|
+
background-repeat: no-repeat;
|
|
87
|
+
background-position: center;
|
|
88
|
+
}
|
|
89
|
+
.nb-radio:checked {
|
|
90
|
+
box-shadow: inset 0 0 0 4px var(--nb-surface);
|
|
91
|
+
}
|
|
92
|
+
.nb-checkbox:focus-visible,
|
|
93
|
+
.nb-radio:focus-visible,
|
|
94
|
+
.nb-switch:focus-visible {
|
|
95
|
+
outline: none;
|
|
96
|
+
border-color: var(--nb-accent);
|
|
97
|
+
box-shadow: 0 0 0 4px var(--nb-accent-glow);
|
|
98
|
+
}
|
|
99
|
+
.nb-choice {
|
|
100
|
+
display: inline-flex;
|
|
101
|
+
align-items: center;
|
|
102
|
+
gap: var(--nb-space-2);
|
|
103
|
+
color: var(--nb-on-surface);
|
|
104
|
+
font-size: var(--nb-text-sm);
|
|
105
|
+
cursor: pointer;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
/* switch — the cloud-toggle: oversized, squishy, green when live */
|
|
109
|
+
.nb-switch {
|
|
110
|
+
appearance: none;
|
|
111
|
+
width: 3rem;
|
|
112
|
+
height: 1.75rem;
|
|
113
|
+
margin: 0;
|
|
114
|
+
vertical-align: text-bottom;
|
|
115
|
+
background: var(--nb-surface-sunken);
|
|
116
|
+
border: 1px solid var(--nb-outline);
|
|
117
|
+
border-radius: var(--nb-radius-pill);
|
|
118
|
+
cursor: pointer;
|
|
119
|
+
position: relative;
|
|
120
|
+
transition: background var(--nb-transition), border-color var(--nb-transition);
|
|
121
|
+
}
|
|
122
|
+
.nb-switch::after {
|
|
123
|
+
content: "";
|
|
124
|
+
position: absolute;
|
|
125
|
+
top: 2px;
|
|
126
|
+
left: 2px;
|
|
127
|
+
width: calc(1.75rem - 6px);
|
|
128
|
+
height: calc(1.75rem - 6px);
|
|
129
|
+
border-radius: 50%;
|
|
130
|
+
background: #fff;
|
|
131
|
+
box-shadow: 0 2px 6px rgba(93, 43, 255, 0.2);
|
|
132
|
+
transition: transform var(--nb-transition) var(--nb-ease-bounce);
|
|
133
|
+
}
|
|
134
|
+
.nb-switch:checked {
|
|
135
|
+
background: var(--nb-success);
|
|
136
|
+
border-color: var(--nb-success);
|
|
137
|
+
}
|
|
138
|
+
.nb-switch:checked::after {
|
|
139
|
+
transform: translateX(1.25rem);
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
@media (prefers-reduced-motion: reduce) {
|
|
143
|
+
.nb-switch::after {
|
|
144
|
+
transition: none;
|
|
145
|
+
}
|
|
146
|
+
}
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
/* summer-cloud — nav link: pill that fills with sky tint, arrow slides out */
|
|
2
|
+
.nb-link {
|
|
3
|
+
display: inline-flex;
|
|
4
|
+
align-items: center;
|
|
5
|
+
gap: var(--nb-space-2);
|
|
6
|
+
padding: var(--nb-space-2) var(--nb-space-3);
|
|
7
|
+
border: 1px solid transparent;
|
|
8
|
+
border-radius: var(--nb-radius-pill);
|
|
9
|
+
color: var(--nb-faint);
|
|
10
|
+
text-decoration: none;
|
|
11
|
+
font-family: var(--nb-font-display);
|
|
12
|
+
font-weight: var(--nb-font-weight-medium);
|
|
13
|
+
font-size: var(--nb-text-sm);
|
|
14
|
+
transition:
|
|
15
|
+
background var(--nb-transition),
|
|
16
|
+
color var(--nb-transition);
|
|
17
|
+
}
|
|
18
|
+
.nb-link::after {
|
|
19
|
+
content: "→";
|
|
20
|
+
color: var(--nb-accent);
|
|
21
|
+
transition: transform var(--nb-transition);
|
|
22
|
+
}
|
|
23
|
+
.nb-link:hover,
|
|
24
|
+
.nb-link:focus-visible {
|
|
25
|
+
background: var(--nb-sky-tint);
|
|
26
|
+
color: var(--nb-primary);
|
|
27
|
+
outline: none;
|
|
28
|
+
}
|
|
29
|
+
.nb-link:hover::after,
|
|
30
|
+
.nb-link:focus-visible::after {
|
|
31
|
+
transform: translateX(4px);
|
|
32
|
+
}
|
|
33
|
+
.nb-link:active {
|
|
34
|
+
transform: scale(0.95);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
/* Current page: violet with the underline rule from the top nav. */
|
|
38
|
+
.nb-link--active,
|
|
39
|
+
.nb-link[aria-current="page"] {
|
|
40
|
+
background: none;
|
|
41
|
+
border-radius: 0;
|
|
42
|
+
border-bottom: 2px solid var(--nb-primary);
|
|
43
|
+
color: var(--nb-primary);
|
|
44
|
+
}
|
|
45
|
+
.nb-link--active::after,
|
|
46
|
+
.nb-link[aria-current="page"]::after {
|
|
47
|
+
content: none;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
@media (prefers-reduced-motion: reduce) {
|
|
51
|
+
.nb-link,
|
|
52
|
+
.nb-link::after {
|
|
53
|
+
transition: none;
|
|
54
|
+
}
|
|
55
|
+
.nb-link:hover::after,
|
|
56
|
+
.nb-link:focus-visible::after,
|
|
57
|
+
.nb-link:active {
|
|
58
|
+
transform: none;
|
|
59
|
+
}
|
|
60
|
+
}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
/* summer-cloud — progress bar & spinner: glowing violet indicators */
|
|
2
|
+
.nb-progress {
|
|
3
|
+
display: block;
|
|
4
|
+
width: 100%;
|
|
5
|
+
height: 0.5rem;
|
|
6
|
+
background: var(--nb-bg-blend);
|
|
7
|
+
border-radius: var(--nb-radius-pill);
|
|
8
|
+
overflow: hidden;
|
|
9
|
+
}
|
|
10
|
+
.nb-progress__bar {
|
|
11
|
+
height: 100%;
|
|
12
|
+
background: var(--nb-primary);
|
|
13
|
+
border-radius: var(--nb-radius-pill);
|
|
14
|
+
box-shadow: 0 0 10px rgba(69, 0, 217, 0.5);
|
|
15
|
+
transition: width var(--nb-transition);
|
|
16
|
+
}
|
|
17
|
+
.nb-progress__bar--accent {
|
|
18
|
+
background: var(--nb-accent);
|
|
19
|
+
box-shadow: 0 0 10px rgba(12, 179, 255, 0.5);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.nb-spinner {
|
|
23
|
+
display: inline-block;
|
|
24
|
+
width: 1.5rem;
|
|
25
|
+
height: 1.5rem;
|
|
26
|
+
border: 2px solid var(--nb-outline);
|
|
27
|
+
border-top-color: var(--nb-primary);
|
|
28
|
+
border-radius: 50%;
|
|
29
|
+
animation: nb-spin 0.8s linear infinite;
|
|
30
|
+
}
|
|
31
|
+
@keyframes nb-spin {
|
|
32
|
+
to {
|
|
33
|
+
transform: rotate(360deg);
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
@media (prefers-reduced-motion: reduce) {
|
|
37
|
+
.nb-spinner {
|
|
38
|
+
animation-duration: 2s;
|
|
39
|
+
}
|
|
40
|
+
.nb-progress__bar {
|
|
41
|
+
transition: none;
|
|
42
|
+
}
|
|
43
|
+
}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
/* summer-cloud — table: mono header labels, sky-tint row hover */
|
|
2
|
+
.nb-table {
|
|
3
|
+
width: 100%;
|
|
4
|
+
border-collapse: collapse;
|
|
5
|
+
font-size: var(--nb-text-sm);
|
|
6
|
+
color: var(--nb-on-surface);
|
|
7
|
+
}
|
|
8
|
+
.nb-table th {
|
|
9
|
+
padding: var(--nb-space-3);
|
|
10
|
+
border-bottom: 1px solid var(--nb-outline);
|
|
11
|
+
color: var(--nb-faint);
|
|
12
|
+
text-align: left;
|
|
13
|
+
text-transform: uppercase;
|
|
14
|
+
font-family: var(--nb-font-mono);
|
|
15
|
+
font-size: 12px;
|
|
16
|
+
font-weight: 500;
|
|
17
|
+
letter-spacing: var(--nb-tracking-wide);
|
|
18
|
+
}
|
|
19
|
+
.nb-table td {
|
|
20
|
+
padding: var(--nb-space-3);
|
|
21
|
+
border-bottom: 1px solid rgba(201, 195, 218, 0.4);
|
|
22
|
+
}
|
|
23
|
+
.nb-table tbody tr {
|
|
24
|
+
transition: background var(--nb-transition);
|
|
25
|
+
}
|
|
26
|
+
.nb-table tbody tr:hover {
|
|
27
|
+
background: var(--nb-sky-tint);
|
|
28
|
+
}
|
|
29
|
+
/* Numeric cells take the mono voice — prices and data read as utility-grade. */
|
|
30
|
+
.nb-table td.nb-num,
|
|
31
|
+
.nb-table th.nb-num {
|
|
32
|
+
font-family: var(--nb-font-mono);
|
|
33
|
+
text-align: right;
|
|
34
|
+
}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
/* summer-cloud — tabs: violet underline on the active tab, sky tint on hover */
|
|
2
|
+
.nb-tabs {
|
|
3
|
+
display: flex;
|
|
4
|
+
gap: var(--nb-space-2);
|
|
5
|
+
border-bottom: 1px solid var(--nb-outline);
|
|
6
|
+
}
|
|
7
|
+
.nb-tab {
|
|
8
|
+
padding: var(--nb-space-2) var(--nb-space-3);
|
|
9
|
+
margin-bottom: -1px;
|
|
10
|
+
background: none;
|
|
11
|
+
border: none;
|
|
12
|
+
border-bottom: 2px solid transparent;
|
|
13
|
+
border-radius: var(--nb-radius-sm) var(--nb-radius-sm) 0 0;
|
|
14
|
+
color: var(--nb-faint);
|
|
15
|
+
font-family: var(--nb-font-display);
|
|
16
|
+
font-weight: var(--nb-font-weight-medium);
|
|
17
|
+
font-size: var(--nb-text-sm);
|
|
18
|
+
cursor: pointer;
|
|
19
|
+
transition: color var(--nb-transition), background var(--nb-transition),
|
|
20
|
+
border-color var(--nb-transition);
|
|
21
|
+
}
|
|
22
|
+
.nb-tab:hover {
|
|
23
|
+
background: var(--nb-sky-tint);
|
|
24
|
+
color: var(--nb-primary);
|
|
25
|
+
}
|
|
26
|
+
.nb-tab:focus-visible {
|
|
27
|
+
outline: none;
|
|
28
|
+
box-shadow: 0 0 0 4px var(--nb-accent-glow);
|
|
29
|
+
}
|
|
30
|
+
.nb-tab--active,
|
|
31
|
+
.nb-tab[aria-selected="true"] {
|
|
32
|
+
color: var(--nb-primary);
|
|
33
|
+
border-bottom-color: var(--nb-primary);
|
|
34
|
+
font-weight: var(--nb-font-weight-bold);
|
|
35
|
+
}
|
|
36
|
+
.nb-tabpanel {
|
|
37
|
+
padding: var(--nb-space-3) 0;
|
|
38
|
+
}
|