DogFatherGit/dogfather-universe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Sprachschalter-Dropdown: schwarzer Hintergrund + silberner Polarlicht-Rand

Browse Source 
Panel-Hintergrund jetzt sattes Schwarz statt sprachfarbig eingefärbt,
Rand silbern mit pulsierendem Glow (statt der Sprachfarbe) - hebt den
Kasten klar von der bunten Kugel/Schrift jeder Zeile ab. Hover/aktive
Zeile jetzt neutral silbrig-transparent statt bunt eingefärbt, farbiger
linker Rand pro Sprache bleibt als Erkennungsmerkmal erhalten.
This commit is contained in:
DogFatherGit
2026-08-02 01:08:10 +02:00
parent 59dea3becd
commit d91e3144ee
1 changed files with 21 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/main.css
+21 -5
View File
@@ -252,16 +252,32 @@ header.site-header {
transform: none; transform: none;
padding: .4rem; padding: .4rem;
border-radius: 14px; border-radius: 14px;
border-color: color-mix(in srgb, var(--sprach-glut) 45%, var(--border)); border: 1px solid rgba(210, 216, 224, .55);
background: color-mix(in srgb, var(--card-bg) 92%, var(--sprach-glut) 8%); background: rgba(4, 5, 8, .96);
box-shadow: 0 14px 34px rgba(0, 0, 0, .5), 0 0 26px color-mix(in srgb, var(--sprach-glut) 25%, transparent); box-shadow:
0 14px 34px rgba(0, 0, 0, .6),
0 0 16px rgba(220, 226, 235, .35),
0 0 34px rgba(190, 200, 215, .18);
transform-origin: top right; transform-origin: top right;
animation: sprach-dropdown-in .18s ease both; animation: sprach-dropdown-in .18s ease both, sprach-silber-puls 3.6s ease-in-out infinite;
} }
@keyframes sprach-dropdown-in { @keyframes sprach-dropdown-in {
from { opacity: 0; transform: translateY(-6px) scale(.96); } from { opacity: 0; transform: translateY(-6px) scale(.96); }
to { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 1; transform: translateY(0) scale(1); }
} }
/* Silberner Polarlicht-Schein um den Dropdown-Rand — bewusst neutral
silber statt farbig, damit sich der schwarze Kasten von der bunten
Kugel/Schrift jeder Sprache klar abhebt statt zu verschwimmen. */
@keyframes sprach-silber-puls {
0%, 100% {
border-color: rgba(210, 216, 224, .5);
box-shadow: 0 14px 34px rgba(0, 0, 0, .6), 0 0 14px rgba(220, 226, 235, .3), 0 0 30px rgba(190, 200, 215, .15);
}
50% {
border-color: rgba(235, 239, 244, .9);
box-shadow: 0 14px 34px rgba(0, 0, 0, .6), 0 0 22px rgba(230, 235, 242, .55), 0 0 46px rgba(200, 210, 224, .3);
}
}
.sprach-schalter .nav-dropdown a { .sprach-schalter .nav-dropdown a {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -273,7 +289,7 @@ header.site-header {
} }
.sprach-schalter .nav-dropdown a:hover, .sprach-schalter .nav-dropdown a:hover,
.sprach-schalter .nav-dropdown a.active { .sprach-schalter .nav-dropdown a.active {
background: color-mix(in srgb, var(--sprach-glut) 20%, var(--bg-alt)); background: rgba(255, 255, 255, .09);
border-left-color: var(--sprach-glut); border-left-color: var(--sprach-glut);
transform: translateX(2px); transform: translateX(2px);
} }