ui/bossnametag.razor.scss
BossNametag {
position: absolute;
bottom: 10px;
width: 80%;
left: 10%;
right: 10%;
right: 0px;
flex-direction: column;
justify-content: center;
z-index: 992;
&.invisible {
display: none;
}
.hpbar {
position: relative;
width: 600px;
height: 32px;
background-image: url("/textures/ui/panel/boss_healthbar.png");
background-position: center;
background-size: 100% 100%;
background-repeat: no-repeat;
align-self: center;
overflow: visible;
//border-left: 2px solid #fff;
//border-right: 2px solid #fff;
flex-direction: row;
justify-content: center;
gap: 4px;
&.invisible {
display: none;
}
.bar_container {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
overflow: visible;
mask-size: 100% 100%;
mask-repeat: no-repeat;
mask-position: center;
background-color: #00000077;
}
.hpbaroverlay {
//background-color: green;
position: absolute;
bottom: 0px;
top: 0px;
left: 0px;
transition: opacity 0.25s linear, background-color 0.25s linear;
&.invisible {
display: none;
}
}
.hpbardelta {
position: absolute;
bottom: 0px;
top: 0px;
left: 0px;
//background-color: white;
position: absolute;
align-self: center;
transform-origin: left;
transition: width 0.9s linear;
opacity: 1;
}
}
.label {
position: relative;
color: white;
text-align: center;
//width: 100%;
height: 100%;
font-family: "Inter";
font-weight: bold;
font-size: 16px;
text-stroke: 5px black;
align-items: center;
opacity: 0.7;
}
.hp_label {
position: absolute;
right: 8px;
justify-content: center;
gap: 4px;
height: 100%;
opacity: 0.7;
}
.name_label {
position: absolute;
left: 8px;
height: 100%;
}
}