initial commit
This commit is contained in:
armel committed
commit
e8c3f9862a
193 files changed
+29795
No files matched your search
@@ -0,0 +1,245 @@
|
||||
html, body {
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: #000;
|
||||
}
|
||||
#game {
|
||||
display: block;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: #000;
|
||||
}
|
||||
#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;
|
||||
}
|
||||
Reference in new issue
Block a user