Added icon component. Stylized filter bar.

public/css/style.css

@@ -1,3 +1,37 @@
+.filters-bar[data-v-5533e378] {
+  display: block;
+  background: rgba(0, 0, 0, 0.1);
+  padding: .5rem 1rem;
+}
+.filters-bar .icon[data-v-5533e378] {
+    fill: rgba(0, 0, 0, 0.5);
+}
+.filters[data-v-5533e378] {
+  display: inline-block;
+  list-style: none;
+  padding: .5rem;
+  margin: 0;
+}
+.filters .toggle[data-v-5533e378] {
+    color: rgba(0, 0, 0, 0.5);
+    background: rgba(0, 0, 0, 0.1);
+    box-sizing: border-box;
+    padding: .5rem;
+    border-radius: .5rem;
+    font-size: .9rem;
+    font-weight: bold;
+    cursor: pointer;
+}
+.filters .toggle .check[data-v-5533e378] {
+      display: none;
+}
+.filters .toggle.active[data-v-5533e378] {
+      color: #fff;
+      background: #ff886c;
+}
+.filter[data-v-5533e378] {
+  display: inline-block;
+}
 .scenes[data-v-5533e378] {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
@@ -148,6 +182,13 @@
     width: .6rem;
 }
 
+.noselect {
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -webkit-tap-highlight-color: transparent; }
+
 html,
 body {
   height: 100%; }
@@ -182,17 +223,40 @@ body {
   margin: 0;
 }
 
-.container[data-v-4f86a868] {
+.container {
   height: 100%;
   display: flex;
   flex-direction: column;
   overflow: hidden;
 }
-.content[data-v-4f86a868] {
+.content {
+  display: flex;
+  flex-direction: column;
   flex-grow: 1;
+  overflow: hidden;
+}
+.content-inner {
+  flex-grow: 1;
+  padding: 1rem;
   overflow-y: auto;
 }
-.content-inner[data-v-4f86a868] {
-  padding: 1rem;
+
+.icon {
+  fill: #222;
+  display: inline-block;
+  flex-shrink: 0;
+  width: 1rem;
+  height: 1rem;
+}
+.icon svg {
+    width: 100%;
+    height: 100%;
+}
+.icon.active {
+    fill: rgba(0, 0, 0, 0.5);
+}
+.icon.active:hover {
+      fill: #222;
+      cursor: pointer;
 }