MediaWiki:Gadget-test.css

/* Seitenelemente ausblenden */
.page-Wikipedia_Hauptseite :is(#contentSub, #contentSub2, #catlinks, #p-wikibase-otherprojects) {
   display: none;
}

/* Darstellung der Hauptseite auf HD-Breitbildschirm */
.skin-minerva.page-Wikipedia_Hauptseite :is(.pre-content, .content) {
   max-width: none;
}

/* 
 * Anpassung Bildschirmbreite: aufgrund der variablen Breite des Inhaltsbereichs
 * im Skin Vector-2022 haben @media-Querys unter gewissen Umständen negative
 * Auswirkungen. @container-Querys sind in TemplateStyles nicht zulässig, deshalb
 * wurden die entsprechenden CSS-Regeln hierher ausgelagert.
 * /
 
/* Container definieren */
#bodyContent {
   container: hauptseite-width-calc-base / inline-size;
}

@media only screen {
   /* klassischer Desktop, zweispaltig; Grundstruktur */
   #spalten {
      overflow:       auto;
      padding-bottom: 1px;
   }
   #links,
   #rechts {
      float: left;
      width: calc(50% - 0.5em - 0.005px);
   }
   #links {
      margin-right: 1em;
   }
   #links .hauptseite-box {
      margin-left: 0;
   }
   #unten {
      clear: both;
   }
   .hauptseite-portale a,
   #schwesterprojekte a {
      font-weight: bold;
   }
   .hauptseite-box {
      width: 100%;
   }
   .hauptseite-box-content,
   .hauptseite-box-title {
      border: #8898BF thin solid;
   }
   .hauptseite-box-title {
      background-color: #D8E8FF;
      margin-bottom:    0;
      margin-top:       0;
      padding:          0.2em 0.8em;
   }
   .hauptseite-box-content,
   .hauptseite-preview-wikidata {
      background-color: var(--dewiki-hintergrundfarbe-basis);
      border-top: none;
      overflow:  auto;
      padding:   0.3em 0.8em 0.3em;
   }
   .hauptseite-mehr {
      font-size:  90%;
      margin: 0.5em 0 0.2em 0;
      text-align: right;
   }
   .hauptseite-audiodesc {
      font-family: monospace;
   }
   .hauptseite-item {
      white-space: nowrap;
   }
   .hauptseite-item-long {
      white-space: normal;
   }
   #oben  .hauptseite-box-title,
   #unten .hauptseite-box-title, 
   .hauptseite-wikipedia-aktuell {
      text-align: center;
   }
}

@container hauptseite-width-calc-base (max-width: 54rem) {
   /* Platzmangel */
   #links,
   #rechts {
      float:        none;
      margin-right: 0;
      width:        auto;
   }
   .hauptseite-box {
      width: 99%;
   }
   .hauptseite-box-content,
   .hauptseite-preview-wikidata {
      border-bottom: none;
      border-left:   none;
      border-right:  none;
      padding:       0.5em 0;
   }
   ul:not(.breadcrumb-nav-container) li:not(.hauptseite-item) {
      margin-left: 0.5em;
   }
   .hauptseite-details,
   .breadcrumb-nav-container > li.hauptseite-details {
      display: none;
   }
   #hauptseite-toc {
      display:       block;
      font-size:     92%;
      line-height:   1.4em;
      margin-bottom: 1em;
   }
   .hauptseite-upward {
      display:     block;
      float:       right;
      margin-left: 2em;
   }
   #oben  .hauptseite-box-title,
   #unten .hauptseite-box-title,
   #willkommen p:first-child,
   .hauptseite-wikipedia-aktuell {
      text-align: left;
   }
}
@container hauptseite-width-calc-base (max-width: 42rem) {
   /* Besonders kleiner Screen */
   #hauptseite-toc {
      display: none;
   }
   #oben .hauptseite-upward {
      display: none;
   }
}
@container hauptseite-width-calc-base (min-width: 180rem) {
   /* Mehr als zweispaltig; 121rem */
   #links {
      float:        none;
      margin-right: 0;
      width:        auto;
   }
   #links-oben,
   #links-unten {
      float: left;
   }
   #oben  .hauptseite-box,
   #unten .hauptseite-box {
      max-width: none;
      width:     auto;
   }
}
@container hauptseite-width-calc-base (min-width: 99999rem) {
   /* Dreispaltig */
   #links-oben,
   #links-unten {
      margin-right: 3%;
      width:        28%;
   }
   #rechts {
      width: 38%;
   }
}
@container hauptseite-width-calc-base (min-width: 180rem) {
   /* Vierspaltig */
   #rechts {
      float: none;
      width: auto;
   }
   #links-oben,
   #links-unten,
   #rechts-oben,
   #rechts-unten {
      width: 23%;
   }
   #links-oben,
   #links-unten,
   #rechts-oben,
   #rechts-unten {
      margin-left:  1%;
      margin-right: 1%;
   }
   #rechts-oben,
   #rechts-unten {
      float: left;
   }
}
@container hauptseite-width-calc-base (min-width: 260rem) {
   /* Fünfspaltig */
   #rechts-unten {
      float: none;
      width: auto;
   }
   #links-oben,
   #links-unten,
   #rechts-oben,
   #rechts-unten-1,
   #rechts-unten-2 {
      margin-left:  1%;
      margin-right: 1%;
      width: 18%;
   }
   #rechts-unten-1,
   #rechts-unten-2 {
      float: left;
   }
   #rechts-unten-2 {
      margin-right: 0;
   }
   .hauptseite-box {
      max-width: 75em;
   }
   #unten .hauptseite-box {
      max-width: none;
   }
}