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 {
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;

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

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

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

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

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

@ -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 {

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

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

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 {
@include outer_shadow;
position: relative;
background-color: $lab_post_bg;
background-color: $content_bg;
cursor: pointer;
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 {
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;

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

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

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

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 {
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;

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

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

59
src/styles/_colors.scss
View file

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

5
src/styles/_global.scss
View file

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

10
src/styles/variables.scss
View file

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