From 4f69363b5fc527a244d121b5590053137705611d Mon Sep 17 00:00:00 2001 From: weijian Date: Tue, 15 Oct 2024 23:33:33 +0800 Subject: [PATCH] Change UI colours and shape for resultDisplay and commandBox --- src/main/resources/view/DarkTheme.css | 101 +++++++++--------------- src/main/resources/view/HelpWindow.css | 13 +-- src/main/resources/view/MainWindow.fxml | 2 +- 3 files changed, 46 insertions(+), 70 deletions(-) diff --git a/src/main/resources/view/DarkTheme.css b/src/main/resources/view/DarkTheme.css index abb11d1ef67..c1ec30753b8 100644 --- a/src/main/resources/view/DarkTheme.css +++ b/src/main/resources/view/DarkTheme.css @@ -99,16 +99,17 @@ -fx-graphic-text-gap : 5; -fx-padding: 5 2 5 2; -fx-background-color: #fdf5f5; + -fx-background-radius: 5; } .list-cell:filled:even { -fx-border-color: derive(#757575, 90%); - -fx-background-color: #fdf5f5; + -fx-background-color: white; } .list-cell:filled:odd { -fx-border-color: derive(#757575, 90%); - -fx-background-color: #fdf5f5; + -fx-background-color: white; } .list-cell:filled:selected { @@ -138,20 +139,18 @@ } .stack-pane { - -fx-background-color: #FFE7E7; - -fx-padding: 10px; + -fx-background-color: #fdf5f5; + /*-fx-padding: 10px;*/ } .pane-with-border { - /*-fx-background-color: derive(#1d1d1d, 20%); - -fx-border-color: derive(#1d1d1d, 10%);*/ -fx-background-color: #FDF5F5; -fx-border-color: #FDF5F5; -fx-border-top-width: 1px; } .status-bar { - -fx-background-color: derive(#1d1d1d, 30%); + -fx-background-color: #F3EDF7; } .result-display { @@ -167,7 +166,7 @@ .status-bar .label { -fx-font-family: "Segoe UI Light"; - -fx-text-fill: white; + -fx-text-fill: #5B4A82; -fx-padding: 4px; -fx-pref-height: 30px; } @@ -193,76 +192,46 @@ } .context-menu { - -fx-background-color: derive(#1d1d1d, 50%); + -fx-background-color: #F3EDF7; } .context-menu .label { - -fx-text-fill: white; -} - -.menu-bar { - /*-fx-background-color: derive(#1d1d1d, 20%);*/ - -fx-background-color: #FDF7FE; + -fx-text-fill: black; } -.menu-bar .label { - -fx-font-size: 14pt; - -fx-font-family: "Segoe UI Light"; - -fx-text-fill: #5B4A82; - -fx-opacity: 0.9; +.menu { + -fx-background-color: transparent; } -.menu .left-container { - -fx-background-color: black; +.menu:hover { + -fx-background-color: #D0BDF2; } -/* - * Metro style Push Button - * Author: Pedro Duque Vieira - * http://pixelduke.wordpress.com/2012/10/23/jmetro-windows-8-controls-on-java/ - */ -.button { - -fx-padding: 5 22 5 22; - -fx-border-color: #e2e2e2; - -fx-border-width: 2; - -fx-background-radius: 0; - -fx-background-color: #1d1d1d; - -fx-font-family: "Segoe UI", Helvetica, Arial, sans-serif; - -fx-font-size: 11pt; - -fx-text-fill: #d8d8d8; - -fx-background-insets: 0 0 0 0, 0, 1, 2; +.menu:selected { + -fx-background-color: #D0BDF2; } -.button:hover { - -fx-background-color: #3a3a3a; -} - -.button:pressed, .button:default:hover:pressed { - -fx-background-color: white; - -fx-text-fill: #1d1d1d; +.menu-item { + -fx-background-color: transparent; } -.button:focused { - -fx-border-color: white, white; - -fx-border-width: 1, 1; - -fx-border-style: solid, segments(1, 1); - -fx-border-radius: 0, 0; - -fx-border-insets: 1 1 1 1, 0; +.menu-item:hover { + -fx-background-color: #D0BDF2; } -.button:disabled, .button:default:disabled { - -fx-opacity: 0.4; - -fx-background-color: #1d1d1d; - -fx-text-fill: white; +.menu-item:selected { + -fx-background-color: #D0BDF2; } -.button:default { - -fx-background-color: -fx-focus-color; - -fx-text-fill: #ffffff; +.menu-bar { + -fx-background-color: #F3EDF7; } -.button:default:hover { - -fx-background-color: derive(-fx-focus-color, 30%); +.menu-bar .label { + -fx-font-size: 14pt; + -fx-font-family: "Segoe UI Light"; + -fx-text-fill: #5B4A82; + -fx-opacity: 0.9; } .dialog-pane { @@ -291,7 +260,7 @@ } .scroll-bar { - -fx-background-color: e8def8 + -fx-background-color: #e8def8; } .scroll-bar .thumb { @@ -329,9 +298,11 @@ #inputContainer { -fx-background-color: #F3EDF7; -fx-padding: 5; - -fx-border-radius: 10; - -fx-background-radius: 10; + -fx-border-radius: 0 0 10 10; + -fx-background-radius: 0 0 10 10; + -fx-border-color: derive(#757575, 90%); } + #commandTextField { -fx-background-color: transparent #383838 transparent #383838; -fx-background-insets: 0; @@ -365,8 +336,10 @@ } #resultDisplay .content { - -fx-background-color: transparent, #F2EDF6, transparent, #F2EDF6; - -fx-background-radius: 0; + -fx-background-color: #F2EDF6; + -fx-background-radius: 10 10 0 0; + -fx-border-radius: 10 10 0 0; + -fx-border-color: derive(#757575, 90%); } #tags { diff --git a/src/main/resources/view/HelpWindow.css b/src/main/resources/view/HelpWindow.css index 17e8a8722cd..e50dde97254 100644 --- a/src/main/resources/view/HelpWindow.css +++ b/src/main/resources/view/HelpWindow.css @@ -1,19 +1,22 @@ #copyButton, #helpMessage { - -fx-text-fill: white; + -fx-text-fill: black; } #copyButton { - -fx-background-color: dimgray; + -fx-background-color: #E8DEF8; + -fx-border-color: derive(#757575, 90%); + -fx-background-radius: 10; + -fx-border-radius: 10; } #copyButton:hover { - -fx-background-color: gray; + -fx-background-color: #D0BDF2; } #copyButton:armed { - -fx-background-color: darkgray; + -fx-background-color: #B09BE1; } #helpMessageContainer { - -fx-background-color: derive(#1d1d1d, 20%); + -fx-background-color: #F3EDF7; } diff --git a/src/main/resources/view/MainWindow.fxml b/src/main/resources/view/MainWindow.fxml index 6c342ab5480..cdcb9d01c31 100644 --- a/src/main/resources/view/MainWindow.fxml +++ b/src/main/resources/view/MainWindow.fxml @@ -12,7 +12,7 @@ + title="Tuteez" minWidth="450" minHeight="600" onCloseRequest="#handleExit">