diff --git a/main/ui/src/main/resources/css/theme.css b/main/ui/src/main/resources/css/theme.css index 1d1e5b5cc..0c32931be 100644 --- a/main/ui/src/main/resources/css/theme.css +++ b/main/ui/src/main/resources/css/theme.css @@ -9,8 +9,10 @@ PRIMARY_BG: #70A11B; GRAY_LIGHT_BG: #F7F7F7; TEXT_FILL: #222; - CONTROL_BORDER: #CFCFCF; - CONTROL_ARMED: #E1E1E1; + TEXT_FILL_LIGHT: #7E7E7E; + CONTROL_BORDER_NORMAL: #CFCFCF; + CONTROL_BORDER_FOCUSED: #9E9E9E; + CONTROL_BG_ARMED: #E1E1E1; -fx-background-color: GRAY_LIGHT_BG; -fx-text-fill: TEXT_FILL; @@ -43,7 +45,7 @@ } .main-window .title .button:armed .fa-icon { - -fx-fill: CONTROL_ARMED; + -fx-fill: CONTROL_BG_ARMED; } /******************************************************************************* @@ -57,7 +59,7 @@ } .split-pane:horizontal > .split-pane-divider { - -fx-background-color: GRAY_LIGHT_BG, CONTROL_BORDER; + -fx-background-color: GRAY_LIGHT_BG, CONTROL_BORDER_NORMAL; -fx-background-insets: 0, 0 1 0 0; } @@ -72,7 +74,20 @@ } .list-cell:selected { - -fx-background-color: CONTROL_ARMED; + -fx-background-color: CONTROL_BG_ARMED; +} + +.list-cell .lock-icon { + -fx-fill: TEXT_FILL; +} + +.list-cell .label { + -fx-text-fill: TEXT_FILL; +} + +.list-cell .detail-label { + -fx-text-fill: TEXT_FILL_LIGHT; + -fx-font-size: 0.8em; } .onboarding-overlay-arc { @@ -81,7 +96,7 @@ } .toolbar-container { - -fx-border-color: CONTROL_BORDER transparent transparent transparent; + -fx-border-color: CONTROL_BORDER_NORMAL transparent transparent transparent; -fx-border-width: 1px 0 0 0; } @@ -90,10 +105,15 @@ -fx-pref-width: 30px; -fx-background-color: transparent; -fx-background-insets: 0; - -fx-border-color: transparent CONTROL_BORDER transparent transparent; + -fx-background-radius: 0; + -fx-border-color: transparent CONTROL_BORDER_NORMAL transparent transparent; -fx-border-width: 1; } +.toolbar-container .button:armed { + -fx-background-color: CONTROL_BORDER_NORMAL, CONTROL_BG_ARMED; +} + /******************************************************************************* * * * Tooltip * @@ -117,13 +137,17 @@ .text-input { -fx-cursor: text; -fx-text-fill: TEXT_FILL; - -fx-prompt-text-fill: derive(TEXT_FILL, +50%); - -fx-background-color: CONTROL_BORDER, white; + -fx-prompt-text-fill: TEXT_FILL_LIGHT; + -fx-background-color: CONTROL_BORDER_NORMAL, white; -fx-background-insets: 0, 1px; -fx-background-radius: 4px; -fx-padding: 0.3em 0.5em 0.3em 0.5em; } +.text-input:focused { + -fx-background-color: CONTROL_BORDER_FOCUSED, white; +} + /**************************************************************************** * * * Buttons * @@ -134,14 +158,18 @@ -fx-pref-height: 25px; -fx-text-fill: TEXT_FILL; -fx-alignment: CENTER; - -fx-background-color: CONTROL_BORDER, white; + -fx-background-color: CONTROL_BORDER_NORMAL, white; -fx-background-insets: 0, 1px; -fx-background-radius: 4px; -fx-padding: 0.2em 0.4em 0.2em 0.4em; } +.button:focused { + -fx-background-color: CONTROL_BORDER_FOCUSED, white; +} + .button:armed { - -fx-background-color: CONTROL_BORDER, CONTROL_ARMED; + -fx-background-color: CONTROL_BORDER_NORMAL, CONTROL_BG_ARMED; } /******************************************************************************* @@ -156,12 +184,16 @@ } .check-box > .box { - -fx-background-color: CONTROL_BORDER, white; + -fx-background-color: CONTROL_BORDER_NORMAL, white; -fx-background-insets: 0, 1px; -fx-background-radius: 4px; -fx-padding: 0.3em; } +.check-box:focused > .box { + -fx-background-color: CONTROL_BORDER_FOCUSED, white; +} + .check-box > .box > .mark { -fx-background-color: transparent; -fx-padding: 0.4em; @@ -180,14 +212,14 @@ .choice-box { -fx-text-fill: TEXT_FILL; - -fx-background-color: CONTROL_BORDER, white; + -fx-background-color: CONTROL_BORDER_NORMAL, white; -fx-background-insets: 0, 1px; -fx-background-radius: 4px; -fx-padding: 0.3em 0.5em 0.3em 0.5em; } .choice-box:focused { - -fx-background-color: derive(CONTROL_BORDER, -20%), white; + -fx-background-color: CONTROL_BORDER_FOCUSED, white; } .choice-box > .open-button { @@ -202,7 +234,7 @@ } .choice-box .context-menu { - -fx-background-color: CONTROL_BORDER, white; + -fx-background-color: CONTROL_BORDER_NORMAL, white; -fx-background-insets: 0, 1px; -fx-background-radius: 4px; -fx-padding: 0.2em 0 0.2em 0; @@ -217,5 +249,5 @@ } .menu-item:focused { - -fx-background-color: CONTROL_ARMED; + -fx-background-color: CONTROL_BG_ARMED; } diff --git a/main/ui/src/main/resources/fxml/vault_list_cell.fxml b/main/ui/src/main/resources/fxml/vault_list_cell.fxml index af1582206..14e0093f0 100644 --- a/main/ui/src/main/resources/fxml/vault_list_cell.fxml +++ b/main/ui/src/main/resources/fxml/vault_list_cell.fxml @@ -1,25 +1,25 @@ - - - + + + - + - - + +