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

removed all scss functions around colors

Browse source
This commit is contained in:
Fedor Katurov 2022-08-13 21:33:37 +07:00
parent f943ef31dd
commit 53dc60bad5
45 changed files with 72 additions and 395 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/components/comment/CommentContent/styles.module.scss
View file

@ -46,7 +46,7 @@
border-radius: 0 0 0 $radius;
opacity: 1;
transform: translate(0, 0);
background: transparentize($color_danger, $amount: 0.5);
background: $content_bg_danger;
}
}
@ -93,7 +93,7 @@
padding-bottom: 0 !important;
.date {
background: transparentize($color: $content_bg, $amount: 0.2);
background: $content_bg;
border-radius: $radius 0 $radius 0;
color: $gray_25;
}
@ -108,7 +108,7 @@
bottom: 1px;
right: 0;
font: $font_12_regular;
color: transparentize($color: white, $amount: 0.8);
color: $gray_75;
padding: 0 6px 2px;
z-index: 2;
background: $content_bg_light;

4
src/components/comment/CommentEmbedBlock/styles.module.scss
View file

@ -1,4 +1,4 @@
@import "src/styles/variables";
@import 'src/styles/variables';
.embed {
padding: 0 $gap;
@ -43,7 +43,7 @@
left: 0;
width: 100%;
height: 100%;
background: transparentize($content_bg, 0.15) 50% 50%;
background: $content_bg_backdrop 50% 50%;
background-size: cover;
z-index: 15;
border-radius: $radius;

2
src/components/comment/CommentForm/styles.module.scss
View file

@ -21,7 +21,7 @@
position: relative;
z-index: 1;
display: flex;
background: transparentize(black, 0.8);
background: $content_bg_dark;
border-radius: 0 0 $radius $radius;
flex-wrap: wrap;
padding: $gap * 0.25;

4
src/components/common/Avatar/styles.module.scss
View file

@ -1,11 +1,11 @@
@import "src/styles/variables";
@import 'src/styles/variables';
.avatar {
@include outer_shadow;
width: $comment_height;
height: $comment_height;
background-color: transparentize(black, 0.9);
background-color: $content_bg_dark;
flex-shrink: 0;
overflow: hidden;
border-radius: $radius;

6
src/components/common/MenuDots/styles.module.scss
View file

@ -1,5 +1,5 @@
@import "src/styles/variables";
@import "src/styles/mixins";
@import 'src/styles/variables';
@import 'src/styles/mixins';
.button {
width: 48px;
@ -14,7 +14,7 @@
}
.dots {
@include blur($content_bg, 5px, 0.7);
@include blur;
padding: 5px 0 0 0;
background: $content_bg;

3
src/components/containers/CommentWrapper/styles.module.scss
View file

@ -45,7 +45,6 @@
right: 0;
bottom: 0;
animation: highlight 1s 0.5s forwards;
background: transparentize($color_primary, 0.7);
border-radius: $radius;
pointer-events: none;
touch-action: none;
@ -74,7 +73,7 @@
.thumb {
flex: 0 0 $comment_height;
border-radius: $panel_radius 0 0 $panel_radius;
background-color: transparentize(black, 0.9);
background-color: $content_bg;
display: flex;
flex-direction: column;
box-sizing: border-box;

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

@ -1,4 +1,4 @@
@import "src/styles/variables";
@import 'src/styles/variables';
.cover {
position: absolute;
@ -22,7 +22,7 @@
height: 100%;
top: 0;
left: 0;
background: url('../../../sprites/stripes.svg') transparentize($color: #000000, $amount: 0.5);
background: url('../../../sprites/stripes.svg') $content_bg_backdrop;
}
img {

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

@ -1,4 +1,4 @@
@import "src/styles/variables";
@import 'src/styles/variables';
@keyframes fadeIn {
0% {
@ -29,7 +29,7 @@
left: 0;
width: 100%;
height: 100%;
background: url(../../../sprites/stripes.svg) transparentize($content_bg, 0.2);
background: url(../../../sprites/stripes.svg) $content_bg_backdrop;
}
@include tablet {

10
src/components/dialogs/BetterScrollDialog/styles.module.scss
View file

@ -3,7 +3,7 @@
.wrap {
width: 100vw;
height: 100vh;
background: transparentize($content_bg_darker, 0.5);
background: $content_bg_backdrop;
display: flex;
align-items: center;
justify-content: center;
@ -105,11 +105,7 @@
width: 100%;
height: 40px;
pointer-events: none;
background: linear-gradient(
0deg,
$color_danger 50%,
transparentize($color_danger, 1)
);
background: linear-gradient(0deg, $color_danger 50%, transparent);
display: flex;
align-items: center;
justify-content: center;
@ -136,7 +132,7 @@
.shade {
position: absolute;
background: transparentize($content_bg, 0.3);
background: $content_bg_backdrop;
top: 0;
left: 0;
width: 100%;

4
src/components/dialogs/ModalWrapper/styles.module.scss
View file

@ -1,4 +1,4 @@
@import "src/styles/variables";
@import 'src/styles/variables';
.fixed {
position: fixed;
@ -46,7 +46,7 @@
}
.overlay {
@include modal_backdrop();
@include blur;
position: absolute;
top: 0;

4
src/components/editors/EditorConfirmClose/styles.module.scss
View file

@ -10,6 +10,8 @@
}
.wrap {
@include blur;
position: absolute;
top: 0;
left: 0;
@ -20,8 +22,6 @@
align-items: center;
justify-content: center;
animation: appear 0.25s forwards;
@include blur();
}
.title {

2
src/components/editors/EditorUploadCoverButton/styles.module.scss
View file

@ -68,7 +68,7 @@
justify-content: center;
box-shadow: inset rgba(255, 255, 255, 0.05) 1px 1px, rgba(0, 0, 0, 0.3) -1px 0;
border-radius: $upload_button_height;
background: transparentize($color: $content_bg_lighter, $amount: 0);
background: $content_bg_lighter;
&:hover {
svg {

4
src/components/flow/CellShade/styles.module.scss
View file

@ -1,7 +1,7 @@
@import "src/styles/variables";
@import 'src/styles/variables';
.shade {
background: linear-gradient(7deg, transparentize($content_bg, 0.05) 30px, transparentize($content_bg, 1) 250px);
background: linear-gradient(7deg, $content_bg 30px, transparent 250px);
pointer-events: none;
touch-action: none;

4
src/components/flow/FlowCell/styles.module.scss
View file

@ -1,4 +1,4 @@
@import "src/styles/variables";
@import 'src/styles/variables';
.cell {
@include inner_shadow;
@ -57,13 +57,11 @@
.quadro &,
.horizontal & {
max-width: calc(50% - 15px);
@include blur(transparentize($content_bg, 0), 10px, 0.5)
}
.quadro &,
.vertical & {
max-height: calc(50% - 15px);
@include blur(transparentize($content_bg, 0), 10px, 0.5)
}
}

2
src/components/flow/FlowCellMenu/styles.module.scss
View file

@ -2,7 +2,7 @@
.dropdown {
@include outer_shadow;
@include blur($color_danger, 15px, 0.3);
@include blur($content_bg_info);
width: 100%;
height: 100%;

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

@ -46,7 +46,7 @@
background: url('../../../sprites/stripes.svg') rgba(0, 0, 0, 0.3);
z-index: -1;
pointer-events: none;
box-shadow: inset transparentize($color: white, $amount: 0.85) 0 1px;
box-shadow: inset $gray_90 0 1px;
touch-action: none;
border-radius: $radius;
}
@ -58,11 +58,7 @@
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
182deg,
transparentize($content_bg, 1) 50%,
transparentize($content_bg, 0) 95%
);
background: linear-gradient(182deg, transparent 50%, $content_bg 95%);
z-index: 4;
pointer-events: none;
touch-action: none;

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

@ -69,10 +69,6 @@
&:global(.disabled) {
cursor: auto;
}
&:active {
box-shadow: transparentize(#e933a5, 0.6) 0 0 0;
}
}
&:global(.stretchy) {
@ -266,5 +262,5 @@
display: flex;
align-items: center;
justify-content: center;
background: transparentize($content_bg, 0.1);
background: $content_bg_backdrop;
}

3
src/components/input/ButtonGroup/styles.module.scss
View file

@ -1,4 +1,4 @@
@import "src/styles/variables";
@import 'src/styles/variables';
.wrap {
display: flex;
@ -6,7 +6,6 @@
& > * {
border-radius: 0;
box-shadow: transparentize($color: #000000, $amount: 0.1) 1px 0;
&:last-child {
border-radius: 0 $radius $radius 0;

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

@ -13,16 +13,16 @@
&:global(.danger) {
color: white;
background: transparentize($color_danger, 0.5);
background: $content_bg_danger;
}
&:global(.warning) {
color: white;
background: transparentize($color_danger, 0.5);
background: $content_bg_danger;
}
&:global(.primary) {
color: white;
background: transparentize($color_danger, 0.5);
background: $content_bg_danger;
}
}

6
src/components/lab/LabImage/styles.module.scss
View file

@ -51,12 +51,6 @@
max-height: calc(100vh - 70px - 70px);
max-width: 100%;
transition: box-shadow 1s;
box-shadow: transparentize(black, 0.7) 0 3px 5px;
:global(.swiper-slide-active) & {
box-shadow: transparentize(black, 0.9) 0 10px 5px 4px,
transparentize(black, 0.7) 0 5px 5px, $gray_90 0 -1px 2px, $gray_90 0 -1px;
}
@include tablet {
padding-bottom: 0;

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

@ -9,8 +9,4 @@
min-width: 0;
border-radius: $radius;
&.heroic {
@include hero_gradient;
}
}

2
src/components/main/Footer/styles.module.scss
View file

@ -4,7 +4,7 @@
display: flex;
flex-direction: row;
font: $font_12_semibold;
background: transparentize(black, 0.9);
background: $content_bg_dark;
border-radius: 0 0 $radius $radius;
align-items: center;
text-transform: uppercase;

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

@ -21,8 +21,8 @@
svg {
width: 32px;
height: 32px;
fill: transparentize($color: white, $amount: 0.5);
stroke: transparentize($color: white, $amount: 0.5);
fill: $gray_50;
stroke: $gray_50;
transition: fill 250ms, stroke 250ms;
}

6
src/components/menu/MenuButton/styles.module.scss
View file

@ -1,4 +1,4 @@
@import "src/styles/variables.scss";
@import 'src/styles/variables.scss';
.menu {
position: relative;
@ -14,7 +14,7 @@
visibility: hidden;
pointer-events: none;
touch-action: none;
background-color: transparentize($content_bg, 0.05);
background-color: $content_bg_backdrop;
&.visible {
visibility: visible;
@ -27,7 +27,7 @@
}
&.translucent {
@include blur($content_bg, 15px, 0.5);
@include blur;
}
}

4
src/components/menu/VerticalMenu/styles.module.scss
View file

@ -30,11 +30,11 @@ a.item {
padding: $gap;
font: $font_16_semibold;
cursor: pointer;
background-color: transparentize($color_primary, 1);
background-color: transparent;
transition: background-color 0.25s;
&:hover {
background-color: transparentize($color_primary, 0.5);
background-color: $content_bg_success;
}
&:first-child {

2
src/components/node/NodeImageBlockPlaceholder/styles.module.scss
View file

@ -2,7 +2,7 @@
.placeholder {
height: 320px;
background: transparentize(black, 0.8);
background: $content_bg_dark;
border: $radius $radius 0 0;
@include outer_shadow();

2
src/components/node/NodeNoComments/styles.module.scss
View file

@ -9,7 +9,7 @@
&::after {
content: ' ';
position: absolute;
background: linear-gradient(transparentize($content_bg, 1), $content_bg);
background: linear-gradient(transparent, $content_bg);
border-radius: 0 0 $radius $radius;
height: 100px;
width: 100%;

4
src/components/node/NodeRelated/styles.module.scss
View file

@ -1,8 +1,6 @@
@import "src/styles/variables";
@import 'src/styles/variables';
.wrap {
// padding: $gap;
//background: transparentize(black, 0.8);
border-radius: $panel_radius;
padding: $gap 0;
}

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

@ -1,34 +1,5 @@
@import 'src/styles/variables';
@mixin button {
margin: 0 $gap;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
svg {
fill: $gray_50;
transition: fill 0.25s;
}
&:hover {
svg {
fill: $color_danger;
}
}
&::after {
content: ' ';
flex: 0 0 6px;
height: $gap;
width: 6px;
border-radius: 4px;
background: transparentize(black, 0.7);
margin-left: $gap * 2;
}
}
.wrap {
display: flex;
position: relative;
@ -83,15 +54,6 @@
}
}
.btn {
flex: 1;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
fill: $gray_50;
}
.panel {
flex: 1;
min-width: 0;
@ -163,7 +125,7 @@
padding: 0 3px;
border-radius: 10px;
z-index: 3;
color: transparentize($color: white, $amount: 0.5);
color: $gray_50;
pointer-events: none;
touch-action: none;
}
@ -178,6 +140,7 @@
}
.button {
color: white;
@include hover_opacity;
color: white;
cursor: pointer;
}

37
src/components/profile/Message/index.tsx
View file

@ -1,37 +0,0 @@
import React, { FC } from 'react';
import classNames from 'classnames';
import { Group } from '~/components/containers/Group';
import { ImagePresets } from '~/constants/urls';
import markdown from '~/styles/common/markdown.module.scss';
import { IMessage } from '~/types';
import { formatText, getPrettyDate, getURL } from '~/utils/dom';
import styles from './styles.module.scss';
interface IProps {
message: IMessage;
incoming: boolean;
}
const Message: FC<IProps> = ({ message, incoming }) => {
return (
<div className={classNames(styles.message, { [styles.incoming]: incoming })}>
<div className={styles.text}>
<Group
dangerouslySetInnerHTML={{ __html: formatText(message.text) }}
className={markdown.wrapper}
/>
</div>
<div
className={styles.avatar}
style={{ backgroundImage: `url("${getURL(message.from.photo, ImagePresets.avatar)}")` }}
/>
<div className={styles.stamp}>{getPrettyDate(message.created_at)}</div>
</div>
);
};
export { Message };

100
src/components/profile/Message/styles.module.scss
View file

@ -1,100 +0,0 @@
@import 'src/styles/variables';
$incoming_color: transparentize($color_primary, 0.7);
$outgoing_color: $content_bg_light;
.message {
align-items: flex-end !important;
display: flex;
flex-direction: row;
padding: 0 0 0 42px;
position: relative;
word-break: break-word;
&::before {
position: absolute;
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 20px 0 0 20px;
border-color: transparent transparent transparent $content_bg_light;
bottom: 0;
right: 24px;
}
&.incoming {
flex-direction: row-reverse;
padding: 0 40px 0 0;
.text {
background: $incoming_color;
border-radius: $radius $radius $radius 0;
}
.stamp {
left: auto;
right: 42px;
}
&::before {
content: '';
border-width: 0 0 16px 16px;
border-color: transparent transparent $incoming_color transparent;
left: 24px;
right: auto;
z-index: 1;
}
}
}
.avatar {
width: 40px;
height: 40px;
flex: 0 0 40px;
border-radius: $radius;
background: 50% 50% no-repeat;
background-size: cover;
}
.text {
padding: $gap $gap $gap * 2 $gap;
background: $outgoing_color;
word-wrap: break-word;
word-break: break-word;
width: 100%;
border-radius: $radius $radius 0 $radius;
position: relative;
box-sizing: border-box;
}
.form {
width: 100%;
border-radius: $radius $radius 0 $radius;
background: $outgoing_color;
box-sizing: border-box;
}
.stamp {
position: absolute;
opacity: 0.5;
// background: transparentize($color: #000000, $amount: 0.9);
font: $font_10_regular;
bottom: 0;
left: 42px;
padding: 2px $gap;
border-radius: $radius;
}
.restore {
color: $color_danger;
fill: $color_danger;
}
.deleted {
background: mix($color_danger, $content_bg, 50%);
border-radius: $radius $radius $radius 0;
padding: $gap * 0.5;
z-index: 2;
}

2
src/components/profile/ProfileAccountsError/styles.module.scss
View file

@ -15,7 +15,7 @@
box-sizing: border-box;
border-radius: $radius;
@include blur($color_danger);
@include blur;
}
.title {

4
src/components/profile/ProfileDescription/styles.module.scss
View file

@ -1,4 +1,4 @@
@import "src/styles/variables";
@import 'src/styles/variables';
.content {
padding: $gap * 2;
@ -17,7 +17,7 @@
min-height: 33vh;
padding: 40px;
box-sizing: border-box;
color: transparentize($color: white, $amount: 0.8);
color: $gray_75;
text-transform: uppercase;
font: $font_16_semibold;
}

2
src/components/sidebar/SidebarStack/styles.module.scss
View file

@ -1,7 +1,7 @@
@import 'src/styles/variables';
.stack {
background: transparentize($content_bg, 0.2);
background: $content_bg_backdrop;
display: flex;
flex-direction: row-reverse;
width: auto;

2
src/components/tags/TagAutocompleteRow/styles.module.scss
View file

@ -19,7 +19,7 @@ $row_height: 26px;
&:hover,
&.selected {
opacity: 1;
background: transparentize($color_primary, 0.6);
background: $content_bg_success;
}
&.right {

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

@ -127,7 +127,6 @@ button.delete {
box-shadow: inset $gray_90 1px 0, transparentize(black, 0.7) -1px 0;
width: 24px;
height: $tag_height;
background: transparentize($content_bg, 0.75);
z-index: 24;
border: none;
padding: 0;

2
src/components/upload/UploadDropzone/styles.module.scss
View file

@ -12,7 +12,7 @@
left: 0;
right: 0;
bottom: 0;
background: transparentize($color_primary, 0.7);
background: $content_bg_success;
border-radius: $radius;
z-index: 10;
box-shadow: inset $color_primary 0 0 0 2px;