tetris klaar
This commit is contained in:
martijn.diersmann@pm.me
@@ -0,0 +1,403 @@
|
||||
/* ---------- basis ---------- */
|
||||
:root {
|
||||
--bg: #070a11;
|
||||
--panel: #10141f;
|
||||
--panel-border: #1e2637;
|
||||
--text: #dbe4f0;
|
||||
--muted: #75839c;
|
||||
--accent: #35d23d;
|
||||
--accent2: #3c6cf0;
|
||||
--radius: 10px;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
background: radial-gradient(1200px 800px at 50% -10%, #152137 0%, var(--bg) 60%);
|
||||
color: var(--text);
|
||||
font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
padding: 20px 16px 60px;
|
||||
}
|
||||
|
||||
kbd {
|
||||
font-family: inherit;
|
||||
font-size: 0.7em;
|
||||
background: #1d2638;
|
||||
border: 1px solid #2c3952;
|
||||
border-radius: 4px;
|
||||
padding: 1px 6px;
|
||||
color: var(--muted);
|
||||
margin-left: 6px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* ---------- layout ---------- */
|
||||
.layout {
|
||||
display: grid;
|
||||
grid-template-columns: 210px 300px 260px;
|
||||
gap: 22px;
|
||||
justify-content: center;
|
||||
align-items: start;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.title {
|
||||
text-align: center;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 900;
|
||||
letter-spacing: 0.35em;
|
||||
margin-bottom: 14px;
|
||||
color: var(--text);
|
||||
text-shadow: 0 0 18px rgba(53, 210, 61, 0.35), 0 0 40px rgba(60, 108, 240, 0.25);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.title span {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
/* ---------- panelen ---------- */
|
||||
.panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.box {
|
||||
background: linear-gradient(180deg, var(--panel) 0%, #0d111b 100%);
|
||||
border: 1px solid var(--panel-border);
|
||||
border-radius: var(--radius);
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.box-title {
|
||||
font-size: 0.78rem;
|
||||
letter-spacing: 0.28em;
|
||||
color: var(--muted);
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.box canvas {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* statistieken */
|
||||
.stats {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.stat {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.stat:last-child {
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.stat .label {
|
||||
color: var(--muted);
|
||||
font-size: 0.85rem;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
.stat .value {
|
||||
font-size: 1.35rem;
|
||||
font-weight: 800;
|
||||
font-variant-numeric: tabular-nums;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
/* ---------- speelbord ---------- */
|
||||
.play-area {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.board-wrap {
|
||||
position: relative;
|
||||
border-radius: var(--radius);
|
||||
overflow: hidden;
|
||||
box-shadow: 0 0 0 1px var(--panel-border), 0 20px 60px rgba(0, 0, 0, 0.55);
|
||||
}
|
||||
|
||||
#canvas-board {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
image-rendering: pixelated;
|
||||
background: #0a0e17;
|
||||
}
|
||||
|
||||
/* ---------- overlay ---------- */
|
||||
.overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(5, 8, 14, 0.72);
|
||||
backdrop-filter: blur(4px);
|
||||
-webkit-backdrop-filter: blur(4px);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.overlay.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.overlay-card {
|
||||
background: linear-gradient(180deg, #141a29, #0d1120);
|
||||
border: 1px solid var(--panel-border);
|
||||
border-radius: 14px;
|
||||
padding: 26px 30px;
|
||||
width: 84%;
|
||||
text-align: center;
|
||||
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.overlay-card h2 {
|
||||
font-size: 1.7rem;
|
||||
letter-spacing: 0.24em;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#overlay-sub {
|
||||
color: var(--muted);
|
||||
|
||||
#name-form label {
|
||||
font-size: 0.8rem;
|
||||
color: var(--muted);
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
|
||||
#name-form.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#name-input {
|
||||
background: #0a0f1a;
|
||||
border: 1px solid #2c3952;
|
||||
border-radius: 7px;
|
||||
color: var(--text);
|
||||
font-size: 1rem;
|
||||
padding: 9px 12px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#name-input:focus {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #ff6b6b;
|
||||
font-size: 0.8rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.overlay-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
border-radius: 8px;
|
||||
padding: 11px 18px;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.04em;
|
||||
color: var(--text);
|
||||
background: #1d2638;
|
||||
border: 1px solid #2c3952;
|
||||
transition: transform 0.05s ease, filter 0.15s ease;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
filter: brightness(1.15);
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.btn-accent {
|
||||
background: linear-gradient(180deg, var(--accent), #1f9c26);
|
||||
border-color: transparent;
|
||||
color: #05160b;
|
||||
}
|
||||
|
||||
.overlay-hint {
|
||||
margin-top: 14px;
|
||||
font-size: 0.72rem;
|
||||
color: var(--muted);
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
/* ---------- highscores ---------- */
|
||||
.highscore-list {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
.highscore-list li {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 10px;
|
||||
font-size: 0.9rem;
|
||||
padding: 6px 8px;
|
||||
border-radius: 6px;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
}
|
||||
|
||||
.highscore-list li.no-scores {
|
||||
color: var(--muted);
|
||||
font-style: italic;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.hs-rank {
|
||||
width: 20px;
|
||||
color: var(--muted);
|
||||
font-weight: 700;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.hs-name {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.hs-score {
|
||||
font-weight: 800;
|
||||
font-variant-numeric: tabular-nums;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
/* ---------- besturing ---------- */
|
||||
.controls-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.controls-table td {
|
||||
padding: 4px 0;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.controls-table td:first-child {
|
||||
width: 70px;
|
||||
color: var(--text);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* ---------- touch-controls (mobiel) ---------- */
|
||||
.touch-controls {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ---------- responsief ---------- */
|
||||
@media (max-width: 880px) {
|
||||
.layout {
|
||||
grid-template-columns: 300px;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.panel-left,
|
||||
.panel-right {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
width: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.panel-left .box:first-child {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.touch-controls {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
padding: 10px 12px 14px;
|
||||
background: linear-gradient(180deg, transparent, rgba(7, 10, 17, 0.95) 30%);
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
.touch-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 8px;
|
||||
max-width: 360px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.t-btn {
|
||||
padding: 14px 0;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
color: var(--text);
|
||||
background: rgba(29, 38, 56, 0.85);
|
||||
border: 1px solid #2c3952;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
.t-btn:active {
|
||||
background: var(--accent2);
|
||||
}
|
||||
|
||||
body {
|
||||
padding-bottom: 180px;
|
||||
}
|
||||
}
|
||||
|
||||
margin-bottom: 16px;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
#name-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
text-align: left;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
Reference in New Issue
Block a user