MediaWiki:Common.css: Unterschied zwischen den Versionen
Admin (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
Admin (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
| Zeile 465: | Zeile 465: | ||
/* Slàinte | /* Popup Container */ | ||
.mw-popup-overlay { | |||
position: fixed; inset: 0; | |||
background: rgba(0,0,0,0.45); | |||
z-index: 10000; | |||
} | |||
.mw-popup-modal { | |||
position: fixed; top: 50%; left: 50%; | |||
transform: translate(-50%, -50%); | |||
background: #fff; | |||
max-width: 96%; width: 720px; | |||
padding: 22px 26px 26px; | |||
border-radius: 14px; | |||
z-index: 10001; | |||
text-align: center; | |||
box-shadow: 0 10px 28px rgba(0,0,0,0.35); | |||
max-height: 94vh; overflow-y: auto; | |||
} | |||
/* Canvas Bühne */ | |||
.mw-fw-canvas-wrap { | |||
position: relative; | |||
height: 300px; | |||
margin: -6px -6px 12px; | |||
border-radius: 10px; overflow: hidden; | |||
background: radial-gradient(ellipse at center, #0b1c38 0%, #061025 60%, #03060d 100%); | |||
box-shadow: inset 0 0 30px rgba(0,0,0,0.65); | |||
} | |||
.mw-fw-canvas { display:block; width:100%; height:100%; } | |||
/* Slàinte Text */ | |||
.mw-slainte-toast { | .mw-slainte-toast { | ||
font: 700 clamp(20px, 4.2vw, 36px) / 1.15 "Segoe UI", Roboto, Arial, sans-serif; | font: 700 clamp(20px, 4.2vw, 36px) / 1.15 "Segoe UI", Roboto, Arial, sans-serif; | ||
| Zeile 480: | Zeile 510: | ||
} | } | ||
/* Text Animation */ | |||
@keyframes toast-in { | @keyframes toast-in { | ||
0% { opacity: 0; transform: translateY(12px) scale(0.98); filter: blur(2px); } | 0% { opacity: 0; transform: translateY(12px) scale(0.98); filter: blur(2px); } | ||
| Zeile 490: | Zeile 521: | ||
} | } | ||
/* | /* Buttons */ | ||
.mw-popup-button-row { display:flex; justify-content:center; margin-top: 12px; } | |||
.mw-popup-close { | |||
padding: 10px 16px; border: none; background: #36c; color:#fff; | |||
border-radius: 6px; cursor: pointer; font-size: 1em; | |||
} | |||
.mw-popup-close:hover { background:#258; } | |||
/* Karten-Bereich */ | |||
.mw-wnews-cards { display: flex; gap: 10px; flex-wrap: wrap; justify-content:center; } | |||
.mw-wnews-card { display:block; width:300px; text-decoration:none; color:#000; border-radius:8px; overflow:hidden; box-shadow:0 3px 8px rgba(0,0,0,0.15); transition:transform .2s; } | |||
.mw-wnews-card:hover { transform:translateY(-3px); } | |||
.mw-wnews-thumb img { width:100%; height:200px; object-fit:cover; } | |||
.mw-wnews-meta { padding:8px; } | |||
.mw-wnews-title { font-weight:600; margin-bottom:4px; } | |||
.mw-wnews-cta { color:#36c; font-size:.9em; } | |||
/* Motion reduce */ | |||
@media (prefers-reduced-motion: reduce) { | @media (prefers-reduced-motion: reduce) { | ||
.mw-slainte-toast { animation: none; opacity: 1; transform: none; } | .mw-slainte-toast { animation: none; opacity: 1; transform: none; } | ||
} | |||
/* Mobil */ | |||
@media (max-width: 600px) { | |||
.mw-popup-modal { width: calc(100% - 20px); padding: 16px; } | |||
.mw-fw-canvas-wrap { height: 240px; margin: -4px -4px 10px; } | |||
.mw-wnews-card { width: 100%; } | |||
} | } | ||