html {
background: #888888;
height: 100%;
}
html.eth{
background:#888888
}
html.tz{
background:white;
}
html.opt{
background:black;
}
*:hover, * {
cursor: url("/cursor.svg"), auto !important;
}
body {
cursor: url("/cursor.svg"), auto;
height: 100%;
margin: 0;
display: flex;
align-content: center;
justify-content: center;
flex-wrap: nowrap;
padding: 0 20px 0 20px;
align-items: center;
transform-origin: left;
}
.dialog {
position: relative;
height: 70px;
background: white;
box-shadow: 0 0 0 4px white, 0 0 0 6px black, 4px 4px 0 6px black;
border: 4px solid black;
display: flex;
align-content: center;
justify-content: center;
flex-wrap: nowrap;
width: max-content;
align-items: center;
transform-origin: center;
gap: 30px;
/*padding: 15px 33px 15px 25px;*/
/*padding: 21px 39px 21px 31px;*/
padding: 24px 42px 24px 34px;
}
button {
background: transparent;
border: 2px solid black;
height: 26px;
cursor: pointer;
padding-left: 30px;
padding-right: 30px;
}
button:nth-of-type(1) {
background: white;
border: none;
box-shadow:
0 -8px 0 -4px white, 0 8px 0 -4px white,
0 -4px 0 -2px white, 0 4px 0 -2px white,
-4px -8px 0 -4px black, -4px 8px 0 -4px black, 4px -8px 0 -4px black, 4px 8px 0 -4px black,
-6px -4px 0 -4px black, -6px 4px 0 -4px black, 6px -4px 0 -4px black, 6px 4px 0 -4px black,
0 -10px 0 -4px black, 0 10px 0 -4px black;
}
button:nth-of-type(1):hover {
background: black;
border: none;
box-shadow:
0 -8px 0 -4px black, 0 8px 0 -4px black,
0 -4px 0 -2px black, 0 4px 0 -2px black,
-4px -8px 0 -4px black, -4px 8px 0 -4px black, 4px -8px 0 -4px black, 4px 8px 0 -4px black,
-6px -4px 0 -4px black, -6px 4px 0 -4px black, 6px -4px 0 -4px black, 6px 4px 0 -4px black,
0 -10px 0 -4px black, 0 10px 0 -4px black;
}
button:nth-of-type(1):hover svg{
fill: white
}
button:nth-of-type(2) {
background: white;
border: none;
box-shadow:
0 -8px 0 -4px white, 0 8px 0 -4px white,
0 -4px 0 -2px white, 0 4px 0 -2px white,
-4px -8px 0 -4px black, -4px 8px 0 -4px black, 4px -8px 0 -4px black, 4px 8px 0 -4px black,
-6px -4px 0 -4px black, -6px 4px 0 -4px black, 6px -4px 0 -4px black, 6px 4px 0 -4px black,
0 -10px 0 -4px black, 0 10px 0 -4px black,
-2px -12px 0 -4px white,-2px 12px 0 -4px white,2px -12px 0 -4px white,2px 12px 0 -4px white,
-6px -10px 0 -4px white,-6px 10px 0 -4px white,6px -10px 0 -4px white,6px 10px 0 -4px white,
-8px -6px 0 -4px white, -8px 6px 0 -4px white, 8px -6px 0 -4px white, 8px 6px 0 -4px white,
-10px -4px 0 0 black,-10px 4px 0 0 black,10px -4px 0 0 black,10px 4px 0 0 black,
-8px -8px 0 0 black, -8px 8px 0 0 black, 8px -8px 0 0 black, 8px 8px 0 0 black,
-6px -10px 0 0 black,-6px 10px 0 0 black,6px -10px 0 0 black,6px 10px 0 0 black,
-4px -12px 0 0 black,-4px 12px 0 0 black,4px -12px 0 0 black,4px 12px 0 0 black,
0 -14px 0 0 black,0 14px 0 0 black;
}
button:nth-of-type(2):hover {
background: black;
border: none;
box-shadow:
0 -8px 0 -4px black, 0 8px 0 -4px black,
0 -4px 0 -2px black, 0 4px 0 -2px black,
-4px -8px 0 -4px black, -4px 8px 0 -4px black, 4px -8px 0 -4px black, 4px 8px 0 -4px black,
-6px -4px 0 -4px black, -6px 4px 0 -4px black, 6px -4px 0 -4px black, 6px 4px 0 -4px black,
0 -10px 0 -4px black, 0 10px 0 -4px black,
-2px -12px 0 -4px white,-2px 12px 0 -4px white,2px -12px 0 -4px white,2px 12px 0 -4px white,
-6px -10px 0 -4px white,-6px 10px 0 -4px white,6px -10px 0 -4px white,6px 10px 0 -4px white,
-8px -6px 0 -4px white, -8px 6px 0 -4px white, 8px -6px 0 -4px white, 8px 6px 0 -4px white,
-10px -4px 0 0 black,-10px 4px 0 0 black,10px -4px 0 0 black,10px 4px 0 0 black,
-8px -8px 0 0 black, -8px 8px 0 0 black, 8px -8px 0 0 black, 8px 8px 0 0 black,
-6px -10px 0 0 black,-6px 10px 0 0 black,6px -10px 0 0 black,6px 10px 0 0 black,
-4px -12px 0 0 black,-4px 12px 0 0 black,4px -12px 0 0 black,4px 12px 0 0 black,
0 -14px 0 0 black,0 14px 0 0 black;
}
.optimism button:nth-of-type(2):hover {
width: 192px;
background: #FF0420;
border: none;
box-shadow:
0 -8px 0 -4px #FF0420, 0 8px 0 -4px #FF0420,
0 -4px 0 -2px #FF0420, 0 4px 0 -2px #FF0420,
-4px -8px 0 -4px #FF0420, -4px 8px 0 -4px #FF0420, 4px -8px 0 -4px #FF0420, 4px 8px 0 -4px #FF0420,
-6px -4px 0 -4px #FF0420, -6px 4px 0 -4px #FF0420, 6px -4px 0 -4px #FF0420, 6px 4px 0 -4px #FF0420,
0 -10px 0 -4px #FF0420, 0 10px 0 -4px #FF0420,
-2px -12px 0 -4px white,-2px 12px 0 -4px white,2px -12px 0 -4px white,2px 12px 0 -4px white,
-6px -10px 0 -4px white,-6px 10px 0 -4px white,6px -10px 0 -4px white,6px 10px 0 -4px white,
-8px -6px 0 -4px white, -8px 6px 0 -4px white, 8px -6px 0 -4px white, 8px 6px 0 -4px white,
-10px -4px 0 0 #FF0420,-10px 4px 0 0 #FF0420,10px -4px 0 0 #FF0420,10px 4px 0 0 #FF0420,
-8px -8px 0 0 #FF0420, -8px 8px 0 0 #FF0420, 8px -8px 0 0 #FF0420, 8px 8px 0 0 #FF0420,
-6px -10px 0 0 #FF0420,-6px 10px 0 0 #FF0420,6px -10px 0 0 #FF0420,6px 10px 0 0 #FF0420,
-4px -12px 0 0 #FF0420,-4px 12px 0 0 #FF0420,4px -12px 0 0 #FF0420,4px 12px 0 0 #FF0420,
0 -14px 0 0 #FF0420,0 14px 0 0 #FF0420;
}
.optimism.dialog {
box-shadow: 0 0 0 4px white, 0 0 0 6px #FF0420, 4px 4px 0 6px #FF0420;
border: 4px solid #FF0420;
}
.optimism button:nth-of-type(1) {
background: white;
border: none;
box-shadow:
0 -8px 0 -4px white, 0 8px 0 -4px white,
0 -4px 0 -2px white, 0 4px 0 -2px white,
-4px -8px 0 -4px #FF0420, -4px 8px 0 -4px #FF0420, 4px -8px 0 -4px #FF0420, 4px 8px 0 -4px #FF0420,
-6px -4px 0 -4px #FF0420, -6px 4px 0 -4px #FF0420, 6px -4px 0 -4px #FF0420, 6px 4px 0 -4px #FF0420,
0 -10px 0 -4px #FF0420, 0 10px 0 -4px #FF0420;
}
button:nth-of-type(2):hover svg{
fill: white
}
.optimism button:nth-of-type(1) svg{
fill: #FF0420;
}
svg {
image-rendering: pixelated;
margin-top: 3px;
pointer-events: none;
}
.loading_bar {
position: absolute;
inset: 0;
background: white;
display: flex;
justify-content: stretch;
align-content: center;
align-items: center;
padding: 45px;
animation-duration: 0.6s;
animation-fill-mode: both;
}
.loading_bar .bar {
border: 3px solid black;
height: 25px;
width: 100%;
position: relative
}
.loading_bar .bar .progress {
position: absolute;
inset: 0;
background: black;
transform-origin: left;
transform: scaleX(0);
animation-duration: 0.5s;
animation-fill-mode: both;
}
.run_animation .loading_bar {
animation-name: loading;
animation-duration: 0.7s;
animation-fill-mode: both;
}
.eth .run_animation .loading_bar {
animation-duration: 0.5s;
}
.tz .run_animation .loading_bar {
animation-duration: 0.7s;
}
.opt .run_animation .loading_bar {
animation-duration: 0.2s;
}
.run_animation .loading_bar .bar .progress{
animation-name: progress_bar;
animation-fill-mode: both;
animation-timing-function: steps(6);
}
.eth .run_animation .loading_bar .bar .progress{
animation-duration: 0.4s;
animation-timing-function: steps(4);
}
.tz .run_animation .loading_bar .bar .progress{
animation-duration: 0.5s;
animation-timing-function: steps(6);
}
.opt .run_animation .loading_bar .bar .progress{
animation-duration: 0.1s;
animation-timing-function: steps(6);
}
@keyframes progress_bar {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
@keyframes loading {
0% {
opacity: 1;
pointer-events: all;
}
99% {
opacity: 1;
pointer-events: all;
}
100% {
opacity: 0;
pointer-events: none;
}
}