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

← Zum vorherigen Versionsunterschied

Vorlage:Infobox/style.css (Quelltext anzeigen)

Version vom 16. Juli 2025, 21:23 Uhr

18 Bytes entfernt , 16. Juli 2025

keine Bearbeitungszusammenfassung

RaWen

Oberflächenadministratoren, Administratoren

25.095

Bearbeitungen

@@ Zeile 1: / Zeile 1: @@
 .infobox{
      background: #f8f8f8;
-     border-radius: 6px; /* Abgerundete Ecken */
+     border-radius: 6px;
      box-sizing: border-box;
      max-width: 330px;
@@ Zeile 19: / Zeile 19: @@
      grid-template-columns: repeat(25, 4%); /* 25-Spalten-Grid für minutiöse Kontrolle, jede Spalte 4 % der Infobox breit */
      grid-template-rows: repeat(4, auto) 1fr; /* Automatische Höhe für Logo, Grid verbleibender Platz für Bild */
-     width: 100%; /* Container nimmt volle Breite ein */
+     width: 100%;
-     margin: 0 0 1.8em 0 /* unterer Abstand zum Text der Infobox*/}
+     margin: 0 0 1.8em 0;}
 .logo img, .bild img {
@@ Zeile 30: / Zeile 30: @@
      grid-column: 1 / -1; /* Logo nimmt alle Spalten der Grid ein */
      grid-row: 1 / 5; /* Logo erstreckt sich über 5 Zeilen der Grid */
-     display: flex; /* Logo wird im Grid angeordnet */
+     display: flex;
-     justify-content: center; /* Zentriert das Logo horizontal */
+     justify-content: center;
-     align-items: center; /* Zentriert das Logo vertikal */
+     align-items: center;
      padding: 6px;
-     background: #fff; /* Hintergrundfarbe */
+     background: #fff;
-     border-radius: 6px; /* Runde Ecken */
+     border-radius: 6px;
-     box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.25); /* Schatten */
+     box-shadow: 0px 2px 12px 0px rgba(0,0,0,0.18);
      max-width: 85%;
      width: max-content;
      height: max-content;}
+.logo:hover {
+    transform: scale(1.05);
+    transition: transform 0.5s ease-in;
+    border-color: rgba(0,0,0,0.12);
+    z-index: 2; /* Erhöhter z-index beim Hover */
+}
 .logo img {
@@ Zeile 50: / Zeile 57: @@
      width: 100%; /* Nimmt die volle Breite ein */
      grid-column: 2 / -1; /* Bild erstreckt sich über Spalte 2 bis Ende */
-     grid-row: 4 / -1; /* Bild beginnt in 4. Zeile, um sich mit dem Logo zu überschneiden */
+     grid-row: 4 / -1; /* Bild beginnt in 4. Zeile, um sich mit dem Logo zu überschneiden */}
-     box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.25); /* Schatteneffekt */}
+.bild:hover {
+     transform: scale(1.05);
+    transition: transform 0.5s ease-in;
+    border-color: rgba(0,0,0,0.12);
+    z-index: 2; /* Erhöhter z-index beim Hover */
+}
 .bild img {
@@ Zeile 57: / Zeile 70: @@
      height: auto;
      margin-bottom: 1.2em;
-     height: auto; /* Höhe passt sich dem Seitenverhältnis des Bildes an */
+     height: auto;
-     border-radius: 6px;}
+     border-radius: 6px;
+    box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.25); /* Schatteneffekt */}
 /* Aspekt-Gruppen */
@@ Zeile 93: / Zeile 107: @@
      line-height: 1.3;
      background: #fff;
-     color: #000;
+     color: #1a1a1a;
      padding: 0.55em 0.8em 0.55em 0.8em;
      font-size: 1.2em;
      font-weight: bold;
      font-family: sans-serif;
-     box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.25);
+     box-shadow: 0px 2px 12px 0px rgba(0,0,0,0.18);
      max-width: 85%;}
@@ Zeile 104: / Zeile 118: @@
 .title-no-logo {
+    color: #1a1a1a;
      grid-column: 1 / -1; /* Überschrift nimmt alle Spalten ein, wie das Logo */
      grid-row: 1 / 5; /* Überschrift erstreckt sich über dieselben Zeilen wie das Logo */
-     display: flex; /* Flexibles Layout für Zentrierung */
+     display: flex;
-     justify-content: center; /* Zentriert den Text horizontal */
+     justify-content: center;
-     align-items: center; /* Zentriert den Text vertikal */
+     align-items: center;
      z-index: 2; /* Stellt sicher, dass die Überschrift über dem Bild liegt */
      background: #fff;
-     border-radius: 6px; /* Runde Ecken */
+     border-radius: 6px;
-     box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.25); /* Schatten für Hervorhebung */
+     box-shadow: 0px 2px 12px 0px rgba(0,0,0,0.18);
      padding: 6px;
      max-width: 85%;
@@ Zeile 136: / Zeile 151: @@
      text-align: left;
      background: #fff;
-     box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.25);
+     box-shadow: 0px 2px 12px 0px rgba(0,0,0,0.18);
      padding: 0.4em 0.8em 0.4em 0.8em;
      font-size: 1.2em;
      font-weight: bold;
      line-height: 1.6;
-     color: #000;}
+     color: #1a1a1a}
 .infobox .motto{
@@ Zeile 155: / Zeile 170: @@
 .infobox .map-container{
-    margin: 0;
      border-radius: 6px;
-     box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.25);
+     box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.25);}
-    height: max-content;}
-.infobox .map-container .karte{
+.infobox .karte p{
-     width: 100% !important;
+     display: none !important;}
-    border-radius: 6px;
-    border: none !important;
-    mask-image: radial-gradient(white, black);}
-.infobox .karte> p{
-    display: none;}
 .infobox .leaflet-container{
-    width: 100% !important; /* Überschreibt die (inline) width-Anweisung */
+     border-radius: 6px;}
-     border-radius: 6px;
-    margin: 0 auto;}
 .infobox .strassenschild img{
@@ Zeile 184: / Zeile 189: @@
      margin-bottom: 0.8em;
      display: block;}
+.strassenschild:hover {
+    transform: scale(1.05);
+    transition: transform 0.5s ease-in;
+    border-color: rgba(0,0,0,0.12);
+    z-index: 2; /* Erhöhter z-index beim Hover */
+}
 .nocorner img{
@@ Zeile 190: / Zeile 202: @@
 .infobox .strassenbild{
      margin: 1.2em 0 1.2em 0;}
+.strassenbild:hover {
+    transform: scale(1.05);
+    transition: transform 0.5s ease-in;
+    border-color: rgba(0,0,0,0.12);
+    z-index: 2; /* Erhöhter z-index beim Hover */
+}
 .infobox .strassenbild img{
@@ Zeile 247: / Zeile 266: @@
 .infobox .map-container{
      width: 49%;
+    height: max-content;
      margin-right: 2%;}