MediaWiki:Common.css: Unterschied zwischen den Versionen

← Zum vorherigen Versionsunterschied Zum nächsten Versionsunterschied →

@@ Zeile 465: / Zeile 465: @@
-/* Popup Container */
+/* Overlay & Modal */
-.mw-popup-overlay {
+.mwnews-overlay{
-   position: fixed; inset: 0;
+   position:fixed; inset:0;
-   background: rgba(0,0,0,0.45);
+   background:rgba(0,0,0,.45);
-   z-index: 10000;
+   z-index:10000;
 }
-.mw-popup-modal {
+.mwnews-modal{
-   position: fixed; top: 50%; left: 50%;
+   position:fixed; top:50%; left:50%;
-   transform: translate(-50%, -50%);
+   transform:translate(-50%,-50%);
-   background: #fff;
+   background:#fff; color:#111;
-   max-width: 96%; width: 720px;
+   max-width:96%; width:760px;
-   padding: 22px 26px 26px;
+   padding:22px 26px 26px;
-   border-radius: 14px;
+   border-radius:14px;
-   z-index: 10001;
+   z-index:10001;
-   text-align: center;
+   text-align:center;
-   box-shadow: 0 10px 28px rgba(0,0,0,0.35);
+   box-shadow:0 10px 28px rgba(0,0,0,.35);
-   max-height: 94vh; overflow-y: auto;
+   max-height:94vh; overflow-y:auto;
 }
+.mwnews-modal h2{ margin:8px 0 6px; font-size:1.35em; }
+.mwnews-intro{ margin:.5em 0 1em; font-size:1.06em; line-height:1.5; }
-/* Canvas Bühne */
+/* Karten */
-.mw-fw-canvas-wrap {
+.mwnews-cards{
-   position: relative;
+   display:flex; gap:12px; flex-wrap:wrap; justify-content:center;
-  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%; }
+.mwnews-card{
+  display:block; width:300px; text-decoration:none; color:inherit;
-/* Slàinte Text */
+   background:#f8f9fa; border:1px solid #e3e6e8; border-radius:10px; overflow:hidden;
-.mw-slainte-toast {
+   transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
-  font: 700 clamp(20px, 4.2vw, 36px) / 1.15 "Segoe UI", Roboto, Arial, sans-serif;
+   box-shadow:0 3px 8px rgba(0,0,0,.12);
-  color: #fff;
-   background: linear-gradient(0deg, #ffc76a, #ffffff);
-  -webkit-background-clip: text;
-  background-clip: text;
-  -webkit-text-fill-color: transparent;
-  text-shadow: 0 0 18px rgba(255,200,120,0.35);
-  margin: 6px 0 2px;
-   opacity: 0;
-  transform: translateY(8px) scale(0.98);
-  animation: toast-in 900ms ease-out forwards, toast-glow 3.5s ease-in-out 900ms infinite;
-}
-/* Text Animation */
-@keyframes toast-in {
-%   { opacity: 0; transform: translateY(12px) scale(0.98); filter: blur(2px); }
-%  { opacity: 1; transform: translateY(0)    scale(1.00); filter: blur(0); }
-% { opacity: 1; transform: translateY(0)    scale(1.00); }
-}
-@keyframes toast-glow {
-%,100% { text-shadow: 0 0 12px rgba(255,200,120,0.25), 0 0 0 rgba(255,255,255,0); }
-%     { text-shadow: 0 0 22px rgba(255,200,120,0.5),  0 0 6px rgba(255,255,255,0.25); }
 }
+.mwnews-card:hover{ transform:translateY(-2px); box-shadow:0 8px 18px rgba(0,0,0,.18); border-color:#d5dadd; }
+.mwnews-thumb img{ display:block; width:100%; height:210px; object-fit:cover; }
+.mwnews-meta{ padding:10px 12px; }
+.mwnews-title{ font-weight:700; font-size:1.02em; margin-bottom:6px; }
+.mwnews-cta{ color:#36c; font-weight:600; }
 /* Buttons */
-.mw-popup-button-row { display:flex; justify-content:center; margin-top: 12px; }
+.mwnews-btnrow{ display:flex; justify-content:center; gap:10px; margin-top:12px; }
-.mw-popup-close {
+.mwnews-close{
-   padding: 10px 16px; border: none; background: #36c; color:#fff;
+   padding:10px 16px; border:0; background:#36c; color:#fff;
-   border-radius: 6px; cursor: pointer; font-size: 1em;
+   border-radius:6px; cursor:pointer; font-size:1em; font-weight:600;
-}
-.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) {
-  .mw-slainte-toast { animation: none; opacity: 1; transform: none; }
 }
+.mwnews-close:hover{ background:#258; }
 /* Mobil */
-@media (max-width: 600px) {
+@media (max-width:640px){
-   .mw-popup-modal { width: calc(100% - 20px); padding: 16px; }
+   .mwnews-modal{ width:calc(100% - 20px); padding:16px; }
-   .mw-fw-canvas-wrap { height: 240px; margin: -4px -4px 10px; }
+   .mwnews-card{ width:100%; }
-   .mw-wnews-card { width: 100%; }
+   .mwnews-thumb img{ height:240px; object-fit:contain; background:#000; }
 }