Terminal Style

This is a miscellaneous type of code used internally in the RPC-PH site
Please don't touch w/o staff permission

@import url('https://fonts.googleapis.com/css?family=VT323');
 
.divider {
border: 5px double white;
padding: 1%;
}
 
.divider.cmd {
position: absolute;
left: 0.5%;
bottom: 0.5%;
width: 36%;
height: 60px;
display: table-cell;
vertical-align: bottom;
text-align: center;
}
 
.divider.selector {
position: absolute;
left: 0.5%;
top: 0.5%;
width: 36%;
height: 370px;
}
 
.divider.viewport {
position: absolute;
right: 0.5%;
top: 0.5%;
height: 93.4%;
width: 56%;
overflow-wrap: break-word;
}
 
#terminal {
padding: 1.5%; 
border-radius: 2px;
min-height: 500px;
font-size: 20px;
font-family: 'VT323', monospace;
}
 
#terminal.off {
background-color: black;
color: transparent;
}
 
#terminal.on {
background: radial-gradient(#111, #050505);
color: white;
}
 
.cursor {
animation-name: blink;
animation-iteration-count: infinite;
animation-timing-function: cubic-bezier(1,0,0,1);
animation-duration: 1s;
}
 
@keyframes blink { 
from { opacity: 1.0; } to { opacity: 0.0; }
}
 
#terminal:before {
  // ... positioning
  z-index: 4010;
  background: linear-gradient(#444 50%, #000 50%);
  background-size: 100% 4px;
  background-repeat: repeat-y;
  opacity: .14;
  box-shadow : inset 0px 0px 1px 1px rgba(0, 0, 0, .8);
  animation: pulse 5s linear infinite;
}
 
@keyframes pulse {
  0%   {transform: scale(1.001);  opacity: .14; }
  8%   {transform: scale(1.000);  opacity: .13; }
  15%  {transform: scale(1.004);  opacity: .14; }
  30%  {transform: scale(1.002);  opacity: .11; }
  100% {transform: scale(1.000);  opacity: .14; }
}
 
#terminal:after {
  // ... positioning
  z-index : 4011;
  background-color : $rudy-accent-color;
  background: radial-gradient(ellipse at center, rgba(0,0,0,1) 0%,rgba(0,0,0,0.62) 45%,rgba(0,9,4,0.6) 47%,$rudy-accent-color 100%);
  box-shadow : inset 0px 0px 4px 4px rgba(100, 100, 100, .5);
  opacity : .1;
}
 
.layer {
  // ... positioning
  z-index : 4001;
  box-shadow : inset 0px 0px 1px 1px rgba(64, 64, 64, .1);
  background: radial-gradient(ellipse at center,darken($rudy-accent-color,1%) 0%,rgba(64,64,64,0) 50%);
  transform-origin : 50% 50%;
  animation: glitch 1s linear infinite;
  opacity: 1;
  height: 500px;
}
 
.layer:after {
  // ... positioning
  opacity: .1;
}
 
@keyframes glitch {
  0%   {transform: scale(1, 1.002); }
  50%   {transform: scale(1, 1.0001); }
  100% {transform: scale(1.001, 1); }
}
 
.overlay {
  // ... positioning
  z-index: 4100;
}
 
.overlay:before {
  content : '';
  position : absolute;
  top : 0px;
  width : 100%;
  height : 5px;
  background : #fff;
  background: linear-gradient(to bottom, rgba(255,0,0,0) 0%,rgba(255,250,250,1) 50%,rgba(255,255,255,0.98) 51%,rgba(255,0,0,0) 100%); /* W3C */
  opacity : .1;
  animation: vline 5s linear infinite;
}
 
.overlay:after {
  // ... positioning
  box-shadow: 0 2px 6px rgba(25,25,25,0.2),
              inset 0 1px rgba(50,50,50,0.1),
              inset 0 3px rgba(50,50,50,0.05),
              inset 0 3px 8px rgba(64,64,64,0.05),
              inset 0 -5px 10px rgba(25,25,25,0.1);
}
 
@keyframes vline {
  0%   { top: 0px;}
  100% { top: 100%;}
}
 
@keyframes flicker {
  0% {
    opacity: 0.27861;
  }
  5% {
    opacity: 0.34769;
  }
  10% {
    opacity: 0.23604;
  }
  15% {
    opacity: 0.90626;
  }
  20% {
    opacity: 0.18128;
  }
  25% {
    opacity: 0.83891;
  }
  30% {
    opacity: 0.65583;
  }
  35% {
    opacity: 0.67807;
  }
  40% {
    opacity: 0.26559;
  }
  45% {
    opacity: 0.84693;
  }
  50% {
    opacity: 0.96019;
  }
  55% {
    opacity: 0.08594;
  }
  60% {
    opacity: 0.20313;
  }
  65% {
    opacity: 0.71988;
  }
  70% {
    opacity: 0.53455;
  }
  75% {
    opacity: 0.37288;
  }
  80% {
    opacity: 0.71428;
  }
  85% {
    opacity: 0.70419;
  }
  90% {
    opacity: 0.7003;
  }
  95% {
    opacity: 0.36108;
  }
  100% {
    opacity: 0.24387;
  }
}
.layer::after {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(18, 16, 16, 0.1);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  animation: flicker 0.15s infinite;
}
.layer::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: 2;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}
.layer {
  position: relative;
}
 
#asciiLogo, #asciiLogoFade {
    white-space: pre;
    text-align: center;
    font-size: 18px;
    line-height: 16px;
    margin-top: 25%;
    margin-bottom: 0;
}
 
#asciiLogoFade {
    animation: fadeOut 2s steps(4, end) forwards;
}
 
@keyframes fadeOut {
    to {
        opacity: 0.0;
    }
}
 
.file_selector {
    cursor: pointer;
}
 
#file_list {
    border-collapse: separate;
    border-spacing: 0 2px
}
 
/* Credit for this goes to Blowsie on Stack Overflow:
    https://stackoverflow.com/questions/3779534/how-do-i-disable-text-selection-with-css-or-javascript */
 
.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
 
::-webkit-scrollbar {
    width: 8px;
}
 
::-webkit-scrollbar-track {
    background: transparent;
}
 
::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb:hover {
    background: white;
    border: 1px solid black;
}
 
.divider.popup {
    padding: 15px 20px;
    width: fit-content;
    height: fit-content;
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 50%;
    max-height: 80%;
    text-align: center;
}
 
button, input[type=submit] {
    background: none;
    color: white;
    font-family: 'VT323', monospace;
    border: none;
    font-size: 20px;
    cursor: pointer;
}
 
button:hover, input[type=submit]:hover {
    text-decoration: underline;
}
 
button:focus, input:focus {
    outline: none;
}
 
input[type=text] {
    background: none;
    font-family: 'VT323', monospace;
    border: none;
    color: white;
    border-bottom: 2px solid white;
    font-size: 20px;
    text-align: center;
}