From efe1b47b8824cc63d81660f1d6c7de8b9f2dd0ed Mon Sep 17 00:00:00 2001 From: wiz Date: Fri, 30 Aug 2019 04:40:41 +0900 Subject: [PATCH] Additional CSS fixes/tweaks for Dark Mode theme --- .../main/java/bisq/desktop/app/BisqApp.java | 4 +- desktop/src/main/java/bisq/desktop/bisq.css | 13 +++ .../src/main/java/bisq/desktop/theme-dark.css | 99 +++++++++++++++++-- 3 files changed, 108 insertions(+), 8 deletions(-) diff --git a/desktop/src/main/java/bisq/desktop/app/BisqApp.java b/desktop/src/main/java/bisq/desktop/app/BisqApp.java index d130767024..9add903ad5 100644 --- a/desktop/src/main/java/bisq/desktop/app/BisqApp.java +++ b/desktop/src/main/java/bisq/desktop/app/BisqApp.java @@ -244,10 +244,10 @@ public class BisqApp extends Application implements UncaughtExceptionHandler { if (useDarkMode) colorSheet = "/bisq/desktop/theme-dark.css"; scene.getStylesheets().setAll( - colorSheet, "/bisq/desktop/bisq.css", "/bisq/desktop/images.css", - "/bisq/desktop/CandleStickChart.css"); + "/bisq/desktop/CandleStickChart.css", + colorSheet); // load theme last to override CSS colors } private void setupStage(Scene scene) { diff --git a/desktop/src/main/java/bisq/desktop/bisq.css b/desktop/src/main/java/bisq/desktop/bisq.css index f14607c8eb..6d18f20939 100644 --- a/desktop/src/main/java/bisq/desktop/bisq.css +++ b/desktop/src/main/java/bisq/desktop/bisq.css @@ -230,6 +230,19 @@ -fx-background-color: -fx-selection-bar; } +.list-view:focused, +.tree-view:focused, +.table-view:focused, +.tree-table-view:focused, +.table-view:focused, +tree-table-view:focused { + -fx-background-insets: 0; +} +.list-view:focused { + -fx-background-color: -bs-color-primary; + -fx-background-insets: 0; +} + /* Selected rows */ .list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected, .tree-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-cell:filled:selected, diff --git a/desktop/src/main/java/bisq/desktop/theme-dark.css b/desktop/src/main/java/bisq/desktop/theme-dark.css index 2acf994b33..dbbf7b23e3 100644 --- a/desktop/src/main/java/bisq/desktop/theme-dark.css +++ b/desktop/src/main/java/bisq/desktop/theme-dark.css @@ -1,7 +1,7 @@ .root { -bs-color-primary: #25b135; -bs-color-primary-dark: #2ea33c; - -bs-text-color: #cfcecf; + -bs-text-color: #cfcfcf; -bs-background-color: #2e2e31; -bs-background-gray: #1d1d21; -bs-content-background-gray: #242424; @@ -68,8 +68,8 @@ -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: #2e2e31; - -bs-rd-separator-dark: #151517; + -bs-rd-separator: #444444; + -bs-rd-separator-dark: #222222; -bs-rd-error-red: #d83431; -bs-rd-message-bubble: #2cadaf; -bs-toggle-selected: #504f52; @@ -107,7 +107,7 @@ } .list-view { - -fx-background-color: -bs-background-color; + -fx-background-color: -bs-background-gray; } .list-view .list-cell { -fx-background-color: -bs-background-color; @@ -118,6 +118,9 @@ .list-view .list-cell:even { -fx-background-color: derive(-bs-background-color, 5%); } +.list-view .list-cell:selected { + -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; @@ -130,9 +133,22 @@ .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-row-cell:even .table-cell { + -fx-background-color: -bs-background-color; +} + +.table-view .table-row-cell:odd .table-cell { + -fx-background-color: derive(-bs-background-color, 5%); +} +.table-view .table-row-cell:selected { + -fx-background-color: -fx-selection-bar; +} .jfx-tab-pane .tab-content-area { -fx-background-color: -bs-tab-content-area; @@ -142,8 +158,38 @@ -fx-background-color: -bs-viewport-background; } -.scroll-pane { - -fx-background-color: -bs-scroll-pane-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; +} +.jfx-text-field:readonly, .hyperlink-with-icon { + -fx-background-color: -bs-background-gray; +} +.input-with-border { + -fx-border-color: -bs-color-gray-2; +} + +.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%); +} +.action-button:disabled { + -fx-background-color: -bs-color-gray-2; + -fx-text-fill: -bs-rd-font-dark-gray; +} +.action-button { + -fx-background-color: -bs-color-primary-dark; } #sell-button, #sell-button-big { @@ -153,3 +199,44 @@ #buy-button, #buy-button-big { -fx-background-color: #006600 !important; } + +.wallet-seed-words { + -fx-text-fill: -bs-color-gray-6; +} + +.chart-pane, .chart-plot-background, +#charts .chart-plot-background, +#charts-dao .chart-plot-background { + -fx-background-color: transparent; +} +.chart-horizontal-grid-lines, .chart-vertical-grid-lines { + -fx-stroke: -bs-color-gray-1; +} + +.separated-phase-bar-active { + -fx-text-fill: -fx-accent; +} + +.separated-phase-bar-inactive { + -fx-text-fill: -bs-color-primary-dark; +} + +.jfx-badge .badge-pane .text { + -fx-fill: white; +} + +.scroll-pane { + -fx-background-color: -bs-scroll-pane-background; +} +.scroll-bar:horizontal .thumb:hover, +.scroll-bar:vertical .thumb:hover { + -fx-background-color: -bs-color-gray-5; +} +.scroll-bar:horizontal .thumb:pressed, +.scroll-bar:vertical .thumb:pressed { + -fx-background-color: -bs-color-gray-4; +} +.scroll-bar:vertical:focused, +.scroll-bar:horizontal:focused { + -fx-background-color: transparent, -bs-color-gray-4, -bs-color-gray-4; +}