Dec 6 : [ADD] Initial Commit 'hue_backend_theme'

hue_backend_theme/README.rst

@@ -0,0 +1,47 @@
+.. image:: https://img.shields.io/badge/license-LGPL--3-green.svg
+    :target: https://www.gnu.org/licenses/lgpl-3.0-standalone.html
+    :alt: License: LGPL-3
+
+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
+
+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>`__

hue_backend_theme/__init__.py

@@ -0,0 +1,22 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2023-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: ADVAITH BG (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

hue_backend_theme/__manifest__.py

@@ -0,0 +1,58 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2023-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: ADVAITH BG (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": "17.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",
+        ],
+        "web.assets_frontend": [
+            "hue_backend_theme/static/src/layout/style/login.scss",
+        ],
+    },
+    "images": [
+        "static/description/banner.png",
+        "static/description/theme_screenshot.png",
+    ],
+    "license": "LGPL-3",
+    "installable": True,
+    "auto_install": False,
+    "application": False,
+}

hue_backend_theme/doc/RELEASE_NOTES.md

@@ -0,0 +1,9 @@
+## Module <hue_backend_theme>
+
+#### 05.12.2023
+
+#### Version 17.0.1.0.0
+
+##### ADD
+
+Initial commit for Hue Backend Theme

hue_backend_theme/models/__init__.py

@@ -0,0 +1,23 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2023-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: ADVAITH BG (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

hue_backend_theme/models/res_company.py

@@ -0,0 +1,31 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2023-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: ADVAITH BG (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)

hue_backend_theme/models/res_config_settings.py

@@ -0,0 +1,91 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2023-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: ADVAITH BG (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

hue_backend_theme/static/description/index.html

@@ -0,0 +1,457 @@
+<!-- HERO SECTION -->
+<div class="container">
+  <div class="row position-relative"
+    style="background-color: #232d37 !important; height: 550px; margin-bottom: 6rem; border-radius: 1.5rem;">
+    <div class="col-lg-12 d-flex flex-column justify-content-start align-items-center">
+      <h1 class="display-1 text-white" style="padding-top: 5rem;">
+        <img src="./images/logo.png">
+      </h1>
+      <p class="text-light small font-weight-bold"
+        style="text-align: center!important; letter-spacing: 5px; text-transform: uppercase; margin-top: 1.5rem !important;">
+        Fully Customizable Backend Theme for Odoo 17</p>
+    </div>
+    <img src="./images/hero.png" class="img img-fluid"
+      style="height: auto; width: 700px; top: 45%; left: 0; right: 0; margin-left: auto; margin-right: auto; margin-top: 1rem !important;"
+      height="auto" width="700px">
+  </div>
+</div>
+<!-- END OF HERO SECTION -->
+<!-- SHORT DESCRIPTION -->
+<div class="container">
+  <div class="row" style="margin-top: 5rem !important;">
+    <div class="col-lg-12 d-flex justify-content-center align-items-center">
+      <h6 class="text-muted text-center w-50" style="line-height: 22px;">This theme provides a user-friendly backend
+        experience for Odoo 17.0 community edition.</h6>
+    </div>
+  </div>
+</div>
+<!-- END OF SHORT DESCRIPTION -->
+<!-- FEATURE ICONS -->
+<div class="container w-50" style="margin: 3rem auto;">
+  <div class="row">
+    <div class="col-lg-4 my-2 d-flex flex-column justify-content-center align-items-center">
+      <div
+        style="height: 100px; width: 100px; border: 8px solid #dedee5 ; border-radius: 50%; background-color: #d4d3dc; box-shadow: 0px 0px 0px 8px #f4f4f6;"
+        class="d-flex justify-content-center align-items-center">
+        <img height="60px" src="./images/icons/design.png">
+      </div>
+      <h6 class="my-4 text-center">Well-Crafted</h6>
+    </div>
+
+    <div class="col-lg-4 my-2 d-flex flex-column justify-content-center align-items-center">
+      <div
+        style="height: 100px; width: 100px; border: 8px solid #dedee5; border-radius: 50%; background-color: #d4d3dc; box-shadow: 0px 0px 0px 8px #f4f4f6;"
+        class="d-flex justify-content-center align-items-center">
+        <img height="60px" src="./images/icons/responsive.png">
+      </div>
+      <h6 class="my-4 text-center">Efficient Design</h6>
+    </div>
+
+    <div class="col-lg-4 my-2 d-flex flex-column justify-content-center align-items-center">
+      <div
+        style="height: 100px; width: 100px; border: 8px solid #dedee5; border-radius: 50%; background-color: #d4d3dc; box-shadow: 0px 0px 0px 8px #f4f4f6;"
+        class="d-flex justify-content-center align-items-center">
+        <img height="60px" src="./images/icons/quality.png">
+      </div>
+      <h6 class="my-4 text-center">Clearer insight</h6>
+    </div>
+  </div>
+</div>
+<!-- END OF FEATURE ICONS -->
+
+<!-- ONE COLUMN SECTION-->
+<div class="container" style="margin: 3rem auto;">
+  <div class="row my-4">
+    <div class="col-lg-12 d-flex flex-column justify-content-center align-items-center">
+      <h2 class="text-center mt-3 display-4 text-weight-bold="
+        style="font-size: 3rem !important; padding-bottom: 2rem !important;">App Menu</h2>
+      <p class="text-center text-muted mb-4" style="font-weight: 600; font-size: 1.2rem; line-height: 200% !important;">
+        The App Menu is the main attraction of the Hue backend theme. It
+        has a <span
+          style="color: #2a3042 !important; border-bottom: 2px solid #D40054 !important; padding-bottom: 0.5rem !important;">fully
+          responsive layout</span> with a new highlighted color combination and a more modern interface for all
+        applications. Moreover, the Hue backend theme improves your experience with Odoo, providing you with a <span
+          style="color: #2a3042 !important; border-bottom: 2px solid #D40054 !important; padding-bottom: 0.5rem !important;">fully
+          customizable</span> background image, Navbar color, and many more.</p>
+      <div class="row">
+        <div class="col-lg-12">
+          <img height="600px" width="auto" src="./images/app_bar.png" class="img img-fluid rounded">
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<!-- END OF ONE COLUMN SECTION-->
+
+<!-- TWO COLUMN SECTION-->
+<div class="container" style="margin: 6rem auto;">
+  <div class="row my-4">
+    <div class="col-lg-6 d-flex flex-column justify-content-center align-items-start">
+      <span class="font-weight-bold" style="letter-spacing: 2px; text-transform: uppercase; color: #D40054 ">Theme
+        Settings</span>
+      <h2 class="mt-3">Hue Backend Theme Settings</h2>
+      <p class="text-muted mb-4" style="font-weight: 600; font-size: 1.2rem; height: 100px !important;">To improve your
+        experience with Odoo the Hue backend theme provides a fully
+        configurable theme settings menu.</p>
+      <img src="./images/customization_settings.png" class="img img-fluid deep-2 rounded">
+    </div>
+
+    <div class="col-lg-6 d-flex flex-column justify-content-center align-items-start">
+      <span class="font-weight-bold" style="letter-spacing: 2px; text-transform: uppercase; color: #D40054">Custom
+        AppBar</span>
+      <h2 class="mt-3">App Bar</h2>
+      <p class="text-muted mb-4" style="font-weight: 600; font-size: 1.2rem; height: 100px !important;">Easily accessible
+        sidebar where it reveals the sidebar menu on just a click.
+        Moreover, its also
+        fully customisable with Hue backend theme.</p>
+      <img src="./images/app_bar.png" class="img img-fluid deep-2  rounded">
+    </div>
+
+  </div>
+</div>
+<!-- END OF TWO COLUMN SECTION-->
+
+<!-- RESPONSIVE SECTION-->
+<div class="container" style="margin: 6rem auto;">
+  <div class="row my-4">
+    <div class="col-lg-5 d-flex flex-column justify-content-center align-items-start">
+      <img src="./images/responsive-backend-theme.png" class="img img-fluid rounded">
+    </div>
+    <div class="col-lg-7 d-flex flex-column justify-content-center">
+      <span class="font-weight-bold" style="letter-spacing: 2px; text-transform: uppercase; color: #D40054">Responsive
+        Layout</span>
+      <h2 class="mt-3">Truly Responsive</h2>
+      <p class="text-muted mb-4" style="font-weight: 600; font-size: 1.2rem;">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>
+    </div>
+  </div>
+
+</div>
+<!-- END OF RESPONSIVE SECTION-->
+
+<!-- TWO COLUMN SECTION-->
+<div class="container" style="margin: 6rem auto;">
+  <div class="row my-4">
+    <div class="col-lg-6 d-flex flex-column justify-content-center align-items-start">
+      <span class="font-weight-bold" style="letter-spacing: 2px; text-transform: uppercase; color: #D40054">Custom
+        Kanban View</span>
+      <h2 class="mt-3">Kanban view</h2>
+      <p class="text-muted mb-4" style="font-weight: 600; font-size: 1.2rem; height: 100px !important;">Hue Backend
+        Theme gives a colorful & elegant kanban view, and it's fully
+        customizable with this theme.</p>
+      <img src="./images/kanban_view.png" class="img img-fluid deep-2 rounded">
+    </div>
+
+    <div class="col-lg-6 d-flex flex-column justify-content-center align-items-start">
+      <span class="font-weight-bold" style="letter-spacing: 2px; text-transform: uppercase; color: #D40054;">Search
+        Option</span>
+      <h2 class="mt-3">Advanced Searching for App Menus</h2>
+      <p class="text-muted mb-4" style="font-weight: 600; font-size: 1.2rem; height: 100px !important;">Hue Backend
+        Theme gives a more complex and powerful search than standard
+        search, providing search options like enterprise edition.</p>
+      <img src="./images/setting_search.png" class="img img-fluid deep-2 rounded">
+    </div>
+
+  </div>
+</div>
+
+<!-- TWO COLUMN SECTION-->
+<div class="container" style="margin: 6rem auto;">
+  <span>
+  </span>
+  <div class="row my-4">
+    <div class="col-lg-6 d-flex flex-column justify-content-center align-items-start">
+      <span class="font-weight-bold" style="letter-spacing: 2px; text-transform: uppercase; color: #D40054">
+        Form View</span>
+      <h2 class="mt-3">Custom Form view</h2>
+      <p class="text-muted mb-4" style="font-weight: 600; font-size: 1.2rem; height: 120px !important;">Hue Backend
+        theme provides a fully modified and colorful form view with the
+        full view
+        experience.</p>
+      <img src="./images/custom_form_view.png" class="img img-fluid deep-2 rounded">
+    </div>
+
+    <div class="col-lg-6 d-flex flex-column justify-content-center align-items-start">
+      <span class="font-weight-bold" style="letter-spacing: 2px; text-transform: uppercase; color: #D40054">Vibrant
+        ui</span>
+      <h2 class="mt-3">Attractive Customizable User Interface</h2>
+      <p class="text-muted mb-4" style="font-weight: 600; font-size: 1.2rem; height: 80px !important;">It provides fully
+        attractive, and an elegant User Interface which is completely
+        customizable.</p>
+      <img src="./images/customizable_ui.png" class="img img-fluid deep-2 rounded">
+    </div>
+
+  </div>
+</div>
+<!-- END OF TWO COLUMN SECTION-->
+
+<!-- OUR SERVICES -->
+<section class="container" style="margin-top: 6rem !important;">
+  <div class="row">
+    <div class="col-lg-12 d-flex flex-column justify-content-center align-items-center">
+      <h2 class="text-center"
+        style="font-family: Montserrat, 'sans-serif'; color: #000 !important; font-weight: 800 !important; font-size: 2rem !important; width: 80%;">
+        Our Services</h2>
+      <p class="text-center"
+        style="color: #1a1a1a !important; font-weight: 300 !important; font-size: 1.3rem !important;">
+        We provide following services</p>
+    </div>
+
+    <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+      <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+        style="background-color: #1dd1a1 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+        <img src="assets/icons/cogs.png" class="img-responsive" height="48px" width="48px">
+      </div>
+      <h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">Odoo
+        Customization</h6>
+    </div>
+
+    <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+      <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+        style="background-color: #ff6b6b !important; border-radius: 15px !important; height: 80px; width: 80px;">
+        <img src="assets/icons/wrench.png" class="img-responsive" height="48px" width="48px">
+      </div>
+      <h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">Odoo
+        Implementation</h6>
+    </div>
+
+    <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+      <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+        style="background-color: #6462CD !important; border-radius: 15px !important; height: 80px; width: 80px;">
+        <img src="assets/icons/lifebuoy.png" class="img-responsive" height="48px" width="48px">
+      </div>
+      <h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">Odoo
+        Support</h6>
+    </div>
+
+
+    <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+      <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+        style="background-color: #ffa801 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+        <img src="assets/icons/user.png" class="img-responsive" height="48px" width="48px">
+      </div>
+      <h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">Hire
+        Odoo
+        Developer</h6>
+    </div>
+
+    <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+      <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+        style="background-color: #54a0ff  !important; border-radius: 15px !important; height: 80px; width: 80px;">
+        <img src="assets/icons/puzzle.png" class="img-responsive" height="48px" width="48px">
+      </div>
+      <h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">Odoo
+        Integration</h6>
+    </div>
+
+    <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+      <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+        style="background-color: #6d7680 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+        <img src="assets/icons/update.png" class="img-responsive" height="48px" width="48px">
+      </div>
+      <h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">Odoo
+        Migration</h6>
+    </div>
+
+
+    <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+      <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+        style="background-color: #786fa6 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+        <img src="assets/icons/consultation.png" class="img-responsive" height="48px" width="48px">
+      </div>
+      <h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">Odoo
+        Consultancy</h6>
+    </div>
+
+    <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+      <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+        style="background-color: #f8a5c2 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+        <img src="assets/icons/training.png" class="img-responsive" height="48px" width="48px">
+      </div>
+      <h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">Odoo
+        Implementation</h6>
+    </div>
+
+    <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+      <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+        style="background-color: #e6be26 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+        <img src="assets/icons/license.png" class="img-responsive" height="48px" width="48px">
+      </div>
+      <h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">Odoo
+        Licensing Consultancy</h6>
+    </div>
+  </div>
+</section>
+<!-- END OF OUR SERVICES -->
+
+<!-- OUR INDUSTRIES -->
+<section class="container" style="margin-top: 6rem !important;">
+  <div class="row">
+    <div class="col-lg-12 d-flex flex-column justify-content-center align-items-center">
+      <h2 class="text-center"
+        style="font-family: Montserrat, 'sans-serif'; color: #000 !important; font-weight: 800 !important; font-size: 2rem !important; width: 80%;">
+        Our Industries</h2>
+      <p class="text-center"
+        style="color: #1a1a1a !important; font-weight: 300 !important; font-size: 1.3rem !important;">
+        Our industry specifics and process segments to solve your complex business barriers.</p>
+    </div>
+
+    <div class="col-lg-3">
+      <div class="my-4 d-flex flex-column justify-content-center"
+        style="background-color: #f6f8f9 !important; border-radius: 10px; padding: 2rem !important; height: 250px !important;">
+        <img src="./assets/icons/trading-black.png" class="img-responsive mb-3" height="48px" width="48px">
+        <h5 style="color: #000 !important; font-weight: bold;">
+          Trading
+        </h5>
+        <p style="font-size: 0.9rem !important;">Easily procure
+          and
+          sell your products</p>
+      </div>
+    </div>
+
+    <div class="col-lg-3">
+      <div class="my-4 d-flex flex-column justify-content-center"
+        style="background-color: #f6f8f9 !important; border-radius: 10px; padding: 2rem !important; height: 250px !important;">
+        <img src="./assets/icons/pos-black.png" class="img-responsive mb-3" height="48px" width="48px">
+        <h5 style="color: #000 !important; font-weight: bold;">
+          POS
+        </h5>
+        <p style="font-size: 0.9rem !important;">Easy
+          configuration
+          and convivial experience</p>
+      </div>
+    </div>
+
+    <div class="col-lg-3">
+      <div class="my-4 d-flex flex-column justify-content-center"
+        style="background-color: #f6f8f9 !important; border-radius: 10px; padding: 2rem !important; height: 250px !important;">
+        <img src="./assets/icons/education-black.png" class="img-responsive mb-3" height="48px" width="48px">
+        <h5 style="color: #000 !important; font-weight: bold;">
+          Education
+        </h5>
+        <p style="font-size: 0.9rem !important;">A platform for
+          educational management</p>
+      </div>
+    </div>
+
+    <div class="col-lg-3">
+      <div class="my-4 d-flex flex-column justify-content-center"
+        style="background-color: #f6f8f9 !important; border-radius: 10px; padding: 2rem !important; height: 250px !important;">
+        <img src="./assets/icons/manufacturing-black.png" class="img-responsive mb-3" height="48px" width="48px">
+        <h5 style="color: #000 !important; font-weight: bold;">
+          Manufacturing
+        </h5>
+        <p style="font-size: 0.9rem !important;">Plan, track and
+          schedule your operations</p>
+      </div>
+    </div>
+
+    <div class="col-lg-3">
+      <div class="my-4 d-flex flex-column justify-content-center"
+        style="background-color: #f6f8f9 !important; border-radius: 10px; padding: 2rem !important; height: 250px !important;">
+        <img src="./assets/icons/ecom-black.png" class="img-responsive mb-3" height="48px" width="48px">
+        <h5 style="color: #000 !important; font-weight: bold;">
+          E-commerce &amp; Website
+        </h5>
+        <p style="font-size: 0.9rem !important;">Mobile
+          friendly,
+          awe-inspiring product pages</p>
+      </div>
+    </div>
+
+    <div class="col-lg-3">
+      <div class="my-4 d-flex flex-column justify-content-center"
+        style="background-color: #f6f8f9 !important; border-radius: 10px; padding: 2rem !important; height: 250px !important;">
+        <img src="./assets/icons/service-black.png" class="img-responsive mb-3" height="48px" width="48px">
+        <h5 style="color: #000 !important; font-weight: bold;">
+          Service Management
+        </h5>
+        <p style="font-size: 0.9rem !important;">Keep track of
+          services and invoice</p>
+      </div>
+    </div>
+
+    <div class="col-lg-3">
+      <div class="my-4 d-flex flex-column justify-content-center"
+        style="background-color: #f6f8f9 !important; border-radius: 10px; padding: 2rem !important; height: 250px !important;">
+        <img src="./assets/icons/restaurant-black.png" class="img-responsive mb-3" height="48px" width="48px">
+        <h5 style="color: #000 !important; font-weight: bold;">
+          Restaurant
+        </h5>
+        <p style="font-size: 0.9rem !important;">Run your bar or
+          restaurant methodically</p>
+      </div>
+    </div>
+
+    <div class="col-lg-3">
+      <div class="my-4 d-flex flex-column justify-content-center"
+        style="background-color: #f6f8f9 !important; border-radius: 10px; padding: 2rem !important; height: 250px !important;">
+        <img src="./assets/icons/hotel-black.png" class="img-responsive mb-3" height="48px" width="48px">
+        <h5 style="color: #000 !important; font-weight: bold;">
+          Hotel Management
+        </h5>
+        <p style="font-size: 0.9rem !important;">An
+          all-inclusive
+          hotel management application</p>
+      </div>
+    </div>
+
+  </div>
+</section>
+
+<!-- END OF OUR INDUSTRIES -->
+
+<!-- FOOTER -->
+<!-- Footer Section -->
+<section class="container" style="margin: 5rem auto 2rem;">
+  <div class="row" style="max-width:1540px;">
+    <div class="col-lg-12 d-flex flex-column justify-content-center align-items-center">
+      <h2 class="text-center"
+        style="color: #000 !important; font-weight: 800 !important; font-size: 2rem !important; width: 80%;">
+        Need Help?</h2>
+      <p class="text-center"
+        style="color: #1a1a1a !important; font-weight: 300 !important; font-size: 1.3rem !important;">
+        Do you have any queries regarding our products &amp; services? Let us know.</p>
+    </div>
+  </div>
+
+  <!-- Contact Cards -->
+  <div class="row d-flex justify-content-center align-items-center" style="max-width:1540px; margin: 0 auto 2rem auto;">
+
+    <div class="col-lg-12" style="padding: 0rem 3rem 2rem; border-radius: 10px; margin-right: 3rem; ">
+
+      <div class="row mt-4">
+        <div class="col-lg-6">
+          <a href="mailto:odoo@cybrosys.com" target="_blank" class="btn btn-block mb-2 deep_hover"
+            style="text-decoration: none;  background-color: #4d4d4d; color: #FFF;  border-radius: 4px;"><i
+              class="fa fa-envelope mr-2"></i>odoo@cybrosys.com</a>
+        </div>
+        <div class="col-lg-6">
+          <a href="https://api.whatsapp.com/send?phone=918606827707" target="_blank"
+            class="btn btn-block mb-2 deep_hover"
+            style="text-decoration: none;  background-color: #25D366; color: #FFF;  border-radius: 4px;"><i
+              class="fa fa-whatsapp mr-2"></i>+91 86068 27707</a>
+        </div>
+      </div>
+    </div>
+
+  </div>
+  <!-- End of Contact Cards -->
+</section>
+<!-- Footer -->
+<section class="oe_container" style="padding: 2rem 3rem 1rem;">
+  <div class="row" style="max-width:1540px; margin: 0 auto; margin-right: 3rem; ">
+    <!-- Logo -->
+    <div class="col-lg-12 d-flex justify-content-center align-items-center" style="margin-top: 3rem;">
+      <img src="https://www.cybrosys.com/images/logo.png" width="200px" height="auto" />
+    </div>
+    <!-- End of Logo -->
+    <div class="col-lg-12">
+      <hr
+        style="margin-top: 3rem;background: linear-gradient(90deg, rgba(2,0,36,0) 0%, rgba(229,229,229,1) 33%, rgba(229,229,229,1) 58%, rgba(0,212,255,0) 100%); height: 2px; border-style: none;">
+      <!-- End of Footer Section -->
+    </div>
+  </div>
+</section>
+  <!-- END OF FOOTER -->

hue_backend_theme/static/src/components/app_menu/menu_order.css

@@ -0,0 +1,98 @@
+.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_main_navbar .dropdown-menu.show {
+    max-height: none !important;
+    min-width: 100vw;
+    min-height: 100vh;
+    overflow: auto;
+    margin-top: 0px;
+}
+.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;
+}
+.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;
+}

hue_backend_theme/static/src/components/app_menu/search_apps.js

@@ -0,0 +1,111 @@
+/** @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");
+const { onMounted } = owl;
+import { patch } from "@web/core/utils/patch";
+import { useSubEnv } from "@odoo/owl";
+
+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()
+        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 = $(".search-container");
+        this.$search_input = $(".search-input input");
+        this.$search_results = $(".search-results");
+        this.$app_menu = $(".app-menu");
+        this.$dropdown_menu = $(".dropdown-menu");
+    },
+    _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='web#action=" + result["actionID"] + "&menu_id=" + result["id"] + "'>" + result["name"] + "</a></p>"
+        })
+        this.$search_results.append(resultsHtml);
+    },
+})

hue_backend_theme/static/src/components/app_menu/side_menu.xml

@@ -0,0 +1,98 @@
+<templates id="template" xml:space="preserve">
+    <!--  Navbar  -->
+    <t t-inherit="web.NavBar.AppsMenu" t-inherit-mode="extension" owl="1">
+        <xpath expr="//Dropdown" position="replace">
+            <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">
+                        <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"
+                                       autocomplete="off"
+                                       placeholder="Search menus..."
+                                       class="form-control"/>
+                            </div>
+                        </div>
+                        <div class="search-results col-md-10 ml-auto mr-auto"/>
+                        <button class="fullscreen-close">
+                            <i class="fa fa-chevron-left"/>
+                        </button>
+                    </div>
+                    <div class="nav-container">
+                        <div class="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-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="data:image/png;base64,{{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="data:image/svg+xml;base64,{{app.webIconData}}"/>
+                                    <b class="a_app_menu_title"><t t-esc="app.name"/></b>
+                                </a>
+                            </t>
+                        </div>
+                    </div>
+                </div>
+            </li>
+        </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}&amp;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">
+                                <ErrorHandler onError="error => handleItemError(error, item)">
+                                    <t t-component="item.Component" t-props="item.props"/>
+                                </ErrorHandler>
+                            </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">
+                                <img class="sidebar_img" t-if="app.webIcon.includes('.png')" t-att-title="app.name"
+                                         t-attf-src="data:image/png;base64,{{app.webIconData}}"/>
+                                <img class="sidebar_img" t-if="app.webIcon.includes('.svg')" t-att-title="app.name"
+                                         t-attf-src="data:image/svg+xml;base64,{{app.webIconData}}"/>
+                                <b class="a_app_menu_title">
+                                    <t t-esc="app.name"/>
+                                </b>
+                                </a>
+                            </li>
+                        </t>
+                    </ul>
+                </div>
+            </div>
+        </xpath>
+    </t>
+</templates>

hue_backend_theme/static/src/layout/style/layout_colors.scss

@@ -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;
+}

hue_backend_theme/static/src/layout/style/layout_style.scss

@@ -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;
+    }
+}

hue_backend_theme/static/src/layout/style/login.scss

@@ -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;
+}

hue_backend_theme/static/src/layout/style/sidebar.scss

@@ -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;
+        margin-left: 5px !important;
+        height: 80px !important;
+        position: fixed;
+        background-color: var(--app-bar-accent) !important;
+        max-width: 80px;
+        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: 100%;
+    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;
+}

hue_backend_theme/views/layout_templates.xml

@@ -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&amp;display=swap" rel="stylesheet"/>
+        </xpath>
+    </template>
+</odoo>

hue_backend_theme/views/res_config_settings_views.xml

@@ -0,0 +1,86 @@
+<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">
+                            <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">
+                            <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">
+                            <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">
+                            <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">
+                            <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">
+                            <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">
+                            <label string="Primary Button Hover" for="primary_hover"/>
+                            <div class="text-muted">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </xpath>
+        </field>
+    </record>
+</odoo>