AjmalCybro
4 months ago
85 changed files with 2786 additions and 0 deletions
@ -0,0 +1,47 @@ |
|||
.. image:: https://img.shields.io/badge/license-LGPL--3-green.svg |
|||
:target: https://www.gnu.org/licenses/lgpl-3.0-standalone.html |
|||
:alt: License: LGPL-3 |
|||
|
|||
Jazzy Backend Theme |
|||
=================== |
|||
* Jazzy Backend Theme module for Odoo 18 community editions. This is a Minimalist and Elegant Backend Theme for Odoo 17. This theme will change your Old Experience to a New Experience with Odoo. |
|||
|
|||
Configuration |
|||
------------- |
|||
- www.odoo.com/documentation/18.0/setup/install.html |
|||
- Install our custom addon |
|||
|
|||
Company |
|||
------- |
|||
* `Cybrosys Techno Solutions <https://cybrosys.com/>`__ |
|||
|
|||
License |
|||
------- |
|||
General Public License, Version 3 (LGPL v3). |
|||
(https://www.gnu.org/licenses/lgpl-3.0-standalone.html) |
|||
|
|||
Credits |
|||
------- |
|||
Developer: (V17) Developer ADVAITH BG, Contact: odoo@cybrosys.com |
|||
(V18) Developer ATHIRA K, Contact: odoo@cybrosys.com |
|||
Contacts |
|||
-------- |
|||
* Mail Contact : odoo@cybrosys.com |
|||
* Website : https://cybrosys.com |
|||
|
|||
Bug Tracker |
|||
----------- |
|||
Bugs are tracked on GitHub Issues. In case of trouble, please check there if your issue has already been reported. |
|||
|
|||
Maintainer |
|||
-------- |
|||
This module is maintained by Cybrosys Technologies. |
|||
|
|||
For support and more information, please visit https://www.cybrosys.com |
|||
|
|||
.. image:: https://cybrosys.com/images/logo.png |
|||
:target: https://cybrosys.com" |
|||
|
|||
Further information |
|||
----------------- |
|||
HTML Description: `<static/description/index.html>`__ |
|||
@ -0,0 +1,22 @@ |
|||
# -*- coding: utf-8 -*- |
|||
############################################################################# |
|||
# |
|||
# Cybrosys Technologies Pvt. Ltd. |
|||
# |
|||
# Copyright (C) 2025-TODAY Cybrosys Technologies(<https://www.cybrosys.com>) |
|||
# Author: Cybrosys Techno Solutions(<https://www.cybrosys.com>) |
|||
# |
|||
# You can modify it under the terms of the GNU LESSER |
|||
# GENERAL PUBLIC LICENSE (LGPL v3), Version 3. |
|||
# |
|||
# This program is distributed in the hope that it will be useful, |
|||
# but WITHOUT ANY WARRANTY; without even the implied warranty of |
|||
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
|||
# GNU LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details. |
|||
# |
|||
# You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE |
|||
# (LGPL v3) along with this program. |
|||
# If not, see <http://www.gnu.org/licenses/>. |
|||
# |
|||
############################################################################# |
|||
from . import models |
|||
@ -0,0 +1,58 @@ |
|||
# -*- coding: utf-8 -*- |
|||
############################################################################# |
|||
# |
|||
# Cybrosys Technologies Pvt. Ltd. |
|||
# |
|||
# Copyright (C) 2025-TODAY Cybrosys Technologies(<https://www.cybrosys.com>) |
|||
# Author: Cybrosys Techno Solutions(<https://www.cybrosys.com>) |
|||
# |
|||
# You can modify it under the terms of the GNU LESSER |
|||
# GENERAL PUBLIC LICENSE (LGPL v3), Version 3. |
|||
# |
|||
# This program is distributed in the hope that it will be useful, |
|||
# but WITHOUT ANY WARRANTY; without even the implied warranty of |
|||
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
|||
# GNU LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details. |
|||
# |
|||
# You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE |
|||
# (LGPL v3) along with this program. |
|||
# If not, see <http://www.gnu.org/licenses/>. |
|||
# |
|||
############################################################################# |
|||
{ |
|||
"name": "Jazzy Backend Theme", |
|||
"version": "18.0.1.0.0", |
|||
"category": "Themes/Backend", |
|||
"summary": "Jazzy backed Theme is an attractive theme for backend", |
|||
"description": """Minimalist and elegant backend theme for Odoo Backend""", |
|||
"author": "Cybrosys Techno Solutions", |
|||
"company": "Cybrosys Techno Solutions", |
|||
"maintainer": "Cybrosys Techno Solutions", |
|||
"website": "https://www.cybrosys.com", |
|||
"depends": ["web", "mail"], |
|||
"data": [ |
|||
'views/layout_templates.xml', |
|||
'views/res_config_settings_views.xml', |
|||
], |
|||
'assets': { |
|||
'web.assets_backend': [ |
|||
'jazzy_backend_theme/static/src/components/app_menu/side_menu.xml', |
|||
'jazzy_backend_theme/static/src/layout/style/layout_colors.scss', |
|||
'jazzy_backend_theme/static/src/components/app_menu/menu_order.css', |
|||
'jazzy_backend_theme/static/src/layout/style/layout_style.scss', |
|||
'jazzy_backend_theme/static/src/layout/style/sidebar.scss', |
|||
'jazzy_backend_theme/static/src/components/app_menu/search_apps.js', |
|||
], |
|||
'web.assets_frontend': [ |
|||
'jazzy_backend_theme/static/src/layout/style/login.scss' |
|||
], |
|||
}, |
|||
'images': [ |
|||
'static/description/banner.jpg', |
|||
'static/description/theme_screenshot.jpg', |
|||
], |
|||
'license': 'LGPL-3', |
|||
'installable': True, |
|||
'auto_install': False, |
|||
'application': False, |
|||
} |
|||
@ -0,0 +1,9 @@ |
|||
## Module <jazzy_backend_theme> |
|||
|
|||
#### 01.01.2025 |
|||
|
|||
#### Version 18.0.1.0.0 |
|||
|
|||
##### ADD |
|||
|
|||
- Initial commit for Jazzy Backend Theme |
|||
@ -0,0 +1,23 @@ |
|||
# -*- coding: utf-8 -*- |
|||
############################################################################# |
|||
# |
|||
# Cybrosys Technologies Pvt. Ltd. |
|||
# |
|||
# Copyright (C) 2025-TODAY Cybrosys Technologies(<https://www.cybrosys.com>) |
|||
# Author: Cybrosys Techno Solutions(<https://www.cybrosys.com>) |
|||
# |
|||
# You can modify it under the terms of the GNU LESSER |
|||
# GENERAL PUBLIC LICENSE (LGPL v3), Version 3. |
|||
# |
|||
# This program is distributed in the hope that it will be useful, |
|||
# but WITHOUT ANY WARRANTY; without even the implied warranty of |
|||
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
|||
# GNU LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details. |
|||
# |
|||
# You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE |
|||
# (LGPL v3) along with this program. |
|||
# If not, see <http://www.gnu.org/licenses/>. |
|||
# |
|||
############################################################################# |
|||
from . import res_company |
|||
from . import res_config_settings |
|||
@ -0,0 +1,30 @@ |
|||
# -*- coding: utf-8 -*- |
|||
############################################################################# |
|||
# |
|||
# Cybrosys Technologies Pvt. Ltd. |
|||
# |
|||
# Copyright (C) 2025-TODAY Cybrosys Technologies(<https://www.cybrosys.com>) |
|||
# Author: Cybrosys Techno Solutions(<https://www.cybrosys.com>) |
|||
# |
|||
# You can modify it under the terms of the GNU LESSER |
|||
# GENERAL PUBLIC LICENSE (LGPL v3), Version 3. |
|||
# |
|||
# This program is distributed in the hope that it will be useful, |
|||
# but WITHOUT ANY WARRANTY; without even the implied warranty of |
|||
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
|||
# GNU LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details. |
|||
# |
|||
# You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE |
|||
# (LGPL v3) along with this program. |
|||
# If not, see <http://www.gnu.org/licenses/>. |
|||
# |
|||
############################################################################# |
|||
from odoo import models, fields |
|||
|
|||
|
|||
class ResCompany(models.Model): |
|||
"""Inherits the Res Company Model""" |
|||
_inherit = 'res.company' |
|||
|
|||
background_image = fields.Binary(string="Background Image", attachment=True, |
|||
help="Add Background image") |
|||
@ -0,0 +1,85 @@ |
|||
# -*- coding: utf-8 -*- |
|||
############################################################################# |
|||
# |
|||
# Cybrosys Technologies Pvt. Ltd. |
|||
# |
|||
# Copyright (C) 2025-TODAY Cybrosys Technologies(<https://www.cybrosys.com>) |
|||
# Author: Cybrosys Techno Solutions(<https://www.cybrosys.com>) |
|||
# |
|||
# You can modify it under the terms of the GNU LESSER |
|||
# GENERAL PUBLIC LICENSE (LGPL v3), Version 3. |
|||
# |
|||
# This program is distributed in the hope that it will be useful, |
|||
# but WITHOUT ANY WARRANTY; without even the implied warranty of |
|||
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
|||
# GNU LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details. |
|||
# |
|||
# You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE |
|||
# (LGPL v3) along with this program. |
|||
# If not, see <http://www.gnu.org/licenses/>. |
|||
# |
|||
############################################################################# |
|||
from odoo import models, fields |
|||
|
|||
|
|||
class ResConfigSettings(models.TransientModel): |
|||
"""Inherits the Configuration settings Model""" |
|||
_inherit = 'res.config.settings' |
|||
|
|||
theme_background = fields.Binary(string="App menu Background", |
|||
related='company_id.background_image', |
|||
readonly=False, |
|||
help="Add background image") |
|||
app_bar_color = fields.Char(string='Appbar color', |
|||
config_parameter='jazzy_backend_theme.' |
|||
'appbar_color', |
|||
default='#000000', |
|||
help="App bar color") |
|||
primary_accent = fields.Char(string="Navbar color", |
|||
config_parameter='jazzy_backend_theme.' |
|||
'primary_accent_color', |
|||
default='#004589', |
|||
help="Navbar color") |
|||
primary_hover = fields.Char(string="Hover Primary Color", |
|||
config_parameter='jazzy_backend_theme.' |
|||
'primary_hover', |
|||
default='#00376E', |
|||
help="Hover primary color") |
|||
appbar_text = fields.Char(string="Home Menu Text Color", |
|||
config_parameter='jazzy_backend_theme.' |
|||
'appbar_text', |
|||
default='#ffffff', |
|||
help="App bar text color") |
|||
secondary_hover = fields.Char(string="AppBar Hover", |
|||
config_parameter='jazzy_backend_theme.' |
|||
'secondary_hover', |
|||
default='#F2F2F3', |
|||
help="Appbar hover") |
|||
kanban_bg_color = fields.Char(string="Kanban Bg Color", |
|||
config_parameter='jazzy_backend_theme.' |
|||
'kanban_bg_color', |
|||
default='#F7F7F7', |
|||
help="Kanban view background color") |
|||
|
|||
def config_color_settings(self): |
|||
"""Define the configuration color settings""" |
|||
colors = { |
|||
'full_bg_img': self.env.user.company_id.background_image, |
|||
'appbar_color': self.env[ 'ir.config_parameter'].sudo().get_param( |
|||
'jazzy_backend_theme.appbar_color'), |
|||
'primary_accent': self.env['ir.config_parameter'].sudo().get_param( |
|||
'jazzy_backend_theme.primary_accent_color'), |
|||
'secondary_color': self.env['ir.config_parameter'].sudo().get_param( |
|||
'jazzy_backend_theme.secondary_color'), |
|||
'kanban_bg_color': self.env['ir.config_parameter'].sudo().get_param( |
|||
'jazzy_backend_theme.kanban_bg_color'), |
|||
'primary_hover': self.env['ir.config_parameter'].sudo().get_param( |
|||
'jazzy_backend_theme.primary_hover'), |
|||
'light_hover': self.env['ir.config_parameter'].sudo().get_param( |
|||
'jazzy_backend_theme.light_hover'), |
|||
'appbar_text': self.env['ir.config_parameter'].sudo().get_param( |
|||
'jazzy_backend_theme.appbar_text'), |
|||
'secondary_hover': self.env['ir.config_parameter'].sudo().get_param( |
|||
'jazzy_backend_theme.secondary_hover') |
|||
} |
|||
return colors |
|||
|
After Width: | Height: | Size: 260 KiB |
|
After Width: | Height: | Size: 7.5 KiB |
|
After Width: | Height: | Size: 257 KiB |
|
After Width: | Height: | Size: 48 KiB |
|
After Width: | Height: | Size: 700 KiB |
|
After Width: | Height: | Size: 137 KiB |
|
After Width: | Height: | Size: 131 KiB |
|
After Width: | Height: | Size: 909 KiB |
|
After Width: | Height: | Size: 42 KiB |
|
After Width: | Height: | Size: 76 KiB |
|
After Width: | Height: | Size: 78 KiB |
|
After Width: | Height: | Size: 120 KiB |
|
After Width: | Height: | Size: 39 KiB |
|
After Width: | Height: | Size: 122 KiB |
|
After Width: | Height: | Size: 88 KiB |
|
After Width: | Height: | Size: 176 KiB |
|
After Width: | Height: | Size: 383 KiB |
|
After Width: | Height: | Size: 528 KiB |
|
After Width: | Height: | Size: 126 KiB |
|
After Width: | Height: | Size: 100 KiB |
|
After Width: | Height: | Size: 126 KiB |
|
After Width: | Height: | Size: 559 KiB |
|
After Width: | Height: | Size: 167 KiB |
|
After Width: | Height: | Size: 121 KiB |
|
After Width: | Height: | Size: 160 KiB |
|
After Width: | Height: | Size: 462 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 150 KiB |
|
After Width: | Height: | Size: 1.2 MiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 178 KiB |
|
After Width: | Height: | Size: 140 KiB |
|
After Width: | Height: | Size: 114 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 132 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 57 KiB |
|
After Width: | Height: | Size: 90 KiB |
|
After Width: | Height: | Size: 124 KiB |
|
After Width: | Height: | Size: 339 KiB |
|
After Width: | Height: | Size: 276 KiB |
|
After Width: | Height: | Size: 123 KiB |
|
After Width: | Height: | Size: 267 KiB |
|
After Width: | Height: | Size: 386 KiB |
|
After Width: | Height: | Size: 95 KiB |
|
After Width: | Height: | Size: 896 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 929 B |
|
After Width: | Height: | Size: 23 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 236 KiB |
|
After Width: | Height: | Size: 151 KiB |
|
After Width: | Height: | Size: 103 KiB |
|
After Width: | Height: | Size: 198 KiB |
|
After Width: | Height: | Size: 331 KiB |
|
After Width: | Height: | Size: 258 KiB |
|
After Width: | Height: | Size: 368 KiB |
|
After Width: | Height: | Size: 189 KiB |
|
After Width: | Height: | Size: 510 KiB |
|
After Width: | Height: | Size: 152 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 885 B |
@ -0,0 +1,780 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en"> |
|||
|
|||
<head> |
|||
<meta charset="UTF-8" /> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
|||
<title>app index</title> |
|||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" /> |
|||
<link rel="preconnect" href="https://fonts.googleapis.com"> |
|||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
|||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" |
|||
rel="stylesheet"> |
|||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" /> |
|||
<style> |
|||
:root { |
|||
--primary-color: #F5C000; |
|||
--bg-white: #fff; |
|||
--text-color: #121212; |
|||
--text-color-light: #64728f; |
|||
} |
|||
|
|||
body { |
|||
font-family: "Montserrat", sans-serif; |
|||
} |
|||
</style> |
|||
</head> |
|||
|
|||
<body> |
|||
<!-- overview --> |
|||
<div class="container"> |
|||
|
|||
<!-- support-header --> |
|||
|
|||
<div class="supports my-5 py-3" style="border-bottom: 1px solid #e7e7e7;"> |
|||
<div class="row justify-content-between"> |
|||
<div class="col-4"> |
|||
<div class="my-3"> |
|||
<img src="//apps.odoocdn.com/apps/assets/17.0/theme_boec/images/Cybrosys.png?fcdde35" |
|||
style="width:auto !important; height:40px !important"> |
|||
</div> |
|||
</div> |
|||
<div class="col-6"> |
|||
<div class="row" style="margin-top:10px"> |
|||
|
|||
<div class="my-3 d-flex align-items-center justify-content-end"> |
|||
<span class="me-3"><b>Supports: </b></span> |
|||
<div class="text-center" |
|||
style="background-color:#017E84 !important; font-size:0.8rem !important; color:#fff !important; font-weight:500 !important; padding:4px !important; margin:0 3px !important; border-radius:50px !important; min-width:120px !important"> |
|||
Community |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="row" style="margin-top:10px"> |
|||
<div class="d-flex align-items-center justify-content-end"> |
|||
<span class="me-3"><b>Availability: </b></span> |
|||
<div class="text-center col" |
|||
style="border:1px solid #017E84; font-size:0.8rem !important; color:#017E84 !important; font-weight:500 !important; padding:4px !important; margin:0 3px !important; border-radius:20px !important; min-width:120px !important"> |
|||
<i class="fa fa-times" style="color:red"></i> Odoo Online |
|||
</div> |
|||
<div class="text-center col" |
|||
style="font-size:0.8rem !important; border:1px solid #714b67; color:#714b67 !important; font-weight:500 !important; padding:4px !important; margin:0 3px !important; border-radius:20px !important; min-width:120px !important"> |
|||
<i class="fa fa-times" style="color:red"></i> Odoo.sh |
|||
</div> |
|||
<div class="text-center col" |
|||
style="font-size:0.8rem !important; color:#5B899E !important; border:1px solid #5B899E; font-weight:500 !important; padding:4px !important; margin:0 3px !important; border-radius:20px !important; min-width:120px !important"> |
|||
<i class="fa fa-check" style="color:green"></i> On Premise |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- --> |
|||
|
|||
<!-- banner-section --> |
|||
<div class="my-5"> |
|||
<div class=""> |
|||
<img src="./banner.jpg" class="img-fluid" style="border-radius: 16px; width:1300px;"> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- --> |
|||
<!--feature section --> |
|||
|
|||
<div class="my-5" style="padding: 100px; background-color: #f1f5fd; border-radius: 16px;"> |
|||
<div class="container"> |
|||
<div class="row mb-60"> |
|||
<div class="col-lg-12 d-flex justify-content-center align-items-center flex-wrap gap-3"> |
|||
<div class="position-relative" ; style=" |
|||
text-align: center; |
|||
font-size: 46.875px; |
|||
font-style: normal; |
|||
padding-bottom: 40px; "> |
|||
<h2 style="font-weight: 600;">Our Features</h2> |
|||
|
|||
<p style="color: #999; |
|||
text-align: center; |
|||
font-size: 15.625px; |
|||
font-style: normal; |
|||
font-weight: 400; |
|||
line-height: 25.6px;">info includes 300+ elements that you may need to create website without |
|||
external plugins.</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="row g-4"> |
|||
<div class="col-lg-4 col-md-6" style="visibility: visible;"> |
|||
<div style="background-color: #fff;height: 100%; |
|||
border-radius: 12px; |
|||
padding: 35px 30px;"> |
|||
<div class="content"> |
|||
<img src="./img/feature-star.svg" class="img-responsive" height="46px" width="46px"> |
|||
<h4 class="mt-3"><a href="#" style=" color: #121212; |
|||
font-size: 18px; |
|||
text-decoration: none; |
|||
font-weight: 700; |
|||
line-height: 1.2;">Customising theme</a></h4> |
|||
|
|||
<p style=" font-size: 16px; |
|||
font-weight: 400; |
|||
line-height: 1.5; |
|||
color: #212529;"> Jazzy backend theme provides a fully configurable theme settings menu.</p> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
<div class="col-lg-4 col-md-6"> |
|||
<div style="background-color: #fff; height: 100%; |
|||
border-radius: 12px; |
|||
padding: 35px 30px;"> |
|||
<div class="content"> |
|||
<img src="./img/feature-star.svg" class="img-responsive" height="46px" width="46px"> |
|||
<h4 class="mt-3"><a href="#" style=" color: #121212; |
|||
font-size: 18px; |
|||
text-decoration: none; |
|||
font-weight: 700; |
|||
line-height: 1.2;">Smooth navigation</a></h4> |
|||
|
|||
<p style="font-size: 16px; |
|||
font-weight: 400; |
|||
line-height: 1.5; |
|||
color: #212529;"> Easily accessible sidebar where it reveals the sidebar menu on just a click.</p> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
<div class="col-lg-4 col-md-6"> |
|||
<div style="background-color: #fff; height: 100%; |
|||
border-radius: 12px; |
|||
padding: 35px 30px;"> |
|||
<div class="content"> |
|||
<img src="./img/feature-star.svg" class="img-responsive" height="46px" width="46px"> |
|||
<h4 class="mt-3"><a href="#" style=" color: #121212; |
|||
font-size: 18px; |
|||
text-decoration: none; |
|||
font-weight: 700; |
|||
line-height: 1.2;">Highly responsive</a></h4> |
|||
|
|||
<p style="font-size: 16px; |
|||
font-weight: 400; |
|||
line-height: 1.5; |
|||
color: #212529;"> Critical highlights of the Jazzy backend theme is that it was genuinely responsive.</p> |
|||
</div> |
|||
|
|||
</a> |
|||
</div> |
|||
</div> |
|||
<div class="col-lg-4 col-md-6"> |
|||
<div style="background-color: #fff;height: 100%; |
|||
border-radius: 12px; |
|||
padding: 35px 30px;"> |
|||
<div class="content"> |
|||
<img src="./img/feature-star.svg" class="img-responsive" height="46px" width="46px"> |
|||
<h4 class="mt-3"><a href="#" style=" color: #121212; |
|||
font-size: 18px; |
|||
text-decoration: none; |
|||
font-weight: 700; |
|||
line-height: 1.2;">Elegant kanban view</a></h4> |
|||
|
|||
<p style="font-size: 16px; |
|||
font-weight: 400; |
|||
line-height: 1.5; |
|||
color: #212529;"> Colorful & elegant kanban view.</p> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
<div class="col-lg-4 col-md-6"> |
|||
<div style="background-color: #fff;height: 100%; |
|||
border-radius: 12px; |
|||
padding: 35px 30px;"> |
|||
<div class="content"> |
|||
<img src="./img/feature-star.svg" class="img-responsive" height="46px" width="46px"> |
|||
<h4 class="mt-3"><a href="#" style=" color: #121212; |
|||
font-size: 18px; |
|||
text-decoration: none; |
|||
font-weight: 700; |
|||
line-height: 1.2;">Colourful form view</a></h4> |
|||
|
|||
<p style="font-size: 16px; |
|||
font-weight: 400; |
|||
line-height: 1.5; |
|||
color: #212529;"> Fully modified and colorful form view.</p> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
<div class="col-lg-4 col-md-6"> |
|||
<div style="background-color: #fff;height: 100%; |
|||
border-radius: 12px; |
|||
padding: 35px 30px;"> |
|||
<div class="content"> |
|||
<img src="./img/feature-star.svg" class="img-responsive" height="46px" width="46px"> |
|||
<h4 class="mt-3"><a href="#" style=" color: #121212; |
|||
font-size: 18px; |
|||
text-decoration: none; |
|||
font-weight: 700; |
|||
line-height: 1.2;">Elegants in view</a></h4> |
|||
|
|||
<p style="font-size: 16px; |
|||
font-weight: 400; |
|||
line-height: 1.5; |
|||
color: #212529;"> Elegant User Interface.</p> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- --> |
|||
<section class="container my-5"> |
|||
<div class="row"> |
|||
<div class="col-md-12"> |
|||
<ul role="tablist" class="nav nav-tabs justify-content-center d-flex justify-content-center" data-tabs="tabs" |
|||
style="border:none; background-color:unset; margin:0 auto"> |
|||
</ul> |
|||
</div> |
|||
<div class="col-md-12 tab-content ui-front" |
|||
style="border-radius:20px;border: 1px solid #D6E0FF; height:auto;padding: 20px;"> |
|||
|
|||
|
|||
|
|||
<div class="tab-pane active show fade" id="Features" role="tabpanel" aria-labelledby="features-1"> |
|||
<section class=""> |
|||
<section class="mt-5"> |
|||
<h2 class="pb-5" style="font-weight: 700; text-align: center;">Theme Features</h2> |
|||
<div class="row" style="margin-bottom: 24px;"> |
|||
<div class="col-md-6"> |
|||
<div style="border-radius: 10px; padding: 32px; |
|||
background-color: rgba(48, 48, 48, 1); |
|||
-webkit-backdrop-filter: blur(5px); |
|||
backdrop-filter: blur(5px); height: 100%;"> |
|||
<div class="info"> |
|||
<span class="label" style="font-size: 12px; |
|||
font-style: normal; |
|||
font-weight: 700; |
|||
line-height: 32px; |
|||
color: #f14848; |
|||
margin-bottom: 13px; |
|||
text-transform: uppercase;">HIGHLIGHT</span> |
|||
<h3 class="text-white" style=" color: #fff; |
|||
font-size: 24px; |
|||
font-weight: 500; |
|||
line-height: 32px; |
|||
margin-bottom: 9px;">App Bar</h3> |
|||
<p class="des" style="color: #c7c7c7; |
|||
font-size: 16px; |
|||
font-style: normal; |
|||
font-weight: 400; |
|||
line-height: 24px; |
|||
margin-bottom: 0;">Easily accessible sidebar where it reveals the sidebar |
|||
menu on just a click. Moreover, its also fully |
|||
customisable with Jazzy backend theme.</p> |
|||
|
|||
</div> |
|||
<div class="mt-5"> |
|||
<img src="./img/jazzy scrnsht/front.png" alt="Grid item" class="img-fluid" style="height:300px;"> |
|||
</div> |
|||
<a href="#" target="_blank" class="url_link" name="grid_popup" |
|||
aria-label="Url link label"><span></span></a> |
|||
</div> |
|||
</div> |
|||
<!-- --> |
|||
<div class="col-md-6"> |
|||
<div style="border-radius: 10px; padding: 32px; |
|||
background-color: rgba(48, 48, 48, 1); |
|||
-webkit-backdrop-filter: blur(5px); |
|||
backdrop-filter: blur(5px); height: 100%;"> |
|||
<div class="info"> |
|||
<span class="label" style="font-size: 12px; |
|||
font-style: normal; |
|||
font-weight: 700; |
|||
line-height: 32px; |
|||
color: #f14848; |
|||
margin-bottom: 13px; |
|||
text-transform: uppercase;">HIGHLIGHT</span> |
|||
<h3 class="text-white" style=" color: #fff; |
|||
font-size: 24px; |
|||
font-weight: 500; |
|||
line-height: 32px; |
|||
margin-bottom: 9px;">Kanban view</h3> |
|||
<p class="des" style="color: #c7c7c7; |
|||
font-size: 16px; |
|||
font-style: normal; |
|||
font-weight: 400; |
|||
line-height: 24px; |
|||
margin-bottom: 0;">Jazzy Backend Theme gives a colorful |
|||
& elegant kanban view, and it's fully |
|||
customizable with this theme.</p> |
|||
|
|||
</div> |
|||
<div class="mt-5"> |
|||
<img src="./img/jazzy scrnsht/kanban.png" alt="Grid item" class="img-fluid"> |
|||
</div> |
|||
<a href="#" target="_blank" class="url_link" name="grid_popup" |
|||
aria-label="Url link label"><span></span></a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!--row-2 --> |
|||
|
|||
<div class="row" style="margin-bottom: 24px;"> |
|||
<div class="col-md-6"> |
|||
<div style="border-radius: 10px; padding: 32px; |
|||
background-color: rgba(48, 48, 48, 1); |
|||
-webkit-backdrop-filter: blur(5px); |
|||
backdrop-filter: blur(5px); height: 100%;"> |
|||
<div class="info"> |
|||
<span class="label" style="font-size: 12px; |
|||
font-style: normal; |
|||
font-weight: 700; |
|||
line-height: 32px; |
|||
color: #f14848; |
|||
margin-bottom: 13px; |
|||
text-transform: uppercase;">HIGHLIGHT</span> |
|||
<h3 class="text-white" style=" color: #fff; |
|||
font-size: 24px; |
|||
font-weight: 500; |
|||
line-height: 32px; |
|||
margin-bottom: 9px;">Jazzy Backend Theme Settings</h3> |
|||
<p class="des" style="color: #c7c7c7; |
|||
font-size: 16px; |
|||
font-style: normal; |
|||
font-weight: 400; |
|||
line-height: 24px; |
|||
margin-bottom: 0;">To improve your experience with Odoo the Jazzy |
|||
backend theme provides a fully configurable |
|||
theme settings menu.</p> |
|||
|
|||
</div> |
|||
<div class="mt-5"> |
|||
<img src="./img/jazzy scrnsht/settings.png" alt="Grid item" class="img-fluid" style="height:300px;"> |
|||
</div> |
|||
<a href="#" target="_blank" class="url_link" name="grid_popup" |
|||
aria-label="Url link label"><span></span></a> |
|||
</div> |
|||
</div> |
|||
<!-- --> |
|||
<div class="col-md-6"> |
|||
<div style="border-radius: 10px; padding: 32px; |
|||
background-color: rgba(48, 48, 48, 1); |
|||
-webkit-backdrop-filter: blur(5px); |
|||
backdrop-filter: blur(5px); height: 100%;"> |
|||
<div class="info"> |
|||
<span class="label" style="font-size: 12px; |
|||
font-style: normal; |
|||
font-weight: 700; |
|||
line-height: 32px; |
|||
color: #f14848; |
|||
margin-bottom: 13px; |
|||
text-transform: uppercase;">HIGHLIGHT</span> |
|||
<h3 class="text-white" style=" color: #fff; |
|||
font-size: 24px; |
|||
font-weight: 500; |
|||
line-height: 32px; |
|||
margin-bottom: 9px;">Custom Form view</h3> |
|||
<p class="des" style="color: #c7c7c7; |
|||
font-size: 16px; |
|||
font-style: normal; |
|||
font-weight: 400; |
|||
line-height: 24px; |
|||
margin-bottom: 0;">Jazzy Backend theme provides a fully modified and |
|||
colorful form view with the full view experience.</p> |
|||
|
|||
</div> |
|||
<div class="mt-5"> |
|||
<img src="./img/jazzy scrnsht/form.png" alt="Grid item" class="img-fluid"> |
|||
</div> |
|||
<a href="#" target="_blank" class="url_link" name="grid_popup" |
|||
aria-label="Url link label"><span></span></a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- --> |
|||
|
|||
<!--row-3 --> |
|||
|
|||
<div class="row" style="margin-bottom: 24px;"> |
|||
<div class="col-md-6"> |
|||
<div style="border-radius: 10px; padding: 32px; |
|||
background-color: rgba(48, 48, 48, 1); |
|||
-webkit-backdrop-filter: blur(5px); |
|||
backdrop-filter: blur(5px); height: 100%;"> |
|||
<div class="info"> |
|||
<span class="label" style="font-size: 12px; |
|||
font-style: normal; |
|||
font-weight: 700; |
|||
line-height: 32px; |
|||
color: #f14848; |
|||
margin-bottom: 13px; |
|||
text-transform: uppercase;">HIGHLIGHT</span> |
|||
<h3 class="text-white" style=" color: #fff; |
|||
font-size: 24px; |
|||
font-weight: 500; |
|||
line-height: 32px; |
|||
margin-bottom: 9px;">Attractive Customizable User Interface</h3> |
|||
<p class="des" style="color: #c7c7c7; |
|||
font-size: 16px; |
|||
font-style: normal; |
|||
font-weight: 400; |
|||
line-height: 24px; |
|||
margin-bottom: 0;">It provides fully attractive, |
|||
and an elegant User Interface which is |
|||
completely customizable.</p> |
|||
|
|||
</div> |
|||
<div class="mt-5"> |
|||
<img src="./img/jazzy scrnsht/list.png" alt="Grid item" class="img-fluid" style="height:300px;"> |
|||
</div> |
|||
<a href="#" target="_blank" class="url_link" name="grid_popup" |
|||
aria-label="Url link label"><span></span></a> |
|||
</div> |
|||
</div> |
|||
<!-- --> |
|||
<div class="col-md-6"> |
|||
<div style="border-radius: 10px; padding: 32px; |
|||
background-color: rgba(48, 48, 48, 1); |
|||
-webkit-backdrop-filter: blur(5px); |
|||
backdrop-filter: blur(5px); height: 100%;"> |
|||
<div class="info"> |
|||
<span class="label" style="font-size: 12px; |
|||
font-style: normal; |
|||
font-weight: 700; |
|||
line-height: 32px; |
|||
color: #f14848; |
|||
margin-bottom: 13px; |
|||
text-transform: uppercase;">HIGHLIGHT</span> |
|||
<h3 class="text-white" style=" color: #fff; |
|||
font-size: 24px; |
|||
font-weight: 500; |
|||
line-height: 32px; |
|||
margin-bottom: 9px;">Advanced Searching for App Menus</h3> |
|||
<p class="des" style="color: #c7c7c7; |
|||
font-size: 16px; |
|||
font-style: normal; |
|||
font-weight: 400; |
|||
line-height: 24px; |
|||
margin-bottom: 0;">Jazzy Backend Theme gives a more complex and |
|||
powerful search than standard search, providing search |
|||
options like enterprise edition.</p> |
|||
|
|||
</div> |
|||
<div class="mt-5"> |
|||
<img src="./img/jazzy scrnsht/search.png" alt="Grid item" class="img-fluid"> |
|||
</div> |
|||
<a href="#" target="_blank" class="url_link" name="grid_popup" |
|||
aria-label="Url link label"><span></span></a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- --> |
|||
</section> |
|||
</section> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
|
|||
</section> |
|||
|
|||
<!--sections --> |
|||
|
|||
|
|||
|
|||
<!-- section content --> |
|||
|
|||
<section class="mb-5" |
|||
style="background-color: #f1f5fd; border: 1px solid #D6E0FF; border-radius: 20px; padding: 40px;"> |
|||
<div class="row d-flex align-items-center"> |
|||
<div class="col col-12 col-md-12 col-lg-6"> |
|||
<div style="padding: 20px;"> |
|||
<h4 class="" style="font-size: 46px;"> |
|||
<span style="color: #212121; |
|||
font-weight: 700; |
|||
display: inline-block; |
|||
width: 100%;">Truly </span><br> |
|||
<span style="color: #212121; |
|||
font-weight: 700; |
|||
display: inline-block; |
|||
width: 100%;">Responsive</span> |
|||
</h4> |
|||
|
|||
<div class="mt-4"> |
|||
<p style="color: #444; font-size: 16px; |
|||
font-weight: 400; |
|||
line-height: 1.5;">One of the critical highlights of |
|||
the Hue backend theme is that |
|||
it was genuinely responsive; moreover, it provides |
|||
an efficient interface to manage a mobile device.</p> |
|||
<ul class="d-flex flex-column gap-3 ms-0 ps-0 mt-4"> |
|||
<li style="list-style: none;" class="d-flex align-items-center gap-2"><img src="./img/check.svg" |
|||
style="width: 24px;"><span style=" color: #444; |
|||
font-size: 16px; |
|||
font-style: normal; |
|||
font-weight: 400; |
|||
line-height: 32px;">Appealing card hover style</span></li> |
|||
<li style="list-style: none;" class="d-flex align-items-center gap-2"><img src="./img/check.svg" |
|||
style="width: 24px;"><span style=" color: #444; |
|||
font-size: 16px; |
|||
font-style: normal; |
|||
font-weight: 400; |
|||
line-height: 32px;">Detailed product filtering</span></li> |
|||
<li style="list-style: none;" class="d-flex align-items-center gap-2"><img src="./img/check.svg" |
|||
style="width: 24px;"><span style=" color: #444; |
|||
font-size: 16px; |
|||
font-style: normal; |
|||
font-weight: 400; |
|||
line-height: 32px;">Modernized mini basket</span></li> |
|||
<li style="list-style: none;" class="d-flex align-items-center gap-2"><img src="./img/check.svg" |
|||
style="width: 24px;"><span style=" color: #444; |
|||
font-size: 16px; |
|||
font-style: normal; |
|||
font-weight: 400; |
|||
line-height: 32px;">Cutting-edge single product</span></li> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="col col-12 col-md-12 col-lg-6"> |
|||
<div> |
|||
<div> |
|||
<img class="img-fluid" src="./img/18/responsive.jpg" style=" |
|||
border-radius: 20px; |
|||
"> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
</section> |
|||
|
|||
<!-- 2 --> |
|||
|
|||
<section class="" |
|||
style="background-color: #f1f5fd; border: 1px solid #D6E0FF; border-radius: 20px; padding: 40px;"> |
|||
<div class="row d-flex align-items-center"> |
|||
<div class="col col-12 col-md-12 col-lg-6"> |
|||
<div> |
|||
<div> |
|||
<img class="img-fluid" src="./img/18/desktop.gif" style=" |
|||
border-radius: 20px; |
|||
"> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
<div class="col col-12 col-md-12 col-lg-6"> |
|||
<div style="padding: 20px;"> |
|||
<h4 class="" style="font-size: 46px;"> |
|||
<span style="color: #212121; |
|||
font-weight: 700; |
|||
display: inline-block; |
|||
width: 100%;">Stunning</span><br> |
|||
<span style="color: #212121; |
|||
font-weight: 700; |
|||
display: inline-block; |
|||
width: 100%;"> Pages</span> |
|||
</h4> |
|||
|
|||
<div class="mt-4"> |
|||
<p style="color: #444; font-size: 16px; |
|||
font-weight: 400; |
|||
line-height: 1.5;">Jazzy Backend Theme V18 is an Attractive Theme for Your |
|||
Odoo 18. This Theme Will Improve |
|||
Your Experience With Odoo. </p> |
|||
<ul class="d-flex flex-column gap-3 ms-0 ps-0 mt-4"> |
|||
<li style="list-style: none;" class="d-flex align-items-center gap-2"><img src="./img/check.svg" |
|||
style="width: 24px;"><span style=" color: #444; |
|||
font-size: 16px; |
|||
font-style: normal; |
|||
font-weight: 400; |
|||
line-height: 32px;">Visually Stunning Design</span></li> |
|||
<li style="list-style: none;" class="d-flex align-items-center gap-2"><img src="./img/check.svg" |
|||
style="width: 24px;"><span style=" color: #444; |
|||
font-size: 16px; |
|||
font-style: normal; |
|||
font-weight: 400; |
|||
line-height: 32px;">Customizable Layouts</span></li> |
|||
<li style="list-style: none;" class="d-flex align-items-center gap-2"><img src="./img/check.svg" |
|||
style="width: 24px;"><span style=" color: #444; |
|||
font-size: 16px; |
|||
font-style: normal; |
|||
font-weight: 400; |
|||
line-height: 32px;">User-Friendly Navigation</span></li> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</section> |
|||
|
|||
<!-- --> |
|||
|
|||
<!-- --> |
|||
|
|||
|
|||
|
|||
<div class="my-5"> |
|||
<!-- banner card --> |
|||
|
|||
|
|||
|
|||
<!-- service-section --> |
|||
|
|||
<section id="services" class="mt-5" style="border-radius: 16px; |
|||
border: 1px solid #EBEEF2; |
|||
background-color: #FFF; |
|||
padding: 60px 40px; |
|||
box-shadow: 0px 5px 20px -11px rgba(0, 0, 0, 0.25);"> |
|||
<div class="text-center mt-4"> |
|||
<h3 class="mb-0" style="color: #000; |
|||
text-align: center; |
|||
font-family: Montserrat; |
|||
font-size: 40px; |
|||
font-style: normal; |
|||
font-weight: 700; |
|||
line-height: normal; |
|||
text-transform: uppercase; |
|||
padding-bottom: 50px;">Our Services</h3> |
|||
</div> |
|||
<div class="row mt-3"> |
|||
<div class="col-lg-3 col-sm-12 mb-3"> |
|||
<a href="#" style="text-decoration:none"> |
|||
<div class="btn-lg btn-block p-4 mb-2 d-flex flex-column justify-content-center align-items-center" |
|||
style="font-size:25px; font-weight:bold;background-color:#FFE2E5; margin:auto; border-radius: 8px;"> |
|||
|
|||
<div class="d-flex justify-content-center align-items-center" |
|||
style="background-color:#FA5A7D; border-radius:50%; height:56px; width:56px"> |
|||
<img src="./img/gear.svg" class="img-responsive" height="28px" width="28px"> |
|||
</div> |
|||
<span class="mt-3" style="font-size: 18px; |
|||
color: #121212; |
|||
font-weight: 600;"> Odoo Customization</span> |
|||
</div> |
|||
</a> |
|||
</div> |
|||
<div class="col-lg-3 col-sm-12 mb-3"> |
|||
<a href="#" style="text-decoration:none"> |
|||
<div class="btn-lg btn-block p-4 mb-2 d-flex flex-column justify-content-center align-items-center" |
|||
style="font-size:25px; font-weight:bold;background-color:#FFF4DE; margin:auto; border-radius: 8px;"> |
|||
|
|||
<div class="d-flex justify-content-center align-items-center" |
|||
style="background-color:#FF947A; border-radius:50%; height:56px; width:56px"> |
|||
<img src="./img/wrench-icon.svg" class="img-responsive" height="28px" width="28px"> |
|||
</div> |
|||
<span class="mt-3" style="font-size: 18px; |
|||
color: #121212; |
|||
font-weight: 600;"> Odoo Implementation</span> |
|||
</div> |
|||
</a> |
|||
</div> |
|||
<div class="col-lg-3 col-sm-12 mb-3"> |
|||
<a href="#" style="text-decoration:none"> |
|||
<div class="btn-lg btn-block p-4 mb-2 d-flex flex-column justify-content-center align-items-center" |
|||
style="font-size:25px; font-weight:bold;background-color:#DCFCE7; margin:auto; border-radius: 8px;"> |
|||
|
|||
<div class="d-flex justify-content-center align-items-center" |
|||
style="background-color:#3CD856; border-radius:50%; height:56px; width:56px"> |
|||
<img src="./img/life-ring-icon.svg" class="img-responsive" height="28px" width="28px"> |
|||
</div> |
|||
<span class="mt-3" style="font-size: 18px; |
|||
color: #121212; |
|||
font-weight: 600;">Odoo Support</span> |
|||
</div> |
|||
</a> |
|||
</div> |
|||
<div class="col-lg-3 col-sm-12 mb-3"> |
|||
<a href="#" style="text-decoration:none"> |
|||
<div class="btn-lg btn-block p-4 mb-2 d-flex flex-column justify-content-center align-items-center" |
|||
style="font-size:25px; font-weight:bold;background-color:#F3E8FF; margin:auto; border-radius: 8px;"> |
|||
|
|||
<div class="d-flex justify-content-center align-items-center" |
|||
style="background-color:#BF83FF; border-radius:50%; height:56px; width:56px"> |
|||
<img src="./img/arrows-repeat.svg" class="img-responsive" height="28px" width="28px"> |
|||
</div> |
|||
<span class="mt-3" style="font-size: 18px; |
|||
color: #121212; |
|||
font-weight: 600;">Odoo Migration</span> |
|||
</div> |
|||
</a> |
|||
</div> |
|||
<div class="col-lg-3 col-sm-12 mb-3"> |
|||
<a href="#" style="text-decoration:none"> |
|||
<div class="btn-lg btn-block p-4 mb-2 d-flex flex-column justify-content-center align-items-center" |
|||
style="font-size:25px; font-weight:bold;background-color:#F1F9FF; margin:auto; border-radius: 8px;"> |
|||
|
|||
<div class="d-flex justify-content-center align-items-center" |
|||
style="background-color:#01649C; border-radius:50%; height:56px; width:56px"> |
|||
<img src="./img/puzzle-piece-icon.svg" class="img-responsive" height="28px" width="28px"> |
|||
</div> |
|||
<span class="mt-3" style="font-size: 18px; |
|||
color: #121212; |
|||
font-weight: 600;">Odoo integration</span> |
|||
</div> |
|||
</a> |
|||
</div> |
|||
<div class="col-lg-3 col-sm-12 mb-3"> |
|||
<a href="#" style="text-decoration:none"> |
|||
<div class="btn-lg btn-block p-4 mb-2 d-flex flex-column justify-content-center align-items-center" |
|||
style="font-size:25px; font-weight:bold;background-color:#EDF8ED; margin:auto; border-radius: 8px;"> |
|||
|
|||
<div class="d-flex justify-content-center align-items-center" |
|||
style="background-color:#69CC70; border-radius:50%; height:56px; width:56px"> |
|||
<img src="./img/odoo-consultancy.svg" class="img-responsive" height="28px" width="28px"> |
|||
</div> |
|||
<span class="mt-3" style="font-size: 18px; |
|||
color: #121212; |
|||
font-weight: 600;">Odoo Consultancy</span> |
|||
</div> |
|||
</a> |
|||
</div> |
|||
<div class="col-lg-3 col-sm-12 mb-3"> |
|||
<a href="#" style="text-decoration:none"> |
|||
<div class="btn-lg btn-block p-4 mb-2 d-flex flex-column justify-content-center align-items-center" |
|||
style="font-size:25px; font-weight:bold;background-color:#F1F6FF; margin:auto; border-radius: 8px;"> |
|||
|
|||
<div class="d-flex justify-content-center align-items-center" |
|||
style="background-color:#2E4556; border-radius:50%; height:56px; width:56px"> |
|||
<img src="./img/odoo-licencing.svg" class="img-responsive" height="28px" width="28px"> |
|||
</div> |
|||
<span class="mt-3" style="font-size: 18px; |
|||
color: #121212; |
|||
font-weight: 600;">Odoo Licensing</span> |
|||
</div> |
|||
</a> |
|||
</div> |
|||
<div class="col-lg-3 col-sm-12 mb-3"> |
|||
<a href="#" style="text-decoration:none"> |
|||
<div class="btn-lg btn-block p-4 mb-2 d-flex flex-column justify-content-center align-items-center" |
|||
style="font-size:25px; font-weight:bold;background-color:#FAF6EA; margin:auto; border-radius: 8px;"> |
|||
|
|||
<div class="d-flex justify-content-center align-items-center" |
|||
style="background-color:#FCD12C; border-radius:50%; height:56px; width:56px"> |
|||
<img src="./img/hire-odoo.svg" class="img-responsive" height="28px" width="28px"> |
|||
</div> |
|||
<span class="mt-3" style="font-size: 18px; |
|||
color: #121212; |
|||
font-weight: 600;">Hire Odoo Developer</span> |
|||
</div> |
|||
</a> |
|||
</div> |
|||
</div> |
|||
<!-- --> |
|||
</div> |
|||
</div> |
|||
</section> |
|||
<!-- --> |
|||
</div> |
|||
</div> |
|||
</body> |
|||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script> |
|||
|
|||
</html> |
|||
|
After Width: | Height: | Size: 609 KiB |
@ -0,0 +1,254 @@ |
|||
@keyframes fadeIn{ |
|||
0%{ |
|||
opacity: 0; |
|||
} |
|||
100%{ |
|||
opacity: 1; |
|||
} |
|||
} |
|||
o_setting_search { |
|||
position: relative; |
|||
} |
|||
.o_setting_search .searchInput { |
|||
height: 28px; |
|||
padding: 0px; |
|||
border: 0px; |
|||
box-shadow: none; |
|||
font-weight: 500; |
|||
} |
|||
.o_setting_search .searchIcon { |
|||
color: gray('700'); |
|||
} |
|||
.o_kanban_renderer{ |
|||
background-color: var(--kanban-bg-color); |
|||
} |
|||
.oe_kanban_global_click{ |
|||
border-radius: 15px; |
|||
} |
|||
.search-container.has-results .search-input { |
|||
height: 3em; |
|||
} |
|||
.search-container.has-results .search-results { |
|||
height: calc(100% - 3em); |
|||
overflow: auto; |
|||
margin-top: 10px; |
|||
} |
|||
|
|||
.o_setting_search.col-md-10{ |
|||
padding: 20px; |
|||
} |
|||
.app-menu { |
|||
width: 100%; |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
padding-left: calc((100vw - 850px) / 2); |
|||
padding-right: calc((100vw - 850px) / 2); |
|||
|
|||
} |
|||
.o-menu-search-result.dropdown-item.col-12.ml-auto.mr-auto { |
|||
background-repeat: no-repeat; |
|||
background-size: contain; |
|||
padding-left: 5.5rem; |
|||
} |
|||
.form-control { |
|||
padding: 0 !important; |
|||
} |
|||
@media (max-width: 1371px){ |
|||
|
|||
} |
|||
@media (max-width:992px) { |
|||
|
|||
} |
|||
@media (max-width:400px) { |
|||
|
|||
} |
|||
.o_main_navbar .o_menu_brand { |
|||
text-decoration: none !important; |
|||
margin-left: 10px; |
|||
} |
|||
.o_navbar .o_main_navbar .dropdown-toggle .dropdown-menu .search-container { |
|||
padding-left: calc((100vw - 850px) / 2); |
|||
padding-right: calc((100vw - 850px) / 2); |
|||
padding-top:20px; |
|||
padding-bottom:20px; |
|||
display: table; |
|||
} |
|||
.o_apps_menu_opened .o_main_navbar .o_menu_brand{ |
|||
display:none; |
|||
} |
|||
.app_components { |
|||
position: absolute; |
|||
height: 100vh; |
|||
width: 100%; |
|||
background: #f5f5f5f0; |
|||
z-index: 99; |
|||
top: 40px; |
|||
display:none; |
|||
background: url("../../src/img/background.jpg"), linear-gradient(to bottom, #71639e, #b0adba); |
|||
} |
|||
.app-menu a{ |
|||
flex-basis: 19%; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
flex-direction: column; |
|||
margin-bottom: 23px; |
|||
} |
|||
o_setting_search { |
|||
position: relative; |
|||
} |
|||
.o_setting_search .searchInput { |
|||
height: 28px; |
|||
padding: 0px; |
|||
border: 0px; |
|||
box-shadow: none; |
|||
font-weight: 500; |
|||
} |
|||
.o_setting_search .searchIcon { |
|||
color: gray('700'); |
|||
} |
|||
.search-container.has-results .search-input { |
|||
height: 3em; |
|||
display: table; |
|||
} |
|||
.search-container.has-results .search-results { |
|||
height: calc(100% - 3em); |
|||
overflow: auto; |
|||
margin-top: 10px; |
|||
} |
|||
|
|||
.o_setting_search.col-md-10{ |
|||
padding: 20px; |
|||
} |
|||
.app-menu { |
|||
width: 100%; |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
padding-left: calc((100vw - 850px) / 2); |
|||
padding-right: calc((100vw - 850px) / 2); |
|||
|
|||
} |
|||
|
|||
.o-menu-search-result.dropdown-item.col-12.ml-auto.mr-auto { |
|||
background-repeat: no-repeat; |
|||
background-size: contain; |
|||
padding-left: 3rem; |
|||
} |
|||
.form-control { |
|||
padding: 0 !important; |
|||
} |
|||
@media (max-width: 1371px){ |
|||
|
|||
} |
|||
@media (max-width:992px) { |
|||
|
|||
} |
|||
@media (max-width:400px) { |
|||
|
|||
} |
|||
.o_main_navbar .o_menu_brand { |
|||
text-decoration: none !important; |
|||
margin-left: 10px; |
|||
} |
|||
.o_navbar .o_main_navbar .dropdown-toggle .dropdown-menu .search-container { |
|||
padding-left: calc((100vw - 850px) / 2); |
|||
padding-right: calc((100vw - 850px) / 2); |
|||
padding-top:20px; |
|||
padding-bottom:20px; |
|||
} |
|||
.o_apps_menu_opened .o_main_navbar .o_menu_brand{ |
|||
display:none; |
|||
} |
|||
.app_components { |
|||
position: absolute; |
|||
height: 100vh; |
|||
width: 100%; |
|||
background: #f5f5f5f0; |
|||
z-index: 99; |
|||
top: 40px; |
|||
display:none; |
|||
background: url("../../img/background.jpg"), linear-gradient(to bottom, #71639e, #b0adba); |
|||
} |
|||
.app-menu a{ |
|||
flex-basis: 19%; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
flex-direction: column; |
|||
margin-bottom: 23px; |
|||
cursor:pointer; |
|||
} |
|||
.app_components .search-input{ |
|||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.1); |
|||
border-radius: 4px; |
|||
width:100%; |
|||
background-color: rgba(255, 255, 255, 0.1); |
|||
margin-bottom:1rem; |
|||
text-shadow: 0 1px 0 rgb(0 0 0 / 50%); |
|||
} |
|||
.o_navbar .o_main_navbar .o_main-menu-button:hover{ |
|||
background:rgba(0, 0, 0, 0.08); |
|||
cursor: pointer; |
|||
} |
|||
@media (max-width: 850px) { |
|||
.app_components .search-input { |
|||
width:90%; |
|||
margin:0 auto; |
|||
} |
|||
.app-menu { |
|||
width:90%; |
|||
margin:0 auto; |
|||
} |
|||
} |
|||
@media (max-width: 444px) { |
|||
.app-menu{ |
|||
width:80%; |
|||
} |
|||
.app-menu a{ |
|||
flex-basis: 25%; |
|||
} |
|||
} |
|||
/* Container styling */ |
|||
.search-results { |
|||
border-radius: 8px; |
|||
padding: 20px; |
|||
} |
|||
|
|||
/* Unordered list styling */ |
|||
.search-results ul { |
|||
list-style-type: none; /* Remove default bullets */ |
|||
padding: 0; /* Remove default padding */ |
|||
margin: 0; /* Remove default margin */ |
|||
} |
|||
|
|||
/* List item styling */ |
|||
.search-results li { |
|||
margin-bottom: 10px; /* Space between items */ |
|||
border-radius: 5px; /* Rounded corners */ |
|||
padding: 15px; /* Inner padding */ |
|||
cursor: pointer; /* Pointer cursor on hover */ |
|||
transition: background 0.3s ease; /* Smooth background transition */ |
|||
} |
|||
|
|||
/* Text styling for menu name */ |
|||
.search-results li span { |
|||
font-size: 16px; |
|||
color: var(--app-menu-font-color) !important; |
|||
} |
|||
.o_main_navbar .o_menu_brand, .o_main_navbar .o_navbar_apps_menu .dropdown-toggle, .o_main_navbar .o_nav_entry, .o_main_navbar .dropdown-toggle:not(.o-dropdown-toggle-custo), .o_main_navbar .o_menu_toggle { |
|||
color: var(--app-menu-font-color) !important; |
|||
} |
|||
.o_main_navbar .o_menu_brand, .o_main_navbar .o_navbar_breadcrumbs, .o_main_navbar .o_navbar_breadcrumbs .btn { |
|||
color: var(--app-menu-font-color) !important; |
|||
} |
|||
/* Hover effect for each list item */ |
|||
.search-results li:hover { |
|||
background-color: #007bff; /* Change background color on hover */ |
|||
color: #fff; /* Change text color on hover */ |
|||
border-color: #007bff; /* Change border color on hover */ |
|||
} |
|||
|
|||
/* Hover effect for the text inside the list item */ |
|||
.search-results li:hover span { |
|||
color: #fff; /* Change text color on hover */ |
|||
} |
|||
@ -0,0 +1,268 @@ |
|||
/** @odoo-module */ |
|||
import { NavBar } from "@web/webclient/navbar/navbar"; |
|||
import { registry } from "@web/core/registry"; |
|||
import { fuzzyLookup } from "@web/core/utils/search"; |
|||
import { computeAppsAndMenuItems } from "@web/webclient/menus/menu_helpers"; |
|||
import { useService } from "@web/core/utils/hooks"; |
|||
import { onMounted, useRef, useState} from "@odoo/owl"; |
|||
import { patch } from "@web/core/utils/patch"; |
|||
|
|||
patch(NavBar.prototype, { |
|||
// To modify the Navbar properties and functions.
|
|||
setup() { |
|||
super.setup() |
|||
this._search_def = this.createDeferred(); |
|||
this.search_container = useRef("search-container"); |
|||
this.search_input = useRef("search-input"); |
|||
this.search_result = useRef("search-results"); |
|||
this.app_menu = useRef("app-menu"); |
|||
this.sidebar_panel = useRef("sidebar_panel"); |
|||
this.app_components = useRef("app_components"); |
|||
this.state = useState({...this.state, menus: [], searchQuery: ""}) |
|||
let { apps, menuItems } = computeAppsAndMenuItems(this.menuService.getMenuAsTree("root")); |
|||
this._apps = apps; |
|||
this._searchableMenus = menuItems; |
|||
this.fetch_data() |
|||
onMounted(() => { |
|||
this.setClass() |
|||
}) |
|||
}, |
|||
createDeferred() { |
|||
let deferred = {}; |
|||
|
|||
deferred.promise = new Promise((resolve, reject) => { |
|||
deferred.resolve = resolve; |
|||
deferred.reject = reject; |
|||
}); |
|||
|
|||
return deferred; |
|||
}, |
|||
async fetch_data() { |
|||
// To fetch colors from database.
|
|||
this.orm = useService("orm") |
|||
var result = await this.orm.call("res.config.settings", "config_color_settings", [0]) |
|||
if (result.primary_accent !== false){ |
|||
document.documentElement.style.setProperty("--primary-accent",result.primary_accent) |
|||
} |
|||
if (result.appbar_color !== false){ |
|||
document.documentElement.style.setProperty("--app-bar-accent",result.appbar_color) |
|||
} |
|||
if (result.primary_hover !== false){ |
|||
document.documentElement.style.setProperty("--primary-hover",result.primary_hover) |
|||
} |
|||
if (result.full_bg_img !== false) { |
|||
var imageUrl = 'url(data:image/png;base64,' + result.full_bg_img + ')'; |
|||
var appComponentsDivs = document.getElementsByClassName('app_components'); |
|||
|
|||
for (var i = 0; i < appComponentsDivs.length; i++) { |
|||
appComponentsDivs[i].style.backgroundImage = imageUrl; |
|||
} |
|||
} |
|||
if (result.appbar_text !== false){ |
|||
document.documentElement.style.setProperty("--app-menu-font-color",result.appbar_text) |
|||
} |
|||
if (result.secondary_hover !== false){ |
|||
document.documentElement.style.setProperty("--secondary-hover",result.secondary_hover) |
|||
} |
|||
if (result.kanban_bg_color !== false) { |
|||
document.documentElement.style.setProperty("--kanban-bg-color", result.kanban_bg_color) |
|||
} |
|||
}, |
|||
setClass() { |
|||
// Set variable for html elements.
|
|||
this.$search_container = this.search_container; |
|||
this.$search_input = this.search_input; |
|||
this.$search_results = this.search_result; |
|||
this.$app_menu = this.app_menu; |
|||
}, |
|||
_searchMenusSchedule() { |
|||
this.$search_results.el.classList.remove("o_hidden"); |
|||
this.$app_menu.el.classList.add("o_hidden"); |
|||
this._search_def = this.createDeferred(); |
|||
this._searchMenus(); |
|||
}, |
|||
_searchMenus() { |
|||
// App menu search function
|
|||
var query = this.state.searchQuery; |
|||
if (query === "") { |
|||
this.$search_container.el.classList.remove("has-results"); |
|||
this.$search_results.el.classList.add("o_hidden") |
|||
this.$app_menu.el.classList.remove("o_hidden"); |
|||
return; |
|||
} |
|||
var results = []; |
|||
fuzzyLookup(query, this._apps, (menu) => menu.label) |
|||
.forEach((menu) => { |
|||
results.push({ |
|||
category: "apps", |
|||
name: menu.label, |
|||
actionID: menu.actionID, |
|||
id: menu.id, |
|||
webIconData: menu.webIconData, |
|||
}); |
|||
}); |
|||
fuzzyLookup(query, this._searchableMenus, (menu) => |
|||
(menu.parents + " / " + menu.label).split("/").reverse().join("/") |
|||
).forEach((menu) => { |
|||
results.push({ |
|||
category: "menu_items", |
|||
name: menu.parents + " / " + menu.label, |
|||
actionID: menu.actionID, |
|||
id: menu.id, |
|||
}); |
|||
}); |
|||
this.state.menus = results |
|||
}, |
|||
get menus() { |
|||
return this.state.menus |
|||
}, |
|||
handleClick(menu) { |
|||
this.app_components.el.nextSibling.style.display = "block"; |
|||
this.app_components.el.style.display = "none"; |
|||
|
|||
this.sidebar_panel.el.style.display = "block"; |
|||
this.app_menu.el.classList.remove('o_hidden'); |
|||
|
|||
let children = this.app_components.el.parentElement.children; |
|||
let oNavbar = null; |
|||
|
|||
for (let i = 0; i < children.length; i++) { |
|||
if (children[i].classList.contains('o_navbar')) { |
|||
oNavbar = children[i]; |
|||
break; |
|||
} |
|||
} |
|||
|
|||
let navChild = oNavbar.children[0].children; |
|||
for (let i = 0; i < navChild.length; i++) { |
|||
if (navChild[i].classList.contains('o_menu_brand')) { |
|||
navChild[i].classList.remove('d-none'); |
|||
navChild[i].classList.add('d-block'); |
|||
} |
|||
if (navChild[i].classList.contains('o_menu_sections')) { |
|||
navChild[i].classList.remove('d-none'); |
|||
navChild[i].classList.add('d-block'); |
|||
} |
|||
} |
|||
|
|||
if (menu) { |
|||
this.menuService.selectMenu(menu) |
|||
.then(() => { |
|||
// Trigger page refresh after the menu is loaded
|
|||
location.reload(); |
|||
}) |
|||
.catch(err => { |
|||
console.error('Menu navigation failed:', err); |
|||
}); |
|||
} |
|||
}, |
|||
OnClickMainMenu() { |
|||
// To show search screen
|
|||
if (this.app_components.el.style.display === "" || this.app_components.el.style.display === "none" ) { |
|||
let children = this.app_components.el.parentElement.children; |
|||
let oNavbar = null; |
|||
for (let i = 0; i < children.length; i++) { |
|||
if (children[i].classList.contains('o_navbar')) { |
|||
oNavbar = children[i]; |
|||
break; |
|||
} |
|||
} |
|||
let navChild = oNavbar.children[0].children |
|||
for (let i = 0; i < navChild.length; i++) { |
|||
if (navChild[i].classList.contains('o_menu_brand')) { |
|||
navChild[i].classList.add('d-none') |
|||
} |
|||
if (navChild[i].classList.contains('o_menu_sections')) { |
|||
navChild[i].classList.add('d-none') |
|||
} |
|||
} |
|||
this.app_components.el.style.transition = "opacity 0.25s" |
|||
this.app_components.el.style.opacity="1" |
|||
this.app_components.el.style.display = "block" |
|||
this.app_components.el.nextSibling.style.display = "none" |
|||
this.sidebar_panel.el.style.display = "none" |
|||
} else { |
|||
this.app_components.el.style.transition = "opacity 0.05s"; |
|||
this.app_components.el.style.opacity = "0"; |
|||
setTimeout(() => { |
|||
this.app_components.el.style.display = "none"; |
|||
}, 50); |
|||
this.app_components.el.nextSibling.style.display = "block" |
|||
this.sidebar_panel.el.style.display = "block" |
|||
let children = this.app_components.el.parentElement.children; |
|||
let oNavbar = null; |
|||
for (let i = 0; i < children.length; i++) { |
|||
if (children[i].classList.contains('o_navbar')) { |
|||
oNavbar = children[i]; |
|||
break; |
|||
} |
|||
} |
|||
let navChild = oNavbar.children[0].children |
|||
for (let i = 0; i < navChild.length; i++) { |
|||
if (navChild[i].classList.contains('o_menu_brand')) { |
|||
navChild[i].classList.remove('d-none') |
|||
} |
|||
if (navChild[i].classList.contains('o_menu_sections')) { |
|||
navChild[i].classList.remove('d-none') |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
onNavBarDropdownItemSelection(app) { |
|||
// To go to app menu
|
|||
this.app_components.el.style.display = "none"; |
|||
this.app_components.el.nextSibling.style.display = "block" |
|||
this.sidebar_panel.el.style.display = "block" |
|||
let children = this.app_components.el.parentElement.children; |
|||
let oNavbar = null; |
|||
for (let i = 0; i < children.length; i++) { |
|||
if (children[i].classList.contains('o_navbar')) { |
|||
oNavbar = children[i]; |
|||
break; |
|||
} |
|||
} |
|||
let navChild = oNavbar.children[0].children |
|||
for (let i = 0; i < navChild.length; i++) { |
|||
if (navChild[i].classList.contains('o_menu_brand')) { |
|||
navChild[i].classList.add('d-flex') |
|||
navChild[i].classList.remove('d-none') |
|||
} |
|||
if (navChild[i].classList.contains('o_menu_sections')) { |
|||
navChild[i].classList.add('d-flex') |
|||
navChild[i].classList.remove('d-none') |
|||
} |
|||
} |
|||
if (app) { |
|||
this.menuService.selectMenu(app); |
|||
|
|||
} |
|||
}, |
|||
refreshNavBar() { |
|||
// Find the navbar element
|
|||
let children = this.app_components.el.parentElement.children; |
|||
let oNavbar = null; |
|||
|
|||
// Locate the navbar component
|
|||
for (let i = 0; i < children.length; i++) { |
|||
if (children[i].classList.contains('o_navbar')) { |
|||
oNavbar = children[i]; |
|||
break; |
|||
} |
|||
} |
|||
|
|||
if (oNavbar) { |
|||
let navChild = oNavbar.children[0].children; |
|||
// Ensure the navbar sections are displayed correctly
|
|||
for (let i = 0; i < navChild.length; i++) { |
|||
if (navChild[i].classList.contains('o_menu_brand')) { |
|||
navChild[i].classList.remove('d-none'); |
|||
navChild[i].classList.add('d-block'); |
|||
} |
|||
if (navChild[i].classList.contains('o_menu_sections')) { |
|||
navChild[i].classList.remove('d-none'); |
|||
navChild[i].classList.add('d-block'); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
}) |
|||
@ -0,0 +1,120 @@ |
|||
<templates id="template" xml:space="preserve"> |
|||
<!-- Inherit the dropdown to select the apps, to add the function OnClickMainMenu--> |
|||
<t t-inherit="web.NavBar.AppsMenu" t-inherit-mode="extension" owl="1"> |
|||
<xpath expr="//Dropdown" |
|||
position="replace"> |
|||
<div class="d-flex justify-content-center align-items-center o_main-menu-button p-2" |
|||
t-on-click="OnClickMainMenu"> |
|||
<i class="oi oi-apps" |
|||
style="font-size: 18px !important; color: white; margin-top: 3px;"/> |
|||
</div> |
|||
</xpath> |
|||
</t> |
|||
<!-- Added the installed apps to show the Enterprise like app drawer --> |
|||
<t t-inherit-mode="extension" t-inherit="web.NavBar" owl="1"> |
|||
<xpath expr="//header" position="after"> |
|||
<div class="app_components" t-ref="app_components"> |
|||
<div class="search-container form-row align-items-center m-auto col-12" |
|||
t-ref="search-container" |
|||
style="padding-left: calc((100vw - 850px) / 2);padding-right: calc((100vw - 850px) / 2);padding-top:20px;padding-bottom:20px; display: table;"> |
|||
<div class="search-input col-md-10" |
|||
style="padding:0.8rem 1.2rem;width: max-content;margin-left: -30px;" |
|||
t-ref="search-input" |
|||
t-on-input="_searchMenusSchedule"> |
|||
<div class="input-group"> |
|||
<div class="input-group-prepend"> |
|||
<div class="input-group-text" |
|||
style="background:none;border:none;color:white;font-size:1.5rem;"> |
|||
<i class="fa fa-search"/> |
|||
</div> |
|||
</div> |
|||
<input type="search" |
|||
autocomplete="off" |
|||
placeholder="Search menus..." |
|||
class="form-control" |
|||
t-model="state.searchQuery" |
|||
style="background:none;border:none;color:white;"/> |
|||
</div> |
|||
</div> |
|||
<div class="search-results col-md-10 ml-auto mr-auto" |
|||
t-ref="search-results" |
|||
style="margin-top:20px;"> |
|||
<ul> |
|||
<t t-foreach="menus" t-as="menu" |
|||
t-key="menu_index"> |
|||
<li t-on-click="() => this.handleClick(menu)"> |
|||
<span t-esc="menu.name"/> |
|||
</li> |
|||
</t> |
|||
|
|||
</ul> |
|||
|
|||
</div> |
|||
</div> |
|||
<div class="app-menu" t-ref="app-menu"> |
|||
<t t-foreach="menuService.getApps()" t-as="app" |
|||
t-key="app_index"> |
|||
<a role="menuitem" |
|||
t-on-click="() => this.onNavBarDropdownItemSelection(app)" |
|||
t-att-class="{ o_dropdown_active: menuService.getCurrentApp() === app }"> |
|||
<img t-if="app.webIcon.includes('.png')" |
|||
t-att-title="app.name" |
|||
style="width: 70px !important;height: 70px !important;margin: 5px 5px 5px 5px;" |
|||
t-attf-src="{{app.webIconData}}"/> |
|||
<img t-if="app.webIcon.includes('.svg')" |
|||
t-att-title="app.name" |
|||
style="width: 70px !important;height: 70px !important;margin: 5px 5px 5px 5px;" |
|||
t-attf-src="{{app.webIconData}}"/> |
|||
<b class="a_app_menu_title" |
|||
style="color:white;text-shadow: 1px 1px 1px rgb(0 0 0 / 40%);"><t t-esc="app.name"/></b> |
|||
</a> |
|||
</t> |
|||
</div> |
|||
</div> |
|||
</xpath> |
|||
</t> |
|||
<!-- To show the search results when the user search app from the app drawer --> |
|||
<t t-name="jazzy_backend_theme.SearchResults"> |
|||
<t t-foreach="results" t-as="result"> |
|||
<a t-attf-class="o-menu-search-result dropdown-item col-12 ml-auto mr-auto #{result_first ? 'active' : ''}" |
|||
t-attf-style="background-image:url('data:image/png;base64,#{result.webIconData}')" |
|||
t-att-data-menu-id="result.id" |
|||
t-att-data-action-id="result.actionID" |
|||
t-raw="result.name" |
|||
style="color:white;" |
|||
t-on-click="handleClickMenu" |
|||
/> |
|||
</t> |
|||
</t> |
|||
<!-- To show the sidebar to select the apps from the sidebar --> |
|||
<t t-inherit="web.NavBar" t-inherit-mode="extension" owl="1"> |
|||
<xpath expr="//nav[hasclass('o_main_navbar')]" position="after"> |
|||
<div class="sidebar_panel" id="sidebar_panel" t-ref="sidebar_panel"> |
|||
<div class="sidebar"> |
|||
<ul class="sidebar_menu"> |
|||
<t t-foreach="menuService.getApps()" t-as="app" |
|||
t-key="app_index"> |
|||
<li> |
|||
<a role="menuitem" |
|||
t-attf-href="#menu_id={{app.id}}" |
|||
class="dropdown-item o_app mt0" |
|||
t-on-click="() => this.onNavBarDropdownItemSelection(app)" |
|||
t-att-data-menu-xmlid="app.xmlid" |
|||
t-att-data-action-id="app.actionID"> |
|||
<img t-if="app.webIcon.includes('.png')" |
|||
t-att-title="app.name" |
|||
style="width: 25px !important;height: 25px !important;border-radius: 5px !important;padding:0 !important;" |
|||
t-attf-src="{{app.webIconData}}"/> |
|||
<img t-if="app.webIcon.includes('.svg')" |
|||
t-att-title="app.name" |
|||
style="width: 25px !important;height: 25px !important;border-radius: 5px !important;padding:0 !important;" |
|||
t-attf-src="{{app.webIconData}}"/> |
|||
</a> |
|||
</li> |
|||
</t> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
</xpath> |
|||
</t> |
|||
</templates> |
|||
|
After Width: | Height: | Size: 77 KiB |
@ -0,0 +1,14 @@ |
|||
:root{ |
|||
--primary_accent: black !default; |
|||
--secondary_accent: #ffffff !default; |
|||
--inverse_accent: #ffffff !default; |
|||
--kanban-bg-color:#f7f7f7; |
|||
--o-kanban-color-border-width: 8px; |
|||
--selected_row: #ffffff !default; |
|||
--bg_white: #ffffff !default; |
|||
--f_color: #555b6d !default; |
|||
--color_white : #ffffff !default; |
|||
--primary_hover: #00376e !default; |
|||
--light_hover: #d5d5d5; |
|||
--fullscreen-bg-color: #C5F0FC !important; |
|||
} |
|||
@ -0,0 +1,30 @@ |
|||
$primary_accent: var(--primary-accent) !important; |
|||
$secondary_accent: var(--secondary-accent) !important; |
|||
$inverse_accent: var(--inverse-accent) !important; |
|||
$kanban-bg-color:var(--kanban-bg-color) !important; |
|||
$o-kanban-color-border-width: var(--o-kanban-color-border-width) !important; |
|||
$selected_row: var(--selected-row) !important; |
|||
$bg_white: var(--bg-white) !important; |
|||
$f_color: var(--f-color) !important; |
|||
$color_white : var(--color-white) !important; |
|||
$primary_hover: var(--primary-hover) !important; |
|||
$light_hover: var(--light-hover) !important; |
|||
$fullscreen-bg-color: var(--fullscreen-bg-color) !important; |
|||
|
|||
:root{ |
|||
--primary-accent: #004589 ; |
|||
--primary-accent-border: #ffffff; |
|||
--app-bar-accent: #ffffff; |
|||
--full-screen-bg: url(/jazzy_backend_theme/static/src/img/background.jpg) ; |
|||
--kanban-bg-color:#f7f7f7; |
|||
--o-kanban-color-border-width: 8px !important; |
|||
--selected-row: #ffffff !important; |
|||
--app-menu-font-color:#ffffff; |
|||
--bg-white: #ffffff !important; |
|||
--f-color: #555b6d !important; |
|||
--color-white : #ffffff !important; |
|||
--primary-hover: #00376e; |
|||
--light-hover: #d5d5d5 ; |
|||
--secondary-hover:#ffffff; |
|||
--fullscreen-bg-color: #C5F0FC !important; |
|||
} |
|||
@ -0,0 +1,506 @@ |
|||
.bg-primary{ |
|||
background-color: var(--primary-accent) !important; |
|||
} |
|||
.o_field_widget.o_field_many2one .o_external_button { |
|||
-webkit-box-flex: 0; |
|||
-webkit-flex: 0 0 auto; |
|||
flex: 0 0 auto; |
|||
padding-left:1%; |
|||
padding-right:0.5%; |
|||
margin-left: 2px; |
|||
font-size: 19px; |
|||
color: #7C7BAD; |
|||
border: none; |
|||
} |
|||
.app_bar .app_container a:hover{ |
|||
background:var(--secondary-hover) !important; |
|||
} |
|||
.fullscreen-menu{ |
|||
height: calc(100vh - 46px); |
|||
background: var(--full-screen-bg); |
|||
background-size: cover; |
|||
background-repeat: no-repeat; |
|||
min-width: 100%; |
|||
overflow-y: auto !important; |
|||
overflow-x: hidden !important; |
|||
margin-top: 0; |
|||
position: fixed; |
|||
top: 46px; |
|||
left: -1px; |
|||
padding: 2.5rem 0; |
|||
} |
|||
.a_app_menu_title{ |
|||
color: var(--app-menu-font-color) !important; |
|||
} |
|||
.o_main_navbar{ |
|||
background-color:var(--primary-accent) !important; |
|||
border-bottom: 1px solid var(--primary-hover) !important; |
|||
} |
|||
.dropdown-toggle { |
|||
&:hover{ |
|||
background: var(--primary-hover) !important; |
|||
} |
|||
} |
|||
.o-menu-search-result.dropdown-item.col-12.ml-auto.mr-auto { |
|||
|
|||
background-repeat: no-repeat; |
|||
background-size: 23px; |
|||
padding-left: 40px; |
|||
margin-bottom: 5px; |
|||
|
|||
} |
|||
//Top bar |
|||
|
|||
//Icon color |
|||
.o_searchview .o_searchview_facet .o_searchview_facet_label { |
|||
background-color: var(--primary-accent) !important; |
|||
} |
|||
.btn-secondary { |
|||
color: #fff !important; |
|||
background-color: var(--primary-accent) !important; |
|||
border-color: var(--primary-accent) !important; |
|||
margin:0 5px 0 0; |
|||
&:hover{ |
|||
background-color: var(--primary-hover) !important; |
|||
} |
|||
} |
|||
.btn-outline-primary { |
|||
border-color: var(--primary-hover); |
|||
color: var(--primary-hover); |
|||
} |
|||
.btn-outline-primary:hover { |
|||
color: #fff; |
|||
background-color: var(--primary-hover); |
|||
border-color: var(--primary-hover); |
|||
} |
|||
.o_searchview { |
|||
background-color: var(--bg-white) !important; |
|||
border: 1px solid #ccc; |
|||
border-radius: 10px; |
|||
padding: 1px 25px 3px 5px; |
|||
} |
|||
.o_searchview .o_searchview_input_container { |
|||
display: flex; |
|||
flex-flow: row wrap; |
|||
position: relative; |
|||
border-radius: 10px; |
|||
} |
|||
.o_searchview .o_searchview_input_container .o_searchview_facet { |
|||
display: flex; |
|||
-webkit-box-flex: 0; |
|||
flex: 0 0 auto; |
|||
margin: 1px 3px 0 0; |
|||
max-width: 100%; |
|||
border-radius: 10px; |
|||
position: relative; |
|||
} |
|||
.o_searchview .o_searchview_facet .o_facet_values{ |
|||
border-radius: 10px !important; |
|||
background-color: #e2e2e0 !important; |
|||
} |
|||
.o_searchview .o_searchview_input_container .o_searchview_facet .o_searchview_facet_label { |
|||
align-items: center; |
|||
color: var(--bg-white) !important; |
|||
-webkit-box-flex: 0; |
|||
flex: 0 0 auto; |
|||
padding: 0 3px; |
|||
border-radius: 10px; |
|||
display: flex; |
|||
max-width: 100%; |
|||
white-space: nowrap; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
vertical-align: top; |
|||
} |
|||
// Module icon |
|||
.oe_module_icon { |
|||
width: 70px; |
|||
max-height: 70px; |
|||
max-width: 23%; |
|||
float: left; |
|||
border-radius: 10px; |
|||
} |
|||
.o_base_settings .o_setting_container .settings_tab .selected{ |
|||
background-color: var(--primary-hover); |
|||
} |
|||
.app_bar .app_container .scroll_container .app_items_wrapper .app_items{ |
|||
background-color:var(--app-bar-accent); |
|||
} |
|||
.app_bar .app_container .scroll_container .app_items_wrapper .app_items .o-app-icon { |
|||
width: 32px; |
|||
height: 32px; |
|||
border-radius: 5px; |
|||
} |
|||
// Photo |
|||
.o_kanban_view .o_kanban_record.o_kanban_record_has_image_fill .o_kanban_image_fill_left { |
|||
margin-top: -8px; |
|||
margin-bottom: -8px; |
|||
margin-left: -8px; |
|||
border-radius: 10px; |
|||
} |
|||
// Drowpdowm |
|||
.o-dropdown.dropup > .o-dropdown--menu, .o-dropdown.dropdown > .o-dropdown--menu, .o-dropdown.dropleft > .o-dropdown--menu, .o-dropdown.dropright > .o-dropdown--menu { |
|||
left: auto; |
|||
right: auto; |
|||
margin-left: 0; |
|||
margin-right: 0; |
|||
border-radius: 10px; |
|||
} |
|||
// Kanban |
|||
.o_kanban_view.o_kanban_grouped .o_kanban_record, .o_kanban_view.o_kanban_grouped .o_kanban_quick_create { |
|||
width: 100%; |
|||
margin-left: 0; |
|||
margin-right: 0; |
|||
border-radius: 10px; |
|||
} |
|||
.o_form_view .oe_button_box .btn.oe_stat_button { |
|||
color: var(--primary-accent) !important; |
|||
height: 44px; |
|||
padding: 0 6px 0 0 !important; |
|||
text-align: left; |
|||
white-space: nowrap; |
|||
background-color: transparent; |
|||
opacity: 0.8; |
|||
border-radius: 0px; |
|||
margin-bottom: 0; |
|||
} |
|||
.o_dashboards .o_website_dashboard div.o_box { |
|||
color: rgba(73, 80, 87, 0.76); |
|||
background-color: white; |
|||
background-size: cover; |
|||
margin-top: 16px; |
|||
position: static; |
|||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3); |
|||
border-radius: 10px; |
|||
} |
|||
// Button |
|||
.custom-control-input:checked ~ .custom-control-label::before { |
|||
color: #fff; |
|||
border-color: var(--primary-accent) !important; |
|||
background-color: var(--primary-accent) !important; |
|||
} |
|||
// Current date calender |
|||
.o_calendar_view .o_calendar_widget .fc-timeGridDay-view .fc-widget-header.fc-today, .o_calendar_view .o_calendar_widget .fc-timeGridWeek-view .fc-widget-header.fc-today { |
|||
border-radius: 25px; |
|||
background: var(--primary-accent) !important; |
|||
color: var(--bg-white) !important; |
|||
} |
|||
// Tabs Start |
|||
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { |
|||
border: none; |
|||
border-bottom: solid; |
|||
font-weight: bold; |
|||
background: var(--primary-accent) !important; |
|||
color: var(--bg-white) !important; |
|||
border-radius: 5px,50px,5px,50px; |
|||
} |
|||
// Website |
|||
.o_dashboards .o_website_dashboard .o_dashboard_common .o_inner_box { |
|||
padding-top: 10px; |
|||
text-align: center; |
|||
border: 1px solid var(--bg-white) !important; |
|||
height: 80px; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
cursor: pointer; |
|||
color: var(--color-white) !important; |
|||
background-color: var(--primary-accent) !important; |
|||
border-radius:10px; |
|||
&:hover{ |
|||
background-color: var(--primary-hover) !important; |
|||
} |
|||
} |
|||
.o_purchase_dashboard .table > thead > tr > td.o_main, .o_purchase_dashboard .table tbody > tr > td.o_main { |
|||
background-color: var(--primary-accent) !important; |
|||
border-radius:10px; |
|||
} |
|||
.dropdown-menu.show { |
|||
display: block; |
|||
border-radius: 0; |
|||
} |
|||
.o_mail_preview .o_mail_preview_image.o_mail_preview_app > img { |
|||
border-radius: 10px; |
|||
} |
|||
// Graph |
|||
.o_calendar_view .fc-view .fc-event.o_calendar_color_3:not(.o_calendar_hatched):not(.o_calendar_striked) { |
|||
background: var(--primary-hover) !important; |
|||
border-radius: 10px; |
|||
} |
|||
//Event |
|||
.text-center { |
|||
text-align: center !important; |
|||
border-radius: 10px; |
|||
} |
|||
// Form control icons |
|||
.o_form_view .oe_button_box .oe_stat_button .o_button_icon { |
|||
color: var(--primary-accent) !important; |
|||
} |
|||
// Small icons |
|||
.o_search_panel .o_search_panel_category .o_search_panel_section_icon { |
|||
color: var(--primary-accent) !important; |
|||
} |
|||
.badge-primary { |
|||
color: var(--color-white) !important; |
|||
background-color: var(--primary-accent) !important; |
|||
} |
|||
// Wizard |
|||
.modal.o_technical_modal .modal-content { |
|||
border-radius: 10px; |
|||
} |
|||
// Navbar |
|||
.nav-container{ |
|||
height: auto !important; |
|||
background: transparent !important; |
|||
float: none !important; |
|||
padding: 0 !important; |
|||
width: 850px !important; |
|||
margin: 0 auto !important; |
|||
} |
|||
.o_nav_entry{ |
|||
&:hover{ |
|||
background-color: var(--primary-hover) !important; |
|||
} |
|||
} |
|||
.app-menu{ |
|||
width: 100%; |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
justify-content: flex-start; |
|||
margin: 0 auto; |
|||
margin-right: 70px; |
|||
|
|||
} |
|||
//Responsive |
|||
.o_MobileMessagingNavbar_tab.o-active{ |
|||
color: var(--primary-accent) !important; |
|||
} |
|||
@media (max-width: 768px){ |
|||
.app-menu{ |
|||
width: 100%; |
|||
display: grid; |
|||
grid-template-columns: 1fr 1fr 1fr; |
|||
justify-content: flex-start; |
|||
margin: 0 auto; |
|||
} |
|||
.o_cp_bottom{ |
|||
flex-wrap: wrap !important; |
|||
} |
|||
.o_form_view .o_form_statusbar > .o_statusbar_status > .o_arrow_button.disabled { |
|||
|
|||
margin-right: 10px; |
|||
} |
|||
.o_form_view .o_form_statusbar > .o_statusbar_status > .o_arrow_button.disabled:not(.btn-primary), .o_form_view .o_form_statusbar > .o_statusbar_status > .o_arrow_button.disabled:not(.btn-primary):hover, .o_form_view .o_form_statusbar > .o_statusbar_status > .o_arrow_button.disabled:not(.btn-primary):focus |
|||
{ |
|||
margin-left:10px; |
|||
} |
|||
.o_form_view .o_form_statusbar > .o_field_widget { |
|||
margin-left: -24px !important; |
|||
margin-top: 1px !important; |
|||
} |
|||
.o_form_view .o_form_statusbar{ |
|||
flex-direction: column !important; |
|||
padding-left: 0px !important; |
|||
} |
|||
} |
|||
@media (min-width: 768px){ |
|||
.o_form_view .o_form_sheet_bg > .o_form_sheet { |
|||
border-radius: 10px; |
|||
} |
|||
.search-container{ |
|||
width: 750px; |
|||
margin: 0 auto; |
|||
} |
|||
} |
|||
@media (max-width:767px){ |
|||
.o_form_view .o_group{ |
|||
width:100% !important; |
|||
} |
|||
.dropdown-menu.show { |
|||
display: block; |
|||
border-radius:0; |
|||
} |
|||
.o_control_panel .breadcrumb > li { |
|||
display: inline-block; |
|||
max-width: 100%; |
|||
white-space: nowrap; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
vertical-align: top; |
|||
} |
|||
.o_control_panel .o_cp_top_right { |
|||
min-height: 30px; |
|||
max-width: 100%; |
|||
margin-left: 10%; |
|||
} |
|||
.o_form_view .o_form_sheet_bg > .o_form_sheet { |
|||
min-width: 100%; |
|||
max-width: 100%; |
|||
min-height: 100%; |
|||
border: 1px solid #c8c8d3; |
|||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); |
|||
background: white; |
|||
margin: 4.8px auto; |
|||
padding: 24px; |
|||
padding-right: 16px; |
|||
padding-left: 16px; |
|||
} |
|||
.oe_topbar_name{ |
|||
display:none; |
|||
} |
|||
.nav-container { |
|||
position: relative; |
|||
width: 100vw !important; |
|||
display: flex; |
|||
align-items: start; |
|||
margin-top: 2rem; |
|||
} |
|||
.o_cp_top{ |
|||
flex-wrap: wrap !important; |
|||
} |
|||
.o_cp_top_left, .o_cp_searchview{ |
|||
width: 100%; |
|||
} |
|||
.o_cp_top_right{ |
|||
width: 100%; |
|||
margin: 1.5rem auto; |
|||
margin-left: 0 !important; |
|||
} |
|||
//Search Panel |
|||
.o_content o_controller_with_searchpanel, .o_controller_with_searchpanel{ |
|||
display:flex !important; |
|||
flex-direction: column !important; |
|||
} |
|||
.o_search_panel{ |
|||
display: flex; |
|||
overflow-x: auto; |
|||
overflow-y: auto; |
|||
height: 200px; |
|||
width: 100%; |
|||
section{ |
|||
margin-right: 1rem; |
|||
} |
|||
} |
|||
.o_search_panel section { |
|||
width: 100% !important; |
|||
} |
|||
.o_setting_container{ |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
.settings_tab{ |
|||
display: flex; |
|||
flex-direction: row !important; |
|||
overflow-x: auto; |
|||
height: 40px; |
|||
} |
|||
.settings{ |
|||
margin-top: 1.5rem; |
|||
} |
|||
} |
|||
@media (max-width:524px){ |
|||
.o_control_panel .o_cp_bottom_right > .o_cp_pager |
|||
{ |
|||
margin-top:5px; |
|||
} |
|||
div.app-menu *::before{ |
|||
box-sizing:none; |
|||
} |
|||
div.app-menu *::after{ |
|||
box-sizing:none; |
|||
} |
|||
} |
|||
@media (max-width:493px){ |
|||
.o_control_panel .o_cp_bottom_left > .o_cp_action_menus { |
|||
margin-left: 0px; |
|||
padding-right: 10px; |
|||
} |
|||
} |
|||
// V17 Fixes |
|||
@media (min-width:1096px){ |
|||
.app_components .search-input { |
|||
width:725px !important; |
|||
} |
|||
} |
|||
@media (max-width:768px){ |
|||
.app_components .search-input { |
|||
margin-left: 60px !important; |
|||
} |
|||
.search-container.has-results .search-results { |
|||
margin-left: 60px !important; |
|||
} |
|||
.o_field_statusbar > .o_statusbar_status { |
|||
width: 314px !important; |
|||
} |
|||
.o_form_view .o_cp_buttons { |
|||
overflow: auto !important; |
|||
} |
|||
} |
|||
.o_main_navbar .o_menu_sections .o_nav_entry, .o_main_navbar .o_menu_sections .dropdown-toggle { |
|||
background: var(--primary-accent) !important; |
|||
} |
|||
.btn-primary { |
|||
background: var(--primary-accent) !important; |
|||
color: white !important; |
|||
} |
|||
.btn-primary:hover { |
|||
background: var(--primary-hover) !important; |
|||
} |
|||
.o_statusbar_status .o_arrow_button.btn-secondary { |
|||
margin: 0px !important; |
|||
color: var(--primary-accent) !important; |
|||
background-color: white !important; |
|||
} |
|||
.o_statusbar_status .o_arrow_button.btn-secondary.o_arrow_button_current { |
|||
color: white !important; |
|||
background-color: var(--primary-accent) !important; |
|||
font-family: inherit !important; |
|||
} |
|||
.o_statusbar_status .o_arrow_button.btn-secondary::after { |
|||
border-left-color: white !important; |
|||
} |
|||
.o_statusbar_status .o_arrow_button.btn-secondary.o_arrow_button_current::after { |
|||
border-left-color: var(--primary-accent) !important; |
|||
} |
|||
.o_statusbar_status .o_arrow_button.btn-secondary::before { |
|||
border-left-color: var(--primary-accent) !important; |
|||
} |
|||
.search-results a{ |
|||
color: white !important; |
|||
cursor: pointer !important; |
|||
} |
|||
.app_components { |
|||
background-repeat: no-repeat !important; |
|||
background-size: cover !important; |
|||
} |
|||
.nav-link, o_form_view .o_form_uri, .o_form_view .o_form_uri > span:first-child { |
|||
color: var(--primary-accent) !important; |
|||
} |
|||
|
|||
.form-check-input:checked { |
|||
background-color: var(--primary-accent) !important; |
|||
border-color: var(--primary-accent) !important; |
|||
} |
|||
a, .btn { |
|||
color: var(--primary-accent); |
|||
|
|||
} |
|||
.btn:hover { |
|||
color: var(--primary-hover); |
|||
background-color: var(--primary-accent); |
|||
} |
|||
.text-bg-primary { |
|||
background-color: var(--primary-accent) !important; |
|||
} |
|||
.btn-info { |
|||
color: white !important; |
|||
} |
|||
.dropdown-toggle:hover { |
|||
color: white !important; |
|||
} |
|||
.o_searchview_icon { |
|||
margin-left: 8px; |
|||
} |
|||
.text-action { |
|||
color: var(--primary-accent) !important; |
|||
} |
|||
@ -0,0 +1,156 @@ |
|||
#wrapwrap > main { |
|||
background: #f8f8fb; |
|||
} |
|||
.navbar { |
|||
background: #fff !important; |
|||
} |
|||
|
|||
body { |
|||
font-family: 'Poppins', sans-serif !important; |
|||
} |
|||
body.bg-100 { |
|||
background-color: #000000 !important; |
|||
} |
|||
.card.o_database_list { |
|||
align-items: center; |
|||
max-width: 450px !important |
|||
} |
|||
.card.o_database_list .card-body { |
|||
background-color: #fff !important; |
|||
border-radius: 5px !important; |
|||
-webkit-box-shadow: 0 0.75rem 1.5rem rgba(18,38,63,.03) !important; |
|||
box-shadow: 0 0.75rem 1.5rem rgba(18,38,63, .03) !important; |
|||
} |
|||
.o_main_navbar .o_menu_sections { |
|||
flex-wrap: w |
|||
} |
|||
a { |
|||
color: #556ee6; |
|||
text-decoration: none; |
|||
} |
|||
a:hover { |
|||
color: #4458b8; |
|||
text-decoration: underline; |
|||
} |
|||
.alert-info { |
|||
color: #306391; |
|||
background-color: #dcedfc; |
|||
border-color: #cbe4fb; |
|||
} |
|||
.oe_login_form button.btn-link { |
|||
color: #495057; |
|||
font-weight: 500; |
|||
font-size: 14px !important; |
|||
} |
|||
.oe_login_form button.btn-link:hover { |
|||
color: #171a1c; |
|||
} |
|||
// Login button starts |
|||
.btn-primary { |
|||
color: #fff; |
|||
background-color: #556ee6; |
|||
border-color: #556ee6; |
|||
} |
|||
.btn-primary:hover { |
|||
color: #fff; |
|||
background-color: #485ec4; |
|||
border-color: #4458b8; |
|||
} |
|||
.btn-outline-primary { |
|||
border-color: #556ee6; |
|||
color: #556ee6; |
|||
} |
|||
.btn-outline-primary:hover { |
|||
color: #fff; |
|||
background-color: #556ee6; |
|||
border-color: #556ee6; |
|||
} |
|||
.btn-check:active+.btn-primary, |
|||
.btn-check:checked+.btn-primary, |
|||
.btn-primary.active,.btn-primary:active, |
|||
.show>.btn-primary.dropdown-toggle { |
|||
color: #fff; |
|||
background-color: #4458b8 !important; |
|||
border-color: #4053ad !important; |
|||
} |
|||
.btn-check:focus+.btn-primary, .btn-primary:focus { |
|||
color: #fff; |
|||
background-color: #485ec4 !important; |
|||
border-color: #4458b8 !important; |
|||
-webkit-box-shadow: 0 0 0 .15rem rgba(111,132,234,.5) !important; |
|||
box-shadow: 0 0 0 .15rem rgba(111,132,234,.5) !important; |
|||
} |
|||
.oe_login_form .btn { |
|||
display: inline-block; |
|||
cursor: pointer; |
|||
-webkit-user-select: none; |
|||
-moz-user-select: none; |
|||
-ms-user-select: none; |
|||
user-select: none; |
|||
padding: .47rem .75rem; |
|||
border-radius: .25rem; |
|||
-webkit-transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out; |
|||
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out; |
|||
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; |
|||
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out; |
|||
} |
|||
.btn-secondary { |
|||
color: #fff !important; |
|||
background-color: #74788d !important; |
|||
border-color: #74788d !important; |
|||
} |
|||
.btn-secondary:hover { |
|||
color: #fff !important; |
|||
background-color: #636678 !important; |
|||
border-color: #5d6071 !important; |
|||
} |
|||
.btn-secondary:active { |
|||
color: #fff; |
|||
background-color: #5d6071 !important; |
|||
border-color: #575a6a !important; |
|||
} |
|||
.btn-secondary i,.btn-secondary span { |
|||
color: #fff !important; |
|||
} |
|||
.btn-fill-secondary:focus, .btn-secondary:focus, .btn-fill-secondary.focus, .focus.btn-secondary { |
|||
box-shadow: none !important; |
|||
} |
|||
// Login button ends |
|||
|
|||
// Input starts |
|||
.oe_login_form input { |
|||
display: block; |
|||
width: 100%; |
|||
height: 40px !important; |
|||
padding: 10px 20px; |
|||
font-size: 13px; |
|||
font-weight: 400; |
|||
line-height: 1.5; |
|||
color: #495057; |
|||
background-color: #fff; |
|||
background-clip: padding-box; |
|||
border: 1px solid #ced4da !important; |
|||
-webkit-appearance: none; |
|||
-moz-appearance: none; |
|||
appearance: none; |
|||
border-radius: .25rem; |
|||
-webkit-transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out; |
|||
transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out; |
|||
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; |
|||
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out; |
|||
box-shadow: none !important; |
|||
margin-bottom:10px !important; |
|||
} |
|||
form label { |
|||
font-weight: 400 !important; |
|||
} |
|||
.oe_login_form a.btn.btn-secondary { |
|||
height: 40px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
padding: 0.35rem 0.75rem; |
|||
} |
|||
.oe_login_form a.btn.btn-secondary i.fa.fa-database { |
|||
margin-left: 5px; |
|||
} |
|||
@ -0,0 +1,61 @@ |
|||
#sidebar_panel { |
|||
height: calc(100% - 0%); |
|||
position: fixed; |
|||
background-color: var(--app-bar-accent); |
|||
width: 50px; |
|||
overflow-y: scroll; |
|||
-ms-overflow-style: none; /* Hide scrollbar for IE and Edge */ |
|||
scrollbar-width: none; /* Hide scrollbar for Firefox */ |
|||
z-index: 999; |
|||
} |
|||
#sidebar_panel::-webkit-scrollbar { |
|||
display: none; /* Hide scrollbar for Chrome, Safari and Opera */ |
|||
} |
|||
.sidebar_panel .sidebar { |
|||
padding: 0; |
|||
white-space: nowrap; |
|||
padding-bottom: 20px; |
|||
padding-top: 5px; |
|||
} |
|||
.sidebar_panel .sidebar .sidebar_menu { |
|||
list-style: none; |
|||
margin: 0; |
|||
padding: 0; |
|||
} |
|||
.sidebar_panel .sidebar .sidebar_menu li { |
|||
margin: 0; |
|||
padding: 0; |
|||
border: 0px; |
|||
display: block; |
|||
} |
|||
.dropdown-item{ |
|||
padding: 10px 10px 10px 10px; |
|||
} |
|||
.o_main_navbar .o_menu_brand { |
|||
text-decoration: none !important; |
|||
margin-left: 10px; |
|||
} |
|||
.sidebar_panel .sidebar .sidebar_menu li a { |
|||
margin: 0; |
|||
border: 0px; |
|||
display: block; |
|||
cursor: pointer; |
|||
overflow: hidden; |
|||
color: #ffffff; |
|||
font-size: 13px; |
|||
transition:.3s all; |
|||
} |
|||
.sidebar_panel .sidebar .sidebar_menu li:hover a { |
|||
background: var(--secondary-hover) !important; |
|||
color: #fff; |
|||
} |
|||
.sidebar_panel .sidebar .sidebar_menu li a .sidebar_img { |
|||
width: 30px; |
|||
border-radius:5px; |
|||
} |
|||
html .o_web_client > .o_action_manager{ |
|||
margin-left:50px; |
|||
} |
|||
.sidebar_panel .sidebar .sidebar_menu li .nav-link { |
|||
padding:10px 10px 10px 10px; |
|||
} |
|||
@ -0,0 +1,10 @@ |
|||
<?xml version="1.0" encoding="utf-8" ?> |
|||
<odoo> |
|||
<!-- Layout view template --> |
|||
<template id="code_custom_layout" inherit_id="web.layout" name="Custom Layout"> |
|||
<xpath expr="//meta[@content='IE=edge']" position="after"> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/> |
|||
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap" rel="stylesheet"/> |
|||
</xpath> |
|||
</template> |
|||
</odoo> |
|||
@ -0,0 +1,47 @@ |
|||
<odoo> |
|||
<!-- Inherited the res.config.settings model view to add the fields to configure the theme --> |
|||
<record id="res_config_settings_view_form" model="ir.ui.view"> |
|||
<field name="name">res.config.settings.view.form.inherit.jazzy.backend.theme</field> |
|||
<field name="model">res.config.settings</field> |
|||
<field name="priority" eval="90"/> |
|||
<field name="inherit_id" ref="base.res_config_settings_view_form"/> |
|||
<field name="arch" type="xml"> |
|||
<xpath expr="//div[@id='companies']" position='after'> |
|||
<block title="Jazzy Backend Theme"> |
|||
<setting> |
|||
<div class="w-50 row"> |
|||
<span class="d-block w-75 py-2">Background Image</span> |
|||
<field name="theme_background" class="d-block w-25 p-0 m-0" widget="image"/> |
|||
</div> |
|||
<div class="w-50 row mt-1"> |
|||
<span class="d-block w-75 py-2">App Bar Background Color</span> |
|||
<field name="app_bar_color" class="d-block w-25 p-0 m-0" widget="color"/> |
|||
</div> |
|||
<div class="w-50 row mt-1"> |
|||
<span class="d-block w-75 py-2">App Menu Text Color</span> |
|||
<field name="appbar_text" class="d-block w-25 p-0 m-0" widget="color"/> |
|||
</div> |
|||
<div class="w-50 row mt-1"> |
|||
<span class="d-block w-75 py-2">AppBar Hover Color</span> |
|||
<field name="secondary_hover" class="d-block w-25 p-0 m-0" widget="color"/> |
|||
</div> |
|||
</setting> |
|||
<setting> |
|||
<div class="w-50 row"> |
|||
<span class="d-block w-75 py-2">Navbar Background Color</span> |
|||
<field name="primary_accent" class="d-block w-25 p-0 m-0" widget="color"/> |
|||
</div> |
|||
<div class="w-50 row mt-1"> |
|||
<span class="d-block w-75 py-2">Primary Button Hover</span> |
|||
<field name="primary_hover" class="d-block w-25 p-0 m-0" widget="color"/> |
|||
</div> |
|||
<div class="w-50 row mt-1"> |
|||
<span class="d-block w-75 py-2">Kanban Background Color</span> |
|||
<field name="kanban_bg_color" class="d-block w-25 p-0 m-0" widget="color"/> |
|||
</div> |
|||
</setting> |
|||
</block> |
|||
</xpath> |
|||
</field> |
|||
</record> |
|||
</odoo> |
|||
Loading…
Reference in new issue