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

← Zum vorherigen Versionsunterschied

Vorlage:Infobar/style.css (Quelltext anzeigen)

Version vom 16. Juli 2025, 21:02 Uhr

388 Bytes entfernt , 16. Juli 2025

keine Bearbeitungszusammenfassung

RaWen

Oberflächenadministratoren, Administratoren

25.095

Bearbeitungen

@@ 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) */
 .infobar {
      max-width: 400px;
-     background-color: #f4f4f4; /* Basis-Hintergrundfarbe als Fallback */
+    overflow: hidden;
+     background-color: #f4f4f4; /* Fallback Basisgrau */
      display: flex;
      flex-direction: row;
-     gap: 1.8em;
+     gap: 1.3rem;
      border-radius: 6px;
-     padding: 1em;
+     padding: 0.8rem;
-     margin-bottom: 1.2em;
+     margin-bottom: 1rem;
-     color: #333; /* Basis-Textfarbe als Fallback */}
+     color: #333; /* Fallback Basisgrau */}
+.pagewide {
+    gap: 0.8rem !important;
+    padding: 0.25rem !important;
+    max-width: 100% !important;}
+.infobox-inline-text .head {
+    line-height: 1; /* Zeilenhöhe Kopfzeile */
+    flex: 0 0 100%; /* Kopfzeile nimmt die gesamte Zeile ein */
+    font-size: 0.9rem;
+    margin: 0 0 0.5rem 0;
+}
 .infobar-icon {
@@ Zeile 32: / Zeile 36: @@
 .infobar-text {
-     display: flex; /* Flexbox */
+     display: flex;
      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 */
+     align-items: center;
-     gap: 0.4em; /* Definiert sowohl den row-gap als auch den column-gap für die Flexbox */
+     gap: 0.2rem; /* Definiert sowohl row-gap als auch column-gap */
      width: 100%;
      padding: 0;
@@ Zeile 43: / Zeile 47: @@
 .infobar-text .head {
      line-height: 1;
-     flex: 0 0 100%; /* Sorgt dafür, dass der Kopf immer seine eigene Zeile einnimmt */
+     flex: 0 0 100%; /* Kopf nimmt immer seine eigene Zeile einnimmt */
-     font-size: 105%;}
+     font-size: 0.9rem;}
 .solo {
@@ Zeile 53: / Zeile 57: @@
 .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;
      height: max-content;
-     padding: 0.05em 1em;
+     padding: 0.05rem 0.8rem;
-     background-color: #fff; /* Hintergrundfarbe der Pillen-Items als Fallback */
+     background-color: #fff; /* Fallback Hintergrund der Pillen */
      border-radius: 12px;
-     font-size: 95%;}
+     font-size: 0.75rem;}
 .boxless {
@@ Zeile 84: / Zeile 88: @@
 .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);
-     max-width: 60px !important;
+     max-width: 50px !important;
-     max-height: 60px !important;
+     max-height: 50px !important;
      border-radius: 6px;
      object-fit: cover;}
 /* 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;
-     }
+     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 */
-    }
 }