Merge pull request #212 from logseq/fix-css-tables

Update: Add global variables colors support for the table element

resources/css/common.css

@@ -10,6 +10,7 @@
     --ls-primary-background-color: #002b36;
     --ls-secondary-background-color: #073642;
     --ls-tertiary-background-color: #0f4552;
+    --ls-quaternary-background-color: #01313d;
 
     --ls-block-properties-background-color: #02222a;
     --ls-search-background-color: var(--ls-primary-background-color);
@@ -52,6 +53,7 @@
     --ls-primary-background-color: white;
     --ls-secondary-background-color: #D8E1E8;
     --ls-tertiary-background-color: #f0f8ff;
+    --ls-quaternary-background-color: #f7f7f7
 
     --ls-block-properties-background-color: var(--ls-tertiary-background-color);
     --ls-search-background-color: var(--ls-primary-background-color);

resources/css/table.css

@@ -10,25 +10,25 @@ table {
 }
 
 tr {
-    border-bottom: 1px solid #ddd;
+    border-bottom: 1px solid var(--ls-border-color);
 }
 
 th {
     font-size: 14px;
     font-weight: 400;
     color: #039;
-    border-bottom: 2px solid #6678b1;
+    border-bottom: 2px solid var(--ls-border-color);
     padding: 10px 8px;
 }
 
 td {
-    border-bottom: 1px solid #ccc;
+    border-bottom: 1px solid var(--ls-border-color);
     padding: 6px 8px;
     text-align: left;
 }
 
-tr:nth-child(even) {background: #F7F7F7}
-tr:nth-child(odd) {background: #FFF}
+tr:nth-child(even) {background: var(--ls-quaternary-background-color);}
+tr:nth-child(odd) {background: var(--ls-primary-background-color);}
 
 caption.t-above {caption-side:top}
 caption.t-bottom {caption-side:bottom}
@@ -39,14 +39,14 @@ figcaption{margin-top:.3em}
 .org-center{text-align:center}
 
 .dark-theme th {
-    color: #a4b5b6;
+    color: var(--ls-primary-text-color);
 }
 
-.dark-theme tr:nth-child(even) {background: #01313d}
-.dark-theme tr:nth-child(odd) {background: #002b36}
+.dark-theme tr:nth-child(even) {background: var(--ls-quaternary-background-color);}
+.dark-theme tr:nth-child(odd) {background: var(--ls-primary-background-color);}
 .dark-theme td, .dark-theme tr {
     border-bottom: none;
 }
 .dark-theme th {
-    border-bottom: 2px solid #546376;
+    border-bottom: 2px solid var(--ls-border-color);
 }