From 0cec65caae7c1286e5d4249ab36ab9d9dbc136e7 Mon Sep 17 00:00:00 2001 From: Maxim Kadushkin Date: Sat, 17 Apr 2021 16:10:35 +0300 Subject: [PATCH] [themes] added new theme --- apps/common/main/lib/controller/Themes.js | 2 + apps/common/main/resources/less/buttons.less | 2 + .../resources/less/colors-table-classic.less | 121 ++++++++++++++++++ .../main/app/view/FileMenuPanels.js | 1 + .../main/resources/less/app.less | 1 + 5 files changed, 127 insertions(+) create mode 100644 apps/common/main/resources/less/colors-table-classic.less diff --git a/apps/common/main/lib/controller/Themes.js b/apps/common/main/lib/controller/Themes.js index e17a7eee7..7a70c233e 100644 --- a/apps/common/main/lib/controller/Themes.js +++ b/apps/common/main/lib/controller/Themes.js @@ -15,6 +15,7 @@ define([ var themes_map = { 'theme-light': 'light', + 'theme-classic-light': 'light', 'theme-dark': 'dark' } @@ -128,6 +129,7 @@ define([ return { THEME_LIGHT_ID: 'theme-light', + THEME_CLASSIC_LIGHT_ID: 'theme-classic-light', THEME_DARK_ID: 'theme-dark', init: function (api) { diff --git a/apps/common/main/resources/less/buttons.less b/apps/common/main/resources/less/buttons.less index 1ae6fecb2..6c8db3dad 100644 --- a/apps/common/main/resources/less/buttons.less +++ b/apps/common/main/resources/less/buttons.less @@ -77,6 +77,8 @@ &.active:not(.disabled){ .caret { transform: rotate(45deg); + border-color: @icon-normal-pressed-ie; + border-color: @icon-normal-pressed; } } diff --git a/apps/common/main/resources/less/colors-table-classic.less b/apps/common/main/resources/less/colors-table-classic.less new file mode 100644 index 000000000..53b8097b1 --- /dev/null +++ b/apps/common/main/resources/less/colors-table-classic.less @@ -0,0 +1,121 @@ + +:root { + .theme-classic-light { + --toolbar-header-document: #446995; + --toolbar-header-spreadsheet: #40865c; + --toolbar-header-presentation: #aa5252; + + --background-normal: #fff; + --background-toolbar: #f1f1f1; + --background-toolbar-additional: #f1f1f1; + --background-primary-dialog-button: #7d858c; + --background-tab-underline: #444; + --background-notification-popover: #fcfed7; + --background-notification-badge: #ffd112; + --background-scrim: fade(#000, 20%); + --background-loader: fade(#000, 65%); + + --highlight-button-hover: #d8dadc; + --highlight-button-pressed: #7d858c; + --highlight-button-pressed-hover: #7d858c; + --highlight-primary-dialog-button-hover: #666d73; + --highlight-header-button-hover: fade(#fff, 20%); + --highlight-header-button-pressed: fade(#000, 20%); + --highlight-toolbar-tab-underline: #444; + --highlight-text-select: #3494fb; + + --border-toolbar: #cbcbcb; + --border-divider: #cbcbcb; + --border-regular-control: #cfcfcf; + --border-toolbar-button-hover: #d8dadc; + --border-preview-hover: #cfcfcf; + --border-preview-select: #848484; + --border-control-focus: #848484; + --border-color-shading: fade(#000, 20%); + --border-error: #d9534f; + + --text-normal: #444; + --text-normal-pressed: #444; + --text-secondary: #a5a5a5; + --text-tertiary: #a5a5a5; + --text-link: #acbfff; + --text-inverse: #333; + --text-toolbar-header: fade(#fff, 80%); + --text-contrast-background: #fff; + + --icon-normal: #444; + --icon-normal-pressed: #fff; + --icon-inverse: #444; + --icon-toolbar-header: fade(#fff, 80%); + --icon-notification-badge: #000; + --icon-contrast-popover: #fff; + --icon-success: #5b9f27; + + // 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: 0; + --button-small-active-icon-offset-x: -20px; + --button-large-normal-icon-offset-x: 0; + --button-large-active-icon-offset-x: -31px; + --button-huge-normal-icon-offset-x: 0; + --button-huge-active-icon-offset-x: -40px; + --button-xhuge-normal-icon-offset-x: 0; + --button-xhuge-active-icon-offset-x: -28px; + //--button-xhuge-normal-icon-offset-x: -37px; + //--button-xhuge-active-icon-offset-x: -37px; + + --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%); + + --component-normal-icon-opacity: .8; + --component-hover-icon-opacity: .8; + --component-active-icon-opacity: .8; + --component-active-hover-icon-opacity: .8; + --component-disabled-opacity: .3; + + --menu-icon-item-checked-offset-x: -20px; + } +} diff --git a/apps/documenteditor/main/app/view/FileMenuPanels.js b/apps/documenteditor/main/app/view/FileMenuPanels.js index ddd30ccbf..2ac8862ba 100644 --- a/apps/documenteditor/main/app/view/FileMenuPanels.js +++ b/apps/documenteditor/main/app/view/FileMenuPanels.js @@ -466,6 +466,7 @@ define([ cls : 'input-group-nr', data : [ { value: Common.UI.Themes.THEME_LIGHT_ID, displayValue: this.txtThemeLight }, + { value: Common.UI.Themes.THEME_CLASSIC_LIGHT_ID, displayValue: "Classic light" }, { value: Common.UI.Themes.THEME_DARK_ID, displayValue: this.txtThemeDark } ] }); diff --git a/apps/documenteditor/main/resources/less/app.less b/apps/documenteditor/main/resources/less/app.less index 07982a8c8..7e9bf70d3 100644 --- a/apps/documenteditor/main/resources/less/app.less +++ b/apps/documenteditor/main/resources/less/app.less @@ -10,6 +10,7 @@ // Bootstrap overwrite @import "../../../../common/main/resources/less/variables.less"; @import "../../../../common/main/resources/less/colors-table.less"; +@import "../../../../common/main/resources/less/colors-table-classic.less"; @import "../../../../common/main/resources/less/colors-table-dark.less"; //