|
|
| Zeile 1: |
Zeile 1: |
| /* ========================================
| |
| GRUNDLEGENDE STYLES FÜR ALLE GERÄTE
| |
| ======================================== */
| |
|
| |
|
| html, body {
| |
| height: 100%;
| |
| margin: 0;
| |
| padding: 0;
| |
| }
| |
|
| |
| /* Background Color Content */
| |
| #mw-content {
| |
| background: #0a0a0a;
| |
| border-color: #0a0a0a;
| |
| }
| |
|
| |
| /* Seitenhintergrund */
| |
| #mw-content-container {
| |
| background-color: #000000;
| |
| border-bottom: none;
| |
| background-image: url(/images/resources/Background.png);
| |
| background-repeat: no-repeat;
| |
| background-position: center top;
| |
| background-attachment: fixed;
| |
| background-size: cover;
| |
| }
| |
|
| |
| /* Transparent damit BG durchscheint */
| |
| .mw-body, #content {
| |
| background: none;
| |
| }
| |
|
| |
| #mw-content-text {
| |
| background: transparent;
| |
| }
| |
|
| |
| /* ========================================
| |
| TYPOGRAFIE & FARBEN (ALLE GERÄTE)
| |
| ======================================== */
| |
|
| |
| /* Hauptüberschriften */
| |
| .mw-body .mw-heading1,
| |
| .mw-body h1 {
| |
| font-size: 2em;
| |
| color: #ffffff;
| |
| border-bottom: solid 3px #c8ccd1;
| |
| }
| |
|
| |
| .mw-body h1.firstHeading {
| |
| margin: 0.25em 0 0.5em;
| |
| border-bottom: solid 4px #9f9f9f;
| |
| display: none;
| |
| }
| |
|
| |
| /* Text Farben */
| |
| .mw-body,
| |
| p,
| |
| #mw-clearyourcache {
| |
| color: #ffffff;
| |
| }
| |
|
| |
| /* Link Farben - einheitlich für alle Geräte */
| |
| a {
| |
| text-decoration: none;
| |
| color: #ffffff;
| |
| }
| |
|
| |
| a:visited {
| |
| color: #ffffff;
| |
| }
| |
|
| |
| a.new,
| |
| .new a,
| |
| a.new:visited,
| |
| .new a:visited {
| |
| color: #ffffff;
| |
| }
| |
|
| |
| a:hover {
| |
| color: #0075ae;
| |
| text-decoration: none;
| |
| }
| |
|
| |
| /* ========================================
| |
| HEADER & NAVIGATION
| |
| ======================================== */
| |
|
| |
| /* Header Farben */
| |
| #mw-header-container,
| |
| .color-left,
| |
| .color-right {
| |
| background: #161616;
| |
| }
| |
|
| |
| .color-middle-container {
| |
| display: none;
| |
| }
| |
|
| |
| /* Logo oben links */
| |
| #p-banner img {
| |
| content: url("/images/resources/TopLeftLogo.png");
| |
| width: 155px;
| |
| height: auto;
| |
| display: block;
| |
| }
| |
|
| |
| /* ========================================
| |
| SEARCH
| |
| ======================================== */
| |
|
| |
| #searchInput {
| |
| background: #000000d6;
| |
| color: #ffffff;
| |
| border: none;
| |
| }
| |
|
| |
| #simpleSearch {
| |
| box-shadow: inset 0 2px 4px 0 rgba(0,0,0,0.05);
| |
| background: #000000d6;
| |
| position: relative;
| |
| border: none;
| |
| }
| |
|
| |
| form:not(.oo-ui-layout):not(.mw-htmlform-codex):not(:where(#search, #powersearch)) textarea,
| |
| form:not(.oo-ui-layout):not(.mw-htmlform-codex):not(:where(#search, #powersearch)) input {
| |
| border: solid 0px #c8ccd1;
| |
| border-radius: 0px;
| |
| background: #000000d6;
| |
| color: #ffffff;
| |
| }
| |
|
| |
| /* ========================================
| |
| SIDEBAR CHUNKS
| |
| ======================================== */
| |
|
| |
| #mw-site-navigation .sidebar-chunk,
| |
| #mw-related-navigation .sidebar-chunk {
| |
| box-shadow: 0 4px 30px rgba(0,0,0,0.1);
| |
| backdrop-filter: blur(5px);
| |
| margin: 1em 0;
| |
| line-height: 1.125;
| |
| word-wrap: break-word;
| |
| font-size: 0.95em;
| |
| background: #000000e5;
| |
| border: 1px solid #434360;
| |
| border-radius: 3px;
| |
| padding: 1.5em 1.5em 0;
| |
| color: #ffffff;
| |
| }
| |
|
| |
| #mw-site-navigation .sidebar-chunk h3,
| |
| #mw-related-navigation .sidebar-chunk h3 {
| |
| font-size: 16px;
| |
| padding: 0 0 0.5em;
| |
| margin: 0 0 0.5em;
| |
| border-bottom: 1px solid rgba(255, 255, 255, 0.58);
| |
| color: #ffffff;
| |
| }
| |
|
| |
| /* ========================================
| |
| FOOTER
| |
| ======================================== */
| |
|
| |
| .mw-footer-container {
| |
| border-top: solid 1px #54595d;
| |
| box-shadow: inset 0 7px 2px -4px rgba(0, 0, 0, 0.1);
| |
| color: #ffffff;
| |
| background-color: #161616;
| |
| }
| |
|
| |
| .mw-footer-container a {
| |
| color: #ffffff;
| |
| display: none;
| |
| }
| |
|
| |
| /* ========================================
| |
| TOOLS & SELECTIONS
| |
| ======================================== */
| |
|
| |
| .tools-inline li.selected a {
| |
| color: #ffffff;
| |
| }
| |
|
| |
| .tools-inline li.selected {
| |
| border-bottom-color: #afafaf;
| |
| }
| |
|
| |
| /* ========================================
| |
| FORMS & UPLOADS
| |
| ======================================== */
| |
|
| |
| ul#filetoc {
| |
| display: block;
| |
| margin-bottom: 2em;
| |
| background-color: #000000;
| |
| border-color: #000000;
| |
| }
| |
|
| |
| form:not(.oo-ui-layout):not(.mw-htmlform-codex):not(:where(#search, #powersearch)) fieldset legend {
| |
| font-weight: bold;
| |
| font-size: 110%;
| |
| color: #ffffff;
| |
| }
| |
|
| |
| td.mw-label {
| |
| text-align: right;
| |
| vertical-align: middle;
| |
| color: #ffffff;
| |
| }
| |
|
| |
| /* ========================================
| |
| LOGO STYLES
| |
| ======================================== */
| |
|
| |
| .mw-wiki-logo img {
| |
| width: 100% !important;
| |
| height: 100% !important;
| |
| margin: 0 !important;
| |
| border: 1px solid #191924;
| |
| border-radius: 0.25rem;
| |
| }
| |
|
| |
| img {
| |
| max-width: 100%;
| |
| height: auto;
| |
| image-rendering: -webkit-optimize-contrast;
| |
| }
| |
|
| |
| #p-logo-text a {
| |
| display: flex;
| |
| height: 100%;
| |
| align-items: center;
| |
| justify-content: center;
| |
| color: #ffffff;
| |
| font-family: 'Linux Libertine','Times New Roman','Liberation Serif','Nimbus Roman','Noto Serif','Times',serif;
| |
| font-variant: small-caps;
| |
| font-size: 1.85em;
| |
| }
| |
|
| |
| /* ========================================
| |
| SIDEBAR COLLAPSIBLE
| |
| ======================================== */
| |
|
| |
| .sidebar-collapsible {
| |
| cursor: pointer;
| |
| user-select: none;
| |
| position: relative;
| |
| padding-left: 20px;
| |
| }
| |
|
| |
| .sidebar-collapsible:before {
| |
| content: '▼';
| |
| position: absolute;
| |
| left: 5px;
| |
| transition: transform 0.2s;
| |
| }
| |
|
| |
| .sidebar-collapsible.closed:before {
| |
| transform: rotate(-90deg);
| |
| }
| |
|
| |
| .sidebar-collapsible:hover {
| |
| background-color: rgba(255, 255, 255, 0.1);
| |
| }
| |
|
| |
| #sidebar-collapsible-toggle {
| |
| cursor: pointer;
| |
| padding: 8px;
| |
| margin-bottom: 10px;
| |
| background-color: rgba(255, 255, 255, 0.05);
| |
| border-radius: 4px;
| |
| text-align: center;
| |
| font-weight: bold;
| |
| }
| |
|
| |
| #sidebar-collapsible-toggle:hover {
| |
| background-color: rgba(255, 255, 255, 0.1);
| |
| }
| |
|
| |
| /* ========================================
| |
| ICONS & SVG (ALLE GERÄTE)
| |
| ======================================== */
| |
|
| |
| /* Alle SVG-Pfade auf weiß setzen */
| |
| svg path,
| |
| svg circle,
| |
| svg rect,
| |
| svg polygon,
| |
| svg line {
| |
| fill: #ffffff !important;
| |
| }
| |
|
| |
| /* Alle SVG-Container auf weiß (für currentColor) */
| |
| svg,
| |
| .mw-ui-icon {
| |
| color: #ffffff !important;
| |
| background-color: transparent;
| |
| }
| |
|
| |
| /* Pseudo-Elemente (Font-Icons) */
| |
| .mw-ui-icon:before,
| |
| .mw-ui-icon:after,
| |
| #mw-sidebar-button:before,
| |
| #personal-extra:before,
| |
| .sidebar-inner .mw-portlet h3:before {
| |
| color: #ffffff !important;
| |
| }
| |
|
| |
| /* Icon Container */
| |
| .mw-ui-icon,
| |
| a.mw-ui-icon {
| |
| background-color: transparent;
| |
| }
| |
|
| |
| /* Mobile Menu Icons */
| |
| #mw-sidebar-button:before,
| |
| #personal-extra:before,
| |
| .sidebar-inner .mw-portlet h3:before {
| |
| filter: brightness(0) invert(1);
| |
| }
| |
|
| |
| /* ========================================
| |
| MOBILE STYLES (bis 850px)
| |
| ======================================== */
| |
|
| |
| @media screen and (max-width: 850px) {
| |
| /* Header auf Mobile */
| |
| #mw-header-container {
| |
| background: #161616;
| |
| }
| |
|
| |
| /* Content Wrapper Padding */
| |
| #mw-content-wrapper {
| |
| padding-top: 8px;
| |
| }
| |
|
| |
| /* Sidebar chunks auf Mobile anpassen */
| |
| #mw-site-navigation .sidebar-chunk,
| |
| #mw-related-navigation .sidebar-chunk {
| |
| padding: 1em;
| |
| font-size: 0.9em;
| |
| }
| |
|
| |
| /* Logo SICHTBAR auf Mobile */
| |
| #p-banner img {
| |
| width: 120px;
| |
| filter: brightness(1) !important;
| |
| }
| |
|
| |
| /* Logo Container */
| |
| #p-banner {
| |
| background: transparent;
| |
| }
| |
|
| |
| /* Logo Text kleiner */
| |
| #p-logo-text a {
| |
| font-size: 1.5em;
| |
| color: #ffffff;
| |
| }
| |
|
| |
| /* Search auf Mobile */
| |
| #searchInput {
| |
| background: #000000d6;
| |
| color: #ffffff;
| |
| }
| |
|
| |
| /* Überschriften auf Mobile */
| |
| .mw-body .mw-heading1,
| |
| .mw-body h1 {
| |
| font-size: 1.5em;
| |
| }
| |
|
| |
| /* Account Name auf Mobile */
| |
| #personal h2 span {
| |
| color: #ffffff;
| |
| }
| |
|
| |
| /* Mobile Menu Button weiß */
| |
| #mw-sidebar-button {
| |
| background-color: transparent;
| |
| border-color: #ffffff;
| |
| }
| |
|
| |
| #mw-sidebar-button:before {
| |
| background-color: #ffffff;
| |
| box-shadow: 0 0.35em 0 0 #ffffff, 0 0.7em 0 0 #ffffff;
| |
| }
| |
|
| |
| /* Alle Icons auf Mobile weiß */
| |
| svg,
| |
| .mw-ui-icon {
| |
| fill: #ffffff !important;
| |
| color: #ffffff !important;
| |
| }
| |
| }
| |
|
| |
| /* ========================================
| |
| TABLET STYLES (851px - 1339px)
| |
| ======================================== */
| |
|
| |
| @media screen and (min-width: 851px) and (max-width: 1339px) {
| |
| /* Header */
| |
| #mw-header-container {
| |
| background: #000000;
| |
| }
| |
|
| |
| /* Account Name */
| |
| #personal h2 span {
| |
| display: inline-block;
| |
| line-height: normal;
| |
| word-wrap: break-word;
| |
| color: #ffffff;
| |
| }
| |
|
| |
| /* Sidebar anpassen */
| |
| #mw-site-navigation .sidebar-chunk,
| |
| #mw-related-navigation .sidebar-chunk {
| |
| padding: 1.2em;
| |
| }
| |
| }
| |
|
| |
| /* ========================================
| |
| DESKTOP STYLES (ab 851px)
| |
| ======================================== */
| |
|
| |
| @media screen and (min-width: 851px) {
| |
| /* Maximal Breite nutzen */
| |
| .ts-inner {
| |
| max-width: none;
| |
| }
| |
|
| |
| /* Header */
| |
| #mw-header-container {
| |
| background: #000000;
| |
| }
| |
|
| |
| /* Account Name */
| |
| #personal h2 span {
| |
| display: inline-block;
| |
| line-height: normal;
| |
| word-wrap: break-word;
| |
| color: #ffffff;
| |
| }
| |
| }
| |
|
| |
| /* ========================================
| |
| LARGE DESKTOP STYLES (ab 1340px)
| |
| ======================================== */
| |
|
| |
| @media screen and (min-width: 1340px) {
| |
| /* Content padding */
| |
| #mw-content-wrapper {
| |
| padding-top: 12px;
| |
| }
| |
|
| |
| /* Left Sidebar größer */
| |
| #mw-site-navigation {
| |
| padding-right: 1em;
| |
| box-sizing: border-box;
| |
| justify-content: space-between;
| |
| width: 18em;
| |
| flex: 0 0 17em;
| |
| order: 1;
| |
| }
| |
|
| |
| #p-logo-text {
| |
| min-width: 17em;
| |
| }
| |
| }
| |
