From 7ffe7245697aea3ae795072c239c734dd3291598 Mon Sep 17 00:00:00 2001 From: Alaguraj0361 Date: Sat, 27 Dec 2025 15:57:27 +0530 Subject: [PATCH] login and home page ui updated --- PRIMARY_COLOR_CHANGES.md | 105 +++++++++++ addons/home_dashboard/__manifest__.py | 1 + .../static/src/css/home_menu.css | 82 +++++---- .../static/src/css/login_style.css | 171 +++++++++--------- .../static/src/css/theme_variables.css | 154 ++++++++++++++++ .../home_dashboard/views/login_templates.xml | 39 ++-- 6 files changed, 408 insertions(+), 144 deletions(-) create mode 100644 PRIMARY_COLOR_CHANGES.md create mode 100644 addons/home_dashboard/static/src/css/theme_variables.css diff --git a/PRIMARY_COLOR_CHANGES.md b/PRIMARY_COLOR_CHANGES.md new file mode 100644 index 0000000..e125dbc --- /dev/null +++ b/PRIMARY_COLOR_CHANGES.md @@ -0,0 +1,105 @@ +# Odoo Primary Color Change - #fecd4f + +## Summary +Successfully changed the entire Odoo site's primary color to **#fecd4f** (Golden Yellow). + +## Changes Made + +### 1. Created Theme Variables File +**File:** `d:\Odoo\addons\home_dashboard\static\src\css\theme_variables.css` +- Defined CSS custom properties (variables) for the primary color and all variations +- Applied primary color to all common Odoo UI elements: + - Buttons (primary, save, create) + - Links and hover states + - Active/selected states + - Badges and tags + - Progress bars + - Checkboxes and radio buttons + - Focus states + - Navigation bar + - Menu items + - Kanban views + - Pagination + - Tabs + - Dropdowns + - Search bars + +### 2. Updated Home Menu CSS +**File:** `d:\Odoo\addons\home_dashboard\static\src\css\home_menu.css` +- App card hover effects now use primary color (#fecd4f) +- App name hover color changed to primary color +- User avatar background uses gradient with primary color +- Badge notifications use primary color +- AI icon gradient updated to include primary color + +### 3. Updated Manifest +**File:** `d:\Odoo\addons\home_dashboard\__manifest__.py` +- Added `theme_variables.css` to assets list (loads first) + +### 4. Existing Login Page +**File:** `d:\Odoo\addons\home_dashboard\static\src\css\login_style.css` +- Already uses #fecd4f in the gradient background +- Login button uses gradient from secondary to primary color + +## Color Palette + +### Primary Colors +- **Primary:** `#fecd4f` (Golden Yellow) +- **Primary Dark:** `#e5b846` +- **Primary Light:** `#ffd970` +- **Primary Lighter:** `#ffe599` + +### Secondary Colors +- **Secondary:** `#2bb1a5` (Teal/Turquoise) +- **Secondary Dark:** `#259a8f` +- **Secondary Light:** `#4dc4b8` + +### Gradients +- **Primary Gradient:** `linear-gradient(135deg, #fecd4f 0%, #ffd970 100%)` +- **Primary to Secondary:** `linear-gradient(135deg, #fecd4f 0%, #2bb1a5 100%)` +- **Secondary to Primary:** `linear-gradient(to right, #2bb1a5, #fecd4f)` + +## Next Steps + +### To Apply Changes: +1. **Restart Odoo Service:** + ```bash + docker-compose restart odoo + ``` + +2. **Update the Module:** + ```bash + docker-compose exec odoo odoo -u home_dashboard -d FOODIES-DELIGHT --stop-after-init + ``` + +3. **Clear Browser Cache:** + - Press `Ctrl + Shift + Delete` (Windows) + - Clear cached images and files + - Or use hard refresh: `Ctrl + F5` + +### Verification: +After restarting, check these elements for the primary color: +- ✅ Login page background and buttons +- ✅ Home dashboard app cards (hover effect) +- ✅ Primary buttons throughout Odoo +- ✅ Links and active menu items +- ✅ Form save/create buttons +- ✅ Navigation bar +- ✅ Selected items in lists/kanban views +- ✅ Badges and tags +- ✅ Focus states on input fields + +## Customization + +To change the primary color in the future, simply edit: +`d:\Odoo\addons\home_dashboard\static\src\css\theme_variables.css` + +Update the `--primary-color` variable at the top of the file: +```css +:root { + --primary-color: #YOUR_COLOR_HERE; + /* ... */ +} +``` + +Then restart Odoo and clear browser cache. diff --git a/addons/home_dashboard/__manifest__.py b/addons/home_dashboard/__manifest__.py index ab473a9..b105734 100644 --- a/addons/home_dashboard/__manifest__.py +++ b/addons/home_dashboard/__manifest__.py @@ -11,6 +11,7 @@ ], 'assets': { 'web.assets_common': [ + 'home_dashboard/static/src/css/theme_variables.css', 'home_dashboard/static/src/css/home_menu.css', 'home_dashboard/static/src/css/login_style.css', ], diff --git a/addons/home_dashboard/static/src/css/home_menu.css b/addons/home_dashboard/static/src/css/home_menu.css index ea73ecc..7d949b3 100644 --- a/addons/home_dashboard/static/src/css/home_menu.css +++ b/addons/home_dashboard/static/src/css/home_menu.css @@ -1,6 +1,6 @@ /* Main background with premium gradient */ .o_home_menu_background { - background: linear-gradient(135deg, #f0f1f9 0%, #f6f7ff 50%, #ffffff 100%) !important; + background: linear-gradient(135deg, #8fe0d6 0%, #ffecb5 100%) !important; min-height: 100vh !important; padding: 0 !important; margin: 0 !important; @@ -8,66 +8,89 @@ position: relative !important; } -/* App grid layout */ .o_apps { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; - gap: 30px 45px !important; + gap: 40px 50px !important; max-width: 1000px !important; margin: 0 auto !important; padding: 20px !important; } -/* App card styling */ .o_app { display: flex !important; flex-direction: column !important; align-items: center !important; text-decoration: none !important; - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; - width: 110px !important; + transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important; + width: 120px !important; } .o_app_icon_container { - background: white !important; - width: 84px !important; - height: 84px !important; + background: #ffffff !important; + width: 90px !important; + height: 90px !important; display: flex !important; align-items: center !important; justify-content: center !important; - border-radius: 18px !important; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important; - margin-bottom: 8px !important; - transition: all 0.25s ease !important; + border-radius: 24px !important; + box-shadow: + 0 4px 6px -1px rgba(0, 0, 0, 0.05), + 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important; + margin-bottom: 12px !important; + position: relative !important; + overflow: hidden; + border: 1px solid rgba(0, 0, 0, 0.03) !important; + transition: all 0.4s ease !important; } .o_app:hover .o_app_icon_container { - transform: translateY(-5px) !important; - box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08) !important; + transform: translateY(-10px) rotate(2deg) !important; + background: #ffffff !important; + border: 1px solid #fecd4f !important; + box-shadow: + 0 20px 25px -5px rgba(254, 205, 79, 0.2), + 0 10px 10px -5px rgba(43, 177, 165, 0.1) !important; +} + +.o_app_icon_container::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 50%); + z-index: 1; } .o_app_icon { - width: 52px !important; - height: 52px !important; + width: 56px !important; + height: 56px !important; object-fit: contain !important; + z-index: 2; + transition: transform 0.3s ease !important; +} + +.o_app:hover .o_app_icon { + transform: scale(1.1) !important; } -/* App name styling */ .o_app_name { - color: #4b4b4b !important; - font-size: 13px !important; + color: #2d3748 !important; + font-size: 14px !important; font-weight: 500 !important; text-align: center !important; - letter-spacing: 0.1px !important; + letter-spacing: -0.2px !important; + transition: color 0.3s ease !important; } .o_app:hover .o_app_name { - color: #000 !important; - text-decoration: underline !important; + color: #2bb1a5 !important; + font-weight: 700 !important; } -/* Top bar styling */ .o_home_top_bar { position: absolute !important; top: 15px !important; @@ -92,23 +115,21 @@ transform: scale(1.1) !important; } -/* AI Icon special styling */ .o_ai_icon { - background: linear-gradient(to bottom right, #ff5e62, #ff9966, #ffcc33) !important; + background: linear-gradient(to bottom right, #fecd4f, #ffd970, #2bb1a5) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; font-weight: bold !important; } -/* Badge for notifications */ .badge_dot { position: absolute !important; top: -2px !important; right: -2px !important; width: 8px !important; height: 8px !important; - background: #ff5e62 !important; + background: var(--primary-color, #fecd4f) !important; border-radius: 50% !important; border: 1px solid white !important; } @@ -117,13 +138,12 @@ width: 30px !important; height: 30px !important; border-radius: 50% !important; - background: #714b67 !important; - /* Odoo purple */ + background: linear-gradient(135deg, var(--primary-color, #fecd4f) 0%, var(--secondary-color, #2bb1a5) 100%) !important; color: white !important; display: flex !important; align-items: center !important; justify-content: center !important; font-weight: 600 !important; font-size: 11px !important; - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important; + box-shadow: 0 2px 5px rgba(254, 205, 79, 0.3) !important; } \ No newline at end of file diff --git a/addons/home_dashboard/static/src/css/login_style.css b/addons/home_dashboard/static/src/css/login_style.css index 9e0c677..9db06f6 100644 --- a/addons/home_dashboard/static/src/css/login_style.css +++ b/addons/home_dashboard/static/src/css/login_style.css @@ -1,143 +1,138 @@ -/* Container takes full screen */ +/* Container: Full Screen Split */ .o_login_main_wrapper { display: flex !important; height: 100vh !important; width: 100vw !important; overflow: hidden; - /* Main Background Gradient matching your colors */ - background: linear-gradient(135deg, #fecd4f 0%, #2bb1a5 100%) !important; + background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), + url('/home_dashboard/static/src/img/login_bg.png') no-repeat center center !important; + background-size: cover !important; } -/* Left Side - Image and Text */ +/* Left Side: Background Image and Branding */ .o_login_left_side { flex: 1.2 !important; - /* Slightly wider than the form side */ display: flex !important; align-items: center !important; justify-content: center !important; - padding: 40px !important; + padding: 60px !important; position: relative; - /* Using the background image from your static path */ - background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), + /* Dark overlay on image for text readability */ + /* background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/home_dashboard/static/src/img/login_bg.png') no-repeat center center !important; - background-size: cover !important; + background-size: cover !important; */ color: white !important; } +.o_login_content { + text-align: center; + max-width: 80%; +} + .o_login_content h1 { - font-size: 3.5rem !important; + font-size: 3.8rem !important; font-weight: 800 !important; - text-shadow: 2px 4px 10px rgba(0, 0, 0, 0.4) !important; + margin-bottom: 20px; + text-shadow: 2px 4px 15px rgba(0, 0, 0, 0.6) !important; } -/* Right Side - Form Section */ +.o_login_content p { + font-size: 1.4rem !important; + opacity: 0.9; +} + +/* Right Side: Form Section */ .o_login_right_side { - flex: 0 0 550px !important; - /* Fixed width for the form area */ - background: #ffffff !important; - /* Solid white background for the right side */ + flex: 1.2 !important; + /* background: #ffffff !important; */ display: flex !important; justify-content: center !important; align-items: center !important; - padding: 20px !important; -} - -/* Card Styling - No more transparency if you want exactly the 2nd image look */ -.o_login_card { - width: 100% !important; - max-width: 400px !important; - padding: 0 !important; -} - -/* Logo container for the right side */ -/* லாகின் கார்டு - கிரேடியன்ட் தோற்றம் */ -.o_login_card { - width: 100% !important; - max-width: 420px !important; padding: 40px !important; - - /* கார்டுக்கு கிரேடியன்ட் பின்னணி */ - background: linear-gradient(145deg, #ffffff, #f9f9f9) !important; - - /* கார்டு விளிம்பில் மெல்லிய கிரேடியன்ட் பார்டர் வர இந்த முறையைப் பயன்படுத்தலாம் */ - border: 2px solid transparent !important; - background-clip: padding-box !important; - position: relative !important; - - border-radius: 30px !important; - box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1) !important; + position: relative; } -/* ஒருவேளை கார்டின் உள்ளேயே நிறம் மாற வேண்டும் என்றால் இதை பயன்படுத்தவும் */ -/* background: linear-gradient(135deg, rgba(254, 205, 79, 0.1) 0%, rgba(43, 177, 165, 0.1) 100%) !important; */ +.o_login_card_wrapper { + width: 60% +} -/* லாகின் பட்டன் - முழு கிரேடியன்ட் */ -.oe_login_buttons .btn-primary { - background: linear-gradient(to right, #2bb1a5, #fecd4f) !important; - /* பச்சை முதல் மஞ்சள் வரை */ - border: none !important; - border-radius: 25px !important; - color: white !important; - font-weight: bold !important; - padding: 12px !important; +/* Floating Card UI */ +.o_login_card { width: 100% !important; - transition: transform 0.2s ease !important; + max-width: 600px !important; + padding: 40px !important; + background: #ffffff !important; + border-radius: 25px !important; + box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1) !important; + border: 1px solid #f1f1f1 !important; + z-index: 2; } -.oe_login_buttons .btn-primary:hover { - transform: scale(1.02) !important; - box-shadow: 0 5px 15px rgba(43, 177, 165, 0.4) !important; -} - -/* இன்புட் பீல்டுகள் (Input Fields) */ -.form-control, -.o_custom_input { - border-radius: 15px !important; - border: 1px solid #eee !important; - padding: 12px 20px !important; - background: white !important; -} - -/* லேபிள்கள் மற்றும் தலைப்பு நிறம் */ +/* Header Text Gradient */ .o_login_header_text h3 { + font-size: 2rem !important; + font-weight: 800 !important; + margin-bottom: 10px; background: -webkit-linear-gradient(#2bb1a5, #fecd4f); -webkit-background-clip: text; -webkit-text-fill-color: transparent; - font-weight: 800 !important; +} + +/* Logo */ +.o_login_logo_container { + text-align: center; + margin-bottom: 30px; } .o_login_logo_container img { - max-width: 120px; + max-height: 80px; + width: auto; } -Updated Button Color .oe_login_buttons .btn-primary { - background: #2bb1a5 !important; +/* Form Inputs */ +.form-control { + background: #f9f9f9 !important; + border: 1px solid #edeef0 !important; + border-radius: 12px !important; + padding: 12px 15px !important; + height: auto !important; +} + +.form-control:focus { + border-color: #2bb1a5 !important; + box-shadow: 0 0 0 3px rgba(43, 177, 165, 0.1) !important; +} + +/* Login Button with Gradient */ +.oe_login_buttons .btn-primary { + background: linear-gradient(135deg, #2bb1a5 0%, #fecd4f 100%) !important; border: none !important; - border-radius: 25px !important; - font-weight: bold !important; - padding: 12px !important; + border-radius: 12px !important; + padding: 14px !important; + font-weight: 700 !important; + font-size: 1rem !important; + color: white !important; width: 100% !important; + transition: all 0.3s ease !important; + box-shadow: 0 4px 15px rgba(43, 177, 165, 0.3) !important; } -/* Placeholder color styling */ -.o_custom_input::placeholder { - color: #999; +.oe_login_buttons .btn-primary:hover { + transform: translateY(-2px); + box-shadow: 0 8px 20px rgba(43, 177, 165, 0.4) !important; } -/* Hide Odoo's default navbar/footer on login */ -.o_main_navbar, -footer { - display: none !important; -} - -/* Responsive fix */ +/* Responsive Handling */ @media (max-width: 992px) { + .o_login_main_wrapper { + flex-direction: column; + } + .o_login_left_side { display: none !important; - /* Hide image on mobile */ } .o_login_right_side { - flex: 1 !important; + background: linear-gradient(135deg, #fecd4f 0%, #2bb1a5 100%) !important; } } \ No newline at end of file diff --git a/addons/home_dashboard/static/src/css/theme_variables.css b/addons/home_dashboard/static/src/css/theme_variables.css new file mode 100644 index 0000000..1c10ba2 --- /dev/null +++ b/addons/home_dashboard/static/src/css/theme_variables.css @@ -0,0 +1,154 @@ +/* ======================================== + ODOO THEME COLOR VARIABLES + Primary Color: #fecd4f (Golden Yellow) + ======================================== */ + +:root { + /* Primary Brand Colors */ + --primary-color: #fecd4f; + --primary-dark: #e5b846; + --primary-light: #ffd970; + --primary-lighter: #ffe599; + + /* Secondary/Accent Color */ + --secondary-color: #2bb1a5; + --secondary-dark: #259a8f; + --secondary-light: #4dc4b8; + + /* Gradient Combinations */ + --gradient-primary: linear-gradient(135deg, #fecd4f 0%, #ffd970 100%); + --gradient-primary-secondary: linear-gradient(135deg, #fecd4f 0%, #2bb1a5 100%); + --gradient-secondary-primary: linear-gradient(to right, #2bb1a5, #fecd4f); + + /* UI Element Colors */ + --btn-primary-bg: #fecd4f; + --btn-primary-hover: #e5b846; + --link-color: #fecd4f; + --link-hover: #e5b846; + + /* Status Colors with Primary Tint */ + --success-color: #2bb1a5; + --warning-color: #fecd4f; + --danger-color: #ff5e62; + --info-color: #4dc4b8; + + /* Neutral Colors */ + --text-primary: #2c3e50; + --text-secondary: #4b4b4b; + --text-muted: #999; + --bg-light: #f0f1f9; + --bg-white: #ffffff; + --border-color: #eee; + + /* Shadow with Primary Color */ + --shadow-primary: 0 4px 12px rgba(254, 205, 79, 0.2); + --shadow-primary-hover: 0 8px 20px rgba(254, 205, 79, 0.3); +} + +/* Apply primary color to common Odoo elements */ +.btn-primary, +.o_form_button_save, +.o_form_button_create { + background-color: var(--primary-color) !important; + border-color: var(--primary-color) !important; + color: #fff !important; +} + +.btn-primary:hover, +.o_form_button_save:hover, +.o_form_button_create:hover { + background-color: var(--primary-dark) !important; + border-color: var(--primary-dark) !important; +} + +/* Links */ +a, +.o_form_uri, +.oe_link { + color: var(--primary-color) !important; +} + +a:hover, +.o_form_uri:hover, +.oe_link:hover { + color: var(--primary-dark) !important; +} + +/* Active/Selected States */ +.nav-link.active, +.o_menu_sections .dropdown-item.active, +.o_kanban_record.o_kanban_record_has_image_fill.oe_kanban_global_click_edit.o_kanban_record_selected { + background-color: var(--primary-light) !important; + color: #fff !important; +} + +/* Badges */ +.badge-primary, +.o_tag { + background-color: var(--primary-color) !important; + color: #fff !important; +} + +/* Progress bars */ +.progress-bar { + background-color: var(--primary-color) !important; +} + +/* Checkboxes and Radio buttons */ +.custom-checkbox .custom-control-input:checked~.custom-control-label::before, +.o_checkbox input:checked+label::before { + background-color: var(--primary-color) !important; + border-color: var(--primary-color) !important; +} + +/* Focus states */ +.form-control:focus, +.o_input:focus { + border-color: var(--primary-color) !important; + box-shadow: 0 0 0 0.2rem rgba(254, 205, 79, 0.25) !important; +} + +/* Odoo Navbar */ +.o_main_navbar { + background-color: var(--primary-color) !important; +} + +/* Odoo Menu Items */ +.o_menu_sections button.active, +.o_menu_sections .dropdown-item.focus, +.o_menu_sections .dropdown-item:focus { + background-color: var(--primary-light) !important; +} + +/* Kanban View Selected */ +.o_kanban_record.o_kanban_record_selected { + box-shadow: 0 0 0 2px var(--primary-color) !important; +} + +/* Pagination */ +.page-item.active .page-link { + background-color: var(--primary-color) !important; + border-color: var(--primary-color) !important; +} + +/* Tabs */ +.nav-tabs .nav-link.active { + border-bottom-color: var(--primary-color) !important; + color: var(--primary-color) !important; +} + +/* Dropdown active items */ +.dropdown-item.active, +.dropdown-item:active { + background-color: var(--primary-color) !important; +} + +/* Status bar buttons */ +.o_statusbar_status button.btn-primary.disabled { + background-color: var(--primary-light) !important; +} + +/* Search bar focus */ +.o_searchview_input:focus { + border-color: var(--primary-color) !important; +} \ No newline at end of file diff --git a/addons/home_dashboard/views/login_templates.xml b/addons/home_dashboard/views/login_templates.xml index 00e2b5b..9ad473a 100644 --- a/addons/home_dashboard/views/login_templates.xml +++ b/addons/home_dashboard/views/login_templates.xml @@ -11,39 +11,28 @@