fix: improve table style

lepture · Apr 7, 2024 · a4680ec · a4680ec
1 parent 2ac12a1
commit a4680ec
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 18 deletions.
diff --git a/static/css/contents/table.css b/static/css/contents/table.css
@@ -3,6 +3,8 @@
   overflow-x: auto;
   margin-top: 2rem;
   margin-bottom: 2rem;
+  border: 1px solid var(--yue-c-table-border);
+  border-radius: 6px;
 }
 
 .yue .table-wrapper > table {
@@ -13,42 +15,51 @@
   border-top: 1px solid var(--yue-c-td-border);
 }
 
-.yue .table-wrapper th {
-  background-color: var(--yue-c-th-bg);
-  border-left: 1px solid var(--yue-c-td-border);
+.yue .table-wrapper thead tr:first-child {
+  border-top: 0;
 }
 
-.yue .table-wrapper th:last-child {
-  border-right: 1px solid var(--yue-c-td-border);
+.yue .table-wrapper th {
+  background-color: var(--yue-c-th-background);
+  border-left: 1px solid var(--yue-c-td-border);
+  padding: 0.725rem 1rem;
 }
 
 .yue .table-wrapper td {
   border-left: 1px solid var(--yue-c-td-border);
+  padding: 0.5rem 1rem;
 }
 
-.yue .table-wrapper td {
-  border-right: 1px solid var(--yue-c-td-border);
+.yue .table-wrapper tr > th:first-child,
+.yue .table-wrapper tr > td:first-child {
+  border-left: 0;
 }
 
 .yue .table-wrapper tbody tr:first-child {
   border-top: 1px solid var(--yue-c-td-border);
 }
 
-.yue .table-wrapper tbody tr:last-child {
-  border-bottom-width: 1px;
-}
-
 .yue .table-wrapper thead + tbody tr:first-child {
   border-top-width: 0;
 }
 
+.yue .table-wrapper caption {
+  padding: 0.5rem;
+  margin: 0;
+  border-bottom: 1px solid var(--yue-c-th-border);
+}
+
+.yue .table-wrapper tbody tr.row-odd {
+  background-color: var(--yue-c-row-background);
+}
+
 .yue table.hlist td {
   vertical-align: top;
 }
 
 .table-wrapper {
   overflow-x: auto;
-  scrollbar-gutter: stable;
+  scrollbar-gutter: auto;
 }
 
 .table-wrapper::-webkit-scrollbar {
@@ -75,18 +86,17 @@
 .yue table.ghost td {
   border-left: 0;
   border-right: 0;
-  padding: 0.75rem;
   background-color: transparent;
 }
-.yue table.ghost th:last-child {
-  border-right: 0;
-}
 .yue table.ghost caption {
   margin-bottom: 0;
   padding-bottom: 0.5rem;
   border-bottom: 3px solid var(--yue-c-td-border);
 }
-.yue table.ghost thead tr:first-of-type {
+.yue table.ghost thead tr:first-child {
   border-top: 0;
   border-bottom-width: 3px;
 }
+.yue .table-wrapper.ghost {
+  border: 0;
+}
diff --git a/static/css/contents/yue.css b/static/css/contents/yue.css
@@ -18,9 +18,11 @@
   --yue-c-code-text: var(--accent-a11);
   --yue-c-code-background: var(--accent-a3);
 
-  --yue-c-th-bg: var(--color-surface-accent);
+  --yue-c-table-border: var(--gray-a5);
+  --yue-c-th-background: var(--color-surface-accent);
   --yue-c-th-border: var(--gray-a5);
   --yue-c-td-border: var(--gray-a4);
+  --yue-c-row-background: var(--sy-c-surface);
 }
 
 .yue {