167 lines
3.6 KiB
CSS
167 lines
3.6 KiB
CSS
|
:root {
|
||
|
|
--bg: #04070e;
|
||
|
|
--panel: rgba(8, 16, 28, 0.78);
|
||
|
|
--cyan: #19d3ff;
|
||
|
|
--green: #7af9c0;
|
||
|
|
--line: rgba(25, 211, 255, 0.30);
|
||
|
|
--text: #cfe9f5;
|
||
|
|
--dim: #6f93a6;
|
||
|
|
}
|
||
|
|
|
||
|
|
* { box-sizing: border-box; }
|
||
|
|
|
||
|
|
html, body {
|
||
|
|
margin: 0;
|
||
|
|
height: 100%;
|
||
|
|
background:
|
||
|
|
radial-gradient(1200px 700px at 50% -10%, rgba(25,211,255,0.10), transparent 60%),
|
||
|
|
var(--bg);
|
||
|
|
color: var(--text);
|
||
|
|
font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
|
||
|
|
-webkit-font-smoothing: antialiased;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
padding: 16px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.shell {
|
||
|
|
width: min(960px, 100%);
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.topbar {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
gap: 12px;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
.title { display: flex; align-items: baseline; gap: 12px; }
|
||
|
|
.logo {
|
||
|
|
font-weight: 800;
|
||
|
|
font-size: 26px;
|
||
|
|
letter-spacing: 6px;
|
||
|
|
color: var(--cyan);
|
||
|
|
text-shadow: 0 0 14px rgba(25, 211, 255, 0.7);
|
||
|
|
}
|
||
|
|
.sub { color: var(--dim); font-size: 13px; letter-spacing: 1px; }
|
||
|
|
|
||
|
|
.tabs { display: flex; gap: 8px; flex-wrap: wrap; }
|
||
|
|
.tab {
|
||
|
|
background: var(--panel);
|
||
|
|
border: 1px solid var(--line);
|
||
|
|
color: var(--text);
|
||
|
|
padding: 7px 12px;
|
||
|
|
border-radius: 8px;
|
||
|
|
font-size: 13px;
|
||
|
|
cursor: pointer;
|
||
|
|
transition: all 0.15s ease;
|
||
|
|
}
|
||
|
|
.tab:hover { border-color: var(--cyan); }
|
||
|
|
.tab.active {
|
||
|
|
border-color: var(--cyan);
|
||
|
|
color: #fff;
|
||
|
|
box-shadow: 0 0 14px rgba(25, 211, 255, 0.4);
|
||
|
|
background: rgba(25, 211, 255, 0.10);
|
||
|
|
}
|
||
|
|
|
||
|
|
.stage {
|
||
|
|
position: relative;
|
||
|
|
border: 1px solid var(--line);
|
||
|
|
border-radius: 12px;
|
||
|
|
overflow: hidden;
|
||
|
|
box-shadow: 0 0 40px rgba(25, 211, 255, 0.12), inset 0 0 60px rgba(0,0,0,0.6);
|
||
|
|
line-height: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
canvas {
|
||
|
|
display: block;
|
||
|
|
width: 100%;
|
||
|
|
height: auto;
|
||
|
|
background: var(--bg);
|
||
|
|
}
|
||
|
|
|
||
|
|
.overlay {
|
||
|
|
position: absolute;
|
||
|
|
inset: 0;
|
||
|
|
display: none;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
background: rgba(2, 6, 12, 0.55);
|
||
|
|
backdrop-filter: blur(3px);
|
||
|
|
line-height: normal;
|
||
|
|
}
|
||
|
|
.overlay.show { display: flex; animation: fade 0.25s ease; }
|
||
|
|
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
|
||
|
|
|
||
|
|
.card {
|
||
|
|
text-align: center;
|
||
|
|
padding: 32px 40px;
|
||
|
|
border: 1px solid var(--green);
|
||
|
|
border-radius: 14px;
|
||
|
|
background: rgba(6, 18, 16, 0.9);
|
||
|
|
box-shadow: 0 0 40px rgba(122, 249, 192, 0.35);
|
||
|
|
}
|
||
|
|
.card h1 {
|
||
|
|
margin: 0 0 6px;
|
||
|
|
font-size: 40px;
|
||
|
|
letter-spacing: 4px;
|
||
|
|
color: var(--green);
|
||
|
|
text-shadow: 0 0 18px rgba(122, 249, 192, 0.7);
|
||
|
|
}
|
||
|
|
.card p { margin: 0 0 20px; color: var(--dim); }
|
||
|
|
.btns { display: flex; gap: 12px; justify-content: center; }
|
||
|
|
|
||
|
|
button.ghost, button.primary {
|
||
|
|
border-radius: 9px;
|
||
|
|
padding: 10px 18px;
|
||
|
|
font-size: 14px;
|
||
|
|
cursor: pointer;
|
||
|
|
border: 1px solid var(--line);
|
||
|
|
background: transparent;
|
||
|
|
color: var(--text);
|
||
|
|
transition: all 0.15s ease;
|
||
|
|
}
|
||
|
|
button.primary {
|
||
|
|
border-color: var(--green);
|
||
|
|
color: #052;
|
||
|
|
background: var(--green);
|
||
|
|
font-weight: 700;
|
||
|
|
box-shadow: 0 0 18px rgba(122, 249, 192, 0.5);
|
||
|
|
}
|
||
|
|
button.ghost:hover { border-color: var(--cyan); }
|
||
|
|
button.primary:hover { filter: brightness(1.1); }
|
||
|
|
|
||
|
|
.bottombar {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
gap: 16px;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
font-size: 13px;
|
||
|
|
}
|
||
|
|
.mapinfo { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
|
||
|
|
.mname { color: var(--cyan); font-weight: 700; letter-spacing: 1px; }
|
||
|
|
.mhint { color: var(--dim); }
|
||
|
|
.keys { color: var(--dim); }
|
||
|
|
|
||
|
|
kbd {
|
||
|
|
display: inline-block;
|
||
|
|
min-width: 18px;
|
||
|
|
text-align: center;
|
||
|
|
padding: 2px 6px;
|
||
|
|
border: 1px solid var(--line);
|
||
|
|
border-bottom-width: 2px;
|
||
|
|
border-radius: 5px;
|
||
|
|
background: var(--panel);
|
||
|
|
color: var(--text);
|
||
|
|
font-size: 11px;
|
||
|
|
font-family: inherit;
|
||
|
|
}
|