MediaWiki:Mobile.css: Unterschied zwischen den Versionen

MediaWiki:Mobile.css (Quelltext anzeigen)

Version vom 9. November 2021, 13:07 Uhr

1.620 Bytes hinzugefügt , 13:07, 9. Nov. 2021

keine Bearbeitungszusammenfassung

Jneug

8.581

Bearbeitungen

@@ Zeile 1: / Zeile 1: @@
-/* Das folgende CSS wird für alle Benutzeroberflächen geladen. */
+/** Define variables for light- and darkmode */
+:root {
+  --text-color: #212529;
+  --background-color: #fff;
+  --link-color: #0645ad;
+  --link-color-visited: #04317c;
+  --common-background: #f8f9fa;
+  --common-border: #3a3a3a;
+  --header-background: #eaecf0;
+  --code-background: #f8f9fa;
+  --code-color: #4e6a8e;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --text-color: #f8f9fa;
+    --background-color: #26292C;
+    --link-color: #0dff83;
+    --link-color-visited: #00d96a;
+    --common-background: #3a3a3a;
+    --common-border: #212121;
+    --header-background: #070707;
+    --code-background: #f8f9fa;
+    --code-color: #7b9dc9;
+  }
+}
+/******************
+   Genreal styles
+ ******************/
 body,
 .mw-body,
@@ Zeile 5: / Zeile 32: @@
 .parsoid-body,
 #mw-head {
-   background-color: #fff;
+   background-color: var(--background-color);
-   color: #212529;
+   color: var(--text-color);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 1rem;
@@ Zeile 12: / Zeile 39: @@
    line-height: 1.6;
    text-align: left;
-  /*@media (prefers-color-scheme: dark) {
-		background-color: @clr-gray1;
-		color: @font-color-dark;
-	}*/
 }
-/*@media (prefers-color-scheme: dark) {
-	.vector-menu-tabs li {
-		background-image: linear-gradient(to top, #77c1f6, rgba(38, 41, 44, 0.5), rgba(38, 41, 44, 0));
-	}
-	.vector-menu-tabs .selected {
-		background-color: #34393d;
-		background-color: @clr-gray1;
-		a {
-			.link-pseudos(lighten(@clr-primary, 20%), @clr-primary)
-		}
-	}
-	.mw-body {
-		margin-top: 0px;
-	}
-}*/
 h1,
 h2,
@@ Zeile 40: / Zeile 46: @@
 h5,
 h6 {
-   color: #212529;
+   color: var(--text-color);
-  /*@media (prefers-color-scheme: dark) {
+}
-		color: @font-color-dark;
+/** General darkmode changes */
-	}*/
+@media (prefers-color-scheme: dark) {
+  .vector-menu-tabs,
+  .vector-menu-tabs a,
+  #mw-head .vector-menu-dropdown h3 {
+    background-image: linear-gradient(to bottom, rgba(13, 255, 131, 0) 0%, #0dff83 100%);
+  }
+  .vector-menu-tabs li {
+    background-image: linear-gradient(to top, #00d96a 0, #26292C 50%);
+  }
+  .vector-menu-tabs .selected {
+    background-color: var(--background-color);
+  }
+  .vector-menu-tabs .selected a:link,
+  .vector-menu-tabs .selected a:active {
+    color: var(--link-color);
+  }
+  .vector-menu-tabs .selected a:visited {
+    color: var(--link-color-visited);
+  }
+  .vector-menu-dropdown h3 {
+    color: var(--text-color);
+  }
+  .mw-body {
+    border-color: var(--link-color);
+  }
 }
 /******************
         Links
   ******************/
-/*@media (prefers-color-scheme: dark) {
+a:link,
-	a,
+.mw-parser-output a.external:link,
-	.mw-parser-output a.external,
+.vector-menu-portal .vector-menu-content li a:link,
-	.vector-menu-portal .vector-menu-content li a,
+.vector-menu-tabs li a:link,
-	.vector-menu-tabs li a {
+a.mw-collapsible-text:link,
-		.link-pseudos(lighten(@clr-primary, 20%), @clr-primary)
+a:active,
-	}
+.mw-parser-output a.external:active,
+.vector-menu-portal .vector-menu-content li a:active,
-	a.new {
+.vector-menu-tabs li a:active,
-		.link-pseudos(#df6565,#df6565)
+a.mw-collapsible-text:active {
-	}
+  color: var(--link-color);
-}*/
+}
+a:visited,
+.mw-parser-output a.external:visited,
+.vector-menu-portal .vector-menu-content li a:visited,
+.vector-menu-tabs li a:visited,
+a.mw-collapsible-text:visited {
+  color: var(--link-color-visited);
+}
+.toctogglelabel {
+  color: var(--link-color);
+}
+a.new:link,
+a.new:active,
+a.new:visited {
+  color: #df6565;
+}
 .mw-editform #wpTextbox1 {
    font-size: 1rem !important;
@@ Zeile 83: / Zeile 128: @@
 .pre {
    font-family: monospace, 'Courier';
-   color: #4e6a8e;
+   color: var(--code-color);
 }
 .pre {
-   background-color: #f8f9fa;
+   background-color: var(--code-background);
-   border: 1px solid #3a3a3a;
+   border: 1px solid var(--common-border);
    padding: 1em;
    white-space: pre-wrap;
@@ Zeile 102: / Zeile 147: @@
 }
 .text-default {
-   color: #212529 !important;
+   color: var(--text-color) !important;
 }
 .text-muted {
@@ Zeile 273: / Zeile 318: @@
    -moz-box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.4);
    box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.4);
+  background-color: var(--common-background);
+  border-color: var(--common-border);
+  color: var(--text-color);
+}
+.tocnumber {
+  color: var(--text-color);
 }
-.wikitable th {
+.wikitable > * > tr > th {
    text-align: center;
+  color: var(--text-color);
+  background-color: var(--header-background);
 }
 .mw-tablefooter {
@@ Zeile 410: / Zeile 463: @@
    border-width: 2px;
    border-left: 9px solid rgba(0, 0, 0, 0.25);
+  color: var(--text-color);
 }
 .hgborder {
    border: 2px solid #26292C;
    background-color: rgba(0, 0, 0, 0);
+  color: var(--text-color);
 }
 .hgbox.inverted,
@@ Zeile 439: / Zeile 494: @@
 .hintbox {
    font-size: 0.95em;
-   background-color: #eaecf0;
+   background-color: #c6ecf7;
    /*border: 1px solid gray;*/
 }
@@ Zeile 447: / Zeile 502: @@
 }
 .taskbox-bonus .taskbox {
-   background-color: #c6e4dd;
+   background-color: #e4cda1;
    /*border: 1px solid #a6ca8a;*/
 }