MediaWiki:Vector-2022.css

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
Edge: Strg+F5 drücken oder Strg drücken und gleichzeitig Aktualisieren anklicken

/* Ausgeblendete Elemente */
#vector-appearance,
#vector-appearance-dropdown,
#mw-navigation,
#catlinks,
#mw-normal-catlinks,
#pt-createaccount-2,
#pt-login-2,
#ca-talk,
#ca-unwatch,
#ca-watch,
#pt-watchlist-2,
#ca-talk-sticky-header,
#ca-history-sticky-header,
#ca-watchstar-sticky-header,
#ca-subject-sticky-header,
#ca-viewsource-sticky-header,
#ca-addsection-sticky-header,
nav.vector-appearance-landmark,
.vector-column-start,
.vector-main-menu-container,
.vector-column-end,
.vector-sticky-pinned-container,
.vector-header.mw-header,
.vector-page-tools-dropdown,
.vector-page-toolbar-container,
.vector-sticky-header-icon-start.vector-button-flush-left.vector-button-flush-right,
.cdx-button.cdx-search-input__end-button,
.mw-body-header.vector-page-titlebar,
.catlinks,
.mw-navigation,
.mw-logo-container,
.mw-normal-catlinks {
  display: none !important;
}

/* Klassen (.class) */
.mw-page-container,
.mw-page-container-inner {
  background: transparent !important;
}

/* Einzelne Klasse überschreiben */
.mw-page-container-inner {
  display: block !important;
}

/* =================
   Sticky-Header
   ================= */
/* Sticky-Header als Hauptheader oben fixieren */
.client-js.vector-sticky-header-enabled .vector-sticky-header-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: flex !important;
    transform: translateY(0);
    opacity: 1;
}

/* Sticky-Header-Layout: drei Spalten */
.vector-sticky-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* neue Mittel-Spalte: Logo + Titel zentriert */
.pixo-sticky-center {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;   /* horizontal zentriert */
    align-items: center;       /* vertikal zentriert */
}

/* optional: linke und rechte Bereiche nicht zu breit werden lassen */
.vector-sticky-header-start,
.vector-sticky-header-end {
    flex: 0 0 auto;
}

/* Platz für den fixen Header schaffen (Höhe anpassen) */
.mw-page-container {
    padding-top: 4.5rem; /* an reale Header-Höhe anpassen */
}

/* Logo/Titel im Sticky-Header etwas kompakter */
.pixo-sticky-logo .mw-logo-icon {
    height: 40px;
    width: 40px;
}

/* Anker-Sprünge nicht vom Header überdecken */
body.vector-sticky-header-visible {
    scroll-padding-top: 4.5rem;
}

/* Icon im Vector-2022-Logo austauschen */
.mw-logo-icon {
    content: url("/resources/assets/wip-logo.png");
    width: 200px !important;
    height: 60px !important;
    margin: 0px !important;
}

/* 1. Gesamte Such-Komponente im Sticky-Header schmal machen */
.vector-sticky-header #vector-sticky-search-form .cdx-search-input {
    max-width: 1rem;   /* so wählen, dass die rote Linie rechts der Box liegt */
    width: 1rem;
}

/* 2. Textfeld-Container mit Icon füllt nur diesen Bereich, bleibt transparent */
.vector-sticky-header #vector-sticky-search-form .cdx-text-input.cdx-text-input--has-start-icon {
    width: 100%;
    background-color: transparent;
}

/* 3. Nur das Input einfärben */
.vector-sticky-header #vector-sticky-search-form .cdx-text-input__input {
    width: 100%;
    background-color: #10141842 !important;
    border: none;
    box-shadow: none;
}




/*   ==================
     Funktionen Einblenden 
    ==================   */
.vector-search-box-vue.vector-search-box-show-thumbnail.vector-search-box {
    display: block !important;
}

.pixo-sticky-logo .mw-logo-wordmark {
    font-size: 1.4rem;
    margin-left: 0.5rem;
}