From 86273f49597b1657ac5b188865930c454369c664 Mon Sep 17 00:00:00 2001 From: Maxim Kadushkin Date: Thu, 17 Dec 2020 11:16:45 +0300 Subject: [PATCH] [stylesheets] change colors to variables --- apps/common/main/resources/less/about.less | 12 +-- apps/common/main/resources/less/buttons.less | 80 +++++++++---------- apps/common/main/resources/less/chat.less | 12 +-- apps/common/main/resources/less/checkbox.less | 10 +-- .../main/resources/less/colorpalette.less | 12 +-- .../main/resources/less/colors-table.less | 45 ++++++++++- .../resources/less/combo-border-size.less | 2 +- .../main/resources/less/combo-dataview.less | 16 ++-- apps/common/main/resources/less/combobox.less | 10 +-- apps/common/main/resources/less/comments.less | 34 ++++---- apps/common/main/resources/less/common.less | 4 +- apps/common/main/resources/less/dataview.less | 10 +-- .../main/resources/less/dropdown-menu.less | 2 +- .../resources/less/extended-color-picker.less | 2 +- apps/common/main/resources/less/header.less | 20 ++--- apps/common/main/resources/less/history.less | 30 +++---- .../main/resources/less/hsb-colorpicker.less | 12 +-- apps/common/main/resources/less/input.less | 10 +-- .../main/resources/less/language-dialog.less | 2 +- apps/common/main/resources/less/layout.less | 10 +-- apps/common/main/resources/less/listview.less | 20 ++--- apps/common/main/resources/less/loadmask.less | 4 +- .../main/resources/less/masked-field.less | 4 +- .../resources/less/multislider-gradient.less | 26 +++--- .../main/resources/less/opendialog.less | 4 +- apps/common/main/resources/less/plugins.less | 8 +- apps/common/main/resources/less/radiobox.less | 6 +- apps/common/main/resources/less/scroller.less | 24 +++--- .../common/main/resources/less/separator.less | 4 +- apps/common/main/resources/less/spinner.less | 2 +- apps/common/main/resources/less/switcher.less | 12 +-- .../main/resources/less/symboltable.less | 12 +-- .../main/resources/less/synchronize-tip.less | 8 +- apps/common/main/resources/less/tabbar.less | 14 ++-- .../resources/less/theme-colorpalette.less | 14 ++-- apps/common/main/resources/less/toolbar.less | 54 ++++++------- apps/common/main/resources/less/tooltip.less | 10 +-- apps/common/main/resources/less/treeview.less | 10 +-- apps/common/main/resources/less/window.less | 18 ++--- .../main/resources/less/filemenu.less | 30 +++---- .../main/resources/less/layout.less | 4 +- .../main/resources/less/leftmenu.less | 6 +- .../main/resources/less/navigation.less | 2 +- .../main/resources/less/rightmenu.less | 10 +-- .../main/resources/less/statusbar.less | 10 +-- .../main/resources/less/toolbar.less | 28 +++---- .../main/resources/less/app.less | 2 +- .../main/resources/less/document-preview.less | 2 +- .../main/resources/less/layout.less | 4 +- .../main/resources/less/leftmenu.less | 28 +++---- .../main/resources/less/rightmenu.less | 10 +-- .../main/resources/less/statusbar.less | 8 +- .../main/resources/less/toolbar.less | 10 +-- .../main/resources/less/celleditor.less | 22 ++--- .../main/resources/less/filterdialog.less | 8 +- .../main/resources/less/layout.less | 8 +- .../main/resources/less/leftmenu.less | 36 ++++----- .../main/resources/less/rightmenu.less | 10 +-- .../main/resources/less/statusbar.less | 38 ++++----- .../main/resources/less/toolbar.less | 8 +- 60 files changed, 458 insertions(+), 415 deletions(-) diff --git a/apps/common/main/resources/less/about.less b/apps/common/main/resources/less/about.less index f45c41727..2f2745fc3 100644 --- a/apps/common/main/resources/less/about.less +++ b/apps/common/main/resources/less/about.less @@ -23,19 +23,19 @@ margin: 0 30px; font: 12px Tahoma; letter-spacing: 1px; - color: @text-normal; + color: var(--text-normal); font-weight: bold; white-space: nowrap; } .asc-about-version { font: 15px Tahoma; - color: @text-tertiary; + color: var(--text-tertiary); } .asc-about-companyname { font: bold 15px Tahoma; - color: @text-normal; + color: var(--text-normal); } label { @@ -43,11 +43,11 @@ &.asc-about-desc-name, &.asc-about-lic { font: 12px Tahoma; - color: @text-normal; + color: var(--text-normal); } &.asc-about-desc-name { - color: @text-normal; + color: var(--text-normal); white-space: pre; } @@ -59,7 +59,7 @@ a { font: 12px Tahoma; - color: @text-normal; + color: var(--text-normal); } .separator.horizontal { diff --git a/apps/common/main/resources/less/buttons.less b/apps/common/main/resources/less/buttons.less index e203323f1..fe6a47453 100644 --- a/apps/common/main/resources/less/buttons.less +++ b/apps/common/main/resources/less/buttons.less @@ -4,7 +4,7 @@ .btn { border-radius: 1px; - color: @text-normal; + color: var(--text-normal); .btnsize(@value) { min-width: @value; @@ -94,7 +94,7 @@ &::after { content: ' '; position: absolute; - border: 1px solid @icon-notification-badge; + border: 1px solid var(--icon-notification-badge); border-left: 0 none; border-right: 0 none; width: 6px; @@ -109,7 +109,7 @@ width: 10px; height: 7px; bottom: 2px; - background-color: @background-notification-badge; + background-color: var(--background-notification-badge); border-radius: 2px; right: 0; } @@ -125,7 +125,7 @@ width: 8px; height: 8px; background-color: transparent; - border: solid 1px @text-normal; + border: solid 1px var(--text-normal); border-bottom: none; border-right: none; } @@ -157,7 +157,7 @@ &.active:not(.disabled) { .caret-up, .caret-down { &::after { - border-color: @background-normal; + border-color: var(--background-normal); } } } @@ -286,7 +286,7 @@ .btn.small; &.bg-white { - background-color: @background-normal; + background-color: var(--background-normal); } &:before, @@ -297,14 +297,14 @@ &:hover:not(.disabled), .over:not(.disabled) { - background-color: @highlight-button-hover; + background-color: var(--highlight-button-hover); } &:active:not(.disabled), &.active:not(.disabled) { - color: @text-normal; - background-color: @highlight-button-pressed; + color: var(--text-normal); + background-color: var(--highlight-button-pressed); } &:not(.icon-top) @@ -377,12 +377,12 @@ &:hover:not(.disabled), .over:not(.disabled) { - background-color: @highlight-button-hover; + background-color: var(--highlight-button-hover); } &:active:not(.disabled), &.active:not(.disabled) { - background-color: @highlight-button-pressed; + background-color: var(--highlight-button-pressed); //color: #fff; btn-category has no text } @@ -432,7 +432,7 @@ &.open { > .btn-toolbar { - //color: @text-normal; + //color: var(--text-normal); // Show no shadow for `.btn-link` since it has no other button styles. &.btn-link { @@ -447,7 +447,7 @@ &.over { > button { - //background-color: @highlight-button-hover; + //background-color: var(--highlight-button-hover); } } @@ -494,7 +494,7 @@ &.over:not(.disabled), &.open { - box-shadow: inset 0 0 0 1px @highlight-button-hover; + box-shadow: inset 0 0 0 1px var(--highlight-button-hover); button:not(.active):not(.btn-text-split-default) { background-color: transparent; @@ -505,13 +505,13 @@ button { &:not(.active) { &:hover { - background-color: @highlight-button-hover; + background-color: var(--highlight-button-hover); } } &:active, &:active:hover { - background-color: @highlight-button-pressed; + background-color: var(--highlight-button-pressed); } } } @@ -519,7 +519,7 @@ &.open { > button:not(.active) { &:last-of-type { - background-color: @highlight-button-pressed; + background-color: var(--highlight-button-pressed); } } @@ -529,7 +529,7 @@ } button.active:not(.disabled) { - background-color: @highlight-button-pressed; + background-color: var(--highlight-button-pressed); } .btn + .btn { @@ -564,7 +564,7 @@ .over, &:active, &.active { - background: @background-normal !important; + background: var(--background-normal) !important; .box-shadow(none) !important; } @@ -598,7 +598,7 @@ background-color: transparent; &.bg-white { - background-color: @background-normal; + background-color: var(--background-normal); } .icon { @@ -612,17 +612,17 @@ background-repeat: no-repeat; } - box-shadow: inset 0 0 0 1px @border-regular-control; + box-shadow: inset 0 0 0 1px var(--border-regular-control); .border-radius(@border-radius-small); &:hover, &.over { - background-color: @highlight-button-hover; + background-color: var(--highlight-button-hover); } &:active, &.active { - background-color: @highlight-button-pressed; + background-color: var(--highlight-button-pressed); } } @@ -641,13 +641,13 @@ &:hover:not(.disabled), .over:not(.disabled) { - background-color: @highlight-button-hover !important; + background-color: var(--highlight-button-hover) !important; } &:active:not(.disabled), &.active:not(.disabled) { - background-color: @highlight-button-pressed !important; - border-color: @highlight-button-pressed; + background-color: var(--highlight-button-pressed) !important; + border-color: var(--highlight-button-pressed); color: white; } @@ -676,12 +676,12 @@ &:hover:not(.disabled), .over:not(.disabled) { - background-color: @highlight-button-hover !important; + background-color: var(--highlight-button-hover) !important; } &:active:not(.disabled), &.active:not(.disabled) { - background-color: @highlight-button-pressed !important; + background-color: var(--highlight-button-pressed) !important; color: white; } @@ -708,13 +708,13 @@ &:hover:not(.disabled), .over:not(.disabled) { - background-color: @highlight-button-hover !important; + background-color: var(--highlight-button-hover) !important; } &:active:not(.disabled), &.active:not(.disabled) { - background-color: @highlight-button-pressed !important; - border-color: @highlight-button-pressed; + background-color: var(--highlight-button-pressed) !important; + border-color: var(--highlight-button-pressed); color: white; } @@ -746,12 +746,12 @@ &:hover:not(.disabled), .over:not(.disabled) { - background-color: @highlight-button-hover !important; + background-color: var(--highlight-button-hover) !important; } &:active:not(.disabled), &.active:not(.disabled) { - background-color: @highlight-button-pressed !important; + background-color: var(--highlight-button-pressed) !important; } &[disabled], @@ -829,22 +829,22 @@ .dlg-btn { font-weight: bold; width: 86px; - color: @text-normal; - background-color: @background-normal; - border: 1px solid @border-regular-control; + color: var(--text-normal); + background-color: var(--background-normal); + border: 1px solid var(--border-regular-control); &:hover:not(.disabled), &.hover:not(.disabled) { - background-color: @highlight-button-hover; + background-color: var(--highlight-button-hover); } &.primary { - color: @text-inverse; - background-color: @background-primary-dialog-button; + color: var(--text-inverse); + background-color: var(--background-primary-dialog-button); &:hover:not(.disabled), &.hover:not(.disabled) { - background-color: @highlight-primary-dialog-button-hover; + background-color: var(--highlight-primary-dialog-button-hover); } } diff --git a/apps/common/main/resources/less/chat.less b/apps/common/main/resources/less/chat.less index 32b030d9d..fcea81bf4 100644 --- a/apps/common/main/resources/less/chat.less +++ b/apps/common/main/resources/less/chat.less @@ -11,7 +11,7 @@ .area { position: absolute; - border-bottom: 1px solid @border-toolbar; + border-bottom: 1px solid var(--border-toolbar); overflow: hidden; } @@ -57,7 +57,7 @@ margin: 0 5px 3px 0; width: 12px; height: 12px; - border: 1px solid @border-toolbar; + border: 1px solid var(--border-toolbar); } .name { @@ -101,7 +101,7 @@ } .user-name { - color: @text-normal; + color: var(--text-normal); font-size: 12px; font-weight: bold; overflow: hidden; @@ -112,7 +112,7 @@ .color { width: 12px; height: 12px; - border: 1px solid @border-toolbar; + border: 1px solid var(--border-toolbar); margin: 0 5px 3px 0; vertical-align: middle; } @@ -143,11 +143,11 @@ height: 100%; resize: none; margin-bottom: 5px; - border: 1px solid @border-toolbar; + border: 1px solid var(--border-toolbar); font-size: 12px; &:focus { - border-color: @border-preview-select; + border-color: var(--border-preview-select); } } } diff --git a/apps/common/main/resources/less/checkbox.less b/apps/common/main/resources/less/checkbox.less index 9d4fc470f..b4da1ab96 100644 --- a/apps/common/main/resources/less/checkbox.less +++ b/apps/common/main/resources/less/checkbox.less @@ -12,8 +12,8 @@ + label { width: 14px; height: 14px; - background: @background-normal; - border: 1px solid @border-regular-control; + background: var(--background-normal); + border: 1px solid var(--border-regular-control); border-radius: 2px; position: absolute; left: 0; @@ -25,7 +25,7 @@ &::before { content: ''; position: absolute; - border: solid @text-normal; + border: solid var(--text-normal); border-width: 0 2px 2px 0; transform: rotate(45deg); width: 5px; @@ -40,8 +40,8 @@ &::before { content: ''; position: absolute; - border: 1px solid @text-normal; - background: @icon-normal; + border: 1px solid var(--text-normal); + background: var(--icon-normal); width: 8px; height: 8px; left: 2px; diff --git a/apps/common/main/resources/less/colorpalette.less b/apps/common/main/resources/less/colorpalette.less index cf58f0272..5c1e5e494 100644 --- a/apps/common/main/resources/less/colorpalette.less +++ b/apps/common/main/resources/less/colorpalette.less @@ -7,7 +7,7 @@ &:hover, &.selected { - .box-shadow(0 0 0 1px @highlight-button-pressed); + .box-shadow(0 0 0 1px var(--highlight-button-pressed)); } } } @@ -26,7 +26,7 @@ padding: 10px; .palette-color-item { padding: 0; - border: 1px solid @background-normal; + border: 1px solid var(--background-normal); display: inline-block; text-decoration: none; -moz-outline: 0 none; @@ -43,21 +43,21 @@ width: 12px; cursor: pointer; display: block; - border: 1px solid @border-color-shading; + border: 1px solid var(--border-color-shading); } } &:hover, &.selected { - border-color: @icon-normal; + border-color: var(--icon-normal); em span { - border-color: @background-normal; + border-color: var(--background-normal); } } } .color-transparent { em span { - border:solid 1px @border-color-shading; + border:solid 1px var(--border-color-shading); } } } \ No newline at end of file diff --git a/apps/common/main/resources/less/colors-table.less b/apps/common/main/resources/less/colors-table.less index ae9c3c437..c2b5264b9 100644 --- a/apps/common/main/resources/less/colors-table.less +++ b/apps/common/main/resources/less/colors-table.less @@ -81,4 +81,47 @@ @canvas-dark-cell-title-hover: #666 ; @canvas-dark-cell-title-selected: #111; @canvas-scroll-controls: #f1f1f1; -@canvas-scroll-controls-hover: #cfcfcf; \ No newline at end of file +@canvas-scroll-controls-hover: #cfcfcf; + +:root { + --background-normal: @background-normal; + --background-toolbar: @background-toolbar; + --background-toolbar-additional: @background-toolbar-additional; + --background-primary-dialog-button: @background-primary-dialog-button; + --background-tab-underline: @background-tab-underline; + --background-scrim: @background-scrim; + --background-loader: @background-loader; + --background-notification-popover: @background-notification-popover; + --background-notification-badge: @background-notification-badge; + + --highlight-button-hover: @highlight-button-hover; + --highlight-button-pressed: @highlight-button-pressed; + --highlight-button-pressed-hover: @highlight-button-pressed-hover; + --highlight-primary-dialog-button-hover: @highlight-primary-dialog-button-hover; + --highlight-header-button-hover: @highlight-header-button-hover; + --highlight-toolbar-tab-underline: @highlight-toolbar-tab-underline; + --highlight-text-select: @highlight-text-select; + + --border-toolbar: @border-toolbar; + --border-divider: @border-divider; + --border-regular-control: @border-regular-control; + --border-toolbar-button-hover: @border-toolbar-button-hover; + --border-preview-select: @border-preview-select; + --border-control-focus: @border-control-focus; + --border-color-shading: @border-color-shading; + --border-error: @border-error; + + --text-normal: @text-normal; + --text-secondary: @text-secondary; + --text-tertiary: @text-tertiary; + --text-inverse: @text-inverse; + --text-toolbar-header: @text-toolbar-header; + --text-contrast-background: @text-contrast-background; + --text-link: @text-link; + + --icon-normal: @icon-normal; + --icon-inverse: @icon-inverse; + --icon-toolbar-header: @icon-toolbar-header; + --icon-contrast-popover: @icon-contrast-popover; + --icon-notification-badge: @icon-notification-badge; +} diff --git a/apps/common/main/resources/less/combo-border-size.less b/apps/common/main/resources/less/combo-border-size.less index 26046d8c8..46b80e144 100644 --- a/apps/common/main/resources/less/combo-border-size.less +++ b/apps/common/main/resources/less/combo-border-size.less @@ -23,7 +23,7 @@ } img, .image { - background: ~"url(@{common-image-const-path}/combo-border-size/BorderSize.png) no-repeat 0 0 @background-normal"; + background: ~"url(@{common-image-const-path}/combo-border-size/BorderSize.png) no-repeat 0 0 var(--background-normal)"; @media only screen { //@media (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 1.9), diff --git a/apps/common/main/resources/less/combo-dataview.less b/apps/common/main/resources/less/combo-dataview.less index aee7993b0..85bc951c2 100644 --- a/apps/common/main/resources/less/combo-dataview.less +++ b/apps/common/main/resources/less/combo-dataview.less @@ -43,7 +43,7 @@ } .dropdown-menu { - border-color: @border-regular-control; + border-color: var(--border-regular-control); border-top-right-radius: 0; border-top-left-radius: 2px; margin: 0; @@ -84,17 +84,17 @@ .item { padding: 3px; - border: 1px solid @border-regular-control; + border: 1px solid var(--border-regular-control); .box-shadow(none); margin: 0 -1px -1px 0; &:hover { - .box-inner-shadow(0 0 0 2px @border-regular-control); + .box-inner-shadow(0 0 0 2px var(--border-regular-control)); } &.selected { - .box-inner-shadow(0 0 0 2px @border-preview-select); + .box-inner-shadow(0 0 0 2px var(--border-preview-select)); } } @@ -188,7 +188,7 @@ &.disabled { .item { &:hover:not(.selected) { - .box-shadow(0 0 0 1px @border-regular-control); + .box-shadow(0 0 0 1px var(--border-regular-control)); } } } @@ -238,7 +238,7 @@ .item { &:hover { - .box-shadow(0 0 0 1px @border-regular-control); + .box-shadow(0 0 0 1px var(--border-regular-control)); } } @@ -265,13 +265,13 @@ .item { margin-left: 4px; - .box-shadow(0 0 0 1px @border-regular-control); + .box-shadow(0 0 0 1px var(--border-regular-control)); } &.disabled { .item { &:hover:not(.selected) { - .box-shadow(0 0 0 1px @border-regular-control); + .box-shadow(0 0 0 1px var(--border-regular-control)); } } } diff --git a/apps/common/main/resources/less/combobox.less b/apps/common/main/resources/less/combobox.less index 50311e41a..4b454217d 100644 --- a/apps/common/main/resources/less/combobox.less +++ b/apps/common/main/resources/less/combobox.less @@ -69,14 +69,14 @@ &.input-group-nr.open:not(.no-highlighted) { & > .form-control, & > .btn { - border-color: @border-preview-select; + border-color: var(--border-preview-select); } } &.input-group-nr:not(.no-highlighted) > .form-control { &:focus, &:focus ~ button.dropdown-toggle { - border-color: @border-preview-select; + border-color: var(--border-preview-select); } } @@ -86,7 +86,7 @@ } &.selected { - background-color: @highlight-button-pressed; + background-color: var(--highlight-button-pressed); a { color: @dropdown-link-active-color; @@ -95,7 +95,7 @@ &.hover, &:focus, &.focus { - background-color: @highlight-button-pressed; + background-color: var(--highlight-button-pressed); } } } @@ -136,7 +136,7 @@ &.input-group-nr:not(.no-highlighted) { & > .form-control, & > .btn { - border-color: @border-preview-select; + border-color: var(--border-preview-select); } } } \ No newline at end of file diff --git a/apps/common/main/resources/less/comments.less b/apps/common/main/resources/less/comments.less index 87677b394..0a85ec745 100644 --- a/apps/common/main/resources/less/comments.less +++ b/apps/common/main/resources/less/comments.less @@ -14,7 +14,7 @@ right: 0; bottom: 45px; height: 300px; - border-bottom: 1px solid @border-toolbar; + border-bottom: 1px solid var(--border-toolbar); &.stretch { border-bottom: none; @@ -32,10 +32,10 @@ text-align: center; label { - color: @text-normal; + color: var(--text-normal); font: 12px arial; line-height: normal; - border-bottom: 1px dotted @text-normal; + border-bottom: 1px dotted var(--text-normal); padding-top: 12px; outline: none; height: 29px; @@ -58,10 +58,10 @@ width: 100%; resize: none; margin-bottom: 5px; - border: 1px solid @border-toolbar; + border: 1px solid var(--border-toolbar); height: 100%; &:focus { - border-color: @border-preview-select; + border-color: var(--border-preview-select); } } } @@ -83,19 +83,19 @@ line-height: normal; position: relative; overflow: hidden; - color: @border-preview-select; + color: var(--border-preview-select); textarea { width: 100%; height: 50px; resize: none; margin-bottom: 5px; - border: 1px solid @border-toolbar; + border: 1px solid var(--border-toolbar); word-break: break-all; line-height: 15px; - color: @text-normal; + color: var(--text-normal); &:focus { - border-color: @border-preview-select; + border-color: var(--border-preview-select); } } @@ -109,7 +109,7 @@ } .separator-cmt { - border-bottom: 1px solid @border-toolbar; + border-bottom: 1px solid var(--border-toolbar); margin: 20px 0px 0px 0px; } @@ -119,7 +119,7 @@ } .user-name { - color: @text-normal; + color: var(--text-normal); font-size: 12px; font-weight: bold; overflow: hidden; @@ -133,7 +133,7 @@ .color { width: 12px; height: 12px; - border: 1px solid @border-toolbar; + border: 1px solid var(--border-toolbar); margin: 0 5px 3px 0; vertical-align: middle; } @@ -177,7 +177,7 @@ } .user-message { - color: @text-normal; + color: var(--text-normal); padding: 9px 0px 0 0px; white-space: pre-wrap; word-wrap: break-word; @@ -200,11 +200,11 @@ } .user-reply { - color: @text-normal; + color: var(--text-normal); margin-top: 10px; white-space: pre-wrap; width: auto; - border-bottom: 1px dotted @text-normal; + border-bottom: 1px dotted var(--text-normal); height: 16px; cursor: pointer; } @@ -402,12 +402,12 @@ left: 2px; width: 15px; height: 15px; - background-color: @background-normal; + background-color: var(--background-normal); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); - border: solid 1px @border-toolbar; + border: solid 1px var(--border-toolbar); } } diff --git a/apps/common/main/resources/less/common.less b/apps/common/main/resources/less/common.less index b27dd6a5f..7935bf9c4 100644 --- a/apps/common/main/resources/less/common.less +++ b/apps/common/main/resources/less/common.less @@ -1,6 +1,6 @@ label { &.link { - border-bottom: 1px dotted @text-secondary; + border-bottom: 1px dotted var(--text-secondary); cursor: pointer; &.disabled { @@ -9,7 +9,7 @@ label { } &.link-solid { - border-bottom: 1px solid @text-secondary; + border-bottom: 1px solid var(--text-secondary); cursor: pointer; &.disabled { diff --git a/apps/common/main/resources/less/dataview.less b/apps/common/main/resources/less/dataview.less index d016d75ac..10854774a 100644 --- a/apps/common/main/resources/less/dataview.less +++ b/apps/common/main/resources/less/dataview.less @@ -9,7 +9,7 @@ text-align: center; height: 100%; width: 100%; - color: @text-tertiary; + color: var(--text-tertiary); td { padding: 5px; } @@ -22,11 +22,11 @@ margin: 4px; cursor: pointer; - .box-shadow(0 0 0 1px @border-regular-control); + .box-shadow(0 0 0 1px var(--border-regular-control)); &:hover, &.selected { - .box-shadow(0 0 0 2px @highlight-button-pressed); + .box-shadow(0 0 0 2px var(--highlight-button-pressed)); } } @@ -58,11 +58,11 @@ opacity: 0.5; } - .box-shadow(0 0 0 1px @border-regular-control); + .box-shadow(0 0 0 1px var(--border-regular-control)); &:hover:not(.disabled), &.selected:not(.disabled) { - .box-shadow(0 0 0 2px @highlight-button-pressed); + .box-shadow(0 0 0 2px var(--highlight-button-pressed)); } } } diff --git a/apps/common/main/resources/less/dropdown-menu.less b/apps/common/main/resources/less/dropdown-menu.less index 67dbf10fa..e50bd6a55 100644 --- a/apps/common/main/resources/less/dropdown-menu.less +++ b/apps/common/main/resources/less/dropdown-menu.less @@ -80,7 +80,7 @@ .no-checkmark.checked { .menu-item-icon { - background-color: @highlight-button-pressed; + background-color: var(--highlight-button-pressed); border-radius: 2px; } } diff --git a/apps/common/main/resources/less/extended-color-picker.less b/apps/common/main/resources/less/extended-color-picker.less index d72e23ea6..4c3e35032 100644 --- a/apps/common/main/resources/less/extended-color-picker.less +++ b/apps/common/main/resources/less/extended-color-picker.less @@ -37,7 +37,7 @@ width: 63px; height: 20px; background-color: transparent; - border: 1px solid @border-regular-control; + border: 1px solid var(--border-regular-control); &.top { border-bottom: none; diff --git a/apps/common/main/resources/less/header.less b/apps/common/main/resources/less/header.less index 61e0bde9a..3fd528562 100644 --- a/apps/common/main/resources/less/header.less +++ b/apps/common/main/resources/less/header.less @@ -29,7 +29,7 @@ .toolbar { .extra { svg.icon { - fill: @icon-toolbar-header; + fill: var(--icon-toolbar-header); } .btn-slot { @@ -57,12 +57,12 @@ } label { - color: @text-toolbar-header; + color: var(--text-toolbar-header); } .dropdown-menu { label { - color: @text-normal; + color: var(--text-normal); } } @@ -98,7 +98,7 @@ min-width: 50px; text-align: center; - color: @text-toolbar-header; + color: var(--text-toolbar-header); background-color: transparent; border: 0 none; cursor: default; @@ -121,7 +121,7 @@ white-space: nowrap; &.locked { text-decoration: none; - color: @border-preview-select; + color: var(--border-preview-select); cursor: default; } @@ -227,7 +227,7 @@ } label { - color: @text-normal; + color: var(--text-normal); } .cousers-list { @@ -256,12 +256,12 @@ height: 12px; display: inline-block; vertical-align: middle; - border: 1px solid @border-toolbar; + border: 1px solid var(--border-toolbar); margin: 0 5px 1px 0; } .user-name { - color: @text-normal; + color: var(--text-normal); font-size: 12px; font-weight: bold; white-space: nowrap; @@ -344,7 +344,7 @@ background-color: @header-background-color; display: flex; height: 100%; - color: @text-toolbar-header; + color: var(--text-toolbar-header); position: relative; .btn-slot { @@ -352,7 +352,7 @@ } svg.icon { - fill: @icon-toolbar-header; + fill: var(--icon-toolbar-header); &.icon-save { &.btn-save-coauth, &.btn-synch { diff --git a/apps/common/main/resources/less/history.less b/apps/common/main/resources/less/history.less index e144e055c..9e178f40e 100644 --- a/apps/common/main/resources/less/history.less +++ b/apps/common/main/resources/less/history.less @@ -1,6 +1,6 @@ #history-box { position: relative; - border-right: 1px solid @border-toolbar; + border-right: 1px solid var(--border-toolbar); } #history-header { @@ -10,7 +10,7 @@ top: 0; right: 0; overflow: hidden; - border-bottom: 1px solid @border-toolbar; + border-bottom: 1px solid var(--border-toolbar); #history-btn-back { height: 27px; @@ -21,7 +21,7 @@ cursor: pointer; &:hover { - background-color: @highlight-button-hover; + background-color: var(--highlight-button-hover); } } } @@ -33,7 +33,7 @@ bottom: 0; right: 0; overflow: hidden; - border-top: 1px solid @border-toolbar; + border-top: 1px solid var(--border-toolbar); #history-btn-expand { height: 27px; @@ -44,7 +44,7 @@ cursor: pointer; &:hover { - background-color: @highlight-button-hover; + background-color: var(--highlight-button-hover); } } } @@ -64,15 +64,15 @@ &:hover:not(.selected), &.over { - background-color: @highlight-button-hover; + background-color: var(--highlight-button-hover); } &.selected { - background-color: @highlight-button-pressed; + background-color: var(--highlight-button-pressed); .user-name, .user-date { - color: @text-inverse; + color: var(--text-inverse); } .revision-expand { @@ -83,7 +83,7 @@ .history-item-wrap { padding: 10px 2px 15px 20px; - color: @text-normal; + color: var(--text-normal); text-overflow: ellipsis; .user-date { @@ -99,12 +99,12 @@ display: inline-block; max-width: 60px; height: 18px; - color: @highlight-button-pressed; + color: var(--highlight-button-pressed); font-size: 10px; white-space: nowrap; overflow: hidden; - color: @text-tertiary; - background-color: @background-normal; + color: var(--text-tertiary); + background-color: var(--background-normal); text-align: center; padding: 1px 5px; border-radius: 2px; @@ -124,7 +124,7 @@ .color { width: 12px; height: 12px; - border: 1px solid @border-toolbar; + border: 1px solid var(--border-toolbar); margin: 0 5px 3px 0; vertical-align: middle; } @@ -144,8 +144,8 @@ } .revision-restore { - color: @text-normal; - border-bottom: 1px dotted @text-normal; + color: var(--text-normal); + border-bottom: 1px dotted var(--text-normal); height: 16px; margin-top: 5px; white-space: pre-wrap; diff --git a/apps/common/main/resources/less/hsb-colorpicker.less b/apps/common/main/resources/less/hsb-colorpicker.less index 93e16b076..640bcf39a 100644 --- a/apps/common/main/resources/less/hsb-colorpicker.less +++ b/apps/common/main/resources/less/hsb-colorpicker.less @@ -8,7 +8,7 @@ width: 22px; height: 22px; float: left; - border: 1px solid @border-regular-control; + border: 1px solid var(--border-regular-control); background-image: none; background-position: 0 -206px; background-repeat: no-repeat; @@ -22,7 +22,7 @@ } .color-text { - color: @text-normal; + color: var(--text-normal); height: 22px; padding: 4px 32px; cursor: default; @@ -34,7 +34,7 @@ width: 195px; height: 196px; position: relative; - border: 1px solid @border-regular-control; + border: 1px solid var(--border-regular-control); background-position: 0 0; } @@ -49,7 +49,7 @@ width: 10px; height: 100%; position: relative; - border: 1px solid @border-regular-control; + border: 1px solid var(--border-regular-control); background-position: -195px 0; } @@ -70,7 +70,7 @@ } .empty-color { - color: @text-normal; + color: var(--text-normal); height: 16px; margin: 5px 0; @@ -91,7 +91,7 @@ height: 10px; margin-right: 5px; margin-top: 1px; - border: 1px solid @border-regular-control; + border: 1px solid var(--border-regular-control); } } } \ No newline at end of file diff --git a/apps/common/main/resources/less/input.less b/apps/common/main/resources/less/input.less index c1056f4b9..e6b97a0d3 100644 --- a/apps/common/main/resources/less/input.less +++ b/apps/common/main/resources/less/input.less @@ -1,7 +1,7 @@ .form-control { .border-radius(@border-radius-small); .box-shadow(none); - color: @text-normal; + color: var(--text-normal); .user-select(text); &:focus { @@ -49,7 +49,7 @@ &.form-control:focus, .form-control:focus { - border-color: @border-preview-select; + border-color: var(--border-preview-select); } &.error { @@ -87,12 +87,12 @@ input[type="password"] { } input[type="text"]::selection, textarea::selection { - background: @highlight-text-select; - color: @text-inverse; + background: var(--highlight-text-select); + color: var(--text-inverse); } textarea.form-control:focus { - border-color: @border-preview-select; + border-color: var(--border-preview-select); } .input-field-btn { diff --git a/apps/common/main/resources/less/language-dialog.less b/apps/common/main/resources/less/language-dialog.less index 3c82f1a58..8056af88d 100644 --- a/apps/common/main/resources/less/language-dialog.less +++ b/apps/common/main/resources/less/language-dialog.less @@ -23,7 +23,7 @@ li { &:before { display: none; } - background-color: @highlight-button-pressed; + background-color: var(--highlight-button-pressed); &, &:hover, &:focus { color: @dropdown-link-active-color; diff --git a/apps/common/main/resources/less/layout.less b/apps/common/main/resources/less/layout.less index e9e88b51c..2144206b0 100644 --- a/apps/common/main/resources/less/layout.less +++ b/apps/common/main/resources/less/layout.less @@ -17,7 +17,7 @@ .layout-resizer { z-index: @zindex-dropdown - 10; - background: @background-toolbar; + background: var(--background-toolbar); border: 0 none; &.move { @@ -36,8 +36,8 @@ cursor: row-resize; &.move { - border-top: solid 1px @border-toolbar; - border-bottom: solid 1px @border-toolbar; + border-top: solid 1px var(--border-toolbar); + border-bottom: solid 1px var(--border-toolbar); } } } @@ -53,8 +53,8 @@ cursor: col-resize; &.move { - border-left: solid 1px @border-toolbar; - border-right: solid 1px @border-toolbar; + border-left: solid 1px var(--border-toolbar); + border-right: solid 1px var(--border-toolbar); } } } diff --git a/apps/common/main/resources/less/listview.less b/apps/common/main/resources/less/listview.less index 9f053048b..2fd5dcbfe 100644 --- a/apps/common/main/resources/less/listview.less +++ b/apps/common/main/resources/less/listview.less @@ -1,5 +1,5 @@ .listview { - border: 1px solid @border-regular-control; + border: 1px solid var(--border-regular-control); .border-radius(@border-radius-small); line-height: 15px; @@ -14,7 +14,7 @@ text-align: center; width: 100%; height: 100%; - color: @text-tertiary; + color: var(--text-tertiary); td { padding: 5px; } @@ -22,7 +22,7 @@ } &:not(.no-focus):focus { - border-color: @border-preview-select; + border-color: var(--border-preview-select); } & > .item { @@ -32,8 +32,8 @@ cursor: pointer; white-space: pre-wrap; - background-color: @background-normal; - border-color: @border-regular-control; + background-color: var(--background-normal); + border-color: var(--border-regular-control); border-style: solid; border-width: 1px 0; border-top-color: transparent; @@ -41,16 +41,16 @@ &:not(.disabled) > .item { &:hover { - background-color: @highlight-button-hover; - border-color: @highlight-button-hover; + background-color: var(--highlight-button-hover); + border-color: var(--highlight-button-hover); border-style: solid; border-width: 1px 0; } &.selected { - background-color: @highlight-button-pressed; - color: @text-inverse; - border-color: @highlight-button-pressed; + background-color: var(--highlight-button-pressed); + color: var(--text-inverse); + border-color: var(--highlight-button-pressed); border-style: solid; border-width: 1px 0; } diff --git a/apps/common/main/resources/less/loadmask.less b/apps/common/main/resources/less/loadmask.less index d4163cda9..7cb6fb13d 100644 --- a/apps/common/main/resources/less/loadmask.less +++ b/apps/common/main/resources/less/loadmask.less @@ -23,7 +23,7 @@ border: none; background-image: none; background-color: rgba(0,0,0,.9); - color: @background-toolbar; + color: var(--background-toolbar); .border-radius(@border-radius-large); left: 50%; @@ -52,7 +52,7 @@ .left-panel & { line-height: @loadmask-small-image-height; background-color: transparent; - color: @text-normal; + color: var(--text-normal); padding: 8px; top: 78px; transform: translate(-50%, 0); diff --git a/apps/common/main/resources/less/masked-field.less b/apps/common/main/resources/less/masked-field.less index 897f8f411..0af88cee3 100644 --- a/apps/common/main/resources/less/masked-field.less +++ b/apps/common/main/resources/less/masked-field.less @@ -1,10 +1,10 @@ .masked-field { text-align: right; - border: 1px solid @border-regular-control; + border: 1px solid var(--border-regular-control); border-radius: 2px; padding: 0 3px; &:focus { - border-color: @border-preview-select; + border-color: var(--border-preview-select); } } \ No newline at end of file diff --git a/apps/common/main/resources/less/multislider-gradient.less b/apps/common/main/resources/less/multislider-gradient.less index ac41d054e..68b210ca3 100644 --- a/apps/common/main/resources/less/multislider-gradient.less +++ b/apps/common/main/resources/less/multislider-gradient.less @@ -12,19 +12,19 @@ left: 2px; width: 9px; height: 9px; - background-color: @background-normal; + background-color: var(--background-normal); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); - border-top: solid 1px @border-regular-control; - border-left: solid 1px @border-regular-control; + border-top: solid 1px var(--border-regular-control); + border-left: solid 1px var(--border-regular-control); border-radius: 0 3px; box-sizing: content-box; .thumb-top-inner { - border-top: solid 1px @background-normal; - border-left: solid 1px @background-normal; + border-top: solid 1px var(--background-normal); + border-left: solid 1px var(--background-normal); height: 100%; } } @@ -35,13 +35,13 @@ left: 1px; width: 10px; height: 9px; - background-color: @background-normal; - border: solid 1px @border-regular-control; + background-color: var(--background-normal); + border: solid 1px var(--border-regular-control); border-top: none; border-radius: 2px; box-sizing: content-box; .thumb-bottom-inner { - border: solid 1px @border-regular-control; + border: solid 1px var(--border-regular-control); border-top: none; height: 100%; } @@ -49,11 +49,11 @@ &.active { .thumb-top { - border-top: solid 1px @border-control-focus; - border-left: solid 1px @border-control-focus; + border-top: solid 1px var(--border-control-focus); + border-left: solid 1px var(--border-control-focus); } .thumb-bottom { - border: solid 1px @border-control-focus; + border: solid 1px var(--border-control-focus); border-top: none; } } @@ -80,8 +80,8 @@ // filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */ background-position: 0 0; - outline: 1px solid @border-control-focus; - border: 1px solid @border-regular-control; + outline: 1px solid var(--border-control-focus); + border: 1px solid var(--border-regular-control); cursor: copy; } } diff --git a/apps/common/main/resources/less/opendialog.less b/apps/common/main/resources/less/opendialog.less index 16547c6e7..3b51ec18e 100644 --- a/apps/common/main/resources/less/opendialog.less +++ b/apps/common/main/resources/less/opendialog.less @@ -43,7 +43,7 @@ height: 110px !important; position:relative; overflow:hidden; - border: @border-regular-control solid 1px; + border: var(--border-regular-control) solid 1px; } #id-preview-data { @@ -59,7 +59,7 @@ td { padding: 1px 8px 1px 0; - border-right: @border-regular-control solid 1px; + border-right: var(--border-regular-control) solid 1px; min-width: 30px; height: 17px; white-space: nowrap; diff --git a/apps/common/main/resources/less/plugins.less b/apps/common/main/resources/less/plugins.less index 3f246f4a3..8b866bf21 100644 --- a/apps/common/main/resources/less/plugins.less +++ b/apps/common/main/resources/less/plugins.less @@ -26,11 +26,11 @@ &:hover, &.over { - background-color: @highlight-button-hover; + background-color: var(--highlight-button-hover); } &.selected { - background-color: @highlight-button-pressed; + background-color: var(--highlight-button-pressed); color: #fff; } } @@ -82,7 +82,7 @@ width: 100%; height: 38px; padding: 10px 12px; - border-bottom: 1px solid @border-toolbar; + border-bottom: 1px solid var(--border-toolbar); label { width: 100%; @@ -118,7 +118,7 @@ width: 100%; height: 100%; opacity: 0.4; - background-color: @background-toolbar; + background-color: var(--background-toolbar); z-index: @zindex-tooltip + 1; } diff --git a/apps/common/main/resources/less/radiobox.less b/apps/common/main/resources/less/radiobox.less index c9abcc4e5..8a394e5fc 100644 --- a/apps/common/main/resources/less/radiobox.less +++ b/apps/common/main/resources/less/radiobox.less @@ -18,8 +18,8 @@ width: 14px; height: 14px; - background: @background-normal; - border: 1px solid @border-regular-control; + background: var(--background-normal); + border: 1px solid var(--border-regular-control); border-radius: 50%; } @@ -28,7 +28,7 @@ &::before { content: ''; position: absolute; - background: @text-normal; + background: var(--text-normal); border-radius: 50%; width: 8px; height: 8px; diff --git a/apps/common/main/resources/less/scroller.less b/apps/common/main/resources/less/scroller.less index 7e4a2e2d7..9ede0e2e4 100644 --- a/apps/common/main/resources/less/scroller.less +++ b/apps/common/main/resources/less/scroller.less @@ -11,13 +11,13 @@ } .ps-scrollbar-x { - background-color: @background-toolbar; + background-color: var(--background-toolbar); &.always-visible-x { bottom: 0px; height: 9px; - background-color: @background-toolbar; + background-color: var(--background-toolbar); background-image: data-uri('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAOCAYAAAD0f5bSAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAuSURBVChTY6AfOH/+/H9SaSYQg1RAlqZhCT5+/AgOSlJoOgY50DqSNZJhEwMDACkvNZLpune5AAAAAElFTkSuQmCC'); background-repeat: no-repeat; @@ -31,7 +31,7 @@ background-position: center 0; .border-radius(2px); - border: 1px solid @border-regular-control; + border: 1px solid var(--border-regular-control); -o-transition: background-color .5s 0 linear; -webkit-transition: background-color .5s 0 linear; -moz-transition: background-color .5s 0 linear; @@ -43,7 +43,7 @@ .hover { .ps-scrollbar-x { &.always-visible-x { - background-color: @border-regular-control; + background-color: var(--border-regular-control); background-position: center -7px; } } @@ -52,8 +52,8 @@ &.in-scrolling { .ps-scrollbar-x { &.always-visible-x { - background-color: @border-regular-control; - border-color: @border-regular-control; + background-color: var(--border-regular-control); + border-color: var(--border-regular-control); background-position: center -7px; } } @@ -72,20 +72,20 @@ } .ps-scrollbar-y { - background-color: @background-toolbar; + background-color: var(--background-toolbar); &.always-visible-y { right: 0px; width: 9px; - background-color: @background-toolbar; + background-color: var(--background-toolbar); .background-ximage('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAANCAQAAAAz1Zf0AAAAIUlEQVR42mNgAILz/0GQAQo+/gdBBqLAqE5ydH5k+sgEANHgUH2JtDRHAAAAAElFTkSuQmCC', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAaAgMAAADZOtQaAAAACVBMVEUAAADPz8/x8fFVrc9qAAAAAXRSTlMAQObYZgAAABZJREFUeNpjYAgNYOBaxcDEgAsMLXkA/sUJfm1m4l8AAAAASUVORK5CYII=', 14px); background-repeat: no-repeat; background-position: 0 center; .border-radius(2px); - border: 1px solid @border-regular-control; + border: 1px solid var(--border-regular-control); -o-transition: background-color .5s 0 linear; -webkit-transition: background-color .5s 0 linear; -moz-transition: background-color .5s 0 linear; @@ -97,7 +97,7 @@ .hover { .ps-scrollbar-y { &.always-visible-y { - background-color: @border-regular-control; + background-color: var(--border-regular-control); background-position: -7px center; } } @@ -106,8 +106,8 @@ &.in-scrolling { .ps-scrollbar-y { &.always-visible-y { - background-color: @border-regular-control; - border-color: @border-regular-control; + background-color: var(--border-regular-control); + border-color: var(--border-regular-control); background-position: -7px center; } } diff --git a/apps/common/main/resources/less/separator.less b/apps/common/main/resources/less/separator.less index 687805dff..c0fda0e29 100644 --- a/apps/common/main/resources/less/separator.less +++ b/apps/common/main/resources/less/separator.less @@ -9,7 +9,7 @@ .separator { display: inline-block; position: inherit; - border-left: 1px solid @border-toolbar; + border-left: 1px solid var(--border-toolbar); vertical-align: top; padding: 0; width: 0; @@ -20,6 +20,6 @@ border-left: none; border-right: none; - border-top: 1px solid @border-toolbar; + border-top: 1px solid var(--border-toolbar); } } diff --git a/apps/common/main/resources/less/spinner.less b/apps/common/main/resources/less/spinner.less index 1f6fb9078..30bf18e71 100644 --- a/apps/common/main/resources/less/spinner.less +++ b/apps/common/main/resources/less/spinner.less @@ -10,7 +10,7 @@ padding-right: @trigger-width + 2px; &:focus { - border-color: @border-preview-select; + border-color: var(--border-preview-select); } } diff --git a/apps/common/main/resources/less/switcher.less b/apps/common/main/resources/less/switcher.less index 0fbe00a0b..a8c781a28 100644 --- a/apps/common/main/resources/less/switcher.less +++ b/apps/common/main/resources/less/switcher.less @@ -8,7 +8,7 @@ .sw-left { display: inline-block; height: 100%; - background-color: @highlight-button-pressed; + background-color: var(--highlight-button-pressed); border-top-left-radius: 2px; border-bottom-left-radius: 2px; } @@ -16,7 +16,7 @@ .sw-right { display: inline-block; height: 100%; - background-color: @border-regular-control; + background-color: var(--border-regular-control); border-top-right-radius: 2px; border-bottom-right-radius: 2px; } @@ -27,8 +27,8 @@ right: auto; top: 0; height: 100%; - background-color: @background-normal; - border: 1px solid @highlight-button-pressed; + background-color: var(--background-normal); + border: 1px solid var(--highlight-button-pressed); border-radius: 3px; } @@ -43,11 +43,11 @@ cursor: default; .sw-left { - background-color: @border-regular-control; + background-color: var(--border-regular-control); } .thumb { - border-color: @border-regular-control; + border-color: var(--border-regular-control); } } } \ No newline at end of file diff --git a/apps/common/main/resources/less/symboltable.less b/apps/common/main/resources/less/symboltable.less index 37f0294d0..11d3d6a18 100644 --- a/apps/common/main/resources/less/symboltable.less +++ b/apps/common/main/resources/less/symboltable.less @@ -7,9 +7,9 @@ .cell{ width: 31px; height: 33px; - border-right: 1px solid @border-regular-control; - border-bottom: 1px solid @border-regular-control; - background: @background-normal; + border-right: 1px solid var(--border-regular-control); + border-bottom: 1px solid var(--border-regular-control); + background: var(--background-normal); align-content: center; vertical-align: middle; text-align: center; @@ -24,7 +24,7 @@ } .cell-selected{ - background-color: @border-preview-select; + background-color: var(--border-preview-select); color: white; } } @@ -33,7 +33,7 @@ width: 100%; height: 32px; overflow: hidden; - border: @border-regular-control solid 1px; + border: var(--border-regular-control) solid 1px; } #symbol-table-scrollable-div { @@ -42,7 +42,7 @@ height: 132px; position:relative; overflow:hidden; - border: @border-regular-control solid 1px; + border: var(--border-regular-control) solid 1px; } #id-preview-data { diff --git a/apps/common/main/resources/less/synchronize-tip.less b/apps/common/main/resources/less/synchronize-tip.less index f6fe3829b..d73aa6243 100644 --- a/apps/common/main/resources/less/synchronize-tip.less +++ b/apps/common/main/resources/less/synchronize-tip.less @@ -99,7 +99,7 @@ .asc-synchronizetip { padding: 15px 8px 15px 15px; border-radius: 5px; - background-color: @background-notification-popover; + background-color: var(--background-notification-popover); overflow: visible; .right & { @@ -123,7 +123,7 @@ position: absolute; top: 5px; left: 8px; - background-color: @background-notification-popover; + background-color: var(--background-notification-popover); width: 15px; height: 15px; @@ -141,8 +141,8 @@ } .show-link label { - border-bottom: 1px dotted @text-link; - color: @text-link; + border-bottom: 1px dotted var(--text-link); + color: var(--text-link); cursor: pointer; } diff --git a/apps/common/main/resources/less/tabbar.less b/apps/common/main/resources/less/tabbar.less index ef83e693a..ccb34d01e 100644 --- a/apps/common/main/resources/less/tabbar.less +++ b/apps/common/main/resources/less/tabbar.less @@ -8,9 +8,9 @@ &.active { > span, > span:hover, > span:focus { - background-color: @background-normal; - color: @text-normal; - border-color: @background-normal; + background-color: var(--background-normal); + color: var(--text-normal); + border-color: var(--background-normal); cursor: pointer; } } @@ -21,8 +21,8 @@ > span { display: inline; - background-color: @background-toolbar; - color: @text-secondary; + background-color: var(--background-toolbar); + color: var(--text-secondary); padding-top: 0; padding-bottom: 0; @@ -36,8 +36,8 @@ } &:hover, &:focus { - background-color: @background-toolbar; - border-color: @background-toolbar; + background-color: var(--background-toolbar); + border-color: var(--background-toolbar); cursor: pointer; } } diff --git a/apps/common/main/resources/less/theme-colorpalette.less b/apps/common/main/resources/less/theme-colorpalette.less index 23783c1ee..7186a3345 100644 --- a/apps/common/main/resources/less/theme-colorpalette.less +++ b/apps/common/main/resources/less/theme-colorpalette.less @@ -16,7 +16,7 @@ a { padding: 0; - border: 1px solid @background-normal; + border: 1px solid var(--background-normal); float: left; text-decoration: none; -moz-outline: 0 none; @@ -24,25 +24,25 @@ cursor: pointer; em span { - border: 1px solid @border-color-shading; + border: 1px solid var(--border-color-shading); } &:hover, &.selected { - border-color: @icon-normal; + border-color: var(--icon-normal); em span { - border-color: @background-normal; + border-color: var(--background-normal); } } } .dynamic-empty-color em span { - border:solid 1px @border-color-shading; - background: @background-normal; + border:solid 1px var(--border-color-shading); + background: var(--background-normal); } .color-transparent { em span { - border:solid 1px @border-color-shading; + border:solid 1px var(--border-color-shading); } } } diff --git a/apps/common/main/resources/less/toolbar.less b/apps/common/main/resources/less/toolbar.less index 06b10238b..91c1b4977 100644 --- a/apps/common/main/resources/less/toolbar.less +++ b/apps/common/main/resources/less/toolbar.less @@ -77,7 +77,7 @@ } &.active { - background-color: @background-toolbar; + background-color: var(--background-toolbar); } @@ -88,12 +88,12 @@ cursor: default; font-size: 12px; text-align: center; - color: @text-toolbar-header; + color: var(--text-toolbar-header); } &.active { > a { - color: @text-normal; + color: var(--text-normal); } } } @@ -190,8 +190,8 @@ /**/ } - background-color: @background-toolbar; - .box-inner-shadow(0 -1px 0 @border-toolbar); + background-color: var(--background-toolbar); + .box-inner-shadow(0 -1px 0 var(--border-toolbar)); .group { position: relative; @@ -245,7 +245,7 @@ } &.border { - border: 1px solid @border-regular-control; + border: 1px solid var(--border-regular-control); .border-radius(1px); width: 22px; height: 22px; @@ -263,7 +263,7 @@ right: 0; bottom: 0; opacity: 0; - background-color: @background-toolbar; + background-color: var(--background-toolbar); /* z-index: @zindex-tooltip + 1; */ } @@ -304,7 +304,7 @@ .tabs, .extra { background-color: transparent; - box-shadow: inset 0 -1px 0 0 @border-regular-control; + box-shadow: inset 0 -1px 0 0 var(--border-regular-control); } .tabs { @@ -318,7 +318,7 @@ &:after { //transition: opacity .1s; //transition: bottom .1s; - border-top: @underscore_height solid @text-normal; + border-top: @underscore_height solid var(--text-normal); content: ''; position: absolute; width: 100%; @@ -337,11 +337,11 @@ &:hover:not(.active) { background-color: rgba(0, 0, 0, .05); - //background-color: @highlight-button-hover; + //background-color: var(--highlight-button-hover); } > a { - color: @text-normal; + color: var(--text-normal); &::after { display:block; @@ -367,15 +367,15 @@ .tabs .scroll { &.left { - box-shadow: 5px 0 20px 5px @background-toolbar; + box-shadow: 5px 0 20px 5px var(--background-toolbar); } &.right { - box-shadow: -5px 0 20px 5px @background-toolbar; + box-shadow: -5px 0 20px 5px var(--background-toolbar); } &:after { - border-color: @text-normal; + border-color: var(--text-normal); } } @@ -386,34 +386,34 @@ } svg.icon { - fill: @icon-toolbar-header; + fill: var(--icon-toolbar-header); } .caption { - color: @text-normal; + color: var(--text-normal); } &:hover:not(.disabled) { - background-color: @highlight-button-hover; + background-color: var(--highlight-button-hover); } &:active, &.active { &:not(.disabled) { - background-color: @highlight-button-pressed; + background-color: var(--highlight-button-pressed); svg.icon { - fill: @icon-toolbar-header; + fill: var(--icon-toolbar-header); } .caption { - color: @text-inverse; + color: var(--text-inverse); } } } } #rib-doc-name { - color: @text-normal; + color: var(--text-normal); } &.editor-native-color { @@ -452,22 +452,22 @@ .btn-toolbar { &:active { svg.icon { - fill: @icon-toolbar-header; + fill: var(--icon-toolbar-header); } } svg.icon { background-image: none; - fill: @icon-normal; + fill: var(--icon-normal); } &.borders--small { border-radius: 2px; - background-color: @background-normal; + background-color: var(--background-normal); &:not(:active) { - box-shadow: inset 0 0 0 1px @border-regular-control; + box-shadow: inset 0 0 0 1px var(--border-regular-control); } &, .icon { @@ -493,7 +493,7 @@ svg.icon { display: inline-block; vertical-align: middle; - fill: @icon-normal; + fill: var(--icon-normal); } width: 20px; @@ -523,7 +523,7 @@ svg.icon { display: inline-block; vertical-align: middle; - fill: @icon-normal; + fill: var(--icon-normal); } } diff --git a/apps/common/main/resources/less/tooltip.less b/apps/common/main/resources/less/tooltip.less index 459f245ce..effe9385d 100644 --- a/apps/common/main/resources/less/tooltip.less +++ b/apps/common/main/resources/less/tooltip.less @@ -15,7 +15,7 @@ &.top-right .tooltip-arrow { bottom: 1px; border-width: 5px 5px 0; - border-top-color: @background-normal; + border-top-color: var(--background-normal); } &.top-left .tooltip-arrow, @@ -32,16 +32,16 @@ &.bottom-right .tooltip-arrow { top: 1px; border-width: 0 5px 5px; - border-bottom-color: @background-normal; + border-bottom-color: var(--background-normal); } } .tooltip-inner { font-size: 11px; - background-color: @background-normal; - color: @text-normal; + background-color: var(--background-normal); + color: var(--text-normal); padding: 5px 12px; - border: 1px solid @border-regular-control; + border: 1px solid var(--border-regular-control); .box-shadow(0 6px 12px rgba(0, 0, 0, 0.175)); background-clip: padding-box; diff --git a/apps/common/main/resources/less/treeview.less b/apps/common/main/resources/less/treeview.less index f27e0539d..3f8ebf7da 100644 --- a/apps/common/main/resources/less/treeview.less +++ b/apps/common/main/resources/less/treeview.less @@ -12,7 +12,7 @@ text-align: center; height: 100%; width: 100%; - color: @text-tertiary; + color: var(--text-tertiary); td { padding: 5px; } @@ -20,7 +20,7 @@ } &:focus { - border-color: @border-preview-select; + border-color: var(--border-preview-select); } > .item { @@ -31,11 +31,11 @@ &:hover, &.over { - background-color: @highlight-button-hover; + background-color: var(--highlight-button-hover); } &.selected { - background-color: @highlight-button-pressed; + background-color: var(--highlight-button-pressed); } &.selected .empty { @@ -58,7 +58,7 @@ text-overflow: ellipsis; &.empty { - color: @text-tertiary; + color: var(--text-tertiary); font-style: italic; } } diff --git a/apps/common/main/resources/less/window.less b/apps/common/main/resources/less/window.less index a0ceedbad..9389188ae 100644 --- a/apps/common/main/resources/less/window.less +++ b/apps/common/main/resources/less/window.less @@ -27,7 +27,7 @@ box-shadow: 0 5px 15px rgba(0,0,0,0.2); border-radius: 5px; background-color: @body-bg; - border: solid 1px @border-toolbar; + border: solid 1px var(--border-toolbar); left: 0; top: 0; @@ -46,15 +46,15 @@ top: 0; text-overflow: ellipsis; - color: @border-preview-select; + color: var(--border-preview-select); text-align: center; font-size: 12px; font-weight: 700; vertical-align: bottom; line-height: 26px; - background: @background-toolbar; - border-bottom: solid 1px @border-toolbar; + background: var(--background-toolbar); + border-bottom: solid 1px var(--border-toolbar); cursor: move; @@ -92,7 +92,7 @@ line-height: 14px; font-size: 14px; font-weight: bold; - color: @text-normal; + color: var(--text-normal); opacity: 0.7; &:hover { @@ -179,10 +179,10 @@ a { text-decoration: underline; - color: @text-normal; + color: var(--text-normal); &:focus, &:hover { - color: @text-normal; + color: var(--text-normal); } } } @@ -240,8 +240,8 @@ width: 5px; height: 5px; z-index: 1; - background: @background-toolbar; - border: 1px none @border-toolbar; + background: var(--background-toolbar); + border: 1px none var(--border-toolbar); &.left { left: 0; diff --git a/apps/documenteditor/main/resources/less/filemenu.less b/apps/documenteditor/main/resources/less/filemenu.less index b5d075999..6ce27127a 100644 --- a/apps/documenteditor/main/resources/less/filemenu.less +++ b/apps/documenteditor/main/resources/less/filemenu.less @@ -7,8 +7,8 @@ .panel-menu { width: 260px; float: left; - border-right: 1px solid @border-toolbar; - background-color: @background-toolbar; + border-right: 1px solid var(--border-toolbar); + background-color: var(--background-toolbar); li { list-style: none; @@ -19,21 +19,21 @@ margin-bottom: 3px; &:hover:not(.disabled) { - background-color: @highlight-button-hover; + background-color: var(--highlight-button-hover); } &.active:not(.disabled) { outline: 0; - background-color: @highlight-button-pressed; + background-color: var(--highlight-button-pressed); > a { - color: @text-inverse; + color: var(--text-inverse); } } &.disabled > a { cursor: default; - color: @border-regular-control; + color: var(--border-regular-control); } } @@ -68,7 +68,7 @@ .panel-context { width: 100%; padding-left: 260px; - background-color: @background-normal; + background-color: var(--background-normal); .content-box { height: 100%; @@ -123,7 +123,7 @@ .flex-settings { #file-menu-panel & { &.bordered { - border-bottom: 1px solid @border-regular-control; + border-bottom: 1px solid var(--border-regular-control); } overflow: hidden; position: relative; @@ -173,7 +173,7 @@ h3 { margin: 0; font-size: 10pt; - color: @text-normal; + color: var(--text-normal); font-weight: bold; padding: 0 0 10px 10px; white-space: nowrap; @@ -207,7 +207,7 @@ hr { margin: 0; border-bottom: none; - border-color: @border-toolbar; + border-color: var(--border-toolbar); } .thumb-list { @@ -246,7 +246,7 @@ &:hover, &.over { - background-color: @background-toolbar; + background-color: var(--background-toolbar); } .recent-icon { @@ -268,7 +268,7 @@ } .file-info { - color: @text-secondary; + color: var(--text-secondary); } } } @@ -285,7 +285,7 @@ } .dataview { - border-right: 1px solid @border-toolbar; + border-right: 1px solid var(--border-toolbar); & > .item { display: block; @@ -299,11 +299,11 @@ &:not(.header-name) { &:hover, &.over { - background-color: @background-toolbar; + background-color: var(--background-toolbar); } &.selected { - background-color: @highlight-button-pressed; + background-color: var(--highlight-button-pressed); color: @dropdown-link-active-color; } } diff --git a/apps/documenteditor/main/resources/less/layout.less b/apps/documenteditor/main/resources/less/layout.less index 12153b738..3cb60957f 100644 --- a/apps/documenteditor/main/resources/less/layout.less +++ b/apps/documenteditor/main/resources/less/layout.less @@ -2,7 +2,7 @@ body { width: 100%; height: 100%; .user-select(none); - color: @text-normal; + color: var(--text-normal); &.safari { position: absolute; @@ -39,7 +39,7 @@ label { top:0; right: 0; bottom: 0; - background-color: @background-toolbar; + background-color: var(--background-toolbar); overflow: hidden; } diff --git a/apps/documenteditor/main/resources/less/leftmenu.less b/apps/documenteditor/main/resources/less/leftmenu.less index 51ed180ff..658c8023b 100644 --- a/apps/documenteditor/main/resources/less/leftmenu.less +++ b/apps/documenteditor/main/resources/less/leftmenu.less @@ -6,7 +6,7 @@ overflow: hidden; .tool-menu-btns { - border-right: 1px solid @border-toolbar; + border-right: 1px solid var(--border-toolbar); } } } @@ -26,7 +26,7 @@ .left-panel { padding-left: 40px; height: 100%; - border-right: 1px solid @border-toolbar; + border-right: 1px solid var(--border-toolbar); #left-panel-chat { height: 100%; @@ -47,7 +47,7 @@ top: 0; position: absolute; z-index: @zindex-dropdown - 5; - background-color: @background-toolbar; + background-color: var(--background-toolbar); overflow: hidden; } diff --git a/apps/documenteditor/main/resources/less/navigation.less b/apps/documenteditor/main/resources/less/navigation.less index b87947af3..f529a07b3 100644 --- a/apps/documenteditor/main/resources/less/navigation.less +++ b/apps/documenteditor/main/resources/less/navigation.less @@ -11,7 +11,7 @@ width: 100%; font-weight: bold; padding: 10px 12px; - border-bottom: 1px solid @border-toolbar; + border-bottom: 1px solid var(--border-toolbar); } #navigation-list { diff --git a/apps/documenteditor/main/resources/less/rightmenu.less b/apps/documenteditor/main/resources/less/rightmenu.less index 5953bc833..c82127545 100644 --- a/apps/documenteditor/main/resources/less/rightmenu.less +++ b/apps/documenteditor/main/resources/less/rightmenu.less @@ -2,8 +2,8 @@ .tool-menu.right { .tool-menu-btns { position: absolute; - border-left: 1px solid @border-toolbar; - background-color: @background-toolbar; + border-left: 1px solid var(--border-toolbar); + background-color: var(--background-toolbar); right: 0; overflow: hidden; } @@ -16,7 +16,7 @@ padding: 0 10px 0 15px; position: relative; overflow: hidden; - border-left: 1px solid @border-toolbar; + border-left: 1px solid var(--border-toolbar); line-height: 15px; } @@ -78,7 +78,7 @@ width: 100%; resize: none; margin-bottom: 5px; - border: 1px solid @border-toolbar; + border: 1px solid var(--border-toolbar); height: 100%; &.disabled { @@ -255,7 +255,7 @@ button:active:not(.disabled) .btn-change-shape {background-position: -56px - &:hover, &.over { - background-color: @highlight-button-hover; + background-color: var(--highlight-button-hover); .caret { display: inline-block; diff --git a/apps/documenteditor/main/resources/less/statusbar.less b/apps/documenteditor/main/resources/less/statusbar.less index 2b2107001..50fb246e6 100644 --- a/apps/documenteditor/main/resources/less/statusbar.less +++ b/apps/documenteditor/main/resources/less/statusbar.less @@ -2,12 +2,12 @@ display: table; padding: 2px; height: 25px; - background-color: @background-toolbar; - .box-inner-shadow(0 1px 0 @border-toolbar); + background-color: var(--background-toolbar); + .box-inner-shadow(0 1px 0 var(--border-toolbar)); .status-label { font-weight: bold; - color: @text-normal; + color: var(--text-normal); white-space: nowrap; position: relative; top: 1px; @@ -75,7 +75,7 @@ .cnt-lang { display: inline-block; cursor: pointer; - color: @text-normal; + color: var(--text-normal); margin-left: 6px; .caret.up { @@ -181,7 +181,7 @@ height: 12px; display: inline-block; vertical-align: middle; - border: 1px solid @border-toolbar; + border: 1px solid var(--border-toolbar); } .name { diff --git a/apps/documenteditor/main/resources/less/toolbar.less b/apps/documenteditor/main/resources/less/toolbar.less index 3316cb45f..ce47c6690 100644 --- a/apps/documenteditor/main/resources/less/toolbar.less +++ b/apps/documenteditor/main/resources/less/toolbar.less @@ -27,7 +27,7 @@ right: 0; bottom: 0; opacity: 0; - background-color: @background-toolbar; + background-color: var(--background-toolbar); z-index: @zindex-tooltip + 1; } @@ -47,11 +47,11 @@ width: 246px; height: @contents-menu-item-height; - .box-shadow(0 0 0 1px @border-regular-control); + .box-shadow(0 0 0 1px var(--border-regular-control)); &:hover, &.selected { - .box-shadow(0 0 0 2px @highlight-button-pressed); + .box-shadow(0 0 0 2px var(--highlight-button-pressed)); } } @@ -59,7 +59,7 @@ background-color: transparent; div { - .box-shadow(0 0 0 2px @highlight-button-pressed); + .box-shadow(0 0 0 2px var(--highlight-button-pressed)); } } } @@ -102,7 +102,7 @@ display: none !important; } &, &:hover, &:focus { - background-color: @highlight-button-pressed; + background-color: var(--highlight-button-pressed); color: @dropdown-link-active-color; span.color { border-color: rgba(255,255,255,0.7); @@ -123,7 +123,7 @@ opacity: 0.5; &:hover { - .box-shadow(0 0 0 1px @border-regular-control); + .box-shadow(0 0 0 1px var(--border-regular-control)); } } } @@ -173,13 +173,13 @@ #control-settings-system-color > a.selected, #control-settings-system-color > a:hover { span { - outline: 1px solid @icon-normal; - border: 1px solid @background-normal; + outline: 1px solid var(--icon-normal); + border: 1px solid var(--background-normal); } } .item-equation { - border: 1px solid @border-regular-control; + border: 1px solid var(--border-regular-control); .background-ximage-v2('toolbar/math.png', 1500px, @commonimage: true); } @@ -187,12 +187,12 @@ cursor: default; position: relative; padding: 14px 11px; - border-left: 1px solid @border-regular-control; - border-top: 1px solid @border-regular-control; + border-left: 1px solid var(--border-regular-control); + border-top: 1px solid var(--border-regular-control); } .save-style-link { - border-bottom: 1px dotted @text-secondary; + border-bottom: 1px dotted var(--text-secondary); cursor: pointer; margin-left: 22px; } @@ -236,6 +236,6 @@ #special-paste-container { position: absolute; z-index: @zindex-dropdown - 20; - background-color: @background-toolbar; - border: 1px solid @border-regular-control; + background-color: var(--background-toolbar); + border: 1px solid var(--border-regular-control); } \ No newline at end of file diff --git a/apps/presentationeditor/main/resources/less/app.less b/apps/presentationeditor/main/resources/less/app.less index 7d0d3f0c7..0eb4416c6 100644 --- a/apps/presentationeditor/main/resources/less/app.less +++ b/apps/presentationeditor/main/resources/less/app.less @@ -150,7 +150,7 @@ .slidenum-div { background-color: @body-bg; - color: @text-normal; + color: var(--text-normal); padding: 5px 12px; border: 1px solid rgba(0, 0, 0, 0.15); .box-shadow(0 6px 12px rgba(0, 0, 0, 0.175)); diff --git a/apps/presentationeditor/main/resources/less/document-preview.less b/apps/presentationeditor/main/resources/less/document-preview.less index 80a151c48..980882882 100644 --- a/apps/presentationeditor/main/resources/less/document-preview.less +++ b/apps/presentationeditor/main/resources/less/document-preview.less @@ -3,7 +3,7 @@ } .preview-controls { display: table; - background: @background-toolbar; + background: var(--background-toolbar); height: 35px; z-index: 10; opacity: 0.2; diff --git a/apps/presentationeditor/main/resources/less/layout.less b/apps/presentationeditor/main/resources/less/layout.less index ad91dad2c..0461e1fb6 100644 --- a/apps/presentationeditor/main/resources/less/layout.less +++ b/apps/presentationeditor/main/resources/less/layout.less @@ -2,7 +2,7 @@ body { width: 100%; height: 100%; .user-select(none); - color: @text-normal; + color: var(--text-normal); &.safari { position: absolute; @@ -50,7 +50,7 @@ label { top:0; right: 0; bottom: 0; - background-color: @background-toolbar; + background-color: var(--background-toolbar); overflow: hidden; } diff --git a/apps/presentationeditor/main/resources/less/leftmenu.less b/apps/presentationeditor/main/resources/less/leftmenu.less index 5e440103a..e57b96285 100644 --- a/apps/presentationeditor/main/resources/less/leftmenu.less +++ b/apps/presentationeditor/main/resources/less/leftmenu.less @@ -6,7 +6,7 @@ overflow: hidden; .tool-menu-btns { - border-right: 1px solid @border-toolbar; + border-right: 1px solid var(--border-toolbar); } } } @@ -17,8 +17,8 @@ border-right: 0 none; &.move { - border-left: 1px solid @border-toolbar; - border-right: 1px solid @border-toolbar; + border-left: 1px solid var(--border-toolbar); + border-right: 1px solid var(--border-toolbar); opacity: 0.4; } } @@ -39,7 +39,7 @@ .left-panel { padding-left: 40px; height: 100%; - border-right: 1px solid @border-toolbar; + border-right: 1px solid var(--border-toolbar); #left-panel-chat { height: 100%; @@ -57,7 +57,7 @@ top: 0; position: absolute; z-index: @zindex-dropdown - 5; - background-color: @background-toolbar; + background-color: var(--background-toolbar); overflow: hidden; } @@ -91,8 +91,8 @@ .panel-menu { width: 260px; float: left; - border-right: 1px solid @border-toolbar; - background-color: @background-toolbar; + border-right: 1px solid var(--border-toolbar); + background-color: var(--background-toolbar); li { list-style: none; @@ -103,12 +103,12 @@ margin-bottom: 3px; &:hover { - background-color: @highlight-button-hover; + background-color: var(--highlight-button-hover); } &.active { outline: 0; - background-color: @highlight-button-pressed; + background-color: var(--highlight-button-pressed); > a { color: #fff; @@ -191,7 +191,7 @@ .flex-settings { &.bordered { - border-bottom: 1px solid @border-regular-control; + border-bottom: 1px solid var(--border-regular-control); } overflow: hidden; position: relative; @@ -313,7 +313,7 @@ &:hover, &.over { - background-color: @background-toolbar; + background-color: var(--background-toolbar); } .recent-icon { @@ -354,7 +354,7 @@ } .dataview { - border-right: 1px solid @border-toolbar; + border-right: 1px solid var(--border-toolbar); & > div:not([class^=ps-scrollbar]) { display: block; @@ -368,11 +368,11 @@ &:not(.header-name) { &:hover, &.over { - background-color: @background-toolbar; + background-color: var(--background-toolbar); } &.selected { - background-color: @highlight-button-pressed; + background-color: var(--highlight-button-pressed); color: @dropdown-link-active-color; } } diff --git a/apps/presentationeditor/main/resources/less/rightmenu.less b/apps/presentationeditor/main/resources/less/rightmenu.less index 859a2f985..7694a1b0f 100644 --- a/apps/presentationeditor/main/resources/less/rightmenu.less +++ b/apps/presentationeditor/main/resources/less/rightmenu.less @@ -2,8 +2,8 @@ .tool-menu.right { .tool-menu-btns { position: absolute; - border-left: 1px solid @border-toolbar; - background-color: @background-toolbar; + border-left: 1px solid var(--border-toolbar); + background-color: var(--background-toolbar); right: 0; overflow: hidden; } @@ -16,7 +16,7 @@ padding: 0 10px 0 15px; position: relative; overflow: hidden; - border-left: 1px solid @border-toolbar; + border-left: 1px solid var(--border-toolbar); line-height: 15px; } @@ -70,7 +70,7 @@ width: 100%; resize: none; margin-bottom: 5px; - border: 1px solid @border-toolbar; + border: 1px solid var(--border-toolbar); height: 100%; &.disabled { @@ -188,7 +188,7 @@ button:active:not(.disabled) .btn-change-shape {background-position: -56px - &:hover, &.over { - background-color: @highlight-button-hover; + background-color: var(--highlight-button-hover); .caret { display: inline-block; diff --git a/apps/presentationeditor/main/resources/less/statusbar.less b/apps/presentationeditor/main/resources/less/statusbar.less index b6c7431a1..ce9ec3214 100644 --- a/apps/presentationeditor/main/resources/less/statusbar.less +++ b/apps/presentationeditor/main/resources/less/statusbar.less @@ -2,12 +2,12 @@ display: table; padding: 2px; height: 25px; - background-color: @background-toolbar; - .box-inner-shadow(0 1px 0 @border-toolbar); + background-color: var(--background-toolbar); + .box-inner-shadow(0 1px 0 var(--border-toolbar)); .status-label { font-weight: bold; - color: @text-normal; + color: var(--text-normal); white-space: nowrap; position: relative; top: 1px; @@ -173,7 +173,7 @@ height: 12px; display: inline-block; vertical-align: middle; - border: 1px solid @border-toolbar; + border: 1px solid var(--border-toolbar); } .name { diff --git a/apps/presentationeditor/main/resources/less/toolbar.less b/apps/presentationeditor/main/resources/less/toolbar.less index 5ff8e21e3..1e37704a5 100644 --- a/apps/presentationeditor/main/resources/less/toolbar.less +++ b/apps/presentationeditor/main/resources/less/toolbar.less @@ -25,7 +25,7 @@ &:hover, &.selected { .layout > div:first-child { - .box-shadow(0 0 0 2px @highlight-button-pressed); + .box-shadow(0 0 0 2px var(--highlight-button-pressed)); } } } @@ -76,7 +76,7 @@ display: none !important; } &, &:hover, &:focus { - background-color: @highlight-button-pressed; + background-color: var(--highlight-button-pressed); color: @dropdown-link-active-color; span.color { border-color: rgba(255,255,255,0.7); @@ -118,7 +118,7 @@ } .item-equation { - border: 1px solid @border-regular-control; + border: 1px solid var(--border-regular-control); .background-ximage-v2('toolbar/math.png', 1500px); } @@ -131,8 +131,8 @@ #special-paste-container { position: absolute; z-index: @zindex-dropdown - 20; - background-color: @background-toolbar; - border: 1px solid @border-regular-control; + background-color: var(--background-toolbar); + border: 1px solid var(--border-regular-control); } .item-theme { diff --git a/apps/spreadsheeteditor/main/resources/less/celleditor.less b/apps/spreadsheeteditor/main/resources/less/celleditor.less index a8b39714e..aec63ecdd 100644 --- a/apps/spreadsheeteditor/main/resources/less/celleditor.less +++ b/apps/spreadsheeteditor/main/resources/less/celleditor.less @@ -1,14 +1,14 @@ #cell-editing-box { - border-bottom: solid 1px @border-toolbar; - border-left: solid 1px @border-toolbar; + border-bottom: solid 1px var(--border-toolbar); + border-left: solid 1px var(--border-toolbar); min-height: 20px; background-color: #fff; .ce-group-name { float: left; height: 20px; - border-bottom: 1px solid @border-toolbar; - background-color: @background-toolbar; + border-bottom: 1px solid var(--border-toolbar); + background-color: var(--background-toolbar); #ce-cell-name { width: 100px; @@ -17,12 +17,12 @@ vertical-align: top; display: inline-block; border: 0 none; - border-right: 1px solid @border-toolbar; + border-right: 1px solid var(--border-toolbar); transition: none; -webkit-transition: none; &[disabled] { - color: @border-preview-select; + color: var(--border-preview-select); opacity: 0.5; } } @@ -31,7 +31,7 @@ display: inline-block; position: absolute; left: 80px; - background-color: @background-toolbar; + background-color: var(--background-toolbar); button { background-color: #fff; @@ -75,7 +75,7 @@ padding-left: 1px; margin: 0 16px 0 120px; height: 100%; - border-left: 1px solid @border-toolbar; + border-left: 1px solid var(--border-toolbar); #ce-cell-content { height: 100%; @@ -87,7 +87,7 @@ padding-bottom: 0; &[disabled] { - color: @border-preview-select; + color: var(--border-preview-select); opacity: 0.5; } } @@ -102,8 +102,8 @@ border-bottom: 0 none; &.move { - border-top: 1px solid @border-toolbar; - border-bottom: 1px solid @border-toolbar; + border-top: 1px solid var(--border-toolbar); + border-bottom: 1px solid var(--border-toolbar); opacity: 0.4; } } diff --git a/apps/spreadsheeteditor/main/resources/less/filterdialog.less b/apps/spreadsheeteditor/main/resources/less/filterdialog.less index efbf4c38f..b9966acc3 100644 --- a/apps/spreadsheeteditor/main/resources/less/filterdialog.less +++ b/apps/spreadsheeteditor/main/resources/less/filterdialog.less @@ -21,9 +21,9 @@ .item { &.selected { - background-color: @highlight-button-hover; - border-color: @highlight-button-hover; - color: @text-normal; + background-color: var(--highlight-button-hover); + border-color: var(--highlight-button-hover); + color: var(--text-normal); border-style: solid; border-width: 1px 0; } @@ -94,7 +94,7 @@ } &.border { - border: 1px solid @border-regular-control; + border: 1px solid var(--border-regular-control); .border-radius(1px); width: 22px; height: 22px; diff --git a/apps/spreadsheeteditor/main/resources/less/layout.less b/apps/spreadsheeteditor/main/resources/less/layout.less index c1d710dc5..77c670812 100644 --- a/apps/spreadsheeteditor/main/resources/less/layout.less +++ b/apps/spreadsheeteditor/main/resources/less/layout.less @@ -2,7 +2,7 @@ body { width: 100%; height: 100%; .user-select(none); - color: @text-normal; + color: var(--text-normal); &.safari { position: absolute; @@ -33,7 +33,7 @@ label { top:0; right: 0; bottom: 0; - background-color: @background-toolbar; + background-color: var(--background-toolbar); overflow: hidden; } @@ -52,8 +52,8 @@ label { } #editor_sdk { - border-top: 1px solid @border-toolbar; - border-left: 1px solid @border-toolbar; + border-top: 1px solid var(--border-toolbar); + border-left: 1px solid var(--border-toolbar); } .layout-resizer { diff --git a/apps/spreadsheeteditor/main/resources/less/leftmenu.less b/apps/spreadsheeteditor/main/resources/less/leftmenu.less index 0e00ca34f..b659ae0cb 100644 --- a/apps/spreadsheeteditor/main/resources/less/leftmenu.less +++ b/apps/spreadsheeteditor/main/resources/less/leftmenu.less @@ -6,7 +6,7 @@ overflow: hidden; .tool-menu-btns { - border-right: 1px solid @border-toolbar; + border-right: 1px solid var(--border-toolbar); } } } @@ -17,8 +17,8 @@ border-right: 0 none; &.move { - border-left: 1px solid @border-toolbar; - border-right: 1px solid @border-toolbar; + border-left: 1px solid var(--border-toolbar); + border-right: 1px solid var(--border-toolbar); opacity: 0.4; } } @@ -39,7 +39,7 @@ .left-panel { padding-left: 40px; height: 100%; - border-right: 1px solid @border-toolbar; + border-right: 1px solid var(--border-toolbar); #left-panel-chat { height: 100%; @@ -57,7 +57,7 @@ top: 0; position: absolute; z-index: @zindex-dropdown - 5; - background-color: @background-toolbar; + background-color: var(--background-toolbar); overflow: hidden; } @@ -91,8 +91,8 @@ .panel-menu { width: 260px; float: left; - border-right: 1px solid @border-toolbar; - background-color: @background-toolbar; + border-right: 1px solid var(--border-toolbar); + background-color: var(--background-toolbar); li { list-style: none; @@ -103,12 +103,12 @@ margin-bottom: 3px; &:hover:not(.disabled) { - background-color: @highlight-button-hover; + background-color: var(--highlight-button-hover); } &.active:not(.disabled) { outline: 0; - background-color: @highlight-button-pressed; + background-color: var(--highlight-button-pressed); > a { color: #fff; @@ -117,7 +117,7 @@ &.disabled > a { cursor: default; - color: @border-regular-control; + color: var(--border-regular-control); } } @@ -181,7 +181,7 @@ .flex-settings { &.bordered { - border-bottom: 1px solid @border-regular-control; + border-bottom: 1px solid var(--border-regular-control); } overflow: hidden; position: relative; @@ -209,7 +209,7 @@ #id-settings-menu { .dataview { - border-right: 1px solid @border-toolbar; + border-right: 1px solid var(--border-toolbar); & > div:not([class^=ps-scrollbar]) { display: block; @@ -232,11 +232,11 @@ &:hover, &.over { - background-color: @background-toolbar; + background-color: var(--background-toolbar); } &.selected { - background-color: @highlight-button-pressed; + background-color: var(--highlight-button-pressed); color: @dropdown-link-active-color; .settings-icon { @@ -377,7 +377,7 @@ &:hover, &.over { - background-color: @background-toolbar; + background-color: var(--background-toolbar); } .recent-icon { @@ -418,7 +418,7 @@ } .dataview { - border-right: 1px solid @border-toolbar; + border-right: 1px solid var(--border-toolbar); & > div:not([class^=ps-scrollbar]) { display: block; @@ -432,11 +432,11 @@ &:not(.header-name) { &:hover, &.over { - background-color: @background-toolbar; + background-color: var(--background-toolbar); } &.selected { - background-color: @highlight-button-pressed; + background-color: var(--highlight-button-pressed); color: @dropdown-link-active-color; } } diff --git a/apps/spreadsheeteditor/main/resources/less/rightmenu.less b/apps/spreadsheeteditor/main/resources/less/rightmenu.less index f091d0a1b..5e6d5e74f 100644 --- a/apps/spreadsheeteditor/main/resources/less/rightmenu.less +++ b/apps/spreadsheeteditor/main/resources/less/rightmenu.less @@ -2,8 +2,8 @@ .tool-menu.right { .tool-menu-btns { position: absolute; - border-left: 1px solid @border-toolbar; - background-color: @background-toolbar; + border-left: 1px solid var(--border-toolbar); + background-color: var(--background-toolbar); right: 0; overflow: hidden; } @@ -16,7 +16,7 @@ padding: 0 10px 0 15px; position: relative; overflow: hidden; - border-left: 1px solid @border-toolbar; + border-left: 1px solid var(--border-toolbar); line-height: 15px; } @@ -70,7 +70,7 @@ width: 100%; resize: none; margin-bottom: 5px; - border: 1px solid @border-toolbar; + border: 1px solid var(--border-toolbar); height: 100%; &.disabled { @@ -258,7 +258,7 @@ button:active:not(.disabled) .btn-change-shape {background-position: -56px - &:hover, &.over { - background-color: @highlight-button-hover; + background-color: var(--highlight-button-hover); .caret { display: inline-block; diff --git a/apps/spreadsheeteditor/main/resources/less/statusbar.less b/apps/spreadsheeteditor/main/resources/less/statusbar.less index cc4d6c946..34191ce70 100644 --- a/apps/spreadsheeteditor/main/resources/less/statusbar.less +++ b/apps/spreadsheeteditor/main/resources/less/statusbar.less @@ -1,8 +1,8 @@ .statusbar { padding: 0 2px 0; height: 25px; - background-color: @background-toolbar; - .box-inner-shadow(0 1px 0 @border-toolbar); + background-color: var(--background-toolbar); + .box-inner-shadow(0 1px 0 var(--border-toolbar)); z-index: 500; #status-tabs-scroll { @@ -26,7 +26,7 @@ text-align: center; &.disabled { - color: @border-preview-select; + color: var(--border-preview-select); cursor: default; } } @@ -96,7 +96,7 @@ height: 12px; display: inline-block; vertical-align: middle; - border: 1px solid @border-toolbar; + border: 1px solid var(--border-toolbar); } .name { @@ -114,8 +114,8 @@ #status-addtabs-box { float: left; padding: 3px 8px 0 8px; - border-left: 1px solid @border-toolbar; - border-right: 1px solid @border-toolbar; + border-left: 1px solid var(--border-toolbar); + border-right: 1px solid var(--border-toolbar); height: 25px; } @@ -158,7 +158,7 @@ display: flex; > li { - background-color: @background-toolbar; + background-color: var(--background-toolbar); &:first-of-type { span { @@ -178,15 +178,15 @@ padding: 0 10px 0; line-height: 24px; margin-right: -1px; - background-color: @background-toolbar; + background-color: var(--background-toolbar); outline: none; - border-left: 1px solid @border-toolbar; - border-right: 1px solid @border-toolbar; - border-top: 1px solid @border-toolbar; + border-left: 1px solid var(--border-toolbar); + border-right: 1px solid var(--border-toolbar); + border-top: 1px solid var(--border-toolbar); &:hover { - border-top-color: @border-toolbar; - border-bottom-color: @border-toolbar; + border-top-color: var(--border-toolbar); + border-bottom-color: var(--border-toolbar); color: @black !important; } } @@ -259,7 +259,7 @@ &:not(.active) { > span { - color: @border-preview-select; + color: var(--border-preview-select); } } @@ -272,14 +272,14 @@ } > span { - border-left: 2px solid @text-normal; + border-left: 2px solid var(--text-normal); padding-left: 9px; } &.right { > span { - border-left: 1px solid @border-toolbar; - border-right: 2px solid @text-normal; + border-left: 1px solid var(--border-toolbar); + border-right: 2px solid var(--text-normal); padding-right: 9px; padding-left: 10px; } @@ -318,7 +318,7 @@ .status-label { font-weight: bold; - color: @text-normal; + color: var(--text-normal); white-space: nowrap; } @@ -398,7 +398,7 @@ width: 36px; height: 100%; opacity: 0; - background-color: @background-toolbar; + background-color: var(--background-toolbar); z-index: @zindex-modal - 1; } diff --git a/apps/spreadsheeteditor/main/resources/less/toolbar.less b/apps/spreadsheeteditor/main/resources/less/toolbar.less index 48f3e06a5..333969131 100644 --- a/apps/spreadsheeteditor/main/resources/less/toolbar.less +++ b/apps/spreadsheeteditor/main/resources/less/toolbar.less @@ -64,7 +64,7 @@ display: none !important; } &, &:hover, &:focus { - background-color: @highlight-button-pressed; + background-color: var(--highlight-button-pressed); color: @dropdown-link-active-color; span.color { border-color: rgba(255,255,255,0.7); @@ -136,7 +136,7 @@ } .item-equation { - border: 1px solid @border-regular-control; + border: 1px solid var(--border-regular-control); .background-ximage-v2('toolbar/math.png', 1500px); } @@ -144,8 +144,8 @@ #autocorrect-paste-container { position: absolute; z-index: @zindex-dropdown - 20; - background-color: @background-toolbar; - border: 1px solid @border-regular-control; + background-color: var(--background-toolbar); + border: 1px solid var(--border-regular-control); } #slot-field-fontname {