MediaWiki:Common.css: Unterschied zwischen den Versionen
Admin (Diskussion | Beiträge) Der Seiteninhalt wurde durch einen anderen Text ersetzt: „→Das folgende CSS wird für alle Benutzeroberflächen geladen.: “ Markierung: Ersetzt |
Admin (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
| Zeile 1: | Zeile 1: | ||
/* Das folgende CSS wird für alle Benutzeroberflächen geladen. */ | /* Das folgende CSS wird für alle Benutzeroberflächen geladen. */ | ||
/* ===== Popup Hintergrund ===== */ | |||
.mw-popup-overlay { | |||
position: fixed; | |||
inset: 0; | |||
background: rgba(0,0,0,0.4); | |||
z-index: 10000; | |||
} | |||
/* ===== Popup Container ===== */ | |||
.mw-popup-modal { | |||
position: fixed; | |||
top: 50%; | |||
left: 50%; | |||
transform: translate(-50%, -50%); | |||
background: #fff; | |||
max-width: 90%; | |||
width: 520px; | |||
padding: 20px; | |||
border-radius: 10px; | |||
z-index: 10001; | |||
text-align: center; | |||
box-shadow: 0 6px 20px rgba(0,0,0,0.3); | |||
} | |||
/* ===== Logo mit Herz-Effekt ===== */ | |||
.mw-popup-logo { | |||
position: relative; | |||
display: inline-block; | |||
margin-bottom: 10px; | |||
} | |||
.mw-popup-logo img { | |||
max-width: 120px; | |||
position: relative; | |||
z-index: 2; | |||
} | |||
/* Herz-Shape hinter dem Logo */ | |||
.mw-popup-heart { | |||
position: absolute; | |||
top: 50%; | |||
left: 50%; | |||
width: 140px; | |||
height: 140px; | |||
background: red; | |||
transform: translate(-50%, -50%) rotate(-45deg); | |||
transform-origin: center; | |||
z-index: 1; | |||
animation: pulse 1.5s infinite; | |||
} | |||
.mw-popup-heart::before, | |||
.mw-popup-heart::after { | |||
content: ""; | |||
position: absolute; | |||
width: 140px; | |||
height: 140px; | |||
background: red; | |||
border-radius: 50%; | |||
} | |||
.mw-popup-heart::before { top: -70px; left: 0; } | |||
.mw-popup-heart::after { left: 70px; top: 0; } | |||
@keyframes pulse { | |||
0%, 100% { transform: translate(-50%, -50%) rotate(-45deg) scale(1); } | |||
50% { transform: translate(-50%, -50%) rotate(-45deg) scale(1.1); } | |||
} | |||
/* ===== Titel & Text ===== */ | |||
.mw-popup-modal h2 { | |||
margin: 0 0 0.6em; | |||
font-size: 1.25em; | |||
} | |||
.mw-popup-content p { | |||
margin: 0.5em 0; | |||
font-size: 1.05em; | |||
line-height: 1.45; | |||
text-align: center; | |||
} | |||
/* ===== Button ===== */ | |||
.mw-popup-close { | |||
margin-top: 1em; | |||
padding: 8px 12px; | |||
border: none; | |||
background: #36c; | |||
color: #fff; | |||
border-radius: 6px; | |||
cursor: pointer; | |||
} | |||
.mw-popup-close:hover { background: #258; } | |||
/* ===== Mobile Tweaks ===== */ | |||
@media (max-width: 480px) { | |||
.mw-popup-modal { width: calc(100% - 32px); padding: 16px; } | |||
.mw-popup-logo img { max-width: 96px; } | |||
.mw-popup-heart, | |||
.mw-popup-heart::before, | |||
.mw-popup-heart::after { width: 120px; height: 120px; } | |||
.mw-popup-heart::before { top: -60px; } | |||
.mw-popup-heart::after { left: 60px; } | |||
} | |||