From c3744fb1730853ccbbd427a39e43ce581c0e7a9b Mon Sep 17 00:00:00 2001 From: Maxim Kadushkin Date: Wed, 30 Dec 2020 13:37:44 +0300 Subject: [PATCH] [stylesheets] repaired some components according to colors table --- apps/common/main/lib/component/Window.js | 12 +- .../main/resources/img/toolbar/charttypes.svg | 160 +++++++++--------- apps/common/main/resources/less/buttons.less | 4 +- .../resources/less/colors-table-dark.less | 5 + .../main/resources/less/colors-table.less | 6 + apps/common/main/resources/less/combobox.less | 22 ++- apps/common/main/resources/less/history.less | 2 +- apps/common/main/resources/less/listview.less | 2 +- apps/common/main/resources/less/window.less | 30 +++- .../main/resources/less/filemenu.less | 2 +- 10 files changed, 148 insertions(+), 97 deletions(-) diff --git a/apps/common/main/lib/component/Window.js b/apps/common/main/lib/component/Window.js index d54e083fe..f1716178d 100644 --- a/apps/common/main/lib/component/Window.js +++ b/apps/common/main/lib/component/Window.js @@ -166,7 +166,7 @@ define([ '
' + '
' + '<% if (closable!==false) %>' + - '
' + + '
' + '<% %>' + '<% if (help===true) %>' + '
?
' + @@ -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); } diff --git a/apps/common/main/resources/img/toolbar/charttypes.svg b/apps/common/main/resources/img/toolbar/charttypes.svg index 3f3289bb2..478e972c5 100644 --- a/apps/common/main/resources/img/toolbar/charttypes.svg +++ b/apps/common/main/resources/img/toolbar/charttypes.svg @@ -1,116 +1,116 @@ \ No newline at end of file diff --git a/apps/common/main/resources/less/buttons.less b/apps/common/main/resources/less/buttons.less index 56e2a683f..dbdcddec9 100644 --- a/apps/common/main/resources/less/buttons.less +++ b/apps/common/main/resources/less/buttons.less @@ -392,7 +392,7 @@ &:active:not(.disabled), &.active:not(.disabled) { background-color: @highlight-button-pressed; - //color: #fff; btn-category has no text + color: @text-normal-pressed; } .icon { @@ -657,7 +657,7 @@ &.active:not(.disabled) { background-color: @highlight-button-pressed !important; border-color: @highlight-button-pressed; - color: white; + color: @text-normal-pressed; } &[disabled], diff --git a/apps/common/main/resources/less/colors-table-dark.less b/apps/common/main/resources/less/colors-table-dark.less index ccdd64f4a..ff0974774 100644 --- a/apps/common/main/resources/less/colors-table-dark.less +++ b/apps/common/main/resources/less/colors-table-dark.less @@ -33,6 +33,7 @@ --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; @@ -66,5 +67,9 @@ --button-small-active-icon-offset-x: -20px; --button-big-normal-icon-offset-x: -28px; --button-big-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); } } diff --git a/apps/common/main/resources/less/colors-table.less b/apps/common/main/resources/less/colors-table.less index b4ed5365c..fe3f74d05 100644 --- a/apps/common/main/resources/less/colors-table.less +++ b/apps/common/main/resources/less/colors-table.less @@ -42,6 +42,7 @@ --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; @@ -77,6 +78,10 @@ //--button-big-active-icon-offset-x: 0; --button-header-normal-icon-offset-x: -20px; --button-header-active-icon-offset-x: -20px; + + --modal-window-mask-opacity: 0.2; + --image-border-types-filter: none; + --image-border-types-filter-selected: none; } // Background @@ -115,6 +120,7 @@ // 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); diff --git a/apps/common/main/resources/less/combobox.less b/apps/common/main/resources/less/combobox.less index fa5bf6696..fa4980d9a 100644 --- a/apps/common/main/resources/less/combobox.less +++ b/apps/common/main/resources/less/combobox.less @@ -78,7 +78,7 @@ background-color: @highlight-button-pressed; a { - color: @dropdown-link-active-color; + color: @text-normal-pressed; &:hover, &.hover, @@ -93,14 +93,26 @@ // Font combobox // ------------------------ li { + @img-borders-filter: var(--image-border-types-filter); + @img-borders-filter-selected: var(--image-border-types-filter-selected); + + 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; } } diff --git a/apps/common/main/resources/less/history.less b/apps/common/main/resources/less/history.less index e144e055c..b22df313b 100644 --- a/apps/common/main/resources/less/history.less +++ b/apps/common/main/resources/less/history.less @@ -72,7 +72,7 @@ .user-name, .user-date { - color: @text-inverse; + color: @text-normal-pressed; } .revision-expand { diff --git a/apps/common/main/resources/less/listview.less b/apps/common/main/resources/less/listview.less index 9f053048b..d67a1dcaa 100644 --- a/apps/common/main/resources/less/listview.less +++ b/apps/common/main/resources/less/listview.less @@ -49,7 +49,7 @@ &.selected { background-color: @highlight-button-pressed; - color: @text-inverse; + color: @text-normal-pressed; border-color: @highlight-button-pressed; border-style: solid; border-width: 1px 0; diff --git a/apps/common/main/resources/less/window.less b/apps/common/main/resources/less/window.less index 5f9bdbef8..a58e7bcc7 100644 --- a/apps/common/main/resources/less/window.less +++ b/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 { @@ -74,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: rotate(180deg); + opacity: 1; } &.disabled { - background-position: @but-close-offset-x @but-close-offset-y - 32px; cursor: default; } + + &:before, &:after { + content: ' '; + position: absolute; + left: 7px; + top: 1px; + height: 14px; + width: 1px; + background-color: @icon-normal; + } + + &:before { + transform: rotate(45deg); + } + + &:after { + transform: rotate(-45deg); + } } &.help { diff --git a/apps/documenteditor/main/resources/less/filemenu.less b/apps/documenteditor/main/resources/less/filemenu.less index b5d075999..fb4e9c6ac 100644 --- a/apps/documenteditor/main/resources/less/filemenu.less +++ b/apps/documenteditor/main/resources/less/filemenu.less @@ -27,7 +27,7 @@ background-color: @highlight-button-pressed; > a { - color: @text-inverse; + color: @text-normal-pressed; } }