From ed758f4c920f082f89c1c5e888b03e3fdc859932 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Fri, 11 Jul 2025 22:39:49 +0300
Subject: [PATCH] style/table collections: tweak appearance

---
 apps/client/src/stylesheets/table.css | 46 +++++++++++++++++----------
 1 file changed, 29 insertions(+), 17 deletions(-)

diff --git a/apps/client/src/stylesheets/table.css b/apps/client/src/stylesheets/table.css
index 9436d666b..784b5b8dd 100644
--- a/apps/client/src/stylesheets/table.css
+++ b/apps/client/src/stylesheets/table.css
@@ -1,22 +1,27 @@
 .tabulator {
-    --col-header-bottom-border: 2px solid var(--main-border-color);
-    --col-header-separator-border: none;
-    --col-header-background-color: transparent;
-    --col-header-text-color: var(--main-text-color);
+    --col-header-background-color: var(--main-background-color);
     --col-header-hover-background-color: var(--accented-background-color);
-    --col-header-arrow-active-color: var(--main-border-color);
+    --col-header-text-color: var(--main-text-color);
+    --col-header-arrow-active-color: var(--main-text-color);
     --col-header-arrow-inactive-color: var(--more-accented-background-color);
+    --col-header-separator-border: none;
+    --col-header-bottom-border: 2px solid var(--main-border-color);
 
+    --row-background-color: var(--main-background-color);
+    --row-alternate-background-color: var(--main-background-color);
+    --row-moving-background-color: var(--accented-background-color);
     --row-text-color: var(--main-text-color);
-    --row-alternate-background-color: transparent;
 
-    --grid-color: var(--more-accented-background-color);
+    --grid-horizontal-color: var(--more-accented-background-color);
+    --grid-vertical-color: red;
 
+    --cell-editable-hover-outline-color: var(--main-border-color);
     --cell-read-only-text-color: var(--muted-text-color);
-    --cell-editing-background-color: var(--ck-color-selector-focused-cell-background);
-    --cell-editing-text-color: initial;
+    
     --cell-editing-border-color: var(--main-border-color);
     --cell-editing-border-width: 2px;
+    --cell-editing-background-color: var(--ck-color-selector-focused-cell-background);
+    --cell-editing-text-color: initial;
 
     background: unset;
     border: unset;
@@ -29,11 +34,16 @@
 /* Column headers */
 
 .tabulator div.tabulator-header {
-    background: var(--col-header-background-color);
     border-bottom: var(--col-header-bottom-border);
+    background: var(--col-header-background-color);
     color: var(--col-header-text-color);
 }
 
+.tabulator div.tabulator-header .tabulator-col.tabulator-moving {
+    border: none;
+    background: var(--col-header-hover-background-color);
+}
+
 .tabulator .tabulator-col-content {
     padding: 8px 4px !important;
 }
@@ -62,7 +72,7 @@
 /* Table body */
 
 .tabulator-tableholder {
-    padding-top: 4px;
+    padding-top: 10px;
 }
 
 /* Rows */
@@ -75,20 +85,21 @@
 .tabulator-row {
     background: transparent;
     border-top: none;
-    border-bottom: 1px solid var(--grid-color);
+    border-bottom: 1px solid var(--grid-horizontal-color);
     color: var(--row-text-color);
 }
 
+.tabulator-row.tabulator-row-odd {
+    background: var(--row-background-color);
+}
+
 .tabulator-row.tabulator-row-even {
     background: var(--row-alternate-background-color);
 }
 
 .tabulator-row.tabulator-moving {
     border-color: transparent;
-    border-radius: 10px;
-    box-shadow: 0 0 20px rgba(0, 0, 0, .75);
-    transform: scaleX(.99);
-    backdrop-filter: blur(5px);
+    background-color: var(--row-moving-background-color);
 }
 
 /* Cell */
@@ -103,7 +114,8 @@
 }
 
 .tabulator:not(.tabulator-editing) .tabulator-row .tabulator-cell.tabulator-editable:hover {
-    outline: 2px solid yellow;
+    outline: 2px solid var(--cell-editable-hover-outline-color);
+    outline-offset: -1px;
 }
 
 .tabulator-row .tabulator-cell.tabulator-editing {