Merge branch 'develop' into feature/new-chart-types

apps/api/documents/api.js

@@ -24,10 +24,8 @@
                 key: 'key',
                 vkey: 'vkey',
                 info: {
-                    author: 'author name', // must be deprecated, use owner instead
                     owner: 'owner name',
                     folder: 'path to document',
-                    created: '<creation date>', // must be deprecated, use uploaded instead
                     uploaded: '<uploaded date>',
                     sharingSettings: [
                         {
@@ -49,7 +47,10 @@
                     modifyFilter: <can add, remove and save filter in the spreadsheet> // default = true
                     modifyContentControl: <can modify content controls in documenteditor> // default = true
                     fillForms:  <can edit forms in view mode> // default = edit || review,
-                    copy: <can copy data> // default = true
+                    copy: <can copy data> // default = true,
+                    editCommentAuthorOnly: <can edit your own comments only> // default = false
+                    deleteCommentAuthorOnly: <can delete your own comments only> // default = false,
+                    reviewGroup: ["Group1", ""] // current user can accept/reject review changes made by users from Group1 and users without a group. [] - use groups, but can't change any group's changes
                 }
             },
             editorConfig: {
@@ -140,7 +141,7 @@
                     statusBar: true,
                     autosave: true,
                     forcesave: false,
-                    commentAuthorOnly: false,
+                    commentAuthorOnly: false, // must be deprecated. use permissions.editCommentAuthorOnly and permissions.deleteCommentAuthorOnly instead
                     showReviewChanges: false,
                     help: true,
                     compactHeader: false,
@@ -395,7 +396,7 @@
 
                 if (typeof _config.document.fileType === 'string' && _config.document.fileType != '') {
                     _config.document.fileType = _config.document.fileType.toLowerCase();
-                    var type = /^(?:(xls|xlsx|ods|csv|xlst|xlsy|gsheet|xlsm|xlt|xltm|xltx|fods|ots)|(pps|ppsx|ppt|pptx|odp|pptt|ppty|gslides|pot|potm|potx|ppsm|pptm|fodp|otp)|(doc|docx|doct|odt|gdoc|txt|rtf|pdf|mht|htm|html|epub|djvu|xps|docm|dot|dotm|dotx|fodt|ott))$/
+                    var type = /^(?:(xls|xlsx|ods|csv|xlst|xlsy|gsheet|xlsm|xlt|xltm|xltx|fods|ots)|(pps|ppsx|ppt|pptx|odp|pptt|ppty|gslides|pot|potm|potx|ppsm|pptm|fodp|otp)|(doc|docx|doct|odt|gdoc|txt|rtf|pdf|mht|htm|html|epub|djvu|xps|docm|dot|dotm|dotx|fodt|ott|fb2))$/
                                     .exec(_config.document.fileType);
                     if (!type) {
                         window.alert("The \"document.fileType\" parameter for the config object is invalid. Please correct it.");
@@ -877,6 +878,9 @@
         if (config.parentOrigin)
             params += "&parentOrigin=" + config.parentOrigin;
 
+        if (config.editorConfig && config.editorConfig.customization && config.editorConfig.customization.uiTheme )
+            params += "&uitheme=" + config.editorConfig.customization.uiTheme;
+
         return params;
     }
 

apps/common/main/lib/component/Button.js

@@ -211,7 +211,7 @@ define([
                 '</div>' +
                 '<div class="inner-box-caption">' +
                     '<span class="caption"><%= caption %></span>' +
-                    '<i class="caret img-commonctrl"></i>' +
+                    '<i class="caret"></i>' +
                 '</div>' +
             '</button>' +
         '</div>';
@@ -226,7 +226,7 @@ define([
             '<button type="button" class="btn <%= cls %> inner-box-caption dropdown-toggle" data-toggle="dropdown">' +
                 '<span class="btn-fixflex-vcenter">' +
                     '<span class="caption"><%= caption %></span>' +
-                    '<i class="caret img-commonctrl"></i>' +
+                    '<i class="caret"></i>' +
                 '</span>' +
             '</button>' +
         '</div>';
@@ -271,7 +271,7 @@ define([
                         '<% applyicon() %>',
                         '<span class="caption"><%= caption %></span>',
                         '<span class="inner-box-caret">' +
-                            '<i class="caret img-commonctrl"></i>' +
+                            '<i class="caret"></i>' +
                         '</span>',
                     '</button>',
                 '</div>',
@@ -282,7 +282,7 @@ define([
                         '<span class="caption"><%= caption %></span>',
                     '</button>',
                     '<button type="button" class="btn <%= cls %> dropdown-toggle" data-toggle="dropdown">',
-                        '<i class="caret img-commonctrl"></i>',
+                        '<i class="caret"></i>',
                         '<span class="sr-only"></span>',
                     '</button>',
                 '</div>',

apps/common/main/lib/component/ColorButton.js

@@ -41,16 +41,28 @@ define([
 
     Common.UI.ColorButton = Common.UI.Button.extend(_.extend({
         options : {
-            hint: false,
-            enableToggle: false,
-            visible: true
+            id              : null,
+            hint            : false,
+            enableToggle    : false,
+            allowDepress    : false,
+            toggleGroup     : null,
+            cls             : '',
+            iconCls         : '',
+            caption         : '',
+            menu            : null,
+            disabled        : false,
+            pressed         : false,
+            split           : false,
+            visible         : true
         },
 
         template: _.template([
             '<div class="btn-group" id="<%= id %>">',
                 '<button type="button" class="btn btn-color dropdown-toggle <%= cls %>" data-toggle="dropdown" style="<%= style %>">',
                     '<span>&nbsp;</span>',
-                    '<span class="inner-box-caret"><i class="caret img-commonctrl"></i></span>',
+                    '<span class="inner-box-caret">',
+                        '<i class="caret"></i>',
+                    '</span>',
                 '</button>',
             '</div>'
         ].join('')),
@@ -61,7 +73,7 @@ define([
                 var me = this;
                 options.menu = me.getMenu(options);
                 me.on('render:after', function(btn) {
-                    me.getPicker(options.color);
+                    me.getPicker(options.color, options.colors);
                 });
             }
 
@@ -71,16 +83,22 @@ define([
         render: function(parentEl) {
             Common.UI.Button.prototype.render.call(this, parentEl);
 
+            if (this.options.auto)
+                this.autocolor = (typeof this.options.auto == 'object') ? this.options.auto.color || '000000' : '000000';
+
             if (this.options.color!==undefined)
                 this.setColor(this.options.color);
         },
 
         onColorSelect: function(picker, color) {
             this.setColor(color);
+            this.setAutoColor(false);
             this.trigger('color:select', this, color);
         },
 
         setColor: function(color) {
+            if (color == 'auto' && this.options.auto)
+                color = this.autocolor;
             var span = $(this.cmpEl).find('button span:nth-child(1)');
             this.color = color;
 
@@ -88,15 +106,21 @@ define([
             span.css({'background-color': (color=='transparent') ? color : ((typeof(color) == 'object') ? '#'+color.color : '#'+color)});
         },
 
-        getPicker: function(color) {
+        getPicker: function(color, colors) {
             if (!this.colorPicker) {
                 this.colorPicker = new Common.UI.ThemeColorPalette({
                     el: this.cmpEl.find('#' + this.menu.id + '-color-menu'),
                     transparent: this.options.transparent,
-                    value: color
+                    value: color,
+                    colors: colors
                 });
                 this.colorPicker.on('select', _.bind(this.onColorSelect, this));
                 this.cmpEl.find('#' + this.menu.id + '-color-new').on('click', _.bind(this.addNewColor, this));
+                if (this.options.auto) {
+                    this.cmpEl.find('#' + this.menu.id + '-color-auto').on('click', _.bind(this.onAutoColorSelect, this));
+                    this.colorAuto = this.cmpEl.find('#' + this.menu.id + '-color-auto > a');
+                    (color == 'auto') && this.setAutoColor(true);
+                }
             }
             return this.colorPicker;
         },
@@ -104,13 +128,25 @@ define([
         getMenu: function(options) {
             if (typeof this.menu !== 'object') {
                 options = options || this.options;
-                var id = Common.UI.getId(),
-                    menu = new Common.UI.Menu({
+                var height = options.paletteHeight || 216,
+                    id = Common.UI.getId(),
+                    auto = [];
+                if (options.auto) {
+                    this.autocolor = (typeof options.auto == 'object') ? options.auto.color || '000000' : '000000';
+                    auto.push({
+                        id: id + '-color-auto',
+                        caption: (typeof options.auto == 'object') ? options.auto.caption || this.textAutoColor : this.textAutoColor,
+                        template: _.template('<a tabindex="-1" type="menuitem"><span class="menu-item-icon color-auto" style="background-image: none; width: 12px; height: 12px; margin: 1px 7px 0 1px; background-color: #' + this.autocolor + ';"></span><%= caption %></a>')
+                    });
+                    auto.push({caption: '--'});
+                }
+
+                var menu = new Common.UI.Menu({
                     id: id,
                     cls: 'shifted-left',
                     additionalAlign: options.additionalAlign,
-                    items: (options.additionalItems ? options.additionalItems : []).concat([
-                        { template: _.template('<div id="' + id + '-color-menu" style="width: 169px; height: 220px; margin: 10px;"></div>') },
+                    items: (options.additionalItems ? options.additionalItems : []).concat(auto).concat([
+                        { template: _.template('<div id="' + id + '-color-menu" style="width: 169px; height:' + height + 'px; margin: 10px;"></div>') },
                         { template: _.template('<a id="' + id + '-color-new" style="">' + this.textNewColor + '</a>') }
                     ])
                 });
@@ -122,14 +158,53 @@ define([
         setMenu: function (m) {
             m = m || this.getMenu();
             Common.UI.Button.prototype.setMenu.call(this, m);
-            this.getPicker(this.options.color);
+            this.getPicker(this.options.color, this.options.colors);
         },
 
         addNewColor: function() {
             this.colorPicker && this.colorPicker.addNewColor((typeof(this.color) == 'object') ? this.color.color : this.color);
         },
 
-        textNewColor: 'Add New Custom Color'
+        onAutoColorSelect: function() {
+            this.setColor('auto');
+            this.setAutoColor(true);
+            this.colorPicker && this.colorPicker.clearSelection();
+            this.trigger('auto:select', this, this.autocolor);
+        },
+
+        setAutoColor: function(selected) {
+            if (!this.colorAuto) return;
+            if (selected && !this.colorAuto.hasClass('selected'))
+                this.colorAuto.addClass('selected');
+            else if (!selected && this.colorAuto.hasClass('selected'))
+                this.colorAuto.removeClass('selected');
+        },
+
+        isAutoColor: function() {
+            return this.colorAuto && this.colorAuto.hasClass('selected');
+        },
+
+        textNewColor: 'Add New Custom Color',
+        textAutoColor: 'Automatic'
 
     }, Common.UI.ColorButton || {}));
+
+
+    Common.UI.ButtonColored = Common.UI.Button.extend(_.extend({
+        render: function(parentEl) {
+            Common.UI.Button.prototype.render.call(this, parentEl);
+
+            $('button:first-child', this.cmpEl).append( $('<div class="btn-color-value-line"></div>'));
+            this.colorEl = this.cmpEl.find('.btn-color-value-line');
+        },
+
+        setColor: function(color) {
+            if (this.colorEl) {
+                this.colorEl.css({'background-color': (color=='transparent') ? color : ((typeof(color) == 'object') ? '#'+color.color : '#'+color)});
+                this.colorEl.toggleClass('bordered', color=='transparent');
+            }
+        }
+
+    }, Common.UI.ButtonColored || {}));
+
 });

apps/common/main/lib/component/ComboBorderSize.js

@@ -77,9 +77,14 @@ define([
     Common.UI.ComboBorderSize = Common.UI.ComboBox.extend(_.extend({
         template: _.template([
             '<div class="input-group combobox combo-border-size input-group-nr <%= cls %>" id="<%= id %>" style="<%= style %>">',
-                '<div class="form-control" style="padding-top:2px; <%= style %>"></div>',
+                '<div class="form-control" style="<%= style %>">',
+                    '<i class="image"></i>',
+                    '<span class="text"></span>',
+                '</div>',
                 '<div style="display: table-cell;"></div>',
-                '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret img-commonctrl"></span></button>',
+                '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">',
+                    '<span class="caret"></span>',
+                '</button>',
                 '<ul class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">',
                     '<% _.each(items, function(item) { %>',
                         '<li id="<%= item.id %>" data-value="<%= item.value %>"><a tabindex="-1" type="menuitem">',
@@ -138,14 +143,15 @@ define([
 
         updateFormControl: function(record) {
             var formcontrol = $(this.el).find('.form-control');
+            var image = formcontrol.find('> .image');
+            var text = formcontrol.find('> .text');
 
             if (record.get('value')>0) {
-                formcontrol[0].innerHTML = '';
-                formcontrol.removeClass('text').addClass('image');
-                formcontrol.css('background-position', '10px -' + record.get('offsety') + 'px');
+                image.css('background-position', '10px -' + record.get('offsety') + 'px').show();
+                text.hide();
             } else {
-                formcontrol[0].innerHTML = this.txtNoBorders;
-                formcontrol.removeClass('image').addClass('text');
+                image.hide();
+                text.text(this.txtNoBorders).show();
             }
         },
 
@@ -162,9 +168,7 @@ define([
                 this.updateFormControl(this._selectedItem);
                 $('#' + this._selectedItem.get('id'), $(this.el)).addClass('selected');
             } else {
-                var formcontrol = $(this.el).find('.form-control');
-                formcontrol[0].innerHTML = '';
-                formcontrol.removeClass('image').addClass('text');
+                $(this.el).find('.form-control > .text').text("").show();
             }
         },
 
@@ -175,7 +179,9 @@ define([
         template: _.template([
             '<span class="input-group combobox combo-border-size input-group-nr <%= cls %>" id="<%= id %>" style="<%= style %>">',
                 '<input type="text" class="form-control text">',
-                '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret img-commonctrl"></span></button>',
+                '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">',
+                    '<span class="caret"></span>',
+                '</button>',
                 '<ul class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">',
                     '<% _.each(items, function(item) { %>',
                         '<li id="<%= item.id %>" data-value="<%= item.value %>"><a tabindex="-1" type="menuitem">',
@@ -224,9 +230,13 @@ define([
     Common.UI.ComboBorderType = Common.UI.ComboBorderSize.extend(_.extend({
         template: _.template([
             '<div class="input-group combobox combo-border-size input-group-nr <%= cls %>" id="<%= id %>" style="<%= style %>">',
-                '<div class="form-control" style="<%= style %>"></div>',
+                '<div class="form-control" style="<%= style %>">',
+                    '<i class="image"></i>',
+                '</div>',
                 '<div style="display: table-cell;"></div>',
-                '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret img-commonctrl"></span></button>',
+                '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">',
+                    '<span class="caret"></span>',
+                '</button>',
                 '<ul class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">',
                     '<% _.each(items, function(item) { %>',
                         '<li id="<%= item.id %>" data-value="<%= item.value %>"><a tabindex="-1" type="menuitem" style="padding: 2px 0 2px 10px;">',
@@ -262,10 +272,8 @@ define([
         },
 
         updateFormControl: function(record) {
-            var formcontrol = $(this.el).find('.form-control');
-            formcontrol[0].innerHTML = '';
-            formcontrol.removeClass('text').addClass('image');
-            formcontrol.css('background-position', '10px -' + record.get('offsety') + 'px');
+            $(this.el).find('.form-control > .image')
+                .css('background-position', '10px -' + record.get('offsety') + 'px');
         }
     }, Common.UI.ComboBorderType || {}));
 
@@ -275,7 +283,9 @@ define([
             '<div class="form-control" style="padding:2px 14px 2px 3px; <%= style %> display: block;">',
                 '<div style="display: inline-block;overflow: hidden;width: 100%;height: 100%;"></div>',
             '</div>',
-            '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret img-commonctrl"></span></button>',
+            '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">',
+                '<span class="caret"></span>',
+            '</button>',
             '<ul class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">',
             '<% _.each(items, function(item) { %>',
                 '<% if (item.value==-1) { %>',

apps/common/main/lib/component/ComboBox.js

@@ -93,7 +93,9 @@ define([
             template: _.template([
                 '<span class="input-group combobox <%= cls %>" id="<%= id %>" style="<%= style %>">',
                     '<input type="text" class="form-control" spellcheck="false">',
-                    '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret img-commonctrl"></span></button>',
+                    '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">',
+                        '<span class="caret"></span>',
+                    '</button>',
                     '<ul class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">',
                         '<% _.each(items, function(item) { %>',
                             '<li id="<%= item.id %>" data-value="<%= item.value %>"><a tabindex="-1" type="menuitem"><%= scope.getDisplayValue(item) %></a></li>',
@@ -360,15 +362,15 @@ define([
                     return false;
                 }
                 else if (e.keyCode == Common.UI.Keys.RETURN && (this.editable || this.isMenuOpen())) {
+                    var isopen = this.isMenuOpen();
                     $(e.target).click();
-                    var me = this;
                     if (this.rendered) {
                         if (Common.Utils.isIE)
                             this._input.trigger('change', { onkeydown: true });
                         else
                             this._input.blur();
                     }
-                    return false;
+                    return !isopen;
                 }
                 else if (e.keyCode == Common.UI.Keys.ESC && this.isMenuOpen()) {
                     this._input.val(this.lastValue);

apps/common/main/lib/component/ComboBoxFonts.js

@@ -72,7 +72,7 @@ define([
                 '<div class="input-group combobox fonts <%= cls %>" id="<%= id %>" style="<%= style %>">',
                     '<input type="text" class="form-control" spellcheck="false"> ',
                     '<div style="display: table-cell;"></div>',
-                    '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret img-commonctrl"></span></button>',
+                    '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>',
                     '<ul class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">',
                         '<li class="divider">',
                     '<% _.each(items, function(item) { %>',
@@ -131,6 +131,8 @@ define([
                      if ($(e.target).closest('input').length) { // enter in input field
                         if (this.lastValue !== this._input.val())
                             this._input.trigger('change');
+                        else
+                            return true;
                     } else { // enter in dropdown list
                         $(e.target).click();
                         if (this.rendered) {
@@ -139,7 +141,7 @@ define([
                             else
                                 this._input.blur();
                         }
-                     }
+                    }
                     return false;
                 } else if (e.keyCode == Common.UI.Keys.ESC && this.isMenuOpen()) {
                     this._input.val(this.lastValue);
@@ -343,10 +345,9 @@ define([
                 var me = this;
                 var name = (_.isFunction(font.get_Name) ?  font.get_Name() : font.asc_getFontName());
                 if (this.__name !== name) {
-                    this.__name = name;
                     if (!this.__nameId) {
                         this.__nameId = setTimeout(function () {
-                            me.onApiChangeFontInternal(me.__name);
+                            me.onApiChangeFontInternal(name);
                             me.__nameId = null;
                         }, 100);
                     }
@@ -356,6 +357,7 @@ define([
             onApiChangeFontInternal: function(name) {
                 if (this.inFormControl) return;
 
+                this.__name = name;
                 if (this.getRawValue() !== name) {
                     var record = this.store.findWhere({
                         name: name
@@ -380,6 +382,12 @@ define([
             },
 
             itemClicked: function (e) {
+                this.__name = undefined;
+                if (this.__nameId) {
+                    clearTimeout(this.__nameId);
+                    this.__nameId = undefined;
+                }
+
                 Common.UI.ComboBox.prototype.itemClicked.apply(this, arguments);
 
                 var el = $(e.target).closest('li');

apps/common/main/lib/component/FocusManager.js

@@ -74,11 +74,11 @@ Common.UI.FocusManager = new(function() {
         trapFirst.on('focus', function() {
             if (current.hidden) return;
             var fields = current.fields;
-            for (var i=0; i<fields.length; i++) {
+            for (var i=fields.length-1; i>=0; i--) {
                 var field = fields[i];
                 if ((field.cmp.isVisible ? field.cmp.isVisible() : field.cmp.is(':visible')) && !(field.cmp.isDisabled && field.cmp.isDisabled())) {
                     var el = (field.selector) ? (field.cmp.$el || $(field.cmp.el || field.cmp)).find(field.selector).addBack().filter(field.selector) : field.el;
-                    el.focus();
+                    el && setTimeout(function(){ el.focus(); }, 10);
                     break;
                 }
             }
@@ -89,11 +89,11 @@ Common.UI.FocusManager = new(function() {
         trapLast.on('focus', function() {
             if (current.hidden) return;
             var fields = current.fields;
-            for (var i=fields.length-1; i>=0; i--) {
+            for (var i=0; i<fields.length; i++) {
                 var field = fields[i];
                 if ((field.cmp.isVisible ? field.cmp.isVisible() : field.cmp.is(':visible')) && !(field.cmp.isDisabled && field.cmp.isDisabled())) {
                     var el = (field.selector) ? (field.cmp.$el || $(field.cmp.el || field.cmp)).find(field.selector).addBack().filter(field.selector) : field.el;
-                    el.focus();
+                    el && setTimeout(function(){ el.focus(); }, 10);
                     break;
                 }
             }

apps/common/main/lib/component/InputField.js

@@ -358,10 +358,10 @@ define([
                 return true;
             },
 
-            showError: function(errors) {
+            showError: function(errors, isWarning) {
                 var me = this;
                 if (!_.isEmpty(errors)) {
-                    me.cmpEl.addClass('error');
+                    me.cmpEl.addClass(isWarning ? 'warning' : 'error');
 
                     var errorBadge = me.cmpEl.find('.input-error'),
                         modalParents = errorBadge.closest('.asc-window'),
@@ -380,7 +380,12 @@ define([
                     }
                 } else {
                     me.cmpEl.removeClass('error');
+                    me.cmpEl.removeClass('warning');
                 }
+            },
+
+            showWarning: function(errors) {
+                this.showError(errors, true);
             }
         }
     })());

apps/common/main/lib/component/MetricSpinner.js

@@ -120,8 +120,8 @@ define([
         template    :
                     '<input type="text" class="form-control" spellcheck="false">' +
                     '<div class="spinner-buttons">' +
-                        '<button type="button" class="spinner-up"><i class="img-commonctrl"></i></button>' +
-                        '<button type="button" class="spinner-down"><i class="img-commonctrl"></i></button>' +
+                        '<button type="button" class="spinner-up"><i class="arrow"></i></button>' +
+                        '<button type="button" class="spinner-down"><i class="arrow"></i></button>' +
                     '</div>',
 
         initialize : function(options) {

apps/common/main/lib/component/SynchronizeTip.js

@@ -111,6 +111,8 @@ define([
                 } else
                 if (this.placement == 'top')
                     this.cmpEl.css({bottom : innerHeight - showxy.top + 'px', right: Common.Utils.innerWidth() - showxy.left - this.target.width()/2 + 'px'});
+                else if (this.placement == 'bottom')
+                    this.cmpEl.css({top : (showxy.top+5) + this.target.height() + 'px', left: showxy.left + (this.target.width() - this.cmpEl.width())/2 + 'px'});
                 else if (this.placement == 'target') {
                     this.cmpEl.css({top : (showxy.top+5) + 'px', left: (showxy.left+5) + 'px'});
                 } else {// left or right

apps/common/main/lib/component/TextareaField.js

@@ -161,11 +161,12 @@ define([
                 if (e.isDefaultPrevented())
                     return;
 
-                if (e.keyCode === Common.UI.Keys.RETURN)
-                    this._doChange(e);
+                if (e.keyCode === Common.UI.Keys.RETURN) {
+                    e.stopPropagation();
+                }
                 if (e.keyCode == Common.UI.Keys.ESC)
                     this.setValue(this.value);
-                if (e.keyCode==Common.UI.Keys.RETURN || e.keyCode==Common.UI.Keys.ESC)
+                if (e.keyCode==Common.UI.Keys.ESC)
                     this.trigger('inputleave', this);
             },
 

apps/common/main/lib/component/ThemeColorPalette.js

@@ -60,7 +60,7 @@ define([
 
         template    :
             _.template(
-                '<div style="padding: 12px;">' +
+                '<div style="padding: 8px 12px 12px;">' +
                 '<% var me = this; %>' +
                 '<% $(colors).each(function(num, item) { %>' +
                     '<% if (me.isBlankSeparator(item)) { %> <div class="palette-color-spacer" style="width:100%;height:8px;float:left;"></div>' +

apps/common/main/lib/component/Window.js

@@ -166,7 +166,7 @@ define([
                                 '<div class="header">' +
                                     '<div class="tools">' +
                                     '<% if (closable!==false) %>' +
-                                        '<div class="tool close img-commonctrl"></div>' +
+                                        '<div class="tool close"></div>' +
                                     '<% %>' +
                                     '<% if (help===true) %>' +
                                         '<div class="tool help">?</div>' +
@@ -455,7 +455,7 @@ define([
             if (!options.width) options.width = 'auto';
             
             var template =  '<div class="info-box">' +
-                                '<% if (typeof iconCls !== "undefined") { %><div class="icon img-commonctrl <%= iconCls %>"></div><% } %>' +
+                                '<% if (typeof iconCls !== "undefined") { %><div class="icon img-commonctrl img-no-theme-filter <%= iconCls %>"></div><% } %>' +
                                 '<div class="text" <% if (typeof iconCls == "undefined") { %> style="padding-left:10px;" <% } %>><span><%= msg %></span>' +
                                     '<% if (dontshow) { %><div class="dont-show-checkbox"></div><% } %>' +
                                 '</div>' +
@@ -709,12 +709,14 @@ define([
                         mask.attr('counter', parseInt(mask.attr('counter'))+1);
                         mask.show();
                     } else {
+                        var maskOpacity = $(':root').css('--modal-window-mask-opacity');
+
                         mask.css('opacity', 0);
                         mask.attr('counter', parseInt(mask.attr('counter'))+1);
                         mask.show();
 
                         setTimeout(function () {
-                            mask.css(_getTransformation('0.2'));
+                            mask.css(_getTransformation(maskOpacity));
                         }, 1);
                     }
 
@@ -801,11 +803,12 @@ define([
 
                     if ( hide_mask ) {
                         if (this.options.animate !== false) {
+                            var maskOpacity = $(':root').css('--modal-window-mask-opacity');
                             mask.css(_getTransformation(0));
 
                             setTimeout(function () {
                                 if (parseInt(mask.attr('counter'))<1) {
-                                    mask.css('opacity', '0.2');
+                                    mask.css('opacity', maskOpacity);
                                     mask.hide();
                                     mask.attr('counter', 0);
                                 }
@@ -841,11 +844,12 @@ define([
 
                         if ( hide_mask ) {
                             if (this.options.animate !== false) {
+                                var maskOpacity = $(':root').css('--modal-window-mask-opacity');
                                 mask.css(_getTransformation(0));
 
                                 setTimeout(function () {
                                     if (parseInt(mask.attr('counter'))<1) {
-                                        mask.css('opacity', '0.2');
+                                        mask.css('opacity', maskOpacity);
                                         mask.hide();
                                         mask.attr('counter', 0);
                                     }

apps/common/main/lib/controller/Comments.js

@@ -237,7 +237,7 @@ define([
         },
         onRemoveComments: function (type) {
             if (this.api) {
-                this.api.asc_RemoveAllComments(type=='my' || !this.mode.canEditComments, type=='current');// 1 param = true if remove only my comments, 2 param - remove current comments
+                this.api.asc_RemoveAllComments(type=='my' || !this.mode.canDeleteComments, type=='current');// 1 param = true if remove only my comments, 2 param - remove current comments
             }
         },
         onResolveComment: function (uid) {
@@ -776,6 +776,8 @@ define([
                 comment.set('userdata', data.asc_getUserData());
                 comment.set('time',     date.getTime());
                 comment.set('date',     t.dateToLocaleTimeString(date));
+                comment.set('editable', t.mode.canEditComments || (data.asc_getUserId() == t.currentUserId));
+                comment.set('removable', t.mode.canDeleteComments || (data.asc_getUserId() == t.currentUserId));
 
                 replies = _.clone(comment.get('replys'));
 
@@ -801,7 +803,8 @@ define([
                         editTextInPopover   : false,
                         showReplyInPopover  : false,
                         scope               : t.view,
-                        editable            : t.mode.canEditComments || (data.asc_getReply(i).asc_getUserId() == t.currentUserId)
+                        editable            : t.mode.canEditComments || (data.asc_getReply(i).asc_getUserId() == t.currentUserId),
+                        removable           : t.mode.canDeleteComments || (data.asc_getReply(i).asc_getUserId() == t.currentUserId)
                     }));
                 }
 
@@ -1241,6 +1244,7 @@ define([
                 hideAddReply        : !_.isUndefined(this.hidereply) ? this.hidereply : (this.showPopover ? true : false),
                 scope               : this.view,
                 editable            : this.mode.canEditComments || (data.asc_getUserId() == this.currentUserId),
+                removable            : this.mode.canDeleteComments || (data.asc_getUserId() == this.currentUserId),
                 hint                : !this.mode.canComments,
                 groupName           : (groupname && groupname.length>1) ? groupname[1] : null
             });
@@ -1277,7 +1281,8 @@ define([
                         editTextInPopover   : false,
                         showReplyInPopover  : false,
                         scope               : this.view,
-                        editable            : this.mode.canEditComments || (data.asc_getReply(i).asc_getUserId() == this.currentUserId)
+                        editable            : this.mode.canEditComments || (data.asc_getReply(i).asc_getUserId() == this.currentUserId),
+                        removable           : this.mode.canDeleteComments || (data.asc_getReply(i).asc_getUserId() == this.currentUserId)
                     }));
                 }
             }
@@ -1438,7 +1443,7 @@ define([
                     for (i = 0; i < comments.length; ++i) {
                         comment = this.findComment(comments[i].asc_getId());
                         if (comment) {
-                            comment.set('editTextInPopover', t.mode.canEditComments);// dont't edit comment when customization->commentAuthorOnly is true
+                            comment.set('editTextInPopover', t.mode.canEditComments);// dont't edit comment when customization->commentAuthorOnly is true or when permissions.editCommentAuthorOnly is true
                             comment.set('hint', false);
                             this.popoverComments.push(comment);
                         }

apps/common/main/lib/controller/ExternalDiagramEditor.js

@@ -56,6 +56,7 @@ define([
 
 
         var createExternalEditor = function() {
+            !!customization && (customization.uiTheme = Common.localStorage.getItem("ui-theme", "theme-light"));
             externalEditor = new DocsAPI.DocEditor('id-diagram-editor-placeholder', {
                 width       : '100%',
                 height      : '100%',
@@ -242,6 +243,15 @@ define([
                 }
             },
 
+            showExternalEditor: function () {
+                if ( externalEditor ) {
+                    var value = Common.localStorage.getItem("ui-theme", "theme-light");
+                    externalEditor.serviceCommand('theme:change', value);
+                }
+
+                this.diagramEditorView.show();
+            },
+
             warningTitle: 'Warning',
             warningText: 'The object is disabled because of editing by another user.',
             textClose: 'Close',

apps/common/main/lib/controller/History.js

@@ -139,6 +139,12 @@ define([
                     Common.Gateway.requestHistoryData(rev); // получаем url-ы для ревизий
                  }, 10);
             } else {
+                var commentsController = this.getApplication().getController('Common.Controllers.Comments');
+                if (commentsController) {
+                    commentsController.onApiHideComment();
+                    commentsController.clearCollections();
+                }
+
                 var urlDiff = record.get('urlDiff'),
                     token   = record.get('token'),
                     hist = new Asc.asc_CVersionHistory();
@@ -152,11 +158,6 @@ define([
                 hist.asc_setServerVersion(this.currentServerVersion);
                 this.api.asc_showRevision(hist);
 
-                var commentsController = this.getApplication().getController('Common.Controllers.Comments');
-                if (commentsController) {
-                    commentsController.onApiHideComment();
-                    commentsController.clearCollections();
-                }
                 var reviewController = this.getApplication().getController('Common.Controllers.ReviewChanges');
                 if (reviewController)
                     reviewController.onApiShowChange();
@@ -175,6 +176,12 @@ define([
                 };
                 Common.UI.alert(config);
             } else {
+                var commentsController = this.getApplication().getController('Common.Controllers.Comments');
+                if (commentsController) {
+                    commentsController.onApiHideComment();
+                    commentsController.clearCollections();
+                }
+
                 var data = opts.data;
                 var historyStore = this.getApplication().getCollection('Common.Collections.HistoryVersions');
                 if (historyStore && data!==null) {
@@ -210,11 +217,6 @@ define([
                     hist.asc_setServerVersion(this.currentServerVersion);
                     this.api.asc_showRevision(hist);
 
-                    var commentsController = this.getApplication().getController('Common.Controllers.Comments');
-                    if (commentsController) {
-                        commentsController.onApiHideComment();
-                        commentsController.clearCollections();
-                    }
                     var reviewController = this.getApplication().getController('Common.Controllers.ReviewChanges');
                     if (reviewController)
                         reviewController.onApiShowChange();

apps/common/main/lib/controller/Themes.js

@@ -0,0 +1,62 @@
+/**
+ * Created by Maxim.Kadushkin on 2/5/2021.
+ */
+
+define([
+    'core'
+], function () {
+    'use strict';
+
+    Common.UI.Themes = new (function() {
+        var sdk_themes_relation = {
+            'theme-light': 'flat',
+            'theme-dark': 'flatDark'
+        };
+
+        sdk_themes_relation.contains = function (name) {
+            return !!this[name];
+        }
+
+        return {
+            init: function (api) {
+                var me = this;
+                $(window).on('storage', function (e) {
+                    if ( e.key == 'ui-theme' ) {
+                        me.setTheme(e.originalEvent.newValue);
+                    }
+                })
+
+                this.api = api;
+                api.asc_setSkin(sdk_themes_relation[Common.localStorage.getItem('ui-theme', 'theme-light')]);
+
+                // app.eventbus.addListeners({
+                //    'FileMenu': {
+                //         'settings:apply': function (menu) {
+                //         }
+                //     }
+                // }, {id: 'Themes'});
+
+                // getComputedStyle(document.documentElement).getPropertyValue('--background-normal');
+            },
+
+            current: function () {
+                return Common.localStorage.getItem('ui-theme', 'theme-light');
+            },
+
+            setTheme: function (name) {
+                if ( sdk_themes_relation.contains(name) ) {
+                    var classname = document.documentElement.className.replace(/theme-\w+\s?/, '');
+                    document.documentElement.className = classname;
+
+                    this.api.asc_setSkin(sdk_themes_relation[name]);
+                    $(':root').addClass(name);
+                    Common.localStorage.setItem('ui-theme', name);
+                }
+            },
+
+            toggleTheme: function () {
+                this.setTheme(this.current() == 'theme-dark' ? 'theme-light' : 'theme-dark');
+            }
+        }
+    })();
+});

apps/common/main/lib/model/Comment.js

@@ -79,7 +79,8 @@ define([
             hide                : false,
             hint                : false,
             dummy               : undefined,
-            editable            : true
+            editable            : true,
+            removable           : true
         }
     });
     Common.Models.Reply = Backbone.Model.extend({
@@ -96,7 +97,8 @@ define([
             editText            : false,
             editTextInPopover   : false,
             scope               : null,
-            editable            : true
+            editable            : true,
+            removable           : true
         }
     });
 });

apps/common/main/lib/template/AutoCorrectDialog.template

@@ -25,9 +25,9 @@
             </tr>
         <tr>
             <td style="padding-bottom: 8px;">
-                <button type="button" class="btn btn-text-default auto" id="auto-correct-btn-reset" style="min-width: 86px;"><%= scope.textResetAll %></button>
-                <button type="button" class="btn btn-text-default auto" id="auto-correct-btn-delete" style="min-width: 86px;float: right;"><%= scope.textDelete %></button>
-                <button type="button" class="btn btn-text-default auto" id="auto-correct-btn-edit" style="min-width: 86px;float: right;margin-right:5px;"><%= scope.textAdd %></button>
+                <button type="button" class="btn btn-text-default auto" id="auto-correct-btn-reset" style="min-width: 80px;"><%= scope.textResetAll %></button>
+                <button type="button" class="btn btn-text-default auto" id="auto-correct-btn-delete" style="min-width: 80px;float: right;"><%= scope.textDelete %></button>
+                <button type="button" class="btn btn-text-default auto" id="auto-correct-btn-edit" style="min-width: 80px;float: right;margin-right:5px;"><%= scope.textAdd %></button>
                 </td>
             </tr>
         </table>

apps/common/main/lib/template/Comments.template

@@ -36,6 +36,8 @@
                             <div class="btns-reply-ct">
                             <% if (item.get("editable")) { %>
                                 <div class="btn-edit img-commonctrl" data-value="<%=item.get("id")%>"></div>
+                            <% } %>
+                            <% if (item.get("removable")) { %>
                                 <div class="btn-delete img-commonctrl" data-value="<%=item.get("id")%>"></div>
                             <% } %>
                             </div>
@@ -67,13 +69,11 @@
             <div class="edit-ct">
                 <% if (editable) { %>
                     <div class="btn-edit img-commonctrl"></div>
+                <% } %>
+                <% if (removable) { %>
                     <div class="btn-delete img-commonctrl"></div>
                 <% } %>
-                <% if (resolved) { %>
-                <div class="btn-resolve-check img-commonctrl" data-toggle="tooltip"></div>
-                <% } else { %>
-                <div class="btn-resolve img-commonctrl" data-toggle="tooltip"></div>
-                <% } %>
+                <div class="btn-resolve <% if (resolved) print('comment-resolved') %>" data-toggle="tooltip"></div>
             </div>
         <% } %>
 

apps/common/main/lib/template/CommentsPopover.template

@@ -36,7 +36,9 @@
                         <div class="btns-reply-ct">
                             <% if (item.get("editable")) { %>
                                 <div class="btn-edit img-commonctrl" data-value="<%=item.get("id")%>"></div>
-                                <div class="btn-delete img-commonctrl" data-value="<%=item.get("id")%>"></div>
+                            <%}%>
+                            <% if (item.get("removable")) { %>
+                               <div class="btn-delete img-commonctrl" data-value="<%=item.get("id")%>"></div>
                             <%}%>
                         </div>
                     <%}%>
@@ -68,13 +70,11 @@
         <div class="edit-ct">
             <% if (editable) { %>
                 <div class="btn-edit img-commonctrl"></div>
+            <% } %>
+            <% if (removable) { %>
                 <div class="btn-delete img-commonctrl"></div>
             <% } %>
-            <% if (resolved) { %>
-            <div class="btn-resolve-check img-commonctrl" data-toggle="tooltip"></div>
-            <% } else { %>
-            <div class="btn-resolve img-commonctrl" data-toggle="tooltip"></div>
-            <% } %>
+            <div class="btn-resolve <% if (resolved) print('comment-resolved') %>" data-toggle="tooltip"></div>
         </div>
     <% } %>
 

apps/common/main/lib/util/htmlutils.js

@@ -0,0 +1,29 @@
+
+function checkScaling() {
+    var str_mq_150 = "screen and (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 1.9), " +
+        "screen and (min-resolution: 1.5dppx) and (max-resolution: 1.9dppx)";
+    if ( window.matchMedia(str_mq_150).matches ) {
+        document.body.classList.add('pixel-ratio__1_5');
+    }
+}
+
+checkScaling();
+
+var params = (function() {
+    var e,
+        a = /\+/g,  // Regex for replacing addition symbol with a space
+        r = /([^&=]+)=?([^&]*)/g,
+        d = function (s) { return decodeURIComponent(s.replace(a, " ")); },
+        q = window.location.search.substring(1),
+        urlParams = {};
+
+    while (e = r.exec(q))
+        urlParams[d(e[1])] = d(e[2]);
+
+    return urlParams;
+})();
+
+var ui_theme_name = params.uitheme || localStorage.getItem("ui-theme");
+if ( !!ui_theme_name ) {
+    document.body.classList.add(ui_theme_name);
+}

apps/common/main/lib/util/utils.js

@@ -119,31 +119,21 @@ Common.Utils = _.extend(new(function() {
         isMobile = /android|avantgo|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od|ad)|iris|kindle|lge |maemo|midp|mmp|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent || navigator.vendor || window.opera),
         me = this,
         checkSize = function() {
-            me.zoom = 1;
-            if (isChrome && !isOpera && !isMobile && document && document.firstElementChild && document.body) {
-                // делаем простую проверку
-                // считаем: 0 < window.devicePixelRatio < 2 => _devicePixelRatio = 1; zoom = window.devicePixelRatio / _devicePixelRatio;
-                // считаем: window.devicePixelRatio >= 2 => _devicePixelRatio = 2; zoom = window.devicePixelRatio / _devicePixelRatio;
-                if (window.devicePixelRatio > 0.1) {
-                    if (window.devicePixelRatio < 1.99)
-                    {
-                        var _devicePixelRatio = 1;
-                        me.zoom = window.devicePixelRatio / _devicePixelRatio;
-                    }
-                    else
-                    {
-                        var _devicePixelRatio = 2;
-                        me.zoom = window.devicePixelRatio / _devicePixelRatio;
-                    }
-                    // chrome 54.x: zoom = "reset" - clear retina zoom (windows)
-                    //document.firstElementChild.style.zoom = "reset";
-                    document.firstElementChild.style.zoom = 1.0 / me.zoom;                }
-                else
-                    document.firstElementChild.style.zoom = "normal";
+            var scale = window.AscCommon.checkDeviceScale();
+            var $root = $(document.body);
+            if ( scale.devicePixelRatio > 1 && scale.devicePixelRatio <= 1.5 ) {
+                $root.removeClass('pixel-ratio__2');
+                $root.addClass('pixel-ratio__1_5');
+            } else
+            if ( scale.devicePixelRatio > 1.5 && scale.devicePixelRatio < 2 ) {
+                $root.addClass('pixel-ratio__2');
+                $root.removeClass('pixel-ratio__1_5');
+            } else {
+                $root.removeClass('pixel-ratio__1_5 pixel-ratio__2');
             }
 
-            me.innerWidth = window.innerWidth * me.zoom;
-            me.innerHeight = window.innerHeight * me.zoom;
+            // me.innerWidth = window.innerWidth * me.zoom;
+            // me.innerHeight = window.innerHeight * me.zoom;
         };
         me.zoom = 1;
         me.innerWidth = window.innerWidth;
@@ -972,7 +962,8 @@ Common.Utils.UserInfoParser = new(function() {
         separator = String.fromCharCode(160),
         username = '',
         usergroups,
-        permissions;
+        reviewPermissions,
+        reviewGroups;
     return {
         setParser: function(value) {
             parse = !!value;
@@ -1002,23 +993,27 @@ Common.Utils.UserInfoParser = new(function() {
 
         setCurrentName: function(name) {
             username = name;
-            this.setReviewPermissions(permissions);
+            this.setReviewPermissions(reviewGroups, reviewPermissions);
         },
 
         getCurrentName: function() {
             return username;
         },
 
-        setReviewPermissions: function(reviewPermissions) {
-            if (reviewPermissions) {
+        setReviewPermissions: function(groups, permissions) {
+            if (groups) {
+                if  (typeof groups == 'object' && groups.length>0)
+                    usergroups = groups;
+                reviewGroups = groups;
+            } else if (permissions) {
                 var arr = [],
-                    groups  =  this.getParsedGroups(username);
-                groups && groups.forEach(function(group) {
-                    var item = reviewPermissions[group.trim()];
+                    arrgroups  =  this.getParsedGroups(username);
+                arrgroups && arrgroups.forEach(function(group) {
+                    var item = permissions[group.trim()];
                     item && (arr = arr.concat(item));
                 });
                 usergroups = arr;
-                permissions = reviewPermissions;
+                reviewPermissions = permissions;
             }
         },
 

apps/common/main/lib/view/ExtendedColorDialog.js

@@ -125,6 +125,9 @@ define([
             this.spinB.on('change', _.bind(this.showColor, this, null, true)).on('changing', _.bind(this.onChangingRGB, this, 3));
             this.textColor.on('change', _.bind(this.onChangeMaskedField, this));
             this.textColor.on('changed', _.bind(this.onChangedMaskedField, this));
+            this.textColor.$el.on('focus', function() {
+                setTimeout(function(){me.textColor.$el && me.textColor.$el.select();}, 1);
+            });
             this.spinR.$el.find('input').attr('maxlength', 3);
             this.spinG.$el.find('input').attr('maxlength', 3);
             this.spinB.$el.find('input').attr('maxlength', 3);

apps/common/main/lib/view/LanguageDialog.js

@@ -87,7 +87,9 @@ define([
                 '<span class="input-group combobox <%= cls %> combo-langs" id="<%= id %>" style="<%= style %>">',
                     '<input type="text" class="form-control">',
                     '<span class="icon input-icon spellcheck-lang toolbar__icon btn-ic-docspell"></span>',
-                    '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret img-commonctrl"></span></button>',
+                    '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">',
+                        '<span class="caret" />',
+                    '</button>',
                     '<ul class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">',
                         '<% _.each(items, function(item) { %>',
                         '<li id="<%= item.id %>" data-value="<%= item.value %>">',

apps/common/main/lib/view/OpenDialog.js

@@ -68,6 +68,7 @@ define([
                 preview         : options.preview,
                 warning         : options.warning,
                 codepages       : options.codepages,
+                warningMsg      : options.warningMsg,
                 width           : width,
                 height          : height,
                 header          : true,
@@ -85,7 +86,7 @@ define([
                         '<% if (warning) { %>',
                         '<div>',
                             '<div class="icon img-commonctrl warn"></div>',
-                            '<div style="padding-left: 50px;"><div style="font-size: 12px;">' + t.txtProtected+ '</div>',
+                            '<div style="padding-left: 50px;"><div style="font-size: 12px;">' + (typeof _options.warningMsg=='string' ? _options.warningMsg : t.txtProtected) + '</div>',
                                 '<label class="header" style="margin-top: 15px;">' + t.txtPassword + '</label>',
                                 '<div id="id-password-txt" style="width: 290px;"></div></div>',
                         '</div>',

apps/common/main/lib/view/ReviewChanges.js

@@ -457,7 +457,7 @@ define([
                     if (me.btnCommentRemove) {
                         var items = [
                             {
-                                caption: config.canEditComments ? me.txtCommentRemCurrent : me.txtCommentRemMyCurrent,
+                                caption: config.canDeleteComments ? me.txtCommentRemCurrent : me.txtCommentRemMyCurrent,
                                 value: 'current'
                             },
                             {
@@ -465,7 +465,7 @@ define([
                                 value: 'my'
                             }
                         ];
-                        if (config.canEditComments)
+                        if (config.canDeleteComments)
                             items.push({
                                 caption: me.txtCommentRemAll,
                                 value: 'all'

apps/common/main/lib/view/SymbolTableDialog.js

@@ -800,13 +800,16 @@ define([
         },
 
         getPasteSymbol: function(cellId) {
-            var bUpdateRecents = cellId[0] === 'c';
+            var bUpdateRecents = false;
             var sFont;
-            if(bUpdateRecents){
-                sFont = aFontSelects[nCurrentFont].displayValue;
-            } else {
-                var nFontId = parseInt(cellId.split('_')[2]);
-                sFont = aFontSelects[nFontId].displayValue;
+            if (cellId && cellId.length>0) {
+                bUpdateRecents = (cellId[0] === 'c');
+                if(bUpdateRecents){
+                    sFont = aFontSelects[nCurrentFont].displayValue;
+                } else {
+                    var nFontId = parseInt(cellId.split('_')[2]);
+                    sFont = aFontSelects[nFontId].displayValue;
+                }
             }
             return {font: sFont, symbol: this.encodeSurrogateChar(nCurrentSymbol), code: nCurrentSymbol, updateRecents: bUpdateRecents};
         },
@@ -831,7 +834,7 @@ define([
             }
 
             var special = this.btnSpecial.isActive();
-            var settings = special ? this.getSpecialSymbol() : this.getPasteSymbol(this.$window.find('.cell-selected').attr('id'));
+            var settings = (state=='ok') ? (special ? this.getSpecialSymbol() : this.getPasteSymbol(this.$window.find('.cell-selected').attr('id'))) : {};
             if (this.options.handler) {
                 this.options.handler.call(this, this, state, settings);
             }

apps/common/main/resources/img/doc-formats/epub.svg

@@ -1,8 +1,8 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 127" version="1.1" width="100" height="127">
+<svg width="100" height="127" viewBox="0 0 100 127" fill="none" xmlns="http://www.w3.org/2000/svg">
   <symbol id="svg-format-epub">
 <path d="M95 23V119C95 119.796 94.6839 120.559 94.1213 121.121C93.5587 121.684 92.7956 122 92 122H8C7.20435 122 6.44129 121.684 5.87868 121.121C5.31607 120.559 5 119.796 5 119V8C5 7.20435 5.31607 6.44129 5.87868 5.87868C6.44129 5.31607 7.20435 5 8 5H77L95 23Z" fill="#5892B6"/>
 <path opacity="0.2" d="M95 23H80C79.2044 23 78.4413 22.6839 77.8787 22.1213C77.3161 21.5587 77 20.7956 77 20V5L95 23Z" fill="black"/>
-<path d="M40.3218 114H35.3882V105.434H40.3218V106.922H37.2046V108.803H40.105V110.291H37.2046V112.5H40.3218V114ZM43.9312 109.465H44.5288C45.0874 109.465 45.5054 109.355 45.7827 109.137C46.0601 108.914 46.1987 108.592 46.1987 108.17C46.1987 107.744 46.0815 107.43 45.8472 107.227C45.6167 107.023 45.2534 106.922 44.7573 106.922H43.9312V109.465ZM48.0327 108.105C48.0327 109.027 47.7437 109.732 47.1655 110.221C46.5913 110.709 45.7729 110.953 44.7104 110.953H43.9312V114H42.1147V105.434H44.8511C45.8901 105.434 46.6792 105.658 47.2183 106.107C47.7612 106.553 48.0327 107.219 48.0327 108.105ZM56.6226 105.434V110.977C56.6226 111.609 56.48 112.164 56.1948 112.641C55.9136 113.117 55.5054 113.482 54.9702 113.736C54.4351 113.99 53.8022 114.117 53.0718 114.117C51.9702 114.117 51.1147 113.836 50.5054 113.273C49.896 112.707 49.5913 111.934 49.5913 110.953V105.434H51.4019V110.678C51.4019 111.338 51.5347 111.822 51.8003 112.131C52.0659 112.439 52.5054 112.594 53.1187 112.594C53.7124 112.594 54.1421 112.439 54.4077 112.131C54.6772 111.818 54.812 111.33 54.812 110.666V105.434H56.6226ZM58.7202 105.434H61.3862C62.6011 105.434 63.4819 105.607 64.0288 105.955C64.5796 106.299 64.855 106.848 64.855 107.602C64.855 108.113 64.7339 108.533 64.4917 108.861C64.2534 109.189 63.9351 109.387 63.5366 109.453V109.512C64.0796 109.633 64.4702 109.859 64.7085 110.191C64.9507 110.523 65.0718 110.965 65.0718 111.516C65.0718 112.297 64.7886 112.906 64.2222 113.344C63.6597 113.781 62.894 114 61.9253 114H58.7202V105.434ZM60.5366 108.826H61.5913C62.0835 108.826 62.439 108.75 62.6577 108.598C62.8804 108.445 62.9917 108.193 62.9917 107.842C62.9917 107.514 62.8706 107.279 62.6284 107.139C62.3901 106.994 62.0112 106.922 61.4917 106.922H60.5366V108.826ZM60.5366 110.268V112.5H61.7202C62.2202 112.5 62.5894 112.404 62.8276 112.213C63.0659 112.021 63.1851 111.729 63.1851 111.334C63.1851 110.623 62.6772 110.268 61.6616 110.268H60.5366Z" fill="white"/>
+<path d="M40.3217 114H35.3881V105.434H40.3217V106.922H37.2045V108.803H40.1049V110.291H37.2045V112.5H40.3217V114ZM43.9311 109.465H44.5287C45.0873 109.465 45.5053 109.355 45.7827 109.137C46.06 108.914 46.1987 108.592 46.1987 108.17C46.1987 107.744 46.0815 107.43 45.8471 107.227C45.6166 107.023 45.2534 106.922 44.7573 106.922H43.9311V109.465ZM48.0327 108.105C48.0327 109.027 47.7436 109.732 47.1655 110.221C46.5912 110.709 45.7729 110.953 44.7104 110.953H43.9311V114H42.1147V105.434H44.851C45.8901 105.434 46.6791 105.658 47.2182 106.107C47.7612 106.553 48.0327 107.219 48.0327 108.105ZM56.6225 105.434V110.977C56.6225 111.609 56.4799 112.164 56.1948 112.641C55.9135 113.117 55.5053 113.482 54.9702 113.736C54.435 113.99 53.8022 114.117 53.0717 114.117C51.9702 114.117 51.1147 113.836 50.5053 113.273C49.8959 112.707 49.5912 111.934 49.5912 110.953V105.434H51.4018V110.678C51.4018 111.338 51.5346 111.822 51.8002 112.131C52.0659 112.439 52.5053 112.594 53.1186 112.594C53.7123 112.594 54.142 112.439 54.4077 112.131C54.6772 111.818 54.812 111.33 54.812 110.666V105.434H56.6225ZM58.7202 105.434H61.3862C62.601 105.434 63.4819 105.607 64.0287 105.955C64.5795 106.299 64.8549 106.848 64.8549 107.602C64.8549 108.113 64.7338 108.533 64.4916 108.861C64.2534 109.189 63.935 109.387 63.5366 109.453V109.512C64.0795 109.633 64.4702 109.859 64.7084 110.191C64.9506 110.523 65.0717 110.965 65.0717 111.516C65.0717 112.297 64.7885 112.906 64.2221 113.344C63.6596 113.781 62.894 114 61.9252 114H58.7202V105.434ZM60.5366 108.826H61.5912C62.0834 108.826 62.4389 108.75 62.6577 108.598C62.8803 108.445 62.9916 108.193 62.9916 107.842C62.9916 107.514 62.8705 107.279 62.6284 107.139C62.3901 106.994 62.0112 106.922 61.4916 106.922H60.5366V108.826ZM60.5366 110.268V112.5H61.7202C62.2202 112.5 62.5893 112.404 62.8276 112.213C63.0659 112.021 63.185 111.729 63.185 111.334C63.185 110.623 62.6772 110.268 61.6616 110.268H60.5366Z" fill="white"/>
 <path d="M49 84V49C49 49 40 43 25 42V75C25 75 42 76 49 84Z" fill="white"/>
 <path d="M75 75V42C60 43 51 49 51 49V84C58 76 75 75 75 75Z" fill="white"/>
 <path d="M77 47V79C77 79 62 79 50 87.3C38 79 23 79 23 79V47H20V82C20 82 33 80 50 88C67 80 80 82 80 82V47H77Z" fill="white"/>

apps/common/main/resources/img/doc-formats/fb2.svg

@@ -0,0 +1,10 @@
+<svg width="100" height="127" viewBox="0 0 100 127" fill="none" xmlns="http://www.w3.org/2000/svg">
+<symbol id="svg-format-fb2">
+<path d="M95 23V119C95 119.796 94.6839 120.559 94.1213 121.121C93.5587 121.684 92.7956 122 92 122H8C7.20435 122 6.44129 121.684 5.87868 121.121C5.31607 120.559 5 119.796 5 119V8C5 7.20435 5.31607 6.44129 5.87868 5.87868C6.44129 5.31607 7.20435 5 8 5H77L95 23Z" fill="#B07408"/>
+<path opacity="0.2" d="M95 23H80C79.2044 23 78.4413 22.6839 77.8787 22.1213C77.3161 21.5587 77 20.7956 77 20V5L95 23Z" fill="black"/>
+<path d="M41.8652 114H40.0781V105.434H44.9883V106.922H41.8652V109.131H44.7715V110.613H41.8652V114ZM46.6641 105.434H49.3301C50.5449 105.434 51.4258 105.607 51.9727 105.955C52.5234 106.299 52.7988 106.848 52.7988 107.602C52.7988 108.113 52.6777 108.533 52.4355 108.861C52.1973 109.189 51.8789 109.387 51.4805 109.453V109.512C52.0234 109.633 52.4141 109.859 52.6523 110.191C52.8945 110.523 53.0156 110.965 53.0156 111.516C53.0156 112.297 52.7324 112.906 52.166 113.344C51.6035 113.781 50.8379 114 49.8691 114H46.6641V105.434ZM48.4805 108.826H49.5352C50.0273 108.826 50.3828 108.75 50.6016 108.598C50.8242 108.445 50.9355 108.193 50.9355 107.842C50.9355 107.514 50.8145 107.279 50.5723 107.139C50.334 106.994 49.9551 106.922 49.4355 106.922H48.4805V108.826ZM48.4805 110.268V112.5H49.6641C50.1641 112.5 50.5332 112.404 50.7715 112.213C51.0098 112.021 51.1289 111.729 51.1289 111.334C51.1289 110.623 50.6211 110.268 49.6055 110.268H48.4805ZM60.1172 114H54.1289V112.74L56.2793 110.566C56.916 109.914 57.332 109.463 57.5273 109.213C57.7227 108.959 57.8633 108.725 57.9492 108.51C58.0352 108.295 58.0781 108.072 58.0781 107.842C58.0781 107.498 57.9824 107.242 57.791 107.074C57.6035 106.906 57.3516 106.822 57.0352 106.822C56.7031 106.822 56.3809 106.898 56.0684 107.051C55.7559 107.203 55.4297 107.42 55.0898 107.701L54.1055 106.535C54.5273 106.176 54.877 105.922 55.1543 105.773C55.4316 105.625 55.7344 105.512 56.0625 105.434C56.3906 105.352 56.7578 105.311 57.1641 105.311C57.6992 105.311 58.1719 105.408 58.582 105.604C58.9922 105.799 59.3105 106.072 59.5371 106.424C59.7637 106.775 59.877 107.178 59.877 107.631C59.877 108.025 59.8066 108.396 59.666 108.744C59.5293 109.088 59.3145 109.441 59.0215 109.805C58.7324 110.168 58.2207 110.686 57.4863 111.357L56.3848 112.395V112.477H60.1172V114Z" fill="white"/>
+<path d="M49 84V49C49 49 40 43 25 42V75C25 75 42 76 49 84Z" fill="white"/>
+<path d="M75 75V42C60 43 51 49 51 49V84C58 76 75 75 75 75Z" fill="white"/>
+<path d="M77 47V79C77 79 62 79 50 87.3C38 79 23 79 23 79V47H20V82C20 82 33 80 50 88C67 80 80 82 80 82V47H77Z" fill="white"/>
+</symbol>
+</svg>

apps/common/main/resources/img/doc-formats/html.svg

@@ -1,10 +1,10 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 127" version="1.1" width="100" height="127">
-  <symbol id="svg-format-html">
+<svg width="100" height="127" viewBox="0 0 100 127" fill="none" xmlns="http://www.w3.org/2000/svg">
+<symbol id="svg-format-html">
 <path d="M95 23V119C95 119.796 94.6839 120.559 94.1213 121.121C93.5587 121.684 92.7956 122 92 122H8C7.20435 122 6.44129 121.684 5.87868 121.121C5.31607 120.559 5 119.796 5 119V8C5 7.20435 5.31607 6.44129 5.87868 5.87868C6.44129 5.31607 7.20435 5 8 5H77L95 23Z" fill="#7C9A34"/>
 <path opacity="0.2" d="M95 23H80C79.2044 23 78.4413 22.6839 77.8787 22.1213C77.3161 21.5587 77 20.7956 77 20V5L95 23Z" fill="black"/>
 <path d="M40.9877 114H39.1771V110.303H35.7845V114H33.9681V105.434H35.7845V108.791H39.1771V105.434H40.9877V114ZM46.4603 114H44.6439V106.945H42.3177V105.434H48.7865V106.945H46.4603V114ZM53.7318 114L51.6693 107.279H51.6166C51.6908 108.646 51.7279 109.559 51.7279 110.016V114H50.1049V105.434H52.5775L54.6049 111.984H54.64L56.7904 105.434H59.2631V114H57.5697V109.945C57.5697 109.754 57.5717 109.533 57.5756 109.283C57.5834 109.033 57.6107 108.369 57.6576 107.291H57.6049L55.3959 114H53.7318ZM61.4252 114V105.434H63.2416V112.5H66.7162V114H61.4252Z" fill="white"/>
 <path d="M62 53V57.8L75.5 62.5L62 67.2V72L80 64.2V60.8L62 53Z" fill="white"/>
 <path d="M40 75H45.5L59.5 50H54L40 75Z" fill="white"/>
 <path d="M19 64.2L37 72V67.2L23.5 62.5L37 57.8V53L19 60.8V64.2Z" fill="white"/>
-  </symbol>
+</symbol>
 </svg>

apps/common/main/resources/img/toolbar/1.5x/big/.css.handlebars

@@ -10,4 +10,8 @@
         }
     }
 }
+
+.toolbar__icon.toolbar__icon-big {
+    background-size: var(--big-icon-background-image-width) auto;
+}
 {{/spritesheet}}

apps/common/main/resources/img/toolbar/1.5x/huge/.css.handlebars

@@ -0,0 +1,5 @@
+{{#spritesheet}}
+.options__icon.options__icon-huge {
+    background-size: var(--huge-icon-background-image-width) auto;
+}
+{{/spritesheet}}

apps/common/main/resources/img/toolbar/1x/.css.handlebars

@@ -3,18 +3,14 @@
     &.active, &:active {
         &:not(:disabled):not(.disabled) {
             .toolbar__icon {
-                @btn-active-icon-offset: -20px;
-                background-position-x: @btn-active-icon-offset;
-                --bgX: @btn-active-icon-offset;
+                background-position-x: var(--button-small-active-icon-offset-x, 0);
             }
         }
     }
 }
 .menu__icon {
     .no-checkmark.checked & {
-        @btn-active-icon-offset: -20px;
-        background-position-x: @btn-active-icon-offset;
-        --bgX: @btn-active-icon-offset;
+        background-position-x: @menu-icon-item-checked-offset-x;
     }
 }
 .toolbar__icon, .menu__icon {
@@ -23,9 +19,6 @@
 {{/spritesheet}}
 {{#sprites}}
 {{#parselang name}}.{{name}}{{/parselang}} {
-    background-position: {{px.offset_x}} {{px.offset_y}};
-
-    --bgX: {{px.offset_x}};
-    background-position: var(--bgX) {{px.offset_y}};
+    background-position: var(--button-small-normal-icon-offset-x, 0) {{px.offset_y}};
 }
 {{/sprites}}

apps/common/main/resources/img/toolbar/1x/big/.css.handlebars

@@ -4,23 +4,31 @@
         &.active, &:active {
             &:not(:disabled):not(.disabled) {
                 .toolbar__icon {
-                    @btn-active-icon-offset: -28px;
-                    background-position-x: @btn-active-icon-offset;
-                    --bgX: @btn-active-icon-offset;
+                    background-position-x: var(--button-huge-active-icon-offset-x,0);
                 }
             }
         }
     }
+
+    &.active, &:active {
+        &:not(:disabled):not(.disabled) {
+            .toolbar__icon.toolbar__icon-big {
+                background-position-x: var(--button-huge-active-icon-offset-x,0);
+            }
+        }
+    }
 }
 .x-huge .toolbar__icon {
     background-image: url(resources/{{{escaped_image}}});
 }
+.toolbar__icon.toolbar__icon-big {
+    background-image: var(--big-icon-background-image);
+}
 {{/spritesheet}}
 {{#sprites}}
-{{#parselang name}}.x-huge .{{name}}{{/parselang}} {
-    background-position: {{px.offset_x}} {{px.offset_y}};
-
-    --bgX: {{px.offset_x}};
-    background-position: var(--bgX) {{px.offset_y}};
+{{#parselang name}}.x-huge .{{name}}{{/parselang}}, 
+    .toolbar__icon-big.{{name}}
+{
+    background-position: var(--button-huge-normal-icon-offset-x,0) {{px.offset_y}}; 
 }
 {{/sprites}}

apps/common/main/resources/img/toolbar/1x/huge/.css.handlebars

@@ -0,0 +1,22 @@
+{{#spritesheet}}
+.btn {
+    &.active, &:active {
+        &:not(:disabled):not(.disabled) {
+            .options__icon.options__icon-huge {
+                @btn-active-icon-offset: -40px;
+                background-position-x: @btn-active-icon-offset;
+            }
+        }
+    }
+}
+
+.options__icon.options__icon-huge {
+    background-image: var(--huge-icon-background-image);
+}
+{{/spritesheet}}
+{{#sprites}}
+.options__icon-huge.{{name}}
+{
+    background-position: {{px.offset_x}} {{px.offset_y}};
+}
+{{/sprites}}

apps/common/main/resources/img/toolbar/2x/huge/.css.handlebars

@@ -0,0 +1,5 @@
+{{#spritesheet}}
+.options__icon.options__icon-huge {
+    background-size: var(--huge-icon-background-image-width) auto;
+}
+{{/spritesheet}}

apps/common/main/resources/img/toolbar/charttypes.svg

@@ -1,201 +1,201 @@
 <svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <symbol id="chart-column-normal" viewBox="0 0 40 40">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M33 6H27V34H33V6ZM20 14H26V34H20V14ZM19 20H13V34H19V20ZM12 26H6V34H12V26Z" fill="#444444"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M33 6H27V34H33V6ZM20 14H26V34H20V14ZM19 20H13V34H19V20ZM12 26H6V34H12V26Z"/>
 </symbol>
 <symbol id="chart-column-stack" viewBox="0 0 40 40">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M33 17H27V34H33V17ZM20 22H26V34H20V22ZM19 26H13V34H19V26ZM12 29H6V34H12V29Z" fill="#444444"/>
-<path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M33 6H27V17H33V6ZM20 14H26V22H20V14ZM19 20H13V26H19V20ZM12 25H6V29H12V25Z" fill="#444444"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M33 17H27V34H33V17ZM20 22H26V34H20V22ZM19 26H13V34H19V26ZM12 29H6V34H12V29Z"/>
+<path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M33 6H27V17H33V6ZM20 14H26V22H20V14ZM19 20H13V26H19V20ZM12 25H6V29H12V25Z"/>
 </symbol>
 <symbol id="chart-column-pstack" viewBox="0 0 40 40">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M33 14H27V34H33V14ZM20 16H26V34H20V16ZM19 18H13V34H19V18ZM12 21H6V34H12V21Z" fill="#444444"/>
-<path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M12 6H6V21H12V6ZM19 6H13V18H19V6ZM20 6H26V16H20V6ZM33 6H27V14H33V6Z" fill="#444444"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M33 14H27V34H33V14ZM20 16H26V34H20V16ZM19 18H13V34H19V18ZM12 21H6V34H12V21Z"/>
+<path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M12 6H6V21H12V6ZM19 6H13V18H19V6ZM20 6H26V16H20V6ZM33 6H27V14H33V6Z"/>
 </symbol>
 <symbol id="chart-column-3d-normal" viewBox="0 0 40 40">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M23 34L27 35V8L23 7V34ZM22 33L18 32V11L22 12V33ZM13 30L17 31V17L13 16V30ZM8 28L12 29V21L8 20V28Z" fill="#444444"/>
-<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M31 7L27 6L23 7L27 8L31 7ZM22 10L23 10.25V11.75L22 12L18 11L22 10ZM18 15.25L17 15L13 16L17 17L18 16.75V15.25ZM12 19L13 19.25V20.75L12 21L8 20L12 19Z" fill="#444444"/>
-<path opacity="0.4" d="M31 7L27 8V35L31 34V7Z" fill="#444444"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23 34L27 35V8L23 7V34ZM22 33L18 32V11L22 12V33ZM13 30L17 31V17L13 16V30ZM8 28L12 29V21L8 20V28Z"/>
+<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M31 7L27 6L23 7L27 8L31 7ZM22 10L23 10.25V11.75L22 12L18 11L22 10ZM18 15.25L17 15L13 16L17 17L18 16.75V15.25ZM12 19L13 19.25V20.75L12 21L8 20L12 19Z"/>
+<path opacity="0.4" d="M31 7L27 8V35L31 34V7Z"/>
 </symbol>
 <symbol id="chart-column-3d-stack" viewBox="0 0 40 40">
-<path opacity="0.2" d="M27 7L31 6V16L27 17V7Z" fill="#444444"/>
-<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M23 6L27 5L31 6L27 7L23 6ZM31 16L27 17V34L31 33V16ZM26 20H23V32H26V20ZM18 10L22 9L23 9.25V10.75L22 11L18 10ZM17 14L13 15L17 16L18 15.75V14.25L17 14ZM8 19L12 18L13 18.25V19.75L12 20L8 19Z" fill="#444444"/>
-<path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M27 7L23 6V16L27 17V7ZM22 11L18 10V20L22 21V11ZM12 20L8 19V23L12 24V20ZM13 15L17 16V23L13 22V15Z" fill="#444444"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M23 16L27 17V34L23 33V16ZM22 21L18 20V31L22 32V21ZM13 22L17 23V30L13 29V22ZM8 23L12 24V28L8 27V23Z" fill="#444444"/>
+<path opacity="0.2" d="M27 7L31 6V16L27 17V7Z"/>
+<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M23 6L27 5L31 6L27 7L23 6ZM31 16L27 17V34L31 33V16ZM26 20H23V32H26V20ZM18 10L22 9L23 9.25V10.75L22 11L18 10ZM17 14L13 15L17 16L18 15.75V14.25L17 14ZM8 19L12 18L13 18.25V19.75L12 20L8 19Z"/>
+<path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M27 7L23 6V16L27 17V7ZM22 11L18 10V20L22 21V11ZM12 20L8 19V23L12 24V20ZM13 15L17 16V23L13 22V15Z"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23 16L27 17V34L23 33V16ZM22 21L18 20V31L22 32V21ZM13 22L17 23V30L13 29V22ZM8 23L12 24V28L8 27V23Z"/>
 </symbol>
 <symbol id="chart-column-3d-pstack" viewBox="0 0 40 40">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M24 35L28 36V17L24 16V35ZM23 34L19 33V18L23 19V34ZM14 31L18 32V21L14 20V31ZM9 29L13 30V23L9 22V29Z" fill="#444444"/>
-<path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M13 6L9 5V22L13 23V6ZM14 7L18 8V21L14 20V7ZM23 10L19 9V18L23 19V10ZM28 12L24 11V16L28 17V12Z" fill="#444444"/>
-<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M9 5L13 6L17 5L13 4L9 5ZM18 8L14 7L18 6L22 7L18 8ZM19 9L23 10L27 9L23 8L19 9ZM28 12L24 11L28 10L32 11L28 12ZM28 17L32 16V35L28 36V17Z" fill="#444444"/>
-<path opacity="0.2" d="M28 12L32 11V16L28 17V12Z" fill="#444444"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24 35L28 36V17L24 16V35ZM23 34L19 33V18L23 19V34ZM14 31L18 32V21L14 20V31ZM9 29L13 30V23L9 22V29Z"/>
+<path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M13 6L9 5V22L13 23V6ZM14 7L18 8V21L14 20V7ZM23 10L19 9V18L23 19V10ZM28 12L24 11V16L28 17V12Z"/>
+<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M9 5L13 6L17 5L13 4L9 5ZM18 8L14 7L18 6L22 7L18 8ZM19 9L23 10L27 9L23 8L19 9ZM28 12L24 11L28 10L32 11L28 12ZM28 17L32 16V35L28 36V17Z"/>
+<path opacity="0.2" d="M28 12L32 11V16L28 17V12Z"/>
 </symbol>
 <symbol id="chart-column-3d-normal-per" viewBox="0 0 40 40">
-<path d="M24.0002 6L28.0002 7V31L25 30V18V17.5V17L24.0002 16.7617V6Z" fill="#444444"/>
-<path d="M19 10L23 11V16.5L21 16L19 16.5V10Z" fill="#444444"/>
-<path d="M14 14L18 15V16.7617L17 17V20.25L16 20L14 20.5V14Z" fill="#444444"/>
-<path opacity="0.2" d="M21 18L25 17V35L21 36V18Z" fill="#444444"/>
-<path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M32 6L28 7V31L32 30V6ZM17.0002 17L21.0002 18V36L17.0002 35V17ZM12.0002 21L16.0002 22V34L12.0002 33V21ZM11 26L7 25V31L11 32V26Z" fill="#444444"/>
-<path id="lighter max_2" opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M23.9999 6L27.9999 5L31.9999 6L27.9999 7L23.9999 6ZM19.0001 10L23.0001 9L27.0001 10L23.0001 11L19.0001 10ZM18 13L14 14L18 15L22 14L18 13ZM25 17L21 16L17 17L21 18L25 17ZM16 20L17 20.25V21.75L16 22L12 21L16 20ZM11 24L12 24.25V25.75L11 26L7 25L11 24Z" fill="#444444"/>
+<path d="M24.0002 6L28.0002 7V31L25 30V18V17.5V17L24.0002 16.7617V6Z"/>
+<path d="M19 10L23 11V16.5L21 16L19 16.5V10Z"/>
+<path d="M14 14L18 15V16.7617L17 17V20.25L16 20L14 20.5V14Z"/>
+<path opacity="0.2" d="M21 18L25 17V35L21 36V18Z"/>
+<path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M32 6L28 7V31L32 30V6ZM17.0002 17L21.0002 18V36L17.0002 35V17ZM12.0002 21L16.0002 22V34L12.0002 33V21ZM11 26L7 25V31L11 32V26Z"/>
+<path id="lighter max_2" opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M23.9999 6L27.9999 5L31.9999 6L27.9999 7L23.9999 6ZM19.0001 10L23.0001 9L27.0001 10L23.0001 11L19.0001 10ZM18 13L14 14L18 15L22 14L18 13ZM25 17L21 16L17 17L21 18L25 17ZM16 20L17 20.25V21.75L16 22L12 21L16 20ZM11 24L12 24.25V25.75L11 26L7 25L11 24Z"/>
 </symbol>
 <symbol id="chart-line-normal" viewBox="0 0 40 40">
-<path d="M7 7H8V23.2929L16.4586 14.8343L25.4345 21.8156L32.1237 14.1707L32.8763 14.8293L25.5655 23.1844L16.5415 16.1657L8 24.7071V33H34V34H7V7Z" fill="#444444"/>
-<path opacity="0.6" d="M32.8536 20.1464L24.5 11.7929L8 28.2929V29.7071L24.5 13.2071L32.1465 20.8536L32.8536 20.1464Z" fill="#444444"/>
+<path d="M7 7H8V23.2929L16.4586 14.8343L25.4345 21.8156L32.1237 14.1707L32.8763 14.8293L25.5655 23.1844L16.5415 16.1657L8 24.7071V33H34V34H7V7Z"/>
+<path opacity="0.6" d="M32.8536 20.1464L24.5 11.7929L8 28.2929V29.7071L24.5 13.2071L32.1465 20.8536L32.8536 20.1464Z"/>
 </symbol>
 <symbol id="chart-line-stack" viewBox="0 0 40 40">
-<path d="M7 7H8V28.3866L16.4732 20.8549L24.3941 26.7956L32.0956 16.2059L32.9044 16.7941L24.6059 28.2044L16.5268 22.1451L8 29.7245V33H34V34H7V7Z" fill="#444444"/>
-<path opacity="0.6" d="M23.5427 18.1002L32.807 10.8947L32.193 10.1053L23.4573 16.8997L16.4165 12.8764L8 21.2929V22.7071L16.5835 14.1236L23.5427 18.1002Z" fill="#444444"/>
+<path d="M7 7H8V28.3866L16.4732 20.8549L24.3941 26.7956L32.0956 16.2059L32.9044 16.7941L24.6059 28.2044L16.5268 22.1451L8 29.7245V33H34V34H7V7Z"/>
+<path opacity="0.6" d="M23.5427 18.1002L32.807 10.8947L32.193 10.1053L23.4573 16.8997L16.4165 12.8764L8 21.2929V22.7071L16.5835 14.1236L23.5427 18.1002Z"/>
 </symbol>
 <symbol id="chart-line-pstack" viewBox="0 0 40 40">
-<path d="M7 7H8V28.2929L15.4363 20.8566L24.378 26.8177L32.0956 16.2059L32.9044 16.7941L24.622 28.1823L15.5637 22.1434L8 29.7071V33H34V34H7V7Z" fill="#444444"/>
-<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M33 10H8V9H33V10Z" fill="#444444"/>
+<path d="M7 7H8V28.2929L15.4363 20.8566L24.378 26.8177L32.0956 16.2059L32.9044 16.7941L24.622 28.1823L15.5637 22.1434L8 29.7071V33H34V34H7V7Z"/>
+<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M33 10H8V9H33V10Z"/>
 </symbol>
 <symbol id="chart-line-normal-marker" viewBox="0 0 40 40">
-<path opacity="0.6" d="M23 11H26V13.2929L31.7071 19H34V22H31V19.7071L25.2929 14H23.7071L9 28.7071V31H6V28H8.29289L23 13.2929V11Z" fill="#444444"/>
+<path opacity="0.6" d="M23 11H26V13.2929L31.7071 19H34V22H31V19.7071L25.2929 14H23.7071L9 28.7071V31H6V28H8.29289L23 13.2929V11Z"/>
 <g>
-<path d="M8 7H7V23H6V26H7V28H8V26H9V23.7071L15.7071 17H17.6142L24 21.9668V24H27V21.545L31.8519 16H34V13H31V15.455L26.1481 21H24.3858L18 16.0332V14H15V16.2929L8.29289 23H8V7Z" fill="#444444"/>
-<path d="M7 34V31H8V33H34V34H7Z" fill="#444444"/>
+<path d="M8 7H7V23H6V26H7V28H8V26H9V23.7071L15.7071 17H17.6142L24 21.9668V24H27V21.545L31.8519 16H34V13H31V15.455L26.1481 21H24.3858L18 16.0332V14H15V16.2929L8.29289 23H8V7Z"/>
+<path d="M7 34V31H8V33H34V34H7Z"/>
 </g>
 </symbol>
 <symbol id="chart-line-stack-marker" viewBox="0 0 40 40">
-<path opacity="0.6" d="M34 9H31V11.0332L24.6142 16H22V16.067L18 13.7813V12H15V14.2929L8.29289 21H6V24H9V21.7071L15.7071 15H18V14.933L22 17.2187V19H25V16.9668L31.3858 12H34V9Z" fill="#444444"/>
+<path opacity="0.6" d="M34 9H31V11.0332L24.6142 16H22V16.067L18 13.7813V12H15V14.2929L8.29289 21H6V24H9V21.7071L15.7071 15H18V14.933L22 17.2187V19H25V16.9668L31.3858 12H34V9Z"/>
 <g>
-<path d="M8 7H7V21H8V7Z" fill="#444444"/>
-<path d="M7 28V24H8V28H8.4349L15 22.1644V20H18V22L23.3333 26H24.9727L31 17.7124V15H34V18H32.0273L26 26.2876V29H23V27L17.6667 23H15.5651L9 28.8356V31H8V33H34V34H7V31H6V28H7Z" fill="#444444"/>
+<path d="M8 7H7V21H8V7Z"/>
+<path d="M7 28V24H8V28H8.4349L15 22.1644V20H18V22L23.3333 26H24.9727L31 17.7124V15H34V18H32.0273L26 26.2876V29H23V27L17.6667 23H15.5651L9 28.8356V31H8V33H34V34H7V31H6V28H7Z"/>
 </g>
 </symbol>
 <symbol id="chart-line-pstack-marker" viewBox="0 0 40 40">
 <g>
-<path d="M8 7H7V8H8V7Z" fill="#444444"/>
-<path d="M7 28V11H8V28H8.2929L14 22.2929V20H17V21.8991L23.1514 26H24.9727L31 17.7124V15H34V18H32.0273L26 26.2876V29H23V27.1009L16.8486 23H14.7071L9 28.7071V31H8V33H34V34H7V31H6V28H7Z" fill="#444444"/>
+<path d="M8 7H7V8H8V7Z"/>
+<path d="M7 28V11H8V28H8.2929L14 22.2929V20H17V21.8991L23.1514 26H24.9727L31 17.7124V15H34V18H32.0273L26 26.2876V29H23V27.1009L16.8486 23H14.7071L9 28.7071V31H8V33H34V34H7V31H6V28H7Z"/>
 </g>
-<path opacity="0.6" d="M9 8H6V11H9V10H14V11H17V10H23V11H26V10H31V11H34V8H31V9H26V8H23V9H17V8H14V9H9V8Z" fill="#444444"/>
+<path opacity="0.6" d="M9 8H6V11H9V10H14V11H17V10H23V11H26V10H31V11H34V8H31V9H26V8H23V9H17V8H14V9H9V8Z"/>
 </symbol>
 <symbol id="chart-line-3d" viewBox="0 0 40 40">
-<path d="M8 5V28H39V29H7.70711L1.85355 34.8536L1.14645 34.1465L7 28.2929V5H8Z" fill="#444444"/>
-<path d="M12 19L2 24.5L10 24L21.5 38L32 26L24 30.5L12 19Z" fill="#444444"/>
-<path opacity="0.6" d="M24 7C20 10.5 12.4 16.6 12 17L23.0277 12.0132L29.0277 22.0132H35.0277L38 18L32 17L24 7Z" fill="#444444"/>
+<path d="M8 5V28H39V29H7.70711L1.85355 34.8536L1.14645 34.1465L7 28.2929V5H8Z"/>
+<path d="M12 19L2 24.5L10 24L21.5 38L32 26L24 30.5L12 19Z"/>
+<path opacity="0.6" d="M24 7C20 10.5 12.4 16.6 12 17L23.0277 12.0132L29.0277 22.0132H35.0277L38 18L32 17L24 7Z"/>
 </symbol>
 <symbol id="chart-pie-normal" viewBox="0 0 40 40">
-<path d="M5 20C5 22.9667 5.87973 25.8668 7.52796 28.3336C9.17618 30.8003 11.5189 32.7229 14.2597 33.8582C17.0006 34.9935 20.0166 35.2906 22.9264 34.7118C25.8361 34.133 28.5088 32.7044 30.6066 30.6066C32.7044 28.5088 34.133 25.8361 34.7118 22.9264C35.2906 20.0166 34.9935 17.0006 33.8582 14.2597C32.7229 11.5189 30.8003 9.17618 28.3336 7.52796C25.8668 5.87973 22.9667 5 20 5L20 20L5 20Z" fill="#444444"/>
-<path opacity="0.4" d="M20 5C18.0302 5 16.0796 5.38799 14.2597 6.14181C12.4399 6.89563 10.7863 8.00052 9.3934 9.3934C8.00052 10.7863 6.89563 12.4399 6.14181 14.2598C5.38799 16.0796 5 18.0302 5 20L20 20V5Z" fill="#444444"/>
+<path d="M5 20C5 22.9667 5.87973 25.8668 7.52796 28.3336C9.17618 30.8003 11.5189 32.7229 14.2597 33.8582C17.0006 34.9935 20.0166 35.2906 22.9264 34.7118C25.8361 34.133 28.5088 32.7044 30.6066 30.6066C32.7044 28.5088 34.133 25.8361 34.7118 22.9264C35.2906 20.0166 34.9935 17.0006 33.8582 14.2597C32.7229 11.5189 30.8003 9.17618 28.3336 7.52796C25.8668 5.87973 22.9667 5 20 5L20 20L5 20Z"/>
+<path opacity="0.4" d="M20 5C18.0302 5 16.0796 5.38799 14.2597 6.14181C12.4399 6.89563 10.7863 8.00052 9.3934 9.3934C8.00052 10.7863 6.89563 12.4399 6.14181 14.2598C5.38799 16.0796 5 18.0302 5 20L20 20V5Z"/>
 </symbol>
 <symbol id="chart-pie-doughnut" viewBox="0 0 40 40">
-<path d="M5 20C5 22.9667 5.87973 25.8668 7.52796 28.3336C9.17618 30.8003 11.5189 32.7229 14.2597 33.8582C17.0006 34.9935 20.0166 35.2906 22.9264 34.7118C25.8361 34.133 28.5088 32.7044 30.6066 30.6066C32.7044 28.5088 34.133 25.8361 34.7118 22.9264C35.2906 20.0166 34.9935 17.0006 33.8582 14.2597C32.7229 11.5189 30.8003 9.17618 28.3336 7.52796C25.8668 5.87973 22.9667 5 20 5L20 11C21.78 11 23.5201 11.5278 25.0001 12.5168C26.4802 13.5057 27.6337 14.9113 28.3149 16.5558C28.9961 18.2004 29.1743 20.01 28.8271 21.7558C28.4798 23.5016 27.6226 25.1053 26.364 26.364C25.1053 27.6226 23.5016 28.4798 21.7558 28.8271C20.01 29.1743 18.2004 28.9961 16.5558 28.3149C14.9113 27.6337 13.5057 26.4802 12.5168 25.0001C11.5278 23.5201 11 21.78 11 20L5 20Z" fill="#444444"/>
-<path opacity="0.4" d="M20 5C18.0302 5 16.0796 5.38799 14.2597 6.14181C12.4399 6.89563 10.7863 8.00052 9.3934 9.3934C8.00052 10.7863 6.89563 12.4399 6.14181 14.2598C5.38799 16.0796 5 18.0302 5 20L11 20C11 18.8181 11.2328 17.6478 11.6851 16.5559C12.1374 15.4639 12.8003 14.4718 13.636 13.636C14.4718 12.8003 15.4639 12.1374 16.5558 11.6851C17.6478 11.2328 18.8181 11 20 11V5Z" fill="#444444"/>
+<path d="M5 20C5 22.9667 5.87973 25.8668 7.52796 28.3336C9.17618 30.8003 11.5189 32.7229 14.2597 33.8582C17.0006 34.9935 20.0166 35.2906 22.9264 34.7118C25.8361 34.133 28.5088 32.7044 30.6066 30.6066C32.7044 28.5088 34.133 25.8361 34.7118 22.9264C35.2906 20.0166 34.9935 17.0006 33.8582 14.2597C32.7229 11.5189 30.8003 9.17618 28.3336 7.52796C25.8668 5.87973 22.9667 5 20 5L20 11C21.78 11 23.5201 11.5278 25.0001 12.5168C26.4802 13.5057 27.6337 14.9113 28.3149 16.5558C28.9961 18.2004 29.1743 20.01 28.8271 21.7558C28.4798 23.5016 27.6226 25.1053 26.364 26.364C25.1053 27.6226 23.5016 28.4798 21.7558 28.8271C20.01 29.1743 18.2004 28.9961 16.5558 28.3149C14.9113 27.6337 13.5057 26.4802 12.5168 25.0001C11.5278 23.5201 11 21.78 11 20L5 20Z"/>
+<path opacity="0.4" d="M20 5C18.0302 5 16.0796 5.38799 14.2597 6.14181C12.4399 6.89563 10.7863 8.00052 9.3934 9.3934C8.00052 10.7863 6.89563 12.4399 6.14181 14.2598C5.38799 16.0796 5 18.0302 5 20L11 20C11 18.8181 11.2328 17.6478 11.6851 16.5559C12.1374 15.4639 12.8003 14.4718 13.636 13.636C14.4718 12.8003 15.4639 12.1374 16.5558 11.6851C17.6478 11.2328 18.8181 11 20 11V5Z"/>
 </symbol>
 <symbol id="chart-pie-3d-normal" viewBox="0 0 40 40">
-<path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M31.3137 9.22183C34.3143 11.2847 36 14.0826 36 17L36 22C36 24.9174 34.3143 27.7153 31.3137 29.7782C28.3131 31.8411 24.2435 33 20 33C15.7565 33 11.6869 31.8411 8.68629 29.7782C5.68571 27.7153 4 24.9174 4 22V17C4 14.0826 5.68571 11.2847 8.68629 9.22182C11.6869 7.15892 15.7565 6 20 6C24.2435 6 28.3131 7.15893 31.3137 9.22183Z" fill="#444444"/>
-<path d="M4 17C4 19.1756 4.93838 21.3023 6.69649 23.1113C8.45459 24.9202 10.9534 26.3301 13.8771 27.1627C16.8007 27.9952 20.0177 28.2131 23.1214 27.7886C26.2251 27.3642 29.0761 26.3166 31.3137 24.7782C33.5513 23.2398 35.0752 21.2798 35.6926 19.146C36.3099 17.0122 35.9931 14.8005 34.7821 12.7905C33.5711 10.7805 31.5203 9.06253 28.8891 7.85383C26.2579 6.64514 23.1645 6 20 6L20 17L4 17Z" fill="#444444"/>
+<path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M31.3137 9.22183C34.3143 11.2847 36 14.0826 36 17L36 22C36 24.9174 34.3143 27.7153 31.3137 29.7782C28.3131 31.8411 24.2435 33 20 33C15.7565 33 11.6869 31.8411 8.68629 29.7782C5.68571 27.7153 4 24.9174 4 22V17C4 14.0826 5.68571 11.2847 8.68629 9.22182C11.6869 7.15892 15.7565 6 20 6C24.2435 6 28.3131 7.15893 31.3137 9.22183Z"/>
+<path d="M4 17C4 19.1756 4.93838 21.3023 6.69649 23.1113C8.45459 24.9202 10.9534 26.3301 13.8771 27.1627C16.8007 27.9952 20.0177 28.2131 23.1214 27.7886C26.2251 27.3642 29.0761 26.3166 31.3137 24.7782C33.5513 23.2398 35.0752 21.2798 35.6926 19.146C36.3099 17.0122 35.9931 14.8005 34.7821 12.7905C33.5711 10.7805 31.5203 9.06253 28.8891 7.85383C26.2579 6.64514 23.1645 6 20 6L20 17L4 17Z"/>
 </symbol>
 <symbol id="chart-bar-normal" viewBox="0 0 40 40">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M15 6H6V12H15V6ZM6 27V33H34V27H6ZM6 13H20V19H6V13ZM26 20H6V26H26V20Z" fill="#444444"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15 6H6V12H15V6ZM6 27V33H34V27H6ZM6 13H20V19H6V13ZM26 20H6V26H26V20Z"/>
 </symbol>
 <symbol id="chart-bar-stack" viewBox="0 0 40 40">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M11 6H6V12H11V6ZM14 13H6V19H14V13ZM6 20H18V26H6V20ZM23 27H6V33H23V27Z" fill="#444444"/>
-<path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M15 6H11V12H15V6ZM20 13H14V19H20V13ZM18 20H26V26H18V20ZM34 27H23V33H34V27Z" fill="#444444"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11 6H6V12H11V6ZM14 13H6V19H14V13ZM6 20H18V26H6V20ZM23 27H6V33H23V27Z"/>
+<path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M15 6H11V12H15V6ZM20 13H14V19H20V13ZM18 20H26V26H18V20ZM34 27H23V33H34V27Z"/>
 </symbol>
 <symbol id="chart-bar-pstack" viewBox="0 0 40 40">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M20 6H6V12H20V6ZM22 13H6V19H22V13ZM6 20H24V26H6V20ZM26 27H6V33H26V27Z" fill="#444444"/>
-<path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M34 6H20V12H34V6ZM34 13H22V19H34V13ZM24 20H34V26H24V20ZM34 27H26V33H34V27Z" fill="#444444"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20 6H6V12H20V6ZM22 13H6V19H22V13ZM6 20H24V26H6V20ZM26 27H6V33H26V27Z"/>
+<path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M34 6H20V12H34V6ZM34 13H22V19H34V13ZM24 20H34V26H24V20ZM34 27H26V33H34V27Z"/>
 </symbol>
 <symbol id="chart-bar-3d-normal" viewBox="0 0 40 40">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M20 9L8 5V10L20 14V9ZM8 11L23 16V21L8 16V11ZM26 23L8 17L8 22L26 28V23ZM29 30L8 23V28L29 35L29 30Z" fill="#444444"/>
-<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M24 8L20 9V14L24 13V8ZM23 16L27 15V20L23 21V16ZM30 22L26 23V28L30 27V22ZM33 29L29 30V35L33 34V29Z" fill="#444444"/>
-<path opacity="0.4" d="M12 4L24 8L20 9L8 5L12 4Z" fill="#444444"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20 9L8 5V10L20 14V9ZM8 11L23 16V21L8 16V11ZM26 23L8 17L8 22L26 28V23ZM29 30L8 23V28L29 35L29 30Z"/>
+<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M24 8L20 9V14L24 13V8ZM23 16L27 15V20L23 21V16ZM30 22L26 23V28L30 27V22ZM33 29L29 30V35L33 34V29Z"/>
+<path opacity="0.4" d="M12 4L24 8L20 9L8 5L12 4Z"/>
 </symbol>
 <symbol id="chart-bar-3d-stack" viewBox="0 0 40 40">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M11 6L8 5V10L11 11V6ZM8 16V11L14 13V18L8 16ZM17 20L8 17L8 22L17 25V20ZM8 23V28L20 32V27L8 23Z" fill="#444444"/>
-<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M15 5L12 4L8 5L11 6L15 5ZM20 9L24 8V13L20 14V9ZM27 15L23 16V21L27 20V15ZM26 23L30 22V27L26 28V23ZM29 30L33 29V34L29 35L29 30Z" fill="#444444"/>
-<path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M20 9L11 6V11L20 14V9ZM14 13L23 16V21L14 18V13ZM26 23L17 20V25L26 28V23ZM29 30L20 27V32L29 35V30Z" fill="#444444"/>
-<path opacity="0.2" d="M15 5L24 8L20 9L11 6L15 5Z" fill="#444444"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11 6L8 5V10L11 11V6ZM8 16V11L14 13V18L8 16ZM17 20L8 17L8 22L17 25V20ZM8 23V28L20 32V27L8 23Z"/>
+<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M15 5L12 4L8 5L11 6L15 5ZM20 9L24 8V13L20 14V9ZM27 15L23 16V21L27 20V15ZM26 23L30 22V27L26 28V23ZM29 30L33 29V34L29 35L29 30Z"/>
+<path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M20 9L11 6V11L20 14V9ZM14 13L23 16V21L14 18V13ZM26 23L17 20V25L26 28V23ZM29 30L20 27V32L29 35V30Z"/>
+<path opacity="0.2" d="M15 5L24 8L20 9L11 6L15 5Z"/>
 </symbol>
 <symbol id="chart-bar-3d-pstack" viewBox="0 0 40 40">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M14 7L8 5V10L14 12V7ZM8 11L17 14V19L8 16V11ZM20 26V21L8 17V22L20 26ZM23 28L8 23V28L23 33V28Z" fill="#444444"/>
-<path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M29 12L14 7V12L29 17V12ZM17 14L29 18V23L17 19V14ZM29 24L20 21V26L29 29V24ZM29 30L23 28V33L29 35V30Z" fill="#444444"/>
-<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M18 6L12 4L8 5L14 7L18 6ZM29 12L33 11V16L29 17V12ZM33 17L29 18V23L33 22V17ZM29 24L33 23V28L29 29V24ZM29 30L33 29V34L29 35V30Z" fill="#444444"/>
-<path opacity="0.2" d="M18 6L33 11L29 12L14 7L18 6Z" fill="#444444"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14 7L8 5V10L14 12V7ZM8 11L17 14V19L8 16V11ZM20 26V21L8 17V22L20 26ZM23 28L8 23V28L23 33V28Z"/>
+<path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M29 12L14 7V12L29 17V12ZM17 14L29 18V23L17 19V14ZM29 24L20 21V26L29 29V24ZM29 30L23 28V33L29 35V30Z"/>
+<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M18 6L12 4L8 5L14 7L18 6ZM29 12L33 11V16L29 17V12ZM33 17L29 18V23L33 22V17ZM29 24L33 23V28L29 29V24ZM29 30L33 29V34L29 35V30Z"/>
+<path opacity="0.2" d="M18 6L33 11L29 12L14 7L18 6Z"/>
 </symbol>
 <symbol id="chart-area-normal" viewBox="0 0 40 40">
-<path d="M15.5 24L19.5 29L34 14V34H6L15.5 24Z" fill="#444444"/>
-<path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M19.5 29L15.5 24L6 34L15.5 15L20.5 22H26.2667L19.5 29Z" fill="#444444"/>
+<path d="M15.5 24L19.5 29L34 14V34H6L15.5 24Z"/>
+<path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M19.5 29L15.5 24L6 34L15.5 15L20.5 22H26.2667L19.5 29Z"/>
 </symbol>
 <symbol id="chart-area-stack" viewBox="0 0 40 40">
-<path d="M15.5 24L19.5 29L34 14V34H6L15.5 24Z" fill="#444444"/>
-<path opacity="0.4" d="M15.5 17L19.5 22L34 7V14L19.5 29L15.5 24L6 34V27L15.5 17Z" fill="#444444"/>
+<path d="M15.5 24L19.5 29L34 14V34H6L15.5 24Z"/>
+<path opacity="0.4" d="M15.5 17L19.5 22L34 7V14L19.5 29L15.5 24L6 34V27L15.5 17Z"/>
 </symbol>
 <symbol id="chart-area-pstack" viewBox="0 0 40 40">
-<path d="M15.5 24L19.5 29L34 14V34H6L15.5 24Z" fill="#444444"/>
-<path opacity="0.4" d="M6 6H34V14L19.5 29L15.5 24L6 34V6Z" fill="#444444"/>
+<path d="M15.5 24L19.5 29L34 14V34H6L15.5 24Z"/>
+<path opacity="0.4" d="M6 6H34V14L19.5 29L15.5 24L6 34V6Z"/>
 </symbol>
 <symbol id="chart-point-normal" viewBox="0 0 40 40">
-<path d="M8 7H7V34H34V33H8V7Z" fill="#444444"/>
-<circle opacity="0.6" cx="11.5" cy="11.5" r="1.5" fill="#444444"/>
-<circle opacity="0.6" cx="23.5" cy="26.5" r="1.5" fill="#444444"/>
-<circle opacity="0.6" cx="17.5" cy="23.5" r="1.5" fill="#444444"/>
-<circle opacity="0.6" cx="29.5" cy="15.5" r="1.5" fill="#444444"/>
-<circle cx="19.5" cy="17.5" r="1.5" fill="#444444"/>
-<circle cx="26.5" cy="21.5" r="1.5" fill="#444444"/>
-<circle cx="32.5" cy="29.5" r="1.5" fill="#444444"/>
-<circle cx="13.5" cy="29.5" r="1.5" fill="#444444"/>
+<path d="M8 7H7V34H34V33H8V7Z"/>
+<circle opacity="0.6" cx="11.5" cy="11.5" r="1.5"/>
+<circle opacity="0.6" cx="23.5" cy="26.5" r="1.5"/>
+<circle opacity="0.6" cx="17.5" cy="23.5" r="1.5"/>
+<circle opacity="0.6" cx="29.5" cy="15.5" r="1.5"/>
+<circle cx="19.5" cy="17.5" r="1.5"/>
+<circle cx="26.5" cy="21.5" r="1.5"/>
+<circle cx="32.5" cy="29.5" r="1.5"/>
+<circle cx="13.5" cy="29.5" r="1.5"/>
 </symbol>
 <symbol id="chart-point-smooth-marker">
-<path d="M8 7H7V34H34V33H8V7Z" fill="#444444"/>
-<path d="M17.0422 21.072C15.5933 23.6173 14.6852 26.6759 14.2179 29.1826C14.6839 29.4371 15 29.9316 15 30.5C15 31.3284 14.3284 32 13.5 32C12.6716 32 12 31.3284 12 30.5C12 29.7637 12.5305 29.1513 13.2302 29.0242C13.7112 26.4326 14.6511 23.2512 16.1731 20.5773C16.7182 19.6197 17.3455 18.7155 18.061 17.9248C18.0213 17.7901 18 17.6475 18 17.5C18 16.6716 18.6716 16 19.5 16C19.7327 16 19.9531 16.053 20.1497 16.1476C21.4081 15.3625 22.8602 14.9207 24.524 15.0006C27.3348 15.1355 29.1082 16.7726 30.3338 19.0091C30.3884 19.0031 30.4438 19 30.5 19C31.3284 19 32 19.6716 32 20.5C32 20.966 31.7875 21.3824 31.454 21.6575C31.9597 23.266 32.3158 25.1464 32.5569 26.7376C32.6898 27.6148 32.789 28.4131 32.8594 29.0433C33.5142 29.2043 34 29.7954 34 30.5C34 31.3284 33.3284 32 32.5 32C31.6716 32 31 31.3284 31 30.5C31 29.8989 31.3536 29.3804 31.8641 29.1411C31.7949 28.5233 31.6978 27.7432 31.5681 26.8874C31.3297 25.3139 30.9855 23.5141 30.5135 21.9999C30.509 22 30.5045 22 30.5 22C29.6716 22 29 21.3284 29 20.5C29 20.0888 29.1655 19.7163 29.4334 19.4453C28.3127 17.4165 26.7926 16.1107 24.476 15.9994C23.1345 15.935 21.9354 16.2636 20.8679 16.8835C20.9528 17.0716 21 17.2803 21 17.5C21 18.3284 20.3284 19 19.5 19C19.1914 19 18.9046 18.9068 18.6662 18.7471C18.0682 19.4327 17.528 20.2185 17.0422 21.072Z" fill="#444444"/>
-<path opacity="0.6" d="M31.2474 10.8008C31.6972 10.5419 32 10.0563 32 9.5C32 8.67157 31.3284 8 30.5 8C29.6716 8 29 8.67157 29 9.5C29 10.248 29.5475 10.8681 30.2635 10.9815C30.3269 11.3782 30.3949 11.8477 30.4583 12.3725C30.6601 14.0414 30.8139 16.2547 30.631 18.4586C30.4473 20.6716 29.9281 22.8195 28.8285 24.4022C27.954 25.661 26.6969 26.5866 24.8715 26.8916C24.6381 26.3663 24.1118 26 23.5 26C22.889 26 22.3633 26.3653 22.1295 26.8894C18.188 26.2417 15.4816 22.8452 13.6972 19.2764C12.7147 17.3114 12.0371 15.3416 11.605 13.86C11.4868 13.4547 11.3872 13.0867 11.3048 12.766C11.7228 12.4998 12 12.0323 12 11.5C12 10.6716 11.3284 10 10.5 10C9.67157 10 9 10.6716 9 11.5C9 12.271 9.58162 12.9061 10.33 12.9905C10.4161 13.3266 10.5206 13.7134 10.645 14.14C11.0879 15.6584 11.7853 17.6886 12.8028 19.7236C14.6287 23.3755 17.5706 27.2021 22.0514 27.8907C22.2233 28.5297 22.8067 29 23.5 29C24.1928 29 24.7759 28.5303 24.9483 27.892C27.0845 27.5584 28.6056 26.4758 29.6498 24.9728C30.895 23.1805 31.4377 20.8284 31.6275 18.5414C31.8182 16.2452 31.6574 13.9586 31.4511 12.2525C31.3848 11.7038 31.3136 11.2137 31.2474 10.8008Z" fill="#444444"/>
+<path d="M8 7H7V34H34V33H8V7Z"/>
+<path d="M17.0422 21.072C15.5933 23.6173 14.6852 26.6759 14.2179 29.1826C14.6839 29.4371 15 29.9316 15 30.5C15 31.3284 14.3284 32 13.5 32C12.6716 32 12 31.3284 12 30.5C12 29.7637 12.5305 29.1513 13.2302 29.0242C13.7112 26.4326 14.6511 23.2512 16.1731 20.5773C16.7182 19.6197 17.3455 18.7155 18.061 17.9248C18.0213 17.7901 18 17.6475 18 17.5C18 16.6716 18.6716 16 19.5 16C19.7327 16 19.9531 16.053 20.1497 16.1476C21.4081 15.3625 22.8602 14.9207 24.524 15.0006C27.3348 15.1355 29.1082 16.7726 30.3338 19.0091C30.3884 19.0031 30.4438 19 30.5 19C31.3284 19 32 19.6716 32 20.5C32 20.966 31.7875 21.3824 31.454 21.6575C31.9597 23.266 32.3158 25.1464 32.5569 26.7376C32.6898 27.6148 32.789 28.4131 32.8594 29.0433C33.5142 29.2043 34 29.7954 34 30.5C34 31.3284 33.3284 32 32.5 32C31.6716 32 31 31.3284 31 30.5C31 29.8989 31.3536 29.3804 31.8641 29.1411C31.7949 28.5233 31.6978 27.7432 31.5681 26.8874C31.3297 25.3139 30.9855 23.5141 30.5135 21.9999C30.509 22 30.5045 22 30.5 22C29.6716 22 29 21.3284 29 20.5C29 20.0888 29.1655 19.7163 29.4334 19.4453C28.3127 17.4165 26.7926 16.1107 24.476 15.9994C23.1345 15.935 21.9354 16.2636 20.8679 16.8835C20.9528 17.0716 21 17.2803 21 17.5C21 18.3284 20.3284 19 19.5 19C19.1914 19 18.9046 18.9068 18.6662 18.7471C18.0682 19.4327 17.528 20.2185 17.0422 21.072Z"/>
+<path opacity="0.6" d="M31.2474 10.8008C31.6972 10.5419 32 10.0563 32 9.5C32 8.67157 31.3284 8 30.5 8C29.6716 8 29 8.67157 29 9.5C29 10.248 29.5475 10.8681 30.2635 10.9815C30.3269 11.3782 30.3949 11.8477 30.4583 12.3725C30.6601 14.0414 30.8139 16.2547 30.631 18.4586C30.4473 20.6716 29.9281 22.8195 28.8285 24.4022C27.954 25.661 26.6969 26.5866 24.8715 26.8916C24.6381 26.3663 24.1118 26 23.5 26C22.889 26 22.3633 26.3653 22.1295 26.8894C18.188 26.2417 15.4816 22.8452 13.6972 19.2764C12.7147 17.3114 12.0371 15.3416 11.605 13.86C11.4868 13.4547 11.3872 13.0867 11.3048 12.766C11.7228 12.4998 12 12.0323 12 11.5C12 10.6716 11.3284 10 10.5 10C9.67157 10 9 10.6716 9 11.5C9 12.271 9.58162 12.9061 10.33 12.9905C10.4161 13.3266 10.5206 13.7134 10.645 14.14C11.0879 15.6584 11.7853 17.6886 12.8028 19.7236C14.6287 23.3755 17.5706 27.2021 22.0514 27.8907C22.2233 28.5297 22.8067 29 23.5 29C24.1928 29 24.7759 28.5303 24.9483 27.892C27.0845 27.5584 28.6056 26.4758 29.6498 24.9728C30.895 23.1805 31.4377 20.8284 31.6275 18.5414C31.8182 16.2452 31.6574 13.9586 31.4511 12.2525C31.3848 11.7038 31.3136 11.2137 31.2474 10.8008Z"/>
 </symbol>
 <symbol id="chart-point-smooth">
-<path d="M8 7H7V34H34V33H8V7Z" fill="#444444"/>
-<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M29.6498 24.9728C28.3834 26.7956 26.4157 28 23.5 28C18.1946 28 14.8187 23.7553 12.8028 19.7236C11.7853 17.6886 11.0879 15.6584 10.645 14.14C10.4233 13.3799 10.2647 12.7458 10.1614 12.3006C10.1097 12.0779 10.0718 11.9023 10.0466 11.7817C10.0341 11.7213 10.0247 11.6747 10.0184 11.6428L10.0112 11.6061L10.0093 11.5962L10.0088 11.5935C10.0088 11.5932 10.0086 11.5921 10.5 11.5C10.9914 11.4079 10.9914 11.4078 10.9914 11.4078L10.9918 11.4096L10.9932 11.4171L10.9994 11.449C11.0051 11.4776 11.0138 11.5209 11.0256 11.5777C11.0493 11.6914 11.0856 11.8596 11.1355 12.0744C11.2353 12.5042 11.3892 13.1201 11.605 13.86C12.0371 15.3416 12.7147 17.3114 13.6972 19.2764C15.6813 23.2447 18.8054 27 23.5 27C26.09 27 27.7501 25.9544 28.8285 24.4022C29.9281 22.8195 30.4473 20.6716 30.631 18.4586C30.8139 16.2548 30.6601 14.0414 30.4583 12.3725C30.3576 11.5397 30.2455 10.846 30.1587 10.3616C30.1153 10.1195 30.0783 9.92981 30.0523 9.80137C30.0393 9.73716 30.0291 9.68827 30.0221 9.6558L30.0143 9.61955L30.0125 9.61092L30.012 9.60903L30.5 9.5C30.988 9.39124 30.9881 9.39145 30.9881 9.39173L30.989 9.39564L30.9914 9.40655L31.0002 9.44748C31.0078 9.48313 31.0187 9.53531 31.0324 9.60293C31.0598 9.73817 31.0982 9.93522 31.143 10.1853C31.2326 10.6852 31.3478 11.3978 31.4511 12.2525C31.6574 13.9586 31.8182 16.2453 31.6275 18.5414C31.4377 20.8284 30.895 23.1805 29.6498 24.9728Z" fill="#444444"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M17.0422 21.072C15.3134 24.1091 14.3545 27.877 13.9956 30.5661L13.0044 30.4338C13.3742 27.6634 14.3611 23.7607 16.1731 20.5773C17.98 17.4029 20.6896 14.8165 24.524 15.0006C27.8536 15.1604 29.7275 17.4281 30.9596 20.303C31.7366 22.1161 32.2437 24.6707 32.5569 26.7376C32.7145 27.7779 32.8248 28.7075 32.8957 29.377C32.9311 29.7119 32.9568 29.9822 32.9736 30.1691C32.982 30.2625 32.9882 30.3352 32.9923 30.3847L32.9969 30.4414L32.9981 30.4562L32.9984 30.4601L32.9985 30.4612C32.9985 30.4613 32.9985 30.4616 32.5 30.5L32.0015 30.5384L32.0001 30.5211L31.9957 30.4676C31.9918 30.4202 31.9858 30.3498 31.9776 30.2587C31.9612 30.0764 31.9361 29.8115 31.9012 29.4823C31.8315 28.8238 31.723 27.9095 31.5681 26.8874C31.2563 24.8293 30.7634 22.3839 30.0404 20.697C28.8696 17.9649 27.2396 16.1321 24.476 15.9994C21.202 15.8422 18.776 18.0259 17.0422 21.072Z" fill="#444444"/>
+<path d="M8 7H7V34H34V33H8V7Z"/>
+<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M29.6498 24.9728C28.3834 26.7956 26.4157 28 23.5 28C18.1946 28 14.8187 23.7553 12.8028 19.7236C11.7853 17.6886 11.0879 15.6584 10.645 14.14C10.4233 13.3799 10.2647 12.7458 10.1614 12.3006C10.1097 12.0779 10.0718 11.9023 10.0466 11.7817C10.0341 11.7213 10.0247 11.6747 10.0184 11.6428L10.0112 11.6061L10.0093 11.5962L10.0088 11.5935C10.0088 11.5932 10.0086 11.5921 10.5 11.5C10.9914 11.4079 10.9914 11.4078 10.9914 11.4078L10.9918 11.4096L10.9932 11.4171L10.9994 11.449C11.0051 11.4776 11.0138 11.5209 11.0256 11.5777C11.0493 11.6914 11.0856 11.8596 11.1355 12.0744C11.2353 12.5042 11.3892 13.1201 11.605 13.86C12.0371 15.3416 12.7147 17.3114 13.6972 19.2764C15.6813 23.2447 18.8054 27 23.5 27C26.09 27 27.7501 25.9544 28.8285 24.4022C29.9281 22.8195 30.4473 20.6716 30.631 18.4586C30.8139 16.2548 30.6601 14.0414 30.4583 12.3725C30.3576 11.5397 30.2455 10.846 30.1587 10.3616C30.1153 10.1195 30.0783 9.92981 30.0523 9.80137C30.0393 9.73716 30.0291 9.68827 30.0221 9.6558L30.0143 9.61955L30.0125 9.61092L30.012 9.60903L30.5 9.5C30.988 9.39124 30.9881 9.39145 30.9881 9.39173L30.989 9.39564L30.9914 9.40655L31.0002 9.44748C31.0078 9.48313 31.0187 9.53531 31.0324 9.60293C31.0598 9.73817 31.0982 9.93522 31.143 10.1853C31.2326 10.6852 31.3478 11.3978 31.4511 12.2525C31.6574 13.9586 31.8182 16.2453 31.6275 18.5414C31.4377 20.8284 30.895 23.1805 29.6498 24.9728Z"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.0422 21.072C15.3134 24.1091 14.3545 27.877 13.9956 30.5661L13.0044 30.4338C13.3742 27.6634 14.3611 23.7607 16.1731 20.5773C17.98 17.4029 20.6896 14.8165 24.524 15.0006C27.8536 15.1604 29.7275 17.4281 30.9596 20.303C31.7366 22.1161 32.2437 24.6707 32.5569 26.7376C32.7145 27.7779 32.8248 28.7075 32.8957 29.377C32.9311 29.7119 32.9568 29.9822 32.9736 30.1691C32.982 30.2625 32.9882 30.3352 32.9923 30.3847L32.9969 30.4414L32.9981 30.4562L32.9984 30.4601L32.9985 30.4612C32.9985 30.4613 32.9985 30.4616 32.5 30.5L32.0015 30.5384L32.0001 30.5211L31.9957 30.4676C31.9918 30.4202 31.9858 30.3498 31.9776 30.2587C31.9612 30.0764 31.9361 29.8115 31.9012 29.4823C31.8315 28.8238 31.723 27.9095 31.5681 26.8874C31.2563 24.8293 30.7634 22.3839 30.0404 20.697C28.8696 17.9649 27.2396 16.1321 24.476 15.9994C21.202 15.8422 18.776 18.0259 17.0422 21.072Z"/>
 </symbol>
 <symbol id="chart-point-line-marker">
-<path d="M8 7H7V34H34V33H8V7Z" fill="#444444"/>
-<path d="M22 17.5C22 17.776 21.9254 18.0347 21.7954 18.2568L30.7952 28.893L30.1793 23.9656C29.505 23.8188 29 23.2184 29 22.5C29 21.6716 29.6716 21 30.5 21C31.3284 21 32 21.6716 32 22.5C32 23.087 31.6628 23.5952 31.1716 23.8416L32.2048 32.107L21.0321 18.9029C20.8667 18.9656 20.6874 19 20.5 19C20.3881 19 20.2792 18.9878 20.1743 18.9645L14.7412 27.6575C14.9045 27.8976 15 28.1877 15 28.5C15 29.3284 14.3284 30 13.5 30C12.6716 30 12 29.3284 12 28.5C12 27.6716 12.6716 27 13.5 27C13.6506 27 13.796 27.0222 13.9332 27.0635L19.3264 18.4343C19.1221 18.178 19 17.8533 19 17.5C19 16.6716 19.6716 16 20.5 16C21.3284 16 22 16.6716 22 17.5Z" fill="#444444"/>
-<path opacity="0.6" d="M11.5797 11.5413C11.8399 11.2715 12 10.9045 12 10.5C12 9.67157 11.3284 9 10.5 9C9.67157 9 9 9.67157 9 10.5C9 11.3284 9.67157 12 10.5 12C10.5627 12 10.6246 11.9961 10.6853 11.9887L17.9103 26.4387L28.5216 12.598L25.3187 27.0108C24.5758 27.1003 24 27.7329 24 28.5C24 29.3284 24.6716 30 25.5 30C26.3284 30 27 29.3284 27 28.5C27 27.9635 26.7184 27.4929 26.2949 27.2277L29.6813 11.9892C30.4242 11.8997 31 11.2671 31 10.5C31 9.67157 30.3284 9 29.5 9C28.6716 9 28 9.67157 28 10.5C28 10.8019 28.0892 11.0829 28.2426 11.3183L18.0897 24.5613L11.5797 11.5413Z" fill="#444444"/>
+<path d="M8 7H7V34H34V33H8V7Z"/>
+<path d="M22 17.5C22 17.776 21.9254 18.0347 21.7954 18.2568L30.7952 28.893L30.1793 23.9656C29.505 23.8188 29 23.2184 29 22.5C29 21.6716 29.6716 21 30.5 21C31.3284 21 32 21.6716 32 22.5C32 23.087 31.6628 23.5952 31.1716 23.8416L32.2048 32.107L21.0321 18.9029C20.8667 18.9656 20.6874 19 20.5 19C20.3881 19 20.2792 18.9878 20.1743 18.9645L14.7412 27.6575C14.9045 27.8976 15 28.1877 15 28.5C15 29.3284 14.3284 30 13.5 30C12.6716 30 12 29.3284 12 28.5C12 27.6716 12.6716 27 13.5 27C13.6506 27 13.796 27.0222 13.9332 27.0635L19.3264 18.4343C19.1221 18.178 19 17.8533 19 17.5C19 16.6716 19.6716 16 20.5 16C21.3284 16 22 16.6716 22 17.5Z"/>
+<path opacity="0.6" d="M11.5797 11.5413C11.8399 11.2715 12 10.9045 12 10.5C12 9.67157 11.3284 9 10.5 9C9.67157 9 9 9.67157 9 10.5C9 11.3284 9.67157 12 10.5 12C10.5627 12 10.6246 11.9961 10.6853 11.9887L17.9103 26.4387L28.5216 12.598L25.3187 27.0108C24.5758 27.1003 24 27.7329 24 28.5C24 29.3284 24.6716 30 25.5 30C26.3284 30 27 29.3284 27 28.5C27 27.9635 26.7184 27.4929 26.2949 27.2277L29.6813 11.9892C30.4242 11.8997 31 11.2671 31 10.5C31 9.67157 30.3284 9 29.5 9C28.6716 9 28 9.67157 28 10.5C28 10.8019 28.0892 11.0829 28.2426 11.3183L18.0897 24.5613L11.5797 11.5413Z"/>
 </symbol>
 <symbol id="chart-point-line">
-<path d="M8 7H7V34H34V33H8V7Z" fill="#444444"/>
-<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M28.5216 12.598L17.9103 26.4387L10.0528 10.7236L10.9472 10.2764L18.0897 24.5613L29.1032 10.1958L29.9881 10.6085L25.9881 28.6085L25.0119 28.3915L28.5216 12.598Z" fill="#444444"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M20.4391 16.654L30.7952 28.893L30.0039 22.562L30.9961 22.438L32.2048 32.107L20.5609 18.346L13.424 29.765L12.576 29.235L20.4391 16.654Z" fill="#444444"/>
+<path d="M8 7H7V34H34V33H8V7Z"/>
+<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M28.5216 12.598L17.9103 26.4387L10.0528 10.7236L10.9472 10.2764L18.0897 24.5613L29.1032 10.1958L29.9881 10.6085L25.9881 28.6085L25.0119 28.3915L28.5216 12.598Z"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.4391 16.654L30.7952 28.893L30.0039 22.562L30.9961 22.438L32.2048 32.107L20.5609 18.346L13.424 29.765L12.576 29.235L20.4391 16.654Z"/>
 </symbol>
 <symbol id="chart-stock-normal" viewBox="0 0 40 40">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M8 7H7V20.5V34H34V33H8V7ZM23 12H22V16H20V20H22V24H23V20H25V16H23V12ZM13 27H11V20H13V16H14V20H16V27H14V31H13V27ZM31 11H29V18H31V22H32V18H34V11H32V7H31V11Z" fill="#444444"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 7H7V20.5V34H34V33H8V7ZM23 12H22V16H20V20H22V24H23V20H25V16H23V12ZM13 27H11V20H13V16H14V20H16V27H14V31H13V27ZM31 11H29V18H31V22H32V18H34V11H32V7H31V11Z"/>
 </symbol>
 <symbol id="chart-combo-bar-line" viewBox="0 0 40 40">
-<path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M20 10H26V34H20V10ZM19 14H13V34H19V14ZM12 26H6V34H12V26ZM33 21H27V34H33V21Z" fill="#444444"/>
-<path d="M5 26.5L15.5 16L23.5 24L32.5 15L33.5 16L23.5 26L15.5 18L6 27.5L5 26.5Z" fill="#444444"/>
-<path d="M5 5H6V34H35V35H5V20.5V5Z" fill="#444444"/>
+<path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M20 10H26V34H20V10ZM19 14H13V34H19V14ZM12 26H6V34H12V26ZM33 21H27V34H33V21Z"/>
+<path d="M5 26.5L15.5 16L23.5 24L32.5 15L33.5 16L23.5 26L15.5 18L6 27.5L5 26.5Z"/>
+<path d="M5 5H6V34H35V35H5V20.5V5Z"/>
 </symbol>
 <symbol id="chart-combo-bar-line-sec" viewBox="0 0 40 40">
-<path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M20 10H26V34H20V10ZM19 14H13V34H19V14ZM12 26H6V34H12V26ZM33 21H27V34H33V21Z" fill="#444444"/>
-<path d="M5 26.5L15.5 16L23.5 24L32.5 15L33.5 16L23.5 26L15.5 18L6 27.5L5 26.5Z" fill="#444444"/>
-<path d="M5 5H6V34H35V35H5V20.5V5Z" fill="#444444"/>
-<rect x="34" y="32" width="1" height="1" fill="#444444"/>
-<rect x="34" y="30" width="1" height="1" fill="#444444"/>
-<rect x="34" y="28" width="1" height="1" fill="#444444"/>
-<rect x="34" y="26" width="1" height="1" fill="#444444"/>
-<rect x="34" y="24" width="1" height="1" fill="#444444"/>
-<rect x="34" y="22" width="1" height="1" fill="#444444"/>
-<rect x="34" y="20" width="1" height="1" fill="#444444"/>
-<rect x="34" y="18" width="1" height="1" fill="#444444"/>
-<rect x="34" y="16" width="1" height="1" fill="#444444"/>
-<rect x="34" y="14" width="1" height="1" fill="#444444"/>
-<rect x="34" y="12" width="1" height="1" fill="#444444"/>
-<rect x="34" y="10" width="1" height="1" fill="#444444"/>
-<rect x="34" y="8" width="1" height="1" fill="#444444"/>
-<rect x="34" y="6" width="1" height="1" fill="#444444"/>
+<path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M20 10H26V34H20V10ZM19 14H13V34H19V14ZM12 26H6V34H12V26ZM33 21H27V34H33V21Z"/>
+<path d="M5 26.5L15.5 16L23.5 24L32.5 15L33.5 16L23.5 26L15.5 18L6 27.5L5 26.5Z"/>
+<path d="M5 5H6V34H35V35H5V20.5V5Z"/>
+<rect x="34" y="32" width="1" height="1"/>
+<rect x="34" y="30" width="1" height="1"/>
+<rect x="34" y="28" width="1" height="1"/>
+<rect x="34" y="26" width="1" height="1"/>
+<rect x="34" y="24" width="1" height="1"/>
+<rect x="34" y="22" width="1" height="1"/>
+<rect x="34" y="20" width="1" height="1"/>
+<rect x="34" y="18" width="1" height="1"/>
+<rect x="34" y="16" width="1" height="1"/>
+<rect x="34" y="14" width="1" height="1"/>
+<rect x="34" y="12" width="1" height="1"/>
+<rect x="34" y="10" width="1" height="1"/>
+<rect x="34" y="8" width="1" height="1"/>
+<rect x="34" y="6" width="1" height="1"/>
 </symbol>
 <symbol id="chart-combo-area-bar" viewBox="0 0 40 40">
-<path d="M5 5H6V34H35V35H5V20.5V5Z" fill="#444444"/>
-<path opacity="0.4" d="M6 20.5L15.5 11L23.5 19L33 9.5V34H6V20.5Z" fill="#444444"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M19 19H13V34H19V19ZM12 27H6V34H12V27ZM20 23H26V34H20V23ZM33 26H27V34H33V26Z" fill="#444444"/>
+<path d="M5 5H6V34H35V35H5V20.5V5Z"/>
+<path opacity="0.4" d="M6 20.5L15.5 11L23.5 19L33 9.5V34H6V20.5Z"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19 19H13V34H19V19ZM12 27H6V34H12V27ZM20 23H26V34H20V23ZM33 26H27V34H33V26Z"/>
 </symbol>
 <symbol id="chart-combo-custom" viewBox="0 0 40 40">
-<path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M26 10H20V34H24V33.5L26 31.5V10ZM33 24.5V21H27V30.5L33 24.5ZM13 14H19V34H13V14ZM6 26H12V34H6V26Z" fill="#444444"/>
-<path d="M5 26.5L15.5 16L23.5 24L32.5 15L33.5 16L23.5 26L15.5 18L6 27.5L5 26.5Z" fill="#444444"/>
-<path d="M5 5H6V34H24V35H5V20.5V5Z" fill="#444444"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M34 25L37 28L39 26V25L37 23H36L34 25ZM25 37V34L33 26L36 29L28 37H25Z" fill="#444444"/>
+<path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M26 10H20V34H24V33.5L26 31.5V10ZM33 24.5V21H27V30.5L33 24.5ZM13 14H19V34H13V14ZM6 26H12V34H6V26Z"/>
+<path d="M5 26.5L15.5 16L23.5 24L32.5 15L33.5 16L23.5 26L15.5 18L6 27.5L5 26.5Z"/>
+<path d="M5 5H6V34H24V35H5V20.5V5Z"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M34 25L37 28L39 26V25L37 23H36L34 25ZM25 37V34L33 26L36 29L28 37H25Z"/>
 </symbol>
 <symbol id="chart-spark-line" viewBox="0 0 40 40">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M9.86358 21.8725L15.7636 27.7725L20.7636 16.7725L25.682 21.691L31.6394 5.65181L33.5143 6.34819L26.4717 25.309L21.3901 20.2275L16.3901 31.2275L10.2901 25.1275L5.44232 33.5008L3.71148 32.4987L9.86358 21.8725Z" fill="#444444"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.86358 21.8725L15.7636 27.7725L20.7636 16.7725L25.682 21.691L31.6394 5.65181L33.5143 6.34819L26.4717 25.309L21.3901 20.2275L16.3901 31.2275L10.2901 25.1275L5.44232 33.5008L3.71148 32.4987L9.86358 21.8725Z"/>
 </symbol>
 <defs>
 <clipPath id="clip0">
@@ -203,40 +203,40 @@
 </clipPath>
 </defs>
 <symbol id="chart-spark-column" viewBox="0 0 40 40">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M26 6H20V34H26V6ZM13 14H19V34H13V14ZM33 18H27V34H33V18ZM12 20H6V34H12V20Z" fill="#444444"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M26 6H20V34H26V6ZM13 14H19V34H13V14ZM33 18H27V34H33V18ZM12 20H6V34H12V20Z"/>
 </symbol>
 <symbol id="chart-spark-win" viewBox="0 0 40 40">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M6 7H12V20H6V7ZM13 7H19V20H13V7ZM33 7H27V20H33V7Z" fill="#444444"/>
-<rect opacity="0.4" x="20" y="20" width="6" height="13" fill="#444444"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6 7H12V20H6V7ZM13 7H19V20H13V7ZM33 7H27V20H33V7Z"/>
+<rect opacity="0.4" x="20" y="20" width="6" height="13"/>
 </symbol>
 <symbol id="chart-surface-normal" viewBox="0 0 40 40">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12 6V15.0117L6 28.0117H8.29308L4.64648 31.6581L5.35357 32.3652L9.70733 28.0117H16.5L27 34.0117L30.7242 25.0116L36 25.0116L36 24.0116L31.138 24.0116L33 19.5117L22.5 8.01172L13 14.3451V6H12ZM17.837 24.3331L19.1385 18.5263L23.5873 23.1301C22.7174 23.5372 21.8181 23.8456 20.906 24.0206C19.7223 24.2476 18.7595 24.3698 17.837 24.3331ZM16.617 25.2036L16.2117 27.0117H7.56291L10.2783 21.1283C10.5037 21.3862 10.7771 21.6877 11.0846 22.0044C11.9473 22.8927 13.1287 23.9536 14.2985 24.4692C15.1229 24.8325 15.8764 25.0699 16.617 25.2036ZM16.8359 24.2269C16.1677 24.1101 15.4773 23.8959 14.7018 23.5541C13.72 23.1214 12.6514 22.1823 11.802 21.3077C11.4314 20.9262 11.1121 20.5669 10.8714 20.2852L18.1822 18.2208L16.8359 24.2269ZM17.615 25.3232C17.6295 25.3241 17.644 25.3249 17.6585 25.3257C18.7407 25.3857 19.8305 25.2451 21.0943 25.0027C22.1885 24.7928 23.2713 24.4012 24.3136 23.8817L28.3718 28.0812L26.5102 32.5801L17.1831 27.2503L17.615 25.3232ZM25.2274 23.3883L28.7887 27.0736L31.833 19.7166L30.7961 18.581C30.6237 18.79 30.4188 19.031 30.1871 19.2902C28.8262 20.8126 27.1112 22.2931 25.2274 23.3883ZM30.1147 17.8347L22.7292 9.74581L19.4441 17.4034L24.5166 22.6527C26.3887 21.6052 28.0891 20.1367 29.4415 18.6238C29.7055 18.3285 29.933 18.058 30.1147 17.8347ZM21.6168 9.80239L18.4881 17.0954L11.1883 19.1566L12.7896 15.6871L21.6168 9.80239Z" fill="#444444"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 6V15.0117L6 28.0117H8.29308L4.64648 31.6581L5.35357 32.3652L9.70733 28.0117H16.5L27 34.0117L30.7242 25.0116L36 25.0116L36 24.0116L31.138 24.0116L33 19.5117L22.5 8.01172L13 14.3451V6H12ZM17.837 24.3331L19.1385 18.5263L23.5873 23.1301C22.7174 23.5372 21.8181 23.8456 20.906 24.0206C19.7223 24.2476 18.7595 24.3698 17.837 24.3331ZM16.617 25.2036L16.2117 27.0117H7.56291L10.2783 21.1283C10.5037 21.3862 10.7771 21.6877 11.0846 22.0044C11.9473 22.8927 13.1287 23.9536 14.2985 24.4692C15.1229 24.8325 15.8764 25.0699 16.617 25.2036ZM16.8359 24.2269C16.1677 24.1101 15.4773 23.8959 14.7018 23.5541C13.72 23.1214 12.6514 22.1823 11.802 21.3077C11.4314 20.9262 11.1121 20.5669 10.8714 20.2852L18.1822 18.2208L16.8359 24.2269ZM17.615 25.3232C17.6295 25.3241 17.644 25.3249 17.6585 25.3257C18.7407 25.3857 19.8305 25.2451 21.0943 25.0027C22.1885 24.7928 23.2713 24.4012 24.3136 23.8817L28.3718 28.0812L26.5102 32.5801L17.1831 27.2503L17.615 25.3232ZM25.2274 23.3883L28.7887 27.0736L31.833 19.7166L30.7961 18.581C30.6237 18.79 30.4188 19.031 30.1871 19.2902C28.8262 20.8126 27.1112 22.2931 25.2274 23.3883ZM30.1147 17.8347L22.7292 9.74581L19.4441 17.4034L24.5166 22.6527C26.3887 21.6052 28.0891 20.1367 29.4415 18.6238C29.7055 18.3285 29.933 18.058 30.1147 17.8347ZM21.6168 9.80239L18.4881 17.0954L11.1883 19.1566L12.7896 15.6871L21.6168 9.80239Z"/>
 <g opacity="0.4">
-    <path d="M19.1385 18.5263L17.837 24.3331C18.7595 24.3698 19.7223 24.2476 20.906 24.0206C21.8181 23.8456 22.7174 23.5372 23.5873 23.1301L19.1385 18.5263Z" fill="#444444"/>
-    <path d="M14.7018 23.5541C15.4773 23.8959 16.1677 24.1101 16.8359 24.2269L18.1822 18.2208L10.8714 20.2852C11.1121 20.5669 11.4314 20.9262 11.802 21.3077C12.6514 22.1823 13.72 23.1214 14.7018 23.5541Z" fill="#444444"/>
-    <path d="M22.7292 9.74581L30.1147 17.8347C29.933 18.058 29.7055 18.3285 29.4415 18.6238C28.0891 20.1367 26.3887 21.6052 24.5166 22.6527L19.4441 17.4034L22.7292 9.74581Z" fill="#444444"/>
-    <path d="M18.4881 17.0954L21.6168 9.80239L12.7896 15.6871L11.1883 19.1566L18.4881 17.0954Z" fill="#444444"/>
+    <path d="M19.1385 18.5263L17.837 24.3331C18.7595 24.3698 19.7223 24.2476 20.906 24.0206C21.8181 23.8456 22.7174 23.5372 23.5873 23.1301L19.1385 18.5263Z"/>
+    <path d="M14.7018 23.5541C15.4773 23.8959 16.1677 24.1101 16.8359 24.2269L18.1822 18.2208L10.8714 20.2852C11.1121 20.5669 11.4314 20.9262 11.802 21.3077C12.6514 22.1823 13.72 23.1214 14.7018 23.5541Z"/>
+    <path d="M22.7292 9.74581L30.1147 17.8347C29.933 18.058 29.7055 18.3285 29.4415 18.6238C28.0891 20.1367 26.3887 21.6052 24.5166 22.6527L19.4441 17.4034L22.7292 9.74581Z"/>
+    <path d="M18.4881 17.0954L21.6168 9.80239L12.7896 15.6871L11.1883 19.1566L18.4881 17.0954Z"/>
 </g>
 </symbol>
 <symbol id="chart-surface-wireframe" viewBox="0 0 40 40">
 <g opacity="0.4">
-    <path d="M24.4393 24.0117H17.909L17.6848 25.0117H25.4056L24.4393 24.0117Z" fill="#444444"/>
-    <path d="M29.6419 25.0117H26.7962L25.8299 24.0117H30.0557L29.6419 25.0117Z" fill="#444444"/>
-    <path d="M16.66 25.0117L16.8842 24.0117H13.0004L13.0005 19.684L12.0005 19.9664L12.0004 24.3042L9.29291 27.0117H10.7071L12.7071 25.0117H16.66Z" fill="#444444"/>
-    <path d="M12.0005 18.9273L13.0005 18.6449L13.0005 15.5466L12.7896 15.6871L12.0005 17.397L12.0005 18.9273Z" fill="#444444"/>
+    <path d="M24.4393 24.0117H17.909L17.6848 25.0117H25.4056L24.4393 24.0117Z"/>
+    <path d="M29.6419 25.0117H26.7962L25.8299 24.0117H30.0557L29.6419 25.0117Z"/>
+    <path d="M16.66 25.0117L16.8842 24.0117H13.0004L13.0005 19.684L12.0005 19.9664L12.0004 24.3042L9.29291 27.0117H10.7071L12.7071 25.0117H16.66Z"/>
+    <path d="M12.0005 18.9273L13.0005 18.6449L13.0005 15.5466L12.7896 15.6871L12.0005 17.397L12.0005 18.9273Z"/>
 </g>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12 15.0117V6H13V14.3451L22.5 8.01172L33 19.5117L31.138 24.0116L36 24.0116L36 25.0116L30.7242 25.0116L27 34.0117L16.5 28.0117H9.70733L5.35357 32.3652L4.64648 31.6581L8.29308 28.0117H6L12 15.0117ZM19.1385 18.5263L17.1831 27.2503L26.5102 32.5801L28.3718 28.0812L19.1385 18.5263ZM18.4881 17.0954L21.6168 9.80239L12.7896 15.6871L11.1883 19.1566L18.4881 17.0954ZM22.7292 9.74581L19.4441 17.4034L28.7887 27.0736L31.833 19.7166L22.7292 9.74581ZM7.56291 27.0117L10.6369 20.3514L18.1822 18.2208L16.2117 27.0117H7.56291Z" fill="#444444"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 15.0117V6H13V14.3451L22.5 8.01172L33 19.5117L31.138 24.0116L36 24.0116L36 25.0116L30.7242 25.0116L27 34.0117L16.5 28.0117H9.70733L5.35357 32.3652L4.64648 31.6581L8.29308 28.0117H6L12 15.0117ZM19.1385 18.5263L17.1831 27.2503L26.5102 32.5801L28.3718 28.0812L19.1385 18.5263ZM18.4881 17.0954L21.6168 9.80239L12.7896 15.6871L11.1883 19.1566L18.4881 17.0954ZM22.7292 9.74581L19.4441 17.4034L28.7887 27.0736L31.833 19.7166L22.7292 9.74581ZM7.56291 27.0117L10.6369 20.3514L18.1822 18.2208L16.2117 27.0117H7.56291Z"/>
 </symbol>
 <symbol id="chart-contour-normal" viewBox="0 0 40 40">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M7 7V34H34V7H7ZM19.9994 8H8V20H19.9994V8ZM20.9994 8V20H25.9058C26.221 19.4031 26.5232 18.7899 26.8155 18.1718C27.1967 17.366 27.5639 16.5451 27.9217 15.7452C28.5259 14.3941 29.1035 13.1029 29.6756 12.047C30.1349 11.1992 30.6145 10.4552 31.137 9.91811C31.66 9.38042 32.2762 8.99994 32.9999 8.99993L33 8H20.9994ZM25.355 21H20.9994V25.8163C21.7839 25.398 22.5013 24.8046 23.1681 24.0797C23.9739 23.2036 24.6942 22.147 25.355 21ZM20.9994 26.9284C22.0933 26.4431 23.0537 25.6812 23.9041 24.7567C24.8901 23.6847 25.7426 22.3795 26.5028 21H33V33H20.9994V26.9284ZM19.9994 26.2398V21H8V21.875L8.31595 22.112L8.36241 22.1465C8.40379 22.1771 8.46567 22.2224 8.54631 22.2805C8.70763 22.3967 8.94385 22.5636 9.24104 22.7648C9.83585 23.1676 10.6726 23.7061 11.6401 24.2494C13.5964 25.3479 16.0074 26.4194 18.02 26.5003C18.7238 26.5286 19.3815 26.4361 19.9994 26.2398ZM19.9994 27.2817V33H8V23.1193C8.16619 23.2385 8.3967 23.4008 8.68037 23.5929C9.29197 24.007 10.1529 24.5612 11.1505 25.1214C13.1245 26.2298 15.7135 27.4084 17.9798 27.4995C18.6961 27.5283 19.368 27.4498 19.9994 27.2817ZM33 20H27.0327C27.2702 19.5352 27.4986 19.0664 27.7195 18.5994C28.1239 17.7445 28.5003 16.9021 28.8609 16.0954C29.4506 14.7758 29.9978 13.5515 30.5548 12.5234C30.9997 11.7023 31.4275 11.0537 31.8538 10.6154C32.2796 10.1776 32.6537 9.99993 33 9.99993V20Z" fill="#444444"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M7 7V34H34V7H7ZM19.9994 8H8V20H19.9994V8ZM20.9994 8V20H25.9058C26.221 19.4031 26.5232 18.7899 26.8155 18.1718C27.1967 17.366 27.5639 16.5451 27.9217 15.7452C28.5259 14.3941 29.1035 13.1029 29.6756 12.047C30.1349 11.1992 30.6145 10.4552 31.137 9.91811C31.66 9.38042 32.2762 8.99994 32.9999 8.99993L33 8H20.9994ZM25.355 21H20.9994V25.8163C21.7839 25.398 22.5013 24.8046 23.1681 24.0797C23.9739 23.2036 24.6942 22.147 25.355 21ZM20.9994 26.9284C22.0933 26.4431 23.0537 25.6812 23.9041 24.7567C24.8901 23.6847 25.7426 22.3795 26.5028 21H33V33H20.9994V26.9284ZM19.9994 26.2398V21H8V21.875L8.31595 22.112L8.36241 22.1465C8.40379 22.1771 8.46567 22.2224 8.54631 22.2805C8.70763 22.3967 8.94385 22.5636 9.24104 22.7648C9.83585 23.1676 10.6726 23.7061 11.6401 24.2494C13.5964 25.3479 16.0074 26.4194 18.02 26.5003C18.7238 26.5286 19.3815 26.4361 19.9994 26.2398ZM19.9994 27.2817V33H8V23.1193C8.16619 23.2385 8.3967 23.4008 8.68037 23.5929C9.29197 24.007 10.1529 24.5612 11.1505 25.1214C13.1245 26.2298 15.7135 27.4084 17.9798 27.4995C18.6961 27.5283 19.368 27.4498 19.9994 27.2817ZM33 20H27.0327C27.2702 19.5352 27.4986 19.0664 27.7195 18.5994C28.1239 17.7445 28.5003 16.9021 28.8609 16.0954C29.4506 14.7758 29.9978 13.5515 30.5548 12.5234C30.9997 11.7023 31.4275 11.0537 31.8538 10.6154C32.2796 10.1776 32.6537 9.99993 33 9.99993V20Z"/>
     <g opacity="0.4">
-        <path d="M19.9994 20H8V8H19.9994V20Z" fill="#444444"/>
-        <path d="M20.9994 8V20H25.9058C26.221 19.4031 26.5232 18.7899 26.8155 18.1718C27.1967 17.366 27.5639 16.5451 27.9217 15.7452C28.5259 14.3941 29.1035 13.1029 29.6756 12.047C30.1349 11.1992 30.6145 10.4552 31.137 9.91811C31.66 9.38042 32.2762 8.99994 32.9999 8.99993L33 8H20.9994Z" fill="#444444"/>
-        <path d="M8 21.875L8.31595 22.112L8.36241 22.1465C8.40379 22.1771 8.46567 22.2224 8.54631 22.2805C8.70763 22.3967 8.94385 22.5636 9.24104 22.7648C9.83585 23.1676 10.6726 23.7061 11.6401 24.2494C13.5964 25.3479 16.0074 26.4194 18.02 26.5003C18.7238 26.5286 19.3815 26.4361 19.9994 26.2398V21H8V21.875Z" fill="#444444"/>
-        <path d="M20.9994 21H25.355C24.6942 22.147 23.9739 23.2036 23.1681 24.0797C22.5013 24.8046 21.7839 25.398 20.9994 25.8163V21Z" fill="#444444"/>
+        <path d="M19.9994 20H8V8H19.9994V20Z"/>
+        <path d="M20.9994 8V20H25.9058C26.221 19.4031 26.5232 18.7899 26.8155 18.1718C27.1967 17.366 27.5639 16.5451 27.9217 15.7452C28.5259 14.3941 29.1035 13.1029 29.6756 12.047C30.1349 11.1992 30.6145 10.4552 31.137 9.91811C31.66 9.38042 32.2762 8.99994 32.9999 8.99993L33 8H20.9994Z"/>
+        <path d="M8 21.875L8.31595 22.112L8.36241 22.1465C8.40379 22.1771 8.46567 22.2224 8.54631 22.2805C8.70763 22.3967 8.94385 22.5636 9.24104 22.7648C9.83585 23.1676 10.6726 23.7061 11.6401 24.2494C13.5964 25.3479 16.0074 26.4194 18.02 26.5003C18.7238 26.5286 19.3815 26.4361 19.9994 26.2398V21H8V21.875Z"/>
+        <path d="M20.9994 21H25.355C24.6942 22.147 23.9739 23.2036 23.1681 24.0797C22.5013 24.8046 21.7839 25.398 20.9994 25.8163V21Z"/>
     </g>
 </symbol>
 <symbol id="chart-contour-wireframe" viewBox="0 0 40 40">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M7 7V34H34V7H7ZM19.9994 8H8V20H19.9994V8ZM20.9994 8V20H25.9058C26.221 19.4031 26.5232 18.7899 26.8155 18.1718C27.1967 17.366 27.5639 16.5451 27.9217 15.7452C28.5259 14.3941 29.1035 13.1029 29.6756 12.047C30.1349 11.1992 30.6145 10.4552 31.137 9.91811C31.66 9.38042 32.2762 8.99994 32.9999 8.99993L33 8H20.9994ZM25.355 21H20.9994V25.8163C21.7839 25.398 22.5013 24.8046 23.1681 24.0797C23.9739 23.2036 24.6942 22.147 25.355 21ZM20.9994 26.9284C22.0933 26.4431 23.0537 25.6812 23.9041 24.7567C24.8901 23.6847 25.7426 22.3795 26.5028 21H33V33H20.9994V26.9284ZM19.9994 26.2398V21H8V21.8716L8.30468 22.1035L8.31595 22.112L8.36241 22.1465C8.40379 22.1771 8.46567 22.2224 8.54631 22.2805C8.70763 22.3967 8.94385 22.5636 9.24104 22.7648C9.83585 23.1676 10.6726 23.7061 11.6401 24.2494C13.5964 25.3479 16.0074 26.4194 18.02 26.5003C18.7238 26.5286 19.3815 26.4361 19.9994 26.2398ZM19.9994 27.2817V33H8V23.1193C8.16619 23.2385 8.3967 23.4008 8.68037 23.5929C9.29197 24.007 10.1529 24.5612 11.1505 25.1214C13.1245 26.2298 15.7135 27.4084 17.9798 27.4995C18.6961 27.5283 19.368 27.4498 19.9994 27.2817ZM33 20H27.0327C27.2702 19.5352 27.4986 19.0664 27.7195 18.5994C28.1239 17.7445 28.5003 16.9021 28.8609 16.0954C29.4506 14.7758 29.9978 13.5515 30.5548 12.5234C30.9997 11.7023 31.4275 11.0537 31.8538 10.6154C32.2796 10.1776 32.6537 9.99993 33 9.99993V20Z" fill="#444444"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M7 7V34H34V7H7ZM19.9994 8H8V20H19.9994V8ZM20.9994 8V20H25.9058C26.221 19.4031 26.5232 18.7899 26.8155 18.1718C27.1967 17.366 27.5639 16.5451 27.9217 15.7452C28.5259 14.3941 29.1035 13.1029 29.6756 12.047C30.1349 11.1992 30.6145 10.4552 31.137 9.91811C31.66 9.38042 32.2762 8.99994 32.9999 8.99993L33 8H20.9994ZM25.355 21H20.9994V25.8163C21.7839 25.398 22.5013 24.8046 23.1681 24.0797C23.9739 23.2036 24.6942 22.147 25.355 21ZM20.9994 26.9284C22.0933 26.4431 23.0537 25.6812 23.9041 24.7567C24.8901 23.6847 25.7426 22.3795 26.5028 21H33V33H20.9994V26.9284ZM19.9994 26.2398V21H8V21.8716L8.30468 22.1035L8.31595 22.112L8.36241 22.1465C8.40379 22.1771 8.46567 22.2224 8.54631 22.2805C8.70763 22.3967 8.94385 22.5636 9.24104 22.7648C9.83585 23.1676 10.6726 23.7061 11.6401 24.2494C13.5964 25.3479 16.0074 26.4194 18.02 26.5003C18.7238 26.5286 19.3815 26.4361 19.9994 26.2398ZM19.9994 27.2817V33H8V23.1193C8.16619 23.2385 8.3967 23.4008 8.68037 23.5929C9.29197 24.007 10.1529 24.5612 11.1505 25.1214C13.1245 26.2298 15.7135 27.4084 17.9798 27.4995C18.6961 27.5283 19.368 27.4498 19.9994 27.2817ZM33 20H27.0327C27.2702 19.5352 27.4986 19.0664 27.7195 18.5994C28.1239 17.7445 28.5003 16.9021 28.8609 16.0954C29.4506 14.7758 29.9978 13.5515 30.5548 12.5234C30.9997 11.7023 31.4275 11.0537 31.8538 10.6154C32.2796 10.1776 32.6537 9.99993 33 9.99993V20Z"/>
 </symbol>
 </svg>

apps/common/main/resources/less/about.less

@@ -23,18 +23,19 @@
         margin: 0 30px;
         font: 12px Tahoma;
         letter-spacing: 1px;
-        color: #666666;
+        color: @text-normal;
+        font-weight: bold;
         white-space: nowrap;
     }
 
     .asc-about-version {
         font: 15px Tahoma;
-        color: #b6b6b6;
+        color: @text-tertiary;
     }
 
     .asc-about-companyname {
         font: bold 15px Tahoma;
-        color: #333;
+        color: @text-normal;
     }
 
     label {
@@ -42,11 +43,11 @@
         &.asc-about-desc-name,
         &.asc-about-lic {
             font: 12px Tahoma;
-            color: #333;
+            color: @text-normal;
         }
 
         &.asc-about-desc-name {
-            color: #666666;
+            color: @text-normal;
             white-space: pre;
         }
 
@@ -58,7 +59,7 @@
 
     a {
         font: 12px Tahoma;
-        color: #333;
+        color: @text-normal;
     }
 
     .separator.horizontal {

apps/common/main/resources/less/asc-mixins.less

@@ -85,12 +85,27 @@
 */
 :root {
     --bgX: 0px;
+
+    --pixel-ratio-factor: 1;
+
+    .pixel-ratio__1_5 {
+        @ratio: 1.5;
+        @one-px: 1px / @ratio;
+        @two-px: 2px / @ratio;
+
+        --pixel-ratio-factor: @ratio;
+        --scaled-one-pixel: @one-px;
+        --scaled-two-pixel: @two-px;
+    }
+
+    .pixel-ratio__2 {
+    }
 }
 
-.button-normal-icon(@icon-class, @index, @icon-size) {
+.button-normal-icon(@icon-class, @index, @icon-size, @normal-h-offset: 0px) {
     .@{icon-class} {
         background-position: -0*@icon-size  -@index*@icon-size;
-        background-position: var(--bgX)     -@index*@icon-size;
+        background-position: @normal-h-offset -@index*@icon-size;
     }
 //    .@{icon-class} {background-position-y: -@index*@icon-size;}
 }
@@ -110,19 +125,17 @@
     }
 }
 
-.mx-button-otherstates-icon2(@icon-size) {
+.mx-button-otherstates-icon2(@offset) {
     &.active, &:active{
         &:not(:disabled):not(.disabled) {
             .icon {
-                @btn-active-icon-offset: -1 * @icon-size;
-                background-position-x: @btn-active-icon-offset;
-                --bgX: @btn-active-icon-offset;
+                background-position-x: @offset;
             }
         }
     }
 
-    &.active   svg.icon,
-    &:active   svg.icon {fill:#fff;}
+    //&.active   svg.icon,
+    //&:active   svg.icon {fill:#fff;}
 }
 
 .button-otherstates-icon2(@icon-class, @icon-size) {
@@ -180,13 +193,13 @@
     @2ximage: replace(@imagepath, '\.png$', '@2x.png');
 
     @media only screen {
-        // @media (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 1.9),
-        //     (min-resolution: 1.5dppx) and (max-resolution: 1.9dppx),
-        //         (min-resolution: 144dpi) and (max-resolution: 191dpi)
-        // {
-        //     background-image: ~"url(@{1d5ximage})";
-        //     background-size: @w @h;
-        // }
+         @media (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 1.9),
+             (min-resolution: 1.5dppx) and (max-resolution: 1.9dppx),
+                 (min-resolution: 144dpi) and (max-resolution: 191dpi)
+         {
+             background-image: ~"url(@{1d5ximage})";
+             background-size: @w @h;
+         }
 
         @media (-webkit-min-device-pixel-ratio: 2),
             (min-resolution: 2dppx),
@@ -200,23 +213,24 @@
 
 @common-controls-width: 100px;
 .img-commonctrl, 
-        .dropdown-menu li .checked:before, .input-error:before,
+        .dropdown-menu li .checked:before, .input-error:before, .input-warning:before,
         .btn-toolbar .icon.img-commonctrl, .list-item div.checked:before
 {
     background-image: if(@icon-src-base64, data-uri(%("%s",'@{common-image-path}/@{common-controls}')), ~"url(@{common-image-const-path}/@{common-controls})");
     background-repeat: no-repeat;
+    filter: @component-normal-icon-filer;
 
     @1d5ximage: replace(@common-controls, '\.png$', '@1.5x.png');
     @2ximage: replace(@common-controls, '\.png$', '@2x.png');
 
     @media only screen {
-        //@media (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 1.9),
-        //        (min-resolution: 1.5dppx) and (max-resolution: 1.9dppx),
-        //        (min-resolution: 144dpi) and (max-resolution: 191dpi)
-        //{
-        //    background-image: ~"url(@{common-image-const-path}/@{1d5ximage})";
-        //    background-size: @common-controls-width auto;
-        //}
+        @media (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 1.9),
+                (min-resolution: 1.5dppx) and (max-resolution: 1.9dppx),
+                (min-resolution: 144dpi) and (max-resolution: 191dpi)
+        {
+            background-image: ~"url(@{common-image-const-path}/@{1d5ximage})";
+            background-size: @common-controls-width auto;
+        }
 
         @media (-webkit-min-device-pixel-ratio: 2),
                     (min-resolution: 2dppx),
@@ -235,13 +249,13 @@
     background-repeat: no-repeat;
 
     @media only screen {
-        //@media (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 1.9),
-        //        (min-resolution: 1.5dppx) and (max-resolution: 1.9dppx),
-        //        (min-resolution: 144dpi) and (max-resolution: 191dpi)
-        //{
-        //    background-image: ~"url(@{common-image-const-path}/hsbcolorpicker/hsb-colorpicker@1.5x.png)";
-        //    background-size:  @img-colorpicker-width auto;
-        //}
+        @media (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 1.9),
+                (min-resolution: 1.5dppx) and (max-resolution: 1.9dppx),
+                (min-resolution: 144dpi) and (max-resolution: 191dpi)
+        {
+            background-image: ~"url(@{common-image-const-path}/hsbcolorpicker/hsb-colorpicker@1.5x.png)";
+            background-size:  @img-colorpicker-width auto;
+        }
 
         @media (-webkit-min-device-pixel-ratio: 2),
                     (min-resolution: 2dppx),
@@ -263,13 +277,13 @@
     background-repeat: no-repeat;
 
     @media only screen {
-        //@media (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 1.9),
-        //        (min-resolution: 1.5dppx) and (max-resolution: 1.9dppx),
-        //        (min-resolution: 144dpi) and (max-resolution: 191dpi)
-        //{
-        //    background-image: ~"url(@{common-image-const-path}/controls/flags@1.5x.png)";
-        //    background-size:  @img-flags-width auto;
-        //}
+        @media (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 1.9),
+                (min-resolution: 1.5dppx) and (max-resolution: 1.9dppx),
+                (min-resolution: 144dpi) and (max-resolution: 191dpi)
+        {
+            background-image: ~"url(@{common-image-const-path}/controls/flags@1.5x.png)";
+            background-size:  @img-flags-width auto;
+        }
 
         @media (-webkit-min-device-pixel-ratio: 2),
                 (min-resolution: 2dppx),
@@ -280,3 +294,19 @@
         }
     }
 }
+
+//.adaptive-solid-border(@width, @color, @borderside: all) {
+//    @lb-border: if((@borderside = all), border, e('border-@{borderside}'));
+//    @lb-border-width: if((@borderside = all), border-width, e('border-@{borderside}-width'));
+//
+//    @{lb-border}: @width solid @color;
+//
+//    @media only screen {
+//        @media (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 1.9),
+//            (min-resolution: 1.5dppx) and (max-resolution: 1.9dppx),
+//                (min-resolution: 144dpi) and (max-resolution: 191dpi)
+//        {
+//            @{lb-border-width}: (@width / 1.5);
+//        }
+//    }
+//}

apps/common/main/resources/less/buttons.less

@@ -4,7 +4,8 @@
 
 .btn {
     border-radius: 1px;
-    color: @gray-deep;
+    color: @text-normal;
+    border-width: @scaled-one-px-value;
 
     .btnsize(@value) {
         min-width: @value;
@@ -21,7 +22,7 @@
     }
 
     &.large {
-        .btnsize(31px);
+        .btnsize(30px);
     }
 
     &.huge {
@@ -29,7 +30,7 @@
     }
 
     &.huge-1 {
-        .btnsize(45px);
+        .btnsize(40px);
     }
 
     &.x-huge {
@@ -43,6 +44,11 @@
     &:focus {
         outline: 0;
         outline-offset: 0;
+        color: @text-normal;
+    }
+
+    &:hover {
+        color: @text-normal;
     }
 
     &:active, &.active {
@@ -51,18 +57,22 @@
     }
 
     .caret {
-        width: 7px;
-        height: 7px;
-        border: 0;
-        background-position: @arrow-small-offset-x @arrow-small-offset-y;
-        position: relative;
+        width: 4px;
+        height: 4px;
+        border: solid 1px @icon-normal;
+        border-bottom: none;
+        border-right: none;
+        background-image: none;
+
+        transition: transform 0.2s ease;
+        transform: rotate(-135deg) translate(1px,1px);
     }
 
     //&:active,
     &:active:not(.disabled),
     &.active:not(.disabled){
         .caret {
-            background-position: @arrow-small-offset-x - 7px @arrow-small-offset-y;
+            transform: rotate(45deg);
         }
     }
 
@@ -94,7 +104,7 @@
             &::after {
                 content: ' ';
                 position: absolute;
-                border: 1px solid #000;
+                border: 1px solid @icon-notification-badge;
                 border-left: 0 none;
                 border-right: 0 none;
                 width: 6px;
@@ -109,7 +119,7 @@
                 width: 10px;
                 height: 7px;
                 bottom: 2px;
-                background-color: #ffd112;
+                background-color: @background-notification-badge;
                 border-radius: 2px;
                 right: 0;
             }
@@ -125,7 +135,7 @@
                 width: 8px;
                 height: 8px;
                 background-color: transparent;
-                border: solid 1px @gray-deep;
+                border: solid 1px @text-normal;
                 border-bottom: none;
                 border-right: none;
             }
@@ -157,7 +167,7 @@
     &.active:not(.disabled) {
         .caret-up, .caret-down {
             &::after {
-                border-color: #FFFFFF;
+                border-color: @background-normal;
             }
         }
     }
@@ -213,8 +223,8 @@
             only screen and (-webkit-min-device-pixel-ratio: 1.5),
             only screen and (min-resolution: 1.5dppx),
             only screen and (min-resolution: 144dpi) {
-                width:calc(~"40px/1.5");
-                height:calc(~"40px/1.5");
+                //width:calc(~"40px/1.5");
+                //height:calc(~"40px/1.5");
             }
         }
 
@@ -265,11 +275,11 @@
 .icon-top {
     &.x-huge  {
         .btn&, .btn-group& .btn-toolbar {
-            .mx-button-otherstates-icon2(@x-huge-btn-icon-size);
+            .mx-button-otherstates-icon2(@button-huge-active-icon-offset-x);
         }
 
         .btn.small {
-            .mx-button-otherstates-icon2(20px);
+            .mx-button-otherstates-icon2(@button-small-active-icon-offset-x);
         }
     }
 }
@@ -286,7 +296,7 @@
     .btn.small;
 
     &.bg-white {
-        background-color: #fff;
+        background-color: @background-normal;
     }
 
     &:before,
@@ -297,14 +307,14 @@
 
     &:hover:not(.disabled),
     .over:not(.disabled) {
-        background-color: @secondary;
+        background-color: @highlight-button-hover;
     }
 
 
     &:active:not(.disabled),
     &.active:not(.disabled) {
-        color: lighten(@gray-lighter, 10%);
-        background-color: @primary;
+        color: @text-normal;
+        background-color: @highlight-button-pressed;
     }
 
     &:not(.icon-top)
@@ -362,6 +372,14 @@
         width: 14px;
         height: 3px;
         background-color: red;
+        &.bordered {
+            border: 1px solid @border-regular-control;
+        }
+
+
+        .pixel-ratio__1_5 & {
+            height: 4px;
+        }
     }
 }
 
@@ -377,13 +395,13 @@
 
     &:hover:not(.disabled),
     .over:not(.disabled) {
-        background-color: @secondary;
+        background-color: @highlight-button-hover;
     }
 
     &:active:not(.disabled),
     &.active:not(.disabled) {
-        background-color: @primary;
-        color: #fff;
+        background-color: @highlight-button-pressed;
+        color: @text-normal-pressed;
     }
 
     .icon {
@@ -396,7 +414,7 @@
 
     &[disabled],
     &.disabled {
-        color: #000;
+        //color: #000;  btn-category has no text
         opacity: @btn-disabled-opacity;
     }
 }
@@ -432,7 +450,7 @@
 
     &.open {
         > .btn-toolbar {
-                //color: lighten(@gray-lighter, 10%);
+                //color: @text-normal;
 
                 // Show no shadow for `.btn-link` since it has no other button styles.
                 &.btn-link {
@@ -447,7 +465,7 @@
 
     &.over {
         > button {
-            //background-color: @secondary;
+            //background-color: @highlight-button-hover;
         }
     }
 
@@ -490,16 +508,11 @@
         }
     }
 
-@color-gray: @secondary;
-@color-dark: @primary;
-//@color-gray: #079e2f;
-//@color-dark: #c52c0e;
-
     &.split {
 
         &.over:not(.disabled),
         &.open {
-            box-shadow: inset 0 0 0 1px @color-gray;
+            box-shadow: inset 0 0 0 1px @highlight-button-hover;
 
             button:not(.active):not(.btn-text-split-default) {
                 background-color: transparent;
@@ -510,13 +523,13 @@
             button {
                 &:not(.active) {
                     &:hover {
-                        background-color: @color-gray;
+                        background-color: @highlight-button-hover;
                     }
                 }
 
                 &:active,
                 &:active:hover {
-                    background-color: @color-dark;
+                    background-color: @highlight-button-pressed;
                 }
             }
         }
@@ -524,7 +537,7 @@
         &.open {
             > button:not(.active) {
                 &:last-of-type {
-                    background-color: @color-dark;
+                    background-color: @highlight-button-pressed;
                 }
             }
 
@@ -534,7 +547,7 @@
         }
 
         button.active:not(.disabled) {
-            background-color: @color-dark;
+            background-color: @highlight-button-pressed;
         }
 
         .btn + .btn {
@@ -546,21 +559,21 @@
 .btn-color {
     width: 45px;
     height: 22px;
-    padding: 1px 11px 1px 1px;
-    border:1px solid @input-border;
+    padding: @scaled-one-px-value 11px @scaled-one-px-value @scaled-one-px-value;
+    border:@scaled-one-px-value solid @border-regular-control;
     .border-radius(@border-radius-small);
 
     span:nth-child(1) {
         float: left;
         width: 100%;
         height: 100%;
-        border: 1px solid rgba(0, 0, 0, 0.2);
+        border: @scaled-one-px-value solid @border-color-shading;
         background-color: transparent;
     }
 
     .inner-box-caret {
         position: absolute;
-        right: 0;
+        right: 1px;
         top: 2px;
     }
 
@@ -569,7 +582,7 @@
     .over,
     &:active,
     &.active {
-        background: #fff  !important;
+        background: @background-normal !important;
         .box-shadow(none)  !important;
     }
 
@@ -580,7 +593,7 @@
 
     .color-transparent {
         &:before {
-            border-right: 1px solid red;
+            border-right: @scaled-one-px-value solid red;
             height: 34px;
             transform: translate(16px, -9px) rotate(62deg);
             left: 0;
@@ -590,20 +603,31 @@
     &:active:not(.disabled),
     &.active:not(.disabled) {
         .caret {
-            background-position: @arrow-small-offset-x @arrow-small-offset-y;
         }
     }
 }
 
+// for color button auto color
+.dropdown-menu {
+    li > a.selected,
+    li > a:hover {
+        span.color-auto {
+            outline: @scaled-one-px-value solid @border-regular-control;
+            border: @scaled-one-px-value solid @background-normal;
+        }
+    }
+}
+
+
 .btn-options {
     padding: 0;
     margin:0;
     border: 0 none;
-    .box-shadow(none);
+    //.box-shadow(none);
     background-color: transparent;
 
     &.bg-white {
-        background-color: #fff;
+        background-color: @background-normal;
     }
 
     .icon {
@@ -617,25 +641,25 @@
         background-repeat: no-repeat;
     }
 
-    box-shadow: inset 0 0 0 1px @gray;
+    box-shadow: inset 0 0 0 @scaled-one-px-value @border-regular-control;
     .border-radius(@border-radius-small);
 
     &:hover,
     &.over {
-        background-color: @secondary;
+        background-color: @highlight-button-hover;
     }
 
     &:active,
     &.active {
-        background-color: @primary;
+        background-color: @highlight-button-pressed;
     }
 }
 
 .btn-text-default {
     width: 75px;
     height: 22px;
-    background: @input-bg;
-    border: 1px solid @input-border;
+    background: @background-normal;
+    border: @scaled-one-px-value solid @border-regular-control;
     .border-radius(@border-radius-small);
 
     &.auto {
@@ -646,14 +670,14 @@
 
     &:hover:not(.disabled),
     .over:not(.disabled) {
-        background-color: @secondary !important;
+        background-color: @highlight-button-hover !important;
     }
 
     &:active:not(.disabled),
     &.active:not(.disabled) {
-        background-color: @primary !important;
-        border-color: @primary;
-        color: white;
+        background-color: @highlight-button-pressed !important;
+        border-color: @highlight-button-pressed;
+        color: @text-normal-pressed;
     }
 
     &[disabled],
@@ -665,8 +689,8 @@
 .btn-text-menu-default {
     width: 100%;
     height: 22px;
-    background: @input-bg;
-    border: 1px solid @input-border;
+    background: @background-normal;
+    border: @scaled-one-px-value solid @border-regular-control;
     .border-radius(@border-radius-small);
 
     button {
@@ -681,12 +705,12 @@
 
     &:hover:not(.disabled),
     .over:not(.disabled) {
-        background-color: @secondary !important;
+        background-color: @highlight-button-hover !important;
     }
 
     &:active:not(.disabled),
     &.active:not(.disabled) {
-        background-color: @primary !important;
+        background-color: @highlight-button-pressed !important;
         color: white;
     }
 
@@ -699,8 +723,8 @@
 .btn-text-split-default {
     width: 75px;
     height: 22px;
-    background: @input-bg;
-    border: 1px solid @input-border;
+    background: @background-normal;
+    border: @scaled-one-px-value solid @border-regular-control;
     .border-radius(@border-radius-small);
 
     &.dropdown-toggle {
@@ -713,14 +737,14 @@
 
     &:hover:not(.disabled),
     .over:not(.disabled) {
-        background-color: @secondary !important;
+        background-color: @highlight-button-hover !important;
     }
 
     &:active:not(.disabled),
     &.active:not(.disabled) {
-        background-color: @primary !important;
-        border-color: @primary;
-        color: white;
+        background-color: @highlight-button-pressed !important;
+        border-color: @highlight-button-pressed;
+        color: @text-normal-pressed;
     }
 
     &[disabled],
@@ -732,8 +756,8 @@
 .btn-icon-default {
     width: 45px;
     height: 22px;
-    background: @input-bg;
-    border: 1px solid @input-border;
+    background: @background-normal;
+    border: @scaled-one-px-value solid @border-regular-control;
     .border-radius(@border-radius-small);
 
     .icon {
@@ -751,12 +775,12 @@
 
     &:hover:not(.disabled),
     .over:not(.disabled) {
-        background-color: @secondary !important;
+        background-color: @highlight-button-hover !important;
     }
 
     &:active:not(.disabled),
     &.active:not(.disabled) {
-        background-color: @primary !important;
+        background-color: @highlight-button-pressed !important;
     }
 
     &[disabled],
@@ -772,8 +796,8 @@
     padding: 2px;
     margin:0;
     box-shadow: none;
-    background-color: @input-bg;
-    border: 1px solid @input-border;
+    background-color: @background-normal;
+    border: @scaled-one-px-value solid @border-regular-control;
     .border-radius(@border-radius-small);
 
     &.template-table {
@@ -798,7 +822,7 @@
         margin-right: 3px;
         background-color: transparent;
         background-repeat: no-repeat;
-        border: 1px solid @input-border;
+        border: @scaled-one-px-value solid @border-regular-control;
         position: relative;
     }
 
@@ -812,7 +836,7 @@
     .over,
     &:active,
     &.active {
-        background-color: @input-bg !important;
+        background-color: @background-normal !important;
     }
 
     &:active:not(.disabled),
@@ -834,21 +858,23 @@
 .dlg-btn {
     font-weight: bold;
     width: 86px;
-    color: @gray-deep;
-    background-color: @secondary;
+    color: @text-normal;
+    background-color: @background-normal;
+    border: 1px solid @border-regular-control;
 
     &:hover:not(.disabled),
     &.hover:not(.disabled) {
-        background-color: @secondary-hover;
+        background-color: @highlight-button-hover;
     }
 
     &.primary {
-        color: #fff;
-        background-color: @primary;
+        color: @text-inverse;
+        background-color: @background-primary-dialog-button;
+        border: 0 none;
 
         &:hover:not(.disabled),
         &.hover:not(.disabled) {
-            background-color: @primary-hover;
+            background-color: @highlight-primary-dialog-button-hover;
         }
     }
 
@@ -869,21 +895,21 @@ svg.icon {
         display: none;
     }
 
-    @media
-    only screen and (-webkit-min-device-pixel-ratio: 1.5),
-    only screen and (-webkit-min-device-pixel-ratio: 2.5),
-    only screen and (min-resolution: 1.5dppx),
-    only screen and (min-resolution: 2.5dppx),
-    only screen and (min-resolution: 144dpi),
-    only screen and (min-resolution: 240dpi) {
-        .@{class100} {
-            //display: none;
-        }
-
-        .@{class150} {
-            //display: block;
-        }
-    }
+    //@media
+    //only screen and (-webkit-min-device-pixel-ratio: 1.5),
+    //only screen and (-webkit-min-device-pixel-ratio: 2.5),
+    //only screen and (min-resolution: 1.5dppx),
+    //only screen and (min-resolution: 2.5dppx),
+    //only screen and (min-resolution: 144dpi),
+    //only screen and (min-resolution: 240dpi) {
+    //    .@{class100} {
+    //        display: none;
+    //    }
+    //
+    //    .@{class150} {
+    //        display: block;
+    //    }
+    //}
 
     @media
     only screen and (-webkit-min-device-pixel-ratio: 2) and (-webkit-max-device-pixel-ratio: 2.4),

apps/common/main/resources/less/calendar.less

@@ -1,4 +1,4 @@
-@calendar-bg-color: @tabs-bg-color;
+@calendar-bg-color: @header-background-color;
 
 .calendar-window {
   border-radius: 0;

apps/common/main/resources/less/chat.less

@@ -11,7 +11,7 @@
 
     .area {
         position: absolute;
-        border-bottom: 1px solid @gray-dark;
+        border-bottom: 1px solid @border-toolbar;
         overflow: hidden;
     }
 
@@ -57,7 +57,7 @@
             margin: 0 5px 3px 0;
             width: 12px;
             height: 12px;
-            border: 1px solid @gray-dark;
+            border: 1px solid @border-toolbar;
         }
 
         .name {
@@ -101,7 +101,7 @@
                 }
 
                 .user-name {
-                    color: @gray-deep;
+                    color: @text-normal;
                     font-size: 12px;
                     font-weight: bold;
                     overflow: hidden;
@@ -112,7 +112,7 @@
                 .color {
                     width: 12px;
                     height: 12px;
-                    border: 1px solid @gray-dark;
+                    border: 1px solid @border-toolbar;
                     margin: 0 5px 3px 0;
                     vertical-align: middle;
                 }
@@ -121,12 +121,12 @@
                     word-wrap: break-word;
                     width: 100%;
 
-                    &.service {
-                        text-align: center;
-                        color: #CECECE;
-                        text-shadow: 0 1px 0 #fff;
-                        padding-right: 20px;
-                    }
+                    //&.service {
+                    //    text-align: center;
+                    //    color: #CECECE;
+                    //    text-shadow: 0 1px 0 #fff;
+                    //    padding-right: 20px;
+                    //}
                 }
             }
         }
@@ -143,11 +143,11 @@
             height: 100%;
             resize: none;
             margin-bottom: 5px;
-            border: 1px solid @gray-dark;
+            border: 1px solid @border-regular-control;
             font-size: 12px;
 
             &:focus {
-                border-color: @gray-darker;
+                border-color: @border-preview-select;
             }
         }
     }

apps/common/main/resources/less/checkbox.less

@@ -12,8 +12,8 @@
         + label {
             width: 14px;
             height: 14px;
-            background: #fff;
-            border: 1px solid @gray;
+            background: @background-normal;
+            border: @scaled-one-px-value solid @border-regular-control;
             border-radius: 2px;
             position: absolute;
             left: 0;
@@ -25,8 +25,9 @@
                 &::before {
                     content: '';
                     position: absolute;
-                    border: solid @gray-deep;
-                    border-width: 0 2px 2px 0;
+                    border: @scaled-two-px-value solid @text-normal;
+                    border-top: 0 none;
+                    border-left: 0 none;
                     transform: rotate(45deg);
                     width: 5px;
                     height: 9px;
@@ -40,8 +41,8 @@
                 &::before {
                     content: '';
                     position: absolute;
-                    border: 1px solid @gray-deep;
-                    background: @gray-soft;
+                    border: @scaled-one-px-value solid @text-normal;
+                    background: @icon-normal;
                     width: 8px;
                     height: 8px;
                     left: 2px;

apps/common/main/resources/less/colorpalette.less

@@ -7,7 +7,7 @@
 
         &:hover,
         &.selected {
-            .box-shadow(0 0 0 1px @primary);
+            .box-shadow(0 0 0 @scaled-one-px-value @highlight-button-pressed);
         }
     }
 }
@@ -26,7 +26,7 @@
     padding: 10px;
     .palette-color-item {
         padding: 0;
-        border: 1px solid #fff;
+        border: @scaled-one-px-value solid @background-normal;
         display: inline-block;
         text-decoration: none;
         -moz-outline: 0 none;
@@ -43,21 +43,21 @@
                 width: 12px;
                 cursor: pointer;
                 display: block;
-                border: 1px solid rgba(0, 0, 0, 0.2);
+                border: @scaled-one-px-value solid @border-color-shading;
             }
         }
 
         &:hover, &.selected {
-            border-color: #000;
+            border-color: @icon-normal;
             em span {
-                border-color: #fff;
+                border-color: @background-normal;
             }
         }
     }
 
     .color-transparent {
         em span {
-            border:solid 1px #C0C0C0;
+            border:solid @scaled-one-px-value @border-color-shading;
         }
     }
 }

apps/common/main/resources/less/colors-table-dark.less

@@ -0,0 +1,110 @@
+
+:root {
+    &.theme-dark {
+        --toolbar-header-document: #2a2a2a;
+        --toolbar-header-spreadsheet: #2a2a2a;
+        --toolbar-header-presentation: #2a2a2a;
+
+        --background-normal: #333;
+        --background-toolbar: #404040;
+        --background-toolbar-additional: #505050;
+        --background-primary-dialog-button: #ddd;
+        --background-tab-underline: #ddd;
+        --background-notification-popover: #3e5968;
+        --background-notification-badge: #ffd114;
+        --background-scrim: fade(black, 60%);
+        --background-loader: fade(#181818, 90%);
+
+        --highlight-button-hover: #555;
+        --highlight-button-pressed: #606060;
+        --highlight-button-pressed-hover: #808080;
+        --highlight-primary-dialog-button-hover: #e5e5e5;
+        --highlight-header-button-hover: fade(#000, 20%);
+        --highlight-header-button-pressed: fade(#000, 25%);
+        --highlight-toolbar-tab-underline: #ddd;
+        --highlight-text-select: #96c8fd;
+
+        --border-toolbar: #2a2a2a;
+        --border-divider: #505050;
+        --border-regular-control: #666666;
+        --border-toolbar-button-hover: #5a5a5a;
+        --border-preview-select: #666666;
+        --border-control-focus: #ccc;
+        --border-color-shading: fade(#fff, 5%);
+        --border-error: #f62211;
+
+        --text-normal: fade(#fff, 80%);
+        --text-normal-pressed: fade(#fff, 80%);
+        --text-secondary: fade(#fff, 60%);
+        --text-tertiary: fade(#fff, 40%);
+        --text-link: #acbfff;
+        --text-inverse: #333;
+        --text-toolbar-header: fade(#fff, 80%);
+        --text-contrast-background: #fff;
+
+        --icon-normal: fade(#fff, 80%);
+        --icon-normal-pressed: fade(#fff, 80%);
+        --icon-inverse: #444;
+        --icon-toolbar-header: fade(#fff, 80%);
+        --icon-notification-badge: #000;
+        --icon-contrast-popover: #fff;
+        --icon-success: #090;
+
+        // Canvas colors
+        --canvas-background: #666666;
+        --canvas-content-background: #fff;
+        --canvas-page-border: #555;
+
+        --canvas-ruler-background: #555;
+        --canvas-ruler-margins-background: #444;
+        --canvas-ruler-mark: #b2b2b2;
+        --canvas-ruler-handle-border: #b2b2b2;
+        --canvas-ruler-handle-border-disabled: #717171;
+
+        --canvas-high-contrast: #fff;
+        --canvas-high-contrast-disabled: #888;
+
+        --canvas-cell-border: fade(#000, 10%);
+        --canvas-cell-title-border: #757575;
+        --canvas-cell-title-border-hover: #858585;
+        --canvas-cell-title-border-selected: #9e9e9e;
+        --canvas-cell-title-hover: #787878;
+        --canvas-cell-title-selected: #939393;
+
+        --canvas-dark-cell-title: #111;
+        --canvas-dark-cell-title-hover: #000;
+        --canvas-dark-cell-title-selected: #333;
+        --canvas-dark-cell-title-border: #282828;
+        --canvas-dark-cell-title-border-hover: #191919;
+        --canvas-dark-cell-title-border-selected: #474747;
+
+        --canvas-scroll-thumb: #404040;
+        --canvas-scroll-thumb-hover: #999;
+        --canvas-scroll-thumb-pressed: #adadad;
+        --canvas-scroll-thumb-border: #2a2a2a;
+        --canvas-scroll-thumb-border-hover: #2a2a2a;
+        --canvas-scroll-thumb-border-pressed: #2a2a2a;
+        --canvas-scroll-arrow: #999;
+        --canvas-scroll-arrow-hover: #404040;
+        --canvas-scroll-arrow-pressed: #404040;
+        --canvas-scroll-thumb-target: #999;
+        --canvas-scroll-thumb-target-hover: #404040;
+        --canvas-scroll-thumb-target-pressed: #404040;
+
+        // Others
+
+        --button-small-normal-icon-offset-x: -20px;
+        --button-small-active-icon-offset-x: -20px;
+        --button-large-normal-icon-offset-x: -31px;
+        --button-large-active-icon-offset-x: -31px;
+        --button-huge-normal-icon-offset-x: -28px;
+        --button-huge-active-icon-offset-x: -28px;
+
+        --modal-window-mask-opacity: 0.6;
+        --image-border-types-filter: invert(100%) brightness(4);
+        --image-border-types-filter-selected: invert(100%) brightness(4);
+        --component-normal-icon-filter: invert(100%);
+
+        --menu-icon-item-checked-offset-x: -20px;
+    }
+}

apps/common/main/resources/less/colors-table.less

@@ -0,0 +1,193 @@
+
+// Brand colors
+// -------------------------
+
+@brand-primary:         #428bca;
+@brand-success:         #5cb85c;
+@brand-warning:         #f0ad4e;
+@brand-danger:          #d9534f;
+@brand-info:            #5bc0de;
+
+
+:root {
+    --toolbar-header-document: #446995;
+    --toolbar-header-spreadsheet: #40865c;
+    --toolbar-header-presentation: #aa5252;
+
+    --background-normal: #fff;
+    --background-toolbar: #f7f7f7;
+    --background-toolbar-additional: #efefef;
+    --background-primary-dialog-button: #444;
+    --background-tab-underline: #444;
+    --background-notification-popover: #fcfed7;
+    --background-notification-badge: #ffd112;
+    --background-scrim: fade(#000, 20%);
+    --background-loader: fade(#181818, 90%);
+
+    --highlight-button-hover: #e0e0e0;
+    --highlight-button-pressed: #ccc;
+    --highlight-button-pressed-hover: #bababa;
+    --highlight-primary-dialog-button-hover: #2b2b2b;
+    --highlight-header-button-hover: fade(#fff, 20%);
+    --highlight-header-button-pressed: fade(#fff, 25%);
+    --highlight-toolbar-tab-underline: #444;
+    --highlight-text-select: #3494fb;
+
+    --border-toolbar: #cbcbcb;
+    --border-divider: #dfdfdf;
+    --border-regular-control: #c0c0c0;
+    --border-toolbar-button-hover: #e0e0e0;
+    --border-preview-select: #aaa;
+    --border-control-focus: #848484;
+    --border-color-shading: fade(#000, 10%);
+    --border-error: #f62211;
+
+    --text-normal: fade(#000, 80%);
+    --text-normal-pressed: fade(#000, 80%);
+    --text-secondary: fade(#000, 60%);
+    --text-tertiary: fade(#000, 40%);
+    --text-link: #445799;
+    --text-inverse: #fff;
+    --text-toolbar-header: #fff;
+    --text-contrast-background: #fff;
+
+    --icon-normal: #444;
+    --icon-normal-pressed: #444;
+    --icon-inverse: #fff;
+    --icon-toolbar-header: #fff;
+    --icon-notification-badge: #000;
+    --icon-contrast-popover: #fff;
+    --icon-success: #090;
+
+    // Canvas
+
+    --canvas-background: #f0f0f0;
+    --canvas-content-background: #fff;
+    --canvas-page-border: #ccc;
+
+    --canvas-ruler-background: #fff;
+    --canvas-ruler-margins-background: #d9d9d9;
+    --canvas-ruler-mark: #555;
+    --canvas-ruler-handle-border: #555;
+    --canvas-ruler-handle-border-disabled: #bbb;
+
+    --canvas-high-contrast: #000;
+    --canvas-high-contrast-disabled: #999;
+
+    --canvas-cell-border: fade(black, 10%);
+    --canvas-cell-title-border: #d8d8d8;
+    --canvas-cell-title-border-hover: #c9c9c9;
+    --canvas-cell-title-border-selected: #bbb;
+    --canvas-cell-title-hover: #dfdfdf;
+    --canvas-cell-title-selected: #cfcfcf;
+
+    --canvas-dark-cell-title: #444;
+    --canvas-dark-cell-title-hover: #666 ;
+    --canvas-dark-cell-title-selected: #111;
+    --canvas-dark-cell-title-border: #3d3d3d;
+    --canvas-dark-cell-title-border-hover: #5c5c5c;
+    --canvas-dark-cell-title-border-selected: #0f0f0f;
+
+    --canvas-scroll-thumb: #f7f7f7;
+    --canvas-scroll-thumb-hover: #c0c0c0;
+    --canvas-scroll-thumb-pressed: #adadad;
+    --canvas-scroll-thumb-border: #c0c0c0;
+    --canvas-scroll-thumb-border-hover: #c0c0c0;
+    --canvas-scroll-thumb-border-pressed: #0%;
+    --canvas-scroll-arrow: #adadad;
+    --canvas-scroll-arrow-hover: #f7f7f7;
+    --canvas-scroll-arrow-pressed: #f7f7f7;
+    --canvas-scroll-thumb-target: #c0c0c0;
+    --canvas-scroll-thumb-target-hover: #f7f7f7;
+    --canvas-scroll-thumb-target-pressed: #f7f7f7;
+
+    // Others
+
+    //--button-small-normal-icon-offset-x: 0;
+    //--button-small-active-icon-offset-x: 0;
+    //--button-large-normal-icon-offset-x: 0;
+    //--button-large-active-icon-offset-x: 0;
+    //--button-huge-normal-icon-offset-x: 0;
+    //--button-huge-active-icon-offset-x: 0;
+    --button-header-normal-icon-offset-x: -20px;
+    --button-header-active-icon-offset-x: -20px;
+    //--menu-icon-item-checked-offset-x: 0;
+
+    --modal-window-mask-opacity: 0.2;
+    --image-border-types-filter: none;
+    --image-border-types-filter-selected: none;
+    --component-normal-icon-filter: none;
+}
+
+// Background
+// -------------------------
+@background-normal: var(--background-normal);
+@background-toolbar: var(--background-toolbar);
+@background-toolbar-additional: var(--background-toolbar-additional);
+@background-primary-dialog-button: var(--background-primary-dialog-button);
+@background-tab-underline: var(--background-tab-underline);
+@background-notification-popover: var(--background-notification-popover);
+@background-notification-badge: var(--background-notification-badge);
+@background-scrim: var(--background-scrim);
+@background-loader: var(--background-loader);
+
+// Highlight
+// -------------------------
+@highlight-button-hover: var(--highlight-button-hover);
+@highlight-button-pressed: var(--highlight-button-pressed);
+@highlight-button-pressed-hover: var(--highlight-button-pressed-hover);
+@highlight-primary-dialog-button-hover: var(--highlight-primary-dialog-button-hover);
+@highlight-header-button-hover: var(--highlight-header-button-hover);
+@highlight-header-button-pressed: var(--highlight-header-button-pressed);
+@highlight-toolbar-tab-underline: var(--highlight-toolbar-tab-underline);
+@highlight-text-select: var(--highlight-text-select);
+
+// Border
+// -------------------------
+@border-toolbar: var(--border-toolbar);
+@border-divider: var(--border-divider);
+@border-regular-control: var(--border-regular-control);
+@border-toolbar-button-hover: var(--border-toolbar-button-hover);
+@border-preview-select: var(--border-preview-select);
+@border-control-focus: var(--border-control-focus);
+@border-color-shading: var(--border-color-shading);
+@border-error: var(--border-error);
+
+// Text
+// -------------------------
+@text-normal: var(--text-normal);
+@text-normal-pressed: var(--text-normal-pressed);
+@text-secondary: var(--text-secondary);
+@text-tertiary: var(--text-tertiary);
+@text-link: var(--text-link);
+@text-inverse: var(--text-inverse);
+@text-toolbar-header: var(--text-toolbar-header);
+@text-contrast-background: var(--text-contrast-background);
+
+// Icon
+// -------------------------
+@icon-normal: var(--icon-normal);
+@icon-normal-pressed: var(--icon-normal-pressed);
+@icon-inverse: var(--icon-inverse);
+@icon-toolbar-header: var(--icon-toolbar-header);
+@icon-contrast-popover: var(--icon-contrast-popover);
+@icon-notification-badge: var(--icon-notification-badge);
+@icon-success: var(--icon-success);
+
+@button-small-normal-icon-offset-x: var(--button-small-normal-icon-offset-x,0);
+@button-small-active-icon-offset-x: var(--button-small-active-icon-offset-x,0);
+@button-large-normal-icon-offset-x: var(--button-large-normal-icon-offset-x, 0);
+@button-large-active-icon-offset-x: var(--button-large-active-icon-offset-x, 0);
+@button-huge-normal-icon-offset-x: var(--button-huge-normal-icon-offset-x, 0);
+@button-huge-active-icon-offset-x: var(--button-huge-active-icon-offset-x, 0);
+
+@button-header-normal-icon-offset-x: var(--button-header-normal-icon-offset-x, -20px);
+@button-header-active-icon-offset-x: var(--button-header-active-icon-offset-x, -20px);
+
+@component-normal-icon-filer: var(--component-normal-icon-filter);
+
+@menu-icon-item-checked-offset-x: var(--menu-icon-item-checked-offset-x, 0);
+
+// Canvas
+// ---------------------------
+@canvas-content-background: var(--canvas-content-background);

apps/common/main/resources/less/combo-border-size.less

@@ -22,8 +22,17 @@
         }
     }
 
+    .image {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        display: inline-block;
+        background-color: transparent;
+        margin: -1px 0 0 -3px;
+    }
+
     img, .image {
-        background: ~"url(@{common-image-const-path}/combo-border-size/BorderSize.png) no-repeat 0 0 #fff";
+        background: ~"url(@{common-image-const-path}/combo-border-size/BorderSize.png) no-repeat 0 0";
 
         @media only screen {
             //@media (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 1.9),

apps/common/main/resources/less/combo-dataview.less

@@ -10,8 +10,8 @@
         width: @combo-dataview-width;
         height: 100%;
         .border-radius(@border-radius-small);
-        border: 1px solid @input-border;
-        background-color: @input-bg;
+        border: @scaled-one-px-value solid @border-regular-control;
+        background-color: @background-normal;
 
         .dataview {
             padding: 1px;
@@ -24,8 +24,8 @@
 
         button {
             border-radius:0 @border-radius-small @border-radius-small 0;
-            border: 1px solid @input-border;
-            background-color: @input-bg;
+            border: @scaled-one-px-value solid @border-regular-control;
+            background-color: @background-normal;
 
             &.dropdown-toggle {
                 .inner-box-caret {
@@ -35,15 +35,16 @@
                 .caret {
 //                    width: 7px;
 //                    height: 7px;
-                    border: 0;
-                    background-position: @arrow-small-offset-x @arrow-small-offset-y;
+//                    border: 0;
+//                    background-position: @arrow-small-offset-x @arrow-small-offset-y;
+                    margin-left: 1px;
                 }
             }
         }
     }
 
     .dropdown-menu {
-        border-color: @gray;
+        border-color: @border-regular-control;
         border-top-right-radius: 0;
         border-top-left-radius: 2px;
         margin: 0;
@@ -84,17 +85,20 @@
 
     .item {
         padding: 3px;
-        border: 1px solid @gray;
+        border: @scaled-one-px-value solid @border-regular-control;
         .box-shadow(none);
-        margin: 0 -1px -1px 0;
+
+        @minus-px: calc(-1px / @pixel-ratio-factor);
+        margin: 0 @minus-px @minus-px 0;
+        height: @combo-dataview-height;
 
 
         &:hover {
-            .box-inner-shadow(0 0 0 2px @gray);
+            .box-inner-shadow(0 0 0 @scaled-two-px-value @border-regular-control);
         }
 
         &.selected {
-            .box-inner-shadow(0 0 0 2px @gray-darker);
+            .box-inner-shadow(0 0 0 @scaled-two-px-value @border-preview-select);
         }
     }
 
@@ -125,7 +129,7 @@
         width: auto;
         position: relative;
         border: none;
-        .box-shadow(0 0 0 1px @body-bg);
+        .box-shadow(0 0 0 @scaled-one-px-value @background-normal);
 
         > div {
             background-repeat: no-repeat;
@@ -142,15 +146,24 @@
                 padding: 0;
 
                 .caret {
-                    width: 27px;
-                    height: 27px;
-                    background-position: @arrow-big-offset-x @arrow-big-offset-y;
-                    transition: transform .2s;
+                    //width: 27px;
+                    //height: 27px;
+                    //background-position: @arrow-big-offset-x @arrow-big-offset-y;
+                    width: 8px;
+                    height: 8px;
+                    background-color: transparent;
+                    border: solid 1px @icon-normal;
+                    border-bottom: none;
+                    border-right: none;
+                    background-image: none;
+
+                    transition: transform 0.2s ease;
+                    transform: rotate(-135deg) translate(2px,2px);
                 }
 
                 &.active {
                     .caret {
-                        transform: rotate(180deg);
+                        transform: rotate(45deg);
                     }
                 }
             }
@@ -188,7 +201,7 @@
     &.disabled {
         .item {
             &:hover:not(.selected) {
-                .box-shadow(0 0 0 1px @gray);
+                .box-shadow(0 0 0 @scaled-one-px-value @border-regular-control);
             }
         }
     }
@@ -238,7 +251,7 @@
 
     .item {
         &:hover {
-            .box-shadow(0 0 0 1px @gray);
+            .box-shadow(0 0 0 @scaled-one-px-value @border-regular-control);
         }
     }
 
@@ -265,13 +278,13 @@
 
     .item {
         margin-left: 4px;
-        .box-shadow(0 0 0 1px @gray);
+        .box-shadow(0 0 0 @scaled-one-px-value @border-regular-control);
     }
 
     &.disabled {
         .item {
             &:hover:not(.selected) {
-                .box-shadow(0 0 0 1px @gray);
+                .box-shadow(0 0 0 @scaled-one-px-value @border-regular-control);
             }
         }
     }

apps/common/main/resources/less/combobox.less

@@ -1,3 +1,6 @@
+@img-borders-filter: var(--image-border-types-filter);
+@img-borders-filter-selected: var(--image-border-types-filter-selected);
+
 .combobox {
     display: block;
 
@@ -23,36 +26,21 @@
         padding-right: 7px + 2 * @padding-base-horizontal;
     }
 
-    &.input-group-nr > .btn {
-        &.dropdown-toggle {
-            .caret {
-                width: 7px;
-                height: 7px;
-                border: 0;
-                background-position: @arrow-small-offset-x @arrow-small-offset-y;
-            }
-
-            &:active,
-            &.active {
-                .caret {
-                    background-position: @arrow-small-offset-x @arrow-small-offset-y;
-                }
-            }
-        }
-    }
-
     .form-control {
         border-right: 0;
         position: static;
         z-index: auto;
         float: none;
+
+        .image {
+            -webkit-filter: @img-borders-filter;
+            filter: @img-borders-filter;
+        }
     }
 
-    .btn,
-    .btn:hover,
-    .btn:focus {
+    .btn {
         border-left: 0;
-        border-color: @input-border;
+        border-color: @border-regular-control;
         background-color: transparent;
         margin-left: -1px;
         position: absolute;
@@ -62,21 +50,33 @@
 
     .btn-default:not(.disabled),
     &.open .dropdown-toggle.btn-default {
-        background-color: @input-bg;
-        border-color: @input-border;
+        background-color: @background-normal;
+        border-color: @border-regular-control;
+        padding-right: 4px;
+    }
+
+    .btn-default.disabled {
+        &:hover, &:focus {
+            background-color: transparent;
+            border-color: @border-regular-control;
+        }
     }
 
     &.input-group-nr.open:not(.no-highlighted) {
         & > .form-control,
         & > .btn {
-            border-color: @gray-darker;
+            border-color: @border-control-focus;
+
+            .caret {
+                transform: rotate(45deg);
+            }
         }
     }
 
     &.input-group-nr:not(.no-highlighted) > .form-control {
         &:focus,
         &:focus ~ button.dropdown-toggle {
-            border-color: @gray-darker;
+            border-color: @border-control-focus;
         }
     }
 
@@ -86,16 +86,16 @@
         }
 
         &.selected {
-            background-color: @primary;
+            background-color: @highlight-button-pressed;
 
             a {
-                color: @dropdown-link-active-color;
+                color: @text-normal-pressed;
 
                 &:hover,
                 &.hover,
                 &:focus,
                 &.focus {
-                    background-color: @primary;
+                    background-color: @highlight-button-pressed;
                 }
             }
         }
@@ -104,14 +104,23 @@
     // Font combobox
     // ------------------------
     li {
+        img {
+            -webkit-filter: @img-borders-filter;
+            filter: @img-borders-filter;
+        }
+        canvas {
+            -webkit-filter: @img-borders-filter;
+            filter: @img-borders-filter;
+        }
+
         &.selected {
             img {
-                -webkit-filter: invert(100%) brightness(4);
-                filter: invert(100%) brightness(4);
+                -webkit-filter: @img-borders-filter-selected;
+                filter: @img-borders-filter-selected;
             }
             canvas {
-                -webkit-filter: invert(100%) brightness(4);
-                filter: invert(100%) brightness(4);
+                -webkit-filter: @img-borders-filter-selected;
+                filter: @img-borders-filter-selected;
             }
         }
 
@@ -141,7 +150,7 @@
     &.input-group-nr:not(.no-highlighted) {
         & > .form-control,
         & > .btn {
-            border-color: @gray-darker;
+            border-color: @border-control-focus;
         }
     }
 }

apps/common/main/resources/less/comments-panel.less

@@ -1,77 +0,0 @@
-.comments-panel {
-    display: table;
-    position: relative;
-    width: 100%;
-    height: 100%;
-    border-collapse: collapse;
-    font: 12px arial;
-
-    .row {
-        display: table-row;
-    }
-
-    .user-name {
-        color: @gray-deep;
-        font-size: 12px;
-        font-weight: bold;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        cursor: default;
-        padding: 10px 10px 0 20px;
-        height: 26px;
-        max-width: 155px;
-    }
-
-    .color {
-        width: 12px;
-        height: 12px;
-        border: 1px solid @gray-dark;
-        margin: 0 5px 3px 0;
-        vertical-align: middle;
-    }
-
-    .user-date {
-        color: @gray-darker;
-        font-size: 10px;
-        padding: 0 0 0 20px;
-        height: 12px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        cursor: default;
-    }
-
-    .user-quote {
-        color: @gray-darker;
-        font-style: italic;
-        border-left: 1px solid @gray-darker;
-        margin-left: 20px;
-        margin-top: 3px;
-        padding: 5px 9px 5px 9px;
-        white-space: pre-wrap;
-        cursor: pointer;
-    }
-
-    .user-message {
-       .user-select(text);
-        color: @black;
-        padding: 9px 10px 0 20px;
-        white-space: pre-wrap;
-        word-wrap: break-word;
-        cursor: default;
-    }
-
-    .user-reply {
-        color: @black;
-        border-bottom-width: 1px solid @black;
-        box-sizing: border-box;
-        height: auto;
-        margin-left: 18px;
-        margin-top: 10px;
-        white-space: pre-wrap;
-        width: auto;
-        cursor: pointer;
-    }
-}
-

apps/common/main/resources/less/comments.less

@@ -14,7 +14,7 @@
         right: 0;
         bottom: 45px;
         height: 300px;
-        border-bottom: 1px solid @gray-dark;
+        border-bottom: @scaled-one-px-value solid @border-toolbar;
 
         &.stretch {
             border-bottom: none;
@@ -32,10 +32,10 @@
         text-align: center;
 
         label {
-            color: @black;
+            color: @text-normal;
             font: 12px arial;
             line-height: normal;
-            border-bottom: 1px dotted @black;
+            border-bottom: @scaled-one-px-value dotted @text-normal;
             padding-top: 12px;
             outline: none;
             height: 29px;
@@ -58,10 +58,10 @@
             width: 100%;
             resize: none;
             margin-bottom: 5px;
-            border: 1px solid @gray-dark;
+            border: @scaled-one-px-value solid @border-regular-control;
             height: 100%;
             &:focus {
-                border-color: @gray-darker;
+                border-color: @border-control-focus;
             }
         }
     }
@@ -83,19 +83,19 @@
     line-height: normal;
     position: relative;
     overflow: hidden;
-    color: @gray-darker;
+    color: @border-preview-select;
 
     textarea {
         width: 100%;
         height: 50px;
         resize: none;
         margin-bottom: 5px;
-        border: 1px solid @gray-dark;
+        border: @scaled-one-px-value solid @border-regular-control;
         word-break: break-all;
         line-height: 15px;
-        color: @gray-deep;
+        color: @text-normal;
         &:focus {
-            border-color: @gray-darker;
+            border-color: @border-control-focus;
         }
     }
 
@@ -109,7 +109,7 @@
     }
 
     .separator-cmt {
-        border-bottom: 1px solid @gray-dark;
+        border-bottom: @scaled-one-px-value solid @border-toolbar;
         margin: 20px 0px 0px 0px;
     }
 
@@ -119,7 +119,7 @@
     }
 
     .user-name {
-        color: @gray-deep;
+        color: @text-normal;
         font-size: 12px;
         font-weight: bold;
         overflow: hidden;
@@ -133,7 +133,7 @@
     .color {
         width: 12px;
         height: 12px;
-        border: 1px solid @gray-dark;
+        border: @scaled-one-px-value solid @border-toolbar;
         margin: 0 5px 3px 0;
         vertical-align: middle;
     }
@@ -170,14 +170,14 @@
         font-style: italic;
         margin-top: 10px;
         padding: 0px 5px 5px 5px;
-        border-left: 1px solid #939393;
+        border-left: @scaled-one-px-value solid #939393;
         word-break: break-all;
         white-space: pre-wrap;
         cursor: pointer;
     }
 
     .user-message {
-        color: @black;
+        color: @text-normal;
         padding: 9px 0px 0 0px;
         white-space: pre-wrap;
         word-wrap: break-word;
@@ -200,11 +200,11 @@
     }
 
     .user-reply {
-        color: @black;
+        color: @text-normal;
         margin-top: 10px;
         white-space: pre-wrap;
         width: auto;
-        border-bottom: 1px dotted @black;
+        border-bottom: @scaled-one-px-value dotted @text-normal;
         height: 16px;
         cursor: pointer;
     }
@@ -265,7 +265,25 @@
     }
 
     .btn-resolve {
-        background-position: -2px -253px;
+        position: relative;
+
+        &:after {
+            content: '';
+            position: absolute;
+            border: solid @text-normal;
+            border-width: 0 2px 2px 0;
+            transform: rotate(40deg);
+            width: 7px;
+            height: 12px;
+            left: 6px;
+            top: -2px;
+        }
+
+        &.comment-resolved {
+            &:after {
+                border-color: @icon-success;
+            }
+        }
     }
 
     .btn-resolve-check {
@@ -402,12 +420,12 @@
         left: 2px;
         width: 15px;
         height: 15px;
-        background-color: #ffffff;
+        background-color: @background-normal;
         -moz-transform: rotate(45deg);
         -ms-transform: rotate(45deg);
         -webkit-transform: rotate(45deg);
         -o-transform: rotate(45deg);
         transform: rotate(45deg);
-        border: solid 1px @gray-dark;
+        border: solid @scaled-one-px-value @border-toolbar;
     }
 }

apps/common/main/resources/less/common.less

@@ -1,6 +1,6 @@
 label {
     &.link {
-        border-bottom: 1px dotted #aaa;
+        border-bottom: @scaled-one-px-value dotted @text-secondary;
         cursor: pointer;
 
         &.disabled {
@@ -9,7 +9,7 @@ label {
     }
 
     &.link-solid {
-        border-bottom: 1px solid #aaa;
+        border-bottom: @scaled-one-px-value solid @text-secondary;
         cursor: pointer;
 
         &.disabled {
@@ -36,4 +36,216 @@ label {
 
 .user-select {
     .user-select(text);
-}
+}
+
+.tool-menu {
+    height: 100%;
+    display: block;
+
+    &.left {
+        overflow: hidden;
+
+        .tool-menu-btns {
+            border-right: @scaled-one-px-value solid @border-regular-control;
+        }
+    }
+
+    &.right {
+        .tool-menu-btns {
+            //position: absolute;
+            border-left: @scaled-one-px-value solid @border-regular-control;
+            background-color: @background-toolbar;
+            right: 0;
+            overflow: hidden;
+        }
+    }
+}
+
+.tool-menu-btns {
+    width: 40px;
+    height: 100%;
+    display: inline-block;
+    position: absolute;
+    padding-top: 15px;
+
+    button {
+        margin-bottom: 8px;
+    }
+}
+
+.left-panel {
+    padding-left: 40px;
+    height: 100%;
+    border-right: @scaled-one-px-value solid @border-regular-control;
+
+    #left-panel-chat {
+        height: 100%;
+    }
+
+    #left-panel-comments {
+        height: 100%;
+    }
+}
+
+.right-panel {
+    width: 220px;
+    height: 100%;
+    display: none;
+    padding: 0 10px 0 15px;
+    position: relative;
+    overflow: hidden;
+    border-left: @scaled-one-px-value solid @border-regular-control;
+    line-height: 15px;
+}
+
+.statusbar {
+    height: 25px;
+    background-color: @background-toolbar;
+    .box-inner-shadow(0 @scaled-one-px-value 0 @border-regular-control);
+
+    .status-label {
+        font-weight: bold;
+        color: @text-normal;
+        white-space: nowrap;
+    }
+}
+
+#file-menu-panel {
+    > div {
+        height: 100%;
+    }
+
+    .panel-menu {
+        width: 260px;
+        float: left;
+        border-right: @scaled-one-px-value solid @border-regular-control;
+        background-color: @background-toolbar;
+    }
+
+    .flex-settings {
+        &.bordered {
+            border-bottom: @scaled-one-px-value solid @border-regular-control;
+        }
+        overflow: hidden;
+        position: relative;
+    }
+
+}
+
+.settings-panel {
+    display: none;
+    overflow: visible;
+    margin-top: 7px;
+
+    & > table {
+        width: 100%;
+    }
+
+    &.active {
+        display: block;
+    }
+
+    .padding-small {
+        padding-bottom: 8px;
+    }
+
+    .padding-large {
+        padding-bottom: 16px;
+    }
+
+    .finish-cell {
+        height: 15px;
+    }
+
+    label {
+        .font-size-normal();
+        font-weight: normal;
+
+        &.input-label{
+            margin-bottom: 0;
+            vertical-align: middle;
+        }
+
+        &.header {
+            font-weight: bold;
+        }
+    }
+
+    .separator { width: 100%;}
+
+    .settings-hidden {
+        display: none;
+    }
+
+    textarea {
+        .user-select(text);
+        width: 100%;
+        resize: none;
+        margin-bottom: 5px;
+        border: @scaled-one-px-value solid @border-regular-control;
+        height: 100%;
+
+        &.disabled {
+            opacity: 0.65;
+            cursor: default !important;
+        }
+    }
+}
+
+.dropdown-menu {
+    > li > a {
+        color: @text-normal;
+    }
+}
+
+textarea {
+    background-color: @background-normal;
+    color: @text-normal
+}
+
+.btn-edit-table,
+.btn-change-shape {
+    .background-ximage-v2('right-panels/rowscols_icon.png', 84px);
+    margin-right: 2px !important;
+    margin-bottom: 1px !important;
+}
+
+.btn-edit-table {
+    background-position: 0 0;
+
+    button.over & {
+        //background-position: -28px 0;
+    }
+
+    .btn-group.open &,
+        button.active:not(.disabled) &,
+        button:active:not(.disabled) &
+    {
+        //background-position: -56px 0;
+    }
+
+    // TODO: not good, must be controled by variable
+    .theme-dark & {
+        background-position-x: -56px;
+    }
+}
+
+.btn-change-shape {
+    background-position: 0 -16px;
+
+    button.over & {
+        //background-position: -28px -16px;
+    }
+
+    .btn-group.open &,
+        button.active:not(.disabled) &,
+        button:active:not(.disabled) &
+    {
+        //background-position: -56px -16px;
+    }
+
+    // TODO: not good, must be controled by variable
+    .theme-dark & {
+        background-position-x: -56px;
+    }
+}

apps/common/main/resources/less/dataview.less

@@ -9,7 +9,7 @@
             text-align: center;
             height: 100%;
             width: 100%;
-            color: #b2b2b2;
+            color: @text-tertiary;
             td {
                 padding: 5px;
             }
@@ -22,11 +22,11 @@
         margin: 4px;
         cursor: pointer;
 
-        .box-shadow(0 0 0 1px @gray);
+        .box-shadow(0 0 0 @scaled-one-px-value @border-regular-control);
 
         &:hover,
         &.selected {
-            .box-shadow(0 0 0 2px @primary);
+            .box-shadow(0 0 0 @scaled-two-px-value @border-preview-select);
         }
     }
 
@@ -58,11 +58,11 @@
                     opacity: 0.5;
                 }
 
-                .box-shadow(0 0 0 1px @gray);
+                .box-shadow(0 0 0 @scaled-one-px-value @border-regular-control);
 
                 &:hover:not(.disabled),
                 &.selected:not(.disabled) {
-                    .box-shadow(0 0 0 2px @primary);
+                    .box-shadow(0 0 0 @scaled-two-px-value @highlight-button-pressed);
                 }
             }
         }
@@ -75,7 +75,7 @@
     }
 
     &.bordered {
-        border: 1px solid @input-border;
+        border: @scaled-one-px-value solid @input-border;
         .border-radius(@border-radius-small);
     }
 }

apps/common/main/resources/less/dropdown-menu.less

@@ -3,6 +3,10 @@
 }
 
 .dropdown-menu {
+    background-color: @background-normal;
+    border-color: @border-regular-control;
+    border-width: @scaled-one-px-value;
+
     &.scrollable-menu {
         height: auto;
         max-height: 400px;
@@ -30,22 +34,32 @@
         & > a {
             padding: 5px 20px;
             cursor: pointer;
+            color: @text-normal;
 
             &:focus, &.focus {
                 outline: 0;
             }
 
             &.focus {
-                text-decoration: none;
-                color: @dropdown-link-hover-color;
-                background-color: @dropdown-link-hover-bg;
+                //text-decoration: none;
+                //color: @dropdown-link-hover-color;
+                //background-color: @dropdown-link-hover-bg;
+            }
+
+            &:hover {
+                color: @text-normal-pressed;
+                background-color: @highlight-button-hover;
             }
         }
 
         &.over > a {
             text-decoration: none;
-            color: @dropdown-link-hover-color;
-            background-color: @dropdown-link-hover-bg;
+            color: @text-normal-pressed;
+            background-color: @highlight-button-hover;
+
+            &:after {
+                border-left-color: @icon-normal-pressed;
+            }
         }
 
         .checked:not(.no-checkmark) {
@@ -80,7 +94,7 @@
 
         .no-checkmark.checked {
             .menu-item-icon {
-                background-color: @primary;
+                background-color: @highlight-button-pressed;
                 border-radius: 2px;
             }
         }
@@ -107,4 +121,9 @@
             }
         }
     }
+
+    .divider {
+        height: @scaled-one-px-value;
+        background-color: @border-divider;
+    }
 }

apps/common/main/resources/less/dropdown-submenu.less

@@ -23,7 +23,7 @@
         border-color: transparent;
         border-style: solid;
         border-width: 3px 0 3px 3px;
-        border-left-color: @dropdown-link-color;
+        border-left-color: @icon-normal;
         margin-top: 5px;
         margin-right: -10px;
     }

apps/common/main/resources/less/extended-color-picker.less

@@ -37,7 +37,7 @@
             width: 63px;
             height: 20px;
             background-color: transparent;
-            border: 1px solid rgb(190, 190, 190);
+            border: @scaled-one-px-value solid @border-regular-control;
 
             &.top {
                 border-bottom: none;

apps/common/main/resources/less/header.less

@@ -29,7 +29,7 @@
 .toolbar {
     .extra {
         svg.icon {
-            fill: #fff;
+            fill: @icon-toolbar-header;
         }
 
         .btn-slot {
@@ -57,12 +57,12 @@
     }
 
     label {
-        color: #fff;
+        color: @text-toolbar-header;
     }
 
     .dropdown-menu {
         label {
-            color: @gray-deep;
+            color: @text-normal;
         }
     }
 
@@ -70,13 +70,13 @@
     .btn-header {
         &:hover {
             &:not(.disabled):not(.icon) {
-                background-color: rgba(255,255,255,0.2);
+                background-color: @highlight-header-button-hover;
             }
         }
 
         &:active, &.active {
             &:not(.disabled):not(.icon) {
-                background-color: rgba(0,0,0,0.2);
+                background-color: @highlight-header-button-pressed;
             }
         }
 
@@ -98,30 +98,18 @@
         min-width: 50px;
         text-align: center;
 
-        color: #fff;
+        color: @text-toolbar-header;
         background-color: transparent;
         border: 0 none;
         cursor: default;
         line-height: 32px;
-
-        //&:hover:not(:disabled) {
-        //    border: 1px solid @gray-dark;
-        //    background-color: rgba(255,255,255,0.2);
-        //}
-        //
-        //&:focus:not(:active) {
-        //    border: 1px solid @gray-dark;
-        //    cursor: text;
-        //    background-color: white;
-        //    color: @gray-deep;
-        //}
     }
 
     #rib-save-status {
         white-space: nowrap;
         &.locked {
             text-decoration: none;
-            color: @gray-darker;
+            color: @border-preview-select;
             cursor: default;
         }
 
@@ -191,7 +179,7 @@
         padding: 0;
 
         &.icon--inverse {
-            background-position-x: -20px;
+            background-position-x: @button-header-normal-icon-offset-x;
         }
     }
 
@@ -259,7 +247,7 @@
     }
 
     label {
-        color: @gray-deep;
+        color: @text-normal;
     }
 
     .cousers-list {
@@ -288,12 +276,12 @@
             height: 12px;
             display: inline-block;
             vertical-align: middle;
-            border: 1px solid @gray-dark;
+            border: @scaled-one-px-value solid @border-toolbar;
             margin: 0 5px 1px 0;
         }
 
         .user-name {
-            color: @gray-deep;
+            color: @text-normal;
             font-size: 12px;
             font-weight: bold;
             white-space: nowrap;
@@ -332,7 +320,17 @@
         position: relative;
 
         &.icon--inverse {
-            background-position-x: -20px;
+            background-position-x: @button-header-normal-icon-offset-x;
+        }
+    }
+
+    .btn& {
+        &:active, &.active {
+            .icon.toolbar__icon {
+                &.icon--inverse {
+                    background-position-x: @button-header-active-icon-offset-x;
+                }
+            }
         }
     }
 
@@ -355,7 +353,7 @@
 
     &:hover {
         &:not(.disabled) {
-            background-color: rgba(255,255,255,0.2);
+            background-color: @highlight-header-button-hover;
         }
     }
 
@@ -373,10 +371,10 @@
 }
 
 #box-document-title {
-    background-color: @tabs-bg-color;
+    background-color: @header-background-color;
     display: flex;
     height: 100%;
-    color:#fff;
+    color: @text-toolbar-header;
     position: relative;
 
     .btn-slot {
@@ -384,7 +382,7 @@
     }
 
     svg.icon {
-        fill: #fff;
+        fill: @icon-toolbar-header;
 
         &.icon-save {
             &.btn-save-coauth, &.btn-synch {

apps/common/main/resources/less/history.less

@@ -1,6 +1,6 @@
 #history-box {
     position: relative;
-    border-right: 1px solid #cbcbcb;
+    border-right: @scaled-one-px-value solid @border-toolbar;
 }
 
 #history-header {
@@ -10,7 +10,7 @@
     top: 0;
     right: 0;
     overflow: hidden;
-    border-bottom: 1px solid @gray-dark;
+    border-bottom: @scaled-one-px-value solid @border-toolbar;
 
     #history-btn-back {
         height: 27px;
@@ -21,7 +21,7 @@
         cursor: pointer;
 
         &:hover {
-            background-color: @secondary;
+            background-color: @highlight-button-hover;
         }
     }
 }
@@ -33,7 +33,7 @@
     bottom: 0;
     right: 0;
     overflow: hidden;
-    border-top: 1px solid @gray-dark;
+    border-top: @scaled-one-px-value solid @border-toolbar;
 
     #history-btn-expand {
         height: 27px;
@@ -44,7 +44,7 @@
         cursor: pointer;
 
         &:hover {
-            background-color: @secondary;
+            background-color: @highlight-button-hover;
         }
     }
 }
@@ -64,20 +64,15 @@
 
         &:hover:not(.selected),
         &.over {
-            background-color: @secondary;
-
-            .user-version {
-                color: #fff;
-                background-color: #ababab;
-            }
+            background-color: @highlight-button-hover;
         }
 
         &.selected {
-            background-color: @primary;
+            background-color: @highlight-button-pressed;
 
             .user-name,
             .user-date {
-                color: #fff;
+                color: @text-normal-pressed;
             }
 
             .revision-expand {
@@ -88,7 +83,7 @@
 
     .history-item-wrap {
         padding: 10px 2px 15px 20px;
-        color: @gray-deep;
+        color: @text-normal;
         text-overflow: ellipsis;
 
         .user-date {
@@ -104,11 +99,12 @@
             display: inline-block;
             max-width: 60px;
             height: 18px;
-            color: @primary;
+            color: @highlight-button-pressed;
             font-size: 10px;
             white-space: nowrap;
             overflow: hidden;
-            background-color: #e6e6e6;
+            color: @text-tertiary;
+            background-color: @background-normal;
             text-align: center;
             padding: 1px 5px;
             border-radius: 2px;
@@ -128,7 +124,7 @@
         .color {
             width: 12px;
             height: 12px;
-            border: 1px solid @gray-dark;
+            border: @scaled-one-px-value solid @border-toolbar;
             margin: 0 5px 3px 0;
             vertical-align: middle;
         }
@@ -148,8 +144,8 @@
         }
 
         .revision-restore {
-            color: #fff;
-            border-bottom: 1px dotted #fff;
+            color: @text-normal;
+            border-bottom: @scaled-one-px-value dotted @text-normal;
             height: 16px;
             margin-top: 5px;
             white-space: pre-wrap;

apps/common/main/resources/less/hsb-colorpicker.less

@@ -8,7 +8,7 @@
         width: 22px;
         height: 22px;
         float: left;
-        border: 1px solid #C4C4C4;
+        border: @scaled-one-px-value solid @border-regular-control;
         background-image: none;
         background-position: 0 -206px;
         background-repeat: no-repeat;
@@ -22,7 +22,7 @@
     }
 
     .color-text {
-        color: #464646;
+        color: @text-normal;
         height: 22px;
         padding: 4px 32px;
         cursor: default;
@@ -34,7 +34,7 @@
         width: 195px;
         height: 196px;
         position: relative;
-        border: 1px solid #C4C4C4;
+        border: @scaled-one-px-value solid @border-regular-control;
         background-position: 0 0;
     }
 
@@ -49,7 +49,7 @@
         width: 10px;
         height: 100%;
         position: relative;
-        border: 1px solid #C4C4C4;
+        border: @scaled-one-px-value solid @border-regular-control;
         background-position: -195px 0;
     }
 
@@ -70,7 +70,7 @@
     }
 
     .empty-color {
-        color: #464646;
+        color: @text-normal;
         height: 16px;
         margin: 5px 0;
 
@@ -91,7 +91,7 @@
             height: 10px;
             margin-right: 5px;
             margin-top: 1px;
-            border: 1px solid #C4C4C4;
+            border: @scaled-one-px-value solid @border-regular-control;
         }
     }
 }

apps/common/main/resources/less/input.less

@@ -1,11 +1,14 @@
 .form-control {
     .border-radius(@border-radius-small);
     .box-shadow(none);
-    color: @gray-deep;
+    color: @text-normal;
     .user-select(text);
 
+    border: @scaled-one-px-value solid @border-regular-control;
+    background-color: @background-normal;
+
     &:focus {
-        border-color: @input-border;
+        border-color: @border-control-focus;
         outline: 0;
         .box-shadow(none);
     }
@@ -13,12 +16,12 @@
 
 .form-control[readonly] {
     cursor: pointer;
-    background-color: @input-bg;
+    background-color: @background-normal;
 }
 
 .form-control[disabled] {
     cursor: default;
-    background-color: @input-bg;
+    background-color: @background-normal;
    .user-select(none);
 }
 
@@ -49,7 +52,7 @@
 
     &.form-control:focus,
     .form-control:focus {
-        border-color: @gray-darker;
+        //border-color: @border-control-focus;
     }
 
     &.error {
@@ -61,6 +64,18 @@
             display: block;
         }
     }
+
+    &.warning {
+        input:not([disabled]) + .input-error {
+            display: block;
+        }
+
+        .input-error {
+            &:before {
+                background-position: @input-warning-offset-x @input-warning-offset-y;
+            }
+        }
+    }
 }
 
 input:required:focus:invalid,
@@ -87,12 +102,12 @@ input[type="password"] {
 }
 
 input[type="text"]::selection, textarea::selection {
-    background: #3494fb;
-    color: white;
+    background: @highlight-text-select;
+    color: @text-inverse;
 }
 
 textarea.form-control:focus {
-    border-color: @gray-darker;
+    //border-color: @border-control-focus;
 }
 
 .input-field-btn {
@@ -100,9 +115,14 @@ textarea.form-control:focus {
 
     .select-button {
         position: absolute;
-        top: 1px;
-        right: 1px;
+        right: @scaled-one-px-value;
+
+        > .btn-toolbar {
+            height: 22px;
+            padding-top: 1px;
+        }
     }
+
     .input-error {
         &:before {
             right: 22px;

apps/common/main/resources/less/language-dialog.less

@@ -12,7 +12,7 @@ li {
 
   &.selected, a.checked {
     .icon.spellcheck-lang {
-      background-position-x: -20px; --bgX: -20px;
+        background-position-x: @button-small-active-icon-offset-x;
     }
   }
 }
@@ -23,10 +23,10 @@ li {
       &:before {
         display: none;
       }
-      background-color: @primary;
+      background-color: @highlight-button-pressed;
 
       &, &:hover, &:focus {
-        color: @dropdown-link-active-color;
+        color: @text-normal-pressed;
       }
     }
   }

apps/common/main/resources/less/layout.less

@@ -17,7 +17,7 @@
 
     .layout-resizer {
         z-index: @zindex-dropdown - 10;
-        background: @gray-light;
+        background: @background-toolbar;
         border: 0 none;
 
         &.move {
@@ -36,8 +36,8 @@
             cursor: row-resize;
 
             &.move {
-                border-top: solid 1px @gray-dark;
-                border-bottom: solid 1px @gray-dark;
+                border-top: solid @scaled-one-px-value @border-toolbar;
+                border-bottom: solid @scaled-one-px-value @border-toolbar;
             }
         }
     }
@@ -53,8 +53,8 @@
             cursor: col-resize;
 
             &.move {
-                border-left: solid 1px @gray-dark;
-                border-right: solid 1px @gray-dark;
+                border-left: solid @scaled-one-px-value @border-toolbar;
+                border-right: solid @scaled-one-px-value @border-toolbar;
             }
         }
     }

apps/common/main/resources/less/listview.less

@@ -1,5 +1,5 @@
 .listview {
-  border: 1px solid @input-border;
+  border: @scaled-one-px-value solid @border-regular-control;
   .border-radius(@border-radius-small);
   line-height: 15px;
 
@@ -14,7 +14,7 @@
         text-align: center;
         width: 100%;
         height: 100%;
-        color: #b2b2b2;
+        color: @text-tertiary;
         td {
           padding: 5px;
         }
@@ -22,7 +22,7 @@
   }
 
   &:not(.no-focus):focus {
-    border-color: @gray-darker;
+    border-color: @border-preview-select;
   }
 
   & > .item {
@@ -32,27 +32,27 @@
     cursor: pointer;
     white-space: pre-wrap;
 
-    background-color: @list-group-bg;
-    border-color: @list-group-border;
+    background-color: @background-normal;
+    border-color: @border-regular-control;
     border-style: solid;
-    border-width: 1px 0;
-    border-top-color: #fafafa;
+    border-width: @scaled-one-px-value 0;
+    border-top-color: transparent;
   }
 
   &:not(.disabled) > .item {
     &:hover {
-      background-color: @secondary;
-      border-color: @secondary;
+      background-color: @highlight-button-hover;
+      border-color: @highlight-button-hover;
       border-style: solid;
-      border-width: 1px 0;
+      border-width: @scaled-one-px-value 0;
     }
 
     &.selected {
-      background-color: @primary;
-      color: #fff;
-      border-color: @primary;
+      background-color: @highlight-button-pressed;
+      color: @text-normal-pressed;
+      border-color: @highlight-button-pressed;
       border-style: solid;
-      border-width: 1px 0;
+      border-width: @scaled-one-px-value 0;
     }
   }
 

apps/common/main/resources/less/loadmask.less

@@ -22,8 +22,8 @@
     line-height: @loadmask-image-height;
     border: none;
     background-image: none;
-    background-color: fade(@gray-deep, 95%);
-    color: @gray-light;
+    background-color: @background-loader;
+    color: @text-contrast-background;
     .border-radius(@border-radius-large);
 
     left: 50%;
@@ -52,7 +52,7 @@
     .left-panel & {
         line-height: @loadmask-small-image-height;
         background-color: transparent;
-        color: @gray-deep;
+        color: @text-normal;
         padding: 8px;
         top: 78px;
         transform: translate(-50%, 0);

apps/common/main/resources/less/masked-field.less

@@ -1,10 +1,10 @@
 .masked-field {
     text-align: right;
-    border: 1px solid @gray;
+    border: @scaled-one-px-value solid @border-regular-control;
     border-radius: 2px;
     padding: 0 3px;
 
     &:focus {
-        border-color: @gray-darker;
+        border-color: @border-preview-select;
     }
 }

apps/common/main/resources/less/multislider-gradient.less

@@ -12,19 +12,19 @@
             left: 2px;
             width: 9px;
             height: 9px;
-            background-color: #ffffff;
+            background-color: @background-normal;
             -moz-transform: rotate(45deg);
             -ms-transform: rotate(45deg);
             -webkit-transform: rotate(45deg);
             -o-transform: rotate(45deg);
             transform: rotate(45deg);
-            border-top: solid 1px @gray-darker;
-            border-left: solid 1px @gray-darker;
+            border-top: solid @scaled-one-px-value @border-regular-control;
+            border-left: solid @scaled-one-px-value @border-regular-control;
             border-radius: 0 3px;
             box-sizing: content-box;
             .thumb-top-inner {
-                border-top: solid 1px #fff;
-                border-left: solid 1px #fff;
+                border-top: solid @scaled-one-px-value @background-normal;
+                border-left: solid @scaled-one-px-value @background-normal;
                 height: 100%;
             }
         }
@@ -35,13 +35,13 @@
             left: 1px;
             width: 10px;
             height: 9px;
-            background-color: #ffffff;
-            border: solid 1px @gray-darker;
+            background-color: @background-normal;
+            border: solid @scaled-one-px-value @border-regular-control;
             border-top: none;
             border-radius: 2px;
             box-sizing: content-box;
             .thumb-bottom-inner {
-                border: solid 1px #fff;
+                border: solid @scaled-one-px-value @border-regular-control;
                 border-top: none;
                 height: 100%;
             }
@@ -49,11 +49,11 @@
 
         &.active {
             .thumb-top {
-                border-top: solid 1px #000;
-                border-left: solid 1px #000;
+                border-top: solid @scaled-one-px-value @border-regular-control;
+                border-left: solid @scaled-one-px-value @border-regular-control;
             }
             .thumb-bottom {
-                border: solid 1px #000;
+                border: solid @scaled-one-px-value @border-control-focus;
                 border-top: none;
             }
         }
@@ -80,8 +80,8 @@
 //        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
 
         background-position: 0 0;
-        outline: 1px solid rgba(162, 162, 162, 1);
-        border: 1px solid #FFFFFF;
+        outline: @scaled-one-px-value solid @border-control-focus;
+        border: @scaled-one-px-value solid @border-regular-control;
         cursor: copy;
     }
 }

apps/common/main/resources/less/opendialog.less

@@ -43,7 +43,7 @@
         height: 110px !important;
         position:relative;
         overflow:hidden;
-        border: @gray-soft solid 1px;
+        border: @border-regular-control solid @scaled-one-px-value;
       }
 
       #id-preview-data {
@@ -59,7 +59,7 @@
 
       td {
         padding: 1px 8px 1px 0;
-        border-right: @gray-soft solid 1px;
+        border-right: @border-regular-control solid @scaled-one-px-value;
         min-width: 30px;
         height: 17px;
         white-space: nowrap;

apps/common/main/resources/less/plugins.less

@@ -26,11 +26,11 @@
 
             &:hover,
             &.over {
-                background-color: @secondary;
+                background-color: @highlight-button-hover;
             }
 
             &.selected {
-                background-color: @primary;
+                background-color: @highlight-button-pressed;
                 color: #fff;
             }
         }
@@ -82,7 +82,7 @@
         width: 100%;
         height: 38px;
         padding: 10px 12px;
-        border-bottom: 1px solid @gray-dark;
+        border-bottom: @scaled-one-px-value solid @border-toolbar;
         
         label {
             width: 100%;
@@ -118,7 +118,7 @@
     width: 100%;
     height: 100%;
     opacity: 0.4;
-    background-color: @gray-light;
+    background-color: @background-toolbar;
     z-index: @zindex-tooltip + 1;
 }
 

apps/common/main/resources/less/radiobox.less

@@ -18,8 +18,8 @@
             width: 14px;
             height: 14px;
 
-            background: #fff;
-            border: 1px solid @gray;
+            background: @background-normal;
+            border: @scaled-one-px-value solid @border-regular-control;
             border-radius: 50%;
         }
 
@@ -28,7 +28,7 @@
                 &::before {
                     content: '';
                     position: absolute;
-                    background: @gray-deep;
+                    background: @text-normal;
                     border-radius: 50%;
                     width: 8px;
                     height: 8px;

apps/common/main/resources/less/scroller.less

@@ -11,13 +11,13 @@
         }
 
         .ps-scrollbar-x {
-            background-color: @gray-light;
+            background-color: @background-toolbar;
 
             &.always-visible-x {
                 bottom: 0px;
                 height: 9px;
 
-                background-color: @gray-light;
+                background-color: @background-toolbar;
                 background-image: data-uri('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAOCAYAAAD0f5bSAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAuSURBVChTY6AfOH/+/H9SaSYQg1RAlqZhCT5+/AgOSlJoOgY50DqSNZJhEwMDACkvNZLpune5AAAAAElFTkSuQmCC');
                 background-repeat: no-repeat;
 
@@ -31,7 +31,7 @@
 
                 background-position: center 0;
                 .border-radius(2px);
-                border: 1px solid @gray;
+                border: @scaled-one-px-value solid @border-regular-control;
                 -o-transition: background-color .5s 0 linear;
                 -webkit-transition: background-color .5s 0 linear;
                 -moz-transition: background-color .5s 0 linear;
@@ -43,7 +43,7 @@
         .hover {
             .ps-scrollbar-x {
                 &.always-visible-x {
-                    background-color: @gray;
+                    background-color: @border-regular-control;
                     background-position: center -7px;
                 }
             }
@@ -52,8 +52,8 @@
         &.in-scrolling {
             .ps-scrollbar-x {
                 &.always-visible-x {
-                    background-color: @gray-soft;
-                    border-color: @gray-soft;
+                    background-color: @border-regular-control;
+                    border-color: @border-regular-control;
                     background-position: center -7px;
                 }
             }
@@ -72,20 +72,20 @@
         }
 
         .ps-scrollbar-y {
-            background-color: @gray-light;
+            background-color: @background-toolbar;
 
             &.always-visible-y {
                 right: 0px;
                 width: 9px;
 
-                background-color: @gray-light;
+                background-color: @background-toolbar;
                 .background-ximage('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAANCAQAAAAz1Zf0AAAAIUlEQVR42mNgAILz/0GQAQo+/gdBBqLAqE5ydH5k+sgEANHgUH2JtDRHAAAAAElFTkSuQmCC',
                         'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAaAgMAAADZOtQaAAAACVBMVEUAAADPz8/x8fFVrc9qAAAAAXRSTlMAQObYZgAAABZJREFUeNpjYAgNYOBaxcDEgAsMLXkA/sUJfm1m4l8AAAAASUVORK5CYII=', 14px);
 
                 background-repeat: no-repeat;
                 background-position: 0 center;
                 .border-radius(2px);
-                border: 1px solid @gray;
+                border: @scaled-one-px-value solid @border-regular-control;
                 -o-transition: background-color .5s 0 linear;
                 -webkit-transition: background-color .5s 0 linear;
                 -moz-transition: background-color .5s 0 linear;
@@ -97,7 +97,7 @@
         .hover {
             .ps-scrollbar-y {
                 &.always-visible-y {
-                    background-color: @gray;
+                    background-color: @border-regular-control;
                     background-position: -7px center;
                 }
             }
@@ -106,8 +106,8 @@
         &.in-scrolling {
             .ps-scrollbar-y {
                 &.always-visible-y {
-                    background-color: @gray-soft;
-                    border-color: @gray-soft;
+                    background-color: @border-regular-control;
+                    border-color: @border-regular-control;
                     background-position: -7px center;
                 }
             }

apps/common/main/resources/less/separator.less

@@ -9,7 +9,7 @@
 .separator {
     display: inline-block;
     position: inherit;
-    border-left: 1px solid @gray-dark;
+    border-left: @scaled-one-px-value solid @border-divider;
     vertical-align: top;
     padding: 0;
     width: 0;
@@ -20,6 +20,6 @@
 
         border-left: none;
         border-right: none;
-        border-top: 1px solid @gray-dark;
+        border-top: @scaled-one-px-value solid @border-divider;
     }
 }

apps/common/main/resources/less/spinner.less

@@ -10,7 +10,7 @@
         padding-right: @trigger-width + 2px;
 
         &:focus {
-            border-color: @gray-darker;
+            // border-color: @border-preview-select;
         }
     }
 
@@ -18,7 +18,7 @@
         display: block;
         position: relative;
         width: @trigger-width;
-        height: @spin-height/2;
+        height: @spin-height/2 - 1;
         padding: 0;
         margin: 0;
         border: none;
@@ -39,35 +39,39 @@
         position: absolute;
         top: 0;
         right: 1px;
+        border-top: @scaled-one-px-value solid transparent;
+        border-bottom: @scaled-one-px-value solid transparent;
 
         i {
             display: inline-block;
-            width: @trigger-width;
-            height: @spin-height/2;
+            width: 4px;
+            height: 4px;
+
+            border: solid @scaled-one-px-value @icon-normal;
+            border-bottom: none;
+            border-right: none;
         }
 
         button {
             &.disabled {
                 opacity: .35;
             }
+
+            &:hover {
+                background-color: @highlight-button-hover;
+            }
         }
     }
 
     .spinner-up {
         i {
-            background-position: @spinner-offset-x @spinner-offset-y;
+            transform: rotate(45deg) translate(-1px,-1px);
         }
-
-        &.over   i { background-position: @spinner-offset-x - @trigger-width @spinner-offset-y; }
-        &.active i { background-position: @spinner-offset-x @spinner-offset-y; }
     }
 
     .spinner-down {
         i {
-            background-position: @spinner-offset-x @spinner-offset-y - @spin-height / 2;
+            transform: rotate(-135deg) translate(2px,2px);
         }
-
-        &.over   i { background-position: @spinner-offset-x - @trigger-width @spinner-offset-y - @spin-height / 2; }
-        &.active i { background-position: @spinner-offset-x @spinner-offset-y - @spin-height / 2; }
     }
 }

apps/common/main/resources/less/switcher.less

@@ -8,7 +8,7 @@
     .sw-left {
         display: inline-block;
         height: 100%;
-        background-color: @primary;
+        background-color: @highlight-button-pressed;
         border-top-left-radius: 2px;
         border-bottom-left-radius: 2px;
     }
@@ -16,7 +16,7 @@
     .sw-right {
         display: inline-block;
         height: 100%;
-        background-color: @gray;
+        background-color: @border-regular-control;
         border-top-right-radius: 2px;
         border-bottom-right-radius: 2px;
     }
@@ -27,8 +27,8 @@
         right: auto;
         top: 0;
         height: 100%;
-        background-color: #ffffff;
-        border: 1px solid @primary;
+        background-color: @background-normal;
+        border: 1px solid @highlight-button-pressed;
         border-radius: 3px;
     }
 
@@ -43,11 +43,11 @@
         cursor: default;
 
         .sw-left {
-            background-color: @gray;
+            background-color: @border-regular-control;
         }
 
         .thumb {
-            border-color: @gray;
+            border-color: @border-regular-control;
         }
     }
 }

apps/common/main/resources/less/symboltable.less

@@ -7,9 +7,9 @@
   .cell{
     width: 31px;
     height: 33px;
-    border-right: 1px solid @gray-soft;
-    border-bottom: 1px solid @gray-soft;
-    background: #ffffff;
+    border-right: @scaled-one-px-value solid @border-regular-control;
+    border-bottom: @scaled-one-px-value solid @border-regular-control;
+    background: @background-normal;
     align-content: center;
     vertical-align: middle;
     text-align: center;
@@ -24,7 +24,7 @@
   }
 
   .cell-selected{
-    background-color: @gray-darker;
+    background-color: @border-preview-select;
     color: white;
   }
 }
@@ -33,7 +33,7 @@
   width: 100%;
   height: 32px;
   overflow: hidden;
-  border: @gray-soft solid 1px;
+  border: @border-regular-control solid @scaled-one-px-value;
 }
 
 #symbol-table-scrollable-div {
@@ -42,7 +42,7 @@
     height: 132px;
     position:relative;
     overflow:hidden;
-    border: @gray-soft solid 1px;
+    border: @border-regular-control solid @scaled-one-px-value;
   }
 
   #id-preview-data {

apps/common/main/resources/less/synchronize-tip.less

@@ -99,7 +99,7 @@
 .asc-synchronizetip {
     padding: 15px 8px 15px 15px;
     border-radius: 5px;
-    background-color: #fcfed7;
+    background-color: @background-notification-popover;
     overflow: visible;
 
     .right & {
@@ -123,7 +123,7 @@
     position: absolute;
     top: 5px;
     left: 8px;
-    background-color: #fcfed7;
+    background-color: @background-notification-popover;
     width: 15px;
     height: 15px;
 
@@ -141,8 +141,8 @@
 }
 
 .show-link label {
-    border-bottom: 1px dotted #445799;
-    color: #445799;
+    border-bottom: @scaled-one-px-value dotted @text-link;
+    color: @text-link;
     cursor: pointer;
 }
 

apps/common/main/resources/less/tabbar.less

@@ -8,9 +8,9 @@
 
         &.active {
             > span, > span:hover, > span:focus {
-                background-color: #fff;
-                color: #000;
-                border-color: #fff;
+                background-color: @background-normal;
+                color: @text-normal;
+                border-color: @background-normal;
                 cursor: pointer;
             }
         }
@@ -21,8 +21,8 @@
 
         > span {
             display: inline;
-            background-color: #7a7a7a;
-            color: #fff;
+            background-color: @background-toolbar;
+            color: @text-secondary;
 
             padding-top: 0;
             padding-bottom: 0;
@@ -36,8 +36,8 @@
             }
 
             &:hover, &:focus {
-                background-color: #7a7a7a;
-                border-color: #7a7a7a;
+                background-color: @background-toolbar;
+                border-color: @background-toolbar;
                 cursor: pointer;
             }
         }

apps/common/main/resources/less/theme-colorpalette.less

@@ -1,6 +1,6 @@
 .theme-colorpalette {
     margin: 0 !important;
-    color: black;
+    //color: black;
 
     em {
         border: none;
@@ -16,7 +16,7 @@
 
     a {
         padding: 0;
-        border: 1px solid #fff;
+        border: @scaled-one-px-value solid @background-normal;
         float: left;
         text-decoration: none;
         -moz-outline: 0 none;
@@ -24,25 +24,25 @@
         cursor: pointer;
 
         em span {
-            border: 1px solid rgba(0, 0, 0, 0.2);
+            border: @scaled-one-px-value solid @border-color-shading;
         }
 
         &:hover, &.selected {
-            border-color: #000;
+            border-color: @icon-normal;
             em span {
-                border-color: #fff;
+                border-color: @background-normal;
             }
         }
     }
 
     .dynamic-empty-color em span {
-        border:solid 1px #C0C0C0;
-        background:#ffffff
+        border:solid @scaled-one-px-value @border-color-shading;
+        background: @background-normal;
     }
 
     .color-transparent {
         em span {
-            border:solid 1px #C0C0C0;
+            border:solid @scaled-one-px-value @border-color-shading;
         }
     }
 }

apps/common/main/resources/less/toolbar.less

@@ -1,8 +1,8 @@
 @height-title: 28px;
 @height-tabs: 32px;
 @height-controls: 67px;
+@img-equition-filter: var(--image-border-types-filter);
 
-//@tabs-bg-color: #fff;
 
 .toolbar {
     position: relative;
@@ -38,7 +38,7 @@
         align-items: stretch;
 
         .extra {
-            background-color: @tabs-bg-color;
+            background-color: @header-background-color;
         }
 
     //&::after {
@@ -54,7 +54,7 @@
 
     .tabs {
         //flex-grow: 1;
-        background-color: @tabs-bg-color;
+        background-color: @header-background-color;
         position: relative;
         overflow: hidden;
         display: flex;
@@ -74,11 +74,11 @@
             height: 100%;
 
             &:hover {
-                background-color: rgba(255,255,255,0.2);
+                background-color: @highlight-header-button-hover;
             }
 
             &.active {
-                background-color: @gray-light;
+                background-color: @background-toolbar;
             }
 
 
@@ -89,12 +89,12 @@
                 cursor: default;
                 font-size: 12px;
                 text-align: center;
-                color: #fff;
+                color: @text-toolbar-header;
             }
 
             &.active {
                 > a {
-                    color: #444;
+                    color: @text-normal;
                 }
             }
         }
@@ -125,7 +125,7 @@
             }
 
             &.left{
-                box-shadow: 5px 0 20px 5px @tabs-bg-color;
+                box-shadow: 5px 0 20px 5px @header-background-color;
 
                 &:after {
                     transform: rotate(135deg);
@@ -133,7 +133,7 @@
                 }
             }
             &.right{
-                box-shadow: -5px 0 20px 5px @tabs-bg-color;
+                box-shadow: -5px 0 20px 5px @header-background-color;
 
                 &:after {
                     transform: rotate(-45deg);
@@ -191,8 +191,9 @@
         /**/
     }
 
-    background-color: @gray-light;
-    .box-inner-shadow(0 -1px 0 @gray-dark);
+    background-color: @background-toolbar;
+    @minus-px: calc(-1 * @scaled-one-px-value);
+    .box-inner-shadow(0 @minus-px @border-toolbar);
 
     .group {
         position: relative;
@@ -250,7 +251,7 @@
         }
 
         &.border {
-            border: 1px solid @gray;
+            border: 1px solid @border-regular-control;
             .border-radius(1px);
             width: 22px;
             height: 22px;
@@ -268,7 +269,7 @@
         right: 0;
         bottom: 0;
         opacity: 0;
-        background-color: @gray-light;
+        background-color: @background-toolbar;
         /* z-index: @zindex-tooltip + 1; */
     }
 
@@ -309,7 +310,7 @@
 
         .tabs, .extra {
             background-color: transparent;
-            box-shadow: inset 0 -1px 0 0 @gray;
+            box-shadow: inset 0 -1px 0 0 @border-regular-control;
         }
 
         .tabs {
@@ -323,7 +324,7 @@
                 &:after {
                     //transition: opacity .1s;
                     //transition: bottom .1s;
-                    border-top: @underscore_height solid @gray-deep;
+                    border-top: @underscore_height solid @text-normal;
                     content: '';
                     position: absolute;
                     width: 100%;
@@ -342,11 +343,11 @@
 
                 &:hover:not(.active) {
                     background-color: rgba(0, 0, 0, .05);
-                    //background-color: @secondary;
+                    //background-color: @highlight-button-hover;
                 }
 
                 > a {
-                    color: @gray-deep;
+                    color: @text-normal;
 
                     &::after {
                         display:block;
@@ -372,15 +373,15 @@
 
         .tabs .scroll {
             &.left {
-                box-shadow: 5px 0 20px 5px @gray-light;
+                box-shadow: 5px 0 20px 5px @background-toolbar;
             }
 
             &.right {
-                box-shadow: -5px 0 20px 5px @gray-light;
+                box-shadow: -5px 0 20px 5px @background-toolbar;
             }
 
             &:after {
-                border-color: @gray-deep;
+                border-color: @text-normal;
             }
         }
 
@@ -391,27 +392,27 @@
             }
 
             svg.icon {
-                fill: @gray-deep;
+                fill: @icon-toolbar-header;
             }
 
             .caption {
-                color: @gray-deep;
+                color: @text-normal;
             }
 
             &:hover:not(.disabled) {
-                background-color: @secondary;
+                background-color: @highlight-button-hover;
             }
 
             &:active, &.active {
                 &:not(.disabled) {
-                    background-color: @primary;
+                    background-color: @highlight-button-pressed;
 
                     svg.icon {
-                        fill: #fff;
+                        fill: @icon-toolbar-header;
                     }
 
                     .caption {
-                        color: #fff;
+                        color: @text-inverse;
                     }
                 }
             }
@@ -423,17 +424,17 @@
             }
 
             svg.icon {
-                fill: @gray-deep;
+                fill: @icon-toolbar-header;
             }
         }
 
         #rib-doc-name {
-            color: @gray-deep;
+            color: @text-normal;
         }
 
         &.editor-native-color {
             .tabs li:after {
-                border-color: @tabs-bg-color;
+                border-color: @header-background-color;
             }
         }
     }
@@ -467,22 +468,22 @@
 .btn-toolbar {
     &:active {
         svg.icon {
-            fill: #fff;
+            fill: @icon-toolbar-header;
         }
     }
 
     svg.icon {
         background-image: none;
 
-        fill: @gray-deep;
+        fill: @icon-normal;
     }
 
     &.borders--small {
         border-radius: 2px;
-        background-color: #fff;
+        background-color: @background-normal;
 
         &:not(:active) {
-            box-shadow: inset 0 0 0 1px #cbcbcb;
+            box-shadow: inset 0 0 0 @scaled-one-px-value @border-regular-control;
         }
 
         &, .icon {
@@ -508,13 +509,26 @@
     svg.icon {
         display: inline-block;
         vertical-align: middle;
-        fill: #444444;
+        fill: @icon-normal;
     }
 
     width: 20px;
     height: 20px;
 }
 
+.item-equation {
+    border: @scaled-one-px-value solid @border-regular-control;
+
+    .equation-icon {
+        .background-ximage-v2('toolbar/math.png', 1500px, @commonimage: true);
+
+        .theme-dark & {
+            -webkit-filter: @img-equition-filter;
+            filter: @img-equition-filter;
+        }
+    }
+}
+
 // charts
 .menu-insertchart {
     margin: 5px 5px 0 10px;
@@ -540,7 +554,45 @@
     svg.icon {
         display: inline-block;
         vertical-align: middle;
-        fill: #444444;
+        fill: @icon-normal;
     }
 }
 
+.color-schemas-menu {
+    span {
+        &.colors {
+            display: inline-block;
+            margin-right: 15px;
+        }
+
+        &.color {
+            display: inline-block;
+            width: 12px;
+            height: 12px;
+            margin-right: 2px;
+            border: @scaled-one-px-value solid @border-color-shading;
+            vertical-align: middle;
+        }
+
+        &.text {
+            vertical-align: middle;
+        }
+    }
+    &.checked {
+        &:before {
+            display: none !important;
+        }
+        &, &:hover, &:focus {
+            background-color: @highlight-button-pressed;
+            color: @dropdown-link-active-color;
+            span.color {
+                border-color: @icon-normal;
+            }
+        }
+    }
+}
+
+.item-equation {
+    border: @scaled-one-px-value solid @border-regular-control;
+    .background-ximage-v2('toolbar/math.png', 1500px);
+}

apps/common/main/resources/less/tooltip.less

@@ -15,7 +15,7 @@
     &.top-right .tooltip-arrow {
         bottom: 1px;
         border-width: 5px 5px 0;
-        border-top-color: @body-bg;
+        border-top-color: @background-normal;
     }
 
     &.top-left .tooltip-arrow,
@@ -32,16 +32,16 @@
     &.bottom-right .tooltip-arrow {
         top: 1px;
         border-width: 0 5px 5px;
-        border-bottom-color: @body-bg;
+        border-bottom-color: @background-normal;
     }
 }
 
 .tooltip-inner {
     font-size: 11px;
-    background-color: @body-bg;
-    color: @gray-deep;
+    background-color: @background-normal;
+    color: @text-normal;
     padding: 5px 12px;
-    border: 1px solid rgba(0, 0, 0, 0.15);
+    border: @scaled-one-px-value solid @border-regular-control;
     .box-shadow(0 6px 12px rgba(0, 0, 0, 0.175));
     background-clip: padding-box;
 

apps/common/main/resources/less/treeview.less

@@ -12,7 +12,7 @@
       text-align: center;
       height: 100%;
       width: 100%;
-      color: #b2b2b2;
+      color: @text-tertiary;
       td {
         padding: 5px;
       }
@@ -20,7 +20,7 @@
   }
 
   &:focus {
-    border-color: @gray-darker;
+    border-color: @border-preview-select;
   }
 
   > .item {
@@ -31,11 +31,11 @@
 
     &:hover,
     &.over {
-      background-color: @secondary;
+      background-color: @highlight-button-hover;
     }
 
     &.selected {
-      background-color: #cbcdcf;
+      background-color: @highlight-button-pressed;
     }
 
     &.selected .empty {
@@ -58,7 +58,7 @@
     text-overflow: ellipsis;
 
     &.empty {
-      color: #999;
+      color: @text-tertiary;
       font-style: italic;
     }
   }

apps/common/main/resources/less/variables.less

@@ -1,6 +1,9 @@
 //
 // Global values
 // --------------------------------------------------
+@pixel-ratio-factor: var(--pixel-ratio-factor, 1);
+@scaled-one-px-value: var(--scaled-one-pixel, 1px);
+@scaled-two-px-value: var(--scaled-two-pixel, 2px);
 
 // Paths
 // -------------------------
@@ -13,20 +16,20 @@
 // Grays
 // -------------------------
 
-@gray-deep:             #444444; //rgb(68, 68, 68)
-@gray-darker:           #848484; //rgb(132, 132, 132)
-@gray-dark:             #cbcbcb; //rgb(203, 203, 203)
-@gray:                  #cfcfcf; //rgb(207, 207, 207)
-@gray-light:            #f1f1f1; //rgb(241, 241, 241)
-@gray-lighter:          #ededed; //rgb(237, 237, 237)
-@gray-soft:             #adadad; //rgb(173, 173, 173)
+//@gray-deep:             #444444; //rgb(68, 68, 68)
+//@gray-darker:           #848484; //rgb(132, 132, 132)
+//@gray-dark:             #cbcbcb; //rgb(203, 203, 203)
+//@gray:                  #cfcfcf; //rgb(207, 207, 207)
+//@gray-light:            #f1f1f1; //rgb(241, 241, 241)
+//@gray-lighter:          #ededed; //rgb(237, 237, 237)
+//@gray-soft:             #adadad; //rgb(173, 173, 173)
 
-@primary:               #7d858c; //rgb(125, 133, 140)
-@primary-hover:         #666d73; //rgb(102, 109, 115)
-@secondary:             #d8dadc; //rgb(216, 218, 220)
-@secondary-hover:       #cbced1; //rgb(203, 206, 209)
+//@primary:               #7d858c; //rgb(125, 133, 140)
+//@primary-hover:         #666d73; //rgb(102, 109, 115)
+//@secondary:             #d8dadc; //rgb(216, 218, 220)
+//@secondary-hover:       #cbced1; //rgb(203, 206, 209)
 
-@black:                 #000000;
+//@black:                 #000000;
 
 // Brand colors
 // -------------------------
@@ -41,7 +44,7 @@
 // -------------------------
 
 @body-bg:               #fff;
-@text-color:            @gray-dark;
+@text-color:            #cbcbcb; // @gray-dark
 
 // Links
 // -------------------------
@@ -114,7 +117,7 @@
 @border-radius-small:            2px;
 
 @component-active-color:         #fff;
-@component-active-bg:            @primary;
+@component-active-bg:            #7d858c; // @primary;
 
 @caret-width-base:               4px;
 @caret-width-large:              5px;
@@ -162,7 +165,7 @@
 @btn-info-bg:                    @brand-info;
 @btn-info-border:                darken(@btn-info-bg, 5%);
 
-@btn-link-disabled-color:        @gray-light;
+@btn-link-disabled-color:        #f1f1f1; // @gray-light;
 
 // Allows for customizing button radius independently from global border radius
 @btn-border-radius-base:         @border-radius-base;
@@ -173,10 +176,10 @@
 // -------------------------
 
 @input-bg:                       #fff;
-@input-bg-disabled:              @gray-lighter;
+@input-bg-disabled:              #ededed; // @gray-lighter;
 
 @input-color:                    #000;
-@input-border:                   @gray;
+@input-border:                   #cfcfcf; // @gray;
 @input-border-radius:            @border-radius-base;
 @input-border-radius-large:      @border-radius-large;
 @input-border-radius-small:      @border-radius-small;
@@ -191,7 +194,7 @@
 //** Small `.form-control` border radius
 @input-border-radius-small:      @border-radius-small;
 
-@input-color-placeholder:        @gray;
+@input-color-placeholder:        #cfcfcf; // @gray;
 
 @input-height-base:              (floor(@font-size-base * @line-height-base) + (@padding-base-vertical * 2) + 5);
 @input-height-large:             (ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2);
@@ -199,7 +202,7 @@
 
 @form-group-margin-bottom:       15px;
 
-@legend-color:                   @gray-dark;
+@legend-color:                   #cbcbcb; // @gray-dark
 @legend-border-color:            #e5e5e5;
 
 @input-group-addon-bg:           @input-bg;
@@ -216,16 +219,16 @@
 @dropdown-fallback-border:       #ccc;
 @dropdown-divider-bg:            #e5e5e5;
 
-@dropdown-link-color:            @gray-deep;
-@dropdown-link-hover-color:      darken(@gray-deep, 5%);
-@dropdown-link-hover-bg:         @secondary;
+@dropdown-link-color:            #444; // @gray-deep;
+@dropdown-link-hover-color:      darken(#444, 5%); // darken(@gray-deep, 5%);
+@dropdown-link-hover-bg:         #d8dadc; // @secondary;
 
 @dropdown-link-active-color:     @component-active-color;
 @dropdown-link-active-bg:        @component-active-bg;
 
-@dropdown-link-disabled-color:   @gray;
+@dropdown-link-disabled-color:   #cfcfcf; // @gray;
 
-@dropdown-header-color:          @gray;
+@dropdown-header-color:          #cfcfcf; // @gray;
 
 
 // COMPONENT VARIABLES
@@ -332,12 +335,12 @@
 // Inverted navbar
 //
 // Reset inverted navbar basics
-@navbar-inverse-color:                      @gray-light;
+@navbar-inverse-color:                      #f1f1f1; // @gray-light;
 @navbar-inverse-bg:                         #222;
 @navbar-inverse-border:                     darken(@navbar-inverse-bg, 10%);
 
 // Inverted navbar links
-@navbar-inverse-link-color:                 @gray-light;
+@navbar-inverse-link-color:                 #f1f1f1; // @gray-light;
 @navbar-inverse-link-hover-color:           #fff;
 @navbar-inverse-link-hover-bg:              transparent;
 @navbar-inverse-link-active-color:          @navbar-inverse-link-hover-color;
@@ -360,20 +363,20 @@
 // -------------------------
 
 @nav-link-padding:                          10px 15px;
-@nav-link-hover-bg:                         @gray-lighter;
+@nav-link-hover-bg:                         #ededed; // @gray-lighter;
 
-@nav-disabled-link-color:                   @gray-light;
-@nav-disabled-link-hover-color:             @gray-light;
+@nav-disabled-link-color:                   #f1f1f1; // @gray-light;
+@nav-disabled-link-hover-color:             #f1f1f1; // @gray-light;
 
 @nav-open-link-hover-color:                 #fff;
 
 // Tabs
 @nav-tabs-border-color:                     #ddd;
 
-@nav-tabs-link-hover-border-color:          @gray-lighter;
+@nav-tabs-link-hover-border-color:          #ededed; // @gray-lighter;
 
 @nav-tabs-active-link-hover-bg:             @body-bg;
-@nav-tabs-active-link-hover-color:          @gray;
+@nav-tabs-active-link-hover-color:          #cfcfcf; // @gray;
 @nav-tabs-active-link-hover-border-color:   #ddd;
 
 @nav-tabs-justified-link-border-color:            #ddd;
@@ -392,14 +395,14 @@
 @pagination-border:                    #ddd;
 
 @pagination-hover-color:               @link-hover-color;
-@pagination-hover-bg:                  @gray-lighter;
+@pagination-hover-bg:                  #ededed; // @gray-lighter;
 @pagination-hover-border:              #ddd;
 
 @pagination-active-bg:                 @brand-primary;
 @pagination-active-color:              #fff;
 @pagination-active-border:             @brand-primary;
 
-@pagination-disabled-color:            @gray-light;
+@pagination-disabled-color:            #f1f1f1; // @gray-light;
 @pagination-disabled-bg:               #fff;
 @pagination-disabled-border:           #ddd;
 
@@ -414,7 +417,7 @@
 @pager-active-bg:                      @pagination-active-bg;
 @pager-active-color:                   @pagination-active-color;
 
-@pager-disabled-color:                 @gray-light;
+@pager-disabled-color:                 #f1f1f1; // @gray-light;
 
 
 // Jumbotron
@@ -422,7 +425,7 @@
 
 @jumbotron-padding:              30px;
 @jumbotron-color:                inherit;
-@jumbotron-bg:                   @gray-lighter;
+@jumbotron-bg:                   #ededed; // @gray-lighter;
 @jumbotron-heading-color:        inherit;
 @jumbotron-font-size:            ceil(@font-size-base * 1.5);
 @jumbotron-heading-font-size:    ceil((@font-size-base * 4.5));
@@ -478,7 +481,7 @@
 // Labels
 // -------------------------
 
-@label-default-bg:            @gray-light;
+@label-default-bg:            #f1f1f1; // @gray-light;
 @label-primary-bg:            @brand-primary;
 @label-success-bg:            @brand-success;
 @label-info-bg:               @brand-info;
@@ -557,8 +560,8 @@
 @list-group-active-border:    @list-group-active-bg;
 @list-group-active-text-color:  lighten(@list-group-active-bg, 40%);
 
-@list-group-disabled-color:      @gray-light;
-@list-group-disabled-bg:         @gray-lighter;
+@list-group-disabled-color:      #f1f1f1; // @gray-light;
+@list-group-disabled-bg:         #ededed; // @gray-lighter;
 @list-group-disabled-text-color: @list-group-disabled-color;
 
 @list-group-link-color:          #555;
@@ -576,7 +579,7 @@
 @panel-border-radius:         @border-radius-base;
 @panel-footer-bg:             #f5f5f5;
 
-@panel-default-text:          @gray-dark;
+//@panel-default-text:          @gray-dark;
 @panel-default-border:        #ddd;
 @panel-default-heading-bg:    #f5f5f5;
 
@@ -608,7 +611,7 @@
 @thumbnail-border:            #ddd;
 @thumbnail-border-radius:     @border-radius-base;
 
-@thumbnail-caption-color:     @text-color;
+//@thumbnail-caption-color:     @text-color;
 @thumbnail-caption-padding:   9px;
 
 
@@ -621,7 +624,7 @@
 // -------------------------
 @badge-color:                 #fff;
 @badge-link-hover-color:      #fff;
-@badge-bg:                    @gray-light;
+@badge-bg:                    #f1f1f1; // @gray-light;
 
 @badge-active-color:          @link-color;
 @badge-active-bg:             #fff;
@@ -637,7 +640,7 @@
 @breadcrumb-padding-horizontal: 15px;
 @breadcrumb-bg:               #f5f5f5;
 @breadcrumb-color:            #ccc;
-@breadcrumb-active-color:     @gray-light;
+@breadcrumb-active-color:     #f1f1f1; // @gray-light;
 @breadcrumb-separator:        "/";
 
 
@@ -673,25 +676,25 @@
 @kbd-bg:                      #333;
 
 @pre-bg:                      #f5f5f5;
-@pre-color:                   @gray-dark;
+//@pre-color:                   @gray-dark;
 @pre-border-color:            #ccc;
 @pre-scrollable-max-height:   340px;
 
 // Type
 // ------------------------
-@text-muted:                  @gray-light;
-@abbr-border-color:           @gray-light;
-@headings-small-color:        @gray-light;
-@blockquote-small-color:      @gray-light;
+@text-muted:                  #f1f1f1; // @gray-light;
+@abbr-border-color:           #f1f1f1; // @gray-light;
+@headings-small-color:        #f1f1f1; // @gray-light;
+@blockquote-small-color:      #f1f1f1; // @gray-light;
 @blockquote-font-size:        (@font-size-base * 1.25);
-@blockquote-border-color:     @gray-lighter;
-@page-header-border-color:    @gray-lighter;
+@blockquote-border-color:     #ededed; // @gray-lighter;
+@page-header-border-color:    #ededed; // @gray-lighter;
 
 // Miscellaneous
 // -------------------------
 
 // Hr border color
-@hr-border:                   @gray-lighter;
+@hr-border:                   #ededed; // @gray-lighter;
 
 // Horizontal forms & lists
 @component-offset-horizontal: 180px;
@@ -771,6 +774,10 @@
 @input-error-offset-x: -73px;
 @input-error-offset-y: -170px;
 
+// Input warning
+@input-warning-offset-x: -57px;
+@input-warning-offset-y: -170px;
+
 // Spinner
 @spinner-offset-x: -41px;
 @spinner-offset-y: -187px;

apps/common/main/resources/less/window.less

@@ -17,6 +17,10 @@
     opacity: 0.2;
     background-color: rgb(0,0,0);
     z-index: @zindex-modal - 1;
+
+    .theme-dark & {
+        opacity: 0.6;
+    }
 }
 
 .asc-window {
@@ -26,8 +30,8 @@
     z-index: @zindex-modal-background;
     box-shadow: 0 5px 15px rgba(0,0,0,0.2);
     border-radius: 5px;
-    background-color: @body-bg;
-    border: solid 1px @gray-dark;
+    background-color: @background-normal;
+    border: solid @scaled-one-px-value @border-toolbar;
 
     left: 0;
     top: 0;
@@ -46,16 +50,15 @@
         top: 0;
         text-overflow: ellipsis;
 
-        color: @gray-darker;
+        color: @text-normal;
         text-align: center;
         font-size: 12px;
         font-weight: 700;
-        text-shadow: 1px 1px #f8f8f8;
         vertical-align: bottom;
         line-height: 26px;
 
-        background: @gray-lighter;
-        border-bottom: solid 1px @gray-dark;
+        background: @background-toolbar;
+        border-bottom: solid @scaled-one-px-value @border-toolbar;
 
         cursor: move;
 
@@ -75,16 +78,36 @@
             margin: 4px 3px 0px 0px;
 
             &.close {
-                background-position: @but-close-offset-x @but-close-offset-y;
+                position: relative;
+                opacity: 0.7;
+                transition: transform .3s;
 
                 &:hover {
-                    background-position: @but-close-offset-x @but-close-offset-y - 16px;
+                    transform: scale(1.1);
+                    opacity: 1;
                 }
 
                 &.disabled {
-                    background-position: @but-close-offset-x @but-close-offset-y - 32px;
                     cursor: default;
                 }
+
+                &:before, &:after {
+                    content: ' ';
+                    position: absolute;
+                    left: calc(7px/@pixel-ratio-factor);
+                    top: @scaled-one-px-value;
+                    height: 14px;
+                    width: @scaled-one-px-value;
+                    background-color: @icon-normal;
+                }
+
+                &:before {
+                    transform: rotate(45deg);
+                }
+
+                &:after {
+                    transform: rotate(-45deg);
+                }
             }
 
             &.help {
@@ -93,7 +116,7 @@
                 line-height: 14px;
                 font-size: 14px;
                 font-weight: bold;
-                color: #444;
+                color: @text-normal;
                 opacity: 0.7;
 
                 &:hover {
@@ -123,7 +146,7 @@
         position: absolute;
         top: 34px;
         width: 100%;
-        background-color: @body-bg;
+        background-color: @background-normal;
     }
 
     &.modal {
@@ -186,10 +209,10 @@
 
                         a {
                             text-decoration: underline;
-                            color: @gray-deep;
+                            color: @text-normal;
 
                             &:focus, &:hover {
-                                color: @gray-deep;
+                                color: @text-normal;
                             }
                         }
                     }
@@ -247,8 +270,8 @@
         width: 5px;
         height: 5px;
         z-index: 1;
-        background: @gray-lighter;
-        border: 1px none @gray-dark;
+        background: @background-toolbar;
+        border: @scaled-one-px-value none @border-toolbar;
 
         &.left {
             left: 0;
@@ -275,6 +298,12 @@
             }
         }
     }
+
+    .img-commonctrl {
+        &.img-no-theme-filter {
+            filter: none;
+        }
+    }
 }
 
 .modal-dlg {

apps/common/mobile/lib/controller/Collaboration.js

@@ -408,6 +408,7 @@ define([
                 }
                 !suppressEvent && this.initReviewingSettingsView();
                 DE.getController('Toolbar').setDisplayMode(displayMode);
+                DE.getController('DocumentHolder').setDisplayMode(displayMode);
             },
 
 
@@ -853,7 +854,7 @@ define([
                         }
                     } else {
                         $('.comment-resolve, .comment-menu, .add-reply, .reply-menu').removeClass('disabled');
-                        if (this.showComments.length > 1) {
+                        if (this.showComments && this.showComments.length > 1) {
                             $('.prev-comment, .next-comment').removeClass('disabled');
                         }
                     }
@@ -865,7 +866,7 @@ define([
                 $('.comment-menu').single('click', _.buffered(this.initMenuComments, 100, this));
                 $('.reply-menu').single('click', _.buffered(this.initReplyMenu, 100, this));
                 $('.comment-resolve').single('click', _.bind(this.onClickResolveComment, this, false));
-                if (this.showComments.length === 1) {
+                if (this.showComments && this.showComments.length === 1) {
                     $('.prev-comment, .next-comment').addClass('disabled');
                 }
             },
@@ -892,28 +893,31 @@ define([
                     });
                     mainView.hideNavbar();
                 } else {
-                    me.modalViewComment = uiApp.popover(
-                        '<div class="popover container-view-comment">' +
-                        '<div class="popover-inner">' +
-                        me.view.getTemplateContainerViewComments() +
-                        '</div>' +
-                        '</div>',
-                        $$('#toolbar-collaboration')
-                    );
-                    this.picker = $$(me.modalViewComment);
-                    var $overlay = $('.modal-overlay');
-
-                    $$(this.picker).on('opened', function () {
-                        $overlay.on('removeClass', function () {
-                            if (!$overlay.hasClass('modal-overlay-visible')) {
-                                $overlay.addClass('modal-overlay-visible')
-                            }
+                    if (!me.openModal) {
+                        me.modalViewComment = uiApp.popover(
+                            '<div class="popover container-view-comment">' +
+                            '<div class="popover-inner">' +
+                            me.view.getTemplateContainerViewComments() +
+                            '</div>' +
+                            '</div>',
+                            $$('#toolbar-collaboration')
+                        );
+                        this.picker = $$(me.modalViewComment);
+                        var $overlay = $('.modal-overlay');
+                        me.openModal = true;
+                        $$(this.picker).on('opened', function () {
+                            $overlay.on('removeClass', function () {
+                                if (!$overlay.hasClass('modal-overlay-visible')) {
+                                    $overlay.addClass('modal-overlay-visible')
+                                }
+                            });
+                        }).on('close', function () {
+                            $overlay.off('removeClass');
+                            $overlay.removeClass('modal-overlay-visible');
+                            $('.popover').remove();
+                            me.openModal = false;
                         });
-                    }).on('close', function () {
-                        $overlay.off('removeClass');
-                        $overlay.removeClass('modal-overlay-visible');
-                        $('.popover').remove();
-                    });
+                    }
                 }
                 me.getView('Common.Views.Collaboration').renderViewComments(me.showComments, me.indexCurrentComment);
                 $('.prev-comment').single('click', _.bind(me.onViewPrevComment, me));
@@ -923,7 +927,7 @@ define([
                 $('.reply-menu').single('click', _.buffered(me.initReplyMenu, 100, me));
                 $('.comment-resolve').single('click', _.bind(me.onClickResolveComment, me, false));
 
-                if (me.showComments.length === 1) {
+                if (me.showComments && me.showComments.length === 1) {
                     $('.prev-comment, .next-comment').addClass('disabled');
                 }
 
@@ -1000,7 +1004,7 @@ define([
             },
 
             onViewPrevComment: function() {
-                if (this.showComments.length > 0) {
+                if (this.showComments && this.showComments.length > 0) {
                     if (this.indexCurrentComment - 1 < 0) {
                         this.indexCurrentComment = this.showComments.length - 1;
                     } else {
@@ -1017,7 +1021,7 @@ define([
             },
 
             onViewNextComment: function() {
-                if (this.showComments.length > 0) {
+                if (this.showComments && this.showComments.length > 0) {
                     if (this.indexCurrentComment + 1 === this.showComments.length) {
                         this.indexCurrentComment = 0;
                     } else {
@@ -1140,7 +1144,7 @@ define([
                         var me = this;
                         _.delay(function () {
                             var _menuItems = [];
-                            _menuItems.push({
+                            comment.editable && _menuItems.push({
                                 caption: me.textEdit,
                                 event: 'edit'
                             });
@@ -1161,7 +1165,7 @@ define([
                                     event: 'addreply'
                                 });
                             }
-                            _menuItems.push({
+                            comment.removable && _menuItems.push({
                                 caption: me.textDeleteComment,
                                 event: 'delete',
                                 color: 'red'
@@ -1199,13 +1203,15 @@ define([
                     if (_.isNumber(idComment)) {
                         idComment = idComment.toString();
                     }
-                    _.delay(function () {
+                    var comment = this.findComment(idComment);
+                    var reply = comment && comment.replys ? comment.replys[ind] : null;
+                    reply && _.delay(function () {
                         var _menuItems = [];
-                        _menuItems.push({
+                        reply.editable && _menuItems.push({
                             caption: me.textEdit,
                             event: 'editreply'
                         });
-                        _menuItems.push({
+                        reply.removable && _menuItems.push({
                             caption: me.textDeleteReply,
                             event: 'deletereply',
                             color: 'red'
@@ -1551,7 +1557,8 @@ define([
                             reply               : data.asc_getReply(i).asc_getText(),
                             time                : date.getTime(),
                             userInitials        : this.getInitials(username),
-                            editable            : this.appConfig.canEditComments || (data.asc_getReply(i).asc_getUserId() == _userId)
+                            editable            : this.appConfig.canEditComments || (data.asc_getReply(i).asc_getUserId() == _userId),
+                            removable           : this.appConfig.canDeleteComments || (data.asc_getReply(i).asc_getUserId() == _userId)
                         });
                     }
                 }
@@ -1580,7 +1587,8 @@ define([
                     replys              : [],
                     groupName           : (groupname && groupname.length>1) ? groupname[1] : null,
                     userInitials        : this.getInitials(username),
-                    editable            : this.appConfig.canEditComments || (data.asc_getUserId() == _userId)
+                    editable            : this.appConfig.canEditComments || (data.asc_getUserId() == _userId),
+                    removable           : this.appConfig.canDeleteComments || (data.asc_getUserId() == _userId)
                 };
                 if (comment) {
                     var replies = this.readSDKReplies(data);
@@ -1616,6 +1624,8 @@ define([
                     comment.quote = data.asc_getQuoteText();
                     comment.time = date.getTime();
                     comment.date = me.dateToLocaleTimeString(date);
+                    comment.editable = me.appConfig.canEditComments || (data.asc_getUserId() == _userId);
+                    comment.removable = me.appConfig.canDeleteComments || (data.asc_getUserId() == _userId);
 
                     replies = _.clone(comment.replys);
 
@@ -1640,7 +1650,8 @@ define([
                             reply               : data.asc_getReply(i).asc_getText(),
                             time                : dateReply.getTime(),
                             userInitials        : me.getInitials(username),
-                            editable            : me.appConfig.canEditComments || (data.asc_getUserId() == _userId)
+                            editable            : me.appConfig.canEditComments || (data.asc_getReply(i).asc_getUserId() == _userId),
+                            removable           : me.appConfig.canDeleteComments || (data.asc_getReply(i).asc_getUserId() == _userId)
                         });
                     }
                     comment.replys = replies;