1 + Round
Released
Fast-paced 1v1 arena FPS inspired by Gunfight, featuring short rounds, changing weapons, randomized layouts, etc
ui/mainmenuhost.razor.scss
MainMenuHost {
width: 100%;
height: 100%;
font-family: Arial;
font-weight: bold;
color: white;
pointer-events: none;
&.hidden {
display: none;
}
.menu-screen {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
overflow: hidden;
background-color: rgb( 10, 12, 15 );
pointer-events: all;
}
.menu-background,
.menu-overlay {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.menu-background {
object-fit: cover;
}
.menu-overlay {
background-color: rgba( 10, 12, 15, 0.84 );
}
.menu-shell {
position: relative;
z-index: 1;
width: 780px;
max-height: 90%;
padding: 36px;
flex-direction: column;
align-items: center;
}
.menu-shell-chrome {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba( 14, 16, 19, 0.95 );
border: 1px solid rgba( 255, 255, 255, 0.16 );
box-shadow: 0px 18px 70px rgba( 0, 0, 0, 0.48 );
pointer-events: none;
}
.menu-brand {
position: relative;
width: 100%;
margin-bottom: 24px;
flex-direction: column;
align-items: center;
}
.session-notice {
width: 100%;
padding: 12px;
margin-bottom: 14px;
font-size: 14px;
font-weight: normal;
background-color: rgba( 255, 255, 255, 0.08 );
}
.menu-logo {
position: relative;
width: 360px;
height: 120px;
margin-bottom: 8px;
object-fit: contain;
flex-shrink: 0;
}
.menu-title {
position: relative;
font-size: 62px;
font-weight: 900;
letter-spacing: 3px;
}
.menu-subtitle {
position: relative;
margin-top: 3px;
font-size: 14px;
letter-spacing: 5px;
opacity: 0.42;
}
NavigationHost {
position: relative;
width: 100%;
flex-grow: 1;
}
.navigator-canvas {
width: 100%;
flex-grow: 1;
}
.menu-page {
width: 100%;
flex-direction: column;
align-items: center;
row-gap: 14px;
}
.button-title,
.button-description,
.page-heading,
.page-copy {
position: relative;
}
.home-page {
padding-top: 4px;
}
.page-heading {
width: 100%;
margin-top: 4px;
font-size: 31px;
letter-spacing: 3px;
text-align: center;
}
.page-copy {
width: 100%;
margin-bottom: 14px;
font-size: 14px;
font-weight: normal;
text-align: center;
opacity: 0.52;
}
.menu-button {
width: 500px;
min-height: 88px;
padding: 18px 24px;
flex-direction: column;
justify-content: center;
background-color: rgba( 255, 255, 255, 0.07 );
border: 1px solid rgba( 255, 255, 255, 0.18 );
color: white;
text-decoration: none;
pointer-events: all;
cursor: pointer;
transition: background-color 0.10s ease, transform 0.10s ease;
&:hover {
background-color: rgba( 255, 255, 255, 0.16 );
}
}
.menu-button.primary,
.matchmaking-button {
background-color: rgba( 70, 105, 155, 0.18 );
&:hover {
background-color: rgba( 70, 105, 155, 0.34 );
}
}
.button-title {
font-size: 25px;
}
.button-description {
margin-top: 5px;
font-size: 14px;
font-weight: normal;
opacity: 0.55;
}
.menu-back,
.menu-primary {
min-width: 160px;
min-height: 48px;
padding: 13px 20px;
align-items: center;
justify-content: center;
border: 1px solid rgba( 255, 255, 255, 0.18 );
background-color: rgba( 255, 255, 255, 0.06 );
color: white;
text-decoration: none;
cursor: pointer;
pointer-events: all;
font-size: 14px;
letter-spacing: 2px;
&:hover {
background-color: rgba( 255, 255, 255, 0.14 );
}
}
.menu-primary {
min-width: 260px;
background-color: rgba( 75, 130, 95, 0.22 );
&:hover {
background-color: rgba( 75, 130, 95, 0.36 );
}
}
.client-message {
font-size: 26px;
opacity: 0.72;
}
// =========================================================
// SANDBOX SETUP
// =========================================================
.sandbox-setup-page {
width: 100%;
}
.setup-grid {
width: 100%;
flex-direction: row;
gap: 16px;
align-items: stretch;
}
.setup-section {
flex-grow: 1;
padding: 18px;
flex-direction: column;
gap: 12px;
background-color: rgba( 255, 255, 255, 0.035 );
border: 1px solid rgba( 255, 255, 255, 0.10 );
}
.bot-match-setup {
width: 500px;
flex-grow: 0;
}
.setup-section-title {
margin-bottom: 4px;
font-size: 12px;
letter-spacing: 3px;
opacity: 0.55;
}
.setup-row {
width: 100%;
flex-direction: column;
gap: 6px;
}
.setup-label {
font-size: 11px;
letter-spacing: 2px;
opacity: 0.58;
}
.setup-selector {
width: 100%;
height: 45px;
flex-direction: row;
align-items: stretch;
border: 1px solid rgba( 255, 255, 255, 0.13 );
background-color: rgba( 0, 0, 0, 0.24 );
}
.selector-arrow {
width: 44px;
align-items: center;
justify-content: center;
font-size: 23px;
cursor: pointer;
pointer-events: all;
background-color: rgba( 255, 255, 255, 0.04 );
&:hover {
background-color: rgba( 255, 255, 255, 0.14 );
}
}
.selector-value {
flex-grow: 1;
padding: 0 8px;
align-items: center;
justify-content: center;
text-align: center;
font-size: 13px;
}
.setup-actions {
width: 100%;
margin-top: 10px;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
// =========================================================
// ONLINE
// =========================================================
.online-page {
width: 100%;
}
.online-status-label {
margin-top: 8px;
font-size: 16px;
letter-spacing: 4px;
opacity: 0.72;
text-align: center;
}
.online-status-label.found {
opacity: 1;
font-size: 20px;
}
.online-status-label.error {
color: rgb( 235, 115, 105 );
opacity: 1;
}
.online-spinner {
height: 42px;
align-items: center;
justify-content: center;
font-size: 32px;
letter-spacing: 10px;
opacity: 0.55;
}
.player-card-row {
width: 100%;
margin: 8px 0 10px 0;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 18px;
}
.player-card {
width: 270px;
min-height: 125px;
padding: 18px;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: rgba( 255, 255, 255, 0.045 );
border: 1px solid rgba( 255, 255, 255, 0.12 );
}
.player-card.ready {
background-color: rgba( 75, 130, 95, 0.10 );
border-color: rgba( 125, 205, 145, 0.24 );
}
.player-card.searching {
opacity: 0.55;
}
.opponent-card {
background-color: rgba( 140, 75, 75, 0.10 );
border-color: rgba( 220, 130, 120, 0.22 );
}
.player-card-label {
font-size: 10px;
letter-spacing: 3px;
opacity: 0.45;
}
.player-card-name {
max-width: 230px;
margin-top: 8px;
font-size: 22px;
text-align: center;
overflow: hidden;
}
.player-card-state {
margin-top: 9px;
font-size: 10px;
letter-spacing: 3px;
opacity: 0.50;
}
.versus {
width: 48px;
justify-content: center;
align-items: center;
font-size: 20px;
opacity: 0.35;
}
.match-starting {
min-width: 280px;
padding: 10px 18px;
justify-content: center;
align-items: center;
background-color: rgba( 0, 0, 0, 0.28 );
border: 1px solid rgba( 255, 255, 255, 0.12 );
font-size: 15px;
letter-spacing: 3px;
}
.error-copy {
color: rgb( 235, 165, 155 );
opacity: 0.82;
}
.player-card.practicing {
background-color: rgba( 85, 105, 165, 0.13 );
border-color: rgba( 125, 155, 225, 0.28 );
}
.lobby-cards {
margin-top: 15px;
}
.online-subheading {
margin-top: 4px;
margin-bottom: 8px;
font-size: 13px;
letter-spacing: 3px;
opacity: 0.55;
}
.lobby-weapon-panel {
width: 100%;
max-width: 570px;
margin-top: 8px;
padding: 16px;
flex-direction: column;
gap: 8px;
background-color: rgba( 255, 255, 255, 0.035 );
border: 1px solid rgba( 255, 255, 255, 0.10 );
}
.lobby-note {
margin-top: 4px;
font-size: 10px;
font-weight: normal;
opacity: 0.43;
text-align: center;
}
.lobby-actions {
width: 100%;
max-width: 650px;
margin-top: 14px;
flex-direction: row;
gap: 10px;
}
.lobby-actions .menu-primary {
flex-grow: 1;
min-width: 0;
}
.warmup-action {
background-color: rgba( 70, 100, 155, 0.17 );
&:hover {
background-color: rgba( 70, 100, 155, 0.31 );
}
}
.secondary-action {
background-color: rgba( 255, 255, 255, 0.055 );
}
.ready-action {
background-color: rgba( 70, 135, 90, 0.18 );
&:hover {
background-color: rgba( 70, 135, 90, 0.34 );
}
&.active {
background-color: rgba( 80, 165, 105, 0.32 );
border-color: rgba( 135, 230, 155, 0.38 );
}
}
.lobby-ready-summary {
margin-top: 11px;
padding: 8px 14px;
font-size: 10px;
letter-spacing: 2px;
opacity: 0.55;
}
// =========================================================
// SETTINGS
// =========================================================
.settings-page {
width: 100%;
}
.settings-list {
width: 100%;
flex-direction: column;
gap: 10px;
}
.setting-row {
width: 100%;
min-height: 78px;
padding: 14px 16px;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 18px;
background-color: rgba( 255, 255, 255, 0.035 );
border: 1px solid rgba( 255, 255, 255, 0.10 );
}
.setting-copy {
flex-grow: 1;
flex-direction: column;
gap: 4px;
}
.setting-name {
font-size: 13px;
letter-spacing: 2px;
}
.setting-description {
font-size: 12px;
font-weight: normal;
opacity: 0.48;
}
.setting-control {
width: 190px;
height: 42px;
flex-direction: row;
align-items: stretch;
background-color: rgba( 0, 0, 0, 0.24 );
border: 1px solid rgba( 255, 255, 255, 0.13 );
}
.setting-step {
width: 44px;
align-items: center;
justify-content: center;
font-size: 22px;
cursor: pointer;
pointer-events: all;
background-color: rgba( 255, 255, 255, 0.04 );
&:hover {
background-color: rgba( 255, 255, 255, 0.14 );
}
}
.setting-value {
flex-grow: 1;
align-items: center;
justify-content: center;
font-size: 14px;
}
.setting-cycle {
min-width: 150px;
height: 42px;
padding: 0 14px;
align-items: center;
justify-content: center;
cursor: pointer;
pointer-events: all;
background-color: rgba( 255, 255, 255, 0.06 );
border: 1px solid rgba( 255, 255, 255, 0.13 );
font-size: 12px;
letter-spacing: 2px;
&:hover {
background-color: rgba( 255, 255, 255, 0.14 );
}
}
.settings-actions {
width: 100%;
margin-top: 10px;
flex-direction: row;
justify-content: space-between;
}
.reset-settings {
min-width: 190px;
}
}
// =========================================================
// BOT 0.5 - SANDBOX HARNESS
// =========================================================
.bot-setup-section {
min-width: 250px;
}
.bot-toggle {
width: 100%;
min-height: 62px;
padding: 10px 12px;
flex-direction: column;
justify-content: center;
gap: 3px;
border: 1px solid rgba( 255, 255, 255, 0.13 );
background-color: rgba( 0, 0, 0, 0.24 );
cursor: pointer;
pointer-events: all;
&:hover {
background-color: rgba( 255, 255, 255, 0.08 );
}
&.enabled {
border-color: rgba( 95, 210, 130, 0.48 );
background-color: rgba( 45, 125, 70, 0.18 );
}
&.disabled {
border-color: rgba( 255, 255, 255, 0.10 );
}
}
.bot-toggle-state {
font-size: 14px;
letter-spacing: 2px;
font-weight: 700;
}
.bot-toggle.enabled .bot-toggle-state {
color: rgba( 135, 235, 160, 1 );
}
.bot-toggle-copy {
font-size: 10px;
letter-spacing: 1px;
opacity: 0.54;
}
.setup-row-muted {
opacity: 0.42;
}
.bot-foundation-note {
margin-top: 4px;
padding: 10px 12px;
flex-direction: column;
gap: 4px;
border-left: 2px solid rgba( 255, 205, 85, 0.55 );
background-color: rgba( 255, 205, 85, 0.045 );
}
.bot-foundation-title {
font-size: 10px;
letter-spacing: 2px;
color: rgba( 255, 218, 125, 0.92 );
}
.bot-foundation-copy {
font-size: 10px;
line-height: 15px;
opacity: 0.56;
}