@sofidevo/astro-dynamic-header 5.0.4 → 5.0.6
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/package.json +1 -1
- package/src/Header.astro +21 -4
package/package.json
CHANGED
package/src/Header.astro
CHANGED
|
@@ -34,7 +34,7 @@ export interface Props {
|
|
|
34
34
|
* <Header preset="dark" />
|
|
35
35
|
* ```
|
|
36
36
|
*/
|
|
37
|
-
preset?: "light" | "dark" | "auto";
|
|
37
|
+
preset?: "light" | "dark" | "auto" | "none" ;
|
|
38
38
|
|
|
39
39
|
/**
|
|
40
40
|
* Navigation links, home link, and fine-grained classes for the desktop
|
|
@@ -116,7 +116,10 @@ const {
|
|
|
116
116
|
|
|
117
117
|
|
|
118
118
|
|
|
119
|
-
|
|
119
|
+
let forcedClass = "";
|
|
120
|
+
if (preset !== "none") {
|
|
121
|
+
forcedClass = `header--force-${preset}`;
|
|
122
|
+
}
|
|
120
123
|
---
|
|
121
124
|
|
|
122
125
|
<style >
|
|
@@ -200,7 +203,8 @@ const forcedClass = preset !== "auto" ? `header--force-${preset}` : "";
|
|
|
200
203
|
|
|
201
204
|
@layer components {
|
|
202
205
|
.header {
|
|
203
|
-
|
|
206
|
+
|
|
207
|
+
--bg-color: var(--l-bg, rgba(255, 255, 255, 0.748));
|
|
204
208
|
--bg-color-opaque: var(--l-bg-opaque, rgba(255, 255, 255, 0.748));
|
|
205
209
|
--text-color: var(--l-text, #1a1a1a);
|
|
206
210
|
--accent-color: var(--l-accent, #3e1c71);
|
|
@@ -233,9 +237,9 @@ const forcedClass = preset !== "auto" ? `header--force-${preset}` : "";
|
|
|
233
237
|
--text-color: var(--d-text, #ffffff);
|
|
234
238
|
--accent-color: var(--d-accent, #00ffff);
|
|
235
239
|
--backdrop-blur: var(--d-blur, blur(20px));
|
|
236
|
-
background-color: var(--bg-color);
|
|
237
240
|
}
|
|
238
241
|
|
|
242
|
+
|
|
239
243
|
/* Forced themes: higher specificity than .header, no !important needed */
|
|
240
244
|
.header.header--force-dark {
|
|
241
245
|
--bg-color: var(--d-bg, rgba(0, 0, 0, 0.823));
|
|
@@ -254,6 +258,19 @@ const forcedClass = preset !== "auto" ? `header--force-${preset}` : "";
|
|
|
254
258
|
--backdrop-blur: var(--l-blur, blur(30px));
|
|
255
259
|
background-color: var(--bg-color);
|
|
256
260
|
}
|
|
261
|
+
.dark{
|
|
262
|
+
|
|
263
|
+
--bg-color: var(--l-bg, rgba(255, 255, 255, 0.748));
|
|
264
|
+
|
|
265
|
+
}
|
|
266
|
+
.header.header--force-auto {
|
|
267
|
+
--bg-color: var(--l-bg);
|
|
268
|
+
--bg-color-opaque: var(--l-bg-opaque, rgba(255, 255, 255, 0.748));
|
|
269
|
+
--text-color: var(--l-text, #1a1a1a);
|
|
270
|
+
--accent-color: var(--l-accent, #3e1c71);
|
|
271
|
+
--backdrop-blur: var(--l-blur, blur(20px));
|
|
272
|
+
background-color: var(--bg-color);
|
|
273
|
+
}
|
|
257
274
|
|
|
258
275
|
.header__container {
|
|
259
276
|
width: 100%;
|