mirror of
https://github.com/haveno-dex/haveno.git
synced 2025-07-02 18:47:06 -04:00
restyle top nav to be rounded
This commit is contained in:
parent
2ef2a2f343
commit
c1132a888b
4 changed files with 51 additions and 45 deletions
|
@ -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";
|
||||
}
|
||||
|
||||
|
|
|
@ -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");
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue