ptzoptics-node-server/pub/css/style.css

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;
    }
}