From e7c3c0ab532c269ed9d3f8c20a92eae027e0a014 Mon Sep 17 00:00:00 2001 From: Tobias Hagemann Date: Thu, 30 Jan 2020 15:33:54 +0100 Subject: [PATCH] updated color palette --- main/ui/src/main/resources/css/dark_theme.css | 177 +++++++++--------- .../ui/src/main/resources/css/light_theme.css | 156 ++++++++------- .../resources/fxml/main_window_title.fxml | 16 +- .../src/main/resources/fxml/vault_detail.fxml | 2 +- 4 files changed, 166 insertions(+), 185 deletions(-) diff --git a/main/ui/src/main/resources/css/dark_theme.css b/main/ui/src/main/resources/css/dark_theme.css index 7ad3a1da5..5f0982779 100644 --- a/main/ui/src/main/resources/css/dark_theme.css +++ b/main/ui/src/main/resources/css/dark_theme.css @@ -27,39 +27,37 @@ ******************************************************************************/ .root { - GREEN_0: #373B30; - GREEN_1: #384D14; - GREEN_2: #476611; - GREEN_3: #598016; - GREEN_4: #699917; - GREEN_5: #79B01A; - GREEN_6: #91C734; - GREEN_7: #B9E070; - GREEN_8: #D7E7BA; - GREEN_9: #F3F5F0; + PRIMARY_D2: #2E4D2E; + PRIMARY_D1: #407F41; + PRIMARY: #49B04A; + PRIMARY_L1: #66CC68; + PRIMARY_L2: #EBF5EB; - GRAY_0: #222222; - GRAY_1: #3B3B3B; - GRAY_2: #515151; - GRAY_3: #626262; - GRAY_4: #7E7E7E; - GRAY_5: #9E9E9E; - GRAY_6: #B1B1B1; - GRAY_7: #CFCFCF; - GRAY_8: #E1E1E1; - GRAY_9: #F7F7F7; + SECONDARY: #008A7B; + + GRAY_0: #1F2122; + GRAY_1: #35393B; + GRAY_2: #494E51; + GRAY_3: #585E62; + GRAY_4: #71797E; + GRAY_5: #8E989E; + GRAY_6: #9FAAB1; + GRAY_7: #BEC9CF; + GRAY_8: #D3DCE1; + GRAY_9: #EDF3F7; RED_5: #E74C3C; ORANGE_5: #E67E22; YELLOW_5: #F1C40F; - PRIMARY_BG: GREEN_3; - SECONDARY_BG: GRAY_3; MAIN_BG: GRAY_1; TEXT_FILL: GRAY_9; - TEXT_FILL_PRIMARY: GREEN_5; - TEXT_FILL_SECONDARY: GRAY_5; - TEXT_FILL_WHITE: white; + TEXT_FILL_HIGHLIGHTED: PRIMARY; + TEXT_FILL_MUTED: GRAY_5; + + TITLE_BG: linear-gradient(to bottom, GRAY_2, GRAY_1); + TITLE_TEXT_FILL: PRIMARY; + CONTROL_BORDER_NORMAL: GRAY_3; CONTROL_BORDER_FOCUSED: GRAY_5; CONTROL_BORDER_DISABLED: GRAY_2; @@ -67,27 +65,20 @@ CONTROL_BG_HOVER: GRAY_1; CONTROL_BG_ARMED: GRAY_2; CONTROL_BG_DISABLED: GRAY_1; - CONTROL_PRIMARY_BORDER_NORMAL: GREEN_5; - CONTROL_PRIMARY_BORDER_FOCUSED: GREEN_7; - CONTROL_PRIMARY_BORDER_DISABLED: GREEN_3; - CONTROL_PRIMARY_BG_NORMAL: GREEN_3; - CONTROL_PRIMARY_BG_ARMED: GREEN_4; - CONTROL_PRIMARY_BG_DISABLED: GREEN_2; - CONTROL_PRIMARY_LIGHT_BG_NORMAL: GREEN_0; - CONTROL_WHITE_BG_ARMED: GRAY_8; + CONTROL_BG_SELECTED: GRAY_1; + + CONTROL_PRIMARY_BORDER_NORMAL: PRIMARY; + CONTROL_PRIMARY_BORDER_ARMED: PRIMARY_L1; + CONTROL_PRIMARY_BORDER_FOCUSED: SECONDARY; + CONTROL_PRIMARY_BG_NORMAL: PRIMARY; + CONTROL_PRIMARY_BG_ARMED: PRIMARY_L1; + SCROLL_BAR_THUMB_NORMAL: GRAY_3; SCROLL_BAR_THUMB_HOVER: GRAY_4; - INDICATOR_BG: RED_5; - DRAG_N_DROP_INDICATOR_BG: GRAY_3; + PROGRESS_INDICATOR_BEGIN: GRAY_7; PROGRESS_INDICATOR_END: GRAY_5; PROGRESS_BAR_BG: GRAY_2; - PASSWORD_STRENGTH_INDICATOR_BG: GRAY_3; - PASSWORD_STRENGTH_INDICATOR_BG_STRENGTH_0: RED_5; - PASSWORD_STRENGTH_INDICATOR_BG_STRENGTH_1: ORANGE_5; - PASSWORD_STRENGTH_INDICATOR_BG_STRENGTH_2: YELLOW_5; - PASSWORD_STRENGTH_INDICATOR_BG_STRENGTH_3: GREEN_6; - PASSWORD_STRENGTH_INDICATOR_BG_STRENGTH_4: GREEN_5; -fx-background-color: MAIN_BG; -fx-text-fill: TEXT_FILL; @@ -105,7 +96,7 @@ } .label-secondary { - -fx-text-fill: TEXT_FILL_SECONDARY; + -fx-text-fill: TEXT_FILL_MUTED; } .label-large { @@ -136,11 +127,11 @@ } .glyph-icon-primary { - -fx-fill: PRIMARY_BG; + -fx-fill: PRIMARY; } -.glyph-icon-secondary { - -fx-fill: SECONDARY_BG; +.glyph-icon-muted { + -fx-fill: TEXT_FILL_MUTED; } .glyph-icon-white { @@ -158,7 +149,8 @@ ******************************************************************************/ .main-window .title { - -fx-background-color: PRIMARY_BG; + -fx-background-color: CONTROL_BORDER_NORMAL, TITLE_BG; + -fx-background-insets: 0, 0 0 1px 0; } .main-window .title .label { @@ -166,7 +158,7 @@ -fx-font-size: 21px; -fx-font-style: normal; -fx-font-weight: 700; - -fx-text-fill: white; + -fx-text-fill: TITLE_TEXT_FILL; } .main-window .title .button { @@ -181,24 +173,23 @@ } .main-window .title .button:armed .glyph-icon { - -fx-fill: CONTROL_WHITE_BG_ARMED; + -fx-fill: GRAY_8; } .main-window .update-indicator { - -fx-background-color: PRIMARY_BG, white, INDICATOR_BG; - -fx-background-insets: 0, 1px, 2px; - -fx-background-radius: 6px, 5px, 4px; - -fx-translate-x: -1px; - -fx-translate-y: 1px; + -fx-background-color: white, RED_5; + -fx-background-insets: 1px, 2px; + -fx-background-radius: 6px, 5px; + -fx-effect: dropshadow(three-pass-box, rgba(0,0,0,0.8), 2, 0, 0, 0); } .main-window .drag-n-drop-indicator { - -fx-border-color: DRAG_N_DROP_INDICATOR_BG; + -fx-border-color: SECONDARY; -fx-border-width: 3px; } .main-window .drag-n-drop-indicator .drag-n-drop-header { - -fx-background-color: DRAG_N_DROP_INDICATOR_BG; + -fx-background-color: SECONDARY; -fx-padding: 3px; } @@ -225,24 +216,24 @@ } .tab-pane .tab:selected { - -fx-background-color: PRIMARY_BG, CONTROL_PRIMARY_LIGHT_BG_NORMAL; + -fx-background-color: PRIMARY, CONTROL_BG_SELECTED; } .tab-pane .tab .tab-label { - -fx-text-fill: SECONDARY_BG; + -fx-text-fill: TEXT_FILL_MUTED; -fx-alignment: CENTER; } .tab-pane .tab .glyph-icon { - -fx-fill: SECONDARY_BG; + -fx-fill: TEXT_FILL_MUTED; } .tab-pane .tab:selected .glyph-icon { - -fx-fill: PRIMARY_BG; + -fx-fill: PRIMARY; } .tab-pane .tab:selected .tab-label { - -fx-text-fill: TEXT_FILL_PRIMARY; + -fx-text-fill: TEXT_FILL_HIGHLIGHTED; } /******************************************************************************* @@ -271,16 +262,16 @@ } .list-view:focused .list-cell:selected { - -fx-background-color: PRIMARY_BG, CONTROL_PRIMARY_LIGHT_BG_NORMAL; + -fx-background-color: PRIMARY, CONTROL_BG_SELECTED; -fx-background-insets: 0, 0 0 0 3px; } .list-cell:selected { - -fx-background-color: CONTROL_PRIMARY_LIGHT_BG_NORMAL; + -fx-background-color: CONTROL_BG_SELECTED; } .list-cell .glyph-icon { - -fx-fill: SECONDARY_BG; + -fx-fill: TEXT_FILL_MUTED; } .list-cell .header-label { @@ -289,16 +280,16 @@ } .list-cell .detail-label { - -fx-text-fill: TEXT_FILL_SECONDARY; + -fx-text-fill: TEXT_FILL_MUTED; -fx-font-size: 0.8em; } .list-cell:selected .glyph-icon { - -fx-fill: PRIMARY_BG; + -fx-fill: PRIMARY; } .list-cell:selected .header-label { - -fx-text-fill: TEXT_FILL_PRIMARY; + -fx-text-fill: TEXT_FILL_HIGHLIGHTED; } .list-cell.drop-above { @@ -379,13 +370,13 @@ } .badge-primary { - -fx-text-fill: TEXT_FILL_WHITE; - -fx-background-color: PRIMARY_BG; + -fx-text-fill: white; + -fx-background-color: PRIMARY; } .badge-secondary { - -fx-text-fill: TEXT_FILL_WHITE; - -fx-background-color: SECONDARY_BG; + -fx-text-fill: white; + -fx-background-color: SECONDARY; } /******************************************************************************* @@ -395,27 +386,27 @@ ******************************************************************************/ .password-strength-indicator .segment { - -fx-background-color: PASSWORD_STRENGTH_INDICATOR_BG; + -fx-background-color: CONTROL_BORDER_NORMAL; } .password-strength-indicator.strength-0 .segment.active { - -fx-background-color: PASSWORD_STRENGTH_INDICATOR_BG_STRENGTH_0; + -fx-background-color: RED_5; } .password-strength-indicator.strength-1 .segment.active { - -fx-background-color: PASSWORD_STRENGTH_INDICATOR_BG_STRENGTH_1; + -fx-background-color: ORANGE_5; } .password-strength-indicator.strength-2 .segment.active { - -fx-background-color: PASSWORD_STRENGTH_INDICATOR_BG_STRENGTH_2; + -fx-background-color: YELLOW_5; } .password-strength-indicator.strength-3 .segment.active { - -fx-background-color: PASSWORD_STRENGTH_INDICATOR_BG_STRENGTH_3; + -fx-background-color: PRIMARY; } .password-strength-indicator.strength-4 .segment.active { - -fx-background-color: PASSWORD_STRENGTH_INDICATOR_BG_STRENGTH_4; + -fx-background-color: PRIMARY_D1; } /******************************************************************************* @@ -442,8 +433,8 @@ .text-input { -fx-cursor: text; -fx-text-fill: TEXT_FILL; - -fx-highlight-fill: PRIMARY_BG; - -fx-prompt-text-fill: TEXT_FILL_SECONDARY; + -fx-highlight-fill: PRIMARY; + -fx-prompt-text-fill: TEXT_FILL_MUTED; -fx-background-color: CONTROL_BORDER_NORMAL, CONTROL_BG_NORMAL; -fx-background-insets: 0, 1px; -fx-background-radius: 4px; @@ -455,7 +446,7 @@ } .text-input:disabled { - -fx-text-fill: TEXT_FILL_SECONDARY; + -fx-text-fill: TEXT_FILL_MUTED; -fx-background-color: CONTROL_BORDER_DISABLED, CONTROL_BG_DISABLED; } @@ -487,7 +478,7 @@ } .text-input:disabled { - -fx-text-fill: TEXT_FILL_SECONDARY; + -fx-text-fill: TEXT_FILL_MUTED; -fx-background-color: CONTROL_BORDER_DISABLED, CONTROL_BG_DISABLED; } @@ -499,8 +490,8 @@ -fx-padding: 0.2em 0.5em 0.2em 0.5em; -fx-cursor: text; -fx-text-fill: TEXT_FILL; - -fx-highlight-fill: PRIMARY_BG; - -fx-prompt-text-fill: TEXT_FILL_SECONDARY; + -fx-highlight-fill: PRIMARY; + -fx-prompt-text-fill: TEXT_FILL_MUTED; -fx-background-color: null; } @@ -529,7 +520,7 @@ } .button:default { - -fx-text-fill: TEXT_FILL_WHITE; + -fx-text-fill: white; -fx-background-color: CONTROL_PRIMARY_BORDER_NORMAL, CONTROL_PRIMARY_BG_NORMAL; } @@ -538,25 +529,25 @@ } .button:default:armed { - -fx-background-color: CONTROL_PRIMARY_BORDER_NORMAL, CONTROL_PRIMARY_BG_ARMED; + -fx-background-color: CONTROL_PRIMARY_BORDER_ARMED, CONTROL_PRIMARY_BG_ARMED; } .button:disabled, .button:default:disabled { - -fx-text-fill: TEXT_FILL_SECONDARY; + -fx-text-fill: TEXT_FILL_MUTED; -fx-background-color: CONTROL_BORDER_DISABLED, CONTROL_BG_DISABLED; } .button:disabled .glyph-icon { - -fx-fill: TEXT_FILL_SECONDARY; + -fx-fill: TEXT_FILL_MUTED; } .button:default .glyph-icon { - -fx-fill: TEXT_FILL_WHITE; + -fx-fill: white; } .button:default .label { - -fx-text-fill: TEXT_FILL_WHITE; + -fx-text-fill: white; } .button-large { @@ -577,7 +568,7 @@ } .hyperlink.hyperlink-secondary { - -fx-text-fill: TEXT_FILL_SECONDARY; + -fx-text-fill: TEXT_FILL_MUTED; } .hyperlink-hover-icon { @@ -601,7 +592,7 @@ } .check-box:disabled { - -fx-text-fill: TEXT_FILL_SECONDARY; + -fx-text-fill: TEXT_FILL_MUTED; } .check-box > .box { @@ -694,7 +685,7 @@ } .choice-box:disabled > .label { - -fx-text-fill: TEXT_FILL_SECONDARY; + -fx-text-fill: TEXT_FILL_MUTED; } .choice-box > .open-button { @@ -709,7 +700,7 @@ } .choice-box:disabled > .open-button > .arrow { - -fx-background-color: transparent, TEXT_FILL_SECONDARY; + -fx-background-color: transparent, TEXT_FILL_MUTED; } .choice-box .context-menu { @@ -758,7 +749,7 @@ } .menu-item:disabled > .label { - -fx-text-fill: TEXT_FILL_SECONDARY; + -fx-text-fill: TEXT_FILL_MUTED; } .radio-menu-item:checked > .left-container > .radio { diff --git a/main/ui/src/main/resources/css/light_theme.css b/main/ui/src/main/resources/css/light_theme.css index a09d3a908..d26020c15 100644 --- a/main/ui/src/main/resources/css/light_theme.css +++ b/main/ui/src/main/resources/css/light_theme.css @@ -27,16 +27,13 @@ ******************************************************************************/ .root { - GREEN_0: #373B30; - GREEN_1: #384D14; - GREEN_2: #476611; - GREEN_3: #598016; - GREEN_4: #699917; - GREEN_5: #79B01A; - GREEN_6: #91C734; - GREEN_7: #B9E070; - GREEN_8: #D7E7BA; - GREEN_9: #F3F5F0; + PRIMARY_D2: #2E4D2E; + PRIMARY_D1: #407F41; + PRIMARY: #49B04A; + PRIMARY_L1: #66CC68; + PRIMARY_L2: #EBF5EB; + + SECONDARY: #008A7B; GRAY_0: #222222; GRAY_1: #3B3B3B; @@ -53,13 +50,14 @@ ORANGE_5: #E67E22; YELLOW_5: #F1C40F; - PRIMARY_BG: GREEN_5; - SECONDARY_BG: GRAY_5; MAIN_BG: GRAY_9; TEXT_FILL: GRAY_0; - TEXT_FILL_PRIMARY: GREEN_4; - TEXT_FILL_SECONDARY: GRAY_4; - TEXT_FILL_WHITE: white; + TEXT_FILL_HIGHLIGHTED: PRIMARY; + TEXT_FILL_MUTED: GRAY_5; + + TITLE_BG: PRIMARY; + TITLE_TEXT_FILL: white; + CONTROL_BORDER_NORMAL: GRAY_7; CONTROL_BORDER_FOCUSED: GRAY_5; CONTROL_BORDER_DISABLED: GRAY_8; @@ -67,27 +65,20 @@ CONTROL_BG_HOVER: GRAY_9; CONTROL_BG_ARMED: GRAY_8; CONTROL_BG_DISABLED: GRAY_9; - CONTROL_PRIMARY_BORDER_NORMAL: GREEN_3; - CONTROL_PRIMARY_BORDER_FOCUSED: GREEN_1; - CONTROL_PRIMARY_BORDER_DISABLED: GREEN_5; - CONTROL_PRIMARY_BG_NORMAL: GREEN_5; - CONTROL_PRIMARY_BG_ARMED: GREEN_4; - CONTROL_PRIMARY_BG_DISABLED: GREEN_6; - CONTROL_PRIMARY_LIGHT_BG_NORMAL: GREEN_9; - CONTROL_WHITE_BG_ARMED: GRAY_8; + CONTROL_BG_SELECTED: PRIMARY_L2; + + CONTROL_PRIMARY_BORDER_NORMAL: PRIMARY_D1; + CONTROL_PRIMARY_BORDER_ARMED: PRIMARY_D2; + CONTROL_PRIMARY_BORDER_FOCUSED: SECONDARY; + CONTROL_PRIMARY_BG_NORMAL: PRIMARY; + CONTROL_PRIMARY_BG_ARMED: PRIMARY_D1; + SCROLL_BAR_THUMB_NORMAL: GRAY_7; SCROLL_BAR_THUMB_HOVER: GRAY_6; - INDICATOR_BG: RED_5; - DRAG_N_DROP_INDICATOR_BG: GRAY_5; + PROGRESS_INDICATOR_BEGIN: GRAY_2; PROGRESS_INDICATOR_END: GRAY_4; PROGRESS_BAR_BG: GRAY_8; - PASSWORD_STRENGTH_INDICATOR_BG: GRAY_5; - PASSWORD_STRENGTH_INDICATOR_BG_STRENGTH_0: RED_5; - PASSWORD_STRENGTH_INDICATOR_BG_STRENGTH_1: ORANGE_5; - PASSWORD_STRENGTH_INDICATOR_BG_STRENGTH_2: YELLOW_5; - PASSWORD_STRENGTH_INDICATOR_BG_STRENGTH_3: GREEN_6; - PASSWORD_STRENGTH_INDICATOR_BG_STRENGTH_4: GREEN_5; -fx-background-color: MAIN_BG; -fx-text-fill: TEXT_FILL; @@ -105,7 +96,7 @@ } .label-secondary { - -fx-text-fill: TEXT_FILL_SECONDARY; + -fx-text-fill: TEXT_FILL_MUTED; } .label-large { @@ -136,11 +127,11 @@ } .glyph-icon-primary { - -fx-fill: PRIMARY_BG; + -fx-fill: PRIMARY; } -.glyph-icon-secondary { - -fx-fill: SECONDARY_BG; +.glyph-icon-muted { + -fx-fill: TEXT_FILL_MUTED; } .glyph-icon-white { @@ -158,7 +149,7 @@ ******************************************************************************/ .main-window .title { - -fx-background-color: PRIMARY_BG; + -fx-background-color: TITLE_BG; } .main-window .title .label { @@ -166,7 +157,7 @@ -fx-font-size: 21px; -fx-font-style: normal; -fx-font-weight: 700; - -fx-text-fill: white; + -fx-text-fill: TITLE_TEXT_FILL; } .main-window .title .button { @@ -181,24 +172,23 @@ } .main-window .title .button:armed .glyph-icon { - -fx-fill: CONTROL_WHITE_BG_ARMED; + -fx-fill: GRAY_8; } .main-window .update-indicator { - -fx-background-color: PRIMARY_BG, white, INDICATOR_BG; - -fx-background-insets: 0, 1px, 2px; - -fx-background-radius: 6px, 5px, 4px; - -fx-translate-x: -1px; - -fx-translate-y: 1px; + -fx-background-color: white, RED_5; + -fx-background-insets: 1px, 2px; + -fx-background-radius: 6px, 5px; + -fx-effect: dropshadow(three-pass-box, rgba(0,0,0,0.8), 2, 0, 0, 0); } .main-window .drag-n-drop-indicator { - -fx-border-color: DRAG_N_DROP_INDICATOR_BG; + -fx-border-color: SECONDARY; -fx-border-width: 3px; } .main-window .drag-n-drop-indicator .drag-n-drop-header { - -fx-background-color: DRAG_N_DROP_INDICATOR_BG; + -fx-background-color: SECONDARY; -fx-padding: 3px; } @@ -225,24 +215,24 @@ } .tab-pane .tab:selected { - -fx-background-color: PRIMARY_BG, CONTROL_PRIMARY_LIGHT_BG_NORMAL; + -fx-background-color: PRIMARY, CONTROL_BG_SELECTED; } .tab-pane .tab .tab-label { - -fx-text-fill: SECONDARY_BG; + -fx-text-fill: TEXT_FILL_MUTED; -fx-alignment: CENTER; } .tab-pane .tab .glyph-icon { - -fx-fill: SECONDARY_BG; + -fx-fill: TEXT_FILL_MUTED; } .tab-pane .tab:selected .glyph-icon { - -fx-fill: PRIMARY_BG; + -fx-fill: PRIMARY; } .tab-pane .tab:selected .tab-label { - -fx-text-fill: TEXT_FILL_PRIMARY; + -fx-text-fill: TEXT_FILL_HIGHLIGHTED; } /******************************************************************************* @@ -271,16 +261,16 @@ } .list-view:focused .list-cell:selected { - -fx-background-color: PRIMARY_BG, CONTROL_PRIMARY_LIGHT_BG_NORMAL; + -fx-background-color: PRIMARY, CONTROL_BG_SELECTED; -fx-background-insets: 0, 0 0 0 3px; } .list-cell:selected { - -fx-background-color: CONTROL_PRIMARY_LIGHT_BG_NORMAL; + -fx-background-color: CONTROL_BG_SELECTED; } .list-cell .glyph-icon { - -fx-fill: SECONDARY_BG; + -fx-fill: TEXT_FILL_MUTED; } .list-cell .header-label { @@ -289,16 +279,16 @@ } .list-cell .detail-label { - -fx-text-fill: TEXT_FILL_SECONDARY; + -fx-text-fill: TEXT_FILL_MUTED; -fx-font-size: 0.8em; } .list-cell:selected .glyph-icon { - -fx-fill: PRIMARY_BG; + -fx-fill: PRIMARY; } .list-cell:selected .header-label { - -fx-text-fill: TEXT_FILL_PRIMARY; + -fx-text-fill: TEXT_FILL_HIGHLIGHTED; } .list-cell.drop-above { @@ -379,13 +369,13 @@ } .badge-primary { - -fx-text-fill: TEXT_FILL_WHITE; - -fx-background-color: PRIMARY_BG; + -fx-text-fill: white; + -fx-background-color: PRIMARY; } .badge-secondary { - -fx-text-fill: TEXT_FILL_WHITE; - -fx-background-color: SECONDARY_BG; + -fx-text-fill: white; + -fx-background-color: SECONDARY; } /******************************************************************************* @@ -395,27 +385,27 @@ ******************************************************************************/ .password-strength-indicator .segment { - -fx-background-color: PASSWORD_STRENGTH_INDICATOR_BG; + -fx-background-color: CONTROL_BORDER_NORMAL; } .password-strength-indicator.strength-0 .segment.active { - -fx-background-color: PASSWORD_STRENGTH_INDICATOR_BG_STRENGTH_0; + -fx-background-color: RED_5; } .password-strength-indicator.strength-1 .segment.active { - -fx-background-color: PASSWORD_STRENGTH_INDICATOR_BG_STRENGTH_1; + -fx-background-color: ORANGE_5; } .password-strength-indicator.strength-2 .segment.active { - -fx-background-color: PASSWORD_STRENGTH_INDICATOR_BG_STRENGTH_2; + -fx-background-color: YELLOW_5; } .password-strength-indicator.strength-3 .segment.active { - -fx-background-color: PASSWORD_STRENGTH_INDICATOR_BG_STRENGTH_3; + -fx-background-color: PRIMARY; } .password-strength-indicator.strength-4 .segment.active { - -fx-background-color: PASSWORD_STRENGTH_INDICATOR_BG_STRENGTH_4; + -fx-background-color: PRIMARY_D1; } /******************************************************************************* @@ -442,8 +432,8 @@ .text-input { -fx-cursor: text; -fx-text-fill: TEXT_FILL; - -fx-highlight-fill: PRIMARY_BG; - -fx-prompt-text-fill: TEXT_FILL_SECONDARY; + -fx-highlight-fill: PRIMARY; + -fx-prompt-text-fill: TEXT_FILL_MUTED; -fx-background-color: CONTROL_BORDER_NORMAL, CONTROL_BG_NORMAL; -fx-background-insets: 0, 1px; -fx-background-radius: 4px; @@ -455,7 +445,7 @@ } .text-input:disabled { - -fx-text-fill: TEXT_FILL_SECONDARY; + -fx-text-fill: TEXT_FILL_MUTED; -fx-background-color: CONTROL_BORDER_DISABLED, CONTROL_BG_DISABLED; } @@ -487,7 +477,7 @@ } .text-input:disabled { - -fx-text-fill: TEXT_FILL_SECONDARY; + -fx-text-fill: TEXT_FILL_MUTED; -fx-background-color: CONTROL_BORDER_DISABLED, CONTROL_BG_DISABLED; } @@ -499,8 +489,8 @@ -fx-padding: 0.2em 0.5em 0.2em 0.5em; -fx-cursor: text; -fx-text-fill: TEXT_FILL; - -fx-highlight-fill: PRIMARY_BG; - -fx-prompt-text-fill: TEXT_FILL_SECONDARY; + -fx-highlight-fill: PRIMARY; + -fx-prompt-text-fill: TEXT_FILL_MUTED; -fx-background-color: null; } @@ -529,7 +519,7 @@ } .button:default { - -fx-text-fill: TEXT_FILL_WHITE; + -fx-text-fill: white; -fx-background-color: CONTROL_PRIMARY_BORDER_NORMAL, CONTROL_PRIMARY_BG_NORMAL; } @@ -538,25 +528,25 @@ } .button:default:armed { - -fx-background-color: CONTROL_PRIMARY_BORDER_NORMAL, CONTROL_PRIMARY_BG_ARMED; + -fx-background-color: CONTROL_PRIMARY_BORDER_ARMED, CONTROL_PRIMARY_BG_ARMED; } .button:disabled, .button:default:disabled { - -fx-text-fill: TEXT_FILL_SECONDARY; + -fx-text-fill: TEXT_FILL_MUTED; -fx-background-color: CONTROL_BORDER_DISABLED, CONTROL_BG_DISABLED; } .button:disabled .glyph-icon { - -fx-fill: TEXT_FILL_SECONDARY; + -fx-fill: TEXT_FILL_MUTED; } .button:default .glyph-icon { - -fx-fill: TEXT_FILL_WHITE; + -fx-fill: white; } .button:default .label { - -fx-text-fill: TEXT_FILL_WHITE; + -fx-text-fill: white; } .button-large { @@ -577,7 +567,7 @@ } .hyperlink.hyperlink-secondary { - -fx-text-fill: TEXT_FILL_SECONDARY; + -fx-text-fill: TEXT_FILL_MUTED; } .hyperlink-hover-icon { @@ -601,7 +591,7 @@ } .check-box:disabled { - -fx-text-fill: TEXT_FILL_SECONDARY; + -fx-text-fill: TEXT_FILL_MUTED; } .check-box > .box { @@ -694,7 +684,7 @@ } .choice-box:disabled > .label { - -fx-text-fill: TEXT_FILL_SECONDARY; + -fx-text-fill: TEXT_FILL_MUTED; } .choice-box > .open-button { @@ -709,7 +699,7 @@ } .choice-box:disabled > .open-button > .arrow { - -fx-background-color: transparent, TEXT_FILL_SECONDARY; + -fx-background-color: transparent, TEXT_FILL_MUTED; } .choice-box .context-menu { @@ -758,7 +748,7 @@ } .menu-item:disabled > .label { - -fx-text-fill: TEXT_FILL_SECONDARY; + -fx-text-fill: TEXT_FILL_MUTED; } .radio-menu-item:checked > .left-container > .radio { diff --git a/main/ui/src/main/resources/fxml/main_window_title.fxml b/main/ui/src/main/resources/fxml/main_window_title.fxml index 968f706bc..0078cf5b0 100644 --- a/main/ui/src/main/resources/fxml/main_window_title.fxml +++ b/main/ui/src/main/resources/fxml/main_window_title.fxml @@ -1,11 +1,11 @@ - - - + + + - - - + + + - + @@ -36,7 +36,7 @@ - + diff --git a/main/ui/src/main/resources/fxml/vault_detail.fxml b/main/ui/src/main/resources/fxml/vault_detail.fxml index 05db140e8..8438fc362 100644 --- a/main/ui/src/main/resources/fxml/vault_detail.fxml +++ b/main/ui/src/main/resources/fxml/vault_detail.fxml @@ -39,7 +39,7 @@ - +