122 lines
1.9 KiB
CSS
122 lines
1.9 KiB
CSS
@import url('https://fonts.googleapis.com/css?family=Major+Mono+Display');
|
|
|
|
body {
|
|
font: 18px "Courier New", monospace;
|
|
background-color: black;
|
|
background-image: radial-gradient(at bottom right, rgb(30 30 30), black);
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
color: #02d300;
|
|
text-shadow: 0 0 6px #73ff71;
|
|
}
|
|
|
|
body::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 99vh;
|
|
background: repeating-linear-gradient( 0deg, rgb(0 0 0 / 0.20), rgb(0 0 0 / 0.15) 3px, transparent 2px, transparent 6px);
|
|
pointer-events: none;
|
|
}
|
|
|
|
::selection{
|
|
background: #793d71;
|
|
text-shadow: none;
|
|
}
|
|
|
|
.power-on-container {
|
|
height: 90vh;
|
|
align-items:center;
|
|
justify-items:center;
|
|
text-align: center;
|
|
}
|
|
|
|
.power-on-box {
|
|
position: relative;
|
|
justify-self: center;
|
|
margin-top: 20vh;
|
|
|
|
}
|
|
|
|
#start-text {
|
|
font-size: 30px;
|
|
border: ridge;
|
|
padding: 2em 6em;
|
|
box-shadow: 0 0 3px 1px rgb(49 255 0 / 0.70);
|
|
}
|
|
|
|
.console {
|
|
padding-top: 15vh;
|
|
height: 70vh;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.logo {
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.fail-text {
|
|
color: #d82222;
|
|
text-shadow: 0 0 6px #ff1111;
|
|
}
|
|
|
|
.power-on-self-test{
|
|
|
|
padding-left: 4em;
|
|
}
|
|
|
|
.terminal-window {
|
|
|
|
|
|
}
|
|
|
|
.power-on-self-test, .terminal-window {
|
|
border: double;
|
|
margin-left: 5vw;
|
|
margin-top: -5vh;
|
|
padding-bottom: 1em;
|
|
width: 60vw;
|
|
overflow: scroll;
|
|
flex-grow: 1;
|
|
display: flex;
|
|
flex-direction: column-reverse;
|
|
}
|
|
|
|
.terminal{
|
|
|
|
}
|
|
|
|
.active-line{
|
|
outline: none;
|
|
width: 2em;
|
|
resize:horizontal;
|
|
}
|
|
|
|
.blink-text {
|
|
animation: blinker 1s step-start infinite;
|
|
}
|
|
|
|
.typed-line{
|
|
display: inline;
|
|
}
|
|
|
|
.terminal-line th{
|
|
text-align: right;
|
|
vertical-align: top;
|
|
padding-right: 0.2em;
|
|
width: 4em;
|
|
}
|
|
|
|
.terminal-line td{
|
|
text-align: left;
|
|
}
|
|
|
|
@keyframes blinker {
|
|
50% {
|
|
opacity: 0;
|
|
}
|
|
} |