Add a table-border-strength variable

EternityForest · Nov 10, 2023 · 173de89 · 173de89
1 parent 305ba2a
commit 173de89
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 16 deletions.
diff --git a/README.md b/README.md
@@ -280,6 +280,9 @@ Note that the base color definitinons change in dark theme.
     --warning-fg: color-mix(in srgb, var(--warning-color) 40%, var(--fg));
     --danger-fg: color-mix(in srgb, var(--danger-color) 70%, var(--fg));
 
+    /*Intensity of table borders is less than normal borders, to balance the density*/
+    --table-border-strength: 40%;
+
     --control-border-color: color-mix(in srgb, var(--graphical-fg) 35%, rgb(0 0 0 / 0%));
 }
 ```
diff --git a/css/barrel.css b/css/barrel.css
@@ -42,7 +42,7 @@
     --gap: 18px;
 
     /*Borders*/
-    --border-color: color-mix(in srgb, var(--graphical-fg) 75%, rgb(0 0 0 / 0%));
+    --border-color: color-mix(in srgb, var(--graphical-fg) 50%, rgb(0 0 0 / 0%));
 
     --border-radius: 1.2rem;
     --border-width: 1px;
@@ -86,6 +86,9 @@
 
     --control-border-color: color-mix(in srgb, var(--graphical-fg) 35%, rgb(0 0 0 / 0%));
 
+    /*Intensity of table borders is less than normal borders, to balance the density*/
+    --table-border-strength: 40%;
+
     /*Calculated helpers*/
     --thin-border: 1px solid var(--border-color);
 }
@@ -474,7 +477,9 @@ tr {
 }
 
 td {
-    border-color: color-mix(in srgb, var(--border-color) 10%, transparent);
+    border-top: none;
+    border-right: none;
+    border-color: color-mix(in srgb, var(--border-color) var(--table-border-strength), transparent);
     padding: var(--border-width);
     width: min-content;
     max-width: 45%;
@@ -507,7 +512,6 @@ table {
     border-collapse: separate;
     border-spacing: 0;
     border-radius: var(--border-radius);
-    ;
     border: none;
 }
 

diff --git a/css/scrapbook/scrapbook_green.css b/css/scrapbook/scrapbook_green.css
@@ -64,19 +64,6 @@ tr:hover {
 }
 
 
-table {
-    background-color: rgba(240, 248, 255, 0.116);
-    box-shadow: 5px 5px 12px -8px rgba(0, 0, 0, 0.97);
-}
-
-tr.header {
-    font-weight: bold;
-}
-
-th {
-    background-color: #0000001a;
-}
-
 
 
 /*This handles the old style "section box", but also top level HTML section elements. It's basicattly for independant sections of content.*/