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 {