MediaWiki:Common.css

Aus Rettungsdienst-Wiki
Zur Navigation springen Zur Suche springen

Hinweis: Leere nach dem Veröffentlichen den Browser-Cache, um die Änderungen sehen zu können.

  • Firefox/Safari: Umschalttaste drücken und gleichzeitig Aktualisieren anklicken oder entweder Strg+F5 oder Strg+R (⌘+R auf dem Mac) drücken
  • Google Chrome: Umschalttaste+Strg+R (⌘+Umschalttaste+R auf dem Mac) drücken
  • Internet Explorer/Edge: Strg+F5 drücken oder Strg drücken und gleichzeitig Aktualisieren anklicken
  • Opera: Strg+F5
/* Rechter Werbe-Block */
#ad-box {
  float: right;
  width: 300px;
  max-width: 32%;
  margin: 0 0 1rem 1rem;
  background: #fffef7;
  border: 1px solid #e5dfb3;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  position: sticky;
  top: 1rem;
  font-size: 90%;
}
#ad-box .ad-header { display:flex; align-items:center; gap:.5em; padding:.6em .8em; border-bottom:1px solid #efe7b9; font-weight:700; }
#ad-box .ad-badge { background:#ffea9e; border:1px solid #e0c200; padding:2px 6px; border-radius:4px; text-transform:uppercase; }
#ad-box .ad-body { padding:.6em .8em; }
#ad-box ul { list-style:none; margin:.2em 0; padding:0; }
#ad-box li { margin:.35em 0; }
#ad-box a { text-decoration:none; }
#ad-box a:hover { text-decoration:underline; }

/* Auf schmalen Bildschirmen unten im Content anzeigen */
@media (max-width: 1024px) {
  #ad-box { float:none; max-width:100%; position:static; margin:.75rem 0; }
}
/* --- Adblocker-Hinweis --- */
#adblock-hinweis {
  display: none;
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  z-index: 10000;
  background: #fffbe5;
  border: 1px solid #e6cf8b;
  border-radius: 8px;
  padding: .8em 1em;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
  font-size: 90%;
  color: #444;
}
#adblock-hinweis strong {
  color: #b28a00;
}
#adblock-hinweis button {
  float: right;
  background: #b28a00;
  border: none;
  color: white;
  padding: 0.2em 0.7em;
  border-radius: 4px;
  cursor: pointer;
}
#adblock-hinweis button:hover {
  background: #8f7100;
}
/* ==== Consent Banner & Modal (leichtgewichtig, ohne externe Libs) ==== */
#consent-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10000;
  background: #111; color: #fff; padding: .9rem 1rem; box-shadow: 0 -2px 10px rgba(0,0,0,.25);
  display: none; font-size: 14px;
}
#consent-bar .inner { max-width: 1100px; margin: 0 auto; display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
#consent-bar .text { flex: 1; min-width: 240px; }
#consent-bar a { color: #ffd866; text-decoration: underline; }
#consent-bar .btn {
  background: #ffd866; color: #111; border: 0; padding: .5rem .8rem; border-radius: 6px; font-weight: 700; cursor: pointer;
}
#consent-bar .btn.secondary { background: transparent; color: #ffd866; border: 1px solid #ffd866; }
#consent-bar .btn-group { display: flex; gap: .5rem; }

/* Modal */
#consent-modal {
  position: fixed; inset: 0; z-index: 10001; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.55);
}
#consent-modal .dialog {
  background: #fff; color: #222; width: min(680px, 92vw); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.3);
}
#consent-modal .head {
  padding: .9rem 1rem; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center;
}
#consent-modal .body { padding: 1rem; }
#consent-modal .row { display: flex; justify-content: space-between; align-items: center; padding: .6rem 0; border-bottom: 1px dashed #eee; gap: 1rem; }
#consent-modal .row:last-child { border-bottom: 0; }
#consent-modal .name { font-weight: 700; }
#consent-modal .hint { color: #666; font-size: 13px; }
#consent-modal .switch { position: relative; width: 44px; height: 24px; }
#consent-modal .switch input { display: none; }
#consent-modal .slider {
  position: absolute; inset: 0; background: #ddd; border-radius: 999px; cursor: pointer; transition: .15s;
}
#consent-modal .slider:before {
  content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: .15s;
}
#consent-modal input:checked + .slider { background: #2c7be5; }
#consent-modal input:checked + .slider:before { transform: translateX(20px); }

#consent-modal .foot { display: flex; gap: .5rem; justify-content: flex-end; padding: .9rem 1rem; border-top: 1px solid #eee; }
#consent-modal .btn {
  background: #2c7be5; color: #fff; border: 0; padding: .55rem .9rem; border-radius: 6px; font-weight: 700; cursor: pointer;
}
#consent-modal .btn.secondary { background: #f1f3f5; color: #111; }
#consent-modal .badge {
  font-size: 12px; padding: 2px 6px; border-radius: 999px; background: #eef2ff; color: #334; border: 1px solid #dde3ff;
}

/* Hinweisbox nur für eingeloggte Benutzer */
.user-message {
  background-color: #e0f0ff;
  border: 2px solid #0074D9;
  border-radius: 8px;
  padding: 10px;
  margin: 10px 0;
  font-weight: bold;
  color: #003366;
}

/* Besucher (nicht eingeloggt) sehen das nicht */
.ns-0 .user-message {
  display: none;
}

/* Link im Footer (z. B. „Cookie-Einstellungen ändern“) */
.cookie-settings-link { cursor: pointer; }