assets/css/default: Dry up colors

To test out a color schemes.

1 files changed, 31 insertions, 40 deletions

diff --git a/assets/css/default.css b/assets/css/default.css
index abc26df..d3b8dde 100644
--- a/assets/css/default.css
+++ b/assets/css/default.css
@@ -26,40 +26,39 @@
   color-scheme: light dark;
   --active-background-alternate: #cce1ff;
   --background-bolder: #fff;
-  --background-transparent: rgba(255, 255, 255, 0.9);
-  --background: #fefefe;
-  --border-darker: #ccc;
-  --border-darkest: #aaa;
-  --border-lighter: #eee;
+  --background-rgb: 254, 254, 254;
+  --background: rgba(var(--background-rgb), 1);
+  --border-darker: rgba(var(--foreground-rgb), 0.2);
+  --border-darkest: rgba(var(--foreground-rgb), 0.3);
+  --border-lighter: rgba(var(--foreground-rgb), 0.08);
   --button-background: #fff;
   --danger-background-lighter: #fff5f5;
   --danger-background: #fcd2cf;
   --danger: #8f0000;
-  --disabled: #999;
-  --fade: #555;
+  --fade: rgba(var(--foreground-rgb), 0.75);
   --focus-within-background: #f0ecf9;
-  --foreground: #111;
+  --foreground-rgb: 0, 0, 0;
+  --foreground: rgba(var(--foreground-rgb), 0.95);
   --hover-background-alternate: #ebf3ff;
-  --hover-background: #eee;
-  --input-background: #eff3f4;
+  --hover-background: rgba(var(--foreground-rgb), 0.06);
   --link: #0149bc;
   --shadow: #00000060;
   --spoiler: #333;
   --success-background: #d5f3c4;
   --success: #1d3c0c;
-  --table-row-even-background: #f9f9f9;
-  --table-row-odd-background: #f3f3f3;
+  --table-even-background: rgba(var(--foreground-rgb), 0.04);
+  --table-odd-background: rgba(var(--foreground-rgb), 0.02);
   --warning-background: #ffe699;
   --warning: #332600;
-  --widget-background: #f9f9f9;
+  --widget-background: rgba(var(--foreground-rgb), 0.02);
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
     --active-background-alternate: #425a8a;
     --background-bolder: #0d0d0d;
-    --background-transparent: rgba(28, 28, 28, 0.9);
-    --background: #111;
+    --background-rgb: 17, 17, 17;
+    --background: rgba(var(--background-rgb), 1);
     --border-darker: #555;
     --border-darkest: #999;
     --border-lighter: #262626;
@@ -67,23 +66,22 @@
     --danger-background-lighter: #1b0404;
     --danger-background: #4f1c1c;
     --danger: #ff9494;
-    --disabled: #999;
-    --fade: #aaa;
+    --fade: rgba(var(--foreground-rgb), 0.75);
     --focus-within-background: #291933;
-    --foreground: #ddd;
+    --foreground-rgb: 221, 221, 221;
+    --foreground: rgba(var(--foreground-rgb), 1);
     --hover-background-alternate: #1c263a;
-    --hover-background: #303030;
-    --input-background: #333;
+    --hover-background: rgba(var(--foreground-rgb), 0.08);
     --link: #a3c3ff;
     --shadow: #000;
     --spoiler: #aaa;
     --success-background: #2d3e0f;
     --success: #d5f3c4;
-    --table-row-even-background: #273030;
-    --table-row-odd-background: #2e3838;
+    --table-even-background: rgba(var(--foreground-rgb), 0.06);
+    --table-odd-background: rgba(var(--foreground-rgb), 0.02);
     --warning-background: #a89700;
     --warning: #000;
-    --widget-background: #171717;
+    --widget-background: rgba(var(--foreground-rgb), 0.02);
   }
   img {
     filter: brightness(75%);
@@ -660,7 +658,7 @@ micro-author micro-summary > a {
   background-color: #fff;
   background-color: var(--button-background);
   border-radius: 0.5rem;
-  border: 1px solid #ccc;
+  border: 1px solid #eee;
   border: 1px solid var(--border-lighter);
   box-shadow: 0 1px 1px #999;
   color: inherit;
@@ -734,12 +732,12 @@ tr:last-child td {
 
 tbody tr:nth-child(odd) td {
   background-color: #f3f3f3;
-  background-color: var(--table-row-odd-background);
+  background-color: var(--table-odd-background);
 }
 
 tbody tr:nth-child(even) td {
   background-color: #f9f9f9;
-  background-color: var(--table-row-even-background);
+  background-color: var(--table-even-background);
 }
 
 tbody tr:hover td {
@@ -927,7 +925,7 @@ micro-author micro-header h3 {
 micro-author micro-summary p:not(:last-child) {
   flex: 4;
   margin: 0 0.75rem 0 0;
-  color: #555;
+  color: #444;
   color: var(--fade);
   max-width: 20rem;
 }
@@ -1054,8 +1052,6 @@ micro-metadata unlisted-entry {
 }
 
 micro-metadata-anchored {
-  color: #111;
-  color: var(--foreground);
   display: flex;
   margin-bottom: 0.25rem;
   width: 100%;
@@ -1120,11 +1116,6 @@ micro-metadata-handle a span {
   text-decoration: underline;
 }
 
-anchored-via {
-  color: #444;
-  color: var(--fade);
-}
-
 anchored-pinned svg {
   fill: #9ed1fa;
 }
@@ -1272,7 +1263,7 @@ tab-bar nav a {
   border-top: 1px solid;
   border-color: #ddd;
   border-color: var(--border-darker);
-  color: #555;
+  color: #444;
   color: var(--fade);
   padding: 0.5rem 1rem;
   margin-top: 0.5rem;
@@ -1743,7 +1734,7 @@ context-menu {
   background-color: #fff;
   background-color: var(--background-bolder);
   border: 1px solid;
-  border-color: #ddd;
+  border-color: #eee;
   border-color: var(--border-lighter);
   border-radius: 0.5rem;
   box-shadow: 0 0 1rem -0.5rem var(--shadow);
@@ -1777,7 +1768,7 @@ context-profile p a {
 }
 
 context-profile aside p {
-  color: #555;
+  color: #444;
   color: var(--fade);
   margin: 0;
 }
@@ -1894,10 +1885,10 @@ main micro-card:first-of-type reaction-tip img {
 
 [disabled] {
   cursor: not-allowed;
-  border-color: #ddd;
+  border-color: #eee;
   border-color: var(--border-lighter);
-  color: #999;
-  color: var(--disabled);
+  color: #444;
+  color: var(--fade);
 }
 
 [role="doc-endnotes"] {