blender/flamenco
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web: Style tweaks to Tabulator tables

Browse Source
This commit is contained in:
Pablo Vazquez 2022-05-04 18:47:50 +02:00
parent dad5da49be
commit 4f1b1be90b
2 changed files with 15 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
web/app/src/assets/base.css
View File

@ -13,7 +13,7 @@
--color-text-muted: #999; --color-text-muted: #999;
--color-text-hint: #555; --color-text-hint: #555;
--color-border: #222; --color-border: #282828;
--border-width: 2px; --border-width: 2px;
--border-radius: 4px; --border-radius: 4px;
@ -23,10 +23,8 @@
--font-size-base: 14px; --font-size-base: 14px;
--font-size-sm: 12px; --font-size-sm: 12px;
--table-color-background-row: #333; --table-color-background-row: #303030;
--table-color-background-row-hover: #3a3a3a; --table-color-background-row-odd: #2b2b2b;
--table-color-background-row-odd: #292929;
--table-color-background-row-odd-hover: #3a3a3a;
--table-color-background-row-selected: var(--color-accent); --table-color-background-row-selected: var(--color-accent);
--table-color-background-row-selected: var(--color-accent); --table-color-background-row-selected: var(--color-accent);

24
web/app/src/assets/tabulator.css
View File

@ -58,12 +58,13 @@
} }
.tabulator .tabulator-header .tabulator-col { .tabulator .tabulator-header .tabulator-col {
align-items: center;
box-sizing: border-box; box-sizing: border-box;
display: inline-block; display: inline-flex;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
text-align: left; text-align: left;
vertical-align: bottom; vertical-align: middle;
} }
.tabulator .tabulator-header .tabulator-col.tabulator-moving { .tabulator .tabulator-header .tabulator-col.tabulator-moving {
@ -79,6 +80,11 @@
padding: var(--spacer-xs); padding: var(--spacer-xs);
} }
/* First column, usually containing a checkbox for selecting rows. */
.tabulator .tabulator-header .tabulator-col:first-child .tabulator-col-content {
padding: 0 .75rem;
}
.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-header-menu-button { .tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-header-menu-button {
padding: 0 8px; padding: 0 8px;
} }
@ -170,7 +176,7 @@
.tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover { .tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover {
cursor: pointer; cursor: pointer;
background-color: #1a1a1a; color: var(--color-text-highlight);
} }
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="none"] .tabulator-col-content .tabulator-col-sorter { .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="none"] .tabulator-col-content .tabulator-col-sorter {
@ -483,14 +489,13 @@
.tabulator-row { .tabulator-row {
background-color: var(--table-color-background-row-odd); background-color: var(--table-color-background-row-odd);
border-radius: var(--border-radius);
box-sizing: border-box; box-sizing: border-box;
min-height: 22px; min-height: 22px;
position: relative; position: relative;
transition: background-color var(--transition-speed-fast) ease-out; transition: color var(--transition-speed-fast) ease-out;
} }
.tabulator-row.tabulator-row:hover { .tabulator-row:hover {
color: var(--color-text-highlight); color: var(--color-text-highlight);
} }
@ -498,22 +503,17 @@
background-color: var(--table-color-background-row); background-color: var(--table-color-background-row);
} }
.tabulator-row.tabulator-row-even:hover {
background-color: var(--table-color-background-row-hover);
}
.tabulator-row.tabulator-selectable:hover { .tabulator-row.tabulator-selectable:hover {
background-color: var(--table-color-background-row-odd-hover);
cursor: pointer; cursor: pointer;
} }
.tabulator-row.tabulator-selected { .tabulator-row.tabulator-selected {
background-color: var(--color-accent-background); background-color: var(--color-accent-background);
border-radius: var(--border-radius);
color: var(--color-accent-text); color: var(--color-accent-text);
} }
.tabulator-row.tabulator-selected:hover { .tabulator-row.tabulator-selected:hover {
background-color: var(--color-accent);
color: white; color: white;
cursor: pointer; cursor: pointer;
} }