ui/panels/nametag.razor.scss
Nametag {
position: absolute;
width: 122px;
height: 8px;
//background-color: #0005;
justify-content: center;
flex-direction: column;
//backdrop-filter: blur( 3px );
transform: translateX( -50% ) translateY( -50% );
overflow: hidden;
background-color: #000a;
margin-top: 0;
align-self: center;
transition: width 0.1s ease-out, opacity 0.1s ease-out;
//.name, .level {
// font-family: "Mini Pixel-7";
// opacity: 1;
// color: white;
// font-size: 22px;
// padding-left: 6px;
// padding-bottom: 1px;
//padding: 0px;
// font-weight: bold;
//background-color: #ff000055;
//}
//.level {
// position: absolute;
// right: 0px;
// top: 0px;
// color: #bbb;
// padding-right: 5px;
// padding-top: 1px;
//}
//&.invisible {
// display: none;
//}
.hpbaroverlay {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
//width: 0px;
//background-color: green;
align-self: center;
transform-origin: left;
transition: width 0.1s ease-out, opacity 0.25s linear, background-color 0.25s linear;
opacity: 1;
&.invisible {
display: none;
}
}
.hpbardelta {
top: 0px;
bottom: 0px;
left: 0px;
width: 0px;
//border: 2px solid blue;
background-color: white;
//text-anchor: initial;
position: absolute;
align-self: center;
transform-origin: left;
//transform: scaleX(0.5);
transition: width 0.4s ease-out;
opacity: 1;
//z-index: 1;
&.invisible {
display: none;
}
}
.reload_bar {
z-index: -1;
width: 100%;
background-color: #84c34322;
align-self: center;
position: absolute;
left: 0px;
top: 0px;
bottom: 0px;
transform-origin: left;
transition: opacity 0.075s ease-out;
opacity: 0;
&.showing {
opacity: 1;
}
}
}