UI updated

README.md

@@ -62,6 +62,6 @@ Want to support development? Make a donation* (see below):
     * [ ] Tray icon settings
     * [ ] Autoload
 * [ ] Headless mode (CLI)
-* [ ] Fix UI
+* [x] Fix UI
     * [ ] Add opened file name to info pane
 * [ ] Dark theme 

src/main/resources/KeysLedsPane.fxml

@@ -339,12 +339,12 @@
                               <Button fx:id="k_num_plus" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false" onAction="#anyKeyAction" prefHeight="93.0" prefWidth="50.0" styleClass="button_keycap" text="+" GridPane.columnIndex="3" GridPane.rowIndex="2" GridPane.rowSpan="2" />
                               <Button fx:id="k_num_enter" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false" onAction="#anyKeyAction" prefHeight="93.0" prefWidth="50.0" styleClass="button_keycap" text="↵" GridPane.columnIndex="3" GridPane.rowIndex="4" GridPane.rowSpan="2" />
                               <Button fx:id="k_num_period" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false" onAction="#anyKeyAction" prefHeight="45.0" prefWidth="50.0" styleClass="button_keycap" text="," GridPane.columnIndex="2" GridPane.rowIndex="5" />
-                        <Button fx:id="l_caps" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false" onAction="#anyKeyAction" prefHeight="26.0" prefWidth="50.0" text="LED C">
+                        <Button fx:id="l_caps" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false" onAction="#anyKeyAction" prefHeight="26.0" prefWidth="50.0" styleClass="button_keycap" text="LED C">
                            <font>
                               <Font size="10.0" />
                            </font>
                         </Button>
-                        <Button fx:id="l_game" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false" onAction="#anyKeyAction" prefHeight="26.0" prefWidth="50.0" text="LED G" GridPane.columnIndex="1">
+                        <Button fx:id="l_game" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false" onAction="#anyKeyAction" prefHeight="26.0" prefWidth="50.0" styleClass="button_keycap" text="LED G" GridPane.columnIndex="1">
                            <font>
                               <Font size="10.0" />
                            </font>

src/main/resources/light.css

@@ -5,7 +5,7 @@
 .button SVGPath{
     -fx-fill: #141414;
 }
-.button, .toggle-button {
+.button, .toggle-button, .menu-button {
     -fx-background-color: #fefefe;
     -fx-background-insets: 0 0 0 0, 0, 1, 2;
     -fx-background-radius: 2;
@@ -15,7 +15,7 @@
     -fx-text-fill: #2c2c2c;
     //-fx-effect: dropshadow(three-pass-box, #dadada, 2, 0, 0, 0);
 }
-.button:hover, .choice-box:hover, .button:focused:hover, .choice-box:focused:hover, .toggle-button:hover, .toggle-button:focused:hover{
+.menu-button:hover, .button:hover, .choice-box:hover, .menu-button:focused:hover, .button:focused:hover, .choice-box:focused:hover, .toggle-button:hover, .toggle-button:focused:hover{
     -fx-background-color: #fefefe;
     -fx-background-insets: 0 0 0 0, 0, 1, 2;
     -fx-background-radius: 2;
@@ -25,7 +25,7 @@
     -fx-text-fill: #2c2c2c;
     //-fx-effect: dropshadow(three-pass-box, #009bca, 2, 0, 0, 0);
 }
-.button:focused, .choice-box:focused, .toggle-button:focused{
+.menu-button:focused, .button:focused, .choice-box:focused, .toggle-button:focused{
     -fx-background-color: #dadada;
     -fx-background-insets: 0 0 0 0, 0, 1, 2;
     -fx-background-radius: 2;
@@ -36,7 +36,7 @@
     //-fx-effect: dropshadow(three-pass-box, #dadada, 2, 0, 0, 0);
 }
 
-.button:pressed, .button:pressed:hover, .toggle-button:pressed, .toggle-button:pressed:hover{
+.menu-button:pressed, .button:pressed, .menu-button:pressed:hover, .button:pressed:hover, .toggle-button:pressed, .toggle-button:pressed:hover{
     -fx-background-color: #fefefe;
     -fx-background-insets: 0 0 0 0, 0, 1, 2;
     -fx-background-radius: 2;
@@ -225,7 +225,7 @@
     -fx-faint-focus-color: transparent;
     -fx-border-radius: 0 0 0 0;
     -fx-border-width: 3 0 0 0;
-    -fx-border-color: #289de8;
+    -fx-border-color: #40b9bb; /* #289de8; */
 }
 
 .tab-pane > .tab-header-area {
@@ -271,9 +271,11 @@
     -fx-border-color: #b5b5b5;
     -fx-border-width: 1 0 0 0;
 }
-
+/* -========================== header pane =====================-  */
 .header {
-       -fx-background-image: url("pttrn.png");
+   -fx-background-image: url("pttrn.png");
-       -fx-background-position: center;
+   -fx-background-position: center;
-       -fx-background-repeat: repeat;
+   -fx-background-repeat: repeat;
+   -fx-border-color: #b5b5b5;
+   -fx-border-width: 0 0 1 0;
 }