Zum Inhalt springen


MediaWiki:Common.css: Unterschied zwischen den Versionen

Aus Firestone Idle RPG Wiki
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) – v7 ==== */
/* Typografie der Vector-Menülinks übernehmen */
 
.kr-sb .kr-head,
.kr-sb .kr-head{
  position: relative;
  display: flex; align-items: center; gap: .5rem;
  padding-right: 2.25rem;              /* Platz für Pfeil/Hit-Zone rechts */
  cursor: pointer;                    /* Kopfzeile zeigt Finger */
}
 
.kr-sb .kr-head > a,
.kr-sb .kr-head > a,
.kr-sb .kr-head > .kr-title{ pointer-events: auto; }
.kr-sb .kr-title {
 
   font: inherit;               /* Schriftfamilie, -größe, -gewicht vom Skin */
.kr-sb .kr-head > .kr-arrow{
   line-height: inherit;       /* keine eigene Zeilenhöhe setzen */
  position: absolute; top: 50%; right: .25rem; transform: translateY(-50%);
   color: inherit;             /* Farbe vom Skin */
  display: grid; place-items: center;
  width: 2rem; height: 2rem;
  border: 0; background: transparent; padding: 0;
  cursor: pointer; z-index: 2;
   font-size: 1.5em;                     /* an Textgröße gekoppelt */
   line-height: 1;
}
.kr-sb .kr-head > .kr-arrow::before{
   content: "▾"; display: block;
  transition: transform .15s ease;
}
}


/* Zugeklappt: nach LINKS (‹) — 90°, nicht -90° */
/* Den gleichen vertikalen Abstand wie Vector-Links geben */
.kr-sb li.is-collapsed > .kr-head > .kr-arrow::before{
.kr-sb .kr-head {              /* entspricht dem Padding der normalen <a>-Einträge */
   transform: rotate(90deg);
   padding-block: .375rem;     /* reicht in der Praxis; kein Effekt auf Typografie */
}
}


/* Unsichtbare Hit-Zone rechts – ebenfalls Click/Finger */
/* Link-Padding im Kopf entfernen (sonst hätte der Link-Header mehr Luft) */
.kr-sb .kr-head > .kr-hit{
.kr-sb .kr-head > a {
  position: absolute; top: 50%; right: .125rem; transform: translateY(-50%);
   padding: 0 !important;
  width: 2.25rem; height: 2.25rem;
  cursor: pointer; z-index: 1;
}
 
/* Unterliste */
.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; }
 
/* Konsistenter Abstand zwischen Gruppen/Köpfen – auch wenn zugeklappt */
.kr-sb li.kr-group {
  margin-bottom: .5rem;            /* Abstand NACH Wut, Mana, … */
}
 
/* Das Unter-UL braucht unten KEINE Luft mehr (sonst doppelt) */
.kr-sb ul.kr-sub,
.kr-sb li.kr-top > ul.kr-sub {
   margin: .25rem 0 0 1rem;         /* oben etwas, unten 0; Einzug bleibt */
}
}


/* Einheitlicher Zeilenabstand in Gruppen-Köpfen (egal ob Link oder Text) */
/* Pfeil rechts, Größe aus Schrift ableiten */
.kr-sb .kr-head {
.kr-sb .kr-head { display:flex; align-items:center; }
   padding: .25rem 0;                 /* einheitliche Höhe */
.kr-sb .kr-arrow {
   margin-inline-start:auto;
  inline-size: 1em; block-size: 1em;
  border:0; background:transparent; padding:0;
}
}
.kr-sb .kr-arrow::before { content:"▾"; display:inline-block; transition:transform .15s ease; }
.kr-sb li.is-collapsed > .kr-head > .kr-arrow::before { transform: rotate(-90deg); }


/* Link-Padding, das Vector standardmäßig setzt, im Kopf entfernen */
/* Hit-Zone über die Kopfzeile (außer über dem Link) – unverändert */
.kr-sb .kr-head > a {
.kr-sb .kr-head { position:relative; }
   padding: 0 !important;             /* sonst hätte der Link-Header mehr Luft */
.kr-sb .kr-hit {
   line-height: 1.4;                   /* sauberer Textfluss */
   position:absolute; inset:0 2.25em 0 0; /* 2.25em ≈ Pfeilbreite + etwas Luft */
   cursor:pointer;
}
}
.kr-sb .kr-head > :is(a, .kr-title) { position:relative; z-index:1; }

Version vom 10. Oktober 2025, 20:35 Uhr

/* Das folgende CSS wird für alle Benutzeroberflächen geladen. */
/* Typografie der Vector-Menülinks übernehmen */
.kr-sb .kr-head,
.kr-sb .kr-head > a,
.kr-sb .kr-title {
  font: inherit;               /* Schriftfamilie, -größe, -gewicht vom Skin */
  line-height: inherit;        /* keine eigene Zeilenhöhe setzen */
  color: inherit;              /* Farbe vom Skin */
}

/* Den gleichen vertikalen Abstand wie Vector-Links geben */
.kr-sb .kr-head {              /* entspricht dem Padding der normalen <a>-Einträge */
  padding-block: .375rem;      /* reicht in der Praxis; kein Effekt auf Typografie */
}

/* Link-Padding im Kopf entfernen (sonst hätte der Link-Header mehr Luft) */
.kr-sb .kr-head > a {
  padding: 0 !important;
}

/* Pfeil rechts, Größe aus Schrift ableiten */
.kr-sb .kr-head { display:flex; align-items:center; }
.kr-sb .kr-arrow {
  margin-inline-start:auto;
  inline-size: 1em; block-size: 1em;
  border:0; background:transparent; padding:0;
}
.kr-sb .kr-arrow::before { content:"▾"; display:inline-block; transition:transform .15s ease; }
.kr-sb li.is-collapsed > .kr-head > .kr-arrow::before { transform: rotate(-90deg); }

/* Hit-Zone über die Kopfzeile (außer über dem Link) – unverändert */
.kr-sb .kr-head { position:relative; }
.kr-sb .kr-hit {
  position:absolute; inset:0 2.25em 0 0;  /* 2.25em ≈ Pfeilbreite + etwas Luft */
  cursor:pointer;
}
.kr-sb .kr-head > :is(a, .kr-title) { position:relative; z-index:1; }