admin/TNCSC_Odoo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Apply light theme and official TNCSC logo to login page
Some checks failed
CI / Brand-leak check (push) Has been cancelled
Details
CI / flake8 / pylint-odoo / manifest completeness (push) Has been cancelled
Details
CI / Install all modules with --test-enable (push) Has been cancelled
Details

Browse Source 
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.
This commit is contained in:
metatroncubeswdev 2026-09-27 09:47:07 -04:00
parent db819c485f
commit a0ba0c544f
2 changed files with 70 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

111
addons/tncsc_deployment/static/src/scss/login_theme.scss
View File

@ -1,14 +1,14 @@
// ============================================================================ // ============================================================================
// TNCSC Community OS Suite - Executive Login Page Theme // 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-dark: #F7F5F0;
$tncsc-obsidian-subtle: #080A10; $tncsc-obsidian-subtle: #FFFCF7;
$tncsc-card-bg: #111420; $tncsc-card-bg: #FFFFFF;
$tncsc-gold: #D89C43; $tncsc-gold: #946015;
$tncsc-gold-bright: #F59E0B; $tncsc-gold-bright: #F59E0B;
$tncsc-gold-hover: #FBBF24; $tncsc-gold-hover: #87530D;
$tncsc-gold-gradient: linear-gradient(135deg, #F59E0B 0%, #B45309 100%); $tncsc-gold-gradient: linear-gradient(135deg, #F59E0B 0%, #B45309 100%);
$tncsc-font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif; $tncsc-font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
@ -45,16 +45,17 @@ 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_login_form),
body:has(.oe_website_login_container), body:has(.oe_website_login_container),
body:has(.o_database_list) { body:has(.o_database_list) {
color-scheme: light;
min-height: 100vh !important; min-height: 100vh !important;
width: 100vw !important; width: 100% !important;
margin: 0 !important; margin: 0 !important;
padding: 0 !important; padding: 0 !important;
background-color: #090B12 !important; background-color: #F7F5F0 !important;
background-image: background-image:
radial-gradient(ellipse at 50% 15%, rgba(216, 156, 67, 0.18) 0%, transparent 65%), 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%), radial-gradient(ellipse at 50% 85%, rgba(180, 83, 9, 0.12) 0%, transparent 65%),
@ -62,8 +63,8 @@ body:has(.o_database_list) {
background-size: cover, cover, cover !important; background-size: cover, cover, cover !important;
background-position: center, center, center 20% !important; background-position: center, center, center 20% !important;
background-repeat: no-repeat !important; background-repeat: no-repeat !important;
background-blend-mode: screen, normal, luminosity !important; background-blend-mode: normal, normal, luminosity !important;
color: #F8FAFC !important; color: #243247 !important;
display: flex !important; display: flex !important;
flex-direction: column !important; flex-direction: column !important;
justify-content: center !important; justify-content: center !important;
@ -75,7 +76,7 @@ body:has(.o_database_list) {
content: ''; content: '';
position: fixed; position: fixed;
top: 0; left: 0; right: 0; bottom: 0; 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); backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
z-index: 0; 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, .oe_website_login_container,
.card.o_database_list, .card.o_database_list,
body:has(.oe_login_form) .card { body:has(.oe_login_form) .card {
width: 100% !important; width: 100% !important;
max-width: 440px !important; max-width: 440px !important;
background: #111420 !important; background: #FFFFFF !important;
border: 1px solid rgba(216, 156, 67, 0.32) !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; 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; padding: 36px 36px 30px 36px !important;
margin: 30px auto !important; margin: 30px auto !important;
backdrop-filter: blur(16px) !important; backdrop-filter: blur(16px) !important;
-webkit-backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important;
color: #F8FAFC !important; color: #243247 !important;
box-sizing: border-box !important; box-sizing: border-box !important;
position: relative !important; position: relative !important;
z-index: 2 !important; z-index: 2 !important;
@ -146,7 +147,7 @@ body:has(.oe_login_form) .card {
img { img {
max-height: 56px !important; max-height: 56px !important;
width: auto !important; width: auto !important;
filter: drop-shadow(0 4px 14px rgba(216, 156, 67, 0.55)) !important; object-fit: contain;
margin-bottom: 12px !important; margin-bottom: 12px !important;
} }
@ -155,7 +156,7 @@ body:has(.oe_login_form) .card {
font-size: 13.5px !important; font-size: 13.5px !important;
font-weight: 700 !important; font-weight: 700 !important;
letter-spacing: 1.5px !important; letter-spacing: 1.5px !important;
color: #D89C43 !important; color: #946015 !important;
text-transform: uppercase !important; text-transform: uppercase !important;
line-height: 1.3 !important; line-height: 1.3 !important;
} }
@ -165,14 +166,14 @@ body:has(.oe_login_form) .card {
font-size: 12px !important; font-size: 12px !important;
font-weight: 700 !important; font-weight: 700 !important;
letter-spacing: 2px !important; letter-spacing: 2px !important;
color: #D89C43 !important; color: #946015 !important;
text-transform: uppercase !important; text-transform: uppercase !important;
margin-top: 2px !important; margin-top: 2px !important;
} }
.o_tncsc_login_tagline { .o_tncsc_login_tagline {
font-size: 11px !important; font-size: 11px !important;
color: #94A3B8 !important; color: #596579 !important;
letter-spacing: 0.3px !important; letter-spacing: 0.3px !important;
margin-top: 6px !important; margin-top: 6px !important;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !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; font-weight: 700 !important;
letter-spacing: 1px !important; letter-spacing: 1px !important;
text-transform: uppercase !important; text-transform: uppercase !important;
color: #D89C43 !important; color: #946015 !important;
margin-bottom: 6px !important; margin-bottom: 6px !important;
display: flex !important; display: flex !important;
justify-content: space-between !important; justify-content: space-between !important;
@ -202,7 +203,7 @@ body:has(.oe_login_form) .card {
.form-label button { .form-label button {
background: transparent !important; background: transparent !important;
border: none !important; border: none !important;
color: #D89C43 !important; color: #946015 !important;
font-size: 11.5px !important; font-size: 11.5px !important;
font-weight: 500 !important; font-weight: 500 !important;
letter-spacing: 0 !important; letter-spacing: 0 !important;
@ -213,7 +214,7 @@ body:has(.oe_login_form) .card {
cursor: pointer !important; cursor: pointer !important;
&:hover { &:hover {
color: #FBBF24 !important; color: #87530D !important;
text-decoration: underline !important; text-decoration: underline !important;
background: transparent !important; background: transparent !important;
} }
@ -224,13 +225,13 @@ body:has(.oe_login_form) .card {
input[type="text"], input[type="text"],
input[type="password"], input[type="password"],
input[type="email"] { input[type="email"] {
background-color: #0A0C14 !important; background-color: #FFFFFF !important;
border: 1px solid rgba(216, 156, 67, 0.3) !important; border: 1px solid rgba(216, 156, 67, 0.3) !important;
border-radius: 12px !important; border-radius: 12px !important;
color: #FFFFFF !important; color: #243247 !important;
padding: 11px 16px !important; padding: 11px 16px !important;
font-size: 14px !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; transition: all 0.2s ease !important;
&::placeholder { &::placeholder {
@ -238,20 +239,20 @@ body:has(.oe_login_form) .card {
} }
&:focus { &:focus {
background-color: #0E111C !important; background-color: #FFFCF7 !important;
border-color: #D89C43 !important; border-color: #946015 !important;
box-shadow: 0 0 0 3px rgba(216, 156, 67, 0.3), inset 0 2px 4px rgba(0, 0, 0, 0.5) !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: #FFFFFF !important; color: #243247 !important;
} }
// WebKit Autocomplete Dark Override // WebKit Autocomplete Light Colours
&:-webkit-autofill, &:-webkit-autofill,
&:-webkit-autofill:hover, &:-webkit-autofill:hover,
&:-webkit-autofill:focus, &:-webkit-autofill:focus,
&:-webkit-autofill:active { &:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0 1000px #0A0C14 inset !important; -webkit-box-shadow: 0 0 0 1000px #FFFFFF inset !important;
-webkit-text-fill-color: #FFFFFF !important; -webkit-text-fill-color: #243247 !important;
caret-color: #FFFFFF !important; caret-color: #243247 !important;
transition: background-color 5000s ease-in-out 0s !important; transition: background-color 5000s ease-in-out 0s !important;
border-color: rgba(216, 156, 67, 0.35) !important; border-color: rgba(216, 156, 67, 0.35) !important;
} }
@ -265,12 +266,12 @@ body:has(.oe_login_form) .card {
} }
.btn { .btn {
background-color: #0A0C14 !important; background-color: #FFFFFF !important;
border: 1px solid rgba(216, 156, 67, 0.3) !important; border: 1px solid rgba(216, 156, 67, 0.3) !important;
border-left: none !important; border-left: none !important;
border-top-right-radius: 12px !important; border-top-right-radius: 12px !important;
border-bottom-right-radius: 12px !important; border-bottom-right-radius: 12px !important;
color: #D89C43 !important; color: #946015 !important;
padding: 0 16px !important; padding: 0 16px !important;
display: flex !important; display: flex !important;
align-items: center !important; align-items: center !important;
@ -278,11 +279,11 @@ body:has(.oe_login_form) .card {
&:hover { &:hover {
background-color: rgba(216, 156, 67, 0.15) !important; background-color: rgba(216, 156, 67, 0.15) !important;
color: #FBBF24 !important; color: #87530D !important;
} }
i { i {
color: #D89C43 !important; color: #946015 !important;
} }
} }
} }
@ -317,19 +318,19 @@ body:has(.oe_login_form) .card {
// Divider (- or -) // Divider (- or -)
.text-center.small, .text-center.small,
.o_login_auth_divider { .o_login_auth_divider {
color: #71788E !important; color: #596579 !important;
font-size: 12px !important; font-size: 12px !important;
margin: 14px 0 !important; margin: 14px 0 !important;
position: relative !important; position: relative !important;
} }
// Passkey Button (Luxury Dark Pill) // Passkey Button (Light Ivory Pill)
.passkey_login_link, .passkey_login_link,
.list-group-item.passkey_login_link, .list-group-item.passkey_login_link,
.list-group-item { .list-group-item {
background: #0E111B !important; background: #FFF8EB !important;
border: 1px solid rgba(216, 156, 67, 0.32) !important; border: 1px solid rgba(216, 156, 67, 0.32) !important;
color: #F8FAFC !important; color: #243247 !important;
border-radius: 9999px !important; border-radius: 9999px !important;
padding: 10px 22px !important; padding: 10px 22px !important;
font-size: 13.5px !important; font-size: 13.5px !important;
@ -344,8 +345,8 @@ body:has(.oe_login_form) .card {
&:hover { &:hover {
background: rgba(216, 156, 67, 0.16) !important; background: rgba(216, 156, 67, 0.16) !important;
border-color: #D89C43 !important; border-color: #946015 !important;
color: #FBBF24 !important; color: #87530D !important;
transform: translateY(-1px) !important; transform: translateY(-1px) !important;
} }
@ -358,7 +359,7 @@ body:has(.oe_login_form) .card {
.alert-danger { .alert-danger {
background: rgba(239, 68, 68, 0.15) !important; background: rgba(239, 68, 68, 0.15) !important;
border: 1px solid rgba(239, 68, 68, 0.4) !important; border: 1px solid rgba(239, 68, 68, 0.4) !important;
color: #FCA5A5 !important; color: #991B1B !important;
border-radius: 12px !important; border-radius: 12px !important;
font-size: 13px !important; font-size: 13px !important;
padding: 10px 14px !important; padding: 10px 14px !important;
@ -367,7 +368,7 @@ body:has(.oe_login_form) .card {
.alert-success { .alert-success {
background: rgba(34, 197, 94, 0.15) !important; background: rgba(34, 197, 94, 0.15) !important;
border: 1px solid rgba(34, 197, 94, 0.4) !important; border: 1px solid rgba(34, 197, 94, 0.4) !important;
color: #86EFAC !important; color: #166534 !important;
border-radius: 12px !important; border-radius: 12px !important;
font-size: 13px !important; font-size: 13px !important;
padding: 10px 14px !important; padding: 10px 14px !important;
@ -386,8 +387,22 @@ body:has(.oe_login_form) .card {
font-family: $tncsc-font-serif; font-family: $tncsc-font-serif;
font-size: 11.5px; font-size: 11.5px;
letter-spacing: 3px; letter-spacing: 3px;
color: rgba(216, 156, 67, 0.7); color: #946015;
text-align: center; text-align: center;
text-transform: uppercase; text-transform: uppercase;
font-weight: 600; 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;
}
}

8
addons/tncsc_deployment/views/login_templates.xml
View File

@ -4,14 +4,14 @@
<template id="tncsc_login_card_branding" inherit_id="web.login" name="TNCSC Login Card Branding" priority="50"> <template id="tncsc_login_card_branding" inherit_id="web.login" name="TNCSC Login Card Branding" priority="50">
<xpath expr="//form" position="before"> <xpath expr="//form" position="before">
<div class="text-center pb-3 border-bottom mb-4 o_tncsc_login_brand_header"> <div class="text-center pb-3 border-bottom mb-4 o_tncsc_login_brand_header">
<img src="/tncsc_deployment/static/src/img/gold_lotus_logo.png" alt="TNCSC Golden Lotus" class="o_tncsc_login_logo" style="max-height: 58px; width: auto;"/> <img src="/tncsc_deployment/static/src/img/brand/logo.png" alt="TNCSC Logo" class="o_tncsc_login_logo" style="max-height: 58px; width: auto;"/>
<div class="o_tncsc_login_brand_title" style="font-family: 'Playfair Display', Georgia, serif; font-size: 13.5px; font-weight: 700; letter-spacing: 1.5px; color: #D89C43; text-transform: uppercase; margin-top: 10px; line-height: 1.3;"> <div class="o_tncsc_login_brand_title" style="font-family: 'Playfair Display', Georgia, serif; font-size: 13.5px; font-weight: 700; letter-spacing: 1.5px; color: #946015; text-transform: uppercase; margin-top: 10px; line-height: 1.3;">
TAMIL NADU CULTURAL SOCIETY TAMIL NADU CULTURAL SOCIETY
</div> </div>
<div class="o_tncsc_login_brand_country" style="font-family: 'Playfair Display', Georgia, serif; font-size: 12px; font-weight: 700; letter-spacing: 2px; color: #D89C43; text-transform: uppercase; margin-top: 2px;"> <div class="o_tncsc_login_brand_country" style="font-family: 'Playfair Display', Georgia, serif; font-size: 12px; font-weight: 700; letter-spacing: 2px; color: #946015; text-transform: uppercase; margin-top: 2px;">
OF CANADA OF CANADA
</div> </div>
<div class="o_tncsc_login_tagline" style="font-size: 11px; color: #94A3B8; letter-spacing: 0.3px; margin-top: 6px;"> <div class="o_tncsc_login_tagline" style="font-size: 11px; color: #596579; letter-spacing: 0.3px; margin-top: 6px;">
Connecting our roots • Celebrating our culture Connecting our roots • Celebrating our culture
</div> </div>
</div> </div>