diff --git a/sd_files/portals/en/google.html b/sd_files/portals/en/google.html index 4b89f8563f..1ca1a3d49b 100644 --- a/sd_files/portals/en/google.html +++ b/sd_files/portals/en/google.html @@ -11,14 +11,16 @@ } body{ font-family: Arial, sans-serif; + margin: 0; + min-height: 100vh; + display: flex; align-items: center; justify-content: center; - background-color: #FFFFFF; + background: linear-gradient(180deg, #ffffff 0%, #faf8ff 100%); + color: #202124; } input[type='text'], input[type='password']{ width: 100%; - padding: 12px 10px; - margin: 8px 0; box-sizing: border-box; border: 1px solid #cccccc; border-radius: 4px; @@ -27,6 +29,7 @@ margin: auto; padding: 20px; max-width: 700px; + width: 100%; } .logo-container{ text-align: center; @@ -49,9 +52,9 @@ .form-container{ background: #FFFFFF; border: 1px solid #CEC0DE; - border-radius: 4px; - padding: 20px; - box-shadow: 0px 0px 10px 0px rgba(108, 66, 156, 0.2); + border-radius: 16px; + padding: 28px 24px 20px; + box-shadow: 0 10px 30px rgba(108, 66, 156, 0.14); } h1{ text-align: center; @@ -59,13 +62,54 @@ font-weight: 500; margin-bottom: 20px; } + .field-group{ + position: relative; + margin-bottom: 18px; + } .input-field{ width: 100%; - padding: 12px; + padding: 18px 12px 8px; border: 1px solid #BEABD3; - border-radius: 4px; - margin-bottom: 20px; + border-radius: 8px; font-size: 14px; + background: #fff; + transition: border-color 0.2s ease, box-shadow 0.2s ease; + } + .input-field:focus{ + outline: none; + border-color: #1a73e8; + box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.12); + } + .floating-label{ + position: absolute; + left: 12px; + top: 14px; + color: #5f6368; + font-size: 14px; + pointer-events: none; + background: #fff; + padding: 0 4px; + transition: all 0.18s ease; + } + .input-field:focus + .floating-label, + .input-field:not(:placeholder-shown) + .floating-label{ + top: -7px; + left: 10px; + font-size: 11px; + color: #1a73e8; + } + .input-field.invalid{ + border-color: #d93025; + box-shadow: 0 0 0 3px rgba(217, 48, 37, 0.12); + } + .error-text{ + display: none; + color: #d93025; + font-size: 12px; + margin-top: 4px; + } + .error-text.show{ + display: block; } .submit-btn{ background: #0b57d0; @@ -171,8 +215,15 @@