Updated styles for the new implementation

publiclab · Jul 29, 2021 · ec07d02 · ec07d02
1 parent 9f21758
commit ec07d02
Showing 1 changed file with 100 additions and 1 deletion.
diff --git a/app/assets/stylesheets/new-capture.css b/app/assets/stylesheets/new-capture.css
@@ -114,6 +114,66 @@ div#capture-settings {
   width: 100%;
 }
 
+div#save-page {
+  color: #F5F5F5;
+}
+
+div.input-prepend > .add-on {
+  height: auto;
+}
+
+div.input-prepend {
+  display: flex;
+}
+
+#saveFrom {
+  width: 100%;
+}
+
+#saveForm input[type=text] {
+  height: auto;
+  width: 100%;
+}
+
+#saveForm > textarea#spectrum_notes {
+  width: 100%;
+}
+
+.add-on {
+  height: auto;
+}
+
+
+div#save-page > h3 {
+  /* font-size: 50rem; */
+}
+
+div.hidden-phone.span3 {
+  padding: 2rem;
+  /* display: none; */
+}
+@media screen and (min-width: 768px) and (max-width: 979px) {
+  .span3 {
+    width: 50%;
+  }
+}
+div.span9 {
+  padding: 2rem;
+}
+
+div select.select-calibration {
+  width: 100%;
+}
+
+a.btn-switch-calibration-capture {
+  width: 100%;
+  margin-bottom: 10px;
+}
+
+select#calibration_id {
+  width: 100%;
+}
+
 .bs-stepper .content.dstepper-block {
   display: flex;
   flex-direction: column;
@@ -183,6 +243,10 @@ div.bs-stepper-content {
   z-index: 9999;
 }
 
+.responsive-show {
+  display: none;
+}
+
 @media screen and (max-width: 350px), screen and (max-height: 570px) {
   p.capture-messages {
     font-size: 10px;
@@ -200,6 +264,10 @@ div.bs-stepper-content {
   .tooltip {
     display: none !important;
   }
+
+  .responsive-show {
+    display: block;
+  }
 }
 
 @media only screen and (max-width: 1200px) {
@@ -219,6 +287,10 @@ div.bs-stepper-content {
   .tooltip {
     display: none !important;
   }
+
+  .responsive-show {
+    display: none;
+  }
 }
 
 @media only screen and (max-width: 992px) {
@@ -264,6 +336,10 @@ div.bs-stepper-content {
   .tooltip {
     display: none !important;
   }
+
+  .responsive-show {
+    display: none;
+  }
 }
 
 @media only screen and (max-width: 767px) {
@@ -313,6 +389,10 @@ div.bs-stepper-content {
   .tooltip {
     display: none !important;
   }
+
+  .responsive-show {
+    display: block;
+  }
 }
 
 @media only screen and (max-width: 576px) {
@@ -372,6 +452,10 @@ div.bs-stepper-content {
   .tooltip {
     display: none !important;
   }
+
+  .responsive-show {
+    display: block;
+  }
 }
 
 @media screen and (min-height: 360px) and (max-height: 600px) {
@@ -396,6 +480,10 @@ div.bs-stepper-content {
   .tooltip {
     display: none !important;
   }
+
+  .responsive-show {
+    display: block;
+  }
 }
 
 @media only screen and (max-width: 1000px) and (orientation:landscape) {
@@ -421,6 +509,10 @@ div.bs-stepper-content {
   .tooltip {
     display: none !important;
   }
+
+  .responsive-show {
+    display: none;
+  }
 }
 
 @media (max-width: 767px) {
@@ -433,6 +525,10 @@ div.bs-stepper-content {
     display: none;
   }
 
+  .responsive-show {
+    display: block;
+  }
+
   .navbar-inner {
     margin-right: 0px !important;
   }
@@ -518,6 +614,10 @@ div.bs-stepper-content {
   height: 0;
 }
 
+#webcam-msg {
+  position: inherit;
+}
+
 #webcam {
   position: relative;
 }
@@ -572,7 +672,6 @@ div#capture-page-content {
 #capture-page-next {
   margin:0 auto;
   display:block;
-  margin-top: 2rem;
 }
 
 #plotting > div:first-child {