dashboard color updated
Some checks failed
CI / Brand-leak check (push) Has been cancelled
CI / flake8 / pylint-odoo / manifest completeness (push) Has been cancelled
CI / Install all modules with --test-enable (push) Has been cancelled

This commit is contained in:
Selvi 2026-10-02 19:16:57 +05:30
parent b0cfc63201
commit 23b3075a3b
2 changed files with 135 additions and 69 deletions

View File

@ -1,7 +1,16 @@
/* ========================================================================== /* ==========================================================================
TNCSC EXECUTIVE COMMUNITY DASHBOARD & GLOBAL SIDEBAR (LIGHT IVORY & GOLD) TNCSC EXECUTIVE COMMUNITY DASHBOARD & GLOBAL SIDEBAR (IVORY, GOLD & FOREST)
Primary Accent : #120735 (Deep Forest / Royal Indigo)
Secondary Accent: #946015 (Royal Gold)
========================================================================== */ ========================================================================== */
// Brand color variables
$tncsc-forest: #120735;
$tncsc-forest-light: rgba(18, 7, 53, 0.10);
$tncsc-forest-border: rgba(18, 7, 53, 0.30);
$tncsc-gold: #946015;
$tncsc-gold-light: rgba(216, 156, 67, 0.22);
// ---------------------------------------------------------------------- // ----------------------------------------------------------------------
// 1. PERSISTENT GLOBAL SIDEBAR (PRESENT ON ALL PAGES) // 1. PERSISTENT GLOBAL SIDEBAR (PRESENT ON ALL PAGES)
// ---------------------------------------------------------------------- // ----------------------------------------------------------------------
@ -15,7 +24,7 @@
max-width: 220px !important; max-width: 220px !important;
height: 100vh !important; height: 100vh !important;
background: #FFFCF7 !important; background: #FFFCF7 !important;
border-right: 1px solid rgba(216, 156, 67, 0.22) !important; border-right: 2px solid rgba(18, 7, 53, 0.15) !important;
padding: 24px 14px 18px 14px !important; padding: 24px 14px 18px 14px !important;
box-sizing: border-box !important; box-sizing: border-box !important;
z-index: 1050 !important; z-index: 1050 !important;
@ -25,7 +34,7 @@
width: 4px; width: 4px;
} }
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
background: rgba(216, 156, 67, 0.2); background: rgba(18, 7, 53, 0.20);
border-radius: 4px; border-radius: 4px;
} }
@ -39,7 +48,14 @@
object-fit: contain; object-fit: contain;
} }
.o_brand_text_line1, .o_brand_text_line1 {
font-family: 'Playfair Display', Georgia, serif !important;
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: 1px !important;
color: #120735 !important;
line-height: 1.3 !important;
}
.o_brand_text_line2, .o_brand_text_line2,
.o_brand_text_line3 { .o_brand_text_line3 {
font-family: 'Playfair Display', Georgia, serif !important; font-family: 'Playfair Display', Georgia, serif !important;
@ -59,8 +75,8 @@
padding: 10px 14px !important; padding: 10px 14px !important;
border-radius: 12px !important; border-radius: 12px !important;
margin-bottom: 5px !important; margin-bottom: 5px !important;
border: 1px solid transparent; border: 1px solid transparent !important;
color: #596579 !important; color: rgba(18, 7, 53, 0.55) !important;
font-size: 13px !important; font-size: 13px !important;
font-weight: 500 !important; font-weight: 500 !important;
text-decoration: none !important; text-decoration: none !important;
@ -68,27 +84,32 @@
transition: all 0.2s ease !important; transition: all 0.2s ease !important;
&:hover { &:hover {
background: rgba(36, 50, 71, 0.05) !important; background: rgba(18, 7, 53, 0.06) !important;
color: #243247 !important; border-color: rgba(18, 7, 53, 0.15) !important;
color: #120735 !important;
.o_nav_icon {
color: #120735 !important;
}
} }
.o_nav_icon { .o_nav_icon {
font-size: 14px !important; font-size: 14px !important;
width: 18px !important; width: 18px !important;
text-align: center !important; text-align: center !important;
color: #596579 !important; color: rgba(18, 7, 53, 0.45) !important;
transition: color 0.2s !important; transition: color 0.2s !important;
} }
&.active { &.active {
background: #FFF0D6 !important; background: linear-gradient(135deg, rgba(18, 7, 53, 0.12) 0%, rgba(18, 7, 53, 0.06) 100%) !important;
border: 1px solid rgba(216, 156, 67, 0.45) !important; border: 1px solid rgba(18, 7, 53, 0.32) !important;
color: #87530D !important; color: #120735 !important;
font-weight: 600 !important; font-weight: 700 !important;
box-shadow: 0 2px 10px rgba(36, 50, 71, 0.06), inset 0 0 12px rgba(216, 156, 67, 0.12) !important; box-shadow: 0 2px 10px rgba(18, 7, 53, 0.12), inset 0 0 12px rgba(18, 7, 53, 0.06) !important;
.o_nav_icon { .o_nav_icon {
color: #87530D !important; color: #120735 !important;
} }
} }
} }
@ -122,10 +143,10 @@
font-family: 'Playfair Display', Georgia, serif !important; font-family: 'Playfair Display', Georgia, serif !important;
font-style: italic !important; font-style: italic !important;
font-size: 12.5px !important; font-size: 12.5px !important;
color: #946015 !important; color: #120735 !important;
line-height: 1.25 !important; line-height: 1.25 !important;
margin-top: 6px !important; margin-top: 6px !important;
opacity: 0.9 !important; opacity: 0.85 !important;
} }
} }
} }
@ -258,9 +279,13 @@ body:has(.o_tncsc_dashboard_root) {
font-size: 10.5px !important; font-size: 10.5px !important;
font-weight: 700 !important; font-weight: 700 !important;
letter-spacing: 1.5px !important; letter-spacing: 1.5px !important;
color: #946015 !important; color: #120735 !important;
margin-bottom: 4px !important; margin-bottom: 4px !important;
text-transform: uppercase !important; text-transform: uppercase !important;
background: linear-gradient(90deg, #120735, #946015);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
} }
.o_dashboard_title { .o_dashboard_title {
@ -279,35 +304,37 @@ body:has(.o_tncsc_dashboard_root) {
} }
.o_btn_gold_gradient { .o_btn_gold_gradient {
background: linear-gradient(135deg, #F59E0B 0%, #B45309 100%) !important; background: linear-gradient(135deg, #120735 0%, #946015 60%, #F5A623 100%) !important;
border: none !important; border: none !important;
color: #000000 !important; color: #FFFFFF !important;
font-weight: 700 !important; font-weight: 700 !important;
font-size: 12.5px !important; font-size: 12.5px !important;
padding: 8px 20px !important; padding: 8px 20px !important;
border-radius: 9999px !important; border-radius: 9999px !important;
box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35) !important; box-shadow: 0 4px 14px rgba(18, 7, 53, 0.35) !important;
transition: all 0.2s ease !important; transition: all 0.2s ease !important;
&:hover { &:hover {
transform: translateY(-1px) !important; transform: translateY(-1px) !important;
box-shadow: 0 6px 18px rgba(245, 158, 11, 0.5) !important; background: linear-gradient(135deg, #946015 0%, #120735 100%) !important;
box-shadow: 0 6px 20px rgba(18, 7, 53, 0.45) !important;
} }
} }
.o_btn_dark_pill { .o_btn_dark_pill {
background: rgba(36, 50, 71, 0.05) !important; background: rgba(18, 7, 53, 0.05) !important;
border: 1px solid rgba(216, 156, 67, 0.38) !important; border: 1px solid rgba(18, 7, 53, 0.28) !important;
color: #243247 !important; color: #120735 !important;
font-size: 12.5px !important; font-size: 12.5px !important;
font-weight: 500 !important; font-weight: 600 !important;
padding: 7px 18px !important; padding: 7px 18px !important;
border-radius: 9999px !important; border-radius: 9999px !important;
transition: all 0.2s ease !important; transition: all 0.2s ease !important;
&:hover { &:hover {
background: rgba(216, 156, 67, 0.12) !important; background: linear-gradient(135deg, rgba(18, 7, 53, 0.10) 0%, rgba(148, 96, 21, 0.10) 100%) !important;
border-color: #946015 !important; border-color: #120735 !important;
color: #120735 !important;
} }
} }
@ -318,14 +345,16 @@ body:has(.o_tncsc_dashboard_root) {
display: flex !important; display: flex !important;
align-items: center !important; align-items: center !important;
justify-content: center !important; justify-content: center !important;
background: rgba(36, 50, 71, 0.05) !important; background: rgba(18, 7, 53, 0.06) !important;
border: 1px solid rgba(216, 156, 67, 0.35) !important; border: 1px solid rgba(18, 7, 53, 0.30) !important;
color: #946015 !important; color: #120735 !important;
font-size: 13px !important; font-size: 13px !important;
transition: all 0.2s ease !important; transition: all 0.2s ease !important;
&:hover { &:hover {
background: rgba(216, 156, 67, 0.15) !important; background: linear-gradient(135deg, #120735 0%, #946015 100%) !important;
border-color: transparent !important;
color: #FFFFFF !important;
transform: rotate(45deg) !important; transform: rotate(45deg) !important;
} }
} }
@ -370,13 +399,20 @@ body:has(.o_tncsc_dashboard_root) {
width: 38px !important; width: 38px !important;
height: 38px !important; height: 38px !important;
border-radius: 10px !important; border-radius: 10px !important;
background: linear-gradient(135deg, #F5A623 0%, #D48817 100%) !important; background: linear-gradient(135deg, #120735 0%, #2D1B69 100%) !important;
color: #243247 !important; color: #F5A623 !important;
display: flex !important; display: flex !important;
align-items: center !important; align-items: center !important;
justify-content: center !important; justify-content: center !important;
font-size: 16px !important; font-size: 16px !important;
box-shadow: 0 3px 10px rgba(245, 166, 35, 0.3) !important; box-shadow: 0 3px 10px rgba(18, 7, 53, 0.35) !important;
}
// Alternate gold badge for every other card
&:nth-child(even) .o_kpi_gold_badge {
background: linear-gradient(135deg, #F5A623 0%, #D48817 100%) !important;
color: #120735 !important;
box-shadow: 0 3px 10px rgba(245, 166, 35, 0.35) !important;
} }
.o_kpi_title { .o_kpi_title {
@ -450,12 +486,13 @@ body:has(.o_tncsc_dashboard_root) {
width: 34px !important; width: 34px !important;
height: 34px !important; height: 34px !important;
border-radius: 8px !important; border-radius: 8px !important;
background: #946015 !important; background: linear-gradient(135deg, #120735 0%, #946015 100%) !important;
color: #FFFFFF !important; color: #FFFFFF !important;
display: flex !important; display: flex !important;
align-items: center !important; align-items: center !important;
justify-content: center !important; justify-content: center !important;
font-size: 15px !important; font-size: 15px !important;
box-shadow: 0 3px 10px rgba(18, 7, 53, 0.3) !important;
} }
.o_ivory_card_title { .o_ivory_card_title {
@ -471,9 +508,9 @@ body:has(.o_tncsc_dashboard_root) {
} }
.o_btn_ivory_pill { .o_btn_ivory_pill {
background: #F4EFE6 !important; background: rgba(18, 7, 53, 0.05) !important;
border: 1px solid #D4CEBF !important; border: 1px solid rgba(18, 7, 53, 0.22) !important;
color: #27272A !important; color: #120735 !important;
border-radius: 9999px !important; border-radius: 9999px !important;
font-size: 12px !important; font-size: 12px !important;
font-weight: 600 !important; font-weight: 600 !important;
@ -481,8 +518,10 @@ body:has(.o_tncsc_dashboard_root) {
transition: all 0.2s !important; transition: all 0.2s !important;
&:hover { &:hover {
background: #ECE5D8 !important; background: linear-gradient(135deg, #120735 0%, #946015 100%) !important;
border-color: #C5B9A5 !important; border-color: transparent !important;
color: #FFFFFF !important;
box-shadow: 0 3px 10px rgba(18, 7, 53, 0.25) !important;
} }
} }
@ -552,9 +591,9 @@ body:has(.o_tncsc_dashboard_root) {
} }
.o_btn_details_pill { .o_btn_details_pill {
background: #FFFFFF !important; background: rgba(18, 7, 53, 0.06) !important;
color: #243247 !important; color: #120735 !important;
border: 1px solid rgba(36, 50, 71, 0.25) !important; border: 1px solid rgba(18, 7, 53, 0.28) !important;
border-radius: 9999px !important; border-radius: 9999px !important;
padding: 6px 16px !important; padding: 6px 16px !important;
font-size: 12px !important; font-size: 12px !important;
@ -562,8 +601,10 @@ body:has(.o_tncsc_dashboard_root) {
transition: all 0.2s !important; transition: all 0.2s !important;
&:hover { &:hover {
background: #FFF0D6 !important; background: linear-gradient(135deg, #120735 0%, #946015 100%) !important;
border-color: #946015 !important; border-color: transparent !important;
color: #FFFFFF !important;
box-shadow: 0 3px 12px rgba(18, 7, 53, 0.28) !important;
} }
} }
} }
@ -646,12 +687,13 @@ body:has(.o_tncsc_dashboard_root) {
width: 34px !important; width: 34px !important;
height: 34px !important; height: 34px !important;
border-radius: 8px !important; border-radius: 8px !important;
background: #946015 !important; background: linear-gradient(135deg, #946015 0%, #120735 100%) !important;
color: #FFFFFF !important; color: #FFFFFF !important;
display: flex !important; display: flex !important;
align-items: center !important; align-items: center !important;
justify-content: center !important; justify-content: center !important;
font-size: 15px !important; font-size: 15px !important;
box-shadow: 0 3px 10px rgba(18, 7, 53, 0.25) !important;
} }
.o_dark_card_title { .o_dark_card_title {
@ -667,18 +709,20 @@ body:has(.o_tncsc_dashboard_root) {
} }
.o_btn_dark_pill_sm { .o_btn_dark_pill_sm {
background: rgba(36, 50, 71, 0.05) !important; background: rgba(18, 7, 53, 0.05) !important;
border: 1px solid rgba(36, 50, 71, 0.18) !important; border: 1px solid rgba(18, 7, 53, 0.22) !important;
color: #243247 !important; color: #120735 !important;
border-radius: 9999px !important; border-radius: 9999px !important;
font-size: 12px !important; font-size: 12px !important;
font-weight: 500 !important; font-weight: 600 !important;
padding: 4px 14px !important; padding: 4px 14px !important;
transition: all 0.2s !important; transition: all 0.2s !important;
&:hover { &:hover {
background: rgba(216, 156, 67, 0.15) !important; background: linear-gradient(135deg, #120735 0%, #946015 100%) !important;
border-color: #946015 !important; border-color: transparent !important;
color: #FFFFFF !important;
box-shadow: 0 3px 10px rgba(18, 7, 53, 0.25) !important;
} }
} }
@ -752,7 +796,10 @@ body:has(.o_tncsc_dashboard_root) {
font-family: 'Playfair Display', Georgia, serif !important; font-family: 'Playfair Display', Georgia, serif !important;
font-size: 20px !important; font-size: 20px !important;
font-weight: 700 !important; font-weight: 700 !important;
color: #87530D !important; background: linear-gradient(90deg, #120735 0%, #946015 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
} }
.o_hub_section_subtitle { .o_hub_section_subtitle {
@ -786,12 +833,20 @@ body:has(.o_tncsc_dashboard_root) {
width: 36px !important; width: 36px !important;
height: 36px !important; height: 36px !important;
border-radius: 10px !important; border-radius: 10px !important;
background: linear-gradient(135deg, #F5A623 0%, #D48817 100%) !important; background: linear-gradient(135deg, #120735 0%, #2D1B69 100%) !important;
color: #243247 !important; color: #F5A623 !important;
display: flex !important; display: flex !important;
align-items: center !important; align-items: center !important;
justify-content: center !important; justify-content: center !important;
font-size: 15px !important; font-size: 15px !important;
box-shadow: 0 3px 10px rgba(18, 7, 53, 0.30) !important;
}
// Alternate pill icons — every 2nd card uses gold
&:nth-child(even) .o_hub_pill_icon {
background: linear-gradient(135deg, #F5A623 0%, #946015 100%) !important;
color: #120735 !important;
box-shadow: 0 3px 10px rgba(245, 166, 35, 0.30) !important;
} }
.o_hub_pill_title { .o_hub_pill_title {
@ -801,7 +856,7 @@ body:has(.o_tncsc_dashboard_root) {
} }
.o_hub_pill_arrow { .o_hub_pill_arrow {
color: #946015 !important; color: #120735 !important;
font-size: 13px !important; font-size: 13px !important;
transition: transform 0.2s !important; transition: transform 0.2s !important;
} }

View File

@ -1,11 +1,13 @@
// ============================================================================ // ============================================================================
// TNCSC Community OS Suite - Executive Login Page Theme // TNCSC Community OS Suite - Executive Login Page Theme
// Matching the Community Dashboard Light Ivory & Gold Theme // Dual-Tone: #120735 (Deep Forest / Royal Indigo) + #946015 (Royal Gold)
// ============================================================================ // ============================================================================
$tncsc-obsidian-dark: #F7F5F0; $tncsc-obsidian-dark: #F7F5F0;
$tncsc-obsidian-subtle: #FFFCF7; $tncsc-obsidian-subtle: #FFFCF7;
$tncsc-card-bg: #FFFFFF; $tncsc-card-bg: #FFFFFF;
$tncsc-forest: #120735;
$tncsc-forest-hover: #1E0D57;
$tncsc-gold: #946015; $tncsc-gold: #946015;
$tncsc-gold-bright: #F59E0B; $tncsc-gold-bright: #F59E0B;
$tncsc-gold-hover: #87530D; $tncsc-gold-hover: #87530D;
@ -117,10 +119,13 @@ body:has(.oe_login_form) .card {
width: 100% !important; width: 100% !important;
max-width: 440px !important; max-width: 440px !important;
background: #FFFFFF !important; background: #FFFFFF !important;
border: 1px solid rgba(216, 156, 67, 0.32) !important; border: 1px solid rgba(18, 7, 53, 0.18) !important;
border-top: 3.5px solid #946015 !important; border-top: 3.5px solid transparent !important;
background-image: linear-gradient(#FFFFFF, #FFFFFF), linear-gradient(90deg, #120735 0%, #946015 100%) !important;
background-origin: border-box !important;
background-clip: padding-box, border-box !important;
border-radius: 24px !important; border-radius: 24px !important;
box-shadow: 0 24px 60px rgba(36, 50, 71, 0.141667), 0 0 35px rgba(216, 156, 67, 0.15) !important; box-shadow: 0 24px 60px rgba(18, 7, 53, 0.14), 0 0 35px rgba(18, 7, 53, 0.10) !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;
@ -156,7 +161,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: #946015 !important; color: #120735 !important;
text-transform: uppercase !important; text-transform: uppercase !important;
line-height: 1.3 !important; line-height: 1.3 !important;
} }
@ -166,7 +171,10 @@ 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: #946015 !important; background: linear-gradient(90deg, #120735 0%, #946015 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-transform: uppercase !important; text-transform: uppercase !important;
margin-top: 2px !important; margin-top: 2px !important;
} }
@ -188,7 +196,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: #946015 !important; color: #120735 !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;
@ -203,7 +211,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: #946015 !important; color: #120735 !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;
@ -214,7 +222,7 @@ body:has(.oe_login_form) .card {
cursor: pointer !important; cursor: pointer !important;
&:hover { &:hover {
color: #87530D !important; color: #2D1B69 !important;
text-decoration: underline !important; text-decoration: underline !important;
background: transparent !important; background: transparent !important;
} }
@ -240,8 +248,8 @@ body:has(.oe_login_form) .card {
&:focus { &:focus {
background-color: #FFFCF7 !important; background-color: #FFFCF7 !important;
border-color: #946015 !important; border-color: #120735 !important;
box-shadow: 0 0 0 3px rgba(216, 156, 67, 0.3), inset 0 2px 4px rgba(36, 50, 71, 0.0833333) !important; box-shadow: 0 0 0 3px rgba(18, 7, 53, 0.18), inset 0 2px 4px rgba(36, 50, 71, 0.0833333) !important;
color: #243247 !important; color: #243247 !important;
} }
@ -387,7 +395,10 @@ 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: #946015; background: linear-gradient(90deg, #120735 0%, #946015 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-align: center; text-align: center;
text-transform: uppercase; text-transform: uppercase;
font-weight: 600; font-weight: 600;