nessi/NexaPG
1
0
Fork 0
Code Issues 19 Pull Requests Actions Packages Projects Releases 13 Activity

Update styles for input focus effect and layout adjustments

Browse Source 
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.
This commit is contained in:
Sascha Nesterovic
2026-02-12 10:27:08 +01:00
parent 672473603e
commit d29473d3b1
1 changed files with 12 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
frontend/src/styles.css
View File

@@ -231,12 +231,12 @@ td {
.login-shell { .login-shell {
width: min(1120px, 96vw); width: min(1120px, 96vw);
display: grid; display: grid;
grid-template-columns: 1.1fr 0.9fr; grid-template-columns: 1fr 0.95fr;
gap: 18px; gap: 18px;
} }
.login-brand { .login-brand {
min-height: 420px; min-height: 380px;
display: grid; display: grid;
align-content: center; align-content: center;
gap: 14px; gap: 14px;
@@ -267,35 +267,17 @@ td {
} }
.input-shell { .input-shell {
position: relative;
border: 1px solid #2b3f74; border: 1px solid #2b3f74;
border-radius: 12px; border-radius: 12px;
padding: 1px; padding: 1px;
background: #0e1731; background: #0e1731;
transition: border-color 0.2s ease; transition: border-color 0.2s ease, box-shadow 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;
} }
.input-shell:focus-within { .input-shell:focus-within {
border-color: transparent; border-color: #38bdf8;
} box-shadow: 0 0 0 3px #38bdf830, 0 0 20px #38bdf830;
animation: focusPulse 1.6s ease-in-out infinite;
.input-shell:focus-within::before {
opacity: 1;
animation: spin 1.2s linear infinite;
} }
.input-shell input { .input-shell input {
@@ -317,9 +299,12 @@ td {
filter: brightness(1.05); filter: brightness(1.05);
} }
@keyframes spin { @keyframes focusPulse {
to { 0%, 100% {
transform: rotate(360deg); box-shadow: 0 0 0 3px #38bdf820, 0 0 14px #38bdf820;
}
50% {
box-shadow: 0 0 0 3px #38bdf840, 0 0 24px #38bdf840;
} }
} }