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

Zur Navigation springen Zur Suche springen

Vorlage:Infobox/style.css (Quelltext anzeigen)

Version vom 12. Februar 2023, 20:47 Uhr

79 Bytes entfernt ,  12. Februar 2023
keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
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{
.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{
.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-sub{
.infobox .aspect-group-sub{
     margin: 1.5em 0 0 0;}
     margin: 1.5em 0 0 0;}


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


#infobar .head{
.infobox .head{
     font-size: 1.1em;
     font-size: 1.1em;
     font-weight: bold;
     font-weight: bold;
Zeile 35: Zeile 35:
     font-family: sans-serif;}
     font-family: sans-serif;}


#infobar .title{
.infobox .title{
     width: max-content;
     width: max-content;
     margin: 0;
     margin: 0;
Zeile 49: Zeile 49:
     max-width: 85%;}
     max-width: 85%;}


#infobar .title-no-img{
.infobox .title-no-img{
     width: max-content;
     width: max-content;
     margin: 0 0 1.2em 0;
     margin: 0 0 1.2em 0;
Zeile 61: Zeile 61:
box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.25);}
box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.25);}


#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;
     margin: 0;
     border-radius: 6px;
     border-radius: 6px;
Zeile 70: Zeile 70:
     height: max-content;}
     height: max-content;}


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


#infobar .karte> p{
.infobox .karte> p{
     display: none;}
     display: none;}


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


#infobar .strassenschild img{
.infobox .strassenschild img{
     width: 100%;
     width: 100%;
     border-radius: 0 6px 6px 6px;
     border-radius: 0 6px 6px 6px;
Zeile 95: Zeile 95:
     display: block;}
     display: block;}


#infobar .strassenbild{
.infobox .strassenbild{
     margin-top: 1.2em;}
     margin-top: 1.2em;}


#infobar .strassenbild img{
.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 108: Zeile 108:
     display: block;}
     display: block;}


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


#infobar .services img{
.infobox .services img{
   vertical-align: text-bottom;
   vertical-align: text-bottom;
   margin-right: 0.5em;
   margin-right: 0.5em;
   border-radius: 4px;}
   border-radius: 4px;}


#infobar dl{
.infobox dl{
   display: flex;
   display: flex;
   flex-wrap: wrap;
   flex-wrap: wrap;
Zeile 124: Zeile 124:
   hyphens: auto !important;}
   hyphens: auto !important;}


#infobar dl dt{
.infobox dl dt{
   width: 35%;
   width: 35%;
   margin: 0 0 0.4em 0;
   margin: 0 0 0.4em 0;
Zeile 132: Zeile 132:
   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;
Zeile 138: Zeile 138:


@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%;
     margin-right: 2%;}
     margin-right: 2%;}


  #infobar .strassenbild{
.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 164: Zeile 164:
     display: block;}
     display: block;}


  #infobar .strassenbild p{
.infobox .strassenbild p{
     text-align: right;}
     text-align: right;}


  #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;}
}
}
Zeile 188: Zeile 188:
     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;}
}
}


@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;}
}
}


@media (max-width: 400px){
@media (max-width: 400px){
  #infobar{
.infobox{
     max-width: none;
     max-width: none;
     width: 100%;}
     width: 100%;}
Zeile 225: Zeile 222:
     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;}
}
}
Zeile 237: Zeile 234:
     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 258: Zeile 255:
}
}


#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.hammwiki.info/wiki/Spezial:Mobiler_Unterschied/233067“
Cookies helfen uns bei der Bereitstellung von HammWiki. Durch die Nutzung von HammWiki erklärst du dich damit einverstanden, dass wir Cookies speichern.
Weitere Informationen

Navigationsmenü