diff --git a/main/ui/src/main/java/org/cryptomator/ui/FxApplication.java b/main/ui/src/main/java/org/cryptomator/ui/FxApplication.java index 7bf3c24bd..eb362a50d 100644 --- a/main/ui/src/main/java/org/cryptomator/ui/FxApplication.java +++ b/main/ui/src/main/java/org/cryptomator/ui/FxApplication.java @@ -2,7 +2,6 @@ package org.cryptomator.ui; import javafx.application.Application; import javafx.application.Platform; -import javafx.beans.Observable; import javafx.beans.value.ObservableValue; import javafx.stage.Stage; import org.cryptomator.common.settings.Settings; @@ -34,7 +33,7 @@ public class FxApplication extends Application { public void start() { LOG.trace("FxApplication.start()"); - + settings.theme().addListener(this::themeChanged); loadSelectedStyleSheet(settings.theme().get()); @@ -66,15 +65,14 @@ public class FxApplication extends Application { switch (theme) { case CUSTOM: // TODO - Application.setUserAgentStylesheet(getClass().getResource("/css/win_theme.css").toString()); + Application.setUserAgentStylesheet(getClass().getResource("/css/mac_theme.css").toString()); break; case DARK: - // TODO - Application.setUserAgentStylesheet(getClass().getResource("/css/mac_theme.css").toString()); + Application.setUserAgentStylesheet(getClass().getResource("/css/dark_theme.css").toString()); break; case LIGHT: default: - Application.setUserAgentStylesheet(getClass().getResource("/css/theme.css").toString()); + Application.setUserAgentStylesheet(getClass().getResource("/css/light_theme.css").toString()); break; } } diff --git a/main/ui/src/main/java/org/cryptomator/ui/preferences/PreferencesModule.java b/main/ui/src/main/java/org/cryptomator/ui/preferences/PreferencesModule.java index ac42c9887..c85766ff4 100644 --- a/main/ui/src/main/java/org/cryptomator/ui/preferences/PreferencesModule.java +++ b/main/ui/src/main/java/org/cryptomator/ui/preferences/PreferencesModule.java @@ -28,6 +28,7 @@ abstract class PreferencesModule { @PreferencesScoped static Stage provideStage() { Stage stage = new Stage(); + stage.setTitle("Preferences"); stage.setMinWidth(400); stage.setMinHeight(300); stage.initModality(Modality.APPLICATION_MODAL); diff --git a/main/ui/src/main/resources/css/dark_theme.css b/main/ui/src/main/resources/css/dark_theme.css new file mode 100644 index 000000000..e783b0507 --- /dev/null +++ b/main/ui/src/main/resources/css/dark_theme.css @@ -0,0 +1,376 @@ +/******************************************************************************* + * * + * Colors * + * * + ******************************************************************************/ + +.root { + PRIMARY: #79B01A; + PRIMARY_BG: #70A11B; + MAIN_BG: #3B3B3B; + TEXT_FILL: #F7F7F7; + TEXT_FILL_LIGHT: #9E9E9E; + CONTROL_BORDER_NORMAL: #626262; + CONTROL_BORDER_FOCUSED: #9E9E9E; + CONTROL_BG_NORMAL: #222; + CONTROL_BG_ARMED: #515151; + CONTROL_WHITE_BG_ARMED: #E1E1E1; + SCROLL_BAR_THUMB_NORMAL: #626262; + SCROLL_BAR_THUMB_HOVER: #7E7E7E; + + -fx-background-color: MAIN_BG; + -fx-text-fill: TEXT_FILL; +} + +/******************************************************************************* + * * + * Labels * + * * + ******************************************************************************/ + +.label { + -fx-text-fill: TEXT_FILL; +} + +/******************************************************************************* + * * + * Main Window * + * * + ******************************************************************************/ + +.main-window .title { + -fx-background-color: PRIMARY_BG; +} + +.main-window .title .label { + -fx-font-family: 'Dosis'; + -fx-font-size: 21px; + -fx-font-style: normal; + -fx-font-weight: 700; + -fx-text-fill: white; +} + +.main-window .title .button { + -fx-background-color: none; +} + +.main-window .title .button .fa-icon { + -fx-fill: white; +} + +.main-window .title .button:armed .fa-icon { + -fx-fill: CONTROL_WHITE_BG_ARMED; +} + +.main-window .resizer { + -fx-background-color: linear-gradient(to bottom right, + transparent 50%, + CONTROL_BORDER_NORMAL 51%, + CONTROL_BORDER_NORMAL 60%, + transparent 61%, + transparent 70%, + CONTROL_BORDER_NORMAL 71%, + CONTROL_BORDER_NORMAL 80%, + transparent 81% + ); + -fx-cursor: nw_resize; +} + +/******************************************************************************* + * * + * SplitPane * + * * + ******************************************************************************/ + +.split-pane > .split-pane-divider { + -fx-padding: 0px 1px; +} + +.split-pane:horizontal > .split-pane-divider { + -fx-background-color: MAIN_BG, CONTROL_BORDER_NORMAL; + -fx-background-insets: 0, 0 1 0 0; +} + +/******************************************************************************* + * * + * Vault List * + * * + ******************************************************************************/ + +.list-view { + -fx-background-color: CONTROL_BG_NORMAL; +} + +.list-cell:selected { + -fx-background-color: CONTROL_BG_ARMED; +} + +.list-cell .lock-icon { + -fx-fill: TEXT_FILL; +} + +.list-cell .detail-label { + -fx-text-fill: TEXT_FILL_LIGHT; + -fx-font-size: 0.8em; +} + +.onboarding-overlay-arc { + -fx-stroke: TEXT_FILL; + -fx-fill: transparent; +} + +.toolbar-container { + -fx-border-color: CONTROL_BORDER_NORMAL transparent transparent transparent; + -fx-border-width: 1px 0 0 0; +} + +.toolbar-container .button { + -fx-pref-height: 30px; + -fx-pref-width: 30px; + -fx-background-color: transparent; + -fx-background-insets: 0; + -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; +} + +.toolbar-container .button .fa-icon { + -fx-fill: TEXT_FILL; +} + +/******************************************************************************* + * * + * ScrollBar * + * * + ******************************************************************************/ + +.scroll-bar > .thumb { + -fx-background-color: SCROLL_BAR_THUMB_NORMAL; + -fx-background-insets: 1px; + -fx-background-radius: 2px; +} + +.scroll-bar > .thumb:hover { + -fx-background-color: SCROLL_BAR_THUMB_HOVER; +} + +.scroll-bar:horizontal > .increment-button, +.scroll-bar:horizontal > .decrement-button { + -fx-padding: 3 0 3 0; +} + +.scroll-bar:vertical > .increment-button, +.scroll-bar:vertical > .decrement-button { + -fx-padding: 0 3 0 3; +} + +/******************************************************************************* + * * + * Tooltip * + * * + ******************************************************************************/ + +.tooltip { + -fx-text-fill: TEXT_FILL; + -fx-font-size: 0.8em; + -fx-background-color: CONTROL_BG_NORMAL; + -fx-padding: 0.2em 0.4em 0.2em 0.4em; + -fx-effect: dropshadow(three-pass-box, rgba(0,0,0,0.5), 2, 0, 0, 0); +} + +/******************************************************************************* + * * + * Text Fields * + * * + ******************************************************************************/ + +.text-input { + -fx-cursor: text; + -fx-text-fill: TEXT_FILL; + -fx-prompt-text-fill: TEXT_FILL_LIGHT; + -fx-background-color: CONTROL_BORDER_NORMAL, CONTROL_BG_NORMAL; + -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, CONTROL_BG_NORMAL; +} + +/******************************************************************************* + * * + * Buttons * + * * + ******************************************************************************/ + +.button { + -fx-pref-height: 25px; + -fx-text-fill: TEXT_FILL; + -fx-alignment: CENTER; + -fx-background-color: CONTROL_BORDER_NORMAL, CONTROL_BG_NORMAL; + -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, CONTROL_BG_NORMAL; +} + +.button:armed { + -fx-background-color: CONTROL_BORDER_NORMAL, CONTROL_BG_ARMED; +} + +/******************************************************************************* + * * + * Checkbox * + * * + ******************************************************************************/ + +.check-box { + -fx-text-fill: TEXT_FILL; + -fx-label-padding: 0 0 0 6px; +} + +.check-box > .box { + -fx-background-color: CONTROL_BORDER_NORMAL, CONTROL_BG_NORMAL; + -fx-background-insets: 0, 1px; + -fx-background-radius: 4px; + -fx-padding: 0.3em; +} + +.check-box:focused > .box { + -fx-background-color: CONTROL_BORDER_FOCUSED, CONTROL_BG_NORMAL; +} + +.check-box > .box > .mark { + -fx-background-color: transparent; + -fx-padding: 0.4em; + -fx-shape: "M-1,4, L-1,5.5 L3.5,8.5 L9,0 L9,-1 L7,-1 L3,6 L1,4 Z"; +} + +.check-box:selected > .box > .mark { + -fx-background-color: TEXT_FILL; +} + +/******************************************************************************* + * * + * Dropdown * + * * + ******************************************************************************/ + +.choice-box { + -fx-text-fill: TEXT_FILL; + -fx-background-color: CONTROL_BORDER_NORMAL, CONTROL_BG_NORMAL; + -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: CONTROL_BORDER_FOCUSED, CONTROL_BG_NORMAL; +} + +.choice-box > .open-button { + -fx-padding: 0 0 0 0.3em; +} + +.choice-box > .open-button > .arrow { + -fx-background-color: transparent, TEXT_FILL; + -fx-background-insets: 0 0 -1 0, 0; + -fx-padding: 0.15em 0.3em 0.15em 0.3em; + -fx-shape: "M 0 0 h 7 l -3.5 4 z"; +} + +.choice-box .context-menu { + -fx-background-color: CONTROL_BORDER_NORMAL, CONTROL_BG_NORMAL; + -fx-background-insets: 0, 1px; + -fx-background-radius: 4px; + -fx-padding: 0.2em 0 0.2em 0; +} + +.context-menu { + -fx-effect: dropshadow(three-pass-box, rgba(0,0,0,0.2), 8, 0, 0, 0); +} + +.menu-item { + -fx-padding: 0.2em 0.4em 0.2em 0.4em; +} + +.menu-item:focused { + -fx-background-color: CONTROL_BG_ARMED; +} + +/******************************************************************************* + * * + * ProgressIndicator * + * Derived from aquafx-project.com, (C) Claudine Zillmann, see NOTICE.md * + * * + ******************************************************************************/ + +.progress-indicator { + -fx-indeterminate-segment-count: 12; + -fx-spin-enabled: true; +} + +.progress-indicator:indeterminate > .spinner { + -fx-padding: 0.083333em; +} + +.progress-indicator:indeterminate .segment { + -fx-background-color: rgb(95.0, 95.0, 98.0), rgb(122.0, 122.0, 125.0); + -fx-background-insets: 0, 0.5; +} + +.progress-indicator:indeterminate .segment0 { + -fx-shape:"m 12.007729,4.9541827 c -0.49762,0.7596865 0.893181,1.6216808 1.327833,0.7666252 L 15.456199,2.0477574 C 15.942094,1.2061627 14.61426,0.43953765 14.128365,1.2811324 z"; +} + +.progress-indicator:indeterminate .segment1 { + -fx-shape:"m 9.2224559,4.62535 c -0.051108,0.9067177 1.5843581,0.957826 1.5332501,0 l 0,-4.24127319 c 0,-0.9717899 -1.5332501,-0.9717899 -1.5332501,0 z"; +} + +.progress-indicator:indeterminate .segment2 { + -fx-shape:"M 8.0465401,4.9030617 C 8.5441601,5.6627485 7.1533584,6.5247425 6.7187068,5.6696872 L 4.5980702,1.9966363 C 4.1121752,1.1550418 5.4400085,0.38841683 5.9259035,1.2300114 z"; +} + +.progress-indicator:indeterminate .segment3 { + -fx-shape:"M 5.7330066,6.5305598 C 6.5579512,6.9103162 5.8366865,8.3790371 5.0144939,7.8850315 L 1.2677551,5.8974832 C 0.409277,5.4420823 1.1277888,4.0876101 1.9862674,4.5430105 z"; +} + +.progress-indicator:indeterminate .segment4 { + -fx-shape:"m 0.42171041,9.2083842 c -0.90671825,-0.051108 -0.95782608,1.5843588 0,1.5332498 l 4.24127319,0 c 0.9717899,0 0.9717899,-1.5332498 0,-1.5332498 z"; +} + +.progress-indicator:indeterminate .segment5 { + -fx-shape:"M 5.7330066,13.443113 C 6.5579512,13.063356 5.8366865,11.594635 5.0144939,12.088641 L 1.2677551,14.076189 C 0.409277,14.53159 1.1277888,15.886062 1.9862674,15.430662 z"; +} + +.progress-indicator:indeterminate .segment6 { + -fx-shape:"M 8.0465401,15.070611 C 8.5441601,14.310924 7.1533584,13.44893 6.7187068,14.303985 l -2.1206366,3.673051 c -0.485895,0.841595 0.8419383,1.60822 1.3278333,0.766625 z"; +} + +.progress-indicator:indeterminate .segment7 { + -fx-shape:"m 9.2224559,19.539943 c -0.051108,0.906718 1.5843581,0.957826 1.5332501,0 l 0,-4.241273 c 0,-0.97179 -1.5332501,-0.97179 -1.5332501,0 z"; +} + +.progress-indicator:indeterminate .segment8 { + -fx-shape:"m 12.10997,15.070611 c -0.49762,-0.759687 0.893182,-1.621681 1.327834,-0.766626 l 2.120636,3.673051 c 0.485895,0.841595 -0.841938,1.60822 -1.327833,0.766625 z"; +} + +.progress-indicator:indeterminate .segment9 { + -fx-shape:"m 14.423504,13.443113 c -0.824945,-0.379757 -0.10368,-1.848478 0.718512,-1.354472 l 3.746739,1.987548 c 0.858478,0.455401 0.139967,1.809873 -0.718512,1.354473 z"; +} + +.progress-indicator:indeterminate .segment10 { + -fx-shape:"m 15.372451,9.2445322 c -0.906719,-0.051108 -0.957826,1.5843588 0,1.5332498 l 4.241273,0 c 0.97179,0 0.97179,-1.5332498 0,-1.5332498 z"; +} + +.progress-indicator:indeterminate .segment11 { + -fx-shape:"m 14.321262,6.5816808 c -0.824944,0.3797564 -0.10368,1.8484772 0.718513,1.3544717 L 18.786514,5.9486042 C 19.644992,5.4932031 18.92648,4.1387308 18.068001,4.5941315 z"; +} diff --git a/main/ui/src/main/resources/css/theme.css b/main/ui/src/main/resources/css/light_theme.css similarity index 89% rename from main/ui/src/main/resources/css/theme.css rename to main/ui/src/main/resources/css/light_theme.css index e6b9f9eea..d8ca120c6 100644 --- a/main/ui/src/main/resources/css/theme.css +++ b/main/ui/src/main/resources/css/light_theme.css @@ -7,19 +7,31 @@ .root { PRIMARY: #79B01A; PRIMARY_BG: #70A11B; - GRAY_LIGHT_BG: #F7F7F7; + MAIN_BG: #F7F7F7; TEXT_FILL: #222; TEXT_FILL_LIGHT: #7E7E7E; CONTROL_BORDER_NORMAL: #CFCFCF; CONTROL_BORDER_FOCUSED: #9E9E9E; + CONTROL_BG_NORMAL: #FFF; CONTROL_BG_ARMED: #E1E1E1; + CONTROL_WHITE_BG_ARMED: #E1E1E1; SCROLL_BAR_THUMB_NORMAL: #CFCFCF; SCROLL_BAR_THUMB_HOVER: #B1B1B1; - -fx-background-color: GRAY_LIGHT_BG; + -fx-background-color: MAIN_BG; -fx-text-fill: TEXT_FILL; } +/******************************************************************************* + * * + * Labels * + * * + ******************************************************************************/ + +.label { + -fx-text-fill: TEXT_FILL; +} + /******************************************************************************* * * * Main Window * @@ -47,7 +59,7 @@ } .main-window .title .button:armed .fa-icon { - -fx-fill: CONTROL_BG_ARMED; + -fx-fill: CONTROL_WHITE_BG_ARMED; } .main-window .resizer { @@ -75,7 +87,7 @@ } .split-pane:horizontal > .split-pane-divider { - -fx-background-color: GRAY_LIGHT_BG, CONTROL_BORDER_NORMAL; + -fx-background-color: MAIN_BG, CONTROL_BORDER_NORMAL; -fx-background-insets: 0, 0 1 0 0; } @@ -86,7 +98,7 @@ ******************************************************************************/ .list-view { - -fx-background-color: white; + -fx-background-color: CONTROL_BG_NORMAL; } .list-cell:selected { @@ -97,17 +109,13 @@ -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 { - -fx-stroke: black; + -fx-stroke: TEXT_FILL; -fx-fill: transparent; } @@ -130,6 +138,10 @@ -fx-background-color: CONTROL_BORDER_NORMAL, CONTROL_BG_ARMED; } +.toolbar-container .button .fa-icon { + -fx-fill: TEXT_FILL; +} + /******************************************************************************* * * * ScrollBar * @@ -165,7 +177,7 @@ .tooltip { -fx-text-fill: TEXT_FILL; -fx-font-size: 0.8em; - -fx-background-color: white; + -fx-background-color: CONTROL_BG_NORMAL; -fx-padding: 0.2em 0.4em 0.2em 0.4em; -fx-effect: dropshadow(three-pass-box, rgba(0,0,0,0.5), 2, 0, 0, 0); } @@ -180,14 +192,14 @@ -fx-cursor: text; -fx-text-fill: TEXT_FILL; -fx-prompt-text-fill: TEXT_FILL_LIGHT; - -fx-background-color: CONTROL_BORDER_NORMAL, white; + -fx-background-color: CONTROL_BORDER_NORMAL, CONTROL_BG_NORMAL; -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; + -fx-background-color: CONTROL_BORDER_FOCUSED, CONTROL_BG_NORMAL; } /******************************************************************************* @@ -200,14 +212,14 @@ -fx-pref-height: 25px; -fx-text-fill: TEXT_FILL; -fx-alignment: CENTER; - -fx-background-color: CONTROL_BORDER_NORMAL, white; + -fx-background-color: CONTROL_BORDER_NORMAL, CONTROL_BG_NORMAL; -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; + -fx-background-color: CONTROL_BORDER_FOCUSED, CONTROL_BG_NORMAL; } .button:armed { @@ -226,14 +238,14 @@ } .check-box > .box { - -fx-background-color: CONTROL_BORDER_NORMAL, white; + -fx-background-color: CONTROL_BORDER_NORMAL, CONTROL_BG_NORMAL; -fx-background-insets: 0, 1px; -fx-background-radius: 4px; -fx-padding: 0.3em; } .check-box:focused > .box { - -fx-background-color: CONTROL_BORDER_FOCUSED, white; + -fx-background-color: CONTROL_BORDER_FOCUSED, CONTROL_BG_NORMAL; } .check-box > .box > .mark { @@ -254,14 +266,14 @@ .choice-box { -fx-text-fill: TEXT_FILL; - -fx-background-color: CONTROL_BORDER_NORMAL, white; + -fx-background-color: CONTROL_BORDER_NORMAL, CONTROL_BG_NORMAL; -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: CONTROL_BORDER_FOCUSED, white; + -fx-background-color: CONTROL_BORDER_FOCUSED, CONTROL_BG_NORMAL; } .choice-box > .open-button { @@ -276,7 +288,7 @@ } .choice-box .context-menu { - -fx-background-color: CONTROL_BORDER_NORMAL, white; + -fx-background-color: CONTROL_BORDER_NORMAL, CONTROL_BG_NORMAL; -fx-background-insets: 0, 1px; -fx-background-radius: 4px; -fx-padding: 0.2em 0 0.2em 0; @@ -312,7 +324,7 @@ .progress-indicator:indeterminate .segment { -fx-background-color: rgb(95.0, 95.0, 98.0), rgb(122.0, 122.0, 125.0); - -fx-background-insets:0.0, 0.5; + -fx-background-insets: 0, 0.5; } .progress-indicator:indeterminate .segment0 { diff --git a/main/ui/src/main/resources/fxml/vault_list.fxml b/main/ui/src/main/resources/fxml/vault_list.fxml index c2082a39c..842792560 100644 --- a/main/ui/src/main/resources/fxml/vault_list.fxml +++ b/main/ui/src/main/resources/fxml/vault_list.fxml @@ -26,7 +26,7 @@