From: Ardis Lu <ardisglu@gmail.com>
Date: Sat, 7 Jan 2023 04:58:12 +0000 (-0800)
Subject: Add drop shadows to remaining elements
X-Git-Url: https://git.ardis.lu/?a=commitdiff_plain;h=58b87cddbf9c7a2c39e89466441d65f9d0e817fc;p=utf-8-visualizer

Add drop shadows to remaining elements
---

diff --git a/index.html b/index.html
index 8f3e5df..0550acf 100644
--- a/index.html
+++ b/index.html
@@ -48,6 +48,13 @@
         border-radius: 4px;
         padding: 4px;
         animation: 800ms fadeIn both;
+        transition: filter 800ms;
+      }
+
+      :host(:hover),
+      :host(:focus-within) {
+        filter: drop-shadow(0 0 4px hsl(222deg 50% 50%));
+        transition: filter 400ms;
       }
 
       ::slotted(*) {
diff --git a/style.css b/style.css
index 459ce3e..85bfdab 100644
--- a/style.css
+++ b/style.css
@@ -64,7 +64,7 @@ a {
 
 a:hover,
 a:focus-within {
-  filter: brightness(120%);
+  filter: brightness(120%) drop-shadow(0 0 4px hsl(222deg 50% 50%));
   transition: filter 400ms;
 }