269 lines
4.3 KiB
CSS
269 lines
4.3 KiB
CSS
html, body {
|
|
margin: 0;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
background: #000;
|
|
}
|
|
#game {
|
|
display: block;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background: #000;
|
|
touch-action: none;
|
|
}
|
|
.joystick-base {
|
|
position: fixed;
|
|
width: 120px;
|
|
height: 120px;
|
|
border-radius: 50%;
|
|
background: rgba(255, 255, 255, 0.12);
|
|
border: 2px solid rgba(255, 255, 255, 0.25);
|
|
pointer-events: none;
|
|
display: none;
|
|
z-index: 5;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
.joystick-thumb {
|
|
position: fixed;
|
|
width: 44px;
|
|
height: 44px;
|
|
border-radius: 50%;
|
|
background: rgba(255, 255, 255, 0.45);
|
|
pointer-events: none;
|
|
display: none;
|
|
z-index: 6;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
#fullscreen {
|
|
position: fixed;
|
|
right: 12px;
|
|
bottom: 12px;
|
|
z-index: 10;
|
|
padding: 8px 14px;
|
|
border: 1px solid #333;
|
|
border-radius: 4px;
|
|
background: #fff;
|
|
cursor: pointer;
|
|
font: 14px sans-serif;
|
|
}
|
|
#lobby {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 20;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: rgba(0, 0, 0, 0.72);
|
|
}
|
|
#lobby.hidden {
|
|
display: none;
|
|
}
|
|
#lobby-panel {
|
|
width: min(420px, 90vw);
|
|
padding: 28px 32px;
|
|
border: 1px solid #222;
|
|
border-radius: 8px;
|
|
background: #0c0c0e;
|
|
color: #eee;
|
|
font: 15px/1.5 sans-serif;
|
|
}
|
|
#lobby-panel h1 {
|
|
margin: 0 0 4px;
|
|
font-size: 34px;
|
|
letter-spacing: 6px;
|
|
color: #fff;
|
|
}
|
|
#lobby-panel .sub {
|
|
margin: 0 0 20px;
|
|
color: #888;
|
|
font-size: 13px;
|
|
}
|
|
#lobby-panel label {
|
|
display: block;
|
|
margin: 12px 0 4px;
|
|
font-size: 13px;
|
|
color: #aaa;
|
|
}
|
|
#lobby-panel input {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 9px 10px;
|
|
border: 1px solid #333;
|
|
border-radius: 4px;
|
|
background: #111;
|
|
color: #eee;
|
|
font: 14px sans-serif;
|
|
}
|
|
#lobby-panel .row {
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
#lobby-panel .row > div {
|
|
flex: 1;
|
|
}
|
|
.mode {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin-top: 22px;
|
|
}
|
|
.mode button {
|
|
flex: 1;
|
|
padding: 11px;
|
|
border: 0;
|
|
border-radius: 4px;
|
|
color: #fff;
|
|
font: 15px sans-serif;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
}
|
|
#lobby-host {
|
|
background: #1971c2;
|
|
}
|
|
#lobby-host:hover {
|
|
background: #228be6;
|
|
}
|
|
#lobby-join {
|
|
background: #2f9e44;
|
|
}
|
|
#lobby-join:hover {
|
|
background: #37b24d;
|
|
}
|
|
#join-form {
|
|
margin-top: 14px;
|
|
}
|
|
#join-form.hidden {
|
|
display: none;
|
|
}
|
|
#lobby-join-confirm {
|
|
flex: 0 0 auto;
|
|
padding: 9px 18px;
|
|
border: 0;
|
|
border-radius: 4px;
|
|
background: #2f9e44;
|
|
color: #fff;
|
|
font: 14px sans-serif;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
}
|
|
#lobby-join-confirm:hover {
|
|
background: #37b24d;
|
|
}
|
|
#prejoin.hidden,
|
|
#inroom.hidden {
|
|
display: none;
|
|
}
|
|
.room-code {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-top: 12px;
|
|
}
|
|
#room-code {
|
|
flex: 1;
|
|
padding: 9px 10px;
|
|
border: 1px solid #333;
|
|
border-radius: 4px;
|
|
background: #111;
|
|
color: #f5c518;
|
|
font: 18px monospace;
|
|
letter-spacing: 2px;
|
|
text-align: center;
|
|
}
|
|
#room-copy {
|
|
padding: 8px 12px;
|
|
border: 1px solid #333;
|
|
border-radius: 4px;
|
|
background: #111;
|
|
color: #eee;
|
|
font: 13px sans-serif;
|
|
cursor: pointer;
|
|
}
|
|
#room-copy:hover {
|
|
background: #1a1a1f;
|
|
}
|
|
#lobby-start {
|
|
width: 100%;
|
|
margin-top: 10px;
|
|
padding: 11px;
|
|
border: 0;
|
|
border-radius: 4px;
|
|
background: #1971c2;
|
|
color: #fff;
|
|
font: 15px sans-serif;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
}
|
|
#lobby-start:disabled {
|
|
background: #25252a;
|
|
color: #666;
|
|
cursor: not-allowed;
|
|
}
|
|
#lobby-status {
|
|
margin-top: 14px;
|
|
font-size: 13px;
|
|
color: #8a8a8a;
|
|
min-height: 18px;
|
|
}
|
|
#lobby-status.error {
|
|
color: #e8590c;
|
|
}
|
|
#lobby-players {
|
|
margin-top: 14px;
|
|
font-size: 13px;
|
|
color: #bbb;
|
|
min-height: 18px;
|
|
}
|
|
#gameover {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 20;
|
|
display: none;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: rgba(0, 0, 0, 0.78);
|
|
}
|
|
#gameover.show {
|
|
display: flex;
|
|
}
|
|
#gameover-panel {
|
|
width: min(380px, 90vw);
|
|
padding: 28px 32px;
|
|
border: 1px solid #333;
|
|
border-radius: 8px;
|
|
background: #0c0c0e;
|
|
color: #eee;
|
|
text-align: center;
|
|
font: 15px/1.5 sans-serif;
|
|
}
|
|
#gameover-panel h2 {
|
|
margin: 0 0 6px;
|
|
font-size: 36px;
|
|
letter-spacing: 5px;
|
|
color: #e03131;
|
|
}
|
|
#gameover-scores {
|
|
margin: 16px 0;
|
|
font-size: 14px;
|
|
color: #bbb;
|
|
min-height: 40px;
|
|
}
|
|
#gameover-wait {
|
|
min-height: 20px;
|
|
margin-top: 10px;
|
|
font-size: 13px;
|
|
color: #8a8a8a;
|
|
}
|
|
#gameover-again {
|
|
width: 100%;
|
|
padding: 11px;
|
|
border: 0;
|
|
border-radius: 4px;
|
|
background: #2f9e44;
|
|
color: #fff;
|
|
font: 15px sans-serif;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
}
|
|
#gameover-again:hover {
|
|
background: #37b24d;
|
|
} |