Das HammWiki lädt zu einem Stammtisch: Am 12. November um 19:00 in den Zunft-Stuben, Oststraße 53. Nutzer des HammWiki sind herzlich eingeladen, um über das HammWiki zu diskutieren, meckern, Vorschläge einzubringen, … |
Vorlage:Infobar/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 46: | Zeile 46: | ||
.infobar-text .item { | .infobar-text .item { | ||
line-height: 1.3; | line-height: 1.3; | ||
display: inline- | display: inline-block; | ||
align-items: center; /* Zentriert den Inhalt der Items vertikal */ | align-items: center; /* Zentriert den Inhalt der Items vertikal */ | ||
height: max-content; | height: max-content; |
Version vom 3. April 2024, 15:18 Uhr
/* Grundlegende Stile für alle Infobars (längliche Infoboxen am Ende von Artikeln) */
.infobar {
max-width: 400px;
overflow:scroll;
background-color: #f4f4f4; /* Basis-Hintergrundfarbe als Fallback */
display: flex;
flex-direction: row;
gap: 1.8em;
border-radius: 6px;
padding: 1em;
margin-bottom: 1.2em;
color: #333; /* Basis-Textfarbe als Fallback */}
.infobar-icon {
max-width: 50px;
max-height: 50px;
margin: auto 0;
display: flex;
flex-shrink: 0 !important;}
.infobar-icon img {
max-width: 100%;
max-height: 100%;}
.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;
margin: 0;
color: inherit;}
.infobar-text .head {
line-height: 1;
flex: 0 0 100%; /* Sorgt dafür, dass der Kopf immer seine eigene Zeile einnimmt */
font-size: 105%;}
.solo {
line-height: 1.4 !important;}
.inline {
flex-basis: max-content !important;}
.infobar-text .item {
line-height: 1.3;
display: inline-block;
align-items: center; /* Zentriert den Inhalt der Items vertikal */
height: max-content;
padding: 0.05em 1em;
background-color: #fff; /* Hintergrundfarbe der Pillen-Items als Fallback */
border-radius: 12px;
font-size: 95%;}
.boxless {
flex-basis: 100% !important;
height: max-content !important;
display: inline-block !important;
padding: 0.05em 0 !important;
background-color: inherit !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 {
padding: 0.05em 1em 0.05em 0 !important;
background-color: inherit !important; /* Hintergrundfarbe der Pillen-Items leeren */
border-radius: 0 !important;}
.infobar-img {
flex-shrink: 0;
padding: 0;
align-self: center;}
.infobar-img img {
box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.15); /* Subtiler Schatten */
max-width: 60px !important;
max-height: 60px !important;
border-radius: 6px;
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;}
}