MediaWiki:Medik.css: Unterschied zwischen den Versionen
Aus HCG-Wiki
Keine Bearbeitungszusammenfassung |
Keine Bearbeitungszusammenfassung |
||
Zeile 51: | Zeile 51: | ||
} | } | ||
a:visited { | a:visited { | ||
color: var(--A3); | |||
} | |||
a:hover { | |||
color: var(--A3); | color: var(--A3); | ||
} | } | ||
Zeile 193: | Zeile 196: | ||
background-color: var(--D6); | background-color: var(--D6); | ||
border-color: var(--D7); | 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); | |||
} | } | ||
Version vom 9. April 2023, 12:16 Uhr
/* 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;
}
p {
color: var(--T1);
}
.oo-ui-labelElement .oo-ui-labelElement-label {
color: var(--T1);
}
.mw-editform #wpTextbox1 {
color: var(--T1);
}
/*Schrift im Allgemein*/
*, ::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);
}
/*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);
}
/*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;
}