@abstractdata/starlight-theme 0.3.1 → 0.3.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.
@@ -7,235 +7,247 @@
7
7
  /* ------------------------------------------------------------
8
8
  Hexagon grid background on main content
9
9
  ------------------------------------------------------------ */
10
- .main-frame .main-pane,
11
- [data-has-toc] .main-pane {
12
- position: relative;
13
- }
14
-
15
- .main-frame .main-pane::before {
16
- content: '';
17
- position: absolute;
18
- inset: 0;
19
- background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='87' viewBox='0 0 100 87'><path d='M25 0L50 14.43V43.3L25 57.74L0 43.3V14.43L25 0Z M75 0L100 14.43V43.3L75 57.74L50 43.3V14.43L75 0Z M50 43.3L75 57.74V86.6L50 101L25 86.6V57.74L50 43.3Z' fill='none' stroke='%2300d9ff' stroke-width='0.5' opacity='0.18'/></svg>");
20
- background-size: 100px 87px;
21
- pointer-events: none;
22
- z-index: 0;
23
- opacity: 0.55;
24
- animation: ad-hex-pulse 5s ease-in-out infinite;
25
- }
26
- :root[data-theme='light'] .main-frame .main-pane::before {
27
- background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='87' viewBox='0 0 100 87'><path d='M25 0L50 14.43V43.3L25 57.74L0 43.3V14.43L25 0Z M75 0L100 14.43V43.3L75 57.74L50 43.3V14.43L75 0Z M50 43.3L75 57.74V86.6L50 101L25 86.6V57.74L50 43.3Z' fill='none' stroke='%237a1f2c' stroke-width='0.5' opacity='0.18'/></svg>");
28
- opacity: 1;
29
- animation: none; /* hex pulse off in light — feels more refined */
30
- }
31
-
32
- .main-frame .main-pane > * {
33
- position: relative;
34
- z-index: 1;
35
- }
36
10
 
37
11
  /* ------------------------------------------------------------
38
- H1 cyan glow + underline fade (covers content h1 and hero h1)
12
+ Cascade layer declaration keep above the wrapped block.
13
+ The whole theme lives inside `@layer abstract-data` so any
14
+ unlayered user CSS in `customCss` automatically wins without
15
+ needing !important. Order: Starlight ships its `starlight`
16
+ layer (0.34+); we sit just above it; user CSS sits above us.
39
17
  ------------------------------------------------------------ */
40
- .sl-markdown-content > h1:first-child,
41
- .content-panel h1[data-page-title],
42
- .hero h1 {
43
- text-shadow: 0 0 14px rgba(0, 217, 255, 0.45),
44
- 0 0 28px rgba(0, 217, 255, 0.18);
45
- }
46
- .sl-markdown-content > h1:first-child::after,
47
- .content-panel h1[data-page-title]::after,
48
- .hero h1::after {
49
- content: '';
50
- position: absolute;
51
- left: 14px;
52
- right: 0;
53
- bottom: -8px;
54
- height: 1px;
55
- background: linear-gradient(90deg, var(--ad-cyan), transparent);
56
- opacity: 0.7;
57
- box-shadow: 0 0 8px rgba(0, 217, 255, 0.5);
58
- }
59
- :root[data-theme='light'] .sl-markdown-content > h1:first-child,
60
- :root[data-theme='light'] .content-panel h1[data-page-title],
61
- :root[data-theme='light'] .hero h1 {
62
- text-shadow: none;
63
- }
64
- :root[data-theme='light'] .sl-markdown-content > h1:first-child::after,
65
- :root[data-theme='light'] .content-panel h1[data-page-title]::after,
66
- :root[data-theme='light'] .hero h1::after {
67
- background: linear-gradient(90deg, var(--ad-burgundy), transparent);
68
- opacity: 0.45;
69
- box-shadow: none;
70
- }
18
+ @layer abstract-data;
71
19
 
72
- /* ------------------------------------------------------------
73
- Active sidebar item — inset glow
74
- ------------------------------------------------------------ */
75
- .sidebar-pane a[aria-current='page'] {
76
- box-shadow: inset 0 0 16px rgba(0, 217, 255, 0.18);
77
- text-shadow: 0 0 8px rgba(0, 217, 255, 0.4);
78
- }
79
- :root[data-theme='light'] .sidebar-pane a[aria-current='page'] {
80
- box-shadow: inset 0 0 12px rgba(0, 122, 142, 0.12);
81
- text-shadow: none;
82
- }
20
+ @layer abstract-data {
21
+ .main-frame .main-pane,
22
+ [data-has-toc] .main-pane {
23
+ position: relative;
24
+ }
83
25
 
84
- /* ------------------------------------------------------------
85
- Code blocks — holographic shimmer + cyan halo
86
- ------------------------------------------------------------ */
87
- .expressive-code .frame {
88
- position: relative;
89
- box-shadow: 0 0 28px rgba(0, 217, 255, 0.12),
90
- 0 0 0 1px rgba(0, 217, 255, 0.18);
91
- }
92
- .expressive-code .frame::after {
93
- content: '';
94
- position: absolute;
95
- inset: 0;
96
- background: linear-gradient(105deg,
97
- transparent 30%,
98
- rgba(0, 217, 255, 0.08) 50%,
99
- transparent 70%);
100
- background-size: 200% 100%;
101
- pointer-events: none;
102
- animation: ad-holographic-shift 6s linear infinite;
103
- border-radius: inherit;
104
- }
105
- :root[data-theme='light'] .expressive-code .frame {
106
- box-shadow: 0 0 18px rgba(122, 31, 44, 0.06),
107
- 0 0 0 1px rgba(122, 31, 44, 0.12);
108
- }
109
- :root[data-theme='light'] .expressive-code .frame::after {
110
- background: linear-gradient(105deg,
111
- transparent 30%,
112
- rgba(122, 31, 44, 0.05) 50%,
113
- transparent 70%);
114
- background-size: 200% 100%;
115
- animation: ad-holographic-shift 8s linear infinite;
116
- }
26
+ .main-frame .main-pane::before {
27
+ content: '';
28
+ position: absolute;
29
+ inset: 0;
30
+ background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='87' viewBox='0 0 100 87'><path d='M25 0L50 14.43V43.3L25 57.74L0 43.3V14.43L25 0Z M75 0L100 14.43V43.3L75 57.74L50 43.3V14.43L75 0Z M50 43.3L75 57.74V86.6L50 101L25 86.6V57.74L50 43.3Z' fill='none' stroke='%2300d9ff' stroke-width='0.5' opacity='0.18'/></svg>");
31
+ background-size: 100px 87px;
32
+ pointer-events: none;
33
+ z-index: 0;
34
+ opacity: 0.55;
35
+ animation: ad-hex-pulse 5s ease-in-out infinite;
36
+ }
37
+ :root[data-theme='light'] .main-frame .main-pane::before {
38
+ background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='87' viewBox='0 0 100 87'><path d='M25 0L50 14.43V43.3L25 57.74L0 43.3V14.43L25 0Z M75 0L100 14.43V43.3L75 57.74L50 43.3V14.43L75 0Z M50 43.3L75 57.74V86.6L50 101L25 86.6V57.74L50 43.3Z' fill='none' stroke='%237a1f2c' stroke-width='0.5' opacity='0.18'/></svg>");
39
+ opacity: 1;
40
+ animation: none; /* hex pulse off in light — feels more refined */
41
+ }
117
42
 
118
- /* ------------------------------------------------------------
119
- Callouts — matching color glow
120
- ------------------------------------------------------------ */
121
- .starlight-aside--tip,
122
- .starlight-aside--note { box-shadow: 0 0 16px rgba(0, 217, 255, 0.10); }
123
- .starlight-aside--caution { box-shadow: 0 0 16px rgba(212, 175, 55, 0.10); }
124
- .starlight-aside--danger { box-shadow: 0 0 16px rgba(192, 74, 91, 0.14); }
43
+ .main-frame .main-pane > * {
44
+ position: relative;
45
+ z-index: 1;
46
+ }
125
47
 
126
- /* ------------------------------------------------------------
127
- Animations
128
- ------------------------------------------------------------ */
129
- @keyframes ad-hex-pulse {
130
- 0%, 100% { opacity: 0.45; }
131
- 50% { opacity: 0.75; }
132
- }
133
- @keyframes ad-holographic-shift {
134
- 0% { background-position: -100% 0; }
135
- 100% { background-position: 200% 0; }
136
- }
137
- @keyframes ad-glitch-text {
138
- 0%, 95%, 100% { text-shadow: none; }
139
- 96% { text-shadow: -1px 0 var(--ad-magenta), 1px 0 var(--ad-cyan); }
140
- 97% { text-shadow: 1px 0 var(--ad-magenta), -1px 0 var(--ad-cyan); }
141
- 98% { text-shadow: -1px 0 var(--ad-cyan), 1px 0 var(--ad-magenta); }
142
- }
48
+ /* ------------------------------------------------------------
49
+ H1 cyan glow + underline fade (covers content h1 and hero h1)
50
+ ------------------------------------------------------------ */
51
+ .sl-markdown-content > h1:first-child,
52
+ .content-panel h1[data-page-title],
53
+ .hero h1 {
54
+ text-shadow: 0 0 14px rgba(0, 217, 255, 0.45),
55
+ 0 0 28px rgba(0, 217, 255, 0.18);
56
+ }
57
+ .sl-markdown-content > h1:first-child::after,
58
+ .content-panel h1[data-page-title]::after,
59
+ .hero h1::after {
60
+ content: '';
61
+ position: absolute;
62
+ left: 14px;
63
+ right: 0;
64
+ bottom: -8px;
65
+ height: 1px;
66
+ background: linear-gradient(90deg, var(--ad-cyan), transparent);
67
+ opacity: 0.7;
68
+ box-shadow: 0 0 8px rgba(0, 217, 255, 0.5);
69
+ }
70
+ :root[data-theme='light'] .sl-markdown-content > h1:first-child,
71
+ :root[data-theme='light'] .content-panel h1[data-page-title],
72
+ :root[data-theme='light'] .hero h1 {
73
+ text-shadow: none;
74
+ }
75
+ :root[data-theme='light'] .sl-markdown-content > h1:first-child::after,
76
+ :root[data-theme='light'] .content-panel h1[data-page-title]::after,
77
+ :root[data-theme='light'] .hero h1::after {
78
+ background: linear-gradient(90deg, var(--ad-burgundy), transparent);
79
+ opacity: 0.45;
80
+ box-shadow: none;
81
+ }
143
82
 
144
- /* ------------------------------------------------------------
145
- Version chipgold glow + 9s glitch pulse + hover-trigger
146
- ------------------------------------------------------------ */
147
- .ad-version-chip {
148
- box-shadow: 0 0 12px rgba(212, 175, 55, 0.4);
149
- animation: ad-version-glitch-pulse 9s infinite;
150
- }
151
- .ad-version-chip:hover {
152
- animation: ad-glitch-text 0.4s steps(2);
153
- }
154
- :root[data-theme='light'] .ad-version-chip {
155
- box-shadow: 0 0 10px rgba(138, 109, 31, 0.25);
156
- animation: none; /* idle pulse off in light mode — feels more refined */
157
- }
83
+ /* ------------------------------------------------------------
84
+ Active sidebar item inset glow
85
+ ------------------------------------------------------------ */
86
+ .sidebar-pane a[aria-current='page'] {
87
+ box-shadow: inset 0 0 16px rgba(0, 217, 255, 0.18);
88
+ text-shadow: 0 0 8px rgba(0, 217, 255, 0.4);
89
+ }
90
+ :root[data-theme='light'] .sidebar-pane a[aria-current='page'] {
91
+ box-shadow: inset 0 0 12px rgba(0, 122, 142, 0.12);
92
+ text-shadow: none;
93
+ }
158
94
 
159
- @keyframes ad-version-glitch-pulse {
160
- 0%, 95%, 100% { text-shadow: none; }
161
- 96% { text-shadow: -1px 0 var(--ad-magenta), 1px 0 var(--ad-cyan); }
162
- 97% { text-shadow: 1px 0 var(--ad-magenta), -1px 0 var(--ad-cyan); }
163
- 98% { text-shadow: -1px 0 var(--ad-cyan), 1px 0 var(--ad-magenta); }
164
- }
95
+ /* ------------------------------------------------------------
96
+ Code blocks holographic shimmer + cyan halo
97
+ ------------------------------------------------------------ */
98
+ .expressive-code .frame {
99
+ position: relative;
100
+ box-shadow: 0 0 28px rgba(0, 217, 255, 0.12),
101
+ 0 0 0 1px rgba(0, 217, 255, 0.18);
102
+ }
103
+ .expressive-code .frame::after {
104
+ content: '';
105
+ position: absolute;
106
+ inset: 0;
107
+ background: linear-gradient(105deg,
108
+ transparent 30%,
109
+ rgba(0, 217, 255, 0.08) 50%,
110
+ transparent 70%);
111
+ background-size: 200% 100%;
112
+ pointer-events: none;
113
+ animation: ad-holographic-shift 6s linear infinite;
114
+ border-radius: inherit;
115
+ }
116
+ :root[data-theme='light'] .expressive-code .frame {
117
+ box-shadow: 0 0 18px rgba(122, 31, 44, 0.06),
118
+ 0 0 0 1px rgba(122, 31, 44, 0.12);
119
+ }
120
+ :root[data-theme='light'] .expressive-code .frame::after {
121
+ background: linear-gradient(105deg,
122
+ transparent 30%,
123
+ rgba(122, 31, 44, 0.05) 50%,
124
+ transparent 70%);
125
+ background-size: 200% 100%;
126
+ animation: ad-holographic-shift 8s linear infinite;
127
+ }
165
128
 
166
- /* ------------------------------------------------------------
167
- <Glitch /> RGB-channel split with clip-path animation
168
- ------------------------------------------------------------ */
169
- .ad-glitch::before,
170
- .ad-glitch::after {
171
- content: attr(data-text);
172
- position: absolute;
173
- top: 0;
174
- left: 0;
175
- width: 100%;
176
- height: 100%;
177
- opacity: 0.85;
178
- pointer-events: none;
179
- }
180
- .ad-glitch::before {
181
- color: var(--ad-magenta);
182
- animation: ad-glitch-clip-a 3s steps(1) infinite;
183
- }
184
- .ad-glitch::after {
185
- color: var(--ad-cyan);
186
- animation: ad-glitch-clip-b 3s steps(1) infinite;
187
- }
188
- :root[data-theme='light'] .ad-glitch::before {
189
- color: var(--ad-burgundy);
190
- }
191
- :root[data-theme='light'] .ad-glitch::after {
192
- color: var(--ad-cyan-deep);
193
- }
129
+ /* ------------------------------------------------------------
130
+ Calloutsmatching color glow
131
+ ------------------------------------------------------------ */
132
+ .starlight-aside--tip,
133
+ .starlight-aside--note { box-shadow: 0 0 16px rgba(0, 217, 255, 0.10); }
134
+ .starlight-aside--caution { box-shadow: 0 0 16px rgba(212, 175, 55, 0.10); }
135
+ .starlight-aside--danger { box-shadow: 0 0 16px rgba(192, 74, 91, 0.14); }
194
136
 
195
- @keyframes ad-glitch-clip-a {
196
- 0%, 90%, 100% { transform: translate(0); clip-path: inset(100% 0 0 0); }
197
- 91% { transform: translate(-2px, 1px); clip-path: inset(20% 0 60% 0); }
198
- 93% { transform: translate(2px, -1px); clip-path: inset(60% 0 20% 0); }
199
- 95% { transform: translate(-1px, -1px); clip-path: inset(40% 0 40% 0); }
200
- 97% { transform: translate(1px, 0); clip-path: inset(10% 0 80% 0); }
201
- }
202
- @keyframes ad-glitch-clip-b {
203
- 0%, 90%, 100% { transform: translate(0); clip-path: inset(100% 0 0 0); }
204
- 91% { transform: translate(2px, -1px); clip-path: inset(60% 0 20% 0); }
205
- 93% { transform: translate(-2px, 1px); clip-path: inset(20% 0 60% 0); }
206
- 95% { transform: translate(1px, 1px); clip-path: inset(50% 0 30% 0); }
207
- 97% { transform: translate(-1px, 0); clip-path: inset(70% 0 10% 0); }
208
- }
137
+ /* ------------------------------------------------------------
138
+ Animations
139
+ ------------------------------------------------------------ */
140
+ @keyframes ad-hex-pulse {
141
+ 0%, 100% { opacity: 0.45; }
142
+ 50% { opacity: 0.75; }
143
+ }
144
+ @keyframes ad-holographic-shift {
145
+ 0% { background-position: -100% 0; }
146
+ 100% { background-position: 200% 0; }
147
+ }
148
+ @keyframes ad-glitch-text {
149
+ 0%, 95%, 100% { text-shadow: none; }
150
+ 96% { text-shadow: -1px 0 var(--ad-magenta), 1px 0 var(--ad-cyan); }
151
+ 97% { text-shadow: 1px 0 var(--ad-magenta), -1px 0 var(--ad-cyan); }
152
+ 98% { text-shadow: -1px 0 var(--ad-cyan), 1px 0 var(--ad-magenta); }
153
+ }
209
154
 
210
- /* ------------------------------------------------------------
211
- Search modalcyan glow on focused input
212
- ------------------------------------------------------------ */
213
- .pagefind-ui__form input.pagefind-ui__search-input:focus {
214
- box-shadow: 0 0 0 2px rgba(0, 217, 255, 0.18),
215
- 0 0 16px rgba(0, 217, 255, 0.20);
216
- }
155
+ /* ------------------------------------------------------------
156
+ Version chipgold glow + 9s glitch pulse + hover-trigger
157
+ ------------------------------------------------------------ */
158
+ .ad-version-chip {
159
+ box-shadow: 0 0 12px rgba(212, 175, 55, 0.4);
160
+ animation: ad-version-glitch-pulse 9s infinite;
161
+ }
162
+ .ad-version-chip:hover {
163
+ animation: ad-glitch-text 0.4s steps(2);
164
+ }
165
+ :root[data-theme='light'] .ad-version-chip {
166
+ box-shadow: 0 0 10px rgba(138, 109, 31, 0.25);
167
+ animation: none; /* idle pulse off in light mode — feels more refined */
168
+ }
217
169
 
218
- /* ------------------------------------------------------------
219
- prefers-reduced-motion: collapse to Calm behavior
220
- ------------------------------------------------------------ */
221
- @media (prefers-reduced-motion: reduce) {
222
- .main-frame .main-pane::before,
223
- .expressive-code .frame::after,
224
- .ad-version-chip,
170
+ @keyframes ad-version-glitch-pulse {
171
+ 0%, 95%, 100% { text-shadow: none; }
172
+ 96% { text-shadow: -1px 0 var(--ad-magenta), 1px 0 var(--ad-cyan); }
173
+ 97% { text-shadow: 1px 0 var(--ad-magenta), -1px 0 var(--ad-cyan); }
174
+ 98% { text-shadow: -1px 0 var(--ad-cyan), 1px 0 var(--ad-magenta); }
175
+ }
176
+
177
+ /* ------------------------------------------------------------
178
+ <Glitch /> — RGB-channel split with clip-path animation
179
+ ------------------------------------------------------------ */
225
180
  .ad-glitch::before,
226
181
  .ad-glitch::after {
227
- animation: none !important;
182
+ content: attr(data-text);
183
+ position: absolute;
184
+ top: 0;
185
+ left: 0;
186
+ width: 100%;
187
+ height: 100%;
188
+ opacity: 0.85;
189
+ pointer-events: none;
190
+ }
191
+ .ad-glitch::before {
192
+ color: var(--ad-magenta);
193
+ animation: ad-glitch-clip-a 3s steps(1) infinite;
228
194
  }
229
- .ad-glitch::before,
230
195
  .ad-glitch::after {
231
- display: none;
196
+ color: var(--ad-cyan);
197
+ animation: ad-glitch-clip-b 3s steps(1) infinite;
232
198
  }
233
- .sl-markdown-content > h1:first-child,
234
- .content-panel h1[data-page-title],
235
- .hero h1 {
236
- text-shadow: none;
199
+ :root[data-theme='light'] .ad-glitch::before {
200
+ color: var(--ad-burgundy);
201
+ }
202
+ :root[data-theme='light'] .ad-glitch::after {
203
+ color: var(--ad-cyan-deep);
204
+ }
205
+
206
+ @keyframes ad-glitch-clip-a {
207
+ 0%, 90%, 100% { transform: translate(0); clip-path: inset(100% 0 0 0); }
208
+ 91% { transform: translate(-2px, 1px); clip-path: inset(20% 0 60% 0); }
209
+ 93% { transform: translate(2px, -1px); clip-path: inset(60% 0 20% 0); }
210
+ 95% { transform: translate(-1px, -1px); clip-path: inset(40% 0 40% 0); }
211
+ 97% { transform: translate(1px, 0); clip-path: inset(10% 0 80% 0); }
212
+ }
213
+ @keyframes ad-glitch-clip-b {
214
+ 0%, 90%, 100% { transform: translate(0); clip-path: inset(100% 0 0 0); }
215
+ 91% { transform: translate(2px, -1px); clip-path: inset(60% 0 20% 0); }
216
+ 93% { transform: translate(-2px, 1px); clip-path: inset(20% 0 60% 0); }
217
+ 95% { transform: translate(1px, 1px); clip-path: inset(50% 0 30% 0); }
218
+ 97% { transform: translate(-1px, 0); clip-path: inset(70% 0 10% 0); }
237
219
  }
220
+
221
+ /* ------------------------------------------------------------
222
+ Search modal — cyan glow on focused input
223
+ ------------------------------------------------------------ */
238
224
  .pagefind-ui__form input.pagefind-ui__search-input:focus {
239
- box-shadow: 0 0 0 2px rgba(0, 217, 255, 0.18);
225
+ box-shadow: 0 0 0 2px rgba(0, 217, 255, 0.18),
226
+ 0 0 16px rgba(0, 217, 255, 0.20);
227
+ }
228
+
229
+ /* ------------------------------------------------------------
230
+ prefers-reduced-motion: collapse to Calm behavior
231
+ ------------------------------------------------------------ */
232
+ @media (prefers-reduced-motion: reduce) {
233
+ .main-frame .main-pane::before,
234
+ .expressive-code .frame::after,
235
+ .ad-version-chip,
236
+ .ad-glitch::before,
237
+ .ad-glitch::after {
238
+ animation: none !important;
239
+ }
240
+ .ad-glitch::before,
241
+ .ad-glitch::after {
242
+ display: none;
243
+ }
244
+ .sl-markdown-content > h1:first-child,
245
+ .content-panel h1[data-page-title],
246
+ .hero h1 {
247
+ text-shadow: none;
248
+ }
249
+ .pagefind-ui__form input.pagefind-ui__search-input:focus {
250
+ box-shadow: 0 0 0 2px rgba(0, 217, 255, 0.18);
251
+ }
240
252
  }
241
253
  }