stlive/res/live/css/app.css

Live edit your JS/HTML/CSS source code in Sencha Touch / PhoneGap projects. Autosync changes to multiple mobile devices of mixed OS types. Massively speed up your mobile app development by avoiding most compiling and redeployment.

.sprite{background:transparent url(../img/sprite.png) 0 0 no-repeat;-webkit-background-size:320px 320px;-moz-background-size:320px 320px;-o-background-size:320px 320px;background-size:320px 320px}.scan-line{background:transparent url(../img/scanline.png) 0 0 repeat;-webkit-background-size:260px 189px;-moz-background-size:260px 189px;-o-background-size:260px 189px;background-size:260px 189px}@-webkit-keyframes flash{from{background-color:transparent}40%{background-color:transparent}50%{background-color:rgba(255,255,255,0.1)}60%{background-color:transparent}to{background-color:transparent}}@-moz-keyframes flash{from{background-color:transparent}40%{background-color:transparent}50%{background-color:rgba(255,255,255,0.1)}60%{background-color:transparent}to{background-color:transparent}}@-ms-keyframes flash{from{background-color:transparent}40%{background-color:transparent}50%{background-color:rgba(255,255,255,0.1)}60%{background-color:transparent}to{background-color:transparent}}@-o-keyframes flash{from{background-color:transparent}40%{background-color:transparent}50%{background-color:rgba(255,255,255,0.1)}60%{background-color:transparent}to{background-color:transparent}}@keyframes flash{from{background-color:transparent}40%{background-color:transparent}50%{background-color:rgba(255,255,255,0.1)}60%{background-color:transparent}to{background-color:transparent}}@-webkit-keyframes pulse{from{opacity:1}50%{opacity:.5}to{opacity:1}}@-moz-keyframes pulse{from{opacity:1}50%{opacity:.5}to{opacity:1}}@-ms-keyframes pulse{from{opacity:1}50%{opacity:.5}to{opacity:1}}@-o-keyframes pulse{from{opacity:1}50%{opacity:.5}to{opacity:1}}@-webkit-keyframes scroll{from{background-position:0 0}50%{background-position:13000px 189px}to{background-position:26000px 378px}}@-moz-keyframes scroll{from{background-position:0 0}50%{background-position:13000px 189px}to{background-position:26000px 378px}}@-ms-keyframes scroll{from{background-position:0 0}50%{background-position:13000px 189px}to{background-position:26000px 378px}}@-o-keyframes scroll{from{background-position:0 0}50%{background-position:13000px 189px}to{background-position:26000px 378px}}@keyframes scroll{from{background-position:0 0}50%{background-position:13000px 189px}to{background-position:26000px 378px}}body,h1,h2,h3,h4{font-size:1.05em;font-family:'HelveticaNeue-Light',Helvetica,Arial,sans-serif;font-weight:300}*{margin:0;padding:0;-webkit-touch-callout:none;-webkit-text-size-adjust:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-user-select:none}input{-webkit-user-select:auto}body,html{height:100%}body{background:#e7e7e7;background:-moz-linear-gradient(top, #e7e7e7 0, #b0afb0 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #e7e7e7), color-stop(100%, #b0afb0));background:-webkit-linear-gradient(top, #e7e7e7 0, #b0afb0 100%);background:-o-linear-gradient(top, #e7e7e7 0, #b0afb0 100%);background:-ms-linear-gradient(top, #e7e7e7 0, #b0afb0 100%);background:linear-gradient(to bottom, #e7e7e7 0, #b0afb0 100%);color:#333;font-size:16px;-ms-touch-action:none}a{color:#fff}hr{border:none;border-top:#ddd 1px solid;border-bottom:#fff 1px solid}.hidden{display:none}form label{height:16px;text-align:left;font-size:13px;display:block}form label.info{opacity:.4;text-align:center}label,input{color:#adecff;text-shadow:#00bff3 0 0 5px}input{background:none;border:#adecff 1px solid;-webkit-border-radius:4px;-moz-border-radius:4px;-o-border-radius:4px;border-radius:4px;color:#adecff;font-family:Courier New,Monaco,monospace;padding:5px 8px;margin:2px 0 8px;-webkit-appearance:none;font-size:14px}input[type="text"],input[type="password"],input[type="number"]{width:202px}.alert label,.alert input{color:#f69fa5;text-shadow:#ed1c24 0 0 5px;border-color:#f69fa5}.container{display:table;height:100%;position:absolute;top:0;right:0;bottom:0;left:0;width:100%;overflow:hidden}.container .inner{display:table-cell;text-align:center;vertical-align:middle}.footer{bottom:-60px;color:rgba(0,0,0,0.5);font-size:13px;position:absolute;text-shadow:0 1px 0 #e7e7e7;text-transform:uppercase;width:100%;-webkit-transition:opacity .5s;-moz-transition:opacity .5s;-0-transition:opacity .5s;transition:opacity .5s}.footer.faded{opacity:0}.footer a,.footer a:active,.footer a:hover,.footer a:visited{color:rgba(0,0,0,0.5)}#bot{display:inline-block;text-align:center;position:relative;margin-top:60px;width:280px}#bot .shadow{background:transparent url(../img/sprite.png) 0 0 no-repeat;-webkit-background-size:320px 320px;-moz-background-size:320px 320px;-o-background-size:320px 320px;background-size:320px 320px;background-position:0 -10px;width:320px;height:40px;position:absolute;bottom:-50px;left:-21px}#bot .monitor{margin-left:5px;width:270px;height:220px;background:#08213a;background:-moz-linear-gradient(top, #08213a 0, #0e151d 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #08213a), color-stop(100%, #0e151d));background:-webkit-linear-gradient(top, #08213a 0, #0e151d 100%);background:-o-linear-gradient(top, #08213a 0, #0e151d 100%);background:-ms-linear-gradient(top, #08213a 0, #0e151d 100%);background:linear-gradient(to bottom, #08213a 0, #0e151d 100%);position:relative;font-family:Courier New,Monaco,monospace;border-left:1px solid #ccc}#bot .monitor .cover{position:absolute;bottom:0;left:0;right:0;top:0;border-style:solid;border-width:45px;-moz-border-image:url(../img/frame.png) 90 stretch;-webkit-border-image:url(../img/frame.png) 90 stretch;-o-border-image:url(../img/frame.png) 90 stretch;border-image:url(../img/frame.png) 90 fill stretch}#bot .monitor form{position:absolute;width:220px;top:30px;left:25px;-webkit-transition:opacity .5s;-moz-transition:opacity .5s;-0-transition:opacity .5s;transition:opacity .5s}#bot .monitor form.faded{opacity:0}#bot .monitor .visor{position:absolute;top:85px;left:50%;-webkit-transition:opacity .5s;-moz-transition:opacity .5s;-0-transition:opacity .5s;transition:opacity .5s}#bot .monitor .visor .eye{position:absolute;background:transparent url(../img/sprite.png) 0 0 no-repeat;-webkit-background-size:320px 320px;-moz-background-size:320px 320px;-o-background-size:320px 320px;background-size:320px 320px;background-position:0 -70px;top:0;width:40px;height:50px;-webkit-transition:opacity .5s;-moz-transition:opacity .5s;-0-transition:opacity .5s;transition:opacity .5s}#bot .monitor .visor .eye.left{left:-100px}#bot .monitor .visor .eye.right{right:-100px}#bot .monitor .visor .eye.faded{opacity:0}#bot .monitor .visor label{position:absolute;left:-75px;top:20px;width:150px;font-size:16px;text-transform:uppercase}#bot .monitor .visor.pulse label{animation:pulse .5s linear;-moz-animation:pulse .5s infinite linear;-webkit-animation:pulse .5s infinite linear;-o-animation:pulse .5s infinite linear;-ms-animation:pulse .5s infinite linear}#bot .monitor .visor.fade-out{opacity:0}#bot .monitor.alert{background:#340000}#bot .monitor.alert .visor .eye{background-position:0 -120px}#bot .panel{border:1px solid #fff;border-right-color:#acabab;border-bottom-color:#acabab;background:#eee;background:-moz-linear-gradient(-45deg, #eee 0, #ccc 99%);background:-webkit-gradient(linear, left top, right bottom, color-stop(0, #eee), color-stop(99%, #ccc));background:-webkit-linear-gradient(-45deg, #eee 0, #ccc 99%);background:-o-linear-gradient(-45deg, #eee 0, #ccc 99%);background:-ms-linear-gradient(-45deg, #eee 0, #ccc 99%);background:linear-gradient(135deg, #eee 0, #ccc 99%);position:absolute;left:0;right:0}#bot .panel.visor-cover{left:-1px;right:-1px;bottom:-131px;height:75px;-webkit-transition:bottom .5s;-moz-transition:bottom .5s;-0-transition:bottom .5s;transition:bottom .5s;z-index:3}#bot .panel.top{top:-14px;-webkit-transition:top .5s;-moz-transition:top .5s;-0-transition:top .5s;transition:top .5s;height:100px}#bot .panel.top.open{top:-171px}#bot .panel.top.open .visor-cover{bottom:-73px}#bot .panel.bottom{height:24px;bottom:-24px;z-index:4}#bot .panel.top:after,#bot .panel.visor-cover:after{content:'';background:transparent url(../img/sprite.png) 0 0 no-repeat;-webkit-background-size:320px 320px;-moz-background-size:320px 320px;-o-background-size:320px 320px;background-size:320px 320px;background-position:50% -24px;height:10px;position:absolute;bottom:-11px;left:5px;right:5px}@media all and (min-width:900px){.container{margin:0 auto}}@-ms-viewport{width:device-width}