diff --git a/src/components/common/EmbeddedMessage.scss b/src/components/common/EmbeddedMessage.scss index 0a4387d32..7d65c8d0f 100644 --- a/src/components/common/EmbeddedMessage.scss +++ b/src/components/common/EmbeddedMessage.scss @@ -1,7 +1,7 @@ .EmbeddedMessage { display: flex; align-items: center; - font-size: 0.875rem; + font-size: calc(var(--message-text-size, 1rem) - .125rem); line-height: 1.125rem; margin: 0 -0.25rem .0625rem; padding: .1875rem 0.25rem .1875rem .4375rem; @@ -59,6 +59,10 @@ background-color: var(--active-color); } + .message-title { + font-size: calc(var(--message-text-size, 1rem) - .125rem); + } + .message-text { overflow: hidden; margin-inline-start: 0.5rem; diff --git a/src/components/common/LastMessageMeta.scss b/src/components/common/LastMessageMeta.scss index 4c1acad82..1463a2a82 100644 --- a/src/components/common/LastMessageMeta.scss +++ b/src/components/common/LastMessageMeta.scss @@ -11,6 +11,10 @@ color: var(--color-text-meta-colored); margin-right: 0.1rem; font-size: 1.15rem; + + body.is-ios & { + margin-bottom: -.125rem; + } } .time { diff --git a/src/components/left/main/Badge.scss b/src/components/left/main/Badge.scss index 387f6a1ed..2765ad5f4 100644 --- a/src/components/left/main/Badge.scss +++ b/src/components/left/main/Badge.scss @@ -37,6 +37,17 @@ text-align: center; flex-shrink: 0; + body.is-macos & { + line-height: 1.5rem; + } + + body.is-ios & { + line-height: 1.375rem; + min-width: 1.375rem; + height: 1.375rem; + padding: 0 .375rem; + } + &.mention, &.unread:not(.muted) { background: var(--color-green); color: var(--color-white); diff --git a/src/components/left/main/Chat.scss b/src/components/left/main/Chat.scss index 2a7d8ebae..503c41818 100644 --- a/src/components/left/main/Chat.scss +++ b/src/components/left/main/Chat.scss @@ -1,6 +1,12 @@ .Chat { --background-color: var(--color-background); + body.is-ios &, + body.is-macos & { + --color-text-meta: var(--color-text-meta-apple); + } + + position: absolute; top: 0; left: 0; @@ -87,10 +93,19 @@ margin-left: 0.25rem; margin-top: -.0625rem; color: #C6C8CA; + + body.is-ios & { + margin-top: 0; + margin-right: .5rem; + } } .LastMessageMeta { margin-left: auto; + body.is-ios & { + font-size: .875rem; + margin-right: 0; + } } .last-message, .typing-status { @@ -130,6 +145,12 @@ vertical-align: -.25rem; margin-inline-end: .25rem; + body.is-ios & { + width: 1.125rem; + height: 1.125rem; + vertical-align: -.1875rem; + } + &.round { border-radius: .625rem; } @@ -149,6 +170,11 @@ margin-inline-start: -1.25rem; margin-inline-end: 0.5rem; bottom: 0.0625rem; + + body.is-ios & { + margin-inline-start: -1.125rem; + bottom: 0; + } } } } diff --git a/src/components/middle/AudioPlayer.scss b/src/components/middle/AudioPlayer.scss index 3da3ce4d2..f15c29296 100644 --- a/src/components/middle/AudioPlayer.scss +++ b/src/components/middle/AudioPlayer.scss @@ -89,6 +89,11 @@ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + + body.is-ios & { + font-size: .9375rem !important; + line-height: .8125rem; + } } .subtitle { @@ -100,6 +105,10 @@ overflow: hidden; text-overflow: ellipsis; margin: .125rem 0 0; + + body.is-ios & { + font-size: .9375rem !important; + } } } } diff --git a/src/components/middle/MessageList.scss b/src/components/middle/MessageList.scss index 9173f9969..891411287 100644 --- a/src/components/middle/MessageList.scss +++ b/src/components/middle/MessageList.scss @@ -159,6 +159,11 @@ padding: 0 .5rem; border-radius: 0.75rem; word-break: break-word; + + body.is-ios &, + body.is-macos & { + font-size: .875rem; + } } &.rich { diff --git a/src/components/middle/MiddleHeader.scss b/src/components/middle/MiddleHeader.scss index c1b12b34b..b9613fc17 100644 --- a/src/components/middle/MiddleHeader.scss +++ b/src/components/middle/MiddleHeader.scss @@ -228,6 +228,12 @@ text-overflow: ellipsis; unicode-bidi: plaintext; + body.is-ios &, + body.is-macos & { + font-size: 1.0625rem; + font-weight: 600; + } + @media (max-width: 600px) { display: block; overflow: hidden; @@ -397,6 +403,10 @@ margin-bottom: 0.125rem; white-space: pre; text-align: initial; + + body.is-ios & { + font-size: .9375rem; + } } p { @@ -407,6 +417,10 @@ overflow: hidden; text-overflow: ellipsis; margin: 0; + + body.is-ios & { + font-size: .9375rem; + } } } diff --git a/src/components/middle/composer/Composer.scss b/src/components/middle/composer/Composer.scss index e9cb57b84..11b0f8610 100644 --- a/src/components/middle/composer/Composer.scss +++ b/src/components/middle/composer/Composer.scss @@ -264,6 +264,11 @@ unicode-bidi: plaintext; text-align: initial; + body.is-ios &, + body.is-macos & { + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Roboto", "Apple Color Emoji", "Helvetica Neue", sans-serif; + } + &.overflown { overflow-y: auto; overflow-x: hidden; @@ -289,8 +294,16 @@ unicode-bidi: plaintext; text-align: initial; + body.is-macos & { + bottom: 1rem; + } + @media (max-width: 600px) { bottom: .625rem; + + body.is-ios & { + bottom: .6875rem; + } } } diff --git a/src/components/middle/message/Message.scss b/src/components/middle/message/Message.scss index e64640473..ac9a6453e 100644 --- a/src/components/middle/message/Message.scss +++ b/src/components/middle/message/Message.scss @@ -108,6 +108,13 @@ --deleting-translate-x: 50%; --color-text-green: var(--color-accent-own); + body.is-ios &, + body.is-macos & { + --color-background-own: var(--color-background-own-apple); + --color-reply-own-hover: var(--color-reply-own-hover-apple); + --color-reply-own-active: var(--color-reply-own-active-apple); + } + @media (max-width: 600px) { padding-right: 0.25rem; } diff --git a/src/components/middle/message/WebPage.scss b/src/components/middle/message/WebPage.scss index 789ea6ba2..441b2e157 100644 --- a/src/components/middle/message/WebPage.scss +++ b/src/components/middle/message/WebPage.scss @@ -107,6 +107,10 @@ .site-description { line-height: 1rem; margin-bottom: 0; + + body.is-ios & { + line-height: 1.125rem; + } } &:dir(rtl) { diff --git a/src/components/middle/message/_message-content.scss b/src/components/middle/message/_message-content.scss index ee8e34dda..444cd2a48 100644 --- a/src/components/middle/message/_message-content.scss +++ b/src/components/middle/message/_message-content.scss @@ -44,10 +44,11 @@ &.document { & > .MessageMeta { position: relative; - top: .4375rem; + top: .375rem; bottom: auto !important; float: right; line-height: 1; + margin-top: .125rem; margin-left: .4375rem; margin-right: -.5rem; } @@ -90,6 +91,9 @@ &:not(.custom-shape) { font-size: var(--message-text-size, 1rem); + body.is-ios & { + font-size: var(--message-text-size, 1.0625rem); + } & > .content-inner { min-width: 0; diff --git a/src/components/middle/message/helpers/calculateAuthorWidth.ts b/src/components/middle/message/helpers/calculateAuthorWidth.ts index 2a7b30547..838fda5a9 100644 --- a/src/components/middle/message/helpers/calculateAuthorWidth.ts +++ b/src/components/middle/message/helpers/calculateAuthorWidth.ts @@ -1,10 +1,15 @@ +import { IS_IOS } from '../../../../util/environment'; + let element: HTMLSpanElement | undefined; export default function calculateAuthorWidth(text: string) { if (!element) { element = document.createElement('span'); // eslint-disable-next-line max-len - element.style.font = '400 12px "Roboto", -apple-system, "Apple Color Emoji", BlinkMacSystemFont, "Helvetica Neue", sans-serif'; + element.style.font = IS_IOS + // eslint-disable-next-line max-len + ? '400 12px system-ui, -apple-system, BlinkMacSystemFont, "Roboto", "Apple Color Emoji", "Helvetica Neue", sans-serif' + : '400 12px "Roboto", -apple-system, "Apple Color Emoji", BlinkMacSystemFont, "Helvetica Neue", sans-serif'; element.style.whiteSpace = 'nowrap'; element.style.position = 'absolute'; element.style.left = '-999px'; diff --git a/src/components/ui/ListItem.scss b/src/components/ui/ListItem.scss index e291106a3..9729403a4 100644 --- a/src/components/ui/ListItem.scss +++ b/src/components/ui/ListItem.scss @@ -117,6 +117,11 @@ &.chat-item-clickable { margin: 0 -0.5rem; + body.is-ios &, + body.is-macos & { + --color-text-secondary: var(--color-text-secondary-apple); + } + .ListItem-button { padding: .5625rem .6975rem .5625rem .5625rem; } @@ -209,6 +214,15 @@ unicode-bidi: plaintext; } + .last-message, + .status, + .typing-status { + body.is-ios &, + body.is-macos & { + font-size: .9375rem; + } + } + &[dir=rtl] { .ListItem-button { padding: .5625rem .5625rem .5625rem .6975rem; diff --git a/src/components/ui/Tab.scss b/src/components/ui/Tab.scss index 3d1550f7a..cecae7fbe 100644 --- a/src/components/ui/Tab.scss +++ b/src/components/ui/Tab.scss @@ -51,6 +51,11 @@ text-align: center; flex-shrink: 0; + body.is-ios &, + body.is-macos & { + line-height: 1.25rem; + } + &.active { background: var(--color-primary); } diff --git a/src/config.ts b/src/config.ts index 753fad374..5d5ee7b42 100644 --- a/src/config.ts +++ b/src/config.ts @@ -66,6 +66,8 @@ export const ANIMATION_LEVEL_MAX = 2; export const ANIMATION_LEVEL_DEFAULT = ANIMATION_LEVEL_MAX; export const DEFAULT_MESSAGE_TEXT_SIZE_PX = 16; +export const IOS_DEFAULT_MESSAGE_TEXT_SIZE_PX = 17; +export const MACOS_DEFAULT_MESSAGE_TEXT_SIZE_PX = 15; export const DRAFT_DEBOUNCE = 10000; // 10s diff --git a/src/global/initial.ts b/src/global/initial.ts index 387dce87a..7710eae35 100644 --- a/src/global/initial.ts +++ b/src/global/initial.ts @@ -3,7 +3,9 @@ import { NewChatMembersProgress } from '../types'; import { ANIMATION_LEVEL_DEFAULT, DARK_THEME_PATTERN_COLOR, DEFAULT_MESSAGE_TEXT_SIZE_PX, DEFAULT_PATTERN_COLOR, + IOS_DEFAULT_MESSAGE_TEXT_SIZE_PX, MACOS_DEFAULT_MESSAGE_TEXT_SIZE_PX, } from '../config'; +import { IS_IOS, IS_MAC_OS } from '../util/environment'; export const INITIAL_STATE: GlobalState = { isLeftColumnShown: true, @@ -119,7 +121,9 @@ export const INITIAL_STATE: GlobalState = { byKey: { theme: 'light', shouldUseSystemTheme: true, - messageTextSize: DEFAULT_MESSAGE_TEXT_SIZE_PX, + messageTextSize: IS_IOS + ? IOS_DEFAULT_MESSAGE_TEXT_SIZE_PX + : (IS_MAC_OS ? MACOS_DEFAULT_MESSAGE_TEXT_SIZE_PX : DEFAULT_MESSAGE_TEXT_SIZE_PX), animationLevel: ANIMATION_LEVEL_DEFAULT, messageSendKeyCombo: 'enter', shouldAutoDownloadMediaFromContacts: true, diff --git a/src/modules/actions/ui/initial.ts b/src/modules/actions/ui/initial.ts index 8683e822b..662ea0e72 100644 --- a/src/modules/actions/ui/initial.ts +++ b/src/modules/actions/ui/initial.ts @@ -2,7 +2,7 @@ import { addReducer, getGlobal, setGlobal } from '../../../lib/teact/teactn'; import { ANIMATION_LEVEL_MAX } from '../../../config'; import { - IS_ANDROID, IS_IOS, IS_SAFARI, IS_TOUCH_ENV, + IS_ANDROID, IS_IOS, IS_MAC_OS, IS_SAFARI, IS_TOUCH_ENV, } from '../../../util/environment'; import { setLanguage } from '../../../util/langProvider'; import switchTheme from '../../../util/switchTheme'; @@ -31,6 +31,8 @@ addReducer('init', (global) => { document.body.classList.add('is-ios'); } else if (IS_ANDROID) { document.body.classList.add('is-android'); + } else if (IS_MAC_OS) { + document.body.classList.add('is-macos'); } }); diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index eb42f0811..d364ce2bd 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -34,7 +34,9 @@ $color-black: #000000; $color-dark-gray: #2e3939; $color-gray: #c4c9cc; $color-text-secondary: #707579; +$color-text-secondary-apple: #8E8E92; $color-text-meta: #686c72; +$color-text-meta-apple: #8C8C91; $color-borders: #dadce0; $color-item-active: #ededed; $color-chat-hover: #f4f4f5; @@ -65,9 +67,11 @@ $color-user-8: #faa774; --color-text-lighter: #{$color-dark-gray}; --color-text-secondary: #{$color-text-secondary}; --color-text-secondary-rgb: #{toRGB($color-text-secondary)}; + --color-text-secondary-apple: #{$color-text-secondary-apple}; --color-text-meta: #{$color-text-meta}; --color-text-meta-rgb: #{toRGB($color-text-meta)}; --color-text-meta-colored: #{$color-text-green}; + --color-text-meta-apple: #{$color-text-meta-apple}; --color-text-green: #{$color-text-green}; --color-text-green-rgb: #{toRGB($color-text-green)}; --color-borders: #{$color-borders}; @@ -119,6 +123,10 @@ $color-user-8: #faa774; --color-reply-own-hover: #{blend-normal(rgba($color-text-green, 0.12), $color-light-green)}; --color-reply-own-active: #{blend-normal(rgba($color-text-green, 0.24), $color-light-green)}; + --color-background-own-apple: #E7FDCC; + --color-reply-own-hover-apple: #d9f9c1; + --color-reply-own-active-apple: #d5edc2; + --color-white: #{$color-white}; --color-gray: #{$color-gray}; diff --git a/src/styles/index.scss b/src/styles/index.scss index 857f9ac90..b94de9125 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -7,12 +7,6 @@ @import 'common'; @import '../assets/fonts/roboto.css'; -html { - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - text-rendering: optimizeSpeed; -} - html, body { width: 100%; height: 100%; @@ -23,14 +17,25 @@ html, body { font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Apple Color Emoji", "Helvetica Neue", sans-serif; color: var(--color-text); overflow: hidden; + @media (max-width: 600px) { height: calc(var(--vh, 1vh) * 100); } } +body.is-ios, +body.is-macos { + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Roboto", "Apple Color Emoji", "Helvetica Neue", sans-serif; +} + html[lang=fa], html[lang=fa] body { font-family: "Vazir", "Roboto", -apple-system, BlinkMacSystemFont, "Apple Color Emoji", "Helvetica Neue", sans-serif; + + &.is-ios, + &.is-macos { + font-family: "Vazir", -apple-system, BlinkMacSystemFont, "Roboto", "Apple Color Emoji", "Helvetica Neue", sans-serif; + } } body.cursor-grabbing, body.cursor-grabbing * { diff --git a/src/styles/themes.json b/src/styles/themes.json index 5b265c8b1..c0e53a7cf 100644 --- a/src/styles/themes.json +++ b/src/styles/themes.json @@ -6,6 +6,7 @@ "--color-background-secondary": ["#f4f4f5", "#121212"], "--color-background-secondary-accent": ["#E4E4E5", "#100f10"], "--color-background-own": ["#EEFEDF", "#8378DB"], + "--color-background-own-apple": ["#E7FDCC", "#8378DB"], "--color-background-selected": ["#F4F4F5", "#2C2C2C"], "--color-background-own-selected": ["#d4fcae", "#7b71c6"], "--color-chat-hover": ["#F4F4F5", "#2C2C2C"], @@ -13,6 +14,7 @@ "--color-item-active": ["#ededed", "#292929"], "--color-text": ["#000000", "#FFFFFF"], "--color-text-secondary": ["#707579", "#AAAAAA"], + "--color-text-secondary-apple": ["#8E8E92", "#AAAAAA"], "--color-borders": ["#DADCE0", "#100F10"], "--color-borders-input": ["#DADCE0", "#5B5B5A"], "--color-links": ["#52A1EF", "#868DF6"], @@ -26,7 +28,9 @@ "--color-reply-hover": ["#F4F4F4", "#272727"], "--color-reply-active": ["#E8E9E9", "#2E2F2F"], "--color-reply-own-hover": ["#DBF4CE", "#6458bc"], + "--color-reply-own-hover-apple": ["#d9f9c1", "#6458bc"], "--color-reply-own-active": ["#C8EBBC", "#4F4A9F"], + "--color-reply-own-active-apple": ["#d5edc2", "#4F4A9F"], "--color-accent-own": ["#4FAE4E", "#FFFFFF"], "--color-message-meta-own": ["#4FAE4EFF", "#FFFFFF88"], "--color-own-links": ["#52A1EF", "#FFFFFF"],