tablet/atlantafx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use gray shades instead of accent shades for virtualized controls

Browse Source
This commit is contained in:
mkpaz 2022-08-30 14:27:09 +04:00
parent 4e50660a8f
commit b553bb5b32
2 changed files with 25 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
styles/src/components/_combo-box.scss
View File

@ -6,8 +6,8 @@
@use "../settings/utils"; @use "../settings/utils";
$color-cell-bg: -color-bg-default !default; $color-cell-bg: -color-bg-default !default;
$color-cell-bg-hover: if(cfg.$darkMode, -color-gray-7, -color-gray-0) !default; $color-cell-bg-hover: if(cfg.$darkMode, -color-gray-7, -color-gray-1) !default;
$color-cell-bg-selected: -color-accent-subtle !default; $color-cell-bg-selected: if(cfg.$darkMode, -color-gray-6, -color-gray-2) !default;
@mixin _arrow() { @mixin _arrow() {
@include icons.get("arrow-drop-down", false); @include icons.get("arrow-drop-down", false);

35
styles/src/components/_data.scss
View File

@ -3,6 +3,18 @@
@use "../settings/config" as cfg; @use "../settings/config" as cfg;
@use "../settings/icons"; @use "../settings/icons";
$color-cell-bg: -color-bg-default !default;
$color-cell-fg: -color-fg-default !default;
$color-cell-bg-selected: if(cfg.$darkMode, -color-gray-6, -color-gray-1) !default;
$color-cell-fg-selected: -color-fg-default !default;
$color-cell-bg-odd: -color-bg-subtle !default;
$color-cell-border: -color-border-default !default;
$color-header-bg: -color-bg-subtle !default;
$color-header-fg: -color-fg-default !default;
$color-resize-line: -color-accent-emphasis !default;
$color-drag-header: -color-accent-muted !default;
$color-drag-overlay: -color-accent-muted !default;
$cell-size-normal: 2.8em !default; $cell-size-normal: 2.8em !default;
$cell-size-dense: 2em !default; $cell-size-dense: 2em !default;
$cell-padding-x: 0.5em !default; $cell-padding-x: 0.5em !default;
@ -16,13 +28,12 @@ $tree-cell-indent: 1em !default;
@mixin _base() { @mixin _base() {
// draft (only supported by list view for now) -color-cell-bg: $color-cell-bg;
-color-cell-bg: -color-bg-default; -color-cell-fg: $color-cell-fg;
-color-cell-fg: -color-fg-default; -color-cell-bg-selected: $color-cell-bg-selected;
-color-cell-bg-selected: -color-accent-subtle; -color-cell-fg-selected: $color-cell-fg-selected;
-color-cell-fg-selected: -color-fg-default; -color-cell-bg-odd: $color-cell-bg-odd;
-color-cell-bg-odd: -color-bg-subtle; -color-cell-border: $color-cell-border;
-color-cell-border: -color-border-default;
-fx-border-color: -color-cell-border; -fx-border-color: -color-cell-border;
-fx-border-width: cfg.$border-width; -fx-border-width: cfg.$border-width;
@ -160,8 +171,8 @@ $tree-cell-indent: 1em !default;
@include _base(); @include _base();
-color-header-bg: -color-bg-subtle; -color-header-bg: $color-header-bg;
-color-header-fg: -color-fg-default; -color-header-fg: $color-header-fg;
&.bordered { &.bordered {
>.column-header-background { >.column-header-background {
@ -256,7 +267,7 @@ $tree-cell-indent: 1em !default;
// the .column-resize-line is shown when the user is attempting to resize a column // the .column-resize-line is shown when the user is attempting to resize a column
.column-resize-line { .column-resize-line {
-fx-background-color: -color-accent-emphasis; -fx-background-color: $color-resize-line;
-fx-padding: 0 1 0 1; -fx-padding: 0 1 0 1;
} }
@ -265,12 +276,12 @@ $tree-cell-indent: 1em !default;
.column-drag-header { .column-drag-header {
// -color-accent-muted must be RGBA color for this to work, because // -color-accent-muted must be RGBA color for this to work, because
// applying opacity to the whole pane makes label text unreadable // applying opacity to the whole pane makes label text unreadable
-fx-background-color: -color-accent-muted; -fx-background-color: $color-drag-header;
} }
// semi-transparent overlay to indicate the column that is currently being moved // semi-transparent overlay to indicate the column that is currently being moved
.column-overlay { .column-overlay {
-fx-background-color: -color-accent-muted; -fx-background-color: $color-drag-overlay;
} }
// this is shown when the table has no rows and/or no columns // this is shown when the table has no rows and/or no columns