HammWiki

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

← Zum vorherigen Versionsunterschied
Keine Bearbeitungszusammenfassung
KKeine Bearbeitungszusammenfassung
 
(11 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
.infobox{
.infobox{
     background: #f8f8f8;
     background: var(--background-color-neutral-subtle,#f8f9fa);
     border-radius: 6px; /* Abgerundete Ecken */
     border-radius: 6px;
     box-sizing: border-box;
     box-sizing: border-box;
    width: 330px;
     max-width: 330px;
     max-width: 330px;
     overflow: hidden;
     overflow: hidden;
Zeile 19: Zeile 20:
     grid-template-columns: repeat(25, 4%); /* 25-Spalten-Grid für minutiöse Kontrolle, jede Spalte 4 % der Infobox breit */
     grid-template-columns: repeat(25, 4%); /* 25-Spalten-Grid für minutiöse Kontrolle, jede Spalte 4 % der Infobox breit */
     grid-template-rows: repeat(4, auto) 1fr; /* Automatische Höhe für Logo, Grid verbleibender Platz für Bild */
     grid-template-rows: repeat(4, auto) 1fr; /* Automatische Höhe für Logo, Grid verbleibender Platz für Bild */
     width: 100%; /* Container nimmt volle Breite ein */
     width: 100%;
     margin: 0 0 1.8em 0 /* unterer Abstand zum Text der Infobox*/}
     margin: 0 0 1.8em 0;}


.logo img, .bild img {
.logo img, .bild img {
Zeile 30: Zeile 31:
     grid-column: 1 / -1; /* Logo nimmt alle Spalten der Grid ein */
     grid-column: 1 / -1; /* Logo nimmt alle Spalten der Grid ein */
     grid-row: 1 / 5; /* Logo erstreckt sich über 5 Zeilen der Grid */
     grid-row: 1 / 5; /* Logo erstreckt sich über 5 Zeilen der Grid */
     display: flex; /* Logo wird im Grid angeordnet */
     display: flex;
     justify-content: center; /* Zentriert das Logo horizontal */
     justify-content: center;
     align-items: center; /* Zentriert das Logo vertikal */
     align-items: center;
     padding: 6px;
     padding: 6px;
     background: #fff; /* Hintergrundfarbe */
     background: #fff;
     border-radius: 6px; /* Runde Ecken */
     border-radius: 6px;
     box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.25); /* Schatten */
     box-shadow: 0px 2px 12px 0px rgba(0,0,0,0.18);
     max-width: 85%;
     max-width: 85%;
     width: max-content;
     width: max-content;
     height: max-content;}
     height: max-content;}
/* Dark Mode Logo Shadow */
@media screen {
  html.skin-theme-clientpref-night .logo {
    box-shadow: 0 0.4rem 1.2rem rgba(0,0,0,0.6),
                0 0.1rem 0.3rem rgba(0,0,0,0.4);
  }
}
@media screen and (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .logo {
    box-shadow: 0 0.4rem 1.2rem rgba(0,0,0,0.6),
                0 0.1rem 0.3rem rgba(0,0,0,0.4);
  }
}
.logo:hover {
    transform: scale(1.05);
    transition: transform 0.5s ease-in;
    border-color: rgba(0,0,0,0.12);
    z-index: 2; /* Erhöhter z-index beim Hover */
}
/* Dark Mode Logo Hover Shadow */
@media screen {
  html.skin-theme-clientpref-night .logo:hover {
    box-shadow: 0 0.6rem 1.8rem rgba(0,0,0,0.8),
                0 0.2rem 0.6rem rgba(0,0,0,0.5);
  }
}
@media screen and (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .logo:hover {
    box-shadow: 0 0.6rem 1.8rem rgba(0,0,0,0.8),
                0 0.2rem 0.6rem rgba(0,0,0,0.5);
  }
}


.logo img {
.logo img {
Zeile 51: Zeile 89:
     grid-column: 2 / -1; /* Bild erstreckt sich über Spalte 2 bis Ende */
     grid-column: 2 / -1; /* Bild erstreckt sich über Spalte 2 bis Ende */
     grid-row: 4 / -1; /* Bild beginnt in 4. Zeile, um sich mit dem Logo zu überschneiden */}
     grid-row: 4 / -1; /* Bild beginnt in 4. Zeile, um sich mit dem Logo zu überschneiden */}
.bild:hover {
    transform: scale(1.05);
    transition: transform 0.5s ease-in;
    border-color: rgba(0,0,0,0.12);
    z-index: 2; /* Erhöhter z-index beim Hover */
}


.bild img {
.bild img {
Zeile 56: Zeile 101:
     height: auto;
     height: auto;
     margin-bottom: 1.2em;
     margin-bottom: 1.2em;
     height: auto; /* Höhe passt sich dem Seitenverhältnis des Bildes an */
     height: auto;
     border-radius: 6px;
     border-radius: 6px;
     box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.25); /* Schatteneffekt */}
     box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.25); /* Schatteneffekt */}
/* Dark Mode Bild Shadow */
@media screen {
  html.skin-theme-clientpref-night .bild img {
    box-shadow: 0 0.4rem 1.2rem rgba(0,0,0,0.7),
                0 0.1rem 0.4rem rgba(0,0,0,0.5);
  }
}
@media screen and (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .bild img {
    box-shadow: 0 0.4rem 1.2rem rgba(0,0,0,0.7),
                0 0.1rem 0.4rem rgba(0,0,0,0.5);
  }
}


/* Aspekt-Gruppen */
/* Aspekt-Gruppen */
Zeile 65: Zeile 125:
     margin: 0.8em 0 0 0;
     margin: 0.8em 0 0 0;
     padding: 0.4em 0 0 0;
     padding: 0.4em 0 0 0;
     border-top: 1px solid #ccc;}
     border-top: 1px solid var(--border-color-muted)}


.infobox .first{
.infobox .first{
Zeile 92: Zeile 152:
     text-align: left;  
     text-align: left;  
     line-height: 1.3;  
     line-height: 1.3;  
     background: #fff;
     background: var(--background-color-base,#fff);
    color: #212121;
     padding: 0.55em 0.8em 0.55em 0.8em;
     padding: 0.55em 0.8em 0.55em 0.8em;
     font-size: 1.2em;
     font-size: 1.2em;
Zeile 101: Zeile 160:
     max-width: 85%;}
     max-width: 85%;}


/* Stil für den Titel der Infobox, wenn kein Logo vorhanden ist */
/* Dark Mode Title Shadow */
@media screen {
  html.skin-theme-clientpref-night .infobox .title {
    box-shadow: 0 0.4rem 1.2rem rgba(0,0,0,0.6),
                0 0.1rem 0.3rem rgba(0,0,0,0.4);
  }
}
 
@media screen and (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .infobox .title {
    box-shadow: 0 0.4rem 1.2rem rgba(0,0,0,0.6),
                0 0.1rem 0.3rem rgba(0,0,0,0.4);
  }
}
 
/* Titel-Stil, wenn kein Logo vorhanden ist */


.title-no-logo {
.title-no-logo {
     grid-column: 1 / -1; /* Überschrift nimmt alle Spalten ein, wie das Logo */
     grid-column: 1 / -1; /* Überschrift nimmt alle Spalten ein, wie das Logo */
     grid-row: 1 / 5; /* Überschrift erstreckt sich über dieselben Zeilen wie das Logo */
     grid-row: 1 / 5; /* Überschrift erstreckt sich über dieselben Zeilen wie das Logo */
     display: flex; /* Flexibles Layout für Zentrierung */
     display: flex;
     justify-content: center; /* Zentriert den Text horizontal */
     justify-content: center;
     align-items: center; /* Zentriert den Text vertikal */
     align-items: center;
     z-index: 2; /* Stellt sicher, dass die Überschrift über dem Bild liegt */
     z-index: 2; /* Stellt sicher, dass die Überschrift über dem Bild liegt */
     background: #fff;
     background: var(--background-color-base,#fff);
     border-radius: 6px; /* Runde Ecken */
     border-radius: 6px;
     box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.25); /* Schatten für Hervorhebung */
     box-shadow: 0px 2px 12px 0px rgba(0,0,0,0.18);
     padding: 6px;
     padding: 6px;
     max-width: 85%;
     max-width: 85%;
Zeile 120: Zeile 194:
     font-weight: bold;
     font-weight: bold;
     line-height: 1.6;}
     line-height: 1.6;}
/* Dark Mode Title-no-logo Shadow */
@media screen {
  html.skin-theme-clientpref-night .title-no-logo {
    box-shadow: 0 0.4rem 1.2rem rgba(0,0,0,0.6),
                0 0.1rem 0.3rem rgba(0,0,0,0.4);
  }
}
@media screen and (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .title-no-logo {
    box-shadow: 0 0.4rem 1.2rem rgba(0,0,0,0.6),
                0 0.1rem 0.3rem rgba(0,0,0,0.4);
  }
}


.title-no-logo.overlap {
.title-no-logo.overlap {
     background: #fff;
     background: var(--background-color-base,#fff);
     z-index: 2;}
     z-index: 2;}


Zeile 136: Zeile 225:
     text-align: left;   
     text-align: left;   
     background: #fff;
     background: #fff;
     box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.25);
     box-shadow: 0px 2px 12px 0px rgba(0,0,0,0.18);
     padding: 0.4em 0.8em 0.4em 0.8em;
     padding: 0.4em 0.8em 0.4em 0.8em;
     font-size: 1.2em;
     font-size: 1.2em;
     font-weight: bold;
     font-weight: bold;
     line-height: 1.6;
     line-height: 1.6;}
     color: #000;}
 
/* Dark Mode Title-no-img Shadow */
@media screen {
  html.skin-theme-clientpref-night .infobox .title-no-img {
     box-shadow: 0 0.4rem 1.2rem rgba(0,0,0,0.6),
                0 0.1rem 0.3rem rgba(0,0,0,0.4);
  }
}
 
@media screen and (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .infobox .title-no-img {
    box-shadow: 0 0.4rem 1.2rem rgba(0,0,0,0.6),
                0 0.1rem 0.3rem rgba(0,0,0,0.4);
  }
}


.infobox .motto{
.infobox .motto{
Zeile 157: Zeile 260:
     border-radius: 6px;
     border-radius: 6px;
     box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.25);}
     box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.25);}
/* Dark Mode Map Container Shadow */
@media screen {
  html.skin-theme-clientpref-night .infobox .map-container {
    box-shadow: 0 0.4rem 1.2rem rgba(0,0,0,0.7),
                0 0.1rem 0.4rem rgba(0,0,0,0.5);
  }
}
@media screen and (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .infobox .map-container {
    box-shadow: 0 0.4rem 1.2rem rgba(0,0,0,0.7),
                0 0.1rem 0.4rem rgba(0,0,0,0.5);
  }
}


.infobox .karte p{
.infobox .karte p{
Zeile 174: Zeile 292:
     margin-bottom: 0.8em;
     margin-bottom: 0.8em;
     display: block;}
     display: block;}
/* Dark Mode Strassenschild Shadow */
@media screen {
  html.skin-theme-clientpref-night .infobox .strassenschild img {
    box-shadow: 0 0.4rem 1.2rem rgba(0,0,0,0.7),
                0 0.1rem 0.4rem rgba(0,0,0,0.5);
  }
}
@media screen and (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .infobox .strassenschild img {
    box-shadow: 0 0.4rem 1.2rem rgba(0,0,0,0.7),
                0 0.1rem 0.4rem rgba(0,0,0,0.5);
  }
}
.strassenschild:hover {
    transform: scale(1.05);
    transition: transform 0.5s ease-in;
    border-color: rgba(0,0,0,0.12);
    z-index: 2; /* Erhöhter z-index beim Hover */
}


.nocorner img{
.nocorner img{
Zeile 180: Zeile 320:
.infobox .strassenbild{
.infobox .strassenbild{
     margin: 1.2em 0 1.2em 0;}
     margin: 1.2em 0 1.2em 0;}
.strassenbild:hover {
    transform: scale(1.05);
    transition: transform 0.5s ease-in;
    border-color: rgba(0,0,0,0.12);
    z-index: 2; /* Erhöhter z-index beim Hover */
}


.infobox .strassenbild img{
.infobox .strassenbild img{
Zeile 190: Zeile 337:
     margin-bottom: 1.2em;
     margin-bottom: 1.2em;
     display: block;}
     display: block;}
/* Dark Mode Strassenbild Shadow */
@media screen {
  html.skin-theme-clientpref-night .infobox .strassenbild img {
    box-shadow: 0 0.4rem 1.2rem rgba(0,0,0,0.7),
                0 0.1rem 0.4rem rgba(0,0,0,0.5);
  }
}
@media screen and (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .infobox .strassenbild img {
    box-shadow: 0 0.4rem 1.2rem rgba(0,0,0,0.7),
                0 0.1rem 0.4rem rgba(0,0,0,0.5);
  }
}


.infobox .unter_logo{
.infobox .unter_logo{
Zeile 196: Zeile 358:
.infobox .strassenbild p{
.infobox .strassenbild p{
     margin: -0.5em 0 0 0;
     margin: -0.5em 0 0 0;
    color: #AAA;
     font-size: 11px;}
     font-size: 11px;}


Zeile 214: Zeile 375:
     padding: 0 2% 0 0;
     padding: 0 2% 0 0;
     font-weight: bold;
     font-weight: bold;
    color: #333;
     display: flex;}
     display: flex;}


Zeile 227: Zeile 387:
     width: 100%;
     width: 100%;
     padding: 2em 2.5em;}
     padding: 2em 2.5em;}
 
 
.infobox .title{
.infobox .title{
     max-width: 75% !important;     
     max-width: 75% !important;     
Zeile 348: Zeile 508:


/* Toggle */
/* Toggle */
body.skin-minerva .mw-collapsible-toggle{
    display: none !important;}


.infobox .mw-collapsible-toggle {
.infobox .mw-collapsible-toggle {
     width: max-content;
     width: max-content;
     padding: 0 0.5em;
     padding: 0.1rem 0.4rem;
     height: max-content;
     height: max-content;
     background-color: #f8f9fa;
     background-color: var(--background-color-interactive-subtle,#f8f9fa);
     border: 1px solid #f8f9fa;
    box-shadow: rgba(0, 0, 0, .1) 0 2px 2px;
    color: #3c4043;
     border: 1px solid var(--border-color-muted,#dadde3);
     border-radius: 4px;
     border-radius: 4px;
    box-shadow: 0 0 3px #ccc;
     text-align: center;
     text-align: center;
     line-height: 22px;
     line-height: 22px;
     font-size: 100%;
     font-size: 0.8rem;
     cursor: pointer;
     cursor: pointer;
     transition: all .3s;
     transition: all .3s;
Zeile 374: Zeile 530:


.infobox.mw-collapsed .mw-collapsible-toggle:before {
.infobox.mw-collapsed .mw-collapsible-toggle:before {
     content: 'Infobox erweitern';
     content: 'Infobox erweitern';}
    color: #333;}


.infobox:not(.mw-collapsed) .mw-collapsible-toggle:before {
.infobox:not(.mw-collapsed) .mw-collapsible-toggle:before {
     content: 'Minimieren';
     content: 'Minimieren';}
    color: #333;}


.infobox .mw-collapsible-toggle:hover {
.infobox .mw-collapsible-toggle:hover {
     background-color: #f5f5f5;
     background-color: var(--background-color-button-quiet--hover,#F8F9FA);}
     border-color: #dadce0;
 
     box-shadow: rgba(0, 0, 0, .1) 0 1px 1px;}
/* Dark mode minimieren */
@media screen {
  html.skin-theme-clientpref-night .infobox .mw-collapsible-toggle{
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
  }
}
 
@media screen and (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .infobox .mw-collapsible-toggle{
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
  }
}
 
 
/* Dark mode minimieren hover */
@media screen {
  html.skin-theme-clientpref-night .infobox .mw-collapsible-toggle:hover {
    background-color: #3a3a3a;
    border-color: #505050;
  }
}
 
@media screen and (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .infobox .mw-collapsible-toggle:hover {
    background-color: #3a3a3a;
     border-color: #505050;
     box-shadow: 0 1px 4px rgba(0,0,0,0.4);
  }
}
Abgerufen von „https://www.hammwiki.info/wiki/Vorlage:Infobox/style.css“