1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-25 12:56:41 +07:00

removed unused colors

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

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;

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;

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

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 {

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

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;

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

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

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;

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

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