Skip to content

Commit

Permalink
Change DAVE UI
Browse files Browse the repository at this point in the history
  • Loading branch information
@yuxunn
yuxunn committed Nov 1, 2023
1 parent 6e59e41 commit e20e136
Show file tree
Hide file tree
Showing 8 changed files with 149 additions and 75 deletions.
Binary file added src/main/resources/images/d.a.v.e.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/main/resources/images/tag.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
106 changes: 72 additions & 34 deletions src/main/resources/view/DarkTheme.css
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
.background {
-fx-background-color: derive(#1d1d1d, 20%);
background-color: #383838; /* Used in the default.html file */
-fx-background-color: derive(#777D68, 30%);
background-color: #B5C1B2; /* Used in the default.html file */
}

.label {
Expand Down Expand Up @@ -41,8 +41,8 @@

.table-view {
-fx-base: #1d1d1d;
-fx-control-inner-background: #1d1d1d;
-fx-background-color: #1d1d1d;
-fx-control-inner-background: derive(#777D68, 30%);;
-fx-background-color: derive(#777D68, 30%);;
-fx-table-cell-border-color: transparent;
-fx-table-header-border-color: transparent;
-fx-padding: 5;
Expand Down Expand Up @@ -77,101 +77,115 @@
}

.split-pane:horizontal .split-pane-divider {
-fx-background-color: derive(#1d1d1d, 20%);
-fx-border-color: transparent transparent transparent #4d4d4d;
-fx-background-color:derive(#777D68, 30%);
-fx-border-color: transparent transparent transparent #777D68;
}

/*background left side */
.split-pane {
-fx-border-radius: 1;
-fx-border-width: 1;
-fx-background-color: derive(#1d1d1d, 20%);
}
-fx-background-color: derive(#B5C1B2, 30%);

}
/* person list card display (right side of main list)*/
.list-view {
-fx-background-insets: 0;
-fx-padding: 0;
-fx-background-color: derive(#1d1d1d, 20%);
-fx-background-color: derive(#B5C1B2, 30%);
}

.list-cell {
-fx-label-padding: 0 0 0 0;
-fx-graphic-text-gap : 0;
-fx-background-radius: 10;
-fx-border-radius: 15;
-fx-padding: 0 0 0 0;
-fx-border-color: derive(#777D68, 30%);
-fx-border-width: 2;
}

.list-cell:filled:even {
-fx-background-color: #3c3e3f;
-fx-background-color: #ECEBC9;
}

.list-cell:filled:odd {
-fx-background-color: #515658;
-fx-background-color:#E7F1DC;
}

.list-cell:filled:selected {
-fx-background-color: #424d5f;
-fx-background-color: #777D68;
}

.list-cell:filled:selected #cardPane {
-fx-border-color: #3e7b91;
-fx-border-color: #3c3e3f;
-fx-border-radius: 15;
-fx-border-width: 1;
}

/* person card font color */
.list-cell .label {
-fx-text-fill: white;
-fx-text-fill: BLACK;
}

.cell_big_label {
-fx-font-family: "Segoe UI Semibold";
-fx-font-size: 16px;
-fx-font-size: 18px;
-fx-text-fill: #010504;
}

.cell_small_label {
-fx-font-family: "Segoe UI";
-fx-font-size: 13px;
-fx-font-size: 15px;
-fx-text-fill: #010504;
}

/* command input box */
.stack-pane {
-fx-background-color: derive(#1d1d1d, 20%);
-fx-background-color: derive(#777D68, 30%);
}

/* this changes the border color of the main left boxes */
.pane-with-border {
-fx-background-color: derive(#1d1d1d, 20%);
-fx-background-color: derive(#B5C1B2, 30%);
-fx-border-color: derive(#1d1d1d, 10%);
-fx-border-top-width: 1px;
}

/* bottom bar */
.status-bar {
-fx-background-color: derive(#1d1d1d, 30%);
-fx-background-color: derive(#777D68, 30%);
}

.result-display {
-fx-background-color: transparent;
-fx-background-color: derive(#777D68, 30%);
-fx-font-family: "Segoe UI Light";
-fx-font-size: 13pt;
-fx-text-fill: white;

}

.result-display .label {
-fx-background-color: derive(#777D68, 30%);
-fx-text-fill: black !important;
}

/* the bottom ./data/addressbook.json part */
.status-bar .label {
-fx-font-family: "Segoe UI Light";
-fx-text-fill: white;
-fx-text-fill: black;
-fx-padding: 4px;
-fx-pref-height: 30px;
}

.status-bar-with-border {
-fx-background-color: derive(#1d1d1d, 30%);
-fx-border-color: derive(#1d1d1d, 25%);
-fx-background-color: derive(#777D68, 30%);
-fx-border-color: derive(#777D68, 30%);
-fx-border-width: 1px;
}

.status-bar-with-border .label {
-fx-text-fill: white;
-fx-background-color: derive(#777D68, 30%);
}

.grid-pane {
Expand All @@ -191,27 +205,37 @@
.context-menu .label {
-fx-text-fill: white;
}

/* help exit bar */
.menu-bar {
-fx-background-color: derive(#1d1d1d, 20%);
-fx-background-color: derive(#777D68, 30%);
}

/* words for help exit*/
.menu-bar .label {
-fx-pref-height: 50;
-fx-pref-width: 100;
-fx-font-size: 14pt;
-fx-font-family: "Segoe UI Light";
-fx-text-fill: white;
-fx-text-fill: black;
-fx-opacity: 0.9;
}

.menu .left-container {
-fx-background-color: black;
}


/*
* Metro style Push Button
* Author: Pedro Duque Vieira
* http://pixelduke.wordpress.com/2012/10/23/jmetro-windows-8-controls-on-java/
*/

/* Change the pressed color for the menu item */
.menu-item:pressed {
-fx-background-color: white;
-fx-text-fill: #1d1d1d;
}

.button {
-fx-padding: 5 22 5 22;
-fx-border-color: #e2e2e2;
Expand All @@ -226,11 +250,15 @@

.button:hover {
-fx-background-color: #3a3a3a;
-fx-pref-height: 50;

}

.button:pressed, .button:default:hover:pressed {
-fx-background-color: white;
-fx-text-fill: #1d1d1d;
-fx-pref-height: 50;

}

.button:focused {
Expand All @@ -239,21 +267,29 @@
-fx-border-style: solid, segments(1, 1);
-fx-border-radius: 0, 0;
-fx-border-insets: 1 1 1 1, 0;
-fx-pref-height: 50;

}

.button:disabled, .button:default:disabled {
-fx-opacity: 0.4;
-fx-background-color: #1d1d1d;
-fx-text-fill: white;
-fx-pref-height: 50;

}

.button:default {
-fx-background-color: -fx-focus-color;
-fx-text-fill: #ffffff;
-fx-pref-height: 50;

}

.button:default:hover {
-fx-background-color: derive(-fx-focus-color, 30%);
-fx-pref-height: 50;

}

.dialog-pane {
Expand Down Expand Up @@ -282,11 +318,11 @@
}

.scroll-bar {
-fx-background-color: derive(#1d1d1d, 20%);
-fx-background-color: derive(#777D68, 20%);
}

.scroll-bar .thumb {
-fx-background-color: derive(#1d1d1d, 50%);
-fx-background-color: derive(#777D68, 50%);
-fx-background-insets: 3;
}

Expand Down Expand Up @@ -318,22 +354,23 @@
}

#commandTextField {
-fx-background-color: transparent #383838 transparent #383838;
-fx-background-color: transparent derive(#777D68, 30%) transparent derive(#777D68, 30%);
-fx-background-insets: 0;
-fx-border-color: #383838 #383838 #ffffff #383838;
-fx-border-color: #383838 #383838 #383838 #383838;
-fx-border-insets: 0;
-fx-border-width: 1;
-fx-font-family: "Segoe UI Light";
-fx-font-size: 13pt;
-fx-text-fill: white;
-fx-text-fill: black;
}

#filterField, #personListPanel, #personWebpage {
-fx-effect: innershadow(gaussian, black, 10, 0, 0, 0);
}

/* main result left box */
#resultDisplay .content {
-fx-background-color: transparent, #383838, transparent, #383838;
-fx-background-color: transparent, derive(#777D68, 30%), transparent, derive(#777D68, 30%);
-fx-background-radius: 0;
}

Expand All @@ -358,3 +395,4 @@
#tags .lead-label {
-fx-background-color: #de5900;
}

2 changes: 1 addition & 1 deletion src/main/resources/view/HelpWindow.css
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
#copyButton, #helpMessage {
-fx-text-fill: white;
-fx-text-fill: black;
}

#copyButton {
Expand Down
Loading

0 comments on commit e20e136

Please sign in to comment.