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:
parent
5d34090238
commit
ba1823ee8a
16 changed files with 47 additions and 256 deletions
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
};
|
|
@ -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;
|
||||
}
|
|
@ -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;
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue