Game UI Optimisation #320

Merged
j.kropff merged 17 commits from feat/game-ui-optimization into main 2026-05-10 20:54:22 +02:00
3 changed files with 99 additions and 52 deletions
Showing only changes of commit 394cdf4ea1 - Show all commits
@@ -224,6 +224,10 @@
-fx-opacity: 1; -fx-opacity: 1;
} }
/*.community-card:hover {*/
/* -fx-translate-y: -3;*/
/*}*/
.player-card { .player-card {
-fx-effect: dropshadow(one-pass-box, rgba(255, 255, 255, 0.8), 0, 0, 3, 3); -fx-effect: dropshadow(one-pass-box, rgba(255, 255, 255, 0.8), 0, 0, 3, 3);
@@ -238,6 +242,10 @@
-fx-opacity: 1; -fx-opacity: 1;
} }
/*.player-card:hover {*/
/* -fx-translate-y: -3;*/
/*}*/
.player-card.player-cards-active-turn { .player-card.player-cards-active-turn {
-fx-effect: dropshadow(one-pass-box, rgb(184, 134, 11), 0, 0, 5, 5); -fx-effect: dropshadow(one-pass-box, rgb(184, 134, 11), 0, 0, 5, 5);
} }
@@ -246,10 +254,18 @@
-fx-effect: dropshadow(one-pass-box, rgb(184, 134, 11), 0, 0, 5, 5); -fx-effect: dropshadow(one-pass-box, rgb(184, 134, 11), 0, 0, 5, 5);
} }
/*.dealer-box:hover {*/
/* -fx-translate-y: -3;*/
/*}*/
.chips-icon { .chips-icon {
-fx-effect: dropshadow(one-pass-box, rgba(255, 255, 255, 0.8), 0, 0, 3, 3); -fx-effect: dropshadow(one-pass-box, rgba(255, 255, 255, 0.8), 0, 0, 3, 3);
} }
/*.chips-icon:hover {*/
/* -fx-translate-y: -3;*/
/*}*/
.dealer-icon { .dealer-icon {
-fx-effect: dropshadow(one-pass-box, rgba(255, 255, 255, 0.8), 0, 0, 3, 3); -fx-effect: dropshadow(one-pass-box, rgba(255, 255, 255, 0.8), 0, 0, 3, 3);
} }
@@ -446,10 +462,10 @@
-fx-border-color: #ffffff; -fx-border-color: #ffffff;
} }
.notebook.player-active-turn { /*.notebook.player-active-turn {*/
/* Active turn should only change the shadow to avoid flicker/transparency jumps. */ /* !* 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); /* -fx-effect: dropshadow(one-pass-box, rgb(184, 134, 11), 0, 0, 5, 5);*/
} /*}*/
.notebook-header { .notebook-header {
-fx-background-color: #000000; -fx-background-color: #000000;
@@ -527,10 +543,10 @@
-fx-border-color: #ffffff; -fx-border-color: #ffffff;
} }
.settings-box.player-active-turn { /*.settings-box.player-active-turn {*/
/* Active turn should only change the shadow to avoid flicker/transparency jumps. */ /* !* 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); /* -fx-effect: dropshadow(one-pass-box, rgb(184, 134, 11), 0, 0, 5, 5);*/
} /*}*/
.settings-header { .settings-header {
-fx-background-color: transparent; -fx-background-color: transparent;
@@ -23,12 +23,12 @@
-fx-background-color: -fx-background-color:
linear-gradient( linear-gradient(
to bottom right, to bottom right,
rgba(255 ,255 ,255 ,0.38), rgba(255 ,255 ,255 ,0.18),
rgba(255 ,255 ,255 ,0.18) rgba(255 ,255 ,255 ,0.08)
); );
-fx-background-radius: 210; -fx-background-radius: 210;
-fx-border-radius: 200; -fx-border-radius: 200;
-fx-border-color: rgba(255, 255, 255, 0.40); -fx-border-color: rgba(255, 255, 255, 0.25);
-fx-border-width: 12; -fx-border-width: 12;
/*-fx-min-height: 60vh;*/ /*-fx-min-height: 60vh;*/
/*-fx-max-height: 60vh;*/ /*-fx-max-height: 60vh;*/
@@ -37,7 +37,7 @@
-fx-effect: -fx-effect:
dropshadow( dropshadow(
gaussian, gaussian,
rgba(0 ,0 ,0 , 0.45), rgba(0 ,0 ,0 , 0.25),
40, 40,
0.2, 0.2,
0, 0,
@@ -370,6 +370,10 @@
-fx-opacity: 1; -fx-opacity: 1;
} }
.community-card:hover {
-fx-translate-y: -3;
}
.player-card { .player-card {
-fx-effect: -fx-effect:
dropshadow( dropshadow(
@@ -392,6 +396,10 @@
-fx-opacity: 1; -fx-opacity: 1;
} }
.player-card:hover {
-fx-translate-y: -3;
}
.player-card.player-cards-active-turn { .player-card.player-cards-active-turn {
-fx-effect: -fx-effect:
dropshadow( dropshadow(
@@ -416,6 +424,10 @@
); );
} }
/*.dealer-box:hover {*/
/* -fx-translate-y: -3;*/
/*}*/
.chips-icon { .chips-icon {
-fx-effect: -fx-effect:
dropshadow( dropshadow(
@@ -428,6 +440,10 @@
) !important; ) !important;
} }
/*.chips-icon:hover {*/
/* -fx-translate-y: -3;*/
/*}*/
.dealer-icon { .dealer-icon {
-fx-effect: -fx-effect:
dropshadow( dropshadow(
@@ -733,20 +749,20 @@
rgba(255, 255, 255, 0.55); rgba(255, 255, 255, 0.55);
} }
.notebook.player-active-turn { /*.notebook.player-active-turn {*/
/* active turn should only change the shadow to avoid flicker/transparency jumps. */ /* !* active turn should only change the shadow to avoid flicker/transparency jumps. *!*/
-fx-border-color: /* -fx-border-color:*/
rgba(184, 134, 11, 0.55); /* rgba(184, 134, 11, 0.55);*/
-fx-effect: /* -fx-effect:*/
dropshadow( /* dropshadow(*/
gaussian, /* gaussian,*/
rgba(184, 134, 11, 0.45), /* rgba(184, 134, 11, 0.45),*/
40, /* 40,*/
0.2, /* 0.2,*/
0, /* 0,*/
12 /* 12*/
); /* );*/
} /*}*/
.notebook-header { .notebook-header {
-fx-background-color: transparent !important; -fx-background-color: transparent !important;
@@ -861,20 +877,20 @@
rgba(255, 255, 255, 0.55); rgba(255, 255, 255, 0.55);
} }
.settings-box.player-active-turn { /*.settings-box.player-active-turn {*/
/* Active turn should only change the shadow to avoid flicker/transparency jumps. */ /* !* Active turn should only change the shadow to avoid flicker/transparency jumps. *!*/
-fx-border-color: /* -fx-border-color:*/
rgba(184, 134, 11, 0.55); /* rgba(184, 134, 11, 0.55);*/
-fx-effect: /* -fx-effect:*/
dropshadow( /* dropshadow(*/
gaussian, /* gaussian,*/
rgba(184, 134, 11, 0.45), /* rgba(184, 134, 11, 0.45),*/
40, /* 40,*/
0.2, /* 0.2,*/
0, /* 0,*/
12 /* 12*/
); /* );*/
} /*}*/
.settings-header { .settings-header {
-fx-background-color: transparent; -fx-background-color: transparent;
@@ -962,18 +978,18 @@
-fx-background-color: -fx-background-color:
linear-gradient( linear-gradient(
to bottom right, to bottom right,
rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.18),
rgba(255, 255, 255, 0.18) rgba(255, 255, 255, 0.08)
) !important; ) !important;
-fx-background-radius: 58; -fx-background-radius: 58;
-fx-border-radius: 50; -fx-border-radius: 50;
-fx-border-color: rgba(255, 255, 255, 0.40) !important; -fx-border-color: rgba(255, 255, 255, 0.25) !important;
-fx-border-width: 12; -fx-border-width: 12;
-fx-padding: 20; -fx-padding: 20;
-fx-effect: -fx-effect:
dropshadow( dropshadow(
gaussian, gaussian,
rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.25),
40, 40,
0.2, 0.2,
0, 0,
@@ -224,6 +224,10 @@
-fx-opacity: 1; -fx-opacity: 1;
} }
/*.community-card:hover {*/
/* -fx-translate-y: -3;*/
/*}*/
.player-card { .player-card {
-fx-effect: dropshadow(one-pass-box, rgba(0, 0, 0, 0.8), 0, 0, 3, 3); -fx-effect: dropshadow(one-pass-box, rgba(0, 0, 0, 0.8), 0, 0, 3, 3);
@@ -238,6 +242,10 @@
-fx-opacity: 1; -fx-opacity: 1;
} }
/*.player-card:hover {*/
/* -fx-translate-y: -3;*/
/*}*/
.player-card.player-cards-active-turn { .player-card.player-cards-active-turn {
-fx-effect: dropshadow(one-pass-box, rgb(184, 134, 11), 0, 0, 5, 5); -fx-effect: dropshadow(one-pass-box, rgb(184, 134, 11), 0, 0, 5, 5);
} }
@@ -246,10 +254,17 @@
-fx-effect: dropshadow(one-pass-box, rgb(184, 134, 11), 0, 0, 5, 5); -fx-effect: dropshadow(one-pass-box, rgb(184, 134, 11), 0, 0, 5, 5);
} }
/*.dealer-box:hover {*/
/* -fx-translate-y: -3;*/
/*}*/
.chips-icon { .chips-icon {
-fx-effect: dropshadow(one-pass-box, rgba(0, 0, 0, 0.8), 0, 0, 3, 3); -fx-effect: dropshadow(one-pass-box, rgba(0, 0, 0, 0.8), 0, 0, 3, 3);
} }
/*.chips-icon:hover {*/
/* -fx-translate-y: -3;*/
/*}*/
.dealer-icon { .dealer-icon {
-fx-effect: dropshadow(one-pass-box, rgba(0, 0, 0, 0.8), 0, 0, 3, 3); -fx-effect: dropshadow(one-pass-box, rgba(0, 0, 0, 0.8), 0, 0, 3, 3);
@@ -447,10 +462,10 @@
-fx-border-color: #ffffff; -fx-border-color: #ffffff;
} }
.notebook.player-active-turn { /*.notebook.player-active-turn {*/
/* Active turn should only change the shadow to avoid flicker/transparency jumps. */ /* !* 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); /* -fx-effect: dropshadow(one-pass-box, rgb(184, 134, 11), 0, 0, 5, 5);*/
} /*}*/
.notebook-header { .notebook-header {
-fx-background-color: rgb(13, 158, 59); -fx-background-color: rgb(13, 158, 59);
@@ -529,10 +544,10 @@
-fx-border-color: #ffffff; -fx-border-color: #ffffff;
} }
.settings-box.player-active-turn { /*.settings-box.player-active-turn {*/
/* Active turn should only change the shadow to avoid flicker/transparency jumps. */ /* !* 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); /* -fx-effect: dropshadow(one-pass-box, rgb(184, 134, 11), 0, 0, 5, 5);*/
} /*}*/
.settings-header { .settings-header {
-fx-background-color: transparent; -fx-background-color: transparent;