From 87971103b87dc68e3e3ff8d98f29e20efbe64315 Mon Sep 17 00:00:00 2001 From: Julian Kropff Date: Mon, 11 May 2026 18:38:49 +0200 Subject: [PATCH 1/2] Add: light glass theme for Game UI --- .../ui/gameui/CasinoGameController.java | 4 +- .../gameuicomponents/SettingsController.java | 6 +- .../ui-structure/Casinogameui-light-glass.css | 846 ++++++++++++++++++ .../gameuicomponents/Settings.fxml | 4 + 4 files changed, 858 insertions(+), 2 deletions(-) create mode 100644 src/main/resources/ui-structure/Casinogameui-light-glass.css diff --git a/src/main/java/ch/unibas/dmi/dbis/cs108/casono/client/ui/gameui/CasinoGameController.java b/src/main/java/ch/unibas/dmi/dbis/cs108/casono/client/ui/gameui/CasinoGameController.java index 8dbe6fe..e17a574 100644 --- a/src/main/java/ch/unibas/dmi/dbis/cs108/casono/client/ui/gameui/CasinoGameController.java +++ b/src/main/java/ch/unibas/dmi/dbis/cs108/casono/client/ui/gameui/CasinoGameController.java @@ -2206,6 +2206,7 @@ public class CasinoGameController { switch (theme.toLowerCase()) { case "blackwhite" -> "/ui-structure/Casinogameui-blackwhite.css"; case "glass" -> "/ui-structure/Casinogameui-glass.css"; + case "lightglass" -> "/ui-structure/Casinogameui-light-glass.css"; default -> "/ui-structure/Casinogameui.css"; }; @@ -2224,7 +2225,8 @@ public class CasinoGameController { s -> s.contains("Casinogameui.css") || s.contains("Casinogameui-blackwhite.css") - || s.contains("Casinogameui-glass.css")); + || s.contains("Casinogameui-glass.css") + || s.contains("Casinogameui-light-glass.css")); scene.getStylesheets().add(cssExternalForm); diff --git a/src/main/java/ch/unibas/dmi/dbis/cs108/casono/client/ui/gameui/gameuicomponents/SettingsController.java b/src/main/java/ch/unibas/dmi/dbis/cs108/casono/client/ui/gameui/gameuicomponents/SettingsController.java index bfbc31c..4396ef7 100644 --- a/src/main/java/ch/unibas/dmi/dbis/cs108/casono/client/ui/gameui/gameuicomponents/SettingsController.java +++ b/src/main/java/ch/unibas/dmi/dbis/cs108/casono/client/ui/gameui/gameuicomponents/SettingsController.java @@ -21,6 +21,7 @@ public class SettingsController { @FXML private RadioButton themeStandard; @FXML private RadioButton themeBlackWhite; @FXML private RadioButton themeGlass; + @FXML private RadioButton themeLightGlass; private boolean visible = true; private double xOffset; @@ -40,7 +41,7 @@ public class SettingsController { /** Set up the theme toggle group and listeners for the theme selection radio buttons. */ private void setupThemeToggle() { - if (themeStandard == null || themeBlackWhite == null || themeGlass == null) { + if (themeStandard == null || themeBlackWhite == null || themeGlass == null || themeLightGlass == null) { LOGGER.warn("Theme buttons not injected from FXML"); return; } @@ -50,6 +51,7 @@ public class SettingsController { themeStandard.setToggleGroup(group); themeBlackWhite.setToggleGroup(group); themeGlass.setToggleGroup(group); + themeLightGlass.setToggleGroup(group); themeStandard.setSelected(true); @@ -62,6 +64,8 @@ public class SettingsController { setTheme("blackwhite"); } else if (newVal == themeGlass) { setTheme("glass"); + } else if (newVal == themeLightGlass) { + setTheme("lightglass"); } }); } diff --git a/src/main/resources/ui-structure/Casinogameui-light-glass.css b/src/main/resources/ui-structure/Casinogameui-light-glass.css new file mode 100644 index 0000000..4a32bbf --- /dev/null +++ b/src/main/resources/ui-structure/Casinogameui-light-glass.css @@ -0,0 +1,846 @@ +/*main box css*/ + +.root { + -fx-background-color: #000000; + -fx-font-family: "Monospaced", "Courier New"; +} + +.background { + -fx-background-color: #000000; + -fx-background-image: url("/images/glass-walpaper-casono.png"); + -fx-background-size: cover; + /* Centers the image and prevents it from repeating in a tile-like pattern. */ + -fx-background-position: center center; + -fx-background-repeat: no-repeat; +} + +.info-text { + -fx-text-fill: #ffffff; + -fx-font-size: 16px; +} + +.casino-table { + -fx-background-color: + linear-gradient(to bottom right, + rgba(255, 255, 255, 0.18), + rgba(255, 255, 255, 0.08)); + -fx-background-radius: 210; + -fx-border-radius: 200; + -fx-border-color: rgba(255, 255, 255, 0.25); + -fx-border-width: 12; + /*-fx-min-height: 60vh;*/ + /*-fx-max-height: 60vh;*/ + /*-fx-min-width: 90vh;*/ + /*-fx-max-width: 90vh;*/ + -fx-effect: dropshadow(one-pass-box, rgba(0, 0, 0, 0.30), 12, 0, 0, 4); +} + +.dealer-box { + -fx-background-color: + linear-gradient(to bottom right, + rgba(255, 255, 255, 0.38), + rgba(255, 255, 255, 0.18)); + + -fx-border-color: rgba(255, 255, 255, 0.40); + -fx-border-width: 3; + -fx-background-radius: 28; + -fx-border-radius: 0; + -fx-min-width: 70; + -fx-min-height: 100; + -fx-effect: dropshadow(one-pass-box, rgba(0, 0, 0, 0.35), 10, 0, 0, 3); +} + +.table-title { + -fx-text-fill: #ffffff; + -fx-font-size: 28px; + -fx-font-weight: bold; + /*-fx-effect: dropshadow(one-pass-box, rgba(255, 255, 255), 0, 0, 3, 3);*/ +} + +.taskbar { + -fx-background-color: + linear-gradient(to bottom right, + rgba(255, 255, 255, 0.38), + rgba(255, 255, 255, 0.18)); + + -fx-background-radius: 28; + -fx-border-radius: 28; + -fx-border-color: rgba(255, 255, 255, 0.40); + -fx-border-width: 3; + -fx-padding: 14 30; + -fx-effect: dropshadow(one-pass-box, rgba(0, 0, 0, 0.30), 10, 0, 0, 3); + + -fx-cursor: move; +} + +.taskbar:hover { + -fx-background-color: + linear-gradient(to bottom right, + rgba(255, 255, 255, 0.44), + rgba(255, 255, 255, 0.22)); + + -fx-border-color: + rgba(255, 255, 255, 0.55); +} + +.taskbar.player-active-turn { + /* Active turn should only change the shadow to avoid flicker/transparency jumps. */ + -fx-border-color: rgba(184, 134, 11, 0.40); + -fx-effect: dropshadow(one-pass-box, rgba(184, 134, 11, 0.30), 10, 0, 0, 3); +} + +.black-input-field { + -fx-background-color: + linear-gradient(to bottom right, + rgba(0, 0, 0, 0.38), + rgba(0, 0, 0, 0.18)) !important; + -fx-text-fill: #ffffff !important; + -fx-font-family: "Courier New" !important; + -fx-font-weight: bold !important; + -fx-background-radius: 8 !important; + -fx-border-radius: 8 !important; + -fx-border-color: rgba(255, 255, 255, 0.40) !important; + -fx-border-width: 2 !important; + -fx-padding: 5 12 !important; +} + +.black-input-field:hover { + -fx-background-color: + linear-gradient(to bottom right, + rgba(0, 0, 0, 0.44), + rgba(0, 0, 0, 0.22)) !important; +} + +.black-input-field:focused { + -fx-border-color: rgba(255, 255, 255, 0.55) !important; + /*-fx-background-color: #000000;*/ +} + +.gray-input-field { + -fx-background-color: + linear-gradient(to bottom right, + rgba(0, 0, 0, 0.38), + rgba(0, 0, 0, 0.18)) !important; + -fx-text-fill: #ffffff !important; + -fx-font-family: "Courier New" !important; + -fx-font-weight: bold !important; + -fx-background-radius: 8 !important; + -fx-border-radius: 8 !important; + -fx-border-color: rgba(255, 255, 255, 0.40) !important; + /*-fx-color-color: #000000;*/ + -fx-border-width: 2 !important; + -fx-padding: 5 12 !important; +} + +.gray-input-field:hover { + -fx-effect: dropshadow(one-pass-box, rgba(255, 255, 255, 0.25), 10, 0, 0, 3) !important; +} + +.gray-input-field:focused { + -fx-border-color: rgba(255, 255, 255, 0.55) !important; + /*-fx-background-color: #333333;*/ +} + +.yellow-input-field { + -fx-background-color: + linear-gradient(to bottom right, + rgba(184, 134, 11, 0.38), + rgba(184, 134, 11, 0.18)) !important; + -fx-text-fill: #ffffff !important; + -fx-prompt-text-fill: #ffffff !important; + -fx-font-family: "Courier New" !important; + -fx-font-weight: bold !important; + -fx-background-radius: 8 !important; + -fx-border-radius: 8 !important; + -fx-border-color: rgba(255, 215, 0, 0.40) !important; + -fx-border-width: 2 !important; + -fx-padding: 5 12 !important; +} + +.yellow-input-field:hover { + -fx-effect: dropshadow(one-pass-box, rgba(255, 255, 255, 0.25), 10, 0, 0, 3) !important; +} + +/*.yellow-input-field:focused {*/ +/* -fx-border-color: #ffd700;*/ +/* -fx-background-color: #b8860b;*/ +/*}*/ + +.red-input-field { + -fx-background-color: + linear-gradient(to bottom right, + rgba(139, 0, 0, 0.38), + rgba(139, 0, 0, 0.18)) !important; + -fx-text-fill: #ffffff !important; + -fx-prompt-text-fill: #ffffff !important; + -fx-font-family: "Courier New" !important; + -fx-font-weight: bold !important; + -fx-background-radius: 8 !important; + -fx-border-radius: 8 !important; + -fx-border-color: rgba(255, 68, 68, 0.40) !important; + -fx-border-width: 2 !important; + -fx-padding: 5 12 !important; +} + +.red-input-field:hover { + -fx-effect: dropshadow(one-pass-box, rgba(255, 255, 255, 0.25), 10, 0, 0, 3) !important; +} + +/*.red-input-field:focused {*/ +/* -fx-border-color: #ff4444;*/ +/* -fx-background-color: #8b0000;*/ +/*}*/ + +.yellow-button { + -fx-background-color: + linear-gradient(to bottom right, + rgba(184, 134, 11, 0.38), + rgba(184, 134, 11, 0.18)) !important; + -fx-border-color: rgba(255, 215, 0, 0.40) !important; + -fx-text-fill: #ffffff !important; +} + +.red-button { + -fx-background-color: + linear-gradient(to bottom right, + rgba(139, 0, 0, 0.38), + rgba(139, 0, 0, 0.18)) !important; + -fx-border-color: rgba(255, 68, 68, 0.40) !important; + -fx-text-fill: #ffffff !important; +} + +.gray-button { + -fx-background-color: + linear-gradient(to bottom right, + rgba(0, 0, 0, 0.38), + rgba(0, 0, 0, 0.18)) !important; + -fx-border-color: rgba(51, 51, 51, 0.40) !important; + -fx-text-fill: #ffffff !important; +} + +.gray-button .label { + -fx-text-fill: #ffffff !important; +} + +.green-button { + -fx-background-color: + linear-gradient(to bottom right, + rgba(0, 0, 0, 0.38), + rgba(0, 0, 0, 0.18)) !important; + -fx-border-color: rgba(51, 51, 51, 0.40) !important; + -fx-text-fill: #ffffff !important; +} + +.gray-button, +.yellow-button, +.red-button, +.green-button { + -fx-background-radius: 12 !important; + -fx-border-radius: 12 !important; + -fx-font-family: "Courier New" !important; + -fx-font-weight: bold !important; + -fx-border-width: 2 !important; + -fx-padding: 6 15 !important; + -fx-cursor: hand !important; +} + +.gray-button:hover, +.yellow-button:hover, +.red-button:hover, +.green-button:hover { + -fx-effect: dropshadow(one-pass-box, rgba(255, 255, 255, 0.25), 10, 0, 0, 3) !important; +} + +.community-cards-box { + -fx-alignment: center !important; + -fx-spacing: 12 !important; + -fx-padding: 15 !important; + -fx-background-color: transparent !important; +} + +.community-card { + -fx-effect: dropshadow(one-pass-box, rgba(255, 255, 255, 0.25), 10, 0, 0, 3) !important; + + -fx-alignment: center; + -fx-spacing: 12; + -fx-padding: 20; + -fx-background-color: linear-gradient(to bottom, #0b3d2e, #06261d); + -fx-background-radius: 16; + -fx-scale-x: 1; + -fx-scale-y: 1; + -fx-translate-y: 0; + -fx-opacity: 1; +} + +.community-card:hover {} + +.player-card { + -fx-effect: dropshadow(one-pass-box, rgba(255, 255, 255, 0.25), 10, 0, 0, 3) !important; + + -fx-alignment: center; + -fx-spacing: 12; + -fx-padding: 20; + -fx-background-color: linear-gradient(to bottom, #0b3d2e, #06261d); + -fx-background-radius: 16; + -fx-scale-x: 1; + -fx-scale-y: 1; + -fx-translate-y: 0; + -fx-opacity: 1; +} + +.player-card:hover {} + +.player-card.player-cards-active-turn { + -fx-effect: dropshadow(one-pass-box, rgba(184, 134, 11, 0.30), 10, 0, 0, 3); +} + +.dealer-box.player-cards-active-turn { + -fx-effect: dropshadow(one-pass-box, rgba(184, 134, 11, 0.30), 10, 0, 0, 3); +} + +/*.dealer-box:hover {*/ +/* -fx-translate-y: -3;*/ +/*}*/ + +.chips-icon { + -fx-effect: dropshadow(one-pass-box, rgba(255, 255, 255, 0.25), 10, 0, 0, 3) !important; +} + +/*.chips-icon:hover {*/ +/* -fx-translate-y: -3;*/ +/*}*/ + +.dealer-icon { + -fx-effect: dropshadow(one-pass-box, rgba(255, 255, 255, 0.25), 10, 0, 0, 3) !important; +} + +.player-cards-box { + -fx-padding: 10; +} + +/*.player-cards-box.player-cards-active-turn {*/ +/* -fx-effect: dropshadow(one-pass-box, rgb(184, 134, 11), 0, 0, 5, 5);*/ +/*}*/ + +.money-value { + -fx-text-fill: #ffffff; + -fx-font-size: 18px; + -fx-font-weight: bold; + /*-fx-effect: dropshadow(one-pass-box, #000000, 0, 0, 2, 2);*/ +} + +.pot-title { + -fx-text-fill: #ffffff; + -fx-font-size: 14px; + -fx-font-weight: bold; + /*-fx-effect: dropshadow(one-pass-box, #000000, 0, 0, 3, 3);*/ +} + +.pot-box { + -fx-padding: 5; +} + +.player-status-pane { + -fx-background-color: transparent; + -fx-background-radius: 15; + -fx-border-radius: 15; + /* -fx-border-color: #5c3d10 #3d260a #3d260a #5c3d10; +-fx-border-width: 2; +-fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.5), 10, 0, 0, 4);*/ +} + +.player-status-pane:hover {} + +.status-inner-box-top { + -fx-background-color: + linear-gradient(to bottom right, + rgba(0, 0, 0, 0.38), + rgba(0, 0, 0, 0.18)) !important; + -fx-background-radius: 19; + -fx-border-radius: 15; + -fx-padding: 5 10; + -fx-border-color: rgba(255, 255, 255, 0.40); + -fx-border-width: 3; + -fx-effect: dropshadow(one-pass-box, rgba(0, 0, 0, 0.30), 10, 0, 0, 3); +} + +.status-inner-box-midle { + -fx-background-color: rgba(13, 158, 59, 0); +} + +.status-inner-box-bottom { + -fx-background-color: + linear-gradient(to bottom right, + rgba(0, 0, 0, 0.38), + rgba(0, 0, 0, 0.18)) !important; + -fx-background-radius: 19; + -fx-border-radius: 15; + -fx-padding: 5 10; + -fx-border-color: rgba(255, 255, 255, 0.40); + -fx-border-width: 3; + -fx-effect: dropshadow(one-pass-box, rgba(0, 0, 0, 0.30), 10, 0, 0, 3); +} + +.status-inner-box-top.player-status-active-turn { + -fx-effect: dropshadow(one-pass-box, rgba(184, 134, 11, 0.30), 10, 0, 0, 3); +} + +.status-inner-box-bottom.player-status-active-turn { + -fx-effect: dropshadow(one-pass-box, rgba(184, 134, 11, 0.30), 10, 0, 0, 3); +} + +.status-label-small { + -fx-text-fill: #ffffff; + -fx-font-size: 18px; + -fx-font-weight: bold; + /*-fx-effect: dropshadow(one-pass-box, #000000, 0, 0, 2, 2);*/ +} + +.status-value-text { + -fx-text-fill: #ffffff; + -fx-font-size: 18px; + -fx-font-weight: bold; + /*-fx-effect: dropshadow(one-pass-box, #000000, 0, 0, 2, 2);*/ +} + +.status-value-money { + -fx-text-fill: #ffffff; + -fx-font-size: 18px; + -fx-font-weight: bold; + /*-fx-effect: dropshadow(one-pass-box, #000000, 0, 0, 2, 2);*/ +} + +.status-circle { + -fx-background-color: + linear-gradient(to bottom right, + rgba(0, 0, 0, 0.38), + rgba(0, 0, 0, 0.18)) !important; + -fx-background-radius: 50; + -fx-border-color: rgba(255, 255, 255, 0.40); + -fx-border-width: 1; + -fx-border-radius: 50; + -fx-effect: dropshadow(one-pass-box, rgba(0, 0, 0, 0.30), 10, 0, 0, 3); +} + +.browser-root { + -fx-background-image: url("/images/background.png"); + -fx-background-size: cover; + -fx-background-position: center; + -fx-background-color: #0b2d15; +} + +.browser-web-view { + -fx-background-color: rgb(13, 158, 59); + -fx-background-radius: 23; + -fx-border-radius: 20; + -fx-border-color: #5c3d10 #3d260a #3d260a #5c3d10; + -fx-border-width: 3; + -fx-padding: 0; + -fx-cursor: default; + -fx-effect: dropshadow(one-pass-box, rgba(0, 0, 0, 0.30), 10, 0, 0, 3); +} + +.web-view { + -fx-background-color: transparent; +} + +.taskbar-browser { + -fx-background-color: rgb(13, 158, 59); + -fx-background-radius: 23; + -fx-border-radius: 20; + -fx-border-color: #5c3d10 #3d260a #3d260a #5c3d10; + -fx-border-width: 3; + -fx-padding: 10 25; + -fx-cursor: default; + -fx-effect: dropshadow(one-pass-box, rgba(0, 0, 0, 0.30), 10, 0, 0, 3); +} + +/*.taskbar-browser:hover {*/ +/* -fx-border-color: #ffffff;*/ +/*}*/ + +.security-label { + -fx-text-fill: #000000; + -fx-font-weight: bold; + -fx-font-size: 16px; +} + +.context-menu { + -fx-background-color: + linear-gradient(to bottom right, + rgba(51, 51, 51, 0.38), + rgba(51, 51, 51, 0.18)) !important; + -fx-text-fill: #ffffff !important; + -fx-font-family: "Courier New" !important; + -fx-font-weight: bold !important; + -fx-background-radius: 8 !important; + -fx-border-radius: 8 !important; + -fx-border-color: rgba(51, 51, 51, 0.40) !important; + -fx-color-color: #cccccc !important; + -fx-border-width: 2 !important; + -fx-padding: 5 12 !important; +} + +.context-menu .menu-item { + -fx-background-color: + linear-gradient(to bottom right, + rgba(51, 51, 51, 0.38), + rgba(51, 51, 51, 0.18)) !important; +} + +.context-menu .menu-item .label { + -fx-text-fill: #ffffff !important; + -fx-font-size: 13px !important; +} + +/*.context-menu .menu-item:focused {*/ +/* -fx-background-color: #333333;*/ +/*}*/ + +.context-menu .menu-item:hover .label, +.context-menu .menu-item:focused .label { + /*-fx-text-fill: #b8860b;*/ + -fx-font-size: 15px !important; +} + +.notebook { + -fx-background-color: + linear-gradient(to bottom right, + rgba(0, 0, 0, 0.38), + rgba(0, 0, 0, 0.18)); + -fx-background-radius: 23; + -fx-border-radius: 20; + -fx-border-color: rgba(255, 255, 255, 0.40); + -fx-border-width: 3; + -fx-effect: dropshadow(one-pass-box, rgba(255, 255, 255, 0.25), 10, 0, 0, 3) !important; + /*-fx-cursor: move;*/ + -fx-padding: 0 0 15 0; +} + +.notebook:hover { + -fx-background-color: + linear-gradient(to bottom right, + rgba(0, 0, 0, 0.44), + rgba(0, 0, 0, 0.22)); + + -fx-border-color: + rgba(255, 255, 255, 0.55); +} + +/*.notebook.player-active-turn {*/ +/* !* active turn should only change the shadow to avoid flicker/transparency jumps. *!*/ +/* -fx-border-color:*/ +/* rgba(184, 134, 11, 0.55);*/ +/* -fx-effect:*/ +/* dropshadow(*/ +/* gaussian,*/ +/* rgba(184, 134, 11, 0.45),*/ +/* 40,*/ +/* 0.2,*/ +/* 0,*/ +/* 12*/ +/* );*/ +/*}*/ + +.notebook-header { + -fx-background-color: transparent !important; + -fx-background-radius: 25 25 0 0; + -fx-padding: 8 10; + -fx-cursor: move; +} + +.notebook-title { + -fx-text-fill: #ffffff; + -fx-background-color: transparent !important; + -fx-font-size: 18px; + -fx-font-weight: bold; + /*-fx-effect: dropshadow(one-pass-box, rgb(255, 255, 255), 0, 0, 3, 3);*/ +} + +.notebook-content { + -fx-background-color: transparent; + -fx-padding: 0; +} + +.notebook-content>.viewport { + -fx-background-color: transparent !important; + -fx-background-radius: 0 0 25 25; +} + + +.scroll-pane { + -fx-background-color: transparent; + -fx-border-color: transparent; +} + +.scroll-pane .scroll-bar:vertical, +.scroll-pane .scroll-bar:horizontal { + -fx-background-color: transparent; +} + +.scroll-pane .scroll-bar .track { + -fx-background-color: transparent !important; + -fx-background-radius: 5; +} + +.scroll-pane .scroll-bar .thumb { + -fx-background-color: + linear-gradient(to bottom right, + rgba(200, 200, 200, 0.38), + rgba(200, 200, 200, 0.18)) !important; + -fx-background-radius: 5; +} + +.scroll-pane .scroll-bar .thumb:hover { + -fx-background-color: + linear-gradient(to bottom right, + rgba(255, 255, 255, 0.38), + rgba(255, 255, 255, 0.18)) !important; +} + +.notebook-tips-list { + -fx-padding: 10; + -fx-spacing: 10; + -fx-background-color: transparent; +} + +.notebook-tips-list .text-flow { + -fx-padding: 12; + -fx-background-color: + linear-gradient(to bottom right, + rgba(0, 0, 0, 0.38), + rgba(0, 0, 0, 0.18)); + -fx-background-radius: 15; +} + +.settings-box { + -fx-background-color: + linear-gradient(to bottom right, + rgba(0, 0, 0, 0.38), + rgba(0, 0, 0, 0.18)); + -fx-background-radius: 23; + -fx-border-radius: 20; + -fx-border-color: rgba(255, 255, 255, 0.40); + -fx-border-width: 3; + -fx-effect: dropshadow(one-pass-box, rgba(255, 255, 255, 0.25), 10, 0, 0, 3) !important; + /*-fx-cursor: move;*/ + -fx-padding: 0 0 15 0; +} + +.settings-box:hover { + -fx-background-color: + linear-gradient(to bottom right, + rgba(0, 0, 0, 0.44), + rgba(0, 0, 0, 0.22)); + + -fx-border-color: + rgba(255, 255, 255, 0.55); +} + +/*.settings-box.player-active-turn {*/ +/* !* Active turn should only change the shadow to avoid flicker/transparency jumps. *!*/ +/* -fx-border-color:*/ +/* rgba(184, 134, 11, 0.55);*/ +/* -fx-effect:*/ +/* dropshadow(*/ +/* gaussian,*/ +/* rgba(184, 134, 11, 0.45),*/ +/* 40,*/ +/* 0.2,*/ +/* 0,*/ +/* 12*/ +/* );*/ +/*}*/ + +.settings-header { + -fx-background-color: transparent; + -fx-background-radius: 20 20 0 0; + -fx-padding: 10 15; + -fx-cursor: move; + -fx-border-width: 0 0 1 0; +} + +.settings-label { + -fx-text-fill: #ffffff; + -fx-font-size: 18px; + -fx-font-weight: bold; + /*-fx-effect: dropshadow(one-pass-box, rgb(255, 255, 255), 0, 0, 3, 3);*/ +} + +.settings-content { + -fx-padding: 15 20 20 20; + -fx-spacing: 12; +} + +.settings-content { + -fx-background-color: transparent; + -fx-text-fill: #ffffff; + -fx-font-size: 13px; +} + +.radio-button { + -fx-text-fill: #ffffff; + -fx-font-size: 13px; + + -fx-padding: 6 8; + -fx-background-radius: 10; +} + +.radio-button:hover { + -fx-font-size: 15px; +} + +.radio-button:selected { + -fx-text-fill: #ffffff; +} + +.radio-button .radio { + -fx-background-color: + linear-gradient(to bottom right, + rgba(184, 134, 11, 0.38), + rgba(184, 134, 11, 0.18)); + /*-fx-border-width: 3;*/ + /*-fx-border-color: #b8860b;*/ + /*-fx-border-radius: 50%;*/ +} + +.radio-button:selected .radio { + -fx-background-color: + linear-gradient(to bottom right, + rgba(184, 134, 11, 0.38), + rgba(184, 134, 11, 0.18)); + -fx-effect: dropshadow(one-pass-box, rgba(184, 134, 11, 0.30), 10, 0, 0, 3); +} + +.settings-box { + -fx-background-insets: 0; +} + +.settings-content { + -fx-background-color: transparent; +} + +/*chat box css*/ + +.chat-box { + -fx-background-color: + linear-gradient(to bottom right, + rgba(255, 255, 255, 0.18), + rgba(255, 255, 255, 0.08)) !important; + -fx-background-radius: 58; + -fx-border-radius: 50; + -fx-border-color: rgba(255, 255, 255, 0.25) !important; + -fx-border-width: 12; + -fx-padding: 20; + -fx-effect: dropshadow(one-pass-box, rgba(255, 255, 255, 0.20), 10, 0, 0, 3) !important; +} + +.tab-chat-box { + -fx-background-color: transparent !important; + -fx-background-radius: 23 !important; + -fx-border-radius: 20 !important; + -fx-border-color: rgba(255, 255, 255, 0.40) !important; + -fx-border-width: 3 !important; + -fx-padding: 20; +} + +.chat-header { + -fx-text-fill: #ffffff !important; + -fx-font-size: 22px; + -fx-font-weight: bold; + -fx-padding: 0 0 10 0; + -fx-effect: dropshadow(one-pass-box, #000000, 0, 0, 0, 0) !important; +} + +.chat-separator { + -fx-background-color: transparent !important; + -fx-min-height: 4px; + -fx-effect: dropshadow(one-pass-box, #000000, 0, 0, 0, 0) !important; +} + +.tab-header-area .tab-header-background { + -fx-background-color: transparent !important; + -fx-background-radius: 18 !important; + -fx-border-radius: 10 !important; + -fx-border-color: rgba(0, 0, 0, 0) !important; + -fx-border-width: 5; + -fx-padding: 10; + -fx-effect: dropshadow(one-pass-box, rgba(0, 0, 0), 0, 0, 0, 0) !important; + -fx-min-height: 10; +} + +.tab-pane .tab { + -fx-background-color: transparent !important; + -fx-background-radius: 18 !important; + -fx-border-radius: 10 !important; + -fx-border-color: rgba(255, 255, 255, 0) !important; + -fx-effect: dropshadow(one-pass-box, rgba(0, 0, 0), 0, 0, 0, 0) !important; + -fx-border-width: 5; + -fx-padding: 6 15; +} + +.tab-pane .tab:selected { + -fx-background-color: + linear-gradient(to bottom right, + rgba(0, 0, 0, 0.38), + rgba(0, 0, 0, 0.18)) !important; + -fx-background-radius: 18 !important; + -fx-border-radius: 10 !important; + -fx-border-color: rgba(255, 255, 255, 0.40) !important; + -fx-effect: dropshadow(one-pass-box, rgba(0, 0, 0), 0, 0, 0, 0) !important; + -fx-border-width: 3 !important; + -fx-padding: 6 15; +} + +.tab-pane .tab .tab-close-button { + -fx-text-fill: #ffffff !important; +} + +.tab-pane .tab-header-area .headers-region { + -fx-background-color: transparent !important; +} + +.tab .tab-label { + -fx-alignment: CENTER; + -fx-text-fill: #ffffff; + -fx-font-size: 12px; + -fx-font-weight: bold; +} + +.tab:selected .tab-label { + -fx-alignment: CENTER; + -fx-text-fill: #ffffff; +} + +.menu-button { + -fx-background-color: + linear-gradient(to bottom right, + rgba(0, 0, 0, 0.38), + rgba(0, 0, 0, 0.18)) !important; + -fx-border-color: rgba(51, 51, 51, 0.40) !important; + -fx-text-fill: #ffffff !important; + -fx-background-radius: 12 !important; + -fx-border-radius: 12 !important; + -fx-font-family: "Courier New" !important; + -fx-font-weight: bold !important; + -fx-border-width: 2 !important; + -fx-padding: 6 15 !important; + -fx-cursor: hand !important; +} + +.menu-button .label { + -fx-text-fill: #ffffff !important; +} + +.menu-button:hover { + -fx-effect: dropshadow(one-pass-box, rgba(255, 255, 255, 0.25), 10, 0, 0, 3) !important; +} + +.menu-button .menu-item { + -fx-background-color: + linear-gradient(to bottom right, + rgba(51, 51, 51, 0.38), + rgba(51, 51, 51, 0.18)) !important; + -fx-border-color: rgba(51, 51, 51, 0.40) !important; + -fx-text-fill: #ffffff; +} diff --git a/src/main/resources/ui-structure/gameuicomponents/Settings.fxml b/src/main/resources/ui-structure/gameuicomponents/Settings.fxml index 3b37181..d95971f 100644 --- a/src/main/resources/ui-structure/gameuicomponents/Settings.fxml +++ b/src/main/resources/ui-structure/gameuicomponents/Settings.fxml @@ -52,6 +52,10 @@ text="GLASS" styleClass="radio-button"/> + + -- 2.52.0 From c8e437f8f02d329cd651dd84fe45ab2a0f09f63d Mon Sep 17 00:00:00 2001 From: Julian Kropff Date: Mon, 11 May 2026 18:45:29 +0200 Subject: [PATCH 2/2] Fix: checkstyle --- .../ui/gameui/gameuicomponents/SettingsController.java | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/main/java/ch/unibas/dmi/dbis/cs108/casono/client/ui/gameui/gameuicomponents/SettingsController.java b/src/main/java/ch/unibas/dmi/dbis/cs108/casono/client/ui/gameui/gameuicomponents/SettingsController.java index 4396ef7..8ccf30b 100644 --- a/src/main/java/ch/unibas/dmi/dbis/cs108/casono/client/ui/gameui/gameuicomponents/SettingsController.java +++ b/src/main/java/ch/unibas/dmi/dbis/cs108/casono/client/ui/gameui/gameuicomponents/SettingsController.java @@ -41,7 +41,10 @@ public class SettingsController { /** Set up the theme toggle group and listeners for the theme selection radio buttons. */ private void setupThemeToggle() { - if (themeStandard == null || themeBlackWhite == null || themeGlass == null || themeLightGlass == null) { + if (themeStandard == null + || themeBlackWhite == null + || themeGlass == null + || themeLightGlass == null) { LOGGER.warn("Theme buttons not injected from FXML"); return; } -- 2.52.0