ui/scoreboardrow.razor.scss
ScoreboardRow {
width: 100%;
height: 50px;
background-color: rgba(255, 255, 255, 0.05);
border-radius: 4px;
// Layout
display: flex;
flex-direction: row;
align-items: center;
padding: 0 16px;
.player-info {
display: flex;
flex-grow: 1; // Takes up available space
align-items: center;
gap: 16px;
.avatar {
width: 32px;
height: 32px;
border-radius: 4px;
background-color: #555; // Placeholder color
}
.name {
font-size: 18px;
font-weight: 600;
color: #fff;
}
.vr-tag {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.5px;
color: #0b1020;
background-color: #8acaff;
padding: 2px 6px;
border-radius: 3px;
text-transform: uppercase;
}
}
.stats {
display: flex;
gap: 24px;
font-family: sans-serif; // Ensure a clean, readable font
.stat {
display: flex;
flex-direction: column; // Puts label (K) above value (10)
align-items: center;
width: 40px;
// The label (e.g., "K")
.label {
font-size: 10px;
color: rgba(255, 255, 255);
text-transform: uppercase;
letter-spacing: 1px;
}
// The actual value (e.g., "10")
.value {
font-size: 18px;
font-weight: 800;
color: #ffffff; // Pure white for maximum visibility
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
}
// Specific color accents
&.kills .value {
color: #8affaa;
}
// Bright, high-visibility green
&.deaths .value {
color: #ff8a8a;
}
// Bright, high-visibility red
&.ping .value {
color: #8acaff;
}
// Bright, high-visibility blue
}
}
}