Harshit Ghosh commited on
Commit ·
899cc90
1
Parent(s): 19dbcd4
Fix OTP input field design
Browse files- static/css/auth.css +23 -0
static/css/auth.css
CHANGED
|
@@ -189,6 +189,29 @@
|
|
| 189 |
.input-wrap:focus-within .input-icon { color:#6ea8fe; }
|
| 190 |
.input-wrap input.has-toggle { padding-right:40px; }
|
| 191 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 192 |
.btn-pw-toggle {
|
| 193 |
position:absolute; right:11px; top:50%; transform:translateY(-50%);
|
| 194 |
background:transparent; border:none; color:#3d5482;
|
|
|
|
| 189 |
.input-wrap:focus-within .input-icon { color:#6ea8fe; }
|
| 190 |
.input-wrap input.has-toggle { padding-right:40px; }
|
| 191 |
|
| 192 |
+
/* OTP Inputs */
|
| 193 |
+
.otp-digit {
|
| 194 |
+
width: 100%;
|
| 195 |
+
aspect-ratio: 1; /* Make it square */
|
| 196 |
+
text-align: center;
|
| 197 |
+
font-size: 1.5rem;
|
| 198 |
+
font-weight: 700;
|
| 199 |
+
background: rgba(11, 18, 36, 0.8);
|
| 200 |
+
color: #e8ecf6;
|
| 201 |
+
border: 1px solid #243356;
|
| 202 |
+
border-radius: 12px;
|
| 203 |
+
transition: all 0.2s;
|
| 204 |
+
-webkit-appearance: none;
|
| 205 |
+
}
|
| 206 |
+
.otp-digit:focus {
|
| 207 |
+
outline: none;
|
| 208 |
+
border-color: #6ea8fe;
|
| 209 |
+
background: rgba(15, 24, 50, 0.9);
|
| 210 |
+
box-shadow: 0 0 0 3px rgba(110, 168, 254, 0.15);
|
| 211 |
+
transform: translateY(-2px);
|
| 212 |
+
}
|
| 213 |
+
.otp-digit:disabled { opacity: 0.6; cursor: not-allowed; }
|
| 214 |
+
|
| 215 |
.btn-pw-toggle {
|
| 216 |
position:absolute; right:11px; top:50%; transform:translateY(-50%);
|
| 217 |
background:transparent; border:none; color:#3d5482;
|