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. */
/* Kopf bleibt Flex */
/* 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 */
}


/* Label/Link links, füllt Breite */
/* 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{
   order:1;
   pointer-events: auto;
  flex:1 1 auto;
  min-width:0;
  padding-right:.5rem;      /* Platz, damit Link nicht unter den Pfeil reicht */
}
}


/* Pfeil ganz rechts, eigene Klickfläche, über dem Link */
/* Pfeil ganz rechts, große Klickfläche, gleiche Schriftgröße wie Text */
.kr-sb .kr-head > .kr-arrow{
.kr-sb .kr-head > .kr-arrow{
   order:2;
   pointer-events: auto;
   margin-left:auto;
   position: absolute; top: 50%; right: .25rem; transform: translateY(-50%);
  flex:0 0 1.4em;           /* fixe Breite */
   display: grid; place-items: center;
  inline-size:1.4em;
  width: 2rem; height: 2rem;    /* große Touch-Fläche */
  block-size:1.4em;
   border: 0; background: transparent; padding: 0;
   display:inline-grid;
   cursor: pointer; z-index: 2;
  place-items:center;
   font-size: 1em;              /* exakt wie Textgröße */
   border:0; background:transparent; padding:.25rem;
   line-height: 1;
   cursor:pointer;
  position:relative; z-index:2;  /* liegt über dem Link */
   line-height:1;
}
}


/* Symbol & Richtung */
/* 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); } /* ◂ nach links */
  content: "▾";
  display: block;
  transition: transform .15s ease;
}
.kr-sb li.is-collapsed > .kr-head > .kr-arrow::before{
  transform: rotate(90deg);
}


/* Unterlisten wie gehabt */
/* 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; }