MediaWiki:Common.css: Unterschied zwischen den Versionen
Admin (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
Admin (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
| Zeile 147: | Zeile 147: | ||
.mw-popup-heart::before { top: -50px; } | .mw-popup-heart::before { top: -50px; } | ||
.mw-popup-heart::after { left: 50px; } | .mw-popup-heart::after { left: 50px; } | ||
} | |||
/* ===== Sticky Charity Banner ===== */ | |||
.mw-sticky-banner-active { | |||
/* Platz für den fixierten Banner schaffen – Höhe muss zum Banner passen */ | |||
--mw-sticky-banner-h: 52px; | |||
margin-top: var(--mw-sticky-banner-h); | |||
} | |||
.mw-sticky-banner { | |||
position: fixed; | |||
top: 0; left: 0; right: 0; | |||
background: #980000; /* dunkles Rot */ | |||
color: #fff; | |||
font: 600 14px/1.3 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; | |||
box-shadow: 0 2px 10px rgba(0,0,0,.25); | |||
} | |||
.mw-sticky-banner__inner { | |||
max-width: 1200px; | |||
margin: 0 auto; | |||
padding: 10px 16px; /* -> Gesamthöhe ~52px */ | |||
display: flex; | |||
align-items: center; | |||
gap: 12px; | |||
} | |||
.mw-sticky-banner__text { | |||
flex: 1 1 auto; | |||
white-space: nowrap; | |||
overflow: hidden; | |||
text-overflow: ellipsis; | |||
} | |||
.mw-sticky-banner__btns { | |||
display: flex; | |||
gap: 8px; | |||
flex: 0 0 auto; | |||
} | |||
.mw-sticky-banner__btn { | |||
display: inline-block; | |||
padding: 6px 10px; | |||
border-radius: 6px; | |||
text-decoration: none; | |||
font-weight: 700; | |||
font-size: 13px; | |||
line-height: 1; | |||
} | |||
.mw-sticky-banner__btn--primary { | |||
background: #ff7a00; /* Orange */ | |||
color: #fff; | |||
} | |||
.mw-sticky-banner__btn--primary:hover { background: #e56e00; } | |||
.mw-sticky-banner__btn--secondary { | |||
background: #ffffff20; /* leichte weiße Tönung */ | |||
color: #fff; | |||
border: 1px solid #ffffff55; | |||
} | |||
.mw-sticky-banner__btn--secondary:hover { | |||
background: #ffffff30; | |||
border-color: #ffffff88; | |||
} | |||
.mw-sticky-banner__close { | |||
appearance: none; | |||
border: none; | |||
background: transparent; | |||
color: #fff; | |||
font-size: 20px; | |||
line-height: 1; | |||
cursor: pointer; | |||
padding: 0 4px; | |||
} | |||
/* ===== Mobile Tweaks ===== */ | |||
@media (max-width: 600px) { | |||
.mw-sticky-banner-active { --mw-sticky-banner-h: 88px; } /* Banner höher → mehr top margin */ | |||
.mw-sticky-banner__inner { | |||
flex-wrap: wrap; | |||
gap: 8px 10px; | |||
padding: 10px 12px; /* Kompakter */ | |||
} | |||
.mw-sticky-banner__text { | |||
flex: 1 1 100%; | |||
white-space: normal; /* Umbruch erlauben */ | |||
} | |||
.mw-sticky-banner__btns { | |||
flex: 1 1 100%; | |||
justify-content: flex-start; | |||
} | |||
.mw-sticky-banner__btn { padding: 8px 12px; } | |||
.mw-sticky-banner__close { margin-left: auto; } | |||
} | } | ||