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

1.025 Bytes hinzugefügt , 16. Juli 2025

keine Bearbeitungszusammenfassung

RaWen

Oberflächenadministratoren, Administratoren

25.095

Bearbeitungen

@@ Zeile 2: / Zeile 2: @@
 .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;
 }
@@ Zeile 17: / Zeile 29: @@
      margin: auto 0;
      display: flex;
-     flex-shrink: 0 !important;
+     flex-shrink: 0 !important;}
-}
 .infobar-icon img {
      max-width: 100%;
-     max-height: 100%;
+     max-height: 100%;}
-}
 .infobar-text {
+    display: flex;
+    flex-wrap: wrap; /* Erlaubt Elementen, in die nächste Zeile zu gehen, wenn nicht genug Platz vorhanden ist */
+    align-items: center;
+    gap: 0.2rem; /* Definiert sowohl row-gap als auch column-gap */
+    width: 100%;
      padding: 0;
-     display: flex;
+     margin: 0;
-    flex-wrap: wrap;
+     color: inherit;}
-    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%;
+     flex: 0 0 100%; /* Kopf nimmt immer seine eigene Zeile einnimmt */
-     font-size: 110%;
+     font-size: 0.9rem;}
-}
+.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;
      height: max-content;
-    display: inline-block;
+     padding: 0.05rem 0.8rem;
-     padding: 0.05em 1em;
+     background-color: #fff; /* Fallback Hintergrund der Pillen */
-     background-color: #fff; /* Hintergrundfarbe der Pillen-Items als Fallback */
+     border-radius: 12px;
-     border-radius: 15%/50%;
+     font-size: 0.75rem;}
-     font-size: 95%;
-}
-.margin {
-    margin: 0.5em 0 0 0; /* Abstand nach oben für Items */
-}
-.no-box {
+.boxless {
      flex-basis: 100% !important;
      height: max-content !important;
@@ Zeile 61: / Zeile 72: @@
      padding: 0.05em 0 !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 {
+    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;
+     align-self: center;}
-}
 .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);
-     width: 60px;
+     max-width: 50px !important;
-     height: 60px;
+     max-height: 50px !important;
      border-radius: 6px;
-     object-fit: cover;
+     object-fit: cover;}
+/* Media Query für Bildschirme kleiner als 440px */
+@media (max-width: 500px) {
+.infobar {
+    overflow: scroll;
+    gap: 1em;
+    max-width: 100% !important;}
+.infobar-text {
+    min-width: 215px;}
 }