Frederik Spirgi
7 lines
6.0 KiB
CSS
7 lines
6.0 KiB
CSS
:root { --matrix-rain:#55f570; } body { min-height:100vh; margin:0; padding:0 24px; color:#e6ffe9; background:#040604; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; } #matrix-canvas { position:fixed; inset:0; z-index:-1; width:100%; height:100%; opacity:.15; pointer-events:none; }.app-header { width:min(1120px,100%); min-height:72px; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:18px; border-bottom:1px solid #1c5727; }.wordmark { color:#f1fff2; text-decoration:none; font-weight:800; letter-spacing:-.06em; }.wordmark span { color:#56ed70; }.header-status { color:#7fc889; font-size:11px; letter-spacing:.06em; }.status-dot { display:inline-block; width:7px; height:7px; margin-right:5px; border-radius:50%; background:#54f570; box-shadow:0 0 9px #54f570; }.logout,.leave-button { border:1px solid #477d4f; background:transparent; color:#a3e9ac; padding:8px 11px; font:12px inherit; cursor:pointer; }
|
|
.menu-shell { width:min(1120px,100%); min-height:calc(100vh - 72px); margin:auto; display:grid; grid-template-columns:260px minmax(0,1fr); gap:clamp(30px,9vw,120px); align-items:center; }.leaderboard { background:#080d08; border:1px solid #2b7036; padding:20px; box-shadow:0 0 22px rgba(35,203,62,.1); }.panel-label { margin:0; color:#63c870; font-size:10px; letter-spacing:.13em; text-transform:uppercase; }.leaderboard h3 { margin:8px 0 16px; color:#8aff9a; font-size:17px; }.leaderboard ul { list-style:none; padding:0; margin:0; border-top:1px solid #1b4822; }.leaderboard li { padding:10px 0; border-bottom:1px solid #1b4822; color:#c4e6c8; font-size:13px; }.leaderboard li.you { color:#ffdc72; }.your-rank { margin-top:14px; color:#72d680; font-size:12px; }
|
|
.command-center { max-width:540px; }.command-center h1 { margin:12px 0 28px; color:#effff1; font-size:clamp(36px,6vw,62px); letter-spacing:-.08em; }.easter-open { color:#8aff9c; outline:1px dashed #55f570; outline-offset:8px; }.cursor { color:#55f570; animation:blink 1s step-end infinite; } .balance { display:grid; gap:6px; padding:17px 0; border-top:1px solid #326d3b; border-bottom:1px solid #326d3b; }.balance>span { color:#80be87; font-size:11px; letter-spacing:.12em; }.balance strong { color:#70f887; font-size:34px; letter-spacing:-.05em; }.lobby-buttons { display:flex; gap:10px; margin:24px 0; }
|
|
.secret-cue { position:fixed; z-index:21; top:50%; left:50%; color:#8aff9c; font:700 0/1 ui-monospace,SFMono-Regular,Consolas,monospace; text-shadow:0 0 24px #55f570; transform:translate(-50%,-50%); pointer-events:none; }.secret-cue-medium { font-size:clamp(90px,20vw,200px); animation:secret-letter 1s ease-out forwards; }.secret-cue-strong { font-size:clamp(150px,31vw,320px); animation:secret-letter 1s ease-out forwards; }.secret-flash { position:fixed; z-index:20; inset:0; pointer-events:none; opacity:0; background:rgba(122,255,145,.5); }.secret-flash-active { animation:secret-flash .28s ease-out forwards; }.secret-shake { animation:secret-shake .18s linear; }.secret-shake-strong { animation:secret-shake-big .38s linear; } @keyframes secret-letter { 0% { opacity:0; transform:translate(-50%,-50%) scale(.6); } 18% { opacity:1; } 100% { opacity:0; transform:translate(-50%,-50%) scale(1.1); } } @keyframes secret-flash { to { opacity:0; } } @keyframes secret-shake { 25% { transform:translateX(2px); } 50% { transform:translateX(-3px); } 75% { transform:translateX(2px); } } @keyframes secret-shake-big { 20% { transform:translateX(8px) rotate(.2deg); } 45% { transform:translateX(-10px) rotate(-.2deg); } 70% { transform:translateX(6px); } } @media (prefers-reduced-motion:reduce) { .secret-cue,.secret-shake,.secret-shake-strong,.secret-flash-active { animation:none; } }
|
|
button { min-height:44px; border:1px solid #52ee6b; background:#58ed70; color:#041005; padding:10px 16px; font:700 13px ui-monospace,SFMono-Regular,Consolas,monospace; cursor:pointer; letter-spacing:.04em; transition:transform .15s,box-shadow .15s,background .15s; } button:hover { transform:translateY(-2px); background:#8aff9c; box-shadow:0 0 16px rgba(82,242,106,.35); } button:disabled { opacity:.5; cursor:not-allowed; transform:none; }.secondary-action { background:#0b160c; color:#8aff9b; }.secondary-action:hover { background:#112914; }.host-form,.join-browser,.lobby-room { background:#080d08; border:1px solid #2d7437; padding:18px; box-shadow:0 0 20px rgba(32,187,56,.1); }.host-form { display:grid; gap:14px; }.lobby-visibility { display:flex; gap:10px; flex-wrap:wrap; color:#c7e5ca; font-size:12px; }.lobby-visibility label { border:1px solid #2d7437; padding:9px; cursor:pointer; }.lobby-visibility input { accent-color:#55f570; }.join-browser { display:grid; gap:16px; }.join-code-row { display:flex; gap:8px; }.join-code-row input { flex:1; min-width:0; background:#040604; border:1px solid #367d41; color:#dfffff; padding:11px; font:14px inherit; }.browser-header { display:flex; align-items:center; justify-content:space-between; border-top:1px solid #214d28; padding-top:14px; }.browser-header h2 { margin:0; color:#8aff9a; font-size:15px; }.public-lobbies { display:grid; gap:7px; }.public-lobby { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px; border:1px solid #234e2b; color:#c4e6c8; font-size:12px; }.public-lobby button { min-height:34px; padding:6px 10px; }.error-message { margin-top:12px; color:#ff7986; font-size:12px; }.lobby-room { margin-top:12px; }.lobby-header { display:flex; justify-content:flex-end; }.lobby-room h2 { color:#82f793; font-size:15px; overflow-wrap:anywhere; }.lobby-room p { color:#c6e9ca; font-size:13px; }.start-game { width:100%; margin-top:10px; } @keyframes blink { 50% { opacity:0; } }
|
|
@media(max-width:760px) { body { padding:0 16px; }.app-header { min-height:62px; }.header-status { display:none; }.menu-shell { min-height:0; padding:44px 0; grid-template-columns:1fr; gap:28px; }.leaderboard { order:2; }.command-center { max-width:none; }.command-center h1 { font-size:44px; }.lobby-buttons { flex-direction:column; }.lobby-buttons button { width:100%; }.join-code-row { flex-wrap:wrap; }.join-code-row button { width:100%; } }
|