Better panel background
This commit is contained in:
@@ -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>
|
||||||
|
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
Reference in New Issue
Block a user