/* html { overflow: hidden; } */ /* body { font: 14pt Arial, sans-serif; background: lightgrey; display: flex; flex-direction: column; height: 100vh; width: 100%; margin: 0 0; } */ /* p { margin: 2px; } */ #analyser { display: inline-block; background: #202020; width: 95%; height: 45%; box-shadow: 0px 0px 10px blue; } #wavedisplay { display: inline-block; background: #ffffff; overflow-y: scroll; width: 95%; height: 45%; box-shadow: 0px 0px 10px blue; } /* #controls { display: flex; flex-direction: row; align-items: center; justify-content: space-around; height: 20%; width: 100%; } */ /* #record { height: 15vh; } */ /* #record.recording { background: red; background: -webkit-radial-gradient(center, ellipse cover, #ff0000 0%,lightgrey 75%,lightgrey 100%,#7db9e8 100%); background: -moz-radial-gradient(center, ellipse cover, #ff0000 0%,lightgrey 75%,lightgrey 100%,#7db9e8 100%); background: radial-gradient(center, ellipse cover, #ff0000 0%,lightgrey 75%,lightgrey 100%,#7db9e8 100%); } */ /* #record.recording { background: red; background: -webkit-radial-gradient(center, ellipse cover, #ff0000 0%,white 75%,white 100%,#7db9e8 100%); background: -moz-radial-gradient(center, ellipse cover, #ff0000 0%,white 75%,white 100%,#7db9e8 100%); background: radial-gradient(center, ellipse cover, #ff0000 0%,white 75%,white 100%,#7db9e8 100%); } */ .orange-color{ color: #dc4419; font-weight: bold; } .is-orange{ background-color: #dc4419; color: white !important; } #save, #save img { height: 10vh; } #save { opacity: 0.25;} #save[download] { opacity: 1;} #viz { height: 80%; width: 100%; display: flex; flex-direction: column; justify-content: space-around; align-items: center; } @media (orientation: landscape) { body { flex-direction: row;} #controls { flex-direction: column; height: 100%; width: 10%;} #viz { height: 100%; width: 90%;} }