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

3.687 Bytes hinzugefügt ,  16. Juli 2025
keine Bearbeitungszusammenfassung
(Die Seite wurde neu angelegt: „#infobar{ background: #f8f8f8; border-radius: 6px; box-sizing: border-box; max-width: 330px; overflow: hidden; float: right; clear: both; font-size: 85%; margin: 0 0 1.4em 1.4em; padding: 1.4em;} #infobar .aspect-group{ margin: 0.8em 0 0 0; padding: 0.4em 0 0 0; border-top: 1px solid #ccc;} #infobar .aspect-group-first{ border-top: none;} #infobar .head{ font-size: 1.1em; font-weight: bol…“)
 
Keine Bearbeitungszusammenfassung
Markierung: Manuelle Zurücksetzung
 
(100 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
#infobar{
.infobox{
     background: #f8f8f8;
     background: #f8f8f8;
     border-radius: 6px;
     border-radius: 6px;
Zeile 11: Zeile 11:
     padding: 1.4em;}
     padding: 1.4em;}


#infobar .aspect-group{
.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{
     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 #ccc;}


#infobar .aspect-group-first{
.infobox .first{
     border-top: none;}
     border-top: none;}


#infobar .head{
.infobox .notitle{
    padding-top: 0.8em !important;}
 
.infobox .sub{
    border-top: none !important;
    margin: 1.5em 0 0 0 !important;}
 
.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 27: Zeile 100:
     font-family: sans-serif;}
     font-family: sans-serif;}


#infobar .title{
.infobox .title{
     width: max-content;
     width: max-content;
     margin: 0;
     margin: 0;
     border-radius: 6px 6px 0 0;
     border-radius: 6px 6px 0 0;
     text-align: left;
     text-align: left;  
    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%;}


#infobar .title-no-img{
/* 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{
     width: max-content;
     width: max-content;
     margin: 0 0 1.2em 0;
     margin: 0 0 1.2em 0;
Zeile 47: 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 .motto{
    font-size: 115% !important;
    font-weight: normal;
    padding: 0;
    margin: 0;
    font-style: italic !important;
    text-align: left;}


#infobar .media-container{
.infobox .media-container{
     margin: 1.2em 0 0 0;}
     margin: 1.2em 0 0 0;}


#infobar .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;}


#infobar .map-container .karte{
.infobox .karte p{
     width: 100% !important;
     display: none !important;}
    border-radius: 6px;
    border: none !important;
    mask-image: radial-gradient(white, black);}


#infobar .karte> p{
.infobox .leaflet-container{
     display: none;}
     border-radius: 6px;}


#infobar .leaflet-container{
.infobox .strassenschild img{
     width: 100% !important; /* Override the (inline) width property */
     width: 100%;
     border-radius: 6px;
     border-radius: 6px;
    margin: 0 auto;}
#infobar .strassenschild img{
    width: 100%;
    border-radius: 0 6px 6px 6px;
     height: auto !important;
     height: auto !important;
     filter: grayscale(100%);
     filter: grayscale(30%);
box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.25);
    box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.25);
     margin-left: auto;
     margin-left: auto;
     margin-right: auto;
     margin-right: auto;
Zeile 87: Zeile 190:
     display: block;}
     display: block;}


#infobar .strassenbild{
.strassenschild:hover {
     margin-top: 1.2em;}
     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 */
}


#infobar .strassenbild img{
.nocorner img{
    border-radius: 0px 6px 6px 6px !important;}
 
.infobox .strassenbild{
    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{
     width: 100%;
     width: 100%;
     border-radius: 6px;
     border-radius: 6px;
     height: auto !important;
     height: auto !important;
box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.25);
    box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.25);
     margin-left: auto;
     margin-left: auto;
     margin-right: auto;
     margin-right: auto;
Zeile 100: Zeile 220:
     display: block;}
     display: block;}


#infobar .strassenbild p{
.infobox .unter_logo{
  text-align: left;
    padding-top: 2em;}
  margin-bottom: 0;
  color: #3c3c3c;}


#infobar .services img{
.infobox .strassenbild p{
  vertical-align: text-bottom;
    margin: -0.5em 0 0 0;
  margin-right: 0.5em;
    color: #AAA;
  border-radius: 4px;}
    font-size: 11px;}


#infobar dl{
.infobox .services img{
  display: flex;
    vertical-align: text-bottom;
  flex-wrap: wrap;
    margin-right: 0.5em;
  margin: 0;
    border-radius: 4px;}
  hyphens: auto !important;}
 
.infobox dl{
    display: flex;
    flex-wrap: wrap;
    margin: 0;}


#infobar dl dt{
.infobox dl dt{
  width: 35%;
    width: 35%;
  margin: 0 0 0.4em 0;
    margin: 0 0 0.4em 0;
  padding: 0 2% 0 0;
    padding: 0 2% 0 0;
  font-weight: bold;
    font-weight: bold;
  color: #333;
    color: #333;
  display: flex;}
    display: flex;}


#infobar dl dd{
.infobox dl dd{
  width: 63%;
    width: 63%;
  margin: 0 0 0.4em 0;
    margin: 0 0 0.4em 0;
  text-align: right;}
    text-align: right;}


@media (max-width: 700px) and (min-width: 585px){
@media (max-width: 700px) and (min-width: 585px){
  #infobar{
.infobox{
     max-width: none;
     max-width: none;
     width: 100%;
     width: 100%;
     padding: 2em 2.5em;}
     padding: 2em 2.5em;}
    
    
#infobar .title{
.infobox .title{
     max-width: 75% !important;     
     max-width: 75% !important;     
     margin-left: 0 !important;}
     margin-left: 0 !important;}


  #infobar .media-container{
.infobox .media-container{
     display: flex;}
     display: flex;}


  #infobar .map-container{
.infobox .map-container{
     width: 49%;
     width: 49%;
    height: max-content;
     margin-right: 2%;}
     margin-right: 2%;}


  #infobar .strassenbild{
.noscale{
    width: 100% !important;
    margin: 0! important;}
 
.infobox .strassenbild{
     width: 49%;
     width: 49%;
     margin-top: 0;}
     margin-top: 0;}


  #infobar .strassenbild img{
.infobox .strassenbild img{
     height: 180px !important;
     height: 180px !important;
     object-fit: cover;
     object-fit: cover;
Zeile 156: Zeile 283:
     display: block;}
     display: block;}


  #infobar .strassenbild p{
.infobox .unternehmensbild{
     text-align: right;}
    width: 49%;
    margin-top: 0;}
 
.infobox .unternehmensbild img{
    height: 180px !important;
    object-fit: cover;
    margin-left: 0 !important;
    display: block;}
 
.infobox .unternehmensbild p{
    text-align: left;}
 
.infobox .strassenbild p{
     text-align: left;}


  #infobar .strassenschild img{
.infobox .strassenschild img{
     width: 90% !important;
     width: 90% !important;
     margin-left: 0 !important;
     margin-left: 0 !important;
     display: block;}
     display: block;}


  #infobar .leaflet-container{
.infobox .leaflet-container{
     height: 180px !important;}
     height: 180px !important;}


  #infobar .services dt{
.infobox .services dt{
     display: inline-flex;}
     display: inline-flex;}
}
}


@media (max-width: 584px) and (min-width: 431px){
@media (max-width: 584px) and (min-width: 431px){
  .infobox-pagewide {
.infobox-pagewide {
     font-size: 80% !important;}
     font-size: 80% !important;}


  .infobox-inline {
.infobox-inline {
     display: flex;
     display: flex;
     margin-bottom: 1.2em;
     margin-bottom: 1.2em;
     max-width: 100% !important;}
     max-width: 100% !important;}


  #infobar{
.infobox{
     max-width: none;
     max-width: none;
     width: 100%;}
     width: 100%;}


  #infobar .title{
.infobox .title{
     max-width: 90% !important;}
     max-width: 90% !important;}


#infobar .services dt{
.infobox .services dt{
     display: flex;}
     display: flex;}
.noscale{
    width: 100% !important;
    margin: 0! important;}
}
}


@media (max-width: 430px) and (min-width: 401px){
@media (max-width: 430px) and (min-width: 401px){
  #infobar{
.infobox{
     max-width: none;
     max-width: none;
     width: 100%;}
     width: 100%;}


/* #infobar dl dt{
.infobox-pagewide {
    display: grid;} */
 
  .infobox-pagewide {
     font-size: 75% !important;}
     font-size: 75% !important;}


  .infobox-inline-icon, .infobox-inline-img {
.infobox-inline-icon, .infobox-inline-img {
     flex-shrink: 1 !important;}
     flex-shrink: 1 !important;}


  #infobar .title{
.infobox .title{
     max-width: 85% !important;}
     max-width: 85% !important;}
.noscale{
    width: 100% !important;
    margin: 0! important;}
}
}


@media (max-width: 400px){
@media (max-width: 400px){
  #infobar{
.infobox{
     max-width: none;
     max-width: none;
     width: 100%;}
     width: 100%;}


  .infobox-pagewide {
.infobox-pagewide{
     font-size: 75% !important;}
     font-size: 75% !important;}


  #infobar .services img{
.infobox .services img{
     display: none;}
     display: none;}


  #infobar .title{
.infobox .title{
     max-width: 85% !important;}
     max-width: 85% !important;}
.noscale{
    width: 100% !important;
    margin: 0! important;}
}
}


Zeile 229: Zeile 381:
     display: none !important;}
     display: none !important;}


#infobar .mw-collapsible-toggle {
.infobox .mw-collapsible-toggle {
     width: max-content;
     width: max-content;
     padding: 0 0.5em;
     padding: 0 0.5em;
Zeile 250: Zeile 402:
}
}


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


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


#infobar .mw-collapsible-toggle:hover {
.infobox .mw-collapsible-toggle:hover {
     background-color: #f5f5f5;
     background-color: #f5f5f5;
     border-color: #dadce0;
     border-color: #dadce0;
     box-shadow: rgba(0, 0, 0, .1) 0 1px 1px;}
     box-shadow: rgba(0, 0, 0, .1) 0 1px 1px;}
Abgerufen von „https://www.hwtest.info/wiki/Spezial:Mobiler_Unterschied/232845...273945“