MediaWiki:Medik.css

/* All CSS here will be loaded for users of the Medik skin */

/*Body and Wrapper*/
body {
    background-color: #6a51db;
}
#mw-navigation {
    border-right: 1px solid #6610f2;
    background-color: #25213f;
}
.row {
    background-color: #1f1c31;
}
.mw-footer {
    background-color: #100a1e;
}

/*Navigation*/
.dropdown-toggle::after {
    border-top: .4em solid;
    border-right: .4em solid transparent;
    border-left: .4em solid transparent;
    color: var(--D2);
}
.dropdown-menu {
    background-color: var(--D8);
    border: 3px solid rgba(0,0,0,.2);
}
.dropdown-item:focus, .dropdown-item:hover {
    color: var(--A3);
    background-color: var(--D7);
}
#mw-navigation a.nav-link.disabled {
    color: var(--T3);
    font-size: 20px
}
#mw-navigation a:not(.disabled) {
    color: var(--T2);
    font-size: 18px;
}
#mw-navigation a:not(.disabled):hover {
    color: var(--T5);
}

/*Schrift im Allgemein*/
p {
    color: var(--T1);
}

.oo-ui-labelElement .oo-ui-labelElement-label {
    color: var(--T1);
}

.mw-editform #wpTextbox1 {
    color: var(--T1);
}

*, ::after, ::before {
    color: var(--T1);
}
.mw-body-content h1 {
    color: var(--A0);
}
.mw-body-content h2 {
    color: var(--A0);
}
.mw-body-content h3 {
    color: var(--T3);
}
.mw-body-content h4 {
    color: var(--T4);
}
.mw-body-content h5 {
    color: var(--T5);
}
a {
    color: var(--A2);
}
a:visited {
    color: var(--A3);
}
a:hover {
    color: var(--A3);
}
a.dropdown-item:visited {
    color: var(--A3);
}

#firstHeading {
    overflow: visible;
    color: var(--T1);
}
aside a:not(.disabled) {
    color: var(--A4);
}



/*Vorschaubilder / Thumbs für Bilder*/
div.thumbinner {
    border: 2px solid var(--D9);
    background-color: var(--D7);
}
.magnify a {
    filter: invert(0.7);
}

/*Editor Icons + Schrift*/
.wikiEditor-ui-toolbar .tabs span.tab a {
    color: var(--A3);
}
.wikiEditor-ui-toolbar .booklet > .index > div {
    color: var(--T2);
}
.wikiEditor-ui-toolbar .booklet > .index > .current {
    color: var(--T3);
    background-color: var(--D7);
}
.wikiEditor-ui-toolbar .booklet > .index > :hover {
    color: var(--T1);
    background-color: var(--D6);
}
.wikiEditor-ui-toolbar .page-characters div span {
    border: 1px solid var(--D7);
    color: var(--T2);
}
.wikiEditor-ui-toolbar .page-characters div span:hover {
    background-color: var(--D7);
    border: 1px solid var(--D6);
    color: var(--T1);
}
.wikiEditor-ui-toolbar .group .label {
    color: var(--A4);
}
.tool.oo-ui-buttonElement-frameless.oo-ui-iconElement > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon {
    opacity: 0.8;
    filter: invert(1);
}
.wikiEditor-ui-toolbar .tabs span.tab a.current, .wikiEditor-ui-toolbar .tabs span.tab a.current:visited {
    color: var(--A4);
}
.wikiEditor-ui-toolbar .group .tool-select .label {
    color: var(--A3);
}
.wikiEditor-ui-toolbar .group .tool-select .menu .options .option:hover {
    background-color: var(--D6);
}
/*GGF AUF HEADER FARBEN AUFTEILEN IM T ODER A AUFTEILEN FALLS ÜBERSCHRIFT MAL FEST VERÄNDERT*/
.wikiEditor-ui-toolbar .group .tool-select .options .option {
    color: var(--T2);
    background-color: var(--D7);
}
/*GLEICHES BEI SCHRIFT (Abschnitt Hilfe)*/
.wikiEditor-ui-toolbar .page-table th {
    color: var(--T4);
}
/*Editor-Felder*/
.wikiEditor-ui-toolbar .group {
    border-color: var(--D6);
}
.wikiEditor-ui .wikiEditor-ui-top {
    border-bottom: 1px solid var(--D6);
}
.wikiEditor-ui .wikiEditor-ui-view {
    border: 1px solid var(--D6);
}
#editform, #toolbar, #wpTextbox1 {
    background-color: var(--D7);
}
.wikiEditor-ui-toolbar {
    background-color: var(--D8);
}
pre, code, .mw-code {
    background-color: var(--D8);
    color: var(--T1);
    border: 1px solid var(--D6);
}
.mw-message-box-warning, .warningbox {
    background-color: var(--D6);
}
/*Bearbeitung speichern*/
/*Bearbeitung speichern Flächen*/
.editOptions {
    background-color: var(--D8);
    color: var(--T3);
    border: 1px solid var(--D7);
}
.oo-ui-textInputWidget .oo-ui-inputWidget-input {
    color: var(--T2);
    background-color: var(--D6);
    border: 1px solid var(--D8);
}
.oo-ui-textInputWidget.oo-ui-widget-enabled:hover .oo-ui-inputWidget-input {
    border-color: var(--D9);
}
.oo-ui-textInputWidget.oo-ui-widget-enabled:hover .oo-ui-inputWidget-input:focus {
    border-color: var(--D9);
}
.oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input:focus {
    border-color: var(--D9);
    box-shadow: inset 0 0 0 1px var(--D9);
}

/*Buttons*/
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover {
    background-color: var(--A4);
    border-color: var(--A5);
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {
    background-color: var(--A5);
    border-color: var(--A6);
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:active, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-buttonElement-active > .oo-ui-buttonElement-button, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-popupToolGroup-active > .oo-ui-buttonElement-button {
    background-color: var(--A6);
    border-color: var(--A7);
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:focus {
    border-color: var(--A6);
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:active {
    background-color: var(--A6);
    border-color: var(--A7);
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
    color: var(--T3);
    background-color: var(--D4);
    border-color: var(--D5);
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
    color: var(--T2);
    background-color: var(--D5);
    border-color: var(--D6);
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:focus {
    color: var(--T2);
    border-color: var(--D7);
    box-shadow: inset 0 0 0 1px var(--D7);
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:active {
    color: var(--T2);
    background-color: var(--D6);
    border-color: var(--D7);
}
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button:focus {
    border-color: var(--D4);
    box-shadow: inset 0 0 0 1px var(--D4);
}
/*Checkboxes*/
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:active + span {
    background-color: var(--D4);
    border-color: var(--D6);
    box-shadow: inset 0 0 0 1px var(--D6);
}
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked:active + span, .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:indeterminate:active + span {
    background-color: var(--D6);
    border-color: var(--D8);
    box-shadow: inset 0 0 0 1px var(--D8);
}
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox'] + span {
    background-color: var(--D6);
    border-color: var(--D7);
    box-shadow: inset 0 0 0 1px var(--D7);
}
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox'] + span, .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:indeterminate + span {
    background-color: var(--D6);
    border-color: var(--D8);
    box-shadow: inset 0 0 0 1px var(--D8);
}
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked + span, .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:indeterminate + span {
    background-color: var(--D4);
    border-color: var(--D6);
    box-shadow: inset 0 0 0 1px var(--D7);
}
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked:focus + span, .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:indeterminate:focus + span {
    background-color: var(--D4);
    border-color: var(--D5);
    box-shadow: inset 0 0 0 2px var(--D6);
}
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:focus + span {
    border-color: var(--D6);
    box-shadow: inset 0 0 0 1px var(--D6);
}
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:hover + span {
    border-color: var(--D5);
}
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked:hover + span, .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:indeterminate:hover + span {
    background-color: var(--D4);
    border-color: var(--D5);
}


:root {
    --D9: #201d30;
	--D8: #282343;
	--D7: #302957;
	--D6: #372d6c;
	--D5: #3e3082;
	--D4: #43329a;
	--D3: #4832b3;
	--D2: #4c32cd;
	
	--A8: #910ac7;
	--A7: #800cdf;
	--A6: #6610f2;
	--A5: #562af4;
	--A4: #4b42f5;
	--A3: #5a6cf6;
	--A2: #7298f8;

    --A0: #6610f2;
    
    --T6: #aaaaaa;
    --T5: #bbbbbb;
    --T4: #cccccc;
    --T3: #dddddd;
    --T2: #eeeeee;
    --T1: #ffffff;
}