MediaWiki:Common.css: Unterschied zwischen den Versionen

Version vom 17. Juni 2026, 21:09 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: #c9c9c9;
    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;
}