diff --git a/desktop/src/main/java/haveno/desktop/haveno.css b/desktop/src/main/java/haveno/desktop/haveno.css index 214ae06bd0..992dc3b983 100644 --- a/desktop/src/main/java/haveno/desktop/haveno.css +++ b/desktop/src/main/java/haveno/desktop/haveno.css @@ -690,7 +690,7 @@ tree-table-view:focused { /* Main UI */ #base-content-container { - -fx-background-color: -bs-background-gray; + -fx-background-color: -bs-color-gray-background; } .content-pane { @@ -717,8 +717,8 @@ tree-table-view:focused { -fx-background-color: -bs-rd-nav-background; -fx-border-width: 0 0 1 0; -fx-border-color: -bs-rd-nav-primary-border; - -fx-pref-height: 57; - -fx-padding: 0 11 0 0; + -fx-background-radius: 999; + -fx-border-radius: 999; } .top-navigation .separator:vertical .line { @@ -729,23 +729,35 @@ tree-table-view:focused { .nav-primary { -fx-background-color: -bs-rd-nav-primary-background; - -fx-padding: 0 11 0 11; - -fx-border-width: 0 1 0 0; + -fx-border-width: 0 0 0 0; -fx-border-color: -bs-rd-nav-primary-border; - -fx-min-width: 410; + -fx-background-radius: 999; + -fx-border-radius: 999; + -fx-padding: 9 9 9 11; } .nav-secondary { - -fx-padding: 0 11 0 11; - -fx-min-width: 296; + -fx-padding: 9 0 9 9; +} + +.nav-separator { + -fx-max-width: 1; + -fx-min-width: 1; + -fx-border-color: transparent transparent transparent -bs-rd-separator-dark; + -fx-border-width: 1; + -fx-border-insets: 0 0 0 1; +} + +.nav-spacer { + -fx-max-width: 10; + -fx-min-width: 10; } .nav-price-balance { - -fx-background-color: -bs-color-gray-background; - -fx-background-radius: 3; - -fx-effect: innershadow(gaussian, -bs-text-color-transparent, 3, 0, 0, 1); - -fx-pref-height: 41; - -fx-padding: 0 10 0 0; + -fx-background-color: -bs-rd-nav-background; + -fx-background-radius: 999; + -fx-border-radius: 999; + -fx-padding: 0 15 0 0; } .nav-price-balance .separator:vertical .line { @@ -769,7 +781,7 @@ tree-table-view:focused { .nav-button { -fx-cursor: hand; -fx-background-color: transparent; - -fx-padding: 11 15; + -fx-padding: 9 15; -fx-background-radius: 999; -fx-border-radius: 999; } @@ -2148,7 +2160,7 @@ textfield */ } #price-feed-combo > .list-cell { - -fx-text-fill: -bs-text-color; + -fx-text-fill: -bs-rd-font-balance; -fx-font-family: "IBM Plex Sans"; } diff --git a/desktop/src/main/java/haveno/desktop/main/MainView.java b/desktop/src/main/java/haveno/desktop/main/MainView.java index 7856a2021f..0107185378 100644 --- a/desktop/src/main/java/haveno/desktop/main/MainView.java +++ b/desktop/src/main/java/haveno/desktop/main/MainView.java @@ -298,8 +298,8 @@ public class MainView extends InitializableView { } }); - HBox primaryNav = new HBox(marketButton, getNavigationSeparator(), buyButton, getNavigationSeparator(), - sellButton, getNavigationSeparator(), portfolioButtonWithBadge, getNavigationSeparator(), fundsButton); + HBox primaryNav = new HBox(marketButton, getNavigationSpacer(), buyButton, getNavigationSpacer(), + sellButton, getNavigationSpacer(), portfolioButtonWithBadge, getNavigationSpacer(), fundsButton); primaryNav.setAlignment(Pos.CENTER_LEFT); primaryNav.getStyleClass().add("nav-primary"); @@ -308,23 +308,22 @@ public class MainView extends InitializableView { HBox secondaryNav = new HBox(supportButtonWithBadge, getNavigationSpacer(), accountButton, getNavigationSpacer(), settingsButtonWithBadge, getNavigationSpacer()); secondaryNav.getStyleClass().add("nav-secondary"); - HBox.setHgrow(secondaryNav, Priority.SOMETIMES); + HBox.setHgrow(secondaryNav, Priority.ALWAYS); - secondaryNav.setAlignment(Pos.CENTER); + secondaryNav.setAlignment(Pos.CENTER_LEFT); HBox priceAndBalance = new HBox(marketPriceBox.second, getNavigationSeparator(), availableBalanceBox.second, getNavigationSeparator(), pendingBalanceBox.second, getNavigationSeparator(), reservedBalanceBox.second); - priceAndBalance.setMaxHeight(41); priceAndBalance.setAlignment(Pos.CENTER); - priceAndBalance.setSpacing(9); + priceAndBalance.setSpacing(12); priceAndBalance.getStyleClass().add("nav-price-balance"); - HBox navPane = new HBox(primaryNav, secondaryNav, getNavigationSpacer(), + HBox navPane = new HBox(primaryNav, getNavigationSeparator(), secondaryNav, getNavigationSpacer(), priceAndBalance) {{ - setLeftAnchor(this, 0d); - setRightAnchor(this, 0d); - setTopAnchor(this, 0d); + setLeftAnchor(this, 25d); + setRightAnchor(this, 25d); + setTopAnchor(this, 20d); setPadding(new Insets(0, 0, 0, 0)); getStyleClass().add("top-navigation"); }}; @@ -334,7 +333,7 @@ public class MainView extends InitializableView { getStyleClass().add("content-pane"); setLeftAnchor(this, 0d); setRightAnchor(this, 0d); - setTopAnchor(this, 57d); + setTopAnchor(this, 90d); setBottomAnchor(this, 0d); }}; @@ -398,8 +397,8 @@ public class MainView extends InitializableView { private Separator getNavigationSeparator() { final Separator separator = new Separator(Orientation.VERTICAL); HBox.setHgrow(separator, Priority.ALWAYS); - separator.setMaxHeight(22); separator.setMaxWidth(Double.MAX_VALUE); + separator.getStyleClass().add("nav-separator"); return separator; } @@ -407,6 +406,7 @@ public class MainView extends InitializableView { private Region getNavigationSpacer() { final Region spacer = new Region(); HBox.setHgrow(spacer, Priority.ALWAYS); + spacer.getStyleClass().add("nav-spacer"); return spacer; } @@ -825,6 +825,9 @@ public class MainView extends InitializableView { this.setToggleGroup(navButtons); this.getStyleClass().add("nav-button"); + this.setMinWidth(Region.USE_PREF_SIZE); // prevent squashing content + this.setPrefWidth(Region.USE_COMPUTED_SIZE); + // Japanese fonts are dense, increase top nav button text size if (model.getPreferences() != null && "ja".equals(model.getPreferences().getUserLanguage())) { this.getStyleClass().add("nav-button-japanese"); diff --git a/desktop/src/main/java/haveno/desktop/theme-dark.css b/desktop/src/main/java/haveno/desktop/theme-dark.css index 988b4da8d3..64d177151b 100644 --- a/desktop/src/main/java/haveno/desktop/theme-dark.css +++ b/desktop/src/main/java/haveno/desktop/theme-dark.css @@ -22,7 +22,7 @@ -bs-color-primary-dark: #0c59bd; -bs-text-color: #dadada; -bs-background-color: #29292a; - -bs-background-gray: #2B2B2B; + -bs-background-gray: black; -bs-content-background-gray: black; /* fifty shades of gray */ @@ -43,7 +43,7 @@ -bs-color-gray-bbb: #5a5a5a; -bs-color-gray-aaa: #29292a; -bs-color-gray-fafa: #0a0a0a; - -bs-color-gray-background: #1F1F1F; + -bs-color-gray-background: black; /* lesser used colors */ -bs-color-blue-5: #0a4576; @@ -70,8 +70,8 @@ -bs-rd-nav-border: #535353; -bs-rd-nav-primary-border: rgba(0, 0, 0, 0); -bs-rd-nav-border-color: rgba(255, 255, 255, 0.1); - -bs-rd-nav-background: black; - -bs-rd-nav-primary-background: black; + -bs-rd-nav-background: #29292a; + -bs-rd-nav-primary-background: #29292a; -bs-rd-nav-selected: black; -bs-rd-nav-deselected: rgba(255, 255, 255, .65); -bs-rd-nav-button-hover: derive(-bs-rd-nav-background, 10%); @@ -106,7 +106,7 @@ -bs-color-gray-line: #504f52; -bs-rd-separator: #1F1F1F; - -bs-rd-separator-dark: #1F1F1F; + -bs-rd-separator-dark: rgb(255, 255, 255, 0.1); -bs-rd-error-red: #d83431; -bs-rd-error-field: #521C1C; -bs-rd-message-bubble: #0086c6; @@ -226,10 +226,6 @@ -fx-background-color: -bs-viewport-background; } -.jfx-tab-pane .tab-header-background { - -fx-background-color: -bs-rd-nav-background; -} - /* text field */ .jfx-text-field, .jfx-text-area, .jfx-combo-box, .jfx-combo-box > .list-cell { @@ -450,11 +446,6 @@ -jfx-disable-animation: true; } -.top-navigation { - -fx-border-width: 0 0 0 0; - -fx-padding: 0 7 0 0; -} - .nav-price-balance { -fx-effect: null; } diff --git a/desktop/src/main/java/haveno/desktop/theme-light.css b/desktop/src/main/java/haveno/desktop/theme-light.css index e3284643d4..74431f6aba 100644 --- a/desktop/src/main/java/haveno/desktop/theme-light.css +++ b/desktop/src/main/java/haveno/desktop/theme-light.css @@ -42,7 +42,7 @@ -bs-rd-green-dark: #3EA34A; -bs-rd-nav-selected: #0b65da; -bs-rd-nav-deselected: rgba(255, 255, 255, 0.75); - -bs-rd-nav-background: #0c59bd; + -bs-rd-nav-background: #0b65da; -bs-rd-nav-primary-background: #0b65da; -bs-rd-nav-button-hover: derive(-bs-rd-nav-background, 10%); -bs-rd-nav-primary-button-hover: derive(-bs-rd-nav-primary-background, 10%); @@ -61,18 +61,18 @@ -bs-footer-pane-background: #dddddd; -bs-footer-pane-text: #4b4b4b; -bs-footer-pane-line: #bbb; - -bs-rd-font-balance: #4f4f4f; + -bs-rd-font-balance: white; -bs-rd-font-dark-gray: #3c3c3c; -bs-rd-font-dark: #4b4b4b; -bs-rd-font-light: #8d8d8d; -bs-rd-font-lighter: #a7a7a7; -bs-rd-font-confirmation-label: #504f52; - -bs-rd-font-balance-label: #8e8e8e; + -bs-rd-font-balance-label: #bbbbbb; -bs-text-color-transparent-dark: rgba(0, 0, 0, 0.54); -bs-text-color-transparent: rgba(0, 0, 0, 0.2); -bs-color-gray-line: #979797; -bs-rd-separator: #dbdbdb; - -bs-rd-separator-dark: #d5e0d6; + -bs-rd-separator-dark: rgb(255, 255, 255, 0.1); -bs-rd-error-red: #dd0000; -bs-rd-message-bubble: #0086c6; -bs-toggle-selected: #7b7b7b;