Checking new interface

Author: waridrox

Diff for: app/assets/stylesheets/new-capture.css

@@ -1,31 +1,3 @@
-/*.navbar-fixed-top .nav li {*/
-/*  padding-top: 3px;*/
-/*  font-family: junction, sans-serif;*/
-/*}*/
-/*#webcam-msg {*/
-/*  position: absolute;*/
-/*  z-index: 2;*/
-/*  background: #777;*/
-/*  color: #aaa;*/
-/*  text-align: center;*/
-/*  height: 240px;*/
-/*  width: 320px;*/
-/*  font-size: 14px;*/
-/*}*/
-/*a {*/
-/*  color: #0af;*/
-/*}*/
-/*#webcam-msg p {*/
-/*  padding: 80px 20px;*/
-/*}*/
-/*#webcam {*/
-/*  position: absolute;*/
-/*  z-index: 1;*/
-/*}*/
-/*#header.navbar-inner {*/
-/*  margin-right: -40px;*/
-/*}*/
-
 html {
   display: block;
   width: 100%;
@@ -41,10 +13,11 @@ body {
 .full-strecth-block {
   display: block;
   width: 100%;
-  height: 100%;
+  height: auto;
 }
 
 div.full-strecth-flex-vertical.content, div.full-strecth-flex-vertical {
+  padding-top: 8rem;
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -58,6 +31,37 @@ div.full-strecth-flex-horizontal {
   height: 100%;
 }
 
+div#capture-phase-right {
+  background-color: #353535;
+  height: fit-content;
+  box-shadow: 1px 1px 11px 2px #151515;
+  border-radius: 5px;
+}
+
+div#canvas-prev-responsive {
+  background-color: #353535;
+  height: fit-content;
+  box-shadow: 1px 1px 11px 2px #151515;
+  border-radius: 5px;
+}
+
+div#capture-phase-right {
+  margin-left: 1.5rem;
+  margin-right: 1.5rem;
+  margin-top: 10rem;
+}
+
+div#capture-settings {
+  height: 100vh;
+  width: 100%;
+}
+
+
+div#canvas-prev-responsive {
+  margin-top: 1rem;
+  margin-left: 1rem;
+}
+
 .bs-stepper .content.dstepper-block {
   display: flex;
   flex-direction: column;
@@ -88,34 +92,6 @@ div.full-strecth-flex-horizontal {
   justify-content: center;
 }
 
-.btn-group-justified {
-  display: table;
-  width: 100%;
-  table-layout: fixed;
-  border-collapse: separate; 
-}
-  
-.btn-group-justified .btn, .btn-group-justified .btn-group {
-  float: none;
-  display: table-cell;
-  width: 1%; 
-}
-
-.btn-group-justified .btn .btn, .btn-group-justified .btn-group .btn {
-  width: 100%; 
-}
-
-.btn-group-justified .btn .dropdown-menu, .btn-group-justified .btn-group .dropdown-menu {
-  left: auto; 
-}
-
-/*hr {*/
-/*  border-color: #666;*/
-/*}*/
-
-/*.modal {*/
-/*  color: #333;*/
-/*}*/
 #graph {
   width: 1024px;
   height: 200px;
@@ -138,7 +114,7 @@ div.bs-stepper-content {
 }
 
 .bs-stepper .content.fade.active, .bs-stepper-pane.fade.active {
-  z-index: 90;
+  z-index: 9999;
 }
 
 .bs-stepper .line {
@@ -149,43 +125,146 @@ div.bs-stepper-content {
   color: #007bff;
 }
 
+.navbar {
+  border-radius: 0px;
+}
 
+@media screen and (max-width: 350px), screen and (max-height: 570px) {
+  body {
+    font-size: 10px;
+  }
+}
 
 @media only screen and (max-width: 1200px) {
   #graph {
     width: 800px;
   }
+  div#capture-settings {
+    height: 100vh;
+  }
 }
 
 @media only screen and (max-width: 992px) {
+  div#testnav {
+    padding: 0rem;
+  }
+
   #graph {
     width: 650px;
   }
+
+  .full-strecth-block {
+    padding-left: 0rem;
+    padding-right: 0rem;
+  }
+
+  .bs-stepper-header {
+    margin: 0rem;
+  }
+
+  div#capture-phase-right {
+    margin-top: 10rem;
+  }
+  
+  div#capture-settings {
+    height: 100vh;
+  }
 }
 
-@media only screen and (max-width: 760px) {
+@media only screen and (max-width: 767px) {
+  div#testnav {
+    padding: 0rem;
+  }
+
   #graph {
     width: 520px;
   }
+
+  .full-strecth-block {
+    padding-left: 0rem;
+    padding-right: 0rem;
+  }
+
   div#canvas-prev-responsive {
     display: none;
   }
-  div#test-save-hide {
-    display: none;
+
+  .bs-stepper-header {
+    margin: 0rem;
+  }
+
+  div#capture-phase-right {
+    margin-top: 10rem;
+  }
+
+  div#capture-settings {
+    height: auto;
   }
 }
 
 @media only screen and (max-width: 576px) {
+  body {
+    font-size: 10px;
+  }
+  
+  div#testnav {
+    padding: 0rem;
+  }
+
   #graph {
     width: auto;
   }
+
+  .full-strecth-block {
+    padding-left: 0rem;
+    padding-right: 0rem;
+  }
+
+  div#canvas-prev-responsive {
+    display: none;
+  }
+
+  .bs-stepper-header {
+    margin: 0rem;
+  }
+
+  div#capture-phase-right {
+    margin-top: 10rem;
+  }
+  
+  div#capture-settings {
+    height: 100vh;
+  }
 }
 
+@media screen and (min-height: 360px) and (max-height: 600px) {
+  div#capture-settings {
+    height: auto;
+  }
+}
+
+@media only screen and (max-width: 1000px) and (orientation:landscape) {
+  div#capture-settings {
+      height: auto;
+      position: absolute;
+  }
+}
+
+@media (max-width: 767px) {
+  .navbar-inner {
+    margin-right: 0px !important;
+  }
+
+  .navbar {
+    margin-bottom: 0px;
+    z-index: 9999;
+  }
+}
 
 /* Individual Component Style -------------------------------------------*/
 
 #landing-page:before {
-  background-image: url('./asset/landing-wallpaper.jpg');
+  background-image: url('/images/landing-wallpaper.jpg');
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
@@ -199,15 +278,29 @@ div.bs-stepper-content {
   z-index: -1;
   opacity: 0.3;
 }
+
 #landing-page, #landing-page2 {
   justify-content: center;
   align-items: center;
 }
+
 #landing-page-content {
   width: 100%;
-  max-width: 100%;
+  justify-content: space-around;
   text-align: center;
+  align-items: center;
+  padding: 5rem;
+  margin: 0 auto;
+  margin-top: 7rem;
+  margin-bottom: 2rem;
+  position: absolute;
+  z-index: 100;
 }
+
+#landing-page-content h1 {
+  margin-top: 0px;
+}
+
 #landing-page-content p {
   color: grey
 }
@@ -224,7 +317,7 @@ div.bs-stepper-content {
   align-items: center;
   padding: 0 25rem;
   margin: 0 auto;
-  margin-top: 4rem;
+  margin-top: 1rem;
   position: absolute;
   z-index: 100;
 }
@@ -234,7 +327,6 @@ div.bs-stepper-content {
   height: 0;
 }
 
-
 #webcam {
   position: relative;
 }
@@ -243,12 +335,17 @@ div.bs-stepper-content {
   text-align: center;
 }
 
+.spectrum-example-vertical {
+  text-align: center;
+}
+
 #settings, #capture {
   background: #272727;
   color: #b7b7b7
 }
 
 #capture .full-strecth-flex-horizontal {
+  margin-top: 6rem;
   height: 60%;
 }
 
@@ -269,8 +366,23 @@ div.bs-stepper-content {
   margin: 1rem
 }
 
+div#capture-settings {
+    background: #272727;
+    color: #b7b7b7;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+div#capture-page-content {
+  background: #272727;
+  color: #b7b7b7;
+}
+
 #capture-page-next {
-  margin-top: 4rem
+  margin:0 auto;
+  display:block;
+  margin-top: 2rem;
 }
 
 #plotting > div:first-child {
@@ -289,14 +401,15 @@ div.bs-stepper-content {
   height: 300px !important;
 }
 
-
 .fade.in {
   opacity: 0;
 }
 
+.navbar-inner {
+  margin-right: 0px !important;
+}
 
-
-/* #setting {
-  height: 100%;
-  overflow: hidden;
-} */
+.navbar {
+  margin-bottom: 0px;
+  z-index: 9999;
+}