From c1cb6dc2ea0f628ae436ae0504fd6df8428526d9 Mon Sep 17 00:00:00 2001 From: vaibhav Date: Tue, 9 Dec 2025 17:32:29 +0530 Subject: [PATCH] humain poc changes --- web/static/main.css | 164 ++++++++++++++-------------- web/templates/login.html | 25 +++-- web/themes/dark/logo.svg | 22 ++-- web/themes/light/logo.svg | 22 ++-- web/themes/light/styles.css | 209 ++++++++++++++++++------------------ 5 files changed, 216 insertions(+), 226 deletions(-) diff --git a/web/static/main.css b/web/static/main.css index ecfe2fe56a..0de87a94e6 100644 --- a/web/static/main.css +++ b/web/static/main.css @@ -1,164 +1,170 @@ * { - box-sizing: border-box; + box-sizing: border-box; } -html, body, input, button, select, textarea { - font-family: "Eina04"; +html, +body, +input, +button, +select, +textarea { + font-family: "Eina04"; } body { - margin: 0; - font-family: "Eina04"; + margin: 0; + font-family: "Eina04"; } .dex-container { - color: #3d3d57; - margin: 45px auto; - max-width: 400px; - min-width: 320px; - text-align: center; + color: #3d3d57; + margin: 45px auto; + max-width: 400px; + min-width: 320px; + text-align: center; } .dex-btn { - border-radius: 4px; - 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: 14px; - padding: 0; + border-radius: 4px; + 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: 14px; + padding: 0; } .dex-btn:focus { - outline: none; + outline: none; } .dex-btn:active { - box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - outline: none; + box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); + outline: none; } .dex-btn:disabled { - cursor: not-allowed; - opacity: 0.5; + cursor: not-allowed; + opacity: 0.5; } .dex-btn-icon { - background-position: center; - background-repeat: no-repeat; - background-size: 24px; - border-radius: 4px 0 0 4px; - float: left; - height: 36px; - margin-right: 5px; - width: 36px; + background-position: center; + background-repeat: no-repeat; + background-size: 24px; + border-radius: 4px 0 0 4px; + float: left; + height: 36px; + margin-right: 5px; + width: 36px; } .dex-btn-icon--google { - background-color: #FFFFFF; - background-image: url(../static/img/google-icon.svg);; + background-color: #ffffff; + background-image: url(../static/img/google-icon.svg); } .dex-btn-icon--local { - background-color: #84B6EF; - background-image: url(../static/img/email-icon.svg); + background-color: #84b6ef; + background-image: url(../static/img/email-icon.svg); } .dex-btn-icon--gitea { - background-color: #F5F5F5; - background-image: url(../static/img/gitea-icon.svg); + background-color: #f5f5f5; + background-image: url(../static/img/gitea-icon.svg); } .dex-btn-icon--github { - background-color: #F5F5F5; - background-image: url(../static/img/github-icon.svg); + background-color: #f5f5f5; + background-image: url(../static/img/github-icon.svg); } .dex-btn-icon--gitlab { - background-color: #F5F5F5; - background-image: url(../static/img/gitlab-icon.svg); - background-size: contain; + background-color: #f5f5f5; + background-image: url(../static/img/gitlab-icon.svg); + background-size: contain; } .dex-btn-icon--keystone { - background-color: #F5F5F5; - background-image: url(../static/img/keystone-icon.svg); + background-color: #f5f5f5; + background-image: url(../static/img/keystone-icon.svg); } .dex-btn-icon--oidc { - background-color: #EBEBEE; - background-image: url(../static/img/oidc-icon.svg); - background-size: contain; + background-color: #ebebee; + background-image: url(../static/img/oidc-icon.svg); + background-size: contain; } .dex-btn-icon--bitbucket-cloud { - background-color: #205081; - background-image: url(../static/img/bitbucket-icon.svg); + background-color: #205081; + background-image: url(../static/img/bitbucket-icon.svg); } .dex-btn-icon--atlassian-crowd { - background-color: #CFDCEA; - background-image: url(../static/img/atlassian-crowd-icon.svg); + background-color: #cfdcea; + background-image: url(../static/img/atlassian-crowd-icon.svg); } .dex-btn-icon--ldap { - background-color: #84B6EF; - background-image: url(../static/img/ldap-icon.svg); + background-color: #84b6ef; + background-image: url(../static/img/ldap-icon.svg); } .dex-btn-icon--saml { - background-color: #84B6EF; - background-image: url(../static/img/saml-icon.svg); + background-color: #84b6ef; + background-image: url(../static/img/saml-icon.svg); } .dex-btn-icon--linkedin { - background-image: url(../static/img/linkedin-icon.svg); - background-size: contain; + background-image: url(../static/img/linkedin-icon.svg); + background-size: contain; } .dex-btn-icon--microsoft { - background-image: url(../static/img/microsoft-icon.svg); + background-image: url(../static/img/microsoft-icon.svg); } .dex-btn-text { - font-weight: 600; - line-height: 36px; - padding: 6px 12px; - text-align: center; + font-weight: 600; + line-height: 36px; + padding: 6px 12px; + text-align: center; } .dex-subtle-text { - color: #005992; - font-size: 12px; + color: #000; + font-size: 12px; } .dex-separator { - color: #999; + color: #999; } .dex-list { - color: #999; - display: inline-block; - font-size: 12px; - list-style: circle; - text-align: left; + color: #999; + display: inline-block; + font-size: 12px; + list-style: circle; + text-align: left; } .dex-error-box { - background-color: #DD1327; - color: #fff; - font-size: 14px; - font-weight: normal; - max-width: 320px; - padding: 4px 0; + background-color: #dd1327; + color: #fff; + font-size: 14px; + font-weight: normal; + max-width: 320px; + padding: 4px 0; } .dex-error-box { - margin: 20px auto; + margin: 20px auto; } input:-webkit-autofill, -input:-webkit-autofill:hover, -input:-webkit-autofill:focus, -input:-webkit-autofill:active{ +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/login.html b/web/templates/login.html index 4ffc27fb65..243d911fb6 100644 --- a/web/templates/login.html +++ b/web/templates/login.html @@ -1,19 +1,18 @@ {{ template "header.html" . }}
-

Sign In

-
- {{ range $c := .Connectors }} -
- - - -
- {{ end }} -
+

Sign In

+
+ {{ range $c := .Connectors }} +
+ + + +
+ {{ end }} +
{{ template "footer.html" . }} diff --git a/web/themes/dark/logo.svg b/web/themes/dark/logo.svg index 9b271f984b..42f9302bd2 100644 --- a/web/themes/dark/logo.svg +++ b/web/themes/dark/logo.svg @@ -1,16 +1,8 @@ - - - primary-logo - - - + + + + + + + \ No newline at end of file diff --git a/web/themes/light/logo.svg b/web/themes/light/logo.svg index 9b271f984b..42f9302bd2 100644 --- a/web/themes/light/logo.svg +++ b/web/themes/light/logo.svg @@ -1,16 +1,8 @@ - - - primary-logo - - - + + + + + + + \ No newline at end of file diff --git a/web/themes/light/styles.css b/web/themes/light/styles.css index 67227956bb..709592b9cf 100644 --- a/web/themes/light/styles.css +++ b/web/themes/light/styles.css @@ -1,38 +1,38 @@ .theme-body { - background-color: #f5f5f9; - color: #3d3d57; - font-family: "Eina04"; + background-color: #f5f5f9; + color: #3d3d57; + font-family: "Eina04"; } .theme-navbar { - text-align: center; - margin-top: 20px; - color: #3d3d57; - font-size: 13px; - font-weight: 100; - height: 46px; - overflow: hidden; - padding: 0 10px; + text-align: center; + margin-top: 20px; + color: #3d3d57; + font-size: 13px; + font-weight: 100; + height: 46px; + overflow: hidden; + padding: 0 10px; } .theme-navbar__logo-wrap { - display: inline-block; - height: 100%; - overflow: hidden; - padding: 10px 15px; - width: 300px; + display: inline-block; + height: 100%; + overflow: hidden; + padding: 10px 15px; + width: 300px; } .theme-navbar__logo { - height: 100%; - height: 29px; + height: 100%; + height: 29px; } .theme-heading { - font-size: 20px; - font-weight: 500; - margin-bottom: 10px; - margin-top: 0; + font-size: 20px; + font-weight: 500; + margin-bottom: 10px; + margin-top: 0; } .theme-heading--signin { @@ -42,144 +42,145 @@ } .theme-panel { - background-color: #fff; - border: 1px solid #CDD0D4; - padding: 30px; - border-radius: 16px; + background-color: #fff; + border: 1px solid #cdd0d4; + padding: 30px; + border-radius: 16px; } .theme-btn-provider { - background-color: #fff; - color: #3d3d57; - min-width: 250px; + background-color: #fff; + color: #3d3d57; + min-width: 250px; } .theme-btn-provider:hover { - background-color: #e6e6ea; + background-color: #e6e6ea; } .theme-btn--primary { - background-color: #0089c7; - border: none; - color: #fff; - min-width: 200px; - padding: 6px 12px; + background-color: #d3f94a; + border: none; + color: #000; + min-width: 200px; + padding: 6px 12px; } .theme-btn--primary:hover { - background-color: #005992; - color: #fff; + background-color: #d3f94a; + color: #000; } .theme-btn--success { - background-color: #0089c7; - color: #fff; - width: 250px; + background-color: #d3f94a; + color: #000; + width: 250px; } .theme-btn--success:hover { - background-color: #005992; + background-color: #d3f94a; } .theme-form-row { - display: block; - margin: 20px auto; + display: block; + margin: 20px auto; } .theme-form-input { - border-radius: 4px; - border: 1px solid #e6e6ea; - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); - color: #3d3d57; - display: block; - font-size: 14px; - height: 36px; - line-height: 1.42857143; - margin: auto; - padding: 6px 12px; - width: 350px; + border-radius: 4px; + border: 1px solid #e6e6ea; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + color: #3d3d57; + display: block; + font-size: 14px; + height: 36px; + line-height: 1.42857143; + margin: auto; + padding: 6px 12px; + width: 350px; } .custom-input { - width: 100%; + width: 100%; } .password-field-wrapper { - position: relative; - display: inline-block; - width: 100%; + 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; + 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: #CDD0D4; - outline: none; + border-color: #cdd0d4; + outline: none; } .theme-form-label { - font-size: 14px; - font-weight: 600; - margin: 4px auto; - position: relative; - text-align: left; - width: 330px; - margin-bottom: 8px; + font-size: 14px; + font-weight: 600; + margin: 4px auto; + position: relative; + text-align: left; + width: 330px; + margin-bottom: 8px; } .theme-link-back { - margin-top: 24px; - margin-bottom: 16px; + margin-top: 24px; + margin-bottom: 16px; } .login-button { - width: 100%; - font-size: 14px; - font-weight: 600; - margin-top: 10px; - margin-bottom: 8px; + 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%; + position: relative; + display: inline-block; + width: 100%; } .password-field-wrapper .theme-form-input.custom-input { - padding-right: 36px; + 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; + 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 + height: 18px; + width: 18px; + filter: brightness(0) saturate(100%) invert(25%) sepia(8%) saturate(1034%) + hue-rotate(201deg) brightness(95%) contrast(89%); +}