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.
This commit is contained in:
metatroncubeswdev
parent
db819c485f
commit
a0ba0c544f
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,14 +4,14 @@
|
||||
<template id="tncsc_login_card_branding" inherit_id="web.login" name="TNCSC Login Card Branding" priority="50">
|
||||
<xpath expr="//form" position="before">
|
||||
<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;"/>
|
||||
<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;">
|
||||
<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: #946015; text-transform: uppercase; margin-top: 10px; line-height: 1.3;">
|
||||
TAMIL NADU CULTURAL SOCIETY
|
||||
</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
|
||||
</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
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user