MediaWiki:Common.css: Unterschied zwischen den Versionen

K (Schützte „MediaWiki:Common.css“ ([Bearbeiten=Nur Administratoren erlauben] (unbeschränkt) [Verschieben=Nur Administratoren erlauben] (unbeschränkt)))
Zeile 8: Zeile 8:
 
body div#mw-head-base {
 
body div#mw-head-base {
 
   background-color: #E1EEFC;
 
   background-color: #E1EEFC;
 +
}
 +
 +
.toggle-list__toggle {
 +
  display: none;
 +
  cursor: pointer;
 +
}
 +
 +
.toggle-list__list {
 +
  display: block;
 +
}
 +
 +
label.toggle-list__toggle {
 +
  display: none;
 +
}
 +
 +
/* Anpassungen mobile Ansichten */
 +
@media (max-width: 760px) {
 +
  body{
 +
    width: initial;
 +
    margin: 0 0 auto;/*Gebe dem Body den freien Platz*/
 +
  }
 +
  #p-personal{
 +
    margin-top: 199px;/*Das hier ist wegen des Banners*/
 +
  }
 +
 +
  /* Mache das Toggle sichtbar in mobilen Ansichten */
 +
  .toggle-list__toggle {
 +
    display: block;
 +
    cursor: pointer;
 +
    /* Weiteres Styling Umschalter */
 +
    font-size: 1.5em;
 +
    padding: 10px;
 +
    position: fixed;
 +
    top: 199px;/*Das hier ist wegen des Banners*/
 +
    left: 10px;
 +
    z-index: 100;
 +
  }
 +
 +
  label.toggle-list__toggle {
 +
  display: block;
 +
  }
 +
 +
  /*  die Liste nicht sichtbar */
 +
  .toggle-list__list {
 +
    display: none;
 +
    position: absolute;
 +
    top: 50px;
 +
    left: 0;
 +
    width: 100%;
 +
    z-index: 99;
 +
  }
 +
 +
  /* Zeige die Liste, wenn die Checkbox markiert ist */
 +
  #sidebar-input:checked ~ .toggle-list__list {
 +
    display: block;
 +
  }
 
}
 
}

Version vom 12. November 2023, 11:08 Uhr

/* Das folgende CSS wird für alle Benutzeroberflächen geladen. */
body {
  background-color: #E1EEFC;
}
body div#mw-page-base {
  background-color: #E1EEFC!important
}
body div#mw-head-base {
  background-color: #E1EEFC;
}

.toggle-list__toggle {
  display: none;
  cursor: pointer;
}

.toggle-list__list {
  display: block;
}

label.toggle-list__toggle {
  display: none;
}

/* Anpassungen mobile Ansichten */
@media (max-width: 760px) {
  body{
    width: initial;
    margin: 0 0 auto;/*Gebe dem Body den freien Platz*/
  }
  #p-personal{
    margin-top: 199px;/*Das hier ist wegen des Banners*/
  }
 
  /* Mache das Toggle sichtbar in mobilen Ansichten */
  .toggle-list__toggle {
    display: block;
    cursor: pointer;
    /* Weiteres Styling Umschalter */
    font-size: 1.5em;
    padding: 10px;
    position: fixed;
    top: 199px;/*Das hier ist wegen des Banners*/
    left: 10px;
    z-index: 100;
  }
 
  label.toggle-list__toggle {
  display: block;
   }

  /*  die Liste nicht sichtbar */
  .toggle-list__list {
    display: none;
    position: absolute;
    top: 50px;
    left: 0;
    width: 100%;
    z-index: 99;
  }

  /* Zeige die Liste, wenn die Checkbox markiert ist */
  #sidebar-input:checked ~ .toggle-list__list {
    display: block;
  }
}