Cybrosys Technologies
6 months ago
60 changed files with 3133 additions and 0 deletions
@ -0,0 +1,48 @@ |
|||
.. 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 |
|||
|
|||
Hue Backend Theme |
|||
================== |
|||
* Hue Backend Theme module for Odoo 17 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/17.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 SWARAJ R, 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) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>) |
|||
# Author: Swaraj R (odoo@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,60 @@ |
|||
# -*- coding: utf-8 -*- |
|||
############################################################################# |
|||
# |
|||
# Cybrosys Technologies Pvt. Ltd. |
|||
# |
|||
# Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>) |
|||
# Author: Swaraj R (odoo@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": "Hue Backend Theme", |
|||
"version": "18.0.1.0.0", |
|||
"category": "Themes/Backend", |
|||
"summary": "Hue Backend Theme is an attractive theme for Odoo backend", |
|||
"description": """Minimalist and elegant 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": [ |
|||
"hue_backend_theme/static/src/components/app_menu/side_menu.xml", |
|||
"hue_backend_theme/static/src/layout/style/layout_colors.scss", |
|||
"hue_backend_theme/static/src/components/app_menu/menu_order.css", |
|||
"hue_backend_theme/static/src/layout/style/layout_style.scss", |
|||
"hue_backend_theme/static/src/layout/style/sidebar.scss", |
|||
"hue_backend_theme/static/src/components/app_menu/search_apps.js", |
|||
'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/' |
|||
'jquery.min.js', |
|||
], |
|||
"web.assets_frontend": [ |
|||
"hue_backend_theme/static/src/layout/style/login.scss", |
|||
], |
|||
}, |
|||
"images": [ |
|||
"static/description/template01.jpg", |
|||
"static/description/template02.jpg", |
|||
], |
|||
"license": "LGPL-3", |
|||
"installable": True, |
|||
"auto_install": False, |
|||
"application": False, |
|||
} |
|||
@ -0,0 +1,11 @@ |
|||
## Module <hue_backend_theme> |
|||
|
|||
#### 16.10.2024 |
|||
|
|||
#### Version 18.0.1.0.0 |
|||
|
|||
##### ADD |
|||
|
|||
- Initial commit for Hue Backend Theme |
|||
|
|||
|
|||
@ -0,0 +1,23 @@ |
|||
# -*- coding: utf-8 -*- |
|||
############################################################################# |
|||
# |
|||
# Cybrosys Technologies Pvt. Ltd. |
|||
# |
|||
# Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>) |
|||
# Author: Swaraj R (odoo@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,32 @@ |
|||
# -*- coding: utf-8 -*- |
|||
############################################################################# |
|||
# |
|||
# Cybrosys Technologies Pvt. Ltd. |
|||
# |
|||
# Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>) |
|||
# Author: Swaraj R (odoo@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 fields, models |
|||
|
|||
|
|||
class ResCompany(models.Model): |
|||
""" |
|||
To inherit res company model. |
|||
""" |
|||
_inherit = 'res.company' |
|||
|
|||
background_image = fields.Binary(string="Background Image", |
|||
attachment=True) |
|||
@ -0,0 +1,91 @@ |
|||
# -*- coding: utf-8 -*- |
|||
############################################################################# |
|||
# |
|||
# Cybrosys Technologies Pvt. Ltd. |
|||
# |
|||
# Copyright (C) 2024-TODAY Cybrosys Technologies(<https://www.cybrosys.com>) |
|||
# Author: Swaraj R (odoo@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 fields, models |
|||
|
|||
|
|||
class ResConfigSettings(models.TransientModel): |
|||
""" |
|||
Inherit settings model. |
|||
""" |
|||
_inherit = 'res.config.settings' |
|||
|
|||
theme_background = fields.Binary(string="App menu Background", |
|||
related='company_id.background_image', |
|||
readonly=False) |
|||
app_bar_color = fields.Char(string='Appbar color', |
|||
config_parameter='hue_backend_theme.' |
|||
'appbar_color', |
|||
default='#000000') |
|||
primary_accent = fields.Char(string="Navbar color", |
|||
config_parameter='hue_backend_theme.' |
|||
'primary_accent_color', |
|||
default='#A53860') |
|||
kanban_bg_color = fields.Char(string="Kanban Bg Color", |
|||
config_parameter='hue_backend_theme.' |
|||
'kanban_bg_color', |
|||
default='#F7F7F7') |
|||
primary_hover = fields.Char(string="Hover Primary Color", |
|||
config_parameter='hue_backend_theme.' |
|||
'primary_hover', |
|||
default='#953256') |
|||
light_hover = fields.Char(string="Light Hover", |
|||
config_parameter='hue_backend_theme.light_hover', |
|||
default='#d5d5d5') |
|||
appbar_text = fields.Char(string="Home Menu Text Color", |
|||
config_parameter='hue_backend_theme.appbar_text', |
|||
default='#F7F8F7') |
|||
appbar_hover = fields.Char(string="AppBar Hover", |
|||
config_parameter='hue_backend_theme.' |
|||
'appbar_hover', |
|||
default='#953256') |
|||
|
|||
def config_color_settings(self): |
|||
""" |
|||
To return dict of colors. |
|||
""" |
|||
colors = { |
|||
'full_bg_img': self.env.user.company_id.background_image, |
|||
'appbar_color': self.env['ir.config_parameter'].sudo().get_param( |
|||
'hue_backend_theme.appbar_color'), |
|||
'primary_accent': self.env[ |
|||
'ir.config_parameter'].sudo().get_param( |
|||
'hue_backend_theme.primary_accent_color'), |
|||
'secondary_color': self.env[ |
|||
'ir.config_parameter'].sudo().get_param( |
|||
'hue_backend_theme.secondary_color'), |
|||
'kanban_bg_color': self.env[ |
|||
'ir.config_parameter'].sudo().get_param( |
|||
'hue_backend_theme.kanban_bg_color'), |
|||
'primary_hover': self.env[ |
|||
'ir.config_parameter'].sudo().get_param( |
|||
'hue_backend_theme.primary_hover'), |
|||
'light_hover': self.env[ |
|||
'ir.config_parameter'].sudo().get_param( |
|||
'hue_backend_theme.light_hover'), |
|||
'appbar_text': self.env[ |
|||
'ir.config_parameter'].sudo().get_param( |
|||
'hue_backend_theme.appbar_text'), |
|||
'appbar_hover': self.env[ |
|||
'ir.config_parameter'].sudo().get_param( |
|||
'hue_backend_theme.appbar_hover') |
|||
} |
|||
return colors |
|||
|
After Width: | Height: | Size: 257 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: 13 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: 152 KiB |
|
After Width: | Height: | Size: 338 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-check" style="color:green"></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="./img/template01.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;"> Hue 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 Hue 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 Hue backend theme.</p> |
|||
|
|||
</div> |
|||
<div class="mt-5"> |
|||
<img src="./img/app_bar.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;">Hue 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/kanban_view.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;">Hue 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 Hue |
|||
backend theme provides a fully configurable |
|||
theme settings menu.</p> |
|||
|
|||
</div> |
|||
<div class="mt-5"> |
|||
<img src="./img/customization_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;">Hue Backend theme provides a fully modified and |
|||
colorful form view with the full view experience.</p> |
|||
|
|||
</div> |
|||
<div class="mt-5"> |
|||
<img src="./img/custom_form_view.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/customizable_ui.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;">Hue 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/setting_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/responsive-backend-theme.png" 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/hero.png" 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;">Hue 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> |
|||
@ -0,0 +1,118 @@ |
|||
.nav-container { |
|||
float: left; |
|||
position: relative; |
|||
width: 99vw; |
|||
height: 100%; |
|||
background: #fff; |
|||
display: flex; |
|||
justify-content: start; |
|||
align-items: start; |
|||
padding: 0px 20rem; |
|||
margin-top: 2rem; |
|||
} |
|||
.o_main_navbar .dropdown-menu .show { |
|||
max-height: auto !important; |
|||
min-width: 100%; |
|||
overflow: auto; |
|||
margin-top: 0; |
|||
position: static; |
|||
top: 0; |
|||
display: flex; |
|||
box-shadow: none; |
|||
border: none; |
|||
flex-wrap: wrap; |
|||
flex-direction: row; |
|||
overflow: unset; |
|||
} |
|||
.dropdown-item.o_app.mt0 { |
|||
flex-basis: 20%; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
flex-direction: column; |
|||
margin-bottom: 23px; |
|||
} |
|||
.o_setting_search { |
|||
position: relative; |
|||
.searchInput { |
|||
height: 28px; |
|||
padding: 0px; |
|||
border: 0px; |
|||
border-dropdown-item bottom: 1px solid gray('400'); |
|||
border-color: gray('700'); |
|||
box-shadow: none; |
|||
font-weight: 500; |
|||
} |
|||
.searchIcon { |
|||
@include o-position-absolute(4px, 0); |
|||
color: gray('700'); |
|||
} |
|||
} |
|||
.search-container.has-results { |
|||
height: 100%; |
|||
.search-input { |
|||
height: 3em; |
|||
} |
|||
.search-results { |
|||
height: calc(100% - 3em); |
|||
overflow: auto; |
|||
} |
|||
} |
|||
.app-menu { |
|||
width: 100%; |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
} |
|||
.o_base_settings_view .o_form_renderer { |
|||
--settings__tab-color: #111827; |
|||
} |
|||
.o_main_navbar .dropdown-menu.show { |
|||
max-height: none !important; |
|||
min-width: 100vw; |
|||
min-height: 100vh; |
|||
overflow: auto; |
|||
margin-top: 0px; |
|||
} |
|||
.o-mail-DiscussSidebar .btn { |
|||
padding: 0 !important; |
|||
} |
|||
|
|||
.o-menu-search-result.dropdown-item.col-12.ml-auto.mr-auto { |
|||
background-repeat: no-repeat; |
|||
background-size: 100%; |
|||
padding-left: 30%; |
|||
margin-bottom: 5%; |
|||
} |
|||
|
|||
.sidebar_panel .o-dropdown, |
|||
.sidebar_panel .CallSystrayMenuContainer, |
|||
.sidebar_panel .MessagingMenuContainer, |
|||
.sidebar_panel .o_switch, |
|||
.sidebar_panel .o_menu_systray_item, |
|||
.sidebar_panel .o_edit_website_container, |
|||
.sidebar_panel .o_ActivityMenuView{ |
|||
//**display: none !important;**// |
|||
} |
|||
|
|||
.sidebar_panel .o_debug_manager, |
|||
.sidebar_panel .o_switch_company_menu, |
|||
.sidebar_panel .o-mail-DiscussSystray-class{ |
|||
display: none !important; |
|||
} |
|||
.sidebar_panel .o_menu_systray button{ |
|||
display: none !important; |
|||
} |
|||
.sidebar_panel .o_menu_systray .o_user_menu button{ |
|||
display: block !important; |
|||
} |
|||
.dropdown-item{ |
|||
text-decoration: none !important; |
|||
} |
|||
.dropdown-menu.fullscreen-menu.show { |
|||
inset: -5px auto auto 0px !important; |
|||
} |
|||
.search-container.has-results |
|||
.search-results { |
|||
margin-left: 100px !important; |
|||
color: white !important; |
|||
} |
|||
@ -0,0 +1,127 @@ |
|||
/** @odoo-module */ |
|||
|
|||
import { NavBar } from "@web/webclient/navbar/navbar"; |
|||
import { registry } from "@web/core/registry"; |
|||
const { fuzzyLookup } = require('@web/core/utils/search'); |
|||
import { computeAppsAndMenuItems } from "@web/webclient/menus/menu_helpers"; |
|||
import { useService } from "@web/core/utils/hooks"; |
|||
const commandProviderRegistry = registry.category("command_provider"); |
|||
import { useRef, onMounted, useSubEnv } from "@odoo/owl"; |
|||
import { patch } from "@web/core/utils/patch"; |
|||
|
|||
patch(NavBar.prototype, { |
|||
// To modify the Navbar properties and functions.
|
|||
setup() { |
|||
super.setup() |
|||
var self = this; |
|||
this._search_def = $.Deferred(); |
|||
let { apps, menuItems } = computeAppsAndMenuItems |
|||
(this.menuService.getMenuAsTree("root")); |
|||
this._apps = apps; |
|||
this._searchableMenus = menuItems; |
|||
this.fetch_data(); |
|||
this.search_container = useRef('search_container'); |
|||
this.search_input = useRef('search_input'); |
|||
this.app_menu = useRef('app_menu'); |
|||
this.search_results = useRef('search_results'); |
|||
onMounted(() => { |
|||
this.setClass(); |
|||
}) |
|||
}, |
|||
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) { |
|||
document.documentElement.style.setProperty("--primary-accent", |
|||
result.primary_accent); |
|||
} |
|||
if (result.appbar_hover !== false){ |
|||
document.documentElement.style.setProperty("--appbar-hover", |
|||
result.appbar_hover); |
|||
} |
|||
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){ |
|||
document.documentElement.style.setProperty("--full-screen-bg", |
|||
'url(data:image/png;base64,'+result.full_bg_img+')'); |
|||
} |
|||
if (result.appbar_text !== false){ |
|||
document.documentElement.style.setProperty("--app-menu-font-color", |
|||
result.appbar_text); |
|||
} |
|||
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.el) |
|||
this.$search_input = $(this.search_input.el); |
|||
this.$search_results = $(this.search_results.el); |
|||
this.$app_menu = $(this.app_menu.el); |
|||
this.$dropdown_menu = $(this.search_container.el.parentElement); |
|||
}, |
|||
_searchMenusSchedule() { |
|||
// Hide / Show based on search input.
|
|||
this.$search_results.removeClass("o_hidden") |
|||
this.$app_menu.addClass("o_hidden"); |
|||
this._search_def.reject(); |
|||
this._search_def = $.Deferred(); |
|||
setTimeout(this._search_def.resolve.bind(this._search_def), 50); |
|||
this._search_def.done(this._searchMenus.bind(this)); |
|||
}, |
|||
_searchMenus() { |
|||
// App menu search function
|
|||
var query = this.$search_input.val(); |
|||
if (query === "") { |
|||
this.$search_container.removeClass("has-results"); |
|||
this.$app_menu.removeClass("o_hidden"); |
|||
this.$search_results.empty(); |
|||
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.$search_container.toggleClass( |
|||
"has-results", |
|||
Boolean(results.length) |
|||
); |
|||
this.$search_results.empty() |
|||
var resultsHtml = "" |
|||
results.forEach(function(result) { |
|||
resultsHtml += "<p><a href='odoo/action-" + result["actionID"]+ |
|||
"'>" + result["name"] + "</a></p>" |
|||
}) |
|||
this.$search_results.append(resultsHtml); |
|||
}, |
|||
onAppClick(app) { |
|||
this.onNavBarDropdownItemSelection(app); |
|||
} |
|||
}) |
|||
@ -0,0 +1,118 @@ |
|||
<templates id="template" xml:space="preserve"> |
|||
<!-- Navbar --> |
|||
<t t-inherit="web.NavBar.AppsMenu" t-inherit-mode="extension" owl="1"> |
|||
<xpath expr="//div[hasclass('o_navbar_apps_menu')]" position="replace"> |
|||
<t t-if="!isScopedApp"> |
|||
<li class="dropdown d-flex justify-content-center align-items-center"> |
|||
<a class="full" data-bs-toggle="dropdown" data-display="static" |
|||
href="#"> |
|||
<i class="fa fa-th-large" |
|||
style="font-size: 18px !important; color: white; margin-top: 3px; margin-right: 10px;"/> |
|||
</a> |
|||
<div class="dropdown-menu fullscreen-menu" role="menu"> |
|||
<div class="search-container form-row align-items-center m-auto mb-5 col-12" t-ref="search_container"> |
|||
<div class="search-input col-md-10 ml-auto mr-auto mb-5" |
|||
t-on-input="_searchMenusSchedule"> |
|||
<div class="input-group"> |
|||
<div class="input-group-prepend"> |
|||
<div class="input-group-text"> |
|||
<i class="fa fa-search"/> |
|||
</div> |
|||
</div> |
|||
<input type="search" t-ref="search_input" |
|||
autocomplete="off" |
|||
placeholder="Search menus..." |
|||
class="form-control"/> |
|||
</div> |
|||
</div> |
|||
<div class="search-results col-md-10 ml-auto mr-auto" t-ref="search_results"/> |
|||
<button class="fullscreen-close"> |
|||
<i class="fa fa-chevron-left"/> |
|||
</button> |
|||
</div> |
|||
<div class="nav-container"> |
|||
<div class="app-menu" t-ref="app_menu"> |
|||
<t t-foreach="menuService.getApps()" t-as="app" |
|||
t-key="app_index"> |
|||
<a role="menuitem" |
|||
t-attf-href="#menu_id={{app.id}}" |
|||
class="dropdown-item o_app mt0" |
|||
t-att-data-menu-id="app.menuID" |
|||
t-att-data-menu-xmlid="app.xmlID" |
|||
t-on-click="() => this.onNavBarDropdownItemSelection(app)" |
|||
t-att-data-action-id="app.actionID"> |
|||
<img t-if="app.webIcon.includes('.png')" |
|||
t-att-title="app.name" |
|||
style="width: 70px !important;height: 70px !important;border-radius: 10px !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;border-radius: 10px !important;margin: 5px 5px 5px 5px;" |
|||
t-attf-src="{{app.webIconData}}"/> |
|||
<b class="a_app_menu_title"><t t-esc="app.name"/></b> |
|||
</a> |
|||
</t> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</li> |
|||
</t> |
|||
</xpath> |
|||
</t> |
|||
<!-- Search results --> |
|||
<t t-name="hue_backend_theme.SearchResults"> |
|||
<t t-foreach="results" t-as="result"> |
|||
<div class="search_icons"> |
|||
<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/svg+xml;base64,#{result.webIconData}')" |
|||
t-attf-href="#menu_id=#{result.id}&action_id=#{result.actionID}" |
|||
t-att-data-menu-id="result.id" |
|||
t-att-data-action-id="result.actionID" |
|||
t-raw="result.name" |
|||
onclick="$('.dropdown-menu').removeClass('show'); $('.search-results').addClass('o_hidden'); $('.app-menu').removeClass('o_hidden'); $('.search-input input').val('');"/> |
|||
</div> |
|||
</t> |
|||
</t> |
|||
<!-- 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"> |
|||
<div class="sidebar"> |
|||
<ul class="sidebar_menu"> |
|||
<div class="o_menu_systray" role="menu"> |
|||
<t t-foreach="systrayItems" t-as="item" t-key="item_index"> |
|||
<t t-log="item"/> |
|||
<t t-if="item.key=='web.user_menu' || item.key=='UserMenu'"> |
|||
<t t-component="item.Component" t-props="item.props"/> |
|||
</t> |
|||
</t> |
|||
</div> |
|||
<t t-foreach="menuService.getApps()" t-as="app" |
|||
t-key="app_index"> |
|||
<li> |
|||
<a role="menuitem" |
|||
t-attf-href="#menu_id={{app.id}}" |
|||
class="nav-link" |
|||
t-att-data-id="app.id" |
|||
attrs="{ href: getMenuItemHref(app), 'data-menu-xmlid': app.xmlid, 'data-section': app.id }" |
|||
t-on-click="() => this.onAppClick(app)"> |
|||
<img class="sidebar_img" |
|||
t-if="app.webIcon.includes('.png')" |
|||
t-att-title="app.name" |
|||
t-attf-src="{{app.webIconData}}"/> |
|||
<img class="sidebar_img" |
|||
t-if="app.webIcon.includes('.svg')" |
|||
t-att-title="app.name" |
|||
t-attf-src="{{app.webIconData}}"/> |
|||
<b class="a_app_menu_title"> |
|||
<t t-esc="app.name"/> |
|||
</b> |
|||
</a> |
|||
</li> |
|||
</t> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
</xpath> |
|||
</t> |
|||
</templates> |
|||
@ -0,0 +1,35 @@ |
|||
$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; |
|||
$bg_dark: var(--bg-dark) !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: #A53860; |
|||
--primary-accent-border: #ffffff; |
|||
--app-bar-accent: #000000; |
|||
--full-screen-bg: url(/hue_backend_theme/static/description/assets/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; |
|||
--bg-dark: #060204 !important; |
|||
--f-color: #555b6d !important; |
|||
--color-white : #ffffff !important; |
|||
--color-black : #0F1114 !important; |
|||
--primary-hover: #953256; |
|||
--light-hover: #d5d5d5 ; |
|||
--appbar-hover: #953256; |
|||
--btn-primary: #953256; |
|||
--btn-secondary: #ffffff; |
|||
--btn-info: #281f22; |
|||
--fullscreen-bg-color: #C5F0FC !important; |
|||
} |
|||
@ -0,0 +1,999 @@ |
|||
//Fonts Start |
|||
/* Latin-ext */ |
|||
@font-face { |
|||
font-family: 'DM Sans'; |
|||
font-style: normal; |
|||
font-weight: 400; |
|||
font-display: swap; |
|||
src: url(https://fonts.gstatic.com/s/dmsans/v6/rP2Hp2ywxg089UriCZ2IHSeH.woff2) format('woff2'); |
|||
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; |
|||
} |
|||
/* Latin */ |
|||
@font-face { |
|||
font-family: 'DM Sans'; |
|||
font-style: normal; |
|||
font-weight: 400; |
|||
font-display: swap; |
|||
src: url(https://fonts.gstatic.com/s/dmsans/v6/rP2Hp2ywxg089UriCZOIHQ.woff2) format('woff2'); |
|||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; |
|||
} |
|||
/* Latin-ext */ |
|||
@font-face { |
|||
font-family: 'DM Sans'; |
|||
font-style: normal; |
|||
font-weight: 500; |
|||
font-display: swap; |
|||
src: url(https://fonts.gstatic.com/s/dmsans/v6/rP2Cp2ywxg089UriAWCrCBamC2QX.woff2) format('woff2'); |
|||
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; |
|||
} |
|||
/* Latin */ |
|||
@font-face { |
|||
font-family: 'DM Sans'; |
|||
font-style: normal; |
|||
font-weight: 500; |
|||
font-display: swap; |
|||
src: url(https://fonts.gstatic.com/s/dmsans/v6/rP2Cp2ywxg089UriAWCrCBimCw.woff2) format('woff2'); |
|||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; |
|||
} |
|||
/* Latin-ext */ |
|||
@font-face { |
|||
font-family: 'DM Sans'; |
|||
font-style: normal; |
|||
font-weight: 700; |
|||
font-display: swap; |
|||
src: url(https://fonts.gstatic.com/s/dmsans/v6/rP2Cp2ywxg089UriASitCBamC2QX.woff2) format('woff2'); |
|||
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; |
|||
} |
|||
/* Latin */ |
|||
@font-face { |
|||
font-family: 'DM Sans'; |
|||
font-style: normal; |
|||
font-weight: 700; |
|||
font-display: swap; |
|||
src: url(https://fonts.gstatic.com/s/dmsans/v6/rP2Cp2ywxg089UriASitCBimCw.woff2) format('woff2'); |
|||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; |
|||
} |
|||
//End of fonts |
|||
html .o_web_client > .o_action_manager{ |
|||
margin-left: 80px !important; |
|||
@media (max-width: 768px) { |
|||
margin-left: 0px !important; |
|||
} |
|||
} |
|||
body{ |
|||
font-family: 'DM Sans', sans-serif !important; |
|||
} |
|||
.btn{ |
|||
border-radius: 0px !important; |
|||
} |
|||
.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; |
|||
} |
|||
a:hover { |
|||
color: var(--primary-hover); |
|||
} |
|||
.app_bar .app_container a:hover{ |
|||
background:var(--secoundary-hover) !important; |
|||
} |
|||
.fullscreen-menu{ |
|||
height: 100vh; |
|||
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: 0px; |
|||
left: -1px; |
|||
padding: 2.5rem 0; |
|||
} |
|||
.fullscreen-menu > .search-container > button.fullscreen-close{ |
|||
position: absolute; |
|||
top: 55px; |
|||
left: 160px; |
|||
border-style: none; |
|||
background: transparent; |
|||
color: var(--app-menu-font-color); |
|||
font-size: 2rem; |
|||
opacity: 1; |
|||
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); |
|||
@media (max-width: 768px) { |
|||
position: absolute; |
|||
top: -45px; |
|||
left: 20px !important; |
|||
} |
|||
@media (max-width: 992px) { |
|||
position: absolute; |
|||
top: -45px; |
|||
left: 0px; |
|||
} |
|||
} |
|||
.fullscreen-menu > .search-container{ |
|||
margin-top: 30px !important; |
|||
} |
|||
.a_app_menu_title{ |
|||
color: var(--app-menu-font-color) !important; |
|||
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.50); |
|||
font-size: 14px; |
|||
} |
|||
.o_main_navbar{ |
|||
background-color:var(--primary-accent) !important; |
|||
border-bottom: 1px solid var(--primary-hover) !important; |
|||
margin-left: 80px; |
|||
@media (max-width: 768px) { |
|||
margin-left: 0px; |
|||
} |
|||
} |
|||
.dropdown-toggle:hover { |
|||
&:hover{ |
|||
background-color: var(--light-hover) !important; |
|||
} |
|||
} |
|||
.o_user_menu .o_user_avatar{ |
|||
border-radius: 50% !important; |
|||
margin-right: 0.5rem; |
|||
} |
|||
.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 |
|||
.o_menu_sections .o-dropdown .dropdown-toggle:hover:hover{ |
|||
background-color: var(--primary-hover) !important; |
|||
} |
|||
//Icon color |
|||
.o_searchview .o_searchview_facet .o_searchview_facet_label { |
|||
background-color: var(--primary-accent) !important; |
|||
} |
|||
.o_searchview .o_searchview_facet{ |
|||
border: none !important; |
|||
background: #e2e2e0 |
|||
} |
|||
.o_searchview .o_searchview_facet .o_searchview_facet_label { |
|||
background-color: #EEEEEE !important; |
|||
} |
|||
.btn-secondary { |
|||
color: var(--bg-dark) !important; |
|||
background-color: var(--btn-secondary) !important; |
|||
border-color: var(--light-hover) !important; |
|||
margin:0 5px 0 0; |
|||
&:hover{ |
|||
background-color: var(--light-hover) !important; |
|||
color: var(--bg-dark) !important; |
|||
border-color: var(--light-hover) !important; |
|||
i{ |
|||
color: var(--color-white) !important; |
|||
} |
|||
span{ |
|||
color: var(--color-white) !important; |
|||
} |
|||
} |
|||
i{ |
|||
color: var(--color-black) !important; |
|||
margin-right: 0.2rem; |
|||
} |
|||
span{ |
|||
color: var(--color-black) !important; |
|||
} |
|||
} |
|||
.o_statusbar_buttons > .btn-secondary { |
|||
color: var(--bg-dark) !important; |
|||
span{ |
|||
color: var(--bg-dark) !important; |
|||
} |
|||
} |
|||
.o_statusbar_status button{ |
|||
border-radius: 0px !important; |
|||
} |
|||
|
|||
.btn-secondary:hover span, .btn-secondary:hover i { |
|||
color: var(--color-black) !important; |
|||
} |
|||
.o_searchview { |
|||
background-color: var(--bg-white) !important; |
|||
border: 1px solid #ccc; |
|||
border-radius: 3px; |
|||
padding: 1px 25px 3px 5px; |
|||
} |
|||
.o_searchview .o_searchview_input_container { |
|||
display: flex; |
|||
flex-flow: row wrap; |
|||
position: relative; |
|||
border-radius: 0px; |
|||
} |
|||
.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: 3px; |
|||
position: relative; |
|||
padding: 2px 5px; |
|||
} |
|||
.o_searchview .o_searchview_input_container .o_searchview_facet .o_searchview_facet_label { |
|||
align-items: center; |
|||
color: var(--bg-dark) !important; |
|||
-webkit-box-flex: 0; |
|||
flex: 0 0 auto; |
|||
padding: 0 3px; |
|||
border-radius: 3px 0px 0px 3px; |
|||
display: flex; |
|||
max-width: 100%; |
|||
white-space: nowrap; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
vertical-align: top; |
|||
background-color: transparent !important; |
|||
} |
|||
.o_searchview_facet .o_facet_values{ |
|||
display: flex; |
|||
align-items: center; |
|||
border: none !important; |
|||
} |
|||
//Module icon |
|||
.oe_module_icon { |
|||
width: 70px; |
|||
max-height: 70px; |
|||
max-width: 23%; |
|||
float: left; |
|||
border-radius: 0px; |
|||
} |
|||
.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: 0px; |
|||
|
|||
} |
|||
//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: 0px; |
|||
} |
|||
//Dropdown |
|||
.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: 0px; |
|||
} |
|||
//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: 0px; |
|||
} |
|||
.o_kanban_view.o_kanban_ungrouped .o_kanban_record { |
|||
-webkit-box-flex: 1; |
|||
flex: 1 1 auto; |
|||
width: 300px; |
|||
margin: 4px 8px; |
|||
border-radius: 0px; |
|||
} |
|||
.o_kanban_view .o_column_quick_create .o_quick_create_folded .o_kanban_add_column { |
|||
margin-right: 8px; |
|||
display: inline-block; |
|||
padding: 10px 14px; |
|||
background-color: rgba(73, 80, 87, 0.1); |
|||
border-radius: 0px; |
|||
} |
|||
.o_kanban_view .o_kanban_record.o_kanban_record_has_image_fill .o_kanban_image_fill_left .o_kanban_image_inner_pic, .o_kanban_view .o_kanban_record.o_kanban_record_has_image_fill .o_kanban_image .o_kanban_image_inner_pic { |
|||
position: absolute; |
|||
top: auto; |
|||
left: auto; |
|||
bottom: 0; |
|||
right: 0; |
|||
max-height: 25px; |
|||
max-width: 80%; |
|||
background: var(--bg-white) !important; |
|||
box-shadow: -1px -1px 0 1px var(--bg-white) !important; |
|||
border-radius: 0px; |
|||
margin: 5px; |
|||
} |
|||
.o_kanban_record.oe_kanban_global_click:focus{ |
|||
outline: thin solid var(--primary-accent) !important; |
|||
} |
|||
.o_purchase_dashboard .table > thead > tr > td, .o_purchase_dashboard .table tbody > tr > td { |
|||
text-align: center; |
|||
width: 25%; |
|||
height: 33px; |
|||
vertical-align: middle; |
|||
border-top: 1px solid var(--bg-white) !important; |
|||
background-color: #f9f9f5; |
|||
border-radius: 0px; |
|||
} |
|||
.o_kanban_renderer.o_kanban_ungrouped { |
|||
min-height: 100%; |
|||
align-content: flex-start; |
|||
-webkit-flex-flow: row wrap; |
|||
flex-flow: row wrap; |
|||
-webkit-box-pack: start; |
|||
justify-content: flex-start; |
|||
padding: 8px 8px; |
|||
background-color: var(--kanban-bg-color) !important; |
|||
} |
|||
//Chatter |
|||
.o_Message.o-not-discussion { |
|||
background-color: #f8f9fa; |
|||
border-radius: 0px; |
|||
} |
|||
//Field dropdown |
|||
.o_settings_container .o_setting_box .o_setting_right_pane .o_field_widget { |
|||
width: 50%; |
|||
-webkit-box-flex: 0; |
|||
flex: 0 0 auto; |
|||
border-radius: 0px; |
|||
} |
|||
.o_settings_container .o_setting_box .o_setting_right_pane .o_input_dropdown > .o_input { |
|||
width: 100%; |
|||
border-radius: 0px; |
|||
} |
|||
//Form input |
|||
.o_input{ |
|||
border: 1px solid var(--primary-accent) !important; |
|||
border-radius: 0px !important; |
|||
} |
|||
.o_form_view .o_horizontal_separator { |
|||
color: var(--primary-accent) !important; |
|||
} |
|||
//Required |
|||
.o_form_view .o_form_uri > span:first-child{ |
|||
color:var(--primary-accent) !important; |
|||
} |
|||
.o_form_view .oe_button_box .btn.oe_stat_button > .o_stat_info .o_stat_value, .o_form_view .oe_button_box .btn.oe_stat_button > span .o_stat_value |
|||
{ |
|||
color:var(--primary-accent) !important; |
|||
} |
|||
.o_form_view .o_form_statusbar > .o_statusbar_status > .o_arrow_button:not(:first-child)::after, |
|||
.o_form_view .o_form_statusbar > .o_statusbar_status > .o_arrow_button:not(:first-child)::before |
|||
{ |
|||
border: none !important; |
|||
} |
|||
.o_field_widget .o_input_dropdown > input { |
|||
cursor: pointer; |
|||
border-radius: 0px; |
|||
} |
|||
.o_field_widget .o_input_dropdown > input, .o_field_widget.o_datepicker > input { |
|||
padding-right: 14px; |
|||
border-radius: 0px; |
|||
} |
|||
.o_form_view .o_group .o_field_widget { |
|||
width: 100%; |
|||
border-radius: 0px; |
|||
} |
|||
.oe_form_field_html .note-editable { |
|||
font: inherit !important; |
|||
font-family: inherit !important; |
|||
line-height: inherit !important; |
|||
color: inherit !important; |
|||
border-radius: 0px; |
|||
} |
|||
.o_form_view .oe_avatar > img { |
|||
max-width: 90px; |
|||
max-height: 90px; |
|||
vertical-align: top; |
|||
border: 1px solid #dee2e6; |
|||
border-radius: 0px; |
|||
} |
|||
.o_form_view .o_form_statusbar > .o_field_widget { |
|||
align-self: center; |
|||
margin-bottom: 0px; |
|||
border-radius: 0px; |
|||
} |
|||
//Settings |
|||
.settings_tab { |
|||
background-color: var(--primary-accent) !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; |
|||
border-radius: 0px; |
|||
} |
|||
.o_web_settings_invite{ |
|||
height: 25.1px !important; |
|||
margin: 8px 5px 0 0 !important; |
|||
padding-bottom: 24px !important; |
|||
} |
|||
.o_base_settings .o_setting_container .settings_tab .selected { |
|||
box-shadow: none !important; |
|||
} |
|||
.o_base_settings .o_control_panel .o_panel .o_setting_search .searchInput { |
|||
border-bottom: 1px solid var(--primary-accent) !important |
|||
} |
|||
.o_select_file_button{ |
|||
background-color: var(--primary-accent) !important; |
|||
color: var(--color-white) !important; |
|||
} |
|||
//Statusbar |
|||
.btn-warning:active, |
|||
button[name="action_uninstall"]:active { |
|||
color: #fff !important; |
|||
background-color: #c1903d !important; |
|||
border-color: #b58739 !important; |
|||
} |
|||
.btn-warning:focus, |
|||
button[name="action_uninstall"]:focus { |
|||
color: #fff !important; |
|||
background-color: #cd9941 !important; |
|||
border-color: #c1903d !important; |
|||
-webkit-box-shadow: 0 0 0 0.15rem rgba(243,191,103,.50) !important; |
|||
box-shadow: 0 0 0 0.15rem rgba(243,191,1,.50) !important; |
|||
} |
|||
.btn-fill-secondary.disabled, .disabled.btn-secondary, .btn-fill-secondary:disabled, .btn-secondary:disabled { |
|||
color: #212529 !important; |
|||
background-color: #fff !important; |
|||
border-color: #fff !important; |
|||
} |
|||
.o_statusbar_status .o_arrow_button.btn-secondary { |
|||
background-color: #fff ; |
|||
} |
|||
.o_statusbar_status .o_arrow_button.btn-secondary:hover:after { |
|||
border-color: #fff !important; |
|||
} |
|||
.o_statusbar_status .o_arrow_button.btn-primary { |
|||
border: solid 1px var(--primary-accent-border); |
|||
color: #fff !important; |
|||
} |
|||
.o_form_view .o_form_statusbar > .o_statusbar_status > .o_arrow_button.btn-primary.disabled { |
|||
background-color: var(--primary-accent) !important; |
|||
color: #fff; |
|||
} |
|||
.o_form_view .o_form_statusbar > .o_statusbar_status > .o_arrow_button.btn-primary.disabled:after, .o_form_view .o_form_statusbar > .o_statusbar_status > .o_arrow_button.btn-primary.disabled:before { |
|||
border-left-color: var(--primary-accent) !important; |
|||
} |
|||
//Avatar pic |
|||
.rounded-circle, .o_status, .o_calendar_invitation, .o_status_bubble, .o_Activity_detailsUserAvatar, .o_Activity_userAvatar { |
|||
border-radius: 0% !important; |
|||
} |
|||
.o_calendar_sidebar_container .ui-datepicker td.ui-datepicker-current-day a { |
|||
background-color: var(--primary-accent) !important; |
|||
} |
|||
.btn-fill-primary:hover, .btn-primary:hover, .btn-primary:hover, |
|||
.btn-fill-primary:focus, .btn-primary:focus, .btn-primary:focus, |
|||
.btn-fill-primary:active, .btn-primary:active, .btn-primary:active |
|||
{ |
|||
background:var(--primary-accent) !important; |
|||
border-color:var(--primary-accent) !important; |
|||
} |
|||
//Chat |
|||
.o_ChatWindowHeader { |
|||
background-color: var(--primary-accent) !important; |
|||
} |
|||
.o_ChatWindow_newMessageFormInput { |
|||
outline: none; |
|||
border: 1px solid #dee2e6; |
|||
border-radius: 0px; |
|||
} |
|||
a { |
|||
color: var(--primary-accent); |
|||
text-decoration: none; |
|||
} |
|||
//Buttons |
|||
.btn{ |
|||
border-radius: 0.3rem !important; |
|||
padding: 8px 25px; |
|||
transition: all 0.4s linear; |
|||
&:hover{ |
|||
filter: brightness(95%) !important; |
|||
transition: all 0.4s linear; |
|||
} |
|||
} |
|||
.btn-fill-primary, .btn-primary{ |
|||
background-color:var(--primary-accent) !important; |
|||
font-weight: bold !important; |
|||
border: none; |
|||
} |
|||
.btn-primary { |
|||
color: #fff; |
|||
background-color: var(--btn-primary) !important; |
|||
margin: 0 5px 0 0; |
|||
-webkit-box-shadow: 0px 0px 5px 5px rgba(242, 234, 237, 1); |
|||
-moz-box-shadow: 0px 0px 5px 5px rgba(242, 234, 237, 1); |
|||
box-shadow: 0px 0px 5px 5px rgba(242, 234, 237, 1); |
|||
&:hover{ |
|||
-webkit-box-shadow: none; |
|||
-moz-box-shadow: none; |
|||
box-shadow: none; |
|||
} |
|||
} |
|||
.btn-info{ |
|||
background-color: var(--btn-info) !important; |
|||
border-color: var(--btn-info) !important; |
|||
&:hover{ |
|||
color: var(--color-white) !important; |
|||
} |
|||
} |
|||
.btn-link { |
|||
font-weight: 400; |
|||
color: var(--primary-accent) !important; |
|||
text-decoration: none; |
|||
} |
|||
.btn-light{ |
|||
&:hover{ |
|||
color: var(--color-black) !important; |
|||
background-color: var(--light-hover) !important; |
|||
} |
|||
} |
|||
.btn-fill-light:not(:disabled):not(.disabled):active, |
|||
.btn-light:not(:disabled):not(.disabled):active, |
|||
.btn-fill-light:not(:disabled):not(.disabled).active, |
|||
.btn-light:not(:disabled):not(.disabled).active, |
|||
.show > .btn-fill-light.dropdown-toggle, |
|||
.show > .dropdown-toggle.btn-light{ |
|||
background-color: var(--light-hover) !important; |
|||
} |
|||
.ui-autocomplete .ui-menu-item.o_m2o_dropdown_option > a { |
|||
color: var(--primary-accent) !important; |
|||
} |
|||
button.dropdown-toggle, .o_switch_view{ |
|||
border: 1px solid #d4d4d4; |
|||
} |
|||
|
|||
.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: 0px; |
|||
} |
|||
//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: 0px; |
|||
} |
|||
//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: 0px; |
|||
&: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: 0px; |
|||
} |
|||
.dropdown-menu.show { |
|||
display: block; |
|||
border-radius: 0; |
|||
} |
|||
.o_mail_preview .o_mail_preview_image.o_mail_preview_app > img { |
|||
border-radius: 0px; |
|||
} |
|||
//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: 0px; |
|||
} |
|||
//Event |
|||
.text-center { |
|||
text-align: center !important; |
|||
border-radius: 0px; |
|||
} |
|||
//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: 0px; |
|||
} |
|||
//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; |
|||
@media (max-width: 767.98px) { |
|||
.dropdown-item{ |
|||
padding: 0px !important; |
|||
} |
|||
} |
|||
} |
|||
//Discuss |
|||
.o_DiscussMobileMailboxSelection{ |
|||
padding: 1rem 0.5rem; |
|||
} |
|||
.o_Message_prettyBody{ |
|||
p{ |
|||
a{ |
|||
background-color: var(--primary-accent) !important; |
|||
color: var(--color-white) !important; |
|||
border-radius: 0px !important; |
|||
&:hover{ |
|||
background-color: var(--primary-hover) !important; |
|||
color: var(--color-white) !important; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
//Datepicker |
|||
.bootstrap-datetimepicker-widget .accordion-toggle span.fa.primary{ |
|||
&:hover{ |
|||
background-color: var(--light-hover) !important; |
|||
} |
|||
} |
|||
.bootstrap-datetimepicker-widget .accordion-toggle span.fa.primary{ |
|||
color: var(--primary-accent) !important; |
|||
} |
|||
.bootstrap-datetimepicker-widget table td.active, .bootstrap-datetimepicker-widget table td.active { |
|||
background-color: var(--primary-accent) !important; |
|||
&:hover{ |
|||
background-color: var(--primary-hover) !important; |
|||
} |
|||
} |
|||
.bootstrap-datetimepicker-widget .datepicker table td.today::before { |
|||
border-bottom-color: var(--primary-accent) !important; |
|||
} |
|||
//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 { |
|||
margin: 12px auto; |
|||
border-radius: 0px; |
|||
} |
|||
.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; |
|||
} |
|||
.breadcrumb{ |
|||
background-color: transparent !important; |
|||
} |
|||
.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; |
|||
} |
|||
} |
|||
//Loading Indicator |
|||
.o_loading_indicator.o_loading > span{ |
|||
background-color: var(--bg-dark) !important; |
|||
border-color: var(--bg-dark) !important; |
|||
color: var(--color-white) !important; |
|||
border-radius: 3px !important; |
|||
padding: 10px 20px !important; |
|||
top: 50px !important; |
|||
left: 48% !important; |
|||
right: auto !important; |
|||
bottom: auto !important; |
|||
text-align: center !important; |
|||
box-shadow: 0px 6px 4px -1px rgba(0,0,0,0.46); |
|||
-webkit-box-shadow: 0px 6px 4px -1px rgba(0,0,0,0.46); |
|||
-moz-box-shadow: 0px 6px 4px -1px rgba(0,0,0,0.46); |
|||
@media (max-width: 767.98px) { |
|||
left: 40% !important; |
|||
} |
|||
} |
|||
.dropdown{ |
|||
margin-left: 10px; |
|||
} |
|||
.o_menu_brand{ |
|||
margin-left: 10px; |
|||
text-decoration:none !important; |
|||
} |
|||
.form-control{ |
|||
padding: 0px; |
|||
} |
|||
.o_input{ |
|||
border: none !important; |
|||
} |
|||
.a_app_menu_title{ |
|||
width: 85px !important; |
|||
} |
|||
.fullscreen-menu{ |
|||
margin-top:-32px!important; |
|||
} |
|||
.input-group{ |
|||
margin-left: 100px !important; |
|||
} |
|||
// V17 Fixes |
|||
.o_main_navbar .o_menu_sections .o_nav_entry, .o_main_navbar .o_menu_sections .dropdown-toggle { |
|||
background: var(--primary-accent) !important; |
|||
bottom: 1px !important; |
|||
} |
|||
.o_control_panel_actions .o_searchview { |
|||
padding-left: 10px !important; |
|||
} |
|||
.o_cp_searchview.input-group { |
|||
margin-left: 0px !important; |
|||
} |
|||
@media (min-width: 1534px) { |
|||
.o_content .table_responsive.o_list_renderer { |
|||
overflow-x: hidden !important; |
|||
} |
|||
.o_form_view .o_form_sheet { |
|||
width: 1102px; |
|||
} |
|||
.o_list_view .table-responsive .table { |
|||
left: -10px; |
|||
} |
|||
.o_list_table .o_data_row { |
|||
vertical-align: middle !important; |
|||
} |
|||
.o_statusbar_status .o_arrow_button.btn-secondary { |
|||
margin: 0px !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; |
|||
border-top: 19px solid transparent !important; |
|||
border-bottom: 19px solid transparent !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; |
|||
border-top: 19px solid transparent !important; |
|||
border-bottom: 19px solid transparent !important; |
|||
} |
|||
} |
|||
.btn-primary { |
|||
background-color: var(--primary-accent) !important; |
|||
} |
|||
.o_main_navbar { |
|||
border-bottom: 0px !important; |
|||
} |
|||
.dropdown-menu.fullscreen-menu.show { |
|||
background-color: lightgrey; |
|||
display: block; |
|||
position: fixed; |
|||
padding: 10px; |
|||
top: 0; |
|||
left: 0; |
|||
bottom: 0; |
|||
right: 0; |
|||
z-index: 100; |
|||
overflow-x: hidden; |
|||
overflow-y: auto; |
|||
min-height: 100%; |
|||
} |
|||
@media (max-width: 768px) { |
|||
#sidebar_panel { |
|||
display: none; |
|||
} |
|||
.o_field_widget .o_statusbar_status { |
|||
position: absolute; |
|||
top: 0; |
|||
right: 0; |
|||
} |
|||
.o_statusbar_status .o_arrow_button.btn-secondary { |
|||
margin: 0px !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; |
|||
border-top: 19px solid transparent !important; |
|||
border-bottom: 19px solid transparent !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; |
|||
border-top: 19px solid transparent !important; |
|||
border-bottom: 19px solid transparent !important; |
|||
} |
|||
} |
|||
@ -0,0 +1,146 @@ |
|||
#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-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,160 @@ |
|||
#sidebar_panel { |
|||
height: calc(100% - 0%); |
|||
position: fixed; |
|||
background-color: var(--app-bar-accent) !important; |
|||
width: 82px; |
|||
overflow-y: scroll; |
|||
-ms-overflow-style: none; /* Hide scrollbar for IE and Edge */ |
|||
scrollbar-width: none; /* Hide scrollbar for Firefox */ |
|||
z-index: 3; |
|||
top: 0; |
|||
} |
|||
#sidebar_panel::-webkit-scrollbar { |
|||
display: none; /* Hide scrollbar for Chrome, Safari and Opera */ |
|||
} |
|||
.sidebar_panel{ |
|||
padding-top: 85px !important; |
|||
&:after { |
|||
content: ""; |
|||
position: fixed; |
|||
width: 80px; |
|||
height: 100px; |
|||
bottom: 0; |
|||
left: 0; |
|||
pointer-events: none !important; |
|||
background-image: linear-gradient(top, rgba(0,0,0,0) 0%, var(--bg-dark) 100%); |
|||
background-image: -o-linear-gradient(top, rgba(0,0,0,0) 0%, var(--bg-dark) 100%); |
|||
background-image: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, var(--bg-dark) 100%); |
|||
background-image: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, var(--bg-dark) 100%); |
|||
@media (max-width: 767.98px) { |
|||
display: none !important; |
|||
} |
|||
} |
|||
} |
|||
.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; |
|||
} |
|||
.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(--appbar-hover) !important; |
|||
color: #fff; |
|||
} |
|||
.sidebar_panel .sidebar .sidebar_menu li a .sidebar_img { |
|||
width: 22px; |
|||
width: 22px; |
|||
height: 22px; |
|||
border-radius: 0px; |
|||
} |
|||
.sidebar_panel .sidebar .sidebar_menu li .nav-link { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
padding: 6px 10px 6px 10px; |
|||
text-decoration: none !important; |
|||
} |
|||
|
|||
.a_app_menu_title{ |
|||
margin: 10px !important; |
|||
white-space: normal; |
|||
text-align: center; |
|||
word-break: break-word; |
|||
width: 75px; |
|||
} |
|||
.o_menu_systray > *{ |
|||
&:last-child{ |
|||
display: block !important; |
|||
height: 80px !important; |
|||
position: fixed; |
|||
background-color: var(--app-bar-accent) !important; |
|||
max-width: 68px; |
|||
top: 0; |
|||
.dropdown-toggle{ |
|||
padding-left: 15px !important; |
|||
} |
|||
.dropdown-toggle .oe_topbar_name{ |
|||
display: none !important; |
|||
} |
|||
@media (max-width: 767.98px) { |
|||
display: none !important; |
|||
} |
|||
} |
|||
} |
|||
.sidebar_menu .o_menu_systray .o_user_menu .dropdown-toggle{ |
|||
width: 121%; |
|||
margin-left: 0%; |
|||
background-color: transparent; |
|||
border: none; |
|||
height: 80px; |
|||
img{ |
|||
width: 40px; |
|||
height: 40px; |
|||
} |
|||
&:hover{ |
|||
background-color: var(--appbar-hover) !important |
|||
} |
|||
} |
|||
.sidebar_menu .o_menu_systray .o_user_menu .o-dropdown--menu { |
|||
display: flex; |
|||
top: 10px !important; |
|||
left: 80px !important; |
|||
overflow: visible; |
|||
z-index: 2; |
|||
&:after{ |
|||
content: ''; |
|||
position: absolute; |
|||
display: block; |
|||
border-style: solid; |
|||
border-color: transparent #fff; |
|||
border-width: 10px 12px 10px 0; |
|||
top: 12%; |
|||
left: -12px; |
|||
} |
|||
} |
|||
.o_main_navbar .o_menu_systray{ |
|||
margin-right: 20px !important; |
|||
} |
|||
.o_main_navbar .o_MessagingMenu, |
|||
.o_main_navbar .o_mail_systray_item{ |
|||
margin-left: 10px !important; |
|||
} |
|||
.o_main_navbar .o_user_menu{ |
|||
display: none !important; |
|||
} |
|||
.o_main_navbar .o_menu_systray { |
|||
@media (max-width: 768px) { |
|||
margin-right: 0px !important; |
|||
} |
|||
} |
|||
.sidebar_menu > .o_menu_systray > .o_user_menu{ |
|||
margin-left: 0px; |
|||
} |
|||
.o_menu_systray .dropdown-toggle:hover:hover { |
|||
background-color: var(--primary-hover) !important; |
|||
text-decoration: none !important; |
|||
} |
|||
.o_menu_sections_more .o-dropdown--menu{ |
|||
position: absolute !important; |
|||
} |
|||
@ -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=Roboto:wght@400;600&display=swap" rel="stylesheet"/> |
|||
</xpath> |
|||
</template> |
|||
</odoo> |
|||
@ -0,0 +1,87 @@ |
|||
<?xml version="1.0" encoding="utf-8" ?> |
|||
<odoo> |
|||
<!-- Inherit settings page --> |
|||
<record id="res_config_settings_view_form" model="ir.ui.view"> |
|||
<field name="name">res.config.settings.view.inherit.hue.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'> |
|||
<h2>Hue Backend Theme</h2> |
|||
<div class="row mt16 o_settings_container" name="barcode_scanner_using_cam"> |
|||
<div class="col-xs-12 col-md-6 o_setting_box"> |
|||
<div class="o_setting_left_pane"> |
|||
</div> |
|||
<div class="o_setting_right_pane" title="Chose your preferred background image."> |
|||
<label string="Background Image" for="theme_background" class="ml-4" required="1"/> |
|||
<field name="theme_background" widget="image"/> |
|||
<div class="text-muted"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="col-xs-12 col-md-6 o_setting_box"> |
|||
<div class="o_setting_left_pane"> |
|||
<field name="app_bar_color" widget="color"/> |
|||
</div> |
|||
<div class="o_setting_right_pane" title="Chose the preferred appbar background color"> |
|||
<label string="App Bar Background Color" for="app_bar_color"/> |
|||
<div class="text-muted"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="col-xs-12 col-md-6 o_setting_box"> |
|||
<div class="o_setting_left_pane"> |
|||
<field name="appbar_text" widget="color"/> |
|||
</div> |
|||
<div class="o_setting_right_pane" title="Chose the preferred appmenu text color"> |
|||
<label string="AppMenu Text color" for="appbar_text"/> |
|||
<div class="text-muted"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="col-xs-12 col-md-6 o_setting_box"> |
|||
<div class="o_setting_left_pane"> |
|||
<field name="appbar_hover" widget="color"/> |
|||
</div> |
|||
<div class="o_setting_right_pane" title="Chose the preferred color on hovering through appbar"> |
|||
<label string="AppBar Hover color" for="appbar_hover"/> |
|||
<div class="text-muted"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="col-xs-12 col-md-6 o_setting_box"> |
|||
<div class="o_setting_left_pane"> |
|||
<field name="primary_accent" widget="color"/> |
|||
</div> |
|||
<div class="o_setting_right_pane" title="Chose the preferred navbar background color"> |
|||
<label string="Navbar Background Color" for="primary_accent"/> |
|||
<div class="text-muted"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="col-xs-12 col-md-6 o_setting_box"> |
|||
<div class="o_setting_left_pane"> |
|||
<field name="kanban_bg_color" widget="color"/> |
|||
</div> |
|||
<div class="o_setting_right_pane" title="Chose the preferred kanban view background color"> |
|||
<label string="Kanban Background Color" for="kanban_bg_color"/> |
|||
<div class="text-muted"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="col-xs-12 col-md-6 o_setting_box"> |
|||
<div class="o_setting_left_pane"> |
|||
<field name="primary_hover" widget="color"/> |
|||
</div> |
|||
<div class="o_setting_right_pane" title="Chose the preferred color on hovering through the button"> |
|||
<label string="Primary Button Hover" for="primary_hover"/> |
|||
<div class="text-muted"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</xpath> |
|||
</field> |
|||
</record> |
|||
</odoo> |
|||
Loading…
Reference in new issue