MediaWiki:Medik.css: Unterschied zwischen den Versionen
Aus HCG-Wiki
(Die Seite wurde neu angelegt: „→All CSS here will be loaded for users of the Medik skin: body { background-color: #000; } →Oberste Leiste: #cosmos-banner { background-color: #585858; } #searchInput { background: #3c3c3c; color: #000000; } #mw-content a:not(.new) { color: #02008c; text-decoration: none; } →Nav-Bar: .wds-dropdown__content .wds-list.wds-is-linked > li:hover > a:not(.wds-button) { →Experimental: background-color: rgba(8,132,13…“) |
Keine Bearbeitungszusammenfassung |
||
Zeile 1: | Zeile 1: | ||
/* All CSS here will be loaded for users of the Medik skin */ | /* All CSS here will be loaded for users of the Medik skin */ | ||
/*Body and Wrapper*/ | |||
body { | 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); | |||
color: | |||
} | } | ||
.mw-editform #wpTextbox1 { | |||
color: | 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); | |||
. | |||
color: | |||
} | } | ||
.mw-body-content h5 { | |||
color: var(--T5); | |||
color: | |||
} | } | ||
a { | |||
color: var(--A2); | |||
} | } | ||
a:visited { | |||
color: var(--A3); | |||
} | } | ||
/* | /*Vorschaubilder / Thumbs für Bilder*/ | ||
div.thumbinner { | |||
border: 2px solid var(--D9); | |||
color: | background-color: var(--D7); | ||
} | } | ||
.magnify a { | |||
. | filter: invert(0.7); | ||
} | } | ||
/* | /*Editor Icons + Schrift*/ | ||
.wikiEditor-ui-toolbar .tabs span.tab a { | |||
color: | color: var(--A3); | ||
} | } | ||
.wikiEditor-ui-toolbar .booklet > .index > div { | |||
color: | 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: | background-color: var(--D6); | ||
} | } | ||
.wikiEditor-ui-toolbar .page-characters div span { | |||
. | border: 1px solid var(--D7); | ||
color: var(--T2); | |||
color: | |||
} | } | ||
.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 { | |||
.oo-ui- | 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); | ||
color: | |||
} | } | ||
/*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); | |||
color: | |||
} | } | ||
.wikiEditor-ui-toolbar { | /*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); | |||
background-color: | |||
} | } | ||
.wikiEditor-ui-toolbar { | |||
. | background-color: var(--D8); | ||
background-color: | |||
} | } | ||
/*Bearbeitung speichern*/ | |||
/*Bearbeitung speichern Flächen*/ | |||
.editOptions { | .editOptions { | ||
background-color: var(--D8); | |||
color: var(--T3); | |||
border: 1px solid var(--D7); | |||
} | } | ||
.oo-ui-textInputWidget .oo-ui-inputWidget-input { | .oo-ui-textInputWidget .oo-ui-inputWidget-input { | ||
background-color: | color: var(--T2); | ||
background-color: var(--D6); | |||
border: 1px solid var(--D8); | |||
} | } | ||
.oo-ui-textInputWidget.oo-ui-widget-enabled:hover .oo-ui-inputWidget-input { | |||
.oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input | border-color: var(--D9); | ||
border-color: | |||
} | } | ||
.oo-ui-textInputWidget.oo-ui-widget-enabled:hover .oo-ui-inputWidget-input:focus { | .oo-ui-textInputWidget.oo-ui-widget-enabled:hover .oo-ui-inputWidget-input:focus { | ||
border-color: | border-color: var(--D9); | ||
} | } | ||
.oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input:focus { | |||
.oo-ui- | border-color: var(--D9); | ||
box-shadow: inset 0 0 0 1px var(--D9); | |||
} | } | ||
.oo-ui- | /*Buttons*/ | ||
background-color: | .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover { | ||
border-color: | 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 { | |||
.oo-ui- | background-color: var(--A5); | ||
border-color: var(--A6); | |||
.oo-ui- | |||
background-color: | |||
border-color: | |||
} | } | ||
.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 { | |||
.oo-ui- | background-color: var(--A6); | ||
border-color: | 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 { | .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:focus { | ||
border-color: | 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- | background-color: var(--A6); | ||
background-color: | border-color: var(--A7); | ||
border-color: | |||
} | } | ||
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover { | |||
.oo-ui-buttonElement-framed.oo-ui-widget-enabled | color: var(--T3); | ||
color: | background-color: var(--D4); | ||
background-color: | border-color: var(--D5); | ||
border-color: | |||
} | } | ||
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button { | |||
.oo-ui-buttonElement-framed.oo-ui-widget-enabled | color: var(--T2); | ||
color: | background-color: var(--D5); | ||
background-color: | border-color: var(--D6); | ||
border-color: | |||
} | } | ||
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:focus { | .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:focus { | ||
border-color: | color: var(--T2); | ||
box-shadow: inset 0 0 0 1px | 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 { | |||
.oo-ui- | color: var(--T2); | ||
background-color: var(--D6); | |||
border-color: var(--D7); | |||
} | } | ||
: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; | |||
} | } |
Version vom 9. April 2023, 11:26 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);
}
/*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);
}
: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;
}