Style: fixes in FXML and CSS for Game UI

This commit is contained in:
Julian Kropff
2026-04-25 15:02:02 +02:00
parent 0f5ddfda0c
commit c31f0048ee
3 changed files with 51 additions and 6 deletions
@@ -48,7 +48,7 @@
}
.taskbar {
-fx-background-color: rgba(13, 158, 59);
-fx-background-color: rgb(13, 158, 59);
-fx-background-radius: 23;
-fx-border-radius: 20;
-fx-border-color: #5c3d10 #3d260a #3d260a #5c3d10;
@@ -56,13 +56,17 @@
-fx-padding: 10 25;
-fx-cursor: move;
-fx-effect: dropshadow(one-pass-box, rgba(0,0,0,0.8), 0, 0, 5, 5);
transition: all 0.2s ease-in-out;
}
.taskbar:hover {
-fx-border-color: #ffffff;
}
.taskbar.player-active-turn {
/* Active turn should only change the shadow to avoid flicker/transparency jumps. */
-fx-effect: dropshadow(one-pass-box, rgb(184, 134, 11), 0, 0, 5, 5);
}
.black-input-field {
-fx-background-color: #1a1a1a;
-fx-text-fill: #ffffff;
@@ -229,6 +233,13 @@
-fx-opacity: 1;
}
.player-card.player-cards-active-turn {
-fx-effect: dropshadow(one-pass-box, rgb(184, 134, 11), 0, 0, 5, 5);
}
.dealer-box.player-cards-active-turn {
-fx-effect: dropshadow(one-pass-box, rgb(184, 134, 11), 0, 0, 5, 5);
}
.chips-icon {
-fx-effect: dropshadow(one-pass-box, rgba(0, 0, 0, 0.8), 0, 0, 3, 3);
@@ -243,6 +254,10 @@
-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;
@@ -297,6 +312,14 @@
-fx-effect: dropshadow(one-pass-box, rgba(0, 0, 0, 0.8), 0, 0, 3, 3);
}
.status-inner-box-top.player-status-active-turn {
-fx-effect: dropshadow(one-pass-box, rgb(184, 134, 11), 0, 0, 5, 5);
}
.status-inner-box-bottom.player-status-active-turn {
-fx-effect: dropshadow(one-pass-box, rgb(184, 134, 11), 0, 0, 5, 5);
}
.status-label-small {
-fx-text-fill: #ffffff;
-fx-font-size: 18px;
@@ -369,3 +392,24 @@
-fx-font-weight: bold;
-fx-font-size: 16px;
}
.context-menu {
-fx-background-color: #333333;
-fx-text-fill: #ffffff;
-fx-font-family: "Courier New";
-fx-font-weight: bold;
-fx-background-radius: 8;
-fx-border-radius: 8;
-fx-border-color: #333333;
-fx-color-color: #cccccc;
-fx-border-width: 2;
-fx-padding: 5 12;
}
.context-menu .menu-item {
-fx-background-color: #333333;
}
.context-menu .menu-item:focused {
-fx-background-color: #333333;
}
@@ -93,6 +93,7 @@
<!-- Player Cards -->
<HBox fx:id="playerCardsBox"
styleClass="player-cards-box"
spacing="10"
alignment="CENTER"
StackPane.alignment="BOTTOM_CENTER">
@@ -6,8 +6,6 @@
<?import javafx.geometry.Insets?>
<!--
TODO: Main placeholder for player status & input.
This layout currently serves as a visual structure. As soon as the game engine and
server requests (API/requests) can be processed, the name, account balance
and status displays will be dynamically populated with real-time data from the server.
@@ -24,7 +22,8 @@ and status displays will be dynamically populated with real-time data from the s
<children>
<!-- NAME -->
<HBox styleClass="status-inner-box-top"
<HBox fx:id="statusInnerBoxTop"
styleClass="status-inner-box-top"
alignment="CENTER_LEFT"
prefHeight="40">
@@ -40,7 +39,8 @@ and status displays will be dynamically populated with real-time data from the s
<HBox prefHeight="5"/>
<!-- MONEY -->
<HBox styleClass="status-inner-box-bottom"
<HBox fx:id="statusInnerBoxBottom"
styleClass="status-inner-box-bottom"
alignment="CENTER_LEFT"
prefHeight="40">