usercss

install-usercss/install-usercss.css

@@ -1,18 +1,17 @@
+:root{
+  --install-btn-default: hsl(176, 50%, 35%);
+  --install-btn-default-hover: hsl(176, 50%, 40%);
+  --install-btn-update: hsl(140, 100%, 13%);
+  --install-btn-update-hover: hsl(140, 100%, 18%);
+  --warning-border: hsl(0, 28%, 60%);
+  --warnings-bg: hsl(0, 100%, 94%);
+}
+
 body {
   overflow: hidden;
   margin: 0;
   font: 12px arial, sans-serif;
-  background: white;
+  background: var(--main-bg);
-}
-
-a {
-  color: #000;
-  transition: color .5s;
-  text-decoration-skip: ink;
-}
-
-a:hover {
-  color: #666;
 }
 
 img.icon,
@@ -23,16 +22,16 @@ img.icon,
 
 .svg-icon {
   margin-left: 2px;
-  fill: #000;
+  fill: var(--black);
   transition: fill .5s;
 }
 
 a:hover .svg-icon {
-  fill: #666;
+  fill: var(--gray-lightness-40);
 }
 
 input:disabled + span {
-  color: rgb(128, 128, 128);
+  color: var(--truegray);
 }
 
 .container {
@@ -45,8 +44,8 @@ input:disabled + span {
   flex: 0 0 280px;
   box-sizing: border-box;
   padding: 1rem;
-  border-right: 1px dashed #aaa;
+  border-right: 1px dashed var(--gray-lightness-66);
-  box-shadow: 0 0 50px -18px black;
+  box-shadow: 0 0 50px -18px var(--black);
   overflow-wrap: break-word;
   overflow-y: auto;
   z-index: 100;
@@ -60,9 +59,9 @@ input:disabled + span {
   display: none;
   padding-bottom: 0;
   flex-basis: auto;
-  background: #ffe2e2;
+  background: var(--warnings-bg);
   border-right: none;
-  border-bottom: 1px dashed #aaa;
+  border-bottom: 1px dashed var(--gray-lightness-66);
 }
 
 .has-warnings .warnings {
@@ -111,19 +110,19 @@ h1 small {
 .install {
   font-family: Arial, "DejaVu Sans", Verdana, Geneva, sans-serif;
   font-size: 14px;
-  background-color: hsl(0, 0%, 33%);
+  background-color: var(--gray-lightness-33);
-  color: #eee;
+  color: var(--gray-lightness-93);
   border-radius: 4px;
   padding: 4px 38px 4px 10px;
   position: relative;
   display: inline-block;
-  text-shadow: 1px 1px 1px #333;
+  text-shadow: 1px 1px 1px var(--gray-lightness-20);
   -webkit-appearance: none;
   -moz-appearance: none;
   border-style: none;
   margin-bottom: 1ex;
   cursor: pointer;
-  box-shadow: inset 0 -1px 0 0 hsl(0, 0%, 24%), inset 0 1px 0 0 hsl(0, 0%, 30%), inset 1px 0 0 0 hsl(0, 0%, 24%);
+  box-shadow: inset 0 -1px 0 0 var(--gray-lightness-24), inset 0 1px 0 0 var(--gray-lightness-30), inset 1px 0 0 0 var(--gray-lightness-24);
   transition: color .25s, background-color .25s;
 }
 
@@ -135,8 +134,8 @@ h1 small {
 }
 
 .install:hover:not(:disabled) {
-  background-color: hsl(0, 0%, 38%);
+  background-color: var(--gray-lightness-38);
-  color: #fff;
+  color: var(--white);
   text-shadow: none;
 }
 
@@ -154,8 +153,8 @@ h1 small {
 }
 
 .install:before {
-  border-left: 1px solid rgba(0, 0, 0, .3);
+  border-left: 1px solid var(--black-alpha-3);
-  box-shadow: inset 0 -1px 0 0 hsl(0, 0%, 24%), inset 0 1px 0 0 hsl(0, 0%, 30%), inset -1px 0 0 0 hsl(0, 0%, 38%);
+  box-shadow: inset 0 -1px 0 0 var(--gray-lightness-24), inset 0 1px 0 0 var(--gray-lightness-30), inset -1px 0 0 0 var(--gray-lightness-38);
   padding: 5px 8px;
   transition: background-color .25s;
 }
@@ -163,11 +162,11 @@ h1 small {
 .install:before,
 .install:active:before,
 .install:active:hover:before {
-  background-color: hsl(176, 50%, 35%);
+  background-color: var(--install-btn-default);
 }
 
 .install:hover:before {
-  background-color: hsl(176, 50%, 40%);
+  background-color: var(--install-btn-default-hover);
 }
 
 .install:active,
@@ -179,7 +178,7 @@ h1 small {
 
 .install:active,
 .install:active:hover {
-  background-color: hsl(0, 0%, 33%);
+  background-color: var(--gray-lightness-33);
 }
 
 .install:after {
@@ -190,7 +189,7 @@ h1 small {
 
 .install:disabled {
   opacity: .25;
-  color: white;
+  color: var(--white);
   cursor: auto;
 }
 
@@ -201,25 +200,25 @@ h1 small {
 .install.reinstall:before,
 .install.reinstall:active:before,
 .install.reinstall:active:hover:before {
-  background-color: hsl(0, 0%, 20%);
+  background-color: var(--gray-lightness-20);
 }
 
 .install.reinstall:hover:before {
-  background-color: hsl(0, 0%, 25%);
+  background-color: var(--gray-lightness-25);
 }
 
 .install.reinstall:hover:before {
-  background-color: #444;
+  background-color: var(--gray-lightness-27);
 }
 
 .install.update:before,
 .install.update:active:before,
 .install.update:active:hover:before {
-  background-color: hsl(140, 100%, 13%);
+  background-color: var(--install-btn-update);
 }
 
 .install.update:hover:before {
-  background-color: hsl(140, 100%, 18%);
+  background-color: var(--install-btn-update-hover);
 }
 
 .install.update:after {
@@ -281,6 +280,19 @@ li {
   border: none;
 }
 
+/************ CM default ************/
+.CodeMirror.cm-s-default {
+  background: var(--gray-lightness-93) !important;
+}
+
+.CodeMirror.cm-s-default .CodeMirror-gutters {
+  background-color: var(--truegray-alpha-1) !important;
+  border-right: 1px solid var(--truegray-alpha-2) !important;
+}
+
+.CodeMirror {
+  outline: none !important;
+}
 /* spinner-related */
 
 #header {
@@ -457,7 +469,7 @@ label:not(.unavailable) {
   #header {
     flex: 0 1 auto;
     border-right: none;
-    border-bottom: 1px dashed #AAA;
+    border-bottom: 1px dashed var(--gray-lightness-66);
     overflow-x: auto;
     overflow-y: hidden;
     padding: 0;
@@ -530,7 +542,7 @@ label:not(.unavailable) {
     max-height: 20%;
   }
   .warning:not(:last-child) {
-    border-bottom: 1px dashed #b57c7c;
+    border-bottom: 1px dashed var(--warning-border);
     padding-bottom: 1em;
   }
   ul.applies-to,