From: Ardis Lu <ardisglu@gmail.com>
Date: Tue, 17 Dec 2024 07:00:56 +0000 (-0800)
Subject: Improve input transitions on hover and focus
X-Git-Url: https://git.ardis.lu/?a=commitdiff_plain;h=33b875563cfadcccb6dfa314e08373ffbf645c78;p=safe-owners

Improve input transitions on hover and focus

outline-color gives a simple drop-shadow effect while minimizing complexity
---

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">