From ba1823ee8a9e25313874bf70143daf43790272e3 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Fri, 12 Aug 2022 16:32:36 +0700
Subject: [PATCH] removed unused colors
---
.../bars/PlayerBar/styles.module.scss | 5 +-
.../containers/Card/styles.module.scss | 4 +-
.../flow/FlowSwiperHero/styles.module.scss | 7 +-
.../input/Button/styles.module.scss | 9 +--
src/components/input/Info/style.scss | 4 +-
src/components/lab/LabNode/styles.module.scss | 4 +-
src/components/main/SidePane/index.tsx | 64 -----------------
.../main/SidePane/styles.module.scss | 72 -------------------
.../media/AudioPlayer/styles.module.scss | 5 +-
.../node/NodeTitle/styles.module.scss | 22 +-----
.../tags/TagWrapper/styles.module.scss | 12 ++--
.../node/NodeBottomBlock/styles.module.scss | 10 +--
src/layouts/NodeLayout/styles.module.scss | 11 +--
src/styles/_colors.scss | 59 ++++-----------
src/styles/_global.scss | 5 +-
src/styles/variables.scss | 10 +--
16 files changed, 47 insertions(+), 256 deletions(-)
delete mode 100644 src/components/main/SidePane/index.tsx
delete mode 100644 src/components/main/SidePane/styles.module.scss
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<IProps> = () => {
- 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 (
- <div className={styles.pane} style={{ transform: `translate(${left}px, 0px)` }}>
- <Group>
- <div className={classNames(styles.group, 'logo')}>
- <div>V</div>
- </div>
-
- <div className={styles.btn}>
- <div>P</div>
- </div>
-
- <div className={styles.btn}>
- <div>F</div>
- </div>
-
- <div className={styles.group}>
- <div className={styles.btn} />
- <div className={styles.btn} />
- <div className={styles.btn} />
- <div className={styles.btn} />
- </div>
- </Group>
-
- <div className={styles.flexy} />
-
- <div className={styles.btn}>S</div>
- </div>
- );
-};
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;