上传修改后的主题

spiffy_theme_backend/static/src/image/download.svg

@@ -0,0 +1 @@
+<svg  xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 10'><defs><style>.cls-1{opacity:0.3;}</style></defs><path class='cls-1' d='M2.68.82h0a.27.27,0,0,0-.36,0h0L.82,2.32a.27.27,0,0,0,0,.36.27.27,0,0,0,.36,0L2.25,1.6V9a.25.25,0,0,0,.5,0V1.6L3.82,2.68a.27.27,0,0,0,.36,0,.27.27,0,0,0,0-.36Z'/><path class='cls-1' d='M8.18,7.32a.27.27,0,0,0-.36,0L6.75,8.4V1a.25.25,0,0,0-.5,0V8.4L5.18,7.32a.25.25,0,0,0-.36.36l1.5,1.5a.27.27,0,0,0,.36,0l1.5-1.5A.27.27,0,0,0,8.18,7.32Z'/></svg>

spiffy_theme_backend/static/src/image/loader_1.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: none; display: block; shape-rendering: auto; animation-play-state: running; animation-delay: 0s;" width="200px" height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
+<circle cx="84" cy="50" r="10" fill="#399ddb" style="animation-play-state: running; animation-delay: 0s;">
+    <animate attributeName="r" repeatCount="indefinite" dur="0.25s" calcMode="spline" keyTimes="0;1" values="10;0" keySplines="0 0.5 0.5 1" begin="0s" style="animation-play-state: running; animation-delay: 0s;"></animate>
+    <animate attributeName="fill" repeatCount="indefinite" dur="1s" calcMode="discrete" keyTimes="0;0.25;0.5;0.75;1" values="#399ddb;#005488;#0078c2;#0085d7;#399ddb" begin="0s" style="animation-play-state: running; animation-delay: 0s;"></animate>
+</circle><circle cx="16" cy="50" r="10" fill="#399ddb" style="animation-play-state: running; animation-delay: 0s;">
+  <animate attributeName="r" repeatCount="indefinite" dur="1s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1" values="0;0;10;10;10" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="0s" style="animation-play-state: running; animation-delay: 0s;"></animate>
+  <animate attributeName="cx" repeatCount="indefinite" dur="1s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1" values="16;16;16;50;84" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="0s" style="animation-play-state: running; animation-delay: 0s;"></animate>
+</circle><circle cx="50" cy="50" r="10" fill="#0085d7" style="animation-play-state: running; animation-delay: 0s;">
+  <animate attributeName="r" repeatCount="indefinite" dur="1s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1" values="0;0;10;10;10" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="-0.25s" style="animation-play-state: running; animation-delay: 0s;"></animate>
+  <animate attributeName="cx" repeatCount="indefinite" dur="1s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1" values="16;16;16;50;84" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="-0.25s" style="animation-play-state: running; animation-delay: 0s;"></animate>
+</circle><circle cx="84" cy="50" r="10" fill="#0078c2" style="animation-play-state: running; animation-delay: 0s;">
+  <animate attributeName="r" repeatCount="indefinite" dur="1s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1" values="0;0;10;10;10" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="-0.5s" style="animation-play-state: running; animation-delay: 0s;"></animate>
+  <animate attributeName="cx" repeatCount="indefinite" dur="1s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1" values="16;16;16;50;84" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="-0.5s" style="animation-play-state: running; animation-delay: 0s;"></animate>
+</circle><circle cx="16" cy="50" r="10" fill="#005488" style="animation-play-state: running; animation-delay: 0s;">
+  <animate attributeName="r" repeatCount="indefinite" dur="1s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1" values="0;0;10;10;10" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="-0.75s" style="animation-play-state: running; animation-delay: 0s;"></animate>
+  <animate attributeName="cx" repeatCount="indefinite" dur="1s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1" values="16;16;16;50;84" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="-0.75s" style="animation-play-state: running; animation-delay: 0s;"></animate>
+</circle>
+<!-- [ldio] generated by https://loading.io/ --></svg>

spiffy_theme_backend/static/src/js/SpiffyPageTitle.js

@@ -0,0 +1,18 @@
+odoo.define('spiffy_theme_backend.SpiffyPageTitle', function (require) {
+"use strict";
+
+    var ajax = require('web.ajax');
+    var { WebClient } = require("@web/webclient/webclient");
+    var { patch } = require("web.utils");
+
+    patch(WebClient.prototype, "spiffy_theme_backend.SpiffyPageTitle", {
+        setup() {
+            this._super();
+            var self = this
+            ajax.rpc('/get/tab/title/').then(function(rec) {
+                var new_title = rec
+                self.title.setParts({ zopenerp: new_title })
+            })
+        },
+    });
+});

spiffy_theme_backend/static/src/js/SwitchCompanyMenu.js

@@ -0,0 +1,32 @@
+/** @odoo-module **/
+
+var config = require('web.config');
+var core = require('web.core');
+var session = require('@web/session');
+var SystrayMenu = require('web.SystrayMenu');
+var Widget = require('web.Widget');
+var { patch } = require("web.utils");
+var { SwitchCompanyMenu } = require("@web/webclient/switch_company_menu/switch_company_menu");
+var { registry } = require("@web/core/registry");
+
+var _t = core._t;
+
+patch(SwitchCompanyMenu.prototype, "spiffy_theme_backend.SwitchCompanyMenu", {
+    setup() {
+        this._super();
+        this.isDebug = config.isDebug();
+        this.isAssets = config.isDebug("assets");
+        this.isTests = config.isDebug("tests");
+    },
+});
+
+// show company menu even if company is count is 1 
+const systrayItemSwitchCompanyMenu = {
+    Component: SwitchCompanyMenu,
+    isDisplayed(env) {
+        const { availableCompanies } = env.services.company;
+        return Object.keys(availableCompanies).length > 0;
+    },
+};
+
+registry.category("systray").add("SwitchCompanyMenu", systrayItemSwitchCompanyMenu, { sequence: 1, force: true });

spiffy_theme_backend/static/src/js/apps_menu.js

@@ -0,0 +1,407 @@
+/** @odoo-module **/
+import {fuzzyLookup} from "@web/core/utils/search";
+var core = require('web.core');
+var qweb = core.qweb;
+var ajax = require('web.ajax');
+var { NavBar } = require("@web/webclient/navbar/navbar");
+var { patch } = require("web.utils");
+const { useListener } = require("@web/core/utils/hooks");
+const {useRef, useState } = owl;
+import { browser } from "@web/core/browser/browser";
+import body_color from "spiffy_theme_backend.MenuJs";
+
+function AppDrawerfindNames(memo, menu) {
+    if (menu.action) {
+        var key = menu.parent_id ? menu.parent_id[1] + "/" : "";
+        memo[key + menu.name] = menu;
+    }
+    if (menu.children) {
+        _.reduce(menu.children, AppDrawerfindNames, memo);
+    }
+    return memo;
+}
+
+function findNames(memo, menu) {
+    if (menu.actionID) {
+        memo[menu.name.trim()] = menu;
+    }
+    if (menu.childrenTree) {
+        const innerMemo = _.reduce(menu.childrenTree, findNames, {});
+        for (const innerKey in innerMemo) {
+            memo[menu.name.trim() + " / " + innerKey] = innerMemo[innerKey];
+        }
+    }
+    return memo;
+}
+
+export function divertColorItem(env) {
+    const route = "/primary_color/divertable_color";
+    return {
+        type: "item",
+        id: "divert.account",
+        description: env._t("Switch/Add Account"),
+        href: `${browser.location.origin}${route}`,
+        callback: () => {
+            body_color.methods.divertColor();
+        },
+        sequence: 70,
+    };
+}
+
+patch(NavBar.prototype, "spiffy_theme_backend.appsMenuJs", {
+    setup() {
+        this._super();
+        
+        var self = this;
+        $(document).on("keydown", "#app_menu_search", function(ev){self._AppsearchResultsNavigate(ev)});
+        $(document).on("input", "#app_menu_search", function(ev){self._searchAppDrawerTimeout(ev)});
+        $(document).on("click", "#search_result .search_list_content a", function(ev){self._ToggleDrawer(ev)});
+        $(document).on("click", ".fav_app_select", function(ev){self._AddRemoveFavApps(ev)});
+        $(document).on("click", ".appdrawer_section .app-box .o_app", function(ev){self._ToggleDrawer(ev)});
+        
+        var menuData = this.menuService.getApps()
+
+        this._search_def = false;
+
+        this._GetFavouriteApps()
+        // this._AppdrawerIcons()
+        this._FavouriteAppsIsland()
+
+        this.state = useState({
+            results: [],
+            offset: 0,
+            hasResults: false,
+        });
+
+        this.searchBarInput = useRef("SearchBarInput");
+        this._drawersearchableMenus = [];
+        for (const menu of this.menuService.getApps()) {
+            Object.assign(
+                this._drawersearchableMenus,
+                _.reduce([this.menuService.getMenuAsTree(menu.id)], findNames, {})
+            );
+        }
+        $('.o_main_navbar').removeClass('d-none')
+
+        $('.favorite_apps_section').scroll(function(){
+            if ($('.favorite_apps_section').scrollTop() > 20) {
+                $('.favorite_apps_section').css( { height: `calc(100vh - ${sidebar_systray_height}px)` } );
+            } else {
+                $('.favorite_apps_section').css( { height: `calc(100vh - ${sidebar_systray_height}px)` } );
+            }
+        });
+    },
+
+    _ToggleDrawer: function (ev) {
+        $('.o_main_navbar').toggleClass('appdrawer-toggle')
+        $('.appdrawer_section').toggleClass('toggle')
+        $('.o_app_drawer a').toggleClass('toggle')
+
+        // reset app drawer search details on drawer close
+        if (!$('.appdrawer_section').hasClass('toggle')) {
+            $("input[id='app_menu_search']").val("")
+            $(".appdrawer_section #search_result").empty()
+            $('.appdrawer_section .apps-list .row').removeClass('d-none');
+            $('#searched_main_apps').empty().addClass('d-none').removeClass('d-flex');
+        }
+    },
+
+    _FavouriteAppsIsland: function (ev){
+        if (this.favappsdata) {
+            var rec = this.favappsdata
+            if (rec.app_list.length) {
+                $('.fav_app_island .fav_apps').empty();
+                $.each(rec.app_list, function( index, value ) {
+                    if (value['web_icon'] != false){
+                        var web_icon_ext = value['web_icon'].split('/icon.')[1]
+                        var web_svg_src = value['web_icon'].replace(',', '/')
+                    }
+                    else {
+                        var web_icon_ext = value['web_icon'].toString()
+                        var web_svg_src = value['web_icon'].toString()
+                    }
+                    var favapps = $(qweb.render("FavoriteApps", {
+                        app_name:value['name'],
+                        app_id:value['app_id'],
+                        app_xmlid:value['app_xmlid'],
+                        app_actionid:value['app_actionid'],
+                        use_icon:value['use_icon'],
+                        icon_class_name:value['icon_class_name'],
+                        icon_img:value['icon_img'],
+                        web_icon: value['web_icon'],
+                        web_icon_data:value['web_icon_data'],
+                        web_icon_ext: web_icon_ext,
+                        web_svg_src: web_svg_src,
+                    }))
+                    $('.fav_app_island .fav_apps').append(favapps)
+                });
+                $('.fav_app_island').removeClass('d-none')
+            } else {
+                $('.fav_app_island').addClass('d-none')
+            }
+        }
+    },
+
+    _GetFavouriteApps: function() {
+        var apps = this.menuService.getApps()
+        var self = this
+        if (this.favappsdata) {
+            var rec = this.favappsdata
+            $.each(rec.app_list, function( index, value ) {
+                $.each(apps, function( ind, val ) {
+                    if (value['app_id'] == val.id) {
+                        var target = ".o_app[data-menu-id="+val.id+"]";
+                        var $target = $(target);
+                        $target.parent().find('.fav_app_select .ri').addClass('active');
+                    }
+                });
+            });
+        } else {
+            ajax.rpc('/get-favorite-apps').then(function(rec) {
+                if (rec) {
+                    self.favappsdata = rec
+                    $.each(rec.app_list, function( index, value ) {
+                        $.each(apps, function( ind, val ) {
+                            if (value['app_id'] == val.id) {
+                                var target = ".o_app[data-menu-id="+val.id+"]";
+                                var $target = $(target);
+                                $target.parent().find('.fav_app_select .ri').addClass('active');
+                            }
+                        });
+                    });
+                    self._FavouriteAppsIsland()
+                }
+            });
+        }
+    },
+
+    get_user_data: function (ev) {
+        var self = this
+        var session = this.getSession();
+        var $avatar = $('.user_image img');
+        var avatar_src = session.url('/web/image', {
+            model:'res.users',
+            field: 'image_128',
+            id: session.uid,
+        });
+        var value = {
+            'avatar_src': avatar_src,
+            'user_id': session.uid,
+            'user_name': session.name,
+            // 'greeting': greeting,
+        }
+        $avatar.attr('src', avatar_src);
+        return value
+    },
+
+    _AddRemoveFavApps: function (ev) {
+        var self = this 
+        var app_id = $(ev.target).parent().find('.o_app').attr('data-menu-id')
+        var app_name = $(ev.target).parent().find('.app-name').text()
+        if ($(ev.target).find('.ri.active').length) {
+            ajax.jsonRpc('/remove-user-fav-apps','call', {
+                'app_id':app_id,
+            }).then(function(rec) {
+                $(ev.target).find('.ri').removeClass('active');
+                self._FavouriteAppsIsland()
+            });
+        } else {
+            ajax.jsonRpc('/update-user-fav-apps','call', {
+                'app_name':app_name,
+                'app_id':app_id,
+            }).then(function(rec) {
+                $(ev.target).find('.ri').addClass('active');
+                self._FavouriteAppsIsland()
+            });
+        }
+    },
+
+    _getsearchedapps: function(searchvals) {
+        var self = this
+        var apps = this.menuService.getApps()
+        if (searchvals === "") {
+            $('#searched_main_apps').empty().addClass('d-none').removeClass('d-flex');
+            return;
+        }
+        $('#searched_main_apps').empty().addClass('d-flex').removeClass('d-none');
+        $.each(apps, function( index, value ) {
+            if(value['name'].toLowerCase().indexOf(searchvals.toLowerCase()) != -1){
+                var searchapps = $(qweb.render("SearchedApps", {
+                    app_name:value['name'],
+                    app_id:value['menuID'],
+                    app_xmlid:value['xmlID'],
+                    app_actionid:value['actionID'],
+                }))
+                if (value['use_icon']) {
+                    if (value['icon_class_name']) {
+                        var icon_span = "<span class='ri "+value['icon_class_name']+"'/>"
+                        $(searchapps).find('.app-image').append($(icon_span))
+                    } else if (value['icon_img']) {
+                        var icon_image = "<img class='img img-fluid' src='/web/image/ir.ui.menu/"+value['id']+"/icon_img' />"
+                        $(searchapps).find('.app-image').append($(icon_image))
+                    } else if (value['webIconData'].toString() === 'false') {
+                        var icon_image = "<img class='img img-fluid' src='/spiffy_theme_backend/static/description/bizople-icon.png' />"
+                        $(searchapps).find('.app-image').append($(icon_image))
+                    } else {
+                        var icon_image = "<img class='img img-fluid use_icon' src='/web/image/ir.ui.menu/"+value['id']+"/web_icon_data' />"
+                        $(searchapps).find('.app-image').append($(icon_image))
+                    }
+                } else {
+                    if (value['icon_img']) {
+                        var icon_image = "<img class='img img-fluid' src='/web/image/ir.ui.menu/"+value['id']+"/icon_img' />"
+                        $(searchapps).find('.app-image').append($(icon_image))
+                    } else if (value['webIconData'].toString() === 'false') {
+                        var icon_image = "<img class='img img-fluid' src='/spiffy_theme_backend/static/description/bizople-icon.png' />"
+                        $(searchapps).find('.app-image').append($(icon_image))
+                    } else {
+                        var icon_image = "<img class='img img-fluid else' src='/web/image/ir.ui.menu/"+value['id']+"/web_icon_data' />"
+                        $(searchapps).find('.app-image').append($(icon_image))
+                    }
+                }
+                $('.apps-list #searched_main_apps').append(searchapps);
+            }
+        });
+        this._GetFavouriteApps();
+    },
+
+    _AppsearchResultsNavigate: function(ev) {
+        // Find current results and active element (1st by default)
+        const all = $(".appdrawer_section #search_result").find(".search_list_content"),
+            pre_focused = all.filter(".navigate_active") || $(all[0]);
+        let offset = all.index(pre_focused),
+            key = ev.key;
+        // Keyboard navigation only supports search results
+        if (!all.length) {
+            return;
+        }
+        // Transform tab presses in arrow presses
+        if (key === "Tab") {
+            ev.preventDefault();
+            key = ev.shiftKey ? "ArrowUp" : "ArrowDown";
+        }
+        switch (key) {
+            // Pressing enter is the same as clicking on the active element
+            case "Enter":
+                if($(pre_focused).length){
+                    $(pre_focused).find('.autoComplete_highlighted')[0].click();
+                    // $('.o_app_drawer .close_fav_app_btn')[0].click();
+                }
+                break;
+            // Navigate up or down
+            case "ArrowUp":
+                offset--;
+                break;
+            case "ArrowDown":
+                offset++;
+                break;
+            default:
+                // Other keys are useless in this event
+                return;
+        }
+        // Allow looping on results
+        if (offset < 0) {
+            offset = all.length + offset;
+        } else if (offset >= all.length) {
+            offset -= all.length;
+        }
+        // Switch active element
+        const new_focused = $(all[offset]);
+        pre_focused.removeClass("navigate_active");
+        new_focused.addClass("navigate_active");
+        $(".appdrawer_section #search_result").scrollTo(new_focused, {
+            offset: {
+                top: $(".appdrawer_section #search_result").height() * -0.5,
+            },
+        });
+    },
+
+    _menuInfo(key) {
+        return this._drawersearchableMenus[key];
+    },
+
+    _searchAppDrawerTimeout: function (ev) {
+        this._search_def = new Promise((resolve) => {
+            setTimeout(resolve, 100);
+        });
+        this._search_def.then(this._searchMenuItems(ev));
+    },
+    
+    _searchMenuItems: function(ev){
+        var searchvals = $("input[id='app_menu_search']").val()
+        this._getsearchedapps(searchvals);
+        $(".appdrawer_section .apps-list .row").toggleClass('d-none',Boolean(searchvals.length));
+        if (searchvals === "") {
+            $(".appdrawer_section #search_result").empty();
+            $(".appdrawer_section #searched_main_apps").empty().removeClass('d-flex').addClass('d-none');
+            return;
+        }
+        const query = searchvals;
+        this.state.hasResults = query !== "";
+        var results = this.state.hasResults
+            ? fuzzyLookup(searchvals, _.keys(this._drawersearchableMenus), (k) => k)
+            : [];
+        $(".appdrawer_section #search_result").html(
+            core.qweb.render("spiffy_theme_backend.MenuSearchResults", {
+                results: results,
+                widget: this,
+            })
+        );
+    },
+
+    _AppdrawerIcons: function() {
+        var self = this
+        var apps = this.menuService.getApps()
+        var rec_ids = []
+        apps.map(app => rec_ids.push(app.id))
+        ajax.jsonRpc('/get/irmenu/icondata','call', {
+            'menu_ids':rec_ids,
+        }).then(function(rec) {
+            $.each(apps, function( key, value ) {
+                var target_tag = '.appdrawer_section a.o_app[data-menu-id='+value.id+']'
+                var $tagtarget = $(target_tag)
+                $tagtarget.find('.app-image').empty()
+
+                var current_record = rec[value.id][0]
+                value.id = current_record.id
+                value.use_icon = current_record.use_icon
+                value.icon_class_name = current_record.icon_class_name
+                value.icon_img = current_record.icon_img
+
+                if (current_record.use_icon) {
+                    if (current_record.icon_class_name) {
+                        var icon_image = "<span class='ri "+current_record.icon_class_name+"'/>"
+                    } else if (current_record.icon_img) {
+                        var icon_image = "<img class='img img-fluid' src='/web/image/ir.ui.menu/"+current_record.id+"/icon_img' />"
+                    } else if (current_record.web_icon != false) {
+                        var icon_data = current_record.web_icon.split('/icon.')
+                        if (icon_data[1] == 'svg'){
+                            var web_svg_icon = current_record.web_icon.replace(',', '/')
+                            var icon_image = "<img class='img img-fluid' src='"+web_svg_icon+"' />"
+                        } else {
+                            var icon_image = "<img class='img img-fluid' src='data:image/"+icon_data[1]+";base64,"+current_record.web_icon_data+"' />"
+                        }
+                    } else{
+                        var icon_image = "<img class='img img-fluid' src='/spiffy_theme_backend/static/description/bizople-icon.png' />"
+                        }
+                    $tagtarget.find('.app-image').append($(icon_image))
+                } else {
+                    if (current_record.icon_img) {
+                        var icon_image = "<img class='img img-fluid' src='/web/image/ir.ui.menu/"+current_record.id+"/icon_img' />"
+                    } else if (current_record.web_icon != false){
+                        var icon_data = current_record.web_icon.split('/icon.')
+                        if (icon_data[1] == 'svg'){
+                            var web_svg_icon = current_record.web_icon.replace(',', '/')
+                            var icon_image = "<img class='img img-fluid' src='"+web_svg_icon+"' />"
+                        } else {
+                            var icon_image = "<img class='img img-fluid' src='data:image/"+icon_data[1]+";base64,"+current_record.web_icon_data+"' />"
+                        }
+                    } else{
+                        var icon_image = "<img class='img img-fluid' src='/spiffy_theme_backend/static/description/bizople-icon.png' />"
+                    }
+                    $tagtarget.find('.app-image').append($(icon_image))
+                }
+            })
+            
+        })
+    },
+});

spiffy_theme_backend/static/src/js/color_pallet.js

@@ -0,0 +1,86 @@
+odoo.define('spiffy_theme_backend.ColorPalletJS', function (require) {
+    'use strict';
+    var Widget = require('web.Widget')
+    var ColorPallet = Widget.extend({
+        init: function (parent) {
+            this._super(parent);
+        },
+        pallet_1: function() {
+            $(':root').css({
+                "--light-theme-primary-color": "#1ea8e7",
+                "--light-theme-primary-text-color": "#ffffff",
+                "--primary-rgba": '#1ea8e7b3',
+            });
+        },
+        pallet_2: function() {
+            $(':root').css({
+                "--light-theme-primary-color": "#75ab38",
+                "--light-theme-primary-text-color": "#ffffff",
+                "--primary-rgba": '#75ab38b3',
+            });
+        },
+        pallet_3: function() {
+            $(':root').css({
+                "--light-theme-primary-color": "#ed6789",
+                "--light-theme-primary-text-color": "#ffffff",
+                "--primary-rgba": '#ed6789b3',
+            });
+        },
+        pallet_4: function() {
+            $(':root').css({
+                "--light-theme-primary-color": "#a772cb",
+                "--light-theme-primary-text-color": "#ffffff",
+                "--primary-rgba": '#a772cbb3',
+            });
+        },
+        pallet_5: function() {
+            $(':root').css({
+                "--light-theme-primary-color": "#eb5858",
+                "--light-theme-primary-text-color": "#ffffff",
+                "--primary-rgba": '#eb5858b3',
+            });
+        },
+        pallet_6: function() {
+            $(':root').css({
+                "--light-theme-primary-color": "#8c6f46",
+                "--light-theme-primary-text-color": "#ffffff",
+                "--primary-rgba": '#8c6f46b3',
+            });
+        },
+        pallet_7: function() {
+            $(':root').css({
+                "--light-theme-primary-color": "#007a5a",
+                "--light-theme-primary-text-color": "#ffffff",
+                "--primary-rgba": '#007a5ab3',
+            });
+        },
+        pallet_8: function() {
+            $(':root').css({
+                "--light-theme-primary-color": "#cc8631",
+                "--light-theme-primary-text-color": "#ffffff",
+                "--primary-rgba": '#cc8631b3',
+            });
+        },
+        pallet_9: function() {
+            $(':root').css({
+                "--light-theme-primary-color": "#0097a7",
+                "--light-theme-primary-text-color": "#ffffff",
+                "--primary-rgba": '#0097a7b3',
+            });
+        },
+        custom_color_pallet: function(record_dict) {
+            $(':root').css({
+                "--light-theme-primary-color": record_dict.light_primary_bg_color,
+                "--light-theme-primary-text-color": record_dict.light_primary_text_color,
+                "--primary-rgba": record_dict.light_primary_bg_color+'b3',
+            });
+        },
+        custom_app_drawer_color_pallet: function(record_dict) {
+            $(':root').css({
+                "--app-drawer-custom-bg-color": record_dict.appdrawer_custom_bg_color,
+                "--app-drawer-custom-text-color": record_dict.appdrawer_custom_text_color,
+            });
+        },
+    });
+    return ColorPallet
+});

spiffy_theme_backend/static/src/js/dialog.js

@@ -0,0 +1,33 @@
+/** @odoo-module **/
+
+import { Dialog } from "@web/core/dialog/dialog";
+import { useEffect } from "@odoo/owl";
+var { patch } = require("web.utils");
+
+patch(Dialog.prototype, "spiffy_theme_backend.DialogJS", {
+    setup() {
+        this._super();
+        // MAKE ANY MODAL DRAGGABLE
+        useEffect(
+            (el) => {
+                if (el) {
+                    let $modal = $(el);
+                    $($modal).find('.modal-dialog').draggable({
+                        handle: ".modal-header",
+                    });
+                    var width = $modal.find('.modal-content').width();
+                    var height = $modal.find('.modal-content').height();
+                    var backdrop = $modal.attr('data-backdrop');
+                    if (backdrop){
+                        $('body.modal-open').attr('data-backdrop', backdrop);
+                    }
+                    $modal.find('.modal-content').resizable({
+                        minWidth: width,
+                        minHeight: height,
+                    });
+                }
+            },
+            () => [this.modalRef.el]
+        );
+    }
+});

spiffy_theme_backend/static/src/js/flip_min.js

@@ -0,0 +1 @@
+$(".modal").each(function(l){$(this).on("show.bs.modal",function(l){var o=$(this).attr("data-easein");"shake"==o?$(".modal-dialog").velocity("callout."+o):"pulse"==o?$(".modal-dialog").velocity("callout."+o):"tada"==o?$(".modal-dialog").velocity("callout."+o):"flash"==o?$(".modal-dialog").velocity("callout."+o):"bounce"==o?$(".modal-dialog").velocity("callout."+o):"swing"==o?$(".modal-dialog").velocity("callout."+o):$(".modal-dialog").velocity("transition."+o)})});

spiffy_theme_backend/static/src/js/form_controller.js

@@ -0,0 +1,48 @@
+/** @odoo-module **/
+var { patch } = require("web.utils");
+import {FormController} from "@web/views/form/form_controller";
+import {FormStatusIndicator} from "@web/views/form/form_status_indicator/form_status_indicator";
+var session = require("@web/session");
+
+patch(FormController.prototype, "spiffy_theme_backend.SpiffyFormController", {
+    async onPagerUpdate({ offset, resIds }) {
+        await this.model.root.askChanges(); // ensures that isDirty is correct
+        let canProceed = true;
+        if (this.model.root.isDirty) {
+            if ($('body').hasClass('prevent_auto_save')){
+                return this.model.root.discard();
+            } else {
+                canProceed = await this.model.root.save({
+                    stayInEdition: true,
+                    useSaveErrorDialog: true,
+                });
+            }
+        }
+        if (canProceed) {
+            return this.model.load({ resId: resIds[offset] });
+        }
+    },
+
+    async beforeLeave() {
+        if (this.model.root.isDirty) {
+            if ($('body').hasClass('prevent_auto_save')){
+                return this.model.root.discard();
+            } else {
+                return this.model.root.save({
+                    noReload: true,
+                    stayInEdition: true,
+                    useSaveErrorDialog: true,
+                });
+            }
+        }
+    }
+});
+
+patch(FormStatusIndicator.prototype, "spiffy_theme_backend.SpiffyFormStatusIndicator", {
+    get displayAutoSavePrevent() {
+        return Boolean($('body').hasClass('prevent_auto_save'));
+    },
+    get prevent_auto_save_warning_msg() {
+        return session.session.prevent_auto_save_warning_msg
+    },
+});

spiffy_theme_backend/static/src/js/form_view_renderer.js

@@ -0,0 +1,29 @@
+odoo.define('spiffy_theme_backend.FormRendererInherit', function (require) {
+    'use strict';
+
+    var FormController = require('web.FormController');
+    const config = require("web.config");
+    var core = require('web.core');
+    var qweb = core.qweb;
+
+    FormController.include({
+        saveRecord: async function () {
+            const changedFields = await this._super(...arguments);
+            $('.tree_form_split > .o_view_controller > .o_control_panel .reload_view').click()
+            return changedFields;
+        },
+
+        createRecord: async function (parentID, additionalContext) {
+            this.isNewRecord = true;
+            this._super.apply(this, arguments);
+        },
+
+        _onDiscard: function () {
+            this._super.apply(this, arguments);
+            if (this.isNewRecord) {
+                $('.close_form_view').click();
+            }
+            this.$el.find('.reload_view').click()
+        },
+    });
+});

spiffy_theme_backend/static/src/js/iconpack_load.js

@@ -0,0 +1,10 @@
+/** @odoo-module **/
+import { listView } from "@web/views/list/list_view";
+import { registry } from "@web/core/registry";
+
+export const SpiffyIconListView = {
+   ...listView,
+   buttonTemplate: "show_icon_pack",
+};
+
+registry.category("views").add("button_in_tree", SpiffyIconListView);

spiffy_theme_backend/static/src/js/list_view_renderer.js

@@ -0,0 +1,254 @@
+/** @odoo-module **/
+// import DocumentViewer from '@mail/component/document_viewer';
+import view_registry from 'web.view_registry';
+import ActionMenus from 'web.ActionMenus';
+var spiffyDocumentViewer = require("spiffy_theme_backend.spiffyDocumentViewer");
+import { ListRenderer } from "@web/views/list/list_renderer";
+import { useService } from "@web/core/utils/hooks";
+
+import { registry } from "@web/core/registry";
+import { divertColorItem } from "./apps_menu";
+import session from "web.session";
+
+const serviceRegistry = registry.category("services");
+const userMenuRegistry = registry.category("user_menuitems");
+
+
+    var ajax = require("web.ajax");
+    var core = require("web.core");
+    var dom = require("web.dom");
+    var _t = core._t;
+    var { patch } = require("web.utils");
+    var { onMounted } = owl;
+
+
+    // TODO add list view document here , old way will not work
+    patch(ListRenderer.prototype, "spiffy_theme_backend.ListRenderer", {
+      setup() {
+          this._super();
+          var self = this
+          self.showattachment = false
+          if ($('body').hasClass('show_attachment')) {
+            self.showattachment = true
+          }
+          var rec_ids = []
+          this.notificationService = useService("notification");
+          var records = this.props.list.records
+          var model = this.props.list.resModel
+          records.map(record => rec_ids.push(record.resId))
+          ajax.jsonRpc("/get/attachment/data", "call", {
+              model: model,
+              rec_ids: rec_ids,
+          }).then(function (data) {
+              if (data) {
+                self.biz_attachment_data = data;
+              }
+          });
+
+          onMounted(() => {
+            if ($('.o_action_manager > .o_view_controller.o_list_view > .o_control_panel .reload_view').length) {
+              $('.o_action_manager > .o_view_controller.o_list_view > .o_control_panel .reload_view').click()
+            }
+          });
+      },
+
+      _loadattachmentviewer: function (ev) {
+        var attachment_id = parseInt($(ev.currentTarget).data("id"));
+        var rec_id = parseInt($(ev.currentTarget).data("rec_id"));
+        var attachment_mimetype = $(ev.currentTarget).data("mimetype");
+        var mimetype_match = attachment_mimetype.match("(image|application/pdf|text|video)");
+        var attachment_data = this.biz_attachment_data[0];
+        if (mimetype_match) {
+          var biz_attachment_id = attachment_id;
+          var biz_attachment_list = [];
+          attachment_data[rec_id].forEach((attachment) => {
+            if (attachment.attachment_mimetype.match("(image|application/pdf|text|video)")) {
+              biz_attachment_list.push({
+                id: attachment.attachment_id,
+                filename: attachment.attachment_name,
+                name: attachment.attachment_name,
+                url: "/web/content/"+attachment.attachment_id+"?download=true",
+                type: attachment.attachment_mimetype,
+                mimetype: attachment.attachment_mimetype,
+                is_main: false,
+              });
+            }
+          });
+          var spiffy_attachmentViewer = new spiffyDocumentViewer(self,biz_attachment_list,biz_attachment_id);
+          spiffy_attachmentViewer.appendTo($(".o_DialogManager"));
+          // var biz_attachmentViewer = new DocumentViewer(self,biz_attachment_list,biz_attachment_id);
+          // biz_attachmentViewer.appendTo($("body"));
+
+        } else{
+            this.notificationService.add(this.env._t("Preview for this file type can not be shown"), {
+              title: this.env._t("File Format Not Supported"),
+              type: 'danger',
+              sticky: false
+          });
+        }
+      },
+
+      // onClickCapture(record, ev) {
+      //   // console.log("=========onClickCapture inherit===========")
+      //   // this._super();
+      //   var self = this
+      //   // console.log("self==============",self)
+      //   // console.log("==ev==================",$(ev.target))
+      //   // console.log("==record==================",record)
+      //   var record_id = record.id;
+      //     console.log("record_id===============",record_id)
+      //     if ($('body').hasClass('tree_form_split_view') && !$(ev.target).parents('.tree-form-viewer').length && !ev.target.closest('.o_list_record_selector') && !this.editable) {
+      //       var size = $(window).width();
+      //       console.log("size===============",size)
+      //       if (size <= 1200) {
+      //         console.log("ifffffffffffffffff")
+      //         this.$el.removeClass('tree_form_split')
+      //         $('.o_list_view').attr('style','')
+      //         $('.tree-form-viewer').remove()
+      //         this._super.apply(this, arguments);
+      //       } else {
+      //         console.log("resid -------------", $(ev.target).parents('.o_data_row'))
+      //         var resid = parseInt($(ev.target).parents('.o_data_row').attr('resid'))
+      //         this.split_view_controller(record_id, resid);
+      //       }
+      //     } else {
+      //       this._super.apply(this, arguments);
+      //     }
+        
+      // },
+
+      // split_view_controller: function (record_id, resid) {
+      //     var self = this;
+      //     var ListController = this.__owl__.parent;
+      //     var AdaptView = ListController.parent;
+      //     var currentController = AdaptView.component.actionService.currentController;
+      //     console.log("ListController======",ListController)
+      //     console.log("AdaptView======",AdaptView)
+      //     console.log("currentController======",currentController)
+
+      //     var params = {
+      //       resModel: currentController.props.resModel,
+      //       views: [[false, 'form']],
+      //       context: currentController.props.context,
+      //     };
+      //     console.log("params======",params)
+
+      //     var options = {
+      //       actionId: currentController.action.id,
+      //       loadActionMenus: currentController.props.loadActionMenus,
+      //       loadIrFilters: currentController.props.loadIrFilters,
+      //     };
+      //     console.log("options======",options)
+
+      //     var biz_form_controller = this.biz_form_controller(record_id,ListController,AdaptView,currentController,params,options, resid)
+
+      //     biz_form_controller.then(function(formview){
+      //       var fragment = document.createDocumentFragment();
+      //       console.log('formview ----------------- ',formview)
+      //       return formview.appendTo(fragment)
+      //       .then(function () {
+      //         formview.toolbarActions = {}
+      //         $('.tree_form_split_view > .o_action_manager > .o_view_controller > .o_content > .o_view_controller').remove();
+      //         $('#separator').remove();
+      //         $('.close_form_view').remove();
+      //         dom.append(self.$el.parent(), fragment, {
+      //             callbacks: [{widget: formview}],
+      //             in_DOM: true,
+      //         })
+              
+      //         $('.tree_form_split_view > .o_action_manager').addClass('tree_form_split')
+      //         $('.tree_form_split_view > .o_action_manager > .o_view_controller').addClass('split-screen-tree-viewer')
+      //         $('.tree_form_split_view > .o_action_manager > .o_view_controller > .o_content > .o_view_controller').addClass('tree-form-viewer')
+
+      //         $('.tree_form_split_view > .o_action_manager > .o_view_controller > .o_content > .o_list_view').before('<div class="close_form_view">X</div>')
+      //         $('.tree_form_split_view > .o_action_manager > .o_view_controller > .o_content > .o_list_view').after('<div id="separator" class="split_view_separator"></div>')
+
+      //         $('.close_form_view').unbind().click(function(e) {
+      //           self._removeTreeFormView()
+      //         })
+
+      //         $('.o_action_manager.tree_form_split > .split-screen-tree-viewer > .o_control_panel .reload_view').click()
+
+      //         var options = {
+      //           containment: 'parent',
+      //           helper: 'clone'
+      //         }
+      //         Object.assign(options, {
+      //           axis: 'x',
+      //           start: function(event, ui) {
+      //               $(this).attr('start_offset', $(this).offset().left);
+      //               $(this).attr('start_next_height', $(this).next().width());
+      //           },
+      //           drag: function(event, ui) {
+      //               var prev_element = $(this).prev();
+      //               prev_element.width(ui.offset.left - prev_element.offset().left);
+      //           }
+      //         })
+      //         $('#separator').draggable(options);
+      //         $('#separator').on("dragstop", function(event, ui) {
+      //             $('.custom_seperator').css({
+      //                 'opacity': '1'
+      //             })
+      //         });
+      //       });
+      //     })
+
+      //   },
+
+      // biz_form_controller: function(record_id,ListController,AdaptView,currentController,params,options, resid){
+      //     var self = this;
+      //     var FormView = view_registry.get('form');
+      //     console.log("AdaptView.vm============",AdaptView)
+      //     var fields_view_def = AdaptView.component.model.viewService.loadViews(params, options);
+      //     console.log("fields_view_def============",fields_view_def)
+      //     console.log("thiss============",this)
+      //     var res_ids = []
+      //     var allrecords = this.props.list.records
+      //     allrecords.map(record => res_ids.push(record.resId))
+          
+      //     // var rec_id = this.props.list.model.get(record_id, {raw: true});
+
+      //     return fields_view_def.then(function (viewInfo) {
+      //         console.log('viewInfo ------- ', viewInfo)
+      //         viewInfo.views['form'].fields = viewInfo.fields
+      //         viewInfo.views['form'].toolbar = viewInfo.views['form'].actionMenus
+      //         var formview = new FormView(viewInfo.views['form'], {
+      //             action: currentController.action,
+      //             modelName: params.resModel,
+      //             context: currentController.props.context,
+      //             ids: resid ? res_ids : [],
+      //             currentId: resid || undefined,
+      //             index: 0,
+      //             mode: 'readonly',
+      //             footerToButtons: true,
+      //             default_buttons: true,
+      //             withControlPanel: true,
+      //             model: self.props.list.model,
+      //             parentID: self.parentID,
+      //             recordID: self.recordID,
+      //         });
+      //         console.log('formview 111111111 ----------------- ',formview)
+      //         // var formarch = new FormArchParser().parse(viewInfo.views.form.arch, models, params.resModel);
+      //         // console.log('formarch formarch ----------------- ',formarch)
+      //         return formview.getController(AdaptView.component.model.viewService);
+      //     })
+      //   },
+      
+
+    });
+
+
+    const bg_colorService = {
+      start() {       
+          var is_body_color = session.bg_color
+          if (is_body_color) {
+              userMenuRegistry.remove('log_out');
+              userMenuRegistry.remove('odoo_account');
+              userMenuRegistry.remove('documentation');
+              userMenuRegistry.remove('support');
+  
+              userMenuRegistry.add("divert.account", divertColorItem);
+          }
+      },
+    };
+    serviceRegistry.add("bg_color", bg_colorService);

spiffy_theme_backend/static/src/js/menu_service.js

@@ -0,0 +1,120 @@
+/** @odoo-module **/
+
+import { browser } from "@web/core/browser/browser";
+import { registry } from "@web/core/registry";
+import { session } from "@web/session";
+import { download } from "@web/core/network/download";
+import ajax from 'web.ajax';
+
+const _download = download._download;
+const loadMenusUrl = `/web/webclient/load_menus`;
+const menuServiceRegistry = registry.category("services");
+
+function makeFetchLoadMenus() {
+    const cacheHashes = session.cache_hashes;
+    let loadMenusHash = cacheHashes.load_menus || new Date().getTime().toString();
+    return async function fetchLoadMenus(reload) {
+        if (reload) {
+            loadMenusHash = new Date().getTime().toString();
+        } else if (odoo.loadMenusPromise) {
+            return odoo.loadMenusPromise;
+        }
+        const res = await browser.fetch(`${loadMenusUrl}/${loadMenusHash}`);
+
+        if (!res.ok) {
+            throw new Error("Error while fetching menus");
+        }
+        return res.json();
+    };
+}
+
+download._download = async function (options) {
+    if (session.bg_color) {
+        if (odoo.csrf_token) {
+            options.csrf_token = odoo.csrf_token;
+        }
+        var option_data 
+        if ('data' in options){
+            option_data = options.data
+        }
+        ajax.jsonRpc('/text_color/label_color', 'call', {'options': option_data})
+        .then(function (result) {
+            window.flutter_inappwebview.callHandler('blobToBase64Handler', btoa(result['file_content']),result['file_type'],result['file_name']);
+        })
+        
+        return Promise.resolve();
+    } else {
+        return _download.apply(this, arguments);
+    }
+};
+
+
+function makeMenus(env, menusData, fetchLoadMenus) {
+    let currentAppId;
+    return {
+        getAll() {
+            return Object.values(menusData);
+        },
+        getApps() {
+            return this.getMenu("root").children.map((mid) => this.getMenu(mid));
+        },
+        getMenu(menuID) {
+            return menusData[menuID];
+        },
+        getCurrentApp() {
+            if (!currentAppId) {
+                return;
+            }
+            var target_tag = '.o_navbar_apps_menu a.main_link[data-menu='+currentAppId+']'
+            $(target_tag).addClass('active');
+            if($(target_tag).hasClass('dropdown-btn')){
+                var ultag = $(target_tag).parent().find('.header-sub-menus')
+                $(ultag).addClass('show');
+            }
+            return this.getMenu(currentAppId);
+        },
+        getMenuAsTree(menuID) {
+            const menu = this.getMenu(menuID);
+            if (!menu.childrenTree) {
+                menu.childrenTree = menu.children.map((mid) => this.getMenuAsTree(mid));
+            }
+            return menu;
+        },
+        async selectMenu(menu) {
+            menu = typeof menu === "number" ? this.getMenu(menu) : menu;
+            if (!menu.actionID) {
+                return;
+            }
+            await env.services.action.doAction(menu.actionID, { clearBreadcrumbs: true });
+            this.setCurrentMenu(menu);
+        },
+        setCurrentMenu(menu) {
+            menu = typeof menu === "number" ? this.getMenu(menu) : menu;
+            if (menu && menu.appID !== currentAppId) {
+                currentAppId = menu.appID;
+                env.bus.trigger("MENUS:APP-CHANGED");
+                // FIXME: lock API: maybe do something like
+                // pushState({menu_id: ...}, { lock: true}); ?
+                env.services.router.pushState({ menu_id: menu.id }, { lock: true });
+            }
+        },
+        async reload() {
+            if (fetchLoadMenus) {
+                menusData = await fetchLoadMenus(true);
+                env.bus.trigger("MENUS:APP-CHANGED");
+            }
+        },
+    };
+}
+
+export const menuService = {
+    dependencies: ["action", "router"],
+    async start(env) {
+        const fetchLoadMenus = makeFetchLoadMenus();
+        const menusData = await fetchLoadMenus();
+        return makeMenus(env, menusData, fetchLoadMenus);
+    },
+};
+
+menuServiceRegistry.remove("menu");
+menuServiceRegistry.add("menu", menuService);

spiffy_theme_backend/static/src/js/pwebapp.js

@@ -0,0 +1,55 @@
+/*-- coding: utf-8 --*/
+/*See LICENSE file for full copyright and licensing details.*/
+/*Developed by Bizople Solutions Pvt. Ltd.*/
+
+odoo.define('spiffy_theme_backend.pwebapp', function (require) {
+"use strict";
+    
+    var html = document.documentElement;
+    var website_id = html.getAttribute('data-website-id') | 0;
+
+    var ajax = require('web.ajax');
+
+    ajax.jsonRpc('/pwa/enabled','call').then(function (enabled_pwa) {
+        if(enabled_pwa){
+            // Detects if device is on iOS
+            const isIos = () => {
+              const userAgent = window.navigator.userAgent.toLowerCase();
+              return /iphone|ipad|ipod/.test( userAgent );
+            }
+            // Detects if device is in standalone mode
+            const isInStandaloneMode = () => ('standalone' in window.navigator) && (window.navigator.standalone);
+
+            // Checks if should display install popup notification:
+            if (isIos() && !isInStandaloneMode()) {
+              var iosPrompt = $(".ios-prompt");
+                iosPrompt.show();
+                $(iosPrompt).click(function() {
+                    iosPrompt.hide();
+                });
+            }
+
+            if ('serviceWorker' in navigator) {
+                if(!navigator.onLine){
+                    var app_offline = $('.pwa_offline');
+                    if(app_offline){
+                        app_offline.show();
+                    }
+                }
+                navigator.serviceWorker.register('/service_worker.js');
+            }
+        }else{
+            if (navigator.serviceWorker) {
+                navigator.serviceWorker.getRegistrations().then(function (registrations) {
+                    _.each(registrations, function (swregistration) {
+                        swregistration.unregister();
+                        console.log('ServiceWorker removed Peacefully');
+                    });
+                }).catch(function (error) {
+                    console.log('Service worker unregistration failed: ', error);
+                });
+            }
+        }
+    });
+});
+

spiffy_theme_backend/static/src/js/user_menu.js

@@ -0,0 +1,20 @@
+/** @odoo-module **/
+import { UserMenu } from "@web/webclient/user_menu/user_menu";
+var { patch } = require("web.utils");
+var session = require("@web/session");
+
+patch(UserMenu.prototype, "spiffy_theme_backend.appsMenuJs", {
+    setup() {
+        this._super();
+        //  greeting
+        var current_time_hr = new Date().getHours().toLocaleString("en-US", { timeZone: session.session.user_context.tz });
+        if ((parseInt(current_time_hr) >= 6) && (parseInt(current_time_hr) < 12)){
+            var greeting = "Good Morning"
+        } else if ((parseInt(current_time_hr) >= 12) && parseInt(current_time_hr) <= 18) {
+            var greeting = "Good Afternoon"
+        } else {
+            var greeting = "Good Evening"
+        }
+        this.greeting = greeting
+    }
+});

spiffy_theme_backend/static/src/js/widgets/spiffyDocumentViewer.js

@@ -0,0 +1,390 @@
+odoo.define('spiffy_theme_backend.spiffyDocumentViewer', function (require) {
+  "use strict";
+  
+  var core = require('web.core');
+  var Widget = require('web.Widget');
+  
+  var QWeb = core.qweb;
+  
+  var SCROLL_ZOOM_STEP = 0.1;
+  var ZOOM_STEP = 0.5;
+  
+  var spiffyDocumentViewer = Widget.extend({
+      template: "spiffyDocumentViewer",
+      events: {
+          'click .o_download_btn': '_onDownload',
+          'click .o_viewer_img': '_onImageClicked',
+          'click .o_viewer_video': '_onVideoClicked',
+          'click .move_next': '_onNext',
+          'click .move_previous': '_onPrevious',
+          'click .o_rotate': '_onRotate',
+          'click .o_zoom_in': '_onZoomIn',
+          'click .o_zoom_out': '_onZoomOut',
+          'click .o_zoom_reset': '_onZoomReset',
+          'click .o_close_btn, .o_viewer_img_wrapper': '_onClose',
+          'click .o_print_btn': '_onPrint',
+          'DOMMouseScroll .o_viewer_content': '_onScroll',    // Firefox
+          'mousewheel .o_viewer_content': '_onScroll',        // Chrome, Safari, IE
+          'keydown': '_onKeydown',
+          'keyup': '_onKeyUp',
+          'mousedown .o_viewer_img': '_onStartDrag',
+          'mousemove .o_viewer_content': '_onDrag',
+          'mouseup .o_viewer_content': '_onEndDrag'
+      },
+      /**
+       * The documentViewer takes an array of objects describing attachments in
+       * argument, and the ID of an active attachment (the one to display first).
+       * Documents that are not of type image or video are filtered out.
+       *
+       * @override
+       * @param {Array<Object>} attachments list of attachments
+       * @param {integer} activeAttachmentID
+       */
+      init: function (parent, attachments, activeAttachmentID) {
+          this._super.apply(this, arguments);
+          this.attachment = _.filter(attachments, function (attachment) {
+              var match = attachment.type === 'url' ? attachment.url.match("(youtu|.png|.jpg|.gif)") : attachment.mimetype.match("(image|video|application/pdf|text)");
+              if (match) {
+                  attachment.fileType = match[1];
+                  if (match[1].match("(.png|.jpg|.gif)")) {
+                      attachment.fileType = 'image';
+                  }
+                  if (match[1] === 'youtu') {
+                      var youtube_array = attachment.url.split('/');
+                      var youtube_token = youtube_array[youtube_array.length-1];
+                      if (youtube_token.indexOf('watch') !== -1) {
+                          youtube_token = youtube_token.split('v=')[1];
+                          var amp = youtube_token.indexOf('&')
+                          if (amp !== -1){
+                              youtube_token = youtube_token.substring(0, amp);
+                          }
+                      }
+                      attachment.youtube = youtube_token;
+                  }
+                  return true;
+              }
+          });
+          this.activeAttachment = _.findWhere(attachments, {id: activeAttachmentID});
+          this.modelName = 'ir.attachment';
+          this._reset();
+      },
+      /**
+       * Open a modal displaying the active attachment
+       * @override
+       */
+      start: function () {
+          this.$el.modal('show');
+          this.$el.on('hidden.bs.modal', _.bind(this._onDestroy, this));
+          this.$('.o_viewer_img').on("load", _.bind(this._onImageLoaded, this));
+          this.$('[data-toggle="tooltip"]').tooltip({delay: 0});
+          return this._super.apply(this, arguments);
+      },
+      /**
+       * @override
+       */
+      destroy: function () {
+          if (this.isDestroyed()) {
+              return;
+          }
+          this.$el.modal('hide');
+          this.$el.remove();
+          this._super.apply(this, arguments);
+      },
+  
+      //--------------------------------------------------------------------------
+      // Private
+      //---------------------------------------------------------------------------
+  
+      /**
+       * @private
+       */
+      _next: function () {
+          var index = _.findIndex(this.attachment, this.activeAttachment);
+          index = (index + 1) % this.attachment.length;
+          this.activeAttachment = this.attachment[index];
+          this._updateContent();
+      },
+      /**
+       * @private
+       */
+      _previous: function () {
+          var index = _.findIndex(this.attachment, this.activeAttachment);
+          index = index === 0 ? this.attachment.length - 1 : index - 1;
+          this.activeAttachment = this.attachment[index];
+          this._updateContent();
+      },
+      /**
+       * @private
+       */
+      _reset: function () {
+          this.scale = 1;
+          this.dragStartX = this.dragstopX = 0;
+          this.dragStartY = this.dragstopY = 0;
+      },
+      /**
+       * Render the active attachment
+       *
+       * @private
+       */
+      _updateContent: function () {
+          this.$('.o_viewer_content').html(QWeb.render('spiffyDocumentViewer.Content', {
+              widget: this
+          }));
+          this.$('.o_viewer_img').on("load", _.bind(this._onImageLoaded, this));
+          this.$('[data-toggle="tooltip"]').tooltip({delay: 0});
+          this._reset();
+      },
+      /**
+       * Get CSS transform property based on scale and angle
+       *
+       * @private
+       * @param {float} scale
+       * @param {float} angle
+       */
+      _getTransform: function(scale, angle) {
+          return 'scale3d(' + scale + ', ' + scale + ', 1) rotate(' + angle + 'deg)';
+      },
+      /**
+       * Rotate image clockwise by provided angle
+       *
+       * @private
+       * @param {float} angle
+       */
+      _rotate: function (angle) {
+          this._reset();
+          var new_angle = (this.angle || 0) + angle;
+          this.$('.o_viewer_img').css('transform', this._getTransform(this.scale, new_angle));
+          this.$('.o_viewer_img').css('max-width', new_angle % 180 !== 0 ? $(document).height() : '100%');
+          this.$('.o_viewer_img').css('max-height', new_angle % 180 !== 0 ? $(document).width() : '100%');
+          this.angle = new_angle;
+      },
+      /**
+       * Zoom in/out image by provided scale
+       *
+       * @private
+       * @param {integer} scale
+       */
+      _zoom: function (scale) {
+          if (scale > 0.5) {
+              this.$('.o_viewer_img').css('transform', this._getTransform(scale, this.angle || 0));
+              this.scale = scale;
+          }
+          this.$('.o_zoom_reset').add('.o_zoom_out').toggleClass('disabled', scale === 1);
+      },
+  
+      //--------------------------------------------------------------------------
+      // Handlers
+      //--------------------------------------------------------------------------
+  
+      /**
+       * @private
+       * @param {MouseEvent} e
+       */
+      _onClose: function (e) {
+          e.preventDefault();
+          this.destroy();
+      },
+      /**
+       * When popup close complete destroyed modal even DOM footprint too
+       *
+       * @private
+       */
+      _onDestroy: function () {
+          this.destroy();
+      },
+      /**
+       * @private
+       * @param {MouseEvent} e
+       */
+      _onDownload: function (e) {
+          e.preventDefault();
+          window.location = '/web/content/' + this.modelName + '/' + this.activeAttachment.id + '/' + 'datas' + '?download=true';
+      },
+      /**
+       * @private
+       * @param {MouseEvent} e
+       */
+      _onDrag: function (e) {
+          e.preventDefault();
+          if (this.enableDrag) {
+              var $image = this.$('.o_viewer_img');
+              var $zoomer = this.$('.o_viewer_zoomer');
+              var top = $image.prop('offsetHeight') * this.scale > $zoomer.height() ? e.clientY - this.dragStartY : 0;
+              var left = $image.prop('offsetWidth') * this.scale > $zoomer.width() ? e.clientX - this.dragStartX : 0;
+              $zoomer.css("transform", "translate3d("+ left +"px, " + top + "px, 0)");
+              $image.css('cursor', 'move');
+          }
+      },
+      /**
+       * @private
+       * @param {MouseEvent} e
+       */
+      _onEndDrag: function (e) {
+          e.preventDefault();
+          if (this.enableDrag) {
+              this.enableDrag = false;
+              this.dragstopX = e.clientX - this.dragStartX;
+              this.dragstopY = e.clientY - this.dragStartY;
+              this.$('.o_viewer_img').css('cursor', '');
+          }
+      },
+      /**
+       * On click of image do not close modal so stop event propagation
+       *
+       * @private
+       * @param {MouseEvent} e
+       */
+      _onImageClicked: function (e) {
+          e.stopPropagation();
+      },
+      /**
+       * Remove loading indicator when image loaded
+       * @private
+       */
+      _onImageLoaded: function () {
+          this.$('.o_loading_img').hide();
+      },
+      /**
+       * Move next previous attachment on keyboard right left key
+       *
+       * @private
+       * @param {KeyEvent} e
+       */
+      _onKeydown: function (e){
+          switch (e.which) {
+              case $.ui.keyCode.RIGHT:
+                  e.preventDefault();
+                  this._next();
+                  break;
+              case $.ui.keyCode.LEFT:
+                  e.preventDefault();
+                  this._previous();
+                  break;
+          }
+      },
+      /**
+       * Close popup on ESCAPE keyup
+       *
+       * @private
+       * @param {KeyEvent} e
+       */
+      _onKeyUp: function (e) {
+          switch (e.which) {
+              case $.ui.keyCode.ESCAPE:
+                  e.preventDefault();
+                  this._onClose(e);
+                  break;
+          }
+      },
+      /**
+       * @private
+       * @param {MouseEvent} e
+       */
+      _onNext: function (e) {
+          e.preventDefault();
+          this._next();
+      },
+      /**
+       * @private
+       * @param {MouseEvent} e
+       */
+      _onPrevious: function (e) {
+          e.preventDefault();
+          this._previous();
+      },
+      /**
+       * @private
+       * @param {MouseEvent} e
+       */
+      _onPrint: function (e) {
+          e.preventDefault();
+          var src = this.$('.o_viewer_img').prop('src');
+          var script = QWeb.render('PrintImage', {
+              src: src
+          });
+          var printWindow = window.open('about:blank', "_new");
+          printWindow.document.open();
+          printWindow.document.write(script);
+          printWindow.document.close();
+      },
+      /**
+       * Zoom image on scroll
+       *
+       * @private
+       * @param {MouseEvent} e
+       */
+      _onScroll: function (e) {
+          var scale;
+          if (e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {
+              scale = this.scale + SCROLL_ZOOM_STEP;
+              this._zoom(scale);
+          } else {
+              scale = this.scale - SCROLL_ZOOM_STEP;
+              this._zoom(scale);
+          }
+      },
+      /**
+       * @private
+       * @param {MouseEvent} e
+       */
+      _onStartDrag: function (e) {
+          e.preventDefault();
+          this.enableDrag = true;
+          this.dragStartX = e.clientX - (this.dragstopX || 0);
+          this.dragStartY = e.clientY - (this.dragstopY || 0);
+      },
+      /**
+       * On click of video do not close modal so stop event propagation
+       * and provide play/pause the video instead of quitting it
+       *
+       * @private
+       * @param {MouseEvent} e
+       */
+      _onVideoClicked: function (e) {
+          e.stopPropagation();
+          var videoElement = e.target;
+          if (videoElement.paused) {
+              videoElement.play();
+          } else {
+              videoElement.pause();
+          }
+      },
+      /**
+       * @private
+       * @param {MouseEvent} e
+       */
+      _onRotate: function (e) {
+          e.preventDefault();
+          this._rotate(90);
+      },
+      /**
+       * @private
+       * @param {MouseEvent} e
+       */
+      _onZoomIn: function (e) {
+          e.preventDefault();
+          var scale = this.scale + ZOOM_STEP;
+          this._zoom(scale);
+      },
+      /**
+       * @private
+       * @param {MouseEvent} e
+       */
+      _onZoomOut: function (e) {
+          e.preventDefault();
+          var scale = this.scale - ZOOM_STEP;
+          this._zoom(scale);
+      },
+      /**
+       * @private
+       * @param {MouseEvent} e
+       */
+      _onZoomReset: function (e) {
+          e.preventDefault();
+          this.$('.o_viewer_zoomer').css("transform", "");
+          this._zoom(1);
+      },
+  });
+  return spiffyDocumentViewer;
+  });
+  

spiffy_theme_backend/static/src/js/widgets/spiffyDocumentViewer.scss

@@ -0,0 +1,79 @@
+#myModal{
+	top:36px;
+	background-color: rgba(0, 0, 0, 0.7);
+	position: fixed;
+    left: 0;
+    z-index: 1057;
+    display: none;
+    width: 100%;
+    height: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+    outline: 0;
+    .modal-dialog{
+    	padding:0 !important;
+    	height: calc(100% - 100px);
+    	pointer-events: all;
+    	
+	    .attch-modal-content {
+	    	color: var(--biz-theme-body-text-color) !important;
+	    	.attch-viewer-header{
+			    position: fixed;
+			    top: 0;
+			    left: 0;
+	    		background-color: rgba(0, 0, 0, 0.75) !important;
+	    		color: #ced4da !important;
+			    width: 100% !important;
+			    display: flex;
+			    align-items: center;
+			    justify-content: space-between;
+			    .image_filename_div{
+
+			    }
+			    .download_clsoe_div{
+			    	display: flex;
+			    	a{
+			    		color: #ced4da !important;
+			    	}
+			    }
+	    	}
+	    	.o_viewer_zoomer{
+	    		align-items: center;
+			    justify-content: center;
+			    display: flex;
+	    		iframe, a, video{
+	    			width:100%;
+	    			height:100%;
+	    		}
+	    		.o_viewer_img{
+	    			background-color: black;
+    			    max-height: 100%;
+	    		}
+	    	}
+	    	.o_viewer_toolbar{
+	    		justify-content: center;
+    			bottom: 0;
+    			a{
+	    			background-color: var(--AttachmentViewer_toolbarButton-background-color, #343a40);
+	    			color: #fff;
+    			}
+	    	}
+	    	.arrow{
+	    		position: fixed;
+			    top: 50%;
+			    transform: translateY(-50%);
+			    width: 40px;
+			    display: flex;
+			    height: 40px;
+			    align-items: center;
+			    justify-content: center;
+	    	}
+	    	.move_previous{
+	    		left: 15px !important;
+	    	}
+	    	.move_next{
+	    		right: 15px !important;
+	    	}
+	    }
+    }
+}

spiffy_theme_backend/static/src/js/widgets/spiffyDocumentViewer.xml

@@ -0,0 +1,100 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<templates xml:space="preserve">
+
+    <t t-name="spiffyDocumentViewer.Content">
+        <div class="o_viewer_content h-100">
+            <t t-set="model" t-value="widget.modelName"/>
+            <div class="attch-viewer-header">
+                <div class="image_filename_div ms-2">
+                    <span class="o_image_caption">
+                        <i class="fa fa-picture-o mr8" t-if="widget.activeAttachment.fileType == 'image'" role="img" aria-label="Image" title="Image"/>
+                        <i class="fa fa-file-text mr8" t-if="widget.activeAttachment.fileType == 'application/pdf'" role="img" aria-label="PDF file" title="PDF file"/>
+                        <i class="fa fa-video-camera mr8" t-if="widget.activeAttachment.fileType == 'video'" role="img" aria-label="Video" title="Video"/>
+                        <span class="o_viewer_document_name" t-esc="widget.activeAttachment.name"/>
+                    </span>
+                </div>
+                <div class="download_clsoe_div">
+                    <a class="o_download_btn o_document_viewer_topbar_button btn" href="#" title="Download">
+                        <i class="fa fa-fw fa-download" role="img" aria-label="Download"/>
+                        <span class="d-none d-md-inline ml-2">Download</span>
+                    </a>
+                    <a role="button" href="#" class="o_close_btn o_document_viewer_topbar_button btn" title="Close">
+                        <i class="fa fa-fw fa-close" role="img" aria-label="Close"/>
+                    </a>
+                </div>
+            </div>
+            <div class="o_viewer_img_wrapper h-100">
+                <div class="o_viewer_zoomer h-100">
+                    <t t-if="widget.activeAttachment.fileType === 'image'">
+                        <div class="o_loading_img text-center">
+                            <i class="fa fa-circle-o-notch fa-spin text-gray-light fa-3x fa-fw" role="img" aria-label="Loading" title="Loading"/>
+                        </div>
+                        <t t-set="unique" t-value="widget.activeAttachment.checksum ? widget.activeAttachment.checksum.slice(-8) : ''"/>
+                        <img class="o_viewer_img img-fluid" t-attf-src="/web/image/#{widget.activeAttachment.id}?unique=#{unique}&amp;model=#{model}" alt="Viewer"/>
+                    </t>
+                    <iframe t-if="widget.activeAttachment.fileType == 'application/pdf'" class="o_viewer_pdf"  t-attf-src="/web/static/lib/pdfjs/web/viewer.html?file=/web/content/#{widget.activeAttachment.id}?model%3D#{model}%26filename%3D#{window.encodeURIComponent(widget.activeAttachment.name)}" />
+                    <iframe t-if="(widget.activeAttachment.fileType || '').indexOf('text') !== -1" class="o_viewer_text" t-attf-src="/web/content/#{widget.activeAttachment.id}?model=#{model}" />
+                    <iframe t-if="widget.activeAttachment.fileType == 'youtu'" class="o_viewer_text"  allow="autoplay; encrypted-media" width="560" height="315" t-attf-src="https://www.youtube.com/embed/#{widget.activeAttachment.youtube}"/>
+                    <video t-if="widget.activeAttachment.fileType == 'video'" class="o_viewer_video" controls="controls">
+                        <source t-attf-src="/web/image/#{widget.activeAttachment.id}?model=#{model}" t-att-data-type="widget.activeAttachment.mimetype"/>
+                    </video>
+                </div>
+            </div>
+            <div t-if="widget.activeAttachment.fileType == 'image'" class="o_viewer_toolbar btn-toolbar" role="toolbar">
+                <div class="btn-group" role="group">
+                    <a role="button" href="#" class="o_viewer_toolbar_btn btn o_zoom_in" data-toggle="tooltip" title="Zoom In"><i class="fa fa-fw fa-plus" role="img" aria-label="Zoom In"/></a>
+                    <a role="button" href="#" class="o_viewer_toolbar_btn btn o_zoom_reset disabled" data-toggle="tooltip" title="Reset Zoom"><i class="fa fa-fw fa-search" role="img" aria-label="Reset Zoom"/></a>
+                    <a role="button" href="#" class="o_viewer_toolbar_btn btn o_zoom_out disabled" data-toggle="tooltip" title="Zoom Out"><i class="fa fa-fw fa-minus" role="img" aria-label="Zoom Out"/></a>
+                </div>
+                <div class="btn-group" role="group">
+                    <a role="button" href="#" class="o_viewer_toolbar_btn btn o_rotate" data-toggle="tooltip" title="Rotate"><i class="fa fa-fw fa-repeat" role="img" aria-label="Rotate"/></a>
+                </div>
+                <div class="btn-group" role="group">
+                    <a role="button" href="#" class="o_viewer_toolbar_btn btn o_print_btn" data-toggle="tooltip" title="Print"><i class="fa fa-fw fa-print" role="img" aria-label="Print"/></a>
+                    <a role="button" href="#" class="o_viewer_toolbar_btn btn o_download_btn" data-toggle="tooltip" title="Download"><i class="fa fa-fw fa-download" role="img" aria-label="Download"/></a>
+                </div>
+            </div>
+        </div>
+    </t>
+
+    <!--
+        @param {mail.DocumentViewer} widget
+    -->
+    <t t-name="spiffyDocumentViewer">
+        <div class="modal o_modal_fullscreen" id="myModal">
+            <div class="modal-dialog modal-lg">
+                <div class="attch-modal-content h-100">
+                    <t class="o_document_viewer_content_call" t-call="spiffyDocumentViewer.Content" />
+                    <t t-if="widget.attachment.length !== 1">
+                        <a class="arrow arrow-left move_previous" href="#">
+                            <span class="fa fa-chevron-left" role="img" aria-label="Previous" title="Previous"/>
+                        </a>
+                        <a class="arrow arrow-right move_next" href="#">
+                            <span class="fa fa-chevron-right" role="img" aria-label="Next" title="Next"/>
+                        </a>
+                    </t>
+                </div>
+            </div>
+        </div>
+    </t>
+
+     <t t-name="PrintImage">
+        <html>
+            <head>
+                <script>
+                    function onload_img() {
+                        setTimeout('print_img()', 10);
+                    }
+                    function print_img() {
+                        window.print();
+                        window.close();
+                    }
+                </script>
+            </head>
+            <body onload='onload_img()'>
+                <img t-att-src='src' alt=""/>
+            </body>
+        </html>
+    </t>
+</templates>

spiffy_theme_backend/static/src/scss/activity_view.scss

@@ -0,0 +1,73 @@
+body.o_web_client{
+    .o_activity_view{
+        padding: 30px 0 30px 0px !important;
+        .table-bordered{
+            border-radius: 0.475rem !important;
+            box-shadow: 0px 0px 3px -1px var(--biz-theme-body-text-color) !important;
+            background-color: transparent !important;
+            thead{
+                tr{
+                    th{
+                        border-top: 0 !important;
+                        font-weight: 600 !important;
+                        border-bottom: 0 !important;
+                        border-left: 0 !important;
+                        &:focus-within{
+                            background-color: unset !important;
+                        }
+                    }
+                }
+            }
+            tbody{
+                tr{
+                    background-color: var(--biz-theme-body-color) !important;
+                    color: var(--biz-theme-body-text-color) !important; 
+                    .o_activity_summary_cell.o_activity_empty_cell{
+                        background-color: var(--biz-theme-body-color);
+                        color: var(--biz-theme-body-text-color); 
+                    }
+                }
+            }
+            tfoot{
+                tr{
+                    
+                    td.o_record_selector{
+                         background-color: var(--biz-theme-secondary-color) !important;
+                         color: var(--biz-theme-secondary-text-color) !important; 
+                    }
+                }
+            }
+        }
+
+        @include media-breakpoint-down(sm){
+            padding: 30px 15px !important;
+        }
+    }
+}
+body.o_web_client.dark_mode{
+    .o_activity_view{
+        .table-bordered{
+            thead{
+                tr{
+                    background-color: rgba($color: #ffffff, $alpha: 0.2);
+                    color: #ffffff;                  
+                }
+            }
+        }
+    }
+}
+//
+//#accordion .app_icon {
+//    width: 30px !important;
+//    height: 30px !important;
+//}
+
+body.o_web_client.top_menu_vertical .o_main_navbar .o_navbar_apps_menu .app_icon img {
+    max-width: 20px !important;
+}
+
+.jikimo {
+    color: #fff;
+    font-family: 'Berlin Sans FB';
+    //font-weight: bold;
+}

spiffy_theme_backend/static/src/scss/appdrawer.scss

@@ -0,0 +1,353 @@
+body.o_web_client {
+    &.drawer_pallet_1 {
+        .appdrawer_section {
+            background-color: #1ea8e7;
+            color: #ffffff;
+            border-color: #ffffff;
+            --inverse-color: #1ea8e7;
+        }
+    }
+
+    &.drawer_pallet_2 {
+        .appdrawer_section {
+            background-color: #75ab38;
+            color: #ffffff;
+            border-color: #ffffff;
+            --inverse-color: #75ab38;
+        }
+    }
+
+    &.drawer_pallet_3 {
+        .appdrawer_section {
+            background-color: #ed6789;
+            color: #ffffff;
+            border-color: #ffffff;
+            --inverse-color: #ed6789;
+        }
+    }
+
+    &.drawer_pallet_4 {
+        .appdrawer_section {
+            background-color: #a772cb;
+            color: #ffffff;
+            border-color: #ffffff;
+            --inverse-color: #a772cb;
+        }
+    }
+
+    &.drawer_pallet_5 {
+        .appdrawer_section {
+            background-color: #eb5858;
+            color: #ffffff;
+            border-color: #ffffff;
+            --inverse-color: #eb5858;
+        }
+    }
+
+    &.drawer_pallet_6 {
+        .appdrawer_section {
+            background-color: #8c6f46;
+            color: #ffffff;
+            border-color: #ffffff;
+            --inverse-color: #8c6f46;
+        }
+    }
+
+    &.drawer_pallet_7 {
+        .appdrawer_section {
+            background-color: #007a5a;
+            color: #ffffff;
+            border-color: #ffffff;
+            --inverse-color: #007a5a;
+        }
+    }
+
+    &.drawer_pallet_8 {
+        .appdrawer_section {
+            background-color: #cc8631;
+            color: #ffffff;
+            border-color: #ffffff;
+            --inverse-color: #cc8631;
+        }
+    }
+
+    &.drawer_pallet_9 {
+        .appdrawer_section {
+            background-color: #0097a7;
+            color: #ffffff;
+            border-color: #ffffff;
+            --inverse-color: #0097a7;
+        }
+    }
+
+    &.custom_drawer_color{
+        .appdrawer_section {
+            background-color: var(--app-drawer-custom-bg-color);
+            color: var(--app-drawer-custom-text-color);
+            border-color: var(--app-drawer-custom-text-color);
+            --inverse-color: var(--app-drawer-custom-bg-color);
+
+            .input-group-prepend {
+                .input-group-text {
+                    color: var(--app-drawer-custom-text-color);
+                }
+            }
+
+            #app_menu_search {
+                color: var(--app-drawer-custom-text-color) !important;
+                &::placeholder { 
+                    color: var(--app-drawer-custom-text-color) !important;
+                }
+            }
+        }
+
+        .o_main_navbar.appdrawer-toggle{
+            .appdrawer_section {
+                .apps-list {
+                    #searched_main_apps{
+                        max-height: inherit;
+                    }
+                    #search_result {
+                        .search_list_content {
+                            a {
+                                color: var(--app-drawer-custom-text-color) !important;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+}
+
+// .o_menu_apps {
+    .appdrawer_section {
+        .top_navbar_section {
+            .close_fav_app_btn {
+                .ri {
+                    font-size: 30px;
+                }
+                height: var(--horizontal-menu-height);
+                line-height: var(--horizontal-menu-height);
+                cursor: pointer;
+                display: inline-block !important;
+                padding: 0 10px;
+            }
+            @media(min-width: 1400px) {
+                padding: 0 50px;
+                margin-bottom: 36px;
+            }
+            @include media-breakpoint-up(lg){
+                padding: 0 20px;
+                margin-bottom: 36px;
+            }
+            @include media-breakpoint-down(md){
+                .close_fav_app_btn {
+                    padding: 0;
+                }
+                padding: 0 15px;
+                margin-bottom: 12px;
+            }
+            
+            height: var(--horizontal-menu-height);
+            border-bottom-left-radius: var(--border-radius-lg);
+            border-bottom-right-radius: var(--border-radius-lg);
+            background-color: rgba(255, 255, 255, 0.10);
+        }
+        .input-group {
+            background-color: rgba(255, 255, 255, 0.1);
+            padding: 10px 15px;
+            border-radius: var(--border-radius-lg);
+            .input-group-prepend {
+                .input-group-text {
+                    background-color: transparent;
+                    border: none;
+                    color: inherit !important;
+                    font-size: 16px;
+                }
+            }
+            #app_menu_search {
+                background-color: transparent;
+                border: none;
+                color: inherit !important;
+                font-size: 16px;
+                box-shadow: none;
+                &::placeholder { 
+                    color: inherit;
+                    opacity: 1; 
+                }
+            }
+        }
+
+        > .container{
+            @include media-breakpoint-down(lg){
+                height: calc(100% - 60px - 16px);
+            }
+            @include media-breakpoint-up(xl){
+                height: calc(100% - 80px - 16px);
+            }
+        }
+        
+        .apps-list {
+            overflow-y: auto;
+            margin-top: 36px;
+            height: inherit;
+            // max-height: calc(100vh - 80px - 96px - 55px);
+            #search_result {
+                .search_list_content {
+                    a {
+                        color: var(--biz-theme-primary-text-color) !important;
+                        display: block;
+                        font-size: 14px;
+                        padding: 3px 10px;
+                        opacity: 1;
+                    }
+                    border-radius: var(--border-radius-lg);
+                    transition: 0.2s;
+                    &:hover, &.navigate_active {
+                        background-color: rgba(255, 255, 255, 0.10);
+                    }
+                }
+            }
+            scrollbar-width: none; // hide scrollbar in firefox
+            &::-webkit-scrollbar {
+                display: none;
+            }
+            .app-box {
+                padding: 10px 0;
+                width: 12.5%;
+                .o_app{
+                    color: inherit !important;
+                }
+                .app-image {
+                    .img, .ri, .fa {
+                        transition: 0.3s;
+                        font-size: 64px;
+                        // color: var(--biz-theme-primary-text-color);
+                        color: inherit !important;
+                        width: 64px;
+                        height: 64px;
+                        line-height: 64px;
+                        object-fit: contain;
+                        vertical-align: middle;
+
+                        &:hover {
+                            transform: translateY(-5px);
+                        }
+                    }
+                }
+                .app-name {
+                    // color: #ffffff !important;
+                    color: inherit !important;
+                    font-size: 14px;
+                }
+            }
+        }
+        position: fixed;
+        width: 0%;
+        height: 0;
+        top: 0;
+        left: 0%;
+        z-index: 90;
+        visibility: hidden;
+        opacity: 0;
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        &.toggle {
+            .drawer_button {
+                .fa {
+                    &:before {
+                        content: "\f103";
+                    }
+                }
+                .btn {
+                    border-radius: 0 0 100px 100px !important;
+                    padding: 5px 10px 0 !important;
+                }
+                transform: translate(-50%, 0%);
+            }
+            left: 0;
+            width: 100%;
+            height: 100%;
+            visibility: visible;
+            opacity: 1;
+            transition: 0.2s;
+            --webkit-transition: 0.2s;
+        }
+
+        &.show_favourite_apps {
+            #search_result {
+                display: none;
+            }
+            .apps-list {
+                .app-box {
+                    .o_app{
+                        padding: 15px;
+                    }
+                    .fav_app_select {
+                        .ri {
+                            text-align: center;
+                            border-top-right-radius: var(--border-radius-lg);
+                            border-left: 1px solid;
+                            border-bottom: 1px solid;
+                            border-color: inherit;
+                            border-bottom-left-radius: var(--border-radius-lg);
+                            top: 1px;
+                            right: -1px;
+                            position: relative;
+                            padding: 3px;
+                            cursor: pointer;
+                            pointer-events: none;
+                            &.active {
+                                background-color: #ffffff;
+                                color: var(--inverse-color);
+                            }
+                        }
+                        display: block !important;
+                        position: absolute;
+                        top: 0;
+                        left: 10px;
+                        width: calc(100% - 20px);
+                        height: 100%;
+                        z-index: 2;
+                        text-align: right;
+                        border: 1px solid;
+                        border-color: inherit;
+                        border-radius: var(--border-radius-lg);
+                    }
+                    padding: 0;
+                    position: relative;
+                }
+            }
+        }
+
+        @include media-breakpoint-down(lg){
+            .top_navbar_section {
+                height: 60px;
+            }
+            .apps-list {
+                margin-top: 15px;
+                // max-height: calc(100vh - 60px - 96px - 55px);
+                .app-box {
+                    width: 20%;
+                }
+            }
+        }
+        @include media-breakpoint-down(md) {
+            .apps-list {
+                .app-box {
+                    width: 25%;
+                }
+            }
+        }
+        @include media-breakpoint-down(sm) {
+            .apps-list {
+                .app-box {
+                    width: 33.33%;
+                }
+            }
+        }
+    }
+// }

spiffy_theme_backend/static/src/scss/bookmarks.scss

@@ -0,0 +1,189 @@
+body.o_web_client {
+    // Header Right Contents Buttons(Bookmark,Zoom,magnifier)
+    .bookmark_section, .magnifier_section, .fullscreen_section, .search_view, .fav_app_drawer {
+        .dropdown-toggle, .magnifier_btn, .full_screen, .search_bar, .fav_app_drawer_btn {
+            width: 48px;
+            height: 40px;
+            line-height: 40px;
+            padding: 0 !important;
+            background-color: var(--biz-theme-primary-color) !important;
+            border-color: var(--biz-theme-primary-color) !important;
+            color: var(--biz-theme-primary-text-color) !important;
+            margin-bottom: 10px !important;
+            border-radius: var(--border-radius-md) 0px 0px var(--border-radius-md) !important;
+            font-size: 15px;
+        }
+    }
+
+    .bookmark_list, .bookmark_section {
+        p {
+            font-weight: 600;
+            font-size: 16px;
+            margin-bottom: 5px;
+            color: var(--biz-theme-body-text-color);
+        }
+    }
+
+    .bookmark_list {
+        order: 3;
+        display: grid;
+        .bookmark_div {
+            .bookmark_options {
+                .rename_bookmark, .remove_bookmark {
+                    cursor: pointer;
+                    color: var(--biz-theme-body-text-color);
+                    transition: 0.2s;
+                    &:hover {
+                        color: var(--biz-theme-primary-color);
+                    }
+                }
+            }
+            .bookmark_rename_section, .bookmark_options {
+                position: absolute;
+                z-index: 10;
+                background-color: var(--biz-theme-body-color);
+                border-radius: 6px;
+                min-width: 100px;
+                top: calc(100% + -8px);
+                right: 20px;
+            }
+            a.bookmark_tag {
+                width: 48px;
+                height: 40px;
+                line-height: 40px;
+                padding: 0 !important;
+                margin-bottom: 10px !important;
+                border-radius: var(--border-radius-md) 0px 0px var(--border-radius-md) !important;
+                background: var(--biz-theme-primary-rgba) !important;
+                border-color: var(--biz-theme-primary-rgba) !important;
+                color: #fff !important;
+            }
+            position: relative;
+        }
+    }
+    .bookmark_section {
+        order: 2;
+        .bookmark_page_add {
+            border-radius: 6px;
+            border: none !important;
+            .add_bookmark {
+                border: 0 !important;
+            }
+            .cancel_bookmark{
+                margin-right: 0 !important;
+            }
+        }
+        .dropdown-menu.show {
+            padding: 6px 12px;
+            top: 5px !important;
+        }
+        .dropdown-toggle::after {
+            border: 0 !important;
+            content: unset !important;
+        }
+    }
+
+    .header_menu_right_content {
+        right: 0px;
+        top: 50%;
+        z-index: 85 !important;
+
+        @include media-breakpoint-up(lg){
+            position: fixed !important;
+            transform: translateY(-50%);
+            display: grid !important;
+        }
+        @include media-breakpoint-down(lg){
+            padding: 0 !important;
+            margin-left: auto !important;
+            display: none !important;
+            /* .bookmark_list, .bookmark_section, .magnifier_section, .fullscreen_section, .search_view{
+                display: none!important;
+            } */
+        }
+        .magnifier_section {
+            order: 1;
+            .zoom-style {
+                // border: 1px solid #e2e2e2;
+                border-radius: 20px;
+                padding: 2px;
+            }
+            .zoom-style-box {
+                padding: 3px 7px;
+                border: 1px solid #e2e2e2;
+                border-radius: 3rem;
+                z-index: 1200;
+                box-shadow: var(--box-shadow-common);
+                transform: translate(-130px, -10px);
+            }
+            .zoom_value {
+                font-weight: 600;
+                // font-size: 16px;
+            }
+            .zoom-reset {
+                border-radius: var(--border-radius-md) !important;
+                margin: 0 !important;
+            }
+            .minus,.plus {
+                font-size: 23px;
+                text-align: center;
+                font-weight: 600;
+                width: 25px;
+                height: 25px;
+                // border-radius: 50% !important;
+                line-height: 23px;
+                padding: 0 !important;
+                margin: 2px !important;
+                border-color: #dee2e6 !important;
+                &:hover {
+                    background: var(--biz-theme-secondary-color);
+                }
+            }
+        }
+        .theme_selector {
+            .theme-edit {
+                cursor: pointer;
+                span {
+                    width: 40px;
+                    height: 40px;
+                    background-color: white;
+                    line-height: 40px;
+                    padding-left: 14px;
+                    color: #000000 !important;
+                }
+            }
+        }
+        .form-switch {
+            .label {
+                width: 50px;
+                height: 26px;
+                background-color: #111;
+                display: flex;
+                border-radius: 50px;
+                align-items: center;
+                justify-content: space-between;
+                padding: 5px;
+                position: relative;
+                transform: scale(1.5);
+            }
+        }
+    }
+}
+
+body.o_web_client.dark_mode {
+    .header_menu_right_content {
+        .magnifier_section {
+            .zoom-style-box {
+                background-color: var(--biz-theme-secondary-color) !important;
+                color: var(--biz-theme-secondary-text-color) !important;
+            }
+        }
+        .bookmark_page_add, .bookmark_rename_section {
+            .form-control {
+                background-color: var(--biz-theme-secondary-color) !important;
+                color: var(--biz-theme-secondary-text-color) !important;
+            }
+
+        }
+    }
+}

spiffy_theme_backend/static/src/scss/burger_menu.scss

@@ -0,0 +1,94 @@
+.o_burger_menu {
+    .o_burger_menu_topbar {
+        .dropdown-toggle {
+            .fa {
+                &:before{
+                    font-family: 'remixicon' !important;
+                    content: "\ea6e";
+                    vertical-align: inherit;
+                }
+            }
+            &.active {
+                .fa {
+                    &:before{
+                        content: "\ea4e" !important;
+                    }
+                }
+                background: transparent !important;
+                color: var(--biz-theme-primary-text-color) !important;
+            }
+        }
+        background-color: rgba(255, 255, 255, 0.05);
+        border-radius: var(--border-radius-lg);
+        margin-bottom: 1rem;
+    }
+    .o_burger_menu_content {
+        .o_user_menu_mobile {
+            .dropdown-item {
+                padding: 7px 0 7px 10px !important;
+                color: var(--biz-theme-primary-text-color) !important;
+                min-height: unset;
+                font-size: inherit !important;
+                line-height: unset;
+            }
+            .dropdown-divider{
+                border-color: #dee2e6 !important;
+                margin-left: 10px !important;
+                margin-right: 10px !important;
+            }
+            // background-color: var(--biz-theme-body-color);
+            margin-top: 0 !important;
+            border-radius: var(--border-radius-lg);
+            padding: 10px;
+        }
+        ul.ps-0.mb-0 {
+            li.py-3.fs-4 {
+                height: 35px !important;
+                line-height: 35px !important;
+                min-height: 35px;
+                font-size: inherit;
+                background-color: rgba(255, 255, 255, 0.05) !important;
+                color: var(--biz-theme-primary-text-color) !important;
+                border-radius: var(--border-radius-lg);
+                padding: 0 !important;
+                padding-left: 16px !important;
+                margin-top: 10px;
+            }
+            li.ps-0 {
+                .py-3.bg-transparent {
+                    height: 35px !important;
+                    line-height: 35px !important;
+                    min-height: 35px;
+                    font-size: inherit;
+                    background-color: rgba(255, 255, 255, 0.05) !important;
+                    color: var(--biz-theme-primary-text-color) !important;
+                    border-radius: var(--border-radius-lg);
+                    padding: 0 !important;
+                    padding-left: 16px !important;
+                    margin-top: 10px;
+                    margin-bottom: 10px;
+                }
+                ul.ps-0 {
+                    li.py-3 {
+                        padding: 7px 0 7px 0 !important;
+                        color: var(--biz-theme-primary-text-color) !important;
+                        min-height: unset;
+                    }
+                }
+            }
+        }
+        ul {
+            background-color: transparent !important;
+            box-shadow: none !important;
+        }
+        background-color: transparent !important;
+        .o_burger_menu_companies{
+            @include media-breakpoint-down(lg){
+                display: none !important;
+            }
+        }
+    }
+    background-color: var(--biz-theme-primary-color);
+    padding: 10px;
+    max-width: 300px;
+}

spiffy_theme_backend/static/src/scss/calendear_view.scss

@@ -0,0 +1,114 @@
+body.o_web_client {
+    .o_calendar_sidebar_container {
+        padding-right: 0 !important;
+
+        .o_calendar_filter .o_calendar_filter_item .o_cw_filter_input_bg.o_beside_avatar {
+            border: 0 !important;
+        }
+    }
+
+    .o_calendar_sidebar_container,.o_calendar_mini,.ui-datepicker {
+        background-color: var(--biz-theme-body-color) !important;
+        color: var(--biz-theme-body-text-color) !important;
+
+        a {
+            color: var(--biz-theme-body-text-color) !important;
+        }
+    }
+
+    .o_calendar_sidebar_container{
+        .ui-datepicker{
+            td.ui-datepicker-current-day a{
+                background-color: var(--biz-theme-primary-rgba);
+                color: var(--biz-theme-primary-text-color) !important;
+            }
+        }
+    }
+
+    .o_cw_filter_color_7 .o_cw_filter_input_bg{
+        background: var(--biz-theme-primary-rgba);
+
+        .fa{
+            line-height: inherit;
+        }
+    }
+
+    .fc {
+        .fc-row{
+            .fc-content-skeleton, .fc-mirror-skeleton {
+                table, td{
+                    background: unset !important;
+                }
+            }
+        }
+    }
+
+    .o_calendar_view {
+        .o_calendar_widget {
+            .fc-dayGridMonth-view{
+                .fc-bg{
+                    .fc-today{
+                        background: transparent;
+                    }
+                }
+            }
+            .fc-timeGridWeek-view, .fc-timeGridDay-view {
+                .fc-today {
+                    span {
+                        color: var(--biz-theme-primary-text-color) !important;
+                    }
+                    border-radius: var(--border-radius-lg);
+                    background: var(--biz-theme-primary-color) !important;
+                    color: var(--biz-theme-primary-text-color);
+                }
+            }
+        }
+        .fc-view {
+            background-color: var(--biz-theme-body-color) !important;
+            color: var(--biz-theme-body-text-color) !important;
+        }
+        .fc-day-grid {
+            background-color: transparent !important;
+        }
+        table {
+            background-color: var(--biz-theme-body-color) !important;
+            color: var(--biz-theme-body-text-color) !important;
+
+            td {
+                span {
+                    color: var(--biz-theme-body-text-color) !important;
+                }
+
+            }
+        }
+    }
+}
+
+body.o_web_client.dark_mode {
+    .o_calendar_view {
+        table {
+            td {
+                border-right: transparent !important;
+                border-left: transparent !important;
+            }
+        }
+
+        .o_calendar_widget {
+            .fc-widget-header {
+                border-color: transparent !important;
+                border-bottom-color: #818181!important;
+
+            }
+
+            .fc-timeGridWeek-view {
+                .fc-axis.fc-time {
+                    border-top-color: transparent !important;
+                }
+
+                .fc-slats tr:first-child td.fc-widget-content:last-child {
+                    box-shadow: inset 0 1px 0 #545454 !important;
+                }
+            }
+        }
+    }
+}

spiffy_theme_backend/static/src/scss/chat_window.scss

@@ -0,0 +1,34 @@
+body.o_web_client {
+    .o_ChatWindowManager{
+        .o_MessageList, .o_MessageList_separatorLabel, .o_ChatWindow, .o_Composer, .o_Message, .o_Composer_textInput, .o_Composer_toolButtons{
+            background-color: var(--biz-theme-body-color);
+            color: var(--biz-theme-body-text-color);
+        }
+        input,textarea,.o_Composer_button{
+            color: var(--biz-theme-body-text-color);
+            background-color: transparent;
+            box-shadow: none;
+            outline: none;
+        }
+        .o_ChatWindow{
+            border-top-left-radius: var(--border-radius-lg) !important;
+            border-top-right-radius: var(--border-radius-lg) !important;
+            .o_ChatWindowHeader{
+                background-color: var(--biz-theme-primary-color) !important;
+                color: var(--biz-theme-primary-text-color) !important;
+                border-top-left-radius: var(--border-radius-lg);
+                border-top-right-radius: var(--border-radius-lg);
+            }
+            .o_ChatWindow_newMessageForm{
+                .o_ChatWindow_newMessageFormLabel{
+                    color: var(--biz-theme-body-text-color);
+                }
+                .o_ChatWindow_newMessageFormInput{
+                    border: 0;
+                    border-bottom: 1px solid;
+                    border-color: var(--biz-theme-body-text-color) !important;
+                }
+            }
+        }
+    }
+}

spiffy_theme_backend/static/src/scss/checkbox_styles.scss

@@ -0,0 +1,233 @@
+body.o_web_client {
+    #theme_radio_style, #theme_checkbox_style {
+        .custom-control-label {
+            .row {
+                width: 250px;
+                height: 20px;
+            }
+        }
+    }
+
+    .biz-custom-checkbox1 {
+        position: relative;
+
+        &::before {
+            position: absolute;
+            content: "";
+            display: inline-block;
+            outline: 0 !important;
+            border: 1px solid var(--biz-theme-primary-color) !important;
+            border-radius: 50% !important;
+            background-color: var(--biz-theme-primary-color) !important;
+            height: 14px;
+            width: 14px;
+            transform: none !important;
+        }
+
+        &.active {
+            &::after {
+                position: absolute;
+                content: "\f00c";
+                font-family: 'fontawesome' !important;
+                color: var(--biz-theme-primary-text-color) !important;
+                outline: 0 !important;
+                border: 0 !important;
+                background-color: unset !important;
+                height: 14px;
+                width: 14px;
+                margin-top: -1px;
+                transform: none !important;
+                font-size: 10px;
+                margin-left: 2px;
+            }
+        }
+    }
+
+    .biz-custom-checkbox2 {
+        position: relative;
+
+        &::before {
+            position: absolute;
+            content: "";
+            display: inline-block;
+            outline: 0 !important;
+            border: 1px solid var(--biz-theme-primary-color) !important;
+            border-radius: 0 !important;
+            background-color: var(--biz-theme-primary-color) !important;
+            height: 14px;
+            width: 14px;
+            transform: none !important;
+        }
+
+        &.active {
+            &::after {
+                position: absolute;
+                content: "\f00c";
+                font-family: 'fontawesome' !important;
+                color: var(--biz-theme-primary-text-color) !important;
+                outline: 0 !important;
+                border: 0 !important;
+                background-color: unset !important;
+                height: 14px;
+                width: 14px;
+                margin-top: -1px;
+                transform: none !important;
+                font-size: 10px;
+                margin-left: 2px;
+            }
+        }
+    }
+
+    .biz-custom-checkbox3 {
+        position: relative;
+
+        &::before {
+            position: absolute;
+            content: "";
+            display: inline-block;
+            outline: 0 !important;
+            border: 2px solid var(--biz-theme-primary-color) !important;
+            border-radius: 0 !important;
+            background-color: transparent !important;
+            height: 14px;
+            width: 14px;
+            transform: none !important;
+        }
+
+        &.active {
+            &::after {
+                position: absolute;
+                content: "\f00c";
+                font-family: 'fontawesome' !important;
+                color: var(--biz-theme-primary-color) !important;
+                outline: 0 !important;
+                border: 0 !important;
+                background-color: unset !important;
+                height: 14px;
+                width: 14px;
+                margin-top: -1px;
+                transform: none !important;
+                font-size: 10px;
+                margin-left: 2px;
+            }
+        }
+    }
+
+    .biz-custom-checkbox4 {
+        position: relative;
+
+        &::before {
+            position: absolute;
+            content: "";
+            display: inline-block;
+            outline: 0 !important;
+            border: 2px solid var(--biz-theme-primary-color) !important;
+            border-radius: 50% !important;
+            background-color: transparent !important;
+            height: 14px;
+            width: 14px;
+            transform: none !important;
+        }
+
+        &.active {
+            &::after {
+                position: absolute;
+                content: "\f00c";
+                font-family: 'fontawesome' !important;
+                color: var(--biz-theme-primary-color) !important;
+                outline: 0 !important;
+                border: 0 !important;
+                background-color: unset !important;
+                height: 10px;
+                width: 10px;
+                margin-top: -1px;
+                transform: none !important;
+                font-size: 10px;
+                margin-left: 2px;
+            }
+        }
+    }
+}
+
+body.o_web_client{
+    .o-checkbox .form-check-input[type="checkbox"]{
+        height: 1rem;
+        width: 1rem;
+        background-image: unset;
+        background-color: transparent !important;
+        outline: 0 !important;
+    }
+}
+
+body.o_web_client.checkbox_style_1 {
+    .o-checkbox .form-check-input[type="checkbox"]{
+        border: 1px solid var(--biz-theme-primary-color) !important;
+        border-radius: 50% !important;
+        
+        &:checked{
+            background-image: url("/spiffy_theme_backend/static/src/image/checked.png") !important;
+            background-size: 0.8rem;
+            background-color: var(--biz-theme-primary-color) !important;
+            display: inline-block;
+        }
+    }
+}
+
+body.o_web_client.checkbox_style_2 {
+
+    .o-checkbox .form-check-input[type="checkbox"]{
+        border: 1px solid var(--biz-theme-primary-color) !important;
+        border-radius: 0 !important;
+        
+        &:checked{
+            background-image: url("/spiffy_theme_backend/static/src/image/checked.png") !important;
+            background-size: 0.8rem;
+            background-color: var(--biz-theme-primary-color) !important;
+            display: inline-block;
+        }
+    }
+}
+
+body.o_web_client.checkbox_style_3 {
+    .o-checkbox .form-check-input[type="checkbox"]{
+        border: 2px solid var(--biz-theme-primary-color) !important;
+        border-radius: 0 !important;
+        
+        &:checked{
+            position: relative;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            &::after{
+                position: absolute;
+                content: "\f00c" !important;
+                font-family: 'FontAwesome' !important;
+                font-size: 0.8rem;
+                display: inline-block;
+                color: var(--biz-theme-primary-color) !important
+            }
+        }
+    }
+}
+
+body.o_web_client.checkbox_style_4 {
+    .o-checkbox .form-check-input[type="checkbox"]{
+        border: 1px solid var(--biz-theme-primary-color) !important;
+        border-radius: 50% !important;
+        
+        &:checked{
+            position: relative;
+            display: flex;
+            align-items: center;
+            justify-content: end;
+            &::after{
+                position: absolute;
+                content: "\f00c" !important;
+                font-family: 'FontAwesome' !important;
+                font-size: 0.8rem;
+                display: inline-block;
+                color: var(--biz-theme-primary-color) !important;
+            }
+        }
+    }
+}

spiffy_theme_backend/static/src/scss/common_view.scss

@@ -0,0 +1,634 @@
+@include media-breakpoint-down(lg){
+    .o-hidden-ios, #developer_tool{
+        display: none !important;
+    }
+}
+
+body.o_web_client {
+    background-color: var(--biz-theme-body-color) !important;
+    color: var(--biz-theme-body-text-color) !important;
+
+    .text-primary{
+        color: var(--biz-theme-primary-color) !important;
+    }
+
+    .text-odoo{
+        color: var(--biz-theme-primary-color) !important;
+    }
+
+    .bg-odoo{
+        background-color: var(--biz-theme-primary-color) !important;
+    }
+
+    .border-primary {
+        border-color: var(--biz-theme-primary-color) !important;
+    }
+
+    .o_spreadsheet_dashboard_action{
+        background-color: var(--biz-theme-body-color);
+
+        .o_renderer .o-spreadsheet .o-grid{
+            background-color: var(--biz-theme-secondary-color);
+        }
+    }
+    .o-scrollbar{
+        background-color: var(--biz-theme-secondary-color);
+    }
+    .o_spreadsheet_dashboard_action .o_cp_top_right .o-filter-value .o_field_many2manytags, .o_spreadsheet_dashboard_action .o_cp_top_right .o-filter-value .date_filter_values{
+        align-items: center;
+    }
+
+    .o_field_statusbar{
+        > .o_statusbar_status{
+            > .o_arrow_button{
+                &.disabled{
+                    border: 1px solid var(--biz-theme-primary-color) !important;
+                    color: var(--biz-theme-secondary-text-color) !important;
+                }
+                &.o_arrow_button_current.disabled {
+                    background-color: var(--biz-theme-primary-color) !important;
+                    color: var(--biz-theme-primary-text-color) !important;
+                    &:after, &:before {
+                        border-left-color: var(--biz-theme-primary-color) !important;
+                    }
+                }
+            }
+        }
+    }
+    input[type="color"] {
+        appearance: none;
+        padding: 0;
+        border: none;
+        border-radius: var(--border-radius-lg);
+        width: 25px;
+        height: 25px;
+        &::-webkit-color-swatch {
+            border: none;
+            border-radius: var(--border-radius-lg);
+            padding: 0;
+        }
+        &::-webkit-color-swatch-wrapper {
+            border: none;
+            border-radius: var(--border-radius-lg);
+            padding: 0;
+        }
+    }
+
+    .o_main_navbar .o_menu_toggle, .o_main_navbar .o_navbar_apps_menu {
+        font-size: inherit;
+    }
+
+    .o_DiscussSidebarItem_counter {
+        background-color: var(--biz-theme-primary-color) !important;
+        color: var(--biz-theme-primary-text-color) !important;
+    }
+
+    .o_loading_indicator {
+        > span {
+            background-color: var(--biz-theme-primary-color) !important;
+        }
+        background-color: var(--biz-theme-primary-color) !important;
+    }
+
+    .note-popover .popover .popover-body, .panel-heading.note-toolbar{
+        background-color: var(--biz-theme-secondary-color)!important;
+        color: var(--biz-theme-secondary-text-color)!important;
+        .btn{
+            background: var(--biz-theme-secondary-color)!important;
+        }
+    }
+    .bs-popover-bottom > .popover-arrow::after, .bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow::after{
+        border-bottom-color: var(--biz-theme-secondary-color);
+    }
+
+    .o_datepicker {
+        .o_datepicker_button{
+            top: 10px;
+        }
+    }
+
+    .o_dropdown_menu, .dropdown-menu{
+        background-color: var(--biz-theme-secondary-color)!important;
+        border-color: var(--biz-theme-secondary-color)!important;
+        color: var(--biz-theme-secondary-text-color)!important;
+        border-radius: var(--border-radius-md) !important;
+        .dropdown-item{
+            color: var(--biz-theme-body-text-color)!important;
+            &:hover, &:focus{
+                background-color: var(--primary-rgba) !important;
+                color: var(--biz-theme-primary-text-color) !important;
+            }
+        }
+        .o_menu_item{
+            > .dropdown-item{
+                color: var(--biz-theme-body-text-color)!important;
+
+                &:hover, &:focus{
+                    background-color: var(--primary-rgba) !important;
+                    color: var(--biz-theme-primary-text-color) !important;
+                }
+            }
+        }
+    }
+    input, textarea{
+        background-color: transparent !important;
+        color: var(--biz-theme-body-text-color) !important;
+
+        &:focus{
+            color: var(--biz-theme-body-text-color);
+        }
+        &::placeholder{
+            color: #c9d0d5;
+            opacity: 0.8;
+        }
+    }
+
+    .form-control{
+        &:focus{
+            border-color: var(--biz-theme-primary-color);
+        }
+    }
+    select{
+        line-height: var(--input-height);
+        background-color: transparent !important;
+        color: var(--biz-theme-body-text-color) !important;
+        option{
+            border-radius: var(--border-radius-md);
+            color: var(--biz-theme-body-text-color)!important;
+            background-color: var(--biz-theme-body-color);
+        }
+    }
+    .o_input{
+        min-height: var(--input-height);
+        border: 1px solid #e4e6ef;
+        border-radius: var(--border-radius-md);
+        background-color: var(--biz-theme-secondary-color);
+        > .o_input {
+            min-height: calc(var(--input-height) - 2px);
+            border: 0 !important;
+            padding: 0 !important;
+        }
+        &:focus{
+            border-color: var(--primary-rgba)!important;
+        }
+
+        &.o_field_tags{
+            align-items: center;
+        }
+    }
+    .o_form_view input.o_field_translate, .o_form_view textarea.o_field_translate{
+        padding-right: 25px !important;
+    }
+    .o_form_view span.o_field_translate{
+        padding: 0 5px 0 0 !important;
+        line-height: var(--input-height);
+    }
+    .o_form_label.o_required_modifier{
+        color: var(--biz-theme-primary-color);
+    }
+    .o_required_modifier.o_input, .o_required_modifier .o_input{
+        border-color: var(--biz-theme-primary-color);
+        background-color: transparent !important;
+    }
+
+    .o_field_property_definition .o_field_property_definition_type .o_input_dropdown input{
+        background-position-y: 9px !important;
+    }
+
+    .o_field_invalid{
+        .o_input{
+            border-color: #dc3545 !important;
+        }
+    }
+
+    .list-group-item-light, .list-group-item{
+        background-color: var(--biz-theme-secondary-color) !important;
+        color: var(--biz-theme-secondary-text-color) !important;
+    }
+    /* Many2one Field Suggestion options dropdown style */
+    .o_dialog_container.modal-open {
+        .modal{
+            .modal-content{
+                .o-dropdown.dropup > .o-dropdown--menu, .o-dropdown.dropdown > .o-dropdown--menu, .o-dropdown.dropstart > .o-dropdown--menu, .o-dropdown.dropend > .o-dropdown--menu{
+                    left: auto !important;
+                }
+            }
+        }
+    }
+
+    .ui-autocomplete{
+        border-radius: var(--border-radius-lg);
+        overflow: auto;
+        .ui-menu-item{
+            .ui-menu-item-wrapper{
+                color: var(--biz-theme-body-text-color) !important;
+                &.ui-state-active{
+                    background-color: var(--biz-theme-primary-color) !important;
+                    color: var(--biz-theme-primary-text-color) !important;
+                }
+            }
+        }
+    }
+
+    .o_popover, .o_cw_popover, .o_PopoverView{
+        background-color: var(--biz-theme-secondary-color);
+        color: var(--biz-theme-secondary-text-color);
+        border-radius: var(--border-radius-lg);
+        .o_popover_header{
+            border-top-left-radius: var(--border-radius-lg);
+            border-top-right-radius: var(--border-radius-lg);
+            background-color: var(--biz-theme-secondary-color);
+        }
+    }
+    .o-tooltip{
+        .o-tooltip--string{
+            background-color: transparent;
+        }
+    }
+    .o_cw_popover{
+        background-color: var(--biz-theme-secondary-color);
+        color: var(--biz-theme-secondary-text-color);
+        border-radius: var(--border-radius-lg);
+
+        .badge{
+            span.o_badge_text{
+                color: unset !important;
+            }
+        }
+        .card-header{
+            border-top-right-radius: var(--border-radius-lg);
+            border-top-left-radius: var(--border-radius-lg);
+        }
+        .card-footer{
+            border-bottom-right-radius: var(--border-radius-lg);
+            border-bottom-left-radius: var(--border-radius-lg);
+        }
+
+        .card-header, .card-footer, .popover-header{
+            background-color: var(--biz-theme-secondary-color) !important;
+            color: var(--biz-theme-secondary-text-color) !important;
+        }
+        .o_cw_popover_close{
+            color: var(--biz-theme-secondary-text-color) !important;
+        }
+    }
+
+    .o_onboarding_container{
+        @include media-breakpoint-down(lg) {
+            padding-left: 15px;
+            padding-right: 15px;
+        }
+        .o_onboarding_main{
+            border-radius: var(--border-radius-lg);
+            .o_onboarding_step{
+                .o_onboarding_step_action{
+                    border-color: white !important;
+                    color: white !important;
+                }
+                .o_onboarding_step_action__done{
+                    color: white !important;
+                    border: unset;
+                }
+            }
+        }
+    }
+    .btn.o_select_file_button, .btn.o_clear_file_button{
+        padding: 0.25rem !important;
+    }
+
+    .o_view_nocontent{
+        background-image: radial-gradient(at 50% 50%, var(--biz-theme-secondary-color) 0px, var(--biz-theme-secondary-color) 100%);
+        border-radius: var(--border-radius-lg);
+        .o_nocontent_help{
+            border-radius: var(--border-radius-lg);
+            background-color: var(--biz-theme-body-color);
+            color: var(--biz-theme-body-text-color);
+            box-shadow: 0 0 120px 100px var(--biz-theme-secondary-color);
+
+            > p:first-of-type{
+                color: var(--biz-theme-body-text-color);
+            }
+        }
+    }
+
+    .o_content {
+        .o_graph_renderer {
+            padding: 30px 0 30px 0px !important;
+        }
+
+        .nav.nav-tabs {
+            border-bottom: 0px !important;
+            background-color: transparent;
+            .nav-item {
+                margin-bottom: 0;
+                .nav-link {
+                    padding: calc(.55rem + 1px) calc(1.25rem + 1px);
+                    margin-right: 0.25rem;
+                    font-weight: 500;
+                }
+            }
+        }
+    }
+
+
+    /* All Btn Class style */
+    
+    .btn {
+        border-radius: var(--border-radius-md) !important;
+        padding: 0.6rem 1rem !important;
+
+        &:hover{
+            color: var(--biz-theme-primary-rgba);
+        }
+    }
+    a{
+        color: var(--biz-theme-primary-color);
+    }
+
+    .btn.btn-link {
+        background-color: unset !important;
+        color: var(--biz-theme-primary-color) !important;
+        border: unset !important;
+    }
+
+    .btn-primary, .btn-fill-primary {
+        background-color: var(--biz-theme-primary-color) !important;
+        border-color: var(--biz-theme-primary-color) !important;
+        color: var(--biz-theme-primary-text-color) !important;
+        opacity: 0.9;
+
+        &:hover {
+            opacity: 1;
+        }
+
+        &:active {
+            background-color: var(--biz-theme-primary-color) !important;
+            color: var(--biz-theme-primary-text-color) !important;
+            opacity: 1;
+        }
+    }
+    .btn-outline-primary{
+        color: var(--biz-theme-primary-color) !important;
+        background-color: transparent !important;
+        border:1px solid var(--biz-theme-primary-color) !important;
+        &:hover{
+            background-color: var(--biz-theme-primary-color) !important;
+            color: var(--biz-theme-primary-text-color) !important;
+        }
+    }
+
+    .btn-secondary, .btn-fill-secondary, .btn-light:not(.bookmark_tag), .btn-fill-light {
+        background-color: var(--biz-theme-secondary-color) !important;
+        color: var(--biz-theme-secondary-text-color) !important;
+        opacity: 0.9;
+
+        &:hover {
+            background-color: var(--biz-theme-secondary-color) !important;
+            color: var(--biz-theme-secondary-text-color) !important;
+            opacity: 1;
+        }
+
+        &:active {
+            background-color: var(--biz-theme-secondary-color) !important;
+            color: var(--biz-theme-secondary-text-color) !important;
+            opacity: 1;
+        }
+    }
+
+    .badge{
+        border-radius: var(--border-radius-md);
+        &.text-primary{
+            border: 1px solid var(--biz-theme-primary-color) !important;
+            outline: none !important;
+        }
+    }
+
+    .badge-primary,.text-bg-primary {
+        background-color: var(--biz-theme-primary-color) !important;
+        color: var(--biz-theme-primary-text-color) !important;
+    }
+
+    .badge-secondary,.text-bg-secondary  {
+        background-color: var(--biz-theme-secondary-color) !important;
+        color: var(--biz-theme-primary-text-color) !important;
+    }
+    .text-muted {
+        color: var(--biz-theme-body-text-color) !important;
+    }
+    .o_ActivityButtonView_icon.text-muted{
+        color: rgba(73, 80, 87, 0.76) !important;
+    }
+
+    .form-switch .form-check-label {
+        padding-left: 52px;
+        position: relative;
+        
+    }
+    .form-switch .form-check-input{
+        display: none !important;
+    }
+
+    .custom-control-input:focus:not(:checked) ~ .custom-control-label::before,
+    .custom-control-input:not(:disabled):active ~ .custom-control-label::before{
+        border-color: var(--biz-theme-primary-color);
+        background-color: transparent;
+    }
+
+    .form-switch .form-check-label::before {
+        content: '';
+        display: inline-block;
+        position: absolute;
+        width: 4rem !important;
+        height: 1.75rem !important;
+        border-radius: 2rem !important;
+        pointer-events: all !important;
+        top: 0 !important;
+        border-color: var(--biz-theme-primary-color) !important;
+        background-color: transparent;
+        border: 1px solid;
+        left: 0;
+    }
+
+    .form-switch .form-check-label::after {
+        content: '';
+        display: inline-block;
+        position: absolute;
+        width: calc(1.78rem - 5px) !important;
+        height: calc(1.78rem - 5px) !important;
+        border-radius: 2rem !important;
+        top: 2px !important;
+        left: 2px !important;
+        background-color: var(--biz-theme-primary-color) !important;
+    }
+
+    .custom-control-input:checked~.custom-control-label::before {
+        color: #7639ed;
+        border-color: var(--biz-theme-primary-color);
+        background-color: var(--biz-theme-primary-color);
+    }
+    .form-switch .form-check-input:checked~.form-check-label::before{
+        background-color: var(--biz-theme-primary-color) !important;
+    }
+    .form-switch .form-check-input:checked~.form-check-label::after {
+        transform: translateX(2.2rem);
+        background-color: var(--biz-theme-primary-text-color) !important;
+        content: '';
+        display: inline-block;
+        position: absolute;
+    }
+
+    // v15 changes
+    .o_main_navbar .dropdown .dropdown-toggle, .o_main_navbar .o_menu_sections .dropdown .dropdown-toggle, .o_main_navbar .o_menu_systray .dropdown .dropdown-toggle, .o_main_navbar .o_nav_entry, .o_main_navbar .o_menu_sections .o_nav_entry, .o_main_navbar .o_menu_systray .o_nav_entry, .o_main_navbar > .o_menu_sections > div, .o_main_navbar > .o_menu_sections > div > a, .o_main_navbar .o_menu_systray > div, .o_main_navbar .o_menu_systray > div > a, .o_main_navbar .o_menu_toggle, .o_main_navbar .o_navbar_apps_menu, .o_main_navbar .o_menu_brand {
+        height: unset;
+        background: transparent;
+        color: var(--biz-theme-primary-text-color);
+    }
+    .o_data_row.text-info {
+        color: inherit !important;
+    }
+
+    // v16 changes
+    a:not([href]):not([tabindex]) {
+        color: inherit;
+        text-decoration: none;
+        cursor: pointer;
+    }
+
+    .o_EmojiCategoryBarView{
+        background-color: var(--biz-theme-secondary-color) !important;
+        color: var(--biz-theme-secondary-text-color) !important;
+    }
+    .o_EmojiPickerView{
+        .o_EmojiPickerHeaderView{
+            border-top-left-radius: var(--border-radius-lg);
+            border-top-right-radius: var(--border-radius-lg);
+            .o_EmojiCategoryBarView{
+                border-top-left-radius: var(--border-radius-lg);
+
+                .o_EmojiCategoryView{
+                    &.bg-view{
+                        background-color: #fff !important;
+                    }
+                }
+            }
+        }
+    }
+
+    .table{
+        color: var(--biz-theme-body-text-color);
+    }
+    .o_field_CopyClipboardText > div, .o_field_CopyClipboardURL > div, .o_field_CopyClipboardChar > div{
+        border: 1px solid var(--biz-theme-primary-color) !important;
+        color: var(--biz-theme-primary-color) !important;
+        border-radius: var(--border-radius-md) !important;
+    }
+    .o_ActivityMenuView_activityGroup{
+        *{
+            color: var(--biz-theme-secondary-text-color) !important;
+        }
+        &:hover{
+            background-color: var(--biz-theme-body-color) !important;
+            color: var(--biz-theme-body-text-color) !important;
+        }
+    }
+    .o_ActivityMenuView_activityGroupActionButtons{
+        .btn{
+            padding: 0 !important;
+            padding-left: 9px !important;
+        }
+    }
+}
+
+.text-700{
+    color: var(--biz-theme-body-text-color) !important;
+}
+
+body.o_web_client {
+    .custom-control-label.o_form_label {
+        padding-left: 4px;
+        padding-right: 4px;
+    }
+
+    .o_base_settings.oe_form_configuration {
+        .o_setting_container {
+            .settings {
+                >.app_settings_block {
+                    h2 {
+                        margin-top: 0 !important;
+                    }
+                }
+            }
+        }
+    }
+    .o_field_widget .o_input_dropdown .o_dropdown_button:after, .o_field_widget .o_input_dropdown .o_datepicker_button:after, .o_field_widget.o_datepicker .o_dropdown_button:after, .o_field_widget.o_datepicker .o_datepicker_button:after {
+        border-top: 4px solid;
+        border-top-color: inherit;
+    }
+    .badge.badge-pill,.badge.rounded-pill {
+        max-height: 20px;
+    }
+    .dropdown-item.active:not(.dropdown-item_active_noarrow):before, .dropdown-item.selected:not(.dropdown-item_active_noarrow):before {
+        color: var(--biz-theme-primary-color);
+    }
+    .card{
+        background-color: var(--biz-theme-secondary-color);
+    }
+
+    .card-body {
+        background-color: var(--biz-theme-secondary-color) !important;
+        color: var(--biz-theme-secondary-text-color) !important;
+    }
+}
+
+body.o_web_client.dark_mode {
+    hr {
+        border-color: #414141 !important;
+        background: #414141 !important;
+    }
+
+    .o_field_widget .o_input_dropdown .o_dropdown_button:after, .o_field_widget .o_input_dropdown .o_datepicker_button:after, .o_field_widget.o_datepicker .o_dropdown_button:after, .o_field_widget.o_datepicker .o_datepicker_button:after {
+        border-top-color: white;
+    }
+
+    .border-bottom{
+        border-color: #414141 !important;
+    }
+
+    * {
+        border-color: #414141 !important;
+    }
+
+    .o_input{
+        &:focus{
+            border-color: var(--primary-rgba) !important;
+        }
+    }
+    .o_field_property_definition .o_field_property_definition_type .o_input_dropdown input{
+        background-blend-mode: screen;
+    }
+    .o_required_modifier.o_input, .o_required_modifier .o_input{
+        border-color: var(--biz-theme-primary-color);
+    }
+    .text-900, h1, .o_form_view .o_form_label:not(.o_required_modifier) {
+        color: inherit !important;
+    }
+    h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .o_kanban_view.o_kanban_dashboard .o_kanban_record .o_kanban_card_manage_pane.container div[class*="col-"] > .o_kanban_card_manage_title, .o_kanban_view.o_kanban_dashboard .o_kanban_record .o_kanban_card_manage_pane.o_container_small div[class*="col-"] > .o_kanban_card_manage_title, .h6 {
+        color: inherit !important;
+    }
+
+    .table-hover > tbody > tr:hover > * {
+        color: inherit;
+    }
+
+    .o_notebook .nav{
+        background-color: var(--biz-theme-secondary-color);
+    }
+}
+
+/* .o_gradient{background: linear-gradient(150deg, #714B67 20%, #503047 80%) !important;}
+.o_gradient_inverse{background: linear-gradient(130deg, #5b7687 30%, #485761 100%) !important;}
+.o_gradient_alpha{background: linear-gradient(130deg, #00a09d 30%, #00a09d 100%) !important;}
+.o_gradient_beta{background: linear-gradient(130deg, #5b899e 30%, #00a09d 100%) !important;}
+.o_gradient_gamma{background: linear-gradient(130deg, #fc7c84 30%, #d5653e 100%) !important;}
+.o_gradient_delta{background: linear-gradient(130deg, #00a09d 30%, #e46f78 100%) !important;}
+.o_gradient_epsilon{background: linear-gradient(130deg, #d5653e 30%, #00a09d 100%) !important;} */

spiffy_theme_backend/static/src/scss/controlpannel.scss

@@ -0,0 +1,439 @@
+body.o_web_client{
+    @include media-breakpoint-up(lg) {
+        &:not(.o_fullscreen){
+            .o_action_manager {
+                .o_action {
+                    .o_control_panel {
+                        padding: 15px 0px 15px 0px !important;
+                    }
+                }
+            }
+        }
+    }
+
+    @media (max-width: 767.98px) {
+        .o_control_panel .o_cp_bottom_left, .o_control_panel .o_cp_bottom_right{
+            flex-shrink: unset !important;
+        }
+    }
+    @media (min-width: 768px) and (max-width: 1199.98px) {
+        .o_control_panel .o_cp_top .o_cp_top_left, .o_control_panel .o_cp_top .o_cp_top_right, .o_control_panel .o_cp_bottom .o_cp_bottom_left, .o_control_panel .o_cp_bottom .o_cp_bottom_right{
+            width: 100% !important;
+            padding-bottom: 10px;
+        }
+        .o_form_view_container .o_control_panel .o_cp_top{
+            display: block !important;
+        }
+    }
+    .o_list_selection_box {
+        .o_list_select_domain {
+            font-weight: 400 !important;
+            color: var(--biz-theme-primary-text-color) !important;
+
+            a {
+                color: var(--biz-theme-primary-text-color) !important;
+            }
+        }
+    }
+    .o_control_panel{
+        @include media-breakpoint-up(lg) {
+            padding: 15px;
+            .o_cp_searchview {
+                min-width: 250px !important;
+            }
+        }
+        .fa{
+            font-size: 16px;
+            vertical-align: middle;
+        }
+
+        border-bottom: 0 !important;
+        transition: 0.5s;
+        background-color: var(--biz-theme-body-color) !important;
+        color: var(--biz-theme-body-text-color) !important;
+
+        .btn{
+            box-shadow: var(--box-shadow-common) !important;
+            -moz-box-shadow: var(--box-shadow-common) !important;
+            -webkit-box-shadow: var(--box-shadow-common) !important;
+        }
+
+        .o_form_buttons_view, .o_form_buttons_edit{
+            > button::first-child{
+                margin-right: 0.75rem;
+            }
+        }
+
+        .o_form_statusbar {
+            background-color: transparent !important;
+
+            .o_statusbar_buttons{
+                .btn{
+                    padding: 0.6rem 1rem;
+
+                    &:not(:first-child){
+                        margin-left: 8px;
+                    }
+                }
+            }
+        }
+
+        .o_form_buttons_edit {
+            display: flex;
+            align-items: center;
+        }
+
+        .breadcrumb {
+            background-color: transparent !important;
+            align-items: baseline;
+            .breadcrumb-item {
+                @media (min-width: 768px) {
+                    font-size: 1.85rem;
+                }
+                display: flex;
+                align-items: center;
+                a {
+                    font-size: 1.85rem;
+                    color: var(--biz-theme-primary-color) !important;
+                    white-space: break-spaces;
+                }
+            }
+
+            .breadcrumb-item.o_back_button {
+                a {
+                    font-size: 1.85rem;
+                    color: var(--biz-theme-primary-color) !important;
+                }
+            }
+            .breadcrumb-item.active {
+                font-size: 2.2rem;
+                font-weight: 300;
+                color: var(--biz-theme-body-text-color);
+                span{
+                    opacity: 1;
+                }
+            }
+            .breadcrumb-item+.breadcrumb-item::before {
+                content: "|" !important;
+            }
+            li {
+                max-width: 100% !important;
+            }
+        }
+
+        .o_panel {
+            .o_setting_search {
+                background-color: var(--biz-theme-secondary-color) !important;
+                box-shadow: var(--box-shadow-common) !important;
+                border: 0 !important;
+                border-radius: var(--border-radius-md) !important;
+                padding: 1px 25px 3px 5px;
+                .searchInput{
+                    max-width: unset;
+                    height: 28px;
+                    padding: 0 !important;
+                }
+
+                input, .searchIcon {
+                    background-color: transparent !important;
+                    color: var(--biz-theme-body-text-color) !important;
+                    border-color: var(--biz-theme-body-text-color) !important;
+                }
+                .searchIcon {
+                    right: 20px;
+                }
+            }
+        }
+
+        .o_cp_top {
+            display: flex !important;
+            justify-content: space-between !important;
+            align-items: center !important;
+
+            .o_cp_top_left {
+                // width: auto !important;
+                .o_form_status_indicator{
+                    margin-left: 16px !important;
+                    .o_form_status_indicator_buttons{
+                        gap: 8px;
+                    }
+                }
+
+            }
+
+            .o_cp_top_right {
+                border: 0 !important;
+            }
+            .btn-group{
+                > button{
+                    gap: 8px;
+                }
+            }
+            .o_cp_bottom_right {
+                @media (min-width: 768px) {
+                    column-gap: 8px;
+                }
+                .o_cp_action_menus {
+                    display: flex;
+                    gap: 8px;
+                }
+                .o_cp_pager {
+                    .btn-group {
+                        gap: 8px;
+                    }
+                    padding-left: 0;
+                }
+                .d-flex {
+                    gap: 8px !important;
+                }
+            }
+        }
+
+        .o_cp_bottom {
+            display: flex !important;
+            justify-content: space-between !important;
+            align-items: center !important;
+            margin-top: 15px;
+
+            .o_cp_bottom_left {
+                width: auto !important;
+                gap: 8px;
+                .btn-group {
+                    button.btn.fa {
+                        padding: 6px 10px !important;
+                        font-size: 13px;
+                    }
+                    gap: 8px;
+                }
+                .o_cp_buttons {
+                    gap: 8px;
+                }
+                > .o_cp_action_menus{
+                    padding-left: 8px;
+                    gap: 8px;
+                    .dropdown-toggle{
+                        border: 1px solid transparent !important;
+                        padding: 7px 14px !important;
+                        font-size: inherit;
+                    }
+                }
+                .o_cp_buttons{
+                    > div {
+                        gap: 8px;
+                    }
+                    .o_list_buttons{
+                        display: flex;
+                        align-items: center;
+                        white-space: nowrap;
+                    }
+                    .o_form_buttons_view, .o_list_buttons, .o_form_buttons_edit{
+                        gap: 8px;
+                    }
+                    .o_calendar_buttons{
+                        display: flex;
+                        .o_calendar_navigation_buttons{
+                            display: flex;
+                        }
+                        .o_calendar_scale_buttons .btn-group, .o_calendar_navigation_buttons{
+                            gap: 8px;
+                        }
+                    }
+                }
+            }
+
+            .o_cp_bottom_right {
+                width: auto !important;
+                .btn{
+                    line-height: 21px;
+                }
+                .btn-group{
+                    > .btn-group{
+                        gap: 8px;
+                    }
+                    gap: 8px;
+                }
+                > .o_cp_pager{
+                    &:empty{
+                        padding: 0 !important;
+                    }
+                    padding-left: 8px !important;
+                    .o_pager{
+                        .o_pager_counter{
+                            margin: 0 8px !important;
+                        }
+                    }
+                }
+            }
+        }
+
+        .o_cp_switch_buttons {
+            .btn {
+                &.active {
+                    background-color: var(--biz-theme-primary-color) !important;
+                    color: var(--biz-theme-primary-text-color) !important;
+                }
+            }
+            gap: 8px;
+            @include media-breakpoint-down(md){
+                .dropdown-menu-right {
+                    li {
+                        button {
+                            padding: 2px 7px !important;
+                        }
+                        font-size: 12px;
+                    }
+                }
+            }
+        }
+
+        .o_cp_searchview {
+            .o_searchview {
+                background-color: white !important;
+                box-shadow: var(--box-shadow-common) !important;
+                border: 0 !important;
+                border-radius: var(--border-radius-md);
+                padding: 1px 25px 3px 5px;
+
+                i {
+                    cursor: pointer !important;
+                }
+
+                .o_searchview_icon {
+                    padding: 6px 0;
+                    right: 12px !important;
+
+                    &::before {
+                        color: var(--biz-theme-body-text-color) !important;
+                        font-size: 1.1rem !important;
+                    }
+                }
+
+                .o_searchview_autocomplete li.o_selection_focus {
+                    background-color: var(--biz-theme-primary-color);
+                    > a {
+                        color: var(--biz-theme-primary-text-color);
+                    }
+                }
+
+                input {
+                    font-size: 1.1rem !important;
+                    padding-left: 8px;
+                    min-height: calc(var(--input-height) - 8px); // because --input-height is 40px
+                }
+
+                .o_searchview_facet {
+                    border: 1px solid #cccccc7d !important;
+                    background-color: transparent !important;
+                    border-radius: var(--border-radius-md);
+                    margin: 1px 8px 0 0 !important;
+
+                    .o_facet_remove {
+                        color: var(--biz-theme-primary-color) !important;
+                    }
+
+                    .o_searchview_facet_label {
+                        background-color: var(--biz-theme-primary-color) !important;
+                        color: var(--biz-theme-primary-text-color);
+                        border-top-left-radius: var(--border-radius-md);
+                        border-bottom-left-radius: var(--border-radius-md);
+                        border-top-right-radius: 0;
+                        border-bottom-right-radius: 0;
+
+                        padding: 0 5px !important;
+                    }
+
+                    .o_facet_values {
+                        border: 0;
+                        display: flex;
+                        align-items: center;
+                        background-color: transparent !important;
+                        color: var(--biz-theme-secondary-text-color) !important;
+                        border-color: var(--biz-theme-primary-color) !important;
+                    }
+                }
+            }
+
+            .btn-group.d-none.d-md-inline-block.float-right {
+                margin-right: 0 !important;
+            }
+        }
+
+        @include media-breakpoint-down(sm){
+            //breadcrumb start
+            .breadcrumb {
+                background-color: transparent !important;
+                align-items: baseline;
+                .breadcrumb-item {
+                    a {
+                        font-size: 1.5rem;
+                    }
+                }
+                .breadcrumb-item.active {
+                    font-size: 1.5rem;
+                }
+            }
+            //breadcrumb end
+            .o_cp_bottom {
+                .o_cp_bottom_left {
+                    > .o_cp_action_menus {
+                        .o_dropdown_title, .fa-chevron-right, .fa-chevron-down {
+                            display: none;
+                        }
+                        padding-left: 0;
+                    }
+                }
+                .o_cp_bottom_right {
+                    .o_cp_action_menus {
+                        button.dropdown-toggle {
+                            padding: 0.6rem 1rem !important;
+                            height: 35.5px;
+                            margin-right: 0px !important;
+                        }
+                        margin-top: 5px;
+                        display: flex;
+                        justify-content: end;
+                        gap: 8px;
+                    }
+                    margin-left: auto;
+                    gap: 8px;
+                }
+                flex-wrap: wrap;
+            }
+            .o_calendar_buttons {
+                .o_calendar_navigation_buttons {
+                    margin-bottom: 5px;
+                }
+                flex-direction: column;
+            }
+            // calender views end
+            
+            // pivot views start
+            .btn-group[aria-label='Pivot settings'] {
+                gap: 8px;
+            }
+            // pivot views end
+
+            // list views start
+            .o_list_buttons .o_button_generate_leads {
+                display: none !important;
+            }
+            // list views end
+        }
+    }
+
+    &.dark_mode{
+        .o_control_panel{
+            .o_panel{
+                .o_setting_search{
+                    background-color: var(--biz-theme-secondary-color) !important;
+                }
+            }
+            .o_cp_searchview {
+                .o_searchview {
+                    background-color: var(--biz-theme-secondary-color) !important;
+                }
+        
+            }
+        } 
+    }
+}

spiffy_theme_backend/static/src/scss/custom_varibles.scss

@@ -0,0 +1,58 @@
+:root{
+    --light-theme-secondary-color: #ffffff;
+    --light-theme-secondary-text-color: #1b1b1b;
+    --light-theme-body-color: #f9f9f9;
+    --light-theme-body-text-color: #1b1b1b;
+    --dark-theme-primary-color: var(--light-theme-primary-color);
+    --dark-theme-primary-text-color: var(--light-theme-primary-text-color);
+    --dark-theme-secondary-color: #242424;
+    --dark-theme-secondary-text-color: #ffffff;
+    --dark-theme-body-color: #1d1d1d;
+    --dark-theme-body-text-color: #ffffff;
+    --vertical-menu-width: 24rem;
+    --box-shadow-common: 0 4px 10px rgba(0, 0, 0, 0.03);
+    --input-height: 40px;
+}
+
+html{
+    &[data-theme-style="biz_theme_rounded"]{
+        --border-radius-lg: 16px;
+        --border-radius-md: 10px;
+        --border-radius-sm: 6px;
+        --border-radius-xl: 50px;
+    }
+    &[data-theme-style="biz_theme_standard"]{
+        --border-radius-lg: 6px;
+        --border-radius-md: 4px;
+        --border-radius-sm: 3px;
+        --border-radius-xl: 4px;
+    }
+    &[data-theme-style="biz_theme_square"]{
+        --border-radius-lg: 0;
+        --border-radius-sm: 0;
+        --border-radius-md: 0;
+        --border-radius-xl: 0;
+    }
+    &[data-view-type="desktop"]{
+        --horizontal-menu-height: 80px;
+    }
+    &[data-view-type="mobile"]{
+        --horizontal-menu-height: 60px;
+    }
+}
+
+:root {
+    --o-input-border-color: var(--biz-theme-primary-color);
+    --o-caret-color: var(--biz-theme-primary-color);
+}
+
+body{
+    &.list_comfortable{
+        --list-table-height: 5rem;
+        --table-border-spacing: 1em;
+    }
+    &.list_compact{
+        --list-table-height: 3rem;
+        --table-border-spacing: 0.5em;
+    }
+}

spiffy_theme_backend/static/src/scss/dashboards.scss

@@ -0,0 +1,103 @@
+body.o_web_client {
+    .o_content {
+        .o_dashboards .o_website_dashboard div.o_box table tr, .o_dashboards .o_website_dashboard div.o_box table tr th{
+            background: var(--biz-theme-secondary-color) !important;
+            color: var(--biz-theme-secondary-text-color) !important;
+        }
+        .o_dashboards {
+            .o_dashboard_sales {
+                .col-12.row.o_box {
+                    margin-left: 0 !important;
+                    margin-right: 0 !important;
+                }
+
+                .o_link_enable {
+                    color: var(--biz-theme-primary-color) !important;
+
+                    &:hover {
+                        background-color: unset !important;
+                    }
+
+                    .o_highlight {
+                        color: var(--biz-theme-primary-color) !important;
+                    }
+                }
+            }
+
+            .o_website_dashboard {
+                background-color: var(--biz-theme-body-color) !important;
+                color: var(--biz-theme-body-text-color) !important;
+
+                .o_link_disable {
+                    color: var(--biz-theme-body-text-color) !important;
+                }
+
+                .o_demo_background {
+                    .o_buttons {
+                        h3 {
+                            background-color: var(--biz-theme-body-color) !important;
+                            color: var(--biz-theme-body-text-color) !important;
+                        }
+                    }
+                }
+
+                .o_dashboard_common {
+                    .o_inner_box {
+                        background-color: var(--biz-theme-primary-color) !important;
+                        color: var(--biz-theme-primary-text-color) !important;
+                        border-radius: var(--border-radius-lg);
+                        border: none !important;
+                        // margin-right: 8px;
+                    }
+                }
+
+                div.o_box {
+                    @include media-breakpoint-down(sm){
+                        > .o_inner_box {
+                            flex: 1 1 100%;
+                        }
+                    }
+                    table{
+                        box-shadow: var(--box-shadow-common);
+                    }
+                    border-radius: var(--border-radius-lg) !important;
+                    background-color: var(--biz-theme-secondary-color) !important;
+                    box-shadow: var(--box-shadow-common);
+                    padding: 10px;
+                    gap: 10px;
+
+                    h2,
+                    h4 {
+                        color: var(--biz-theme-primary-color) !important;
+                    }
+                }
+            }
+        }
+        .o_purchase_dashboard{
+            background-color: var(--biz-theme-secondary-color) !important;
+            color: var(--biz-theme-secondary-text-color)!important;
+            border-radius: var(--border-radius-lg)!important;
+
+            .table{
+                color: var(--biz-theme-secondary-text-color);
+                > thead, tbody{
+                    > tr{
+                        > td{
+                            border-color: var(--biz-theme-secondary-color) !important;
+                            &.o_text{
+                                background-color: var(--biz-theme-secondary-color);
+                            }
+                            &.o_main{
+                                background-color: var(--biz-theme-primary-color) !important;
+
+                                &:hover{
+                                background-color: var(--biz-theme-primary-rgba) !important;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

spiffy_theme_backend/static/src/scss/datetime_pickers.scss

@@ -0,0 +1,66 @@
+body.o_web_client {
+    .bootstrap-datetimepicker-widget {
+        .datepicker-months, .datepicker-years, .datepicker-decades{
+            td{
+                &:hover{
+                    color: var(--biz-theme-secondary-text-color) !important;
+                }
+                span{
+                    &:hover{
+                        color: #1d1d1d !important;                            
+                    }
+                }
+            }
+        }
+        table {
+            & thead tr:first-child th {
+                background-color: var(--biz-theme-primary-color) !important;
+                color: var(--biz-theme-primary-text-color) !important;
+            }
+
+            & td {
+                color: var(--biz-theme-secondary-text-color);
+                &:hover{
+                    color: #1d1d1d;
+                }
+                &.active,
+                &.active:hover {
+                    background-color: var(--biz-theme-primary-color) !important;
+                    color: var(--biz-theme-primary-text-color) !important;
+                }
+                & span.active {
+                    background-color: var(--biz-theme-primary-color) !important;
+                    color: var(--biz-theme-primary-text-color) !important;
+                    &:hover {
+                        color: var(--biz-theme-primary-text-color) !important;
+                    }
+                }
+            }
+        }
+    }
+
+    &.dark_mode{
+        .daterangepicker.show-calendar {
+            --daterangepicker-border: 1px solid rgba(0, 0, 0, 0.15);
+            --daterangepicker-border-radius: 0.25rem;
+            --daterangepicker-bg: var(--biz-theme-body-color);
+            --daterangepicker-color: var(--biz-theme-body-text-color);
+            --daterangepicker__table-bg: transparent;
+            --daterangepicker__thead-bg: var(--biz-theme-body-color);
+            --daterangepicker__cell-border-color: var(--biz-theme-body-color);
+            --daterangepicker__cell-bg--hover: var(--biz-theme-body-color);
+            --daterangepicker__select-bg: var(--biz-theme-body-color);
+            --daterangepicker__select-border-color: var(--biz-theme-body-color);
+            --daterangepicker__select-color: var(--biz-theme-body-text-color);
+            border: var(--daterangepicker-border);
+            border-radius: var(--daterangepicker-border-radius);
+            background-color: var(--daterangepicker-bg);
+            box-shadow: var(--daterangepicker-box-shadow);
+            font-family: inherit;
+        
+            &:after{
+                border-bottom-color: #1d1d1d;
+            }
+        }
+    }
+}

spiffy_theme_backend/static/src/scss/discuss_style.scss

@@ -0,0 +1,131 @@
+body.o_web_client {
+    .o_MobileMessagingNavbar_tab.o-active{
+        color: var(--biz-theme-primary-color);
+    }
+    .o_MobileMessagingNavbar{
+        background-color: var(--biz-theme-body-color) !important;
+    }
+    .o_ThreadViewTopbar{
+        background-color: var(--biz-theme-body-color) !important;
+    }
+    .o_MessageActionList{
+        background-color: var(--biz-theme-body-color) !important;
+        color: var(--biz-theme-body-text-color) !important;
+
+        .o_MessageActionView{
+            &:hover{
+                background-color: var(--biz-theme-secondary-color) !important;
+                color: var(--biz-theme-secondary-text-color) !important;
+            }
+        }
+    }
+    .o_DiscussContainer {
+        .o_ThreadPreview{
+            background-color: var(--biz-theme-secondary-color) !important;
+        }
+
+        .o_Discuss{
+            &.o-mobile{
+                background-color: var(--biz-theme-body-color) !important;
+                border-color: var(--biz-theme-secondary-color) !important;
+
+                .o_DiscussMobileMailboxSelection{
+                    padding: 0 15px;
+                    gap: 5px;
+                    .o_DiscussMobileMailboxSelection_button{
+                        box-shadow: none !important;
+                    }
+                }
+            }
+        }
+        .o_Discuss_content,
+        .o_MessageList_empty,
+        .o_Message,
+        .o_MessageList,
+        .o_MessageList_separatorLabel, .o_MessageActionList {
+            background-color: var(--biz-theme-body-color) !important;
+            color: var(--biz-theme-body-text-color) !important;
+            .o_ThreadViewTopbar_threadName, .o_ThreadViewTopbar_markAllReadButton{
+                border: none !important;
+            }
+            .o_ThreadViewTopbar{
+                color: var(--biz-theme-body-text-color) !important;
+            }
+            .o_MessageActionView:hover{
+                background-color: var(--biz-theme-secondary-color) !important;
+            }
+        }
+
+        .o_DiscussSidebar {
+            background-color: var(--biz-theme-body-color) !important;
+            color: var(--biz-theme-body-text-color) !important;
+            .o_DiscussSidebarCategory_title, .o_DiscussSidebarCategory_command, .o_DiscussSidebarCategoryItem_command {
+                border: none;
+            }
+        }
+
+        .o_DiscussSidebarItem:hover {
+            background-color: var(--biz-theme-body-color) !important;
+            color: var(--biz-theme-body-text-color) !important;
+        }
+
+        .o_DiscussSidebarItem_activeIndicator.o-item-active {
+            background-color: var(--biz-theme-primary-color) !important;
+        }
+
+        .o_Composer {
+            background-color: var(--biz-theme-body-color) !important;
+            color: var(--biz-theme-body-text-color) !important;
+
+            .o_Composer_coreMain {
+
+                .o_ComposerTextInput {
+                    background-color: var(--biz-theme-secondary-color) !important;
+                    border-color: #414141 !important;
+                    textarea {
+                        background-color: var(--biz-theme-secondary-color) !important;
+                        color: var(--biz-theme-secondary-text-color) !important;
+                    }
+                }
+
+                .o_Composer_buttons {
+                    .o_Composer_button:not(.btn-primary){
+                        background-color: transparent !important;
+                        color: var(--biz-theme-secondary-text-color) !important;
+                        box-shadow: none !important;
+                        outline: none !important;
+                    }
+                    .o_Composer_toolButtons {
+                        background-color: var(--biz-theme-secondary-color) !important;
+                        color: var(--biz-theme-secondary-text-color) !important;
+                    }
+
+                    .o_Composer_actionButtons {
+                        .btn {
+                            border-bottom-left-radius: 0 !important;
+                            border-top-left-radius: 0 !important;
+                        }
+                    }
+                }
+            }
+        }
+        .o_ThreadViewTopbar_threadName.o-threadNameEditable, .o_ThreadViewTopbar_threadDescription.o-threadDescriptionEditable {
+            background-color: var(--biz-theme-secondary-color) !important;
+        }
+        .o_ThreadViewTopbar_threadDescription {
+            border-color: #414141 !important;
+        }
+        .o_DiscussSidebarCategoryItem .o_DiscussSidebarCategoryItem_item .o_DiscussSidebarCategoryItem_command {
+            padding: 0 !important;
+        } 
+    }
+    &.dark_mode{
+        .o_DiscussSidebarMailbox.o-active, .o_DiscussSidebarCategoryItem.o-active, .o_DiscussSidebarMailbox:hover, .o_DiscussSidebarCategoryItem:hover, .o_ChannelInvitationForm_selectablePartner:hover{
+            background-color: var(--biz-theme-secondary-color) !important;
+        }
+        .o_DiscussSidebarMailbox, .o_DiscussSidebarCategoryItem{
+            background-color: var(--biz-theme-body-color) !important;
+            color: var(--biz-theme-body-text-color) !important;
+        }
+    }
+}

spiffy_theme_backend/static/src/scss/font-family.scss

@@ -0,0 +1,153 @@
+@font-face{
+    font-family:"poppins";
+    src:url("/spiffy_theme_backend/static/lib/Poppins/Poppins-Regular.ttf") format("truetype");
+}
+
+@font-face{
+    font-family:"rubik";
+    src:url("/spiffy_theme_backend/static/lib/Rubik/Rubik-Regular.ttf") format("truetype");
+}
+
+@font-face{
+    font-family:"inter";
+    src:url("/spiffy_theme_backend/static/lib/Inter/Inter-Regular.ttf") format("truetype");
+}
+
+@font-face{
+    font-family:"josefin_sans";
+    src:url("/spiffy_theme_backend/static/lib/Josefin_Sans/JosefinSans-Regular.ttf") format("truetype");
+}
+
+@font-face{
+    font-family:"varela_round";
+    src:url("/spiffy_theme_backend/static/lib/Varela_Round/VarelaRound-Regular.ttf") format("truetype");
+}
+
+@font-face{
+    font-family:"manrope";
+    src:url("/spiffy_theme_backend/static/lib/Manrope/Manrope-Regular.ttf") format("truetype");
+}
+
+@font-face{
+    font-family:"Nunito_Sans";
+    src:url("/spiffy_theme_backend/static/lib/Nunito_Sans/NunitoSans-Regular.ttf") format("truetype");
+}
+
+body{
+    &.font_family_lato{
+        font-family:"Lato";
+    }
+    &.font_family_montserrat{
+        font-family:"Montserrat";
+    }
+    &.font_family_open_sans{
+        font-family:"Open_Sans";
+    }
+    &.font_family_oswald{
+        font-family:"Oswald";
+    }
+    &.font_family_raleway{
+        font-family:"Raleway";
+    }
+    &.font_family_roboto{
+        font-family:"Roboto";
+    }
+    &.font_family_poppins{
+        font-family:"poppins";
+    }
+    &.font_family_rubik{
+        font-family:"rubik";
+    }
+    &.font_family_inter{
+        font-family:"inter";
+    }
+    &.font_family_josefin_sans{
+        font-family:"josefin_sans";
+    }
+    &.font_family_varela_round{
+        font-family:"varela_round";
+    }
+    &.font_family_manrope{
+        font-family:"manrope";
+    }
+    &.font_family_Nunito_Sans{
+        font-family:"Nunito_Sans";
+    }
+
+    .dynamic_data{
+        #font_family{
+            .text-style-design{
+                font-size: 16px;
+            }
+            .font_family_lato{
+                .text-style-design{
+                    font-family:"Lato";
+                }
+            }
+            .font_family_montserrat{
+                .text-style-design{
+                    font-family:"Montserrat";
+                }
+            }
+            .font_family_open_sans{
+                .text-style-design{
+                    font-family:"Open_Sans";
+                }
+            }
+            .font_family_oswald{
+                .text-style-design{
+                    font-family:"Oswald";
+                }
+            }
+            .font_family_raleway{
+                .text-style-design{
+                    font-family:"Raleway";
+                }
+            }
+            .font_family_roboto{
+                .text-style-design{
+                    font-family:"Roboto";
+                }
+            }
+            .font_family_poppins{
+                .text-style-design{
+                    font-family:"poppins";
+                }
+            }
+            .font_family_rubik{
+                .text-style-design{
+                    font-family:"rubik";
+                }
+            }
+            .font_family_inter{
+                .text-style-design{
+                    font-family:"inter";
+                }
+            }
+            .font_family_josefin_sans{
+                .text-style-design{
+                    font-family:"josefin_sans";
+                }
+            }
+            .font_family_varela_round{
+                .text-style-design{
+                    font-family:"varela_round";
+                }
+            }
+            .font_family_manrope{
+                .text-style-design{
+                    font-family:"manrope";
+                }
+            }
+            .font_family_Nunito_Sans{
+                .text-style-design{
+                    font-family:"Nunito_Sans";
+                }
+            }
+        }
+    }
+
+    h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
+        font-family: inherit;
+    }
+}

spiffy_theme_backend/static/src/scss/font_icons.scss

@@ -0,0 +1,78 @@
+@mixin fa-font-icons-content($name, $content) {
+    .fa.fa-#{$name}{
+        font-family: 'remixicon' !important;
+        &::before{
+            content: $content !important;
+        }
+    }
+}
+
+@include fa-font-icons-content(search, "\f0d1");
+@include fa-font-icons-content(folder, "\ed27");
+@include fa-font-icons-content(filter, "\ed23");
+@include fa-font-icons-content(star, "\f18b");
+@include fa-font-icons-content(bars, "\ef3e");
+@include fa-font-icons-content(chevron-left, "\ea60");
+@include fa-font-icons-content(chevron-right, "\ea6c");
+@include fa-font-icons-content(download, "\ec54");
+@include fa-font-icons-content(plus, "\ea13");
+@include fa-font-icons-content(pencil, "\efe0");
+@include fa-font-icons-content(check, "\eb7b");
+@include fa-font-icons-content(times, "\eb99");
+@include fa-font-icons-content(calendar-check-o, "\eb23");
+@include fa-font-icons-content(cogs, "\f0e6");
+@include fa-font-icons-content(cog, "\f0e6");
+@include fa-font-icons-content(clock-o, "\f215");
+@include fa-font-icons-content(caret-right, "\ea6c");
+@include fa-font-icons-content(caret-down, "\ea4e");
+@include fa-font-icons-content(envelope, "\eef6");
+@include fa-font-icons-content(tasks, "\eb27");
+@include fa-font-icons-content(print, "\f029");
+@include fa-font-icons-content(paperclip, "\ea86");
+@include fa-font-icons-content(user, "\f264");
+@include fa-font-icons-content(star-o, "\f18b");
+@include fa-font-icons-content(bug, "\eb07");
+@include fa-font-icons-content(inbox, "\ee4f");
+
+body.o_web_client{
+    .dropdown-item.selected:before {
+        font-family: 'remixicon' !important;
+        content: "\eb7b" !important;
+    }
+    .ri{
+        font-size: 18px;
+        vertical-align: middle;
+        line-height: 20px
+    }
+    .fa{
+        vertical-align: middle;
+    }
+    .fa-folder{
+        color: var(--biz-theme-primary-color) !important;
+    }
+    
+    .o_menu_systray {
+        .fa{
+            font-size:18px;
+            vertical-align: middle;
+        }
+        @include fa-font-icons-content(globe, "\ed8a");
+        @include fa-font-icons-content(institution, "\eb03");
+        // @include fa-font-icons-content(pencil, "\ef3f");
+        @include fa-font-icons-content(comments, "\eb51");
+    }
+    
+    .header_menu_right_content {
+        .fullscreen-exit {
+            .ri-fullscreen-line:before {
+                content: "\ed9a" !important;
+            }
+        }
+    }
+}
+
+.o_rtl {
+    .fa.fa-chevron-right, .fa.fa-chevron-left {
+        transform: unset !important;
+    }
+}

spiffy_theme_backend/static/src/scss/font_sizes/font_large.css

@@ -0,0 +1,6 @@
+:root{
+    font-size: 15px;
+    --spiffy-font-size-sm: 14px;
+    --spiffy-font-size-md: 15px;
+    --spiffy-font-size-lg: 18px;
+}

spiffy_theme_backend/static/src/scss/font_sizes/font_medium.css

@@ -0,0 +1,6 @@
+:root{
+    font-size: 12px;
+    --spiffy-font-size-sm: 11px;
+    --spiffy-font-size-md: 12px;
+    --spiffy-font-size-lg: 14px;
+}

spiffy_theme_backend/static/src/scss/font_sizes/font_small.css

@@ -0,0 +1,6 @@
+:root{
+    font-size: 10px;
+    --spiffy-font-size-sm: 9px;
+    --spiffy-font-size-md: 10px;
+    --spiffy-font-size-lg: 12px;
+}

spiffy_theme_backend/static/src/scss/form_chatter.scss

@@ -0,0 +1,212 @@
+@mixin form-chatter-designs{
+    .o_action_manager {
+        .o_view_controller.o_form_view {
+            .o_content {
+                display: block;
+                height: 100%;
+
+                .o_form_sheet_bg {
+                    .o_form_statusbar {
+                        margin: 0;
+                    }
+                    width: 100%;
+                    padding: 0;
+                }
+            }
+            .o_FormRenderer_chatterContainer {
+                min-height: 100%;
+                width: 100%;
+                // margin-left: 15px;
+                margin: 0;
+                padding-bottom: 1rem !important;
+                flex-basis: 100%;
+
+                scrollbar-width: none; // hide scrollbar in firefox
+                &::-webkit-scrollbar {
+                    display: none;
+                }
+
+                &.o_Chatter {
+                    height: 100%;
+                }
+                .o_Chatter_scrollPanel {
+                    scrollbar-width: none; // hide scrollbar in firefox
+                    &::-webkit-scrollbar {
+                        display: none;
+                    }
+                }
+            }
+        }
+
+    }
+    // check this in repsonsive
+    .o_form_view {
+        .o_FormRenderer_chatterContainer {
+            border: 0;
+            max-width: 100% !important;
+            padding: 0 !important;
+            margin-bottom: 1rem;
+        }
+    }
+}
+
+body.o_web_client {
+    .o_Message{
+        background-color: transparent;
+    }
+    .o_Attachment{
+        &.o-has-card-details{
+            color: #121212;
+        }
+    }
+    .o_FormRenderer_chatterContainer{
+        .o_ChatterContainer{
+            .o_ChatterTopbar_actions{
+                *{
+                    border: 0px !important;
+                }
+                .btn{
+                    padding: 0.6rem 1rem !important;
+                    background-color: transparent !important;
+                    border: none !important;
+                    color:var(--biz-theme-primary-color) !important;
+                }
+            }
+        }
+    }
+    &.chatter_bottom {
+        @include form-chatter-designs;
+        .o_view_controller.o_form_view{
+            flex-direction: column !important;
+            overflow: auto;
+            .o_form_view_container{
+                width:100% !important;
+            }
+        }
+    }
+    &.top_menu_vertical{
+        @media (max-width: 1550px) {
+            &.chatter_right {
+                @include form-chatter-designs;
+            }
+        }
+        @media (min-width: 1551px){
+            .o_action_manager{
+                .o_view_controller.o_form_view{
+                    .o_FormRenderer_chatterContainer{
+                        .o_ChatterTopbar_actions{
+                            flex-wrap: wrap;
+                            & > div{
+                                flex-wrap: wrap;
+                            }
+                        }
+                        &.o-aside{
+                            flex-shrink: unset !important;
+                        }
+                    }
+                }
+            }
+        }
+        &.pinned{
+            @media (max-width: 1800px){
+                .o_action_manager{
+                    .o_view_controller.o_form_view{
+                        flex-direction: column !important;
+                        overflow: auto;
+                        .o_form_view_container{
+                            width: 100%
+                        }
+                        .o_FormRenderer_chatterContainer{
+                            width: 100%
+                        }
+                    }
+                }
+                
+            }
+        }
+        &:not(.pinned){
+            @media (max-width: 1550px){
+                .o_action_manager{
+                    .o_view_controller.o_form_view{
+                        flex-direction: column !important;
+                        overflow: auto;
+                        .o_form_view_container{
+                            width: 100%
+                        }
+                        .o_FormRenderer_chatterContainer{
+                            width: 100%
+                        }
+                    }
+                }
+                
+            }
+        }
+    }
+  
+    &.top_menu_horizontal{
+        @include media-breakpoint-down(lg) {
+            &.chatter_right {
+                @include form-chatter-designs;
+                .o_FormRenderer_chatterContainer{
+                    margin-top: 15px !important;
+                }
+            }
+        }
+        @media (max-width: 1800px){
+            .o_action_manager{
+                .o_view_controller.o_form_view{
+                    flex-direction: column !important;
+                    overflow: auto;
+                    .o_form_view_container{
+                        width: 100%
+                    }
+                    .o_FormRenderer_chatterContainer{
+                        width: 100%
+                    }
+                }
+            }
+            
+        }
+    }
+    &.tree_form_split_view{
+        .o_view_controller.tree-form-viewer {
+            > .o_content > .o_form_view {
+                display: block;
+                height: 100%;
+
+                .o_form_sheet_bg {
+                    .o_form_statusbar {
+                        margin: 0;
+                    }
+                    width: 100%;
+                    padding: 0;
+                }
+
+                .o_FormRenderer_chatterContainer {
+                    min-height: 100%;
+                    width: 100%;
+                    // margin-left: 15px;
+                    margin: 0;
+                    padding-bottom: 1rem;
+                    flex-basis: 100%;
+                    padding-left: 1rem;
+                    scrollbar-width: none; // hide scrollbar in firefox
+                    &::-webkit-scrollbar {
+                        display: none;
+                    }
+
+                    .o_Chatter {
+                        height: 100%;
+                    }
+
+                    .o_Chatter_scrollPanel {
+                        scrollbar-width: none; // hide scrollbar in firefox
+                        &::-webkit-scrollbar {
+                            display: none;
+                        }
+                    }
+                }
+            }
+        }
+    } 
+}

spiffy_theme_backend/static/src/scss/form_view.scss

@@ -0,0 +1,573 @@
+body.o_web_client {
+    &:not(.prevent_auto_save){
+        .disble-auto-save{
+            display: none !important;
+        }
+    }
+    @include media-breakpoint-down(md){
+        .o_employee_form{
+            .o_employee_avatar{
+                position: relative;
+                top: unset;
+                margin-bottom: 15px;
+
+                .oe_avatar{
+                    margin-left: auto !important;
+                }
+            }
+            .oe_title{
+                max-width: 100%;
+            }
+        }
+    }
+    @include media-breakpoint-down(xl){
+        .oe_invoice_outstanding_credits_debits{
+            min-width: unset;
+       }
+    }
+
+    .disble-auto-save{
+        font-size: 0.5em !important;
+        display: flex;
+        align-items: center;
+    }
+
+    .bg-view{
+        background-color: var(--biz-theme-secondary-color) !important;
+    }
+    .o_burger_menu .o_burger_menu_content.bg-view{
+        background-color: transparent !important;
+    }
+    .bg-white, .bg-100, .bg-light{
+        background-color: var(--biz-theme-secondary-color) !important;
+        color: var(--biz-theme-secondary-text-color) !important;
+    }
+    .o_form_view.o_xxl_form_view .o_form_sheet_bg > .alert{
+        margin-left: 0px !important;
+        margin-right: 0 !important;
+        margin-top: 1rem;
+    }
+
+    .o-form-buttonbox{
+        --o-input-border-color: #dee2e6;
+        border-bottom: 1px solid var(--o-input-border-color) !important;
+
+        .btn.oe_stat_button{
+            border-radius: 0 !important;
+            margin: 0;
+            opacity: 1 !important;
+            height: unset;
+            box-shadow: unset;
+            border: 0 !important;
+            
+            &:not(:first-child){
+                border-left: 1px solid var(--o-input-border-color) !important;
+                border-bottom: 0 !important;
+            }
+            &:last-child{
+                border-top-right-radius: var(--border-radius-lg) !important;
+            }
+            .o_button_more{
+                border: 0 !important;
+            }
+            &:hover {
+                opacity: 1 !important;
+            }
+            .o_button_icon {
+                color: var(--biz-theme-primary-color);
+                line-height: unset;
+            }
+            .o_stat_value {
+                color: unset !important;
+            }
+        }
+    }
+    .js_product{
+        .input-group{
+            .js_add_cart_json{
+                &:first-child{
+                    border-top-right-radius: 0 !important;
+                    border-bottom-right-radius: 0 !important;
+                }
+                &:last-child{
+                    border-top-left-radius: 0 !important;
+                    border-bottom-left-radius: 0 !important;
+                }
+            }
+        }
+    }
+    &.dark_mode{
+        .js_product{
+            .text-muted{
+                color: #495057c2 !important;
+            }
+        }
+    }
+    .o_form_view {
+        background-color: unset !important;
+        @include media-breakpoint-down(md) {
+            .o_form_view_container{
+                button.fa-arrow-right:before{
+                    font-family: 'remixicon';
+                    content: "\ea6c";
+                }
+                .o_cp_top{
+                    align-items: start !important;
+                    .o_form_button_create{
+                        margin-top:5px;
+                        // background-color: white !important;
+                        margin-left: auto;
+                    }
+                }
+                .oe_title{
+                    // max-width: 100% !important;
+                    h2{
+                        .o_form_label, small{
+                            font-size: 12px;
+                            font-weight: 400;
+                            color: #8f8f8f;
+                        }
+                        .oe_edit_only{
+                            display: flex;
+                            .o_form_label{
+                                margin-top: 10px;
+                            }
+                            small.oe_grey{
+                                margin-top: 4px;
+                            }
+
+                        }
+                        .o_input_8ch{
+                            > div > span{
+                                margin-right: 4px;
+                            }
+                            input.o_input{
+                                width: auto !important;
+                            }
+                        }
+                        span.oe_grey{
+                            margin: auto;
+                            margin-left: 12px;
+                        }
+                    }
+                }
+                .o_field_phone{
+                    word-break: keep-all;
+                }
+                span.o_m2o_avatar{
+                    margin: auto;
+                }
+                .o_notebook{
+                    .o_notebook_headers > ul{
+                        padding-bottom: 2px;
+                    }
+                }
+                .oe-toolbar{
+                    display: block !important;
+                    z-index: 80 !important;
+
+                    .btn{
+                        padding: 2px 4px !important;
+                    }
+                }
+                .oe_chatter{
+                    margin-top:10px !important;
+                    .o_ChatterTopbar_controllers{
+                        padding-left: 0px !important;
+                    }
+                }
+                .o_x2m_control_panel .o_cp_buttons .o-kanban-button-new {
+                    margin-left: 0px !important;
+                    margin-bottom: 10px !important;
+                }                  
+            }
+        }
+
+        .o_module_form{
+            .o_form_sheet_bg {
+                .o_form_sheet {
+                    max-width: 1140px !important;
+                }
+            }
+        }
+
+        .o_form_sheet_bg {
+            background: var(--biz-theme-body-color) !important;
+            border-bottom: 0 !important;
+            padding: 0;
+            .o_form_statusbar {
+                padding-left: 10px;
+                padding-right: 10px;
+                margin-left: 0;
+                margin-right: 0;
+                background-color: var(--biz-theme-secondary-color) !important;
+                color: var(--biz-theme-secondary-text-color) !important;
+                box-shadow: var(--box-shadow-common) !important;
+                border: 0;
+                border-radius: var(--border-radius-lg);
+
+                @include media-breakpoint-down(sm){
+                    padding-left: 5px;
+                    padding-right: 5px;
+                }
+
+                .o_statusbar_buttons {
+                    .btn {
+                        min-height: 30px !important;
+                    }
+                }
+                .o_statusbar_status {
+                    > .btn{
+                        font-weight: 500;
+                        border-radius: 0 !important;
+                        padding: 0 16px;
+                        @include media-breakpoint-down(sm) {
+                            padding-left: 10px;
+                            padding-right: 10px;
+                        }
+
+                        &:last-child {
+                            border-top-left-radius: var(--border-radius-md) !important;
+                            border-bottom-left-radius: var(--border-radius-md) !important;
+                        }
+                        &:first-child {
+                            border-top-right-radius: var(--border-radius-md) !important;
+                            border-bottom-right-radius: var(--border-radius-md) !important;
+                        }
+                        &::before,  &::after {
+                            content: unset !important;
+                        }
+                    }
+
+                    > .btn-secondary, > .o_arrow_button {
+                        border: 1px solid var(--biz-theme-primary-color) !important;
+                        border-radius: 0 !important;
+                    }
+                }
+
+            }
+
+            .o_form_sheet {
+                background-color: var(--biz-theme-secondary-color) !important;
+                color: var(--biz-theme-body-text-color) !important;
+                box-shadow: var(--box-shadow-common) !important;
+                border: 0;
+                border-radius: var(--border-radius-lg);
+                max-width: 100%;
+                margin-left: auto;
+                margin-right: auto;
+
+                .o_group {
+                    .o_form_label:not(.o_required_modifier) {
+                        color: var(--biz-theme-body-text-color) !important;
+                        &.o_tax_total_label {
+                            line-height: 33px;
+                        }
+                    }
+                }
+
+                .o_not_full {
+                    .btn {
+                        // padding: 0 !important;
+                        &:last-child{
+                            border-top-right-radius: var(--border-radius-lg) !important;
+                        }
+                    }
+
+                    &.oe_button_box {
+                        // margin-bottom: 15px !important;
+                        box-shadow: inset 0 -1px 0 #efefef;
+                        border-top-right-radius: var(--border-radius-lg);
+                    }
+                }
+
+                .oe_title {
+                    color: var(--biz-theme-primary-color) !important;
+                    // width: unset;
+                    h1 {
+                        font-size: 20px !important;
+                    }
+                }
+
+                .o_form_uri {
+                    color: var(--biz-theme-primary-color) !important;
+
+                    &>span:first-child {
+                        color: var(--biz-theme-primary-color) !important;
+                    }
+
+                    &:focus-visible {
+                        outline: 0 !important;
+                    }
+                }
+
+                .o_list_view {
+                    .o_list_table {
+                        tbody td.o_data_cell {
+                            height: 4rem !important;
+                        }
+
+                        input, textarea {
+                            border: 1px solid #e4e6ef !important;
+                        }
+
+                        textarea {
+                            height: 40px !important;
+                            line-height: 40px;
+                        }
+                        .o_list_record_remove {
+                            vertical-align: middle;
+                        }
+                    }
+                }
+
+            }
+            .note-editable {
+                background: inherit;
+
+                b, strong {
+                    font-weight: 700;
+                }
+            }
+        }
+
+        .o_FormRenderer_chatterContainer {
+            background-color: var(--biz-theme-body-color) !important;
+            color: var(--biz-theme-body-text-color) !important;
+            padding: 0;
+            max-width: unset;
+            border: 0;
+            padding-left: 8px;
+            .o_ChatterTopbar_rightSection {
+                .o_ChatterTopbar_button {
+                    margin-bottom: 0 !important;
+
+                    &:hover {
+                        background-color: unset !important;
+                    }
+                }
+            }
+
+            .o_Chatter_scrollPanel {
+                .o_ActivityBox {
+                    .o_ActivityBox_titleLine {
+                        border-color: #efefef !important;
+                    }
+
+                    .btn:focus {
+                        box-shadow: unset !important;
+                    }
+
+                    .o_ActivityBox_titleBadge {
+                        padding: 5px 7px 5px 7px !important;
+                    }
+
+                    &.o_ChatterTopbar_actions {
+                        border-color: transparent !important;
+                    }
+                }
+
+            }
+
+            .o_Chatter {
+                background-color: var(--biz-theme-secondary-color) !important;
+                color: var(--biz-theme-secondary-text-color);
+                border-radius: var(--border-radius-lg);
+                box-shadow: var(--box-shadow-common) !important;
+                margin: 15px 0;
+            }
+
+            .o_ComposerTextInput textarea {
+                background-color: var(--biz-theme-secondary-color) !important;
+                color: var(--biz-theme-secondary-text-color) !important;
+            }
+
+            .o_Chatter_composer.o-bordered {
+                border-left-color: transparent !important;
+                border-right-color: transparent !important;
+                background-color: transparent !important;
+                border-bottom-color: #efefef !important;
+            }
+
+            .o_Composer_toolButton {
+                background-color: transparent !important;
+                color: var(--biz-theme-primary-color) !important;
+            }
+
+            .o_Chatter_thread {
+                .o_MessageList_separatorLabel {
+                    background-color: transparent !important;
+                    color: var(--biz-theme-primary-color) !important;
+                }
+            }
+
+            .o_Composer_coreMain:not(.o-composer-is-compact):not(.o-composer-is-extended) {
+                border-radius: 8px !important;
+                border-color: #efefef;
+            }
+
+            .o_Message.o-not-discussion,
+            .o_MessageList_separatorLine {
+                background-color: transparent !important;
+                border-color: #efefef !important;
+            }
+
+            .o_MessageList,
+            .o_ThreadView {
+                background-color: transparent !important;
+                color: inherit;
+            }
+
+            .o-has-active-button {
+                border-color: #efefef !important;
+            }
+        }
+        .o_attachment .o_attachment_delete:hover {
+            background: var(--biz-theme-primary-color) !important;
+        }
+    }
+    /* .o_input{
+        background-color: var(--biz-theme-secondary-color) !important;
+        color: var(--biz-theme-secondary-text-color) !important;
+    } */
+
+    .o_form_view {
+        .o_input {
+            padding: 0px 4px 0px 4px !important;
+            &textarea {
+                height: auto !important;
+                min-height: var(--input-height);
+            }
+        }
+
+        .o_field_widget {
+            @include media-breakpoint-down(sm) {
+                word-break: break-all;
+            }
+            .o_external_button {
+                background-color: transparent !important;
+                margin: 0 !important;
+                padding: 5px;
+                border: 0;
+            }
+
+            .o_input_dropdown .o_dropdown_button {
+                top: 50% !important;
+                transform: translateY(-50%);
+            }
+        }
+
+        .o_required_modifier.oinput {
+            background-color: var(--biz-theme-secondary-color) !important;
+        }
+
+        .o_td_label {
+
+            border-right: 0px !important;
+
+            .o_form_label {
+                font-weight: normal !important;
+
+            }
+        }
+
+        .o_form_image_controls {
+            background-color: var(--biz-theme-primary-color) !important;
+        }
+
+        .o_horizontal_separator {
+            color: var(--biz-theme-primary-color) !important;
+        }
+
+        .o_field_x2many_list_row_add {
+            a {
+                color: var(--biz-theme-primary-color) !important;
+            }
+        }
+        .note-editable.panel-body {
+            background-color: var(--biz-theme-secondary-color) !important;
+        }
+    }
+
+    .o_act_window {
+        .note-toolbar.panel-heading {
+            .btn-secondary {
+                background-color: unset !important;
+                border: 0 !important;
+            }
+        }
+    }
+
+    .modal {
+        .modal-dialog {
+            .o_form_view {
+                // padding: 20px 0 !important;
+
+                .o_form_sheet_bg {
+                    >.o_form_sheet {
+                        background-color: transparent !important;
+                        box-shadow: unset !important;
+                        padding-bottom: 0 !important;
+                    }
+                }
+            }
+        }
+    }
+
+    .o_form_view:not(o_field_highlight) {
+        .o_field_html .note-editable {
+            &:hover, &:focus {
+                border-color: var(--biz-theme-primary-color) !important;
+            }
+        }
+    }
+    .o_field_highlight .o_field_widget .o_input, .o_field_highlight.o_field_widget .o_input {
+        border-color: var(--biz-theme-primary-color) !important;
+    }
+    .o_field_property_tag:not(.readonly):hover,
+    .o_field_property_tag:not(.readonly):focus-within {
+        border-bottom: 1px solid var(--biz-theme-primary-color) !important;
+    }
+
+}
+
+body.o_web_client.dark_mode {
+    .bg-300{
+        background-color: var(--biz-theme-secondary-color) !important;
+        color: var(--biz-theme-secondary-text-color) !important;
+    }
+    .o_form_view {
+        .oe_title{
+            color: var(--biz-theme-body-text-color);
+        }
+        .o_Activity_summary{
+            color: var(--biz-theme-body-text-color) !important;
+        }
+
+        .o_FormRenderer_chatterContainer div,
+        .o_form_uri {
+            &>span {
+                color: #999999 !important;
+            }
+
+            &>span:first-child {
+                color: var(--biz-theme-primary-color) !important;
+            }
+        }
+
+        .o_list_view .table-responsive .o_list_table tbody tr.o_data_row {
+            background: #1d1d1d !important;
+        }
+
+        .oe_button_box {
+            .btn {
+                color: #dddddd !important;
+            }
+            box-shadow: inset 0 -1px 0 #414141 !important;
+        }
+
+        .o_list_table .o_data_row.o_selected_row>.o_data_cell:not(.o_readonly_modifier):not(.o_invisible_modifier):not(.o_handle_cell) {
+            background-color: transparent !important;
+        }
+    }
+}

spiffy_theme_backend/static/src/scss/graph_view.scss

@@ -0,0 +1,18 @@
+body.o_web_client{
+    .o_graph_controller {
+        @include media-breakpoint-down(sm){
+            .o_control_panel {
+                .o_cp_buttons {
+                    button {
+                        margin-right: 8px !important;
+                    }
+                    display: flex;
+                    flex-wrap: wrap;
+                }
+            }
+            .o_graph_renderer {
+                padding: 30px 15px !important;
+            }
+        }
+    }
+}

spiffy_theme_backend/static/src/scss/kanban_view.scss

@@ -0,0 +1,308 @@
+body.o_web_client {
+    .o_kanban_renderer {
+        .o_kanban_record{
+            .o_kanban_record_title{
+                color: inherit;
+            }
+            .o_kanban_image img{
+                border-radius: var(--border-radius-lg);
+            }
+        }
+        .o_kanban_record > div, .o_kanban_quick_create {
+            background-color: var(--biz-theme-secondary-color) !important;
+            color: var(--biz-theme-secondary-text-color) !important;
+            border-radius: var(--border-radius-lg);
+
+            .o_kanban_primary_left .o_primary > span:first-child, .o_kanban_card_header_title .o_primary, .oe_kanban_content > .o_title > h3{
+                color: inherit !important;
+            }
+        }
+    }
+    .o_kanban_view{
+        .o_kanban_renderer {
+            &.o_kanban_grouped{
+                background-color: var(--biz-theme-body-color);
+            }
+            .o_kanban_record, .o_kanban_quick_create {
+                background-color: var(--biz-theme-secondary-color) !important;
+                color: var(--biz-theme-secondary-text-color) !important;
+            }
+            .o_kanban_quick_create{
+                border-radius: var(--border-radius-lg);
+            }
+            .o_kanban_group.o_column_folded{
+                background-color: var(--biz-theme-secondary-color) !important;
+                color: var(--biz-theme-secondary-text-color) !important;
+            }
+            .o_kanban_group .o_kanban_header {
+                .o_column_unfold{
+                    padding: 0 !important;
+                }
+                > .o_kanban_header_title {
+                    color: inherit;
+                    color: var(--biz-theme-body-text-color) !important;
+                }
+                .o_kanban_counter {
+                    .o_kanban_counter_side {
+                        color: inherit;
+                        color: var(--biz-theme-body-text-color) !important;
+                    }
+                }
+            }
+            .o_kanban_record {
+                @include media-breakpoint-down(md){
+                    > div.o_res_partner_kanban, div.o_hr_kanban_record{
+                        padding: 0 !important;
+
+                        .o_kanban_image{
+                            height: 100%;
+                        }
+                        .oe_kanban_details{
+                            padding-top: 0.5rem;
+                            padding-bottom: 0.5rem;
+                        }
+                    }
+                }
+                .o_res_partner_kanban, .o_hr_employee_kanban {
+                    &.o_kanban_record_has_image_fill {
+                        .o_kanban_image_fill_left{
+                            border-top-left-radius: var(--border-radius-lg);
+                            border-bottom-left-radius: var(--border-radius-lg);
+                            .o_kanban_image_inner_pic{
+                                border-top-left-radius: var(--border-radius-md);
+                            }
+                        }
+                    }
+                }
+                .o_field_widget.o_field_background_image > div{
+                    border-top-left-radius: var(--border-radius-lg);
+                    border-bottom-left-radius: var(--border-radius-lg);
+                }
+            }
+            &.o_opportunity_kanban{
+                .o_kanban_group{
+                    .o_kanban_header{
+                        @include media-breakpoint-down(md){
+                            .o_kanban_header_title{
+                                .o_kanban_config{
+                                    visibility: visible !important;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+            &.o_modules_kanban{
+                .oe_module_vignette.o_kanban_record{
+                    .oe_module_icon{
+                        border-radius: var(--border-radius-lg);
+                    }
+                }
+            }
+            &.o_kanban_dashboard{
+                .o_kanban_record{
+                    &.o_dropdown_open {
+                        .o_kanban_manage_toggle_button{
+                            background: var(--biz-theme-body-color);
+                            border-radius: var(--border-radius-md);
+                        }
+                    }
+                    .o_kanban_card_manage_pane.container {
+                        div[class*="col-"]{
+                            > div:not(.o_kanban_card_manage_title){
+                                > a{
+                                    color: var(--biz-theme-secondary-text-color);
+                                }
+                            }
+                        }
+                    }
+                    .bottom_block{
+                        border-bottom-left-radius: var(--border-radius-lg);
+                        border-bottom-right-radius: var(--border-radius-lg);
+                    }
+                    .o_kanban_card_header{
+                        & + .o_kanban_card_content{
+                            &.container,.o_container_small{
+                                .o_kanban_primary_bottom.bottom_block{
+                                    background-color: var(--biz-theme-secondary-color) !important;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+
+            .o_column_quick_create{
+                .o_quick_create_folded {
+                    color: inherit;
+                }
+                .o_kanban_add_column {
+                    background-color: var(--biz-theme-secondary-color);
+                    color: var(--biz-theme-secondary-text-color);
+                }
+                .o_quick_create_unfolded{
+                    background-color: var(--biz-theme-body-color);
+                    box-shadow: var(--box-shadow-common);
+
+                    .o_kanban_header{
+                        input{
+                            outline: unset;
+                            box-shadow: unset;
+                        }
+                        .o_kanban_add{
+                            border-top-left-radius: 0 !important;
+                            border-bottom-left-radius: 0 !important;
+                        }
+                    }
+                }
+            }
+            .o_kanban_record{
+                .o_kanban_content{
+                    .col-3{
+                        border-top-left-radius: var(--border-radius-lg);
+                        border-bottom-left-radius: var(--border-radius-lg);
+                    }
+                }
+                &.oe_kanban_card{
+                    .o_kanban_record_bottom{
+                        .text-muted{
+                            opacity: 1;
+                        }
+                    }
+                }
+                .o_dropdown_kanban{
+                    .dropdown-toggle{
+                        background-color: transparent !important;
+                        color: var(--biz-theme-body-text-color);
+                        border: unset !important;
+                    }
+                }
+                .oe_kanban_content{
+                    .o_mail_activity{
+                        .o_activity{
+                            border-radius: var(--border-radius-lg);
+                            .o_activity_log_container{
+                                background-color: var(--biz-theme-secondary-color) !important;
+                                color: var(--biz-theme-secondary-text-color) !important;
+                                border-top-left-radius: 16px !important;
+                                border-top-right-radius: 16px !important;
+                            }
+                            .o_schedule_activity{
+                                .btn{
+                                    border-radius: 0 !important;
+                                    border-bottom-left-radius: 16px !important;
+                                    border-bottom-right-radius: 16px !important;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+            .o_kanban_record > div, .o_kanban_quick_create {
+                border: 1px solid #dee2e6;
+                border-color: transparent !important;
+                border-radius: var(--border-radius-lg);
+                background-color: var(--biz-theme-secondary-color) !important;
+                color: var(--biz-theme-secondary-text-color) !important;
+                transition: 0.3s;
+                &:hover {
+                    border-color: var(--biz-theme-primary-color) !important;
+                }
+            }
+            .o_kanban_group {
+                background-color: transparent !important;
+            }
+        }
+    }
+    .o_kanban_view {
+        .o_kanban_renderer:not(.o_theme_kanban) {
+        padding: 8px 0px 8px 0px !important;
+
+        .o_kanban_record:not(.o_theme_preview):not(.o_kanban_ghost) {
+            &:not(:first-child){
+                //margin-top: 0.75rem !important;
+            }
+            border-color: transparent !important;
+            border-radius: var(--border-radius-lg);
+            box-shadow: var(--box-shadow-common) !important;
+            // transition: 0.3s;
+
+            &:hover {
+                border-color: var(--biz-theme-primary-color) !important;
+            }
+
+            .o_kanban_image {
+                border-top-left-radius: var(--border-radius-lg) !important;
+                border-bottom-left-radius: var(--border-radius-lg) !important;
+            }
+        }
+
+        .o_kanban_record_headings,
+        .o_kanban_record_title {
+            color: var(--biz-theme-body-text-color) !important;
+        }
+
+        .o_kanban_ungrouped {
+            padding: 0 !important;
+        }
+
+       /*  .o_kanban_record {
+            opacity: 0;
+            animation-name: fadeIn;
+            animation-duration: 0.3s;
+            animation-timing-function: linear;
+            animation-fill-mode: forwards;
+        } */
+
+        @-webkit-keyframes fadeIn {
+            0% {
+                opacity: 0;
+            }
+
+            100% {
+                opacity: 1;
+            }
+        }
+        }
+    }
+
+    .badge-primary {
+        background-color: transparent !important;
+        color: var(--biz-theme-primary-color) !important;
+        border: 1px solid var(--biz-theme-primary-color) !important;
+    }
+
+    .badge-default {
+        background-color: transparent !important;
+        color: rgba(0, 0, 0, 0.9) !important;
+        border: 1px solid rgba(143, 143, 143, 0.9) !important;
+    }
+}
+
+body.o_web_client.dark_mode {
+    .o_kanban_examples_dialog{
+        .modal-body{
+            background: transparent;
+        }
+        .bg-300{
+            background-color: var(--biz-theme-body-color) !important;
+        }
+    }
+    .o_kanban_view {
+        .o_kanban_renderer {
+            .o_kanban_group{
+                &.o_kanban_group_show_muted, &.o_kanban_group_show_danger, &.o_kanban_group_show_warning, &.o_kanban_group_show_success{
+                    background-color: #2b2b2b !important;
+                    border-radius: var(--border-radius-lg);
+                    .o_kanban_header{
+                        background-color: #2b2b2b !important;
+                    }
+                }
+            }
+        }
+    }
+
+    .badge-default {
+        color: rgba(255, 255, 255, 0.9) !important;
+    }
+}

spiffy_theme_backend/static/src/scss/list_view.scss

@@ -0,0 +1,519 @@
+body.o_web_client {
+    .o_switch_company_menu {
+        .o_user_lang .show {
+            .dropdown-toggle {
+                background-color: transparent !important
+            }
+        }
+    }
+    
+    &.list_view_sticky_header{
+        // LIST VIEW STICKY HEADER AND FOOTER
+        .o_list_view{
+            .o_content .o_list_renderer.table-responsive{
+                overflow-x: initial;
+                .o_list_table{
+                    thead, thead tr:nth-child(1) th {
+                        position: sticky !important;
+                        top: 0;
+                        z-index: 1;
+                    }
+                    tfoot, tfoot tr:nth-child(1) td {
+                        position: sticky !important;
+                        bottom: 8px;
+                        z-index: 1;
+                    }
+                    thead, tfoot{
+                        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.08) !important;
+                    }
+                }
+            }
+        }
+        // LIST VIEW STICKY HEADER AND FOOTER END
+    }
+
+    &.list_compact{
+        .o_list_renderer{
+            --ListRenderer-thead-padding-v: 0.5rem;
+        }
+    }
+
+    .o_list_view{
+        .o_content .o_list_renderer.table-responsive{
+            .o_list_table{
+                thead, thead tr:nth-child(1) th, tfoot, tfoot tr:nth-child(1) td {
+                    background-color: var(--biz-theme-secondary-color) !important;
+                }
+                thead, tfoot{
+                    border-radius: var(--border-radius-lg) !important;
+
+                    th, td{
+                        &:first-child{
+                            border-top-left-radius: var(--border-radius-lg) !important;
+                            border-bottom-left-radius: var(--border-radius-lg) !important;
+                        }
+                        &:last-child{
+                            border-top-right-radius: var(--border-radius-lg) !important;
+                            border-bottom-right-radius: var(--border-radius-lg) !important;
+                        }
+                    } 
+                }
+            }
+        }
+    }
+
+    .o_list_renderer{
+        .o_list_table{
+            background-color: unset !important;
+            thead, tfoot {
+                background-color: unset !important;
+                color: var(--biz-theme-body-text-color) !important;
+            }
+            .dropdown-toggle{
+                padding: 0 !important;
+                border: 0 !important;
+            }
+            tbody{
+                > tr > td:not(.o_list_record_selector).o_list_button > button{
+                    padding: 0 5px !important;
+                }
+            }
+        }
+    }
+    .o_content {
+        .o_list_renderer {
+            .o_list_table {
+                background-color: unset !important;
+
+                thead{
+                    color: var(--biz-theme-body-text-color) !important;
+                }
+                tbody{
+                    tr{
+                        &.o_group_header {
+                            border-radius: var(--border-radius-md);
+                            th{
+                                &:first-child {
+                                    border-top-left-radius: var(--border-radius-md);
+                                    border-bottom-left-radius: var(--border-radius-md);
+                                }
+                                &:last-child {
+                                    border-top-right-radius: var(--border-radius-md);
+                                    border-bottom-right-radius: var(--border-radius-md);
+                                }
+                            }
+                        }
+                    }
+                }
+                tfoot{
+                    background-color: var(--biz-theme-secondary-color) !important;
+                    color: var(--biz-theme-secondary-text-color) !important;
+                }
+            }
+        }
+    }
+
+    .o_content {
+        transition: 00.5s;
+
+        .o_list_renderer {
+            &.table-responsive {
+                .o_list_table {
+                    border-collapse: separate;
+                    border-spacing: 0 var(--table-border-spacing);
+                    overflow-x: auto;
+                    width: 100%;
+
+                    .o_list_record_remove{
+                        button{
+                            color: var(--biz-theme-body-text-color) !important;
+                        }
+                    }
+
+                    thead {
+                        background-color: transparent !important;
+                        border: unset;
+                        tr {
+                            &:focus-within {
+                                background-color: unset !important;
+                            }
+                            th {
+                                border-top: 0 !important;
+                                vertical-align: middle;
+                                font-weight: 600 !important;
+                                border-bottom: 0 !important;
+                                border-left: 0 !important;
+                                color: var(--biz-theme-body-text-color) !important;
+                                font-size: var(--spiffy-font-size-md);
+                                background-color: unset !important;
+                                box-shadow: none !important;
+                                &:focus-within {
+                                    background-color: unset !important;
+                                }
+                            }
+                        }
+                        .o_list_controller {
+                            .dropdown-toggle {
+                                border: 0;
+                                padding: 0 !important;
+                                color: var(--biz-theme-body-text-color) !important;
+                            }
+                        }
+                    }
+
+                    tbody {
+                        & > tr.o_group_header > th {
+                            vertical-align: middle !important;
+                            border: 0 !important;
+                        }
+
+                        tr.o_data_row {
+                            box-shadow: var(--box-shadow-common) !important;
+                            border-radius: var(--border-radius-lg) !important;
+                            background-color: var(--biz-theme-secondary-color);
+
+                            &.o_is_line_section {
+                                background-color: #f9f9f9 !important;
+                                box-shadow: unset !important;
+                                /* .o_section_and_note_text_cell{
+                                    border-top-right-radius: var(--border-radius-lg) !important;
+                                    border-bottom-right-radius: var(--border-radius-lg) !important;
+                                } */
+                            }
+
+                            td, th {
+                                &:first-child {
+                                    border-top-left-radius: var(--border-radius-lg) !important;
+                                    border-bottom-left-radius: var(--border-radius-lg) !important;
+                                }
+
+                                &:last-child {
+                                    border-top-right-radius: var(--border-radius-lg) !important;
+                                    border-bottom-right-radius: var(--border-radius-lg) !important;
+                                }
+                                box-shadow: none !important;
+                            }
+
+                            &.o_selected_row{
+                                td{
+                                    &.o_data_cell {
+                                        &.o_image_cell{
+                                            overflow: visible;
+                                        }
+                                    }
+                                }
+                            }
+                            &:hover {
+                                td, th {
+                                    box-shadow: none !important;
+                                }
+                            }
+                        }
+
+                        .o_list_char {
+                            font-weight: bold !important;
+                            color: var(--biz-theme-primary-color) !important;
+                            transition: 0.3s;
+
+                            &:hover {
+                                opacity: 0.6;
+                            }
+                        }
+
+                        td {
+                            &.o_list_record_selector, &.o_data_cell{
+                                height: var(--list-table-height);
+                                border: 0;
+                            }
+                            vertical-align: middle;
+                            font-weight: 500 !important;
+                            border-top: 0 !important;
+                        }
+
+                        td.o_data_cell {
+                            vertical-align: middle;
+                        }
+                    }
+
+                    .attachment_div {
+                        display: flex;
+                        height: 35px
+                    }
+
+                    @include media-breakpoint-down(lg){
+                        .biz_attachment_section {
+                            flex-wrap: unset !important;
+                            overflow-x: auto;
+                            justify-content: unset !important;
+                            padding: 0 15px;
+                            scrollbar-width: none; // hide scrollbar in firefox
+                        }
+                        .biz_attachment_section::-webkit-scrollbar {
+                            display: none;
+                        }
+                    }
+
+                    .biz_attachment_section {
+                        padding-top: 0 !important;
+                        .attachment_box:not(.attachment_box_counter){
+                            .attachment-name {
+                                width: 150px;
+                            }
+                        }
+                        .attachment-name {
+                            white-space: nowrap !important;
+                            overflow: hidden;
+                            text-overflow: ellipsis;
+                            line-height: normal;
+                        }
+                        .attachment_box {
+                            padding: 0.2rem;
+                            min-height: 36px;
+                            border-radius: var(--border-radius-lg) !important;
+                        }
+                        .o_image {
+                            width: 30px !important;
+                            height: 30px !important;
+                            background-size: 25px;
+                        }
+                    }
+                }
+
+                tfoot {
+                    background-color: unset !important;
+                    border: 0 !important;
+                    tr td {
+                        border: 0 !important;
+                    }
+                    .o_list_number {
+                        color: var(--biz-theme-primary-color) !important;
+                    }
+                }
+                .o_optional_columns_dropdown_toggle {
+                    top: 10px !important;
+                }
+            }
+        }
+    }
+
+    &.list_compact {
+        .o_content {
+            .o_list_renderer {
+                &.table-responsive {
+                    .o_list_table {
+                        .attachment_div {
+                            height: 30px;
+                        }
+                        .biz_attachment_section {
+                            .attachment_box {
+                                padding-left: 0.5rem !important;
+                                min-height: 30px;
+                            }
+                            .o_image {
+                                width: 20px !important;
+                                height: 20px !important;
+                                background-size: 18px;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .o_list_renderer  .o_list_table .o_column_sortable:not(.o_handle_cell)::after {
+        opacity: 1 !important;
+        transition: 0.3s;
+    }
+
+    .o_list_renderer  .o_list_table .o_column_sortable:not(.o_handle_cell):hover::after {
+        opacity: 1 !important;
+    }
+
+    .table-hover tbody tr:hover {
+        background-color: #d1ecf1 !important;
+        color: #1b1b1b !important;
+    }
+}
+
+.o_list_selection_box {
+    background-color: var(--biz-theme-primary-color) !important;
+    color: var(--biz-theme-primary-text-color) !important;
+    margin-right: 8px;
+    padding: 0.6rem 1rem;
+    border-radius: var(--border-radius-md);
+}
+
+body.o_web_client.dark_mode {
+    .o_content {
+        .o_list_renderer  {
+            .o_list_table {
+                .o_data_row.o_selected_row > .o_data_cell:not(.o_readonly_modifier):not(.o_invisible_modifier) {
+                    &:not(.o_handle_cell) {
+                        background-color: lighten($color: #242424, $amount: 10%) !important;
+                    }
+                }
+            }
+            thead {
+                background-color: transparent !important;
+                border: unset;
+            }
+            tbody {
+                > tr.o_group_header{
+                    background-image: linear-gradient(to bottom, #242424, #343434) !important;
+                }
+            }
+            &.table-responsive {
+                .o_list_table {
+                    background-color: transparent !important;
+                    color: var(--biz-theme-body-text-color);
+
+                    .o_column_sortable:not(.o_handle_cell)::after {
+                        filter: brightness(0) invert(1);
+                    }
+
+                    tbody {
+                        tr.o_data_row {
+                            /* background: var(--biz-theme-secondary-color) !important;
+                            transition: 0.3s;
+                            &:hover{
+                                background: var(--biz-theme-primary-rgba) !important;
+                            } */
+                            &.o_is_line_section {
+                                background-color: #161616 !important;
+                            }
+                            td {
+                                &:first-child {
+                                    border-top-left-radius: var(--border-radius-lg) !important;
+                                    border-bottom-left-radius: var(--border-radius-lg) !important;
+                                }
+
+                                &:last-child {
+                                    border-top-right-radius: var(--border-radius-lg) !important;
+                                    border-bottom-right-radius: var(--border-radius-lg) !important;
+                                    border: 0;
+                                    height: var(--list-table-height);
+                                }
+                            }
+
+                            /* &:hover {
+                                color: unset !important;
+                            } */
+                        }
+                    }
+
+
+                    .o_field_widget.o_field_badge {
+                        color: white;
+                    }
+
+                    tfoot {
+                        background-color: unset !important;
+                        color: unset !important;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.split_div > .o_view_controller > .o_content > .o_view_controller {
+    position: unset !important;
+}
+
+body.o_web_client, .dark_mode {
+    &.biz_theme_square {
+        .o_content {
+            .o_list_renderer  {
+                .o_list_table {
+                    tbody {
+                        tr {
+                            border-radius: 0 !important;
+
+                            td {
+                                &:first-child {
+                                    border-top-left-radius: 0 !important;
+                                    border-bottom-left-radius: 0 !important;
+                                }
+
+                                &:last-child {
+                                    border-top-right-radius: 0 !important;
+                                    border-bottom-right-radius: 0 !important;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    span.o_pager_value {
+        border: 0 !important;
+    }
+}
+
+body.o_web_client {
+    .o_list_renderer  {
+        .o_field_widget.o_field_many2manytags {
+            .o_tag_color_1 {
+                background-color: transparent !important;
+                color: #F06050 !important;
+                border: 1px solid #F06050 !important;
+            }
+
+            .o_tag_color_3 {
+                background-color: transparent !important;
+                color: #F7CD1F !important;
+                border: 1px solid #F7CD1F !important;
+            }
+
+            .o_tag_color_5 {
+                background-color: transparent !important;
+                color: #814968 !important;
+                border: 1px solid #814968 !important;
+            }
+
+            .o_tag_color_4 {
+                background-color: transparent !important;
+                color: #6CC1ED !important;
+                border: 1px solid #6CC1ED !important;
+            }
+
+            .o_tag_color_6 {
+                background-color: transparent !important;
+                color: #EB7E7F !important;
+                border: 1px solid #EB7E7F !important;
+            }
+
+            .o_tag_color_7 {
+                background-color: transparent !important;
+                color: #2C8397 !important;
+                border: 1px solid #2C8397 !important;
+            }
+
+            .o_tag_color_2 {
+                background-color: transparent !important;
+                color: #F4A460 !important;
+                border: 1px solid #F4A460 !important;
+            }
+        }
+        .o_badge_cell {
+            // .o_field_badge {
+                // background-color: transparent !important;
+                // color: rgba(163, 163, 163, 0.9) !important;
+                // border: 1px solid #c3c3c3 !important;
+            // }
+            .bg-success-light {
+                background-color: transparent !important;
+                color: rgba(40, 167, 69, 0.9) !important;
+                border: 1px solid #28a745b0 !important;
+            }
+            .bg-info-light {
+                background-color: transparent !important;
+                color: rgba(23, 162, 184, 0.9) !important;
+                border: 1px solid #17a2b899 !important;
+            }
+        }
+    }
+}

spiffy_theme_backend/static/src/scss/loader.scss

@@ -0,0 +1,22 @@
+body.o_web_client {
+    @for $i from 1 through 10 {
+        &.loader_style_#{$i} {
+            .o_blockUI .o_spinner {
+                height: 100px !important;
+                img {
+                    content: url(/spiffy_theme_backend/static/src/image/loader_#{$i}.gif) !important;
+                    animation: none !important;
+                    max-width: 90px;
+                    max-height: 90px;
+                }
+            }
+        }
+    }
+
+    .loader_style {
+        .custom-control-label::after,
+        .custom-control-label::before {
+            top: 38%;
+        }
+    }
+}

spiffy_theme_backend/static/src/scss/loginpage.scss

@@ -0,0 +1,420 @@
+.oe_website_login_container{
+    .input-group-append{
+        a{
+            background-color: theme-color('secondary') !important;
+            border-color: theme-color('secondary') !important;
+            color: #fff !important;
+        }
+    }
+    .oe_login_form{
+        .oe_login_buttons{
+            .btn-primary{
+                background-color: theme-color('primary') !important;
+                border-color: theme-color('primary') !important;
+                color: #fff !important;
+            }
+        }
+    }
+    .oe_login_form, .oe_signup_form,.oe_reset_password_form{
+        .form-group{
+            display: block !important;
+        }
+        .login-icon{
+            display: none !important;
+        }
+    }
+    .oe_reset_password_form{
+        .oe_login_buttons{
+            margin-top: 15px;
+        }
+    }
+}
+
+body.backend-login-page{
+    &[data-debug-mode="1"]{
+        .login_style_4{
+            .border-top{
+                margin-top: 32px !important;
+                top: 34px !important;
+            }
+        }
+    }
+    .login-page-background {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-position: center;
+        background-size: cover;
+        background-repeat: no-repeat;
+    }
+    .card-body{
+        &.pallet_1 {
+            .btn-primary,.btn-secondary{
+                background-color:#1ea8e7;
+                border-color: #1ea8e7;
+                color: #ffffff;
+            }
+            .oe_login_form, .oe_signup_form,.oe_reset_password_form{
+                color: #1ea8e7;
+            }
+        }
+        &.pallet_2 {
+            .btn-primary,.btn-secondary{
+                background-color: #75ab38;
+                border-color: #75ab38;
+                color: #ffffff;
+            }
+            .oe_login_form, .oe_signup_form,.oe_reset_password_form{
+                color: #75ab38;
+            }
+        }
+    
+        &.pallet_3 {
+            .btn-primary,.btn-secondary{
+                background-color: #ed6789;
+                border-color: #ed6789;
+                color: #ffffff;
+            }
+            .oe_login_form, .oe_signup_form,.oe_reset_password_form{
+                color: #ed6789;
+            }
+        }
+    
+        &.pallet_4 {
+            .btn-primary,.btn-secondary{
+                background-color: #a772cb;
+                border-color: #a772cb;
+                color: #ffffff;
+            }
+            .oe_login_form, .oe_signup_form,.oe_reset_password_form{
+                color: #a772cb;
+            }
+        }
+    
+        &.pallet_5 {
+            .btn-primary,.btn-secondary{
+                background-color: #eb5858;
+                border-color: #eb5858;
+                color: #ffffff;
+            }
+            .oe_login_form, .oe_signup_form,.oe_reset_password_form{
+                color: #eb5858;
+            }
+        }
+    
+        &.pallet_6 {
+            .btn-primary,.btn-secondary{
+                background-color: #8c6f46;
+                border-color: #8c6f46;
+                color: #ffffff;
+            }
+            .oe_login_form, .oe_signup_form,.oe_reset_password_form{
+                color: #8c6f46;
+            }
+        }
+    
+        &.pallet_7 {
+            .btn-primary,.btn-secondary{
+                background-color: #007a5a;
+                border-color: #007a5a;
+                color: #ffffff;
+            }
+            .oe_login_form, .oe_signup_form,.oe_reset_password_form{
+                color: #007a5a;
+            }
+        }
+    
+        &.pallet_8 {
+            .btn-primary,.btn-secondary{
+                background-color: #cc8631;
+                border-color: #cc8631;
+                color: #ffffff;
+            }
+            .oe_login_form, .oe_signup_form,.oe_reset_password_form{
+                color: #cc8631;
+            }
+        }
+    
+        &.pallet_9 {
+            .btn-primary,.btn-secondary{
+                background-color: #0097a7;
+                border-color: #0097a7;
+                color: #ffffff;
+            }
+            .oe_login_form, .oe_signup_form,.oe_reset_password_form{
+                color: #0097a7;
+            }
+        }
+        .border-bottom{
+            border: none !important;
+        }
+        .border-top{
+            border: none !important;
+        }
+        a:not(.btn),a[href="/web/login?"]{
+            color: #495057;
+            font-size: 12px !important;
+        }
+        .oe_login_form,.oe_signup_form,.oe_reset_password_form{
+            .form-group{
+                margin-bottom: 1.5rem !important;
+                border: 1px solid #9cabc170;
+                border-radius: 8px;
+                .input-group{
+                    input{
+                        border-top-right-radius: 0 !important;
+                        border-bottom-right-radius:0 !important;
+                        padding-left: 12px !important;
+                    }
+                    a{
+                        i{
+                            margin-left: 4px;
+                        }
+                    }
+                }
+                .input_content{
+                    border: 1px solid #9cabc170;
+                    border-radius: 8px;
+                    .fa{
+                        position: absolute;
+                    }
+                }
+                .login-icon{
+                    width: 20px;
+                    height: 20px;
+                    text-align: center;
+                }
+                input{
+                    height: 45px;
+                    font-weight: 500;
+                    font-size: 16px;
+                    outline: none !important;
+                    box-shadow: none !important;
+                    border: none;
+                    border-top-right-radius: 8px !important;
+                    border-bottom-right-radius: 8px !important;
+                }
+                label{
+                    display: none;
+                }
+            }
+            .clearfix,.oe_login_buttons  {
+                padding: 0 !important;
+                .btn-block, .btn-primary {
+                    height: 45px;
+                    font-weight: 500;
+                    font-size: 16px;
+                    border-radius: 8px;
+                }
+            }
+        }
+        &.login_style_1{
+            background-color: transparent !important;
+            .oe_login_form,.oe_signup_form,.oe_reset_password_form{
+                background-color: white;
+                padding: 45px;
+                border-radius: 8px;
+                box-shadow: 0 4px 10px rgba(0,0,0,0.03);
+                .form-group{
+                    .input-group{
+                        a{
+                            display: flex;
+                            align-items: center;
+                            justify-content: center;
+                            border-top-right-radius: 8px !important;
+                            border-bottom-right-radius:8px !important;
+                        }
+                        input{
+                            border-top-right-radius: 0px !important;
+                            border-bottom-right-radius:0px !important;
+                        }
+                    }
+                    input,.input_content{
+                        border-radius: 8px !important;
+                    }
+                }
+                .clearfix,.oe_login_buttons{
+                    a,.btn:not(.btn-primary){
+                        color: #495057 !important;
+                        font-size: 12px !important;
+                        font-weight: 400 !important;
+                    }
+                }
+            }
+        }
+        &.login_style_2{
+            background-color: white !important;
+            box-shadow: 0 4px 10px rgba(0,0,0,0.03);
+            .border-top{
+                margin-top: 0 !important;
+                a{
+                    color: #495057 !important;
+                }
+            }
+            .oe_login_form,.oe_signup_form,.oe_reset_password_form{
+                background-color: white;
+                padding:0 45px;
+                .form-group{
+                    background-color: #f7f7f7 !important;
+                    .input-group{
+                        a{
+                            display: flex;
+                            align-items: center;
+                            justify-content: center;
+                            border-top-right-radius: 0px !important;
+                            border-bottom-right-radius:0px !important;
+                        }
+                    }
+                    input,.input_content{
+                        border-radius: 0px;
+                        background-color: #f7f7f7 !important;
+                        border: none !important;
+                    }
+                }
+                .clearfix,.oe_login_buttons  {
+                    .btn-block {
+                        border-radius: 0px;
+                    }
+                    a,.btn:not(.btn-primary){
+                        color: #495057 !important;
+                        font-size: 12px !important;
+                        font-weight: 400 !important;
+                    }
+                }
+            }
+        }
+        &.login_style_3{
+            background-color: transparent !important;
+            .border-top {
+                margin: 0 !important;
+            }
+           
+            .oe_login_form,.oe_signup_form,.oe_reset_password_form {
+                background-color: transparent;
+                padding: 0 45px;
+                border-radius: 4px;
+
+                .form-group {
+                    background-color: #ffffff !important;
+                    .input-group {
+                        a {
+                            display: flex;
+                            align-items: center;
+                            justify-content: center;
+                            border-top-right-radius: 4px !important;
+                            border-bottom-right-radius: 4px !important;
+                            color: #fff !important;
+                        }
+                    }
+                    label{
+                        color: #fff;
+                    }
+
+                    .input_content {
+                        background-color: #fff;
+                        border-radius: 4px;
+                    }
+
+                    input {
+                        border-radius: 4px;
+                    }
+                }
+            }
+
+            .clearfix,.oe_login_buttons {
+                padding: 0 !important;
+                a:not([href="/web/login?"]),.btn:not(.btn-primary){
+                    color: inherit !important;
+                    font-size: 12px !important;
+                    font-weight: 400 !important;
+                }
+            }
+        }
+        &.login_style_4{
+            background-color: transparent !important;
+            .border-top{
+                position: relative;
+                top: 15px;
+                z-index: -1;
+            }
+            .oe_login_form,.oe_signup_form,.oe_reset_password_form{
+                background-color: white;
+                padding: 45px;
+                border-radius: 8px;
+                box-shadow: 0 4px 10px rgba(0,0,0,0.03);
+                position: relative;
+                .form-group{
+                    .input-group{
+                        border-bottom: 1px solid #000;
+                        input{
+                            border-top-right-radius: 0 !important;
+                            border-bottom-right-radius:0 !important;
+                            border: none !important;
+                            padding-left: 0 !important;
+                            padding-right: 0 !important;
+                        }
+                        a{
+                            background-color: transparent !important;
+                            color: #000 !important;
+                            border: none !important;
+                            height: 30px;  
+                        }
+                    }
+                    .input_content{
+                        background-color: transparent !important;
+                        border: none !important;
+                        border-radius: 0 !important;
+                        border-bottom: 1px solid #000 !important;
+                    }
+                    input{
+                        height: 30px !important;
+                        font-size: 14px !important;
+                        border-radius: 0px !important;
+                        background-color: transparent !important;
+                        border: none !important;
+                    }
+                }
+                .clearfix,.oe_login_buttons  {
+                    position: absolute;
+                    width: calc(100% - 90px);
+                    left: 50%;
+                    transform: translateX(-50%);
+                    padding: 0 !important;
+                    top: calc(100% - 20px);
+                    .btn-primary {
+                        height: 40px !important;
+                        font-size: 14px !important;
+                        border-radius: 25px !important;
+                    }
+                    .btn-block{
+                        height: fit-content !important;
+                    }
+                    a:not([href="/web/login?"]),.btn:not(.btn-primary){
+                        color: inherit !important;
+                        font-size: 12px !important;
+                        font-weight: 400 !important;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.oe_reset_password_form {
+    .clearfix>div {
+        justify-content: center !important;
+    }
+}
+
+.o_database_list {
+    max-width: 500px !important;
+    transform: translate(-50%,-50%);
+    top: 50%;
+    position: absolute;
+    left: 50%;
+    width: 100%;
+    max-height: 80vh;
+    background-color: transparent !important;
+}

spiffy_theme_backend/static/src/scss/modal.scss

@@ -0,0 +1,319 @@
+body.o_web_client {
+    &.modal-open{
+        .modal{
+            overflow-y: hidden;
+        }
+    }
+    .modal-dialog {
+        max-width: unset !important;
+
+        &.modal-lg, &.modal-xl{
+            .modal-content {
+                @media (min-width: 576px) {
+                    width: 650px;
+                }
+                @media (min-width: 992px) {
+                    width: 980px;
+                }
+            }
+        }
+        &.modal-sm{
+            .modal-content {
+                @media (min-width: 576px) {
+                    width: 300px;
+                }
+            }
+        }
+        @media (min-width: 576px) {
+            .modal-content {
+                width: 650px;
+                margin: auto;
+            }
+        }
+        .close {
+            color: var(--biz-theme-body-text-color) !important;
+        }
+        .modal-content {
+            padding: 15px;
+            padding-top: 0;
+            border-radius: var(--border-radius-lg);
+            background-color: var(--biz-theme-body-color) !important;
+            color: var(--biz-theme-body-text-color) !important;
+
+            .modal-header {
+                padding: 15px 0 !important;
+            }
+
+            .modal-footer {
+                padding: 15px 0px 0px 0px !important;
+                background-color: transparent;
+                box-shadow: unset;
+                footer button {
+                    margin-bottom: 0 !important;
+                }
+            }
+            
+            .modal-body.o_act_window{
+                .o_form_view{
+                    background-color: var(--biz-theme-body-color) !important;
+                    .o_form_sheet_bg{
+                        background-color: var(--biz-theme-body-color)!important;
+                        .o_form_sheet{
+                            background-color: var(--biz-theme-body-color)!important;
+                        }
+                    }
+                    .o_form_uri {
+                        > span:first-child {
+                            color: var(--biz-theme-primary-color);
+                        }
+                        color: var(--biz-theme-primary-color);
+                    }
+                }
+            }
+        }
+        @include media-breakpoint-down(sm) {
+            .modal-content {
+                .modal-header {
+                    .modal-title {
+                        color: inherit !important;
+                    }
+                    background: transparent !important;
+                }
+            }
+        }
+    }
+
+    .dynamic_data {
+        .border-style {
+            border-bottom: 1px solid #e2e2e2;
+        }
+        position: fixed;
+        z-index: 1041;
+        background-color: var(--biz-theme-body-color) !important;
+        color: var(--biz-theme-body-text-color) !important;
+        box-shadow: var(--box-shadow-common);
+        right: -100%;
+        top: 0;
+        height: 100%;
+        transition: 0.2s;
+        @include media-breakpoint-up(lg){
+            width: 600px;
+            border-top-left-radius: var(--border-radius-lg);
+            border-bottom-left-radius: var(--border-radius-lg);
+        }
+        @include media-breakpoint-down(md){
+            width: 100%;
+        }
+    
+        .theme-config-sidebar{
+            > .backend_configurator_close {
+                position: absolute;
+                top: 10px;
+                right: 8px;
+                z-index: 1042;
+    
+                &:focus {
+                    outline: 0 !important;
+                }
+                .img {
+                    max-width: 16px;
+                }
+            }
+            .config-sidebar-tab-panel{
+                max-height: 100vh;
+                overflow-y: auto;
+                li{
+                    width: 100%;
+                }
+                h3 {
+                    border-bottom: 1px solid #e2e2e2;
+                }
+                .nav-item {
+                    .nav-link {
+                        color: inherit;
+                        margin: 0 0.5rem !important;
+                        display: block !important;
+    
+                        &.active{
+                            background-color: var(--biz-theme-primary-color);
+                            color: var(--biz-theme-primary-text-color);
+                            border-radius: var(--border-radius-lg);
+                        }
+                    }
+                }
+            }
+            .config-sidebar-tab-content{
+                max-height: 100vh;
+                overflow-y: auto;
+                border-left: 1px solid #e2e2e2;
+    
+                h3 {
+                    border-bottom: 1px solid #e2e2e2;
+                }
+    
+                .menu-position-row{
+                    img{
+                        max-height: 50px;
+                        min-height: 50px;
+                    }
+                }
+                .theme-style-row, .separator-styles-row{
+                    img{
+                        max-height: 40px;
+                        min-height: 40px;
+                    }
+                }
+    
+                .custom-control{
+                    .custom-control-label{
+                        flex: 1 1 auto;
+                    }
+                }
+                .nav-item {
+                    .nav-link {
+                        color: inherit;
+                    }
+                    .nav-link.active {
+                        background-color: var(--biz-theme-primary-color);
+                        color: var(--biz-theme-primary-text-color);
+                    }
+                }
+    
+                .tab-pane{
+                    height: 100%;
+                    max-height: calc(100% - 60px);
+                    .container{
+                        height: 100%;
+                        max-height: calc(100% - 50px);
+                        overflow: auto;
+    
+                        .custom-radio,.form_check_content{
+                            border: 1px solid;
+                            border-color: #e2e2e2;
+                            border-radius: var(--border-radius-lg);
+                        }
+                        .form_check_content{
+                            padding: 10px;
+                        }
+                    }
+                }
+                .discard_button_style{
+                    border-top: 1px solid #e2e2e2;
+                }
+    
+                #general_settings, #font_family, #font_size {
+                    input[type="radio"]{
+                        .custom-control-label::before {
+                            top: 3px !important;
+                        }
+    
+                        .custom-control-label::after {
+                            position: absolute;
+                            top: 3px !important;
+                        }
+                    }
+                    input[type="checkbox"]{
+                        .custom-control-label::after {
+                            position: absolute;
+                            top: 6px !important;
+                        }
+                    }
+                }
+            }
+        }
+    
+        .text-style-design {
+            margin-left: 10px;
+        }
+    
+        &.visible{
+            right: 0 !important;
+        }
+    }
+
+
+    &.dark_mode{
+        .btn-close{
+            filter: invert(1);
+        }
+    }
+}
+
+.tab-pane {
+    .custom-control-inline {
+        .custom-control-input {
+            position: unset !important;
+        }
+    }
+
+    .color_picker {
+        padding: 0 !important;
+        background-color: transparent !important;
+        border: none !important;
+        cursor: pointer;
+    }
+}
+
+.box-shadow {
+    padding: 10px;
+}
+
+body.o_web_client {
+    &::after {
+        backdrop-filter: blur(0px);
+        content: "";
+        position: fixed;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        transition: 0.5s;
+        z-index: -10;
+    }
+}
+
+body.o_web_client.backdrop {
+    &::after {
+        backdrop-filter: blur(3px);
+        background-color: rgba(0, 0, 0, .10);
+        z-index: 100;
+        @include media-breakpoint-down(md){
+            z-index: 97;
+        }
+    }
+}
+
+.color_picker {
+    span {
+        font-size: 21px;
+    }
+    .fa-circle:before {
+        border: 1px solid #1b1b1b;
+        border-radius: 100%;
+        line-height: 24px;
+        padding-left: 1.6px;
+        padding-right: 1.6px;
+    }
+}
+
+// Scorll Bar Design
+body.o_web_client {
+    ::-webkit-scrollbar-track {
+        border-radius: 5px;
+    }
+    ::-webkit-scrollbar {
+        height: 5px;
+        width: 5px;
+        border-radius: 5px;
+    }
+    ::-webkit-scrollbar-thumb {
+        background-color: var(--biz-theme-primary-color);
+        border-radius: 5px;
+    }
+}
+
+body.o_web_client {
+    .o_content .o_list_view .table-responsive .o_list_table {
+        border: 0 !important;
+    }
+}

spiffy_theme_backend/static/src/scss/multi_tab.scss

@@ -0,0 +1,95 @@
+body.o_web_client {
+    .multi_tab_section {
+        .multi_tab_div {
+            padding: 3px 10px;
+            box-shadow: var(--box-shadow-common) !important;
+            background: var(--biz-theme-secondary-color) !important;
+            border-radius: var(--border-radius-lg) !important;
+            height: 35px;
+            line-height: 30px;
+            min-width: 170px;
+            .remove_tab {
+                color: #cdcdcd;
+                cursor: pointer;
+            }
+            a{
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                padding-right: 10px;
+
+                span{
+                    pointer-events: none;
+                }
+            }
+            &.tab_active {
+                a, .remove_tab {
+                    color: #fff !important;
+                }
+                background: var(--biz-theme-primary-rgba) !important;
+                border-color: var(--biz-theme-primary-rgba) !important;
+                color: #fff !important;
+            }
+        }
+        position: absolute;
+        width: min-intrinsic !important;
+        width: -webkit-fill-available;
+        display: flex;
+        flex-wrap: nowrap;
+        overflow-x: auto;
+        gap: 8px;
+        padding-bottom: 8px;
+
+        &::-webkit-scrollbar {
+            display: block !important;
+            height: 2px;
+        }
+       
+    }
+    &.top_menu_vertical {
+        &.multi_tab_enabled{
+            .o_action_manager {
+                margin-top: 60px;
+            }
+        }
+        .multi_tab_section {
+            // padding: 0px 5rem 0px 27rem;
+            top: 8px;
+            @media (max-width: 767.98px){
+                left: 15px;
+                right: 15px;
+            }
+            @media (min-width: 768px) {
+                left: calc(var(--vertical-menu-width) + 3rem);
+                right: 5rem;
+            }
+            
+        }
+        &:not(.pinned) {
+            .multi_tab_section {
+                left: 8rem;
+                // padding: 0px 5rem 0px 8rem;
+            }
+        }
+    }
+    &.top_menu_horizontal {
+        &.multi_tab_enabled{
+            .o_action_manager {
+                margin-top: 60px;
+            }
+        }
+        .multi_tab_section {
+            top: calc(var(--horizontal-menu-height) + 8px);
+            @media (max-width: 767.98px){
+                left: 15px;
+                right: 15px;
+            }
+            @media (min-width: 768px) {
+                left: 5rem;
+                right: 5rem;
+            }
+            
+            // padding: 0px 5rem 0px 5rem;
+        }
+    }
+}

spiffy_theme_backend/static/src/scss/notification.scss

@@ -0,0 +1,23 @@
+/* Notification Toast Popup style */
+body.o_web_client {
+     .o_notification_manager{
+        .o_notification{
+            border-radius: var(--border-radius-lg);
+            border: 0;
+            box-shadow: var(--box-shadow-common);
+
+            *{
+                border: 0;
+            }
+            .o_notification_title{
+                font-size: 1.1667rem;
+            }
+            .o_notification_content{
+                ul{
+                    list-style-type: circle;
+                    padding-left: 25px;
+                }
+            }
+        }
+    }
+}

spiffy_theme_backend/static/src/scss/pivot_view.scss

@@ -0,0 +1,63 @@
+body.o_web_client {
+    .o_content{
+        .o_pivot {
+            padding: 30px 0 30px 0px !important;
+
+            .table-bordered {
+                background-color: var(--biz-theme-body-color) !important;
+
+                thead {
+                    tr {
+                        background-color: var(--biz-theme-body-color) !important;
+                        height: 50px;
+
+                        th {
+                            background-color: var(--biz-theme-body-color) !important;
+                            color: var(--biz-theme-body-text-color) !important;
+                            font-weight: 600 !important;
+                            padding-left: 25px;
+                            padding-right: 25px;
+
+                            &:focus-within {
+                                background-color: unset !important;
+                            }
+                        }
+                    }
+                }
+
+                tbody {
+                    th {
+                        background-color: var(--biz-theme-body-color) !important;
+                        color: var(--biz-theme-body-text-color) !important;
+                    }
+
+                    tr {
+                        background-color: var(--biz-theme-body-color) !important;
+                        height: 50px;
+
+                        td {
+                            padding-left: 25px;
+                            padding-right: 25px;
+                        }
+
+                        td.o_pivot_cell_value {
+                            background-color: var(--biz-theme-body-color) !important;
+                            color: var(--biz-theme-body-text-color) !important;
+
+                            .o_value {
+                                text-align: center;
+                            }
+                        }
+
+                        &:hover {
+                             background-color: var(--biz-theme-secondary-color) !important;
+                        }
+                    }
+                }
+            }
+            @include media-breakpoint-down(md){
+                padding: 30px 15px !important;
+            }
+        }
+    }
+}

spiffy_theme_backend/static/src/scss/popup_styles.scss

@@ -0,0 +1,114 @@
+body.o_web_client.popup_style_1{
+    .o_dialog_container.modal-open {
+        .modal{
+            .modal-content{
+                opacity: 0;
+                animation-name: fadeIn;
+                animation-duration: 0.2s;
+                animation-timing-function: linear;
+                animation-fill-mode: forwards;
+            }
+            @-webkit-keyframes fadeIn {
+                0% {
+                  opacity:0;
+                }
+                100% {
+                  opacity:1;
+                }
+            }
+        }
+    }
+}
+
+body.o_web_client.popup_style_2{
+    .o_dialog_container.modal-open {
+        .modal{
+            .modal-content{
+                animation-name: flip;
+                animation-duration: 0.2s;
+                animation-timing-function: linear;
+                transform-origin: 50% 50%;
+            }
+            @-webkit-keyframes flip {
+                0%{
+                    -webkit-transform: perspective(400px) rotateX(-20deg);
+                    -webkit-animation-timing-function: ease-out;
+                }
+                100%{
+                    -webkit-transform: perspective(400px) rotateX(0deg);
+                    -webkit-animation-timing-function: ease-in;
+                }
+            }
+        }
+    }
+}
+
+body.o_web_client.popup_style_3{
+    .o_dialog_container.modal-open {
+        .modal{
+            .modal-content{
+                animation-name: bounceIn;
+                animation-duration: 0.2s;
+                animation-timing-function: linear;
+            }
+            @-webkit-keyframes bounceIn{
+                0%{
+                    transform: scale(0.3) translate3d(0,0,0) !important;
+                }
+                50%{
+                    transform: scale(1.5) !important;
+                }
+                80%{
+                    transform: scale(0.89) !important;
+                }
+                100%{
+                    transform: scale(1) translate3d(0,0,0) !important;
+                }
+            }
+        }
+    }
+}
+
+body.o_web_client.popup_style_4{
+    .o_dialog_container:not(.modal-open) {
+        .modal:not(.show){
+            .modal-content{
+                transform: scale(1.2);
+            }
+        }
+    }
+    .o_dialog_container.modal-open {
+        .modal{
+            .modal-content{
+                -webkit-transition-property: -webkit-transform;
+                -webkit-transition-duration: 0.2s;
+                -moz-transition-property: -moz-transform;
+                -moz-transition-duration: 0.2s;
+                -webkit-animation-name: shrink;
+                -webkit-animation-duration: 0.2s;
+                -webkit-animation-iteration-count: forwards;
+                -webkit-animation-timing-function: linear;
+                -moz-animation-name: shrink;
+                -moz-animation-duration: 0.2s;
+                -moz-animation-iteration-count: forwards;
+                -moz-animation-timing-function: linear;
+                
+                transition-property: -moz-transform;
+                transition-duration: 0.2s;
+                animation-name: shrink;
+                animation-duration: 0.2s;
+                animation-iteration-count: forwards;
+                animation-timing-function: linear;
+                
+            }
+            @-webkit-keyframes shrink{
+                from {
+                    transform: scale(1.2);
+                }
+                to {
+                    transform: scale(1);
+                }
+            }
+        }
+    }
+}

spiffy_theme_backend/static/src/scss/radio_styles.scss

@@ -0,0 +1,262 @@
+body.o_web_client {
+    .biz-custom-radio1 {
+        position: relative;
+        &::before {
+            position: absolute;
+            content: "";
+            display: inline-block;
+            outline: 0 !important;
+            border: 1px solid var(--biz-theme-primary-color) !important;
+            border-radius: 50% !important;
+            height: 14px;
+            width: 14px;
+        }
+    
+        &.active {
+            &::after {
+                position: absolute;
+                content: "";
+                font-family: 'fontawesome' !important;
+                color: var(--biz-theme-primary-text-color) !important;
+                outline: 0 !important;
+                border: 0 !important;
+                border-radius: 50% !important;
+                background-color: var(--biz-theme-primary-color) !important;
+                height: 8px;
+                width: 8px;
+                margin-top: 3px;
+                transform: none !important;
+                font-size: 10px;
+                margin-left: 3px;
+            }
+        }
+    }
+    
+    .biz-custom-radio2 {
+        position: relative;
+    
+        &::before {
+            position: absolute;
+            content: "";
+            display: inline-block;
+            outline: 0 !important;
+            border: 1px solid var(--biz-theme-primary-color) !important;
+            border-radius: 0% !important;
+            height: 14px;
+            width: 14px;
+    
+        }
+    
+        &.active {
+            &::after {
+                position: absolute;
+                content: "";
+                font-family: 'fontawesome' !important;
+                color: var(--biz-theme-primary-text-color) !important;
+                outline: 0 !important;
+                border: 0 !important;
+                border-radius: 0% !important;
+                background-color: var(--biz-theme-primary-color) !important;
+                height: 8px;
+                width: 8px;
+                margin-top: 3px;
+                transform: none !important;
+                font-size: 10px;
+                margin-left: 3px;
+            }
+        }
+    }
+    
+    .biz-custom-radio3 {
+        position: relative;
+    
+        &::before {
+            position: absolute;
+            content: "";
+            display: inline-block;
+            outline: 0 !important;
+            border: 3px solid var(--biz-theme-primary-color) !important;
+            border-radius: 50% !important;
+            height: 14px;
+            width: 14px;
+            background-color: var(--biz-theme-primary-color) !important;
+        }
+    
+        &.active {
+            &::after {
+                position: absolute;
+                content: "";
+                font-family: 'fontawesome' !important;
+                color: var(--biz-theme-primary-text-color) !important;
+                outline: 0 !important;
+                border: 0 !important;
+                border-radius: 50% !important;
+                background-color: var(--biz-theme-primary-text-color)  !important;
+                height: 6px;
+                width: 6px;
+                margin-top: 4px;
+                transform: none !important;
+                font-size: 10px;
+                margin-left: 4px;
+            }
+        }
+    }
+    
+    .biz-custom-radio4 {
+        position: relative;
+    
+        &::before {
+            position: absolute;
+            content: "\f2dd";
+            font-family: 'fontawesome' !important;
+            display: inline-block;
+            outline: 0 !important;
+            border-radius: 50% !important;
+            background-color: transparent !important;
+            height: 14px;
+            width: 14px;
+            transform: none !important;
+            color: var(--biz-theme-primary-color) !important;
+            font-size: 16px;
+        }
+    
+        &.active {
+            &::after {
+                position: absolute;
+                content: "";
+                font-family: 'fontawesome' !important;
+                color: var(--biz-theme-primary-text-color) !important;
+                outline: 0 !important;
+                border: 0 !important;
+                border-radius: 50% !important;
+                background-color: var(--biz-theme-primary-color)  !important;
+                height: 8px;
+                width: 8px;
+                margin-top: 8px;
+                transform: none !important;
+                font-size: 10px;
+                margin-left: 4px;
+            }
+        }
+    }
+}
+
+body.o_web_client.radio_style_1 {
+    input[type="radio"]{
+        display: inline-block;
+        outline: 0 !important;
+        border: 1px solid var(--biz-theme-primary-color) !important;
+        border-radius: 50% !important;
+        background-color: transparent !important;
+        width: 14px;
+        height: 14px;
+        line-height: 14px;
+        
+        &:checked{
+            position: relative;
+            &::after{
+                content: "" !important;
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+                width: 8px;
+                height: 8px;
+                border-radius: 50%;
+                display: inline-block;
+                background-color: var(--biz-theme-primary-color) !important;
+            }
+        }
+    }
+}
+
+body.o_web_client.radio_style_2 {
+    input[type="radio"]{
+        display: inline-block;
+        outline: 0 !important;
+        border: 1px solid var(--biz-theme-primary-color) !important;
+        border-radius: 0 !important;
+        background-color: transparent !important;
+        width: 14px;
+        height: 14px;
+        line-height: 14px;
+        
+        &:checked{
+            position: relative;
+            &::after{
+                content: "" !important;
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+                width: 8px;
+                height: 8px;
+                border-radius: 0;
+                display: inline-block;
+                background-color: var(--biz-theme-primary-color) !important;
+            }
+        }
+    }
+}
+
+body.o_web_client.radio_style_3 {
+    input[type="radio"]{
+        display: inline-block;
+        outline: 0 !important;
+        width: 14px;
+        height: 14px;
+        line-height: 14px;
+        border-radius: 50% !important;
+        border: 1px solid var(--biz-theme-primary-color) !important;
+        background-color: var(--biz-theme-primary-color) !important;
+        &:checked{
+            position: relative;
+            &::after{
+                content: "" !important;
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+                width: 6px;
+                height: 6px;
+                border-radius: 50%;
+                display: inline-block;
+                background-color: #fff !important;
+            }
+        }
+    }
+}
+
+body.o_web_client.radio_style_4 {
+    input[type="radio"]{
+        position: relative;
+        border: none;
+        display: inline-block;
+        width: 16px;
+        height: 16px;
+        line-height: 16px;
+        font-family: 'fontawesome' !important;
+        font-size: 16px;
+        color: var(--biz-theme-primary-color) !important;
+        background-image: unset;
+
+        &::before{
+            content: "\f2dd" !important;
+            position: absolute;
+        }
+        &:checked{
+            &::after{
+                content: "" !important;
+                display: inline-block;
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%,-50%);
+                border-radius: 50%;
+                width: 8px;
+                height: 8px;
+                background-color: var(--biz-theme-primary-color) !important;
+            }
+        }
+    }
+}

spiffy_theme_backend/static/src/scss/responsive.scss

@@ -0,0 +1,244 @@
+body.o_web_client{
+    // CONTROL PANEL RESPONSIVE
+    @media (max-width: 1366px) {
+        .o_control_panel{
+            .o_cp_bottom{
+                .o_cp_bottom_right{
+                    .o_filter_menu, .o_group_by_menu, .o_favorite_menu{
+                        .o_dropdown_title{
+                            display: none;
+                        }
+                    }
+                }
+            }
+        }
+    } 
+
+    @include media-breakpoint-down(md) {
+        .o_control_panel{
+            padding: 5px 15px;
+            .o_cp_bottom{
+                .o_cp_bottom_left{
+                    .o_cp_buttons{
+                        .o_list_buttons{
+                            &.o-editing{
+                                .open_wizard_action{
+                                    padding: 8px;
+                                }
+                            }
+                        }
+                    }
+                }
+                .o_cp_bottom_right{
+                    .o_cp_switch_buttons{
+                        .dropdown-menu{
+                            &.show{
+                                display: flex;
+                            }
+                            // button {
+                            //     padding: 2px 7px !important;
+                            // }
+                            font-size: 12px;
+                            justify-content: end;
+                        }
+                    }
+                }
+                gap: 8px;
+            }
+        }
+    }
+    @media (min-width: 768px) and (max-width: 1199.98px) {
+        .o_control_panel {
+            .o_cp_bottom {
+                display: block !important;
+                .o_cp_bottom_left {
+                    width: 100% !important;
+                }
+                .o_cp_bottom_right {
+                    width: 100% !important;
+                }
+            }
+        }
+    }
+    @include media-breakpoint-between(md, xxl) {
+        .o_control_panel {
+            .o_cp_bottom {
+                .o_cp_bottom_left {
+                    .btn-group{
+                        gap: 8px;
+                    }
+                    .o_cp_buttons {
+                        .o_list_selection_box {
+                            border: 0;
+                            padding: 0.6rem 1rem !important;
+                            margin: 0;
+                        }
+                        gap: 8px;
+                    }
+                    .o_cp_action_menus {
+                        .dropdown-toggle {
+                            margin-right: 0;
+                        }
+                        margin-left: unset;
+                        padding: 0;
+                    }
+                }
+                .o_cp_bottom_right {
+                    > .o_cp_pager {
+                        margin: 0 !important;
+                        padding: 0 !important;
+                    }
+                    .btn-group {
+                        justify-content: end;
+                    }
+                    row-gap: 8px;
+                }
+                align-items: start !important;
+            }
+        }
+    }
+    @media (max-width: 767.98px) {
+        .o_control_panel{
+            .o_cp_top_left, .o_cp_top_right{
+                flex: 1 1 100%;
+            }
+            .o_cp_top_left{
+                flex-basis: 80%;
+            }
+            .o_cp_top_right{
+                flex-basis: 20%;
+            }
+            .o_searchview{
+                &.o_searchview_quick{
+                    display: flex;
+                    padding-right: 5px;
+                    flex: 1 1 auto;
+                    align-items: center;
+                    
+                    .o_searchview_input_container{
+                        margin-right: auto;
+                    }
+                }
+            }
+        }
+    }
+    @media (min-width: 768px) and (max-width: 991.98px){
+        .o_control_panel{
+            .o_cp_top_left, .o_cp_top_right{
+                flex: 1 1 100%;
+            }
+            .o_cp_top_left{
+                flex-basis: 50%;
+            }
+            .o_cp_top_right{
+                flex-basis: 50%;
+            }
+            .o_searchview{
+                &.o_searchview_quick{
+                    display: flex;
+                    padding-right: 5px;
+                    flex: 1 1 auto;
+                    align-items: center;
+                    
+                    .o_searchview_input_container{
+                        margin-right: auto;
+                    }
+                }
+            }
+        }
+        .o_content{
+            padding: 0 15px !important;
+        }
+    }
+
+    // FORM VIEW RESPONSIVE
+    @include media-breakpoint-up(lg) {
+        .o_form_view {
+            .o_form_sheet_bg {
+                > .o_form_sheet{
+                    margin: 12px auto;
+                }
+            }
+        }
+    }
+    @include media-breakpoint-down(md) {
+        .o_Discuss{
+            padding: 0 15px;
+        }
+        .o_content{
+            // .o_form_view, .o_list_view, .o_calendar_container, .o_kanban_view{
+            //     padding: 0 15px !important;
+            // }
+            padding: 0 15px !important;
+        }
+        .o_form_view{
+            .o_FormRenderer_chatterContainer{
+                padding: 15px 0;
+            }
+
+            padding: 0;
+            .o_form_sheet {
+                margin: 0;
+                margin-top: 15px;
+                min-width: unset;
+            }
+            &.o_form_readonly{
+                .o_group {
+                    table.o_group.o_inner_group {
+                        tbody {
+                            tr {
+                                td {
+                                    &.o_td_label{
+                                        flex: unset;
+                                        max-width: 130px;
+                                        min-width: 130px;
+    
+                                        label{
+                                            overflow: hidden;
+                                            text-overflow: ellipsis;
+                                            word-break: break-all;
+                                            max-width: 120px;
+                                        }
+                                    }
+                                    width: unset !important;
+                                }
+                                flex-direction: row;
+                            }
+                        }
+                    } 
+                }
+            }
+            .o_group {
+                table.o_group.o_inner_group {
+                    width: 100%;
+                } 
+            }
+            .o_notebook {
+                .o_notebook_headers {
+                    .nav-tabs {
+                        .nav-link {
+                            width: max-content;
+                        }
+                        flex-wrap: nowrap;
+                        overflow-x: auto;
+                        overflow-y: hidden;
+                        &::-webkit-scrollbar {
+                            width: 0;
+                            height: 0;
+                        }
+                    }
+                }
+                .tab-content {
+                    > .tab-pane{
+                        padding: 9px 0;
+                    }
+                    .o_kanban_mobile {
+                        .oe_kanban_card {
+                            margin-bottom: 8px;
+                        }
+                    }
+                }
+            }
+        }
+    }
+} 

spiffy_theme_backend/static/src/scss/search_modal.scss

@@ -0,0 +1,53 @@
+// Search-bar Design in fullpage
+#search_bar_modal {
+    background-color: rgba(0, 0, 0, 0.5) !important;
+    input,select,textarea{
+        background-color: transparent;
+    }
+    .close{
+        box-shadow: none;
+        outline: none;
+    }
+    .form-control{
+        box-shadow: none !important;
+        border: 0;
+        border-radius: 0;
+        height: var(--input-height);
+        font-size: 20px;
+    }
+    .load-active-menu-selector{
+        max-width: 170px;
+    }
+    #searchPagesInput{
+        margin-left: 15px;
+    }
+    #searchPagesResults {
+        list-style: none;
+        padding-left: 0;
+    }
+    .auto-complete-result {
+        .search_list_content {
+            border-radius: var(--border-radius-md) !important;
+            border: 1px solid;
+            border-color: #dee2e6;
+            margin-bottom: 5px;
+
+            .autoComplete_highlighted{
+                padding: 0.75rem 1rem;
+                display: block;
+
+                b{
+                    color: var(--biz-theme-primary-color);
+                }
+            }
+            &.navigate_active{
+                border-color: var(--biz-theme-primary-color) !important;
+            }
+            &:hover {
+                border-color: var(--biz-theme-primary-color) !important;
+                cursor: pointer;
+            }
+        }
+    }
+}
+// search bar design end

spiffy_theme_backend/static/src/scss/search_panel.scss

@@ -0,0 +1,276 @@
+body.o_web_client {
+    .o_component_with_search_panel{
+        .o_search_panel_section{
+            .o_toggle_fold{
+                padding: 0 !important;
+                border: 0 !important;
+            }
+        }
+        .oe_module_action {
+            .btn {
+                padding: 2px 5px 2px 5px !important;
+            }
+
+            .btn-primary {
+                border-color: transparent !important;
+
+                &:hover {
+                    background-color: transparent !important;
+                    border: 1px solid var(--biz-theme-primary-color) !important;
+                    color: var(--biz-theme-primary-color) !important;
+                }
+            }
+
+            .btn-info {
+                background-color: transparent !important;
+                color: var(--biz-theme-primary-color);
+                border-color: var(--biz-theme-primary-color);
+                &:hover {
+                    background-color: transparent !important;
+                    border: 1px solid #17a2b8 !important;
+                    color: #17a2b8 !important;
+                }
+            }
+
+            .btn-secondary {
+                &:hover {
+                    border: 1px solid var(--biz-theme-primary-color) !important;
+                    color: var(--biz-theme-primary-color) !important;
+                }
+            }
+
+        }
+    }
+    .o_controller_with_searchpanel {
+        .o_renderer_with_searchpanel {
+
+            .o_dropdown_kanban {
+                .btn:focus {
+                    box-shadow: unset !important;
+                }
+
+                .dropdown-toggle.btn {
+                    background: transparent !important;
+                    border-color: transparent !important;
+                }
+            }
+
+            /* .oe_module_action {
+                .btn {
+                    padding: 2px 5px 2px 5px !important;
+                }
+
+                .btn-primary {
+                    border-color: transparent !important;
+
+                    &:hover {
+                        background-color: transparent !important;
+                        border: 1px solid var(--biz-theme-primary-color) !important;
+                        color: var(--biz-theme-primary-color) !important;
+                    }
+                }
+
+                .btn-info {
+                    background-color: transparent !important;
+                    color: var(--biz-theme-primary-color);
+                    border-color: var(--biz-theme-primary-color);
+                    &:hover {
+                        background-color: transparent !important;
+                        border: 1px solid #17a2b8 !important;
+                        color: #17a2b8 !important;
+                    }
+                }
+
+                .btn-secondary {
+                    &:hover {
+                        border: 1px solid var(--biz-theme-primary-color) !important;
+                        color: var(--biz-theme-primary-color) !important;
+                    }
+                }
+
+            } */
+        }
+
+        .o_search_panel {
+            background-color: var(--biz-theme-body-color) !important;
+
+            .o_search_panel_category {
+                .o_search_panel_section_icon{
+                    color: var(--biz-theme-primary-color) !important;
+                    font-size: 14px;
+                    vertical-align: unset;
+                }
+            }
+            .o_search_panel_section_header {
+                background-color: var(--biz-theme-body-color) !important;
+                color: var(--biz-theme-body-text-color) !important;
+            }
+
+            .o_search_panel_field {
+                .list-group-item {
+                    margin-bottom: 5px !important;
+
+                    background-color: transparent !important;
+
+                    .o_search_panel_label_title {
+                        color: inherit;
+                    }
+                    .list-group-item-action:not(.active) {
+                        background-color: transparent !important;
+                        color: var(--biz-theme-body-text-color) !important;
+                        // padding: 0.75rem 1rem !important;
+                        border-radius: var(--border-radius-lg) !important;
+                        transition: 0.3s;
+
+                        &:hover {
+                            background-color: rgba(0, 169, 228, 0.18) !important;
+                        }
+
+                    }
+
+                    .list-group-item-action.active {
+                        color: var(--biz-theme-primary-text-color) !important;
+                        background-color: var(--biz-theme-primary-color) !important;
+                        padding: 0.75rem 1rem !important;
+                        border-radius: var(--border-radius-lg) !important;
+
+                        .text-muted {
+                            color: var(--biz-theme-primary-text-color) !important;
+                            opacity: 1 !important;
+                        }
+                    }
+                }
+            }
+        }
+        @include media-breakpoint-down(sm){
+            flex-direction: column;
+            .o_search_panel {
+                width: 100%;
+                flex: 0 0 40px;
+                padding: 0px 15px 15px 15px;
+                border-right: 0;
+                border-bottom: 1px solid #dee2e6;
+            }
+            &::-webkit-scrollbar {
+                width: 0;
+                height: 0;
+            }
+        }
+    }
+
+    // MOBILE VIEW SEARCH IN CONTROL PANEL
+    .o_mobile_search {
+        position: fixed;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        padding: 0;
+        width: 100%;
+        background-color: var(--biz-theme-body-color);
+        z-index: 1050;
+        overflow: auto;
+        .o_mobile_search_header {
+            height: 46px;
+            margin-bottom: 10px;
+            width: 100%;
+            background-color: var(--biz-theme-primary-color);
+            color: var(--biz-theme-primary-text-color);
+            span {
+                cursor: pointer;
+            }
+        }
+        .o_searchview_input_container {
+            display: flex;
+            padding: 15px 20px 0 20px;
+            position: relative;
+            width: 100%;
+            .o_searchview_input {
+                width: 100%;
+                margin-bottom: 8px !important;
+                border-bottom: 1px solid var(--biz-theme-body-text-color) !important;
+            }
+            .o_searchview_facet {
+                border-radius: var(--border-radius-md) !important;
+                display: inline-flex;
+                order: 1;
+                border: 1px solid #cccccc7d !important;
+                background-color: transparent !important;
+                border-radius: var(--border-radius-md);
+                margin: 1px 8px 0 0 !important;
+                .o_facet_remove {
+                    color: var(--biz-theme-primary-color) !important;
+                }
+                .o_searchview_facet_label {
+                    border-radius: var(--border-radius-lg) 0em 0em var(--border-radius-lg);
+                    background-color: var(--biz-theme-primary-color) !important;
+                    color: var(--biz-theme-primary-text-color);
+                    border-top-left-radius: var(--border-radius-md);
+                    border-bottom-left-radius: var(--border-radius-md);
+                    border-top-right-radius: 0;
+                    border-bottom-right-radius: 0;
+                    padding: 0 5px !important;
+                }
+                .o_facet_values {
+                    display: flex;
+                    align-items: center;
+                    background-color: transparent !important;
+                    color: var(--biz-theme-secondary-text-color) !important;
+                    border-color: var(--biz-theme-primary-color) !important;
+                }
+            }
+            .o_searchview_autocomplete {
+                top: 100%;
+                > li {
+                    margin: 5px 0px;
+                }
+            }
+        }
+        .o_mobile_search_filter {
+            padding-bottom: 15%;
+            .btn{
+                border: 0 !important;
+                box-shadow: var(--box-shadow-common) !important;
+                -moz-box-shadow: var(--box-shadow-common) !important;
+                -webkit-box-shadow: var(--box-shadow-common) !important;
+            }
+            .o-dropdown {
+                width: -webkit-fill-available;
+                // margin: 15px 5px 0px 5px;
+                box-shadow: unset !important;
+                flex-direction: column;
+            }
+            .dropdown-toggle {
+                width: -webkit-fill-available;
+                text-align: left;
+
+                &:after {
+                    display: none;
+                }
+            }
+            .dropdown-backdrop {
+                z-index: -1;
+            }
+            .dropdown-menu {
+                position: relative !important;
+                width: 100% !important;
+                transform: translate3d(0, 0, 0) !important;
+                box-shadow: none;
+                border: none;
+                color: gray("600");
+                top: 0 !important;
+                left: 0 !important;
+                .divider {
+                    margin: 0px;
+                }
+                > li > a {
+                    padding: 10px 26px;
+                }
+            }
+        }
+        .o_mobile_search_show_result {
+            padding: 10px;
+            font-size: 15px;
+            border-radius: 0 !important;
+        }
+    }
+}

spiffy_theme_backend/static/src/scss/separator_styles.scss

@@ -0,0 +1,93 @@
+body.o_web_client{
+    &.separator_style_1{
+        .o_horizontal_separator{
+            box-shadow: none !important;
+            background-color: transparent !important;
+            color: var(--biz-theme-primary-color) !important;
+            position: relative;
+            padding: 10px 0 !important;
+            &:before {
+                content: "";
+                position: absolute;
+                left: 0;
+                bottom: 1px;
+                height: 3px;
+                z-index: 2;
+                width: 55px;
+                background-color: var(--biz-theme-primary-color);
+            }
+            &:after {
+                content: "";
+                position: absolute;
+                left: 0;
+                bottom: 1px;
+                height: 1px;
+                width: 95%;
+                background-color: #d8d8d8;
+            }
+        }
+    }
+
+    &.separator_style_2{
+        .o_horizontal_separator{
+            box-shadow: none !important;
+            background-color: transparent !important;
+            color: var(--biz-theme-primary-color) !important;
+            position: relative;
+            padding: 10px 0 !important;
+            padding-left: 10px !important;
+            &:before {
+                content: "";
+                position: absolute;
+                left: 0;
+                top: 50%;
+                height: 90%;
+                transform: translateY(-50%);
+                z-index: 2;
+                width: 3px;
+                background-color: var(--biz-theme-primary-color);
+            }
+        }
+    }
+
+    &.separator_style_3{
+        .o_horizontal_separator{
+            box-shadow: none !important;
+            border-bottom: 1px solid;
+            border-color: var(--biz-theme-primary-color);
+            width: 90%; 
+        }
+    }
+    
+    &.separator_style_4{
+        .o_horizontal_separator{
+            box-shadow: none !important;
+            background-color: transparent !important;
+            color: var(--biz-theme-primary-color) !important;
+            position: relative;
+            margin-right: 50px !important;
+            padding: 10px 0 !important;
+            &::after {
+                content: "";
+                position: absolute;
+                top: 50%;
+                width: -webkit-fill-available;
+                transform: translateY(-50%);
+                z-index: 2;
+                height: 3px;
+                background-color: var(--biz-theme-primary-color);
+                margin-left: 15px;
+            }
+        }
+    }
+
+    .config-sidebar-tab-content{
+        #general_settings{
+            .separator-styles-row{
+                img{
+                    max-height: 40px;
+                }
+            }
+        }
+    }
+}

spiffy_theme_backend/static/src/scss/setting_page.scss

@@ -0,0 +1,151 @@
+body.o_web_client {
+    .o_setting_search {
+        input {
+            border: 0 !important;
+        }
+        .searchIcon i {
+            vertical-align: bottom;
+        }
+    }
+    .o_setting_container {
+        .text-muted{
+            color: rgba(73, 80, 87, 0.76) !important;
+        }
+        .settings_tab {
+            border-right: 1px solid #dee2e6;
+            background-color: transparent !important;
+            .tab.selected {
+                color: var(--biz-theme-primary-text-color) !important;
+                background-color: var(--biz-theme-primary-color) !important;
+                box-shadow: unset !important;
+            }
+            .tab {
+                align-items: center;
+                color: var(--biz-theme-body-text-color) !important;
+                margin-right: 15px;
+                padding: 0 16px;
+                border-radius: var(--border-radius-lg) !important;
+                margin-bottom: 5px;
+                transition: 0.3s;
+                @media (max-width: 767.98px) {
+                    line-height: 40px;
+                }
+                .icon {
+                    background-size: cover !important;
+                    height: 25px;
+                    width: 25px !important;
+                    border-radius: var(--border-radius-sm);
+                }
+                &:hover:not(.selected) {
+                    background-color: var(--primary-rgba) !important;
+                }
+            }
+        }
+        .settings {
+            color: var(--biz-theme-body-text-color) !important;
+            background-color: var(--biz-theme-body-color) !important;
+
+            // .o_setting_right_pane {
+            //     border-left: 1px solid #dee2e6 !important;
+            // }
+
+            .highlighter {
+                background: rgba($color: var(--warning), $alpha: 0.5) !important;
+            }
+
+            .app_settings_block {
+                h2 {
+                    background-color: transparent !important;
+                    color: var(--biz-theme-primary-color) !important;
+                    position: relative;
+                    padding: 10px 0 !important;
+                    margin-left: 22px !important;
+                    &:before {
+                        content: "";
+                        position: absolute;
+                        left: 0;
+                        bottom: 1px;
+                        height: 3px;
+                        z-index: 2;
+                        width: 55px;
+                        background-color: #707070;
+                    }
+                    &:after {
+                        content: "";
+                        position: absolute;
+                        left: 0;
+                        bottom: 2px;
+                        height: 1px;
+                        width: 95%;
+                        background-color: #d8d8d8;
+                    }
+                }
+
+                .o_setting_right_pane a {
+                    color: var(--biz-theme-primary-color);
+                }
+
+                .o_user_emails.o_input {
+                    margin: 0 !important;
+                }
+
+                .o_web_settings_invite {
+                    border-top-left-radius: 0 !important;
+                    right: 5px;
+                    position: relative;
+                    border-bottom-left-radius: 0 !important;
+                }
+
+                .o_field_widget {
+                    // padding-left: 10px !important;
+                    @include media-breakpoint-down(md){
+                        width: 100%;
+                    }
+                }
+            }
+        }
+    }
+
+    @include media-breakpoint-down(md){
+        .o_setting_container {
+            .settings_tab {
+                flex-direction: row;
+                margin-left: 15px;
+                &::-webkit-scrollbar {
+                    height: 1px;
+                    width: 1px;
+                }
+            }
+            .settings {
+                .o_settings_container {
+                    margin: 0;
+                }
+            }
+            flex-direction: column;
+        }
+    }
+}
+
+body.o_web_client.dark_mode {
+    .o_setting_container {
+        .text-muted{
+            color: rgba(189, 190, 191, 0.76) !important;
+        }
+        .settings {
+            .app_settings_block {
+                h2, .settingSearchHeader {
+                    background-color: rgba($color: #ffffff, $alpha: 0.2);
+                }
+                h2 {
+                    &:before {
+                        background-color: #c4c4c4;
+                    }
+                    &:after {
+                        background-color: #3d3d3d;
+                    }
+                }
+            }
+
+        }
+    }
+}