HammWiki

Vorlage:Hauptseite/style.css: Unterschied zwischen den Versionen

← Zum vorherigen VersionsunterschiedZum nächsten Versionsunterschied →
Anpassungen für den Dark-Mode
K Weitere Anpassungen an Vector2022
Markierung: Zurückgesetzt
Zeile 1: Zeile 1:
/* Header */
/* =============================================================================
  HammWiki Startseite CSS - Optimiert für MediaWiki Vector2022
  Responsive Design mit Dark Mode Support
  ============================================================================= */
 
/* -----------------------------------------------------------------------------
  HEADER BEREICH
  ----------------------------------------------------------------------------- */
.wiki-header {
.wiki-header {
   margin-bottom: 1.25rem;
   margin-bottom: 1.25rem;
Zeile 11: Zeile 18:
}
}


/* Dark Mode */
/* Header Dark Mode - Invertierung für bessere Sichtbarkeit */
@media screen {
@media screen {
   html.skin-theme-clientpref-night .wiki-header img {
   html.skin-theme-clientpref-night .wiki-header img {
Zeile 24: Zeile 31:
}
}


/* Grid (2 Spalten) */
/* -----------------------------------------------------------------------------
  GRID LAYOUT - Responsive 2-Spalten Layout
  ----------------------------------------------------------------------------- */
.content-grid {
.content-grid {
   display: grid;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-template-columns: repeat(2, 1fr);
   gap: 1.25rem;
   gap: 1.25rem;
   max-width: 100vw;
   max-width: 100%; /* Respektiert Container-Grenzen statt Viewport */
  width: 100%;
   overflow: visible;
   overflow: visible;
   box-sizing: border-box;
   box-sizing: border-box;
   padding: 0.5rem;
   padding: 0.5rem;
  margin: 0 auto; /* Zentrierung im verfügbaren Raum */
  position: relative;
  z-index: 0; /* Stacking Context für Hover-Effekte */
}
}


.content-grid > * {
.content-grid > * {
   min-width: 0;
   min-width: 0; /* Verhindert Grid-Overflow */
   overflow-wrap: break-word;
   overflow-wrap: break-word;
}
}


/* Content-Boxen */
/* -----------------------------------------------------------------------------
  CONTENT BOXEN - Hauptcontainer für Inhaltsblöcke
  ----------------------------------------------------------------------------- */
.content-box {
.content-box {
   position: relative;
   position: relative;
Zeile 50: Zeile 65:
}
}


/* Hover-Effekt nur auf größeren Bildschirmen */
@media screen and (min-width: 769px) {
@media screen and (min-width: 769px) {
   .content-box:hover {
   .content-box:hover {
Zeile 59: Zeile 75:
}
}


/* Dark-Mode */
/* Hover-Effekt Dark Mode */
@media screen and (min-width: 769px) {
@media screen and (min-width: 769px) {
   html.skin-theme-clientpref-night .content-box:hover {
   html.skin-theme-clientpref-night .content-box:hover {
Zeile 72: Zeile 88:
}
}


/* Header (Überschrift) */
/* -----------------------------------------------------------------------------
  BOX HEADER - Überschriften der Content-Boxen
  ----------------------------------------------------------------------------- */
.box-header {
.box-header {
   position: relative;
   position: relative;
Zeile 81: Zeile 99:
   border-radius: 6px 6px 0 0;
   border-radius: 6px 6px 0 0;
   margin: 0;
   margin: 0;
   margin-bottom: -5px;
   margin-bottom: -5px; /* Überlappung mit Content-Bereich */
}
 
.box-header h2 {
  font-size: 0.9rem;
  margin: -2px 0 0 0;
  padding: 0;
  font-weight: bold;
  font-family: sans-serif;
  border-bottom: 0;
}
}


/* Head Dark-Mode */
/* Header Dark Mode */
@media screen {
@media screen {
   html.skin-theme-clientpref-night .box-header {
   html.skin-theme-clientpref-night .box-header {
     background: rgba(255,255,255,0.1);
     background: rgba(255,255,255,0.1);
  }
  html.skin-theme-clientpref-night .box-header h2 {
    color: #f0f0f0;
   }
   }
}
}
Zeile 94: Zeile 125:
   html.skin-theme-clientpref-os .box-header {
   html.skin-theme-clientpref-os .box-header {
     background: rgba(255,255,255,0.1);
     background: rgba(255,255,255,0.1);
  }
  html.skin-theme-clientpref-os .box-header h2 {
    color: #f0f0f0;
   }
   }
}
}


/* Content-Bereich */
/* -----------------------------------------------------------------------------
  BOX CONTENT - Hauptinhalt der Content-Boxen
  ----------------------------------------------------------------------------- */
.box-content {
.box-content {
   background: #fff;
   background: #fff;
Zeile 107: Zeile 144:
}
}


/* Abstand-Optimierung für letzte Paragraphen */
.box-content p:last-child {
.box-content p:last-child {
   margin-bottom: 0;
   margin-bottom: 0;
Zeile 119: Zeile 157:
}
}


/* Content Dark-Mode */
/* Content Dark Mode */
@media screen {
@media screen {
   html.skin-theme-clientpref-night .box-content {
   html.skin-theme-clientpref-night .box-content {
Zeile 138: Zeile 176:
}
}


/* -----------------------------------------------------------------------------
  BILDER - Styling für verschiedene Bildtypen
  ----------------------------------------------------------------------------- */
/* Standard-Bilder in Content-Boxen */
.box-content:not(.photos) img {
.box-content:not(.photos) img {
   border-radius: 10px;
   border-radius: 10px;
Zeile 146: Zeile 188:
}
}


/* Bilder innerhalb von Text */
.within img {
.within img {
   margin-top: 0 !important;
   margin-top: 0 !important;
}
}


/* Spezielle Behandlung für Förderverein-Logo */
.foerderverein img {
.foerderverein img {
   width: auto !important;
   width: auto !important;
Zeile 160: Zeile 204:
}
}


.box-header h2 {
/* Foto-Galerien */
  font-size: 0.9rem;
  margin: -2px 0 0 0;
  padding: 0;
  font-weight: bold;
  font-family: sans-serif;
  border-bottom: 0;
}
 
/* Head-Text Dark Mode */
@media screen {
  html.skin-theme-clientpref-night .box-header h2 {
    color: #f0f0f0;
  }
}
 
@media screen and (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .box-header h2 {
    color: #f0f0f0;
  }
}
 
/* Bilder */
.photos {
.photos {
   position: relative;
   position: relative;
Zeile 200: Zeile 222:
}
}


/* Dark Mode Foto-Schatten */
/* Foto-Schatten Dark Mode */
@media screen {
@media screen {
   html.skin-theme-clientpref-night .photos img {
   html.skin-theme-clientpref-night .photos img {
Zeile 220: Zeile 242:
}
}


/* Stimmen zum HammWiki */
/* -----------------------------------------------------------------------------
  TESTIMONIALS - Zitate und Stimmen
  ----------------------------------------------------------------------------- */
.testimonial {
.testimonial {
   margin: 1.5rem 0;
   margin: 1.5rem 0;
Zeile 235: Zeile 259:
   margin: 0 !important;
   margin: 0 !important;
   height: auto !important;
   height: auto !important;
}
.author, .highlight-marker {
  margin: 0 0 0.5rem 0;
  line-height: 1.7;
  border-bottom: 2px solid #80dbfb;
}
.author a:hover, .highlight-marker a:hover {
  text-decoration: none;
  color: #f97547;
}
.warning-marker {
  margin: 0 0 0.5rem 0;
  line-height: 1.7;
  border-bottom: 2px solid #ff0f0f;
}
/* Warnung Dark-Mode */
@media screen {
  html.skin-theme-clientpref-night .warning-marker {
    border-bottom-color: #ff6b6b;
  }
}
@media screen and (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .warning-marker {
    border-bottom-color: #ff6b6b;
  }
}
}


Zeile 271: Zeile 265:
}
}


/* Subtiler Text Dark-Mode */
/* Testimonial Dark Mode */
@media screen {
@media screen {
   html.skin-theme-clientpref-night .testimonial .author small {
   html.skin-theme-clientpref-night .testimonial .author small {
Zeile 294: Zeile 288:
}
}


/* Zitat Dark-Mode */
/* Zitat Dark Mode */
@media screen {
@media screen {
   html.skin-theme-clientpref-night .testimonial .quote {
   html.skin-theme-clientpref-night .testimonial .quote {
Zeile 309: Zeile 303:
}
}


/* Links und Highlights */
/* -----------------------------------------------------------------------------
.more-link {
  MARKER UND HIGHLIGHTS - Hervorhebungen
   text-align: right;
  ----------------------------------------------------------------------------- */
   width: 100%;
.author, .highlight-marker {
   margin: 1rem 0 0;
  margin: 0 0 0.5rem 0;
  line-height: 1.7;
  border-bottom: 2px solid #80dbfb;
}
 
.author a:hover, .highlight-marker a:hover {
   text-decoration: none;
   color: #f97547;
}
 
.warning-marker {
   margin: 0 0 0.5rem 0;
  line-height: 1.7;
  border-bottom: 2px solid #ff0f0f;
}
 
/* Warnung Dark Mode */
@media screen {
  html.skin-theme-clientpref-night .warning-marker {
    border-bottom-color: #ff6b6b;
  }
}
}


.photo-content .more-link {
@media screen and (prefers-color-scheme: dark) {
  width: 85%;
  html.skin-theme-clientpref-os .warning-marker {
    border-bottom-color: #ff6b6b;
  }
}
}


/* Nächster Stammtisch */
/* -----------------------------------------------------------------------------
  STAMMTISCH - Nächster Termin Box
  ----------------------------------------------------------------------------- */
.next-meeting {
.next-meeting {
   display: inline-block;
   display: inline-block;
Zeile 334: Zeile 352:
}
}


/* Stammtisch Dark-Mode */
/* Stammtisch Dark Mode */
@media screen {
@media screen {
   html.skin-theme-clientpref-night .next-meeting {
   html.skin-theme-clientpref-night .next-meeting {
Zeile 347: Zeile 365:
     box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 5px;
     box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 5px;
   }
   }
}
/* -----------------------------------------------------------------------------
  BUTTONS UND LINKS - Interaktive Elemente
  ----------------------------------------------------------------------------- */
.more-link {
  text-align: right;
  width: 100%;
  margin: 1rem 0 0;
}
.photo-content .more-link {
  width: 85%;
}
}


Zeile 369: Zeile 400:
}
}


/* Weitere-Buttons Dark-Mode */
.more-link a:hover {
  background-color: #f0f0f0;
  border-color: #dadce0;
  box-shadow: 0 1px 4px rgba(128,128,128,0.5);
  text-decoration: none;
}
 
/* Button Dark Mode */
@media screen {
@media screen {
   html.skin-theme-clientpref-night .more-link a {
   html.skin-theme-clientpref-night .more-link a {
Zeile 376: Zeile 414:
     color: #6bb6ff;
     color: #6bb6ff;
     box-shadow: 0 0 3px rgba(0,0,0,0.3);
     box-shadow: 0 0 3px rgba(0,0,0,0.3);
  }
  html.skin-theme-clientpref-night .more-link a:hover {
    background-color: #3a3a3a;
    border-color: #505050;
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
   }
   }
}
}
Zeile 386: Zeile 430:
     box-shadow: 0 0 3px rgba(0,0,0,0.3);
     box-shadow: 0 0 3px rgba(0,0,0,0.3);
   }
   }
}
.more-link a:hover {
  background-color: #f0f0f0;
  border-color: #dadce0;
  box-shadow: 0 1px 4px rgba(128,128,128,0.5);
  text-decoration: none;
}
/* Button-Hover Dark-Mode */
@media screen {
  html.skin-theme-clientpref-night .more-link a:hover {
    background-color: #3a3a3a;
    border-color: #505050;
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
  }
}


@media screen and (prefers-color-scheme: dark) {
   html.skin-theme-clientpref-os .more-link a:hover {
   html.skin-theme-clientpref-os .more-link a:hover {
     background-color: #3a3a3a;
     background-color: #3a3a3a;
Zeile 412: Zeile 438:
}
}


/* -----------------------------------------------------------------------------
  UNTERTITEL UND ZUSATZTEXTE
  ----------------------------------------------------------------------------- */
.startpage-subtitle {
.startpage-subtitle {
   font-size: 0.8rem !important;
   font-size: 0.8rem !important;
Zeile 418: Zeile 447:
}
}


/* Dark Mode Untertitel */
/* Untertitel Dark Mode */
@media screen {
@media screen {
   html.skin-theme-clientpref-night .startpage-subtitle {
   html.skin-theme-clientpref-night .startpage-subtitle {
Zeile 431: Zeile 460:
}
}


/* Barrierefreiheit */
/* -----------------------------------------------------------------------------
  BARRIEREFREIHEIT - Fokus-Indikatoren
  ----------------------------------------------------------------------------- */
:focus {
:focus {
   outline: 3px solid #0066cc;
   outline: 3px solid #0066cc;
Zeile 437: Zeile 468:
}
}


/* Dark Mode Focus */
/* Focus Dark Mode */
@media screen {
@media screen {
   html.skin-theme-clientpref-night :focus {
   html.skin-theme-clientpref-night :focus {
Zeile 450: Zeile 481:
}
}


/* Z-Index Stacking Context */
/* -----------------------------------------------------------------------------
.content-grid {
  RESPONSIVE DESIGN - Media Queries
  position: relative;
  ----------------------------------------------------------------------------- */
  z-index: 0;
}


/* Media Queries */
/* Große Bildschirme - Reduzierter Gap */
@media screen and (min-width: 1240px) {
@media screen and (min-width: 1240px) {
   .content-grid {
   .content-grid {
     gap: 1rem;
     gap: 1rem;
    max-width: calc(100% - 1rem);
   }
   }
}
}


/* Mittlere Bildschirme - Angepasste Paddings */
@media screen and (max-width: 900px) {
@media screen and (max-width: 900px) {
   .box-content {
   .box-content {
Zeile 471: Zeile 502:
     padding: 0 !important;
     padding: 0 !important;
   }
   }
}
}


/* Tablets - Wechsel zu einspaltigem Layout */
@media screen and (max-width: 768px) {
@media screen and (max-width: 768px) {
   .content-grid {
   .content-grid {
     grid-template-columns: 1fr;
     grid-template-columns: 1fr;
     max-width: calc(100vw - 2rem);
     max-width: 100%;
     margin: 0 auto;
     margin: 0 auto;
    padding: 0.25rem;
   }
   }


Zeile 495: Zeile 527:
}
}


/* Smartphones - Optimierte Darstellung */
@media screen and (max-width: 480px) {
@media screen and (max-width: 480px) {
  /* Artikel-Erstellung Box */
   #create-article-header + .box-content {
   #create-article-header + .box-content {
     padding-left: 0.6rem;
     padding-left: 0.6rem;
     padding-right: 0.6rem;
     padding-right: 0.6rem;
   }
   }
  /* Button-Optimierungen */
   .cdx-button,  
   .cdx-button,  
   input[type="submit"].cdx-button,  
   input[type="submit"].cdx-button,  
Zeile 507: Zeile 543:
     min-width: 6em;
     min-width: 6em;
   }
   }
  /* Input-Feld Optimierungen */
   .cdx-text-input {
   .cdx-text-input {
     min-width: 0 !important;
     min-width: 0 !important;
Zeile 512: Zeile 550:
     box-sizing: border-box;
     box-sizing: border-box;
   }
   }
   .mw-inputbox-centered,
   .mw-inputbox-centered,
   .mw-inputbox-form-inline {
   .mw-inputbox-form-inline {
Zeile 517: Zeile 556:
     box-sizing: border-box;
     box-sizing: border-box;
   }
   }
   .mw-inputbox-createbox {
   .mw-inputbox-createbox {
     width: 99% !important;
     width: 99% !important;
Zeile 522: Zeile 562:
     box-sizing: border-box;
     box-sizing: border-box;
   }
   }
  .testimonial {
 
  /* Testimonial-Anpassungen */
  .testimonial {
     padding-left: 0.75rem;
     padding-left: 0.75rem;
   }
   }
   .testimonial img {
   .testimonial img {
     margin: 0 0 0.5rem 0.75rem;
     margin: 0 0 0.5rem 0.75rem;
   }
   }
  /* Vollbreite Bilder auf kleinen Bildschirmen */
   .box-content:not(.photos) img {
   .box-content:not(.photos) img {
     width: 100% !important;
     width: 100% !important;
Zeile 533: Zeile 578:
}
}


/* Für Drucker */
/* -----------------------------------------------------------------------------
  PRINT STYLES - Druckoptimierung
  ----------------------------------------------------------------------------- */
@media print {
@media print {
   .container {
   .container {
Zeile 560: Zeile 607:
   }
   }


  /* Link-URLs im Druck anzeigen */
   a[href]:after {
   a[href]:after {
     content: " (" attr(href) ")";
     content: " (" attr(href) ")";
Abgerufen von „https://www.hammwiki.info/wiki/Vorlage:Hauptseite/style.css“