From a0ba0c544f4d4229a08a2d6eedf84f8e2046ab28 Mon Sep 17 00:00:00 2001 From: metatroncubeswdev Date: Sun, 27 Sep 2026 09:47:07 -0400 Subject: [PATCH] Apply light theme and official TNCSC logo to login page Use an ivory canvas, white card and fields, readable dark text, and gold accents. Update autofill, passkey, focus, and alert colours, and improve small-screen spacing. Replace the lotus with the existing TNCSC brand logo. Validation: SCSS compilation, XML parsing, and browser previews of the live login page with local changes at desktop and mobile widths. No credentials were submitted. --- .../static/src/scss/login_theme.scss | 117 ++++++++++-------- .../views/login_templates.xml | 8 +- 2 files changed, 70 insertions(+), 55 deletions(-) diff --git a/addons/tncsc_deployment/static/src/scss/login_theme.scss b/addons/tncsc_deployment/static/src/scss/login_theme.scss index 04d1f20..178e0ae 100644 --- a/addons/tncsc_deployment/static/src/scss/login_theme.scss +++ b/addons/tncsc_deployment/static/src/scss/login_theme.scss @@ -1,14 +1,14 @@ // ============================================================================ // TNCSC Community OS Suite - Executive Login Page Theme -// Matching the Community Dashboard Royal Obsidian & Gold Aesthetic +// Matching the Community Dashboard Light Ivory & Gold Theme // ============================================================================ -$tncsc-obsidian-dark: #090B12; -$tncsc-obsidian-subtle: #080A10; -$tncsc-card-bg: #111420; -$tncsc-gold: #D89C43; +$tncsc-obsidian-dark: #F7F5F0; +$tncsc-obsidian-subtle: #FFFCF7; +$tncsc-card-bg: #FFFFFF; +$tncsc-gold: #946015; $tncsc-gold-bright: #F59E0B; -$tncsc-gold-hover: #FBBF24; +$tncsc-gold-hover: #87530D; $tncsc-gold-gradient: linear-gradient(135deg, #F59E0B 0%, #B45309 100%); $tncsc-font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif; @@ -45,25 +45,26 @@ body:has(.o_login_auth) { } // ---------------------------------------------------------------------------- -// 2. Full-Screen Royal Obsidian Canvas with Gopuram Aura +// 2. Light Ivory Canvas with Subtle Gopuram Background // ---------------------------------------------------------------------------- body:has(.oe_login_form), body:has(.oe_website_login_container), body:has(.o_database_list) { + color-scheme: light; min-height: 100vh !important; - width: 100vw !important; + width: 100% !important; margin: 0 !important; padding: 0 !important; - background-color: #090B12 !important; - background-image: + background-color: #F7F5F0 !important; + background-image: radial-gradient(ellipse at 50% 15%, rgba(216, 156, 67, 0.18) 0%, transparent 65%), radial-gradient(ellipse at 50% 85%, rgba(180, 83, 9, 0.12) 0%, transparent 65%), url('/tncsc_deployment/static/src/img/dashboard/gopuram_header_bg.jpg') !important; background-size: cover, cover, cover !important; background-position: center, center, center 20% !important; background-repeat: no-repeat !important; - background-blend-mode: screen, normal, luminosity !important; - color: #F8FAFC !important; + background-blend-mode: normal, normal, luminosity !important; + color: #243247 !important; display: flex !important; flex-direction: column !important; justify-content: center !important; @@ -75,7 +76,7 @@ body:has(.o_database_list) { content: ''; position: fixed; top: 0; left: 0; right: 0; bottom: 0; - background: rgba(9, 11, 18, 0.84); + background: rgba(247, 245, 240, 0.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 0; @@ -108,23 +109,23 @@ body:has(.o_database_list) { } // ---------------------------------------------------------------------------- -// 3. Login Executive Card (Luxury Community Dashboard Style) +// 3. Login Executive Card (Light Community Dashboard Style) // ---------------------------------------------------------------------------- .oe_website_login_container, .card.o_database_list, body:has(.oe_login_form) .card { width: 100% !important; max-width: 440px !important; - background: #111420 !important; + background: #FFFFFF !important; border: 1px solid rgba(216, 156, 67, 0.32) !important; - border-top: 3.5px solid #D89C43 !important; + border-top: 3.5px solid #946015 !important; border-radius: 24px !important; - box-shadow: 0 24px 60px rgba(0, 0, 0, 0.85), 0 0 35px rgba(216, 156, 67, 0.15) !important; + box-shadow: 0 24px 60px rgba(36, 50, 71, 0.141667), 0 0 35px rgba(216, 156, 67, 0.15) !important; padding: 36px 36px 30px 36px !important; margin: 30px auto !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; - color: #F8FAFC !important; + color: #243247 !important; box-sizing: border-box !important; position: relative !important; z-index: 2 !important; @@ -146,7 +147,7 @@ body:has(.oe_login_form) .card { img { max-height: 56px !important; width: auto !important; - filter: drop-shadow(0 4px 14px rgba(216, 156, 67, 0.55)) !important; + object-fit: contain; margin-bottom: 12px !important; } @@ -155,7 +156,7 @@ body:has(.oe_login_form) .card { font-size: 13.5px !important; font-weight: 700 !important; letter-spacing: 1.5px !important; - color: #D89C43 !important; + color: #946015 !important; text-transform: uppercase !important; line-height: 1.3 !important; } @@ -165,14 +166,14 @@ body:has(.oe_login_form) .card { font-size: 12px !important; font-weight: 700 !important; letter-spacing: 2px !important; - color: #D89C43 !important; + color: #946015 !important; text-transform: uppercase !important; margin-top: 2px !important; } .o_tncsc_login_tagline { font-size: 11px !important; - color: #94A3B8 !important; + color: #596579 !important; letter-spacing: 0.3px !important; margin-top: 6px !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; @@ -187,7 +188,7 @@ body:has(.oe_login_form) .card { font-weight: 700 !important; letter-spacing: 1px !important; text-transform: uppercase !important; - color: #D89C43 !important; + color: #946015 !important; margin-bottom: 6px !important; display: flex !important; justify-content: space-between !important; @@ -202,7 +203,7 @@ body:has(.oe_login_form) .card { .form-label button { background: transparent !important; border: none !important; - color: #D89C43 !important; + color: #946015 !important; font-size: 11.5px !important; font-weight: 500 !important; letter-spacing: 0 !important; @@ -213,7 +214,7 @@ body:has(.oe_login_form) .card { cursor: pointer !important; &:hover { - color: #FBBF24 !important; + color: #87530D !important; text-decoration: underline !important; background: transparent !important; } @@ -224,13 +225,13 @@ body:has(.oe_login_form) .card { input[type="text"], input[type="password"], input[type="email"] { - background-color: #0A0C14 !important; + background-color: #FFFFFF !important; border: 1px solid rgba(216, 156, 67, 0.3) !important; border-radius: 12px !important; - color: #FFFFFF !important; + color: #243247 !important; padding: 11px 16px !important; font-size: 14px !important; - box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5) !important; + box-shadow: inset 0 2px 4px rgba(36, 50, 71, 0.0833333) !important; transition: all 0.2s ease !important; &::placeholder { @@ -238,20 +239,20 @@ body:has(.oe_login_form) .card { } &:focus { - background-color: #0E111C !important; - border-color: #D89C43 !important; - box-shadow: 0 0 0 3px rgba(216, 156, 67, 0.3), inset 0 2px 4px rgba(0, 0, 0, 0.5) !important; - color: #FFFFFF !important; + background-color: #FFFCF7 !important; + border-color: #946015 !important; + box-shadow: 0 0 0 3px rgba(216, 156, 67, 0.3), inset 0 2px 4px rgba(36, 50, 71, 0.0833333) !important; + color: #243247 !important; } - // WebKit Autocomplete Dark Override + // WebKit Autocomplete Light Colours &:-webkit-autofill, - &:-webkit-autofill:hover, - &:-webkit-autofill:focus, + &:-webkit-autofill:hover, + &:-webkit-autofill:focus, &:-webkit-autofill:active { - -webkit-box-shadow: 0 0 0 1000px #0A0C14 inset !important; - -webkit-text-fill-color: #FFFFFF !important; - caret-color: #FFFFFF !important; + -webkit-box-shadow: 0 0 0 1000px #FFFFFF inset !important; + -webkit-text-fill-color: #243247 !important; + caret-color: #243247 !important; transition: background-color 5000s ease-in-out 0s !important; border-color: rgba(216, 156, 67, 0.35) !important; } @@ -265,12 +266,12 @@ body:has(.oe_login_form) .card { } .btn { - background-color: #0A0C14 !important; + background-color: #FFFFFF !important; border: 1px solid rgba(216, 156, 67, 0.3) !important; border-left: none !important; border-top-right-radius: 12px !important; border-bottom-right-radius: 12px !important; - color: #D89C43 !important; + color: #946015 !important; padding: 0 16px !important; display: flex !important; align-items: center !important; @@ -278,11 +279,11 @@ body:has(.oe_login_form) .card { &:hover { background-color: rgba(216, 156, 67, 0.15) !important; - color: #FBBF24 !important; + color: #87530D !important; } i { - color: #D89C43 !important; + color: #946015 !important; } } } @@ -317,19 +318,19 @@ body:has(.oe_login_form) .card { // Divider (- or -) .text-center.small, .o_login_auth_divider { - color: #71788E !important; + color: #596579 !important; font-size: 12px !important; margin: 14px 0 !important; position: relative !important; } - // Passkey Button (Luxury Dark Pill) + // Passkey Button (Light Ivory Pill) .passkey_login_link, .list-group-item.passkey_login_link, .list-group-item { - background: #0E111B !important; + background: #FFF8EB !important; border: 1px solid rgba(216, 156, 67, 0.32) !important; - color: #F8FAFC !important; + color: #243247 !important; border-radius: 9999px !important; padding: 10px 22px !important; font-size: 13.5px !important; @@ -344,8 +345,8 @@ body:has(.oe_login_form) .card { &:hover { background: rgba(216, 156, 67, 0.16) !important; - border-color: #D89C43 !important; - color: #FBBF24 !important; + border-color: #946015 !important; + color: #87530D !important; transform: translateY(-1px) !important; } @@ -358,7 +359,7 @@ body:has(.oe_login_form) .card { .alert-danger { background: rgba(239, 68, 68, 0.15) !important; border: 1px solid rgba(239, 68, 68, 0.4) !important; - color: #FCA5A5 !important; + color: #991B1B !important; border-radius: 12px !important; font-size: 13px !important; padding: 10px 14px !important; @@ -367,7 +368,7 @@ body:has(.oe_login_form) .card { .alert-success { background: rgba(34, 197, 94, 0.15) !important; border: 1px solid rgba(34, 197, 94, 0.4) !important; - color: #86EFAC !important; + color: #166534 !important; border-radius: 12px !important; font-size: 13px !important; padding: 10px 14px !important; @@ -386,8 +387,22 @@ body:has(.oe_login_form) .card { font-family: $tncsc-font-serif; font-size: 11.5px; letter-spacing: 3px; - color: rgba(216, 156, 67, 0.7); + color: #946015; text-align: center; text-transform: uppercase; font-weight: 600; } + +// Keep the form comfortable to use on small screens. +@media (max-width: 575.98px) { + body:has(.oe_login_form) #wrapwrap { + padding: 20px 12px !important; + } + + .oe_website_login_container, + .card.o_database_list, + body:has(.oe_login_form) .card { + padding: 28px 20px !important; + margin: 12px auto !important; + } +} diff --git a/addons/tncsc_deployment/views/login_templates.xml b/addons/tncsc_deployment/views/login_templates.xml index 82c7e9a..f4f7c42 100644 --- a/addons/tncsc_deployment/views/login_templates.xml +++ b/addons/tncsc_deployment/views/login_templates.xml @@ -4,14 +4,14 @@