+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ Name
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/multicolor_backend_theme/static/description/theme_screenshot.jpg b/multicolor_backend_theme/static/description/theme_screenshot.jpg
new file mode 100644
index 000000000..afdcd20be
Binary files /dev/null and b/multicolor_backend_theme/static/description/theme_screenshot.jpg differ
diff --git a/multicolor_backend_theme/static/src/css/backend.css b/multicolor_backend_theme/static/src/css/backend.css
new file mode 100644
index 000000000..b4ef60273
--- /dev/null
+++ b/multicolor_backend_theme/static/src/css/backend.css
@@ -0,0 +1,5 @@
+:root{
+ --theme_main_color: #AD7B90 !default;
+ --theme_font_color: black !default;
+ --view_font_color
+ }
\ No newline at end of file
diff --git a/multicolor_backend_theme/static/src/img/dashboard-header.jpg b/multicolor_backend_theme/static/src/img/dashboard-header.jpg
new file mode 100644
index 000000000..6a1044f6f
Binary files /dev/null and b/multicolor_backend_theme/static/src/img/dashboard-header.jpg differ
diff --git a/multicolor_backend_theme/static/src/js/login_page.js b/multicolor_backend_theme/static/src/js/login_page.js
new file mode 100644
index 000000000..972e823b6
--- /dev/null
+++ b/multicolor_backend_theme/static/src/js/login_page.js
@@ -0,0 +1,20 @@
+/** @odoo-module **/
+
+import publicWidget from "@web/legacy/js/public/public_widget";
+import { rpc } from "@web/core/network/rpc";
+
+publicWidget.registry.loginPage = publicWidget.Widget.extend({
+ selector: '.oe_login_buttons',
+ async start() {
+ var data = await rpc('/active_theme')
+ if (data) {
+ this.$('.cybro-login-btn').css({
+ 'background-color': data.theme_main_color,
+ 'color': data.theme_font_color
+ });
+ this.$('.cybro-super-btn').css({
+ 'color': data.view_font_color
+ });
+ }
+ }
+})
\ No newline at end of file
diff --git a/multicolor_backend_theme/static/src/js/search_apps.js b/multicolor_backend_theme/static/src/js/search_apps.js
new file mode 100644
index 000000000..5ba7f3c40
--- /dev/null
+++ b/multicolor_backend_theme/static/src/js/search_apps.js
@@ -0,0 +1,74 @@
+/** @odoo-module */
+
+import { NavBar } from "@web/webclient/navbar/navbar";
+const { fuzzyLookup } = require('@web/core/utils/search');
+import { computeAppsAndMenuItems } from "@web/webclient/menus/menu_helpers";
+const { onMounted } = owl;
+import { patch } from "@web/core/utils/patch";
+
+patch(NavBar.prototype, {
+ // For advance search bar feature, and this will enable a global search for apps and related content
+ setup() {
+ super.setup();
+ this._search_def = $.Deferred();
+ let { apps, menuItems } = computeAppsAndMenuItems(this.menuService.getMenuAsTree("root"));
+ this._apps = apps;
+ this._searchableMenus = menuItems;
+ onMounted(() => this.onMounted());
+ },
+ onMounted() {
+ this.$search_container = $(".search-container");
+ this.$search_input = $(".search-input input");
+ this.$search_results = $(".search-results");
+ this.$app_menu = $(".app-menu");
+ this.$dropdown_menu = $(".dropdown-menu");
+ },
+ // to show the search results
+ _searchMenusSchedule() {
+ this.$search_results.removeClass("o_hidden")
+ this.$app_menu.addClass("o_hidden");
+ this._search_def.reject();
+ this._search_def = $.Deferred();
+ setTimeout(this._search_def.resolve.bind(this._search_def), 50);
+ this._search_def.done(this._searchMenus.bind(this));
+ },
+ // function for searching all apps and content
+ _searchMenus() {
+ var query = this.$search_input.val() ;
+ if (query === "") {
+ this.$search_container.removeClass("has-results");
+ this.$app_menu.removeClass("o_hidden");
+ this.$search_results.empty();
+ return;
+ }
+ // search for all apps
+ var results = [];
+ fuzzyLookup(query, this._apps, (menu) => menu.label)
+ .forEach((menu) => {
+ results.push({
+ category: "apps",
+ name: menu.label,
+ actionID: menu.actionID,
+ id: menu.id,
+ webIconData: menu.webIconData,
+ });
+ });
+ // search for all content
+ fuzzyLookup(query, this._searchableMenus, (menu) =>
+ (menu.parents + " / " + menu.label).split("/").reverse().join("/")
+ ).forEach((menu) => {
+ results.push({
+ category: "menu_items",
+ name: menu.parents + " / " + menu.label,
+ actionID: menu.actionID,
+ id: menu.id,
+ });
+ });
+ this.$search_container.toggleClass("has-results", Boolean(results.length));
+ var resultsHtml = ""
+ results.forEach(function(result) {
+ resultsHtml += ""
+ })
+ this.$search_results.empty().append(resultsHtml)
+ },
+});
\ No newline at end of file
diff --git a/multicolor_backend_theme/static/src/js/sidebar_menu.js b/multicolor_backend_theme/static/src/js/sidebar_menu.js
new file mode 100644
index 000000000..6dd66b31c
--- /dev/null
+++ b/multicolor_backend_theme/static/src/js/sidebar_menu.js
@@ -0,0 +1,43 @@
+/** @odoo-module **/
+
+import { NavBar } from "@web/webclient/navbar/navbar";
+import { patch } from "@web/core/utils/patch";
+
+patch(NavBar.prototype, {
+ onclickOpenSidebar(){
+ $("#openSidebar").hide();
+ $("#closeSidebar").show();
+ $("#sidebar_panel").css({'display':'block'});
+ //add class in navbar
+ var navbar = $(".o_main_navbar");
+ var navbar_id = navbar.data("id");
+ $("nav").addClass(navbar_id);
+ navbar.addClass("small_nav");
+ //add class in action-manager
+ var action_manager = $(".o_action_manager");
+ var action_manager_id = action_manager.data("id");
+ $("div").addClass(action_manager_id);
+ action_manager.addClass("sidebar_margin");
+ //add class in top_heading
+ var top_head = $(".top_heading");
+ var top_head_id = top_head.data("id");
+ $("div").addClass(top_head_id);
+ top_head.addClass("sidebar_margin");
+ },
+ onclickCloseSidebar(){
+ $("#closeSidebar").hide();
+ $("#openSidebar").show();
+ $("#sidebar_panel").css({'display':'none'});
+ $(".o_action_manager").css({'margin-left': '0px'});
+ //remove class in navbar
+ var navbar = $(".o_main_navbar");
+ var navbar_id = navbar.data("id");
+ $("nav").removeClass(navbar_id);
+ navbar.removeClass("small_nav");
+ //remove class in action-manager
+ var action_manager = $(".o_action_manager");
+ var action_manager_id = action_manager.data("id");
+ $("div").removeClass(action_manager_id);
+ action_manager.removeClass("sidebar_margin");
+ },
+});
\ No newline at end of file
diff --git a/multicolor_backend_theme/static/src/js/systray_item.js b/multicolor_backend_theme/static/src/js/systray_item.js
new file mode 100644
index 000000000..f2ef8090d
--- /dev/null
+++ b/multicolor_backend_theme/static/src/js/systray_item.js
@@ -0,0 +1,177 @@
+/** @odoo-module **/
+
+import { NavBar } from "@web/webclient/navbar/navbar";
+import { patch } from "@web/core/utils/patch";
+import { useService } from "@web/core/utils/hooks";
+import { useState, onWillStart} from "@odoo/owl";
+import { user } from "@web/core/user";
+
+patch(NavBar.prototype, {
+ setup(...args) {
+ super.setup(...args);
+ this.state = useState({
+ theme_data: {},
+ selected_theme: {}
+ });
+ this.editMode = false;
+ this.orm = useService("orm");
+ this.notification = useService('notification');
+ this.current_theme = {};
+ this.themes_by_id = {};
+// this.user = useService("user");
+ onWillStart(async () => {
+ var self = this;
+ this.user = await user.hasGroup("multicolor_backend_theme.multicolor_theme_manager_access");
+ const theme_data = await this.orm.searchRead('theme.config', [], ['name', 'is_theme_active', 'theme_font_color', 'theme_main_color', 'view_font_color']);
+ return $.when(theme_data).then((theme_data) => {
+ self.state.theme_data = theme_data;
+ theme_data.forEach(theme => {
+ if (theme.is_theme_active) {
+ self.selected_theme = theme;
+ }
+ self.themes_by_id[theme.id] = theme;
+ })
+ if (!self.selected_theme) {
+ self.selected_theme = theme_data[0];
+ self.selected_theme.is_theme_active = true;
+ }
+ self.state.selected_theme = self.selected_theme;
+ self.onClickApply();
+ });
+ });
+ },
+ // Handle the onChange event for selecting a theme.
+ onChangeTheme() {
+ let themeId = parseInt($('.theme_select').val());
+ this.state.selected_theme = this.themes_by_id[themeId];
+ const colorProperties = ['theme_main_color', 'theme_font_color', 'view_font_color'];
+ colorProperties.forEach(property => {
+ document.getElementById(property).style.backgroundColor = this.state.selected_theme[property];
+ });
+ this.onChangeActive();
+ },
+ // Handle the event for selecting base color.
+ onClickBaseColor(){
+ var self = this;
+ const selectedTheme = this.themes_by_id[parseInt($('.theme_select').val())]
+ const colorProperties = ['theme_main_color', 'theme_font_color', 'view_font_color'];
+ colorProperties.forEach(property => {
+ $('#' + property).loads({
+ layout: 'hex',
+ flat: false,
+ enableAlpha: false,
+ color: self.selected_theme.property,
+ onSubmit: function(ev) {
+ let elId = $(ev.el).attr('id');
+ $('#' + elId).css('background-color', '#' + ev.hex);
+ $('#' + elId).val("#" + ev.hex);
+ $('#' + elId).hides();
+ self._onchangeColor($(ev.el), ev.hex);
+ },
+ onLoaded: function(ev) {
+ $('.picker').css('color', 'green');
+ },
+ onChange: function(ev) {
+ let elId = $(ev.el).attr('id');
+ $('#' + elId).setColor(ev.hex, false);
+ }
+ });
+ })
+ },
+ // Function to update color on backend.
+ _onchangeColor(element, data) {
+ let current_theme = this.themes_by_id[$('.theme_select').val()];
+ let colorCode = '#' + data;
+ if (colorCode != current_theme[element.attr('id')]) {
+ current_theme[element.attr('id')] = colorCode;
+ this.themes_by_id[current_theme.id][element.attr('id')] = '#' + data;
+ let field = element.attr('id');
+ this.orm.write('theme.config', [current_theme.id], {
+ [field]: colorCode,
+ });
+ };
+ },
+ // Handle the onClick event for applying the selected theme.
+ async onClickApply(){
+ if (this.state.selected_theme) {
+ this.appliedTheme = this.state.selected_theme;
+ document.documentElement.style.setProperty("--theme_main_color", this.state.selected_theme.theme_main_color);
+ document.documentElement.style.setProperty("--theme_font_color", this.state.selected_theme.theme_font_color);
+ document.documentElement.style.setProperty("--view_font_color", this.state.selected_theme.view_font_color);
+ $('.cybro-main-menu .input-group-text').css({
+ 'background-color': this.state.selected_theme.theme_main_color,
+ 'border-color': this.state.selected_theme.theme_main_color,
+ 'color': this.state.selected_theme.theme_font_color,
+ });
+ $('.o_loading').css({
+ 'background-color': this.state.selected_theme.theme_main_color,
+ 'color': this.state.selected_theme.theme_font_color,
+ });
+ $('.btn-primary').css({
+ 'background-color': this.state.selected_theme.theme_main_color,
+ 'color': this.state.selected_theme.theme_font_color,
+ });
+ $('.o-mail-ChatWindow-header').attr('style', `background-color: ${this.state.selected_theme.theme_main_color} !important; color: ${this.state.selected_theme.theme_font_color};`);
+
+ }
+ let curr_theme_id = parseInt($('.theme_select').val());
+ if (curr_theme_id){
+ let result = await this.orm.call('theme.config','update_active_theme',[curr_theme_id]);
+ this.themes_by_id[result['prev']].is_theme_active = false;
+ this.themes_by_id[curr_theme_id].is_theme_active = true;
+ this.onChangeActive();
+ this.notification.add("Theme has been successfully updated",
+ { type: 'success' }, 3000
+ );
+ };
+ },
+ // Handle the onClick event for creating new theme.
+ async onClickCreate(){
+ let result = await this.orm.call('theme.config', 'create_new_theme',[]);
+ this.state.selected_theme = result[0];
+ this.state.theme_data.push(result[0]);
+ this.themes_by_id[result[0].id] = result[0];
+ this.onChangeActive();
+ },
+ // Handle the onClick event for deleting theme.
+ async onClickRemove(){
+ let themeId = parseInt($('.theme_select').val());
+ let currentTheme = this.themes_by_id[themeId];
+ if (currentTheme.is_theme_active) {
+ this.notification.add("You cannot delete an active theme.",
+ { type: 'danger' }, 3000
+ );
+ } else {
+ this.orm.unlink('theme.config', [themeId]);
+ this.state.theme_data = this.state.theme_data.filter(data => data.id !== themeId);
+ this.state.selected_theme = this.appliedTheme;
+ };
+ this.onChangeActive();
+ },
+ // Function to edit name of theme.
+ async onEditName() {
+ this.editMode = !this.editMode;
+ let themeInput = document.getElementById('themeName');
+ let editIcon = document.getElementById('editIcon');
+ if (this.editMode) {
+ themeInput.removeAttribute('readonly');
+ themeInput.style.backgroundColor = '#e4eaec';
+ editIcon.classList.remove('fa-pencil');
+ editIcon.classList.add('fa-check');
+ } else {
+ themeInput.setAttribute('readonly', 'readonly');
+ themeInput.style.backgroundColor = 'white';
+ editIcon.classList.remove('fa-check');
+ editIcon.classList.add('fa-pencil');
+ this.orm.write('theme.config', [this.state.selected_theme.id] , {
+ name: themeInput.value
+ });
+ this.state.selected_theme.name = themeInput.value;
+ this.themes_by_id[this.state.selected_theme.id].name = themeInput.value;
+ };
+ },
+ // Function to set active selected theme.
+ onChangeActive() {
+ document.getElementById('active_theme').style.display = this.state.selected_theme.is_theme_active ? 'block' : 'none';
+ },
+});
\ No newline at end of file
diff --git a/multicolor_backend_theme/static/src/scss/theme_style.scss b/multicolor_backend_theme/static/src/scss/theme_style.scss
new file mode 100644
index 000000000..c07e448d4
--- /dev/null
+++ b/multicolor_backend_theme/static/src/scss/theme_style.scss
@@ -0,0 +1,202 @@
+@import url('https://fonts.googleapis.com/css?family=Poppins');
+body {
+ font-size: 14px;
+ font-family: lato, sans-serif
+}
+
+h1, h2, h3, h4, h5, h6 {
+ margin: 0;
+ font-family: poppins, sans-serif
+}
+
+p {
+ font-family: lato, sans-serif;
+ font-size: 15px;
+ line-height: 26px;
+ color: #444;
+ margin-bottom: 0
+}
+
+p img {
+ margin: 0
+}
+
+a, a:visited {
+ text-decoration: none;
+ transition: all .3s ease-in-out;
+ -webkit-transition: all .3s ease-in-out;
+ -moz-transition: all .3s ease-in-out;
+ -o-transition: all .3s ease-in-out;
+ outline: 0;
+ font-family: poppins, sans-serif
+}
+
+a:hover {
+ text-decoration: none
+}
+
+a:focus {
+ text-decoration: none;
+ outline: 0
+}
+
+p a, p a:visited {
+ line-height: inherit;
+ outline: 0
+}
+
+ul, ol {
+ margin-bottom: 0;
+ margin-top: 0;
+ padding: 0
+}
+
+ul {
+ margin: 0;
+ list-style-type: none
+}
+
+ol {
+ list-style: decimal
+}
+
+ol, ul.square, ul.circle, ul.disc {
+ margin-left: 0
+}
+
+ul.square {
+ list-style: square outside
+}
+
+ul.circle {
+ list-style: circle outside
+}
+
+ul.disc {
+ list-style: disc outside
+}
+
+ul ul, ul ol, ol ol, ol ul {
+ margin: 0
+}
+
+ul ul li, ul ol li, ol ol li, ol ul li {
+ margin-bottom: 0
+}
+
+button {
+ cursor: pointer;
+ outline: none !important;
+ letter-spacing: 0
+}
+
+blockquote {
+ padding: 60px;
+ position: relative;
+ background: #853bfa
+}
+
+blockquote:before {
+ content: '\f10d';
+ font-family: fontawesome;
+ color: #fff;
+ font-size: 32px;
+ position: absolute;
+ left: 16px;
+ top: 46px
+}
+
+blockquote p {
+ font-size: 17px;
+ color: #fff
+}
+
+.blockquote-footer {
+ color: #fff
+}
+/*==============login================*/
+.oe_website_login_container {
+ padding: 1rem 5rem 5rem;
+ background: #f1f4f5;
+}
+.oe_login_form, .oe_signup_form, .oe_reset_password_form {
+ color: #fff !important;
+}
+.oe_login_form, .oe_signup_form, .oe_reset_password_form {
+ max-width: 360px;
+ position: relative;
+ margin: 50px auto;
+ border-radius: 7px;
+ padding: 3rem;
+ background: #ffffff;
+ box-shadow: 0 0 11px 0px #4477d4;
+}
+
+.oe_login_form input {
+ height: 40px !important;
+ border-radius: 0 !important;
+ background: #fff !important;
+ border: 1px solid #ffffff;
+}
+
+.oe_login_form i.fa.fa-database {
+ margin-left: 6px;
+}
+
+.oe_login_form a.btn.btn-secondary {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ border-radius: 0 !important;
+}
+.cybro-login-btn {
+ height: 47px;
+ border-radius: 0;
+ //background: #3e8df7 !important;
+ border: none;
+ //color: #ffffff !important;
+ font-size: 16px;
+}
+.cybro-super-btn {
+ //color: #fff;
+ font-size: 14px;
+ text-decoration: none;
+}
+.cybro-super-btn:hover {
+ color: black !important;
+ text-decoration: none;
+}
+.cybro-bg footer{
+ background: #303641 !important;
+ color: #fff;
+ padding-top: 2rem;
+}
+.cybro-bg .navbar {
+ background: #303641 !important;
+ color: #fff;
+}
+.cybro-bg footer a,.cybro-bg footer p,.cybro-bg header a,.cybro-bg header p {
+ color: #fff;
+}
+.cybro-bg .navbar-light .navbar-nav .nav-link {
+ color: #ffffff !important;
+}
+.homepage .dropdown-menu.js_usermenu.dropdown-menu-right.show {
+ background: #303641;
+}
+.oe_website_login_container .btn-secondary {
+ color: #FFFFFF;
+ background-color: #afafaf;
+ border-color: #afafae;
+}
+input {
+ border: 1px solid #e4eaec !important;
+}
+.oe_login_form, .oe_signup_form, .oe_reset_password_form {
+ color: #37474f !important;
+ font-weight: 300 !important;
+}
+form label {
+ font-weight: 300 !important;
+}
+/*==============//login================*/
diff --git a/multicolor_backend_theme/static/src/scss/theme_style_backend.scss b/multicolor_backend_theme/static/src/scss/theme_style_backend.scss
new file mode 100644
index 000000000..8bfb984fa
--- /dev/null
+++ b/multicolor_backend_theme/static/src/scss/theme_style_backend.scss
@@ -0,0 +1,1794 @@
+@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500');
+
+body {
+ font-size: 14px;
+ font-family: lato, sans-serif;
+}
+
+h1, h2, h3, h4, h5, h6 {
+ margin: 0;
+ font-family: 'Roboto', sans-serif;
+}
+
+p {
+ font-family: lato, sans-serif;
+ font-size: 15px;
+ line-height: 26px;
+ color: #555;
+ margin-bottom: 0
+}
+
+p img {
+ margin: 0
+}
+
+a, a:visited {
+ text-decoration: none;
+ transition: all .3s ease-in-out;
+ -webkit-transition: all .3s ease-in-out;
+ -moz-transition: all .3s ease-in-out;
+ -o-transition: all .3s ease-in-out;
+ outline: 0;
+ font-family: 'Roboto', sans-serif;
+}
+
+a:hover {
+ text-decoration: none
+}
+
+a:focus {
+ text-decoration: none;
+ outline: 0
+}
+
+p a, p a:visited {
+ line-height: inherit;
+ outline: 0
+}
+
+ul, ol {
+ margin-bottom: 0;
+ margin-top: 0;
+ padding: 0
+}
+
+ul {
+ margin: 0;
+ list-style-type: none
+}
+
+ol {
+ list-style: decimal
+}
+
+ol, ul.square, ul.circle, ul.disc {
+ margin-left: 0
+}
+
+ul.square {
+ list-style: square outside
+}
+
+ul.circle {
+ list-style: circle outside
+}
+
+ul.disc {
+ list-style: disc outside
+}
+
+ul ul, ul ol, ol ol, ol ul {
+ margin: 0
+}
+
+ul ul li, ul ol li, ol ol li, ol ul li {
+ margin-bottom: 0
+}
+
+input {
+// font-size: 14px !important;
+ border: 1px solid rgba(170, 170, 170, .3) !important;
+ padding: 10.72px 12.8px;
+ padding: .67rem .8rem;
+ display: block;
+ width: 100%;
+ height: inherit !important;
+ padding: 2.375rem .75rem;
+ font-size: inherit !important;
+ line-height: inherit !important;
+ color: #495057;
+ background-color: #fff;
+ background-clip: padding-box;
+ border: 0px solid #ced4da !important;
+ border-radius: 0 !important;
+ transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+}
+
+button {
+ cursor: pointer;
+ outline: none !important;
+ letter-spacing: 0
+}
+
+blockquote {
+ padding: 60px;
+ position: relative;
+ background: #853bfa
+}
+
+blockquote:before {
+ content: '\f10d';
+ font-family: fontawesome;
+ color: #fff;
+ font-size: 32px;
+ position: absolute;
+ left: 16px;
+ top: 46px
+}
+
+blockquote p {
+ font-size: 17px;
+ color: #fff
+}
+
+.blockquote-footer {
+ color: #fff
+}
+
+/*Menu Bar*/
+.o_main_navbar .cybro-main-menu {
+ max-height: 100vh;
+ min-width: 100%;
+ overflow: auto;
+ margin-top: 0;
+ z-index: 99;
+ height: 100vh;
+ width: 280px;
+ overflow-y: scroll;
+ background: #30363F;
+ box-shadow: 2px 0 32px rgba(0, 0, 0, .05);
+ -webkit-transition: all .3s ease 0s;
+ transition: all .3s ease 0s;
+ transform: none !important;
+ border: none;
+}
+
+i.fa.fa-th-large {
+ font-size: 26px !important;
+ color: #3e8df7 !important;
+ margin-top: 10px;
+}
+
+.cybro-main-menu a.dropdown-item.o_app {
+ position: relative;
+ display: block;
+ color: #8d97ad !important;
+ font-size: 15px;
+ text-transform: capitalize;
+ padding: 15px !important;
+ letter-spacing: 0;
+ font-weight: 400;
+ padding-left: 32px !important;
+}
+
+.cybro-main-menu a:hover {
+ color: #fff !important;
+ background: #f3f7fe !important;
+}
+
+.dropdown-item.active, .dropdown-item:active {
+ color: #fff !important;
+ background: rgba(11, 105, 227, 0.05) !important;
+}
+
+img.cybro-menuicon {
+ width: 28px;
+ margin-right: 10px;
+}
+
+/*//Menu Bar*/
+/*Top bar*/
+.o_main_navbar {
+ position: relative;
+ height: 60px;
+ padding-top: 6px;
+ border-bottom: 1px solid #d8e3e7;
+ color: #fff !important;
+}
+
+.o_main_navbar > ul > li > a, .o_main_navbar > ul > li > label {
+ height: 46px;
+ padding: 0 10px;
+ line-height: 46px;
+ transition: .3s all ease;
+}
+
+.o_main_navbar > ul > li > a:hover, .o_main_navbar > ul > li > label:hover {
+ background: none !important;
+ border: none;
+ color: #000 !important;
+}
+
+.o_main_navbar > a:hover, .o_main_navbar > a:focus, .o_main_navbar > button:hover, .o_main_navbar > button:focus {
+ background: none;
+ color: inherit;
+ color: #000 !important;
+}
+
+li.o_user_menu a.dropdown-toggle {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ padding: 0px 38px;
+ color: #fff !important;
+ height: 60px;
+ font-size: 14px;
+ font-family: 'Roboto', sans-serif;
+ margin-top: -5px !important;
+}
+
+.o_user_menu a.dropdown-toggle:hover {
+ border: none;
+ color: #020202 !important;
+}
+
+.o_main_navbar .o_user_menu .oe_topbar_avatar {
+ height: 35px;
+ transform: translateY(-2px);
+ margin-right: 9px;
+}
+
+.cybro-main-menu a:hover {
+ color: #fff !important;
+ background: #f3f7fe !important;
+}
+
+.btn {
+ display: inline-block;
+ font-weight: 300;
+ text-align: center;
+ white-space: nowrap;
+ vertical-align: middle;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ padding: .429rem 1rem;
+ font-size: 1rem;
+ line-height: 1.571429;
+ border-radius: .215rem;
+ border-top-left-radius: 0.215rem;
+ border-bottom-left-radius: 0.215rem;
+ -webkit-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
+ -o-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+ transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+}
+
+.o_form_view .o_form_statusbar > .o_statusbar_status > .o_arrow_button:not(:first-child):before, .o_form_view .o_form_statusbar > .o_statusbar_status > .o_arrow_button:not(:first-child):after {
+ content: " ";
+ display: block;
+ position: absolute;
+ top: 0;
+ left: auto;
+ bottom: auto;
+ right: -10px;
+ border-top: 19px solid transparent;
+ border-bottom: 23px solid transparent;
+ border-right: none;
+ border-left: 11px solid white;
+ transition: border 0.2s ease 0s;
+ -moz-transform: scale(0.9999);
+}
+
+.o_form_view .o_form_statusbar > .o_statusbar_status > .o_arrow_button.btn-primary.disabled {
+ font-size: 11px;
+ background-color: #e9ecef;
+ cursor: default;
+}
+.o_form_view .o_form_statusbar > .o_statusbar_status > .o_arrow_button.disabled {
+ color: black;
+}
+
+.o_control_panel {
+ border-bottom: 1px solid #d8e3e7;
+}
+
+.o_form_view .o_form_statusbar {
+ border-bottom: 1px solid #d8e3e7;
+}
+
+.o_mail_systray_item .o_notification_counter {
+ background: #dc3545;
+ box-shadow: 0px 0px 2px -1px #000000;
+
+}
+
+.o_searchview .o_searchview_input {
+ border: none !important;
+ padding: 0px 0 0 0;
+}
+
+.o_searchview {
+
+ width: 96%;
+ display: block;
+ font-size: 1rem;
+ line-height: 1.571429;
+ color: #76838f;
+ background-color: #fff;
+ background-image: none;
+ -webkit-background-clip: padding-box;
+ background-clip: padding-box;
+ border: 1px solid #e4eaec;
+ border-top-color: rgb(228, 234, 236);
+ border-right-color: rgb(228, 234, 236);
+ border-bottom-color: rgb(228, 234, 236);
+ border-left-color: rgb(228, 234, 236);
+ border-radius: .215rem;
+ border-top-right-radius: 0.215rem;
+ border-bottom-right-radius: 0.215rem;
+ -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
+ box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
+ -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
+ -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+ transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+
+}
+
+.o_searchview_more {
+ position: absolute;
+ top: 0px !important;
+ left: auto;
+ bottom: auto;
+ right: 0px !important;
+ padding: 13px;
+}
+
+.ui-autocomplete .ui-menu-item > a, .show .dropdown-menu .dropdown-item, .show .dropdown-menu .dropdown-header, .navbar-nav .show .dropdown-menu .dropdown-item, .navbar-nav .show .dropdown-menu .dropdown-header {
+ padding: 3px 20px;
+ transition: 0s !important;
+ color: #000 !important;
+}
+
+.ui-autocomplete .ui-menu-item > a:hover {
+ display: block;
+ background-color: #1d517f !important;
+ color: #fff !important;
+}
+.ui-autocomplete .ui-menu-item.o_m2o_dropdown_option:hover {
+ background: #1d507f;
+}
+.ui-state-focus{
+ background-color: #1d517f !important;
+ color: #fff !important;
+}
+.o_searchview_facet {
+ border-radius: 30px;
+ border: none !important;
+ margin: 6px 3px 6px 0 !important;
+}
+
+.o_facet_values {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border-radius: 30px !important;
+ background: #fff;
+ border-top-left-radius: 0px !important;
+ border-bottom-left-radius: 0px !important;
+}
+
+span.o_searchview_facet_label {
+ border-radius: 30px;
+ border-top-right-radius: 0px;
+ border-bottom-right-radius: 0px;
+ padding: 3px 12px !important;
+}
+
+.o_facet_values span {
+ padding: 0 2px 0 0px;
+ font-size: 12px;
+}
+
+/*controll panel*/
+
+.o_control_panel {
+ display: flex;
+ flex-flow: row wrap;
+ border-bottom: 1px solid darken($o-control-panel-background-color, 20%);
+ @include o-webclient-padding($top: 10px, $bottom: 10px);
+ background-color: $o-control-panel-background-color;
+
+ > .breadcrumb {
+ width: 50%;
+ }
+
+ &.o_breadcrumb_full > .breadcrumb {
+ width: 100%;
+ }
+
+ > .o_cp_searchview {
+ width: 40%;
+// min-height: $o-cp-breadcrumb-height;
+ }
+ > .o_cp_left {
+ display: flex;
+ justify-content: space-between;
+ width: 50%;
+ margin-top: 5px;
+ }
+ > .o_cp_right {
+ display: flex;
+ width: 60%;
+ margin-top: 5px;
+ }
+}
+
+.o_control_panel hr {
+ flex-basis: 100%;
+ background: #f0f4f5;
+}
+
+.o_control_panel span.o_pager_counter {
+ font-size: 12px;
+}
+
+.o_control_panel nav.o_cp_pager span.btn-group {
+ font-size: 12px !important;
+}
+
+.o_control_panel button.fa.fa-chevron-left.btn.btn-secondary.o_pager_previous {
+ font-size: 12px;
+ padding-right: 4px;
+ padding-left: 5px;
+ padding-bottom: .8rem !important;
+ padding-top: .8rem !important;
+}
+
+.o_control_panel button.fa.fa-chevron-right.btn.btn-secondary.o_pager_next {
+ font-size: 12px;
+ padding-left: 5px;
+ padding-right: 5px;
+ padding-bottom: .8rem !important;
+ padding-top: .8rem !important;
+}
+
+.o_control_panel button.btn.btn-secondary.fa {
+ padding: 11px;
+ padding-bottom: .8rem !important;
+ padding-top: .8rem !important;
+
+}
+
+.o_control_panel button.o_dropdown_toggler_btn.btn.btn-secondary.dropdown-toggle {
+ margin-right: 8px;
+ padding: 1rem 1rem;
+ font-size: 12px;
+ border: 1px solid #e4eaec;
+ animation: show-navbar-dropdown .5s ease forwards;
+}
+
+.o_control_panel .o_cp_left {
+ justify-content: flex-end;
+}
+
+/*//Controll panel*/
+.o_calendar_container .o_calendar_sidebar_container .ui-datepicker table .ui-state-active {
+ background: none;
+ background-color: grey;
+ color: black;
+}
+
+.o_calendar_container .o_calendar_sidebar_container .ui-datepicker table .ui-state-default:hover {
+ background: none;
+ background-color: darkgrey;
+ border-color: #7C7BAD;
+ color: white;
+}
+
+/*form header*/
+.o_control_panel.o_breadcrumb_full .o_cp_right {
+ order: 2;
+ width: auto;
+}
+
+.o_control_panel.o_breadcrumb_full hr {
+ flex-basis: 0;
+}
+
+.o_control_panel.o_breadcrumb_full ol.breadcrumb {
+ order: 1;
+}
+
+.o_control_panel.o_breadcrumb_full .o_cp_left {
+ order: 3;
+ width: 58%;
+ justify-content: space-between;
+}
+
+.o_control_panel.o_breadcrumb_full {
+ justify-content: space-between;
+}
+
+.o_control_panel.o_breadcrumb_full .o_cp_buttons {
+ order: 2;
+}
+
+.o_control_panel.o_breadcrumb_full aside.o_cp_sidebar {
+ order: 1;
+}
+
+/*//Form Header*/
+.btn-group.o_date_range_buttons.d-none.d-md-inline-flex.float-right {
+ float: left !important;
+ margin-bottom: 5px;
+}
+
+.btn-group.d-none.d-md-inline-block.float-right {
+ float: left !important;
+}
+
+a.btn.btn-primary {
+ color: #fff !important;
+ background-color:var(--theme_main_color) !important;
+
+}
+.o_Activity_detailsButton.btn.py-0.btn-link.btn-primary {
+ color: var(--theme_main_color) !important;
+ background-color: transparent !important;
+}
+.oe_kanban_card.oe_kanban_global_click.o_kanban_record {
+ box-shadow: 1px 3px 12px 1px #d2c9eab5;
+ margin-right: 8px;
+ padding: .8rem 1rem;
+ font-size: 12px;
+ border: none !important;
+}
+
+.o_view_controller {
+ background: #fff;
+}
+
+.o_field_widget.badge.badge-primary {
+ padding: 5px 8px;
+ border-radius: 0px !important;
+}
+
+.clearfix.o_form_sheet {
+ box-shadow: 1px 3px 12px 1px #d2c9eab5;
+ border: none !important;
+}
+
+.modal.o_technical_modal .modal-content .modal-footer button.btn-primary {
+ background-color: grey;
+ color: black;
+}
+
+.o_form_sheet_bg {
+ background: #ffffff !important;
+}
+
+ul.nav.nav-tabs li.nav-item a {
+ padding: 1rem 1rem;
+}
+
+.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
+ background-color: #ffffff;
+}
+
+.o_form_view .o_horizontal_separator {
+ color: #000000 !important;
+ font-weight: 500 !important;
+}
+
+::-webkit-scrollbar-track {
+ -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+ border-radius: 10px;
+ background-color: #F5F5F5;
+ position: relative;
+ width: 5px;
+}
+
+::-webkit-scrollbar {
+ width: 5px;
+ background-color: #F5F5F5;
+ position: absolute;
+}
+
+::-webkit-scrollbar-thumb {
+ border-radius: 0px;
+ -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
+ background-color: #c8c8c8;
+}
+
+.o_mail_discuss_content .o_mail_thread {
+ background: #f1f1f1;
+}
+
+.o_mail_discuss .o_mail_discuss_content {
+ background-color: white;
+}
+
+.o_mail_discuss .o_mail_discuss_sidebar {
+ background-color: #ffffff;
+ color: #000000;
+ box-shadow: 13px 9px 21px 20px #f1f1f1;
+ box-shadow: 12px 0px 4px 6px black;
+}
+
+.o_mail_discuss .o_mail_discuss_sidebar .o_mail_discuss_item.o_active {
+ background-color: #ffffff;
+ //box-shadow: 1px 3px 12px 1px #e5e0f3d4;
+}
+
+.o_mail_discuss .o_mail_discuss_sidebar .o_mail_discuss_item.o_mail_discuss_title_main {
+ padding: 1rem 16px !important;
+ margin-bottom: 2px;
+}
+
+.o_mail_discuss .o_mail_discuss_sidebar .o_mail_discuss_item:hover {
+ background-color: #fff;
+ //color: #3e8df7;
+}
+
+.o_mail_discuss .o_mail_discuss_sidebar .o_mail_sidebar_title h4.o_mail_open_channels:hover {
+ color: black;
+}
+.o_mail_discuss .o_mail_discuss_sidebar .o_mail_sidebar_title h4:hover {
+ color: black !important;
+}
+
+span.fa.fa-cog.o_mail_channel_settings {
+ opacity: .5 !important;
+}
+
+.o_mail_discuss .o_mail_discuss_sidebar .o_mail_sidebar_title .o_add:hover, .o_mail_discuss .o_mail_discuss_sidebar .o_mail_sidebar_title .o_add:focus, .o_mail_discuss .o_mail_discuss_sidebar .o_mail_sidebar_title .o_add.focus {
+ color: black;
+}
+
+select {
+ border-radius: 0 !important;
+ height: inherit !important;
+}
+
+.o_field_monetary.o_field_number.o_input.o_field_widget.o_required_modifier {
+ border-radius: 0;
+ height: 43px;
+}
+
+.datepicker .table-sm > tbody > tr > td.active, .datepicker .table-sm > tbody > tr > td .active {
+ background-color: #3e8df7;
+ border-radius: 0 !important;
+}
+
+.datepicker .table-sm > thead > tr > th {
+ border-radius: 0;
+}
+
+.datepicker .table-sm > thead {
+ color: white;
+ background-color: #3e8df7;
+}
+
+.datepicker .table th, .datepicker .table td {
+ vertical-align: top;
+ border-top: 1px solid #ffffff;
+}
+
+.dropdown-menu.cybro-main-menu.show {
+ padding: 0 !important;
+ width: 240px !important;
+ top: 52px !important;
+ border-radius: 0px !important;
+}
+
+a.dropdown-item.o_app.cybro-mainmenu {
+ width: 100% !important;
+ text-align: left !important;
+ display: flex;
+ justify-content: flex-start !important;
+ align-items: center !important;
+ flex-direction: row !important;
+ padding: 1rem 1rem 1rem 2rem !important;
+}
+
+.o_menu_apps .dropdown-menu.show .o-app-icon {
+ max-width: 2rem !important;
+ margin-right: 11px;
+ border-radius: 100%;
+}
+
+.cybro-main-menu .input-group {
+ order: 2;
+}
+
+.cybro-main-menu input.form-control {
+ outline: none !important;
+ display: block;
+ padding: .429rem 1rem;
+ font-size: 1rem;
+ line-height: 1.571429;
+ color: #76838f;
+ font-size: 12px !important;
+ background-color: #fff;
+ background-image: none;
+ -webkit-background-clip: padding-box;
+ background-clip: padding-box;
+ border: 1px solid #e4eaec;
+ border-top-color: rgb(228, 234, 236);
+ border-right-color: rgb(228, 234, 236);
+ border-bottom-color: rgb(228, 234, 236);
+ border-left-color: rgb(228, 234, 236);
+ border-radius: .215rem;
+ border-top-right-radius: 0.215rem;
+ border-bottom-right-radius: 0.215rem;
+ -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
+ box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
+ -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
+ -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+ transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+}
+
+.cybro-main-menu .input-group-prepend {
+ order: 2;
+}
+
+.cybro-main-menu .input-group-text {
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ border-radius: 3px !important;
+ border-top-left-radius: 0 !important;
+ border-bottom-left-radius: 0 !important;
+}
+
+.search-input.col-md-10.ml-auto.mr-auto.mb-2 {
+ margin: 0 !important;
+ width: 100%;
+}
+
+.cybro-main-menu a.o-menu-search-result.dropdown-item.col-12.ml-auto.mr-auto {
+ padding-left: 10px !important;
+ font-size: 12px;
+ text-align: left !important;
+ width: 100%;
+ padding-right: 0px !important;
+ flex-wrap: wrap;
+ word-break: normal;
+ color: #8d97ad !important;
+}
+
+.cybro-main-menu .search-results .ml-auto .mr-auto {
+ background: #fff;
+ margin: 0px 0 !important;
+ color: #8d97ad !important;
+ flex: 100% !important;
+ max-width: 100%;
+}
+
+.o_menu_apps .dropdown-menu.show .form-row {
+ width: 100%;
+ margin: 25px 0px 0px 0px !important;
+}
+
+.o_kanban_record {
+ border: none !important;
+ box-shadow: 2px 4px 8px 2px rgba(67, 54, 251, .1) !important;
+}
+
+.o_mail_discuss .o_mail_discuss_sidebar .o_mail_discuss_item.o_unread_message {
+ color: #6c757d !important;
+}
+
+.o_mail_discuss .o_mail_discuss_sidebar .o_mail_discuss_item > .badge {
+ color: white;
+ background-color: #3e8df7 !important;
+}
+
+/*.o_onboarding.o_onboarding_blue .o_onboarding_wrap {
+ background: #3e8df7 !important;
+ color: #fff;
+}*/
+
+/*.o_onboarding_step_title .mt16 a {
+ color: #fff !important;
+}*/
+
+/*h4.o_onboarding_step_title.mt16 a {
+ color: #fff !important;
+}*/
+
+/*.o_onboarding_step_content_info p {
+ color: #ececec !important;
+}*/
+
+.btn-info {
+ color: #fff !important;
+ background-color: #717171;
+ border-color: #717171;
+}
+
+.o_main_navbar > .o_menu_brand {
+ display: block;
+ float: left;
+ margin-right: 35px;
+ user-select: none;
+ font-size: 15px;
+ font-weight: 400;
+ line-height: 46px;
+ cursor: pointer;
+ background-color:var(--theme_main_color) !important;
+ color:var(--o_menu_brand) !important;
+}
+
+.o_mail_systray_item.o_no_notification > a {
+ opacity: 1;
+}
+.o_main_navbar .o_menu_sections .dropdown-toggle{
+ background: transparent;
+ color:var(--o_menu_brand) !important;
+}
+.o_menu_systray .o_website_systray {
+ background-color: red !important;
+}
+.dropdown-menu.cybro-main-menu.show {
+ transition: all .5s;
+ width: 260px;
+ background: #fff;
+ color: rgba(163, 175, 183, .9);
+ font-family: Roboto, sans-serif;
+ -webkit-box-shadow: 3px 0 6px 0 rgba(0, 0, 0, .05), 3px 0 15px 0 rgba(0, 0, 0, .1);
+ box-shadow: 3px 0 6px 0 rgba(0, 0, 0, .05), 3px 0 15px 0 rgba(0, 0, 0, .1);
+ -ms-transform: translate(-240px, 0);
+ -webkit-transform: translate3d(-240px, 0, 0);
+ transform: translate3d(-240px, 0, 0);
+ scrollbar-width: thin;
+}
+
+.cybro-main-menu a.dropdown-item.o_app:hover {
+
+ color: #37474f !important;
+ background-color: rgba(11, 105, 227, .05) !important;
+
+}
+
+.dropdown-menu.cybro-main-menu .search-input {
+ flex: 0 0 100% !important;
+ max-width: 100% !important;
+}
+ .o_searchview .o_searchview_facet .o_searchview_facet_label{
+ background-color:var(--theme_main_color) !important;
+ }
+.badge-primary{
+ background-color:var(--theme_main_color) !important;
+ color:var(--theme_font_color) !important;
+}
+.o_form_view .oe_button_box .oe_stat_button .o_button_icon{
+ color:var(--theme_main_color) !important;
+
+}
+.o_dashboards .o_website_dashboard .o_dashboard_common .o_inner_box{
+ background-color:var(--theme_main_color) !important;
+ color:var(--theme_font_color) !important;
+}
+.o_form_view .oe_button_box .btn.oe_stat_button > .o_stat_info .o_stat_value, .o_form_view .oe_button_box .btn.oe_stat_button > span .o_stat_value {
+ color:var(--view_font_color) !important;
+
+}
+.btn-link {
+ color:var(--view_font_color) !important;
+
+}
+.o_form_view .o_form_uri > span:first-child{
+ color:var(--view_font_color) !important;
+}
+.o_dashboards .o_website_dashboard div.o_box h2, .o_dashboards .o_website_dashboard div.o_box h4{
+ color:var(--theme_main_color) !important;
+
+}
+.sidebar_app_name {
+ color:var(--theme_font_color) !important;
+}
+.fa.fa-comments {
+// color:var(--theme_main_color) !important;
+}
+.o_loading{
+
+ background-color:var(--theme_main_color) !important;
+ color:var(--theme_font_color) !important;
+}
+.o_search_panel .o_search_panel_category .o_search_panel_section_icon {
+ color:var(--theme_main_color) !important;
+
+}
+.o-mail-ChatWindow-header {
+ background-color:var(--theme_main_color) !important;
+ color:var(--theme_font_color) !important;
+}
+.o_dashboard_sales .o_link_enable .o_highlight{
+ color:var(--theme_main_color) !important;
+
+}
+.o_field_widget.o_field_many2one .o_external_button{
+ color:var(--view_font_color) !important;
+}.o_form_view .o_form_statusbar > .o_statusbar_status > .o_arrow_button.btn-primary.disabled::after, .o_form_view .o_form_statusbar > .o_statusbar_status > .o_arrow_button.btn-primary.disabled::before {
+ border-left-color: var(--theme_main_color) !important;
+}
+.o_form_view .o_form_statusbar > .o_statusbar_status > .o_arrow_button:not(:first-child)::before, .o_form_view .o_form_statusbar > .o_statusbar_status > .o_arrow_button:not(:first-child)::after{
+border-top: 19px solid transparent;
+border-bottom: 14px solid transparent;
+}
+.custom-control-input:checked ~ .custom-control-label::before {
+ color:var(--theme_font_color) !important;
+ background-color:var(--theme_main_color) !important;
+ background-color:var(--theme_main_color) !important;
+}
+.d-block {
+ color:var(--view_font_color) !important;
+}
+.btn-primary {
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ background-color:var(--theme_main_color) !important;
+// color:var(--theme_font_color) !important;
+}
+
+.btn-primary.focus, .btn-primary.hover, .btn-primary:focus, .btn-primary:hover {
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+
+.fa.fa-search {
+ color: #fff !important;
+}
+
+/*Placholder*/
+::-webkit-input-placeholder {
+ color: #76838f;
+ font-size: 12px;
+}
+
+::-moz-placeholder {
+ color: #76838f;
+ font-size: 12px;
+}
+
+:-ms-input-placeholder {
+ color: #76838f;
+ font-size: 12px;
+}
+
+::placeholder {
+ color: #76838f;
+ font-size: 12px;
+}
+
+/*//place holder*/
+.form-control {
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ height: 2.573rem;
+ font-weight: 100;
+ border-color: #e4eaec;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ -webkit-transition: -webkit-box-shadow .25s linear, border .25s linear, color .25s linear, background-color .25s linear;
+ -o-transition: box-shadow .25s linear, border .25s linear, color .25s linear, background-color .25s linear;
+ transition: box-shadow .25s linear, border .25s linear, color .25s linear, background-color .25s linear;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+}
+
+.form-control.focus, .form-control:focus {
+ border-color: #3e8ef7;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+
+.o_searchview .o_searchview_autocomplete li.o-selection-focus {
+ background-color: #ffffff !important;
+}
+
+.o_mail_discuss .o_mail_discuss_sidebar .o_mail_discuss_item.o_active {
+ //background-color: #212529;
+ //box-shadow: inset 3px 0 0 #3e8df7;
+}
+
+.o_control_panel > .o_cp_right {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: flex;
+ width: 60%;
+ margin-top: 1px;
+}
+
+.o_mail_discuss .o_mail_discuss_sidebar .o_mail_discuss_item.o_active {
+ //background-color: #e8e8e8;
+ //box-shadow: inset 3px 0 0 #3e8df7;
+}
+
+.o_onboarding.o_onboarding_violet .o_onboarding_wrap {
+ background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(96, 112, 195, 0.5)), to(#475DA4));
+ background-image: -moz-linear-gradient(top, rgba(96, 112, 195, 0.5), #475DA4);
+ background-image: -ms-linear-gradient(top, rgba(96, 112, 195, 0.5), #475DA4);
+ background-image: -o-linear-gradient(top, rgba(96, 112, 195, 0.5), #475DA4);
+ background-image: linear-gradient(to bottom, rgba(96, 112, 195, 0.5), #475DA4);
+ box-shadow: inset 0 -7px 20px -5px rgba(0, 0, 0, 0.3);
+ background: #3e8df7;
+ background-color:var(--theme_main_color) !important;
+
+}
+
+.sidebar-menus {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -webkit-flex-direction: column;
+ flex-direction: column;
+ padding: 1rem 0;
+
+}
+.sidebar-menus a {
+ padding: .5rem 1rem;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin-bottom: 14px;
+ transition:.3s all;
+}
+.sidebar-menus a:hover {
+ background: #e3e3e3;
+}
+.sidebar-menus a.active {
+ background:
+ #d7d7d7;
+}
+.sidebar_panel .sidebar .sidebar_menu li a .sidebar_img {
+ max-width: 3rem;
+ margin-right: 8px;
+}
+.cybro-sidebar-qweb span.o-app-name {
+ display: none;
+}
+
+.cybro-sidebar-qweb .sidebar-menus {
+ background: #fff;
+ box-shadow: 2px 1px 5px 0px
+ rgba(103, 103, 103, 0.19);
+ position: relative;
+ z-index: 5;
+ height: 100vh;
+ overflow-y: auto;
+}
+
+.cybro-sidebar-qweb .sidebar-menus img.o-app-icon {
+ width: 30px;
+ border-radius: 100%;
+}
+
+.cybro-sidebar-qweb {
+ position: absolute;
+}
+
+.o_required_modifier.o_input, .o_required_modifier .o_input {
+ background-color: #f7f7f7 !important;
+}
+
+button.btn.btn-primary span {
+ font-weight: 400;
+}
+
+.sidebar-user {
+ padding: 4rem 0.5rem;
+ width: 100%;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: flex;
+ color: #fff;
+ justify-content: center;
+ align-items: center;
+ background-size: cover;
+ background-position: center;
+ overflow: hidden;
+}
+
+.sidebar-user img {
+ width: 50px;
+ border-radius: 30px;
+}
+
+.sidebar-user img {
+ margin-right: 10px;
+}
+
+.sidebar-overlay {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ background: #000;
+ opacity: .6;
+ z-index: 2;
+}
+
+.sidebar-user span, .sidebar-user img {
+ position: relative;
+ z-index: 5;
+}
+
+span.sidebar-username {
+ font-size: 12px;
+ color: rgba(255, 255, 255, .6);
+}
+
+i.fa.fa-ellipsis-v {
+ color: #fff !important;
+}
+
+.o_web_client .o_mobile_search .o_mobile_search_header {
+ height: 46px;
+ margin-bottom: 10px;
+ width: 100%;
+ background-color: #3e8df7;
+ color: white;
+}
+
+.btn-secondary {
+ font-weight: 500;
+}
+
+.btn-secondary.disabled, .btn-secondary:disabled {
+ color: #000000;
+ background-color: #fff;
+ border-color: #fff;
+ font-weight: 500 !important;
+}
+
+button.btn.btn-secondary.o_mail_discuss_button_mark_all_read.disabled.d-none.d-md-inline-block {
+ font-weight: 600 !important;
+ color: black !important;
+ border: 1px solid #7b7b7b;
+}
+
+.btn-secondary {
+ font-weight: 500;
+}
+
+aside.o_cp_sidebar button.o_dropdown_toggler_btn.btn.btn-secondary.dropdown-toggle {
+ margin-right: 8px;
+ padding: 6px 9px !important;
+ font-size: 12px;
+ border: 1px solid #e4eaec;
+ border-radius: 5px;
+}
+
+.o_cp_buttons {
+ order: 2;
+}
+
+.o_control_panel.o_breadcrumb_full aside.o_cp_sidebar {
+ order: 1;
+}
+
+.o_control_panel.o_breadcrumb_full .o_cp_left {
+ order: 3;
+ width: 58%;
+ justify-content: space-between;
+ padding: 10px 55px !important;
+}
+
+li.o_user_menu span.oe_topbar_name {
+ display: none;
+}
+
+.oe_kanban_global_click.o_kanban_record_has_image_fill.o_res_partner_kanban.o_kanban_record {
+ box-shadow: none !important;
+ border-bottom: 1px solid #f2f2f2 !important;
+ margin: 0;
+ align-items: center;
+}
+
+.o_kanban_view.o_res_partner_kanban.o_kanban_ungrouped {
+ padding: 0;
+}
+
+div#o_employee_main img {
+ border-radius: 100%;
+ box-shadow: none;
+}
+
+.o_kanban_image_fill_left.d-none.d-md-block {
+ border-radius: 100%;
+ min-height: 60px !important;
+ min-width: 60px !important;
+ max-width: 60px;
+ max-height: 60px;
+ margin-left: 5px !important;
+}
+
+.oe_kanban_global_click.o_kanban_record_has_image_fill.o_hr_kanban_record.o_kanban_record {
+ align-items: center;
+ box-shadow: none !important;
+ border-bottom: 1px solid #f2f2f2 !important;
+ margin: 0;
+ border-right: 1px solid #f2f2f2 !important;
+}
+
+.o_kanban_view.o_hr_employee_kanban.o_kanban_ungrouped {
+ padding: 0;
+}
+
+@keyframes show-navbar-dropdown {
+ 0% {
+ transition: visibility .25s, opacity .25s, transform .25s;
+ transform: translate(0, 10px) perspective(200px) rotateX(-2deg);
+ opacity: 0
+ }
+ 100% {
+ transform: translate(0, 0);
+ opacity: 1
+ }
+}
+
+@keyframes hide-navbar-dropdown {
+ from {
+ opacity: 1
+ }
+ to {
+ transform: translate(0, 10px);
+ opacity: 0
+ }
+}
+
+.o_main_navbar .show .dropdown-toggle {
+ background-color: transparent;
+}
+
+.o_main_navbar .dropdown-menu.show {
+ max-height: 90vh;
+ min-width: 100%;
+ overflow: auto;
+ color:#747575;
+ margin-top: 0;
+ animation: show-navbar-dropdown .5s ease forwards;
+ pointer-events: auto;
+ opacity: 1;
+}
+
+.o_menu_sections .dropdown-menu.show {
+ margin-top: 52px;
+}
+
+ul.o_menu_sections li.show .dropdown-toggle {
+
+ color: #000 !important;
+}
+
+/*theme selector start */
+// .themes_selector {
+// display: none;
+// }
+
+.themes_selector {
+ background: #fff;
+ width: 500px;
+ height: 300px;
+
+}
+
+.o-dropdown--menu{
+overflow: unset !important;
+}
+
+.themes_selector .themes_list {
+ width: 100%;
+ border-right: 1px solid #ced3da;
+ padding: 0.2rem 1rem;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: flex;
+ align-items: center;
+ justify-content: start;
+ font-size: 12px;
+}
+.selected_theme {
+ width: 100%;
+}
+.theme_data {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: flex;
+ justify-content: space-between;
+ flex-wrap: wrap;
+ padding: 10px;
+}
+.color_selector {
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ padding-top: 1rem;
+ order: 4;
+}
+.color_selector > div {
+ display: flex;
+ flex-direction: column;
+}
+.theme_data p {
+ width: max-content;
+ margin: 0 !important;
+}
+.row.name div.cell {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: flex;
+ justify-content: left;
+ align-items: center;
+ width: 100%;
+ input {
+ padding: 0;
+ }
+}
+.row.name {
+ padding-bottom: 1rem;
+ width: 80% !important;
+ order: 1;
+}
+.row.name #name {
+ border: none !important;
+ height: auto !important;
+ padding: 0px;
+ width: auto;
+ font-size: 12px !important;
+ margin: 0px 0px;
+}
+.row.theme_image .cell {
+ width: 100%;
+ text-align: left;
+ justify-content: flex-start !important;
+}
+.cell .fa-check {
+ color: #0cbb5d;
+}
+.row.theme_main_color {
+ position: relative;
+}
+.row.theme_main_color .color {
+ width: 30px;
+ height: 30px;
+ cursor: pointer;
+}
+.row.theme_font_color .color {
+ width: 30px;
+ height: 30px;
+ cursor: pointer;
+}
+.row.view_font_color .color {
+ width: 30px;
+ height: 30px;
+ cursor: pointer;
+}
+.header_buttons.row {
+ display: flex;
+ justify-content: space-around;
+ align-items: center;
+ font-size: 12px;
+}
+
+.header_buttons.row {
+ display: flex;
+ justify-content: space-around;
+ align-items: center;
+ font-size: 12px;
+ box-shadow: 0 0 2px #ced4da;
+ padding: 0rem;
+ width: 100%;
+ margin: 0;
+}
+.header_buttons.row div {
+ flex-basis: 33.33%;
+ text-align: center;
+ padding: 1rem 0;
+ border: 1px solid #e4eaec;
+ cursor: pointer;
+}
+.row.name i{
+ cursor: pointer;
+}
+.themes_selector.dropdown-menu-right .row {
+ margin: 0 !important;
+ width: 100%;
+}
+select.theme_select {
+ padding-left: 8px;
+ width: 100%;
+ margin-top: 1rem;
+ border: 1px solid #e4eaec;
+ color: #4c4c4c;
+ height: 27px;
+}
+
+.img-picker img {
+ vertical-align: middle;
+ border-style: none;
+ width: 90%;
+ height: 60px;
+ float: left;
+ border: 1px solid #cacaca;
+}
+.image-container{
+ display: flex;
+}
+.img-upload-btn {
+ position: relative;
+ overflow: hidden;
+ padding-top: 18% !important;
+}
+.img-picker input {
+ height: 60px !important;
+ max-height: 60px !important;
+ min-height: 60px !important;
+}
+.theme_extra {
+ order: 2;
+}
+.theme-active p {
+ display: flex;
+ justify-content: center;
+ background-color: var(--theme_main_color);
+ color: var(--theme_font_color) !important;
+ border-radius: 13px;
+ width: 48px;
+ float: right;
+}
+.row.theme_image {
+ order: 3;
+}
+.themes_selector.dropdown-menu-right .row p {
+ font-family: lato, sans-serif;
+ font-size: 11px;
+ line-height: 28px;
+ color: #676767;
+ margin-bottom: 0;
+}
+
+.cp-color-picker {
+ z-index: 999;
+}
+.color {
+ width: 50px;
+ height: 50px;
+ border: 1px solid grey;
+}
+
+.o_list_view .text-info td{
+ color: #1d517f;
+}
+.oe_tooltip_string {
+ background-color: grey !important;
+}
+.oe_tooltip_help {
+ font-size: 11px;
+}
+
+/*theme selector end */
+
+@media (min-width: 1200px) {
+ .o_mail_discuss .o_mail_discuss_content {
+ margin-left: 218px !important;
+ }
+ .o_mail_discuss .o_mail_discuss_sidebar {
+ width: 218px;
+ }
+}
+
+@media (min-width: 767px) {
+ ul.o_menu_sections.collapse.show {
+ margin-top: 24px !important;
+ }
+ .o_web_client .o_mobile_search .o_mobile_search_header {
+ height: 46px;
+ margin-bottom: 10px;
+ width: 100%;
+ background-color: #3e8df7 !important;
+ color: white;
+ }
+ .o_searchview {
+ padding-right: 0 !important;
+ padding-left: 5px !important;
+ }
+
+ button.o_enable_searchview.btn.fa.fa-search {
+ float: right !important;
+ height: 39px !important;
+ width: 33px !important;
+ background: #3e8df7 !important;
+ color: #fff !important;
+ border-top-right-radius: 30px !important;
+ border-bottom-right-radius: 30px !important;
+ }
+ .o_control_panel .btn.o_enable_searchview {
+ margin-left: 2%;
+ padding: 0px;
+ float: right;
+ background: white;
+ margin-right: -43px;
+ height: 40px;
+ border-top-right-radius: 20px;
+ margin-top: -1px;
+ border: 1px solid #f1f1f1;
+ padding: 11px;
+ border-bottom-right-radius: 20px;
+ }
+}
+
+@media (max-width: 767px) {
+ .cybro-sidebar {
+ display: none;
+ }
+ .o_cp_left {
+ position: static !important;
+ bottom: 0px;
+ z-index: 0;
+ background: #fff;
+ width: auto;
+ padding: 0 !important;
+ }
+ .o_main_navbar > ul > li > a, .o_main_navbar > ul > li > label {
+ font-weight: 300;
+ }
+ .o_web_client .o_mobile_search .o_mobile_search_header .fa {
+ color: white !important;
+ }
+ .oe_website_login_container {
+ paddili.o_user_menu span.oe_topbar_name {
+ display: none;
+ }
+ ng: 1rem 1rem 5rem;
+ background: #f1f4f5;
+ }
+ .oe_login_form, .oe_signup_form, .oe_reset_password_form {
+ max-width: 99%;
+ position: relative;
+ margin: 50px auto;
+ border-radius: 7px;
+ padding: 3rem;
+ background: #ffffff;
+ box-shadow: 0 0 11px 0px #4477d4;
+ }
+}
+
+.o_action_manager {
+ padding-left: 80px;
+}
+.o_cp_top {
+ width: 100%;
+}
+.o_cp_bottom {
+ width: 100%;
+}
+
+.o_main_navbar {
+ background-color:var(--theme_main_color) !important;
+ color:var(--theme_font_color) !important;
+
+}
+
+#sidebar_panel {
+ height: calc(100vh - 60px);
+ position: fixed;
+ background-color: #fff;
+ display: none;
+ width: 264px !important;
+ overflow-y: auto;
+ -ms-overflow-style: none; /* Hide scrollbar for IE and Edge */
+ scrollbar-width: none; /* Hide scrollbar for Firefox */
+ z-index: 999;
+ box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
+}
+#sidebar_panel::-webkit-scrollbar {
+ display: none; /* Hide scrollbar for Chrome, Safari and Opera */
+}
+.sidebar_panel .sidebar {
+ padding: 0;
+ white-space: normal;
+}
+.sidebar_panel .sidebar_close {
+ text-align: end;
+ display: none;
+ position: sticky;
+ height: 35px;
+ padding-top: 5px;
+ top: 0;
+ background: #2a3042;
+ z-index: 1;
+}
+.sidebar_panel .sidebar_close a#closeSidebar {
+ font-size: 18px;
+ margin-right: 10px;
+ color: #ffffff;
+ opacity: .3;
+}
+.fa.fa-bars.fa-lg{
+ padding: 16px;
+}
+.fa.fa-close.fa-lg{
+ padding: 16px;
+}
+.search_icons > .o-menu-search-result{
+ width: 100%;
+ height: auto;
+ background-size: contain !important;
+ background-position: left !important;
+ background-repeat: no-repeat !important;
+ margin-top: 5px !important;
+ margin-bottom: 5px !important;
+ padding-left: 30px;
+ font-size: 12px;
+ white-space: normal;
+ word-wrap: normal;
+ line-height: 140%;
+
+ &::before{
+ content: '' !important;
+ }
+}
+.search-results {
+ max-height: calc(100vh - 47px - 6em);
+ background: #fff;
+ position: absolute;
+ overflow-y: auto;
+ padding: 0 20px;
+ box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
+}
+.fa.fa-paint-brush {
+ padding: 14px;
+}
+div.o_boolean_toggle.custom-control.custom-checkbox > input.custom-control-input:checked + label.custom-control-label::before {
+ background-color:var(--theme_main_color) !important;
+}
+.text-primary {
+ color:var(--theme_main_color) !important;
+}
+.bg-primary {
+ background-color:var(--theme_main_color) !important;
+ color:var(--theme_font_color);
+}
+.oe_kanban_action.oe_kanban_action_a {
+ color:var(--theme_main_color) !important;
+
+}
+.o_purchase_dashboard .table > thead > tr > td.o_main:hover, .o_purchase_dashboard .table tbody > tr > td.o_main {
+ background-color:var(--theme_main_color) !important;
+}
+.o_purchase_dashboard .table > thead > tr > td.o_main, .o_purchase_dashboard .table tbody > tr > td.o_main {
+ background-color:var(--theme_main_color) !important;
+}
+.o_calendar_view .o_calendar_widget .fc-timeGridDay-view .fc-widget-header.fc-today, .o_calendar_view .o_calendar_widget .fc-timeGridWeek-view .fc-widget-header.fc-today {
+
+ background-color:var(--theme_main_color) !important;
+ color: var(--theme_font_color) !important;
+}
+.mr-2 {
+ color:var(--theme_main_color) !important;
+}
+
+.form-check-input{
+ appearance: checkbox;
+ height: 14px !important;
+ accent-color:var(--theme_main_color) !important;
+}
+.o_field_statusbar > .o_statusbar_status > .o_arrow_button.o_arrow_button_current.disabled {
+ background-color:var(--theme_main_color) !important;
+}
+.text-bg-primary {
+ color: #FFFFFF !important;
+ background-color:var(--theme_main_color) !important;
+ }
+.o_field_statusbar > .o_statusbar_status > .o_arrow_button.o_arrow_button_current.disabled::after, .o_field_statusbar > .o_statusbar_status > .o_arrow_button.o_arrow_button_current.disabled::before {
+ border-left-color: var(--theme_main_color) !important;
+}
+btn-fill-odoo, .btn-odoo {
+ color: #FFFFFF;
+ background-color: var(--theme_main_color) !important;
+ border-color: var(--theme_main_color) !important;
+}
+// .o_action_manager.sidebar_margin {
+// // margin-left: 205px !important;
+// }
+a.text-primary:hover, a.text-primary:focus, button.text-primary:hover, button.text-primary:focus {
+ color: var(--theme_main_color) !important;
+}
+h1 input{
+ font-size: inherit !important;
+}
+.o_MessagingMenu_icon.fa.fa-lg.fa-comments {
+ color: #fff !important;
+}
+li.themes_selector_li {
+ display: flex;
+}
+li.dropdown {
+ display: flex;
+}
+.o_phone_form_link.ms-3.d-inline-flex.align-items-center {
+ color: var(--view_font_color) !important;
+}
+.ms-3.d-inline-flex.align-items-center.o_field_phone_sms {
+ color:var(--view_font_color) !important;
+}
+.ms-3.d-inline-flex.align-items-center {
+ color: var(--view_font_color) !important;
+}
+.btn.btn-secondary.fa.o_external_button.fa-arrow-right {
+ color: var(--view_font_color) !important;
+}
+.o_stat_info.o_stat_value {
+ color: var(--view_font_color) !important;
+}
+.mb-5 {
+ margin-bottom: 1rem !important;
+}
+
+.sidebar .search-container .search-input {
+ padding: 20px;
+ height: 70px;
+}
+.search-results .search-items {
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow-x: hidden;
+}
+.btn-outline-primary:hover {
+ color: #FFFFFF;
+ background-color: var(--theme_main_color) !important;
+ border-color: var(--theme_main_color) !important;
+}
+.nav-link {
+ color: var(--view_font_color) !important;
+}
+.o_progressbar .o_progress .o_progressbar_complete {
+ background-color:var(--theme_main_color) !important;
+}
+.o_main_navbar .o_menu_sections .o_nav_entry {
+ background-color: var(--theme_main_color) !important;
+ color: var(--theme_font_color) !important;
+}
+.o_onboarding_main .o_onboarding_step .o_onboarding_step_title, .o_onboarding_main .o_onboarding_step .o_onboarding_step_action, .o_onboarding_main .o_onboarding_step .o_onboarding_step_action__done, .o_onboarding_main .o_onboarding_step .o_onboarding_dot_isChecked {
+ color: var(--theme_font_color) !important;
+}
+.text-white-75 {
+ color: var(--theme_font_color) !important;
+}
+.o_onboarding_main .o_onboarding_step .o_onboarding_step_action {
+ border: 1px solid var(--theme_font_color) !important;
+}
+o_onboarding_main.o_onboarding_violet {
+ --o-onboarding-todo-color: var(--theme_font_color) !important;
+ --o-onboarding-bg_1-color: var(--theme_main_color) !important;
+ --o-onboarding-bg_2-color: var(--theme_main_color) !important;
+}
+.o_onboarding_main .o_onboarding_wrap {
+
+ background-image: linear-gradient(to bottom, var(--theme_main_color), var(--theme_main_color));
+}
+.dropdown-item.active, .dropdown-item:active {
+ color: var(--theme_font_color) !important;
+}
+
+@media screen and (max-width: 768px) {
+ .themes_selector.show{
+ right: 0;
+ }
+}
\ No newline at end of file
diff --git a/multicolor_backend_theme/static/src/wcolpick/wcolpick.css b/multicolor_backend_theme/static/src/wcolpick/wcolpick.css
new file mode 100644
index 000000000..3abbe5397
--- /dev/null
+++ b/multicolor_backend_theme/static/src/wcolpick/wcolpick.css
@@ -0,0 +1,1121 @@
+ /*
+Wcolpick - A Web Color Picker
+
+Copyright (C) 2017-2020 devpelux (Salvatore Peluso)
+Find me on github: https://github.com/devpelux
+Dual licensed under GPL v3.0 and MIT licenses.
+(Based on Jose Vargas' Color Picker)
+
+Description, how to use, and examples: https://github.com/devpelux/wcolpick
+
+Last Edit: 2020/12/06 18:53
+*/
+
+
+
+/* ////////////////////////////////////////
+ STANDARD LAYOUTS
+////////////////////////////////////////*/
+
+
+/*////////// DEFAULT LAYOUTS //////////*/
+
+/*//// FULL LAYOUT ////*/
+/*Main container*/
+.wcolpick {
+ position: absolute;
+ display: none;
+ width: 549px;
+ height: 276px;
+ -webkit-box-sizing: content-box;
+ -moz-box-sizing: content-box;
+ box-sizing: content-box;
+ overflow: hidden;
+ text-align: left;
+ font-family: Arial;
+ direction: ltr;
+ border: 1px solid;
+ -webkit-border-radius: 7.5px;
+ -moz-border-radius: 7.5px;
+ border-radius: 7.5px;
+ z-index: 10;
+ /*Prevents selecting text when dragging the selectors*/
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ -o-user-select: none;
+ user-select: none;
+}
+/*Color selector*/
+.wcolpick_color {
+ position: absolute;
+ top: 5px;
+ left: 5px;
+ width: 225px;
+ height: 225px;
+ overflow: hidden;
+ outline: 1px solid;
+ cursor: crosshair;
+}
+.wcolpick_color_overlay1 {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ width: 225px;
+ height: 225px;
+ filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#ffffff',endColorstr='#00ffffff'); /* IE6-9 */
+ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#ffffff',endColorstr='#00ffffff')"; /* IE8 */
+ background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
+ background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
+ background: -ms-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* IE10+ */
+ background: -o-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* Opera 11.10+ */
+ background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
+}
+.wcolpick_color_overlay2 {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ width: 225px;
+ height: 225px;
+ filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#00000000',endColorstr='#000000'); /* IE6-9 */
+ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#00000000',endColorstr='#000000')"; /* IE8 */
+ background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
+ background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); /* FF3.6+ */
+ background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); /* IE10+ */
+ background: -o-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); /* Opera 11.10+ */
+ background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
+}
+/*Color selector indicator*/
+.wcolpick_selector_outer {
+ position: absolute;
+ width: 14px;
+ height: 14px;
+ margin: -8px 0px 0px -8px;
+ background: none;
+ border: 1px solid black;
+ -webkit-border-radius: 50%;
+ -moz-border-radius: 50%;
+ border-radius: 50%;
+}
+.wcolpick_selector_inner {
+ position: absolute;
+ width: 12px;
+ height: 12px;
+ background: none;
+ border: 1px solid white;
+ -webkit-border-radius: 50%;
+ -moz-border-radius: 50%;
+ border-radius: 50%;
+}
+/*Hue bar*/
+.wcolpick_hue {
+ position: absolute;
+ top: 5px;
+ left: 244px;
+ width: 20px;
+ height: 225px;
+ cursor: ns-resize;
+}
+.wcolpick_hue_underlay {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ width: 100%;
+ height: 100%;
+ outline: 1px solid;
+}
+.wcolpick_hue_overlay {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ width: 100%;
+ height: 100%;
+}
+/*Hue bar indicator*/
+.wcolpick_hue_arrs {
+ position: absolute;
+ left: -7px;
+ width: 34px;
+ height: 6px;
+ margin-top: -5px;
+}
+.wcolpick_hue_larr {
+ position: absolute;
+ width: 0px;
+ height: 0px;
+ border-style: solid;
+ border-color: transparent transparent transparent black;
+ border-width: 5px 0px 5px 6px;
+}
+.wcolpick_hue_rarr {
+ position: absolute;
+ right: 0px;
+ width: 0px;
+ height: 0px;
+ border-style: solid;
+ border-color: transparent black transparent transparent;
+ border-width: 5px 6px 5px 0px;
+}
+/*Alpha bar*/
+.wcolpick_alpha {
+ position: absolute;
+ top: 244px;
+ left: 5px;
+ width: 225px;
+ height: 20px;
+ cursor: ew-resize;
+}
+.wcolpick_alpha_underlay {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ width: 100%;
+ height: 100%;
+ outline: 1px solid;
+}
+.wcolpick_alpha_overlay {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ width: 100%;
+ height: 100%;
+}
+/*Alpha bar indicator*/
+.wcolpick_alpha_arrs {
+ position: absolute;
+ top: -7px;
+ left: 225px;
+ width: 6px;
+ height: 34px;
+ margin-left: -5px;
+}
+.wcolpick_alpha_darr {
+ position: absolute;
+ top: 0px;
+ width: 0px;
+ height: 0px;
+ border-style: solid;
+ border-color: black transparent transparent transparent;
+ border-width: 6px 5px 0px 5px;
+}
+.wcolpick_alpha_uarr {
+ position: absolute;
+ bottom: 0px;
+ width: 0px;
+ height: 0px;
+ border-style: solid;
+ border-color: transparent transparent black transparent;
+ border-width: 0px 5px 6px 5px;
+}
+/*Fields*/
+.wcolpick_field, .wcolpick_hex_field {
+ position: absolute;
+ width: 75px;
+ height: 30px;
+ overflow: hidden;
+ font-size: 11px;
+ border: 1px solid;
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ border-radius: 3px;
+}
+.wcolpick_hex_field { top: 115px; left: 467px; }
+.wcolpick_rgb_r { top: 115px; left: 291px; }
+.wcolpick_rgb_g { top: 156px; left: 291px; }
+.wcolpick_rgb_b { top: 197px; left: 291px; }
+.wcolpick_hsb_h { top: 115px; left: 379px; }
+.wcolpick_hsb_s { top: 156px; left: 379px; }
+.wcolpick_hsb_b { top: 197px; left: 379px; }
+.wcolpick_alpha_field { top: 238px; left: 291px; }
+/*Fields' labels*/
+.wcolpick_field_letter {
+ position: absolute;
+ left: -1px;
+ height: 30px;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ min-width: 10px;
+ max-width: 10px;
+ line-height: 30px;
+ text-align: center;
+ font-weight: bold;
+ z-index: 1;
+}
+/*Fields' text inputs*/
+.wcolpick_field input, .wcolpick_hex_field input {
+ position: absolute;
+ right: 15px;
+ height: 30px;
+ margin: 0px;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ padding: 0px;
+ line-height: 30px;
+ text-align: right;
+ font-family: Arial;
+ font-size: 11px;
+ border: none;
+ outline: none;
+}
+.wcolpick_hex_field input { right: 3px; }
+/*Fields on focus*/
+.wcolpick_focus { border-color: black; }
+/*Fields' up/down arrows*/
+.wcolpick_field_arrs {
+ position: absolute;
+ top: 0px;
+ right: 0px;
+ width: 7px;
+ height: 30px;
+ cursor: ns-resize;
+}
+.wcolpick_field_uarr {
+ position: absolute;
+ top: 4px;
+ width: 0px;
+ height: 0px;
+ border-style: solid;
+ border-color: transparent transparent black transparent;
+ border-width: 0px 3px 3px 3px;
+}
+.wcolpick_field_darr {
+ position: absolute;
+ bottom: 4px;
+ width: 0px;
+ height: 0px;
+ border-style: solid;
+ border-color: black transparent transparent transparent;
+ border-width: 3px 3px 0px 3px;
+}
+/*Fields' up/down arrows while using them*/
+.wcolpick_changing .wcolpick_field_uarr { border-bottom-color: black; }
+.wcolpick_changing .wcolpick_field_darr { border-top-color: black; }
+/*New and Current color*/
+.wcolpick_colors {
+ position: absolute;
+ top: 5px;
+ left: 291px;
+ width: 253px;
+ height: 102px;
+}
+.wcolpick_colors_underlay {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ width: 100%;
+ height: 100%;
+ outline: 1px solid;
+}
+.wcolpick_new_color {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ width: 100%;
+ height: 50%;
+}
+.wcolpick_current_color {
+ position: absolute;
+ top: 50%;
+ left: 0px;
+ width: 100%;
+ height: 50%;
+}
+/*Submit button*/
+.wcolpick_submit {
+ position: absolute;
+ top: 238px;
+ left: 511px;
+ width: 31px;
+ height: 31px;
+ display: flex;
+ -webkit-justify-content: center;
+ -moz-justify-content: center;
+ justify-content: center;
+ -webkit-align-items: center;
+ align-items: center;
+ border: 1px solid;
+ -webkit-border-radius: 50%;
+ -moz-border-radius: 50%;
+ border-radius: 50%;
+}
+.wcolpick_submit:hover { opacity: 0.6; cursor: pointer; }
+.wcolpick_tear {
+ width: 15px;
+ height: 15px;
+ margin-top: 2px;
+ -webkit-box-sizing: content-box;
+ -moz-box-sizing: content-box;
+ box-sizing: content-box;
+ border: none;
+ -webkit-border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
+ -moz-border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
+ border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
+ -webkit-transform: rotateZ(-45deg);
+ -moz-transform: rotateZ(-45deg);
+ -ms-transform: rotateZ(-45deg);
+ -o-transform: rotateZ(-45deg);
+ transform: rotateZ(-45deg);
+}
+/*Checkerboards*/
+.wcolpick_checkerboards {
+ -webkit-background-size: 10px 10px; /* Chrome10+,Safari5.1+ */
+ -moz-background-size: 10px 10px; /* FF3.6+ */
+ -o-background-size: 10px 10px; /* Opera 11.10+ */
+ background-size: 10px 10px;
+}
+
+/*//// FULL LAYOUT - NO SUBMIT BUTTON ////*/
+.wcolpick_full_ns .wcolpick_new_color { height: 100%; }
+.wcolpick_full_ns .wcolpick_current_color, .wcolpick_full_ns .wcolpick_submit { display: none; }
+
+/*//// RGBHEX LAYOUT ////*/
+.wcolpick_rgbhex { width: 461px; }
+.wcolpick_rgbhex .wcolpick_hex_field { left: 379px; }
+.wcolpick_rgbhex .wcolpick_hsb_h, .wcolpick_rgbhex .wcolpick_hsb_s, .wcolpick_rgbhex .wcolpick_hsb_b { display: none; }
+.wcolpick_rgbhex .wcolpick_colors { width: 165px; }
+.wcolpick_rgbhex .wcolpick_submit { left: 423px; }
+
+/*//// RGBHEX LAYOUT - NO SUBMIT BUTTON ////*/
+.wcolpick_rgbhex_ns .wcolpick_new_color { height: 100%; }
+.wcolpick_rgbhex_ns .wcolpick_current_color, .wcolpick_rgbhex_ns .wcolpick_submit { display: none; }
+
+/*//// HEX LAYOUT ////*/
+.wcolpick_hex { width: 373px; }
+.wcolpick_hex .wcolpick_hex_field { left: 291px; }
+.wcolpick_hex .wcolpick_rgb_r, .wcolpick_hex .wcolpick_rgb_g, .wcolpick_hex .wcolpick_rgb_b, .wcolpick_hex .wcolpick_hsb_h, .wcolpick_hex .wcolpick_hsb_s, .wcolpick_hex .wcolpick_hsb_b, .wcolpick_hex .wcolpick_alpha_field { display: none; }
+.wcolpick_hex .wcolpick_colors { width: 77px; }
+.wcolpick_hex .wcolpick_submit { left: 313px; }
+
+/*//// HEX LAYOUT - NO SUBMIT BUTTON ////*/
+.wcolpick_hex_ns .wcolpick_hex_field { top: 238px; }
+.wcolpick_hex_ns .wcolpick_new_color { height: 100%; }
+.wcolpick_hex_ns .wcolpick_current_color, .wcolpick_hex_ns .wcolpick_submit { display: none; }
+
+/*//// ALL SUB-LAYOUTS - NO ALPHA CHANNEL ////*/
+/*full layout*/
+.wcolpick_noalpha { height: 235px; }
+.wcolpick_noalpha .wcolpick_alpha, .wcolpick_noalpha .wcolpick_alpha_field { display: none; }
+.wcolpick_noalpha .wcolpick_submit { top: 197px; }
+/*hex layout - no submit button*/
+.wcolpick_hex_noalpha_ns .wcolpick_hex_field { top: 197px; }
+
+
+/*////////// COMPACT LAYOUTS //////////*/
+
+/*//// FULL LAYOUT ////*/
+.wcolpick_compact { width: 277px; height: 392px; }
+.wcolpick_compact .wcolpick_field { width: 43px; }
+.wcolpick_compact .wcolpick_hex_field { top: 355px; left: 5px; width: 64px; }
+.wcolpick_compact .wcolpick_rgb_r { top: 277px; left: 77px; }
+.wcolpick_compact .wcolpick_rgb_g { top: 277px; left: 127px; }
+.wcolpick_compact .wcolpick_rgb_b { top: 277px; left: 177px; }
+.wcolpick_compact .wcolpick_hsb_h { top: 317px; left: 77px; }
+.wcolpick_compact .wcolpick_hsb_s { top: 317px; left: 127px; }
+.wcolpick_compact .wcolpick_hsb_b { top: 317px; left: 177px; }
+.wcolpick_compact .wcolpick_alpha_field { top: 277px; left: 227px; }
+.wcolpick_compact .wcolpick_field input { right: 10px; }
+.wcolpick_compact .wcolpick_hex_field input { right: 2px; }
+.wcolpick_compact .wcolpick_colors { top: 277px; left: 5px; width: 66px; height: 72px; }
+.wcolpick_compact .wcolpick_submit { top: 354px; left: 239px; }
+
+/*//// FULL LAYOUT - NO SUBMIT BUTTON ////*/
+.wcolpick_compact_full_ns .wcolpick_current_color, .wcolpick_compact_full_ns .wcolpick_submit { display: none; }
+
+/*//// RGBHEX LAYOUT ////*/
+.wcolpick_compact_rgbhex { height: 354px; }
+.wcolpick_compact_rgbhex .wcolpick_hex_field { top: 317px; left: 77px; }
+.wcolpick_compact_rgbhex .wcolpick_hsb_h, .wcolpick_compact_rgbhex .wcolpick_hsb_s, .wcolpick_compact_rgbhex .wcolpick_hsb_b { display: none; }
+.wcolpick_compact_rgbhex .wcolpick_submit { top: 316px; }
+
+/*//// RGBHEX LAYOUT - NO SUBMIT BUTTON ////*/
+.wcolpick_compact_rgbhex_ns .wcolpick_current_color, .wcolpick_compact_rgbhex_ns .wcolpick_submit { display: none; }
+
+/*//// HEX LAYOUT ////*/
+.wcolpick_compact_hex { height: 314px; }
+.wcolpick_compact_hex .wcolpick_hex_field { top: 277px; left: 101px; }
+.wcolpick_compact_hex .wcolpick_rgb_r, .wcolpick_compact_hex .wcolpick_rgb_g, .wcolpick_compact_hex .wcolpick_rgb_b, .wcolpick_compact_hex .wcolpick_hsb_h, .wcolpick_compact_hex .wcolpick_hsb_s, .wcolpick_compact_hex .wcolpick_hsb_b, .wcolpick_compact_hex .wcolpick_alpha_field { display: none; }
+.wcolpick_compact_hex .wcolpick_colors { width: 90px; height: 32px; }
+.wcolpick_compact_hex .wcolpick_new_color { width: 50%; height: 100%; }
+.wcolpick_compact_hex .wcolpick_current_color { top: 0; left: 50%; width: 50%; height: 100%; }
+.wcolpick_compact_hex .wcolpick_submit { top: 276px; }
+
+/*//// HEX LAYOUT - NO SUBMIT BUTTON ////*/
+.wcolpick_compact_hex_ns .wcolpick_new_color { width: 100%; }
+.wcolpick_compact_hex_ns .wcolpick_current_color, .wcolpick_compact_hex_ns .wcolpick_submit { display: none; }
+
+/*//// ALL SUB-LAYOUTS - NO ALPHA CHANNEL ////*/
+/*full layout*/
+.wcolpick_compact_noalpha { height: 359px; }
+.wcolpick_compact_noalpha .wcolpick_field { width: 60px; }
+.wcolpick_compact_noalpha .wcolpick_hex_field { top: 322px; }
+.wcolpick_compact_noalpha .wcolpick_rgb_r { top: 244px; }
+.wcolpick_compact_noalpha .wcolpick_rgb_g { top: 244px; left: 144px; }
+.wcolpick_compact_noalpha .wcolpick_rgb_b { top: 244px; left: 211px; width: 59px; }
+.wcolpick_compact_noalpha .wcolpick_hsb_h { top: 284px; }
+.wcolpick_compact_noalpha .wcolpick_hsb_s { top: 284px; left: 144px; }
+.wcolpick_compact_noalpha .wcolpick_hsb_b { top: 284px; left: 211px; width: 59px; }
+.wcolpick_compact_noalpha .wcolpick_colors { top: 244px; }
+.wcolpick_compact_noalpha .wcolpick_submit { top: 321px; }
+/*rgbhex layout*/
+.wcolpick_compact_rgbhex_noalpha { height: 321px; }
+.wcolpick_compact_rgbhex_noalpha .wcolpick_hex_field { top: 284px; width: 60px; }
+.wcolpick_compact_rgbhex_noalpha .wcolpick_submit { top: 283px; }
+/*hex layout*/
+.wcolpick_compact_hex_noalpha { height: 281px; }
+.wcolpick_compact_hex_noalpha .wcolpick_hex_field { top: 244px; width: 60px; }
+.wcolpick_compact_hex_noalpha .wcolpick_submit { top: 243px; }
+
+
+/*////////// STANDARD LAYOUTS - RESPONSIVE //////////*/
+
+@media screen and (max-width: 650px) {
+
+ /*//// FULL LAYOUT ////*/
+ .wcolpick { width: 277px; height: 392px; }
+ .wcolpick_field { width: 43px; }
+ .wcolpick_hex_field { top: 355px; left: 5px; width: 64px; }
+ .wcolpick_rgb_r { top: 277px; left: 77px; }
+ .wcolpick_rgb_g { top: 277px; left: 127px; }
+ .wcolpick_rgb_b { top: 277px; left: 177px; }
+ .wcolpick_hsb_h { top: 317px; left: 77px; }
+ .wcolpick_hsb_s { top: 317px; left: 127px; }
+ .wcolpick_hsb_b { top: 317px; left: 177px; }
+ .wcolpick_alpha_field { top: 277px; left: 227px; }
+ .wcolpick_field input { right: 10px; }
+ .wcolpick_hex_field input { right: 2px; }
+ .wcolpick_colors { top: 277px; left: 5px; width: 66px; height: 72px; }
+ .wcolpick_submit { top: 354px; left: 239px; }
+
+ /*//// FULL LAYOUT - NO SUBMIT BUTTON ////*/
+ .wcolpick_full_ns .wcolpick_current_color, .wcolpick_full_ns .wcolpick_submit { display: none; }
+
+ /*//// RGBHEX LAYOUT ////*/
+ .wcolpick_rgbhex { height: 354px; }
+ .wcolpick_rgbhex .wcolpick_hex_field { top: 317px; left: 77px; }
+ .wcolpick_rgbhex .wcolpick_hsb_h, .wcolpick_rgbhex .wcolpick_hsb_s, .wcolpick_rgbhex .wcolpick_hsb_b { display: none; }
+ .wcolpick_rgbhex .wcolpick_colors { width: 66px; }
+ .wcolpick_rgbhex .wcolpick_submit { top: 316px; left: 239px; }
+
+ /*//// RGBHEX LAYOUT - NO SUBMIT BUTTON ////*/
+ .wcolpick_rgbhex_ns .wcolpick_current_color, .wcolpick_rgbhex_ns .wcolpick_submit { display: none; }
+
+ /*//// HEX LAYOUT ////*/
+ .wcolpick_hex { height: 314px; }
+ .wcolpick_hex .wcolpick_hex_field { top: 277px; left: 101px; }
+ .wcolpick_hex .wcolpick_rgb_r, .wcolpick_hex .wcolpick_rgb_g, .wcolpick_hex .wcolpick_rgb_b, .wcolpick_hex .wcolpick_hsb_h, .wcolpick_hex .wcolpick_hsb_s, .wcolpick_hex .wcolpick_hsb_b, .wcolpick_hex .wcolpick_alpha_field { display: none; }
+ .wcolpick_hex .wcolpick_colors { width: 90px; height: 32px; }
+ .wcolpick_hex .wcolpick_new_color { width: 50%; height: 100%; }
+ .wcolpick_hex .wcolpick_current_color { top: 0px; left: 50%; width: 50%; height: 100%; }
+ .wcolpick_hex .wcolpick_submit { top: 276px; left: 239px; }
+
+ /*//// HEX LAYOUT - NO SUBMIT BUTTON ////*/
+ .wcolpick_hex_ns .wcolpick_new_color { width: 100%; }
+ .wcolpick_hex_ns .wcolpick_current_color, .wcolpick_hex_ns .wcolpick_submit { display: none; }
+
+ /*//// ALL SUB-LAYOUTS - NO ALPHA CHANNEL ////*/
+ /*full layout*/
+ .wcolpick_noalpha { height: 359px; }
+ .wcolpick_noalpha .wcolpick_field { width: 60px; }
+ .wcolpick_noalpha .wcolpick_hex_field { top: 322px; }
+ .wcolpick_noalpha .wcolpick_rgb_r { top: 244px; }
+ .wcolpick_noalpha .wcolpick_rgb_g { top: 244px; left: 144px; }
+ .wcolpick_noalpha .wcolpick_rgb_b { top: 244px; left: 211px; width: 59px; }
+ .wcolpick_noalpha .wcolpick_hsb_h { top: 284px; }
+ .wcolpick_noalpha .wcolpick_hsb_s { top: 284px; left: 144px; }
+ .wcolpick_noalpha .wcolpick_hsb_b { top: 284px; left: 211px; width: 59px; }
+ .wcolpick_noalpha .wcolpick_colors { top: 244px; }
+ .wcolpick_noalpha .wcolpick_submit { top: 321px; }
+ /*rgbhex layout*/
+ .wcolpick_rgbhex_noalpha { height: 321px; }
+ .wcolpick_rgbhex_noalpha .wcolpick_hex_field { top: 284px; width: 60px; }
+ .wcolpick_rgbhex_noalpha .wcolpick_submit { top: 283px; }
+ /*hex layout*/
+ .wcolpick_hex_noalpha { height: 281px; }
+ .wcolpick_hex_noalpha .wcolpick_hex_field { top: 244px; width: 60px; }
+ .wcolpick_hex_noalpha .wcolpick_submit { top: 243px; }
+}
+
+
+
+
+
+/* ////////////////////////////////////////
+ SMALL LAYOUTS
+////////////////////////////////////////*/
+
+
+/*////////// DEFAULT LAYOUTS //////////*/
+
+/*//// FULL LAYOUT ////*/
+/*Main container*/
+.wcolpickS { width: 394px; height: 202px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; }
+/*Color selector*/
+.wcolpickS .wcolpick_color { top: 4px; left: 4px; width: 160px; height: 160px; }
+.wcolpickS .wcolpick_color_overlay1 { width: 160px; height: 160px; }
+.wcolpickS .wcolpick_color_overlay2 { width: 160px; height: 160px; }
+/*Color selector indicator*/
+.wcolpickS .wcolpick_selector_outer { width: 12px; height: 12px; margin: -7px 0px 0px -7px; }
+.wcolpickS .wcolpick_selector_inner { width: 10px; height: 10px; }
+/*Hue bar*/
+.wcolpickS .wcolpick_hue { top: 4px; left: 177px; width: 15px; height: 160px; }
+/*Hue bar indicator*/
+.wcolpickS .wcolpick_hue_arrs { left: -6px; width: 27px; height: 5px; margin-top: -4px; }
+.wcolpickS .wcolpick_hue_larr { border-width: 4px 0px 4px 5px; }
+.wcolpickS .wcolpick_hue_rarr { border-width: 4px 5px 4px 0px; }
+/*Alpha bar*/
+.wcolpickS .wcolpick_alpha { top: 177px; left: 4px; width: 160px; height: 15px; }
+/*Alpha bar indicator*/
+.wcolpickS .wcolpick_alpha_arrs { top: -6px; left: 160px; width: 5px; height: 27px; margin-left: -4px; }
+.wcolpickS .wcolpick_alpha_darr { border-width: 5px 4px 0px 4px; }
+.wcolpickS .wcolpick_alpha_uarr { border-width: 0px 4px 5px 4px; }
+/*Fields*/
+.wcolpickS .wcolpick_field, .wcolpickS .wcolpick_hex_field { width: 52px; height: 20px; font-size: 8.5px; }
+.wcolpickS .wcolpick_hex_field { top: 83px; left: 336px; }
+.wcolpickS .wcolpick_rgb_r { top: 83px; left: 216px; }
+.wcolpickS .wcolpick_rgb_g { top: 113px; left: 216px; }
+.wcolpickS .wcolpick_rgb_b { top: 143px; left: 216px; }
+.wcolpickS .wcolpick_hsb_h { top: 83px; left: 276px; }
+.wcolpickS .wcolpick_hsb_s { top: 113px; left: 276px; }
+.wcolpickS .wcolpick_hsb_b { top: 143px; left: 276px; }
+.wcolpickS .wcolpick_alpha_field { top: 173px; left: 216px; }
+/*Fields' labels*/
+.wcolpickS .wcolpick_field_letter { min-width: 8px; max-width: 8px; height: 20px; line-height: 20px; }
+/*Fields' text inputs*/
+.wcolpickS .wcolpick_field input, .wcolpickS .wcolpick_hex_field input { right: 9px; height: 20px; line-height: 20px; font-size: 9px; }
+.wcolpickS .wcolpick_hex_field input { right: 2px; }
+/*Fields' up/down arrows*/
+.wcolpickS .wcolpick_field_arrs { width: 5px; height: 20px; }
+.wcolpickS .wcolpick_field_uarr { top: 2px; border-width: 0px 2px 3px 2px; }
+.wcolpickS .wcolpick_field_darr { bottom: 2px; border-width: 3px 2px 0px 2px; }
+/*New and Current color*/
+.wcolpickS .wcolpick_colors { top: 4px; left: 216px; width: 174px; height: 70px; }
+/*Submit button*/
+.wcolpickS .wcolpick_submit { top: 175px; left: 367px; width: 21px; height: 21px; }
+.wcolpickS .wcolpick_tear { width: 9px; height: 9px; }
+
+/*//// FULL LAYOUT - NO SUBMIT BUTTON ////*/
+.wcolpickS_full_ns .wcolpick_new_color { height: 100%; }
+.wcolpickS_full_ns .wcolpick_current_color, .wcolpickS_full_ns .wcolpick_submit { display: none; }
+
+/*//// RGBHEX LAYOUT ////*/
+.wcolpickS_rgbhex { width: 334px; }
+.wcolpickS_rgbhex .wcolpick_hex_field { left: 276px; }
+.wcolpickS_rgbhex .wcolpick_hsb_h, .wcolpickS_rgbhex .wcolpick_hsb_s, .wcolpickS_rgbhex .wcolpick_hsb_b { display: none; }
+.wcolpickS_rgbhex .wcolpick_colors { width: 114px; }
+.wcolpickS_rgbhex .wcolpick_submit { left: 307px; }
+
+/*//// RGBHEX LAYOUT - NO SUBMIT BUTTON ////*/
+.wcolpickS_rgbhex_ns .wcolpick_new_color { height: 100%; }
+.wcolpickS_rgbhex_ns .wcolpick_current_color, .wcolpickS_rgbhex_ns .wcolpick_submit { display: none; }
+
+/*//// HEX LAYOUT ////*/
+.wcolpickS_hex { width: 274px; }
+.wcolpickS_hex .wcolpick_hex_field { left: 216px; }
+.wcolpickS_hex .wcolpick_rgb_r, .wcolpickS_hex .wcolpick_rgb_g, .wcolpickS_hex .wcolpick_rgb_b, .wcolpickS_hex .wcolpick_hsb_h, .wcolpickS_hex .wcolpick_hsb_s, .wcolpickS_hex .wcolpick_hsb_b, .wcolpickS_hex .wcolpick_alpha_field { display: none; }
+.wcolpickS_hex .wcolpick_colors { width: 54px; }
+.wcolpickS_hex .wcolpick_submit { left: 231px; }
+
+/*//// HEX LAYOUT - NO SUBMIT BUTTON ////*/
+.wcolpickS_hex_ns .wcolpick_hex_field { top: 176px; }
+.wcolpickS_hex_ns .wcolpick_new_color { height: 100%; }
+.wcolpickS_hex_ns .wcolpick_current_color, .wcolpickS_hex_ns .wcolpick_submit { display: none; }
+
+/*//// ALL SUB-LAYOUTS - NO ALPHA CHANNEL ////*/
+/*full layout*/
+.wcolpickS_noalpha { height: 168px; }
+.wcolpickS_noalpha .wcolpick_alpha, .wcolpickS_noalpha .wcolpick_alpha_field { display: none; }
+.wcolpickS_noalpha .wcolpick_rgb_r, .wcolpickS_noalpha .wcolpick_hsb_h, .wcolpickS_noalpha .wcolpick_hex_field { top: 82px; }
+.wcolpickS_noalpha .wcolpick_rgb_g, .wcolpickS_noalpha .wcolpick_hsb_s { top: 112px; }
+.wcolpickS_noalpha .wcolpick_rgb_b, .wcolpickS_noalpha .wcolpick_hsb_b { top: 142px; }
+.wcolpickS_noalpha .wcolpick_submit { top: 141px; }
+/*hex layout - no submit button*/
+.wcolpickS_hex_noalpha_ns .wcolpick_hex_field { top: 142px; }
+
+
+/*////////// COMPACT LAYOUTS //////////*/
+
+/*//// FULL LAYOUT ////*/
+.wcolpickS_compact { width: 204px; height: 281px; }
+.wcolpickS_compact .wcolpick_field { width: 31px; }
+.wcolpickS_compact .wcolpick_hex_field { top: 256px; left: 3px; width: 51px; }
+.wcolpickS_compact .wcolpick_rgb_r { top: 204px; left: 59px; }
+.wcolpickS_compact .wcolpick_rgb_g { top: 204px; left: 95px; }
+.wcolpickS_compact .wcolpick_rgb_b { top: 204px; left: 131px; }
+.wcolpickS_compact .wcolpick_hsb_h { top: 230px; left: 59px; }
+.wcolpickS_compact .wcolpick_hsb_s { top: 230px; left: 95px; }
+.wcolpickS_compact .wcolpick_hsb_b { top: 230px; left: 131px; }
+.wcolpickS_compact .wcolpick_alpha_field { top: 204px; left: 167px; }
+.wcolpickS_compact .wcolpick_field input { right: 6.3px; }
+.wcolpickS_compact .wcolpick_hex_field input { right: 1px; }
+.wcolpickS_compact .wcolpick_colors { top: 204px; left: 4px; width: 51px; height: 48px; }
+.wcolpickS_compact .wcolpick_submit { top: 255px; left: 178px; }
+
+/*//// FULL LAYOUT - NO SUBMIT BUTTON ////*/
+.wcolpickS_compact_full_ns .wcolpick_current_color, .wcolpickS_compact_full_ns .wcolpick_submit { display: none; }
+
+/*//// RGBHEX LAYOUT ////*/
+.wcolpickS_compact_rgbhex { height: 256px; }
+.wcolpickS_compact_rgbhex .wcolpick_hex_field { top: 230px; left: 59px; }
+.wcolpickS_compact_rgbhex .wcolpick_hsb_h, .wcolpickS_compact_rgbhex .wcolpick_hsb_s, .wcolpickS_compact_rgbhex .wcolpick_hsb_b { display: none; }
+.wcolpickS_compact_rgbhex .wcolpick_submit { top: 230px; }
+
+/*//// RGBHEX LAYOUT - NO SUBMIT BUTTON ////*/
+.wcolpickS_compact_rgbhex_ns .wcolpick_current_color, .wcolpickS_compact_rgbhex_ns .wcolpick_submit { display: none; }
+
+/*//// HEX LAYOUT ////*/
+.wcolpickS_compact_hex { height: 230px; }
+.wcolpickS_compact_hex .wcolpick_hex_field { top: 204px; left: 68px; }
+.wcolpickS_compact_hex .wcolpick_rgb_r, .wcolpickS_compact_hex .wcolpick_rgb_g, .wcolpickS_compact_hex .wcolpick_rgb_b, .wcolpickS_compact_hex .wcolpick_hsb_h, .wcolpickS_compact_hex .wcolpick_hsb_s, .wcolpickS_compact_hex .wcolpick_hsb_b, .wcolpickS_compact_hex .wcolpick_alpha_field { display: none; }
+.wcolpickS_compact_hex .wcolpick_colors { width: 60px; height: 22px; }
+.wcolpickS_compact_hex .wcolpick_new_color { width: 50%; height: 100%; }
+.wcolpickS_compact_hex .wcolpick_current_color { top: 0; left: 50%; width: 50%; height: 100%; }
+.wcolpickS_compact_hex .wcolpick_submit { top: 204px; }
+
+/*//// HEX LAYOUT - NO SUBMIT BUTTON ////*/
+.wcolpickS_compact_hex_ns .wcolpick_new_color { width: 100%; }
+.wcolpickS_compact_hex_ns .wcolpick_current_color, .wcolpickS_compact_hex_ns .wcolpick_submit { display: none; }
+
+/*//// ALL SUB-LAYOUTS - NO ALPHA CHANNEL ////*/
+/*full layout*/
+.wcolpickS_compact_noalpha { height: 254px; }
+.wcolpickS_compact_noalpha .wcolpick_field { width: 43px; }
+.wcolpickS_compact_noalpha .wcolpick_hex_field { top: 229px; }
+.wcolpickS_compact_noalpha .wcolpick_rgb_r { top: 177px; }
+.wcolpickS_compact_noalpha .wcolpick_rgb_g { top: 177px; left: 107px; }
+.wcolpickS_compact_noalpha .wcolpick_rgb_b { top: 177px; left: 155px; }
+.wcolpickS_compact_noalpha .wcolpick_hsb_h { top: 203px; }
+.wcolpickS_compact_noalpha .wcolpick_hsb_s { top: 203px; left: 107px; }
+.wcolpickS_compact_noalpha .wcolpick_hsb_b { top: 203px; left: 155px; }
+.wcolpickS_compact_noalpha .wcolpick_colors { top: 177px; }
+.wcolpickS_compact_noalpha .wcolpick_submit { top: 228px; }
+/*rgbhex layout*/
+.wcolpickS_compact_rgbhex_noalpha { height: 229px; }
+.wcolpickS_compact_rgbhex_noalpha .wcolpick_hex_field { top: 203px; width: 43px; }
+.wcolpickS_compact_rgbhex_noalpha .wcolpick_submit { top: 203px; }
+/*hex layout*/
+.wcolpickS_compact_hex_noalpha { height: 203px; }
+.wcolpickS_compact_hex_noalpha .wcolpick_hex_field { top: 177px; width: 43px; }
+.wcolpickS_compact_hex_noalpha .wcolpick_submit { top: 177px; }
+
+
+/*////////// SMALL LAYOUTS - RESPONSIVE //////////*/
+
+@media screen and (max-width: 460px) {
+
+ /*//// FULL LAYOUT ////*/
+ .wcolpickS { width: 204px; height: 281px; }
+ .wcolpickS .wcolpick_field { width: 31px; }
+ .wcolpickS .wcolpick_hex_field { top: 256px; left: 3px; width: 51px; }
+ .wcolpickS .wcolpick_rgb_r { top: 204px; left: 59px; }
+ .wcolpickS .wcolpick_rgb_g { top: 204px; left: 95px; }
+ .wcolpickS .wcolpick_rgb_b { top: 204px; left: 131px; }
+ .wcolpickS .wcolpick_hsb_h { top: 230px; left: 59px; }
+ .wcolpickS .wcolpick_hsb_s { top: 230px; left: 95px; }
+ .wcolpickS .wcolpick_hsb_b { top: 230px; left: 131px; }
+ .wcolpickS .wcolpick_alpha_field { top: 204px; left: 167px; }
+ .wcolpickS .wcolpick_field input { right: 6.3px; }
+ .wcolpickS .wcolpick_hex_field input { right: 1px; }
+ .wcolpickS .wcolpick_colors { top: 204px; left: 4px; width: 51px; height: 48px; }
+ .wcolpickS .wcolpick_submit { top: 255px; left: 178px; }
+
+ /*//// FULL LAYOUT - NO SUBMIT BUTTON ////*/
+ .wcolpickS_full_ns .wcolpick_current_color, .wcolpickS_full_ns .wcolpick_submit { display: none; }
+
+ /*//// RGBHEX LAYOUT ////*/
+ .wcolpickS_rgbhex { height: 256px; }
+ .wcolpickS_rgbhex .wcolpick_hex_field { top: 230px; left: 59px; }
+ .wcolpickS_rgbhex .wcolpick_hsb_h, .wcolpickS_rgbhex .wcolpick_hsb_s, .wcolpickS_rgbhex .wcolpick_hsb_b { display: none; }
+ .wcolpickS_rgbhex .wcolpick_submit { top: 230px; }
+
+ /*//// RGBHEX LAYOUT - NO SUBMIT BUTTON ////*/
+ .wcolpickS_rgbhex_ns .wcolpick_current_color, .wcolpickS_rgbhex_ns .wcolpick_submit { display: none; }
+
+ /*//// HEX LAYOUT ////*/
+ .wcolpickS_hex { height: 230px; }
+ .wcolpickS_hex .wcolpick_hex_field { top: 204px; left: 68px; }
+ .wcolpickS_hex .wcolpick_rgb_r, .wcolpickS_hex .wcolpick_rgb_g, .wcolpickS_hex .wcolpick_rgb_b, .wcolpickS_hex .wcolpick_hsb_h, .wcolpickS_hex .wcolpick_hsb_s, .wcolpickS_hex .wcolpick_hsb_b, .wcolpickS_hex .wcolpick_alpha_field { display: none; }
+ .wcolpickS_hex .wcolpick_colors { width: 60px; height: 22px; }
+ .wcolpickS_hex .wcolpick_new_color { width: 50%; height: 100%; }
+ .wcolpickS_hex .wcolpick_current_color { top: 0px; left: 50%; width: 50%; height: 100%; }
+ .wcolpickS_hex .wcolpick_submit { top: 204px; }
+
+ /*//// HEX LAYOUT - NO SUBMIT BUTTON ////*/
+ .wcolpickS_hex_ns .wcolpick_new_color { width: 100%; }
+ .wcolpickS_hex_ns .wcolpick_current_color, .wcolpickS_hex_ns .wcolpick_submit { display: none; }
+
+ /*//// ALL SUB-LAYOUTS - NO ALPHA CHANNEL ////*/
+ /*full layout*/
+ .wcolpickS_noalpha { height: 254px; }
+ .wcolpickS_noalpha .wcolpick_field { width: 43px; }
+ .wcolpickS_noalpha .wcolpick_hex_field { top: 229px; }
+ .wcolpickS_noalpha .wcolpick_rgb_r { top: 177px; }
+ .wcolpickS_noalpha .wcolpick_rgb_g { top: 177px; left: 107px; }
+ .wcolpickS_noalpha .wcolpick_rgb_b { top: 177px; left: 155px; }
+ .wcolpickS_noalpha .wcolpick_hsb_h { top: 203px; }
+ .wcolpickS_noalpha .wcolpick_hsb_s { top: 203px; left: 107px; }
+ .wcolpickS_noalpha .wcolpick_hsb_b { top: 203px; left: 155px; }
+ .wcolpickS_noalpha .wcolpick_colors { top: 177px; }
+ .wcolpickS_noalpha .wcolpick_submit { top: 228px; }
+ /*rgbhex layout*/
+ .wcolpickS_rgbhex_noalpha { height: 229px; }
+ .wcolpickS_rgbhex_noalpha .wcolpick_hex_field { top: 203px; width: 43px; }
+ .wcolpickS_rgbhex_noalpha .wcolpick_submit { top: 203px; }
+ /*hex layout*/
+ .wcolpickS_hex_noalpha { height: 203px; }
+ .wcolpickS_hex_noalpha .wcolpick_hex_field { top: 177px; width: 43px; }
+ .wcolpickS_hex_noalpha .wcolpick_submit { top: 177px; }
+}
+
+
+
+
+
+/* ////////////////////////////////////////
+ EXTRA-LARGE LAYOUTS
+////////////////////////////////////////*/
+
+
+/*////////// DEFAULT LAYOUTS //////////*/
+
+/*//// FULL LAYOUT ////*/
+/*Main container*/
+.wcolpickXL { width: 725px; height: 363px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }
+/*Color selector*/
+.wcolpickXL .wcolpick_color { top: 7px; left: 7px; width: 300px; height: 300px; }
+.wcolpickXL .wcolpick_color_overlay1 { width: 300px; height: 300px; }
+.wcolpickXL .wcolpick_color_overlay2 { width: 300px; height: 300px; }
+/*Color selector indicator*/
+.wcolpickXL .wcolpick_selector_outer { width: 16px; height: 16px; margin: -9px 0px 0px -9px; }
+.wcolpickXL .wcolpick_selector_inner { width: 14px; height: 14px; }
+/*Hue bar*/
+.wcolpickXL .wcolpick_hue { top: 7px; left: 324px; width: 25px; height: 300px; }
+/*Hue bar indicator*/
+.wcolpickXL .wcolpick_hue_arrs { left: -8px; width: 41px; height: 7px; margin-top: -6px; }
+.wcolpickXL .wcolpick_hue_larr { border-width: 6px 0px 6px 7px; }
+.wcolpickXL .wcolpick_hue_rarr { border-width: 6px 7px 6px 0px; }
+/*Alpha bar*/
+.wcolpickXL .wcolpick_alpha { top: 324px; left: 7px; width: 300px; height: 25px; }
+/*Alpha bar indicator*/
+.wcolpickXL .wcolpick_alpha_arrs { top: -8px; left: 300px; width: 7px; height: 41px; margin-left: -6px; }
+.wcolpickXL .wcolpick_alpha_darr { border-width: 7px 6px 0px 6px; }
+.wcolpickXL .wcolpick_alpha_uarr { border-width: 0px 6px 7px 6px; }
+/*Fields*/
+.wcolpickXL .wcolpick_field, .wcolpickXL .wcolpick_hex_field { width: 100px; height: 40px; font-size: 15px; }
+.wcolpickXL .wcolpick_hex_field { top: 154px; left: 616px; }
+.wcolpickXL .wcolpick_rgb_r { top: 154px; left: 382px; }
+.wcolpickXL .wcolpick_rgb_g { top: 207px; left: 382px; }
+.wcolpickXL .wcolpick_rgb_b { top: 260px; left: 382px; }
+.wcolpickXL .wcolpick_hsb_h { top: 154px; left: 499px; }
+.wcolpickXL .wcolpick_hsb_s { top: 207px; left: 499px; }
+.wcolpickXL .wcolpick_hsb_b { top: 260px; left: 499px; }
+.wcolpickXL .wcolpick_alpha_field { top: 313px; left: 382px; }
+/*Fields' labels*/
+.wcolpickXL .wcolpick_field_letter { min-width: 15px; max-width: 15px; height: 40px; line-height: 40px; }
+/*Fields' text inputs*/
+.wcolpickXL .wcolpick_field input, .wcolpickXL .wcolpick_hex_field input { right: 20px; height: 40px; line-height: 40px; font-size: 15px; }
+.wcolpickXL .wcolpick_hex_field input { right: 4px; }
+/*Fields' up/down arrows*/
+.wcolpickXL .wcolpick_field_arrs { width: 9px; height: 40px; }
+.wcolpickXL .wcolpick_field_uarr { top: 5px; border-width: 0px 4px 4px 4px; }
+.wcolpickXL .wcolpick_field_darr { bottom: 5px; border-width: 4px 4px 0px 4px; }
+/*New and Current color*/
+.wcolpickXL .wcolpick_colors { top: 7px; left: 382px; width: 336px; height: 136px; }
+/*Submit button*/
+.wcolpickXL .wcolpick_submit { top: 314px; left: 676px; width: 40px; height: 40px; }
+.wcolpickXL .wcolpick_tear { width: 20px; height: 20px; }
+
+/*//// FULL LAYOUT - NO SUBMIT BUTTON ////*/
+.wcolpickXL_full_ns .wcolpick_new_color { height: 100%; }
+.wcolpickXL_full_ns .wcolpick_current_color, .wcolpickXL_full_ns .wcolpick_submit { display: none; }
+
+/*//// RGBHEX LAYOUT ////*/
+.wcolpickXL_rgbhex { width: 608px; }
+.wcolpickXL_rgbhex .wcolpick_hex_field { left: 499px; }
+.wcolpickXL_rgbhex .wcolpick_hsb_h, .wcolpickXL_rgbhex .wcolpick_hsb_s, .wcolpickXL_rgbhex .wcolpick_hsb_b { display: none; }
+.wcolpickXL_rgbhex .wcolpick_colors { width: 219px; }
+.wcolpickXL_rgbhex .wcolpick_submit { left: 559px; }
+
+/*//// RGBHEX LAYOUT - NO SUBMIT BUTTON ////*/
+.wcolpickXL_rgbhex_ns .wcolpick_new_color { height: 100%; }
+.wcolpickXL_rgbhex_ns .wcolpick_current_color, .wcolpickXL_rgbhex_ns .wcolpick_submit { display: none; }
+
+/*//// HEX LAYOUT ////*/
+.wcolpickXL_hex { width: 491px; }
+.wcolpickXL_hex .wcolpick_hex_field { left: 382px; }
+.wcolpickXL_hex .wcolpick_rgb_r, .wcolpickXL_hex .wcolpick_rgb_g, .wcolpickXL_hex .wcolpick_rgb_b, .wcolpickXL_hex .wcolpick_hsb_h, .wcolpickXL_hex .wcolpick_hsb_s, .wcolpickXL_hex .wcolpick_hsb_b, .wcolpickXL_hex .wcolpick_alpha_field { display: none; }
+.wcolpickXL_hex .wcolpick_colors { width: 102px; }
+.wcolpickXL_hex .wcolpick_submit { left: 412px; }
+
+/*//// HEX LAYOUT - NO SUBMIT BUTTON ////*/
+.wcolpickXL_hex_ns .wcolpick_hex_field { top: 313px; }
+.wcolpickXL_hex_ns .wcolpick_new_color { height: 100%; }
+.wcolpickXL_hex_ns .wcolpick_current_color, .wcolpickXL_hex_ns .wcolpick_submit { display: none; }
+
+/*//// ALL SUB-LAYOUTS - NO ALPHA CHANNEL ////*/
+/*full layout*/
+.wcolpickXL_noalpha { height: 314px; }
+.wcolpickXL_noalpha .wcolpick_alpha, .wcolpickXL_noalpha .wcolpick_alpha_field { display: none; }
+.wcolpickXL_noalpha .wcolpick_rgb_r, .wcolpickXL_noalpha .wcolpick_hsb_h, .wcolpickXL_noalpha .wcolpick_hex_field { top: 156px; }
+.wcolpickXL_noalpha .wcolpick_rgb_g, .wcolpickXL_noalpha .wcolpick_hsb_s { top: 210px; }
+.wcolpickXL_noalpha .wcolpick_rgb_b, .wcolpickXL_noalpha .wcolpick_hsb_b { top: 264px; }
+.wcolpickXL_noalpha .wcolpick_submit { top: 266px; }
+/*hex layout - no submit button*/
+.wcolpickXL_hex_noalpha_ns .wcolpick_hex_field { top: 264px; }
+
+
+/*////////// COMPACT LAYOUTS //////////*/
+
+/*//// FULL LAYOUT ////*/
+.wcolpickXL_compact { width: 365px; height: 516px; }
+.wcolpickXL_compact .wcolpick_field { width: 56px; }
+.wcolpickXL_compact .wcolpick_hex_field { top: 467px; left: 7px; width: 88px; }
+.wcolpickXL_compact .wcolpick_rgb_r { top: 365px; left: 105px; }
+.wcolpickXL_compact .wcolpick_rgb_g { top: 365px; left: 170px; }
+.wcolpickXL_compact .wcolpick_rgb_b { top: 365px; left: 235px; }
+.wcolpickXL_compact .wcolpick_hsb_h { top: 417px; left: 105px; }
+.wcolpickXL_compact .wcolpick_hsb_s { top: 417px; left: 170px; }
+.wcolpickXL_compact .wcolpick_hsb_b { top: 417px; left: 235px; }
+.wcolpickXL_compact .wcolpick_alpha_field { top: 365px; left: 300px; }
+.wcolpickXL_compact .wcolpick_field input { right: 12px; }
+.wcolpickXL_compact .wcolpick_hex_field input { right: 3px; }
+.wcolpickXL_compact .wcolpick_colors { top: 365px; left: 7px; width: 90px; height: 94px; }
+.wcolpickXL_compact .wcolpick_submit { top: 467px; left: 316px; }
+
+/*//// FULL LAYOUT - NO SUBMIT BUTTON ////*/
+.wcolpickXL_compact_full_ns .wcolpick_current_color, .wcolpickXL_compact_full_ns .wcolpick_submit { display: none; }
+
+/*//// RGBHEX LAYOUT ////*/
+.wcolpickXL_compact_rgbhex { height: 466px; }
+.wcolpickXL_compact_rgbhex .wcolpick_hex_field { top: 417px; left: 105px; }
+.wcolpickXL_compact_rgbhex .wcolpick_hsb_h, .wcolpickXL_compact_rgbhex .wcolpick_hsb_s, .wcolpickXL_compact_rgbhex .wcolpick_hsb_b { display: none; }
+.wcolpickXL_compact_rgbhex .wcolpick_submit { top: 417px; }
+
+/*//// RGBHEX LAYOUT - NO SUBMIT BUTTON ////*/
+.wcolpickXL_compact_rgbhex_ns .wcolpick_current_color, .wcolpickXL_compact_rgbhex_ns .wcolpick_submit { display: none; }
+
+/*//// HEX LAYOUT ////*/
+.wcolpickXL_compact_hex { height: 414px; }
+.wcolpickXL_compact_hex .wcolpick_hex_field { top: 365px; left: 135px; }
+.wcolpickXL_compact_hex .wcolpick_rgb_r, .wcolpickXL_compact_hex .wcolpick_rgb_g, .wcolpickXL_compact_hex .wcolpick_rgb_b, .wcolpickXL_compact_hex .wcolpick_hsb_h, .wcolpickXL_compact_hex .wcolpick_hsb_s, .wcolpickXL_compact_hex .wcolpick_hsb_b, .wcolpickXL_compact_hex .wcolpick_alpha_field { display: none; }
+.wcolpickXL_compact_hex .wcolpick_colors { width: 120px; height: 42px; }
+.wcolpickXL_compact_hex .wcolpick_new_color { width: 50%; height: 100%; }
+.wcolpickXL_compact_hex .wcolpick_current_color { top: 0; left: 50%; width: 50%; height: 100%; }
+.wcolpickXL_compact_hex .wcolpick_submit { top: 365px; }
+
+/*//// HEX LAYOUT - NO SUBMIT BUTTON ////*/
+.wcolpickXL_compact_hex_ns .wcolpick_new_color { width: 100%; }
+.wcolpickXL_compact_hex_ns .wcolpick_current_color, .wcolpickXL_compact_hex_ns .wcolpick_submit { display: none; }
+
+/*//// ALL SUB-LAYOUTS - NO ALPHA CHANNEL ////*/
+/*full layout*/
+.wcolpickXL_compact_noalpha { height: 475px; }
+.wcolpickXL_compact_noalpha .wcolpick_field { width: 78px; }
+.wcolpickXL_compact_noalpha .wcolpick_hex_field { top: 426px; }
+.wcolpickXL_compact_noalpha .wcolpick_rgb_r { top: 324px; }
+.wcolpickXL_compact_noalpha .wcolpick_rgb_g { top: 324px; left: 192px; }
+.wcolpickXL_compact_noalpha .wcolpick_rgb_b { top: 324px; left: 279px; width: 77px; }
+.wcolpickXL_compact_noalpha .wcolpick_hsb_h { top: 376px; }
+.wcolpickXL_compact_noalpha .wcolpick_hsb_s { top: 376px; left: 192px; }
+.wcolpickXL_compact_noalpha .wcolpick_hsb_b { top: 376px; left: 279px; width: 77px; }
+.wcolpickXL_compact_noalpha .wcolpick_colors { top: 324px; }
+.wcolpickXL_compact_noalpha .wcolpick_submit { top: 426px; }
+/*rgbhex layout*/
+.wcolpickXL_compact_rgbhex_noalpha { height: 425px; }
+.wcolpickXL_compact_rgbhex_noalpha .wcolpick_hex_field { top: 376px; width: 78px; }
+.wcolpickXL_compact_rgbhex_noalpha .wcolpick_submit { top: 376px; }
+/*hex layout*/
+.wcolpickXL_compact_hex_noalpha { height: 373px; }
+.wcolpickXL_compact_hex_noalpha .wcolpick_hex_field { top: 324px; width: 78px; }
+.wcolpickXL_compact_hex_noalpha .wcolpick_submit { top: 324px; }
+
+
+/*////////// EXTRA-LARGE LAYOUTS - RESPONSIVE //////////*/
+
+@media screen and (max-width: 840px) {
+
+ /*//// FULL LAYOUT ////*/
+ .wcolpickXL { width: 365px; height: 516px; }
+ .wcolpickXL .wcolpick_field { width: 56px; }
+ .wcolpickXL .wcolpick_hex_field { top: 467px; left: 7px; width: 88px; }
+ .wcolpickXL .wcolpick_rgb_r { top: 365px; left: 105px; }
+ .wcolpickXL .wcolpick_rgb_g { top: 365px; left: 170px; }
+ .wcolpickXL .wcolpick_rgb_b { top: 365px; left: 235px; }
+ .wcolpickXL .wcolpick_hsb_h { top: 417px; left: 105px; }
+ .wcolpickXL .wcolpick_hsb_s { top: 417px; left: 170px; }
+ .wcolpickXL .wcolpick_hsb_b { top: 417px; left: 235px; }
+ .wcolpickXL .wcolpick_alpha_field { top: 365px; left: 300px; }
+ .wcolpickXL .wcolpick_field input { right: 12px; }
+ .wcolpickXL .wcolpick_hex_field input { right: 3px; }
+ .wcolpickXL .wcolpick_colors { top: 365px; left: 7px; width: 90px; height: 94px; }
+ .wcolpickXL .wcolpick_submit { top: 467px; left: 316px; }
+
+ /*//// FULL LAYOUT - NO SUBMIT BUTTON ////*/
+ .wcolpickXL_full_ns .wcolpick_current_color, .wcolpickXL_full_ns .wcolpick_submit { display: none; }
+
+ /*//// RGBHEX LAYOUT ////*/
+ .wcolpickXL_rgbhex { height: 466px; }
+ .wcolpickXL_rgbhex .wcolpick_hex_field { top: 417px; left: 105px; }
+ .wcolpickXL_rgbhex .wcolpick_hsb_h, .wcolpickXL_rgbhex .wcolpick_hsb_s, .wcolpickXL_rgbhex .wcolpick_hsb_b { display: none; }
+ .wcolpickXL_rgbhex .wcolpick_submit { top: 417px; }
+
+ /*//// RGBHEX LAYOUT - NO SUBMIT BUTTON ////*/
+ .wcolpickXL_rgbhex_ns .wcolpick_current_color, .wcolpickXL_rgbhex_ns .wcolpick_submit { display: none; }
+
+ /*//// HEX LAYOUT ////*/
+ .wcolpickXL_hex { height: 414px; }
+ .wcolpickXL_hex .wcolpick_hex_field { top: 365px; left: 135px; }
+ .wcolpickXL_hex .wcolpick_rgb_r, .wcolpickXL_hex .wcolpick_rgb_g, .wcolpickXL_hex .wcolpick_rgb_b, .wcolpickXL_hex .wcolpick_hsb_h, .wcolpickXL_hex .wcolpick_hsb_s, .wcolpickXL_hex .wcolpick_hsb_b, .wcolpickXL_hex .wcolpick_alpha_field { display: none; }
+ .wcolpickXL_hex .wcolpick_colors { width: 120px; height: 42px; }
+ .wcolpickXL_hex .wcolpick_new_color { width: 50%; height: 100%; }
+ .wcolpickXL_hex .wcolpick_current_color { top: 0px; left: 50%; width: 50%; height: 100%; }
+ .wcolpickXL_hex .wcolpick_submit { top: 365px; }
+
+ /*//// HEX LAYOUT - NO SUBMIT BUTTON ////*/
+ .wcolpickXL_hex_ns .wcolpick_new_color { width: 100%; }
+ .wcolpickXL_hex_ns .wcolpick_current_color, .wcolpickXL_hex_ns .wcolpick_submit { display: none; }
+
+ /*//// ALL SUB-LAYOUTS - NO ALPHA CHANNEL ////*/
+ /*full layout*/
+ .wcolpickXL_noalpha { height: 475px; }
+ .wcolpickXL_noalpha .wcolpick_field { width: 78px; }
+ .wcolpickXL_noalpha .wcolpick_hex_field { top: 426px; }
+ .wcolpickXL_noalpha .wcolpick_rgb_r { top: 324px; }
+ .wcolpickXL_noalpha .wcolpick_rgb_g { top: 324px; left: 192px; }
+ .wcolpickXL_noalpha .wcolpick_rgb_b { top: 324px; left: 279px; width: 77px; }
+ .wcolpickXL_noalpha .wcolpick_hsb_h { top: 376px; }
+ .wcolpickXL_noalpha .wcolpick_hsb_s { top: 376px; left: 192px; }
+ .wcolpickXL_noalpha .wcolpick_hsb_b { top: 376px; left: 279px; width: 77px; }
+ .wcolpickXL_noalpha .wcolpick_colors { top: 324px; }
+ .wcolpickXL_noalpha .wcolpick_submit { top: 426px; }
+ /*rgbhex layout*/
+ .wcolpickXL_rgbhex_noalpha { height: 425px; }
+ .wcolpickXL_rgbhex_noalpha .wcolpick_hex_field { top: 376px; width: 78px; }
+ .wcolpickXL_rgbhex_noalpha .wcolpick_submit { top: 376px; }
+ /*hex layout*/
+ .wcolpickXL_hex_noalpha { height: 373px; }
+ .wcolpickXL_hex_noalpha .wcolpick_hex_field { top: 324px; width: 78px; }
+ .wcolpickXL_hex_noalpha .wcolpick_submit { top: 324px; }
+}
+
+
+
+
+
+/* ////////////////////////////////////////
+ COLOR SCHEMES
+////////////////////////////////////////*/
+
+
+/*////////// MAIN LIGHT COLOR SCHEME //////////*/
+
+/*Main container*/
+.wcolpick_light { background: transparent; border-color: transparent; }
+/*Color selector*/
+.wcolpick_light .wcolpick_color { outline-color: rgba(170, 170, 170, 0.5); }
+/*Hue bar*/
+.wcolpick_light .wcolpick_hue_underlay { outline-color: rgba(170, 170, 170, 0.5); }
+.wcolpick_light .wcolpick_hue_larr { border-left-color: black; }
+.wcolpick_light .wcolpick_hue_rarr { border-right-color: black; }
+/*Alpha bar*/
+.wcolpick_light .wcolpick_alpha_underlay { outline-color: rgba(170, 170, 170, 0.5); }
+.wcolpick_light .wcolpick_alpha_darr { border-top-color: black; }
+.wcolpick_light .wcolpick_alpha_uarr { border-bottom-color: black; }
+/*Fields*/
+.wcolpick_light .wcolpick_field, .wcolpick_light .wcolpick_hex_field { background: white; border-color: #bdbdbd; }
+.wcolpick_light .wcolpick_field_letter { background: #ededed; color: #777; }
+.wcolpick_light .wcolpick_field input, .wcolpick_light .wcolpick_hex_field input { background: transparent; color: #555; }
+.wcolpick_light .wcolpick_focus { border-color: #999; }
+.wcolpick_light .wcolpick_field_uarr { border-bottom-color: #999; }
+.wcolpick_light .wcolpick_field_darr { border-top-color: #999; }
+.wcolpick_light .wcolpick_changing .wcolpick_field_uarr { border-bottom-color: #0caf1a; }
+.wcolpick_light .wcolpick_changing .wcolpick_field_darr { border-top-color: #0caf1a; }
+/*New and Current color*/
+.wcolpick_light .wcolpick_colors_underlay { outline-color: rgba(170, 170, 170, 0.5); }
+/*Submit button*/
+.wcolpick_light .wcolpick_submit { background: white; border-color: #777; }
+.wcolpick_light .wcolpick_tear { background: #777; }
+/*Checkerboards*/
+.wcolpick_light .wcolpick_checkerboards { background-color: white; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 2'%3E%3Cpath fill='rgb(204,204,204)' fill-rule='evenodd' d='M0 0h1v1H0V0zm1 1h1v1H1V1z'/%3E%3C/svg%3E"); }
+
+
+/*////////// MAIN DARK COLOR SCHEME //////////*/
+
+/*Main container*/
+.wcolpick_dark { background: transparent; border-color: transparent; }
+/*Color selector*/
+.wcolpick_dark .wcolpick_color { outline-color: rgba(213, 213, 213, 0.5); }
+/*Hue bar*/
+.wcolpick_dark .wcolpick_hue_underlay { outline-color: rgba(213, 213, 213, 0.5); }
+.wcolpick_dark .wcolpick_hue_larr { border-left-color: white; }
+.wcolpick_dark .wcolpick_hue_rarr { border-right-color: white; }
+/*Alpha bar*/
+.wcolpick_dark .wcolpick_alpha_underlay { outline-color: rgba(213, 213, 213, 0.5); }
+.wcolpick_dark .wcolpick_alpha_darr { border-top-color: white; }
+.wcolpick_dark .wcolpick_alpha_uarr { border-bottom-color: white; }
+/*Fields*/
+.wcolpick_dark .wcolpick_field, .wcolpick_dark .wcolpick_hex_field { background: black; border-color: #d5d5d5; }
+.wcolpick_dark .wcolpick_field_letter { background: #d5d5d5; color: black; }
+.wcolpick_dark .wcolpick_field input, .wcolpick_dark .wcolpick_hex_field input { background: transparent; color: #d5d5d5; }
+.wcolpick_dark .wcolpick_focus { border-color: #adadad; }
+.wcolpick_dark .wcolpick_field_uarr { border-bottom-color: #d5d5d5; }
+.wcolpick_dark .wcolpick_field_darr { border-top-color: #d5d5d5; }
+.wcolpick_dark .wcolpick_changing .wcolpick_field_uarr { border-bottom-color: #0caf1a; }
+.wcolpick_dark .wcolpick_changing .wcolpick_field_darr { border-top-color: #0caf1a; }
+/*New and Current color*/
+.wcolpick_dark .wcolpick_colors_underlay { outline-color: rgba(213, 213, 213, 0.5); }
+/*Submit button*/
+.wcolpick_dark .wcolpick_submit { background: black; border-color: white; }
+.wcolpick_dark .wcolpick_tear { background: white; }
+/*Checkerboards*/
+.wcolpick_dark .wcolpick_checkerboards { background-color: #666; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 2'%3E%3Cpath fill='rgb(51,51,51)' fill-rule='evenodd' d='M0 0h1v1H0V0zm1 1h1v1H1V1z'/%3E%3C/svg%3E"); }
+
+
+/*////////// ALTERNATIVE COLOR SCHEMES //////////*/
+
+/*//// LIGHT FULL ////*/
+.wcolpick_light-full { background: white; border-color: #666; }
+
+/*//// DARK FULL ////*/
+.wcolpick_dark-full { background: black; border-color: white; }
+
+
+/*////////// CHANGE COLOR OF THE HUE'S AND THE ALPHA'S ARROWS, IF REQUESTED //////////*/
+
+/*Light color*/
+.wcolpick_lightArrs .wcolpick_hue_larr { border-left-color: white; }
+.wcolpick_lightArrs .wcolpick_hue_rarr { border-right-color: white; }
+.wcolpick_lightArrs .wcolpick_alpha_darr { border-top-color: white; }
+.wcolpick_lightArrs .wcolpick_alpha_uarr { border-bottom-color: white; }
+/*Dark color*/
+.wcolpick_darkArrs .wcolpick_hue_larr { border-left-color: black; }
+.wcolpick_darkArrs .wcolpick_hue_rarr { border-right-color: black; }
+.wcolpick_darkArrs .wcolpick_alpha_darr { border-top-color: black; }
+.wcolpick_darkArrs .wcolpick_alpha_uarr { border-bottom-color: black; }
+
+
+/*////////// CHANGE COLOR OF THE CHECKERBOARDS, IF REQUESTED //////////*/
+
+/*Light color*/
+.wcolpick_lightCheckerboards .wcolpick_checkerboards { background-color: white; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 2'%3E%3Cpath fill='rgb(204,204,204)' fill-rule='evenodd' d='M0 0h1v1H0V0zm1 1h1v1H1V1z'/%3E%3C/svg%3E"); }
+/*Dark color*/
+.wcolpick_darkCheckerboards .wcolpick_checkerboards { background-color: #666; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 2'%3E%3Cpath fill='rgb(51,51,51)' fill-rule='evenodd' d='M0 0h1v1H0V0zm1 1h1v1H1V1z'/%3E%3C/svg%3E"); }
+
+
+/*////////// CHANGE COLOR OF THE SUMBIT BUTTON, IF REQUESTED //////////*/
+
+/*Light color*/
+.wcolpick_lightSubmit .wcolpick_submit { border-color: white; }
+.wcolpick_lightSubmit .wcolpick_tear { background: white; }
+/*Dark color*/
+.wcolpick_darkSubmit .wcolpick_submit { border-color: #777; }
+.wcolpick_darkSubmit .wcolpick_tear { background: #777; }
+
+
+/*////////// HIDE OUTLINES, IF REQUESTED //////////*/
+
+.wcolpick_noCSOutline .wcolpick_color { outline-style: none; }
+.wcolpick_noHOutline .wcolpick_hue_underlay { outline-style: none; }
+.wcolpick_noAOutline .wcolpick_alpha_underlay { outline-style: none; }
+.wcolpick_noNCOutline .wcolpick_colors_underlay { outline-style: none; }
diff --git a/multicolor_backend_theme/static/src/wcolpick/wcolpick.js b/multicolor_backend_theme/static/src/wcolpick/wcolpick.js
new file mode 100644
index 000000000..7a9033989
--- /dev/null
+++ b/multicolor_backend_theme/static/src/wcolpick/wcolpick.js
@@ -0,0 +1,1028 @@
+/*
+Wcolpick - A Web Color Picker
+
+Copyright (C) 2017-2023 devpelux (Salvatore Peluso)
+Find me on github: https://github.com/devpelux
+Dual licensed under GPL v3 .0 and MIT licenses.
+(Based on Jose Vargas' Color Picker)
+
+Description, how to use, and examples: https://github.com/devpelux/wcolpick
+
+Last Edit: 2023/05/05 18:53
+*/
+
+
+(function ($) {
+ var wcolpick = function () {
+ var
+ tpl = '
+
+
+
+
+
+
+
+
+
+ 
+
+ 
+
+
+
+
+
+
+ Supports:
+
+
+ Community
+
+
+ Enterprise
+
+
+
+
+ Availability:
+
+
+ Odoo Online
+
+
+ Odoo.sh
+
+
+ On Premise
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+ Chameleon Multi Color Backend Theme +
+ +Choose your color by yourself!
+
+
+
+ 
+ Carefully Crafted
+
+
+ Carefully Crafted
+
+
+ Responsive Design
+
+
+ Responsive Design
+
+
+ Quality Checked
+
+
+ Quality Checked
+
+
+
+
+
+
+
+
+
+
+
+ Our Features
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ New Color Combination
+ + + + + + +
+
+
+
+
+
+
+
+
+
+ Full Screen View
+ + + + + + +
+
+
+
+
+
+
+
+
+ Stages are separated in view
+ + + + + + +
+
+
+
+
+
+
+
+
+ Clean Layout
+ + + + + + +
+
+
+
+
+
+
+
+
+ Buttons with new colors
+ + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+ Login Page
+
+
+
+ Expanded side bar
+
+
+
+ Minimized side bar
+
+
+
+ Tree view
+
+
+
+ Kanban view
+
+
+
+ Form view
+
+
+
+ Color picker
+
+
+
+ Control panel
+
+
+
+ Chat Box
+
+
+
+ Advanced Search
+
+
+
+ Only Administrator can create, update and
+ remove theme.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Our Services
+
+
+
+
+
+
+
+
+
+
+
+ #
R
G
B
H
S
B
A
+
+
+
+ ![]()
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ -
+