HammWiki

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

Vorlage Diskussion

Vorlage:Infobox/style.css (Quelltext anzeigen)

Version vom 16. Juli 2025, 21:23 Uhr

2.320 Bytes hinzugefügt ,  16. Juli 2025
keine Bearbeitungszusammenfassung
KKeine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
Markierung: Manuelle Zurücksetzung
 
(32 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 10: Zeile 10:
     margin: 0 0 1.4em 1.4em;
     margin: 0 0 1.4em 1.4em;
     padding: 1.4em;}
     padding: 1.4em;}
.logo, .bild {
    box-sizing: border-box;}
/* Grid-Container f. Logo & Bild */
.logo-bild-container {
    display: grid;
    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 */
    width: 100%;
    margin: 0 0 1.8em 0;}
.logo img, .bild img {
    height: auto;}
/* Stil für das Logo */
.logo {
    z-index: 2;
    grid-column: 1 / -1; /* Logo nimmt alle Spalten der Grid ein */
    grid-row: 1 / 5; /* Logo erstreckt sich über 5 Zeilen der Grid */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0px 2px 12px 0px rgba(0,0,0,0.18);
    max-width: 85%;
    width: max-content;
    height: max-content;}
.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 */
}
.logo img {
    max-height: 100px;
    max-width: 100%;
    width: auto;}
/* Stil für das Bild*/
.bild {
    width: 100%; /* Nimmt die volle Breite ein */
    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 */}
.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 {
    width: 100%; /* Bild nimmt volle Breite ein */
    height: auto;
    margin-bottom: 1.2em;
    height: auto;
    border-radius: 6px;
    box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.25); /* Schatteneffekt */}
/* Aspekt-Gruppen */


.infobox .aspect-group{
.infobox .aspect-group{
Zeile 15: Zeile 80:
     padding: 0.4em 0 0 0;
     padding: 0.4em 0 0 0;
     border-top: 1px solid #ccc;}
     border-top: 1px solid #ccc;}
.infobox .aspect-group-sub{
    margin: 1.5em 0 0 0;}


.infobox .first{
.infobox .first{
Zeile 24: Zeile 86:
.infobox .notitle{
.infobox .notitle{
     padding-top: 0.8em !important;}
     padding-top: 0.8em !important;}
.infobox .sub{
    border-top: none !important;
    margin: 1.5em 0 0 0 !important;}


.infobox .head{
.infobox .head{
     font-size: 1.1em;
     font-size: 1.1em;
     font-weight: bold;
     font-weight: bold;
    line-height: 1.6;
     margin: 1em 0;
     margin: 1em 0;
     border: 0;
     border: 0;
Zeile 40: Zeile 107:
     line-height: 1.3;  
     line-height: 1.3;  
     background: #fff;
     background: #fff;
     color: #000;
     color: #1a1a1a;
     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;
     font-weight: bold;
     font-weight: bold;
     font-family: sans-serif;
     font-family: sans-serif;
     box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.25);
     box-shadow: 0px 2px 12px 0px rgba(0,0,0,0.18);
     max-width: 85%;}
     max-width: 85%;}
/* Stil für den Titel der Infobox, wenn kein Logo vorhanden ist */
.title-no-logo {
    color: #1a1a1a;
    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 */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2; /* Stellt sicher, dass die Überschrift über dem Bild liegt */
    background: #fff;
    border-radius: 6px;
    box-shadow: 0px 2px 12px 0px rgba(0,0,0,0.18);
    padding: 6px;
    max-width: 85%;
    width: max-content;
    height: max-content;
    font-size: 1.2em;
    font-weight: bold;
    line-height: 1.6;}
.title-no-logo.overlap {
    background: #fff;
    z-index: 2;}
.infobox .title-noshow{
    display: none;}
/* Stil für den Titel der Infobox, wenn kein Bild vorhanden ist */


.infobox .title-no-img{
.infobox .title-no-img{
Zeile 54: Zeile 151:
     text-align: left;   
     text-align: left;   
     background: #fff;
     background: #fff;
     color: #000;
     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;
     box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.25);}
     line-height: 1.6;
 
     color: #1a1a1a}
.infobox .title-noshow{
     display: none;}


.infobox .motto{
.infobox .motto{
     font-size: 120% !important;
     font-size: 115% !important;
     font-weight: normal;
     font-weight: normal;
     padding: 0;
     padding: 0;
     margin: 2.2em 0 0 0;
     margin: 0;
     font-style: italic !important;
     font-style: italic !important;
     text-align: center;}
     text-align: left;}


.infobox .media-container{
.infobox .media-container{
Zeile 75: Zeile 170:


.infobox .map-container{
.infobox .map-container{
    margin: 0;
     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);}
    height: max-content;}
 
.infobox .map-container .karte{
    width: 100% !important;
    border-radius: 6px;
    border: none !important;
    mask-image: radial-gradient(white, black);}


.infobox .karte> p{
.infobox .karte p{
     display: none;}
     display: none !important;}


.infobox .leaflet-container{
.infobox .leaflet-container{
    width: 100% !important; /* Override the (inline) width property */
     border-radius: 6px;}
     border-radius: 6px;
    margin: 0 auto;}


.infobox .strassenschild img{
.infobox .strassenschild img{
Zeile 105: Zeile 190:
     display: block;}
     display: block;}


.infobox .logo{
.strassenschild:hover {
     max-width: 85%;
     transform: scale(1.05);
    background: #fff;
     transition: transform 0.5s ease-in;
     margin-bottom: 0.8em;
     border-color: rgba(0,0,0,0.12);
    padding: 6px;
     z-index: 2; /* Erhöhter z-index beim Hover */
     border-radius: 6px;
}
    box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.25);}
 
.infobox .logo img{
    display: block;
    object-fit: contain;
    width: auto;
    max-width: 100%;
     max-height: 110px;
    height: auto !important;
    margin-left: auto;
    margin-right: auto;}


.nocorner img{
.nocorner img{
Zeile 127: Zeile 201:


.infobox .strassenbild{
.infobox .strassenbild{
     margin-top: 1.2em;}
     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 138: Zeile 219:
     margin-bottom: 1.2em;
     margin-bottom: 1.2em;
     display: block;}
     display: block;}
.infobox .bild{
    margin-top: 1.2em;}


.infobox .unter_logo{
.infobox .unter_logo{
     margin-top: 4em;}
     padding-top: 2em;}
 
.infobox .overlap{
    background: #fff;
    position: absolute;
    top: 1.2em;
    z-index: 2;}
 
.infobox .bild img{
    width: 100%;
    border-radius: 6px;
    height: auto !important;
    box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.25);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.2em;
    display: block;}


.infobox .strassenbild p{
.infobox .strassenbild p{
Zeile 204: Zeile 266:
.infobox .map-container{
.infobox .map-container{
     width: 49%;
     width: 49%;
    height: max-content;
     margin-right: 2%;}
     margin-right: 2%;}
.noscale{
    width: 100% !important;
    margin: 0! important;}


.infobox .strassenbild{
.infobox .strassenbild{
Zeile 262: Zeile 329:
.infobox .services dt{
.infobox .services dt{
     display: flex;}
     display: flex;}
.noscale{
    width: 100% !important;
    margin: 0! important;}
}
}


Zeile 277: Zeile 349:
.infobox .title{
.infobox .title{
     max-width: 85% !important;}
     max-width: 85% !important;}
.noscale{
    width: 100% !important;
    margin: 0! important;}
}
}


Zeile 292: Zeile 369:
.infobox .title{
.infobox .title{
     max-width: 85% !important;}
     max-width: 85% !important;}
.noscale{
    width: 100% !important;
    margin: 0! important;}
}
}


Abgerufen von „https://www.hwtest.info/wiki/Spezial:Mobiler_Unterschied/252102...273945“