From 938a0e353b115698f39c6bf24f63274354bc8daf Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Fri, 5 Nov 2021 01:11:52 +0400 Subject: [PATCH 01/26] Add variables from colors table --- .../common/mobile/resources/less/_mixins.less | 2 +- .../mobile/resources/less/comments.less | 6 +- .../mobile/resources/less/common-ios.less | 32 ++-- .../resources/less/common-material.less | 32 ++-- 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 | 26 +-- .../mobile/resources/less/material/icons.less | 4 +- .../settings/ApplicationSettings.jsx | 18 +- .../mobile/src/less/app-material.less | 4 +- .../mobile/src/less/app.less | 7 +- .../mobile/src/less/icons-ios.less | 160 +++++++++--------- .../mobile/src/less/icons-material.less | 146 ++++++++-------- .../src/view/settings/ApplicationSettings.jsx | 8 +- 24 files changed, 260 insertions(+), 237 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/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..00116f40d 100644 --- a/apps/common/mobile/resources/less/common-material.less +++ b/apps/common/mobile/resources/less/common-material.less @@ -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: @brandColor; --f7-navbar-link-color: @navBarIconColor; --f7-navbar-text-color: @navBarIconColor; --f7-navbar-height: 56px; - --f7-subnavbar-bg-color: @themeColor; + --f7-subnavbar-bg-color: @brandColor; --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; } @@ -168,7 +168,7 @@ } } .button-fill .list-button { - background-color: @themeColor; + background-color: @brandColor; color: @white; height: 36px; text-align: center; @@ -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..1b9053a30 100644 --- a/apps/common/mobile/resources/less/material/_sailfish_fix.less +++ b/apps/common/mobile/resources/less/material/_sailfish_fix.less @@ -22,21 +22,21 @@ .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; + background-color: @brandColorLight; } .dataview.shapes { diff --git a/apps/common/mobile/resources/less/material/icons.less b/apps/common/mobile/resources/less/material/icons.less index 53577e587..79d5915b7 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-background(''); &:after { display: none; } @@ -21,7 +21,7 @@ &.icon-next { width: 20px; height: 20px; - .encoded-svg-background(''); + .encoded-svg-background(''); &:after { display: none; } diff --git a/apps/presentationeditor/mobile/src/controller/settings/ApplicationSettings.jsx b/apps/presentationeditor/mobile/src/controller/settings/ApplicationSettings.jsx index fce2d7d05..c52cbe9e7 100644 --- a/apps/presentationeditor/mobile/src/controller/settings/ApplicationSettings.jsx +++ b/apps/presentationeditor/mobile/src/controller/settings/ApplicationSettings.jsx @@ -26,13 +26,29 @@ class ApplicationSettingsController extends Component { LocalStorage.setItem("pe-mobile-macros-mode", 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; + } + render() { return ( ) } diff --git a/apps/presentationeditor/mobile/src/less/app-material.less b/apps/presentationeditor/mobile/src/less/app-material.less index 82d6f5c70..f19bd5354 100644 --- a/apps/presentationeditor/mobile/src/less/app-material.less +++ b/apps/presentationeditor/mobile/src/less/app-material.less @@ -1,11 +1,11 @@ // Colors -@themeColorLight: #a2bdde; +@brandColorLight: #a2bdde; @navBarIconColor: #fff; .device-android { - --f7-navbar-bg-color: @themeColor; + --f7-navbar-bg-color: @brandColor; --f7-navbar-link-color: @navBarIconColor; --f7-navbar-text-color: @navBarIconColor; diff --git a/apps/presentationeditor/mobile/src/less/app.less b/apps/presentationeditor/mobile/src/less/app.less index 549cb860b..99be0a72f 100644 --- a/apps/presentationeditor/mobile/src/less/app.less +++ b/apps/presentationeditor/mobile/src/less/app.less @@ -1,10 +1,11 @@ -@themeColor: #aa5252; - +// @themeColor: #aa5252; @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-slide); + @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/presentationeditor/mobile/src/less/icons-ios.less b/apps/presentationeditor/mobile/src/less/icons-ios.less index a24403d20..c23966f15 100644 --- a/apps/presentationeditor/mobile/src/less/icons-ios.less +++ b/apps/presentationeditor/mobile/src/less/icons-ios.less @@ -4,247 +4,247 @@ &.icon-search { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-burger { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-edit-settings { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-play { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.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-reader { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-download { width: 22px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-print { width: 22px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-spellcheck { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-info { 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-about { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-help { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-setup { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-versions { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-text-additional { 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(''); } &.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-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-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-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(''); } &.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(''); } &.icon-expand-down { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-pagebreak { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-sectionbreak { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-stringbreak { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-pagenumber { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-link { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-image-library { @@ -256,19 +256,19 @@ &.icon-text-valign-top { width: 22px; height: 22px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } &.icon-text-valign-middle { width: 22px; height: 22px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } &.icon-text-valign-bottom { width: 22px; height: 22px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } // Presets of table borders @@ -276,61 +276,61 @@ &.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 @@ -338,73 +338,73 @@ &.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(''); } &.icon-align-left { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-align-center { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-align-right { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-align-top { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-align-middle { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-align-bottom { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-align-horizontal { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-align-vertical { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-background(''); } // Formats @@ -412,50 +412,50 @@ &.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-pptx { width: 30px; height: 30px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-format-potx { width: 30px; height: 30px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-format-odp { width: 30px; height: 30px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-format-otp { width: 30px; height: 30px; - .encoded-svg-background(''); + .encoded-svg-background(''); } // Collaboration &.icon-users { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-app-settings { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-background(''); } //comments @@ -480,38 +480,38 @@ &.icon-insert-comment { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-background(''); } //Insert &.icon-add-slide { 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-add-table { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-background(''); } } diff --git a/apps/presentationeditor/mobile/src/less/icons-material.less b/apps/presentationeditor/mobile/src/less/icons-material.less index 90ffdba25..4939aba31 100644 --- a/apps/presentationeditor/mobile/src/less/icons-material.less +++ b/apps/presentationeditor/mobile/src/less/icons-material.less @@ -16,229 +16,229 @@ &.icon-search { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-edit { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-edit-settings { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-play { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-reader { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-download { width: 22px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-print { width: 22px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-spellcheck { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-info { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-about { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-help { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-setup { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-versions { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-background(''); } //&.icon-text-additional { // 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(''); //} //&.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-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-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-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(''); } &.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(''); } &.icon-pagebreak { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-sectionbreak { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-stringbreak { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-pagenumber { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-image-library { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-text-valign-top { width: 22px; height: 22px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } &.icon-text-valign-middle { width: 22px; height: 22px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } &.icon-text-valign-bottom { width: 22px; height: 22px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } // Presets of table borders @@ -246,61 +246,61 @@ &.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 @@ -308,73 +308,73 @@ &.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(''); } &.icon-align-left { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-align-center { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-align-right { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-align-top { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-align-middle { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-align-bottom { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-align-horizontal { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-align-vertical { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-background(''); } // Formats @@ -382,50 +382,50 @@ &.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-pptx { width: 30px; height: 30px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-format-potx { width: 30px; height: 30px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-format-odp { width: 30px; height: 30px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-format-otp { width: 30px; height: 30px; - .encoded-svg-background(''); + .encoded-svg-background(''); } // Collaboration &.icon-users { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-app-settings { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-background(''); } //Comments @@ -450,13 +450,13 @@ &.icon-done-comment { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-insert-comment { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-done-comment-white { @@ -468,13 +468,13 @@ &.icon-add-table { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-link { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-background(''); } &.icon-plus { width: 22px; diff --git a/apps/presentationeditor/mobile/src/view/settings/ApplicationSettings.jsx b/apps/presentationeditor/mobile/src/view/settings/ApplicationSettings.jsx index 257b17063..2040217ed 100644 --- a/apps/presentationeditor/mobile/src/view/settings/ApplicationSettings.jsx +++ b/apps/presentationeditor/mobile/src/view/settings/ApplicationSettings.jsx @@ -1,4 +1,4 @@ -import React, {Fragment} from "react"; +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"; @@ -9,6 +9,7 @@ const PageApplicationSettings = props => { const store = props.storeApplicationSettings; const unitMeasurement = store.unitMeasurement; const isSpellChecking = store.isSpellChecking; + const [isThemeDark, setIsThemeDark] = useState(props.isThemeDark); const changeMeasureSettings = value => { store.changeUnitMeasurement(value); @@ -44,6 +45,11 @@ const PageApplicationSettings = props => { }} /> + + {props.switchDarkTheme(!toggle), setIsThemeDark(!toggle)}}> + + } From cd16fa0c323f7e57e746c7b20031eec8171469b0 Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Fri, 5 Nov 2021 21:48:28 +0400 Subject: [PATCH 02/26] [PE mobile] Add variables --- .../resources/less/colors-table-dark.less | 8 +- .../mobile/resources/less/colors-table.less | 8 +- .../resources/less/common-material.less | 6 +- .../less/material/_sailfish_fix.less | 2 +- .../mobile/resources/less/material/icons.less | 8 +- .../mobile/src/less/app-material.less | 2 +- .../mobile/src/less/app.less | 2 + .../mobile/src/less/icons-material.less | 194 +++++++++--------- 8 files changed, 120 insertions(+), 110 deletions(-) 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/common-material.less b/apps/common/mobile/resources/less/common-material.less index 00116f40d..5eb42cad3 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; @@ -12,12 +12,12 @@ --f7-theme-color: @brandColor; - --f7-navbar-bg-color: @brandColor; + --f7-navbar-bg-color: @toolbar-background; --f7-navbar-link-color: @navBarIconColor; --f7-navbar-text-color: @navBarIconColor; --f7-navbar-height: 56px; - --f7-subnavbar-bg-color: @brandColor; + --f7-subnavbar-bg-color: @toolbar-background; --f7-subnavbar-link-color: @navBarIconColor; --f7-subnavbar-text-color: @navBarIconColor; --f7-subnavbar-height: 56px; diff --git a/apps/common/mobile/resources/less/material/_sailfish_fix.less b/apps/common/mobile/resources/less/material/_sailfish_fix.less index 1b9053a30..fa6985cfb 100644 --- a/apps/common/mobile/resources/less/material/_sailfish_fix.less +++ b/apps/common/mobile/resources/less/material/_sailfish_fix.less @@ -36,7 +36,7 @@ .icon-redefine(icon-text-valign-bottom,''); .item-content.buttons .item-inner > .row .button.active { - background-color: @brandColorLight; + background-color: @themeColorLight; } .dataview.shapes { diff --git a/apps/common/mobile/resources/less/material/icons.less b/apps/common/mobile/resources/less/material/icons.less index 79d5915b7..8fe8ff97f 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('', @brandColor); &:after { display: none; } @@ -21,7 +21,7 @@ &.icon-next { width: 20px; height: 20px; - .encoded-svg-background(''); + .encoded-svg-mask('', @brandColor); &:after { display: none; } @@ -32,12 +32,12 @@ &.icon-collaboration { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask('', @brandColor); } &.icon-edit { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask('', @brandColor); } } } diff --git a/apps/presentationeditor/mobile/src/less/app-material.less b/apps/presentationeditor/mobile/src/less/app-material.less index f19bd5354..e9df4e23b 100644 --- a/apps/presentationeditor/mobile/src/less/app-material.less +++ b/apps/presentationeditor/mobile/src/less/app-material.less @@ -1,6 +1,6 @@ // Colors -@brandColorLight: #a2bdde; +@themeColorLight: #a2bdde; @navBarIconColor: #fff; diff --git a/apps/presentationeditor/mobile/src/less/app.less b/apps/presentationeditor/mobile/src/less/app.less index 99be0a72f..81b37faed 100644 --- a/apps/presentationeditor/mobile/src/less/app.less +++ b/apps/presentationeditor/mobile/src/less/app.less @@ -5,6 +5,8 @@ @import '../../../../common/mobile/resources/less/colors-table-dark.less'; @brandColor: var(--brand-slide); +@toolbar-background: var(--toolbar-pe-background); +// @navBarIconColor: var(--toolbar-pe-icons); @import '../../../../common/mobile/resources/less/collaboration.less'; @import '../../../../common/mobile/resources/less/common.less'; diff --git a/apps/presentationeditor/mobile/src/less/icons-material.less b/apps/presentationeditor/mobile/src/less/icons-material.less index 4939aba31..babce4172 100644 --- a/apps/presentationeditor/mobile/src/less/icons-material.less +++ b/apps/presentationeditor/mobile/src/less/icons-material.less @@ -4,241 +4,241 @@ &.icon-expand-up { width: 17px; height: 17px; - .encoded-svg-background(''); + .encoded-svg-mask('', @black); } &.icon-expand-down { width: 17px; height: 17px; - .encoded-svg-background(''); + .encoded-svg-mask('', @black); } &.icon-search { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask('', @brandColor); } &.icon-edit { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask('', @brandColor); } &.icon-edit-settings { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask('', @navBarIconColor); } &.icon-play { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask('', @brandColor); } &.icon-reader { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask('', @brandColor); } &.icon-download { width: 22px; - height: 28px; - .encoded-svg-background(''); + height: 22px; + .encoded-svg-mask('', @brandColor); } &.icon-print { width: 22px; - height: 28px; - .encoded-svg-background(''); + height: 22px; + .encoded-svg-mask('', @brandColor); } &.icon-spellcheck { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask('', @brandColor); } &.icon-info { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask('', @brandColor); } &.icon-about { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask('', @brandColor); } &.icon-help { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask('', @brandColor); } &.icon-setup { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask('', @brandColor); } &.icon-versions { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask('', @brandColor); } //&.icon-text-additional { // 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(''); //} //&.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-align-center { width: 22px; height: 22px; - .encoded-svg-mask(''); + .encoded-svg-mask('', @brandColor); } &.icon-text-align-just { width: 22px; height: 22px; - .encoded-svg-mask(''); + .encoded-svg-mask('', @brandColor); } &.icon-text-align-left { width: 22px; height: 22px; - .encoded-svg-mask(''); + .encoded-svg-mask('', @brandColor); } &.icon-text-align-right { width: 22px; height: 22px; - .encoded-svg-mask(''); + .encoded-svg-mask('', @brandColor); } &.icon-de-indent { width: 22px; height: 22px; - .encoded-svg-mask(''); + .encoded-svg-mask('', @brandColor); } &.icon-in-indent { width: 22px; height: 22px; - .encoded-svg-mask(''); + .encoded-svg-mask('', @brandColor); } &.icon-table-add-column-left { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask('', @brandColor); } &.icon-table-add-column-right { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask('', @brandColor); } &.icon-table-add-row-above { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask('', @brandColor); } &.icon-table-add-row-below { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask('', @brandColor); } &.icon-table-remove-column { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask('', @brandColor); } &.icon-table-remove-row { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask('', @brandColor); } &.icon-pagebreak { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask('', @brandColor); } &.icon-sectionbreak { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask('', @brandColor); } &.icon-stringbreak { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask('', @brandColor); } &.icon-pagenumber { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask('', @brandColor); } &.icon-image-library { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask('', @brandColor); } &.icon-text-valign-top { width: 22px; height: 22px; - .encoded-svg-mask(''); + .encoded-svg-mask('', @brandColor); } &.icon-text-valign-middle { width: 22px; height: 22px; - .encoded-svg-mask(''); + .encoded-svg-mask('', @brandColor); } &.icon-text-valign-bottom { width: 22px; height: 22px; - .encoded-svg-mask(''); + .encoded-svg-mask('', @brandColor); } // Presets of table borders @@ -246,61 +246,61 @@ &.icon-table-borders-all { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask('', @brandColor); } &.icon-table-borders-none { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask('', @brandColor); } &.icon-table-borders-inner { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask('', @brandColor); } &.icon-table-borders-outer { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask('', @brandColor); } &.icon-table-borders-left { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask('', @brandColor); } &.icon-table-borders-center { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask('', @brandColor); } &.icon-table-borders-right { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask('', @brandColor); } &.icon-table-borders-top { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask('', @brandColor); } &.icon-table-borders-middle { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask('', @brandColor); } &.icon-table-borders-bottom { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask('', @brandColor); } // Reorder @@ -308,73 +308,73 @@ &.icon-move-backward { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask('', @brandColor); } &.icon-move-forward { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask('', @brandColor); } &.icon-move-background { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask('', @brandColor); } &.icon-move-foreground { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask('', @brandColor); } &.icon-align-left { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask('', @brandColor); } &.icon-align-center { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask('', @brandColor); } &.icon-align-right { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask('', @brandColor); } &.icon-align-top { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask('', @brandColor); } &.icon-align-middle { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask('', @brandColor); } &.icon-align-bottom { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask('', @brandColor); } &.icon-align-horizontal { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask('', @brandColor); } &.icon-align-vertical { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask('', @brandColor); } // Formats @@ -382,104 +382,104 @@ &.icon-format-pdf { width: 30px; height: 30px; - .encoded-svg-background(''); + .encoded-svg-mask('', @brandColor); } &.icon-format-pdfa { width: 30px; height: 30px; - .encoded-svg-background(''); + .encoded-svg-mask('', @brandColor); } &.icon-format-pptx { width: 30px; height: 30px; - .encoded-svg-background(''); + .encoded-svg-mask('', @brandColor); } &.icon-format-potx { width: 30px; height: 30px; - .encoded-svg-background(''); + .encoded-svg-mask('', @brandColor); } &.icon-format-odp { width: 30px; height: 30px; - .encoded-svg-background(''); + .encoded-svg-mask('', @brandColor); } &.icon-format-otp { width: 30px; height: 30px; - .encoded-svg-background(''); + .encoded-svg-mask('', @brandColor); } // Collaboration &.icon-users { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask('', @brandColor); } &.icon-app-settings { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask('', @brandColor); } //Comments &.icon-menu-comment { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask('', @brandColor); } &.icon-resolve-comment { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask('', @brandColor); } &.icon-resolve-comment.check { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask('', @brandColor); } &.icon-done-comment { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask('', @brandColor); } &.icon-insert-comment { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask('', @brandColor); } &.icon-done-comment-white { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask('', @brandColor); } &.icon-add-table { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask('', @brandColor); } &.icon-link { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask('', @brandColor); } &.icon-plus { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask('', @navBarIconColor); } } @@ -495,91 +495,91 @@ &.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-search { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask('', @navBarIconColor); } &.icon-burger { 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-play { 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('', @navBarIconColor); } &.icon-add-slide { 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-close-comment { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask('', @navBarIconColor); } } } From b318613837d9314cae65549f7e0c5c9e81838899 Mon Sep 17 00:00:00 2001 From: ShimaginAndrey Date: Sat, 6 Nov 2021 13:11:18 +0300 Subject: [PATCH 03/26] 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 9ecc4ff643a8a8691dc56789fd61ab193d9a8768 Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Tue, 9 Nov 2021 01:46:02 +0400 Subject: [PATCH 04/26] [PE mobile] Fix icons --- apps/common/mobile/resources/less/icons.less | 2 +- .../mobile/src/less/icons-material.less | 12 ++++++------ 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/apps/common/mobile/resources/less/icons.less b/apps/common/mobile/resources/less/icons.less index bb5757b75..2d031a821 100644 --- a/apps/common/mobile/resources/less/icons.less +++ b/apps/common/mobile/resources/less/icons.less @@ -23,7 +23,7 @@ i.icon { &.icon-collaboration { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask('', @brandColor); } &.icon-cancellation { width: 24px; diff --git a/apps/presentationeditor/mobile/src/less/icons-material.less b/apps/presentationeditor/mobile/src/less/icons-material.less index babce4172..c27b1ab74 100644 --- a/apps/presentationeditor/mobile/src/less/icons-material.less +++ b/apps/presentationeditor/mobile/src/less/icons-material.less @@ -220,7 +220,7 @@ &.icon-image-library { width: 24px; height: 24px; - .encoded-svg-mask('', @brandColor); + .encoded-svg-mask('', @brandColor); } &.icon-text-valign-top { @@ -419,13 +419,13 @@ &.icon-users { width: 24px; height: 24px; - .encoded-svg-mask('', @brandColor); + .encoded-svg-mask('', @brandColor); } &.icon-app-settings { width: 24px; height: 24px; - .encoded-svg-mask('', @brandColor); + .encoded-svg-mask('', @brandColor); } //Comments @@ -456,7 +456,7 @@ &.icon-insert-comment { width: 24px; height: 24px; - .encoded-svg-mask('', @brandColor); + .encoded-svg-mask('', @brandColor); } &.icon-done-comment-white { @@ -468,13 +468,13 @@ &.icon-add-table { width: 24px; height: 24px; - .encoded-svg-mask('', @brandColor); + .encoded-svg-mask('', @brandColor); } &.icon-link { width: 24px; height: 24px; - .encoded-svg-mask('', @brandColor); + .encoded-svg-mask('', @brandColor); } &.icon-plus { width: 22px; From e5784c8d014da21d07ca148fe52b477420d4ff14 Mon Sep 17 00:00:00 2001 From: Maxim Kadushkin Date: Tue, 9 Nov 2021 12:44:27 +0300 Subject: [PATCH 05/26] [PE mobile] colors table refactoring --- .../mobile/resources/less/colors-table-dark.less | 8 ++------ .../mobile/resources/less/colors-table.less | 9 ++------- apps/common/mobile/resources/less/common-ios.less | 4 ++-- .../mobile/resources/less/common-material.less | 2 +- apps/common/mobile/resources/less/icons.less | 2 +- .../mobile/resources/less/material/icons.less | 2 +- apps/presentationeditor/mobile/src/less/app.less | 15 ++++++++++++++- .../mobile/src/less/icons-ios.less | 2 +- .../mobile/src/less/icons-material.less | 2 +- apps/presentationeditor/mobile/src/page/app.jsx | 2 +- 10 files changed, 26 insertions(+), 22 deletions(-) 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..40717c492 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%); @@ -54,7 +50,6 @@ @fill-black: var(--fill-black); @fill-white: var(--fill-white); -@toolbar-background: var(--toolbar-background); @toolbar-icons: var(--toolbar-icons); @toolbar-segment: var(--toolbar-segment); @toolbar-tab-normal: var(--toolbar-tab-normal); diff --git a/apps/common/mobile/resources/less/common-ios.less b/apps/common/mobile/resources/less/common-ios.less index 33beb9354..580e6e563 100644 --- a/apps/common/mobile/resources/less/common-ios.less +++ b/apps/common/mobile/resources/less/common-ios.less @@ -1,5 +1,5 @@ -.device-ios { +.device-ios .app-layout { @blockTitleColor: #6d6d72; @item-border-color: #c8c7cc; --f7-list-item-border-color: @item-border-color; @@ -13,7 +13,7 @@ --f7-navbar-title-font-size: 17px; --f7-list-bg-color: @white; - --f7-navbar-bg-color: #f7f7f8; + --f7-navbar-bg-color: @toolbar-background; --f7-tabbar-link-inactive-color: @brandColor; diff --git a/apps/common/mobile/resources/less/common-material.less b/apps/common/mobile/resources/less/common-material.less index 5eb42cad3..715784b4c 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 .theme-type-dark { +.device-android .app-layout { @tabLinkColor: rgba(255,255,255,.7); @red: #f44336; @white: #fff; diff --git a/apps/common/mobile/resources/less/icons.less b/apps/common/mobile/resources/less/icons.less index bb5757b75..0962430a8 100644 --- a/apps/common/mobile/resources/less/icons.less +++ b/apps/common/mobile/resources/less/icons.less @@ -23,7 +23,7 @@ i.icon { &.icon-collaboration { width: 24px; height: 24px; - .encoded-svg-background(''); + //.encoded-svg-background(''); } &.icon-cancellation { width: 24px; diff --git a/apps/common/mobile/resources/less/material/icons.less b/apps/common/mobile/resources/less/material/icons.less index 8fe8ff97f..64a54d2a4 100644 --- a/apps/common/mobile/resources/less/material/icons.less +++ b/apps/common/mobile/resources/less/material/icons.less @@ -32,7 +32,7 @@ &.icon-collaboration { width: 24px; height: 24px; - .encoded-svg-mask('', @brandColor); + .encoded-svg-mask('', @toolbar-icons); } &.icon-edit { width: 22px; diff --git a/apps/presentationeditor/mobile/src/less/app.less b/apps/presentationeditor/mobile/src/less/app.less index 81b37faed..7af159c82 100644 --- a/apps/presentationeditor/mobile/src/less/app.less +++ b/apps/presentationeditor/mobile/src/less/app.less @@ -5,9 +5,22 @@ @import '../../../../common/mobile/resources/less/colors-table-dark.less'; @brandColor: var(--brand-slide); -@toolbar-background: var(--toolbar-pe-background); // @navBarIconColor: var(--toolbar-pe-icons); +.device-ios { + --toolbar-background: var(--background-primary, #fff); + --toolbar-icons: var(--brand-slide, #aa5252); +} +.device-android { + --toolbar-background: var(--brand-slide, #aa5252); + + .theme-type-dark { + --toolbar-icons: var(--brand-slide, #aa5252); + } +} + +@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/presentationeditor/mobile/src/less/icons-ios.less b/apps/presentationeditor/mobile/src/less/icons-ios.less index c23966f15..79b7e8ca6 100644 --- a/apps/presentationeditor/mobile/src/less/icons-ios.less +++ b/apps/presentationeditor/mobile/src/less/icons-ios.less @@ -16,7 +16,7 @@ &.icon-edit-settings { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask('', @brandColor); } &.icon-play { diff --git a/apps/presentationeditor/mobile/src/less/icons-material.less b/apps/presentationeditor/mobile/src/less/icons-material.less index babce4172..09b0d73c7 100644 --- a/apps/presentationeditor/mobile/src/less/icons-material.less +++ b/apps/presentationeditor/mobile/src/less/icons-material.less @@ -28,7 +28,7 @@ &.icon-edit-settings { width: 22px; height: 22px; - .encoded-svg-mask('', @navBarIconColor); + .encoded-svg-mask('', @toolbar-icons); } &.icon-play { diff --git a/apps/presentationeditor/mobile/src/page/app.jsx b/apps/presentationeditor/mobile/src/page/app.jsx index 55d94d9b2..c8c5d62d1 100644 --- a/apps/presentationeditor/mobile/src/page/app.jsx +++ b/apps/presentationeditor/mobile/src/page/app.jsx @@ -31,7 +31,7 @@ export default class extends React.Component { render() { return ( - + {/* Your main view, should have "view-main" class */} From e05f5216d1e03365ffc1c80a01f0ba6c1c73447e Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Wed, 10 Nov 2021 00:33:54 +0400 Subject: [PATCH 06/26] [common] Edit styles and icons --- .../mobile/resources/less/comments.less | 1 + .../resources/less/common-material.less | 33 +++- apps/common/mobile/resources/less/common.less | 8 +- apps/common/mobile/resources/less/icons.less | 4 +- .../mobile/resources/less/material/icons.less | 6 +- .../mobile/src/less/app-material.less | 4 +- .../mobile/src/less/icons-ios.less | 158 +++++++-------- .../mobile/src/less/icons-material.less | 180 +++++++++--------- 8 files changed, 207 insertions(+), 187 deletions(-) diff --git a/apps/common/mobile/resources/less/comments.less b/apps/common/mobile/resources/less/comments.less index 846a6b39f..3e60d00e2 100644 --- a/apps/common/mobile/resources/less/comments.less +++ b/apps/common/mobile/resources/less/comments.less @@ -227,6 +227,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-material.less b/apps/common/mobile/resources/less/common-material.less index 715784b4c..c3b22e447 100644 --- a/apps/common/mobile/resources/less/common-material.less +++ b/apps/common/mobile/resources/less/common-material.less @@ -9,17 +9,20 @@ @touchColor: rgba(255,255,255,0.1); --f7-navbar-shadow-image: none; - --f7-theme-color: @brandColor; --f7-navbar-bg-color: @toolbar-background; - --f7-navbar-link-color: @navBarIconColor; - --f7-navbar-text-color: @navBarIconColor; + // --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: @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; @@ -31,6 +34,15 @@ --f7-link-highlight-color: transparent; --f7-link-touch-ripple-color: @touchColor; + --f7-text-color: var(--text-normal); + --f7-list-item-title-text-color: var(--text-normal); + --f7-list-item-text-text-color: var(--text-normal); + --f7-block-title-text-color: @text-secondary; + --f7-label-text-color: var(--text-normal); + --f7-page-bg-color: @background-tertiary; + --f7-list-bg-color: @background-primary; + --f7-list-chevron-icon-color: @text-tertiary; + .button { --f7-touch-ripple-color: transparent; } @@ -43,7 +55,6 @@ --f7-input-focused-border-color: @brandColor; --f7-label-focused-text-color: @brandColor; - --f7-dialog-button-text-color: @brandColor; .navbar { @@ -96,7 +107,7 @@ height: 32px; } label { - color: @black; + color: var(--text-normal); margin: 0 5px; line-height: 32px; } @@ -215,7 +226,8 @@ } } .tab-link-highlight { - --f7-tabbar-link-active-border-color: rgba(255,255,255,0.5); + // --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; @@ -224,6 +236,9 @@ } // List .list { + .item-inner { + color: var(--text-normal); + } li.no-indicator { .item-link { .item-inner{ @@ -237,7 +252,7 @@ .item-link { .item-inner { .item-after { - color: @black; + color: var(--text-normal); } } } diff --git a/apps/common/mobile/resources/less/common.less b/apps/common/mobile/resources/less/common.less index 553c5b6ea..c2b84fb26 100644 --- a/apps/common/mobile/resources/less/common.less +++ b/apps/common/mobile/resources/less/common.less @@ -166,7 +166,7 @@ .color-schemes-menu { cursor: pointer; display: block; - background-color: @white; + background-color: @background-tertiary; .item-inner { justify-content: flex-start; } @@ -181,7 +181,7 @@ } .item-title { margin-left: 20px; - color: #212121; + color: var(--text-normal); } } @@ -224,7 +224,7 @@ bottom: 0; z-index: 1; background-repeat: no-repeat; - .encoded-svg-background(''); + .encoded-svg-mask(''); } .active .item-inner:before { opacity: 1; @@ -268,7 +268,7 @@ right: -5px; bottom: -5px; z-index: 1; - .encoded-svg-background(''); + .encoded-svg-mask(''); } } diff --git a/apps/common/mobile/resources/less/icons.less b/apps/common/mobile/resources/less/icons.less index 0962430a8..9fa830713 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-background(''); } } diff --git a/apps/common/mobile/resources/less/material/icons.less b/apps/common/mobile/resources/less/material/icons.less index 64a54d2a4..b5fe07c8b 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-mask('', @brandColor); + .encoded-svg-mask(''); &:after { display: none; } @@ -21,7 +21,7 @@ &.icon-next { width: 20px; height: 20px; - .encoded-svg-mask('', @brandColor); + .encoded-svg-mask(''); &:after { display: none; } @@ -37,7 +37,7 @@ &.icon-edit { width: 22px; height: 22px; - .encoded-svg-mask('', @brandColor); + .encoded-svg-mask(''); } } } diff --git a/apps/presentationeditor/mobile/src/less/app-material.less b/apps/presentationeditor/mobile/src/less/app-material.less index e9df4e23b..a76684757 100644 --- a/apps/presentationeditor/mobile/src/less/app-material.less +++ b/apps/presentationeditor/mobile/src/less/app-material.less @@ -6,8 +6,8 @@ .device-android { --f7-navbar-bg-color: @brandColor; - --f7-navbar-link-color: @navBarIconColor; - --f7-navbar-text-color: @navBarIconColor; + --f7-navbar-link-color: @text-link; + --f7-navbar-text-color: @text-normal; // Main Toolbar #editor-navbar.navbar .right { diff --git a/apps/presentationeditor/mobile/src/less/icons-ios.less b/apps/presentationeditor/mobile/src/less/icons-ios.less index 79b7e8ca6..0c53f4ed0 100644 --- a/apps/presentationeditor/mobile/src/less/icons-ios.less +++ b/apps/presentationeditor/mobile/src/less/icons-ios.less @@ -4,139 +4,139 @@ &.icon-search { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-burger { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-edit-settings { width: 22px; height: 22px; - .encoded-svg-mask('', @brandColor); + .encoded-svg-mask(''); } &.icon-play { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.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-reader { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-download { width: 22px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-print { width: 22px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-spellcheck { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-info { 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-about { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-help { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-setup { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-versions { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-text-additional { 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(''); } &.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-align-center { @@ -178,79 +178,79 @@ &.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(''); } &.icon-expand-down { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-pagebreak { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-sectionbreak { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-stringbreak { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-pagenumber { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-link { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-image-library { width: 22px; height: 22px; - .encoded-svg-background('icons_for_svg'); + .encoded-svg-mask('icons_for_svg'); } &.icon-text-valign-top { @@ -276,61 +276,61 @@ &.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 @@ -338,73 +338,73 @@ &.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 { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-move-foreground { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-align-left { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-align-center { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-align-right { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-align-top { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-align-middle { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-align-bottom { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-align-horizontal { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-align-vertical { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } // Formats @@ -412,106 +412,106 @@ &.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-pptx { width: 30px; height: 30px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-format-potx { width: 30px; height: 30px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-format-odp { width: 30px; height: 30px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-format-otp { width: 30px; height: 30px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } // Collaboration &.icon-users { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-app-settings { 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(''); } //Insert &.icon-add-slide { 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(''); } &.icon-add-table { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } } @@ -520,25 +520,25 @@ &.icon-add-slide { 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/presentationeditor/mobile/src/less/icons-material.less b/apps/presentationeditor/mobile/src/less/icons-material.less index 5c443f87a..be4e86835 100644 --- a/apps/presentationeditor/mobile/src/less/icons-material.less +++ b/apps/presentationeditor/mobile/src/less/icons-material.less @@ -4,25 +4,25 @@ &.icon-expand-up { width: 17px; height: 17px; - .encoded-svg-mask('', @black); + .encoded-svg-mask(''); } &.icon-expand-down { width: 17px; height: 17px; - .encoded-svg-mask('', @black); + .encoded-svg-mask(''); } &.icon-search { width: 22px; height: 22px; - .encoded-svg-mask('', @brandColor); + .encoded-svg-mask(''); } &.icon-edit { width: 22px; height: 22px; - .encoded-svg-mask('', @brandColor); + .encoded-svg-mask(''); } &.icon-edit-settings { @@ -34,61 +34,61 @@ &.icon-play { width: 22px; height: 22px; - .encoded-svg-mask('', @brandColor); + .encoded-svg-mask('', @toolbar-icons); } &.icon-reader { width: 22px; height: 22px; - .encoded-svg-mask('', @brandColor); + .encoded-svg-mask(''); } &.icon-download { width: 22px; height: 22px; - .encoded-svg-mask('', @brandColor); + .encoded-svg-mask(''); } &.icon-print { width: 22px; height: 22px; - .encoded-svg-mask('', @brandColor); + .encoded-svg-mask(''); } &.icon-spellcheck { width: 22px; height: 22px; - .encoded-svg-mask('', @brandColor); + .encoded-svg-mask(''); } &.icon-info { width: 22px; height: 22px; - .encoded-svg-mask('', @brandColor); + .encoded-svg-mask(''); } &.icon-about { width: 22px; height: 22px; - .encoded-svg-mask('', @brandColor); + .encoded-svg-mask(''); } &.icon-help { width: 22px; height: 22px; - .encoded-svg-mask('', @brandColor); + .encoded-svg-mask(''); } &.icon-setup { width: 22px; height: 22px; - .encoded-svg-mask('', @brandColor); + .encoded-svg-mask(''); } &.icon-versions { width: 22px; height: 22px; - .encoded-svg-mask('', @brandColor); + .encoded-svg-mask(''); } //&.icon-text-additional { @@ -124,121 +124,121 @@ &.icon-text-align-center { width: 22px; height: 22px; - .encoded-svg-mask('', @brandColor); + .encoded-svg-mask(''); } &.icon-text-align-just { width: 22px; height: 22px; - .encoded-svg-mask('', @brandColor); + .encoded-svg-mask(''); } &.icon-text-align-left { width: 22px; height: 22px; - .encoded-svg-mask('', @brandColor); + .encoded-svg-mask(''); } &.icon-text-align-right { width: 22px; height: 22px; - .encoded-svg-mask('', @brandColor); + .encoded-svg-mask(''); } &.icon-de-indent { width: 22px; height: 22px; - .encoded-svg-mask('', @brandColor); + .encoded-svg-mask(''); } &.icon-in-indent { width: 22px; height: 22px; - .encoded-svg-mask('', @brandColor); + .encoded-svg-mask(''); } &.icon-table-add-column-left { width: 22px; height: 22px; - .encoded-svg-mask('', @brandColor); + .encoded-svg-mask(''); } &.icon-table-add-column-right { width: 22px; height: 22px; - .encoded-svg-mask('', @brandColor); + .encoded-svg-mask(''); } &.icon-table-add-row-above { width: 22px; height: 22px; - .encoded-svg-mask('', @brandColor); + .encoded-svg-mask(''); } &.icon-table-add-row-below { width: 22px; height: 22px; - .encoded-svg-mask('', @brandColor); + .encoded-svg-mask(''); } &.icon-table-remove-column { width: 22px; height: 22px; - .encoded-svg-mask('', @brandColor); + .encoded-svg-mask(''); } &.icon-table-remove-row { width: 22px; height: 22px; - .encoded-svg-mask('', @brandColor); + .encoded-svg-mask(''); } &.icon-pagebreak { width: 22px; height: 22px; - .encoded-svg-mask('', @brandColor); + .encoded-svg-mask(''); } &.icon-sectionbreak { width: 22px; height: 22px; - .encoded-svg-mask('', @brandColor); + .encoded-svg-mask(''); } &.icon-stringbreak { width: 22px; height: 22px; - .encoded-svg-mask('', @brandColor); + .encoded-svg-mask(''); } &.icon-pagenumber { width: 22px; height: 22px; - .encoded-svg-mask('', @brandColor); + .encoded-svg-mask(''); } &.icon-image-library { width: 24px; height: 24px; - .encoded-svg-mask('', @brandColor); + .encoded-svg-mask(''); } &.icon-text-valign-top { width: 22px; height: 22px; - .encoded-svg-mask('', @brandColor); + .encoded-svg-mask(''); } &.icon-text-valign-middle { width: 22px; height: 22px; - .encoded-svg-mask('', @brandColor); + .encoded-svg-mask(''); } &.icon-text-valign-bottom { width: 22px; height: 22px; - .encoded-svg-mask('', @brandColor); + .encoded-svg-mask(''); } // Presets of table borders @@ -246,61 +246,61 @@ &.icon-table-borders-all { width: 28px; height: 28px; - .encoded-svg-mask('', @brandColor); + .encoded-svg-mask(''); } &.icon-table-borders-none { width: 28px; height: 28px; - .encoded-svg-mask('', @brandColor); + .encoded-svg-mask(''); } &.icon-table-borders-inner { width: 28px; height: 28px; - .encoded-svg-mask('', @brandColor); + .encoded-svg-mask(''); } &.icon-table-borders-outer { width: 28px; height: 28px; - .encoded-svg-mask('', @brandColor); + .encoded-svg-mask(''); } &.icon-table-borders-left { width: 28px; height: 28px; - .encoded-svg-mask('', @brandColor); + .encoded-svg-mask(''); } &.icon-table-borders-center { width: 28px; height: 28px; - .encoded-svg-mask('', @brandColor); + .encoded-svg-mask(''); } &.icon-table-borders-right { width: 28px; height: 28px; - .encoded-svg-mask('', @brandColor); + .encoded-svg-mask(''); } &.icon-table-borders-top { width: 28px; height: 28px; - .encoded-svg-mask('', @brandColor); + .encoded-svg-mask(''); } &.icon-table-borders-middle { width: 28px; height: 28px; - .encoded-svg-mask('', @brandColor); + .encoded-svg-mask(''); } &.icon-table-borders-bottom { width: 28px; height: 28px; - .encoded-svg-mask('', @brandColor); + .encoded-svg-mask(''); } // Reorder @@ -308,73 +308,73 @@ &.icon-move-backward { width: 28px; height: 28px; - .encoded-svg-mask('', @brandColor); + .encoded-svg-mask(''); } &.icon-move-forward { width: 28px; height: 28px; - .encoded-svg-mask('', @brandColor); + .encoded-svg-mask(''); } &.icon-move-background { width: 28px; height: 28px; - .encoded-svg-mask('', @brandColor); + .encoded-svg-mask(''); } &.icon-move-foreground { width: 28px; height: 28px; - .encoded-svg-mask('', @brandColor); + .encoded-svg-mask(''); } &.icon-align-left { width: 22px; height: 22px; - .encoded-svg-mask('', @brandColor); + .encoded-svg-mask(''); } &.icon-align-center { width: 22px; height: 22px; - .encoded-svg-mask('', @brandColor); + .encoded-svg-mask(''); } &.icon-align-right { width: 22px; height: 22px; - .encoded-svg-mask('', @brandColor); + .encoded-svg-mask(''); } &.icon-align-top { width: 22px; height: 22px; - .encoded-svg-mask('', @brandColor); + .encoded-svg-mask(''); } &.icon-align-middle { width: 22px; height: 22px; - .encoded-svg-mask('', @brandColor); + .encoded-svg-mask(''); } &.icon-align-bottom { width: 22px; height: 22px; - .encoded-svg-mask('', @brandColor); + .encoded-svg-mask(''); } &.icon-align-horizontal { width: 22px; height: 22px; - .encoded-svg-mask('', @brandColor); + .encoded-svg-mask(''); } &.icon-align-vertical { width: 22px; height: 22px; - .encoded-svg-mask('', @brandColor); + .encoded-svg-mask(''); } // Formats @@ -382,104 +382,104 @@ &.icon-format-pdf { width: 30px; height: 30px; - .encoded-svg-mask('', @brandColor); + .encoded-svg-mask(''); } &.icon-format-pdfa { width: 30px; height: 30px; - .encoded-svg-mask('', @brandColor); + .encoded-svg-mask(''); } &.icon-format-pptx { width: 30px; height: 30px; - .encoded-svg-mask('', @brandColor); + .encoded-svg-mask(''); } &.icon-format-potx { width: 30px; height: 30px; - .encoded-svg-mask('', @brandColor); + .encoded-svg-mask(''); } &.icon-format-odp { width: 30px; height: 30px; - .encoded-svg-mask('', @brandColor); + .encoded-svg-background(''); } &.icon-format-otp { width: 30px; height: 30px; - .encoded-svg-mask('', @brandColor); + .encoded-svg-mask(''); } // Collaboration &.icon-users { width: 24px; height: 24px; - .encoded-svg-mask('', @brandColor); + .encoded-svg-mask(''); } &.icon-app-settings { width: 24px; height: 24px; - .encoded-svg-mask('', @brandColor); + .encoded-svg-mask(''); } //Comments &.icon-menu-comment { width: 24px; height: 24px; - .encoded-svg-mask('', @brandColor); + .encoded-svg-mask(''); } &.icon-resolve-comment { width: 24px; height: 24px; - .encoded-svg-mask('', @brandColor); + .encoded-svg-mask(''); } &.icon-resolve-comment.check { width: 24px; height: 24px; - .encoded-svg-mask('', @brandColor); + .encoded-svg-mask(''); } &.icon-done-comment { width: 24px; height: 24px; - .encoded-svg-mask('', @brandColor); + .encoded-svg-mask(''); } &.icon-insert-comment { width: 24px; height: 24px; - .encoded-svg-mask('', @brandColor); + .encoded-svg-mask(''); } &.icon-done-comment-white { width: 24px; height: 24px; - .encoded-svg-mask('', @brandColor); + .encoded-svg-mask(''); } &.icon-add-table { width: 24px; height: 24px; - .encoded-svg-mask('', @brandColor); + .encoded-svg-mask(''); } &.icon-link { width: 24px; height: 24px; - .encoded-svg-mask('', @brandColor); + .encoded-svg-mask(''); } &.icon-plus { width: 22px; height: 22px; - .encoded-svg-mask('', @navBarIconColor); + .encoded-svg-mask('', @toolbar-icons); } } @@ -495,91 +495,95 @@ &.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-search { width: 22px; height: 22px; - .encoded-svg-mask('', @navBarIconColor); + .encoded-svg-mask('', @toolbar-icons); } &.icon-burger { 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-play { 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-back { + color: @toolbar-icons; } &.icon-expand-down { width: 22px; height: 22px; - .encoded-svg-mask('', @navBarIconColor); + .encoded-svg-mask('', @toolbar-icons); } &.icon-add-slide { width: 24px; height: 24px; - .encoded-svg-mask('', @navBarIconColor); + .encoded-svg-mask('', @toolbar-icons); } &.icon-add-shape { width: 24px; height: 24px; - .encoded-svg-mask('', @navBarIconColor); + .encoded-svg-mask('', @toolbar-icons); } &.icon-add-image { width: 24px; height: 24px; - .encoded-svg-mask('', @navBarIconColor); + .encoded-svg-mask('', @toolbar-icons); } &.icon-add-other { width: 24px; height: 24px; - .encoded-svg-mask('', @navBarIconColor); + .encoded-svg-mask('', @toolbar-icons); } &.icon-close-comment { width: 24px; height: 24px; - .encoded-svg-mask('', @navBarIconColor); + .encoded-svg-mask('', @toolbar-icons); } } } From c9aa0168e2088d7108560d3ec5b1c4b7aa783be0 Mon Sep 17 00:00:00 2001 From: ShimaginAndrey Date: Wed, 10 Nov 2021 09:39:21 +0300 Subject: [PATCH 07/26] 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 9ee2d886540ceb7165b6b8e7e822536ca77e8058 Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Thu, 11 Nov 2021 01:18:55 +0400 Subject: [PATCH 08/26] [common] Edit styles --- apps/common/mobile/resources/less/about.less | 4 +- .../mobile/resources/less/collaboration.less | 6 +- .../resources/less/colors-table-dark.less | 1 + .../mobile/resources/less/colors-table.less | 1 + .../mobile/resources/less/comments.less | 21 +++--- .../resources/less/common-material.less | 72 ++++++++++--------- apps/common/mobile/resources/less/common.less | 6 +- .../less/material/_collaboration.less | 1 + .../resources/less/material/comments.less | 2 +- 9 files changed, 64 insertions(+), 50 deletions(-) diff --git a/apps/common/mobile/resources/less/about.less b/apps/common/mobile/resources/less/about.less index 3072fb575..132de3586 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: var(--text-normal); // @common-image-about-path - defined in webpack config .about { @@ -21,6 +21,7 @@ h3 { font-weight: normal; margin: 0; + color: @text-normal; &.vendor { color: @text-normal; @@ -30,6 +31,7 @@ } p > label { + color: @text-normal; margin-right: 5px; } diff --git a/apps/common/mobile/resources/less/collaboration.less b/apps/common/mobile/resources/less/collaboration.less index eb0265178..a03a418ad 100644 --- a/apps/common/mobile/resources/less/collaboration.less +++ b/apps/common/mobile/resources/less/collaboration.less @@ -1,8 +1,8 @@ .page.page-users { - background-color: @white; + // background-color: @white; .block-title { text-transform: none; - color: @black; + // color: @black; margin-top: 20px; margin-bottom: 20px; font-size: 17px; @@ -15,7 +15,7 @@ text-align: center; border-radius: 50px; line-height: 40px; - color: @white; + color: @fill-white; font-size: 18px; } } \ No newline at end of file diff --git a/apps/common/mobile/resources/less/colors-table-dark.less b/apps/common/mobile/resources/less/colors-table-dark.less index f2c790eff..5042db029 100644 --- a/apps/common/mobile/resources/less/colors-table-dark.less +++ b/apps/common/mobile/resources/less/colors-table-dark.less @@ -12,6 +12,7 @@ --text-tertiary: fade(#FFF, 40%); --text-link: #1976D2; --text-error: #FF453A; + --text-on-brand: #000; --fill-black: #000; --fill-white: #FFF; diff --git a/apps/common/mobile/resources/less/colors-table.less b/apps/common/mobile/resources/less/colors-table.less index 40717c492..715160830 100644 --- a/apps/common/mobile/resources/less/colors-table.less +++ b/apps/common/mobile/resources/less/colors-table.less @@ -17,6 +17,7 @@ --text-tertiary: fade(#000, 40%); --text-link: #007AFF; --text-error: #FF3B30; + --text-on-brand: #fff; --fill-black: #000; --fill-white: #FFF; diff --git a/apps/common/mobile/resources/less/comments.less b/apps/common/mobile/resources/less/comments.less index 3e60d00e2..b87f9e505 100644 --- a/apps/common/mobile/resources/less/comments.less +++ b/apps/common/mobile/resources/less/comments.less @@ -36,7 +36,7 @@ } .wrap-textarea { textarea { - color: @black; + color: @fill-black; width: 100%; } } @@ -75,14 +75,14 @@ .user-name { font-size: 16px; line-height: 22px; - color: @black; + color: @text-normal; margin: 0; font-weight: 700; } .comment-date, .reply-date { font-size: 12px; line-height: 18px; - color: @comment-date; + color: @text-secondary; margin: 0; } .comment-quote { @@ -94,7 +94,7 @@ font-size: 14px; } .comment-text, .reply-text { - color: @black; + color: @text-normal; font-size: 14px; line-height: 25px; margin: 0; @@ -130,11 +130,13 @@ display: flex; justify-content: center; height: 40px; + background-color: @background-primary; .icon-swipe { margin-top: 8px; width: 40px; height: 4px; - background: @swipe-icon; + // background: @swipe-icon; + background: @background-menu-divider; border-radius: 2px; } } @@ -143,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; @@ -168,7 +170,7 @@ } #view-comment-popover { - background-color: @white; + background-color: @background-primary; .pages { position: absolute; } @@ -197,7 +199,8 @@ .page-current-comment { position: relative; .page-content { - background-color: @white; + // background-color: @fill-white; + background-color: @background-primary; } .comment-list { ul { @@ -227,7 +230,7 @@ .no-comments { text-align: center; margin-top: 35px; - color: var(--text-normal); + color: @text-normal; } .actions-modal.modal-in { diff --git a/apps/common/mobile/resources/less/common-material.less b/apps/common/mobile/resources/less/common-material.less index c3b22e447..d3c703994 100644 --- a/apps/common/mobile/resources/less/common-material.less +++ b/apps/common/mobile/resources/less/common-material.less @@ -5,6 +5,8 @@ @white: #fff; @darkGreen: #40865c; @darkGrey: #757575; + @text-normal: var(--text-normal); + @text-on-brand: var(--text-on-brand); @touchColor: rgba(255,255,255,0.1); @@ -12,15 +14,11 @@ --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; @@ -34,15 +32,6 @@ --f7-link-highlight-color: transparent; --f7-link-touch-ripple-color: @touchColor; - --f7-text-color: var(--text-normal); - --f7-list-item-title-text-color: var(--text-normal); - --f7-list-item-text-text-color: var(--text-normal); - --f7-block-title-text-color: @text-secondary; - --f7-label-text-color: var(--text-normal); - --f7-page-bg-color: @background-tertiary; - --f7-list-bg-color: @background-primary; - --f7-list-chevron-icon-color: @text-tertiary; - .button { --f7-touch-ripple-color: transparent; } @@ -78,6 +67,20 @@ } } + .page { + --f7-text-color: @text-normal; + --f7-list-item-title-text-color: @text-normal; + --f7-list-item-text-text-color: @text-normal; + --f7-block-title-text-color: @text-secondary; + --f7-input-placeholder-color: @text-secondary; + --f7-label-text-color: @text-normal; + --f7-page-bg-color: @background-tertiary; + --f7-list-bg-color: @background-primary; + --f7-list-item-border-color: @background-menu-divider; + --f7-list-chevron-icon-color: @text-tertiary; + --f7-toggle-inactive-color: @background-menu-divider; + } + .add-popup { .view{ .block-title{ @@ -107,7 +110,7 @@ height: 32px; } label { - color: var(--text-normal); + color: @text-normal; margin: 0 5px; line-height: 32px; } @@ -142,7 +145,7 @@ } .button-fill { - color: @white; + color: @text-on-brand; // background-color: @brandColor; background-color: transparent; } @@ -152,18 +155,19 @@ } .button-red { - color: @white; - background-color: @red; + color: @text-on-brand; + background-color: @text-error; } .buttons-list { ul { + background-color: @background-tertiary; &::before, &::after { display: none; } li { margin: 20px 16px; - color: @white; + color: @fill-white; border-radius: 2px; text-transform: uppercase; height: 36px; @@ -180,7 +184,7 @@ } .button-fill .list-button { background-color: @brandColor; - color: @white; + color: @text-on-brand; height: 36px; text-align: center; line-height: 36px; @@ -195,7 +199,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 { @@ -219,9 +223,10 @@ opacity: 0.5; } &.tab-link-active { - color: @white; + color: @fill-white; i.icon { opacity: 1; + background-color: @fill-white; } } } @@ -237,7 +242,7 @@ // List .list { .item-inner { - color: var(--text-normal); + color: @text-normal; } li.no-indicator { .item-link { @@ -252,7 +257,7 @@ .item-link { .item-inner { .item-after { - color: var(--text-normal); + color: @text-normal; } } } @@ -295,10 +300,11 @@ margin-left: 0; } &.active { - color: @white; + color: @fill-white; background-color: @brandColor; + // background-color: fade(@brandColor, 20%); i.icon { - background-color: @white; + background-color: @fill-white; } } } @@ -365,7 +371,7 @@ .thumb { width: 100%; height: 100%; - background-color: @white; + background-color: @fill-white; background-size: cover; label { @@ -444,7 +450,7 @@ height: 18px; margin-top: -8px; &:after { - color: @white; + color: @fill-white; font-size: 19px; line-height: 19px; } @@ -452,7 +458,7 @@ .searchbar-icon { &:after { - color: @white; + color: @fill-white; font-size: 19px; } } @@ -465,11 +471,11 @@ appearance: none; border-radius: 0; font-family: inherit; - color: @white; + color: @fill-white; font-size: 16px; font-weight: 400; padding: 0; - border-bottom: 1px solid @white; + border-bottom: 1px solid @fill-white; height: 100%; padding: 0 36px 0 24px; background-color: transparent; @@ -478,11 +484,11 @@ opacity: 1; background-size: 24px 24px; transition-duration: .3s; - .encoded-svg-background(''); + .encoded-svg-mask('', @fill-white); } .searchbar input[type=search]::placeholder { - color: @white; + color: @fill-white; } .navbar { @@ -510,7 +516,7 @@ height: 56px; } .buttons-row-replace a { - color: @white; + color: @fill-white; padding: 0; } .searchbar .buttons-row { diff --git a/apps/common/mobile/resources/less/common.less b/apps/common/mobile/resources/less/common.less index c2b84fb26..b466b9be6 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: @text-normal; } } } @@ -181,7 +181,7 @@ } .item-title { margin-left: 20px; - color: var(--text-normal); + color: @text-normal; } } @@ -224,7 +224,7 @@ bottom: 0; z-index: 1; background-repeat: no-repeat; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } .active .item-inner:before { opacity: 1; diff --git a/apps/common/mobile/resources/less/material/_collaboration.less b/apps/common/mobile/resources/less/material/_collaboration.less index e11fbcc2e..d3b882d51 100644 --- a/apps/common/mobile/resources/less/material/_collaboration.less +++ b/apps/common/mobile/resources/less/material/_collaboration.less @@ -316,6 +316,7 @@ display: flex; justify-content: center; height: 40px; + background-color: @background-primary; .icon-swipe { margin-top: 8px; width: 40px; diff --git a/apps/common/mobile/resources/less/material/comments.less b/apps/common/mobile/resources/less/material/comments.less index 92616d7c2..4b877c191 100644 --- a/apps/common/mobile/resources/less/material/comments.less +++ b/apps/common/mobile/resources/less/material/comments.less @@ -17,7 +17,7 @@ display: flex; .initials { border-radius: 50px; - color: @white; + color: @fill-white; display: flex; justify-content: center; align-items: center; From 0af52c1df5ccfb0e49964900205ea49b81786274 Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Thu, 11 Nov 2021 01:36:44 +0400 Subject: [PATCH 09/26] [common] Correct searchbar and icons --- apps/common/mobile/resources/less/common-material.less | 2 +- .../mobile/src/less/icons-material.less | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/apps/common/mobile/resources/less/common-material.less b/apps/common/mobile/resources/less/common-material.less index d3c703994..740f9f021 100644 --- a/apps/common/mobile/resources/less/common-material.less +++ b/apps/common/mobile/resources/less/common-material.less @@ -484,7 +484,7 @@ opacity: 1; background-size: 24px 24px; transition-duration: .3s; - .encoded-svg-mask('', @fill-white); + .encoded-svg-background(''); } .searchbar input[type=search]::placeholder { diff --git a/apps/presentationeditor/mobile/src/less/icons-material.less b/apps/presentationeditor/mobile/src/less/icons-material.less index be4e86835..c162a4162 100644 --- a/apps/presentationeditor/mobile/src/less/icons-material.less +++ b/apps/presentationeditor/mobile/src/less/icons-material.less @@ -394,25 +394,25 @@ &.icon-format-pptx { width: 30px; height: 30px; - .encoded-svg-mask(''); + .encoded-svg-background(''); } &.icon-format-potx { width: 30px; height: 30px; - .encoded-svg-mask(''); + .encoded-svg-background(''); } &.icon-format-odp { width: 30px; height: 30px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-format-otp { width: 30px; height: 30px; - .encoded-svg-mask(''); + .encoded-svg-background(''); } // Collaboration From 6e7288fa13e749b880b32c8342e57404bedb7cbd Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Thu, 11 Nov 2021 16:03:10 +0400 Subject: [PATCH 10/26] Correct logo and fonts --- apps/common/mobile/resources/less/about.less | 14 ++++++++++---- .../mobile/resources/less/colors-table-dark.less | 2 ++ .../common/mobile/resources/less/colors-table.less | 2 ++ apps/common/mobile/resources/less/common.less | 3 +++ 4 files changed, 17 insertions(+), 4 deletions(-) diff --git a/apps/common/mobile/resources/less/about.less b/apps/common/mobile/resources/less/about.less index 132de3586..dadcafe97 100644 --- a/apps/common/mobile/resources/less/about.less +++ b/apps/common/mobile/resources/less/about.less @@ -36,9 +36,15 @@ } .logo { - display: inline-block; - width: 100%; - height: 55px; - background: ~"url(@{common-image-about-path}/logo_s.svg) no-repeat center"; + display: inline-block; + width: 100%; + 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"; + } +} \ No newline at end of file diff --git a/apps/common/mobile/resources/less/colors-table-dark.less b/apps/common/mobile/resources/less/colors-table-dark.less index 5042db029..485e7d387 100644 --- a/apps/common/mobile/resources/less/colors-table-dark.less +++ b/apps/common/mobile/resources/less/colors-table-dark.less @@ -30,5 +30,7 @@ --toolbar-tab-normal: #757575; --component-disabled-opacity: .4; + + --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 715160830..cf7d4a7b4 100644 --- a/apps/common/mobile/resources/less/colors-table.less +++ b/apps/common/mobile/resources/less/colors-table.less @@ -28,6 +28,8 @@ --toolbar-tab-normal:fade(#FFF, 50%); --component-disabled-opacity: .4; + + --image-border-types-filter: none; } @brand-word: var(--brand-word); diff --git a/apps/common/mobile/resources/less/common.less b/apps/common/mobile/resources/less/common.less index b466b9be6..7d88042aa 100644 --- a/apps/common/mobile/resources/less/common.less +++ b/apps/common/mobile/resources/less/common.less @@ -92,6 +92,9 @@ max-height: initial; -webkit-line-clamp: initial; } + .font-item img { + filter: var(--image-border-types-filter, none) + } } .shapes { From 2d39a808464946e344a3da35a487b38c2ac57109 Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Thu, 11 Nov 2021 20:22:42 +0400 Subject: [PATCH 11/26] Edit and add styles --- .../mobile/resources/less/common-ios.less | 63 +++++++++++++------ .../resources/less/common-material.less | 2 +- .../mobile/resources/less/ios/icons.less | 13 +++- .../mobile/src/less/app-ios.less | 2 +- .../mobile/src/less/icons-ios.less | 38 +++++------ .../mobile/src/less/icons-material.less | 9 +-- 6 files changed, 79 insertions(+), 48 deletions(-) diff --git a/apps/common/mobile/resources/less/common-ios.less b/apps/common/mobile/resources/less/common-ios.less index 580e6e563..b47d6a986 100644 --- a/apps/common/mobile/resources/less/common-ios.less +++ b/apps/common/mobile/resources/less/common-ios.less @@ -2,20 +2,20 @@ .device-ios .app-layout { @blockTitleColor: #6d6d72; @item-border-color: #c8c7cc; - --f7-list-item-border-color: @item-border-color; @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-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; @@ -25,19 +25,37 @@ --f7-dialog-button-text-color: @brandColor; + --f7-list-item-border-color: @background-menu-divider; + + --f7-page-bg-color: @background-tertiary; + --f7-list-item-title-text-color: @text-normal; + --f7-list-item-text-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; + --f7-actions-button-border-color: @background-menu-divider; + --f7-popover-bg-color: @background-primary; + // Main Toolbar #editor-navbar.navbar .right a + a, #editor-navbar.navbar .left a + a { margin-left: 0; } - .navbar, .subnavbar { + .navbar, .navbar-bg, .subnavbar { a.btn-doc-back { width: 22px; } background-color: var(--f7-navbar-bg-color); .title { font-weight: 600; + color: @text-normal; } .navbar-inner, .subnavbar-inner { z-index: auto; @@ -172,7 +190,7 @@ .thumb { width: 100%; height: 100%; - background-color: @white; + background-color: @fill-white; background-size: cover; label { @@ -208,6 +226,9 @@ } .list { + li { + color: @text-normal; + } .item-content { .color-preview { width: 22px; @@ -240,8 +261,9 @@ } .item-inner { padding-top: 7px; + color: @text-normal; .item-after { - color: @black; + color: @text-normal; .after-start { margin: 0 5px; } @@ -312,7 +334,7 @@ } &.tab-link-active { background: @brandColor; - color: @white; + color: @fill-white; } } } @@ -323,7 +345,7 @@ text-decoration: none; text-align: center; display: block; - border-radius: 5px; + // border-radius: 5px; line-height: 27px; box-sizing: border-box; background: 0 0; @@ -340,21 +362,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: @white; + color: @text-error; + background-color: @fill-white; } .buttons-list { @@ -371,7 +393,7 @@ } .button-red .list-button { - color: red; + color: @text-error; } .list-button { @@ -393,7 +415,7 @@ .shapes { .page-content { - background: @white; + background: @fill-white; } } @@ -424,7 +446,7 @@ .dataview, #add-table, #add-shape, #add-slide, #add-chart { &.page-content, .page-content { - background-color: @white; + background-color: @background-tertiary; } } @@ -479,11 +501,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; } @@ -549,7 +571,8 @@ } .actions-button { - background: rgba(255,255,255,.95); + // 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 740f9f021..707fba6ee 100644 --- a/apps/common/mobile/resources/less/common-material.less +++ b/apps/common/mobile/resources/less/common-material.less @@ -484,7 +484,7 @@ opacity: 1; background-size: 24px 24px; transition-duration: .3s; - .encoded-svg-background(''); + .encoded-svg-background(''); } .searchbar input[type=search]::placeholder { diff --git a/apps/common/mobile/resources/less/ios/icons.less b/apps/common/mobile/resources/less/ios/icons.less index 718212a95..0456b303c 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; @@ -13,7 +20,7 @@ &.icon-prev { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); &:after { display: none; } @@ -21,7 +28,7 @@ &.icon-next { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); &:after { display: none; } @@ -29,7 +36,7 @@ &.icon-edit { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } } } diff --git a/apps/presentationeditor/mobile/src/less/app-ios.less b/apps/presentationeditor/mobile/src/less/app-ios.less index 71f59edee..84d3fca96 100644 --- a/apps/presentationeditor/mobile/src/less/app-ios.less +++ b/apps/presentationeditor/mobile/src/less/app-ios.less @@ -1,7 +1,7 @@ .device-ios { .view { .page-content{ - background: #fff; + background: @background-tertiary; } } } diff --git a/apps/presentationeditor/mobile/src/less/icons-ios.less b/apps/presentationeditor/mobile/src/less/icons-ios.less index 0c53f4ed0..041625165 100644 --- a/apps/presentationeditor/mobile/src/less/icons-ios.less +++ b/apps/presentationeditor/mobile/src/less/icons-ios.less @@ -45,13 +45,13 @@ &.icon-download { width: 22px; - height: 28px; + height: 22px; .encoded-svg-mask(''); } &.icon-print { width: 22px; - height: 28px; + height: 22px; .encoded-svg-mask(''); } @@ -250,7 +250,7 @@ &.icon-image-library { width: 22px; height: 22px; - .encoded-svg-mask('icons_for_svg'); + .encoded-svg-background('icons_for_svg'); } &.icon-text-valign-top { @@ -368,7 +368,7 @@ &.icon-align-center { width: 22px; height: 22px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } &.icon-align-right { @@ -449,69 +449,69 @@ &.icon-users { width: 24px; height: 24px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } &.icon-app-settings { width: 24px; height: 24px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } //comments &.icon-menu-comment { width: 30px; height: 30px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } &.icon-resolve-comment { width: 30px; height: 30px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } &.icon-resolve-comment.check { width: 30px; height: 30px; - .encoded-svg-mask(''); + .encoded-svg-background(''); } &.icon-insert-comment { width: 24px; height: 24px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } //Insert &.icon-add-slide { width: 24px; height: 24px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } &.icon-add-shape { width: 24px; height: 24px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } &.icon-add-image { width: 24px; height: 24px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } &.icon-add-other { width: 24px; height: 24px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } &.icon-add-table { width: 24px; height: 24px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } } @@ -520,25 +520,25 @@ &.icon-add-slide { width: 24px; height: 24px; - .encoded-svg-mask(''); + .encoded-svg-mask('', @fill-white); } &.icon-add-shape { width: 24px; height: 24px; - .encoded-svg-mask(''); + .encoded-svg-mask('', @fill-white); } &.icon-add-image { width: 24px; height: 24px; - .encoded-svg-mask(''); + .encoded-svg-mask('', @fill-white); } &.icon-add-other { width: 24px; height: 24px; - .encoded-svg-mask(''); + .encoded-svg-mask('', @fill-white); } } } diff --git a/apps/presentationeditor/mobile/src/less/icons-material.less b/apps/presentationeditor/mobile/src/less/icons-material.less index c162a4162..04db4d271 100644 --- a/apps/presentationeditor/mobile/src/less/icons-material.less +++ b/apps/presentationeditor/mobile/src/less/icons-material.less @@ -394,25 +394,26 @@ &.icon-format-pptx { width: 30px; height: 30px; - .encoded-svg-background(''); + // xml:space="preserve" + .encoded-svg-mask(''); } &.icon-format-potx { width: 30px; height: 30px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-format-odp { width: 30px; height: 30px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } &.icon-format-otp { width: 30px; height: 30px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } // Collaboration From f24d9c2ff43875c13d716466e4e026c793a338c9 Mon Sep 17 00:00:00 2001 From: ShimaginAndrey Date: Fri, 12 Nov 2021 10:37:06 +0300 Subject: [PATCH 12/26] 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 6fdca2796189ebf11c7699e027239a27efbd8200 Mon Sep 17 00:00:00 2001 From: Maxim Kadushkin Date: Fri, 12 Nov 2021 14:00:43 +0300 Subject: [PATCH 13/26] [PE mobile] fix svg mask stylesheet --- apps/common/mobile/resources/less/_mixins.less | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/common/mobile/resources/less/_mixins.less b/apps/common/mobile/resources/less/_mixins.less index dda2a2d7f..775bfb91a 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}"); + mask-size: contain; } .encoded-svg-uncolored-mask(@svg) { From 70754ae4a5240e660d64e5f53cac07bd6491b217 Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Sat, 13 Nov 2021 02:05:39 +0400 Subject: [PATCH 14/26] Edit and add styles v.2 --- .../mobile/resources/less/colors-table-dark.less | 3 +-- .../mobile/resources/less/colors-table.less | 1 - apps/common/mobile/resources/less/comments.less | 4 +++- .../common/mobile/resources/less/common-ios.less | 9 ++++++++- .../mobile/resources/less/common-material.less | 8 ++++---- apps/common/mobile/resources/less/common.less | 4 +++- .../mobile/resources/less/ios/comments.less | 1 + .../mobile/resources/less/material/comments.less | 1 + apps/presentationeditor/mobile/src/less/app.less | 1 + .../mobile/src/less/icons-ios.less | 2 +- .../mobile/src/less/icons-material.less | 16 ++++++---------- 11 files changed, 29 insertions(+), 21 deletions(-) diff --git a/apps/common/mobile/resources/less/colors-table-dark.less b/apps/common/mobile/resources/less/colors-table-dark.less index 485e7d387..4b7ce6d5a 100644 --- a/apps/common/mobile/resources/less/colors-table-dark.less +++ b/apps/common/mobile/resources/less/colors-table-dark.less @@ -12,14 +12,13 @@ --text-tertiary: fade(#FFF, 40%); --text-link: #1976D2; --text-error: #FF453A; - --text-on-brand: #000; --fill-black: #000; --fill-white: #FFF; --brand-word: #208BFF; --brand-cell: #34C759; - --brand-slide: #FF4A31; + --brand-slide: #FE8C33; --brand-primary: #3E9CF0; --brand-secondary: #FFAF49; --brand-text-on-brand: #000; diff --git a/apps/common/mobile/resources/less/colors-table.less b/apps/common/mobile/resources/less/colors-table.less index cf7d4a7b4..d6f5536f5 100644 --- a/apps/common/mobile/resources/less/colors-table.less +++ b/apps/common/mobile/resources/less/colors-table.less @@ -17,7 +17,6 @@ --text-tertiary: fade(#000, 40%); --text-link: #007AFF; --text-error: #FF3B30; - --text-on-brand: #fff; --fill-black: #000; --fill-white: #FFF; diff --git a/apps/common/mobile/resources/less/comments.less b/apps/common/mobile/resources/less/comments.less index b87f9e505..905b03121 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: @fill-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 b47d6a986..2e5b4784a 100644 --- a/apps/common/mobile/resources/less/common-ios.less +++ b/apps/common/mobile/resources/less/common-ios.less @@ -68,6 +68,12 @@ } } + .subnavbar { + .icon-back { + color: @brandColor; + } + } + .popover__titled { .list { ul { @@ -324,6 +330,7 @@ cursor: pointer; outline: 0; font-weight: 600; + color: @brandColor; &:first-child { border-radius: 5px 0 0 5px; border-left-width: 1px; @@ -334,7 +341,7 @@ } &.tab-link-active { background: @brandColor; - color: @fill-white; + color: @brand-text-on-brand; } } } diff --git a/apps/common/mobile/resources/less/common-material.less b/apps/common/mobile/resources/less/common-material.less index 707fba6ee..9c58b27f6 100644 --- a/apps/common/mobile/resources/less/common-material.less +++ b/apps/common/mobile/resources/less/common-material.less @@ -6,7 +6,7 @@ @darkGreen: #40865c; @darkGrey: #757575; @text-normal: var(--text-normal); - @text-on-brand: var(--text-on-brand); + @brand-text-on-brand: var(--brand-text-on-brand); @touchColor: rgba(255,255,255,0.1); @@ -145,7 +145,7 @@ } .button-fill { - color: @text-on-brand; + color: @brand-text-on-brand; // background-color: @brandColor; background-color: transparent; } @@ -155,7 +155,7 @@ } .button-red { - color: @text-on-brand; + color: @brand-text-on-brand; background-color: @text-error; } @@ -184,7 +184,7 @@ } .button-fill .list-button { background-color: @brandColor; - color: @text-on-brand; + color: @brand-text-on-brand; height: 36px; text-align: center; line-height: 36px; diff --git a/apps/common/mobile/resources/less/common.less b/apps/common/mobile/resources/less/common.less index 7d88042aa..370da5d17 100644 --- a/apps/common/mobile/resources/less/common.less +++ b/apps/common/mobile/resources/less/common.less @@ -48,6 +48,9 @@ .subnavbar-inner { padding: 0; } + .icon-back { + color: @toolbar-icons; + } } .page.page-with-subnavbar { @@ -169,7 +172,6 @@ .color-schemes-menu { cursor: pointer; display: block; - background-color: @background-tertiary; .item-inner { justify-content: flex-start; } diff --git a/apps/common/mobile/resources/less/ios/comments.less b/apps/common/mobile/resources/less/ios/comments.less index a00df23c6..9bcca5565 100644 --- a/apps/common/mobile/resources/less/ios/comments.less +++ b/apps/common/mobile/resources/less/ios/comments.less @@ -1,6 +1,7 @@ .device-ios { .wrap-comment { height: calc(100% - 60px); + background-color: @background-tertiary; } .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 4b877c191..aff51e2f5 100644 --- a/apps/common/mobile/resources/less/material/comments.less +++ b/apps/common/mobile/resources/less/material/comments.less @@ -1,6 +1,7 @@ .device-android { .wrap-comment { height: calc(100% - 72px); + background-color: @background-tertiary; } .add-comment-popup, .add-reply-popup, .add-comment-dialog, .add-reply-dialog { .wrap-textarea { diff --git a/apps/presentationeditor/mobile/src/less/app.less b/apps/presentationeditor/mobile/src/less/app.less index 7af159c82..1c4d22df8 100644 --- a/apps/presentationeditor/mobile/src/less/app.less +++ b/apps/presentationeditor/mobile/src/less/app.less @@ -9,6 +9,7 @@ .device-ios { --toolbar-background: var(--background-primary, #fff); + // --toolbar-background: var(--background-tertiary, #f7f7f8); --toolbar-icons: var(--brand-slide, #aa5252); } .device-android { diff --git a/apps/presentationeditor/mobile/src/less/icons-ios.less b/apps/presentationeditor/mobile/src/less/icons-ios.less index 041625165..af77a3c27 100644 --- a/apps/presentationeditor/mobile/src/less/icons-ios.less +++ b/apps/presentationeditor/mobile/src/less/icons-ios.less @@ -442,7 +442,7 @@ &.icon-format-otp { width: 30px; height: 30px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } // Collaboration diff --git a/apps/presentationeditor/mobile/src/less/icons-material.less b/apps/presentationeditor/mobile/src/less/icons-material.less index 04db4d271..7c31594ba 100644 --- a/apps/presentationeditor/mobile/src/less/icons-material.less +++ b/apps/presentationeditor/mobile/src/less/icons-material.less @@ -4,7 +4,7 @@ &.icon-expand-up { width: 17px; height: 17px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } &.icon-expand-down { @@ -433,19 +433,19 @@ &.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-background(''); } &.icon-done-comment { @@ -463,7 +463,7 @@ &.icon-done-comment-white { width: 24px; height: 24px; - .encoded-svg-mask(''); + .encoded-svg-mask('', @fill-white); } &.icon-add-table { @@ -547,14 +547,10 @@ .encoded-svg-mask('', @toolbar-icons); } - &.icon-back { - color: @toolbar-icons; - } - &.icon-expand-down { width: 22px; height: 22px; - .encoded-svg-mask('', @toolbar-icons); + .encoded-svg-mask('', @fill-white); } &.icon-add-slide { From 8acc06d03e0edb4aaa198fbdf5ae8f336b95d2fe Mon Sep 17 00:00:00 2001 From: ShimaginAndrey Date: Mon, 15 Nov 2021 10:55:21 +0300 Subject: [PATCH 15/26] 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 8ed2d0d652a25380fd40a99d78bdb1636cfa7cfe Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Thu, 18 Nov 2021 01:58:22 +0400 Subject: [PATCH 16/26] Edit and add styles v.3 --- .../mobile/resources/less/common-ios.less | 13 ++++++++---- .../resources/less/common-material.less | 21 ++++++++++++------- apps/common/mobile/resources/less/icons.less | 6 +++--- .../mobile/resources/less/ios/comments.less | 3 +++ .../resources/less/material/comments.less | 3 +++ .../resources/less/material/contextmenu.less | 2 +- .../mobile/resources/less/material/icons.less | 2 +- .../mobile/src/view/add/AddLink.jsx | 2 +- 8 files changed, 35 insertions(+), 17 deletions(-) diff --git a/apps/common/mobile/resources/less/common-ios.less b/apps/common/mobile/resources/less/common-ios.less index 2e5b4784a..9550df5c4 100644 --- a/apps/common/mobile/resources/less/common-ios.less +++ b/apps/common/mobile/resources/less/common-ios.less @@ -41,6 +41,10 @@ --f7-toggle-inactive-color: @background-menu-divider; --f7-actions-button-border-color: @background-menu-divider; --f7-popover-bg-color: @background-primary; + --f7-dialog-bg-color-rgb: @background-secondary; + --f7-dialog-title-text-color: @text-normal; + --f7-dialog-text-color: @text-normal; + --f7-dialog-border-divider-color: @background-menu-divider; // Main Toolbar #editor-navbar.navbar .right a + a, @@ -378,12 +382,12 @@ .button-fill { color: @brandColor; - background-color: @fill-white; + background-color: @background-primary; } .button-red { color: @text-error; - background-color: @fill-white; + background-color: @background-primary; } .buttons-list { @@ -427,7 +431,8 @@ } .dialog { - background-color: rgba(var(--f7-dialog-bg-color-rgb), 1); + // background-color: rgba(var(--f7-dialog-bg-color-rgb), 1); + background-color: var(--f7-dialog-bg-color-rgb); } #color-picker { @@ -586,7 +591,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 9c58b27f6..674595847 100644 --- a/apps/common/mobile/resources/less/common-material.less +++ b/apps/common/mobile/resources/less/common-material.less @@ -7,7 +7,6 @@ @darkGrey: #757575; @text-normal: var(--text-normal); @brand-text-on-brand: var(--brand-text-on-brand); - @touchColor: rgba(255,255,255,0.1); --f7-navbar-shadow-image: none; @@ -19,7 +18,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; @@ -32,6 +31,13 @@ --f7-link-highlight-color: transparent; --f7-link-touch-ripple-color: @touchColor; + --f7-actions-bg-color: @background-secondary; + --f7-popover-bg-color: @background-secondary; + + --f7-dialog-bg-color: @background-secondary; + --f7-dialog-text-color: @text-secondary; + --f7-dialog-title-text-color: @text-normal; + .button { --f7-touch-ripple-color: transparent; } @@ -79,6 +85,8 @@ --f7-list-item-border-color: @background-menu-divider; --f7-list-chevron-icon-color: @text-tertiary; --f7-toggle-inactive-color: @background-menu-divider; + --f7-actions-button-text-color: @text-normal; + --f7-input-text-color: @text-normal; } .add-popup { @@ -146,7 +154,6 @@ .button-fill { color: @brand-text-on-brand; - // background-color: @brandColor; background-color: transparent; } @@ -226,12 +233,11 @@ color: @fill-white; i.icon { opacity: 1; - background-color: @fill-white; + // 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; @@ -302,7 +308,6 @@ &.active { color: @fill-white; background-color: @brandColor; - // background-color: fade(@brandColor, 20%); i.icon { background-color: @fill-white; } @@ -538,7 +543,9 @@ cursor: pointer; line-height: 48px; font-size: 16px; - color: rgba(0,0,0,.87); + // color: rgba(0,0,0,.87); + color: @text-normal; + // color: var(--f7-actions-button-text-color, ); } @media (min-width: 496px) { diff --git a/apps/common/mobile/resources/less/icons.less b/apps/common/mobile/resources/less/icons.less index 9fa830713..ac7a718c2 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/ios/comments.less b/apps/common/mobile/resources/less/ios/comments.less index 9bcca5565..cde7c1f88 100644 --- a/apps/common/mobile/resources/less/ios/comments.less +++ b/apps/common/mobile/resources/less/ios/comments.less @@ -2,6 +2,9 @@ .wrap-comment { height: calc(100% - 60px); background-color: @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 aff51e2f5..98bd8ec3a 100644 --- a/apps/common/mobile/resources/less/material/comments.less +++ b/apps/common/mobile/resources/less/material/comments.less @@ -2,6 +2,9 @@ .wrap-comment { height: calc(100% - 72px); background-color: @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/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 b5fe07c8b..6768ae033 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/presentationeditor/mobile/src/view/add/AddLink.jsx b/apps/presentationeditor/mobile/src/view/add/AddLink.jsx index dfdbd0e32..d00f01ace 100644 --- a/apps/presentationeditor/mobile/src/view/add/AddLink.jsx +++ b/apps/presentationeditor/mobile/src/view/add/AddLink.jsx @@ -144,7 +144,7 @@ const PageLink = props => { { props.onInsertLink(typeLink, (typeLink === 1 ? {url: link, display: stateDisplay, tip: screenTip, displayDisabled: displayDisabled } : From c83d0f548a7dd81cd9b2e3b21231a68b32481d6e Mon Sep 17 00:00:00 2001 From: Maxim Kadushkin Date: Thu, 18 Nov 2021 13:28:51 +0300 Subject: [PATCH 17/26] [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 66d3071f7abc257e3b8bd668a28e71d773ece327 Mon Sep 17 00:00:00 2001 From: Maxim Kadushkin Date: Thu, 18 Nov 2021 15:23:33 +0300 Subject: [PATCH 18/26] [PE mobile] changed some icons to correct image-mask --- apps/common/mobile/resources/less/_mixins.less | 3 ++- apps/presentationeditor/mobile/src/less/icons-material.less | 4 ++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/apps/common/mobile/resources/less/_mixins.less b/apps/common/mobile/resources/less/_mixins.less index 775bfb91a..4378affb1 100644 --- a/apps/common/mobile/resources/less/_mixins.less +++ b/apps/common/mobile/resources/less/_mixins.less @@ -3,7 +3,8 @@ @url: `encodeURIComponent(@{svg})`; background-color: @color; -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,@{url}"); - mask-size: contain; + -webkit-mask-size: contain; + -webkit-mask-repeat: round; } .encoded-svg-uncolored-mask(@svg) { diff --git a/apps/presentationeditor/mobile/src/less/icons-material.less b/apps/presentationeditor/mobile/src/less/icons-material.less index 7c31594ba..0c2b3a564 100644 --- a/apps/presentationeditor/mobile/src/less/icons-material.less +++ b/apps/presentationeditor/mobile/src/less/icons-material.less @@ -401,7 +401,7 @@ &.icon-format-potx { width: 30px; height: 30px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } &.icon-format-odp { @@ -413,7 +413,7 @@ &.icon-format-otp { width: 30px; height: 30px; - .encoded-svg-mask(''); + .encoded-svg-mask('') } // Collaboration From 581b7f690fde750912f57825812290f2e6fd6487 Mon Sep 17 00:00:00 2001 From: ShimaginAndrey Date: Thu, 18 Nov 2021 17:45:51 +0300 Subject: [PATCH 19/26] 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 d1bd1c67fa3adc64bf818cfa89fa8c36e0a9af9b Mon Sep 17 00:00:00 2001 From: Maxim Kadushkin Date: Thu, 18 Nov 2021 22:39:33 +0300 Subject: [PATCH 20/26] [mobile] added UI Themes controller --- apps/common/mobile/lib/controller/Themes.js | 48 +++++++++++++++++++++ 1 file changed, 48 insertions(+) create mode 100644 apps/common/mobile/lib/controller/Themes.js diff --git a/apps/common/mobile/lib/controller/Themes.js b/apps/common/mobile/lib/controller/Themes.js new file mode 100644 index 000000000..5e9d9bfc6 --- /dev/null +++ b/apps/common/mobile/lib/controller/Themes.js @@ -0,0 +1,48 @@ +import { Dom7 } from 'framework7' +import { LocalStorage } from "../../utils/LocalStorage"; + +class ThemesController { + constructor() { + this.themes_map = { + dark : { + id: 'theme-dark', + type:'dark' + }, + light: { + id: 'theme-light', + type: 'light' + }}; + + const obj = LocalStorage.getItem("ui-theme"); + let theme = this.themes_map.light; + if ( !!obj ) + theme = this.themes_map[JSON.parse(obj).type]; + else + if ( window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ) { + theme = this.themes_map['dark']; + LocalStorage.setItem("ui-theme", JSON.stringify(theme)); + } + + const $$ = Dom7; + const $body = $$('body'); + $body.attr('class') && $body.attr('class', $body.attr('class').replace(/\s?theme-type-(?:dark|light)/, '')); + $body.addClass(`theme-type-${theme.type}`); + } + + get isCurrentDark() { + const obj = LocalStorage.getItem("ui-theme"); + return !!obj ? JSON.parse(obj).type === 'dark' : false; + } + + switchDarkTheme(dark) { + const theme = this.themes_map[dark ? 'dark' : '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}`); + } +} + +const themes = new ThemesController() +export {themes as Themes} \ No newline at end of file From f0b21727cb11eb05d7a48ae6bbeca8dc0e46e20a Mon Sep 17 00:00:00 2001 From: Maxim Kadushkin Date: Thu, 18 Nov 2021 22:40:59 +0300 Subject: [PATCH 21/26] [PE mobile] keep current theme type for next launch --- .../settings/ApplicationSettings.jsx | 20 ++----------------- .../src/view/settings/ApplicationSettings.jsx | 5 +++-- 2 files changed, 5 insertions(+), 20 deletions(-) diff --git a/apps/presentationeditor/mobile/src/controller/settings/ApplicationSettings.jsx b/apps/presentationeditor/mobile/src/controller/settings/ApplicationSettings.jsx index c52cbe9e7..93428d9e9 100644 --- a/apps/presentationeditor/mobile/src/controller/settings/ApplicationSettings.jsx +++ b/apps/presentationeditor/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) { @@ -26,29 +27,12 @@ class ApplicationSettingsController extends Component { LocalStorage.setItem("pe-mobile-macros-mode", 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; - } - - render() { return ( ) } diff --git a/apps/presentationeditor/mobile/src/view/settings/ApplicationSettings.jsx b/apps/presentationeditor/mobile/src/view/settings/ApplicationSettings.jsx index 2040217ed..30a98fc67 100644 --- a/apps/presentationeditor/mobile/src/view/settings/ApplicationSettings.jsx +++ b/apps/presentationeditor/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(); @@ -9,7 +10,7 @@ const PageApplicationSettings = props => { const store = props.storeApplicationSettings; const unitMeasurement = store.unitMeasurement; const isSpellChecking = store.isSpellChecking; - const [isThemeDark, setIsThemeDark] = useState(props.isThemeDark); + const [isThemeDark, setIsThemeDark] = useState(Themes.isCurrentDark); const changeMeasureSettings = value => { store.changeUnitMeasurement(value); @@ -47,7 +48,7 @@ const PageApplicationSettings = props => { {props.switchDarkTheme(!toggle), setIsThemeDark(!toggle)}}> + onToggleChange={toggle => {Themes.switchDarkTheme(!toggle), setIsThemeDark(!toggle)}}> From 66840d642d5475b879e9980c56ab6cb78c5a17bd Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Fri, 19 Nov 2021 01:09:53 +0400 Subject: [PATCH 22/26] Edit and add styles v.4 --- .../mobile/resources/less/common-ios.less | 10 + .../resources/less/common-material.less | 6 + .../mobile/src/page/app.jsx | 2 +- .../settings/ApplicationSettings.jsx | 16 ++ .../mobile/src/less/app-material.less | 10 +- .../mobile/src/less/app.less | 22 ++- .../mobile/src/less/celleditor.less | 26 ++- .../mobile/src/less/icons-ios.less | 178 ++++++++--------- .../mobile/src/less/icons-material.less | 184 +++++++++--------- .../mobile/src/less/statusbar.less | 13 +- .../spreadsheeteditor/mobile/src/page/app.jsx | 2 +- .../src/view/settings/ApplicationSettings.jsx | 8 +- 12 files changed, 269 insertions(+), 208 deletions(-) diff --git a/apps/common/mobile/resources/less/common-ios.less b/apps/common/mobile/resources/less/common-ios.less index 9550df5c4..3d15b16eb 100644 --- a/apps/common/mobile/resources/less/common-ios.less +++ b/apps/common/mobile/resources/less/common-ios.less @@ -39,6 +39,7 @@ --f7-list-chevron-icon-color: @text-tertiary; --f7-toggle-inactive-color: @background-menu-divider; + --f7-toggle-border-color: @background-menu-divider; --f7-actions-button-border-color: @background-menu-divider; --f7-popover-bg-color: @background-primary; --f7-dialog-bg-color-rgb: @background-secondary; @@ -46,6 +47,9 @@ --f7-dialog-text-color: @text-normal; --f7-dialog-border-divider-color: @background-menu-divider; + --f7-subnavbar-border-color: @background-menu-divider; + --f7-list-border-color: @background-menu-divider; + // Main Toolbar #editor-navbar.navbar .right a + a, #editor-navbar.navbar .left a + a { @@ -623,6 +627,12 @@ padding-left: 0; } } + + // Toggle Icon + + .toggle-icon { + background: transparent; + } } diff --git a/apps/common/mobile/resources/less/common-material.less b/apps/common/mobile/resources/less/common-material.less index 674595847..b4c6812ad 100644 --- a/apps/common/mobile/resources/less/common-material.less +++ b/apps/common/mobile/resources/less/common-material.less @@ -85,8 +85,11 @@ --f7-list-item-border-color: @background-menu-divider; --f7-list-chevron-icon-color: @text-tertiary; --f7-toggle-inactive-color: @background-menu-divider; + --f7-toggle-border-color: @background-menu-divider; --f7-actions-button-text-color: @text-normal; --f7-input-text-color: @text-normal; + --f7-subnavbar-border-color: @background-menu-divider; + --f7-list-border-color: @background-menu-divider; } .add-popup { @@ -247,6 +250,9 @@ } // List .list { + li { + color: @text-normal; + } .item-inner { color: @text-normal; } diff --git a/apps/presentationeditor/mobile/src/page/app.jsx b/apps/presentationeditor/mobile/src/page/app.jsx index c8c5d62d1..699cdcc8f 100644 --- a/apps/presentationeditor/mobile/src/page/app.jsx +++ b/apps/presentationeditor/mobile/src/page/app.jsx @@ -31,7 +31,7 @@ export default class extends React.Component { render() { return ( - + {/* Your main view, should have "view-main" class */} diff --git a/apps/spreadsheeteditor/mobile/src/controller/settings/ApplicationSettings.jsx b/apps/spreadsheeteditor/mobile/src/controller/settings/ApplicationSettings.jsx index 8d85d8e71..24c9068bb 100644 --- a/apps/spreadsheeteditor/mobile/src/controller/settings/ApplicationSettings.jsx +++ b/apps/spreadsheeteditor/mobile/src/controller/settings/ApplicationSettings.jsx @@ -87,6 +87,20 @@ class ApplicationSettingsController extends Component { if (regCode!==null) api.asc_setLocale(+regCode); } + 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; + } + render() { return ( ) } diff --git a/apps/spreadsheeteditor/mobile/src/less/app-material.less b/apps/spreadsheeteditor/mobile/src/less/app-material.less index cbb0da4ce..2995a0049 100644 --- a/apps/spreadsheeteditor/mobile/src/less/app-material.less +++ b/apps/spreadsheeteditor/mobile/src/less/app-material.less @@ -6,9 +6,9 @@ .device-android { - --f7-navbar-bg-color: @themeColor; - --f7-navbar-link-color: @navBarIconColor; - --f7-navbar-text-color: @navBarIconColor; + --f7-navbar-bg-color: @brandColor; + --f7-navbar-link-color: @text-link; + --f7-navbar-text-color: @text-normal; --f7-list-button-border-color: @listButtonBorderColor; // Main Toolbar @@ -33,7 +33,7 @@ border: 2px solid var(--f7-checkbox-inactive-color); } label.item-checkbox input[type='checkbox']:checked ~ .icon-checkbox { - border-color: @themeColor; + border-color: @brandColor; background-color: transparent; } label.item-content i.icon.icon-checkbox:after { @@ -45,7 +45,7 @@ top: 50%; margin-left: -5px; margin-top: -5px; - background-color: @themeColor; + background-color: @brandColor; border-radius: 100%; } } diff --git a/apps/spreadsheeteditor/mobile/src/less/app.less b/apps/spreadsheeteditor/mobile/src/less/app.less index 6be8afc19..55a047b15 100644 --- a/apps/spreadsheeteditor/mobile/src/less/app.less +++ b/apps/spreadsheeteditor/mobile/src/less/app.less @@ -1,12 +1,26 @@ - -@themeColor: #40865c; - @import '../../../../common/mobile/resources/less/variables.less'; @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'; + +// @themeColor: #40865c; +@brandColor: var(--brand-cell); + +.device-ios { + --toolbar-background: var(--background-primary, #fff); + --toolbar-icons: var(--brand-cell, #40865C); +} +.device-android { + --toolbar-background: var(--brand-cell, #40865C); + + .theme-type-dark { + --toolbar-icons: var(--brand-cell, #40865C); + } +} + +@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/spreadsheeteditor/mobile/src/less/celleditor.less b/apps/spreadsheeteditor/mobile/src/less/celleditor.less index 53be7192a..f59c51d7d 100644 --- a/apps/spreadsheeteditor/mobile/src/less/celleditor.less +++ b/apps/spreadsheeteditor/mobile/src/less/celleditor.less @@ -28,7 +28,8 @@ &:after { content: ''; position: absolute; - background-color: @border-regular-control; + // background-color: @border-regular-control; + background-color: @background-menu-divider; display: block; z-index: 15; top: auto; @@ -43,11 +44,12 @@ #box-cell-name { display: inline-flex; - background-color: var(--f7-navbar-bg-color); + // background-color: var(--f7-navbar-bg-color); + // background-color: @fill-white; - .md & { - background-color: @gray-light; - } + // .md & { + // background-color: @gray-light; + // } } #idx-cell-name { @@ -80,9 +82,10 @@ #idx-cell-content { padding: 3px 3px; line-height: 1.428571429; - color: #000; + // color: #000; + color: @text-normal; vertical-align: middle; - background-color: @contentBackColor; + // background-color: @contentBackColor; min-height: @cellEditorHeight; height: 100%; width: 100%; @@ -97,7 +100,8 @@ width: 8px; height: 8px; background-color: transparent; - border: solid 1px black; + // border: solid 1px black; + border: solid 1px @brandColor; border-bottom: none; border-right: none; @@ -117,8 +121,12 @@ } } + .ce-group { + background-color: @background-secondary; + } + .group--content { position: relative; - .hairline(left, @statusBarBorderColor); + .hairline(left, @background-menu-divider); } } diff --git a/apps/spreadsheeteditor/mobile/src/less/icons-ios.less b/apps/spreadsheeteditor/mobile/src/less/icons-ios.less index 875a0c8e6..094955979 100644 --- a/apps/spreadsheeteditor/mobile/src/less/icons-ios.less +++ b/apps/spreadsheeteditor/mobile/src/less/icons-ios.less @@ -5,172 +5,172 @@ &.icon-search { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-edit-settings { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.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-reader { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-download { width: 22px; - height: 28px; - .encoded-svg-background(''); + height: 22px; + .encoded-svg-mask(''); } &.icon-print { width: 22px; - height: 28px; - .encoded-svg-background(''); + height: 22px; + .encoded-svg-mask(''); } &.icon-info { 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-about { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-help { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-versions { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-text-color { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-fill-color { width: 22px; height: 22px; background-size: 130%; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-text-align-center { width: 22px; height: 22px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } &.icon-text-align-jast { width: 22px; height: 22px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } &.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-valign-top { width: 22px; height: 22px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } &.icon-text-valign-middle { width: 22px; height: 22px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } &.icon-text-valign-bottom { width: 22px; height: 22px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } &.icon-expand-down { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-link { width: 22px; height: 22px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } &.icon-insimage { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-sort { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-image-library { width: 22px; height: 22px; - .encoded-svg-background('icons_for_svg'); + .encoded-svg-mask('icons_for_svg'); } &.icon-cell-wrap { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-function { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask('', @text-normal); } // 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 { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-move-foreground { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } // Presets of table borders @@ -178,62 +178,62 @@ &.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(''); } &.icon-table-borders-dup { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-table-borders-ddown { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } // Cell formats @@ -241,52 +241,52 @@ &.icon-format-general { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-format-number { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-format-integer { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-format-scientific { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-format-accounting { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-format-currency { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-format-date { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-format-time { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-format-percentage { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-format-text { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } // Filter sort @@ -294,12 +294,12 @@ &.sortdown { width: 22px; height: 22px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } &.sortup { width: 22px; height: 22px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } // Formats @@ -307,131 +307,131 @@ &.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-xlsx { width: 30px; height: 30px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-format-xltx { width: 30px; height: 30px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-format-ods { width: 30px; height: 30px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-format-ots { width: 30px; height: 30px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-format-csv { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } // Collaboration &.icon-users { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-app-settings { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-table-settings { 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(''); } //Insert &.icon-add-chart { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-add-formula { 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(''); } // Text orientation &.icon-text-orientation-horizontal { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-text-orientation-anglecount { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-text-orientation-angleclock { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-text-orientation-vertical { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-text-orientation-rotateup { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-text-orientation-rotatedown { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } } @@ -440,27 +440,27 @@ &.icon-add-chart { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-add-formula { 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(''); } &.icon-link { background: #fff; diff --git a/apps/spreadsheeteditor/mobile/src/less/icons-material.less b/apps/spreadsheeteditor/mobile/src/less/icons-material.less index 082c7f232..3278e324d 100644 --- a/apps/spreadsheeteditor/mobile/src/less/icons-material.less +++ b/apps/spreadsheeteditor/mobile/src/less/icons-material.less @@ -5,132 +5,132 @@ &.icon-expand-up { width: 17px; height: 17px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-expand-down { width: 17px; height: 17px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-search { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-edit { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-edit-settings { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask('', @toolbar-icons); } &.icon-reader { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-download { width: 22px; - height: 28px; - .encoded-svg-background(''); + height: 22px; + .encoded-svg-mask(''); } &.icon-print { width: 22px; - height: 28px; - .encoded-svg-background(''); + height: 22px; + .encoded-svg-mask(''); } &.icon-info { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-about { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-help { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-versions { 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-align-center { width: 22px; height: 22px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } &.icon-text-align-jast { width: 22px; height: 22px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } &.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-valign-top { width: 22px; height: 22px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } &.icon-text-valign-middle { width: 22px; height: 22px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } &.icon-text-valign-bottom { width: 22px; height: 22px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } &.icon-link { width: 24px; height: 24px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } &.icon-insimage, &.icon-image-library { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-sort { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-function { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask('', @text-normal); } &.icon-app-settings { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-table-settings { width: 24px; height: 24px; - .encoded-svg-background(' '); + .encoded-svg-mask(' '); } @@ -139,22 +139,22 @@ &.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 { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-move-foreground { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } // Presets of table borders @@ -162,62 +162,62 @@ &.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(''); } &.icon-table-borders-dup { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-table-borders-ddown { width: 28px; height: 28px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } // Cell formats @@ -225,52 +225,52 @@ &.icon-format-general { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-format-number { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-format-integer { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-format-scientific { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-format-accounting { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-format-currency { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-format-date { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-format-time { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-format-percentage { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-format-text { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } // Filter sort @@ -278,12 +278,12 @@ &.sortdown { width: 22px; height: 22px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } &.sortup { width: 22px; height: 22px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } // Formats @@ -291,110 +291,110 @@ &.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-xlsx { width: 30px; height: 30px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-format-xltx { width: 30px; height: 30px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-format-ods { width: 30px; height: 30px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-format-ots { width: 30px; height: 30px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-format-csv { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } // Collaboration &.icon-users { 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-mask(''); } &.icon-done-comment-white { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } // Text orientation &.icon-text-orientation-horizontal { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-text-orientation-anglecount { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-text-orientation-angleclock { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-text-orientation-vertical { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-text-orientation-rotateup { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-text-orientation-rotatedown { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } &.icon-plus { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask(''); } } @@ -419,77 +419,77 @@ &.icon-undo { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask('', @toolbar-icons); } &.icon-redo { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask('', @toolbar-icons); } &.icon-search { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask('', @toolbar-icons); } &.icon-burger { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask('', @toolbar-icons); } &.icon-plus { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask('', @toolbar-icons); } &.icon-settings { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask('', @toolbar-icons); } &.icon-prev { width: 20px; height: 20px; - .encoded-svg-background(''); + .encoded-svg-mask('', @toolbar-icons); } &.icon-next { width: 20px; height: 20px; - .encoded-svg-background(''); + .encoded-svg-mask('', @toolbar-icons); } &.icon-expand-down { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask('', @toolbar-icons); } &.icon-add-chart { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask('', @toolbar-icons); } &.icon-add-formula { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask('', @toolbar-icons); } &.icon-add-shape { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask('', @toolbar-icons); } &.icon-add-image { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask('', @toolbar-icons); } &.icon-add-other { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask('', @toolbar-icons); } &.icon-close-comment { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask('', @toolbar-icons); } } } diff --git a/apps/spreadsheeteditor/mobile/src/less/statusbar.less b/apps/spreadsheeteditor/mobile/src/less/statusbar.less index 40fe15ce9..2daf9242a 100644 --- a/apps/spreadsheeteditor/mobile/src/less/statusbar.less +++ b/apps/spreadsheeteditor/mobile/src/less/statusbar.less @@ -2,10 +2,10 @@ @fontColor: #000; .statusbar { - .hairline(top, @border-regular-control); + .hairline(top, @background-menu-divider); height: @statusbar-height; min-height: @statusbar-height; - background-color: @background-normal; + background-color: @background-tertiary; display: flex; .tab { @@ -21,7 +21,7 @@ height: 100%; position: relative; - .hairline(right, @border-regular-control); + .hairline(right, @background-menu-divider); } .statusbar--box-tabs { @@ -65,9 +65,10 @@ width: 22px; height: 22px; &.icon-plus { - @source: ''; - .encoded-svg-mask(@source, @fontColor); - background-image: none; + // @source: ''; + // .encoded-svg-mask(@source, @fontColor); + // background-image: none; + .encoded-svg-mask('') } } } diff --git a/apps/spreadsheeteditor/mobile/src/page/app.jsx b/apps/spreadsheeteditor/mobile/src/page/app.jsx index 2bf443815..44da854e1 100644 --- a/apps/spreadsheeteditor/mobile/src/page/app.jsx +++ b/apps/spreadsheeteditor/mobile/src/page/app.jsx @@ -35,7 +35,7 @@ export default class extends React.Component { render() { return ( - + {/* Your main view, should have "view-main" class */} diff --git a/apps/spreadsheeteditor/mobile/src/view/settings/ApplicationSettings.jsx b/apps/spreadsheeteditor/mobile/src/view/settings/ApplicationSettings.jsx index 207607719..7ddb7b230 100644 --- a/apps/spreadsheeteditor/mobile/src/view/settings/ApplicationSettings.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/settings/ApplicationSettings.jsx @@ -1,4 +1,4 @@ -import React, {Fragment} from "react"; +import React, {Fragment, useState} from "react"; import { observer, inject } from "mobx-react"; import { Page, Navbar, List, ListItem, BlockTitle, Toggle, Icon } from "framework7-react"; import { useTranslation } from "react-i18next"; @@ -20,6 +20,7 @@ const PageApplicationSettings = props => { const isRefStyle = storeApplicationSettings.isRefStyle; const isComments = storeApplicationSettings.isComments; const isResolvedComments = storeApplicationSettings.isResolvedComments; + const [isThemeDark, setIsThemeDark] = useState(props.isThemeDark); const changeMeasureSettings = value => { storeApplicationSettings.changeUnitMeasurement(value); @@ -92,6 +93,11 @@ const PageApplicationSettings = props => { }} /> + + {props.switchDarkTheme(!toggle), setIsThemeDark(!toggle)}}> + + {/* } */} {/* {_isShowMacros && */} From 739cf52862c0cbcf2d1bb4a80651226b96d954d2 Mon Sep 17 00:00:00 2001 From: ShimaginAndrey Date: Fri, 19 Nov 2021 16:00:00 +0300 Subject: [PATCH 23/26] [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 94f3f4631d0c48ed23b16a63142ab931865ed2ea Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Fri, 19 Nov 2021 23:33:38 +0400 Subject: [PATCH 24/26] Edit and add styles v.5 --- .../mobile/resources/less/colors-table-dark.less | 3 +++ .../common/mobile/resources/less/colors-table.less | 4 ++++ apps/common/mobile/resources/less/comments.less | 6 ++---- apps/common/mobile/resources/less/common-ios.less | 13 ++++++++----- .../mobile/resources/less/common-material.less | 8 +++++++- apps/common/mobile/resources/less/common.less | 1 + .../mobile/resources/less/ios/_collaboration.less | 14 +++++++------- .../resources/less/material/_collaboration.less | 8 ++++---- .../mobile/src/less/icons-material.less | 2 +- apps/presentationeditor/mobile/src/less/app.less | 3 --- .../mobile/src/less/icons-ios.less | 6 +++--- .../mobile/src/less/icons-material.less | 2 +- .../mobile/src/less/icons-ios.less | 6 +++--- .../mobile/src/less/icons-material.less | 11 ++++++----- 14 files changed, 50 insertions(+), 37 deletions(-) diff --git a/apps/common/mobile/resources/less/colors-table-dark.less b/apps/common/mobile/resources/less/colors-table-dark.less index 4b7ce6d5a..df2fdd11d 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%); @@ -31,5 +32,7 @@ --component-disabled-opacity: .4; --image-border-types-filter: invert(100%) brightness(4); + + --canvas-content-background: #fff; } } \ 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 d6f5536f5..bb6a141bc 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%); @@ -29,6 +30,8 @@ --component-disabled-opacity: .4; --image-border-types-filter: none; + + --canvas-content-background: #fff; } @brand-word: var(--brand-word); @@ -42,6 +45,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 905b03121..2a4d711f0 100644 --- a/apps/common/mobile/resources/less/comments.less +++ b/apps/common/mobile/resources/less/comments.less @@ -88,8 +88,8 @@ 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; @@ -137,7 +137,6 @@ margin-top: 8px; width: 40px; height: 4px; - // background: @swipe-icon; background: @background-menu-divider; border-radius: 2px; } @@ -201,7 +200,6 @@ .page-current-comment { position: relative; .page-content { - // background-color: @fill-white; background-color: @background-primary; } .comment-list { diff --git a/apps/common/mobile/resources/less/common-ios.less b/apps/common/mobile/resources/less/common-ios.less index 3d15b16eb..a6bc8645a 100644 --- a/apps/common/mobile/resources/less/common-ios.less +++ b/apps/common/mobile/resources/less/common-ios.less @@ -23,8 +23,6 @@ --f7-list-button-text-color: @brandColor; - --f7-dialog-button-text-color: @brandColor; - --f7-list-item-border-color: @background-menu-divider; --f7-page-bg-color: @background-tertiary; @@ -37,6 +35,8 @@ --f7-input-placeholder-color: @text-secondary; --f7-list-chevron-icon-color: @text-tertiary; + --f7-searchbar-search-icon-color: @text-tertiary; + --f7-searchbar-input-clear-button-color: @text-tertiary; --f7-toggle-inactive-color: @background-menu-divider; --f7-toggle-border-color: @background-menu-divider; @@ -45,6 +45,7 @@ --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; --f7-subnavbar-border-color: @background-menu-divider; @@ -435,7 +436,6 @@ } .dialog { - // background-color: rgba(var(--f7-dialog-bg-color-rgb), 1); background-color: var(--f7-dialog-bg-color-rgb); } @@ -517,12 +517,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: @fill-white; + background-color: @background-button; padding: 0 28px; + &::placeholder { + color: @text-tertiary; + } } .searchbar-inner { diff --git a/apps/common/mobile/resources/less/common-material.less b/apps/common/mobile/resources/less/common-material.less index b4c6812ad..b0cba41af 100644 --- a/apps/common/mobile/resources/less/common-material.less +++ b/apps/common/mobile/resources/less/common-material.less @@ -32,11 +32,13 @@ --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-text-color: @text-secondary; --f7-dialog-title-text-color: @text-normal; + --f7-dialog-button-text-color: @brandColor; .button { --f7-touch-ripple-color: transparent; @@ -50,7 +52,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; @@ -522,6 +523,11 @@ a.link { padding: 0 16px; } + a.link.searchbar-enable { + i.icon-search { + background-color: @toolbar-icons; + } + } a.icon-only { width: auto; height: 56px; diff --git a/apps/common/mobile/resources/less/common.less b/apps/common/mobile/resources/less/common.less index 370da5d17..08878e48c 100644 --- a/apps/common/mobile/resources/less/common.less +++ b/apps/common/mobile/resources/less/common.less @@ -562,6 +562,7 @@ height: 100%; padding: 0; background-size: contain; + background-color: var(--canvas-content-background); } } } diff --git a/apps/common/mobile/resources/less/ios/_collaboration.less b/apps/common/mobile/resources/less/ios/_collaboration.less index a90bd564e..fe7b889eb 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; @@ -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; @@ -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 { @@ -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 d3b882d51..972ec67a3 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; @@ -420,7 +420,7 @@ } .comment-date { font-size: 13px; - color: #6d6d72; + color: @text-secondary; } .wrap-textarea { margin-top: 16px; diff --git a/apps/documenteditor/mobile/src/less/icons-material.less b/apps/documenteditor/mobile/src/less/icons-material.less index 03e09345e..14dd9afda 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-background(''); + .encoded-svg-mask('', @text-tertiary); } &.icon-resolve-comment { width: 24px; diff --git a/apps/presentationeditor/mobile/src/less/app.less b/apps/presentationeditor/mobile/src/less/app.less index 1c4d22df8..34e92e6d9 100644 --- a/apps/presentationeditor/mobile/src/less/app.less +++ b/apps/presentationeditor/mobile/src/less/app.less @@ -1,15 +1,12 @@ -// @themeColor: #aa5252; @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-slide); -// @navBarIconColor: var(--toolbar-pe-icons); .device-ios { --toolbar-background: var(--background-primary, #fff); - // --toolbar-background: var(--background-tertiary, #f7f7f8); --toolbar-icons: var(--brand-slide, #aa5252); } .device-android { diff --git a/apps/presentationeditor/mobile/src/less/icons-ios.less b/apps/presentationeditor/mobile/src/less/icons-ios.less index af77a3c27..3c7a619c5 100644 --- a/apps/presentationeditor/mobile/src/less/icons-ios.less +++ b/apps/presentationeditor/mobile/src/less/icons-ios.less @@ -430,7 +430,7 @@ &.icon-format-potx { width: 30px; height: 30px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } &.icon-format-odp { @@ -442,7 +442,7 @@ &.icon-format-otp { width: 30px; height: 30px; - .encoded-svg-mask(''); + .encoded-svg-mask('') } // Collaboration @@ -462,7 +462,7 @@ &.icon-menu-comment { width: 30px; height: 30px; - .encoded-svg-mask(''); + .encoded-svg-mask('', @text-tertiary); } &.icon-resolve-comment { diff --git a/apps/presentationeditor/mobile/src/less/icons-material.less b/apps/presentationeditor/mobile/src/less/icons-material.less index 0c2b3a564..23488b3a3 100644 --- a/apps/presentationeditor/mobile/src/less/icons-material.less +++ b/apps/presentationeditor/mobile/src/less/icons-material.less @@ -433,7 +433,7 @@ &.icon-menu-comment { width: 24px; height: 24px; - .encoded-svg-mask(''); + .encoded-svg-mask('', @text-tertiary); } &.icon-resolve-comment { diff --git a/apps/spreadsheeteditor/mobile/src/less/icons-ios.less b/apps/spreadsheeteditor/mobile/src/less/icons-ios.less index 094955979..e998c8f86 100644 --- a/apps/spreadsheeteditor/mobile/src/less/icons-ios.less +++ b/apps/spreadsheeteditor/mobile/src/less/icons-ios.less @@ -359,17 +359,17 @@ &.icon-menu-comment { width: 30px; height: 30px; - .encoded-svg-mask(''); + .encoded-svg-mask('', @text-tertiary); } &.icon-resolve-comment { width: 30px; height: 30px; - .encoded-svg-mask(''); + .encoded-svg-mask('', @text-tertiary); } &.icon-resolve-comment.check { width: 30px; height: 30px; - .encoded-svg-mask(''); + .encoded-svg-mask('', @brandColor); } &.icon-insert-comment { width: 24px; diff --git a/apps/spreadsheeteditor/mobile/src/less/icons-material.less b/apps/spreadsheeteditor/mobile/src/less/icons-material.less index 3278e324d..d9ae959f7 100644 --- a/apps/spreadsheeteditor/mobile/src/less/icons-material.less +++ b/apps/spreadsheeteditor/mobile/src/less/icons-material.less @@ -306,7 +306,8 @@ &.icon-format-xltx { width: 30px; height: 30px; - .encoded-svg-mask(''); + // + .encoded-svg-mask(''); } &.icon-format-ods { width: 30px; @@ -333,17 +334,17 @@ &.icon-menu-comment { width: 24px; height: 24px; - .encoded-svg-mask(''); + .encoded-svg-mask('', @text-tertiary); } &.icon-resolve-comment { width: 24px; height: 24px; - .encoded-svg-mask(''); + .encoded-svg-mask('', @text-tertiary); } &.icon-resolve-comment.check { width: 24px; height: 24px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } &.icon-done-comment { width: 24px; @@ -358,7 +359,7 @@ &.icon-done-comment-white { width: 24px; height: 24px; - .encoded-svg-mask(''); + .encoded-svg-background(''); } // Text orientation &.icon-text-orientation-horizontal { From 4bd582fc0d78a6379c9f3de4fbbf3905b9dc6383 Mon Sep 17 00:00:00 2001 From: ShimaginAndrey Date: Sun, 21 Nov 2021 17:50:37 +0300 Subject: [PATCH 25/26] 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; } From ffd2325f8fbac0cacf803c5d854e6949c306088e Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Mon, 22 Nov 2021 13:50:33 +0400 Subject: [PATCH 26/26] [SSE mobile] Added themes controller and correct icons --- apps/presentationeditor/mobile/locale/en.json | 3 ++- .../src/view/settings/ApplicationSettings.jsx | 2 +- apps/spreadsheeteditor/mobile/locale/en.json | 3 ++- .../settings/ApplicationSettings.jsx | 18 +----------------- .../mobile/src/less/icons-ios.less | 4 ++-- .../mobile/src/less/icons-material.less | 5 ++--- .../src/view/settings/ApplicationSettings.jsx | 7 ++++--- 7 files changed, 14 insertions(+), 28 deletions(-) diff --git a/apps/presentationeditor/mobile/locale/en.json b/apps/presentationeditor/mobile/locale/en.json index 34c5d95b1..6c99b9b46 100644 --- a/apps/presentationeditor/mobile/locale/en.json +++ b/apps/presentationeditor/mobile/locale/en.json @@ -465,7 +465,8 @@ "txtScheme6": "Concourse", "txtScheme7": "Equity", "txtScheme8": "Flow", - "txtScheme9": "Foundry" + "txtScheme9": "Foundry", + "textDarkTheme": "Dark Theme" } } } \ No newline at end of file diff --git a/apps/presentationeditor/mobile/src/view/settings/ApplicationSettings.jsx b/apps/presentationeditor/mobile/src/view/settings/ApplicationSettings.jsx index 30a98fc67..9a929743d 100644 --- a/apps/presentationeditor/mobile/src/view/settings/ApplicationSettings.jsx +++ b/apps/presentationeditor/mobile/src/view/settings/ApplicationSettings.jsx @@ -46,7 +46,7 @@ const PageApplicationSettings = props => { }} /> - + {Themes.switchDarkTheme(!toggle), setIsThemeDark(!toggle)}}> diff --git a/apps/spreadsheeteditor/mobile/locale/en.json b/apps/spreadsheeteditor/mobile/locale/en.json index c0fa31b41..d4fb31ed5 100644 --- a/apps/spreadsheeteditor/mobile/locale/en.json +++ b/apps/spreadsheeteditor/mobile/locale/en.json @@ -652,7 +652,8 @@ "txtSemicolon": "Semicolon", "txtSpace": "Space", "txtTab": "Tab", - "warnDownloadAs": "If you continue saving in this format all features except the text will be lost.
Are you sure you want to continue?" + "warnDownloadAs": "If you continue saving in this format all features except the text will be lost.
Are you sure you want to continue?", + "textDarkTheme": "Dark Theme" } } } \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/src/controller/settings/ApplicationSettings.jsx b/apps/spreadsheeteditor/mobile/src/controller/settings/ApplicationSettings.jsx index 24c9068bb..e3f2fa1dd 100644 --- a/apps/spreadsheeteditor/mobile/src/controller/settings/ApplicationSettings.jsx +++ b/apps/spreadsheeteditor/mobile/src/controller/settings/ApplicationSettings.jsx @@ -87,20 +87,6 @@ class ApplicationSettingsController extends Component { if (regCode!==null) api.asc_setLocale(+regCode); } - 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; - } - render() { return ( ) } diff --git a/apps/spreadsheeteditor/mobile/src/less/icons-ios.less b/apps/spreadsheeteditor/mobile/src/less/icons-ios.less index e998c8f86..142989494 100644 --- a/apps/spreadsheeteditor/mobile/src/less/icons-ios.less +++ b/apps/spreadsheeteditor/mobile/src/less/icons-ios.less @@ -322,7 +322,7 @@ &.icon-format-xltx { width: 30px; height: 30px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } &.icon-format-ods { width: 30px; @@ -332,7 +332,7 @@ &.icon-format-ots { width: 30px; height: 30px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } &.icon-format-csv { width: 24px; diff --git a/apps/spreadsheeteditor/mobile/src/less/icons-material.less b/apps/spreadsheeteditor/mobile/src/less/icons-material.less index d9ae959f7..70a6e5c9d 100644 --- a/apps/spreadsheeteditor/mobile/src/less/icons-material.less +++ b/apps/spreadsheeteditor/mobile/src/less/icons-material.less @@ -306,8 +306,7 @@ &.icon-format-xltx { width: 30px; height: 30px; - // - .encoded-svg-mask(''); + .encoded-svg-mask(''); } &.icon-format-ods { width: 30px; @@ -317,7 +316,7 @@ &.icon-format-ots { width: 30px; height: 30px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } &.icon-format-csv { width: 24px; diff --git a/apps/spreadsheeteditor/mobile/src/view/settings/ApplicationSettings.jsx b/apps/spreadsheeteditor/mobile/src/view/settings/ApplicationSettings.jsx index 7ddb7b230..52e08bb5d 100644 --- a/apps/spreadsheeteditor/mobile/src/view/settings/ApplicationSettings.jsx +++ b/apps/spreadsheeteditor/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, Icon } from "framework7-react"; import { useTranslation } from "react-i18next"; +import { Themes } from '../../../../../common/mobile/lib/controller/Themes.js'; const PageApplicationSettings = props => { const { t } = useTranslation(); @@ -20,7 +21,7 @@ const PageApplicationSettings = props => { const isRefStyle = storeApplicationSettings.isRefStyle; const isComments = storeApplicationSettings.isComments; const isResolvedComments = storeApplicationSettings.isResolvedComments; - const [isThemeDark, setIsThemeDark] = useState(props.isThemeDark); + const [isThemeDark, setIsThemeDark] = useState(Themes.isCurrentDark); const changeMeasureSettings = value => { storeApplicationSettings.changeUnitMeasurement(value); @@ -93,9 +94,9 @@ const PageApplicationSettings = props => { }} /> - + {props.switchDarkTheme(!toggle), setIsThemeDark(!toggle)}}> + onToggleChange={toggle => {Themes.switchDarkTheme(!toggle), setIsThemeDark(!toggle)}}>