Merge branch 'gallery_filter' into 'v3'

Adds filtering to the gallery

See merge request openflexure/openflexure-microscope-server!621

webapp/src/assets/less/variables.less

@@ -249,6 +249,48 @@
     }
 }
 
+// A button styled like text. For use in menus
+.ofm-text-button {
+  display: block;
+  background: none;
+  border: none;
+  padding: 8px 10px;
+  cursor: pointer;
+  color: @global-color;
+  width: 100%;
+  text-align: left;
+  font-weight: 600;
+}
+.hook-inverse() {
+    .ofm-text-button{
+        color: @inverse-global-color;
+    }
+}
+
+/*
+ * Opaque - button-like colours
+ *
+ * The buttons are transparent. If an element overlays others it should
+ * Look the same as the buttons, but have no transparency.
+ */
+.ofm-opaque-element{
+    background: #f5f5f5;
+}
+.hook-inverse() {
+    .ofm-opaque-element{
+        background: #282626;
+    }
+}
+
+.ofm-opaque-highlight:hover {
+  background: #fff;
+}
+.hook-inverse() {
+    .ofm-opaque-highlight:hover {
+        background: #000;
+    }
+}
+
 /*
  * Accordion
  */