assets/css/default: Use background lighter/darker scheme

1 files changed, 15 insertions, 11 deletions

diff --git a/assets/css/default.css b/assets/css/default.css
index c22b91d..898cf3d 100644
--- a/assets/css/default.css
+++ b/assets/css/default.css
@@ -46,8 +46,9 @@
   --primary: 230;
   --secondary: 258;
   --accent: 217;
-  --background-bolder: hsl(var(--secondary), 99%, 98%);
   --background: hsl(var(--secondary), 99%, 99%);
+  --background-darker: hsl(var(--secondary), 99%, 98%);
+  --background-lighter: hsl(var(--secondary), 100%, 100%);
   --border-darker: hsl(var(--primary), 35%, 80%);
   --border-darkest: hsl(var(--primary), 35%, 70%);
   --border-lighter: hsl(var(--primary), 35%, 92%);
@@ -81,8 +82,9 @@
     --primary: 0;
     --secondary: 0;
     --accent: 219;
-    --background-bolder: hsl(var(--secondary), 0%, 5%);
     --background: hsl(var(--secondary), 0%, 7%);
+    --background-darker: hsl(var(--secondary), 0%, 5%);
+    --background-lighter: hsl(var(--secondary), 0%, 9%);
     --border-darker: hsl(var(--secondary), 0%, 33%);
     --border-darkest: hsl(var(--secondary), 0%, 60%);
     --border-lighter: hsl(var(--secondary), 0%, 15%);
@@ -775,7 +777,7 @@ iframe {
   color: #111;
   color: var(--foreground);
   background-color: #fefefe;
-  background-color: var(--background);
+  background-color: var(--background-lighter);
   border-radius: 0.5rem;
   min-height: 16rem;
   user-select: none;
@@ -2178,7 +2180,7 @@ source-files item-list a span:nth-child(2) {
 
 context-menu {
   background-color: #fff;
-  background-color: var(--background-bolder);
+  background-color: var(--background-darker);
   border: 1px solid;
   border-color: #eee;
   border-color: var(--border-lighter);
@@ -2257,7 +2259,7 @@ diagram-container svg {
   border-color: var(--border-darker);
   margin: 0.5rem 0;
   background-color: #fefefe;
-  background-color: var(--background);
+  background-color: var(--background-lighter);
 }
 
 tool-tip[data-type="reaction"] {
@@ -2308,6 +2310,8 @@ link-card {
   border-color: var(--border-darker);
   border-radius: 0.5rem;
   margin-bottom: 0.75rem;
+  background-color: #fefefe;
+  background-color: var(--background-lighter);
 }
 
 link-card a img {
@@ -2340,8 +2344,8 @@ math-ml figure[id] figure {
   overflow-y: hidden;
   border-radius: 0.5rem;
   padding: 0.75rem 0.5rem;
-  background-color: #f9f9f9;
-  background-color: var(--widget-background);
+  background-color: #fefefe;
+  background-color: var(--background-lighter);
   border: 1px solid;
   border-color: #ccc;
   border-color: var(--border-darker);
@@ -2569,11 +2573,11 @@ nav[hidden] {
     margin-top: 0;
   }
   micro-card {
-    width: 100vw;
-    padding-right: 1rem;
-  }
-  micro-card {
+    background-color: #fefefe;
+    background-color: var(--background-lighter);
     min-height: 14rem;
+    padding-right: 1rem;
+    width: 100vw;
   }
   :not(#main):target micro-card,
   :not(#main):target micro-card:hover {