130 lines
2.5 KiB
CSS
130 lines
2.5 KiB
CSS
:root {
|
|
color-scheme: dark;
|
|
font-family:
|
|
Inter, Pretendard, "Noto Sans KR", system-ui, -apple-system, BlinkMacSystemFont,
|
|
"Segoe UI", sans-serif;
|
|
background: #080a07;
|
|
color: #fff5db;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
min-width: 320px;
|
|
min-height: 100%;
|
|
background: #080a07;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
min-width: 320px;
|
|
min-height: 100vh;
|
|
overflow: hidden;
|
|
}
|
|
|
|
button,
|
|
input,
|
|
textarea {
|
|
font: inherit;
|
|
}
|
|
|
|
button {
|
|
border: 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
button:focus-visible,
|
|
input:focus-visible,
|
|
textarea:focus-visible {
|
|
outline: 3px solid rgb(238 185 73 / 0.46);
|
|
outline-offset: 3px;
|
|
}
|
|
|
|
#app {
|
|
--arena-gap: 18px;
|
|
--score-band-height: 134px;
|
|
--score-panel-left: 14px;
|
|
--score-panel-width: 260px;
|
|
--score-rail-width: calc(var(--score-panel-left) + var(--score-panel-width));
|
|
--drawer-width: min(430px, 100vw);
|
|
--drawer-live-width: min(340px, calc(100vw - 48px));
|
|
position: relative;
|
|
min-height: 100vh;
|
|
overflow: hidden;
|
|
background:
|
|
linear-gradient(180deg, rgb(8 10 7 / 0.18), rgb(3 5 4 / 0.84)),
|
|
#080a07;
|
|
}
|
|
|
|
#app.match-live {
|
|
--drawer-width: var(--drawer-live-width);
|
|
}
|
|
|
|
.arena-shell {
|
|
position: fixed;
|
|
inset: 0;
|
|
display: grid;
|
|
place-items: center;
|
|
overflow: hidden;
|
|
background: #090b08;
|
|
}
|
|
|
|
.arena-shell::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 1;
|
|
background:
|
|
radial-gradient(circle at 50% 50%, rgb(255 211 122 / 0.06), transparent 42%),
|
|
linear-gradient(90deg, rgb(3 5 4 / 0.48), rgb(3 5 4 / 0.08) 45%, rgb(3 5 4 / 0.48)),
|
|
linear-gradient(180deg, rgb(3 5 4 / 0.08), rgb(3 5 4 / 0.5));
|
|
pointer-events: none;
|
|
transition:
|
|
background 520ms ease,
|
|
opacity 520ms ease;
|
|
}
|
|
|
|
#app.match-live .arena-shell::before {
|
|
opacity: 0.24;
|
|
}
|
|
|
|
#app.match-live .arena-shell {
|
|
place-items: center;
|
|
}
|
|
|
|
#game {
|
|
position: relative;
|
|
z-index: 0;
|
|
width: max(100vw, 100vh);
|
|
height: max(100vw, 100vh);
|
|
overflow: hidden;
|
|
opacity: 0.68;
|
|
filter: saturate(1) contrast(1.08) brightness(1.08);
|
|
transform: scale(1.04);
|
|
transform-origin: center;
|
|
transition:
|
|
width 620ms cubic-bezier(0.2, 0.8, 0.2, 1),
|
|
height 620ms cubic-bezier(0.2, 0.8, 0.2, 1),
|
|
opacity 520ms ease,
|
|
filter 520ms ease,
|
|
transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
|
|
}
|
|
|
|
#app.match-live #game {
|
|
width: min(100vw, 100vh);
|
|
height: min(100vw, 100vh);
|
|
margin-left: 0;
|
|
opacity: 1;
|
|
filter: none;
|
|
transform: scale(1);
|
|
}
|
|
|
|
#game canvas {
|
|
display: block;
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
image-rendering: pixelated;
|
|
}
|