Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Changed color tables.

Browse source 
Changed some colors, and added dark-contrast color theme
This commit is contained in:
Kirill Volkov 2022-07-12 16:41:25 +03:00
parent 98a418f7e3
commit 18a49b3479
4 changed files with 150 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
apps/common/main/resources/less/colors-table-classic.less
View file

@ -71,6 +71,7 @@
--canvas-page-border: #bbbec2;
--canvas-ruler-background: #fff;
--canvas-ruler-border: #cbcbcb;
--canvas-ruler-margins-background: #d6d6d6;
--canvas-ruler-mark: #585b5e;
--canvas-ruler-handle-border: #555;
@ -138,3 +139,4 @@
--menu-icon-item-checked-offset-x: -20px;
}
}

142
apps/common/main/resources/less/colors-table-dark-contrast.less Normal file
View file

@ -0,0 +1,142 @@
:root {
.theme-dark-contrast {
--toolbar-header-document: #1e1e1e;
--toolbar-header-spreadsheet: #1e1e1e;
--toolbar-header-presentation: #1e1e1e;
--text-toolbar-header-on-background-document: #2a2a2a;
--text-toolbar-header-on-background-spreadsheet: #2a2a2a;
--text-toolbar-header-on-background-presentation: #2a2a2a;
--background-normal: #212121;
--background-toolbar: #2a2a2a;
--background-toolbar-additional: #2a2a2a;
--background-primary-dialog-button: #E6E6E6;
--background-accent-button: #4d76a8;
--background-tab-underline: #717171;
--background-notification-popover: #5f5d81;
--background-notification-badge: #7792fd;
--background-scrim: fade(black, 60%);
--background-loader: fade(#121212, 95%);
--background-alt-key-hint: #FFD938;
--background-contrast-popover: #121212;
--highlight-button-hover: #424242;
--highlight-button-pressed: #666666;
--highlight-button-pressed-hover: #828282;
--highlight-primary-dialog-button-hover: #a6a6a6;
--highlight-accent-button-hover: #75a2d6;
--highlight-accent-button-pressed: #89afdc;
--highlight-header-button-hover: #424242;
--highlight-header-button-pressed: #828282;
--highlight-toolbar-tab-underline: #d0d0d0;
--highlight-text-select: #96c8fd;
--border-toolbar: #616161;
--border-divider: #414141;
--border-regular-control: #696969;
--border-toolbar-button-hover: #616161;
--border-preview-hover: #828282;
--border-preview-select: #888;
--border-control-focus: #b8b8b8;
--border-color-shading: fade(#fff, 15%);
--border-error: #f62211;
--border-contrast-popover: #616161;
--text-normal: #e8e8e8;
--text-normal-pressed: #e8e8e8;
--text-secondary: #b8b8b8;
--text-tertiary: #888888;
--text-link: #ffd78c;
--text-link-hover: #ffd78c;
--text-link-active: #ffd78c;
--text-link-visited: #ffd78c;
--text-inverse: #121212;
--text-toolbar-header: #e8e8e8;
--text-contrast-background: #fff;
--text-alt-key-hint: #121212;
--icon-normal: #e8e8e8;
--icon-normal-pressed: #e8e8e8;
--icon-inverse: #2a2a2a;
--icon-toolbar-header: #d0d0d0;
--icon-notification-badge: #121212;
--icon-contrast-popover: #fff;
--icon-success: #090;
// Canvas
--canvas-background: #121212;
--canvas-content-background: #fff;
--canvas-page-border: #5f5f5f;
--canvas-ruler-background: #414141;
--canvas-ruler-border: #616161;
--canvas-ruler-margins-background: #1e1e1e;
--canvas-ruler-mark: #d0d0d0;
--canvas-ruler-handle-border: #b8b8b8;
--canvas-ruler-handle-border-disabled: #717171;
--canvas-high-contrast: #c3c3c3;
--canvas-high-contrast-disabled: #7d7d7d;
--canvas-cell-border: #656565;
--canvas-cell-title-border: #616161;
--canvas-cell-title-border-hover: #a0a0a0;
--canvas-cell-title-border-selected: #888888;
--canvas-cell-title-hover: #303030;
--canvas-cell-title-selected: #3d3d3d;
--canvas-dark-cell-title: #1e1e1e;
--canvas-dark-cell-title-hover: #828282;
--canvas-dark-cell-title-selected: #414141;
--canvas-dark-cell-title-border: #717171;
--canvas-dark-cell-title-border-hover: #a0a0a0;
--canvas-dark-cell-title-border-selected: #b8b8b8;
--canvas-scroll-thumb: #2a2a2a;
--canvas-scroll-thumb-hover: #424242;
--canvas-scroll-thumb-pressed: #4d4d4d;
--canvas-scroll-thumb-border: #616161;
--canvas-scroll-thumb-border-hover: #616161;
--canvas-scroll-thumb-border-pressed: #616161;
--canvas-scroll-arrow: #7d7d7d;
--canvas-scroll-arrow-hover: #8c8c8c;
--canvas-scroll-arrow-pressed: #999999;
--canvas-scroll-thumb-target: #717171;
--canvas-scroll-thumb-target-hover: #8c8c8c;
--canvas-scroll-thumb-target-pressed: #999999;
// 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: -40px;
--button-huge-active-icon-offset-x: -40px;
--button-xhuge-normal-icon-offset-x: -28px;
--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: 1;
--component-active-hover-icon-opacity: 1;
--component-disabled-opacity: .4;
--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;
}
}

7
apps/common/main/resources/less/colors-table-dark.less
View file

@ -33,7 +33,7 @@
--highlight-toolbar-tab-underline: #ddd;
--highlight-text-select: #96c8fd;
--border-toolbar: #2a2a2a;
--border-toolbar: #616161;
--border-divider: #505050;
--border-regular-control: #666;
--border-toolbar-button-hover: #5a5a5a;
@ -60,7 +60,7 @@
--icon-normal: fade(#fff, 80%);
--icon-normal-pressed: fade(#fff, 80%);
--icon-inverse: #444;
--icon-toolbar-header: #fff;
--icon-toolbar-header: fade(#fff, 80%);
--icon-notification-badge: #000;
--icon-contrast-popover: #fff;
--icon-success: #090;
@ -72,6 +72,7 @@
--canvas-page-border: #555;
--canvas-ruler-background: #555;
--canvas-ruler-border: #2A2A2A;
--canvas-ruler-margins-background: #444;
--canvas-ruler-mark: #b6b6b6;
--canvas-ruler-handle-border: #b6b6b6;
@ -129,7 +130,7 @@
--component-hover-icon-opacity: .8;
--component-active-icon-opacity: 1;
--component-active-hover-icon-opacity: 1;
--component-disabled-opacity: .4;
--component-disabled-opacity: .6;
--header-component-normal-icon-opacity: .8;
--header-component-hover-icon-opacity: .8;

2
apps/common/main/resources/less/colors-table.less
View file

@ -83,6 +83,7 @@
--canvas-page-border: #ccc;
--canvas-ruler-background: #fff;
--canvas-ruler-border: #cbcbcb;
--canvas-ruler-margins-background: #d9d9d9;
--canvas-ruler-mark: #555;
--canvas-ruler-handle-border: #555;
@ -256,3 +257,4 @@
@canvas-page-border: var(--canvas-page-border);
@canvas-scroll-thumb-hover: var(--canvas-scroll-thumb-hover);
@canvas-scroll-thumb-border-hover: var(--canvas-scroll-thumb-border-hover);