From d29473d3b1cc9346b13119081b8ef80ec649734a Mon Sep 17 00:00:00 2001
From: nessi <sascha@nesterovic.cc>
Date: Thu, 12 Feb 2026 10:27:08 +0100
Subject: [PATCH] Update styles for input focus effect and layout adjustments

Replaced the spin animation with a pulsating glow effect for input focus, improving aesthetics and visibility. Adjusted layout proportions and reduced the height of `.login-brand` for better responsiveness and design consistency.
---
 frontend/src/styles.css | 39 ++++++++++++---------------------------
 1 file changed, 12 insertions(+), 27 deletions(-)

diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 61b89b1..bd1cc6f 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -231,12 +231,12 @@ td {
 .login-shell {
   width: min(1120px, 96vw);
   display: grid;
-  grid-template-columns: 1.1fr 0.9fr;
+  grid-template-columns: 1fr 0.95fr;
   gap: 18px;
 }
 
 .login-brand {
-  min-height: 420px;
+  min-height: 380px;
   display: grid;
   align-content: center;
   gap: 14px;
@@ -267,35 +267,17 @@ td {
 }
 
 .input-shell {
-  position: relative;
   border: 1px solid #2b3f74;
   border-radius: 12px;
   padding: 1px;
   background: #0e1731;
-  transition: border-color 0.2s ease;
-}
-
-.input-shell::before {
-  content: "";
-  position: absolute;
-  inset: -1px;
-  border-radius: 12px;
-  padding: 1px;
-  background: conic-gradient(#38bdf8, #4f6ee7, #38bdf8);
-  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-  -webkit-mask-composite: xor;
-  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-  mask-composite: exclude;
-  opacity: 0;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
 }
 
 .input-shell:focus-within {
-  border-color: transparent;
-}
-
-.input-shell:focus-within::before {
-  opacity: 1;
-  animation: spin 1.2s linear infinite;
+  border-color: #38bdf8;
+  box-shadow: 0 0 0 3px #38bdf830, 0 0 20px #38bdf830;
+  animation: focusPulse 1.6s ease-in-out infinite;
 }
 
 .input-shell input {
@@ -317,9 +299,12 @@ td {
   filter: brightness(1.05);
 }
 
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
+@keyframes focusPulse {
+  0%, 100% {
+    box-shadow: 0 0 0 3px #38bdf820, 0 0 14px #38bdf820;
+  }
+  50% {
+    box-shadow: 0 0 0 3px #38bdf840, 0 0 24px #38bdf840;
   }
 }