MediaWiki:Common.css: Unterschied zwischen den Versionen

Aktuelle Version vom 14. Juli 2026, 11:12 Uhr

/* Lokale Fonts (DSGVO-konform, kein Google-Server) */
@font-face {
    font-family: 'Merriweather';
    src: url('/zz_fonts/Merriweather-VariableFont_opsz,wdth,wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
}

@font-face {
    font-family: 'Merriweather';
    src: url('/zz_fonts/Merriweather-Italic-VariableFont_opsz,wdth,wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
}

/* Hellgrauer Hintergrund */
body,
.mw-page-container,
.mw-page-container-inner,
.vector-column-start,
.vector-column-end,
#mw-content-text {
    background-color: #d1d1d1 !important;
}

h2 {
    color: #002e01;
}
/* Schriftart */
body,
#mw-content-text,
.mw-body-content {
    font-family: 'Merriweather', Georgia, serif !important;
}

/* Linkfarben */
a,
a:link {
    color: #141414 !important;
    font-family: 'Merriweather', Georgia, serif !important;
}

a:visited {
    color: #360202 !important;
}


/* Weiße Balken entfernen */
#content,
.mw-body,
.mw-body-content {
    background-color: #d1d1d1 !important;
}

/* Tabs / Reiter oben */
li.mw-list-item,
#ca-edit,
#ca-history,
#ca-unwatch,
#ca-watch,
.mw-portlet-namespaces li,
.mw-portlet-views li {
    background-color: #d1d1d1 !important;
    border-color: #aaa !important;
}

/* Inhaltsverzeichnis */
.toc {
    background-color: #d1d1d1 !important;
    border-color: #aaa !important;
}

/* Footer */
#footer,
.mw-footer {
    background-color: #d1d1d1 !important;
}

/* Suchfeld-Box */
.pBody {
    background-color: #d1d1d1 !important;
}


/* Linke Sidebar (Navigation) */
#mw-panel,
.mw-sidebar,
nav#mw-panel {
    background-color: #d1d1d1 !important;
}


/* Kategorie-Präfix in Seitentiteln ausblenden */
.page-Kategorie_Ich_habe_keinen_Bock_heute h1.firstHeading .mw-page-title-namespace,
.page-Kategorie_Ich_habe_keinen_Bock_heute h1.firstHeading .mw-page-title-separator {
    display: none;
}

/* Zurück- und Oben Buttons */

#btn-back, #btn-top {
  position: fixed;
  right: 20px;
  padding: 10px 14px;
  background-color: #002e01;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 18px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  z-index: 9999;
  transition: opacity 0.3s, background-color 0.2s;
}
#btn-back { bottom: 70px; }
#btn-top  { bottom: 15px; opacity: 0; pointer-events: none; }
#btn-back:hover, #btn-top:hover { background-color: #004d02; }


/* Kategorie-Box unter Rezepten ausblenden */
.mw-normal-catlinks,
#catlinks {
    display: none !important;
}


/* Seitentitel der R & L Seite ersetzen */
.page-R_L .mw-page-title-main {
    visibility: hidden;
    position: relative;
}
.page-R_L .mw-page-title-main::after {
    content: "… by @n0n1mu5 ;-)";
    visibility: visible;
    position: absolute;
    left: 0;
    font-size: 1em;
    white-space: nowrap;
}


/* ===== Rezeptkarten-Layout (Schnelle Gerichte & ähnliche Seiten) ===== */

.rezept-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
    gap: 14px;
    margin-bottom: 10px;
}

.rezept-karte {
    background: #d8d8d8;
    border: 1px solid #c0b89a;
    border-radius: 10px;
    padding: 13px 15px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    transition: box-shadow 0.2s;
}

.rezept-karte:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.16);
}

.rezept-karte a {
    text-decoration: none;
}

.rezept-titel {
    font-size: 0.97em;
    font-weight: 700;
    color: #1a1a1a !important;
    line-height: 1.35;
}

.rezept-zeit {
    font-size: 0.8em;
    color: #8a4d00 !important;
    font-weight: 600;
}

.rezept-beschreibung {
    font-size: 0.84em;
    color: #555;
    line-height: 1.45;
}

.rezept-kategorie-titel {
    font-size: 1.15em;
    color: #002e01 !important;
    background: #d8d4c4;
    border-left: 4px solid #8a4d00;
    padding: 7px 13px;
    margin-top: 24px !important;
    margin-bottom: 12px !important;
    border-radius: 0 6px 6px 0;
}

.rezept-legende {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 22px;
    font-size: 0.82em;
    color: #555;
    background: #e8e4d8;
    border: 1px solid #c0b89a;
    border-radius: 8px;
    padding: 10px 14px;
}


/* ===== Bilder-Lightbox ===== */
.cb-lightbox-overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.92);
z-index: 10000;
display: none;
align-items: center;
justify-content: center;
flex-direction: column;
}
.cb-lightbox-overlay.cb-active {
display: flex;
}
.cb-lightbox-img-wrap {
display: flex;
align-items: center;
justify-content: center;
max-width: 100vw;
max-height: 85vh;
}
.cb-lightbox-overlay img {
max-width: 95vw;
max-height: 85vh;
object-fit: contain;
box-shadow: 0 0 30px rgba(0,0,0,0.6);
}
.cb-lightbox-caption {
color: #eee;
text-align: center;
margin-top: 12px;
font-size: 16px;
max-width: 80vw;
}
.cb-lightbox-counter {
color: #aaa;
text-align: center;
margin-top: 4px;
font-size: 13px;
}
.cb-lightbox-close {
position: absolute;
top: 18px;
right: 28px;
color: #fff;
font-size: 36px;
line-height: 1;
cursor: pointer;
background: none;
border: none;
padding: 4px 10px;
z-index: 10002;
}
.cb-lightbox-close:hover { color: #ccc; }
.cb-lightbox-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
color: #fff;
font-size: 42px;
cursor: pointer;
background: rgba(255,255,255,0.1);
border: none;
padding: 10px 16px;
z-index: 10002;
border-radius: 6px;
}
.cb-lightbox-nav:hover { background: rgba(255,255,255,0.25); }
.cb-lightbox-prev { left: 12px; }
.cb-lightbox-next { right: 12px; }
@media (max-width: 600px) {
.cb-lightbox-nav { font-size: 30px; padding: 8px 12px; }
.cb-lightbox-close { font-size: 28px; }
}
a.image.cb-lightbox-trigger { cursor: zoom-in; }