HammWiki

Vorlage:Unternehmen-Entwickler/style.css: Unterschied zwischen den Versionen

Vorlage Diskussion

Vorlage:Unternehmen-Entwickler/style.css (Quelltext anzeigen)

Version vom 18. März 2024, 13:57 Uhr

666 Bytes hinzugefügt ,  18 März
K
keine Bearbeitungszusammenfassung
KKeine Bearbeitungszusammenfassung
KKeine Bearbeitungszusammenfassung
 
(33 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
.infobox{
.infobox{
     background: #f8f8f8;
     background: #f8f8f8;
     border-radius: 6px;
     border-radius: 6px; /* Abgerundete Ecken */
     box-sizing: border-box;
     box-sizing: border-box;
     max-width: 330px;
     max-width: 330px;
Zeile 11: Zeile 11:
     padding: 1.4em;}
     padding: 1.4em;}


/* Grid-Container für Logo und Bild */
.logo, .bild {
    box-sizing: border-box;}
 
/* Grid-Container f. Logo & Bild */
.logo-bild-container {
.logo-bild-container {
     display: grid;
     display: grid;
     grid-template-columns: repeat(12, 1fr); /* Erstellt ein 12-Spalten-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(auto-fill, minmax(10px, auto)); /* Erstellt viele kleine Zeileneinheiten */
     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%; /* Container nimmt volle Breite ein */
     grid-gap: 10px; /* Optional: Abstand zwischen den Zeilen und Spalten */
     margin: 0 0 1.8em 0 /* unterer Abstand zum Text der Infobox*/}
}
 
.logo img, .bild img {
    height: auto;}


/* Stil für das Logo */
/* Stil für das Logo */
.logo {
.logo {
     grid-column: span 10; /* Nimmt bis zu 10 der 12 Spalten ein, um unter 85% Breite zu bleiben */
    z-index: 2;
     grid-row: 1; /* Beginnt in der ersten Zeile */
     grid-column: 1 / -1; /* Logo nimmt alle Spalten der Grid ein */
     max-width: 85%; /* Beschränkt die Breite des Logos auf maximal 85% */
     grid-row: 1 / 5; /* Logo erstreckt sich über 5 Zeilen der Grid */
     max-height: 110px; /* Beschränkt die Höhe des Logos auf maximal 110px */
     display: flex; /* Logo wird im Grid angeordnet */
     z-index: 2; /* Stellt sicher, dass das Logo über dem Bild liegt */
     justify-content: center; /* Zentriert das Logo horizontal */
     /* Weitere Logo-Stile nach Bedarf */
     align-items: center; /* Zentriert das Logo vertikal */
}
    padding: 6px;
    background: #fff; /* Hintergrundfarbe */
     border-radius: 6px; /* Runde Ecken */
    box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.25); /* Schatten */
    max-width: 85%;
    width: max-content;
    height: max-content;}


/* Stil für den Bild-Container */
.logo img {
    max-height: 100px;
    max-width: 100%;
    width: auto;}
 
/* Stil für das Bild*/
.bild {
.bild {
     grid-column: 1 / -1; /* Bild erstreckt sich von der ersten bis zur letzten Spalte */
     grid-column: 2 / -1; /* Bild erstreckt sich über Spalte 2 bis Ende */
     grid-row: 2; /* Bild beginnt in der zweiten Zeile, direkt unter dem Logo */
     grid-row: 4 / -1; /* Bild beginnt in 4. Zeile, um sich mit dem Logo zu überschneiden */
     width: 100%; /* Nimmt die volle Breite ein */
     width: 100%; /* Nimmt die volle Breite ein */}
}


/* Stil für das Bild */
.bild img {
.bild img {
     width: 100%; /* Bild nimmt volle Breite ein */
     width: 100%; /* Bild nimmt volle Breite ein */
    height: auto;
    margin-bottom: 1.2em;
     height: auto; /* Höhe passt sich dem Seitenverhältnis des Bildes an */
     height: auto; /* Höhe passt sich dem Seitenverhältnis des Bildes an */
     /* Weitere Bild-Stile nach Bedarf */
     border-radius: 6px;}
}


/* Aspekt-Gruppen */
/* Aspekt-Gruppen */
Zeile 64: Zeile 79:
     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 83: Zeile 99:
     box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.25);
     box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.25);
     max-width: 85%;}
     max-width: 85%;}
/* Stil für den Titel der Infobox, wenn kein Logo vorhanden ist */
.title-no-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 */
    display: flex; /* Flexibles Layout für Zentrierung */
    justify-content: center; /* Zentriert den Text horizontal */
    align-items: center; /* Zentriert den Text vertikal */
    z-index: 2; /* Stellt sicher, dass die Überschrift über dem Bild liegt */
    background: #fff;
    border-radius: 6px; /* Runde Ecken */
    box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.25); /* Schatten für Hervorhebung */
    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 90: Zeile 135:
     text-align: left;   
     text-align: left;   
     background: #fff;
     background: #fff;
     color: #000;
     box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.25);
     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: #000;}
.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 126: Zeile 169:


.infobox .leaflet-container{
.infobox .leaflet-container{
     width: 100% !important; /* Override the (inline) width property */
     width: 100% !important; /* Überschreibt die (inline) width-Anweisung */
     border-radius: 6px;
     border-radius: 6px;
     margin: 0 auto;}
     margin: 0 auto;}
Zeile 140: Zeile 183:
     margin-bottom: 0.8em;
     margin-bottom: 0.8em;
     display: block;}
     display: block;}
.infobox .logo{
    max-width: 85%;
    background: #fff;
    padding: 6px;
    border-radius: 6px;
    margin-bottom: 1.6em;
    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 177: Zeile 202:
.infobox .unter_logo{
.infobox .unter_logo{
     padding-top: 2em;}
     padding-top: 2em;}
.infobox .overlap{
    background: #fff;
    position: absolute;
    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{
Abgerufen von „https://www.hammwiki.info/wiki/Spezial:Mobiler_Unterschied/253555...253741“