Style ComboBox elements.

Author: sankdev0

src/main/java/com/sankdev/App.java

@@ -40,7 +40,7 @@ public class App extends Application {
   public static final String PRIMARY_VIEW = "primary";
   public static final String EDIT_ITEM_VIEW = "editItem";
   public static final int PRIMARY_WIDTH = 550;
-  public static final int PRIMARY_HEIGHT = 350;
+  public static final int PRIMARY_HEIGHT = 450;
 
   private static final ResourceBundle theGuiResourceBundle = ResourceBundle.getBundle(
       "com.sankdev.multilang.GuiResourceBundle", Locale.getDefault());

src/main/resources/com/sankdev/css/base.css

@@ -4,14 +4,15 @@ Naming notes:
 "-light-color" means the light color theme.*/
 .root {
     base-dark-color: #3c3f41;
+    base-darker-color: #303334;
     border-light-color: #c7c7c7;
     button-dark-color: #494949;
     button-hover-dark-color: #7c7c7c;
     table-row-dark-color: #494949;
     table-row-light-color: #505050;
     table-row-selected-color: #3c3f41;
     scrollbar-dark-color: #7c7c7c;
-    text-filed-background-color: #656565;
+    text-field-background-color: #656565;
     text-fill-light-color: #d3d3d3;
     text-fill-highlighted-color: #ffffff;
     -fx-font-size: 11px;
@@ -64,10 +65,8 @@ Naming notes:
 /* 2. Headers */
 /* The table header column background spanning the whole table width. */
 .table-view .column-header-background{
-    -fx-background-color: base-dark-color;
+    -fx-background-color: base-darker-color;
     -fx-background-radius: 3px 3px 0px 0px;
-    -fx-background-insets: 0 3 0 3;
-    -fx-padding: 3px 0 3px 0;
 }
 
 /* Individual column headers on top of the table header column background. */
@@ -159,7 +158,7 @@ Naming notes:
 }
 
 .text-field {
-    -fx-background-color: text-filed-background-color;
+    -fx-background-color: text-field-background-color;
     -fx-text-fill: text-fill-light-color;
 }
 
@@ -168,4 +167,22 @@ Naming notes:
     -fx-font-weight: bold;
 }
 
+.combo-box .list-cell {
+    -fx-background-color: text-field-background-color;
+    -fx-text-fill: text-fill-light-color;
+}
+
+.combo-box .list-view .list-cell {
+    -fx-background-color: text-field-background-color;
+    -fx-text-fill: text-fill-light-color;
+}
+
+.combo-box-base .arrow-button {
+    -fx-background-color: text-field-background-color;
+}
+
+.combo-box-base .arrow {
+    -fx-background-color: base-darker-color;
+}
+
 

src/main/resources/com/sankdev/editItem.fxml

@@ -15,8 +15,11 @@
             <Label styleClass="form-header" text="%editItemText"/>
             <VBox>
                 <Label text="%itemTypeLabel" />
-                <ComboBox fx:id="itemType">
+                <ComboBox fx:id="itemType" prefWidth="200">
                 </ComboBox>
+                <padding>
+                    <Insets top="20.0" bottom="30.0"/>
+                </padding>
             </VBox>
             <HBox styleClass="h-box">
                 <VBox styleClass="v-box">
@@ -39,7 +42,7 @@
                     <!-- Diploma -->
                     <VBox>
                         <Label text="%itemDegreeLevelLabel" />
-                        <ComboBox fx:id="itemDegreeLevel">
+                        <ComboBox fx:id="itemDegreeLevel" prefWidth="200">
                         </ComboBox>
                     </VBox>
                     <!-- Publication -->

src/main/resources/com/sankdev/primary.fxml

@@ -5,13 +5,13 @@
 <?import javafx.scene.layout.HBox?>
 <?import javafx.scene.control.TableView?>
 <?import javafx.scene.control.TableColumn?>
+<?import javafx.geometry.Insets?>
 <BorderPane fx:id="primaryBorderPane" xmlns="http://javafx.com/javafx/16-ea+2" xmlns:fx="http://javafx.com/fxml/1"
   styleClass="border-pane" fx:controller="com.sankdev.controller.PrimarySceneController"
   stylesheets="@css/base.css"
 >
   <top>
     <HBox styleClass="h-box" xmlns:fx="http://javafx.com/fxml">
-      <children>
         <Button fx:id="addButton" text="%addButton" onAction="#onAdd">
         </Button>
         <Button fx:id="editButton" text="%editButton" onAction="#onEdit">
@@ -22,7 +22,9 @@
         </Button>
         <Button fx:id="loadButton" text="%loadButton" onAction="#readPortfolio">
         </Button>
-      </children>
+      <padding>
+        <Insets bottom="20.0"/>
+      </padding>
     </HBox>
   </top>
   <center>