muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-25 04:46:40 +07:00
Code Packages Activity Actions

removed unused colors

Browse source
This commit is contained in:
Fedor Katurov 2022-08-12 16:32:36 +07:00
parent 5d34090238
commit ba1823ee8a
16 changed files with 47 additions and 256 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/components/bars/PlayerBar/styles.module.scss
View file

@ -1,4 +1,4 @@
@import "src/styles/variables"; @import 'src/styles/variables';
.place { .place {
position: relative; position: relative;
@ -11,11 +11,8 @@
@include outer_shadow(); @include outer_shadow();
display: flex; display: flex;
border-radius: $radius $radius 0 0; border-radius: $radius $radius 0 0;
// background: $main_gradient;
align-items: center; align-items: center;
background: lighten($content_bg, 6%); 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; position: absolute;
top: 0; top: 0;
left: 0; left: 0;

4
src/components/containers/Card/styles.module.scss
View file

@ -1,7 +1,7 @@
@import "src/styles/variables"; @import 'src/styles/variables';
.card { .card {
background-color: $card_bg; background-color: $content_bg;
border-radius: $panel_radius; border-radius: $panel_radius;
padding: $gap; padding: $gap;

7
src/components/flow/FlowSwiperHero/styles.module.scss
View file

@ -60,8 +60,8 @@
height: 100%; height: 100%;
background: linear-gradient( background: linear-gradient(
182deg, 182deg,
transparentize($cell_shade, 1) 50%, transparentize($content_bg, 1) 50%,
transparentize($cell_shade, 0) 95% transparentize($content_bg, 0) 95%
); );
z-index: 4; z-index: 4;
pointer-events: none; pointer-events: none;
@ -76,8 +76,7 @@ img.preview {
opacity: 0; opacity: 0;
:global(.swiper-slide-active) &, :global(.swiper-slide-active) &,
:global(.swiper-slide-duplicate-active) & :global(.swiper-slide-duplicate-active) & {
{
transform: translate(-15%, -20%); transform: translate(-15%, -20%);
opacity: 1; opacity: 1;
} }

9
src/components/input/Button/styles.module.scss
View file

@ -1,4 +1,4 @@
@import "src/styles/variables"; @import 'src/styles/variables';
@keyframes pulse { @keyframes pulse {
0% { 0% {
@ -25,7 +25,7 @@
cursor: pointer; cursor: pointer;
margin: 0; margin: 0;
background: $button_bg_color; background: $primary;
border-radius: $radius; border-radius: $radius;
fill: white; fill: white;
@ -36,7 +36,8 @@
align-items: center; align-items: center;
justify-content: 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 { input {
position: absolute; position: absolute;
@ -238,7 +239,7 @@
.secondary { .secondary {
@include outer_shadow; @include outer_shadow;
background: $green_gradient; background: $red;
} }
.lab { .lab {

4
src/components/input/Info/style.scss
View file

@ -1,4 +1,4 @@
@import "src/styles/variables"; @import 'src/styles/variables';
.container { .container {
min-height: $info_height; min-height: $info_height;
@ -6,7 +6,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: $text_small; font: $font_14_regular;
line-height: 1.2em; line-height: 1.2em;
padding: $gap; padding: $gap;
background: transparentize(white, 0.9); background: transparentize(white, 0.9);

4
src/components/lab/LabNode/styles.module.scss
View file

@ -1,10 +1,10 @@
@import "src/styles/variables.scss"; @import 'src/styles/variables.scss';
.wrap { .wrap {
@include outer_shadow; @include outer_shadow;
position: relative; position: relative;
background-color: $lab_post_bg; background-color: $content_bg;
cursor: pointer; cursor: pointer;
min-width: 0; min-width: 0;

64
src/components/main/SidePane/index.tsx
View file

@ -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>
);
};

72
src/components/main/SidePane/styles.module.scss
View file

@ -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;
}

5
src/components/media/AudioPlayer/styles.module.scss
View file

@ -1,4 +1,4 @@
@import "src/styles/variables"; @import 'src/styles/variables';
.wrap { .wrap {
display: flex; display: flex;
@ -100,8 +100,7 @@
} }
.bar { .bar {
// background: linear-gradient(270deg, $green, $wisegreen); background: $green_gradient;
background: $main_gradient;
position: absolute; position: absolute;
height: 10px; height: 10px;
left: 0; left: 0;

22
src/components/node/NodeTitle/styles.module.scss
View file

@ -1,4 +1,4 @@
@import "src/styles/variables"; @import 'src/styles/variables';
@mixin button { @mixin button {
margin: 0 $gap; margin: 0 $gap;
@ -97,26 +97,6 @@
min-width: 0; 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 { @keyframes pulse {
0% { 0% {
transform: scale(1); transform: scale(1);

12
src/components/tags/TagWrapper/styles.module.scss
View file

@ -1,4 +1,4 @@
@import "src/styles/variables"; @import 'src/styles/variables';
$big: 1.2; $big: 1.2;
@ -57,11 +57,6 @@ $big: 1.2;
background: $green_gradient; background: $green_gradient;
} }
&:global(.olive) {
background: $olive;
color: transparentize(black, 0.4);
}
&:global(.black) { &:global(.black) {
background: transparentize(black, 0.7); background: transparentize(black, 0.7);
box-shadow: none; box-shadow: none;
@ -129,7 +124,8 @@ $big: 1.2;
} }
button.delete { 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; width: 24px;
height: $tag_height; height: $tag_height;
background: transparentize($content_bg, 0.75); background: transparentize($content_bg, 0.75);
@ -148,4 +144,4 @@ button.delete {
padding-right: $gap; padding-right: $gap;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
} }

10
src/containers/node/NodeBottomBlock/styles.module.scss
View file

@ -1,4 +1,4 @@
@import "src/styles/variables.scss"; @import 'src/styles/variables.scss';
.sticky { .sticky {
width: 100%; width: 100%;
@ -22,7 +22,6 @@
} }
} }
.panel { .panel {
flex: 1 3; flex: 1 3;
display: flex; display: flex;
@ -38,13 +37,6 @@
} }
} }
.buttons {
background: $node_buttons_bg;
flex: 1;
border-radius: $panel_radius;
box-shadow: $comment_shadow;
}
.left { .left {
flex: 1; flex: 1;
min-width: 0; min-width: 0;

11
src/layouts/NodeLayout/styles.module.scss
View file

@ -1,4 +1,4 @@
@import "src/styles/variables"; @import 'src/styles/variables';
.wrap { .wrap {
width: 100%; width: 100%;
@ -26,13 +26,6 @@
} }
} }
.buttons {
background: $node_buttons_bg;
flex: 1;
border-radius: $panel_radius;
box-shadow: $comment_shadow;
}
.panel { .panel {
@include row_shadow; @include row_shadow;
@ -46,4 +39,4 @@
@include tablet { @include tablet {
border-radius: 0; border-radius: 0;
} }
} }

59
src/styles/_colors.scss
View file

@ -1,4 +1,4 @@
// color 0, 0, 68 is pretty cool, btw // palette
$red: #ff3344; $red: #ff3344;
$yellow: #ffd60f; $yellow: #ffd60f;
$dark_blue: #592071; $dark_blue: #592071;
@ -6,65 +6,34 @@ $blue: #582cd0;
$green: #00d2b9; $green: #00d2b9;
$olive: #8bc12a; $olive: #8bc12a;
$orange: #ff7549; $orange: #ff7549;
$grass: #41800d;
$wisegreen: #007962; $wisegreen: #007962;
$lightgreen: lighten(adjust_hue($wisegreen, -30deg), 10%); $lightgreen: lighten(adjust_hue($wisegreen, -30deg), 10%);
$soft_blue: #3c75ff; $soft_blue: #3c75ff;
// main definitions
$primary: $red; $primary: $red;
$secondary: $wisegreen; $secondary: $wisegreen;
// gradients
$red_gradient: linear-gradient(165deg, $orange -50%, $red 150%); $red_gradient: linear-gradient(165deg, $orange -50%, $red 150%);
$yellow_gradient: linear-gradient(165deg, $yellow -50%, $red 150%); $yellow_gradient: linear-gradient(165deg, $yellow -50%, $red 150%);
$blue_gradient: linear-gradient(170deg, $blue, $dark_blue); $blue_gradient: linear-gradient(170deg, $blue, $dark_blue);
$green_gradient: linear-gradient( $green_gradient: linear-gradient(170deg, $lightgreen -50%, $wisegreen 150%);
170deg,
$lightgreen -50%,
$wisegreen 150%
);
$purple_gradient: linear-gradient(170deg, $red, $dark_blue);
$cyan_gradient: linear-gradient(260deg, $soft_blue -50%, #7b2653 150%); $cyan_gradient: linear-gradient(260deg, $soft_blue -50%, #7b2653 150%);
$red_gradient_alt: linear-gradient(170deg, #ff4545, #d2004c); $red_gradient_alt: linear-gradient(170deg, #ff4545, #d2004c);
$purple_gradient_alt: linear-gradient(90deg, #442294, #ff4545);
$main_gradient: $green_gradient; $text_color: white;
// $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%);
$scroll_color: $red_gradient; $scroll_color: $red_gradient;
$scroll_inactive_opacity: 0.5; $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%); // --color-base-dark
$menu_bg: lighten($main_bg_color, 4%); $node_bg: darken($content_bg, 2%);
$inset_bg: linear-gradient(135deg, darken($content_bg, 2%), $content_bg);

5
src/styles/_global.scss
View file

@ -16,10 +16,9 @@ html {
} }
body { body {
background: darken($main_bg_color, 12%);
min-height: 100vh; min-height: 100vh;
background: url('../../src/sprites/noise.png') $main_bg_color; background: url('../../src/sprites/noise.png') $content_bg;
color: $main_text_color; color: $text_color;
font: $font_16_regular; font: $font_16_regular;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
fill: white; fill: white;

10
src/styles/variables.scss
View file

@ -15,7 +15,6 @@ $lab_gap: $gap * 2;
$lab_gap_mobile: $gap * 2; $lab_gap_mobile: $gap * 2;
$grid_line: 5px; $grid_line: 5px;
$content_width: $cell * 5 + $grid_line * 4; $content_width: $cell * 5 + $grid_line * 4;
$spc: $gap * 2;
$comment_height: 72px; $comment_height: 72px;
$bar_height: 64px; $bar_height: 64px;
$page_top_offset: 32px; $page_top_offset: 32px;
@ -33,11 +32,14 @@ $panel_size: 64px;
$node_title_height: $panel_size; $node_title_height: $panel_size;
$upload_button_height: 52px; $upload_button_height: 52px;
$shadow_depth_1: transparentize(black, 0.8) 0 1px, inset transparentize(white, 0.98) 0 1px; $shadow_depth_1: transparentize(black, 0.8) 0 1px,
$shadow_depth_2: transparentize(black, 0.8) 0 2px, inset transparentize(white, 0.98) 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; $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; $tag_height: 26px;