20.748
Bearbeitungen
Vorlage:Infobar/style.css: Unterschied zwischen den Versionen
keine Bearbeitungszusammenfassung
RaWen (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
RaWen (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
| (18 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
| Zeile 2: | Zeile 2: | ||
.infobar { | .infobar { | ||
max-width: 400px; | max-width: 400px; | ||
overflow:scroll; | |||
background-color: #f4f4f4; /* Basis-Hintergrundfarbe als Fallback */ | background-color: #f4f4f4; /* Basis-Hintergrundfarbe als Fallback */ | ||
display: flex; | display: flex; | ||
| Zeile 23: | Zeile 24: | ||
.infobar-text { | .infobar-text { | ||
display: flex; /* Flexbox */ | |||
flex-wrap: wrap; /* Erlaubt Elementen, in die nächste Zeile zu gehen, wenn nicht genug Platz vorhanden ist */ | |||
align-items: center; /* Zentriert die Elemente vertikal */ | |||
gap: 0.4em; /* Definiert sowohl den row-gap als auch den column-gap für die Flexbox */ | |||
width: 100%; | |||
padding: 0; | padding: 0; | ||
margin: 0; | |||
color: inherit;} | |||
color: inherit; | |||
.infobar-text .head { | .infobar-text .head { | ||
line-height: 1; | line-height: 1; | ||
flex | flex: 0 0 100%; /* Sorgt dafür, dass der Kopf immer seine eigene Zeile einnimmt */ | ||
font-size: | font-size: 105%;} | ||
.solo { | .solo { | ||
line-height: 1.4 !important | line-height: 1.4 !important;} | ||
.inline { | .inline { | ||
| Zeile 45: | Zeile 45: | ||
.infobar-text .item { | .infobar-text .item { | ||
line-height: 1.3; | |||
display: inline-block; | |||
align-items: center; /* Zentriert den Inhalt der Items vertikal */ | |||
height: max-content; | height: max-content; | ||
padding: 0.05em 1em; | padding: 0.05em 1em; | ||
background-color: #fff; /* Hintergrundfarbe der Pillen-Items als Fallback */ | background-color: #fff; /* Hintergrundfarbe der Pillen-Items als Fallback */ | ||
border-radius: 12px; | border-radius: 12px; | ||
font-size: 95%;} | font-size: 95%;} | ||
.boxless { | .boxless { | ||
| Zeile 62: | Zeile 61: | ||
background-color: inherit !important; | background-color: inherit !important; | ||
border-radius: 0 !important;} | border-radius: 0 !important;} | ||
.infobar-text .head + .boxless.item { | |||
margin-top: -0.4em; /* Negativer margin-top, um den row-gap des ersten Items unter head zu entfernen */} | |||
.shapeless { | .shapeless { | ||
| Zeile 75: | Zeile 77: | ||
.infobar-img img { | .infobar-img img { | ||
box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.15); /* Subtiler Schatten */ | box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.15); /* Subtiler Schatten */ | ||
width: 60px; | max-width: 60px !important; | ||
height: 60px; | max-height: 60px !important; | ||
border-radius: 6px; | border-radius: 6px; | ||
object-fit: cover;} | object-fit: cover;} | ||
/* Media Query für Bildschirme kleiner als 440px */ | |||
@media (max-width: 500px) { | |||
.infobar { | |||
gap: 1em; | |||
max-width: 100% !important;} | |||
.infobar-text { | |||
min-width:215px;} | |||
} | |||