.workspace { width: 100%; height: 100%; background: #fff; } $rudy-primary-color: #212121; $rudy-primary-color-light: #9E9E9E; $rudy-primary-color-dark: #616161; $rudy-accent-color: #00C853; $rudy-accent-color-fallback-1: #00E676; $rudy-accent-color-fallback-2: #69F0AE; .navbar { font-family: monospace; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); } .navbar-brand { a { color: $rudy-accent-color; position: relative; &:hover { color: $rudy-accent-color; text-decoration: none; } span { position: absolute; top: 0; bottom: 0; right: 0; width: 0; background: $rudy-primary-color; border-left: .5em solid; box-sizing: border-box; -webkit-animation: typing 3s steps(13, end) infinite alternate, blink-caret 1s step-end infinite; animation: typing 3s steps(13, end) infinite alternate, blink-caret 1s step-end infinite; } } } #faux-terminal { @mixin terminal-navbar-size { top: 0; left: 0; right: 0; width: 100%; height: 51px; min-height: 51px; } @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: -webkit-linear-gradient(#444 50%, #000 50%); 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); -webkit-animation: pulse 5s linear infinite; animation: pulse 5s linear infinite; } &:after { @include terminal-navbar-absolute; z-index : 4011; background-color : $rudy-accent-color; background: -webkit-radial-gradient(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%); 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: -webkit-radial-gradient(center,darken($rudy-accent-color,1%) 0%,rgba(64,64,64,0) 50%); background: radial-gradient(ellipse at center,darken($rudy-accent-color,1%) 0%,rgba(64,64,64,0) 50%); -webkit-transform-origin : 50% 50%; -ms-transform-origin : 50% 50%; transform-origin : 50% 50%; -webkit-transform: perspective(20px) rotateX(.5deg) skewX(2deg) scale(1.03); transform: perspective(20px) rotateX(.5deg) skewX(2deg) scale(1.03); -webkit-animation: glitch 1s linear infinite; animation: glitch 1s linear infinite; opacity: .9; &:after { @include terminal-navbar-absolute; background: -web-kit-radial-gradient(center, rgba(0,0,0,0.5) 0%,rgba(64,64,64,0) 100%); background: radial-gradient(ellipse at center, rgba(0,0,0,0.5) 0%,rgba(64,64,64,0) 100%); opacity: .1; } } .overlay { @include terminal-navbar-fixed; z-index: 4100; &:before { content : ''; position : absolute; top : 0px; width : 100%; height : 5px; background : #fff; background: -webkit-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%); 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%); opacity : .1; -webkit-animation: vline 1.25s linear infinite; 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); } } } @-webkit-keyframes vline { 0% { top: 0px;} 100% { top: 100%;} } @-webkit-keyframes pulse { 0% {-webkit-transform: scale(1.001); opacity: .14; } 8% {-webkit-transform: scale(1.000); opacity: .13; } 15% {-webkit-transform: scale(1.004); opacity: .14; } 30% {-webkit-transform: scale(1.002); opacity: .11; } 100% {-webkit-transform: scale(1.000); opacity: .14; } } @-webkit-keyframes glitch { 0% {-webkit-transform: scale(1, 1.002); } 50% {-webkit-transform: scale(1, 1.0001); } 100% {-webkit-transform: scale(1.001, 1); } } @-webkit-keyframes blink-caret { from, to { border-color: transparent; } 50% { border-color: $rudy-accent-color; } } @-webkit-keyframes typing { from { width: 100%; } to { width: 0; } } @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); } } @keyframes blink-caret { from, to { border-color: transparent; } 50% { border-color: $rudy-accent-color; } } @keyframes typing { from { width: 100%; } to { width: 0; } }