From 50c3614fee0555da1a6c96035317a71bad893a6d Mon Sep 17 00:00:00 2001 From: Alexander Zinchuk Date: Sun, 20 Feb 2022 13:39:06 +0200 Subject: [PATCH] [Refactoring] More stylelint constraints; Update browserlist (#1708) --- .browserslistrc | 2 +- .eslintignore | 7 +- .eslintrc | 7 +- .stylelintrc.json | 25 +- package-lock.json | 2037 +++++++++++++++++ package.json | 3 + plugins/wholePixel.js | 82 + src/components/auth/Auth.scss | 21 +- src/components/auth/CountryCodeInput.scss | 11 +- src/components/calls/group/GroupCall.scss | 29 +- .../calls/group/GroupCallParticipant.scss | 16 +- .../calls/group/GroupCallTopPane.scss | 7 +- src/components/common/Audio.scss | 50 +- src/components/common/Avatar.scss | 24 +- src/components/common/CalendarModal.scss | 12 +- src/components/common/DeleteChatModal.scss | 6 +- src/components/common/DotAnimation.scss | 6 +- src/components/common/EmbeddedMessage.scss | 36 +- src/components/common/File.scss | 32 +- src/components/common/LastMessageMeta.scss | 12 +- src/components/common/Media.scss | 12 +- .../common/MessageOutgoingStatus.scss | 6 +- src/components/common/NothingFound.scss | 2 +- src/components/common/PickerSelectedItem.scss | 20 +- src/components/common/ProfileInfo.scss | 37 +- src/components/common/StickerButton.scss | 10 +- src/components/common/WebLink.scss | 10 +- src/components/left/LeftColumn.scss | 4 +- src/components/left/NewChatButton.scss | 14 +- src/components/left/main/Badge.scss | 17 +- src/components/left/main/Chat.scss | 50 +- src/components/left/main/EmptyFolder.scss | 10 +- src/components/left/main/LeftMain.scss | 6 +- src/components/left/main/LeftMainHeader.scss | 20 +- src/components/left/search/ChatMessage.scss | 21 +- src/components/left/search/DateSuggest.scss | 13 +- src/components/left/search/LeftSearch.scss | 54 +- .../left/search/RecentContacts.scss | 4 +- src/components/left/settings/Settings.scss | 47 +- .../settings/SettingsGeneralBackground.scss | 4 +- .../SettingsGeneralBackgroundColor.scss | 9 +- .../left/settings/SettingsStickerSet.scss | 8 +- .../left/settings/WallpaperTile.scss | 7 +- .../settings/folders/SettingsFolders.scss | 6 +- .../folders/SettingsFoldersChatsPicker.scss | 2 +- src/components/main/Main.scss | 8 +- src/components/mediaViewer/MediaViewer.scss | 61 +- .../mediaViewer/MediaViewerActions.scss | 4 +- .../mediaViewer/MediaViewerContent.scss | 2 +- .../mediaViewer/MediaViewerFooter.scss | 32 +- src/components/mediaViewer/PanZoom.scss | 2 +- src/components/mediaViewer/SenderInfo.scss | 6 +- src/components/mediaViewer/VideoPlayer.scss | 4 +- .../mediaViewer/VideoPlayerControls.scss | 24 +- src/components/mediaViewer/ZoomControls.scss | 24 +- src/components/middle/AudioPlayer.scss | 38 +- src/components/middle/ContactGreeting.scss | 4 +- .../middle/EmojiInteractionAnimation.scss | 6 +- src/components/middle/MessageList.scss | 50 +- .../middle/MessageSelectToolbar.scss | 6 +- src/components/middle/MiddleColumn.scss | 68 +- src/components/middle/MiddleHeader.scss | 78 +- src/components/middle/MobileSearch.scss | 23 +- src/components/middle/NoMessages.scss | 16 +- src/components/middle/ScrollDownButton.scss | 24 +- .../middle/composer/AttachmentModal.scss | 18 +- .../middle/composer/BotCommand.scss | 2 +- .../middle/composer/BotKeyboardMenu.scss | 6 +- src/components/middle/composer/Composer.scss | 127 +- .../middle/composer/DropTarget.scss | 22 +- .../middle/composer/EmojiButton.scss | 2 +- .../middle/composer/EmojiPicker.scss | 2 +- .../middle/composer/EmojiTooltip.scss | 4 +- .../middle/composer/InlineBotTooltip.scss | 12 +- .../middle/composer/MentionTooltip.scss | 6 +- src/components/middle/composer/PollModal.scss | 11 +- .../middle/composer/SendAsMenu.scss | 3 +- .../middle/composer/StickerPicker.scss | 2 +- .../middle/composer/SymbolMenu.scss | 38 +- .../middle/composer/TextFormatter.scss | 21 +- .../middle/composer/WebPagePreview.scss | 10 +- .../composer/inlineResults/BaseResult.scss | 8 +- .../composer/inlineResults/StickerResult.scss | 6 +- src/components/middle/message/Album.scss | 10 +- .../middle/message/CommentButton.scss | 56 +- src/components/middle/message/Contact.scss | 2 +- .../middle/message/InlineButtons.scss | 16 +- src/components/middle/message/Invoice.scss | 7 +- src/components/middle/message/Message.scss | 58 +- .../middle/message/MessageContextMenu.scss | 4 +- .../middle/message/MessageMeta.scss | 32 +- src/components/middle/message/Poll.scss | 22 +- src/components/middle/message/PollOption.scss | 35 +- src/components/middle/message/RoundVideo.scss | 2 +- .../middle/message/SponsoredMessage.scss | 6 +- src/components/middle/message/WebPage.scss | 20 +- .../middle/message/_message-content.scss | 170 +- src/components/payment/CardInput.scss | 2 +- src/components/payment/Checkout.scss | 21 +- src/components/payment/PaymentInfo.scss | 4 +- src/components/payment/PaymentModal.scss | 11 +- src/components/payment/Shipping.scss | 4 +- src/components/payment/ShippingInfo.scss | 6 +- src/components/right/PollAnswerResults.scss | 20 +- src/components/right/PollResults.scss | 2 +- src/components/right/Profile.scss | 16 +- src/components/right/RightColumn.scss | 14 +- src/components/right/RightHeader.scss | 2 +- src/components/right/StickerSearch.scss | 5 +- src/components/ui/AvatarEditable.scss | 10 +- src/components/ui/Button.scss | 36 +- src/components/ui/Checkbox.scss | 28 +- src/components/ui/CropModal.scss | 7 +- src/components/ui/FloatingActionButton.scss | 2 +- src/components/ui/ListItem.scss | 62 +- src/components/ui/Menu.scss | 8 +- src/components/ui/MenuItem.scss | 11 +- src/components/ui/Modal.scss | 17 +- src/components/ui/Notification.scss | 12 +- src/components/ui/ProgressSpinner.scss | 28 +- src/components/ui/Radio.scss | 18 +- src/components/ui/RangeSlider.scss | 15 +- src/components/ui/RippleEffect.scss | 2 +- src/components/ui/SearchInput.scss | 25 +- src/components/ui/ShowMoreButton.scss | 2 +- src/components/ui/Switcher.scss | 12 +- src/components/ui/Tab.scss | 12 +- src/components/ui/TabList.scss | 4 +- src/components/ui/Transition.scss | 40 +- src/styles/_common.scss | 24 +- src/styles/_forms.scss | 25 +- src/styles/_spacing.scss | 25 +- src/styles/_variables.scss | 44 +- src/styles/index.scss | 64 +- src/styles/reboot.css | 60 +- src/util/handleError.ts | 7 +- tsconfig.json | 3 +- 137 files changed, 3482 insertions(+), 1266 deletions(-) create mode 100644 plugins/wholePixel.js diff --git a/.browserslistrc b/.browserslistrc index cf3f68d1b..addefdf57 100644 --- a/.browserslistrc +++ b/.browserslistrc @@ -1 +1 @@ -> 2%, last 2 edge versions, iOS >= 13.4, firefox >= 68, firefoxandroid >= 68, last 2 safari major versions +> 0.75%, not op_mini all, not and_uc > 0 diff --git a/.eslintignore b/.eslintignore index 03462bf01..b67974c35 100644 --- a/.eslintignore +++ b/.eslintignore @@ -7,6 +7,7 @@ src/lib/gramjs/tl/types-generator/template.js src/lib/gramjs/tl/api.d.ts src/lib/gramjs/tl/apiTl.js src/lib/gramjs/tl/schemaTl.js -src/lib/gramjs/tl/apiTl.full.js -src/lib/gramjs/tl/schemaTl.full.js -src/lib/gramjs/tl/generateModules.js + +webpack.config.js +jest.config.js +src/lib/secret-sauce/ diff --git a/.eslintrc b/.eslintrc index f4aca9916..59ae678cd 100644 --- a/.eslintrc +++ b/.eslintrc @@ -71,10 +71,5 @@ }, "parserOptions": { "project": "./tsconfig.json" - }, - "ignorePatterns": [ - "webpack.config.js", - "jest.config.js", - "src/lib/secret-sauce" - ] + } } diff --git a/.stylelintrc.json b/.stylelintrc.json index 264a41a68..e45270f3e 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -1,6 +1,27 @@ { - "extends": "stylelint-config-recommended-scss", + "extends": [ + "stylelint-config-recommended-scss" + ], + "plugins": [ + "stylelint-declaration-block-no-ignored-properties", + "stylelint-high-performance-animation", + "stylelint-group-selectors", + "./plugins/wholePixel.js" + ], "rules": { - "no-descending-specificity": null + "number-leading-zero": "always", + "selector-attribute-quotes": "always", + "scss/operator-no-unspaced": null, + "no-descending-specificity": null, + "plugin/declaration-block-no-ignored-properties": true, + "plugin/no-low-performance-animation-properties": [ + true, + { + "severity": "warning", + "ignore": "paint-properties" + } + ], + "plugin/stylelint-group-selectors": [true, { "severity": "warning" }], + "plugin/whole-pixel": [true, { "ignoreList": ["letter-spacing"] }] } } diff --git a/package-lock.json b/package-lock.json index cd2005c8c..41952a8fe 100644 --- a/package-lock.json +++ b/package-lock.json @@ -79,6 +79,9 @@ "style-loader": "^3.3.1", "stylelint": "^14.3.0", "stylelint-config-recommended-scss": "^5.0.2", + "stylelint-declaration-block-no-ignored-properties": "^2.5.0", + "stylelint-group-selectors": "^1.0.8", + "stylelint-high-performance-animation": "^1.6.0", "typescript": "^4.5.5", "webpack": "^5.68.0", "webpack-bundle-analyzer": "^4.5.0", @@ -3255,6 +3258,15 @@ "integrity": "sha1-7ihweulOEdK4J7y+UnC86n8+ce4=", "dev": true }, + "node_modules/@types/mdast": { + "version": "3.0.10", + "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.10.tgz", + "integrity": "sha512-W864tg/Osz1+9f4lrGTZpCSO5/z4608eUp19tbozkq2HJK6i3z1kT0H9tlADXuYIb1YYOBByU4Jsqkk75q48qA==", + "dev": true, + "dependencies": { + "@types/unist": "*" + } + }, "node_modules/@types/mime": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz", @@ -3390,6 +3402,12 @@ "@types/jest": "*" } }, + "node_modules/@types/unist": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.6.tgz", + "integrity": "sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==", + "dev": true + }, "node_modules/@types/wicg-mediasession": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/@types/wicg-mediasession/-/wicg-mediasession-1.1.3.tgz", @@ -4553,6 +4571,16 @@ "babel-plugin-transform-react-remove-prop-types": "^0.4.24" } }, + "node_modules/bail": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/bail/-/bail-1.0.5.tgz", + "integrity": "sha512-xFbRxM1tahm08yHBP16MMjVUAvDaBMD38zsM9EMAUN61omwLmKlOpB/Zku5QkjZ8TZ4vn53pj+t518cH0S03RQ==", + "dev": true, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, "node_modules/balanced-match": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", @@ -4908,6 +4936,36 @@ "node": ">=10" } }, + "node_modules/character-entities": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-1.2.4.tgz", + "integrity": "sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==", + "dev": true, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, + "node_modules/character-entities-legacy": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-1.1.4.tgz", + "integrity": "sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==", + "dev": true, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, + "node_modules/character-reference-invalid": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz", + "integrity": "sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==", + "dev": true, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, "node_modules/charcodes": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/charcodes/-/charcodes-0.2.0.tgz", @@ -4917,6 +4975,15 @@ "node": ">=6" } }, + "node_modules/charenc": { + "version": "0.0.2", + "resolved": "https://registry.npmjs.org/charenc/-/charenc-0.0.2.tgz", + "integrity": "sha1-wKHS86cJLgN3S/qD8UwPxXkKhmc=", + "dev": true, + "engines": { + "node": "*" + } + }, "node_modules/chokidar": { "version": "3.5.3", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", @@ -5395,6 +5462,15 @@ "node": ">= 8" } }, + "node_modules/crypt": { + "version": "0.0.2", + "resolved": "https://registry.npmjs.org/crypt/-/crypt-0.0.2.tgz", + "integrity": "sha1-iNf/fsDfuG9xPch7u0LQRNPmxBs=", + "dev": true, + "engines": { + "node": "*" + } + }, "node_modules/css": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/css/-/css-3.0.0.tgz", @@ -7334,6 +7410,12 @@ "resolved": "https://registry.npmjs.org/type/-/type-2.6.0.tgz", "integrity": "sha512-eiDBDOmkih5pMbo9OqsqPRGMljLodLcwd5XD5JbtNB0o89xZAwynY9EdCDsJU7LtcVCClu9DvM7/0Ep1hYX3EQ==" }, + "node_modules/extend": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz", + "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==", + "dev": true + }, "node_modules/fast-deep-equal": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", @@ -7840,6 +7922,21 @@ "integrity": "sha1-L0SUrIkZ43Z8XLtpHp9GMyQoXUM=", "dev": true }, + "node_modules/gonzales-pe": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/gonzales-pe/-/gonzales-pe-4.3.0.tgz", + "integrity": "sha512-otgSPpUmdWJ43VXyiNgEYE4luzHCL2pz4wQ0OnDluC6Eg4Ko3Vexy/SrSynglw/eR+OhkzmqFCZa/OFa/RgAOQ==", + "dev": true, + "dependencies": { + "minimist": "^1.2.5" + }, + "bin": { + "gonzales": "bin/gonzales.js" + }, + "engines": { + "node": ">=0.6.0" + } + }, "node_modules/graceful-fs": { "version": "4.2.9", "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.9.tgz", @@ -8407,6 +8504,30 @@ "node": ">= 10" } }, + "node_modules/is-alphabetical": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-1.0.4.tgz", + "integrity": "sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==", + "dev": true, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, + "node_modules/is-alphanumerical": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-1.0.4.tgz", + "integrity": "sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A==", + "dev": true, + "dependencies": { + "is-alphabetical": "^1.0.0", + "is-decimal": "^1.0.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, "node_modules/is-arguments": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz", @@ -8469,6 +8590,12 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/is-buffer": { + "version": "1.1.6", + "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz", + "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==", + "dev": true + }, "node_modules/is-callable": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.4.tgz", @@ -8508,6 +8635,16 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/is-decimal": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-1.0.4.tgz", + "integrity": "sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==", + "dev": true, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, "node_modules/is-docker": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz", @@ -8565,6 +8702,16 @@ "node": ">=0.10.0" } }, + "node_modules/is-hexadecimal": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz", + "integrity": "sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==", + "dev": true, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, "node_modules/is-negative-zero": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.2.tgz", @@ -8730,6 +8877,18 @@ "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz", "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=" }, + "node_modules/is-unicode-supported": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-0.1.0.tgz", + "integrity": "sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==", + "dev": true, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/is-weakref": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.2.tgz", @@ -11026,6 +11185,92 @@ "integrity": "sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=", "dev": true }, + "node_modules/log-symbols": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-4.1.0.tgz", + "integrity": "sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==", + "dev": true, + "dependencies": { + "chalk": "^4.1.0", + "is-unicode-supported": "^0.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/log-symbols/node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/log-symbols/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/log-symbols/node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/log-symbols/node_modules/color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true + }, + "node_modules/log-symbols/node_modules/has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/log-symbols/node_modules/supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/log-update": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/log-update/-/log-update-4.0.0.tgz", @@ -11137,6 +11382,16 @@ "node": ">=8" } }, + "node_modules/longest-streak": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/longest-streak/-/longest-streak-2.0.4.tgz", + "integrity": "sha512-vM6rUVCVUJJt33bnmHiZEvr7wPT78ztX7rojL+LW51bHtLh6HTjx84LA5W4+oa6aKEJA7jJu5LR6vQRBpA5DVg==", + "dev": true, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, "node_modules/loose-envify": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", @@ -11216,6 +11471,62 @@ "url": "https://github.com/sponsors/wooorm" } }, + "node_modules/md5": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/md5/-/md5-2.2.1.tgz", + "integrity": "sha1-U6s41f48iJG6RlMp6iP6wFQBJvk=", + "dev": true, + "dependencies": { + "charenc": "~0.0.1", + "crypt": "~0.0.1", + "is-buffer": "~1.1.1" + } + }, + "node_modules/mdast-util-from-markdown": { + "version": "0.8.5", + "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-0.8.5.tgz", + "integrity": "sha512-2hkTXtYYnr+NubD/g6KGBS/0mFmBcifAsI0yIWRiRo0PjVs6SSOSOdtzbp6kSGnShDN6G5aWZpKQ2lWRy27mWQ==", + "dev": true, + "dependencies": { + "@types/mdast": "^3.0.0", + "mdast-util-to-string": "^2.0.0", + "micromark": "~2.11.0", + "parse-entities": "^2.0.0", + "unist-util-stringify-position": "^2.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/mdast-util-to-markdown": { + "version": "0.6.5", + "resolved": "https://registry.npmjs.org/mdast-util-to-markdown/-/mdast-util-to-markdown-0.6.5.tgz", + "integrity": "sha512-XeV9sDE7ZlOQvs45C9UKMtfTcctcaj/pGwH8YLbMHoMOXNNCn2LsqVQOqrF1+/NU8lKDAqozme9SCXWyo9oAcQ==", + "dev": true, + "dependencies": { + "@types/unist": "^2.0.0", + "longest-streak": "^2.0.0", + "mdast-util-to-string": "^2.0.0", + "parse-entities": "^2.0.0", + "repeat-string": "^1.0.0", + "zwitch": "^1.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/mdast-util-to-string": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-2.0.0.tgz", + "integrity": "sha512-AW4DRS3QbBayY/jJmD8437V1Gombjf8RSOUCMFBuo5iHi58AGEgVCKQ+ezHkZZDpAQS75hcBMpLqjpJTjtUL7w==", + "dev": true, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, "node_modules/mdn-data": { "version": "2.0.14", "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz", @@ -11317,6 +11628,26 @@ "node": ">= 0.6" } }, + "node_modules/micromark": { + "version": "2.11.4", + "resolved": "https://registry.npmjs.org/micromark/-/micromark-2.11.4.tgz", + "integrity": "sha512-+WoovN/ppKolQOFIAajxi7Lu9kInbPxFuTBVEavFcL8eAfVstoc5MocPmqBeAdBOJV00uaVjegzH4+MA0DN/uA==", + "dev": true, + "funding": [ + { + "type": "GitHub Sponsors", + "url": "https://github.com/sponsors/unifiedjs" + }, + { + "type": "OpenCollective", + "url": "https://opencollective.com/unified" + } + ], + "dependencies": { + "debug": "^4.0.0", + "parse-entities": "^2.0.0" + } + }, "node_modules/micromatch": { "version": "4.0.4", "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz", @@ -11715,6 +12046,12 @@ "url": "https://github.com/fb55/nth-check?sponsor=1" } }, + "node_modules/num2fraction": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz", + "integrity": "sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=", + "dev": true + }, "node_modules/nwsapi": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.0.tgz", @@ -12035,6 +12372,24 @@ "node": ">=6" } }, + "node_modules/parse-entities": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-2.0.0.tgz", + "integrity": "sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==", + "dev": true, + "dependencies": { + "character-entities": "^1.0.0", + "character-entities-legacy": "^1.0.0", + "character-reference-invalid": "^1.0.0", + "is-alphanumerical": "^1.0.0", + "is-decimal": "^1.0.0", + "is-hexadecimal": "^1.0.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, "node_modules/parse-json": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz", @@ -12375,6 +12730,139 @@ "postcss": "^8.2.15" } }, + "node_modules/postcss-html": { + "version": "0.36.0", + "resolved": "https://registry.npmjs.org/postcss-html/-/postcss-html-0.36.0.tgz", + "integrity": "sha512-HeiOxGcuwID0AFsNAL0ox3mW6MHH5cstWN1Z3Y+n6H+g12ih7LHdYxWwEA/QmrebctLjo79xz9ouK3MroHwOJw==", + "dev": true, + "dependencies": { + "htmlparser2": "^3.10.0" + }, + "peerDependencies": { + "postcss": ">=5.0.0", + "postcss-syntax": ">=0.36.0" + } + }, + "node_modules/postcss-html/node_modules/dom-serializer": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz", + "integrity": "sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==", + "dev": true, + "dependencies": { + "domelementtype": "^2.0.1", + "entities": "^2.0.0" + } + }, + "node_modules/postcss-html/node_modules/dom-serializer/node_modules/domelementtype": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz", + "integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/fb55" + } + ] + }, + "node_modules/postcss-html/node_modules/dom-serializer/node_modules/entities": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz", + "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==", + "dev": true, + "funding": { + "url": "https://github.com/fb55/entities?sponsor=1" + } + }, + "node_modules/postcss-html/node_modules/domelementtype": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz", + "integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==", + "dev": true + }, + "node_modules/postcss-html/node_modules/domhandler": { + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-2.4.2.tgz", + "integrity": "sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==", + "dev": true, + "dependencies": { + "domelementtype": "1" + } + }, + "node_modules/postcss-html/node_modules/domutils": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz", + "integrity": "sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==", + "dev": true, + "dependencies": { + "dom-serializer": "0", + "domelementtype": "1" + } + }, + "node_modules/postcss-html/node_modules/entities": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz", + "integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==", + "dev": true + }, + "node_modules/postcss-html/node_modules/htmlparser2": { + "version": "3.10.1", + "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.10.1.tgz", + "integrity": "sha512-IgieNijUMbkDovyoKObU1DUhm1iwNYE/fuifEoEHfd1oZKZDaONBSkal7Y01shxsM49R4XaMdGez3WnF9UfiCQ==", + "dev": true, + "dependencies": { + "domelementtype": "^1.3.1", + "domhandler": "^2.3.0", + "domutils": "^1.5.1", + "entities": "^1.1.1", + "inherits": "^2.0.1", + "readable-stream": "^3.1.1" + } + }, + "node_modules/postcss-less": { + "version": "3.1.4", + "resolved": "https://registry.npmjs.org/postcss-less/-/postcss-less-3.1.4.tgz", + "integrity": "sha512-7TvleQWNM2QLcHqvudt3VYjULVB49uiW6XzEUFmvwHzvsOEF5MwBrIXZDJQvJNFGjJQTzSzZnDoCJ8h/ljyGXA==", + "dev": true, + "dependencies": { + "postcss": "^7.0.14" + }, + "engines": { + "node": ">=6.14.4" + } + }, + "node_modules/postcss-less/node_modules/picocolors": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz", + "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==", + "dev": true + }, + "node_modules/postcss-less/node_modules/postcss": { + "version": "7.0.39", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz", + "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==", + "dev": true, + "dependencies": { + "picocolors": "^0.2.1", + "source-map": "^0.6.1" + }, + "engines": { + "node": ">=6.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + } + }, + "node_modules/postcss-less/node_modules/source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/postcss-loader": { "version": "6.2.1", "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-6.2.1.tgz", @@ -12797,6 +13285,48 @@ "postcss": "^8.3.3" } }, + "node_modules/postcss-sass": { + "version": "0.4.4", + "resolved": "https://registry.npmjs.org/postcss-sass/-/postcss-sass-0.4.4.tgz", + "integrity": "sha512-BYxnVYx4mQooOhr+zer0qWbSPYnarAy8ZT7hAQtbxtgVf8gy+LSLT/hHGe35h14/pZDTw1DsxdbrwxBN++H+fg==", + "dev": true, + "dependencies": { + "gonzales-pe": "^4.3.0", + "postcss": "^7.0.21" + } + }, + "node_modules/postcss-sass/node_modules/picocolors": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz", + "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==", + "dev": true + }, + "node_modules/postcss-sass/node_modules/postcss": { + "version": "7.0.39", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz", + "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==", + "dev": true, + "dependencies": { + "picocolors": "^0.2.1", + "source-map": "^0.6.1" + }, + "engines": { + "node": ">=6.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + } + }, + "node_modules/postcss-sass/node_modules/source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/postcss-scss": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/postcss-scss/-/postcss-scss-4.0.3.tgz", @@ -12842,6 +13372,15 @@ "postcss": "^8.2.15" } }, + "node_modules/postcss-syntax": { + "version": "0.36.2", + "resolved": "https://registry.npmjs.org/postcss-syntax/-/postcss-syntax-0.36.2.tgz", + "integrity": "sha512-nBRg/i7E3SOHWxF3PpF5WnJM/jQ1YpY9000OaVXlAQj6Zp/kIqJxEDWIZ67tAd7NLuk7zqN4yqe9nc0oNAOs1w==", + "dev": true, + "peerDependencies": { + "postcss": ">=5.0.0" + } + }, "node_modules/postcss-unique-selectors": { "version": "5.0.4", "resolved": "https://registry.npmjs.org/postcss-unique-selectors/-/postcss-unique-selectors-5.0.4.tgz", @@ -13418,6 +13957,47 @@ "node": ">= 0.10" } }, + "node_modules/remark": { + "version": "13.0.0", + "resolved": "https://registry.npmjs.org/remark/-/remark-13.0.0.tgz", + "integrity": "sha512-HDz1+IKGtOyWN+QgBiAT0kn+2s6ovOxHyPAFGKVE81VSzJ+mq7RwHFledEvB5F1p4iJvOah/LOKdFuzvRnNLCA==", + "dev": true, + "dependencies": { + "remark-parse": "^9.0.0", + "remark-stringify": "^9.0.0", + "unified": "^9.1.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/remark-parse": { + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-9.0.0.tgz", + "integrity": "sha512-geKatMwSzEXKHuzBNU1z676sGcDcFoChMK38TgdHJNAYfFtsfHDQG7MoJAjs6sgYMqyLduCYWDIWZIxiPeafEw==", + "dev": true, + "dependencies": { + "mdast-util-from-markdown": "^0.8.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/remark-stringify": { + "version": "9.0.1", + "resolved": "https://registry.npmjs.org/remark-stringify/-/remark-stringify-9.0.1.tgz", + "integrity": "sha512-mWmNg3ZtESvZS8fv5PTvaPckdL4iNlCHTt8/e/8oN08nArHRHjNZMKzA/YW3+p7/lYqIw4nx1XsjCBo/AxNChg==", + "dev": true, + "dependencies": { + "mdast-util-to-markdown": "^0.6.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, "node_modules/renderkid": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/renderkid/-/renderkid-3.0.0.tgz", @@ -13431,6 +14011,15 @@ "strip-ansi": "^6.0.1" } }, + "node_modules/repeat-string": { + "version": "1.6.1", + "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz", + "integrity": "sha1-jcrkcOHIirwtYA//Sndihtp15jc=", + "dev": true, + "engines": { + "node": ">=0.10" + } + }, "node_modules/replace-in-file": { "version": "6.3.2", "resolved": "https://registry.npmjs.org/replace-in-file/-/replace-in-file-6.3.2.tgz", @@ -14606,6 +15195,395 @@ "stylelint": "^14.0.0" } }, + "node_modules/stylelint-declaration-block-no-ignored-properties": { + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/stylelint-declaration-block-no-ignored-properties/-/stylelint-declaration-block-no-ignored-properties-2.5.0.tgz", + "integrity": "sha512-UNz5nUC5GMgMb6GPc/pHUTC0+ydxTdj2mUn7XcKRdwQoiUzzUmWWdSf1aFv2UzrW4x8JYNReE1u5JOj7g0ThJw==", + "dev": true, + "engines": { + "node": ">=6" + }, + "peerDependencies": { + "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" + } + }, + "node_modules/stylelint-group-selectors": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/stylelint-group-selectors/-/stylelint-group-selectors-1.0.8.tgz", + "integrity": "sha512-h37z2JxLI+UKqSj0jNu3WbwtayB3wJCnAP1Pgr6tVgXsIX5w3vjIxU5O1AF8z90RJwNuoq2OyAjBq8DQZqwqbg==", + "dev": true, + "dependencies": { + "md5": "2.2.1", + "postcss": "^6.0.22", + "stylelint": "^13.8.0" + } + }, + "node_modules/stylelint-group-selectors/node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/stylelint-group-selectors/node_modules/autoprefixer": { + "version": "9.8.8", + "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.8.8.tgz", + "integrity": "sha512-eM9d/swFopRt5gdJ7jrpCwgvEMIayITpojhkkSMRsFHYuH5bkSQ4p/9qTEHtmNudUZh22Tehu7I6CxAW0IXTKA==", + "dev": true, + "dependencies": { + "browserslist": "^4.12.0", + "caniuse-lite": "^1.0.30001109", + "normalize-range": "^0.1.2", + "num2fraction": "^1.2.2", + "picocolors": "^0.2.1", + "postcss": "^7.0.32", + "postcss-value-parser": "^4.1.0" + }, + "bin": { + "autoprefixer": "bin/autoprefixer" + }, + "funding": { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/autoprefixer" + } + }, + "node_modules/stylelint-group-selectors/node_modules/autoprefixer/node_modules/postcss": { + "version": "7.0.39", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz", + "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==", + "dev": true, + "dependencies": { + "picocolors": "^0.2.1", + "source-map": "^0.6.1" + }, + "engines": { + "node": ">=6.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + } + }, + "node_modules/stylelint-group-selectors/node_modules/balanced-match": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-2.0.0.tgz", + "integrity": "sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==", + "dev": true + }, + "node_modules/stylelint-group-selectors/node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/stylelint-group-selectors/node_modules/color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true + }, + "node_modules/stylelint-group-selectors/node_modules/emoji-regex": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", + "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==", + "dev": true + }, + "node_modules/stylelint-group-selectors/node_modules/has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/stylelint-group-selectors/node_modules/is-fullwidth-code-point": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz", + "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/stylelint-group-selectors/node_modules/known-css-properties": { + "version": "0.21.0", + "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.21.0.tgz", + "integrity": "sha512-sZLUnTqimCkvkgRS+kbPlYW5o8q5w1cu+uIisKpEWkj31I8mx8kNG162DwRav8Zirkva6N5uoFsm9kzK4mUXjw==", + "dev": true + }, + "node_modules/stylelint-group-selectors/node_modules/picocolors": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz", + "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==", + "dev": true + }, + "node_modules/stylelint-group-selectors/node_modules/postcss": { + "version": "6.0.23", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz", + "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==", + "dev": true, + "dependencies": { + "chalk": "^2.4.1", + "source-map": "^0.6.1", + "supports-color": "^5.4.0" + }, + "engines": { + "node": ">=4.0.0" + } + }, + "node_modules/stylelint-group-selectors/node_modules/postcss-safe-parser": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-4.0.2.tgz", + "integrity": "sha512-Uw6ekxSWNLCPesSv/cmqf2bY/77z11O7jZGPax3ycZMFU/oi2DMH9i89AdHc1tRwFg/arFoEwX0IS3LCUxJh1g==", + "dev": true, + "dependencies": { + "postcss": "^7.0.26" + }, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/stylelint-group-selectors/node_modules/postcss-safe-parser/node_modules/postcss": { + "version": "7.0.39", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz", + "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==", + "dev": true, + "dependencies": { + "picocolors": "^0.2.1", + "source-map": "^0.6.1" + }, + "engines": { + "node": ">=6.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + } + }, + "node_modules/stylelint-group-selectors/node_modules/postcss-scss": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/postcss-scss/-/postcss-scss-2.1.1.tgz", + "integrity": "sha512-jQmGnj0hSGLd9RscFw9LyuSVAa5Bl1/KBPqG1NQw9w8ND55nY4ZEsdlVuYJvLPpV+y0nwTV5v/4rHPzZRihQbA==", + "dev": true, + "dependencies": { + "postcss": "^7.0.6" + }, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/stylelint-group-selectors/node_modules/postcss-scss/node_modules/postcss": { + "version": "7.0.39", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz", + "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==", + "dev": true, + "dependencies": { + "picocolors": "^0.2.1", + "source-map": "^0.6.1" + }, + "engines": { + "node": ">=6.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + } + }, + "node_modules/stylelint-group-selectors/node_modules/resolve-from": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz", + "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/stylelint-group-selectors/node_modules/source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/stylelint-group-selectors/node_modules/string-width": { + "version": "4.2.3", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", + "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", + "dev": true, + "dependencies": { + "emoji-regex": "^8.0.0", + "is-fullwidth-code-point": "^3.0.0", + "strip-ansi": "^6.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/stylelint-group-selectors/node_modules/stylelint": { + "version": "13.13.1", + "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-13.13.1.tgz", + "integrity": "sha512-Mv+BQr5XTUrKqAXmpqm6Ddli6Ief+AiPZkRsIrAoUKFuq/ElkUh9ZMYxXD0iQNZ5ADghZKLOWz1h7hTClB7zgQ==", + "dev": true, + "dependencies": { + "@stylelint/postcss-css-in-js": "^0.37.2", + "@stylelint/postcss-markdown": "^0.36.2", + "autoprefixer": "^9.8.6", + "balanced-match": "^2.0.0", + "chalk": "^4.1.1", + "cosmiconfig": "^7.0.0", + "debug": "^4.3.1", + "execall": "^2.0.0", + "fast-glob": "^3.2.5", + "fastest-levenshtein": "^1.0.12", + "file-entry-cache": "^6.0.1", + "get-stdin": "^8.0.0", + "global-modules": "^2.0.0", + "globby": "^11.0.3", + "globjoin": "^0.1.4", + "html-tags": "^3.1.0", + "ignore": "^5.1.8", + "import-lazy": "^4.0.0", + "imurmurhash": "^0.1.4", + "known-css-properties": "^0.21.0", + "lodash": "^4.17.21", + "log-symbols": "^4.1.0", + "mathml-tag-names": "^2.1.3", + "meow": "^9.0.0", + "micromatch": "^4.0.4", + "normalize-selector": "^0.2.0", + "postcss": "^7.0.35", + "postcss-html": "^0.36.0", + "postcss-less": "^3.1.4", + "postcss-media-query-parser": "^0.2.3", + "postcss-resolve-nested-selector": "^0.1.1", + "postcss-safe-parser": "^4.0.2", + "postcss-sass": "^0.4.4", + "postcss-scss": "^2.1.1", + "postcss-selector-parser": "^6.0.5", + "postcss-syntax": "^0.36.2", + "postcss-value-parser": "^4.1.0", + "resolve-from": "^5.0.0", + "slash": "^3.0.0", + "specificity": "^0.4.1", + "string-width": "^4.2.2", + "strip-ansi": "^6.0.0", + "style-search": "^0.1.0", + "sugarss": "^2.0.0", + "svg-tags": "^1.0.0", + "table": "^6.6.0", + "v8-compile-cache": "^2.3.0", + "write-file-atomic": "^3.0.3" + }, + "bin": { + "stylelint": "bin/stylelint.js" + }, + "engines": { + "node": ">=10.13.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/stylelint" + } + }, + "node_modules/stylelint-group-selectors/node_modules/stylelint/node_modules/@stylelint/postcss-css-in-js": { + "version": "0.37.2", + "resolved": "https://registry.npmjs.org/@stylelint/postcss-css-in-js/-/postcss-css-in-js-0.37.2.tgz", + "integrity": "sha512-nEhsFoJurt8oUmieT8qy4nk81WRHmJynmVwn/Vts08PL9fhgIsMhk1GId5yAN643OzqEEb5S/6At2TZW7pqPDA==", + "dev": true, + "dependencies": { + "@babel/core": ">=7.9.0" + }, + "peerDependencies": { + "postcss": ">=7.0.0", + "postcss-syntax": ">=0.36.2" + } + }, + "node_modules/stylelint-group-selectors/node_modules/stylelint/node_modules/@stylelint/postcss-markdown": { + "version": "0.36.2", + "resolved": "https://registry.npmjs.org/@stylelint/postcss-markdown/-/postcss-markdown-0.36.2.tgz", + "integrity": "sha512-2kGbqUVJUGE8dM+bMzXG/PYUWKkjLIkRLWNh39OaADkiabDRdw8ATFCgbMz5xdIcvwspPAluSL7uY+ZiTWdWmQ==", + "deprecated": "Use the original unforked package instead: postcss-markdown", + "dev": true, + "dependencies": { + "remark": "^13.0.0", + "unist-util-find-all-after": "^3.0.2" + }, + "peerDependencies": { + "postcss": ">=7.0.0", + "postcss-syntax": ">=0.36.2" + } + }, + "node_modules/stylelint-group-selectors/node_modules/stylelint/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/stylelint-group-selectors/node_modules/stylelint/node_modules/postcss": { + "version": "7.0.39", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz", + "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==", + "dev": true, + "dependencies": { + "picocolors": "^0.2.1", + "source-map": "^0.6.1" + }, + "engines": { + "node": ">=6.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + } + }, + "node_modules/stylelint-group-selectors/node_modules/stylelint/node_modules/supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/stylelint-high-performance-animation": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/stylelint-high-performance-animation/-/stylelint-high-performance-animation-1.6.0.tgz", + "integrity": "sha512-RW3XbNLMoKcqY97NTNLXzfg4IGzCfaIf+s4aQem7BzN5IYqYLdYuU1WCqMCoiZHRILQIkrkNvcaQOAu7bA9qxw==", + "dev": true, + "peerDependencies": { + "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" + } + }, "node_modules/stylelint-scss": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-4.1.0.tgz", @@ -14710,6 +15688,47 @@ "node": "^12.13.0 || ^14.15.0 || >=16" } }, + "node_modules/sugarss": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/sugarss/-/sugarss-2.0.0.tgz", + "integrity": "sha512-WfxjozUk0UVA4jm+U1d736AUpzSrNsQcIbyOkoE364GrtWmIrFdk5lksEupgWMD4VaT/0kVx1dobpiDumSgmJQ==", + "dev": true, + "dependencies": { + "postcss": "^7.0.2" + } + }, + "node_modules/sugarss/node_modules/picocolors": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz", + "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==", + "dev": true + }, + "node_modules/sugarss/node_modules/postcss": { + "version": "7.0.39", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz", + "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==", + "dev": true, + "dependencies": { + "picocolors": "^0.2.1", + "source-map": "^0.6.1" + }, + "engines": { + "node": ">=6.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + } + }, + "node_modules/sugarss/node_modules/source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/supports-color": { "version": "5.5.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", @@ -15177,6 +16196,16 @@ "node": ">=8" } }, + "node_modules/trough": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/trough/-/trough-1.0.5.tgz", + "integrity": "sha512-rvuRbTarPXmMb79SmzEp8aqXNKcK+y0XaB298IXueQ8I2PsrATcPBCSPyK/dDNa2iWOhKlfNnOjdAOTBU/nkFA==", + "dev": true, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, "node_modules/tsconfig-paths": { "version": "3.12.0", "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.12.0.tgz", @@ -15363,6 +16392,92 @@ "node": ">=4" } }, + "node_modules/unified": { + "version": "9.2.2", + "resolved": "https://registry.npmjs.org/unified/-/unified-9.2.2.tgz", + "integrity": "sha512-Sg7j110mtefBD+qunSLO1lqOEKdrwBFBrR6Qd8f4uwkhWNlbkaqwHse6e7QvD3AP/MNoJdEDLaf8OxYyoWgorQ==", + "dev": true, + "dependencies": { + "bail": "^1.0.0", + "extend": "^3.0.0", + "is-buffer": "^2.0.0", + "is-plain-obj": "^2.0.0", + "trough": "^1.0.0", + "vfile": "^4.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/unified/node_modules/is-buffer": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.5.tgz", + "integrity": "sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ], + "engines": { + "node": ">=4" + } + }, + "node_modules/unified/node_modules/is-plain-obj": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-2.1.0.tgz", + "integrity": "sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/unist-util-find-all-after": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/unist-util-find-all-after/-/unist-util-find-all-after-3.0.2.tgz", + "integrity": "sha512-xaTC/AGZ0rIM2gM28YVRAFPIZpzbpDtU3dRmp7EXlNVA8ziQc4hY3H7BHXM1J49nEmiqc3svnqMReW+PGqbZKQ==", + "dev": true, + "dependencies": { + "unist-util-is": "^4.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/unist-util-is": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-4.1.0.tgz", + "integrity": "sha512-ZOQSsnce92GrxSqlnEEseX0gi7GH9zTJZ0p9dtu87WRb/37mMPO2Ilx1s/t9vBHrFhbgweUwb+t7cIn5dxPhZg==", + "dev": true, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/unist-util-stringify-position": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-2.0.3.tgz", + "integrity": "sha512-3faScn5I+hy9VleOq/qNbAd6pAx7iH5jYBMS9I1HgQVijz/4mv5Bvw5iw1sC/90CODiKo81G/ps8AJrISn687g==", + "dev": true, + "dependencies": { + "@types/unist": "^2.0.2" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, "node_modules/universalify": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz", @@ -15480,6 +16595,59 @@ "node": ">= 0.8" } }, + "node_modules/vfile": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/vfile/-/vfile-4.2.1.tgz", + "integrity": "sha512-O6AE4OskCG5S1emQ/4gl8zK586RqA3srz3nfK/Viy0UPToBc5Trp9BVFb1u0CjsKrAWwnpr4ifM/KBXPWwJbCA==", + "dev": true, + "dependencies": { + "@types/unist": "^2.0.0", + "is-buffer": "^2.0.0", + "unist-util-stringify-position": "^2.0.0", + "vfile-message": "^2.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/vfile-message": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-2.0.4.tgz", + "integrity": "sha512-DjssxRGkMvifUOJre00juHoP9DPWuzjxKuMDrhNbk2TdaYYBNMStsNhEOt3idrtI12VQYM/1+iM0KOzXi4pxwQ==", + "dev": true, + "dependencies": { + "@types/unist": "^2.0.0", + "unist-util-stringify-position": "^2.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/vfile/node_modules/is-buffer": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.5.tgz", + "integrity": "sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ], + "engines": { + "node": ">=4" + } + }, "node_modules/w3c-hr-time": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz", @@ -16408,6 +17576,16 @@ "engines": { "node": ">=8" } + }, + "node_modules/zwitch": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-1.0.5.tgz", + "integrity": "sha512-V50KMwwzqJV0NpZIZFwfOD5/lyny3WlSzRiXgA0G7VUnRlqttta1L6UQIHzd6EuBY/cHGfwTIck7w1yH6Q5zUw==", + "dev": true, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } } }, "dependencies": { @@ -18747,6 +19925,15 @@ "integrity": "sha1-7ihweulOEdK4J7y+UnC86n8+ce4=", "dev": true }, + "@types/mdast": { + "version": "3.0.10", + "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.10.tgz", + "integrity": "sha512-W864tg/Osz1+9f4lrGTZpCSO5/z4608eUp19tbozkq2HJK6i3z1kT0H9tlADXuYIb1YYOBByU4Jsqkk75q48qA==", + "dev": true, + "requires": { + "@types/unist": "*" + } + }, "@types/mime": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz", @@ -18882,6 +20069,12 @@ "@types/jest": "*" } }, + "@types/unist": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.6.tgz", + "integrity": "sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==", + "dev": true + }, "@types/wicg-mediasession": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/@types/wicg-mediasession/-/wicg-mediasession-1.1.3.tgz", @@ -19747,6 +20940,12 @@ "babel-plugin-transform-react-remove-prop-types": "^0.4.24" } }, + "bail": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/bail/-/bail-1.0.5.tgz", + "integrity": "sha512-xFbRxM1tahm08yHBP16MMjVUAvDaBMD38zsM9EMAUN61omwLmKlOpB/Zku5QkjZ8TZ4vn53pj+t518cH0S03RQ==", + "dev": true + }, "balanced-match": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", @@ -20012,12 +21211,36 @@ "integrity": "sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==", "dev": true }, + "character-entities": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-1.2.4.tgz", + "integrity": "sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==", + "dev": true + }, + "character-entities-legacy": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-1.1.4.tgz", + "integrity": "sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==", + "dev": true + }, + "character-reference-invalid": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz", + "integrity": "sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==", + "dev": true + }, "charcodes": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/charcodes/-/charcodes-0.2.0.tgz", "integrity": "sha512-Y4kiDb+AM4Ecy58YkuZrrSRJBDQdQ2L+NyS1vHHFtNtUjgutcZfx3yp1dAONI/oPaPmyGfCLx5CxL+zauIMyKQ==", "dev": true }, + "charenc": { + "version": "0.0.2", + "resolved": "https://registry.npmjs.org/charenc/-/charenc-0.0.2.tgz", + "integrity": "sha1-wKHS86cJLgN3S/qD8UwPxXkKhmc=", + "dev": true + }, "chokidar": { "version": "3.5.3", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", @@ -20392,6 +21615,12 @@ "which": "^2.0.1" } }, + "crypt": { + "version": "0.0.2", + "resolved": "https://registry.npmjs.org/crypt/-/crypt-0.0.2.tgz", + "integrity": "sha1-iNf/fsDfuG9xPch7u0LQRNPmxBs=", + "dev": true + }, "css": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/css/-/css-3.0.0.tgz", @@ -21857,6 +23086,12 @@ } } }, + "extend": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz", + "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==", + "dev": true + }, "fast-deep-equal": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", @@ -22244,6 +23479,15 @@ "integrity": "sha1-L0SUrIkZ43Z8XLtpHp9GMyQoXUM=", "dev": true }, + "gonzales-pe": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/gonzales-pe/-/gonzales-pe-4.3.0.tgz", + "integrity": "sha512-otgSPpUmdWJ43VXyiNgEYE4luzHCL2pz4wQ0OnDluC6Eg4Ko3Vexy/SrSynglw/eR+OhkzmqFCZa/OFa/RgAOQ==", + "dev": true, + "requires": { + "minimist": "^1.2.5" + } + }, "graceful-fs": { "version": "4.2.9", "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.9.tgz", @@ -22654,6 +23898,22 @@ "integrity": "sha512-1qTgH9NG+IIJ4yfKs2e6Pp1bZg8wbDbKHT21HrLIeYBTRLgMYKnMTPAuI3Lcs61nfx5h1xlXnbJtH1kX5/d/ng==", "dev": true }, + "is-alphabetical": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-1.0.4.tgz", + "integrity": "sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==", + "dev": true + }, + "is-alphanumerical": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-1.0.4.tgz", + "integrity": "sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A==", + "dev": true, + "requires": { + "is-alphabetical": "^1.0.0", + "is-decimal": "^1.0.0" + } + }, "is-arguments": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz", @@ -22698,6 +23958,12 @@ "has-tostringtag": "^1.0.0" } }, + "is-buffer": { + "version": "1.1.6", + "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz", + "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==", + "dev": true + }, "is-callable": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.4.tgz", @@ -22722,6 +23988,12 @@ "has-tostringtag": "^1.0.0" } }, + "is-decimal": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-1.0.4.tgz", + "integrity": "sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==", + "dev": true + }, "is-docker": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz", @@ -22755,6 +24027,12 @@ "is-extglob": "^2.1.1" } }, + "is-hexadecimal": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz", + "integrity": "sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==", + "dev": true + }, "is-negative-zero": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.2.tgz", @@ -22860,6 +24138,12 @@ "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz", "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=" }, + "is-unicode-supported": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-0.1.0.tgz", + "integrity": "sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==", + "dev": true + }, "is-weakref": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.2.tgz", @@ -24594,6 +25878,67 @@ "integrity": "sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=", "dev": true }, + "log-symbols": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-4.1.0.tgz", + "integrity": "sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==", + "dev": true, + "requires": { + "chalk": "^4.1.0", + "is-unicode-supported": "^0.1.0" + }, + "dependencies": { + "ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "requires": { + "color-convert": "^2.0.1" + } + }, + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + }, + "color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "requires": { + "color-name": "~1.1.4" + } + }, + "color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true + }, + "has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true + }, + "supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "requires": { + "has-flag": "^4.0.0" + } + } + } + }, "log-update": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/log-update/-/log-update-4.0.0.tgz", @@ -24677,6 +26022,12 @@ } } }, + "longest-streak": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/longest-streak/-/longest-streak-2.0.4.tgz", + "integrity": "sha512-vM6rUVCVUJJt33bnmHiZEvr7wPT78ztX7rojL+LW51bHtLh6HTjx84LA5W4+oa6aKEJA7jJu5LR6vQRBpA5DVg==", + "dev": true + }, "loose-envify": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", @@ -24734,6 +26085,50 @@ "integrity": "sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==", "dev": true }, + "md5": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/md5/-/md5-2.2.1.tgz", + "integrity": "sha1-U6s41f48iJG6RlMp6iP6wFQBJvk=", + "dev": true, + "requires": { + "charenc": "~0.0.1", + "crypt": "~0.0.1", + "is-buffer": "~1.1.1" + } + }, + "mdast-util-from-markdown": { + "version": "0.8.5", + "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-0.8.5.tgz", + "integrity": "sha512-2hkTXtYYnr+NubD/g6KGBS/0mFmBcifAsI0yIWRiRo0PjVs6SSOSOdtzbp6kSGnShDN6G5aWZpKQ2lWRy27mWQ==", + "dev": true, + "requires": { + "@types/mdast": "^3.0.0", + "mdast-util-to-string": "^2.0.0", + "micromark": "~2.11.0", + "parse-entities": "^2.0.0", + "unist-util-stringify-position": "^2.0.0" + } + }, + "mdast-util-to-markdown": { + "version": "0.6.5", + "resolved": "https://registry.npmjs.org/mdast-util-to-markdown/-/mdast-util-to-markdown-0.6.5.tgz", + "integrity": "sha512-XeV9sDE7ZlOQvs45C9UKMtfTcctcaj/pGwH8YLbMHoMOXNNCn2LsqVQOqrF1+/NU8lKDAqozme9SCXWyo9oAcQ==", + "dev": true, + "requires": { + "@types/unist": "^2.0.0", + "longest-streak": "^2.0.0", + "mdast-util-to-string": "^2.0.0", + "parse-entities": "^2.0.0", + "repeat-string": "^1.0.0", + "zwitch": "^1.0.0" + } + }, + "mdast-util-to-string": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-2.0.0.tgz", + "integrity": "sha512-AW4DRS3QbBayY/jJmD8437V1Gombjf8RSOUCMFBuo5iHi58AGEgVCKQ+ezHkZZDpAQS75hcBMpLqjpJTjtUL7w==", + "dev": true + }, "mdn-data": { "version": "2.0.14", "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz", @@ -24813,6 +26208,16 @@ "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=", "dev": true }, + "micromark": { + "version": "2.11.4", + "resolved": "https://registry.npmjs.org/micromark/-/micromark-2.11.4.tgz", + "integrity": "sha512-+WoovN/ppKolQOFIAajxi7Lu9kInbPxFuTBVEavFcL8eAfVstoc5MocPmqBeAdBOJV00uaVjegzH4+MA0DN/uA==", + "dev": true, + "requires": { + "debug": "^4.0.0", + "parse-entities": "^2.0.0" + } + }, "micromatch": { "version": "4.0.4", "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz", @@ -25110,6 +26515,12 @@ "boolbase": "^1.0.0" } }, + "num2fraction": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz", + "integrity": "sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=", + "dev": true + }, "nwsapi": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.0.tgz", @@ -25345,6 +26756,20 @@ "callsites": "^3.0.0" } }, + "parse-entities": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-2.0.0.tgz", + "integrity": "sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==", + "dev": true, + "requires": { + "character-entities": "^1.0.0", + "character-entities-legacy": "^1.0.0", + "character-reference-invalid": "^1.0.0", + "is-alphanumerical": "^1.0.0", + "is-decimal": "^1.0.0", + "is-hexadecimal": "^1.0.0" + } + }, "parse-json": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz", @@ -25590,6 +27015,119 @@ "dev": true, "requires": {} }, + "postcss-html": { + "version": "0.36.0", + "resolved": "https://registry.npmjs.org/postcss-html/-/postcss-html-0.36.0.tgz", + "integrity": "sha512-HeiOxGcuwID0AFsNAL0ox3mW6MHH5cstWN1Z3Y+n6H+g12ih7LHdYxWwEA/QmrebctLjo79xz9ouK3MroHwOJw==", + "dev": true, + "requires": { + "htmlparser2": "^3.10.0" + }, + "dependencies": { + "dom-serializer": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz", + "integrity": "sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==", + "dev": true, + "requires": { + "domelementtype": "^2.0.1", + "entities": "^2.0.0" + }, + "dependencies": { + "domelementtype": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz", + "integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==", + "dev": true + }, + "entities": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz", + "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==", + "dev": true + } + } + }, + "domelementtype": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz", + "integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==", + "dev": true + }, + "domhandler": { + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-2.4.2.tgz", + "integrity": "sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==", + "dev": true, + "requires": { + "domelementtype": "1" + } + }, + "domutils": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz", + "integrity": "sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==", + "dev": true, + "requires": { + "dom-serializer": "0", + "domelementtype": "1" + } + }, + "entities": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz", + "integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==", + "dev": true + }, + "htmlparser2": { + "version": "3.10.1", + "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.10.1.tgz", + "integrity": "sha512-IgieNijUMbkDovyoKObU1DUhm1iwNYE/fuifEoEHfd1oZKZDaONBSkal7Y01shxsM49R4XaMdGez3WnF9UfiCQ==", + "dev": true, + "requires": { + "domelementtype": "^1.3.1", + "domhandler": "^2.3.0", + "domutils": "^1.5.1", + "entities": "^1.1.1", + "inherits": "^2.0.1", + "readable-stream": "^3.1.1" + } + } + } + }, + "postcss-less": { + "version": "3.1.4", + "resolved": "https://registry.npmjs.org/postcss-less/-/postcss-less-3.1.4.tgz", + "integrity": "sha512-7TvleQWNM2QLcHqvudt3VYjULVB49uiW6XzEUFmvwHzvsOEF5MwBrIXZDJQvJNFGjJQTzSzZnDoCJ8h/ljyGXA==", + "dev": true, + "requires": { + "postcss": "^7.0.14" + }, + "dependencies": { + "picocolors": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz", + "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==", + "dev": true + }, + "postcss": { + "version": "7.0.39", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz", + "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==", + "dev": true, + "requires": { + "picocolors": "^0.2.1", + "source-map": "^0.6.1" + } + }, + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + } + } + }, "postcss-loader": { "version": "6.2.1", "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-6.2.1.tgz", @@ -25855,6 +27393,40 @@ "dev": true, "requires": {} }, + "postcss-sass": { + "version": "0.4.4", + "resolved": "https://registry.npmjs.org/postcss-sass/-/postcss-sass-0.4.4.tgz", + "integrity": "sha512-BYxnVYx4mQooOhr+zer0qWbSPYnarAy8ZT7hAQtbxtgVf8gy+LSLT/hHGe35h14/pZDTw1DsxdbrwxBN++H+fg==", + "dev": true, + "requires": { + "gonzales-pe": "^4.3.0", + "postcss": "^7.0.21" + }, + "dependencies": { + "picocolors": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz", + "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==", + "dev": true + }, + "postcss": { + "version": "7.0.39", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz", + "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==", + "dev": true, + "requires": { + "picocolors": "^0.2.1", + "source-map": "^0.6.1" + } + }, + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + } + } + }, "postcss-scss": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/postcss-scss/-/postcss-scss-4.0.3.tgz", @@ -25882,6 +27454,13 @@ "svgo": "^2.7.0" } }, + "postcss-syntax": { + "version": "0.36.2", + "resolved": "https://registry.npmjs.org/postcss-syntax/-/postcss-syntax-0.36.2.tgz", + "integrity": "sha512-nBRg/i7E3SOHWxF3PpF5WnJM/jQ1YpY9000OaVXlAQj6Zp/kIqJxEDWIZ67tAd7NLuk7zqN4yqe9nc0oNAOs1w==", + "dev": true, + "requires": {} + }, "postcss-unique-selectors": { "version": "5.0.4", "resolved": "https://registry.npmjs.org/postcss-unique-selectors/-/postcss-unique-selectors-5.0.4.tgz", @@ -26326,6 +27905,35 @@ "integrity": "sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=", "dev": true }, + "remark": { + "version": "13.0.0", + "resolved": "https://registry.npmjs.org/remark/-/remark-13.0.0.tgz", + "integrity": "sha512-HDz1+IKGtOyWN+QgBiAT0kn+2s6ovOxHyPAFGKVE81VSzJ+mq7RwHFledEvB5F1p4iJvOah/LOKdFuzvRnNLCA==", + "dev": true, + "requires": { + "remark-parse": "^9.0.0", + "remark-stringify": "^9.0.0", + "unified": "^9.1.0" + } + }, + "remark-parse": { + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-9.0.0.tgz", + "integrity": "sha512-geKatMwSzEXKHuzBNU1z676sGcDcFoChMK38TgdHJNAYfFtsfHDQG7MoJAjs6sgYMqyLduCYWDIWZIxiPeafEw==", + "dev": true, + "requires": { + "mdast-util-from-markdown": "^0.8.0" + } + }, + "remark-stringify": { + "version": "9.0.1", + "resolved": "https://registry.npmjs.org/remark-stringify/-/remark-stringify-9.0.1.tgz", + "integrity": "sha512-mWmNg3ZtESvZS8fv5PTvaPckdL4iNlCHTt8/e/8oN08nArHRHjNZMKzA/YW3+p7/lYqIw4nx1XsjCBo/AxNChg==", + "dev": true, + "requires": { + "mdast-util-to-markdown": "^0.6.0" + } + }, "renderkid": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/renderkid/-/renderkid-3.0.0.tgz", @@ -26339,6 +27947,12 @@ "strip-ansi": "^6.0.1" } }, + "repeat-string": { + "version": "1.6.1", + "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz", + "integrity": "sha1-jcrkcOHIirwtYA//Sndihtp15jc=", + "dev": true + }, "replace-in-file": { "version": "6.3.2", "resolved": "https://registry.npmjs.org/replace-in-file/-/replace-in-file-6.3.2.tgz", @@ -27294,6 +28908,302 @@ "stylelint-scss": "^4.0.0" } }, + "stylelint-declaration-block-no-ignored-properties": { + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/stylelint-declaration-block-no-ignored-properties/-/stylelint-declaration-block-no-ignored-properties-2.5.0.tgz", + "integrity": "sha512-UNz5nUC5GMgMb6GPc/pHUTC0+ydxTdj2mUn7XcKRdwQoiUzzUmWWdSf1aFv2UzrW4x8JYNReE1u5JOj7g0ThJw==", + "dev": true, + "requires": {} + }, + "stylelint-group-selectors": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/stylelint-group-selectors/-/stylelint-group-selectors-1.0.8.tgz", + "integrity": "sha512-h37z2JxLI+UKqSj0jNu3WbwtayB3wJCnAP1Pgr6tVgXsIX5w3vjIxU5O1AF8z90RJwNuoq2OyAjBq8DQZqwqbg==", + "dev": true, + "requires": { + "md5": "2.2.1", + "postcss": "^6.0.22", + "stylelint": "^13.8.0" + }, + "dependencies": { + "ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "requires": { + "color-convert": "^2.0.1" + } + }, + "autoprefixer": { + "version": "9.8.8", + "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.8.8.tgz", + "integrity": "sha512-eM9d/swFopRt5gdJ7jrpCwgvEMIayITpojhkkSMRsFHYuH5bkSQ4p/9qTEHtmNudUZh22Tehu7I6CxAW0IXTKA==", + "dev": true, + "requires": { + "browserslist": "^4.12.0", + "caniuse-lite": "^1.0.30001109", + "normalize-range": "^0.1.2", + "num2fraction": "^1.2.2", + "picocolors": "^0.2.1", + "postcss": "^7.0.32", + "postcss-value-parser": "^4.1.0" + }, + "dependencies": { + "postcss": { + "version": "7.0.39", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz", + "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==", + "dev": true, + "requires": { + "picocolors": "^0.2.1", + "source-map": "^0.6.1" + } + } + } + }, + "balanced-match": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-2.0.0.tgz", + "integrity": "sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==", + "dev": true + }, + "color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "requires": { + "color-name": "~1.1.4" + } + }, + "color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true + }, + "emoji-regex": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", + "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==", + "dev": true + }, + "has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true + }, + "is-fullwidth-code-point": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz", + "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==", + "dev": true + }, + "known-css-properties": { + "version": "0.21.0", + "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.21.0.tgz", + "integrity": "sha512-sZLUnTqimCkvkgRS+kbPlYW5o8q5w1cu+uIisKpEWkj31I8mx8kNG162DwRav8Zirkva6N5uoFsm9kzK4mUXjw==", + "dev": true + }, + "picocolors": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz", + "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==", + "dev": true + }, + "postcss": { + "version": "6.0.23", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz", + "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==", + "dev": true, + "requires": { + "chalk": "^2.4.1", + "source-map": "^0.6.1", + "supports-color": "^5.4.0" + } + }, + "postcss-safe-parser": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-4.0.2.tgz", + "integrity": "sha512-Uw6ekxSWNLCPesSv/cmqf2bY/77z11O7jZGPax3ycZMFU/oi2DMH9i89AdHc1tRwFg/arFoEwX0IS3LCUxJh1g==", + "dev": true, + "requires": { + "postcss": "^7.0.26" + }, + "dependencies": { + "postcss": { + "version": "7.0.39", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz", + "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==", + "dev": true, + "requires": { + "picocolors": "^0.2.1", + "source-map": "^0.6.1" + } + } + } + }, + "postcss-scss": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/postcss-scss/-/postcss-scss-2.1.1.tgz", + "integrity": "sha512-jQmGnj0hSGLd9RscFw9LyuSVAa5Bl1/KBPqG1NQw9w8ND55nY4ZEsdlVuYJvLPpV+y0nwTV5v/4rHPzZRihQbA==", + "dev": true, + "requires": { + "postcss": "^7.0.6" + }, + "dependencies": { + "postcss": { + "version": "7.0.39", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz", + "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==", + "dev": true, + "requires": { + "picocolors": "^0.2.1", + "source-map": "^0.6.1" + } + } + } + }, + "resolve-from": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz", + "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==", + "dev": true + }, + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + }, + "string-width": { + "version": "4.2.3", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", + "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", + "dev": true, + "requires": { + "emoji-regex": "^8.0.0", + "is-fullwidth-code-point": "^3.0.0", + "strip-ansi": "^6.0.1" + } + }, + "stylelint": { + "version": "13.13.1", + "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-13.13.1.tgz", + "integrity": "sha512-Mv+BQr5XTUrKqAXmpqm6Ddli6Ief+AiPZkRsIrAoUKFuq/ElkUh9ZMYxXD0iQNZ5ADghZKLOWz1h7hTClB7zgQ==", + "dev": true, + "requires": { + "@stylelint/postcss-css-in-js": "^0.37.2", + "@stylelint/postcss-markdown": "^0.36.2", + "autoprefixer": "^9.8.6", + "balanced-match": "^2.0.0", + "chalk": "^4.1.1", + "cosmiconfig": "^7.0.0", + "debug": "^4.3.1", + "execall": "^2.0.0", + "fast-glob": "^3.2.5", + "fastest-levenshtein": "^1.0.12", + "file-entry-cache": "^6.0.1", + "get-stdin": "^8.0.0", + "global-modules": "^2.0.0", + "globby": "^11.0.3", + "globjoin": "^0.1.4", + "html-tags": "^3.1.0", + "ignore": "^5.1.8", + "import-lazy": "^4.0.0", + "imurmurhash": "^0.1.4", + "known-css-properties": "^0.21.0", + "lodash": "^4.17.21", + "log-symbols": "^4.1.0", + "mathml-tag-names": "^2.1.3", + "meow": "^9.0.0", + "micromatch": "^4.0.4", + "normalize-selector": "^0.2.0", + "postcss": "^7.0.35", + "postcss-html": "^0.36.0", + "postcss-less": "^3.1.4", + "postcss-media-query-parser": "^0.2.3", + "postcss-resolve-nested-selector": "^0.1.1", + "postcss-safe-parser": "^4.0.2", + "postcss-sass": "^0.4.4", + "postcss-scss": "^2.1.1", + "postcss-selector-parser": "^6.0.5", + "postcss-syntax": "^0.36.2", + "postcss-value-parser": "^4.1.0", + "resolve-from": "^5.0.0", + "slash": "^3.0.0", + "specificity": "^0.4.1", + "string-width": "^4.2.2", + "strip-ansi": "^6.0.0", + "style-search": "^0.1.0", + "sugarss": "^2.0.0", + "svg-tags": "^1.0.0", + "table": "^6.6.0", + "v8-compile-cache": "^2.3.0", + "write-file-atomic": "^3.0.3" + }, + "dependencies": { + "@stylelint/postcss-css-in-js": { + "version": "0.37.2", + "resolved": "https://registry.npmjs.org/@stylelint/postcss-css-in-js/-/postcss-css-in-js-0.37.2.tgz", + "integrity": "sha512-nEhsFoJurt8oUmieT8qy4nk81WRHmJynmVwn/Vts08PL9fhgIsMhk1GId5yAN643OzqEEb5S/6At2TZW7pqPDA==", + "dev": true, + "requires": { + "@babel/core": ">=7.9.0" + } + }, + "@stylelint/postcss-markdown": { + "version": "0.36.2", + "resolved": "https://registry.npmjs.org/@stylelint/postcss-markdown/-/postcss-markdown-0.36.2.tgz", + "integrity": "sha512-2kGbqUVJUGE8dM+bMzXG/PYUWKkjLIkRLWNh39OaADkiabDRdw8ATFCgbMz5xdIcvwspPAluSL7uY+ZiTWdWmQ==", + "dev": true, + "requires": { + "remark": "^13.0.0", + "unist-util-find-all-after": "^3.0.2" + } + }, + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + }, + "postcss": { + "version": "7.0.39", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz", + "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==", + "dev": true, + "requires": { + "picocolors": "^0.2.1", + "source-map": "^0.6.1" + } + }, + "supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "requires": { + "has-flag": "^4.0.0" + } + } + } + } + } + }, + "stylelint-high-performance-animation": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/stylelint-high-performance-animation/-/stylelint-high-performance-animation-1.6.0.tgz", + "integrity": "sha512-RW3XbNLMoKcqY97NTNLXzfg4IGzCfaIf+s4aQem7BzN5IYqYLdYuU1WCqMCoiZHRILQIkrkNvcaQOAu7bA9qxw==", + "dev": true, + "requires": {} + }, "stylelint-scss": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-4.1.0.tgz", @@ -27307,6 +29217,39 @@ "postcss-value-parser": "^4.1.0" } }, + "sugarss": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/sugarss/-/sugarss-2.0.0.tgz", + "integrity": "sha512-WfxjozUk0UVA4jm+U1d736AUpzSrNsQcIbyOkoE364GrtWmIrFdk5lksEupgWMD4VaT/0kVx1dobpiDumSgmJQ==", + "dev": true, + "requires": { + "postcss": "^7.0.2" + }, + "dependencies": { + "picocolors": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz", + "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==", + "dev": true + }, + "postcss": { + "version": "7.0.39", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz", + "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==", + "dev": true, + "requires": { + "picocolors": "^0.2.1", + "source-map": "^0.6.1" + } + }, + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + } + } + }, "supports-color": { "version": "5.5.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", @@ -27648,6 +29591,12 @@ "integrity": "sha512-c1PTsA3tYrIsLGkJkzHF+w9F2EyxfXGo4UyJc4pFL++FMjnq0HJS69T3M7d//gKrFKwy429bouPescbjecU+Zw==", "dev": true }, + "trough": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/trough/-/trough-1.0.5.tgz", + "integrity": "sha512-rvuRbTarPXmMb79SmzEp8aqXNKcK+y0XaB298IXueQ8I2PsrATcPBCSPyK/dDNa2iWOhKlfNnOjdAOTBU/nkFA==", + "dev": true + }, "tsconfig-paths": { "version": "3.12.0", "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.12.0.tgz", @@ -27789,6 +29738,58 @@ "integrity": "sha512-5Zfuy9q/DFr4tfO7ZPeVXb1aPoeQSdeFMLpYuFebehDAhbuevLs5yxSZmIFN1tP5F9Wl4IpJrYojg85/zgyZHQ==", "dev": true }, + "unified": { + "version": "9.2.2", + "resolved": "https://registry.npmjs.org/unified/-/unified-9.2.2.tgz", + "integrity": "sha512-Sg7j110mtefBD+qunSLO1lqOEKdrwBFBrR6Qd8f4uwkhWNlbkaqwHse6e7QvD3AP/MNoJdEDLaf8OxYyoWgorQ==", + "dev": true, + "requires": { + "bail": "^1.0.0", + "extend": "^3.0.0", + "is-buffer": "^2.0.0", + "is-plain-obj": "^2.0.0", + "trough": "^1.0.0", + "vfile": "^4.0.0" + }, + "dependencies": { + "is-buffer": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.5.tgz", + "integrity": "sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==", + "dev": true + }, + "is-plain-obj": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-2.1.0.tgz", + "integrity": "sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==", + "dev": true + } + } + }, + "unist-util-find-all-after": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/unist-util-find-all-after/-/unist-util-find-all-after-3.0.2.tgz", + "integrity": "sha512-xaTC/AGZ0rIM2gM28YVRAFPIZpzbpDtU3dRmp7EXlNVA8ziQc4hY3H7BHXM1J49nEmiqc3svnqMReW+PGqbZKQ==", + "dev": true, + "requires": { + "unist-util-is": "^4.0.0" + } + }, + "unist-util-is": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-4.1.0.tgz", + "integrity": "sha512-ZOQSsnce92GrxSqlnEEseX0gi7GH9zTJZ0p9dtu87WRb/37mMPO2Ilx1s/t9vBHrFhbgweUwb+t7cIn5dxPhZg==", + "dev": true + }, + "unist-util-stringify-position": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-2.0.3.tgz", + "integrity": "sha512-3faScn5I+hy9VleOq/qNbAd6pAx7iH5jYBMS9I1HgQVijz/4mv5Bvw5iw1sC/90CODiKo81G/ps8AJrISn687g==", + "dev": true, + "requires": { + "@types/unist": "^2.0.2" + } + }, "universalify": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz", @@ -27883,6 +29884,36 @@ "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=", "dev": true }, + "vfile": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/vfile/-/vfile-4.2.1.tgz", + "integrity": "sha512-O6AE4OskCG5S1emQ/4gl8zK586RqA3srz3nfK/Viy0UPToBc5Trp9BVFb1u0CjsKrAWwnpr4ifM/KBXPWwJbCA==", + "dev": true, + "requires": { + "@types/unist": "^2.0.0", + "is-buffer": "^2.0.0", + "unist-util-stringify-position": "^2.0.0", + "vfile-message": "^2.0.0" + }, + "dependencies": { + "is-buffer": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.5.tgz", + "integrity": "sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==", + "dev": true + } + } + }, + "vfile-message": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-2.0.4.tgz", + "integrity": "sha512-DjssxRGkMvifUOJre00juHoP9DPWuzjxKuMDrhNbk2TdaYYBNMStsNhEOt3idrtI12VQYM/1+iM0KOzXi4pxwQ==", + "dev": true, + "requires": { + "@types/unist": "^2.0.0", + "unist-util-stringify-position": "^2.0.0" + } + }, "w3c-hr-time": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz", @@ -28564,6 +30595,12 @@ "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz", "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==", "dev": true + }, + "zwitch": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-1.0.5.tgz", + "integrity": "sha512-V50KMwwzqJV0NpZIZFwfOD5/lyny3WlSzRiXgA0G7VUnRlqttta1L6UQIHzd6EuBY/cHGfwTIck7w1yH6Q5zUw==", + "dev": true } } } diff --git a/package.json b/package.json index 62f50ec53..909da007b 100644 --- a/package.json +++ b/package.json @@ -88,6 +88,9 @@ "style-loader": "^3.3.1", "stylelint": "^14.3.0", "stylelint-config-recommended-scss": "^5.0.2", + "stylelint-declaration-block-no-ignored-properties": "^2.5.0", + "stylelint-group-selectors": "^1.0.8", + "stylelint-high-performance-animation": "^1.6.0", "typescript": "^4.5.5", "webpack": "^5.68.0", "webpack-bundle-analyzer": "^4.5.0", diff --git a/plugins/wholePixel.js b/plugins/wholePixel.js new file mode 100644 index 000000000..2bd941176 --- /dev/null +++ b/plugins/wholePixel.js @@ -0,0 +1,82 @@ +const stylelint = require('stylelint'); +const postcss = require('postcss'); + +const ruleName = 'plugin/whole-pixel'; + +const isString = (s) => typeof s === 'string'; + +const messages = stylelint.utils.ruleMessages(ruleName, { + expected: (unfixed, fixed) => `Expected "${unfixed}" to be "${fixed}"`, +}); + +const PX_PER_REM = 16; +const unitRegex = /(px|rem)$/; +const numberRegex = /^([-0-9.]+)/; + +module.exports = stylelint.createPlugin(ruleName, (primaryOption, secondaryOptionObject, context) => { + const secondaryOptions = secondaryOptionObject || {}; + return (root, result) => { + const validOptions = stylelint.utils.validateOptions( + result, + ruleName, + { + actual: secondaryOptions, + possible: { + pxPerRem: (value) => value % 1 === 0, + ignoreList: [isString], + }, + }, + ); + + if (!validOptions) { + return; + } + const pxPerRem = Number(secondaryOptions.pxPerRem) || PX_PER_REM; + const ignoreList = secondaryOptions.ignoreList || []; + + const isAutoFixing = Boolean(context.fix); + + const isValid = (value, unit) => { + if (unit === 'px') return Number.isInteger(value); + if (unit === 'rem') return Number.isInteger(value * pxPerRem); + }; + + const suggestFix = (value, unit) => { + if (unit === 'px') return `${Math.round(value)}px`; + if (unit === 'rem') return `${Math.round(value * pxPerRem) / pxPerRem}rem`; + }; + + const handleValue = (decl, value) => { + if (!unitRegex.test(value)) return; + const matched = value.match(numberRegex); + if (!matched) return; + const valueNumberString = matched[0]; + const valueNumber = parseFloat(valueNumberString); + const unit = value.replace(valueNumberString, ''); + + if (isValid(valueNumber, unit)) return; + const suggestedValue = suggestFix(valueNumber, unit); + if (isAutoFixing) { + decl.value = decl.value.replace(value, suggestedValue); + } else { + stylelint.utils.report({ + ruleName, + result, + node: decl, + message: messages.expected(value, suggestedValue), + word: value, + }); + } + }; + + root.walkDecls(decl => { + if (!decl.value || ignoreList.includes(decl.prop)) return; + const values = postcss.list.space(decl.value); + if (!values?.length) return; + values.forEach((value) => handleValue(decl, value)); + }); + }; +}); + +module.exports.ruleName = ruleName; +module.exports.messages = messages; diff --git a/src/components/auth/Auth.scss b/src/components/auth/Auth.scss index 7b9484e84..a23f2581e 100644 --- a/src/components/auth/Auth.scss +++ b/src/components/auth/Auth.scss @@ -6,14 +6,15 @@ text-align: center; @media (min-width: 600px) and (min-height: 450px) { - padding: 6.8rem 1.5rem 1.5rem; + padding: 6.8125rem 1.5rem 1.5rem; &.qr { padding-top: 4rem; } } - #logo, .AvatarEditable label { + #logo, + .AvatarEditable label { display: block; margin-left: auto; margin-right: auto; @@ -29,7 +30,7 @@ } #logo { - background: url('../../assets/telegram-logo.svg') center no-repeat; + background: url("../../assets/telegram-logo.svg") center no-repeat; background-size: 100%; } @@ -100,13 +101,15 @@ justify-content: center; cursor: pointer; - &:hover, &:focus { + &:hover, + &:focus { opacity: 1; } } #auth-qr-form { - .qr-container, .qr-loading { + .qr-container, + .qr-loading { height: 280px; } @@ -121,10 +124,10 @@ } canvas { - padding: .625rem; + padding: 0.625rem; border-radius: var(--border-radius-default); background: var(--color-white); - margin-top: -.625rem; + margin-top: -0.625rem; } } @@ -148,8 +151,8 @@ display: flex; justify-content: center; align-items: center; - min-width: 1.4rem; - height: 1.4rem; + min-width: 1.375rem; + height: 1.375rem; padding: 0; margin: 0 0.75rem 0 0; background: var(--color-primary); diff --git a/src/components/auth/CountryCodeInput.scss b/src/components/auth/CountryCodeInput.scss index 4363fca7c..538d8c08c 100644 --- a/src/components/auth/CountryCodeInput.scss +++ b/src/components/auth/CountryCodeInput.scss @@ -1,5 +1,4 @@ .CountryCodeInput { - .input-group { cursor: pointer; @@ -18,13 +17,13 @@ position: absolute; top: 1.125rem; right: 1rem; - width: .75rem; - height: .75rem; + width: 0.75rem; + height: 0.75rem; border: 2px solid var(--color-text-secondary); border-top: 0; border-left: 0; transform: scaleY(1) rotate(45deg); - transition: color .2s ease, transform .2s ease, top .2s ease; + transition: color 0.2s ease, transform 0.2s ease, top 0.2s ease; &.open { border-color: var(--color-primary); @@ -54,7 +53,7 @@ &.no-results button { justify-content: center; - padding: .5rem 1rem; + padding: 0.5rem 1rem; span { font-size: 0.875rem; @@ -71,7 +70,7 @@ height: 2rem; display: inline-block; vertical-align: 4px; - margin: -.5rem .125rem; + margin: -0.5rem 0.125rem; } } diff --git a/src/components/calls/group/GroupCall.scss b/src/components/calls/group/GroupCall.scss index 0532036e6..7858267ca 100644 --- a/src/components/calls/group/GroupCall.scss +++ b/src/components/calls/group/GroupCall.scss @@ -8,13 +8,13 @@ .modal-dialog { max-height: calc(100% - 4rem); - background: #181F27; + background: #181f27; } .Menu .bubble { - --color-background: #232A34; - --color-chat-hover: #2F363E; - --color-item-active: #2F363E; + --color-background: #232a34; + --color-chat-hover: #2f363e; + --color-item-active: #2f363e; --color-text: #fff; box-shadow: 0 0.25rem 0.5rem 0.125rem rgba(16, 16, 16, 0.3); } @@ -34,7 +34,7 @@ margin-top: auto; margin-bottom: 0; transform: translate3d(0, 100%, 0); - transition: transform .3s ease, opacity .3s ease; + transition: transform 0.3s ease, opacity 0.3s ease; } .modal-backdrop { @@ -75,7 +75,7 @@ .participants { margin-top: 0.75rem; - background: #222B34; + background: #222b34; border-radius: 0.75rem; .Loading { @@ -87,12 +87,12 @@ display: flex; align-items: center; border-radius: 0.75rem; - transition: .15s ease-out background-color; + transition: 0.15s ease-out background-color; cursor: pointer; color: var(--color-text-secondary); &:hover { - background: #2F363E; + background: #2f363e; } .text { @@ -139,7 +139,7 @@ content: ""; width: 100%; height: 2rem; - background: linear-gradient(0deg, #181F27, rgba(24, 31, 39, 0)); + background: linear-gradient(0deg, #181f27, rgba(24, 31, 39, 0)); z-index: 0; top: -2rem; } @@ -182,7 +182,8 @@ align-items: center; } - .small-button, .smaller-button { + .small-button, + .smaller-button { outline: none; border: 0; background: #15415b; @@ -210,7 +211,7 @@ } .small-button.speaker { - background: #2B3A51; + background: #2b3a51; &.active { background: #496092; @@ -218,7 +219,7 @@ } .small-button.leave { - background: #5A2824; + background: #5a2824; &:hover { background: #49201d; @@ -233,7 +234,6 @@ } } - &.landscape .scrollable { display: flex; flex-direction: row; @@ -293,7 +293,8 @@ } } - .MicrophoneButton, .microphone-wrapper { + .MicrophoneButton, + .microphone-wrapper { width: 3rem; height: 3rem; diff --git a/src/components/calls/group/GroupCallParticipant.scss b/src/components/calls/group/GroupCallParticipant.scss index edefdc39d..f5e7dc1da 100644 --- a/src/components/calls/group/GroupCallParticipant.scss +++ b/src/components/calls/group/GroupCallParticipant.scss @@ -6,11 +6,11 @@ color: #fff; padding: 0.5rem 0.75rem; border-radius: 0.75rem; - transition: .15s ease-out background-color; + transition: 0.15s ease-out background-color; cursor: pointer; &:hover { - background: #2F363E; + background: #2f363e; } audio { @@ -36,19 +36,19 @@ text-overflow: ellipsis; white-space: nowrap; overflow: hidden; - color: #848D94; + color: #848d94; font-size: 0.75rem; &.blue { - color: #4DA6E0; + color: #4da6e0; } &.green { - color: #57BC6C; + color: #57bc6c; } &.red { - color: #FF706F; + color: #ff706f; } } } @@ -62,12 +62,12 @@ height: 2.75rem; margin-left: auto; font-size: 1.5rem; - color: #FF706F; + color: #ff706f; } &.can-self-unmute { .microphone { - color: #848D94; + color: #848d94; } } diff --git a/src/components/calls/group/GroupCallTopPane.scss b/src/components/calls/group/GroupCallTopPane.scss index ece4000ed..182866904 100644 --- a/src/components/calls/group/GroupCallTopPane.scss +++ b/src/components/calls/group/GroupCallTopPane.scss @@ -19,11 +19,11 @@ content: ""; display: block; position: absolute; - top: -.1875rem; + top: -0.1875rem; left: 0; right: 0; - height: .125rem; - box-shadow: 0 .125rem .125rem var(--color-light-shadow); + height: 0.125rem; + box-shadow: 0 0.125rem 0.125rem var(--color-light-shadow); } &.is-hidden { @@ -81,7 +81,6 @@ } } - @media (min-width: 1440px) { #Main.right-column-open .MiddleHeader .GroupCallTopPane { width: calc(100% - var(--right-column-width)); diff --git a/src/components/common/Audio.scss b/src/components/common/Audio.scss index 8208eadde..71598bc30 100644 --- a/src/components/common/Audio.scss +++ b/src/components/common/Audio.scss @@ -37,7 +37,7 @@ } .toggle-play { - margin-inline-end: .5rem; + margin-inline-end: 0.5rem; &.translucent-white { color: rgba(255, 255, 255, 0.8); @@ -46,7 +46,7 @@ &.smaller { width: 3rem; height: 3rem; - margin-inline-end: .75rem; + margin-inline-end: 0.75rem; i { font-size: 1.625rem; @@ -61,17 +61,18 @@ position: absolute; &.icon-play { - margin-left: .1875rem; + margin-left: 0.1875rem; @media (max-width: 600px) { - margin-left: .125rem; + margin-left: 0.125rem; } } } - .icon-play, .icon-pause { + .icon-play, + .icon-pause { opacity: 1; transform: scale(1); - transition: opacity .4s, transform .6s cubic-bezier(0.34, 1.56, 0.64, 1); + transition: opacity 0.4s, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); } &.play .icon-pause, @@ -79,7 +80,7 @@ &.loading .icon-play, &.loading .icon-pause { opacity: 0; - transform: scale(.5); + transform: scale(0.5); } } @@ -90,7 +91,7 @@ padding: 0; left: 1.9375rem; top: 1.9375rem; - border: .125rem solid var(--background-color); + border: 0.125rem solid var(--background-color); z-index: 1; i { @@ -101,7 +102,7 @@ &.bigger .download-button { left: 2rem; top: 2rem; - border: .125rem solid var(--color-background); + border: 0.125rem solid var(--color-background); } .content { @@ -130,17 +131,17 @@ } .voice-duration { - margin: .25rem 0 0; - font-size: .875rem; + margin: 0.25rem 0 0; + font-size: 0.875rem; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; display: flex; align-items: flex-end; &.unread::after { - content: ''; + content: ""; position: relative; - margin: 0 0 .375rem .25rem; + margin: 0 0 0.375rem 0.25rem; width: 0.4375rem; height: 0.4375rem; border-radius: 50%; @@ -150,7 +151,7 @@ body.is-ios & { .voice-duration.unread::after { - margin-bottom: .4375rem; + margin-bottom: 0.4375rem; } } @@ -167,7 +168,7 @@ .meta, .performer, .date { - font-size: .875rem; + font-size: 0.875rem; color: var(--color-text-secondary); margin: 0; overflow: hidden; @@ -177,7 +178,7 @@ } .duration { - font-size: .875rem; + font-size: 0.875rem; color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; @@ -222,7 +223,7 @@ touch-action: none; &::before { - content: ''; + content: ""; position: absolute; width: 100%; top: 6px; @@ -232,7 +233,8 @@ } } - .seekline-buffered-progress, .seekline-play-progress { + .seekline-buffered-progress, + .seekline-play-progress { position: absolute; height: 2px; border-radius: 2px; @@ -267,7 +269,7 @@ right: 100%; &::after { - content: ''; + content: ""; position: absolute; top: -6px; right: -6px; @@ -306,7 +308,7 @@ left: 0.1875rem; } - &[dir=rtl] { + &[dir="rtl"] { .media-loading { left: auto !important; right: 0; @@ -319,17 +321,17 @@ height: 2.25rem; } - &[dir=rtl] { + &[dir="rtl"] { &:last-child { margin-bottom: 0.625rem; } .toggle-play { - margin-left: .5rem; + margin-left: 0.5rem; margin-right: 0; &.smaller { - margin-left: .75rem; + margin-left: 0.75rem; margin-right: 0; } } @@ -350,6 +352,6 @@ } } -.has-replies .Audio[dir=rtl] { +.has-replies .Audio[dir="rtl"] { margin-bottom: 1.625rem; } diff --git a/src/components/common/Avatar.scss b/src/components/common/Avatar.scss index 18615c0ab..c9bb6c02f 100644 --- a/src/components/common/Avatar.scss +++ b/src/components/common/Avatar.scss @@ -28,29 +28,29 @@ font-size: 2.5rem; &.icon-reply-filled { - transform: scale(.7); + transform: scale(0.7); } } &.size-micro { width: 1rem; height: 1rem; - font-size: 0.5125rem; + font-size: 0.5rem; .emoji { - width: .5625rem; - height: .5625rem; + width: 0.5625rem; + height: 0.5625rem; } } &.size-tiny { width: 2rem; height: 2rem; - font-size: .875rem; + font-size: 0.875rem; .emoji { - width: .875rem; - height: .875rem; + width: 0.875rem; + height: 0.875rem; } } @@ -60,8 +60,8 @@ font-size: 0.875rem; .emoji { - width: .875rem; - height: .875rem; + width: 0.875rem; + height: 0.875rem; } } @@ -108,11 +108,11 @@ position: relative; &::after { - content: ''; + content: ""; display: block; position: absolute; - bottom: 0.05rem; - right: 0.05rem; + bottom: 0.0625rem; + right: 0.0625rem; width: 0.875rem; height: 0.875rem; border-radius: 50%; diff --git a/src/components/common/CalendarModal.scss b/src/components/common/CalendarModal.scss index 441219bd7..7151cb761 100644 --- a/src/components/common/CalendarModal.scss +++ b/src/components/common/CalendarModal.scss @@ -2,7 +2,7 @@ .modal-dialog { max-width: 26.25rem; .modal-content { - padding: .375rem 1rem 1rem; + padding: 0.375rem 1rem 1rem; } } @@ -34,7 +34,7 @@ text-transform: none; + .Button { - margin-top: .5rem; + margin-top: 0.5rem; } } } @@ -49,11 +49,11 @@ font-size: 1.25rem; @media (max-width: 600px) { - margin-left: .75rem; + margin-left: 0.75rem; } & ~ .Button { - color: var(--color-primary) + color: var(--color-primary); } } @@ -68,10 +68,10 @@ border-radius: 4rem; outline: none !important; font-weight: 500; - margin: .125rem .625rem; + margin: 0.125rem 0.625rem; @media (max-width: 600px) { - margin: .25rem .375rem; + margin: 0.25rem 0.375rem; } &.weekday { diff --git a/src/components/common/DeleteChatModal.scss b/src/components/common/DeleteChatModal.scss index 1fbdf91c0..f2155e899 100644 --- a/src/components/common/DeleteChatModal.scss +++ b/src/components/common/DeleteChatModal.scss @@ -8,14 +8,14 @@ } .modal-title:not(:only-child) { - margin: 0 0 0 .75rem; + margin: 0 0 0 0.75rem; } .modal-content { - padding: .5rem 1.25rem; + padding: 0.5rem 1.25rem; } .confirm-dialog-button { - margin-right: -.625rem; + margin-right: -0.625rem; } } diff --git a/src/components/common/DotAnimation.scss b/src/components/common/DotAnimation.scss index 35d8b48c0..9c9ef1602 100644 --- a/src/components/common/DotAnimation.scss +++ b/src/components/common/DotAnimation.scss @@ -8,11 +8,11 @@ overflow: hidden; &::after { - content: '...'; + content: "..."; animation: dot-animation 1s steps(4, start) infinite; - html[lang=ar] &, - html[lang=fa] & { + html[lang="ar"] &, + html[lang="fa"] & { animation-name: dot-animation-rtl; } } diff --git a/src/components/common/EmbeddedMessage.scss b/src/components/common/EmbeddedMessage.scss index 1a2a36d8e..7b8201f00 100644 --- a/src/components/common/EmbeddedMessage.scss +++ b/src/components/common/EmbeddedMessage.scss @@ -1,10 +1,10 @@ .EmbeddedMessage { display: flex; align-items: center; - font-size: calc(var(--message-text-size, 1rem) - .125rem); + font-size: calc(var(--message-text-size, 1rem) - 0.125rem); line-height: 1.125rem; - margin: 0 -0.25rem .0625rem; - padding: .1875rem 0.25rem .1875rem .4375rem; + margin: 0 -0.25rem 0.0625rem; + padding: 0.1875rem 0.25rem 0.1875rem 0.4375rem; border-radius: var(--border-radius-messages-small); position: relative; overflow: hidden; @@ -25,13 +25,13 @@ box-shadow: 0 1px 2px var(--color-default-shadow); &::before { - left: .625rem; - top: .625rem; - bottom: .625rem; + left: 0.625rem; + top: 0.625rem; + bottom: 0.625rem; } img:not(.emoji) { - margin-inline-start: .5rem; + margin-inline-start: 0.5rem; } &:dir(rtl) { @@ -40,12 +40,12 @@ } &::before { - content: ''; + content: ""; display: block; position: absolute; - top: .3125rem; - bottom: .3125rem; - left: .3125rem; + top: 0.3125rem; + bottom: 0.3125rem; + left: 0.3125rem; width: 2px; background: var(--accent-color); border-radius: 2px; @@ -60,7 +60,7 @@ } .message-title { - font-size: calc(var(--message-text-size, 1rem) - .125rem); + font-size: calc(var(--message-text-size, 1rem) - 0.125rem); } .message-text { @@ -108,8 +108,8 @@ width: 2rem; height: 2rem; object-fit: cover; - border-radius: .25rem; - margin-left: .25rem; + border-radius: 0.25rem; + margin-left: 0.25rem; flex-shrink: 0; &.round { @@ -119,7 +119,7 @@ &.inside-input { padding-inline-start: 0.5625rem; - margin: 0 0 -.125rem -0.1875rem; + margin: 0 0 -0.125rem -0.1875rem; display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr; @@ -128,15 +128,15 @@ --hover-color: var(--color-interactive-element-hover); &::before { - bottom: .3125rem; + bottom: 0.3125rem; } img:not(.emoji) { - margin-left: .125rem; + margin-left: 0.125rem; } .message-text { - margin-inline-start: .375rem; + margin-inline-start: 0.375rem; } .message-title { diff --git a/src/components/common/File.scss b/src/components/common/File.scss index 5f74271f2..3064fce81 100644 --- a/src/components/common/File.scss +++ b/src/components/common/File.scss @@ -24,7 +24,7 @@ .file-preview { width: 3.375rem; height: 3.375rem; - margin-inline-end: .75rem; + margin-inline-end: 0.75rem; border-radius: var(--border-radius-messages-small); background: var(--color-primary); display: flex; @@ -39,7 +39,7 @@ } .file-icon { - padding: 1rem .75rem .5rem; + padding: 1rem 0.75rem 0.5rem; align-items: flex-end; flex-shrink: 0; position: relative; @@ -48,7 +48,7 @@ .file-ext { font-size: 1rem; font-weight: 500; - transition: opacity .15s; + transition: opacity 0.15s; } &::after { @@ -62,7 +62,7 @@ border-color: transparent var(--background-color) transparent var(--background-color); border-width: 0 1.125rem 1.125rem 0; border-style: solid; - transition: border-width .15s ease-in; + transition: border-width 0.15s ease-in; } } @@ -92,7 +92,7 @@ align-items: center; justify-content: center; opacity: 0; - transition: opacity .25s; + transition: opacity 0.25s; } &.interactive .file-icon-container { @@ -118,14 +118,14 @@ } .file-info { - margin-top: .1875rem; - margin-right: .125rem; + margin-top: 0.1875rem; + margin-right: 0.125rem; white-space: nowrap; overflow: hidden; flex-grow: 1; & + .Link { - font-size: .75rem; + font-size: 0.75rem; color: var(--color-text-secondary); padding-left: 1rem; white-space: nowrap; @@ -145,8 +145,8 @@ } .file-subtitle { - font-size: .875rem; - line-height: .9375rem; + font-size: 0.875rem; + line-height: 0.9375rem; color: var(--secondary-color); max-width: 100%; overflow: hidden; @@ -154,14 +154,14 @@ span + span { &::before { - content: '\00a0\2022\00a0'; + content: "\00a0\2022\00a0"; } } } &.smaller { --background-color: var(--color-background); - --border-radius-messages-small: .3125rem; + --border-radius-messages-small: 0.3125rem; .action-icon, .file-progress, @@ -172,7 +172,7 @@ } .file-icon { - padding-bottom: .375rem; + padding-bottom: 0.375rem; &::after { border-width: 0 1rem 1rem 0; @@ -180,7 +180,7 @@ } .file-info { - margin-top: -.125rem; + margin-top: -0.125rem; } .file-title { @@ -193,11 +193,11 @@ } &:dir(rtl), - &[dir=rtl] { + &[dir="rtl"] { .file-progress, .file-icon, .file-preview { - margin-left: .75rem; + margin-left: 0.75rem; margin-right: 0; } diff --git a/src/components/common/LastMessageMeta.scss b/src/components/common/LastMessageMeta.scss index 1463a2a82..bb2045ff9 100644 --- a/src/components/common/LastMessageMeta.scss +++ b/src/components/common/LastMessageMeta.scss @@ -1,6 +1,6 @@ .LastMessageMeta { - margin-right: .2rem; - padding: .3rem 0 .15rem; + margin-right: 0.1875rem; + padding: 0.3125rem 0 0.125rem; flex-shrink: 0; font-size: 0.75rem; line-height: 1; @@ -9,16 +9,16 @@ .MessageOutgoingStatus { color: var(--color-text-meta-colored); - margin-right: 0.1rem; - font-size: 1.15rem; + margin-right: 0.125rem; + font-size: 1.125rem; body.is-ios & { - margin-bottom: -.125rem; + margin-bottom: -0.125rem; } } .time { color: var(--color-text-meta); - line-height: 1.15rem; + line-height: 1.125rem; } } diff --git a/src/components/common/Media.scss b/src/components/common/Media.scss index 6206fd6c3..f4c138f67 100644 --- a/src/components/common/Media.scss +++ b/src/components/common/Media.scss @@ -7,13 +7,13 @@ .video-duration { position: absolute; - left: .25rem; - top: .25rem; - background: rgba(0, 0, 0, .25); + left: 0.25rem; + top: 0.25rem; + background: rgba(0, 0, 0, 0.25); color: #fff; - font-size: .75rem; - padding: 0 .3125rem; - border-radius: .1875rem; + font-size: 0.75rem; + padding: 0 0.3125rem; + border-radius: 0.1875rem; line-height: 1.125rem; } diff --git a/src/components/common/MessageOutgoingStatus.scss b/src/components/common/MessageOutgoingStatus.scss index 86ba4847d..93b8d14b4 100644 --- a/src/components/common/MessageOutgoingStatus.scss +++ b/src/components/common/MessageOutgoingStatus.scss @@ -1,6 +1,6 @@ .MessageOutgoingStatus { - width: 1.19rem; - height: 1.19rem; + width: 1.1875rem; + height: 1.1875rem; overflow: hidden; display: inline-block; line-height: 1; @@ -11,7 +11,7 @@ } .icon-message-succeeded { - padding-left: 0.13rem; + padding-left: 0.125rem; } .Transition { diff --git a/src/components/common/NothingFound.scss b/src/components/common/NothingFound.scss index e15fa6820..0808120ce 100644 --- a/src/components/common/NothingFound.scss +++ b/src/components/common/NothingFound.scss @@ -14,7 +14,7 @@ .description { color: var(--color-text-secondary); - font-size: .875rem; + font-size: 0.875rem; text-align: center; margin: 1rem 0 0; unicode-bidi: plaintext; diff --git a/src/components/common/PickerSelectedItem.scss b/src/components/common/PickerSelectedItem.scss index 7df996606..332fa9c34 100644 --- a/src/components/common/PickerSelectedItem.scss +++ b/src/components/common/PickerSelectedItem.scss @@ -12,7 +12,7 @@ position: relative; overflow: hidden; flex-shrink: 1; - transition: background-color .15s ease; + transition: background-color 0.15s ease; max-width: calc(50% - 0.5rem); @@ -31,7 +31,8 @@ opacity: 1; } - .Avatar, .item-icon { + .Avatar, + .item-icon { opacity: 0; } } @@ -53,18 +54,19 @@ .SearchInput & { flex: 1 0 auto; position: relative; - top: .25rem; - left: -.125rem; + top: 0.25rem; + left: -0.125rem; color: var(--color-text-secondary); } - .Avatar, .item-icon { + .Avatar, + .item-icon { width: 2rem; height: 2rem; opacity: 1; flex-shrink: 0; - transition: opacity .15s ease; + transition: opacity 0.15s ease; i { font-size: 2rem; @@ -115,10 +117,10 @@ font-size: 1.5rem; color: white; opacity: 0; - transition: opacity .15s ease; + transition: opacity 0.15s ease; } - &[dir=rtl] { + &[dir="rtl"] { padding-left: 1rem; padding-right: 0; @@ -129,7 +131,7 @@ .SearchInput & { left: auto; - right: -.125rem; + right: -0.125rem; } .item-name { diff --git a/src/components/common/ProfileInfo.scss b/src/components/common/ProfileInfo.scss index 9ea2d8cb1..d8a5e2dbb 100644 --- a/src/components/common/ProfileInfo.scss +++ b/src/components/common/ProfileInfo.scss @@ -32,24 +32,24 @@ .photo-dashes { position: absolute; width: 100%; - height: .125rem; - padding: 0 .375rem; + height: 0.125rem; + padding: 0 0.375rem; z-index: 1; display: flex; - top: .5rem; + top: 0.5rem; left: 0; } .photo-dash { flex: 1 1 auto; background-color: var(--color-white); - opacity: .25; - border-radius: .125rem; - margin: 0 .125rem; + opacity: 0.25; + border-radius: 0.125rem; + margin: 0 0.125rem; &.current { - opacity: .75; + opacity: 0.75; } } @@ -64,13 +64,14 @@ appearance: none; background: transparent no-repeat; background-size: 1.25rem; - opacity: .25; - transition: opacity .15s; + opacity: 0.25; + transition: opacity 0.15s; outline: none; cursor: pointer; z-index: 1; - &:hover, .is-touch-env & { + &:hover, + .is-touch-env & { opacity: 1; } @@ -93,8 +94,8 @@ left: 0; width: 100%; min-height: 100px; - padding: 0 1.5rem .5rem; - background: linear-gradient(0deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%); + 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; @@ -108,7 +109,7 @@ } } - &[dir=rtl] { + &[dir="rtl"] { .status { text-align: right; unicode-bidi: plaintext; @@ -126,7 +127,7 @@ line-height: 1.375rem; white-space: pre-wrap; word-break: break-word; - margin-bottom: .25rem; + margin-bottom: 0.25rem; } .VerifiedIcon { @@ -143,10 +144,10 @@ .status { font-size: 0.875rem; - opacity: .5; + opacity: 0.5; } - &[dir=rtl] { + &[dir="rtl"] { .navigation.prev { left: auto; right: 0; @@ -161,7 +162,7 @@ } &.self { - margin: 0 -.5rem .75rem; + margin: 0 -0.5rem 0.75rem; overflow: hidden; &.ghost { @@ -173,7 +174,7 @@ } .info { - padding-bottom: .75rem; + padding-bottom: 0.75rem; } .status { diff --git a/src/components/common/StickerButton.scss b/src/components/common/StickerButton.scss index ee4e2a9dd..756610eba 100644 --- a/src/components/common/StickerButton.scss +++ b/src/components/common/StickerButton.scss @@ -6,7 +6,7 @@ border-radius: var(--border-radius-messages-small); background: transparent no-repeat center; background-size: contain; - transition: background-color .15s ease, opacity .3s ease !important; + transition: background-color 0.15s ease, opacity 0.3s ease !important; position: relative; &.interactive { @@ -19,7 +19,6 @@ opacity: 1; } } - } @media (max-width: 600px) { @@ -38,7 +37,9 @@ margin: 0; } - .AnimatedSticker, img, video { + .AnimatedSticker, + img, + video { position: absolute; top: 0; left: 0; @@ -46,7 +47,8 @@ height: 100%; } - img, video { + img, + video { object-fit: contain; } diff --git a/src/components/common/WebLink.scss b/src/components/common/WebLink.scss index a562b0de1..0467ef31b 100644 --- a/src/components/common/WebLink.scss +++ b/src/components/common/WebLink.scss @@ -1,6 +1,6 @@ .WebLink { min-height: 3rem; - padding: .25rem 0 0 3.75rem; + padding: 0.25rem 0 0 3.75rem; font-size: 0.875rem; line-height: 1.125rem; position: relative; @@ -57,7 +57,7 @@ .site-title { font-size: 1rem; font-weight: 400; - margin-bottom: .0625rem; + margin-bottom: 0.0625rem; line-height: 1.3125rem; } @@ -74,7 +74,7 @@ } .sender-name { - margin-top: .25rem; + margin-top: 0.25rem; } .site-description .emoji { @@ -82,8 +82,8 @@ height: 1rem !important; } - &[dir=rtl] { - padding: .25rem 3.75rem 0 0; + &[dir="rtl"] { + padding: 0.25rem 3.75rem 0 0; .Media, &.without-media::before { diff --git a/src/components/left/LeftColumn.scss b/src/components/left/LeftColumn.scss index 096e328ce..13fe30c67 100644 --- a/src/components/left/LeftColumn.scss +++ b/src/components/left/LeftColumn.scss @@ -4,7 +4,7 @@ .left-header { height: var(--header-height); - padding: 0.375rem 1rem .5rem 0.8125rem; + padding: 0.375rem 1rem 0.5rem 0.8125rem; display: flex; align-items: center; flex-shrink: 0; @@ -36,7 +36,7 @@ height: 2.5rem; + .DropdownMenu { - margin-left: .25rem; + margin-left: 0.25rem; } } } diff --git a/src/components/left/NewChatButton.scss b/src/components/left/NewChatButton.scss index 5a035f87c..ab31c9528 100644 --- a/src/components/left/NewChatButton.scss +++ b/src/components/left/NewChatButton.scss @@ -4,13 +4,13 @@ bottom: 1rem; transform: translateY(5rem); - transition: transform .25s cubic-bezier(0.34, 1.56, 0.64, 1); + transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); body.animation-level-0 & { transform: none !important; opacity: 0; - transition: opacity .15s; + transition: opacity 0.15s; &.revealed { opacity: 1; @@ -22,7 +22,7 @@ @media (max-width: 600px) { // Force rendering in the composite layer to fix the z-index rendering issue - transform: translate3d(0,0,10px); + transform: translate3d(0, 0, 10px); transform-style: preserve-3d; } } @@ -35,21 +35,21 @@ &:not(.active) { .icon-new-chat-filled { - animation: grow-icon .4s ease-out; + animation: grow-icon 0.4s ease-out; } .icon-close { - animation: hide-icon .4s forwards ease-out; + animation: hide-icon 0.4s forwards ease-out; } } &.active { .icon-close { - animation: grow-icon .4s ease-out; + animation: grow-icon 0.4s ease-out; } .icon-new-chat-filled { - animation: hide-icon .4s forwards ease-out; + animation: hide-icon 0.4s forwards ease-out; } } } diff --git a/src/components/left/main/Badge.scss b/src/components/left/main/Badge.scss index 96e578cbe..182309a49 100644 --- a/src/components/left/main/Badge.scss +++ b/src/components/left/main/Badge.scss @@ -1,6 +1,6 @@ .Badge-transition { opacity: 1; - transition: transform .3s cubic-bezier(0.34, 1.56, 0.64, 1); + transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); &:not(.open) { transform: scale(0); @@ -12,7 +12,7 @@ } &.closing { - transition: transform .2s ease-out, opacity .2s ease-out; + transition: transform 0.2s ease-out, opacity 0.2s ease-out; } } @@ -20,7 +20,7 @@ display: flex; .Badge { - margin-inline-start: .5rem; + margin-inline-start: 0.5rem; } } @@ -29,7 +29,7 @@ height: 1.5rem; background: var(--color-gray); border-radius: 0.75rem; - padding: 0 .4375rem; + padding: 0 0.4375rem; color: white; font-size: 0.875rem; line-height: 1.5625rem; @@ -45,10 +45,11 @@ line-height: 1.375rem; min-width: 1.375rem; height: 1.375rem; - padding: 0 .375rem; + padding: 0 0.375rem; } - &.mention, &.unread:not(.muted) { + &.mention, + &.unread:not(.muted) { background: var(--color-green); color: var(--color-white); } @@ -78,10 +79,8 @@ padding: 0.25rem; i { - font-size: .875rem; + font-size: 0.875rem; } } } } - - diff --git a/src/components/left/main/Chat.scss b/src/components/left/main/Chat.scss index 621e9e3d6..b48db3b98 100644 --- a/src/components/left/main/Chat.scss +++ b/src/components/left/main/Chat.scss @@ -14,15 +14,16 @@ &.animate-opacity { will-change: opacity; - transition: opacity .2s ease-out; + transition: opacity 0.2s ease-out; } &.animate-transform { will-change: transform; - transition: transform .2s ease-out; + transition: transform 0.2s ease-out; } - &:hover, &.ListItem.has-menu-open { + &:hover, + &.ListItem.has-menu-open { .Avatar.online::after { border-color: var(--color-chat-hover); } @@ -82,7 +83,7 @@ .info { .subtitle { - margin-top: -.125rem; + margin-top: -0.125rem; } h3 { @@ -93,12 +94,12 @@ .icon-muted { font-size: 1.25rem; margin-left: 0.25rem; - margin-top: -.0625rem; - color: #C6C8CA; + margin-top: -0.0625rem; + color: #c6c8ca; body.is-ios & { margin-top: 0; - margin-right: .5rem; + margin-right: 0.5rem; } } @@ -106,18 +107,19 @@ margin-left: auto; body.is-ios & { - font-size: .875rem; + font-size: 0.875rem; margin-right: 0; } } - .last-message, .typing-status { + .last-message, + .typing-status { padding-right: 0.25rem; flex-grow: 1; color: var(--color-text-secondary); unicode-bidi: plaintext; - &[dir=ltr] { + &[dir="ltr"] { text-align: left; } @@ -133,43 +135,43 @@ .last-message { .draft { &::after { - content: ': '; + content: ": "; } } .colon { - margin-inline-end: .25rem; + margin-inline-end: 0.25rem; } img { width: 1.25rem; height: 1.25rem; object-fit: cover; - border-radius: .125rem; - vertical-align: -.25rem; - margin-inline-end: .25rem; + border-radius: 0.125rem; + vertical-align: -0.25rem; + margin-inline-end: 0.25rem; body.is-ios & { width: 1.125rem; height: 1.125rem; - vertical-align: -.1875rem; + vertical-align: -0.1875rem; } &.round { - border-radius: .625rem; + border-radius: 0.625rem; } } .emoji-small { width: 1rem; height: 1rem; - vertical-align: -.125rem; + vertical-align: -0.125rem; } .icon-play { position: relative; display: inline-block; - font-size: .75rem; + font-size: 0.75rem; color: #fff; margin-inline-start: -1.25rem; margin-inline-end: 0.5rem; @@ -183,15 +185,16 @@ } } - &[dir=rtl] { + &[dir="rtl"] { .info { .LastMessageMeta { margin-left: 0; margin-right: auto; } - .title, .subtitle { - padding-left: .15rem; + .title, + .subtitle { + padding-left: 0.125rem; padding-right: 0; } @@ -200,7 +203,8 @@ margin-right: 0.25rem; } - .last-message, .typing-status { + .last-message, + .typing-status { padding-left: 0.5rem; padding-right: 0; text-align: right; diff --git a/src/components/left/main/EmptyFolder.scss b/src/components/left/main/EmptyFolder.scss index 46b29f411..482edaf86 100644 --- a/src/components/left/main/EmptyFolder.scss +++ b/src/components/left/main/EmptyFolder.scss @@ -17,11 +17,11 @@ .title { font-size: 1.25rem; - margin-bottom: .125rem; + margin-bottom: 0.125rem; } .description { - font-size: .875rem; + font-size: 0.875rem; color: var(--color-text-secondary); body.is-ios &, @@ -31,13 +31,13 @@ } .Button.pill { - margin-top: .625rem; + margin-top: 0.625rem; font-weight: 500; - padding-inline-start: .75rem; + padding-inline-start: 0.75rem; unicode-bidi: plaintext; i { - margin-inline-end: .625rem; + margin-inline-end: 0.625rem; font-size: 1.5rem; } } diff --git a/src/components/left/main/LeftMain.scss b/src/components/left/main/LeftMain.scss index d55ecff5c..8db43f69e 100644 --- a/src/components/left/main/LeftMain.scss +++ b/src/components/left/main/LeftMain.scss @@ -28,7 +28,7 @@ .TabList { justify-content: flex-start; - padding-left: .5625rem; + padding-left: 0.5625rem; padding-bottom: 1px; border-bottom: 0; z-index: 1; @@ -51,7 +51,9 @@ } } - .RecentContacts, .LeftSearch, .search-content { + .RecentContacts, + .LeftSearch, + .search-content { height: 100%; overflow-y: auto; } diff --git a/src/components/left/main/LeftMainHeader.scss b/src/components/left/main/LeftMainHeader.scss index dcc170f66..1198393b1 100644 --- a/src/components/left/main/LeftMainHeader.scss +++ b/src/components/left/main/LeftMainHeader.scss @@ -1,4 +1,4 @@ -@import '../../../styles/mixins'; +@import "../../../styles/mixins"; #LeftMainHeader { position: relative; @@ -6,19 +6,22 @@ .animated-menu-icon { position: absolute; - &, &::before, &::after { + &, + &::before, + &::after { width: 1.125rem; height: 0.125rem; border-radius: 0.125rem; background-color: var(--color-text-secondary); - transition: transform .25s; + transition: transform 0.25s; transform: rotate(0); } - &::before, &::after { + &::before, + &::after { position: absolute; left: 0; - content: ''; + content: ""; } &::before { @@ -44,7 +47,8 @@ &.no-animation { transition: none; - &::before, &::after { + &::before, + &::after { transition: none; } } @@ -56,7 +60,7 @@ margin-left: auto; background: var(--color-gray); border-radius: 0.75rem; - padding: 0 .45rem; + padding: 0 0.4375rem; color: white; font-size: 0.875rem; line-height: 1.5rem; @@ -65,7 +69,7 @@ flex-shrink: 0; } - [dir=rtl] .archived-badge { + [dir="rtl"] .archived-badge { margin-left: 0; margin-right: auto; } diff --git a/src/components/left/search/ChatMessage.scss b/src/components/left/search/ChatMessage.scss index 947d8da64..ee8d0ee44 100644 --- a/src/components/left/search/ChatMessage.scss +++ b/src/components/left/search/ChatMessage.scss @@ -1,15 +1,16 @@ .ChatMessage { &:first-child { - margin-top: .5rem; + margin-top: 0.5rem; } - &:hover, &.selected { + &:hover, + &.selected { .Avatar.online::after { border-color: var(--color-chat-hover); } } .ListItem-button { - padding: .25rem .5rem; + padding: 0.25rem 0.5rem; } .info { @@ -27,7 +28,7 @@ .matching-text-highlight { color: var(--color-text); - background: #CAE3F7; + background: #cae3f7; border-radius: 0.25rem; padding: 0 0.125rem; display: inline-block; @@ -48,7 +49,7 @@ color: var(--color-text); &::after { - content: ': '; + content: ": "; } } @@ -56,15 +57,15 @@ width: 1.25rem; height: 1.25rem; object-fit: cover; - border-radius: .125rem; - vertical-align: -.25rem; - margin-right: .25rem; + border-radius: 0.125rem; + vertical-align: -0.25rem; + margin-right: 0.25rem; } .icon-play { position: relative; display: inline-block; - font-size: .75rem; + font-size: 0.75rem; color: #fff; margin-inline-start: -1.25rem; margin-inline-end: 0.5rem; @@ -78,7 +79,7 @@ justify-content: space-between; } - &[dir=rtl] { + &[dir="rtl"] { .subtitle { text-align: right; } diff --git a/src/components/left/search/DateSuggest.scss b/src/components/left/search/DateSuggest.scss index bc24c2268..2c3ca7295 100644 --- a/src/components/left/search/DateSuggest.scss +++ b/src/components/left/search/DateSuggest.scss @@ -3,23 +3,22 @@ height: 2rem; flex-direction: row; justify-content: space-between; - margin-left: .5rem; - margin-bottom: .5rem; + margin-left: 0.5rem; + margin-bottom: 0.5rem; .date-item { display: flex; flex: 1 1 auto; min-width: 8rem; - margin-top: .375rem; + margin-top: 0.375rem; cursor: pointer; - font-size: .875rem; + font-size: 0.875rem; font-weight: 500; color: var(--color-text-secondary); .icon-calendar { font-size: 1.25rem; - margin-right: .25rem; + margin-right: 0.25rem; } } - -} \ No newline at end of file +} diff --git a/src/components/left/search/LeftSearch.scss b/src/components/left/search/LeftSearch.scss index 79fc15e42..561fd1e9c 100644 --- a/src/components/left/search/LeftSearch.scss +++ b/src/components/left/search/LeftSearch.scss @@ -26,24 +26,24 @@ position: relative; padding-top: 1.25rem; padding-left: 1.25rem; - margin: 0 0 1rem -1.25rem !important; + margin: 0 0 1rem -1.25rem !important; font-weight: 500; - font-size: .9375rem; + font-size: 0.9375rem; color: var(--color-text-secondary); &::before { - content: ''; + content: ""; position: absolute; width: 100%; height: 1px; background: var(--color-borders); - left: .625rem; + left: 0.625rem; top: -1px; } - &[dir=rtl], - &[dir=auto] { + &[dir="rtl"], + &[dir="auto"] { padding-left: 0; padding-right: 1.25rem; margin: 0 -1.25rem 0 1rem !important; @@ -51,7 +51,7 @@ &::before { left: auto; - right: .625rem; + right: 0.625rem; } } } @@ -81,7 +81,7 @@ } .message-date { - font-size: .75rem; + font-size: 0.75rem; color: var(--color-text-secondary); padding-left: 1rem; white-space: nowrap; @@ -89,15 +89,15 @@ .media-list { display: grid; - padding: .5rem; + padding: 0.5rem; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; - grid-gap: .25rem; + grid-gap: 0.25rem; } .Audio { .ProgressSpinner { - margin: -.1875rem 0 0 -.1875rem; + margin: -0.1875rem 0 0 -0.1875rem; } } @@ -108,24 +108,24 @@ color: var(--color-primary); &::before { - content: '@'; - html[lang=ar] & { - content: ' ،@'; - margin-inline-end: .25rem; + content: "@"; + html[lang="ar"] & { + content: " ،@"; + margin-inline-end: 0.25rem; } } &::after { - content: ', '; + content: ", "; color: var(--color-text-secondary); - html[lang=ar] & { - content: ''; + html[lang="ar"] & { + content: ""; } } } - &[dir=rtl] { + &[dir="rtl"] { .status { text-align: right; @@ -142,7 +142,7 @@ color: var(--color-text); &::after { - content: ': '; + content: ": "; white-space: pre; } } @@ -159,10 +159,10 @@ .section-heading { color: var(--color-text-secondary); - font-size: .9375rem; + font-size: 0.9375rem; font-weight: 500; margin-bottom: 0 !important; - padding-top: .875rem; + padding-top: 0.875rem; .Link { float: right; @@ -176,8 +176,8 @@ } } - &[dir=rtl], - &[dir=auto] { + &[dir="rtl"], + &[dir="auto"] { .Link { float: left; margin-left: 1rem; @@ -193,7 +193,7 @@ } .chat-selection { - padding-top: .5rem; + padding-top: 0.5rem; display: flex; flex-shrink: 0; flex-wrap: nowrap; @@ -215,7 +215,7 @@ } } - &[dir=rtl] { + &[dir="rtl"] { > .PickerSelectedItem:last-child { margin-left: auto; margin-right: 0; @@ -227,7 +227,7 @@ height: 100%; } - [dir=rtl] { + [dir="rtl"] { .message-date { padding-left: 0; padding-right: 1rem; diff --git a/src/components/left/search/RecentContacts.scss b/src/components/left/search/RecentContacts.scss index a0f6a9e2d..53777fd13 100644 --- a/src/components/left/search/RecentContacts.scss +++ b/src/components/left/search/RecentContacts.scss @@ -4,7 +4,7 @@ } .top-peers-section { - padding: .5rem 1rem; + padding: 0.5rem 1rem; } .top-peers { @@ -78,7 +78,7 @@ margin-left: auto; } - &[dir=rtl] { + &[dir="rtl"] { .Button { margin-left: 0; margin-right: auto; diff --git a/src/components/left/settings/Settings.scss b/src/components/left/settings/Settings.scss index dbb78813d..c3314a428 100644 --- a/src/components/left/settings/Settings.scss +++ b/src/components/left/settings/Settings.scss @@ -1,4 +1,4 @@ -@import '../../../styles/mixins'; +@import "../../../styles/mixins"; #Settings { height: 100%; @@ -10,7 +10,7 @@ } .left-header { - padding-right: .8125rem; + padding-right: 0.8125rem; } } @@ -50,12 +50,12 @@ } #monkey { - margin-top: .5rem; + margin-top: 0.5rem; margin-bottom: 1rem; } .AnimatedEmoji { - margin-top: .5rem; + margin-top: 0.5rem; margin-bottom: 1.5rem; } } @@ -86,22 +86,22 @@ height: 100%; &.hidden { - display: none + display: none; } } } .settings-main-menu { - padding: 0 0.5rem .75rem; + padding: 0 0.5rem 0.75rem; > .ChatExtra { - padding: 0 .5rem .3125rem; - margin: 0 -.5rem .625rem; - box-shadow: inset 0 -.0625rem 0 0 var(--color-background-secondary-accent); - border-bottom: .625rem solid var(--color-background-secondary); + padding: 0 0.5rem 0.3125rem; + margin: 0 -0.5rem 0.625rem; + box-shadow: inset 0 -0.0625rem 0 0 var(--color-background-secondary-accent); + border-bottom: 0.625rem solid var(--color-background-secondary); .ListItem.narrow { - margin-bottom: .25rem; + margin-bottom: 0.25rem; } } } @@ -120,7 +120,7 @@ margin-bottom: 2rem; position: relative; - &[dir=rtl] { + &[dir="rtl"] { text-align: right; } } @@ -139,7 +139,7 @@ font-size: 1rem; } - &[dir=rtl] { + &[dir="rtl"] { text-align: right; unicode-bidi: plaintext; } @@ -152,7 +152,7 @@ margin-top: 2rem; margin-bottom: 0.75rem; - &[dir=rtl] { + &[dir="rtl"] { text-align: right; } } @@ -178,7 +178,8 @@ color: var(--color-text-secondary); } - .title, .subtitle { + .title, + .subtitle { display: block; text-align: left; } @@ -202,7 +203,7 @@ &.tight { line-height: 1.3125rem; - margin-bottom: .1875rem; + margin-bottom: 0.1875rem; } } } @@ -246,9 +247,10 @@ } } - &[dir=rtl] { + &[dir="rtl"] { .multiline-menu-item { - .title, .subtitle { + .title, + .subtitle { text-align: right; } @@ -265,7 +267,8 @@ margin-bottom: 1.0625rem; } - .Checkbox, .radio-group { + .Checkbox, + .radio-group { margin: 0 -1rem 0.5rem; } @@ -275,7 +278,8 @@ } } - .Radio + .Radio, .Checkbox + .Checkbox { + .Radio + .Radio, + .Checkbox + .Checkbox { margin-top: 2rem; } } @@ -309,7 +313,7 @@ .ReactionStaticEmoji { margin-inline-end: 1rem; - width: 1.5rem + width: 1.5rem; } } @@ -319,5 +323,4 @@ height: 1.5rem; margin-inline-end: 2rem; } - } diff --git a/src/components/left/settings/SettingsGeneralBackground.scss b/src/components/left/settings/SettingsGeneralBackground.scss index 4e3a05ba5..4fedca6cd 100644 --- a/src/components/left/settings/SettingsGeneralBackground.scss +++ b/src/components/left/settings/SettingsGeneralBackground.scss @@ -1,10 +1,10 @@ .SettingsGeneralBackground { .settings-wallpapers { display: grid; - padding: .5rem; + padding: 0.5rem; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; - grid-gap: .25rem; + grid-gap: 0.25rem; } .Loading { diff --git a/src/components/left/settings/SettingsGeneralBackgroundColor.scss b/src/components/left/settings/SettingsGeneralBackgroundColor.scss index 7e90f37f5..29a5f129c 100644 --- a/src/components/left/settings/SettingsGeneralBackgroundColor.scss +++ b/src/components/left/settings/SettingsGeneralBackgroundColor.scss @@ -3,7 +3,8 @@ transition: transform 300ms ease; } - .color-picker, .hue-picker { + .color-picker, + .hue-picker { position: relative; } @@ -47,7 +48,7 @@ .input-group { margin-bottom: 0; - &[dir=rtl] { + &[dir="rtl"] { label { transform: scale(0.75) translate(1.25rem, -2.25rem); } @@ -65,10 +66,10 @@ .predefined-colors { display: grid; - padding: .5rem; + padding: 0.5rem; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; - grid-gap: .25rem; + grid-gap: 0.25rem; div { cursor: pointer; diff --git a/src/components/left/settings/SettingsStickerSet.scss b/src/components/left/settings/SettingsStickerSet.scss index 4026a27e3..d0ed20463 100644 --- a/src/components/left/settings/SettingsStickerSet.scss +++ b/src/components/left/settings/SettingsStickerSet.scss @@ -1,13 +1,13 @@ .SettingsStickerSet { .settings-item &.ListItem { - margin-bottom: .5rem; + margin-bottom: 0.5rem; } .StickerButton, .Button { width: 3rem; height: 3rem; - margin: 0 .5rem 0 0; + margin: 0 0.5rem 0 0; padding: 0; flex: 0 0 3rem; } @@ -23,10 +23,10 @@ justify-content: center; } - &[dir=rtl] { + &[dir="rtl"] { .StickerButton, .Button { - margin: 0 0 0 .5rem; + margin: 0 0 0 0.5rem; } } } diff --git a/src/components/left/settings/WallpaperTile.scss b/src/components/left/settings/WallpaperTile.scss index 0cd8314ce..7ded53f00 100644 --- a/src/components/left/settings/WallpaperTile.scss +++ b/src/components/left/settings/WallpaperTile.scss @@ -16,9 +16,10 @@ .media-inner { overflow: hidden; transform: scale(1); - transition: transform .15s ease; + transition: transform 0.15s ease; - img, canvas { + img, + canvas { position: absolute; left: 0; top: 0; @@ -33,7 +34,7 @@ display: block; border: 2px solid var(--color-primary); opacity: 0; - transition: opacity .15s ease; + transition: opacity 0.15s ease; } &.selected { diff --git a/src/components/left/settings/folders/SettingsFolders.scss b/src/components/left/settings/folders/SettingsFolders.scss index a8751e264..cbd504c79 100644 --- a/src/components/left/settings/folders/SettingsFolders.scss +++ b/src/components/left/settings/folders/SettingsFolders.scss @@ -36,8 +36,8 @@ display: none; } - &[dir=rtl] { - .title h3{ + &[dir="rtl"] { + .title h3 { text-align: right; } } @@ -58,7 +58,7 @@ } } - &[dir=rtl] { + &[dir="rtl"] { .Avatar { margin-left: 1.5rem; margin-right: -0.25rem; diff --git a/src/components/left/settings/folders/SettingsFoldersChatsPicker.scss b/src/components/left/settings/folders/SettingsFoldersChatsPicker.scss index b71f25c21..9384d8bb8 100644 --- a/src/components/left/settings/folders/SettingsFoldersChatsPicker.scss +++ b/src/components/left/settings/folders/SettingsFoldersChatsPicker.scss @@ -40,7 +40,7 @@ margin: 0; } - &[dir=rtl] { + &[dir="rtl"] { .Checkbox { margin-left: 0; margin-right: auto; diff --git a/src/components/main/Main.scss b/src/components/main/Main.scss index 420a91d7b..8a60ec532 100644 --- a/src/components/main/Main.scss +++ b/src/components/main/Main.scss @@ -112,13 +112,9 @@ @media (max-width: 600px) { max-width: none; - width: 100vw !important; transform: translate3d(-20vw, 0, 0); - - @supports (left: env(safe-area-inset-left)) { - left: env(safe-area-inset-left) !important; - width: calc(100vw - env(safe-area-inset-left)); - } + left: env(safe-area-inset-left) !important; + width: calc(100vw - env(safe-area-inset-left)) !important; } } diff --git a/src/components/mediaViewer/MediaViewer.scss b/src/components/mediaViewer/MediaViewer.scss index 1a83519df..5070fd261 100644 --- a/src/components/mediaViewer/MediaViewer.scss +++ b/src/components/mediaViewer/MediaViewer.scss @@ -4,7 +4,7 @@ left: 0; width: 100vw; height: 100%; - background: rgba(0, 0, 0, .9); + background: rgba(0, 0, 0, 0.9); color: #fff; z-index: var(--z-media-viewer); @@ -27,13 +27,16 @@ } body.ghost-animating & { - > .pan-wrapper, > button, .MediaViewerContent img, .MediaViewerContent .VideoPlayer { + > .pan-wrapper, + > button, + .MediaViewerContent img, + .MediaViewerContent .VideoPlayer { display: none; } } body.animation-level-2 & { - transition-duration: .3s !important; + transition-duration: 0.3s !important; } &:not(.open), @@ -67,10 +70,10 @@ .media-viewer-head { display: flex; grid-area: 1 / 1 / 2 / -2; - padding: 0.5rem 1.25rem; position: relative; z-index: var(--z-media-viewer-head); min-width: 0; + padding: 0.5rem max(1.25rem, env(safe-area-inset-left)); & > .Transition { width: 100%; @@ -78,20 +81,12 @@ } @media (max-width: 600px) { - padding: 0.5rem; - - @supports (padding: 0 env(safe-area-inset-left)) { - padding: 0.5rem #{"max(0.5rem, env(safe-area-inset-left))"}; - } + padding: 0.5rem max(0.5rem, env(safe-area-inset-left)); .media-viewer-close { margin-right: 1.5rem; } } - - @supports (padding: 0.5rem env(safe-area-inset-left)) { - padding: 0.5rem #{"max(1.25rem, env(safe-area-inset-left))"}; - } } & > .Transition, @@ -123,7 +118,7 @@ background: transparent no-repeat; background-size: 1.25rem; opacity: 0; - transition: opacity .15s; + transition: opacity 0.15s; outline: none; cursor: pointer; z-index: 1; @@ -132,49 +127,33 @@ width: 20vw; } - &:hover, .is-touch-env & { + &:hover, + .is-touch-env & { opacity: 1; } &.prev { - left: 0; background-image: url("../../assets/media_navigation_previous.svg"); background-position: 1.25rem calc(50% - 2rem); - @supports (left: env(safe-area-inset-left)) { - left: env(safe-area-inset-left); - } + left: env(safe-area-inset-left); - &[dir=rtl] { + &[dir="rtl"] { left: auto; - right: 0; + right: env(safe-area-inset-right); transform: scaleX(-1); - - @supports (left: env(safe-area-inset-left)) { - left: auto; - right: env(safe-area-inset-right); - } } } &.next { - right: 0; + right: env(safe-area-inset-right); background-image: url("../../assets/media_navigation_next.svg"); background-position: calc(100% - 1.25rem) calc(50% - 2rem); - @supports (left: env(safe-area-inset-left)) { - right: env(safe-area-inset-right); - } - - &[dir=rtl]{ - left: 0; + &[dir="rtl"] { right: auto; + left: env(safe-area-inset-left); transform: scaleX(-1); - - @supports (left: env(safe-area-inset-left)) { - right: auto; - left: env(safe-area-inset-left); - } } } @@ -186,7 +165,7 @@ @media (max-width: 600px) { opacity: 0; - transition: opacity .15s ease-in; + transition: opacity 0.15s ease-in; pointer-events: none; .video-controls-visible & { @@ -204,7 +183,7 @@ will-change: transform, opacity; overflow: hidden; border-radius: 0; - transition: transform .2s ease, opacity .2s ease; + transition: transform 0.2s ease, opacity 0.2s ease; &.rounded-corners { border-radius: var(--border-radius-messages); @@ -215,7 +194,7 @@ } body.is-ios & { - transition: transform .2s ease, opacity .2s ease, border-radius .2s ease !important; + transition: transform 0.2s ease, opacity 0.2s ease, border-radius 0.2s ease !important; } img, diff --git a/src/components/mediaViewer/MediaViewerActions.scss b/src/components/mediaViewer/MediaViewerActions.scss index 659d4ffac..e71d36796 100644 --- a/src/components/mediaViewer/MediaViewerActions.scss +++ b/src/components/mediaViewer/MediaViewerActions.scss @@ -1,10 +1,10 @@ .MediaViewerActions { display: flex; margin-inline-start: auto; - margin-inline-end: -.375rem; + margin-inline-end: -0.375rem; .Button { - margin-inline-start: .25rem; + margin-inline-start: 0.25rem; } } diff --git a/src/components/mediaViewer/MediaViewerContent.scss b/src/components/mediaViewer/MediaViewerContent.scss index e442f42d5..b125e0f26 100644 --- a/src/components/mediaViewer/MediaViewerContent.scss +++ b/src/components/mediaViewer/MediaViewerContent.scss @@ -28,7 +28,7 @@ max-width: 100vw; max-height: calc(100vh - 8.25rem); object-fit: contain; - transition: transform .2s; + transition: transform 0.2s; } .spinner-wrapper { diff --git a/src/components/mediaViewer/MediaViewerFooter.scss b/src/components/mediaViewer/MediaViewerFooter.scss index d18e6bd35..30852b66b 100644 --- a/src/components/mediaViewer/MediaViewerFooter.scss +++ b/src/components/mediaViewer/MediaViewerFooter.scss @@ -3,14 +3,14 @@ bottom: 0; padding: 1rem 0; width: 100%; - transition: opacity .15s; + transition: opacity 0.15s; #MediaViewer.zoomed & { display: none; } @media (max-height: 640px) { - padding: .5rem 0 0; + padding: 0.5rem 0 0; } @media (max-width: 600px) { @@ -37,8 +37,8 @@ max-width: var(--messages-container-width); margin: auto; cursor: pointer; - opacity: .5; - transition: opacity .15s; + opacity: 0.5; + transition: opacity 0.15s; &:hover { opacity: 1; @@ -56,11 +56,11 @@ .media-text { margin-bottom: 0; overflow: auto; - padding: 0 .5rem; + padding: 0 0.5rem; text-align: center; - color: rgba(255, 255, 255, .9); - font-size: .9375rem; - letter-spacing: .025rem; + color: rgba(255, 255, 255, 0.9); + font-size: 0.9375rem; + letter-spacing: 0.025rem; max-height: 4.25rem; @media (max-height: 640px) { @@ -68,20 +68,20 @@ } .emoji { - width: .9375rem; - height: .9375rem; + width: 0.9375rem; + height: 0.9375rem; vertical-align: -2px; } &.multiline { &::before { - content: ''; + content: ""; position: absolute; - left: -.75rem; - right: -.75rem; - top: -.25rem; - bottom: -.25rem; - background: rgba(0, 0, 0, .75); + 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); diff --git a/src/components/mediaViewer/PanZoom.scss b/src/components/mediaViewer/PanZoom.scss index 58b681c86..254f863ba 100644 --- a/src/components/mediaViewer/PanZoom.scss +++ b/src/components/mediaViewer/PanZoom.scss @@ -11,7 +11,7 @@ } .pan-container { - transition: transform .2s ease-in; + transition: transform 0.2s ease-in; .pan-wrapper.move & { transition: none; diff --git a/src/components/mediaViewer/SenderInfo.scss b/src/components/mediaViewer/SenderInfo.scss index 24996b033..2c351e4b8 100644 --- a/src/components/mediaViewer/SenderInfo.scss +++ b/src/components/mediaViewer/SenderInfo.scss @@ -4,8 +4,8 @@ color: white; cursor: pointer; - opacity: .5; - transition: .15s opacity; + opacity: 0.5; + transition: 0.15s opacity; &:hover { opacity: 1; @@ -27,7 +27,7 @@ } .title { - line-height: 1.45rem; + line-height: 1.4375rem; font-weight: 500; white-space: pre; overflow: hidden; diff --git a/src/components/mediaViewer/VideoPlayer.scss b/src/components/mediaViewer/VideoPlayer.scss index 4d893f9ae..fc79e1a84 100644 --- a/src/components/mediaViewer/VideoPlayer.scss +++ b/src/components/mediaViewer/VideoPlayer.scss @@ -60,13 +60,13 @@ height: 3.25rem; background-color: rgba(0, 0, 0, 0.5) !important; body:not(.animation-level-0) & { - transition: opacity .3s ease !important; + transition: opacity 0.3s ease !important; } .icon-play { font-size: 1.75rem; position: relative; - left: .125rem; + left: 0.125rem; } } diff --git a/src/components/mediaViewer/VideoPlayerControls.scss b/src/components/mediaViewer/VideoPlayerControls.scss index 8c61069c3..9c5cb7eb6 100644 --- a/src/components/mediaViewer/VideoPlayerControls.scss +++ b/src/components/mediaViewer/VideoPlayerControls.scss @@ -5,10 +5,10 @@ left: 0; bottom: 0; width: 100%; - padding-top: .625rem; - font-size: .875rem; + padding-top: 0.625rem; + font-size: 0.875rem; background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%); - transition: opacity .15s; + transition: opacity 0.15s; opacity: 0; pointer-events: none; @@ -18,7 +18,7 @@ @media (max-width: 600px) { position: fixed; - padding: 1.25rem .5rem .75rem; + padding: 1.25rem 0.5rem 0.75rem; background: none; z-index: var(--z-media-viewer); } @@ -31,7 +31,6 @@ &.mobile { .player-file-size { position: static; - left: auto; transform: none; margin-left: auto; } @@ -48,7 +47,7 @@ .Button { width: 2.25rem; padding: 0; - margin: .25rem; + margin: 0.25rem; height: 1.75rem; @media (max-width: 600px) { height: 2.25rem; @@ -93,7 +92,6 @@ @media (max-width: 600px) { position: static; - left: auto; transform: none; margin-left: auto; margin-right: 1rem; @@ -115,8 +113,8 @@ &-track { position: absolute; top: 50%; - left: -.25rem; - right: -.25rem; + left: -0.25rem; + right: -0.25rem; height: 5px; transform: translateY(-50%); background-color: rgba(255, 255, 255, 0.16); @@ -141,15 +139,15 @@ background: var(--color-primary); &::after { - content: ''; + content: ""; position: absolute; - width: .75rem; - height: .75rem; + width: 0.75rem; + height: 0.75rem; border-radius: 50%; background-color: var(--color-primary); right: 0; top: 50%; - transform: translate(.325rem, -50%); + transform: translate(0.325rem, -50%); } } } diff --git a/src/components/mediaViewer/ZoomControls.scss b/src/components/mediaViewer/ZoomControls.scss index b268c5cac..9c3684fc2 100644 --- a/src/components/mediaViewer/ZoomControls.scss +++ b/src/components/mediaViewer/ZoomControls.scss @@ -2,13 +2,13 @@ position: absolute; bottom: 1.25rem; left: 50%; - background: rgba(0,0,0,.5); + background: rgba(0, 0, 0, 0.5); border-radius: var(--border-radius-default); width: 100%; height: 3.375rem; max-width: 274px; transform: translate3d(-50%, 0, 10px); - transition: opacity .3s ease-in; + transition: opacity 0.3s ease-in; pointer-events: none; &.open { @@ -30,11 +30,11 @@ } .zoom-out { - left: .5rem; + left: 0.5rem; } .zoom-in { - right: .5rem; + right: 0.5rem; } .seekline { @@ -47,11 +47,11 @@ &-track { position: absolute; top: 50%; - left: -.25rem; - right: -.25rem; + left: -0.25rem; + right: -0.25rem; height: 2px; transform: translateY(-50%); - background-color: rgba(255, 255, 255, .5); + background-color: rgba(255, 255, 255, 0.5); border-radius: var(--border-radius-default); } @@ -69,22 +69,22 @@ transition: width 200ms; &::after { - content: ''; + content: ""; position: absolute; - width: .75rem; - height: .75rem; + width: 0.75rem; + height: 0.75rem; border-radius: 50%; background-color: var(--color-white); right: 0; top: 50%; - transform: translate(.325rem, -50%); + transform: translate(0.325rem, -50%); } } &-input { width: 100%; height: 1rem; - top: -.375rem; + top: -0.375rem; opacity: 0; margin: 0; padding: 0; diff --git a/src/components/middle/AudioPlayer.scss b/src/components/middle/AudioPlayer.scss index 4fe05dfbc..b631a1eb2 100644 --- a/src/components/middle/AudioPlayer.scss +++ b/src/components/middle/AudioPlayer.scss @@ -1,8 +1,8 @@ .AudioPlayer { display: flex; margin-left: auto; - margin-top: -.25rem; - margin-bottom: -.25rem; + margin-top: -0.25rem; + margin-bottom: -0.25rem; body.animation-level-0 & { transition: none !important; @@ -10,7 +10,7 @@ > .Button { flex-shrink: 0; - margin: .125rem; + margin: 0.125rem; } > .player-button { @@ -27,24 +27,25 @@ i { font-size: 1.625rem; - margin-top: -.025rem; + margin-top: -0.0625rem; } } i { position: absolute; font-size: 1.9375rem; - margin-top: -.05rem; + margin-top: -0.0625rem; &.icon-play { - margin-left: .1rem; + margin-left: 0.125rem; } } - .icon-play, .icon-pause { + .icon-play, + .icon-pause { opacity: 1; transform: scale(1); - transition: opacity .4s, transform .6s cubic-bezier(0.34, 1.56, 0.64, 1); + transition: opacity 0.4s, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); } &.play .icon-pause, @@ -52,7 +53,7 @@ &.loading .icon-play, &.loading .icon-pause { opacity: 0; - transform: scale(.5); + transform: scale(0.5); } } @@ -70,7 +71,8 @@ visibility: hidden; } - &:hover .volume-slider-spacer, .volume-slider-spacer:hover { + &:hover .volume-slider-spacer, + .volume-slider-spacer:hover { visibility: visible; } @@ -91,7 +93,7 @@ .RangeSlider { margin-bottom: 0; - input[type=range] { + input[type="range"] { margin-bottom: 0; } } @@ -116,7 +118,7 @@ font-weight: bold; border: 2px solid; border-radius: 0.375rem; - padding: 0.15rem 0.25rem; + padding: 0.125rem 0.25rem; font-variant-numeric: tabular-nums; } } @@ -126,7 +128,7 @@ justify-content: center; flex-direction: column; flex-shrink: 1; - padding: 0 .5rem; + padding: 0 0.5rem; position: relative; overflow: hidden; cursor: pointer; @@ -150,22 +152,22 @@ text-overflow: ellipsis; body.is-ios & { - font-size: .9375rem !important; + font-size: 0.9375rem !important; line-height: 1.125rem; } } .subtitle { - font-size: 0.85rem !important; + font-size: 0.8125rem !important; color: var(--color-text-secondary); - line-height: 0.85rem; + line-height: 0.8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - margin: .125rem 0 0; + margin: 0.125rem 0 0; body.is-ios & { - font-size: .9375rem !important; + font-size: 0.9375rem !important; line-height: 1.125rem; } } diff --git a/src/components/middle/ContactGreeting.scss b/src/components/middle/ContactGreeting.scss index 511aec731..5ce351956 100644 --- a/src/components/middle/ContactGreeting.scss +++ b/src/components/middle/ContactGreeting.scss @@ -12,7 +12,7 @@ align-items: center; background: var(--pattern-color); width: 14.5rem; - padding: .75rem 1rem; + padding: 0.75rem 1rem; border-radius: 1.5rem; color: #fff; } @@ -23,7 +23,7 @@ } .description { - font-size: .9375rem; + font-size: 0.9375rem; margin-bottom: 0; } diff --git a/src/components/middle/EmojiInteractionAnimation.scss b/src/components/middle/EmojiInteractionAnimation.scss index 8195789c1..6ab16f4df 100644 --- a/src/components/middle/EmojiInteractionAnimation.scss +++ b/src/components/middle/EmojiInteractionAnimation.scss @@ -36,7 +36,7 @@ left: var(--start-x); transform: scale(var(--scale), 0); transform-origin: left top; - transition: 0.25s cubic-bezier(.29,.81,.27,.99) opacity; + transition: 0.25s cubic-bezier(0.29, 0.81, 0.27, 0.99) opacity; } &.reversed .AnimatedSticker { @@ -44,11 +44,11 @@ } &.playing .AnimatedSticker { - animation: show-interaction forwards 0.25s cubic-bezier(.29,.81,.27,.99); + animation: show-interaction forwards 0.25s cubic-bezier(0.29, 0.81, 0.27, 0.99); } &.reversed.playing .AnimatedSticker { - animation: show-interaction-reversed forwards 0.25s cubic-bezier(.29,.81,.27,.99); + animation: show-interaction-reversed forwards 0.25s cubic-bezier(0.29, 0.81, 0.27, 0.99); } &.hiding .AnimatedSticker { diff --git a/src/components/middle/MessageList.scss b/src/components/middle/MessageList.scss index 212ec07b6..8d8774fef 100644 --- a/src/components/middle/MessageList.scss +++ b/src/components/middle/MessageList.scss @@ -1,9 +1,9 @@ -@import '../../styles/mixins'; +@import "../../styles/mixins"; .MessageList { flex: 1; width: 100%; - margin-bottom: .5rem; + margin-bottom: 0.5rem; overflow: scroll; overflow-x: hidden; @@ -30,15 +30,13 @@ } } - @supports (padding-bottom: env(safe-area-inset-bottom)) { - transition: bottom 150ms ease-out, transform var(--layer-transition); - body.keyboard-visible & { - position: relative; - bottom: calc(0px - env(safe-area-inset-bottom)); + transition: bottom 150ms ease-out, transform var(--layer-transition); + body.keyboard-visible & { + position: relative; + bottom: calc(0px - env(safe-area-inset-bottom)); - body.keyboard-visible.animation-level-0 & { - transition: none !important; - } + body.keyboard-visible.animation-level-0 & { + transition: none !important; } } @@ -76,7 +74,8 @@ } } - &.select-mode-active, &.type-pinned { + &.select-mode-active, + &.type-pinned { margin-bottom: 0; .last-in-list { @@ -98,10 +97,8 @@ .last-in-list { margin-bottom: 4.25rem; - @supports (padding-bottom: env(safe-area-inset-bottom)) { - body:not(.keyboard-visible) & { - margin-bottom: calc(4.25rem + env(safe-area-inset-bottom)); - } + body:not(.keyboard-visible) & { + margin-bottom: calc(4.25rem + env(safe-area-inset-bottom)); } } } @@ -113,7 +110,7 @@ opacity: 1; transform: scale(1); - transition: opacity .2s ease, transform .2s ease; + transition: opacity 0.2s ease, transform 0.2s ease; &:not(.open) { transform: scale(0.8); @@ -169,7 +166,7 @@ opacity: 0.1; .theme-dark & { - opacity: .6; + opacity: 0.6; } } } @@ -191,7 +188,8 @@ color: inherit !important; text-decoration: underline; - &:hover, &:focus { + &:hover, + &:focus { text-decoration: none; } } @@ -208,17 +206,17 @@ display: inline-block; background: var(--pattern-color); color: white; - font-size: calc(var(--message-text-size, 1rem) - .0625rem); + font-size: calc(var(--message-text-size, 1rem) - 0.0625rem); font-weight: 500; line-height: 1.75; - padding: 0 .5rem; + padding: 0 0.5rem; border-radius: var(--border-radius-messages); word-break: break-word; body.is-ios &, body.is-macos & { - font-size: calc(var(--message-text-size, 1rem) - .125rem); - line-height: calc(var(--message-text-size, 1rem) + .5rem); + font-size: calc(var(--message-text-size, 1rem) - 0.125rem); + line-height: calc(var(--message-text-size, 1rem) + 0.5rem); } .emoji-small { @@ -236,11 +234,11 @@ z-index: var(--z-sticky-date); pointer-events: none; opacity: 1; - transition: opacity .3s ease; + transition: opacity 0.3s ease; @media (max-width: 600px) { - margin-top: .5rem; - margin-bottom: .75rem; + margin-top: 0.5rem; + margin-bottom: 0.75rem; } body:not(.is-scrolling-messages) &.stuck { @@ -348,7 +346,7 @@ /* Styles for Firefox */ @supports (scrollbar-width: none) { - padding-right: .6875rem; + padding-right: 0.6875rem; scrollbar-width: none; } } diff --git a/src/components/middle/MessageSelectToolbar.scss b/src/components/middle/MessageSelectToolbar.scss index e7e8292fc..c30f79158 100644 --- a/src/components/middle/MessageSelectToolbar.scss +++ b/src/components/middle/MessageSelectToolbar.scss @@ -1,6 +1,6 @@ .MessageSelectToolbar { position: absolute; - bottom: 0.5rem; + bottom: calc(0.5rem + env(safe-area-inset-bottom)); left: 0.5rem; right: 0.5rem; width: auto; @@ -8,10 +8,6 @@ justify-content: center; margin: 0; - @supports (padding-bottom: env(safe-area-inset-bottom)) { - bottom: calc(0.5rem + env(safe-area-inset-bottom)); - } - .mask-image-disabled &::before { left: auto !important; right: auto !important; diff --git a/src/components/middle/MiddleColumn.scss b/src/components/middle/MiddleColumn.scss index ebee71ce7..f4ec78b98 100644 --- a/src/components/middle/MiddleColumn.scss +++ b/src/components/middle/MiddleColumn.scss @@ -21,7 +21,7 @@ background-size: cover; body:not(.animation-level-0) #root & { - transition: transform var(--layer-transition), background .2s !important; + transition: transform var(--layer-transition), background 0.2s !important; } body.animation-level-0 & { @@ -29,10 +29,10 @@ } .theme-light & { - background-image: url('../../assets/chat-bg.jpg'); + background-image: url("../../assets/chat-bg.jpg"); @media (max-width: 600px) { - background-image: url('../../assets/chat-bg-mobile.jpg'); + background-image: url("../../assets/chat-bg-mobile.jpg"); } } } @@ -123,13 +123,15 @@ } body.animation-level-0 & { - &, &::before { + &, + &::before { transition: none !important; } } } - .message-input-wrapper, &::before { + .message-input-wrapper, + &::before { opacity: 1; transition: opacity var(--select-transition); @@ -141,14 +143,16 @@ > .Button { opacity: 1; transform: scale(1); - transition: opacity var(--select-transition), transform var(--select-transition), background-color 0.15s, color 0.15s; + transition: opacity var(--select-transition), transform var(--select-transition), background-color 0.15s, + color 0.15s; body.animation-level-0 & { transition: none !important; } } - &.hover-disabled, &:not(.shown) { + &.hover-disabled, + &:not(.shown) { pointer-events: none; } @@ -174,7 +178,8 @@ } } - .message-input-wrapper, &::before { + .message-input-wrapper, + &::before { opacity: 0; } @@ -254,25 +259,29 @@ } } - @supports (padding-bottom: env(safe-area-inset-bottom)) { - &:not(.no-composer) { - padding-bottom: env(safe-area-inset-bottom); - top: 0; + &:not(.no-composer) { + padding-bottom: env(safe-area-inset-bottom); + top: 0; - body.keyboard-visible & { - top: env(safe-area-inset-bottom); - } + body.keyboard-visible & { + top: env(safe-area-inset-bottom); } } &::before { content: ""; position: absolute; - top: -.5625rem; + 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%); + 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; @@ -287,7 +296,13 @@ } html.theme-dark &::before { - background: linear-gradient(90deg, rgba(127, 127, 127, 0) 0%, rgba(127, 127, 127, 0.4) 2%, rgba(127, 127, 127, 0.4) 98%, rgba(127, 127, 127, 0) 100%); + background: linear-gradient( + 90deg, + rgba(127, 127, 127, 0) 0%, + rgba(127, 127, 127, 0.4) 2%, + rgba(127, 127, 127, 0.4) 98%, + rgba(127, 127, 127, 0) 100% + ); } } } @@ -319,7 +334,7 @@ .join-subscribe-button, .messaging-disabled { .mask-image-disabled & { - box-shadow: 0 .25rem .5rem .125rem var(--color-default-shadow); + box-shadow: 0 0.25rem 0.5rem 0.125rem var(--color-default-shadow); border-radius: var(--border-radius-messages); } } @@ -344,7 +359,8 @@ } @media (max-width: 600px) { - &:active, &:focus { + &:active, + &:focus { .icon-unpin { color: var(--color-white); } @@ -353,10 +369,10 @@ .icon-unpin { margin-inline-start: -0.4375rem; - margin-inline-end: .75rem; + margin-inline-end: 0.75rem; color: var(--color-text-secondary); font-size: 1.5rem; - transition: color .15s + transition: color 0.15s; } } @@ -364,7 +380,7 @@ .unpin-all-button { height: 3.5rem; transform: scaleX(1); - transition: transform var(--select-transition), background-color .15s, color .15s; + transition: transform var(--select-transition), background-color 0.15s, color 0.15s; .select-mode-active + .middle-column-footer & { box-shadow: none; @@ -377,11 +393,7 @@ } @media (max-width: 600px) { - padding-bottom: 0.75rem; - - @supports (padding-bottom: env(safe-area-inset-bottom)) { - padding-bottom: calc(.75rem + env(safe-area-inset-bottom)); - } + padding-bottom: calc(0.75rem + env(safe-area-inset-bottom)); } .mask-image-disabled &::before { diff --git a/src/components/middle/MiddleHeader.scss b/src/components/middle/MiddleHeader.scss index 8b32d9313..88d98bcd1 100644 --- a/src/components/middle/MiddleHeader.scss +++ b/src/components/middle/MiddleHeader.scss @@ -1,4 +1,4 @@ -@import '../../styles/mixins'; +@import "../../styles/mixins"; @mixin mobile-header-styles() { .HeaderPinnedMessage-wrapper, @@ -8,34 +8,31 @@ left: 0; right: 0; height: 2.875rem; - box-shadow: 0 .125rem .125rem var(--color-light-shadow); + box-shadow: 0 0.125rem 0.125rem var(--color-light-shadow); display: flex; flex-direction: row-reverse; - padding: 0.375rem 0.5rem; - padding-left: 0.75rem; + padding-top: 0.375rem; + 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: var(--color-background); &::before { content: ""; display: block; position: absolute; - top: -.1875rem; + top: -0.1875rem; left: 0; right: 0; - height: .125rem; - box-shadow: 0 .125rem .125rem var(--color-light-shadow); + height: 0.125rem; + box-shadow: 0 0.125rem 0.125rem var(--color-light-shadow); } .HeaderPinnedMessage { max-width: unset; margin-top: -0.1875rem; } - - @supports (padding-left: env(safe-area-inset-left)) { - padding-left: #{"max(0.75rem, env(safe-area-inset-left))"}; - padding-right: #{"max(0.5rem, env(safe-area-inset-right))"}; - } } .AudioPlayer { @@ -45,11 +42,11 @@ &-content { padding: 0 0.5rem; - flex-grow: 1 + flex-grow: 1; } > .Button { - margin: -.0625rem 0 0; + margin: -0.0625rem 0 0; } > .player-close { @@ -83,23 +80,18 @@ width: 100%; box-shadow: 0 2px 2px var(--color-light-shadow); background: var(--color-background); - padding: .5rem .8125rem .5rem 1.5rem; position: relative; z-index: var(--z-middle-header); - - @supports (padding-left: env(safe-area-inset-left)) { - padding-left: #{"max(1.5rem, env(safe-area-inset-left))"}; - padding-right: #{"max(.8125rem, env(safe-area-inset-right))"}; - } + padding-top: 0.5rem; + padding-bottom: 0.5rem; + padding-left: max(1.5rem, env(safe-area-inset-left)); + padding-right: max(0.8125rem, env(safe-area-inset-right)); @media (max-width: 600px) { - padding: 0.5rem; position: relative; - @supports (padding-left: env(safe-area-inset-left)) { - padding-left: #{"max(.5rem, env(safe-area-inset-left))"}; - padding-right: #{"max(.5rem, env(safe-area-inset-right))"}; - } + padding-left: max(0.5rem, env(safe-area-inset-left)); + padding-right: max(0.5rem, env(safe-area-inset-right)); } .Transition { @@ -278,11 +270,12 @@ width: 1.25rem; height: 1.25rem; margin-left: 0.25rem; - margin-top: 0.05rem; + margin-top: 0.0625rem; } } - .status, .typing-status { + .status, + .typing-status { display: inline; unicode-bidi: plaintext; @@ -307,14 +300,15 @@ } .Avatar { - margin-right: .625rem; + margin-right: 0.625rem; // TODO For some reason webpack imports `Audio.scss` second time when loading calls bundle width: 2.5rem !important; height: 2.5rem !important; font-size: 1.0625rem; } - .status, .typing-status { + .status, + .typing-status { font-size: 0.875rem; line-height: 1.125rem; margin: 0; @@ -365,7 +359,6 @@ } } - .HeaderPinnedMessage { min-width: 16rem; } @@ -380,8 +373,8 @@ right: 0; top: 100%; background: var(--color-background); - padding: .25rem .8125rem .25rem 1rem; - box-shadow: 0 .125rem .125rem var(--color-light-shadow); + padding: 0.25rem 0.8125rem 0.25rem 1rem; + box-shadow: 0 0.125rem 0.125rem var(--color-light-shadow); transform: translate3d(0, 0, 0); transition: opacity 0.15s ease, transform var(--layer-transition); @@ -389,11 +382,11 @@ content: ""; display: block; position: absolute; - top: -.1875rem; + top: -0.1875rem; left: 0; right: 0; - height: .125rem; - box-shadow: 0 .125rem .125rem var(--color-light-shadow); + height: 0.125rem; + box-shadow: 0 0.125rem 0.125rem var(--color-light-shadow); } .HeaderPinnedMessage { @@ -411,7 +404,7 @@ transition: opacity 0.15s ease, transform var(--layer-transition); #Main.right-column-open & { - padding-left: calc(var(--right-column-width) + 1rem); + padding-left: calc(var(--right-column-width) + 1rem); } } } @@ -452,7 +445,7 @@ background-color: var(--color-primary-opacity); position: relative; will-change: transform; - transition: transform .25s ease-in-out; + transition: transform 0.25s ease-in-out; } .pinned-message-border-mark { @@ -463,7 +456,7 @@ background: var(--color-primary); border-radius: 0.0625rem; will-change: transform; - transition: transform .25s ease-in-out; + transition: transform 0.25s ease-in-out; } } @@ -488,7 +481,7 @@ text-align: initial; body.is-ios & { - font-size: .9375rem; + font-size: 0.9375rem; } } @@ -502,7 +495,7 @@ margin: 0; body.is-ios & { - font-size: .9375rem; + font-size: 0.9375rem; } } } @@ -563,12 +556,13 @@ } } - .HeaderPinnedMessage-wrapper, .HeaderActions { + .HeaderPinnedMessage-wrapper, + .HeaderActions { .Button { margin-left: 0.25rem; &.tiny { - margin-right: .625rem; + margin-right: 0.625rem; } } } diff --git a/src/components/middle/MobileSearch.scss b/src/components/middle/MobileSearch.scss index 059dddcda..cb4658a1d 100644 --- a/src/components/middle/MobileSearch.scss +++ b/src/components/middle/MobileSearch.scss @@ -8,12 +8,8 @@ background: var(--color-background); display: flex; align-items: center; - padding: 0 0.5rem 0 0.25rem; - - @supports (padding-left: env(safe-area-inset-left)) { - padding-left: #{"max(0.25rem, env(safe-area-inset-left))"}; - padding-right: #{"max(0.5rem, env(safe-area-inset-right))"}; - } + padding-left: max(0.25rem, env(safe-area-inset-left)); + padding-right: max(0.5rem, env(safe-area-inset-right)); > .SearchInput { margin-left: 0.25rem; @@ -31,17 +27,12 @@ background: var(--color-background); display: flex; align-items: center; - padding-left: 1rem; - padding-right: 0.5rem; + padding-left: max(1rem, env(safe-area-inset-left)); + padding-right: max(0.5rem, env(safe-area-inset-right)); - @supports (padding-bottom: env(safe-area-inset-bottom)) { - padding-left: #{"max(1rem, env(safe-area-inset-left))"}; - padding-right: #{"max(0.5rem, env(safe-area-inset-right))"}; - - body:not(.keyboard-visible) & { - padding-bottom: env(safe-area-inset-bottom); - height: calc(3.5rem + env(safe-area-inset-bottom)); - } + body:not(.keyboard-visible) & { + padding-bottom: env(safe-area-inset-bottom); + height: calc(3.5rem + env(safe-area-inset-bottom)); } > .counter { diff --git a/src/components/middle/NoMessages.scss b/src/components/middle/NoMessages.scss index 7a32e44d9..7c02c154d 100644 --- a/src/components/middle/NoMessages.scss +++ b/src/components/middle/NoMessages.scss @@ -15,11 +15,11 @@ flex-direction: column; background: var(--pattern-color); max-width: 20rem; - padding: .75rem 1rem; + padding: 0.75rem 1rem; border-radius: 1.5rem; color: #fff; - &[dir=rtl] { + &[dir="rtl"] { text-align: right; } } @@ -27,13 +27,13 @@ .title { font-weight: 500; font-size: 1rem; - margin-bottom: .25rem; + margin-bottom: 0.25rem; text-align: center; unicode-bidi: plaintext; } .description { - font-size: .9375rem; + font-size: 0.9375rem; margin: 0; padding: 0; list-style: none; @@ -41,16 +41,16 @@ } .list-checkmarks { - font-size: .9375rem; - margin: .25rem 0 0; + font-size: 0.9375rem; + margin: 0.25rem 0 0; padding: 0; list-style: none; unicode-bidi: plaintext; line-height: 1.8; li::before { - content: '✓'; - margin-inline-end: .5rem; + content: "✓"; + margin-inline-end: 0.5rem; } } } diff --git a/src/components/middle/ScrollDownButton.scss b/src/components/middle/ScrollDownButton.scss index 5c9b1b7c4..cace223f8 100644 --- a/src/components/middle/ScrollDownButton.scss +++ b/src/components/middle/ScrollDownButton.scss @@ -3,31 +3,25 @@ position: absolute; bottom: var(--base-bottom-pos); - right: 1rem; + right: max(1rem, env(safe-area-inset-right)); opacity: 0; transform: translateY(4.5rem); - transition: transform .25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity .2s ease; + 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; - @supports (right: env(safe-area-inset-right)) { - right: #{"max(1rem, env(safe-area-inset-right))"}; - } - body.animation-level-0 & { transform: none !important; - transition: opacity .15s; + transition: opacity 0.15s; } @media (max-width: 600px) { right: 0.5rem; bottom: 4.5rem; - @supports (padding-bottom: env(safe-area-inset-bottom)) { - body:not(.keyboard-visible) & { - bottom: calc(4.5rem + env(safe-area-inset-bottom)); - } + body:not(.keyboard-visible) & { + bottom: calc(4.5rem + env(safe-area-inset-bottom)); } } @@ -80,7 +74,7 @@ .unread-count { min-width: 1.5rem; height: 1.5rem; - padding: 0 .45rem; + padding: 0 0.4375rem; border-radius: 0.75rem; font-size: 0.875rem; line-height: 1.5rem; @@ -88,8 +82,8 @@ text-align: center; position: absolute; - top: -0.3rem; - right: -0.3rem; + top: -0.3125rem; + right: -0.3125rem; background: var(--color-green); color: white; @@ -97,7 +91,7 @@ pointer-events: none; @media (max-width: 600px) { - top: -0.7rem; + top: -0.6875rem; right: auto; } } diff --git a/src/components/middle/composer/AttachmentModal.scss b/src/components/middle/composer/AttachmentModal.scss index efa1e2332..3e120f1ae 100644 --- a/src/components/middle/composer/AttachmentModal.scss +++ b/src/components/middle/composer/AttachmentModal.scss @@ -3,17 +3,17 @@ .modal-dialog { max-width: 26.25rem; - @media(max-width: 600px) { + @media (max-width: 600px) { max-height: 100%; padding-bottom: 1.5rem; } } .modal-content { - padding: .5rem 1.25rem 1.875rem; + padding: 0.5rem 1.25rem 1.875rem; max-height: calc(100vh - 3.25rem); - @media(max-width: 600px) { - padding-bottom: .25rem; + @media (max-width: 600px) { + padding-bottom: 0.25rem; } } @@ -29,7 +29,7 @@ flex: 1; width: calc(50% - 0.15rem); height: 12rem; - margin-bottom: 0.3rem; + margin-bottom: 0.3125rem; border-radius: var(--border-radius-default); object-fit: cover; @@ -40,7 +40,7 @@ } &:nth-child(even) { - margin-left: 0.3rem; + margin-left: 0.3125rem; } } } @@ -51,7 +51,7 @@ flex-shrink: 0; display: flex; flex-direction: column; - margin: .75rem 0 1.75rem; + margin: 0.75rem 0 1.75rem; .File:not(:last-child) { margin-bottom: 1.5rem; @@ -80,7 +80,7 @@ &::before, &::after { - content: ''; + content: ""; position: absolute; left: 0; top: 0; @@ -110,7 +110,7 @@ &.hovered { .drop-target::before { - opacity: .95; + opacity: 0.95; } .drop-target::after { diff --git a/src/components/middle/composer/BotCommand.scss b/src/components/middle/composer/BotCommand.scss index 0915a861d..9bc766f38 100644 --- a/src/components/middle/composer/BotCommand.scss +++ b/src/components/middle/composer/BotCommand.scss @@ -9,7 +9,7 @@ padding: 0 1rem; .subtitle { - padding-top: .25rem; + padding-top: 0.25rem; line-height: 1.3125; } } diff --git a/src/components/middle/composer/BotKeyboardMenu.scss b/src/components/middle/composer/BotKeyboardMenu.scss index 50d63c542..25f12411f 100644 --- a/src/components/middle/composer/BotKeyboardMenu.scss +++ b/src/components/middle/composer/BotKeyboardMenu.scss @@ -8,7 +8,7 @@ .content { display: flex; flex-direction: column; - padding: .1875rem .625rem; + padding: 0.1875rem 0.625rem; max-height: 80vh; overflow: auto; @@ -22,7 +22,7 @@ } .row + .row { - margin-top: .375rem; + margin-top: 0.375rem; } .Button { @@ -45,7 +45,7 @@ } .Button + .Button { - margin-left: .375rem; + margin-left: 0.375rem; } } } diff --git a/src/components/middle/composer/Composer.scss b/src/components/middle/composer/Composer.scss index 8e6720319..931bca5e1 100644 --- a/src/components/middle/composer/Composer.scss +++ b/src/components/middle/composer/Composer.scss @@ -1,4 +1,4 @@ -@import '../../../styles/mixins'; +@import "../../../styles/mixins"; .Composer { align-items: flex-end; @@ -6,11 +6,7 @@ .select-mode-active + .middle-column-footer & { position: absolute; padding-right: 2rem; - bottom: 0; - - @supports (padding-bottom: env(safe-area-inset-bottom)) { - bottom: env(safe-area-inset-bottom); - } + bottom: env(safe-area-inset-bottom); @media (max-width: 600px) { padding-right: 1rem; @@ -47,7 +43,7 @@ > .Button { flex-shrink: 0; - margin-left: .5rem; + margin-left: 0.5rem; &:not(.danger) { color: var(--color-composer-button); @@ -77,7 +73,8 @@ position: relative; z-index: 1; - &:hover, &.active { + &:hover, + &.active { background: var(--color-chat-hover); } } @@ -85,54 +82,54 @@ &.recording { position: relative; z-index: 0; - transition: box-shadow .1s; + transition: box-shadow 0.1s; } &.send { .icon-send { - animation: grow-icon .4s ease-out; + animation: grow-icon 0.4s ease-out; } .icon-microphone-alt, .icon-check, .icon-schedule { - animation: hide-icon .4s forwards ease-out; + animation: hide-icon 0.4s forwards ease-out; } } &.schedule { .icon-schedule { - animation: grow-icon .4s ease-out; + animation: grow-icon 0.4s ease-out; } .icon-microphone-alt, .icon-check, .icon-send { - animation: hide-icon .4s forwards ease-out; + animation: hide-icon 0.4s forwards ease-out; } } &.record { .icon-microphone-alt { - animation: grow-icon .4s ease-out; + animation: grow-icon 0.4s ease-out; } .icon-send, .icon-check, .icon-schedule { - animation: hide-icon .4s forwards ease-out; + animation: hide-icon 0.4s forwards ease-out; } } &.edit { .icon-check { - animation: grow-icon .4s ease-out; + animation: grow-icon 0.4s ease-out; } .icon-send, .icon-microphone-alt, .icon-schedule { - animation: hide-icon .4s forwards ease-out; + animation: hide-icon 0.4s forwards ease-out; } } @@ -140,8 +137,12 @@ animation-duration: 0ms !important; } - body.animation-level-0 &, body.animation-level-1 & { - .icon-send, .icon-microphone-alt, .icon-check, .icon-schedule { + body.animation-level-0 &, + body.animation-level-1 & { + .icon-send, + .icon-microphone-alt, + .icon-check, + .icon-schedule { animation-duration: 0ms !important; } } @@ -172,11 +173,12 @@ } .icon-smile { - animation: grow-icon .4s ease-out; + animation: grow-icon 0.4s ease-out; } - .icon-keyboard, .Spinner { - animation: hide-icon .4s forwards ease-out; + .icon-keyboard, + .Spinner { + animation: hide-icon 0.4s forwards ease-out; } &.not-ready > i { @@ -185,21 +187,23 @@ &.is-loading { .Spinner { - animation: grow-icon .4s ease-out; + animation: grow-icon 0.4s ease-out; } - .icon-keyboard, .icon-smile { - animation: hide-icon .4s forwards ease-out; + .icon-keyboard, + .icon-smile { + animation: hide-icon 0.4s forwards ease-out; } } &.menu-opened { .icon-keyboard { - animation: grow-icon .4s ease-out; + animation: grow-icon 0.4s ease-out; } - .icon-smile, .Spinner { - animation: hide-icon .4s forwards ease-out; + .icon-smile, + .Spinner { + animation: hide-icon 0.4s forwards ease-out; } } } @@ -217,9 +221,10 @@ .svg-appendix { position: absolute; - bottom: -.1875rem; - right: -.551rem; // This value is correct. Safari fix - width: .5625rem; + bottom: -0.1875rem; + /* stylelint-disable-next-line plugin/whole-pixel */ + right: -0.551rem; // This value is correct. Safari fix + width: 0.5625rem; height: 1.25rem; transition: opacity 200ms; font-size: 1rem !important; @@ -240,7 +245,7 @@ > .Spinner { align-self: center; --spinner-size: 1.5rem; - margin-right: -.5rem; + margin-right: -0.5rem; } > .Button { @@ -279,20 +284,20 @@ } &.scheduled-button i::after { - content: ''; + content: ""; position: absolute; - top: .75rem; - right: .875rem; - border: .1875rem solid var(--color-background); + top: 0.75rem; + right: 0.875rem; + border: 0.1875rem solid var(--color-background); box-sizing: content-box; - width: .5rem; - height: .5rem; + width: 0.5rem; + height: 0.5rem; border-radius: 50%; background: var(--color-green-darker); - box-shadow: -.375rem -.25rem 0 -.1875rem var(--color-background); + box-shadow: -0.375rem -0.25rem 0 -0.1875rem var(--color-background); @media (max-width: 600px) { - top: .5rem; - right: .5rem; + top: 0.5rem; + right: 0.5rem; } } } @@ -311,14 +316,14 @@ font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Apple Color Emoji", "Helvetica Neue", sans-serif; &::after { - content: ''; - width: .75rem; - height: .75rem; + content: ""; + width: 0.75rem; + height: 0.75rem; background: var(--color-error); - border-radius: .375rem; + border-radius: 0.375rem; position: absolute; top: 50%; - margin-top: -.375rem; + margin-top: -0.375rem; right: 1.3125rem; animation: recording-blink-like-macos 1.5s infinite; } @@ -335,7 +340,8 @@ position: relative; .form-control { - padding: calc((3.25rem - var(--composer-text-size, 1rem) * 1.375) / 2 - var(--border-width, 0) * 2) calc(.9rem - var(--border-width)); + padding: calc((3.25rem - var(--composer-text-size, 1rem) * 1.375) / 2 - var(--border-width, 0) * 2) + calc(0.9rem - var(--border-width)); overflow: hidden; line-height: 1.375; font-family: Roboto, -apple-system, "Apple Color Emoji", "Helvetica Neue", sans-serif; @@ -345,7 +351,8 @@ body.is-ios &, body.is-macos & { - font-family: system-ui, -apple-system, BlinkMacSystemFont, "Roboto", "Apple Color Emoji", "Helvetica Neue", sans-serif; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Roboto", "Apple Color Emoji", "Helvetica Neue", + sans-serif; } &.overflown { @@ -353,7 +360,8 @@ overflow-x: hidden; } - &.touched, &:focus { + &.touched, + &:focus { & + .placeholder-text { display: none; } @@ -386,7 +394,7 @@ left: 0; } - &[dir=rtl] .placeholder-text { + &[dir="rtl"] .placeholder-text { right: 0; } @@ -395,21 +403,24 @@ cursor: default; text-decoration: none; - &:hover, &:active, &:visited { + &:hover, + &:active, + &:visited { text-decoration: underline !important; } } .spoiler { - background-image: url('../../../assets/spoiler-dots-black.png'); + 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; - 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); + 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); } html.theme-dark & .spoiler { - background-image: url('../../../assets/spoiler-dots-white.png'); + background-image: url("../../../assets/spoiler-dots-white.png"); } .clone { @@ -495,14 +506,14 @@ } .placeholder-text { - bottom: .8125rem; - left: .90625rem; + bottom: 0.8125rem; + left: 0.9375rem; } } .composer-tooltip { position: absolute; - bottom: calc(100% + .5rem); + bottom: calc(100% + 0.5rem); left: 0; width: 100%; background: var(--color-background); @@ -540,6 +551,6 @@ opacity: 1; } to { - opacity: .3; + opacity: 0.3; } } diff --git a/src/components/middle/composer/DropTarget.scss b/src/components/middle/composer/DropTarget.scss index 75a2cc705..ba1b50c3f 100644 --- a/src/components/middle/composer/DropTarget.scss +++ b/src/components/middle/composer/DropTarget.scss @@ -7,13 +7,13 @@ max-width: 43.75rem; margin-left: auto; margin-right: auto; - margin-bottom: .3125rem; + margin-bottom: 0.3125rem; display: flex; - color: #A4ACB3; + color: #a4acb3; box-shadow: 0 1px 2px var(--color-default-shadow); @media (max-height: 350px) { - padding: .75rem; + padding: 0.75rem; } &.hovered .target-content { @@ -22,7 +22,7 @@ } & + & { - margin-top: .3125rem; + margin-top: 0.3125rem; } &:last-child { @@ -32,13 +32,13 @@ .target-content { pointer-events: none; background-image: var(--drag-target-border); - border-radius: .5rem; + border-radius: 0.5rem; flex: 1 1 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; - transition: .2s color, .2s background; + transition: 0.2s color, 0.2s background; } .icon { @@ -55,15 +55,15 @@ @media (max-height: 450px) { font-size: 2rem; line-height: 1rem; - margin-bottom: .5rem; - margin-top: .25rem; + margin-bottom: 0.5rem; + margin-top: 0.25rem; } } .title { font-size: 1.3125rem; font-weight: 500; - letter-spacing: -.18px; + letter-spacing: -0.18px; @media (max-height: 450px) { font-size: 1rem; @@ -72,10 +72,10 @@ .description { font-size: 1rem; - letter-spacing: .3px; + letter-spacing: 0.3px; @media (max-height: 450px) { - font-size: .875rem; + font-size: 0.875rem; } } } diff --git a/src/components/middle/composer/EmojiButton.scss b/src/components/middle/composer/EmojiButton.scss index e1834d658..de6944488 100644 --- a/src/components/middle/composer/EmojiButton.scss +++ b/src/components/middle/composer/EmojiButton.scss @@ -10,7 +10,7 @@ font-size: 1.75rem; line-height: 2.5rem; background-color: transparent; - transition: background-color .15s ease; + transition: background-color 0.15s ease; .mac-os-fix & { line-height: inherit; diff --git a/src/components/middle/composer/EmojiPicker.scss b/src/components/middle/composer/EmojiPicker.scss index bd568df81..793b7a3e7 100644 --- a/src/components/middle/composer/EmojiPicker.scss +++ b/src/components/middle/composer/EmojiPicker.scss @@ -52,7 +52,7 @@ content: ""; display: block; flex-shrink: 0; - width: 0.1px; + width: 1px; height: 1rem; } } diff --git a/src/components/middle/composer/EmojiTooltip.scss b/src/components/middle/composer/EmojiTooltip.scss index 94303710e..d5cd79259 100644 --- a/src/components/middle/composer/EmojiTooltip.scss +++ b/src/components/middle/composer/EmojiTooltip.scss @@ -1,6 +1,6 @@ .EmojiTooltip { display: flex; - padding-left: .25rem; + padding-left: 0.25rem; overflow-x: auto; @supports (overflow-x: overlay) { @@ -9,6 +9,6 @@ overflow-y: hidden; .EmojiButton { - flex: 0 0 2.5rem + flex: 0 0 2.5rem; } } diff --git a/src/components/middle/composer/InlineBotTooltip.scss b/src/components/middle/composer/InlineBotTooltip.scss index af52df7c2..c819ebb5f 100644 --- a/src/components/middle/composer/InlineBotTooltip.scss +++ b/src/components/middle/composer/InlineBotTooltip.scss @@ -35,7 +35,9 @@ padding-bottom: 100%; border-radius: 0; - .AnimatedSticker, img, canvas { + .AnimatedSticker, + img, + canvas { position: absolute; top: 0; left: 0; @@ -43,10 +45,10 @@ height: 100% !important; @media (min-width: 600px) { - top: .25rem; - left: .25rem; - width: calc(100% - .5rem) !important; - height: calc(100% - .5rem) !important; + top: 0.25rem; + left: 0.25rem; + width: calc(100% - 0.5rem) !important; + height: calc(100% - 0.5rem) !important; } } } diff --git a/src/components/middle/composer/MentionTooltip.scss b/src/components/middle/composer/MentionTooltip.scss index 36dac7df4..785a3421d 100644 --- a/src/components/middle/composer/MentionTooltip.scss +++ b/src/components/middle/composer/MentionTooltip.scss @@ -21,7 +21,7 @@ } .title { - margin-inline-end: .625rem; + margin-inline-end: 0.625rem; max-width: 70%; } @@ -29,7 +29,7 @@ font-size: 1rem; } - &[dir=rtl] { + &[dir="rtl"] { .status { width: auto; } @@ -47,7 +47,7 @@ .handle { &::before { - content: '@'; + content: "@"; } } diff --git a/src/components/middle/composer/PollModal.scss b/src/components/middle/composer/PollModal.scss index 8def0496e..b1ced1573 100644 --- a/src/components/middle/composer/PollModal.scss +++ b/src/components/middle/composer/PollModal.scss @@ -5,7 +5,7 @@ } .modal-content { - padding: .5rem 1.25rem 1.875rem; + padding: 0.5rem 1.25rem 1.875rem; min-height: 4.875rem; } @@ -28,14 +28,15 @@ overflow: auto; &.overflown { - padding: 0 0.4rem 0.5rem 0.75rem; + padding: 0 0.4375rem 0.5rem 0.75rem; } @media (max-width: 600px) { overflow: hidden; max-height: none; - &, &.overflown { + &, + &.overflown { padding: 0 0.75rem; } } @@ -69,13 +70,13 @@ .note { font-size: smaller; - color: var(--color-text-secondary) + color: var(--color-text-secondary); } .error { font-size: smaller; color: var(--color-error); - margin: -1rem 0 1rem .25rem; + 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 8e04a027a..674e415c8 100644 --- a/src/components/middle/composer/SendAsMenu.scss +++ b/src/components/middle/composer/SendAsMenu.scss @@ -65,9 +65,8 @@ margin-inline-start: 0.5rem; } - .subtitle { - font-size: .9375rem; + font-size: 0.9375rem; color: var(--color-text-secondary); line-height: 1.3125; } diff --git a/src/components/middle/composer/StickerPicker.scss b/src/components/middle/composer/StickerPicker.scss index 5f20f1913..8ace760f2 100644 --- a/src/components/middle/composer/StickerPicker.scss +++ b/src/components/middle/composer/StickerPicker.scss @@ -37,7 +37,7 @@ content: ""; display: block; flex-shrink: 0; - width: 0.1px; + width: 1px; height: 1rem; } diff --git a/src/components/middle/composer/SymbolMenu.scss b/src/components/middle/composer/SymbolMenu.scss index 1d9a1f66c..b2d49e342 100644 --- a/src/components/middle/composer/SymbolMenu.scss +++ b/src/components/middle/composer/SymbolMenu.scss @@ -1,4 +1,4 @@ -@import '../../../styles/mixins'; +@import "../../../styles/mixins"; .SymbolMenu { &.mobile-menu { @@ -7,16 +7,17 @@ right: 0; bottom: 0; background: var(--color-background); - transform: translate3d(0, calc(var(--symbol-menu-height) + var(--symbol-menu-footer-height)), 0); z-index: 1; transition: transform var(--layer-transition); - @supports (padding-bottom: env(safe-area-inset-bottom)) { - padding-right: env(safe-area-inset-right); - padding-bottom: env(safe-area-inset-bottom); - padding-left: env(safe-area-inset-left); - transform: translate3d(0, calc(var(--symbol-menu-height) + var(--symbol-menu-footer-height) + env(safe-area-inset-bottom)), 0); - } + padding-right: env(safe-area-inset-right); + padding-bottom: env(safe-area-inset-bottom); + padding-left: env(safe-area-inset-left); + transform: translate3d( + 0, + calc(var(--symbol-menu-height) + var(--symbol-menu-footer-height) + env(safe-area-inset-bottom)), + 0 + ); &.open { transform: translate3d(0, 0, 0); @@ -37,10 +38,7 @@ &-main { height: var(--symbol-menu-height); - max-height: calc(100vh - var(--symbol-menu-footer-height)); - @supports (padding-bottom: env(safe-area-inset-bottom)) { - max-height: calc(100vh - var(--symbol-menu-footer-height) - env(safe-area-inset-bottom)); - } + max-height: calc(100vh - var(--symbol-menu-footer-height) - env(safe-area-inset-bottom)); } &-footer { @@ -56,7 +54,7 @@ flex-shrink: 0; width: 2.125rem !important; height: 2.125rem; - margin: 0 .25rem; + margin: 0 0.25rem; padding: 0; &.activated { @@ -98,7 +96,8 @@ } } - .Button.bot-commands ~ &, .Button.send-as-button ~ & { + .Button.bot-commands ~ &, + .Button.send-as-button ~ & { .is-pointer-env & > .backdrop { left: 3rem; width: 3.25rem; @@ -106,7 +105,7 @@ } .bubble { - width: calc(var(--symbol-menu-width) + .25rem); // Reserve width for scrollbar + width: calc(var(--symbol-menu-width) + 0.25rem); // Reserve width for scrollbar padding: 0; overflow: hidden; @@ -126,13 +125,8 @@ .symbol-close-button { display: none; position: absolute; - right: .25rem; - top: .25rem; - - @supports (right: env(safe-area-inset-right)) { - right: #{"max(.25rem, env(safe-area-inset-right))"}; - top: #{"max(.25rem, env(safe-area-inset-top))"}; - } + right: max(calc(0.25rem), env(safe-area-inset-right)); + top: max(calc(0.25rem), env(safe-area-inset-top)); } @media (orientation: landscape) { diff --git a/src/components/middle/composer/TextFormatter.scss b/src/components/middle/composer/TextFormatter.scss index f6a7e40a0..9580b361d 100644 --- a/src/components/middle/composer/TextFormatter.scss +++ b/src/components/middle/composer/TextFormatter.scss @@ -1,7 +1,8 @@ .TextFormatter { transform: translate(-50%, -3.25rem); - &, &-link-control { + &, + &-link-control { position: absolute; background: var(--color-background); border-radius: var(--border-radius-messages); @@ -14,7 +15,7 @@ top: 0; opacity: 0; pointer-events: none; - transition: opacity .3s ease; + transition: opacity 0.3s ease; .Modal & { max-width: 100%; @@ -33,7 +34,8 @@ } } - &-buttons, &-link-url-confirm { + &-buttons, + &-link-url-confirm { display: flex; flex-wrap: nowrap; align-items: center; @@ -55,7 +57,8 @@ max-width: 90vw; } - &::before, &::after { + &::before, + &::after { content: ""; display: block; position: absolute; @@ -64,17 +67,17 @@ width: 1rem; z-index: 2; opacity: 0; - transition: opacity .2s ease; + transition: opacity 0.2s ease; } &::before { left: 0; - background: linear-gradient(to right, var(--color-background) .25rem, transparent 1rem) + background: linear-gradient(to right, var(--color-background) 0.25rem, transparent 1rem); } &::after { right: 0; - background: linear-gradient(to left, var(--color-background) .25rem, transparent 1rem) + background: linear-gradient(to left, var(--color-background) 0.25rem, transparent 1rem); } &.mask-left { @@ -93,7 +96,7 @@ &-link-url-confirm { flex-shrink: 0; opacity: 0; - transition: opacity .3s ease; + transition: opacity 0.3s ease; &.shown { opacity: 1; @@ -123,7 +126,7 @@ } &.disabled { - opacity: .5; + opacity: 0.5; pointer-events: none; } } diff --git a/src/components/middle/composer/WebPagePreview.scss b/src/components/middle/composer/WebPagePreview.scss index 7771c857b..7c2f53eeb 100644 --- a/src/components/middle/composer/WebPagePreview.scss +++ b/src/components/middle/composer/WebPagePreview.scss @@ -19,7 +19,7 @@ display: flex; align-items: center; padding-right: 0.625rem; - padding-top: 0.1875rem; + padding-top: 0.1875rem; } --accent-color: var(--color-primary); @@ -48,11 +48,11 @@ max-width: calc(100% - 3.375rem); &::before { - top: .1rem; - bottom: .05rem; + top: 0.125rem; + bottom: 0.0625rem; } - &.with-video .media-inner { // TODO add support for video in previews in composer + &.with-video .media-inner { display: none; } @@ -64,7 +64,7 @@ } .site-title { - margin-top: .125rem; + margin-top: 0.125rem; margin-bottom: 0.1875rem; } diff --git a/src/components/middle/composer/inlineResults/BaseResult.scss b/src/components/middle/composer/inlineResults/BaseResult.scss index 8e62c2ccb..cfc826013 100644 --- a/src/components/middle/composer/inlineResults/BaseResult.scss +++ b/src/components/middle/composer/inlineResults/BaseResult.scss @@ -19,7 +19,7 @@ display: inline-flex; align-content: center; justify-content: center; - margin-inline-end: .5rem; + margin-inline-end: 0.5rem; overflow: hidden; font-size: 1.5rem; @@ -31,7 +31,7 @@ img.emoji { width: 1.5rem; height: 1.5rem; - margin: .75rem 0 0; + margin: 0.75rem 0 0; } } @@ -55,8 +55,8 @@ text-align: left; unicode-bidi: plaintext; } - &[dir=rtl] .title, - &[dir=rtl] .description { + &[dir="rtl"] .title, + &[dir="rtl"] .description { text-align: right; } } diff --git a/src/components/middle/composer/inlineResults/StickerResult.scss b/src/components/middle/composer/inlineResults/StickerResult.scss index 0a1dcdd39..3e74f8dbe 100644 --- a/src/components/middle/composer/inlineResults/StickerResult.scss +++ b/src/components/middle/composer/inlineResults/StickerResult.scss @@ -5,10 +5,12 @@ background: transparent no-repeat center; background-size: contain; cursor: pointer; - transition: background-color .15s ease, opacity .3s ease !important; + transition: background-color 0.15s ease, opacity 0.3s ease !important; position: relative; - .AnimatedSticker, img, canvas { + .AnimatedSticker, + img, + canvas { position: absolute; top: 0; left: 0; diff --git a/src/components/middle/message/Album.scss b/src/components/middle/message/Album.scss index 8782e625a..1e7663c92 100644 --- a/src/components/middle/message/Album.scss +++ b/src/components/middle/message/Album.scss @@ -6,8 +6,12 @@ margin: -0.3125rem -0.5rem 0.3125rem; } + body.is-ios .Message.own .message-content.has-solid-background & { + margin: -0.3125rem -0.5rem 0.3125rem -0.625rem; + } + .forwarded-message & { - margin-bottom: .125rem; + margin-bottom: 0.125rem; .message-content.media.text & { margin: 0 0 0.3125rem; @@ -24,7 +28,9 @@ } > .album-item-select-wrapper .media-inner { - &, & img, & video { + &, + & img, + & video { border-radius: 0 !important; object-fit: cover; } diff --git a/src/components/middle/message/CommentButton.scss b/src/components/middle/message/CommentButton.scss index 2595cf753..77e350825 100644 --- a/src/components/middle/message/CommentButton.scss +++ b/src/components/middle/message/CommentButton.scss @@ -5,19 +5,19 @@ display: flex; width: 100%; align-items: center; - padding: .5625rem .25rem .5625rem .625rem; - padding-inline-start: .625rem; - padding-inline-end: .25rem; + padding: 0.5625rem 0.25rem 0.5625rem 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: .9375rem; + font-size: 0.9375rem; font-weight: 500; line-height: 2rem; color: var(--accent-color); white-space: nowrap; cursor: pointer; - transition: background-color .15s, color .15s; + transition: background-color 0.15s, color 0.15s; user-select: none; body.animation-level-0 & { @@ -25,20 +25,20 @@ } .Message .has-appendix &::before { - content: ''; + content: ""; display: block; position: absolute; - bottom: -.1875rem; - left: -.5625rem; - width: .5625rem; + bottom: -0.1875rem; + left: -0.5625rem; + 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; - transition: opacity .15s, filter .15s; + transition: opacity 0.15s, filter 0.15s; .theme-dark #root & { - filter: invert(.83); + filter: invert(0.83); } body.animation-level-0 & { @@ -53,20 +53,20 @@ bottom: 3rem; height: 3.375rem; border-radius: 1.375rem; - padding: 0.375rem .3125rem .25rem; + padding: 0.375rem 0.3125rem 0.25rem; align-items: flex-start; color: white; - background-color: rgba(0, 0, 0, .2); + background-color: rgba(0, 0, 0, 0.2); opacity: 0; - transition: opacity .2s ease; + transition: opacity 0.2s ease; @media (pointer: coarse) { opacity: 1 !important; } &:hover { - background-color: rgba(0, 0, 0, .28); + background-color: rgba(0, 0, 0, 0.28); } .Message:hover & { @@ -76,7 +76,7 @@ &::after { content: attr(data-cnt); position: absolute; - bottom: -.0625rem; + bottom: -0.0625rem; left: 0; width: 100%; text-align: center; @@ -126,15 +126,15 @@ } .message-content.has-solid-background & { - margin: .375rem -.5rem -.375rem; + margin: 0.375rem -0.5rem -0.375rem; } .message-content.voice & { - margin-bottom: -.5rem; + margin-bottom: -0.5rem; } .message-content.audio & { - margin-bottom: -.8125rem; + margin-bottom: -0.8125rem; } .message-content.audio &, @@ -152,7 +152,7 @@ .icon-comments { font-size: 1.5625rem; line-height: 2rem; - margin-inline-end: .875rem; + margin-inline-end: 0.875rem; } .icon-next { @@ -163,11 +163,11 @@ .recent-repliers { display: inline-flex; align-items: center; - margin-inline-end: .5rem; - margin-inline-start: -.125rem; + margin-inline-end: 0.5rem; + margin-inline-start: -0.125rem; .Avatar { - transition: border .15s; + transition: border 0.15s; border: 2px solid var(--color-background); margin-inline-end: 0; z-index: 3; @@ -187,7 +187,7 @@ } &:not(:first-child) { - margin-inline-start: -.75rem; + margin-inline-start: -0.75rem; } } } @@ -196,13 +196,13 @@ position: relative; &::after { - content: ''; + content: ""; display: inline-block; - width: .5rem; - height: .5rem; + width: 0.5rem; + height: 0.5rem; border-radius: 50%; background: var(--accent-color); - margin-inline-start: .75rem; + margin-inline-start: 0.75rem; } } diff --git a/src/components/middle/message/Contact.scss b/src/components/middle/message/Contact.scss index be7357bc0..cea53e55b 100644 --- a/src/components/middle/message/Contact.scss +++ b/src/components/middle/message/Contact.scss @@ -8,7 +8,7 @@ } .Avatar { - margin-right: 0.8rem; + margin-right: 0.8125rem; } .contact-info { diff --git a/src/components/middle/message/InlineButtons.scss b/src/components/middle/message/InlineButtons.scss index 01aec7f5e..f33071f4e 100644 --- a/src/components/middle/message/InlineButtons.scss +++ b/src/components/middle/message/InlineButtons.scss @@ -17,7 +17,7 @@ text-transform: none; &::before { - content: ''; + content: ""; background-color: var(--color-white); opacity: 0; @@ -35,7 +35,7 @@ background: var(--pattern-color) !important; &::before { - opacity: .4; + opacity: 0.4; } } @@ -48,16 +48,16 @@ } i { - font-size: .875rem; + font-size: 0.875rem; position: absolute; - right: .1875rem; - top: .1875rem; + right: 0.1875rem; + top: 0.1875rem; display: block; &.icon-arrow-right { - font-size: .75rem; - top: .125rem; - right: .125rem; + font-size: 0.75rem; + top: 0.125rem; + right: 0.125rem; transform: rotate(-45deg); } } diff --git a/src/components/middle/message/Invoice.scss b/src/components/middle/message/Invoice.scss index 087b9e8ae..7d206fddb 100644 --- a/src/components/middle/message/Invoice.scss +++ b/src/components/middle/message/Invoice.scss @@ -20,18 +20,17 @@ .description-text { position: absolute; top: 0; - padding: .25rem .5rem; - margin: .25rem; + padding: 0.25rem 0.5rem; + margin: 0.25rem; background-color: rgba(90, 110, 70, 0.6); border-radius: var(--border-radius-messages-small); color: var(--color-text); font-weight: 500; span { - margin-left: .5rem; + margin-left: 0.5rem; } } } - } } diff --git a/src/components/middle/message/Message.scss b/src/components/middle/message/Message.scss index 679f68cfe..03bd98a2f 100644 --- a/src/components/middle/message/Message.scss +++ b/src/components/middle/message/Message.scss @@ -1,4 +1,4 @@ -@import 'message-content'; +@import "message-content"; // General styles .Message { @@ -19,7 +19,9 @@ --meta-safe-area-base: 2.25rem; --meta-safe-author-width: 0px; --meta-safe-area-extra-width: 0px; - --meta-safe-area-size: calc(var(--meta-safe-area-base) + var(--meta-safe-author-width) + var(--meta-safe-area-extra-width)); + --meta-safe-area-size: calc( + var(--meta-safe-area-base) + var(--meta-safe-author-width) + var(--meta-safe-area-extra-width) + ); --deleting-translate-x: -50%; --select-message-scale: 0.9; @@ -32,7 +34,7 @@ --max-width: calc(30vw - 1rem); } @media (max-width: 600px) { - margin-bottom: .25rem; + margin-bottom: 0.25rem; } &.is-swiped { @@ -104,7 +106,7 @@ &.last-in-group { margin-bottom: 0.625rem; @media (max-width: 600px) { - margin-bottom: .4375rem; + margin-bottom: 0.4375rem; } } @@ -142,14 +144,16 @@ &:not(.own) { padding-left: 2.5rem; - .no-avatars &, &.is-thread-top { + .no-avatars &, + &.is-thread-top { padding-left: 0; } @media (max-width: 600px) { padding-left: 2.875rem; - .no-avatars &, &.is-thread-top { + .no-avatars &, + &.is-thread-top { padding-left: 0.25rem; } } @@ -235,7 +239,7 @@ &.is-deleting { > .Avatar, > .message-content-wrapper { - transition: opacity .2s ease, transform .2s ease-in; + transition: opacity 0.2s ease, transform 0.2s ease-in; opacity: 0; transform: scale(0.3) translateX(var(--deleting-translate-x)); transform-origin: bottom; @@ -253,7 +257,7 @@ --meta-safe-area-extra-width: 7.5rem; } - html[lang=ru] & { + html[lang="ru"] & { --meta-safe-area-extra-width: 3.5rem; &.has-views { @@ -345,7 +349,6 @@ } } - .File { position: relative; @@ -366,12 +369,13 @@ .message-select-control { position: absolute; z-index: 2; - top: 0.438rem; - right: 0.438rem; + top: 0.4375rem; + right: 0.4375rem; left: unset; } - img, video { + img, + video { transition: transform var(--select-transition), opacity ease 300ms; } @@ -380,14 +384,15 @@ background: var(--color-green); } - img, video { + img, + video { transform: scale(var(--select-message-scale)); } } - } - &.is-selected, &.is-forwarding { + &.is-selected, + &.is-forwarding { .message-select-control { background: var(--color-green); } @@ -399,18 +404,18 @@ &.is-in-document-group { .message-content.document { - padding: .25rem .5rem !important; + padding: 0.25rem 0.5rem !important; } &.last-in-document-group { .message-content.document { - padding-bottom: .5rem !important + padding-bottom: 0.5rem !important; } } &.first-in-document-group { .message-content.document { - padding-top: .5rem !important + padding-top: 0.5rem !important; } } @@ -450,10 +455,10 @@ background: white; &::after { - content: ''; + content: ""; width: 1.25rem; height: 1.25rem; - border-radius: 0.688rem; + border-radius: 0.6875rem; background: white; border: 0.125rem rgba(0, 0, 0, 0.2) solid; position: absolute; @@ -477,7 +482,6 @@ } } } - } &.focused, @@ -550,7 +554,7 @@ } .Avatar { - margin-right: 0.3rem; + margin-right: 0.3125rem; } .message-content { @@ -571,7 +575,7 @@ & + .Album, & + .Audio, & + .File { - margin-top: .375rem; + margin-top: 0.375rem; } } @@ -592,10 +596,10 @@ position: absolute; bottom: 0; color: white; - background-color: rgba(0, 0, 0, .2); + background-color: rgba(0, 0, 0, 0.2); opacity: 0; - transition: opacity .2s ease; + transition: opacity 0.2s ease; @media (pointer: coarse) { opacity: 1 !important; @@ -604,7 +608,7 @@ &:hover, &:active, &:focus { - background-color: rgba(0, 0, 0, .28) !important; + background-color: rgba(0, 0, 0, 0.28) !important; } } @@ -656,5 +660,5 @@ } .Message .custom-shape .message-action-button { - bottom: .25rem; + bottom: 0.25rem; } diff --git a/src/components/middle/message/MessageContextMenu.scss b/src/components/middle/message/MessageContextMenu.scss index 74decec4c..38325514b 100644 --- a/src/components/middle/message/MessageContextMenu.scss +++ b/src/components/middle/message/MessageContextMenu.scss @@ -10,7 +10,7 @@ } .bubble { - transition: opacity .15s cubic-bezier(0.2, 0, 0.2, 1), transform .15s cubic-bezier(0.2, 0, 0.2, 1) !important; + transition: opacity 0.15s cubic-bezier(0.2, 0, 0.2, 1), transform 0.15s cubic-bezier(0.2, 0, 0.2, 1) !important; transform: scale(0.7); overflow: initial; padding: 0; @@ -31,7 +31,7 @@ padding-left: 1rem; .Avatar { - border: .0625rem solid var(--color-background); + border: 0.0625rem solid var(--color-background); margin-right: 0; box-sizing: content-box; diff --git a/src/components/middle/message/MessageMeta.scss b/src/components/middle/message/MessageMeta.scss index e475da993..7efe206d2 100644 --- a/src/components/middle/message/MessageMeta.scss +++ b/src/components/middle/message/MessageMeta.scss @@ -6,8 +6,8 @@ display: flex; align-items: center; background: rgba(#999999, 0.6); - border-radius: .625rem; - padding: 0 .25rem; + border-radius: 0.625rem; + padding: 0 0.25rem; color: white; cursor: pointer; max-width: 100%; @@ -22,22 +22,22 @@ .message-time, .message-signature, .message-views { - font-size: .75rem; + font-size: 0.75rem; white-space: nowrap; } .message-time { - margin-right: .1875rem; + margin-right: 0.1875rem; } body.is-ios & { .message-time { - margin-right: .25rem; + margin-right: 0.25rem; } } .message-views { - margin-inline-start: .1875rem; + margin-inline-start: 0.1875rem; } .message-signature { @@ -66,11 +66,11 @@ --color-accent: white; color: white !important; opacity: 1; - bottom: .25rem; - right: .25rem; + bottom: 0.25rem; + right: 0.25rem; left: auto; height: 1.125rem; - padding: 0 .3125rem 0 .375rem; + padding: 0 0.3125rem 0 0.375rem; .MessageOutgoingStatus i { background: transparent; @@ -80,17 +80,17 @@ .media:not(.text):dir(rtl) &, .Message .custom-shape:dir(rtl) & { right: auto !important; - left: .25rem; - padding: 0 .375rem 0 .3125rem; + left: 0.25rem; + padding: 0 0.375rem 0 0.3125rem; } .is-forwarded.media:not(.text):dir(rtl) &, .Message .is-forwarded.custom-shape:dir(rtl) & { - left: .8125rem; + left: 0.8125rem; } .is-forwarded.media:not(.text) & { - bottom: 0.935rem; + bottom: 0.9375rem; right: 0.8125rem; } @@ -103,9 +103,9 @@ } .MessageOutgoingStatus { - margin-left: -.1875rem; + margin-left: -0.1875rem; font-size: 1.1875rem; - border-radius: .625rem; + border-radius: 0.625rem; .Message.own & { color: var(--color-accent-own); @@ -133,7 +133,7 @@ .Message:not(.own) { .custom-shape .reply-message + .MessageMeta { right: auto; - left: 13.2rem; + left: 13.25rem; bottom: 0.25rem; } diff --git a/src/components/middle/message/Poll.scss b/src/components/middle/message/Poll.scss index a7c58621c..c684b45c3 100644 --- a/src/components/middle/message/Poll.scss +++ b/src/components/middle/message/Poll.scss @@ -27,7 +27,7 @@ } .poll-voters-count { - margin: .4375rem 0 1.125rem; + margin: 0.4375rem 0 1.125rem; text-align: center; } @@ -41,7 +41,7 @@ padding-left: 2.25rem; &:last-child { - margin-bottom: .75rem; + margin-bottom: 0.75rem; } &.disabled { @@ -116,17 +116,17 @@ display: inline-flex; align-items: center; vertical-align: text-bottom; - margin-left: .875rem; - margin-right: .5rem; + margin-left: 0.875rem; + margin-right: 0.5rem; margin-top: -2px; .Avatar { - border: .0625rem solid var(--color-white); + border: 0.0625rem solid var(--color-white); margin-right: 0; box-sizing: content-box; .Message.own & { - border: .0625rem solid var(--secondary-color); + border: 0.0625rem solid var(--secondary-color); } &:not(:first-child) { @@ -137,8 +137,8 @@ .poll-countdown { margin-left: auto; - font-size: .75rem; - transition: color .2s; + font-size: 0.75rem; + transition: color 0.2s; &.hurry-up { color: var(--color-error); @@ -158,11 +158,11 @@ fill: transparent; stroke-width: 2; stroke-linecap: round; - transition: stroke-dashoffset 2s, stroke .2s; + transition: stroke-dashoffset 2s, stroke 0.2s; } .poll-quiz-help { - margin: -.625rem 0 -.625rem auto; + margin: -0.625rem 0 -0.625rem auto; .Message:not(.own) & { color: var(--color-primary); } @@ -185,6 +185,6 @@ } > .Button { - margin-bottom: .625rem; + margin-bottom: 0.625rem; } } diff --git a/src/components/middle/message/PollOption.scss b/src/components/middle/message/PollOption.scss index 949585fcc..3cd7448b2 100644 --- a/src/components/middle/message/PollOption.scss +++ b/src/components/middle/message/PollOption.scss @@ -13,18 +13,18 @@ .poll-option-share { position: relative; - margin-top: .125rem; + margin-top: 0.125rem; width: 1.75rem; - margin-inline-end: .5rem; + margin-inline-end: 0.5rem; flex-shrink: 0; font-weight: 500; - font-size: .875rem; + font-size: 0.875rem; text-align: right; &.limit-width { display: inline-flex; justify-content: center; - font-size: .75rem; + font-size: 0.75rem; } } @@ -36,8 +36,8 @@ height: 1rem; background: var(--accent-color); color: var(--background-color); - border-radius: .5rem; - font-size: .75rem; + border-radius: 0.5rem; + font-size: 0.75rem; text-align: center; &.wrong { @@ -51,8 +51,8 @@ &.animate { opacity: 0; animation-name: PollOptionIconAnimate; - animation-delay: .09s; - animation-duration: .3s; + animation-delay: 0.09s; + animation-duration: 0.3s; animation-fill-mode: forwards; } } @@ -76,9 +76,8 @@ background: var(--accent-color); transform-origin: 0 0; - transition: transform .3s; - transition-delay: .09s; - + transition: transform 0.3s; + transition-delay: 0.09s; } .poll-line { @@ -87,16 +86,16 @@ position: absolute; left: -27px; bottom: -5px; - transition: stroke-dashoffset .3s, stroke-dasharray .3s; + transition: stroke-dashoffset 0.3s, stroke-dasharray 0.3s; stroke-dashoffset: 0; - stroke-dasharray: 0, 200% + stroke-dasharray: 0, 200%; } .poll-line path { stroke-width: 4px; stroke-linecap: round; stroke: var(--accent-color); - fill:none + fill: none; } .wrong { @@ -111,6 +110,10 @@ } @keyframes PollOptionIconAnimate { - 0% { opacity: 0 } - 100% { opacity: 1 } + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } } diff --git a/src/components/middle/message/RoundVideo.scss b/src/components/middle/message/RoundVideo.scss index 2e7f515cf..13c13545a 100644 --- a/src/components/middle/message/RoundVideo.scss +++ b/src/components/middle/message/RoundVideo.scss @@ -32,7 +32,7 @@ stroke: white; fill: transparent; stroke-width: 4; - stroke-opacity: .35; + stroke-opacity: 0.35; stroke-linecap: round; } diff --git a/src/components/middle/message/SponsoredMessage.scss b/src/components/middle/message/SponsoredMessage.scss index d24f9741c..6c7cd09b0 100644 --- a/src/components/middle/message/SponsoredMessage.scss +++ b/src/components/middle/message/SponsoredMessage.scss @@ -2,15 +2,15 @@ --border-top-left-radius: var(--border-radius-messages) !important; --border-bottom-left-radius: var(--border-radius-messages) !important; - margin-top: -.5rem; - margin-bottom: .5rem; + margin-top: -0.5rem; + margin-bottom: 0.5rem; &::before { display: none; } &__button.secondary { - margin-top: .5rem; + margin-top: 0.5rem; border: 1px solid var(--color-primary); border-radius: var(--border-radius-default-tiny); color: var(--color-primary); diff --git a/src/components/middle/message/WebPage.scss b/src/components/middle/message/WebPage.scss index 1d66cb044..ff13e7a85 100644 --- a/src/components/middle/message/WebPage.scss +++ b/src/components/middle/message/WebPage.scss @@ -1,22 +1,22 @@ .WebPage { margin-top: 0.25rem; margin-bottom: 0.125rem; - padding-left: .625rem; - font-size: calc(var(--message-text-size, 1rem) - .125rem); + padding-left: 0.625rem; + font-size: calc(var(--message-text-size, 1rem) - 0.125rem); line-height: 1.125rem; max-width: 29rem; position: relative; &::before { - content: ''; + content: ""; display: block; position: absolute; top: 0; bottom: 0; left: 0; - width: .125rem; + width: 0.125rem; background: var(--accent-color); - border-radius: .125rem; + border-radius: 0.125rem; } &-text { @@ -29,7 +29,9 @@ margin: 0 !important; margin-bottom: 0.375rem !important; - &, & img, &.small-image img { + &, + & img, + &.small-image img { border-radius: var(--border-radius-messages-small) !important; } @@ -77,7 +79,7 @@ .site-title, .site-description { &:last-child::after { - content: ''; + content: ""; display: inline-block; width: var(--meta-safe-area-size); height: 0.75rem; @@ -114,7 +116,7 @@ } &:dir(rtl) { - padding-inline-start: .625rem; + padding-inline-start: 0.625rem; &::before { left: auto; @@ -122,5 +124,3 @@ } } } - - diff --git a/src/components/middle/message/_message-content.scss b/src/components/middle/message/_message-content.scss index 79f4f2b36..f8023bed5 100644 --- a/src/components/middle/message/_message-content.scss +++ b/src/components/middle/message/_message-content.scss @@ -3,41 +3,21 @@ max-width: var(--max-width); @media (max-width: 600px) { - max-width: calc(100vw - 6.25rem); - - .Message.own &, + max-width: min(29rem, calc(100vw - 6.25rem)); .MessageList.no-avatars & { - max-width: calc(100vw - 3.75rem); + max-width: min(29rem, calc(100vw - 3.75rem)); } - - // Workaround for sass function override - we should use CSS min() here - @supports (max-width: #{"min(29rem, 100vw - 6.25rem)"}) { - max-width: #{"min(29rem, 100vw - 6.25rem)"}; - .MessageList.no-avatars & { - max-width: #{"min(29rem, 100vw - 3.75rem)"}; - } - .Message.own & { - max-width: #{"min(30rem, 100vw - 3.75rem)"}; - } + .Message.own & { + max-width: min(30rem, calc(100vw - 3.75rem)); } &.has-action-button { - max-width: calc(100vw - 7rem); - - .Message.own &, + max-width: min(29rem, calc(100vw - 7rem)); .MessageList.no-avatars & { - max-width: calc(100vw - 4.5rem); + max-width: min(29rem, calc(100vw - 4.5rem)); } - - // Workaround for sass function override - we should use CSS min() here - @supports (max-width: #{"min(29rem, 100vw - 5.5rem)"}) { - max-width: #{"min(29rem, 100vw - 7rem)"}; - .MessageList.no-avatars & { - max-width: #{"min(29rem, 100vw - 4.5rem)"}; - } - .Message.own & { - max-width: #{"min(30rem, 100vw - 4.5rem)"}; - } + .Message.own & { + max-width: min(30rem, calc(100vw - 4.5rem)); } } } @@ -70,13 +50,13 @@ &.document { & > .MessageMeta { position: relative; - top: .375rem; + top: 0.375rem; bottom: auto !important; float: right; line-height: 1.35; height: calc(var(--message-meta-height, 1rem)); - margin-left: .4375rem; - margin-right: -.5rem; + margin-left: 0.4375rem; + margin-right: -0.5rem; .MessageOutgoingStatus .Transition { max-height: calc(var(--message-meta-height, 1rem)); @@ -84,41 +64,41 @@ } html[data-message-text-size="12"] & { - top: .25rem; + top: 0.25rem; } html[data-message-text-size="17"] & { - top: .4375rem; + top: 0.4375rem; } html[data-message-text-size="18"] &, html[data-message-text-size="19"] & { - top: .5rem; + top: 0.5rem; } html[data-message-text-size="20"] & { - top: .5625rem; + top: 0.5625rem; } } &:dir(rtl) { & > .MessageMeta { float: left; - margin-left: -.25rem; - margin-right: .4375rem; + margin-left: -0.25rem; + margin-right: 0.4375rem; } } } .MessageMeta.reactions-offset { position: relative; - top: .375rem; + top: 0.375rem; bottom: auto !important; float: right; line-height: 1; height: calc(var(--message-meta-height, 1rem)); margin-left: auto; - margin-right: -.5rem; + margin-right: -0.5rem; align-self: flex-end; .MessageOutgoingStatus .Transition { @@ -127,20 +107,20 @@ } html[data-message-text-size="12"] & { - top: .25rem; + top: 0.25rem; } html[data-message-text-size="17"] & { - top: .4375rem; + top: 0.4375rem; } html[data-message-text-size="18"] &, html[data-message-text-size="19"] & { - top: .5rem; + top: 0.5rem; } html[data-message-text-size="20"] & { - top: .5625rem; + top: 0.5625rem; } } @@ -153,10 +133,10 @@ & > .MessageMeta { top: auto !important; - bottom: -.5rem !important; - margin-top: -.25rem; + bottom: -0.5rem !important; + margin-top: -0.25rem; - &:not([dir=rtl]) { + &:not([dir="rtl"]) { margin-top: -1.25rem; } } @@ -186,7 +166,7 @@ .matching-text-highlight { color: var(--color-text); - background: #CAE3F7; + background: #cae3f7; border-radius: 0.25rem; padding: 0 0.125rem; @@ -199,7 +179,7 @@ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - font-size: calc(var(--message-text-size, 1rem) - .125rem); + font-size: calc(var(--message-text-size, 1rem) - 0.125rem); font-weight: 500; line-height: 1.25rem; color: var(--accent-color); @@ -211,7 +191,8 @@ text-overflow: ellipsis; } - &.interactive, & > .interactive { + &.interactive, + & > .interactive { cursor: pointer; &:hover { @@ -252,16 +233,16 @@ } & + .File { - margin-top: .25rem; + margin-top: 0.25rem; } .via { - padding-right: .25rem; + padding-right: 0.25rem; font-weight: 400; } span + .via { - padding-left: .25rem; + padding-left: 0.25rem; } .admin-title { @@ -270,7 +251,7 @@ text-align: right; font-weight: 400; font-size: 0.75rem; - margin-top: -0.1rem; + margin-top: -0.125rem; color: rgba(var(--color-text-meta-rgb), 0.75); .Message.own & { @@ -283,15 +264,17 @@ box-shadow: 0 1px 2px var(--color-default-shadow); } - &.has-solid-background, &.has-background, .is-album & { + &.has-solid-background, + &.has-background, + .is-album & { background: var(--background-color); } &.has-solid-background { - padding: .3125rem .5rem .375rem; + padding: 0.3125rem 0.5rem 0.375rem; .forwarded-message > .text-content:not(.with-meta):last-child::after { - content: ''; + content: ""; display: inline-block; width: var(--meta-safe-area-size); height: 1rem; @@ -313,8 +296,8 @@ .svg-appendix { overflow: hidden; position: absolute; - bottom: -.0625rem; - width: .5625rem; + bottom: -0.0625rem; + width: 0.5625rem; height: 1.125rem; font-size: 1rem !important; @@ -323,11 +306,13 @@ } .Message.own & { - right: -.551rem; // This value is correct. Safari fix + /* stylelint-disable-next-line plugin/whole-pixel */ + right: -0.551rem; // This value is correct. Safari fix } .Message:not(.own) & { - left: -.562rem; // This value is correct. Safari fix + /* stylelint-disable-next-line plugin/whole-pixel */ + left: -0.562rem; // This value is correct. Safari fix } } @@ -348,7 +333,7 @@ } &.document { - padding: .5rem !important; + padding: 0.5rem !important; .File { .theme-dark & { @@ -357,7 +342,7 @@ } .File + .text-content { - margin-top: .3125rem; + margin-top: 0.3125rem; } } @@ -365,29 +350,29 @@ &.audio { .message-title, .Embedded { - margin-top: -.1875rem; - margin-bottom: .1875rem; + margin-top: -0.1875rem; + margin-bottom: 0.1875rem; } } &.voice { - padding: .5rem !important; + padding: 0.5rem !important; .Voice + .text-content { - margin-top: .5rem; + margin-top: 0.5rem; } } &.audio { min-width: 20rem; - padding: .5rem .5rem .8125rem !important; + padding: 0.5rem 0.5rem 0.8125rem !important; @media (max-width: 600px) { min-width: 17rem; } .Audio + .text-content { - margin-top: .25rem; + margin-top: 0.25rem; } &:not(.has-replies) { @@ -428,10 +413,10 @@ .content-inner > .message-title { display: inline-flex; position: relative; - top: .125rem; + top: 0.125rem; max-width: calc(100% - 3rem); margin-left: calc(100% - 3rem); - padding: 0 .5rem; + padding: 0 0.5rem; background-color: var(--background-color); border-radius: var(--border-radius-messages); @@ -444,10 +429,10 @@ margin-top: 0.375rem; } } - } -.message-content.media, .WebPage { +.message-content.media, +.WebPage { .media-inner { display: flex; justify-content: center; @@ -518,11 +503,12 @@ &:not(.open) { opacity: 0.5; transform: scale(0); - transition: opacity .3s ease, transform .3s ease; + transition: opacity 0.3s ease, transform 0.3s ease; } } - .icon-large-play, .icon-download { + .icon-large-play, + .icon-download { position: absolute; display: flex; align-items: center; @@ -546,7 +532,7 @@ } &.opacity-transition { - transition: opacity .15s ease; + transition: opacity 0.15s ease; &:not(.open) { opacity: 0; @@ -564,22 +550,22 @@ .message-media-duration, .message-transfer-progress { - background: rgba(0, 0, 0, .25); + background: rgba(0, 0, 0, 0.25); color: #fff; font-size: 0.75rem; position: absolute; - left: .1875rem; - top: .1875rem; + left: 0.1875rem; + top: 0.1875rem; z-index: 1; - padding: 0 .375rem; - border-radius: .75rem; + padding: 0 0.375rem; + border-radius: 0.75rem; line-height: 1.125rem; user-select: none; } .message-media-duration .icon-muted { - vertical-align: -.1875rem; - margin-left: .375rem; + vertical-align: -0.1875rem; + margin-left: 0.375rem; font-size: 1.0625rem; } } @@ -661,7 +647,8 @@ margin-bottom: 0; text-shadow: 1px 1px 0 white, -1px -1px 0 white, -1px 1px 0 white, 1px -1px 0 white; img.emoji { - filter: drop-shadow(1px 1px 0 white) drop-shadow(-1px 1px 0 white) drop-shadow(1px -1px 0 white) drop-shadow(-1px -1px 0 white); + filter: drop-shadow(1px 1px 0 white) drop-shadow(-1px 1px 0 white) drop-shadow(1px -1px 0 white) + drop-shadow(-1px -1px 0 white); } .MessageMeta { @@ -695,10 +682,10 @@ &.emoji-only-2 { font-size: 4rem; - margin-top: .5rem; + margin-top: 0.5rem; min-width: 10rem; @media (max-width: 600px) { - margin-top: .375rem; + margin-top: 0.375rem; } &.has-comments { @@ -775,12 +762,12 @@ padding-left: 0.625rem; &::before { - content: ''; + content: ""; display: block; position: absolute; top: 0; bottom: 0; - left: 0.05rem; + left: 0.0625rem; width: 2px; background: var(--accent-color); border-radius: 2px; @@ -791,7 +778,7 @@ &::before { left: auto; - right: 0.05rem; + right: 0.0625rem; } } } @@ -818,12 +805,15 @@ cursor: pointer; unicode-bidi: initial; - &:hover, &:active, &:visited { + &:hover, + &:active, + &:visited { text-decoration: underline !important; } } -.text-entity-code, .text-entity-pre { +.text-entity-code, +.text-entity-pre { color: var(--color-code); background: var(--color-code-bg); white-space: pre-wrap; diff --git a/src/components/payment/CardInput.scss b/src/components/payment/CardInput.scss index 893892db2..8dc345acf 100644 --- a/src/components/payment/CardInput.scss +++ b/src/components/payment/CardInput.scss @@ -7,7 +7,7 @@ .left-addon { position: absolute; - top: .8rem; + top: 0.8125rem; left: 1rem; z-index: 8; diff --git a/src/components/payment/Checkout.scss b/src/components/payment/Checkout.scss index f02b21e61..93420137d 100644 --- a/src/components/payment/Checkout.scss +++ b/src/components/payment/Checkout.scss @@ -8,17 +8,17 @@ img { height: 6rem; - margin: .5rem; + margin: 0.5rem; } .text { h5 { - margin-top: .5rem; + margin-top: 0.5rem; font-size: 1.125rem; } p { - font-size: 0.8rem; + font-size: 0.8125rem; line-height: 1rem; color: var(--color-text-secondary); } @@ -29,17 +29,17 @@ margin: 1rem; .price-info-item { - margin: 1rem .5rem; + margin: 1rem 0.5rem; display: flex; flex-direction: row; align-content: space-between; color: var(--color-text-secondary); font-weight: 500; - - &-main{ + + &-main { color: var(--color-text); } - + .title { display: flex; flex: 1 auto; @@ -53,7 +53,7 @@ .checkout-info-item { display: flex; - padding: .75rem .5rem 1rem; + padding: 0.75rem 0.5rem 1rem; text-align: left; i { @@ -64,7 +64,7 @@ } i.stripe-provider { - background: url('../../assets/stripe-logo.png') no-repeat center; + background: url("../../assets/stripe-logo.png") no-repeat center; background-size: 2rem; border-radius: 1rem; height: 1.5rem; @@ -89,5 +89,4 @@ } } } - -} \ No newline at end of file +} diff --git a/src/components/payment/PaymentInfo.scss b/src/components/payment/PaymentInfo.scss index 09150c7f4..85bbd7191 100644 --- a/src/components/payment/PaymentInfo.scss +++ b/src/components/payment/PaymentInfo.scss @@ -2,9 +2,9 @@ padding: 0.5rem 1rem; h5 { - font-size: 0.9rem; + font-size: 0.875rem; color: var(--color-text-secondary); - margin: 1rem 0 1.1rem; + margin: 1rem 0 1.25rem; } .inline-inputs { diff --git a/src/components/payment/PaymentModal.scss b/src/components/payment/PaymentModal.scss index e00470fd0..6c1b1b7ce 100644 --- a/src/components/payment/PaymentModal.scss +++ b/src/components/payment/PaymentModal.scss @@ -8,7 +8,7 @@ border-top-left-radius: 10px; border-top-right-radius: 10px; width: 100%; - padding: .25rem 1rem; + padding: 0.25rem 1rem; display: flex; align-items: center; flex-direction: row; @@ -52,7 +52,7 @@ border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; width: 100%; - padding: .75rem 1rem; + padding: 0.75rem 1rem; background: var(--color-background); border-top: 1px var(--color-borders) solid; @@ -67,15 +67,12 @@ } .modal-content { - padding:0; + padding: 0; overflow: hidden; } } -@media screen - and (max-device-width: 640px) - and (max-height: 640px) - and (orientation: landscape) { +@media screen and (max-device-width: 640px) and (max-height: 640px) and (orientation: landscape) { .PaymentModal { .modal-dialog { max-height: 100%; diff --git a/src/components/payment/Shipping.scss b/src/components/payment/Shipping.scss index 896b7a031..dbfe727ad 100644 --- a/src/components/payment/Shipping.scss +++ b/src/components/payment/Shipping.scss @@ -5,11 +5,11 @@ p { color: var(--color-text-secondary); font-weight: 500; - margin: .5rem 0 2rem; + margin: 0.5rem 0 2rem; } .Radio { margin-bottom: 2rem; } } -} \ No newline at end of file +} diff --git a/src/components/payment/ShippingInfo.scss b/src/components/payment/ShippingInfo.scss index c8420cae0..ffc67c863 100644 --- a/src/components/payment/ShippingInfo.scss +++ b/src/components/payment/ShippingInfo.scss @@ -2,8 +2,8 @@ padding: 0.5rem 1rem; h5 { - font-size: 0.9rem; + font-size: 0.875rem; color: var(--color-text-secondary); - margin: 1rem 0 1.1rem; + margin: 1rem 0 1.25rem; } -} \ No newline at end of file +} diff --git a/src/components/right/PollAnswerResults.scss b/src/components/right/PollAnswerResults.scss index bae594f9f..2dc098e46 100644 --- a/src/components/right/PollAnswerResults.scss +++ b/src/components/right/PollAnswerResults.scss @@ -1,42 +1,42 @@ .PollAnswerResults { border-bottom: 1px solid var(--color-borders); - padding: 0 .5rem .625rem; + padding: 0 0.5rem 0.625rem; display: flex; flex-direction: column-reverse; .answer-head { display: flex; align-items: center; - font-size: .9375rem; + font-size: 0.9375rem; line-height: 1.3125rem; font-weight: 500; color: var(--color-text-secondary); - padding: 1rem .75rem .5rem 1rem; + padding: 1rem 0.75rem 0.5rem 1rem; position: sticky; top: 0; background: var(--color-background); @media (max-width: 600px) { - padding: .5rem .25rem .5rem .5rem; + padding: 0.5rem 0.25rem 0.5rem 0.5rem; } } .answer-percent { margin-left: auto; - &[dir=auto] { + &[dir="auto"] { margin-left: 0; margin-right: auto; } } .poll-voters { - padding: 0 .75rem; + padding: 0 0.75rem; position: relative; min-height: 3rem; @media (max-width: 600px) { - padding: 0 .25rem; + padding: 0 0.25rem; } .Spinner { @@ -49,7 +49,7 @@ margin-right: 1.75rem; } - &[dir=rtl] { + &[dir="rtl"] { .ChatInfo .Avatar.size-tiny { margin-left: 1.75rem; margin-right: 0; @@ -58,10 +58,10 @@ } .ShowMoreButton { - margin: .25rem 0 0 -0.5rem; + margin: 0.25rem 0 0 -0.5rem; width: calc(100% + 1rem); - &[dir=rtl] { + &[dir="rtl"] { .icon-down { margin-left: 2rem; margin-right: 0; diff --git a/src/components/right/PollResults.scss b/src/components/right/PollResults.scss index 28ee7b29d..a9bb10b5d 100644 --- a/src/components/right/PollResults.scss +++ b/src/components/right/PollResults.scss @@ -15,7 +15,7 @@ } .poll-question { - padding: .75rem 1.5rem; + padding: 0.75rem 1.5rem; flex-shrink: 0; font-size: 1.25rem; diff --git a/src/components/right/Profile.scss b/src/components/right/Profile.scss index 83e22b75b..90519ad55 100644 --- a/src/components/right/Profile.scss +++ b/src/components/right/Profile.scss @@ -1,4 +1,4 @@ -@import '../../styles/mixins'; +@import "../../styles/mixins"; .Profile { height: 100%; @@ -18,9 +18,9 @@ } > .profile-info > .ChatExtra { - padding: .875rem .5rem .5rem; - box-shadow: inset 0 -.0625rem 0 0 var(--color-background-secondary-accent); - border-bottom: .625rem solid var(--color-background-secondary); + padding: 0.875rem 0.5rem 0.5rem; + box-shadow: inset 0 -0.0625rem 0 0 var(--color-background-secondary-accent); + border-bottom: 0.625rem solid var(--color-background-secondary); .narrow { margin-bottom: 0; @@ -34,7 +34,7 @@ .Switcher { margin-left: auto; } - [dir=rtl] { + [dir="rtl"] { .Switcher { margin-left: 0; margin-right: auto; @@ -57,7 +57,7 @@ z-index: 1; .Tab { - padding: 1rem .75rem; + padding: 1rem 0.75rem; span { white-space: nowrap; @@ -90,7 +90,7 @@ display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; - grid-gap: .0625rem; + grid-gap: 0.0625rem; } &.documents-list { @@ -134,7 +134,7 @@ padding: 0.5rem 1rem; @media (max-width: 600px) { - padding: .5rem 0; + padding: 0.5rem 0; .ListItem.chat-item-clickable { margin: 0; } diff --git a/src/components/right/RightColumn.scss b/src/components/right/RightColumn.scss index bfd386ce6..ed9a1fa77 100644 --- a/src/components/right/RightColumn.scss +++ b/src/components/right/RightColumn.scss @@ -4,6 +4,7 @@ right: 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); @@ -16,7 +17,7 @@ } @media (max-width: 1275px) { - box-shadow: 0 .25rem .5rem .125rem var(--color-default-shadow); + box-shadow: 0 0.25rem 0.5rem 0.125rem var(--color-default-shadow); border-left: none; } @@ -25,10 +26,6 @@ transform: translate3d(110vw, 0, 0); } - @supports (padding-right: env(safe-area-inset-right)) { - padding-right: env(safe-area-inset-right); - } - > .Transition { height: calc(100% - var(--header-height)); overflow: hidden; @@ -40,7 +37,7 @@ text-align: center; .Avatar { - margin: 0 auto .5rem; + margin: 0 auto 0.5rem; &.no-photo { cursor: default !important; @@ -62,7 +59,7 @@ .VerifiedIcon { margin-left: 0.25rem; - margin-bottom: .5rem; + margin-bottom: 0.5rem; } .emoji { @@ -117,7 +114,8 @@ } } - #Main.right-column-open &, body.animating-right-column & { + #Main.right-column-open &, + body.animating-right-column & { visibility: visible; } diff --git a/src/components/right/RightHeader.scss b/src/components/right/RightHeader.scss index 0c1f104a7..0e7e19a9e 100644 --- a/src/components/right/RightHeader.scss +++ b/src/components/right/RightHeader.scss @@ -2,7 +2,7 @@ display: flex; align-items: center; height: var(--header-height); - padding: 0.5rem .8125rem; + padding: 0.5rem 0.8125rem; pointer-events: auto; @media (max-width: 600px) { diff --git a/src/components/right/StickerSearch.scss b/src/components/right/StickerSearch.scss index 2ceea3be9..0ff0a5fe3 100644 --- a/src/components/right/StickerSearch.scss +++ b/src/components/right/StickerSearch.scss @@ -44,7 +44,8 @@ background: var(--color-chat-hover); color: var(--color-text-secondary); - &:hover, &:active { + &:hover, + &:active { background: var(--color-item-active) !important; } } @@ -57,7 +58,7 @@ overflow: hidden; } - &[dir=rtl] { + &[dir="rtl"] { .title-wrapper { text-align: right; } diff --git a/src/components/ui/AvatarEditable.scss b/src/components/ui/AvatarEditable.scss index e8f7266e7..b1cb7bf5b 100644 --- a/src/components/ui/AvatarEditable.scss +++ b/src/components/ui/AvatarEditable.scss @@ -1,4 +1,4 @@ -@import '../../styles/mixins'; +@import "../../styles/mixins"; .AvatarEditable { label { @@ -33,13 +33,15 @@ i { transform: scale(1); - transition: transform .15s linear; + transition: transform 0.15s linear; z-index: var(--z-register-add-avatar); } // @optimization The weirdest workaround for screen animation lag @include while-transition() { - input, i, &::after { + input, + i, + &::after { display: none !important; } @@ -58,7 +60,7 @@ background-color: var(--color-background); &::after { - content: ''; + content: ""; display: block; position: absolute; left: 0; diff --git a/src/components/ui/Button.scss b/src/components/ui/Button.scss index bb533784d..4aa7d4683 100644 --- a/src/components/ui/Button.scss +++ b/src/components/ui/Button.scss @@ -1,9 +1,11 @@ @mixin active-styles() { &:not(.disabled):not(:disabled) { - &:active, &.active, &:focus { + &:active, + &.active, + &:focus { @content; } - @media (hover:hover) { + @media (hover: hover) { &:hover { @content; } @@ -40,11 +42,13 @@ flex-shrink: 0; position: relative; overflow: hidden; - transition: background-color .15s, color .15s; + transition: background-color 0.15s, color 0.15s; text-decoration: none !important; // @optimization - &:active, &.clicked, body.animation-level-0 & { + &:active, + &.clicked, + body.animation-level-0 & { transition: none !important; } @@ -66,7 +70,7 @@ &.primary { background-color: var(--color-primary); color: var(--color-white); - --ripple-color: rgba(0, 0, 0, .08); + --ripple-color: rgba(0, 0, 0, 0.08); @include active-styles() { background-color: var(--color-primary-shade); @@ -80,7 +84,7 @@ &.secondary { background-color: var(--color-background); color: rgba(var(--color-text-secondary-rgb), 0.75); - --ripple-color: rgba(0, 0, 0, .08); + --ripple-color: rgba(0, 0, 0, 0.08); @include active-styles() { background-color: var(--color-primary); @@ -95,7 +99,7 @@ &.gray { background-color: var(--color-background); color: var(--color-text-secondary); - --ripple-color: rgba(0, 0, 0, .08); + --ripple-color: rgba(0, 0, 0, 0.08); @include active-styles() { color: var(--color-primary); @@ -109,7 +113,7 @@ &.danger { background-color: var(--color-background); color: var(--color-error); - --ripple-color: rgba(var(--color-error-rgb), .16); + --ripple-color: rgba(var(--color-error-rgb), 0.16); @include active-styles() { background-color: var(--color-error); @@ -129,11 +133,11 @@ background-color: transparent; @include active-styles() { - background-color: rgba(var(--color-primary-shade-rgb), .08); + background-color: rgba(var(--color-primary-shade-rgb), 0.08); } @include no-ripple-styles() { - background-color: rgba(var(--color-primary-shade-rgb), .16); + background-color: rgba(var(--color-primary-shade-rgb), 0.16); } } @@ -144,12 +148,12 @@ &.danger { @include active-styles() { - background-color: rgba(var(--color-error-rgb), .08); + background-color: rgba(var(--color-error-rgb), 0.08); color: var(--color-error); } @include no-ripple-styles() { - background-color: rgba(var(--color-error-rgb), .16); + background-color: rgba(var(--color-error-rgb), 0.16); } } } @@ -252,7 +256,7 @@ margin-right: 0.5rem; } - &[dir=rtl] { + &[dir="rtl"] { padding-left: 1.25rem; padding-right: 0.75rem; @@ -274,9 +278,9 @@ &.tiny { height: 2.25rem; - padding: .4375rem; + padding: 0.4375rem; border-radius: var(--border-radius-default-small); - font-size: .875rem; + font-size: 0.875rem; font-weight: 500; &.round { @@ -324,7 +328,7 @@ right: 0.875rem; top: 0.875rem; - --spinner-size: 1.8rem; + --spinner-size: 1.8125rem; } } diff --git a/src/components/ui/Checkbox.scss b/src/components/ui/Checkbox.scss index f72ddda54..8e5c017ed 100644 --- a/src/components/ui/Checkbox.scss +++ b/src/components/ui/Checkbox.scss @@ -19,8 +19,9 @@ } &::after { - /* stylelint-disable-next-line scss/operator-no-unspaced */ - background: var(--color-primary) url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEzLjkuOEw1LjggOC45IDIuMSA1LjJjLS40LS40LTEuMS0uNC0xLjYgMC0uNC40LS40IDEuMSAwIDEuNkw1IDExLjJjLjQuNCAxLjEuNCAxLjYgMGw4LjktOC45Yy40LS40LjQtMS4xIDAtMS42LS41LS40LTEuMi0uNC0xLjYuMXoiIGZpbGw9IiNGRkYiLz48L3N2Zz4=) no-repeat 50% 50%; + background: var(--color-primary) + url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEzLjkuOEw1LjggOC45IDIuMSA1LjJjLS40LS40LTEuMS0uNC0xLjYgMC0uNC40LS40IDEuMSAwIDEuNkw1IDExLjJjLjQuNCAxLjEuNCAxLjYgMGw4LjktOC45Yy40LS40LjQtMS4xIDAtMS42LS41LS40LTEuMi0uNC0xLjYuMXoiIGZpbGw9IiNGRkYiLz48L3N2Zz4=) + no-repeat 50% 50%; background-size: 12px; border-radius: 50%; } @@ -38,7 +39,7 @@ left: 0.375rem; top: 0.125rem; opacity: 0; - animation: fade-in .2s ease forwards; + animation: fade-in 0.2s ease forwards; --spinner-size: 1.25rem; } } @@ -67,8 +68,9 @@ } .Checkbox-main { - &::before, &::after { - content: ''; + &::before, + &::after { + content: ""; display: block; position: absolute; left: 1.1875rem; @@ -79,17 +81,18 @@ &::before { border: 2px solid var(--color-borders-input); - border-radius: .25rem; + border-radius: 0.25rem; background-color: var(--color-background); - transition: border-color .1s ease, background-color .1s ease; + transition: border-color 0.1s ease, background-color 0.1s ease; } &::after { /* stylelint-disable-next-line scss/operator-no-unspaced */ - background: center no-repeat url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEzLjkuOEw1LjggOC45IDIuMSA1LjJjLS40LS40LTEuMS0uNC0xLjYgMC0uNC40LS40IDEuMSAwIDEuNkw1IDExLjJjLjQuNCAxLjEuNCAxLjYgMGw4LjktOC45Yy40LS40LjQtMS4xIDAtMS42LS41LS40LTEuMi0uNC0xLjYuMXoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0ibm9uemVybyIvPjwvc3ZnPg==); - background-size: .875rem; + background: center no-repeat + url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEzLjkuOEw1LjggOC45IDIuMSA1LjJjLS40LS40LTEuMS0uNC0xLjYgMC0uNC40LS40IDEuMSAwIDEuNkw1IDExLjJjLjQuNCAxLjEuNCAxLjYgMGw4LjktOC45Yy40LS40LjQtMS4xIDAtMS42LS41LS40LTEuMi0uNC0xLjYuMXoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0ibm9uemVybyIvPjwvc3ZnPg==); + background-size: 0.875rem; opacity: 0; - transition: opacity .1s ease; + transition: opacity 0.1s ease; } .label { @@ -116,7 +119,7 @@ } } - &[dir=rtl] { + &[dir="rtl"] { padding-left: 0; padding-right: 4.5rem; @@ -133,7 +136,8 @@ } .Checkbox-main { - &::before, &::after { + &::before, + &::after { left: auto; right: 1.1875rem; } diff --git a/src/components/ui/CropModal.scss b/src/components/ui/CropModal.scss index 32bfaad69..6d8a4576e 100644 --- a/src/components/ui/CropModal.scss +++ b/src/components/ui/CropModal.scss @@ -2,7 +2,7 @@ background: var(--color-primary); cursor: pointer; transform: scale(1); - transition: transform .25s ease-in-out; + transition: transform 0.25s ease-in-out; &:hover { transform: scale(1.2); @@ -18,7 +18,8 @@ position: relative; } - .modal-content, #avatar-crop { + .modal-content, + #avatar-crop { overflow: hidden; } @@ -35,7 +36,7 @@ position: relative; &::before { - content: ''; + content: ""; display: block; padding-top: 100%; } diff --git a/src/components/ui/FloatingActionButton.scss b/src/components/ui/FloatingActionButton.scss index 5df8ff10b..80c185275 100644 --- a/src/components/ui/FloatingActionButton.scss +++ b/src/components/ui/FloatingActionButton.scss @@ -3,7 +3,7 @@ right: 1rem; bottom: 1rem; transform: translateY(calc(5rem - var(--group-call-header-height, 0rem))); - transition: transform .25s cubic-bezier(0.34, 1.56, 0.64, 1); + transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); body.animation-level-0 & { transition: none !important; diff --git a/src/components/ui/ListItem.scss b/src/components/ui/ListItem.scss index 487228d78..8ae844b10 100644 --- a/src/components/ui/ListItem.scss +++ b/src/components/ui/ListItem.scss @@ -1,14 +1,16 @@ .ListItem { position: relative; - body.is-ios &, body.is-android & { + body.is-ios &, + body.is-android & { &:not(:last-of-type)::after { content: ""; position: absolute; bottom: 0; left: 4.5rem; right: 0; - height: 0.03125rem; + /* stylelint-disable-next-line plugin/whole-pixel */ + height: 0.5px; background: var(--color-dividers); } @@ -43,7 +45,7 @@ white-space: nowrap; color: var(--color-text); border-radius: var(--border-radius-default); - --ripple-color: rgba(0, 0, 0, .08); + --ripple-color: rgba(0, 0, 0, 0.08); > i { font-size: 1.5rem; @@ -52,7 +54,10 @@ } } - .user-status, .group-status, .title, .subtitle { + .user-status, + .group-status, + .title, + .subtitle { text-align: initial; unicode-bidi: plaintext; } @@ -60,7 +65,7 @@ &.multiline { .ListItem-button > i { position: relative; - top: .25rem; + top: 0.25rem; } } @@ -81,7 +86,8 @@ } @media (hover: hover) { - &:hover, &:focus { + &:hover, + &:focus { --background-color: var(--color-chat-hover); } } @@ -153,7 +159,7 @@ } .ListItem-button { - padding: .5625rem; + padding: 0.5625rem; } .Avatar { @@ -166,14 +172,18 @@ overflow: hidden; } - .title, .subtitle { + .title, + .subtitle { overflow: hidden; display: flex; justify-content: flex-start; align-items: center; } - h3, .last-message, .status, .typing-status { + h3, + .last-message, + .status, + .typing-status { font-size: 1rem; line-height: 1.6875rem; margin: 0; @@ -214,7 +224,8 @@ flex-grow: 1; overflow: hidden; - .status, .typing-status { + .status, + .typing-status { font-size: 0.875rem; line-height: 1.25rem; color: var(--color-text-secondary); @@ -224,8 +235,8 @@ color: var(--color-primary); } - &[dir=rtl], - &[dir=auto] { + &[dir="rtl"], + &[dir="auto"] { text-align: initial; width: 100%; } @@ -239,7 +250,10 @@ .contact-phone, .contact-username, - h3, .last-message, .status, .typing-status { + h3, + .last-message, + .status, + .typing-status { text-align: initial; unicode-bidi: plaintext; } @@ -249,13 +263,13 @@ .typing-status { body.is-ios &, body.is-macos & { - font-size: .9375rem; + font-size: 0.9375rem; } } - &[dir=rtl] { + &[dir="rtl"] { .ListItem-button { - padding: .5625rem .5625rem .5625rem .6975rem; + padding: 0.5625rem 0.5625rem 0.5625rem 0.6875rem; } .Avatar { @@ -271,14 +285,15 @@ &.search-result-message { .title { - padding-right: .15rem; + padding-right: 0.125rem; } h3 { max-width: 80%; } - h3, .subtitle { + h3, + .subtitle { font-size: 1rem; line-height: 1.5rem; overflow: hidden; @@ -298,7 +313,7 @@ .matching-text-highlight { color: var(--color-text); - background: #CAE3F7; + background: #cae3f7; border-radius: 0.25rem; padding: 0 0.125rem; display: inline-block; @@ -309,7 +324,7 @@ } } - &[dir=rtl] { + &[dir="rtl"] { .LastMessageMeta { margin-left: 0; margin-right: auto; @@ -343,7 +358,7 @@ padding-left: 4rem; } - &[dir=rtl] { + &[dir="rtl"] { .Checkbox { padding-left: 0; padding-right: 4rem; @@ -356,7 +371,8 @@ white-space: initial; overflow: hidden; - .title, .subtitle { + .title, + .subtitle { display: block; text-align: initial; } @@ -382,7 +398,7 @@ } } - &[dir=rtl] { + &[dir="rtl"] { .ListItem-button > i { margin-left: 2rem; margin-right: 0; diff --git a/src/components/ui/Menu.scss b/src/components/ui/Menu.scss index 994817086..fcd1a7ca0 100644 --- a/src/components/ui/Menu.scss +++ b/src/components/ui/Menu.scss @@ -21,26 +21,26 @@ margin: 0; position: absolute; background-color: var(--color-background); - box-shadow: 0 .25rem .5rem .125rem var(--color-default-shadow); + 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; transform: scale(0.5); - transition: opacity .2s cubic-bezier(0.2, 0, 0.2, 1), transform .2s cubic-bezier(0.2, 0, 0.2, 1) !important; + transition: opacity 0.2s cubic-bezier(0.2, 0, 0.2, 1), transform 0.2s cubic-bezier(0.2, 0, 0.2, 1) !important; &.open { transform: scale(1); } &.closing { - transition: opacity .2s ease-in, transform .2s ease-in !important; + transition: opacity 0.2s ease-in, transform 0.2s ease-in !important; } body.animation-level-0 & { transform: none !important; - transition: opacity .15s !important; + transition: opacity 0.15s !important; } body.has-open-dialog & { diff --git a/src/components/ui/MenuItem.scss b/src/components/ui/MenuItem.scss index 4cae49486..efeb44c76 100644 --- a/src/components/ui/MenuItem.scss +++ b/src/components/ui/MenuItem.scss @@ -11,12 +11,13 @@ line-height: 1.5rem; white-space: nowrap; color: var(--color-text); - --ripple-color: rgba(0, 0, 0, .08); + --ripple-color: rgba(0, 0, 0, 0.08); cursor: pointer; unicode-bidi: plaintext; @media (hover: hover) { - &:hover, &:focus { + &:hover, + &:focus { background-color: var(--color-chat-hover); text-decoration: none; color: inherit; @@ -24,7 +25,9 @@ } @media (max-width: 600px) { - &:focus, &:hover, &:active { + &:focus, + &:hover, + &:active { text-decoration: none; color: inherit; } @@ -70,7 +73,7 @@ margin-left: auto; } - &[dir=rtl] { + &[dir="rtl"] { i { margin-left: 2rem; margin-right: 0; diff --git a/src/components/ui/Modal.scss b/src/components/ui/Modal.scss index 3d13abbd0..b4468e79e 100644 --- a/src/components/ui/Modal.scss +++ b/src/components/ui/Modal.scss @@ -2,7 +2,11 @@ position: relative; z-index: var(--z-modal); - &.delete, &.error, &.confirm, &.pin, &.unpin-all { + &.delete, + &.error, + &.confirm, + &.pin, + &.unpin-all { .modal-dialog { max-width: 23rem; } @@ -44,7 +48,7 @@ bottom: 0; left: 0; z-index: -1; - background-color: rgba(0, 0, 0, .25); + background-color: rgba(0, 0, 0, 0.25); } &.transparent-backdrop .modal-backdrop { @@ -60,11 +64,11 @@ min-width: 17.5rem; margin: 2rem auto; background-color: var(--color-background); - box-shadow: 0 .25rem .5rem .125rem var(--color-default-shadow); + box-shadow: 0 0.25rem 0.5rem 0.125rem var(--color-default-shadow); border-radius: var(--border-radius-default); transform: translate3d(0, -1rem, 0); - transition: transform .2s ease, opacity .2s ease; + transition: transform 0.2s ease, opacity 0.2s ease; body.animation-level-0 & { transition: none; @@ -84,7 +88,8 @@ transform: translate3d(0, 1rem, 0); } - .modal-header, %modal-header { + .modal-header, + %modal-header { padding: 1rem 1rem 0; display: flex; align-items: center; @@ -105,7 +110,7 @@ .modal-header-condensed { @extend %modal-header; - padding: .5rem 1.25rem 0 .9375rem !important; + padding: 0.5rem 1.25rem 0 0.9375rem !important; .modal-action-button { font-size: 0.875rem; diff --git a/src/components/ui/Notification.scss b/src/components/ui/Notification.scss index f75ba3209..83d7fa3fc 100644 --- a/src/components/ui/Notification.scss +++ b/src/components/ui/Notification.scss @@ -2,7 +2,7 @@ position: relative; width: 24rem; max-width: 100vw; - margin: .25rem auto; + margin: 0.25rem auto; z-index: var(--z-notification); @media (min-width: 1276px) { @@ -19,12 +19,14 @@ } .Notification { - background: rgba(32, 32, 32, .8) url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48Y2lyY2xlIGZpbGw9IiNGRkYiIGN4PSIxMiIgY3k9IjEyIiByPSIxMiIvPjxjaXJjbGUgZmlsbD0iIzAwMCIgZmlsbC1ydWxlPSJub256ZXJvIiBjeD0iMTIiIGN5PSI2LjUiIHI9IjEuNSIvPjxwYXRoIGQ9Ik0xMiA5LjVjLS41NTIgMC0xIC4zNy0xIC44MjZ2Ny4zNDhjMCAuNDU2LjQ0OC44MjYgMSAuODI2czEtLjM3IDEtLjgyNnYtNy4zNDhjMC0uNDU2LS40NDgtLjgyNi0xLS44MjZ6IiBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L2c+PC9zdmc+") no-repeat .9375rem 50%; + background: rgba(32, 32, 32, 0.8) + url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48Y2lyY2xlIGZpbGw9IiNGRkYiIGN4PSIxMiIgY3k9IjEyIiByPSIxMiIvPjxjaXJjbGUgZmlsbD0iIzAwMCIgZmlsbC1ydWxlPSJub256ZXJvIiBjeD0iMTIiIGN5PSI2LjUiIHI9IjEuNSIvPjxwYXRoIGQ9Ik0xMiA5LjVjLS41NTIgMC0xIC4zNy0xIC44MjZ2Ny4zNDhjMCAuNDU2LjQ0OC44MjYgMSAuODI2czEtLjM3IDEtLjgyNnYtNy4zNDhjMC0uNDU2LS40NDgtLjgyNi0xLS44MjZ6IiBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L2c+PC9zdmc+") + no-repeat 0.9375rem 50%; background-size: 1.5rem; border-radius: var(--border-radius-default); - padding: .9375rem .9375rem .9375rem 3.375rem; + padding: 0.9375rem 0.9375rem 0.9375rem 3.375rem; color: #fff; - margin: 0 .5rem; + margin: 0 0.5rem; .text-entity-link, .text-entity-link:hover, @@ -36,6 +38,6 @@ .content { line-height: 1.25; word-break: break-word; - font-size: .9375rem; + font-size: 0.9375rem; } } diff --git a/src/components/ui/ProgressSpinner.scss b/src/components/ui/ProgressSpinner.scss index 1524ad109..33e90c061 100644 --- a/src/components/ui/ProgressSpinner.scss +++ b/src/components/ui/ProgressSpinner.scss @@ -3,8 +3,9 @@ z-index: 1; width: 3.375rem; height: 3.375rem; - /* stylelint-disable-next-line scss/operator-no-unspaced */ - background: rgba(0, 0, 0, .25) url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkiIGhlaWdodD0iMTkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEwLjcxNyA5Ljc1TDE4LjMgMi4xNjdhLjY4NC42ODQgMCAxMC0uOTY3LS45NjdMOS43NSA4Ljc4MyAyLjE2NyAxLjJhLjY4NC42ODQgMCAxMC0uOTY3Ljk2N0w4Ljc4MyA5Ljc1IDEuMiAxNy4zMzNhLjY4NC42ODQgMCAxMC45NjcuOTY3bDcuNTgzLTcuNTgzIDcuNTgzIDcuNTgzYS42ODEuNjgxIDAgMDAuOTY3IDAgLjY4NC42ODQgMCAwMDAtLjk2N0wxMC43MTcgOS43NXoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0ibm9uemVybyIgc3Ryb2tlPSIjRkZGIiBzdHJva2Utd2lkdGg9Ii43NSIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==) no-repeat 49% 49%; + background: rgba(0, 0, 0, 0.25) + url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkiIGhlaWdodD0iMTkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEwLjcxNyA5Ljc1TDE4LjMgMi4xNjdhLjY4NC42ODQgMCAxMC0uOTY3LS45NjdMOS43NSA4Ljc4MyAyLjE2NyAxLjJhLjY4NC42ODQgMCAxMC0uOTY3Ljk2N0w4Ljc4MyA5Ljc1IDEuMiAxNy4zMzNhLjY4NC42ODQgMCAxMC45NjcuOTY3bDcuNTgzLTcuNTgzIDcuNTgzIDcuNTgzYS42ODEuNjgxIDAgMDAuOTY3IDAgLjY4NC42ODQgMCAwMDAtLjk2N0wxMC43MTcgOS43NXoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0ibm9uemVybyIgc3Ryb2tlPSIjRkZGIiBzdHJva2Utd2lkdGg9Ii43NSIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==) + no-repeat 49% 49%; border-radius: 50%; cursor: pointer; @@ -17,11 +18,11 @@ background-image: none; &::after { - content: ''; + content: ""; position: absolute; - width: .8125rem; - height: .8125rem; - border-radius: .125rem; + width: 0.8125rem; + height: 0.8125rem; + border-radius: 0.125rem; background-color: #fff; left: 50%; top: 50%; @@ -29,16 +30,19 @@ } } - &.size-s, &.size-m { + &.size-s, + &.size-m { width: auto; height: auto; /* stylelint-disable-next-line scss/operator-no-unspaced */ - background: transparent url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iMTUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTguMjE4IDcuNWw1LjYzMy01LjYzM2EuNTA4LjUwOCAwIDEwLS43MTgtLjcxOEw3LjUgNi43ODIgMS44NjcgMS4xNDlhLjUwOC41MDggMCAxMC0uNzE4LjcxOEw2Ljc4MiA3LjVsLTUuNjMzIDUuNjMzYS41MDguNTA4IDAgMTAuNzE4LjcxOEw3LjUgOC4yMThsNS42MzMgNS42MzNhLjUwNi41MDYgMCAwMC43MTggMCAuNTA4LjUwOCAwIDAwMC0uNzE4TDguMjE4IDcuNXoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0ibm9uemVybyIgc3Ryb2tlPSIjRkZGIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+) no-repeat 49% 49%; + background: transparent + url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iMTUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTguMjE4IDcuNWw1LjYzMy01LjYzM2EuNTA4LjUwOCAwIDEwLS43MTgtLjcxOEw3LjUgNi43ODIgMS44NjcgMS4xNDlhLjUwOC41MDggMCAxMC0uNzE4LjcxOEw2Ljc4MiA3LjVsLTUuNjMzIDUuNjMzYS41MDguNTA4IDAgMTAuNzE4LjcxOEw3LjUgOC4yMThsNS42MzMgNS42MzNhLjUwNi41MDYgMCAwMC43MTggMCAuNTA4LjUwOCAwIDAwMC0uNzE4TDguMjE4IDcuNXoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0ibm9uemVybyIgc3Ryb2tlPSIjRkZGIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+) + no-repeat 49% 49%; &.square { background-image: none; - width: .75rem; - height: .75rem; + width: 0.75rem; + height: 0.75rem; } } @@ -49,7 +53,7 @@ svg { width: 3rem; height: 3rem; - margin: .125rem; + margin: 0.125rem; } circle { @@ -69,7 +73,7 @@ } circle { - transition: stroke-dashoffset .5s; + transition: stroke-dashoffset 0.5s; } } diff --git a/src/components/ui/Radio.scss b/src/components/ui/Radio.scss index 21ee5b302..26b94b5f7 100644 --- a/src/components/ui/Radio.scss +++ b/src/components/ui/Radio.scss @@ -15,7 +15,8 @@ &.hidden-widget { cursor: default; .Radio-main { - &::before, &::after { + &::before, + &::after { visibility: hidden; } } @@ -28,8 +29,9 @@ } .Radio-main { - &::before, &::after { - content: ''; + &::before, + &::after { + content: ""; display: block; position: absolute; left: 1.0625rem; @@ -44,7 +46,7 @@ border-radius: 50%; background-color: var(--color-background); opacity: 1; - transition: border-color .1s ease, opacity .1s ease; + transition: border-color 0.1s ease, opacity 0.1s ease; } &::after { @@ -54,7 +56,7 @@ border-radius: 50%; background: var(--color-primary); opacity: 0; - transition: opacity .1s ease; + transition: opacity 0.1s ease; } .label { @@ -95,12 +97,12 @@ top: 50%; transform: translateY(-50%); opacity: 0; - animation: fade-in .2s ease forwards; + animation: fade-in 0.2s ease forwards; --spinner-size: 1.25rem; } } - &[dir=rtl] { + &[dir="rtl"] { padding-left: 0; padding-right: 4.5rem; @@ -123,7 +125,7 @@ text-align: right; } - &.loading .Spinner { + &.loading .Spinner { left: auto; right: 1.0625rem; } diff --git a/src/components/ui/RangeSlider.scss b/src/components/ui/RangeSlider.scss index 6f0ad9ed4..88cebf9f9 100644 --- a/src/components/ui/RangeSlider.scss +++ b/src/components/ui/RangeSlider.scss @@ -1,4 +1,4 @@ -@import '../../styles/mixins'; +@import "../../styles/mixins"; @mixin thumb-styles() { background: var(--slider-color); @@ -8,7 +8,7 @@ border-radius: 50%; cursor: pointer; transform: scale(1); - transition: transform .25s ease-in-out; + transition: transform 0.25s ease-in-out; &:hover { transform: scale(1.2); @@ -36,7 +36,7 @@ color: var(--color-text-secondary); } - &[dir=rtl] { + &[dir="rtl"] { .value { margin-left: 0; margin-right: 1rem; @@ -49,7 +49,7 @@ z-index: 1; &::before { - content: ''; + content: ""; position: absolute; width: 100%; left: 0; @@ -101,13 +101,14 @@ } .slider-option { - font-size: 0.825rem; + font-size: 0.8125rem; text-align: center; cursor: pointer; color: var(--color-text-secondary); - transition: color .2s ease; + transition: color 0.2s ease; - &:hover, &.active { + &:hover, + &.active { color: var(--color-text); } diff --git a/src/components/ui/RippleEffect.scss b/src/components/ui/RippleEffect.scss index 4441fee3e..f481a3912 100644 --- a/src/components/ui/RippleEffect.scss +++ b/src/components/ui/RippleEffect.scss @@ -40,7 +40,7 @@ span { position: absolute; display: block; - background-color: var(--ripple-color, rgba(0, 0, 0, .08)); + background-color: var(--ripple-color, rgba(0, 0, 0, 0.08)); border-radius: 50%; transform: scale(0); animation: ripple-animation 700ms; diff --git a/src/components/ui/SearchInput.scss b/src/components/ui/SearchInput.scss index 89ef2dff3..ae58c4454 100644 --- a/src/components/ui/SearchInput.scss +++ b/src/components/ui/SearchInput.scss @@ -15,12 +15,12 @@ } input { - padding-left: .5rem; + padding-left: 0.5rem; } - &[dir=rtl] { + &[dir="rtl"] { input { - padding-right: .5rem; + padding-right: 0.5rem; padding-left: 0; } } @@ -45,7 +45,8 @@ border-radius: 1.375rem; background-color: transparent !important; box-shadow: none !important; - padding: calc(0.4375rem - var(--border-width)) calc(2.625rem - var(--border-width)) calc(0.5rem - var(--border-width)) calc(2.75rem - var(--border-width)); + padding: calc(0.4375rem - var(--border-width)) calc(2.625rem - var(--border-width)) + calc(0.5rem - var(--border-width)) calc(2.75rem - var(--border-width)); &::placeholder { color: var(--color-placeholders); @@ -54,8 +55,8 @@ > i { position: absolute; - top: .5rem; - left: .75rem; + top: 0.5rem; + left: 0.75rem; font-size: 1.375rem; } @@ -73,8 +74,8 @@ .Button { position: absolute; - top: .125rem; - right: .125rem; + top: 0.125rem; + right: 0.125rem; font-size: 1rem; } @@ -90,23 +91,23 @@ } } - &[dir=rtl] { + &[dir="rtl"] { input { direction: rtl; } > i { left: auto; - right: .75rem; + right: 0.75rem; } .Loading { - left: .5rem; + left: 0.5rem; right: auto; } .Button { - left: .125rem; + left: 0.125rem; right: auto; } } diff --git a/src/components/ui/ShowMoreButton.scss b/src/components/ui/ShowMoreButton.scss index 5564639c0..6fe35462c 100644 --- a/src/components/ui/ShowMoreButton.scss +++ b/src/components/ui/ShowMoreButton.scss @@ -4,7 +4,7 @@ align-items: center; text-align: left; text-transform: none; - padding-left: .75rem !important; + padding-left: 0.75rem !important; opacity: 1 !important; i { diff --git a/src/components/ui/Switcher.scss b/src/components/ui/Switcher.scss index a69b92859..08222aa00 100644 --- a/src/components/ui/Switcher.scss +++ b/src/components/ui/Switcher.scss @@ -41,22 +41,22 @@ height: 0.875rem; background: var(--color-gray); display: inline-block; - border-radius: .5rem; + border-radius: 0.5rem; position: relative; - transition: background .2s ease-in; + transition: background 0.2s ease-in; } .widget:after { - content: ''; + content: ""; position: absolute; - top: -.125rem; + top: -0.125rem; left: 0; width: 1.125rem; height: 1.125rem; background: var(--color-background); - border-radius: .75rem; + border-radius: 0.75rem; transition: 0.2s ease-out; - border: .125rem solid var(--color-gray); + border: 0.125rem solid var(--color-gray); } input:checked + .widget { diff --git a/src/components/ui/Tab.scss b/src/components/ui/Tab.scss index c93d970af..a61a84655 100644 --- a/src/components/ui/Tab.scss +++ b/src/components/ui/Tab.scss @@ -7,7 +7,7 @@ width: auto; margin: 0; border: none; - padding: .625rem .25rem; + padding: 0.625rem 0.25rem; font-weight: 500; color: var(--color-text-secondary); cursor: pointer; @@ -29,7 +29,7 @@ } } - @media (hover:hover) { + @media (hover: hover) { &:not(&--active):hover { background: var(--color-interactive-element-hover); } @@ -54,7 +54,7 @@ margin-inline-start: 0.5rem; background: var(--color-gray); border-radius: 0.75rem; - padding: 0 .3125rem; + padding: 0 0.3125rem; color: white; font-size: 0.875rem; line-height: 1.3125rem; @@ -74,13 +74,13 @@ i { position: absolute; - bottom: calc(-.625rem - 1px); + bottom: calc(-0.625rem - 1px); left: 0; opacity: 0; background-color: var(--color-primary); - height: .1875rem; + height: 0.1875rem; width: 100%; - border-radius: .1875rem .1875rem 0 0; + border-radius: 0.1875rem 0.1875rem 0 0; pointer-events: none; box-sizing: content-box; transform-origin: left; diff --git a/src/components/ui/TabList.scss b/src/components/ui/TabList.scss index 2f247138f..2749de446 100644 --- a/src/components/ui/TabList.scss +++ b/src/components/ui/TabList.scss @@ -5,7 +5,7 @@ display: flex; justify-content: space-between; align-items: flex-end; - font-size: .875rem; + font-size: 0.875rem; flex-wrap: nowrap; box-shadow: 0 2px 2px var(--color-light-shadow); background-color: var(--color-background); @@ -27,6 +27,6 @@ &::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0); // `box-shadow` prevents repaint on macOS when hovering out of scrollable container - box-shadow: 0 0 1px rgba(255, 255, 255, .01); + box-shadow: 0 0 1px rgba(255, 255, 255, 0.01); } } diff --git a/src/components/ui/Transition.scss b/src/components/ui/Transition.scss index 4474bc71d..848206485 100644 --- a/src/components/ui/Transition.scss +++ b/src/components/ui/Transition.scss @@ -5,9 +5,10 @@ width: 100%; height: 100%; animation-fill-mode: forwards !important; - transition: background-color .2s; + transition: background-color 0.2s; - &.from, &.to { + &.from, + &.to { position: absolute; top: 0; left: 0; @@ -76,7 +77,6 @@ } } - &.slide-rtl { > .to { transform: translateX(-100%); @@ -124,11 +124,11 @@ &.animating { > .from > div { - animation: mv-slide-out .4s ease; + animation: mv-slide-out 0.4s ease; } > .to > div { - animation: mv-slide-in .4s ease; + animation: mv-slide-in 0.4s ease; } } } @@ -140,11 +140,11 @@ &.animating { > .from > div { - animation: mv-slide-in-backwards .4s ease; + animation: mv-slide-in-backwards 0.4s ease; } > .to > div { - animation: mv-slide-out-backwards .4s ease; + animation: mv-slide-out-backwards 0.4s ease; } } } @@ -189,11 +189,13 @@ &.animating { > .from { - animation: fade-in-backwards-opacity var(--slide-transition), slide-fade-in-backwards-move var(--slide-transition); + animation: fade-in-backwards-opacity var(--slide-transition), + slide-fade-in-backwards-move var(--slide-transition); } > .to { - animation: fade-out-backwards-opacity var(--slide-transition), slide-fade-out-backwards-move var(--slide-transition); + animation: fade-out-backwards-opacity var(--slide-transition), + slide-fade-out-backwards-move var(--slide-transition); } } } @@ -217,11 +219,11 @@ &.animating { > .from { - animation: fade-out-opacity .15s ease; + animation: fade-out-opacity 0.15s ease; } > .to { - animation: fade-in-opacity .15s ease, zoom-fade-in-move .15s ease; + animation: fade-in-opacity 0.15s ease, zoom-fade-in-move 0.15s ease; } } } @@ -237,11 +239,11 @@ &.animating { > .from { - animation: fade-in-backwards-opacity .1s ease, zoom-fade-in-backwards-move .15s ease; + animation: fade-in-backwards-opacity 0.1s ease, zoom-fade-in-backwards-move 0.15s ease; } > .to { - animation: fade-out-backwards-opacity .15s ease, zoom-fade-out-backwards-move .15s ease; + animation: fade-out-backwards-opacity 0.15s ease, zoom-fade-out-backwards-move 0.15s ease; } } } @@ -260,11 +262,11 @@ &.animating { > .from { - animation: fade-out-opacity .15s ease; + animation: fade-out-opacity 0.15s ease; } > .to { - animation: fade-in-opacity .15s ease; + animation: fade-in-opacity 0.15s ease; } } } @@ -342,11 +344,11 @@ &.animating { > .from { - animation: push-out .3s ease-in-out; + animation: push-out 0.3s ease-in-out; } > .to { - animation: slide-in-200 .3s ease-in-out; + animation: slide-in-200 0.3s ease-in-out; } } } @@ -358,11 +360,11 @@ &.animating { > .from { - animation: slide-in-200-backwards .3s ease-in-out; + animation: slide-in-200-backwards 0.3s ease-in-out; } > .to { - animation: push-out-backwards .3s ease-in-out; + animation: push-out-backwards 0.3s ease-in-out; } } } diff --git a/src/styles/_common.scss b/src/styles/_common.scss index 89e5da454..d1ad6c82e 100644 --- a/src/styles/_common.scss +++ b/src/styles/_common.scss @@ -1,10 +1,11 @@ -@import './mixins'; +@import "./mixins"; // Common styles for all media-type components across the app. .media-inner { position: relative; - video, img { + video, + img { display: block; object-fit: cover; } @@ -14,7 +15,9 @@ background-size: contain; } - .thumbnail ~ .thumbnail, .thumbnail ~ .full-media, .media-loading { + .thumbnail ~ .thumbnail, + .thumbnail ~ .full-media, + .media-loading { position: absolute; } } @@ -23,7 +26,9 @@ position: absolute; transform: rotate(-45deg); - &, &::before, &::after { + &, + &::before, + &::after { width: 1.125rem; height: 0.125rem; border-radius: 0.125rem; @@ -31,11 +36,12 @@ transition: transform var(--slide-transition); } - &::before, &::after { + &::before, + &::after { position: absolute; left: 0; top: 0; - content: ''; + content: ""; } &::before { @@ -43,7 +49,9 @@ } &.no-transition { - &, &::before, &::after { + &, + &::before, + &::after { transition: none; } } @@ -65,7 +73,7 @@ .chat-list { background: var(--color-background); height: 100%; - padding: .5rem .125rem .5rem .4375rem; + padding: 0.5rem 0.125rem 0.5rem 0.4375rem; overflow-y: auto; body.is-android & { diff --git a/src/styles/_forms.scss b/src/styles/_forms.scss index 1d3ff43ff..d681a5cfa 100644 --- a/src/styles/_forms.scss +++ b/src/styles/_forms.scss @@ -7,12 +7,12 @@ padding: 0 0.25rem; position: absolute; left: 0.75rem; - top: 0.95rem; + top: 0.9375rem; background-color: var(--color-background); font-size: 1rem; font-weight: 400; color: var(--color-placeholders); - transition: transform 0.15s ease-out, color .15s ease-out; + transition: transform 0.15s ease-out, color 0.15s ease-out; cursor: text; pointer-events: none; transform-origin: left center; @@ -21,10 +21,10 @@ &.with-arrow { &::after { - content: ''; + content: ""; position: absolute; - height: .75rem; - width: .75rem; + 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); @@ -38,7 +38,7 @@ &.success label, .form-control:focus + label, .form-control.focus + label { - transform: scale(.75) translate(-0.5rem, -2.25rem); + transform: scale(0.75) translate(-0.5rem, -2.25rem); } input::placeholder, @@ -63,7 +63,7 @@ pointer-events: none; } - &[dir=rtl] { + &[dir="rtl"] { input { text-align: right; } @@ -87,7 +87,7 @@ &.success label, .form-control:focus + label, .form-control.focus + label { - transform: scale(.75) translate(1.5rem, -2.25rem); + transform: scale(0.75) translate(1.5rem, -2.25rem); } } } @@ -97,7 +97,7 @@ display: block; width: 100%; height: 3.375rem; - padding: calc(0.75rem - var(--border-width)) calc(.9rem - var(--border-width)); + padding: calc(0.75rem - var(--border-width)) calc(0.9rem - var(--border-width)); border: var(--border-width) solid var(--color-borders-input); border-radius: var(--border-radius-default); color: var(--color-text); @@ -187,15 +187,16 @@ textarea.form-control { opacity: 0.7; font-size: 1.5rem; - &:hover, &:focus { + &:hover, + &:focus { opacity: 1; } } - &[dir=rtl] { + &[dir="rtl"] { .form-control { padding-left: 3.375rem; - padding-right: calc(.9rem - var(--border-width)) + padding-right: calc(0.9rem - var(--border-width)); } .toggle-password { diff --git a/src/styles/_spacing.scss b/src/styles/_spacing.scss index 2946a3eff..70267c858 100644 --- a/src/styles/_spacing.scss +++ b/src/styles/_spacing.scss @@ -5,12 +5,22 @@ $spacers: () !default; $spacers: map.merge( ( 0: 0, - 1: ($spacer * .25), - 2: ($spacer * .5), + 1: ( + $spacer * 0.25, + ), + 2: ( + $spacer * 0.5, + ), 3: $spacer, - 4: ($spacer * 1.5), - 5: ($spacer * 2), - 6: ($spacer * 3), + 4: ( + $spacer * 1.5, + ), + 5: ( + $spacer * 2, + ), + 6: ( + $spacer * 3, + ), ), $spacers ); @@ -19,8 +29,9 @@ $spacers: map.merge( @each $prop, $abbrev in (margin: m, padding: p) { @each $size, $length in $spacers { - - .#{$abbrev}-#{$size} { #{$prop}: $length !important; } + .#{$abbrev}-#{$size} { + #{$prop}: $length !important; + } .#{$abbrev}t-#{$size}, .#{$abbrev}y-#{$size} { #{$prop}-top: $length !important; diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index bbc455950..0d1f8680a 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -4,7 +4,7 @@ @return red($color) + ", " + green($color) + ", " + blue($color); } -@function blend-normal ($foreground, $background) { +@function blend-normal($foreground, $background) { $opacity: opacity($foreground); $background-opacity: opacity($background); @@ -15,42 +15,42 @@ @return rgb($bm-red, $bm-green, $bm-blue); } -$color-primary: #3390EC; +$color-primary: #3390ec; -$color-links: #3390EC; +$color-links: #3390ec; -$color-placeholders: #A2ACB4; +$color-placeholders: #a2acb4; -$color-text-green: #4FAE4E; -$color-green: #00C73E; -$color-light-green: #EEFFDE; +$color-text-green: #4fae4e; +$color-green: #00c73e; +$color-light-green: #eeffde; $color-error: #e53935; $color-warning: #fb8c00; -$color-yellow: #FDD764; +$color-yellow: #fdd764; $color-white: #ffffff; $color-black: #000000; $color-dark-gray: #2e3939; $color-gray: #c4c9cc; $color-text-secondary: #707579; -$color-text-secondary-apple: #8A8A90; +$color-text-secondary-apple: #8a8a90; $color-text-meta: #686c72; -$color-text-meta-apple: #8C8C91; -$color-borders: #DADCE0; -$color-dividers: #C8C6CC; +$color-text-meta-apple: #8c8c91; +$color-borders: #dadce0; +$color-dividers: #c8c6cc; $color-item-active: #ededed; $color-chat-hover: #f4f4f5; -$color-chat-active: #3390EC; +$color-chat-active: #3390ec; $color-selection: #3993fb; // https://github.com/telegramdesktop/tdesktop/wiki/Theme-Reference#user-content-standard-color-constants // Colors borrowed from https://github.com/telegramdesktop/tdesktop/blob/dev/Telegram/Resources/day-blue.tdesktop-theme // historyPeer[1-8]UserpicBg -$color-user-1: #E17076; -$color-user-2: #7BC862; +$color-user-1: #e17076; +$color-user-2: #7bc862; //$color-user-3: #E5CA77; $color-user-4: #65aadd; $color-user-5: #a695e7; @@ -67,7 +67,7 @@ $color-message-reaction-own-hover: #b5e0a4; --color-background: #{$color-white}; --color-background-selected: #f4f4f5; --color-background-secondary: #f4f4f5; - --color-background-secondary-accent: #E4E4E5; + --color-background-secondary-accent: #e4e4e5; --color-background-own: #{$color-light-green}; --color-background-own-selected: color.adjust($color-light-green, -10%); --color-text: #{$color-black}; @@ -95,7 +95,7 @@ $color-message-reaction-own-hover: #b5e0a4; --color-primary-shade: #{color.mix($color-primary, $color-black, 92%)}; --color-primary-shade-darker: #{color.mix($color-primary, $color-black, 84%)}; --color-primary-shade-rgb: #{toRGB(color.mix($color-primary, $color-black, 92%))}; - --color-primary-opacity: rgba(var(--color-primary), 0.50); + --color-primary-opacity: rgba(var(--color-primary), 0.5); --color-green: #{$color-green}; --color-green-darker: #{color.mix($color-green, $color-black, 84%)}; @@ -116,9 +116,9 @@ $color-message-reaction-own-hover: #b5e0a4; --color-pinned: #{$color-white}; --color-code: #4a729a; - --color-code-bg: #{rgba($color-text-secondary, .08)}; + --color-code-bg: #{rgba($color-text-secondary, 0.08)}; --color-code-own: #3c7940; - --color-code-own-bg: #{rgba($color-text-secondary, .08)}; + --color-code-own-bg: #{rgba($color-text-secondary, 0.08)}; --color-accent-own: #{$color-text-green}; --color-message-meta-own: #{$color-text-green}; @@ -133,7 +133,7 @@ $color-message-reaction-own-hover: #b5e0a4; --color-reply-own-hover: #{blend-normal(rgba($color-text-green, 0.12), $color-light-green)}; --color-reply-own-active: #{blend-normal(rgba($color-text-green, 0.24), $color-light-green)}; - --color-background-own-apple: #DCF8C5; + --color-background-own-apple: #dcf8c5; --color-reply-own-hover-apple: #cbefb7; --color-reply-own-active-apple: #bae6a8; @@ -145,7 +145,7 @@ $color-message-reaction-own-hover: #b5e0a4; --color-item-active: #{$color-item-active}; --color-selection-highlight: #{$color-selection}; - --color-selection-highlight-emoji: rgba(#{toRGB($color-selection)}, .7); + --color-selection-highlight-emoji: rgba(#{toRGB($color-selection)}, 0.7); --color-user-1: #{$color-user-1}; --color-user-2: #{$color-user-2}; @@ -156,7 +156,7 @@ $color-message-reaction-own-hover: #b5e0a4; --color-user-8: #{$color-user-8}; --color-default-shadow: #72727240; - --color-light-shadow: #7272722B; + --color-light-shadow: #7272722b; --vh: 1vh; diff --git a/src/styles/index.scss b/src/styles/index.scss index d24be9064..285b46af0 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,20 +1,22 @@ -@import 'reboot'; -@import 'variables'; -@import 'mixins'; -@import 'spacing'; -@import 'forms'; -@import 'icons'; -@import 'common'; -@import '../assets/fonts/roboto.css'; +@import "reboot"; +@import "variables"; +@import "mixins"; +@import "spacing"; +@import "forms"; +@import "icons"; +@import "common"; +@import "../assets/fonts/roboto.css"; -html, body { +html, +body { width: 100%; height: 100%; background: var(--color-background); margin: 0; padding: 0; font-size: 16px; - font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Apple Color Emoji", "Segoe UI", Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; + font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Apple Color Emoji", "Segoe UI", Oxygen, Ubuntu, Cantarell, + "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; color: var(--color-text); font-weight: 400; line-height: 1.5; @@ -33,13 +35,15 @@ body.is-macos { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Roboto", "Apple Color Emoji", "Helvetica Neue", sans-serif; } -html[lang=fa], -html[lang=fa] body { - font-family: "Vazir", "Roboto", -apple-system, BlinkMacSystemFont, "Apple Color Emoji", "Segoe UI", Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; +html[lang="fa"], +html[lang="fa"] body { + font-family: "Vazir", "Roboto", -apple-system, BlinkMacSystemFont, "Apple Color Emoji", "Segoe UI", Oxygen, Ubuntu, + Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; &.is-ios, &.is-macos { - font-family: "Vazir", -apple-system, BlinkMacSystemFont, "Roboto", "Apple Color Emoji", "Segoe UI", Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; + font-family: "Vazir", -apple-system, BlinkMacSystemFont, "Roboto", "Apple Color Emoji", "Segoe UI", Oxygen, Ubuntu, + Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; } } @@ -48,7 +52,8 @@ body.is-ios { --border-radius-messages-small: 0.5rem; } -body.cursor-grabbing, body.cursor-grabbing * { +body.cursor-grabbing, +body.cursor-grabbing * { cursor: grabbing !important; } @@ -84,9 +89,9 @@ body.cursor-ew-resize { display: none; position: absolute; top: 0; - right: -.25rem; + right: -0.25rem; bottom: 0; - width: .25rem; + width: 0.25rem; z-index: var(--z-resize-handle); cursor: ew-resize; @@ -111,7 +116,8 @@ body.cursor-ew-resize { .not-implemented { opacity: 0.5; - &, & * { + &, + & * { cursor: not-allowed !important; } } @@ -130,7 +136,7 @@ body.cursor-ew-resize { .custom-scroll-x { scrollbar-width: thin; scrollbar-color: rgba(90, 90, 90, 0) transparent; - transition: scrollbar-color .3s ease; + transition: scrollbar-color 0.3s ease; -webkit-overflow-scrolling: touch; // Fix scroll lock on iOS @@ -140,10 +146,12 @@ body.cursor-ew-resize { background-color: rgba(90, 90, 90, 0); border-radius: 0.375rem; // `box-shadow` prevents repaint on macOS when hovering out of scrollable container - box-shadow: 0 0 1px rgba(255, 255, 255, .01); + box-shadow: 0 0 1px rgba(255, 255, 255, 0.01); } - &:hover, &:focus, &:focus-within { + &:hover, + &:focus, + &:focus-within { scrollbar-color: rgba(90, 90, 90, 0.3) transparent; &::-webkit-scrollbar-thumb { @@ -155,13 +163,13 @@ body.cursor-ew-resize { body:not(.is-ios) { .custom-scroll { &::-webkit-scrollbar { - width: .375rem; + width: 0.375rem; } } .custom-scroll-x { &::-webkit-scrollbar { - height: .35rem; + height: 0.375rem; } } } @@ -198,7 +206,7 @@ div[role="button"] { .opacity-transition { opacity: 1; - transition: opacity .15s ease; + transition: opacity 0.15s ease; &:not(.open) { opacity: 0; @@ -209,7 +217,7 @@ div[role="button"] { } &.slow { - transition-duration: .3s; + transition-duration: 0.3s; } } @@ -245,7 +253,7 @@ div[role="button"] { @keyframes grow-icon { 0% { transform: scale(0.5); - opacity: .8; + opacity: 0.8; } 50% { transform: scale(1.1); @@ -259,10 +267,10 @@ div[role="button"] { @keyframes hide-icon { from { transform: scale(1); - opacity: .4; + opacity: 0.4; } to { - transform: scale(.5); + transform: scale(0.5); opacity: 0; } } diff --git a/src/styles/reboot.css b/src/styles/reboot.css index e73ac886c..d5ac441c2 100644 --- a/src/styles/reboot.css +++ b/src/styles/reboot.css @@ -16,7 +16,17 @@ html { @-ms-viewport { width: device-width; } -article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section { +article, +aside, +dialog, +figcaption, +figure, +footer, +header, +hgroup, +main, +nav, +section { display: block; } @@ -34,17 +44,17 @@ hr { overflow: visible; } -h1, h2, h3, h4, h5, h6 { +h1, +h2, +h3, +h4, +h5, +h6 { margin-top: 0; margin-bottom: 0.5rem; font-weight: 500; } -p { - margin-top: 0; - margin-bottom: 1rem; -} - abbr[title], abbr[data-original-title] { text-decoration: underline; @@ -59,6 +69,7 @@ address { line-height: inherit; } +p, ol, ul, dl { @@ -73,16 +84,13 @@ ul ol { margin-bottom: 0; } -dt { - font-weight: 500; -} - dd { - margin-bottom: .5rem; + margin-bottom: 0.5rem; margin-left: 0; } -blockquote { +blockquote, +figure { margin: 0 0 1rem; } @@ -90,6 +98,7 @@ dfn { font-style: italic; } +dt, b, strong { font-weight: 500; @@ -108,11 +117,11 @@ sup { } sub { - bottom: -.25em; + bottom: -0.25em; } sup { - top: -.5em; + top: -0.5em; } a { @@ -126,11 +135,9 @@ a:hover { text-decoration: underline; } -a:not([href]):not([tabindex]) { - color: inherit; - text-decoration: none; -} -a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus { +a:not([href]):not([tabindex]), +a:not([href]):not([tabindex]):hover, +a:not([href]):not([tabindex]):focus { color: inherit; text-decoration: none; } @@ -142,8 +149,9 @@ pre, code, kbd, samp { - font: .9375rem/1.25 'Courier', 'Courier New', 'Nimbus Mono L', 'Courier 10 Pitch', 'FreeMono', sans-serif-monospace, monospace; - font-size-adjust: .43; + font: 0.9375rem/1.25 "Courier", "Courier New", "Nimbus Mono L", "Courier 10 Pitch", "FreeMono", sans-serif-monospace, + monospace; + font-size-adjust: 0.43; } pre { @@ -153,10 +161,6 @@ pre { -ms-overflow-style: scrollbar; } -figure { - margin: 0 0 1rem; -} - img { vertical-align: middle; border-style: none; @@ -196,7 +200,7 @@ th { label { display: inline-block; - margin-bottom: .5rem; + margin-bottom: 0.5rem; } button { @@ -274,7 +278,7 @@ legend { width: 100%; max-width: 100%; padding: 0; - margin-bottom: .5rem; + margin-bottom: 0.5rem; font-size: 1.5rem; line-height: inherit; color: inherit; diff --git a/src/util/handleError.ts b/src/util/handleError.ts index ab88c6d61..bcde4f004 100644 --- a/src/util/handleError.ts +++ b/src/util/handleError.ts @@ -8,9 +8,14 @@ window.addEventListener('unhandledrejection', handleErrorEvent); const APP_ENV = process.env.APP_ENV; function handleErrorEvent(e: ErrorEvent | PromiseRejectionEvent) { + // https://stackoverflow.com/questions/49384120/resizeobserver-loop-limit-exceeded + if (e instanceof ErrorEvent && e.message === 'ResizeObserver loop limit exceeded') { + return; + } + e.preventDefault(); - handleError(e instanceof ErrorEvent ? e.error : e.reason); + handleError(e instanceof ErrorEvent ? (e.error || e.message) : e.reason); } const throttledAlert = throttle(window.alert, 1000); diff --git a/tsconfig.json b/tsconfig.json index 0eafe95bb..13c7bc29a 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -23,6 +23,7 @@ }, "include": [ "src", - "tests" + "tests", + "plugins", ] }