socketio-live-reload/client/SLR.css

in browser live reload using socket.io

*,::after,::before{box-sizing:border-box}body{margin:0;font-family:ubuntu,sans-serif,sans;margin-bottom:50px}.slr-devBar{width:100%;position:fixed;padding:0 10px;height:45px;background:#000;color:#fff;font-size:.7rem;left:0;bottom:0;box-shadow:0 0 6px #000}.w50{width:50%}.slr-left{padding:4px 0 0 20px}.slr-right{text-align:right;padding:10px 20px 0 0}.slr-connect{width:10px;height:10px;background:#0f0}.slr-txt{margin-left:20px;font-size:12px;padding-top:10px;position:absolute}.slr-ttl{margin-bottom:6px}.slr-sub{margin-bottom:4px}.slr_toolbar{position:fixed;background:rgba(0,0,0,.9);box-shadow:0 0 16px #000;color:grey;text-shadow:#000 .1em .1em .2em;height:360px;width:230px;top:80px;left:-220px;border-top-right-radius:6px;border-bottom-right-radius:6px;transition:left .8s ease}.slr_toolbar:hover{left:0}.slr-tbh{padding-left:18px}.slr_toolbarBody{padding-left:24px;line-height:1.6}.status{margin-top:6px}.slr_toolbarItem{color:#8e0bb7;font-weight:700}text-shadow .slr_toolbarRes{color:#0bb70b;font-weight:400}.fadeInLeft{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}.blink{animation:blinker .1s linear infinite}.slr-btn{color:#000;background:#4e4e4e;border:none;padding:4px 10px;cursor:pointer;border-radius:2px;margin-right:10px}.slr-btn:hover{background:#4e4e4e}@-moz-keyframes fadeInLeft{from{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}@-webkit-keyframes fadeInLeft{from{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInLeft{from{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}@-webkit-keyframes blinker{50%{opacity:.8}}@keyframes blinker{50%{opacity:.8}}.cont{width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}.slr_row{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-15px;margin-left:-15px}.slr_col-6{position:relative;width:100%;padding-right:15px;padding-left:15px}.slr_col-6{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}