@f5xc-salesdemos/docs-theme 2.0.0 → 2.0.2
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/components/LinkCard.astro +79 -79
- package/fonts/font-face.css +10 -10
- package/package.json +1 -1
- package/styles/custom.css +143 -123
|
@@ -3,103 +3,103 @@ import Icon from './Icon.astro';
|
|
|
3
3
|
import type { HTMLAttributes } from 'astro/types';
|
|
4
4
|
|
|
5
5
|
interface Props extends Omit<HTMLAttributes<'a'>, 'title'> {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
6
|
+
title: string;
|
|
7
|
+
description?: string;
|
|
8
|
+
icon?: string;
|
|
9
9
|
}
|
|
10
10
|
|
|
11
11
|
const { title, description, icon, ...attributes } = Astro.props;
|
|
12
12
|
---
|
|
13
13
|
|
|
14
14
|
<div class:list={['sl-link-card', { 'has-icon': !!icon }]}>
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
15
|
+
{icon && (
|
|
16
|
+
<span class="card-icon">
|
|
17
|
+
<Icon name={icon} />
|
|
18
|
+
</span>
|
|
19
|
+
)}
|
|
20
|
+
<span class="sl-flex stack">
|
|
21
|
+
<a {...attributes}>
|
|
22
|
+
<span class="title" set:html={title} />
|
|
23
|
+
</a>
|
|
24
|
+
{description && <span class="description" set:html={description} />}
|
|
25
|
+
</span>
|
|
26
|
+
<Icon name="right-arrow" size="1.333em" class="icon rtl:flip" />
|
|
27
27
|
</div>
|
|
28
28
|
|
|
29
29
|
<style>
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
30
|
+
.sl-link-card {
|
|
31
|
+
display: grid;
|
|
32
|
+
grid-template-columns: 1fr auto;
|
|
33
|
+
gap: 0.5rem;
|
|
34
|
+
border: 1px solid var(--sl-color-gray-5);
|
|
35
|
+
border-radius: 0.5rem;
|
|
36
|
+
padding: 1rem;
|
|
37
|
+
box-shadow: var(--f5-shadow-low);
|
|
38
|
+
position: relative;
|
|
39
|
+
transition: box-shadow var(--f5-transition-base),
|
|
40
|
+
transform var(--f5-transition-base);
|
|
41
|
+
}
|
|
42
42
|
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
43
|
+
.sl-link-card.has-icon {
|
|
44
|
+
grid-template-columns: auto 1fr auto;
|
|
45
|
+
}
|
|
46
46
|
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
47
|
+
a {
|
|
48
|
+
text-decoration: none;
|
|
49
|
+
line-height: var(--sl-line-height-headings);
|
|
50
|
+
}
|
|
51
51
|
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
52
|
+
/* a11y fix for https://github.com/withastro/starlight/issues/487 */
|
|
53
|
+
a::before {
|
|
54
|
+
content: '';
|
|
55
|
+
position: absolute;
|
|
56
|
+
inset: 0;
|
|
57
|
+
}
|
|
58
58
|
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
59
|
+
.stack {
|
|
60
|
+
flex-direction: column;
|
|
61
|
+
gap: 0.5rem;
|
|
62
|
+
}
|
|
63
63
|
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
64
|
+
.title {
|
|
65
|
+
color: var(--sl-color-white);
|
|
66
|
+
font-weight: 600;
|
|
67
|
+
font-size: var(--sl-text-lg);
|
|
68
|
+
}
|
|
69
69
|
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
70
|
+
.description {
|
|
71
|
+
color: var(--sl-color-gray-3);
|
|
72
|
+
line-height: 1.5;
|
|
73
|
+
}
|
|
74
74
|
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
75
|
+
.icon {
|
|
76
|
+
color: var(--sl-color-gray-3);
|
|
77
|
+
}
|
|
78
78
|
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
79
|
+
.card-icon {
|
|
80
|
+
color: var(--sl-color-white);
|
|
81
|
+
align-self: stretch;
|
|
82
|
+
position: relative;
|
|
83
|
+
aspect-ratio: 1;
|
|
84
|
+
max-height: 3rem;
|
|
85
|
+
}
|
|
86
86
|
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
87
|
+
.card-icon :global(svg) {
|
|
88
|
+
position: absolute;
|
|
89
|
+
inset: 0;
|
|
90
|
+
width: 100%;
|
|
91
|
+
height: 100%;
|
|
92
|
+
}
|
|
93
93
|
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
94
|
+
/* Hover state */
|
|
95
|
+
.sl-link-card:hover {
|
|
96
|
+
background: var(--sl-color-gray-7, var(--sl-color-gray-6));
|
|
97
|
+
border-color: var(--sl-color-gray-2);
|
|
98
|
+
box-shadow: var(--f5-shadow-mid);
|
|
99
|
+
transform: translateY(-1px);
|
|
100
|
+
}
|
|
101
101
|
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
102
|
+
.sl-link-card:hover .icon {
|
|
103
|
+
color: var(--sl-color-white);
|
|
104
|
+
}
|
|
105
105
|
</style>
|
package/fonts/font-face.css
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
@font-face {
|
|
2
|
-
font-family:
|
|
2
|
+
font-family: neusaNextProWide;
|
|
3
3
|
font-weight: 300;
|
|
4
4
|
font-style: normal;
|
|
5
5
|
font-display: swap;
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
}
|
|
8
8
|
|
|
9
9
|
@font-face {
|
|
10
|
-
font-family:
|
|
10
|
+
font-family: neusaNextProWide;
|
|
11
11
|
font-weight: 400;
|
|
12
12
|
font-style: normal;
|
|
13
13
|
font-display: swap;
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
}
|
|
16
16
|
|
|
17
17
|
@font-face {
|
|
18
|
-
font-family:
|
|
18
|
+
font-family: neusaNextProWide;
|
|
19
19
|
font-weight: 500;
|
|
20
20
|
font-style: normal;
|
|
21
21
|
font-display: swap;
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
}
|
|
24
24
|
|
|
25
25
|
@font-face {
|
|
26
|
-
font-family:
|
|
26
|
+
font-family: neusaNextProWide;
|
|
27
27
|
font-weight: 700;
|
|
28
28
|
font-style: normal;
|
|
29
29
|
font-display: swap;
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
}
|
|
32
32
|
|
|
33
33
|
@font-face {
|
|
34
|
-
font-family:
|
|
34
|
+
font-family: neusaNextProWide;
|
|
35
35
|
font-weight: 400;
|
|
36
36
|
font-style: italic;
|
|
37
37
|
font-display: swap;
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
}
|
|
40
40
|
|
|
41
41
|
@font-face {
|
|
42
|
-
font-family:
|
|
42
|
+
font-family: neusaNextProWide;
|
|
43
43
|
font-weight: 700;
|
|
44
44
|
font-style: italic;
|
|
45
45
|
font-display: swap;
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
}
|
|
48
48
|
|
|
49
49
|
@font-face {
|
|
50
|
-
font-family:
|
|
50
|
+
font-family: proximaNova;
|
|
51
51
|
font-weight: 400;
|
|
52
52
|
font-style: normal;
|
|
53
53
|
font-display: swap;
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
}
|
|
56
56
|
|
|
57
57
|
@font-face {
|
|
58
|
-
font-family:
|
|
58
|
+
font-family: proximaNova;
|
|
59
59
|
font-weight: 500;
|
|
60
60
|
font-style: normal;
|
|
61
61
|
font-display: swap;
|
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
}
|
|
64
64
|
|
|
65
65
|
@font-face {
|
|
66
|
-
font-family:
|
|
66
|
+
font-family: proximaNova;
|
|
67
67
|
font-weight: 600;
|
|
68
68
|
font-style: normal;
|
|
69
69
|
font-display: swap;
|
|
@@ -71,7 +71,7 @@
|
|
|
71
71
|
}
|
|
72
72
|
|
|
73
73
|
@font-face {
|
|
74
|
-
font-family:
|
|
74
|
+
font-family: proximaNova;
|
|
75
75
|
font-weight: 700;
|
|
76
76
|
font-style: normal;
|
|
77
77
|
font-display: swap;
|
package/package.json
CHANGED
package/styles/custom.css
CHANGED
|
@@ -35,16 +35,16 @@
|
|
|
35
35
|
--f5-bay-2: #66afd7;
|
|
36
36
|
--f5-bay-3: #005c8d;
|
|
37
37
|
--f5-bay-4: #003d5f;
|
|
38
|
-
--f5-white: #
|
|
38
|
+
--f5-white: #fff;
|
|
39
39
|
--f5-white-1: #faf9f7;
|
|
40
40
|
--f5-white-2: #f5f5f5;
|
|
41
41
|
--f5-white-3: #e6e6e6;
|
|
42
|
-
--f5-white-4: #
|
|
43
|
-
--f5-black: #
|
|
44
|
-
--f5-black-1: #
|
|
45
|
-
--f5-black-2: #
|
|
42
|
+
--f5-white-4: #ccc;
|
|
43
|
+
--f5-black: #000;
|
|
44
|
+
--f5-black-1: #999;
|
|
45
|
+
--f5-black-2: #666;
|
|
46
46
|
--f5-black-3: #343434;
|
|
47
|
-
--f5-black-4: #
|
|
47
|
+
--f5-black-4: #222;
|
|
48
48
|
}
|
|
49
49
|
|
|
50
50
|
/* ===== F5 XC Multi-Color Icon Variables ===== */
|
|
@@ -55,13 +55,13 @@
|
|
|
55
55
|
--color-N200: #e6e9f3;
|
|
56
56
|
}
|
|
57
57
|
|
|
58
|
-
:root:not([data-theme=
|
|
58
|
+
:root:not([data-theme="light"]) {
|
|
59
59
|
--color-N600: #e5eaff;
|
|
60
60
|
--color-blue-light: #0e41aa;
|
|
61
61
|
--color-N200: #1a2a6c;
|
|
62
62
|
}
|
|
63
63
|
|
|
64
|
-
:root[data-theme=
|
|
64
|
+
:root[data-theme="light"] {
|
|
65
65
|
--color-N600: #0f1e57;
|
|
66
66
|
--color-blue-light: #e5eaff;
|
|
67
67
|
--color-N200: #e6e9f3;
|
|
@@ -99,23 +99,15 @@
|
|
|
99
99
|
|
|
100
100
|
/* Shadows — dark mode (neutral-tinted #cccccc base) */
|
|
101
101
|
--f5-shadow-inset: inset 0px 1px 2px 1px #cccccc0d;
|
|
102
|
-
--f5-shadow-low:
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
--f5-shadow-
|
|
106
|
-
0px 2px 3px 0px #cccccc0d,
|
|
107
|
-
0px 8px 16px -10px #cccccc1a;
|
|
108
|
-
--f5-shadow-high:
|
|
109
|
-
0px 2px 3px 0px #cccccc1a,
|
|
110
|
-
0px 16px 16px -10px #cccccc1a;
|
|
111
|
-
--f5-shadow-higher:
|
|
112
|
-
0px 2px 3px 0px #cccccc0d,
|
|
113
|
-
0px 12px 28px 0px #cccccc26;
|
|
102
|
+
--f5-shadow-low: 0px 1px 1px 0px #cccccc0a, 0px 2px 2px 0px #cccccc0a;
|
|
103
|
+
--f5-shadow-mid: 0px 2px 3px 0px #cccccc0d, 0px 8px 16px -10px #cccccc1a;
|
|
104
|
+
--f5-shadow-high: 0px 2px 3px 0px #cccccc1a, 0px 16px 16px -10px #cccccc1a;
|
|
105
|
+
--f5-shadow-higher: 0px 2px 3px 0px #cccccc0d, 0px 12px 28px 0px #cccccc26;
|
|
114
106
|
|
|
115
107
|
/* Borders — dark mode (alpha-transparent) */
|
|
116
108
|
--f5-border-faint: #f5f5f51a;
|
|
117
109
|
--f5-border-default: #f5f5f533;
|
|
118
|
-
--f5-border-strong: #
|
|
110
|
+
--f5-border-strong: #ccc6;
|
|
119
111
|
|
|
120
112
|
/* Surfaces — dark mode */
|
|
121
113
|
--f5-surface-hover: var(--f5-black-3);
|
|
@@ -129,12 +121,14 @@
|
|
|
129
121
|
--f5-transition-spring: 0.2s cubic-bezier(0.54, 1.5, 0.38, 1.11);
|
|
130
122
|
|
|
131
123
|
/* Focus rings */
|
|
132
|
-
--f5-focus-action:
|
|
133
|
-
|
|
124
|
+
--f5-focus-action:
|
|
125
|
+
inset 0 0 0 1px var(--f5-river), 0 0 0 3px var(--f5-river-2);
|
|
126
|
+
--f5-focus-critical:
|
|
127
|
+
inset 0 0 0 1px var(--f5-red-3), 0 0 0 3px var(--f5-red-2);
|
|
134
128
|
}
|
|
135
129
|
|
|
136
130
|
/* ===== Light Mode ===== */
|
|
137
|
-
:root[data-theme=
|
|
131
|
+
:root[data-theme="light"] {
|
|
138
132
|
--sl-color-white: var(--f5-black-4);
|
|
139
133
|
--sl-color-gray-1: var(--f5-black-4);
|
|
140
134
|
--sl-color-gray-2: var(--f5-black-3);
|
|
@@ -157,23 +151,15 @@
|
|
|
157
151
|
|
|
158
152
|
/* Shadows — light mode (#343434 base) */
|
|
159
153
|
--f5-shadow-inset: inset 0px 1px 2px 1px #3434341a;
|
|
160
|
-
--f5-shadow-low:
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
--f5-shadow-
|
|
164
|
-
0px 2px 3px 0px #3434341a,
|
|
165
|
-
0px 8px 16px -10px #34343433;
|
|
166
|
-
--f5-shadow-high:
|
|
167
|
-
0px 2px 3px 0px #34343426,
|
|
168
|
-
0px 16px 16px -10px #34343433;
|
|
169
|
-
--f5-shadow-higher:
|
|
170
|
-
0px 2px 3px 0px #3434341a,
|
|
171
|
-
0px 12px 28px 0px #34343440;
|
|
154
|
+
--f5-shadow-low: 0px 1px 1px 0px #3434340d, 0px 2px 2px 0px #3434340d;
|
|
155
|
+
--f5-shadow-mid: 0px 2px 3px 0px #3434341a, 0px 8px 16px -10px #34343433;
|
|
156
|
+
--f5-shadow-high: 0px 2px 3px 0px #34343426, 0px 16px 16px -10px #34343433;
|
|
157
|
+
--f5-shadow-higher: 0px 2px 3px 0px #3434341a, 0px 12px 28px 0px #34343440;
|
|
172
158
|
|
|
173
159
|
/* Borders — light mode */
|
|
174
160
|
--f5-border-faint: #3434341a;
|
|
175
161
|
--f5-border-default: #34343433;
|
|
176
|
-
--f5-border-strong: #
|
|
162
|
+
--f5-border-strong: #2226;
|
|
177
163
|
|
|
178
164
|
/* Surfaces — light mode */
|
|
179
165
|
--f5-surface-hover: var(--f5-white-2);
|
|
@@ -182,8 +168,9 @@
|
|
|
182
168
|
|
|
183
169
|
/* ===== Fonts & Layout ===== */
|
|
184
170
|
:root {
|
|
185
|
-
--sl-font: "proximaNova", system-ui, "Segoe UI",
|
|
186
|
-
--sl-font-heading:
|
|
171
|
+
--sl-font: "proximaNova", system-ui, "Segoe UI", helvetica, arial, sans-serif;
|
|
172
|
+
--sl-font-heading:
|
|
173
|
+
"neusaNextProWide", system-ui, "Segoe UI", helvetica, arial, sans-serif;
|
|
187
174
|
--sl-content-width: 60rem;
|
|
188
175
|
--sl-sidebar-width: 15rem;
|
|
189
176
|
|
|
@@ -195,12 +182,18 @@
|
|
|
195
182
|
--sl-text-h4: var(--sl-text-lg);
|
|
196
183
|
}
|
|
197
184
|
|
|
198
|
-
h1,
|
|
185
|
+
h1,
|
|
186
|
+
h2,
|
|
187
|
+
h3,
|
|
188
|
+
h4,
|
|
189
|
+
h5,
|
|
190
|
+
h6 {
|
|
199
191
|
font-family: var(--sl-font-heading);
|
|
200
192
|
}
|
|
201
193
|
|
|
202
194
|
/* F5 type hierarchy weights */
|
|
203
|
-
h1,
|
|
195
|
+
h1,
|
|
196
|
+
h2 {
|
|
204
197
|
font-weight: 700;
|
|
205
198
|
}
|
|
206
199
|
|
|
@@ -208,14 +201,16 @@ h3 {
|
|
|
208
201
|
font-weight: 500;
|
|
209
202
|
}
|
|
210
203
|
|
|
211
|
-
h4,
|
|
204
|
+
h4,
|
|
205
|
+
h5,
|
|
206
|
+
h6 {
|
|
212
207
|
font-family: var(--sl-font);
|
|
213
208
|
font-weight: 700;
|
|
214
209
|
text-transform: uppercase;
|
|
215
210
|
letter-spacing: 0.05em;
|
|
216
211
|
}
|
|
217
212
|
|
|
218
|
-
@media (
|
|
213
|
+
@media (width >= 72rem) {
|
|
219
214
|
.right-sidebar-container {
|
|
220
215
|
max-width: 11rem;
|
|
221
216
|
}
|
|
@@ -252,9 +247,11 @@ h4, h5, h6 {
|
|
|
252
247
|
/* Starlight Card — consistent shadow */
|
|
253
248
|
.card {
|
|
254
249
|
box-shadow: var(--f5-shadow-low);
|
|
255
|
-
transition:
|
|
256
|
-
|
|
250
|
+
transition:
|
|
251
|
+
box-shadow var(--f5-transition-base),
|
|
252
|
+
transform var(--f5-transition-base);
|
|
257
253
|
}
|
|
254
|
+
|
|
258
255
|
.card:hover {
|
|
259
256
|
box-shadow: var(--f5-shadow-mid);
|
|
260
257
|
transform: translateY(-1px);
|
|
@@ -274,11 +271,11 @@ h4, h5, h6 {
|
|
|
274
271
|
|
|
275
272
|
/* macOS iTerm-style window frame for terminal code blocks */
|
|
276
273
|
.expressive-code .frame.is-terminal {
|
|
277
|
-
border: 2px solid
|
|
274
|
+
border: 2px solid rgb(255 255 255 / 15%);
|
|
278
275
|
}
|
|
279
276
|
|
|
280
277
|
:root[data-theme="light"] .expressive-code .frame.is-terminal {
|
|
281
|
-
border-color:
|
|
278
|
+
border-color: rgb(0 0 0 / 20%);
|
|
282
279
|
}
|
|
283
280
|
|
|
284
281
|
.expressive-code .frame.is-terminal .header {
|
|
@@ -296,7 +293,8 @@ h4, h5, h6 {
|
|
|
296
293
|
.expressive-code .frame.is-terminal .header::before {
|
|
297
294
|
-webkit-mask-image: none !important;
|
|
298
295
|
mask-image: none !important;
|
|
299
|
-
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 12'%3E%3Ccircle cx='6' cy='6' r='6' fill='%23ff5f56'/%3E%3Cpath d='M3.8 3.8L8.2 8.2M8.2 3.8L3.8 8.2' stroke='%234d0000' stroke-width='1.1' stroke-linecap='round'/%3E%3Ccircle cx='26' cy='6' r='6' fill='%23ffbd2e'/%3E%3Cpath d='M23.5 6H28.5' stroke='%23995700' stroke-width='1.1' stroke-linecap='round'/%3E%3Ccircle cx='46' cy='6' r='6' fill='%2327c93f'/%3E%3Cpolygon points='43.5,3.5 43.5,6 46,3.5' fill='%23006500'/%3E%3Cpolygon points='48.5,8.5 48.5,6 46,8.5' fill='%23006500'/%3E%3C/svg%3E")
|
|
296
|
+
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 12'%3E%3Ccircle cx='6' cy='6' r='6' fill='%23ff5f56'/%3E%3Cpath d='M3.8 3.8L8.2 8.2M8.2 3.8L3.8 8.2' stroke='%234d0000' stroke-width='1.1' stroke-linecap='round'/%3E%3Ccircle cx='26' cy='6' r='6' fill='%23ffbd2e'/%3E%3Cpath d='M23.5 6H28.5' stroke='%23995700' stroke-width='1.1' stroke-linecap='round'/%3E%3Ccircle cx='46' cy='6' r='6' fill='%2327c93f'/%3E%3Cpolygon points='43.5,3.5 43.5,6 46,3.5' fill='%23006500'/%3E%3Cpolygon points='48.5,8.5 48.5,6 46,8.5' fill='%23006500'/%3E%3C/svg%3E")
|
|
297
|
+
no-repeat center / contain !important;
|
|
300
298
|
opacity: 1 !important;
|
|
301
299
|
width: 52px;
|
|
302
300
|
height: 12px;
|
|
@@ -338,7 +336,7 @@ h4, h5, h6 {
|
|
|
338
336
|
}
|
|
339
337
|
|
|
340
338
|
.breadcrumbs li + li::before {
|
|
341
|
-
content:
|
|
339
|
+
content: "/";
|
|
342
340
|
padding-inline: 0.375rem;
|
|
343
341
|
color: var(--sl-color-gray-5);
|
|
344
342
|
}
|
|
@@ -371,9 +369,10 @@ h4, h5, h6 {
|
|
|
371
369
|
text-decoration: none;
|
|
372
370
|
white-space: nowrap;
|
|
373
371
|
flex-shrink: 0;
|
|
374
|
-
transition:
|
|
375
|
-
|
|
376
|
-
|
|
372
|
+
transition:
|
|
373
|
+
color var(--f5-transition-fast),
|
|
374
|
+
background var(--f5-transition-fast),
|
|
375
|
+
border-color var(--f5-transition-fast);
|
|
377
376
|
}
|
|
378
377
|
|
|
379
378
|
.edit-link:hover {
|
|
@@ -412,8 +411,13 @@ h4, h5, h6 {
|
|
|
412
411
|
font-family: var(--sl-font);
|
|
413
412
|
}
|
|
414
413
|
|
|
415
|
-
.swatch-color.text-light {
|
|
416
|
-
|
|
414
|
+
.swatch-color.text-light {
|
|
415
|
+
color: #fff;
|
|
416
|
+
}
|
|
417
|
+
|
|
418
|
+
.swatch-color.text-dark {
|
|
419
|
+
color: #000;
|
|
420
|
+
}
|
|
417
421
|
|
|
418
422
|
.swatch-label {
|
|
419
423
|
padding: 0.5rem;
|
|
@@ -452,7 +456,7 @@ h4, h5, h6 {
|
|
|
452
456
|
background: var(--sl-color-gray-7, #faf9f7);
|
|
453
457
|
}
|
|
454
458
|
|
|
455
|
-
:root:not([data-theme=
|
|
459
|
+
:root:not([data-theme="light"]) .icon-card-image {
|
|
456
460
|
background: var(--sl-color-gray-6);
|
|
457
461
|
}
|
|
458
462
|
|
|
@@ -463,12 +467,12 @@ h4, h5, h6 {
|
|
|
463
467
|
}
|
|
464
468
|
|
|
465
469
|
/* Invert near-black SVGs for dark mode visibility */
|
|
466
|
-
:root:not([data-theme=
|
|
470
|
+
:root:not([data-theme="light"]) .icon-card-image img {
|
|
467
471
|
filter: invert(1);
|
|
468
472
|
}
|
|
469
473
|
|
|
470
474
|
/* Preserve original colors for branded/color-variant icons in dark mode */
|
|
471
|
-
:root:not([data-theme=
|
|
475
|
+
:root:not([data-theme="light"]) .icon-card-image.no-invert img {
|
|
472
476
|
filter: none;
|
|
473
477
|
}
|
|
474
478
|
|
|
@@ -480,7 +484,7 @@ h4, h5, h6 {
|
|
|
480
484
|
font-family: var(--sl-font);
|
|
481
485
|
background: var(--sl-color-gray-6);
|
|
482
486
|
color: var(--sl-color-gray-1);
|
|
483
|
-
|
|
487
|
+
overflow-wrap: break-word;
|
|
484
488
|
}
|
|
485
489
|
|
|
486
490
|
/* ===== Scroll-to-Top Button Size Override ===== */
|
|
@@ -488,14 +492,17 @@ h4, h5, h6 {
|
|
|
488
492
|
width: 36px !important;
|
|
489
493
|
height: 36px !important;
|
|
490
494
|
}
|
|
495
|
+
|
|
491
496
|
.scroll-to-top-button svg {
|
|
492
497
|
width: 20px !important;
|
|
493
498
|
height: 20px !important;
|
|
494
499
|
}
|
|
500
|
+
|
|
495
501
|
.scroll-to-top-button .scroll-progress-ring {
|
|
496
502
|
width: 36px !important;
|
|
497
503
|
height: 36px !important;
|
|
498
504
|
}
|
|
505
|
+
|
|
499
506
|
.scroll-to-top-button .scroll-progress-ring circle {
|
|
500
507
|
cx: 18;
|
|
501
508
|
cy: 18;
|
|
@@ -508,6 +515,7 @@ body.light-mode {
|
|
|
508
515
|
background-color: var(--sl-color-bg) !important;
|
|
509
516
|
color: var(--sl-color-text) !important;
|
|
510
517
|
}
|
|
518
|
+
|
|
511
519
|
body {
|
|
512
520
|
--scalar-background-1: unset;
|
|
513
521
|
--scalar-background-2: unset;
|
|
@@ -517,8 +525,9 @@ body {
|
|
|
517
525
|
/* ===== Phase 2: Sidebar Navigation Enhancement ===== */
|
|
518
526
|
.sidebar-content a {
|
|
519
527
|
border-radius: var(--f5-radius-sm);
|
|
520
|
-
transition:
|
|
521
|
-
|
|
528
|
+
transition:
|
|
529
|
+
background-color var(--f5-transition-fast),
|
|
530
|
+
color var(--f5-transition-fast);
|
|
522
531
|
}
|
|
523
532
|
|
|
524
533
|
.sidebar-content a:hover {
|
|
@@ -534,12 +543,15 @@ body {
|
|
|
534
543
|
}
|
|
535
544
|
|
|
536
545
|
/* ===== Phase 3: Card Hover Effects + Link Transitions ===== */
|
|
537
|
-
.swatch,
|
|
538
|
-
|
|
539
|
-
|
|
546
|
+
.swatch,
|
|
547
|
+
.icon-card {
|
|
548
|
+
transition:
|
|
549
|
+
box-shadow var(--f5-transition-base),
|
|
550
|
+
transform var(--f5-transition-base);
|
|
540
551
|
}
|
|
541
552
|
|
|
542
|
-
.swatch:hover,
|
|
553
|
+
.swatch:hover,
|
|
554
|
+
.icon-card:hover {
|
|
543
555
|
box-shadow: var(--f5-shadow-mid);
|
|
544
556
|
transform: translateY(-1px);
|
|
545
557
|
}
|
|
@@ -549,13 +561,13 @@ body {
|
|
|
549
561
|
}
|
|
550
562
|
|
|
551
563
|
/* ===== Phase 4: Button Component System ===== */
|
|
552
|
-
.btn-primary
|
|
564
|
+
.btn-primary,
|
|
565
|
+
.btn-secondary,
|
|
566
|
+
.btn-tertiary,
|
|
567
|
+
.btn-critical {
|
|
553
568
|
display: inline-flex;
|
|
554
569
|
align-items: center;
|
|
555
570
|
gap: 0.5rem;
|
|
556
|
-
background: var(--f5-red);
|
|
557
|
-
color: var(--f5-white);
|
|
558
|
-
border: none;
|
|
559
571
|
border-radius: var(--f5-radius-sm);
|
|
560
572
|
padding: 0.625rem 1rem;
|
|
561
573
|
min-height: 2.5rem;
|
|
@@ -564,9 +576,17 @@ body {
|
|
|
564
576
|
font-family: var(--sl-font);
|
|
565
577
|
cursor: pointer;
|
|
566
578
|
text-decoration: none;
|
|
567
|
-
transition: background-color var(--f5-transition-fast),
|
|
568
|
-
box-shadow var(--f5-transition-fast);
|
|
569
579
|
}
|
|
580
|
+
|
|
581
|
+
.btn-primary {
|
|
582
|
+
background: var(--f5-red);
|
|
583
|
+
color: var(--f5-white);
|
|
584
|
+
border: none;
|
|
585
|
+
transition:
|
|
586
|
+
background-color var(--f5-transition-fast),
|
|
587
|
+
box-shadow var(--f5-transition-fast);
|
|
588
|
+
}
|
|
589
|
+
|
|
570
590
|
.btn-primary:hover {
|
|
571
591
|
background: var(--f5-red-3);
|
|
572
592
|
box-shadow: var(--f5-shadow-low);
|
|
@@ -575,23 +595,14 @@ body {
|
|
|
575
595
|
}
|
|
576
596
|
|
|
577
597
|
.btn-secondary {
|
|
578
|
-
display: inline-flex;
|
|
579
|
-
align-items: center;
|
|
580
|
-
gap: 0.5rem;
|
|
581
598
|
background: transparent;
|
|
582
599
|
color: var(--sl-color-gray-2);
|
|
583
600
|
border: 1px solid var(--f5-border-default);
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
font-weight: 500;
|
|
588
|
-
font-size: 0.875rem;
|
|
589
|
-
font-family: var(--sl-font);
|
|
590
|
-
cursor: pointer;
|
|
591
|
-
text-decoration: none;
|
|
592
|
-
transition: background-color var(--f5-transition-fast),
|
|
593
|
-
border-color var(--f5-transition-fast);
|
|
601
|
+
transition:
|
|
602
|
+
background-color var(--f5-transition-fast),
|
|
603
|
+
border-color var(--f5-transition-fast);
|
|
594
604
|
}
|
|
605
|
+
|
|
595
606
|
.btn-secondary:hover {
|
|
596
607
|
background: var(--f5-surface-hover);
|
|
597
608
|
border-color: var(--f5-border-strong);
|
|
@@ -599,83 +610,84 @@ body {
|
|
|
599
610
|
}
|
|
600
611
|
|
|
601
612
|
.btn-tertiary {
|
|
602
|
-
display: inline-flex;
|
|
603
|
-
align-items: center;
|
|
604
|
-
gap: 0.5rem;
|
|
605
613
|
background: transparent;
|
|
606
614
|
color: var(--sl-color-accent);
|
|
607
615
|
border: none;
|
|
608
|
-
border-radius: var(--f5-radius-sm);
|
|
609
|
-
padding: 0.625rem 1rem;
|
|
610
|
-
min-height: 2.5rem;
|
|
611
|
-
font-weight: 500;
|
|
612
|
-
font-size: 0.875rem;
|
|
613
|
-
font-family: var(--sl-font);
|
|
614
|
-
cursor: pointer;
|
|
615
|
-
text-decoration: none;
|
|
616
616
|
transition: background-color var(--f5-transition-fast);
|
|
617
617
|
}
|
|
618
|
+
|
|
618
619
|
.btn-tertiary:hover {
|
|
619
620
|
background: var(--f5-surface-hover);
|
|
620
621
|
text-decoration: none;
|
|
621
622
|
}
|
|
622
623
|
|
|
623
|
-
.btn-sm {
|
|
624
|
-
|
|
624
|
+
.btn-sm {
|
|
625
|
+
padding: 0.375rem 0.75rem;
|
|
626
|
+
font-size: 0.8125rem;
|
|
627
|
+
min-height: 2rem;
|
|
628
|
+
}
|
|
629
|
+
|
|
630
|
+
.btn-lg {
|
|
631
|
+
padding: 0.75rem 1.5rem;
|
|
632
|
+
font-size: 1rem;
|
|
633
|
+
min-height: 3rem;
|
|
634
|
+
}
|
|
625
635
|
|
|
626
636
|
.btn-critical {
|
|
627
|
-
display: inline-flex;
|
|
628
|
-
align-items: center;
|
|
629
|
-
gap: 0.5rem;
|
|
630
637
|
background: var(--f5-red-3);
|
|
631
638
|
color: var(--f5-white);
|
|
632
639
|
border: none;
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
font-weight: 500;
|
|
637
|
-
font-size: 0.875rem;
|
|
638
|
-
font-family: var(--sl-font);
|
|
639
|
-
cursor: pointer;
|
|
640
|
-
text-decoration: none;
|
|
641
|
-
transition: background-color var(--f5-transition-fast),
|
|
642
|
-
box-shadow var(--f5-transition-fast);
|
|
640
|
+
transition:
|
|
641
|
+
background-color var(--f5-transition-fast),
|
|
642
|
+
box-shadow var(--f5-transition-fast);
|
|
643
643
|
}
|
|
644
|
+
|
|
644
645
|
.btn-critical:hover {
|
|
645
646
|
background: var(--f5-red-4);
|
|
646
647
|
box-shadow: var(--f5-shadow-low);
|
|
647
648
|
text-decoration: none;
|
|
648
649
|
color: var(--f5-white);
|
|
649
650
|
}
|
|
651
|
+
|
|
650
652
|
.btn-critical:focus-visible {
|
|
651
653
|
box-shadow: var(--f5-focus-critical);
|
|
652
654
|
}
|
|
653
655
|
|
|
654
656
|
/* ===== Phase 5: Hero Gradients ===== */
|
|
655
657
|
.hero-gradient-primary {
|
|
656
|
-
background: linear-gradient(
|
|
658
|
+
background: linear-gradient(
|
|
659
|
+
135deg,
|
|
660
|
+
var(--f5-river-2) 0%,
|
|
661
|
+
var(--f5-river) 100%
|
|
662
|
+
);
|
|
657
663
|
}
|
|
658
664
|
|
|
659
665
|
.hero-gradient-eggplant {
|
|
660
|
-
background: linear-gradient(
|
|
666
|
+
background: linear-gradient(
|
|
667
|
+
135deg,
|
|
668
|
+
var(--f5-eggplant-2) 0%,
|
|
669
|
+
var(--f5-eggplant) 100%
|
|
670
|
+
);
|
|
661
671
|
}
|
|
662
672
|
|
|
663
673
|
.hero-gradient-red {
|
|
664
674
|
background: linear-gradient(135deg, var(--f5-red-2) 0%, var(--f5-red) 100%);
|
|
665
675
|
}
|
|
666
676
|
|
|
667
|
-
:root[data-theme=
|
|
677
|
+
:root[data-theme="light"] .hero-gradient-faint {
|
|
668
678
|
background: linear-gradient(180deg, #faf9f7 0%, #f5f5f5 100%);
|
|
669
679
|
}
|
|
670
|
-
|
|
671
|
-
|
|
680
|
+
|
|
681
|
+
:root:not([data-theme="light"]) .hero-gradient-faint {
|
|
682
|
+
background: linear-gradient(180deg, #222 0%, #000 100%);
|
|
672
683
|
}
|
|
673
684
|
|
|
674
685
|
.hero-fade {
|
|
675
686
|
position: relative;
|
|
676
687
|
}
|
|
688
|
+
|
|
677
689
|
.hero-fade::after {
|
|
678
|
-
content:
|
|
690
|
+
content: "";
|
|
679
691
|
position: absolute;
|
|
680
692
|
bottom: 0;
|
|
681
693
|
left: 0;
|
|
@@ -685,12 +697,19 @@ body {
|
|
|
685
697
|
pointer-events: none;
|
|
686
698
|
}
|
|
687
699
|
|
|
688
|
-
.hero-vignette {
|
|
700
|
+
.hero-vignette {
|
|
701
|
+
position: relative;
|
|
702
|
+
}
|
|
703
|
+
|
|
689
704
|
.hero-vignette::after {
|
|
690
|
-
content:
|
|
705
|
+
content: "";
|
|
691
706
|
position: absolute;
|
|
692
707
|
inset: 0;
|
|
693
|
-
background: radial-gradient(
|
|
708
|
+
background: radial-gradient(
|
|
709
|
+
ellipse at center,
|
|
710
|
+
transparent 40%,
|
|
711
|
+
rgb(0 0 0 / 15%) 100%
|
|
712
|
+
);
|
|
694
713
|
pointer-events: none;
|
|
695
714
|
}
|
|
696
715
|
|
|
@@ -710,14 +729,15 @@ summary:focus-visible {
|
|
|
710
729
|
}
|
|
711
730
|
|
|
712
731
|
.social-links a {
|
|
713
|
-
transition:
|
|
714
|
-
|
|
732
|
+
transition:
|
|
733
|
+
opacity var(--f5-transition-base),
|
|
734
|
+
color var(--f5-transition-base);
|
|
715
735
|
}
|
|
716
736
|
|
|
717
737
|
/* Widen mega-menu flyout to prevent title word-wrap in two-column layouts.
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
738
|
+
Radix JS sets --radix-navigation-menu-viewport-width based on intrinsic
|
|
739
|
+
content measurement (~320px), so max-width alone cannot force expansion.
|
|
740
|
+
We override min-width to ensure two-column grids have adequate room. */
|
|
721
741
|
.smm-viewport {
|
|
722
742
|
min-width: min(90vw, 650px);
|
|
723
743
|
max-width: min(90vw, 800px);
|