From cd16fa0c323f7e57e746c7b20031eec8171469b0 Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Fri, 5 Nov 2021 21:48:28 +0400 Subject: [PATCH] [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); } } }