#faux-terminal { @mixin terminal-navbar-size { top: 0; left: 0; right: 0; width: 100%; height: $navbar-height; min-height: $navbar-height; } @mixin terminal-navbar-absolute { content: ''; position: absolute; @include terminal-navbar-size; } @mixin terminal-navbar-fixed { position: fixed; @include terminal-navbar-size; } @include terminal-navbar-fixed; z-index: 4000; pointer-events: none; &:before { @include terminal-navbar-absolute; 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; } &:after { @include terminal-navbar-absolute; 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 { @include terminal-navbar-absolute; 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%); /* W3C */ transform-origin : 50% 50%; transform: perspective(20px) rotateX(.5deg) skewX(2deg) scale(1.03); animation: glitch 1s linear infinite; opacity: .9; &:after { @include terminal-navbar-absolute; background: radial-gradient(ellipse at center, rgba(0,0,0,0.5) 0%,rgba(64,64,64,0) 100%); /* W3C */ opacity: .1; } } .overlay { @include terminal-navbar-fixed; z-index: 4100; &: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 1.25s linear infinite; } &:after { @include terminal-navbar-absolute; 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 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; } } @keyframes glitch { 0% {transform: scale(1, 1.002); } 50% {transform: scale(1, 1.0001); } 100% {transform: scale(1.001, 1); } }