Reformatted capture buttons

openflexure_microscope/api/static/style_v1.css

@@ -28,18 +28,18 @@ body {
 }
 
 .left{
-    width: 250px;
+    width: 220px;
     float: left;
 }
 
 .Right{
-    width: 250px;
+    width: 280px;
     float: right;
 }
 
 .middle {
-  margin-left: 250px;
-  margin-right: 250px;
+  margin-left: 220px;
+  margin-right: 280px;
   background-color: #d3d3d3;
 }
 
@@ -50,24 +50,12 @@ body {
     clear: both;
 }
 
-/* Columns within panels */
-
-.left-col {
-    float:left;
-}
-.right-col {
-    float:right;
-}
-.clearfix::after {
-    content: "";
-    clear: both;
-    display: table;
-}
-
+/* Flexboxes */
 .flexbox {
     display: flex;
     margin-bottom: 5px;
 }
+
 .flexgrow {
     flex-grow: 1;
 }
@@ -80,13 +68,22 @@ body {
 }
 
 .capture {
-    background-color: #d3d3d3;
+    height: 75px;
+    width: 260px;
     margin-bottom: 5px;
+    background-color: #d3d3d3;
     display: flex;
 }
 
 .capture-thumb {
     width: 80px;
+    height: 75px;
+}
+
+.capture-heading {
+    font-weight: bold;
+    margin: 5px 0 5px 0;
+    display: inline-block;
 }
 
 .capture-actions {
@@ -97,5 +94,13 @@ body {
 }
 
 .capture img {
-    width: 80px;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.capture-button {
+    width: 75px;
+    margin-bottom: 3px;
+    height: 22px;
 }