init

pub/css/style.css

@@ -0,0 +1,205 @@
+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;
+    }
+}