traininghud.razor.scss
TrainingHud {
.elimination-notice { position: absolute; right: 34px; top: 80px; padding: 12px 18px; background-color: #151222ed; border-left: 3px solid #61dedb; color: #a3f8ef; font-size: 16px; font-weight: bold; letter-spacing: 1px; }
position: absolute; width: 100%; height: 100%; color: #f5f3fa; font-family: Arial;
.damage { position: absolute; width: 100%; height: 100%; border: 7px solid #ff329d88; justify-content: center; padding-top: 155px; color: #ffafd9; font-size: 17px; font-weight: bold; letter-spacing: 2px; }
.result { position: absolute; top: 29%; left: 25%; width: 50%; padding: 30px; align-items: center; flex-direction: column; gap: 14px; background-color: #151222ee; border-top: 3px solid #61dedb; font-size: 14px; letter-spacing: 2px; }
.result-title { font-size: 48px; font-weight: 900; color: #61dedb; }
.result-reason { text-align: center; font-size: 13px; letter-spacing: 1px; color: #dedbe8; }
.result-progress { font-size: 22px; font-weight: bold; color: #f5f3fa; letter-spacing: 1px; margin-top: 4px; }
.result-stats { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 16px; font-size: 16px; letter-spacing: 0px; color: #dedbe8; }
.retry { margin-top: 12px; color: #ff8dc8; font-size: 18px; }
.hit-track { position: absolute; top: 148px; left: 34px; width: 160px; gap: 5px; }
.health-track { width: 160px; height: 6px; background-color: #514960; border-radius: 2px; }
.health-fill { height: 100%; background-color: #61dedb; border-radius: 2px; }
.pip { flex-grow: 1; flex-shrink: 1; height: 6px; background-color: #61dedb; border-radius: 2px; }
.tagged { background-color: #ff329d; }
.reload-track { width: 180px; height: 5px; margin-top: 12px; background-color: #514960; border-radius: 2px; }
.reload-fill { height: 100%; background-color: #61dedb; border-radius: 2px; }
.low .ammo { color: #ffabd4; }
.title { position: absolute; top: 30px; left: 34px; flex-direction: column; }
.brand { font-size: 25px; font-weight: 900; letter-spacing: 3px; }
.roster { position: absolute; left: 34px; bottom: 100px; flex-direction: column; gap: 8px; font-size: 20px; padding: 14px 18px; background-color: #151222e8; border-left: 3px solid #61dedb; border-radius: 3px; }
.hint { font-size: 16px; color: #dedbe8; }
.match { position: absolute; top: 92px; left: 34px; color: #61dedb; font-size: 14px; }
.match.active { align-items: center; gap: 14px; padding: 6px 12px; background-color: #151222ed; border-radius: 3px; }
.round-clock { font-size: 28px; font-weight: 900; min-width: 78px; }
.round-clock.warning { color: #ffd36b; }
.round-clock.urgent { color: #ffabd4; }
.round-detail { flex-direction: column; gap: 3px; }
.round-objective { color: #dedbe8; font-size: 11px; letter-spacing: 1px; }
.location { color: #61dedb; font-size: 13px; letter-spacing: 2px; margin-top: 6px; }
.crosshair { position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; margin-left: -14px; margin-top: -14px; justify-content: center; align-items: center; font-size: 28px; color: white; }
.hit { color: #ff329d; transform: scale(1.5); }
.aim-ammo { position: absolute; top: 55%; width: 100%; justify-content: center; color: #ffd36b; font-size: 14px; font-weight: bold; letter-spacing: 1px; label { padding: 5px 9px; background-color: #151222d9; border-radius: 3px; } }
.aim-ammo.reloading { color: #a3f8ef; }
.confirmed-out { color: #ffd36b; transform: scale(1.6); }
.stats { position: absolute; right: 34px; top: 30px; gap: 22px; font-size: 16px; font-weight: bold; }
.weapon { position: absolute; right: 34px; bottom: 95px; flex-direction: column; align-items: flex-end; padding: 18px 24px; background-color: #151222e8; border-right: 4px solid #ff329d; }
.name { font-size: 13px; letter-spacing: 2px; color: #61dedb; }
.ammo { font-size: 46px; font-weight: 900; align-items: center; gap: 8px; }
.reserve { font-size: 24px; color: #aaa5b8; }
.context-prompt { position: absolute; bottom: 90px; width: 100%; justify-content: center; font-size: 16px; font-weight: bold; letter-spacing: 1px; color: #a3f8ef; label { padding: 10px 16px; background-color: #151222ed; border-bottom: 2px solid #61dedb; border-radius: 4px; } }
.controls { flex-direction: column; align-items: center; gap: 3px; position: absolute; bottom: 16px; left: 8%; width: 84%; padding: 10px 12px; background-color: #151222ed; border-radius: 4px; justify-content: center; font-size: 16px; letter-spacing: 1px; color: #f5f3fa; }
}
TrainingHud {
.leaderboard { position: absolute; top: 83px; right: 34px; width: 330px; flex-direction: column; padding: 12px; background-color: #151222e8; border-top: 2px solid #61dedb; font-size: 13px; }
.board-title { font-weight: bold; color: #61dedb; margin-bottom: 8px; }
.board-row { flex-direction: row; padding: 5px 0px; label { width: 46px; text-align: right; } label:first-child { flex-grow: 1; text-align: left; } }
.board-heading { color: #aaa5b8; font-size: 11px; }
.board-row.you { color: #ff8dc8; }
}
TrainingHud {
.controls-overlay { position: absolute; width: 100%; height: 100%; background-color: #090815e8; z-index: 100; pointer-events: all; justify-content: center; align-items: center; }
.controls-menu { width: 620px; max-height: 90%; background-color: #191526; border-top: 3px solid #61dedb; padding: 24px; flex-direction: column; gap: 12px; font-size: 14px; }
.binding-list { flex-direction: column; overflow: scroll; flex-shrink: 1; }
.binding-row { justify-content: space-between; align-items: center; padding: 4px; }
.controls-menu button { background-color: #30283e; border: 1px solid #62536f; padding: 7px 16px; min-width: 130px; color: white; cursor: pointer; }
.controls-menu button:hover { background-color: #4b3c61; }
.binding-buttons { justify-content: space-between; }
}
TrainingHud {
.hit { transform: scale(1); }
.damage { border: 0px; width: 100%; height: 40px; top: 155px; padding-top: 0px; font-size: 13px; letter-spacing: 1px; }
}
.timer-options { gap: 10px; }
.controls-menu .timer-options button { flex-grow: 1; }
.controls-menu .timer-options button.selected { background-color: #296361; border-color: #61dedb; color: white; }
TrainingHud .player-name { background-color: #0c1420; color: white; border: 1px solid #61dedb; min-height: 42px; padding: 10px; font-size: 18px; flex-shrink: 0; }
TrainingHud .menu-help { color: #c5c1ce; font-size: 13px; flex-shrink: 0; }
TrainingHud .controls-menu { width: 700px; }
TrainingHud .controls-menu { height: 90%; gap: 8px; }
TrainingHud .controls-menu label { flex-shrink: 0; }
TrainingHud .controls-menu button { min-height: 36px; flex-shrink: 0; align-items: center; }
TrainingHud .binding-list { flex-grow: 1; min-height: 110px; }
TrainingHud .binding-row { min-height: 34px; flex-shrink: 0; }
TrainingHud .binding-row button { min-height: 28px; }
TrainingHud .timer-options, TrainingHud .binding-buttons { flex-shrink: 0; }
TrainingHud .controls-menu { overflow: scroll; }
TrainingHud .credits { flex-direction: column; gap: 8px; padding: 12px; background-color: #10101a; flex-shrink: 0; }