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. */ | ||
/* | /* Kopfzeile: rechter Rand ist NUR für den Pfeil reserviert */ | ||
.kr-sb .kr-head{ display:flex; align-items:center; gap:.5rem; } | .kr-sb .kr-head{ | ||
display:flex; align-items:center; gap:.5rem; | |||
position: relative; | |||
padding-right: 2.1rem; /* <- „Gutter“ rechts: Link endet VOR dem Pfeilbereich */ | |||
pointer-events: none; /* Kopf selbst reagiert nicht auf Klicks */ | |||
} | |||
/* | /* Link/Titel bleiben 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; | |||
} | } | ||
/* Pfeil ganz rechts, | /* Pfeil ganz rechts, große Klickfläche, gleiche Schriftgröße wie Text */ | ||
.kr-sb .kr-head > .kr-arrow{ | .kr-sb .kr-head > .kr-arrow{ | ||
pointer-events: auto; | |||
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; | |||
display: | cursor: pointer; z-index: 2; | ||
font-size: 1em; /* exakt wie Textgröße */ | |||
border:0; background:transparent; padding: | line-height: 1; | ||
cursor:pointer | |||
line-height:1; | |||
} | } | ||
/* Symbol | /* Symbol + Richtung (eingeklappt zeigt nach links) */ | ||
.kr-sb .kr-arrow::before{ content:"▾"; transition:transform .15s ease; } | .kr-sb .kr-head > .kr-arrow::before{ | ||
.kr-sb li.is-collapsed > .kr-head > .kr-arrow::before{ transform:rotate(90deg); } | content: "▾"; | ||
display: block; | |||
transition: transform .15s ease; | |||
} | |||
.kr-sb li.is-collapsed > .kr-head > .kr-arrow::before{ | |||
transform: rotate(90deg); | |||
} | |||
/* Unterlisten | /* Unterlisten unverändert */ | ||
.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, 17:59 Uhr
/* Das folgende CSS wird für alle Benutzeroberflächen geladen. */
/* Kopfzeile: rechter Rand ist NUR für den Pfeil reserviert */
.kr-sb .kr-head{
display:flex; align-items:center; gap:.5rem;
position: relative;
padding-right: 2.1rem; /* <- „Gutter“ rechts: Link endet VOR dem Pfeilbereich */
pointer-events: none; /* Kopf selbst reagiert nicht auf Klicks */
}
/* Link/Titel bleiben klickbar */
.kr-sb .kr-head > a,
.kr-sb .kr-head > .kr-title{
pointer-events: auto;
}
/* Pfeil ganz rechts, große Klickfläche, gleiche Schriftgröße wie Text */
.kr-sb .kr-head > .kr-arrow{
pointer-events: auto;
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; /* exakt wie Textgröße */
line-height: 1;
}
/* Symbol + Richtung (eingeklappt zeigt nach links) */
.kr-sb .kr-head > .kr-arrow::before{
content: "▾";
display: block;
transition: transform .15s ease;
}
.kr-sb li.is-collapsed > .kr-head > .kr-arrow::before{
transform: rotate(90deg);
}
/* Unterlisten unverändert */
.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; }