mdified new-capture.css slightly

app/assets/stylesheets/new-capture.css

@@ -0,0 +1,302 @@
+/*.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%;
+  height: 100%;
+}
+
+body {
+  background: #f9f9f9;
+  color: black;
+  position: relative;
+}
+
+.full-strecth-block {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+div.full-strecth-flex-vertical.content, div.full-strecth-flex-vertical {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+
+div.full-strecth-flex-horizontal {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  height: 100%;
+}
+
+.bs-stepper .content.dstepper-block {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+
+.demo-button {
+  border: none;
+  color: white;
+  padding: 1rem;
+  border-radius: 6px;
+  background-image: linear-gradient(to bottom,#08c,#04c);
+}
+
+.tab-content {
+  display: flex;
+  flex-direction: row;
+  overflow: auto;
+}
+
+.tab-pane {
+  min-width: 100%;
+}
+
+.center-content {
+  align-items: center;
+  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;
+  margin: 10px 0px;
+}
+
+.bs-stepper:not(.vertical) .content.dstepper-none {
+  display: initial;
+}
+div.content {
+  position: absolute;
+}
+
+div.bs-stepper-content {
+  padding: 0;
+}
+
+.bs-stepper .content.fade {
+  visibility: initial !important;
+}
+
+.bs-stepper .content.fade.active, .bs-stepper-pane.fade.active {
+  z-index: 90;
+}
+
+.bs-stepper .line {
+  background-color: grey;
+}
+
+.step.active .step-trigger{
+  color: #007bff;
+}
+
+
+
+@media only screen and (max-width: 1200px) {
+  #graph {
+    width: 800px;
+  }
+}
+
+@media only screen and (max-width: 992px) {
+  #graph {
+    width: 650px;
+  }
+}
+
+@media only screen and (max-width: 760px) {
+  #graph {
+    width: 520px;
+  }
+  div#canvas-prev-responsive {
+    display: none;
+  }
+  div#test-save-hide {
+    display: none;
+  }
+}
+
+@media only screen and (max-width: 576px) {
+  #graph {
+    width: auto;
+  }
+}
+
+
+/* Individual Component Style -------------------------------------------*/
+
+#landing-page:before {
+  background-image: url('./asset/landing-wallpaper.jpg');
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+  content: ' ';
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+  opacity: 0.3;
+}
+#landing-page, #landing-page2 {
+  justify-content: center;
+  align-items: center;
+}
+#landing-page-content {
+  width: 100%;
+  max-width: 100%;
+  text-align: center;
+}
+#landing-page-content p {
+  color: grey
+}
+
+#landing-page-content span  {
+  font-size: 1.7rem;
+  opacity: 0.5;
+}
+
+#stepper, .bs-stepper-header {
+  width: 100%;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  padding: 0 25rem;
+  margin: 0 auto;
+  margin-top: 4rem;
+  position: absolute;
+  z-index: 100;
+}
+#stepper .dotted-line {
+  width: 11rem;
+  border: 1px dashed grey;
+  height: 0;
+}
+
+
+#webcam {
+  position: relative;
+}
+
+.spectrum-example-horizontal {
+  text-align: center;
+}
+
+#settings, #capture {
+  background: #272727;
+  color: #b7b7b7
+}
+
+#capture .full-strecth-flex-horizontal {
+  height: 60%;
+}
+
+#capture .full-strecth-flex-horizontal > div {
+  background-color: #353535;
+  height: 100%;
+  box-shadow: 1px 1px 11px 2px #151515;
+  border-radius: 5px;
+}
+
+#capture-phase-right .btn-group {
+  display: flex;
+  width: 100%;
+  justify-content: flex-end;
+}
+
+#capture-phase-right > div {
+  margin: 1rem
+}
+
+#capture-page-next {
+  margin-top: 4rem
+}
+
+#plotting > div:first-child {
+  width: 100%;
+  max-width: 1000px;
+}
+
+#plotting-note {
+  background: #dedede;
+  max-width: 300px;
+  padding: 1.5rem;
+  border-radius: 5px;
+}
+
+#graph1 {
+  height: 300px !important;
+}
+
+
+.fade.in {
+  opacity: 0;
+}
+
+
+
+/* #setting {
+  height: 100%;
+  overflow: hidden;
+} */