diff --git a/apps/common/main/lib/controller/Themes.js b/apps/common/main/lib/controller/Themes.js index 0986d3bb7..0a5bc48e7 100644 --- a/apps/common/main/lib/controller/Themes.js +++ b/apps/common/main/lib/controller/Themes.js @@ -61,6 +61,9 @@ define([ "text-secondary", "text-tertiary", "text-link", + "text-link-hover", + "text-link-active", + "text-link-visited", "text-inverse", "text-toolbar-header", "text-contrast-background", @@ -206,7 +209,7 @@ define([ }) this.api = api; - var theme_name = Common.localStorage.getItem('ui-theme', id_default_light_theme); + var theme_name = Common.localStorage.getItem('ui-theme') || id_default_light_theme; if ( !$('body').hasClass(theme_name) ) { $('body').addClass(theme_name); diff --git a/apps/common/main/resources/less/colors-table-classic.less b/apps/common/main/resources/less/colors-table-classic.less index c92beb202..fcc28aefd 100644 --- a/apps/common/main/resources/less/colors-table-classic.less +++ b/apps/common/main/resources/less/colors-table-classic.less @@ -39,6 +39,9 @@ --text-secondary: #a5a5a5; --text-tertiary: #a5a5a5; --text-link: #acbfff; + --text-link-hover: #acbfff; + --text-link-active: #acbfff; + --text-link-visited: #acbfff; --text-inverse: #fff; --text-toolbar-header: #fff; --text-contrast-background: #fff; @@ -54,7 +57,7 @@ // Canvas colors --canvas-background: #e2e2e2; --canvas-content-background: #fff; - --canvas-page-border: #555; + --canvas-page-border: #ccc; --canvas-ruler-background: #555; --canvas-ruler-margins-background: #444; @@ -116,6 +119,11 @@ --component-active-hover-icon-opacity: .8; --component-disabled-opacity: .3; + --header-component-normal-icon-opacity: 1; + --header-component-hover-icon-opacity: 1; + --header-component-active-icon-opacity: 1; + --header-component-active-hover-icon-opacity: 1; + --menu-icon-item-checked-offset-x: -20px; } } diff --git a/apps/common/main/resources/less/colors-table-dark.less b/apps/common/main/resources/less/colors-table-dark.less index 28c206b53..8707a7755 100644 --- a/apps/common/main/resources/less/colors-table-dark.less +++ b/apps/common/main/resources/less/colors-table-dark.less @@ -39,6 +39,9 @@ --text-secondary: fade(#fff, 60%); --text-tertiary: fade(#fff, 40%); --text-link: #b5e4ff; + --text-link-hover: #b5e4ff; + --text-link-active: #b5e4ff; + --text-link-visited: #b5e4ff; --text-inverse: #333; --text-toolbar-header: fade(#fff, 80%); --text-contrast-background: #fff; @@ -116,6 +119,11 @@ --component-active-hover-icon-opacity: 1; --component-disabled-opacity: .3; + --header-component-normal-icon-opacity: .8; + --header-component-hover-icon-opacity: .8; + --header-component-active-icon-opacity: 1; + --header-component-active-hover-icon-opacity: 1; + --menu-icon-item-checked-offset-x: -20px; } } diff --git a/apps/common/main/resources/less/colors-table-ie-fix.less b/apps/common/main/resources/less/colors-table-ie-fix.less index 0dd726c2e..eaf133158 100644 --- a/apps/common/main/resources/less/colors-table-ie-fix.less +++ b/apps/common/main/resources/less/colors-table-ie-fix.less @@ -4,50 +4,50 @@ @toolbar-header-presentation-ie: #aa5252; @background-normal-ie: #fff; -@background-toolbar-ie: #f7f7f7; -@background-toolbar-additional-ie: #efefef; -@background-primary-dialog-button-ie: #444; +@background-toolbar-ie: #f1f1f1; +@background-toolbar-additional-ie: #f1f1f1; +@background-primary-dialog-button-ie: #7d858c; @background-tab-underline-ie: #444; @background-notification-popover-ie: #fcfed7; @background-notification-badge-ie: #ffd112; @background-scrim-ie: fade(#000, 20%); -@background-loader-ie: fade(#181818, 90%); +@background-loader-ie: fade(#000, 65%); -@highlight-button-hover-ie: #e0e0e0; -@highlight-button-pressed-ie: #ccc; -@highlight-button-pressed-hover-ie: #bababa; -@highlight-primary-dialog-button-hover-ie: #2b2b2b; +@highlight-button-hover-ie: #d8dadc; +@highlight-button-pressed-ie: #7d858c; +@highlight-button-pressed-hover-ie: #7d858c; +@highlight-primary-dialog-button-hover-ie: #666d73; @highlight-header-button-hover-ie: fade(#fff, 20%); -@highlight-header-button-pressed-ie: fade(#fff, 25%); +@highlight-header-button-pressed-ie: fade(#000, 20%); @highlight-toolbar-tab-underline-ie: #444; @highlight-text-select-ie: #3494fb; @border-toolbar-ie: #cbcbcb; -@border-divider-ie: #dfdfdf; -@border-regular-control-ie: #c0c0c0; -@border-toolbar-button-hover-ie: #e0e0e0; +@border-divider-ie: #cbcbcb; +@border-regular-control-ie: #cfcfcf; +@border-toolbar-button-hover-ie: #d8dadc; @border-preview-hover-ie: #cfcfcf; -@border-preview-select-ie: #aaa; +@border-preview-select-ie: #848484; @border-control-focus-ie: #848484; -@border-color-shading-ie: fade(#000, 10%); -@border-error-ie: #f62211; +@border-color-shading-ie: fade(#000, 20%); +@border-error-ie: #d9534f; -@text-normal-ie: fade(#000, 80%); -@text-normal-pressed-ie: fade(#000, 80%); -@text-secondary-ie: fade(#000, 60%); -@text-tertiary-ie: fade(#000, 40%); -@text-link-ie: #445799; +@text-normal-ie: #444; +@text-normal-pressed-ie: #fff; +@text-secondary-ie: #a5a5a5; +@text-tertiary-ie: #a5a5a5; +@text-link-ie: #acbfff; @text-inverse-ie: #fff; @text-toolbar-header-ie: #fff; @text-contrast-background-ie: #fff; @icon-normal-ie: #444; -@icon-normal-pressed-ie: #444; -@icon-inverse-ie: #fff; -@icon-toolbar-header-ie: #fff; +@icon-normal-pressed-ie: #fff; +@icon-inverse-ie: #444; +@icon-toolbar-header-ie: fade(#fff, 80%); @icon-notification-badge-ie: #000; @icon-contrast-popover-ie: #fff; -@icon-success-ie: #090; +@icon-success-ie: #5b9f27; @button-header-normal-icon-offset-x-ie: -20px; @button-header-active-icon-offset-x-ie: -20px; diff --git a/apps/common/main/resources/less/colors-table.less b/apps/common/main/resources/less/colors-table.less index 7fc2a1a22..799715513 100644 --- a/apps/common/main/resources/less/colors-table.less +++ b/apps/common/main/resources/less/colors-table.less @@ -49,6 +49,9 @@ --text-secondary: fade(#000, 60%); --text-tertiary: fade(#000, 40%); --text-link: #445799; + --text-link-hover: #445799; + --text-link-active: #445799; + --text-link-visited: #445799; --text-inverse: #fff; --text-toolbar-header: #fff; --text-contrast-background: #fff; @@ -127,6 +130,11 @@ --component-active-icon-opacity: 1; --component-active-hover-icon-opacity: 1; --component-disabled-opacity: .4; + + --header-component-normal-icon-opacity: 1; + --header-component-hover-icon-opacity: 1; + --header-component-active-icon-opacity: 1; + --header-component-active-hover-icon-opacity: 1; //--button-icon-opacity: 1; } @@ -172,6 +180,9 @@ @text-secondary: var(--text-secondary); @text-tertiary: var(--text-tertiary); @text-link: var(--text-link); +@text-link-hover: var(--text-link-hover); +@text-link-active: var(--text-link-active); +@text-link-visited: var(--text-link-visited); @text-inverse: var(--text-inverse); @text-toolbar-header: var(--text-toolbar-header); @text-contrast-background: var(--text-contrast-background); @@ -207,6 +218,11 @@ @component-disabled-opacity: var(--component-disabled-opacity, .4); //@button-icon-opacity: var(--button-icon-opacity, 1); +@header-component-normal-icon-opacity: var(--header-component-normal-icon-opacity, 1); +@header-component-hover-icon-opacity: var(--header-component-hover-icon-opacity, 1); +@header-component-active-icon-opacity: var(--header-component-active-icon-opacity, 1); +@header-component-active-hover-icon-opacity: var(--header-component-active-hover-icon-opacity, 1); + @menu-icon-item-checked-offset-x: var(--menu-icon-item-checked-offset-x, 0); // Canvas diff --git a/apps/common/main/resources/less/combo-border-size.less b/apps/common/main/resources/less/combo-border-size.less index 1668f92e3..5e24b4805 100644 --- a/apps/common/main/resources/less/combo-border-size.less +++ b/apps/common/main/resources/less/combo-border-size.less @@ -3,6 +3,13 @@ cursor: pointer; } + &.input-group-nr { + .form-control:not(input) { + padding-top: 0; + padding-bottom: 0; + } + } + li { a { white-space: normal; @@ -28,7 +35,7 @@ height: 100%; display: inline-block; background-color: transparent; - margin: -1px 0 0 -3px; + margin: 0 0 0 -3px; } img, .image { diff --git a/apps/common/main/resources/less/header.less b/apps/common/main/resources/less/header.less index 82a03b18e..9bed1c0f7 100644 --- a/apps/common/main/resources/less/header.less +++ b/apps/common/main/resources/less/header.less @@ -327,13 +327,24 @@ } .btn& { + &:not(:disabled) .icon { + opacity: @header-component-normal-icon-opacity; + } + &:active, &.active { .icon.toolbar__icon { &.icon--inverse { background-position-x: @button-header-active-icon-offset-x-ie; + opacity: @header-component-active-icon-opacity; } } } + + &:hover:not(:disabled) { + .icon { + opacity: @header-component-hover-icon-opacity; + } + } } svg.icon { diff --git a/apps/common/main/resources/less/multislider-gradient.less b/apps/common/main/resources/less/multislider-gradient.less index c6c7fabf7..ec8b0d2ac 100644 --- a/apps/common/main/resources/less/multislider-gradient.less +++ b/apps/common/main/resources/less/multislider-gradient.less @@ -3,6 +3,8 @@ background-color: transparent; .thumb { + width: 13px; + height: 15px; top: 18px; background: none; diff --git a/apps/common/main/resources/less/synchronize-tip.less b/apps/common/main/resources/less/synchronize-tip.less index 64ebe4bc6..63cad1831 100644 --- a/apps/common/main/resources/less/synchronize-tip.less +++ b/apps/common/main/resources/less/synchronize-tip.less @@ -360,6 +360,16 @@ color: @text-link-ie; color: @text-link; cursor: pointer; + + &:hover:not(:disabled) { + color: @text-link-hover; + border-bottom-color: dotted @text-link-hover; + } + + &:active { + color: @text-link-active; + border-bottom-color: dotted @text-link-hover; + } } .asc-synchronizetip .close { diff --git a/apps/common/main/resources/less/toolbar.less b/apps/common/main/resources/less/toolbar.less index 75befbd5c..62419ab15 100644 --- a/apps/common/main/resources/less/toolbar.less +++ b/apps/common/main/resources/less/toolbar.less @@ -527,6 +527,11 @@ width: 21px; height: 21px; } + + .icon { + width: 22px; + height: 22px; + } } } diff --git a/apps/documenteditor/main/app/view/TableSettings.js b/apps/documenteditor/main/app/view/TableSettings.js index 6661e66e3..9a5928493 100644 --- a/apps/documenteditor/main/app/view/TableSettings.js +++ b/apps/documenteditor/main/app/view/TableSettings.js @@ -469,7 +469,7 @@ define([ this.mnuTableTemplatePicker.selectRecord(rec, true); this.btnTableTemplate.resumeEvents(); - this.$el.find('.icon-template-table').css({'background-image': 'url(' + rec.get("imageUrl") + ')', 'height': '52px', 'width': '72px', 'background-position': 'center', 'background-size': 'cover'}); + this.$el.find('.icon-template-table').css({'background-image': 'url(' + rec.get("imageUrl") + ')', 'height': '52px', 'width': '72px', 'background-position': 'center', 'background-size': 'auto 50px'}); this._state.TemplateId = value; } diff --git a/apps/documenteditor/main/index.html b/apps/documenteditor/main/index.html index 25689a90d..4b44c621a 100644 --- a/apps/documenteditor/main/index.html +++ b/apps/documenteditor/main/index.html @@ -14,12 +14,16 @@ --toolbar-header-document: #2a2a2a; --background-toolbar: #404040; --border-toolbar: #2a2a2a; - --highlight-button-pressed: #606060; + --highlight-button-hover: #e0e0e0; --canvas-background: #666666; /*--canvas-content-background: #fff;*/ --canvas-page-border: #555; } + .theme-classic-light { + --highlight-button-hover: #d8dadc; + } + .loadmask { left: 0; top: 0; @@ -91,7 +95,7 @@ .loadmask > .sktoolbar li { background: #ccc; - background: var(--highlight-button-pressed, #ccc); + background: var(--highlight-button-hover, #ccc); border-radius: 3px; width: 20px; height: 20px; diff --git a/apps/documenteditor/main/index.html.deploy b/apps/documenteditor/main/index.html.deploy index c69e97577..70a90f658 100644 --- a/apps/documenteditor/main/index.html.deploy +++ b/apps/documenteditor/main/index.html.deploy @@ -82,7 +82,7 @@ .loadmask > .sktoolbar li { background: #ccc; - background: var(--highlight-button-pressed, #ccc); + background: var(--highlight-button-hover, #ccc); border-radius: 3px; width: 20px; height: 20px; diff --git a/apps/presentationeditor/main/app/view/TableSettings.js b/apps/presentationeditor/main/app/view/TableSettings.js index 72d1b50b4..b2b167674 100644 --- a/apps/presentationeditor/main/app/view/TableSettings.js +++ b/apps/presentationeditor/main/app/view/TableSettings.js @@ -437,7 +437,7 @@ define([ this.mnuTableTemplatePicker.selectRecord(rec, true); this.btnTableTemplate.resumeEvents(); - this.$el.find('.icon-template-table').css({'background-image': 'url(' + rec.get("imageUrl") + ')', 'height': '52px', 'width': '72px', 'background-position': 'center', 'background-size': 'cover'}); + this.$el.find('.icon-template-table').css({'background-image': 'url(' + rec.get("imageUrl") + ')', 'height': '52px', 'width': '72px', 'background-position': 'center', 'background-size': 'auto 50px'}); this._state.TemplateId = value; } diff --git a/apps/presentationeditor/main/index.html b/apps/presentationeditor/main/index.html index 9847f2341..cd541ff81 100644 --- a/apps/presentationeditor/main/index.html +++ b/apps/presentationeditor/main/index.html @@ -13,12 +13,16 @@ --toolbar-header-presentation: #2a2a2a; --background-toolbar: #404040; --border-toolbar: #2a2a2a; - --highlight-button-pressed: #606060; + --highlight-button-hover: #606060; --canvas-background: #666666; /*--canvas-content-background: #fff;*/ --canvas-page-border: #555; } + .theme-classic-light { + --highlight-button-hover: #d8dadc; + } + .loadmask { left: 0; top: 0; @@ -90,7 +94,7 @@ .loadmask > .sktoolbar li { background: #ccc; - background: var(--highlight-button-pressed, #ccc); + background: var(--highlight-button-hover, #ccc); border-radius: 3px; width: 20px; height: 20px; diff --git a/apps/presentationeditor/main/index.html.deploy b/apps/presentationeditor/main/index.html.deploy index b4e367fa3..b3daac5dc 100644 --- a/apps/presentationeditor/main/index.html.deploy +++ b/apps/presentationeditor/main/index.html.deploy @@ -82,7 +82,7 @@ .loadmask > .sktoolbar li { background: #ccc; - background: var(--highlight-button-pressed, #ccc); + background: var(--highlight-button-hover, #ccc); border-radius: 3px; width: 20px; height: 20px; diff --git a/apps/spreadsheeteditor/main/app/view/TableSettings.js b/apps/spreadsheeteditor/main/app/view/TableSettings.js index 12cae8351..53f4e456f 100644 --- a/apps/spreadsheeteditor/main/app/view/TableSettings.js +++ b/apps/spreadsheeteditor/main/app/view/TableSettings.js @@ -452,7 +452,7 @@ define([ this.mnuTableTemplatePicker.selectRecord(rec, true); this.btnTableTemplate.resumeEvents(); - this.$el.find('.icon-template-table').css({'background-image': 'url(' + rec.get("imageUrl") + ')', 'height': '48px', 'width': '63px', 'background-position': 'center', 'background-size': 'cover'}); + this.$el.find('.icon-template-table').css({'background-image': 'url(' + rec.get("imageUrl") + ')', 'height': '48px', 'width': '63px', 'background-position': 'center', 'background-size': 'auto 50px'}); this._state.TemplateName=value; } diff --git a/apps/spreadsheeteditor/main/index.html b/apps/spreadsheeteditor/main/index.html index b1f98863c..69de345aa 100644 --- a/apps/spreadsheeteditor/main/index.html +++ b/apps/spreadsheeteditor/main/index.html @@ -13,12 +13,16 @@ --background-toolbar: #404040; --background-normal: #333; --border-toolbar: #2a2a2a; - --highlight-button-pressed: #606060; + --highlight-button-hover: #606060; --canvas-background: #666666; /*--canvas-content-background: #fff;*/ --canvas-page-border: #555; } + .theme-classic-light { + --highlight-button-hover: #d8dadc; + } + .loadmask { left: 0; top: 0; diff --git a/apps/spreadsheeteditor/main/index.html.deploy b/apps/spreadsheeteditor/main/index.html.deploy index c0b600f56..09545445e 100644 --- a/apps/spreadsheeteditor/main/index.html.deploy +++ b/apps/spreadsheeteditor/main/index.html.deploy @@ -79,7 +79,7 @@ .loadmask > .sktoolbar li { background: #ccc; - background: var(--highlight-button-pressed, #ccc); + background: var(--highlight-button-hover, #ccc); border-radius: 3px; width: 20px; height: 20px;