From b4772cc542c2742c52de96da9acd499cfd4dc2c5 Mon Sep 17 00:00:00 2001 From: zubiden <19638254+zubiden@users.noreply.github.com> Date: Wed, 4 Jun 2025 20:40:56 +0200 Subject: [PATCH] [dev] More improvements for linting (#5951) --- .fantasticonrc.js => .fantasticonrc.cjs | 2 +- .stylelintrc.json | 3 +- package-lock.json | 38 ++ package.json | 7 +- public/get/index.css | 14 +- src/components/App.module.scss | 26 +- src/components/auth/Auth.scss | 96 +-- src/components/auth/CountryCodeInput.scss | 35 +- src/components/calls/ActiveCallHeader.scss | 19 +- .../calls/group/GroupCall.module.scss | 111 ++-- .../group/GroupCallParticipant.module.scss | 10 +- .../GroupCallParticipantList.module.scss | 2 +- .../calls/group/GroupCallParticipantMenu.scss | 71 ++- .../GroupCallParticipantVideo.module.scss | 84 ++- .../calls/group/GroupCallTopPane.scss | 14 +- .../calls/group/MicrophoneButton.module.scss | 20 +- .../calls/phone/PhoneCall.module.scss | 82 ++- .../calls/phone/PhoneCallButton.module.scss | 13 +- .../phone/RatePhoneCallModal.module.scss | 4 +- .../common/AboutMonetizationModal.module.scss | 2 +- .../AnimatedIconWithPreview.module.scss | 4 +- src/components/common/Audio.scss | 165 +++-- src/components/common/Avatar.scss | 58 +- src/components/common/AvatarList.module.scss | 13 +- src/components/common/BadgeButton.module.scss | 8 +- src/components/common/Blockquote.module.scss | 8 +- src/components/common/CalendarModal.scss | 53 +- .../common/ChatForumLastMessage.module.scss | 84 +-- src/components/common/Composer.scss | 399 +++++++----- .../common/CountryPickerModal.module.scss | 2 +- src/components/common/CustomEmoji.module.scss | 22 +- .../common/CustomEmojiSetsModal.module.scss | 7 +- .../common/DeleteMessageModal.module.scss | 10 +- src/components/common/DotAnimation.scss | 2 +- src/components/common/FakeIcon.scss | 9 +- src/components/common/File.scss | 98 +-- .../common/FullNameTitle.module.scss | 9 +- src/components/common/GifButton.scss | 19 +- src/components/common/LastMessageMeta.scss | 10 +- src/components/common/LinkField.module.scss | 6 +- .../common/ManageUsernames.module.scss | 12 +- src/components/common/Media.scss | 24 +- .../common/MediaSpoiler.module.scss | 86 +-- .../common/MessageOutgoingStatus.scss | 20 +- src/components/common/MiniTable.module.scss | 21 +- src/components/common/NothingFound.scss | 10 +- src/components/common/PasswordMonkey.scss | 21 +- src/components/common/PeerBadge.module.scss | 28 +- src/components/common/PeerChip.module.scss | 59 +- .../common/PeerColorWrapper.module.scss | 14 +- .../common/PremiumProgress.module.scss | 52 +- .../PrivacySettingsNoticeModal.module.scss | 8 +- src/components/common/ProfileInfo.module.scss | 121 ++-- src/components/common/ProfileInfo.scss | 19 +- src/components/common/ProfilePhoto.scss | 12 +- src/components/common/SliderDots.module.scss | 31 +- src/components/common/Sparkles.module.scss | 8 +- src/components/common/StickerButton.scss | 82 ++- src/components/common/StickerSetCard.scss | 3 +- src/components/common/StickerSetModal.scss | 25 +- src/components/common/StickerView.module.scss | 3 +- src/components/common/TopicChip.module.scss | 36 +- .../common/TopicDefaultIcon.module.scss | 19 +- src/components/common/UiLoader.module.scss | 31 +- src/components/common/VerifiedIcon.scss | 7 +- src/components/common/WebLink.scss | 60 +- src/components/common/code/CodeBlock.scss | 34 +- .../common/code/CodeOverlay.module.scss | 21 +- .../common/embedded/EmbeddedMessage.scss | 82 ++- .../embedded/EmojiIconBackground.module.scss | 6 +- .../common/gift/GiftRibbon.module.scss | 5 +- .../gift/GiftTransferPreview.module.scss | 10 +- .../common/gift/SavedGift.module.scss | 53 +- .../common/icons/StarIcon.module.scss | 6 +- .../common/pickers/ChatOrUserPicker.scss | 32 +- .../common/pickers/PickerItem.module.scss | 44 +- .../common/pickers/PickerStyles.module.scss | 39 +- .../common/profile/BusinessHours.module.scss | 29 +- .../common/profile/ChatExtra.module.scss | 26 +- .../RadialPatternBackground.module.scss | 4 +- .../common/profile/UserBirthday.module.scss | 21 +- .../reactions/CustomEmojiEffect.module.scss | 13 +- .../ReactionAnimatedEmoji.module.scss | 4 +- .../reactions/ReactionEmoji.module.scss | 7 +- .../common/reactions/ReactionStaticEmoji.scss | 4 +- src/components/common/spoiler/Spoiler.scss | 2 +- src/components/left/ArchivedChats.scss | 6 +- .../left/ChatFolderModal.module.scss | 8 +- .../left/ConnectionStatusOverlay.scss | 34 +- src/components/left/LeftColumn.scss | 31 +- src/components/left/NewChatButton.scss | 3 +- src/components/left/main/Archive.module.scss | 26 +- src/components/left/main/Chat.scss | 601 +++++++++--------- src/components/left/main/ChatBadge.scss | 28 +- .../left/main/ChatCallStatus.module.scss | 29 +- .../left/main/EmptyFolder.module.scss | 35 +- .../left/main/EmptyForum.module.scss | 24 +- .../left/main/ForumPanel.module.scss | 66 +- .../FrozenAccountNotification.module.scss | 14 +- src/components/left/main/LeftMain.scss | 27 +- src/components/left/main/LeftMainHeader.scss | 52 +- .../left/main/StatusPickerMenu.module.scss | 13 +- src/components/left/main/Topic.module.scss | 15 +- .../left/main/UnconfirmedSession.module.scss | 4 +- src/components/left/newChat/NewChat.scss | 19 +- src/components/left/search/ChatMessage.scss | 32 +- src/components/left/search/ChatResults.scss | 6 +- src/components/left/search/DateSuggest.scss | 10 +- src/components/left/search/LeftSearch.scss | 73 ++- .../left/search/RecentContacts.scss | 34 +- .../settings/PrivacyLockedOption.module.scss | 5 +- src/components/left/settings/Settings.scss | 56 +- .../SettingsActiveSession.module.scss | 11 +- .../left/settings/SettingsActiveSessions.scss | 6 +- .../SettingsActiveWebsite.module.scss | 9 +- .../SettingsActiveWebsites.module.scss | 3 +- .../settings/SettingsGeneralBackground.scss | 2 +- .../SettingsGeneralBackgroundColor.scss | 22 +- .../SettingsPrivacyPublicPhoto.module.scss | 2 +- .../left/settings/WallpaperTile.scss | 35 +- .../settings/folders/SettingsFolders.scss | 31 +- src/components/main/AppInactive.scss | 11 +- src/components/main/GameModal.scss | 12 +- src/components/main/LockScreen.module.scss | 12 +- src/components/main/Main.scss | 100 +-- src/components/main/NewContactModal.scss | 12 +- .../main/premium/GiveawayModal.module.scss | 97 +-- .../premium/GiveawayTypeOption.module.scss | 31 +- .../premium/PremiumFeatureItem.module.scss | 14 +- .../premium/PremiumFeatureModal.module.scss | 72 ++- .../main/premium/PremiumMainModal.module.scss | 59 +- .../PremiumSubscriptionOption.module.scss | 76 ++- .../StarsGiftingPickerModal.module.scss | 33 +- .../common/PremiumLimitPreview.module.scss | 12 +- .../PremiumLimitReachedModal.module.scss | 23 +- .../common/PremiumLimitsCompare.module.scss | 26 +- .../PremiumFeaturePreviewStickers.module.scss | 9 +- .../PremiumFeaturePreviewStories.module.scss | 20 +- .../PremiumFeaturePreviewVideo.module.scss | 26 +- .../ConfettiContainer.module.scss | 7 +- .../SnapEffectContainer.module.scss | 10 +- .../visualEffects/WaveContainer.module.scss | 12 +- src/components/mediaViewer/MediaViewer.scss | 118 ++-- .../mediaViewer/MediaViewerContent.scss | 12 +- .../mediaViewer/MediaViewerFooter.scss | 65 +- .../mediaViewer/MediaViewerSlides.scss | 35 +- .../mediaViewer/SeekLine.module.scss | 60 +- src/components/mediaViewer/SenderInfo.scss | 14 +- src/components/mediaViewer/VideoPlayer.scss | 149 +++-- .../mediaViewer/VideoPlayerControls.scss | 42 +- .../middle/ChatLanguageModal.module.scss | 2 +- .../middle/ContactGreeting.module.scss | 31 +- .../middle/EmojiInteractionAnimation.scss | 10 +- .../middle/FloatingActionButtons.module.scss | 64 +- .../FrozenAccountPlaceholder.module.scss | 8 +- .../middle/HeaderMenuContainer.scss | 12 +- src/components/middle/MessageList.scss | 185 +++--- .../middle/MessageListAccountInfo.module.scss | 43 +- .../middle/MessageSelectToolbar.scss | 126 ++-- .../middle/MiddleColumn.module.scss | 44 +- src/components/middle/MiddleColumn.scss | 190 +++--- src/components/middle/MiddleHeader.scss | 139 ++-- .../middle/MiddleHeaderPanes.module.scss | 36 +- src/components/middle/NoMessages.scss | 39 +- .../PinnedMessageNavigation.module.scss | 32 +- src/components/middle/ReactorListModal.scss | 10 +- .../RequirementToContactMessage.module.scss | 46 +- .../middle/ScrollDownButton.module.scss | 35 +- .../middle/composer/AttachBotIcon.module.scss | 7 +- .../middle/composer/AttachMenu.scss | 13 +- .../composer/AttachmentModal.module.scss | 68 +- .../composer/AttachmentModalItem.module.scss | 53 +- .../middle/composer/BotCommandMenu.scss | 8 +- .../middle/composer/BotKeyboardMenu.scss | 16 +- .../middle/composer/ChatCommand.scss | 2 +- .../composer/ChatCommandTooltip.module.scss | 5 +- .../composer/ComposerEmbeddedMessage.scss | 22 +- .../composer/CustomEmojiTooltip.module.scss | 8 +- .../middle/composer/CustomSendMenu.scss | 17 +- src/components/middle/composer/DropArea.scss | 7 +- .../middle/composer/DropTarget.scss | 53 +- .../middle/composer/EmojiButton.scss | 14 +- .../middle/composer/EmojiPicker.scss | 32 +- .../middle/composer/EmojiTooltip.scss | 5 +- src/components/middle/composer/GifPicker.scss | 14 +- .../middle/composer/InlineBotTooltip.scss | 21 +- .../middle/composer/MentionTooltip.scss | 15 +- src/components/middle/composer/PollModal.scss | 13 +- .../middle/composer/SendAsMenu.scss | 31 +- .../middle/composer/StickerPicker.module.scss | 38 +- .../composer/StickerSetCover.module.scss | 5 +- .../middle/composer/StickerTooltip.scss | 2 +- .../middle/composer/SymbolMenu.scss | 100 +-- .../middle/composer/TextFormatter.scss | 77 ++- .../middle/composer/WebPagePreview.scss | 28 +- .../composer/inlineResults/BaseResult.scss | 34 +- .../composer/inlineResults/MediaResult.scss | 13 +- .../composer/inlineResults/StickerResult.scss | 12 +- .../middle/message/ActionMessage.module.scss | 74 ++- .../middle/message/BaseStory.module.scss | 12 +- .../middle/message/CommentButton.scss | 124 ++-- .../middle/message/Contact.module.scss | 25 +- .../middle/message/FactCheck.module.scss | 8 +- src/components/middle/message/Game.scss | 18 +- .../middle/message/Giveaway.module.scss | 23 +- .../middle/message/InlineButtons.scss | 14 +- src/components/middle/message/Invoice.scss | 21 +- .../message/InvoiceMediaPreview.module.scss | 33 +- src/components/middle/message/Location.scss | 71 ++- src/components/middle/message/Message.scss | 196 +++--- .../middle/message/MessageContextMenu.scss | 27 +- .../middle/message/MessageEffect.module.scss | 5 +- .../middle/message/MessageMeta.scss | 53 +- .../message/MessagePhoneCall.module.scss | 8 +- .../message/PaidMediaOverlay.module.scss | 6 +- src/components/middle/message/Poll.scss | 37 +- src/components/middle/message/PollOption.scss | 48 +- src/components/middle/message/RoundVideo.scss | 59 +- .../message/SenderGroupContainer.module.scss | 9 +- .../message/SimilarChannels.module.scss | 121 ++-- .../middle/message/SponsoredMessage.scss | 28 +- .../middle/message/Sticker.module.scss | 6 +- .../middle/message/TimeMenuItem.module.scss | 29 +- src/components/middle/message/WebPage.scss | 49 +- .../message/WebPageUniqueGift.module.scss | 20 +- .../middle/message/_message-content.scss | 340 +++++----- .../reactions/ReactionButton.module.scss | 86 +-- .../reactions/ReactionPicker.module.scss | 31 +- .../ReactionPickerLimited.module.scss | 4 +- .../message/reactions/ReactionSelector.scss | 49 +- .../ReactionSelectorReaction.module.scss | 16 +- .../middle/message/reactions/Reactions.scss | 7 +- src/components/middle/panes/AudioPlayer.scss | 106 +-- .../middle/panes/BotAdPane.module.scss | 18 +- .../panes/BotVerificationPane.module.scss | 6 +- .../middle/panes/ChatReportPane.scss | 2 +- .../panes/HeaderPinnedMessage.module.scss | 108 ++-- .../panes/PaidMessageChargePane.module.scss | 15 +- .../middle/search/MiddleSearch.module.scss | 144 +++-- .../search/MiddleSearchResult.module.scss | 48 +- .../modals/aboutAds/AboutAdsModal.module.scss | 2 +- .../modals/boost/BoostModal.module.scss | 21 +- .../chatInvite/ChatInviteModal.module.scss | 4 +- .../modals/chatlist/ChatlistModal.module.scss | 19 +- .../CollectibleInfoModal.module.scss | 10 +- .../modals/common/TableAboutModal.module.scss | 25 +- .../modals/common/TableInfoModal.module.scss | 28 +- .../FrozenAccountModal.module.scss | 15 +- .../modals/gift/GiftComposer.module.scss | 126 ++-- .../modals/gift/GiftItem.module.scss | 48 +- .../modals/gift/GiftModal.module.scss | 60 +- .../gift/StarGiftCategoryList.module.scss | 30 +- .../modals/gift/UniqueGiftHeader.module.scss | 23 +- .../gift/info/GiftInfoModal.module.scss | 66 +- .../GiftResalePriceComposerModal.module.scss | 8 +- .../status/GiftStatusInfoModal.module.scss | 33 +- .../gift/upgrade/GiftUpgradeModal.module.scss | 1 - .../withdraw/GiftWithdrawModal.module.scss | 12 +- .../modals/giftcode/GiftCodeModal.module.scss | 4 +- .../InviteViaLinkModal.module.scss | 4 +- .../OneTimeMediaModal.module.scss | 21 +- .../PaidReactionModal.module.scss | 61 +- .../paidReaction/StarSlider.module.scss | 68 +- .../PreparedMessageModal.module.scss | 91 +-- .../modals/reportAd/ReportAdModal.module.scss | 8 +- .../reportModal/ReportModal.module.scss | 18 +- .../stars/StarTopupOptionList.module.scss | 13 +- .../stars/StarsBalanceModal.module.scss | 95 +-- .../stars/gift/StarsGiftModal.module.scss | 37 +- .../StarsSubscriptionItem.module.scss | 11 +- .../StarsSubscriptionModal.module.scss | 28 +- .../transaction/PaidMediaThumb.module.scss | 37 +- .../StarsTransactionItem.module.scss | 14 +- .../StarsTransactionModal.module.scss | 49 +- .../SuggestedStatusModal.module.scss | 4 +- .../webApp/MinimizedWebAppModal.module.scss | 22 +- .../webApp/MoreAppsTabContent.module.scss | 35 +- .../modals/webApp/WebAppGridItem.module.scss | 22 +- .../modals/webApp/WebAppModal.module.scss | 197 +++--- .../webApp/WebAppModalTabContent.module.scss | 152 +++-- src/components/payment/CardInput.scss | 2 +- src/components/payment/Checkout.module.scss | 56 +- src/components/payment/ConfirmPayment.scss | 9 +- src/components/payment/PaymentInfo.scss | 10 +- src/components/payment/PaymentModal.scss | 36 +- .../payment/ReceiptModal.module.scss | 16 +- src/components/payment/Shipping.scss | 4 +- src/components/payment/ShippingInfo.scss | 2 +- src/components/right/AddChatMembers.scss | 6 +- src/components/right/GifSearch.scss | 8 +- src/components/right/ManageTopic.module.scss | 17 +- src/components/right/PollAnswerResults.scss | 42 +- src/components/right/PollResults.scss | 18 +- src/components/right/Profile.scss | 41 +- src/components/right/RightColumn.scss | 79 +-- src/components/right/RightHeader.scss | 22 +- src/components/right/StickerSearch.scss | 21 +- .../right/management/JoinRequest.scss | 15 +- .../right/management/Management.scss | 85 +-- .../statistics/BoostStatistics.module.scss | 33 +- .../MonetizationStatistics.module.scss | 10 +- .../right/statistics/Statistics.module.scss | 21 +- .../statistics/StatisticsOverview.module.scss | 15 +- .../StatisticsPublicForward.module.scss | 9 +- .../StatisticsRecentPost.module.scss | 61 +- src/components/story/MediaStory.module.scss | 15 +- .../story/StealthModeModal.module.scss | 22 +- src/components/story/StoryFooter.module.scss | 17 +- .../story/StoryProgress.module.scss | 25 +- src/components/story/StoryRibbon.module.scss | 50 +- .../story/StorySettings.module.scss | 105 +-- src/components/story/StoryToggler.module.scss | 25 +- .../story/StoryViewModal.module.scss | 17 +- src/components/story/StoryViewer.module.scss | 351 ++++++---- .../story/mediaArea/MediaArea.module.scss | 66 +- .../story/privacy/CloseFriends.module.scss | 15 +- src/components/ui/AvatarEditable.scss | 41 +- src/components/ui/Badge.module.scss | 10 +- src/components/ui/Button.scss | 133 ++-- src/components/ui/Checkbox.scss | 102 +-- src/components/ui/CropModal.scss | 9 +- src/components/ui/Draggable.module.scss | 21 +- src/components/ui/FloatingActionButton.scss | 3 +- src/components/ui/ListItem.scss | 116 ++-- src/components/ui/Loading.scss | 2 +- src/components/ui/Menu.scss | 55 +- src/components/ui/MenuItem.scss | 121 ++-- src/components/ui/Modal.scss | 65 +- .../ui/ModalStarBalanceBar.module.scss | 17 +- src/components/ui/Notification.scss | 35 +- src/components/ui/ProgressSpinner.scss | 39 +- src/components/ui/Radio.scss | 80 ++- src/components/ui/RadioGroup.module.scss | 12 +- src/components/ui/RangeSlider.scss | 61 +- .../ui/RangeSliderWithMarks.module.scss | 56 +- src/components/ui/RippleEffect.scss | 23 +- src/components/ui/RoundTimer.module.scss | 7 +- src/components/ui/SearchInput.scss | 50 +- src/components/ui/Separator.module.scss | 4 +- src/components/ui/ShowMoreButton.scss | 9 +- src/components/ui/Spinner.scss | 11 +- src/components/ui/Switcher.scss | 34 +- src/components/ui/Tab.scss | 53 +- src/components/ui/TabList.scss | 24 +- src/components/ui/Toggle.module.scss | 23 +- src/components/ui/Transition.scss | 71 +-- .../PlaceholderChatInfo.module.scss | 4 +- src/components/ui/placeholder/Skeleton.scss | 18 +- .../animations/useTransitionActiveKey.ts | 2 +- src/lib/lovely-chart/styles/_animations.scss | 12 +- src/lib/lovely-chart/styles/_buttons.scss | 39 +- src/lib/lovely-chart/styles/_common.scss | 89 +-- src/lib/lovely-chart/styles/_header.scss | 18 +- src/lib/lovely-chart/styles/_minimap.scss | 69 +- src/lib/lovely-chart/styles/_tools.scss | 3 +- src/lib/lovely-chart/styles/_tooltip.scss | 45 +- src/styles/_common.scss | 97 +-- src/styles/_fonts.scss | 2 +- src/styles/_forms.scss | 124 ++-- src/styles/_mixins.scss | 51 +- src/styles/_variables.scss | 20 +- src/styles/icons.woff | Bin 33560 -> 33572 bytes src/styles/icons.woff2 | Bin 28064 -> 28064 bytes src/styles/index.scss | 121 ++-- src/styles/print.scss | 16 +- src/styles/reboot.css | 27 +- tsconfig.json | 2 +- 367 files changed, 8209 insertions(+), 6028 deletions(-) rename .fantasticonrc.js => .fantasticonrc.cjs (95%) diff --git a/.fantasticonrc.js b/.fantasticonrc.cjs similarity index 95% rename from .fantasticonrc.js rename to .fantasticonrc.cjs index cc39496e8..d95a56152 100644 --- a/.fantasticonrc.js +++ b/.fantasticonrc.cjs @@ -1,4 +1,4 @@ -export default { +module.exports = { inputDir: './src/assets/font-icons', outputDir: './src/styles', name: 'icons', diff --git a/.stylelintrc.json b/.stylelintrc.json index e8ccad568..a5fa681c5 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -1,7 +1,8 @@ { "extends": [ "stylelint-config-recommended-scss", - "@stylistic/stylelint-config" + "@stylistic/stylelint-config", + "stylelint-config-clean-order/error" ], "ignoreFiles": [ "dist/*.css", diff --git a/package-lock.json b/package-lock.json index e49f5b2a2..390f082da 100644 --- a/package-lock.json +++ b/package-lock.json @@ -96,6 +96,7 @@ "script-loader": "^0.7.2", "serve": "^14.2.4", "stylelint": "^16.19.1", + "stylelint-config-clean-order": "^7.0.0", "stylelint-config-recommended-scss": "^15.0.0", "stylelint-declaration-block-no-ignored-properties": "^2.8.0", "stylelint-group-selectors": "^1.0.10", @@ -18381,6 +18382,16 @@ "node": ">=4" } }, + "node_modules/postcss-sorting": { + "version": "8.0.2", + "resolved": "https://registry.npmjs.org/postcss-sorting/-/postcss-sorting-8.0.2.tgz", + "integrity": "sha512-M9dkSrmU00t/jK7rF6BZSZauA5MAaBW4i5EnJXspMwt4iqTh/L9j6fgMnbElEOfyRyfLfVbIHj/R52zHzAPe1Q==", + "dev": true, + "license": "MIT", + "peerDependencies": { + "postcss": "^8.4.20" + } + }, "node_modules/postcss-value-parser": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", @@ -20891,6 +20902,19 @@ "node": ">=18.12.0" } }, + "node_modules/stylelint-config-clean-order": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/stylelint-config-clean-order/-/stylelint-config-clean-order-7.0.0.tgz", + "integrity": "sha512-R28w1xNliIbem3o+VIrNjAU8cMgxrGlDoXVqWW7lJ1OvSDsmNGj5aKSW6Xm7i5PK4E99T3Hs19BJFni5IbE56g==", + "dev": true, + "license": "MIT", + "dependencies": { + "stylelint-order": "^6.0.4" + }, + "peerDependencies": { + "stylelint": ">=14" + } + }, "node_modules/stylelint-config-recommended": { "version": "16.0.0", "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-16.0.0.tgz", @@ -20978,6 +21002,20 @@ "stylelint": "^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0 || ^14.0.0 || ^15.0.0 || ^16.0.0" } }, + "node_modules/stylelint-order": { + "version": "6.0.4", + "resolved": "https://registry.npmjs.org/stylelint-order/-/stylelint-order-6.0.4.tgz", + "integrity": "sha512-0UuKo4+s1hgQ/uAxlYU4h0o0HS4NiQDud0NAUNI0aa8FJdmYHA5ZZTFHiV5FpmE3071e9pZx5j0QpVJW5zOCUA==", + "dev": true, + "license": "MIT", + "dependencies": { + "postcss": "^8.4.32", + "postcss-sorting": "^8.0.2" + }, + "peerDependencies": { + "stylelint": "^14.0.0 || ^15.0.0 || ^16.0.1" + } + }, "node_modules/stylelint-scss": { "version": "6.12.0", "resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-6.12.0.tgz", diff --git a/package.json b/package.json index 765f1cc6d..0fcfd0f06 100644 --- a/package.json +++ b/package.json @@ -19,13 +19,13 @@ "electron:package:staging": "ENV=staging npm run electron:package -- -p never", "electron:release:production": "ENV=production npm run electron:package -- -p always", "telegraph:update_changelog": "node ./dev/telegraphChangelog.js", - "check": "tsc && stylelint \"**/*.{css,scss}\" && eslint .", - "check:fix": "npm run check -- --fix", + "check": "tsc && stylelint \"**/*.{css,scss}\" && eslint", + "check:fix": "stylelint \"**/*.{css,scss}\" --fix && eslint --fix", "tl:rehash": "node ./dev/tlHash.js", "gramjs:tl": "tsx ./src/lib/gramjs/tl/generateModules.ts", "lang:ts": "tsx ./dev/generateLangTypes.js", "lang:initial": "tsx ./dev/generateInitialLangFallback.js", - "icons:build": "fantasticon", + "icons:build": "fantasticon -c .fantasticonrc.cjs", "test": "cross-env APP_ENV=test jest --verbose --silent --forceExit", "test:playwright": "playwright test", "test:record": "playwright codegen localhost:1235", @@ -118,6 +118,7 @@ "script-loader": "^0.7.2", "serve": "^14.2.4", "stylelint": "^16.19.1", + "stylelint-config-clean-order": "^7.0.0", "stylelint-config-recommended-scss": "^15.0.0", "stylelint-declaration-block-no-ignored-properties": "^2.8.0", "stylelint-group-selectors": "^1.0.10", diff --git a/public/get/index.css b/public/get/index.css index 7917ccf43..b4534b094 100644 --- a/public/get/index.css +++ b/public/get/index.css @@ -7,23 +7,22 @@ body { margin: 0; font-family: 'Arial', sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; color: #222222; background-color: white; - - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; } .container { min-width: 200px; max-width: 330px; padding: 40px 40px 16px 40px; + border-radius: 10px; text-align: center; background-color: rgba(255, 255, 255, 0.95); - border-radius: 10px; } .logo-container { @@ -55,21 +54,18 @@ body { .container h1 { margin-bottom: 10px; - font-size: 24px; } .select-model { margin-top: 36px; margin-bottom: 16px; - color: #444444; } .info { margin-top: 28px; margin-bottom: 36px; - line-height: 1.25rem; color: #444444; } @@ -100,13 +96,13 @@ body { margin: 10px; padding: 8px 20px; + border-radius: 5px; font-size: 16px; color: #FFF; text-decoration: none; background-color: #007BFF; - border-radius: 5px; transition: background-color 150ms; } @@ -117,7 +113,6 @@ body { .download-btn.single { display: block; - margin: 32px 0; } @@ -128,7 +123,6 @@ body { .footer a { display: inline-block; - color: #A9A9A9; } diff --git a/src/components/App.module.scss b/src/components/App.module.scss index 01bc67249..41c575616 100644 --- a/src/components/App.module.scss +++ b/src/components/App.module.scss @@ -2,29 +2,23 @@ height: 100%; background-color: var(--theme-background-color); - background-position: center; background-repeat: no-repeat; + background-position: center; background-size: 100% 100%; - @media (max-width: 600px) { - height: calc(var(--vh, 1vh) * 100); - } - - :global(html.theme-light) & { - background-image: url('../assets/chat-bg-br.png'); - } - &::before { content: ""; + position: absolute; top: 0; - left: 0; - bottom: 0; right: 0; + bottom: 0; + left: 0; + background-image: url('../assets/chat-bg-pattern-light.png'); + background-repeat: repeat; background-position: top right; background-size: 510px auto; - background-repeat: repeat; mix-blend-mode: overlay; :global(html.theme-dark) & { @@ -37,4 +31,12 @@ height: calc(var(--vh, 1vh) * 100); } } + + :global(html.theme-light) & { + background-image: url('../assets/chat-bg-br.png'); + } + + @media (max-width: 600px) { + height: calc(var(--vh, 1vh) * 100); + } } diff --git a/src/components/auth/Auth.scss b/src/components/auth/Auth.scss index 4dc074fb2..50ae4d1e9 100644 --- a/src/components/auth/Auth.scss +++ b/src/components/auth/Auth.scss @@ -7,36 +7,30 @@ max-width: 25.5rem; margin: 0 auto; padding: 6rem 1rem 1rem; + text-align: center; - @media (min-width: 600px) and (min-height: 450px) { - padding: 6.8125rem 1.5rem 1.5rem; - - &.qr { - padding-top: 4rem; - } - } - #logo, .AvatarEditable label { display: block; - margin-left: auto; - margin-right: auto; + width: 7.5rem; height: 7.5rem; + margin-right: auto; margin-bottom: 1.75rem; - - @media (min-width: 600px) and (min-height: 450px) { - width: 10rem; - height: 10rem; - margin-bottom: 2.5rem; - } + margin-left: auto; body.is-electron & { width: 6rem; height: 6rem; margin-bottom: 1.75rem; } + + @media (min-width: 600px) and (min-height: 450px) { + width: 10rem; + height: 10rem; + margin-bottom: 2.5rem; + } } #logo { @@ -55,14 +49,14 @@ } .note { + margin-bottom: 2.5rem; font-size: 0.875rem; line-height: 1.35; - margin-bottom: 2.5rem; color: var(--color-text-secondary); @media (min-width: 600px) { - font-size: 1rem; margin-bottom: 3rem; + font-size: 1rem; } } @@ -73,6 +67,14 @@ min-height: 0; } } + + @media (min-width: 600px) and (min-height: 450px) { + padding: 6.8125rem 1.5rem 1.5rem; + + &.qr { + padding-top: 4rem; + } + } } #auth-registration-form, @@ -80,8 +82,8 @@ #auth-code-form, #auth-password-form, #auth-qr-form { - height: 100%; overflow-y: auto; + height: 100%; body.is-electron.is-macos & { -webkit-app-region: drag; @@ -116,16 +118,20 @@ } .auth-number-edit { - width: 2.5rem; - height: 2.5rem; - padding: 0.5rem; - font-size: 1.5rem; - color: var(--color-text-secondary); - opacity: 0.75; + cursor: var(--custom-cursor, pointer); + display: flex; align-items: center; justify-content: center; - cursor: var(--custom-cursor, pointer); + + width: 2.5rem; + height: 2.5rem; + padding: 0.5rem; + + font-size: 1.5rem; + color: var(--color-text-secondary); + + opacity: 0.75; &:hover, &:focus { @@ -135,19 +141,21 @@ #auth-qr-form { .qr-outer { - height: 280px; position: relative; + height: 280px; } .qr-inner, .qr-loading { - height: 280px; - width: 100%; position: absolute; top: 0; left: 0; + display: flex; justify-content: center; + + width: 100%; + height: 280px; } .qr-inner { @@ -167,18 +175,20 @@ .qr-plane { position: absolute; + z-index: 1; top: 50%; left: 50%; transform: translate(-50%, -50%); - z-index: 1; + border-radius: 50%; + background-color: var(--color-telegram-blue); } .qr-container { - background-color: white; - border-radius: 1.5rem; overflow: hidden; + border-radius: 1.5rem; + background-color: white; } h1 { @@ -187,29 +197,33 @@ } ol { - list-style: none; counter-reset: item; padding: 0 1.75rem; + list-style: none; li { counter-increment: item; - text-align: left; - margin: 0.75rem 0; display: flex; + margin: 0.75rem 0; + text-align: left; &::before { content: counter(item); + display: flex; - justify-content: center; align-items: center; + justify-content: center; + min-width: 1.375rem; height: 1.375rem; - padding: 0; margin: 0 0.75rem 0 0; - background: var(--color-primary); + padding: 0; border-radius: 50%; + font-size: smaller; color: white; + + background: var(--color-primary); } } } @@ -221,8 +235,8 @@ .test-server-badge { position: fixed; - bottom: 0.5rem; right: 0.5rem; + bottom: 0.5rem; } .auth-close { @@ -233,12 +247,12 @@ @keyframes qr-show { 0% { - opacity: 0; transform: scale(0.7); + opacity: 0; } 50% { - opacity: 1; transform: scale(1.1); + opacity: 1; } 100% { transform: scale(1); diff --git a/src/components/auth/CountryCodeInput.scss b/src/components/auth/CountryCodeInput.scss index ff975e1ab..e76128553 100644 --- a/src/components/auth/CountryCodeInput.scss +++ b/src/components/auth/CountryCodeInput.scss @@ -1,15 +1,15 @@ .CountryCodeInput { .input-group { cursor: var(--custom-cursor, pointer); - z-index: var(--z-country-code-input-group); .Spinner { + --spinner-size: 1.5rem; + position: absolute; top: 0.6875rem; right: 0.75rem; opacity: 0.5; - --spinner-size: 1.5rem; } // Prevent loading additional 10 kB of icomoon font on initial load. @@ -17,30 +17,33 @@ position: absolute; top: 1rem; right: 1rem; + transform: scaleY(1) rotate(45deg); + width: 0.75rem; height: 0.75rem; border: 2px solid var(--color-text-secondary); border-top: 0; border-left: 0; - transform: scaleY(1) rotate(45deg); /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */ transition: color 0.2s ease, transform 0.2s ease, top 0.2s ease; &.open { - border-color: var(--color-primary); - transform: scaleY(-1) rotate(45deg); top: 1.3125rem; + transform: scaleY(-1) rotate(45deg); + border-color: var(--color-primary); } } } .bubble { - width: 100%; - max-height: 23.5rem; - overflow-y: auto; transform-origin: top center !important; transform: scale(0.95); + overflow-y: auto; + + width: 100%; + max-height: 23.5rem; + &.open { transform: scaleY(1); } @@ -63,29 +66,33 @@ } .country-flag { - font-size: 2rem; margin-right: 1rem; + font-size: 2rem; .emoji { + display: inline-block; + width: 2rem; height: 2rem; - display: inline-block; - vertical-align: 4px; margin: -0.5rem 0.125rem; + + vertical-align: 4px; } } .country-name { - white-space: nowrap; overflow: hidden; - text-overflow: ellipsis; + margin-right: 1rem; + text-align: left; + text-overflow: ellipsis; + white-space: nowrap; } .country-code { margin-left: auto; - opacity: 0.5; padding-right: 0.25rem; + opacity: 0.5; } } diff --git a/src/components/calls/ActiveCallHeader.scss b/src/components/calls/ActiveCallHeader.scss index 25aa1ab61..414b79a4c 100644 --- a/src/components/calls/ActiveCallHeader.scss +++ b/src/components/calls/ActiveCallHeader.scss @@ -1,20 +1,23 @@ .ActiveCallHeader { position: absolute; + z-index: 1; top: 0; left: 0; - height: 2rem; - width: 100%; - z-index: 1; + transform: translateY(-100%); display: flex; - justify-content: center; - font-weight: var(--font-weight-medium); - font-size: 0.875rem; - color: #fff; align-items: center; + justify-content: center; + + width: 100%; + height: 2rem; padding: 0 1rem; + + font-size: 0.875rem; + font-weight: var(--font-weight-medium); + color: #fff; + background: linear-gradient(135deg, rgb(49, 82, 232), rgb(143, 74, 172)); - transform: translateY(-100%); &.open { transform: translateY(0); diff --git a/src/components/calls/group/GroupCall.module.scss b/src/components/calls/group/GroupCall.module.scss index 09f0b8017..b9eb154a7 100644 --- a/src/components/calls/group/GroupCall.module.scss +++ b/src/components/calls/group/GroupCall.module.scss @@ -25,38 +25,39 @@ :global { .modal-dialog { + overflow: hidden; + max-width: var(--default-width); - max-height: min(var(--max-height), 100vh); height: 100%; min-height: min(80vh, var(--max-height)); - overflow: hidden; + max-height: min(var(--max-height), 100vh); + background: var(--group-call-background-color); } .modal-content { - min-height: 100%; - display: flex; - + min-height: 100%; padding: 0; } } } .panelWrapper { - max-width: var(--default-width); width: 100%; + max-width: var(--default-width); } .panel { - background: var(--group-call-panel-color); - - display: flex; - flex-direction: column; - height: 100%; + position: relative; overflow-y: scroll; - position: relative; + display: flex; + flex-direction: column; + + height: 100%; + + background: var(--group-call-panel-color); } .panelScrollTrigger { @@ -66,23 +67,24 @@ } .panelHeader { - display: flex; - align-items: center; + user-select: none; + position: sticky; + z-index: 1; top: 0; - border-bottom: 0.0625rem solid transparent; + display: flex; + align-items: center; padding: 0.375rem 0.875rem; + border-bottom: 0.0625rem solid transparent; - @include mixins.adapt-padding-to-scrollbar(0.875rem); - - user-select: none; - z-index: 1; background: var(--group-call-panel-color); transition: 0.25s ease-in-out border-bottom-color; + @include mixins.adapt-padding-to-scrollbar(0.875rem); + &.scrolled { border-bottom-color: var(--group-call-panel-header-border-color); } @@ -105,21 +107,23 @@ } .panelHeaderText { + overflow: hidden; display: flex; flex-direction: column; justify-content: center; - overflow: hidden; } .title { - line-height: 1.375rem; - white-space: pre; - overflow: hidden; - text-overflow: ellipsis; unicode-bidi: plaintext; + overflow: hidden; + + margin: 0; + font-size: 1rem; font-weight: var(--font-weight-medium); - margin: 0; + line-height: 1.375rem; + text-overflow: ellipsis; + white-space: pre; } .bigger { @@ -127,14 +131,16 @@ } .subtitle { + overflow: hidden; + display: inline-block; + + margin: 0; + font-size: 0.875rem; line-height: 1.125rem; - margin: 0; color: var(--color-text-secondary); - overflow: hidden; - white-space: nowrap; text-overflow: ellipsis; - display: inline-block; + white-space: nowrap; } .participants { @@ -145,8 +151,8 @@ } .participantVideos { - width: 100%; position: relative; + width: 100%; } .addParticipantButton { @@ -156,7 +162,6 @@ .videos { display: flex; flex-direction: column; - width: calc(100% - var(--default-width)); } @@ -185,24 +190,28 @@ .actions { --actions-max-width: 0px; + position: absolute; + z-index: 2; + bottom: 1.75rem; left: 50%; transform: translateX(calc(-50% - var(--actions-max-width) / 2)); - bottom: 1.75rem; display: flex; gap: 1.25rem; - z-index: 2; } .actionButton { width: 3.375rem !important; height: 3.375rem !important; + color: var(--color-text) !important; + background-color: var(--green-button-color) !important; - transition: 0.15s filter, 0.25s ease-out background-color; backdrop-filter: blur(25px); + transition: 0.15s filter, 0.25s ease-out background-color; + &:global(.disabled) { background: var(--disabled-button-color) !important; } @@ -245,10 +254,9 @@ .landscape { .panelWrapper { position: absolute; - right: 0; top: 0; + right: 0; bottom: 0; - transform: translateZ(0); } @@ -256,13 +264,16 @@ .actions { --actions-max-width: var(--default-width); + bottom: 2.5rem; + + padding: 0.75rem; + border-radius: 1.25rem; + + opacity: 0; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(50px); - border-radius: 1.25rem; - padding: 0.75rem; - bottom: 2.5rem; + transition: 250ms ease-in-out opacity; - opacity: 0; } .videos:hover ~ .actions, .mainVideoContainer:hover ~ .actions, .actions:hover { @@ -272,11 +283,12 @@ &.noVideoParticipants { .panelWrapper { - max-width: max(50vw, 30rem); - width: 100%; - transform: translateX(-50%); - left: 50%; right: 0; + left: 50%; + transform: translateX(-50%); + + width: 100%; + max-width: max(50vw, 30rem); } :global(.modal-content) { @@ -287,14 +299,17 @@ .portrait { .panelWrapper::after { - display: block; + pointer-events: none; content: ''; + position: fixed; + bottom: 0; + left: 0; + + display: block; + width: 100%; height: 7.5rem; - left: 0; - bottom: 0; - pointer-events: none; background: linear-gradient(180deg, rgba(33, 33, 33, 0) 0%, rgba(33, 33, 33, 0.65) 48.54%, #212121 100%); } diff --git a/src/components/calls/group/GroupCallParticipant.module.scss b/src/components/calls/group/GroupCallParticipant.module.scss index 72741a8db..cb359f423 100644 --- a/src/components/calls/group/GroupCallParticipant.module.scss +++ b/src/components/calls/group/GroupCallParticipant.module.scss @@ -2,6 +2,7 @@ :global { .ListItem-button { --color-chat-hover: rgba(255, 255, 255, 0.04); + padding: 0.5rem; } @@ -13,9 +14,10 @@ display: flex !important; .fullName { - font-weight: var(--font-weight-medium); - font-size: 1rem; --emoji-size: 1rem; + + font-size: 1rem; + font-weight: var(--font-weight-medium); } } } @@ -23,8 +25,8 @@ .subtitle { display: flex !important; - align-items: center; gap: 0.375rem; + align-items: center; font-size: 1rem !important; } @@ -35,8 +37,8 @@ } .icon { - margin-left: auto; margin-right: 0.25rem; + margin-left: auto; } .subtitleBlue { diff --git a/src/components/calls/group/GroupCallParticipantList.module.scss b/src/components/calls/group/GroupCallParticipantList.module.scss index 6c9b10ede..80fedc7f3 100644 --- a/src/components/calls/group/GroupCallParticipantList.module.scss +++ b/src/components/calls/group/GroupCallParticipantList.module.scss @@ -1,7 +1,7 @@ .root { position: absolute; - width: 100%; top: 0.25rem; + width: 100%; padding-bottom: 5rem; } diff --git a/src/components/calls/group/GroupCallParticipantMenu.scss b/src/components/calls/group/GroupCallParticipantMenu.scss index 50e59fc7c..fbedb996b 100644 --- a/src/components/calls/group/GroupCallParticipantMenu.scss +++ b/src/components/calls/group/GroupCallParticipantMenu.scss @@ -11,22 +11,27 @@ z-index: var(--z-modal-menu); .bubble { - backdrop-filter: none !important; - background: none !important; - border-radius: 0; + overflow: visible; + padding: 0; border: none !important; - box-shadow: none !important; - overflow: visible; + border-radius: 0; + color: var(--color-text); + background: none !important; + backdrop-filter: none !important; + box-shadow: none !important; + .group { - box-shadow: 0 0.25rem 0.5rem 0.125rem rgba(16, 16, 16, 0.3); overflow: hidden; - background: var(--color-background); - border-radius: var(--border-radius-default); + margin-bottom: 0.5rem; + border-radius: var(--border-radius-default); + + background: var(--color-background); backdrop-filter: blur(10px); + box-shadow: 0 0.25rem 0.5rem 0.125rem rgba(16, 16, 16, 0.3); } } @@ -37,16 +42,35 @@ } .volume-control { + + @mixin thumb-styles() { + width: 1.5rem; + height: 3rem; + border: none; + border-radius: var(--border-radius-default); + + background: var(--range-color); + box-shadow: -13.5rem 0 0 12.75rem var(--range-color); + + transition: 0.25s ease-in-out background-color, 0.25s ease-in-out box-shadow; + } + + cursor: var(--custom-cursor, pointer); + position: relative; + overflow: hidden; height: 3rem; .info { pointer-events: none; + position: relative; z-index: 1; - height: 100%; + display: flex; flex-direction: row; align-items: center; + + height: 100%; padding: 0.75rem 1rem; .AnimatedSticker { @@ -70,31 +94,16 @@ --range-color: #CB5757; } - position: relative; - overflow: hidden; - cursor: var(--custom-cursor, pointer); - - @mixin thumb-styles() { - border: none; - height: 3rem; - width: 1.5rem; - background: var(--range-color); - border-radius: var(--border-radius-default); - box-shadow: -13.5rem 0 0 12.75rem var(--range-color); - transition: 0.25s ease-in-out background-color, 0.25s ease-in-out box-shadow; - } - - @include mixins.reset-range(); - // Apply custom styles input[type="range"] { - height: 3rem; position: absolute; - left: -1.5rem; - top: 0; - width: calc(100% + 1.5rem); - margin: 0; z-index: 0; + top: 0; + left: -1.5rem; + + width: calc(100% + 1.5rem); + height: 3rem; + margin: 0; // Note that while we're repeating code here, // that's necessary as you can't comma-separate these type of selectors. @@ -111,5 +120,7 @@ @include thumb-styles(); } } + + @include mixins.reset-range(); } } diff --git a/src/components/calls/group/GroupCallParticipantVideo.module.scss b/src/components/calls/group/GroupCallParticipantVideo.module.scss index 5bda44e81..d3c24c118 100644 --- a/src/components/calls/group/GroupCallParticipantVideo.module.scss +++ b/src/components/calls/group/GroupCallParticipantVideo.module.scss @@ -1,15 +1,16 @@ .wrapper { position: absolute; - opacity: 1; transform: translate(var(--x), var(--y)) scale(1); width: var(--width); height: var(--height); + + opacity: 1; } .hidden { - opacity: 0; transform: translate(var(--x), var(--y)) scale(0.6); + opacity: 0; } .noAnimate { @@ -17,34 +18,44 @@ } .root { + user-select: none; + position: relative; - width: 100%; - height: 100%; display: flex; + + width: 100%; + height: 100%; border-radius: 0.625rem; - user-select: none; &::before { content: ''; - display: block; + position: absolute; inset: -0.125rem; + transform: scale(0.96); + + display: block; + border-radius: 0.75rem; + background: var(--gradient-speaking); - transform: scale(0.96); transition: 0.25s ease-in-out transform; } &::after { content: ''; - display: block; + position: absolute; - inset: 0; - background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55.62%, rgba(0, 0, 0, 0.5) 86.46%); z-index: 2; + inset: 0; + + display: block; + border-radius: 0.625rem; + + background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55.62%, rgba(0, 0, 0, 0.5) 86.46%); } &.speaking::before { @@ -57,35 +68,41 @@ } .video { + z-index: 2; + + display: block; + width: 100%; height: 100%; - display: block; - object-fit: contain; border-radius: 0.625rem; - z-index: 2; + + object-fit: contain; } .videoFallback { composes: video; position: absolute; - height: 100%; z-index: 1; + height: 100%; } .thumbnailWrapper { position: absolute; z-index: 0; + + overflow: hidden; + width: 100%; height: 100%; - overflow: hidden; border-radius: 0.625rem; + background: #000; } .thumbnail { - object-fit: cover; width: 100%; height: 100%; + object-fit: cover; } .flipped { @@ -94,32 +111,36 @@ .pinButton { position: absolute; - inset-inline-end: 0.25rem; - inset-block-start: 0.25rem; z-index: 3; + inset-block-start: 0.25rem; + inset-inline-end: 0.25rem; + color: #FFFFFF !important; } .bottomPanel { position: absolute; + z-index: 3; inset-block-end: 0; inset-inline: 0; - border-end-end-radius: 0.625rem; - border-end-start-radius: 0.625rem; + + display: flex; + gap: 0.25rem; + align-items: center; padding: 0.5rem 0.75rem; - display: flex; - align-items: center; - gap: 0.25rem; - z-index: 3; + border-end-start-radius: 0.625rem; + border-end-end-radius: 0.625rem; } .info { display: flex; flex-direction: column; gap: 0.25rem; - font-size: 1rem; + min-width: 0; + + font-size: 1rem; } .pinned .bottomPanel, .pinned::after { @@ -132,23 +153,24 @@ } .name { - color: #FFFFFF; font-weight: var(--font-weight-medium); line-height: 1.125rem; + color: #FFFFFF; :global(.fullName) { - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - font-size: 1rem; --emoji-size: 1rem; + + overflow: hidden; + font-size: 1rem; + text-overflow: ellipsis; + white-space: nowrap; } } .status { + line-height: 1.125rem; color: #FFFFFF; opacity: 0.6; - line-height: 1.125rem; } .icon { diff --git a/src/components/calls/group/GroupCallTopPane.scss b/src/components/calls/group/GroupCallTopPane.scss index 0177ba120..8e1e2c4b4 100644 --- a/src/components/calls/group/GroupCallTopPane.scss +++ b/src/components/calls/group/GroupCallTopPane.scss @@ -3,11 +3,12 @@ .GroupCallTopPane { @include mixins.header-pane; + cursor: var(--custom-cursor, pointer); + display: flex; flex-direction: row; - justify-content: space-between; align-items: center; - cursor: var(--custom-cursor, pointer); + justify-content: space-between; .info { display: flex; @@ -26,10 +27,11 @@ } .join { - height: 1.875rem; - border-radius: 1rem; - font-weight: var(--font-weight-medium); - padding: 0 1rem; width: auto; + height: 1.875rem; + padding: 0 1rem; + border-radius: 1rem; + + font-weight: var(--font-weight-medium); } } diff --git a/src/components/calls/group/MicrophoneButton.module.scss b/src/components/calls/group/MicrophoneButton.module.scss index b3f7189b3..bba79a12d 100644 --- a/src/components/calls/group/MicrophoneButton.module.scss +++ b/src/components/calls/group/MicrophoneButton.module.scss @@ -3,32 +3,38 @@ background: var(--gradient-green); &::before, &::after { + content: ''; + position: absolute; inset: 0; - content: ''; + display: block; - transition: 0.25s ease-in-out opacity, 0.25s ease-in-out transform; + opacity: 0; + + transition: 0.25s ease-in-out opacity, 0.25s ease-in-out transform; } &::before { - background: var(--gradient-blue); transform: rotate(45deg); + background: var(--gradient-blue); } &::after { - background: var(--gradient-purple); transform: rotate(-45deg); + background: var(--gradient-purple); } } .spinner { position: absolute; - width: 100%; - height: 100%; z-index: 2; + width: 100%; + height: 100%; + opacity: 0; + transition: 0.25s ease-in-out opacity; } @@ -37,8 +43,8 @@ } .mutedByAdmin::before, .canUnmute::before { - opacity: 1; transform: rotate(0deg); + opacity: 1; } .icon { diff --git a/src/components/calls/phone/PhoneCall.module.scss b/src/components/calls/phone/PhoneCall.module.scss index 6e6706b60..f3100f7ec 100644 --- a/src/components/calls/phone/PhoneCall.module.scss +++ b/src/components/calls/phone/PhoneCall.module.scss @@ -6,6 +6,7 @@ display: flex; flex-direction: column; align-items: center; + height: 80vh; padding: 0; } @@ -14,13 +15,14 @@ --radius: 0; position: absolute; + z-index: -1; top: 0; left: 0; + transform: scale(1.1); + width: 100%; height: 100%; border-radius: 0; - z-index: -1; - transform: scale(1.1); :global(.Avatar__media) { border-radius: 0; @@ -36,8 +38,8 @@ .single-column { :global(.modal-dialog) { max-width: 100% !important; - border-radius: 0; margin: 0; + border-radius: 0; } :global(.modal-content) { @@ -47,13 +49,16 @@ } .header { - width: 100%; + position: absolute; + display: flex; align-items: center; - color: #fff; - position: absolute; + + width: 100%; padding: 0.5rem; + color: #fff; + :global(.Button) { color: #fff; } @@ -68,33 +73,41 @@ } .emojis-backdrop { + pointer-events: none; + position: absolute; + z-index: 2; top: 0; left: 0; - width: 100%; - height: 100%; + display: flex; justify-content: center; - pointer-events: none; + + width: 100%; + height: 100%; + transition: 0.25s ease-in-out background-color; - z-index: 2; &.open { - background-color: rgba(0, 0, 0, 0.7); pointer-events: auto; + background-color: rgba(0, 0, 0, 0.7); } } .emojis { - user-select: none; pointer-events: auto; cursor: var(--custom-cursor, pointer); - margin-top: 1rem; - height: 3rem; - transition: 0.25s ease-in-out transform; + user-select: none; + top: 0; + + height: 3rem; + margin-top: 1rem; + font-size: 1.5rem; + transition: 0.25s ease-in-out transform; + &.open { transform: scale(2) translateY(3rem); } @@ -102,13 +115,18 @@ .emoji-tooltip { user-select: none; + position: absolute; - margin-top: 10rem; - color: white; + max-width: 20rem; - text-align: center; + margin-top: 10rem; + font-weight: var(--font-weight-medium); + color: white; + text-align: center; + opacity: 0; + transition: 0.25s ease-in-out opacity; &.open { @@ -117,25 +135,29 @@ } .user-info { - width: 100%; + pointer-events: none; + user-select: none; + display: flex; flex-direction: column; align-items: center; + + width: 100%; margin-top: 0; + margin-bottom: auto; padding-top: 4rem; padding-bottom: 2rem; - margin-bottom: auto; + color: #fff; + background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, transparent 100%); - pointer-events: none; - user-select: none; } .buttons { - display: flex; + user-select: none; position: absolute; bottom: 1rem; - user-select: none; + display: flex; } .leave { @@ -159,20 +181,22 @@ } .main-video { - z-index: -1; position: absolute; + z-index: -1; width: 100%; height: 100%; } .second-video { - z-index: -1; position: absolute; - width: 9rem; - bottom: 1rem; + z-index: -1; right: 1rem; - border-radius: 0.5rem; + bottom: 1rem; transform: translateY(calc(100% + 1rem)) rotateY(180deg); + + width: 9rem; + border-radius: 0.5rem; + transition: 0.25s ease-in-out transform; &.visible { diff --git a/src/components/calls/phone/PhoneCallButton.module.scss b/src/components/calls/phone/PhoneCallButton.module.scss index 12de885ae..b139f1269 100644 --- a/src/components/calls/phone/PhoneCallButton.module.scss +++ b/src/components/calls/phone/PhoneCallButton.module.scss @@ -1,8 +1,8 @@ .root { - width: 5rem; display: flex; flex-direction: column; align-items: center; + width: 5rem; &:not(:first-child) { margin-left: 1rem; @@ -10,16 +10,16 @@ } .button { - background-color: rgba(0, 0, 0, 0.1) !important; color: #fff !important; + background-color: rgba(0, 0, 0, 0.1) !important; &:hover { background-color: rgba(0, 0, 0, 0.2) !important; } &.active { - background-color: #fff !important; color: var(--color-text-secondary) !important; + background-color: #fff !important; &:hover { background-color: #ddd !important; @@ -28,9 +28,10 @@ } .button-text { - color: #fff; - font-size: 0.75rem; - text-transform: lowercase; margin-top: 0.25rem; + + font-size: 0.75rem; + color: #fff; + text-transform: lowercase; white-space: nowrap; } diff --git a/src/components/calls/phone/RatePhoneCallModal.module.scss b/src/components/calls/phone/RatePhoneCallModal.module.scss index b98f1ff6d..8f7de7fe0 100644 --- a/src/components/calls/phone/RatePhoneCallModal.module.scss +++ b/src/components/calls/phone/RatePhoneCallModal.module.scss @@ -1,7 +1,7 @@ .stars { - width: 100%; display: flex; justify-content: center; + width: 100%; font-size: 1.5rem; } @@ -19,8 +19,8 @@ } .comment { - margin-top: 1rem; overflow: hidden; + margin-top: 1rem; &:not(.visible) { display: none; diff --git a/src/components/common/AboutMonetizationModal.module.scss b/src/components/common/AboutMonetizationModal.module.scss index 01a6d958c..403758c4d 100644 --- a/src/components/common/AboutMonetizationModal.module.scss +++ b/src/components/common/AboutMonetizationModal.module.scss @@ -1,7 +1,7 @@ .title, .description { + padding-inline: 1.5rem; text-align: center !important; text-wrap: pretty; - padding-inline: 1.5rem; } .toncoin { diff --git a/src/components/common/AnimatedIconWithPreview.module.scss b/src/components/common/AnimatedIconWithPreview.module.scss index 4faaa222f..a03de22ac 100644 --- a/src/components/common/AnimatedIconWithPreview.module.scss +++ b/src/components/common/AnimatedIconWithPreview.module.scss @@ -1,6 +1,5 @@ .root { position: relative; - display: block !important; :global(.AnimatedSticker.not-shown) { @@ -10,8 +9,9 @@ .preview { position: absolute; - left: 0; top: 0; + left: 0; + width: 100%; height: 100%; diff --git a/src/components/common/Audio.scss b/src/components/common/Audio.scss index c0075ed66..37297468c 100644 --- a/src/components/common/Audio.scss +++ b/src/components/common/Audio.scss @@ -1,7 +1,7 @@ .Audio { + position: relative; display: flex; align-items: flex-start; - position: relative; &.inline { margin-top: calc(0.5rem - 0.3125rem); @@ -16,8 +16,8 @@ } .media-loading { - position: absolute; pointer-events: none; + position: absolute; &.interactive { pointer-events: auto; @@ -29,17 +29,21 @@ .icon-view-once { position: absolute; - padding: 0.125rem; - left: 2rem; + z-index: var(--z-badge); bottom: 0; - font-size: 1rem; + left: 2rem; + transform: scale(1); + + padding: 0.125rem; border-radius: 50%; + + font-size: 1rem; color: var(--color-white); + + opacity: 1; background-color: var(--color-primary); outline: var(--background-color) solid 0.125rem; - z-index: var(--z-badge); - opacity: 1; - transform: scale(1); + transition: opacity 0.4s, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); @@ -81,8 +85,8 @@ .icon-play, .icon-pause, .flame { - opacity: 1; transform: scale(1); + opacity: 1; transition: opacity 0.4s, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); @@ -95,8 +99,8 @@ &.loading .icon-pause, &.loading .flame, &.loading .icon-view-once { - opacity: 0; transform: scale(0.5); + opacity: 0; } } @@ -128,13 +132,14 @@ .download-button { position: absolute; + z-index: 1; + top: 1.9375rem; + left: 1.9375rem; + width: 1.1875rem !important; height: 1.1875rem !important; padding: 0; - left: 1.9375rem; - top: 1.9375rem; border: 0.125rem solid var(--background-color); - z-index: 1; .icon { font-size: 0.8125rem; @@ -142,15 +147,15 @@ } &.bigger .download-button { - left: 2rem; top: 2rem; + left: 2rem; border: 0.125rem solid var(--color-background); } .content { + flex-grow: 1; align-self: center; min-width: 0; - flex-grow: 1; text-align: initial; } @@ -160,12 +165,14 @@ } .title { - font-weight: var(--font-weight-medium); - margin: 0; - line-height: 1.25; - white-space: nowrap; overflow: hidden; + + margin: 0; + + font-weight: var(--font-weight-medium); + line-height: 1.25; text-overflow: ellipsis; + white-space: nowrap; } canvas { @@ -173,21 +180,26 @@ } .voice-duration { - margin: 0.25rem 0 0; - font-size: 0.875rem; - color: var(--color-text-secondary); - font-variant-numeric: tabular-nums; display: flex; align-items: center; + margin: 0.25rem 0 0; + + font-size: 0.875rem; + font-variant-numeric: tabular-nums; + color: var(--color-text-secondary); + &.unread::after { content: ""; + display: inline-block; + width: 0.5rem; height: 0.5rem; - background-color: var(--accent-color); - border-radius: 50%; margin-inline-start: 0.125rem; + border-radius: 50%; + + background-color: var(--accent-color); } } @@ -227,28 +239,32 @@ } .Button { - border-radius: var(--border-radius-default-tiny); - background: var(--color-voice-transcribe); - color: var(--accent-color); width: auto; - margin-inline-start: 0.25rem; - font-size: 1.25rem; height: 1.5rem; + margin-inline-start: 0.25rem; padding: 0.375rem; + border-radius: var(--border-radius-default-tiny); + + font-size: 1.25rem; + color: var(--accent-color); + + background: var(--color-voice-transcribe); &:hover { - background: var(--color-voice-transcribe) !important; opacity: 0.8; + background: var(--color-voice-transcribe) !important; } } } .waveform { - cursor: var(--custom-cursor, pointer); - margin-left: 1px; touch-action: none; + cursor: var(--custom-cursor, pointer); + display: flex; align-items: flex-end; + + margin-left: 1px; } &.non-interactive { @@ -258,13 +274,15 @@ .meta, .performer, .date { + unicode-bidi: plaintext; + overflow: hidden; + + margin: 0; + font-size: 0.875rem; color: var(--color-text-secondary); - margin: 0; - overflow: hidden; - white-space: nowrap; text-overflow: ellipsis; - unicode-bidi: plaintext; + white-space: nowrap; } .date { @@ -272,13 +290,14 @@ } .duration { - font-size: 0.875rem; - color: var(--color-text-secondary); - white-space: nowrap; overflow: hidden; - text-overflow: ellipsis; flex-shrink: 0; + + font-size: 0.875rem; font-variant-numeric: tabular-nums; + color: var(--color-text-secondary); + text-overflow: ellipsis; + white-space: nowrap; } .meta { @@ -288,10 +307,10 @@ padding-inline-end: 0.5rem; & > span { - min-width: 0; - white-space: nowrap; overflow: hidden; + min-width: 0; text-overflow: ellipsis; + white-space: nowrap; } .performer { @@ -303,78 +322,91 @@ } .bullet { - margin: 0 0.25rem; flex-shrink: 0; + margin: 0 0.25rem; } } .seekline { - flex-grow: 1; - height: 1.25rem; + touch-action: none; + cursor: var(--custom-cursor, pointer); + position: relative; top: 3px; - cursor: var(--custom-cursor, pointer); - touch-action: none; + + flex-grow: 1; + + height: 1.25rem; &::before { content: ""; + position: absolute; - width: 100%; top: 6px; + + width: 100%; height: 2px; - background-color: var(--color-interactive-inactive); border-radius: 2px; + + background-color: var(--color-interactive-inactive); } } .seekline-play-progress { position: absolute; + top: 6px; + + overflow: hidden; + + width: 100%; height: 2px; border-radius: 2px; - overflow: hidden; - width: 100%; - top: 6px; &-inner { position: absolute; + right: 100%; + width: 100%; - background-color: var(--color-interactive-active); height: 2px; border-radius: 2px; - right: 100%; + + background-color: var(--color-interactive-active); } } .seekline-buffered-progress { - height: 2px; - border-radius: 2px; - position: absolute; top: 6px; + height: 2px; + border-radius: 2px; + background-color: var(--color-interactive-buffered); } .seekline-thumb { position: absolute; - width: 100%; top: 7px; left: 0; + width: 100%; &-inner { pointer-events: none; position: absolute; - width: 100%; right: 100%; + width: 100%; &::after { content: ""; + position: absolute; top: -6px; right: -6px; + width: 12px; height: 12px; border-radius: 6px; + background: var(--color-interactive-active); } } @@ -382,11 +414,12 @@ &.bigger { .title { - white-space: nowrap; overflow: hidden; - text-overflow: ellipsis; + font-weight: var(--font-weight-normal); line-height: 1.5rem; + text-overflow: ellipsis; + white-space: nowrap; } .meta { @@ -405,8 +438,8 @@ &[dir="rtl"] { .media-loading { - left: auto !important; right: 0; + left: auto !important; } } } @@ -422,12 +455,12 @@ } .toggle-play { - margin-left: 0.5rem; margin-right: 0; + margin-left: 0.5rem; &.smaller { - margin-left: 0.75rem; margin-right: 0; + margin-left: 0.75rem; } } @@ -441,8 +474,8 @@ } .download-button { - left: auto; right: 2rem; + left: auto; } } } diff --git a/src/components/common/Avatar.scss b/src/components/common/Avatar.scss index 414333922..7993b4184 100644 --- a/src/components/common/Avatar.scss +++ b/src/components/common/Avatar.scss @@ -5,20 +5,23 @@ --_size: 0px; --_font-size: max(calc(var(--_size) / 2 - 2px), 0.5rem); + user-select: none; + + position: relative; + + display: flex; flex: none; align-items: center; justify-content: center; + width: var(--_size); height: var(--_size); border-radius: var(--radius); - color: white; - font-weight: bold; - display: flex; - white-space: nowrap; - user-select: none; - position: relative; font-size: var(--_font-size); + font-weight: bold; + color: white; + white-space: nowrap; .emoji { width: var(--_font-size); @@ -30,17 +33,20 @@ } > .inner { - overflow: hidden; - border-radius: var(--radius); position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100%; - display: flex; z-index: 1; + top: 0; + left: 0; + + overflow: hidden; + display: flex; align-items: center; justify-content: center; + + width: 100%; + height: 100%; + border-radius: var(--radius); + background-image: linear-gradient(var(--color-white) -300%, var(--color-user)); } @@ -61,10 +67,10 @@ z-index: 1; > .inner { + top: 0.1875rem; + left: 0.1875rem; width: calc(100% - 0.375rem); height: calc(100% - 0.375rem); - left: 0.1875rem; - top: 0.1875rem; } } @@ -75,30 +81,36 @@ &::before { content: ""; + position: absolute; + top: -0.25rem; + left: -0.25rem; + width: calc(var(--_size) + 0.25rem); height: calc(var(--_size) + 0.25rem); - left: -0.25rem; - top: -0.25rem; border-radius: 50%; + background: var(--color-borders-read-story); } &::after { content: ""; + position: absolute; + z-index: 0; + top: -0.125rem; + left: -0.125rem; + width: var(--_size); height: var(--_size); - left: -0.125rem; - top: -0.125rem; border-radius: 50%; - z-index: 0; + background: var(--color-background); } &.online::after { - bottom: -0.125rem; right: -0.125rem; + bottom: -0.125rem; } } @@ -122,9 +134,9 @@ .poster { position: absolute; - left: 0; - top: 0; z-index: 0; + top: 0; + left: 0; } &.forum { diff --git a/src/components/common/AvatarList.module.scss b/src/components/common/AvatarList.module.scss index 37eaa5884..c78fb8b23 100644 --- a/src/components/common/AvatarList.module.scss +++ b/src/components/common/AvatarList.module.scss @@ -4,8 +4,8 @@ --spacing: calc(var(--_size) * 0.4); --spacing-gap: calc(var(--_size) * 0.04); - display: flex; position: relative; + display: flex; } .avatar { @@ -30,18 +30,17 @@ .badge { position: absolute; - bottom: -1px; right: -1px; + bottom: -1px; - background-color: var(--color-primary); - color: var(--color-white); - + padding: 0rem 0.25rem; border: 1px solid var(--color-background); border-radius: 1rem; font-size: 0.75rem; - line-height: 1rem; font-weight: var(--font-weight-medium); + line-height: 1rem; + color: var(--color-white); - padding: 0rem 0.25rem; + background-color: var(--color-primary); } diff --git a/src/components/common/BadgeButton.module.scss b/src/components/common/BadgeButton.module.scss index d32c7ba50..8296afe36 100644 --- a/src/components/common/BadgeButton.module.scss +++ b/src/components/common/BadgeButton.module.scss @@ -1,12 +1,14 @@ .root { + padding: 0.25em 0.5em; + border-radius: 1em; + font-size: 0.75rem; line-height: 1; - border-radius: 1em; - padding: 0.25em 0.5em; - background-color: var(--accent-background-active-color); color: var(--accent-color); + background-color: var(--accent-background-active-color); filter: brightness(1); + transition: 150ms filter ease-in; } diff --git a/src/components/common/Blockquote.module.scss b/src/components/common/Blockquote.module.scss index 22095cdfa..efdbc7a59 100644 --- a/src/components/common/Blockquote.module.scss +++ b/src/components/common/Blockquote.module.scss @@ -10,9 +10,9 @@ } .gradientContainer { + max-height: inherit; margin-top: 0.125rem; margin-bottom: 0.125rem; - max-height: inherit; .collapsed & { @include mixins.gradient-border-bottom(1rem); @@ -21,15 +21,15 @@ .collapseIcon { position: absolute; + right: 0; + bottom: 0; + display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; - - bottom: 0; - right: 0; } .clickable { diff --git a/src/components/common/CalendarModal.scss b/src/components/common/CalendarModal.scss index f2248f05a..e996a5512 100644 --- a/src/components/common/CalendarModal.scss +++ b/src/components/common/CalendarModal.scss @@ -27,8 +27,8 @@ .footer { display: flex; - justify-content: flex-end; flex-direction: column; + justify-content: flex-end; .Button { text-transform: none; @@ -48,35 +48,40 @@ margin: 0 0 0 1.25rem; font-size: 1.25rem; - @media (max-width: 600px) { - margin-left: 0.75rem; - } - & ~ .Button { color: var(--color-primary); } + + @media (max-width: 600px) { + margin-left: 0.75rem; + } } .Button.hidden { - opacity: 0.5; pointer-events: none; + opacity: 0.5; } } .day-button { position: relative; - border-radius: 4rem; - outline: none !important; - font-weight: var(--font-weight-medium); - margin: 0.125rem 0.625rem; - @media (max-width: 600px) { - margin: 0.25rem 0.375rem; + margin: 0.125rem 0.625rem; + border-radius: 4rem; + + font-weight: var(--font-weight-medium); + + outline: none !important; + + &::before { + content: ""; + display: block; + padding-top: 100%; } &.weekday { - margin-bottom: 0; height: 1rem; + margin-bottom: 0; } &.clickable { @@ -87,39 +92,41 @@ } &.selected { - background-color: var(--color-primary); color: white; + background-color: var(--color-primary); } } &.disabled { - opacity: 0.25; pointer-events: none; - } - - &::before { - content: ""; - display: block; - padding-top: 100%; + opacity: 0.25; } span { position: absolute; top: 0; left: 0; - width: 100%; - height: 100%; + display: flex; align-items: center; justify-content: center; + + width: 100%; + height: 100%; + font-size: 0.875rem; } + + @media (max-width: 600px) { + margin: 0.25rem 0.375rem; + } } .calendar-wrapper { display: flex; align-items: center; justify-content: center; + min-height: 17rem; margin: 1.5rem -0.5rem 0.5rem; } diff --git a/src/components/common/ChatForumLastMessage.module.scss b/src/components/common/ChatForumLastMessage.module.scss index 743909d95..8c4248a37 100644 --- a/src/components/common/ChatForumLastMessage.module.scss +++ b/src/components/common/ChatForumLastMessage.module.scss @@ -2,19 +2,20 @@ --radius: 0.75rem; --first-column-background-color: var(--color-background-selected); - display: flex; - min-width: 0; - overflow: hidden; - margin-inline-end: 0.5rem; - flex-grow: 1; + pointer-events: none; - flex-direction: column; - align-items: flex-start; z-index: 3; - transition: 0.25s ease-out background-color; + overflow: hidden; + display: flex; + flex-direction: column; + flex-grow: 1; + align-items: flex-start; - pointer-events: none; + min-width: 0; + margin-inline-end: 0.5rem; + + transition: 0.25s ease-out background-color; @media (hover: hover) { :global(.ListItem-button:hover) & { @@ -43,13 +44,14 @@ } .loading { - color: var(--color-text-secondary); line-height: 1.25rem; + color: var(--color-text-secondary); } .other-column, .main-column { display: flex; align-items: center; + font-size: 0.9375rem; line-height: 1.25rem; color: var(--color-text-secondary); @@ -68,44 +70,46 @@ } .other-column { - margin-left: 0.25rem; - margin-right: 0.25rem; - display: inline; position: relative; + display: inline; + margin-right: 0.25rem; + margin-left: 0.25rem; } .main-column { + pointer-events: initial; + + position: relative; + + max-width: 100%; border-start-start-radius: var(--radius); border-start-end-radius: var(--radius); border-end-end-radius: var(--radius); - max-width: 100%; - - position: relative; - - pointer-events: initial; - .after-wrapper { + position: absolute; + bottom: 0; + inset-inline-end: calc(var(--radius) * -1); + width: var(--radius); height: var(--radius); - bottom: 0; - position: absolute; - inset-inline-end: calc(var(--radius) * -1); } .after { - border-end-start-radius: var(--radius); - background: var(--background-color); width: 100%; height: 100%; + border-end-start-radius: var(--radius); + background: var(--background-color); } } .title { + overflow: hidden; + margin-left: 0.25rem; + font-size: 0.9375rem; line-height: 1.25rem; - overflow: hidden; text-overflow: ellipsis; } @@ -114,16 +118,18 @@ } .other-column-title { - font-size: 0.9375rem; margin-inline-start: 1.5rem; + font-size: 0.9375rem; } .other-columns { + overflow: hidden; + + height: 1.25rem; + + line-height: 1.25rem; text-overflow: ellipsis; white-space: nowrap; - overflow: hidden; - line-height: 1.25rem; - height: 1.25rem; } .ellipsis { @@ -131,28 +137,28 @@ } .last-message { - border-end-start-radius: var(--radius); - border-end-end-radius: var(--radius); - - max-width: 100%; - pointer-events: initial; position: relative; + max-width: 100%; + border-end-start-radius: var(--radius); + border-end-end-radius: var(--radius); + .after-wrapper { + position: absolute; + top: 0; + inset-inline-end: calc(var(--radius) * -1); + width: var(--radius); height: var(--radius); - top: 0; - position: absolute; - inset-inline-end: calc(var(--radius) * -1); } .after { - border-start-start-radius: var(--radius); - background: var(--background-color); width: 100%; height: 100%; + border-start-start-radius: var(--radius); + background: var(--background-color); } :global(.last-message) { diff --git a/src/components/common/Composer.scss b/src/components/common/Composer.scss index 7aac0acc5..b67221519 100644 --- a/src/components/common/Composer.scss +++ b/src/components/common/Composer.scss @@ -7,13 +7,8 @@ .select-mode-active + .middle-column-footer & { position: absolute; - padding-right: 2rem; bottom: 0; - - @media (max-width: 600px) { - padding-right: 1rem; - bottom: env(safe-area-inset-bottom); - } + padding-right: 2rem; &::before { right: 2.125rem; @@ -26,6 +21,11 @@ .svg-appendix { opacity: 0; } + + @media (max-width: 600px) { + bottom: env(safe-area-inset-bottom); + padding-right: 1rem; + } } .form-control { @@ -33,23 +33,25 @@ } .effect-icon { - display: grid; - width: 1.5rem; - height: 1.5rem; - place-items: center; + cursor: var(--custom-cursor, pointer); - font-size: 1rem; - line-height: 1; position: absolute; right: -0.25rem; bottom: -0.25rem; - background-color: var(--color-background); + display: grid; + place-items: center; + + width: 1.5rem; + height: 1.5rem; border: 1px solid var(--color-borders); + border-radius: 50%; + + font-size: 1rem; + line-height: 1; color: var(--color-text); - border-radius: 50%; - cursor: var(--custom-cursor, pointer); + background-color: var(--color-background); & > .emoji { width: 1rem !important; @@ -59,34 +61,30 @@ @keyframes show-send-as-button { from { + transform: scale(0); /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */ width: 1rem; - transform: scale(0); } to { + transform: scale(1); /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */ width: var(--base-height); - transform: scale(1); } } > .Button { overflow: visible; flex-shrink: 0; - margin-left: 0.5rem; + width: var(--base-height); height: var(--base-height); + margin-left: 0.5rem; &:not(.danger) { color: var(--color-composer-button); } - @media (max-width: 600px) { - width: 2.875rem; - height: 2.875rem; - } - .icon-send, .icon-schedule, .icon-forward, @@ -106,28 +104,6 @@ } } - @media (hover: hover) { - &:not(:active):not(:focus):not(:hover) { - .icon-send, - .icon-schedule, - .icon-forward, - .icon-check { - color: var(--color-primary); - } - } - } - - @media (hover: none) { - &:not(:active):not(:focus) { - .icon-send, - .icon-schedule, - .icon-forward, - .icon-check { - color: var(--color-primary); - } - } - } - &.cancel { position: relative; z-index: 1; @@ -168,6 +144,18 @@ } .paidStarsBadge { + position: absolute; + top: -1rem; + + height: auto; + margin-top: 0.625rem; + padding-block: 0.25rem; + padding-inline: 0.375rem; + + font-size: 0.8125rem; + font-weight: var(--font-weight-semibold) !important; + line-height: 1; + animation: hide-icon 0.4s forwards ease-out; &.visible { animation: grow-icon 0.4s ease-out; @@ -176,17 +164,6 @@ .icon { font-size: 0.875rem; } - - position: absolute; - - top: -1rem; - height: auto; - padding-inline: 0.375rem; - padding-block: 0.25rem; - font-size: 0.8125rem; - margin-top: 0.625rem; - line-height: 1; - font-weight: var(--font-weight-semibold) !important; } &.send, &.sendOneTime { @@ -278,6 +255,33 @@ &.not-ready > .icon { animation-duration: 0ms !important; } + + @media (max-width: 600px) { + width: 2.875rem; + height: 2.875rem; + } + + @media (hover: hover) { + &:not(:active):not(:focus):not(:hover) { + .icon-send, + .icon-schedule, + .icon-forward, + .icon-check { + color: var(--color-primary); + } + } + } + + @media (hover: none) { + &:not(:active):not(:focus) { + .icon-send, + .icon-schedule, + .icon-forward, + .icon-check { + color: var(--color-primary); + } + } + } } &:not(.mounted) > .Button, @@ -295,8 +299,8 @@ } body:not(.no-message-composer-animations) & .send-as-button.appear-animation { - animation: 0.25s ease-in-out forwards show-send-as-button; transform-origin: right; + animation: 0.25s ease-in-out forwards show-send-as-button; } > .ReactionSelector { @@ -305,15 +309,11 @@ --color-text: #fff; position: absolute; - left: 50%; - right: auto; - top: -0.75rem; - transform: translate(-50%, -100%); z-index: 1; - - @media (max-width: 600px) { - top: -4.25rem; - } + top: -0.75rem; + right: auto; + left: 50%; + transform: translate(-50%, -100%); .ReactionSelector__bubble-small, .ReactionSelector__bubble-big { @@ -328,11 +328,15 @@ .ReactionSelector__hint { color: #fff; } + + @media (max-width: 600px) { + top: -4.25rem; + } } .composer-action-buttons-container { - width: auto; position: relative; + width: auto; + .AttachMenu { margin-left: var(--action-button-compact-fix); @@ -340,19 +344,21 @@ } .composer-action-buttons { - display: flex; top: 0; right: 0; left: auto; + + display: flex; + width: auto; height: auto; } } .mobile-symbol-menu-button { + position: relative; width: 2.875rem; height: 2.875rem; - position: relative; .icon-smile, .icon-keyboard, @@ -401,33 +407,39 @@ } .composer-wrapper { - flex-grow: 1; - max-width: calc(100% - 4rem); - background: var(--color-background); position: relative; z-index: 1; - box-shadow: 0 1px 2px var(--color-default-shadow); + + flex-grow: 1; + + max-width: calc(100% - 4rem); border-radius: var(--border-radius-messages); border-bottom-right-radius: 0; + background: var(--color-background); + box-shadow: 0 1px 2px var(--color-default-shadow); + &.with-story-tweaks { border-radius: var(--border-radius-default-small); border-bottom-right-radius: 0; + box-shadow: none; &.is-need-premium { border-bottom-right-radius: var(--border-radius-default-small); } - box-shadow: none; } .svg-appendix { position: absolute; - bottom: -0.1875rem; right: -0.5rem; + bottom: -0.1875rem; + width: 0.5625rem; height: 1.25rem; - transition: opacity 200ms; + font-size: 1rem !important; + transition: opacity 200ms; + .corner { fill: var(--color-background); } @@ -441,33 +453,33 @@ .message-input-wrapper { --action-button-size: var(--base-height, 3.5rem); --action-button-compact-fix: -1rem; - display: flex; - @media (max-width: 600px) { - --action-button-size: 2.875rem; - --action-button-compact-fix: -0.6875rem; - } + display: flex; .input-scroller { --_scroller-right-gap: calc((var(--action-button-size) + var(--action-button-compact-fix) - 0.125rem)); + margin-right: calc(-1 * var(--_scroller-right-gap)); padding-right: var(--_scroller-right-gap); } > .Spinner { - align-self: center; --spinner-size: 1.5rem; + + align-self: center; margin-right: 0.5rem; } .composer-action-button { flex-shrink: 0; - background: none !important; + align-self: flex-end; + width: var(--action-button-size); height: var(--action-button-size); margin: 0; padding: 0; - align-self: flex-end; + + background: none !important; &:not(.faded):not(.activated) { color: var(--color-composer-button); @@ -481,19 +493,23 @@ --icon-width: 1.25rem; --icon-gap: 0.25rem; --padding-sides: 0.5rem; - background: var(--color-primary) !important; - height: 2rem; - margin: 0 0.5rem 0.75rem; - color: white !important; - text-transform: none; + display: inline-flex; - padding: 0 var(--padding-sides); + justify-content: flex-start; + width: 2rem; max-width: clamp(0px, 12rem, 25vw); + height: 2rem; + margin: 0 0.5rem 0.75rem; + padding: 0 var(--padding-sides); + border-radius: 0.5rem; + + color: white !important; + text-transform: none; + + background: var(--color-primary) !important; /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */ transition: 0.25s ease-out width, 0.25s ease-out border-radius; - border-radius: 0.5rem; - justify-content: flex-start; &.open { width: calc(var(--bot-menu-text-width) + var(--padding-sides) * 2 + var(--icon-gap) + var(--icon-width)); @@ -506,10 +522,10 @@ } .bot-menu-icon { - font-size: 1.25rem; - margin-right: var(--icon-gap); - transition: 0.25s ease-out transform; transform: translateX(-0.15rem); + margin-right: var(--icon-gap); + font-size: 1.25rem; + transition: 0.25s ease-out transform; &.open { transform: translateX(0); @@ -518,11 +534,13 @@ .bot-menu-text { --emoji-size: 1rem; + + overflow: hidden; + font-size: 0.875rem; font-weight: var(--font-weight-medium); - white-space: nowrap; text-overflow: ellipsis; - overflow: hidden; + white-space: nowrap; } &.bot-commands { @@ -536,14 +554,17 @@ &.scheduled-button .icon::after { content: ""; + position: absolute; top: 0.75rem; right: 0.875rem; - border: 0.1875rem solid var(--color-background); + box-sizing: content-box; width: 0.5rem; height: 0.5rem; + border: 0.1875rem solid var(--color-background); border-radius: 50%; + background: var(--color-green-darker); box-shadow: -0.375rem -0.25rem 0 -0.1875rem var(--color-background); @@ -560,24 +581,31 @@ } .recording-state { - display: inline-block; position: relative; - line-height: var(--base-height); + + display: inline-block; + height: var(--base-height); padding: 0 3.125rem 0 1rem; + font-family: var(--font-family); font-variant-numeric: tabular-nums; + line-height: var(--base-height); &::after { content: ""; - width: 0.75rem; - height: 0.75rem; - background: var(--color-error); - border-radius: 0.375rem; + position: absolute; top: 50%; - margin-top: -0.375rem; right: 1.3125rem; + + width: 0.75rem; + height: 0.75rem; + margin-top: -0.375rem; + border-radius: 0.375rem; + + background: var(--color-error); + animation: recording-blink-like-macos 1.5s infinite; } @@ -586,12 +614,17 @@ line-height: 2.875rem; } } + + @media (max-width: 600px) { + --action-button-size: 2.875rem; + --action-button-compact-fix: -0.6875rem; + } } .symbol-menu-trigger { - left: -1rem; - bottom: 0; position: absolute; + bottom: 0; + left: -1rem; } @media (min-width: 600px) { @@ -606,9 +639,9 @@ } .input-scroller { + overflow: hidden; min-height: var(--base-height, 3.5rem); max-height: 26rem; - overflow: hidden; /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */ transition: height 100ms ease; @@ -617,11 +650,6 @@ overflow-y: auto; } - @media (max-width: 600px) { - min-height: 2.875rem; - max-height: 16rem; - } - & > .input-scroller-content { position: relative; } @@ -631,11 +659,13 @@ } .emoji { + pointer-events: none; + width: 1.25rem; height: 1.25rem; margin: 0 1px -5px; + vertical-align: 0; - pointer-events: none; } .custom-emoji { @@ -653,6 +683,11 @@ vertical-align: bottom; } } + + @media (max-width: 600px) { + min-height: 2.875rem; + max-height: 16rem; + } } #message-input-text, @@ -662,25 +697,27 @@ flex-grow: 1; .form-control { - padding: calc((var(--base-height, 3.5rem) - var(--composer-text-size, 1rem) * 1.375) / 2) 0.875rem; - overflow: hidden; - height: auto; - line-height: 1.375; - font-family: var(--font-family); unicode-bidi: plaintext; - text-align: initial; - font-size: var(--composer-text-size, 1rem); + overflow: hidden; - background: transparent !important; + height: auto; + padding: calc((var(--base-height, 3.5rem) - var(--composer-text-size, 1rem) * 1.375) / 2) 0.875rem; border: none !important; border-radius: 0 !important; + + font-family: var(--font-family); + font-size: var(--composer-text-size, 1rem); + line-height: 1.375; + text-align: initial; + + background: transparent !important; box-shadow: none !important; caret-color: var(--color-text); &.touched { & ~ .placeholder-text { - opacity: 0; transform: translateX(1rem); + opacity: 0; } } @@ -690,27 +727,32 @@ } .placeholder-star-icon { - line-height: 1; - margin-inline-end: 0.0625rem; margin-inline-start: 0.25rem; + margin-inline-end: 0.0625rem; + line-height: 1; } .forced-placeholder, .placeholder-text { - display: inline-flex; - align-items: center; - position: absolute; - color: var(--color-placeholders); pointer-events: none; - unicode-bidi: plaintext; - text-align: initial; - line-height: 1.3125; - font-size: var(--composer-text-size, 1rem); + + position: absolute; top: calc((3.25rem - var(--composer-text-size, 1rem) * 1.375) / 2); bottom: auto; - white-space: nowrap; + + unicode-bidi: plaintext; overflow: hidden; - text-overflow: ellipsis; + display: inline-flex; + align-items: center; + max-width: 100%; + + font-size: var(--composer-text-size, 1rem); + line-height: 1.3125; + color: var(--color-placeholders); + text-align: initial; + text-overflow: ellipsis; + white-space: nowrap; + transition: opacity 200ms ease-out, transform 200ms ease-out; &.with-icon { @@ -747,8 +789,8 @@ } .text-entity-link { - color: var(--color-links) !important; cursor: var(--custom-cursor, default); + color: var(--color-links) !important; text-decoration: none; &:hover, @@ -759,15 +801,17 @@ } .spoiler { - background-image: url("../../assets/spoiler-dots-black.png"); - background-size: auto min(100%, 1.125rem); - border-radius: 0.5rem; padding: 0 0.3125rem 0.125rem 0.3125rem; + border-radius: 0.5rem; + text-shadow: -2px -2px 0 var(--color-background), 2px -2px 0 var(--color-background), -2px 2px 0 var(--color-background), 2px 2px 0 var(--color-background); + + background-image: url("../../assets/spoiler-dots-black.png"); + background-size: auto min(100%, 1.125rem); } html.theme-dark & .spoiler { @@ -775,25 +819,30 @@ } .clone { - position: absolute; - top: 0; - left: 0; - right: 0; - opacity: 0; pointer-events: none; + + position: absolute; z-index: -10; + top: 0; + right: 0; + left: 0; + unicode-bidi: plaintext; + text-align: initial; + + opacity: 0; } } #message-input-text { .form-control { - margin-bottom: 0; - line-height: 1.3125; - padding: calc((var(--base-height, 3.5rem) - var(--composer-text-size, 1rem) * 1.3125) / 2) 0; - white-space: pre-wrap; height: auto; + margin-bottom: 0; + padding: calc((var(--base-height, 3.5rem) - var(--composer-text-size, 1rem) * 1.3125) / 2) 0; + + line-height: 1.3125; + white-space: pre-wrap; @media (max-width: 600px) { padding: calc((2.875rem - var(--composer-text-size, 1rem) * 1.3125) / 2) 0; @@ -811,8 +860,8 @@ &:not(:only-child) { .form-control { - padding-left: 0; padding-right: 0; + padding-left: 0; @media (min-width: 600px) { padding-left: 0.5rem; @@ -858,23 +907,20 @@ } .unlock-button { + width: auto; + height: auto; + margin-left: 0.4375rem; + padding-top: 0.125rem; + padding-right: 0.4375rem; + padding-bottom: 0.125rem; + padding-left: 0.4375rem; + + color: var(--color-text); + text-transform: lowercase; &:hover, &.active { background: var(--color-chat-hover); } - - color: var(--color-text); - width: auto; - height: auto; - - padding-top: 0.125rem; - padding-bottom: 0.125rem; - padding-right: 0.4375rem; - padding-left: 0.4375rem; - - margin-left: 0.4375rem; - - text-transform: lowercase; } } @@ -886,36 +932,37 @@ top: calc((var(--base-height, 3.5rem) - var(--composer-text-size, 1rem) * 1.3125) / 2); left: 0.875rem; - @media (max-width: 600px) { - top: calc((2.875rem - var(--composer-text-size, 1rem) * 1.3125) / 2); - } - &.is-need-premium { pointer-events: auto; } + + @media (max-width: 600px) { + top: calc((2.875rem - var(--composer-text-size, 1rem) * 1.3125) / 2); + } } .composer-tooltip { + scrollbar-gutter: stable; + position: absolute; bottom: calc(100% + 0.5rem); left: 0; - width: 100%; - background: var(--color-background); - border-radius: var(--border-radius-messages); - padding: 0.5rem; - max-height: 15rem; + transform-origin: bottom; + transform: translateY(1.5rem); overflow-x: hidden; overflow-y: auto; - box-shadow: 0 1px 2px var(--color-default-shadow); + width: 100%; + max-height: 15rem; + padding: 0.5rem; + border-radius: var(--border-radius-messages); opacity: 0; - transform: translateY(1.5rem); - transform-origin: bottom; - transition: opacity var(--layer-transition), transform var(--layer-transition); + background: var(--color-background); + box-shadow: 0 1px 2px var(--color-default-shadow); - scrollbar-gutter: stable; + transition: opacity var(--layer-transition), transform var(--layer-transition); @include mixins.adapt-padding-to-scrollbar(0.5rem); @@ -924,8 +971,8 @@ } &.open { - opacity: 1; transform: translateY(0); + opacity: 1; } .Loading { diff --git a/src/components/common/CountryPickerModal.module.scss b/src/components/common/CountryPickerModal.module.scss index 7d95ae473..4894708d5 100644 --- a/src/components/common/CountryPickerModal.module.scss +++ b/src/components/common/CountryPickerModal.module.scss @@ -23,6 +23,6 @@ .footer { display: flex; - justify-content: flex-end; flex-direction: column; + justify-content: flex-end; } diff --git a/src/components/common/CustomEmoji.module.scss b/src/components/common/CustomEmoji.module.scss index 9f79e3f37..fec46eefe 100644 --- a/src/components/common/CustomEmoji.module.scss +++ b/src/components/common/CustomEmoji.module.scss @@ -1,12 +1,15 @@ .root { + position: relative; + display: inline-flex; + flex: 0 0 var(--custom-emoji-size); align-items: center; justify-content: center; - vertical-align: text-bottom; - position: relative; + width: var(--custom-emoji-size); height: var(--custom-emoji-size); - flex: 0 0 var(--custom-emoji-size); + + vertical-align: text-bottom; :global(.rlottie-canvas) { display: block; @@ -25,21 +28,20 @@ .placeholder { width: 85%; height: 85%; - background-color: #77777719; border-radius: 0.3125rem; + background-color: #77777719; } .thumb { + pointer-events: none; width: 100%; height: 100%; - pointer-events: none; } .media { + user-select: none !important; width: var(--custom-emoji-size) !important; height: var(--custom-emoji-size) !important; - - user-select: none !important; } .root, .media, .thumb { @@ -47,11 +49,13 @@ } .highlight-catch { + user-select: auto !important; + position: absolute; + z-index: 1; top: 0; left: 0; + width: 100%; height: 100%; - user-select: auto !important; - z-index: 1; } diff --git a/src/components/common/CustomEmojiSetsModal.module.scss b/src/components/common/CustomEmojiSetsModal.module.scss index 1eaa9280c..72a1dfdbc 100644 --- a/src/components/common/CustomEmojiSetsModal.module.scss +++ b/src/components/common/CustomEmojiSetsModal.module.scss @@ -1,8 +1,8 @@ .root { :global { .modal-dialog { - height: 70%; max-width: 25rem; + height: 70%; @media (max-width: 600px) { height: 90%; @@ -39,8 +39,11 @@ .sets { position: relative; - width: 100%; + overflow-y: auto; + + width: 100%; padding: 0 0.5rem; + text-align: left; } diff --git a/src/components/common/DeleteMessageModal.module.scss b/src/components/common/DeleteMessageModal.module.scss index aeab720aa..c11b4bd3a 100644 --- a/src/components/common/DeleteMessageModal.module.scss +++ b/src/components/common/DeleteMessageModal.module.scss @@ -10,8 +10,8 @@ .container { display: flex; - align-items: center; gap: 1rem; + align-items: center; margin-left: -0.5rem; } @@ -25,9 +25,9 @@ .actionTitle { margin-top: 1.5rem; - color: var(--color-links); font-size: 1rem; font-weight: var(--font-weight-semibold); + color: var(--color-links); } .restrictionTitle { @@ -35,8 +35,8 @@ } .button { - color: var(--color-links) !important; padding: 0 !important; + color: var(--color-links) !important; &:hover { background: none !important; } @@ -60,17 +60,17 @@ .restrictionContainer, .dropdownList { - margin: 0 -1rem; overflow: hidden; max-height: 0; + margin: 0 -1rem; /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */ transition: max-height 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } .restrictionContainerOpen, .dropdownListOpen { - margin: 0 -1rem; max-height: 100vh; + margin: 0 -1rem; /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */ transition: max-height 0.3s ease-in-out; } diff --git a/src/components/common/DotAnimation.scss b/src/components/common/DotAnimation.scss index 7220b5d8b..7e3776fed 100644 --- a/src/components/common/DotAnimation.scss +++ b/src/components/common/DotAnimation.scss @@ -3,9 +3,9 @@ align-items: center; .ellipsis { + overflow: hidden; display: flex; width: 1rem; - overflow: hidden; &::after { content: "..."; diff --git a/src/components/common/FakeIcon.scss b/src/components/common/FakeIcon.scss index 41bcc6f00..015d12f2e 100644 --- a/src/components/common/FakeIcon.scss +++ b/src/components/common/FakeIcon.scss @@ -1,11 +1,12 @@ .FakeIcon { + margin-inline: 0.25rem; + padding: 0.125rem 0.25rem; border: 1px solid var(--color-error); border-radius: 0.375rem; - color: var(--color-error); + font-size: 0.625rem; - padding: 0.125rem 0.25rem; - line-height: initial; - margin-inline: 0.25rem; font-weight: var(--font-weight-medium); + line-height: initial; + color: var(--color-error); text-transform: capitalize; } diff --git a/src/components/common/File.scss b/src/components/common/File.scss index 7d0d4346b..d8766a498 100644 --- a/src/components/common/File.scss +++ b/src/components/common/File.scss @@ -1,5 +1,6 @@ .File { --secondary-color: var(--color-text-secondary); + display: flex; align-items: center; @@ -23,13 +24,15 @@ .file-progress, .file-icon, .file-preview { - width: 3.375rem; - height: 3.375rem; - border-radius: var(--border-radius-messages-small); - background: var(--color-primary); display: flex; align-items: center; justify-content: center; + + width: 3.375rem; + height: 3.375rem; + border-radius: var(--border-radius-messages-small); + + background: var(--color-primary); } .file-progress { @@ -39,44 +42,51 @@ } .file-icon { - padding: 1rem 0.75rem 0.5rem; - align-items: flex-end; - flex-shrink: 0; position: relative; + + flex-shrink: 0; + align-items: flex-end; + + padding: 1rem 0.75rem 0.5rem; + color: white; + clip-path: polygon(0 0, calc(100% - 1.125rem) 0, 100% 1.125rem, 100% 100%, 0 100%); transition: clip-path 0.15s ease-in; + &::after { + content: ""; + + position: absolute; + top: 0; + right: 0; + + display: block; + + border-color: rgba(black, 0.25); + border-style: solid; + border-width: 0.5625rem; + border-bottom-left-radius: 0.25rem; + /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */ + transition: border-width 0.15s ease-in; + } + .file-ext { font-size: 1rem; font-weight: var(--font-weight-medium); transition: opacity 0.15s; } - - &::after { - content: ""; - display: block; - position: absolute; - top: 0; - right: 0; - border-bottom-left-radius: 0.25rem; - border-color: rgba(black, 0.25); - border-width: 0.5625rem; - border-style: solid; - /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */ - transition: border-width 0.15s ease-in; - } } .file-preview { - background: transparent; overflow: hidden; + background: transparent; & + .action-icon, & + .file-progress { - background: rgba(black, 0.5); border-radius: var(--border-radius-messages-small); + background: rgba(black, 0.5); } img { @@ -85,16 +95,21 @@ } .action-icon { - color: #fff; - font-size: 1.5rem; position: absolute; top: 0; - width: 3.375rem; - height: 3.375rem; + display: flex; align-items: center; justify-content: center; + + width: 3.375rem; + height: 3.375rem; + + font-size: 1.5rem; + color: #fff; + opacity: 0; + transition: opacity 0.25s; } @@ -126,25 +141,28 @@ } .file-info { - margin-top: 0.1875rem; - margin-right: 0.125rem; - white-space: nowrap; overflow: hidden; flex-grow: 1; + margin-top: 0.1875rem; + margin-right: 0.125rem; + + white-space: nowrap; + & + .Link { + padding-left: 1rem; font-size: 0.75rem; color: var(--color-text-secondary); - padding-left: 1rem; white-space: nowrap; } } .file-title { - font-size: 1rem; - line-height: 1.5rem; - font-weight: var(--font-weight-medium); overflow: hidden; + + font-size: 1rem; + font-weight: var(--font-weight-medium); + line-height: 1.5rem; text-overflow: ellipsis; .emoji { @@ -153,11 +171,13 @@ } .file-subtitle { + overflow: hidden; + + max-width: 100%; + font-size: 0.875rem; line-height: 0.9375rem; color: var(--secondary-color); - max-width: 100%; - overflow: hidden; text-overflow: ellipsis; span + span { @@ -205,22 +225,22 @@ .file-progress, .file-icon, .file-preview { - margin-left: 0.75rem; margin-right: 0; + margin-left: 0.75rem; } .file-info { text-align: right; & + .Link { - padding-left: 0; padding-right: 1rem; + padding-left: 0; } } .action-icon { - left: auto; right: 0; + left: auto; } } } diff --git a/src/components/common/FullNameTitle.module.scss b/src/components/common/FullNameTitle.module.scss index 54dade8fa..1a8ea9c9f 100644 --- a/src/components/common/FullNameTitle.module.scss +++ b/src/components/common/FullNameTitle.module.scss @@ -1,7 +1,7 @@ .root { display: flex !important; - align-items: center; gap: 0.25rem; + align-items: center; :global(.custom-emoji) { color: var(--color-primary); @@ -15,18 +15,19 @@ } .statusTransition { - height: 1.5em !important; width: 1.5em !important; + height: 1.5em !important; } } .fullName { - font-size: 1em; + overflow: hidden; + margin-bottom: 0; + font-size: 1em; text-overflow: ellipsis; white-space: nowrap; - overflow: hidden; &.canCopy { pointer-events: all; diff --git a/src/components/common/GifButton.scss b/src/components/common/GifButton.scss index cdcf67818..2e927d46f 100644 --- a/src/components/common/GifButton.scss +++ b/src/components/common/GifButton.scss @@ -1,10 +1,13 @@ .GifButton { + position: relative; + display: flex; align-items: center; justify-content: center; + height: 6.25rem; + background-color: transparent; - position: relative; &:hover { .gif-unsave-button { @@ -36,33 +39,39 @@ } .preview, video { + user-select: none; + position: absolute; top: 0; left: 0; + width: 100%; height: 100%; + object-fit: cover; -webkit-touch-callout: none; - user-select: none; } .Spinner { - position: absolute; pointer-events: none; + position: absolute; } .gif-unsave-button { position: absolute; + z-index: 1; top: 0.25rem; right: 0.25rem; + width: 1rem; height: 1rem; padding: 0.125rem; border-radius: 0.25rem; - transition: 0.15s opacity ease-in-out; + opacity: 0; - z-index: 1; + + transition: 0.15s opacity ease-in-out; &-icon { font-size: 0.75rem; diff --git a/src/components/common/LastMessageMeta.scss b/src/components/common/LastMessageMeta.scss index aa2295d40..80d38e48d 100644 --- a/src/components/common/LastMessageMeta.scss +++ b/src/components/common/LastMessageMeta.scss @@ -1,14 +1,16 @@ .LastMessageMeta { - margin-right: 0.1875rem; - flex-shrink: 0; - font-size: 0.75rem; display: flex; + flex-shrink: 0; align-items: center; + margin-right: 0.1875rem; + + font-size: 0.75rem; + .MessageOutgoingStatus { - color: var(--color-text-meta-colored); margin-right: 0.125rem; font-size: 1.125rem; + color: var(--color-text-meta-colored); body.is-ios & { margin-bottom: -0.125rem; diff --git a/src/components/common/LinkField.module.scss b/src/components/common/LinkField.module.scss index 38d8a70ae..b8c6cd748 100644 --- a/src/components/common/LinkField.module.scss +++ b/src/components/common/LinkField.module.scss @@ -11,10 +11,10 @@ .moreMenu, .copy { position: absolute; - right: 0.5rem; - top: 50%; - transform: translate(0, -50%); z-index: 1; + top: 50%; + right: 0.5rem; + transform: translate(0, -50%); } .title { diff --git a/src/components/common/ManageUsernames.module.scss b/src/components/common/ManageUsernames.module.scss index bddb89d7c..2d253da67 100644 --- a/src/components/common/ManageUsernames.module.scss +++ b/src/components/common/ManageUsernames.module.scss @@ -1,16 +1,16 @@ @use "../../styles/mixins"; .container { - padding: 1.5rem 1.5rem 0; margin-bottom: 0.625rem; + padding: 1.5rem 1.5rem 0; @include mixins.side-panel-section; } .header { + position: relative; font-size: 1rem; color: var(--color-text-secondary); - position: relative; &[dir="rtl"] { text-align: right; @@ -18,12 +18,12 @@ } .description { - font-size: 0.875rem; - color: var(--color-text-secondary); - margin-bottom: 0; padding-top: 0.5rem; padding-bottom: 1.5rem; + + font-size: 0.875rem; + color: var(--color-text-secondary); } .sortableContainer { @@ -31,9 +31,9 @@ } .item { + margin-right: -1rem; margin-bottom: 0; margin-left: -1rem; - margin-right: -1rem; :global(.multiline-item) { padding-inline-end: 3rem; diff --git a/src/components/common/Media.scss b/src/components/common/Media.scss index 6f1470bc0..84c7ccc4b 100644 --- a/src/components/common/Media.scss +++ b/src/components/common/Media.scss @@ -1,28 +1,36 @@ .Media { + cursor: var(--custom-cursor, pointer); + + position: relative; + + overflow: hidden; + height: 0; padding-bottom: 100%; - overflow: hidden; - position: relative; - cursor: var(--custom-cursor, pointer); .video-duration { position: absolute; - left: 0.25rem; top: 0.25rem; - background: rgba(0, 0, 0, 0.25); - color: #fff; - font-size: 0.75rem; + left: 0.25rem; + padding: 0 0.3125rem; border-radius: 0.1875rem; + + font-size: 0.75rem; line-height: 1.125rem; + color: #fff; + + background: rgba(0, 0, 0, 0.25); } .media-miniature { position: absolute; - left: 0; top: 0; + left: 0; + width: 100%; height: 100%; + object-fit: cover; } } diff --git a/src/components/common/MediaSpoiler.module.scss b/src/components/common/MediaSpoiler.module.scss index 7b8893f66..8553ddca3 100644 --- a/src/components/common/MediaSpoiler.module.scss +++ b/src/components/common/MediaSpoiler.module.scss @@ -1,17 +1,18 @@ .root { + + --click-shift-x: 0px; + --click-shift-y: 0px; + position: absolute; width: 100%; height: 100%; background-color: var(--color-text-secondary); // Fallback before canvas is prepared - - --click-shift-x: 0px; - --click-shift-y: 0px; } .mask-animation:global(.closing) { - mask-image: url("../../assets/spoilers/mask.svg"), linear-gradient(#ffffff, #ffffff); -webkit-mask-composite: destination-out; mask-composite: exclude; + mask-image: url("../../assets/spoilers/mask.svg"), linear-gradient(#ffffff, #ffffff); mask-position: calc(50% + var(--click-shift-x)) calc(50% + var(--click-shift-y)), center center; mask-repeat: no-repeat; mask-size: 0%; @@ -41,6 +42,8 @@ position: absolute; top: 0; left: 0; + transform-origin: calc(50% + var(--click-shift-x)) calc(50% + var(--click-shift-y)); + width: 100%; height: 100%; @@ -48,7 +51,48 @@ background-size: var(--background-size) var(--background-size); transition: transform 500ms ease-in; - transform-origin: calc(50% + var(--click-shift-x)) calc(50% + var(--click-shift-y)); + + &::before { + + --x-direction: 0; + --y-direction: var(--background-size); + + content: ""; + + position: absolute; + top: 0; + left: 0; + + width: 100%; + height: 100%; + + background-image: var(--background-url); + background-position: calc(var(--x-direction) / 2) calc(var(--y-direction) / 2); + background-size: var(--background-size) var(--background-size); + + animation: 2s linear -0.8s infinite opacity-breath; + } + + &::after { + + --x-direction: calc(-1 * var(--background-size)); + --y-direction: calc(-1 * var(--background-size)); + + content: ""; + + position: absolute; + top: 0; + left: 0; + + width: 100%; + height: 100%; + + background-image: var(--background-url); + background-position: calc(var(--x-direction) / 2) calc(var(--y-direction) / 2); + background-size: var(--background-size) var(--background-size); + + animation: 2s linear -1.5s infinite opacity-breath; + } @media (-webkit-min-device-pixel-ratio: 2) { --background-url: url("../../assets/spoilers/turbulence_2x.png"); @@ -57,38 +101,6 @@ @media (-webkit-min-device-pixel-ratio: 3) { --background-url: url("../../assets/spoilers/turbulence_3x.png"); } - - &::before { - content: ""; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-image: var(--background-url); - background-size: var(--background-size) var(--background-size); - - --x-direction: 0; - --y-direction: var(--background-size); - animation: 2s linear -0.8s infinite opacity-breath; - background-position: calc(var(--x-direction) / 2) calc(var(--y-direction) / 2); - } - - &::after { - content: ""; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-image: var(--background-url); - background-size: var(--background-size) var(--background-size); - - --x-direction: calc(-1 * var(--background-size)); - --y-direction: calc(-1 * var(--background-size)); - animation: 2s linear -1.5s infinite opacity-breath; - background-position: calc(var(--x-direction) / 2) calc(var(--y-direction) / 2); - } } :global(body:not(.no-page-transitions)) .dots { diff --git a/src/components/common/MessageOutgoingStatus.scss b/src/components/common/MessageOutgoingStatus.scss index cfd1171db..65ce8fbe5 100644 --- a/src/components/common/MessageOutgoingStatus.scss +++ b/src/components/common/MessageOutgoingStatus.scss @@ -1,10 +1,12 @@ .MessageOutgoingStatus { - width: 1.1875rem; - height: 1.1875rem; overflow: hidden; display: inline-block; - line-height: 1; + + width: 1.1875rem; + height: 1.1875rem; + font-size: 1.1875rem; + line-height: 1; .icon-message-succeeded { padding-left: 0.125rem; @@ -17,17 +19,21 @@ .MessageOutgoingStatus--failed::before { content: ""; - display: block; + position: absolute; inset: 0.25rem; + + display: block; + border-radius: 50%; + background: white; } .icon-message-failed { - background: none; - color: var(--color-error); - z-index: 1; position: relative; + z-index: 1; + color: var(--color-error); + background: none; } } diff --git a/src/components/common/MiniTable.module.scss b/src/components/common/MiniTable.module.scss index 5d0dc8fd2..c2eb749e7 100644 --- a/src/components/common/MiniTable.module.scss +++ b/src/components/common/MiniTable.module.scss @@ -1,15 +1,15 @@ .root { - display: grid; - grid-template-columns: min-content 1fr; - justify-content: center; - gap: 0.375rem; - font-size: 0.875rem; - margin-top: 0.5rem; - - text-align: initial; - position: relative; + display: grid; + grid-template-columns: min-content 1fr; + gap: 0.375rem; + justify-content: center; + + margin-top: 0.5rem; + + font-size: 0.875rem; + text-align: initial; white-space: nowrap; } @@ -19,10 +19,11 @@ } .value { + overflow: hidden; justify-self: flex-start; + width: 100%; // Grid ellipsis hack font-weight: var(--font-weight-semibold); - overflow: hidden; text-overflow: ellipsis; } diff --git a/src/components/common/NothingFound.scss b/src/components/common/NothingFound.scss index 0808120ce..f30b26de7 100644 --- a/src/components/common/NothingFound.scss +++ b/src/components/common/NothingFound.scss @@ -13,10 +13,12 @@ } .description { - color: var(--color-text-secondary); - font-size: 0.875rem; - text-align: center; - margin: 1rem 0 0; unicode-bidi: plaintext; + + margin: 1rem 0 0; + + font-size: 0.875rem; + color: var(--color-text-secondary); + text-align: center; } } diff --git a/src/components/common/PasswordMonkey.scss b/src/components/common/PasswordMonkey.scss index 767d99f63..169a89b03 100644 --- a/src/components/common/PasswordMonkey.scss +++ b/src/components/common/PasswordMonkey.scss @@ -1,17 +1,13 @@ #monkey { position: relative; + display: block; - margin-left: auto; - margin-right: auto; + width: 7.5rem; height: 7.5rem; + margin-right: auto; margin-bottom: 1.75rem; - - @media (min-width: 600px) and (min-height: 450px) { - width: 10rem; - height: 10rem; - margin-bottom: 2.5rem; - } + margin-left: auto; &.big { width: 10rem; @@ -20,8 +16,9 @@ .AnimatedSticker { position: absolute; - left: 0; top: 0; + left: 0; + width: 100%; height: 100%; @@ -36,4 +33,10 @@ background: url('../../assets/monkey.svg') center; background-size: 100%; } + + @media (min-width: 600px) and (min-height: 450px) { + width: 10rem; + height: 10rem; + margin-bottom: 2.5rem; + } } diff --git a/src/components/common/PeerBadge.module.scss b/src/components/common/PeerBadge.module.scss index af13c9d37..0ae249aa1 100644 --- a/src/components/common/PeerBadge.module.scss +++ b/src/components/common/PeerBadge.module.scss @@ -1,44 +1,48 @@ .root { display: flex; flex-direction: column; - align-items: center; gap: 0.5rem; + align-items: center; } .top { + position: relative; display: grid; place-items: center; - position: relative; } .badge { position: absolute; + z-index: 1; bottom: -0.5rem; left: 50%; transform: translateX(-50%); - z-index: 1; display: flex; - align-items: center; gap: 0.125rem; + align-items: center; + + padding: 0.25rem; + border: 2px solid var(--color-background); + border-radius: 1rem; + font-size: 0.75rem; font-weight: var(--font-weight-medium); line-height: 1; + color: var(--color-white); white-space: nowrap; - padding: 0.25rem; background-color: var(--color-primary); - color: var(--color-white); - border: 2px solid var(--color-background); - border-radius: 1rem; } .text { overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - text-align: center; - font-size: 0.875rem; + width: 100%; margin-bottom: 0; + + font-size: 0.875rem; + text-align: center; + text-overflow: ellipsis; + white-space: nowrap; } diff --git a/src/components/common/PeerChip.module.scss b/src/components/common/PeerChip.module.scss index 5b028dba1..a1ff9c09f 100644 --- a/src/components/common/PeerChip.module.scss +++ b/src/components/common/PeerChip.module.scss @@ -1,15 +1,20 @@ .root { + cursor: var(--custom-cursor, pointer); + + position: relative; + display: flex; + flex-shrink: 1; align-items: center; - background: var(--color-chat-hover); + + min-width: 0; height: 2rem; margin-inline: 0.25rem; padding-right: 0.75rem; border-radius: 1rem; - cursor: var(--custom-cursor, pointer); - position: relative; - min-width: 0; - flex-shrink: 1; + + background: var(--color-chat-hover); + transition: background-color 0.15s ease; &.minimized { @@ -44,10 +49,13 @@ .avatar, .iconWrapper { + flex-shrink: 0; + width: 2rem; height: 2rem; + opacity: 1; - flex-shrink: 0; + transition: opacity 0.15s ease; } @@ -55,54 +63,63 @@ display: flex; align-items: center; justify-content: center; + padding: 0.375rem; border-radius: 50%; - background-color: var(--color-primary); + color: white; + background-color: var(--color-primary); + .icon { - font-size: 1.25rem; position: relative; top: -1px; + font-size: 1.25rem; } } .name { - margin-left: 0.5rem; - white-space: nowrap; min-width: 0; + margin-left: 0.5rem; text-overflow: ellipsis; + white-space: nowrap; :global(.emoji.emoji-small) { width: 1.125rem; height: 1.125rem; - background-size: 1.125rem; vertical-align: -4px; + background-size: 1.125rem; } } .remove { position: absolute; - left: 0; + z-index: 1; top: 0; - width: 2rem; - height: 2rem; - border-radius: 50%; + left: 0; + display: flex; align-items: center; justify-content: center; - background-color: var(--color-error); + + width: 2rem; + height: 2rem; + border-radius: 50%; + font-size: 1.5rem; color: white; + opacity: 0; + background-color: var(--color-error); + transition: opacity 0.15s ease; - z-index: 1; } &.squareAvatar { + --border-radius-forum-avatar: 0.625rem; + border-start-start-radius: 0.625rem; border-end-start-radius: 0.625rem; - --border-radius-forum-avatar: 0.625rem; &.minimized, .remove { border-radius: 0.625rem; @@ -110,8 +127,8 @@ } &[dir="rtl"] { - padding-left: 1rem; padding-right: 0; + padding-left: 1rem; &.minimized { padding-right: 0; @@ -119,13 +136,13 @@ } .name { - margin-left: 0; margin-right: 0.5rem; + margin-left: 0; } .remove { - left: auto; right: 0; + left: auto; } } } diff --git a/src/components/common/PeerColorWrapper.module.scss b/src/components/common/PeerColorWrapper.module.scss index 97398ace9..4a3288db6 100644 --- a/src/components/common/PeerColorWrapper.module.scss +++ b/src/components/common/PeerColorWrapper.module.scss @@ -1,25 +1,31 @@ .root { + + --peer-color-wrapper-bar-color: var(--bar-gradient, var(--accent-color)); + position: relative; + overflow: hidden; padding-inline-start: 0.5625rem; padding-inline-end: 0.375rem; - border-radius: 0.25rem; - background-color: var(--accent-background-color); color: var(--accent-color); - --peer-color-wrapper-bar-color: var(--bar-gradient, var(--accent-color)); + background-color: var(--accent-background-color); &::before { content: ""; - display: block; + position: absolute; top: 0; bottom: 0; inset-inline-start: 0; + + display: block; + width: 0.1875rem; + background: var(--peer-color-wrapper-bar-color); } } diff --git a/src/components/common/PremiumProgress.module.scss b/src/components/common/PremiumProgress.module.scss index 62531ba5a..2babeac81 100644 --- a/src/components/common/PremiumProgress.module.scss +++ b/src/components/common/PremiumProgress.module.scss @@ -1,10 +1,14 @@ .root { --percent: calc(var(--progress, 0.5) * 100%); - display: flex; + position: relative; + + display: flex; + height: 2rem; - background: var(--color-background-menu-separator); border-radius: 0.625rem; + + background: var(--color-background-menu-separator); } .withBadge { @@ -12,13 +16,15 @@ } .badgeContainer { - display: flex; - justify-content: center; position: absolute; top: -1.5rem; - left: 0; right: 0; + left: 0; transform: translate(calc(var(--shift-x) * 100% - 50%), -20px); + + display: flex; + justify-content: center; + transition: transform 0.2s ease-in-out; animation: slide-in 0.5s ease-in-out; } @@ -34,11 +40,14 @@ } .floating-badge-wrapper { - animation: rotate-in 0.5s ease-in-out; - border-radius: 0.5rem; - height: 2.6875rem; position: relative; + overflow: hidden; + + height: 2.6875rem; + border-radius: 0.5rem; + + animation: rotate-in 0.5s ease-in-out; } @keyframes rotate-in { @@ -57,28 +66,33 @@ } .floating-badge { + position: relative; + z-index: 1; + display: flex; align-items: center; justify-content: center; - color: #ffffff; + padding: 0.25rem 0.75rem; border-radius: 1rem; + + color: #ffffff; + background-color: #7E85FF; - position: relative; - z-index: 1; } .floating-badge-triangle { - display: inline-block; position: absolute; bottom: -4px; left: calc(var(--tail-position, 0.5) * 100%); transform: translateX(-50%); + + display: inline-block; } .floating-badge-icon { - font-size: 1.25rem; margin-right: 0.25rem; + font-size: 1.25rem; } .floating-badge-value { @@ -90,8 +104,10 @@ position: absolute; top: 0; bottom: 0; + display: flex; align-items: center; + font-weight: var(--font-weight-medium); } @@ -105,14 +121,18 @@ .progress { --multiplier: calc(1 / var(--progress) - 1); - overflow: hidden; + position: absolute; top: 0; - left: 0; bottom: 0; + left: 0; + + overflow: hidden; + width: max(var(--percent), 0.625rem); border-top-left-radius: 0.625rem; border-bottom-left-radius: 0.625rem; + background-image: var(--premium-gradient); background-size: calc(1 / var(--progress) * 100%) 100%; @@ -132,8 +152,8 @@ .primary { .progress { - background-image: none; background-color: var(--color-primary); + background-image: none; } .floating-badge { diff --git a/src/components/common/PrivacySettingsNoticeModal.module.scss b/src/components/common/PrivacySettingsNoticeModal.module.scss index aa86b73d5..dd5847457 100644 --- a/src/components/common/PrivacySettingsNoticeModal.module.scss +++ b/src/components/common/PrivacySettingsNoticeModal.module.scss @@ -5,9 +5,9 @@ } .icon { + margin-bottom: 0.25rem; border-radius: 50%; background-color: var(--color-primary); - margin-bottom: 0.25rem; } .header { @@ -20,20 +20,20 @@ text-align: center; @media (min-width: 600px) { - margin-left: 0.75rem; margin-right: 0.75rem; + margin-left: 0.75rem; } } .separator { + width: 80%; margin-top: 1.25rem; margin-bottom: 0.25rem; - width: 80%; } .button { - text-transform: none; border-radius: var(--border-radius-default-tiny); + text-transform: none; } .closeButton { diff --git a/src/components/common/ProfileInfo.module.scss b/src/components/common/ProfileInfo.module.scss index b09247a23..e05271164 100644 --- a/src/components/common/ProfileInfo.module.scss +++ b/src/components/common/ProfileInfo.module.scss @@ -1,28 +1,36 @@ .fallbackPhoto { + pointer-events: none; + position: absolute; z-index: 1; - background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%); - width: 100%; + display: flex; justify-content: center; + + width: 100%; padding-top: 1rem; padding-bottom: 0.5rem; + opacity: 0; - pointer-events: none; + background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%); transition: 0.25s ease-in-out opacity; } .fallbackPhotoContents { - display: flex; - font-size: 0.75rem; - color: var(--color-white); - opacity: 0.5; + pointer-events: none; cursor: var(--custom-cursor, pointer); user-select: none; + + display: flex; align-items: center; + height: 1.5rem; - pointer-events: none; + + font-size: 0.75rem; + color: var(--color-white); + + opacity: 0.5; transition: 0.25s ease-in-out opacity; @@ -44,14 +52,15 @@ } .photoWrapper { - width: 100%; position: absolute; - left: 0; top: 0; bottom: 0; + left: 0; overflow: hidden; + width: 100%; + > :global(.Transition) { width: 100%; height: 100%; @@ -60,22 +69,26 @@ .photoDashes { position: absolute; + z-index: 2; + top: 0.5rem; + left: 0; + + display: flex; + width: 100%; height: 0.125rem; padding: 0 0.375rem; - z-index: 2; - - display: flex; - top: 0.5rem; - left: 0; } .photoDash { flex: 1 1 auto; - background-color: var(--color-white); - opacity: 0.25; - border-radius: 0.125rem; + margin: 0 0.125rem; + border-radius: 0.125rem; + + opacity: 0.25; + background-color: var(--color-white); + transition: opacity 300ms ease; &_current { @@ -84,21 +97,25 @@ } .navigation { + cursor: var(--custom-cursor, pointer); + position: absolute; + z-index: 1; top: 0; bottom: 0; + width: 25%; - border: none; - padding: 0; margin: 0; + padding: 0; + border: none; + appearance: none; + opacity: 0.25; background: transparent no-repeat; background-size: 1.25rem; - opacity: 0.25; - transition: opacity 0.15s; outline: none !important; - cursor: var(--custom-cursor, pointer); - z-index: 1; + + transition: opacity 0.15s; &:global(:hover), :global(.is-touch-env) & { @@ -111,8 +128,8 @@ background-position: 1.25rem 50%; &[dir="rtl"] { - left: auto; right: 0; + left: auto; transform: scaleX(-1); } } @@ -123,26 +140,31 @@ background-position: calc(100% - 1.25rem) 50%; &[dir="rtl"] { - left: 0; right: auto; + left: 0; transform: scaleX(-1); } } } .info { + pointer-events: none; + position: absolute; bottom: 0; left: 0; - width: 100%; - min-height: 100px; - padding: 0 1.5rem 0.5rem; - background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%); - color: var(--color-white); + display: flex; flex-direction: column; justify-content: flex-end; - pointer-events: none; + + width: 100%; + min-height: 100px; + padding: 0 1.5rem 0.5rem; + + color: var(--color-white); + + background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%); :global(.statusSparkles) { color: var(--color-white) !important; @@ -150,23 +172,23 @@ &:dir(rtl) { .status { - text-align: right; unicode-bidi: plaintext; + text-align: right; } } &[dir="rtl"] { .status { - text-align: right; unicode-bidi: plaintext; + text-align: right; } } } .status { - font-size: 0.875rem; display: flex; align-items: center; + font-size: 0.875rem; } .user-status { @@ -175,17 +197,22 @@ .get-status { --blured-background-color: #c4c9cc42; - cursor: var(--custom-cursor, pointer); - font-size: 0.75rem; - margin-inline-start: 0.375rem; - border-radius: 1rem; - padding: 0.1875rem 0.375rem; + pointer-events: all; + cursor: var(--custom-cursor, pointer); + + margin-inline-start: 0.375rem; + padding: 0.1875rem 0.375rem; + border-radius: 1rem; + + font-size: 0.75rem; font-weight: var(--font-weight-medium); - transition: 150ms filter ease-in; + + opacity: 0.8; background: var(--blured-background-color); backdrop-filter: blur(100px); - opacity: 0.8; + + transition: 150ms filter ease-in; &:hover { filter: brightness(1.1); @@ -199,17 +226,17 @@ } .topicTitle { + margin: 0.5rem 0 0; font-size: 1.25rem; line-height: 1.5rem; text-align: center; - margin: 0.5rem 0 0; } .topicIcon { - margin: auto; + display: flex !important; width: 7.5rem !important; height: 7.5rem !important; - display: flex !important; + margin: auto; &:global(.general-forum-icon) { font-size: 7.5rem; @@ -219,7 +246,6 @@ .topicIconTitle { font-size: 3rem !important; - font-weight: var(--font-weight-normal); :global(.emoji-small) { @@ -229,9 +255,10 @@ } .topicMessagesCounter { + margin: 0; + font-size: 0.875rem; line-height: 1.25rem; color: var(--color-text-secondary); - margin: 0; text-align: center; } diff --git a/src/components/common/ProfileInfo.scss b/src/components/common/ProfileInfo.scss index ac686ba47..2ec925c3c 100644 --- a/src/components/common/ProfileInfo.scss +++ b/src/components/common/ProfileInfo.scss @@ -1,29 +1,30 @@ // This class is used in `ghostAnimation`, so we need to keep it global .ProfileInfo { - aspect-ratio: 1 / 1; position: relative; + aspect-ratio: 1 / 1; @supports not (aspect-ratio: 1 / 1) { &::before { + content: ""; float: left; padding-top: 100%; - content: ""; } &::after { - display: block; content: ""; clear: both; + display: block; } } .fullName { - font-weight: var(--font-weight-medium); - font-size: 1.25rem; - line-height: 1.375rem; - white-space: pre-wrap; - overflow-wrap: anywhere; margin-bottom: 0; + + font-size: 1.25rem; + font-weight: var(--font-weight-medium); + line-height: 1.375rem; + overflow-wrap: anywhere; + white-space: pre-wrap; } .VerifiedIcon, @@ -44,8 +45,8 @@ .custom-emoji { --custom-emoji-size: 1.5rem; - color: var(--color-white) !important; pointer-events: auto; cursor: var(--custom-cursor, pointer); + color: var(--color-white) !important; } } diff --git a/src/components/common/ProfilePhoto.scss b/src/components/common/ProfilePhoto.scss index d33bb00a4..c86a6328c 100644 --- a/src/components/common/ProfilePhoto.scss +++ b/src/components/common/ProfilePhoto.scss @@ -1,13 +1,13 @@ .ProfilePhoto { - width: 100%; - height: 100%; cursor: var(--custom-cursor, pointer); position: relative; + width: 100%; + height: 100%; .avatar-media { + position: relative; width: 100%; object-fit: cover; - position: relative; } .spinner-wrapper { @@ -20,12 +20,15 @@ &.replies-bot-account, &.no-photo, &.saved-messages { + cursor: var(--custom-cursor, default); + display: flex; align-items: center; justify-content: center; + color: var(--color-white); + background: linear-gradient(var(--color-white) -125%, var(--color-user)); - cursor: var(--custom-cursor, default); } &.no-photo { @@ -43,6 +46,7 @@ position: absolute; top: 0; left: 0; + width: 100%; height: 100%; } diff --git a/src/components/common/SliderDots.module.scss b/src/components/common/SliderDots.module.scss index 5e82b1f07..8e52869e0 100644 --- a/src/components/common/SliderDots.module.scss +++ b/src/components/common/SliderDots.module.scss @@ -1,32 +1,37 @@ .root { - display: flex; - justify-content: center; - margin: 2rem; - align-items: center; --fake-translate: calc(8px); --dot-width: calc(10px + 8px); --start-from: 0; --length: 50; --count: 8; --center: calc((var(--length) * var(--dot-width)) / 2); + transform: translateX( calc(var(--center) - (var(--dot-width) * var(--count) / 2) - (var(--dot-width) * var(--start-from))) ); + + display: flex; + align-items: center; + justify-content: center; + + margin: 2rem; + transition: 0.25s ease-out transform; } .arrow { - z-index: 2; position: absolute; - left: 0.5rem; + z-index: 2; top: 0.5rem; + left: 0.5rem; + transition: 0.25s ease-in-out opacity; } .right { - left: initial; right: 0.5rem; + left: initial; } .arrow.arrow-hidden { @@ -34,13 +39,17 @@ } .dot { - flex: none; cursor: var(--custom-cursor, pointer); + + flex: none; + width: 8px; height: 8px; - background: #DFE1E5; - border-radius: 50%; margin-right: 10px; + border-radius: 50%; + + background: #DFE1E5; + transition: 0.25s ease-in-out opacity; } @@ -55,8 +64,8 @@ } .invisible { - opacity: 0; pointer-events: none; + opacity: 0; } .active { diff --git a/src/components/common/Sparkles.module.scss b/src/components/common/Sparkles.module.scss index 21afd4888..04e525d88 100644 --- a/src/components/common/Sparkles.module.scss +++ b/src/components/common/Sparkles.module.scss @@ -1,17 +1,17 @@ .root { + pointer-events: none; position: absolute; inset: 0; line-height: 1; - pointer-events: none; } .progress { --_progress: 0; z-index: 0; + overflow: hidden; font-size: 0.75rem; opacity: 0.8; - overflow: hidden; } .button { @@ -34,14 +34,14 @@ @keyframes sparkle { 0% { - opacity: 0; transform: translate(0, 0); + opacity: 0; } 15% { opacity: 1; } 100% { - opacity: 0; transform: translate(var(--_shift-x), var(--_shift-y)); + opacity: 0; } } diff --git a/src/components/common/StickerButton.scss b/src/components/common/StickerButton.scss index 72867f09a..d390df6df 100644 --- a/src/components/common/StickerButton.scss +++ b/src/components/common/StickerButton.scss @@ -2,77 +2,86 @@ --custom-emoji-size: 2.25rem; --premium-gradient: linear-gradient(88.39deg, #6C93FF -2.56%, #976FFF 51.27%, #DF69D1 107.39%); + position: relative; + display: inline-block; + flex-shrink: 0; + width: 4.5rem; height: 4.5rem; border-radius: var(--border-radius-messages-small); + background: transparent no-repeat center; background-size: contain; + transition: background-color 0.15s ease, opacity 0.3s ease !important; - position: relative; - flex-shrink: 0; &.custom-emoji { - color: var(--color-primary); - width: var(--custom-emoji-size); height: var(--custom-emoji-size); margin: 0.3125rem; + color: var(--color-primary); &.status-default { - font-size: 2rem; - padding: 0.125rem; + font-size: 2rem; color: var(--color-text); } } &.effect-emoji .sticker-locked { - font-size: 0.75rem; width: 0.875rem; height: 0.875rem; + font-size: 0.75rem; } &.set-expand { - padding: 0; - vertical-align: bottom; align-self: center; justify-self: center; + + padding: 0; + font-weight: var(--font-weight-medium); + vertical-align: bottom; } .sticker-locked { position: absolute; - bottom: 0; + z-index: 2; right: 0; + bottom: 0; + + display: flex; + align-items: center; + justify-content: center; + width: 1.25rem; height: 1.25rem; - display: flex; - justify-content: center; - align-items: center; border-radius: 50%; + color: white; - z-index: 2; + opacity: 0.75; background: var(--premium-gradient); } .sticker-premium { position: absolute; - bottom: 0; + z-index: 1; right: 0; - width: 1.25rem; - height: 1.25rem; + bottom: 0; display: flex; - justify-content: center; align-items: center; + justify-content: center; + width: 1.25rem; + height: 1.25rem; border-radius: 50%; - color: white; - background: var(--premium-gradient); - z-index: 1; + color: white; + + background: var(--premium-gradient); } &.selected { @@ -91,12 +100,6 @@ } } - @media (max-width: 600px) { - &, &.custom-emoji { - margin: 0.25rem; - } - } - &.set-button { width: 2.75rem !important; height: 2.75rem; @@ -114,38 +117,47 @@ position: absolute; top: 0; left: 0; + width: 100%; height: 100%; } .sticker-media { - object-fit: contain; - -webkit-touch-callout: none; user-select: none; + object-fit: contain; + + -webkit-touch-callout: none; } .sticker-remove-button { position: absolute; + z-index: 2; top: -0.125rem; right: -0.125rem; + width: 1.25rem; height: 1.25rem; padding: 0.125rem; - z-index: 2; - - .icon { - font-size: 1rem; - } opacity: 0; transition: opacity 0.15s ease; + + .icon { + font-size: 1rem; + } + } + + @media (max-width: 600px) { + &, &.custom-emoji { + margin: 0.25rem; + } } } .sticker-context-menu { - position: absolute; cursor: var(--custom-cursor, default); + position: absolute; z-index: var(--z-header-menu); .bubble { diff --git a/src/components/common/StickerSetCard.scss b/src/components/common/StickerSetCard.scss index 853c12fee..e0f387418 100644 --- a/src/components/common/StickerSetCard.scss +++ b/src/components/common/StickerSetCard.scss @@ -1,11 +1,12 @@ .StickerSetCard { .StickerButton, .Button { + flex: 0 0 2.5rem; + width: 2.5rem; height: 2.5rem; margin: 0 0.5rem 0 0; padding: 0; - flex: 0 0 2.5rem; } .install-button { diff --git a/src/components/common/StickerSetModal.scss b/src/components/common/StickerSetModal.scss index adcec8587..8dbd4aaf0 100644 --- a/src/components/common/StickerSetModal.scss +++ b/src/components/common/StickerSetModal.scss @@ -4,12 +4,6 @@ max-width: 100%; } - @media (max-width: 600px) { - .modal-dialog { - width: 20.375rem; - } - } - .modal-header { padding: 0.5rem; border-bottom: 1px solid transparent; @@ -23,8 +17,8 @@ .modal-content { --emoji-size: 4.5rem; - text-align: center; padding: 0 !important; + text-align: center; } &.custom-emoji .modal-content { @@ -37,23 +31,28 @@ .stickers { position: relative; + + overflow-y: auto; + width: 100%; height: 19rem; max-height: 50vh; - overflow-y: auto; padding: 0 0.25rem; + text-align: left; } .stickers-grid { display: grid; grid-template-columns: repeat(auto-fill, var(--emoji-size, 4.5rem)); - justify-content: space-between; row-gap: 0.25rem; column-gap: var(--symbol-set-gap-size, 0.625rem); - text-align: initial; + justify-content: space-between; + padding-bottom: 0.25rem; + text-align: initial; + @media (max-width: 600px) { grid-gap: 0.5rem; } @@ -75,4 +74,10 @@ height: 22.8125rem; max-height: calc(50vh + 3.8125rem); } + + @media (max-width: 600px) { + .modal-dialog { + width: 20.375rem; + } + } } diff --git a/src/components/common/StickerView.module.scss b/src/components/common/StickerView.module.scss index 565271d71..b3b23d85d 100644 --- a/src/components/common/StickerView.module.scss +++ b/src/components/common/StickerView.module.scss @@ -1,7 +1,7 @@ .thumb { + z-index: 1; width: 100%; height: 100%; - z-index: 1; &:global(.closing) { transition-delay: 150ms; @@ -20,6 +20,7 @@ position: absolute; top: 0; left: 0; + width: 100%; height: 100%; } diff --git a/src/components/common/TopicChip.module.scss b/src/components/common/TopicChip.module.scss index 6f05c7b18..dc08b71de 100644 --- a/src/components/common/TopicChip.module.scss +++ b/src/components/common/TopicChip.module.scss @@ -1,30 +1,40 @@ .root { --custom-emoji-size: 1.125rem; - position: relative; - display: inline-flex; - align-items: center; - gap: 0.25rem; - padding: 0.25rem; - line-height: 1.125rem; - background-color: var(--background-color); - border-radius: var(--border-radius-messages); - color: var(--topic-button-accent-color); cursor: var(--custom-cursor, pointer); + position: relative; + + display: inline-flex; + gap: 0.25rem; + align-items: center; + + padding: 0.25rem; + border-radius: var(--border-radius-messages); + + line-height: 1.125rem; + color: var(--topic-button-accent-color); + + background-color: var(--background-color); + &::before { content: ""; - display: block; + position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); + + display: block; + width: 100%; height: 100%; - background-color: var(--topic-button-accent-color); - opacity: 0.15; - transition: opacity 0.15s ease-in-out; border-radius: var(--border-radius-messages); + + opacity: 0.15; + background-color: var(--topic-button-accent-color); + + transition: opacity 0.15s ease-in-out; } &:hover::before { diff --git a/src/components/common/TopicDefaultIcon.module.scss b/src/components/common/TopicDefaultIcon.module.scss index f0beb5568..1eacc69ea 100644 --- a/src/components/common/TopicDefaultIcon.module.scss +++ b/src/components/common/TopicDefaultIcon.module.scss @@ -1,13 +1,15 @@ .root { + position: relative; + display: inline-flex; + flex-shrink: 0; align-items: center; justify-content: center; - vertical-align: middle; - position: relative; width: 1.25rem; height: 1.25rem; - flex-shrink: 0; + + vertical-align: middle; } .icon { @@ -17,15 +19,16 @@ } .title { - z-index: 1; - color: #ffffff; - font-weight: var(--font-weight-medium); - font-size: 0.75em; - line-height: 1; position: absolute; + z-index: 1; top: 50%; transform: translateY(-50%); + font-size: 0.75em; + font-weight: var(--font-weight-medium); + line-height: 1; + color: #ffffff; + :global(.emoji) { width: 1em; height: 1em; diff --git a/src/components/common/UiLoader.module.scss b/src/components/common/UiLoader.module.scss index 6596f2d16..6d547a9a2 100644 --- a/src/components/common/UiLoader.module.scss +++ b/src/components/common/UiLoader.module.scss @@ -1,13 +1,15 @@ .mask { position: fixed; + z-index: var(--z-ui-loader-mask); top: 0; - left: 0; right: 0; - margin: 0 auto; + left: 0; + + display: flex; + width: 100%; height: 100%; - z-index: var(--z-ui-loader-mask); - display: flex; + margin: 0 auto; } .main { @@ -22,12 +24,14 @@ .left { flex: 1; - background: var(--color-background); - min-width: 16rem; + width: 33vw; + min-width: 16rem; max-width: 26.5rem; height: 100%; + background: var(--color-background); + @media (min-width: 926px) { max-width: 40vw; } @@ -46,17 +50,20 @@ } @media (max-width: 600px) { - max-width: none; width: 100vw !important; + max-width: none; } } .middle { - flex: 3; - border-left: 1px solid var(--color-borders); position: relative; z-index: 1; + overflow: hidden; + flex: 3; + + border-left: 1px solid var(--color-borders); + background-size: cover !important; @media (max-width: 1275px) { @@ -70,12 +77,14 @@ .right { position: absolute; + z-index: 1; top: 0; right: 0; - z-index: 1; - height: 100%; + width: var(--right-column-width); + height: 100%; border-left: 1px solid var(--color-borders); + background: var(--color-background); } diff --git a/src/components/common/VerifiedIcon.scss b/src/components/common/VerifiedIcon.scss index d96af7b60..bd89bccc0 100644 --- a/src/components/common/VerifiedIcon.scss +++ b/src/components/common/VerifiedIcon.scss @@ -1,9 +1,10 @@ .VerifiedIcon { + + --color-fill: var(--color-primary); + --color-checkmark: #fff; + display: inline-block; flex-shrink: 0; width: 1.5rem; height: 1.5rem; - - --color-fill: var(--color-primary); - --color-checkmark: #fff; } diff --git a/src/components/common/WebLink.scss b/src/components/common/WebLink.scss index f7bea14f6..dd2ba954d 100644 --- a/src/components/common/WebLink.scss +++ b/src/components/common/WebLink.scss @@ -1,9 +1,11 @@ .WebLink { + position: relative; + min-height: 3rem; padding: 0.25rem 0 0 3.75rem; + font-size: 0.875rem; line-height: 1.125rem; - position: relative; & + & { margin-top: 1.5rem; @@ -11,29 +13,36 @@ &.without-media::before { content: attr(data-initial); - width: 3rem; - height: 3rem; + position: absolute; - left: 0; top: 0; - background-color: var(--color-webpage-initial-background); - color: #fff; + left: 0; + display: flex; align-items: center; justify-content: center; + + width: 3rem; + height: 3rem; border-radius: var(--border-radius-messages-small); - text-transform: uppercase; - font-weight: var(--font-weight-medium); + font-size: 1.5rem; + font-weight: var(--font-weight-medium); + color: #fff; + text-transform: uppercase; + + background-color: var(--color-webpage-initial-background); } .Media { + cursor: var(--custom-cursor, default) !important; + position: absolute; - left: 0; top: 0; + left: 0; + width: 3rem; height: 3rem; - cursor: var(--custom-cursor, default) !important; padding-bottom: unset !important; border-radius: var(--border-radius-messages-small) !important; } @@ -41,36 +50,39 @@ .site-name, .site-description, .site-title { - overflow-wrap: anywhere; text-align: initial; + overflow-wrap: anywhere; } .site-name { - display: block; - color: var(--color-links); - font-weight: var(--font-weight-normal); - white-space: nowrap; overflow: hidden; + display: block; + + font-weight: var(--font-weight-normal); + color: var(--color-links); text-overflow: ellipsis; + white-space: nowrap; } .site-title { + margin-bottom: 0.0625rem; font-size: 1rem; font-weight: var(--font-weight-medium); - margin-bottom: 0.0625rem; line-height: 1.3125rem; } .sender-name, .site-description { - margin-bottom: 0; - color: var(--color-text-secondary); - line-height: 1.125rem; - max-height: 2.25rem; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + + max-height: 2.25rem; + margin-bottom: 0; + + line-height: 1.125rem; + color: var(--color-text-secondary); } .sender-name { @@ -87,8 +99,8 @@ .Media, &.without-media::before { - left: auto; right: 0; + left: auto; } .content { diff --git a/src/components/common/code/CodeBlock.scss b/src/components/common/code/CodeBlock.scss index 8c906d987..74a4b17a4 100644 --- a/src/components/common/code/CodeBlock.scss +++ b/src/components/common/code/CodeBlock.scss @@ -1,27 +1,33 @@ .CodeBlock { - background-color: var(--color-code-bg); - color: var(--color-text); - margin: 0; - padding-block: 0.1875rem; - margin-block: 0.25rem; - border-radius: 0.25rem; position: relative; + overflow: hidden; + margin: 0; + margin-block: 0.25rem; + padding-block: 0.1875rem; + border-radius: 0.25rem; + + color: var(--color-text); + + background-color: var(--color-code-bg); + .code-title { - white-space: nowrap; overflow: hidden; - text-overflow: ellipsis; - font-weight: var(--font-weight-medium); + margin-bottom: 0.5rem; - color: var(--accent-color); + font-size: calc(var(--message-text-size, 1rem) - 0.125rem); + font-weight: var(--font-weight-medium); + color: var(--accent-color); + text-overflow: ellipsis; + white-space: nowrap; } .code-block { + overflow: hidden; margin: 0; white-space: pre-wrap; - overflow: hidden; &:hover { .code-overlay { @@ -30,8 +36,8 @@ } &.no-word-wrap { - white-space: pre; padding-bottom: 0.25rem; + white-space: pre; } html.theme-light & { @@ -83,8 +89,8 @@ } .hljs { - display: block; overflow-x: auto; + display: block; color: var(--color-text); } } @@ -132,8 +138,8 @@ .hljs-comment, .hljs-quote { - color: var(--color-comment); font-style: italic; + color: var(--color-comment); } .hljs-meta, diff --git a/src/components/common/code/CodeOverlay.module.scss b/src/components/common/code/CodeOverlay.module.scss index 2222e3280..ee3dad3ab 100644 --- a/src/components/common/code/CodeOverlay.module.scss +++ b/src/components/common/code/CodeOverlay.module.scss @@ -1,22 +1,29 @@ .overlay { + pointer-events: none; + position: absolute; top: 0; right: 0; bottom: 0; left: 0; - pointer-events: none; + opacity: 0; + transition: opacity 0.15s ease-in-out; } .copy, .wrap { + cursor: var(--custom-cursor, pointer); + display: flex; - font-size: 1.25rem; + + margin: 0.125rem; padding: 0.125rem; border-radius: 0.125rem; - margin: 0.125rem; + + font-size: 1.25rem; + transition: background-color 0.15s ease-in-out; - cursor: var(--custom-cursor, pointer); &:hover, &.wrapOn { background-color: var(--color-background-compact-menu-hover); @@ -24,18 +31,20 @@ } .content { + pointer-events: auto; + position: absolute; top: 0; right: 0; display: flex; align-items: center; + padding: 0.125rem; + border-bottom-left-radius: 0.25rem; background-color: var(--color-background-compact-menu); backdrop-filter: blur(1px); - border-bottom-left-radius: 0.25rem; - pointer-events: auto; &.hidden { display: none; diff --git a/src/components/common/embedded/EmbeddedMessage.scss b/src/components/common/embedded/EmbeddedMessage.scss index cbda0fd7b..44f8f3751 100644 --- a/src/components/common/embedded/EmbeddedMessage.scss +++ b/src/components/common/embedded/EmbeddedMessage.scss @@ -5,23 +5,27 @@ .EmbeddedMessage { --hover-opacity: 0; --hover-background-color: white; - color: var(--color-text); + --ripple-color: rgba(0, 0, 0, 0.08); + + cursor: var(--custom-cursor, pointer); + + position: relative; + + overflow: hidden; display: flex; align-items: center; - font-size: calc(var(--message-text-size, 1rem) - 0.125rem); - line-height: 1.125rem; + margin-bottom: 0.0625rem; padding-block: 0.1875rem; border-radius: var(--border-radius-messages-small); - position: relative; - overflow: hidden; - cursor: var(--custom-cursor, pointer); + + font-size: calc(var(--message-text-size, 1rem) - 0.125rem); + line-height: 1.125rem; + color: var(--color-text); background-color: var(--accent-background-color); - --ripple-color: rgba(0, 0, 0, 0.08); - html.theme-dark & { --ripple-color: rgba(255, 255, 255, 0.08); --hover-background-color: black; @@ -36,19 +40,21 @@ } .hover-effect { - transition: opacity 0.15s; + pointer-events: none; content: ''; + position: absolute; + z-index: 2; top: 0; left: 0; + width: 100%; height: 100%; - background-color: var(--hover-background-color); opacity: var(--hover-opacity); + background-color: var(--hover-background-color); - pointer-events: none; - z-index: 2; + transition: opacity 0.15s; } body.no-page-transitions & { @@ -64,9 +70,12 @@ .custom-shape & { --peer-color-wrapper-bar-color: var(--accent-color); --accent-color: white; + max-width: 15rem; margin: 0; + color: white !important; + background-color: var(--pattern-color); box-shadow: 0 1px 2px var(--color-default-shadow); @@ -76,6 +85,19 @@ } &.is-quote { + + &::after { + @include icons.icon; + + content: map.get(icons.$icons-map, "quote"); + + position: absolute; + top: 0.25rem; + inset-inline-end: 0.25rem; + + font-size: 0.625rem; + color: var(--accent-color); + } .message-title { padding-inline-end: 0.75rem; } @@ -83,18 +105,6 @@ .message-text .embedded-text-wrapper { white-space: normal; } - - &::after { - @include icons.icon; - content: map.get(icons.$icons-map, "quote"); - - color: var(--accent-color); - position: absolute; - top: 0.25rem; - inset-inline-end: 0.25rem; - - font-size: 0.625rem; - } } &.with-thumb { @@ -114,8 +124,8 @@ .embedded-origin-icon { margin-inline: 0.125rem; - vertical-align: middle; line-height: 1.25; + vertical-align: middle; } .embedded-chat-icon { @@ -131,24 +141,24 @@ .message-title { display: flex; - align-items: center; - flex-wrap: nowrap; flex: 1; + flex-wrap: nowrap; + align-items: center; } .message-title, .embedded-sender, .embedded-sender-chat, .embedded-message-title, .forward-sender-title { - white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + white-space: nowrap; } .embedded-sender-wrapper, .embedded-forward-sender-wrapper { + overflow: hidden; display: flex; align-items: center; max-width: 100%; - overflow: hidden; } .embedded-sender-wrapper { @@ -156,12 +166,14 @@ } .embedded-text-wrapper { - white-space: nowrap; overflow: hidden; - text-overflow: ellipsis; + height: 1.125rem; margin-bottom: 0; + text-overflow: ellipsis; + white-space: nowrap; + &::after { content: none; display: none; @@ -181,6 +193,7 @@ .custom-emoji { // Custom emoji needs to be slightly bigger than normal emoji --custom-emoji-size: max(calc(1.125 * var(--message-text-size, 1rem) + 1px), 20px); + margin-inline-end: 1px; & > img { @@ -201,12 +214,13 @@ .embedded-thumb { position: absolute; top: 0.375rem; + + overflow: hidden; + flex-shrink: 0; + width: 2rem; height: 2rem; border-radius: 0.25rem; - flex-shrink: 0; - - overflow: hidden; &.round { border-radius: 1rem; diff --git a/src/components/common/embedded/EmojiIconBackground.module.scss b/src/components/common/embedded/EmojiIconBackground.module.scss index bd622d6ec..c93a19e17 100644 --- a/src/components/common/embedded/EmojiIconBackground.module.scss +++ b/src/components/common/embedded/EmojiIconBackground.module.scss @@ -1,9 +1,11 @@ .root { - color: var(--accent-color); + pointer-events: none; + position: absolute; top: 0; right: 0; bottom: 0; left: 0; - pointer-events: none; + + color: var(--accent-color); } diff --git a/src/components/common/gift/GiftRibbon.module.scss b/src/components/common/gift/GiftRibbon.module.scss index 175a6952f..0a7ad9a60 100644 --- a/src/components/common/gift/GiftRibbon.module.scss +++ b/src/components/common/gift/GiftRibbon.module.scss @@ -1,9 +1,10 @@ .root { position: absolute; - height: 3.5rem; - width: 3.5rem; top: -0.125rem; right: -0.125rem; + + width: 3.5rem; + height: 3.5rem; } .text { diff --git a/src/components/common/gift/GiftTransferPreview.module.scss b/src/components/common/gift/GiftTransferPreview.module.scss index f7c04932f..a67e6b8d7 100644 --- a/src/components/common/gift/GiftTransferPreview.module.scss +++ b/src/components/common/gift/GiftTransferPreview.module.scss @@ -1,22 +1,22 @@ .root { display: flex; - justify-content: center; - align-items: center; gap: 0.5rem; + align-items: center; + justify-content: center; margin-top: 0.5rem; margin-bottom: 1rem; } .giftPreview { - width: 4rem; - height: 4rem; position: relative; + overflow: hidden; display: grid; place-items: center; - overflow: hidden; + width: 4rem; + height: 4rem; border-radius: 0.625rem; } diff --git a/src/components/common/gift/SavedGift.module.scss b/src/components/common/gift/SavedGift.module.scss index 22e5e9bd9..4583d2a6c 100644 --- a/src/components/common/gift/SavedGift.module.scss +++ b/src/components/common/gift/SavedGift.module.scss @@ -1,27 +1,32 @@ .root { - display: flex; - flex-direction: column; - align-items: center; - gap: 0.5rem; - min-width: 0; - - padding: 0.625rem; - padding-top: 0.875rem; - - border-radius: 0.625rem; - background-color: var(--color-background-secondary); - position: relative; cursor: var(--custom-cursor, pointer); + position: relative; + + display: flex; + flex-direction: column; + gap: 0.5rem; + align-items: center; + + min-width: 0; + padding: 0.625rem; + padding-top: 0.875rem; + border-radius: 0.625rem; + + background-color: var(--color-background-secondary); + &::before { - content: ""; - position: absolute; - inset: 0; - opacity: 0; - border-radius: 0.625rem; - background-color: var(--color-hover-overlay); pointer-events: none; + content: ""; + + position: absolute; z-index: 1; + inset: 0; + + border-radius: 0.625rem; + + opacity: 0; + background-color: var(--color-hover-overlay); } &:hover::before { @@ -37,20 +42,22 @@ } .hiddenGift { - display: grid; - place-items: center; - position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); + + display: grid; + place-items: center; + width: 2rem; height: 2rem; border-radius: 50%; - background-color: var(--color-light-shadow); - color: white; font-size: 1.25rem; + color: white; + + background-color: var(--color-light-shadow); backdrop-filter: blur(0.5rem); } diff --git a/src/components/common/icons/StarIcon.module.scss b/src/components/common/icons/StarIcon.module.scss index b889fe271..91650fd12 100644 --- a/src/components/common/icons/StarIcon.module.scss +++ b/src/components/common/icons/StarIcon.module.scss @@ -1,8 +1,8 @@ .root { --color-fill: var(--color-primary); - flex-shrink: 0; display: flex; + flex-shrink: 0; width: 1rem; height: 1rem; } @@ -19,8 +19,10 @@ .adaptive { display: inline-block; + width: 1em; height: 1em; + line-height: 1; vertical-align: text-top; } @@ -31,6 +33,6 @@ } .clickable { - cursor: var(--custom-cursor, pointer); pointer-events: auto; + cursor: var(--custom-cursor, pointer); } diff --git a/src/components/common/pickers/ChatOrUserPicker.scss b/src/components/common/pickers/ChatOrUserPicker.scss index 6d3767606..0e3914f83 100644 --- a/src/components/common/pickers/ChatOrUserPicker.scss +++ b/src/components/common/pickers/ChatOrUserPicker.scss @@ -2,9 +2,9 @@ .ChatOrUserPicker { .modal-dialog { - height: 70%; - max-width: 25rem; overflow: hidden; + max-width: 25rem; + height: 70%; @media (max-width: 600px) { height: 90%; @@ -26,37 +26,39 @@ } .input-group { - margin: 0; flex: 1; + margin: 0; } .form-control { - border: none; - box-shadow: none !important; + unicode-bidi: plaintext; height: 2.75rem; padding: 0.5rem; + border: none; + font-size: 1.25rem; line-height: 1.75rem; - unicode-bidi: plaintext; + + box-shadow: none !important; } } .modal-content { - padding: 0 !important; overflow: hidden; display: flex; flex-direction: column; + padding: 0 !important; > .Transition { - height: 100%; overflow: hidden; + height: 100%; } .picker-list { - height: 100%; overflow-x: hidden; overflow-y: auto; + height: 100%; padding-inline: 0.5rem; @include mixins.adapt-padding-to-scrollbar(0.5rem); @@ -73,12 +75,14 @@ } .no-results { - height: 100%; - margin: 0; - padding: 1rem 1rem; display: flex; align-items: center; justify-content: center; + + height: 100%; + margin: 0; + padding: 1rem 1rem; + color: var(--color-text-secondary); } @@ -98,9 +102,9 @@ .topic-icon { --custom-emoji-size: 2.75rem; - margin-inline-end: 0.25rem !important; width: 2.75rem; height: 2.75rem; + margin-inline-end: 0.25rem !important; font-size: 2.75rem !important; } @@ -114,8 +118,8 @@ align-items: center; font-size: 1rem; - line-height: 1.6875rem; font-weight: var(--font-weight-medium); + line-height: 1.6875rem; } .fullName { diff --git a/src/components/common/pickers/PickerItem.module.scss b/src/components/common/pickers/PickerItem.module.scss index 179bc4e83..5b1a6bf39 100644 --- a/src/components/common/pickers/PickerItem.module.scss +++ b/src/components/common/pickers/PickerItem.module.scss @@ -1,28 +1,29 @@ .root { + position: relative; + + overflow: hidden; display: grid; - grid-template-rows: 1fr 1fr; grid-template-columns: min-content min-content 1fr min-content; + grid-template-rows: 1fr 1fr; align-items: center; - position: relative; - padding: 0.25rem; min-height: 2.5rem; - + padding: 0.25rem; border-radius: var(--border-radius-default); - overflow: hidden; - background-color: var(--background-color); - color: var(--color-text); line-height: 1.25; + color: var(--color-text); text-align: initial; - transition-property: background-color, opacity; + background-color: var(--background-color); + transition-duration: 150ms; + transition-property: background-color, opacity; :global(body.is-ios) &, :global(body.is-android) & { - border-radius: 0; padding-inline-start: 0.75rem; + border-radius: 0; } :global(body.is-ios) & { @@ -30,8 +31,8 @@ } @media (max-width: 600px) { - border-radius: 0; padding-inline-start: 0.5rem !important; + border-radius: 0; } } @@ -47,13 +48,14 @@ } .separator { - grid-row: 2; grid-column: 3; + grid-row: 2; + align-self: end; /* stylelint-disable-next-line plugin/whole-pixel */ height: 0.5px; - background-color: var(--color-dividers); - align-self: end; margin-bottom: -0.1875rem; + + background-color: var(--color-dividers); } .disabled { @@ -62,22 +64,24 @@ } .title { - grid-row: 1 / 3; grid-column: 3; + grid-row: 1 / 3; } .subtitle { + grid-column: 3; + grid-row: 2; + padding-bottom: 0.3125rem; + font-size: 0.875rem; color: var(--color-text-secondary); - grid-row: 2; - grid-column: 3; } .title, .subtitle { overflow: hidden; - white-space: nowrap; text-overflow: ellipsis; + white-space: nowrap; } .withAvatar, .multiline { @@ -96,19 +100,19 @@ } .startInput { - grid-row: 1 / 3; grid-column: 1; + grid-row: 1 / 3; margin-inline-end: 1.1875rem; } .endInput { - grid-row: 1 / 3; grid-column: 4; + grid-row: 1 / 3; margin-inline-start: 1.25rem; } .avatarElement { - grid-row: 1 / 3; grid-column: 2; + grid-row: 1 / 3; margin-inline-end: 0.75rem; } diff --git a/src/components/common/pickers/PickerStyles.module.scss b/src/components/common/pickers/PickerStyles.module.scss index 69bda0cf7..4b7633fa9 100644 --- a/src/components/common/pickers/PickerStyles.module.scss +++ b/src/components/common/pickers/PickerStyles.module.scss @@ -1,63 +1,64 @@ @use "../../../styles/mixins"; .container { - height: 100%; + overflow: hidden; display: flex; flex-direction: column; - overflow: hidden; + height: 100%; } .header { - padding: 0.75rem 1.25rem; - border-bottom: 1px solid var(--color-borders); + overflow-y: auto; display: flex; flex-flow: row wrap; flex-shrink: 0; - overflow-y: auto; max-height: 20rem; + padding: 0.75rem 1.25rem; + border-bottom: 1px solid var(--color-borders); :global(.input-group) { - margin-bottom: 0; flex-grow: 1; + margin-bottom: 0; } :global(.form-control) { height: 2rem; + padding: 0; border: none; border-radius: 0; - padding: 0; + box-shadow: none !important; } } .pickerCategoryTitle { - color: var(--color-text-secondary); - padding-inline: 0.5rem; margin-bottom: 0.5rem; + padding-inline: 0.5rem; font-weight: var(--font-weight-medium); + color: var(--color-text-secondary); &:not(:first-child) { - border-top: 1px solid var(--color-borders); - padding-top: 0.5rem; margin-top: 0.375rem; + padding-top: 0.5rem; + border-top: 1px solid var(--color-borders); } } .peerChip { - margin-bottom: 0.5rem; max-width: calc(50% - 0.5rem); + margin-bottom: 0.5rem; } .pickerList { - flex-grow: 1; - overflow-y: auto; overflow-x: hidden; + overflow-y: auto; + flex-grow: 1; } .padded { - padding: 0.5rem; scrollbar-gutter: stable; + padding: 0.5rem; @include mixins.adapt-padding-to-scrollbar(0.5rem); @@ -67,12 +68,14 @@ } .noResults { - height: 100%; - margin: 0; - padding: 1rem 1rem; display: flex; align-items: center; justify-content: center; + + height: 100%; + margin: 0; + padding: 1rem 1rem; + color: var(--color-text-secondary); } diff --git a/src/components/common/profile/BusinessHours.module.scss b/src/components/common/profile/BusinessHours.module.scss index bdcf1881b..83f78c0b0 100644 --- a/src/components/common/profile/BusinessHours.module.scss +++ b/src/components/common/profile/BusinessHours.module.scss @@ -4,8 +4,8 @@ .top { display: flex; - justify-content: space-between; align-items: center; + justify-content: space-between; } .icon { @@ -35,15 +35,19 @@ } .offset-trigger { + z-index: 1; + display: inline-block; + align-self: flex-end; + + margin-bottom: 0.25rem; padding: 0 0.5rem; border-radius: 0.75rem; + font-size: 0.875rem; color: var(--color-primary); + background-color: var(--color-primary-tint); - align-self: flex-end; - margin-bottom: 0.25rem; - z-index: 1; transition: background-color 0.2s ease-in-out; @@ -53,32 +57,35 @@ } .transition { - margin-bottom: 0.5rem; height: 0; + margin-bottom: 0.5rem; /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */ transition: height 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } .timetable { - margin-bottom: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.5rem; + margin-top: 0.6875rem; + margin-bottom: 0; } .schedule { - color: var(--color-text-secondary); - font-size: 0.875rem; - margin-bottom: 0; justify-self: end; + + margin-bottom: 0; + + font-size: 0.875rem; + color: var(--color-text-secondary); text-align: end; } .weekday { - word-break: break-all; - line-height: 1.25; font-size: 0.875rem; + line-height: 1.25; + word-break: break-all; } .current-day { diff --git a/src/components/common/profile/ChatExtra.module.scss b/src/components/common/profile/ChatExtra.module.scss index f8df4c272..b29bcf679 100644 --- a/src/components/common/profile/ChatExtra.module.scss +++ b/src/components/common/profile/ChatExtra.module.scss @@ -1,10 +1,12 @@ .businessLocation { + flex-shrink: 0; + width: 3rem; height: 3rem; - object-fit: cover; - border-radius: 0.25rem; - flex-shrink: 0; margin-inline-start: 0.25rem; + border-radius: 0.25rem; + + object-fit: cover; } .personalChannel { @@ -12,22 +14,25 @@ grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 0.5rem; + margin-bottom: 0.5rem; } .personalChannelTitle { grid-column: 1; grid-row: 1; - color: var(--color-text-secondary); - font-size: 0.875rem; - margin-inline-start: 0.5rem; + margin-bottom: 0; + margin-inline-start: 0.5rem; + + font-size: 0.875rem; + color: var(--color-text-secondary); } .botVerificationSection, .sectionInfo { - color: var(--color-text-secondary); font-size: 0.875rem; + color: var(--color-text-secondary); } .botVerificationSection { @@ -36,15 +41,18 @@ .botVerificationIcon { --custom-emoji-size: 1rem; + margin-inline-end: 0.25rem; } .personalChannelSubscribers { grid-column: 2; grid-row: 1; - color: var(--color-text-secondary); - font-size: 0.875rem; + margin-inline-end: 0.5rem; + + font-size: 0.875rem; + color: var(--color-text-secondary); } .personalChannelItem { diff --git a/src/components/common/profile/RadialPatternBackground.module.scss b/src/components/common/profile/RadialPatternBackground.module.scss index 623b2a761..b4c084443 100644 --- a/src/components/common/profile/RadialPatternBackground.module.scss +++ b/src/components/common/profile/RadialPatternBackground.module.scss @@ -1,6 +1,6 @@ .root { - border-radius: inherit; overflow: hidden; + border-radius: inherit; &::before { content: ''; @@ -13,8 +13,8 @@ } .canvas { + position: relative; width: 100%; height: 100%; object-fit: cover; - position: relative; } diff --git a/src/components/common/profile/UserBirthday.module.scss b/src/components/common/profile/UserBirthday.module.scss index 542ce65d7..f5f9dbe0c 100644 --- a/src/components/common/profile/UserBirthday.module.scss +++ b/src/components/common/profile/UserBirthday.module.scss @@ -6,19 +6,18 @@ --digit-offset: 0; --digit-offset-x: calc(8rem * var(--digit-offset) * 0.75); - position: absolute; - width: 8rem; - height: 8rem; - z-index: 2; + pointer-events: none; - transform: scale(0); + position: absolute; + z-index: 2; top: 50%; left: calc(10% + var(--digit-offset-x)); + transform: scale(0); offset-path: path('M 0 0 C 128 -46 99 -376 93 -529'); - offset-anchor: center; offset-rotate: 0deg; - pointer-events: none; + width: 8rem; + height: 8rem; animation: 2.75s float 0.25s, @@ -26,6 +25,8 @@ 1s dissapear 2s; animation-timing-function: ease-in; animation-fill-mode: forwards; + + offset-anchor: center; } .shiftOrigin { @@ -33,14 +34,14 @@ } .effect { + pointer-events: none; + position: absolute; + z-index: 1; top: calc(50% - 1rem); left: 10rem; transform: translate(-50%, -50%) scaleX(-1); - z-index: 1; - pointer-events: none; - width: 18rem; height: 18rem; } diff --git a/src/components/common/reactions/CustomEmojiEffect.module.scss b/src/components/common/reactions/CustomEmojiEffect.module.scss index 8ceeaea42..abf216cf3 100644 --- a/src/components/common/reactions/CustomEmojiEffect.module.scss +++ b/src/components/common/reactions/CustomEmojiEffect.module.scss @@ -5,22 +5,25 @@ .particle { --custom-emoji-size: var(--particle-size, 1rem); - color: var(--color-primary); position: absolute; + offset-path: var(--offset-path); + offset-rotate: 0deg; + width: var(--particle-size, 1rem); height: var(--particle-size, 1rem); border-radius: 0.25rem; - offset-path: var(--offset-path); - offset-rotate: 0deg; + + color: var(--color-primary); + animation: 1.5s particle ease-out; animation-fill-mode: forwards; } @keyframes particle { 0% { - offset-distance: 0%; transform: scale(1); + offset-distance: 0%; } 50% { @@ -32,8 +35,8 @@ } 100% { + transform: scale(1); offset-distance: 100%; opacity: 0; - transform: scale(1); } } diff --git a/src/components/common/reactions/ReactionAnimatedEmoji.module.scss b/src/components/common/reactions/ReactionAnimatedEmoji.module.scss index 4ff5c47c7..9482b114a 100644 --- a/src/components/common/reactions/ReactionAnimatedEmoji.module.scss +++ b/src/components/common/reactions/ReactionAnimatedEmoji.module.scss @@ -2,14 +2,14 @@ --custom-emoji-border-radius: 0.25rem; position: relative; + z-index: 1; + display: flex; align-items: center; justify-content: center; width: var(--custom-emoji-size); height: var(--custom-emoji-size); - - z-index: 1; } .animated-icon, .effect { diff --git a/src/components/common/reactions/ReactionEmoji.module.scss b/src/components/common/reactions/ReactionEmoji.module.scss index 580ec89c1..83e600fe6 100644 --- a/src/components/common/reactions/ReactionEmoji.module.scss +++ b/src/components/common/reactions/ReactionEmoji.module.scss @@ -2,14 +2,19 @@ --custom-emoji-size: 2.25rem; cursor: var(--custom-cursor, pointer); + + position: relative; + display: inline-block; + width: var(--custom-emoji-size); height: var(--custom-emoji-size); border-radius: var(--border-radius-messages-small); + background: transparent no-repeat center; background-size: contain; + transition: background-color 0.15s ease, opacity 0.3s ease !important; - position: relative; &.selected, &:hover { diff --git a/src/components/common/reactions/ReactionStaticEmoji.scss b/src/components/common/reactions/ReactionStaticEmoji.scss index 18be5b215..47d5677b9 100644 --- a/src/components/common/reactions/ReactionStaticEmoji.scss +++ b/src/components/common/reactions/ReactionStaticEmoji.scss @@ -1,6 +1,6 @@ .ReactionStaticEmoji { - width: 1rem; display: block; + width: 1rem; // Unicorn reaction preview is too small &.with-unicorn-fix { @@ -8,7 +8,7 @@ } &.icon-heart { - color: var(--color-heart) !important; margin: 0 !important; + color: var(--color-heart) !important; } } diff --git a/src/components/common/spoiler/Spoiler.scss b/src/components/common/spoiler/Spoiler.scss index 4066a51a0..8eacba846 100644 --- a/src/components/common/spoiler/Spoiler.scss +++ b/src/components/common/spoiler/Spoiler.scss @@ -1,9 +1,9 @@ .Spoiler { &--concealed { cursor: var(--custom-cursor, pointer); + border-radius: 0.5rem; background-image: url('../../../assets/spoiler-dots-black.png'); background-size: auto min(100%, 1.125rem); - border-radius: 0.5rem; html.theme-dark &, html.theme-light .ListItem.selected &, diff --git a/src/components/left/ArchivedChats.scss b/src/components/left/ArchivedChats.scss index a2632b57d..78908fbb5 100644 --- a/src/components/left/ArchivedChats.scss +++ b/src/components/left/ArchivedChats.scss @@ -1,6 +1,6 @@ .ArchivedChats { - height: 100%; overflow: hidden; + height: 100%; background: var(--color-background); .left-header { @@ -18,9 +18,9 @@ } .Button.rtl { - transition: var(--slide-transition) transform; position: absolute; z-index: 2; + transition: var(--slide-transition) transform; &.right-aligned { transform: @@ -39,8 +39,8 @@ } .story-toggler-wrapper { - flex-grow: 1; position: relative; + flex-grow: 1; } .chat-list-wrapper { diff --git a/src/components/left/ChatFolderModal.module.scss b/src/components/left/ChatFolderModal.module.scss index f9bf7b0c3..46ef5047e 100644 --- a/src/components/left/ChatFolderModal.module.scss +++ b/src/components/left/ChatFolderModal.module.scss @@ -1,21 +1,21 @@ @use '../../styles/mixins'; .modalContent { - padding: 0 !important; overflow-y: hidden !important; display: flex; flex-direction: column; + padding: 0 !important; } .root :global(.modal-dialog) { - max-height: 70%; - max-width: 26.25rem; overflow: hidden; + max-width: 26.25rem; + max-height: 70%; } .main { - overflow-y: auto; scrollbar-gutter: stable; + overflow-y: auto; padding: 1rem 0.375rem; @include mixins.adapt-padding-to-scrollbar(0.375rem); diff --git a/src/components/left/ConnectionStatusOverlay.scss b/src/components/left/ConnectionStatusOverlay.scss index 88832b63d..0e5be5f21 100644 --- a/src/components/left/ConnectionStatusOverlay.scss +++ b/src/components/left/ConnectionStatusOverlay.scss @@ -1,12 +1,14 @@ .connection-state-wrapper { position: absolute; + z-index: 2; top: 0; left: 0; + width: 100%; - z-index: 2; + + opacity: 1; transition: transform 300ms ease, opacity 300ms ease; - opacity: 1; &:not(.open) { transform: translateY(-3rem); @@ -19,15 +21,17 @@ } #ConnectionStatusOverlay { - height: 2.9375rem; - flex: 0 0 auto; display: flex; + flex: 0 0 auto; align-items: center; + + height: 2.9375rem; margin: 0.375rem 0.5rem; padding: 0 0.75rem; - background: var(--color-yellow); border-radius: var(--border-radius-default); + background: var(--color-yellow); + &.interactive { cursor: var(--custom-cursor, pointer); } @@ -38,20 +42,16 @@ > .state-text { flex: 1; - color: var(--color-text-lighter); + + margin-inline-start: 1.875rem; + padding-bottom: 0.0625rem; + font-size: 0.9375rem; font-weight: var(--font-weight-medium); - padding-bottom: 0.0625rem; - margin-inline-start: 1.875rem; + color: var(--color-text-lighter); white-space: nowrap; } - @media (max-width: 950px) { - > .state-text { - margin-inline-start: 1.25rem; - } - } - .Transition { width: 100%; // https://dfmcphee.com/flex-items-and-min-width-0/ @@ -64,4 +64,10 @@ width: 100%; } } + + @media (max-width: 950px) { + > .state-text { + margin-inline-start: 1.25rem; + } + } } diff --git a/src/components/left/LeftColumn.scss b/src/components/left/LeftColumn.scss index ee59c0bd3..9ee6da32c 100644 --- a/src/components/left/LeftColumn.scss +++ b/src/components/left/LeftColumn.scss @@ -3,38 +3,39 @@ } .left-header { + display: flex; + flex-shrink: 0; + align-items: center; + height: var(--header-height); padding: 0.375rem 0.8125rem 0.5rem 0.8125rem; - display: flex; - align-items: center; - flex-shrink: 0; + background-color: var(--color-background); h3 { + user-select: none; + + overflow: hidden; + + margin-right: auto; margin-bottom: 0; + margin-left: 1.375rem; + font-size: 1.25rem; font-weight: var(--font-weight-medium); - margin-left: 1.375rem; - margin-right: auto; - user-select: none; text-overflow: ellipsis; - overflow: hidden; white-space: nowrap; } .SearchInput { - margin-left: 0.625rem; max-width: calc(100% - 3.25rem); + margin-left: 0.625rem; @media (max-width: 600px) { max-width: calc(100% - 3rem); } } - @media (max-width: 600px) { - padding: 0.5rem; - } - .Button.smaller { width: 2.5rem; height: 2.5rem; @@ -57,8 +58,8 @@ padding: 0.5rem 0.5rem 0.5rem 4.5rem; .SearchInput { - margin-left: 0.5rem; max-width: calc(100% - 2.75rem); + margin-left: 0.5rem; } .Menu.main-menu .bubble { @@ -66,4 +67,8 @@ --offset-x: -4.125rem; } } + + @media (max-width: 600px) { + padding: 0.5rem; + } } diff --git a/src/components/left/NewChatButton.scss b/src/components/left/NewChatButton.scss index dd7585301..24c32c54e 100644 --- a/src/components/left/NewChatButton.scss +++ b/src/components/left/NewChatButton.scss @@ -14,7 +14,6 @@ body.no-page-transitions & { transform: none !important; opacity: 0; - transition: opacity 0.15s; &.revealed { @@ -26,9 +25,9 @@ transform: translateY(0); @media (max-width: 600px) { + transform-style: preserve-3d; // Force rendering in the composite layer to fix the z-index rendering issue transform: translate3d(0, 0, 0.625rem); - transform-style: preserve-3d; } } diff --git a/src/components/left/main/Archive.module.scss b/src/components/left/main/Archive.module.scss index 2343632a5..39d430e60 100644 --- a/src/components/left/main/Archive.module.scss +++ b/src/components/left/main/Archive.module.scss @@ -7,16 +7,20 @@ } .minimized { - background-color: var(--color-background-secondary); margin: -0.5rem -0.5rem 0 -0.5rem !important; + background-color: var(--color-background-secondary); + + &::after { + display: none; + } &:hover { opacity: 0.85; } .button { - border-radius: 0; padding: 0.375rem !important; + border-radius: 0; background-color: transparent; } @@ -35,9 +39,11 @@ .unread-count { position: absolute; right: 0.75rem; - background-color: transparent; - color: var(--color-text-secondary); + font-size: 0.8125rem; + color: var(--color-text-secondary); + + background-color: transparent; } .info { @@ -45,12 +51,8 @@ } .name { - line-height: 1.25rem !important; font-size: 0.8125rem !important; - } - - &::after { - display: none; + line-height: 1.25rem !important; } } @@ -72,9 +74,9 @@ } .avatarWrapper { + z-index: 1; flex-shrink: 0; background-color: var(--background-color); - z-index: 1; } .avatar { @@ -87,9 +89,9 @@ } .chatsPreview { - color: var(--color-text-secondary); - flex-grow: 1; overflow: hidden; + flex-grow: 1; + color: var(--color-text-secondary); text-overflow: ellipsis; } diff --git a/src/components/left/main/Chat.scss b/src/components/left/main/Chat.scss index fb68c25b9..febb474cd 100644 --- a/src/components/left/main/Chat.scss +++ b/src/components/left/main/Chat.scss @@ -8,19 +8,20 @@ --z-badge: 4; --z-status: 8; // Avatar stories require a higher z-index than the ripple to work + position: absolute; + top: 0; + left: 0; + + width: 100%; + margin: 0; + + -webkit-touch-callout: none; + body.is-ios &, body.is-macos & { --color-text-meta: var(--color-text-meta-apple); } - position: absolute; - top: 0; - left: 0; - margin: 0; - width: 100%; - - -webkit-touch-callout: none; - &.standalone { position: static; @@ -54,6 +55,303 @@ } } + &:not(.standalone):last-of-type { + border-bottom: 0.5rem solid transparent; // `margin` does not help, and `padding` affects forum indicator height + } + + &.selected-forum { + &::before { + transform: translateX(0) scaleY(1) !important; + } + } + + body.is-ios &, + body.is-android & { + .ListItem-button { + border-radius: 0 !important; + } + } + + &.forum { + --color-chat-username: var(--color-text); + + &::before { + content: ''; + + position: absolute; + z-index: var(--z-forum-indicator); + top: 0.625rem; + bottom: 0.625rem; + left: -0.4375rem; // `.chat-list` left padding + transform: translateX(-0.375rem) scaleY(0.5); + + width: 0.3125rem; + border-start-end-radius: var(--border-radius-default); + border-end-end-radius: var(--border-radius-default); + + background: var(--color-primary); + + transition: transform var(--layer-transition); + + body.no-page-transitions & { + transition: none; + } + } + + .ListItem-button { + padding-top: 0.3125rem; + padding-bottom: 0.3125rem; + } + + .title { + line-height: 1.375rem; + } + + .status { + background-color: var(--background-color); + } + + @media (max-width: 600px) { + &::before { + left: 0; + } + } + } + + .ripple-container { + z-index: var(--z-chat-ripple); + } + + .status { + position: relative; + z-index: var(--z-status); + + overflow: visible !important; + display: flex; + align-items: center; + align-self: stretch; + } + + .avatar-badge-wrapper { + + --outline-color: var(--color-background); + + position: absolute; + z-index: var(--z-badge); + right: 0.5rem; + bottom: 0; + + .ChatBadge { + box-shadow: 0 0 0 2px var(--outline-color); + } + + .ChatBadge-transition { + position: relative; + transition: opacity var(--layer-transition), transform var(--layer-transition); + + body.no-page-transitions & { + transition: opacity var(--layer-transition); + } + } + } + + .avatar-badge { + --_color-outline: var(--color-background); + + position: absolute; + right: 0.0625rem; + bottom: 0.0625rem; + flex-shrink: 0; + } + + .avatar-subscription { + font-size: 0.875rem; + + @include mixins.filter-outline(1px, var(--_color-outline)); + } + + .avatar-online { + transform: scale(0); + + width: 0.875rem; + height: 0.875rem; + border: 2px solid var(--_color-outline); + border-radius: 50%; + + opacity: 0.5; + background-color: #0ac630; + + transition: opacity 200ms, transform 200ms; + + &.avatar-online-shown { + transform: scale(1); + opacity: 1; + } + } + + .info { + transition: opacity 300ms ease, transform var(--layer-transition); + + body.no-page-transitions & { + transition: opacity 300ms ease; + } + + .title .custom-emoji { + color: var(--color-primary); + } + + .icon-muted { + margin-left: 0.25rem; + font-size: 1.125rem; + color: var(--color-list-icon); + + body.is-ios & { + margin-top: 0; + margin-right: 0.5rem; + } + } + + .general-forum-icon { + font-size: 1.25rem; + color: var(--color-text-secondary); + } + + .LastMessageMeta { + body.is-ios & { + margin-right: 0; + font-size: 0.875rem; + } + } + + .last-message, + .typing-status { + unicode-bidi: plaintext; + flex-grow: 1; + padding-right: 0.25rem; + color: var(--color-text-secondary); + + &[dir="ltr"] { + text-align: left; + } + + .sender-name { + color: var(--color-chat-username); + + body.is-macos &, + body.is-ios & { + color: var(--color-text); + } + } + + .draft { + color: var(--color-error); + } + } + + .last-message { + .draft { + &::after { + content: ": "; + } + } + + .colon, .chat-prefix-icon { + margin-inline-end: 0.1875rem; + } + + .chat-prefix-icon { + transform: translateY(1px); + display: inline-block; + font-size: 0.875rem; + color: var(--color-list-icon); + } + + .media-preview-spoiler { + filter: blur(1px); + } + + .media-preview--image { + width: 1.25rem; + height: 1.25rem; + margin-inline-start: 0.125rem; + margin-inline-end: 0.25rem; + border-radius: 0.125rem; + + vertical-align: -0.25rem; + + object-fit: cover; + + body.is-ios & { + width: 1.125rem; + height: 1.125rem; + vertical-align: -0.1875rem; + } + + &.round { + border-radius: 0.625rem; + } + } + + .emoji-small { + width: 1rem; + height: 1rem; + vertical-align: -0.125rem; + } + + .icon-play { + position: relative; + bottom: 0.0625rem; + + display: inline-block; + + margin-inline-start: -1.25rem; + margin-inline-end: 0.5rem; + + font-size: 0.75rem; + color: #fff; + + body.is-ios & { + bottom: 0; + margin-inline-start: -1.125rem; + } + } + } + + .star-amount-icon { + margin-inline: 0; + line-height: initial; + vertical-align: text-top; + } + } + + &[dir="rtl"] { + .info { + .LastMessageMeta { + margin-right: auto; + margin-left: 0; + } + + .title, + .subtitle { + padding-right: 0; + padding-left: 0.125rem; + } + + .icon-muted { + margin-right: 0.25rem; + margin-left: 0; + } + + .last-message, + .typing-status { + unicode-bidi: plaintext; + padding-right: 0; + padding-left: 0.5rem; + text-align: right; + } + } + } + // Super specific selector to override the same in `ListItem` @media (min-width: 600px) { &:not(.has-ripple):not(.is-static), @@ -64,10 +362,6 @@ } } - &:not(.standalone):last-of-type { - border-bottom: 0.5rem solid transparent; // `margin` does not help, and `padding` affects forum indicator height - } - @media (max-width: 600px) { &.selected { --background-color: var(--color-chat-hover) !important; @@ -147,292 +441,9 @@ } } - &.selected-forum { - &::before { - transform: translateX(0) scaleY(1) !important; - } - } - - body.is-ios &, - body.is-android & { - .ListItem-button { - border-radius: 0 !important; - } - } - @media (max-width: 600px) { .ListItem-button { border-radius: 0 !important; } } - - &.forum { - --color-chat-username: var(--color-text); - - &::before { - content: ''; - position: absolute; - top: 0.625rem; - bottom: 0.625rem; - left: -0.4375rem; // `.chat-list` left padding - width: 0.3125rem; - - transform: translateX(-0.375rem) scaleY(0.5); - transition: transform var(--layer-transition); - - body.no-page-transitions & { - transition: none; - } - - background: var(--color-primary); - z-index: var(--z-forum-indicator); - - border-start-end-radius: var(--border-radius-default); - border-end-end-radius: var(--border-radius-default); - } - - @media (max-width: 600px) { - &::before { - left: 0; - } - } - - .ListItem-button { - padding-top: 0.3125rem; - padding-bottom: 0.3125rem; - } - - .title { - line-height: 1.375rem; - } - - .status { - background-color: var(--background-color); - } - } - - .ripple-container { - z-index: var(--z-chat-ripple); - } - - .status { - position: relative; - align-self: stretch; - display: flex; - align-items: center; - z-index: var(--z-status); - overflow: visible !important; - } - - .avatar-badge-wrapper { - position: absolute; - bottom: 0; - right: 0.5rem; - z-index: var(--z-badge); - - --outline-color: var(--color-background); - - .ChatBadge { - box-shadow: 0 0 0 2px var(--outline-color); - } - - .ChatBadge-transition { - position: relative; - transition: opacity var(--layer-transition), transform var(--layer-transition); - - body.no-page-transitions & { - transition: opacity var(--layer-transition); - } - } - } - - .avatar-badge { - --_color-outline: var(--color-background); - position: absolute; - bottom: 0.0625rem; - right: 0.0625rem; - flex-shrink: 0; - } - - .avatar-subscription { - font-size: 0.875rem; - - @include mixins.filter-outline(1px, var(--_color-outline)); - } - - .avatar-online { - border-radius: 50%; - border: 2px solid var(--_color-outline); - background-color: #0ac630; - - width: 0.875rem; - height: 0.875rem; - - opacity: 0.5; - transform: scale(0); - transition: opacity 200ms, transform 200ms; - - &.avatar-online-shown { - opacity: 1; - transform: scale(1); - } - } - - .info { - transition: opacity 300ms ease, transform var(--layer-transition); - - body.no-page-transitions & { - transition: opacity 300ms ease; - } - - .title .custom-emoji { - color: var(--color-primary); - } - - .icon-muted { - font-size: 1.125rem; - margin-left: 0.25rem; - color: var(--color-list-icon); - - body.is-ios & { - margin-top: 0; - margin-right: 0.5rem; - } - } - - .general-forum-icon { - font-size: 1.25rem; - color: var(--color-text-secondary); - } - - .LastMessageMeta { - body.is-ios & { - font-size: 0.875rem; - margin-right: 0; - } - } - - .last-message, - .typing-status { - padding-right: 0.25rem; - flex-grow: 1; - color: var(--color-text-secondary); - unicode-bidi: plaintext; - - &[dir="ltr"] { - text-align: left; - } - - .sender-name { - color: var(--color-chat-username); - - body.is-macos &, - body.is-ios & { - color: var(--color-text); - } - } - - .draft { - color: var(--color-error); - } - } - - .last-message { - .draft { - &::after { - content: ": "; - } - } - - .colon, .chat-prefix-icon { - margin-inline-end: 0.1875rem; - } - - .chat-prefix-icon { - display: inline-block; - color: var(--color-list-icon); - font-size: 0.875rem; - transform: translateY(1px); - } - - .media-preview-spoiler { - filter: blur(1px); - } - - .media-preview--image { - width: 1.25rem; - height: 1.25rem; - object-fit: cover; - border-radius: 0.125rem; - vertical-align: -0.25rem; - margin-inline-end: 0.25rem; - margin-inline-start: 0.125rem; - - body.is-ios & { - width: 1.125rem; - height: 1.125rem; - vertical-align: -0.1875rem; - } - - &.round { - border-radius: 0.625rem; - } - } - - .emoji-small { - width: 1rem; - height: 1rem; - vertical-align: -0.125rem; - } - - .icon-play { - position: relative; - display: inline-block; - font-size: 0.75rem; - color: #fff; - margin-inline-start: -1.25rem; - margin-inline-end: 0.5rem; - bottom: 0.0625rem; - - body.is-ios & { - margin-inline-start: -1.125rem; - bottom: 0; - } - } - } - - .star-amount-icon { - vertical-align: text-top; - line-height: initial; - margin-inline: 0; - } - } - - &[dir="rtl"] { - .info { - .LastMessageMeta { - margin-left: 0; - margin-right: auto; - } - - .title, - .subtitle { - padding-left: 0.125rem; - padding-right: 0; - } - - .icon-muted { - margin-left: 0; - margin-right: 0.25rem; - } - - .last-message, - .typing-status { - padding-left: 0.5rem; - padding-right: 0; - text-align: right; - unicode-bidi: plaintext; - } - } - } } diff --git a/src/components/left/main/ChatBadge.scss b/src/components/left/main/ChatBadge.scss index 16937fdd6..61798b413 100644 --- a/src/components/left/main/ChatBadge.scss +++ b/src/components/left/main/ChatBadge.scss @@ -29,58 +29,62 @@ } .ChatBadge { + flex-shrink: 0; + min-width: 1.5rem; height: 1.5rem; - background: var(--color-gray); - border-radius: 0.75rem; padding: 0 0.4375rem !important; - color: white; + border-radius: 0.75rem; + font-size: 0.875rem !important; - line-height: 1.5625rem; font-weight: var(--font-weight-medium); + line-height: 1.5625rem; + color: white; text-align: center; - flex-shrink: 0; + + background: var(--color-gray); body.is-macos & { line-height: 1.5rem; } body.is-ios &:not(.unopened) { - line-height: 1.375rem; min-width: 1.375rem; height: 1.375rem; padding: 0 0.375rem; + line-height: 1.375rem; } body.is-ios, body.is-macos, &.miniapp { - line-height: 1.5rem !important; min-width: 1.5rem; height: 1.5rem !important; + line-height: 1.5rem !important; } &.mention, &.unread:not(.muted), &.unopened:not(.muted) { - background: var(--color-green); color: var(--color-white); + background: var(--color-green); } &.unopened { + align-self: center; + width: 0.5rem; - height: 0.5rem; min-width: auto; + height: 0.5rem; min-height: auto; padding: 0; - align-self: center; } &.pinned { - color: var(--color-list-icon); - background: transparent; width: 1.5rem; padding: 0; + color: var(--color-list-icon); + background: transparent; .icon { font-size: 1.5rem; diff --git a/src/components/left/main/ChatCallStatus.module.scss b/src/components/left/main/ChatCallStatus.module.scss index 964ce96d9..cc45c0630 100644 --- a/src/components/left/main/ChatCallStatus.module.scss +++ b/src/components/left/main/ChatCallStatus.module.scss @@ -24,34 +24,41 @@ .root { position: absolute; + z-index: 1; right: 6px; bottom: 0; + + overflow: hidden; + width: 20px; height: 20px; - border-radius: 50%; - background-color: #0ac630; border: 2px solid var(--color-background); - overflow: hidden; - z-index: 1; + border-radius: 50%; + + background-color: #0ac630; } .indicator { - width: 100%; - height: 100%; display: flex; align-items: center; justify-content: center; + + width: 100%; + height: 100%; border-radius: 50%; } .indicatorInner { + will-change: transform; + + transform: translateZ(0); + width: 2px; height: 6px; - background: var(--color-background); - border-radius: 1px; margin: 1px; - will-change: transform; - transform: translateZ(0); + border-radius: 1px; + + background: var(--color-background); } .indicatorInner:nth-child(odd) { @@ -63,8 +70,8 @@ } .selected { - background-color: var(--color-white); border-color: var(--color-chat-active); + background-color: var(--color-white); .indicatorInner { background-color: var(--color-chat-active); diff --git a/src/components/left/main/EmptyFolder.module.scss b/src/components/left/main/EmptyFolder.module.scss index bbea2601f..9188056b1 100644 --- a/src/components/left/main/EmptyFolder.module.scss +++ b/src/components/left/main/EmptyFolder.module.scss @@ -1,14 +1,11 @@ .root { - width: 100%; - height: 80%; display: flex; + flex-direction: column; align-items: center; justify-content: center; - flex-direction: column; - @media (max-height: 480px) { - height: 100%; - } + width: 100%; + height: 80%; .sticker { height: 6rem; @@ -16,11 +13,12 @@ } .title { - font-size: 1.25rem; - margin-bottom: 0.125rem; - overflow-wrap: anywhere; - text-align: center; max-width: 100%; + margin-bottom: 0.125rem; + + font-size: 1.25rem; + text-align: center; + overflow-wrap: anywhere; } .description { @@ -34,17 +32,18 @@ } :global(.Button.pill) { - max-width: 100%; - margin-top: 0.625rem; - font-weight: var(--font-weight-medium); - padding-inline-start: 0.75rem; unicode-bidi: plaintext; - justify-content: start; + max-width: 100%; + margin-top: 0.625rem; + padding-inline-start: 0.75rem; + + font-weight: var(--font-weight-medium); + .button-text { - text-overflow: ellipsis; overflow: hidden; + text-overflow: ellipsis; white-space: nowrap; } @@ -53,6 +52,10 @@ font-size: 1.5rem; } } + + @media (max-height: 480px) { + height: 100%; + } } .centered { diff --git a/src/components/left/main/EmptyForum.module.scss b/src/components/left/main/EmptyForum.module.scss index bc46b7c70..e40431d3f 100644 --- a/src/components/left/main/EmptyForum.module.scss +++ b/src/components/left/main/EmptyForum.module.scss @@ -4,24 +4,25 @@ transform: translateY(-50%); display: flex; + flex-direction: column; align-items: center; justify-content: center; - flex-direction: column; padding: 1rem; :global(.Button.pill) { - max-width: 100%; - margin-top: 0.625rem; - font-weight: var(--font-weight-medium); - padding-inline-start: 0.75rem; unicode-bidi: plaintext; - justify-content: start; + max-width: 100%; + margin-top: 0.625rem; + padding-inline-start: 0.75rem; + + font-weight: var(--font-weight-medium); + .button-text { - text-overflow: ellipsis; overflow: hidden; + text-overflow: ellipsis; white-space: nowrap; } @@ -38,11 +39,12 @@ } .title { - font-size: 1.25rem; - margin-bottom: 0.125rem; - overflow-wrap: anywhere; - text-align: center; max-width: 100%; + margin-bottom: 0.125rem; + + font-size: 1.25rem; + text-align: center; + overflow-wrap: anywhere; } .description { diff --git a/src/components/left/main/ForumPanel.module.scss b/src/components/left/main/ForumPanel.module.scss index 67f3498f9..0953fc6f9 100644 --- a/src/components/left/main/ForumPanel.module.scss +++ b/src/components/left/main/ForumPanel.module.scss @@ -1,28 +1,28 @@ .root { position: absolute; + z-index: var(--z-forum-panel); top: 0; right: 0; left: 4.75rem; - z-index: var(--z-forum-panel); - height: 100%; - background-color: var(--color-background); - border-left: 1px solid var(--color-borders); + transform: translate3d(100%, 0, 0); + display: flex; flex-direction: column; - transition: transform var(--layer-transition); - transform: translate3d(100%, 0, 0); + height: 100%; + border-left: 1px solid var(--color-borders); - @media (max-width: 600px) { - left: 4.3125rem; - } + background-color: var(--color-background); + + transition: transform var(--layer-transition); &.rtl { - left: 0; right: 4.75rem; + left: 0; transform: translateX(-100%); - border-left: none; + border-right: 1px solid var(--color-borders); + border-left: none; } &.no-animation { @@ -36,10 +36,14 @@ } :global(.HeaderActions) { - margin-left: auto; display: flex; align-items: center; justify-content: flex-end; + margin-left: auto; + } + + @media (max-width: 600px) { + left: 4.3125rem; } } @@ -48,8 +52,9 @@ height: 0; border-bottom: 0.0625rem solid var(--color-borders); - transition: 0.1s ease opacity; opacity: 0; + + transition: 0.1s ease opacity; } .scrolled .notch { @@ -58,45 +63,50 @@ .scroll-top-handler { position: absolute; - top: 0; z-index: 100; + top: 0; + width: 100%; height: 1px; } .info { - margin-left: 0.4375rem; - min-width: 0; - width: 100%; cursor: var(--custom-cursor, pointer); + width: 100%; + min-width: 0; + margin-left: 0.4375rem; :global(.info) { + overflow: hidden; display: flex; flex-direction: column; - justify-content: center; flex-grow: 1; - overflow: hidden; + justify-content: center; } :global(.fullName) { - line-height: 1.375rem; - white-space: pre; - overflow: hidden; - text-overflow: ellipsis; unicode-bidi: plaintext; + overflow: hidden; + + margin: 0 !important; + font-size: 1rem !important; font-weight: var(--font-weight-medium) !important; - margin: 0 !important; + line-height: 1.375rem; + text-overflow: ellipsis; + white-space: pre; } :global(.status) { + overflow: hidden; + display: inline-block; + + margin: 0; + font-size: 0.875rem; line-height: 1.125rem; - margin: 0; color: var(--color-text-secondary); - overflow: hidden; - white-space: nowrap; text-overflow: ellipsis; - display: inline-block; + white-space: nowrap; } } diff --git a/src/components/left/main/FrozenAccountNotification.module.scss b/src/components/left/main/FrozenAccountNotification.module.scss index 0710354e4..0acdfb862 100644 --- a/src/components/left/main/FrozenAccountNotification.module.scss +++ b/src/components/left/main/FrozenAccountNotification.module.scss @@ -1,9 +1,11 @@ .root { - background-color: var(--color-background-secondary); + cursor: pointer; + margin-inline: -0.5rem; padding-block: 0.75rem; padding-inline: 1rem; - cursor: pointer; + + background-color: var(--color-background-secondary); &:hover { opacity: 0.85; @@ -11,15 +13,15 @@ } .title { - color: var(--color-error); - font-weight: var(--font-weight-medium); font-size: 1rem; + font-weight: var(--font-weight-medium); line-height: 1rem; + color: var(--color-error); } .subtitle { - color: var(--color-text-secondary); - font-size: 0.875rem; margin-top: 0.25rem; + font-size: 0.875rem; line-height: 1rem; + color: var(--color-text-secondary); } diff --git a/src/components/left/main/LeftMain.scss b/src/components/left/main/LeftMain.scss index d8e864331..80b9de297 100644 --- a/src/components/left/main/LeftMain.scss +++ b/src/components/left/main/LeftMain.scss @@ -1,21 +1,24 @@ #LeftColumn-main { - height: 100%; position: relative; + + overflow: hidden; display: flex; flex-direction: column; - overflow: hidden; + + height: 100%; + background: var(--color-background); > .Transition { - flex: 1; overflow: hidden; + flex: 1; } .ChatFolders { - height: 100%; + overflow: hidden; display: flex; flex-direction: column; - overflow: hidden; + height: 100%; .tabs-placeholder { height: 2.625rem; @@ -28,11 +31,14 @@ } .TabList { - justify-content: flex-start; - border-bottom: 0; z-index: 1; + justify-content: flex-start; + + border-bottom: 0; + opacity: 1; + transition: opacity var(--layer-transition); } @@ -46,25 +52,26 @@ } > .Transition { - flex: 1; overflow: hidden; + flex: 1; } } .RecentContacts, .LeftSearch, .search-content { - height: 100%; overflow-y: auto; + height: 100%; } .btn-update { position: absolute; bottom: 1rem; left: 50%; - margin: 0 auto; transform: translateX(-50%); + margin: 0 auto; + white-space: nowrap; } } diff --git a/src/components/left/main/LeftMainHeader.scss b/src/components/left/main/LeftMainHeader.scss index 9c30b6bc7..4f75235c6 100644 --- a/src/components/left/main/LeftMainHeader.scss +++ b/src/components/left/main/LeftMainHeader.scss @@ -9,9 +9,9 @@ } .DropdownMenu.rtl { - transition: var(--slide-transition) transform; position: absolute; z-index: 2; + transition: var(--slide-transition) transform; &.right-aligned { transform: @@ -34,22 +34,11 @@ .animated-menu-icon { position: absolute; - &, - &::before, - &::after { - width: 1.125rem; - height: 0.125rem; - border-radius: 0.125rem; - background-color: var(--color-text-secondary); - transition: transform 0.25s; - transform: rotate(0); - } - &::before, &::after { + content: ""; position: absolute; left: 0; - content: ""; } &::before { @@ -60,6 +49,20 @@ top: 0.3125rem; } + &, + &::before, + &::after { + transform: rotate(0); + + width: 1.125rem; + height: 0.125rem; + border-radius: 0.125rem; + + background-color: var(--color-text-secondary); + + transition: transform 0.25s; + } + &.state-back { transform: rotate(180deg); @@ -96,10 +99,9 @@ } .Menu .bubble { + overflow-y: auto; min-width: 17rem; max-height: calc(100 * var(--vh) - 3.75rem); - - overflow-y: auto; } .extra-spacing { @@ -118,8 +120,9 @@ } .emoji-status { - overflow: visible; --custom-emoji-size: 1.5rem; + + overflow: visible; color: var(--color-primary); } @@ -140,19 +143,19 @@ transition: opacity var(--layer-transition); &--hidden { - opacity: 0; pointer-events: none; + opacity: 0; } } .left-search-picker-item { - color: var(--color-text-secondary); - font-weight: var(--font-weight-medium); padding-right: 0; + font-weight: var(--font-weight-medium); + color: var(--color-text-secondary); &[dir="rtl"] { - left: auto; right: -0.125rem; + left: auto; } } @@ -161,12 +164,13 @@ &-test { position: absolute; - left: 2.875rem; + z-index: 1; bottom: 0.0625rem; - color: var(--color-text-secondary); + left: 2.875rem; + font-size: 0.5rem; font-weight: var(--font-weight-medium); - z-index: 1; + color: var(--color-text-secondary); } .account-avatar { @@ -175,9 +179,9 @@ .fullName { margin: 0; + padding-top: 0.1875rem; font-size: 1em; line-height: 1; - padding-top: 0.1875rem; } } } diff --git a/src/components/left/main/StatusPickerMenu.module.scss b/src/components/left/main/StatusPickerMenu.module.scss index f5b8c802d..f4cd521b0 100644 --- a/src/components/left/main/StatusPickerMenu.module.scss +++ b/src/components/left/main/StatusPickerMenu.module.scss @@ -5,6 +5,7 @@ --border-radius-default: 1.25rem; left: 0.5rem; + width: 100%; max-width: calc(var(--symbol-menu-width) + var(--scrollbar-width)); height: var(--symbol-menu-height); @@ -16,13 +17,13 @@ backdrop-filter: blur(25px); } - @media (max-width: 26rem) { - left: 0.5rem !important; - right: 0.5rem !important; - width: calc(100vw - 1rem); - } - :global(.sticker-set-cover), :global(.custom-emoji) { color: var(--color-primary); } + + @media (max-width: 26rem) { + right: 0.5rem !important; + left: 0.5rem !important; + width: calc(100vw - 1rem); + } } diff --git a/src/components/left/main/Topic.module.scss b/src/components/left/main/Topic.module.scss index f89d3a5f7..f40adc187 100644 --- a/src/components/left/main/Topic.module.scss +++ b/src/components/left/main/Topic.module.scss @@ -1,4 +1,8 @@ .root { + + &::after { + left: 0.75rem !important; + } :global(.ListItem-button) { padding: 0.5rem 0.75rem !important; @@ -9,10 +13,9 @@ } :global(.LastMessageMeta) { - padding-top: 0; - margin-top: -0.5rem; margin-right: 0 !important; + padding-top: 0; } } @@ -24,17 +27,13 @@ :global(body.is-ios) &::after { left: 0.75rem !important; } - - &::after { - left: 0.75rem !important; - } } .closed-icon { - color: var(--color-list-icon); - font-size: 0.75rem; margin-top: -0.5rem; margin-right: 0.25rem; + font-size: 0.75rem; + color: var(--color-list-icon); } .topic-icon { diff --git a/src/components/left/main/UnconfirmedSession.module.scss b/src/components/left/main/UnconfirmedSession.module.scss index 61b4a62a9..54c62e4c2 100644 --- a/src/components/left/main/UnconfirmedSession.module.scss +++ b/src/components/left/main/UnconfirmedSession.module.scss @@ -15,16 +15,16 @@ } .info { + margin-bottom: 0.5rem; font-size: 0.875rem; color: var(--color-text-secondary); - margin-bottom: 0.5rem; } .buttons { display: flex; flex-wrap: wrap; - justify-content: space-around; column-gap: 1rem; + justify-content: space-around; } .button { diff --git a/src/components/left/newChat/NewChat.scss b/src/components/left/newChat/NewChat.scss index abbb1f6bd..a2f402d33 100644 --- a/src/components/left/newChat/NewChat.scss +++ b/src/components/left/newChat/NewChat.scss @@ -1,21 +1,21 @@ .NewChat { - height: 100%; - overflow: hidden; position: relative; + overflow: hidden; + height: 100%; &-inner { - height: calc(100% - var(--header-height)); overflow: hidden; + height: calc(100% - var(--header-height)); &.step-2 { - padding: 0 1.25rem; display: flex; flex-direction: column; + padding: 0 1.25rem; .note, .error { + margin: 1.5rem 0.25rem; font-size: 0.875rem; line-height: 1.25rem; - margin: 1.5rem 0.25rem; } .error { @@ -28,18 +28,17 @@ } .chat-members-heading { - color: var(--color-text-secondary); + margin: 1rem 0.25rem; font-size: 1rem; font-weight: var(--font-weight-medium); - margin: 1rem 0.25rem; + color: var(--color-text-secondary); } .chat-members-list { - margin: 0 -1.25rem; - padding: 0 1rem 1rem; - overflow-x: hidden; flex-grow: 1; + margin: 0 -1.25rem; + padding: 0 1rem 1rem; } } } diff --git a/src/components/left/search/ChatMessage.scss b/src/components/left/search/ChatMessage.scss index 58a01fa4a..ee391e2f6 100644 --- a/src/components/left/search/ChatMessage.scss +++ b/src/components/left/search/ChatMessage.scss @@ -13,20 +13,23 @@ } h3 { - font-size: 1rem; width: auto; + font-size: 1rem; } .subtitle { color: var(--color-text-secondary); .matching-text-highlight { - color: var(--color-text); - background: #cae3f7; - border-radius: 0.25rem; - padding: 0 0.125rem; display: inline-block; + padding: 0 0.125rem; + border-radius: 0.25rem; + + color: var(--color-text); + + background: #cae3f7; + .theme-dark & { --color-text: #000; } @@ -34,9 +37,9 @@ } .message { + overflow: hidden; flex-grow: 1; color: var(--color-text-secondary); - overflow: hidden; text-overflow: ellipsis; .sender-name { @@ -54,21 +57,26 @@ .media-preview--image { width: 1.25rem; height: 1.25rem; - object-fit: cover; - border-radius: 0.125rem; - vertical-align: -0.25rem; margin-inline-start: 0.125rem; margin-inline-end: 0.25rem; + border-radius: 0.125rem; + + vertical-align: -0.25rem; + + object-fit: cover; } .icon-play { position: relative; + bottom: 0.0625rem; + display: inline-block; - font-size: 0.75rem; - color: #fff; + margin-inline-start: -1.25rem; margin-inline-end: 0.5rem; - bottom: 0.0625rem; + + font-size: 0.75rem; + color: #fff; } } } diff --git a/src/components/left/search/ChatResults.scss b/src/components/left/search/ChatResults.scss index 0f1fb3a09..f30535993 100644 --- a/src/components/left/search/ChatResults.scss +++ b/src/components/left/search/ChatResults.scss @@ -4,8 +4,8 @@ .chatResultsContextMenu { position: absolute; - right: 0.75rem; top: 2.5rem !important; + right: 0.75rem; .bubble { width: auto; @@ -13,8 +13,8 @@ } .dropDownLink { - align-items: center; display: flex; + align-items: center; .Loading { height: 1rem !important; @@ -26,8 +26,8 @@ } .iconContainer { - width: 1rem; flex-shrink: 0; + width: 1rem; margin-inline-start: 0.25rem; } diff --git a/src/components/left/search/DateSuggest.scss b/src/components/left/search/DateSuggest.scss index b2a6a1e4d..837472803 100644 --- a/src/components/left/search/DateSuggest.scss +++ b/src/components/left/search/DateSuggest.scss @@ -1,23 +1,27 @@ .DateSuggest { display: flex; - height: 2rem; flex-direction: row; justify-content: space-between; + + height: 2rem; margin-left: 0.5rem; .date-item { + cursor: var(--custom-cursor, pointer); + display: flex; flex: 1 1 auto; + min-width: 8rem; margin-top: 0.375rem; - cursor: var(--custom-cursor, pointer); + font-size: 0.875rem; font-weight: var(--font-weight-medium); color: var(--color-text-secondary); .icon-calendar { - font-size: 1.25rem; margin-right: 0.25rem; + font-size: 1.25rem; } } } diff --git a/src/components/left/search/LeftSearch.scss b/src/components/left/search/LeftSearch.scss index bc282c3e3..82331b81b 100644 --- a/src/components/left/search/LeftSearch.scss +++ b/src/components/left/search/LeftSearch.scss @@ -1,14 +1,14 @@ @use "../../../styles/mixins"; .LeftSearch { + overflow: hidden; display: flex; flex-direction: column; height: 100%; - overflow: hidden; & > .Transition { - flex: 1; overflow: hidden; + flex: 1; } .TabList { @@ -16,9 +16,9 @@ } &--content { - padding-top: 0.5rem; overflow-y: auto; height: 100%; + padding-top: 0.5rem; } &--media { @@ -40,12 +40,13 @@ .section-heading { position: relative; + + margin-bottom: 1rem; padding-top: 0.625rem; padding-left: 0.5rem; - margin-bottom: 1rem; - font-weight: var(--font-weight-medium); font-size: 1rem; + font-weight: var(--font-weight-medium); color: var(--color-text-secondary); &-first { @@ -54,14 +55,14 @@ &[dir="rtl"], &[dir="auto"] { - padding-left: 0; - padding-right: 1.25rem; margin: 0 -1.25rem 0 1rem !important; + padding-right: 1.25rem; + padding-left: 0; text-align: initial; &::before { - left: auto; right: 0.625rem; + left: auto; } } @@ -87,30 +88,32 @@ } .content:not(.with-seekline) { - align-self: center; - min-width: 0; - flex-grow: 1; overflow: hidden; + flex-grow: 1; + align-self: center; + + min-width: 0; + text-overflow: ellipsis; overflow-wrap: anywhere; } .message-date { + padding-left: 1rem; font-size: 0.75rem; color: var(--color-text-secondary); - padding-left: 1rem; white-space: nowrap; } .media-list { display: grid; + grid-auto-rows: 1fr; + grid-gap: 0.25rem; + grid-template-columns: repeat(3, 1fr); + padding: 0.5rem; @include mixins.adapt-padding-to-scrollbar(0.5rem); - - grid-template-columns: repeat(3, 1fr); - grid-auto-rows: 1fr; - grid-gap: 0.25rem; } .Audio { @@ -125,9 +128,9 @@ } .ChatInfo { + margin: -0.0625rem; // Fix for overflow hidden and stories indicator padding: 0.0625rem; - margin: -0.0625rem; .handle { unicode-bidi: plaintext; @@ -163,18 +166,20 @@ } .topic-item { + overflow: hidden; display: flex; align-items: center; + font-size: 1rem; - line-height: 1.6875rem; font-weight: var(--font-weight-medium); - overflow: hidden; + line-height: 1.6875rem; .topic-icon { --custom-emoji-size: 2rem; - margin-inline-end: 0.25rem !important; + width: 2rem; height: 2rem; + margin-inline-end: 0.25rem !important; font-size: 2rem !important; } @@ -204,9 +209,12 @@ .Link { float: right; - color: var(--color-links); - font-weight: var(--font-weight-medium); + margin-right: 0.5rem; + + font-weight: var(--font-weight-medium); + color: var(--color-links); + transition: opacity 0.15s ease-in; &:active, @@ -220,8 +228,8 @@ &[dir="auto"] { .Link { float: left; - margin-left: 1rem; margin-right: 0; + margin-left: 1rem; } } } @@ -233,29 +241,30 @@ } .chat-selection { + overflow-x: auto; + overflow-y: hidden; display: flex; flex-shrink: 0; flex-wrap: nowrap; - justify-content: space-between; align-items: flex-end; + justify-content: space-between; padding-bottom: 0.5rem; padding-inline: 0.25rem; - box-shadow: inset 0 -1px 0 0 var(--color-borders); background-color: var(--color-background); - -webkit-overflow-scrolling: touch; - overflow-x: auto; - overflow-y: hidden; + box-shadow: inset 0 -1px 0 0 var(--color-borders); - .left-search-local-suggestion { - flex-shrink: 0; - } + -webkit-overflow-scrolling: touch; &::after { content: ""; flex-grow: 1; } + + .left-search-local-suggestion { + flex-shrink: 0; + } } .NothingFound { @@ -264,8 +273,8 @@ [dir="rtl"] { .message-date { - padding-left: 0; padding-right: 1rem; + padding-left: 0; } } } diff --git a/src/components/left/search/RecentContacts.scss b/src/components/left/search/RecentContacts.scss index 15ef24bbe..224378329 100644 --- a/src/components/left/search/RecentContacts.scss +++ b/src/components/left/search/RecentContacts.scss @@ -8,14 +8,16 @@ } .top-peers { - height: 6rem; - margin: 0 -1rem; + scrollbar-color: rgba(0, 0, 0, 0); + scrollbar-width: none; + overflow-x: auto; overflow-y: hidden; - white-space: nowrap; - scrollbar-width: none; - scrollbar-color: rgba(0, 0, 0, 0); + height: 6rem; + margin: 0 -1rem; + + white-space: nowrap; &::-webkit-scrollbar { height: 0; @@ -27,15 +29,18 @@ } .top-peer-item { + cursor: var(--custom-cursor, pointer); + + position: relative; + + overflow: hidden; display: inline-block; + width: 4.5rem; height: 6rem; - padding: 0.625rem 0.25rem; margin-left: 0.5rem; + padding: 0.625rem 0.25rem; border-radius: var(--border-radius-default); - cursor: var(--custom-cursor, pointer); - position: relative; - overflow: hidden; &:first-child { margin-left: 0.5rem; @@ -58,18 +63,21 @@ } .top-peer-name { - text-align: center; - white-space: nowrap; - font-size: 0.75rem; overflow: hidden; + + font-size: 0.75rem; + text-align: center; text-overflow: ellipsis; + white-space: nowrap; .emoji-small { width: 1rem; height: 1rem; - background-size: 1rem; margin-inline-end: 1px; + vertical-align: -3px; + + background-size: 1rem; } } } diff --git a/src/components/left/settings/PrivacyLockedOption.module.scss b/src/components/left/settings/PrivacyLockedOption.module.scss index 6ad89150d..bbd58e505 100644 --- a/src/components/left/settings/PrivacyLockedOption.module.scss +++ b/src/components/left/settings/PrivacyLockedOption.module.scss @@ -3,11 +3,12 @@ } .lock-icon { - font-size: 0.875rem; position: absolute; - left: 1.3125rem; top: 50%; + left: 1.3125rem; transform: translateY(-50%); + + font-size: 0.875rem; color: var(--color-gray); } diff --git a/src/components/left/settings/Settings.scss b/src/components/left/settings/Settings.scss index ff09b8033..5936e65f2 100644 --- a/src/components/left/settings/Settings.scss +++ b/src/components/left/settings/Settings.scss @@ -4,9 +4,9 @@ height: 100%; > .Transition_slide { + overflow: hidden; display: flex; flex-direction: column; - overflow: hidden; } .left-header { @@ -22,8 +22,8 @@ .settings-main-header { display: flex; flex-grow: 1; - justify-content: space-between; align-items: center; + justify-content: space-between; } .settings-more-menu { @@ -31,18 +31,17 @@ width: auto; .MenuItem button { - padding-left: 1rem !important; padding-right: 2rem !important; + padding-left: 1rem !important; } } } .settings-content { + overflow-y: scroll; + height: calc(100% - var(--header-height)); border-top: 1px solid transparent; transition: border-top-color 0.2s ease-in-out; - height: calc(100% - var(--header-height)); - - overflow-y: scroll; &.scrolled { border-top-color: var(--color-borders); @@ -53,9 +52,9 @@ } &.infinite-scroll { + overflow-y: hidden; display: flex; flex-direction: column; - overflow-y: hidden; & > .custom-scroll { flex: 1 1 auto; @@ -84,7 +83,9 @@ display: flex; flex-direction: column; align-items: center; + padding: 0 1.5rem; + text-align: center; &.no-border { @@ -122,24 +123,24 @@ } .settings-range-value { - color: var(--color-primary); display: inline-flex; align-items: center; margin-inline-start: 2rem; + color: var(--color-primary); } .settings-item-simple, .settings-item { - text-align: initial; padding: 0.5rem 0.5rem 1rem; + text-align: initial; @include mixins.adapt-padding-to-scrollbar(0.5rem); @include mixins.side-panel-section; } .settings-unlock-button { - margin-inline: 1rem; margin-top: 1rem; + margin-inline: 1rem; } .fluid-container { @@ -148,8 +149,8 @@ } .settings-unlock-button-title { - align-items: center; display: flex; + align-items: center; } .settings-unlock-button-icon { @@ -159,16 +160,18 @@ .settings-item { &.no-border { margin-bottom: 0; - box-shadow: none; border-bottom: none; + box-shadow: none; } &-header { + position: relative; + + padding-inline-start: 1rem; + font-size: 1rem; font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); - padding-inline-start: 1rem; - position: relative; } &-slider { @@ -176,10 +179,10 @@ } &-description { + margin: -0.5rem 1rem 1rem; font-size: 0.875rem; line-height: 1.3125; color: var(--color-text-secondary); - margin: -0.5rem 1rem 1rem; .settings-content.two-fa &, .settings-content.password-form &, @@ -188,19 +191,20 @@ } &[dir="rtl"] { - text-align: right; unicode-bidi: plaintext; + text-align: right; } } &-description-larger { - font-size: 1rem; - line-height: 1.3125rem; - color: var(--color-text-secondary); margin-top: 1rem; margin-bottom: 0.75rem; padding-inline-start: 1rem; + font-size: 1rem; + line-height: 1.3125rem; + color: var(--color-text-secondary); + &.premium-info { margin-top: 1rem; } @@ -226,8 +230,8 @@ .date { float: right; - font-size: 0.75rem; margin-left: 1rem; + font-size: 0.75rem; color: var(--color-text-secondary); } } @@ -247,8 +251,8 @@ .ListItem-button { align-items: center; - text-align: left; padding: 0.5rem; + text-align: left; } .Avatar { @@ -262,10 +266,10 @@ } .contact-name { - font-size: 1rem; - line-height: 1rem; margin-bottom: 0.25rem; + font-size: 1rem; font-weight: var(--font-weight-medium); + line-height: 1rem; } .contact-phone { @@ -278,8 +282,8 @@ &[dir="rtl"] { .multiline-item .date { float: left; - margin-left: 0; margin-right: 1rem; + margin-left: 0; } } } @@ -319,8 +323,8 @@ } .settings-fab-wrapper { - height: calc(100% - var(--header-height)); position: relative; + height: calc(100% - var(--header-height)); .settings-content { height: 100%; @@ -343,8 +347,8 @@ } .ReactionStaticEmoji { - margin-inline-end: 1rem; width: 1.5rem; + margin-inline-end: 1rem; } } diff --git a/src/components/left/settings/SettingsActiveSession.module.scss b/src/components/left/settings/SettingsActiveSession.module.scss index 29bc94686..0e3a12858 100644 --- a/src/components/left/settings/SettingsActiveSession.module.scss +++ b/src/components/left/settings/SettingsActiveSession.module.scss @@ -16,9 +16,10 @@ $icons: "android", "apple", "brave", "chrome", "edge", "firefox", "linux", "oper .iconDevice { width: 5rem; height: 5rem; + margin: 0 auto 1rem; + background-repeat: no-repeat; background-size: 5rem; - margin: 0 auto 1rem; } @each $icon in $icons { @@ -26,22 +27,22 @@ $icons: "android", "apple", "brave", "chrome", "edge", "firefox", "linux", "oper } .title { - text-align: center; margin-bottom: 0.25rem; + text-align: center; } .note, .date { - color: var(--color-text-secondary); font-size: 0.875rem; + color: var(--color-text-secondary); text-align: center; } .box { - background: var(--color-background-secondary); + margin: 1rem 0; padding: 1rem 1rem 0.5rem; border-radius: var(--border-radius-default); - margin: 1rem 0; + background: var(--color-background-secondary); } .actionHeader { diff --git a/src/components/left/settings/SettingsActiveSessions.scss b/src/components/left/settings/SettingsActiveSessions.scss index fb91a5ad0..08b15ea77 100644 --- a/src/components/left/settings/SettingsActiveSessions.scss +++ b/src/components/left/settings/SettingsActiveSessions.scss @@ -9,12 +9,14 @@ $icons: "android", "apple", "brave", "chrome", "edge", "firefox", "linux", "oper .SettingsActiveSessions { .icon-device { + flex: 0 0 2rem; + width: 2rem; height: 2rem; + margin-inline-end: 1.25rem !important; + background-repeat: no-repeat; background-size: 2rem; - flex: 0 0 2rem; - margin-inline-end: 1.25rem !important; } .icon-stop { diff --git a/src/components/left/settings/SettingsActiveWebsite.module.scss b/src/components/left/settings/SettingsActiveWebsite.module.scss index d236bf219..10a27a923 100644 --- a/src/components/left/settings/SettingsActiveWebsite.module.scss +++ b/src/components/left/settings/SettingsActiveWebsite.module.scss @@ -7,10 +7,11 @@ .avatar { width: 5rem; height: 5rem; - font-size: 3.5rem; margin: 0 auto 1rem; border-radius: 1rem; + font-size: 3.5rem; + :global(.Avatar__media) { border-radius: 1rem; } @@ -21,16 +22,16 @@ } .note { - color: var(--color-text-secondary); font-size: 0.875rem; + color: var(--color-text-secondary); text-align: center; } .box { - background: var(--color-background-secondary); + margin: 1rem 0; padding: 1rem 1rem 0.5rem; border-radius: var(--border-radius-default); - margin: 1rem 0; + background: var(--color-background-secondary); } .action-header { diff --git a/src/components/left/settings/SettingsActiveWebsites.module.scss b/src/components/left/settings/SettingsActiveWebsites.module.scss index 843efa464..334fb7567 100644 --- a/src/components/left/settings/SettingsActiveWebsites.module.scss +++ b/src/components/left/settings/SettingsActiveWebsites.module.scss @@ -2,7 +2,6 @@ width: 2rem; height: 2rem; margin-inline-end: 1.5rem; - border-radius: 0.5rem; :global(.Avatar__media) { border-radius: 0.5rem; @@ -16,6 +15,6 @@ .subtitle { overflow: hidden; - white-space: nowrap; text-overflow: ellipsis; + white-space: nowrap; } diff --git a/src/components/left/settings/SettingsGeneralBackground.scss b/src/components/left/settings/SettingsGeneralBackground.scss index 66d07a0bf..8b791ae7b 100644 --- a/src/components/left/settings/SettingsGeneralBackground.scss +++ b/src/components/left/settings/SettingsGeneralBackground.scss @@ -3,9 +3,9 @@ .SettingsGeneralBackground { .settings-wallpapers { display: grid; - grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; grid-gap: 0.0625rem; + grid-template-columns: repeat(3, 1fr); @include mixins.side-panel-section; } diff --git a/src/components/left/settings/SettingsGeneralBackgroundColor.scss b/src/components/left/settings/SettingsGeneralBackgroundColor.scss index 20bb8871f..e91acaf6a 100644 --- a/src/components/left/settings/SettingsGeneralBackgroundColor.scss +++ b/src/components/left/settings/SettingsGeneralBackgroundColor.scss @@ -11,32 +11,36 @@ } .color-picker { - margin-top: 1rem; height: 12rem; + margin-top: 1rem; } .hue-picker { - margin: 2rem 0; height: 0.5rem; + margin: 2rem 0; } canvas { + cursor: var(--custom-cursor, pointer); + display: block; + width: 100%; height: 100%; border-radius: var(--border-radius-default); - cursor: var(--custom-cursor, pointer); } .handle { + cursor: var(--custom-cursor, grab); + position: absolute; top: -0.75rem; left: -0.75rem; + width: 1.5rem; height: 1.5rem; border: 0.125rem solid var(--color-white); border-radius: 0.75rem; - cursor: var(--custom-cursor, grab); } .hue-picker .handle { @@ -44,8 +48,8 @@ } .tools { - margin-bottom: 0.625rem; display: flex; + margin-bottom: 0.625rem; .input-group { margin-bottom: 0; @@ -68,9 +72,9 @@ .predefined-colors { display: grid; - grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; grid-gap: 0.0625rem; + grid-template-columns: repeat(3, 1fr); @include mixins.side-panel-section; } @@ -87,11 +91,13 @@ // A hack to make a square &:before { - display: block; + pointer-events: none; content: ""; + + display: block; + width: 100%; padding-top: 100%; - pointer-events: none; } } } diff --git a/src/components/left/settings/SettingsPrivacyPublicPhoto.module.scss b/src/components/left/settings/SettingsPrivacyPublicPhoto.module.scss index c28ee8004..f3a6065ac 100644 --- a/src/components/left/settings/SettingsPrivacyPublicPhoto.module.scss +++ b/src/components/left/settings/SettingsPrivacyPublicPhoto.module.scss @@ -1,4 +1,4 @@ .fallback-photo { - margin-right: 2rem; transform: scale(1.25); + margin-right: 2rem; } diff --git a/src/components/left/settings/WallpaperTile.scss b/src/components/left/settings/WallpaperTile.scss index a971a7e00..432f850e2 100644 --- a/src/components/left/settings/WallpaperTile.scss +++ b/src/components/left/settings/WallpaperTile.scss @@ -1,42 +1,49 @@ .WallpaperTile { - height: 0; - padding-bottom: 100%; cursor: var(--custom-cursor, pointer); position: relative; + height: 0; + padding-bottom: 100%; + + &::after { + content: ""; + + display: block; + + border: 2px solid var(--color-primary); + + opacity: 0; + + transition: opacity 0.15s ease; + } .media-inner, &::after { position: absolute; - left: 0; top: 0; + left: 0; + width: 100%; height: 100%; } .media-inner { - overflow: hidden; transform: scale(1); + overflow: hidden; transition: transform 0.15s ease; img, canvas { position: absolute; - left: 0; top: 0; + left: 0; + width: 100%; height: 100%; + object-fit: cover; } } - &::after { - content: ""; - display: block; - border: 2px solid var(--color-primary); - opacity: 0; - transition: opacity 0.15s ease; - } - &.selected { &::after { opacity: 1; @@ -48,9 +55,9 @@ } .spinner-container { - height: 100%; display: flex; align-items: center; justify-content: center; + height: 100%; } } diff --git a/src/components/left/settings/folders/SettingsFolders.scss b/src/components/left/settings/folders/SettingsFolders.scss index 59a86197a..21236d849 100644 --- a/src/components/left/settings/folders/SettingsFolders.scss +++ b/src/components/left/settings/folders/SettingsFolders.scss @@ -1,14 +1,15 @@ .settings-folders-recommended-item { - width: 100%; display: flex; + gap: 1rem; align-items: center; justify-content: space-between; - gap: 1rem; + + width: 100%; } .settings-folders-blocked-icon { - color: var(--color-text-secondary); margin-left: 0.25rem; + color: var(--color-text-secondary); } .settings-folders-list-item { @@ -22,24 +23,26 @@ width: 100%; .Avatar { - margin-left: -0.25rem; margin-right: 1.5rem; + margin-left: -0.25rem; } .title { display: flex; - justify-content: flex-start; align-items: center; + justify-content: flex-start; h3 { + overflow: hidden; + + margin: 0; + font-size: 1rem; font-weight: var(--font-weight-medium); line-height: 1.3125; - margin: 0; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; text-align: left; + text-overflow: ellipsis; + white-space: nowrap; } } @@ -68,22 +71,22 @@ color: var(--color-primary); .icon { - opacity: 1; color: inherit; + opacity: 1; } } &[dir="rtl"] { .Avatar { - margin-left: 1.5rem; margin-right: -0.25rem; + margin-left: 1.5rem; } } } .settings-item .ShowMoreButton { - margin: 0 -1rem; width: calc(100% + 2rem); + margin: 0 -1rem; padding-left: 1rem !important; } @@ -108,8 +111,8 @@ } .Picker { - height: 100%; + overflow: hidden; display: flex; flex-direction: column; - overflow: hidden; + height: 100%; } diff --git a/src/components/main/AppInactive.scss b/src/components/main/AppInactive.scss index 8c7fbbf8c..b9debdfc2 100644 --- a/src/components/main/AppInactive.scss +++ b/src/components/main/AppInactive.scss @@ -1,17 +1,20 @@ #AppInactive { - height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; + height: 100%; + .content { max-width: 28rem; margin: auto; padding: 1.5rem; - text-align: center; - background: var(--color-background); border-radius: var(--border-radius-default); + + text-align: center; + + background: var(--color-background); } .title { @@ -19,8 +22,8 @@ } .description { - color: var(--color-text-secondary); font-size: 0.875rem; + color: var(--color-text-secondary); } img { diff --git a/src/components/main/GameModal.scss b/src/components/main/GameModal.scss index 10118a545..8a949e188 100644 --- a/src/components/main/GameModal.scss +++ b/src/components/main/GameModal.scss @@ -1,12 +1,14 @@ .GameModal { .modal-dialog { + justify-content: center; + max-width: 80%; height: 100%; - justify-content: center; - background-color: transparent; - border: none; - box-shadow: none; margin: 0; + border: none; + + background-color: transparent; + box-shadow: none; } .modal-header { @@ -26,9 +28,9 @@ @media (max-width: 600px) { .modal-dialog { - background-color: var(--color-background); max-width: 100% !important; border-radius: 0; + background-color: var(--color-background); } .modal-header { diff --git a/src/components/main/LockScreen.module.scss b/src/components/main/LockScreen.module.scss index 8abe7b3a9..94d80c0b5 100644 --- a/src/components/main/LockScreen.module.scss +++ b/src/components/main/LockScreen.module.scss @@ -1,9 +1,9 @@ .container { position: fixed; - left: 0; top: 0; right: 0; bottom: 0; + left: 0; display: flex; align-items: center; @@ -11,14 +11,18 @@ } .wrapper { + z-index: 2; + display: inline-flex; flex-direction: column; - background: var(--color-background); - color: var(--color-text); + max-width: 20rem; padding: 1.5rem 1rem 0; border-radius: var(--border-radius-default); - z-index: 2; + + color: var(--color-text); + + background: var(--color-background); &[dir="rtl"] { text-align: right; diff --git a/src/components/main/Main.scss b/src/components/main/Main.scss index 2751945df..f01cdb497 100644 --- a/src/components/main/Main.scss +++ b/src/components/main/Main.scss @@ -1,7 +1,7 @@ #Main { + overflow: hidden; height: 100%; text-align: left; - overflow: hidden; @media (min-width: 1276px) { position: relative; @@ -31,12 +31,14 @@ --left-column-min-width: 16rem; --left-column-max-width: 26.5rem; + position: relative; + + overflow: hidden; + width: 33vw; min-width: var(--left-column-min-width); max-width: var(--left-column-max-width); height: 100%; - overflow: hidden; - position: relative; background-color: var(--color-background); @@ -45,37 +47,39 @@ } @media (min-width: 1276px) { - width: 25vw; --left-column-max-width: 33vw; + + width: 25vw; } @media (max-width: 925px) { position: fixed; - left: 0; top: 0; - height: calc(var(--vh, 1vh) * 100); - width: 26.5rem !important; - + left: 0; transform: translate3d(-5rem, 0, 0); + + width: 26.5rem !important; + height: calc(var(--vh, 1vh) * 100); + transition: transform var(--layer-transition); - body.no-page-transitions & { - transition: none; - } - &::after { + pointer-events: none; content: ''; - display: block; + position: absolute; - left: 0; + z-index: 1; top: 0; right: 0; bottom: 0; - background: black; + left: 0; + + display: block; + opacity: 0; + background: black; + transition: opacity var(--layer-transition); - z-index: 1; - pointer-events: none; body.no-page-transitions & { transition: none; @@ -97,6 +101,10 @@ } } + body.no-page-transitions & { + transition: none; + } + #Main.left-column-open & { transform: translate3d(0, 0, 0); } @@ -111,31 +119,32 @@ } @media (max-width: 600px) { - height: calc(var(--vh, 1vh) * 100); - max-width: none; --left-column-max-width: calc(100vw - env(safe-area-inset-left)); - transform: translate3d(-20vw, 0, 0); + left: env(safe-area-inset-left) !important; + transform: translate3d(-20vw, 0, 0); + width: calc(100vw - env(safe-area-inset-left)) !important; + max-width: none; + height: calc(var(--vh, 1vh) * 100); // Fix: when opening the SymbolMenu, the chat list flashes in the background body.is-symbol-menu-open &::before { content: ''; + position: absolute; - left: 0; - right: 0; - top: 0; - bottom: 0; - background: var(--color-background); z-index: 1; + top: 0; + right: 0; + bottom: 0; + left: 0; + + background: var(--color-background); } } } #RightColumn { - @media (max-width: 600px) { - height: calc(var(--vh, 1vh) * 100 + 1px); - } #Main.history-animation-disabled & { transition: none; @@ -144,6 +153,10 @@ transition: none; } } + + @media (max-width: 600px) { + height: calc(var(--vh, 1vh) * 100 + 1px); + } } #Main.history-animation-disabled .overlay-backdrop { @@ -153,15 +166,24 @@ #MiddleColumn { border-left: 1px solid var(--color-borders); - @media (max-width: 925px) { - max-width: none; - position: fixed; - left: 0; - top: 0; - bottom: 0; - right: 0; + #Main.history-animation-disabled & { + transition: none; + &:after { + transition: none; + } + } + + @media (max-width: 925px) { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; transform: translate3d(0, 0, 0); + + max-width: none; + transition: transform var(--layer-transition); body.no-page-transitions & { @@ -189,12 +211,4 @@ transform: translate3d(-20vw, 0, 0); } } - - #Main.history-animation-disabled & { - transition: none; - - &:after { - transition: none; - } - } } diff --git a/src/components/main/NewContactModal.scss b/src/components/main/NewContactModal.scss index 814bf6ae0..4765d1e0f 100644 --- a/src/components/main/NewContactModal.scss +++ b/src/components/main/NewContactModal.scss @@ -6,19 +6,19 @@ &__new-contact { display: flex; - @media (max-width: 500px) { - flex-direction: column; - } - &-fieldset { flex: 1; margin-inline-start: 1rem; @media (max-width: 500px) { - margin-inline-start: 0; margin-top: 1rem; + margin-inline-start: 0; } } + + @media (max-width: 500px) { + flex-direction: column; + } } &__profile { @@ -36,8 +36,8 @@ } &__phone-number { - font-size: 1.5rem; margin-bottom: 0; + font-size: 1.5rem; } &__help-text { diff --git a/src/components/main/premium/GiveawayModal.module.scss b/src/components/main/premium/GiveawayModal.module.scss index f4158e8fa..d79d10815 100644 --- a/src/components/main/premium/GiveawayModal.module.scss +++ b/src/components/main/premium/GiveawayModal.module.scss @@ -8,62 +8,67 @@ } .root :global(.modal-content) { - padding: 0; overflow: hidden; + padding: 0; } .root :global(.modal-dialog) { - height: min(calc(55vh + 41px + 193px), 90vh); - max-width: 26.25rem; overflow: hidden; + max-width: 26.25rem; + height: min(calc(55vh + 41px + 193px), 90vh); } .button { - font-weight: var(--font-weight-medium); - font-size: 1rem; height: 3rem; + font-size: 1rem; + font-weight: var(--font-weight-medium); } .main { - height: 100%; overflow-y: scroll; display: flex; flex-direction: column; align-items: center; + + height: 100%; } .logo { - margin: 1rem; width: 6.25rem; height: 6.25rem; min-height: 6.25rem; + margin: 1rem; } .header-text { + margin-inline: 0.5rem; font-size: 1.5rem; font-weight: var(--font-weight-medium); text-align: center; - margin-inline: 0.5rem; } .description { - text-align: center; - margin-inline: 2.5rem; margin-bottom: 2rem; + margin-inline: 2.5rem; + text-align: center; } .header { + position: absolute; z-index: 2; + top: 0; + left: 0; + display: flex; align-items: center; - border-bottom: 0.0625rem solid var(--color-borders); - position: absolute; + width: 100%; - left: 0; - top: 0; height: 3.5rem; padding: 0.5rem; + border-bottom: 0.0625rem solid var(--color-borders); + background: var(--color-background); + transition: 0.25s ease-out transform; } @@ -73,16 +78,16 @@ .close-button { position: absolute; + z-index: 3; top: 0.5rem; left: 0.5rem; - z-index: 3; } .premium-header-text { + unicode-bidi: plaintext; + margin: 0 0 0 3rem; font-size: 1.25rem; font-weight: var(--font-weight-medium); - margin: 0 0 0 3rem; - unicode-bidi: plaintext; } .primary-footer-text { @@ -90,10 +95,11 @@ } .section { - width: 100%; display: flex; flex-direction: column; gap: 0.5rem; + + width: 100%; padding: 0 0.375rem; border-top: 0.0625rem solid var(--color-borders); } @@ -104,13 +110,15 @@ .footer { position: absolute; - width: 100%; - background: var(--color-background); - border-top: 0.0625rem solid var(--color-borders); - left: 0; - bottom: 0; - padding: 1rem; z-index: 1; + bottom: 0; + left: 0; + + width: 100%; + padding: 1rem; + border-top: 0.0625rem solid var(--color-borders); + + background: var(--color-background); } .options { @@ -147,12 +155,13 @@ .status { display: flex; - align-items: center; gap: 0.8125rem; + align-items: center; justify-content: space-between; + width: 100%; - padding: 0 0.375rem 0 1rem; margin-bottom: 1.3125rem; + padding: 0 0.375rem 0 1rem; } .info { @@ -164,24 +173,27 @@ } .month { - color: var(--color-text-secondary); margin: 0; + color: var(--color-text-secondary); } .quantity { display: flex; - justify-content: space-between; align-items: center; + justify-content: space-between; } .floatingBadge { + position: relative; + z-index: 1; + display: flex; align-items: center; justify-content: center; + color: var(--color-links); + background-color: rgba(78, 142, 229, 0.1); - position: relative; - z-index: 1; } .floatingBadgeColor { @@ -194,15 +206,15 @@ } .floatingBadgeButtonColor { + margin-left: 0.5rem; padding: 0.25rem 0.375rem 0.25rem 0.1875rem; border-radius: 0.375rem; background-color: white; - margin-left: 0.5rem; } .floatingBadgeIcon { - font-size: 1.125rem; margin-right: 0.1875rem; + font-size: 1.125rem; } .floatingBadgeValue { @@ -221,19 +233,20 @@ } .dateButton { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 1rem; padding-right: 1.1875rem; - display: flex; padding-left: 1rem; - justify-content: space-between; - align-items: center; } .title { - color: var(--color-text); - font-size: 1rem; - text-transform: initial; margin: 0; + font-size: 1rem; + color: var(--color-text); + text-transform: initial; } .checkboxSection { @@ -250,8 +263,8 @@ .prizesInput { flex-grow: 1; - margin-left: 1rem; margin-bottom: 0; + margin-left: 1rem; } .subLabelClassName { @@ -269,14 +282,14 @@ } .addChannel { - margin-inline-end: 1.375rem !important; margin-inline-start: 0.3125rem !important; + margin-inline-end: 1.375rem !important; } .removeChannel { + padding: 0.5rem; font-size: 1.5rem; color: var(--color-text-secondary); - padding: 0.5rem; } .starOptions { @@ -286,8 +299,8 @@ @media (max-width: 600px) { .root :global(.modal-dialog) { width: 100%; - height: 100%; max-width: 100% !important; + height: 100%; border-radius: 0; } diff --git a/src/components/main/premium/GiveawayTypeOption.module.scss b/src/components/main/premium/GiveawayTypeOption.module.scss index 366f88404..5a7f928e1 100644 --- a/src/components/main/premium/GiveawayTypeOption.module.scss +++ b/src/components/main/premium/GiveawayTypeOption.module.scss @@ -1,11 +1,13 @@ .wrapper { + cursor: var(--custom-cursor, pointer); + position: relative; + display: block; + + margin-bottom: 0; padding-inline: 3.5rem 1rem; border: none; - margin-bottom: 0; - - cursor: var(--custom-cursor, pointer); line-height: 1.5rem; } @@ -33,37 +35,45 @@ .content { display: flex; + gap: 1.25rem; align-items: center; padding: 0.5rem 0; - gap: 1.25rem; &::before, &::after { content: ""; - display: block; + position: absolute; - inset-inline-start: 1rem; top: 50%; + inset-inline-start: 1rem; + transform: translateY(-50%); + + display: block; + width: 1.25rem; height: 1.25rem; - transform: translateY(-50%); } &::before { border: 2px solid var(--color-borders-input); border-radius: 50%; - background-color: var(--color-background); + opacity: 1; + background-color: var(--color-background); + transition: border-color 0.1s ease, opacity 0.1s ease; } &::after { inset-inline-start: 1.3125rem; + width: 0.625rem; height: 0.625rem; border-radius: 50%; - background: var(--color-primary); + opacity: 0; + background: var(--color-primary); + transition: opacity 0.1s ease; } } @@ -76,14 +86,13 @@ } .title { - color: var(--color-text); margin-bottom: 0; + color: var(--color-text); } .link { display: flex; align-items: center; - color: var(--color-links); } diff --git a/src/components/main/premium/PremiumFeatureItem.module.scss b/src/components/main/premium/PremiumFeatureItem.module.scss index ff312dcfa..2943e4b48 100644 --- a/src/components/main/premium/PremiumFeatureItem.module.scss +++ b/src/components/main/premium/PremiumFeatureItem.module.scss @@ -15,24 +15,28 @@ .description { font-size: 0.875rem; + line-height: 1.25rem; color: var(--color-text-secondary); white-space: pre-wrap; - line-height: 1.25rem; } .icon { + align-self: center; + min-width: 2rem; height: 2rem; - align-self: center; - border-radius: 0.625rem; - background: var(--item-color, #000); margin-left: 1rem; + border-radius: 0.625rem; + + background: var(--item-color, #000); } .font-icon { - font-size: 2rem !important; align-self: center; + margin-right: 0 !important; margin-left: 1rem; + + font-size: 2rem !important; color: var(--item-color, #000) !important; } diff --git a/src/components/main/premium/PremiumFeatureModal.module.scss b/src/components/main/premium/PremiumFeatureModal.module.scss index 3fa0f4a23..bac132c97 100644 --- a/src/components/main/premium/PremiumFeatureModal.module.scss +++ b/src/components/main/premium/PremiumFeatureModal.module.scss @@ -3,22 +3,22 @@ } .button { - font-weight: var(--font-weight-semibold); - font-size: 1rem; height: 3rem; + font-size: 1rem; + font-weight: var(--font-weight-semibold); } .button-content { - height: 100%; display: flex; - justify-content: center; align-items: center; + justify-content: center; + height: 100%; } .back-button { - margin: -0.5rem; position: absolute; z-index: 2; + margin: -0.5rem; } .white-back-button { @@ -26,12 +26,14 @@ } .content { - margin: 0 -1rem; - margin-top: -1rem; + scroll-snap-type: x mandatory; + overflow-x: scroll; display: flex; - scroll-snap-type: x mandatory; + width: calc(100% + 2rem); + margin: 0 -1rem; + margin-top: -1rem; } .frame { @@ -44,11 +46,14 @@ } .slide { - width: 100%; - flex: none; - position: relative; scroll-snap-align: center; scroll-snap-stop: always; + + position: relative; + + flex: none; + + width: 100%; margin-bottom: 7.5rem; } @@ -58,9 +63,9 @@ .limits-content { overflow: auto; - padding: 1rem; - margin-top: 3.6875rem; height: calc(var(--vh) * 55 + 41px); + margin-top: 3.6875rem; + padding: 1rem; } .stories { @@ -68,15 +73,19 @@ } .header { - padding-left: 4rem; - font-size: 1.25rem; - font-weight: var(--font-weight-medium); + position: absolute; + + width: 100%; padding-top: 0.875rem; padding-bottom: 0.875rem; + padding-left: 4rem; border-bottom: 0.0625rem solid var(--color-borders); - position: absolute; + + font-size: 1.25rem; + font-weight: var(--font-weight-medium); + background: var(--color-background); - width: 100%; + transition: 0.1s ease-out border-bottom-color; } @@ -86,13 +95,15 @@ .preview { position: absolute; - margin: 0 -1rem; - margin-top: -1rem; - background: var(--premium-feature-background); + aspect-ratio: 1; width: 100%; - border-top-right-radius: var(--border-radius-default); + margin: 0 -1rem; + margin-top: -1rem; border-top-left-radius: var(--border-radius-default); + border-top-right-radius: var(--border-radius-default); + + background: var(--premium-feature-background); @supports not (aspect-ratio: 1) { height: 0; @@ -101,30 +112,35 @@ } .title { + margin-top: 1rem; + font-size: 1.25rem; font-weight: var(--font-weight-medium); - text-align: center; color: var(--color-text); - margin-top: 1rem; + text-align: center; } .description { + padding: 0 5%; + font-size: 1rem; font-weight: var(--font-weight-normal); line-height: 1.375rem; - text-align: center; color: var(--color-text-secondary); - padding: 0 5%; + text-align: center; } .footer { - border-top: 0.0625rem solid var(--color-borders); position: absolute; bottom: 0; left: 0; - padding: 0 1rem 1rem 1rem; + width: 100%; + padding: 0 1rem 1rem 1rem; + border-top: 0.0625rem solid var(--color-borders); + background: var(--color-background); + transition: 0.1s ease-out border-top-color; } diff --git a/src/components/main/premium/PremiumMainModal.module.scss b/src/components/main/premium/PremiumMainModal.module.scss index 22a65379b..33f4dcc8b 100644 --- a/src/components/main/premium/PremiumMainModal.module.scss +++ b/src/components/main/premium/PremiumMainModal.module.scss @@ -26,52 +26,53 @@ } .button { - font-weight: var(--font-weight-semibold); - font-size: 1rem; height: 3rem; + font-size: 1rem; + font-weight: var(--font-weight-semibold); } .main { - padding: 1rem 0.5rem; - height: 100%; overflow-y: scroll; display: flex; flex-direction: column; align-items: center; + height: 100%; + padding: 1rem 0.5rem; + @include mixins.adapt-padding-to-scrollbar(0.5rem); } .logo { - margin: 1rem; width: 6.25rem; height: 6.25rem; min-height: 6.25rem; + margin: 1rem; } .status-emoji { --custom-emoji-size: 8rem; - margin: 1rem; cursor: var(--custom-cursor, pointer); + margin: 1rem; } .header-text { + margin-inline: 0.5rem; font-size: 1.5rem; font-weight: var(--font-weight-medium); text-align: center; - margin-inline: 0.5rem; } .description { - text-align: center; - margin-inline: 0.5rem; margin-bottom: 2rem; + margin-inline: 0.5rem; + text-align: center; } .list { - margin-bottom: 5rem; width: 100%; + margin-bottom: 5rem; } .no-button { @@ -79,17 +80,21 @@ } .header { + position: absolute; z-index: 2; + top: 0; + left: 0; + display: flex; align-items: center; - border-bottom: 0.0625rem solid var(--color-borders); - position: absolute; + width: 100%; - left: 0; - top: 0; height: 3.5rem; padding: 0.5rem; + border-bottom: 0.0625rem solid var(--color-borders); + background: var(--color-background); + transition: 0.25s ease-out transform; } @@ -99,23 +104,23 @@ .close-button { position: absolute; + z-index: 3; top: 0.5rem; left: 0.5rem; - z-index: 3; } .premium-header-text { + unicode-bidi: plaintext; + margin: 0 0 0 3rem; font-size: 1.25rem; font-weight: var(--font-weight-medium); - margin: 0 0 0 3rem; - unicode-bidi: plaintext; } .footer-text { - color: var(--color-text-secondary); + unicode-bidi: plaintext; margin: 0.5rem; font-size: 0.875rem; - unicode-bidi: plaintext; + color: var(--color-text-secondary); } .primary-footer-text { @@ -124,12 +129,14 @@ .footer { position: absolute; - width: 100%; - background: var(--color-background); - border-top: 0.0625rem solid var(--color-borders); - left: 0; bottom: 0; + left: 0; + + width: 100%; padding: 1rem; + border-top: 0.0625rem solid var(--color-borders); + + background: var(--color-background); } .stickerSetText { @@ -139,8 +146,8 @@ .stickerSetLink { --custom-emoji-size: 1.5rem; - color: var(--color-links); cursor: var(--custom-cursor, pointer); + color: var(--color-links); &:hover { text-decoration: underline; @@ -148,15 +155,15 @@ } .stickerSetLinkIcon { - vertical-align: middle; margin-inline-end: 0.25rem; + vertical-align: middle; } @media (max-width: 600px) { .root :global(.modal-dialog) { width: 100%; - height: 100%; max-width: 100% !important; + height: 100%; border-radius: 0; } diff --git a/src/components/main/premium/PremiumSubscriptionOption.module.scss b/src/components/main/premium/PremiumSubscriptionOption.module.scss index ba058fabd..f4fe68334 100644 --- a/src/components/main/premium/PremiumSubscriptionOption.module.scss +++ b/src/components/main/premium/PremiumSubscriptionOption.module.scss @@ -1,24 +1,29 @@ .wrapper { - position: relative; - display: block; - padding-inline: 4.5rem 1rem; - margin-bottom: 1.5rem; - border-radius: var(--border-radius-default); - background: var(--color-background); - box-shadow: 0 0 0 0.0625rem var(--color-borders-input); - cursor: var(--custom-cursor, pointer); + position: relative; + + display: block; + + margin-bottom: 1.5rem; + padding-inline: 4.5rem 1rem; + border-radius: var(--border-radius-default); + line-height: 1.5rem; + + background: var(--color-background); + box-shadow: 0 0 0 0.0625rem var(--color-borders-input); } .giveawayWrapper { - position: relative; - display: block; - padding-inline: 3.5rem 1rem; - cursor: var(--custom-cursor, pointer); + position: relative; + + display: block; + + padding-inline: 3.5rem 1rem; + line-height: 1.5rem; } @@ -46,37 +51,46 @@ display: grid; grid-template-areas: "left_top right" "left_bottom right"; grid-template-columns: 1fr auto; - justify-content: start; - padding: 0.5rem 0; gap: 0.25rem; + justify-content: start; + + padding: 0.5rem 0; &::before, &::after { content: ""; - display: block; + position: absolute; - inset-inline-start: 1rem; top: 50%; + inset-inline-start: 1rem; + transform: translateY(-50%); + + display: block; + width: 1.25rem; height: 1.25rem; - transform: translateY(-50%); } &::before { border: 2px solid var(--color-borders-input); border-radius: 50%; - background-color: var(--color-background); + opacity: 1; + background-color: var(--color-background); + transition: border-color 0.1s ease, opacity 0.1s ease; } &::after { inset-inline-start: 1.3125rem; + width: 0.625rem; height: 0.625rem; border-radius: 50%; - background: var(--color-primary); + opacity: 0; + background: var(--color-primary); + transition: opacity 0.1s ease; } } @@ -87,10 +101,11 @@ } .perMonth { - grid-area: left_bottom; - align-self: end; display: flex; + grid-area: left_bottom; flex-direction: row-reverse; + align-self: end; + margin-inline-end: auto; font-size: 0.875rem; @@ -105,23 +120,28 @@ grid-area: right; align-self: center; justify-self: end; + padding-inline-start: 1.5rem; + color: var(--color-text-secondary); } .discount { - color: var(--color-white); - background: var(--color-primary); - border-radius: var(--border-radius-default-small); - padding: 0 0.5rem; unicode-bidi: plaintext; - margin-inline-end: 0.5rem; align-self: baseline; + + margin-inline-end: 0.5rem; + padding: 0 0.5rem; + border-radius: var(--border-radius-default-small); + + color: var(--color-white); + + background: var(--color-primary); } .giveawayDiscount { + padding: 0.1875rem; + border-radius: 0.375rem; font-size: 0.8125rem; font-weight: var(--font-weight-medium); - border-radius: 0.375rem; - padding: 0.1875rem; } diff --git a/src/components/main/premium/StarsGiftingPickerModal.module.scss b/src/components/main/premium/StarsGiftingPickerModal.module.scss index 4a9db49e5..a2e49ab8b 100644 --- a/src/components/main/premium/StarsGiftingPickerModal.module.scss +++ b/src/components/main/premium/StarsGiftingPickerModal.module.scss @@ -21,17 +21,19 @@ } .filter { - padding: 0.375rem 1rem 0.25rem 0.75rem; - margin-bottom: 0.625rem; - background-color: var(--color-background); - box-shadow: inset 0 -0.0625rem 0 0 var(--color-background-secondary-accent); - border-bottom: 0.625rem solid var(--color-background-secondary); + overflow-y: auto; display: flex; flex-flow: row wrap; - align-items: center; flex-shrink: 0; - overflow-y: auto; + align-items: center; + max-height: 20rem; + margin-bottom: 0.625rem; + padding: 0.375rem 1rem 0.25rem 0.75rem; + border-bottom: 0.625rem solid var(--color-background-secondary); + + background-color: var(--color-background); + box-shadow: inset 0 -0.0625rem 0 0 var(--color-background-secondary-accent); } .title { @@ -39,12 +41,14 @@ } .buttons { - width: 100%; - background: var(--color-background); position: absolute; - bottom: 0; z-index: 1; + bottom: 0; + + width: 100%; padding: 0.75rem; + + background: var(--color-background); } .picker { @@ -54,9 +58,10 @@ .avatars { display: flex; flex-direction: row; - justify-content: center; - align-items: center; gap: 1rem; + align-items: center; + justify-content: center; + margin: 1rem; } @@ -66,9 +71,9 @@ .description, .premiumFeatures { - text-align: center; - margin: 0 auto 2rem; max-width: 25rem; + margin: 0 auto 2rem; + text-align: center; } .premiumFeatures { diff --git a/src/components/main/premium/common/PremiumLimitPreview.module.scss b/src/components/main/premium/common/PremiumLimitPreview.module.scss index 0645842f1..cc8cbd865 100644 --- a/src/components/main/premium/common/PremiumLimitPreview.module.scss +++ b/src/components/main/premium/common/PremiumLimitPreview.module.scss @@ -5,16 +5,18 @@ } .title { + unicode-bidi: plaintext; + margin-left: 0.75rem; font-weight: var(--font-weight-medium); color: var(--color-text); - margin-left: 0.75rem; - unicode-bidi: plaintext; } .description { - font-size: 14px; - color: var(--color-text-secondary); + unicode-bidi: plaintext; + margin-bottom: 0.5rem; margin-left: 0.75rem; - unicode-bidi: plaintext; + + font-size: 14px; + color: var(--color-text-secondary); } diff --git a/src/components/main/premium/common/PremiumLimitReachedModal.module.scss b/src/components/main/premium/common/PremiumLimitReachedModal.module.scss index b18f8c04f..b0f735b14 100644 --- a/src/components/main/premium/common/PremiumLimitReachedModal.module.scss +++ b/src/components/main/premium/common/PremiumLimitReachedModal.module.scss @@ -1,7 +1,7 @@ .root :global(.modal-content) { - align-items: flex-start; display: flex; flex-direction: column; + align-items: flex-start; } .root :global(.modal-dialog) { @@ -9,19 +9,21 @@ } .limit-compare { - margin: 2.5rem 0 1.25rem 0; width: 100%; + margin: 2.5rem 0 1.25rem 0; } .limit-badge { - background: var(--color-primary); - padding: 0.75rem 1.25rem; - border-radius: 1.5rem; - margin: 1.5rem 0 1.25rem 0; - align-self: center; display: flex; align-items: center; + align-self: center; justify-content: center; + + margin: 1.5rem 0 1.25rem 0; + padding: 0.75rem 1.25rem; + border-radius: 1.5rem; + + background: var(--color-primary); } .limit-value { @@ -36,17 +38,18 @@ } .dialog-buttons { - width: 100%; display: flex; + gap: 1rem; align-items: flex-end; justify-content: flex-end; + + width: 100%; margin-top: 1rem; - gap: 1rem; } .x2 { - font-size: 1.25rem; margin-inline-start: 0.25rem; + font-size: 1.25rem; } .button-icon { diff --git a/src/components/main/premium/common/PremiumLimitsCompare.module.scss b/src/components/main/premium/common/PremiumLimitsCompare.module.scss index 01db83f39..39e393fab 100644 --- a/src/components/main/premium/common/PremiumLimitsCompare.module.scss +++ b/src/components/main/premium/common/PremiumLimitsCompare.module.scss @@ -1,20 +1,24 @@ .root { - display: flex; position: relative; + display: flex; } .floating-badge { - display: flex; - align-items: center; - justify-content: center; - color: #ffffff; - padding: 0.25rem 0.75rem; - border-radius: 1rem; - background: #7E85FF; position: absolute; top: -1.5rem; left: 50%; transform: translate(-50%, -20px); + + display: flex; + align-items: center; + justify-content: center; + + padding: 0.25rem 0.75rem; + border-radius: 1rem; + + color: #ffffff; + + background: #7E85FF; } .floating-badge-triangle { @@ -55,15 +59,15 @@ } .line { - padding: 0.375rem 0.75rem; - flex-basis: 50%; display: flex; + flex-basis: 50%; + padding: 0.375rem 0.75rem; } .left { - background: #F1F3F5; border-top-left-radius: 10px; border-bottom-left-radius: 10px; + background: #F1F3F5; } .right { diff --git a/src/components/main/premium/previews/PremiumFeaturePreviewStickers.module.scss b/src/components/main/premium/previews/PremiumFeaturePreviewStickers.module.scss index 3ca811acd..542c32e66 100644 --- a/src/components/main/premium/previews/PremiumFeaturePreviewStickers.module.scss +++ b/src/components/main/premium/previews/PremiumFeaturePreviewStickers.module.scss @@ -1,19 +1,22 @@ .root { + position: relative; + + overflow: hidden; display: flex; align-items: center; justify-content: center; + height: 100%; - overflow: hidden; - position: relative; } .sticker { --x: 0px; --y: 0px; - transition: 0.25s cubic-bezier(0.5, 0.45, 0.28, 1.4) transform, 0.25s ease-in-out opacity; + position: absolute; transform: translate(var(--x), var(--y)) scale(var(--opacity)); opacity: var(--opacity); + transition: 0.25s cubic-bezier(0.5, 0.45, 0.28, 1.4) transform, 0.25s ease-in-out opacity; canvas { width: 100% !important; diff --git a/src/components/main/premium/previews/PremiumFeaturePreviewStories.module.scss b/src/components/main/premium/previews/PremiumFeaturePreviewStories.module.scss index 360b0a576..186bef6d3 100644 --- a/src/components/main/premium/previews/PremiumFeaturePreviewStories.module.scss +++ b/src/components/main/premium/previews/PremiumFeaturePreviewStories.module.scss @@ -1,13 +1,13 @@ .root { display: flex; flex-direction: column; - padding-top: 1.5rem; height: 100%; + padding-top: 1.5rem; } .header { - align-self: center; position: relative; + align-self: center; } .circle { @@ -18,25 +18,29 @@ } .title { - font-size: 1.25rem; - font-weight: var(--font-weight-medium); align-self: center; + margin-top: 1rem; margin-bottom: 1rem; + + font-size: 1.25rem; + font-weight: var(--font-weight-medium); } .features { - min-height: 5rem; overflow-y: scroll; - border-top: 0.0625rem solid transparent; - transition: 0.2s ease-in-out border-color; + + min-height: 5rem; margin-inline: 1rem; + border-top: 0.0625rem solid transparent; + + transition: 0.2s ease-in-out border-color; } .mobile { padding: 1rem 0rem 1rem 1rem; - color: var(--color-text-secondary); font-size: 0.875rem; + color: var(--color-text-secondary); } .scrolled { diff --git a/src/components/main/premium/previews/PremiumFeaturePreviewVideo.module.scss b/src/components/main/premium/previews/PremiumFeaturePreviewVideo.module.scss index 76486cce2..00c3f094a 100644 --- a/src/components/main/premium/previews/PremiumFeaturePreviewVideo.module.scss +++ b/src/components/main/premium/previews/PremiumFeaturePreviewVideo.module.scss @@ -1,9 +1,11 @@ .root { + position: relative; + + overflow: hidden; display: flex; justify-content: center; + aspect-ratio: 1; - overflow: hidden; - position: relative; @supports not (aspect-ratio: 1) { height: 0; @@ -12,16 +14,13 @@ } .wrapper { - width: 70%; - position: absolute; - display: flex; - justify-content: center; - align-items: center; --y-static: -40%; --y-dynamic: -10%; --scroll-progress-converted: var(--scroll-progress, 0); --abs-scroll-progress-converted: var(--abs-scroll-progress, 0); + + position: absolute; transform: perspective(200px) translate3d( @@ -30,6 +29,13 @@ 0 ) rotateY(calc(var(--scroll-progress-converted) * 40deg)); + + display: flex; + align-items: center; + justify-content: center; + + width: 70%; + opacity: calc(1 - var(--abs-scroll-progress-converted) * 0.4); @supports not (aspect-ratio: 1) { @@ -51,14 +57,16 @@ position: relative; z-index: 1; width: 100%; + -webkit-user-drag: none; } .video { - width: 100%; position: absolute; - bottom: 0; z-index: 0; + bottom: 0; + + width: 100%; padding: 4%; border-radius: 0 0 10% 10%; } diff --git a/src/components/main/visualEffects/ConfettiContainer.module.scss b/src/components/main/visualEffects/ConfettiContainer.module.scss index 6bfb8e062..f101e963c 100644 --- a/src/components/main/visualEffects/ConfettiContainer.module.scss +++ b/src/components/main/visualEffects/ConfettiContainer.module.scss @@ -1,11 +1,12 @@ .root { + pointer-events: none; + position: fixed; + z-index: var(--z-confetti); top: 0; - left: 0; right: 0; bottom: 0; - z-index: var(--z-confetti); + left: 0; - pointer-events: none; overflow: hidden; } diff --git a/src/components/main/visualEffects/SnapEffectContainer.module.scss b/src/components/main/visualEffects/SnapEffectContainer.module.scss index 5d1b41643..d452c2ad9 100644 --- a/src/components/main/visualEffects/SnapEffectContainer.module.scss +++ b/src/components/main/visualEffects/SnapEffectContainer.module.scss @@ -1,17 +1,15 @@ .root { - position: fixed; - inset: 0; pointer-events: none; - + position: fixed; z-index: var(--z-overlay-effects); + inset: 0; } .ghost { position: absolute; - overflow: visible !important; - - animation: scale 1s ease-in forwards !important; transform-origin: bottom; + overflow: visible !important; + animation: scale 1s ease-in forwards !important; } .elementContainer { diff --git a/src/components/main/visualEffects/WaveContainer.module.scss b/src/components/main/visualEffects/WaveContainer.module.scss index 01434ce45..b3e2c08cd 100644 --- a/src/components/main/visualEffects/WaveContainer.module.scss +++ b/src/components/main/visualEffects/WaveContainer.module.scss @@ -1,9 +1,8 @@ .root { - position: fixed; - inset: 0; pointer-events: none; - + position: fixed; z-index: var(--z-overlay-effects); + inset: 0; } .wave { @@ -12,12 +11,11 @@ --wave-pos-left: 0%; position: absolute; - top: var(--wave-pos-top); left: var(--wave-pos-left); - width: var(--wave-width); - aspect-ratio: 1 / 1; + aspect-ratio: 1 / 1; + width: var(--wave-width); border-radius: 50%; background-image: @@ -27,8 +25,8 @@ #FFFFFF06 60%, transparent 68% ); - backdrop-filter: url(#wave-filter); + animation: waveGrow 1.5s ease-in; } diff --git a/src/components/mediaViewer/MediaViewer.scss b/src/components/mediaViewer/MediaViewer.scss index 0855dea70..bff7caa35 100644 --- a/src/components/mediaViewer/MediaViewer.scss +++ b/src/components/mediaViewer/MediaViewer.scss @@ -1,29 +1,28 @@ #MediaViewer { position: fixed; + z-index: var(--z-media-viewer); top: 0; left: 0; - width: 100vw; - height: 100%; - background: rgba(0, 0, 0, 0.9); - color: #fff; - z-index: var(--z-media-viewer); display: grid; - grid-template-columns: auto; - grid-template-rows: auto 1fr; grid-column-gap: 0; grid-row-gap: 0; - justify-items: stretch; + grid-template-columns: auto; + grid-template-rows: auto 1fr; align-items: center; + justify-items: stretch; - @media (max-width: 600px) { - background: rgba(0, 0, 0, 1); - } + width: 100vw; + height: 100%; + + color: #fff; + + background: rgba(0, 0, 0, 0.9); // Potential perf improvement &:not(.shown) { - display: block !important; transform: scale(0); + display: block !important; } body.ghost-animating & { @@ -58,37 +57,33 @@ .MediaViewerSlide { position: fixed; + z-index: 1; top: 0; left: 0; + width: 100vw; height: 100vh; padding: 0; - z-index: 1; } } .media-viewer-head { - display: flex; - grid-area: 1 / 1 / 2 / -2; position: relative; z-index: var(--z-media-viewer-head); + + display: flex; + grid-area: 1 / 1 / 2 / -2; + min-width: 0; - background: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0) 100%); padding: 0.5rem max(1.25rem, env(safe-area-inset-left)); + background: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0) 100%); + & > .Transition { width: 100%; min-width: 0; } - @media (max-width: 600px) { - padding: 0.5rem max(0.5rem, env(safe-area-inset-left)); - - .media-viewer-close { - margin-right: 1.5rem; - } - } - body.is-electron.is-macos & { -webkit-app-region: drag; } @@ -96,6 +91,14 @@ body.is-electron.is-macos #Main:not(.is-fullscreen) & { padding-left: 5rem; } + + @media (max-width: 600px) { + padding: 0.5rem max(0.5rem, env(safe-area-inset-left)); + + .media-viewer-close { + margin-right: 1.5rem; + } + } } & > .Transition, @@ -106,35 +109,38 @@ & > .Transition, & > .pan-wrapper .Transition { position: relative; - justify-self: center; - text-align: center; - width: 100%; - height: 100%; + + overflow: hidden; display: flex; align-items: center; - overflow: hidden; + justify-self: center; + + width: 100%; + height: 100%; + + text-align: center; } .navigation { + cursor: var(--custom-cursor, pointer); + position: fixed; + z-index: 1; top: 4rem; - width: 10vw; bottom: 0; - border: none; - padding: 0; + + width: 10vw; margin: 0; + padding: 0; + border: none; + appearance: none; + opacity: 0; background: transparent no-repeat; background-size: 1.25rem; - opacity: 0; - transition: opacity 0.15s; outline: none; - cursor: var(--custom-cursor, pointer); - z-index: 1; - @media (max-width: 600px) { - width: 20vw; - } + transition: opacity 0.15s; &:hover, .is-touch-env & { @@ -142,14 +148,13 @@ } &.prev { + left: env(safe-area-inset-left); background-image: url("../../assets/media_navigation_previous.svg"); background-position: 1.25rem calc(50% - 2rem); - left: env(safe-area-inset-left); - &[dir="rtl"] { - left: auto; right: env(safe-area-inset-right); + left: auto; transform: scaleX(-1); } } @@ -173,31 +178,44 @@ background-position-y: center; @media (max-width: 600px) { + pointer-events: none; opacity: 0; transition: opacity 0.15s ease-in; - pointer-events: none; .video-controls-visible & { - opacity: 1; pointer-events: auto; + opacity: 1; } } } + + @media (max-width: 600px) { + width: 20vw; + } } .is-protected { - user-select: none; - -webkit-touch-callout: none; pointer-events: none; + user-select: none; + + -webkit-touch-callout: none; + } + + @media (max-width: 600px) { + background: rgba(0, 0, 0, 1); } } .ghost { + will-change: transform, opacity; + position: absolute; z-index: var(--z-media-viewer); - will-change: transform, opacity; + overflow: hidden; + border-radius: 0; + transition: transform 0.2s ease, opacity 0.2s ease; &.transition-circle { @@ -218,10 +236,12 @@ img, video { + -webkit-user-select: none; + user-select: none; + width: 100%; height: 100%; - user-select: none; - -webkit-user-select: none; + object-fit: cover; } } diff --git a/src/components/mediaViewer/MediaViewerContent.scss b/src/components/mediaViewer/MediaViewerContent.scss index b125e0f26..dea766b56 100644 --- a/src/components/mediaViewer/MediaViewerContent.scss +++ b/src/components/mediaViewer/MediaViewerContent.scss @@ -1,17 +1,19 @@ .MediaViewerContent { position: absolute; + z-index: 1; top: 0; - left: 0; right: 0; bottom: 0; + left: 0; transform: none; + overflow: hidden; - z-index: 1; - padding: 3.25rem 0; - height: 100%; display: inline-flex; - justify-content: center; align-items: center; + justify-content: center; + + height: 100%; + padding: 3.25rem 0; .thumbnail { position: relative; diff --git a/src/components/mediaViewer/MediaViewerFooter.scss b/src/components/mediaViewer/MediaViewerFooter.scss index c58a7b1f7..653a7e5f8 100644 --- a/src/components/mediaViewer/MediaViewerFooter.scss +++ b/src/components/mediaViewer/MediaViewerFooter.scss @@ -1,30 +1,28 @@ .MediaViewerFooter { position: absolute; bottom: 0; - padding: 1rem 0; - width: 100%; - transition: opacity 0.15s; - @media (max-height: 640px) { - padding: 0.5rem 0 0; - } + width: 100%; + padding: 1rem 0; + + transition: opacity 0.15s; &.mobile { background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%); &.is-for-video { - opacity: 0; pointer-events: none; padding-bottom: 5rem; + opacity: 0; .video-controls-visible &:not(.is-hidden) { - opacity: 1; pointer-events: auto; + opacity: 1; } } .media-viewer-footer-content { - opacity: 1; z-index: 1; + opacity: 1; } .media-text.multiline::before { display: none; @@ -37,11 +35,15 @@ } .media-viewer-footer-content { + cursor: var(--custom-cursor, pointer); + position: relative; + max-width: var(--messages-container-width); margin: auto; - cursor: var(--custom-cursor, pointer); + opacity: 0.5; + transition: opacity 0.15s; &:hover { @@ -54,18 +56,16 @@ } .media-text { - margin-bottom: 0; overflow: auto; - padding: 0 0.5rem; - text-align: center; - color: rgba(255, 255, 255, 0.9); - font-size: 0.9375rem; - letter-spacing: 0.025rem; - max-height: 4.25rem; - @media (max-height: 640px) { - max-height: 2.75rem; - } + max-height: 4.25rem; + margin-bottom: 0; + padding: 0 0.5rem; + + font-size: 0.9375rem; + color: rgba(255, 255, 255, 0.9); + text-align: center; + letter-spacing: 0.025rem; .emoji:not(.custom-emoji) { width: 0.9375rem; @@ -76,16 +76,23 @@ &.multiline { &::before { content: ""; + position: absolute; - left: -0.75rem; - right: -0.75rem; - top: -0.25rem; - bottom: -0.25rem; - background: rgba(0, 0, 0, 0.75); - border-radius: var(--border-radius-default); z-index: var(--z-below); + top: -0.25rem; + right: -0.75rem; + bottom: -0.25rem; + left: -0.75rem; + + border-radius: var(--border-radius-default); + + background: rgba(0, 0, 0, 0.75); } } + + @media (max-height: 640px) { + max-height: 2.75rem; + } } a { @@ -99,8 +106,12 @@ .media-viewer-button { max-width: 20rem; - margin-top: 0.5rem; height: 2.8125rem; + margin-top: 0.5rem; border-radius: 0.6875rem; } + + @media (max-height: 640px) { + padding: 0.5rem 0 0; + } } diff --git a/src/components/mediaViewer/MediaViewerSlides.scss b/src/components/mediaViewer/MediaViewerSlides.scss index 2ea31047c..ae3b2b09b 100644 --- a/src/components/mediaViewer/MediaViewerSlides.scss +++ b/src/components/mediaViewer/MediaViewerSlides.scss @@ -1,34 +1,39 @@ .MediaViewerSlides { + -ms-touch-action: none; + touch-action: none; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + + overflow: hidden; display: flex; + + width: 100%; height: 100%; + min-height: -moz-available; /* stylelint-disable-next-line declaration-block-no-duplicate-properties */ max-height: 100vh; max-height: -webkit-fill-available; - - min-height: -moz-available; - width: 100%; - overflow: hidden; - -ms-touch-action: none; - touch-action: none; - top: 0; - left: 0; - right: 0; - bottom: 0; } .MediaViewerSlide { + touch-action: none; + position: absolute; + z-index: 0; top: 0; - left: 0; right: 0; bottom: 0; - height: 100%; - flex: 100% 0 0; - z-index: 0; - touch-action: none; + left: 0; transform-origin: 0 0; + flex: 100% 0 0; + + height: 100%; + &--active { z-index: 1; } diff --git a/src/components/mediaViewer/SeekLine.module.scss b/src/components/mediaViewer/SeekLine.module.scss index 59016f768..02ad1f657 100644 --- a/src/components/mediaViewer/SeekLine.module.scss +++ b/src/components/mediaViewer/SeekLine.module.scss @@ -1,12 +1,14 @@ .container { - position: absolute; - left: 1rem; - right: 1rem; - top: 1rem; - height: 1rem; touch-action: none; cursor: var(--custom-cursor, pointer); + position: absolute; + top: 1rem; + right: 1rem; + left: 1rem; + + height: 1rem; + :global(body.is-electron) & { cursor: auto; } @@ -14,18 +16,21 @@ .preview { position: absolute; - left: 0; z-index: 1; bottom: calc(100% + 0.5rem); - border-radius: 0.25rem; + left: 0; + overflow: hidden; + + border-radius: 0.25rem; + background: #000; } .previewCanvas { + display: block; width: 100%; height: 100%; - display: block; } body:global(.is-touch-env) .preview { @@ -34,58 +39,71 @@ body:global(.is-touch-env) .preview { .previewTime { position: absolute; - left: 0; right: 0; bottom: 0; + left: 0; + text-align: center; } .previewTimeText { + padding: 0.25rem 0.5rem; border-top-left-radius: 0.125rem; border-top-right-radius: 0.125rem; - background: rgba(0, 0, 0, 0.5); + color: rgba(255, 255, 255, 0.8); - padding: 0.25rem 0.5rem; + + background: rgba(0, 0, 0, 0.5); } .track { position: absolute; top: 50%; - height: 5px; - transform: translateY(-50%); - background-color: rgba(255, 255, 255, 0.16); - border-radius: var(--border-radius-default); - left: -0.25rem; right: -0.25rem; + left: -0.25rem; + transform: translateY(-50%); + + height: 5px; + border-radius: var(--border-radius-default); + + background-color: rgba(255, 255, 255, 0.16); } .buffered { position: absolute; - background-color: rgba(255, 255, 255, 0.5); top: 0; left: 0; + height: 100%; border-radius: var(--border-radius-default); + + background-color: rgba(255, 255, 255, 0.5); } .played { - background: var(--color-primary); position: absolute; top: 0; left: 0; + height: 100%; border-radius: var(--border-radius-default); + background: var(--color-primary); + &::after { content: ""; + position: absolute; + top: 50%; + right: 0; + transform: translate(50%, -50%) scale(1); + width: 0.75rem; height: 0.75rem; border-radius: 50%; + background-color: var(--color-primary); - right: 0; - top: 50%; - transform: translate(50%, -50%) scale(1); + transition: transform 0.2s ease; } } diff --git a/src/components/mediaViewer/SenderInfo.scss b/src/components/mediaViewer/SenderInfo.scss index 9754ee50c..61028c98b 100644 --- a/src/components/mediaViewer/SenderInfo.scss +++ b/src/components/mediaViewer/SenderInfo.scss @@ -1,8 +1,11 @@ .SenderInfo { + cursor: var(--custom-cursor, pointer); + display: flex; align-content: center; - cursor: var(--custom-cursor, pointer); + color: rgba(255, 255, 255, 0.5); + transition: 0.15s color; &:hover { @@ -25,16 +28,17 @@ } .title { - line-height: 1.4375rem; - font-weight: var(--font-weight-medium); - white-space: pre; overflow: hidden; + + font-weight: var(--font-weight-medium); + line-height: 1.4375rem; text-overflow: ellipsis; + white-space: pre; } .date { - line-height: 1.25rem; font-size: 0.875rem; + line-height: 1.25rem; letter-spacing: -0.01rem; } } diff --git a/src/components/mediaViewer/VideoPlayer.scss b/src/components/mediaViewer/VideoPlayer.scss index 21178ad62..ada3d759a 100644 --- a/src/components/mediaViewer/VideoPlayer.scss +++ b/src/components/mediaViewer/VideoPlayer.scss @@ -1,8 +1,86 @@ .VideoPlayer { position: relative; + overflow: hidden; display: inline-flex; flex-direction: column; - overflow: hidden; + + video { + display: block; + + width: 100%; + height: 100%; + max-height: calc(100vh - 8.25rem); + margin: auto; + + object-fit: contain; + background: no-repeat 50% 50%; + background-size: contain; + outline: none; + + // Disable fullscreen on double tap on mobile devices + .is-touch-env & { + pointer-events: none; + } + + @media (max-height: 640px) { + max-height: calc(100vh - 10rem); + } + } + + .play-button { + position: absolute; + z-index: 3; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + + width: 3.25rem; + height: 3.25rem; + + background-color: rgba(0, 0, 0, 0.5) !important; + body:not(.no-page-transitions) & { + transition: opacity 0.3s ease !important; + } + + .icon-play { + position: relative; + left: 0.125rem; + font-size: 1.75rem; + } + } + + .spinner-container { + position: absolute; + top: 0; + left: 0; + + display: flex; + align-items: center; + justify-content: center; + + width: 100%; + height: 100%; + + .buffering { + position: absolute; + z-index: 1; + top: 0.1875rem; + left: 0.1875rem; + + padding: 0 0.375rem; + border-radius: 0.75rem; + + font-size: 0.75rem; + line-height: 1.125rem; + color: #fff; + + background: rgba(0, 0, 0, 0.25); + } + + .ProgressSpinner { + cursor: var(--custom-cursor, pointer); + } + } @media (max-width: 600px) { overflow: visible; @@ -15,73 +93,4 @@ margin-bottom: 0; } } - - video { - display: block; - max-height: calc(100vh - 8.25rem); - margin: auto; - object-fit: contain; - outline: none; - width: 100%; - height: 100%; - background: no-repeat 50% 50%; - background-size: contain; - - @media (max-height: 640px) { - max-height: calc(100vh - 10rem); - } - - // Disable fullscreen on double tap on mobile devices - .is-touch-env & { - pointer-events: none; - } - } - - .play-button { - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - width: 3.25rem; - height: 3.25rem; - background-color: rgba(0, 0, 0, 0.5) !important; - z-index: 3; - body:not(.no-page-transitions) & { - transition: opacity 0.3s ease !important; - } - - .icon-play { - font-size: 1.75rem; - position: relative; - left: 0.125rem; - } - } - - .spinner-container { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - display: flex; - align-items: center; - justify-content: center; - - .buffering { - background: rgba(0, 0, 0, 0.25); - color: #fff; - font-size: 0.75rem; - position: absolute; - left: 0.1875rem; - top: 0.1875rem; - z-index: 1; - padding: 0 0.375rem; - border-radius: 0.75rem; - line-height: 1.125rem; - } - - .ProgressSpinner { - cursor: var(--custom-cursor, pointer); - } - } } diff --git a/src/components/mediaViewer/VideoPlayerControls.scss b/src/components/mediaViewer/VideoPlayerControls.scss index 4aa2e0206..84af2d5da 100644 --- a/src/components/mediaViewer/VideoPlayerControls.scss +++ b/src/components/mediaViewer/VideoPlayerControls.scss @@ -1,18 +1,23 @@ .VideoPlayerControls { + pointer-events: none; + + position: absolute; + z-index: var(--z-video-player-controls); + bottom: 0; + left: 0; + display: flex; align-items: center; - position: absolute; - left: 0; - bottom: 0; + width: 100%; padding: 2rem 0.5rem 0.5rem; + font-size: 0.875rem; - background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%); - transition: opacity 0.3s; - z-index: var(--z-video-player-controls); opacity: 0; - pointer-events: none; + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%); + + transition: opacity 0.3s; &.mobile { position: fixed; @@ -27,8 +32,8 @@ } &.active { - opacity: 1; pointer-events: auto; + opacity: 1; } .buttons { @@ -43,9 +48,9 @@ .Button.round { width: 2rem; - padding: 0; - margin: 0.25rem; height: 2rem; + margin: 0.25rem; + padding: 0; @media (max-width: 320px) { margin: 0.125rem; @@ -53,14 +58,15 @@ } .volume-slider { - margin-bottom: 0; - margin-left: -0.75rem; - padding: 0.5rem 0.5rem 0.5rem 0.5rem; - width: 0; --volume-slider-width: 4rem; --slider-color: #fff; --color-borders: rgba(255, 255, 255, 0.5); + + width: 0; + margin-bottom: 0; + margin-left: -0.75rem; + padding: 0.5rem 0.5rem 0.5rem 0.5rem; /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */ transition: width 0.2s ease-in-out; @@ -88,16 +94,16 @@ } .player-time { - color: rgba(255, 255, 255, 0.5); font-variant-numeric: tabular-nums; + color: rgba(255, 255, 255, 0.5); white-space: nowrap; } .player-file-size { - white-space: nowrap; overflow: hidden; - text-overflow: ellipsis; margin-left: 0.5rem; + text-overflow: ellipsis; + white-space: nowrap; @media (max-width: 320px) { margin: 0.25rem; @@ -107,9 +113,9 @@ .playback-rate-menu { color: var(--color-text); .bubble { + bottom: 4.1875rem; min-width: 3.5rem; margin-right: 5.8125rem; - bottom: 4.1875rem; } &.no-fullscreen, &.no-pip { diff --git a/src/components/middle/ChatLanguageModal.module.scss b/src/components/middle/ChatLanguageModal.module.scss index 49470f836..55806a778 100644 --- a/src/components/middle/ChatLanguageModal.module.scss +++ b/src/components/middle/ChatLanguageModal.module.scss @@ -1,8 +1,8 @@ .root { :global(.modal-content) { - min-height: min(75vh, 32rem); display: flex; flex-direction: column; + min-height: min(75vh, 32rem); } :global(.matching-text-highlight) { diff --git a/src/components/middle/ContactGreeting.module.scss b/src/components/middle/ContactGreeting.module.scss index bec954234..cb71457fe 100644 --- a/src/components/middle/ContactGreeting.module.scss +++ b/src/components/middle/ContactGreeting.module.scss @@ -1,49 +1,58 @@ .root { - width: 100%; - height: 100%; display: flex; flex-direction: column; + gap: 0.5rem; align-items: center; justify-content: center; + + width: 100%; + height: 100%; + text-align: center; - gap: 0.5rem; .wrapper { display: inline-flex; flex-direction: column; align-items: center; - background: var(--pattern-color); + width: 14.5rem; padding: 0.75rem 1rem; border-radius: 1.5rem; + color: #fff; + + background: var(--pattern-color); } .explainer { - background: var(--pattern-color); + max-width: 14.5rem; padding: 0.25rem 0.5rem; border-radius: 1rem; + font-size: 0.875rem; color: #fff; - max-width: 14.5rem; text-wrap: balance; + + background: var(--pattern-color); } .title { - font-weight: var(--font-weight-medium); margin-bottom: 0; + font-weight: var(--font-weight-medium); } .description { - font-size: 0.9375rem; margin-bottom: 0; + font-size: 0.9375rem; } .sticker { - margin: 1rem; - height: 10rem; - width: 10rem; cursor: var(--custom-cursor, pointer); + position: relative; + + width: 10rem; + height: 10rem; + margin: 1rem; } } diff --git a/src/components/middle/EmojiInteractionAnimation.scss b/src/components/middle/EmojiInteractionAnimation.scss index 067a06d0a..efdc7f21b 100644 --- a/src/components/middle/EmojiInteractionAnimation.scss +++ b/src/components/middle/EmojiInteractionAnimation.scss @@ -2,13 +2,16 @@ --start-x: 0; --start-y: 0; --scale: 0; + + pointer-events: none; + position: absolute; + z-index: var(--z-reaction-interaction-effect); top: 0; left: 0; + width: 100%; height: 100%; - pointer-events: none; - z-index: var(--z-reaction-interaction-effect); @keyframes show-interaction { from { @@ -34,8 +37,9 @@ position: absolute; top: var(--start-y); left: var(--start-x); - transform: scale(var(--scale), 0); transform-origin: left top; + transform: scale(var(--scale), 0); + transition: 0.25s cubic-bezier(0.29, 0.81, 0.27, 0.99) opacity; } diff --git a/src/components/middle/FloatingActionButtons.module.scss b/src/components/middle/FloatingActionButtons.module.scss index 394b9acdf..fc4429bcd 100644 --- a/src/components/middle/FloatingActionButtons.module.scss +++ b/src/components/middle/FloatingActionButtons.module.scss @@ -3,18 +3,21 @@ --translate-x: 0; --translate-y: 4.5rem; - position: absolute; - bottom: var(--base-bottom-pos); - right: max(1rem, env(safe-area-inset-right)); - opacity: 0; - transform: translate(var(--translate-x), var(--translate-y)); - transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease; - z-index: var(--z-scroll-down-button); pointer-events: none; + position: absolute; + z-index: var(--z-scroll-down-button); + right: max(1rem, env(safe-area-inset-right)); + bottom: var(--base-bottom-pos); + transform: translate(var(--translate-x), var(--translate-y)); + + opacity: 0; + + transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease; + .hidden { - opacity: 0; pointer-events: none; + opacity: 0; } .reactions { @@ -35,6 +38,29 @@ transition: opacity 0.15s; } + &.revealed { + --translate-y: 0; + + opacity: 1; + + .unread { + pointer-events: auto; + } + + &.no-composer.no-extra-shift { + --translate-y: 4rem; + } + } + + &.hide-scroll-down { + --translate-y: 4rem; + + .unread { + pointer-events: none; + opacity: 0; + } + } + @media (min-width: 1276px) { --translate-x: 0; @@ -63,28 +89,6 @@ } } - &.revealed { - --translate-y: 0; - opacity: 1; - - .unread { - pointer-events: auto; - } - - &.no-composer.no-extra-shift { - --translate-y: 4rem; - } - } - - &.hide-scroll-down { - --translate-y: 4rem; - - .unread { - opacity: 0; - pointer-events: none; - } - } - @media (max-width: 600px) { body.is-symbol-menu-open & { bottom: calc(var(--base-bottom-pos) + var(--symbol-menu-height)); diff --git a/src/components/middle/FrozenAccountPlaceholder.module.scss b/src/components/middle/FrozenAccountPlaceholder.module.scss index 5381f422e..de9634ffa 100644 --- a/src/components/middle/FrozenAccountPlaceholder.module.scss +++ b/src/components/middle/FrozenAccountPlaceholder.module.scss @@ -7,15 +7,15 @@ } .title { - color: var(--color-error); - font-weight: var(--font-weight-medium); font-size: 1rem; + font-weight: var(--font-weight-medium); line-height: 1rem; + color: var(--color-error); } .subtitle { - color: var(--color-text-secondary); - font-size: 0.875rem; margin-top: 0.25rem; + font-size: 0.875rem; line-height: 1rem; + color: var(--color-text-secondary); } diff --git a/src/components/middle/HeaderMenuContainer.scss b/src/components/middle/HeaderMenuContainer.scss index 28fde774f..1d9f71316 100644 --- a/src/components/middle/HeaderMenuContainer.scss +++ b/src/components/middle/HeaderMenuContainer.scss @@ -1,10 +1,11 @@ .HeaderMenuContainer { position: fixed; - top: 0; - left: 0; - right: 0; - height: 100vh; z-index: var(--z-header-menu); + top: 0; + right: 0; + left: 0; + + height: 100vh; .Menu { position: absolute; @@ -15,8 +16,9 @@ } .bubble { - z-index: var(--z-header-menu); --offset-y: calc(100% + 1rem); + + z-index: var(--z-header-menu); } } } diff --git a/src/components/middle/MessageList.scss b/src/components/middle/MessageList.scss index 919acbf6c..3fc6e9031 100644 --- a/src/components/middle/MessageList.scss +++ b/src/components/middle/MessageList.scss @@ -1,13 +1,13 @@ .MessageList { --action-message-bg: var(--pattern-color); + overflow-x: hidden; + overflow-y: scroll; flex: 1; + width: 100%; margin-bottom: 0.5rem; - overflow-y: scroll; - overflow-x: hidden; - /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */ transition: bottom 150ms ease-out, transform var(--layer-transition); @@ -19,27 +19,17 @@ mask-image: linear-gradient(to top, transparent 0, #000 0.5rem); } - @media (pointer: coarse) { - user-select: none; - -webkit-touch-callout: none; - - &.select-mode-active { - user-select: auto; - -webkit-touch-callout: default; - } - } - body.keyboard-visible & { position: relative; bottom: 0; - @media (max-width: 600px) { - bottom: calc(0px - env(safe-area-inset-bottom)); - } - body.keyboard-visible.no-page-transitions & { transition: none !important; } + + @media (max-width: 600px) { + bottom: calc(0px - env(safe-area-inset-bottom)); + } } &.no-avatars .Message > .Avatar { @@ -47,13 +37,14 @@ } .messages-container { + display: flex; + flex-direction: column; + justify-content: flex-end; + width: 100%; max-width: var(--messages-container-width); min-height: 100%; margin: 0 auto; - display: flex; - justify-content: flex-end; - flex-direction: column; padding: 1rem 1rem 0 1.125rem; .force-messages-scroll & { @@ -62,9 +53,9 @@ @media (max-width: 600px) { width: 100vw; - padding: 2.75rem 0.5rem 0; // Patch for an issue on Android when rotating device margin: 0; + padding: 2.75rem 0.5rem 0; } } @@ -88,13 +79,13 @@ .last-in-list { margin-bottom: 5.625rem; - @media (max-width: 600px) { - margin-bottom: 4.25rem; - } - &.ActionMessage { padding-bottom: 0.125rem; } + + @media (max-width: 600px) { + margin-bottom: 4.25rem; + } } &:has(.sponsored-media-preview) { @@ -106,36 +97,41 @@ } } - @media (max-width: 600px) { - &.with-bottom-shift { - margin-bottom: 0; - - .last-in-list { - margin-bottom: 4.25rem; - - body:not(.keyboard-visible) & { - margin-bottom: calc(4.25rem + env(safe-area-inset-bottom)); - } - } - } - } - .Message, .ActionMessage { position: relative; - - opacity: 1; transform: scale(1); + opacity: 1; transition: opacity 0.2s ease, transform 0.2s ease; + &::before { + content: ""; + + position: absolute; + z-index: 0; + top: -0.1875rem; + right: -50vw; + bottom: -0.1875rem; + left: -50vw; + + opacity: 0; + background: black; + + transition: opacity var(--select-transition); + + body.no-page-transitions & { + transition: none !important; + } + } + &:not(.open) { transform: scale(0.8); opacity: 0; } body.no-message-sending-animations & { - opacity: 1; transform: none; + opacity: 1; transition: none !important; } @@ -149,24 +145,6 @@ transform: none; } - &::before { - content: ""; - position: absolute; - top: -0.1875rem; - bottom: -0.1875rem; - left: -50vw; - right: -50vw; - background: black; - z-index: 0; - - opacity: 0; - transition: opacity var(--select-transition); - - body.no-page-transitions & { - transition: none !important; - } - } - &:not(.last-in-group) { &::before { bottom: -0.1875rem; @@ -217,12 +195,13 @@ } .empty { - width: 100%; - height: 100%; display: flex; align-items: center; justify-content: center; + width: 100%; + height: 100%; + & > span { max-width: 80%; text-align: left; @@ -232,21 +211,23 @@ .local-action-message, .ActionMessage, .empty { - text-align: center; - user-select: none; --custom-emoji-size: calc(var(--message-text-size, 1rem) + 0.125rem); + + user-select: none; font-size: calc(var(--message-text-size, 1rem) - 0.0625rem); line-height: 1.25; + text-align: center; > span { - background-color: var(--action-message-bg); - color: white; - position: relative; + z-index: 0; + border-radius: var(--border-radius-messages); - z-index: 0; + color: white; + + background-color: var(--action-message-bg); body.is-ios &, body.is-macos & { @@ -255,9 +236,9 @@ } .emoji-small { - vertical-align: text-bottom; width: calc(1.25 * var(--message-text-size, 1rem)); height: calc(1.25 * var(--message-text-size, 1rem)); + vertical-align: text-bottom; background-size: calc(1.25 * var(--message-text-size, 1rem)); } } @@ -275,17 +256,16 @@ } .sticky-date { + pointer-events: none; + + z-index: var(--z-sticky-date); + margin-top: 1rem; margin-bottom: 1rem; - z-index: var(--z-sticky-date); - pointer-events: none; - opacity: 1; - transition: opacity 0.3s ease; - @media (max-width: 600px) { - margin-top: 0.5rem; - margin-bottom: 0.75rem; - } + opacity: 1; + + transition: opacity 0.3s ease; body:not(.is-scrolling-messages) &.stuck { opacity: 0; @@ -306,6 +286,11 @@ span { pointer-events: auto; } + + @media (max-width: 600px) { + margin-top: 0.5rem; + margin-bottom: 0.75rem; + } } &.scrolled:not(.is-animating) .sticky-date { @@ -327,9 +312,44 @@ margin-top: -0.375rem; } + .Transition_slide-from > &, + .Transition_slide-to > & { + scrollbar-color: transparent transparent !important; + + &::-webkit-scrollbar-thumb { + background-color: transparent !important; + } + } + + @media (pointer: coarse) { + user-select: none; + + -webkit-touch-callout: none; + + &.select-mode-active { + user-select: auto; + + -webkit-touch-callout: default; + } + } + + @media (max-width: 600px) { + &.with-bottom-shift { + margin-bottom: 0; + + .last-in-list { + margin-bottom: 4.25rem; + + body:not(.keyboard-visible) & { + margin-bottom: calc(4.25rem + env(safe-area-inset-bottom)); + } + } + } + } + @media (min-width: 1276px) { - width: 100%; transform: translate3d(0, 0, 0); + width: 100%; transition: transform var(--layer-transition); .messages-container { @@ -364,13 +384,4 @@ transform: translate3d(0, calc(-1 * (var(--symbol-menu-height))), 0); } } - - .Transition_slide-from > &, - .Transition_slide-to > & { - scrollbar-color: transparent transparent !important; - - &::-webkit-scrollbar-thumb { - background-color: transparent !important; - } - } } diff --git a/src/components/middle/MessageListAccountInfo.module.scss b/src/components/middle/MessageListAccountInfo.module.scss index cf0fae1cb..31d813540 100644 --- a/src/components/middle/MessageListAccountInfo.module.scss +++ b/src/components/middle/MessageListAccountInfo.module.scss @@ -1,35 +1,40 @@ .root { - width: 100%; - height: 100%; display: flex; flex-direction: column; + + width: 100%; + height: 100%; padding: 0 0.6875rem; } .chatInfo { - max-width: min(80%, 25rem); - min-width: 15.8125rem; + overflow: hidden; display: flex; flex-direction: column; + min-width: 15.8125rem; + max-width: min(80%, 25rem); + border-radius: var(--border-radius-messages); + font-size: calc(var(--message-text-size, 1rem) - 0.0625rem); font-weight: var(--font-weight-normal); - border-radius: var(--border-radius-messages); - overflow: hidden; text-align: center; } .chatBackground { - background-color: var(--action-message-bg); - color: white; - padding: 1rem 1.5rem; - margin: 5rem 0 2rem; contain: layout; // Force new stacking context for text blending + + margin: 5rem 0 2rem; + padding: 1rem 1.5rem; + + color: white; + + background-color: var(--action-message-bg); } .botBackground { - background-color: var(--color-background); color: var(--color-text); + background-color: var(--color-background); } .bot-info-description { @@ -38,8 +43,8 @@ } .bot-info-title { - font-weight: var(--font-weight-medium); margin-bottom: 0.25rem; + font-weight: var(--font-weight-medium); } .media { @@ -48,8 +53,8 @@ } .chatInfoTitle { - font-weight: var(--font-weight-semibold); margin: 0 0 0.25rem; + font-weight: var(--font-weight-semibold); } .chatInfoSubtitle { @@ -58,9 +63,10 @@ .chatDescription { display: flex; - justify-content: flex-start; - align-items: center; gap: 0.25rem; + align-items: center; + justify-content: flex-start; + margin: 0; } @@ -77,9 +83,10 @@ .chatNotVerified { display: flex; - justify-content: center; - align-items: center; gap: 0.25rem; + align-items: center; + justify-content: center; + margin-top: 1rem; } @@ -89,8 +96,8 @@ .link { display: flex; - align-items: center; gap: 0.25rem; + align-items: center; &:hover { text-decoration: none; } diff --git a/src/components/middle/MessageSelectToolbar.scss b/src/components/middle/MessageSelectToolbar.scss index 6f4bb525d..2bfc7a75f 100644 --- a/src/components/middle/MessageSelectToolbar.scss +++ b/src/components/middle/MessageSelectToolbar.scss @@ -1,21 +1,29 @@ .MessageSelectToolbar { position: absolute; + z-index: 20; + right: 0.5rem; bottom: 0.5rem; left: 0.5rem; - right: 0.5rem; - width: auto; - z-index: 20; + justify-content: center; + + width: auto; margin: 0; + opacity: 1; - @media (max-width: 600px) { - bottom: calc(0.5rem + env(safe-area-inset-bottom)); + &::before { + z-index: -1; + right: auto; + left: auto; + + width: 100%; + max-width: calc(100% * var(--composer-hidden-scale)); } .mask-image-disabled &::before { - left: auto !important; right: auto !important; + left: auto !important; } .no-composer & { @@ -26,16 +34,6 @@ } } - @media (min-width: 601px) { - left: 1rem; - right: 1rem; - bottom: 1.25rem; - - .no-composer & { - top: -4.75rem; - } - } - & .MessageSelectToolbar-inner { transform: scaleX(1) translateX(0); } @@ -50,8 +48,8 @@ } &:not(.shown) { - opacity: 0; pointer-events: none; + opacity: 0; .shown-inner { transform: scaleX(var(--toolbar-hidden-scale, 1)); @@ -66,33 +64,23 @@ } } - &::before { - z-index: -1; - max-width: calc(100% * var(--composer-hidden-scale)); - width: 100%; - left: auto; - right: auto; - } - &-inner { - width: 100%; - max-width: calc(100% * var(--composer-hidden-scale)); + transform: scaleX(1); + display: flex; align-items: center; - padding: 0.25rem; - background: var(--color-background); + width: 100%; + max-width: calc(100% * var(--composer-hidden-scale)); + padding: 0.25rem; border-radius: var(--border-radius-messages); - box-shadow: 0 1px 2px var(--color-default-shadow); + font-weight: var(--font-weight-medium); - transform: scaleX(1); - transition: transform var(--select-transition), opacity var(--select-transition); + background: var(--color-background); + box-shadow: 0 1px 2px var(--color-default-shadow); - @media (max-width: 600px) { - padding: 0; - max-width: none; - } + transition: transform var(--select-transition), opacity var(--select-transition); > .Button { width: 3rem; @@ -103,43 +91,55 @@ height: 2.875rem; } } + + @media (max-width: 600px) { + max-width: none; + padding: 0; + } } &-count { - margin-left: 1rem; - white-space: nowrap; overflow: hidden; - text-overflow: ellipsis; flex-grow: 1; + margin-left: 1rem; + + text-overflow: ellipsis; + white-space: nowrap; + @media (max-width: 600px) { margin-right: 0.5rem; } } &-actions { - margin-left: auto; display: flex; + margin-left: auto; .item { - width: 100%; - background: none; - border: none !important; - box-shadow: none !important; - outline: none !important; - display: flex; - position: relative; - overflow: hidden; - line-height: 1.5rem; - white-space: nowrap; - color: var(--color-text); --ripple-color: rgba(0, 0, 0, 0.08); - cursor: var(--custom-cursor, pointer); - unicode-bidi: plaintext; + cursor: var(--custom-cursor, pointer); + + position: relative; + + unicode-bidi: plaintext; + overflow: hidden; + display: flex; + + width: 100%; padding: 0.6875rem; + border: none !important; border-radius: 50%; + line-height: 1.5rem; + color: var(--color-text); + white-space: nowrap; + + background: none; + outline: none !important; + box-shadow: none !important; + .icon { font-size: 1.5rem; color: var(--color-text-secondary); @@ -153,9 +153,9 @@ } &.disabled { - opacity: 0.5; - cursor: var(--custom-cursor, default); pointer-events: none; + cursor: var(--custom-cursor, default); + opacity: 0.5; } &:not(.disabled):active { @@ -165,10 +165,24 @@ @media (hover: hover) { &:hover, &:focus { - background-color: var(--color-chat-hover); text-decoration: none; + background-color: var(--color-chat-hover); } } } } + + @media (max-width: 600px) { + bottom: calc(0.5rem + env(safe-area-inset-bottom)); + } + + @media (min-width: 601px) { + right: 1rem; + bottom: 1.25rem; + left: 1rem; + + .no-composer & { + top: -4.75rem; + } + } } diff --git a/src/components/middle/MiddleColumn.module.scss b/src/components/middle/MiddleColumn.module.scss index 6cbbc3a77..8f7c455b9 100644 --- a/src/components/middle/MiddleColumn.module.scss +++ b/src/components/middle/MiddleColumn.module.scss @@ -1,22 +1,26 @@ .background { position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; z-index: -1; + top: 0; + right: 0; + bottom: 0; + left: 0; + overflow: hidden; + background-color: var(--theme-background-color); &::before { content: ""; + position: absolute; top: 0; - left: 0; - bottom: 0; right: 0; - background-position: center; + bottom: 0; + left: 0; + background-repeat: no-repeat; + background-position: center; background-size: cover; } @@ -29,8 +33,8 @@ } &.customBgImage::before { - background-image: var(--custom-background) !important; transform: scale(1.1); + background-image: var(--custom-background) !important; } :global(body:not(.no-page-transitions)) &.withTransition { @@ -49,14 +53,6 @@ filter: blur(12px); } - @media screen and (min-width: 1276px) { - :global(body:not(.no-page-transitions)) &:not(.customBgImage)::before { - overflow: hidden; - transform: scale(1); - transform-origin: left center; - } - } - :global(html.theme-light body:not(.no-page-transitions)) &:not(.customBgImage).withRightColumn::before { @media screen and (min-width: 1276px) { transform: scaleX(0.73) !important; @@ -78,15 +74,17 @@ &:not(.customBgImage):not(.customBgColor)::after { content: ""; + position: absolute; top: 0; - left: 0; - bottom: 0; right: 0; + bottom: 0; + left: 0; + background-image: url('../../assets/chat-bg-pattern-light.png'); + background-repeat: repeat; background-position: top right; background-size: 510px auto; - background-repeat: repeat; mix-blend-mode: overlay; :global(html.theme-dark) & { @@ -94,4 +92,12 @@ mix-blend-mode: unset; } } + + @media screen and (min-width: 1276px) { + :global(body:not(.no-page-transitions)) &:not(.customBgImage)::before { + transform-origin: left center; + transform: scale(1); + overflow: hidden; + } + } } diff --git a/src/components/middle/MiddleColumn.scss b/src/components/middle/MiddleColumn.scss index fc7e50191..dfd9c54e3 100644 --- a/src/components/middle/MiddleColumn.scss +++ b/src/components/middle/MiddleColumn.scss @@ -1,30 +1,30 @@ #MiddleColumn { - display: flex; - justify-content: center; - height: 100%; position: relative; z-index: 1; - min-width: 0; - @media (max-width: 600px) { - overflow: hidden; - } + display: flex; + justify-content: center; + + min-width: 0; + height: 100%; .messages-layout { --slide-transition: 450ms cubic-bezier(0.25, 1, 0.5, 1); + position: relative; + + overflow: hidden; display: flex; flex-direction: column; align-items: center; + width: 100%; height: 100%; - position: relative; - overflow: hidden; > .Transition { + overflow: hidden; width: 100%; height: 100%; - overflow: hidden; > .Transition_slide { display: flex; @@ -63,8 +63,8 @@ } > .Button { - opacity: 1; transform: scale(1); + opacity: 1; /* stylelint-disable plugin/no-low-performance-animation-properties */ transition: border-radius 0.15s, @@ -111,8 +111,8 @@ } > .Button { - opacity: 0 !important; transform: scale(0.5); + opacity: 0 !important; } } } @@ -135,8 +135,8 @@ } &:not(.shown) { - transform: scaleX(var(--composer-hidden-scale, 1)); pointer-events: none; + transform: scaleX(var(--composer-hidden-scale, 1)); .messaging-disabled-inner span { opacity: 0; @@ -147,25 +147,57 @@ width: 100%; padding: 1rem; border-radius: var(--border-radius-messages); - background: var(--color-background); + color: var(--color-text-secondary); text-align: center; + + background: var(--color-background); box-shadow: 0 1px 2px var(--color-default-shadow); } } .middle-column-footer { + position: relative; + z-index: var(--z-middle-footer); + transform: translate3d(0, 0, 0); + + display: flex; + align-items: flex-end; + width: 100%; max-width: var(--messages-container-width); padding: 0 1rem; - position: relative; - display: flex; - align-items: flex-end; - z-index: var(--z-middle-footer); - transform: translate3d(0, 0, 0); transition: top 200ms, transform var(--layer-transition); + &::before { + content: ""; + + position: absolute; + top: -0.5625rem; + right: 0; + left: 0; + + height: 1px; + + opacity: 0; + background: + linear-gradient( + 90deg, + rgba(255, 255, 255, 0) 0%, + rgba(255, 255, 255, 0.4) 2%, + rgba(255, 255, 255, 0.4) 98%, + rgba(255, 255, 255, 0) 100% + ); + + transition: opacity 350ms ease; + + @media (max-width: 600px) { + right: -2%; + left: -2%; + } + } + body.no-page-transitions & { transition: none !important; } @@ -174,25 +206,9 @@ transition: top 200ms !important; } - @media (min-width: 1276px) { - width: calc(100% - var(--right-column-width)); - - #Main.right-column-open & { - transform: translate3d(calc(var(--right-column-width) / -2), 0, 0); - } - } - - @media (max-width: 600px) { - padding: 0 0.5rem; - - body.is-symbol-menu-open & { - transform: translate3d(0, calc(-1 * (var(--symbol-menu-height))), 0); - } - } - &:not(.no-composer) { - padding-bottom: 0; top: 0; + padding-bottom: 0; @media (max-width: 600px) { padding-bottom: env(safe-area-inset-bottom); @@ -203,30 +219,6 @@ } } - &::before { - content: ""; - position: absolute; - top: -0.5625rem; - left: 0; - right: 0; - height: 1px; - background: - linear-gradient( - 90deg, - rgba(255, 255, 255, 0) 0%, - rgba(255, 255, 255, 0.4) 2%, - rgba(255, 255, 255, 0.4) 98%, - rgba(255, 255, 255, 0) 100% - ); - opacity: 0; - transition: opacity 350ms ease; - - @media (max-width: 600px) { - left: -2%; - right: -2%; - } - } - &.with-notch::before { opacity: 1; } @@ -241,6 +233,26 @@ rgba(127, 127, 127, 0) 100% ); } + + @media (min-width: 1276px) { + width: calc(100% - var(--right-column-width)); + + #Main.right-column-open & { + transform: translate3d(calc(var(--right-column-width) / -2), 0, 0); + } + } + + @media (max-width: 600px) { + padding: 0 0.5rem; + + body.is-symbol-menu-open & { + transform: translate3d(0, calc(-1 * (var(--symbol-menu-height))), 0); + } + } + } + + @media (max-width: 600px) { + overflow: hidden; } } @@ -259,17 +271,17 @@ .MessageSelectToolbar, .composer-button, .messaging-disabled { - width: 100%; + position: relative; display: flex; justify-content: center; - position: relative; + width: 100%; } .MessageSelectToolbar-inner, .composer-button { .mask-image-disabled & { - box-shadow: 0 0.25rem 0.5rem 0.125rem var(--color-default-shadow); border-radius: var(--border-radius-messages); + box-shadow: 0 0.25rem 0.5rem 0.125rem var(--color-default-shadow); } } @@ -280,15 +292,27 @@ } .middle-column-footer-button-container { - width: 100%; + position: absolute; + display: flex; justify-content: center; - position: absolute; + + width: 100%; padding-bottom: 1.25rem; .unpin-all-button { - text-transform: capitalize; color: var(--color-primary); + text-transform: capitalize; + + .icon-unpin { + margin-inline-start: -0.4375rem; + margin-inline-end: 0.75rem; + + font-size: 1.5rem; + color: var(--color-text-secondary); + + transition: color 0.15s; + } @media (hover: hover) { &:hover { @@ -306,24 +330,16 @@ } } } - - .icon-unpin { - margin-inline-start: -0.4375rem; - margin-inline-end: 0.75rem; - color: var(--color-text-secondary); - font-size: 1.5rem; - transition: color 0.15s; - } } .composer-button { - height: 3.5rem; transform: scaleX(1); + height: 3.5rem; transition: transform var(--select-transition), background-color 0.15s, color 0.15s; .select-mode-active + .middle-column-footer & { - box-shadow: none; transform: scaleX(var(--unpin-hidden-scale)); + box-shadow: none; } @media (max-width: 600px) { @@ -335,22 +351,24 @@ color: var(--color-primary); } + .mask-image-disabled &::before { + background: unset; + } + @media (max-width: 600px) { margin-left: -0.5rem; padding-bottom: calc(0.75rem + env(safe-area-inset-bottom)); } - - .mask-image-disabled &::before { - background: unset; - } } .resize-handle { - position: absolute; - top: 0; - left: 0; - bottom: 0; - width: 0.25rem; - z-index: var(--z-resize-handle); cursor: ew-resize; + + position: absolute; + z-index: var(--z-resize-handle); + top: 0; + bottom: 0; + left: 0; + + width: 0.25rem; } diff --git a/src/components/middle/MiddleHeader.scss b/src/components/middle/MiddleHeader.scss index 43c19f4a2..4652a6352 100644 --- a/src/components/middle/MiddleHeader.scss +++ b/src/components/middle/MiddleHeader.scss @@ -1,25 +1,21 @@ @use "../../styles/mixins"; .MiddleHeader { - display: flex; - align-items: center; - width: 100%; - background: var(--color-background); position: relative; z-index: var(--z-middle-header); + + display: flex; + flex-shrink: 0; + align-items: center; + + width: 100%; + height: 3.5rem; padding-top: 0.25rem; + padding-right: max(0.8125rem, env(safe-area-inset-right)); padding-bottom: 0.25rem; padding-left: max(1.4375rem, env(safe-area-inset-left)); - padding-right: max(0.8125rem, env(safe-area-inset-right)); - flex-shrink: 0; - height: 3.5rem; - @media (max-width: 600px) { - position: relative; - - padding-left: max(0.5rem, env(safe-area-inset-left)); - padding-right: max(0.5rem, env(safe-area-inset-right)); - } + background: var(--color-background); .Transition { width: 100%; @@ -35,36 +31,38 @@ } .back-button { - margin-left: -0.5rem; - margin-right: 0.5rem; position: relative; - - @media (max-width: 600px) { - margin-left: 0; - } + margin-right: 0.5rem; + margin-left: -0.5rem; .unread-count { - min-width: 1.25rem; - height: 1.25rem; - padding: 0 0.375rem; - border-radius: 0.625rem; - font-size: 0.75rem; - line-height: 1.25rem; - font-weight: var(--font-weight-medium); - text-align: center; + pointer-events: none; position: absolute; top: -0.25rem; right: -0.5rem; - background: var(--color-gray); + min-width: 1.25rem; + height: 1.25rem; + padding: 0 0.375rem; + border-radius: 0.625rem; + + font-size: 0.75rem; + font-weight: var(--font-weight-medium); + line-height: 1.25rem; color: white; - pointer-events: none; + text-align: center; + + background: var(--color-gray); &.active { background: var(--color-primary); } } + + @media (max-width: 600px) { + margin-left: 0; + } } .chat-info-wrapper { @@ -74,10 +72,11 @@ .header-tools { display: flex; + flex-shrink: 0; align-items: center; justify-content: flex-end; + margin-left: auto; - flex-shrink: 0; body.no-page-transitions & { &, @@ -94,6 +93,11 @@ } } + // @optimization + #Main.right-column-animating & { + pointer-events: none; + } + @media (min-width: 1276px) { transform: translate3d(0, 0, 0); transition: transform var(--layer-transition); @@ -102,22 +106,19 @@ transform: translate3d(calc(var(--right-column-width) * -1), 0, 0); } } - - // @optimization - #Main.right-column-animating & { - pointer-events: none; - } } h3 { - font-weight: var(--font-weight-medium); - font-size: 1.125rem; - line-height: 1.375rem; - white-space: pre; - margin: 0; - overflow: hidden; - text-overflow: ellipsis; unicode-bidi: plaintext; + overflow: hidden; + + margin: 0; + + font-size: 1.125rem; + font-weight: var(--font-weight-medium); + line-height: 1.375rem; + text-overflow: ellipsis; + white-space: pre; body.is-ios &, body.is-macos & { @@ -126,8 +127,8 @@ } @media (max-width: 600px) { - display: block; overflow: hidden; + display: block; text-overflow: ellipsis; } @@ -145,15 +146,12 @@ // Space for unread story circle padding: 0.0625rem 0 0.0625rem 0.0625rem; - @media (max-width: 600px) { - user-select: none; - } - .info { display: flex; flex-direction: column; - justify-content: center; flex-grow: 1; + justify-content: center; + min-width: 0; } @@ -182,8 +180,8 @@ .status, .typing-status { - display: inline; unicode-bidi: plaintext; + display: inline; @media (min-width: 1275px) { #Main.right-column-open & { @@ -216,18 +214,22 @@ .message-count-transition { height: 1.125rem; } + + @media (max-width: 600px) { + user-select: none; + } } .ChatInfo .Avatar, .topic-header-icon { // TODO For some reason webpack imports `Audio.scss` second time when loading calls bundle width: 2.5rem !important; height: 2.5rem !important; - margin-right: 0.625rem; } .topic-header-icon { --custom-emoji-size: 2.25rem; + font-size: 2.25rem; .emoji-small { @@ -250,14 +252,16 @@ .status, .typing-status { + overflow: hidden; + display: inline-block; + + margin: 0; + font-size: 0.875rem; line-height: 1.125rem; - margin: 0; color: var(--color-text-secondary); - overflow: hidden; - white-space: nowrap; text-overflow: ellipsis; - display: inline-block; + white-space: nowrap; .ellipsis { display: inline-flex; @@ -278,12 +282,13 @@ } .HeaderActions { - flex-shrink: 0; - margin-left: auto; display: flex; + flex-shrink: 0; align-items: center; justify-content: flex-end; + margin-left: auto; + .Button { margin-left: 0.25rem; @@ -306,18 +311,22 @@ .badge { position: absolute; + top: 0; + right: 0; + + flex-shrink: 0; + min-width: 1rem; height: 1rem; - background: var(--color-primary); border-radius: 0.5rem; - color: white; + font-size: 0.75rem; - line-height: 1rem; font-weight: var(--font-weight-medium); + line-height: 1rem; + color: white; text-align: center; - flex-shrink: 0; - right: 0; - top: 0; + + background: var(--color-primary); } } @@ -334,6 +343,12 @@ } } } + + @media (max-width: 600px) { + position: relative; + padding-right: max(0.5rem, env(safe-area-inset-right)); + padding-left: max(0.5rem, env(safe-area-inset-left)); + } } @keyframes fade-in { diff --git a/src/components/middle/MiddleHeaderPanes.module.scss b/src/components/middle/MiddleHeaderPanes.module.scss index 5153e8efe..9fb4f91b8 100644 --- a/src/components/middle/MiddleHeaderPanes.module.scss +++ b/src/components/middle/MiddleHeaderPanes.module.scss @@ -1,19 +1,28 @@ .root { position: absolute; + z-index: var(--z-middle-header); top: 3.5rem; left: 0; width: 100%; - z-index: var(--z-middle-header); - /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */ transition: width var(--layer-transition); - @media (min-width: 1276px) { - :global(#Main.right-column-open) & { - width: calc(100% - var(--right-column-width)); - } + // In case if there are no children, we need to have a shadow + &::before { + pointer-events: none; + content: ''; + + position: absolute; + z-index: -100; // Hide behind the children + top: -2px; + right: 0; + left: 0; + + height: 2px; + + box-shadow: 0 2px 2px var(--color-light-shadow); } /* stylelint-disable-next-line plugin/selector-tag-no-without-class */ @@ -21,16 +30,9 @@ box-shadow: 0 2px 2px var(--color-light-shadow); } - // In case if there are no children, we need to have a shadow - &::before { - content: ''; - position: absolute; - pointer-events: none; - top: -2px; - height: 2px; - left: 0; - right: 0; - box-shadow: 0 2px 2px var(--color-light-shadow); - z-index: -100; // Hide behind the children + @media (min-width: 1276px) { + :global(#Main.right-column-open) & { + width: calc(100% - var(--right-column-width)); + } } } diff --git a/src/components/middle/NoMessages.scss b/src/components/middle/NoMessages.scss index bb9d88539..275c77a9f 100644 --- a/src/components/middle/NoMessages.scss +++ b/src/components/middle/NoMessages.scss @@ -1,17 +1,19 @@ .NoMessages { - width: 100%; - height: 100%; display: flex; align-items: center; justify-content: center; + width: 100%; + height: 100%; + .no-messages-icon { - font-size: 5rem; margin: 0 auto 1rem; + font-size: 5rem; } .topic-icon { --custom-emoji-size: 3rem; + width: 3rem; height: 3rem; font-size: 2rem; @@ -20,45 +22,54 @@ .wrapper { display: inline-flex; flex-direction: column; - background: var(--pattern-color); + max-width: 20rem; padding: 0.75rem 1rem; border-radius: 1.5rem; + color: #fff; + background: var(--pattern-color); + &[dir="rtl"] { text-align: right; } } .title { - font-weight: var(--font-weight-medium); - font-size: 1rem; - margin-bottom: 0.25rem; - text-align: center; unicode-bidi: plaintext; + + margin-bottom: 0.25rem; + + font-size: 1rem; + font-weight: var(--font-weight-medium); + text-align: center; } .description { - font-size: 0.9375rem; + unicode-bidi: plaintext; + margin: 0; padding: 0; + + font-size: 0.9375rem; list-style: none; - unicode-bidi: plaintext; } .topic-description { - text-align: center; padding: 0 1rem; + text-align: center; } .list-checkmarks { - font-size: 0.9375rem; + unicode-bidi: plaintext; + margin: 0.25rem 0 0; padding: 0; - list-style: none; - unicode-bidi: plaintext; + + font-size: 0.9375rem; line-height: 1.8; + list-style: none; li::before { content: "✓"; diff --git a/src/components/middle/PinnedMessageNavigation.module.scss b/src/components/middle/PinnedMessageNavigation.module.scss index 6a42cd387..d86f038b8 100644 --- a/src/components/middle/PinnedMessageNavigation.module.scss +++ b/src/components/middle/PinnedMessageNavigation.module.scss @@ -1,35 +1,41 @@ .pinned-message-border { position: relative; - height: 2.25rem; - margin: 0.125rem 0; + + overflow: hidden; + width: 0.125rem; min-width: 0.125rem; - overflow: hidden; + height: 2.25rem; + margin: 0.125rem 0; } .pinned-message-border-wrapper-1 { - height: 2.25rem; width: 0.125rem; + height: 2.25rem; border-radius: 0.0625rem; background: var(--color-primary); } .pinned-message-border-wrapper { - background-color: var(--color-primary-opacity-hover); - position: relative; will-change: transform; + position: relative; + background-color: var(--color-primary-opacity-hover); transition: transform 0.25s ease-in-out; } .pinned-message-border-mark { - position: absolute; - left: 0; - top: 0; - width: 0.125rem; - background: var(--color-primary); - border-radius: 0.0625rem; will-change: transform; - transition: transform 0.25s ease-in-out; + + position: absolute; + top: 0; + left: 0; transform: translateY(var(--translate-y)); + + width: 0.125rem; height: var(--height); + border-radius: 0.0625rem; + + background: var(--color-primary); + + transition: transform 0.25s ease-in-out; } diff --git a/src/components/middle/ReactorListModal.scss b/src/components/middle/ReactorListModal.scss index 91e56906f..1bafd922f 100644 --- a/src/components/middle/ReactorListModal.scss +++ b/src/components/middle/ReactorListModal.scss @@ -5,9 +5,10 @@ .modal-content { overflow: hidden; - height: min(92vh, 32rem); display: flex; flex-direction: column; + + height: min(92vh, 32rem); padding: 0.5rem 0 !important; } @@ -22,9 +23,9 @@ } .Reactions { + justify-content: space-between; margin-bottom: 0.5rem; padding: 0 1rem; - justify-content: space-between; &::after { content: ''; @@ -43,9 +44,9 @@ } .reactor-list { - max-height: 100%; overflow: auto; overflow-x: hidden; + max-height: 100%; padding: 0 0.5rem; } @@ -65,10 +66,11 @@ } .status { - color: var(--color-text-secondary); display: flex; align-items: center; + font-size: 0.875rem !important; line-height: 1.25rem; + color: var(--color-text-secondary); } } diff --git a/src/components/middle/RequirementToContactMessage.module.scss b/src/components/middle/RequirementToContactMessage.module.scss index 6a7a57df0..4ad03126f 100644 --- a/src/components/middle/RequirementToContactMessage.module.scss +++ b/src/components/middle/RequirementToContactMessage.module.scss @@ -1,19 +1,24 @@ .root { - width: 100%; - height: 100%; display: flex; align-items: center; justify-content: center; + + width: 100%; + height: 100%; + color: var(--color-white); .button { - background: var(--pattern-color); width: auto; - margin-top: 1.0625rem; - text-transform: none; - color: var(--color-white); height: 2.25rem; + margin-top: 1.0625rem; + line-height: 2.25rem; + color: var(--color-white); + text-transform: none; + + background: var(--pattern-color); + transition: filter 150ms ease-in-out; &:not(.disabled):not(:disabled):hover { @@ -27,24 +32,29 @@ display: flex; flex-direction: column; align-items: center; - background: var(--pattern-color); + max-width: 13.5rem; padding: 1.0625rem 0; border-radius: 1.5rem; + background: var(--pattern-color); + &[dir="rtl"] { text-align: right; } } .icons-container { - border-radius: 50%; - width: 8rem; - height: 8rem; + position: relative; + display: flex; align-items: center; justify-content: center; - position: relative; + + width: 8rem; + height: 8rem; + border-radius: 50%; + background: var(--pattern-color); } @@ -53,27 +63,29 @@ } .comments-icon { - font-size: 5rem; position: absolute; top: 0; transform: translateY(1.75rem); + font-size: 5rem; } .description { - white-space: pre; - text-align: center; display: inline-flex; - align-items: center; flex-wrap: wrap; + align-items: center; justify-content: center; - padding: 0 1rem; + margin-top: 0.5rem; + padding: 0 1rem; + + text-align: center; + white-space: pre; } .starIconContainer { - font-weight: var(--font-weight-medium); display: inline-flex; align-items: center; + font-weight: var(--font-weight-medium); } .starIcon { diff --git a/src/components/middle/ScrollDownButton.module.scss b/src/components/middle/ScrollDownButton.module.scss index 0290eeaf8..712382aef 100644 --- a/src/components/middle/ScrollDownButton.module.scss +++ b/src/components/middle/ScrollDownButton.module.scss @@ -1,12 +1,14 @@ .root { + pointer-events: auto; + user-select: none; + + position: relative; + display: flex; flex-direction: column; align-items: center; - position: relative; - transition: opacity 0.2s ease; - user-select: none; - pointer-events: auto; + transition: opacity 0.2s ease; &:not(:first-child) { margin-top: 0.5rem; @@ -18,8 +20,8 @@ } .button { - box-shadow: 0 1px 2px var(--color-default-shadow); color: var(--color-composer-button); + box-shadow: 0 1px 2px var(--color-default-shadow); @media (max-width: 600px) { width: 2.875rem !important; @@ -32,24 +34,25 @@ } .unread-count { - min-width: 1.5rem; - height: 1.5rem; - padding: 0 0.4375rem; - border-radius: 0.75rem; - font-size: 0.875rem; - line-height: 1.5rem; - font-weight: var(--font-weight-medium); - text-align: center; + pointer-events: none; position: absolute; top: -0.3125rem; right: -0.3125rem; - background-color: var(--color-green); + min-width: 1.5rem; + height: 1.5rem; + padding: 0 0.4375rem; border: 1px solid var(--color-background); - color: white; + border-radius: 0.75rem; - pointer-events: none; + font-size: 0.875rem; + font-weight: var(--font-weight-medium); + line-height: 1.5rem; + color: white; + text-align: center; + + background-color: var(--color-green); @media (max-width: 600px) { top: -0.6875rem; diff --git a/src/components/middle/composer/AttachBotIcon.module.scss b/src/components/middle/composer/AttachBotIcon.module.scss index bac195c62..ce5f19ec3 100644 --- a/src/components/middle/composer/AttachBotIcon.module.scss +++ b/src/components/middle/composer/AttachBotIcon.module.scss @@ -1,10 +1,11 @@ .root { - width: 1.5rem; - height: 1.5rem; display: flex; align-items: center; justify-content: center; + width: 1.5rem; + height: 1.5rem; + &.compact { width: 1.25rem; height: 1.25rem; @@ -12,8 +13,8 @@ } .image { - width: 1.75rem; position: absolute; + width: 1.75rem; &.compact { width: 1.5rem; diff --git a/src/components/middle/composer/AttachMenu.scss b/src/components/middle/composer/AttachMenu.scss index 643f0c7ae..2d1ca5a63 100644 --- a/src/components/middle/composer/AttachMenu.scss +++ b/src/components/middle/composer/AttachMenu.scss @@ -11,21 +11,18 @@ position: relative; top: -3.5rem; - @media (max-width: 600px) { - top: -2.875rem; - } - .bubble { - max-height: 20rem; overflow: auto; + max-height: 20rem; } .is-pointer-env & { > .backdrop { position: absolute; top: -1rem; - left: auto; right: 0; + left: auto; + width: 3.5rem; } } @@ -33,6 +30,10 @@ .media-disabled > button { white-space: normal; } + + @media (max-width: 600px) { + top: -2.875rem; + } } } diff --git a/src/components/middle/composer/AttachmentModal.module.scss b/src/components/middle/composer/AttachmentModal.module.scss index f13c0e6b9..51c482580 100644 --- a/src/components/middle/composer/AttachmentModal.module.scss +++ b/src/components/middle/composer/AttachmentModal.module.scss @@ -13,18 +13,16 @@ .modal-header-condensed { padding: 0.375rem 1.125rem !important; border-bottom: 1px solid transparent; - transition: border-color 250ms ease-in-out; } .modal-content { + overflow-x: auto; display: flex; flex-direction: column; - padding: 0; // Full height - header - margins max-height: calc(100vh - 3.25rem - 5rem); - - overflow-x: auto; + padding: 0; @media (max-width: 600px) { padding-bottom: env(safe-area-inset-bottom); @@ -33,11 +31,13 @@ .symbol-menu-button { flex-shrink: 0; - background: none !important; + align-self: flex-end; + width: 3.5rem !important; height: 3.5rem !important; padding: 0 !important; - align-self: flex-end; + + background: none !important; } .symbol-menu-button, .mobile-symbol-menu-button { @@ -47,10 +47,10 @@ } .mobile-symbol-menu-button { - margin-left: 0 !important; - margin-right: -1.25rem !important; width: 2.875rem; height: 2.875rem; + margin-right: -1.25rem !important; + margin-left: 0 !important; } } @@ -60,11 +60,12 @@ &.mobile :global { .modal-dialog { - margin: 0; - max-width: 100% !important; align-self: end; - border-bottom-left-radius: 0; + + max-width: 100% !important; + margin: 0; border-bottom-right-radius: 0; + border-bottom-left-radius: 0; } } @@ -73,8 +74,8 @@ } &.mobile.symbolMenuOpen :global(.modal-dialog) { - transition: var(--layer-transition); transform: translate3d(0, calc((var(--symbol-menu-height)) * -1), 0); + transition: var(--layer-transition); @media (max-width: 600px) { transform: translate3d(0, calc((var(--symbol-menu-height) - env(safe-area-inset-bottom)) * -1), 0); @@ -92,14 +93,14 @@ } .attachments { - max-height: 26rem; - min-height: 5rem; overflow: auto; - flex-shrink: 1; - display: flex; + flex-shrink: 1; flex-wrap: wrap; gap: 0.5rem; + + min-height: 5rem; + max-height: 26rem; margin: 0 0.25rem; padding: 0 0.25rem; @@ -115,7 +116,6 @@ .caption-wrapper { position: relative; padding: 0 0.5rem; - border-top: 1px solid transparent; transition: border-color 250ms ease-in-out; @@ -125,8 +125,8 @@ } .MentionTooltip { - right: 0 !important; z-index: 0; + right: 0 !important; } } } @@ -137,43 +137,43 @@ .caption { display: flex; - align-items: center; gap: 0.5rem; + align-items: center; } .dropTarget { - display: flex; - flex-direction: column; - position: relative; overflow: hidden; + display: flex; + flex-direction: column; } .dropOutlineContainer { pointer-events: none; - overflow: visible !important; position: absolute; - padding-top: 0.5rem; + z-index: 2; left: 0.5rem; + + overflow: visible !important; + width: calc(100% - 1rem); height: calc(100% - 0.5rem); - - background-color: var(--color-background); + padding-top: 0.5rem; opacity: 0; + background-color: var(--color-background); + transition: opacity 0.2s; - z-index: 2; } .dropOutline { fill: none; - stroke: var(--color-primary); - stroke-width: 2; stroke-dasharray: 11, 8; - stroke-linecap: round; stroke-dashoffset: 0; + stroke-linecap: round; + stroke-width: 2; animation: outline 0.5s linear infinite; animation-play-state: paused; @@ -191,12 +191,14 @@ .dropTarget { &::after { content: attr(data-attach-description); + position: absolute; + z-index: 2; top: 50%; left: 50%; transform: translate(-50%, -50%); + color: var(--color-primary); - z-index: 2; } .caption-wrapper, @@ -210,8 +212,8 @@ } .send-wrapper { - align-self: flex-end; position: relative; + align-self: flex-end; padding-bottom: 0.5rem; } @@ -225,9 +227,9 @@ bottom: 2.25rem; .is-pointer-env & > .backdrop { - width: 100%; top: -2rem; bottom: auto; + width: 100%; height: 3.5rem; } } diff --git a/src/components/middle/composer/AttachmentModalItem.module.scss b/src/components/middle/composer/AttachmentModalItem.module.scss index 02f777b41..35b8101c4 100644 --- a/src/components/middle/composer/AttachmentModalItem.module.scss +++ b/src/components/middle/composer/AttachmentModalItem.module.scss @@ -1,13 +1,13 @@ .root { - flex: 1 calc(50% - 0.5rem); - min-width: 0; position: relative; + overflow: hidden; display: flex; + flex: 1 calc(50% - 0.5rem); align-items: center; + min-width: 0; border-radius: var(--border-radius-default); - overflow: hidden; } .preview { @@ -17,18 +17,22 @@ } .duration { - background: rgba(0, 0, 0, 0.25); - color: #fff; - font-size: 0.75rem; - position: absolute; - left: 0.1875rem; - top: 0.1875rem; - z-index: 1; - padding: 0 0.375rem; - border-radius: 0.75rem; - line-height: 1.125rem; -webkit-user-select: none; user-select: none; + + position: absolute; + z-index: 1; + top: 0.1875rem; + left: 0.1875rem; + + padding: 0 0.375rem; + border-radius: 0.75rem; + + font-size: 0.75rem; + line-height: 1.125rem; + color: #fff; + + background: rgba(0, 0, 0, 0.25); } .single .preview { @@ -41,22 +45,22 @@ } .file { - margin: 0.5rem; flex-grow: 1; min-width: 0; + margin: 0.5rem; } .overlay { position: absolute; - bottom: 0.5rem; right: 0.5rem; - background-color: rgba(0, 0, 0, 0.25); - border-radius: var(--border-radius-default); - - display: flex; + bottom: 0.5rem; overflow: hidden; + display: flex; + border-radius: var(--border-radius-default); + + background-color: rgba(0, 0, 0, 0.25); backdrop-filter: blur(10px); :global(body.no-menu-blur) & { @@ -66,14 +70,16 @@ } .action-item { + cursor: var(--custom-cursor, pointer); + display: block; + padding: 0.3125rem; - color: white; border-radius: var(--border-radius-messages-small); - transition: 0.2s background-color ease-in-out; + color: white; - cursor: var(--custom-cursor, pointer); + transition: 0.2s background-color ease-in-out; &:hover { background-color: rgba(0, 0, 0, 0.15); @@ -85,8 +91,7 @@ } .delete-file { + margin-right: 1rem; font-size: 1.5rem; color: var(--color-text-secondary); - - margin-right: 1rem; } diff --git a/src/components/middle/composer/BotCommandMenu.scss b/src/components/middle/composer/BotCommandMenu.scss index e2fc16edb..5e6087ba7 100644 --- a/src/components/middle/composer/BotCommandMenu.scss +++ b/src/components/middle/composer/BotCommandMenu.scss @@ -1,10 +1,11 @@ .BotCommandMenu { .menu-container { + overflow: auto; + flex-direction: column; + width: calc(100% - 4rem); max-width: 20rem; max-height: 40vh; - overflow: auto; - flex-direction: column; @media (max-width: 600px) { width: calc(100% - 3rem); @@ -15,8 +16,9 @@ > .backdrop { position: absolute; top: -1rem; - left: 0; right: auto; + left: 0; + width: 3.5rem; height: 4.5rem; } diff --git a/src/components/middle/composer/BotKeyboardMenu.scss b/src/components/middle/composer/BotKeyboardMenu.scss index af79b7ce2..8cae8575f 100644 --- a/src/components/middle/composer/BotKeyboardMenu.scss +++ b/src/components/middle/composer/BotKeyboardMenu.scss @@ -8,11 +8,12 @@ } .content { + overflow-y: scroll; display: flex; flex-direction: column; - padding: 0.1875rem 0.625rem; + max-height: 75vh; - overflow-y: scroll; + padding: 0.1875rem 0.625rem; @include mixins.adapt-padding-to-scrollbar(0.625rem); @@ -27,19 +28,22 @@ .Button { flex: 1; + width: auto; height: auto; min-height: 3.0625rem; - border-radius: var(--border-radius-messages-small); border: 2px solid var(--color-primary); - background: var(--color-background); - color: var(--color-primary); + border-radius: var(--border-radius-messages-small); + font-weight: var(--font-weight-medium); + color: var(--color-primary); text-transform: none; + background: var(--color-background); + &:hover { - color: #fff; border-color: var(--color-primary-shade); + color: #fff; background: var(--color-primary-shade); } } diff --git a/src/components/middle/composer/ChatCommand.scss b/src/components/middle/composer/ChatCommand.scss index 9bc766f38..8e0986cb0 100644 --- a/src/components/middle/composer/ChatCommand.scss +++ b/src/components/middle/composer/ChatCommand.scss @@ -16,8 +16,8 @@ &.with-avatar { .multiline-item { - padding: 0; display: flex; + padding: 0; } .content-inner { diff --git a/src/components/middle/composer/ChatCommandTooltip.module.scss b/src/components/middle/composer/ChatCommandTooltip.module.scss index e71b15385..95359bef3 100644 --- a/src/components/middle/composer/ChatCommandTooltip.module.scss +++ b/src/components/middle/composer/ChatCommandTooltip.module.scss @@ -1,9 +1,8 @@ .root { + z-index: -1; + flex-direction: column; width: calc(100% - 4rem); max-width: 26rem; - flex-direction: column; - - z-index: -1; @media (max-width: 600px) { width: calc(100% - 3rem); diff --git a/src/components/middle/composer/ComposerEmbeddedMessage.scss b/src/components/middle/composer/ComposerEmbeddedMessage.scss index 82fbb5fa6..0796e5bf7 100644 --- a/src/components/middle/composer/ComposerEmbeddedMessage.scss +++ b/src/components/middle/composer/ComposerEmbeddedMessage.scss @@ -1,5 +1,6 @@ .ComposerEmbeddedMessage { --accent-color: var(--color-primary); + height: 3.125rem; /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */ transition: height 150ms ease-out, opacity 150ms ease-out; @@ -24,15 +25,19 @@ & .embedded-left-icon { position: relative; + + display: grid; flex-shrink: 0; - background: none !important; + place-content: center; + height: 2.625rem; padding: 0.5625rem 0.75rem 0.5625rem 1rem; - display: grid; - place-content: center; + font-size: 1.5rem; color: var(--accent-color); + background: none !important; + @media (max-width: 600px) { width: 2.875rem; } @@ -40,14 +45,17 @@ & .embedded-cancel { flex-shrink: 0; - background: none !important; + align-self: center; + width: auto; height: 1.5rem; - padding: 0; margin: 0.5625rem 1rem 0.5625rem 0.75rem; - align-self: center; + padding: 0; + color: var(--accent-color, var(--color-primary)); + background: none !important; + @media (max-width: 600px) { margin: 0.5625rem 0.75rem 0.5625rem 0.5rem; } @@ -63,8 +71,8 @@ .quote-reply { position: absolute; - right: 0.75rem; top: 0.5rem; + right: 0.75rem; font-size: 0.5rem; @media (max-width: 600px) { diff --git a/src/components/middle/composer/CustomEmojiTooltip.module.scss b/src/components/middle/composer/CustomEmojiTooltip.module.scss index cfcdeb234..85213c3d6 100644 --- a/src/components/middle/composer/CustomEmojiTooltip.module.scss +++ b/src/components/middle/composer/CustomEmojiTooltip.module.scss @@ -1,14 +1,16 @@ .root:global(.composer-tooltip) { - display: flex; - padding: 0; z-index: 1; overflow-x: scroll; overflow-y: hidden; + display: flex; + + padding: 0; .emojiButton { - flex: 0 0 2rem; --custom-emoji-size: 2rem; + + flex: 0 0 2rem; margin: 0.5rem 0 0.5rem 0.25rem; } diff --git a/src/components/middle/composer/CustomSendMenu.scss b/src/components/middle/composer/CustomSendMenu.scss index 8e780975e..20cda208e 100644 --- a/src/components/middle/composer/CustomSendMenu.scss +++ b/src/components/middle/composer/CustomSendMenu.scss @@ -6,8 +6,9 @@ > .backdrop { position: absolute; top: -1rem; - left: auto; right: 0; + left: auto; + width: 3.5rem; } } @@ -22,22 +23,18 @@ &.with-effects .bubble { overflow: initial; - background: none !important; backdrop-filter: none !important; box-shadow: none; } &.with-effects &_items { + padding: 0.25rem 0; + border-radius: var(--border-radius-default); + background: var(--color-background-compact-menu); backdrop-filter: blur(10px); box-shadow: 0 0.25rem 0.5rem 0.125rem var(--color-default-shadow); - border-radius: var(--border-radius-default); - padding: 0.25rem 0; - - @media (min-width: 600px) { - margin-inline-end: 2.75rem; - } body.no-menu-blur & { background: var(--color-background); @@ -48,6 +45,10 @@ opacity: 0; transition: 300ms opacity; } + + @media (min-width: 600px) { + margin-inline-end: 2.75rem; + } } .ReactionSelector { diff --git a/src/components/middle/composer/DropArea.scss b/src/components/middle/composer/DropArea.scss index 08820c4bc..6a247b755 100644 --- a/src/components/middle/composer/DropArea.scss +++ b/src/components/middle/composer/DropArea.scss @@ -1,15 +1,16 @@ .DropArea { position: absolute; + z-index: var(--z-drop-area); top: 0; right: 0; left: 0; - height: 100vh; - z-index: var(--z-drop-area); - padding: calc(80px + var(--call-header-height, 0rem)) 20px 20px; display: flex; flex-direction: column; + height: 100vh; + padding: calc(80px + var(--call-header-height, 0rem)) 20px 20px; + #Main.right-column-open & { max-width: calc(100% - var(--right-column-width)); } diff --git a/src/components/middle/composer/DropTarget.scss b/src/components/middle/composer/DropTarget.scss index 5eaf312aa..49fa7ab36 100644 --- a/src/components/middle/composer/DropTarget.scss +++ b/src/components/middle/composer/DropTarget.scss @@ -1,22 +1,21 @@ .DropTarget { - border-radius: var(--border-radius-default); - background: var(--color-background); - padding: 1.25rem; + position: relative; + + display: flex; flex: 1 1 auto; + width: 100%; max-width: 43.75rem; - margin-left: auto; margin-right: auto; margin-bottom: 0.3125rem; + margin-left: auto; + padding: 1.25rem; + border-radius: var(--border-radius-default); - position: relative; - display: flex; color: #a4acb3; - box-shadow: 0 1px 2px var(--color-default-shadow); - @media (max-height: 350px) { - padding: 0.75rem; - } + background: var(--color-background); + box-shadow: 0 1px 2px var(--color-default-shadow); &.hovered { .target-content { @@ -46,12 +45,11 @@ .target-outline { fill: none; - stroke: var(--color-placeholders); - stroke-width: 2; stroke-dasharray: 11, 8; - stroke-linecap: round; stroke-dashoffset: 0; + stroke-linecap: round; + stroke-width: 2; transition: 0.2s stroke; animation: outline 0.5s linear infinite; @@ -60,36 +58,39 @@ .target-content { pointer-events: none; - border-radius: 0.5rem; - flex: 1 1 100%; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - transition: 0.2s color; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); + + display: flex; + flex: 1 1 100%; + flex-direction: column; + align-items: center; + justify-content: center; + + border-radius: 0.5rem; + + transition: 0.2s color; } .icon { + margin-bottom: 2.25rem; font-size: 6.25rem; line-height: 4.6875rem; - margin-bottom: 2.25rem; @media (max-height: 520px) { + margin-bottom: 1rem; font-size: 4.25rem; line-height: 3.5rem; - margin-bottom: 1rem; } @media (max-height: 450px) { + margin-top: 0.25rem; + margin-bottom: 0.5rem; font-size: 2rem; line-height: 1rem; - margin-bottom: 0.5rem; - margin-top: 0.25rem; } } @@ -112,6 +113,10 @@ } } + @media (max-height: 350px) { + padding: 0.75rem; + } + @keyframes outline { from { stroke-dashoffset: 0; diff --git a/src/components/middle/composer/EmojiButton.scss b/src/components/middle/composer/EmojiButton.scss index 746066f5f..d04b791cc 100644 --- a/src/components/middle/composer/EmojiButton.scss +++ b/src/components/middle/composer/EmojiButton.scss @@ -1,21 +1,21 @@ .EmojiButton { + cursor: var(--custom-cursor, pointer); + display: inline-flex; align-items: center; justify-content: center; + width: 2.25rem; height: 2.25rem; margin: 0.3125rem; border-radius: var(--border-radius-messages-small); - cursor: var(--custom-cursor, pointer); + font-size: 1.875rem; line-height: 2.25rem; background-color: transparent; - transition: background-color 0.15s ease; - @media (max-width: 600px) { - margin: 0.25rem; - } + transition: background-color 0.15s ease; .mac-os-fix & { line-height: inherit; @@ -34,4 +34,8 @@ & > .custom-emoji { --custom-emoji-size: 2rem; } + + @media (max-width: 600px) { + margin: 0.25rem; + } } diff --git a/src/components/middle/composer/EmojiPicker.scss b/src/components/middle/composer/EmojiPicker.scss index de5793de9..93eeb486c 100644 --- a/src/components/middle/composer/EmojiPicker.scss +++ b/src/components/middle/composer/EmojiPicker.scss @@ -7,8 +7,8 @@ height: 100%; &-main { - height: calc(100% - 3rem); overflow-y: auto; + height: calc(100% - 3rem); padding: 0.5rem 0.75rem; @include mixins.adapt-padding-to-scrollbar(0.75rem); @@ -21,10 +21,10 @@ } &-header { - height: 3rem; display: flex; align-items: center; justify-content: space-around; + height: 3rem; &.with-top-border { /* stylelint-disable-next-line plugin/whole-pixel */ @@ -32,14 +32,16 @@ } @media (max-width: 600px) { + scrollbar-color: rgba(0, 0, 0, 0); + scrollbar-width: none; + overflow-x: auto; overflow-y: hidden; justify-content: space-between; - white-space: nowrap; + padding: 0.4375rem 0; - scrollbar-width: none; - scrollbar-color: rgba(0, 0, 0, 0); + white-space: nowrap; &::-webkit-scrollbar { height: 0; @@ -49,19 +51,21 @@ background-color: rgba(0, 0, 0, 0); } + // Spacer to counter last button margin not being accounted in scroll width + &::after { + content: ""; + + display: block; + flex-shrink: 0; + + width: 1px; + height: 1rem; + } + .symbol-set-button { display: inline-flex; vertical-align: middle; } - - // Spacer to counter last button margin not being accounted in scroll width - &::after { - content: ""; - display: block; - flex-shrink: 0; - width: 1px; - height: 1rem; - } } } } diff --git a/src/components/middle/composer/EmojiTooltip.scss b/src/components/middle/composer/EmojiTooltip.scss index 4b9f0bfbc..b57049c9e 100644 --- a/src/components/middle/composer/EmojiTooltip.scss +++ b/src/components/middle/composer/EmojiTooltip.scss @@ -1,9 +1,8 @@ .EmojiTooltip { - display: flex; - padding: 0; - overflow-x: scroll; overflow-y: hidden; + display: flex; + padding: 0; .EmojiButton { flex: 0 0 2.25rem; diff --git a/src/components/middle/composer/GifPicker.scss b/src/components/middle/composer/GifPicker.scss index 3969b04cc..a1f749808 100644 --- a/src/components/middle/composer/GifPicker.scss +++ b/src/components/middle/composer/GifPicker.scss @@ -1,23 +1,25 @@ .GifPicker { + position: relative; + top: 0.1875rem; + + overflow-y: auto; display: grid; - grid-template-columns: repeat(6, 1fr); + grid-auto-flow: dense; grid-auto-rows: 6.25rem; grid-gap: 0.125rem; - grid-auto-flow: dense; + grid-template-columns: repeat(6, 1fr); + height: calc(100% - 0.1875rem); - overflow-y: auto; margin: 0 0.1875rem; padding-bottom: 0.1875rem; border-radius: 1.125rem 1.125rem 0 0; - position: relative; - top: 0.1875rem; .Loading, .picker-disabled { position: absolute; top: 0; + right: 0; bottom: 0; left: 0; - right: 0; } .SymbolMenu.mobile-menu & { diff --git a/src/components/middle/composer/InlineBotTooltip.scss b/src/components/middle/composer/InlineBotTooltip.scss index 2199ac08e..45a200961 100644 --- a/src/components/middle/composer/InlineBotTooltip.scss +++ b/src/components/middle/composer/InlineBotTooltip.scss @@ -5,22 +5,20 @@ } &.gallery { - display: grid; - grid-template-columns: repeat(8, 1fr); - grid-auto-flow: dense; - grid-gap: 1px; - padding: 0; scrollbar-gutter: stable both-edges; - @media (max-width: 600px) { - grid-template-columns: repeat(4, 1fr); - } + display: grid; + grid-auto-flow: dense; + grid-gap: 1px; + grid-template-columns: repeat(8, 1fr); + + padding: 0; .switch-pm { grid-column: 1 / -1; .ListItem-button { - border-bottom-left-radius: 0; border-bottom-right-radius: 0; + border-bottom-left-radius: 0; } } @@ -37,6 +35,7 @@ position: absolute; top: 0; left: 0; + width: 100% !important; height: 100% !important; @@ -48,6 +47,10 @@ } } } + + @media (max-width: 600px) { + grid-template-columns: repeat(4, 1fr); + } } &:not(.gallery) .GifButton { diff --git a/src/components/middle/composer/MentionTooltip.scss b/src/components/middle/composer/MentionTooltip.scss index ece4b3f59..63a7b3156 100644 --- a/src/components/middle/composer/MentionTooltip.scss +++ b/src/components/middle/composer/MentionTooltip.scss @@ -1,13 +1,8 @@ .MentionTooltip { + z-index: -1; + flex-direction: column; width: calc(100% - 4rem); max-width: 20rem; - flex-direction: column; - - z-index: -1; - - @media (max-width: 600px) { - width: calc(100% - 3rem); - } .ListItem.chat-item-clickable { margin: 0; @@ -19,8 +14,8 @@ } .title { - margin-inline-end: 0.625rem; max-width: 70%; + margin-inline-end: 0.625rem; } .handle { @@ -53,4 +48,8 @@ display: none !important; } } + + @media (max-width: 600px) { + width: calc(100% - 3rem); + } } diff --git a/src/components/middle/composer/PollModal.scss b/src/components/middle/composer/PollModal.scss index 436814079..e6b4a2b3e 100644 --- a/src/components/middle/composer/PollModal.scss +++ b/src/components/middle/composer/PollModal.scss @@ -15,19 +15,20 @@ } .options-header { - color: var(--color-text-secondary); + margin-top: 0.5rem; font-size: 1rem; font-weight: var(--font-weight-medium); - margin-top: 0.5rem; + color: var(--color-text-secondary); } .options-list { + overflow: auto; + overflow-y: scroll; + + max-height: 20rem; margin: 1rem -0.75rem -0.5rem; padding: 0 0.75rem; border-top: 1px solid var(--color-chat-hover); - max-height: 20rem; - overflow: auto; - overflow-y: scroll; @include mixins.adapt-padding-to-scrollbar(0.75rem); @@ -73,9 +74,9 @@ } .poll-error { + margin: -1rem 0 1rem 0.25rem; font-size: smaller; color: var(--color-error); - margin: -1rem 0 1rem 0.25rem; } .input-group:last-child { diff --git a/src/components/middle/composer/SendAsMenu.scss b/src/components/middle/composer/SendAsMenu.scss index b88de88af..ba85e36d5 100644 --- a/src/components/middle/composer/SendAsMenu.scss +++ b/src/components/middle/composer/SendAsMenu.scss @@ -1,18 +1,20 @@ .SendAsMenu { .send-as-title { + margin-block: 0.5rem; + margin-inline-start: 1rem; + font-weight: var(--font-weight-medium); line-height: 1.25rem; overflow-wrap: anywhere; - margin-inline-start: 1rem; - margin-block: 0.5rem; } .menu-container { + overflow: auto; + flex-direction: column; + width: calc(100% - 4rem); max-width: 20rem; max-height: 40vh; - overflow: auto; - flex-direction: column; @media (max-width: 600px) { width: calc(100% - 3rem); @@ -21,11 +23,12 @@ .is-pointer-env & { > .backdrop { - z-index: 2; position: absolute; + z-index: 2; top: -1rem; - left: 0; right: auto; + left: 0; + width: 3.5rem; height: 4.5rem; } @@ -33,32 +36,36 @@ } .SendAsItem { - margin: 0 !important; $border-size: 2px; + margin: 0 !important; + .Avatar.selected { - margin-right: 0.75rem; position: relative; width: calc(2.125rem - #{$border-size * 2}); height: calc(2.125rem - #{$border-size * 2}); + margin-right: 0.75rem; &::before { - display: block; content: ""; + position: absolute; top: #{-$border-size * 2}; left: #{-$border-size * 2}; - border: $border-size solid var(--color-primary); + + display: block; + width: calc(100% + #{$border-size * 4}); height: calc(100% + #{$border-size * 4}); + border: $border-size solid var(--color-primary); border-radius: 50%; } } .ListItem-button { + align-items: center; padding: 0.5625rem 1rem !important; border-radius: 0; - align-items: center; & > .send-as-icon-locked { margin-right: 0.5rem; @@ -71,7 +78,7 @@ .subtitle { font-size: 0.9375rem; - color: var(--color-text-secondary); line-height: 1.3125; + color: var(--color-text-secondary); } } diff --git a/src/components/middle/composer/StickerPicker.module.scss b/src/components/middle/composer/StickerPicker.module.scss index 7db0ef4fd..47c9f8fed 100644 --- a/src/components/middle/composer/StickerPicker.module.scss +++ b/src/components/middle/composer/StickerPicker.module.scss @@ -11,19 +11,19 @@ --symbol-set-gap-size: 0.25rem; position: relative; + + overflow-x: hidden; + overflow-y: auto; + height: 100%; + padding: 0.5rem 0.25rem; + + @include mixins.adapt-padding-to-scrollbar(0.25rem); &.hasHeader { height: calc(100% - 3rem); } - overflow-y: auto; - overflow-x: hidden; - - padding: 0.5rem 0.25rem; - - @include mixins.adapt-padding-to-scrollbar(0.25rem); - &_customEmoji { padding: 0.5rem 0.75rem; @@ -36,14 +36,16 @@ } .header { - height: 3rem; + scrollbar-color: rgba(0, 0, 0, 0); + scrollbar-width: none; + overflow-x: auto; overflow-y: hidden; - white-space: nowrap; + + height: 3rem; padding: 0 0.375rem; - scrollbar-width: none; - scrollbar-color: rgba(0, 0, 0, 0); + white-space: nowrap; &::-webkit-scrollbar { height: 0; @@ -56,8 +58,10 @@ // Spacer to counter last button margin not being accounted in scroll width &::after { content: ""; + display: block; flex-shrink: 0; + width: 1px; height: 1rem; } @@ -73,17 +77,16 @@ } :global(.shared-canvas) { - max-width: 1280px; // STICKER_PICKER_MAX_SHARED_COVERS * (STICKER_SIZE_PICKER_HEADER + 10 * 2) z-index: 1; + max-width: 1280px; // STICKER_PICKER_MAX_SHARED_COVERS * (STICKER_SIZE_PICKER_HEADER + 10 * 2) } } .stickerCover { display: inline-grid; - vertical-align: middle; grid-template-areas: "cover"; - justify-content: center; align-items: center; + justify-content: center; width: 2.25rem !important; height: 2.25rem; @@ -91,6 +94,8 @@ padding: 0; border-radius: var(--border-radius-messages-small) !important; + vertical-align: middle; + &:global(.StickerButton) { background-size: 1.875rem; @@ -114,9 +119,10 @@ } .pickerDisabled { - width: 100%; - height: 100%; display: flex; align-items: center; justify-content: center; + + width: 100%; + height: 100%; } diff --git a/src/components/middle/composer/StickerSetCover.module.scss b/src/components/middle/composer/StickerSetCover.module.scss index b0e183d8c..71113742e 100644 --- a/src/components/middle/composer/StickerSetCover.module.scss +++ b/src/components/middle/composer/StickerSetCover.module.scss @@ -2,11 +2,12 @@ --_size: 2rem; --custom-emoji-size: var(--_size); - width: var(--_size); - height: var(--_size); display: flex; align-items: center; justify-content: center; + + width: var(--_size); + height: var(--_size); border-radius: var(--border-radius-messages-small) !important; :global(.AnimatedSticker) { diff --git a/src/components/middle/composer/StickerTooltip.scss b/src/components/middle/composer/StickerTooltip.scss index b9c940d9a..40ca634ce 100644 --- a/src/components/middle/composer/StickerTooltip.scss +++ b/src/components/middle/composer/StickerTooltip.scss @@ -1,7 +1,7 @@ .StickerTooltip { display: grid; - grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr)); grid-auto-rows: auto; + grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr)); place-items: center; &.hidden { diff --git a/src/components/middle/composer/SymbolMenu.scss b/src/components/middle/composer/SymbolMenu.scss index d0fd9f2cb..326013f9f 100644 --- a/src/components/middle/composer/SymbolMenu.scss +++ b/src/components/middle/composer/SymbolMenu.scss @@ -8,17 +8,19 @@ &.mobile-menu { position: fixed; - left: 0; + z-index: var(--z-symbol-menu-mobile); right: 0; bottom: 0; - background: var(--color-background); - z-index: var(--z-symbol-menu-mobile); + left: 0; + transform: translate3d(0, calc(var(--symbol-menu-height)), 0); - transition: transform var(--layer-transition); padding-right: env(safe-area-inset-right); padding-bottom: 0; padding-left: env(safe-area-inset-left); - transform: translate3d(0, calc(var(--symbol-menu-height)), 0); + + background: var(--color-background); + + transition: transform var(--layer-transition); &.open:not(.in-attachment-modal) { transform: translate3d(0, 0, 0); @@ -52,16 +54,19 @@ } &-footer { - height: var(--symbol-menu-footer-height); + position: relative; + display: flex; align-items: center; justify-content: center; + + height: var(--symbol-menu-footer-height); /* stylelint-disable-next-line plugin/whole-pixel */ box-shadow: 0 -0.5px var(--color-borders-alternate); - position: relative; .Button { flex-shrink: 0; + width: 2.125rem !important; height: 2.125rem; margin: 0 0.25rem; @@ -100,15 +105,16 @@ > .backdrop { position: absolute; top: -1rem; - left: 0; right: auto; + left: 0; + width: 3.5rem; height: 4.5rem; } &.attachment-modal-symbol-menu > .backdrop { - bottom: 0; top: auto; + bottom: 0; } } @@ -131,10 +137,13 @@ .bubble { --offset-y: 4rem; - border-radius: 1.25rem; + overflow: hidden; + width: calc(var(--symbol-menu-width) + var(--scrollbar-width)); padding: 0; - overflow: hidden; + border-radius: 1.25rem; + + transition-duration: 200ms !important; body:not(.no-menu-blur) & { background: var(--color-background-compact-menu); @@ -144,8 +153,6 @@ &:not(.open) { transform: scale(0.85) !important; } - - transition-duration: 200ms !important; } .StickerButton.custom-emoji, .sticker-set-cover { @@ -153,18 +160,20 @@ } .picker-disabled { - height: var(--symbol-menu-height); display: flex; align-items: center; justify-content: center; + + height: var(--symbol-menu-height); + color: var(--color-text-secondary); } .symbol-close-button { - display: none; position: absolute; - right: max(0.25rem, env(safe-area-inset-right)); top: max(0.25rem, env(safe-area-inset-top)); + right: max(0.25rem, env(safe-area-inset-right)); + display: none; } @media (orientation: landscape) { @@ -175,10 +184,10 @@ } .symbol-set { - margin-bottom: 0.75rem; position: relative; display: flex; flex-direction: column; + margin-bottom: 0.75rem; &-header { display: flex; @@ -188,48 +197,53 @@ } &-title { + z-index: 1; + + unicode-bidi: plaintext; + overflow: hidden; display: flex; gap: 0.5rem; align-items: center; - font-size: 1rem; - line-height: 1.6875rem; - font-weight: var(--font-weight-medium); margin: 0; padding: 0 0.25rem 0.125rem; - overflow: hidden; - unicode-bidi: plaintext; - z-index: 1; + + font-size: 1rem; + font-weight: var(--font-weight-medium); + line-height: 1.6875rem; &-external { + margin-right: 0.5rem; color: var(--color-text); text-align: start; - margin-right: 0.5rem; } } &-name { overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; text-align: center; + text-overflow: ellipsis; + white-space: nowrap; } &-amount { + unicode-bidi: plaintext; + font-size: 0.875rem; font-weight: normal; - text-align: left; color: rgba(var(--color-text-secondary-rgb), 0.75); - unicode-bidi: plaintext; + text-align: left; white-space: nowrap; } &-chat { - background-color: var(--color-text-secondary); - color: var(--color-background); - border-radius: 1rem; padding-inline: 0.25rem; + border-radius: 1rem; + + color: var(--color-background); white-space: nowrap; + + background-color: var(--color-text-secondary); } &-add-button { @@ -237,12 +251,16 @@ } &-remove { - right: 0; - position: absolute; - font-size: 1rem; cursor: var(--custom-cursor, pointer); - border-radius: 50%; + + position: absolute; + right: 0; + padding: 0.25rem; + border-radius: 50%; + + font-size: 1rem; + transition: background-color 0.15s; &:active, @@ -259,6 +277,7 @@ &-button { flex-shrink: 0; + width: 2.125rem !important; height: 2.125rem; margin: 0 0.25rem; @@ -276,15 +295,12 @@ .symbol-set-container { display: grid !important; - justify-content: space-between; grid-template-columns: repeat(auto-fill, var(--emoji-size, 4.5rem)); row-gap: 0.25rem; column-gap: var(--symbol-set-gap-size, 0.625rem); - text-align: initial; + justify-content: space-between; - @media (max-width: 600px) { - grid-gap: 0.5rem; - } + text-align: initial; &:not(.shown) { display: block; @@ -298,4 +314,8 @@ > .StickerButton { margin: 0; } + + @media (max-width: 600px) { + grid-gap: 0.5rem; + } } diff --git a/src/components/middle/composer/TextFormatter.scss b/src/components/middle/composer/TextFormatter.scss index 257a34471..5c620aba7 100644 --- a/src/components/middle/composer/TextFormatter.scss +++ b/src/components/middle/composer/TextFormatter.scss @@ -1,37 +1,44 @@ .TextFormatter { - transform: translate(-50%, -3.25rem); z-index: 1; + transform: translate(-50%, -3.25rem); &, &-link-control { position: absolute; - background: var(--color-background); - border-radius: var(--border-radius-messages); + padding: 0.5rem 0.375rem; + border-radius: var(--border-radius-messages); + + background: var(--color-background); box-shadow: 0 1px 2px var(--color-default-shadow); } &-link-control { - left: 0; - top: 0; - opacity: 0; pointer-events: none; + + top: 0; + left: 0; + + opacity: 0; + transition: opacity 0.3s ease; .Modal & { max-width: 100%; } - @media (max-width: 600px) { - max-width: calc(100vw - var(--text-formatter-left) + 3rem); + input { + width: 100%; + border: none !important; + + color: var(--color-text); + + background-color: var(--color-background); + outline: none !important; } - input { - border: none !important; - outline: none !important; - width: 100%; - color: var(--color-text); - background-color: var(--color-background); + @media (max-width: 600px) { + max-width: calc(100vw - var(--text-formatter-left) + 3rem); } } @@ -50,24 +57,25 @@ } &-link-url-input-wrapper { - width: 20rem; position: relative; + width: 20rem; max-width: 100%; - @media (max-width: 600px) { - max-width: 90vw; - } - &::before, &::after { content: ""; - display: block; + position: absolute; + z-index: 2; top: 0; bottom: 0; + + display: block; + width: 1rem; - z-index: 2; + opacity: 0; + transition: opacity 0.2s ease; } @@ -92,6 +100,10 @@ opacity: 1; } } + + @media (max-width: 600px) { + max-width: 90vw; + } } &-link-url-confirm { @@ -106,29 +118,32 @@ &.link-control-shown { .TextFormatter-link-control { - opacity: 1; pointer-events: auto; + opacity: 1; } } .Button { - width: 2rem; - height: 2rem; - padding: 0.25rem; - font-size: 1.5rem; - margin: 0 0.125rem; - border-radius: var(--border-radius-messages-small); - flex-shrink: 0; cursor: var(--custom-cursor, pointer); + flex-shrink: 0; + + width: 2rem; + height: 2rem; + margin: 0 0.125rem; + padding: 0.25rem; + border-radius: var(--border-radius-messages-small); + + font-size: 1.5rem; + &.active { - background-color: var(--color-primary) !important; color: white; + background-color: var(--color-primary) !important; } &.disabled { - opacity: 0.5; pointer-events: none; + opacity: 0.5; } } } diff --git a/src/components/middle/composer/WebPagePreview.scss b/src/components/middle/composer/WebPagePreview.scss index ccc89d956..ac1784c3d 100644 --- a/src/components/middle/composer/WebPagePreview.scss +++ b/src/components/middle/composer/WebPagePreview.scss @@ -1,5 +1,6 @@ .WebPagePreview { --accent-color: var(--color-primary); + position: relative; height: 3.125rem; /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */ @@ -19,9 +20,9 @@ // TODO Remove duplication with `.ComposerEmbeddedMessage` &_inner { - padding-top: 0.5rem; display: flex; align-items: center; + padding-top: 0.5rem; } .ComposerEmbeddedMessage + & { @@ -39,15 +40,18 @@ } & &-left-icon { + display: grid; flex-shrink: 0; - background: none !important; + place-content: center; + height: 2.625rem; padding: 0.5625rem 0.75rem 0.5625rem 1rem; - display: grid; - place-content: center; + font-size: 1.5rem; color: var(--accent-color); + background: none !important; + @media (max-width: 600px) { width: 2.875rem; } @@ -55,23 +59,26 @@ & &-clear { flex-shrink: 0; - background: none !important; + align-self: center; + width: auto; height: 1.5rem; - padding: 0; margin: 0.5625rem 1rem 0.5625rem 0.75rem; - align-self: center; + padding: 0; + color: var(--accent-color); + background: none !important; + @media (max-width: 600px) { margin: 0.5625rem 0.75rem 0.5625rem 0.5rem; } } .WebPage { + overflow: hidden; flex-grow: 1; max-width: calc(100% - 3.375rem); - overflow: hidden; &.with-video .media-inner { display: none; @@ -80,13 +87,14 @@ .site-title, .site-name, .site-description { + overflow: hidden; flex: 1; + max-width: 100%; max-height: 1rem; - overflow: hidden; - white-space: nowrap; text-overflow: ellipsis; + white-space: nowrap; } .site-title { diff --git a/src/components/middle/composer/inlineResults/BaseResult.scss b/src/components/middle/composer/inlineResults/BaseResult.scss index 6bac32ec6..e6fff9832 100644 --- a/src/components/middle/composer/inlineResults/BaseResult.scss +++ b/src/components/middle/composer/inlineResults/BaseResult.scss @@ -2,18 +2,21 @@ padding-bottom: 0.5rem; .thumb { - background-color: var(--color-background-secondary); - flex: 0 0 3rem; - width: 3rem; - height: 3rem; - line-height: 3rem; - border-radius: var(--border-radius-default-tiny); + overflow: hidden; display: inline-flex; + flex: 0 0 3rem; align-content: center; justify-content: center; + + width: 3rem; + height: 3rem; margin-inline-end: 0.5rem; - overflow: hidden; + border-radius: var(--border-radius-default-tiny); + font-size: 1.5rem; + line-height: 3rem; + + background-color: var(--color-background-secondary); img:not(.emoji) { width: 100%; @@ -32,20 +35,21 @@ } .title { + unicode-bidi: plaintext; font-weight: var(--font-weight-medium); text-align: left; - unicode-bidi: plaintext; } .description { - white-space: normal; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - overflow: hidden; - text-overflow: ellipsis; - text-align: left; unicode-bidi: plaintext; + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + + text-align: left; + text-overflow: ellipsis; + white-space: normal; } &[dir="rtl"] .title, &[dir="rtl"] .description { diff --git a/src/components/middle/composer/inlineResults/MediaResult.scss b/src/components/middle/composer/inlineResults/MediaResult.scss index 3a8d6b4e7..35a9adc9a 100644 --- a/src/components/middle/composer/inlineResults/MediaResult.scss +++ b/src/components/middle/composer/inlineResults/MediaResult.scss @@ -1,16 +1,21 @@ .MediaResult { + cursor: var(--custom-cursor, pointer); + + position: relative; + + overflow: hidden; + height: 0; padding-bottom: 100%; - overflow: hidden; - position: relative; - cursor: var(--custom-cursor, pointer); img { position: absolute; - left: 0; top: 0; + left: 0; + width: 100%; height: 100%; + object-fit: cover; } } diff --git a/src/components/middle/composer/inlineResults/StickerResult.scss b/src/components/middle/composer/inlineResults/StickerResult.scss index ff994fb98..2ede1f409 100644 --- a/src/components/middle/composer/inlineResults/StickerResult.scss +++ b/src/components/middle/composer/inlineResults/StickerResult.scss @@ -1,12 +1,17 @@ .StickerResult { + cursor: var(--custom-cursor, pointer); + + position: relative; + + overflow: hidden; + height: 0; padding-bottom: 100%; - overflow: hidden; + background: transparent no-repeat center; background-size: contain; - cursor: var(--custom-cursor, pointer); + transition: background-color 0.15s ease, opacity 0.3s ease !important; - position: relative; .AnimatedSticker, img, @@ -14,6 +19,7 @@ position: absolute; top: 0; left: 0; + width: 100% !important; height: 100% !important; } diff --git a/src/components/middle/message/ActionMessage.module.scss b/src/components/middle/message/ActionMessage.module.scss index c61d40e49..226f0cf9f 100644 --- a/src/components/middle/message/ActionMessage.module.scss +++ b/src/components/middle/message/ActionMessage.module.scss @@ -8,38 +8,42 @@ overflow-wrap: anywhere; :global(.star-amount-icon) { - vertical-align: text-bottom; margin-inline: 0 !important; + vertical-align: text-bottom; } } .contentBox { + position: relative; + z-index: 0; + display: flex; flex-direction: column; - align-items: center; gap: 0.5rem; - max-width: 15rem; + align-items: center; + max-width: 15rem; padding: 0.5rem 0.75rem; border-radius: var(--border-radius-messages); - background-color: var(--action-message-bg); color: white; - position: relative; - z-index: 0; + background-color: var(--action-message-bg); } .textContent { - display: inline-block; - padding: 0.1875rem 0.5rem; - background-color: var(--action-message-bg); - color: white; - border-radius: var(--border-radius-messages); - max-width: 100%; - position: relative; z-index: 0; + + display: inline-block; + + max-width: 100%; + padding: 0.1875rem 0.5rem; + border-radius: var(--border-radius-messages); + + color: white; + + background-color: var(--action-message-bg); } .hasFullContent { @@ -83,17 +87,20 @@ // These two elements should align perfectly .fluidBackground, .textContent { display: inline; - text-wrap: pretty; + padding: 0.1875rem 0.5rem; - box-decoration-break: clone; border-radius: var(--border-radius-messages); + + text-wrap: pretty; + + box-decoration-break: clone; } .fluidBackground { pointer-events: none; + color: black; // Solid color for filter background-color: black; - color: black; } .textContent { @@ -102,8 +109,8 @@ } .info { - font-size: 0.9375rem; position: relative; + font-size: 0.9375rem; } .stickerWrapper { @@ -123,16 +130,21 @@ } .actionButton { - position: relative; - display: inline-block; - border-radius: 1.25rem; - padding: 0.5rem 1.25rem; - background-color: var(--action-message-bg); - font-weight: var(--font-weight-semibold); - transition: opacity 0.15s; - cursor: var(--custom-cursor, pointer); + position: relative; + + display: inline-block; + + padding: 0.5rem 1.25rem; + border-radius: 1.25rem; + + font-weight: var(--font-weight-semibold); + + background-color: var(--action-message-bg); + + transition: opacity 0.15s; + &:hover, &:focus { opacity: 0.8; @@ -158,11 +170,14 @@ &::before { content: ""; + position: absolute; - inset: -0.25rem; - background: var(--action-message-bg); - border-radius: calc(var(--border-radius-messages) + 0.25rem); z-index: -1; + inset: -0.25rem; + + border-radius: calc(var(--border-radius-messages) + 0.25rem); + + background: var(--action-message-bg); } } @@ -175,8 +190,7 @@ .uniqueBackground { position: absolute; - inset: 0; - top: -6rem; + inset: -6rem 0 0 0; } .uniqueValue { diff --git a/src/components/middle/message/BaseStory.module.scss b/src/components/middle/message/BaseStory.module.scss index bf44585e8..99fed2775 100644 --- a/src/components/middle/message/BaseStory.module.scss +++ b/src/components/middle/message/BaseStory.module.scss @@ -1,12 +1,15 @@ .root { + cursor: var(--custom-cursor, pointer); + + position: relative; + + overflow: hidden; display: block !important; + width: 12rem; height: 0; // Aspect-ratio trick https://css-tricks.com/aspect-ratio-boxes/ (192:344) padding-bottom: 179%; - overflow: hidden; - position: relative; - cursor: var(--custom-cursor, pointer); } .preview { @@ -29,6 +32,7 @@ top: 50%; left: 50%; transform: translate(-50%, -50%); + width: 75%; } @@ -47,8 +51,8 @@ } .expiredIcon { + margin-inline-start: 0.3125rem; font-size: 1.25rem; line-height: 0.9375rem; vertical-align: -0.1875rem; - margin-inline-start: 0.3125rem; } diff --git a/src/components/middle/message/CommentButton.scss b/src/components/middle/message/CommentButton.scss index 78ebdc9a5..53414e8fc 100644 --- a/src/components/middle/message/CommentButton.scss +++ b/src/components/middle/message/CommentButton.scss @@ -2,23 +2,28 @@ --background-color: var(--color-background); --hover-color: var(--color-chat-hover); + cursor: var(--custom-cursor, pointer); + user-select: none; + display: flex; - width: 100%; align-items: center; + + width: 100%; padding: 0.5rem 0.25rem 0.5rem 0.625rem; padding-inline-start: 0.625rem; padding-inline-end: 0.25rem; - background: var(--background-color); border-bottom-right-radius: var(--border-bottom-right-radius); border-bottom-left-radius: var(--border-bottom-left-radius); + font-size: 0.9375rem; font-weight: var(--font-weight-medium); line-height: 2.125rem; color: var(--accent-color); white-space: nowrap; - cursor: var(--custom-cursor, pointer); + + background: var(--background-color); + transition: background-color 0.15s, color 0.15s; - user-select: none; .label { overflow: hidden; @@ -27,15 +32,20 @@ .Message .has-appendix &::before { content: ""; - display: block; + position: absolute; bottom: -0.1875rem; left: -0.5625rem; + + display: block; + width: 0.5625rem; height: 1.25rem; - background-position: bottom left; - background-image: url('data:image/svg+xml,%3Csvg width="9" height="20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"%3E%3Cdefs%3E%3Cfilter x="-50%25" y="-14.7%25" width="200%25" height="141.2%25" filterUnits="objectBoundingBox" id="a"%3E%3CfeOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/%3E%3CfeGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"/%3E%3CfeColorMatrix values="0 0 0 0 0.0621962482 0 0 0 0 0.138574144 0 0 0 0 0.185037364 0 0 0 0.15 0" in="shadowBlurOuter1"/%3E%3C/filter%3E%3Cpath d="M3 17h6V0c-.193 2.84-.876 5.767-2.05 8.782-.904 2.325-2.446 4.485-4.625 6.48A1 1 0 003 17z" id="b"/%3E%3C/defs%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cuse fill="%23000" filter="url(%23a)" xlink:href="%23b"/%3E%3Cuse fill="%23FFF" xlink:href="%23b"/%3E%3C/g%3E%3C/svg%3E'); + opacity: 0; + background-image: url('data:image/svg+xml,%3Csvg width="9" height="20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"%3E%3Cdefs%3E%3Cfilter x="-50%25" y="-14.7%25" width="200%25" height="141.2%25" filterUnits="objectBoundingBox" id="a"%3E%3CfeOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/%3E%3CfeGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"/%3E%3CfeColorMatrix values="0 0 0 0 0.0621962482 0 0 0 0 0.138574144 0 0 0 0 0.185037364 0 0 0 0.15 0" in="shadowBlurOuter1"/%3E%3C/filter%3E%3Cpath d="M3 17h6V0c-.193 2.84-.876 5.767-2.05 8.782-.904 2.325-2.446 4.485-4.625 6.48A1 1 0 003 17z" id="b"/%3E%3C/defs%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cuse fill="%23000" filter="url(%23a)" xlink:href="%23b"/%3E%3Cuse fill="%23FFF" xlink:href="%23b"/%3E%3C/g%3E%3C/svg%3E'); + background-position: bottom left; + transition: opacity 0.15s, filter 0.15s; .theme-dark #root & { @@ -46,26 +56,41 @@ .custom-shape & { position: absolute; right: -3rem; - width: 2.25rem; bottom: 3rem; - height: 3.375rem; - border-radius: 1.375rem; - padding: 0.375rem; + align-items: flex-start; + + width: 2.25rem; + height: 3.375rem; + padding: 0.375rem; + border-radius: 1.375rem; + color: white; + + opacity: 0; background-color: var(--pattern-color); + transition: opacity 150ms, backdrop-filter 150ms, filter 150ms; + + &::after { + content: attr(data-cnt); + + position: absolute; + bottom: -0.0625rem; + left: 0; + + display: block; + + width: 100%; + + font-size: 0.75rem; + text-align: center; + } + .no-action-button & { bottom: 0; } - opacity: 0; - transition: opacity 150ms, backdrop-filter 150ms, filter 150ms; - - @media (pointer: coarse) { - opacity: 1 !important; - } - &:hover { background-color: var(--pattern-color); backdrop-filter: brightness(115%); @@ -79,17 +104,6 @@ opacity: 1; } - &::after { - content: attr(data-cnt); - position: absolute; - bottom: -0.0625rem; - left: 0; - width: 100%; - text-align: center; - font-size: 0.75rem; - display: block; - } - &[data-cnt="0"] { height: 2.25rem; &::after { @@ -99,8 +113,8 @@ .icon-comments-sticker { display: block; - font-size: 1.5rem; margin: 0 auto; + font-size: 1.5rem; } .recent-repliers, @@ -109,22 +123,26 @@ .CommentButton_icon-open { display: none; } + + @media (pointer: coarse) { + opacity: 1 !important; + } } &.as-action-button { position: static; background-color: transparent; - &:hover { - background-color: rgba(255, 255, 255, 0.08); - backdrop-filter: none; - filter: none; - } - &::after { top: 1.5rem; bottom: auto; } + + &:hover { + background-color: rgba(255, 255, 255, 0.08); + filter: none; + backdrop-filter: none; + } } &:hover { @@ -175,9 +193,9 @@ } .icon-comments { + margin-inline-end: 0.875rem; font-size: 1.5625rem; line-height: 2rem; - margin-inline-end: 0.875rem; } .CommentButton_icon-open { @@ -188,16 +206,18 @@ .recent-repliers { display: inline-flex; align-items: center; - margin-inline-end: 0.5rem; margin-inline-start: -0.125rem; + margin-inline-end: 0.5rem; .Avatar { + z-index: 3; + + overflow: hidden; + + margin-inline-end: 0; + border: 2px solid var(--color-background); /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */ transition: border 0.15s; - border: 2px solid var(--color-background); - margin-inline-end: 0; - z-index: 3; - overflow: hidden; .emoji { width: 1rem; @@ -223,18 +243,21 @@ &::after { content: ""; + display: inline-block; + width: 0.5rem; height: 0.5rem; - border-radius: 50%; - background: var(--accent-color); margin-inline-start: 0.75rem; + border-radius: 50%; + + background: var(--accent-color); } } &.disabled { - cursor: var(--custom-cursor, default); pointer-events: none; + cursor: var(--custom-cursor, default); } } @@ -247,10 +270,11 @@ } .CommentButton_loading { - position: absolute; --spinner-size: 1.5rem; - flex-shrink: 0; + + position: absolute; right: 0.5rem; + flex-shrink: 0; .CommentButton-custom-shape & { right: 0; @@ -259,12 +283,12 @@ .CommentButton_right { position: relative; - margin-inline-start: auto; - height: 1.5rem; width: 2.5rem; + height: 1.5rem; + margin-inline-start: auto; } .CommentButton_hidden { - opacity: 0; transform: scale(0.4); + opacity: 0; } diff --git a/src/components/middle/message/Contact.module.scss b/src/components/middle/message/Contact.module.scss index 73bf407d2..02135a537 100644 --- a/src/components/middle/message/Contact.module.scss +++ b/src/components/middle/message/Contact.module.scss @@ -5,9 +5,9 @@ } .info-container { + cursor: var(--custom-cursor, pointer); display: flex; padding: 0.5rem 1.5rem 0.5rem 0.125rem; - cursor: var(--custom-cursor, pointer); } .info { @@ -18,9 +18,9 @@ } .name { + max-width: 12.5rem; font-size: 1rem; font-weight: var(--font-weight-medium); - max-width: 12.5rem; } .phone { @@ -30,8 +30,8 @@ .name, .phone { overflow: hidden; - white-space: nowrap; text-overflow: ellipsis; + white-space: nowrap; } .divider { @@ -44,20 +44,25 @@ display: flex; .button { - width: auto; - flex: 1; - height: 2rem; - font-weight: var(--font-weight-medium); - background-color: transparent; - color: var(--accent-color); --ripple-color: var(--accent-background-active-color); + + flex: 1; + + width: auto; + height: 2rem; + + font-weight: var(--font-weight-medium); + color: var(--accent-color); + opacity: 1; + background-color: transparent; + transition: 0.25s ease-in-out opacity; &:not(.disabled):not(:disabled):hover { color: var(--accent-color); - background-color: transparent; opacity: 0.75; + background-color: transparent; } } } diff --git a/src/components/middle/message/FactCheck.module.scss b/src/components/middle/message/FactCheck.module.scss index f20d28713..f5a16f506 100644 --- a/src/components/middle/message/FactCheck.module.scss +++ b/src/components/middle/message/FactCheck.module.scss @@ -2,8 +2,8 @@ .root { margin-top: 0.5rem; - font-size: 0.875rem; padding-block: 0.25rem; + font-size: 0.875rem; } .title { @@ -35,15 +35,15 @@ .collapseIcon { position: absolute; + right: 0; + bottom: 0; + display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; - - bottom: 0; - right: 0; } .clickable { diff --git a/src/components/middle/message/Game.scss b/src/components/middle/message/Game.scss index 4e2f62fef..755ae1eb1 100644 --- a/src/components/middle/message/Game.scss +++ b/src/components/middle/message/Game.scss @@ -4,28 +4,32 @@ } .description { - line-height: 1.2; margin-bottom: 0.75rem; + line-height: 1.2; } .preview { - position: relative; - max-width: 100%; - margin-bottom: 0.25rem; - margin-top: 0.25rem; cursor: var(--custom-cursor, pointer); + + position: relative; + + max-width: 100%; + margin-top: 0.25rem; + margin-bottom: 0.25rem; } .preview-content { position: absolute; top: 0; left: 0; + + overflow: hidden; + width: 100%; height: 100%; + border-radius: 0.5rem; object-fit: cover; - border-radius: 0.5rem; - overflow: hidden; } .skeleton { diff --git a/src/components/middle/message/Giveaway.module.scss b/src/components/middle/message/Giveaway.module.scss index 3e7de5e1f..8d1c1b49f 100644 --- a/src/components/middle/message/Giveaway.module.scss +++ b/src/components/middle/message/Giveaway.module.scss @@ -26,41 +26,44 @@ left: 50%; transform: translateX(-50%); - background-color: var(--color-primary); - color: white; - border-radius: 1rem; padding: 0.0625rem 0.5rem; border: 1px solid var(--background-color); + border-radius: 1rem; + line-height: 1.25; + color: white; + + background-color: var(--color-primary); :global(.theme-dark .own) & { - background-color: var(--color-text); color: var(--background-color); + background-color: var(--color-text); } } .section { - margin-bottom: 1rem; max-width: 100%; + margin-bottom: 1rem; } .description { - line-height: 1.25; margin-bottom: 0; + line-height: 1.25; } .peers { display: flex; flex-wrap: wrap; - justify-content: center; - align-items: center; gap: 0.5rem; + align-items: center; + justify-content: center; + margin-block: 0.25rem; } .peer { - background-color: var(--accent-background-color); color: var(--accent-color); + background-color: var(--accent-background-color); &:hover, &:active, &:focus { background-color: var(--accent-background-active-color); @@ -78,8 +81,8 @@ .separator { display: flex; align-items: center; - text-align: center; color: var(--color-text-secondary); + text-align: center; } .separator::before, diff --git a/src/components/middle/message/InlineButtons.scss b/src/components/middle/message/InlineButtons.scss index b2bcd7e3d..1bf50692a 100644 --- a/src/components/middle/message/InlineButtons.scss +++ b/src/components/middle/message/InlineButtons.scss @@ -11,12 +11,16 @@ .Button { flex: 1; + width: auto; margin: 0.125rem; - background: var(--pattern-color); border-radius: var(--border-radius-messages-small); + font-weight: var(--font-weight-medium); text-transform: none; + + background: var(--pattern-color); + transition: background-color 150ms, color 150ms, backdrop-filter 150ms, filter 150ms; &:hover, @@ -38,17 +42,19 @@ } .corner-icon { - font-size: 0.875rem; position: absolute; - right: 0.1875rem; top: 0.1875rem; + right: 0.1875rem; + display: block; + font-size: 0.875rem; + &.icon-arrow-right { - font-size: 0.75rem; top: 0.125rem; right: 0.125rem; transform: rotate(-45deg); + font-size: 0.75rem; } } } diff --git a/src/components/middle/message/Invoice.scss b/src/components/middle/message/Invoice.scss index 89b90ab01..582197e99 100644 --- a/src/components/middle/message/Invoice.scss +++ b/src/components/middle/message/Invoice.scss @@ -1,8 +1,8 @@ .Invoice { .title { - color: var(--accent-color); - font-weight: var(--font-weight-medium); margin-bottom: 0; + font-weight: var(--font-weight-medium); + color: var(--accent-color); } .info { @@ -30,12 +30,14 @@ .invoice-image { position: relative; + width: 100%; max-width: 100%; max-height: 30rem; - object-fit: cover; - border-bottom-left-radius: var(--border-bottom-left-radius); border-bottom-right-radius: var(--border-bottom-right-radius); + border-bottom-left-radius: var(--border-bottom-left-radius); + + object-fit: cover; .forwarded-message & { border-top-left-radius: var(--border-top-left-radius); @@ -46,12 +48,15 @@ .description-text { position: absolute; top: 0; - padding: 0.25rem 0.5rem; + margin: 0.25rem; - background-color: rgba(0, 0, 0, 0.4); + padding: 0.25rem 0.5rem; border-radius: var(--border-radius-messages-small); - color: var(--color-white); + font-weight: var(--font-weight-medium); + color: var(--color-white); + + background-color: rgba(0, 0, 0, 0.4); } } @@ -76,8 +81,10 @@ position: absolute; top: 0; left: 0; + width: 100%; height: 100%; + object-fit: cover; } } diff --git a/src/components/middle/message/InvoiceMediaPreview.module.scss b/src/components/middle/message/InvoiceMediaPreview.module.scss index 463e71c0d..8967788b2 100644 --- a/src/components/middle/message/InvoiceMediaPreview.module.scss +++ b/src/components/middle/message/InvoiceMediaPreview.module.scss @@ -1,44 +1,45 @@ .root { + cursor: var(--custom-cursor, pointer); position: relative; z-index: 0; - overflow: hidden; - cursor: var(--custom-cursor, pointer); } .duration { - z-index: 2; position: absolute; + z-index: 2; top: 0.25rem; left: 0.25rem; - white-space: nowrap; - font-size: 0.75rem; padding: 0 0.375rem; + border-radius: 0.5rem; + + font-size: 0.75rem; + color: #FFFFFF; + white-space: nowrap; background-color: rgba(0, 0, 0, 0.3); - color: #FFFFFF; - border-radius: 0.5rem; } .buy { - display: flex; - align-items: center; - gap: 0.375rem; - - z-index: 2; position: absolute; + z-index: 2; top: 50%; left: 50%; transform: translate(-50%, -50%); + display: flex; + gap: 0.375rem; + align-items: center; + padding: 0.5rem 0.875rem; + border-radius: 1rem; + + line-height: 1rem; + color: #FFFFFF; + white-space: nowrap; background-color: rgba(0, 0, 0, 0.75); - color: #FFFFFF; - border-radius: 1rem; - white-space: nowrap; - line-height: 1rem; } .spoiler { diff --git a/src/components/middle/message/Location.scss b/src/components/middle/message/Location.scss index bcc3f88fa..08df039e8 100644 --- a/src/components/middle/message/Location.scss +++ b/src/components/middle/message/Location.scss @@ -8,6 +8,7 @@ top: 50%; left: 50%; transform: translate(-50%, -50%); + border-radius: 50%; animation: accuracy-wave 5s ease-out infinite forwards; @@ -34,8 +35,8 @@ } .map-wrapper { - overflow: hidden; position: relative; + overflow: hidden; } .map { @@ -43,30 +44,33 @@ } .pin { + + --pin-color: var(--color-primary); + position: absolute; top: 50%; left: 50%; transform: translate(-50%, -100%); - animation: fade-in 0.3s forwards; - --pin-color: var(--color-primary); + animation: fade-in 0.3s forwards; } .geoLive { &::before { content: ""; + position: absolute; + z-index: 3; bottom: 0; left: 50%; transform: translate(-50%, 50%); width: 1rem; height: 1rem; - - background: var(--color-primary); border: 2px solid white; border-radius: 50%; - z-index: 3; + + background: var(--color-primary); } .round-pin { @@ -76,37 +80,41 @@ .direction { position: absolute; + z-index: 2; top: 50%; left: 50%; - transition: transform 0.3s ease-out; - transform: translate(-50%, 0.3125rem) rotate(var(--direction)); transform-origin: bottom; + transform: translate(-50%, 0.3125rem) rotate(var(--direction)); + width: 1.5rem; height: 2rem; - clip-path: polygon(50% 100%, 0 0, 100% 0); - background: radial-gradient(circle, var(--color-primary) -100%, transparent 100%); border-radius: 40%; - z-index: 2; + + background: radial-gradient(circle, var(--color-primary) -100%, transparent 100%); + clip-path: polygon(50% 100%, 0 0, 100% 0); + + transition: transform 0.3s ease-out; } .location-avatar { position: relative; + z-index: 5; + overflow: hidden; + margin-right: 0; margin-bottom: 1.3125rem; - - z-index: 5; } .venue-icon { position: absolute; + z-index: 5; bottom: -0.5rem; left: 50%; transform: translate(-50%, -50%); + width: 3rem; height: 3rem; - - z-index: 5; } .venue, @@ -124,44 +132,48 @@ .location-avatar::after { content: ""; + position: absolute; top: 0; left: 0; + width: 100%; height: 100%; + background-color: rgba(255, 255, 255, 0.3); } } .round-pin { - fill: var(--pin-color); - position: absolute; - left: 50%; + z-index: 4; bottom: 0; + left: 50%; transform: translate(-50%, 0); + width: 5rem; - z-index: 4; + fill: var(--pin-color); } .location-info { display: grid; grid-template-columns: 1fr auto; grid-template-rows: 1fr auto; + width: 100%; padding: 0.3125rem 0.5rem 0.25rem; &-title { - font-weight: var(--font-weight-medium); grid-area: 1 / 1 / 2 / 2; + font-weight: var(--font-weight-medium); } &-subtitle { - color: var(--color-text-secondary); - line-height: 1.25; - font-size: 0.875rem; grid-area: 2 / 1 / 2 / 2; + font-size: 0.875rem; + line-height: 1.25; + color: var(--color-text-secondary); .Message.own & { color: var(--color-message-meta-own); @@ -170,30 +182,33 @@ } .geo-countdown { - grid-area: 1 / 2 / 3 / 3; position: relative; + grid-area: 1 / 2 / 3 / 3; width: 2rem; height: 2rem; } .geo-countdown-text { - color: var(--accent-color); position: absolute; top: 50%; left: 0; transform: translateY(-50%); + + width: 100%; + font-size: 0.875rem; font-weight: var(--font-weight-medium); line-height: 1; - width: 100%; + color: var(--accent-color); text-align: center; } .geo-countdown-progress { - stroke: var(--accent-color); fill: transparent; - stroke-width: 2; + stroke: var(--accent-color); stroke-linecap: round; + stroke-width: 2; + transition: stroke-dashoffset 2s, stroke 0.2s; } } diff --git a/src/components/middle/message/Message.scss b/src/components/middle/message/Message.scss index 0d9efc18a..4938f32d4 100644 --- a/src/components/middle/message/Message.scss +++ b/src/components/middle/message/Message.scss @@ -2,10 +2,6 @@ // General styles .Message { - display: flex; - align-items: flex-end; - margin-bottom: 0.375rem; - position: relative; --background-color: var(--color-background); --hover-color: var(--color-reply-hover); @@ -30,6 +26,11 @@ --border-bottom-left-radius: var(--border-radius-messages); --border-bottom-right-radius: var(--border-radius-messages); + position: relative; + display: flex; + align-items: flex-end; + margin-bottom: 0.375rem; + .theme-dark & { --color-reaction: rgb(255, 255, 255, 0.1); --hover-color-reaction: rgb(255, 255, 255, 0.2); @@ -39,14 +40,6 @@ --hover-color-reaction-chosen: #4096ec; } - @media (min-width: 1921px) { - --max-width: calc(30vw - 1rem); - } - - @media (max-width: 600px) { - margin-bottom: 0.25rem; - } - &.is-swiped { transform: translateX(-2.5rem) !important; } @@ -57,8 +50,8 @@ > .Avatar, > .message-content-wrapper { - opacity: 1; transform: scale(1) translateX(0); + opacity: 1; transition: transform var(--select-transition); body.no-page-transitions & { @@ -70,7 +63,6 @@ position: absolute; bottom: 0; left: 0; - margin-right: 0.3125rem; } @@ -78,25 +70,29 @@ --custom-emoji-size: 1.75rem; cursor: var(--custom-cursor, pointer); + position: absolute; + z-index: 1; right: -0.875rem; bottom: -0.5rem; + transform: scale(0.7); + display: flex; align-items: center; justify-content: center; - transform: scale(0.7); + opacity: 0; + transition: transform 0.2s ease-out, opacity 0.2s ease-out; transition-delay: 0.2s; - z-index: 1; &.visible { opacity: 1 !important; } &:hover { - transition-delay: unset; transform: scale(1); + transition-delay: unset; } } @@ -157,15 +153,6 @@ padding-left: 0; } - @media (max-width: 600px) { - padding-left: 2.875rem; - - .no-avatars &, - &.is-thread-top { - padding-left: 0.25rem; - } - } - &.first-in-group:not(.last-in-group) { --border-bottom-left-radius: var(--border-radius-messages-small); } @@ -186,10 +173,18 @@ --border-bottom-left-radius: 0; } } + + @media (max-width: 600px) { + padding-left: 2.875rem; + + .no-avatars &, + &.is-thread-top { + padding-left: 0.25rem; + } + } } &.own { - flex-direction: row-reverse; --background-color: var(--color-background-own); --hover-color: var(--color-reply-own-hover); --color-reaction: var(--color-message-reaction-own); @@ -211,6 +206,8 @@ --color-voice-transcribe: var(--color-voice-transcribe-button-own); --thumbs-background: var(--color-background-own); + flex-direction: row-reverse; + .theme-dark & { --color-reaction: rgb(255, 255, 255, 0.1); --hover-color-reaction: rgb(255, 255, 255, 0.2); @@ -221,10 +218,6 @@ --text-color-reaction-chosen: rgb(62, 62, 62); } - @media (min-width: 1921px) { - --max-width: 30vw; - } - body.is-ios &, body.is-macos & { --color-background-own: var(--color-background-own-apple); @@ -232,10 +225,6 @@ --color-reply-own-active: var(--color-reply-own-active-apple); } - @media (max-width: 600px) { - padding-right: 0.25rem; - } - &.first-in-group:not(.last-in-group) { --border-bottom-right-radius: var(--border-radius-messages-small); } @@ -254,18 +243,27 @@ .message-content.has-appendix { --border-bottom-right-radius: 0; + border-bottom-right-radius: 0; } } + + @media (min-width: 1921px) { + --max-width: 30vw; + } + + @media (max-width: 600px) { + padding-right: 0.25rem; + } } &.is-deleting { > .Avatar, > .message-content-wrapper { - transition: opacity 0.2s ease, transform 0.2s ease-in; - opacity: 0; - transform: scale(0.3) translateX(var(--deleting-translate-x)); transform-origin: bottom; + transform: scale(0.3) translateX(var(--deleting-translate-x)); + opacity: 0; + transition: opacity 0.2s ease, transform 0.2s ease-in; } } @@ -277,26 +275,31 @@ --background-color: var(--pattern-color); .message-content-wrapper { - margin-left: auto; margin-right: auto; + margin-left: auto; } .action-message-story-mention { - background-color: var(--background-color); - color: white; - font-size: calc(var(--message-text-size, 1rem) - 0.0625rem); - padding: 0.75rem 0.5rem; - border-radius: var(--border-radius-messages); - overflow-wrap: anywhere; - text-align: center; user-select: none; + position: relative; z-index: 0; + display: inline-flex; flex-direction: column; - max-width: 9.625rem; align-items: center; + max-width: 9.625rem; + padding: 0.75rem 0.5rem; + border-radius: var(--border-radius-messages); + + font-size: calc(var(--message-text-size, 1rem) - 0.0625rem); + color: white; + text-align: center; + overflow-wrap: anywhere; + + background-color: var(--background-color); + body.is-ios &, body.is-macos & { font-size: calc(var(--message-text-size, 1rem) - 0.125rem); @@ -304,27 +307,31 @@ } &.with-preview { - padding: 1.25rem 0.5rem 0.75rem; cursor: var(--custom-cursor, pointer); + padding: 1.25rem 0.5rem 0.75rem; } &.with-preview::before { content: ''; + position: absolute; - left: 50%; top: 1rem; + left: 50%; transform: translateX(-50%); + width: 6rem; height: 6rem; + padding: 0.0625rem; border-radius: 50%; - padding: 0.0625rem; + background: rgba(255, 255, 255, 0.3); /* stylelint-disable-next-line plugin/whole-pixel */ box-shadow: 0 0 0 0.03125rem rgba(255, 255, 255, 0.3); - background: rgba(255, 255, 255, 0.3); + mask: linear-gradient(to bottom, #fff 0%, #fff 100%) content-box, linear-gradient(to bottom, #fff 0%, #fff 100%); + mask-composite: exclude; } @@ -341,20 +348,23 @@ } .story-media-wrapper { + overflow: hidden; + width: 5.5rem; height: 5.5rem; margin: 0 auto 1rem; border-radius: 50%; - overflow: hidden; } .story-media { - object-fit: cover; - width: 100%; - height: auto; position: relative; top: 50%; transform: translateY(-50%); + + width: 100%; + height: auto; + + object-fit: cover; } .story-title { @@ -365,10 +375,6 @@ .select-mode-active & { cursor: var(--custom-cursor, pointer); - @media (min-width: 600px) { - user-select: none; - } - &:not(.own) { > .Avatar, > .message-content-wrapper { @@ -378,12 +384,13 @@ &:not(.is-album)::after { content: ""; + position: absolute; + z-index: var(--z-message-select-area); top: -0.25rem; + right: -4rem; bottom: -0.25rem; left: -4rem; - right: -4rem; - z-index: var(--z-message-select-area); } &.is-album, @@ -396,6 +403,10 @@ .message-select-control { opacity: 1; } + + @media (min-width: 600px) { + user-select: none; + } } &.is-selected { @@ -429,8 +440,8 @@ } .Audio .message-select-control { - left: 1.0625rem; top: 1.375rem; + left: 1.0625rem; } html.theme-dark &.own .Audio .toggle-play:not(.with-image) + .media-loading { @@ -450,9 +461,9 @@ .message-select-control { position: absolute; + z-index: 2; top: 2rem; left: 2rem; - z-index: 2; } } @@ -521,9 +532,9 @@ } .message-content { - box-shadow: none; border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; + box-shadow: none; } .forwarded-message::before { @@ -539,8 +550,8 @@ } .message-content { - border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; + border-bottom-left-radius: 0 !important; } } @@ -552,12 +563,15 @@ &::after { content: ""; + + position: absolute; + width: 1.25rem; height: 1.25rem; - border-radius: 0.6875rem; - background: white; border: 0.125rem rgba(0, 0, 0, 0.2) solid; - position: absolute; + border-radius: 0.6875rem; + + background: white; } } } @@ -567,12 +581,12 @@ .Audio:not(.audio-is-selected), .File:not(.file-is-selected) { .message-select-control:not(.group-select) { - background: var(--background-color); border-color: var(--background-color); + background: var(--background-color); &::after { - background: var(--background-color); border-color: var(--color-message-meta-own); + background: var(--background-color); } } } @@ -591,6 +605,7 @@ &.own { .message-content { --background-color: var(--color-background-own-selected); + background: var(--color-background-own-selected); } } @@ -617,30 +632,33 @@ } .message-select-control { + pointer-events: none; + position: absolute; - left: 0; - bottom: 0.25rem; - width: 1.5rem; - height: 1.5rem; - border: 2px solid white; - border-radius: 50%; z-index: var(--z-message-select-control); + bottom: 0.25rem; + left: 0; display: flex; align-items: center; justify-content: center; - color: white; + width: 1.5rem; + height: 1.5rem; + border: 2px solid white; + border-radius: 50%; + font-size: 1rem; + color: white; opacity: 0; - pointer-events: none; + transition: opacity var(--select-transition); .icon-select { position: absolute; - left: -3px; top: -3px; + left: -3px; font-size: 1.625rem; } @@ -685,8 +703,8 @@ &.is-forwarded { .message-title .icon { - font-size: 0.75rem; margin-right: 0.1875rem; + font-size: 0.75rem; } } } @@ -694,13 +712,15 @@ .message-action-buttons { position: absolute; bottom: 0; - background-color: var(--pattern-color); - border-radius: 1.125rem; display: flex; flex-direction: column; + border-radius: 1.125rem; + opacity: 0; + background-color: var(--pattern-color); + transition: opacity 150ms; @media (pointer: coarse) { @@ -732,14 +752,22 @@ } .bottom-marker { - height: 1px; width: 1px; + height: 1px; visibility: hidden; } .giveaway-result-content { min-width: 17rem; } + + @media (min-width: 1921px) { + --max-width: calc(30vw - 1rem); + } + + @media (max-width: 600px) { + margin-bottom: 0.25rem; + } } // Border-radius styles @@ -752,8 +780,8 @@ .message-content.custom-shape .media-inner video { border-top-left-radius: var(--border-top-left-radius); border-top-right-radius: var(--border-top-right-radius); - border-bottom-left-radius: var(--border-bottom-left-radius); border-bottom-right-radius: var(--border-bottom-right-radius); + border-bottom-left-radius: var(--border-bottom-left-radius); } .media-inner video.full-media { diff --git a/src/components/middle/message/MessageContextMenu.scss b/src/components/middle/message/MessageContextMenu.scss index 96fb1ba73..990a8416d 100644 --- a/src/components/middle/message/MessageContextMenu.scss +++ b/src/components/middle/message/MessageContextMenu.scss @@ -1,12 +1,12 @@ .MessageContextMenu { + user-select: none; position: absolute; font-size: 1rem; - user-select: none; &_items { overflow: auto; - padding: 0.5rem 0; overscroll-behavior: contain; + padding: 0.5rem 0; &-hidden { opacity: 0; @@ -20,9 +20,9 @@ .bubble { overflow: initial; - padding: 0 !important; display: flex; flex-direction: column; + padding: 0 !important; } &.with-reactions .bubble { @@ -32,20 +32,21 @@ } &.with-reactions &_items { + padding: 0.25rem 0; + border-radius: var(--border-radius-default); + background: var(--color-background-compact-menu); backdrop-filter: blur(10px); box-shadow: 0 0.25rem 0.5rem 0.125rem var(--color-default-shadow); - border-radius: var(--border-radius-default); - padding: 0.25rem 0; - - @media (min-width: 600px) { - margin-inline-end: 2.75rem; - } body.no-menu-blur & { background: var(--color-background); backdrop-filter: none; } + + @media (min-width: 600px) { + margin-inline-end: 2.75rem; + } } .backdrop { @@ -60,12 +61,14 @@ &--seen-by-label { position: absolute; top: 50%; - transform: translateY(-50%); - left: 0; right: 0; + left: 0; + transform: translateY(-50%); + overflow: hidden; - text-overflow: ellipsis; + text-align: initial; + text-overflow: ellipsis; } .avatars { diff --git a/src/components/middle/message/MessageEffect.module.scss b/src/components/middle/message/MessageEffect.module.scss index 1da22c34e..667f4a135 100644 --- a/src/components/middle/message/MessageEffect.module.scss +++ b/src/components/middle/message/MessageEffect.module.scss @@ -1,7 +1,7 @@ .anchor { position: absolute; - bottom: 0; right: 0; + bottom: 0; } .mirrorAnchor { @@ -10,10 +10,9 @@ } .root { + pointer-events: none; position: fixed; z-index: var(--z-message-effect); - - pointer-events: none; } .mirror { diff --git a/src/components/middle/message/MessageMeta.scss b/src/components/middle/message/MessageMeta.scss index 8d9fa6f7b..a6c0a3ada 100644 --- a/src/components/middle/message/MessageMeta.scss +++ b/src/components/middle/message/MessageMeta.scss @@ -1,19 +1,23 @@ .MessageMeta { - position: absolute; - height: 1.25rem; - bottom: 0; - right: 0; - display: flex; - align-items: center; - background: rgba(#999999, 0.6); - border-radius: 0.625rem; - padding: 0 0.25rem; - color: white; - line-height: 1; - cursor: var(--custom-cursor, pointer); user-select: none; + position: absolute; + right: 0; + bottom: 0; + + display: flex; + align-items: center; + + height: 1.25rem; + padding: 0 0.25rem; + border-radius: 0.625rem; + + line-height: 1; + color: white; + + background: rgba(#999999, 0.6); + .message-price, .message-time, .message-imported, @@ -62,7 +66,6 @@ .message-effect-icon { margin-inline-end: 0.25rem; - color: var(--color-text); & > .emoji { width: 1rem !important; @@ -77,9 +80,9 @@ .message-imported, .message-signature { overflow: hidden; - text-overflow: ellipsis; - margin-right: 0.375rem; max-width: 16ch; // Limit long text to 16 characters + margin-right: 0.375rem; + text-overflow: ellipsis; .emoji-small { width: 1rem !important; @@ -88,15 +91,15 @@ } .icon-channelviews { - margin-left: 0.125rem; margin-right: 0.375rem; + margin-left: 0.125rem; font-size: 1.125rem; line-height: inherit; } .icon-reply-filled { - margin-left: 0.125rem; margin-right: 0.375rem; + margin-left: 0.125rem; font-size: 0.75rem; line-height: inherit; } @@ -111,14 +114,18 @@ .Message .invoice:not(.has-reactions).has-photo & { --color-accent-own: white; --color-accent: white; - color: white !important; - opacity: 1; - bottom: 0.25rem; + right: 0.25rem; + bottom: 0.25rem; left: auto; + height: 1.125rem; padding: 0 0.3125rem 0 0.375rem; + color: white !important; + + opacity: 1; + .MessageOutgoingStatus .icon { background: transparent; } @@ -153,10 +160,10 @@ } .MessageOutgoingStatus { - margin-left: -0.1875rem; - font-size: 1.1875rem; - border-radius: 0.625rem; flex-shrink: 0; + margin-left: -0.1875rem; + border-radius: 0.625rem; + font-size: 1.1875rem; .Message.own & { color: var(--color-accent-own); diff --git a/src/components/middle/message/MessagePhoneCall.module.scss b/src/components/middle/message/MessagePhoneCall.module.scss index db472399f..7aead70bf 100644 --- a/src/components/middle/message/MessagePhoneCall.module.scss +++ b/src/components/middle/message/MessagePhoneCall.module.scss @@ -12,10 +12,10 @@ } .info { - margin-inline-end: 0.5rem; + user-select: none; display: flex; flex-direction: column; - user-select: none; + margin-inline-end: 0.5rem; } .reason { @@ -23,9 +23,9 @@ } .arrow { - font-size: 1.125rem; - display: inline-block; transform: rotateZ(-45deg); + display: inline-block; + font-size: 1.125rem; color: #4fae4e; &.incoming { diff --git a/src/components/middle/message/PaidMediaOverlay.module.scss b/src/components/middle/message/PaidMediaOverlay.module.scss index a3499059a..eae3bc3fd 100644 --- a/src/components/middle/message/PaidMediaOverlay.module.scss +++ b/src/components/middle/message/PaidMediaOverlay.module.scss @@ -4,12 +4,12 @@ .buyButton { position: absolute; + z-index: 2; top: 50%; left: 50%; transform: translate(-50%, -50%); - width: max-content !important; - z-index: 2; + width: max-content !important; } .boughtStatus { @@ -23,6 +23,6 @@ .buttonText { display: flex; - align-items: center; flex-shrink: 0; + align-items: center; } diff --git a/src/components/middle/message/Poll.scss b/src/components/middle/message/Poll.scss index 10d637d0d..114b2b0e3 100644 --- a/src/components/middle/message/Poll.scss +++ b/src/components/middle/message/Poll.scss @@ -2,28 +2,24 @@ min-width: 15rem; text-align: initial; - @media (max-width: 600px) { - min-width: 50vw; - } - .poll-question { + margin: 0.125rem 0; font-weight: var(--font-weight-medium); line-height: 1.25rem; - margin: 0.125rem 0; overflow-wrap: anywhere; } .poll-type, .poll-voters-count { - color: var(--secondary-color); font-size: 0.875rem; + color: var(--secondary-color); } .poll-type { - margin-bottom: 0.5rem; display: flex; align-items: center; min-height: 1.375rem; + margin-bottom: 0.5rem; } .poll-voters-count { @@ -34,12 +30,12 @@ .Checkbox, .Radio { min-height: 2.5rem; - padding-left: 2.25rem; padding-bottom: 1.25rem; + padding-left: 2.25rem; &.disabled { - opacity: 1 !important; cursor: var(--custom-cursor, not-allowed); + opacity: 1 !important; } &:hover { @@ -48,15 +44,13 @@ .Checkbox-main, .Radio-main { - .label { - line-height: 1.3125rem; - } &::before { + --color-borders-input: var(--secondary-color); + top: 0.6875rem; left: 0.125rem; background-color: var(--background-color); - --color-borders-input: var(--secondary-color); } &::after { @@ -64,6 +58,9 @@ left: 0.4375rem; background-color: var(--accent-color); } + .label { + line-height: 1.3125rem; + } } input:checked ~ .Radio-main, @@ -137,10 +134,11 @@ } .poll-countdown-progress { - stroke: var(--color-primary); fill: transparent; - stroke-width: 2; + stroke: var(--color-primary); stroke-linecap: round; + stroke-width: 2; + transition: stroke-dashoffset 2s, stroke 0.2s; } @@ -152,16 +150,21 @@ } .Button { - text-transform: none; font-size: 1rem; + text-transform: none; .Message.own & { - color: var(--accent-color); --color-primary-shade-rgb: var(--color-accent-own); + + color: var(--accent-color); } } > .Button { margin-bottom: 0.1875rem; } + + @media (max-width: 600px) { + min-width: 50vw; + } } diff --git a/src/components/middle/message/PollOption.scss b/src/components/middle/message/PollOption.scss index b7295ccf6..d6a8a2654 100644 --- a/src/components/middle/message/PollOption.scss +++ b/src/components/middle/message/PollOption.scss @@ -13,12 +13,15 @@ .poll-option-share { position: relative; - margin-top: 0.125rem; - width: 1.75rem; - margin-inline-end: 0.5rem; + flex-shrink: 0; - font-weight: var(--font-weight-medium); + + width: 1.75rem; + margin-top: 0.125rem; + margin-inline-end: 0.5rem; + font-size: 0.875rem; + font-weight: var(--font-weight-medium); text-align: right; &.limit-width { @@ -32,14 +35,17 @@ position: absolute; right: 0; bottom: -5px; + width: 1rem; height: 1rem; - background: var(--accent-color); - color: var(--background-color); border-radius: 0.5rem; + font-size: 0.75rem; + color: var(--background-color); text-align: center; + background: var(--accent-color); + &.wrong { background: var(--color-error); } @@ -50,10 +56,11 @@ &.animate { opacity: 0; + animation-name: PollOptionIconAnimate; - animation-delay: 0.09s; animation-duration: 0.3s; animation-fill-mode: forwards; + animation-delay: 0.09s; } } @@ -68,34 +75,39 @@ .poll-option-line { position: relative; + transform-origin: 0 0; + width: 0; - height: 0.25rem; min-width: 0.5rem; - border-radius: 0.125rem; + height: 0.25rem; margin-top: 0.5rem; + border-radius: 0.125rem; + background: var(--accent-color); - transform-origin: 0 0; transition: transform 0.3s; transition-delay: 0.09s; } .poll-line { + position: absolute; + bottom: -5px; + left: -27px; + width: 30px; height: 35px; - position: absolute; - left: -27px; - bottom: -5px; - transition: stroke-dashoffset 0.3s, stroke-dasharray 0.3s; - stroke-dashoffset: 0; + stroke-dasharray: 0, 200%; + stroke-dashoffset: 0; + + transition: stroke-dashoffset 0.3s, stroke-dasharray 0.3s; } .poll-line path { - stroke-width: 4px; - stroke-linecap: round; - stroke: var(--accent-color); fill: none; + stroke: var(--accent-color); + stroke-linecap: round; + stroke-width: 4px; } .wrong { diff --git a/src/components/middle/message/RoundVideo.scss b/src/components/middle/message/RoundVideo.scss index 900e089f6..e25337838 100644 --- a/src/components/middle/message/RoundVideo.scss +++ b/src/components/middle/message/RoundVideo.scss @@ -1,8 +1,8 @@ .RoundVideo { + cursor: var(--custom-cursor, pointer); position: relative; width: 15rem; height: 15rem; - cursor: var(--custom-cursor, pointer); &.non-interactive { pointer-events: none; @@ -10,15 +10,17 @@ .video-wrapper { position: absolute; - left: 0; top: 0; + left: 0; + + overflow: hidden; + display: flex; + align-items: center; + justify-content: center; + width: 100%; height: 100%; border-radius: 50%; - overflow: hidden; - display: flex; - justify-content: center; - align-items: center; } .thumbnail { @@ -26,20 +28,22 @@ } .progress { + pointer-events: none; + position: absolute; top: 0; left: 0; + width: 100%; height: 100%; - pointer-events: none; } .progress-circle { - stroke: white; fill: transparent; - stroke-width: 4; - stroke-opacity: 0.35; + stroke: white; stroke-linecap: round; + stroke-opacity: 0.35; + stroke-width: 4; } video::-internal-media-controls-cast-button, @@ -57,14 +61,17 @@ .icon-view-once { position: absolute; - background-color: rgba(0, 0, 0, 0.75); - padding: 0.125rem; - left: 1.625rem; - bottom: 0; - font-size: 1rem; - border-radius: 50%; - color: var(--color-white); z-index: var(--z-badge); + bottom: 0; + left: 1.625rem; + + padding: 0.125rem; + border-radius: 50%; + + font-size: 1rem; + color: var(--color-white); + + background-color: rgba(0, 0, 0, 0.75); } } @@ -72,9 +79,10 @@ position: absolute; top: 0; left: 0; - border-radius: 0.5rem; + width: 1.875rem; height: 1.3125rem; + border-radius: 0.5rem; } .loading-rect { @@ -83,25 +91,30 @@ .transcribe-button { position: absolute; + top: 1.6875rem; + left: 0.1875rem; + width: 1.875rem; height: 1.3125rem; - left: 0.1875rem; - top: 1.6875rem; border-radius: 0.5rem; + background: var(--pattern-color); &:hover { - background: var(--pattern-color) !important; opacity: 0.8; + background: var(--pattern-color) !important; } } .unread::after { content: ""; + display: inline-block; + width: 0.5rem; height: 0.5rem; - background-color: currentColor; - border-radius: 50%; margin-inline-start: 0.125rem; + border-radius: 50%; + + background-color: currentColor; } } diff --git a/src/components/middle/message/SenderGroupContainer.module.scss b/src/components/middle/message/SenderGroupContainer.module.scss index c07dcc2fc..cf4cfe7ca 100644 --- a/src/components/middle/message/SenderGroupContainer.module.scss +++ b/src/components/middle/message/SenderGroupContainer.module.scss @@ -4,13 +4,14 @@ .avatarContainer { position: absolute; - flex-direction: column-reverse; - display: flex; + z-index: 2; top: 0; bottom: 0; - z-index: 2; - transform: translateX(0) scale(1); + + display: flex; + flex-direction: column-reverse; + opacity: 1; transition: opacity 0.2s, transform var(--select-transition); diff --git a/src/components/middle/message/SimilarChannels.module.scss b/src/components/middle/message/SimilarChannels.module.scss index 8d8f4a214..982f5ea67 100644 --- a/src/components/middle/message/SimilarChannels.module.scss +++ b/src/components/middle/message/SimilarChannels.module.scss @@ -1,11 +1,12 @@ .root { - max-width: 45rem; - margin-top: 0.625rem; - position: relative; --more-channel-background: #d8d8d8; --more-channel-background-dark: #8f8f8f; --more-channel-badge: #8f8f8f; --more-channel-badge-overlay: #00000033; + + position: relative; + max-width: 45rem; + margin-top: 0.625rem; } .notch { @@ -19,13 +20,15 @@ } .header { - padding: 0.375rem 0.375rem 0 0.75rem; - display: flex; - justify-content: space-between; - align-items: center; position: sticky; top: 0; left: 0; + + display: flex; + align-items: center; + justify-content: space-between; + + padding: 0.375rem 0.375rem 0 0.75rem; } .title { @@ -37,10 +40,11 @@ .close { width: auto; height: auto; - font-size: 1.25rem; padding: 0.125rem; border-radius: 50%; + font-size: 1.25rem; + > .icon { margin-left: 0.0625rem; } @@ -48,13 +52,13 @@ .skeleton { height: 8.5rem; - border-radius: 0.9375rem; margin-top: 0.625rem; + border-radius: 0.9375rem; } .inner { - background: var(--color-background); border-radius: 0.9375rem; + background: var(--color-background); } .is-appearing { @@ -68,71 +72,77 @@ @keyframes channels-appear { from { transform: scale(0) translateY(-50%); - opacity: 0; /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */ height: 0; + opacity: 0; } to { transform: none; - opacity: 1; /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */ height: 8.9375rem; + opacity: 1; } } @keyframes channels-disappear { from { transform: none; - opacity: 1; /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */ height: 8.9375rem; + opacity: 1; } to { transform: scale(0) translateY(-50%); - opacity: 0; /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */ height: 0; + opacity: 0; } } .channel-list { - padding-bottom: 0.25rem; - padding-left: 0.25rem; - display: flex; overflow-x: auto; overflow-y: hidden; - white-space: nowrap; - border-bottom-left-radius: 0.9375rem; + display: flex; + + padding-bottom: 0.25rem; + padding-left: 0.25rem; border-bottom-right-radius: 0.9375rem; + border-bottom-left-radius: 0.9375rem; + + white-space: nowrap; } .item { - height: 6.375rem; position: relative; + display: flex; flex-direction: column; align-items: center; + + height: 6.375rem; margin-right: 0.5rem; padding: 0.5rem 0.5rem 0.25rem 0.5rem; &:not(:last-child) { &:hover { - background: var(--color-chat-hover); - border-radius: 0.625rem; cursor: pointer; + border-radius: 0.625rem; + background: var(--color-chat-hover); } } } .last-item { - margin: 0; - padding: 0.5rem 0 0.25rem 0; cursor: pointer; - min-width: 5rem; - margin-right: 0.75rem; + align-items: flex-start; + + min-width: 5rem; + margin: 0; + margin-right: 0.75rem; + padding: 0.5rem 0 0.25rem 0; } .avatar { @@ -160,34 +170,41 @@ } .badge { + position: relative; + z-index: 1; + + display: flex; + align-items: center; + justify-content: center; + max-width: 3.75rem; height: 0.9375rem; margin-top: -0.8125rem; - outline: 0.0625rem solid var(--color-background); padding: 0.125rem 0.1875rem 0.125rem 0.25rem; border-radius: 0.625rem; - z-index: 1; - display: flex; - justify-content: center; - align-items: center; + color: var(--color-white); - position: relative; + + outline: 0.0625rem solid var(--color-background); &::before { content: ""; - background-color: var(--more-channel-badge-overlay); + position: absolute; - max-width: 3.75rem; + z-index: -1; + width: 100%; + max-width: 3.75rem; height: 0.9375rem; border-radius: 0.625rem; - z-index: -1; + + background-color: var(--more-channel-badge-overlay); } } .icon { - font-size: 0.4375rem; margin-right: 0.0625rem; + font-size: 0.4375rem; } .members-count { @@ -197,35 +214,39 @@ } .channel-title { - text-align: center; + unicode-bidi: plaintext; + overflow: hidden; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + + max-width: 3.4375rem; height: 1.625rem; + margin-top: 0.125rem; + font-size: 0.6875rem; font-weight: var(--font-weight-normal); line-height: 0.8125rem; - max-width: 3.4375rem; - margin-top: 0.125rem; - white-space: normal; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - overflow: hidden; + text-align: center; text-overflow: ellipsis; - unicode-bidi: plaintext; + white-space: normal; } .last-item .channel-title { - color: var(--color-text-secondary); align-self: center; + color: var(--color-text-secondary); } .fake-avatar { - border-radius: 50%; + position: absolute; + z-index: 2; + left: 0.625rem; + width: 3.75rem; height: 3.75rem; - position: absolute; - left: 0.625rem; + border-radius: 50%; + background: var(--more-channel-background); outline: 0.125rem solid var(--color-background); - z-index: 2; :global(.theme-dark) & { background: var(--more-channel-background-dark); @@ -238,6 +259,6 @@ } .last-fake-avatar { - left: 1.25rem; z-index: 1; + left: 1.25rem; } diff --git a/src/components/middle/message/SponsoredMessage.scss b/src/components/middle/message/SponsoredMessage.scss index df7796938..a1b8fade2 100644 --- a/src/components/middle/message/SponsoredMessage.scss +++ b/src/components/middle/message/SponsoredMessage.scss @@ -4,9 +4,9 @@ --border-top-left-radius: var(--border-radius-messages) !important; --border-bottom-left-radius: 0 !important; + z-index: calc(var(--z-sticky-date) + 1); margin-top: -0.5rem; margin-bottom: 0.5rem; - z-index: calc(var(--z-sticky-date) + 1); &::before { display: none; @@ -24,15 +24,16 @@ transition: opacity 0.2s ease-in; &:hover, &:active { - background-color: transparent !important; opacity: 0.85; + background-color: transparent !important; } } .message-type { display: flex; - align-items: center; gap: 0.25rem; + align-items: center; + padding-inline-end: 0.25rem; text-transform: capitalize; @@ -43,16 +44,17 @@ } .message-action-buttons { - bottom: auto !important; top: 0; + bottom: auto !important; } .message-content { - padding: 0.5rem; --border-top-left-radius: var(--border-radius-messages); --border-top-right-radius: var(--border-radius-messages); --border-bottom-right-radius: var(--border-radius-messages); + padding: 0.5rem; + @media (max-width: 600px) { max-width: min(29rem, calc(100vw - 4.5rem)) !important; } @@ -76,30 +78,36 @@ font-size: calc(var(--message-text-size, 1rem) - 0.125rem); > .Button { - border-radius: 0 0 0.375rem 0.375rem; - border: none; - background: none; margin-bottom: 0; + border: none; + border-radius: 0 0 0.375rem 0.375rem; + line-height: 1; + background: none; + &::before { content: ''; + position: absolute; top: 0; left: 0; + width: 100%; height: 0.0625rem; - background: var(--accent-color); + opacity: 0.25; + background: var(--accent-color); } } .sponsored-action-icon { position: absolute; - font-size: 0.75rem; top: 0.25rem; right: 0; transform: rotate(-45deg); + + font-size: 0.75rem; } } diff --git a/src/components/middle/message/Sticker.module.scss b/src/components/middle/message/Sticker.module.scss index a5afc3c38..15ab57094 100644 --- a/src/components/middle/message/Sticker.module.scss +++ b/src/components/middle/message/Sticker.module.scss @@ -1,7 +1,7 @@ .root { - overflow: visible !important; - contain: layout; position: relative; + contain: layout; + overflow: visible !important; &:not(.inactive) { cursor: var(--custom-cursor, pointer); @@ -17,7 +17,7 @@ } .effect { + pointer-events: none; position: fixed; z-index: var(--z-message-effect); - pointer-events: none; } diff --git a/src/components/middle/message/TimeMenuItem.module.scss b/src/components/middle/message/TimeMenuItem.module.scss index 644e4d7e0..8a653d3fa 100644 --- a/src/components/middle/message/TimeMenuItem.module.scss +++ b/src/components/middle/message/TimeMenuItem.module.scss @@ -1,10 +1,13 @@ :global(.MenuItem).item { + --color-skeleton-background: #2121211a; + + pointer-events: none; + cursor: var(--custom-cursor, default); + margin-bottom: 0; + font-size: 0.8125rem; font-weight: var(--font-weight-normal); - cursor: var(--custom-cursor, default); - pointer-events: none; - --color-skeleton-background: #2121211a; &:hover, &:focus, &:active { @@ -17,30 +20,34 @@ } .get { - cursor: var(--custom-cursor, pointer); - font-size: 0.6875rem; - margin-inline-start: 0.375rem; - border-radius: 1rem; - padding: 0.1875rem 0.375rem; pointer-events: all; + cursor: var(--custom-cursor, pointer); + + margin-inline-start: 0.375rem; + padding: 0.1875rem 0.375rem; + border-radius: 1rem; + + font-size: 0.6875rem; font-weight: var(--font-weight-medium); - transition: 150ms filter ease-in; + background: var(--color-background-menu-separator); filter: opacity(0.8); + transition: 150ms filter ease-in; + &:hover { filter: brightness(1.1); } } .skeleton { - height: 0.5rem; width: calc(100% - 2rem); + height: 0.5rem; margin: 0.5rem 0; border-radius: 0.25rem; } .transition { - height: 1.5rem; width: auto; + height: 1.5rem; } diff --git a/src/components/middle/message/WebPage.scss b/src/components/middle/message/WebPage.scss index a5542d736..bbdd8682c 100644 --- a/src/components/middle/message/WebPage.scss +++ b/src/components/middle/message/WebPage.scss @@ -1,15 +1,19 @@ .WebPage { - color: var(--color-text); + position: relative; + + overflow: hidden; + + max-width: 29rem; margin-top: 0.25rem; margin-bottom: 0.125rem; padding-block: 0.1875rem; + border-radius: 0.25rem; + font-size: calc(var(--message-text-size, 1rem) - 0.0625rem); line-height: 1.125rem; - max-width: 29rem; + color: var(--color-text); + background-color: var(--accent-background-color); - border-radius: 0.25rem; - position: relative; - overflow: hidden; &.with-video { padding-block: 0.375rem; @@ -28,24 +32,28 @@ &--sticker { position: relative; + + overflow: hidden; + width: 100%; height: 100%; - overflow: hidden; border-radius: 0.25rem; } &--stickers { - color: var(--accent-color); border-radius: 0 !important; + color: var(--accent-color); } &.in-preview { + height: 2.625rem; + margin: 0; padding-inline-start: 0.5rem; padding-inline-end: 0.375rem; border-radius: 0.25rem; + background-color: var(--color-primary-tint); - height: 2.625rem; - margin: 0; + transition: background-color 0.2s ease-in; &.with-gift { @@ -89,23 +97,24 @@ transition: opacity 0.2s ease-in; &:hover, &:active { - background-color: transparent !important; opacity: 0.85; + background-color: transparent !important; } } .with-gift &--quick-button { - border-top: inherit; margin-top: 0.0625rem; margin-bottom: -0.125rem; + border-top: inherit; } &-text { + position: relative; + display: flex; flex-direction: column; flex-grow: 1; align-items: flex-start; - position: relative; &_interactive { cursor: var(--custom-cursor, pointer); @@ -119,8 +128,8 @@ .media-inner { margin: 0 !important; - margin-block-end: 0.1875rem !important; margin-block-start: 0.25rem !important; + margin-block-end: 0.1875rem !important; &, & img, @@ -160,8 +169,8 @@ } .media-inner { - order: 2; flex-shrink: 0; + order: 2; &.square-image { width: 5rem; @@ -170,9 +179,9 @@ margin-bottom: 0 !important; img { - object-fit: cover; width: 100%; height: 100%; + object-fit: cover; } } } @@ -187,24 +196,24 @@ .site-name, .site-description, .site-title { - overflow-wrap: anywhere; max-width: 100%; + overflow-wrap: anywhere; } .site-name { - color: var(--accent-color); - font-weight: var(--font-weight-semibold); margin-bottom: 0.125rem; + font-weight: var(--font-weight-semibold); + color: var(--accent-color); } .site-title { - font-weight: var(--font-weight-semibold); margin-bottom: 0.125rem; + font-weight: var(--font-weight-semibold); } .site-description { - line-height: 1.25; margin-bottom: 0.125rem; + line-height: 1.25; body.is-ios & { line-height: 1.125rem; diff --git a/src/components/middle/message/WebPageUniqueGift.module.scss b/src/components/middle/message/WebPageUniqueGift.module.scss index 08f8c6765..530066d4c 100644 --- a/src/components/middle/message/WebPageUniqueGift.module.scss +++ b/src/components/middle/message/WebPageUniqueGift.module.scss @@ -1,21 +1,20 @@ .root { + cursor: var(--custom-cursor, pointer); + + position: relative; + display: flex; flex-direction: column; align-items: center; - position: relative; - min-width: 12.5rem; width: 100%; - + min-width: 12.5rem; margin-top: 0; - padding-block: 2rem !important; padding-bottom: 0.75rem; - + padding-block: 2rem !important; border-radius: 0.25rem; font-weight: var(--font-weight-semibold); - - cursor: var(--custom-cursor, pointer); } .backgroundWrapper { @@ -27,14 +26,15 @@ .background { position: absolute; - inset: 0; - top: -1rem; + inset: -1rem 0 0 0; } .stickerWrapper { position: relative; + + overflow: hidden; + width: 7.5rem; height: 7.5rem; - overflow: hidden; margin-block: 0.5rem; } diff --git a/src/components/middle/message/_message-content.scss b/src/components/middle/message/_message-content.scss index 84c15d711..617a43d71 100644 --- a/src/components/middle/message/_message-content.scss +++ b/src/components/middle/message/_message-content.scss @@ -2,17 +2,17 @@ @use "../../../styles/icons"; @mixin subheader-styles() { - font-size: calc(var(--message-text-size, 1rem) - 0.125rem); - margin-inline-end: 0.5rem; overflow: hidden; - padding-inline: 0.4375rem; + max-width: 10rem; + margin-inline-end: 0.5rem; padding-block: 0.1875rem; + padding-inline: 0.4375rem; border-radius: var(--border-radius-messages-small); - background-color: var(--pattern-color); - max-width: 10rem; + font-size: calc(var(--message-text-size, 1rem) - 0.125rem); + background-color: var(--pattern-color); box-shadow: 0 1px 2px var(--color-default-shadow); @media (max-width: 600px) { @@ -21,43 +21,22 @@ } .message-content { + position: relative; + max-width: var(--max-width); &.gift { --max-width: 18rem; } - position: relative; - max-width: var(--max-width); - - @media (max-width: 600px) { - max-width: min(29rem, calc(100vw - 6.25rem)); - .MessageList.no-avatars & { - max-width: min(29rem, calc(100vw - 3.75rem)); - } - .Message.own & { - max-width: min(30rem, calc(100vw - 3.75rem)); - } - - &.has-action-button { - max-width: min(29rem, calc(100vw - 7rem)); - - .MessageList.no-avatars & { - max-width: min(29rem, calc(100vw - 4.5rem)); - } - - .Message.own & { - max-width: min(30rem, calc(100vw - 4.5rem)); - } - } - } - img { - -webkit-touch-callout: none; user-select: none; + + -webkit-touch-callout: none; } .emoji { - -webkit-user-drag: none; user-select: text; + + -webkit-user-drag: none; } .content-unsupported { @@ -71,18 +50,20 @@ .text-content, .transcription { - margin: 0; - overflow-wrap: anywhere; - white-space: pre-wrap; - line-height: 1.3125; - text-align: initial; - display: block; - unicode-bidi: plaintext; - border-radius: 0.25rem; position: relative; + unicode-bidi: plaintext; overflow: clip; overflow-clip-margin: 0.5rem; + display: block; + + margin: 0; + border-radius: 0.25rem; + + line-height: 1.3125; + text-align: initial; + overflow-wrap: anywhere; + white-space: pre-wrap; } .transcription { @@ -99,8 +80,8 @@ } &.transcription-error { - color: var(--color-text-meta); font-size: 0.875rem; + color: var(--color-text-meta); } .own &.transcription-error { @@ -109,28 +90,29 @@ } .translation-animation { + pointer-events: none; + position: absolute; top: 0; - left: 0; right: 0; bottom: 0; - - pointer-events: none; + left: 0; } .text-loading { --background-gradient-size: 20rem; --animation-color: var(--color-skeleton-background); - background-image: linear-gradient(to right, transparent 10%, var(--animation-color) 50%, transparent 90%); - background-size: var(--background-gradient-size); - display: inline; - box-decoration-break: clone; - color: transparent; border-radius: 0.25rem; + color: transparent; + + background-image: linear-gradient(to right, transparent 10%, var(--animation-color) 50%, transparent 90%); + background-size: var(--background-gradient-size); + box-decoration-break: clone; + animation: text-loading 1.5s linear infinite; .theme-dark & { @@ -153,15 +135,18 @@ position: relative; top: 0.375rem; bottom: auto !important; + float: right; - line-height: 1.35; + height: calc(var(--message-meta-height, 1rem)); - margin-left: 0.4375rem; margin-right: -0.375rem; + margin-left: 0.4375rem; + + line-height: 1.35; .MessageOutgoingStatus .Transition { - max-height: calc(var(--message-meta-height, 1rem)); overflow: hidden; + max-height: calc(var(--message-meta-height, 1rem)); } html[data-message-text-size="12"] & { @@ -185,8 +170,8 @@ &:dir(rtl) { & > .MessageMeta { float: left; - margin-left: -0.25rem; margin-right: 0.4375rem; + margin-left: -0.25rem; } } } @@ -195,17 +180,20 @@ position: relative; top: 0.375rem; bottom: auto !important; + float: right; - line-height: 1; - height: calc(var(--message-meta-height, 1rem)); - margin-left: auto; - margin-top: -0.5rem; - margin-right: -0.5rem; align-self: flex-end; + height: calc(var(--message-meta-height, 1rem)); + margin-top: -0.5rem; + margin-right: -0.5rem; + margin-left: auto; + + line-height: 1; + .MessageOutgoingStatus .Transition { - max-height: calc(var(--message-meta-height, 1rem)); overflow: hidden; + max-height: calc(var(--message-meta-height, 1rem)); } html[data-message-text-size="12"] & { @@ -230,8 +218,8 @@ &.document:not(.text) { &::after { content: ""; - display: block; clear: both; + display: block; } } @@ -274,10 +262,10 @@ } .matching-text-highlight:not(.is-quote) { + padding: 0 0.125rem; + border-radius: 0.25rem; color: var(--color-text); background: #cae3f7; - border-radius: 0.25rem; - padding: 0 0.125rem; .theme-dark & { --color-text: #000; @@ -285,33 +273,35 @@ } .matching-text-highlight.is-quote { - background: transparent; border-radius: 0.25rem; + background: transparent; &.animate { color: var(--color-text); + background-color: #cae3f7; animation: quote-highlight 0.5s; animation-delay: 1.5s; - background-color: #cae3f7; .theme-dark & { - animation-name: quote-highlight-dark; color: #000; + animation-name: quote-highlight-dark; } } } .message-title { - white-space: nowrap; + user-select: none; + + unicode-bidi: plaintext; overflow: hidden; - text-overflow: ellipsis; + display: flex; + font-size: calc(var(--message-text-size, 1rem) - 0.125rem); font-weight: var(--font-weight-medium); line-height: 1.25rem; color: var(--accent-color); - unicode-bidi: plaintext; - display: flex; - user-select: none; + text-overflow: ellipsis; + white-space: nowrap; .forward-title-container, .message-title-name-container, @@ -340,8 +330,8 @@ } .forward-title { - font-weight: normal; margin-right: 0.25rem; + font-weight: normal; } .forward-avatar { @@ -349,9 +339,9 @@ } & > .interactive { + unicode-bidi: plaintext; overflow: hidden; text-overflow: ellipsis; - unicode-bidi: plaintext; } .sender-hidden { @@ -389,9 +379,10 @@ .StarIcon { --color-fill: var(--accent-color); + + margin-left: 0.25rem; vertical-align: middle; opacity: 0.5; - margin-left: 0.25rem; } .title-spacer { @@ -399,33 +390,39 @@ } .admin-title { - margin-left: 1rem; - text-align: right; - font-weight: var(--font-weight-normal); - font-size: 0.75rem; - color: rgba(var(--color-text-meta-rgb), 0.75); user-select: none; + margin-left: 1rem; + + font-size: 0.75rem; + font-weight: var(--font-weight-normal); + color: rgba(var(--color-text-meta-rgb), 0.75); + text-align: right; + .Message.own & { color: var(--accent-color); } } .sender-boosts { + user-select: none; + display: flex; align-items: center; - font-size: 0.75rem; + margin-top: -0.125rem; margin-inline-start: 0.125rem; - user-select: none; + + font-size: 0.75rem; } } .message-subheader { display: flex; flex-direction: column; - justify-content: flex-start; gap: 0.25rem; + justify-content: flex-start; + padding: 0.125rem 0; } @@ -472,11 +469,14 @@ } .svg-appendix { - overflow: hidden; position: absolute; bottom: -0.0625rem; + + overflow: hidden; + width: 0.5625rem; height: 1.125rem; + font-size: 1rem !important; .corner { @@ -504,6 +504,7 @@ .Message & { .svg-appendix { --background-color: #ccc; + opacity: 1; transition: opacity 500ms ease; } @@ -556,16 +557,19 @@ &:not(.custom-shape) .emoji:not(.custom-emoji) { display: inline-block; + width: 1.25em; height: 1.25em; - background-size: 1.25em; - color: transparent; margin-inline-end: 1px; + + color: transparent; vertical-align: text-bottom; + background-size: 1.25em; + &::selection { - background-color: var(--color-selection-highlight-emoji); color: transparent; + background-color: var(--color-selection-highlight-emoji); } } @@ -578,6 +582,7 @@ .custom-emoji { --custom-emoji-size: max(calc(1.25 * var(--message-text-size, 1rem)), 20px); + width: var(--custom-emoji-size); height: var(--custom-emoji-size); } @@ -596,11 +601,11 @@ font-size: inherit !important; .content-inner { - display: flex; - align-items: flex-start; - flex-direction: row-reverse; direction: ltr; + display: flex; + flex-direction: row-reverse; gap: 0.5rem; + align-items: flex-start; & > .message-title { @include subheader-styles(); @@ -609,13 +614,12 @@ position: absolute; top: 0.125rem; left: 100%; - color: white; } .Message.own & { - left: initial; right: 100%; + left: initial; } .admin-title { @@ -632,6 +636,28 @@ margin-top: 0.375rem; } } + + @media (max-width: 600px) { + max-width: min(29rem, calc(100vw - 6.25rem)); + .MessageList.no-avatars & { + max-width: min(29rem, calc(100vw - 3.75rem)); + } + .Message.own & { + max-width: min(30rem, calc(100vw - 3.75rem)); + } + + &.has-action-button { + max-width: min(29rem, calc(100vw - 7rem)); + + .MessageList.no-avatars & { + max-width: min(29rem, calc(100vw - 4.5rem)); + } + + .Message.own & { + max-width: min(30rem, calc(100vw - 4.5rem)); + } + } + } } .message-content:not(.web-page).media { @@ -652,8 +678,8 @@ .WebPage:not(.with-document) { .media-inner { display: flex; - justify-content: center; align-items: center; + justify-content: center; &.interactive { cursor: var(--custom-cursor, pointer); @@ -678,8 +704,8 @@ &.has-subheader .Album, &.is-forwarded .media-inner, &.is-forwarded .Album { - margin-left: -0.5rem; margin-right: -0.5rem; + margin-left: -0.5rem; body.is-ios .Message.own & { margin-left: -0.625rem; @@ -732,8 +758,8 @@ justify-content: center; &:not(.open) { - opacity: 0.5; transform: scale(0); + opacity: 0.5; transition: opacity 0.3s ease, transform 0.3s ease; } } @@ -741,11 +767,15 @@ .icon-large-play, .icon-download { position: absolute; + display: flex; align-items: center; justify-content: center; + color: #fff; + opacity: 0.7; + transition: opacity 150ms; &:hover { @@ -756,9 +786,11 @@ display: flex; align-items: center; justify-content: center; + width: 3.375rem; height: 3.375rem; border-radius: 50%; + background: rgba(black, 0.25); } @@ -782,25 +814,30 @@ .message-media-duration, .message-transfer-progress, .message-paid-media-status { - background: rgba(0, 0, 0, 0.25); - color: #fff; - font-size: 0.75rem; - position: absolute; - left: 0.1875rem; - top: 0.1875rem; - z-index: 1; - padding: 0 0.375rem; - border-radius: 0.75rem; - line-height: 1.125rem; user-select: none; + + position: absolute; + z-index: 1; + top: 0.1875rem; + left: 0.1875rem; + display: flex; align-items: center; + + padding: 0 0.375rem; + border-radius: 0.75rem; + + font-size: 0.75rem; + line-height: 1.125rem; + color: #fff; + + background: rgba(0, 0, 0, 0.25); } .message-media-duration .icon-muted { - vertical-align: -0.1875rem; margin-left: 0.375rem; font-size: 1rem; + vertical-align: -0.1875rem; } .message-media-duration .playback-failed { @@ -814,10 +851,10 @@ } .message-content.custom-shape { - line-height: 1.2; display: flex; flex-wrap: wrap; align-items: flex-end; + line-height: 1.2; &.has-comment-counter { min-height: 5.25rem; @@ -837,16 +874,16 @@ left: 100%; .Message.own & { - left: initial; right: 100%; + left: initial; } } .with-subheader { - display: flex; - align-items: flex-start; - flex-direction: row-reverse; direction: ltr; + display: flex; + flex-direction: row-reverse; + align-items: flex-start; > p { margin-bottom: 0; @@ -858,9 +895,9 @@ } @media (max-width: 340px) { - margin-left: -1rem; z-index: 1; max-width: calc(90vw - 12rem); + margin-left: -1rem; } } @@ -875,15 +912,15 @@ } .media-inner { - line-height: 1; - font-size: 1rem; flex-shrink: 0; + font-size: 1rem; + line-height: 1; .full-media { top: 0; - left: 0; - bottom: 0; right: 0; + bottom: 0; + left: 0; } } @@ -892,8 +929,8 @@ color: transparent; &::selection { - background-color: var(--color-selection-highlight-emoji); color: transparent; + background-color: var(--color-selection-highlight-emoji); } } @@ -918,8 +955,8 @@ } .text-content { - word-break: normal; line-height: var(--emoji-only-size); + word-break: normal; .emoji { width: var(--emoji-only-size); @@ -927,10 +964,10 @@ } .MessageMeta { - text-shadow: none; - bottom: -1.25rem; right: 0; + bottom: -1.25rem; line-height: normal; + text-shadow: none; } } } @@ -972,9 +1009,9 @@ margin-right: 0.5rem; @media (max-width: 340px) { - margin-left: 0; z-index: 1; max-width: calc(90vw - 11.5rem); + margin-left: 0; } } } @@ -997,11 +1034,13 @@ } .text-entity-link { + cursor: var(--custom-cursor, pointer); + + unicode-bidi: initial; + color: var(--color-links) !important; text-decoration: none !important; overflow-wrap: break-word; - cursor: var(--custom-cursor, pointer); - unicode-bidi: initial; &:hover, &:active, @@ -1015,13 +1054,15 @@ } .text-entity-code { - color: var(--color-code); - background: var(--color-code-bg); - white-space: pre-wrap; margin: 0; padding: 1px 2px; border-radius: 4px; + color: var(--color-code); + white-space: pre-wrap; + + background: var(--color-code-bg); + &.clickable { cursor: var(--custom-cursor, pointer); } @@ -1029,15 +1070,19 @@ // Keep this close to `CodeBlock` style to avoid jumps in height .text-entity-pre { - white-space: pre-wrap; - background-color: var(--color-code-bg); - margin: 0; - padding: 0.5rem; - margin-block: 0.25rem; - border-radius: 4px; position: relative; + overflow: hidden; + margin: 0; + margin-block: 0.25rem; + padding: 0.5rem; + border-radius: 4px; + + white-space: pre-wrap; + + background-color: var(--color-code-bg); + &:hover { .code-overlay { opacity: 1; @@ -1045,8 +1090,8 @@ } &.no-word-wrap { - white-space: pre; padding-bottom: 0.25rem; + white-space: pre; } .pre-code { @@ -1059,41 +1104,50 @@ .code-block, .hljs { --color-scrollbar: var(--color-scrollbar-code); + font-family: var(--font-family-monospace); font-size: 0.875rem; } blockquote, .blockquote { - display: inline-block; position: relative; - padding-inline: 0.5rem 1rem; - margin-block: 0.125rem; - border-radius: 0.25rem; + overflow: hidden; - background-color: var(--accent-background-color); - white-space: pre-wrap; + display: inline-block; + + margin-block: 0.125rem; + padding-inline: 0.5rem 1rem; + border-radius: 0.25rem; + font-size: calc(var(--message-text-size, 1rem) - 0.125rem); + white-space: pre-wrap; + + background-color: var(--accent-background-color); &::before { content: ""; + position: absolute; top: 0; - inset-inline-start: 0; bottom: 0; + inset-inline-start: 0; + width: 3px; + background: var(--bar-gradient, var(--accent-color)); } &::after { @include icons.icon; + content: map.get(icons.$icons-map, "quote"); - color: var(--accent-color); position: absolute; top: 0.25rem; inset-inline-end: 0.25rem; font-size: 0.625rem; + color: var(--accent-color); } } @@ -1105,8 +1159,8 @@ blockquote, .blockquote { @keyframes text-loading { 0% { - background-position-x: 0; opacity: 1; + background-position-x: 0; } 50% { @@ -1114,8 +1168,8 @@ blockquote, .blockquote { } 100% { - background-position-x: var(--background-gradient-size); opacity: 1; + background-position-x: var(--background-gradient-size); } } @@ -1131,12 +1185,12 @@ blockquote, .blockquote { @keyframes quote-highlight-dark { 0% { - background-color: #cae3f7; color: #000; + background-color: #cae3f7; } 100% { - background-color: transparent; color: var(--color-text); + background-color: transparent; } } diff --git a/src/components/middle/message/reactions/ReactionButton.module.scss b/src/components/middle/message/reactions/ReactionButton.module.scss index 0c9517f6e..89a3c1ef0 100644 --- a/src/components/middle/message/reactions/ReactionButton.module.scss +++ b/src/components/middle/message/reactions/ReactionButton.module.scss @@ -5,6 +5,30 @@ --reaction-background-hover: var(--hover-color-reaction); --reaction-text-color: var(--text-color-reaction); + position: relative; + z-index: 1; + + overflow: visible; + display: flex; + flex-direction: row; + gap: 0.125rem; + + width: auto; + height: 1.875rem; + padding: 0 0.375rem 0 0.25rem; + border-radius: 1.75rem; + + font-weight: var(--font-weight-medium); + font-variant-numeric: tabular-nums; + line-height: 1.75rem; + color: var(--reaction-text-color); + text-transform: none; + white-space: nowrap; + + background-color: var(--reaction-background) !important; + + transition: background-color 150ms, color 150ms, backdrop-filter 150ms, filter 150ms !important; + &.chosen { --reaction-background: var(--color-reaction-chosen); --reaction-background-hover: var(--hover-color-reaction-chosen); @@ -15,6 +39,7 @@ --reaction-background: #FFBC2E33 !important; --reaction-background-hover: #FFBC2E55 !important; --reaction-text-color: #E98111 !important; + z-index: 2; &.outside { @@ -30,27 +55,6 @@ --reaction-text-color: #FFFFFF !important; } - display: flex; - flex-direction: row; - height: 1.875rem; - white-space: nowrap; - width: auto; - padding: 0 0.375rem 0 0.25rem; - background-color: var(--reaction-background) !important; - border-radius: 1.75rem; - font-weight: var(--font-weight-medium); - font-variant-numeric: tabular-nums; - text-transform: none; - color: var(--reaction-text-color); - overflow: visible; - position: relative; - line-height: 1.75rem; - z-index: 1; - - gap: 0.125rem; - - transition: background-color 150ms, color 150ms, backdrop-filter 150ms, filter 150ms !important; - &:hover { --reaction-background: var(--reaction-background-hover) !important; @@ -68,32 +72,35 @@ .tag.tag { position: relative; - margin-right: 1rem; - padding-inline: 0; + justify-content: start; + margin-right: 1rem; + padding-inline: 0; border-radius: 0.375rem; border-top-right-radius: 0; border-bottom-right-radius: 0; - // SVG has problems with backdrop-filter - &:hover { - backdrop-filter: unset; - filter: var(--reaction-background-hover-filter); - } - &::after { content: ''; + position: absolute; - right: -0.5rem; top: 50%; + right: -0.5rem; transform: translateY(-50%); width: 0.375rem; height: 0.375rem; border-radius: 50%; - background-color: var(--text-color-reaction-chosen); + opacity: 0.4; + background-color: var(--text-color-reaction-chosen); + } + + // SVG has problems with backdrop-filter + &:hover { + filter: var(--reaction-background-hover-filter); + backdrop-filter: unset; } .animated-emoji { @@ -102,10 +109,10 @@ } .tail { - height: 100%; position: absolute; - right: -0.9375rem; z-index: -1; + right: -0.9375rem; + height: 100%; .is-safari & { // Safari subpixel rendering be damned. May cause slight overlap, but it's better than a gap. @@ -122,8 +129,8 @@ .tag-text { display: flex; gap: 0.25rem; - font-size: 1rem; margin-inline-end: 0.375rem; + font-size: 1rem; } .counter { @@ -136,15 +143,16 @@ } .paidCounter { + position: absolute; + z-index: 1; + top: -150%; + right: 50%; + transform: translateX(50%); + font-family: var(--font-family-rounded); font-size: 2.5rem; font-variant-numeric: tabular-nums; color: #FFBC2E; - position: absolute; - top: -150%; - right: 50%; - transform: translateX(50%); -webkit-text-stroke: 1px #E58E0D; - z-index: 1; } diff --git a/src/components/middle/message/reactions/ReactionPicker.module.scss b/src/components/middle/message/reactions/ReactionPicker.module.scss index 873a0979f..c346868ad 100644 --- a/src/components/middle/message/reactions/ReactionPicker.module.scss +++ b/src/components/middle/message/reactions/ReactionPicker.module.scss @@ -3,31 +3,32 @@ z-index: var(--z-reaction-picker); @media (max-width: 600px) { - max-width: 100%; - left: 0 !important; right: 0 !important; + left: 0 !important; + max-width: 100%; } } .menuContent { --border-radius-default: 1.25rem; + transform-origin: 9rem 4.625rem !important; + width: calc(var(--symbol-menu-width) + var(--scrollbar-width)); + height: var(--symbol-menu-height); + padding: 0 !important; + :global(body:not(.no-menu-blur)) & { --color-background: var(--color-background-compact-menu); backdrop-filter: blur(25px); } - width: calc(var(--symbol-menu-width) + var(--scrollbar-width)); - height: var(--symbol-menu-height); - padding: 0 !important; - transform-origin: 9rem 4.625rem !important; - &:global(.bubble) { - transform: scale(0.8) !important; - transition: opacity 150ms cubic-bezier(0.2, 0, 0.2, 1), transform 150ms cubic-bezier(0.2, 0, 0.2, 1) !important; --offset-x: -0.75rem; --offset-y: calc(100% + 0.625rem); + + transform: scale(0.8) !important; + transition: opacity 150ms cubic-bezier(0.2, 0, 0.2, 1), transform 150ms cubic-bezier(0.2, 0, 0.2, 1) !important; } &:global(.bubble.open) { @@ -35,13 +36,13 @@ } @media (max-width: 600px) { - max-width: min(calc(100% - 1rem), 26.25rem); - left: 50% !important; right: auto !important; + left: 50% !important; + max-width: min(calc(100% - 1rem), 26.25rem); &:global(.bubble) { - transform: scale(0.5) translateX(-50%) !important; transform-origin: 0 3.5rem !important; + transform: scale(0.5) translateX(-50%) !important; } &:global(.bubble.open) { @@ -56,12 +57,12 @@ --color-text-secondary-rgb: 255, 255, 255; --color-default-shadow: rgba(0, 0, 0, 0.3); + transform-origin: 70% 100% !important; + :global(.StickerButton.custom-emoji), :global(.sticker-set-cover) { color: #fff; } - transform-origin: 70% 100% !important; - @media (max-width: 600px) { &:global(.bubble) { transform-origin: 30% 100% !important; @@ -70,8 +71,8 @@ } .onlyReactions { - height: auto; transform-origin: 9rem 1.75rem !important; + height: auto; &:global(.bubble) { --offset-y: calc(100% + 0.1875rem); diff --git a/src/components/middle/message/reactions/ReactionPickerLimited.module.scss b/src/components/middle/message/reactions/ReactionPickerLimited.module.scss index 3cf1d0af3..4783ce968 100644 --- a/src/components/middle/message/reactions/ReactionPickerLimited.module.scss +++ b/src/components/middle/message/reactions/ReactionPickerLimited.module.scss @@ -4,8 +4,10 @@ .wrapper { position: relative; + + overflow-y: auto; + height: auto; max-height: min(18rem, 100%); - overflow-y: auto; padding: 0.5rem 0.25rem; } diff --git a/src/components/middle/message/reactions/ReactionSelector.scss b/src/components/middle/message/reactions/ReactionSelector.scss index d49ee1cf7..f606a9e91 100644 --- a/src/components/middle/message/reactions/ReactionSelector.scss +++ b/src/components/middle/message/reactions/ReactionSelector.scss @@ -1,16 +1,10 @@ .ReactionSelector { position: relative; + top: -0.5rem; + right: 0; + min-width: 3rem; max-width: fit-content; - right: 0; - top: -0.5rem; - - @media (max-width: 600px) { - left: 0; - right: 0; - display: flex; - justify-content: center; - } &__bubble-big, &__bubble-small, @@ -25,18 +19,21 @@ } &__bubble-big { - position: absolute; - display: block; content: ""; + + position: absolute; + z-index: -1; right: 1.125rem; bottom: -0.5rem; + + display: block; + width: 1rem; height: 0.5rem; border-top: 0; - border-left: 0; border-right: 0; + border-left: 0; border-radius: 0 0 1rem 1rem; - z-index: -1; &--isRtl { right: auto; @@ -49,11 +46,14 @@ } &__bubble-small { - position: absolute; - display: block; content: ""; + + position: absolute; right: 1.125rem; bottom: -1.25rem; + + display: block; + width: 0.5rem; height: 0.5rem; border-radius: 50%; @@ -86,6 +86,7 @@ &__hint { padding: 0.25rem 0.5rem; + font-size: 0.75rem; color: var(--color-text-secondary); text-align: center; @@ -93,20 +94,30 @@ } &__reactions { - padding: 0 0.5rem; - height: 2.5rem; - display: flex; cursor: var(--custom-cursor, pointer); + + display: flex; align-items: center; + + height: 2.5rem; + padding: 0 0.5rem; } &__show-more { width: 2rem; height: 2rem; - padding: 0; margin-inline-start: 0.25rem; margin-inline-end: -0.125rem; + padding: 0; border-radius: 50%; + font-size: 1.5rem; } + + @media (max-width: 600px) { + right: 0; + left: 0; + display: flex; + justify-content: center; + } } diff --git a/src/components/middle/message/reactions/ReactionSelectorReaction.module.scss b/src/components/middle/message/reactions/ReactionSelectorReaction.module.scss index abbe5bab0..e33f2d77e 100644 --- a/src/components/middle/message/reactions/ReactionSelectorReaction.module.scss +++ b/src/components/middle/message/reactions/ReactionSelectorReaction.module.scss @@ -1,10 +1,10 @@ .root { --custom-emoji-size: 2rem; - margin-inline-start: 0.25rem; position: relative; min-width: 2rem; min-height: 2rem; + margin-inline-start: 0.25rem; &:first-child { margin-inline-start: 0; @@ -32,13 +32,16 @@ .chosen::before { content: ''; + position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); + width: 2.25rem; height: 2.25rem; border-radius: 50%; + background-color: var(--color-background-compact-menu-hover); } @@ -46,19 +49,22 @@ position: absolute; top: 5%; left: 5%; + width: 90%; height: 90%; } .lock { - font-size: 0.875rem; - padding: 0.125rem; - position: absolute; right: 0; bottom: 0; - background-color: var(--color-background-compact-menu); + + padding: 0.125rem; border-radius: 50%; + + font-size: 0.875rem; + + background-color: var(--color-background-compact-menu); } @keyframes custom-fade-in { diff --git a/src/components/middle/message/reactions/Reactions.scss b/src/components/middle/message/reactions/Reactions.scss index d5025d634..13fd245dc 100644 --- a/src/components/middle/message/reactions/Reactions.scss +++ b/src/components/middle/message/reactions/Reactions.scss @@ -1,13 +1,14 @@ .Reactions { + overflow: visible; display: flex; flex-direction: row; - width: 100%; flex-wrap: wrap; gap: 0.375rem; + + width: 100%; + max-width: calc(var(--max-width) + 2.25rem); margin-top: 0.25rem; margin-bottom: 0.1875rem; - overflow: visible; - max-width: calc(var(--max-width) + 2.25rem); &.is-outside { margin-top: 0.25rem; diff --git a/src/components/middle/panes/AudioPlayer.scss b/src/components/middle/panes/AudioPlayer.scss index 4ecc00a4b..97be6b7c8 100644 --- a/src/components/middle/panes/AudioPlayer.scss +++ b/src/components/middle/panes/AudioPlayer.scss @@ -23,14 +23,14 @@ margin: 0.125rem; &.smaller .icon { - font-size: 1.625rem; margin-top: -0.0625rem; + font-size: 1.625rem; } .icon { position: absolute; - font-size: 1.9375rem; margin-top: -0.0625rem; + font-size: 1.9375rem; &.icon-play { margin-left: 0.125rem; @@ -39,8 +39,8 @@ .icon-play, .icon-pause { - opacity: 1; transform: scale(1); + opacity: 1; transition: opacity 0.4s, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); } @@ -48,8 +48,8 @@ &.pause .icon-play, &.loading .icon-play, &.loading .icon-pause { - opacity: 0; transform: scale(0.5); + opacity: 0; } } @@ -61,17 +61,20 @@ .volume-slider-wrapper { position: absolute; - width: 8rem; top: 2.625rem; + width: 8rem; } .volume-slider-spacer { - position: absolute; - transform: translateY(100%); - bottom: 0; - height: 1rem; - width: 8rem; cursor: var(--custom-cursor, default); + + position: absolute; + bottom: 0; + transform: translateY(100%); + + width: 8rem; + height: 1rem; + visibility: hidden; } @@ -81,20 +84,23 @@ } .volume-slider { - opacity: 0; - visibility: hidden; + cursor: var(--custom-cursor, default); position: absolute; - background: var(--color-background); bottom: -1rem; transform: translateY(100%); - transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out; + width: 8rem; padding: 0.75rem; border-radius: 0.5rem; - cursor: var(--custom-cursor, default); + + visibility: hidden; + opacity: 0; + background: var(--color-background); box-shadow: 0 1px 2px var(--color-default-shadow); + transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out; + .RangeSlider { margin: 0; input[type="range"] { @@ -106,8 +112,8 @@ &:hover .volume-slider, .volume-slider:hover, .volume-slider-spacer:hover + .volume-slider { - opacity: 1; visibility: visible; + opacity: 1; } } @@ -116,11 +122,12 @@ } .playback-backdrop { position: absolute; + z-index: calc(var(--z-menu-backdrop) + 1); top: 0; right: 0; + width: 5rem; height: 4rem; - z-index: calc(var(--z-menu-backdrop) + 1); } .playback-button { @@ -133,14 +140,16 @@ } .playback-button-inner { - transition: 0.15s color ease-out; - font-size: 0.75rem; - font-weight: bold; + padding: 0.125rem 0.25rem; border: 2px solid; border-radius: 0.375rem; - padding: 0.125rem 0.25rem; + + font-size: 0.75rem; + font-weight: bold; font-variant-numeric: tabular-nums; + transition: 0.15s color ease-out; + &.small { transform: scale(0.83); } @@ -152,15 +161,18 @@ } &-content { + cursor: var(--custom-cursor, pointer); + + position: relative; + + overflow: hidden; display: flex; - justify-content: center; flex-direction: column; flex-shrink: 1; + justify-content: center; + max-width: 14rem; padding: 0 0.5rem; - position: relative; - overflow: hidden; - cursor: var(--custom-cursor, pointer); border-radius: var(--border-radius-messages-small); &:hover { @@ -171,22 +183,17 @@ max-width: 10rem; } - @media (min-width: 1440px) { - max-width: 24rem; - .right-column-shown & { - max-width: 14rem; - } - } - .AudioPlayer & .title { - display: block; - margin-top: 0.125rem; - font-weight: var(--font-weight-medium); - font-size: 0.875rem !important; - line-height: 1rem; - white-space: nowrap; overflow: hidden; + display: block; + + margin-top: 0.125rem; + + font-size: 0.875rem !important; + font-weight: var(--font-weight-medium); + line-height: 1rem; text-overflow: ellipsis; + white-space: nowrap; body.is-ios & { font-size: 0.9375rem !important; @@ -195,27 +202,36 @@ } .subtitle { - font-size: 0.8125rem !important; - color: var(--color-text-secondary); - line-height: 0.9375rem; - white-space: nowrap; overflow: hidden; - text-overflow: ellipsis; + margin: 0.125rem 0 0; + font-size: 0.8125rem !important; + line-height: 0.9375rem; + color: var(--color-text-secondary); + text-overflow: ellipsis; + white-space: nowrap; + body.is-ios & { font-size: 0.9375rem !important; line-height: 1.125rem; } } + + @media (min-width: 1440px) { + max-width: 24rem; + .right-column-shown & { + max-width: 14rem; + } + } } &.full-width-player { @include mixins.header-pane; .AudioPlayer-content { - max-width: none; flex-grow: 1; + max-width: none; } } @@ -223,8 +239,8 @@ min-width: auto; .icon-check, .icon-placeholder { - margin-left: 0.25rem; margin-right: 0.25rem; + margin-left: 0.25rem; } } } diff --git a/src/components/middle/panes/BotAdPane.module.scss b/src/components/middle/panes/BotAdPane.module.scss index 957d35618..400bc4241 100644 --- a/src/components/middle/panes/BotAdPane.module.scss +++ b/src/components/middle/panes/BotAdPane.module.scss @@ -3,17 +3,19 @@ .root { @include mixins.header-pane; - display: flex; - align-items: center; - gap: 0.5rem; - height: auto; - - line-height: 1.25; - cursor: var(--custom-cursor, pointer); + display: flex; + gap: 0.5rem; + align-items: center; + + height: auto; + // Slight variation from mixins.header-pane padding-left: max(1rem, env(safe-area-inset-left)); + + line-height: 1.25; + transition: background-color 0.2s, transform var(--slide-transition); &:hover { @@ -27,8 +29,8 @@ .info { display: flex; - align-items: center; gap: 0.25rem; + align-items: center; color: var(--accent-color); } diff --git a/src/components/middle/panes/BotVerificationPane.module.scss b/src/components/middle/panes/BotVerificationPane.module.scss index ce615ff97..7100659ee 100644 --- a/src/components/middle/panes/BotVerificationPane.module.scss +++ b/src/components/middle/panes/BotVerificationPane.module.scss @@ -4,15 +4,17 @@ @include mixins.header-pane; display: flex; - height: auto; justify-content: center; + height: auto; padding-inline: 1rem; - color: var(--color-text-secondary); + font-size: 0.875rem; + color: var(--color-text-secondary); } .icon { --custom-emoji-size: 1rem; + padding-inline-end: 0.125rem; } diff --git a/src/components/middle/panes/ChatReportPane.scss b/src/components/middle/panes/ChatReportPane.scss index fc9da0425..fe795fa83 100644 --- a/src/components/middle/panes/ChatReportPane.scss +++ b/src/components/middle/panes/ChatReportPane.scss @@ -13,8 +13,8 @@ } &--Button { - margin-left: 0.25rem; flex: 1 1 50%; + margin-left: 0.25rem; white-space: nowrap; } diff --git a/src/components/middle/panes/HeaderPinnedMessage.module.scss b/src/components/middle/panes/HeaderPinnedMessage.module.scss index e307e6d6f..531b7fc4a 100644 --- a/src/components/middle/panes/HeaderPinnedMessage.module.scss +++ b/src/components/middle/panes/HeaderPinnedMessage.module.scss @@ -1,11 +1,14 @@ @use "../../../styles/mixins"; .root { - display: flex; - align-items: center; - margin-left: auto; cursor: var(--custom-cursor, default); + + display: flex; flex-direction: row-reverse; + align-items: center; + + margin-left: auto; + background: var(--color-background); :global { @@ -19,11 +22,10 @@ } :global(body.no-page-transitions) & { + transition: none !important; :global(.ripple-container) { display: none; } - - transition: none !important; } > :global(.Button) { @@ -52,9 +54,9 @@ height: 3.5rem; .pinnedMessage { + flex: 1; margin-top: 0; margin-bottom: 0; - flex: 1; } .messageText { @@ -72,22 +74,25 @@ } .pinListIconHidden { - opacity: 0; transform: scale(0.6); + opacity: 0; } .pinnedMessage { + cursor: var(--custom-cursor, pointer); + + position: relative; + + overflow: hidden; display: flex; flex-shrink: 1; + align-items: center; + margin-top: -0.25rem; margin-bottom: -0.25rem; padding: 0.25rem; padding-left: 0.375rem; border-radius: var(--border-radius-messages-small); - position: relative; - overflow: hidden; - cursor: var(--custom-cursor, pointer); - align-items: center; &:hover:not(.no-hover) { background-color: var(--color-interactive-element-hover); @@ -95,26 +100,27 @@ } .messageTextTransition { - height: 1.125rem; - width: 100%; overflow: hidden; + width: 100%; + height: 1.125rem; } .messageText { overflow: hidden; - margin-inline-start: 0.375rem; - margin-top: 0.125rem; - max-width: 15rem; - min-width: 15rem; flex-grow: 1; + min-width: 15rem; + max-width: 15rem; + margin-top: 0.125rem; + margin-inline-start: 0.375rem; + transition: 0.25s ease-in-out transform; &.withMedia { transform: translateX(2.625rem); - margin-right: 2.625rem; - max-width: calc(15rem - 2.625rem); min-width: calc(15rem - 2.625rem); + max-width: calc(15rem - 2.625rem); + margin-right: 2.625rem; &[dir="rtl"] { transform: translateX(-0.25rem); @@ -132,14 +138,15 @@ } .title { - font-weight: var(--font-weight-medium); - font-size: 0.875rem; - line-height: 1rem; height: 1rem; - color: var(--color-primary); margin-bottom: 0.125rem; - white-space: pre; + + font-size: 0.875rem; + font-weight: var(--font-weight-medium); + line-height: 1rem; + color: var(--color-primary); text-align: initial; + white-space: pre; :global(body.is-ios) & { font-size: 0.9375rem; @@ -147,14 +154,17 @@ } .summary { + --custom-emoji-size: 1.125rem; + + overflow: hidden; + + height: 1.125rem; + margin: 0; + font-size: 0.875rem; line-height: 1.125rem; - height: 1.125rem; - white-space: nowrap; - overflow: hidden; text-overflow: ellipsis; - margin: 0; - --custom-emoji-size: 1.125rem; + white-space: nowrap; :global(body.is-ios) & { font-size: 0.9375rem; @@ -163,37 +173,40 @@ .inlineButton, .inlineButton:global(.Button.tiny) { - display: block; - width: auto; overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - border-radius: 1.5rem; - padding: 0 0.75rem; - font-weight: var(--font-weight-medium); - text-transform: none; - height: 2rem; - max-width: 10rem; + display: block; flex-shrink: 1; + + width: auto; + max-width: 10rem; + height: 2rem; + padding: 0 0.75rem; + border-radius: 1.5rem; + + font-weight: var(--font-weight-medium); + text-overflow: ellipsis; + text-transform: none; + white-space: nowrap; } .pictogramTransition { position: absolute; + + overflow: hidden; + width: 2.25rem !important; height: 2.25rem; - margin-inline-start: 0.5rem; margin-top: 0.125rem; - overflow: hidden; + margin-inline-start: 0.5rem; } .pinnedThumb { - width: 100%; - height: 100%; - + overflow: hidden; flex-shrink: 0; + width: 100%; + height: 100%; border-radius: 0.25rem; - overflow: hidden; & + .messageText { max-width: 12rem; @@ -209,10 +222,11 @@ @media (max-width: 600px) { .pinnedMessage { flex-grow: 1; - padding-top: 0; - padding-bottom: 0; + max-width: unset; margin-top: -0.1875rem; + padding-top: 0; + padding-bottom: 0; &::before { top: 0.125rem; diff --git a/src/components/middle/panes/PaidMessageChargePane.module.scss b/src/components/middle/panes/PaidMessageChargePane.module.scss index 2f4c69731..c5d8409ce 100644 --- a/src/components/middle/panes/PaidMessageChargePane.module.scss +++ b/src/components/middle/panes/PaidMessageChargePane.module.scss @@ -5,28 +5,31 @@ display: flex; flex-direction: column; - height: auto; - justify-content: center; align-items: center; + justify-content: center; + height: auto; padding-inline: 1rem; - color: var(--color-text-secondary); + font-size: 0.875rem; + color: var(--color-text-secondary); } .message { - justify-content: center; display: flex; align-items: center; + justify-content: center; + margin-bottom: 0.375rem; + font-size: 1rem; } .messageStars { - font-weight: var(--font-weight-medium); - padding-inline: 0.25rem; display: inline-flex; align-items: center; + padding-inline: 0.25rem; + font-weight: var(--font-weight-medium); } .messageStarIcon { diff --git a/src/components/middle/search/MiddleSearch.module.scss b/src/components/middle/search/MiddleSearch.module.scss index d776fc936..ec313c3c6 100644 --- a/src/components/middle/search/MiddleSearch.module.scss +++ b/src/components/middle/search/MiddleSearch.module.scss @@ -8,13 +8,14 @@ --text-color-reaction-chosen: #FFFFFF; --hover-color-reaction-chosen: var(--color-primary-shade); + pointer-events: none; + position: absolute; + z-index: var(--z-local-search); top: 0; right: 0; bottom: 0; left: 0; - pointer-events: none; - z-index: var(--z-local-search); @media (min-width: 1276px) { :global(#Main.right-column-open) & { @@ -24,34 +25,37 @@ } .header { + pointer-events: auto; + position: absolute; top: 0; left: 0; - width: 100%; - height: 3.5rem; - background-color: var(--color-background); + display: flex; align-items: center; - padding-left: max(1.5rem, env(safe-area-inset-left)); - padding-right: max(0.875rem, env(safe-area-inset-right)); - pointer-events: auto; + width: 100%; + height: 3.5rem; + padding-right: max(0.875rem, env(safe-area-inset-right)); + padding-left: max(1.5rem, env(safe-area-inset-left)); opacity: 0; + background-color: var(--color-background); + transition: opacity 200ms ease-in-out; .active & { opacity: 1; } - @media (max-width: 600px) { - padding-left: max(0.5rem, env(safe-area-inset-left)); - padding-right: max(0.5rem, env(safe-area-inset-right)); - } - :global(body.is-electron.is-macos) & { padding-left: 4.5rem; } + + @media (max-width: 600px) { + padding-right: max(0.5rem, env(safe-area-inset-right)); + padding-left: max(0.5rem, env(safe-area-inset-left)); + } } // Same as in MiddleHeader.scss @@ -62,14 +66,15 @@ } .input { - border: none; - margin-left: 0.25rem; - margin-right: 0.75rem; flex: 1; - transition-property: background-color, box-shadow, border-radius; - transition-duration: 200ms; + margin-right: 0.75rem; + margin-left: 0.25rem; + border: none; + transition-timing-function: ease-in-out; + transition-duration: 200ms; + transition-property: background-color, box-shadow, border-radius; .mobile & { margin: 0; @@ -86,35 +91,36 @@ } .adaptSearchBorders { - border-bottom-left-radius: 0; border-bottom-right-radius: 0; + border-bottom-left-radius: 0; } .dropdown { - position: absolute; - bottom: 0; - left: 0; - right: 0; - transform: translateY(100%); - max-height: min(24rem, 80vh); pointer-events: all; + position: absolute; + right: 0; + bottom: 0; + left: 0; + transform: translateY(100%); + + overflow: hidden; display: flex; flex-direction: column; - background-color: var(--color-background); - - overflow: hidden; - box-shadow: 0 0 0.625rem 0 var(--color-default-shadow); - clip-path: inset(0 -0.625rem -0.625rem -0.625rem); // Hide top shadow - - border-bottom-left-radius: 1.375rem; + max-height: min(24rem, 80vh); border-bottom-right-radius: 1.375rem; + border-bottom-left-radius: 1.375rem; - transition-behavior: allow-discrete; + background-color: var(--color-background); + clip-path: inset(0 -0.625rem -0.625rem -0.625rem); // Hide top shadow + box-shadow: 0 0 0.625rem 0 var(--color-default-shadow); + + transition-duration: 200ms; /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */ transition-property: display, opacity; - transition-duration: 200ms; + + transition-behavior: allow-discrete; .mobile & { position: absolute; @@ -122,11 +128,10 @@ right: 0; bottom: 3.375rem; left: 0; + transform: none; max-height: none; padding: 0; - - transform: none; border-radius: 0; } @@ -141,18 +146,18 @@ } .results { + overflow-y: scroll; display: flex; flex-direction: column; - overflow-y: scroll; padding: 0.5rem; @include mixins.adapt-padding-to-scrollbar(0.5rem); } .placeholder { + margin: 0.5rem; color: var(--color-text-secondary); text-align: center; - margin: 0.5rem; } .separator { @@ -161,17 +166,15 @@ } .savedTags { - display: flex; - align-items: center; - gap: 0.375rem; - flex-shrink: 0; - - padding-block: 1rem; - margin-inline: 1rem; - - border-bottom: 1px solid var(--color-borders); - overflow-x: scroll; + display: flex; + flex-shrink: 0; + gap: 0.375rem; + align-items: center; + + margin-inline: 1rem; + padding-block: 1rem; + border-bottom: 1px solid var(--color-borders); } .wrap { @@ -189,25 +192,24 @@ } .hash { - margin-inline-end: -0.5rem; - margin-inline-start: 0.5rem; - display: grid; place-items: center; + + margin-inline-start: 0.5rem; + margin-inline-end: -0.5rem; + font-size: 1.5rem; color: var(--color-text-secondary); } .searchTypes { + overflow-x: scroll; display: flex; flex-shrink: 0; - padding-block: 1rem; margin-inline: 1rem; - + padding-block: 1rem; border-bottom: 1px solid var(--color-borders); - - overflow-x: scroll; } .searchType { @@ -216,16 +218,17 @@ flex-grow: 0 !important; flex-shrink: 0; - color: var(--color-text-secondary); - background-color: var(--color-item-active); - font-weight: var(--font-weight-medium); - margin-bottom: 0; + + font-weight: var(--font-weight-medium); + color: var(--color-text-secondary); + + background-color: var(--color-item-active); } .selectedType { - background-color: var(--color-primary); color: var(--color-white) !important; + background-color: var(--color-primary); &:hover { background-color: var(--color-primary-shade); @@ -233,22 +236,24 @@ } .footer { + pointer-events: auto; + position: absolute; bottom: 0; left: 0; - width: 100%; - height: 3.5rem; - background-color: var(--color-background); + transform: translateY(100%); + display: flex; align-items: center; - padding-left: max(1rem, env(safe-area-inset-left)); + + width: 100%; + height: 3.5rem; padding-right: max(0.5rem, env(safe-area-inset-right)); + padding-left: max(1rem, env(safe-area-inset-left)); - pointer-events: auto; - + background-color: var(--color-background); box-shadow: 0 -2px 2px var(--color-light-shadow); - transform: translateY(100%); transition: transform 200ms ease-in-out; .active & { @@ -257,14 +262,14 @@ :global { body:not(.keyboard-visible) & { - padding-bottom: 0; height: 3.5rem; + padding-bottom: 0; } @media (max-width: 600px) { body:not(.keyboard-visible) & { - padding-bottom: env(safe-area-inset-bottom); height: calc(3.5rem + env(safe-area-inset-bottom)); + padding-bottom: env(safe-area-inset-bottom); } } } @@ -279,6 +284,7 @@ position: absolute; right: 0.5rem; bottom: 4rem; + display: flex; flex-direction: column; gap: 0.5rem; diff --git a/src/components/middle/search/MiddleSearchResult.module.scss b/src/components/middle/search/MiddleSearchResult.module.scss index 3be756a11..c63d18a5f 100644 --- a/src/components/middle/search/MiddleSearchResult.module.scss +++ b/src/components/middle/search/MiddleSearchResult.module.scss @@ -1,13 +1,33 @@ .root { + cursor: var(--custom-cursor, pointer); + display: flex; gap: 0.75rem; + padding: 0.375rem 0.75rem; border-radius: 0.625rem; + + font-size: 0.875rem; + color: var(--color-text); + outline: none; - color: var(--color-text); - font-size: 0.875rem; - cursor: var(--custom-cursor, pointer); + :global { + .matching-text-highlight { + display: inline-block; + + padding: 0 0.125rem; + border-radius: 0.25rem; + + color: var(--color-text); + + background: #cae3f7; + + :global(.theme-dark) & { + --color-text: #000; + } + } + } @media (hover: hover) { &:hover, @@ -16,27 +36,13 @@ background-color: var(--color-chat-hover); } } - - :global { - .matching-text-highlight { - color: var(--color-text); - background: #cae3f7; - border-radius: 0.25rem; - padding: 0 0.125rem; - display: inline-block; - - :global(.theme-dark) & { - --color-text: #000; - } - } - } } .info { + overflow: hidden; display: flex; flex-direction: column; flex-grow: 1; - overflow: hidden; } .topRow { @@ -50,9 +56,11 @@ .subtitle { position: relative; - color: var(--color-text-secondary); + overflow: hidden; + + line-height: 1.25; + color: var(--color-text-secondary); text-overflow: ellipsis; white-space: nowrap; - line-height: 1.25; } diff --git a/src/components/modals/aboutAds/AboutAdsModal.module.scss b/src/components/modals/aboutAds/AboutAdsModal.module.scss index e514420c3..73a0b13f2 100644 --- a/src/components/modals/aboutAds/AboutAdsModal.module.scss +++ b/src/components/modals/aboutAds/AboutAdsModal.module.scss @@ -3,9 +3,9 @@ } .title, .description { + padding-inline: 1.5rem; text-align: center !important; text-wrap: pretty; - padding-inline: 1.5rem; } .moreButton { diff --git a/src/components/modals/boost/BoostModal.module.scss b/src/components/modals/boost/BoostModal.module.scss index 0199849e8..7279fd621 100644 --- a/src/components/modals/boost/BoostModal.module.scss +++ b/src/components/modals/boost/BoostModal.module.scss @@ -1,9 +1,10 @@ .content { + overflow: hidden; display: flex; flex-direction: column; gap: 1rem; + min-height: 14rem; - overflow: hidden; } .modal { @@ -13,10 +14,9 @@ :global(.modal-title) { overflow: hidden; + padding-left: 0.5rem; text-overflow: ellipsis; white-space: nowrap; - - padding-left: 0.5rem; } } @@ -51,9 +51,10 @@ .avatarContainer { display: flex; - align-self: center; gap: 0.25rem; align-items: center; + align-self: center; + margin-bottom: 0.5rem; } @@ -68,17 +69,21 @@ .boostedMark { position: absolute; - bottom: -0.125rem; + z-index: 10; right: -0.125rem; - font-size: 1.25rem; - background-color: var(--color-background); + bottom: -0.125rem; + padding: 0.125rem; border-radius: 50%; - z-index: 10; + + font-size: 1.25rem; + + background-color: var(--color-background); &::before { background-image: var(--premium-gradient); background-clip: text; + -webkit-text-fill-color: transparent; } } diff --git a/src/components/modals/chatInvite/ChatInviteModal.module.scss b/src/components/modals/chatInvite/ChatInviteModal.module.scss index 6ceb0d874..b67bad464 100644 --- a/src/components/modals/chatInvite/ChatInviteModal.module.scss +++ b/src/components/modals/chatInvite/ChatInviteModal.module.scss @@ -13,15 +13,15 @@ } .participants { - display: flex; overflow-x: scroll; + display: flex; gap: 0.5rem; align-self: stretch; } .participant { - min-width: 4.5rem; width: 4.5rem; + min-width: 4.5rem; margin-inline: auto; } diff --git a/src/components/modals/chatlist/ChatlistModal.module.scss b/src/components/modals/chatlist/ChatlistModal.module.scss index 2cbb633bd..9052b19ff 100644 --- a/src/components/modals/chatlist/ChatlistModal.module.scss +++ b/src/components/modals/chatlist/ChatlistModal.module.scss @@ -1,7 +1,7 @@ .description { - text-align: center; - color: var(--color-text-secondary); margin-bottom: 1rem; + color: var(--color-text-secondary); + text-align: center; } .picker-wrapper { @@ -20,8 +20,8 @@ } .selection-toggle { - color: var(--color-links); cursor: var(--custom-cursor, pointer); + color: var(--color-links); } .foldersWrapper { @@ -30,18 +30,21 @@ } .folders { - display: flex; - justify-content: center; - gap: 0.5rem; - position: relative; + + display: flex; + gap: 0.5rem; + justify-content: center; + margin-bottom: 1rem; &::after { content: ''; + position: absolute; top: 0; left: 0; + width: 100%; height: 100%; @@ -66,7 +69,7 @@ .button-badge { position: absolute; - right: -0.25rem; top: 50%; + right: -0.25rem; transform: translate(100%, -50%); } diff --git a/src/components/modals/collectible/CollectibleInfoModal.module.scss b/src/components/modals/collectible/CollectibleInfoModal.module.scss index f9a50f4a1..589e99458 100644 --- a/src/components/modals/collectible/CollectibleInfoModal.module.scss +++ b/src/components/modals/collectible/CollectibleInfoModal.module.scss @@ -11,21 +11,21 @@ } .icon { + display: grid; + flex-shrink: 0; + place-items: center; + width: 5rem; height: 5rem; border-radius: 50%; - display: grid; - place-items: center; - - flex-shrink: 0; background-color: var(--color-primary); } .title, .description { + padding: 0 1rem; text-align: center !important; text-wrap: pretty; - padding: 0 1rem; } .title { diff --git a/src/components/modals/common/TableAboutModal.module.scss b/src/components/modals/common/TableAboutModal.module.scss index 517c9eeea..aaa151c82 100644 --- a/src/components/modals/common/TableAboutModal.module.scss +++ b/src/components/modals/common/TableAboutModal.module.scss @@ -1,12 +1,12 @@ .root :global(.modal-dialog) { - width: 26.25rem; overflow: hidden; + width: 26.25rem; } .title, .description { + padding-inline: 1.5rem; text-align: center !important; text-wrap: pretty; - padding-inline: 1.5rem; } .secondary { @@ -15,17 +15,20 @@ .topIcon { --premium-gradient: linear-gradient(88.39deg, #6C93FF -2.56%, #976FFF 51.27%, #DF69D1 107.39%); - display: grid; - place-items: center; - flex-shrink: 0; - border-radius: 50%; - background: var(--premium-gradient); - font-size: 4rem; - color: white; + display: grid; + flex-shrink: 0; + place-items: center; + width: 6rem; height: 6rem; margin-bottom: 1rem; + border-radius: 50%; + + font-size: 4rem; + color: white; + + background: var(--premium-gradient); } .listItemIcon { @@ -33,13 +36,13 @@ } .content { + overflow-x: hidden; display: flex; flex-direction: column; align-items: center; - overflow-x: hidden; } .separator { - margin-block: 1rem; width: calc(100% + 2rem); // Hack to cover modal paddings + margin-block: 1rem; } diff --git a/src/components/modals/common/TableInfoModal.module.scss b/src/components/modals/common/TableInfoModal.module.scss index 7ee47bdff..7a1df5ebf 100644 --- a/src/components/modals/common/TableInfoModal.module.scss +++ b/src/components/modals/common/TableInfoModal.module.scss @@ -1,12 +1,13 @@ @use '../../../styles/mixins'; .content { + overflow-x: hidden; display: flex; flex-direction: column; gap: 1rem; - padding-inline: 1rem !important; + max-height: min(92vh, 45rem) !important; - overflow-x: hidden; + padding-inline: 1rem !important; } .title { @@ -14,22 +15,22 @@ } .value { - background-color: var(--color-background); - overflow-wrap: anywhere; min-width: 2rem; + overflow-wrap: anywhere; + background-color: var(--color-background); } .table { + overflow: hidden; display: grid; grid-template-columns: max-content 1fr; - border-radius: 0.3125rem; - border: 1px solid var(--color-borders); - background-color: var(--color-borders); + flex-shrink: 0; gap: 1px; - flex-shrink: 0; + border: 1px solid var(--color-borders); + border-radius: 0.3125rem; - overflow: hidden; + background-color: var(--color-borders); } .noFooter { @@ -37,11 +38,14 @@ } .cell { + position: relative; + display: flex; align-items: center; - padding: 0.25rem 0.5rem; - position: relative; + min-height: 2.5rem; + padding: 0.25rem 0.5rem; + font-size: 0.9375rem; } @@ -55,6 +59,6 @@ .chatItem { width: fit-content; - background-color: var(--color-background); color: var(--color-primary); + background-color: var(--color-background); } diff --git a/src/components/modals/frozenAccount/FrozenAccountModal.module.scss b/src/components/modals/frozenAccount/FrozenAccountModal.module.scss index b7c7c560c..bd55624f3 100644 --- a/src/components/modals/frozenAccount/FrozenAccountModal.module.scss +++ b/src/components/modals/frozenAccount/FrozenAccountModal.module.scss @@ -1,24 +1,25 @@ .header { - margin-top: 0.5rem; - margin-bottom: 0.75rem; display: flex; flex-direction: column; align-items: center; + width: 100%; + margin-top: 0.5rem; + margin-bottom: 0.75rem; } .title { - font-weight: var(--font-weight-medium); - font-size: 1.25rem; - text-align: center; padding-top: 0.5rem; + font-size: 1.25rem; + font-weight: var(--font-weight-medium); + text-align: center; } .footer { - margin-top: 0.5rem; display: flex; - align-self: stretch; flex-direction: column; + align-self: stretch; + margin-top: 0.5rem; } .buttonAppeal { diff --git a/src/components/modals/gift/GiftComposer.module.scss b/src/components/modals/gift/GiftComposer.module.scss index 3d34df497..12fae023a 100644 --- a/src/components/modals/gift/GiftComposer.module.scss +++ b/src/components/modals/gift/GiftComposer.module.scss @@ -1,11 +1,12 @@ @use "../../../styles/mixins"; .root { - height: 100%; + overflow-x: hidden; + overflow-y: scroll; display: flex; flex-direction: column; - overflow-y: scroll; - overflow-x: hidden; + + height: 100%; padding-top: 3.5rem; padding-inline: 0.75rem; @@ -13,11 +14,12 @@ } .header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0.5rem; padding-left: 4rem; - display: flex; - justify-content: space-between; - align-items: center; } .spacer { @@ -31,10 +33,10 @@ } .balance-container { - margin-left: auto; - align-items: flex-end; display: flex; flex-direction: column; + align-items: flex-end; + margin-left: auto; } .balance-caption { @@ -47,9 +49,9 @@ .balance { display: flex; + align-items: center; font-size: 1rem; font-weight: var(--font-weight-medium); - align-items: center; } .optionsSection { @@ -59,47 +61,44 @@ } .checkboxTitle { - color: var(--color-text); - font-size: 1rem; - text-transform: initial; margin: 0; + font-size: 1rem; + color: var(--color-text); + text-transform: initial; } .actionMessageView { - display: grid; - place-content: center; - height: 22.5rem; - margin-bottom: 0; - margin-top: 0.75rem; - - padding: 0.5rem; - position: relative; - overflow: hidden; - flex: 0 0 auto; + overflow: hidden; + display: grid; + flex: 0 0 auto; + place-content: center; + + height: 22.5rem; + margin-top: 0.75rem; + margin-bottom: 0; + padding: 0.5rem; border-radius: var(--border-radius-default); background-color: var(--theme-background-color); - background-position: center; background-repeat: no-repeat; + background-position: center; background-size: 100% 100%; - :global(html.theme-light) & { - background-image: url('../../../assets/chat-bg-br.png'); - } - &::before { content: ""; + position: absolute; top: 0; - left: 0; - bottom: 0; right: 0; + bottom: 0; + left: 0; + background-image: url('../../../assets/chat-bg-pattern-light.png'); + background-repeat: repeat; background-position: top right; background-size: 510px auto; - background-repeat: repeat; mix-blend-mode: overlay; :global(html.theme-dark) & { @@ -112,6 +111,10 @@ height: calc(var(--vh, 1vh) * 100); } } + + :global(html.theme-light) & { + background-image: url('../../../assets/chat-bg-br.png'); + } } .messageInput, .limited { @@ -119,15 +122,17 @@ } .footer { - display: flex; - justify-content: space-between; - padding: 1rem; - margin-inline: -0.75rem; // Account for padding - flex-direction: column; - background-color: var(--color-background-secondary); - position: sticky; bottom: 0; + + display: flex; + flex-direction: column; + justify-content: space-between; + + margin-inline: -0.75rem; // Account for padding + padding: 1rem; + + background-color: var(--color-background-secondary); } .switcher { @@ -140,20 +145,21 @@ } .description { - color: var(--color-text-secondary); - font-size: 0.875rem; margin-bottom: 0.5rem; margin-left: 1rem; + font-size: 0.875rem; + color: var(--color-text-secondary); } .main-button { display: flex; - font-weight: var(--font-weight-semibold); font-size: 1rem; + font-weight: var(--font-weight-semibold); } .star { --color-fill: var(--color-white); + width: 1rem; height: 1rem; margin-right: 0.1875rem; @@ -163,21 +169,25 @@ .background { position: absolute; top: 0; - left: 0; - bottom: 0; right: 0; + bottom: 0; + left: 0; + overflow: hidden; + background-color: var(--theme-background-color); &::before { content: ""; + position: absolute; top: 0; - left: 0; - bottom: 0; right: 0; - background-position: center; + bottom: 0; + left: 0; + background-repeat: no-repeat; + background-position: center; background-size: cover; } @@ -190,8 +200,8 @@ } &.customBgImage::before { - background-image: var(--custom-background) !important; transform: scale(1.1); + background-image: var(--custom-background) !important; } :global(body:not(.no-page-transitions)) &.withTransition { @@ -206,14 +216,6 @@ filter: blur(12px); } - @media screen and (min-width: 1276px) { - :global(body:not(.no-page-transitions)) &:not(.customBgImage)::before { - overflow: hidden; - transform: scale(1); - transform-origin: left center; - } - } - :global(html.theme-light body:not(.no-page-transitions)) &:not(.customBgImage).withRightColumn::before { @media screen and (min-width: 1276px) { transform: scaleX(0.73) !important; @@ -235,15 +237,17 @@ &:not(.customBgImage):not(.customBgColor)::after { content: ""; + position: absolute; top: 0; - left: 0; - bottom: 0; right: 0; + bottom: 0; + left: 0; + background-image: url('../../../assets/chat-bg-pattern-light.png'); + background-repeat: repeat; background-position: top right; background-size: 510px auto; - background-repeat: repeat; mix-blend-mode: overlay; :global(html.theme-dark) & { @@ -251,4 +255,12 @@ mix-blend-mode: unset; } } + + @media screen and (min-width: 1276px) { + :global(body:not(.no-page-transitions)) &:not(.customBgImage)::before { + transform-origin: left center; + transform: scale(1); + overflow: hidden; + } + } } diff --git a/src/components/modals/gift/GiftItem.module.scss b/src/components/modals/gift/GiftItem.module.scss index 699782d7f..6e87069f7 100644 --- a/src/components/modals/gift/GiftItem.module.scss +++ b/src/components/modals/gift/GiftItem.module.scss @@ -1,32 +1,39 @@ .container { + cursor: var(--custom-cursor, pointer); + + position: relative; + display: flex; + flex-basis: 0; flex-direction: column; + flex-grow: 1; align-items: center; justify-content: center; - flex-grow: 1; - flex-basis: 0; + min-width: 0; padding: 0.625rem; padding-top: 0; border-radius: 0.625rem; + background-color: var(--color-background-secondary); - position: relative; - cursor: var(--custom-cursor, pointer); + + &::before { + pointer-events: none; + content: ""; + + position: absolute; + inset: 0; + + border-radius: 0.625rem; + + opacity: 0; + background-color: var(--color-hover-overlay); + } :global(html.theme-dark) & { background-color: var(--color-background); } - &::before { - content: ""; - position: absolute; - inset: 0; - opacity: 0; - border-radius: 0.625rem; - background-color: var(--color-hover-overlay); - pointer-events: none; - } - &:hover::before { opacity: 1; } @@ -43,20 +50,21 @@ } .description { - font-size: 0.875rem; - line-height: 1; + overflow: hidden; max-width: 100%; + + font-size: 0.875rem; + line-height: 1; text-overflow: ellipsis; white-space: nowrap; - overflow: hidden; } .buy { - font-size: 0.6875rem !important; margin-top: 0.625rem; - line-height: 1; + font-size: 0.6875rem !important; font-weight: var(--font-weight-semibold) !important; + line-height: 1; } .star { @@ -69,9 +77,9 @@ } .starsPriceBlock { - color: var(--color-stars); margin-top: 0.5rem; font-size: 0.75rem; + color: var(--color-stars); } .starsPriceIcon { diff --git a/src/components/modals/gift/GiftModal.module.scss b/src/components/modals/gift/GiftModal.module.scss index 12e0a39c4..def4ff5be 100644 --- a/src/components/modals/gift/GiftModal.module.scss +++ b/src/components/modals/gift/GiftModal.module.scss @@ -51,34 +51,40 @@ .starGiftsContainer, .premiumGiftsGallery { display: flex; - justify-content: center; - align-items: center; gap: 0.625rem; + align-items: center; + justify-content: center; + margin-bottom: 0.75rem; } .starGiftsContainer { display: grid; grid-template-columns: repeat(3, 1fr); + margin: 0rem; padding: 0.125rem; padding-top: 0.75rem; } .header { + position: absolute; z-index: 2; + top: 0; + left: 0; + + overflow: hidden; display: flex; align-items: center; - border-bottom: 0.0625rem solid var(--color-borders); - position: absolute; + width: 100%; - left: 0; - top: 0; height: 3.5rem; padding: 0.5rem; + border-bottom: 0.0625rem solid var(--color-borders); + background: var(--color-background); + transition: 0.25s ease-out transform; - overflow: hidden; } .headerSlide { @@ -87,9 +93,9 @@ } .headerText { + margin-bottom: 0; font-size: 1.5rem; font-weight: var(--font-weight-medium); - margin-bottom: 0; } .hiddenHeader { @@ -97,36 +103,38 @@ } .commonHeaderText { + unicode-bidi: plaintext; + margin: 0 0 0 4.5rem; font-size: 1.25rem; font-weight: var(--font-weight-medium); - margin: 0 0 0 4.5rem; - unicode-bidi: plaintext; } .closeButton { position: absolute; + z-index: 3; top: 0.375rem; left: 0.375rem; - z-index: 3; } .balance { position: absolute; + z-index: 3; top: 0.75rem; right: 1.25rem; - z-index: 3; } .avatars { - display: flex; position: relative; - flex-direction: row; - justify-content: center; - align-items: center; - gap: 1rem; - padding: 1rem; - margin-top: 1rem; z-index: 1; + + display: flex; + flex-direction: row; + gap: 1rem; + align-items: center; + justify-content: center; + + margin-top: 1rem; + padding: 1rem; } .logoBackground { @@ -141,10 +149,10 @@ } .description { - text-align: center; - line-height: 1.375; - margin: 0.25rem 1rem 1rem; max-width: 25rem; + margin: 0.25rem 1rem 1rem; + line-height: 1.375; + text-align: center; } .starGiftsDescription { @@ -152,9 +160,9 @@ } .boostIcon { + line-height: 1.5; color: var(--color-primary); vertical-align: middle; - line-height: 1.5; } .optionBottom { @@ -163,10 +171,10 @@ } .secondaryInfo { - text-align: center; + padding: 0.5rem 1rem; font-size: 0.875rem; color: var(--color-text-secondary); - padding: 0.5rem 1rem; + text-align: center; } .footer { @@ -175,6 +183,6 @@ .starGiftsTransition { overflow: hidden; - min-height: calc(100% - 3.5rem); height: auto; + min-height: calc(100% - 3.5rem); } diff --git a/src/components/modals/gift/StarGiftCategoryList.module.scss b/src/components/modals/gift/StarGiftCategoryList.module.scss index 4cda91b08..a767f8872 100644 --- a/src/components/modals/gift/StarGiftCategoryList.module.scss +++ b/src/components/modals/gift/StarGiftCategoryList.module.scss @@ -1,23 +1,25 @@ @use '../../../styles/mixins'; .list { - flex-shrink: 0; - display: flex; - align-items: center; - gap: 0.0625rem; - flex-wrap: nowrap; - background-color: var(--color-background); - overflow-x: auto; - overflow-y: hidden; z-index: 1; - font-size: 0.875rem; - padding-block: 0.25rem; + overflow-x: auto; + overflow-y: hidden; + display: flex; + flex-shrink: 0; + flex-wrap: nowrap; + gap: 0.0625rem; + align-items: center; justify-content: flex-start; // Prevent first item from being always partially obscured margin-left: -0.5rem; padding-left: 0.5rem; + padding-block: 0.25rem; + + font-size: 0.875rem; + + background-color: var(--color-background); :global(html.theme-dark) & { background-color: #181818; @@ -31,12 +33,14 @@ display: flex; align-items: center; justify-content: center; - white-space: nowrap; + width: auto; padding: 0.375rem 0.75rem; + border-radius: 1rem; + font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); - border-radius: 1rem; + white-space: nowrap; &:hover { cursor: pointer; @@ -45,8 +49,8 @@ } .selected-item { - background-color: var(--color-background-secondary); color: var(--color-text-secondary); + background-color: var(--color-background-secondary); } :global(html.theme-dark) { diff --git a/src/components/modals/gift/UniqueGiftHeader.module.scss b/src/components/modals/gift/UniqueGiftHeader.module.scss index 2270a24c4..6b5520d40 100644 --- a/src/components/modals/gift/UniqueGiftHeader.module.scss +++ b/src/components/modals/gift/UniqueGiftHeader.module.scss @@ -4,6 +4,7 @@ display: flex; flex-direction: column; align-items: center; + width: 100%; height: var(--_height); margin-bottom: 0.5rem; @@ -12,21 +13,21 @@ .radialPattern { position: absolute; - inset: -5%; - top: -5rem; - height: calc(var(--height) * 1.05); - z-index: -1; + inset: -5rem -5% -5% -5%; + height: calc(var(--height) * 1.05); } .amount { display: flex; gap: 0.25rem; + align-items: center; + + margin-bottom: 0.125rem; + font-size: 1.125rem; font-weight: var(--font-weight-medium); line-height: 1.325; - margin-bottom: 0.125rem; - align-items: center; color: white; } @@ -37,8 +38,8 @@ .transition { position: absolute; top: 0; - height: calc(var(--_height) + 1rem); // Account for top modal padding overflow: hidden; + height: calc(var(--_height) + 1rem); // Account for top modal padding } .transitionSlide { @@ -48,20 +49,22 @@ } .title { + margin-top: auto; font-size: 1.25rem; color: white; - margin-top: auto; } .subtitle { max-width: 75%; + font-size: 0.875rem; - transition: color 150ms ease-in; text-align: center; text-wrap: balance; + + transition: color 150ms ease-in; } .title, .subtitle { - margin-bottom: 0; z-index: 1; + margin-bottom: 0; } diff --git a/src/components/modals/gift/info/GiftInfoModal.module.scss b/src/components/modals/gift/info/GiftInfoModal.module.scss index b6726ab76..dd64b03c6 100644 --- a/src/components/modals/gift/info/GiftInfoModal.module.scss +++ b/src/components/modals/gift/info/GiftInfoModal.module.scss @@ -5,8 +5,9 @@ .header { display: flex; flex-direction: column; - align-items: center; gap: 0.5rem; + align-items: center; + margin-bottom: 1rem; } @@ -19,30 +20,33 @@ } .headerSplitButton { - display: flex; - flex-direction: row; position: absolute; right: 0.375rem; + display: flex; + flex-direction: row; } .headerButton, .giftResalePriceContainer { - height: 1.75rem; - width: fit-content; - font-size: 1rem; - font-weight: var(--font-weight-medium); - - outline: none !important; - align-items: center; - display: flex; - justify-content: center; - color: white; - border-radius: 1rem; - background-color: rgba(0, 0, 0, 0.2); - backdrop-filter: blur(25px); pointer-events: auto; + + display: flex; + align-items: center; + justify-content: center; + + width: fit-content; + height: 1.75rem; padding: 0.25rem; padding-inline: 0.625rem; + border-radius: 1rem; + + font-size: 1rem; + font-weight: var(--font-weight-medium); + color: white; + + background-color: rgba(0, 0, 0, 0.2); + backdrop-filter: blur(25px); + outline: none !important; } .giftResalePriceContainer { @@ -54,10 +58,13 @@ } .headerButton { - position: relative; cursor: var(--custom-cursor, pointer); - flex-shrink: 0; + + position: relative; + overflow: hidden; + flex-shrink: 0; + transition: background-color 0.15s; &:hover { @@ -66,18 +73,18 @@ } .left { - border-bottom-right-radius: 0; border-top-right-radius: 0; + border-bottom-right-radius: 0; } .right { - border-bottom-left-radius: 0; border-top-left-radius: 0; + border-bottom-left-radius: 0; } .description { - text-align: center; color: var(--_color-description, var(--color-text)); + text-align: center; } .footer { @@ -98,15 +105,15 @@ .giftValue { display: flex; - align-items: center; gap: 0.125rem; + align-items: center; line-height: 1; } .uniqueAttribute { display: flex; - align-items: center; gap: 0.25rem; + align-items: center; } /* stylelint-disable-next-line plugin/stylelint-group-selectors */ @@ -119,11 +126,13 @@ } .modalHeader { + position: absolute; z-index: 2; + + display: flex; + width: 100%; padding: 0.375rem; - position: absolute; - display: flex; .modalCloseButton { margin-right: auto; @@ -131,15 +140,14 @@ } .ownerAddress { + cursor: pointer; + overflow: hidden; font-family: var(--font-family-monospace); font-size: 0.875rem; - cursor: pointer; - - overflow: hidden; } .copyIcon { + pointer-events: none; margin-inline-start: 0.25rem; color: var(--color-primary); - pointer-events: none; } diff --git a/src/components/modals/gift/resale/GiftResalePriceComposerModal.module.scss b/src/components/modals/gift/resale/GiftResalePriceComposerModal.module.scss index 4e02123da..e697847d7 100644 --- a/src/components/modals/gift/resale/GiftResalePriceComposerModal.module.scss +++ b/src/components/modals/gift/resale/GiftResalePriceComposerModal.module.scss @@ -1,9 +1,11 @@ .descriptionContainer { - color: var(--color-text-secondary); - font-size: 0.875rem; + display: flex; + margin-bottom: 2rem; margin-inline: 1rem; - display: flex; + + font-size: 0.875rem; + color: var(--color-text-secondary); } .descriptionPrice { diff --git a/src/components/modals/gift/status/GiftStatusInfoModal.module.scss b/src/components/modals/gift/status/GiftStatusInfoModal.module.scss index 011a5f403..dfb197ac9 100644 --- a/src/components/modals/gift/status/GiftStatusInfoModal.module.scss +++ b/src/components/modals/gift/status/GiftStatusInfoModal.module.scss @@ -18,16 +18,17 @@ .radialPattern { position: absolute; - inset-inline-start: -1.5rem; - height: calc(100% + 2rem); - top: -3rem; - width: calc(100% + 3rem); z-index: -1; + top: -3rem; + inset-inline-start: -1.5rem; + + width: calc(100% + 3rem); + height: calc(100% + 2rem); } .lockIcon { - font-size: 1rem; margin-left: 0.25rem; + font-size: 1rem; } .avatar { @@ -35,30 +36,32 @@ } .userTitle { + justify-content: center; + + width: 100%; + margin-top: auto; + padding-top: 1rem; + font-size: 1.25rem; color: white; - margin-top: auto; - width: 100%; - justify-content: center; - padding-top: 1rem; } .status { + padding-bottom: 1rem; font-size: 0.875rem; text-align: center; - padding-bottom: 1rem; } .userTitle, .status { - margin-bottom: 0; z-index: 1; + margin-bottom: 0; } .giftTitle { - font-weight: var(--font-weight-medium); - font-size: 1.5rem; - text-align: center; padding-bottom: 0.5rem; + font-size: 1.5rem; + font-weight: var(--font-weight-medium); + text-align: center; } .infoDescription { @@ -66,7 +69,7 @@ } .footer { - margin-top: 0.5rem; display: flex; align-self: stretch; + margin-top: 0.5rem; } diff --git a/src/components/modals/gift/upgrade/GiftUpgradeModal.module.scss b/src/components/modals/gift/upgrade/GiftUpgradeModal.module.scss index 6cdfe382a..4c5774a78 100644 --- a/src/components/modals/gift/upgrade/GiftUpgradeModal.module.scss +++ b/src/components/modals/gift/upgrade/GiftUpgradeModal.module.scss @@ -2,7 +2,6 @@ display: flex; flex-direction: column; gap: 0.75rem; - align-self: stretch; } diff --git a/src/components/modals/gift/withdraw/GiftWithdrawModal.module.scss b/src/components/modals/gift/withdraw/GiftWithdrawModal.module.scss index a38df4cf2..aec45b862 100644 --- a/src/components/modals/gift/withdraw/GiftWithdrawModal.module.scss +++ b/src/components/modals/gift/withdraw/GiftWithdrawModal.module.scss @@ -1,21 +1,21 @@ .header { display: flex; - justify-content: center; - align-items: center; gap: 0.5rem; + align-items: center; + justify-content: center; margin-bottom: 1rem; } .giftPreview { - width: 5.625rem; - height: 5.625rem; position: relative; + overflow: hidden; display: grid; place-items: center; - overflow: hidden; + width: 5.625rem; + height: 5.625rem; border-radius: 0.625rem; } @@ -25,8 +25,8 @@ } .description { - text-wrap: pretty; margin-bottom: 1.5rem; + text-wrap: pretty; } .arrow { diff --git a/src/components/modals/giftcode/GiftCodeModal.module.scss b/src/components/modals/giftcode/GiftCodeModal.module.scss index 022a46fd6..7a8d7b842 100644 --- a/src/components/modals/giftcode/GiftCodeModal.module.scss +++ b/src/components/modals/giftcode/GiftCodeModal.module.scss @@ -1,6 +1,6 @@ .clickable { - color: var(--color-primary); cursor: pointer; + color: var(--color-primary); } .centered { @@ -8,8 +8,8 @@ } .logo { + align-self: center; width: 7.5rem; height: 7.5rem; margin-bottom: 1rem; - align-self: center; } diff --git a/src/components/modals/inviteViaLink/InviteViaLinkModal.module.scss b/src/components/modals/inviteViaLink/InviteViaLinkModal.module.scss index 9b163ecf6..cb9aa59df 100644 --- a/src/components/modals/inviteViaLink/InviteViaLinkModal.module.scss +++ b/src/components/modals/inviteViaLink/InviteViaLinkModal.module.scss @@ -6,9 +6,9 @@ .closeButton { position: absolute; + z-index: 1; top: 0.5rem; left: 0.5rem; - z-index: 1; } .contentText { @@ -18,9 +18,9 @@ } .title { - font-size: 1.25rem; margin-top: 1rem; margin-bottom: 0; + font-size: 1.25rem; } .separator { diff --git a/src/components/modals/oneTimeMedia/OneTimeMediaModal.module.scss b/src/components/modals/oneTimeMedia/OneTimeMediaModal.module.scss index e6a55c3b2..7a4ba1ddc 100644 --- a/src/components/modals/oneTimeMedia/OneTimeMediaModal.module.scss +++ b/src/components/modals/oneTimeMedia/OneTimeMediaModal.module.scss @@ -1,18 +1,22 @@ .root { position: absolute; + z-index: var(--z-modal-confirm); top: 0; left: 0; + + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 100%; height: 100%; - display: flex; - justify-content: center; - flex-direction: column; - backdrop-filter: blur(2rem); - animation: fade-in-opacity 0.3s ease; + background-color: rgba(0, 0, 0, 0.5); - z-index: var(--z-modal-confirm); - align-items: center; + backdrop-filter: blur(2rem); + transition: opacity 0.3s ease; + animation: fade-in-opacity 0.3s ease; &.closing { opacity: 0; @@ -33,13 +37,14 @@ position: absolute; bottom: 0; left: 0; + width: 100%; margin-bottom: 2rem; } .closeBtn { - margin: 0 auto; width: auto; + margin: 0 auto; } @keyframes fade-in-opacity { diff --git a/src/components/modals/paidReaction/PaidReactionModal.module.scss b/src/components/modals/paidReaction/PaidReactionModal.module.scss index 45a96663e..ca8790f9e 100644 --- a/src/components/modals/paidReaction/PaidReactionModal.module.scss +++ b/src/components/modals/paidReaction/PaidReactionModal.module.scss @@ -6,14 +6,14 @@ } .title { - font-size: 1.5rem; - margin-bottom: 0; margin-top: 1.25rem; + margin-bottom: 0; + font-size: 1.5rem; } .slider { - margin-top: 2rem; flex-shrink: 0; + margin-top: 2rem; } .description { @@ -25,28 +25,29 @@ } .itemInfo { - flex-grow: 1; overflow: hidden; - height: auto; display: flex; flex-direction: column; + flex-grow: 1; + + height: auto; margin-left: 0.5rem; } .itemTitle { - line-height: 1rem; margin-bottom: 0.125rem; + line-height: 1rem; } .itemSubtitle { font-size: 0.9375rem; - color: var(--color-text-secondary); line-height: 1rem; + color: var(--color-text-secondary); } .itemIcon { - margin-left: 0.5rem; margin-right: 0 !important; + margin-left: 0.5rem; } .sendAsPeerButtonAvatar { @@ -54,14 +55,16 @@ } .sendAsPeerMenuButton { - transition: background-color 0.15s; - margin-right: 0.25rem; - border-radius: 1.5rem; - padding: 0.25rem !important; width: auto; height: auto !important; + margin-right: 0.25rem; + padding: 0.25rem !important; + border-radius: 1.5rem; + background-color: var(--color-background-secondary) !important; + transition: background-color 0.15s; + &:global(.active), &:active, &:hover { @@ -70,18 +73,20 @@ } .buttonDownIcon { - margin-left: 0.25rem; margin-right: 0.125rem; + margin-left: 0.25rem; } .sendAsPeerMenuBubble { - max-height: 15rem; - overflow-y: auto !important; right: auto !important; left: 50%; - transform: translateX(-50%) scale(0.85) !important; transform-origin: center !important; + transform: translateX(-50%) scale(0.85) !important; + + overflow-y: auto !important; + max-width: 16rem; + max-height: 15rem; &:global(.open) { transform: translateX(-50%) scale(1) !important; @@ -93,20 +98,22 @@ } .sendAsPeersMenuContainer { - z-index: 3; - display: flex; position: absolute; + z-index: 3; left: 50%; transform: translateX(-50%); + + display: flex; } .headerControlPanel { - display: flex; - align-items: center; position: absolute; + z-index: 3; top: 0.75rem; right: 1.25rem; - z-index: 3; + + display: flex; + align-items: center; } .separator { @@ -118,10 +125,10 @@ } .topLabel { - background-image: var(--stars-gradient); - color: var(--color-white); - border-radius: 1rem; padding: 0.25rem 0.75rem; + border-radius: 1rem; + color: var(--color-white); + background-image: var(--stars-gradient); } .top { @@ -145,9 +152,11 @@ } .disclaimer { - font-size: 0.875rem; align-self: center; - color: var(--color-text-secondary); + margin-top: 0.5rem; margin-bottom: 0.125rem; + + font-size: 0.875rem; + color: var(--color-text-secondary); } diff --git a/src/components/modals/paidReaction/StarSlider.module.scss b/src/components/modals/paidReaction/StarSlider.module.scss index f199f0ae0..c875171f1 100644 --- a/src/components/modals/paidReaction/StarSlider.module.scss +++ b/src/components/modals/paidReaction/StarSlider.module.scss @@ -5,16 +5,16 @@ --progress: 0; position: relative; - padding-top: 4rem; overflow-x: hidden; + padding-top: 4rem; @include mixins.reset-range(); } .slider { + cursor: pointer; height: var(--_size) !important; margin-bottom: 0 !important; - cursor: pointer; &::-webkit-slider-runnable-track { height: var(--_size); @@ -29,59 +29,69 @@ } &::-webkit-slider-thumb { - height: var(--_size); width: var(--_size); - background-color: transparent; + height: var(--_size); border: none; + + background-color: transparent; outline: none; box-shadow: none; } &::-moz-range-thumb { - height: var(--_size); width: var(--_size); - background-color: transparent; + height: var(--_size); border: none; + + background-color: transparent; outline: none; box-shadow: none; } } .sparkles { - left: 0; - bottom: 0; - height: var(--_size); - pointer-events: none; --_width: calc(100% - 1rem); - mask-image: linear-gradient(to right, black var(--_width), transparent calc(var(--_width) + 0.5rem)); + + pointer-events: none; + + bottom: 0; + left: 0; + + height: var(--_size); color: white; + + mask-image: linear-gradient(to right, black var(--_width), transparent calc(var(--_width) + 0.5rem)); } .progress { - position: absolute; - left: 0; - bottom: 0; - height: var(--_size); pointer-events: none; - border-radius: 1rem; - min-width: var(--_size); + position: absolute; + bottom: 0; + left: 0; + width: calc(var(--_size) + (var(--progress) * (100% - var(--_size)))); + min-width: var(--_size); + height: var(--_size); + border-radius: 1rem; background-image: var(--stars-gradient); &::after { content: ""; + position: absolute; - right: 0.125rem; + z-index: 1; top: 0.125rem; + right: 0.125rem; + width: 1.625rem; height: 1.625rem; border-radius: 50%; + background-color: white; - z-index: 1; } } @@ -89,9 +99,11 @@ --_min-x: 0; --_max-x: 100%; + pointer-events: none; + position: absolute; - left: 0; right: 0; + left: 0; transform: translateX( clamp( @@ -100,11 +112,11 @@ var(--_max-x), ) ); - pointer-events: none; } .floatingBadge { --_speed: 0; + position: absolute; top: -1rem; left: 0; @@ -113,25 +125,25 @@ .floatingBadgeText { display: flex; - align-items: center; gap: 0.125rem; + align-items: center; padding: 0.5rem 1rem; border-radius: 2rem; - background-image: var(--stars-gradient); - - line-height: 1; font-size: 1.5rem; font-weight: var(--font-weight-medium); + line-height: 1; color: white; white-space: nowrap; + + background-image: var(--stars-gradient); } .floatingBadgeTriangle { position: absolute; - left: 50%; - bottom: 0; - transform: translate(-50%, 33%); z-index: -1; + bottom: 0; + left: 50%; + transform: translate(-50%, 33%); } diff --git a/src/components/modals/preparedMessage/PreparedMessageModal.module.scss b/src/components/modals/preparedMessage/PreparedMessageModal.module.scss index d94bc3fda..ea946e31f 100644 --- a/src/components/modals/preparedMessage/PreparedMessageModal.module.scss +++ b/src/components/modals/preparedMessage/PreparedMessageModal.module.scss @@ -16,9 +16,9 @@ .container { padding: 1rem; - background-color: var(--color-background-secondary); - border-bottom-left-radius: var(--border-radius-modal); border-bottom-right-radius: var(--border-radius-modal); + border-bottom-left-radius: var(--border-radius-modal); + background-color: var(--color-background-secondary); } .header { @@ -29,48 +29,37 @@ } .actionMessageView { - display: grid; - place-content: center; - min-height: 22.5rem; - height: 100%; - position: relative; + overflow: hidden; + display: grid; flex: 0 0 auto; + place-content: center; - margin: 0.75rem; width: calc(100% - 1.5rem); - + height: 100%; + min-height: 22.5rem; + margin: 0.75rem; border-radius: var(--border-radius-default); background-color: var(--theme-background-color); - background-position: center; background-repeat: no-repeat; + background-position: center; background-size: 100% 100%; - :global(.Message) { - padding: 1rem; - } - - :global(.message-content) { - max-width: 20rem; - } - - :global(html.theme-light) & { - background-image: url('../../../assets/chat-bg-br.png'); - } - &::before { content: ""; + position: absolute; top: 0; - left: 0; - bottom: 0; right: 0; + bottom: 0; + left: 0; + background-image: url('../../../assets/chat-bg-pattern-light.png'); + background-repeat: repeat; background-position: top right; background-size: 510px auto; - background-repeat: repeat; mix-blend-mode: overlay; :global(html.theme-dark) & { @@ -83,6 +72,18 @@ height: calc(var(--vh, 1vh) * 100); } } + + :global(.Message) { + padding: 1rem; + } + + :global(.message-content) { + max-width: 20rem; + } + + :global(html.theme-light) & { + background-image: url('../../../assets/chat-bg-br.png'); + } } .info { @@ -94,21 +95,25 @@ .background { position: absolute; top: 0; - left: 0; - bottom: 0; right: 0; + bottom: 0; + left: 0; + overflow: hidden; + background-color: var(--theme-background-color); &::before { content: ""; + position: absolute; top: 0; - left: 0; - bottom: 0; right: 0; - background-position: center; + bottom: 0; + left: 0; + background-repeat: no-repeat; + background-position: center; background-size: cover; } @@ -121,8 +126,8 @@ } &.customBgImage::before { - background-image: var(--custom-background) !important; transform: scale(1.1); + background-image: var(--custom-background) !important; } :global(body:not(.no-page-transitions)) &.withTransition { @@ -137,14 +142,6 @@ filter: blur(12px); } - @media screen and (min-width: 1276px) { - :global(body:not(.no-page-transitions)) &:not(.customBgImage)::before { - overflow: hidden; - transform: scale(1); - transform-origin: left center; - } - } - :global(html.theme-light body:not(.no-page-transitions)) &:not(.customBgImage).withRightColumn::before { @media screen and (min-width: 1276px) { transform: scaleX(0.73) !important; @@ -166,15 +163,17 @@ &:not(.customBgImage):not(.customBgColor)::after { content: ""; + position: absolute; top: 0; - left: 0; - bottom: 0; right: 0; + bottom: 0; + left: 0; + background-image: url('../../../assets/chat-bg-pattern-light.png'); + background-repeat: repeat; background-position: top right; background-size: 510px auto; - background-repeat: repeat; mix-blend-mode: overlay; :global(html.theme-dark) & { @@ -182,4 +181,12 @@ mix-blend-mode: unset; } } + + @media screen and (min-width: 1276px) { + :global(body:not(.no-page-transitions)) &:not(.customBgImage)::before { + transform-origin: left center; + transform: scale(1); + overflow: hidden; + } + } } diff --git a/src/components/modals/reportAd/ReportAdModal.module.scss b/src/components/modals/reportAd/ReportAdModal.module.scss index e05987c9e..c5efe2895 100644 --- a/src/components/modals/reportAd/ReportAdModal.module.scss +++ b/src/components/modals/reportAd/ReportAdModal.module.scss @@ -14,8 +14,8 @@ } .optionText { - width: 100%; overflow: hidden; + width: 100%; text-overflow: ellipsis; white-space: nowrap; } @@ -29,15 +29,15 @@ } .sectionTitle { - color: var(--color-primary); padding-inline: 1rem; + color: var(--color-primary); } .description { margin-top: 0.75rem; margin-bottom: 0; - color: var(--color-text-secondary); padding-inline: 1rem; + color: var(--color-text-secondary); } .title { @@ -54,7 +54,7 @@ } .transition { + overflow: hidden; /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */ transition: height 0.25s ease-in-out; - overflow: hidden; } diff --git a/src/components/modals/reportModal/ReportModal.module.scss b/src/components/modals/reportModal/ReportModal.module.scss index 5343debf0..27c09c2fb 100644 --- a/src/components/modals/reportModal/ReportModal.module.scss +++ b/src/components/modals/reportModal/ReportModal.module.scss @@ -24,10 +24,10 @@ } .optionText { - width: 100%; overflow: hidden; - white-space: normal; + width: 100%; word-wrap: break-word; + white-space: normal; } .option { @@ -35,23 +35,24 @@ } .optionButton { - padding-block: 0 !important; padding: 0 0 0 1rem !important; + padding-block: 0 !important; } .sectionTitle { - color: var(--color-primary); - padding-inline: 1rem; margin-top: 0.75rem; - font-weight: var(--font-weight-medium); + padding-inline: 1rem; + font-size: 1rem; + font-weight: var(--font-weight-medium); + color: var(--color-primary); } .description { margin-top: 0.75rem; margin-bottom: 0; - color: var(--color-text-secondary); padding-inline: 1rem; + color: var(--color-text-secondary); } .title { @@ -73,9 +74,9 @@ } .transition { + overflow: hidden; /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */ transition: height 0.25s ease-in-out; - overflow: hidden; } .block { @@ -83,6 +84,7 @@ flex-direction: column; align-items: center; justify-content: center; + padding: 0 1rem; } diff --git a/src/components/modals/stars/StarTopupOptionList.module.scss b/src/components/modals/stars/StarTopupOptionList.module.scss index 6b37bba0a..49f44cdfd 100644 --- a/src/components/modals/stars/StarTopupOptionList.module.scss +++ b/src/components/modals/stars/StarTopupOptionList.module.scss @@ -9,19 +9,21 @@ .option { --_background-color: var(--color-background-secondary); + + cursor: var(--custom-cursor, pointer); + display: flex; flex-direction: column; + gap: 0.125rem; align-items: center; justify-content: center; - gap: 0.125rem; padding: 1rem; border-radius: 0.625rem; background-color: var(--_background-color); - transition: background-color 0.25s ease-out; - cursor: var(--custom-cursor, pointer); + transition: background-color 0.25s ease-out; &:hover { --_background-color: var(--color-background-secondary-accent); @@ -38,11 +40,11 @@ .optionTop { display: flex; - align-items: center; gap: 0.25rem; + align-items: center; - font-weight: var(--font-weight-medium); font-size: 1.5rem; + font-weight: var(--font-weight-medium); line-height: 1; } @@ -55,6 +57,7 @@ .stackedStar { @include mixins.filter-outline(0.0625rem, var(--_background-color)); + transition: filter 0.25s ease-out; } diff --git a/src/components/modals/stars/StarsBalanceModal.module.scss b/src/components/modals/stars/StarsBalanceModal.module.scss index 702eb9753..15ea23347 100644 --- a/src/components/modals/stars/StarsBalanceModal.module.scss +++ b/src/components/modals/stars/StarsBalanceModal.module.scss @@ -9,8 +9,8 @@ } .root :global(.modal-dialog) { - height: min(45rem, 90vh); max-width: 26.25rem; + height: min(45rem, 90vh); } .minimal :global(.modal-dialog) { @@ -24,8 +24,8 @@ } .main { - height: 100%; overflow-y: scroll; + height: 100%; } .container { @@ -34,38 +34,43 @@ } .section { + position: relative; + display: flex; flex-direction: column; align-items: center; padding: 0.5rem; - position: relative; @include mixins.adapt-padding-to-scrollbar(0.5rem); @include mixins.side-panel-section; } .sectionTitle { - color: var(--color-primary); - font-weight: var(--font-weight-medium); - font-size: 1rem; align-self: flex-start; + padding: 0.25rem 0.75rem; + + font-size: 1rem; + font-weight: var(--font-weight-medium); + color: var(--color-primary); } .tos { - font-size: 0.875rem; - color: var(--color-text-secondary); - background-color: var(--color-background-secondary); padding: 0.5rem 1rem; padding-top: 0; + + font-size: 0.875rem; + color: var(--color-text-secondary); + + background-color: var(--color-background-secondary); } .logo { - margin: 1rem; width: 6.25rem; height: 6.25rem; min-height: 6.25rem; + margin: 1rem; } .logoBackground { @@ -73,44 +78,50 @@ top: 0.75rem; left: 50%; transform: translateX(-50%); + height: 8rem; } .headerHext { + margin-inline: 0.5rem; font-size: 1.5rem; font-weight: var(--font-weight-medium); text-align: center; - margin-inline: 0.5rem; } .description { - text-align: center; - margin-inline: 0.5rem; margin-bottom: 1rem; - text-wrap: balance; + margin-inline: 0.5rem; + line-height: 1.375; + text-align: center; + text-wrap: balance; } .header { + position: absolute; z-index: 2; + top: 0; + left: 0; + display: flex; align-items: center; - border-bottom: 0.0625rem solid var(--color-borders); - position: absolute; + width: 100%; - left: 0; - top: 0; height: 3.5rem; padding: 0.5rem; + border-bottom: 0.0625rem solid var(--color-borders); + background: var(--color-background); + transition: 0.25s ease-out transform; } .starHeaderText { + unicode-bidi: plaintext; + margin: 0 0 0 3rem; font-size: 1.25rem; font-weight: var(--font-weight-medium); - margin: 0 0 0 3rem; - unicode-bidi: plaintext; } .botItem { @@ -123,23 +134,25 @@ .closeButton { position: absolute; + z-index: 3; top: 0.5rem; left: 0.5rem; - z-index: 3; } .addStarsButton { - width: 1rem; - height: 1rem; - padding: 0; display: flex; align-items: center; justify-content: center; + + width: 1rem; + height: 1rem; + padding: 0; border-radius: 50%; - transition: opacity 0.15s; opacity: 1; + transition: opacity 0.15s; + &:hover, &:active { opacity: 0.75; @@ -167,18 +180,19 @@ } .balanceBottom { - line-height: 1.5; - font-weight: var(--font-weight-medium); display: flex; - align-items: center; gap: 0.25rem; + align-items: center; + + font-weight: var(--font-weight-medium); + line-height: 1.5; } .modalBalance { position: absolute; + z-index: 3; top: 0.75rem; right: 1.25rem; - z-index: 3; } .starButton { @@ -195,36 +209,39 @@ } .paymentImages { + position: relative; + display: grid; grid-auto-columns: 3.5rem; grid-auto-flow: column; place-items: center; + margin-bottom: 1rem; - position: relative; } .paymentPhoto { - outline: 0.25rem solid var(--color-background); z-index: 1; + outline: 0.25rem solid var(--color-background); } .avatarStar { + position: absolute; + z-index: 1; + right: -1rem; + bottom: 0; + font-size: 2rem; @include mixins.filter-outline(1px, var(--color-background)); - - position: absolute; - right: -1rem; - bottom: 0; - z-index: 1; } .paymentImageBackground { - height: 7rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); + + height: 7rem; } .paymentButton { @@ -261,14 +278,16 @@ } .loadMore { - justify-content: flex-start; gap: 0.75rem; + justify-content: flex-start; } .loadMoreIcon { display: grid; place-items: center; + width: 2.75rem; height: 2.75rem; + font-size: 1.5rem; } diff --git a/src/components/modals/stars/gift/StarsGiftModal.module.scss b/src/components/modals/stars/gift/StarsGiftModal.module.scss index b6055a8a4..9c567195f 100644 --- a/src/components/modals/stars/gift/StarsGiftModal.module.scss +++ b/src/components/modals/stars/gift/StarsGiftModal.module.scss @@ -5,18 +5,19 @@ } .content { + overflow: hidden !important; display: flex; flex-direction: column; padding: 0 !important; - overflow: hidden !important; } .main { - height: 100%; overflow-y: scroll; display: flex; flex-direction: column; align-items: center; + + height: 100%; } .headerInfo { @@ -27,10 +28,10 @@ } .logo { - margin: 1rem; width: 6.25rem; height: 6.25rem; min-height: 6.25rem; + margin: 1rem; } .logoBackground { @@ -38,13 +39,14 @@ top: 0.75rem; left: 50%; transform: translateX(-50%); + height: 8rem; } .description { - text-align: center; - margin-inline: 0.5rem; margin-bottom: 1rem; + margin-inline: 0.5rem; + text-align: center; text-wrap: balance; } @@ -58,25 +60,29 @@ } .header { + position: absolute; z-index: 2; + top: 0; + left: 0; + display: flex; align-items: center; - border-bottom: 0.0625rem solid var(--color-borders); - position: absolute; + width: 100%; - left: 0; - top: 0; height: 3.5rem; padding: 0.5rem; + border-bottom: 0.0625rem solid var(--color-borders); + background: var(--color-background); + transition: 0.25s ease-out transform; } .starHeaderText { + unicode-bidi: plaintext; + margin: 0 0 0 3.5rem; font-size: 1.25rem; font-weight: var(--font-weight-medium); - margin: 0 0 0 3.5rem; - unicode-bidi: plaintext; } .hiddenHeader { @@ -85,9 +91,9 @@ .closeButton { position: absolute; + z-index: 3; top: 0.5rem; left: 0.5rem; - z-index: 3; } .avatar { @@ -100,11 +106,12 @@ } .secondaryInfo { - text-align: center; + margin-top: auto; + padding: 1rem; + font-size: 0.875rem; color: var(--color-text-secondary); - padding: 1rem; - margin-top: auto; + text-align: center; } @media (max-width: 450px) { diff --git a/src/components/modals/stars/subscription/StarsSubscriptionItem.module.scss b/src/components/modals/stars/subscription/StarsSubscriptionItem.module.scss index 96234b862..09aee64b9 100644 --- a/src/components/modals/stars/subscription/StarsSubscriptionItem.module.scss +++ b/src/components/modals/stars/subscription/StarsSubscriptionItem.module.scss @@ -1,11 +1,14 @@ @use '../../../../styles/mixins'; .root { + cursor: var(--custom-cursor, pointer); + display: flex; gap: 0.75rem; + padding: 0.25rem 0.75rem 0.25rem 0.25rem; border-radius: 0.5rem; - cursor: var(--custom-cursor, pointer); + transition: background-color 0.25s ease-out; &:hover { @@ -28,9 +31,9 @@ .statusPricing { display: flex; - align-items: center; flex-shrink: 0; gap: 0.25rem; + align-items: center; } .amount { @@ -48,8 +51,8 @@ .subtitle { display: flex; - align-items: center; gap: 0.125rem; + align-items: center; font-size: 0.8125rem; } @@ -69,9 +72,9 @@ .subscriptionStar { position: absolute; + z-index: 1; right: 0; bottom: 0; - z-index: 1; @include mixins.filter-outline(1px, var(--color-background)); } diff --git a/src/components/modals/stars/subscription/StarsSubscriptionModal.module.scss b/src/components/modals/stars/subscription/StarsSubscriptionModal.module.scss index a0dddd06f..cd61b7557 100644 --- a/src/components/modals/stars/subscription/StarsSubscriptionModal.module.scss +++ b/src/components/modals/stars/subscription/StarsSubscriptionModal.module.scss @@ -5,12 +5,14 @@ } .header { + position: relative; + display: flex; flex-direction: column; - align-items: center; gap: 0.25rem; + align-items: center; + margin-block: 1rem; - position: relative; } .title, .amount { @@ -18,35 +20,37 @@ } .title { - text-align: center; - text-wrap: balance; + margin-top: 1rem; + font-size: 1.5rem; font-weight: var(--font-weight-semibold); - margin-top: 1rem; line-height: 1.25; + text-align: center; + text-wrap: balance; } .amount { display: flex; align-items: center; - text-align: center; color: var(--color-text-secondary); + text-align: center; } .footer { - text-align: center; margin-block: 0.5rem; - color: var(--color-text-secondary); font-size: 0.875rem; + color: var(--color-text-secondary); + text-align: center; } .starsBackground { position: absolute; - height: 7rem; + z-index: -1; top: -0.75rem; left: 50%; transform: translateX(-50%); - z-index: -1; + + height: 7rem; } .avatarWrapper { @@ -55,11 +59,11 @@ .subscriptionStar { position: absolute; - bottom: 0; + z-index: 1; right: 0; + bottom: 0; font-size: 1.75rem; - z-index: 1; @include mixins.filter-outline(1px, var(--color-background)); } diff --git a/src/components/modals/stars/transaction/PaidMediaThumb.module.scss b/src/components/modals/stars/transaction/PaidMediaThumb.module.scss index f864e0ced..afd41a811 100644 --- a/src/components/modals/stars/transaction/PaidMediaThumb.module.scss +++ b/src/components/modals/stars/transaction/PaidMediaThumb.module.scss @@ -1,28 +1,28 @@ .root { + position: relative; + z-index: 2; + display: grid; grid-auto-columns: 0.5rem; grid-auto-rows: 0.5rem; - place-items: center; place-content: center; + place-items: center; height: 5rem; - position: relative; - - z-index: 2; } .preview { - height: 2.75rem; - width: 2.75rem; - grid-auto-columns: 0.25rem; grid-auto-rows: 0.25rem; + width: 2.75rem; + height: 2.75rem; } .count { + z-index: 1; + display: flex; align-items: center; - z-index: 1; font-size: 2rem; line-height: 1; @@ -31,16 +31,19 @@ .thumb { position: relative; - height: 5rem; - width: 5rem; - border-radius: 1rem; + overflow: hidden; + + width: 5rem; + height: 5rem; + border-radius: 1rem; + outline: 0.25rem solid var(--color-background); } .preview .thumb { - height: 2.5rem; width: 2.5rem; + height: 2.5rem; border-radius: 0.5rem; outline-width: 0.125rem; } @@ -51,28 +54,30 @@ .thumb:nth-child(1), .itemCount1 .count { - grid-row: 1; grid-column: 1; + grid-row: 1; } .thumb:nth-child(2), .itemCount2 .count { - grid-row: 2; grid-column: 2; + grid-row: 2; } .thumb:nth-child(3), .itemCount3 .count { - grid-row: 3; grid-column: 3; + grid-row: 3; } .blurry, .full { position: absolute; top: 0; left: 0; - height: 100%; + width: 100%; + height: 100%; + object-fit: cover; } diff --git a/src/components/modals/stars/transaction/StarsTransactionItem.module.scss b/src/components/modals/stars/transaction/StarsTransactionItem.module.scss index 0dd933428..902d3a829 100644 --- a/src/components/modals/stars/transaction/StarsTransactionItem.module.scss +++ b/src/components/modals/stars/transaction/StarsTransactionItem.module.scss @@ -1,11 +1,14 @@ @use '../../../../styles/mixins'; .root { + cursor: var(--custom-cursor, pointer); + display: flex; gap: 0.75rem; + padding: 0.25rem 0.75rem 0.25rem 0.25rem; border-radius: 0.5rem; - cursor: var(--custom-cursor, pointer); + transition: background-color 0.25s ease-out; &:hover { @@ -21,9 +24,9 @@ .stars { display: flex; - align-items: center; flex-shrink: 0; gap: 0.25rem; + align-items: center; } .amount { @@ -62,9 +65,9 @@ .subscriptionStar { position: absolute; + z-index: 1; right: 0; bottom: 0; - z-index: 1; @include mixins.filter-outline(1px, var(--color-background)); } @@ -72,13 +75,14 @@ .uniqueGiftBackground { position: absolute; top: 0; - left: 0; right: 0; + left: 0; + aspect-ratio: 1 / 1; border-radius: 0.25rem; } .giftSticker { - margin-inline: 0.25rem; margin-top: 0.25rem; + margin-inline: 0.25rem; } diff --git a/src/components/modals/stars/transaction/StarsTransactionModal.module.scss b/src/components/modals/stars/transaction/StarsTransactionModal.module.scss index 0f8e3813d..50152fe7e 100644 --- a/src/components/modals/stars/transaction/StarsTransactionModal.module.scss +++ b/src/components/modals/stars/transaction/StarsTransactionModal.module.scss @@ -19,8 +19,9 @@ .header { display: flex; flex-direction: column; - align-items: center; gap: 0.25rem; + align-items: center; + margin-block: 1rem; } @@ -31,6 +32,7 @@ .amount { display: flex; gap: 0.25rem; + font-size: 1rem; font-weight: var(--font-weight-medium); line-height: 1.325; @@ -41,20 +43,22 @@ } .title { - text-align: center; - text-wrap: balance; + margin-top: 1rem; + font-size: 1.5rem; font-weight: var(--font-weight-semibold); - margin-top: 1rem; line-height: 1.25; + text-align: center; + text-wrap: balance; } .tid { - font-family: var(--font-family-monospace); - font-size: 0.875rem; cursor: pointer; overflow: hidden; + + font-family: var(--font-family-monospace); + font-size: 0.875rem; white-space: nowrap; @include mixins.gradient-border-right(3rem, 1rem); @@ -65,12 +69,14 @@ } .refunded { + padding: 0.25em 0.5em; + border-radius: var(--border-radius-messages-small); + font-size: 0.8125rem; line-height: 1; - border-radius: var(--border-radius-messages-small); - padding: 0.25em 0.5em; - background-color: rgba(var(--color-text-green-rgb), 0.2); color: var(--color-success); + + background-color: rgba(var(--color-text-green-rgb), 0.2); } .totalStars { @@ -79,49 +85,52 @@ } .starIcon { - line-height: 1 !important; margin-inline-start: 0 !important; + line-height: 1 !important; } .footer { - text-align: center; margin-block: 0.5rem; - color: var(--color-text-secondary); font-size: 0.875rem; + color: var(--color-text-secondary); + text-align: center; } .starsBackground { position: absolute; - height: 7rem; + z-index: -1; top: -0.75rem; left: 50%; transform: translateX(-50%); - z-index: -1; + + height: 7rem; } .copyIcon { + pointer-events: none; + position: absolute; - right: 0.25rem; top: 50%; + right: 0.25rem; transform: translateY(-50%); margin-inline-start: 0.25rem; + color: var(--color-primary); - pointer-events: none; } .mediaPreview { - margin-block: 1.5rem 1rem; cursor: var(--custom-cursor, pointer); + margin-block: 1.5rem 1rem; } .subtitle { - text-align: center; margin-top: 1rem; + text-align: center; } .starGiftSticker { - height: 150px; - width: 150px; position: relative; + width: 150px; + height: 150px; } diff --git a/src/components/modals/suggestedStatus/SuggestedStatusModal.module.scss b/src/components/modals/suggestedStatus/SuggestedStatusModal.module.scss index 3da556918..7aa0321e5 100644 --- a/src/components/modals/suggestedStatus/SuggestedStatusModal.module.scss +++ b/src/components/modals/suggestedStatus/SuggestedStatusModal.module.scss @@ -1,8 +1,8 @@ .content { display: flex; flex-direction: column; - align-items: center; gap: 1rem; + align-items: center; } .topEmoji { @@ -10,8 +10,8 @@ } .description { - text-align: center; margin-bottom: 0; + text-align: center; } .title { diff --git a/src/components/modals/webApp/MinimizedWebAppModal.module.scss b/src/components/modals/webApp/MinimizedWebAppModal.module.scss index ba7d9b9b9..73e45afdc 100644 --- a/src/components/modals/webApp/MinimizedWebAppModal.module.scss +++ b/src/components/modals/webApp/MinimizedWebAppModal.module.scss @@ -1,15 +1,17 @@ .root { + display: flex; + flex-shrink: 0; + align-items: center; + height: 2.5rem; + padding: 0; + padding-inline: 0.5rem; + border-radius: var(--border-radius-default); + font-size: 0.875rem; font-weight: var(--font-weight-medium); - border-radius: var(--border-radius-default); background-color: transparent; - padding: 0; - padding-inline: 0.5rem; - display: flex; - align-items: center; - flex-shrink: 0; } .window-state-button, @@ -37,9 +39,11 @@ } .title { - white-space: nowrap; overflow: hidden; - text-overflow: ellipsis; - margin-left: 0.5rem; + margin-right: 0.5rem; + margin-left: 0.5rem; + + text-overflow: ellipsis; + white-space: nowrap; } diff --git a/src/components/modals/webApp/MoreAppsTabContent.module.scss b/src/components/modals/webApp/MoreAppsTabContent.module.scss index d6d1267d9..13fd061f4 100644 --- a/src/components/modals/webApp/MoreAppsTabContent.module.scss +++ b/src/components/modals/webApp/MoreAppsTabContent.module.scss @@ -1,14 +1,16 @@ @use "../../../styles/mixins"; .root { - height: 100%; - width: 100%; + z-index: 0; + + overflow-y: scroll; display: flex; flex-direction: column; - z-index: 0; - padding-inline: 1.25rem; + + width: 100%; + height: 100%; padding-top: 1.25rem; - overflow-y: scroll; + padding-inline: 1.25rem; @include mixins.adapt-padding-to-scrollbar(1rem); } @@ -18,32 +20,35 @@ } .section-title { + display: flex; + justify-content: space-between; + + padding: 0.5rem; + padding-bottom: 0.5rem; + padding-block: 0.25rem; + font-size: 1rem; font-weight: var(--font-weight-medium); - padding: 0.5rem; - padding-block: 0.25rem; - justify-content: space-between; - display: flex; - padding-bottom: 0.5rem; } .section-content { display: grid; - justify-content: center; - align-items: center; - gap: 0.125rem; grid-template-columns: repeat(auto-fit, minmax(4rem, 1fr)); + gap: 0.125rem; + align-items: center; + justify-content: center; + padding: 0.125rem; padding-bottom: 1.25em; } .showMoreLink { - color: var(--color-links); cursor: pointer; + color: var(--color-links); transition: opacity 0.2s ease-in; &:hover, &:active { - background-color: transparent !important; opacity: 0.85; + background-color: transparent !important; } } diff --git a/src/components/modals/webApp/WebAppGridItem.module.scss b/src/components/modals/webApp/WebAppGridItem.module.scss index 2f8f2d352..91daeecfd 100644 --- a/src/components/modals/webApp/WebAppGridItem.module.scss +++ b/src/components/modals/webApp/WebAppGridItem.module.scss @@ -1,10 +1,12 @@ .container { + cursor: var(--custom-cursor, pointer); + display: flex; flex-direction: column; align-items: center; + padding: 0.375rem; border-radius: 0.625rem; - cursor: var(--custom-cursor, pointer); &:hover { background-color: var(--color-background-secondary); @@ -12,12 +14,14 @@ } .user-count-badge { - font-family: var(--font-family-condensed); - font-weight: var(--font-weight-semibold) !important; - font-size: 0.5rem !important; - border-width: 1px !important; bottom: 0 !important; + padding-block: 0.1875rem !important; + border-width: 1px !important; + + font-family: var(--font-family-condensed); + font-size: 0.5rem !important; + font-weight: var(--font-weight-semibold) !important; background: rgba(0, 0, 0, 0.2) !important; backdrop-filter: blur(50px); @@ -28,12 +32,12 @@ } .name { - white-space: inherit !important; - max-width: 100% !important; width: 4rem !important; - font-size: 0.625rem !important; - + max-width: 100% !important; height: 1.625rem; + + font-size: 0.625rem !important; font-weight: var(--font-weight-medium); line-height: 0.75rem; + white-space: inherit !important; } diff --git a/src/components/modals/webApp/WebAppModal.module.scss b/src/components/modals/webApp/WebAppModal.module.scss index 4cfa68d3b..6d26ca6d5 100644 --- a/src/components/modals/webApp/WebAppModal.module.scss +++ b/src/components/modals/webApp/WebAppModal.module.scss @@ -8,43 +8,50 @@ --state-transition: 0.25s cubic-bezier(0.29, 0.81, 0.27, 0.99); :global { .modal-header { - color: var(--color-header-text); padding: 0.5rem; border-bottom: 1px solid var(--color-dividers); + color: var(--color-header-text); transition: var(--color-transition) background-color, var(--color-transition) color; } .modal-dialog { pointer-events: auto; - height: 75%; - justify-content: center; - border: none; - box-shadow: none; - margin: 0; + overflow: hidden; + justify-content: center; + + height: 75%; + margin: 0; + border: none; + + box-shadow: none; } .resizeHandle { position: absolute; - background: transparent; z-index: var(--z-resize-grip); + background: transparent; &.top, &.bottom { - left: 0; + cursor: ns-resize; + right: 0; + left: 0; + width: 100%; height: 0.5rem; - cursor: ns-resize; } &.left, &.right { + cursor: ew-resize; + top: 0; bottom: 0; + width: 0.5rem; height: 100%; - cursor: ew-resize; } &.top { @@ -72,27 +79,27 @@ } &.topLeft { + cursor: nwse-resize; top: 0; left: 0; - cursor: nwse-resize; } &.topRight { + cursor: nesw-resize; top: 0; right: 0; - cursor: nesw-resize; } &.bottomLeft { + cursor: nesw-resize; bottom: 0; left: 0; - cursor: nesw-resize; } &.bottomRight { - bottom: 0; - right: 0; cursor: nwse-resize; + right: 0; + bottom: 0; } } @@ -101,9 +108,10 @@ } .modal-content { + overflow: hidden; display: flex; flex-direction: column; - overflow: hidden; + padding: 0; border-bottom-right-radius: var(--border-radius-default); border-bottom-left-radius: var(--border-radius-default); @@ -113,10 +121,10 @@ @media (max-width: 600px) { .modal-dialog { - background-color: var(--color-background); - border-radius: 0; - height: 100%; max-width: 100% !important; + height: 100%; + border-radius: 0; + background-color: var(--color-background); } .modal-content { @@ -131,12 +139,13 @@ :global { .modal-dialog { width: 100%; + max-width: 26.25rem; height: 100%; max-height: min(42.5rem, 85vh); - max-width: 26.25rem; background-color: var(--color-web-app-browser); backdrop-filter: blur(1.5625rem); + box-shadow: var(--modal-shadow); /* stylelint-disable @stylistic/value-list-comma-newline-after */ /* stylelint-disable plugin/no-low-performance-animation-properties */ @@ -144,8 +153,6 @@ max-height var(--state-transition), max-width var(--state-transition), left var(--state-transition), top var(--state-transition), transform 0.2s ease, opacity 0.2s ease; - - box-shadow: var(--modal-shadow); } .modal-header { @@ -155,11 +162,12 @@ } .modal-content { - background-color: var(--color-background); - border-top-right-radius: var(--border-radius-default); - border-top-left-radius: var(--border-radius-default); - box-shadow: var(--modal-shadow); max-height: none; + border-top-left-radius: var(--border-radius-default); + border-top-right-radius: var(--border-radius-default); + + background-color: var(--color-background); + box-shadow: var(--modal-shadow); } @media (max-width: 600px) { @@ -170,9 +178,9 @@ } .close-icon { - opacity: 0.75; position: absolute; transform: rotate(-45deg); + opacity: 0.75; &, &::before, @@ -186,9 +194,9 @@ :global { .modal-dialog { cursor: grab !important; + min-width: 0; max-width: 300px; max-height: 2.5rem; - min-width: 0; } } } @@ -207,19 +215,19 @@ } .tabs { - display: flex; - align-items: center; - height: 100%; + scrollbar-color: rgba(0, 0, 0, 0); + scrollbar-width: none; overflow-x: auto; overflow-y: hidden; - white-space: nowrap; + display: flex; + align-items: center; - scrollbar-width: none; - scrollbar-color: rgba(0, 0, 0, 0); - - padding-left: 0.5rem; + height: 100%; padding-right: 0.5rem; + padding-left: 0.5rem; + + white-space: nowrap; @include mixins.gradient-border-horizontal(0.5rem, 0.5rem); @@ -233,42 +241,42 @@ } .tool-bar { - flex-grow: 1; display: flex; + flex-grow: 1; justify-content: flex-end; } .tab-button-wrapper { display: flex; - margin-left: -0.5rem; margin-right: -0.5rem; + margin-left: -0.5rem; } .tab-button { position: relative; z-index: 1; - transition: var(--color-transition) background-color, var(--color-transition) color; - background-color: var(--active-tab-background); - color: var(--color-header-text); - display: flex; align-items: center; justify-content: center; + height: 100%; padding: 0.5rem; - padding-left: 1rem; padding-right: 1rem; + padding-left: 1rem; + border-top-left-radius: var(--border-radius-default); + border-top-right-radius: var(--border-radius-default); font-size: 1rem; font-weight: var(--font-weight-medium); + color: var(--color-header-text); text-overflow: ellipsis; - border-top-right-radius: var(--border-radius-default); - border-top-left-radius: var(--border-radius-default); - + background-color: var(--active-tab-background); box-shadow: var(--modal-shadow); + transition: var(--color-transition) background-color, var(--color-transition) color; + &:hover, &:focus { --more-button-opacity: 1; @@ -286,16 +294,17 @@ .tab-right-mask { @include mixins.gradient-border-left(2rem); - opacity: 0; - transition: opacity 0.25s ease-in-out; - position: absolute; - width: 4rem; - height: 100%; right: 0; - background-color: var(--active-tab-background); + width: 4rem; + height: 100%; border-top-right-radius: var(--border-radius-default); + + opacity: 0; + background-color: var(--active-tab-background); + + transition: opacity 0.25s ease-in-out; } .tab-button-curve-path { @@ -308,11 +317,13 @@ position: relative; z-index: 2; - transition: var(--color-transition) background-color, var(--color-transition) color; display: flex; align-items: center; justify-content: center; + margin-top: auto; + + transition: var(--color-transition) background-color, var(--color-transition) color; } .tab-button-right-curve { @@ -333,31 +344,34 @@ } .web-app-tab-more-menu { - z-index: 1; position: absolute; + z-index: 1; } .more-button { - opacity: 0.75; color: var(--color-header-text) !important; + opacity: 0.75; transition: var(--color-transition) color; } .tab-more-button { - z-index: 2; - padding: 0 !important; - width: 1.5rem !important; - height: 1.5rem !important; - font-size: 0.75rem; - opacity: var(--more-button-opacity); - color: white !important; - transition: opacity 0.25s ease-in-out; - background-color: rgba(0, 0, 0, 0.45) !important; - position: absolute; + z-index: 2; top: 50%; left: 50%; transform: translate(-50%, -50%); + + width: 1.5rem !important; + height: 1.5rem !important; + padding: 0 !important; + + font-size: 0.75rem; + color: white !important; + + opacity: var(--more-button-opacity); + background-color: rgba(0, 0, 0, 0.45) !important; + + transition: opacity 0.25s ease-in-out; } .more-apps-button, @@ -376,19 +390,22 @@ } .tab-close-button { - transition: opacity 0.25s ease-in-out; - opacity: 0; position: absolute; right: 0.5rem; - color: var(--color-header-text) !important; width: 1.5rem !important; height: 1.5rem !important; + + color: var(--color-header-text) !important; + + opacity: 0; + + transition: opacity 0.25s ease-in-out; } .tab-close-icon { - opacity: 0.75; font-size: 1rem !important; + opacity: 0.75; } .state-icon, @@ -407,9 +424,21 @@ } .close-icon { - opacity: 0.75; position: absolute; transform: rotate(-45deg); + opacity: 0.75; + + &::before, + &::after { + content: ""; + position: absolute; + top: 0; + left: 0; + } + + &::before { + transform: rotate(90deg); + } &, &::before, @@ -417,22 +446,12 @@ width: 1.125rem; height: 0.125rem; border-radius: 0.125rem; + background-color: var(--color-header-text); + transition: var(--slide-transition) transform, var(--color-transition) background-color; } - &::before, - &::after { - position: absolute; - left: 0; - top: 0; - content: ""; - } - - &::before { - transform: rotate(90deg); - } - &.state-back { transform: rotate(180deg); @@ -447,8 +466,9 @@ } .loading-spinner { - position: absolute; pointer-events: none; + + position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); @@ -461,10 +481,10 @@ } .frame { + z-index: 1; width: 100%; height: 100%; border: 0; - z-index: 1; &.with-button { height: calc(100% - 3.5rem); @@ -473,14 +493,15 @@ .main-button { position: absolute; + z-index: 1; bottom: 0; + transform: translateY(100%); + border-radius: 0; - z-index: 1; - transform: translateY(100%); - transition-property: background-color, color, transform; - transition-duration: 0.25s; transition-timing-function: ease-in-out; + transition-duration: 0.25s; + transition-property: background-color, color, transform; &.visible { transform: translateY(0); diff --git a/src/components/modals/webApp/WebAppModalTabContent.module.scss b/src/components/modals/webApp/WebAppModalTabContent.module.scss index b0d3a28c1..02ff5147e 100644 --- a/src/components/modals/webApp/WebAppModalTabContent.module.scss +++ b/src/components/modals/webApp/WebAppModalTabContent.module.scss @@ -1,30 +1,35 @@ @use "../../../styles/mixins"; .root { - height: 100%; - width: 100%; position: relative; + z-index: 0; + display: flex; flex-direction: column; + + width: 100%; + height: 100%; padding: 0; - z-index: 0; } .multi-tab { position: relative; + z-index: 0; + display: flex; flex-direction: column; + padding: 0; - z-index: 0; } .loadingPlaceholder { - width: 4rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); + width: 4rem; + transition: opacity 0.25s ease-in-out; } @@ -47,19 +52,21 @@ } .defaultPlaceholderGrid { - width: 4.5rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.25rem; + + width: 4.5rem; margin: 0 auto; + animation: 2s linear -0.8s infinite fadeOpacityBreath; } .placeholderSquare { - width: 100%; aspect-ratio: 1; - background-color: black; + width: 100%; border-radius: 0.375rem; + background-color: black; } .hide { @@ -67,12 +74,15 @@ } .frame { - transition: opacity 0.25s ease-in-out; - opacity: 1; + z-index: 1; + width: 100%; height: 100%; border: 0; - z-index: 1; + + opacity: 1; + + transition: opacity 0.25s ease-in-out; &.with-button { height: calc(100% - 3.5rem); @@ -92,10 +102,14 @@ --color-transition: 0.15s; --transform-transition: 0.25s ease-in-out; - flex-grow: 1; - margin: 0.5rem; transform: translateY(100%); + + flex-grow: 1; + + margin: 0.5rem; + opacity: 0; + transition: background-color var(--color-transition), color var(--color-transition), @@ -126,16 +140,18 @@ } .buttons-container { + position: relative; + display: flex; justify-content: space-between; - position: relative; + + height: 0rem; + + transition-timing-function: ease-in-out; + transition-duration: 0.25s; /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */ transition-property: height; - transition-duration: 0.25s; - transition-timing-function: ease-in-out; - - height: 0rem; &.one-row { align-items: center; @@ -181,8 +197,8 @@ .secondary-button, .main-button { position: absolute; - left: 0rem; right: 0rem; + left: 0rem; } } @@ -210,16 +226,19 @@ .secondary-button, .main-button { transform: translateY(0); + + overflow: hidden; flex-grow: 0; + + width: 0; margin-inline: 0; padding-inline: 0; - width: 0; + white-space: nowrap; - overflow: hidden; &.visible { - margin-inline: 0.5rem; flex-grow: 1; + margin-inline: 0.5rem; } } } @@ -245,31 +264,34 @@ .closeIcon { --color-header-text: white; + position: relative; transform: rotate(-45deg); + &::before, + &::after { + content: ""; + position: absolute; + top: 0; + left: 0; + } + + &::before { + transform: rotate(90deg); + } + &, &::before, &::after { width: 0.875rem; height: 0.125rem; border-radius: 0.125rem; + background-color: var(--color-header-text); + transition: var(--slide-transition) transform, var(--color-transition) background-color; } - &::before, - &::after { - position: absolute; - left: 0; - top: 0; - content: ""; - } - - &::before { - transform: rotate(90deg); - } - &.state-back { transform: rotate(180deg); @@ -292,17 +314,20 @@ } .headerPanel { + pointer-events: none; + + position: absolute; + z-index: 100; + top: 0; + right: 0; + left: 0; + display: flex; flex-direction: row; - position: absolute; - top: 0; - left: 0; - right: 0; - z-index: 100; + justify-content: space-between; + padding: 1rem; padding-inline-end: calc(1rem + var(--scrollbar-width)); - justify-content: space-between; - pointer-events: none; } .icon { @@ -315,53 +340,58 @@ } .headerButton { - height: 1.75rem; + pointer-events: auto; + cursor: var(--custom-cursor, pointer); + + position: relative; + + overflow: hidden; + display: flex; + flex-shrink: 0; + align-items: center; + justify-content: center; + width: fit-content; + height: 1.75rem; + padding: 0.25rem; + padding-inline: 0.625rem; + border-radius: 1rem; + font-size: 0.875rem; font-weight: var(--font-weight-medium); - position: relative; - cursor: var(--custom-cursor, pointer); - flex-shrink: 0; - overflow: hidden; - - outline: none !important; - align-items: center; - display: flex; - justify-content: center; color: white; - border-radius: 1rem; + background-color: rgba(0, 0, 0, 0.2); backdrop-filter: blur(25px); - pointer-events: auto; + outline: none !important; &:hover { background-color: rgba(0, 0, 0, 0.1); } - - padding: 0.25rem; - padding-inline: 0.625rem; } .left { - border-bottom-right-radius: 0; border-top-right-radius: 0; + border-bottom-right-radius: 0; } .right { - border-bottom-left-radius: 0; border-top-left-radius: 0; + border-bottom-left-radius: 0; } .buttonCaptionContainer { + height: 100%; /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */ transition: width 0.25s ease-in-out; - height: 100%; } .backButtonCaption { + overflow: hidden; + width: fit-content; max-width: 20rem; - overflow: hidden; - white-space: nowrap; + text-overflow: ellipsis; + white-space: nowrap; } diff --git a/src/components/payment/CardInput.scss b/src/components/payment/CardInput.scss index c6237ab6a..3b6006a33 100644 --- a/src/components/payment/CardInput.scss +++ b/src/components/payment/CardInput.scss @@ -7,9 +7,9 @@ .right-addon { position: absolute; + z-index: 8; top: 0.625rem; right: 1rem; - z-index: 8; img { max-width: 2rem; diff --git a/src/components/payment/Checkout.module.scss b/src/components/payment/Checkout.module.scss index dd5e39fd6..172922266 100644 --- a/src/components/payment/Checkout.module.scss +++ b/src/components/payment/Checkout.module.scss @@ -10,13 +10,11 @@ } .checkout-picture { - margin: 0.25rem 0.75rem 0 0; - - min-width: 0; width: 100%; + min-width: 0; max-width: 8rem; height: auto; - + margin: 0.25rem 0.75rem 0 0; border-radius: 0.5rem; } @@ -30,11 +28,12 @@ } .checkout-description { + margin-bottom: 0.25rem; + font-size: 0.8125rem; line-height: 1.125rem; color: var(--color-text-secondary); overflow-wrap: anywhere; - margin-bottom: 0.25rem; } .price-info { @@ -42,12 +41,14 @@ } .price-info-item { - margin: 1rem 0.5rem; display: flex; flex-direction: row; align-content: space-between; - color: var(--color-text-secondary); + + margin: 1rem 0.5rem; + font-weight: var(--font-weight-medium); + color: var(--color-text-secondary); &-main { color: var(--color-text); @@ -62,22 +63,26 @@ .tipsList { display: flex; flex-wrap: wrap; - justify-content: space-between; gap: 0.5rem; + justify-content: space-between; } .tipsItem { - border-radius: 1.375rem; - padding: 0 0.75rem; - height: 2.5rem; - min-width: 5rem; - line-height: 2.5rem; - text-align: center; - background: var(--color-primary-opacity); - color: var(--color-primary); - transition: background-color 200ms, color 200ms; cursor: var(--custom-cursor, pointer); + + min-width: 5rem; + height: 2.5rem; + padding: 0 0.75rem; + border-radius: 1.375rem; + font-weight: var(--font-weight-medium); + line-height: 2.5rem; + color: var(--color-primary); + text-align: center; + + background: var(--color-primary-opacity); + + transition: background-color 200ms, color 200ms; &:hover, &:focus { @@ -95,18 +100,20 @@ } .invoice-info { - border-top: 0.0625rem var(--color-borders) solid; padding: 0.5rem; + border-top: 0.0625rem var(--color-borders) solid; } .provider { float: left; - background: no-repeat center; - background-size: 2rem; - border-radius: 1rem; + width: 1.5rem; height: 1.5rem; margin-inline-end: 1.125rem; + border-radius: 1rem; + + background: no-repeat center; + background-size: 2rem; } .provider.stripe { @@ -119,13 +126,14 @@ .checkout-info-item-info { &-title { - font-size: 1rem; - line-height: 1.4375rem; margin-bottom: 0; + + font-size: 1rem; font-weight: var(--font-weight-normal); - overflow-wrap: anywhere; + line-height: 1.4375rem; color: var(--color-text); text-transform: capitalize; + overflow-wrap: anywhere; } &-data { diff --git a/src/components/payment/ConfirmPayment.scss b/src/components/payment/ConfirmPayment.scss index 78198fb6d..a436aa386 100644 --- a/src/components/payment/ConfirmPayment.scss +++ b/src/components/payment/ConfirmPayment.scss @@ -1,9 +1,10 @@ .ConfirmPayment { - display: flex; - height: 100%; - border-bottom-left-radius: var(--border-radius-default-small); - border-bottom-right-radius: var(--border-radius-default-small); overflow: hidden; + display: flex; + + height: 100%; + border-bottom-right-radius: var(--border-radius-default-small); + border-bottom-left-radius: var(--border-radius-default-small); &__content { width: 100%; diff --git a/src/components/payment/PaymentInfo.scss b/src/components/payment/PaymentInfo.scss index 6ccfe154a..d05c49efc 100644 --- a/src/components/payment/PaymentInfo.scss +++ b/src/components/payment/PaymentInfo.scss @@ -2,8 +2,8 @@ padding: 0.5rem 1rem; h5 { - font-size: 1rem; margin: 0 0 1.25rem 0.5rem; + font-size: 1rem; } .inline-inputs { @@ -11,25 +11,25 @@ justify-content: space-between; .input-group { + display: flex; flex: 1 10rem; max-width: 48%; - display: flex; } } .description { - font-size: 0.875rem; - color: var(--color-text-secondary); margin-top: -0.75rem; margin-bottom: 1.25rem; + font-size: 0.875rem; + color: var(--color-text-secondary); } .checkbox { margin: -1.125rem 0 0 -0.375rem; .Checkbox { - padding-inline-start: 4.375rem; margin-block: 1rem; + padding-inline-start: 4.375rem; } } } diff --git a/src/components/payment/PaymentModal.scss b/src/components/payment/PaymentModal.scss index ecbdc7c82..a078bfac2 100644 --- a/src/components/payment/PaymentModal.scss +++ b/src/components/payment/PaymentModal.scss @@ -18,19 +18,22 @@ $modalHeaderAndFooterHeight: 8.375rem; .header { position: relative; - border-top-left-radius: var(--border-radius-modal); - border-top-right-radius: var(--border-radius-modal); + + display: flex; + flex-direction: row; + align-items: center; + width: 100%; padding: 0.5rem 1rem 0.25rem; - display: flex; - align-items: center; - flex-direction: row; + border-top-left-radius: var(--border-radius-modal); + border-top-right-radius: var(--border-radius-modal); + background: var(--color-background); h3 { + unicode-bidi: plaintext; margin-bottom: 0; margin-left: 1.5rem; - unicode-bidi: plaintext; text-align: initial; } } @@ -40,38 +43,43 @@ $modalHeaderAndFooterHeight: 8.375rem; } .empty-content { - height: 25rem; - max-height: 90%; display: flex; align-items: center; justify-content: center; + + height: 25rem; + max-height: 90%; } .receipt-content { - height: 25rem; overflow-y: auto; + height: 25rem; } .content { + position: relative; + overflow: auto; overflow-x: hidden; + width: 100%; height: 100%; - position: relative; } .footer { position: relative; bottom: 0; - border-bottom-left-radius: var(--border-radius-modal); - border-bottom-right-radius: var(--border-radius-modal); + width: 100%; padding: 0.75rem 1rem; + border-bottom-right-radius: var(--border-radius-modal); + border-bottom-left-radius: var(--border-radius-modal); + background: var(--color-background); button { - text-transform: none; font-weight: var(--font-weight-medium); + text-transform: none; } .button-text { @@ -84,8 +92,8 @@ $modalHeaderAndFooterHeight: 8.375rem; } .modal-content { - padding: 0; overflow: hidden; + padding: 0; } .ListItem-main-icon { diff --git a/src/components/payment/ReceiptModal.module.scss b/src/components/payment/ReceiptModal.module.scss index 69f350855..6b0843e34 100644 --- a/src/components/payment/ReceiptModal.module.scss +++ b/src/components/payment/ReceiptModal.module.scss @@ -11,17 +11,20 @@ } .header { + position: relative; + display: flex; flex-direction: column; - align-items: center; gap: 0.5rem; + align-items: center; + margin-bottom: 1rem; - position: relative; } .amount { display: flex; gap: 0.25rem; + font-size: 1.25rem; font-weight: var(--font-weight-medium); line-height: 1.325; @@ -32,9 +35,9 @@ } .tid { + cursor: pointer; font-family: var(--font-family-monospace); font-size: 0.875rem; - cursor: pointer; } .description { @@ -42,16 +45,17 @@ } .footer { - text-align: center; margin-block: 0.5rem; + text-align: center; } .starsBackground { position: absolute; - height: 8rem; top: -8.5rem; left: 50%; transform: translateX(-50%); + + height: 8rem; } .mediaShift { @@ -64,6 +68,6 @@ } .mediaPreview { - margin-bottom: 2rem; cursor: var(--custom-cursor, pointer); + margin-bottom: 2rem; } diff --git a/src/components/payment/Shipping.scss b/src/components/payment/Shipping.scss index 960ea5b01..44f92684e 100644 --- a/src/components/payment/Shipping.scss +++ b/src/components/payment/Shipping.scss @@ -3,9 +3,9 @@ form { p { - color: var(--color-text-secondary); - font-weight: var(--font-weight-medium); margin: 0.5rem 0 2rem; + font-weight: var(--font-weight-medium); + color: var(--color-text-secondary); } .Radio { diff --git a/src/components/payment/ShippingInfo.scss b/src/components/payment/ShippingInfo.scss index ffc67c863..0f8873e66 100644 --- a/src/components/payment/ShippingInfo.scss +++ b/src/components/payment/ShippingInfo.scss @@ -2,8 +2,8 @@ padding: 0.5rem 1rem; h5 { + margin: 1rem 0 1.25rem; font-size: 0.875rem; color: var(--color-text-secondary); - margin: 1rem 0 1.25rem; } } diff --git a/src/components/right/AddChatMembers.scss b/src/components/right/AddChatMembers.scss index b850573d1..d441827b9 100644 --- a/src/components/right/AddChatMembers.scss +++ b/src/components/right/AddChatMembers.scss @@ -1,10 +1,10 @@ .AddChatMembers { - height: 100%; - overflow: hidden; position: relative; + overflow: hidden; + height: 100%; &-inner { - height: 100%; overflow: hidden; + height: 100%; } } diff --git a/src/components/right/GifSearch.scss b/src/components/right/GifSearch.scss index 955396831..3b2883061 100644 --- a/src/components/right/GifSearch.scss +++ b/src/components/right/GifSearch.scss @@ -3,21 +3,21 @@ padding: 0.25rem; .gif-container { - height: 100%; overflow: auto; + height: 100%; &.grid { display: grid; - grid-template-columns: repeat(6, 1fr); + grid-auto-flow: dense; grid-auto-rows: 6.25rem; grid-gap: 0.25rem; - grid-auto-flow: dense; + grid-template-columns: repeat(6, 1fr); } } .helper-text { - color: var(--color-text-meta); margin-top: 2rem; + color: var(--color-text-meta); text-align: center; } } diff --git a/src/components/right/ManageTopic.module.scss b/src/components/right/ManageTopic.module.scss index 6c3d7c8e1..d07eeff52 100644 --- a/src/components/right/ManageTopic.module.scss +++ b/src/components/right/ManageTopic.module.scss @@ -1,30 +1,31 @@ @use '../../styles/mixins'; .root { + --topic-icon-size: 5rem; + position: relative; height: 100%; background-color: var(--color-background); - --topic-icon-size: 5rem; } .content { + overflow: auto; display: flex; flex-direction: column; height: 100%; - overflow: auto; } .section { display: flex; - justify-content: center; flex-direction: column; + justify-content: center; @include mixins.side-panel-section; } .general { - box-shadow: none; border-bottom: 0; + box-shadow: none; } .top { @@ -38,12 +39,14 @@ } .iconWrapper { - margin: 1.5rem 0; + --custom-emoji-size: var(--topic-icon-size); + align-self: center; width: var(--topic-icon-size); height: var(--topic-icon-size); - --custom-emoji-size: var(--topic-icon-size); + margin: 1.5rem 0; + font-size: calc(var(--topic-icon-size) - 2rem); } @@ -57,8 +60,8 @@ } .heading { - font-weight: var(--font-weight-medium); font-size: 0.9375rem; + font-weight: var(--font-weight-medium); color: var(--color-text-secondary); } diff --git a/src/components/right/PollAnswerResults.scss b/src/components/right/PollAnswerResults.scss index fca81564b..fc857239c 100644 --- a/src/components/right/PollAnswerResults.scss +++ b/src/components/right/PollAnswerResults.scss @@ -1,20 +1,24 @@ .PollAnswerResults { - border-bottom: 1px solid var(--color-borders); - padding: 0 0.5rem 0.625rem; display: flex; flex-direction: column-reverse; + padding: 0 0.5rem 0.625rem; + border-bottom: 1px solid var(--color-borders); .answer-head { + position: sticky; + z-index: 1; + top: 0; + display: flex; align-items: center; - font-size: 0.9375rem; - line-height: 1.3125rem; - font-weight: var(--font-weight-medium); - color: var(--color-text-secondary); + padding: 1rem 0.75rem 0.5rem 1rem; - position: sticky; - top: 0; - z-index: 1; + + font-size: 0.9375rem; + font-weight: var(--font-weight-medium); + line-height: 1.3125rem; + color: var(--color-text-secondary); + background: var(--color-background); @media (max-width: 600px) { @@ -26,23 +30,23 @@ margin-left: auto; &[dir="auto"] { - margin-left: 0; margin-right: auto; + margin-left: 0; } } .poll-voters { - padding: 0 0.75rem; position: relative; min-height: 3rem; - - @media (max-width: 600px) { - padding: 0 0.25rem; - } + padding: 0 0.75rem; .Spinner { --spinner-size: 1.25rem; } + + @media (max-width: 600px) { + padding: 0 0.25rem; + } } .chat-item-clickable { @@ -52,27 +56,27 @@ &[dir="rtl"] { .ChatInfo .Avatar.size-tiny { - margin-left: 1.75rem; margin-right: 0; + margin-left: 1.75rem; } } } .ShowMoreButton { - margin: 0.25rem 0 0 -0.5rem; width: calc(100% + 1rem); + margin: 0.25rem 0 0 -0.5rem; &[dir="rtl"] { .icon-down { - margin-left: 2rem; margin-right: 0; + margin-left: 2rem; } } } .icon-down { - vertical-align: middle; margin-right: 2rem; font-size: 1.5rem; + vertical-align: middle; } } diff --git a/src/components/right/PollResults.scss b/src/components/right/PollResults.scss index a9bb10b5d..12b9019e3 100644 --- a/src/components/right/PollResults.scss +++ b/src/components/right/PollResults.scss @@ -1,22 +1,26 @@ .PollResults { - height: 100%; + pointer-events: auto; + position: relative; + display: flex; flex-direction: column; - pointer-events: auto; + + height: 100%; > .Loading { position: absolute; top: 0; - left: 0; - bottom: 0; right: 0; + bottom: 0; + left: 0; + background: rgba(white, 0.75); } .poll-question { - padding: 0.75rem 1.5rem; flex-shrink: 0; + padding: 0.75rem 1.5rem; font-size: 1.25rem; @media (max-width: 600px) { @@ -25,8 +29,8 @@ } .poll-results-list { - border-top: 1px solid var(--color-borders); - flex-grow: 1; overflow: auto; + flex-grow: 1; + border-top: 1px solid var(--color-borders); } } diff --git a/src/components/right/Profile.scss b/src/components/right/Profile.scss index 12a00fd50..dd345ae23 100644 --- a/src/components/right/Profile.scss +++ b/src/components/right/Profile.scss @@ -1,14 +1,14 @@ @use '../../styles/mixins'; .Profile { - height: 100%; + overflow-x: hidden; + overflow-y: scroll; display: flex; flex-direction: column; - overflow-x: hidden; - overflow-y: scroll; - + height: 100%; border-top: 1px solid transparent; + transition: border-top-color 0.2s ease-in-out; &.scrolled { @@ -35,8 +35,8 @@ [dir="rtl"] { .Switcher { - margin-left: 0; margin-right: auto; + margin-left: 0; } } } @@ -55,23 +55,26 @@ .nothing-found-gifts { display: flex; + flex-direction: column; align-items: center; justify-content: center; - flex-direction: column; + padding-top: 5rem; .description { - color: var(--color-text-secondary); + unicode-bidi: plaintext; + + margin-block: 1rem; + font-size: 1rem; font-weight: var(--font-weight-medium); + color: var(--color-text-secondary); text-align: center; - margin-block: 1rem; - unicode-bidi: plaintext; } .Link { - color: var(--color-links); font-weight: var(--font-weight-medium); + color: var(--color-links); transition: opacity 0.15s ease-in; &:active, @@ -87,9 +90,9 @@ flex-direction: column-reverse; .TabList { - background: var(--color-background); - top: -1px; z-index: 1; + top: -1px; + background: var(--color-background); } .info .Transition { @@ -106,12 +109,13 @@ .content { &.empty-list { - height: 100%; - padding-top: 5rem; display: flex; align-items: flex-start; justify-content: center; + height: 100%; + padding-top: 5rem; + .Spinner { --spinner-size: 2.75rem; } @@ -123,8 +127,8 @@ &.previewMedia-list, &.gifts-list { display: grid; - grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; + grid-template-columns: repeat(3, 1fr); gap: 0.0625rem; } @@ -157,6 +161,7 @@ .media-loading { top: 0; left: 0; + display: flex; align-items: center; justify-content: center; @@ -190,11 +195,13 @@ .show-more-bots, .show-more-channels { + z-index: 1; + width: calc(100% - 1rem); margin: 0 auto; margin-top: -1.8125rem; - z-index: 1; border-radius: var(--border-radius-default-small); + box-shadow: -1rem 0 1rem 1rem var(--color-background), -1rem 0 1rem 0.3125rem var(--color-background); .icon { @@ -203,9 +210,9 @@ } .more-similar { - text-align: center; margin-top: 1rem; font-size: 0.8125rem; + text-align: center; } } } diff --git a/src/components/right/RightColumn.scss b/src/components/right/RightColumn.scss index 84e501180..6252074fa 100644 --- a/src/components/right/RightColumn.scss +++ b/src/components/right/RightColumn.scss @@ -1,14 +1,16 @@ #RightColumn { position: absolute; + z-index: var(--z-right-column); top: 0; right: 0; + transform: translate3d(var(--right-column-width), 0, 0); + width: var(--right-column-width); height: 100%; padding-right: env(safe-area-inset-right); - transform: translate3d(var(--right-column-width), 0, 0); - background: var(--color-background); border-left: 1px solid var(--color-borders); - z-index: var(--z-right-column); + + background: var(--color-background); transition: transform var(--layer-transition); @@ -17,19 +19,9 @@ transition: none !important; } - @media (max-width: 1275px) { - box-shadow: 0 0.25rem 0.5rem 0.125rem var(--color-default-shadow); - border-left: none; - } - - @media (max-width: 600px) { - width: 100vw; - transform: translate3d(110vw, 0, 0); - } - > .Transition { - height: calc(100% - var(--header-height)); overflow: hidden; + height: calc(100% - var(--header-height)); } .panel-content { @@ -42,8 +34,8 @@ } .Management .section > .ChatInfo { - padding: 0 1.5rem; margin: 1rem 0; + padding: 0 1.5rem; text-align: center; .Avatar { @@ -56,15 +48,15 @@ .title { display: flex; - justify-content: center; align-items: center; + justify-content: center; h3 { - font-weight: var(--font-weight-medium); font-size: 1.25rem; + font-weight: var(--font-weight-medium); line-height: 2rem; - white-space: pre-wrap; overflow-wrap: anywhere; + white-space: pre-wrap; } .emoji { @@ -79,22 +71,31 @@ color: #868e96; } } + + @media (max-width: 1275px) { + border-left: none; + box-shadow: 0 0.25rem 0.5rem 0.125rem var(--color-default-shadow); + } + + @media (max-width: 600px) { + transform: translate3d(110vw, 0, 0); + width: 100vw; + } } #RightColumn-wrapper { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - z-index: var(--z-right-column); - overflow: hidden; - visibility: hidden; pointer-events: none; - @media (max-width: 1275px) { - position: fixed; - } + position: absolute; + z-index: var(--z-right-column); + top: 0; + right: 0; + bottom: 0; + left: 0; + + overflow: hidden; + + visibility: hidden; &.is-hidden { display: none; @@ -102,13 +103,14 @@ .overlay-backdrop { position: absolute; + z-index: -1; top: 0; right: 0; bottom: 0; left: 0; - z-index: -1; - background: black; + opacity: 0; + background: black; @media (max-width: 600px) { transition: opacity var(--layer-transition); @@ -125,15 +127,20 @@ } #Main.right-column-open & { - @media (max-width: 600px) { - .overlay-backdrop { - opacity: var(--layer-blackout-opacity); - } - } #RightColumn { pointer-events: auto; transform: translate3d(0, 0, 0); } + + @media (max-width: 600px) { + .overlay-backdrop { + opacity: var(--layer-blackout-opacity); + } + } + } + + @media (max-width: 1275px) { + position: fixed; } } diff --git a/src/components/right/RightHeader.scss b/src/components/right/RightHeader.scss index 1684943c2..4416121e1 100644 --- a/src/components/right/RightHeader.scss +++ b/src/components/right/RightHeader.scss @@ -1,13 +1,11 @@ .RightHeader { - display: flex; - align-items: center; - height: var(--header-height); - padding: 0.5rem 0.8125rem; pointer-events: auto; - @media (max-width: 600px) { - padding: 0.5rem; - } + display: flex; + align-items: center; + + height: var(--header-height); + padding: 0.5rem 0.8125rem; .close-button { flex-shrink: 0; @@ -25,22 +23,22 @@ .title { margin-bottom: 0; + margin-left: 1.375rem; font-size: 1.25rem; font-weight: var(--font-weight-medium); - margin-left: 1.375rem; } .header { margin-left: 1.375rem; .title { - font-size: 1rem; margin-left: 0; + font-size: 1rem; } .subtitle { - color: var(--color-text-secondary); font-size: 0.875rem; + color: var(--color-text-secondary); } } @@ -74,4 +72,8 @@ padding-left: 5rem; } } + + @media (max-width: 600px) { + padding: 0.5rem; + } } diff --git a/src/components/right/StickerSearch.scss b/src/components/right/StickerSearch.scss index b83690f0d..157287e49 100644 --- a/src/components/right/StickerSearch.scss +++ b/src/components/right/StickerSearch.scss @@ -1,13 +1,14 @@ .StickerSearch { container: stickers / inline-size; + overflow-x: hidden; + overflow-y: scroll; + height: 100%; padding: 0 0.5rem; - overflow-y: scroll; - overflow-x: hidden; .helper-text { - padding: 1rem; margin-bottom: 0.125rem; + padding: 1rem; font-weight: var(--font-weight-medium); color: var(--color-text-secondary); } @@ -25,17 +26,19 @@ } .title { + overflow: hidden; + + margin: 0; + font-size: 1rem; line-height: 1.6875rem; - margin: 0; - overflow: hidden; - white-space: nowrap; text-overflow: ellipsis; + white-space: nowrap; } .count { - color: var(--color-text-secondary); margin: 0; + color: var(--color-text-secondary); } .Button { @@ -43,8 +46,8 @@ margin-left: 1rem; &.is-added { - background: var(--color-chat-hover); color: var(--color-text-secondary); + background: var(--color-chat-hover); &:hover, &:active { @@ -65,8 +68,8 @@ } .Button { - margin-left: 0; margin-right: 1rem; + margin-left: 0; } } } diff --git a/src/components/right/management/JoinRequest.scss b/src/components/right/management/JoinRequest.scss index 669ae4605..18d3b6fae 100644 --- a/src/components/right/management/JoinRequest.scss +++ b/src/components/right/management/JoinRequest.scss @@ -8,8 +8,8 @@ } &__top { - display: flex; cursor: var(--custom-cursor, pointer); + display: flex; padding: 0.5rem; border-radius: 0.5rem; @@ -19,23 +19,24 @@ } &__user { + overflow: hidden; display: flex; flex-grow: 1; min-width: 0; - overflow: hidden; } &__user-info { + overflow: hidden; display: flex; flex-direction: column; justify-content: center; - overflow: hidden; + margin-left: 1rem; } &__user-subtitle { - color: var(--color-text-secondary); overflow: hidden; + color: var(--color-text-secondary); text-overflow: ellipsis; white-space: nowrap; } @@ -47,17 +48,17 @@ } &__date { - color: var(--color-text-secondary); - font-size: 0.875rem; margin-left: 1rem; + font-size: 0.875rem; + color: var(--color-text-secondary); white-space: nowrap; } &__buttons { display: flex; + gap: 0.5rem; justify-content: space-evenly; margin-top: 1rem; - gap: 0.5rem; } &__button { diff --git a/src/components/right/management/Management.scss b/src/components/right/management/Management.scss index c8f2b6c97..bf3365bbd 100644 --- a/src/components/right/management/Management.scss +++ b/src/components/right/management/Management.scss @@ -5,14 +5,14 @@ height: 100%; & > .custom-scroll { - height: 100%; - overflow-y: scroll; overflow-x: hidden; + overflow-y: scroll; + height: 100%; } .personal-photo { - margin-right: 2rem; transform: scale(1.25); + margin-right: 2rem; } .section { @@ -75,11 +75,13 @@ } .section-heading { + position: relative; + + padding-inline-start: 1rem; + font-size: 1rem; font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); - padding-inline-start: 1rem; - position: relative; &[dir="auto"] { text-align: initial; @@ -88,9 +90,8 @@ .section-help { padding: 0 1rem; - - color: var(--color-text-secondary); line-height: 1.375rem; + color: var(--color-text-secondary); &[dir="auto"] { text-align: initial; @@ -98,9 +99,9 @@ } .section-info { - color: var(--color-text-secondary); - font-size: 0.875rem; padding: 0 1rem; + font-size: 0.875rem; + color: var(--color-text-secondary); } .invite-link { @@ -121,8 +122,8 @@ } .group-link { - color: var(--color-text); padding-left: 1rem; + color: var(--color-text); } .RangeSlider { @@ -134,29 +135,29 @@ } &__filter { - padding: 0 1rem 0.25rem 0.75rem; - margin-bottom: 0.625rem; - - @include mixins.side-panel-section; - + overflow-y: auto; display: flex; flex-flow: row wrap; flex-shrink: 0; - overflow-y: auto; max-height: 20rem; + margin-bottom: 0.625rem; + padding: 0 1rem 0.25rem 0.75rem; + + @include mixins.side-panel-section; .input-group { + flex-grow: 1; margin-bottom: 0.5rem; margin-left: 0.5rem; - flex-grow: 1; } .form-control { height: 2rem; + padding: 0; border: none; border-radius: 0; - padding: 0; + box-shadow: none; } } @@ -184,13 +185,16 @@ } .link-status-icon { - display: block; - aspect-ratio: 1; - border-radius: 50%; - padding: 0.5rem; position: static !important; - color: white !important; + + display: block; + + aspect-ratio: 1; margin-right: 1rem !important; + padding: 0.5rem; + border-radius: 50%; + + color: white !important; &-gray { background-color: #707579; @@ -216,8 +220,8 @@ .ManageInvite { .link-name { - padding: 0 1rem; margin-bottom: 1rem; + padding: 0 1rem; } .expire-limit { @@ -226,7 +230,6 @@ .usage-limit { margin-top: 1rem; - -moz-appearance: textfield; &::-webkit-outer-spin-button, &::-webkit-inner-spin-button { @@ -265,39 +268,45 @@ .ManageInvite, .ManageInvites { .hint { - font-size: 0.875rem; - margin-bottom: 0; margin-top: 0.5rem; + margin-bottom: 0; + font-size: 0.875rem; } } .DropdownList { - transition: 0.25s ease-in-out transform; - transform: translateY(calc(-100%)); position: absolute; - width: 100%; left: 0; + transform: translateY(calc(-100%)); + + width: 100%; padding: 0 0.5rem 0 3.5rem; + background: var(--color-background); + transition: 0.25s ease-in-out transform; + &--open { transform: translateY(0.025rem); } } .DropdownListTrap { - height: 0; width: 100%; + height: 0; &::before { - position: absolute; - top: 0; - left: 0; - right: 0; - height: calc(var(--before-shift-height) + 2.5rem); - background: var(--color-background); content: ""; + + position: absolute; z-index: 1; + top: 0; + right: 0; + left: 0; + + height: calc(var(--before-shift-height) + 2.5rem); + + background: var(--color-background); } } @@ -308,8 +317,8 @@ } .without-bottom-shadow { - box-shadow: none; padding-bottom: 0; + box-shadow: none; } .part { diff --git a/src/components/right/statistics/BoostStatistics.module.scss b/src/components/right/statistics/BoostStatistics.module.scss index d4aa7811d..c334e4857 100644 --- a/src/components/right/statistics/BoostStatistics.module.scss +++ b/src/components/right/statistics/BoostStatistics.module.scss @@ -1,15 +1,15 @@ @use '../../../styles/mixins'; .root { - overflow-y: scroll; overflow-x: hidden; + overflow-y: scroll; } .noResults { + padding: 0.75rem 0 0 0; + font-size: 0.9375rem; color: var(--color-text-secondary); text-align: center; - font-size: 0.9375rem; - padding: 0.75rem 0 0 0; } .section-header { @@ -30,13 +30,13 @@ .stats { margin-bottom: 0; - border: none; padding: 0.75rem 0 0 0; + border: none; } .down { - font-size: 1.5rem; margin-right: 0.5rem; + font-size: 1.5rem; } .loadMoreSpinner { @@ -45,9 +45,10 @@ .status { display: flex; - align-items: center; gap: 0.5rem; + align-items: center; justify-content: space-between; + width: 100%; } @@ -56,30 +57,32 @@ } .month { - color: var(--color-text-secondary); margin: 0; + color: var(--color-text-secondary); } .quantity { display: flex; - justify-content: space-between; align-items: center; + justify-content: space-between; } .floatingBadge { + position: relative; + z-index: 1; + display: flex; align-items: center; justify-content: center; + color: var(--color-links); - position: relative; - z-index: 1; } .floatingBadgeButtonColor { + margin-left: 0.5rem; padding: 0 0.5rem 0 0.375rem; border-radius: 1rem; background-color: var(--color-primary-opacity); - margin-left: 0.5rem; } .floatingBadgeWarning { @@ -92,8 +95,8 @@ } .floatingBadgeIcon { - font-size: 0.875rem; margin-right: 0.125rem; + font-size: 0.875rem; } .floatingBadgeValue { @@ -126,8 +129,8 @@ .copy { position: absolute; - right: 0.5rem; - top: 50%; - transform: translate(0, -50%); z-index: 1; + top: 50%; + right: 0.5rem; + transform: translate(0, -50%); } diff --git a/src/components/right/statistics/MonetizationStatistics.module.scss b/src/components/right/statistics/MonetizationStatistics.module.scss index 1fe279298..2dedfefdb 100644 --- a/src/components/right/statistics/MonetizationStatistics.module.scss +++ b/src/components/right/statistics/MonetizationStatistics.module.scss @@ -1,15 +1,14 @@ @use '../../../styles/mixins'; .root { - height: 100%; overflow-x: hidden; overflow-y: hidden; + height: 100%; } .graph { margin-bottom: 1rem; border-bottom: 0.0625rem solid var(--color-borders); - opacity: 1; transition: opacity 0.3s ease; @@ -19,8 +18,8 @@ } &.hidden { - opacity: 0; margin: 0; + opacity: 0; } } @@ -32,6 +31,7 @@ display: flex; flex-direction: column; gap: 0.5rem; + padding: 1rem 0.75rem; border-bottom: 0.0625rem solid var(--color-borders); } @@ -44,7 +44,9 @@ display: flex; flex-direction: column; align-items: center; + margin-bottom: 0.5rem; + line-height: 1.6875rem; } @@ -65,8 +67,8 @@ } .toncoinIcon { - font-size: 1.5rem; margin-inline: 0 0.5rem; + font-size: 1.5rem; color: var(--color-primary); } diff --git a/src/components/right/statistics/Statistics.module.scss b/src/components/right/statistics/Statistics.module.scss index dc9025d82..25031a78d 100644 --- a/src/components/right/statistics/Statistics.module.scss +++ b/src/components/right/statistics/Statistics.module.scss @@ -1,9 +1,10 @@ .root { - height: 100%; overflow-x: hidden; overflow-y: hidden; + height: 100%; border-top: 1px solid transparent; + transition: border-top-color 0.2s ease-in-out; :global(.lovely-chart--container) { @@ -39,9 +40,10 @@ &-title { padding-left: 0.75rem; + font-size: 16px; - color: var(--text-color); line-height: 30px; + color: var(--text-color); text-transform: lowercase; &:first-letter { @@ -57,7 +59,6 @@ .graph { margin-bottom: 1rem; border-bottom: 1px solid var(--color-borders); - opacity: 1; transition: opacity 0.3s ease; @@ -67,41 +68,41 @@ } &.hidden { - opacity: 0; margin: 0; + opacity: 0; } } @keyframes pie-slim-in { 0% { - clip-path: circle(80% at center calc(50% - 7.5px)); transform: rotate(-360deg); + clip-path: circle(80% at center calc(50% - 7.5px)); } 25% { - clip-path: circle(40% at center calc(50% - 7.5px)); transform: rotate(-360deg); + clip-path: circle(40% at center calc(50% - 7.5px)); } 75% { - clip-path: circle(40% at center calc(50% - 7.5px)); transform: rotate(0); + clip-path: circle(40% at center calc(50% - 7.5px)); } } @keyframes pie-slim-out { 0% { - clip-path: circle(40% at center calc(50% - 7.5px)); transform: rotate(360deg); + clip-path: circle(40% at center calc(50% - 7.5px)); } 50% { - clip-path: circle(40% at center calc(50% - 7.5px)); transform: rotate(0); + clip-path: circle(40% at center calc(50% - 7.5px)); } 75% { - clip-path: circle(80% at center calc(50% - 7.5px)); transform: rotate(0); + clip-path: circle(80% at center calc(50% - 7.5px)); } } diff --git a/src/components/right/statistics/StatisticsOverview.module.scss b/src/components/right/statistics/StatisticsOverview.module.scss index c0e8ea143..0d2f94798 100644 --- a/src/components/right/statistics/StatisticsOverview.module.scss +++ b/src/components/right/statistics/StatisticsOverview.module.scss @@ -1,22 +1,25 @@ .root { - padding: 1rem 1.5rem; margin-bottom: 1rem; + padding: 1rem 1.5rem; border-bottom: 0.0625rem solid var(--color-borders); } .header { - margin-bottom: 0.5rem; - font-weight: var(--font-weight-medium); display: flex; align-items: center; justify-content: space-between; + + margin-bottom: 0.5rem; + + font-weight: var(--font-weight-medium); } .title { margin-right: 2rem; + font-size: 1rem; - color: var(--text-color); line-height: 1.875rem; + color: var(--text-color); text-transform: lowercase; &:first-letter { @@ -43,14 +46,14 @@ } .tableValue { - font-weight: var(--font-weight-medium); font-size: 1.25rem; + font-weight: var(--font-weight-medium); } .tableSecondaryValue { + margin-inline-start: 0.25rem; font-size: 0.875rem; color: var(--color-text-secondary); - margin-inline-start: 0.25rem; } .value { diff --git a/src/components/right/statistics/StatisticsPublicForward.module.scss b/src/components/right/statistics/StatisticsPublicForward.module.scss index 0e346b70e..24f1d2bc8 100644 --- a/src/components/right/statistics/StatisticsPublicForward.module.scss +++ b/src/components/right/statistics/StatisticsPublicForward.module.scss @@ -1,10 +1,13 @@ .root { - position: relative; cursor: var(--custom-cursor, pointer); - padding: 0.5rem 0.75rem; + + position: relative; + display: flex; align-items: center; + padding: 0.5rem 0.75rem; + &:hover, &:active { background-color: var(--color-chat-hover); } @@ -20,6 +23,6 @@ } .views { - color: var(--color-text-meta); font-size: 0.8125rem; + color: var(--color-text-meta); } diff --git a/src/components/right/statistics/StatisticsRecentPost.module.scss b/src/components/right/statistics/StatisticsRecentPost.module.scss index d708e7a71..d1709bbb8 100644 --- a/src/components/right/statistics/StatisticsRecentPost.module.scss +++ b/src/components/right/statistics/StatisticsRecentPost.module.scss @@ -1,6 +1,6 @@ .root { - position: relative; cursor: var(--custom-cursor, pointer); + position: relative; padding: 0.5rem 0.75rem; &:hover, &:active { @@ -13,20 +13,24 @@ } .imageContainer { + position: absolute; + top: 0.5rem; + left: 0.5rem; + width: 2.5rem; height: 2.5rem; - position: absolute; - left: 0.5rem; - top: 0.5rem; &::before { content: ""; + position: absolute; + top: -0.25rem; + left: -0.25rem; + width: 2.75rem; height: 2.75rem; - left: -0.25rem; - top: -0.25rem; border-radius: 50%; + background: var(--color-borders-read-story); background-image: linear-gradient( @@ -38,26 +42,31 @@ &::after { content: ""; + position: absolute; + z-index: 0; + top: -0.125rem; + left: -0.125rem; + width: 2.5rem; height: 2.5rem; - left: -0.125rem; - top: -0.125rem; border-radius: 50%; - z-index: 0; + background: var(--color-background); } } .image { + position: absolute; + top: 0.5rem; + left: 0.5rem; + width: 2.5rem; height: 2.5rem; - position: absolute; - left: 0.5rem; - top: 0.5rem; - object-fit: cover; - border-radius: 0.25rem; margin-inline-end: 0.25rem; + border-radius: 0.25rem; + + object-fit: cover; &.round { border-radius: 0.625rem; @@ -68,34 +77,40 @@ } &:global(.Avatar) { - left: 0.375rem; top: 0.375rem; + left: 0.375rem; } &.withStoryCircle { + z-index: 1; top: 0; left: 0; + width: 2.25rem; height: 2.25rem; - z-index: 1; } } .summary { - flex: 1; overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; + flex: 1; + margin-right: 0.75rem; + text-overflow: ellipsis; + white-space: nowrap; + :global(.icon-play) { position: relative; + bottom: 0.0625rem; + display: inline-block; - font-size: 0.75rem; - color: #fff; + margin-inline-start: -1.25rem; margin-inline-end: 0.5rem; - bottom: 0.0625rem; + + font-size: 0.75rem; + color: #fff; } } @@ -121,9 +136,9 @@ } .metaIcon { + margin-inline-end: 0.125rem; font-size: 0.875rem; vertical-align: -0.125rem; - margin-inline-end: 0.125rem; } .date { diff --git a/src/components/story/MediaStory.module.scss b/src/components/story/MediaStory.module.scss index 143f0df52..1069a33ea 100644 --- a/src/components/story/MediaStory.module.scss +++ b/src/components/story/MediaStory.module.scss @@ -4,19 +4,21 @@ } .wrapper { + cursor: var(--custom-cursor, pointer); + overflow: hidden; // Aspect-ratio trick https://css-tricks.com/aspect-ratio-boxes/ height: 0; padding-bottom: 179%; - overflow: hidden; - cursor: var(--custom-cursor, pointer); } .media { position: absolute; - left: 0; top: 0; + left: 0; + width: 100%; height: 100%; + object-fit: cover; } @@ -28,9 +30,10 @@ .overlayIcon { position: absolute; + z-index: 1; + font-size: 0.75rem; line-height: 1; - z-index: 1; color: white; filter: drop-shadow(0 0 0.25rem black); @@ -46,13 +49,13 @@ left: 0.25rem; display: flex; - align-items: center; gap: 0.125rem; + align-items: center; } .duration { - bottom: 0.25rem; right: 0.25rem; + bottom: 0.25rem; } .contextMenu { diff --git a/src/components/story/StealthModeModal.module.scss b/src/components/story/StealthModeModal.module.scss index ec6f453dd..bb7e31109 100644 --- a/src/components/story/StealthModeModal.module.scss +++ b/src/components/story/StealthModeModal.module.scss @@ -1,8 +1,8 @@ .root { + position: relative; display: flex; flex-direction: column; align-items: center; - position: relative; } .closeButton { @@ -12,14 +12,16 @@ } .stealthIcon { - width: 5rem; - height: 5rem; - font-size: 3rem; - background-color: var(--color-primary); - border-radius: 50%; - display: grid; place-items: center; + + width: 5rem; + height: 5rem; + border-radius: 50%; + + font-size: 3rem; + + background-color: var(--color-primary); } .title { @@ -29,10 +31,10 @@ } .description { - font-size: 0.875rem; margin-top: 0.5rem; - text-align: center; + font-size: 0.875rem; color: var(--color-text-secondary); + text-align: center; } .listItem { @@ -40,8 +42,8 @@ } .icon { - color: var(--color-primary) !important; margin-right: 1rem !important; + color: var(--color-primary) !important; } .button { diff --git a/src/components/story/StoryFooter.module.scss b/src/components/story/StoryFooter.module.scss index 4f159721e..eb2bfd577 100644 --- a/src/components/story/StoryFooter.module.scss +++ b/src/components/story/StoryFooter.module.scss @@ -1,15 +1,18 @@ .root { position: absolute; + right: 0; bottom: 0; left: 0; - right: 0; + display: flex; align-items: center; - transition: opacity 350ms !important; - color: #fff; margin-bottom: env(safe-area-inset-bottom); + color: #fff; + + transition: opacity 350ms !important; + @media (max-width: 600px) { padding: 0 0.5rem 0.5rem; } @@ -18,8 +21,10 @@ .viewInfo { display: flex; align-items: center; + padding: 0.25rem 0.5rem; border-radius: var(--border-radius-default); + transition: background-color 200ms; } @@ -40,15 +45,15 @@ } .reactionCount { - margin-inline-start: 0.5rem; display: flex; gap: 0.125rem; align-items: center; + margin-inline-start: 0.5rem; } .reactionCountHeart { - color: var(--color-heart); font-size: 1.25rem; + color: var(--color-heart); } .footerItem { @@ -66,8 +71,8 @@ .views { display: flex; - align-items: center; gap: 0.25rem; + align-items: center; } .viewIcon { diff --git a/src/components/story/StoryProgress.module.scss b/src/components/story/StoryProgress.module.scss index dd359c585..f33b326c4 100644 --- a/src/components/story/StoryProgress.module.scss +++ b/src/components/story/StoryProgress.module.scss @@ -1,11 +1,15 @@ .root { --progress-duration: 6s; - flex: 1 1 auto; - background-color: rgba(255, 255, 255, 0.25); - border-radius: 0.125rem; - margin: 0 0.125rem; + position: relative; + overflow: hidden; + flex: 1 1 auto; + + margin: 0 0.125rem; + border-radius: 0.125rem; + + background-color: rgba(255, 255, 255, 0.25); } .viewed { @@ -18,14 +22,17 @@ .inner { position: absolute; - left: 0; top: 0; - width: 100%; - height: 100%; - background: var(--color-white); - border-radius: 0.125rem; + left: 0; transform-origin: 0 50%; transform: translateX(-100%); + + width: 100%; + height: 100%; + border-radius: 0.125rem; + + background: var(--color-white); + animation: progress var(--progress-duration) linear forwards; } diff --git a/src/components/story/StoryRibbon.module.scss b/src/components/story/StoryRibbon.module.scss index 70a96fe99..b08ddbfe3 100644 --- a/src/components/story/StoryRibbon.module.scss +++ b/src/components/story/StoryRibbon.module.scss @@ -1,16 +1,18 @@ .root { - display: flex; - justify-content: space-between; - column-gap: 0.625rem; - padding: 0.25rem 0.5rem 0.5rem 1rem; - overflow-x: auto; - white-space: nowrap; - max-height: 5.5rem; position: relative; z-index: var(--z-story-ribbon); - transition: opacity 0.2s ease-in-out; + overflow-x: auto; + display: flex; + column-gap: 0.625rem; + justify-content: space-between; + max-height: 5.5rem; + padding: 0.25rem 0.5rem 0.5rem 1rem; + + white-space: nowrap; + + transition: opacity 0.2s ease-in-out; animation: fadeIn 0.2s ease-in-out; } @@ -19,19 +21,23 @@ } .peer { - flex: 0 0 3.75rem; - width: 3.75rem; + cursor: var(--custom-cursor, pointer); + display: flex; + flex: 0 0 3.75rem; flex-direction: column; align-items: center; - text-align: center; - font-size: 0.75rem; - background: none; - border: none; - padding: 0; - cursor: var(--custom-cursor, pointer); - color: var(--color-text-secondary); + + width: 3.75rem; margin-inline: auto; + padding: 0; + border: none; + + font-size: 0.75rem; + color: var(--color-text-secondary); + text-align: center; + + background: none; &:focus { outline: none; @@ -43,12 +49,14 @@ } .name { - margin-top: 0.25rem; - overflow: hidden; - text-overflow: ellipsis; unicode-bidi: plaintext; - white-space: nowrap; + overflow: hidden; + max-width: 110%; + margin-top: 0.25rem; + + text-overflow: ellipsis; + white-space: nowrap; &_hasUnreadStory { color: var(--color-text); diff --git a/src/components/story/StorySettings.module.scss b/src/components/story/StorySettings.module.scss index 34ed1538e..d6c773f02 100644 --- a/src/components/story/StorySettings.module.scss +++ b/src/components/story/StorySettings.module.scss @@ -3,19 +3,21 @@ } .modal :global(.modal-content) { - padding: 0; + overflow: hidden; display: flex; flex-direction: column; - overflow: hidden; - color: var(--color-text); + height: min(38rem, 90vh); + padding: 0; + + color: var(--color-text); } .header { - padding: 1rem 1rem 0.75rem; display: flex; - align-items: center; flex-shrink: 0; + align-items: center; + padding: 1rem 1rem 0.75rem; } .closeButton { @@ -23,18 +25,20 @@ } .headerTitle { - margin-bottom: 0; - height: 100%; - line-height: 1; display: flex; align-items: center; + + height: 100%; + margin-bottom: 0; + + line-height: 1; } .content { - min-height: 0; - border-radius: 0 0 var(--border-radius-default) var(--border-radius-default); overflow: hidden; overflow-y: auto; + min-height: 0; + border-radius: 0 0 var(--border-radius-default) var(--border-radius-default); } .section { @@ -46,10 +50,10 @@ } .title { + padding: 0 0.75rem 0.75rem; font-size: 1rem; font-weight: var(--font-weight-medium); color: var(--color-text-secondary); - padding: 0 0.75rem 0.75rem; } .list { @@ -58,48 +62,51 @@ } .option { + position: relative; + + overflow: hidden; display: flex; align-items: center; - position: relative; - overflow: hidden; + margin-bottom: 0; padding: 0.4375rem 0 0.4375rem 3.5rem; border-radius: var(--border-radius-default); - @media (hover: hover) { - &:hover, - &:focus { - background-color: var(--color-chat-hover); - } - } - &::before, &::after { content: ""; - display: block; + position: absolute; - left: 1rem; top: 50%; + left: 1rem; + transform: translateY(-50%); + + display: block; + width: 1.25rem; height: 1.25rem; - transform: translateY(-50%); } &::before { border: 2px solid var(--color-borders-input); border-radius: 50%; - background-color: var(--color-background); + opacity: 1; + background-color: var(--color-background); + transition: border-color 0.1s ease, opacity 0.1s ease; } &::after { left: 1.3125rem; + width: 0.625rem; height: 0.625rem; border-radius: 50%; - background: var(--color-primary); + opacity: 0; + background: var(--color-primary); + transition: opacity 0.1s ease; } @@ -112,15 +119,24 @@ opacity: 1; } } + + @media (hover: hover) { + &:hover, + &:focus { + background-color: var(--color-chat-hover); + } + } } .input { position: absolute; + z-index: -1; + top: -1rem; + width: 1px; height: 1px; + opacity: 0; - top: -1rem; - z-index: -1; } .icon { @@ -128,13 +144,16 @@ flex: 0 0 2.625rem; align-items: center; justify-content: center; + width: 2.625rem; height: 2.625rem; - border-radius: 50%; - background: linear-gradient(180deg, var(--color-from) 0%, var(--color-to) 100%); - color: #fff; - font-size: 1.5rem; margin-inline-end: 1rem; + border-radius: 50%; + + font-size: 1.5rem; + color: #fff; + + background: linear-gradient(180deg, var(--color-from) 0%, var(--color-to) 100%); > :global(.icon-group-filled) { font-size: 1.25rem; @@ -142,16 +161,20 @@ } .action { - width: 100%; - color: #8774E1; cursor: var(--custom-cursor, pointer); - opacity: 0.8; - transition: opacity 200ms; overflow: hidden; + + width: 100%; + + color: #8774E1; text-overflow: ellipsis; white-space: nowrap; + opacity: 0.8; + + transition: opacity 200ms; + > :global(.icon) { font-size: 0.875rem; line-height: 1; @@ -167,26 +190,26 @@ } .optionContent { + overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; - overflow: hidden; } .footer { - background-color: #181818; - flex-grow: 1; display: flex; flex-direction: column; + flex-grow: 1; + background-color: #181818; } .info { - color: var(--color-text-secondary); - font-size: 0.875rem; padding: 0.5rem 1rem; + font-size: 0.875rem; + color: var(--color-text-secondary); } .submit { - padding: 1rem; margin-top: auto; + padding: 1rem; } diff --git a/src/components/story/StoryToggler.module.scss b/src/components/story/StoryToggler.module.scss index eb82ed778..be36de674 100644 --- a/src/components/story/StoryToggler.module.scss +++ b/src/components/story/StoryToggler.module.scss @@ -2,19 +2,23 @@ @value name from "./StoryRibbon.module.scss"; .root { + cursor: var(--custom-cursor, pointer); + position: absolute; top: 50%; right: 0.25rem; transform: translateY(-50%); - padding: 0; - margin: 0; - border: none; - background: none; - outline: none !important; - cursor: var(--custom-cursor, pointer); + display: flex; flex-direction: row-reverse; + margin: 0; + padding: 0; + border: none; + + background: none; + outline: none !important; + &[dir="rtl"] { right: auto; left: 0.125rem; @@ -25,8 +29,8 @@ z-index: 1; &:not(:first-child):before { - mask-image: linear-gradient(90deg, #fff 75%, transparent 0); mask-composite: exclude; + mask-image: linear-gradient(90deg, #fff 75%, transparent 0); } &:global(.animating) { @@ -43,17 +47,18 @@ } .ghost { - position: absolute; - transform-origin: top left; --transform-transition: transform 250ms ease; --opacity-transition: opacity 250ms ease; + + position: absolute; + transform-origin: top left; transition: var(--transform-transition), var(--opacity-transition); } .ghostAnimateName { :global(.name) { - transition: var(--opacity-transition); opacity: 0; + transition: var(--opacity-transition); } } diff --git a/src/components/story/StoryViewModal.module.scss b/src/components/story/StoryViewModal.module.scss index 57a3f311e..379328c0a 100644 --- a/src/components/story/StoryViewModal.module.scss +++ b/src/components/story/StoryViewModal.module.scss @@ -1,9 +1,8 @@ .views-list { display: flex; flex-direction: column; - padding-bottom: 0 !important; - height: min(35rem, 80vh); + padding-bottom: 0 !important; } .views-list-loading { @@ -16,15 +15,17 @@ } .centeredInfo { - width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); + + width: 100%; } .view-reaction { --custom-emoji-size: 1.5rem; + margin-inline-start: 0.25rem; } @@ -34,10 +35,10 @@ } .content { - min-height: 17rem; - overflow-y: scroll; position: relative; + overflow-y: scroll; flex-grow: 1; + min-height: 17rem; } .top-button { @@ -68,9 +69,9 @@ } .icon-sort { + margin-inline-end: 0.25rem; font-size: 1.25rem; color: #FFFFFF; - margin-inline-end: 0.25rem; } .icon-down { @@ -83,8 +84,8 @@ } .bottom-info { - font-size: 0.875rem; margin: 0.25rem 0 0.5rem; + font-size: 0.875rem; } .scrolled { @@ -92,8 +93,8 @@ } .footer { - border-top: 0.0625rem solid var(--color-borders); padding-block: 0.25rem; + border-top: 0.0625rem solid var(--color-borders); } .closeButton { diff --git a/src/components/story/StoryViewer.module.scss b/src/components/story/StoryViewer.module.scss index 75b24269e..603074b3a 100644 --- a/src/components/story/StoryViewer.module.scss +++ b/src/components/story/StoryViewer.module.scss @@ -4,17 +4,17 @@ --color-story-meta: rgb(242, 242, 242); position: fixed; + z-index: var(--z-story-viewer); top: 0; - left: 0; right: 0; bottom: 0; - z-index: var(--z-story-viewer); + left: 0; transform-origin: 50% 50%; // Potential perf improvement &:not(:global(.shown)) { - display: block !important; transform: scale(0); + display: block !important; } &:global(.opacity-transition) { @@ -35,9 +35,9 @@ .fullSize, .backdrop, .captionBackdrop { position: absolute; top: 0; - left: 0; right: 0; bottom: 0; + left: 0; } .captionBackdrop { @@ -45,8 +45,8 @@ } .backdrop { - background-color: rgba(0, 0, 0, 0.9); z-index: 0; + background-color: rgba(0, 0, 0, 0.9); @media (max-width: 600px) { background: rgba(0, 0, 0, 1); @@ -56,17 +56,16 @@ .backdropNonInteractive { position: absolute; top: 50%; - left: 0; right: 0; - + left: 0; transform: translateY(-50%); } .close { position: absolute; - right: 1rem; - top: 1rem; z-index: 3; + top: 1rem; + right: 1rem; @media (max-width: 600px) { display: none; @@ -75,14 +74,16 @@ .wrapper { position: absolute; + z-index: 2; top: 0; left: 50%; - width: 100vw; - height: 100%; - overflow: hidden; transform: translateX(-50%); + + overflow: hidden; + + width: 100vw; max-width: calc(73.5rem * var(--story-viewer-scale)); - z-index: 2; + height: 100%; @media (max-width: 600px) { max-width: 100%; @@ -100,13 +101,16 @@ &::before { pointer-events: none; content: ""; + position: absolute; - left: 0; + z-index: 1; top: 0; right: 0; + left: 0; + height: 4.5rem; + background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); - z-index: 1; } .content { @@ -120,8 +124,8 @@ .caption, .captionGradient, .captionBackdrop { - transition: opacity 250ms ease-in-out; opacity: 0; + transition: opacity 250ms ease-in-out; } .media:not(.mediaPreview) { opacity: 0 !important; @@ -131,8 +135,8 @@ } .content { - opacity: 1 !important; visibility: visible; + opacity: 1 !important; } .contentInner { @@ -148,6 +152,7 @@ position: absolute; top: 50%; left: 50%; + transform-origin: 0 50%; transform: translate3d( calc(var(--slide-x, -50%) - var(--slide-translate-x, 0px)), @@ -155,7 +160,6 @@ 0 ) scale(var(--slide-translate-scale, 1)); - transform-origin: 0 50%; border-radius: var(--border-radius-default-small); @@ -176,9 +180,9 @@ } .mobileSlide { + transform: translateY(var(--slide-translate-y, 0px)); width: 100%; height: 100%; - transform: translateY(var(--slide-translate-y, 0px)); } .slidePreview { @@ -186,8 +190,8 @@ transition: opacity 200ms ease-in-out; &.slideAnimationToActive::before { - transition: opacity 350ms ease-in-out !important; opacity: 0; + transition: opacity 350ms ease-in-out !important; } .root:global(.not-open) &, @@ -197,20 +201,22 @@ } .activeSlide { - height: calc(var(--slide-media-height) + 3.5rem); z-index: 1; + height: calc(var(--slide-media-height) + 3.5rem); &::before { pointer-events: none; content: ""; + position: absolute; - left: 0; + z-index: 3; top: 0; right: 0; bottom: 3.5rem; - background: rgba(0, 0, 0, 0.5); + left: 0; + opacity: 0; - z-index: 3; + background: rgba(0, 0, 0, 0.5); } .content { @@ -221,99 +227,114 @@ .slideInner { position: absolute; - left: 0; top: 0; + left: 0; + width: 100%; height: 100%; } .mediaWrapper { position: absolute; - left: 0; top: 0; - width: 100%; - height: 100%; - background: #000; - border-radius: var(--border-radius-default-small); + left: 0; + overflow: hidden; - @media (max-width: 600px) { - width: calc(100% - 1rem) !important; - height: auto !important; - margin: 0.5rem; - bottom: calc(3.5rem + env(safe-area-inset-bottom)); - } + width: 100%; + height: 100%; + border-radius: var(--border-radius-default-small); + + background: #000; :global(body.ghost-animating) & { visibility: hidden; } + + @media (max-width: 600px) { + bottom: calc(3.5rem + env(safe-area-inset-bottom)); + width: calc(100% - 1rem) !important; + height: auto !important; + margin: 0.5rem; + } } .media { position: absolute; - left: 0; top: 0; + left: 0; - object-fit: cover; width: inherit; height: inherit; border-radius: var(--border-radius-default-small); + object-fit: cover; + transition: opacity 300ms; + :global(body.ghost-animating) .activeSlide & { + visibility: hidden; + } + @media (max-width: 600px) { bottom: 0; width: 100%; height: 100%; } - - :global(body.ghost-animating) .activeSlide & { - visibility: hidden; - } } .content { pointer-events: none; + position: absolute; - left: 0; + z-index: 1; top: 0; right: 0; + left: 0; + height: 100%; + background: rgba(0, 0, 0, 0.5); + transition: opacity 250ms ease-in-out; - z-index: 1; } .contentInner { position: absolute; + z-index: 2; top: 50%; left: 50%; transform: translate(-50%, -50%); - z-index: 2; - text-align: center; + display: flex; flex-direction: column; align-items: center; + max-width: 90%; + + text-align: center; } .name { + overflow: hidden; + + max-width: 100%; margin-top: 0.25rem; - color: var(--color-white); + font-size: 1rem; font-weight: var(--font-weight-medium); - max-width: 100%; - overflow: hidden; + color: var(--color-white); text-overflow: ellipsis; white-space: nowrap; } .forward { position: absolute; + z-index: 2; right: 0.75rem; bottom: 4.25rem; + opacity: 0.5; - z-index: 2; transition: opacity 300ms; @@ -329,55 +350,60 @@ // Shared styles for the header that are also used in ghost animation @mixin story-header { - position: absolute; - width: 100%; content: ""; - left: 0; + + position: absolute; + z-index: 1; top: 0; right: 0; + left: 0; + + width: 100%; height: 5rem; - background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)); - z-index: 1; border-radius: var(--border-radius-default-small) var(--border-radius-default-small) 0 0; + + background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)); } .storyHeader { @include story-header; - @media (max-width: 600px) { - width: auto; - left: 0.5rem; - top: 0.5rem; - right: 0.5rem; - } - :global(body.ghost-animating) & { background: none; } + + @media (max-width: 600px) { + top: 0.5rem; + right: 0.5rem; + left: 0.5rem; + width: auto; + } } .storyIndicators { position: absolute; + z-index: 2; + top: 0.5rem; + left: 0; + + display: flex; + width: 100%; height: 0.125rem; padding: 0 0.375rem; - z-index: 2; - - display: flex; - top: 0.5rem; - left: 0; } .sender { position: absolute; z-index: 2; + top: 1.25rem; right: 0.5rem; left: 1rem; - top: 1.25rem; - display: flex; - color: var(--color-white); + display: flex; align-items: center; + + color: var(--color-white); } .senderInfoTransition { @@ -390,49 +416,59 @@ } .senderMeta { + overflow: hidden; display: flex; flex-direction: column; + margin-left: 0.75rem; + line-height: 1.25rem; - overflow: hidden; } .senderName { + cursor: var(--custom-cursor, pointer); + + overflow: hidden; + + min-width: 0; + font-size: 1rem; font-weight: var(--font-weight-medium); - overflow: hidden; text-overflow: ellipsis; - min-width: 0; white-space: nowrap; - cursor: var(--custom-cursor, pointer); } .storyMetaRow { + overflow: hidden; display: flex; align-items: center; - overflow: hidden; } .storyMeta { - font-size: 0.875rem; - white-space: nowrap; overflow: hidden; - text-overflow: ellipsis; + + font-size: 0.875rem; color: var(--color-story-meta); + text-overflow: ellipsis; + white-space: nowrap; & + & { margin-left: 0.375rem; &::before { content: ""; - width: 0.25rem; - height: 0.25rem; - border-radius: 50%; - background-color: var(--color-white); - display: inline-block; - margin-inline-end: 0.375rem; + position: relative; top: -0.125rem; + + display: inline-block; + + width: 0.25rem; + height: 0.25rem; + margin-inline-end: 0.375rem; + border-radius: 50%; + + background-color: var(--color-white); } } } @@ -446,9 +482,9 @@ } .actions { - margin-inline-start: auto; display: flex; align-items: center; + margin-inline-start: auto; :global(.Button) { color: white; @@ -466,17 +502,21 @@ } .visibilityButton { - min-width: 1.5rem; - height: 1.5rem; - border-radius: 1.5rem; + cursor: var(--custom-cursor, pointer); + display: inline-flex; align-items: center; justify-content: center; - background: linear-gradient(180deg, var(--color-from) 0%, var(--color-to) 100%); - color: #fff; - font-size: 0.75rem; - cursor: var(--custom-cursor, pointer); + + min-width: 1.5rem; + height: 1.5rem; margin: 0 0.375rem; + border-radius: 1.5rem; + + font-size: 0.75rem; + color: #fff; + + background: linear-gradient(180deg, var(--color-from) 0%, var(--color-to) 100%); > :global(.icon + .icon) { margin-left: 0.125rem; @@ -500,10 +540,10 @@ } .buttonMenu > :global(.Button.translucent) { - color: var(--color-white); - opacity: 0.5; width: 2.25rem; height: 2.25rem; + color: var(--color-white); + opacity: 0.5; &:hover { opacity: 1; @@ -511,54 +551,68 @@ } .captionGradient { + pointer-events: none; + position: absolute; + right: 0; bottom: 3.5rem; left: 0; - right: 0; - height: 7rem; + overflow: hidden; - background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 100%); + + height: 7rem; border-radius: 0 0 var(--border-radius-default-small) var(--border-radius-default-small); - pointer-events: none; + + background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 100%); } .caption { + pointer-events: none; + position: absolute; - left: 0; - width: 100%; top: 4rem; bottom: calc(4.25rem + env(safe-area-inset-bottom)); + left: 0; + + overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; + + width: 100%; border-radius: 0 0 var(--border-radius-default-small) var(--border-radius-default-small); - overflow: hidden; - pointer-events: none; } .captionInner { + scrollbar-gutter: stable; + position: relative; - overflow-wrap: anywhere; - white-space: pre-wrap; - line-height: 1.25rem; - text-align: initial; + unicode-bidi: plaintext; - padding: 2rem 1rem 0; overflow-x: hidden; overflow-y: scroll; - scrollbar-gutter: stable; + + padding: 2rem 1rem 0; + + line-height: 1.25rem; + text-align: initial; + overflow-wrap: anywhere; + white-space: pre-wrap; @include mixins.adapt-padding-to-scrollbar(2rem); } .captionContent { - width: 100%; - color: var(--color-white); - font-size: var(--message-text-size, 1rem); + pointer-events: all; + display: flex; flex-direction: column; + + width: 100%; min-height: 0; - pointer-events: all; + + font-size: var(--message-text-size, 1rem); + color: var(--color-white); } .captionText :global(.custom-emoji) { @@ -567,6 +621,7 @@ .hasOverflow { --_overflow-shift: 5.75rem; + transform: translateY(calc(100% - var(--_overflow-shift))); } @@ -590,22 +645,25 @@ .captionInner { overflow-y: hidden; - mask-image: linear-gradient(to top, black 0%, black 0%), linear-gradient(to left, black 75%, transparent 100%); - mask-position: 100% 100%, 100% calc(var(--_overflow-shift) - 1.25rem); - mask-size: 100% 100%, calc(var(--expand-button-width, 0%) + 4rem) 1.25em; - mask-repeat: no-repeat; -webkit-mask-composite: xor; mask-composite: exclude; + + mask-image: linear-gradient(to top, black 0%, black 0%), linear-gradient(to left, black 75%, transparent 100%); + mask-position: 100% 100%, 100% calc(var(--_overflow-shift) - 1.25rem); + mask-repeat: no-repeat; + mask-size: 100% 100%, calc(var(--expand-button-width, 0%) + 4rem) 1.25em; } } .captionShowMore { - position: absolute; - bottom: -0.25rem; - right: 0.5rem; - color: var(--color-white); - font-weight: var(--font-weight-medium); cursor: var(--custom-cursor, pointer); + + position: absolute; + right: 0.5rem; + bottom: -0.25rem; + + font-weight: var(--font-weight-medium); + color: var(--color-white); } .composer { @@ -614,19 +672,21 @@ --color-composer-button: #707478; position: absolute; - height: 3rem; + z-index: 3; bottom: 0; left: 0; + + height: 3rem; margin-bottom: 0; - z-index: 3; + transition: transform var(--layer-transition), opacity 0.15s ease; &:global(.Composer) { --base-height: 3rem; @media (max-width: 600px) { - padding: 0 0.5rem 0.5rem; margin-bottom: env(safe-area-inset-bottom); + padding: 0 0.5rem 0.5rem; } } @@ -667,16 +727,19 @@ } .navigate { + cursor: var(--custom-cursor, pointer); + position: absolute; top: 0; bottom: 0; + width: 50%; - background: none; - padding: 0; margin: 0; + padding: 0; border: none; + + background: none; outline: none !important; - cursor: var(--custom-cursor, pointer); } .prev { @@ -688,17 +751,20 @@ } .modal :global(.modal-content) { - padding: 0.5rem !important; max-height: min(35rem, 80vh); + padding: 0.5rem !important; } .thumbnail { position: absolute; top: 0; left: 0; + + display: block; + width: 100%; height: 100%; - display: block; + object-fit: cover; @media (max-width: 600px) { @@ -709,10 +775,13 @@ .ghost { position: absolute; z-index: 1; + overflow: hidden; - transition: transform 200ms ease; + border-radius: var(--border-radius-default-small); + transition: transform 200ms ease; + &:before { @include story-header; } @@ -721,24 +790,30 @@ .ghost2 { position: absolute; z-index: 1; + overflow: hidden; + border-radius: 50%; + opacity: 0; + transition: transform 200ms ease, opacity 200ms ease; } .ghostImage { + -webkit-user-select: none; + user-select: none; + width: 100%; height: 100%; - user-select: none; - -webkit-user-select: none; + object-fit: cover; } .forwardHeader { display: flex; - align-items: center; gap: 0.125rem; + align-items: center; &.clickable { cursor: var(--custom-cursor, pointer); @@ -750,26 +825,26 @@ } .headerTitle { - white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + white-space: nowrap; } .forwardInfo { --accent-color: var(--color-white); --accent-background-color: rgba(0, 0, 0, 0.5); + z-index: 1; width: fit-content; max-width: 100%; margin-bottom: 0.5rem; - z-index: 1; } .fromPeer { - display: flex; - align-items: center; - gap: 0.25rem; cursor: var(--custom-cursor, pointer); + display: flex; + gap: 0.25rem; + align-items: center; &:hover { text-decoration: underline; diff --git a/src/components/story/mediaArea/MediaArea.module.scss b/src/components/story/mediaArea/MediaArea.module.scss index 17ba9b2d2..9244bbfe2 100644 --- a/src/components/story/mediaArea/MediaArea.module.scss +++ b/src/components/story/mediaArea/MediaArea.module.scss @@ -1,29 +1,32 @@ .overlay { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - width: auto; - height: auto; - aspect-ratio: 9 / 16; pointer-events: none; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + + aspect-ratio: 9 / 16; + width: auto; + height: auto; + @media (max-width: 600px) { + top: 50%; right: auto; left: 50%; - top: 50%; + transform: translate(-50%, -50%); + width: var(--media-width, 100%); height: var(--media-height, 100%); - transform: translate(-50%, -50%); } } .mediaArea { - position: absolute; - transform-origin: top left; pointer-events: all; cursor: var(--custom-cursor, pointer); + position: absolute; + transform-origin: top left; } .preview .mediaArea { @@ -37,14 +40,19 @@ .shiny::before { --color-shine: rgb(255, 255, 255, 0.5); + content: ""; + position: absolute; top: 0; display: block; + width: 100%; height: 100%; + background: linear-gradient(to right, transparent 0%, var(--color-shine) 50%, transparent 100%); + animation: wave 1s cubic-bezier(0.4, 0, 0.6, 1) forwards; @keyframes wave { @@ -59,40 +67,44 @@ .light { --background-color: white; + color: black; } .dark { --background-color: black; + color: white; } .reactionBackground { + cursor: var(--custom-cursor, pointer); + width: 100%; height: 100%; - background-color: var(--background-color); border-radius: 50%; + + background-color: var(--background-color); filter: drop-shadow(0 0.125rem 0.25rem var(--color-default-shadow)); - cursor: var(--custom-cursor, pointer); &::before, &::after { - position: absolute; content: ""; - background-color: var(--background-color); + position: absolute; border-radius: 50%; + background-color: var(--background-color); } &::before { - bottom: 5%; right: 5%; + bottom: 5%; width: 30%; height: 30%; } &::after { - bottom: 0; right: -5%; + bottom: 0; width: 10%; height: 10%; } @@ -119,6 +131,7 @@ top: 50%; left: 50%; transform: translate(-50%, -50%); + transition: transform 200ms ease-out; &.withCount { @@ -131,6 +144,7 @@ bottom: 8%; left: 50%; transform: translateX(-50%); + font-weight: var(--font-weight-medium); } @@ -140,21 +154,23 @@ } .weatherInner { - width: auto !important; - height: auto !important; - display: flex; + gap: 0.2em; align-items: center; justify-content: center; - gap: 0.2em; - white-space: nowrap; + + width: auto !important; + height: auto !important; padding: 0 0.2em; - background-color: var(--custom-background-color); border-radius: 0.25em; + + white-space: nowrap; + + background-color: var(--custom-background-color); } .temperature { + margin: 0; font-family: var(--font-family-condensed); font-weight: var(--font-weight-semibold); - margin: 0; } diff --git a/src/components/story/privacy/CloseFriends.module.scss b/src/components/story/privacy/CloseFriends.module.scss index 340f4e9a7..cb54beb8d 100644 --- a/src/components/story/privacy/CloseFriends.module.scss +++ b/src/components/story/privacy/CloseFriends.module.scss @@ -1,11 +1,14 @@ .buttonHolder { - position: absolute; - height: 6rem; - width: 6rem; - bottom: 0; - right: 0; - overflow: hidden; pointer-events: none; + + position: absolute; + right: 0; + bottom: 0; + + overflow: hidden; + + width: 6rem; + height: 6rem; } .active { diff --git a/src/components/ui/AvatarEditable.scss b/src/components/ui/AvatarEditable.scss index cfe9d11e1..b0c03d32b 100644 --- a/src/components/ui/AvatarEditable.scss +++ b/src/components/ui/AvatarEditable.scss @@ -2,22 +2,28 @@ .AvatarEditable { label { - margin-left: auto; - margin-right: auto; - width: 7.5rem; - height: 7.5rem; - margin-bottom: 2rem; + cursor: var(--custom-cursor, pointer); + + position: relative; + + overflow: hidden; display: flex !important; align-items: center; justify-content: center; - background-color: var(--color-primary); + + width: 7.5rem; + height: 7.5rem; + margin-right: auto; + margin-bottom: 2rem; + margin-left: auto; border-radius: 50%; - color: white; + font-size: 3rem; - cursor: var(--custom-cursor, pointer); - position: relative; - overflow: hidden; + color: white; + + background-color: var(--color-primary); outline: none !important; + transition: border-radius 200ms; input { @@ -28,14 +34,15 @@ position: absolute; top: 0; left: 0; + width: 100%; height: 100%; } .icon { + z-index: var(--z-register-add-avatar); transform: scale(1); transition: transform 0.15s linear; - z-index: var(--z-register-add-avatar); } // @optimization The weirdest workaround for screen animation lag @@ -62,12 +69,16 @@ &::after { content: ""; - display: block; + position: absolute; - left: 0; top: 0; + left: 0; + + display: block; + width: 100%; height: 100%; + background-color: rgba(black, 0.4); } } @@ -75,11 +86,11 @@ &.disabled { pointer-events: none; - .icon { + &::after { display: none; } - &::after { + .icon { display: none; } } diff --git a/src/components/ui/Badge.module.scss b/src/components/ui/Badge.module.scss index 91af7da49..35ea8150f 100644 --- a/src/components/ui/Badge.module.scss +++ b/src/components/ui/Badge.module.scss @@ -1,18 +1,20 @@ .root { + flex-shrink: 0; + min-width: 1.5rem; height: 1.5rem; - border-radius: 0.75rem; padding: 0 0.4375rem; + border-radius: 0.75rem; + font-size: 0.875rem; - line-height: 1.5625rem; font-weight: var(--font-weight-medium); + line-height: 1.5625rem; text-align: center; - flex-shrink: 0; } .default { - background: var(--color-gray); color: var(--color-white); + background: var(--color-gray); } .alternate { diff --git a/src/components/ui/Button.scss b/src/components/ui/Button.scss index 0bd1e1535..b31f993a6 100644 --- a/src/components/ui/Button.scss +++ b/src/components/ui/Button.scss @@ -25,28 +25,35 @@ } .Button { - outline: none !important; + + --premium-gradient: linear-gradient(88.39deg, #6C93FF -2.56%, #976FFF 51.27%, #DF69D1 107.39%); + + cursor: var(--custom-cursor, pointer); + + position: relative; + + overflow: hidden; display: flex; + flex-shrink: 0; align-items: center; justify-content: center; + width: 100%; height: 3.5rem; + padding: 0.625rem; border: 0; border-radius: var(--border-radius-default); - background-color: transparent; - background-size: cover; - padding: 0.625rem; - color: white; + line-height: 1.2; - cursor: var(--custom-cursor, pointer); - flex-shrink: 0; - position: relative; - overflow: hidden; - transition: background-color 0.15s, color 0.15s; + color: white; text-decoration: none !important; text-transform: uppercase; - --premium-gradient: linear-gradient(88.39deg, #6C93FF -2.56%, #976FFF 51.27%, #DF69D1 107.39%); + background-color: transparent; + background-size: cover; + outline: none !important; + + transition: background-color 0.15s, color 0.15s; // @optimization &:active, @@ -72,10 +79,11 @@ } &.primary { - background-color: var(--color-primary); - color: var(--color-white); --ripple-color: rgba(0, 0, 0, 0.08); + color: var(--color-white); + background-color: var(--color-primary); + @include active-styles() { background-color: var(--color-primary-shade); } @@ -86,13 +94,14 @@ } &.secondary { - background-color: var(--color-background); - color: rgba(var(--color-text-secondary-rgb), 0.75); --ripple-color: rgba(0, 0, 0, 0.08); + color: rgba(var(--color-text-secondary-rgb), 0.75); + background-color: var(--color-background); + @include active-styles() { - background-color: var(--color-primary); color: white; + background-color: var(--color-primary); } @include no-ripple-styles() { @@ -101,10 +110,11 @@ } &.gray { - background-color: var(--color-background); - color: var(--color-text-secondary); --ripple-color: rgba(0, 0, 0, 0.08); + color: var(--color-text-secondary); + background-color: var(--color-background); + @include active-styles() { color: var(--color-primary); } @@ -115,13 +125,14 @@ } &.danger { - background-color: var(--color-background); - color: var(--color-error); --ripple-color: rgba(var(--color-error-rgb), 0.16); + color: var(--color-error); + background-color: var(--color-background); + @include active-styles() { - background-color: var(--color-error); color: var(--color-white); + background-color: var(--color-error); } @include no-ripple-styles() { @@ -146,14 +157,14 @@ } &.secondary { - background-color: transparent; color: var(--color-text-secondary); + background-color: transparent; } &.danger { @include active-styles() { - background-color: rgba(var(--color-error-rgb), 0.08); color: var(--color-error); + background-color: rgba(var(--color-error-rgb), 0.08); } @include no-ripple-styles() { @@ -176,8 +187,9 @@ &.translucent { --ripple-color: var(--color-interactive-element-hover); - background-color: transparent; + color: var(--color-text-secondary); + background-color: transparent; @include active-styles() { background-color: var(--color-interactive-element-hover); @@ -194,12 +206,13 @@ &.translucent-white { --ripple-color: rgba(255, 255, 255, 0.08); - background-color: transparent; + color: rgba(255, 255, 255, 0.5); + background-color: transparent; @include active-styles() { - background-color: rgba(255, 255, 255, 0.08); color: white; + background-color: rgba(255, 255, 255, 0.08); } @include no-ripple-styles() { @@ -209,8 +222,9 @@ &.translucent-black { --ripple-color: rgba(0, 0, 0, 0.08); - background-color: transparent; + color: rgba(0, 0, 0, 0.8); + background-color: transparent; @include active-styles() { background-color: rgba(0, 0, 0, 0.08); @@ -223,13 +237,14 @@ &.translucent-bordered { --ripple-color: rgba(0, 0, 0, 0.08); - background-color: transparent; - color: var(--accent-color); + border: 1px solid var(--accent-color); + color: var(--accent-color); + background-color: transparent; @include active-styles() { - background-color: var(--accent-color); color: var(--color-white); + background-color: var(--accent-color); } @include no-ripple-styles() { @@ -239,8 +254,9 @@ &.adaptive { --ripple-color: var(--accent-background-active-color); - background-color: var(--accent-background-color); + color: var(--accent-color); + background-color: var(--accent-background-color); @include active-styles() { background-color: var(--accent-background-active-color); @@ -252,13 +268,14 @@ } &.dark { - background-color: rgba(0, 0, 0, 0.75); - color: white; --ripple-color: rgba(255, 255, 255, 0.08); + color: white; + background-color: rgba(0, 0, 0, 0.75); + @include active-styles() { - background-color: rgba(0, 0, 0, 0.85); color: white; + background-color: rgba(0, 0, 0, 0.85); } @include no-ripple-styles() { @@ -267,10 +284,11 @@ } &.green { - background-color: var(--color-green); - color: var(--color-white); --ripple-color: rgba(0, 0, 0, 0.08); + color: var(--color-white); + background-color: var(--color-green); + @include active-styles() { background-color: var(--color-green-darker); } @@ -281,10 +299,11 @@ } &.stars { - background-color: #FFB727; - color: var(--color-white); --ripple-color: rgba(0, 0, 0, 0.08); + color: var(--color-white); + background-color: #FFB727; + .theme-dark & { background-color: #CF8920; } @@ -308,26 +327,26 @@ &.pill { height: 2.5rem; - border-radius: 1.25rem; padding: 0.3125rem 1rem; + border-radius: 1.25rem; } &.with-icon { - padding-left: 0.75rem; padding-right: 1.25rem; + padding-left: 0.75rem; .icon { - font-size: 1.5rem; margin-right: 0.5rem; + font-size: 1.5rem; } &[dir="rtl"] { - padding-left: 1.25rem; padding-right: 0.75rem; + padding-left: 1.25rem; .icon { - margin-left: 0.5rem; margin-right: 0; + margin-left: 0.5rem; } } } @@ -345,6 +364,7 @@ height: 2.25rem; padding: 0.4375rem; border-radius: var(--border-radius-default-small); + font-size: 0.875rem; font-weight: var(--font-weight-medium); @@ -360,8 +380,8 @@ &.pill { height: 1.875rem; - border-radius: 1rem; padding: 0.3125rem 1rem; + border-radius: 1rem; font-size: 1rem; } } @@ -376,13 +396,13 @@ } &.fluid { - padding-left: 1.75rem; - padding-right: 1.75rem; width: auto; + padding-right: 1.75rem; + padding-left: 1.75rem; &.tiny { - padding-left: 1.375rem; padding-right: 1.375rem; + padding-left: 1.375rem; } &.pill { @@ -395,23 +415,24 @@ } &.pill, &.badge { - border-radius: 1.75rem; - padding-left: 1.75rem; padding-right: 1.75rem; + padding-left: 1.75rem; + border-radius: 1.75rem; text-transform: none; } &.loading { - position: relative; pointer-events: none; + position: relative; .Spinner { - position: absolute; - right: 0.875rem; - top: 50%; - transform: translateY(-50%); --spinner-size: 1.8125rem; + + position: absolute; + top: 50%; + right: 0.875rem; + transform: translateY(-50%); } } @@ -421,13 +442,17 @@ &.shiny::before { content: ""; + position: absolute; top: 0; display: block; + width: 100%; height: 100%; + background: linear-gradient(to right, transparent 0%, var(--color-skeleton-foreground) 50%, transparent 100%); + animation: wave 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; @keyframes wave { diff --git a/src/components/ui/Checkbox.scss b/src/components/ui/Checkbox.scss index a7a9bf291..46c4d5f92 100644 --- a/src/components/ui/Checkbox.scss +++ b/src/components/ui/Checkbox.scss @@ -1,19 +1,21 @@ .Checkbox { + cursor: var(--custom-cursor, pointer); + position: relative; - min-height: 3rem; display: flex; align-items: center; - padding-inline-start: 4rem; - text-align: left; - cursor: var(--custom-cursor, pointer); + min-height: 3rem; margin-bottom: 0; + padding-inline-start: 4rem; + + text-align: left; &:hover, &:focus-visible { - background-color: var(--color-chat-hover); border-radius: var(--border-radius-default); + background-color: var(--color-chat-hover); } &.disabled { @@ -39,8 +41,8 @@ .Checkbox-main { &::before, &::after { - left: auto; right: 1.1875rem; + left: auto; } } } @@ -52,12 +54,15 @@ } .Spinner { - position: absolute; - left: 0.375rem; - top: 0.125rem; - opacity: 0; - animation: fade-in 0.2s ease forwards; --spinner-size: 1.25rem; + + position: absolute; + top: 0.125rem; + left: 0.375rem; + + opacity: 0; + + animation: fade-in 0.2s ease forwards; } } @@ -68,12 +73,12 @@ } &::after { - background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgPHBvbHlnb24gcG9pbnRzPSIwIDAgMjQgMCAyNCAyNCAwIDI0Ii8+CiAgICA8cGF0aCBmaWxsPSIjZTUzOTM1IiBmaWxsLXJ1bGU9Im5vbnplcm8iIGQ9Ik0xOCwzIEMxOS42NTY4NTQyLDMgMjEsNC4zNDMxNDU3NSAyMSw2IEwyMSwxOCBDMjEsMTkuNjU2ODU0MiAxOS42NTY4NTQyLDIxIDE4LDIxIEw2LDIxIEM0LjM0MzE0NTc1LDIxIDMsMTkuNjU2ODU0MiAzLDE4IEwzLDYgQzMsNC4zNDMxNDU3NSA0LjM0MzE0NTc1LDMgNiwzIEwxOCwzIFogTTE2LDExIEw4LDExIEM3LjQ0NzcxNTI1LDExIDcsMTEuNDQ3NzE1MyA3LDEyIEM3LDEyLjU1MjI4NDcgNy40NDc3MTUyNSwxMyA4LDEzIEwxNiwxMyBDMTYuNTUyMjg0NywxMyAxNywxMi41NTIyODQ3IDE3LDEyIEMxNywxMS40NDc3MTUzIDE2LjU1MjI4NDcsMTEgMTYsMTEgWiIvPgogIDwvZz4KPC9zdmc+Cg==); opacity: 1; + background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgPHBvbHlnb24gcG9pbnRzPSIwIDAgMjQgMCAyNCAyNCAwIDI0Ii8+CiAgICA8cGF0aCBmaWxsPSIjZTUzOTM1IiBmaWxsLXJ1bGU9Im5vbnplcm8iIGQ9Ik0xOCwzIEMxOS42NTY4NTQyLDMgMjEsNC4zNDMxNDU3NSAyMSw2IEwyMSwxOCBDMjEsMTkuNjU2ODU0MiAxOS42NTY4NTQyLDIxIDE4LDIxIEw2LDIxIEM0LjM0MzE0NTc1LDIxIDMsMTkuNjU2ODU0MiAzLDE4IEwzLDYgQzMsNC4zNDMxNDU3NSA0LjM0MzE0NTc1LDMgNiwzIEwxOCwzIFogTTE2LDExIEw4LDExIEM3LjQ0NzcxNTI1LDExIDcsMTEuNDQ3NzE1MyA3LDEyIEM3LDEyLjU1MjI4NDcgNy40NDc3MTUyNSwxMyA4LDEzIEwxNiwxMyBDMTYuNTUyMjg0NywxMyAxNywxMi41NTIyODQ3IDE3LDEyIEMxNywxMS40NDc3MTUzIDE2LjU1MjI4NDcsMTEgMTYsMTEgWiIvPgogIDwvZz4KPC9zdmc+Cg==); + background-position: -0.125rem -0.125rem; // Compensate for svg having incorrect size background-size: 1.5rem; - background-position: -0.125rem -0.125rem; } } } @@ -88,20 +93,23 @@ display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; - align-items: center; flex-grow: 1; + align-items: center; &::before, &::after { + pointer-events: none; content: ""; - display: block; + position: absolute; + top: 50%; + left: 1.125rem; // 1 + ((1.5 - 1.25) / 2) + transform: translateY(-50%); + + display: block; + width: 1.25rem; height: 1.25rem; - left: 1.125rem; // 1 + ((1.5 - 1.25) / 2) - top: 50%; - transform: translateY(-50%); - pointer-events: none; } &::before { @@ -112,46 +120,50 @@ } &::after { + opacity: 0; /* stylelint-disable-next-line scss/operator-no-unspaced */ background: center no-repeat url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEzLjkuOEw1LjggOC45IDIuMSA1LjJjLS40LS40LTEuMS0uNC0xLjYgMC0uNC40LS40IDEuMSAwIDEuNkw1IDExLjJjLjQuNCAxLjEuNCAxLjYgMGw4LjktOC45Yy40LS40LjQtMS4xIDAtMS42LS41LS40LTEuMi0uNC0xLjYuMXoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0ibm9uemVybyIvPjwvc3ZnPg==); background-size: 0.875rem; - opacity: 0; transition: opacity 0.1s ease; } .label { - overflow-wrap: anywhere; unicode-bidi: plaintext; - text-align: left; line-height: 1.25rem; + text-align: left; + overflow-wrap: anywhere; } .right-icon { grid-column: 2; grid-row: span 2; - margin-left: auto; - margin-right: 0.5rem; - color: var(--color-text-secondary); - font-size: 1.25rem; align-self: center; + + margin-right: 0.5rem; + margin-left: auto; + + font-size: 1.25rem; + color: var(--color-text-secondary); } .subLabel { + unicode-bidi: plaintext; grid-column: 1; grid-row: 2; + + margin-top: 0.25rem; + font-size: 0.875rem; line-height: 1rem; color: var(--color-text-secondary); - unicode-bidi: plaintext; - margin-top: 0.25rem; } } &.withSubLabel { &:hover, &:focus-visible { - background-color: var(--color-chat-hover); border-radius: var(--border-radius-default); + background-color: var(--color-chat-hover); } .Checkbox-main { @@ -164,17 +176,20 @@ &::after { pointer-events: none; content: ""; - display: block; + position: absolute; left: 1.125rem; + + display: block; + width: 1.125rem; height: 1.125rem; } .label { display: flex; - align-items: center; column-gap: 0.6875rem; + align-items: center; } } @@ -192,8 +207,8 @@ &[dir="rtl"] { &.loading { .Spinner { - left: auto; right: 0.375rem; + left: auto; } } @@ -205,35 +220,36 @@ .Checkbox-main { &::before, &::after { - left: auto; right: 1rem; + left: auto; } } } &.nested { display: flex; - justify-content: space-between; - align-items: center; gap: 0.3125rem; + align-items: center; + justify-content: space-between; + margin-block: 0; padding: 0 0 0 4.1875rem; &:hover, &:focus-visible { - background-color: var(--color-chat-hover); border-radius: var(--border-radius-default); + background-color: var(--color-chat-hover); } } &.withNestedList { - background-color: var(--color-background); margin: 0; + background-color: var(--color-background); &:hover, &:focus-visible { - background-color: var(--color-chat-hover); border-radius: var(--border-radius-default); + background-color: var(--color-chat-hover); } } @@ -253,14 +269,14 @@ } &.avatar { - padding-inline-start: 3.5rem; margin-inline-start: 3.125rem; + padding-inline-start: 3.5rem; } .button { - color: var(--color-text); display: flex; gap: 0.1875rem; + color: var(--color-text); } .group-icon { @@ -274,16 +290,16 @@ } &.onlyInput { - min-height: auto; position: relative; + min-height: auto; padding-inline-start: 0.8125rem; .Checkbox-main { &::before, &::after { - left: 0; - right: 0; top: 0; + right: 0; + left: 0; } } } diff --git a/src/components/ui/CropModal.scss b/src/components/ui/CropModal.scss index cc455ed4e..ca30be331 100644 --- a/src/components/ui/CropModal.scss +++ b/src/components/ui/CropModal.scss @@ -1,7 +1,7 @@ @mixin thumb-styles() { - background: var(--color-primary); cursor: var(--custom-cursor, pointer); transform: scale(1); + background: var(--color-primary); transition: transform 0.25s ease-in-out; &:hover { @@ -11,11 +11,12 @@ .CropModal { .modal-dialog { + position: relative; + width: calc(100% - 2rem); max-width: 35rem; height: calc(100% - 1rem); max-height: 35rem; - position: relative; } .modal-content, @@ -25,15 +26,15 @@ .confirm-button { position: absolute; - bottom: 1rem; right: 1rem; + bottom: 1rem; box-shadow: 0 1px 2px var(--color-default-shadow); } #avatar-crop { + position: relative; max-width: 25rem; margin: 0 auto; - position: relative; &::before { content: ""; diff --git a/src/components/ui/Draggable.module.scss b/src/components/ui/Draggable.module.scss index 51e9881af..aa8d8f0ab 100644 --- a/src/components/ui/Draggable.module.scss +++ b/src/components/ui/Draggable.module.scss @@ -1,7 +1,7 @@ .container { position: absolute; - width: 100%; z-index: 1; + width: 100%; &:has(:global(.ListItem-context-menu)) { z-index: 2; @@ -17,36 +17,39 @@ } .knob { + cursor: grab !important; + position: absolute; top: 50%; transform: translateY(-50%); - width: 2rem; - height: 2rem; display: grid; place-items: center; - color: var(--color-text-secondary); + width: 2rem; + height: 2rem; + font-size: 1.25rem; line-height: 1.75; + color: var(--color-text-secondary); text-align: center; - opacity: 0; - transition: opacity 150ms; - cursor: grab !important; + opacity: 0; + + transition: opacity 150ms; .container:hover & { opacity: 1; } .isDragging & { - opacity: 1; cursor: grabbing !important; + opacity: 1; } @media (pointer: coarse) { - opacity: 1 !important; touch-action: none; + opacity: 1 !important; } } diff --git a/src/components/ui/FloatingActionButton.scss b/src/components/ui/FloatingActionButton.scss index d4f1200fd..eb5ccfde9 100644 --- a/src/components/ui/FloatingActionButton.scss +++ b/src/components/ui/FloatingActionButton.scss @@ -1,10 +1,11 @@ .FloatingActionButton { position: absolute; + z-index: 2; right: 1rem; bottom: 1rem; transform: translateY(5rem); + transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); - z-index: 2; body.no-page-transitions & { transition: none !important; diff --git a/src/components/ui/ListItem.scss b/src/components/ui/ListItem.scss index 897b08134..310798aa4 100644 --- a/src/components/ui/ListItem.scss +++ b/src/components/ui/ListItem.scss @@ -5,10 +5,12 @@ body.is-android & { &::after { content: ""; + position: absolute; + right: 0; bottom: 0; left: 4.5rem; - right: 0; + height: 0.0625rem; /* stylelint-disable-next-line plugin/whole-pixel */ @@ -23,10 +25,12 @@ // Conceal above item divider &.selected::before { content: ""; + position: absolute; top: -0.0625rem; - left: 4.5rem; right: 0; + left: 4.5rem; + height: 0.0625rem; /* stylelint-disable-next-line plugin/whole-pixel */ box-shadow: inset 0 -0.03125rem 0 0 var(--color-background); @@ -59,40 +63,45 @@ } .ListItem-button { - min-height: 3rem; - background-color: var(--background-color); - border: none !important; - box-shadow: none !important; - outline: none !important; + --ripple-color: rgba(0, 0, 0, 0.08); + + position: relative; + + overflow: hidden; display: flex; align-items: center; + + min-height: 3rem; padding: 0 1rem; - position: relative; - overflow: hidden; - white-space: nowrap; - color: var(--color-text); + border: none !important; border-radius: var(--border-radius-default); - --ripple-color: rgba(0, 0, 0, 0.08); + + color: var(--color-text); text-decoration: none; + white-space: nowrap; + + background-color: var(--background-color); + outline: none !important; + box-shadow: none !important; body.is-ios &, body.is-android & { border-radius: 0; } - @media (max-width: 600px) { - border-radius: 0; - } - > .ListItem-main-icon { + margin-right: 1.75rem; font-size: 1.5rem; color: var(--color-text-secondary); - margin-right: 1.75rem; } > .Switcher { margin-inline-start: auto; } + + @media (max-width: 600px) { + border-radius: 0; + } } &.with-color-transition { @@ -106,15 +115,15 @@ .title, .other-usernames, .subtitle { - text-align: initial; unicode-bidi: plaintext; + text-align: initial; text-overflow: ellipsis; } .other-usernames { display: block; - white-space: normal; line-height: 1.25rem; + white-space: normal; } .username-link { @@ -159,15 +168,6 @@ } } - @media (min-width: 600px) { - &:not(.has-ripple):not(.is-static), - body.no-page-transitions & { - .ListItem-button:active { - --background-color: var(--color-item-active) !important; - } - } - } - &.has-menu-open .ListItem-button { --background-color: var(--color-chat-hover); } @@ -207,8 +207,8 @@ width: auto; .MenuItem button { - padding-left: 1rem !important; padding-right: 2rem !important; + padding-left: 1rem !important; } } } @@ -251,8 +251,8 @@ .title, .subtitle { display: flex; - justify-content: flex-start; align-items: center; + justify-content: flex-start; min-width: 0; } @@ -265,12 +265,14 @@ .last-message, .status, .typing-status { - font-size: 1rem; - margin: 0; overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; + + margin: 0; + + font-size: 1rem; text-align: initial; + text-overflow: ellipsis; + white-space: nowrap; } h3, @@ -286,8 +288,8 @@ } .status-icon { - vertical-align: text-bottom; margin-inline-end: 0.125rem; + vertical-align: text-bottom; } .contact-phone, @@ -299,8 +301,8 @@ .ChatInfo { display: flex; - align-items: center; flex: 1; + align-items: center; min-width: 0; .info { @@ -310,22 +312,24 @@ } .custom-title { + overflow: hidden; + flex-shrink: 0; + + margin-inline-start: auto; padding-inline-start: 1rem; + font-size: 0.875rem; color: var(--color-text-secondary); - overflow: hidden; - white-space: nowrap; text-overflow: ellipsis; - margin-inline-start: auto; - flex-shrink: 0; + white-space: nowrap; } .status, .typing-status { + display: inline-block; font-size: 0.875rem; line-height: 1.25rem; color: var(--color-text-secondary); - display: inline-block; &.online { color: var(--color-primary); @@ -333,8 +337,8 @@ &[dir="rtl"], &[dir="auto"] { - text-align: initial; width: 100%; + text-align: initial; } .group-status:only-child, @@ -350,8 +354,8 @@ .last-message, .status, .typing-status { - text-align: initial; unicode-bidi: plaintext; + text-align: initial; } .last-message, @@ -369,8 +373,8 @@ } .Avatar { - margin-left: 0.5rem; margin-right: 0; + margin-left: 0.5rem; } .info > .status { @@ -383,9 +387,9 @@ margin: 0; .ListItem-button { - padding-left: 0; display: flex; align-items: center; + padding-left: 0; } .Avatar { @@ -406,8 +410,8 @@ &[dir="rtl"] { .Checkbox { - padding-left: 0; padding-right: 4rem; + padding-left: 0; } } } @@ -423,11 +427,10 @@ } .multiline-item { - flex-grow: 1; - white-space: initial; overflow: hidden; - + flex-grow: 1; padding: 0.4375rem 0 0.5625rem 0; + white-space: initial; .word-break { overflow-wrap: break-word; @@ -444,26 +447,35 @@ } .title { - line-height: 1.25rem; overflow: hidden; + line-height: 1.25rem; text-overflow: ellipsis; } .subtitle { + margin-top: 0.25rem; font-size: 0.875rem; line-height: 1rem; color: var(--color-text-secondary); - margin-top: 0.25rem; &.black { color: var(--color-text); } } } + + @media (min-width: 600px) { + &:not(.has-ripple):not(.is-static), + body.no-page-transitions & { + .ListItem-button:active { + --background-color: var(--color-item-active) !important; + } + } + } } .list-item-ellipsis { - white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + white-space: nowrap; } diff --git a/src/components/ui/Loading.scss b/src/components/ui/Loading.scss index 6f7f96f33..3d8300e45 100644 --- a/src/components/ui/Loading.scss +++ b/src/components/ui/Loading.scss @@ -1,8 +1,8 @@ .Loading { display: flex; - height: 100%; align-items: center; justify-content: center; + height: 100%; &.interactive { cursor: var(--custom-cursor, pointer); diff --git a/src/components/ui/Menu.scss b/src/components/ui/Menu.scss index 08a76fe77..caf88db99 100644 --- a/src/components/ui/Menu.scss +++ b/src/components/ui/Menu.scss @@ -1,34 +1,42 @@ .Menu { &.fluid .bubble { - min-width: 13.5rem; width: auto; + min-width: 13.5rem; } .backdrop { position: fixed; - left: -100vw; - right: -100vw; - top: -100vh; - bottom: -100vh; z-index: var(--z-menu-backdrop); + top: -100vh; + right: -100vw; + bottom: -100vh; + left: -100vw; } .bubble { - overflow: hidden; - display: block; - list-style: none; - padding: 0.5rem 0; - margin: 0; + + --offset-y: calc(100% + 0.5rem); + --offset-x: 0; + position: absolute; + z-index: var(--z-menu-bubble); + transform: scale(0.85); + + overflow: hidden; + overscroll-behavior: contain; + display: block; + + min-width: 13.5rem; + margin: 0; + padding: 0.5rem 0; + border-radius: var(--border-radius-default); + + color: var(--color-text); + list-style: none; + background-color: var(--color-background); box-shadow: 0 0.25rem 0.5rem 0.125rem var(--color-default-shadow); - border-radius: var(--border-radius-default); - min-width: 13.5rem; - z-index: var(--z-menu-bubble); - overscroll-behavior: contain; - color: var(--color-text); - transform: scale(0.85); transition: opacity 150ms cubic-bezier(0.2, 0, 0.2, 1), transform 150ms cubic-bezier(0.2, 0, 0.2, 1) !important; &.open { @@ -52,9 +60,6 @@ transition: opacity 0.15s !important; } - --offset-y: calc(100% + 0.5rem); - --offset-x: 0; - &.top { top: var(--offset-y); } @@ -82,17 +87,19 @@ .footer { padding: 0.5rem 0; - background: var(--color-chat-hover); - color: var(--color-text-secondary); + font-size: 0.8125rem; + color: var(--color-text-secondary); text-align: center; + + background: var(--color-chat-hover); } &.compact { .bubble { + padding: 0.25rem 0; background: var(--color-background-compact-menu); backdrop-filter: blur(10px); - padding: 0.25rem 0; body.no-menu-blur & { background: var(--color-background); @@ -110,13 +117,13 @@ } .menu-loading-row { - margin: 0.125rem 1rem; width: calc(100% - 2rem); + margin: 0.125rem 1rem; } &.in-portal { - z-index: var(--z-portal-menu); position: absolute; + z-index: var(--z-portal-menu); } } diff --git a/src/components/ui/MenuItem.scss b/src/components/ui/MenuItem.scss index 88c85334d..39addde07 100644 --- a/src/components/ui/MenuItem.scss +++ b/src/components/ui/MenuItem.scss @@ -1,72 +1,59 @@ .MenuItem { - width: 100%; - background: none; - border: none !important; - box-shadow: none !important; - outline: none !important; + --ripple-color: rgba(0, 0, 0, 0.08); + + cursor: var(--custom-cursor, pointer); + + position: relative; + + unicode-bidi: plaintext; + overflow: hidden; display: flex; align-items: center; + + width: 100%; padding: 0.75rem 1rem; - position: relative; - overflow: hidden; + border: none !important; + line-height: 1.5rem; - white-space: nowrap; color: var(--color-text); - --ripple-color: rgba(0, 0, 0, 0.08); - cursor: var(--custom-cursor, pointer); - unicode-bidi: plaintext; + white-space: nowrap; + + background: none; + outline: none !important; + box-shadow: none !important; .right-badge { + flex-shrink: 0; + min-width: 1.5rem; height: 1.5rem; margin-left: auto; - background: var(--color-gray); - border-radius: 0.75rem; padding: 0 0.4375rem; - color: white; + border-radius: 0.75rem; + font-size: 0.875rem; - line-height: 1.5rem; font-weight: var(--font-weight-medium); + line-height: 1.5rem; + color: white; text-align: center; - flex-shrink: 0; + + background: var(--color-gray); } &.compact .right-badge { - background: none; padding: 0; color: var(--color-text-secondary); + background: none; } &[dir="rtl"] .right-badge { - margin-left: 0; margin-right: auto; - } - - @media (hover: hover) { - &:hover, - &:focus { - background-color: var(--color-chat-hover); - text-decoration: none; - color: inherit; - } - } - - @media (max-width: 600px) { - &:focus, - &:hover, - &:active { - text-decoration: none; - color: inherit; - } - - &:active { - background-color: var(--color-chat-hover); - } + margin-left: 0; } .icon { - font-size: 1.5rem; margin-right: 2rem; + font-size: 1.5rem; color: var(--color-icon-secondary); } @@ -79,8 +66,8 @@ } &.disabled { - opacity: 0.5 !important; cursor: var(--custom-cursor, default) !important; + opacity: 0.5 !important; } &.destructive { @@ -102,45 +89,50 @@ .menu-item-badge { margin-right: 0.25rem; + font-size: 0.75rem; - color: var(--color-primary); font-weight: normal; line-height: normal; + color: var(--color-primary); } &[dir="rtl"] { .icon { - margin-left: 2rem; margin-right: 0; + margin-left: 2rem; } .menu-item-name { - margin-left: 2rem; margin-right: 0; + margin-left: 2rem; } > .Switcher { - margin-left: 0; margin-right: auto; + margin-left: 0; } } &.compact { - font-size: 0.875rem; + will-change: transform; + + transform: scale(1); + + width: auto; margin: 0.125rem 0.25rem; padding: 0.25rem; padding-inline-end: 0.75rem; // Icon padding + padding for symmetry border-radius: 0.375rem; - width: auto; + + font-size: 0.875rem; font-weight: var(--font-weight-medium); - transform: scale(1); + transition: 0.15s ease-in-out transform; - will-change: transform; .icon { max-width: 1.25rem; - font-size: 1.25rem; margin-inline: 0.5rem 1.25rem; + font-size: 1.25rem; &::before { max-width: 1.25rem; @@ -151,8 +143,8 @@ &:hover, &:focus, &:active { - background: var(--color-background-compact-menu-hover); text-decoration: none; + background: var(--color-background-compact-menu-hover); } &:active { @@ -173,8 +165,31 @@ &.menu-custom-emoji-sets { margin: 0 0.25rem; padding: 0.5rem 0.75rem; - font-weight: var(--font-weight-normal); + font-size: small; + font-weight: var(--font-weight-normal); line-height: 1.125rem; } + + @media (hover: hover) { + &:hover, + &:focus { + color: inherit; + text-decoration: none; + background-color: var(--color-chat-hover); + } + } + + @media (max-width: 600px) { + &:focus, + &:hover, + &:active { + color: inherit; + text-decoration: none; + } + + &:active { + background-color: var(--color-chat-hover); + } + } } diff --git a/src/components/ui/Modal.scss b/src/components/ui/Modal.scss index 828b3b5a2..14b83417b 100644 --- a/src/components/ui/Modal.scss +++ b/src/components/ui/Modal.scss @@ -46,12 +46,13 @@ .modal-container { position: fixed; top: 0; + right: 0; bottom: 0; left: 0; - right: 0; + display: flex; - justify-content: center; align-items: center; + justify-content: center; } &.with-balance-bar { @@ -59,18 +60,19 @@ top: 5.5rem; } .modal-dialog { - margin-top: 0; max-height: calc(100vh - 7.5rem); + margin-top: 0; } } .modal-backdrop { position: fixed; + z-index: -1; top: 0; right: 0; bottom: 0; left: 0; - z-index: -1; + background-color: rgba(0, 0, 0, 0.25); } @@ -80,22 +82,25 @@ .modal-dialog { position: relative; + transform: translate3d(0, -1rem, 0); + display: inline-flex; flex-direction: column; + width: 100%; - max-width: 35rem; min-width: 17.5rem; + max-width: 35rem; margin: 2rem auto; + border-radius: var(--border-radius-modal); + background-color: var(--color-background); box-shadow: 0 0.25rem 0.5rem 0.125rem var(--color-default-shadow); - border-radius: var(--border-radius-modal); - transform: translate3d(0, -1rem, 0); transition: transform 0.2s ease, opacity 0.2s ease; body.no-page-transitions & { - transition: none; transform: none !important; + transition: none; } @media (max-width: 450px) { @@ -113,17 +118,18 @@ .modal-header, %modal-header { - padding: 1.3125rem 1.375rem 0; display: flex; - align-items: center; flex-shrink: 0; + align-items: center; + padding: 1.3125rem 1.375rem 0; } .modal-title { + overflow: hidden; + flex: 1 1 auto; + font-size: 1.25rem; font-weight: var(--font-weight-medium); - flex: 1 1 auto; - overflow: hidden; text-overflow: ellipsis; &:not(:only-child) { @@ -133,21 +139,23 @@ .modal-header-condensed { @extend %modal-header; + padding: 0.5rem 1.25rem 0 0.9375rem !important; .modal-action-button { - font-size: 0.875rem; - height: 2.25rem; width: auto; - line-height: 1.625rem; - margin-left: auto; - padding-left: 1.25rem; - padding-right: 1.25rem; min-width: 5rem; + height: 2.25rem; + margin-left: auto; + padding-right: 1.25rem; + padding-left: 1.25rem; + + font-size: 0.875rem; + line-height: 1.625rem; &.danger { - background-color: var(--color-error); color: var(--color-white); + background-color: var(--color-error); &:hover, &:focus, @@ -159,11 +167,12 @@ } .modal-content { - width: 100%; - flex-grow: 1; - padding: 1rem 1.5rem 1.1875rem; overflow-y: auto; + flex-grow: 1; + + width: 100%; max-height: 92vh; + padding: 1rem 1.5rem 1.1875rem; b, strong { @@ -178,25 +187,26 @@ } .modal-about { + overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; + text-overflow: ellipsis; - overflow: hidden; } .modal-help { - color: var(--color-text-secondary); font-size: 0.9375rem; line-height: 1.3; + color: var(--color-text-secondary); } .dialog-buttons { display: flex; flex-direction: row-reverse; - justify-content: flex-start; flex-wrap: wrap; gap: 0.5rem 1rem; + justify-content: flex-start; } .dialog-buttons-column { @@ -220,8 +230,9 @@ .confirm-dialog-button { width: auto; height: auto; - text-align: right; + font-weight: var(--font-weight-semibold); + text-align: right; white-space: pre-wrap; } @@ -231,8 +242,8 @@ .modal-absolute-close-button { position: absolute; + z-index: 1; top: 0.375rem; left: 0.375rem; - z-index: 1; } } diff --git a/src/components/ui/ModalStarBalanceBar.module.scss b/src/components/ui/ModalStarBalanceBar.module.scss index 7750b4ecb..3ef402267 100644 --- a/src/components/ui/ModalStarBalanceBar.module.scss +++ b/src/components/ui/ModalStarBalanceBar.module.scss @@ -1,9 +1,9 @@ .root { position: absolute; + z-index: var(--z-modal); top: 0rem; left: 50%; - background-color: var(--color-background); - color: var(--color-text); + transform: translate(-50%, -1rem); display: flex; flex-direction: column; @@ -11,9 +11,14 @@ padding: 0.5rem 1.25rem; border-radius: 2rem; + font-size: 0.875rem; + color: var(--color-text); white-space: nowrap; - z-index: var(--z-modal); + + background-color: var(--color-background); + + transition: transform 0.2s ease, opacity 0.2s ease; :global(.confirm) & { z-index: var(--z-modal-confirm); @@ -23,13 +28,9 @@ z-index: var(--z-modal-low-priority); } - transform: translate(-50%, -1rem); - - transition: transform 0.2s ease, opacity 0.2s ease; - :global(body:not(.no-page-transitions)) .dots { - transition: none; transform: none !important; + transition: none; } &:not(:global(.open)) { diff --git a/src/components/ui/Notification.scss b/src/components/ui/Notification.scss index a389d3c66..bdd173931 100644 --- a/src/components/ui/Notification.scss +++ b/src/components/ui/Notification.scss @@ -1,9 +1,10 @@ .Notification-container { position: relative; + z-index: var(--z-notification); + width: 22rem; max-width: 100vw; margin: 4.25rem auto 0.25rem; - z-index: var(--z-notification); & ~ & { margin-top: 0.25rem; @@ -13,15 +14,18 @@ .Notification { --color-toast-action: var(--color-primary); - background-color: rgba(32, 32, 32, 0.8); - background-size: 1.5rem; - border-radius: var(--border-radius-default); - padding: 0.9375rem; - color: #fff; - margin: 0 0.5rem; display: flex; align-items: center; + margin: 0 0.5rem; + padding: 0.9375rem; + border-radius: var(--border-radius-default); + + color: #fff; + + background-color: rgba(32, 32, 32, 0.8); + background-size: 1.5rem; + .text-entity-link, .text-entity-link:hover, .text-entity-link:active { @@ -30,15 +34,15 @@ } .content { + flex-grow: 1; + font-size: 0.9375rem; line-height: 1.25; overflow-wrap: anywhere; - font-size: 0.9375rem; - flex-grow: 1; } &.bold-link b { - color: var(--color-primary); cursor: var(--custom-cursor, pointer); + color: var(--color-primary); } .notification-title { @@ -62,11 +66,12 @@ } .notification-button { - color: var(--color-toast-action); - font-weight: var(--font-weight-medium); - text-transform: none; - margin-inline-start: 0.125rem; - height: 2rem; width: auto; + height: 2rem; + margin-inline-start: 0.125rem; + + font-weight: var(--font-weight-medium); + color: var(--color-toast-action); + text-transform: none; } } diff --git a/src/components/ui/ProgressSpinner.scss b/src/components/ui/ProgressSpinner.scss index 6a9f4fe68..933bf3a9d 100644 --- a/src/components/ui/ProgressSpinner.scss +++ b/src/components/ui/ProgressSpinner.scss @@ -1,19 +1,23 @@ .ProgressSpinner { - position: relative; - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - z-index: 1; - width: 3.375rem; - height: 3.375rem; - background-color: rgba(0, 0, 0, 0.25); - border-radius: 50%; cursor: var(--custom-cursor, pointer); + position: relative; + z-index: 1; + + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + width: 3.375rem; + height: 3.375rem; + border-radius: 50%; + + background-color: rgba(0, 0, 0, 0.25); + &.no-cross { - background: transparent !important; pointer-events: none; + background: transparent !important; } .icon-close { @@ -27,14 +31,17 @@ &::after { content: ""; + position: absolute; + top: 50%; + left: 50%; + transform: translate3d(-50%, -50%, 0); + width: 0.8125rem; height: 0.8125rem; border-radius: 0.125rem; + background-color: #fff; - left: 50%; - top: 50%; - transform: translate3d(-50%, -50%, 0); } } @@ -44,9 +51,9 @@ height: auto; &.square { - background-image: none; width: 0.75rem; height: 0.75rem; + background-image: none; } } @@ -65,7 +72,7 @@ &_canvas { display: block; - background-color: transparent !important; color: var(--color-white); + background-color: transparent !important; } } diff --git a/src/components/ui/Radio.scss b/src/components/ui/Radio.scss index de5db44f9..5ac956a9f 100644 --- a/src/components/ui/Radio.scss +++ b/src/components/ui/Radio.scss @@ -1,19 +1,21 @@ .Radio { + cursor: var(--custom-cursor, pointer); + position: relative; - width: 100%; - min-height: 3rem; display: flex; align-items: center; - padding-inline-start: 4.25rem; - text-align: left; - cursor: var(--custom-cursor, pointer); + width: 100%; + min-height: 3rem; margin: 0; + padding-inline-start: 4.25rem; + + text-align: left; &:hover { - background-color: var(--color-chat-hover); border-radius: var(--border-radius-default); + background-color: var(--color-chat-hover); } &.disabled { @@ -26,8 +28,8 @@ .Radio-main { &::before, &::after { - left: auto; right: 1.1875rem; + left: auto; } &::after { @@ -72,48 +74,59 @@ &::before, &::after { content: ""; - display: block; + position: absolute; top: 50%; transform: translateY(-50%); + + display: block; } &::before { + left: 1.125rem; // 1 + ((1.5 - 1.25) / 2) + width: 1.25rem; height: 1.25rem; - left: 1.125rem; // 1 + ((1.5 - 1.25) / 2) border: 2px solid var(--color-borders-input); border-radius: 50%; - background-color: var(--color-background); + opacity: 1; + background-color: var(--color-background); + transition: border-color 0.1s ease, opacity 0.1s ease; } &::after { + left: 1.4375rem; // 1 + ((1.5 - 0.625) / 2) + width: 0.625rem; height: 0.625rem; - left: 1.4375rem; // 1 + ((1.5 - 0.625) / 2) border-radius: 50%; - background: var(--color-primary); + opacity: 0; + background: var(--color-primary); + transition: opacity 0.1s ease; } .label { - display: block; - overflow-wrap: anywhere; unicode-bidi: plaintext; - text-align: left; + display: block; + line-height: 1.5rem; + text-align: left; + overflow-wrap: anywhere; } .subLabel { + unicode-bidi: plaintext; display: block; + + margin-top: 0.25rem; + font-size: 0.875rem; line-height: 1rem; color: var(--color-text-secondary); - unicode-bidi: plaintext; - margin-top: 0.25rem; } .subLabelLink { @@ -138,13 +151,16 @@ } .Spinner { - position: absolute; - left: 1rem; - top: 50%; - transform: translateY(-50%); - opacity: 0; - animation: fade-in 0.2s ease forwards; --spinner-size: 1.25rem; + + position: absolute; + top: 50%; + left: 1rem; + transform: translateY(-50%); + + opacity: 0; + + animation: fade-in 0.2s ease forwards; } } @@ -153,13 +169,13 @@ text-align: right; &::before { - left: auto; right: 1.0625rem; + left: auto; } &::after { - left: auto; right: 1.375rem; + left: auto; } } @@ -169,8 +185,8 @@ } &.loading .Spinner { - left: auto; right: 1.0625rem; + left: auto; } &.onlyInput .Radio-main::after { @@ -180,22 +196,24 @@ } &.onlyInput { - min-height: auto; position: relative; + + min-height: auto; margin-block: 0 1.25rem; - line-height: 1.25rem; padding-inline-start: 1.25rem; + line-height: 1.25rem; + .Radio-main { &::before { - left: 0; - right: 0; top: 0; + right: 0; + left: 0; transform: none; } &::after { - left: 0.3125rem; top: 0; + left: 0.3125rem; transform: translateY(50%); } } diff --git a/src/components/ui/RadioGroup.module.scss b/src/components/ui/RadioGroup.module.scss index c60a23e51..610eabca8 100644 --- a/src/components/ui/RadioGroup.module.scss +++ b/src/components/ui/RadioGroup.module.scss @@ -1,10 +1,12 @@ .wrapper { - position: relative; - display: block; - border: none; - margin-bottom: 0; - cursor: var(--custom-cursor, pointer); + position: relative; + + display: block; + + margin-bottom: 0; + border: none; + line-height: 1.5rem; } diff --git a/src/components/ui/RangeSlider.scss b/src/components/ui/RangeSlider.scss index 6088ec0a6..94260a2a9 100644 --- a/src/components/ui/RangeSlider.scss +++ b/src/components/ui/RangeSlider.scss @@ -1,13 +1,17 @@ @use "../../styles/mixins"; @mixin thumb-styles() { - background: var(--slider-color); - border: none; - height: 0.75rem; - width: 0.75rem; - border-radius: 50%; cursor: var(--custom-cursor, pointer); + transform: scale(1); + + width: 0.75rem; + height: 0.75rem; + border: none; + border-radius: 50%; + + background: var(--slider-color); + transition: transform 0.25s ease-in-out; &:hover { @@ -23,8 +27,9 @@ margin-inline-end: 1rem; &.disabled { - pointer-events: none; --slider-color: var(--color-text-secondary); + + pointer-events: none; } &.readOnly { @@ -51,8 +56,8 @@ &[dir="rtl"] { .value { - margin-left: 0; margin-right: 1rem; + margin-left: 0; } } } @@ -63,27 +68,33 @@ &::before { content: ""; + position: absolute; - width: 100%; - left: 0; - top: 0.3125rem; - height: 0.125rem; - background-color: var(--color-borders); - border-radius: 0.125rem; - opacity: 0.5; z-index: -1; + top: 0.3125rem; + left: 0; + + width: 100%; + height: 0.125rem; + border-radius: 0.125rem; + + opacity: 0.5; + background-color: var(--color-borders); } } .slider-fill-track { - position: absolute; - width: 100%; - left: 0; - top: 0.3125rem; - height: 0.125rem; - background-color: var(--slider-color); - border-radius: 0.125rem; pointer-events: none; + + position: absolute; + top: 0.3125rem; + left: 0; + + width: 100%; + height: 0.125rem; + border-radius: 0.125rem; + + background-color: var(--slider-color); } &.bold { @@ -121,16 +132,18 @@ .slider-options { display: grid; - grid-template-rows: auto; grid-auto-columns: 1fr; grid-auto-flow: column; + grid-template-rows: auto; } .slider-option { - font-size: 0.8125rem; - text-align: center; cursor: var(--custom-cursor, pointer); + + font-size: 0.8125rem; color: var(--color-text-secondary); + text-align: center; + transition: color 0.2s ease; &:hover, diff --git a/src/components/ui/RangeSliderWithMarks.module.scss b/src/components/ui/RangeSliderWithMarks.module.scss index 87a911528..eacdcf446 100644 --- a/src/components/ui/RangeSliderWithMarks.module.scss +++ b/src/components/ui/RangeSliderWithMarks.module.scss @@ -1,19 +1,23 @@ @use '../../styles/mixins'; @mixin thumb-styles() { - border: none; - width: 1rem; - height: 1rem; - background: var(--color-links); - border-radius: 50%; cursor: var(--custom-cursor, pointer); + position: absolute; + z-index: 2; left: var(--fill-percentage); transform: scale(1) translate(-45%, -50%); - transition: transform 0.3s ease-in-out; - z-index: 2; + + width: 1rem; + height: 1rem; + border: none; + border-radius: 50%; + -webkit-appearance: none; appearance: none; + background: var(--color-links); + + transition: transform 0.3s ease-in-out; @supports (-moz-appearance: none) { transform: scale(1) translate(calc(-10% + var(--thumb-offset)), 0); @@ -36,25 +40,29 @@ .sliderContainer { --thumb-offset: 0%; --fill-percentage: 0%; + position: relative; width: 100%; } .marksContainer { - width: 100%; pointer-events: none; display: flex; justify-content: space-between; + width: 100%; } .mark { + position: relative; + + display: flex; + justify-content: center; + + width: 0.1875rem; + font-size: 0.8125rem; font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); - position: relative; - display: flex; - justify-content: center; - width: 0.1875rem; } .active { @@ -63,13 +71,12 @@ .slider { position: relative; - -webkit-appearance: none; - width: 100%; - height: 0.1875rem; - outline: none; - transition: opacity 0.2s; z-index: 1; + width: 100%; + height: 0.1875rem; + + -webkit-appearance: none; background: linear-gradient( to right, @@ -78,6 +85,9 @@ var(--color-text-secondary) var(--fill-percentage), var(--color-text-secondary) 100% ); + outline: none; + + transition: opacity 0.2s; } .slider::-webkit-slider-thumb { @@ -93,22 +103,26 @@ } .tickMarks { + pointer-events: none; + position: absolute; + z-index: 1; + right: 0; bottom: 0.25rem; left: 0; - right: 0; + display: flex; justify-content: space-between; - pointer-events: none; - z-index: 1; } .tick { position: relative; + width: 0.25rem; height: 0.5rem; - background-color: var(--color-text-secondary); border-radius: 0.1875rem; + + background-color: var(--color-text-secondary); } .filled { diff --git a/src/components/ui/RippleEffect.scss b/src/components/ui/RippleEffect.scss index 402953738..e3420b8f1 100644 --- a/src/components/ui/RippleEffect.scss +++ b/src/components/ui/RippleEffect.scss @@ -7,29 +7,34 @@ opacity: 1; } to { - opacity: 0; transform: scale(2); + opacity: 0; } } .ripple-container { position: absolute; top: 0; - left: 0; - bottom: 0; right: 0; + bottom: 0; + left: 0; body.no-page-transitions & { display: none; } .ripple-wave { - position: absolute; - display: block; - background-color: var(--ripple-color, rgba(0, 0, 0, 0.08)); - border-radius: 50%; - transform: scale(0); - animation: ripple-animation 700ms; pointer-events: none; + + position: absolute; + transform: scale(0); + + display: block; + + border-radius: 50%; + + background-color: var(--ripple-color, rgba(0, 0, 0, 0.08)); + + animation: ripple-animation 700ms; } } diff --git a/src/components/ui/RoundTimer.module.scss b/src/components/ui/RoundTimer.module.scss index 4f2ab2a66..08cac7524 100644 --- a/src/components/ui/RoundTimer.module.scss +++ b/src/components/ui/RoundTimer.module.scss @@ -1,7 +1,7 @@ .root { position: relative; - color: var(--color-toast-action); font-weight: var(--font-weight-medium); + color: var(--color-toast-action); } .svg { @@ -12,10 +12,11 @@ } .circle { - stroke: var(--color-toast-action); fill: transparent; - stroke-width: 2; + stroke: var(--color-toast-action); stroke-linecap: round; + stroke-width: 2; + transition: stroke-dashoffset 1s linear, stroke 0.2s; @starting-style { diff --git a/src/components/ui/SearchInput.scss b/src/components/ui/SearchInput.scss index df97d0ac8..ecd762780 100644 --- a/src/components/ui/SearchInput.scss +++ b/src/components/ui/SearchInput.scss @@ -1,15 +1,19 @@ .SearchInput { position: relative; - width: 100%; - color: rgba(var(--color-text-secondary-rgb), 0.5); - background-color: var(--color-chat-hover); - border: 2px solid var(--color-chat-hover); - border-radius: 1.375rem; - transition: border-color 0.15s ease; + display: flex; align-items: center; + width: 100%; padding-inline-end: 0.1875rem; + border: 2px solid var(--color-chat-hover); + border-radius: 1.375rem; + + color: rgba(var(--color-text-secondary-rgb), 0.5); + + background-color: var(--color-chat-hover); + + transition: border-color 0.15s ease; &.with-picker-item { display: flex; @@ -32,8 +36,8 @@ &.has-focus { border-color: var(--color-primary); - caret-color: var(--color-primary); background-color: var(--color-background); + caret-color: var(--color-primary); .search-icon { color: var(--color-primary); @@ -43,13 +47,14 @@ input { height: 2.5rem; margin-bottom: 0; - border: none !important; - border-radius: 1.375rem; - background-color: transparent !important; - box-shadow: none !important; padding: calc(0.4375rem - var(--border-width)) calc(0.625rem - var(--border-width)) calc(0.5rem - var(--border-width)) calc(0.75rem - var(--border-width)); + border: none !important; + border-radius: 1.375rem; + + background-color: transparent !important; + box-shadow: none !important; &::placeholder { color: var(--color-placeholders); @@ -57,14 +62,14 @@ } .icon-container-left { - width: 1.5rem; flex-shrink: 0; + width: 1.5rem; margin-inline-start: 0.75rem; } .icon-container-right { - width: 2.5rem; flex-shrink: 0; + width: 2.5rem; margin-inline-start: 0.5rem; } @@ -88,8 +93,9 @@ top: 50%; left: 50%; transform: translate(-50%, -50%); - height: 2.5rem; + width: 2.5rem; + height: 2.5rem; .Spinner { --spinner-size: 1.5rem; @@ -100,17 +106,17 @@ font-size: 1rem; } - @media (max-width: 600px) { - input { - height: 2.5rem; - border-radius: 1.25rem; - padding-left: calc(0.75rem - var(--border-width)); - } - } - &[dir="rtl"] { input { direction: rtl; } } + + @media (max-width: 600px) { + input { + height: 2.5rem; + padding-left: calc(0.75rem - var(--border-width)); + border-radius: 1.25rem; + } + } } diff --git a/src/components/ui/Separator.module.scss b/src/components/ui/Separator.module.scss index f68f95086..b020c0656 100644 --- a/src/components/ui/Separator.module.scss +++ b/src/components/ui/Separator.module.scss @@ -1,8 +1,8 @@ .separator { display: flex; align-items: center; - text-align: center; color: var(--color-text-secondary); + text-align: center; &::before, &::after { @@ -21,8 +21,8 @@ &[dir="rtl"] { &:not(:empty)::before { - margin-left: 0.5rem; margin-right: 0; + margin-left: 0.5rem; } &:not(:empty)::after { diff --git a/src/components/ui/ShowMoreButton.scss b/src/components/ui/ShowMoreButton.scss index 052289c8a..eee9b41e6 100644 --- a/src/components/ui/ShowMoreButton.scss +++ b/src/components/ui/ShowMoreButton.scss @@ -1,15 +1,18 @@ .ShowMoreButton { - color: var(--color-text) !important; display: flex; align-items: center; + + padding-left: 0.75rem !important; + + color: var(--color-text) !important; text-align: left; text-transform: none; - padding-left: 0.75rem !important; + opacity: 1 !important; .icon { - font-size: 1.5rem; margin-right: 2rem; + font-size: 1.5rem; color: var(--color-text-secondary); } diff --git a/src/components/ui/Spinner.scss b/src/components/ui/Spinner.scss index 0c1fd78b6..5d7f19e4d 100644 --- a/src/components/ui/Spinner.scss +++ b/src/components/ui/Spinner.scss @@ -2,6 +2,7 @@ --spinner-size: 2rem; position: relative; + display: flex; align-items: center; justify-content: center; @@ -12,11 +13,13 @@ &.with-background { &::before { content: ''; + position: absolute; - left: -0.125rem; top: -0.125rem; - bottom: -0.125rem; right: -0.125rem; + bottom: -0.125rem; + left: -0.125rem; + border-radius: 50%; } @@ -79,17 +82,17 @@ .Spinner__inner { position: absolute; top: 0; - left: 0; right: 0; bottom: 0; + left: 0; background-repeat: no-repeat; background-size: 100%; animation-name: spin; animation-duration: 1s; - animation-iteration-count: infinite; animation-timing-function: linear; + animation-iteration-count: infinite; } @keyframes spin { diff --git a/src/components/ui/Switcher.scss b/src/components/ui/Switcher.scss index 694342d59..40d8cef1d 100644 --- a/src/components/ui/Switcher.scss +++ b/src/components/ui/Switcher.scss @@ -1,7 +1,7 @@ .Switcher { + position: relative; display: inline-flex; align-items: center; - position: relative; margin: 0; &.disabled { @@ -26,37 +26,49 @@ } input { - height: 0; - width: 0; - visibility: hidden; position: absolute; z-index: var(--z-below); + + width: 0; + height: 0; + + visibility: hidden; opacity: 0; } .widget { cursor: var(--custom-cursor, pointer); - text-indent: -999px; + + position: relative; + + display: inline-block; + width: 2.125rem; height: 0.875rem; - background-color: var(--color-gray); - display: inline-block; border-radius: 0.5rem; - position: relative; + + text-indent: -999px; + + background-color: var(--color-gray); + transition: background-color 150ms; } .widget:after { content: ""; + position: absolute; top: -0.125rem; left: 0; + width: 1.125rem; height: 1.125rem; - background-color: var(--color-background); - border-radius: 0.75rem; - transition: transform 200ms; border: 0.125rem solid var(--color-gray); + border-radius: 0.75rem; + + background-color: var(--color-background); + + transition: transform 200ms; } input:checked + .widget { diff --git a/src/components/ui/Tab.scss b/src/components/ui/Tab.scss index d23b1cdca..b333a2961 100644 --- a/src/components/ui/Tab.scss +++ b/src/components/ui/Tab.scss @@ -1,18 +1,21 @@ .Tab { display: flex; - justify-content: center; flex: 1 1 auto; - appearance: none; - background: none; + justify-content: center; + width: auto; margin: 0; - border: none; padding: 0.625rem 1.125rem; - font-weight: var(--font-weight-semibold); - color: var(--color-text-secondary); + border: none; border-top-left-radius: var(--border-radius-messages-small); border-top-right-radius: var(--border-radius-messages-small); + font-weight: var(--font-weight-semibold); + color: var(--color-text-secondary); + + appearance: none; + background: none; + &, &:active, &:focus { @@ -46,26 +49,32 @@ .Tab_inner { position: relative; + display: flex; - align-items: center; - white-space: nowrap; - height: 1.5rem; // Emoji-only titles ignore line-height on Windows gap: 1px; // Prevent custom emoji sticking to the text + align-items: center; + + height: 1.5rem; // Emoji-only titles ignore line-height on Windows + + white-space: nowrap; } .badge { + flex-shrink: 0; + min-width: 1.25rem; height: 1.25rem; margin-inline-start: 0.3125rem; - background: var(--color-gray); - border-radius: 0.75rem; padding: 0 0.3125rem; - color: white; + border-radius: 0.75rem; + font-size: 0.875rem; - line-height: 1.3125rem; font-weight: var(--font-weight-medium); + line-height: 1.3125rem; + color: white; text-align: center; - flex-shrink: 0; + + background: var(--color-gray); body.is-ios &, body.is-macos & { @@ -82,21 +91,25 @@ bottom: -0.625rem; left: 50%; transform: translateX(-50%); + font-size: 0.75rem; } .platform { + pointer-events: none; + position: absolute; + right: -0.5rem; bottom: -0.625rem; left: -0.5rem; - right: -0.5rem; - opacity: 0; - background-color: var(--color-primary); + transform-origin: left; + + box-sizing: content-box; height: 0.1875rem; border-radius: 0.1875rem 0.1875rem 0 0; - pointer-events: none; - box-sizing: content-box; - transform-origin: left; + + opacity: 0; + background-color: var(--color-primary); &.animate { transition: transform var(--slide-transition); diff --git a/src/components/ui/TabList.scss b/src/components/ui/TabList.scss index f060a2720..957191be2 100644 --- a/src/components/ui/TabList.scss +++ b/src/components/ui/TabList.scss @@ -1,22 +1,24 @@ .TabList { + scrollbar-color: rgba(0, 0, 0, 0); + scrollbar-width: none; + position: sticky; top: 0; - flex-shrink: 0; - display: flex; - justify-content: space-between; - align-items: flex-end; - flex-wrap: nowrap; - box-shadow: 0 2px 2px var(--color-light-shadow); - background-color: var(--color-background); + overflow-x: auto; overflow-y: hidden; - - font-size: 1rem; + display: flex; + flex-shrink: 0; + flex-wrap: nowrap; + align-items: flex-end; + justify-content: space-between; padding-inline: 0.5rem; - scrollbar-width: none; - scrollbar-color: rgba(0, 0, 0, 0); + font-size: 1rem; + + background-color: var(--color-background); + box-shadow: 0 2px 2px var(--color-light-shadow); &::-webkit-scrollbar { height: 0; diff --git a/src/components/ui/Toggle.module.scss b/src/components/ui/Toggle.module.scss index df970c045..0d761ef3d 100644 --- a/src/components/ui/Toggle.module.scss +++ b/src/components/ui/Toggle.module.scss @@ -3,8 +3,8 @@ --widget-height: 0.375rem; --thumb-size: 1.125rem; - display: inline-flex; position: relative; + display: inline-flex; } .widget { @@ -15,15 +15,19 @@ &::after { content: ""; + position: absolute; top: 0; left: 0; + width: var(--thumb-size); height: var(--thumb-size); - background-color: var(--color-background); - border-radius: calc(var(--thumb-size) / 2); - transition: transform 200ms; border: 0.125rem solid var(--color-gray); + border-radius: calc(var(--thumb-size) / 2); + + background-color: var(--color-background); + + transition: transform 200ms; :global(body.no-page-transitions) & { transition: none !important; @@ -49,22 +53,29 @@ position: absolute; top: 0; left: 0; + transform: translateY(-50%); + + overflow: hidden; + width: var(--widget-width); height: var(--widget-height); border-radius: 0.25rem; - overflow: hidden; + background-color: var(--color-gray); - transform: translateY(-50%); &::after { content: ""; + position: absolute; top: 0; left: 0; + width: var(--widget-width); height: var(--widget-height); border-radius: 0.25rem; + background-color: var(--color-primary); + transition: transform 200ms; :global(body.no-page-transitions) & { diff --git a/src/components/ui/Transition.scss b/src/components/ui/Transition.scss index 68ba77f54..d902b2c5e 100644 --- a/src/components/ui/Transition.scss +++ b/src/components/ui/Transition.scss @@ -1,13 +1,11 @@ .Transition { position: relative; - width: 100%; height: 100%; &_slide { width: 100%; height: 100%; - animation-fill-mode: forwards !important; &-from, @@ -46,7 +44,6 @@ &-slide { > .Transition_slide-to { transform: translateX(100%); - animation: slide-in var(--slide-transition); } @@ -58,7 +55,6 @@ &-slideBackwards { > .Transition_slide-to { transform: translateX(-100%); - animation: slide-out-backwards var(--slide-transition); } @@ -70,7 +66,6 @@ &-slideRtl { > .Transition_slide-to { transform: translateX(-100%); - animation: slide-in var(--slide-transition); } @@ -82,7 +77,6 @@ &-slideRtlBackwards { > .Transition_slide-to { transform: translateX(100%); - animation: slide-out-backwards var(--slide-transition); } @@ -94,7 +88,6 @@ &-slideVertical { > .Transition_slide-to { transform: translateY(100%); - animation: slide-vertical-in var(--slide-transition); } @@ -106,7 +99,6 @@ &-slideVerticalBackwards { > .Transition_slide-to { transform: translateY(-100%); - animation: slide-vertical-out-backwards var(--slide-transition); } @@ -118,7 +110,6 @@ &-slideVerticalFade { > .Transition_slide-to { transform: translateY(100%); - animation: slide-vertical-fade-in var(--slide-transition); } @@ -130,7 +121,6 @@ &-slideVerticalFadeBackwards { > .Transition_slide-to { transform: translateY(-100%); - animation: slide-vertical-fade-out-backwards var(--slide-transition); } @@ -141,20 +131,16 @@ &-slideFade { > .Transition_slide-from { - transform: translateX(0); transform-origin: left; - + transform: translateX(0); opacity: 1; - animation: fade-out-opacity var(--slide-transition), slide-fade-out-move var(--slide-transition); } > .Transition_slide-to { - transform: translateX(1.5rem); transform-origin: left; - + transform: translateX(1.5rem); opacity: 0; - animation: fade-in-opacity var(--slide-transition), slide-fade-in-move var(--slide-transition); } } @@ -162,9 +148,7 @@ &-slideFadeBackwards { > .Transition_slide-from { transform: translateX(0); - opacity: 1; - animation: fade-in-backwards-opacity var(--slide-transition), slide-fade-in-backwards-move var(--slide-transition); @@ -172,9 +156,7 @@ > .Transition_slide-to { transform: translateX(-1.5rem); - opacity: 0; - animation: fade-out-backwards-opacity var(--slide-transition), slide-fade-out-backwards-move var(--slide-transition); @@ -186,16 +168,13 @@ > .Transition_slide { z-index: 0; - background: var(--background-color); } > .Transition_slide-to { - transform: translateX(1.5rem); transform-origin: left; - + transform: translateX(1.5rem); opacity: 0; - animation: fade-in-opacity var(--slide-transition), slide-fade-in-move-android var(--slide-transition); } } @@ -205,15 +184,12 @@ > .Transition_slide { z-index: 0; - background: var(--background-color); } > .Transition_slide-from { transform: translateX(0); - opacity: 1; - animation: fade-in-backwards-opacity var(--slide-transition), slide-fade-in-backwards-move-android var(--slide-transition); @@ -222,17 +198,14 @@ &-zoomFade { > .Transition_slide-from { - transform: scale(1); transform-origin: center; - + transform: scale(1); opacity: 1; - animation: fade-out-opacity 0.15s ease; } > .Transition_slide-to { transform-origin: center; - opacity: 0; // We can omit `transform: scale(1.1);` here because `opacity` is 0. // We need to for proper position calculation in `InfiniteScroll`. @@ -244,13 +217,11 @@ &-zoomFadeBackwards { > .Transition_slide-from { transform: scale(1); - animation: fade-in-backwards-opacity 0.1s ease, zoom-fade-in-backwards-move 0.15s ease; } > .Transition_slide-to { transform: scale(0.95); - animation: fade-out-backwards-opacity 0.15s ease, zoom-fade-out-backwards-move 0.15s ease; } } @@ -270,13 +241,11 @@ &-fadeBackwards { > .Transition_slide-from { opacity: 1; - animation: fade-out-opacity 0.15s ease; } > .Transition_slide-to { opacity: 0; - animation: fade-in-opacity 0.15s ease; } } @@ -292,7 +261,6 @@ > .Transition_slide-to { opacity: 0; - animation: fade-in-opacity 250ms ease; } } @@ -300,13 +268,11 @@ &-semiFadeBackwards { > .Transition_slide-from { opacity: 1; - animation: fade-in-backwards-opacity 250ms ease; } > .Transition_slide-to { opacity: 1; - animation: none !important; } } @@ -322,7 +288,6 @@ > .Transition_slide-to { transform: translateX(100%); - animation: slide-in var(--layer-transition); } @@ -342,9 +307,7 @@ > .Transition_slide-to { transform: translateX(-20%); - opacity: calc(1 - var(--layer-blackout-opacity)); - animation: slide-layers-out-backwards var(--layer-transition-behind); animation-duration: 450ms; } @@ -360,11 +323,9 @@ } > .Transition_slide-from { - transform: scale(1); transform-origin: center; - + transform: scale(1); opacity: 1; - animation: push-out 0.25s ease-in-out; .custom-scroll { @@ -378,7 +339,6 @@ > .Transition_slide-to { transform: translateX(100%); - animation: slide-in-200 0.25s ease-in-out; } } @@ -390,9 +350,7 @@ > .Transition_slide-to { transform: scale(0.7); - opacity: 0; - animation: push-out-backwards 0.25s ease-in-out; } @@ -404,7 +362,6 @@ &-reveal { > .Transition_slide-to { clip-path: inset(0 100% 0 0); - animation: reveal-in 350ms ease-in; } } @@ -412,13 +369,11 @@ &-revealBackwards { > .Transition_slide-from { clip-path: inset(0 0 0 0); - animation: reveal-in-backwards 350ms ease-out; } > .Transition_slide-to { clip-path: none; - animation: none; } } @@ -535,12 +490,10 @@ @keyframes slide-vertical-fade-in { 0% { transform: translateY(100%); - opacity: 0; } 100% { transform: translateY(0); - opacity: 1; } } @@ -548,12 +501,10 @@ @keyframes slide-vertical-fade-out { 0% { transform: translateY(0); - opacity: 1; } 100% { transform: translateY(-100%); - opacity: 0; } } @@ -561,12 +512,10 @@ @keyframes slide-vertical-fade-in-backwards { 0% { transform: translateY(0); - opacity: 1; } 100% { transform: translateY(100%); - opacity: 0; } } @@ -574,12 +523,10 @@ @keyframes slide-vertical-fade-out-backwards { 0% { transform: translateY(-100%); - opacity: 0; } 100% { transform: translateY(0); - opacity: 1; } } @@ -668,12 +615,10 @@ @keyframes slide-layers-out { 0% { transform: translateX(0); - opacity: 1; } 100% { transform: translateX(-20%); - opacity: calc(1 - var(--layer-blackout-opacity)); } } @@ -681,12 +626,10 @@ @keyframes slide-layers-out-backwards { 0% { transform: translateX(-20%); - opacity: calc(1 - var(--layer-blackout-opacity)); } 100% { transform: translateX(0); - opacity: 1; } } @@ -694,12 +637,10 @@ @keyframes push-out { 0% { transform: scale(1); - opacity: 1; } 100% { transform: scale(0.7); - opacity: 0; } } @@ -707,12 +648,10 @@ @keyframes push-out-backwards { 0% { transform: scale(0.7); - opacity: 0; } 100% { transform: scale(1); - opacity: 1; } } diff --git a/src/components/ui/placeholder/PlaceholderChatInfo.module.scss b/src/components/ui/placeholder/PlaceholderChatInfo.module.scss index 3e787eb90..c2dbbf75c 100644 --- a/src/components/ui/placeholder/PlaceholderChatInfo.module.scss +++ b/src/components/ui/placeholder/PlaceholderChatInfo.module.scss @@ -5,10 +5,10 @@ } .avatar { + flex-shrink: 0; width: 2.75rem; height: 2.75rem; border-radius: 50%; - flex-shrink: 0; } .info { @@ -39,8 +39,8 @@ var(--color-skeleton-foreground), var(--color-skeleton-background) ); - background-size: 100vw 100vh; background-attachment: fixed; + background-size: 100vw 100vh; animation: slide 3s infinite linear; } diff --git a/src/components/ui/placeholder/Skeleton.scss b/src/components/ui/placeholder/Skeleton.scss index b50827e04..b5d550b0b 100644 --- a/src/components/ui/placeholder/Skeleton.scss +++ b/src/components/ui/placeholder/Skeleton.scss @@ -1,9 +1,12 @@ .Skeleton { position: relative; - background-color: var(--color-skeleton-background); + + overflow: hidden; + width: 100%; height: 100%; - overflow: hidden; + + background-color: var(--color-skeleton-background); &.inline { display: inline-block; @@ -21,10 +24,14 @@ &.pulse::before { content: ""; + display: block; + width: 100%; height: 100%; + background-color: var(--color-skeleton-foreground); + animation: skeleton-pulse 2s ease-in-out 0.5s infinite; @keyframes skeleton-pulse { @@ -42,11 +49,16 @@ &.wave::before { content: ""; - display: block; + position: absolute; + + display: block; + width: 100%; height: 100%; + background: linear-gradient(to right, transparent 0%, var(--color-skeleton-foreground) 50%, transparent 100%); + animation: skeleton-wave 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; @keyframes skeleton-wave { diff --git a/src/hooks/animations/useTransitionActiveKey.ts b/src/hooks/animations/useTransitionActiveKey.ts index 1eea4a4b9..7c0a42a84 100644 --- a/src/hooks/animations/useTransitionActiveKey.ts +++ b/src/hooks/animations/useTransitionActiveKey.ts @@ -10,7 +10,7 @@ export function useTransitionActiveKey(deps: unknown[], noAnimation?: boolean): useMemo(() => { if (!noAnimation) activeKey.current += 1; // eslint-disable-next-line react-hooks-static-deps/exhaustive-deps - }, [...deps, noAnimation]); + }, [...deps]); return activeKey.current; } diff --git a/src/lib/lovely-chart/styles/_animations.scss b/src/lib/lovely-chart/styles/_animations.scss index cf1fbb0e5..ca6275998 100644 --- a/src/lib/lovely-chart/styles/_animations.scss +++ b/src/lib/lovely-chart/styles/_animations.scss @@ -30,8 +30,8 @@ @keyframes lovely-chart--animation-fadeIn { from { - opacity: 0; transform: scale3d(0.5, 0.5, 1); + opacity: 0; } 40% { @@ -39,15 +39,15 @@ } to { - opacity: 1; transform: scale3d(1, 1, 1); + opacity: 1; } } @keyframes lovely-chart--animation-fadeOut { from { - opacity: 1; transform: scale3d(1, 1, 1); + opacity: 1; } 60% { @@ -55,8 +55,8 @@ } to { - opacity: 0; transform: scale3d(0.5, 0.5, 1); + opacity: 0; } } @@ -109,9 +109,9 @@ } .lovely-chart--state-animated { - animation-fill-mode: forwards; - animation-timing-function: ease-out; animation-duration: 200ms; + animation-timing-function: ease-out; + animation-fill-mode: forwards; &.lovely-chart--state-hidden { animation-name: lovely-chart--animation-fadeOut; diff --git a/src/lib/lovely-chart/styles/_buttons.scss b/src/lib/lovely-chart/styles/_buttons.scss index 798af4a9f..ececd2105 100644 --- a/src/lib/lovely-chart/styles/_buttons.scss +++ b/src/lib/lovely-chart/styles/_buttons.scss @@ -1,17 +1,20 @@ .lovely-chart--button { - border: 1px solid #E6ECF0; - padding: 7px 7px; - display: inline-block; - border-radius: 18px; - text-align: center; - text-decoration: none; - margin: 0 6px 8px 0; // transition: background-color 300ms ease-out, border-color 300ms ease-out; position: relative; + display: inline-block; + + margin: 0 6px 8px 0; + padding: 7px 7px; + border: 1px solid #E6ECF0; border-color: var(--text-color); - background-color: transparent; + border-radius: 18px; + color: var(--text-color); + text-align: center; + text-decoration: none; + + background-color: transparent; &.lovely-chart--state-checked { background-color: var(--text-color); @@ -22,8 +25,8 @@ } .lovely-chart--button-label { - color: #ffffff; transform: translateX(6px); + color: #ffffff; } } @@ -33,24 +36,31 @@ } .lovely-chart--button-check { - display: inline-block; position: absolute; top: 7px; left: 7px; + + display: inline-block; + width: 20px; height: 20px; + opacity: 0; + transition: opacity 300ms ease-out; &::after { + content: ''; + position: absolute; top: 50%; left: 50%; - content: ''; + width: 12px; height: 12px; - margin-left: -6px; margin-top: -6px; + margin-left: -6px; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -256 1792 1792' version='1.1'%0A%3E%3Cg transform='matrix(1,0,0,-1,7.5932203,1217.0847)' id='g3003'%3E%3Cpath d='m 1671,970 q 0,-40 -28,-68 L 919,178 783,42 Q 755,14 715,14 675,14 647,42 L 511,178 149,540 q -28,28 -28,68 0,40 28,68 l 136,136 q 28,28 68,28 40,0 68,-28 l 294,-295 656,657 q 28,28 68,28 40,0 68,-28 l 136,-136 q 28,-28 28,-68 z' style='fill:white'/%3E%3C/g%3E%3C/svg%3E"); background-size: 100%; } @@ -58,9 +68,12 @@ .lovely-chart--button-label { display: inline-block; + + padding: 0 13px; + font-weight: 300; line-height: 20px; color: inherit; - padding: 0 13px; + transition: transform 300ms ease-out, color 300ms ease-out; } diff --git a/src/lib/lovely-chart/styles/_common.scss b/src/lib/lovely-chart/styles/_common.scss index a606dee17..294d6ae11 100644 --- a/src/lib/lovely-chart/styles/_common.scss +++ b/src/lib/lovely-chart/styles/_common.scss @@ -1,11 +1,15 @@ .lovely-chart--container { + -webkit-user-select: none; + user-select: none; + + position: relative; + + overflow: hidden; + font: 300 13px '-apple-system', 'HelveticaNeue', Helvetica, Arial, sans-serif; color: #222222; - position: relative; text-align: left; - overflow: hidden; - user-select: none; - -webkit-user-select: none; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); // &.lovely-chart--state-invisible > * { @@ -38,107 +42,110 @@ @keyframes lovely-chart--animation-pie-transition-in { 0% { - clip-path: circle(80% at center calc(50% - 7.5px)); - -webkit-clip-path: circle(80% at center calc(50% - 7.5px)); transform: rotate(-360deg); + -webkit-clip-path: circle(80% at center calc(50% - 7.5px)); + clip-path: circle(80% at center calc(50% - 7.5px)); } 25% { - clip-path: circle(32% at center calc(50% - 7.5px)); - -webkit-clip-path: circle(32% at center calc(50% - 7.5px)); transform: rotate(-360deg); + -webkit-clip-path: circle(32% at center calc(50% - 7.5px)); + clip-path: circle(32% at center calc(50% - 7.5px)); } 75% { - clip-path: circle(32% at center calc(50% - 7.5px)); - -webkit-clip-path: circle(32% at center calc(50% - 7.5px)); transform: rotate(0); + -webkit-clip-path: circle(32% at center calc(50% - 7.5px)); + clip-path: circle(32% at center calc(50% - 7.5px)); } } @media (max-width: 480px) { @keyframes lovely-chart--animation-pie-transition-in { 0% { - clip-path: circle(80% at center calc(50% - 7.5px)); - -webkit-clip-path: circle(80% at center calc(50% - 7.5px)); transform: rotate(-360deg); + -webkit-clip-path: circle(80% at center calc(50% - 7.5px)); + clip-path: circle(80% at center calc(50% - 7.5px)); } 25% { - clip-path: circle(40% at center calc(50% - 7.5px)); - -webkit-clip-path: circle(40% at center calc(50% - 7.5px)); transform: rotate(-360deg); + -webkit-clip-path: circle(40% at center calc(50% - 7.5px)); + clip-path: circle(40% at center calc(50% - 7.5px)); } 75% { - clip-path: circle(40% at center calc(50% - 7.5px)); - -webkit-clip-path: circle(40% at center calc(50% - 7.5px)); transform: rotate(0); + -webkit-clip-path: circle(40% at center calc(50% - 7.5px)); + clip-path: circle(40% at center calc(50% - 7.5px)); } } } @keyframes lovely-chart--animation-pie-transition-out { 0% { - clip-path: circle(32% at center calc(50% - 7.5px)); - -webkit-clip-path: circle(32% at center calc(50% - 7.5px)); transform: rotate(360deg); + -webkit-clip-path: circle(32% at center calc(50% - 7.5px)); + clip-path: circle(32% at center calc(50% - 7.5px)); } 50% { - clip-path: circle(32% at center calc(50% - 7.5px)); - -webkit-clip-path: circle(32% at center calc(50% - 7.5px)); transform: rotate(0); + -webkit-clip-path: circle(32% at center calc(50% - 7.5px)); + clip-path: circle(32% at center calc(50% - 7.5px)); } 75% { - clip-path: circle(80% at center calc(50% - 7.5px)); - -webkit-clip-path: circle(80% at center calc(50% - 7.5px)); transform: rotate(0); + -webkit-clip-path: circle(80% at center calc(50% - 7.5px)); + clip-path: circle(80% at center calc(50% - 7.5px)); } } @media (max-width: 480px) { @keyframes lovely-chart--animation-pie-transition-out { 0% { - clip-path: circle(40% at center calc(50% - 7.5px)); - -webkit-clip-path: circle(40% at center calc(50% - 7.5px)); transform: rotate(360deg); + -webkit-clip-path: circle(40% at center calc(50% - 7.5px)); + clip-path: circle(40% at center calc(50% - 7.5px)); } 50% { - clip-path: circle(40% at center calc(50% - 7.5px)); - -webkit-clip-path: circle(40% at center calc(50% - 7.5px)); transform: rotate(0); + -webkit-clip-path: circle(40% at center calc(50% - 7.5px)); + clip-path: circle(40% at center calc(50% - 7.5px)); } 75% { - clip-path: circle(80% at center calc(50% - 7.5px)); - -webkit-clip-path: circle(80% at center calc(50% - 7.5px)); transform: rotate(0); + -webkit-clip-path: circle(80% at center calc(50% - 7.5px)); + clip-path: circle(80% at center calc(50% - 7.5px)); } } } .lovely-chart--spinner { + position: relative; width: 16px; height: 16px; - position: relative; + + &::after { + content: ''; + + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='512px' height='512px' viewBox='0 0 16 16'%3E%3Cg%3E%3Cpath fill='%23D2D5D7' d='M9.9 0.2l-0.2 1c3 0.8 5.3 3.5 5.3 6.8 0 3.9-3.1 7-7 7s-7-3.1-7-7c0-3.3 2.3-6 5.3-6.8l-0.2-1c-3.5 0.9-6.1 4.1-6.1 7.8 0 4.4 3.6 8 8 8s8-3.6 8-8c0-3.7-2.6-6.9-6.1-7.8z' data-original='%23444444' class='active-path' data-old_color='%23444444'/%3E%3C/g%3E%3C/svg%3E%0A"); + background-size: 100%; + + animation: lovely-chart--animation-spin 1s infinite linear; + } &.lovely-chart--size-big { width: 64px; height: 64px; } - - &::after { - content: ''; - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='512px' height='512px' viewBox='0 0 16 16'%3E%3Cg%3E%3Cpath fill='%23D2D5D7' d='M9.9 0.2l-0.2 1c3 0.8 5.3 3.5 5.3 6.8 0 3.9-3.1 7-7 7s-7-3.1-7-7c0-3.3 2.3-6 5.3-6.8l-0.2-1c-3.5 0.9-6.1 4.1-6.1 7.8 0 4.4 3.6 8 8 8s8-3.6 8-8c0-3.7-2.6-6.9-6.1-7.8z' data-original='%23444444' class='active-path' data-old_color='%23444444'/%3E%3C/g%3E%3C/svg%3E%0A"); - background-size: 100%; - animation: lovely-chart--animation-spin 1s infinite linear; - } } diff --git a/src/lib/lovely-chart/styles/_header.scss b/src/lib/lovely-chart/styles/_header.scss index 34a568e61..8abc97f5b 100644 --- a/src/lib/lovely-chart/styles/_header.scss +++ b/src/lib/lovely-chart/styles/_header.scss @@ -1,23 +1,23 @@ .lovely-chart--header { height: 30px; - font-weight: bold; margin: 0 10px; + font-weight: bold; &-title, &-caption { - color: var(--text-color); line-height: 30px; + color: var(--text-color); // transition: color 300ms ease; &.lovely-chart--state-hidden { - opacity: 0; pointer-events: none; + opacity: 0; } } &-title { - font-size: 16px; float: left; margin: 0 1rem; + font-size: 16px; text-transform: lowercase; &:first-letter { @@ -26,24 +26,28 @@ } &-caption { + float: right; font-size: 12px; text-align: right; - float: right; } &-zoom-out-control { + cursor: var(--custom-cursor, pointer); + display: flex; align-items: center; + color: var(--zoom-out-text); - cursor: var(--custom-cursor, pointer); text-transform: none; &::before { content: ''; + display: inline-block; - margin-right: 6px; + width: 16px; height: 16px; + margin-right: 6px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' id='Capa_1' x='0px' y='0px' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512;' xml:space='preserve' width='512px' height='512px'%3E%3Cg%3E%3Cg%3E%3Cpath d='M497.938,430.063l-112-112c-0.367-0.367-0.805-0.613-1.18-0.965C404.438,285.332,416,248.035,416,208 C416,93.313,322.695,0,208,0S0,93.313,0,208s93.305,208,208,208c40.035,0,77.332-11.563,109.098-31.242 c0.354,0.375,0.598,0.813,0.965,1.18l112,112C439.43,507.313,451.719,512,464,512c12.281,0,24.57-4.688,33.938-14.063 C516.688,479.203,516.688,448.797,497.938,430.063z M64,208c0-79.406,64.602-144,144-144s144,64.594,144,144 c0,79.406-64.602,144-144,144S64,287.406,64,208z' data-original='%23000000' class='active-path' data-old_color='%232d98e6' fill='%232d98e6'/%3E%3Cpath d='M272,176H144c-17.672,0-32,14.328-32,32s14.328,32,32,32h128c17.672,0,32-14.328,32-32S289.672,176,272,176z' data-original='%23000000' class='active-path' data-old_color='%232d98e6' fill='%232d98e6'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); background-repeat: no-repeat; diff --git a/src/lib/lovely-chart/styles/_minimap.scss b/src/lib/lovely-chart/styles/_minimap.scss index 0baa9e662..0df4f4716 100644 --- a/src/lib/lovely-chart/styles/_minimap.scss +++ b/src/lib/lovely-chart/styles/_minimap.scss @@ -1,9 +1,13 @@ .lovely-chart--minimap { position: relative; + + overflow: hidden; + margin: 0 10px 16px 10px; border-radius: 6px; - overflow: hidden; + opacity: 1; + transition: opacity 400ms ease; &.lovely-chart--state-hidden { @@ -16,14 +20,17 @@ } .lovely-chart--minimap-ruler { + -webkit-user-select: none; + user-select: none; + position: absolute; top: 0; left: 0; + width: 100%; height: 100%; + white-space: nowrap; - user-select: none; - -webkit-user-select: none; } .lovely-chart--minimap-mask { @@ -38,12 +45,16 @@ &::after { content: ''; - display: block; + position: absolute; top: 0; - bottom: 0; right: -5px; + bottom: 0; + + display: block; + width: 5px; + background: var(--minimap-mask); // transition: background-color 300ms ease-out; } @@ -52,55 +63,67 @@ .lovely-chart--minimap-slider { display: inline-block; + box-sizing: border-box; width: 33.3%; - height: 100%; min-width: 16px; + height: 100%; &-inner { - box-sizing: border-box; - border-top: 1px solid var(--minimap-slider); - border-bottom: 1px solid var(--minimap-slider); + cursor: var(--custom-cursor, grab); + float: left; + + box-sizing: border-box; width: calc(100% - 16px); height: 100%; + border-top: 1px solid var(--minimap-slider); + border-bottom: 1px solid var(--minimap-slider); + background: transparent !important; - cursor: var(--custom-cursor, grab); // transition: border-color 300ms ease-out; } &-handle { + cursor: var(--custom-cursor, ew-resize); + + position: relative; + width: 8px; height: 100%; - position: relative; + background: var(--minimap-mask); - cursor: var(--custom-cursor, ew-resize); // transition: background-color 300ms ease-out; &::before, &::after { content: ''; - display: block; position: absolute; + display: block; } &::before { - background: var(--minimap-slider); top: 0; - bottom: 0; right: 0; + bottom: 0; left: 0; + + background: var(--minimap-slider); // transition: background-color 300ms ease-out; } &-pin { - display: block; + pointer-events: none; + position: absolute; - background: #ffffff; - width: 2px; - height: 8px; top: calc(50% - 4px); left: calc(50% - 1px); - pointer-events: none; + + display: block; + + width: 2px; + height: 8px; + + background: #ffffff; } &:first-child { @@ -123,19 +146,19 @@ @media (pointer: coarse) { &:after { + z-index: 1; top: -10px; bottom: -10px; - z-index: 1; } &:first-child:after { - left: -26px; right: 0; + left: -26px; } &:last-child:after { - left: 0; right: -26px; + left: 0; } } } diff --git a/src/lib/lovely-chart/styles/_tools.scss b/src/lib/lovely-chart/styles/_tools.scss index a404adebe..472af46fa 100644 --- a/src/lib/lovely-chart/styles/_tools.scss +++ b/src/lib/lovely-chart/styles/_tools.scss @@ -1,4 +1,5 @@ .lovely-chart--tools { + padding: 0 10px 16px 10px; opacity: 1; transition: opacity 400ms ease; @@ -9,6 +10,4 @@ &.lovely-chart--state-transparent { opacity: 0; } - - padding: 0 10px 16px 10px; } diff --git a/src/lib/lovely-chart/styles/_tooltip.scss b/src/lib/lovely-chart/styles/_tooltip.scss index 3bcb0d09a..08c842f6d 100644 --- a/src/lib/lovely-chart/styles/_tooltip.scss +++ b/src/lib/lovely-chart/styles/_tooltip.scss @@ -5,27 +5,34 @@ } .lovely-chart--tooltip-balloon { + pointer-events: none; + cursor: var(--custom-cursor, pointer); + position: absolute; top: 5px; left: 0; + + overflow: auto; + min-width: 130px; max-height: 320px; - overflow: auto; - -webkit-overflow-scrolling: touch; - border-radius: 8px; padding: 8px 10px; - white-space: nowrap; - background: var(--tooltip-background); + border-radius: 8px; + color: var(--text-color); - box-shadow: 0 1px 2px 1px rgba(211, 211, 211, 0.8); + white-space: nowrap; + opacity: 0; + background: var(--tooltip-background); + box-shadow: 0 1px 2px 1px rgba(211, 211, 211, 0.8); + transition: opacity 200ms ease-out; - cursor: var(--custom-cursor, pointer); - pointer-events: none; + + -webkit-overflow-scrolling: touch; &.lovely-chart--state-shown { - opacity: 1; pointer-events: auto; + opacity: 1; } &.lovely-chart--state-inactive { @@ -51,22 +58,26 @@ } .lovely-chart--tooltip-title { - font-size: 12px; - font-weight: bold; position: relative; padding-bottom: 5px; + font-size: 12px; + font-weight: bold; &::after { content: ''; - display: block; + position: absolute; - right: 0; top: 0; + right: 0; + + display: block; + width: 12px; height: 12px; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' id='Capa_1' x='0px' y='0px' width='512px' height='512px' viewBox='0 0 451.846 451.847' style='enable-background:new 0 0 451.846 451.847;' xml:space='preserve' class=''%3E%3Cg%3E%3Cg%3E%3Cpath d='M345.441,248.292L151.154,442.573c-12.359,12.365-32.397,12.365-44.75,0c-12.354-12.354-12.354-32.391,0-44.744 L278.318,225.92L106.409,54.017c-12.354-12.359-12.354-32.394,0-44.748c12.354-12.359,32.391-12.359,44.75,0l194.287,194.284 c6.177,6.18,9.262,14.271,9.262,22.366C354.708,234.018,351.617,242.115,345.441,248.292z' data-original='%23000000' class='active-path' data-old_color='%23757B84' fill='%23D2D5D7'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); - background-position: center; background-repeat: no-repeat; + background-position: center; background-size: 75%; } } @@ -78,16 +89,18 @@ .lovely-chart--tooltip-dataset-value { float: right; - font-weight: bold; margin-left: 5px; + font-weight: bold; } } .lovely-chart--percentage-title { display: inline-block; - font-weight: bold; + width: 35px; margin-right: 5px; + + font-weight: bold; text-align: right; &.lovely-chart--transition ~ .lovely-chart--dataset-title { diff --git a/src/styles/_common.scss b/src/styles/_common.scss index 6c226b097..fe9eed1d4 100644 --- a/src/styles/_common.scss +++ b/src/styles/_common.scss @@ -2,16 +2,16 @@ // Common styles for all media-type components across the app. .media-inner { - position: relative; user-select: none; + position: relative; video.full-media, img.full-media, img.thumbnail, canvas.thumbnail { + display: block; width: 100%; height: 100%; - display: block; object-fit: cover; } @@ -31,9 +31,9 @@ left: 0; &.with-blurred-bg { - border-radius: 0 !important; left: 50%; transform: translateX(-50%); + border-radius: 0 !important; } } @@ -50,26 +50,31 @@ --_color: var(--color-primary); position: absolute; + right: 0; bottom: 0; left: 0; - right: 0; - height: 0.25rem; - background-color: rgba(255 255 255 / 0.3); - .theme-dark & { - --_color: white; - } + height: 0.25rem; + + background-color: rgba(255 255 255 / 0.3); &::before { content: ""; + position: absolute; top: 0; left: 0; + width: var(--_progress); height: 100%; - background-color: var(--_color); border-top-right-radius: 0.125rem; border-bottom-right-radius: 0.125; + + background-color: var(--_color); + } + + .theme-dark & { + --_color: white; } } } @@ -78,28 +83,30 @@ position: absolute; transform: rotate(-45deg); + &::before, + &::after { + content: ""; + position: absolute; + top: 0; + left: 0; + } + + &::before { + transform: rotate(90deg); + } + &, &::before, &::after { width: 1.125rem; height: 0.125rem; border-radius: 0.125rem; + background-color: var(--color-text-secondary); + transition: transform var(--slide-transition); } - &::before, - &::after { - position: absolute; - left: 0; - top: 0; - content: ""; - } - - &::before { - transform: rotate(90deg); - } - &.no-transition { &, &::before, @@ -128,19 +135,23 @@ // Used by ChatList and ContactList components .chat-list { - background: var(--color-background); - height: 100%; - padding: 0.5rem; - - @include mixins.adapt-padding-to-scrollbar(0.5rem); - overflow-x: hidden; overflow-y: scroll; + height: 100%; + padding: 0.5rem; + + background: var(--color-background); + + /* stylelint-disable-next-line no-duplicate-selectors */ + & { + @include mixins.adapt-padding-to-scrollbar(0.5rem); + } + &.forum-panel-open { .info { - opacity: 0; transform: translateX(-20%); + opacity: 0; } .Chat[dir="rtl"] .info { @@ -152,19 +163,13 @@ } } - @media (min-width: 600px) { - &.forum-panel-open .selected-forum .Avatar { - transform: none; - } - } - .scroll-container { position: relative; } .no-results { - color: var(--color-text-meta); margin-top: 2rem; + color: var(--color-text-meta); text-align: center; } @@ -182,15 +187,10 @@ } } - @media (max-width: 600px) { - padding-left: 0; - padding-right: 0; - } - body.is-ios &, body.is-android & { - padding-left: 0; padding-right: 0; + padding-left: 0; .ListItem::after { opacity: 1; @@ -203,6 +203,17 @@ } } } + + @media (min-width: 600px) { + &.forum-panel-open .selected-forum .Avatar { + transform: none; + } + } + + @media (max-width: 600px) { + padding-right: 0; + padding-left: 0; + } } // Used by Avatar and ProfilePhoto components @@ -227,8 +238,8 @@ .with-story-ribbon { --story-ribbon-height: 5.5rem; - height: calc(100% - var(--extra-height, 0px) + var(--story-ribbon-height)) !important; transform: translateY(calc(var(--story-ribbon-height) * -1)); + height: calc(100% - var(--extra-height, 0px) + var(--story-ribbon-height)) !important; &.open, &.closing { transition: transform 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94); diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss index 62a1e0a3a..d0607d5ab 100644 --- a/src/styles/_fonts.scss +++ b/src/styles/_fonts.scss @@ -2,8 +2,8 @@ $icons-font: "icons"; @font-face { font-family: $icons-font; - src: url("./icons.woff2") format("woff2"), url("./icons.woff") format("woff"); font-weight: normal; font-style: normal; font-display: block; + src: url("./icons.woff2") format("woff2"), url("./icons.woff") format("woff"); } diff --git a/src/styles/_forms.scss b/src/styles/_forms.scss index cc3f6d8d5..11179bd4a 100644 --- a/src/styles/_forms.scss +++ b/src/styles/_forms.scss @@ -2,10 +2,13 @@ position: absolute; right: 0.75rem; bottom: -0.5625rem; + padding: 0 0.25rem; border-radius: 0.25rem; - color: var(--color-text-secondary); + font-size: 0.75rem; + color: var(--color-text-secondary); + background: var(--color-background); } @@ -14,33 +17,41 @@ margin-bottom: 1.125rem; label { - display: block; + pointer-events: none; + cursor: var(--custom-cursor, text); + position: absolute; - left: 1rem; top: 0.6875rem; + left: 1rem; + transform-origin: left center; + + display: block; + padding: 0 0.3125rem; - background-color: var(--color-background); + font-size: 1rem; font-weight: var(--font-weight-normal); color: var(--color-placeholders); - transition: transform 0.15s ease-out, color 0.15s ease-out; - cursor: var(--custom-cursor, text); - pointer-events: none; - transform-origin: left center; white-space: nowrap; + + background-color: var(--color-background); + + transition: transform 0.15s ease-out, color 0.15s ease-out; } &.with-arrow { &::after { content: ""; + position: absolute; - height: 0.75rem; - width: 0.75rem; - border-left: 1px var(--color-text-secondary) solid; - border-bottom: 1px var(--color-text-secondary) solid; - transform: rotate(-45deg); - right: 2rem; top: 1rem; + right: 2rem; + transform: rotate(-45deg); + + width: 0.75rem; + height: 0.75rem; + border-bottom: 1px var(--color-text-secondary) solid; + border-left: 1px var(--color-text-secondary) solid; } } @@ -70,8 +81,8 @@ } &.disabled { - opacity: 0.5; pointer-events: none; + opacity: 0.5; } &[dir="rtl"] { @@ -80,16 +91,16 @@ } label { - left: auto; right: 0.75rem; + left: auto; } &.with-arrow { &::after { - border-left: none; - border-right: 1px var(--color-text-secondary) solid; right: auto; left: 2rem; + border-right: 1px var(--color-text-secondary) solid; + border-left: none; } } @@ -105,21 +116,44 @@ .form-control { --border-width: 1px; + display: block; + width: 100%; height: 3rem; padding: calc(0.75rem - var(--border-width)) calc(1.1875rem - var(--border-width)) 0.6875rem; border: var(--border-width) solid var(--color-borders-input); border-radius: var(--border-radius-default); - color: var(--color-text); - background-color: var(--color-background); - outline: none; - transition: border-color 0.15s ease; - overflow-wrap: anywhere; - -webkit-appearance: none; font-size: 1rem; line-height: 1.25rem; + color: var(--color-text); + overflow-wrap: anywhere; + + -webkit-appearance: none; + background-color: var(--color-background); + outline: none; + + transition: border-color 0.15s ease; + + // Hide hint for Safari password strength meter + &::-webkit-strong-password-auto-fill-button { + position: absolute; + + overflow: hidden !important; + + width: 0 !important; + min-width: 0 !important; + max-width: 0 !important; + + opacity: 0; + clip: rect(0, 0, 0, 0); + } + + &::-ms-clear, + &::-ms-reveal { + display: none; + } &[dir] { text-align: initial; @@ -166,24 +200,9 @@ &:-webkit-autofill-strong-password-viewable, &:-webkit-autofill-and-obscured { box-shadow: inset 0 0 0 10rem var(--color-background); + -webkit-text-fill-color: var(--color-text); } - - // Hide hint for Safari password strength meter - &::-webkit-strong-password-auto-fill-button { - opacity: 0; - width: 0 !important; - overflow: hidden !important; - max-width: 0 !important; - min-width: 0 !important; - clip: rect(0, 0, 0, 0); - position: absolute; - } - - &::-ms-clear, - &::-ms-reveal { - display: none; - } } select.form-control { @@ -194,10 +213,13 @@ select.form-control { textarea.form-control { resize: none; + overflow: hidden; - line-height: 1.3125rem; + padding-top: calc(0.8125rem - var(--border-width)); padding-bottom: calc(1rem - var(--border-width)); + + line-height: 1.3125rem; } .input-group.password-input { @@ -208,20 +230,24 @@ textarea.form-control { } .toggle-password { + cursor: var(--custom-cursor, pointer); + position: absolute; top: 0; right: 0; - width: 3rem; - height: 3rem; + display: flex; align-items: center; justify-content: center; - cursor: var(--custom-cursor, pointer); - outline: none !important; - color: var(--color-text-secondary); - opacity: 0.7; + width: 3rem; + height: 3rem; + font-size: 1.5rem; + color: var(--color-text-secondary); + + opacity: 0.7; + outline: none !important; &:hover, &:focus { @@ -231,13 +257,13 @@ textarea.form-control { &[dir="rtl"] { .form-control { - padding-left: 3.375rem; padding-right: calc(0.9rem - var(--border-width)); + padding-left: 3.375rem; } .toggle-password { - left: 0; right: auto; + left: 0; } } } diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss index e0cd079f2..79d8f2c96 100644 --- a/src/styles/_mixins.scss +++ b/src/styles/_mixins.scss @@ -79,24 +79,24 @@ @mixin reset-range() { input[type="range"] { - -webkit-appearance: none; display: block; + width: 100%; height: 0.75rem; margin-bottom: 0.5rem; + + -webkit-appearance: none; background: transparent; - &:focus { - outline: none; - } - &::-ms-track { - width: 100%; cursor: var(--custom-cursor, pointer); - background: transparent; + width: 100%; border-color: transparent; + color: transparent; + + background: transparent; } &::-webkit-slider-thumb { @@ -114,51 +114,64 @@ &::-moz-range-track, &::-moz-range-progress { cursor: var(--custom-cursor, pointer); } + + &:focus { + outline: none; + } } } @mixin header-pane { position: absolute; top: 0; + transform: translateY(-100%); + width: 100%; height: 2.875rem; - transform: translateY(-100%); - transition: transform var(--slide-transition); - padding-top: 0.375rem; + padding-right: max(0.5rem, env(safe-area-inset-right)); padding-bottom: 0.375rem; padding-left: max(0.75rem, env(safe-area-inset-left)); - padding-right: max(0.5rem, env(safe-area-inset-right)); + background-color: var(--color-background); + transition: transform var(--slide-transition); + &::before { content: ""; - display: block; + position: absolute; top: -0.1875rem; - left: 0; right: 0; + left: 0; + + display: block; + height: 0.125rem; + box-shadow: 0 0.125rem 0.125rem var(--color-light-shadow); } // Some panels might unmount without animation, so we provide same background above panel to make it less noticeable &::after { content: ""; + position: absolute; - top: -100%; - left: 0; - right: 0; - height: inherit; - background-color: inherit; z-index: -1; + top: -100%; + right: 0; + left: 0; + + height: inherit; + + background-color: inherit; } } @mixin side-panel-section { + border-bottom: 0.625rem solid var(--color-background-secondary); background-color: var(--color-background); box-shadow: inset 0 -0.0625rem 0 0 var(--color-background-secondary-accent); - border-bottom: 0.625rem solid var(--color-background-secondary); &:last-child { border-bottom: none; diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index cb0e3e799..ea79ee85e 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -306,6 +306,16 @@ $color-message-story-mention-to: #74bcff; --middle-header-panes-height: 0px; + body.is-ios { + --layer-transition: 650ms cubic-bezier(0.22, 1, 0.36, 1); + --layer-transition-behind: 650ms cubic-bezier(0.33, 1, 0.68, 1); + --slide-transition: 450ms cubic-bezier(0.25, 1, 0.5, 1); + } + + body.is-android { + --slide-transition: 350ms cubic-bezier(0.16, 1, 0.3, 1); + } + @media (min-width: 1276px) and (max-width: 1920px) { --right-column-width: 25vw; } @@ -319,14 +329,4 @@ $color-message-story-mention-to: #74bcff; --symbol-menu-width: 100vw; --symbol-menu-height: 17.6875rem; } - - body.is-ios { - --layer-transition: 650ms cubic-bezier(0.22, 1, 0.36, 1); - --layer-transition-behind: 650ms cubic-bezier(0.33, 1, 0.68, 1); - --slide-transition: 450ms cubic-bezier(0.25, 1, 0.5, 1); - } - - body.is-android { - --slide-transition: 350ms cubic-bezier(0.16, 1, 0.3, 1); - } } diff --git a/src/styles/icons.woff b/src/styles/icons.woff index c92f0ac3f61e9b73a88259a0c4b4f31fc55a0166..c0bd67fb6b0b2ea9b10bdb4f791ce6728ced69ff 100644 GIT binary patch delta 28169 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 AUjP6A delta 28182 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 N094-$p|dr3?+P5hj&%S4 diff --git a/src/styles/icons.woff2 b/src/styles/icons.woff2 index ff82ee93f6f78e83f1ef5af55cd945a6c3317e61..fdab727680f4bbd3b1f2efdaaf7f9c5a68d7b088 100644 GIT binary patch delta 28011 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 delta 28012 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 diff --git a/src/styles/index.scss b/src/styles/index.scss index 518a012f0..ba18a31e0 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -12,22 +12,6 @@ html, body { - width: 100%; - height: 100%; - background-color: var(--color-background); - font-family: var(--font-family); - margin: 0; - padding: 0; - font-size: 16px; - color: var(--color-text); - font-weight: var(--font-weight-normal); - line-height: 1.5; - text-align: left; - overflow: hidden; - overscroll-behavior: none; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - user-select: none; --font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Apple Color Emoji", "Segoe UI", Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; @@ -37,17 +21,39 @@ body { --font-family-condensed: "Roboto Condensed", "Roboto", "Helvetica Neue", sans-serif; --font-weight-semibold: 500; // Note: Roboto is naturally quite bold, so 500 works well as default + user-select: none; + + overflow: hidden; + overscroll-behavior: none; + + width: 100%; + height: 100%; + margin: 0; + padding: 0; + + font-family: var(--font-family); + font-size: 16px; + font-weight: var(--font-weight-normal); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + line-height: 1.5; + color: var(--color-text); + text-align: left; + + background-color: var(--color-background); + @media (max-width: 600px) { height: calc(var(--vh, 1vh) * 100); } } noscript { - width: 100%; - height: 100%; display: grid; align-content: center; justify-items: center; + + width: 100%; + height: 100%; .nojs-video { pointer-events: none; &::-webkit-media-controls { @@ -90,11 +96,13 @@ body.is-electron { body.cursor-grabbing { --custom-cursor: grabbing; + cursor: grabbing !important; } body.cursor-ew-resize { --custom-cursor: ew-resize; + cursor: ew-resize !important; } @@ -102,21 +110,22 @@ body.cursor-ew-resize { .full-height { height: 100%; - @media (max-width: 600px) { - height: calc(var(--vh, 1vh) * 100); - } - &.is-auth { background: var(--color-background); } + + @media (max-width: 600px) { + height: calc(var(--vh, 1vh) * 100); + } } #middle-column-portals, #portals { position: absolute; top: 0; - left: 0; right: 0; + left: 0; + height: 0; } @@ -153,26 +162,30 @@ body.cursor-ew-resize { */ .visually-hidden { position: absolute !important; + z-index: -1; + + overflow: hidden; + width: 0; height: 0; - overflow: hidden; + clip: rect(0, 0, 0, 0); - z-index: -1; } .custom-scroll, .custom-scroll-x { - scrollbar-width: thin; + // Fix scroll lock on iOS + pointer-events: auto; scrollbar-color: transparent transparent; + scrollbar-width: thin; + transition: scrollbar-color 0.3s ease; -webkit-overflow-scrolling: touch; - // Fix scroll lock on iOS - pointer-events: auto; &::-webkit-scrollbar-thumb { - background-color: transparent; border-radius: 0.375rem; + background-color: transparent; // `box-shadow` prevents repaint on macOS when hovering out of scrollable container box-shadow: 0 0 1px rgba(255, 255, 255, 0.01); } @@ -211,25 +224,28 @@ body:not(.is-ios) { } .emoji-small { - background: no-repeat; - background-size: var(--emoji-size); - color: transparent; + overflow: hidden; display: inline-block; + flex-shrink: 0; + width: var(--emoji-size); height: var(--emoji-size); margin-inline-end: 1px; - overflow: hidden; - flex-shrink: 0; + + color: transparent; + + background: no-repeat; + background-size: var(--emoji-size); &::selection { - background-color: var(--color-selection-highlight-emoji); color: transparent; + background-color: var(--color-selection-highlight-emoji); } } .div-button { - outline: none !important; cursor: var(--custom-cursor, pointer); + outline: none !important; } .opacity-transition { @@ -262,31 +278,38 @@ body:not(.is-ios) { } .protector { + user-select: none; + position: absolute; - left: 0; + z-index: 2; top: 0; right: 0; bottom: 0; - z-index: 2; - user-select: none; + left: 0; + -webkit-touch-callout: none; } .for-ios-autocapitalization-fix { position: fixed; - font-size: 16px; - opacity: 0; - bottom: 1rem; z-index: -1; + bottom: 1rem; + + font-size: 16px; + + opacity: 0; } .emoji-test-element { - opacity: 0; - display: inline; - white-space: nowrap; position: absolute; bottom: 0; left: 0; + + display: inline; + + white-space: nowrap; + + opacity: 0; } .star-currency-icon { @@ -296,9 +319,9 @@ body:not(.is-ios) { // Increase specificity to override the default icon style .star-amount-icon.star-amount-icon { - line-height: inherit; // Vertical centring margin-inline-start: 0.375em; // Prevent sticking to the text without using `white-space: pre` margin-inline-end: 0.2em; // Prevent sticking to the text without using `white-space: pre` + line-height: inherit; // Vertical centring } .shared-canvas-container { @@ -307,13 +330,15 @@ body:not(.is-ios) { .shared-canvas, .absolute-video-container { + pointer-events: none; + position: absolute; + z-index: 1; top: 0; left: 0; - z-index: 1; + width: 100%; height: 100%; - pointer-events: none; } @keyframes grow-icon { diff --git a/src/styles/print.scss b/src/styles/print.scss index 966edf40d..ab303fb39 100644 --- a/src/styles/print.scss +++ b/src/styles/print.scss @@ -32,28 +32,30 @@ .messages-layout, .Transition, .Transition > .Transition_slide { - height: auto !important; + position: static !important; + transform: none !important; + overflow: visible !important; display: block !important; - position: static !important; - margin: 0 !important; - padding: 0 !important; + width: 100% !important; max-width: 100% !important; - transform: none !important; + height: auto !important; + margin: 0 !important; + padding: 0 !important; } .messages-container { - max-width: 100rem !important; width: 100% !important; + max-width: 100rem !important; } .MessageList .sticky-date > span, .MessageList .local-action-message > span, .MessageList .ActionMessage > span, .MessageList .empty > span { - background: var(--color-background-own) !important; color: var(--color-text) !important; + background: var(--color-background-own) !important; } .hide-on-print { diff --git a/src/styles/reboot.css b/src/styles/reboot.css index fe20e9dc3..56b21ad5d 100644 --- a/src/styles/reboot.css +++ b/src/styles/reboot.css @@ -10,6 +10,7 @@ html { line-height: 1.15; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; + -ms-overflow-style: scrollbar; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } @@ -41,9 +42,9 @@ body, blockquote { } hr { + overflow: visible; box-sizing: content-box; height: 0; - overflow: visible; } h1, @@ -59,10 +60,10 @@ h6 { abbr[title], abbr[data-original-title] { - text-decoration: underline; - text-decoration: underline dotted; cursor: help; border-bottom: 0; + text-decoration: underline; + text-decoration: underline dotted; } address { @@ -129,6 +130,7 @@ a { color: var(--color-links); text-decoration: none; background-color: transparent; + -webkit-text-decoration-skip: objects; } @@ -158,15 +160,16 @@ samp { } pre { + overflow: auto; margin-top: 0; margin-bottom: 1rem; - overflow: auto; + -ms-overflow-style: scrollbar; } img { - vertical-align: middle; border-style: none; + vertical-align: middle; } svg:not(:root) { @@ -190,11 +193,13 @@ table { } caption { + caption-side: bottom; + padding-top: 0.75rem; padding-bottom: 0.75rem; + color: #868e96; text-align: left; - caption-side: bottom; } th { @@ -256,23 +261,25 @@ input[type="month"] { } textarea { - overflow: auto; resize: vertical; + overflow: auto; } fieldset { min-width: 0; - padding: 0; margin: 0; + padding: 0; border: 0; } legend { display: block; + width: 100%; max-width: 100%; - padding: 0; margin-bottom: 0.5rem; + padding: 0; + font-size: 1.5rem; line-height: inherit; color: inherit; @@ -289,8 +296,8 @@ progress { } [type="search"] { - outline-offset: -2px; -webkit-appearance: none; + outline-offset: -2px; } [type="search"]::-webkit-search-cancel-button, diff --git a/tsconfig.json b/tsconfig.json index 02554afdf..a3592ac6b 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -31,7 +31,7 @@ "webpack-electron.config.ts", "babel.config.js", "eslint.config.mjs", - ".fantasticonrc.js", + ".fantasticonrc.cjs", "playwright.config.ts", "jest.config.js", ".github/workflows/*.js"