Sprachumschalter: Globus durch farbige "Länder-Kugel" ersetzt

Kleine Kugel im Sprachschalter nimmt jetzt die Landesfarben der aktuell
gewählten Sprache als Verlauf an (DE: schwarz-rot-gold, CH: rot/weiß,
EN: blau-weiß-rot, FR: blau-weiß-rot, PT: grün-rot) - mit Glanzlicht/
Schatten für einen echten Kugel-Look. Selbe Kugel auch vor jedem Eintrag
im Dropdown, damit die Sprachen auf einen Blick unterscheidbar sind.
This commit is contained in:
2026-08-02 00:44:26 +02:00
parent 2affcccb1d
commit 276a5cf97b
2 changed files with 30 additions and 9 deletions
+20 -2
View File
@@ -194,9 +194,27 @@ header.site-header {
/* Sprachumschalter — schmalerer Dropdown reicht (nur Flagge + 2-stelliges
Kürzel pro Zeile), rechtsbündig statt zentriert, damit er nicht über
den Seitenrand hinausragt. */
.sprach-schalter > button { font-size: 1.02rem; }
.sprach-schalter > button { font-size: 1.02rem; align-items: center; }
.sprach-schalter .nav-dropdown { min-width: 175px; left: auto; right: 0; transform: none; }
.sprach-schalter .nav-dropdown a { display: flex; align-items: center; gap: .5rem; }
.sprach-schalter .nav-dropdown a { display: flex; align-items: center; gap: .6rem; }
/* Kleine "Weltkugel", die die Farben der jeweils aktiven Sprache annimmt
(Landesfarben als Verlauf) statt eines Flaggen-Emojis — Windows stellt
Flaggen-Emojis grundsätzlich nicht als Bild dar (siehe SPRACHEN oben in
main.js), ein selbst eingefärbter Farbverlauf funktioniert dagegen
garantiert überall gleich. Glanzlicht + Schatten sorgen dafür, dass es
wie eine kleine Kugel statt einer flachen Fläche wirkt. */
.sprach-kugel {
display: inline-block;
width: 15px;
height: 15px;
border-radius: 50%;
vertical-align: -2px;
box-shadow:
inset -2px -2px 4px rgba(0, 0, 0, .45),
inset 2px 2px 3px rgba(255, 255, 255, .55),
0 0 5px rgba(0, 0, 0, .35);
flex-shrink: 0;
}
/* "Bewerben" ist der Treffpunkt beider Welten (Team Dogi + Spicy Media) —
deshalb bewusst FEST babyblau + rot, unabhängig vom Theme der gerade