MediaWiki:Common.css: Unterschied zwischen den Versionen
Keine Bearbeitungszusammenfassung |
Keine Bearbeitungszusammenfassung |
||
| Zeile 1: | Zeile 1: | ||
/* Das folgende CSS wird für alle Benutzeroberflächen geladen. */ | /* Das folgende CSS wird für alle Benutzeroberflächen geladen. */ | ||
/* | /* ==== Sidebar-Collapser (Vector-2022) ==== */ | ||
.kr-sb .kr-head{ | .kr-sb .kr-head{ | ||
position: relative; | position: relative; | ||
display: flex; align-items: center; gap: .5rem; | |||
/* rechter Gutter: Link endet VOR der Toggle-Zone */ | |||
padding-right: 2.25rem; | |||
} | } | ||
/* Link/Titel | /* Link/Titel normal klickbar */ | ||
.kr-sb .kr-head > a, | .kr-sb .kr-head > a, | ||
.kr-sb .kr-head > .kr-title{ | .kr-sb .kr-head > .kr-title{ pointer-events: auto; } | ||
} | |||
.kr-sb .kr-head > .kr-arrow{ | .kr-sb .kr-head > .kr-arrow{ | ||
position: absolute; top: 50%; right: .25rem; transform: translateY(-50%); | position: absolute; top: 50%; right: .25rem; transform: translateY(-50%); | ||
display: grid; place-items: center; | display: grid; place-items: center; | ||
width: 2rem; height: 2rem; | width: 2rem; height: 2rem; /* große Touch-Fläche */ | ||
border: 0; background: transparent; padding: 0; | border: 0; background: transparent; padding: 0; | ||
cursor: pointer; z-index: 2; | cursor: pointer; z-index: 2; | ||
font-size: 1em; | font-size: 1em; /* gleiche Größe wie Text */ | ||
line-height: 1; | line-height: 1; | ||
} | } | ||
.kr-sb .kr-head > .kr-arrow::before{ | .kr-sb .kr-head > .kr-arrow::before{ | ||
content: "▾"; | content: "▾"; display: block; | ||
transition: transform .15s ease; | transition: transform .15s ease; | ||
} | } | ||
/* Zu = nach links (‹) */ | |||
.kr-sb li.is-collapsed > .kr-head > .kr-arrow::before{ | .kr-sb li.is-collapsed > .kr-head > .kr-arrow::before{ | ||
transform: rotate(90deg); | transform: rotate(-90deg); | ||
} | |||
/* Unsichtbare Klickfläche rechts (gleiche Zone wie Pfeil) */ | |||
.kr-sb .kr-head > .kr-hit{ | |||
position: absolute; top: 50%; right: .125rem; transform: translateY(-50%); | |||
width: 2.25rem; height: 2.25rem; | |||
cursor: pointer; z-index: 1; /* unter dem Button, aber vor dem Link */ | |||
} | } | ||
/* Unterlisten | /* Unterlisten */ | ||
.kr-sb ul.kr-sub{ list-style:none; margin:.25rem 0 .5rem 1rem; padding:0; } | .kr-sb ul.kr-sub{ list-style: none; margin: .25rem 0 .5rem 1rem; padding: 0; } | ||
.kr-sb li.is-collapsed > ul.kr-sub{ display:none; } | .kr-sb li.is-collapsed > ul.kr-sub{ display: none; } | ||
.kr-sb .kr-title{ font-weight:600; } | .kr-sb .kr-title{ font-weight: 600; } | ||
Version vom 10. Oktober 2025, 18:15 Uhr
/* Das folgende CSS wird für alle Benutzeroberflächen geladen. */
/* ==== Sidebar-Collapser (Vector-2022) ==== */
.kr-sb .kr-head{
position: relative;
display: flex; align-items: center; gap: .5rem;
/* rechter Gutter: Link endet VOR der Toggle-Zone */
padding-right: 2.25rem;
}
/* Link/Titel normal klickbar */
.kr-sb .kr-head > a,
.kr-sb .kr-head > .kr-title{ pointer-events: auto; }
.kr-sb .kr-head > .kr-arrow{
position: absolute; top: 50%; right: .25rem; transform: translateY(-50%);
display: grid; place-items: center;
width: 2rem; height: 2rem; /* große Touch-Fläche */
border: 0; background: transparent; padding: 0;
cursor: pointer; z-index: 2;
font-size: 1em; /* gleiche Größe wie Text */
line-height: 1;
}
.kr-sb .kr-head > .kr-arrow::before{
content: "▾"; display: block;
transition: transform .15s ease;
}
/* Zu = nach links (‹) */
.kr-sb li.is-collapsed > .kr-head > .kr-arrow::before{
transform: rotate(-90deg);
}
/* Unsichtbare Klickfläche rechts (gleiche Zone wie Pfeil) */
.kr-sb .kr-head > .kr-hit{
position: absolute; top: 50%; right: .125rem; transform: translateY(-50%);
width: 2.25rem; height: 2.25rem;
cursor: pointer; z-index: 1; /* unter dem Button, aber vor dem Link */
}
/* Unterlisten */
.kr-sb ul.kr-sub{ list-style: none; margin: .25rem 0 .5rem 1rem; padding: 0; }
.kr-sb li.is-collapsed > ul.kr-sub{ display: none; }
.kr-sb .kr-title{ font-weight: 600; }