Better panel background

This commit is contained in:
2024-05-24 19:57:44 +02:00
parent f570b456ca
commit 3f8a580984
4 changed files with 15 additions and 11 deletions
+3 -2
View File
@@ -127,11 +127,12 @@ function showWinnerScreen() {
#player_list { #player_list {
min-height: 90%; min-height: 90%;
background: burlywood; background: rgba(0, 0, 0, 0.35);
border: 5px solid darkgoldenrod; border: 5px solid #000;
border-radius: 10px; border-radius: 10px;
filter: drop-shadow(2.5px 7.5px 1px rgba(0, 0, 0, .60)); filter: drop-shadow(2.5px 7.5px 1px rgba(0, 0, 0, .60));
margin: 10px; margin: 10px;
backdrop-filter: hue-rotate(73deg) blur(10px) contrast(90%) brightness(165%);
} }
</style> </style>
+2 -3
View File
@@ -65,11 +65,10 @@ const buyableFiregem = computed(() => goStore?.current_game?.gem_stack.at(-1))
margin: 10px; margin: 10px;
padding-left: 10px; padding-left: 10px;
padding-right: 10px; padding-right: 10px;
padding-bottom: 10px;
border-radius: 10px; border-radius: 10px;
background: brown;
border: 5px solid darkred;
filter: drop-shadow(2.5px 7.5px 1px rgba(0, 0, 0, .60)); filter: drop-shadow(2.5px 7.5px 1px rgba(0, 0, 0, .60));
backdrop-filter: hue-rotate(625deg) blur(5px) brightness(80%);
} }
.separator { .separator {
+1 -1
View File
@@ -118,7 +118,7 @@ const props = defineProps<Props>()
grid-template-columns: min-content 1fr; grid-template-columns: min-content 1fr;
grid-template-areas: grid-template-areas:
"button player"; "button player";
border: 5px solid brown; border: 5px solid black;
min-height: 200px; min-height: 200px;
position: relative; position: relative;
} }
+9 -5
View File
@@ -144,9 +144,8 @@ function check_for_guard(player: Player) {
<PlayerStats :player="props.player"> <PlayerStats :player="props.player">
</PlayerStats> </PlayerStats>
<template v-if="!hide_stack_and_discard"> <template v-if="!hide_stack_and_discard">
<button id="end_turn" v-if="isSelfTurn" class="end_turn_button turn_icon" <button id="end_turn" class="end_turn_button turn_icon" :class="{ hidden: !isSelfTurn }"
@click="checkEndTurn">END @click="checkEndTurn">END TURN</button>
TURN</button>
<div class="warning" <div class="warning"
:class="{ 'warning-fire-gem': warningText == 'P\'tite Fire gem?', 'visible': warning }"> :class="{ 'warning-fire-gem': warningText == 'P\'tite Fire gem?', 'visible': warning }">
@@ -275,6 +274,10 @@ function check_for_guard(player: Player) {
height: 100%; height: 100%;
} }
#end_turn.hidden {
visibility: hidden
}
.stack, .stack,
.discard, .discard,
.cards_container { .cards_container {
@@ -476,6 +479,7 @@ function check_for_guard(player: Player) {
#player_info { #player_info {
display: flex; display: flex;
align-items: center; align-items: center;
min-width: 200px;
} }
#player_banner.big { #player_banner.big {
@@ -483,10 +487,10 @@ function check_for_guard(player: Player) {
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
max-width: min-content; max-width: min-content;
background: burlywood; border: 5px solid black;
border: 5px solid maroon;
border-radius: 10px; border-radius: 10px;
filter: drop-shadow(2.5px 7.5px 1px rgba(0, 0, 0, .60)); filter: drop-shadow(2.5px 7.5px 1px rgba(0, 0, 0, .60));
backdrop-filter: blur(5px) brightness(80%) hue-rotate(0deg) grayscale(80%);
} }
#player_stats { #player_stats {