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 9: | Zeile 9: | ||
padding: 1em; | padding: 1em; | ||
margin-bottom: 1.2em; | margin-bottom: 1.2em; | ||
color: #333; /* Basis-Textfarbe als Fallback */ | color: #333; /* Basis-Textfarbe als Fallback */} | ||
} | |||
.infobar-icon { | .infobar-icon { | ||
Zeile 17: | Zeile 16: | ||
margin: auto 0; | margin: auto 0; | ||
display: flex; | display: flex; | ||
flex-shrink: 0 !important; | flex-shrink: 0 !important;} | ||
} | |||
.infobar-icon img { | .infobar-icon img { | ||
max-width: 100%; | max-width: 100%; | ||
max-height: 100%; | max-height: 100%;} | ||
} | |||
.infobar-text { | .infobar-text { | ||
Zeile 33: | Zeile 30: | ||
font-size: 90%; | font-size: 90%; | ||
width: 100%; | width: 100%; | ||
color: inherit; /* Textfarbe von der übergeordneten .infobar erben */ | color: inherit; /* Textfarbe von der übergeordneten .infobar erben */} | ||
} | |||
.infobar-text .head { | .infobar-text .head { | ||
line-height: 1; | line-height: 1; | ||
flex-basis: 100%; | flex-basis: 100%; | ||
font-size: 110%; | font-size: 110%;} | ||
} | |||
.solo { | .solo { | ||
line-height: 1.4; | line-height: 1.4 !important;} | ||
} | |||
.inline { | .inline { | ||
flex-basis: max-content !important; | flex-basis: max-content !important;} | ||
} | |||
.infobar-text .item { | .infobar-text .item { | ||
Zeile 56: | Zeile 49: | ||
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%;} | ||
} | |||
.margin { | .margin { | ||
margin: 0.5em 0 0 0; /* Abstand nach oben für Items */ | margin: 0.5em 0 0 0; /* Abstand nach oben für Items */} | ||
} | |||
.boxless { | .boxless { | ||
Zeile 69: | Zeile 60: | ||
padding: 0.05em 0 !important; | padding: 0.05em 0 !important; | ||
background-color: inherit !important; | background-color: inherit !important; | ||
border-radius: 0 !important; | border-radius: 0 !important;} | ||
} | |||
.shapeless { | .shapeless { | ||
padding: 0.05em 1em 0.05em 0 !important; | padding: 0.05em 1em 0.05em 0 !important; | ||
background-color: inherit !important; /* Hintergrundfarbe der Pillen-Items leeren */ | background-color: inherit !important; /* Hintergrundfarbe der Pillen-Items leeren */ | ||
border-radius: 0 !important; | border-radius: 0 !important;} | ||
} | |||
.infobar-img { | .infobar-img { | ||
flex-shrink: 0; | flex-shrink: 0; | ||
padding: 0; | padding: 0; | ||
align-self: center; | align-self: center;} | ||
} | |||
.infobar-img img { | .infobar-img img { | ||
Zeile 89: | Zeile 77: | ||
height: 60px; | height: 60px; | ||
border-radius: 6px; | border-radius: 6px; | ||
object-fit: cover; | object-fit: cover;} | ||
} |
Version vom 2. April 2024, 22:55 Uhr
/* Grundlegende Stile für alle Infobars (längliche Infoboxen am Ende von Artikeln) */
.infobar {
max-width: 400px;
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 {
padding: 0;
display: flex;
flex-wrap: wrap;
column-gap: 0.6em;
row-gap: 0;
font-size: 90%;
width: 100%;
color: inherit; /* Textfarbe von der übergeordneten .infobar erben */}
.infobar-text .head {
line-height: 1;
flex-basis: 100%;
font-size: 110%;}
.solo {
line-height: 1.4 !important;}
.inline {
flex-basis: max-content !important;}
.infobar-text .item {
height: max-content;
display: inline-block;
padding: 0.05em 1em;
background-color: #fff; /* Hintergrundfarbe der Pillen-Items als Fallback */
border-radius: 12px;
font-size: 95%;}
.margin {
margin: 0.5em 0 0 0; /* Abstand nach oben für Items */}
.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;}
.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 */
width: 60px;
height: 60px;
border-radius: 6px;
object-fit: cover;}