diff --git a/src/components/auth/login/LoginDialogButtons/styles.module.scss b/src/components/auth/login/LoginDialogButtons/styles.module.scss index 80e5de4c..b1031f21 100644 --- a/src/components/auth/login/LoginDialogButtons/styles.module.scss +++ b/src/components/auth/login/LoginDialogButtons/styles.module.scss @@ -1,4 +1,4 @@ -@import "src/styles/variables"; +@import 'src/styles/variables'; .footer { padding: $gap; diff --git a/src/components/auth/oauth/LoginSocialRegisterButtons/index.tsx b/src/components/auth/oauth/LoginSocialRegisterButtons/index.tsx index 0a79ccf2..5454d479 100644 --- a/src/components/auth/oauth/LoginSocialRegisterButtons/index.tsx +++ b/src/components/auth/oauth/LoginSocialRegisterButtons/index.tsx @@ -8,7 +8,7 @@ interface IProps {} const LoginSocialRegisterButtons: FC = () => (
- +
); diff --git a/src/components/auth/restore/RestoreInvalidCode/styles.module.scss b/src/components/auth/restore/RestoreInvalidCode/styles.module.scss index e6f90011..f1084142 100644 --- a/src/components/auth/restore/RestoreInvalidCode/styles.module.scss +++ b/src/components/auth/restore/RestoreInvalidCode/styles.module.scss @@ -1,4 +1,4 @@ -@import "src/styles/variables"; +@import 'src/styles/variables'; .error_shade { @include outer_shadow(); @@ -19,17 +19,17 @@ text-transform: uppercase; font: $font_18_semibold; text-align: center; - color: $wisegreen; + color: $color_primary; svg { - fill: $wisegreen; + fill: $color_primary; } } .error_shade { - color: $red; + color: $color_danger; svg { - fill: $red; + fill: $color_danger; } } diff --git a/src/components/auth/restore/RestoreSent/index.tsx b/src/components/auth/restore/RestoreSent/index.tsx index 67ba5786..6e1d04e4 100644 --- a/src/components/auth/restore/RestoreSent/index.tsx +++ b/src/components/auth/restore/RestoreSent/index.tsx @@ -18,9 +18,7 @@ const RestoreSent: VFC = ({ onClose }) => (
- + ); diff --git a/src/components/auth/restore/RestoreSent/styles.module.scss b/src/components/auth/restore/RestoreSent/styles.module.scss index 38f949d7..18fcc6a4 100644 --- a/src/components/auth/restore/RestoreSent/styles.module.scss +++ b/src/components/auth/restore/RestoreSent/styles.module.scss @@ -1,4 +1,4 @@ -@import "src/styles/variables"; +@import 'src/styles/variables'; .shade { @include outer_shadow(); @@ -19,9 +19,9 @@ text-transform: uppercase; font: $font_18_semibold; text-align: center; - color: $wisegreen; + color: $color_primary; svg { - fill: $wisegreen; + fill: $color_primary; } } diff --git a/src/components/auth/restore/RestoreSuccess/index.tsx b/src/components/auth/restore/RestoreSuccess/index.tsx index 843c31a4..e5248052 100644 --- a/src/components/auth/restore/RestoreSuccess/index.tsx +++ b/src/components/auth/restore/RestoreSuccess/index.tsx @@ -20,9 +20,7 @@ const RestoreSuccess: VFC = ({ username, onClick }) => (
- + ); diff --git a/src/components/auth/restore/RestoreSuccess/styles.module.scss b/src/components/auth/restore/RestoreSuccess/styles.module.scss index 38f949d7..18fcc6a4 100644 --- a/src/components/auth/restore/RestoreSuccess/styles.module.scss +++ b/src/components/auth/restore/RestoreSuccess/styles.module.scss @@ -1,4 +1,4 @@ -@import "src/styles/variables"; +@import 'src/styles/variables'; .shade { @include outer_shadow(); @@ -19,9 +19,9 @@ text-transform: uppercase; font: $font_18_semibold; text-align: center; - color: $wisegreen; + color: $color_primary; svg { - fill: $wisegreen; + fill: $color_primary; } } diff --git a/src/components/bars/PlayerBar/styles.module.scss b/src/components/bars/PlayerBar/styles.module.scss index 3a3313c9..cc4c70b0 100644 --- a/src/components/bars/PlayerBar/styles.module.scss +++ b/src/components/bars/PlayerBar/styles.module.scss @@ -12,7 +12,7 @@ display: flex; border-radius: $radius $radius 0 0; align-items: center; - background: lighten($content_bg, 6%); + background: $content_bg_lightest; position: absolute; top: 0; left: 0; @@ -45,7 +45,7 @@ svg { width: 32px; height: 32px; - fill: darken(white, 50%); + fill: $gray_50; stroke: none; } } @@ -68,7 +68,7 @@ } .title { - color: darken(white, 50%); + color: $gray_50; font: $font_14_semibold; white-space: nowrap; overflow: hidden; @@ -88,7 +88,7 @@ left: 0; width: 100%; height: 2px; - background: darken(white, 50%); + background: $gray_50; position: absolute; border-radius: 2px; opacity: 0.5; @@ -100,7 +100,7 @@ left: 0; width: 100%; height: 6px; - background: darken(white, 50%); + background: $gray_50; position: absolute; border-radius: 2px; } diff --git a/src/components/bars/SubmitBar/styles.module.scss b/src/components/bars/SubmitBar/styles.module.scss index 48d3938f..8c605dc6 100644 --- a/src/components/bars/SubmitBar/styles.module.scss +++ b/src/components/bars/SubmitBar/styles.module.scss @@ -1,4 +1,4 @@ -@import "src/styles/variables"; +@import 'src/styles/variables'; .wrap { position: fixed; @@ -14,7 +14,7 @@ } .button { - background: $red_gradient; + background: $danger_gradient; width: $bar_height; height: $bar_height; border-radius: $bar_height * 0.5; @@ -34,12 +34,12 @@ } .lab & { - background: $blue_gradient; + background: $info_gradient; } } .panel { - background: lighten($content_bg, 4%); + background: $content_bg_lighter; position: absolute; bottom: 0; z-index: 1; diff --git a/src/components/boris/BorisContactItem/styles.module.scss b/src/components/boris/BorisContactItem/styles.module.scss index 0373e779..7c0aec80 100644 --- a/src/components/boris/BorisContactItem/styles.module.scss +++ b/src/components/boris/BorisContactItem/styles.module.scss @@ -1,4 +1,4 @@ -@import "src/styles/variables.scss"; +@import 'src/styles/variables.scss'; .item { display: flex; @@ -6,7 +6,7 @@ align-items: center; justify-content: stretch; text-decoration: none; - color: darken(white, 50%); + color: $gray_50; padding: $gap; min-height: 42px; } diff --git a/src/components/boris/BorisStatsGitCard/styles.module.scss b/src/components/boris/BorisStatsGitCard/styles.module.scss index de326031..895db2ab 100644 --- a/src/components/boris/BorisStatsGitCard/styles.module.scss +++ b/src/components/boris/BorisStatsGitCard/styles.module.scss @@ -1,4 +1,4 @@ -@import "src/styles/variables"; +@import 'src/styles/variables'; .wrap { padding: $gap * 0.5 0; @@ -12,7 +12,7 @@ .time { font: $font_12_regular; line-height: 17px; - color: transparentize(white, 0.7) + color: $gray_75; } .subject { @@ -30,7 +30,7 @@ text-transform: uppercase; &.open { - color: $red; + color: $color_danger; } &.closed { diff --git a/src/components/boris/BorisSuperpowers/styles.module.scss b/src/components/boris/BorisSuperpowers/styles.module.scss index 5e7a8857..a9153bad 100644 --- a/src/components/boris/BorisSuperpowers/styles.module.scss +++ b/src/components/boris/BorisSuperpowers/styles.module.scss @@ -1,4 +1,4 @@ -@import "src/styles/variables"; +@import 'src/styles/variables'; .wrap { display: grid; @@ -16,5 +16,5 @@ .subtitle { font: $font_12_regular; - color: transparentize(white, 0.5); + color: $gray_50; } diff --git a/src/components/boris/BorisUIDemo/index.tsx b/src/components/boris/BorisUIDemo/index.tsx index aa3f27b4..da05bf29 100644 --- a/src/components/boris/BorisUIDemo/index.tsx +++ b/src/components/boris/BorisUIDemo/index.tsx @@ -18,8 +18,8 @@ const BorisUIDemo: FC = () => {

UI

- Простая демонстрация элементов интерфейса. Используется, в основном, как подсказка при - разработке + Простая демонстрация элементов интерфейса. Используется, в основном, + как подсказка при разработке

Инпуты

@@ -27,8 +27,18 @@ const BorisUIDemo: FC = () => {
- - + +
@@ -38,7 +48,6 @@ const BorisUIDemo: FC = () => { - diff --git a/src/components/boris/BorisUIDemo/styles.module.scss b/src/components/boris/BorisUIDemo/styles.module.scss index be729b6f..d47657f9 100644 --- a/src/components/boris/BorisUIDemo/styles.module.scss +++ b/src/components/boris/BorisUIDemo/styles.module.scss @@ -1,4 +1,4 @@ -@import "src/styles/variables.scss"; +@import 'src/styles/variables.scss'; .card { flex: 3; @@ -6,7 +6,7 @@ position: relative; z-index: 1; padding: 20px 30px; - background-color: lighten($content_bg, 4%); + background-color: $content_bg_lighter; } .sample { diff --git a/src/components/charts/StatsCountdownCard/styles.module.scss b/src/components/charts/StatsCountdownCard/styles.module.scss index 065c1089..b4a80d7d 100644 --- a/src/components/charts/StatsCountdownCard/styles.module.scss +++ b/src/components/charts/StatsCountdownCard/styles.module.scss @@ -1,4 +1,4 @@ -@import "src/styles/variables"; +@import 'src/styles/variables'; .content { width: 100%; @@ -7,7 +7,7 @@ align-items: center; justify-content: center; font: $font_18_semibold; - color: transparentize(white, 0.5); + color: $gray_50; } span.val { diff --git a/src/components/comment/CommentAvatar/styles.module.scss b/src/components/comment/CommentAvatar/styles.module.scss index 3e0f209b..38d51ab9 100644 --- a/src/components/comment/CommentAvatar/styles.module.scss +++ b/src/components/comment/CommentAvatar/styles.module.scss @@ -1,16 +1,20 @@ -@import "src/styles/variables.scss"; +@import 'src/styles/variables.scss'; @keyframes appear { - 0% { opacity: 0 } - 100% { opacity: 1 } + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } } .popper { @include outer_shadow; - background-color: darken($content_bg, 4%); + background-color: $content_bg_darker; padding: $gap; - box-sizing:border-box; + box-sizing: border-box; touch-action: none; pointer-events: none; border-radius: $radius; diff --git a/src/components/comment/CommentContent/styles.module.scss b/src/components/comment/CommentContent/styles.module.scss index 9838968f..9d996123 100644 --- a/src/components/comment/CommentContent/styles.module.scss +++ b/src/components/comment/CommentContent/styles.module.scss @@ -1,5 +1,5 @@ -@import "src/styles/variables"; -@import "~flexbin/flexbin"; +@import 'src/styles/variables'; +@import '~flexbin/flexbin'; .wrap { @include row_shadow; @@ -23,7 +23,7 @@ touch-action: none; transition: opacity 0.25s, transform 0.25s; cursor: pointer; - background: $red; + background: $color_danger; z-index: 2; & > div { @@ -46,7 +46,7 @@ border-radius: 0 0 0 $radius; opacity: 1; transform: translate(0, 0); - background: transparentize($red, $amount: 0.5); + background: transparentize($color_danger, $amount: 0.5); } } @@ -95,7 +95,7 @@ .date { background: transparentize($color: $content_bg, $amount: 0.2); border-radius: $radius 0 $radius 0; - color: transparentize(white, 0.2); + color: $gray_25; } } @@ -111,7 +111,7 @@ color: transparentize($color: white, $amount: 0.8); padding: 0 6px 2px; z-index: 2; - background: $comment_bg; + background: $content_bg_light; border-radius: 4px; pointer-events: none; touch-action: none; diff --git a/src/components/comment/CommentDistance/styles.module.scss b/src/components/comment/CommentDistance/styles.module.scss index 0802138b..226995ca 100644 --- a/src/components/comment/CommentDistance/styles.module.scss +++ b/src/components/comment/CommentDistance/styles.module.scss @@ -1,8 +1,8 @@ -@import "src/styles/variables"; +@import 'src/styles/variables'; .bar { font: $font_12_regular; - color: darken(white, 60%); + color: $gray_50; user-select: none; width: 100%; text-align: center; diff --git a/src/components/comment/CommentForm/styles.module.scss b/src/components/comment/CommentForm/styles.module.scss index e8f4cdcc..0c0b52bc 100644 --- a/src/components/comment/CommentForm/styles.module.scss +++ b/src/components/comment/CommentForm/styles.module.scss @@ -1,4 +1,4 @@ -@import "src/styles/variables"; +@import 'src/styles/variables'; .wrap { display: flex; @@ -49,7 +49,7 @@ position: absolute; bottom: 0; left: 50%; - background: $red; + background: $color_danger; z-index: 10; font: $font_12_regular; box-sizing: border-box; diff --git a/src/components/comment/CommentMenu/styles.module.scss b/src/components/comment/CommentMenu/styles.module.scss index 1943f26c..5d493464 100644 --- a/src/components/comment/CommentMenu/styles.module.scss +++ b/src/components/comment/CommentMenu/styles.module.scss @@ -1,4 +1,4 @@ -@import "src/styles/variables"; +@import 'src/styles/variables'; .wrap { position: absolute; @@ -9,12 +9,6 @@ z-index: 10; outline: none; cursor: pointer; - - &:hover { - .dot { - background: $secondary; - } - } } @keyframes appear { @@ -57,6 +51,6 @@ } &:hover { - background: $primary; + background: $color_primary; } } diff --git a/src/components/comment/CommentTextBlock/styles.module.scss b/src/components/comment/CommentTextBlock/styles.module.scss index 09814017..2147bf3b 100644 --- a/src/components/comment/CommentTextBlock/styles.module.scss +++ b/src/components/comment/CommentTextBlock/styles.module.scss @@ -1,4 +1,4 @@ -@import "src/styles/variables"; +@import 'src/styles/variables'; .text { padding: 0 $gap; @@ -26,12 +26,12 @@ } :global(.green) { - color: $wisegreen; + color: $color_primary; } & > :last-child::after { display: inline-block; - content: " "; + content: ' '; height: 1em; width: 120px; flex: 0 0 120px; diff --git a/src/components/common/CornerMenu/styles.module.scss b/src/components/common/CornerMenu/styles.module.scss index 1943f26c..5d493464 100644 --- a/src/components/common/CornerMenu/styles.module.scss +++ b/src/components/common/CornerMenu/styles.module.scss @@ -1,4 +1,4 @@ -@import "src/styles/variables"; +@import 'src/styles/variables'; .wrap { position: absolute; @@ -9,12 +9,6 @@ z-index: 10; outline: none; cursor: pointer; - - &:hover { - .dot { - background: $secondary; - } - } } @keyframes appear { @@ -57,6 +51,6 @@ } &:hover { - background: $primary; + background: $color_primary; } } diff --git a/src/components/common/LoadingProgress/styles.module.scss b/src/components/common/LoadingProgress/styles.module.scss index 274bc21f..e031e48d 100644 --- a/src/components/common/LoadingProgress/styles.module.scss +++ b/src/components/common/LoadingProgress/styles.module.scss @@ -1,4 +1,4 @@ -@import "src/styles/variables"; +@import 'src/styles/variables'; @keyframes spin { 0% { @@ -34,5 +34,5 @@ transform: translate(-50%, 0); padding: 2px 10px; border-radius: 10px; - background: $cyan_gradient; + background: $magic_gradient; } diff --git a/src/components/common/ScrollHelperBottom/styles.module.scss b/src/components/common/ScrollHelperBottom/styles.module.scss index 263b9c74..c76eaedf 100644 --- a/src/components/common/ScrollHelperBottom/styles.module.scss +++ b/src/components/common/ScrollHelperBottom/styles.module.scss @@ -1,9 +1,9 @@ -@import "src/styles/variables"; +@import 'src/styles/variables'; .helper { position: fixed; bottom: 0; - background: radial-gradient($red, transparent) 50% 24px no-repeat; + background: radial-gradient($color_danger, transparent) 50% 24px no-repeat; background-size: 100% 48px; display: none; width: calc(100% - 20px); diff --git a/src/components/containers/CommentWrapper/styles.module.scss b/src/components/containers/CommentWrapper/styles.module.scss index 2fe8a136..bb9684d7 100644 --- a/src/components/containers/CommentWrapper/styles.module.scss +++ b/src/components/containers/CommentWrapper/styles.module.scss @@ -1,17 +1,27 @@ -@import "src/styles/variables"; +@import 'src/styles/variables'; @keyframes highlight { - 0% { opacity: 0.75; } - 25% { opacity: 0.5; } - 50% { opacity: 0.75; } - 75% { opacity: 0; } - 100% { opacity: 0; } + 0% { + opacity: 0.75; + } + 25% { + opacity: 0.5; + } + 50% { + opacity: 0.75; + } + 75% { + opacity: 0; + } + 100% { + opacity: 0; + } } .wrap { @include outer_shadow; - background: $comment_bg; + background: $content_bg_light; min-height: $comment_height; display: flex; position: relative; @@ -35,7 +45,7 @@ right: 0; bottom: 0; animation: highlight 1s 0.5s forwards; - background: transparentize($wisegreen, 0.7); + background: transparentize($color_primary, 0.7); border-radius: $radius; pointer-events: none; touch-action: none; @@ -73,14 +83,15 @@ flex-direction: row; flex: 0 0 40px; padding: 8px; - box-shadow: inset rgba(255, 255, 255, 0.05) 1px 1px, inset rgba(0, 0, 0, 0.1) -1px -1px; + box-shadow: inset rgba(255, 255, 255, 0.05) 1px 1px, + inset rgba(0, 0, 0, 0.1) -1px -1px; border-radius: $panel_radius $panel_radius 0 0; } } div.thumb_image { height: $comment_height; - background: transparentize(white, 0.97) no-repeat 50% 50%; + background: $gray_90 no-repeat 50% 50%; border-radius: $panel_radius 0 0 $panel_radius; background-size: cover; flex: 0 0 $comment_height; diff --git a/src/components/containers/Zone/styles.module.scss b/src/components/containers/Zone/styles.module.scss index 707673b0..a7535d5d 100644 --- a/src/components/containers/Zone/styles.module.scss +++ b/src/components/containers/Zone/styles.module.scss @@ -1,7 +1,6 @@ -@import "src/styles/variables"; +@import 'src/styles/variables'; -$pad_danger: mix($red, $content_bg, 70%); -$pad_usual: mix(white, $content_bg, 10%); +$pad_usual: $content_bg_lightest; .title { position: relative; @@ -19,7 +18,7 @@ $pad_usual: mix(white, $content_bg, 10%); text-transform: uppercase; .danger & { - background: $pad_danger; + background: $color_danger_slate; } } } @@ -31,7 +30,7 @@ $pad_usual: mix(white, $content_bg, 10%); position: relative; &.danger { - box-shadow: inset $pad_danger 0 0 0 2px; + box-shadow: inset $color_danger_slate 0 0 0 2px; } &.with_title { diff --git a/src/components/dialogs/BetterScrollDialog/styles.module.scss b/src/components/dialogs/BetterScrollDialog/styles.module.scss index 354f5023..088148ae 100644 --- a/src/components/dialogs/BetterScrollDialog/styles.module.scss +++ b/src/components/dialogs/BetterScrollDialog/styles.module.scss @@ -1,9 +1,9 @@ -@import "src/styles/variables"; +@import 'src/styles/variables'; .wrap { width: 100vw; height: 100vh; - background: transparentize(darken($content_bg, 4%), 0.5); + background: transparentize($content_bg_darker, 0.5); display: flex; align-items: center; justify-content: center; @@ -42,7 +42,7 @@ .footer { @include outer_shadow(); - background: darken($content_bg, 2%); + background: $content_bg_dark; } .body { @@ -66,7 +66,7 @@ .close { @include outer_shadow; - background: lighten($content_bg, 4%); + background: $content_bg_lighter; width: 36px; height: 36px; position: absolute; @@ -88,7 +88,7 @@ } &:hover { - background-color: $red; + background-color: $color_danger; transform: translate(50%, 0) scale(1.25); } @@ -105,7 +105,11 @@ width: 100%; height: 40px; pointer-events: none; - background: linear-gradient(0deg, $red 50%, transparentize($red, 1)); + background: linear-gradient( + 0deg, + $color_danger 50%, + transparentize($color_danger, 1) + ); display: flex; align-items: center; justify-content: center; diff --git a/src/components/dialogs/Tabs/styles.module.scss b/src/components/dialogs/Tabs/styles.module.scss index 848632d5..106cab4c 100644 --- a/src/components/dialogs/Tabs/styles.module.scss +++ b/src/components/dialogs/Tabs/styles.module.scss @@ -1,4 +1,4 @@ -@import "src/styles/variables"; +@import 'src/styles/variables'; .wrap { display: flex; @@ -22,7 +22,7 @@ border: none; &.active { - background: lighten($content_bg, 4%); + background: $content_bg_lighter; } } diff --git a/src/components/editors/EditorButtons/index.tsx b/src/components/editors/EditorButtons/index.tsx index 56b04a40..7857774f 100644 --- a/src/components/editors/EditorButtons/index.tsx +++ b/src/components/editors/EditorButtons/index.tsx @@ -32,7 +32,7 @@ const EditorButtons: FC = () => { diff --git a/src/components/editors/EditorUploadCoverButton/styles.module.scss b/src/components/editors/EditorUploadCoverButton/styles.module.scss index 9a1302c6..9ddbc230 100644 --- a/src/components/editors/EditorUploadCoverButton/styles.module.scss +++ b/src/components/editors/EditorUploadCoverButton/styles.module.scss @@ -1,4 +1,4 @@ -@import "src/styles/variables"; +@import 'src/styles/variables'; .wrap { @include outer_shadow(); @@ -9,7 +9,7 @@ border-radius: $radius; cursor: pointer; transition: opacity 0.5s; - background: lighten($content_bg, 4%); + background: $content_bg_lighter; flex: 0 1 $upload_button_height * 4; display: flex; align-items: center; @@ -68,11 +68,11 @@ justify-content: center; box-shadow: inset rgba(255, 255, 255, 0.05) 1px 1px, rgba(0, 0, 0, 0.3) -1px 0; border-radius: $upload_button_height; - background: transparentize($color: lighten($content_bg, 4%), $amount: 0); + background: transparentize($color: $content_bg_lighter, $amount: 0); &:hover { svg { - fill: $red; + fill: $color_danger; } } diff --git a/src/components/editors/VideoEditor/styles.module.scss b/src/components/editors/VideoEditor/styles.module.scss index d81bc274..66256d19 100644 --- a/src/components/editors/VideoEditor/styles.module.scss +++ b/src/components/editors/VideoEditor/styles.module.scss @@ -1,4 +1,4 @@ -@import "src/styles/variables"; +@import 'src/styles/variables'; .preview { padding-top: 56.25%; @@ -6,7 +6,6 @@ border-radius: $radius; background: 50% 50% no-repeat; background-size: cover; - // background: darken($color: $content_bg, $amount: 2%); } .input_wrap { @@ -34,6 +33,6 @@ } &:global(.active) { - background: $red; + background: $color_danger; } } diff --git a/src/components/flow/FlowCellMenu/styles.module.scss b/src/components/flow/FlowCellMenu/styles.module.scss index 436f9053..0e58cefc 100644 --- a/src/components/flow/FlowCellMenu/styles.module.scss +++ b/src/components/flow/FlowCellMenu/styles.module.scss @@ -1,8 +1,8 @@ -@import "src/styles/variables"; +@import 'src/styles/variables'; .dropdown { @include outer_shadow; - @include blur($red, 15px, 0.3); + @include blur($color_danger, 15px, 0.3); width: 100%; height: 100%; diff --git a/src/components/flow/FlowRecentItem/styles.module.scss b/src/components/flow/FlowRecentItem/styles.module.scss index 1bf96177..6e0a778e 100644 --- a/src/components/flow/FlowRecentItem/styles.module.scss +++ b/src/components/flow/FlowRecentItem/styles.module.scss @@ -1,4 +1,4 @@ -@import "src/styles/variables"; +@import 'src/styles/variables'; .item { display: flex; @@ -30,7 +30,7 @@ width: 12px; height: 12px; border-radius: 100%; - background: $red; + background: $color_danger; box-shadow: $content_bg 0 0 0 5px; position: absolute; right: -2px; @@ -61,7 +61,7 @@ .comment { font: $font_12_regular; margin-top: 4px; - color: darken(white, 50%); + color: $gray_50; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; diff --git a/src/components/flow/FlowSearchResults/styles.module.scss b/src/components/flow/FlowSearchResults/styles.module.scss index 2f736f55..5759af1b 100644 --- a/src/components/flow/FlowSearchResults/styles.module.scss +++ b/src/components/flow/FlowSearchResults/styles.module.scss @@ -1,4 +1,4 @@ -@import "src/styles/variables"; +@import 'src/styles/variables'; .wrap { flex: 1; @@ -12,7 +12,7 @@ flex-direction: column; flex: 1; opacity: 0.3; - fill: transparentize(white, 0.7); + fill: $gray_75; stroke: none; min-height: 250px; } diff --git a/src/components/flow/FlowSwiperHero/styles.module.scss b/src/components/flow/FlowSwiperHero/styles.module.scss index 0036049f..6103a2d3 100644 --- a/src/components/flow/FlowSwiperHero/styles.module.scss +++ b/src/components/flow/FlowSwiperHero/styles.module.scss @@ -163,5 +163,5 @@ img.preview { display: flex; align-items: center; justify-content: center; - color: transparentize(white, 0.95); + color: $gray_90; } diff --git a/src/components/flow/HeroPlaceholder/style.scss b/src/components/flow/HeroPlaceholder/style.scss index e020bcec..38c85817 100644 --- a/src/components/flow/HeroPlaceholder/style.scss +++ b/src/components/flow/HeroPlaceholder/style.scss @@ -1,10 +1,11 @@ -@import "src/styles/variables"; +@import 'src/styles/variables'; .container { height: 280px; width: 100%; - background: transparentize(white, 0.9) - url('http://37.192.131.144/hero/photos/photo-20140527-1639766.jpg') no-repeat 50% 30%; + background: $gray_90 + url('http://37.192.131.144/hero/photos/photo-20140527-1639766.jpg') + no-repeat 50% 30%; background-size: cover; opacity: 0.7; will-change: transform; diff --git a/src/components/input/ArcProgress/styles.module.scss b/src/components/input/ArcProgress/styles.module.scss index 55b8e214..e5ba5472 100644 --- a/src/components/input/ArcProgress/styles.module.scss +++ b/src/components/input/ArcProgress/styles.module.scss @@ -1,7 +1,7 @@ -@import "src/styles/variables"; +@import 'src/styles/variables'; .icon { - fill: $red; + fill: $color_danger; stroke: none; //path { diff --git a/src/components/input/Button/index.tsx b/src/components/input/Button/index.tsx index ed7a8f5e..a03528d7 100644 --- a/src/components/input/Button/index.tsx +++ b/src/components/input/Button/index.tsx @@ -1,4 +1,10 @@ -import React, { ButtonHTMLAttributes, DetailedHTMLProps, FC, memo, useMemo } from 'react'; +import React, { + ButtonHTMLAttributes, + DetailedHTMLProps, + FC, + memo, + useMemo, +} from 'react'; import Tippy from '@tippyjs/react'; import classnames from 'classnames'; @@ -14,7 +20,16 @@ type IButtonProps = DetailedHTMLProps< HTMLButtonElement > & { size?: 'mini' | 'normal' | 'big' | 'giant' | 'micro' | 'small'; - color?: 'primary' | 'secondary' | 'outline' | 'link' | 'gray' | 'lab' | 'outline-white' | 'flat'; + color?: + | 'primary' + | 'danger' + | 'info' + | 'outline' + | 'link' + | 'gray' + | 'lab' + | 'outline-white' + | 'flat'; iconLeft?: IIcon; iconRight?: IIcon; title?: string; @@ -65,7 +80,7 @@ const Button: FC = memo( children, iconOnly, round, - ] + ], ); const loaderSize = useMemo(() => { @@ -79,9 +94,23 @@ const Button: FC = memo( return ( ); - } + }, ); export { Button }; diff --git a/src/components/input/Button/styles.module.scss b/src/components/input/Button/styles.module.scss index d830262f..29403fb9 100644 --- a/src/components/input/Button/styles.module.scss +++ b/src/components/input/Button/styles.module.scss @@ -25,7 +25,7 @@ cursor: pointer; margin: 0; - background: $primary; + background: $color_primary; border-radius: $radius; fill: white; @@ -82,7 +82,7 @@ &:global(.disabled), &:global(.grey) { - background: transparentize(white, 0.9); + background: $gray_90; color: white; } @@ -118,26 +118,26 @@ &.outline { background: transparent; - box-shadow: inset transparentize(white, 0.8) 0 0 0 2px; - color: transparentize(white, 0.8); + box-shadow: inset $gray_75 0 0 0 2px; + color: $gray_75; svg { - fill: transparentize(white, 0.8); + fill: $gray_75; } } &.outline-white { background: transparent; - box-shadow: inset transparentize(white, 0) 0 0 0 2px; - color: transparentize(white, 0); + box-shadow: inset $white 0 0 0 2px; + color: $white; svg { - fill: transparentize(white, 0); + fill: $white; } } &.gray { - background: lighten($content_bg, 8%); + background: $content_bg_lightest; } &.link { @@ -234,12 +234,17 @@ .primary { @include outer_shadow; - background: $red_gradient_alt; + background: $color_primary_gradient; } -.secondary { +.danger { @include outer_shadow; - background: $red; + background: $danger_gradient; +} + +.info { + @include outer_shadow; + background: $info_gradient; } .lab { @@ -248,8 +253,8 @@ .flat { box-shadow: none; - background: $comment_bg; - color: darken(white, 20%); + background: $content_bg_light; + color: $gray_25; } .loading { diff --git a/src/components/input/Info/style.scss b/src/components/input/Info/style.scss index d9fe89bc..f961b0cf 100644 --- a/src/components/input/Info/style.scss +++ b/src/components/input/Info/style.scss @@ -9,20 +9,20 @@ font: $font_14_regular; line-height: 1.2em; padding: $gap; - background: transparentize(white, 0.9); + background: $gray_90; &:global(.danger) { color: white; - background: transparentize($red, 0.5); + background: transparentize($color_danger, 0.5); } &:global(.warning) { color: white; - background: transparentize($red, 0.5); + background: transparentize($color_danger, 0.5); } &:global(.primary) { color: white; - background: transparentize($red, 0.5); + background: transparentize($color_danger, 0.5); } } diff --git a/src/components/input/InputText/styles.module.scss b/src/components/input/InputText/styles.module.scss index 833c4013..1422f8fc 100644 --- a/src/components/input/InputText/styles.module.scss +++ b/src/components/input/InputText/styles.module.scss @@ -1,4 +1,4 @@ -@import "src/styles/variables"; +@import 'src/styles/variables'; .input { display: flex; @@ -6,7 +6,7 @@ color: inherit; &.has_error { - color: $red; + color: $color_danger; } &.has_prefix { @@ -29,7 +29,8 @@ } } -.suffix, .prefix{ +.suffix, +.prefix { fill: currentColor; stroke: currentColor; diff --git a/src/components/input/InputWrapper/styles.module.scss b/src/components/input/InputWrapper/styles.module.scss index 2e819ea6..b197bf73 100644 --- a/src/components/input/InputWrapper/styles.module.scss +++ b/src/components/input/InputWrapper/styles.module.scss @@ -17,11 +17,12 @@ } &.has_error { - box-shadow: inset $red 0 0 0 1px; + box-shadow: inset $color_danger 0 0 0 1px; } } -.error, .title { +.error, +.title { pointer-events: none; touch-action: none; user-select: none; @@ -37,7 +38,7 @@ padding: 0 $gap * 0.5; border-radius: 4px; color: white; - background-color: $red; + background-color: $color_danger; bottom: 0; right: $gap * 0.5; transform: translate(0, 50%); @@ -57,12 +58,14 @@ color: $input_grey_color; text-transform: uppercase; - .focused &, .not_empty & { + .focused &, + .not_empty & { transform: translate(0, -100%) scale(0.75); } - .focused.has_error &, .not_empty.has_error & { + .focused.has_error &, + .not_empty.has_error & { color: white; - background-color: $red; + background-color: $color_danger; } } diff --git a/src/components/input/Toggle/styles.module.scss b/src/components/input/Toggle/styles.module.scss index 06cbac81..032f4c60 100644 --- a/src/components/input/Toggle/styles.module.scss +++ b/src/components/input/Toggle/styles.module.scss @@ -1,11 +1,11 @@ -@import "src/styles/variables.scss"; +@import 'src/styles/variables.scss'; .toggle { height: 24px; width: 48px; flex: 0 0 48px; border-radius: 12px; - background-color: transparentize(white, 0.9); + background-color: $gray_90; display: flex; border: none; outline: none; @@ -33,7 +33,7 @@ height: 18px; width: 18px; border-radius: 11px; - background-color: darken(white, 50%); + background-color: $gray_50; transform: translate(0, 0); transition: transform 0.25s, color 0.25s, background-color; } @@ -45,11 +45,11 @@ } &.primary { - background-color: $wisegreen; + background-color: $color_primary; } &.secondary { - background-color: transparentize(white, 0.85); + background-color: $gray_90; } &.lab { @@ -57,7 +57,7 @@ } &.danger { - background-color: $red; + background-color: $color_danger; } &.monochrome { diff --git a/src/components/lab/LabBottomPanel/styles.module.scss b/src/components/lab/LabBottomPanel/styles.module.scss index 0be83ad7..61d0b7df 100644 --- a/src/components/lab/LabBottomPanel/styles.module.scss +++ b/src/components/lab/LabBottomPanel/styles.module.scss @@ -1,4 +1,4 @@ -@import "src/styles/variables.scss"; +@import 'src/styles/variables.scss'; .wrap { padding: $gap $lab_gap $lab_gap; @@ -10,13 +10,14 @@ .timestamp { font: $font_12_regular; - color: darken(white, 40%); + color: $gray_50; } -.comments, .like { +.comments, +.like { flex: 0; font: $font_16_semibold; - color: darken(white, 50%); + color: $gray_50; fill: currentColor; stroke: none; column-gap: $gap !important; @@ -25,6 +26,6 @@ padding-left: $gap; &.active { - color: $red; + color: $color_danger; } } diff --git a/src/components/lab/LabHero/styles.module.scss b/src/components/lab/LabHero/styles.module.scss index f70c19b2..be38c3e8 100644 --- a/src/components/lab/LabHero/styles.module.scss +++ b/src/components/lab/LabHero/styles.module.scss @@ -1,4 +1,4 @@ -@import "src/styles/variables.scss"; +@import 'src/styles/variables.scss'; .wrap { min-width: 0; @@ -7,7 +7,7 @@ } .star { - fill: darken(white, 76%); + fill: $gray_75; flex: 0 0 32px; } @@ -16,14 +16,14 @@ text-overflow: ellipsis; line-height: 22px; word-break: break-all; - color: darken(white, 40%); + color: $gray_50; - @include clamp(2, 22px) + @include clamp(2, 22px); } .description { font: $font_10_regular; - color: darken(white, 50%); + color: $gray_50; padding-top: 4px; } diff --git a/src/components/lab/LabImage/styles.module.scss b/src/components/lab/LabImage/styles.module.scss index c392b97f..076d3f73 100644 --- a/src/components/lab/LabImage/styles.module.scss +++ b/src/components/lab/LabImage/styles.module.scss @@ -1,4 +1,4 @@ -@import "src/styles/variables.scss"; +@import 'src/styles/variables.scss'; .wrapper { display: flex; @@ -21,7 +21,6 @@ font-size: 32px; } } - } .slide { @@ -56,9 +55,7 @@ :global(.swiper-slide-active) & { box-shadow: transparentize(black, 0.9) 0 10px 5px 4px, - transparentize(black, 0.7) 0 5px 5px, - transparentize(white, 0.95) 0 -1px 2px, - transparentize(white, 0.95) 0 -1px; + transparentize(black, 0.7) 0 5px 5px, $gray_90 0 -1px 2px, $gray_90 0 -1px; } @include tablet { diff --git a/src/components/lab/LabNodeTitle/styles.module.scss b/src/components/lab/LabNodeTitle/styles.module.scss index 3748513f..81646b92 100644 --- a/src/components/lab/LabNodeTitle/styles.module.scss +++ b/src/components/lab/LabNodeTitle/styles.module.scss @@ -1,4 +1,4 @@ -@import "src/styles/variables.scss"; +@import 'src/styles/variables.scss'; .wrap { padding: $lab_gap - $gap $lab_gap 0; @@ -30,6 +30,6 @@ } .star { - fill: darken(white, 50%); + fill: $gray_50; flex: 0 0 24px; } diff --git a/src/components/main/Footer/styles.module.scss b/src/components/main/Footer/styles.module.scss index f0b19c41..ff791c41 100644 --- a/src/components/main/Footer/styles.module.scss +++ b/src/components/main/Footer/styles.module.scss @@ -1,4 +1,4 @@ -@import "src/styles/variables"; +@import 'src/styles/variables'; .footer { display: flex; @@ -8,7 +8,7 @@ border-radius: 0 0 $radius $radius; align-items: center; text-transform: uppercase; - color: darken(white, 80%); + color: $gray_75; padding-top: 2px; box-sizing: border-box; diff --git a/src/components/main/UserButton/styles.module.scss b/src/components/main/UserButton/styles.module.scss index 9bfec072..bde6513c 100644 --- a/src/components/main/UserButton/styles.module.scss +++ b/src/components/main/UserButton/styles.module.scss @@ -1,4 +1,4 @@ -@import "src/styles/variables"; +@import 'src/styles/variables'; .wrap { position: relative; @@ -30,7 +30,7 @@ background: white; border-radius: $radius; margin-left: ($gap + 2px) !important; - background: 50% 50% no-repeat $wisegreen; + background: 50% 50% no-repeat $color_primary; display: flex; align-items: center; justify-content: center; diff --git a/src/components/media/AudioPlayer/styles.module.scss b/src/components/media/AudioPlayer/styles.module.scss index 19218e05..77c5d70f 100644 --- a/src/components/media/AudioPlayer/styles.module.scss +++ b/src/components/media/AudioPlayer/styles.module.scss @@ -67,7 +67,7 @@ opacity: 1; font-size: 12px; padding-right: 140px; - color: transparentize(white, 0.7); + color: $gray_75; } } @@ -92,7 +92,7 @@ position: absolute; height: 10px; border-radius: 5px; - background: transparentize(white, 0.95); + background: $gray_90; width: 100%; top: 5px; left: 0; @@ -100,7 +100,7 @@ } .bar { - background: $green_gradient; + background: $color_primary_gradient; position: absolute; height: 10px; left: 0; diff --git a/src/components/menu/HorizontalMenu/styles.module.scss b/src/components/menu/HorizontalMenu/styles.module.scss index 038585a6..d16fc13a 100644 --- a/src/components/menu/HorizontalMenu/styles.module.scss +++ b/src/components/menu/HorizontalMenu/styles.module.scss @@ -1,4 +1,4 @@ -@import "src/styles/variables.scss"; +@import 'src/styles/variables.scss'; .menu { @include inner_shadow; @@ -21,9 +21,9 @@ .item { flex: 0 0 auto; - padding: $gap * 0.5 $gap $gap * 0.5 $gap; + padding: $gap * 0.5 $gap $gap * 0.5 $gap; fill: currentColor; - color: darken(white, 50%); + color: $gray_50; transition: color 0.25s; cursor: pointer; border-radius: $radius; @@ -46,15 +46,15 @@ color: white; &.green { - background: $green_gradient; + background: $color_primary_gradient; } &.orange { - background: $red_gradient; + background: $danger_gradient; } &.yellow { - background: $yellow_gradient; + background: $warning_gradient; } } } diff --git a/src/components/menu/SeparatedMenu/styles.module.scss b/src/components/menu/SeparatedMenu/styles.module.scss index 774494f4..40a654f4 100644 --- a/src/components/menu/SeparatedMenu/styles.module.scss +++ b/src/components/menu/SeparatedMenu/styles.module.scss @@ -1,5 +1,5 @@ -@import "src/styles/mixins"; -@import "src/styles/variables"; +@import 'src/styles/mixins'; +@import 'src/styles/variables'; .menu { flex: 0; @@ -27,14 +27,14 @@ position: absolute; width: 3px; height: 16px; - background: darken($content_bg, 1%); + background: $content_bg_darker; display: flex; top: 5px; right: -$gap * 2 - 2px; border-radius: 2px; @include tablet { - right : -$gap - 1px; + right: -$gap - 1px; } } } diff --git a/src/components/menu/VerticalMenu/styles.module.scss b/src/components/menu/VerticalMenu/styles.module.scss index a211281c..ac8b0d12 100644 --- a/src/components/menu/VerticalMenu/styles.module.scss +++ b/src/components/menu/VerticalMenu/styles.module.scss @@ -1,5 +1,5 @@ -@import "src/styles/variables"; -@import "src/styles/mixins"; +@import 'src/styles/variables'; +@import 'src/styles/mixins'; .menu { border-radius: $radius; @@ -30,11 +30,11 @@ a.item { padding: $gap; font: $font_16_semibold; cursor: pointer; - background-color: transparentize($secondary, 1); + background-color: transparentize($color_primary, 1); transition: background-color 0.25s; &:hover { - background-color: transparentize($secondary, 0.5); + background-color: transparentize($color_primary, 0.5); } &:first-child { diff --git a/src/components/node/CommendDeleted/styles.module.scss b/src/components/node/CommendDeleted/styles.module.scss index fb910494..9d2ccf6d 100644 --- a/src/components/node/CommendDeleted/styles.module.scss +++ b/src/components/node/CommendDeleted/styles.module.scss @@ -1,4 +1,4 @@ -@import "src/styles/variables"; +@import 'src/styles/variables'; .wrap { display: flex; @@ -15,9 +15,9 @@ } .button { - color: $red !important; + color: $color_danger !important; svg { - fill: $red !important; + fill: $color_danger !important; } } diff --git a/src/components/node/MenuButton/styles.module.scss b/src/components/node/MenuButton/styles.module.scss index e7fa57dc..e407f5f5 100644 --- a/src/components/node/MenuButton/styles.module.scss +++ b/src/components/node/MenuButton/styles.module.scss @@ -1,4 +1,4 @@ -@import "src/styles/variables"; +@import 'src/styles/variables'; .button { fill: white; @@ -24,6 +24,6 @@ .description { font: $font_12_regular; - color: transparentize(white, 0.6); + color: $gray_75; white-space: nowrap; } diff --git a/src/components/node/NodeAuthorBlock/styles.module.scss b/src/components/node/NodeAuthorBlock/styles.module.scss index 6a77ee84..8f7e9124 100644 --- a/src/components/node/NodeAuthorBlock/styles.module.scss +++ b/src/components/node/NodeAuthorBlock/styles.module.scss @@ -1,10 +1,10 @@ -@import "src/styles/variables.scss"; +@import 'src/styles/variables.scss'; div.block { @include inner_shadow_active; cursor: pointer; - background: $inset_bg; + background: linear-gradient(135deg, $content_bg_dark, $content_bg); padding: $gap; border-radius: $radius; display: flex; diff --git a/src/components/node/NodeDeletedBadge/styles.module.scss b/src/components/node/NodeDeletedBadge/styles.module.scss index a5038b5a..d51ba459 100644 --- a/src/components/node/NodeDeletedBadge/styles.module.scss +++ b/src/components/node/NodeDeletedBadge/styles.module.scss @@ -1,10 +1,10 @@ -@import "src/styles/variables"; +@import 'src/styles/variables'; .badge { padding: $gap; text-align: center; border-radius: $radius; - color: $red; + color: $color_danger; padding: $gap * 4 $gap; text-transform: uppercase; font: $font_18_semibold; diff --git a/src/components/node/NodeImageBlockPlaceholder/styles.module.scss b/src/components/node/NodeImageBlockPlaceholder/styles.module.scss index 3219165a..5c734036 100644 --- a/src/components/node/NodeImageBlockPlaceholder/styles.module.scss +++ b/src/components/node/NodeImageBlockPlaceholder/styles.module.scss @@ -1,4 +1,4 @@ -@import "src/styles/variables"; +@import 'src/styles/variables'; .placeholder { height: 320px; @@ -11,6 +11,6 @@ justify-content: center; svg { - fill: transparentize(white, 0.95); + fill: $gray_90; } } diff --git a/src/components/node/NodeImageSwiperBlock/styles.module.scss b/src/components/node/NodeImageSwiperBlock/styles.module.scss index 01fd3847..46d4d405 100644 --- a/src/components/node/NodeImageSwiperBlock/styles.module.scss +++ b/src/components/node/NodeImageSwiperBlock/styles.module.scss @@ -1,4 +1,4 @@ -@import "src/styles/variables.scss"; +@import 'src/styles/variables.scss'; .wrapper { border-radius: $radius; @@ -15,7 +15,7 @@ left: 50%; bottom: $gap * 2; transform: translate(-50%, 0); - background: darken($content_bg, 4%); + background: $content_bg_darker; width: auto; padding: 5px 10px; border-radius: 10px; @@ -82,7 +82,6 @@ } } } - } .slide.slide { @@ -127,9 +126,7 @@ :global(.swiper-slide-active) & { box-shadow: transparentize(black, 0.9) 0 10px 5px 4px, - transparentize(black, 0.7) 0 5px 5px, - transparentize(white, 0.95) 0 -1px 2px, - transparentize(white, 0.95) 0 -1px; + transparentize(black, 0.7) 0 5px 5px, $gray_90 0 -1px 2px, $gray_90 0 -1px; } @include tablet { diff --git a/src/components/node/NodeNoComments/styles.module.scss b/src/components/node/NodeNoComments/styles.module.scss index ea3a6d7d..0589c915 100644 --- a/src/components/node/NodeNoComments/styles.module.scss +++ b/src/components/node/NodeNoComments/styles.module.scss @@ -1,4 +1,4 @@ -@import "src/styles/variables"; +@import 'src/styles/variables'; .wrap { user-select: none; @@ -49,7 +49,7 @@ transform: translate(-50%, -50%); font: $font_18_semibold; text-transform: uppercase; - color: darken(white, 75%); + color: $gray_75; height: 20px; margin-top: 0 !important; text-align: center; diff --git a/src/components/node/NodeRelatedItem/styles.module.scss b/src/components/node/NodeRelatedItem/styles.module.scss index 17fe3b1d..3214b83a 100644 --- a/src/components/node/NodeRelatedItem/styles.module.scss +++ b/src/components/node/NodeRelatedItem/styles.module.scss @@ -1,7 +1,7 @@ -@import "src/styles/variables"; +@import 'src/styles/variables'; .item { - background: lighten($content_bg, 2%) 50% 50% no-repeat; + background: $content_bg_light 50% 50% no-repeat; padding-bottom: 100%; border-radius: $cell_radius; cursor: pointer; @@ -29,7 +29,8 @@ div.thumb { } } -.letters, .title { +.letters, +.title { @include outer_shadow; position: absolute; @@ -41,7 +42,7 @@ div.thumb { width: 100%; height: 100%; font: $font_24_semibold; - color: transparentize(white, 0.5); + color: $gray_50; border-radius: $cell_radius; } @@ -53,7 +54,7 @@ div.thumb { justify-content: flex-start; word-break: break-word; overflow: hidden; - color: transparentize(white, 0.3); + color: $gray_25; .large & { font: $font_14_semibold; diff --git a/src/components/node/NodeTitle/styles.module.scss b/src/components/node/NodeTitle/styles.module.scss index 368eaef8..4b22caaf 100644 --- a/src/components/node/NodeTitle/styles.module.scss +++ b/src/components/node/NodeTitle/styles.module.scss @@ -8,13 +8,13 @@ justify-content: center; svg { - fill: darken(white, 50%); + fill: $gray_50; transition: fill 0.25s; } &:hover { svg { - fill: $red; + fill: $color_danger; } } @@ -75,7 +75,7 @@ .name { font: $font_12_regular; - color: transparentize(white, 0.5); + color: $gray_50; text-transform: lowercase; @include tablet { @@ -89,7 +89,7 @@ display: flex; align-items: center; justify-content: center; - fill: transparentize(white, 0.5); + fill: $gray_50; } .panel { @@ -134,16 +134,16 @@ opacity: 1; svg { - fill: $red; + fill: $color_danger; } .like_count { - color: $red; + color: $color_danger; } } &:hover { - fill: $red; + fill: $color_danger; animation: pulse 0.75s infinite; .like_count { @@ -159,7 +159,7 @@ bottom: 0; opacity: 1; transition: opacity 0.25s, color 0.25s; - background: $node_bg; + background: $content_bg_dark; padding: 0 3px; border-radius: 10px; z-index: 3; diff --git a/src/components/notifications/NotificationBubble/styles.module.scss b/src/components/notifications/NotificationBubble/styles.module.scss index a3ed40ae..d351ef4d 100644 --- a/src/components/notifications/NotificationBubble/styles.module.scss +++ b/src/components/notifications/NotificationBubble/styles.module.scss @@ -1,6 +1,6 @@ -@import "src/styles/variables"; +@import 'src/styles/variables'; -$notification_color: darken($content_bg, 2%); +$notification_color: $content_bg_dark; @keyframes appear { 0% { diff --git a/src/components/profile/Message/styles.module.scss b/src/components/profile/Message/styles.module.scss index 244dccc0..4dca2de7 100644 --- a/src/components/profile/Message/styles.module.scss +++ b/src/components/profile/Message/styles.module.scss @@ -1,7 +1,7 @@ -@import "src/styles/variables"; +@import 'src/styles/variables'; -$incoming_color: transparentize($wisegreen, 0.7); -$outgoing_color: $comment_bg; +$incoming_color: transparentize($color_primary, 0.7); +$outgoing_color: $content_bg_light; .message { align-items: flex-end !important; @@ -18,7 +18,7 @@ $outgoing_color: $comment_bg; height: 0; border-style: solid; border-width: 20px 0 0 20px; - border-color: transparent transparent transparent $comment_bg; + border-color: transparent transparent transparent $content_bg_light; bottom: 0; right: 24px; } @@ -88,12 +88,12 @@ $outgoing_color: $comment_bg; } .restore { - color: $red; - fill: $red; + color: $color_danger; + fill: $color_danger; } .deleted { - background: mix($red, $content_bg, 50%); + background: mix($color_danger, $content_bg, 50%); border-radius: $radius $radius $radius 0; padding: $gap * 0.5; z-index: 2; diff --git a/src/components/profile/ProfileAccountsError/styles.module.scss b/src/components/profile/ProfileAccountsError/styles.module.scss index d184cec8..7238aa5c 100644 --- a/src/components/profile/ProfileAccountsError/styles.module.scss +++ b/src/components/profile/ProfileAccountsError/styles.module.scss @@ -1,4 +1,4 @@ -@import "src/styles/variables"; +@import 'src/styles/variables'; .wrap { position: absolute; @@ -15,7 +15,7 @@ box-sizing: border-box; border-radius: $radius; - @include blur($red); + @include blur($color_danger); } .title { diff --git a/src/components/profile/ProfileAvatar/index.tsx b/src/components/profile/ProfileAvatar/index.tsx index ce158077..a267fcf6 100644 --- a/src/components/profile/ProfileAvatar/index.tsx +++ b/src/components/profile/ProfileAvatar/index.tsx @@ -14,7 +14,12 @@ export interface ProfileAvatarProps { onChangePhoto: (file: File) => void; } -const ProfileAvatar: FC = ({ photo, onChangePhoto, canEdit, size }) => { +const ProfileAvatar: FC = ({ + photo, + onChangePhoto, + canEdit, + size, +}) => { const onInputChange = useCallback( async (event: ChangeEvent) => { if (!event.target.files?.length) { @@ -23,10 +28,12 @@ const ProfileAvatar: FC = ({ photo, onChangePhoto, canEdit, onChangePhoto(event.target.files[0]); }, - [onChangePhoto] + [onChangePhoto], ); - const backgroundImage = photo ? `url("${getURL(photo, ImagePresets.avatar)}")` : undefined; + const backgroundImage = photo + ? `url("${getURL(photo, ImagePresets.avatar)}")` + : undefined; return (
= ({ photo, onChangePhoto, canEdit, }} > {canEdit && } - {canEdit &&
); }; diff --git a/src/components/profile/ProfileAvatar/styles.module.scss b/src/components/profile/ProfileAvatar/styles.module.scss index 3d18310c..0d8edd00 100644 --- a/src/components/profile/ProfileAvatar/styles.module.scss +++ b/src/components/profile/ProfileAvatar/styles.module.scss @@ -1,4 +1,4 @@ -@import "src/styles/variables"; +@import 'src/styles/variables'; .avatar { @include outer_shadow(); @@ -21,7 +21,7 @@ } } -.can_edit { +.button { position: absolute; right: -4px; bottom: -4px; diff --git a/src/components/profile/ProfileSidebarSettings/index.tsx b/src/components/profile/ProfileSidebarSettings/index.tsx index 6fcf7db2..389db635 100644 --- a/src/components/profile/ProfileSidebarSettings/index.tsx +++ b/src/components/profile/ProfileSidebarSettings/index.tsx @@ -47,9 +47,7 @@ const ProfileSidebarSettings: FC = () => { Отмена - +
diff --git a/src/components/sidebar/SidebarStack/styles.module.scss b/src/components/sidebar/SidebarStack/styles.module.scss index acc8b946..63dce738 100644 --- a/src/components/sidebar/SidebarStack/styles.module.scss +++ b/src/components/sidebar/SidebarStack/styles.module.scss @@ -1,4 +1,4 @@ -@import "src/styles/variables"; +@import 'src/styles/variables'; .stack { background: transparentize($content_bg, 0.2); @@ -15,7 +15,7 @@ } .card { - box-shadow: transparentize(white, 0.9) -1px 0, transparentize(black, 0.7) -5px 0 15px; + box-shadow: $gray_90 -1px 0, transparentize(black, 0.7) -5px 0 15px; border-radius: $radius 0 0 $radius; display: flex; flex-direction: column; diff --git a/src/components/tags/TagAutocomplete/styles.module.scss b/src/components/tags/TagAutocomplete/styles.module.scss index 1055262d..17336725 100644 --- a/src/components/tags/TagAutocomplete/styles.module.scss +++ b/src/components/tags/TagAutocomplete/styles.module.scss @@ -1,8 +1,12 @@ -@import "src/styles/variables"; +@import 'src/styles/variables'; @keyframes appear { - 0% { opacity: 0 } - 100% { opacity: 100 } + 0% { + opacity: 0; + } + 100% { + opacity: 100; + } } $row_height: 24px; @@ -16,7 +20,7 @@ $row_height: 24px; right: -2px; width: calc(100vw - 15px); max-width: 300px; - background: darken($content_bg, 2%); + background: $content_bg_dark; z-index: 10; border-radius: 4px; animation: appear 0.25s forwards; @@ -39,4 +43,4 @@ $row_height: 24px; .arrow { @include popper_arrow; -} \ No newline at end of file +} diff --git a/src/components/tags/TagAutocompleteRow/styles.module.scss b/src/components/tags/TagAutocompleteRow/styles.module.scss index 7a2f3385..9dd1ece5 100644 --- a/src/components/tags/TagAutocompleteRow/styles.module.scss +++ b/src/components/tags/TagAutocompleteRow/styles.module.scss @@ -1,4 +1,4 @@ -@import "src/styles/variables"; +@import 'src/styles/variables'; $row_height: 26px; @@ -16,13 +16,14 @@ $row_height: 26px; text-overflow: ellipsis; overflow: hidden; - &:hover, &.selected { + &:hover, + &.selected { opacity: 1; - background: transparentize($wisegreen, 0.6); + background: transparentize($color_primary, 0.6); } &.right { - color: lighten($wisegreen, 4%); + color: lighten($color_primary, 4%); opacity: 1; } diff --git a/src/components/tags/TagWrapper/styles.module.scss b/src/components/tags/TagWrapper/styles.module.scss index 47bafbf9..b6ebab5c 100644 --- a/src/components/tags/TagWrapper/styles.module.scss +++ b/src/components/tags/TagWrapper/styles.module.scss @@ -8,7 +8,7 @@ $big: 1.2; overflow: hidden; cursor: default; height: $tag_height; - background: $tag_bg; + background: $content_bg_light; border-radius: ($tag_height * 0.5) 3px 3px ($tag_height * 0.5); font: $font_14_semibold; align-self: flex-start; @@ -42,29 +42,29 @@ $big: 1.2; &:global(.is_editing) { cursor: pointer; - background-color: lighten($tag_bg, 10%); + background-color: lighten($content_bg_light, 10%); } &:global(.red) { - background: $red_gradient; + background: $danger_gradient; } &:global(.blue) { - background: $blue_gradient; + background: $info_gradient; } &:global(.green) { - background: $green_gradient; + background: $color_primary_gradient; } &:global(.black) { background: transparentize(black, 0.7); box-shadow: none; - color: transparentize(white, 0.6); + color: $gray_75; font: $font_14_medium; .hole::after { - background: transparentize(white, 0.98); + background: $gray_90; } } @@ -124,8 +124,7 @@ $big: 1.2; } button.delete { - box-shadow: inset transparentize(white, 0.9) 1px 0, - transparentize(black, 0.7) -1px 0; + box-shadow: inset $gray_90 1px 0, transparentize(black, 0.7) -1px 0; width: 24px; height: $tag_height; background: transparentize($content_bg, 0.75); diff --git a/src/components/upload/AudioUpload/styles.module.scss b/src/components/upload/AudioUpload/styles.module.scss index 87ffdf1a..f4a0a500 100644 --- a/src/components/upload/AudioUpload/styles.module.scss +++ b/src/components/upload/AudioUpload/styles.module.scss @@ -1,7 +1,7 @@ -@import "src/styles/variables"; +@import 'src/styles/variables'; .wrap { - background: lighten($content_bg, 4%); + background: $content_bg_lighter; // padding-bottom: 100%; border-radius: $radius; position: relative; @@ -72,6 +72,6 @@ &:hover { opacity: 1; - background-color: $red; + background-color: $color_danger; } } diff --git a/src/components/upload/ImageUpload/styles.module.scss b/src/components/upload/ImageUpload/styles.module.scss index 91f3d768..976963b6 100644 --- a/src/components/upload/ImageUpload/styles.module.scss +++ b/src/components/upload/ImageUpload/styles.module.scss @@ -1,7 +1,7 @@ -@import "src/styles/variables"; +@import 'src/styles/variables'; .wrap { - background: lighten($content_bg, 4%); + background: $content_bg_lighter; padding-bottom: 100%; border-radius: $radius; position: relative; @@ -18,7 +18,7 @@ &:global(.is_uploading) { .thumb { - filter: blur(10px); + filter: blur(10px); } } } @@ -81,6 +81,6 @@ &:hover { opacity: 1; - background-color: $red; + background-color: $color_danger; } } diff --git a/src/components/upload/UploadDropzone/styles.module.scss b/src/components/upload/UploadDropzone/styles.module.scss index 8bda07d1..63c3b24f 100644 --- a/src/components/upload/UploadDropzone/styles.module.scss +++ b/src/components/upload/UploadDropzone/styles.module.scss @@ -12,17 +12,18 @@ left: 0; right: 0; bottom: 0; - background: transparentize($wisegreen, 0.7); + background: transparentize($color_primary, 0.7); border-radius: $radius; z-index: 10; - box-shadow: inset $wisegreen 0 0 0 2px; + box-shadow: inset $color_primary 0 0 0 2px; display: none; align-items: center; justify-content: center; pointer-events: none; touch-action: none; - &.active, :global(.dragging) & { + &.active, + :global(.dragging) & { display: flex; } } @@ -30,5 +31,5 @@ svg.icon { width: auto; height: 72px; - fill: $wisegreen; + fill: $color_primary; } diff --git a/src/containers/boris/BorisSidebar/index.tsx b/src/containers/boris/BorisSidebar/index.tsx index ab1b1d0f..8fb3157b 100644 --- a/src/containers/boris/BorisSidebar/index.tsx +++ b/src/containers/boris/BorisSidebar/index.tsx @@ -4,9 +4,10 @@ import { BorisContacts } from '~/components/boris/BorisContacts'; import { BorisStats } from '~/components/boris/BorisStats'; import { Group } from '~/components/containers/Group'; import { SuperPowersToggle } from '~/containers/auth/SuperPowersToggle'; -import styles from '~/layouts/BorisLayout/styles.module.scss'; import { BorisUsageStats } from '~/types/boris'; +import styles from './styles.module.scss'; + interface Props { isUser: boolean; stats: BorisUsageStats; @@ -14,14 +15,14 @@ interface Props { } const BorisSidebar: FC = ({ isUser, stats, isLoading }) => ( - +
-
+
diff --git a/src/containers/boris/BorisSidebar/styles.module.scss b/src/containers/boris/BorisSidebar/styles.module.scss new file mode 100644 index 00000000..0c2697fa --- /dev/null +++ b/src/containers/boris/BorisSidebar/styles.module.scss @@ -0,0 +1,23 @@ +@import 'src/styles/variables'; + +.wrap { + @include tablet { + display: none; + } +} + +.container { + background: $content_bg_dark; + border-radius: 0 $radius $radius 0; + padding: $gap; + box-sizing: border-box; + flex: 0 0 auto; + + @include tablet { + border-radius: 0; + } +} + +.super_powers { + padding: $gap * 2 0; +} diff --git a/src/containers/dialogs/LoginDialog/styles.module.scss b/src/containers/dialogs/LoginDialog/styles.module.scss index 3b4fe809..1b35d3e4 100644 --- a/src/containers/dialogs/LoginDialog/styles.module.scss +++ b/src/containers/dialogs/LoginDialog/styles.module.scss @@ -1,10 +1,4 @@ -@import "src/styles/variables"; - -$secondary_color: darken(desaturate($blue, 100%), 30%); -$vk_color: $secondary_color; - -.dialog { -} +@import 'src/styles/variables'; .wrap { display: flex; @@ -17,32 +11,6 @@ $vk_color: $secondary_color; } } -.secondary_button { - background: $content_bg; - box-shadow: inset $vk_color 0 0 0 2px; - color: $vk_color; - - svg { - fill: $vk_color; - margin-right: $gap; - } -} - .forgot_button { opacity: 0.5; } - -.buttons { - margin: $gap * 2 0 0 0 !important; - padding: $gap * 2 0 0 0; - border-top: 1px solid black; -} - -.links { - font: $font_14_regular; - text-align: center; - - a { - color: lighten($content_bg, 40%); - } -} diff --git a/src/containers/dialogs/LoginSocialRegisterDialog/styles.module.scss b/src/containers/dialogs/LoginSocialRegisterDialog/styles.module.scss index c5619291..75e4460a 100644 --- a/src/containers/dialogs/LoginSocialRegisterDialog/styles.module.scss +++ b/src/containers/dialogs/LoginSocialRegisterDialog/styles.module.scss @@ -1,4 +1,4 @@ -@import "src/styles/variables"; +@import 'src/styles/variables'; .wrap { padding: $login_dialog_padding; @@ -13,6 +13,6 @@ span { padding-left: $gap; - color: darken(white, 50%); + color: $gray_50; } } diff --git a/src/containers/dialogs/RestorePasswordDialog/styles.module.scss b/src/containers/dialogs/RestorePasswordDialog/styles.module.scss index 0d7548db..fde782b8 100644 --- a/src/containers/dialogs/RestorePasswordDialog/styles.module.scss +++ b/src/containers/dialogs/RestorePasswordDialog/styles.module.scss @@ -1,4 +1,4 @@ -@import "src/styles/variables"; +@import 'src/styles/variables'; .wrap { padding: $gap $gap $gap * 4; @@ -11,7 +11,7 @@ .text { font: $font_14_regular; padding: $gap; - color: darken(white, 50%); + color: $gray_50; } .shade, @@ -34,18 +34,18 @@ text-transform: uppercase; font: $font_18_semibold; text-align: center; - color: $wisegreen; + color: $color_primary; svg { - fill: $wisegreen; + fill: $color_primary; } } .error_shade { - color: $red; + color: $color_danger; svg { - fill: $red; + fill: $color_danger; } } diff --git a/src/containers/dialogs/RestoreRequestDialog/index.tsx b/src/containers/dialogs/RestoreRequestDialog/index.tsx index c3b0853e..6df79950 100644 --- a/src/containers/dialogs/RestoreRequestDialog/index.tsx +++ b/src/containers/dialogs/RestoreRequestDialog/index.tsx @@ -15,24 +15,24 @@ import styles from './styles.module.scss'; interface RestoreRequestDialogProps extends DialogComponentProps {} -const RestoreRequestDialog: VFC = ({ onRequestClose }) => { +const RestoreRequestDialog: VFC = ({ + onRequestClose, +}) => { useCloseOnEscape(onRequestClose); const [isSent, setIsSent] = useState(false); const onSent = useCallback(() => setIsSent(true), [setIsSent]); - const { isSubmitting, handleSubmit, handleChange, errors, values } = useRestoreRequestForm( - apiRequestRestoreCode, - onSent - ); + const { isSubmitting, handleSubmit, handleChange, errors, values } = + useRestoreRequestForm(apiRequestRestoreCode, onSent); const buttons = useMemo( () => ( - + ), - [] + [], ); const header = useMemo(() =>
, []); @@ -58,7 +58,8 @@ const RestoreRequestDialog: VFC = ({ onRequestClose } />
- Введите имя пользователя или адрес почты. Мы пришлем ссылку для сброса пароля. + Введите имя пользователя или адрес почты. Мы пришлем ссылку для + сброса пароля.
diff --git a/src/containers/dialogs/RestoreRequestDialog/styles.module.scss b/src/containers/dialogs/RestoreRequestDialog/styles.module.scss index 5cc2dc7f..364e5e19 100644 --- a/src/containers/dialogs/RestoreRequestDialog/styles.module.scss +++ b/src/containers/dialogs/RestoreRequestDialog/styles.module.scss @@ -1,4 +1,4 @@ -@import "src/styles/variables"; +@import 'src/styles/variables'; .wrap { padding: $gap $gap $gap * 4; @@ -11,7 +11,7 @@ .text { font: $font_14_regular; padding: $gap; - color: darken(white, 50%); + color: $gray_50; } .illustration { diff --git a/src/containers/flow/FlowStamp/styles.module.scss b/src/containers/flow/FlowStamp/styles.module.scss index aeb93dfc..15c50fe1 100644 --- a/src/containers/flow/FlowStamp/styles.module.scss +++ b/src/containers/flow/FlowStamp/styles.module.scss @@ -1,4 +1,4 @@ -@import "../../../styles/variables"; +@import '../../../styles/variables'; .wrap { display: flex; @@ -25,7 +25,10 @@ left: 0; height: 60px; width: 100%; - background: linear-gradient(transparentize($content_bg, 1), $content_bg 90%); + background: linear-gradient( + transparentize($content_bg, 1), + $content_bg 90% + ); pointer-events: none; touch-action: none; @@ -73,7 +76,7 @@ .search { @include outer_shadow(); - background: lighten($content_bg, 3%); + background: $content_bg_lighter; padding: $gap; border-radius: $radius; } @@ -91,7 +94,6 @@ } .toggles { - & > div { padding: $gap; font: $font_14_semibold; diff --git a/src/containers/lab/LabStats/styles.module.scss b/src/containers/lab/LabStats/styles.module.scss index 71de7bcb..42f8484c 100644 --- a/src/containers/lab/LabStats/styles.module.scss +++ b/src/containers/lab/LabStats/styles.module.scss @@ -1,4 +1,4 @@ -@import "src/styles/variables.scss"; +@import 'src/styles/variables.scss'; .title { padding-bottom: $gap; @@ -16,7 +16,7 @@ @include outer_shadow; border-radius: $radius; - background: $comment_bg; + background: $content_bg_light; padding: $gap; } diff --git a/src/containers/main/Header/index.tsx b/src/containers/main/Header/index.tsx index 8271100d..cb681019 100644 --- a/src/containers/main/Header/index.tsx +++ b/src/containers/main/Header/index.tsx @@ -52,9 +52,10 @@ const Header: FC = observer(() => { [borisCommentedAt, isUser, user.last_seen_boris], ); - const hasLabUpdates = useMemo(() => labStats.updates.length > 0, [ - labStats.updates, - ]); + const hasLabUpdates = useMemo( + () => labStats.updates.length > 0, + [labStats.updates], + ); const hasFlowUpdates = useMemo(() => flowUpdates.length > 0, [flowUpdates]); // Needed for SSR @@ -113,12 +114,7 @@ const Header: FC = observer(() => { )} {!isUser && ( - )} diff --git a/src/containers/main/Header/styles.module.scss b/src/containers/main/Header/styles.module.scss index 8226f8f5..7754c11e 100644 --- a/src/containers/main/Header/styles.module.scss +++ b/src/containers/main/Header/styles.module.scss @@ -1,4 +1,4 @@ -@import "../../../styles/variables"; +@import '../../../styles/variables'; @keyframes appear { from { @@ -86,7 +86,7 @@ white-space: nowrap; &:hover { - color: $red; + color: $color_danger; } &::before { @@ -109,7 +109,7 @@ width: 6px; height: 6px; border-radius: 4px; - background: lighten($red, 10%); + background: lighten($color_danger, 10%); right: 12px; top: 6px; transition: opacity 0.5s; @@ -127,7 +127,7 @@ } &.boris::after { - background: lighten($wisegreen, 10%); + background: lighten($color_primary, 10%); } @include tablet { diff --git a/src/containers/profile/ProfileAccounts/styles.module.scss b/src/containers/profile/ProfileAccounts/styles.module.scss index 17ba4117..98e81fb7 100644 --- a/src/containers/profile/ProfileAccounts/styles.module.scss +++ b/src/containers/profile/ProfileAccounts/styles.module.scss @@ -1,11 +1,11 @@ -@import "../../../styles/variables"; +@import '../../../styles/variables'; .wrap { } .list { border-radius: $radius; - background: transparentize(white, 0.95); + background: $gray_90; } .buttons { @@ -38,7 +38,7 @@ grid-template-columns: 20px auto 20px; grid-column-gap: $gap * 1.5; align-items: center; - border-bottom: 1px solid transparentize(white, 0.9); + border-bottom: 1px solid $gray_90; padding: $gap; &:last-child { @@ -70,7 +70,7 @@ cursor: pointer; opacity: 0.5; transition: opacity 0.25s; - fill: $red; + fill: $color_danger; display: flex; align-items: center; diff --git a/src/containers/profile/ProfileMessages/styles.module.scss b/src/containers/profile/ProfileMessages/styles.module.scss index de7511ea..ffc5de4c 100644 --- a/src/containers/profile/ProfileMessages/styles.module.scss +++ b/src/containers/profile/ProfileMessages/styles.module.scss @@ -1,8 +1,8 @@ -@import "src/styles/variables"; +@import 'src/styles/variables'; .messages { padding: $gap; - background: $node_bg; + background: $content_bg_dark; display: flex; flex-direction: column !important; overflow: auto; @@ -28,7 +28,7 @@ div.warning.warning { padding: $gap; - box-shadow: $red 0 0 0 2px; + box-shadow: $color_danger 0 0 0 2px; border-radius: $radius; font: $font_14_semibold; margin-bottom: $gap * 2; diff --git a/src/containers/profile/ProfilePageLeft/styles.module.scss b/src/containers/profile/ProfilePageLeft/styles.module.scss index 0de94bc0..549e9694 100644 --- a/src/containers/profile/ProfilePageLeft/styles.module.scss +++ b/src/containers/profile/ProfilePageLeft/styles.module.scss @@ -1,4 +1,4 @@ -@import "src/styles/variables"; +@import 'src/styles/variables'; .wrap { @include outer_shadow; @@ -9,7 +9,7 @@ align-items: stretch; justify-content: stretch; flex-direction: column; - background: $comment_bg; + background: $content_bg_light; height: 100%; border-radius: $radius; } @@ -39,7 +39,7 @@ font: $font_14_regular; box-sizing: border-box; width: 100%; - color: transparentize(white, 0.5); + color: $gray_50; } .description { diff --git a/src/containers/profile/ProfileQuickInfo/styles.module.scss b/src/containers/profile/ProfileQuickInfo/styles.module.scss index 70d3e8f7..426bc791 100644 --- a/src/containers/profile/ProfileQuickInfo/styles.module.scss +++ b/src/containers/profile/ProfileQuickInfo/styles.module.scss @@ -1,4 +1,4 @@ -@import "src/styles/variables"; +@import 'src/styles/variables'; .wrapper { @include outer_shadow; @@ -35,10 +35,10 @@ div.top.top { .status { font: $font_12_regular; margin-top: $gap; - color: darken(white, 50%); + color: $gray_50; &.active { - color: $olive; + color: $color_online; } &::before { diff --git a/src/containers/settings/SettingsNotes/index.tsx b/src/containers/settings/SettingsNotes/index.tsx index bb2322d5..864f4b33 100644 --- a/src/containers/settings/SettingsNotes/index.tsx +++ b/src/containers/settings/SettingsNotes/index.tsx @@ -25,7 +25,7 @@ const List = () => { return ( <> - {notes.map(note => ( + {notes.map((note) => ( onRemove(note.id)} update={(text, callback) => update(note.id, text, callback)} @@ -59,7 +59,6 @@ const SettingsNotes: VFC = () => { onClick={() => setFormIsShown(true)} size="mini" iconRight="plus" - color="secondary" > Добавить diff --git a/src/containers/settings/UserSettingsView/styles.module.scss b/src/containers/settings/UserSettingsView/styles.module.scss index c0655be0..8448e58c 100644 --- a/src/containers/settings/UserSettingsView/styles.module.scss +++ b/src/containers/settings/UserSettingsView/styles.module.scss @@ -1,7 +1,4 @@ -@import "src/styles/variables"; - -$pad_danger: mix($red, $content_bg, 70%); -$pad_usual: mix(white, $content_bg, 10%); +@import 'src/styles/variables'; .about { flex: 4; @@ -17,9 +14,6 @@ $pad_usual: mix(white, $content_bg, 10%); padding: 0 $gap 0; } -.grid { -} - div.base_info.base_info { align-items: stretch; } diff --git a/src/containers/sidebars/TagSidebar/styles.module.scss b/src/containers/sidebars/TagSidebar/styles.module.scss index 6d9b4f17..b5be45b1 100644 --- a/src/containers/sidebars/TagSidebar/styles.module.scss +++ b/src/containers/sidebars/TagSidebar/styles.module.scss @@ -1,4 +1,4 @@ -@import "src/styles/variables"; +@import 'src/styles/variables'; .wrap { @include sidebar_content(400px); @@ -56,7 +56,7 @@ padding-left: $gap * 2; svg { - fill: transparentize(white, 0.5); + fill: $gray_50; } } @@ -65,28 +65,20 @@ bottom: 0; left: 0; width: 100%; - background: darken($content_bg, 2%); + background: $content_bg_dark; height: 2px; z-index: 2; pointer-events: none; touch-action: none; } -.bar { - position: absolute; - top: 0; - left: 0; - height: 100%; - background: lighten($content_bg, 20%); -} - .none { padding: 40px $gap; display: flex; flex-direction: column; align-items: center; justify-content: center; - color: transparentize(white, 0.9); + color: $gray_90; fill: currentColor; font: $font_18_semibold; stroke: none; diff --git a/src/layouts/BorisLayout/styles.module.scss b/src/layouts/BorisLayout/styles.module.scss index 7fbc7cf7..5ed15ae2 100644 --- a/src/layouts/BorisLayout/styles.module.scss +++ b/src/layouts/BorisLayout/styles.module.scss @@ -1,4 +1,4 @@ -@import "src/styles/variables"; +@import 'src/styles/variables'; .wrap { display: flex; @@ -7,7 +7,6 @@ flex-direction: column; } - .grid { padding: $gap; } @@ -117,40 +116,6 @@ text-transform: uppercase; margin-bottom: $gap * 2; } - - &__container { - background: darken($content_bg, 4%); - border-radius: 0 $radius $radius 0; - box-shadow: inset transparentize(mix($wisegreen, white, 60%), 0.6) 0 1px; - padding: $gap; - box-sizing: border-box; - flex: 0 0 auto; - - @include tablet { - border-radius: 0; - } - } - - &__title { - font: $font_12_semibold; - text-transform: uppercase; - opacity: 0.3; - margin-top: 16px !important; - } - - &__about { - line-height: 1.4em; - - p { - margin-bottom: $gap; - } - } - - &__wrap { - @include tablet { - display: none; - } - } } .content { @@ -162,7 +127,3 @@ border-radius: 0; } } - -.super_powers { - padding: $gap * 2 0; -} diff --git a/src/layouts/FlowLayout/styles.module.scss b/src/layouts/FlowLayout/styles.module.scss index 4d20581b..f3676d55 100644 --- a/src/layouts/FlowLayout/styles.module.scss +++ b/src/layouts/FlowLayout/styles.module.scss @@ -1,6 +1,6 @@ -@use "sass:math"; +@use 'sass:math'; -@import "src/styles/variables"; +@import 'src/styles/variables'; .wrap { max-width: 2000px; @@ -36,7 +36,7 @@ $cols: math.div($content_width, $cell); grid-row-end: 2; grid-column-start: 1; grid-column-end: -1; - background: darken($content_bg, 2%); + background: $content_bg_dark; border-radius: $radius; display: flex; align-items: center; @@ -53,7 +53,7 @@ $cols: math.div($content_width, $cell); overflow: hidden; position: relative; - @media(max-width: $flow_hide_recents) { + @media (max-width: $flow_hide_recents) { grid-column-start: 1; grid-row-end: span 1; } diff --git a/src/layouts/SettingsLayout/styles.module.scss b/src/layouts/SettingsLayout/styles.module.scss index 9629ae0e..b6627864 100644 --- a/src/layouts/SettingsLayout/styles.module.scss +++ b/src/layouts/SettingsLayout/styles.module.scss @@ -1,4 +1,4 @@ -@import "src/styles/variables"; +@import 'src/styles/variables'; .container { width: 100vw; @@ -22,7 +22,7 @@ display: flex; flex-direction: row; margin-top: $page_top_offset; - background: darken($content_bg, 2%); + background: $content_bg_dark; @include tablet { margin-top: 0; diff --git a/src/styles/_colors.scss b/src/styles/_colors.scss index 4cb1c446..4e134486 100644 --- a/src/styles/_colors.scss +++ b/src/styles/_colors.scss @@ -1,39 +1,47 @@ -// palette -$red: #ff3344; +// palette (use inside) $yellow: #ffd60f; $dark_blue: #592071; $blue: #582cd0; $green: #00d2b9; -$olive: #8bc12a; -$orange: #ff7549; $wisegreen: #007962; -$lightgreen: lighten(adjust_hue($wisegreen, -30deg), 10%); +$olive: #8bc12a; +$red: #ff3344; +$orange: #ff7549; +$color_primary: #007962; +$lightgreen: lighten(adjust_hue(#007962, -30deg), 10%); $soft_blue: #3c75ff; +$color_danger_slate: mix(#ff3344, #23201f, 60%); -// main definitions -$primary: $red; -$secondary: $wisegreen; +// main definitions (move to --vars) +$color_primary: $wisegreen; +$color_danger: $red; +$color_online: $olive; +$color_link: $red; +$color_flow: $red; +$color_lab: $blue; -// gradients -$red_gradient: linear-gradient(165deg, $orange -50%, $red 150%); -$yellow_gradient: linear-gradient(165deg, $yellow -50%, $red 150%); -$blue_gradient: linear-gradient(170deg, $blue, $dark_blue); -$green_gradient: linear-gradient(170deg, $lightgreen -50%, $wisegreen 150%); -$cyan_gradient: linear-gradient(260deg, $soft_blue -50%, #7b2653 150%); -$red_gradient_alt: linear-gradient(170deg, #ff4545, #d2004c); +// gradients (move to --vars) +$danger_gradient: linear-gradient(165deg, $orange -50%, $color_danger 150%); +$info_gradient: linear-gradient(170deg, $blue, $dark_blue); +$warning_gradient: linear-gradient(165deg, $yellow -50%, $color_danger 150%); +$color_primary_gradient: linear-gradient( + 170deg, + $lightgreen -50%, + $color_primary 150% +); +$magic_gradient: linear-gradient(260deg, $soft_blue -50%, #7b2653 150%); -$text_color: white; -$scroll_color: $red_gradient; -$scroll_inactive_opacity: 0.5; - -// --color-base +// backgrounds (move to --vars) $content_bg: #23201f; +$content_bg_dark: darken($content_bg, 2%); +$content_bg_darker: darken($content_bg, 4%); +$content_bg_light: lighten($content_bg, 2%); +$content_bg_lighter: lighten($content_bg, 4%); +$content_bg_lightest: lighten($content_bg, 6%); -// --color-base-light -$comment_bg: lighten($content_bg, 2%); -$tag_bg: lighten($content_bg, 2%); -$menu_bg: lighten($content_bg, 2%); - -// --color-base-dark -$node_bg: darken($content_bg, 2%); -$inset_bg: linear-gradient(135deg, darken($content_bg, 2%), $content_bg); +// white shades (move to --vars) +$white: white; +$gray_25: mix($content_bg, white, 25%); +$gray_50: mix($content_bg, white, 50%); +$gray_75: mix($content_bg, white, 75%); +$gray_90: mix($content_bg, white, 92%); diff --git a/src/styles/_global.scss b/src/styles/_global.scss index 4a3546ce..9af9a1b8 100644 --- a/src/styles/_global.scss +++ b/src/styles/_global.scss @@ -18,7 +18,7 @@ html { body { min-height: 100vh; background: url('../../src/sprites/noise.png') $content_bg; - color: $text_color; + color: $white; font: $font_16_regular; -webkit-font-smoothing: antialiased; fill: white; @@ -64,7 +64,7 @@ body { } .todo { - background-color: $red; + background-color: $color_danger; } .done { @@ -76,12 +76,12 @@ h2 { } .username { - color: $wisegreen; + color: $color_primary; font-weight: 600; } a { - color: $primary; + color: $color_link; text-decoration: underline; } diff --git a/src/styles/_inputs.scss b/src/styles/_inputs.scss index 5284b00e..0d2b1b5a 100644 --- a/src/styles/_inputs.scss +++ b/src/styles/_inputs.scss @@ -1,11 +1,11 @@ -@import "fonts"; +@import 'fonts'; $input_height: 40px; $input_text_color: #bbbbbb; -$input_shadow: inset transparentize(white, 0.9) 0 0 0 1px; -$input_shadow_error: inset $red 0 0 0 1px; +$input_shadow: inset $gray_90 0 0 0 1px; +$input_shadow_error: inset $color_danger 0 0 0 1px; $input_shadow_filled: $input_shadow; $input_font: $font_16_medium; $input_placeholder_font: $font_16_medium; -$input_bg_color: darken($content_bg, 2%); +$input_bg_color: $content_bg_dark; $input_grey_color: #444444; diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss index bdf53d67..0ffbc5d9 100644 --- a/src/styles/_mixins.scss +++ b/src/styles/_mixins.scss @@ -1,25 +1,19 @@ - -@use "sass:math"; +@use 'sass:math'; @mixin outer_shadow() { - box-shadow: - inset transparentize(white, 0.95) 1px 1px, - transparentize(black, 0.8) 1px 1px, - transparentize(black, 0.6) 0 1px 5px; + box-shadow: inset $gray_90 1px 1px, transparentize(black, 0.8) 1px 1px, + transparentize(black, 0.6) 0 1px 5px; } // same as outer shadow, but higher @mixin dropdown_shadow { - box-shadow: - inset transparentize(white, 0.95) 1px 1px, - transparentize(black, 0.8) 1px 1px, - transparentize(black, 0.6) 5px 5px 10px; + box-shadow: inset $gray_90 1px 1px, transparentize(black, 0.8) 1px 1px, + transparentize(black, 0.6) 5px 5px 10px; } @mixin row_shadow() { &:not(:last-child) { - box-shadow: transparentize(white, 0.95) 0 1px, - inset transparentize(black, 0.8) 0 -1px; + box-shadow: $gray_90 0 1px, inset transparentize(black, 0.8) 0 -1px; } &:only-child { @@ -28,10 +22,8 @@ } @mixin inner_shadow() { - box-shadow: - inset transparentize(white, 0.95) -1px -1px, - inset transparentize(black, 0.9) 1px 1px, - inset transparentize(black, 0.9) 0 0 10px; + box-shadow: inset $gray_90 -1px -1px, inset transparentize(black, 0.9) 1px 1px, + inset transparentize(black, 0.9) 0 0 10px; } @mixin inner_shadow_active() { @@ -39,12 +31,12 @@ transition: background-color 250ms; &:hover { - background: transparentize(white, 0.95); + background: $gray_90; } } @mixin input_shadow() { - box-shadow: inset transparentize(white, 0.92) 0 -1px, inset transparentize(black, 0.8) 0 1px; + box-shadow: inset $gray_90 0 -1px, inset transparentize(black, 0.8) 0 1px; } @mixin modal_mixin() { @@ -104,7 +96,7 @@ @content; & > * { - margin: $gap*0.5 0 !important; + margin: $gap * 0.5 0 !important; &:first-child { margin-top: 0 !important; @@ -117,7 +109,9 @@ } @mixin can_backdrop { - @supports ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))) { + @supports ( + (-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px)) + ) { @content; } } @@ -137,7 +131,7 @@ @mixin title_with_line { font: $font_14_semibold; text-transform: uppercase; - color: transparentize(white, 0.3); + color: $gray_25; flex-direction: row; display: flex; align-items: center; @@ -149,7 +143,7 @@ & > :global(.line) { flex: 1; height: 2px; - background: transparentize(white, 0.95); + background: $gray_90; } } @@ -165,9 +159,7 @@ @include blur(); } -@mixin sidebar_content( - $width: 400px, -) { +@mixin sidebar_content($width: 400px) { height: 100%; box-sizing: border-box; display: flex; @@ -187,12 +179,8 @@ cursor: pointer; } -@mixin lab_gradient { - background: linear-gradient(darken($dark_blue, 0%), darken($blue, 30%)); -} - @mixin hero_gradient { - $color: mix($wisegreen, $content_bg, 30%); + $color: mix($color_primary, $content_bg, 30%); background: linear-gradient(170deg, lighten($color, 10%), $color); } @@ -244,8 +232,12 @@ @mixin appear { @keyframes __appear { - from { opacity: 0; } - to { opacity: 1; } + from { + opacity: 0; + } + to { + opacity: 1; + } } animation: __appear 0.25s forwards; @@ -266,11 +258,14 @@ @mixin modal_backdrop { @include blur(); - background: transparentize($content_bg, 0.3) url('../../src/sprites/noise.png'); + background: transparentize($content_bg, 0.3) + url('../../src/sprites/noise.png'); @include can_backdrop { - @supports (backdrop-filter: blur(5px)) and (background-image: url('../../src/sprites/noise.png')) { - background: transparentize($content_bg, 0.5) url('../../src/sprites/noise.png'); + @supports (backdrop-filter: blur(5px)) and + (background-image: url('../../src/sprites/noise.png')) { + background: transparentize($content_bg, 0.5) + url('../../src/sprites/noise.png'); } } } @@ -292,25 +287,29 @@ [data-popper-placement*='bottom'] & { border-width: 0 10px 10px 10px; - border-color: transparent transparent lighten($menu_bg, 6%) transparent; + border-color: transparent transparent lighten($content_bg_light, 6%) + transparent; top: -10px; } [data-popper-placement*='top'] & { border-width: 10px 10px 0 10px; - border-color: lighten($menu_bg, 6%) transparent transparent transparent; + border-color: lighten($content_bg_light, 6%) transparent transparent + transparent; bottom: -10px; } [data-popper-placement*='right'] & { border-width: 10px 10px 10px 0; - border-color: transparent lighten($menu_bg, 6%) transparent transparent; + border-color: transparent lighten($content_bg_light, 6%) transparent + transparent; left: -10px; } [data-popper-placement*='left'] & { border-width: 10px 0 10px 10px; - border-color: transparent transparent transparent lighten($menu_bg, 6%); + border-color: transparent transparent transparent + lighten($content_bg_light, 6%); right: -10px; } -} \ No newline at end of file +} diff --git a/src/styles/common/markdown.module.scss b/src/styles/common/markdown.module.scss index e75898b1..594493ed 100644 --- a/src/styles/common/markdown.module.scss +++ b/src/styles/common/markdown.module.scss @@ -1,23 +1,23 @@ -@use "sass:math"; +@use 'sass:math'; -@import "../variables"; +@import '../variables'; $margin: 1em; .wrapper { blockquote { - border-left: 4px solid $wisegreen; + border-left: 4px solid $color_primary; padding: $margin * 0.5 0; margin-bottom: $margin; - color: $wisegreen; + color: $color_primary; font-size: 0.9em; - background-color: transparentize($wisegreen, 0.9); + background-color: transparentize($color_primary, 0.9); p { margin: 0 $margin; } - &+blockquote { + & + blockquote { margin-top: -$margin; } } @@ -34,18 +34,19 @@ $margin: 1em; margin-bottom: $margin; code { - color: transparentize($wisegreen, 0.1); + color: transparentize($color_primary, 0.1); font-family: monospace; white-space: pre-wrap; } } - p, li { + p, + li { code { background-color: transparentize($blue, 0.9); padding: 2px 4px; border-radius: 0.3em; - color: transparentize($wisegreen, 0.1); + color: transparentize($color_primary, 0.1); font-size: 0.8em; } } @@ -55,7 +56,11 @@ $margin: 1em; margin-bottom: $margin; } - h5, h4, h3, h2, h1 { + h5, + h4, + h3, + h2, + h1 { line-height: 1.2em; margin: $margin * 1.5 0 $margin * 0.5; diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 68a4c150..fcbb198b 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -23,7 +23,7 @@ $radius: 8px; $cell_radius: $radius; $panel_radius: $radius; $dialog_radius: $radius * 2; -$placeholder_bg: transparentize(white, 0.96); +$placeholder_bg: $gray_90; $info_height: 24px; $limited_width: 940px; @@ -32,10 +32,8 @@ $panel_size: 64px; $node_title_height: $panel_size; $upload_button_height: 52px; -$shadow_depth_1: transparentize(black, 0.8) 0 1px, - inset transparentize(white, 0.98) 0 1px; -$shadow_depth_2: transparentize(black, 0.8) 0 2px, - inset transparentize(white, 0.98) 0 1px; +$shadow_depth_1: transparentize(black, 0.8) 0 1px, inset $gray_90 0 1px; +$shadow_depth_2: transparentize(black, 0.8) 0 2px, inset $gray_90 0 1px; $comment_shadow: $shadow_depth_2; $node_shadow: transparentize(black, 0.8) 0 2px, @@ -44,4 +42,4 @@ $node_shadow: transparentize(black, 0.8) 0 2px, $tag_height: 26px; $login_dialog_padding: $gap $gap 30px $gap; -$sidebar_border: transparentize(white, 0.95); +$sidebar_border: $gray_90; diff --git a/src/utils/toast/styles.module.scss b/src/utils/toast/styles.module.scss index 7f316f02..c3b4636e 100644 --- a/src/utils/toast/styles.module.scss +++ b/src/utils/toast/styles.module.scss @@ -1,4 +1,4 @@ -@import "src/styles/variables"; +@import 'src/styles/variables'; div.toast { @include outer_shadow; @@ -11,13 +11,13 @@ div.toast { } div.toast.error { - background: $red_gradient_alt; + background: $danger_gradient; } div.toast.success { - background: $green_gradient; + background: $color_primary_gradient; } div.toast.info { - background: $cyan_gradient; + background: $magic_gradient; }