Zum Inhalt springen
Das Halloween-Event (Süßes oder Saures) findet vom 24.10.2025 bis 07.11.2025 statt.

MediaWiki:Common.css: Unterschied zwischen den Versionen

Aus Firestone Idle RPG Wiki
Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
 
(10 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) Pfeil rechts & größer ==== */
/* ==== Sidebar Collapser – kompakt & skin-freundlich ==== */
.kr-sb .kr-head,
.kr-sb .kr-title {
  font: inherit;
  line-height: inherit;
  color: inherit;                /* nur für Texttitel */
}


/* Kopfzeile: Label links, Pfeil rechts */
.kr-sb .kr-head {
.kr-sb .kr-head{
  position: relative;
   display:flex;
   display: flex;
   align-items:center;
   align-items: center;
   gap:.5rem;
   gap: .25rem;
  padding-block: .375rem;        /* gleicher Vertikalabstand wie Vector-Links */
}
}


/* Label bekommt den freien Platz; so drückt es den Pfeil ganz nach rechts */
/* Link im Kopf: NICHT volle Breite einnehmen */
.kr-sb .kr-head > a,
.kr-sb .kr-head > a {
.kr-sb .kr-head > .kr-title{
   padding: 0 !important;
   flex:1 1 auto;
   flex: 0 0 auto;                 /* nur so breit wie der Text */
   min-width:0;
}
}


/* Pfeil: an den rechten Rand, etwas größer + gute Klickfläche */
/* Unterlisten sauber einrücken, ohne Punkte */
.kr-sb .kr-arrow{
.kr-sb ul.kr-sub {
   margin-left:auto;                 /* schiebt den Pfeil nach rechts */
   list-style: none;
   font-size:1.25em;                /* Größe: etwas größer als Text (1.0–1.3em fein) */
   margin: 0;
  inline-size:1.25em;
   padding: 0 0 0 1rem;
  block-size:1.25em;
  display:inline-grid;              /* zentriert das Symbol im Button */
  place-items:center;
  border:0;
  background:transparent;
   padding:.25rem;                  /* größere Touch-Fläche */
  cursor:pointer;
  line-height:1;
}
}
.kr-sb li.is-collapsed > ul.kr-sub { display: none; }


/* Symbol und Rotation */
/* Pfeil ganz rechts mit großer Klickfläche */
.kr-sb .kr-arrow::before{
.kr-sb .kr-arrow {
   content:"▾";
  position: absolute;
   transition:transform .15s ease;
  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 li.is-collapsed > .kr-head > .kr-arrow::before{
.kr-sb .kr-arrow::before {
   transform:rotate(-90deg);
   content: "▾";
}
   display: inline-block;
 
   transition: transform .15s ease;
/* Unterlisten wie gehabt */
.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; }
/* zugeklappt = Pfeil nach links */
.kr-sb li.is-collapsed > .kr-head > .kr-arrow::before { transform: rotate(-90deg); }


/* Titel ohne Link (#group:) */
/* Gesamte Kopfzeile zeigt „Hand“, außer über dem Link selbst handled der Browser das */
.kr-sb .kr-title{ font-weight:600; }
.kr-sb .kr-head.has-toggle { cursor: pointer; }
.kr-sb .kr-head.has-toggle > a { cursor: pointer; }

Aktuelle Version vom 10. Oktober 2025, 19: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; }