diff --git a/src/App.svelte b/src/App.svelte index 46edee8..d3e8a7b 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -211,7 +211,7 @@
-

Filters

+

Filters (click to add)

@@ -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; } } diff --git a/src/Filter.svelte b/src/Filter.svelte index 7bf4447..d94e84b 100644 --- a/src/Filter.svelte +++ b/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 { diff --git a/src/FilterPicker.svelte b/src/FilterPicker.svelte index 562f0cf..b4c72b9 100644 --- a/src/FilterPicker.svelte +++ b/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; } diff --git a/src/app.css b/src/app.css index ee39201..7c664f5 100644 --- a/src/app.css +++ b/src/app.css @@ -2,6 +2,8 @@ box-sizing: border-box; } :root { + --b1: #004dff; + --b2: #f19696b3; } a {