MediaWiki:Common.css: Unterschied zwischen den Versionen
Erscheinungsbild
Sascha (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
Sascha (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
| (17 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
| Zeile 1: | Zeile 1: | ||
/* ============================================================ | /* ============================================================ | ||
FISI WISSENDATENBANK - | FISI WISSENDATENBANK - CORE DESIGN SYSTEM | ||
============================================================ */ | ============================================================ */ | ||
/* 1. | /* 1. GLOBALE FARB-VARIABLEN (Dein Screenshot-Fix) */ | ||
:root { | |||
--color-base: #e2e8f0; | |||
--color-base-fixed: #e2e8f0; | |||
--background-color-base: #1b222d; | |||
--color-emphasized: #5891ff; | |||
--color-progressive: #5891ff; | |||
--box-shadow-color-base: rgba(0, 0, 0, 0.5); | |||
/* Dies zwingt den Inhaltsbereich (auch Login) auf Dunkel */ | |||
--background-color-neutral-subtle: transparent !important; | |||
/* Wir überschreiben hier die Standard-MediaWiki-Werte */ | |||
--mw-color-link: #5891ff; | |||
--mw-color-link-hover: #7eb0ff; | |||
} | } | ||
. | /* Der entscheidende Selektor für die Login-Seite laut MediaWiki-Doku */ | ||
.mw-special-Userlogin #content, | |||
.mw-special-Userlogin .mw-body { | |||
background-color: transparent !important; | |||
background-image: none !important; | |||
} | |||
/* 2. LAYOUT & BREITE */ | |||
html, body, .mw-page-container { | |||
background: #1b222d url("/resources/assets/background.jpg") fixed center/cover !important; | |||
max-width: 100% !important; | |||
} | } | ||
.vector- | /* Sidebar-Optimierung für Untermenüs */ | ||
margin | .vector-menu-portal .vector-menu-content li { | ||
margin: 4px 0 !important; | |||
} | } | ||
/* 2. | /* Stil für die 2. Ebene (die Unterpunkte) */ | ||
. | .vector-menu-portal .vector-menu-content li li { | ||
padding-left: 15px !important; | |||
font-size: 0.9em !important; | |||
border-left: 1px solid rgba(88, 145, 255, 0.2); /* Dezente Linie zur Orientierung */ | |||
} | } | ||
/* 3. | |||
. | /* 3. HEADER-REPARATUR: Verteilung auf volle Breite */ | ||
.vector-header { | |||
display: flex !important; | display: flex !important; | ||
justify-content: space-between !important; /* Verteilt Elemente nach außen */ | |||
align-items: center !important; | align-items: center !important; | ||
padding: 0 40px !important; /* Abstand zu den Bildschirmrändern */ | |||
background: rgba(15, 23, 42, 0.8) !important; | |||
backdrop-filter: blur(10px); | |||
border-bottom: 1px solid rgba(88, 145, 255, 0.2) !important; | |||
max-width: 100% !important; | |||
} | } | ||
/* | /* Logo & Suche gruppieren */ | ||
.vector-header-start { | |||
flex: 1 !important; | |||
display: flex !important; | |||
align-items: center !important; | |||
} | } | ||
/* Suchleiste in die Mitte rücken */ | |||
.vector-header-central { | |||
flex: 2 !important; | |||
display: flex !important; | |||
justify-content: center !important; | |||
} | } | ||
/* | /* Benutzer-Tools (Rechts) */ | ||
.vector-header-end { | |||
. | flex: 1 !important; | ||
display: flex !important; | |||
justify-content: flex-end !important; | |||
} | } | ||
/* | /* 4. LOGO-SKALIERUNG */ | ||
.mw- | .mw-logo { | ||
height: 150px !important; | |||
transition: transform 0.3s ease; | |||
} | } | ||
.mw-logo-icon { | |||
height: 145px; | |||
width: auto; | |||
} | } | ||
.mw-logo:hover { | |||
transform: scale(1.05); | |||
} | } | ||
/* | /* 5. BOX-DESIGN (TOC & MAIN) */ | ||
#vector-toc-pinned-container, | .mw-body, | ||
#vector-toc-pinned-container, | |||
.vector-pinned-container { | .vector-pinned-container { | ||
background-color: rgba(27, 34, 45, 0.94) !important; | background-color: rgba(27, 34, 45, 0.94) !important; | ||
border: 1px solid rgba(88, 145, 255, 0. | border: 1px solid rgba(88, 145, 255, 0.2) !important; | ||
border-radius: | border-radius: 12px !important; | ||
box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important; | box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important; | ||
backdrop-filter: blur(12px) !important; | backdrop-filter: blur(12px) !important; | ||
padding: 25px !important; | |||
} | } | ||
/* | /* 6. UI-CLEANUP (Erscheinungsbild & After-Fix) */ | ||
#vector-appearance-pinned-container, | #vector-appearance-pinned-container, | ||
.vector-appearance-dropdown, | .vector-appearance-dropdown, | ||
.vector-pinnable-header-toggle-button, | .vector-pinnable-header-toggle-button, | ||
.vector- | .vector-column-start::after, | ||
.vector-sticky-pinned-container::after { | |||
.vector- | |||
display: none !important; | display: none !important; | ||
content: none !important; | content: none !important; | ||
} | } | ||
/* | /* 7. FORMULAR-ELEMENTE (Suche & Buttons) */ | ||
.cdx-text-input__input { | |||
color: #5891ff !important; | background-color: #0f172a !important; | ||
color: white !important; | |||
border: 1px solid #5891ff !important; | |||
border-radius: 8px !important; | |||
} | } | ||
. | /* 8. ICONS & LINKS */ | ||
.mw-ui-icon { | |||
filter: invert(1) brightness(1.5) !important; | |||
} | } | ||
. | h1, h2, h3, .mw-headline { | ||
color: | color: var(--color-emphasized) !important; | ||
border-bottom: 1px solid rgba(88, 145, 255, 0.1) !important; | |||
} | } | ||
.vector-column-start { | .vector-column-start { | ||
margin-top: 0px !important; | |||
margin-top: 0px | |||
} | } | ||
Aktuelle Version vom 29. April 2026, 13:19 Uhr
/* ============================================================
FISI WISSENDATENBANK - CORE DESIGN SYSTEM
============================================================ */
/* 1. GLOBALE FARB-VARIABLEN (Dein Screenshot-Fix) */
:root {
--color-base: #e2e8f0;
--color-base-fixed: #e2e8f0;
--background-color-base: #1b222d;
--color-emphasized: #5891ff;
--color-progressive: #5891ff;
--box-shadow-color-base: rgba(0, 0, 0, 0.5);
/* Dies zwingt den Inhaltsbereich (auch Login) auf Dunkel */
--background-color-neutral-subtle: transparent !important;
/* Wir überschreiben hier die Standard-MediaWiki-Werte */
--mw-color-link: #5891ff;
--mw-color-link-hover: #7eb0ff;
}
/* Der entscheidende Selektor für die Login-Seite laut MediaWiki-Doku */
.mw-special-Userlogin #content,
.mw-special-Userlogin .mw-body {
background-color: transparent !important;
background-image: none !important;
}
/* 2. LAYOUT & BREITE */
html, body, .mw-page-container {
background: #1b222d url("/resources/assets/background.jpg") fixed center/cover !important;
max-width: 100% !important;
}
/* Sidebar-Optimierung für Untermenüs */
.vector-menu-portal .vector-menu-content li {
margin: 4px 0 !important;
}
/* Stil für die 2. Ebene (die Unterpunkte) */
.vector-menu-portal .vector-menu-content li li {
padding-left: 15px !important;
font-size: 0.9em !important;
border-left: 1px solid rgba(88, 145, 255, 0.2); /* Dezente Linie zur Orientierung */
}
/* 3. HEADER-REPARATUR: Verteilung auf volle Breite */
.vector-header {
display: flex !important;
justify-content: space-between !important; /* Verteilt Elemente nach außen */
align-items: center !important;
padding: 0 40px !important; /* Abstand zu den Bildschirmrändern */
background: rgba(15, 23, 42, 0.8) !important;
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(88, 145, 255, 0.2) !important;
max-width: 100% !important;
}
/* Logo & Suche gruppieren */
.vector-header-start {
flex: 1 !important;
display: flex !important;
align-items: center !important;
}
/* Suchleiste in die Mitte rücken */
.vector-header-central {
flex: 2 !important;
display: flex !important;
justify-content: center !important;
}
/* Benutzer-Tools (Rechts) */
.vector-header-end {
flex: 1 !important;
display: flex !important;
justify-content: flex-end !important;
}
/* 4. LOGO-SKALIERUNG */
.mw-logo {
height: 150px !important;
transition: transform 0.3s ease;
}
.mw-logo-icon {
height: 145px;
width: auto;
}
.mw-logo:hover {
transform: scale(1.05);
}
/* 5. BOX-DESIGN (TOC & MAIN) */
.mw-body,
#vector-toc-pinned-container,
.vector-pinned-container {
background-color: rgba(27, 34, 45, 0.94) !important;
border: 1px solid rgba(88, 145, 255, 0.2) !important;
border-radius: 12px !important;
box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
backdrop-filter: blur(12px) !important;
padding: 25px !important;
}
/* 6. UI-CLEANUP (Erscheinungsbild & After-Fix) */
#vector-appearance-pinned-container,
.vector-appearance-dropdown,
.vector-pinnable-header-toggle-button,
.vector-column-start::after,
.vector-sticky-pinned-container::after {
display: none !important;
content: none !important;
}
/* 7. FORMULAR-ELEMENTE (Suche & Buttons) */
.cdx-text-input__input {
background-color: #0f172a !important;
color: white !important;
border: 1px solid #5891ff !important;
border-radius: 8px !important;
}
/* 8. ICONS & LINKS */
.mw-ui-icon {
filter: invert(1) brightness(1.5) !important;
}
h1, h2, h3, .mw-headline {
color: var(--color-emphasized) !important;
border-bottom: 1px solid rgba(88, 145, 255, 0.1) !important;
}
.vector-column-start {
margin-top: 0px !important;
}