website/scss/error.scss
2021-03-22 21:07:20 +01:00

128 lines
No EOL
2.8 KiB
SCSS

@import "var";
body {
background: $back-color;
overflow: hidden;
}
.terminal-window {
text-align: left;
width: 37.5rem;
height: 22.5rem;
border-radius: .625rem;
margin: auto;
position: relative;
top: 10.5rem;
header {
background: #E0E8F0;
height: 1.875rem;
border-radius: .5rem .5rem 0 0;
padding-left: .625rem;
.button {
width: .75rem;
height: .75rem;
margin: .625rem .25rem 0 0;
display: inline-block;
border-radius: .5rem;
&.green {
background: #3BB662;
}
&.red {
background: #E75448;
}
&.yellow {
background: #E5C30F;
}
}
}
section.terminal {
color: white;
font-family: Menlo, Monaco, "Consolas", "Courier New", "Courier";
font-size: 11pt;
background: #30353A;
padding: .625rem;
box-sizing: border-box;
position: absolute;
width: 100%;
top: 1.875rem;
bottom: 0;
overflow: auto;
.typed-cursor {
opacity: 1;
-webkit-animation: blink 0.7s infinite;
-moz-animation: blink 0.7s infinite;
animation: blink 0.7s infinite;
}
}
}
@keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-webkit-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-moz-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
.terminal-data { display: none; }
.terminal-window {
.gray {
color: gray;
}
.green {
color: green;
}
}
/*Media for mobile responsive viewing*/
@media only screen and (max-width: 600px) {
.terminal-window {
text-align: left;
width: 37.5vmin;
height: 22.5vmin;
border-radius: .625vmin;
margin: auto;
position: relative;
top: 30.5vmin;
header {
background: #E0E8F0;
height: 1.875vmin;
border-radius: .5vmin .5vmin 0 0;
padding-left: 1vmin;
.button {
width: .75vmin;
height: .75vmin;
margin: .625vmin .25vmin 0 0;
display: inline-block;
border-radius: .5vmin;
}
}
section.terminal {
color: white;
font-family: Menlo, Monaco, "Consolas", "Courier New", "Courier";
font-size: .6875vmin;
background: #30353A;
padding: .625vmin;
box-sizing: border-box;
position: absolute;
width: 100%;
top: 1.875vmin;
bottom: 0;
overflow: auto;
}
}
}