MediaWiki:Common.css: Unterschied zwischen den Versionen

Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
Zeile 66: Zeile 66:
         display: none;
         display: none;
}
}
 
.collapseButton {                /* 'show'/'hide' buttons created dynamically by the              */
.collapseButton {                /* 'show'/'hide' buttons created dynamically by the              */
         float: right;              /* CollapsibleTables JavaScript in [[MediaWiki:Common.js]] */
         float: right;              /* CollapsibleTables JavaScript in [[MediaWiki:Common.js]] */
Zeile 92: Zeile 92:
sup.reference:target { background-color: #ddeeff; }
sup.reference:target { background-color: #ddeeff; }


 
/* Stylesheet-Ergänzung zu Standard-[[Wikipedia:Navigationsleisten|Navigationsleisten]] */
/* Stylesheet-Ergänzung zu Standard-[[Wikipedia:Navigationsleisten|Navigationsleisten]] */
div.NavFrame {
div.NavFrame {
Zeile 106: Zeile 106:
text-align: center;
text-align: center;
}
}
 
/* Automatisches Verschmelzen, funktioniert nicht im IE 6 */
/* Automatisches Verschmelzen, funktioniert nicht im IE 6 */
div.NavFrame + div.NavFrame {
div.NavFrame + div.NavFrame {
Zeile 119: Zeile 119:
font-weight: bold;
font-weight: bold;
}
}
 
/* Redundant zu .visualClear in shared.css und IE60Fixes.css */
/* Redundant zu .visualClear in shared.css und IE60Fixes.css */
div.NavEnd {
div.NavEnd {
Zeile 181: Zeile 181:
     background: transparent; /* Odd row striping */
     background: transparent; /* Odd row striping */
}
}
 
.collapseButton {          /* 'show'/'hide' buttons created dynamically */
.collapseButton {          /* 'show'/'hide' buttons created dynamically */
     float: right;          /* by the CollapsibleTables javascript in    */
     float: right;          /* by the CollapsibleTables javascript in    */
Zeile 191: Zeile 191:
     width: 6em;            /* the vde links from [[Template:Navbar]],    */
     width: 6em;            /* the vde links from [[Template:Navbar]],    */
}                          /* so they need to be the same width.        */
}                          /* so they need to be the same width.        */
 
.navbar {                  /* Navbox template links */
.navbar {                  /* Navbox template links */
     font-size: 88%;        /* Default font-size */
     font-size: 88%;        /* Default font-size */
Zeile 199: Zeile 199:
     font-size: 100%;      /* Font-size when nested within navbox */
     font-size: 100%;      /* Font-size when nested within navbox */
}
}
 


/* Entfernt underlines von bestimmten Links */
/* Entfernt underlines von bestimmten Links */
Zeile 1.740: Zeile 1.740:
display: flex;
display: flex;
}
}
 
#mp-left {
#mp-left {
/* flex: 1 1 55%; */
/* flex: 1 1 55%; */
flex: 1 1 50%;
flex: 1 1 50%;
margin-right: 2px;
margin-right: 2px;
}
}
 
#mp-right {
#mp-right {
/* flex: 1 1 45%; */
/* flex: 1 1 45%; */
flex: 1 1 50%;
flex: 1 1 50%;
margin-left: 2px;
margin-left: 2px;
Zeile 1.787: Zeile 1.787:
.kat-links a:hover { background:#f8f9fa; }
.kat-links a:hover { background:#f8f9fa; }


/* ===== Biobox – DESKTOP (wie klassische Infobox) ===== */
/* ===== Biobox (override-only, leave existing rules intact) ===== */
.mw-parser-output table.biobox {
.mw-parser-output table.biobox {
  float: right;
   border-collapse: collapse !important;
  width: 240px;
   box-sizing: border-box !important;
  margin: 0 0 1em 1em;
  border: 1px solid #c8ccd1;
  background: #fff;
   border-collapse: collapse;
   box-sizing: border-box;
  font-size: 90%;
}
}
.mw-parser-output table.biobox td,
.mw-parser-output table.biobox .biobox-photo {  
.mw-parser-output table.biobox th {
   padding: 0 !important;  
   border: 0;               /* wie bei vielen Infoboxen */
   border: 0 !important;  
   padding: 0.2em 0.4em;
   background: transparent !important;  
   vertical-align: top;
}
}
.mw-parser-output table.biobox td[colspan="2"] {
.mw-parser-output table.biobox .biobox-photo .biobox-img {
  padding: 0.2em 0.4em;
   display: block !important;
}
  width: 100% !important;
 
   height: auto !important;
/* Bilder laufen nicht über den Rahmen */
   max-width: 100% !important;
.mw-parser-output table.biobox img {
   margin: 0 !important;
   max-width: 100%;
   border: 0 !important;
   height: auto;
   background: transparent !important;
   display: block;
   box-shadow: none !important;
}
 
/* ==== Biobox Reset: Desktop stabil, Mobile korrekt ==== */
 
/* Desktop: klassisch rechts floatend, feste Infoboxbreite */
.mw-parser-output table.biobox {
  float: right;
  clear: right;
  width: 22em;                 /* ~352px wie Standard-Infoboxen */
   margin: 0.5em 0 1em 1em;     /* Abstand zum Fließtext */
   border: 1px solid #c8ccd1;
   background: #fff;
  border-collapse: collapse;
   box-sizing: border-box;      /* verhindert Überlauf durch Padding/Borders */
  font-size: 90%;
  line-height: 1.5;
}
.mw-parser-output table.biobox td,
.mw-parser-output table.biobox th {
  border: 0;
  padding: 0.2em 0.4em;
  vertical-align: top;
  text-align: left;
}
.mw-parser-output table.biobox td[colspan="2"] {
  text-align: center;
}
 
/* Nur das Hauptbild der Biobox – NICHT alle Bilder! */
.mw-parser-output table.biobox .biobox-img img {
  display: block;
  width: 240px;    /* Desktop stabil */
  height: auto;
  margin: 0 auto;  /* mittig in der Zelle */
}
}


/* Vorherige „alles-in-der-Biobox-breit“-Regel unbedingt neutralisieren */
/* Mobile: volle Breite, kein Überstand, Text darunter */
.mw-parser-output table.biobox img {
  max-width: none;
  height: auto;
}
 
/* Mobile: volle Inhaltsbreite, kein Überstand, Text darunter */
@media (max-width: 768px) {
@media (max-width: 768px) {
   .mw-parser-output table.biobox {
   .mw-parser-output table.biobox {
     float: none !important;
     float: none !important;
     clear: both !important;
     clear: both !important;
     width: auto !important;
     width: 100% !important;
     max-width: 100% !important;
     max-width: 100% !important;
     margin: 0 0 1em 0 !important;
     margin: 0 0 1em 0 !important;
   }
   }
  /* Hauptbild mobil auf volle Boxbreite skalieren */
   .mw-parser-output table.biobox .biobox-photo .biobox-img {
   .mw-parser-output table.biobox .biobox-img img {
     width: 100% !important;
     width: 100% !important;
     height: auto !important;
     height: auto !important;
   }
   }
  /* Falls direkt danach eine „Social“-Tabelle mit align=right kommt: entkoppeln */
  .mw-parser-output table.biobox + table[align="right"] {
    float: none !important;
    width: auto !important;
    margin: 0 0 1em 0 !important;
    align: initial !important;
  }
  /* Ersten Absatz sicher unter der Box starten */
  .mw-parser-output > p:first-of-type {
    clear: both !important;
  }
}
/* --- Biobox: Bild ohne Innenrahmen / ohne Hintergrund --- */
.mw-parser-output table.biobox .biobox-photo {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
.mw-parser-output table.biobox .biobox-photo a.image,
.mw-parser-output table.biobox .biobox-photo a.image img {
  display: block;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  margin: 0 auto; /* Bild zentrieren */
}
/* Desktop: Bildbreite klassisch */
.mw-parser-output table.biobox .biobox-photo .biobox-img img {
  width: 240px;
  height: auto;
}
/* Mobil: Bild füllt die Boxbreite */
@media (max-width: 768px) {
  .mw-parser-output table.biobox .biobox-photo .biobox-img img {
    width: 100% !important;
    height: auto !important;
  }
}
/* === BIOBOX-BILD VOLLBREIT & SAUBER === */
.mw-parser-output .biobox-photo-wrapper {
  width: 100%;
  margin: 0;
  padding: 0;
  background: transparent !important;
  border: none !important;
}
.mw-parser-output .biobox-img {
  display: block;
  width: 100% !important;        /* volle Breite der Box */
  height: auto !important;      /* behält Seitenverhältnis */
  max-width: 100% !important;
  border: none !important;      /* kein Rahmen */
  margin: 0 auto !important;
  background: transparent !important;
  box-shadow: none !important;
}
/* Mobil: gleiche Regel, damit das Bild sich nicht verzerrt */
@media (max-width: 768px) {
  .mw-parser-output .biobox-img {
    width: 100% !important;
    height: auto !important;
  }
}
/* === Biobox: Rahmen sauber, Bild wirklich 100% Breite === */
.mw-parser-output table.biobox {
  border-collapse: collapse;      /* verhindert Zwischenraum/„Doppelrahmen“ */
  box-sizing: border-box;
}
/* nur die Fotozelle! */
.mw-parser-output table.biobox .biobox-photo {
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}
/* Wrapper über volle Zellenbreite */
.mw-parser-output table.biobox .biobox-photo-wrapper {
  width: 100%;
  margin: 0;
  padding: 0;
}
/* Nur das Hauptfoto skalieren – NICHT alle Bilder in der Box */
.mw-parser-output table.biobox .biobox-img {
  display: block;
  width: 100% !important;    /* füllt die gesamte Biobox-Breite */
  height: auto !important;    /* Seitenverhältnis bewahren */
  max-width: 100% !important;
  border: none !important;
  margin: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
/* Mobil: Box nicht breiter als Bildschirm, kein Überstand */
@media (max-width: 768px) {
  .mw-parser-output table.biobox {
    float: none !important;
    clear: both !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 1em 0 !important;
  }
  /* Falls direkt daneben eine rechte Social-Table kommt: neutralisieren */
   .mw-parser-output table.biobox + table[align="right"] {
   .mw-parser-output table.biobox + table[align="right"] {
     float: none !important;
     float: none !important;
Zeile 1.984: Zeile 1.827:
     align: initial !important;
     align: initial !important;
   }
   }
  /* Fließtext unter der Biobox beginnen */
   .mw-parser-output > p:first-of-type {
   .mw-parser-output > p:first-of-type {
     clear: both !important;
     clear: both !important;
   }
   }
}
}