diff --git a/src/components/bars/PlayerBar/styles.module.scss b/src/components/bars/PlayerBar/styles.module.scss index 0e24521b..3a3313c9 100644 --- a/src/components/bars/PlayerBar/styles.module.scss +++ b/src/components/bars/PlayerBar/styles.module.scss @@ -1,4 +1,4 @@ -@import "src/styles/variables"; +@import 'src/styles/variables'; .place { position: relative; @@ -11,11 +11,8 @@ @include outer_shadow(); display: flex; border-radius: $radius $radius 0 0; - // background: $main_gradient; align-items: center; background: lighten($content_bg, 6%); - // box-shadow: rgba(0, 0, 0, 0.5) 0 2px 5px, inset rgba(255, 255, 255, 0.3) 1px 1px, - // inset rgba(0, 0, 0, 0.3) 0 -1px; position: absolute; top: 0; left: 0; diff --git a/src/components/containers/Card/styles.module.scss b/src/components/containers/Card/styles.module.scss index 73ebccac..f2ac642e 100644 --- a/src/components/containers/Card/styles.module.scss +++ b/src/components/containers/Card/styles.module.scss @@ -1,7 +1,7 @@ -@import "src/styles/variables"; +@import 'src/styles/variables'; .card { - background-color: $card_bg; + background-color: $content_bg; border-radius: $panel_radius; padding: $gap; diff --git a/src/components/flow/FlowSwiperHero/styles.module.scss b/src/components/flow/FlowSwiperHero/styles.module.scss index 8694ec73..0036049f 100644 --- a/src/components/flow/FlowSwiperHero/styles.module.scss +++ b/src/components/flow/FlowSwiperHero/styles.module.scss @@ -60,8 +60,8 @@ height: 100%; background: linear-gradient( 182deg, - transparentize($cell_shade, 1) 50%, - transparentize($cell_shade, 0) 95% + transparentize($content_bg, 1) 50%, + transparentize($content_bg, 0) 95% ); z-index: 4; pointer-events: none; @@ -76,8 +76,7 @@ img.preview { opacity: 0; :global(.swiper-slide-active) &, - :global(.swiper-slide-duplicate-active) & - { + :global(.swiper-slide-duplicate-active) & { transform: translate(-15%, -20%); opacity: 1; } diff --git a/src/components/input/Button/styles.module.scss b/src/components/input/Button/styles.module.scss index 9ccb0db7..d830262f 100644 --- a/src/components/input/Button/styles.module.scss +++ b/src/components/input/Button/styles.module.scss @@ -1,4 +1,4 @@ -@import "src/styles/variables"; +@import 'src/styles/variables'; @keyframes pulse { 0% { @@ -25,7 +25,7 @@ cursor: pointer; margin: 0; - background: $button_bg_color; + background: $primary; border-radius: $radius; fill: white; @@ -36,7 +36,8 @@ align-items: center; justify-content: center; - transition: opacity 0.25s, filter 0.25s, box-shadow 0.25s, background-color 0.5s; + transition: opacity 0.25s, filter 0.25s, box-shadow 0.25s, + background-color 0.5s; input { position: absolute; @@ -238,7 +239,7 @@ .secondary { @include outer_shadow; - background: $green_gradient; + background: $red; } .lab { diff --git a/src/components/input/Info/style.scss b/src/components/input/Info/style.scss index 6e991a67..d9fe89bc 100644 --- a/src/components/input/Info/style.scss +++ b/src/components/input/Info/style.scss @@ -1,4 +1,4 @@ -@import "src/styles/variables"; +@import 'src/styles/variables'; .container { min-height: $info_height; @@ -6,7 +6,7 @@ display: flex; align-items: center; justify-content: center; - font-size: $text_small; + font: $font_14_regular; line-height: 1.2em; padding: $gap; background: transparentize(white, 0.9); diff --git a/src/components/lab/LabNode/styles.module.scss b/src/components/lab/LabNode/styles.module.scss index 1ea6165a..97d4b5c2 100644 --- a/src/components/lab/LabNode/styles.module.scss +++ b/src/components/lab/LabNode/styles.module.scss @@ -1,10 +1,10 @@ -@import "src/styles/variables.scss"; +@import 'src/styles/variables.scss'; .wrap { @include outer_shadow; position: relative; - background-color: $lab_post_bg; + background-color: $content_bg; cursor: pointer; min-width: 0; diff --git a/src/components/main/SidePane/index.tsx b/src/components/main/SidePane/index.tsx deleted file mode 100644 index 821684ad..00000000 --- a/src/components/main/SidePane/index.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import React, { FC, useCallback, useEffect, useState } from 'react'; - -import classNames from 'classnames'; - -import { Group } from '~/components/containers/Group'; - -import styles from './styles.module.scss'; - -interface IProps {} - -export const SidePane: FC = () => { - const content_width = 1100; - const [left, setLeft] = useState(0); - - const moveThis = useCallback(() => { - const { width } = document.body.getBoundingClientRect(); - const shift = - width > content_width + 64 + 20 - ? (width - content_width - 64 - 20) / 2 - 54 + 64 // + content_width + 74 - : 10; - - setLeft(shift); - }, [setLeft]); - - useEffect(() => { - moveThis(); - window.addEventListener('resize', moveThis); - document.addEventListener('DOMContentLoaded', moveThis); - - return () => { - window.removeEventListener('resize', moveThis); - document.removeEventListener('DOMContentLoaded', moveThis); - }; - }, [moveThis]); - - return ( -
- -
-
V
-
- -
-
P
-
- -
-
F
-
- -
-
-
-
-
-
- - -
- -
S
-
- ); -}; diff --git a/src/components/main/SidePane/styles.module.scss b/src/components/main/SidePane/styles.module.scss deleted file mode 100644 index 100b198d..00000000 --- a/src/components/main/SidePane/styles.module.scss +++ /dev/null @@ -1,72 +0,0 @@ -@import "src/styles/variables"; - -.pane { - width: 54px; - height: 100%; - position: fixed; - top: 0; - left: 0; - box-sizing: border-box; - padding: $gap 0; - display: flex; - flex-direction: column; -} - -.group { - width: 54px; - border-radius: $panel_radius; - background: $panel_bg; - box-sizing: border-box; - - &:global(.logo) { - height: (54px * 1.5) + $gap * 0.5; - background: $red_gradient; - background-size: 140px; - font-weight: 600; - font-size: 14px; - text-align: center; - box-shadow: inset #111111 0 -1px, inset #222222 0 1px; - color: white; - display: flex; - align-items: center; - justify-content: center; - font: $font_24_semibold; - } - - .btn { - border-radius: 0; - - &:first-child { - border-top-left-radius: $panel_radius; - border-top-right-radius: $panel_radius; - } - - &:last-child { - border-bottom-left-radius: $panel_radius; - border-bottom-right-radius: $panel_radius; - } - } -} -.btn { - height: 54px; - box-shadow: inset transparentize(black, 0.9) 0 -1px, inset transparentize(white, 0.95) 0 1px; - border-radius: $panel_radius; - background: $side_pane_btn_color; - display: flex; - align-items: center; - justify-content: center; - font: $font_24_medium; - - &:global(.orange) { - background: linear-gradient(280deg, $red, $orange); - color: transparentize(black, 0.7); - width: 66px; - border-radius: 6px 0 0 6px; - position: relative; - left: 0; - } -} - -.flexy { - flex: 1; -} diff --git a/src/components/media/AudioPlayer/styles.module.scss b/src/components/media/AudioPlayer/styles.module.scss index 3715b8d9..19218e05 100644 --- a/src/components/media/AudioPlayer/styles.module.scss +++ b/src/components/media/AudioPlayer/styles.module.scss @@ -1,4 +1,4 @@ -@import "src/styles/variables"; +@import 'src/styles/variables'; .wrap { display: flex; @@ -100,8 +100,7 @@ } .bar { - // background: linear-gradient(270deg, $green, $wisegreen); - background: $main_gradient; + background: $green_gradient; position: absolute; height: 10px; left: 0; diff --git a/src/components/node/NodeTitle/styles.module.scss b/src/components/node/NodeTitle/styles.module.scss index 6683ffa0..368eaef8 100644 --- a/src/components/node/NodeTitle/styles.module.scss +++ b/src/components/node/NodeTitle/styles.module.scss @@ -1,4 +1,4 @@ -@import "src/styles/variables"; +@import 'src/styles/variables'; @mixin button { margin: 0 $gap; @@ -97,26 +97,6 @@ min-width: 0; } -.mark { - flex: 0 0 32px; - position: relative; - - &::after { - content: ' '; - position: absolute; - top: -38px; - right: 4px; - width: 24px; - height: 52px; - background: $main_gradient; - box-shadow: transparentize(black, 0.8) 4px 2px; - border-radius: 2px; - } -} - -.sep { -} - @keyframes pulse { 0% { transform: scale(1); diff --git a/src/components/tags/TagWrapper/styles.module.scss b/src/components/tags/TagWrapper/styles.module.scss index e39d213f..47bafbf9 100644 --- a/src/components/tags/TagWrapper/styles.module.scss +++ b/src/components/tags/TagWrapper/styles.module.scss @@ -1,4 +1,4 @@ -@import "src/styles/variables"; +@import 'src/styles/variables'; $big: 1.2; @@ -57,11 +57,6 @@ $big: 1.2; background: $green_gradient; } - &:global(.olive) { - background: $olive; - color: transparentize(black, 0.4); - } - &:global(.black) { background: transparentize(black, 0.7); box-shadow: none; @@ -129,7 +124,8 @@ $big: 1.2; } button.delete { - box-shadow: inset transparentize(white, 0.9) 1px 0, transparentize(black, 0.7) -1px 0; + box-shadow: inset transparentize(white, 0.9) 1px 0, + transparentize(black, 0.7) -1px 0; width: 24px; height: $tag_height; background: transparentize($content_bg, 0.75); @@ -148,4 +144,4 @@ button.delete { padding-right: $gap; text-overflow: ellipsis; overflow: hidden; -} \ No newline at end of file +} diff --git a/src/containers/node/NodeBottomBlock/styles.module.scss b/src/containers/node/NodeBottomBlock/styles.module.scss index 3b067e18..f49eb5ac 100644 --- a/src/containers/node/NodeBottomBlock/styles.module.scss +++ b/src/containers/node/NodeBottomBlock/styles.module.scss @@ -1,4 +1,4 @@ -@import "src/styles/variables.scss"; +@import 'src/styles/variables.scss'; .sticky { width: 100%; @@ -22,7 +22,6 @@ } } - .panel { flex: 1 3; display: flex; @@ -38,13 +37,6 @@ } } -.buttons { - background: $node_buttons_bg; - flex: 1; - border-radius: $panel_radius; - box-shadow: $comment_shadow; -} - .left { flex: 1; min-width: 0; diff --git a/src/layouts/NodeLayout/styles.module.scss b/src/layouts/NodeLayout/styles.module.scss index 14afb3db..0faf0230 100644 --- a/src/layouts/NodeLayout/styles.module.scss +++ b/src/layouts/NodeLayout/styles.module.scss @@ -1,4 +1,4 @@ -@import "src/styles/variables"; +@import 'src/styles/variables'; .wrap { width: 100%; @@ -26,13 +26,6 @@ } } -.buttons { - background: $node_buttons_bg; - flex: 1; - border-radius: $panel_radius; - box-shadow: $comment_shadow; -} - .panel { @include row_shadow; @@ -46,4 +39,4 @@ @include tablet { border-radius: 0; } -} \ No newline at end of file +} diff --git a/src/styles/_colors.scss b/src/styles/_colors.scss index ab5aca69..4cb1c446 100644 --- a/src/styles/_colors.scss +++ b/src/styles/_colors.scss @@ -1,4 +1,4 @@ -// color 0, 0, 68 is pretty cool, btw +// palette $red: #ff3344; $yellow: #ffd60f; $dark_blue: #592071; @@ -6,65 +6,34 @@ $blue: #582cd0; $green: #00d2b9; $olive: #8bc12a; $orange: #ff7549; -$grass: #41800d; $wisegreen: #007962; $lightgreen: lighten(adjust_hue($wisegreen, -30deg), 10%); $soft_blue: #3c75ff; +// main definitions $primary: $red; $secondary: $wisegreen; +// 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% -); -$purple_gradient: linear-gradient(170deg, $red, $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); -$purple_gradient_alt: linear-gradient(90deg, #442294, #ff4545); -$main_gradient: $green_gradient; - -// $main_bg_color: darken(#2c2b2b, 4%); -$main_bg_color: darken(#332f2d, 6%); -$main_text_color: white; - -$content_bg: darken($main_bg_color, 0%); -$content_bg_secondary: darken($content_bg, 2%); -$lab_post_bg: lighten($content_bg, 4%); - -$cell_bg: lighten($main_bg_color, 0%); -$card_bg: lighten($main_bg_color, 0%); - -$text_normal: 16px; -$text_small: 14px; -$text_big: 20px; -$text_sign: 22px; - -$button_bg_color: $red_gradient; - -$inset_bg: linear-gradient(135deg, darken($content_bg, 2%), $content_bg); -$comment_bg: lighten($content_bg, 2%); - -$panel_bg: transparent; -$node_bg: darken($content_bg, 2%); -$node_image_bg: darken($main_bg_color, 4%); -$node_title_background: darken($main_bg_color, 8%); - -$editor_bg: $content_bg; -$editor_panel_bg: darken($editor_bg, 4%); -$cell_shade: lighten($content_bg, 10%); +$text_color: white; $scroll_color: $red_gradient; $scroll_inactive_opacity: 0.5; -$side_pane_btn_color: lighten($main_bg_color, 0%); +// --color-base +$content_bg: #23201f; -$node_buttons_bg: darken($main_bg_color, 6%); +// --color-base-light +$comment_bg: lighten($content_bg, 2%); +$tag_bg: lighten($content_bg, 2%); +$menu_bg: lighten($content_bg, 2%); -$tag_bg: lighten($main_bg_color, 4%); -$menu_bg: lighten($main_bg_color, 4%); +// --color-base-dark +$node_bg: darken($content_bg, 2%); +$inset_bg: linear-gradient(135deg, darken($content_bg, 2%), $content_bg); diff --git a/src/styles/_global.scss b/src/styles/_global.scss index 432a9324..4a3546ce 100644 --- a/src/styles/_global.scss +++ b/src/styles/_global.scss @@ -16,10 +16,9 @@ html { } body { - background: darken($main_bg_color, 12%); min-height: 100vh; - background: url('../../src/sprites/noise.png') $main_bg_color; - color: $main_text_color; + background: url('../../src/sprites/noise.png') $content_bg; + color: $text_color; font: $font_16_regular; -webkit-font-smoothing: antialiased; fill: white; diff --git a/src/styles/variables.scss b/src/styles/variables.scss index ad04f759..68a4c150 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -15,7 +15,6 @@ $lab_gap: $gap * 2; $lab_gap_mobile: $gap * 2; $grid_line: 5px; $content_width: $cell * 5 + $grid_line * 4; -$spc: $gap * 2; $comment_height: 72px; $bar_height: 64px; $page_top_offset: 32px; @@ -33,11 +32,14 @@ $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 transparentize(white, 0.98) 0 1px; +$shadow_depth_2: transparentize(black, 0.8) 0 2px, + inset transparentize(white, 0.98) 0 1px; $comment_shadow: $shadow_depth_2; -$node_shadow: transparentize(black, 0.8) 0 2px, transparentize(black, 0.8) 0 2px 4px; +$node_shadow: transparentize(black, 0.8) 0 2px, + transparentize(black, 0.8) 0 2px 4px; $tag_height: 26px;