Zum Inhalt springen


MediaWiki:Common.css: Unterschied zwischen den Versionen

Aus Firestone Idle RPG Wiki
Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
 
(2 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
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 ==== */
/* ==== 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{
.kr-sb .kr-head {
   position: relative;
   position: relative;
   display: flex; align-items: center; gap: .5rem;
   display: flex;
   padding-right: 2.25rem;             /* Platz für Pfeil/Hit-Zone rechts */
  align-items: center;
  cursor: pointer;                    /* Kopfzeile zeigt Finger */
  gap: .25rem;
   padding-block: .375rem;         /* gleicher Vertikalabstand wie Vector-Links */
}
}


.kr-sb .kr-head > a,
/* Link im Kopf: NICHT volle Breite einnehmen */
.kr-sb .kr-head > .kr-title{ pointer-events: auto; }
.kr-sb .kr-head > a {
 
   padding: 0 !important;
.kr-sb .kr-head > .kr-arrow{
   flex: 0 0 auto;                 /* nur so breit wie der Text */
   position: absolute; top: 50%; right: .25rem; transform: translateY(-50%);
  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° */
/* Unterlisten sauber einrücken, ohne Punkte */
.kr-sb li.is-collapsed > .kr-head > .kr-arrow::before{
.kr-sb ul.kr-sub {
   transform: rotate(90deg);
  list-style: none;
  margin: 0;
   padding: 0 0 0 1rem;
}
}
.kr-sb li.is-collapsed > ul.kr-sub { display: none; }


/* Unsichtbare Hit-Zone rechts – ebenfalls Click/Finger */
/* Pfeil ganz rechts mit großer Klickfläche */
.kr-sb .kr-head > .kr-hit{
.kr-sb .kr-arrow {
   position: absolute; top: 50%; right: .125rem; transform: translateY(-50%);
   position: absolute;
   width: 2.25rem; height: 2.25rem;
  right: 0;
   cursor: pointer; z-index: 1;
  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 {
/* Unterliste */
  content: "▾";
.kr-sb ul.kr-sub{ list-style: none; margin: .25rem 0 .5rem 1rem; padding: 0; }
  display: inline-block;
.kr-sb li.is-collapsed > ul.kr-sub{ display: none; }
   transition: transform .15s ease;
 
/* Konsistenter Abstand zwischen Gruppen/Köpfen – auch wenn zugeklappt */
.kr-sb li.kr-group {
   margin-bottom: .5rem;           /* Abstand NACH Wut, Mana, … */
}
}
/* zugeklappt = Pfeil nach links */
.kr-sb li.is-collapsed > .kr-head > .kr-arrow::before { transform: rotate(-90deg); }


/* Das Unter-UL braucht unten KEINE Luft mehr (sonst doppelt) */
/* Gesamte Kopfzeile zeigt „Hand“, außer über dem Link selbst handled der Browser das */
.kr-sb ul.kr-sub,
.kr-sb .kr-head.has-toggle { cursor: pointer; }
.kr-sb li.kr-top > ul.kr-sub {
.kr-sb .kr-head.has-toggle > a { cursor: pointer; }
  margin: .25rem 0 0 1rem;         /* oben etwas, unten 0; Einzug bleibt */
}
 
/* Einheitlicher Zeilenabstand in Gruppen-Köpfen (egal ob Link oder Text) */
.kr-sb .kr-head {
  padding: .25rem 0;                /* einheitliche Höhe */
}
 
/* Link-Padding, das Vector standardmäßig setzt, im Kopf entfernen */
.kr-sb .kr-head > a {
  padding: 0 !important;            /* sonst hätte der Link-Header mehr Luft */
  line-height: 1.4;                   /* sauberer Textfluss */
}

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; }