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

Updated HUD styling

Browse Source
This commit is contained in:
Colin Kallemein
2024-06-11 22:30:51 +02:00
parent 4dcc11706a
commit 6e2a7f4738
3 changed files with 18 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -33,31 +33,34 @@ const socket = useSocketStore()
.hud-wrapper {
position: relative;
left: -32px;
left: 0;
width: 315px;
height: 84px;
.hud,
&::before {
position: absolute;
top: 32px;
left: 32px;
width: 245px;
height: 75px;
top: 0;
left: 27px;
width: 280px;
height: 84px;
border-radius: 16px;
z-index: 1;
}
.profile {
position: absolute;
width: 64px;
height: 64px;
width: 48px;
height: 48px;
background-color: rgba($white, 0.8);
border-radius: 100%;
border: 3px solid $white;
top: 0;
top: 50%;
transform: translateY(-50%);
left: 0;
z-index: 2; // Ensure profile is above hud and before
img {
width: 32px;
width: 26px;
position: absolute;
left: 50%;
top: 50%;
@ -66,7 +69,7 @@ const socket = useSocketStore()
}
.hud {
background: url('/assets/shapes/hud-shape.svg') center/cover no-repeat;
background: url('/assets/shapes/hud-shape-2.svg') center/cover no-repeat;
.stats {
height: 100%;
display: flex;
@ -103,7 +106,8 @@ const socket = useSocketStore()
appearance: none;
height: 8px;
border-radius: 8px;
max-width: 140px;
width: 100%;
max-width: 175px;
&#hp {
accent-color: $red;
@ -151,7 +155,7 @@ const socket = useSocketStore()
&::before {
content: '';
background: url('/assets/clouds.png') center/cover no-repeat;
mask: url('/assets/shapes/hud-image-shape.svg') center/cover no-repeat;
mask: url('/assets/shapes/hud-image-shape-2.svg') center/cover no-repeat;
mask-mode: luminance;
}
}