Multiple CSS bugfixes for light/dark themes

[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
bisq-network · Sep 1, 2019 · 3399b90 · 3399b90
1 parent 74fe3ec
commit 3399b90
Show file tree

Hide file tree

Showing 2 changed files with 102 additions and 81 deletions.
diff --git a/desktop/src/main/java/bisq/desktop/bisq.css b/desktop/src/main/java/bisq/desktop/bisq.css
@@ -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;
 }
@@ -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;
 }
 
@@ -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 */
@@ -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;
 }
 
 /*******************************************************************************
@@ -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";
 }
 
@@ -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,
@@ -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,
@@ -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,
@@ -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);

diff --git a/desktop/src/main/java/bisq/desktop/theme-dark.css b/desktop/src/main/java/bisq/desktop/theme-dark.css
@@ -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;
@@ -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;
@@ -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;
@@ -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;
@@ -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;
@@ -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;
 }
@@ -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;
 }
@@ -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;
 }