noxious/client
6
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Hud cutout styling + changes character select

Browse Source
This commit is contained in:
Colin Kallemein
2024-06-02 18:32:59 +02:00
parent bc7d83345f
commit 579f289995
6 changed files with 33 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/game/Hud.vue
View File

@ -16,6 +16,7 @@
.hud-wrapper {
position: relative;
left: -2rem;
.profile {
position: absolute;
left: 0;
@ -24,7 +25,7 @@
height: 4rem;
background-color: rgba($white, 0.8);
border-radius: 100%;
border: 2px solid $white;
border: 3px solid $white;
z-index: 1;
img {
width: 2rem;
@ -38,15 +39,30 @@
position: absolute;
left: 2rem;
top: 2rem;
width: 15rem;
height: 5rem;
width: 245px;
height: 75px;
background-image: url('/assets/shapes/hud-shape.svg');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
border-radius: 1rem;
z-index: 1;
}
&::before {
content: '';
position: absolute;
left: 2rem;
top: 2rem;
width: 245px;
height: 75px;
background-image: url('/assets/clouds.png');
background-position: center;
background-size: cover;
// background-color: rgba(127, 127, 127, 0.7);
clip-path: ellipse(3rem 3rem at 0% 0%) invert;
background-repeat: no-repeat;
border-radius: 1rem;
border: 2px solid $white;
mask-image: url('/assets/shapes/hud-image-shape.svg');
mask-mode: luminance;
}
}
</style>