MediaWiki:Common.css: Unterschied zwischen den Versionen
Admin (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
Admin (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
| Zeile 24: | Zeile 24: | ||
} | } | ||
/* ===== Logo mit Herz | /* ===== Logo-Bereich mit Herz ===== */ | ||
.mw-popup-logo { | .mw-popup-logo { | ||
position: relative; | position: relative; | ||
| Zeile 31: | Zeile 31: | ||
} | } | ||
.mw-popup-logo img { | .mw-popup-logo img { | ||
max-width: | max-width: 100px; /* Desktop-Logo-Größe */ | ||
position: relative; | position: relative; | ||
z-index: 2; | z-index: 2; | ||
} | } | ||
/* Herz- | /* ===== Herz-Hintergrund – Desktop ===== */ | ||
.mw-popup-heart { | .mw-popup-heart { | ||
position: absolute; | position: absolute; | ||
top: | top: 42%; /* leicht höher als Mitte */ | ||
left: 50%; | left: 50%; | ||
width: | width: 120px; | ||
height: | height: 120px; | ||
background: red; | background: red; | ||
transform: translate(-50%, -50%) rotate(-45deg); | transform: translate(-50%, -50%) rotate(-45deg); | ||
| Zeile 53: | Zeile 53: | ||
content: ""; | content: ""; | ||
position: absolute; | position: absolute; | ||
width: | width: 120px; | ||
height: | height: 120px; | ||
background: red; | background: red; | ||
border-radius: 50%; | border-radius: 50%; | ||
} | } | ||
.mw-popup-heart::before { top: - | .mw-popup-heart::before { | ||
.mw-popup-heart::after | top: -60px; | ||
left: 0; | |||
} | |||
.mw-popup-heart::after { | |||
left: 60px; | |||
top: 0; | |||
} | |||
/* ===== Puls-Animation ===== */ | |||
@keyframes pulse { | @keyframes pulse { | ||
0%, 100% { transform: translate(-50%, -50%) rotate(-45deg) scale(1); } | 0%, 100% { transform: translate(-50%, -50%) rotate(-45deg) scale(1); } | ||
| Zeile 88: | Zeile 95: | ||
cursor: pointer; | cursor: pointer; | ||
} | } | ||
.mw-popup-close:hover { background: #258; } | .mw-popup-close:hover { | ||
background: #258; | |||
} | |||
/* ===== Mobile | /* ===== Mobile-Anpassung ===== */ | ||
@media (max-width: 480px) { | @media (max-width: 480px) { | ||
.mw-popup-modal { width: calc(100% - 32px); padding: 16px; } | .mw-popup-modal { | ||
.mw-popup-logo img { max-width: | width: calc(100% - 32px); | ||
.mw-popup-heart | padding: 16px; | ||
} | |||
.mw-popup-logo img { | |||
max-width: 80px; /* kleineres Logo */ | |||
} | |||
.mw-popup-heart { | |||
top: 38%; /* noch höher setzen auf Mobile */ | |||
width: 90px; | |||
height: 90px; | |||
} | |||
.mw-popup-heart::before, | .mw-popup-heart::before, | ||
.mw-popup-heart::after { width: | .mw-popup-heart::after { | ||
.mw-popup-heart::before { top: - | width: 90px; | ||
.mw-popup-heart::after { left: | height: 90px; | ||
} | |||
.mw-popup-heart::before { top: -45px; } | |||
.mw-popup-heart::after { left: 45px; } | |||
} | } | ||