[themes] added new theme

This commit is contained in:
Maxim Kadushkin 2021-04-17 16:10:35 +03:00
parent 4d5880486d
commit 0cec65caae
5 changed files with 127 additions and 0 deletions

View file

@ -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) {

View file

@ -77,6 +77,8 @@
&.active:not(.disabled){
.caret {
transform: rotate(45deg);
border-color: @icon-normal-pressed-ie;
border-color: @icon-normal-pressed;
}
}

View file

@ -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;
}
}

View file

@ -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 }
]
});

View file

@ -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";
//