diff --git a/examples/example-app/templates.go b/examples/example-app/templates.go index 7107eb8739..4cf9b1106b 100644 --- a/examples/example-app/templates.go +++ b/examples/example-app/templates.go @@ -8,7 +8,7 @@ import ( const css = ` body { - font-family: Arial, sans-serif; + font-family: "Eina04"; background-color: #f2f2f2; margin: 0; } @@ -46,7 +46,7 @@ const css = ` label { flex: 1; font-weight: bold; - color: #333; + color: #3d3d57; } p { @@ -132,7 +132,7 @@ const css = ` border-radius: 4px; border: 1px solid #ddd; margin: 0; - font-family: 'Courier New', Courier, monospace; + font-family: "Eina04"; overflow-x: auto; font-size: 0.9em; position: relative; @@ -249,7 +249,7 @@ var tokenTmpl = template.Must(template.New("token.html").Parse(` - - OpenStack_Logo_Mark - - - - - - - + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/web/static/main.css b/web/static/main.css index f5c61d7f39..ecfe2fe56a 100644 --- a/web/static/main.css +++ b/web/static/main.css @@ -2,14 +2,19 @@ box-sizing: border-box; } +html, body, input, button, select, textarea { + font-family: "Eina04"; +} + body { margin: 0; + font-family: "Eina04"; } .dex-container { - color: #333; + color: #3d3d57; margin: 45px auto; - max-width: 500px; + max-width: 400px; min-width: 320px; text-align: center; } @@ -19,7 +24,7 @@ body { border: 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.25), 0 0 1px rgba(0, 0, 0, 0.25); cursor: pointer; - font-size: 16px; + font-size: 14px; padding: 0; } @@ -77,7 +82,6 @@ body { .dex-btn-icon--keystone { background-color: #F5F5F5; background-image: url(../static/img/keystone-icon.svg); - background-size: contain; } .dex-btn-icon--oidc { @@ -123,7 +127,7 @@ body { } .dex-subtle-text { - color: #999; + color: #005992; font-size: 12px; } @@ -151,3 +155,10 @@ body { .dex-error-box { margin: 20px auto; } + +input:-webkit-autofill, +input:-webkit-autofill:hover, +input:-webkit-autofill:focus, +input:-webkit-autofill:active{ + -webkit-box-shadow: 0 0 0 30px white inset !important; +} \ No newline at end of file diff --git a/web/templates/header.html b/web/templates/header.html index 8cf744e51e..c60bfb00e3 100644 --- a/web/templates/header.html +++ b/web/templates/header.html @@ -6,14 +6,15 @@ {{ issuer }} + - +
- +
diff --git a/web/templates/login.html b/web/templates/login.html index f432dd0096..4ffc27fb65 100644 --- a/web/templates/login.html +++ b/web/templates/login.html @@ -1,7 +1,7 @@ {{ template "header.html" . }}
-

Log in to {{ issuer }}

+

Sign In

{{ range $c := .Connectors }}
diff --git a/web/templates/password.html b/web/templates/password.html index 3e1c2ed2da..6fb64ea747 100644 --- a/web/templates/password.html +++ b/web/templates/password.html @@ -1,19 +1,24 @@ {{ template "header.html" . }} -
-

Log in to Your Account

+ {{ end }} - + {{ if .BackLink }}
- Select another login method. + Select another login method
{{ end }}
@@ -38,6 +43,24 @@

Log in to Your Account

var el = document.querySelector('#submit-login'); el.setAttribute('disabled', 'disabled'); }; + (function() { + var pw = document.getElementById('password'); + var btn = document.getElementById('toggle-password'); + if (pw && btn) { + var icon = document.getElementById('toggle-password-icon'); + var eye = '{{ url .ReqPath "static/img/eye-solid-full.svg" }}'; + var eyeSlash = '{{ url .ReqPath "static/img/eye-slash-solid-full.svg" }}'; + btn.addEventListener('click', function() { + var isHidden = pw.type === 'password'; + pw.type = isHidden ? 'text' : 'password'; + if (icon) { + icon.setAttribute('src', isHidden ? eyeSlash : eye); + icon.setAttribute('alt', isHidden ? 'Hide password' : 'Show password'); + } + btn.setAttribute('aria-label', isHidden ? 'Hide password' : 'Show password'); + }); + } + })(); {{ template "footer.html" . }} diff --git a/web/themes/dark/favicon.ico b/web/themes/dark/favicon.ico new file mode 100644 index 0000000000..2ff02aaa22 Binary files /dev/null and b/web/themes/dark/favicon.ico differ diff --git a/web/themes/dark/favicon.png b/web/themes/dark/favicon.png deleted file mode 100644 index bcd5f21bfd..0000000000 Binary files a/web/themes/dark/favicon.png and /dev/null differ diff --git a/web/themes/dark/logo.png b/web/themes/dark/logo.png deleted file mode 100644 index 8f072508f9..0000000000 Binary files a/web/themes/dark/logo.png and /dev/null differ diff --git a/web/themes/dark/logo.svg b/web/themes/dark/logo.svg new file mode 100644 index 0000000000..9b271f984b --- /dev/null +++ b/web/themes/dark/logo.svg @@ -0,0 +1,16 @@ + + + primary-logo + + + + \ No newline at end of file diff --git a/web/themes/light/favicon.ico b/web/themes/light/favicon.ico new file mode 100644 index 0000000000..2ff02aaa22 Binary files /dev/null and b/web/themes/light/favicon.ico differ diff --git a/web/themes/light/favicon.png b/web/themes/light/favicon.png deleted file mode 100644 index bcd5f21bfd..0000000000 Binary files a/web/themes/light/favicon.png and /dev/null differ diff --git a/web/themes/light/logo.png b/web/themes/light/logo.png deleted file mode 100644 index 98a85a9643..0000000000 Binary files a/web/themes/light/logo.png and /dev/null differ diff --git a/web/themes/light/logo.svg b/web/themes/light/logo.svg new file mode 100644 index 0000000000..9b271f984b --- /dev/null +++ b/web/themes/light/logo.svg @@ -0,0 +1,16 @@ + + + primary-logo + + + + \ No newline at end of file diff --git a/web/themes/light/styles.css b/web/themes/light/styles.css index 2d92057119..67227956bb 100644 --- a/web/themes/light/styles.css +++ b/web/themes/light/styles.css @@ -1,13 +1,13 @@ .theme-body { - background-color: #efefef; - color: #333; - font-family: 'Source Sans Pro', Helvetica, sans-serif; + background-color: #f5f5f9; + color: #3d3d57; + font-family: "Eina04"; } .theme-navbar { - background-color: #fff; - box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); - color: #333; + text-align: center; + margin-top: 20px; + color: #3d3d57; font-size: 13px; font-weight: 100; height: 46px; @@ -25,7 +25,7 @@ .theme-navbar__logo { height: 100%; - max-height: 25px; + height: 29px; } .theme-heading { @@ -35,24 +35,31 @@ margin-top: 0; } +.theme-heading--signin { + font-size: 28px; + font-weight: 700; + margin-bottom: 45px; +} + .theme-panel { background-color: #fff; - box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); + border: 1px solid #CDD0D4; padding: 30px; + border-radius: 16px; } .theme-btn-provider { background-color: #fff; - color: #333; + color: #3d3d57; min-width: 250px; } .theme-btn-provider:hover { - color: #999; + background-color: #e6e6ea; } .theme-btn--primary { - background-color: #333; + background-color: #0089c7; border: none; color: #fff; min-width: 200px; @@ -60,18 +67,18 @@ } .theme-btn--primary:hover { - background-color: #666; + background-color: #005992; color: #fff; } .theme-btn--success { - background-color: #2FC98E; + background-color: #0089c7; color: #fff; width: 250px; } .theme-btn--success:hover { - background-color: #49E3A8; + background-color: #005992; } .theme-form-row { @@ -81,33 +88,98 @@ .theme-form-input { border-radius: 4px; - border: 1px solid #CCC; + border: 1px solid #e6e6ea; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); - color: #666; + color: #3d3d57; display: block; font-size: 14px; height: 36px; line-height: 1.42857143; margin: auto; padding: 6px 12px; - width: 250px; + width: 350px; +} + +.custom-input { + width: 100%; +} + +.password-field-wrapper { + position: relative; + display: inline-block; + width: 100%; +} + +.toggle-password-button { + position: absolute; + right: 10px; + top: 50%; + transform: translateY(-50%); + background: transparent; + border: 0; + cursor: pointer; + color: inherit; } .theme-form-input:focus, .theme-form-input:active { - border-color: #66AFE9; + border-color: #CDD0D4; outline: none; } .theme-form-label { - font-size: 13px; + font-size: 14px; font-weight: 600; margin: 4px auto; position: relative; text-align: left; - width: 250px; + width: 330px; + margin-bottom: 8px; } .theme-link-back { - margin-top: 4px; + margin-top: 24px; + margin-bottom: 16px; +} + +.login-button { + width: 100%; + font-size: 14px; + font-weight: 600; + margin-top: 10px; + margin-bottom: 8px; } + +/* Password visibility toggle (light theme) */ +.password-field-wrapper { + position: relative; + display: inline-block; + width: 100%; +} + +.password-field-wrapper .theme-form-input.custom-input { + padding-right: 36px; +} + +.toggle-password-button { + position: absolute; + right: 10px; + top: 50%; + transform: translateY(-50%); + background: transparent; + border: 0; + cursor: pointer; + color: inherit; + padding: 0; + height: 24px; + width: 24px; + display: flex; + align-items: center; + justify-content: center; +} + +.toggle-password-button img { + height: 18px; + width: 18px; + filter: brightness(0) saturate(100%) invert(25%) sepia(8%) saturate(1034%) hue-rotate(201deg) brightness(95%) contrast(89%); +} \ No newline at end of file