140 lines
No EOL
3.4 KiB
CSS
140 lines
No EOL
3.4 KiB
CSS
@import url(fonts.css);
|
|
@import url(keyframes.css);
|
|
|
|
:root {
|
|
--background-shadow: hsla(210, 50%, 5%, 66%);
|
|
--dialog-background: hsla(0, 0%, 18%, 80%);
|
|
--dialog-background-active: hsla(0, 0%, 8%, 80%);
|
|
--dialog-border: hsl(0, 0%, 30%);
|
|
--light-blue: hsl(180, 90%, 60%);
|
|
--dark-blue: hsl(180, 90%, 30%);
|
|
--active-blue: hsla(180, 40%, 25%, 50%);
|
|
--dialog-width: 770px;
|
|
--dialog-padding-bottom: 120px;
|
|
--details-button-width: 395px;
|
|
--details-button-height: 65px;
|
|
--keyframe-dialog-size-diff: 50px;
|
|
--keyframe-show-dialog-width: calc(var(--dialog-width) - var(--keyframe-dialog-size-diff));
|
|
--keyframe-hide-dialog-width: calc(var(--dialog-width) + var(--keyframe-dialog-size-diff));
|
|
--keyframe-show-dialog-padding-bottom: calc(var(--dialog-padding-bottom) - var(--keyframe-dialog-size-diff));
|
|
--keyframe-hide-dialog-padding-bottom: calc(var(--dialog-padding-bottom) + var(--keyframe-dialog-size-diff));
|
|
}
|
|
|
|
.background-image {
|
|
position: fixed;
|
|
height: 100vh;
|
|
width: 100vw;
|
|
margin-top: -8px;
|
|
margin-left: -8px;
|
|
background: url(/assets/webp/Urchin_Underpass.webp);
|
|
background-size: cover;
|
|
animation: 750ms forwards ease-out onload-background-blur;
|
|
transform: scale(1.1);
|
|
z-index: -1;
|
|
}
|
|
|
|
p, button {
|
|
color: white;
|
|
font-family: Nintendo, sans-serif;
|
|
font-weight: bold;
|
|
font-size: 24px;
|
|
line-height: 40px;
|
|
letter-spacing: -0.025em;
|
|
}
|
|
|
|
.error-code {
|
|
color: lightgray;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.dialog {
|
|
position: absolute;
|
|
animation: 1250ms forwards ease-out onload-dialog;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background-color: var(--dialog-background);
|
|
backdrop-filter: blur(4px);
|
|
border: 1px solid var(--dialog-border);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.dialog-content {
|
|
animation: 1300ms forwards onload-visibility;
|
|
}
|
|
|
|
.dialog .error-code {
|
|
margin-top: 40px;
|
|
margin-left: 60px;
|
|
}
|
|
|
|
.dialog .description > p {
|
|
margin: 12px 32px 0 64px;
|
|
}
|
|
|
|
.dialog button {
|
|
position: absolute;
|
|
bottom: 0;
|
|
background-color: transparent;
|
|
border: 0;
|
|
border-top: 2px solid var(--dialog-border);
|
|
width: 100%;
|
|
height: 74px;
|
|
}
|
|
|
|
.dialog button.left, .dialog button.right {
|
|
width: 50%;
|
|
}
|
|
|
|
.dialog button.left {
|
|
border-right: 1px solid var(--dialog-border);
|
|
}
|
|
|
|
.dialog button.right {
|
|
border-left: 1px solid var(--dialog-border);
|
|
left: 50%;
|
|
}
|
|
|
|
.details {
|
|
display: none;
|
|
opacity: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.details-content {
|
|
margin: 65px 15% 0;
|
|
height: calc(100vh - var(--details-button-height) * 3.75);
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
.details .description > p {
|
|
font-size: 20px;
|
|
line-height: 36px;
|
|
}
|
|
|
|
.details button {
|
|
position: absolute;
|
|
background-color: var(--dialog-background);
|
|
width: var(--details-button-width);
|
|
height: var(--details-button-height);
|
|
left: 50%;
|
|
top: calc(100% - var(--details-button-height) * 1.25);
|
|
transform: translate(-50%, -50%);
|
|
border: 1px solid var(--dialog-border);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
button:focus, button:hover {
|
|
background-color: var(--dialog-background-active);
|
|
border-radius: 4px;
|
|
outline: 5px solid;
|
|
box-shadow: 0 0 12px var(--light-blue);
|
|
animation: 500ms infinite alternate ease-out hover-outline;
|
|
}
|
|
|
|
button:active {
|
|
outline: none;
|
|
box-shadow: none;
|
|
transition: none;
|
|
background-color: var(--active-blue);
|
|
} |