HammWiki

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

← Zum vorherigen Versionsunterschied
K Weitere Anpassungen an Vector2022
Markierung: Zurückgesetzt
KKeine Bearbeitungszusammenfassung
 
(7 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
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 18: Zeile 11:
}
}


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


/* -----------------------------------------------------------------------------
/* Grid (responsive, 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(auto-fit, minmax(350px, 1fr));
   gap: 1.25rem;
   gap: 1.25rem;
  max-width: 100%; /* Respektiert Container-Grenzen statt Viewport */
   width: 100%;
   width: 100%;
   overflow: visible;
   overflow: visible;
   box-sizing: border-box;
   box-sizing: border-box;
  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; /* Verhindert Grid-Overflow */
   min-width: 0;
   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;
   display: inline-block;
   display: inline-block;
   margin-bottom: 1.5rem;
   margin-bottom: 1.5rem;
  z-index: 1;
   transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), border-color 0.3s ease-in;
   transition: all .3s cubic-bezier(0.165, 0.84, 0.44, 1);
   transform-origin: center;
   transform-origin: center;
}
}


/* 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 {
     transform: scale(1.025);
     transform: scale(1.0125);
     transition: transform 0.5s ease-in;
     transition: transform 0.5s ease-in;
     border-color: rgba(0,0,0,0.12);
     border-color: rgba(0,0,0,0.12);
    z-index: 2;
   }
   }
}
}


/* Hover-Effekt Dark Mode */
/* Dark-Mode Hover-Border */
@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 88: Zeile 69:
}
}


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


/* Header Dark Mode */
/* Head 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 125: Zeile 91:
   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 144: Zeile 104:
}
}


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


/* Content Dark Mode */
/* Content Dark-Mode */
@media screen {
@media screen {
   html.skin-theme-clientpref-night .box-content {
   html.skin-theme-clientpref-night .box-content {
     background: #000;
     background: #000;
     border-color: rgba(255,255,255,0.2);
     border-color: rgba(255,255,255,0.2);
     box-shadow: 0 0.4rem 1.2rem rgba(0,0,0,0.6),  
     box-shadow: 0 0.4rem 1.2rem rgba(0,0,0,0.6),
                 0 0.1rem 0.3rem rgba(0,0,0,0.4);
                 0 0.1rem 0.3rem rgba(0,0,0,0.4);
   }
   }
Zeile 171: Zeile 127:
     background: #000;
     background: #000;
     border-color: rgba(255,255,255,0.2);
     border-color: rgba(255,255,255,0.2);
     box-shadow: 0 0.4rem 1.2rem rgba(0,0,0,0.6),  
     box-shadow: 0 0.4rem 1.2rem rgba(0,0,0,0.6),
                 0 0.1rem 0.3rem rgba(0,0,0,0.4);
                 0 0.1rem 0.3rem rgba(0,0,0,0.4);
   }
   }
}
}


/* -----------------------------------------------------------------------------
  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 188: Zeile 140:
}
}


/* 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 204: Zeile 154:
}
}


/* Foto-Galerien */
.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-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 222: Zeile 194:
}
}


/* Foto-Schatten Dark Mode */
/* Dark Mode Foto-Schatten */
@media screen {
@media screen {
   html.skin-theme-clientpref-night .photos img {
   html.skin-theme-clientpref-night .photos img {
     box-shadow: 0 0.4rem 1.2rem rgba(0,0,0,0.7),  
     box-shadow: 0 0.4rem 1.2rem rgba(0,0,0,0.7),
                 0 0.1rem 0.4rem rgba(0,0,0,0.5);
                 0 0.1rem 0.4rem rgba(0,0,0,0.5);
   }
   }
Zeile 232: Zeile 204:
@media screen and (prefers-color-scheme: dark) {
@media screen and (prefers-color-scheme: dark) {
   html.skin-theme-clientpref-os .photos img {
   html.skin-theme-clientpref-os .photos img {
     box-shadow: 0 0.4rem 1.2rem rgba(0,0,0,0.7),  
     box-shadow: 0 0.4rem 1.2rem rgba(0,0,0,0.7),
                 0 0.1rem 0.4rem rgba(0,0,0,0.5);
                 0 0.1rem 0.4rem rgba(0,0,0,0.5);
   }
   }
Zeile 242: Zeile 214:
}
}


/* -----------------------------------------------------------------------------
/* Stimmen zum HammWiki */
  TESTIMONIALS - Zitate und Stimmen
  ----------------------------------------------------------------------------- */
.testimonial {
.testimonial {
   margin: 1.5rem 0;
   margin: 1.5rem 0;
Zeile 259: Zeile 229:
   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 265: Zeile 265:
}
}


/* Testimonial Dark Mode */
/* Subtiler Text Dark-Mode */
@media screen {
@media screen {
   html.skin-theme-clientpref-night .testimonial .author small {
   html.skin-theme-clientpref-night .testimonial .author small {
Zeile 288: 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 303: Zeile 303:
}
}


/* -----------------------------------------------------------------------------
/* Links und Highlights */
  MARKER UND HIGHLIGHTS - Hervorhebungen
.more-link {
  ----------------------------------------------------------------------------- */
   text-align: right;
.author, .highlight-marker {
   width: 100%;
   margin: 0 0 0.5rem 0;
   margin: 1rem 0 0;
   line-height: 1.7;
   border-bottom: 2px solid #80dbfb;
}
}


.author a:hover, .highlight-marker a:hover {
.main-register a, .main-register a:visited {
  text-decoration: none;
    color: white !important;
  color: #f97547;
    text-decoration: none !important;
}
}


.warning-marker {
.main-register a:hover {
  margin: 0 0 0.5rem 0;
    color: white !important;
  line-height: 1.7;
  border-bottom: 2px solid #ff0f0f;
}
}


/* Warnung Dark Mode */
.photo-content .more-link {
@media screen {
  width: 85%;
  html.skin-theme-clientpref-night .warning-marker {
    border-bottom-color: #ff6b6b;
  }
}
}


@media screen and (prefers-color-scheme: dark) {
/* Nächster Stammtisch */
  html.skin-theme-clientpref-os .warning-marker {
    border-bottom-color: #ff6b6b;
  }
}
 
/* -----------------------------------------------------------------------------
  STAMMTISCH - Nächster Termin Box
  ----------------------------------------------------------------------------- */
.next-meeting {
.next-meeting {
   display: inline-block;
   display: inline-block;
Zeile 352: Zeile 337:
}
}


/* 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 365: Zeile 350:
     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 400: Zeile 372:
}
}


.more-link a:hover {
/* Weitere-Buttons Dark-Mode */
  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 414: Zeile 379:
     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 430: Zeile 389:
     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 438: Zeile 415:
}
}


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


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


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


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


/* -----------------------------------------------------------------------------
/* Media Queries */
  RESPONSIVE DESIGN - Media Queries
  ----------------------------------------------------------------------------- */
 
/* Große Bildschirme - Reduzierter Gap */
@media screen and (min-width: 1240px) {
  .content-grid {
    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 504: Zeile 464:
}
}


/* Tablets - Wechsel zu einspaltigem Layout */
@media screen and (max-width: 768px) {
@media screen and (max-width: 768px) {
   .content-grid {
   .content-grid {
Zeile 510: Zeile 469:
     max-width: 100%;
     max-width: 100%;
     margin: 0 auto;
     margin: 0 auto;
    padding: 0.25rem;
   }
   }


Zeile 527: Zeile 485:
}
}


/* 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 543: Zeile 497:
     min-width: 6em;
     min-width: 6em;
   }
   }
  /* Input-Feld Optimierungen */
   .cdx-text-input {
   .cdx-text-input {
     min-width: 0 !important;
     min-width: 0 !important;
Zeile 550: Zeile 502:
     box-sizing: border-box;
     box-sizing: border-box;
   }
   }
   .mw-inputbox-centered,
   .mw-inputbox-centered,
   .mw-inputbox-form-inline {
   .mw-inputbox-form-inline {
Zeile 556: Zeile 507:
     box-sizing: border-box;
     box-sizing: border-box;
   }
   }
   .mw-inputbox-createbox {
   .mw-inputbox-createbox {
     width: 99% !important;
     width: 99% !important;
Zeile 562: Zeile 512:
     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 578: Zeile 523:
}
}


/* -----------------------------------------------------------------------------
/* Für Drucker */
  PRINT STYLES - Druckoptimierung
  ----------------------------------------------------------------------------- */
@media print {
@media print {
   .container {
   .container {
Zeile 605: Zeile 548:
     max-width: 80%;
     max-width: 80%;
     margin: 0 auto;
     margin: 0 auto;
  }
  /* Link-URLs im Druck anzeigen */
  a[href]:after {
    content: " (" attr(href) ")";
    color: #444;
   }
   }
}
}
Abgerufen von „https://www.hammwiki.info/wiki/Vorlage:Hauptseite/style.css“