From 33b875563cfadcccb6dfa314e08373ffbf645c78 Mon Sep 17 00:00:00 2001
From: Ardis Lu <ardisglu@gmail.com>
Date: Mon, 16 Dec 2024 23:00:56 -0800
Subject: [PATCH] Improve input transitions on hover and focus

outline-color gives a simple drop-shadow effect while minimizing complexity
---
 index.html | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index 1c63c5b..2d03faa 100644
--- a/index.html
+++ b/index.html
@@ -72,15 +72,18 @@
       padding-block: 6px;
       border-radius: 4px;
       border: 1px solid hsl(216deg 50% 50%);
-      transition: filter 400ms;
+      outline: 1px solid transparent;
+      transition: filter 400ms, border-color 400ms, outline-color 400ms;
 
       &:hover {
+        outline-color: hsl(216deg 70% 75%);
         filter: brightness(105%);
-        transition: filter 200ms;
+        transition: filter 200ms, outline-color 200ms;
       }
 
       &:focus {
-        outline: 1px solid hsl(216deg 50% 50%);
+        outline-color: hsl(216deg 50% 50%);
+        transition: outline-color 200ms;
       }
     }
 
@@ -164,7 +167,7 @@
 
     <label for="rpc">JSON-RPC</label>
     <input id="rpc" name="rpc" type="url" placeholder="https://ethereum.publicnode.com" value="https://ethereum.publicnode.com" required>
-    
+
     <label for="block">Block number (empty value will default to "latest")</label>
     <input id="block" name="block" type="number" placeholder="21392053">
 
-- 
2.47.3