style/table collections: tweak appearance

This commit is contained in:
Adorian Doran
2025-07-11 22:39:49 +03:00
parent 22300e8151
commit ed758f4c92

View File

@@ -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 {