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

Konto-Dropdown: echt zentriert unterm Knopf + kompakter, wie bei Dogfather

Browse Source 
War rechtsbündig an der Knopfkante ausgerichtet, dadurch je nach Länge des Benutzernamens
optisch "nicht zentriert" zum Knopf. Jetzt wie auf der Dogfather-Referenzseite
(.nav-dropdown: left:50% + translateX(-50%)) — bleibt immer exakt mittig unterm Knopf.
Dropdown-Einträge außerdem etwas kompakter (kleinere Schrift/Padding, näher an der
Dogfather-Vorlage) statt für nur zwei Einträge unnötig groß zu wirken. Per Geometrie-Messung
verifiziert: 0px Abweichung zwischen Knopf- und Dropdown-Mitte.

Co-Authored-By: Claude Sonnet 5 <[email protected]>
This commit is contained in:
qcigano
2026-08-03 22:28:53 +02:00
co-authored by Claude Sonnet 5
parent e2b89483c2
commit 35ddc5cda8
1 changed files with 13 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/global.css
+13 -6
View File
@@ -659,8 +659,13 @@ a:focus-visible, button:focus-visible {
.account-dropdown { .account-dropdown {
position: absolute; position: absolute;
top: calc(100% + 0.6rem); top: calc(100% + 0.6rem);
right: 0; /* Wie auf der Dogfather-Referenzseite (assets/css/main.css, .nav-dropdown): ECHT zentriert
min-width: 180px; unter dem auslösenden Knopf (left:50% + translateX(-50%)) statt rechtsbündig an dessen
Kante ausgerichtet — bleibt so auch bei unterschiedlich breiten Benutzernamen mittig. */
left: 50%;
right: auto;
transform: translateX(-50%);
min-width: 190px;
background: var(--c-anthracite-light); background: var(--c-anthracite-light);
border: 1px solid rgba(244, 241, 247, 0.1); border: 1px solid rgba(244, 241, 247, 0.1);
border-radius: var(--radius-m); border-radius: var(--radius-m);
@@ -677,22 +682,24 @@ a:focus-visible, button:focus-visible {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 0.6em; gap: 0.5em;
width: 100%; width: 100%;
text-align: center; text-align: center;
background: none; background: none;
border: none; border: none;
color: var(--c-text); color: var(--c-text);
padding: 0.6em 0.7em; /* Etwas kompakter als vorher (Dogfather-Referenz: .55rem .7rem, .92rem Schrift) — wirkte bei
nur 2 Einträgen sonst unnötig groß/aufgebläht. */
padding: 0.5em 0.65em;
border-radius: var(--radius-s); border-radius: var(--radius-s);
font-size: 0.9rem; font-size: 0.88rem;
cursor: pointer; cursor: pointer;
transition: background 0.15s var(--ease); transition: background 0.15s var(--ease);
} }
/* Feste Icon-Spalte, statt das Emoji einfach vor den Text zu schreiben — sonst starten "Mein /* Feste Icon-Spalte, statt das Emoji einfach vor den Text zu schreiben — sonst starten "Mein
Konto" und "Abmelden" je nach Emoji-Breite an leicht unterschiedlichen Stellen und wirken Konto" und "Abmelden" je nach Emoji-Breite an leicht unterschiedlichen Stellen und wirken
unausgerichtet. Mit fixer Breite + zentriertem Icon stehen alle Labels exakt untereinander. */ unausgerichtet. Mit fixer Breite + zentriertem Icon stehen alle Labels exakt untereinander. */
.account-dropdown-icon { flex-shrink: 0; width: 1.2em; text-align: center; } .account-dropdown-icon { flex-shrink: 0; width: 1.1em; text-align: center; font-size: 0.95em; }
.account-dropdown a:hover, .account-dropdown a:hover,
.account-dropdown button:hover { background: color-mix(in srgb, var(--c-accent) 12%, transparent); } .account-dropdown button:hover { background: color-mix(in srgb, var(--c-accent) 12%, transparent); }
@media (max-width: 860px) { @media (max-width: 860px) {