From b318613837d9314cae65549f7e0c5c9e81838899 Mon Sep 17 00:00:00 2001 From: ShimaginAndrey Date: Sat, 6 Nov 2021 13:11:18 +0300 Subject: [PATCH 1/8] Adding a dark style --- .../common/mobile/resources/less/_mixins.less | 2 +- .../resources/less/colors-table-dark.less | 8 +- .../mobile/resources/less/colors-table.less | 8 +- .../mobile/resources/less/comments.less | 6 +- .../mobile/resources/less/common-ios.less | 32 +-- .../resources/less/common-material.less | 40 ++-- apps/common/mobile/resources/less/common.less | 6 +- .../mobile/resources/less/dataview.less | 2 +- apps/common/mobile/resources/less/icons.less | 4 +- .../resources/less/ios/_collaboration.less | 6 +- .../resources/less/ios/_color-palette.less | 4 +- .../mobile/resources/less/ios/_dataview.less | 2 +- .../mobile/resources/less/ios/_listview.less | 6 +- .../mobile/resources/less/ios/icons.less | 6 +- .../less/material/_collaboration.less | 6 +- .../less/material/_color-palette.less | 6 +- .../resources/less/material/_dataview.less | 2 +- .../resources/less/material/_listview.less | 2 +- .../less/material/_sailfish_fix.less | 24 +-- .../mobile/resources/less/material/icons.less | 8 +- .../mobile/src/less/app-material.less | 2 +- apps/documenteditor/mobile/src/less/app.less | 5 +- .../mobile/src/less/icons-ios.less | 182 +++++++++--------- .../mobile/src/less/icons-material.less | 176 ++++++++--------- .../mobile/src/less/app.less | 2 +- .../mobile/src/less/app.less | 2 +- 26 files changed, 279 insertions(+), 270 deletions(-) diff --git a/apps/common/mobile/resources/less/_mixins.less b/apps/common/mobile/resources/less/_mixins.less index 139fa586b..dda2a2d7f 100644 --- a/apps/common/mobile/resources/less/_mixins.less +++ b/apps/common/mobile/resources/less/_mixins.less @@ -1,5 +1,5 @@ // Encoded SVG Background -.encoded-svg-mask(@svg, @color: @themeColor) { +.encoded-svg-mask(@svg, @color: @brandColor) { @url: `encodeURIComponent(@{svg})`; background-color: @color; -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,@{url}"); diff --git a/apps/common/mobile/resources/less/colors-table-dark.less b/apps/common/mobile/resources/less/colors-table-dark.less index f2c790eff..9fa78999d 100644 --- a/apps/common/mobile/resources/less/colors-table-dark.less +++ b/apps/common/mobile/resources/less/colors-table-dark.less @@ -23,8 +23,12 @@ --brand-secondary: #FFAF49; --brand-text-on-brand: #000; - --toolbar-background: #232323; - --toolbar-icons: #208BFF; + --toolbar-de-background: #232323; + --toolbar-pe-background: #232323; + --toolbar-sse-background: #232323; + --toolbar-de-icons: #208BFF; + --toolbar-pe-icons: #FF4A31; + --toolbar-sse-icons: #34C759; --toolbar-segment: #FFF; --toolbar-tab-normal: #757575; diff --git a/apps/common/mobile/resources/less/colors-table.less b/apps/common/mobile/resources/less/colors-table.less index 5addf7759..4bd2ee5ad 100644 --- a/apps/common/mobile/resources/less/colors-table.less +++ b/apps/common/mobile/resources/less/colors-table.less @@ -21,8 +21,12 @@ --fill-black: #000; --fill-white: #FFF; - --toolbar-background: #446995; - --toolbar-icons: #FFF; + --toolbar-de-background: #446995; + --toolbar-pe-background: #AA5252; + --toolbar-sse-background: #40865C; + --toolbar-de-icons: #FFF; + --toolbar-pe-icons: #FFF; + --toolbar-sse-icons: #FFF; --toolbar-segment: #446995; --toolbar-tab-normal:fade(#FFF, 50%); diff --git a/apps/common/mobile/resources/less/comments.less b/apps/common/mobile/resources/less/comments.less index 40d30d9ce..846a6b39f 100644 --- a/apps/common/mobile/resources/less/comments.less +++ b/apps/common/mobile/resources/less/comments.less @@ -86,8 +86,8 @@ margin: 0; } .comment-quote { - color: @themeColor; - border-left: 1px solid @themeColor; + color: @brandColor; + border-left: 1px solid @brandColor; padding-left: 10px; padding-right: 16px; margin: 5px 0; @@ -146,7 +146,7 @@ background-color: @white; box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.2), 0px 4px 5px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14); .link { - --f7-toolbar-link-color: @themeColor; + --f7-toolbar-link-color: @brandColor; } .toolbar-inner { padding: 0 16px; diff --git a/apps/common/mobile/resources/less/common-ios.less b/apps/common/mobile/resources/less/common-ios.less index 324c03a27..33beb9354 100644 --- a/apps/common/mobile/resources/less/common-ios.less +++ b/apps/common/mobile/resources/less/common-ios.less @@ -5,8 +5,8 @@ --f7-list-item-border-color: @item-border-color; @darkGreen: #40865c; - --f7-navbar-link-color: @themeColor; - --f7-subnavbar-link-color: @themeColor; + --f7-navbar-link-color: @brandColor; + --f7-subnavbar-link-color: @brandColor; --f7-navbar-text-color: @black; --f7-navbar-title-line-height: 44px; --f7-navbar-link-line-height: 44px; @@ -15,15 +15,15 @@ --f7-list-bg-color: @white; --f7-navbar-bg-color: #f7f7f8; - --f7-tabbar-link-inactive-color: @themeColor; + --f7-tabbar-link-inactive-color: @brandColor; - --f7-radio-active-color: @themeColor; - --f7-toggle-active-color: @themeColor; - --f7-range-bar-active-bg-color: @themeColor; + --f7-radio-active-color: @brandColor; + --f7-toggle-active-color: @brandColor; + --f7-range-bar-active-bg-color: @brandColor; - --f7-list-button-text-color: @themeColor; + --f7-list-button-text-color: @brandColor; - --f7-dialog-button-text-color: @themeColor; + --f7-dialog-button-text-color: @brandColor; // Main Toolbar #editor-navbar.navbar .right a + a, @@ -289,7 +289,7 @@ position: relative; overflow: hidden; -webkit-box-flex: 1; - border: 1px solid @themeColor; + border: 1px solid @brandColor; text-decoration: none; text-align: center; margin: 0; @@ -311,15 +311,15 @@ border-radius: 0 5px 5px 0; } &.tab-link-active { - background: @themeColor; + background: @brandColor; color: @white; } } } .button { - border: 1px solid @themeColor; - color: @themeColor; + border: 1px solid @brandColor; + color: @brandColor; text-decoration: none; text-align: center; display: block; @@ -339,7 +339,7 @@ cursor: pointer; outline: 0; &.active { - background: @themeColor; + background: @brandColor; color: @white; i.icon { background-color: @white; @@ -348,7 +348,7 @@ } .button-fill { - color: @themeColor; + color: @brandColor; background-color: @white; } @@ -466,7 +466,7 @@ height: 28px; } .buttons-row-replace a { - color: @themeColor; + color: @brandColor; } } @@ -556,7 +556,7 @@ height: 57px; line-height: 57px; font-size: 20px; - color: @themeColor; + color: @brandColor; white-space: normal; text-overflow: ellipsis; } diff --git a/apps/common/mobile/resources/less/common-material.less b/apps/common/mobile/resources/less/common-material.less index f2ef4e368..d1ea30ef8 100644 --- a/apps/common/mobile/resources/less/common-material.less +++ b/apps/common/mobile/resources/less/common-material.less @@ -1,5 +1,5 @@ -.device-android { +.device-android, .device-android .theme-type-dark{ @tabLinkColor: rgba(255,255,255,.7); @red: #f44336; @white: #fff; @@ -10,22 +10,22 @@ --f7-navbar-shadow-image: none; - --f7-theme-color: @themeColor; + --f7-theme-color: @brandColor; - --f7-navbar-bg-color: @themeColor; + --f7-navbar-bg-color: @toolbar-background; --f7-navbar-link-color: @navBarIconColor; --f7-navbar-text-color: @navBarIconColor; --f7-navbar-height: 56px; - --f7-subnavbar-bg-color: @themeColor; + --f7-subnavbar-bg-color: @toolbar-background; --f7-subnavbar-link-color: @navBarIconColor; --f7-subnavbar-text-color: @navBarIconColor; --f7-subnavbar-height: 56px; - --f7-radio-active-color: @themeColor; - --f7-toggle-active-color: @themeColor; - --f7-range-bar-active-bg-color: @themeColor; - --f7-range-knob-color: @themeColor; + --f7-radio-active-color: @brandColor; + --f7-toggle-active-color: @brandColor; + --f7-range-bar-active-bg-color: @brandColor; + --f7-range-knob-color: @brandColor; --f7-range-knob-size: 16px; --f7-link-highlight-color: transparent; @@ -41,10 +41,10 @@ } } - --f7-input-focused-border-color: @themeColor; - --f7-label-focused-text-color: @themeColor; + --f7-input-focused-border-color: @brandColor; + --f7-label-focused-text-color: @brandColor; - --f7-dialog-button-text-color: @themeColor; + --f7-dialog-button-text-color: @brandColor; .navbar { --f7-touch-ripple-color: @touchColor; @@ -102,8 +102,8 @@ } } .button { - --f7-button-text-color: @themeColor; - color: @themeColor; + --f7-button-text-color: @brandColor; + color: @brandColor; text-align: center; display: block; border-radius: 2px; @@ -132,7 +132,7 @@ .button-fill { color: @white; - // background-color: @themeColor; + // background-color: @brandColor; background-color: transparent; } @@ -142,7 +142,7 @@ .button-red { color: @white; - background-color: @red; + background-color:@text-error; } .buttons-list { @@ -168,8 +168,8 @@ } } .button-fill .list-button { - background-color: @themeColor; - color: @white; + background-color: @brandColor; + color: @brand-text-on-brand; height: 36px; text-align: center; line-height: 36px; @@ -184,7 +184,7 @@ box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24); } .button-red .list-button { - background-color: @red; + background-color: @text-error; } // Tabs .tab-buttons { @@ -281,7 +281,7 @@ } &.active { color: @white; - background-color: @themeColor; + background-color: @brandColor; i.icon { background-color: @white; } @@ -377,7 +377,7 @@ #color-picker { .right-block { .button-round { - background-color: @themeColor; + background-color: @brandColor; } } } diff --git a/apps/common/mobile/resources/less/common.less b/apps/common/mobile/resources/less/common.less index 8806ec6f1..553c5b6ea 100644 --- a/apps/common/mobile/resources/less/common.less +++ b/apps/common/mobile/resources/less/common.less @@ -103,7 +103,7 @@ .thumb { width: 100%; height: 100%; - background-color: @themeColor; + background-color: @brandColor; } } } @@ -379,7 +379,7 @@ } &.active { .color-auto { - box-shadow: 0 0 0 1px @white, 0 0 0 4px @themeColor; + box-shadow: 0 0 0 1px @white, 0 0 0 4px @brandColor; border-radius: 1px; } } @@ -404,7 +404,7 @@ position: absolute; width: 100%; height: 100%; - box-shadow: 0 0 0 1px @white, 0 0 0 4px @themeColor; + box-shadow: 0 0 0 1px @white, 0 0 0 4px @brandColor; z-index: 1; border-radius: 1px; } diff --git a/apps/common/mobile/resources/less/dataview.less b/apps/common/mobile/resources/less/dataview.less index 104d04836..8ca304ead 100644 --- a/apps/common/mobile/resources/less/dataview.less +++ b/apps/common/mobile/resources/less/dataview.less @@ -25,7 +25,7 @@ height: 22px; right: -5px; bottom: -5px; - .encoded-svg-background(''); + .encoded-svg-background(''); } } } \ No newline at end of file diff --git a/apps/common/mobile/resources/less/icons.less b/apps/common/mobile/resources/less/icons.less index 638f99f5e..bb5757b75 100644 --- a/apps/common/mobile/resources/less/icons.less +++ b/apps/common/mobile/resources/less/icons.less @@ -23,11 +23,11 @@ i.icon { &.icon-collaboration { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-cancellation { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-background(''); } } diff --git a/apps/common/mobile/resources/less/ios/_collaboration.less b/apps/common/mobile/resources/less/ios/_collaboration.less index d958e12f4..a90bd564e 100644 --- a/apps/common/mobile/resources/less/ios/_collaboration.less +++ b/apps/common/mobile/resources/less/ios/_collaboration.less @@ -205,8 +205,8 @@ } } .comment-quote { - color: @themeColor; - border-left: 1px solid @themeColor; + color: @brandColor; + border-left: 1px solid @brandColor; padding-left: 10px; padding-right: 16px; margin: 5px 0; @@ -380,7 +380,7 @@ } #done-comment { - color: @themeColor; + color: @brandColor; } .page-add-comment { background-color: #FFFFFF; diff --git a/apps/common/mobile/resources/less/ios/_color-palette.less b/apps/common/mobile/resources/less/ios/_color-palette.less index 9e868c0c1..b9c504f21 100644 --- a/apps/common/mobile/resources/less/ios/_color-palette.less +++ b/apps/common/mobile/resources/less/ios/_color-palette.less @@ -15,7 +15,7 @@ position: absolute; width: 100%; height: 100%; - box-shadow: 0 0 0 1px white, 0 0 0 4px @themeColor; + box-shadow: 0 0 0 1px white, 0 0 0 4px @brandColor; z-index: 1; border-radius: 1px; } @@ -166,6 +166,6 @@ } #font-color-auto.active .color-auto { - box-shadow: 0 0 0 1px white, 0 0 0 4px @themeColor; + box-shadow: 0 0 0 1px white, 0 0 0 4px @brandColor; border-radius: 1px; } diff --git a/apps/common/mobile/resources/less/ios/_dataview.less b/apps/common/mobile/resources/less/ios/_dataview.less index 92b849b43..6ddb04406 100644 --- a/apps/common/mobile/resources/less/ios/_dataview.less +++ b/apps/common/mobile/resources/less/ios/_dataview.less @@ -29,7 +29,7 @@ height: 22px; right: -5px; bottom: -5px; - .encoded-svg-background(''); + .encoded-svg-background(''); } } } \ No newline at end of file diff --git a/apps/common/mobile/resources/less/ios/_listview.less b/apps/common/mobile/resources/less/ios/_listview.less index c1ea628bd..9a5d40fe5 100644 --- a/apps/common/mobile/resources/less/ios/_listview.less +++ b/apps/common/mobile/resources/less/ios/_listview.less @@ -24,10 +24,10 @@ } input.field { - color: @themeColor; + color: @brandColor; &.placeholder-color::-webkit-input-placeholder { - color: @themeColor; + color: @brandColor; } &.right { @@ -88,6 +88,6 @@ .list-block { .item-link.list-button { - color: @themeColor; + color: @brandColor; } } \ No newline at end of file diff --git a/apps/common/mobile/resources/less/ios/icons.less b/apps/common/mobile/resources/less/ios/icons.less index 401956832..718212a95 100644 --- a/apps/common/mobile/resources/less/ios/icons.less +++ b/apps/common/mobile/resources/less/ios/icons.less @@ -13,7 +13,7 @@ &.icon-prev { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-background(''); &:after { display: none; } @@ -21,7 +21,7 @@ &.icon-next { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-background(''); &:after { display: none; } @@ -29,7 +29,7 @@ &.icon-edit { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-background(''); } } } diff --git a/apps/common/mobile/resources/less/material/_collaboration.less b/apps/common/mobile/resources/less/material/_collaboration.less index 58fe43f98..e11fbcc2e 100644 --- a/apps/common/mobile/resources/less/material/_collaboration.less +++ b/apps/common/mobile/resources/less/material/_collaboration.less @@ -185,8 +185,8 @@ } } .comment-quote { - color: @themeColor; - border-left: 1px solid @themeColor; + color: @brandColor; + border-left: 1px solid @brandColor; padding-left: 10px; padding-right: 16px; margin: 5px 0; @@ -291,7 +291,7 @@ } a { &.link { - color: @themeColor; + color: @brandColor; font-size: 16px; } } diff --git a/apps/common/mobile/resources/less/material/_color-palette.less b/apps/common/mobile/resources/less/material/_color-palette.less index c6284cf79..ab77c10a0 100644 --- a/apps/common/mobile/resources/less/material/_color-palette.less +++ b/apps/common/mobile/resources/less/material/_color-palette.less @@ -15,7 +15,7 @@ position: absolute; width: 100%; height: 100%; - box-shadow: 0 0 0 1px white, 0 0 0 4px @themeColor; + box-shadow: 0 0 0 1px white, 0 0 0 4px @brandColor; z-index: 1; border-radius: 1px; } @@ -71,7 +71,7 @@ justify-content: center; align-items: center; border-radius: 100px; - background-color: @themeColor; + background-color: @brandColor; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); border-color: transparent; margin-top: 25px; @@ -170,6 +170,6 @@ } } #font-color-auto.active .color-auto { - box-shadow: 0 0 0 1px white, 0 0 0 4px @themeColor; + box-shadow: 0 0 0 1px white, 0 0 0 4px @brandColor; border-radius: 1px; } diff --git a/apps/common/mobile/resources/less/material/_dataview.less b/apps/common/mobile/resources/less/material/_dataview.less index 2c93fe576..fca18dbd7 100644 --- a/apps/common/mobile/resources/less/material/_dataview.less +++ b/apps/common/mobile/resources/less/material/_dataview.less @@ -26,7 +26,7 @@ height: 22px; right: -5px; bottom: -5px; - .encoded-svg-background(''); + .encoded-svg-background(''); } } } \ No newline at end of file diff --git a/apps/common/mobile/resources/less/material/_listview.less b/apps/common/mobile/resources/less/material/_listview.less index b352e3225..ba134cc39 100644 --- a/apps/common/mobile/resources/less/material/_listview.less +++ b/apps/common/mobile/resources/less/material/_listview.less @@ -43,7 +43,7 @@ &.active { color: #fff; - background-color: @themeColor; + background-color: @brandColor; } } } diff --git a/apps/common/mobile/resources/less/material/_sailfish_fix.less b/apps/common/mobile/resources/less/material/_sailfish_fix.less index 71403062c..fa6985cfb 100644 --- a/apps/common/mobile/resources/less/material/_sailfish_fix.less +++ b/apps/common/mobile/resources/less/material/_sailfish_fix.less @@ -22,18 +22,18 @@ .sailfish { - .icon-redefine(icon-text-align-center, ''); - .icon-redefine(icon-text-align-jast, ''); - .icon-redefine(icon-text-align-left, ''); - .icon-redefine(icon-text-align-right, ''); - .icon-redefine(icon-de-indent, ''); - .icon-redefine(icon-in-indent, ''); - .icon-redefine(icon-block-align-left, ''); - .icon-redefine(icon-block-align-center, ''); - .icon-redefine(icon-block-align-right, ''); - .icon-redefine(icon-text-valign-top, ''); - .icon-redefine(icon-text-valign-middle, ''); - .icon-redefine(icon-text-valign-bottom,''); + .icon-redefine(icon-text-align-center, ''); + .icon-redefine(icon-text-align-jast, ''); + .icon-redefine(icon-text-align-left, ''); + .icon-redefine(icon-text-align-right, ''); + .icon-redefine(icon-de-indent, ''); + .icon-redefine(icon-in-indent, ''); + .icon-redefine(icon-block-align-left, ''); + .icon-redefine(icon-block-align-center, ''); + .icon-redefine(icon-block-align-right, ''); + .icon-redefine(icon-text-valign-top, ''); + .icon-redefine(icon-text-valign-middle, ''); + .icon-redefine(icon-text-valign-bottom,''); .item-content.buttons .item-inner > .row .button.active { background-color: @themeColorLight; diff --git a/apps/common/mobile/resources/less/material/icons.less b/apps/common/mobile/resources/less/material/icons.less index 53577e587..7b592e836 100644 --- a/apps/common/mobile/resources/less/material/icons.less +++ b/apps/common/mobile/resources/less/material/icons.less @@ -13,7 +13,7 @@ &.icon-prev { width: 20px; height: 20px; - .encoded-svg-background(''); + .encoded-svg-mask(''); &:after { display: none; } @@ -21,7 +21,7 @@ &.icon-next { width: 20px; height: 20px; - .encoded-svg-background(''); + .encoded-svg-mask(''); &:after { display: none; } @@ -32,12 +32,12 @@ &.icon-collaboration { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask('', @navBarIconColor); } &.icon-edit { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask('', @navBarIconColor); } } } diff --git a/apps/documenteditor/mobile/src/less/app-material.less b/apps/documenteditor/mobile/src/less/app-material.less index b40c69124..27c5ed8af 100644 --- a/apps/documenteditor/mobile/src/less/app-material.less +++ b/apps/documenteditor/mobile/src/less/app-material.less @@ -1,7 +1,7 @@ // Colors @themeColorLight: #a2bdde; -@navBarIconColor: #fff; +@navBarIconColor: var(--toolbar-de-icons); .device-android { diff --git a/apps/documenteditor/mobile/src/less/app.less b/apps/documenteditor/mobile/src/less/app.less index 4a52d3458..43cf9841d 100644 --- a/apps/documenteditor/mobile/src/less/app.less +++ b/apps/documenteditor/mobile/src/less/app.less @@ -1,10 +1,11 @@ -@themeColor: #446995; @import '../../../../../vendor/framework7-react/node_modules/framework7/less/mixins.less'; @import '../../../../common/mobile/resources/less/_mixins.less'; @import '../../../../common/mobile/resources/less/colors-table.less'; @import '../../../../common/mobile/resources/less/colors-table-dark.less'; +@brandColor: var(--brand-word); +@toolbar-background: var(--toolbar-de-background); @import '../../../../common/mobile/resources/less/collaboration.less'; @import '../../../../common/mobile/resources/less/common.less'; @import '../../../../common/mobile/resources/less/common-ios.less'; @@ -48,7 +49,7 @@ // Review .page-review { - --f7-toolbar-link-color: @themeColor; + --f7-toolbar-link-color: @brandColor; .toolbar { background-color: @white; box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2); diff --git a/apps/documenteditor/mobile/src/less/icons-ios.less b/apps/documenteditor/mobile/src/less/icons-ios.less index 05960f7e5..f00919800 100644 --- a/apps/documenteditor/mobile/src/less/icons-ios.less +++ b/apps/documenteditor/mobile/src/less/icons-ios.less @@ -3,83 +3,83 @@ &.icon-undo { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-redo { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-edit-settings { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-plus { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-settings { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-expand-down { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-background(''); } //Settings &.icon-spellcheck { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-search { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-reader { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-doc-setup { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-app-settings { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-download { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-print { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-info { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-help { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-about { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-background(''); } // Download @@ -87,55 +87,55 @@ &.icon-format-docx { width: 30px; height: 30px; - .encoded-svg-background('') + .encoded-svg-background('') } &.icon-format-pdf { width: 30px; height: 30px; - .encoded-svg-background('') + .encoded-svg-background('') } &.icon-format-pdfa { width: 30px; height: 30px; - .encoded-svg-background('') + .encoded-svg-background('') } &.icon-format-txt { width: 24px; height: 24px; - .encoded-svg-background('') + .encoded-svg-background('') } &.icon-format-rtf { width: 24px; height: 24px; - .encoded-svg-background('') + .encoded-svg-background('') } &.icon-format-odt { width: 30px; height: 30px; - .encoded-svg-background('') + .encoded-svg-background('') } &.icon-format-html { width: 30px; height: 30px; - .encoded-svg-background('') + .encoded-svg-background('') } &.icon-format-dotx { width: 30px; height: 30px; - .encoded-svg-background('') + .encoded-svg-background('') } &.icon-format-ott { width: 30px; height: 30px; - .encoded-svg-background('') + .encoded-svg-background('') } @@ -143,234 +143,234 @@ &.icon-text-additional { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-bullets { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-numbers { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-linespacing { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-text-color { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-text-selection { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-background(''); } // Align &.icon-text-align-left { width: 22px; height: 22px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } &.icon-text-align-right { width: 22px; height: 22px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } &.icon-text-align-center { width: 22px; height: 22px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } &.icon-text-align-just { width: 22px; height: 22px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } &.icon-de-indent { width: 22px; height: 22px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } &.icon-in-indent { width: 22px; height: 22px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } // Table &.icon-table-add-column-left { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-table-add-column-right { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-table-add-row-above { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-table-add-row-below { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-table-remove-column { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-table-remove-row { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-background(''); } // Presets of table borders &.icon-table-borders-all { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-table-borders-none { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-table-borders-inner { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-table-borders-outer { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-table-borders-left { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-table-borders-center { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-table-borders-right { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-table-borders-top { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-table-borders-middle { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-table-borders-bottom { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-background(''); } // Reorder &.icon-move-backward { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-move-forward { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-move-background { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-move-foreground { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-background(''); } // Wrap &.icon-wrap-inline { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-wrap-square { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-wrap-tight { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-wrap-through { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-wrap-top-bottom { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-wrap-infront { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-wrap-behind { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-background(''); } // Table Wrap &.icon-wrap-table-inline { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-wrap-table-flow { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-block-align-left { width: 28px; height: 28px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } &.icon-block-align-center { width: 28px; height: 28px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } &.icon-block-align-right { width: 28px; height: 28px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } // Insert link/image-library &.icon-link { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-image-library { width: 22px; @@ -381,104 +381,104 @@ &.icon-add-table { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-add-shape { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-add-image { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-add-other { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-insert-comment { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-pagenumber { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-sectionbreak { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-footnote { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-pagebreak { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-stringbreak { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-background(''); } // Collaboration &.icon-users { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-review { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-review-changes { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-accept-changes { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-reject-changes { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-accept { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-reject { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-next-change { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-prev-change { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-goto { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-background(''); } // Comments @@ -500,7 +500,7 @@ &.icon-insert-comment { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-background(''); } } .tab-link-active { diff --git a/apps/documenteditor/mobile/src/less/icons-material.less b/apps/documenteditor/mobile/src/less/icons-material.less index 03e09345e..37d617525 100644 --- a/apps/documenteditor/mobile/src/less/icons-material.less +++ b/apps/documenteditor/mobile/src/less/icons-material.less @@ -4,68 +4,68 @@ &.icon-undo { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask('', @navBarIconColor); } &.icon-redo { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask('', @navBarIconColor); } &.icon-edit-settings { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask('', @navBarIconColor); } &.icon-plus { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask('', @navBarIconColor); } &.icon-settings { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask('', @navBarIconColor); } &.icon-prev { width: 20px; height: 20px; - .encoded-svg-background(''); + .encoded-svg-mask('', @navBarIconColor); } &.icon-next { width: 20px; height: 20px; - .encoded-svg-background(''); + .encoded-svg-mask('', @navBarIconColor); } &.icon-expand-down { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask('', @fill-white); } // Insert &.icon-add-table { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask('', @navBarIconColor); } &.icon-add-shape { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask('', @navBarIconColor); } &.icon-add-image { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask('', @navBarIconColor); } &.icon-add-other { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask('', @navBarIconColor); } &.icon-search { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } } } @@ -73,68 +73,68 @@ &.icon-plus { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask('', @navBarIconColor); } &.icon-expand-down { width: 17px; height: 17px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-expand-up { width: 17px; height: 17px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } //Settings &.icon-spellcheck { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-search { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-reader { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-doc-setup { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-app-settings { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-download { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-print { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-info { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-help { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-about { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } // Download @@ -142,55 +142,55 @@ &.icon-format-docx { width: 30px; height: 30px; - .encoded-svg-background('') + .encoded-svg-mask('') } &.icon-format-pdf { width: 30px; height: 30px; - .encoded-svg-background('') + .encoded-svg-mask('') } &.icon-format-pdfa { width: 30px; height: 30px; - .encoded-svg-background('') + .encoded-svg-mask('') } &.icon-format-txt { width: 24px; height: 24px; - .encoded-svg-background('') + .encoded-svg-mask('') } &.icon-format-rtf { width: 24px; height: 24px; - .encoded-svg-background('') + .encoded-svg-mask('') } &.icon-format-odt { width: 30px; height: 30px; - .encoded-svg-background('') + .encoded-svg-mask('') } &.icon-format-html { width: 30px; height: 30px; - .encoded-svg-background('') + .encoded-svg-mask('') } &.icon-format-dotx { width: 30px; height: 30px; - .encoded-svg-background('') + .encoded-svg-mask('') } &.icon-format-ott { width: 30px; height: 30px; - .encoded-svg-background('') + .encoded-svg-mask('') } @@ -199,271 +199,271 @@ &.icon-text-align-left { width: 22px; height: 22px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } &.icon-text-align-right { width: 22px; height: 22px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } &.icon-text-align-center { width: 22px; height: 22px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } &.icon-text-align-just { width: 22px; height: 22px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } &.icon-de-indent { width: 22px; height: 22px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } &.icon-in-indent { width: 22px; height: 22px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } // Table &.icon-table-add-column-left { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-table-add-column-right { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-table-add-row-above { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-table-add-row-below { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-table-remove-column { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-table-remove-row { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } // Presets of table borders &.icon-table-borders-all { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-table-borders-none { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-table-borders-inner { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-table-borders-outer { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-table-borders-left { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-table-borders-center { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-table-borders-right { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-table-borders-top { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-table-borders-middle { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-table-borders-bottom { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } // Reorder &.icon-move-backward { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-move-forward { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } - &.icon-move-background { + &.icon-move-mask { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-move-foreground { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } // Table Wrap &.icon-block-align-left { width: 28px; height: 28px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } &.icon-block-align-center { width: 28px; height: 28px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } &.icon-block-align-right { width: 28px; height: 28px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } // Insert link/image-library &.icon-link { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-image-library { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-insert-comment { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-pagenumber { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-sectionbreak { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-footnote { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-pagebreak { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-stringbreak { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } // Collaboration &.icon-users { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-review { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-review-changes { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-accept-changes { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-reject-changes { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-accept { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-reject { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-next-change { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-prev-change { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-goto { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } // Comments &.icon-menu-comment { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-resolve-comment { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-resolve-comment.check { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-done-comment { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-insert-comment { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-done-comment-white { width: 24px; diff --git a/apps/presentationeditor/mobile/src/less/app.less b/apps/presentationeditor/mobile/src/less/app.less index 549cb860b..d1fe52236 100644 --- a/apps/presentationeditor/mobile/src/less/app.less +++ b/apps/presentationeditor/mobile/src/less/app.less @@ -1,5 +1,5 @@ @themeColor: #aa5252; - +@brandColor: var(--brand-slide); @import '../../../../../vendor/framework7-react/node_modules/framework7/less/mixins.less'; @import '../../../../common/mobile/resources/less/_mixins.less'; diff --git a/apps/spreadsheeteditor/mobile/src/less/app.less b/apps/spreadsheeteditor/mobile/src/less/app.less index 6be8afc19..939e09f63 100644 --- a/apps/spreadsheeteditor/mobile/src/less/app.less +++ b/apps/spreadsheeteditor/mobile/src/less/app.less @@ -1,6 +1,6 @@ @themeColor: #40865c; - +@brandColor: var(--brand-cell); @import '../../../../common/mobile/resources/less/variables.less'; @import '../../../../../vendor/framework7-react/node_modules/framework7/less/mixins.less'; From c9aa0168e2088d7108560d3ec5b1c4b7aa783be0 Mon Sep 17 00:00:00 2001 From: ShimaginAndrey Date: Wed, 10 Nov 2021 09:39:21 +0300 Subject: [PATCH 2/8] Edit styles --- .../mobile/resources/less/collaboration.less | 2 - .../resources/less/colors-table-dark.less | 8 +- .../mobile/resources/less/colors-table.less | 8 +- .../mobile/resources/less/comments.less | 2 +- .../mobile/resources/less/common-ios.less | 47 +++-- .../resources/less/common-material.less | 48 +++-- apps/common/mobile/resources/less/common.less | 1 + .../mobile/resources/less/dataview.less | 2 +- apps/common/mobile/resources/less/icons.less | 4 +- .../mobile/resources/less/ios/icons.less | 6 +- .../mobile/resources/less/material/icons.less | 4 +- .../mobile/src/less/app-ios.less | 2 +- .../mobile/src/less/app-material.less | 2 +- apps/documenteditor/mobile/src/less/app.less | 18 +- .../mobile/src/less/icons-ios.less | 180 +++++++++--------- .../mobile/src/less/icons-material.less | 50 ++--- apps/documenteditor/mobile/src/view/app.jsx | 2 +- 17 files changed, 217 insertions(+), 169 deletions(-) diff --git a/apps/common/mobile/resources/less/collaboration.less b/apps/common/mobile/resources/less/collaboration.less index eb0265178..ced00fff9 100644 --- a/apps/common/mobile/resources/less/collaboration.less +++ b/apps/common/mobile/resources/less/collaboration.less @@ -1,8 +1,6 @@ .page.page-users { - background-color: @white; .block-title { text-transform: none; - color: @black; margin-top: 20px; margin-bottom: 20px; font-size: 17px; diff --git a/apps/common/mobile/resources/less/colors-table-dark.less b/apps/common/mobile/resources/less/colors-table-dark.less index 9fa78999d..f2c790eff 100644 --- a/apps/common/mobile/resources/less/colors-table-dark.less +++ b/apps/common/mobile/resources/less/colors-table-dark.less @@ -23,12 +23,8 @@ --brand-secondary: #FFAF49; --brand-text-on-brand: #000; - --toolbar-de-background: #232323; - --toolbar-pe-background: #232323; - --toolbar-sse-background: #232323; - --toolbar-de-icons: #208BFF; - --toolbar-pe-icons: #FF4A31; - --toolbar-sse-icons: #34C759; + --toolbar-background: #232323; + --toolbar-icons: #208BFF; --toolbar-segment: #FFF; --toolbar-tab-normal: #757575; diff --git a/apps/common/mobile/resources/less/colors-table.less b/apps/common/mobile/resources/less/colors-table.less index 4bd2ee5ad..5addf7759 100644 --- a/apps/common/mobile/resources/less/colors-table.less +++ b/apps/common/mobile/resources/less/colors-table.less @@ -21,12 +21,8 @@ --fill-black: #000; --fill-white: #FFF; - --toolbar-de-background: #446995; - --toolbar-pe-background: #AA5252; - --toolbar-sse-background: #40865C; - --toolbar-de-icons: #FFF; - --toolbar-pe-icons: #FFF; - --toolbar-sse-icons: #FFF; + --toolbar-background: #446995; + --toolbar-icons: #FFF; --toolbar-segment: #446995; --toolbar-tab-normal:fade(#FFF, 50%); diff --git a/apps/common/mobile/resources/less/comments.less b/apps/common/mobile/resources/less/comments.less index 846a6b39f..9ba3d478b 100644 --- a/apps/common/mobile/resources/less/comments.less +++ b/apps/common/mobile/resources/less/comments.less @@ -75,7 +75,6 @@ .user-name { font-size: 16px; line-height: 22px; - color: @black; margin: 0; font-weight: 700; } @@ -227,6 +226,7 @@ .no-comments { text-align: center; margin-top: 35px; + color: var(--text-normal); } .actions-modal.modal-in { diff --git a/apps/common/mobile/resources/less/common-ios.less b/apps/common/mobile/resources/less/common-ios.less index 33beb9354..d46ad8555 100644 --- a/apps/common/mobile/resources/less/common-ios.less +++ b/apps/common/mobile/resources/less/common-ios.less @@ -1,21 +1,22 @@ -.device-ios { +.device-ios .app-layout{ @blockTitleColor: #6d6d72; @item-border-color: #c8c7cc; - --f7-list-item-border-color: @item-border-color; + --f7-list-item-border-color: @background-menu-divider; @darkGreen: #40865c; + @text-normal: var(--text-normal); --f7-navbar-link-color: @brandColor; --f7-subnavbar-link-color: @brandColor; - --f7-navbar-text-color: @black; + --f7-navbar-text-color: @text-normal; --f7-navbar-title-line-height: 44px; --f7-navbar-link-line-height: 44px; --f7-navbar-title-font-size: 17px; - --f7-list-bg-color: @white; - --f7-navbar-bg-color: #f7f7f8; + --f7-list-bg-color: @background-primary; + --f7-navbar-bg-color: @toolbar-background; - --f7-tabbar-link-inactive-color: @brandColor; + --f7-tabbar-link-inactive-color: @toolbar-segment; --f7-radio-active-color: @brandColor; --f7-toggle-active-color: @brandColor; @@ -31,7 +32,7 @@ margin-left: 0; } - .navbar, .subnavbar { + .navbar, .navbar-bg, .subnavbar { a.btn-doc-back { width: 22px; } @@ -123,6 +124,21 @@ } } + .page { + --f7-page-bg-color: @background-tertiary; + + --f7-list-item-title-text-color: @text-normal; + --f7-label-text-color: @text-normal; + --f7-list-item-after-text-color: @text-normal; + --f7-input-text-color: @text-normal; + --f7-block-title-text-color: @text-secondary; + --f7-input-placeholder-color: @text-secondary; + + --f7-list-chevron-icon-color: @text-tertiary; + + --f7-toggle-inactive-color: @background-menu-divider; + } + // Bullets, numbers and multilevels .bullets, .numbers, @@ -138,6 +154,7 @@ width: 100%; margin-top: 10px; padding: 0 5px; + background: none; } &:first-child li:first-child, &:last-child li:last-child { border-radius: 0; @@ -239,9 +256,10 @@ } } .item-inner { + color: @text-normal; padding-top: 7px; .item-after { - color: @black; + color: @text-normal; .after-start { margin: 0 5px; } @@ -289,7 +307,7 @@ position: relative; overflow: hidden; -webkit-box-flex: 1; - border: 1px solid @brandColor; + border: 1px solid @toolbar-segment; text-decoration: none; text-align: center; margin: 0; @@ -311,8 +329,11 @@ border-radius: 0 5px 5px 0; } &.tab-link-active { - background: @brandColor; - color: @white; + background-color: @toolbar-segment; + color: @brand-text-on-brand; + i.icon { + background-color: @brand-text-on-brand; + } } } } @@ -354,7 +375,7 @@ .button-red { color: @red; - background-color: @white; + background-color: @text-error; } .buttons-list { @@ -549,7 +570,7 @@ } .actions-button { - background: rgba(255,255,255,.95); + background: @background-secondary; } .actions-button-text { diff --git a/apps/common/mobile/resources/less/common-material.less b/apps/common/mobile/resources/less/common-material.less index d1ea30ef8..cc821fdc8 100644 --- a/apps/common/mobile/resources/less/common-material.less +++ b/apps/common/mobile/resources/less/common-material.less @@ -1,10 +1,11 @@ -.device-android, .device-android .theme-type-dark{ +.device-android .app-layout{ @tabLinkColor: rgba(255,255,255,.7); @red: #f44336; @white: #fff; @darkGreen: #40865c; @darkGrey: #757575; + @text-normal: var(--text-normal); @touchColor: rgba(255,255,255,0.1); @@ -13,13 +14,13 @@ --f7-theme-color: @brandColor; --f7-navbar-bg-color: @toolbar-background; - --f7-navbar-link-color: @navBarIconColor; - --f7-navbar-text-color: @navBarIconColor; + --f7-navbar-link-color: @fill-white; + --f7-navbar-text-color: @fill-white; --f7-navbar-height: 56px; --f7-subnavbar-bg-color: @toolbar-background; - --f7-subnavbar-link-color: @navBarIconColor; - --f7-subnavbar-text-color: @navBarIconColor; + --f7-subnavbar-link-color: @fill-white; + --f7-subnavbar-text-color: @fill-white; --f7-subnavbar-height: 56px; --f7-radio-active-color: @brandColor; @@ -80,6 +81,22 @@ } } } + + .page { + --f7-page-bg-color: @background-tertiary; + --f7-list-bg-color: @background-primary; + + --f7-list-item-title-text-color: @text-normal; + --f7-label-text-color: @text-normal; + --f7-input-text-color: @text-normal; + --f7-block-title-text-color: @text-secondary; + --f7-input-placeholder-color: @text-secondary; + + --f7-list-item-border-color: @background-menu-divider; + --f7-list-chevron-icon-color: @text-tertiary; + + --f7-toggle-inactive-color: @background-menu-divider; + } .coauth__sheet{ max-height: 65%; @@ -96,7 +113,7 @@ height: 32px; } label { - color: @black; + color: @text-normal; margin: 0 5px; line-height: 32px; } @@ -147,6 +164,7 @@ .buttons-list { ul { + --f7-list-bg-color: none; &::before, &::after { display: none; } @@ -208,14 +226,15 @@ opacity: 0.5; } &.tab-link-active { - color: @white; + color: @fill-white; i.icon { opacity: 1; + background-color: @fill-white; } } } .tab-link-highlight { - --f7-tabbar-link-active-border-color: rgba(255,255,255,0.5); + --f7-tabbar-link-active-border-color: @toolbar-icons; position: absolute; left: 0; bottom: 0; @@ -237,7 +256,7 @@ .item-link { .item-inner { .item-after { - color: @black; + color: @text-normal; } } } @@ -280,11 +299,11 @@ margin-left: 0; } &.active { - color: @white; - background-color: @brandColor; - i.icon { - background-color: @white; - } + // color: @white; + background-color: var(--button-active); + // i.icon { + // background-color: @white; + // } } } } @@ -311,6 +330,7 @@ .list{ margin: 5px; ul { + background: none; &:before, &:after { display: none; } diff --git a/apps/common/mobile/resources/less/common.less b/apps/common/mobile/resources/less/common.less index 553c5b6ea..de00cb878 100644 --- a/apps/common/mobile/resources/less/common.less +++ b/apps/common/mobile/resources/less/common.less @@ -422,6 +422,7 @@ } .list .item-inner { display: block; + color: var(--text-normal); } .standart-colors, .dynamic-colors { .palette { diff --git a/apps/common/mobile/resources/less/dataview.less b/apps/common/mobile/resources/less/dataview.less index 8ca304ead..7086f53ad 100644 --- a/apps/common/mobile/resources/less/dataview.less +++ b/apps/common/mobile/resources/less/dataview.less @@ -25,7 +25,7 @@ height: 22px; right: -5px; bottom: -5px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } } } \ No newline at end of file diff --git a/apps/common/mobile/resources/less/icons.less b/apps/common/mobile/resources/less/icons.less index bb5757b75..eec48e893 100644 --- a/apps/common/mobile/resources/less/icons.less +++ b/apps/common/mobile/resources/less/icons.less @@ -23,11 +23,11 @@ i.icon { &.icon-collaboration { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-cancellation { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } } diff --git a/apps/common/mobile/resources/less/ios/icons.less b/apps/common/mobile/resources/less/ios/icons.less index 718212a95..a595cf5c7 100644 --- a/apps/common/mobile/resources/less/ios/icons.less +++ b/apps/common/mobile/resources/less/ios/icons.less @@ -13,7 +13,7 @@ &.icon-prev { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); &:after { display: none; } @@ -21,7 +21,7 @@ &.icon-next { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); &:after { display: none; } @@ -29,7 +29,7 @@ &.icon-edit { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } } } diff --git a/apps/common/mobile/resources/less/material/icons.less b/apps/common/mobile/resources/less/material/icons.less index 7b592e836..9e6f6865b 100644 --- a/apps/common/mobile/resources/less/material/icons.less +++ b/apps/common/mobile/resources/less/material/icons.less @@ -32,12 +32,12 @@ &.icon-collaboration { width: 24px; height: 24px; - .encoded-svg-mask('', @navBarIconColor); + .encoded-svg-mask('', @toolbar-icons); } &.icon-edit { width: 22px; height: 22px; - .encoded-svg-mask('', @navBarIconColor); + .encoded-svg-mask('', @toolbar-icons); } } } diff --git a/apps/documenteditor/mobile/src/less/app-ios.less b/apps/documenteditor/mobile/src/less/app-ios.less index 5fb8ff040..80d3ec808 100644 --- a/apps/documenteditor/mobile/src/less/app-ios.less +++ b/apps/documenteditor/mobile/src/less/app-ios.less @@ -1,7 +1,7 @@ .ios { .view { .bullets-numbers{ - background: #fff; + background: @brand-text-on-brand; } } diff --git a/apps/documenteditor/mobile/src/less/app-material.less b/apps/documenteditor/mobile/src/less/app-material.less index 27c5ed8af..cdfa9149c 100644 --- a/apps/documenteditor/mobile/src/less/app-material.less +++ b/apps/documenteditor/mobile/src/less/app-material.less @@ -1,7 +1,7 @@ // Colors @themeColorLight: #a2bdde; -@navBarIconColor: var(--toolbar-de-icons); +@navBarIconColor: @toolbar-icons; .device-android { diff --git a/apps/documenteditor/mobile/src/less/app.less b/apps/documenteditor/mobile/src/less/app.less index 43cf9841d..e21ca3f70 100644 --- a/apps/documenteditor/mobile/src/less/app.less +++ b/apps/documenteditor/mobile/src/less/app.less @@ -5,7 +5,23 @@ @import '../../../../common/mobile/resources/less/colors-table.less'; @import '../../../../common/mobile/resources/less/colors-table-dark.less'; @brandColor: var(--brand-word); -@toolbar-background: var(--toolbar-de-background); + +.device-ios { + --toolbar-background: var(--background-primary, #FFF); +} + +.device-android { + --toolbar-background: var(--brand-word, #446995); + --button-active: fade(#446995, 30%); + + .theme-type-dark { + --toolbar-icons: var(--brand-word, #446995); + --button-active: fade(#446995, 20%); + } +} + +@toolbar-background: var(--toolbar-background); + @import '../../../../common/mobile/resources/less/collaboration.less'; @import '../../../../common/mobile/resources/less/common.less'; @import '../../../../common/mobile/resources/less/common-ios.less'; diff --git a/apps/documenteditor/mobile/src/less/icons-ios.less b/apps/documenteditor/mobile/src/less/icons-ios.less index f00919800..251680355 100644 --- a/apps/documenteditor/mobile/src/less/icons-ios.less +++ b/apps/documenteditor/mobile/src/less/icons-ios.less @@ -3,83 +3,83 @@ &.icon-undo { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-redo { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-edit-settings { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-plus { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-settings { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-expand-down { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } //Settings &.icon-spellcheck { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-search { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-reader { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-doc-setup { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-app-settings { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-download { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-print { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-info { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-help { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-about { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } // Download @@ -87,55 +87,55 @@ &.icon-format-docx { width: 30px; height: 30px; - .encoded-svg-background('') + .encoded-svg-mask('') } &.icon-format-pdf { width: 30px; height: 30px; - .encoded-svg-background('') + .encoded-svg-mask('') } &.icon-format-pdfa { width: 30px; height: 30px; - .encoded-svg-background('') + .encoded-svg-mask('') } &.icon-format-txt { width: 24px; height: 24px; - .encoded-svg-background('') + .encoded-svg-mask('') } &.icon-format-rtf { width: 24px; height: 24px; - .encoded-svg-background('') + .encoded-svg-mask('') } &.icon-format-odt { width: 30px; height: 30px; - .encoded-svg-background('') + .encoded-svg-mask('') } &.icon-format-html { width: 30px; height: 30px; - .encoded-svg-background('') + .encoded-svg-mask('') } &.icon-format-dotx { width: 30px; height: 30px; - .encoded-svg-background('') + .encoded-svg-mask('') } &.icon-format-ott { width: 30px; height: 30px; - .encoded-svg-background('') + .encoded-svg-mask('') } @@ -143,32 +143,32 @@ &.icon-text-additional { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-bullets { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-numbers { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-linespacing { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-text-color { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-text-selection { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } // Align &.icon-text-align-left { @@ -205,151 +205,151 @@ &.icon-table-add-column-left { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-table-add-column-right { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-table-add-row-above { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-table-add-row-below { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-table-remove-column { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-table-remove-row { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } // Presets of table borders &.icon-table-borders-all { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-table-borders-none { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-table-borders-inner { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-table-borders-outer { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-table-borders-left { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-table-borders-center { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-table-borders-right { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-table-borders-top { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-table-borders-middle { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-table-borders-bottom { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } // Reorder &.icon-move-backward { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-move-forward { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } - &.icon-move-background { + &.icon-move-mask { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-move-foreground { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } // Wrap &.icon-wrap-inline { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-wrap-square { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-wrap-tight { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-wrap-through { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-wrap-top-bottom { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-wrap-infront { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-wrap-behind { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } // Table Wrap &.icon-wrap-table-inline { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-wrap-table-flow { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-block-align-left { width: 28px; @@ -370,7 +370,7 @@ &.icon-link { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-image-library { width: 22px; @@ -381,126 +381,126 @@ &.icon-add-table { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask('', @toolbar-segment); } &.icon-add-shape { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask('',@toolbar-segment); } &.icon-add-image { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask('', @toolbar-segment); } &.icon-add-other { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask('', @toolbar-segment); } &.icon-insert-comment { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-pagenumber { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-sectionbreak { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-footnote { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-pagebreak { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-stringbreak { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } // Collaboration &.icon-users { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-review { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-review-changes { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-accept-changes { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-reject-changes { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-accept { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-reject { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-next-change { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-prev-change { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-goto { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } // Comments &.icon-menu-comment { width: 30px; height: 30px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-resolve-comment { width: 30px; height: 30px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-resolve-comment.check { width: 30px; height: 30px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-insert-comment { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } } .tab-link-active { @@ -508,22 +508,22 @@ &.icon-add-table { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-add-shape { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-add-image { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-add-other { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } } } diff --git a/apps/documenteditor/mobile/src/less/icons-material.less b/apps/documenteditor/mobile/src/less/icons-material.less index 37d617525..015d1e8ba 100644 --- a/apps/documenteditor/mobile/src/less/icons-material.less +++ b/apps/documenteditor/mobile/src/less/icons-material.less @@ -4,37 +4,37 @@ &.icon-undo { width: 22px; height: 22px; - .encoded-svg-mask('', @navBarIconColor); + .encoded-svg-mask('', @toolbar-icons); } &.icon-redo { width: 22px; height: 22px; - .encoded-svg-mask('', @navBarIconColor); + .encoded-svg-mask('', @toolbar-icons); } &.icon-edit-settings { width: 22px; height: 22px; - .encoded-svg-mask('', @navBarIconColor); + .encoded-svg-mask('', @toolbar-icons); } &.icon-plus { width: 22px; height: 22px; - .encoded-svg-mask('', @navBarIconColor); + .encoded-svg-mask('', @toolbar-icons); } &.icon-settings { width: 22px; height: 22px; - .encoded-svg-mask('', @navBarIconColor); + .encoded-svg-mask('', @toolbar-icons); } &.icon-prev { width: 20px; height: 20px; - .encoded-svg-mask('', @navBarIconColor); + .encoded-svg-mask('', @toolbar-icons); } &.icon-next { width: 20px; height: 20px; - .encoded-svg-mask('', @navBarIconColor); + .encoded-svg-mask('', @toolbar-icons); } &.icon-expand-down { width: 22px; @@ -45,22 +45,22 @@ &.icon-add-table { width: 24px; height: 24px; - .encoded-svg-mask('', @navBarIconColor); + .encoded-svg-mask('', @toolbar-tab-normal); } &.icon-add-shape { width: 24px; height: 24px; - .encoded-svg-mask('', @navBarIconColor); + .encoded-svg-mask('', @toolbar-tab-normal); } &.icon-add-image { width: 24px; height: 24px; - .encoded-svg-mask('', @navBarIconColor); + .encoded-svg-mask('', @toolbar-tab-normal); } &.icon-add-other { width: 24px; height: 24px; - .encoded-svg-mask('', @navBarIconColor); + .encoded-svg-mask('', @toolbar-tab-normal); } &.icon-search { width: 22px; @@ -73,7 +73,7 @@ &.icon-plus { width: 24px; height: 24px; - .encoded-svg-mask('', @navBarIconColor); + .encoded-svg-mask('', @toolbar-icons); } &.icon-expand-down { width: 17px; @@ -160,13 +160,13 @@ &.icon-format-txt { width: 24px; height: 24px; - .encoded-svg-mask('') + .encoded-svg-mask('') } &.icon-format-rtf { width: 24px; height: 24px; - .encoded-svg-mask('') + .encoded-svg-mask('') } &.icon-format-odt { @@ -416,59 +416,59 @@ &.icon-accept { width: 24px; height: 24px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } &.icon-reject { width: 24px; height: 24px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } &.icon-next-change { width: 24px; height: 24px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } &.icon-prev-change { width: 24px; height: 24px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } &.icon-goto { width: 24px; height: 24px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } // Comments &.icon-menu-comment { width: 24px; height: 24px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } &.icon-resolve-comment { width: 24px; height: 24px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } &.icon-resolve-comment.check { width: 24px; height: 24px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } &.icon-done-comment { width: 24px; height: 24px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } &.icon-insert-comment { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-done-comment-white { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-background(''); } } } \ No newline at end of file diff --git a/apps/documenteditor/mobile/src/view/app.jsx b/apps/documenteditor/mobile/src/view/app.jsx index b114f32d5..02821f8a5 100644 --- a/apps/documenteditor/mobile/src/view/app.jsx +++ b/apps/documenteditor/mobile/src/view/app.jsx @@ -30,7 +30,7 @@ export default class extends React.Component { render() { return ( - + {/* Your main view, should have "view-main" class */} From f24d9c2ff43875c13d716466e4e026c793a338c9 Mon Sep 17 00:00:00 2001 From: ShimaginAndrey Date: Fri, 12 Nov 2021 10:37:06 +0300 Subject: [PATCH 3/8] Correct and add styles --- apps/common/mobile/resources/less/about.less | 6 ++-- .../mobile/resources/less/comments.less | 2 +- .../mobile/resources/less/common-ios.less | 34 +++++++++++-------- .../resources/less/common-material.less | 5 ++- apps/common/mobile/resources/less/common.less | 8 ++--- .../mobile/resources/less/ios/icons.less | 7 ++++ .../mobile/src/less/app-ios.less | 4 +-- .../mobile/src/less/app-material.less | 4 +-- apps/documenteditor/mobile/src/less/app.less | 5 +-- .../mobile/src/less/icons-ios.less | 2 +- .../mobile/src/less/icons-material.less | 2 +- 11 files changed, 49 insertions(+), 30 deletions(-) diff --git a/apps/common/mobile/resources/less/about.less b/apps/common/mobile/resources/less/about.less index 3072fb575..182a5593f 100644 --- a/apps/common/mobile/resources/less/about.less +++ b/apps/common/mobile/resources/less/about.less @@ -1,4 +1,4 @@ -@text-normal: #000; +// @text-normal: #000; // @common-image-about-path - defined in webpack config .about { @@ -14,13 +14,14 @@ margin: 0 auto 15px; a { - color: @text-normal; + // color: @text-normal; } } h3 { font-weight: normal; margin: 0; + color: @text-secondary; &.vendor { color: @text-normal; @@ -31,6 +32,7 @@ p > label { margin-right: 5px; + color: @text-secondary; } .logo { diff --git a/apps/common/mobile/resources/less/comments.less b/apps/common/mobile/resources/less/comments.less index 9ba3d478b..3b9761646 100644 --- a/apps/common/mobile/resources/less/comments.less +++ b/apps/common/mobile/resources/less/comments.less @@ -93,7 +93,7 @@ font-size: 14px; } .comment-text, .reply-text { - color: @black; + color: @text-normal; font-size: 14px; line-height: 25px; margin: 0; diff --git a/apps/common/mobile/resources/less/common-ios.less b/apps/common/mobile/resources/less/common-ios.less index d46ad8555..2fc561763 100644 --- a/apps/common/mobile/resources/less/common-ios.less +++ b/apps/common/mobile/resources/less/common-ios.less @@ -130,9 +130,12 @@ --f7-list-item-title-text-color: @text-normal; --f7-label-text-color: @text-normal; --f7-list-item-after-text-color: @text-normal; - --f7-input-text-color: @text-normal; + + --f7-input-text-color: @text-secondary; --f7-block-title-text-color: @text-secondary; --f7-input-placeholder-color: @text-secondary; + --f7-list-item-text-text-color: @text-secondary; + --f7-list-item-subtitle-text-color: @text-secondary; --f7-list-chevron-icon-color: @text-tertiary; @@ -189,7 +192,7 @@ .thumb { width: 100%; height: 100%; - background-color: @white; + background-color: @fill-white; background-size: cover; label { @@ -329,7 +332,9 @@ border-radius: 0 5px 5px 0; } &.tab-link-active { - background-color: @toolbar-segment; + // background: @brandColor; + // color: @fill-white; + background: @toolbar-segment; color: @brand-text-on-brand; i.icon { background-color: @brand-text-on-brand; @@ -361,21 +366,21 @@ outline: 0; &.active { background: @brandColor; - color: @white; + color: @fill-white; i.icon { - background-color: @white; + background-color: @fill-white; } } } .button-fill { color: @brandColor; - background-color: @white; + background-color: @fill-white; } .button-red { - color: @red; - background-color: @text-error; + color: @text-error; + background-color: @fill-white; } .buttons-list { @@ -392,7 +397,7 @@ } .button-red .list-button { - color: red; + color: @text-error; } .list-button { @@ -414,7 +419,7 @@ .shapes { .page-content { - background: @white; + background: @fill-white; } } @@ -445,7 +450,7 @@ .dataview, #add-table, #add-shape, #add-slide, #add-chart { &.page-content, .page-content { - background-color: @white; + background-color: @background-tertiary; } } @@ -500,11 +505,11 @@ appearance: none; border-radius: 5px; font-family: inherit; - color: @black; + color: @fill-black; font-size: 14px; font-weight: 400; padding: 0 8px; - background-color: @white; + background-color: @fill-white; padding: 0 28px; } @@ -571,13 +576,14 @@ .actions-button { background: @background-secondary; + --f7-actions-button-border-color: @background-menu-divider; } .actions-button-text { height: 57px; line-height: 57px; font-size: 20px; - color: @brandColor; + // color: @brandColor; white-space: normal; text-overflow: ellipsis; } diff --git a/apps/common/mobile/resources/less/common-material.less b/apps/common/mobile/resources/less/common-material.less index cc821fdc8..01249b763 100644 --- a/apps/common/mobile/resources/less/common-material.less +++ b/apps/common/mobile/resources/less/common-material.less @@ -88,9 +88,12 @@ --f7-list-item-title-text-color: @text-normal; --f7-label-text-color: @text-normal; - --f7-input-text-color: @text-normal; + + --f7-input-text-color: @text-secondary; --f7-block-title-text-color: @text-secondary; --f7-input-placeholder-color: @text-secondary; + --f7-list-item-text-text-color: @text-secondary; + --f7-list-item-subtitle-text-color: @text-secondary; --f7-list-item-border-color: @background-menu-divider; --f7-list-chevron-icon-color: @text-tertiary; diff --git a/apps/common/mobile/resources/less/common.less b/apps/common/mobile/resources/less/common.less index de00cb878..6a8fa7e02 100644 --- a/apps/common/mobile/resources/less/common.less +++ b/apps/common/mobile/resources/less/common.less @@ -149,7 +149,7 @@ .content-block { margin: 0 auto 15px; a { - color: @black; + // color: @black; } } } @@ -166,7 +166,7 @@ .color-schemes-menu { cursor: pointer; display: block; - background-color: @white; + // background-color: @white; .item-inner { justify-content: flex-start; } @@ -181,7 +181,7 @@ } .item-title { margin-left: 20px; - color: #212121; + // color: #212121; } } @@ -481,7 +481,7 @@ justify-content: center; align-items: center; border-radius: 100px; - background-color: @white; + background-color: @fill-white; box-shadow: 0 4px 4px rgba(0,0,0,.25); // border-color: transparent; border: 0; diff --git a/apps/common/mobile/resources/less/ios/icons.less b/apps/common/mobile/resources/less/ios/icons.less index a595cf5c7..059683ae1 100644 --- a/apps/common/mobile/resources/less/ios/icons.less +++ b/apps/common/mobile/resources/less/ios/icons.less @@ -1,6 +1,13 @@ // @common-image-header-path - defined in webpack config .device-ios { + .theme-type-dark { + i.icon { + &.icon-logo { + background: ~"url(@{common-image-header-path}/logo-android.svg)" no-repeat center; + } + } + } i.icon { &.icon_mask { background-color: white; diff --git a/apps/documenteditor/mobile/src/less/app-ios.less b/apps/documenteditor/mobile/src/less/app-ios.less index 80d3ec808..d8f784511 100644 --- a/apps/documenteditor/mobile/src/less/app-ios.less +++ b/apps/documenteditor/mobile/src/less/app-ios.less @@ -45,7 +45,7 @@ .color-schemes-menu { cursor: pointer; display: block; - background-color: #fff; + // background-color: #fff; .item-inner { justify-content: flex-start; } @@ -60,7 +60,7 @@ } .item-title { margin-left: 20px; - color: #212121; + // color: #212121; } } diff --git a/apps/documenteditor/mobile/src/less/app-material.less b/apps/documenteditor/mobile/src/less/app-material.less index cdfa9149c..0182800f7 100644 --- a/apps/documenteditor/mobile/src/less/app-material.less +++ b/apps/documenteditor/mobile/src/less/app-material.less @@ -93,7 +93,7 @@ .color-schemes-menu { cursor: pointer; display: block; - background-color: #fff; + // background-color: #fff; .item-inner { justify-content: flex-start; } @@ -108,6 +108,6 @@ } .item-title { margin-left: 20px; - color: #212121; + // color: #212121; } } \ No newline at end of file diff --git a/apps/documenteditor/mobile/src/less/app.less b/apps/documenteditor/mobile/src/less/app.less index e21ca3f70..c24141310 100644 --- a/apps/documenteditor/mobile/src/less/app.less +++ b/apps/documenteditor/mobile/src/less/app.less @@ -67,7 +67,7 @@ .page-review { --f7-toolbar-link-color: @brandColor; .toolbar { - background-color: @white; + // background-color: @white; box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2); position: absolute; #btn-reject-change { @@ -83,9 +83,10 @@ } } .page-content { - background-color: @white; + // background-color: @white; .no-changes { padding: 15px; + color: @text-normal; } .block-description { padding: 15px; diff --git a/apps/documenteditor/mobile/src/less/icons-ios.less b/apps/documenteditor/mobile/src/less/icons-ios.less index 251680355..1365f7087 100644 --- a/apps/documenteditor/mobile/src/less/icons-ios.less +++ b/apps/documenteditor/mobile/src/less/icons-ios.less @@ -495,7 +495,7 @@ &.icon-resolve-comment.check { width: 30px; height: 30px; - .encoded-svg-mask(''); + .encoded-svg-background(''); } &.icon-insert-comment { width: 24px; diff --git a/apps/documenteditor/mobile/src/less/icons-material.less b/apps/documenteditor/mobile/src/less/icons-material.less index 015d1e8ba..9f07f57f8 100644 --- a/apps/documenteditor/mobile/src/less/icons-material.less +++ b/apps/documenteditor/mobile/src/less/icons-material.less @@ -453,7 +453,7 @@ &.icon-resolve-comment.check { width: 24px; height: 24px; - .encoded-svg-mask(''); + .encoded-svg-background(''); } &.icon-done-comment { width: 24px; From 8acc06d03e0edb4aaa198fbdf5ae8f336b95d2fe Mon Sep 17 00:00:00 2001 From: ShimaginAndrey Date: Mon, 15 Nov 2021 10:55:21 +0300 Subject: [PATCH 4/8] Correct styles and fonts --- apps/common/mobile/resources/less/_mixins.less | 1 + apps/common/mobile/resources/less/about.less | 6 ++++++ .../mobile/resources/less/colors-table-dark.less | 3 +++ apps/common/mobile/resources/less/colors-table.less | 3 +++ apps/common/mobile/resources/less/comments.less | 4 +++- apps/common/mobile/resources/less/common-ios.less | 3 +++ apps/common/mobile/resources/less/common-material.less | 9 +++++---- apps/common/mobile/resources/less/common.less | 4 ++++ apps/common/mobile/resources/less/ios/comments.less | 4 ++++ .../mobile/resources/less/material/comments.less | 4 ++++ apps/documenteditor/mobile/src/less/app.less | 2 -- apps/documenteditor/mobile/src/less/icons-ios.less | 2 +- .../documenteditor/mobile/src/less/icons-material.less | 10 +++++----- 13 files changed, 42 insertions(+), 13 deletions(-) diff --git a/apps/common/mobile/resources/less/_mixins.less b/apps/common/mobile/resources/less/_mixins.less index dda2a2d7f..c09e943e5 100644 --- a/apps/common/mobile/resources/less/_mixins.less +++ b/apps/common/mobile/resources/less/_mixins.less @@ -3,6 +3,7 @@ @url: `encodeURIComponent(@{svg})`; background-color: @color; -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,@{url}"); + -webkit-mask-size: contain; } .encoded-svg-uncolored-mask(@svg) { diff --git a/apps/common/mobile/resources/less/about.less b/apps/common/mobile/resources/less/about.less index 182a5593f..1a90d098c 100644 --- a/apps/common/mobile/resources/less/about.less +++ b/apps/common/mobile/resources/less/about.less @@ -41,4 +41,10 @@ height: 55px; background: ~"url(@{common-image-about-path}/logo_s.svg) no-repeat center"; } + + .theme-type-dark { + .about .logo { + background: ~"url(@{common-image-about-path}/logo-white_s.svg) no-repeat center"; + } + } } diff --git a/apps/common/mobile/resources/less/colors-table-dark.less b/apps/common/mobile/resources/less/colors-table-dark.less index f2c790eff..c2604bf94 100644 --- a/apps/common/mobile/resources/less/colors-table-dark.less +++ b/apps/common/mobile/resources/less/colors-table-dark.less @@ -29,5 +29,8 @@ --toolbar-tab-normal: #757575; --component-disabled-opacity: .4; + --button-active-opacity: fade(#446995, 20%); + + --image-border-types-filter: invert(100%) brightness(4); } } \ No newline at end of file diff --git a/apps/common/mobile/resources/less/colors-table.less b/apps/common/mobile/resources/less/colors-table.less index 5addf7759..48975db76 100644 --- a/apps/common/mobile/resources/less/colors-table.less +++ b/apps/common/mobile/resources/less/colors-table.less @@ -27,6 +27,9 @@ --toolbar-tab-normal:fade(#FFF, 50%); --component-disabled-opacity: .4; + --button-active-opacity: fade(#446995, 30%); + + --image-border-types-filter: none; } @brand-word: var(--brand-word); diff --git a/apps/common/mobile/resources/less/comments.less b/apps/common/mobile/resources/less/comments.less index 3b9761646..f2c9d5c8a 100644 --- a/apps/common/mobile/resources/less/comments.less +++ b/apps/common/mobile/resources/less/comments.less @@ -9,6 +9,7 @@ .name { font-weight: 600; font-size: 16px; + color: @text-normal; } .wrap-textarea { margin-top: 6px; @@ -20,6 +21,7 @@ margin-top: 0; height: 100%; padding: 5px 0; + color: @text-normal; } } } @@ -36,7 +38,7 @@ } .wrap-textarea { textarea { - color: @black; + color: @text-normal; width: 100%; } } diff --git a/apps/common/mobile/resources/less/common-ios.less b/apps/common/mobile/resources/less/common-ios.less index 2fc561763..64693746e 100644 --- a/apps/common/mobile/resources/less/common-ios.less +++ b/apps/common/mobile/resources/less/common-ios.less @@ -289,6 +289,9 @@ display: flex; align-items: center; justify-content: center; + &.active { + background-color: var(--button-active-opacity); + } } } } diff --git a/apps/common/mobile/resources/less/common-material.less b/apps/common/mobile/resources/less/common-material.less index 01249b763..563cc1b1e 100644 --- a/apps/common/mobile/resources/less/common-material.less +++ b/apps/common/mobile/resources/less/common-material.less @@ -19,7 +19,7 @@ --f7-navbar-height: 56px; --f7-subnavbar-bg-color: @toolbar-background; - --f7-subnavbar-link-color: @fill-white; + --f7-subnavbar-link-color: @toolbar-icons; --f7-subnavbar-text-color: @fill-white; --f7-subnavbar-height: 56px; @@ -151,7 +151,7 @@ } .button-fill { - color: @white; + color: @brand-text-on-brand; // background-color: @brandColor; background-color: transparent; } @@ -161,7 +161,7 @@ } .button-red { - color: @white; + color: @brand-text-on-brand; background-color:@text-error; } @@ -303,7 +303,7 @@ } &.active { // color: @white; - background-color: var(--button-active); + background-color: var(--button-active-opacity); // i.icon { // background-color: @white; // } @@ -320,6 +320,7 @@ border-radius: 4px; margin-top: -3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15) inset; + background: @fill-white; &.auto { background-color: @autoColor; } diff --git a/apps/common/mobile/resources/less/common.less b/apps/common/mobile/resources/less/common.less index 6a8fa7e02..60f83114e 100644 --- a/apps/common/mobile/resources/less/common.less +++ b/apps/common/mobile/resources/less/common.less @@ -92,6 +92,10 @@ max-height: initial; -webkit-line-clamp: initial; } + + .font-item img { + filter: var(--image-border-types-filter, none); + } } .shapes { diff --git a/apps/common/mobile/resources/less/ios/comments.less b/apps/common/mobile/resources/less/ios/comments.less index a00df23c6..2626b9a1e 100644 --- a/apps/common/mobile/resources/less/ios/comments.less +++ b/apps/common/mobile/resources/less/ios/comments.less @@ -1,6 +1,10 @@ .device-ios { .wrap-comment { height: calc(100% - 60px); + background: @background-tertiary; + .comment-date { + color: @text-secondary; + } } .add-comment-popup, .add-reply-popup, .add-comment-dialog, .add-reply-dialog { .wrap-textarea { diff --git a/apps/common/mobile/resources/less/material/comments.less b/apps/common/mobile/resources/less/material/comments.less index 92616d7c2..ba039da9b 100644 --- a/apps/common/mobile/resources/less/material/comments.less +++ b/apps/common/mobile/resources/less/material/comments.less @@ -1,6 +1,10 @@ .device-android { .wrap-comment { height: calc(100% - 72px); + background: @background-tertiary; + .comment-date { + color: @text-secondary; + } } .add-comment-popup, .add-reply-popup, .add-comment-dialog, .add-reply-dialog { .wrap-textarea { diff --git a/apps/documenteditor/mobile/src/less/app.less b/apps/documenteditor/mobile/src/less/app.less index c24141310..1864b665d 100644 --- a/apps/documenteditor/mobile/src/less/app.less +++ b/apps/documenteditor/mobile/src/less/app.less @@ -12,11 +12,9 @@ .device-android { --toolbar-background: var(--brand-word, #446995); - --button-active: fade(#446995, 30%); .theme-type-dark { --toolbar-icons: var(--brand-word, #446995); - --button-active: fade(#446995, 20%); } } diff --git a/apps/documenteditor/mobile/src/less/icons-ios.less b/apps/documenteditor/mobile/src/less/icons-ios.less index 1365f7087..aeb365da2 100644 --- a/apps/documenteditor/mobile/src/less/icons-ios.less +++ b/apps/documenteditor/mobile/src/less/icons-ios.less @@ -495,7 +495,7 @@ &.icon-resolve-comment.check { width: 30px; height: 30px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-insert-comment { width: 24px; diff --git a/apps/documenteditor/mobile/src/less/icons-material.less b/apps/documenteditor/mobile/src/less/icons-material.less index 9f07f57f8..6178a55bb 100644 --- a/apps/documenteditor/mobile/src/less/icons-material.less +++ b/apps/documenteditor/mobile/src/less/icons-material.less @@ -78,7 +78,7 @@ &.icon-expand-down { width: 17px; height: 17px; - .encoded-svg-mask(''); + .encoded-svg-mask('', @fill-white); } &.icon-expand-up { width: 17px; @@ -443,17 +443,17 @@ &.icon-menu-comment { width: 24px; height: 24px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } &.icon-resolve-comment { width: 24px; height: 24px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } &.icon-resolve-comment.check { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-done-comment { width: 24px; @@ -468,7 +468,7 @@ &.icon-done-comment-white { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask('', @fill-white); } } } \ No newline at end of file From c83d0f548a7dd81cd9b2e3b21231a68b32481d6e Mon Sep 17 00:00:00 2001 From: Maxim Kadushkin Date: Thu, 18 Nov 2021 13:28:51 +0300 Subject: [PATCH 5/8] [DE mobile] changed some icons to support ui themes --- apps/common/mobile/resources/less/_mixins.less | 1 + apps/documenteditor/mobile/src/less/icons-material.less | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/apps/common/mobile/resources/less/_mixins.less b/apps/common/mobile/resources/less/_mixins.less index c09e943e5..4378affb1 100644 --- a/apps/common/mobile/resources/less/_mixins.less +++ b/apps/common/mobile/resources/less/_mixins.less @@ -4,6 +4,7 @@ background-color: @color; -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,@{url}"); -webkit-mask-size: contain; + -webkit-mask-repeat: round; } .encoded-svg-uncolored-mask(@svg) { diff --git a/apps/documenteditor/mobile/src/less/icons-material.less b/apps/documenteditor/mobile/src/less/icons-material.less index 6178a55bb..8e3dd7fe6 100644 --- a/apps/documenteditor/mobile/src/less/icons-material.less +++ b/apps/documenteditor/mobile/src/less/icons-material.less @@ -184,13 +184,13 @@ &.icon-format-dotx { width: 30px; height: 30px; - .encoded-svg-mask('') + .encoded-svg-mask('') } &.icon-format-ott { width: 30px; height: 30px; - .encoded-svg-mask('') + .encoded-svg-mask('') } From 581b7f690fde750912f57825812290f2e6fd6487 Mon Sep 17 00:00:00 2001 From: ShimaginAndrey Date: Thu, 18 Nov 2021 17:45:51 +0300 Subject: [PATCH 6/8] Correct and add styles v2 --- .../mobile/resources/less/comments.less | 7 +++--- .../mobile/resources/less/common-ios.less | 21 +++++++++++----- .../resources/less/common-material.less | 25 +++++++++++++++---- apps/common/mobile/resources/less/icons.less | 6 ++--- .../resources/less/material/contextmenu.less | 2 +- .../mobile/resources/less/material/icons.less | 2 +- apps/documenteditor/mobile/src/less/app.less | 8 +++--- .../mobile/src/less/icons-ios.less | 4 +-- .../mobile/src/less/icons-material.less | 2 +- 9 files changed, 51 insertions(+), 26 deletions(-) diff --git a/apps/common/mobile/resources/less/comments.less b/apps/common/mobile/resources/less/comments.less index f2c9d5c8a..740c9c99b 100644 --- a/apps/common/mobile/resources/less/comments.less +++ b/apps/common/mobile/resources/less/comments.less @@ -1,5 +1,5 @@ @comment-date: #6d6d72; -@swipe-icon: rgba(0, 0, 0, 0.12); +@swipe-icon: #E5E5E5; @import './ios/comments'; @import './material/comments'; @@ -131,6 +131,7 @@ display: flex; justify-content: center; height: 40px; + background-color: @background-primary; .icon-swipe { margin-top: 8px; width: 40px; @@ -144,7 +145,7 @@ #view-comment-popover, #view-comment-sheet { .toolbar { position: fixed; - background-color: @white; + background-color: @background-primary; box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.2), 0px 4px 5px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14); .link { --f7-toolbar-link-color: @brandColor; @@ -198,7 +199,7 @@ .page-current-comment { position: relative; .page-content { - background-color: @white; + background-color: @background-primary; } .comment-list { ul { diff --git a/apps/common/mobile/resources/less/common-ios.less b/apps/common/mobile/resources/less/common-ios.less index 64693746e..89c353a47 100644 --- a/apps/common/mobile/resources/less/common-ios.less +++ b/apps/common/mobile/resources/less/common-ios.less @@ -24,7 +24,11 @@ --f7-list-button-text-color: @brandColor; + --f7-dialog-bg-color-rgb: @background-secondary; + --f7-dialog-title-text-color: @text-normal; + --f7-dialog-text-color: @text-normal; --f7-dialog-button-text-color: @brandColor; + --f7-dialog-border-divider-color: @background-menu-divider; // Main Toolbar #editor-navbar.navbar .right a + a, @@ -290,6 +294,7 @@ align-items: center; justify-content: center; &.active { + color: @brandColor; background-color: var(--button-active-opacity); } } @@ -377,13 +382,13 @@ } .button-fill { - color: @brandColor; - background-color: @fill-white; + color: @text-normal; + background-color: @background-primary; } .button-red { color: @text-error; - background-color: @fill-white; + background-color: @background-primary; } .buttons-list { @@ -427,7 +432,7 @@ } .dialog { - background-color: rgba(var(--f7-dialog-bg-color-rgb), 1); + background-color: var(--f7-dialog-bg-color-rgb); } #color-picker { @@ -512,10 +517,14 @@ font-size: 14px; font-weight: 400; padding: 0 8px; - background-color: @fill-white; + background-color: @background-primary; padding: 0 28px; } + .searchbar input[type=search]::placeholder { + color: @text-tertiary; + } + .searchbar-inner { &__left { margin-right: 10px; @@ -586,7 +595,7 @@ height: 57px; line-height: 57px; font-size: 20px; - // color: @brandColor; + color: @text-normal; white-space: normal; text-overflow: ellipsis; } diff --git a/apps/common/mobile/resources/less/common-material.less b/apps/common/mobile/resources/less/common-material.less index 563cc1b1e..55c679c77 100644 --- a/apps/common/mobile/resources/less/common-material.less +++ b/apps/common/mobile/resources/less/common-material.less @@ -32,6 +32,16 @@ --f7-link-highlight-color: transparent; --f7-link-touch-ripple-color: @touchColor; + --f7-actions-bg-color: @background-secondary; + --f7-actions-button-border-color: @background-menu-divider; + + --f7-popover-bg-color: @background-secondary; + + --f7-dialog-bg-color: @background-secondary; + --f7-dialog-title-text-color: @text-normal; + --f7-dialog-text-color: @text-secondary; + --f7-dialog-button-text-color: @brandColor; + .button { --f7-touch-ripple-color: transparent; } @@ -45,8 +55,6 @@ --f7-input-focused-border-color: @brandColor; --f7-label-focused-text-color: @brandColor; - --f7-dialog-button-text-color: @brandColor; - .navbar { --f7-touch-ripple-color: @touchColor; .sheet-close { @@ -114,6 +122,9 @@ margin-left: 0; border-radius: 0; height: 32px; + i.icon-expand-down { + background: @brandColor; + } } label { color: @text-normal; @@ -151,7 +162,6 @@ } .button-fill { - color: @brand-text-on-brand; // background-color: @brandColor; background-color: transparent; } @@ -302,7 +312,7 @@ margin-left: 0; } &.active { - // color: @white; + color: @brandColor; background-color: var(--button-active-opacity); // i.icon { // background-color: @white; @@ -514,6 +524,11 @@ a.link { padding: 0 16px; } + a.link.searchbar-enable { + i.icon-search { + background-color: @toolbar-icons; + } + } a.icon-only { width: auto; height: 56px; @@ -541,7 +556,7 @@ cursor: pointer; line-height: 48px; font-size: 16px; - color: rgba(0,0,0,.87); + color: @text-normal; } @media (min-width: 496px) { diff --git a/apps/common/mobile/resources/less/icons.less b/apps/common/mobile/resources/less/icons.less index eec48e893..29d272600 100644 --- a/apps/common/mobile/resources/less/icons.less +++ b/apps/common/mobile/resources/less/icons.less @@ -5,17 +5,17 @@ i.icon { &.icon-paste { width: 24px; height: 24px; - .encoded-svg-uncolored-mask(''); + .encoded-svg-mask('', @text-normal); } &.icon-copy { width: 24px; height: 24px; - .encoded-svg-uncolored-mask(''); + .encoded-svg-mask('', @text-normal); } &.icon-cut { width: 24px; height: 24px; - .encoded-svg-uncolored-mask(''); + .encoded-svg-mask('', @text-normal); } &.icon-prev:after, &.icon-next:after { content: none; diff --git a/apps/common/mobile/resources/less/material/contextmenu.less b/apps/common/mobile/resources/less/material/contextmenu.less index 95476f42a..a1a6a9daa 100644 --- a/apps/common/mobile/resources/less/material/contextmenu.less +++ b/apps/common/mobile/resources/less/material/contextmenu.less @@ -19,7 +19,7 @@ } .list-button { - color: #212121; + color: @text-normal; } //.item-link { diff --git a/apps/common/mobile/resources/less/material/icons.less b/apps/common/mobile/resources/less/material/icons.less index 9e6f6865b..ee4f065c1 100644 --- a/apps/common/mobile/resources/less/material/icons.less +++ b/apps/common/mobile/resources/less/material/icons.less @@ -3,7 +3,7 @@ .device-android { i.icon { &.icon_mask { - background-color: black; + background-color: @text-normal; } &.icon-logo { width: 100px; diff --git a/apps/documenteditor/mobile/src/less/app.less b/apps/documenteditor/mobile/src/less/app.less index 1864b665d..15ded83c5 100644 --- a/apps/documenteditor/mobile/src/less/app.less +++ b/apps/documenteditor/mobile/src/less/app.less @@ -65,7 +65,7 @@ .page-review { --f7-toolbar-link-color: @brandColor; .toolbar { - // background-color: @white; + background-color: @background-secondary; box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2); position: absolute; #btn-reject-change { @@ -91,18 +91,18 @@ .user-name { font-size: 17px; line-height: 22px; - color: @black; + color: @text-normal; margin: 0; } .date-change { font-size: 14px; line-height: 18px; - color: @darkGray; + color: @text-secondary; margin: 0; margin-top: 3px; } .text { - color: @black; + color: @text-normal; font-size: 15px; line-height: 20px; margin: 0; diff --git a/apps/documenteditor/mobile/src/less/icons-ios.less b/apps/documenteditor/mobile/src/less/icons-ios.less index aeb365da2..76e95a28c 100644 --- a/apps/documenteditor/mobile/src/less/icons-ios.less +++ b/apps/documenteditor/mobile/src/less/icons-ios.less @@ -129,13 +129,13 @@ &.icon-format-dotx { width: 30px; height: 30px; - .encoded-svg-mask('') + .encoded-svg-mask('') } &.icon-format-ott { width: 30px; height: 30px; - .encoded-svg-mask('') + .encoded-svg-mask('') } diff --git a/apps/documenteditor/mobile/src/less/icons-material.less b/apps/documenteditor/mobile/src/less/icons-material.less index 8e3dd7fe6..c1de48d05 100644 --- a/apps/documenteditor/mobile/src/less/icons-material.less +++ b/apps/documenteditor/mobile/src/less/icons-material.less @@ -73,7 +73,7 @@ &.icon-plus { width: 24px; height: 24px; - .encoded-svg-mask('', @toolbar-icons); + .encoded-svg-mask('', @fill-white); } &.icon-expand-down { width: 17px; From 739cf52862c0cbcf2d1bb4a80651226b96d954d2 Mon Sep 17 00:00:00 2001 From: ShimaginAndrey Date: Fri, 19 Nov 2021 16:00:00 +0300 Subject: [PATCH 7/8] [DE] Added Themes controller and correct styles --- apps/common/mobile/resources/less/comments.less | 6 +++--- .../resources/less/ios/_collaboration.less | 8 ++++---- .../resources/less/material/_collaboration.less | 8 ++++---- .../controller/settings/ApplicationSettings.jsx | 17 +---------------- .../mobile/src/less/icons-ios.less | 2 +- .../mobile/src/less/icons-material.less | 2 +- .../src/view/settings/ApplicationSettings.jsx | 5 +++-- 7 files changed, 17 insertions(+), 31 deletions(-) diff --git a/apps/common/mobile/resources/less/comments.less b/apps/common/mobile/resources/less/comments.less index 740c9c99b..128bf1617 100644 --- a/apps/common/mobile/resources/less/comments.less +++ b/apps/common/mobile/resources/less/comments.less @@ -83,12 +83,12 @@ .comment-date, .reply-date { font-size: 12px; line-height: 18px; - color: @comment-date; + color: @text-secondary; margin: 0; } .comment-quote { - color: @brandColor; - border-left: 1px solid @brandColor; + color: @text-secondary; + border-left: 1px solid @text-secondary; padding-left: 10px; padding-right: 16px; margin: 5px 0; diff --git a/apps/common/mobile/resources/less/ios/_collaboration.less b/apps/common/mobile/resources/less/ios/_collaboration.less index a90bd564e..ed8f4914a 100644 --- a/apps/common/mobile/resources/less/ios/_collaboration.less +++ b/apps/common/mobile/resources/less/ios/_collaboration.less @@ -162,7 +162,7 @@ .comment-date, .reply-date { font-size: 13px; line-height: 18px; - color: #6d6d72; + color: @text-secondary; margin: 0; margin-top: 0px; } @@ -205,8 +205,8 @@ } } .comment-quote { - color: @brandColor; - border-left: 1px solid @brandColor; + color: @text-secondary; + border-left: 1px solid @text-secondary; padding-left: 10px; padding-right: 16px; margin: 5px 0; @@ -396,7 +396,7 @@ } .comment-date { font-size: 13px; - color: #6d6d72; + color: @text-secondary; padding-left: 5px; } .wrap-textarea { diff --git a/apps/common/mobile/resources/less/material/_collaboration.less b/apps/common/mobile/resources/less/material/_collaboration.less index e11fbcc2e..ee0dc8546 100644 --- a/apps/common/mobile/resources/less/material/_collaboration.less +++ b/apps/common/mobile/resources/less/material/_collaboration.less @@ -158,7 +158,7 @@ .comment-date, .reply-date { font-size: 12px; line-height: 18px; - color: #6d6d72; + color: @text-secondary; margin: 0; margin-top: 0px; } @@ -185,8 +185,8 @@ } } .comment-quote { - color: @brandColor; - border-left: 1px solid @brandColor; + color: @text-secondary; + border-left: 1px solid @text-secondary; padding-left: 10px; padding-right: 16px; margin: 5px 0; @@ -419,7 +419,7 @@ } .comment-date { font-size: 13px; - color: #6d6d72; + color: @text-secondary; } .wrap-textarea { margin-top: 16px; diff --git a/apps/documenteditor/mobile/src/controller/settings/ApplicationSettings.jsx b/apps/documenteditor/mobile/src/controller/settings/ApplicationSettings.jsx index c3f823e0c..98f516d09 100644 --- a/apps/documenteditor/mobile/src/controller/settings/ApplicationSettings.jsx +++ b/apps/documenteditor/mobile/src/controller/settings/ApplicationSettings.jsx @@ -2,6 +2,7 @@ import React, { Component } from "react"; import { ApplicationSettings } from "../../view/settings/ApplicationSettings"; import { LocalStorage } from '../../../../../common/mobile/utils/LocalStorage'; import {observer, inject} from "mobx-react"; +import { Themes } from '../../../../../common/mobile/lib/controller/Themes.js'; class ApplicationSettingsController extends Component { constructor(props) { @@ -24,20 +25,6 @@ class ApplicationSettingsController extends Component { Common.EditorApi.get().asc_setSpellCheck(value); } - switchDarkTheme(value) { - const theme = value ? {id:'theme-dark', type:'dark'} : {id:'theme-light', type:'light'}; - LocalStorage.setItem("ui-theme", JSON.stringify(theme)); - - const $body = $$('body'); - $body.attr('class') && $body.attr('class', $body.attr('class').replace(/\s?theme-type-(?:dark|light)/, '')); - $body.addClass(`theme-type-${theme.type}`); - } - - isThemeDark() { - const obj = LocalStorage.getItem("ui-theme"); - return !!obj ? JSON.parse(obj).type === 'dark' : false; - } - switchNoCharacters(value) { LocalStorage.setBool("de-mobile-no-characters", value); Common.EditorApi.get().put_ShowParaMarks(value); @@ -81,13 +68,11 @@ class ApplicationSettingsController extends Component { ) } diff --git a/apps/documenteditor/mobile/src/less/icons-ios.less b/apps/documenteditor/mobile/src/less/icons-ios.less index 76e95a28c..99205059b 100644 --- a/apps/documenteditor/mobile/src/less/icons-ios.less +++ b/apps/documenteditor/mobile/src/less/icons-ios.less @@ -485,7 +485,7 @@ &.icon-menu-comment { width: 30px; height: 30px; - .encoded-svg-mask(''); + .encoded-svg-mask('', @text-tertiary); } &.icon-resolve-comment { width: 30px; diff --git a/apps/documenteditor/mobile/src/less/icons-material.less b/apps/documenteditor/mobile/src/less/icons-material.less index c1de48d05..bc3b9c640 100644 --- a/apps/documenteditor/mobile/src/less/icons-material.less +++ b/apps/documenteditor/mobile/src/less/icons-material.less @@ -443,7 +443,7 @@ &.icon-menu-comment { width: 24px; height: 24px; - .encoded-svg-mask(''); + .encoded-svg-mask('', @text-tertiary); } &.icon-resolve-comment { width: 24px; diff --git a/apps/documenteditor/mobile/src/view/settings/ApplicationSettings.jsx b/apps/documenteditor/mobile/src/view/settings/ApplicationSettings.jsx index 7d696d813..a9500b69c 100644 --- a/apps/documenteditor/mobile/src/view/settings/ApplicationSettings.jsx +++ b/apps/documenteditor/mobile/src/view/settings/ApplicationSettings.jsx @@ -2,6 +2,7 @@ import React, {Fragment, useState} from "react"; import { observer, inject } from "mobx-react"; import { Page, Navbar, List, ListItem, BlockTitle, Toggle } from "framework7-react"; import { useTranslation } from "react-i18next"; +import { Themes } from '../../../../../common/mobile/lib/controller/Themes.js'; const PageApplicationSettings = props => { const { t } = useTranslation(); @@ -14,7 +15,7 @@ const PageApplicationSettings = props => { const isHiddenTableBorders = store.isHiddenTableBorders; const isComments = store.isComments; const isResolvedComments = store.isResolvedComments; - const [isThemeDark, setIsThemeDark] = useState(props.isThemeDark); + const [isThemeDark, setIsThemeDark] = useState(Themes.isCurrentDark); const changeMeasureSettings = value => { store.changeUnitMeasurement(value); @@ -51,7 +52,7 @@ const PageApplicationSettings = props => { {props.switchDarkTheme(!toggle), setIsThemeDark(!toggle)}}> + onToggleChange={toggle => {Themes.switchDarkTheme(!toggle), setIsThemeDark(!toggle)}}> From 4bd582fc0d78a6379c9f3de4fbbf3905b9dc6383 Mon Sep 17 00:00:00 2001 From: ShimaginAndrey Date: Sun, 21 Nov 2021 17:50:37 +0300 Subject: [PATCH 8/8] Correct and add styles v3 --- .../resources/less/colors-table-dark.less | 1 + .../mobile/resources/less/colors-table.less | 2 ++ .../common/mobile/resources/less/comments.less | 6 +++--- .../mobile/resources/less/common-ios.less | 13 +++++++------ .../resources/less/ios/_collaboration.less | 18 +++++++++--------- .../less/material/_collaboration.less | 16 ++++++++-------- 6 files changed, 30 insertions(+), 26 deletions(-) diff --git a/apps/common/mobile/resources/less/colors-table-dark.less b/apps/common/mobile/resources/less/colors-table-dark.less index c2604bf94..0f605a444 100644 --- a/apps/common/mobile/resources/less/colors-table-dark.less +++ b/apps/common/mobile/resources/less/colors-table-dark.less @@ -6,6 +6,7 @@ --background-secondary: #333; --background-tertiary: #131313; --background-menu-divider: fade(#545458, 65%); + --background-button: #333333; --text-normal: fade(#FFF, 87%); --text-secondary: fade(#FFF, 60%); diff --git a/apps/common/mobile/resources/less/colors-table.less b/apps/common/mobile/resources/less/colors-table.less index 48975db76..75356401e 100644 --- a/apps/common/mobile/resources/less/colors-table.less +++ b/apps/common/mobile/resources/less/colors-table.less @@ -11,6 +11,7 @@ --background-secondary: #FFF; --background-tertiary: #EFF0F5; --background-menu-divider: fade(#3C3C43, 36%); + --background-button: #EFF0F5; --text-normal: #000000; --text-secondary: fade(#000, 60%); @@ -43,6 +44,7 @@ @background-secondary: var(--background-secondary); @background-tertiary: var(--background-tertiary); @background-menu-divider: var(--background-menu-divider); +@background-button: var(--background-button); @text-normal: var(--text-normal); @text-secondary: var(--text-secondary); diff --git a/apps/common/mobile/resources/less/comments.less b/apps/common/mobile/resources/less/comments.less index 128bf1617..ac6b874e3 100644 --- a/apps/common/mobile/resources/less/comments.less +++ b/apps/common/mobile/resources/less/comments.less @@ -117,7 +117,7 @@ } #view-comment-sheet { - background-color: @white; + background-color: @fill-white; border-top-left-radius: 4px; border-top-right-radius: 4px; height: 45%; @@ -136,7 +136,7 @@ margin-top: 8px; width: 40px; height: 4px; - background: @swipe-icon; + background: @background-menu-divider; border-radius: 2px; } } @@ -170,7 +170,7 @@ } #view-comment-popover { - background-color: @white; + background-color: @fill-white; .pages { position: absolute; } diff --git a/apps/common/mobile/resources/less/common-ios.less b/apps/common/mobile/resources/less/common-ios.less index 89c353a47..e7870f75c 100644 --- a/apps/common/mobile/resources/less/common-ios.less +++ b/apps/common/mobile/resources/less/common-ios.less @@ -141,6 +141,8 @@ --f7-list-item-text-text-color: @text-secondary; --f7-list-item-subtitle-text-color: @text-secondary; + --f7-searchbar-search-icon-color: @text-tertiary; + --f7-searchbar-input-clear-button-color: @text-tertiary; --f7-list-chevron-icon-color: @text-tertiary; --f7-toggle-inactive-color: @background-menu-divider; @@ -513,16 +515,15 @@ appearance: none; border-radius: 5px; font-family: inherit; - color: @fill-black; + color: @text-normal; font-size: 14px; font-weight: 400; padding: 0 8px; - background-color: @background-primary; + background-color: @background-button; padding: 0 28px; - } - - .searchbar input[type=search]::placeholder { - color: @text-tertiary; + &::placeholder { + color: @text-tertiary; + } } .searchbar-inner { diff --git a/apps/common/mobile/resources/less/ios/_collaboration.less b/apps/common/mobile/resources/less/ios/_collaboration.less index ed8f4914a..e55a265a7 100644 --- a/apps/common/mobile/resources/less/ios/_collaboration.less +++ b/apps/common/mobile/resources/less/ios/_collaboration.less @@ -1,7 +1,7 @@ .page-change { - background-color: #FFFFFF; + background-color: @fill-white; .block-description { - background-color: #fff; + background-color: @fill-white; padding-top: 15px; padding-bottom: 15px; margin: 0; @@ -11,18 +11,18 @@ #user-name { font-size: 17px; line-height: 22px; - color: #000000; + color: @fill-black; margin: 0; } #date-change { font-size: 14px; line-height: 18px; - color: #6d6d72; + color: @text-tertiary; margin: 0; margin-top: 3px; } #text-change { - color: #000000; + color: @fill-black; font-size: 15px; line-height: 20px; margin: 0; @@ -155,7 +155,7 @@ .user-name { font-size: 17px; line-height: 22px; - color: #000000; + color: @fill-black; margin: 0; font-weight: bold; } @@ -167,7 +167,7 @@ margin-top: 0px; } .comment-text, .reply-text { - color: #000000; + color: @fill-black; font-size: 15px; line-height: 25px; margin: 0; @@ -233,7 +233,7 @@ .container-edit-comment { .page { - background-color: #FFFFFF; + background-color: @fill-white; } } @@ -383,7 +383,7 @@ color: @brandColor; } .page-add-comment { - background-color: #FFFFFF; + background-color: @fill-white; .wrap-comment, .wrap-reply { padding: 16px 24px 0 16px; .header-comment { diff --git a/apps/common/mobile/resources/less/material/_collaboration.less b/apps/common/mobile/resources/less/material/_collaboration.less index ee0dc8546..771dda775 100644 --- a/apps/common/mobile/resources/less/material/_collaboration.less +++ b/apps/common/mobile/resources/less/material/_collaboration.less @@ -1,6 +1,6 @@ .page-change { .block-description { - background-color: #fff; + background-color: @fill-white; padding-top: 15px; padding-bottom: 15px; margin: 0; @@ -10,18 +10,18 @@ #user-name { font-size: 16px; line-height: 22px; - color: #000000; + color: @fill-black; margin: 0; } #date-change { font-size: 14px; line-height: 18px; - color: #6d6d72; + color: @text-tertiary; margin: 0; margin-top: 3px; } #text-change { - color: #000000; + color: @fill-black; font-size: 15px; line-height: 20px; margin: 0; @@ -152,7 +152,7 @@ .user-name { font-size: 16px; line-height: 22px; - color: #000000; + color: @fill-black; margin: 0; } .comment-date, .reply-date { @@ -163,7 +163,7 @@ margin-top: 0px; } .comment-text, .reply-text { - color: #000000; + color: @fill-black; font-size: 15px; line-height: 25px; margin: 0; @@ -471,7 +471,7 @@ } } .page-add-comment { - background-color: #FFFFFF; + background-color: @fill-white; } .header-comment { justify-content: flex-start; @@ -483,7 +483,7 @@ } .page-edit-comment, .page-add-reply, .page-edit-reply { - background-color: #FFFFFF; + background-color: @fill-white; .header-comment { justify-content: flex-start; }