MediaWiki:Common.css: Unterschied zwischen den Versionen
Admin (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
Admin (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
| Zeile 16: | Zeile 16: | ||
background: #fff; | background: #fff; | ||
max-width: 96%; | max-width: 96%; | ||
width: 640px; | width: 640px; /* Breiterer Bereich auf Desktop */ | ||
padding: 80px 40px 30px; | padding: 80px 40px 30px; /* Viel Platz oben für Herz+Logo */ | ||
border-radius: 12px; | border-radius: 12px; | ||
z-index: 10001; | z-index: 10001; | ||
| Zeile 26: | Zeile 26: | ||
} | } | ||
/* ===== Logo+Herz ===== */ | /* ===== Logo + Herz ===== */ | ||
.mw-popup-logo { | .mw-popup-logo { | ||
position: relative; | position: relative; | ||
display: inline-block; | display: inline-block; | ||
margin-bottom: 56px; | margin-bottom: 56px; /* Abstand zwischen Logo/Herz und Text */ | ||
z-index: 2; | z-index: 2; | ||
} | } | ||
.mw-popup-logo img { | .mw-popup-logo img { | ||
max-width: | max-width: 110px; | ||
position: relative; | position: relative; | ||
z-index: 2; | z-index: 2; | ||
} | } | ||
/* Herz | /* Herz hinter allem */ | ||
.mw-popup-heart { | .mw-popup-heart { | ||
position: absolute; | position: absolute; | ||
top: -20px; | top: -20px; /* Herz hochziehen */ | ||
left: 50%; | left: 50%; | ||
width: 120px; | width: 120px; | ||
| Zeile 49: | Zeile 49: | ||
transform: translateX(-50%) rotate(-45deg); | transform: translateX(-50%) rotate(-45deg); | ||
transform-origin: center; | transform-origin: center; | ||
z-index: 0; | z-index: 0; /* Hinter Text und Buttons */ | ||
animation: pulse 1.5s infinite; | animation: pulse 1.5s infinite; | ||
} | } | ||
| Zeile 70: | Zeile 70: | ||
} | } | ||
/* ===== | /* ===== Text & Überschrift (immer vor dem Herz) ===== */ | ||
.mw-popup-modal h2, | .mw-popup-modal h2, | ||
.mw-popup-content, | .mw-popup-content, | ||
.mw-popup-close { | .mw-popup-close, | ||
.mw-popup-wiki-button { | |||
position: relative; | position: relative; | ||
z-index: 3; | z-index: 3; | ||
} | } | ||
| Zeile 82: | Zeile 83: | ||
font-size: 1.35em; | font-size: 1.35em; | ||
} | } | ||
.mw-popup-content p { | .mw-popup-content p { | ||
margin: 0.6em 0; | margin: 0.6em 0; | ||
| Zeile 90: | Zeile 90: | ||
} | } | ||
/* | /* ===== Buttons: gleich breit & responsiv ===== */ | ||
.mw-popup-button-row { | |||
display: flex; | |||
justify-content: center; | |||
gap: 10px; | |||
margin-top: 1em; | |||
flex-wrap: wrap; /* mobil umbrechen */ | |||
} | |||
.mw-popup-close, | |||
.mw-popup-wiki-button { | |||
flex: 1 1 140px; /* beide gleich breit, min. Breite */ | |||
text-align: center; | |||
} | |||
.mw-popup-close { | .mw-popup-close { | ||
padding: 10px 16px; | padding: 10px 16px; | ||
border: none; | border: none; | ||
| Zeile 102: | Zeile 115: | ||
} | } | ||
.mw-popup-close:hover { background: #258; } | .mw-popup-close:hover { background: #258; } | ||
.mw-popup-wiki-button { | |||
padding: 10px 16px; | |||
background: #f60; | |||
color: #fff; | |||
border-radius: 6px; | |||
text-decoration: none; | |||
font-size: 1em; | |||
} | |||
.mw-popup-wiki-button:hover { background: #d85000; } | |||
/* ===== Mobile ===== */ | /* ===== Mobile ===== */ | ||
| Zeile 109: | Zeile 132: | ||
padding: 70px 16px 16px; | padding: 70px 16px 16px; | ||
} | } | ||
.mw-popup-logo img { max-width: | .mw-popup-logo img { | ||
max-width: 90px; | |||
} | |||
.mw-popup-heart { | .mw-popup-heart { | ||
top: -10px; | top: -10px; | ||
width: 100px; height: 100px; | width: 100px; | ||
height: 100px; | |||
} | } | ||
.mw-popup-heart::before, | .mw-popup-heart::before, | ||
.mw-popup-heart::after { | .mw-popup-heart::after { | ||
width: 100px; height: 100px; | width: 100px; | ||
height: 100px; | |||
} | } | ||
.mw-popup-heart::before { top: -50px; } | .mw-popup-heart::before { top: -50px; } | ||
.mw-popup-heart::after { left: 50px; } | .mw-popup-heart::after { left: 50px; } | ||
} | } | ||