From 23b3075a3b628f66c74a0ea23b544bad08fa629d Mon Sep 17 00:00:00 2001 From: selvi Date: Fri, 2 Oct 2026 19:16:57 +0530 Subject: [PATCH] dashboard color updated --- .../static/src/scss/community_dashboard.scss | 169 ++++++++++++------ .../static/src/scss/login_theme.scss | 35 ++-- 2 files changed, 135 insertions(+), 69 deletions(-) diff --git a/addons/tncsc_deployment/static/src/scss/community_dashboard.scss b/addons/tncsc_deployment/static/src/scss/community_dashboard.scss index 22798f0..c0af17f 100644 --- a/addons/tncsc_deployment/static/src/scss/community_dashboard.scss +++ b/addons/tncsc_deployment/static/src/scss/community_dashboard.scss @@ -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) // ---------------------------------------------------------------------- @@ -15,7 +24,7 @@ max-width: 220px !important; height: 100vh !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; box-sizing: border-box !important; z-index: 1050 !important; @@ -25,7 +34,7 @@ width: 4px; } &::-webkit-scrollbar-thumb { - background: rgba(216, 156, 67, 0.2); + background: rgba(18, 7, 53, 0.20); border-radius: 4px; } @@ -39,7 +48,14 @@ 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_line3 { font-family: 'Playfair Display', Georgia, serif !important; @@ -59,8 +75,8 @@ padding: 10px 14px !important; border-radius: 12px !important; margin-bottom: 5px !important; - border: 1px solid transparent; - color: #596579 !important; + border: 1px solid transparent !important; + color: rgba(18, 7, 53, 0.55) !important; font-size: 13px !important; font-weight: 500 !important; text-decoration: none !important; @@ -68,27 +84,32 @@ transition: all 0.2s ease !important; &:hover { - background: rgba(36, 50, 71, 0.05) !important; - color: #243247 !important; + background: rgba(18, 7, 53, 0.06) !important; + border-color: rgba(18, 7, 53, 0.15) !important; + color: #120735 !important; + + .o_nav_icon { + color: #120735 !important; + } } .o_nav_icon { font-size: 14px !important; width: 18px !important; text-align: center !important; - color: #596579 !important; + color: rgba(18, 7, 53, 0.45) !important; transition: color 0.2s !important; } &.active { - background: #FFF0D6 !important; - border: 1px solid rgba(216, 156, 67, 0.45) !important; - color: #87530D !important; - font-weight: 600 !important; - box-shadow: 0 2px 10px rgba(36, 50, 71, 0.06), inset 0 0 12px rgba(216, 156, 67, 0.12) !important; + background: linear-gradient(135deg, rgba(18, 7, 53, 0.12) 0%, rgba(18, 7, 53, 0.06) 100%) !important; + border: 1px solid rgba(18, 7, 53, 0.32) !important; + color: #120735 !important; + font-weight: 700 !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 { - color: #87530D !important; + color: #120735 !important; } } } @@ -122,10 +143,10 @@ font-family: 'Playfair Display', Georgia, serif !important; font-style: italic !important; font-size: 12.5px !important; - color: #946015 !important; + color: #120735 !important; line-height: 1.25 !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-weight: 700 !important; letter-spacing: 1.5px !important; - color: #946015 !important; + color: #120735 !important; margin-bottom: 4px !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 { @@ -279,35 +304,37 @@ body:has(.o_tncsc_dashboard_root) { } .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; - color: #000000 !important; + color: #FFFFFF !important; font-weight: 700 !important; font-size: 12.5px !important; padding: 8px 20px !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; &:hover { 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 { - background: rgba(36, 50, 71, 0.05) !important; - border: 1px solid rgba(216, 156, 67, 0.38) !important; - color: #243247 !important; + background: rgba(18, 7, 53, 0.05) !important; + border: 1px solid rgba(18, 7, 53, 0.28) !important; + color: #120735 !important; font-size: 12.5px !important; - font-weight: 500 !important; + font-weight: 600 !important; padding: 7px 18px !important; border-radius: 9999px !important; transition: all 0.2s ease !important; &:hover { - background: rgba(216, 156, 67, 0.12) !important; - border-color: #946015 !important; + background: linear-gradient(135deg, rgba(18, 7, 53, 0.10) 0%, rgba(148, 96, 21, 0.10) 100%) !important; + border-color: #120735 !important; + color: #120735 !important; } } @@ -318,14 +345,16 @@ body:has(.o_tncsc_dashboard_root) { display: flex !important; align-items: center !important; justify-content: center !important; - background: rgba(36, 50, 71, 0.05) !important; - border: 1px solid rgba(216, 156, 67, 0.35) !important; - color: #946015 !important; + background: rgba(18, 7, 53, 0.06) !important; + border: 1px solid rgba(18, 7, 53, 0.30) !important; + color: #120735 !important; font-size: 13px !important; transition: all 0.2s ease !important; &: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; } } @@ -370,13 +399,20 @@ body:has(.o_tncsc_dashboard_root) { width: 38px !important; height: 38px !important; border-radius: 10px !important; - background: linear-gradient(135deg, #F5A623 0%, #D48817 100%) !important; - color: #243247 !important; + background: linear-gradient(135deg, #120735 0%, #2D1B69 100%) !important; + color: #F5A623 !important; display: flex !important; align-items: center !important; justify-content: center !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 { @@ -450,12 +486,13 @@ body:has(.o_tncsc_dashboard_root) { width: 34px !important; height: 34px !important; border-radius: 8px !important; - background: #946015 !important; + background: linear-gradient(135deg, #120735 0%, #946015 100%) !important; color: #FFFFFF !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 15px !important; + box-shadow: 0 3px 10px rgba(18, 7, 53, 0.3) !important; } .o_ivory_card_title { @@ -471,9 +508,9 @@ body:has(.o_tncsc_dashboard_root) { } .o_btn_ivory_pill { - background: #F4EFE6 !important; - border: 1px solid #D4CEBF !important; - color: #27272A !important; + background: rgba(18, 7, 53, 0.05) !important; + border: 1px solid rgba(18, 7, 53, 0.22) !important; + color: #120735 !important; border-radius: 9999px !important; font-size: 12px !important; font-weight: 600 !important; @@ -481,8 +518,10 @@ body:has(.o_tncsc_dashboard_root) { transition: all 0.2s !important; &:hover { - background: #ECE5D8 !important; - border-color: #C5B9A5 !important; + background: linear-gradient(135deg, #120735 0%, #946015 100%) !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 { - background: #FFFFFF !important; - color: #243247 !important; - border: 1px solid rgba(36, 50, 71, 0.25) !important; + background: rgba(18, 7, 53, 0.06) !important; + color: #120735 !important; + border: 1px solid rgba(18, 7, 53, 0.28) !important; border-radius: 9999px !important; padding: 6px 16px !important; font-size: 12px !important; @@ -562,8 +601,10 @@ body:has(.o_tncsc_dashboard_root) { transition: all 0.2s !important; &:hover { - background: #FFF0D6 !important; - border-color: #946015 !important; + background: linear-gradient(135deg, #120735 0%, #946015 100%) !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; height: 34px !important; border-radius: 8px !important; - background: #946015 !important; + background: linear-gradient(135deg, #946015 0%, #120735 100%) !important; color: #FFFFFF !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 15px !important; + box-shadow: 0 3px 10px rgba(18, 7, 53, 0.25) !important; } .o_dark_card_title { @@ -667,18 +709,20 @@ body:has(.o_tncsc_dashboard_root) { } .o_btn_dark_pill_sm { - background: rgba(36, 50, 71, 0.05) !important; - border: 1px solid rgba(36, 50, 71, 0.18) !important; - color: #243247 !important; + background: rgba(18, 7, 53, 0.05) !important; + border: 1px solid rgba(18, 7, 53, 0.22) !important; + color: #120735 !important; border-radius: 9999px !important; font-size: 12px !important; - font-weight: 500 !important; + font-weight: 600 !important; padding: 4px 14px !important; transition: all 0.2s !important; &:hover { - background: rgba(216, 156, 67, 0.15) !important; - border-color: #946015 !important; + background: linear-gradient(135deg, #120735 0%, #946015 100%) !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-size: 20px !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 { @@ -786,12 +833,20 @@ body:has(.o_tncsc_dashboard_root) { width: 36px !important; height: 36px !important; border-radius: 10px !important; - background: linear-gradient(135deg, #F5A623 0%, #D48817 100%) !important; - color: #243247 !important; + background: linear-gradient(135deg, #120735 0%, #2D1B69 100%) !important; + color: #F5A623 !important; display: flex !important; align-items: center !important; justify-content: center !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 { @@ -801,7 +856,7 @@ body:has(.o_tncsc_dashboard_root) { } .o_hub_pill_arrow { - color: #946015 !important; + color: #120735 !important; font-size: 13px !important; transition: transform 0.2s !important; } diff --git a/addons/tncsc_deployment/static/src/scss/login_theme.scss b/addons/tncsc_deployment/static/src/scss/login_theme.scss index 178e0ae..17909fa 100644 --- a/addons/tncsc_deployment/static/src/scss/login_theme.scss +++ b/addons/tncsc_deployment/static/src/scss/login_theme.scss @@ -1,11 +1,13 @@ // ============================================================================ // 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-subtle: #FFFCF7; $tncsc-card-bg: #FFFFFF; +$tncsc-forest: #120735; +$tncsc-forest-hover: #1E0D57; $tncsc-gold: #946015; $tncsc-gold-bright: #F59E0B; $tncsc-gold-hover: #87530D; @@ -117,10 +119,13 @@ body:has(.oe_login_form) .card { width: 100% !important; max-width: 440px !important; background: #FFFFFF !important; - border: 1px solid rgba(216, 156, 67, 0.32) !important; - border-top: 3.5px solid #946015 !important; + border: 1px solid rgba(18, 7, 53, 0.18) !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; - 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; margin: 30px auto !important; backdrop-filter: blur(16px) !important; @@ -156,7 +161,7 @@ body:has(.oe_login_form) .card { font-size: 13.5px !important; font-weight: 700 !important; letter-spacing: 1.5px !important; - color: #946015 !important; + color: #120735 !important; text-transform: uppercase !important; line-height: 1.3 !important; } @@ -166,7 +171,10 @@ body:has(.oe_login_form) .card { font-size: 12px !important; font-weight: 700 !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; margin-top: 2px !important; } @@ -188,7 +196,7 @@ body:has(.oe_login_form) .card { font-weight: 700 !important; letter-spacing: 1px !important; text-transform: uppercase !important; - color: #946015 !important; + color: #120735 !important; margin-bottom: 6px !important; display: flex !important; justify-content: space-between !important; @@ -203,7 +211,7 @@ body:has(.oe_login_form) .card { .form-label button { background: transparent !important; border: none !important; - color: #946015 !important; + color: #120735 !important; font-size: 11.5px !important; font-weight: 500 !important; letter-spacing: 0 !important; @@ -214,7 +222,7 @@ body:has(.oe_login_form) .card { cursor: pointer !important; &:hover { - color: #87530D !important; + color: #2D1B69 !important; text-decoration: underline !important; background: transparent !important; } @@ -240,8 +248,8 @@ body:has(.oe_login_form) .card { &:focus { 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; + border-color: #120735 !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; } @@ -387,7 +395,10 @@ body:has(.oe_login_form) .card { font-family: $tncsc-font-serif; font-size: 11.5px; 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-transform: uppercase; font-weight: 600;