diff --git a/.stylelintrc.json b/.stylelintrc.json index 253ae2bca..57a57e975 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -4,7 +4,8 @@ "@stylistic/stylelint-config" ], "ignoreFiles": [ - "dist/*.css" + "dist/*.css", + "src/styles/icons.scss" ], "plugins": [ "@stylistic/stylelint-plugin", @@ -47,6 +48,12 @@ "@stylistic/string-quotes": null, "@stylistic/color-hex-case": null, "@stylistic/selector-list-comma-newline-after": null, - "@stylistic/block-closing-brace-newline-after": null + "@stylistic/block-closing-brace-newline-after": null, + "@stylistic/indentation": [2, { "ignore": ["value"] }], + "at-rule-empty-line-before": ["always", { "ignore": ["first-nested", "after-comment", "blockless-after-blockless"] }], + "rule-empty-line-before": ["always", { + "except": ["after-single-line-comment", "first-nested"], + "ignore": ["after-comment", "inside-block"] + }] } } diff --git a/src/components/calls/group/GroupCall.module.scss b/src/components/calls/group/GroupCall.module.scss index 3a704964c..aef34e838 100644 --- a/src/components/calls/group/GroupCall.module.scss +++ b/src/components/calls/group/GroupCall.module.scss @@ -74,6 +74,7 @@ border-bottom: 0.0625rem solid transparent; padding: 0.375rem 0.875rem; + @include mixins.adapt-padding-to-scrollbar(0.875rem); user-select: none; @@ -139,6 +140,7 @@ .participants { position: relative; margin: 0.125rem 0.5rem 0; + @include mixins.adapt-margin-to-scrollbar(0.5rem); } diff --git a/src/components/common/Audio.scss b/src/components/common/Audio.scss index 82a0f4b27..7c7b1aa58 100644 --- a/src/components/common/Audio.scss +++ b/src/components/common/Audio.scss @@ -71,6 +71,7 @@ &.icon-play { margin-left: 0.1875rem; + @media (max-width: 600px) { margin-left: 0.125rem; } diff --git a/src/components/common/Composer.scss b/src/components/common/Composer.scss index 44a01b98a..3c04cc7d7 100644 --- a/src/components/common/Composer.scss +++ b/src/components/common/Composer.scss @@ -477,6 +477,7 @@ border-radius: 50%; background: var(--color-green-darker); box-shadow: -0.375rem -0.25rem 0 -0.1875rem var(--color-background); + @media (max-width: 600px) { top: 0.5rem; right: 0.5rem; diff --git a/src/components/common/File.scss b/src/components/common/File.scss index 966740686..aa01a7754 100644 --- a/src/components/common/File.scss +++ b/src/components/common/File.scss @@ -7,6 +7,7 @@ .content-inner & { min-width: 14rem; + @media (max-width: 340px) { min-width: 11rem; } diff --git a/src/components/common/code/CodeBlock.scss b/src/components/common/code/CodeBlock.scss index d6cd38bd7..5c70fd71d 100644 --- a/src/components/common/code/CodeBlock.scss +++ b/src/components/common/code/CodeBlock.scss @@ -106,6 +106,7 @@ .hljs-name { color: var(--color-keyword); } + .hljs-link { color: var(--color-link); text-decoration: underline; diff --git a/src/components/left/settings/Settings.scss b/src/components/left/settings/Settings.scss index fe9641294..24d07a687 100644 --- a/src/components/left/settings/Settings.scss +++ b/src/components/left/settings/Settings.scss @@ -109,11 +109,13 @@ .settings-main-menu { padding: 0.5rem; + @include mixins.side-panel-section; > .ChatExtra { padding: 0 0.5rem 0.3125rem; margin: 0 -0.5rem 0.625rem; + @include mixins.side-panel-section; .ListItem.narrow { @@ -125,6 +127,7 @@ .settings-item-simple, .settings-item { padding: 1.5rem 1.5rem 1rem; + @include mixins.side-panel-section; } diff --git a/src/components/left/settings/SettingsGeneralBackground.scss b/src/components/left/settings/SettingsGeneralBackground.scss index 065df7bd0..66d07a0bf 100644 --- a/src/components/left/settings/SettingsGeneralBackground.scss +++ b/src/components/left/settings/SettingsGeneralBackground.scss @@ -6,6 +6,7 @@ grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; grid-gap: 0.0625rem; + @include mixins.side-panel-section; } diff --git a/src/components/left/settings/SettingsGeneralBackgroundColor.scss b/src/components/left/settings/SettingsGeneralBackgroundColor.scss index 001dfa872..20bb8871f 100644 --- a/src/components/left/settings/SettingsGeneralBackgroundColor.scss +++ b/src/components/left/settings/SettingsGeneralBackgroundColor.scss @@ -71,6 +71,7 @@ grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; grid-gap: 0.0625rem; + @include mixins.side-panel-section; } diff --git a/src/components/main/NewContactModal.scss b/src/components/main/NewContactModal.scss index 3090f3c7f..910f2d947 100644 --- a/src/components/main/NewContactModal.scss +++ b/src/components/main/NewContactModal.scss @@ -13,6 +13,7 @@ &-fieldset { flex: 1; margin-inline-start: 1rem; + @media (max-width: 500px) { margin-inline-start: 0; margin-top: 1rem; diff --git a/src/components/mediaViewer/VideoPlayer.scss b/src/components/mediaViewer/VideoPlayer.scss index 98241fe94..21178ad62 100644 --- a/src/components/mediaViewer/VideoPlayer.scss +++ b/src/components/mediaViewer/VideoPlayer.scss @@ -10,6 +10,7 @@ @media (max-height: 640px) { margin-bottom: 1.75rem; + @at-root .has-footer #{&} { margin-bottom: 0; } diff --git a/src/components/mediaViewer/VideoPlayerControls.scss b/src/components/mediaViewer/VideoPlayerControls.scss index cdb4e9509..4aa2e0206 100644 --- a/src/components/mediaViewer/VideoPlayerControls.scss +++ b/src/components/mediaViewer/VideoPlayerControls.scss @@ -46,6 +46,7 @@ padding: 0; margin: 0.25rem; height: 2rem; + @media (max-width: 320px) { margin: 0.125rem; } @@ -97,6 +98,7 @@ overflow: hidden; text-overflow: ellipsis; margin-left: 0.5rem; + @media (max-width: 320px) { margin: 0.25rem; } diff --git a/src/components/middle/MessageSelectToolbar.scss b/src/components/middle/MessageSelectToolbar.scss index 2bbe06cb8..5803133b9 100644 --- a/src/components/middle/MessageSelectToolbar.scss +++ b/src/components/middle/MessageSelectToolbar.scss @@ -19,6 +19,7 @@ .no-composer & { width: 100%; + @media (max-width: 600px) { width: calc(100% - 1rem); } diff --git a/src/components/middle/MiddleColumn.module.scss b/src/components/middle/MiddleColumn.module.scss index ca6b8d41f..6cbbc3a77 100644 --- a/src/components/middle/MiddleColumn.module.scss +++ b/src/components/middle/MiddleColumn.module.scss @@ -61,9 +61,11 @@ @media screen and (min-width: 1276px) { transform: scaleX(0.73) !important; } + @media screen and (min-width: 1921px) { transform: scaleX(0.8) !important; } + @media screen and (min-width: 2600px) { transform: scaleX(0.95) !important; } diff --git a/src/components/middle/composer/BotKeyboardMenu.scss b/src/components/middle/composer/BotKeyboardMenu.scss index 3c2d613ff..fd724b66c 100644 --- a/src/components/middle/composer/BotKeyboardMenu.scss +++ b/src/components/middle/composer/BotKeyboardMenu.scss @@ -13,6 +13,7 @@ padding: 0.1875rem 0.625rem; max-height: 75vh; overflow-y: scroll; + @include mixins.adapt-padding-to-scrollbar(0.625rem); .row { diff --git a/src/components/middle/composer/EmojiPicker.scss b/src/components/middle/composer/EmojiPicker.scss index f2fd6f4d4..de5793de9 100644 --- a/src/components/middle/composer/EmojiPicker.scss +++ b/src/components/middle/composer/EmojiPicker.scss @@ -10,10 +10,12 @@ height: calc(100% - 3rem); overflow-y: auto; padding: 0.5rem 0.75rem; + @include mixins.adapt-padding-to-scrollbar(0.75rem); @media (max-width: 600px) { padding: 0.5rem 0.25rem; + @include mixins.adapt-padding-to-scrollbar(0.25rem); } } diff --git a/src/components/middle/composer/StickerPicker.module.scss b/src/components/middle/composer/StickerPicker.module.scss index a0b110818..7db0ef4fd 100644 --- a/src/components/middle/composer/StickerPicker.module.scss +++ b/src/components/middle/composer/StickerPicker.module.scss @@ -21,10 +21,12 @@ overflow-x: hidden; padding: 0.5rem 0.25rem; + @include mixins.adapt-padding-to-scrollbar(0.25rem); &_customEmoji { padding: 0.5rem 0.75rem; + @include mixins.adapt-padding-to-scrollbar(0.75rem); } diff --git a/src/components/middle/message/Message.scss b/src/components/middle/message/Message.scss index 550a73be3..71a3078b0 100644 --- a/src/components/middle/message/Message.scss +++ b/src/components/middle/message/Message.scss @@ -42,6 +42,7 @@ @media (min-width: 1921px) { --max-width: calc(30vw - 1rem); } + @media (max-width: 600px) { margin-bottom: 0.25rem; } @@ -110,6 +111,7 @@ &.last-in-group { margin-bottom: 0.625rem; + @media (max-width: 600px) { margin-bottom: 0.4375rem; } diff --git a/src/components/middle/message/_message-content.scss b/src/components/middle/message/_message-content.scss index 18b5dae44..b19f365f0 100644 --- a/src/components/middle/message/_message-content.scss +++ b/src/components/middle/message/_message-content.scss @@ -825,9 +825,12 @@ @for $i from 1 through 7 { &.emoji-only-#{$i} { $size: null; + @if $i == 1 { $size: 7rem; - } @else { + } + + @else { $size: min(7.5 - ($i * 0.75), 5.625) + rem; } diff --git a/src/components/payment/Checkout.module.scss b/src/components/payment/Checkout.module.scss index d1dfd3b18..f329f5fe9 100644 --- a/src/components/payment/Checkout.module.scss +++ b/src/components/payment/Checkout.module.scss @@ -8,6 +8,7 @@ align-items: flex-start; margin: 0 1rem; } + .checkout-picture { height: 6rem; border-radius: 0.5rem; diff --git a/src/components/right/Profile.scss b/src/components/right/Profile.scss index 62619fd44..099c25552 100644 --- a/src/components/right/Profile.scss +++ b/src/components/right/Profile.scss @@ -18,6 +18,7 @@ > .profile-info > .ChatExtra { padding: 0.875rem 0.5rem 0.5rem; + @include mixins.side-panel-section; .narrow { diff --git a/src/components/right/management/Management.scss b/src/components/right/management/Management.scss index f12c52d2b..cf5a0eb6c 100644 --- a/src/components/right/management/Management.scss +++ b/src/components/right/management/Management.scss @@ -17,6 +17,7 @@ .section { padding: 1rem 1.5rem; + @include mixins.side-panel-section; &.wide { diff --git a/src/components/right/statistics/BoostStatistics.module.scss b/src/components/right/statistics/BoostStatistics.module.scss index 5f6bfac0d..474fded04 100644 --- a/src/components/right/statistics/BoostStatistics.module.scss +++ b/src/components/right/statistics/BoostStatistics.module.scss @@ -19,6 +19,7 @@ .section { padding: 0.625rem; + @include mixins.side-panel-section; } diff --git a/src/components/story/StoryViewer.module.scss b/src/components/story/StoryViewer.module.scss index e5897bb4f..6ddd6da2e 100644 --- a/src/components/story/StoryViewer.module.scss +++ b/src/components/story/StoryViewer.module.scss @@ -67,6 +67,7 @@ right: 1rem; top: 1rem; z-index: 3; + @media (max-width: 600px) { display: none; } @@ -161,6 +162,7 @@ @for $i from -4 through 4 { $slideWidth: 10.875rem; $basis: 4.25rem; + @if $i < 0 { $basis: -12.625rem; } @@ -325,6 +327,7 @@ } // Shared styles for the header that are also used in ghost animation + @mixin story-header { position: absolute; width: 100%; @@ -436,6 +439,7 @@ .closeButton { display: none; + @media (max-width: 600px) { display: flex; } @@ -448,6 +452,7 @@ :global(.Button) { color: white; + @media (max-width: 600px) { display: flex; &:active, diff --git a/src/components/ui/Button.scss b/src/components/ui/Button.scss index 92098ba53..ff65d111b 100644 --- a/src/components/ui/Button.scss +++ b/src/components/ui/Button.scss @@ -5,6 +5,7 @@ &:focus { @content; } + @media (hover: hover) { &:hover { @content; diff --git a/src/styles/_common.scss b/src/styles/_common.scss index 4366d352d..578ce9139 100644 --- a/src/styles/_common.scss +++ b/src/styles/_common.scss @@ -102,6 +102,7 @@ background: var(--color-background); height: 100%; padding: 0.5rem 0.4375rem 0.5rem 0.4375rem; + @include mixins.adapt-padding-to-scrollbar(0.4375rem); overflow-x: hidden; diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss index 2c05bc28a..2d696cc77 100644 --- a/src/styles/_mixins.scss +++ b/src/styles/_mixins.scss @@ -49,7 +49,9 @@ rgb(var(--_accent-color-rgb), 35%) 5px, rgb(var(--_accent-color-rgb), 35%) 10px ); - } @else { + } + + @else { #{$property}: repeating-linear-gradient( -45deg, @@ -89,7 +91,7 @@ -webkit-appearance: none; } - &::-moz-slider-thumb { + &::-moz-range-thumb { -moz-appearance: none; } diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index d9a60a48e..cab4e8323 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -12,6 +12,7 @@ $bm-red: color.red($foreground) * $opacity + color.red($background) * $background-opacity * (1 - $opacity); $bm-green: color.green($foreground) * $opacity + color.green($background) * $background-opacity * (1 - $opacity); $bm-blue: color.blue($foreground) * $opacity + color.blue($background) * $background-opacity * (1 - $opacity); + @return rgb($bm-red, $bm-green, $bm-blue); } diff --git a/src/styles/reboot.css b/src/styles/reboot.css index 788f04c98..9c2151cb9 100644 --- a/src/styles/reboot.css +++ b/src/styles/reboot.css @@ -17,6 +17,7 @@ html { @-ms-viewport { width: device-width; } + article, aside, dialog, @@ -130,6 +131,7 @@ a { background-color: transparent; -webkit-text-decoration-skip: objects; } + a:hover { color: #0056b3; text-decoration: underline; @@ -141,6 +143,7 @@ a:not([href]):not([tabindex]):focus { color: inherit; text-decoration: none; } + a:not([href]):not([tabindex]):focus { outline: 0; }