MediaWiki:Common.css: Unterschied zwischen den Versionen
Admin (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
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- | .mw-popup-overlay { | ||
position: fixed; | position: fixed; | ||
inset: 0; | inset: 0; | ||
background: rgba(0,0,0,0. | background: rgba(0,0,0,0.4); | ||
z-index: 10000; | z-index: 10000; | ||
} | } | ||
.mw- | /* ===== Popup Container ===== */ | ||
.mw-popup-modal { | |||
position: fixed; | position: fixed; | ||
top: 50%; | |||
left: 50%; | |||
transform: translate(-50%, -50%); | transform: translate(-50%, -50%); | ||
background: #fff; | background: #fff; | ||
max-width: 90%; | |||
padding: 20px; | |||
border-radius: | border-radius: 8px; | ||
z-index: 10001; | z-index: 10001; | ||
text-align: center; | |||
box-shadow: 0 6px 20px rgba(0,0,0,0.3); | |||
} | } | ||
/* ===== Logo-Bereich mit Herz ===== */ | |||
.mw-popup-logo { | |||
position: relative; | |||
display: inline-block; | |||
margin-bottom: 10px; | |||
} | } | ||
.mw- | .mw-popup-logo img { | ||
max-width: 120px; | |||
position: relative; | |||
z-index: 2; | |||
} | } | ||
.mw- | /* Herz-Hintergrund */ | ||
.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; | |||
} | } | ||
/* Puls-Animation */ | |||
@keyframes pulse { | |||
0%, 100% { transform: translate(-50%, -50%) rotate(-45deg) scale(1); } | |||
50% { transform: translate(-50%, -50%) rotate(-45deg) scale(1.1); } | |||
} | } | ||
.mw- | /* ===== Überschrift ===== */ | ||
.mw-popup-modal h2 { | |||
font-size: | margin: 0 0 0.5em; | ||
font-size: 1.25em; | |||
} | } | ||
.mw- | /* ===== Textbereich ===== */ | ||
.mw-popup-content p { | |||
margin: 0.5em 0; | |||
font-size: 1.05em; | |||
line-height: 1.4; | |||
text-align: center; | |||
} | } | ||
/* | /* ===== Button ===== */ | ||
.mw- | .mw-popup-close { | ||
margin-top: 1em; | |||
padding: 8px 12px; | padding: 8px 12px; | ||
border-radius: | border: none; | ||
background: #36c; | |||
color: white; | |||
border-radius: 4px; | |||
cursor: pointer; | cursor: pointer; | ||
} | } | ||
.mw-popup-close:hover { | |||
.mw- | background: #258; | ||
} | } | ||
Version vom 1. September 2025, 21:57 Uhr
/* 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%;
padding: 20px;
border-radius: 8px;
z-index: 10001;
text-align: center;
box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}
/* ===== Logo-Bereich mit Herz ===== */
.mw-popup-logo {
position: relative;
display: inline-block;
margin-bottom: 10px;
}
.mw-popup-logo img {
max-width: 120px;
position: relative;
z-index: 2;
}
/* Herz-Hintergrund */
.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;
}
/* Puls-Animation */
@keyframes pulse {
0%, 100% { transform: translate(-50%, -50%) rotate(-45deg) scale(1); }
50% { transform: translate(-50%, -50%) rotate(-45deg) scale(1.1); }
}
/* ===== Überschrift ===== */
.mw-popup-modal h2 {
margin: 0 0 0.5em;
font-size: 1.25em;
}
/* ===== Textbereich ===== */
.mw-popup-content p {
margin: 0.5em 0;
font-size: 1.05em;
line-height: 1.4;
text-align: center;
}
/* ===== Button ===== */
.mw-popup-close {
margin-top: 1em;
padding: 8px 12px;
border: none;
background: #36c;
color: white;
border-radius: 4px;
cursor: pointer;
}
.mw-popup-close:hover {
background: #258;
}