diff --git a/apps/common/mobile/resources/less/about.less b/apps/common/mobile/resources/less/about.less index dadcafe97..557eabaf8 100644 --- a/apps/common/mobile/resources/less/about.less +++ b/apps/common/mobile/resources/less/about.less @@ -1,4 +1,4 @@ -@text-normal: var(--text-normal); +// @text-normal: #000; // @common-image-about-path - defined in webpack config .about { @@ -14,14 +14,14 @@ margin: 0 auto 15px; a { - color: @text-normal; + // color: @text-normal; } } h3 { font-weight: normal; margin: 0; - color: @text-normal; + color: @text-secondary; &.vendor { color: @text-normal; @@ -33,6 +33,7 @@ p > label { color: @text-normal; margin-right: 5px; + color: @text-secondary; } .logo { @@ -41,6 +42,12 @@ 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"; + } + } } .theme-type-dark { diff --git a/apps/common/mobile/resources/less/collaboration.less b/apps/common/mobile/resources/less/collaboration.less index a03a418ad..af591d3e0 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 df2fdd11d..51062c360 100644 --- a/apps/common/mobile/resources/less/colors-table-dark.less +++ b/apps/common/mobile/resources/less/colors-table-dark.less @@ -34,5 +34,11 @@ --image-border-types-filter: invert(100%) brightness(4); --canvas-content-background: #fff; + + --active-opacity-word: fade(#446995, 20%); + --active-opacity-slide: fade(#AA5252, 20%); + --active-opacity-cell: fade(#40865C, 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 bb6a141bc..739b351c6 100644 --- a/apps/common/mobile/resources/less/colors-table.less +++ b/apps/common/mobile/resources/less/colors-table.less @@ -29,9 +29,13 @@ --component-disabled-opacity: .4; - --image-border-types-filter: none; - --canvas-content-background: #fff; + + --active-opacity-word: fade(#446995, 30%); + --active-opacity-slide: fade(#AA5252, 30%); + --active-opacity-cell: fade(#40865C, 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 2a4d711f0..9dc7945cb 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'; @@ -118,7 +118,7 @@ } #view-comment-sheet { - background-color: @white; + background-color: @fill-white; border-top-left-radius: 4px; border-top-right-radius: 4px; height: 45%; diff --git a/apps/common/mobile/resources/less/common-ios.less b/apps/common/mobile/resources/less/common-ios.less index a6bc8645a..871ef2973 100644 --- a/apps/common/mobile/resources/less/common-ios.less +++ b/apps/common/mobile/resources/less/common-ios.less @@ -28,6 +28,7 @@ --f7-page-bg-color: @background-tertiary; --f7-list-item-title-text-color: @text-normal; --f7-list-item-text-text-color: @text-normal; + --f7-list-item-subtitle-text-color: @text-secondary; --f7-label-text-color: @text-normal; --f7-list-item-after-text-color: @text-normal; --f7-input-text-color: @text-normal; @@ -171,6 +172,7 @@ width: 100%; margin-top: 10px; padding: 0 5px; + background: none; } &:first-child li:first-child, &:last-child li:last-child { border-radius: 0; @@ -275,6 +277,7 @@ } } .item-inner { + color: @text-normal; padding-top: 7px; color: @text-normal; .item-after { @@ -305,6 +308,11 @@ display: flex; align-items: center; justify-content: center; + &.active { + color: @brandColor; + // background-color: var(--button-active-opacity); + background-color: @button-active-opacity; + } } } } @@ -326,7 +334,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; @@ -349,8 +357,13 @@ border-radius: 0 5px 5px 0; } &.tab-link-active { - background: @brandColor; + // background: @brandColor; + // color: @fill-white; + background: @toolbar-segment; color: @brand-text-on-brand; + i.icon { + background-color: @brand-text-on-brand; + } } } } @@ -590,8 +603,8 @@ } .actions-button { - // background: rgba(255,255,255,.95); background: @background-secondary; + --f7-actions-button-border-color: @background-menu-divider; } .actions-button-text { diff --git a/apps/common/mobile/resources/less/common-material.less b/apps/common/mobile/resources/less/common-material.less index b0cba41af..da9496959 100644 --- a/apps/common/mobile/resources/less/common-material.less +++ b/apps/common/mobile/resources/less/common-material.less @@ -7,6 +7,7 @@ @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; @@ -78,6 +79,7 @@ --f7-text-color: @text-normal; --f7-list-item-title-text-color: @text-normal; --f7-list-item-text-text-color: @text-normal; + --f7-list-item-subtitle-text-color: @text-secondary; --f7-block-title-text-color: @text-secondary; --f7-input-placeholder-color: @text-secondary; --f7-label-text-color: @text-normal; @@ -120,6 +122,9 @@ margin-left: 0; border-radius: 0; height: 32px; + i.icon-expand-down { + background: @brandColor; + } } label { color: @text-normal; @@ -237,7 +242,7 @@ color: @fill-white; i.icon { opacity: 1; - // background-color: @fill-white; + background-color: @fill-white; } } } @@ -313,11 +318,12 @@ margin-left: 0; } &.active { - color: @fill-white; - background-color: @brandColor; - i.icon { - background-color: @fill-white; - } + color: @brandColor; + // background-color: var(--button-active-opacity); + background-color: @button-active-opacity; + // i.icon { + // background-color: @white; + // } } } } @@ -331,6 +337,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; } @@ -344,6 +351,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 08878e48c..d1d3b0c81 100644 --- a/apps/common/mobile/resources/less/common.less +++ b/apps/common/mobile/resources/less/common.less @@ -172,6 +172,7 @@ .color-schemes-menu { cursor: pointer; display: block; + // background-color: @white; .item-inner { justify-content: flex-start; } @@ -427,6 +428,7 @@ } .list .item-inner { display: block; + color: var(--text-normal); } .standart-colors, .dynamic-colors { .palette { @@ -485,7 +487,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/_collaboration.less b/apps/common/mobile/resources/less/ios/_collaboration.less index fe7b889eb..e55a265a7 100644 --- a/apps/common/mobile/resources/less/ios/_collaboration.less +++ b/apps/common/mobile/resources/less/ios/_collaboration.less @@ -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; } } diff --git a/apps/common/mobile/resources/less/material/_collaboration.less b/apps/common/mobile/resources/less/material/_collaboration.less index 972ec67a3..2d89a7280 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; @@ -472,7 +472,7 @@ } } .page-add-comment { - background-color: #FFFFFF; + background-color: @fill-white; } .header-comment { justify-content: flex-start; @@ -484,7 +484,7 @@ } .page-edit-comment, .page-add-reply, .page-edit-reply { - background-color: #FFFFFF; + background-color: @fill-white; .header-comment { justify-content: flex-start; } 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/app-ios.less b/apps/documenteditor/mobile/src/less/app-ios.less index 5fb8ff040..d8f784511 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; } } @@ -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 b40c69124..0182800f7 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: @toolbar-icons; .device-android { @@ -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 4a52d3458..7cb0d4141 100644 --- a/apps/documenteditor/mobile/src/less/app.less +++ b/apps/documenteditor/mobile/src/less/app.less @@ -1,10 +1,29 @@ -@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); + +.device-ios { + --toolbar-background: var(--background-primary, #FFF); + --toolbar-segment: var(--brand-word, #446995); + --toolbar-icons: var(--brand-word, #446995); +} + +.device-android { + --toolbar-background: var(--brand-word, #446995); + + .theme-type-dark { + --toolbar-icons: var(--brand-word, #446995); + } +} + +@toolbar-background: var(--toolbar-background); +@toolbar-segment: var(--toolbar-segment); +@button-active-opacity: var(--active-opacity-word); + @import '../../../../common/mobile/resources/less/collaboration.less'; @import '../../../../common/mobile/resources/less/common.less'; @import '../../../../common/mobile/resources/less/common-ios.less'; @@ -48,9 +67,9 @@ // Review .page-review { - --f7-toolbar-link-color: @themeColor; + --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 { @@ -66,27 +85,28 @@ } } .page-content { - background-color: @white; + // background-color: @white; .no-changes { padding: 15px; + color: @text-normal; } .block-description { padding: 15px; .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 05960f7e5..99205059b 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,234 +143,234 @@ &.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 { 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(''); } // 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; 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: 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('', @text-tertiary); } &.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-background(''); } &.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 14dd9afda..bc3b9c640 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('', @toolbar-icons); } &.icon-redo { width: 22px; height: 22px; - .encoded-svg-background(''); + .encoded-svg-mask('', @toolbar-icons); } &.icon-edit-settings { 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('', @fill-white); } // Insert &.icon-add-table { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask('', @toolbar-tab-normal); } &.icon-add-shape { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask('', @toolbar-tab-normal); } &.icon-add-image { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask('', @toolbar-tab-normal); } &.icon-add-other { width: 24px; height: 24px; - .encoded-svg-background(''); + .encoded-svg-mask('', @toolbar-tab-normal); } &.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('', @fill-white); } &.icon-expand-down { width: 17px; height: 17px; - .encoded-svg-background(''); + .encoded-svg-mask('', @fill-white); } &.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,276 +199,276 @@ &.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-mask('', @text-tertiary); + .encoded-svg-mask('', @text-tertiary); } &.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-background(''); } &.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('', @fill-white); } } } \ 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 */} 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)}}> diff --git a/apps/presentationeditor/mobile/src/less/app.less b/apps/presentationeditor/mobile/src/less/app.less index 34e92e6d9..2c4ed09f5 100644 --- a/apps/presentationeditor/mobile/src/less/app.less +++ b/apps/presentationeditor/mobile/src/less/app.less @@ -7,6 +7,7 @@ .device-ios { --toolbar-background: var(--background-primary, #fff); + --toolbar-segment: var(--brand-slide, #aa5252); --toolbar-icons: var(--brand-slide, #aa5252); } .device-android { @@ -18,6 +19,8 @@ } @toolbar-background: var(--toolbar-background); +@toolbar-segment: var(--toolbar-segment); +@button-active-opacity: var(--active-opacity-slide); @import '../../../../common/mobile/resources/less/collaboration.less'; @import '../../../../common/mobile/resources/less/common.less'; diff --git a/apps/spreadsheeteditor/mobile/src/less/app.less b/apps/spreadsheeteditor/mobile/src/less/app.less index 55a047b15..b9a01b802 100644 --- a/apps/spreadsheeteditor/mobile/src/less/app.less +++ b/apps/spreadsheeteditor/mobile/src/less/app.less @@ -9,6 +9,7 @@ .device-ios { --toolbar-background: var(--background-primary, #fff); + --toolbar-segment: var(--brand-cell, #40865C); --toolbar-icons: var(--brand-cell, #40865C); } .device-android { @@ -20,6 +21,8 @@ } @toolbar-background: var(--toolbar-background); +@toolbar-segment: var(--toolbar-segment); +@button-active-opacity: var(--active-opacity-cell); @import '../../../../common/mobile/resources/less/collaboration.less'; @import '../../../../common/mobile/resources/less/common.less';