ui/playericon.razor.scss
PlayerIcon {
position: relative;
width: 55px;
height: 55px;
justify-content: center;
align-items: center;
align-content: center;
box-shadow: 0px 0px 5px rgba(black, 0.25);
pointer-events: all;
font-family: "Cal Sans";
cursor: pointer;
//opacity: 0.75;
//background-color: #00000099;
//flex-shrink: 0;
//background-image: url("/textures/ui/panel/player_icon_frame.png");
//background-position: center;
//background-size: 100% 100%;
&:hover {
//opacity: 1;
}
.icon {
position: relative;
background-size: cover;
background-position: center center;
//image-rendering: pixelated;
width: 49px;
height: 49px;
border-radius: 0px;
pointer-events: none;
}
.hp_bg {
position: absolute;
width: 100%;
height: 4px;
bottom: 0px;
left: 0.5px;
opacity: 2.5;
background-color: black;
border: 2px solid black;
}
.hp_delta {
position: absolute;
width: 100%;
height: 4px;
bottom: 0px;
left: 0.5px;
opacity: 2.5;
background-color: white;
transition: width 0.4s linear;
}
.hp_fill {
position: absolute;
width: 100%;
height: 4px;
bottom: 0px;
left: 0.5px;
opacity: 2.5;
background-color: red;
transition: width 0.1s ease-out;
//background: linear-gradient(90deg, rgba(230, 50, 50, 1) 0%, rgba(255, 100, 100, 1) 100%);
}
img {
position: relative;
background-size: contain;
background-repeat: no-repeat;
}
.player_level {
position: absolute;
right: 5px;
top: 2px;
text-align: center;
align-items: center;
font-size: 16px;
color: rgba(185, 255, 221, 0.75);
text-stroke: 4px black;
//text-shadow: 2px 2px 4px black;
//background-color: rgba(0, 0, 0, 0.3);
//padding: 15px;
flex-shrink: 0;
}
}