fhqwhgads/build/compiled-styles.css

170 lines
3.3 KiB
CSS

*,
*:after,
*:before {
box-sizing: inherit;
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
line-height: 1.2;
box-sizing: border-box;
background-color: #254b72;
background-image: url('/assets/images/table.svg');
background-size: 100% 100%;
}
#processor {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 132.6029165vh;
height: auto;
margin: auto auto 0;
font-family: computerfontregular, monospace;
color: #009900;
font-size: 6vh;
}
@media (max-width: 132.6029165vh) {
#processor {
height: 75.4131226vw;
width: 100%;
font-size: 4.524787356vw;
}
}
#processor:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-image: url('/assets/images/screen.svg');
background-size: 100% 100%;
pointer-events: none;
}
#processor > label {
position: absolute;
top: 1em;
bottom: 2.25em;
left: 1.5em;
right: 1.5em;
overflow: hidden;
word-break: break-all;
z-index: 0;
}
#processor > label:before,
#processor > label:after {
position: absolute;
left: 0;
right: 0;
content: '';
}
#processor > label:before {
z-index: -1;
top: -3em;
bottom: -3em;
-webkit-animation: scroll 2s linear infinite;
animation: scroll 2s linear infinite;
background: url('/assets/images/scanline.svg') #000000;
background-size: 25em 4em;
background-repeat: repeat-y;
background-position: 50% 0%;
}
#scrollback {
position: absolute;
bottom: 0;
width: 100%;
min-height: 100%;
padding: 1.2em 1.6em 0.5em;
font-size: 0.8em;
}
#commandLine {
white-space: pre-wrap;
}
#command {
position: absolute;
margin-top: 1.25em;
z-index: -2;
}
#cursor {
position: absolute;
display: inline-block;
border-bottom: 0.1em solid;
margin-bottom: -0.2em;
height: 1em;
width: 0.5em;
-webkit-animation: blink 0.5s linear infinite;
animation: blink 0.5s linear infinite;
}
#selection {
color: black;
background-color: #009900;
}
@-webkit-keyframes blink {
0% {
border-bottom-width: 0.1em;
}
49% {
border-bottom-width: 0.1em;
}
50% {
border-bottom-width: 0.9em;
}
99% {
border-bottom-width: 0.9em;
}
100% {
border-bottom-width: 0.1em;
}
}
@keyframes blink {
0% {
border-bottom-width: 0.1em;
}
49% {
border-bottom-width: 0.1em;
}
50% {
border-bottom-width: 0.9em;
}
99% {
border-bottom-width: 0.9em;
}
100% {
border-bottom-width: 0.1em;
}
}
@-webkit-keyframes scroll {
0% {
-webkit-transform: translate3d(0, 2em, 0);
transform: translate3d(0, 2em, 0);
}
100% {
-webkit-transform: translate3d(0, -2em, 0);
transform: translate3d(0, -2em, 0);
}
}
@keyframes scroll {
0% {
-webkit-transform: translate3d(0, 2em, 0);
transform: translate3d(0, 2em, 0);
}
100% {
-webkit-transform: translate3d(0, -2em, 0);
transform: translate3d(0, -2em, 0);
}
}
@font-face {
font-family: 'computerfontregular';
src: url('/assets/fonts/computerfont-webfont.eot');
src: url('/assets/fonts/computerfont-webfont.eot?#iefix') format('embedded-opentype'),
url('/assets/fonts/computerfont-webfont.woff2') format('woff2'),
url('/assets/fonts/computerfont-webfont.woff') format('woff'),
url('/assets/fonts/computerfont-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}