diff --git a/web/app/src/assets/base.css b/web/app/src/assets/base.css index 7940d05c..3bae39b6 100644 --- a/web/app/src/assets/base.css +++ b/web/app/src/assets/base.css @@ -13,7 +13,7 @@ --color-text-muted: #999; --color-text-hint: #555; - --color-border: #222; + --color-border: #282828; --border-width: 2px; --border-radius: 4px; @@ -23,10 +23,8 @@ --font-size-base: 14px; --font-size-sm: 12px; - --table-color-background-row: #333; - --table-color-background-row-hover: #3a3a3a; - --table-color-background-row-odd: #292929; - --table-color-background-row-odd-hover: #3a3a3a; + --table-color-background-row: #303030; + --table-color-background-row-odd: #2b2b2b; --table-color-background-row-selected: var(--color-accent); --table-color-background-row-selected: var(--color-accent); diff --git a/web/app/src/assets/tabulator.css b/web/app/src/assets/tabulator.css index 77180273..d35a7786 100644 --- a/web/app/src/assets/tabulator.css +++ b/web/app/src/assets/tabulator.css @@ -58,12 +58,13 @@ } .tabulator .tabulator-header .tabulator-col { + align-items: center; box-sizing: border-box; - display: inline-block; + display: inline-flex; overflow: hidden; position: relative; text-align: left; - vertical-align: bottom; + vertical-align: middle; } .tabulator .tabulator-header .tabulator-col.tabulator-moving { @@ -79,6 +80,11 @@ 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 { padding: 0 8px; } @@ -170,7 +176,7 @@ .tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover { 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 { @@ -483,14 +489,13 @@ .tabulator-row { background-color: var(--table-color-background-row-odd); - border-radius: var(--border-radius); box-sizing: border-box; min-height: 22px; 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); } @@ -498,22 +503,17 @@ 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 { - background-color: var(--table-color-background-row-odd-hover); cursor: pointer; } .tabulator-row.tabulator-selected { background-color: var(--color-accent-background); + border-radius: var(--border-radius); color: var(--color-accent-text); } .tabulator-row.tabulator-selected:hover { - background-color: var(--color-accent); color: white; cursor: pointer; }