diff --git a/multicolor_backend_theme/README.rst b/multicolor_backend_theme/README.rst new file mode 100644 index 000000000..b8bc20804 --- /dev/null +++ b/multicolor_backend_theme/README.rst @@ -0,0 +1,50 @@ +.. image:: https://img.shields.io/badge/licence-LGPL--3-blue.svg + :target: http://www.gnu.org/licenses/lgpl-3.0-standalone.html + :alt: License: LGPL-3 + +Chameleon Multi color Backend Theme +=================================== +* Configurable multi color backend theme for Odoo 16,Only Admin can have the role to create, update, and removing the themes + +Installation +============ + - www.odoo.com/documentation/16.0/setup/install.html + - Install our custom addon + +License +------- +General Public License, Version 3 (LGPL v3). +(https://www.odoo.com/documentation/user/16.0/legal/licenses/licenses.html) + +Company +------- +* 'Cybrosys Techno Solutions '__ + +Credits +------- +* Developer: + Linto CT @ Cybrosys + Sanjith Rashin @ Cybrosys + V14 Dino @ Cybrosys + V15 Sigha Ck @ Cybrosys + V16 Sigha Ck @ Cybrosys + +Contacts +-------- +* Mail Contact : odoo@cybrosys.com + +Bug Tracker +----------- +Bugs are tracked on GitHub Issues. In case of trouble, please check there if your issue has already been reported. + +Maintainer +========== +.. image:: https://cybrosys.com/images/logo.png + :target: https://cybrosys.com +This module is maintained by Cybrosys Technologies. + +For support and more information, please visit https://www.cybrosys.com + +Further information +=================== +HTML Description: ``__ diff --git a/multicolor_backend_theme/__init__.py b/multicolor_backend_theme/__init__.py new file mode 100644 index 000000000..4d8a90f4e --- /dev/null +++ b/multicolor_backend_theme/__init__.py @@ -0,0 +1,23 @@ +# -*- coding: utf-8 -*- +############################################################################## +# +# Cybrosys Technologies Pvt. Ltd. +# +# Copyright (C) 2023-TODAY Cybrosys Technologies() +# Author: Cybrosys Techno Solutions() +# +# You can modify it under the terms of the GNU LESSER +# GENERAL PUBLIC LICENSE (LGPL v3), Version 3. +# +# This program is distributed in the hope that it will be useful, +# but WITHOUT ANY WARRANTY; without even the implied warranty of +# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +# GNU LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details. +# +# You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE +# (LGPL v3) along with this program. +# If not, see . +# +############################################################################## +from . import models +from . import controllers diff --git a/multicolor_backend_theme/__manifest__.py b/multicolor_backend_theme/__manifest__.py new file mode 100644 index 000000000..18731c622 --- /dev/null +++ b/multicolor_backend_theme/__manifest__.py @@ -0,0 +1,71 @@ +# -*- coding: utf-8 -*- +############################################################################## +# +# Cybrosys Technologies Pvt. Ltd. +# +# Copyright (C) 2023-TODAY Cybrosys Technologies() +# Author: Cybrosys Techno Solutions() +# +# You can modify it under the terms of the GNU LESSER +# GENERAL PUBLIC LICENSE (LGPL v3), Version 3. +# +# This program is distributed in the hope that it will be useful, +# but WITHOUT ANY WARRANTY; without even the implied warranty of +# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +# GNU LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details. +# +# You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE +# (LGPL v3) along with this program. +# If not, see . +# +############################################################################## +{ + "name": "Chameleon Multi Color Backend Theme", + "summary": "Configurable multi color backend theme for Odoo 16", + "version": "16.0.1.0.0", + "category": "Themes/Backend", + "website": "https://www.cybrosys.com", + "description": """ + Configurable multi color backend theme for Odoo 16, + Only Admin can have the role to create, update, and removing the themes. + """, + 'images': [ + 'static/description/banner.png', + 'static/description/theme_screenshot.png', + ], + 'author': 'Cybrosys Techno Solutions', + 'company': 'Cybrosys Techno Solutions', + 'maintainer': 'Cybrosys Techno Solutions', + "depends": [ + 'website', + 'portal', + 'mail' + ], + "data": [ + 'security/security_groups.xml', + 'security/ir.model.access.csv', + 'data/theme_data.xml', + 'views/login_templates.xml', + ], + "assets": { + 'web.assets_backend': [ + '/multicolor_backend_theme/static/src/xml/sidebar_menu_icon.xml', + '/multicolor_backend_theme/static/src/xml/systray_ext.xml', + '/multicolor_backend_theme/static/src/scss/theme_style_backend.scss', + '/multicolor_backend_theme/static/src/css/backend.css', + '/multicolor_backend_theme/static/src/wcolpick/wcolpick.css', + '/multicolor_backend_theme/static/src/js/sidebar_menu.js', + '/multicolor_backend_theme/static/src/wcolpick/wcolpick.js', + '/multicolor_backend_theme/static/src/js/systray_theme_menu.js', + '/multicolor_backend_theme/static/src/js/search_apps.js' + ], + 'web.assets_frontend': [ + '/multicolor_backend_theme/static/src/scss/theme_style.scss', + '/multicolor_backend_theme/static/src/js/login_page.js' + ], + }, + 'license': 'LGPL-3', + 'installable': True, + 'auto_install': False, + 'application': False, +} diff --git a/multicolor_backend_theme/controllers/__init__.py b/multicolor_backend_theme/controllers/__init__.py new file mode 100644 index 000000000..1b2dd3d53 --- /dev/null +++ b/multicolor_backend_theme/controllers/__init__.py @@ -0,0 +1,22 @@ +# -*- coding: utf-8 -*- +############################################################################## +# +# Cybrosys Technologies Pvt. Ltd. +# +# Copyright (C) 2023-TODAY Cybrosys Technologies() +# Author: Cybrosys Techno Solutions() +# +# You can modify it under the terms of the GNU LESSER +# GENERAL PUBLIC LICENSE (LGPL v3), Version 3. +# +# This program is distributed in the hope that it will be useful, +# but WITHOUT ANY WARRANTY; without even the implied warranty of +# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +# GNU LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details. +# +# You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE +# (LGPL v3) along with this program. +# If not, see . +# +############################################################################## +from . import main diff --git a/multicolor_backend_theme/controllers/main.py b/multicolor_backend_theme/controllers/main.py new file mode 100644 index 000000000..6629979c6 --- /dev/null +++ b/multicolor_backend_theme/controllers/main.py @@ -0,0 +1,42 @@ +# -*- coding: utf-8 -*- +############################################################################## +# +# Cybrosys Technologies Pvt. Ltd. +# +# Copyright (C) 2023-TODAY Cybrosys Technologies() +# Author: Cybrosys Techno Solutions() +# +# You can modify it under the terms of the GNU LESSER +# GENERAL PUBLIC LICENSE (LGPL v3), Version 3. +# +# This program is distributed in the hope that it will be useful, +# but WITHOUT ANY WARRANTY; without even the implied warranty of +# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +# GNU LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details. +# +# You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE +# (LGPL v3) along with this program. +# If not, see . +# +############################################################################## +import json + +from odoo import http +from odoo.http import request + + +class LoginPage(http.Controller): + """Controller for the login page. This controller provides methods for + retrieving the active theme's main color, view font color, and theme font + color and updating the theme of the login page. + """ + @http.route(['/active_theme'], auth='public', type='http') + def find_active_theme(self): + """find the active theme for updating theme of login page""" + active_theme = request.env['theme.config'].sudo().search_read( + domain=[('theme_active', '=', True)], + fields=['theme_main_color', + 'view_font_color', + 'theme_font_color']) + active_theme = active_theme[0] if active_theme else [] + return json.dumps(active_theme) diff --git a/multicolor_backend_theme/data/theme_data.xml b/multicolor_backend_theme/data/theme_data.xml new file mode 100644 index 000000000..b47d5c496 --- /dev/null +++ b/multicolor_backend_theme/data/theme_data.xml @@ -0,0 +1,26 @@ + + + + + Theme 1 + #6fb702 + #fff + #333 + true + + + Theme 2 + #404a5e + #fff + #404a5e + false + + + Theme 3 + #f39b12 + #000 + #333 + false + + + diff --git a/multicolor_backend_theme/doc/RELEASE_NOTES.md b/multicolor_backend_theme/doc/RELEASE_NOTES.md new file mode 100644 index 000000000..e545fc2a8 --- /dev/null +++ b/multicolor_backend_theme/doc/RELEASE_NOTES.md @@ -0,0 +1,6 @@ +## Module + +#### 05.05.2023 +#### Version 16.0.1.0.0 +#### ADD +- Initial Commit for Chameleon Multi color Backend Theme \ No newline at end of file diff --git a/multicolor_backend_theme/models/__init__.py b/multicolor_backend_theme/models/__init__.py new file mode 100644 index 000000000..705edd967 --- /dev/null +++ b/multicolor_backend_theme/models/__init__.py @@ -0,0 +1,22 @@ +# -*- coding: utf-8 -*- +############################################################################## +# +# Cybrosys Technologies Pvt. Ltd. +# +# Copyright (C) 2023-TODAY Cybrosys Technologies() +# Author: Cybrosys Techno Solutions() +# +# You can modify it under the terms of the GNU LESSER +# GENERAL PUBLIC LICENSE (LGPL v3), Version 3. +# +# This program is distributed in the hope that it will be useful, +# but WITHOUT ANY WARRANTY; without even the implied warranty of +# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +# GNU LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details. +# +# You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE +# (LGPL v3) along with this program. +# If not, see . +# +############################################################################## +from . import theme_config diff --git a/multicolor_backend_theme/models/theme_config.py b/multicolor_backend_theme/models/theme_config.py new file mode 100644 index 000000000..0e183a447 --- /dev/null +++ b/multicolor_backend_theme/models/theme_config.py @@ -0,0 +1,104 @@ +# -*- coding: utf-8 -*- +############################################################################## +# +# Cybrosys Technologies Pvt. Ltd. +# +# Copyright (C) 2023-TODAY Cybrosys Technologies() +# Author: Cybrosys Techno Solutions() +# +# You can modify it under the terms of the GNU LESSER +# GENERAL PUBLIC LICENSE (LGPL v3), Version 3. +# +# This program is distributed in the hope that it will be useful, +# but WITHOUT ANY WARRANTY; without even the implied warranty of +# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +# GNU LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details. +# +# You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE +# (LGPL v3) along with this program. +# If not, see . +# +############################################################################## +from odoo import api, fields, models + + +class ThemeConfig(models.Model): + """Model for storing configuration settings related to the theme""" + _name = 'theme.config' + _description = "Model for storing configuration settings related to the " \ + "theme" + + name = fields.Char(string="Name") + theme_main_color = fields.Char( + string="Theme main color", help="main theme color") + view_font_color = fields.Char( + string="View font color", help="backend font color") + theme_font_color = fields.Char( + string="Font color", help="backend view font color") + theme_active = fields.Boolean(string="Active") + + def write(self, vals_data): + """only one theme can be active at a time""" + if ('theme_active' in vals_data.keys() and + vals_data['theme_active']): + for theme_rec in self.search([]): + theme_rec.theme_active = False + res = super(ThemeConfig, self).write(vals_data) + return res + + @api.model + def create_new_theme(self): + """create a new theme""" + theme_data = self.theme_defaults() + theme_obj = self.create(theme_data) + theme_data = self.search_read([]) + return [theme_obj.id, theme_data] + + @api.model + def update_color(self, vals): + """update the color""" + vals_data = { + vals['key']: '#' + vals['value'] + } + self.browse(int(vals['theme_id'])).write(vals_data) + return + + @api.model + def find_active(self): + """find the active theme""" + active_theme = self.search_read([('theme_active', '=', True)]) + return active_theme[0] if active_theme else False + + @api.model + def update_active_theme(self, theme_id): + """update active theme """ + for theme_obj in self.search([]): + if theme_obj.theme_active and theme_obj.id != int(theme_id): + theme_obj.theme_active = False + elif not theme_obj.theme_active and theme_obj.id == int(theme_id): + theme_obj.theme_active = True + return + + @api.model + def check_for_removal(self, theme_id): + """removal of a theme""" + theme_rec = self.browse(int(theme_id)) + if not theme_rec: + return False + if not theme_rec.theme_active: + theme_rec.unlink() + theme_data = self.search_read([]) + return theme_data + + def theme_defaults(self): + """set default theme""" + cr = self._cr + cr.execute("select count(*) from theme_config") + max_id = cr.fetchone() + return { + 'name': 'Theme ' + str(max_id[0] + 1 if max_id else 1), + 'theme_main_color': '#6fb702', + 'view_font_color': '#333', + 'theme_font_color': '#fff', + 'theme_active': False, + } diff --git a/multicolor_backend_theme/security/ir.model.access.csv b/multicolor_backend_theme/security/ir.model.access.csv new file mode 100644 index 000000000..ba205e4b3 --- /dev/null +++ b/multicolor_backend_theme/security/ir.model.access.csv @@ -0,0 +1,3 @@ +id,name,model_id:id,group_id:id,perm_read,perm_write,perm_create,perm_unlink +access_themes_manager,themes_selection,model_theme_config,multicolor_theme_manager_access,1,1,1,1 +access_themes_user,themes_selection,model_theme_config,base.group_user,1,0,0,0 diff --git a/multicolor_backend_theme/security/security_groups.xml b/multicolor_backend_theme/security/security_groups.xml new file mode 100644 index 000000000..359043e5d --- /dev/null +++ b/multicolor_backend_theme/security/security_groups.xml @@ -0,0 +1,15 @@ + + + + + Multicolor Backend Theme + User access levels for Theme selection + 10 + + + Administrator + + + + + diff --git a/multicolor_backend_theme/static/description/assets/all_screens.png b/multicolor_backend_theme/static/description/assets/all_screens.png new file mode 100644 index 000000000..a56059ac3 Binary files /dev/null and b/multicolor_backend_theme/static/description/assets/all_screens.png differ diff --git a/multicolor_backend_theme/static/description/assets/banner.jpg b/multicolor_backend_theme/static/description/assets/banner.jpg new file mode 100644 index 000000000..1736ac3d2 Binary files /dev/null and b/multicolor_backend_theme/static/description/assets/banner.jpg differ diff --git a/multicolor_backend_theme/static/description/assets/hero.gif b/multicolor_backend_theme/static/description/assets/hero.gif new file mode 100644 index 000000000..ceb5a4f98 Binary files /dev/null and b/multicolor_backend_theme/static/description/assets/hero.gif differ diff --git a/multicolor_backend_theme/static/description/assets/icon.png b/multicolor_backend_theme/static/description/assets/icon.png new file mode 100644 index 000000000..6f7278309 Binary files /dev/null and b/multicolor_backend_theme/static/description/assets/icon.png differ diff --git a/multicolor_backend_theme/static/description/assets/icons/._.DS_Store b/multicolor_backend_theme/static/description/assets/icons/._.DS_Store new file mode 100644 index 000000000..9ad849cdb Binary files /dev/null and b/multicolor_backend_theme/static/description/assets/icons/._.DS_Store differ diff --git a/multicolor_backend_theme/static/description/assets/icons/._cogs.png b/multicolor_backend_theme/static/description/assets/icons/._cogs.png new file mode 100644 index 000000000..f7148d473 Binary files /dev/null and b/multicolor_backend_theme/static/description/assets/icons/._cogs.png differ diff --git a/multicolor_backend_theme/static/description/assets/icons/._consultation.png b/multicolor_backend_theme/static/description/assets/icons/._consultation.png new file mode 100644 index 000000000..aa8a531ac Binary files /dev/null and b/multicolor_backend_theme/static/description/assets/icons/._consultation.png differ diff --git a/multicolor_backend_theme/static/description/assets/icons/._ecom-black.png b/multicolor_backend_theme/static/description/assets/icons/._ecom-black.png new file mode 100644 index 000000000..ff71cac34 Binary files /dev/null and b/multicolor_backend_theme/static/description/assets/icons/._ecom-black.png differ diff --git a/multicolor_backend_theme/static/description/assets/icons/._education-black.png b/multicolor_backend_theme/static/description/assets/icons/._education-black.png new file mode 100644 index 000000000..038789127 Binary files /dev/null and b/multicolor_backend_theme/static/description/assets/icons/._education-black.png differ diff --git a/multicolor_backend_theme/static/description/assets/icons/._hotel-black.png b/multicolor_backend_theme/static/description/assets/icons/._hotel-black.png new file mode 100644 index 000000000..962af8bbc Binary files /dev/null and b/multicolor_backend_theme/static/description/assets/icons/._hotel-black.png differ diff --git a/multicolor_backend_theme/static/description/assets/icons/._license.png b/multicolor_backend_theme/static/description/assets/icons/._license.png new file mode 100644 index 000000000..26ba90fe5 Binary files /dev/null and b/multicolor_backend_theme/static/description/assets/icons/._license.png differ diff --git a/multicolor_backend_theme/static/description/assets/icons/._lifebuoy.png b/multicolor_backend_theme/static/description/assets/icons/._lifebuoy.png new file mode 100644 index 000000000..51bb6606d Binary files /dev/null and b/multicolor_backend_theme/static/description/assets/icons/._lifebuoy.png differ diff --git a/multicolor_backend_theme/static/description/assets/icons/._manufacturing-black.png b/multicolor_backend_theme/static/description/assets/icons/._manufacturing-black.png new file mode 100644 index 000000000..54bc914ea Binary files /dev/null and b/multicolor_backend_theme/static/description/assets/icons/._manufacturing-black.png differ diff --git a/multicolor_backend_theme/static/description/assets/icons/._pos-black.png b/multicolor_backend_theme/static/description/assets/icons/._pos-black.png new file mode 100644 index 000000000..a11f4cd96 Binary files /dev/null and b/multicolor_backend_theme/static/description/assets/icons/._pos-black.png differ diff --git a/multicolor_backend_theme/static/description/assets/icons/._puzzle.png b/multicolor_backend_theme/static/description/assets/icons/._puzzle.png new file mode 100644 index 000000000..f7e7e7e33 Binary files /dev/null and b/multicolor_backend_theme/static/description/assets/icons/._puzzle.png differ diff --git a/multicolor_backend_theme/static/description/assets/icons/._restaurant-black.png b/multicolor_backend_theme/static/description/assets/icons/._restaurant-black.png new file mode 100644 index 000000000..33ea178a3 Binary files /dev/null and b/multicolor_backend_theme/static/description/assets/icons/._restaurant-black.png differ diff --git a/multicolor_backend_theme/static/description/assets/icons/._service-black.png b/multicolor_backend_theme/static/description/assets/icons/._service-black.png new file mode 100644 index 000000000..0ec2cf2a5 Binary files /dev/null and b/multicolor_backend_theme/static/description/assets/icons/._service-black.png differ diff --git a/multicolor_backend_theme/static/description/assets/icons/._trading-black.png b/multicolor_backend_theme/static/description/assets/icons/._trading-black.png new file mode 100644 index 000000000..d6299d375 Binary files /dev/null and b/multicolor_backend_theme/static/description/assets/icons/._trading-black.png differ diff --git a/multicolor_backend_theme/static/description/assets/icons/._training.png b/multicolor_backend_theme/static/description/assets/icons/._training.png new file mode 100644 index 000000000..9bade5f8e Binary files /dev/null and b/multicolor_backend_theme/static/description/assets/icons/._training.png differ diff --git a/multicolor_backend_theme/static/description/assets/icons/._update.png b/multicolor_backend_theme/static/description/assets/icons/._update.png new file mode 100644 index 000000000..48784837e Binary files /dev/null and b/multicolor_backend_theme/static/description/assets/icons/._update.png differ diff --git a/multicolor_backend_theme/static/description/assets/icons/._user.png b/multicolor_backend_theme/static/description/assets/icons/._user.png new file mode 100644 index 000000000..d5b105ad2 Binary files /dev/null and b/multicolor_backend_theme/static/description/assets/icons/._user.png differ diff --git a/multicolor_backend_theme/static/description/assets/icons/._wrench.png b/multicolor_backend_theme/static/description/assets/icons/._wrench.png new file mode 100644 index 000000000..db48ce407 Binary files /dev/null and b/multicolor_backend_theme/static/description/assets/icons/._wrench.png differ diff --git a/multicolor_backend_theme/static/description/assets/icons/chevron.png b/multicolor_backend_theme/static/description/assets/icons/chevron.png new file mode 100644 index 000000000..2089293d6 Binary files /dev/null and b/multicolor_backend_theme/static/description/assets/icons/chevron.png differ diff --git a/multicolor_backend_theme/static/description/assets/icons/cogs.png b/multicolor_backend_theme/static/description/assets/icons/cogs.png new file mode 100644 index 000000000..95d0bad62 Binary files /dev/null and b/multicolor_backend_theme/static/description/assets/icons/cogs.png differ diff --git a/multicolor_backend_theme/static/description/assets/icons/consultation.png b/multicolor_backend_theme/static/description/assets/icons/consultation.png new file mode 100644 index 000000000..8319d4baa Binary files /dev/null and b/multicolor_backend_theme/static/description/assets/icons/consultation.png differ diff --git a/multicolor_backend_theme/static/description/assets/icons/design.png b/multicolor_backend_theme/static/description/assets/icons/design.png new file mode 100644 index 000000000..87c297bdb Binary files /dev/null and b/multicolor_backend_theme/static/description/assets/icons/design.png differ diff --git a/multicolor_backend_theme/static/description/assets/icons/ecom-black.png b/multicolor_backend_theme/static/description/assets/icons/ecom-black.png new file mode 100644 index 000000000..a9385ff13 Binary files /dev/null and b/multicolor_backend_theme/static/description/assets/icons/ecom-black.png differ diff --git a/multicolor_backend_theme/static/description/assets/icons/education-black.png b/multicolor_backend_theme/static/description/assets/icons/education-black.png new file mode 100644 index 000000000..3eb09b27b Binary files /dev/null and b/multicolor_backend_theme/static/description/assets/icons/education-black.png differ diff --git a/multicolor_backend_theme/static/description/assets/icons/feature-icons/._lifebuoy.png b/multicolor_backend_theme/static/description/assets/icons/feature-icons/._lifebuoy.png new file mode 100644 index 000000000..4f178d2ad Binary files /dev/null and b/multicolor_backend_theme/static/description/assets/icons/feature-icons/._lifebuoy.png differ diff --git a/multicolor_backend_theme/static/description/assets/icons/feature-icons/document.png b/multicolor_backend_theme/static/description/assets/icons/feature-icons/document.png new file mode 100644 index 000000000..4054e8480 Binary files /dev/null and b/multicolor_backend_theme/static/description/assets/icons/feature-icons/document.png differ diff --git a/multicolor_backend_theme/static/description/assets/icons/feature-icons/down.png b/multicolor_backend_theme/static/description/assets/icons/feature-icons/down.png new file mode 100644 index 000000000..65a94a23b Binary files /dev/null and b/multicolor_backend_theme/static/description/assets/icons/feature-icons/down.png differ diff --git a/multicolor_backend_theme/static/description/assets/icons/feature-icons/lifebuoy.png b/multicolor_backend_theme/static/description/assets/icons/feature-icons/lifebuoy.png new file mode 100644 index 000000000..658d56ccc Binary files /dev/null and b/multicolor_backend_theme/static/description/assets/icons/feature-icons/lifebuoy.png differ diff --git a/multicolor_backend_theme/static/description/assets/icons/hotel-black.png b/multicolor_backend_theme/static/description/assets/icons/hotel-black.png new file mode 100644 index 000000000..130f613be Binary files /dev/null and b/multicolor_backend_theme/static/description/assets/icons/hotel-black.png differ diff --git a/multicolor_backend_theme/static/description/assets/icons/license.png b/multicolor_backend_theme/static/description/assets/icons/license.png new file mode 100644 index 000000000..a5869797e Binary files /dev/null and b/multicolor_backend_theme/static/description/assets/icons/license.png differ diff --git a/multicolor_backend_theme/static/description/assets/icons/lifebuoy.png b/multicolor_backend_theme/static/description/assets/icons/lifebuoy.png new file mode 100644 index 000000000..658d56ccc Binary files /dev/null and b/multicolor_backend_theme/static/description/assets/icons/lifebuoy.png differ diff --git a/multicolor_backend_theme/static/description/assets/icons/manufacturing-black.png b/multicolor_backend_theme/static/description/assets/icons/manufacturing-black.png new file mode 100644 index 000000000..697eb0e9f Binary files /dev/null and b/multicolor_backend_theme/static/description/assets/icons/manufacturing-black.png differ diff --git a/multicolor_backend_theme/static/description/assets/icons/pos-black.png b/multicolor_backend_theme/static/description/assets/icons/pos-black.png new file mode 100644 index 000000000..97c0f90c1 Binary files /dev/null and b/multicolor_backend_theme/static/description/assets/icons/pos-black.png differ diff --git a/multicolor_backend_theme/static/description/assets/icons/puzzle.png b/multicolor_backend_theme/static/description/assets/icons/puzzle.png new file mode 100644 index 000000000..65cf854e7 Binary files /dev/null and b/multicolor_backend_theme/static/description/assets/icons/puzzle.png differ diff --git a/multicolor_backend_theme/static/description/assets/icons/quality.png b/multicolor_backend_theme/static/description/assets/icons/quality.png new file mode 100644 index 000000000..8f128c57f Binary files /dev/null and b/multicolor_backend_theme/static/description/assets/icons/quality.png differ diff --git a/multicolor_backend_theme/static/description/assets/icons/responsive.png b/multicolor_backend_theme/static/description/assets/icons/responsive.png new file mode 100644 index 000000000..aa7f437e3 Binary files /dev/null and b/multicolor_backend_theme/static/description/assets/icons/responsive.png differ diff --git a/multicolor_backend_theme/static/description/assets/icons/restaurant-black.png b/multicolor_backend_theme/static/description/assets/icons/restaurant-black.png new file mode 100644 index 000000000..4a35eb939 Binary files /dev/null and b/multicolor_backend_theme/static/description/assets/icons/restaurant-black.png differ diff --git a/multicolor_backend_theme/static/description/assets/icons/service-black.png b/multicolor_backend_theme/static/description/assets/icons/service-black.png new file mode 100644 index 000000000..301ab51cb Binary files /dev/null and b/multicolor_backend_theme/static/description/assets/icons/service-black.png differ diff --git a/multicolor_backend_theme/static/description/assets/icons/trading-black.png b/multicolor_backend_theme/static/description/assets/icons/trading-black.png new file mode 100644 index 000000000..9398ba2f1 Binary files /dev/null and b/multicolor_backend_theme/static/description/assets/icons/trading-black.png differ diff --git a/multicolor_backend_theme/static/description/assets/icons/training.png b/multicolor_backend_theme/static/description/assets/icons/training.png new file mode 100644 index 000000000..884ca024d Binary files /dev/null and b/multicolor_backend_theme/static/description/assets/icons/training.png differ diff --git a/multicolor_backend_theme/static/description/assets/icons/update.png b/multicolor_backend_theme/static/description/assets/icons/update.png new file mode 100644 index 000000000..ecbc5a01a Binary files /dev/null and b/multicolor_backend_theme/static/description/assets/icons/update.png differ diff --git a/multicolor_backend_theme/static/description/assets/icons/user.png b/multicolor_backend_theme/static/description/assets/icons/user.png new file mode 100644 index 000000000..6ffb23d9f Binary files /dev/null and b/multicolor_backend_theme/static/description/assets/icons/user.png differ diff --git a/multicolor_backend_theme/static/description/assets/icons/wrench.png b/multicolor_backend_theme/static/description/assets/icons/wrench.png new file mode 100644 index 000000000..6c04dea0f Binary files /dev/null and b/multicolor_backend_theme/static/description/assets/icons/wrench.png differ diff --git a/multicolor_backend_theme/static/description/assets/screenshots/access.png b/multicolor_backend_theme/static/description/assets/screenshots/access.png new file mode 100644 index 000000000..a9c0f3f82 Binary files /dev/null and b/multicolor_backend_theme/static/description/assets/screenshots/access.png differ diff --git a/multicolor_backend_theme/static/description/assets/screenshots/adv_search.png b/multicolor_backend_theme/static/description/assets/screenshots/adv_search.png new file mode 100644 index 000000000..3962238cc Binary files /dev/null and b/multicolor_backend_theme/static/description/assets/screenshots/adv_search.png differ diff --git a/multicolor_backend_theme/static/description/assets/screenshots/chameleon_1.png b/multicolor_backend_theme/static/description/assets/screenshots/chameleon_1.png new file mode 100644 index 000000000..e24ffd220 Binary files /dev/null and b/multicolor_backend_theme/static/description/assets/screenshots/chameleon_1.png differ diff --git a/multicolor_backend_theme/static/description/assets/screenshots/chameleon_2.png b/multicolor_backend_theme/static/description/assets/screenshots/chameleon_2.png new file mode 100644 index 000000000..478c31664 Binary files /dev/null and b/multicolor_backend_theme/static/description/assets/screenshots/chameleon_2.png differ diff --git a/multicolor_backend_theme/static/description/assets/screenshots/chatbot.png b/multicolor_backend_theme/static/description/assets/screenshots/chatbot.png new file mode 100644 index 000000000..b399c7409 Binary files /dev/null and b/multicolor_backend_theme/static/description/assets/screenshots/chatbot.png differ diff --git a/multicolor_backend_theme/static/description/assets/screenshots/color_picker.png b/multicolor_backend_theme/static/description/assets/screenshots/color_picker.png new file mode 100644 index 000000000..8c0d4d070 Binary files /dev/null and b/multicolor_backend_theme/static/description/assets/screenshots/color_picker.png differ diff --git a/multicolor_backend_theme/static/description/assets/screenshots/control_panel.png b/multicolor_backend_theme/static/description/assets/screenshots/control_panel.png new file mode 100644 index 000000000..cd284c531 Binary files /dev/null and b/multicolor_backend_theme/static/description/assets/screenshots/control_panel.png differ diff --git a/multicolor_backend_theme/static/description/assets/screenshots/exp_sidebar.png b/multicolor_backend_theme/static/description/assets/screenshots/exp_sidebar.png new file mode 100644 index 000000000..f3c02f9c1 Binary files /dev/null and b/multicolor_backend_theme/static/description/assets/screenshots/exp_sidebar.png differ diff --git a/multicolor_backend_theme/static/description/assets/screenshots/exp_sidebar1.png b/multicolor_backend_theme/static/description/assets/screenshots/exp_sidebar1.png new file mode 100644 index 000000000..b97039b8d Binary files /dev/null and b/multicolor_backend_theme/static/description/assets/screenshots/exp_sidebar1.png differ diff --git a/multicolor_backend_theme/static/description/assets/screenshots/form.png b/multicolor_backend_theme/static/description/assets/screenshots/form.png new file mode 100644 index 000000000..a188dadc2 Binary files /dev/null and b/multicolor_backend_theme/static/description/assets/screenshots/form.png differ diff --git a/multicolor_backend_theme/static/description/assets/screenshots/kanban.png b/multicolor_backend_theme/static/description/assets/screenshots/kanban.png new file mode 100644 index 000000000..0f14b77db Binary files /dev/null and b/multicolor_backend_theme/static/description/assets/screenshots/kanban.png differ diff --git a/multicolor_backend_theme/static/description/assets/screenshots/login1.png b/multicolor_backend_theme/static/description/assets/screenshots/login1.png new file mode 100644 index 000000000..ed6f2d596 Binary files /dev/null and b/multicolor_backend_theme/static/description/assets/screenshots/login1.png differ diff --git a/multicolor_backend_theme/static/description/assets/screenshots/min_sidebar.png b/multicolor_backend_theme/static/description/assets/screenshots/min_sidebar.png new file mode 100644 index 000000000..d1903e39e Binary files /dev/null and b/multicolor_backend_theme/static/description/assets/screenshots/min_sidebar.png differ diff --git a/multicolor_backend_theme/static/description/assets/screenshots/min_sidebar1.png b/multicolor_backend_theme/static/description/assets/screenshots/min_sidebar1.png new file mode 100644 index 000000000..ccc534733 Binary files /dev/null and b/multicolor_backend_theme/static/description/assets/screenshots/min_sidebar1.png differ diff --git a/multicolor_backend_theme/static/description/assets/screenshots/responsive_screenshot.png b/multicolor_backend_theme/static/description/assets/screenshots/responsive_screenshot.png new file mode 100644 index 000000000..4ed18d7aa Binary files /dev/null and b/multicolor_backend_theme/static/description/assets/screenshots/responsive_screenshot.png differ diff --git a/multicolor_backend_theme/static/description/assets/screenshots/tree.png b/multicolor_backend_theme/static/description/assets/screenshots/tree.png new file mode 100644 index 000000000..bb1353adf Binary files /dev/null and b/multicolor_backend_theme/static/description/assets/screenshots/tree.png differ diff --git a/multicolor_backend_theme/static/description/banner.png b/multicolor_backend_theme/static/description/banner.png new file mode 100644 index 000000000..109e6c472 Binary files /dev/null and b/multicolor_backend_theme/static/description/banner.png differ diff --git a/multicolor_backend_theme/static/description/icon.png b/multicolor_backend_theme/static/description/icon.png new file mode 100644 index 000000000..d715c0724 Binary files /dev/null and b/multicolor_backend_theme/static/description/icon.png differ diff --git a/multicolor_backend_theme/static/description/index.html b/multicolor_backend_theme/static/description/index.html new file mode 100644 index 000000000..79d141063 --- /dev/null +++ b/multicolor_backend_theme/static/description/index.html @@ -0,0 +1,680 @@ + +
+
+
+

+ Chameleon Backend theme +

+

+ Choose your color by yourself.

+
+
+ +
+
+
+ + + +
+
+
+

+ Enables a user friendly backend theme for Odoo 16.0 community + edition. +

+
+
+ +
+
+
+ + + +
+
+
+
+

+ Features

+
+
+ +
+
+
+
+ +
+
Carefully Crafted
+
+
+
+ +
+
Responsive Design
+
+
+
+ +
+
Quality Checked
+
+
+
+
+ + +
+
+
+
+
+
+ +

Modified Font

+
+
+ +

New Color Combination

+
+
+ +

Full Screen View

+
+
+
+
+ +

Stages are Seperated in View

+
+
+ +

Clean Layout

+
+ +
+ +

Buttons with New Colors

+
+
+
+
+
+
+
+
+ +
+
+
+
+

+ Screenshots

+
+
+
+
+
+
+
+ 1
+
+
Login Page
+
+
+
+ +
+
+
+
+
+
+
+ 2
+
+
Expanded side bar
+
+
+
+ +
+
+
+
+
+
+
+ 3
+
+
Minimized side bar
+
+
+
+ +
+
+
+
+
+
+
+ 4
+
+
Tree view
+
+
+
+ +
+
+
+
+
+
+
+ 5
+
+
Kanban view
+
+
+
+ +
+
+
+
+
+
+
+ 6
+
+
Form view
+
+
+
+ +
+
+
+
+
+
+
+ 7
+
+
Color picker
+
+
+
+ +
+
+
+
+
+
+
+ 8
+
+
Control panel +
+
+
+
+ +
+
+
+
+
+
+
+ 8
+
+
Chat Box +
+
+
+
+ +
+
+
+
+
+
+
+ 8
+
+
Advanced Search +
+
+
+
+ +
+
+
+
+
+
+
+ 8
+
+
Only Administrator can create, update and + remove theme. +
+
+
+
+ +
+
+
+
+
+
+
+ 8
+
+
Responsive
+
+
+
+ +
+
+
+ + + +
+
+
+
+

+ Our Services

+
+
+
+ +
+
+ Odoo + Customization
+
+
+
+ +
+
+ Odoo + Implementation
+
+
+
+ +
+
+ Odoo + Support
+
+
+
+ +
+
+ Hire + Odoo + Developer
+
+
+
+ +
+
+ Odoo + Integration
+
+
+
+ +
+
+ Odoo + Migration
+
+
+
+ +
+
+ Odoo + Consultancy
+
+
+
+ +
+
+ Odoo + Implementation
+
+
+
+ +
+
+ Odoo + Licensing Consultancy
+
+
+
+ + + +
+
+
+
+

+ Our Industries

+
+
+
+ +
+ Trading +
+

+ Easily + procure + and + sell your products

+
+
+
+
+ +
+ POS +
+

+ Easy + configuration + and convivial experience

+
+
+
+
+ +
+ Education +
+

+ A + platform for + educational management

+
+
+
+
+ +
+ Manufacturing +
+

+ Plan, + track and + schedule your operations

+
+
+
+
+ +
+ E-commerce & Website +
+

+ Mobile + friendly, + awe-inspiring product pages

+
+
+
+
+ +
+ Service Management +
+

+ Keep + track of + services and invoice

+
+
+
+
+ +
+ Restaurant +
+

+ Run + your bar or + restaurant methodically

+
+
+
+
+ +
+ Hotel Management +
+

+ An + all-inclusive + hotel management application

+
+
+
+
+ + + +
+
+
+
+

+ Need Help?

+
+
+ +
+
+
+
+ odoo@cybrosys.com +
+
+ WhatsApp +
+
+ cybrosystechnologies +
+
+
+
+ +
+ +
+
+ +
+ +
+ +
+
+ \ No newline at end of file diff --git a/multicolor_backend_theme/static/description/theme_screenshot.png b/multicolor_backend_theme/static/description/theme_screenshot.png new file mode 100644 index 000000000..109e6c472 Binary files /dev/null and b/multicolor_backend_theme/static/description/theme_screenshot.png 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..1a5898111 --- /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 + } 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..d7552860a --- /dev/null +++ b/multicolor_backend_theme/static/src/js/login_page.js @@ -0,0 +1,25 @@ +odoo.define('multicolor_backend_theme.LoginPage', function(require) { + "use strict"; + var publicWidget = require('web.public.widget'); + // change the theme of login page according to the active backend theme + publicWidget.registry.LoginPage = publicWidget.Widget.extend({ + selector: '.oe_login_buttons', + start: function() { + $.ajax({ + url: '/active_theme', + type: 'get', + }).then(function(result) { + var colors = JSON.parse(result); + $('.cybro-login-btn').css({ + 'background-color': colors.theme_main_color, + 'color': colors.theme_font_color + }); + $('.cybro-super-btn').css({ + 'color': colors.view_font_color + }); + }); + return this._super(...arguments); + }, + }); + return publicWidget.registry.LoginPage; +}); 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..bdec7e313 --- /dev/null +++ b/multicolor_backend_theme/static/src/js/search_apps.js @@ -0,0 +1,84 @@ +/** @odoo-module */ +import {NavBar} from "@web/webclient/navbar/navbar"; +import {registry} from "@web/core/registry"; +const {fuzzyLookup} = require('@web/core/utils/search'); +import {computeAppsAndMenuItems} from "@web/webclient/menus/menu_helpers"; +import core from 'web.core'; +const {onMounted} = owl; +import {patch} from 'web.utils'; + +// patch NavaBar for searching apps and contents by extending navbar +patch(NavBar.prototype, 'multicolor_backend_theme/static/src/js/search_apps.js', { + //-------------------------------------------------------------------------- + // Public + // For advance search bar feature, and this will enable a global search for apps and related content + //-------------------------------------------------------------------------- + /** + * @override + */ + setup() { + this._super(); + 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: function() { + 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: function() { + var query = this.$search_input.val(); + if (query === "") { + this.$search_container.removeClass("has-results"); + this.$app_menu.removeClass("o_hidden"); + this.$search_results.empty(); + return; + } + // 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)); + this.$search_results.html(core.qweb.render("multicolor_backend_theme.SearchResults", { + results: results, + widget: this, + })); + }, +}); 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..122baa1d6 --- /dev/null +++ b/multicolor_backend_theme/static/src/js/sidebar_menu.js @@ -0,0 +1,84 @@ +odoo.define('multicolor_backend_theme.sidebar', function (require) { + 'use strict'; + //sidebar toggle effect + $(document).on("click", "#closeSidebar", function(event){ + $("#closeSidebar").hide(); + $("#openSidebar").show(); + }); + $(document).on("click", "#openSidebar", function(event){ + $("#openSidebar").hide(); + $("#closeSidebar").show(); + }); + $(document).on("click", "#openSidebar", function(event){ + $("#sidebar_panel").css({'display':'block'}); + $(".o_action_manager").css({'margin-left': '320px','transition':'all .1s linear'}); + + //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"); + }); + $(document).on("click", "#closeSidebar", function(event){ + $("#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"); + + }); + + $(document).on("click", ".sidebar a", function(event){ + var menu = $(".sidebar a"); + var $this = $(this); + var id = $this.data("id"); + $("header").removeClass().addClass(id); + menu.removeClass("active"); + $this.addClass("active"); + + //sidebar close on menu-item click + $("#sidebar_panel").css({'display':'none'}); + $(".o_action_manager").css({'margin-left': '0px'}); + $("#closeSidebar").hide(); + $("#openSidebar").show(); + + //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"); + + //remove class in top_heading + var top_head = $(".top_heading"); + var top_head_id = top_head.data("id"); + $("div").removeClass(top_head_id); + top_head.removeClass("sidebar_margin"); + }); +}); diff --git a/multicolor_backend_theme/static/src/js/systray_theme_menu.js b/multicolor_backend_theme/static/src/js/systray_theme_menu.js new file mode 100644 index 000000000..c706b32da --- /dev/null +++ b/multicolor_backend_theme/static/src/js/systray_theme_menu.js @@ -0,0 +1,480 @@ +/** @odoo-module **/ +import SystrayMenu from 'web.SystrayMenu'; +import Widget from 'web.Widget'; +import Session from 'web.session'; +import {patch} from 'web.utils'; +import {Discuss} from "@mail/components/discuss/discuss"; +var core = require('web.core'); +var session = require('web.session'); +var QWeb = core.qweb; +var rpc = require('web.rpc'); +var ControlPanel = require('web.ControlPanel'); +var DropdownMenu = require('web.DropdownMenu'); +var FormRenderer = require('web.FormRenderer'); +var ListRenderer = require('web.ListRenderer'); +var KanbanRenderer = require('web.KanbanRenderer'); +var KanbanRecord = require('web.KanbanRecord'); +var AbstractController = require('web.AbstractController'); +var utils = require('web.utils'); +var selected_theme = {}; +var themes_to_update = {}; +var Temple = Widget.extend({ + name: 'activity_menu', + template: 'multicolor_backend_theme.systray.ThemeMenu', + events: { + 'click .themes_selector_button': '_onThemeSelectorClick', + 'change .theme_select': '_onThemeClick', + 'click .button-create': '_onThemeCreate', + 'click .button-remove': '_onThemeRemove', + 'click .button-apply': '_onThemeApply', + 'click .row.name i.fa-pencil': '_onNameEdit', + 'click .row.name i.fa-check': '_onNameSave', + 'change .row.name input#name': '_onNameSave', + 'keyup .row.name input#name': '_onNameChange', + 'click .color': '_colorPick' + }, + start: function() { + this._loadDefaults(); + this._apply_theme(); + return this._super(); + }, + init: function(parent) { + this.theme_data = {}; + this.selected_theme = {}; + this.themes_by_id = {}; + return this._super.apply(this, arguments); + }, + willStart: function() { + var self = this; + var get_them_data = rpc.query({ + model: 'theme.config', + method: 'search_read', + args: [] + }); + session.user_has_group('multicolor_backend_theme.multicolor_theme_manager_access').then(hasGroup => { + this.administrator = hasGroup; + }); + return $.when(get_them_data).then(function(theme_data) { + self.theme_data = theme_data; + for (var i in theme_data) { + if (theme_data[i].theme_active == true) { + self.selected_theme = theme_data[i]; + selected_theme = theme_data[i]; + } + self.themes_by_id[theme_data[i].id] = theme_data[i]; + } + if (!self.selected_theme) { + self.selected_theme = theme_data[0]; + } + }); + }, + //load default theme + _loadDefaults: function() { + var self = this; + var item_theme = '' + var theme = '' + if (self.themes_by_id[$('.theme_select').val()] != undefined) { + item_theme = self.themes_by_id[$('.theme_select').val()] + } + self.active_theme = item_theme + var color_el = [ + 'theme_main_color', + 'theme_font_color', + 'view_font_color' + ]; + for (var color in color_el) { + var el_color = self.selected_theme[color_el[color]]; + $('#' + color_el[color]).loads({ + layout: 'hex', + flat: false, + enableAlpha: false, + color: el_color, + onSubmit: function(ev) { + var el_id = $(ev.el).attr('id'); + $('#' + el_id).css('background-color', '#' + ev.hex); + $('#' + el_id).val("#" + ev.hex); + $('#' + el_id).hides(); + self._onchangeColor($(ev.el), ev.hex); + }, + + onLoaded: function(ev) { + $('.picker').css('color', 'green'); + }, + onChange: function(ev) { + var el_id = $(ev.el).attr('id'); + $('#' + el_id).setColor(ev.hex, false); + $('.picker').css('color', 'red'); + } + }); + } + return; + }, + //function to edit the name + _onNameEdit: function() { + $('.row.name #name').removeAttr('readonly'); + $('.row.name #name').css('background-color', 'rgb(238, 250, 239)'); + }, + //function for saving the name and theme + _onNameSave: function() { + var name_inp = $('.row.name input#name').val().trim(); + if (this.themes_by_id[$('.theme_select').val()].theme_active == true) { + this.selected_theme.name = name_inp; + } + this.themes_by_id[$('.theme_select').val()].name = name_inp; + rpc.query({ + model: 'theme.config', + method: 'write', + args: [ + parseInt($('.theme_select').val()), + { + 'name': name_inp + } + ] + }).then(function() { + $('.button-apply.fa-check').css('color', 'green'); + themes_to_update[$('.theme_select').val()] = true; + }); + $('.row.name #name').attr('readonly', 'readonly'); + $('.row.name #name').css('background-color', 'white'); + $('.row.name i').replaceWith( + "" + ); + $('option#' + $('.theme_select').val()).text(name_inp); + }, + _onNameChange: function() { + $('.button-apply.fa-check').css('color', 'red'); + delete themes_to_update[$('.theme_select').val()]; + var name_inp = $('.row.name input#name').val().trim(); + if (name_inp && (this.themes_by_id[$('.theme_select').val()].name != name_inp)) { + $('.row.name i').replaceWith( + "" + ); + } + }, + // click function for color select + _colorPick: function(){ + this._loadDefaults(); + }, + + // function for selecting theme from the selection + _onThemeSelectorClick: function() { + this._loadDefaults(); + $('.themes_selector').toggleClass('show'); + $('.row.name #name').attr('readonly', 'readonly'); + $('.row.name #name').css('background-color', 'white'); + }, + // function for customizing the color + _onchangeColor: function(element, data) { + var $apply = $('.button-apply.fa-check'); + var current_theme = this.themes_by_id[$('.theme_select').val()]; + if ('#' + data != current_theme[element.attr('id')]) { + $apply.css('color', 'red'); + current_theme[element.attr('id')] = '#' + data; + this.themes_by_id[current_theme.id][element.attr('id')] = '#' + data; + var el_id = element.attr('id'); + var vals = { + 'theme_id': current_theme.id, + 'key': el_id, + 'value': data + }; + rpc.query({ + model: 'theme.config', + method: 'update_color', + args: [vals] + }).then(function() { + $apply.css('color', 'green'); + }); + } + return; + }, + // theme change function + _onThemeClick: function() { + var $theme_el = QWeb.render( + 'multicolor_backend_theme.selected_theme', { + widget: { + selected_theme: this.themes_by_id[$('.theme_select').val()] + } + }); + $('div.theme_data').replaceWith($($theme_el)); + this._loadDefaults(); + if (themes_to_update[$('.theme_select').val()] == true) { + $('.button-apply.fa-check').css('color', 'green'); + } else { + $('.button-apply.fa-check').css('color', '#4c4c4c'); + } + }, + // create new theme + _onThemeCreate: function() { + var self = this; + rpc.query({ + model: 'theme.config', + method: 'create_new_theme' + }).then(function(result) { + self._updateThemeData(result[1]); + var theme_el = QWeb.render( + 'multicolor_backend_theme.selected_theme', { + widget: { + selected_theme: self.themes_by_id[result[0]] + } + }); + $('div.theme_data').replaceWith($(theme_el)); + + var opt_el = ""; + $('.theme_select').append($(opt_el)); + $('.theme_select').val(result[0]); + self._loadDefaults(); + }); + }, + // remove the theme from the inactive themes + _onThemeRemove: function() { + var self = this; + var curr_theme = $('.theme_select').val(); + var theme_rec = this.themes_by_id[curr_theme]; + if (theme_rec.theme_active == true) { + alert("You cannot delete an active theme.") + } else { + rpc.query({ + model: 'theme.config', + method: 'check_for_removal', + args: [curr_theme] + }).then(function(theme_data) { + if (theme_data) { + self._updateThemeData(theme_data); + var theme_el = QWeb.render( + 'multicolor_backend_theme.selected_theme', { + widget: self + }); + $('div.theme_data').replaceWith($(theme_el)); + $(".theme_select option[value='" + theme_rec.id + "']").remove(); + $(".theme_select").val(self.selected_theme.id); + self._loadDefaults(); + } + }); + } + }, + // apply the selected theme and make it active + _onThemeApply: function() { + var curr_theme_id = $('.theme_select').val(); + rpc.query({ + model: 'theme.config', + method: 'update_active_theme', + args: [curr_theme_id] + }).then(function() { + window.location.reload(); + }); + }, + //For updating the theme + _updateThemeData: function(theme_data) { + this.themes_by_id = {}; + this.theme_data = theme_data; + for (var theme in theme_data) { + this.themes_by_id[theme_data[theme].id] = theme_data[theme]; + } + return; + }, + // apply the selected theme + _apply_theme: function() { + if (this.selected_theme) { + document.documentElement.style.setProperty("--theme_main_color", this.selected_theme.theme_main_color); + document.documentElement.style.setProperty("--theme_font_color", this.selected_theme.theme_font_color); + document.documentElement.style.setProperty("--view_font_color", this.selected_theme.view_font_color); + $('.cybro-main-menu .input-group-text').css({ + 'background-color': this.selected_theme.theme_main_color, + 'border-color': this.selected_theme.theme_main_color, + 'color': this.selected_theme.theme_font_color, + }); + $('.o_loading').css({ + 'background-color': this.selected_theme.theme_main_color, + 'color': this.selected_theme.theme_font_color, + }); + $('.btn-primary').css({ + 'background-color': this.selected_theme.theme_main_color, + 'color': this.selected_theme.theme_font_color, + }); + } + }, +}); +patch(Discuss.prototype, 'multicolor_backend_theme/static/src/js/systray_theme_menu.js', { + _onDiscussItemClicked: function(ev) { + this._super(ev); + this.$('.o_mail_discuss_title_main').css({ + 'box-shadow': 'none', + }); + this.$('.o_mail_discuss_title_main.o_active').css({ + 'box-shadow': 'inset 3px 0 0 ' + selected_theme.theme_main_color, + }); + }, + _renderSidebar: function(options) { + var res = this._super(options); + res.find('.o_mail_discuss_title_main').css({ + 'box-shadow': 'none', + }); + res.find('.o_mail_discuss_title_main.o_active').css({ + 'box-shadow': 'inset 3px 0 0 ' + selected_theme.theme_main_color, + }); + return res; + }, +}); +// add the brush icon into systray +SystrayMenu.Items.push(Temple); +patch(ControlPanel.prototype, 'multicolor_backend_theme/static/src/js/systray_theme_menu.js', { + _update_search_view: function(searchview, isHidden, groupable, enableTimeRangeMenu) { + this._super(searchview, isHidden, groupable, enableTimeRangeMenu); + if (selected_theme) { + this.$('span.o_searchview_more').css({ + background: selected_theme.theme_main_color, + color: selected_theme.theme_font_color + }); + document.documentElement.style.setProperty("--theme_main_color", this.selected_theme.theme_main_color); + this.$('.o_searchview .o_searchview_facet .o_searchview_facet_label').css({ + 'background-color': selected_theme.theme_main_color + }); + this.$('.o_searchview .o_searchview_input_container .o_searchview_facet .o_searchview_facet_label').css({ + 'color': selected_theme.theme_font_color + }); + // button properties + this.$('.btn-primary').css({ + 'background-color': selected_theme.theme_main_color, + 'border-color': selected_theme.theme_main_color, + 'color': selected_theme.theme_font_color + }); + this.$('.btn-primary:hover').css({ + 'background-color': selected_theme.theme_main_color, + 'border-color': selected_theme.theme_main_color, + 'color': selected_theme.theme_font_color + }); + } + }, + update: function(status, options) { + this._super(status, options); + this.$('button.o_dropdown_toggler_btn.btn.btn-secondary.dropdown-toggle').css({ + 'background-color': selected_theme.theme_main_color, + 'border-color': selected_theme.theme_main_color, + 'color': selected_theme.theme_font_color + }); + }, + /** + * Private function that renders a breadcrumbs' li Jquery element + */ + _render_breadcrumbs_li: function(bc, index, length) { + var $bc = this._super(bc, index, length); + $bc.find('a').css({ + 'color': selected_theme.view_font_color + }); + return $bc; + } +}); +// apply theme colors in form view +FormRenderer.include({ + _renderTagSheet: function(node) { + var sheet = this._super(node); + sheet.find('.fa, .o_stat_value').css( + 'color', selected_theme.view_font_color); + return sheet; + }, + _renderHeaderButtons: function(node) { + var buttons_obj = this._super(node); + buttons_obj.find('.btn-primary').css({ + 'background-color': selected_theme.theme_main_color, + 'border-color': selected_theme.theme_main_color, + 'color': selected_theme.theme_font_color + }); + buttons_obj.find('.btn-primary:hover').css({ + 'background-color': selected_theme.theme_main_color, + 'border-color': selected_theme.theme_main_color, + 'color': selected_theme.theme_font_color + }); + return buttons_obj; + }, + _renderTagHeader: function(node) { + var statusbar_el = this._super(node); + statusbar_el.find('button.btn.o_arrow_button.btn-primary.disabled').css({ + 'color': selected_theme.view_font_color + }); + return statusbar_el; + }, + _renderTagForm: function(node) { + var $res = this._super(node); + $res.find('a').css( + 'color', selected_theme.view_font_color); + $res.find('.o_field_widget.o_field_many2one .o_external_button').css( + 'color', selected_theme.view_font_color); + $res.find('.btn-primary').css( + 'background-color', selected_theme.theme_main_color); + $res.find('.btn-primary').css( + 'color', selected_theme.theme_font_color); + return $res; + }, +}); +// apply changes in listview +ListRenderer.include({ + setRowMode: function(recordID, mode) { + var self = this; + return this._super(recordID, mode).then(function() { + self.$('.o_external_button').css('color', selected_theme.view_font_color); + }); + } +}); +// apply theme changes in kanban view +KanbanRenderer.include({ + _renderView: function() { + return this._super().then(function() { + $('.btn-primary').css('background-color', + selected_theme.theme_main_color); + $('.btn-primary').css('color', + selected_theme.theme_font_color); + }); + } +}); +KanbanRecord.include({ + _render: function() { + var self = this; + return this._super().then(function() { + self.$el.find('.o_kanban_image_fill_left.d-none.d-md-block').css({ + 'border': '2px solid ' + selected_theme.theme_main_color + }); + self.$el.find('.o_field_widget.badge.badge-primary').css({ + 'background': selected_theme.theme_main_color + }); + }); + } +}); +// change the theme of the dropdown menus according to the current theme +patch(DropdownMenu.prototype, 'multicolor_backend_theme/static/src/js/systray_theme_menu.js', { + _renderMenuItems: function() { + this._super(); + if (selected_theme) { + $('span.o_searchview_more').css({ + background: selected_theme.theme_main_color, + color: selected_theme.theme_font_color + }); + $('.o_searchview .o_searchview_facet .o_searchview_facet_label').css({ + 'background-color': selected_theme.theme_main_color + }); + $('.o_searchview .o_searchview_input_container .o_searchview_facet .o_searchview_facet_label').css({ + 'color': selected_theme.theme_font_color + }); + } + }, +}); +// change the theme of the onboarding panel according to the current theme +patch(AbstractController.prototype, 'multicolor_backend_theme/static/src/js/systray_theme_menu.js', { + _renderBanner: function() { + var self = this; + return this._super().then(function() { + if (selected_theme) { + self.$('.o_onboarding_wrap').css({ + 'background-color': selected_theme.theme_main_color + }); + var color_val = 'color:' + + selected_theme.theme_font_color + + ' !important;'; + self.$('.o_onboarding_wrap a,.o_onboarding_wrap p').attr( + 'style', color_val + ); + } + }); + }, +}); +return Temple; 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..91f091dbf --- /dev/null +++ b/multicolor_backend_theme/static/src/scss/theme_style_backend.scss @@ -0,0 +1,1781 @@ +@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; + ffont-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; + border: 1px solid #3e8df7; + border-bottom: 0; +} + +.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.col-md-10.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; + color: white; + font-size: 15px; + font-weight: 400; + line-height: 46px; + cursor: pointer; + background-color:var(--theme_main_color) !important; +} + +.o_mail_systray_item.o_no_notification > a { + opacity: 1; +} + +.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_ChatWindowHeader { + 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: 90vh; + 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.show { + display: block; + background: #fff; + position: absolute; + width: 350px; + z-index: 99; + box-shadow: 0 6px 12px -4px rgba(0, 0, 0, 0.25); + animation: show-navbar-dropdown .5s ease forwards; + pointer-events: auto; + opacity: 1; + border-radius: 3px; + color: #4c4c4c; + margin-top: 53px; + right: 25px; +} + +.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: 2rem 2.2rem; +} +.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%; +} +.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 .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; + border-bottom: 1px solid #ced4da; + 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-right: 1px solid #efefef; + 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 { + padding: .1rem .8rem; + background: #00bd00; + color: #fff !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: 67px; +} +.o_cp_top { + width: 100%; +} +.o_cp_bottom { + width: 100%; +} + +.o_main_navbar { + background-color:var(--theme_main_color) !important; + +} + +#sidebar_panel { + height: calc(100% - 0%); + position: fixed; + background-color: #fff; + display: none; + width: 264px !important; + overflow-y: scroll; + -ms-overflow-style: none; /* Hide scrollbar for IE and Edge */ + scrollbar-width: none; /* Hide scrollbar for Firefox */ + z-index: 999; +} +#sidebar_panel::-webkit-scrollbar { + display: none; /* Hide scrollbar for Chrome, Safari and Opera */ +} +.sidebar_panel .sidebar { + padding: 0; + white-space: normal; + padding-bottom: 20px; + padding-top: 5px; +} +.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; +} +.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); + padding-right: 5px; + padding-left: 5px; + overflow-y: scroll; + margin-left: 0px !important; + margin-right: 0px !important; +} +.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; +} +.search-container.form-row.align-items-center.m-auto.mb-5.col-12 { + margin-top: 27px !important; + margin-left: 12px !important; +} +.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_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; + } +} + 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 = '
#
R
G
B
H
S
B
A
', + defaults = { + alphaOutline: true, + appendToBody: false, + arrowsColor: 'default', + backgroundColor: 'default', + border: 1, + borderColor: 'default', + checkersColor: 'default', + color: {h:0, s:0, b:20, a:1}, + colorOutline: true, + colorScheme: 'light-full', + colorSelOutline: true, + compactLayout: false, + enableAlpha: true, + enableSubmit: true, + enableUpDown: true, + fieldsBackground: 'default', + flat: true, + hueOutline: true, + layout: 'full', + livePreview: true, + polyfill: false, + position: 'auto', + readonlyFields: false, + readonlyHexField: false, + showEvent: 'click', + submitBackground: 'default', + submitColor: 'default', + variant: 'standard', + onBeforeShow: function () {}, + onChange: function () {}, + onDestroy: function () {}, + onHide: function () {}, + onLoaded: function () {}, + onShow: function () {}, + onSubmit: function () {} + }, + //Fill the inputs of the plugin + fillRGBFields = function (rgba, cal) { + $(cal).data('wcolpick').fields + .eq(1).val(rgba.r).end() + .eq(2).val(rgba.g).end() + .eq(3).val(rgba.b).end() + }, + + fillHSBFields = function (hsba, cal) { + $(cal).data('wcolpick').fields + .eq(4).val(Math.round(hsba.h)).end() + .eq(5).val(Math.round(hsba.s)).end() + .eq(6).val(Math.round(hsba.b)).end(); + }, + fillAlphaField = function (hsba, cal) { + $(cal).data('wcolpick').fields.eq(7).val(Math.round(hsba.a*100)).end(); + }, + fillHexField = function (hex, cal) { + if ($(cal).data('wcolpick').enableAlpha) $(cal).data('wcolpick').fields.eq(0).val(hex); + else $(cal).data('wcolpick').fields.eq(0).val(hex.substring(0,6)); + }, + //Set selector's color and selector's indicator position + setSelectorPos = function (hsba, cal) { + $(cal).data('wcolpick').selectorIndic.css({ + left: Math.round($(cal).data('wcolpick').size * hsba.s/100), + top: Math.round($(cal).data('wcolpick').size * (100-hsba.b)/100) + }); + }, + setSelectorColor = function (hsba, cal) { + if (isInternetExplorer()) { //Compatibility with IE 6-9 + var rgba = hsbaToRgba({h: Math.round(hsba.h), s: 100, b: 100, a: 255}); + $(cal).data('wcolpick').selector.css('backgroundColor', 'rgb('+rgba.r+','+rgba.g+','+rgba.b+')'); + } else $(cal).data('wcolpick').selector.css('backgroundColor', 'hsl('+Math.round(hsba.h)+','+100+'%,'+50+'%)'); + }, + //Set hue's arrows position + setHuePos = function (hsba, cal) { + $(cal).data('wcolpick').hue.css('top', Math.round($(cal).data('wcolpick').size - $(cal).data('wcolpick').size * hsba.h/360)); + }, + //Set alpha bar color and alpha's arrows position + setAlphaPos = function (hsba, cal) { + if ($(cal).data('wcolpick').enableAlpha) $(cal).data('wcolpick').alpha.css('left', Math.round($(cal).data('wcolpick').size * hsba.a)); + }, + setAlphaColor = function (rgba, cal) { + if ($(cal).data('wcolpick').enableAlpha) { + if (isInternetExplorer()) { //Compatibility with IE 6-9 + var end = rgbaToHex(rgba).substring(0,6); + $(cal).data('wcolpick').alphaBar.attr('style','filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=0,endColorstr=#'+end+'); -ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=0,endColorstr=#'+end+')";'); + } else { + var begin = 'rgba('+rgba.r+','+rgba.g+','+rgba.b+',0)', end = 'rgba('+rgba.r+','+rgba.g+','+rgba.b+',1)'; + } $(cal).data('wcolpick').alphaBar.attr('style','background:-webkit-linear-gradient(left,'+begin+' 0%,'+end+' 100%); background:-moz-linear-gradient(left,'+begin+' 0%,'+end+' 100%); background:-ms-linear-gradient(left,'+begin+' 0%,'+end+' 100%); background:-o-linear-gradient(left,'+begin+' 0%,'+end+' 100%); background:linear-gradient(to right,'+begin+' 0%,'+end+' 100%);'); + } + }, + //Set current and new colors + setCurrentColor = function (rgba, cal) { + $(cal).data('wcolpick').currentColor.css('backgroundColor', 'rgba('+rgba.r+','+rgba.g+','+rgba.b+','+rgba.a+')'); + }, + setNewColor = function (rgba, cal) { + $(cal).data('wcolpick').newColor.css('backgroundColor', 'rgba('+rgba.r+','+rgba.g+','+rgba.b+','+rgba.a+')'); + }, + //Called when the new color is changed + change = function () { + var cal = $(this).parent().parent(), hsba, rgba, hex; + if (this.parentNode.className.indexOf('_alpha') > 0) { + hsba = { + h: cal.data('wcolpick').color.h, + s: cal.data('wcolpick').color.s, + b: cal.data('wcolpick').color.b, + a: fixAlpha(cal.data('wcolpick').fields.eq(7).val()/100) + }; + rgba = hsbaToRgba(hsba); + hex = rgbaToHex(rgba); + } else if (this.parentNode.className.indexOf('_hex') > 0) { + rgba = hexToRgba(adaptHex(cal.data('wcolpick').fields.eq(0).val(), cal)); + hsba = rgbaToHsba(rgba); + hex = rgbaToHex(rgba); + } else if (this.parentNode.className.indexOf('_hsb') > 0) { + hsba = fixHSBA({ + h: Math.round(cal.data('wcolpick').fields.eq(4).val()), + s: Math.round(cal.data('wcolpick').fields.eq(5).val()), + b: Math.round(cal.data('wcolpick').fields.eq(6).val()), + a: cal.data('wcolpick').color.a + }); + rgba = hsbaToRgba(hsba); + hex = rgbaToHex(rgba); + } else { + rgba = fixRGBA({ + r: Math.round(cal.data('wcolpick').fields.eq(1).val()), + g: Math.round(cal.data('wcolpick').fields.eq(2).val()), + b: Math.round(cal.data('wcolpick').fields.eq(3).val()), + a: cal.data('wcolpick').color.a + }); + hsba = rgbaToHsba(rgba); + hex = rgbaToHex(rgba); + } + //Store new color + cal.data('wcolpick').color = cloneHSBA(hsba, true); + //Show new color + setNewColor(rgba, cal.get(0)); + //Fill fields with new color + fillHSBFields(hsba, cal.get(0)); + fillAlphaField(hsba, cal.get(0)); + fillRGBFields(rgba, cal.get(0)); + fillHexField(hex, cal.get(0)); + //Setup other elements with new color + setSelectorPos(hsba, cal.get(0)); + setSelectorColor(hsba, cal.get(0)); + setHuePos(hsba, cal.get(0)); + setAlphaPos(hsba, cal.get(0)); + setAlphaColor(rgba, cal.get(0)); + //Fires onChange (bySetColor = false) + var hsla = hsbaToHsla(hsba); + cal.data('wcolpick').onChange.apply(cal.parent(), [{bySetColor:false, colorDiv:cal.get(0), el:cal.data('wcolpick').el, hex:hex.substring(0,6), hexa:hex, hsb:cloneHSBA(hsba, false), hsba:hsba, hsl:cloneHSLA(hsla, false), hsla:hsla, rgb:cloneRGBA(rgba, false), rgba:rgba}]); + }, + //Change style on blur and on focus of inputs + blur = function () { + $(this).parent().removeClass('wcolpick_focus'); + }, + focus = function () { + $(this).parent().parent().data('wcolpick').fields.parent().removeClass('wcolpick_focus'); + $(this).parent().addClass('wcolpick_focus'); + }, + //Increment/decrement arrows functions + downIncrement = function (ev) { + ev.preventDefault ? ev.preventDefault() : ev.returnValue = false; + var field = $(this).parent().find('input').focus(); + var current = { + el: $(this).parent().addClass('wcolpick_changing'), + max: this.parentNode.className.indexOf('_hsb_h') > 0 ? 360 : (this.parentNode.className.indexOf('_hsb') > 0 ? 100 : (this.parentNode.className.indexOf('_alpha') > 0 ? 100 : 255)), + y: ev.pageY, + field: field, + val: Math.round(field.val()), + preview: $(this).parent().parent().data('wcolpick').livePreview + }; + $(document).mouseup(current, upIncrement); + $(document).mousemove(current, moveIncrement); + }, + moveIncrement = function (ev) { + //livePreview = true: update colors | livePreview = false: update only field's value + ev.data.field.val(fixVal(Math.round(ev.data.val - ev.pageY + ev.data.y), 0, ev.data.max)); + if (ev.data.preview) change.apply(ev.data.field.get(0)); + return false; + }, + upIncrement = function (ev) { + //livePreview = true: do nothing | livePreview = false: update colors + if (!ev.data.preview) change.apply(ev.data.field.get(0)); + ev.data.el.removeClass('wcolpick_changing').find('input').focus(); + $(document).off('mouseup', upIncrement); + $(document).off('mousemove', moveIncrement); + return false; + }, + //Alpha slider functions + downAlpha = function (ev) { + ev.preventDefault ? ev.preventDefault() : ev.returnValue = false; + var current = { + cal: $(this).parent(), + x: $(this).offset().left, + preview: $(this).parent().data('wcolpick').livePreview + }; + $(document).on('mouseup touchend',current,upAlpha); + $(document).on('mousemove touchmove',current,moveAlpha); + //Update alpha value with selected value + var pageX = ((ev.type == 'touchstart') ? ev.originalEvent.changedTouches[0].pageX : ev.pageX); + change.apply( + current.cal.data('wcolpick').fields + .eq(7).val(Math.round(100 * fixVal(pageX - current.x, 0, current.cal.data('wcolpick').size) / current.cal.data('wcolpick').size)) + .get(0) + ); + return false; + }, + moveAlpha = function (ev) { + var pageX = ((ev.type == 'touchmove') ? ev.originalEvent.changedTouches[0].pageX : ev.pageX); + var alpha = Math.round(100 * fixVal(pageX - ev.data.x, 0, ev.data.cal.data('wcolpick').size) / ev.data.cal.data('wcolpick').size); + //livePreview = true: update colors | livePreview = false: update only position + if (ev.data.preview) change.apply(ev.data.cal.data('wcolpick').fields.eq(7).val(alpha).get(0)); + else setAlphaPos({a:alpha/100}, ev.data.cal.get(0)); + return false; + }, + upAlpha = function (ev) { + //livePreview = true: do nothing | livePreview = false: update colors + if (!ev.data.preview) { + var pageX = ((ev.type == 'touchend') ? ev.originalEvent.changedTouches[0].pageX : ev.pageX); + change.apply( + ev.data.cal.data('wcolpick').fields + .eq(7).val(Math.round(100 * fixVal(pageX - ev.data.x, 0, ev.data.cal.data('wcolpick').size) / ev.data.cal.data('wcolpick').size)) + .get(0) + ); + } + $(document).off('mouseup touchend',upAlpha); + $(document).off('mousemove touchmove',moveAlpha); + return false; + }, + //Hue slider functions + downHue = function (ev) { + ev.preventDefault ? ev.preventDefault() : ev.returnValue = false; + var current = { + cal: $(this).parent(), + y: $(this).offset().top, + preview: $(this).parent().data('wcolpick').livePreview + }; + $(document).on('mouseup touchend',current,upHue); + $(document).on('mousemove touchmove',current,moveHue); + //Update hue value with selected value + var pageY = ((ev.type == 'touchstart') ? ev.originalEvent.changedTouches[0].pageY : ev.pageY); + change.apply( + current.cal.data('wcolpick').fields + .eq(4).val(Math.round(360 * (current.cal.data('wcolpick').size - fixVal(pageY - current.y, 0, current.cal.data('wcolpick').size)) / current.cal.data('wcolpick').size)) + .get(0) + ); + return false; + }, + moveHue = function (ev) { + var pageY = ((ev.type == 'touchmove') ? ev.originalEvent.changedTouches[0].pageY : ev.pageY); + var hue = Math.round(360 * (ev.data.cal.data('wcolpick').size - fixVal(pageY - ev.data.y, 0, ev.data.cal.data('wcolpick').size)) / ev.data.cal.data('wcolpick').size); + //livePreview = true: update colors | livePreview = false: update only position + if (ev.data.preview) change.apply(ev.data.cal.data('wcolpick').fields.eq(4).val(hue).get(0)); + else setHuePos({h:hue}, ev.data.cal.get(0)); + return false; + }, + upHue = function (ev) { + //livePreview = true: do nothing | livePreview = false: update colors + if (!ev.data.preview) { + var pageY = ((ev.type == 'touchend') ? ev.originalEvent.changedTouches[0].pageY : ev.pageY); + change.apply( + ev.data.cal.data('wcolpick').fields + .eq(4).val(Math.round(360 * (ev.data.cal.data('wcolpick').size - fixVal(pageY - ev.data.y, 0, ev.data.cal.data('wcolpick').size)) / ev.data.cal.data('wcolpick').size)) + .get(0) + ); + } + $(document).off('mouseup touchend',upHue); + $(document).off('mousemove touchmove',moveHue); + return false; + }, + //Color selector functions + downSelector = function (ev) { + ev.preventDefault ? ev.preventDefault() : ev.returnValue = false; + var current = { + cal: $(this).parent(), + pos: $(this).offset(), + preview: $(this).parent().data('wcolpick').livePreview + }; + $(document).on('mouseup touchend',current,upSelector); + $(document).on('mousemove touchmove',current,moveSelector); + //Update saturation and brightness with selected values + var pageX, pageY; + if(ev.type == 'touchstart') {pageX = ev.originalEvent.changedTouches[0].pageX; pageY = ev.originalEvent.changedTouches[0].pageY;} else {pageX = ev.pageX; pageY = ev.pageY;} + change.apply( + current.cal.data('wcolpick').fields + .eq(6).val(Math.round(100 * (current.cal.data('wcolpick').size - fixVal(pageY - current.pos.top, 0, current.cal.data('wcolpick').size)) / current.cal.data('wcolpick').size)).end() + .eq(5).val(Math.round(100 * fixVal(pageX - current.pos.left, 0, current.cal.data('wcolpick').size) / current.cal.data('wcolpick').size)) + .get(0) + ); + return false; + }, + moveSelector = function (ev) { + var pageX, pageY; + if(ev.type == 'touchmove') {pageX = ev.originalEvent.changedTouches[0].pageX; pageY = ev.originalEvent.changedTouches[0].pageY;} else {pageX = ev.pageX; pageY = ev.pageY;} + var saturation = Math.round(100 * fixVal(pageX - ev.data.pos.left, 0, ev.data.cal.data('wcolpick').size) / ev.data.cal.data('wcolpick').size); + var brightness = Math.round(100 * (ev.data.cal.data('wcolpick').size - fixVal(pageY - ev.data.pos.top, 0, ev.data.cal.data('wcolpick').size)) / ev.data.cal.data('wcolpick').size); + //livePreview = true: update colors | livePreview = false: update only position + if (ev.data.preview) change.apply(ev.data.cal.data('wcolpick').fields.eq(6).val(brightness).end().eq(5).val(saturation).get(0)); + else setSelectorPos({s:saturation, b:brightness}, ev.data.cal.get(0)); + return false; + }, + upSelector = function (ev) { + //livePreview = true: do nothing | livePreview = false: update colors + if (!ev.data.preview) { + var pageX, pageY; + if(ev.type == 'touchend') {pageX = ev.originalEvent.changedTouches[0].pageX; pageY = ev.originalEvent.changedTouches[0].pageY; } else { pageX = ev.pageX; pageY = ev.pageY;} + change.apply( + ev.data.cal.data('wcolpick').fields + .eq(6).val(Math.round(100 * (ev.data.cal.data('wcolpick').size - fixVal(pageY - ev.data.pos.top, 0, ev.data.cal.data('wcolpick').size)) / ev.data.cal.data('wcolpick').size)).end() + .eq(5).val(Math.round(100 * fixVal(pageX - ev.data.pos.left, 0, ev.data.cal.data('wcolpick').size) / ev.data.cal.data('wcolpick').size)) + .get(0) + ); + } + $(document).off('mouseup touchend',upSelector); + $(document).off('mousemove touchmove',moveSelector); + return false; + }, + //Change values of the fields with up/down keys + keyDownFields = function(ev) { + if ($(this).parent().parent().data('wcolpick').enableUpDown) { + //Not triggered for hexadecimal field (there is no standard to define an order among the colors) + if (this.parentNode.className.indexOf('_hex_field') == -1) { + if (ev.which == 38 || ev.which == 40) { + ev.preventDefault(); + //Get the value from the selected element + var value = $(this).val(); + if (ev.which == 38) value++; //Up + else value--; //Down + //Set the new value and apply changes + change.apply($(this).val(value).get(0)); + } + } + } + }, + //Submit button + clickSubmit = function () { + var cal = $(this).parent(); + var hsba = cloneHSBA(cal.data('wcolpick').color, true); + var rgba = hsbaToRgba(hsba); + var hex = rgbaToHex(rgba); + cal.data('wcolpick').origColor = cloneHSBA(hsba, true); + setCurrentColor(rgba, cal.get(0)); + //Fires onSubmit + var hsla = hsbaToHsla(hsba); + cal.data('wcolpick').onSubmit({colorDiv:cal.get(0), el:cal.data('wcolpick').el, hex:hex.substring(0,6), hexa:hex, hsb:cloneHSBA(hsba, false), hsba:hsba, hsl:cloneHSLA(hsla, false), hsla:hsla, rgb:cloneRGBA(rgba, false), rgba:rgba}); + }, + //Restore original color by clicking on current color + restoreOriginal = function () { + var cal = $(this).parent().parent(); + var hsba = cloneHSBA(cal.data('wcolpick').origColor, true); + var rgba = hsbaToRgba(hsba); + var hex = rgbaToHex(rgba); + cal.data('wcolpick').color = cloneHSBA(hsba, true); + //Reapplies current color to all elements + fillHexField(hex, cal.get(0)); + fillRGBFields(rgba, cal.get(0)); + fillHSBFields(hsba, cal.get(0)); + fillAlphaField(hsba, cal.get(0)); + setSelectorPos(hsba, cal.get(0)); + setSelectorColor(hsba, cal.get(0)); + setHuePos(hsba, cal.get(0)); + setAlphaPos(hsba, cal.get(0)); + setAlphaColor(rgba, cal.get(0)); + setNewColor(rgba, cal.get(0)); + //Fires onChange (bySetColor = false) + var hsla = hsbaToHsla(hsba); + cal.data('wcolpick').onChange.apply(cal.parent(), [{bySetColor:false, colorDiv:cal.get(0), el:cal.data('wcolpick').el, hex:hex.substring(0,6), hexa:hex, hsb:cloneHSBA(hsba, false), hsba:hsba, hsl:cloneHSLA(hsla, false), hsla:hsla, rgb:cloneRGBA(rgba, false), rgba:rgba}]); + }, + //Fix alpha value, if the user enters a wrong value + fixAlpha = function (alpha) { + return fixVal(isNaN(alpha) ? 1 : alpha, 0, 1); + }, + //Remove alpha from hexadecimal, if alpha channel is disabled + adaptHex = function (hex, cal) { + if (hex === undefined) hex = '000000ff'; + if (!cal.data('wcolpick').enableAlpha) { + hex = removeAlpha(hex); + } + return hex; + }, + //Remove alpha value from hexadecimals/objects + removeAlpha = function (col) { + if (col !== undefined) { + if (typeof col === 'string') { + if (col.indexOf('#') != 0) { + if (col.length == 4) col = col.substring(0,3); + if (col.length == 8) col = col.substring(0,6); + } else { + if (col.length == 5) col = col.substring(0,4); + if (col.length == 9) col = col.substring(0,7); + } + } else if (col.a !== undefined) col.a = 1; + } + return col; + }, + //Clone color objects + cloneRGBA = function (rgba, withAlpha) { + if (rgba === undefined) return {r:0, g:0, b:0, a:1}; + if (withAlpha) { + if (rgba.a === undefined) return {r:rgba.r, g:rgba.g, b:rgba.b, a:1}; + else return {r:rgba.r, g:rgba.g, b:rgba.b, a:rgba.a}; + } else return {r:rgba.r, g:rgba.g, b:rgba.b}; + }, + cloneHSBA = function (hsba, withAlpha) { + if (hsba === undefined) return {h:0, s:0, b:0, a:1}; + if (withAlpha) { + if (hsba.a === undefined) return {h:hsba.h, s:hsba.s, b:hsba.b, a:1}; + else return {h:hsba.h, s:hsba.s, b:hsba.b, a:hsba.a}; + } else return {h:hsba.h, s:hsba.s, b:hsba.b}; + }, + cloneHSLA = function (hsla, withAlpha) { + if (hsla === undefined) return {h:0, s:0, l:0, a:1}; + if (withAlpha) { + if (hsla.a === undefined) return {h:hsla.h, s:hsla.s, l:hsla.l, a:1}; + else return {h:hsla.h, s:hsla.s, l:hsla.l, a:hsla.a}; + } else return {h:hsla.h, s:hsla.s, l:hsla.l}; + }, + //Compare color objects + compareHSBA = function (hsba1, hsba2) { + if (hsba1 === undefined || hsba2 === undefined) return false; + return (hsba1.h == hsba2.h && hsba1.s == hsba2.s && hsba1.b == hsba2.b && hsba1.a == hsba2.a); + }, + //Shows/hides the color picker + show = function (ev) { + //Prevent the trigger of any direct parent + if (ev) ev.stopPropagation(); + //cal is the color picker (dom object) + var cal = $('#' + $(this).data('wcolpickId')), overridePos = {}; + //Trying to access to a property (e.g. color) and, if is generated an error, abort! + try {var temp = cal.data('wcolpick').color;} + catch (e) {return this;} + //Polyfill fixes + if (ev && !cal.data('wcolpick').polyfill) ev.preventDefault(); + //Fires onBeforeShow + cal.data('wcolpick').onBeforeShow.apply(this, [{colorDiv:cal.get(0), el:cal.data('wcolpick').el, overridePos:overridePos}]); + //If flat is true, simply shows the color picker! + if (cal.data('wcolpick').flat) { + //Fires onShow + if (!(cal.data('wcolpick').onShow.apply(this, [{colorDiv:cal.get(0), el:cal.data('wcolpick').el}]) != false)) return this; + //Shows the picker and terminates + cal.show(); + return; + } + //Positions the color picker... + if (overridePos.left === undefined || isNaN(overridePos.left) || overridePos.top === undefined || isNaN(overridePos.top)) { + //Calculates the correctly position + var finalPos = {top:0, left:0}, pos = cal.data('wcolpick').appendedToBody ? $(this).offset() : $(this).position(); + if (cal.data('wcolpick').position == 'center') { //... on center of viewport + //Positions the color picker on top-left corner of viewport + finalPos.top = pos.top - ($(this).offset().top - $(window).scrollTop()); + finalPos.left = pos.left - ($(this).offset().left - $(window).scrollLeft()); + //Positions the color picker on center of viewport by adding coordinates + var centerViewport = {top:$(window).height()/2, left:$(window).width()/2}; + finalPos.top += centerViewport.top - cal.outerHeight()/2; + finalPos.left += centerViewport.left - cal.outerWidth()/2; + } else { //... automatically (default) + //Positions the color picker under his related html object + finalPos.top = pos.top + this.offsetHeight; + finalPos.left = pos.left; + //Fixes, if the color picker is showing outside of viewport + if (outOfViewportHeight(cal, $(this), this) && $(this).offset().top - $(window).scrollTop() >= cal.outerHeight()) { + finalPos.top -= (cal.outerHeight() + this.offsetHeight); + } + if (outOfViewportWidth(cal, $(this))) { + if ($(this).offset().left - $(window).scrollLeft() + this.offsetWidth >= cal.outerWidth()) { + finalPos.left -= (cal.outerWidth() - this.offsetWidth); + } else { + var leftMargin = $(this).offset().left - $(window).scrollLeft(); + var outWidth = leftMargin + cal.outerWidth() - $(window).width(); + if (leftMargin > outWidth) { finalPos.left -= outWidth; } else { finalPos.left -= leftMargin; } + } + } + } + //Applies the result + cal.css({top: finalPos.top + 'px', left: finalPos.left + 'px'}); + } else { + //Applies the user-defined position + cal.css({top: overridePos.top + 'px', left: overridePos.left + 'px'}); + } + //Fires onShow + if (!(cal.data('wcolpick').onShow.apply(this, [{colorDiv:cal.get(0), el:cal.data('wcolpick').el}]) != false)) return this; + //Shows the picker + cal.show(); + //Hides when user clicks outside + $('html').mousedown({cal:cal}, hide); + cal.mousedown(function(ev){ev.stopPropagation();}) + }, + hide = function (ev) { + var cal = $('#' + $(this).data('wcolpickId')); + if (ev) cal = ev.data.cal; + //Trying to access to a property (e.g. color) and, if is generated an error, abort! + try {var temp = cal.data('wcolpick').color;} + catch (e) {return this;} + //Fires onHide + if (!(cal.data('wcolpick').onHide.apply(this, [{colorDiv:cal.get(0), el:cal.data('wcolpick').el}]) != false)) return this; + //Hides the picker + cal.hide(); + $('html').off('mousedown', hide); + }, + //Detect if the color picker is out of viewport + outOfViewportHeight = function (cal, wrapEl, domEl) { + var calViewTop = wrapEl.offset().top - $(window).scrollTop() + domEl.offsetHeight; //Top of the color picker in viewport + var calHeight = cal.outerHeight(); //Height of the color picker + var viewHeight = $(window).height(); //Viewport height + return (calViewTop + calHeight > viewHeight); + }, + outOfViewportWidth = function (cal, wrapEl) { + var calViewLeft = wrapEl.offset().left - $(window).scrollLeft(); //Left of the color picker in viewport + var calWidth = cal.outerWidth(); //Width of the color picker + var viewWidth = $(window).width(); //Viewport width + return (calViewLeft + calWidth > viewWidth); + }, + //Destroys the color picker + destroy = function (ev) { + var cal = $('#' + $(this).data('wcolpickId')); + if (ev) cal = ev.data.cal; + //Fires onDestroy + if (!(cal.data('wcolpick').onDestroy.apply(this, [{colorDiv:cal.get(0), el:cal.data('wcolpick').el}]) != false)) return this; + //Destroys the picker + cal.remove(); + //Prevent firing of hide event on a destroyed object! //bySetColor + $('html').off('mousedown', hide); + }, + //Generate a random unique id + getUniqueID = (function () { + var cnt = Math.round(Math.random() * 10000); + return function () { + cnt += 1; + return cnt; + }; + })(), + //Used to detect if the browser in use is Microsoft Internet Explorer + isInternetExplorer = function () { + var isIE = (navigator.appName === 'Microsoft Internet Explorer'); + if (!isIE) return false; + var UA = navigator.userAgent.toLowerCase(); + var IEver = parseFloat(UA.match( /msie ([0-9]{1,}[\.0-9]{0,})/ )[1]); + var ngIE = (isIE && IEver < 10); + return ngIE; + }; + return { + init: function (opt) { + opt = $.extend({}, defaults, opt||{}); + //Set color + if (typeof opt.color === 'string') opt.color = hexToHsba(opt.color); + else if (opt.color.r !== undefined && opt.color.g !== undefined && opt.color.b !== undefined) opt.color = rgbaToHsba(fixRGBA(opt.color)); + else if (opt.color.h !== undefined && opt.color.s !== undefined && opt.color.b !== undefined) opt.color = fixHSBA(opt.color); + else if (opt.color.h !== undefined && opt.color.s !== undefined && opt.color.l !== undefined) opt.color = hslaToHsba(fixHSLA(opt.color)); + else opt.color = {h:0, s:0, b:0, a:1}; //Black = Error color + //Normalizes string options + opt.arrowsColor = opt.arrowsColor.toLowerCase(); + opt.checkersColor = opt.checkersColor.toLowerCase(); + opt.colorScheme = opt.colorScheme.toLowerCase(); + opt.layout = opt.layout.toLowerCase(); + opt.position = opt.position.toLowerCase(); + opt.showEvent = opt.showEvent.toLowerCase(); + opt.submitColor = opt.submitColor.toLowerCase(); + opt.variant = opt.variant.toLowerCase(); + if (typeof opt.fieldsBackground === 'string') opt.fieldsBackground = opt.fieldsBackground.toLowerCase(); + if (typeof opt.submitBackground === 'string') opt.submitBackground = opt.submitBackground.toLowerCase(); + //For each selected DOM element + return this.each(function () { + //If the element does not have an ID + if (!$(this).data('wcolpickId')) { + var options = $.extend({}, opt); + //Fixes color if alpha is disabled + if (!opt.enableAlpha) opt.color = removeAlpha(opt.color); + //Setup current color + options.origColor = cloneHSBA(opt.color, true); + // Set polyfill + if (typeof opt.polyfill == 'function') options.polyfill = opt.polyfill(this); + //Input field operations + options.input = $(this).is('input'); + //Polyfill fixes + if (options.polyfill && options.input && this.type === 'color') return; + //Generate and assign a random ID + var id = 'colorpicker_' + getUniqueID(); + $(this).data('wcolpickId', id); + //Set the tpl's ID and get the HTML + var cal = $(tpl).attr('id', id); + //Setup size of the selected variant (Add other "else-if" for other future variants) + if (options.variant == 'small') options.size = 160; //Small Version! + else if (options.variant == 'extra-large') options.size = 300; //Extra Large Version! + else options.size = 225; //Standard Version (default)! + //Loading the choosen layout + if (options.variant == 'small') { //Add class according to layout (small) + cal.addClass('wcolpickS wcolpickS_'+options.layout+(options.enableSubmit?'':' wcolpickS_'+options.layout+'_ns')); + if(!options.enableAlpha) cal.addClass('wcolpickS_noalpha wcolpickS_'+options.layout+'_noalpha'+(options.enableSubmit?'':' wcolpickS_'+options.layout+'_noalpha_ns')); //Disable alpha channel, if requested + } else if (options.variant == 'extra-large') { //Add class according to layout (extra-large) + cal.addClass('wcolpickXL wcolpickXL_'+options.layout+(options.enableSubmit?'':' wcolpickXL_'+options.layout+'_ns')); + if(!options.enableAlpha) cal.addClass('wcolpickXL_noalpha wcolpickXL_'+options.layout+'_noalpha'+(options.enableSubmit?'':' wcolpickXL_'+options.layout+'_noalpha_ns')); //Disable alpha channel, if requested + } else { //Add class according to layout (default -> standard) + cal.addClass('wcolpick_'+options.layout+(options.enableSubmit?'':' wcolpick_'+options.layout+'_ns')); + if(!options.enableAlpha) cal.addClass('wcolpick_noalpha wcolpick_'+options.layout+'_noalpha'+(options.enableSubmit?'':' wcolpick_'+options.layout+'_noalpha_ns')); //Disable alpha channel, if requested + } + //Loading Compact layout, if requested + if (options.compactLayout) { + if (options.variant == 'small') { //Add class according to layout (small) + cal.addClass('wcolpickS_compact wcolpickS_compact_'+options.layout+(options.enableSubmit?'':' wcolpickS_compact_'+options.layout+'_ns')); + if(!options.enableAlpha) cal.addClass('wcolpickS_compact_noalpha wcolpickS_compact_'+options.layout+'_noalpha'+(options.enableSubmit?'':' wcolpickS_compact_'+options.layout+'_noalpha_ns')); //Disable alpha channel, if requested + } else if (options.variant == 'extra-large') { //Add class according to layout (extra-large) + cal.addClass('wcolpickXL_compact wcolpickXL_compact_'+options.layout+(options.enableSubmit?'':' wcolpickXL_compact_'+options.layout+'_ns')); + if(!options.enableAlpha) cal.addClass('wcolpickXL_compact_noalpha wcolpickXL_compact_'+options.layout+'_noalpha'+(options.enableSubmit?'':' wcolpickXL_compact_'+options.layout+'_noalpha_ns')); //Disable alpha channel, if requested + } else { //Add class according to layout (default -> standard) + cal.addClass('wcolpick_compact wcolpick_compact_'+options.layout+(options.enableSubmit?'':' wcolpick_compact_'+options.layout+'_ns')); + if(!options.enableAlpha) cal.addClass('wcolpick_compact_noalpha wcolpick_compact_'+options.layout+'_noalpha'+(options.enableSubmit?'':' wcolpick_compact_'+options.layout+'_noalpha_ns')); //Disable alpha channel, if requested + } + } + //Loading the choosen color scheme + if (options.colorScheme.indexOf('light') == 0) { //All light color schemes start with "light" + cal.addClass('wcolpick_light'); //Loading default light color scheme + if(options.colorScheme != 'light') cal.addClass('wcolpick_'+options.colorScheme); //Loading light-based color scheme + //INFO: You can implement light-based color schemes, in css, naming them: light-[name] (IMPORTANT: Use only lowercase names!) + } else if (options.colorScheme.indexOf('dark') == 0) { //All dark color schemes start with "dark" + cal.addClass('wcolpick_dark'); //Loading default dark color scheme + if(options.colorScheme != 'dark') cal.addClass('wcolpick_'+options.colorScheme); //Loading dark-based color scheme + //INFO: You can implement dark-based color schemes, in css, naming them: dark-[name] (IMPORTANT: Use only lowercase names!) + } else { //If the scheme does not starts with "light" or "dark" + cal.addClass('wcolpick_light'); //Loading default color scheme for all (light) + cal.addClass('wcolpick_'+options.colorScheme); //Loading the "strange" color scheme + } + //Change color scheme for arrows, if requested + if (options.arrowsColor == 'light') cal.addClass('wcolpick_lightArrs'); + else if (options.arrowsColor == 'dark') cal.addClass('wcolpick_darkArrs'); + //Change color scheme for checkerboards, if requested + if (options.checkersColor == 'light') cal.addClass('wcolpick_lightCheckerboards'); + else if (options.checkersColor == 'dark') cal.addClass('wcolpick_darkCheckerboards'); + //Change color scheme for submit button, if requested + if (options.submitColor == 'light') cal.addClass('wcolpick_lightSubmit'); + else if (options.submitColor == 'dark') cal.addClass('wcolpick_darkSubmit'); + //Hide outlines, if requested + if (!options.colorSelOutline) cal.addClass('wcolpick_noCSOutline'); + if (!options.hueOutline) cal.addClass('wcolpick_noHOutline'); + if (!options.alphaOutline) cal.addClass('wcolpick_noAOutline'); + if (!options.colorOutline) cal.addClass('wcolpick_noNCOutline'); + //Set border width + cal.css('border-width', options.border + 'px'); + //Setup submit button + options.submit = cal.find('div.wcolpick_submit').click(clickSubmit); + //Setup input fields + options.fields = cal.find('input').change(change).keydown(keyDownFields).blur(blur).focus(focus); + //If alpha channel is disabled, set hex field maxlength to 6 + if (!options.enableAlpha) options.fields.eq(0).prop('maxlength', 6); + //Setup readonly attribute to fields + for (var i = 0; i < 8; i++) options.fields.eq(i).prop('readonly', options.readonlyFields); + if (options.readonlyHexField) options.fields.eq(0).prop('readonly', options.readonlyHexField); + //Setup color of fields, submit button, external border, and background (if a color is different than default, it will override the default color) + if (options.fieldsBackground != 'default') { + var colstr = encodeToCSS(options.fieldsBackground); + for (var i = 0; i < 8; i++) options.fields.eq(i).parent().css('background',colstr); + } + if (options.submitBackground != 'default') options.submit.css('background',encodeToCSS(options.submitBackground)); + if (options.backgroundColor != 'default') cal.css('background',encodeToCSS(options.backgroundColor)); + if (options.borderColor != 'default') cal.css('borderColor',encodeToCSS(options.borderColor)); + //Setup restoreOriginal to current color's click event + cal.find('div.wcolpick_field_arrs').mousedown(downIncrement).end().find('div.wcolpick_current_color').click(restoreOriginal); + //Setup color selector + options.selector = cal.find('div.wcolpick_color').on('mousedown touchstart',downSelector); + options.selectorIndic = options.selector.find('div.wcolpick_selector_outer'); + //Setup hue bar and alpha bar + options.el = this; + options.hue = cal.find('div.wcolpick_hue_arrs'); + options.hueBar = cal.find('div.wcolpick_hue_overlay'); + options.alpha = cal.find('div.wcolpick_alpha_arrs'); + options.alphaBar = cal.find('div.wcolpick_alpha_overlay'); + //Painting hue bar + var stops = ['#ff0000','#ff0080','#ff00ff','#8000ff','#0000ff','#0080ff','#00ffff','#00ff80','#00ff00','#80ff00','#ffff00','#ff8000','#ff0000']; + if (isInternetExplorer()) { //Compatibility with IE 6-9 + var i, div; + for (i=0; i<=11; i++) { + div = $('
').attr('style','height:8.333333%; filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='+stops[i]+',endColorstr='+stops[i+1]+'); -ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='+stops[i]+',endColorstr='+stops[i+1]+')";'); + options.hueBar.append(div); + } + } else { + var stopList = stops.join(','); + options.hueBar.attr('style','background:-webkit-linear-gradient(top,'+stopList+'); background:-moz-linear-gradient(top,'+stopList+'); background:-ms-linear-gradient(top,'+stopList+'); background:-o-linear-gradient(top,'+stopList+'); background:linear-gradient(to bottom,'+stopList+');'); + } + //Setup remaining events, new, and current color + cal.find('div.wcolpick_hue').on('mousedown touchstart',downHue); + cal.find('div.wcolpick_alpha').on('mousedown touchstart',downAlpha); + options.newColor = cal.find('div.wcolpick_new_color'); + options.currentColor = cal.find('div.wcolpick_current_color'); + //Store options + cal.data('wcolpick', options); + //Fill with default color + var rgba = hsbaToRgba(options.color); + fillHSBFields(options.color, cal.get(0)); + fillAlphaField(options.color, cal.get(0)); + fillRGBFields(rgba, cal.get(0)); + fillHexField(rgbaToHex(rgba), cal.get(0)); + setSelectorPos(options.color, cal.get(0)); + setSelectorColor(options.color, cal.get(0)); + setHuePos(options.color, cal.get(0)); + setAlphaPos(options.color, cal.get(0)); + setAlphaColor(rgba, cal.get(0)); + setCurrentColor(rgba, cal.get(0)); + setNewColor(rgba, cal.get(0)); + //Append to parent if flat=false, else show in place + if (options.flat) { + cal.appendTo(this).show(); + cal.css({position: 'relative', display: 'block'}); + } else { + cal.data('wcolpick').appendedToBody = options.appendToBody; + if (!options.appendToBody) cal.appendTo($(this).parent()); + else cal.appendTo(document.body); + $(this).on(options.showEvent, show); + cal.css({position: 'absolute'}); + } + //Loading completed + cal.data('wcolpick').onLoaded.apply(cal.parent(), [{colorDiv:cal.get(0), el:cal.data('wcolpick').el}]); + } + }); + }, + //Shows the picker + showColpick: function() { + return this.each( function () { + if ($(this).data('wcolpickId')) { + show.apply(this); + } + }); + }, + //Hides the picker + hideColpick: function() { + return this.each( function () { + if ($(this).data('wcolpickId')) { + hide.apply(this); + } + }); + }, + //Destroys the picker + destroyColpick: function() { + return this.each( function () { + if ($(this).data('wcolpickId')) { + destroy.apply(this); + } + }); + }, + //Sets a color as new and current (Default: Set only as new color) + setColpickColor: function(col, setCurrent) { + if (col !== undefined) { //If color is undefined, do nothing! + if (typeof col === 'string') col = hexToHsba(col); + else if (col.r !== undefined && col.g !== undefined && col.b !== undefined) col = rgbaToHsba(fixRGBA(col)); + else if (col.h !== undefined && col.s !== undefined && col.b !== undefined) col = fixHSBA(col); + else if (col.h !== undefined && col.s !== undefined && col.l !== undefined) col = hslaToHsba(fixHSLA(col)); + else return this; //If color is not recognized, do nothing! + if (setCurrent === undefined) setCurrent = false; //Default: Set only as new color + return this.each(function(){ + if ($(this).data('wcolpickId')) { + var cal = $('#' + $(this).data('wcolpickId')); + //Fixes color if alpha is disabled + if (!cal.data('wcolpick').enableAlpha) col = removeAlpha(col); + //Check if the color is actually changed and, if is true, do nothing! + if (setCurrent) { if (compareHSBA(col, cal.data('wcolpick').color) && compareHSBA(col, cal.data('wcolpick').origColor)) return this; } + else { if (compareHSBA(col, cal.data('wcolpick').color)) return this; } + //Setup new color + cal.data('wcolpick').color = cloneHSBA(col, true); + var rgba = hsbaToRgba(col); + var hex = rgbaToHex(rgba); + //Applies color to all elements + fillHSBFields(col, cal.get(0)); + fillAlphaField(col, cal.get(0)); + fillRGBFields(rgba, cal.get(0)); + fillHexField(hex, cal.get(0)); + setSelectorPos(col, cal.get(0)); + setSelectorColor(col, cal.get(0)); + setHuePos(col, cal.get(0)); + setAlphaPos(col, cal.get(0)); + setAlphaColor(rgba, cal.get(0)); + setNewColor(rgba, cal.get(0)); + //If setCurrent is "true", sets the color as current + if (setCurrent) { + cal.data('wcolpick').origColor = cloneHSBA(col, true); + setCurrentColor(rgba, cal.get(0)); + } + //Fires onChange (bySetColor = true) + var hsla = hsbaToHsla(col); + cal.data('wcolpick').onChange.apply(cal.parent(), [{bySetColor:true, colorDiv:cal.get(0), el:cal.data('wcolpick').el, hex:hex.substring(0,6), hexa:hex, hsb:cloneHSBA(col, false), hsba:col, hsl:cloneHSLA(hsla, false), hsla:hsla, rgb:cloneRGBA(rgba, false), rgba:rgba}]); + } + }); + } + }, + //Returns the selected color (Default: Hsb color with alpha value, and get new color (not current)) + getColpickColor: function(type, getCurrent) { + var cal = $('#' + $(this).data('wcolpickId')); + if (getCurrent === undefined) getCurrent = false; //Default: Get new color (not current) + if (type === undefined) type = 'hsba'; //Default: Hsb color with alpha value + var withAlpha = (type.indexOf('a') != -1); + //Getting the color + var col = getCurrent ? cloneHSBA(cal.data('wcolpick').origColor, true) : cloneHSBA(cal.data('wcolpick').color, true); + if (type.indexOf('rgb') != -1) { + var rgba = hsbaToRgba(col); + return withAlpha ? {r:rgba.r, g:rgba.g, b:rgba.b, a:rgba.a} : {r:rgba.r, g:rgba.g, b:rgba.b}; + } else if (type.indexOf('hsl') != -1) { + var hsla = hsbaToHsla(col); + return withAlpha ? {h:hsla.h, s:hsla.s, l:hsla.l, a:hsla.a} : {h:hsla.h, s:hsla.s, l:hsla.l}; + } else if (type.indexOf('hex') != -1) return withAlpha ? hsbaToHex(col) : hsbaToHex(col).substring(0,6); + else return withAlpha ? {h:col.h, s:col.s, b:col.b, a:col.a} : {h:col.h, s:col.s, b:col.b}; + } + }; + }(); + //Color space convertions + var hexToRgba = function (hex) { + if (hex === undefined) return {r:0, g:0, b:0, a:1}; + if (hex.indexOf('#') == 0) hex = hex.substring(1); + if (isValidHex(hex)) { + if (hex.length == 3) hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2] + 'ff'; + else if (hex.length == 4) hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2] + hex[3] + hex[3]; + else if (hex.length == 6) hex = hex + 'ff'; + else if (hex.length != 8) return {r:0, g:0, b:0, a:1}; + } else { return {r:0, g:0, b:0, a:1}; } + var hexI = parseInt(hex,16); + var rgba = {r: hexI >>> 24, g: (hexI & 0x00FF0000) >>> 16, b: (hexI & 0x0000FF00) >>> 8, a: (hexI & 0x000000FF) / 255}; + return rgba; + }; + var hexToHsba = function (hex) { + return rgbaToHsba(hexToRgba(hex)); + }; + var hexToHsla = function (hex) { + return rgbaToHsla(hexToRgba(hex)); + }; + var rgbaToHex = function (rgba) { + if (rgba === undefined) return '000000ff'; + if (rgba.a === undefined) rgba.a = 1; + var a = Math.round(rgba.a * 255); + var hex = [ rgba.r.toString(16), rgba.g.toString(16), rgba.b.toString(16), a.toString(16) ]; + $.each(hex, function (nr, val) { + if (val.length == 1) hex[nr] = '0' + val; + }); + return hex.join(''); + }; + var rgbaToHsba = function (rgba) { + if (rgba === undefined) return {h:0, s:0, b:0, a:1}; + if (rgba.a === undefined) rgba.a = 1; + var r = rgba.r / 255, g = rgba.g / 255, b = rgba.b / 255; + var min = Math.min(r, Math.min(g, b)); + var max = Math.max(r, Math.max(g, b)); + var delta = max - min; + var brightness = max; + var saturation = max != 0 ? delta / max : 0; + var hue = delta != 0 ? (r == max ? (g - b) / delta : g == max ? ((b - r) / delta) + 2 : ((r - g) / delta) + 4) * 60 : 0; + if (hue < 0) hue += 360; + return fixHSBA({h: hue, s: saturation * 100, b: brightness * 100, a: rgba.a}); + }; + var rgbaToHsla = function (rgba) { + if (rgba === undefined) return {h:0, s:0, l:0, a:1}; + if (rgba.a === undefined) rgba.a = 1; + var r = rgba.r / 255, g = rgba.g / 255, b = rgba.b / 255; + var min = Math.min(r, Math.min(g, b)); + var max = Math.max(r, Math.max(g, b)); + var delta = max - min; + var lightness = (max + min) / 2; + var saturation = delta != 0 ? delta / (1 - Math.abs(max + min - 1)) : 0; + var hue = delta != 0 ? (r == max ? (g - b) / delta : g == max ? ((b - r) / delta) + 2 : ((r - g) / delta) + 4) * 60 : 0; + if (hue < 0) hue += 360; + return fixHSLA({h: hue, s: saturation * 100, l: lightness * 100, a: rgba.a}); + }; + var hsbaToHex = function (hsba) { + return rgbaToHex(hsbaToRgba(hsba)); + }; + var hsbaToRgba = function (hsba) { + if (hsba === undefined) return {r:0, g:0, b:0, a:1}; + if (hsba.a === undefined) hsba.a = 1; + var hsbaL = {h: hsba.h, s: hsba.s / 100, b: hsba.b / 100, a: hsba.a}; + var red, green, blue; + if (hsbaL.s == 0) red = green = blue = hsbaL.b; + else + { + var t1 = hsbaL.b; + var t2 = (1 - hsbaL.s) * hsbaL.b; + var t3 = (t1 - t2) * (hsbaL.h % 60) / 60; + if (hsbaL.h < 60 || hsbaL.h == 360) { red = t1; blue = t2; green = t2 + t3; } + else if (hsbaL.h < 120) { green = t1; blue = t2; red = t1 - t3; } + else if (hsbaL.h < 180) { green = t1; red = t2; blue = t2 + t3; } + else if (hsbaL.h < 240) { blue = t1; red = t2; green = t1 - t3; } + else if (hsbaL.h < 300) { blue = t1; green = t2; red = t2 + t3; } + else { red = t1; green = t2; blue = t1 - t3; } + } + return fixRGBA({r: Math.round(red * 255), g: Math.round(green * 255), b: Math.round(blue * 255), a: hsbaL.a}); + }; + var hsbaToHsla = function (hsba) { + if (hsba === undefined) return {h:0, s:0, l:0, a:1}; + if (hsba.a === undefined) hsba.a = 1; + var hsbaL = {h: hsba.h, s: hsba.s / 100, b: hsba.b / 100, a: hsba.a}; + var lightness = hsbaL.b * (2 - hsbaL.s) / 2; + var saturation = lightness != 0 && lightness != 1 ? hsba.b * hsba.s / (1 - Math.abs((2 * lightness) - 1)) : 0; + return fixHSLA({h: hsbaL.h, s: saturation * 100, l: lightness * 100, a: hsbaL.a}); + }; + var hslaToHex = function (hsla) { + return rgbaToHex(hslaToRgba(hsla)); + }; + var hslaToRgba = function (hsla) { + if (hsla === undefined) return {r:0, g:0, b:0, a:1}; + if (hsla.a === undefined) hsla.a = 1; + var hslaL = {h: hsla.h, s: hsla.s / 100, l: hsla.l / 100, a: hsla.a}; + var red, green, blue; + var c = (1 - Math.abs(2 * hslaL.l - 1)) * hslaL.s; + var x = c * (1 - Math.abs((hslaL.h / 60 % 2) - 1)); + var m = hslaL.l - (c / 2); + if (hslaL.h < 60 || hslaL.h == 360) { red = c + m; green = x + m; blue = m; } + else if (hslaL.h < 120) { red = x + m; green = c + m; blue = m; } + else if (hslaL.h < 180) { red = m; green = c + m; blue = x + m; } + else if (hslaL.h < 240) { red = m; green = x + m; blue = c + m; } + else if (hslaL.h < 300) { red = x + m; green = m; blue = c + m; } + else { red = c + m; green = m; blue = x + m; } + return fixRGBA({r: Math.round(red * 255), g: Math.round(green * 255), b: Math.round(blue * 255), a: hslaL.a}); + }; + var hslaToHsba = function (hsla) { + if (hsla === undefined) return {h:0, s:0, b:0, a:1}; + if (hsla.a === undefined) hsla.a = 1; + var hslaL = {h: hsla.h, s: hsla.s / 100, l: hsla.l / 100, a: hsla.a}; + var brightness = ((2 * hslaL.l) + (hslaL.s * (1 - Math.abs((2 * hslaL.l) - 1)))) / 2; + var saturation = brightness != 0 ? 2 * (brightness - hslaL.l) / brightness : 0; + return fixHSBA({h: hslaL.h, s: saturation * 100, b: brightness * 100, a: hslaL.a}); + }; + //Check if a string is a valid hexadecimal string + var isValidHex = function (hex) { + if (hex === undefined) return false; + while (hex.indexOf('0') == 0) hex = hex.substring(1); + if(hex == '') hex = '0'; + return (parseInt(hex,16).toString(16) === hex.toLowerCase()); + }; + //Fix the values, if the user enters a wrong value + var fixRGBA = function (rgba) { + if (rgba === undefined) return {r:0, g:0, b:0, a:1}; + return { + r: fixVal(isNaN(rgba.r) ? 0 : rgba.r, 0, 255), + g: fixVal(isNaN(rgba.g) ? 0 : rgba.g, 0, 255), + b: fixVal(isNaN(rgba.b) ? 0 : rgba.b, 0, 255), + a: fixVal(isNaN(rgba.a) ? 1 : rgba.a, 0, 1) + }; + }; + var fixHSBA = function (hsba) { + if (hsba === undefined) return {h:0, s:0, b:0, a:1}; + return { + h: fixVal(isNaN(hsba.h) ? 0 : hsba.h, 0, 360), + s: fixVal(isNaN(hsba.s) ? 0 : hsba.s, 0, 100), + b: fixVal(isNaN(hsba.b) ? 0 : hsba.b, 0, 100), + a: fixVal(isNaN(hsba.a) ? 1 : hsba.a, 0, 1) + }; + }; + var fixHSLA = function (hsla) { + if (hsla === undefined) return {h:0, s:0, l:0, a:1}; + return { + h: fixVal(isNaN(hsla.h) ? 0 : hsla.h, 0, 360), + s: fixVal(isNaN(hsla.s) ? 0 : hsla.s, 0, 100), + l: fixVal(isNaN(hsla.l) ? 0 : hsla.l, 0, 100), + a: fixVal(isNaN(hsla.a) ? 1 : hsla.a, 0, 1) + }; + }; + var fixVal = function (val, min, max) { + return val >= max ? max : val <= min ? min : val; + }; + //Converts a color object in a css color string + var encodeToCSS = function (colobj) { + if (colobj === undefined) return 'rgb(0,0,0)'; + if (colobj.r !== undefined && colobj.g !== undefined && colobj.b !== undefined) { + var rgba = fixRGBA(colobj); + return 'rgba('+rgba.r+','+rgba.g+','+rgba.b+','+rgba.a+')'; + } else if (colobj.h !== undefined && colobj.s !== undefined && colobj.l !== undefined) { + var hsla = fixHSLA(colobj); + return 'hsla('+hsla.h+','+hsla.s+'%,'+hsla.l+'%,'+hsla.a+')'; + } else if (colobj.h !== undefined && colobj.s !== undefined && colobj.b !== undefined) { + var hsla = hsbaToHsla(fixHSBA(colobj)); + return 'hsla('+hsla.h+','+hsla.s+'%,'+hsla.l+'%,'+hsla.a+')'; + } else if (typeof colobj === 'string') { + return colobj; //If colobj is a string, returns the string untouched (maybe is a string like "green", "blue", "black", ...). + } else return 'rgb(0,0,0)'; + }; + //Converts a css color string in a color object + var decodeFromCSS = function (colstr) { + if (colstr === undefined) return {r:0, g:0, b:0, a:1}; + if (typeof colstr !== 'string') colstr = colstr.toString(); + if (colstr.indexOf('rgb') != -1) { + var elems = colstr.substring(colstr.indexOf('(')+1, colstr.indexOf(')')).split(','); + return fixRGBA({r:parseInt(elems[0]), g:parseInt(elems[1]), b:parseInt(elems[2]), a:parseFloat(elems[3])}); + } else if (colstr.indexOf('hsl') != -1) { + var elems = colstr.substring(colstr.indexOf('(')+1, colstr.indexOf(')')).split(','); + return fixHSLA({h:parseFloat(elems[0]), s:parseFloat(elems[1]), l:parseFloat(elems[2]), a:parseFloat(elems[3])}); + } else { + return hexToHsba(colstr); //Tries to treat the unidentified string as an hexadecimal string, and, in case, returns an hsba object (ready for input). + } + }; + //External accessible functions + $.fn.extend({ + loads: wcolpick.init, + shows: wcolpick.showColpick, + hides: wcolpick.hideColpick, + destroys: wcolpick.destroyColpick, + setColor: wcolpick.setColpickColor, + getColor: wcolpick.getColpickColor + }); + $.extend({ + wcolpick:{ + hexToRgba: hexToRgba, + hexToHsba: hexToHsba, + hexToHsla: hexToHsla, + rgbaToHex: rgbaToHex, + rgbaToHsba: rgbaToHsba, + rgbaToHsla: rgbaToHsla, + hsbaToHex: hsbaToHex, + hsbaToRgba: hsbaToRgba, + hsbaToHsla: hsbaToHsla, + hslaToHex: hslaToHex, + hslaToRgba: hslaToRgba, + hslaToHsba: hslaToHsba, + isValidHex: isValidHex, + encodeToCSS: encodeToCSS, + decodeFromCSS: decodeFromCSS + } + }); +})(jQuery); diff --git a/multicolor_backend_theme/static/src/xml/sidebar_menu_icon.xml b/multicolor_backend_theme/static/src/xml/sidebar_menu_icon.xml new file mode 100644 index 000000000..4788ad7e2 --- /dev/null +++ b/multicolor_backend_theme/static/src/xml/sidebar_menu_icon.xml @@ -0,0 +1,107 @@ + + + + + + +
+ +
+