restyle top nav to be rounded

This commit is contained in:
woodser 2025-05-03 12:43:26 -04:00
parent 2ef2a2f343
commit c1132a888b
No known key found for this signature in database
GPG key ID: 55A10DD48ADEE5EF
4 changed files with 51 additions and 45 deletions

View file

@ -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";
}

View file

@ -298,8 +298,8 @@ public class MainView extends InitializableView<StackPane, MainViewModel> {
}
});
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<StackPane, MainViewModel> {
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<StackPane, MainViewModel> {
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<StackPane, MainViewModel> {
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<StackPane, MainViewModel> {
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<StackPane, MainViewModel> {
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");

View file

@ -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;
}

View file

@ -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;