diff --git a/src/main/java/at/ionas999/questioncatalog/App.java b/src/main/java/at/ionas999/questioncatalog/App.java index 6146db3..85480e7 100644 --- a/src/main/java/at/ionas999/questioncatalog/App.java +++ b/src/main/java/at/ionas999/questioncatalog/App.java @@ -13,6 +13,7 @@ public class App extends Application { public void start(Stage stage) throws IOException { FXMLLoader fxmlLoader = new FXMLLoader(App.class.getResource("main.fxml")); Scene scene = new Scene(fxmlLoader.load(), 320, 240); + scene.getStylesheets().add(getClass().getResource("style.css").toExternalForm()); stage.setTitle("Question Catalog"); stage.setScene(scene); stage.show(); diff --git a/src/main/java/at/ionas999/questioncatalog/Utils.java b/src/main/java/at/ionas999/questioncatalog/Utils.java index 8a79a6a..ec695a1 100644 --- a/src/main/java/at/ionas999/questioncatalog/Utils.java +++ b/src/main/java/at/ionas999/questioncatalog/Utils.java @@ -21,7 +21,9 @@ public class Utils { FXMLLoader fxmlLoader = new FXMLLoader(App.class.getResource(fxmlFileName)); Parent root = fxmlLoader.load(); - stage.setScene(new Scene(root)); + Scene scene = new Scene(root); + scene.getStylesheets().add(App.class.getResource("style.css").toExternalForm()); + stage.setScene(scene); stage.show(); } diff --git a/src/main/resources/at/ionas999/questioncatalog/style.css b/src/main/resources/at/ionas999/questioncatalog/style.css new file mode 100644 index 0000000..463e5fa --- /dev/null +++ b/src/main/resources/at/ionas999/questioncatalog/style.css @@ -0,0 +1,114 @@ +/* antdesign.css */ +/* 1. Root Variables */ +.root { + /* Colors */ + -fx-accent: #1890ff; /* Primary */ + -fx-background: #f5f5f5; /* Page background */ + -fx-control-inner-background: #ffffff; /* Surface */ + -fx-text-base-color: #000000d9; /* High-emphasis text */ + -fx-text-secondary-color: #00000073; /* Disabled text */ + + /* Typography */ + -fx-font-family: "Helvetica Neue", Arial, sans-serif; + -fx-font-size: 14px; +} + +/* 2. Buttons */ +.button { + -fx-background-color: -fx-accent; + -fx-text-fill: white; + -fx-background-radius: 2px; + -fx-padding: 8 16; + -fx-effect: dropshadow( gaussian , rgba(0,0,0,0.16), 6, 0, 0, 3 ); + -fx-cursor: hand; + -fx-transition: background-color 0.2s ease; +} +.button:hover { + -fx-background-color: #40a9ff; /* Primary Hover */ +} +.button:pressed { + -fx-background-color: #096dd9; /* Primary Active */ +} +.button:disabled { + -fx-background-color: derive(-fx-accent, 30%); + -fx-text-fill: -fx-text-secondary-color; +} + +/* 3. Labels */ +.label { + -fx-text-fill: -fx-text-base-color; + -fx-font-weight: 600; /* Semibold */ +} +.label.secondary { + -fx-text-fill: -fx-text-secondary-color; + -fx-font-size: 12px; +} + +/* 4. TextInput & TextArea */ +.text-field, .text-area { + -fx-background-color: -fx-control-inner-background; + -fx-border-color: #d9d9d9; + -fx-border-width: 1; + -fx-background-radius: 2px; + -fx-border-radius: 2px; + -fx-padding: 4 8; + -fx-text-fill: -fx-text-base-color; +} +.text-field:focused, .text-area:focused { + -fx-border-color: -fx-accent; + -fx-effect: dropshadow( gaussian , rgba(24,144,255,0.2), 6, 0, 0, 0 ); +} + +/* 5. ListView */ +.list-view { + -fx-background: transparent; + -fx-border-color: #d9d9d9; + -fx-border-radius: 2px; +} +.list-cell { + -fx-padding: 8 12; + -fx-text-fill: -fx-text-base-color; +} +.list-cell:selected { + -fx-background-color: derive(-fx-accent, -20%); + -fx-text-fill: white; +} + +/* 6. ScrollBar Thumb */ +.scroll-bar .thumb { + -fx-background-color: #d9d9d9; + -fx-background-radius: 2px; +} +.scroll-bar:hover .thumb { + -fx-background-color: #bfbfbf; +} + +/* 7. Tooltips */ +.tooltip { + -fx-background-color: #000000d9; + -fx-text-fill: white; + -fx-padding: 4 8; + -fx-background-radius: 2px; + -fx-font-size: 12px; +} + +/* 8. Dialogs & Popovers */ +.dialog-pane { + -fx-background: -fx-control-inner-background; + -fx-border-color: #d9d9d9; + -fx-border-radius: 2px; + -fx-background-radius: 2px; + -fx-effect: dropshadow( gaussian , rgba(0,0,0,0.16), 12, 0, 0, 4 ); +} + +/* 9. Tabs */ +.tab-pane .tab-header-area .tab { + -fx-background-color: transparent; + -fx-padding: 8 16; + -fx-text-fill: -fx-text-base-color; +} +.tab-pane .tab-header-area .tab:selected { + -fx-background-color: -fx-accent; + -fx-text-fill: white; + -fx-background-radius: 2px 2px 0 0; +}