Skip to content

Commit

Permalink
Multiple CSS bugfixes for light/dark themes
Browse files Browse the repository at this point in the history 
[Light Theme]
* Fix wrong shade of gray used as background color on grid-pane
* Fix green scrollbars, should be gray as before

[Dark Theme]
* Fix action buttons being too dark on dark background
* Fix combo-box-editor referencing old CSS class names
* Fix incorrect shades of gray used for wizard item background
* Set font-smoothing to gray method

* Style javafx's main color palette, which fixes below issues:
* Fix dark text on dark background in text field on grid-pane
* Fix password entry input field dark on dark
* Fix trade chat bubbles and text
* Fix calendar date picker
* Fix viewing DAO proposal results
  • Loading branch information
@wiz
wiz committed Sep 1, 2019
1 parent d91f096 commit 5209c2f
Show file tree
Hide file tree
Showing 2 changed files with 102 additions and 81 deletions.
30 changes: 15 additions & 15 deletions desktop/src/main/java/bisq/desktop/bisq.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -485,20 +485,20 @@ tree-table-view:focused {
}

.scroll-bar {
-fx-background-color: transparent;
-fx-background-color: -bs-background-color;
-fx-background-radius: 0;
}

.scroll-bar:horizontal .track,
.scroll-bar:vertical .track {
-fx-background-color: transparent;
-fx-border-color: transparent;
-fx-background-color: -bs-background-color;
-fx-border-color: -bs-background-color;
-fx-background-radius: 0;
}

.scroll-bar:vertical .track-background,
.scroll-bar:horizontal .track-background {
-fx-background-color: transparent;
-fx-background-color: -bs-background-color;
-fx-background-insets: 0;
-fx-background-radius: 0;
}
Expand All @@ -522,14 +522,14 @@ tree-table-view:focused {

.scroll-bar:horizontal .thumb:pressed,
.scroll-bar:vertical .thumb:pressed {
-fx-background-color: -bs-color-gray-ccc;
-fx-background-color: -bs-color-gray-ddd;
}

.scroll-bar:vertical .increment-button,
.scroll-bar:vertical .decrement-button,
.scroll-bar:horizontal .increment-button,
.scroll-bar:horizontal .decrement-button {
-fx-background-color: transparent;
-fx-background-color: -bs-background-color;
-fx-padding: 1;
}

Expand All @@ -538,12 +538,12 @@ tree-table-view:focused {
.scroll-bar:horizontal .decrement-arrow,
.scroll-bar:vertical .decrement-arrow {
-fx-shape: null;
-fx-background-color: transparent;
-fx-background-color: -bs-background-color;
}

.scroll-bar:vertical:focused,
.scroll-bar:horizontal:focused {
-fx-background-color: transparent, -bs-color-darkest, -bs-color-gray-6;
-fx-background-color: -bs-background-color, -bs-color-gray-ccc, -bs-color-gray-ddd;
}

/* Behavior */
Expand Down Expand Up @@ -1028,8 +1028,8 @@ textfield */
}

.delete:hover {
-fx-text-fill: -bs-rd-black;
-fx-fill: -bs-rd-black;
-fx-text-fill: -bs-text-color;
-fx-fill: -bs-text-color;
}

/*******************************************************************************
Expand Down Expand Up @@ -1250,7 +1250,7 @@ textfield */
.combo-box-editor-bold {
-fx-font-weight: bold;
-fx-padding: 5 8 5 8 !important;
-fx-text-fill: -bs-rd-black;
-fx-text-fill: -bs-text-color;
-fx-font-family: "IBM Plex Sans Medium";
}

Expand Down Expand Up @@ -1301,7 +1301,7 @@ textfield */

/* Account setup */
#wizard-item-background-deactivated {
-fx-body-color: linear-gradient(to bottom, -bs-color-gray-1, -bs-color-gray-1);
-fx-body-color: linear-gradient(to bottom, -bs-content-background-gray, -bs-color-gray-aaa);
-fx-outer-border: linear-gradient(to bottom, -bs-background-gray, -bs-color-gray-3);
-fx-background-color: -fx-shadow-highlight-color,
-fx-outer-border,
Expand All @@ -1312,7 +1312,7 @@ textfield */
}

#wizard-item-background-active {
-fx-body-color: linear-gradient(to bottom, -bs-color-gray-0, -bs-color-gray-1);
-fx-body-color: linear-gradient(to bottom, -bs-bg-gray-5, -bs-color-gray-6);
-fx-outer-border: linear-gradient(to bottom, -bs-color-blue-1, -bs-color-blue-2);
-fx-background-color: -fx-shadow-highlight-color,
-fx-outer-border,
Expand All @@ -1323,7 +1323,7 @@ textfield */
}

#wizard-item-background-completed {
-fx-body-color: linear-gradient(to bottom, -bs-color-gray-1, -bs-color-gray-1);
-fx-body-color: linear-gradient(to bottom, -bs-content-background-gray, -bs-color-gray-aaa);
-fx-outer-border: linear-gradient(to bottom, -bs-bg-green, -bs-color-green-2);
-fx-background-color: -fx-shadow-highlight-color,
-fx-outer-border,
Expand Down Expand Up @@ -1523,7 +1523,7 @@ textfield */
* *
******************************************************************************/
.grid-pane {
-fx-background-color: -bs-background-gray;
-fx-background-color: -bs-content-background-gray;
-fx-background-radius: 5;
-fx-effect: null;
-fx-effect: dropshadow(gaussian, -bs-color-gray-10, 10, 0, 0, 0);
Expand Down
153 changes: 87 additions & 66 deletions desktop/src/main/java/bisq/desktop/theme-dark.css
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,31 @@
.root {
/* javafx main color palette */
-fx-base: #444444;
-fx-background: #2e2e2e;
-fx-control-inner-background: #1d1d21;
-fx-dark-text-color: #dadada;
-fx-mid-text-color: #cacaca;
-fx-light-text-color: #bababa;
-fx-text-fill: #cfcfcf;

/* javafx elements */
-fx-accent: #2ea33c;
-fx-box-border: #1d1d21;
-fx-focus-color: #2ea33c;
-fx-faint-focus-color: rgba(11, 76, 96, 0.13);
-fx-selection-bar: #2a7e2e;
-fx-selection-bar-non-focused: #2a7e2e;
-fx-default-button: derive(-fx-accent, 95%);

/* bisq main colors */
-bs-color-primary: #25b135;
-bs-color-primary-dark: #2ea33c;
-bs-text-color: #cfcfcf;
-bs-text-color: #bfbfbf;
-bs-background-color: #2e2e31;
-bs-background-gray: #1d1d21;
-bs-content-background-gray: #242424;

/* fifty shades of gray */
-bs-color-gray-13: #bbb;
-bs-color-gray-11: #f2f2f2;
-bs-color-gray-10: #cfcecf;
Expand All @@ -15,12 +36,15 @@
-bs-color-gray-2: #504f52;
-bs-color-gray-1: #2e2e31;
-bs-color-gray-0: #1d1d21;
-bs-color-gray-dim: dimgray;
-bs-color-gray-dim: #aaaaaa;
-bs-color-gray-ddd: #444444;
-bs-color-gray-ccc: #7a7a7a;
-bs-color-gray-bbb: #6a6a6a;
-bs-color-gray-bbb: #5a5a5a;
-bs-color-gray-aaa: #2e2e31;
-bs-color-gray-fafa: #fafafa;
-bs-color-gray-fafa: #0a0a0a;
-bs-color-gray-background: #2e2e31;

/* lesser used colors */
-bs-color-blue-5: #0a4576;
-bs-color-blue-4: #57acc9;
-bs-color-blue-3: #9bbdc9;
Expand All @@ -40,6 +64,8 @@
-bs-bg-green: #99ba9c;
-bs-rd-green: #25B135;
-bs-rd-green-dark: #3EA34A;

/* other element styling */
-bs-rd-nav-selected: #25b135;
-bs-rd-nav-deselected: rgba(46, 46, 49, 0.59);
-bs-rd-nav-background: #2ea33c;
Expand All @@ -48,26 +74,31 @@
-bs-rd-nav-border: #2e2e31;
-bs-rd-nav-border-color: rgba(46, 46, 49, 0.31);
-bs-rd-tab-border: #111;

-bs-tab-content-area: #111;
-bs-color-gray-background: #2e2e31;
-bs-content-pane-bg-top: #1d1d21;
-bs-content-pane-bg-bottom: #2e2e31;
-bs-scroll-pane-background: transparent;
-bs-tab-content-area: transparent;
-bs-viewport-background: transparent;

-bs-footer-pane-background: #2e2e31;
-bs-footer-pane-text: #cfcecf;
-bs-footer-pane-line: #2e2e31;
-bs-rd-font-balance: #929293;
-bs-rd-font-dark-gray: #7b7b7c;
-bs-rd-font-dark: #afaeb0;
-bs-rd-font-light: #cfcecf;

-bs-rd-font-balance: #929292;
-bs-rd-font-dark-gray: #7b7b7b;
-bs-rd-font-dark: #afafaf;
-bs-rd-font-light: #cfcfcf;
-bs-rd-font-lighter: #f2f2f2;

-bs-rd-font-confirmation-label: #504f52;
-bs-rd-font-balance-label: #504f52;

-bs-text-color-transparent-dark: rgba(29, 29, 33, 0.54);
-bs-text-color-transparent: rgba(29, 29, 33, 0.2);
-bs-color-gray-line: #504f52;

-bs-rd-separator: #444444;
-bs-rd-separator-dark: #222222;
-bs-rd-error-red: #d83431;
Expand All @@ -90,24 +121,18 @@
-bs-cancel: #1d1d21;
-bs-cancel-focus: black;
-bs-cancel-hover: #050506;
-fx-accent: #2ea33c;
-fx-box-border: #1d1d21;

-bs-green-soft: derive(-bs-rd-green, 60%);
-bs-red-soft: derive(-bs-rd-error-red, 60%);
-fx-focus-color: #2ea33c;
-fx-faint-focus-color: rgba(11, 76, 96, 0.13);
-fx-selection-bar: #2a7e2e;
-fx-selection-bar-non-focused: -fx-selection-bar;
-fx-default-button: white;
}

.text {
-fx-font-smoothing-type: gray;
-fx-fill: -bs-text-color;
-fx-text-fill: -bs-text-color;
}

.list-view {
-fx-background-color: -bs-background-gray;
/* list view */
.list-view, .table-view {
}
.list-view .list-cell {
-fx-background-color: -bs-background-color;
Expand All @@ -118,38 +143,42 @@
.list-view .list-cell:even {
-fx-background-color: derive(-bs-background-color, 5%);
}
.list-view .list-cell:selected {
.list-view .list-cell:selected,
.table-view .table-cell:selected {
-fx-background: -fx-accent;
-fx-background-color: -fx-selection-bar;
}
.list-view .list-cell .text {
-fx-text-fill: -bs-rd-font-dark-gray;
-fx-fill: -bs-rd-font-dark-gray;
-fx-border-color: -fx-selection-bar;
}

.number-column.table-cell {
-fx-background-color: -bs-background-color;
}

.table-view {
-fx-background-color: -bs-background-color;
}
.table-row-cell {
-fx-border-color: -bs-color-gray-1;
}
.table-view .table-cell {
-fx-background-color: -bs-background-color;
/* table view */
.table-view, .table-cell:focused, .table-row-cell {
-fx-background: transparent;
}
.table-view .table-row-cell:even .table-cell {
-fx-background-color: -bs-background-color;
-fx-background-color: derive(-bs-background-color, 5%);
-fx-border-color: derive(-bs-background-color,5%);
}

.table-view .table-row-cell:odd .table-cell {
-fx-background-color: derive(-bs-background-color, 5%);
-fx-background-color: derive(-bs-background-color,-5%);
-fx-border-color: derive(-bs-background-color,-5%);
}
.table-view .table-row-cell:selected {
.table-view .table-row-cell:selected .table-cell {
-fx-background: -fx-accent;
-fx-background-color: -fx-selection-bar;
-fx-border-color: -fx-selection-bar;
}
.table-row-cell {
-fx-border-color: -bs-background-color;
}
.table-row-cell:empty, .table-row-cell:empty:even, .table-row-cell:empty:odd {
-fx-background-color: -bs-background-color;
}

/* tab pane */
.jfx-tab-pane .tab-content-area {
-fx-background-color: -bs-tab-content-area;
}
Expand All @@ -158,44 +187,40 @@
-fx-background-color: -bs-viewport-background;
}

.jfx-text-field {
-fx-background-color: -bs-color-gray-0;
-fx-text-fill: -bs-rd-font-dark;
}
.jfx-text-field-top-label {
-fx-text-fill: -bs-color-gray-6;
}
.jfx-text-area:readonly {
-jfx-focus-color: transparent;
/* text field */
.jfx-text-field, .jfx-text-area,
.jfx-combo-box, .jfx-combo-box > .list-cell {
-fx-background-color: -bs-background-gray;
-fx-prompt-text-fill: -bs-color-gray-3;
-fx-text-fill: -bs-color-gray-4;
}
.jfx-text-field:readonly, .hyperlink-with-icon {
.jfx-text-area:readonly, .jfx-text-field:readonly,
.hyperlink-with-icon {
-fx-background: -bs-background-gray;
-fx-background-color: -bs-background-gray;
-fx-prompt-text-fill: -bs-color-gray-2;
-fx-text-fill: -bs-color-gray-3;
}
.input-with-border {
-fx-border-color: -bs-color-gray-2;
.jfx-combo-box > .text,
.jfx-text-field-top-label, .jfx-text-area-top-label {
-fx-text-fill: -bs-text-color;
}

.jfx-button, .action-button {
-fx-background-color: -bs-color-gray-1;
}
.jfx-button:hover, .jfx-button:focused {
-fx-background-color: derive(-bs-background-gray, -10%);
}
.action-button:hover, .action-button:focused {
-fx-background-color: derive(-bs-color-primary-dark, -10%);
/* avatar badge */
.jfx-badge .badge-pane .text {
-fx-fill: -bs-text-color;
}
.action-button:disabled {
-fx-background-color: -bs-color-gray-2;
-fx-text-fill: -bs-rd-font-dark-gray;
.icon {
-fx-text-fill: -bs-text-color;
}
.action-button {
-fx-background-color: -bs-color-primary-dark;

.input-with-border {
-fx-border-color: -bs-color-gray-2;
}

#sell-button, #sell-button-big {
-fx-background-color: #660000 !important;
}

#buy-button, #buy-button-big {
-fx-background-color: #006600 !important;
}
Expand All @@ -221,10 +246,6 @@
-fx-text-fill: -bs-color-primary-dark;
}

.jfx-badge .badge-pane .text {
-fx-fill: white;
}

.scroll-pane {
-fx-background-color: -bs-scroll-pane-background;
}
Expand Down

0 comments on commit 5209c2f

Please sign in to comment.