Skip to content

Commit df85341

Browse files
DokyeongyunDokyeongyun
committed
UI/UX: Add custom gray-scrollbar css and apply
1 parent 9d339bf commit df85341

File tree

3 files changed

+71
-35
lines changed

3 files changed

+71
-35
lines changed

‎src/main/resources/css/javaFx.css‎

Lines changed: 63 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@
55

66
.button-raised{
77
-fx-padding: 0.7em 0.57em;
8-
-fx-font-size: 14px;
8+
-fx-font-size: 14.0px;
99
-jfx-button-type: RAISED;
10-
-fx-background-color: rgb(77,102,204);
11-
-fx-pref-width: 200;
10+
-fx-background-color: rgb(77.0,102.0,204.0);
11+
-fx-pref-width: 200.0;
1212
-fx-text-fill: WHITE;
1313
}
1414

@@ -36,19 +36,19 @@
3636
/* TabPane */
3737
.tab-pane > .tab-header-area > .headers-region > .tab:top {
3838
-fx-border-color: #a3a7a8;
39-
-fx-border-radius: 5 5 0 0;
39+
-fx-border-radius: 5.0 5.0 0.0 0.0;
4040
-fx-background-color: transparent;
41-
-fx-pref-height: 40px;
42-
-fx-background-insets: 0;
41+
-fx-pref-height: 40.0px;
42+
-fx-background-insets: 0.0;
4343
}
4444

4545
.tab-pane > .tab-header-area > .headers-region > .tab:selected:top {
4646
-fx-border-color: #2381E9 #a3a7a8 #a3a7a8 #a3a7a8;
47-
-fx-border-width: 5 1 1 1;
48-
-fx-border-radius: 5 5 0 0;
47+
-fx-border-width: 5.0 1.0 1.0 1.0;
48+
-fx-border-radius: 5.0 5.0 0.0 0.0;
4949
-fx-background-color: white;
50-
-fx-pref-height: 40px;
51-
-fx-background-insets: 0;
50+
-fx-pref-height: 40.0px;
51+
-fx-background-insets: 0.0;
5252
}
5353

5454
.tab-pane > .tab-header-area > .headers-region > .tab:selected > .tab-container > .tab-label {
@@ -67,16 +67,16 @@
6767
.tab-pane > .tab-header-area > .tab-header-background {
6868
-fx-background-color: white;
6969
-fx-border-color: #a3a7a8;
70-
-fx-border-width: 0 0 1 0;
71-
-fx-background-insets: 0;
72-
-fx-pref-height: 45px;
70+
-fx-border-width: 0.0 0.0 1.0 0.0;
71+
-fx-background-insets: 0.0;
72+
-fx-pref-height: 45.0px;
7373
}
7474

7575
/* TextField */
7676
.text-field {
7777
-fx-background-color: -fx-text-box-border, white ;
78-
-fx-background-insets: 0, 0.5 0.5 0.5 0.5 ;
79-
-fx-background-radius: 0 ;
78+
-fx-background-insets: 0.0, 0.5 0.5 0.5 0.5 ;
79+
-fx-background-radius: 0.0 ;
8080
-fx-font-family: "Noto Sans Korean Regular";
8181
}
8282
.text-field:focused {
@@ -86,17 +86,17 @@
8686
/* Label */
8787
.gridTitleLabel {
8888
-fx-font-family: "Noto Sans Korean Regular";
89-
-fx-font-size: 11px;
90-
-fx-line-spacing: 0;
89+
-fx-font-size: 11.0px;
90+
-fx-line-spacing: 0.0;
9191
}
9292

9393
/* JFXComboBox */
9494
.jfx-combo-box {
9595
-fx-background-color: -fx-text-box-border, white ;
96-
-fx-background-insets: 0, 0.5 0.5 0.5 0.5 ;
97-
-fx-background-radius: 0 ;
96+
-fx-background-insets: 0.0, 0.5 0.5 0.5 0.5 ;
97+
-fx-background-radius: 0.0 ;
9898
-fx-font-family: "Noto Sans Korean Regular";
99-
-fx-font-size: 10px;
99+
-fx-font-size: 10.0px;
100100
}
101101

102102
.jfx-combo-box:focused {
@@ -111,9 +111,9 @@
111111

112112
.table-view .column-header-background {
113113
-fx-background-color: linear-gradient(to bottom, #1dbbdd44, #93f9b944);
114-
-fx-background-radius: 7px 7px 0px 0px;
115-
-fx-background-insets: 0 11px 0 0;
116-
-fx-padding: 0 0 5px 0;
114+
-fx-background-radius: 7.0px 7.0px 0.0px 0.0px;
115+
-fx-background-insets: 0.0 11.0px 0.0 0.0;
116+
-fx-padding: 0.0 0.0 5.0px 0.0;
117117
}
118118

119119
.table-view .column-header {
@@ -122,7 +122,7 @@
122122

123123
.table-view .table-cell{
124124
-fx-border-color: transparent;
125-
-fx-padding: 2 0 2 10px;
125+
-fx-padding: 2.0 0.0 2.0 10.0px;
126126
}
127127

128128
.table-row-cell: hover {
@@ -132,13 +132,13 @@
132132

133133
.table-row-cell: odd{
134134
-fx-background-color: #93f9b911;
135-
-fx-background-insets: 0, 0 0 1 0;
135+
-fx-background-insets: 0.0, 0.0 0.0 1.0 0.0;
136136
-fx-padding: 0.0em;
137137
}
138138

139139
.table-row-cell: even{
140140
-fx-background-color: #1dbbdd11;
141-
-fx-background-insets: 0, 0 0 1 0;
141+
-fx-background-insets: 0.0, 0.0 0.0 1.0 0.0;
142142
-fx-padding: 0.0em;
143143
}
144144

@@ -150,7 +150,7 @@
150150

151151
.table-view .show-hide-columns-button {
152152
-fx-background-color: linear-gradient(to bottom, #1dbbdd44, #93f9b944);
153-
-fx-background-insets: 2 0 0 2.5;
153+
-fx-background-insets: 2.0 0.0 0.0 2.5;
154154
}
155155

156156
.table-view .virtual-flow .scroll-bar:vertical,
@@ -164,8 +164,8 @@
164164

165165
.table-view .virtual-flow .scroll-bar .increment-button,
166166
.table-view .virtual-flow .scroll-bar .decrement-button {
167-
-fx-opacity: 0;
168-
-fx-padding: 2;
167+
-fx-opacity: 0.0;
168+
-fx-padding: 2.0;
169169
}
170170

171171
.table-view .virtual-flow .scroll-bar:vertical .thumb {
@@ -187,7 +187,7 @@
187187
/* Datepicker */
188188
.date-picker .arrow-button {
189189
-fx-background-color: -fx-primary-color;
190-
-fx-background-radius: 0;
190+
-fx-background-radius: 0.0;
191191
}
192192
.date-picker .arrow-button:hover {
193193
-fx-background-color: -fx-secondary-color;
@@ -235,4 +235,36 @@
235235

236236
.scroll-pane {
237237
-fx-background-color: transparent;
238-
}
238+
}
239+
240+
.gray-scrollbar .scroll-bar {
241+
-fx-background-color: white;
242+
}
243+
244+
.gray-scrollbar .scroll-bar:horizontal .track,
245+
.gray-scrollbar .scroll-bar:vertical .track{
246+
-fx-background-color: transparent;
247+
-fx-border-color: transparent;
248+
}
249+
250+
.gray-scrollbar .scroll-bar:horizontal .increment-button ,
251+
.gray-scrollbar .scroll-bar:horizontal .decrement-button {
252+
-fx-background-color: transparent;
253+
-fx-padding: 0.0 0.0 10.0 0.0;
254+
}
255+
256+
.gray-scrollbar .scroll-bar:vertical .increment-button ,
257+
.gray-scrollbar .scroll-bar:vertical .decrement-button {
258+
-fx-background-color: transparent;
259+
-fx-padding: 0.0 10.0 0.0 0.0;
260+
}
261+
262+
.gray-scrollbar .scroll-bar .increment-arrow,
263+
.gray-scrollbar .scroll-bar .decrement-arrow{
264+
-fx-padding: 2.0 0.0 2.0 0.0;
265+
}
266+
267+
.gray-scrollbar .scroll-bar:horizontal .thumb,
268+
.gray-scrollbar .scroll-bar:vertical .thumb {
269+
-fx-background-color: derive(gray,40.0%);
270+
}

‎src/main/resources/fxml/AlertLogListViewCell.fxml‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,7 @@
88
<?import javafx.scene.layout.AnchorPane?>
99
<?import javafx.scene.layout.HBox?>
1010

11-
12-
<AnchorPane fx:id="rootAP" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/17">
11+
<AnchorPane fx:id="rootAP" stylesheets="@../css/javaFx.css" xmlns="http://javafx.com/javafx/17" xmlns:fx="http://javafx.com/fxml/1">
1312
<children>
1413
<HBox maxHeight="15.0" minHeight="15.0" prefHeight="15.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
1514
<children>
@@ -25,6 +24,11 @@
2524
</children>
2625
</HBox>
2726
<Separator AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="16.0" />
28-
<JFXTextArea fx:id="logContentTA" prefRowCount="1" styleClass="basic-font" stylesheets="@../css/javaFx.css" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="17.0" />
27+
<JFXTextArea fx:id="logContentTA" labelFloat="true" prefColumnCount="1" prefRowCount="1" stylesheets="@../css/javaFx.css" wrapText="true" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="17.0">
28+
<styleClass>
29+
<String fx:value="basic-font" />
30+
<String fx:value="gray-scrollbar" />
31+
</styleClass>
32+
</JFXTextArea>
2933
</children>
3034
</AnchorPane>

‎src/main/resources/fxml/AlertLogMonitoringMenu.fxml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@
107107
</AnchorPane>
108108
<SplitPane dividerPositions="0.8" layoutX="1.0" layoutY="41.0" style="-fx-effect: dropshadow(three-pass-box, rgba(0,0,0,0.5), 10, 0, 0, 0);" AnchorPane.bottomAnchor="125.0" AnchorPane.leftAnchor="5.0" AnchorPane.rightAnchor="5.0" AnchorPane.topAnchor="50.0">
109109
<items>
110-
<JFXListView fx:id="alertLogLV" style="-fx-background-color: white;" />
110+
<JFXListView fx:id="alertLogLV" style="-fx-background-color: white;" styleClass="gray-scrollbar" stylesheets="@../css/javaFx.css" />
111111
<TabPane minWidth="150.0" tabMaxWidth="60.0">
112112
<tabs>
113113
<Tab closable="false" text="Overview">

0 commit comments

Comments
 (0)