@import url("//fonts.googleapis.com/css?family=Open+Sans:300"); @font-face { font-family: "digital-7"; src: url("../fonts/digital-7.eot?#iefix") format("embedded-opentype"), url("../fonts/digital-7.woff") format("woff"), url("../fonts/digital-7.ttf") format("truetype"), url("../fonts/digital-7.eot#svgFontName") format("svg"); font-weight: normal; font-style: normal; } /* Edited Normalize: Didn't need all of normalize.css, so just took the bits that were needed and removed the rest. Elements that receive additional styling like , , etc., have been moved into the main style sheet to cut down on repetition of selector declarations */ footer, header, main, nav, section { display: block; } audio, canvas, video { display: inline-block; } audio:not([controls]) { display: none; height: 0; } a { background: transparent; text-decoration: underline; } a:focus { outline: thin dotted; } a:active, a:hover { outline: 0; } button, input, select, textarea { font-family: inherit; font-size: 100%; margin: 0; } button { border: none; text-transform: none; } button, input { line-height: normal; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } button, html input[type="button"], /* 1 */ input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ } button[disabled], html input[disabled] { cursor: default; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } b, strong { font-weight: bold; } hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } img { border: 0; } svg:not(:root) { overflow: hidden; } /* Additional HTML element styling beyond normalization/reset */ html { background: -webkit-linear-gradient(bottom, #15181b 0%, #1d1f23 100%) no-repeat fixed; background: -moz-linear-gradient(bottom, #15181b 0%, #1d1f23 100%) no-repeat fixed; background: linear-gradient(bottom, #15181b 0%, #1d1f23 100%) no-repeat fixed; font-family: Helvetica, Arial, sans-serif; text-align: center; -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ -webkit-user-select: none; } body { margin: 0; } header { height: 80px; margin: 30px auto; } header h1 { color: #ddd; font-family: "Open Sans"; font-size: 40px; font-weight: 300; margin: 0; text-align: center; } canvas { border-radius: 2px; height: 280px; width: 8px; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } button { outline: none; } /* UI Styling */ #master { display: none; } .vu { width: 200px; height: 200px; position: relative; background: url(../img/vu.png) top left no-repeat; } .vu:nth-child(1) { top: -10px; } .vu:nth-child(2) { top: 16px; } .mask { height: 108px; overflow: hidden; position: relative; } .vu-label { color: #111; font-size: 26px; font-weight: bold; margin-top: 20px; text-align: center; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.2); } #canvas { border-bottom: 1px solid #333; display: none; height: 65px; margin: 50px auto 20px; width: 600px; } #mixer { background: #23262a; border-radius: 4px; box-shadow: inset 0px 2px 6px rgba(0, 0, 0, 0.5), 0px 2px 5px rgba(220, 255, 255, 0.15); display: flex; flex-direction: row; justify-content: center; padding: 16px; visibility: hidden; flex-wrap: wrap; } .channel { background: #23262a; border-radius: 3px; display: inline-block; overflow: hidden; position: relative; padding: 6px 4px 6px 4px; } /* buttons */ .btn { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; color: #fff; background-color: #0062cc; border-color: #005cbf; cursor: pointer; font-size: 12px; width: 90px; height: 40px; line-height: 20px; border-radius: 0.3rem; } /* .mute { float: left; width: 50%; } */ .solo { display: none; } .mute.active { opacity: 0.65; } .track { display: none; } .clear { clear: both; } .pipe { color: hsl(214, 8%, 28%); } #controls { display: none; margin: 0 auto; padding: 16px 12px 8px 10px; width: 360px; } .clock { background-image: -webkit-linear-gradient( top, hsl(219, 69%, 16%) 0%, hsl(214, 71%, 18%) 51%, hsl(219, 69%, 16%) 52%, hsl(214, 71%, 18%) 100% ); background-image: -moz-linear-gradient( top, hsl(219, 69%, 16%) 0%, hsl(214, 71%, 18%) 51%, hsl(219, 69%, 16%) 52%, hsl(214, 71%, 18%) 100% ); background-image: linear-gradient( top, hsl(219, 69%, 16%) 0%, hsl(214, 71%, 18%) 51%, hsl(219, 69%, 16%) 52%, hsl(214, 71%, 18%) 100% ); border-radius: 3px; box-shadow: inset 0px 2px 6px rgba(0, 0, 0, 0.5); display: inline-block; height: 60px; margin: 0; width: 180px; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } /* bottom buttons */ .buttons { display: inline-block; position: relative; top: -26px; } .btn-cntrl { background-position: center center; background-repeat: no-repeat; border-radius: 2px; box-shadow: inset 0 -2px hsla(0, 0%, 0%, 0.1), 0 0 8px 2px hsla(0, 0%, 0%, 0.75); display: inline-block; margin-left: 6px; } .start { background-image: url("../img/single_rewind@2x.png"), -webkit-linear-gradient(top, hsl(228, 13%, 92%) 0%, hsl(240, 100%, 100%) 100%); background-image: url("../img/single_rewind@2x.png"), -moz-linear-gradient(top, hsl(228, 13%, 92%) 0%, hsl(240, 100%, 100%) 100%); background-image: url("../img/single_rewind@2x.png"), linear-gradient(top, hsl(228, 13%, 92%) 0%, hsl(240, 100%, 100%) 100%); background-size: 6px 9px, 100%; margin-left: 16px; padding: 9px 14px; } .rw { background-image: url("../img/rewind@2x.png"), -webkit-linear-gradient(top, hsl(228, 13%, 92%) 0%, hsl(240, 100%, 100%) 100%); background-image: url("../img/rewind@2x.png"), -moz-linear-gradient(top, hsl(228, 13%, 92%) 0%, hsl(240, 100%, 100%) 100%); background-image: url("../img/rewind@2x.png"), linear-gradient(top, hsl(228, 13%, 92%) 0%, hsl(240, 100%, 100%) 100%); background-size: 12px 9px, 100%; padding: 9px 14px; } .play { background-image: url("../img/pause@2x.png"), -webkit-linear-gradient(top, hsl(228, 13%, 92%) 0%, hsl(240, 100%, 100%) 100%); background-image: url("../img/pause@2x.png"), -moz-linear-gradient(top, hsl(228, 13%, 92%) 0%, hsl(240, 100%, 100%) 100%); background-image: url("../img/pause@2x.png"), linear-gradient(top, hsl(228, 13%, 92%) 0%, hsl(240, 100%, 100%) 100%); background-size: 14px 17px, 100%; border-radius: 50%; padding: 18px; position: relative; /*top: 8px; */ } .play.paused { background-image: url("../img/play@2x.png"), -webkit-linear-gradient(top, hsl(228, 13%, 92%) 0%, hsl(240, 100%, 100%) 100%); background-image: url("../img/play@2x.png"), -moz-linear-gradient(top, hsl(228, 13%, 92%) 0%, hsl(240, 100%, 100%) 100%); background-image: url("../img/play@2x.png"), linear-gradient(top, hsl(228, 13%, 92%) 0%, hsl(240, 100%, 100%) 100%); background-size: 14px 17px, 100%; } .ff { background-image: url("../img/forward@2x.png"), -webkit-linear-gradient(top, hsl(228, 13%, 92%) 0%, hsl(240, 100%, 100%) 100%); background-image: url("../img/forward@2x.png"), -moz-linear-gradient(top, hsl(228, 13%, 92%) 0%, hsl(240, 100%, 100%) 100%); background-image: url("../img/forward@2x.png"), linear-gradient(top, hsl(228, 13%, 92%) 0%, hsl(240, 100%, 100%) 100%); background-size: 12px 9px, 100%; padding: 9px 14px; } @media all and (max-width: 1200px) { header { margin: 20px 0 15px; } /* #mixer { min-width: 900px; } */ #meters { display: none; } } #loader { margin-left: 10px; margin-right: 10px; position: relative; border: 1px inset rgba(255, 500, 500, 0.1); border-radius: 3px; overflow: hidden; background: rgba(0, 0, 0, 0.1); padding: 5px 0px; } #loader span { z-index: 2; position: relative; color: #ddd; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); font-size: 18px; } #loader .loader-bar { position: absolute; top: 0px; left: 0px; width: 0px; height: 100%; z-index: 1; background: #00ccee; background: -webkit-linear-gradient(top, #00ccee 0%, #00aacc 100%); background: -moz-linear-gradient(top, #00ccee 0%, #00aacc 100%); background: linear-gradient(top, #00ccee 0%, #00aacc 100%); -webkit-transition: width 0.8s ease-out; -moz-transition: width 0.8s ease-out; transition: width 0.8s ease-out; }