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 – | /* ==== Sidebar Collapser – kompakt & skin-freundlich ==== */ | ||
.kr-sb .kr-head, | .kr-sb .kr-head, | ||
.kr-sb .kr-title { | .kr-sb .kr-title { | ||
font: inherit; | font: inherit; | ||
line-height: inherit; | line-height: inherit; | ||
color: inherit; | color: inherit; /* nur für Texttitel */ | ||
} | } | ||
.kr-sb .kr-head { | .kr-sb .kr-head { | ||
position: relative; | position: relative; | ||
display: flex; | display: flex; | ||
align-items: center; | align-items: center; | ||
padding-block: .375rem; | gap: .25rem; | ||
padding-block: .375rem; /* gleicher Vertikalabstand wie Vector-Links */ | |||
} | } | ||
/* Link im Kopf | /* Link im Kopf: NICHT volle Breite einnehmen */ | ||
.kr-sb .kr-head > a { padding: 0 !important; flex: | .kr-sb .kr-head > a { | ||
padding: 0 !important; | |||
flex: 0 0 auto; /* nur so breit wie der Text */ | |||
} | |||
/* | /* Unterlisten sauber einrücken, ohne Punkte */ | ||
.kr-sb ul.kr-sub { | .kr-sb ul.kr-sub { | ||
list-style: none; | list-style: none; | ||
margin: 0; | margin: 0; | ||
padding: 0 0 0 1rem; | padding: 0 0 0 1rem; | ||
} | } | ||
.kr-sb li.is-collapsed > ul.kr-sub { display: none; } | .kr-sb li.is-collapsed > ul.kr-sub { display: none; } | ||
/* Pfeil ganz rechts | /* Pfeil ganz rechts mit großer Klickfläche */ | ||
.kr-sb .kr-arrow { | .kr-sb .kr-arrow { | ||
position: absolute; | position: absolute; | ||
| Zeile 37: | Zeile 36: | ||
top: 50%; | top: 50%; | ||
transform: translateY(-50%); | transform: translateY(-50%); | ||
width: 2rem; | width: 2rem; /* komfortable Hit-Zone */ | ||
height: 1.6rem; | height: 1.6rem; | ||
border: 0; | border: 0; | ||
| Zeile 48: | Zeile 47: | ||
} | } | ||
.kr-sb .kr-arrow::before { | .kr-sb .kr-arrow::before { | ||
content: "▾"; | content: "▾"; | ||
display: inline-block; | display: inline-block; | ||
transition: transform .15s ease; | transition: transform .15s ease; | ||
} | } | ||
.kr-sb li.is-collapsed > .kr-head > .kr-arrow::before { | /* zugeklappt = Pfeil nach links */ | ||
.kr-sb li.is-collapsed > .kr-head > .kr-arrow::before { transform: rotate(-90deg); } | |||
} | |||
/* | /* Gesamte Kopfzeile zeigt „Hand“, außer über dem Link selbst handled der Browser das */ | ||
.kr-sb .kr- | .kr-sb .kr-head.has-toggle { cursor: pointer; } | ||
.kr-sb .kr-head.has-toggle > a { cursor: pointer; } | |||
} | |||
.kr-sb .kr-head > | |||
Aktuelle Version vom 10. Oktober 2025, 20:48 Uhr
/* Das folgende CSS wird für alle Benutzeroberflächen geladen. */
/* ==== Sidebar Collapser – kompakt & skin-freundlich ==== */
.kr-sb .kr-head,
.kr-sb .kr-title {
font: inherit;
line-height: inherit;
color: inherit; /* nur für Texttitel */
}
.kr-sb .kr-head {
position: relative;
display: flex;
align-items: center;
gap: .25rem;
padding-block: .375rem; /* gleicher Vertikalabstand wie Vector-Links */
}
/* Link im Kopf: NICHT volle Breite einnehmen */
.kr-sb .kr-head > a {
padding: 0 !important;
flex: 0 0 auto; /* nur so breit wie der Text */
}
/* Unterlisten sauber einrücken, ohne Punkte */
.kr-sb ul.kr-sub {
list-style: none;
margin: 0;
padding: 0 0 0 1rem;
}
.kr-sb li.is-collapsed > ul.kr-sub { display: none; }
/* Pfeil ganz rechts mit großer Klickfläche */
.kr-sb .kr-arrow {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 2rem; /* komfortable Hit-Zone */
height: 1.6rem;
border: 0;
background: transparent;
display: grid;
place-items: center;
cursor: pointer;
font-size: 1em;
line-height: 1;
}
.kr-sb .kr-arrow::before {
content: "▾";
display: inline-block;
transition: transform .15s ease;
}
/* zugeklappt = Pfeil nach links */
.kr-sb li.is-collapsed > .kr-head > .kr-arrow::before { transform: rotate(-90deg); }
/* Gesamte Kopfzeile zeigt „Hand“, außer über dem Link selbst handled der Browser das */
.kr-sb .kr-head.has-toggle { cursor: pointer; }
.kr-sb .kr-head.has-toggle > a { cursor: pointer; }