html, body { height: 100vh; width: 100vw; } body{ font-size:.875rem; background-color:#ececec; max-width:1440px; max-height: 100vh; } option { font-weight: normal; display: block; white-space: pre; min-height: 1.2em; } .wrapper{ width:100%; height: 100vh; align-items:stretch; } /* Sidebar & Content */ #content,#sidebar{ min-height:100vh; max-height:100vh; transition:all .3s; padding: 1em; } #sidebar{ width:30%; min-width:30%; max-width:30%; position:fixed; top:0; left:0; z-index:999; overflow-y: auto; overflow-x: hidden; } #sidebar.active{ margin-left:-30%; } #content{ width:65%; padding-right: 5%; margin-right: 1%; height: 100vh; } #content.active { width: 100%; margin-right: auto; } .optionview.row{ margin-bottom: 1.0em; } ul.nav { white-space: nowrap; overflow-x: auto; } #optionsNav > ul, #optionsNav > .nav, #optionsNav > ul > li { display: inline-block; float: none; transition:all .3s; } #optionWindow { margin-left: auto; margin-right: auto; } .highlight { padding: 5px; background-color: #93CCEA; } .topBtns { margin-bottom: 1.0em; } .imageRow { margin-bottom: 1em; margin-left: 0.8em; } /* Movement buttons & option nav */ .movementBtn,.nav-item{ cursor:pointer; } .movementBtn{ width:2.7em; height:2.7em; color:#999; margin:.4em; transition: transform .2s; } .movementBtn:hover{ color:#000; transform: scale(1.2); } .movementBtn:active{ color:green; transform: scale(1.2); text-shadow:0 0 6px green; } #ptzSpeedBtnRow,#setCallBtnRow{ padding-top:.8em; } /* Message & Stream Stage */ #stageContainer { height: 80%; width: 100%; position: static; } #streamStage, #msgStage { position: absolute; top: 0; left: 0; margin-right: auto; margin-left: auto; } #streamStage { /* max-height: 100%; */ right: 0; } #msgStage { transition:all .4s; display:none; z-index: 10; } .errMsg { opacity: 0.5; color: #721c24; background-color: #f8d7da; border-color: #f5c6cb; } .successMsg { opacity: 0.5; color: #155724; background-color: #d4edda; border-color: #c3e6cb; } /* Mobile Devices */ @media (max-width:414px){ .wrapper{ width:100vw; height: 100vh; margin-right: auto; margin-left: auto; } /* Sidebar & Content */ #content,#sidebar{ transition:all .3s; margin: 0; z-index: auto; right: auto; left: auto; min-width: 100vw; max-width: 100vw; } #sidebar{ position: relative; height: 50%; width:100%; padding: 20px; overflow-y: scroll; top: 50%; max-height: 50%; min-height: 50%; } #sidebar.active{ display: none; } #content{ position: absolute; width:100%; max-width: 100vw; height: 50%; min-height: 50%; max-height: 50%; top:0px; overflow-x: hidden; } #content.active { height: 100%; max-height: 100%; min-height: 100%; max-width: 100vw; } #optionWindow { overflow-y: scroll; } /* stage */ #stageContainer { height: 70%; position: inherit; } #streamStage { position: static; } }