HammWiki

Vorlage:Infobar/style.css: Unterschied zwischen den Versionen

Vorlage Diskussion

Vorlage:Infobar/style.css (Quelltext anzeigen)

Version vom 15. April 2024, 09:13 Uhr

534 Bytes entfernt ,  15 April
K
Scroll nur bei Mobilbrowsern
Keine Bearbeitungszusammenfassung
K (Scroll nur bei Mobilbrowsern)
 
(7 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
@keyframes refreshLayout {
    from { opacity: 1; }
    to { opacity: 1; }
}
.infobar {
    animation: refreshLayout 0.1s forwards;
}
/* Grundlegende Stile für alle Infobars (längliche Infoboxen am Ende von Artikeln) */
/* Grundlegende Stile für alle Infobars (längliche Infoboxen am Ende von Artikeln) */
.infobar {
.infobar {
     max-width: 400px;
     max-width: 400px;
    overflow: hidden;
     background-color: #f4f4f4; /* Basis-Hintergrundfarbe als Fallback */
     background-color: #f4f4f4; /* Basis-Hintergrundfarbe als Fallback */
     display: flex;
     display: flex;
Zeile 53: Zeile 45:


.infobar-text .item {
.infobar-text .item {
     line-height: 1.4 !important;
     line-height: 1.3;
     display: inline-flex; /* Verwendet inline-flex, damit .item-Elemente nebeneinander liegen können */
     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;
Zeile 85: 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 */
     max-width: 60px !important;
     max-width: 50px !important;
     max-height: 60px !important;
     max-height: 50px !important;
     border-radius: 6px;
     border-radius: 6px;
     object-fit: cover;}
     object-fit: cover;}


/* Media Query für Bildschirme kleiner als 440px */
/* Media Query für Bildschirme kleiner als 440px */
@media (max-width: 440px) {
@media (max-width: 500px) {
    .infobar {
.infobar {
        overflow-x: auto; /* Ermöglicht horizontales Scrollen innerhalb der Infobar */
    overflow: scroll;
        flex-wrap: nowrap; /* Verhindert den Umbruch der Flex-Items */
    gap: 1em;
        animation: refreshLayout 0.1s forwards;}
    max-width: 100% !important;}


    .infobar-icon, .infobar-text, .infobar-img {
.infobar-text {
        flex: 0 0 auto; /* Verhindert, dass Flex-Items in ihrer Größe angepasst werden */
    min-width: 215px;}
        white-space: nowrap; /* Verhindert den Umbruch von Text in den Flex-Items */}
}
}
Abgerufen von „https://www.hammwiki.info/wiki/Spezial:Mobiler_Unterschied/255116...255575“