.rl-cmd { position: absolute; bottom: 0; left: 0; right: 0; top: auto; height: 0; background: rgba(0, 0, 0, .85); border-top: 1px solid #000; overflow: hidden; font-family: monospace; .transition(height 0.1s ease-out); &.opened { height: 300px; } .rl-cmd-clr-error { color: #CD3131; } .rl-cmd-clr-info { color: #BFBF00; } .rl-cmd-clr-success { color: #31FF40; } .rl-cmd-wrp { position: relative; height: 100%; } .rl-cmd-input-helper { color: #666; } .rl-cmd-input-prefix { color: #31FF40; display: inline-block; } .rl-cmd-input-wrp { position: absolute; bottom: 0; left: 10px; right: 10px; } .rl-cmd-input { background: none; border: none; color: white; display: inline-block; width: calc(~'100% - 30px'); font-family: monospace; &:focus{ background: none; border: none; } } .rl-cmd-history { color: white; font-family: monospace; position: absolute; top: 10px; bottom: 60px; left: 10px; right: -30px; overflow: hidden; overflow-x: hidden; overflow-y: auto; } }