@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 */ *{ margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } 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%; -webkit-text-size-adjust: 100%; -webkit-user-select: none; width: 100%; /* height: 100%; */ /* overflow: hidden; */ /* position: fixed; */ } body { margin: 0; /* height: 100%; */ /* overflow: hidden; */ -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -o-text-size-adjust: 100%; text-size-adjust: 100%; position: relative; } header { height: 80px; margin: 30px auto; } .cap { display: none;} header h1 { color: #ddd; font-family: "Open Sans"; font-size: 40px; font-weight: 300; margin: 0; text-align: center; } canvas { border-radius: 2px; height: 100%; width: 100%; -webkit-transform: translate3d(0, 0, 0); position: relative; /* z-index: 100; */ } button { outline: none; } .memori { position: absolute; height: 95%; left: 150%; display: grid; justify-content: space-evenly; width: 100%; top: 3%; } .memori span { display: block; padding: 0; font-size: 11px; color: #fff; position: relative; z-index: -1; text-align: right; } .memori span:last-child { padding-bottom: 0; } .ch_num { position: absolute; bottom: 3%; font-size: 11px; color: #fff; left: 0; right: 0; } /* UI Styling */ .titArea p { display: inline-block; font-weight: 600; padding: 0.2rem 2rem; border-radius: 100px; color: #fa5810; font-size: 15px; margin-right: 1rem; } .titArea.pc p { margin-right: 0;} .titArea span { color: #fff; font-weight: 600; margin-top: 0.5rem; font-size: 14px; } .mixer_cont { /* overflow: hidden; */ /* height: 100%; */ padding: 2% 0; } #meters { float: right; margin: 8px; clear: right; display: none; } #master { background: #2b2c2e; /* border-radius: 3px; */ /* box-shadow: inset 0 0 12px rgba(0,0,0,0.35); */ float: left; /* margin: 0 2%; */ overflow: hidden; /* box-sizing: content-box; */ position: relative; width: 5.3%; height: 100%; border-top: #f8f9fd 3px solid; border-bottom: #f8f9fd 3px solid; } #master02.master01 { border-right: #f8f9fd 3px solid; border-radius: 0 6px 6px 0; border-left: #f8f9fd 2px solid; } #master.master02 { border-left: #f8f9fd 3px solid; border-radius: 6px 0 0 6px; margin-left: 2%; } #master02 { background: #2b2c2e; float: left; /* overflow: hidden; */ /* box-sizing: content-box; */ position: relative; width: 5.6%; height: 100%; border-top: #f8f9fd 3px solid; border-bottom: #f8f9fd 3px solid; } .ch_track { height: 100%; } .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; } .needle { background: url(../img/needle.png) top left no-repeat; height: 51px; left: 54px; position: absolute; top: 64px; width: 48px; -webkit-transform-origin: 48px 51px; -webkit-transform: rotateZ(0deg); -moz-transform-origin: 48px 51px; -moz-transform: rotateZ(0deg); } .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; } .mix_bg { background-image: url(../img/bg_pc.jpg); background-repeat: no-repeat; background-position: top center; min-height: 1071px; max-width: 900px; margin: 0 auto; background-size: 100%; position: relative; overflow: hidden; } .metar_cont { position: absolute; width: 85%; height: 55%; top: 440px; margin: 0 auto; left: 0; right: 0; /* overflow: hidden; */ } #mixer { border-radius: 4px; height: 100%; width: 100%; position: relative; visibility:hidden; /* overflow: hidden; */ /* border-right: none; */ } .channel { background: #2b2c2e; box-shadow: inset 0 0 12px rgba(0,0,0,0.35); float: left; overflow: hidden; height: 100%; text-align: center; position: relative; width: 5.3%; border-right: #f8f9fd 2px solid; border-bottom: #f8f9fd 3px solid; border-top: #f8f9fd 3px solid; /* box-sizing: content-box; */ } #mixer > [class^="channel"]:nth-last-of-type(3) { border-radius: 0 6px 6px 0; border-right-width: 3px; } #mixer > [class^="channel"]:nth-last-of-type(10) { margin-left: 1.5%; border-left: #f8f9fd 2px solid; width: 5.45%; } #mixer > [class^="channel"]:nth-last-of-type(18) { border-left: #f8f9fd 3px solid; border-radius: 6px 0 0 6px; width: 5.5%; } .emp { position: absolute; width: 3%; height: 100%; top: 0; left: 43%; border-top: #f8f9fd 3px solid; border-bottom: #f8f9fd 3px solid; /* box-sizing: content-box; */ } .selArea, .emp_selArea { position: relative; padding: 13% 0; height: 6.5%; } .selArea:after, .emp_selArea:after { content: ''; background-image: url(../img/border.png); height: 100%; width: 100%; position: absolute; left: 0; top: 0; opacity: 0.5; } .s_btn { border: #000 1px solid; border-radius: 3px; color: #ccc; background-color: #8d8c92; box-shadow: 0 2px 0 0 #000; position: relative; z-index: 1; font-size: 11px; width: 85%; margin: 0 auto; padding-bottom: 3px; padding-top: 2px; } .s_btn span { background-color: #2b2c2e; width: 90%; margin: 0 auto; display: block; border-radius: 2px; line-height: 1.7; } .c_btn { border: #000 1px solid; border-radius: 3px; color: #ccc; background-color: #8d8c92; box-shadow: 0 2px 0 0 #000; position: relative; z-index: 1; font-size: 10px; width: 70%; margin: 10% auto 15%; padding-bottom: 3px; padding-top: 2px; height: 3.5%; } .c_btn span { background-color: #2b2c2e; width: 90%; margin: 0 auto; display: block; border-radius: 2px; } .tk_name { color: #fff; font-size: 11px; height: 2.5%; display: block; padding-top: 1%; } .meter_block { width: 100%; height: 10%; } .memori span i { position: absolute; left: -120%; top: 30%; width: 50%; background: #fff; height: 1px; z-index: -1; } .memori small { padding-left: 10%; display: block; } .meter_block li { display: flex; align-items: center; width: 80%; height: 10%; margin: 0 auto 10%; } .meter_block li i { width: 40%; height: 100%; margin-right: 5%; background: #000000; } .meter_block li.m_o.active i { background: #d46852; } .meter_block li span { font-size: 10px; width: 45%; color: #fff; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); } li.m_o span { -webkit-transform: scale(0.6,0.8); -moz-transform: scale(0.6,0.8); -ms-transform: scale(0.6,0.8); -o-transform: scale(0.6,0.8); transform: scale(0.6,0.8); } .meter_block li.m_o6.active i, .meter_block li.m_o12.active i, .meter_block li.m_g18.active i{ background: #f5995f; } .meter_block li.m_red span { transform: scale(0.8, 1); } .meter_block li.m_g30.active i, .meter_block li.m_g60.active i { background: #a1c251; } .on_btn { border: #000 1px solid; border-radius: 3px; color: #ccc; background-color: #8d8c92; box-shadow: 0 2px 0 0 #000; position: relative; z-index: 1; font-size: 11px; width: 85%; margin: 10% auto 20%; padding-bottom: 3px; padding-top: 2px; /* height: 3.3%; */ -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; transition-duration: 0.5s; } .on_btn span { background-color: #2b2c2e; width: 90%; margin: 0 auto; display: block; line-height: 1.5; border-radius: 2px; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; transition-duration: 0.5s; } .on_btn:hover, .on_btn.on { /* background: radial-gradient(#fff 20%, #f8b18a 70%); -webkit-transform: translateY(1px); -ms-transform: translateY(1px); transform: translateY(1px); box-shadow: initial; width: 85%;*/ } .on_btn.active { background: radial-gradient(#fff 20%, #f8b18a 70%); -webkit-transform: translateY(1px); -ms-transform: translateY(1px); transform: translateY(1px); box-shadow: initial; width: 85%; } .on_btn:hover span, .on_btn.on span { color: #f9dccf; } #master .on_btn { /* margin: 20% auto 23%; */ } #mixer:before { /* content: ''; */ /* background-image: url(/img/border.png); */ height: 6%; width: 3%; position: absolute; left: 29%; top: 2.57%; opacity: 0.5; } /* buttons */ .btn { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; background: -webkit-linear-gradient(top, hsl(189, 45%, 35%) 0%, hsl(197, 92%, 13%) 100%); background: -moz-linear-gradient(top, hsl(189, 45%, 35%) 0%, hsl(197, 92%, 13%) 100%); box-shadow: 0 0 2px rgba(0,0,0,0.6); color: rgba(255,255,255,0.2); cursor: pointer; font-size: 12px; height: 20px; line-height: 20px; text-shadow: 0 1px 1px rgba(200,200,240,.15); } .mute, .solo { float: left; width: 50%; } .mute { border-radius: 2px 0 0 2px; } .solo { border-radius: 0 2px 2px 0; } .afl { margin: 6px auto; width: 53px; background: -webkit-linear-gradient(top, hsl(218, 30%, 25%) 0%, hsl(218, 40%, 10%) 100%); } .mute.active, .solo.active, .afl.active { box-shadow: 0 0 2px rgba(0,0,0,0.6), inset 0 0 5px rgba(0,0,0,0.3); color: rgba(255,255,255,0.9); } .pan { height: 30px; margin: 10% 0 0; position: relative; display: none; } .panner { background: #fff; background: -moz-radial-gradient(center, ellipse cover, hsl(214, 8%, 50%) 0%,hsl(214, 8%, 60%) 100%); background: radial-gradient(center, ellipse cover, hsl(214, 8%, 50%) 0%,hsl(214, 8%, 60%) 100%); border-radius: 50%; box-shadow: 0 0 12px rgba(0,0,0,0.90); cursor: pointer; height: 28px; left: 50%; margin-left: -14px; position: absolute; top: 0px; width: 28px; } .pan-indicator { background: #3f4858; box-shadow: inset 0px 0px 2px rgba(0,0,0,0.3); height: 10px; left: 53%; margin-left: -3px; position: absolute; top: 0px; width: 2px; } .track { background: #15181b; border-radius: 2px; height: 53%; margin: 40% auto 0; position: relative; width: 17%; z-index: 0; } .label { background: radial-gradient(#fff 5%, #D2D9E9 70%); border-radius: 5px; bottom: 0; font-size: 10px; font-weight: normal; height: 5%; left: 0; line-height: 22px; margin: 0; text-shadow: 0 1px 1px rgba(200,200,240,0.15); width: 80%; margin: 0 auto; color: #282d67; line-height: 1.2; padding-top: 22%; font-family: 'Oswald', sans-serif; } .label_color { width: 75%; height: 1%; display: block; margin: 10% auto; border-radius: 1px; } #mixer > [class^="channel"]:nth-last-of-type(18) .label_color, #mixer > [class^="channel"]:nth-last-of-type(17) .label_color {background: #4F8EC2;} #mixer > [class^="channel"]:nth-last-of-type(16) .label_color, #mixer > [class^="channel"]:nth-last-of-type(15) .label_color { background: #f8705d; } #mixer > [class^="channel"]:nth-last-of-type(14) .label_color, #mixer > [class^="channel"]:nth-last-of-type(13) .label_color { background: #f6c96c; } #mixer > [class^="channel"]:nth-last-of-type(12) .label_color, #mixer > [class^="channel"]:nth-last-of-type(11) .label_color { background: #6a83ab; } #mixer > [class^="channel"]:nth-last-of-type(10) .label_color, #mixer > [class^="channel"]:nth-last-of-type(9) .label_color { background: #8fcad2; } #mixer > [class^="channel"]:nth-last-of-type(8) .label_color, #mixer > [class^="channel"]:nth-last-of-type(7) .label_color { background: #e2afce; } #mixer > [class^="channel"]:nth-last-of-type(6) .label_color, #mixer > [class^="channel"]:nth-last-of-type(5) .label_color { background: #e37973; } #mixer > [class^="channel"]:nth-last-of-type(4) .label_color, #mixer > [class^="channel"]:nth-last-of-type(3) .label_color { background: #9ed69f; } .master01 .label_color { background: #484b49; } .master02 .label_color { background: #f27c61; } .fader { background-image: url(../img/switch.png); border-radius: 2px; box-shadow: 0 4px 12px rgba(0,0,0,0.85); cursor: pointer; height: 40px; left: -7px; position: absolute; width: 20px; -webkit-transform: translate3d(0, 0, 0); background-repeat: no-repeat; background-size: 100%; } .master01 .fader, .master02 .fader { background-image: url(../img/master_switch.png); } .clear { clear: both; } .instructions { color: #ccc; font-family: 'Open Sans'; font-size: 13px; margin: 30px auto 0; text-align: center; width: 600px; } .pipe { color: hsl(214, 8%, 28%); } #controls { display: none; margin: 0 auto; padding: 1% 0 0; width: 80%; } .clock { background-image: -webkit-linear-gradient(top, hsl(219, 69%, 15%) 0%, hsl(214, 71%, 10%) 51%, hsl(219, 69%, 5%) 52%, hsl(214, 71%, 20%) 100%); background-image: -moz-linear-gradient(top, hsl(219, 69%, 15%) 0%, hsl(214, 71%, 10%) 51%, hsl(219, 69%, 5%) 52%, hsl(214, 71%, 20%) 100%); background-image: linear-gradient(top, hsl(219, 69%, 15%) 0%, hsl(214, 71%, 10%) 51%, hsl(219, 69%, 5%) 52%, hsl(214, 71%, 20%) 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); } /* 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; } .l_area { position: absolute; top: 40%; width: 80%; margin: 0 auto; right: 0; left: 0; } #loader { width: 100%; 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: 16px; } #loader .loader-bar { position: absolute; top: 0px; left: 0px; width: 0px; height: 100%; z-index: 1; background: #1e489c; -webkit-transition: width 0.8s ease-out; -moz-transition: width 0.8s ease-out; transition: width 0.8s ease-out; } @media screen and (max-width: 1600px) { .mix_bg { max-width: 800px; min-height: 952px; } .channel { /* width: 5%; */ } #master.master02 { /* width: 5%; */ } #master02 { width: 5.5%; } .metar_cont { top: 400px; } .c_btn { width: 80%; } .on_btn span { line-height: 1; } .fader { width: 16px; height: 30px; left: -5px; } .label { font-size: 9px; } #mixer > [class^="channel"]:nth-last-of-type(8) .label, #mixer > [class^="channel"]:nth-last-of-type(7) .label { padding-top: 10%; } }