MediaWiki:Common.css: Unterschied zwischen den Versionen
Admin (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
Admin (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
| Zeile 17: | Zeile 17: | ||
max-width: 90%; | max-width: 90%; | ||
width: 520px; | width: 520px; | ||
padding: 20px; | padding: 40px 20px 20px; /* mehr Platz oben */ | ||
border-radius: 10px; | border-radius: 10px; | ||
z-index: 10001; | z-index: 10001; | ||
text-align: center; | text-align: center; | ||
box-shadow: 0 6px 20px rgba(0,0,0,0.3); | box-shadow: 0 6px 20px rgba(0,0,0,0.3); | ||
max-height: 90vh; /* falls Text länger wird */ | |||
overflow-y: auto; /* bei Bedarf scrollbar statt abgeschnitten */ | |||
} | } | ||
| Zeile 28: | Zeile 30: | ||
position: relative; | position: relative; | ||
display: inline-block; | display: inline-block; | ||
margin-bottom: | margin-bottom: 12px; | ||
} | } | ||
.mw-popup-logo img { | .mw-popup-logo img { | ||
max-width: 100px; /* Desktop-Logo-Größe */ | max-width: 100px; /* Desktop-Logo-Größe */ | ||
position: relative; | position: relative; | ||
z-index: 2; | z-index: 2; /* über dem Herz */ | ||
} | } | ||
/* ===== Herz-Hintergrund – Desktop ===== */ | /* ===== Herz-Hintergrund – Desktop ===== */ | ||
/* höher positioniert, damit es den Text nicht überdeckt */ | |||
.mw-popup-heart { | .mw-popup-heart { | ||
position: absolute; | position: absolute; | ||
top: | top: 24%; /* deutlich höher als Mitte */ | ||
left: 50%; | left: 50%; | ||
width: 120px; | width: 120px; | ||
height: 120px; | height: 120px; | ||
background: red; | background: red; | ||
transform: translate(-50%, -50%) rotate(-45deg); | transform: translate(-50%, -50%) rotate(-45deg); | ||
| Zeile 53: | Zeile 56: | ||
content: ""; | content: ""; | ||
position: absolute; | position: absolute; | ||
width: 120px; | width: 120px; | ||
height: 120px; | height: 120px; | ||
background: red; | background: red; | ||
border-radius: 50%; | border-radius: 50%; | ||
} | } | ||
.mw-popup-heart::before { | .mw-popup-heart::before { top: -60px; left: 0; } | ||
.mw-popup-heart::after { left: 60px; top: 0; } | |||
} | |||
.mw-popup-heart::after { | |||
} | |||
/* ===== Puls-Animation ===== */ | /* ===== Puls-Animation ===== */ | ||
| Zeile 75: | Zeile 72: | ||
/* ===== Titel & Text ===== */ | /* ===== Titel & Text ===== */ | ||
.mw-popup-modal h2 { | .mw-popup-modal h2 { | ||
margin: 0 | margin: 6px 0 10px; | ||
font-size: 1.25em; | font-size: 1.25em; | ||
} | } | ||
.mw-popup-content p { | .mw-popup-content p { | ||
margin: 0. | margin: 0.6em 0; | ||
font-size: 1.05em; | font-size: 1.05em; | ||
line-height: 1. | line-height: 1.5; | ||
text-align: center; | text-align: center; | ||
} | } | ||
| Zeile 95: | Zeile 92: | ||
cursor: pointer; | cursor: pointer; | ||
} | } | ||
.mw-popup-close:hover { | .mw-popup-close:hover { background: #258; } | ||
} | |||
/* ===== Mobile- | /* ===== Mobile-Anpassungen ===== */ | ||
@media (max-width: 480px) { | @media (max-width: 480px) { | ||
.mw-popup-modal { | .mw-popup-modal { | ||
width: calc(100% - 32px); | width: calc(100% - 32px); | ||
padding: 16px; | padding: 36px 16px 16px; /* auch mobil oben mehr Platz */ | ||
} | } | ||
.mw-popup-logo img { | .mw-popup-logo img { | ||
max-width: | max-width: 84px; /* etwas kleineres Logo */ | ||
} | } | ||
.mw-popup-heart { | .mw-popup-heart { | ||
top: | top: 20%; /* noch höher auf Mobile */ | ||
width: | width: 92px; | ||
height: | height: 92px; | ||
} | } | ||
.mw-popup-heart::before, | .mw-popup-heart::before, | ||
.mw-popup-heart::after { | .mw-popup-heart::after { | ||
width: | width: 92px; | ||
height: | height: 92px; | ||
} | } | ||
.mw-popup-heart::before { top: - | .mw-popup-heart::before { top: -46px; } | ||
.mw-popup-heart::after { left: | .mw-popup-heart::after { left: 46px; } | ||
} | } | ||