MediaWiki:Common.css: Unterschied zwischen den Versionen

← Zum vorherigen Versionsunterschied Zum nächsten Versionsunterschied →

@@ Zeile 1: / Zeile 1: @@
 /* Das folgende CSS wird für alle Benutzeroberflächen geladen. */
-/* ===== Popup Hintergrund ===== */
+/* ===== Overlay ===== */
 .mw-popup-overlay {
    position: fixed;
@@ Zeile 8: / Zeile 8: @@
 }
-/* ===== Popup Container ===== */
+/* ===== Modal ===== */
 .mw-popup-modal {
    position: fixed;
@@ Zeile 15: / Zeile 15: @@
    transform: translate(-50%, -50%);
    background: #fff;
-   max-width: 96%;       /* breiter als vorher */
+   max-width: 96%;
-   width: 640px;         /* fester Wert auf Desktop */
+   width: 640px;
-   padding: 80px 40px 30px; /* sehr viel Platz oben */
+   padding: 80px 40px 30px;   /* viel Platz oben */
    border-radius: 12px;
    z-index: 10001;
    text-align: center;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
-   max-height: 94vh;     /* fast volle Höhe */
+   max-height: 94vh;
-   overflow-y: auto;     /* scrollen, falls zu lang */
+   overflow-y: auto;
 }
-/* ===== Logo-Bereich mit Herz ===== */
+/* ===== Logo+Herz ===== */
 .mw-popup-logo {
    position: relative;
    display: inline-block;
-   margin-bottom: 14px;
+   margin-bottom: 56px;      /* EXTRA Platz unter Logo/Herz */
+  z-index: 2;               /* über dem Herz, unter dem Text */
 }
 .mw-popup-logo img {
@@ Zeile 38: / Zeile 39: @@
 }
-/* ===== Herz-Hintergrund ===== */
+/* Herz IMMER hinter dem Text platzieren */
 .mw-popup-heart {
    position: absolute;
-   top: -20px; /* nach oben rausziehen */
+   top: -20px;               /* sitzt hoch über dem Textbereich */
    left: 50%;
    width: 120px;
@@ Zeile 48: / Zeile 49: @@
    transform: translateX(-50%) rotate(-45deg);
    transform-origin: center;
-   z-index: 1;
+   z-index: 0;               /* <<< hinter Text/Buttons */
    animation: pulse 1.5s infinite;
 }
@@ Zeile 63: / Zeile 64: @@
 .mw-popup-heart::after  { left: 60px; top: 0; }
-/* ===== Puls-Animation ===== */
+/* Puls-Animation */
 @keyframes pulse {
 %, 100% { transform: translateX(-50%) rotate(-45deg) scale(1); }
@@ Zeile 69: / Zeile 70: @@
 }
-/* ===== Titel & Text ===== */
+/* ===== Titel, Text, Button IMMER über Herz ===== */
+.mw-popup-modal h2,
+.mw-popup-content,
+.mw-popup-close {
+  position: relative;
+  z-index: 3;               /* <<< vor dem Herz */
+}
 .mw-popup-modal h2 {
    margin: 8px 0 12px;
    font-size: 1.35em;
 }
 .mw-popup-content p {
    margin: 0.6em 0;
@@ Zeile 81: / Zeile 90: @@
 }
-/* ===== Button ===== */
+/* Button */
 .mw-popup-close {
    margin-top: 1em;
@@ Zeile 94: / Zeile 103: @@
 .mw-popup-close:hover { background: #258; }
-/* ===== Mobile-Anpassungen ===== */
+/* ===== Mobile ===== */
 @media (max-width: 480px) {
    .mw-popup-modal {
      width: calc(100% - 20px);
-     padding: 70px 16px 16px; /* auch mobil mehr Platz oben */
+     padding: 70px 16px 16px;
-  }
-  .mw-popup-logo img {
-    max-width: 90px;
    }
+  .mw-popup-logo img { max-width: 90px; }
    .mw-popup-heart {
      top: -10px;
-     width: 100px;
+     width: 100px; height: 100px;
-    height: 100px;
    }
    .mw-popup-heart::before,
    .mw-popup-heart::after {
-     width: 100px;
+     width: 100px; height: 100px;
-    height: 100px;
    }
    .mw-popup-heart::before { top: -50px; }
    .mw-popup-heart::after  { left: 50px; }
 }