add css for selected filter

yashrajbharti · Apr 28, 2024 · 3b8eb23 · 3b8eb23
1 parent 26f5929
commit 3b8eb23
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/js/apply-filters.mjs b/js/apply-filters.mjs
@@ -12,7 +12,7 @@ export const applyFilters = () => {
     } else {
       if (e.target.hasAttribute("name")) {
         applyLensFilter(e.target.value);
-        // checkbox.checked = false;
+        // checkbox.checked = false;  this was for the no cancel button approach
       }
     }
   });

diff --git a/style.css b/style.css
@@ -75,7 +75,9 @@ video.flip {
     justify-content: center;
     flex-direction: column;
     border: 1.5px solid transparent;
-    background-color: black;
+    background-color: rgba(0, 0, 0, 0.742);
+    -webkit-backdrop-filter: blur(20px);
+    backdrop-filter: blur(20px);
     border-radius: 48px;
     overflow: hidden;
     cursor: pointer;
@@ -106,6 +108,10 @@ video.flip {
     cursor: pointer;
 }
 
+.lenses:has(.filters #filter-toggle:checked) {
+    translate: 0 -50px;
+}
+
 .lenses:has(.filters #filter-toggle:not(:checked)) .cancel {
     display: none;
 }