MediaWiki:Common.css: Difference between revisions

Revision as of 09:55, 22 December 2020

/* 
 * CSS placed here will be applied to all skins
 */

/* for Template:CharSelect, since this doesn't pass the css-sanitizer */ 

.char-select-img img {
   background-image: url('/w/skins/Tekken/character-select-spritesheet-v2-602w.webp');
}

/* less table padding, and not wasting space in cells without a sort button */

.skin-citizen table.wikitable tr td,
.skin-citizen table.wikitable tr th {
   padding: 5px;
}

.skin-citizen table.wikitable tr th.headerSort {
  padding-right: 21px;
}

/* helper classes to change alignment of columns in table */

.col-1-center td:nth-child(1) { text-align: center; }
.col-2-center td:nth-child(2) { text-align: center; }
.col-3-center td:nth-child(3) { text-align: center; }
.col-4-center td:nth-child(4) { text-align: center; }
.col-5-center td:nth-child(5) { text-align: center; }
.col-6-center td:nth-child(6) { text-align: center; }
.col-7-center td:nth-child(7) { text-align: center; }
.col-8-center td:nth-child(8) { text-align: center; }
.col-9-center td:nth-child(9) { text-align: center; }

.col-1-end td:nth-child(1) { text-align: end; }
.col-2-end td:nth-child(2) { text-align: end; }
.col-3-end td:nth-child(3) { text-align: end; }
.col-4-end td:nth-child(4) { text-align: end; }
.col-5-end td:nth-child(5) { text-align: end; }
.col-6-end td:nth-child(6) { text-align: end; }
.col-7-end td:nth-child(7) { text-align: end; }
.col-8-end td:nth-child(8) { text-align: end; }
.col-9-end td:nth-child(9) { text-align: end; }

/* font based on in-game Tekken symbols */

@font-face {
   font-family: IronFist;
   src: url('/w/skins/Tekken/Iron-Fist.woff');
   font-weight: normal;
   font-style: normal;
   font-display: block;
}

.ironfist {
  font-family: IronFist;
}

/**
 * Colors intended for figures use HSV color space, as it's more vibrant, and
 * uniform perceived lightness isn't essential since the lightness are fixed.
 *
 * Colors that indicate lightness use https://www.hsluv.org/ color space
 * 
 * Light mode bg: hsluv(0, 0, 100)
 * Dark mode bg: hsluv(0, 0, 5)
 *
 * == hue
 * blue 240
 *
 * == saturation
 * 100
 * muddy 50
 *
 * == lightness
 * 100 - {n}
 * 
 * == lightness (dark mode)
 * 5 + {n}
 */
 
:root {
   --blue-05: #e7f2ff;
   --blue-15: #b2d8ff;
   
   /* HSV S=30 V=100 */
   --red: #ffb3b3;
   --orange: #ffd9b3;
   --yellow: #ffffb3;
   --green: #b3ffb3;
   --teal: #b3ffe6;
   --blue: #b3e5ff;
   --purple: #d9b3ff;
}

@media (prefers-color-scheme: dark) {
   :root {
      --blue-05: #001e2f;
      --blue-15: #00344e;
      
      /* HSV S=100 V=30 */
	  --red: #4d0000;
	  --orange: #4d2600;
	  --yellow: #4d4d00;
	  --green: #004d00;
	  --blue: #00334d;
	  --teal: #004d40;
	  --purple: #40004d;
   }
   
   body.skin-citizen {
      background-color: #111111;
   }
}

.bg-blue { background-color: var(--blue); }
.bg-green { background-color: var(--green); }
.bg-red { background-color: var(--red); }
.bg-yellow { background-color: var(--yellow); }
.bg-purple { background-color: var(--purple); }
.bg-teal { background-color: var(--teal); }
.bg-orange { background-color: var(--orange); }

.bg-blue-05 { background-color: var(--blue-05); }
.border-left-blue-15 { border-left-color: var(--blue-15); }

@@ Line 56: / Line 56: @@
 }
-/*
+/**
-  * Colors are from https://www.hsluv.org/ color space
+  * Colors intended for figures use HSV color space, as it's more vibrant, and
+ * uniform perceived lightness isn't essential since the lightness are fixed.
+ *
+ * Colors that indicate lightness use https://www.hsluv.org/ color space
   *
   * Light mode bg: hsluv(0, 0, 100)
@@ Line 63: / Line 66: @@
   *
   * == hue
- * red    12
+  * blue 240
- * yellow 75
- * green  120
- * teal   160
-  * blue   240
- * purple 300
   *
   * == saturation
-  * base   100
+  * 100
-  * muddy  50
+  * muddy 50
   *
   * == lightness
-  * base   90
+  * 100 - {n}
- * {n}    100 - {n}
   *
   * == lightness (dark mode)
-  * base   15
+  * 5 + {n}
- * {n}    5 + {n}
   */
@@ Line 86: / Line 82: @@
     --blue-05: #e7f2ff;
     --blue-15: #b2d8ff;
-    --blue-muddy-05: #ecf1f8;
-    --blue: #cde5ff;
+   /* HSV S=30 V=100 */
-    --yellow: #fee300;
+    --red: #ffb3b3;
-    --green: #81ff26;
+    --orange: #ffd9b3;
-    --red: #ffdada;
+    --yellow: #ffffb3;
-    --purple: #f8d8ff;
+    --green: #b3ffb3;
-    --teal: #28ffcb;
+    --teal: #b3ffe6;
+    --blue: #b3e5ff;
+    --purple: #d9b3ff;
 }
@@ Line 99: / Line 97: @@
        --blue-05: #001e2f;
        --blue-15: #00344e;
-       --blue-muddy-05: #121d26;
-      --blue: #00293f;
+      /* HSV S=100 V=30 */
-      --yellow: #2c2600;
+	  --red: #4d0000;
-      --green: #102c00;
+	  --orange: #4d2600;
-      --red: #540001;
+	  --yellow: #4d4d00;
-      --purple: #47004f;
+	  --green: #004d00;
-      --teal: #002c21;
+	  --blue: #00334d;
+	  --teal: #004d40;
+	  --purple: #40004d;
     }
@@ Line 119: / Line 119: @@
 .bg-purple { background-color: var(--purple); }
 .bg-teal { background-color: var(--teal); }
+.bg-orange { background-color: var(--orange); }
 .bg-blue-05 { background-color: var(--blue-05); }
 .border-left-blue-15 { border-left-color: var(--blue-15); }
-.hover-bg-blue-muddy-05:hover {
-	background-color: var(--blue-muddy-05);
-}