DogFatherGit/vans-diy-bastelbedarf
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

Sprach-Umschalter: lila Rand passend zur Seite + dezenter mehrfarbiger 'Polarlicht'-Schimmer um den Globus statt hartem Einzelfarbring

Browse Source
This commit is contained in:
qcigano
2026-08-02 16:37:01 +02:00
parent 0855f88c1c
commit 49cf12fd1c
1 changed files with 12 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/global.css
+12 -6
View File
@@ -349,7 +349,7 @@ a:focus-visible, button:focus-visible {
gap: 0.4em;
background:
linear-gradient(155deg, color-mix(in srgb, var(--globe-color) 16%, var(--c-anthracite-light)), color-mix(in srgb, var(--globe-color) 5%, var(--c-anthracite)));
border: 1px solid color-mix(in srgb, var(--globe-color) 42%, rgba(244, 241, 247, 0.14));
border: 1px solid color-mix(in srgb, var(--c-purple-glow) 55%, rgba(244, 241, 247, 0.14));
color: var(--c-text);
border-radius: 999px;
padding: 0.4em 0.85em 0.4em 0.5em;
@@ -362,7 +362,7 @@ a:focus-visible, button:focus-visible {
transition: border-color 0.2s var(--ease), box-shadow 0.25s var(--ease), transform 0.2s var(--ease);
}
.lang-switch-btn:hover {
border-color: color-mix(in srgb, var(--globe-color) 75%, transparent);
border-color: color-mix(in srgb, var(--c-purple-glow) 85%, transparent);
box-shadow:
inset 0 1px 0 color-mix(in srgb, var(--globe-glow, var(--globe-color)) 30%, transparent),
0 6px 18px -6px color-mix(in srgb, var(--globe-color) 70%, transparent);
@@ -435,10 +435,14 @@ a:focus-visible, button:focus-visible {
overflow: hidden;
isolation: isolate;
color: rgba(10, 9, 16, 0.55);
/* Dezenter "Polarlicht"-Schimmer: mehrere weiche, unterschiedlich gefärbte Glow-Schichten
(Lila der Seite + Flaggenfarbe + Akzent-Türkis) statt eines einzelnen harten Farbrings. */
box-shadow:
0 0 0 1px color-mix(in srgb, var(--globe-color, var(--c-accent)) 55%, transparent),
0 0 0 1px color-mix(in srgb, var(--c-purple-glow) 55%, transparent),
0 3px 5px -1px color-mix(in srgb, black 55%, transparent),
0 0 9px 1px color-mix(in srgb, var(--globe-glow, var(--globe-color)) 55%, transparent);
0 0 7px 1px color-mix(in srgb, var(--globe-glow, var(--globe-color)) 40%, transparent),
0 0 13px 3px color-mix(in srgb, var(--c-purple-glow) 22%, transparent),
0 0 18px 4px color-mix(in srgb, var(--c-accent) 12%, transparent);
transition: box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
flex-shrink: 0;
}
@@ -478,9 +482,11 @@ a:focus-visible, button:focus-visible {
.lang-switch-btn:hover .lang-globe,
.lang-switch-menu a:hover .lang-globe {
box-shadow:
0 0 0 1px color-mix(in srgb, var(--globe-color, var(--c-accent)) 70%, transparent),
0 0 0 1px color-mix(in srgb, var(--c-purple-glow) 75%, transparent),
0 3px 6px -1px color-mix(in srgb, black 55%, transparent),
0 0 16px 3px color-mix(in srgb, var(--globe-glow, var(--globe-color)) 80%, transparent);
0 0 10px 2px color-mix(in srgb, var(--globe-glow, var(--globe-color)) 55%, transparent),
0 0 18px 4px color-mix(in srgb, var(--c-purple-glow) 30%, transparent),
0 0 24px 6px color-mix(in srgb, var(--c-accent) 18%, transparent);
transform: scale(1.12);
}