Vorlage:Infobox/style.css: Unterschied zwischen den Versionen
Zur Navigation springen
Zur Suche springen
RaWen (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
RaWen (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
Zeile 1: | Zeile 1: | ||
.infobox{ | |||
background: #f8f8f8; | background: #f8f8f8; | ||
border-radius: 6px; | border-radius: 6px; | ||
Zeile 11: | Zeile 11: | ||
padding: 1.4em;} | padding: 1.4em;} | ||
.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;} | ||
.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;} | ||
.infobox .aspect-group-sub{ | |||
margin: 1.5em 0 0 0;} | margin: 1.5em 0 0 0;} | ||
.infobox .aspect-group-first{ | |||
border-top: none;} | border-top: none;} | ||
.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;} | ||
.infobox .title{ | |||
width: max-content; | width: max-content; | ||
margin: 0; | margin: 0; | ||
Zeile 49: | Zeile 49: | ||
max-width: 85%;} | max-width: 85%;} | ||
.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);} | ||
.infobox .media-container{ | |||
margin: 1.2em 0 0 0;} | margin: 1.2em 0 0 0;} | ||
.infobox .map-container{ | |||
margin: 0; | margin: 0; | ||
border-radius: 6px; | border-radius: 6px; | ||
Zeile 70: | Zeile 70: | ||
height: max-content;} | height: max-content;} | ||
.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);} | ||
.infobox .karte> p{ | |||
display: none;} | display: none;} | ||
.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;} | ||
.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;} | ||
.infobox .strassenbild{ | |||
margin-top: 1.2em;} | margin-top: 1.2em;} | ||
.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;} | ||
.infobox .strassenbild p{ | |||
text-align: left; | text-align: left; | ||
margin-bottom: 0; | margin-bottom: 0; | ||
color: #3c3c3c;} | color: #3c3c3c;} | ||
.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;} | ||
.infobox dl{ | |||
display: flex; | display: flex; | ||
flex-wrap: wrap; | flex-wrap: wrap; | ||
Zeile 124: | Zeile 124: | ||
hyphens: auto !important;} | hyphens: auto !important;} | ||
.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;} | ||
.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){ | ||
.infobox{ | |||
max-width: none; | max-width: none; | ||
width: 100%; | width: 100%; | ||
padding: 2em 2.5em;} | padding: 2em 2.5em;} | ||
.infobox .title{ | |||
max-width: 75% !important; | max-width: 75% !important; | ||
margin-left: 0 !important;} | margin-left: 0 !important;} | ||
.infobox .media-container{ | |||
display: flex;} | display: flex;} | ||
.infobox .map-container{ | |||
width: 49%; | width: 49%; | ||
margin-right: 2%;} | margin-right: 2%;} | ||
.infobox .strassenbild{ | |||
width: 49%; | width: 49%; | ||
margin-top: 0;} | margin-top: 0;} | ||
.infobox .strassenbild img{ | |||
height: 180px !important; | height: 180px !important; | ||
object-fit: cover; | object-fit: cover; | ||
Zeile 164: | Zeile 164: | ||
display: block;} | display: block;} | ||
.infobox .strassenbild p{ | |||
text-align: right;} | text-align: right;} | ||
.infobox .strassenschild img{ | |||
width: 90% !important; | width: 90% !important; | ||
margin-left: 0 !important; | margin-left: 0 !important; | ||
display: block;} | display: block;} | ||
.infobox .leaflet-container{ | |||
height: 180px !important;} | height: 180px !important;} | ||
.infobox .services dt{ | |||
display: inline-flex;} | display: inline-flex;} | ||
} | } | ||
Zeile 188: | Zeile 188: | ||
max-width: 100% !important;} | max-width: 100% !important;} | ||
.infobox{ | |||
max-width: none; | max-width: none; | ||
width: 100%;} | width: 100%;} | ||
.infobox .title{ | |||
max-width: 90% !important;} | max-width: 90% !important;} | ||
.infobox .services dt{ | |||
display: flex;} | display: flex;} | ||
} | } | ||
@media (max-width: 430px) and (min-width: 401px){ | @media (max-width: 430px) and (min-width: 401px){ | ||
.infobox{ | |||
max-width: none; | max-width: none; | ||
width: 100%;} | width: 100%;} | ||
.infobox-pagewide { | |||
font-size: 75% !important;} | font-size: 75% !important;} | ||
.infobox-inline-icon, .infobox-inline-img { | |||
flex-shrink: 1 !important;} | flex-shrink: 1 !important;} | ||
.infobox .title{ | |||
max-width: 85% !important;} | max-width: 85% !important;} | ||
} | } | ||
@media (max-width: 400px){ | @media (max-width: 400px){ | ||
.infobox{ | |||
max-width: none; | max-width: none; | ||
width: 100%;} | width: 100%;} | ||
Zeile 225: | Zeile 222: | ||
font-size: 75% !important;} | font-size: 75% !important;} | ||
.infobox .services img{ | |||
display: none;} | display: none;} | ||
.infobox .title{ | |||
max-width: 85% !important;} | max-width: 85% !important;} | ||
} | } | ||
Zeile 237: | Zeile 234: | ||
display: none !important;} | display: none !important;} | ||
.infobox .mw-collapsible-toggle { | |||
width: max-content; | width: max-content; | ||
padding: 0 0.5em; | padding: 0 0.5em; | ||
Zeile 258: | Zeile 255: | ||
} | } | ||
.infobox .mw-collapsed .mw-collapsible-toggle:before { | |||
content: 'Infobox erweitern'; | content: 'Infobox erweitern'; | ||
color: #333;} | color: #333;} | ||
.infobox:not(.mw-collapsed) .mw-collapsible-toggle:before { | |||
content: 'Minimieren'; | content: 'Minimieren'; | ||
color: #333;} | color: #333;} | ||
.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;} |
Version vom 12. Februar 2023, 20:47 Uhr
.infobox{
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;}
.infobox .aspect-group{
margin: 0.8em 0 0 0;
padding: 0.4em 0 0 0;
border-top: 1px solid #ccc;}
.infobox .aspect-group{
margin: 0.8em 0 0 0;
padding: 0.4em 0 0 0;
border-top: 1px solid #ccc;}
.infobox .aspect-group-sub{
margin: 1.5em 0 0 0;}
.infobox .aspect-group-first{
border-top: none;}
.infobox .head{
font-size: 1.1em;
font-weight: bold;
margin: 1em 0;
border: 0;
padding: 0;
font-family: sans-serif;}
.infobox .title{
width: max-content;
margin: 0;
border-radius: 6px 6px 0 0;
text-align: left;
background: #fff;
color: #000;
padding: 0.55em 0.8em 0.55em 0.8em;
font-size: 1.2em;
font-weight: bold;
font-family:sans-serif;
box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.25);
max-width: 85%;}
.infobox .title-no-img{
width: max-content;
margin: 0 0 1.2em 0;
border-radius: 6px;
text-align: left;
background: #fff;
color: #000;
padding: 0.4em 0.8em 0.4em 0.8em;
font-size: 1.2em;
font-weight: bold;
box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.25);}
.infobox .media-container{
margin: 1.2em 0 0 0;}
.infobox .map-container{
margin: 0;
border-radius: 6px;
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{
display: none;}
.infobox .leaflet-container{
width: 100% !important; /* Override the (inline) width property */
border-radius: 6px;
margin: 0 auto;}
.infobox .strassenschild img{
width: 100%;
border-radius: 0 6px 6px 6px;
height: auto !important;
filter: grayscale(100%);
box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.25);
margin-left: auto;
margin-right: auto;
margin-bottom: 0.8em;
display: block;}
.infobox .strassenbild{
margin-top: 1.2em;}
.infobox .strassenbild 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{
text-align: left;
margin-bottom: 0;
color: #3c3c3c;}
.infobox .services img{
vertical-align: text-bottom;
margin-right: 0.5em;
border-radius: 4px;}
.infobox dl{
display: flex;
flex-wrap: wrap;
margin: 0;
hyphens: auto !important;}
.infobox dl dt{
width: 35%;
margin: 0 0 0.4em 0;
padding: 0 2% 0 0;
font-weight: bold;
color: #333;
display: flex;}
.infobox dl dd{
width: 63%;
margin: 0 0 0.4em 0;
text-align: right;}
@media (max-width: 700px) and (min-width: 585px){
.infobox{
max-width: none;
width: 100%;
padding: 2em 2.5em;}
.infobox .title{
max-width: 75% !important;
margin-left: 0 !important;}
.infobox .media-container{
display: flex;}
.infobox .map-container{
width: 49%;
margin-right: 2%;}
.infobox .strassenbild{
width: 49%;
margin-top: 0;}
.infobox .strassenbild img{
height: 180px !important;
object-fit: cover;
margin-left: 0 !important;
display: block;}
.infobox .strassenbild p{
text-align: right;}
.infobox .strassenschild img{
width: 90% !important;
margin-left: 0 !important;
display: block;}
.infobox .leaflet-container{
height: 180px !important;}
.infobox .services dt{
display: inline-flex;}
}
@media (max-width: 584px) and (min-width: 431px){
.infobox-pagewide {
font-size: 80% !important;}
.infobox-inline {
display: flex;
margin-bottom: 1.2em;
max-width: 100% !important;}
.infobox{
max-width: none;
width: 100%;}
.infobox .title{
max-width: 90% !important;}
.infobox .services dt{
display: flex;}
}
@media (max-width: 430px) and (min-width: 401px){
.infobox{
max-width: none;
width: 100%;}
.infobox-pagewide {
font-size: 75% !important;}
.infobox-inline-icon, .infobox-inline-img {
flex-shrink: 1 !important;}
.infobox .title{
max-width: 85% !important;}
}
@media (max-width: 400px){
.infobox{
max-width: none;
width: 100%;}
.infobox-pagewide {
font-size: 75% !important;}
.infobox .services img{
display: none;}
.infobox .title{
max-width: 85% !important;}
}
/* Toggle */
body.skin-minerva .mw-collapsible-toggle{
display: none !important;}
.infobox .mw-collapsible-toggle {
width: max-content;
padding: 0 0.5em;
height: max-content;
background-color: #f8f9fa;
border: 1px solid #f8f9fa;
color: #3c4043;
border-radius: 4px;
box-shadow: 0 0 3px #ccc;
text-align: center;
line-height: 22px;
font-size: 100%;
cursor: pointer;
transition: all .3s;
display: flex;
user-select: none;
touch-action: manipulation;
white-space: pre;
float: right;
}
.infobox .mw-collapsed .mw-collapsible-toggle:before {
content: 'Infobox erweitern';
color: #333;}
.infobox:not(.mw-collapsed) .mw-collapsible-toggle:before {
content: 'Minimieren';
color: #333;}
.infobox .mw-collapsible-toggle:hover {
background-color: #f5f5f5;
border-color: #dadce0;
box-shadow: rgba(0, 0, 0, .1) 0 1px 1px;}