Vorlage:InfoboxTunte/style.css: Unterschied zwischen den Versionen
Dolly (Diskussion | Beiträge) Die Seite wurde neu angelegt: „.infobox-tunte { background: linear-gradient(to bottom, #faf4e8, #f8f0e5, #ebd3b2); border: 1px solid #ccc; border-radius: 8px; padding: 1em; margin: 1em auto; max-width: 600px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); font-size: 95%; color: #222; overflow: hidden; } .infobox-image { text-align: center; margin-bottom: 1em; } .infobox-title { font-weight: bold; font-size: 1.5em; text-align: center; margin-bottom: 0.2em; } .…“ Markierungen: Mobile Bearbeitung Mobile Web-Bearbeitung |
Dolly (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung Markierungen: Mobile Bearbeitung Mobile Web-Bearbeitung |
||
Zeile 1: | Zeile 1: | ||
.infobox-tunte { | .infobox-tunte { | ||
background: | background-color: #fff; | ||
border: 1px solid #ccc; | border: 1px solid #ccc; | ||
padding: 1em; | padding: 1em; | ||
margin: 1em auto; | margin: 1em auto; | ||
width: 100%; | |||
max-width: 600px; | max-width: 600px; | ||
font-size: 95%; | font-size: 95%; | ||
color: #222; | color: #222; | ||
box-sizing: border-box; | |||
} | } | ||
Zeile 19: | Zeile 18: | ||
.infobox-title { | .infobox-title { | ||
font-weight: bold; | font-weight: bold; | ||
font-size: 1. | font-size: 1.6em; | ||
text-align: center; | text-align: center; | ||
margin-bottom: 0.2em; | margin-bottom: 0.2em; | ||
color: #222; | |||
} | } | ||
Zeile 28: | Zeile 28: | ||
text-align: center; | text-align: center; | ||
margin-bottom: 1em; | margin-bottom: 1em; | ||
color: #444; | |||
} | |||
.infobox-divider { | |||
border: 0; | |||
border-top: 1px solid #ebd3b2; | |||
margin: 1em 0; | |||
} | } | ||
.infobox-section { | .infobox-section { | ||
margin-top: | margin-top: 1.5em; | ||
} | } | ||
.infobox-heading { | .infobox-heading { | ||
font-size: 1.1em; | |||
font-weight: bold; | font-weight: bold; | ||
border-bottom: 2px solid #ebd3b2; | |||
padding: 0. | padding-bottom: 0.2em; | ||
margin-bottom: 0.5em; | margin-bottom: 0.5em; | ||
color: #222; | |||
} | } | ||
.infobox-group div { | .infobox-group div { | ||
margin-bottom: 0.4em; | margin-bottom: 0.4em; | ||
display: flex; | |||
flex-wrap: wrap; | |||
} | } | ||
.infobox-label { | .infobox-label { | ||
font-weight: bold; | font-weight: bold; | ||
flex: 0 0 30%; | |||
width: 30%; | max-width: 30%; | ||
padding-right: 0.5em; | |||
box-sizing: border-box; | |||
color: #444; | |||
} | } | ||
@media screen and (max-width: 768px) { | @media screen and (max-width: 768px) { | ||
.infobox-tunte { | .infobox-tunte { | ||
padding: 1em; | |||
width: 100%; | width: 100%; | ||
} | |||
.infobox-group div, .infobox-section div { | |||
flex-direction: column; | |||
} | } | ||
.infobox-label { | .infobox-label { | ||
flex: 100%; | |||
width: | max-width: 100%; | ||
margin-bottom: 0.2em; | margin-bottom: 0.2em; | ||
} | } | ||
} | } |
Version vom 14. Mai 2025, 23:09 Uhr
.infobox-tunte { background-color: #fff; border: 1px solid #ccc; padding: 1em; margin: 1em auto; width: 100%; max-width: 600px; font-size: 95%; color: #222; box-sizing: border-box; } .infobox-image { text-align: center; margin-bottom: 1em; } .infobox-title { font-weight: bold; font-size: 1.6em; text-align: center; margin-bottom: 0.2em; color: #222; } .infobox-sub { font-style: italic; text-align: center; margin-bottom: 1em; color: #444; } .infobox-divider { border: 0; border-top: 1px solid #ebd3b2; margin: 1em 0; } .infobox-section { margin-top: 1.5em; } .infobox-heading { font-size: 1.1em; font-weight: bold; border-bottom: 2px solid #ebd3b2; padding-bottom: 0.2em; margin-bottom: 0.5em; color: #222; } .infobox-group div { margin-bottom: 0.4em; display: flex; flex-wrap: wrap; } .infobox-label { font-weight: bold; flex: 0 0 30%; max-width: 30%; padding-right: 0.5em; box-sizing: border-box; color: #444; } @media screen and (max-width: 768px) { .infobox-tunte { padding: 1em; width: 100%; } .infobox-group div, .infobox-section div { flex-direction: column; } .infobox-label { flex: 100%; max-width: 100%; margin-bottom: 0.2em; } }