139 lines
2.6 KiB
CSS
Executable File
139 lines
2.6 KiB
CSS
Executable File
:root{
|
|
--bg:#000;
|
|
--panel:#0b1020cc;
|
|
--text:#e8f0ff;
|
|
--muted:#a8b6d8;
|
|
--accent:#7cffc9;
|
|
--accent2:#7cb7ff;
|
|
--danger:#ff6b6b;
|
|
--shadow: 0 12px 40px rgba(0,0,0,.55);
|
|
--r: 18px;
|
|
}
|
|
|
|
html,body{
|
|
height:100%;
|
|
margin:0;
|
|
background:var(--bg);
|
|
color:var(--text);
|
|
font-family:system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
|
|
}
|
|
|
|
.stage{
|
|
position:fixed; inset:0;
|
|
display:grid; place-items:center;
|
|
overflow:hidden;
|
|
touch-action:manipulation;
|
|
user-select:none;
|
|
background:#000;
|
|
}
|
|
|
|
.hint{
|
|
position:fixed;
|
|
top: max(10px, env(safe-area-inset-top));
|
|
left: 0;
|
|
right: 0;
|
|
text-align:center;
|
|
opacity:.55;
|
|
font-size:12px;
|
|
color:var(--muted);
|
|
pointer-events:none;
|
|
}
|
|
|
|
.displayWrap{
|
|
width:min(96vw, 720px);
|
|
aspect-ratio: 520 / 360;
|
|
position:relative;
|
|
display:grid; place-items:center;
|
|
}
|
|
|
|
.display{
|
|
width:100%;
|
|
height:100%;
|
|
display:block;
|
|
filter: drop-shadow(0 18px 40px rgba(0,0,0,.70));
|
|
}
|
|
|
|
/* Touch overlay */
|
|
.overlay{
|
|
position:absolute;
|
|
left: max(12px, env(safe-area-inset-left));
|
|
right: max(12px, env(safe-area-inset-right));
|
|
bottom: max(12px, env(safe-area-inset-bottom));
|
|
display:flex;
|
|
gap:10px;
|
|
align-items:center;
|
|
justify-content:space-between;
|
|
background:var(--panel);
|
|
border:1px solid rgba(255,255,255,.10);
|
|
border-radius: var(--r);
|
|
padding:10px 12px;
|
|
box-shadow: var(--shadow);
|
|
backdrop-filter: blur(10px);
|
|
-webkit-backdrop-filter: blur(10px);
|
|
opacity:0;
|
|
transform: translateY(10px);
|
|
pointer-events:none;
|
|
transition: opacity .18s ease, transform .18s ease;
|
|
}
|
|
|
|
.overlay.show{
|
|
opacity:1;
|
|
transform: translateY(0);
|
|
pointer-events:auto;
|
|
}
|
|
|
|
.overlay .left,
|
|
.overlay .right{
|
|
display:flex;
|
|
gap:10px;
|
|
align-items:center;
|
|
flex-wrap:wrap;
|
|
}
|
|
|
|
a.btn, button.btn{
|
|
appearance:none;
|
|
border:1px solid rgba(255,255,255,.14);
|
|
background: rgba(255,255,255,.06);
|
|
color:var(--text);
|
|
border-radius: 14px;
|
|
padding:10px 12px;
|
|
font-size:14px;
|
|
text-decoration:none;
|
|
line-height:1;
|
|
display:inline-flex;
|
|
align-items:center;
|
|
gap:8px;
|
|
cursor:pointer;
|
|
}
|
|
|
|
a.btn:active, button.btn:active{ transform: translateY(1px); }
|
|
|
|
.pill{
|
|
font-size:12px;
|
|
color:var(--muted);
|
|
padding:8px 10px;
|
|
border-radius:999px;
|
|
border:1px solid rgba(255,255,255,.12);
|
|
background: rgba(255,255,255,.04);
|
|
display:inline-flex;
|
|
align-items:center;
|
|
gap:8px;
|
|
}
|
|
|
|
.dot{
|
|
width:9px;
|
|
height:9px;
|
|
border-radius:99px;
|
|
background: var(--accent2);
|
|
box-shadow: 0 0 0 3px rgba(124,183,255,.15);
|
|
}
|
|
.dot.on{
|
|
background: var(--accent);
|
|
box-shadow: 0 0 0 3px rgba(124,255,201,.15);
|
|
}
|
|
.dot.off{
|
|
background: var(--danger);
|
|
box-shadow: 0 0 0 3px rgba(255,107,107,.12);
|
|
}
|
|
|