color

src/App.svelte

@@ -211,7 +211,7 @@
   </section>
 
   <section class="filters">
-    <h3>Filters</h3>
+    <h3>Filters (click to add)</h3>
     <div class="inner-filters">
       <div class="filter-picker">
         <FilterPicker select={"video"} />
@@ -247,10 +247,12 @@
   }
 
   section {
-    border: 1px solid #999;
+    /* border: 1px solid #999; */
+    /* box-shadow: 7px 7px 0px rgba(0, 0, 0, 0.7); */
+    border: 1px solid var(--b1);
+    box-shadow: 7px 7px var(--b2);
     padding: 10px;
     background-color: rgb(245, 245, 245);
-    box-shadow: 7px 7px 0px rgba(0, 0, 0, 0.7);
   }
 
   .header {
@@ -395,15 +397,15 @@
     .filter-picker {
       width: 100%;
       margin-bottom: 20px;
-			height: 300px;
-			position: static;
+      height: 300px;
+      position: static;
     }
     .filters-holder {
       grid-template-columns: repeat(1, 1fr);
       grid-gap: 10px;
       flex: 1;
       align-content: start;
-			padding: 0;
+      padding: 0;
     }
   }
 </style>

src/Filter.svelte

@@ -92,7 +92,8 @@
   .filter-holder {
     background-color: #fff;
     padding: 10px;
-    border: 1px solid #999;
+    /* border: 1px solid #999; */
+		border: 1px solid var(--b2);
     /* box-shadow: 5px 5px 0px #000; */
   }
   .filter-holder,
@@ -114,7 +115,8 @@
     justify-content: space-between;
   }
   .param-holder {
-    border-top: 1px solid #999;
+    /* border-top: 1px solid #999; */
+		border-top: 1px solid var(--b2);
     padding: 10px 0px;
   }
   .param-holder:last-child {

src/FilterPicker.svelte

@@ -79,7 +79,7 @@
     flex-direction: column;
 		height: 100%;
 		padding: 10px;
-		border: 1px solid #999;
+		border: 1px solid var(--b1);
   }
 	.type {
 		color: #999;
@@ -87,7 +87,7 @@
 	}
 
   .filter {
-    border-bottom: 1px solid #000;
+    border-bottom: 1px solid var(--b1);
     padding: 10px 0px;
     cursor: pointer;
   }

src/app.css

@@ -2,6 +2,8 @@
   box-sizing: border-box;
 }
 :root {
+    --b1: #004dff;
+    --b2: #f19696b3;
 }
 
 a {