mirror of
https://github.com/muerwre/vault-frontend.git
synced 2025-04-25 04:46:40 +07:00
removed all scss functions around colors
This commit is contained in:
Fedor Katurov
parent
f943ef31dd
commit
53dc60bad5
45 changed files with 72 additions and 395 deletions
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -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,7 +2,7 @@
|
|||
|
||||
.dropdown {
|
||||
@include outer_shadow;
|
||||
@include blur($color_danger, 15px, 0.3);
|
||||
@include blur($content_bg_info);
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -9,8 +9,4 @@
|
|||
|
||||
min-width: 0;
|
||||
border-radius: $radius;
|
||||
|
||||
&.heroic {
|
||||
@include hero_gradient;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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,7 +2,7 @@
|
|||
|
||||
.placeholder {
|
||||
height: 320px;
|
||||
background: transparentize(black, 0.8);
|
||||
background: $content_bg_dark;
|
||||
border: $radius $radius 0 0;
|
||||
@include outer_shadow();
|
||||
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 };
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -15,7 +15,7 @@
|
|||
box-sizing: border-box;
|
||||
border-radius: $radius;
|
||||
|
||||
@include blur($color_danger);
|
||||
@include blur;
|
||||
}
|
||||
|
||||
.title {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ $row_height: 26px;
|
|||
&:hover,
|
||||
&.selected {
|
||||
opacity: 1;
|
||||
background: transparentize($color_primary, 0.6);
|
||||
background: $content_bg_success;
|
||||
}
|
||||
|
||||
&.right {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -25,10 +25,7 @@
|
|||
left: 0;
|
||||
height: 60px;
|
||||
width: 100%;
|
||||
background: linear-gradient(
|
||||
transparentize($content_bg, 1),
|
||||
$content_bg 90%
|
||||
);
|
||||
background: linear-gradient(transparent, $content_bg 90%);
|
||||
pointer-events: none;
|
||||
touch-action: none;
|
||||
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
}
|
||||
|
||||
&.is_scrolled {
|
||||
@include blur();
|
||||
@include blur;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.wrap {
|
||||
justify-content: flex-start;
|
||||
|
|
@ -25,6 +25,6 @@
|
|||
}
|
||||
|
||||
.description {
|
||||
color: transparentize($color: white, $amount: 0.7);
|
||||
color: $gray_25;
|
||||
font: $font_14_regular;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,54 +0,0 @@
|
|||
import React, { FC } from 'react';
|
||||
|
||||
import { Anchor } from '~/components/common/Anchor';
|
||||
import { NodeNoComments } from '~/components/node/NodeNoComments';
|
||||
import { Message } from '~/components/profile/Message';
|
||||
import { useUser } from '~/hooks/auth/useUser';
|
||||
import { useMessages } from '~/hooks/messages/useMessages';
|
||||
import { useProfileContext } from '~/utils/providers/ProfileProvider';
|
||||
|
||||
import styles from './styles.module.scss';
|
||||
|
||||
const ProfileMessages: FC = () => {
|
||||
const { profile, isLoading: isLoadingProfile } = useProfileContext();
|
||||
const { user } = useUser();
|
||||
const { messages, isLoading: isLoadingMessages } = useMessages(profile?.username || '');
|
||||
|
||||
if (!messages.length || isLoadingProfile)
|
||||
return <NodeNoComments is_loading={isLoadingMessages || isLoadingProfile} />;
|
||||
|
||||
if (messages.length <= 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles.messages}>
|
||||
<div className={styles.warning}>
|
||||
<p>В будущем мы собираемся убрать сообщения, превратив их в заметки.</p>
|
||||
|
||||
<p>
|
||||
Вся твоя история сообщений, написанных себе, сохранится. Исчезнут только сообщения другим
|
||||
участникам.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Давай обсудим это в <Anchor href="/boris">Борисе</Anchor>, если это так важно.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{messages
|
||||
.filter(message => !!message.text)
|
||||
.map((
|
||||
message // TODO: show files / memo
|
||||
) => (
|
||||
<Message message={message} incoming={user.id !== message.from.id} key={message.id} />
|
||||
))}
|
||||
|
||||
{!isLoadingMessages && messages.length > 0 && (
|
||||
<div className={styles.placeholder}>Когда-нибудь здесь будут еще сообщения</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { ProfileMessages };
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
@import 'src/styles/variables';
|
||||
|
||||
.messages {
|
||||
padding: $gap;
|
||||
background: $content_bg_dark;
|
||||
display: flex;
|
||||
flex-direction: column !important;
|
||||
overflow: auto;
|
||||
|
||||
& > * {
|
||||
margin: $gap * 0.5 0;
|
||||
|
||||
&:last-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
font: $font_12_regular;
|
||||
padding: $gap;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div.warning.warning {
|
||||
padding: $gap;
|
||||
box-shadow: $color_danger 0 0 0 2px;
|
||||
border-radius: $radius;
|
||||
font: $font_14_semibold;
|
||||
margin-bottom: $gap * 2;
|
||||
|
||||
p {
|
||||
margin-bottom: $gap;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -45,9 +45,10 @@ $content_bg_light: lighten($brown, 2%);
|
|||
$content_bg_lighter: lighten($brown, 4%);
|
||||
$content_bg_lightest: lighten($brown, 6%);
|
||||
|
||||
$content_bg_success: mix($brown, $blue, 90%);
|
||||
$content_bg_info: mix($brown, $wisegreen, 90%);
|
||||
$content_bg_danger: mix($red, $brown, 50%);
|
||||
$content_bg_success: transparentize($wisegreen, 0.5);
|
||||
$content_bg_info: transparentize($blue, 0.5);
|
||||
$content_bg_danger: transparentize($red, 0.5);
|
||||
$content_bg_backdrop: transparentize($content_bg, 0.2);
|
||||
|
||||
// white shades (move to --vars)
|
||||
$white: white;
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@
|
|||
left: 0;
|
||||
height: 120px;
|
||||
width: 100%;
|
||||
background: linear-gradient(transparentize($color, 1), $color);
|
||||
background: linear-gradient(transparent, $color);
|
||||
border-radius: $radius;
|
||||
pointer-events: none;
|
||||
touch-action: none;
|
||||
|
|
@ -116,15 +116,13 @@
|
|||
}
|
||||
}
|
||||
|
||||
@mixin blur($color: $content_bg, $radius: 15px, $opacity: 0.5) {
|
||||
background: transparentize($color, math.div($opacity, 1.5));
|
||||
backdrop-filter: blur($radius);
|
||||
-webkit-backdrop-filter: blur($radius);
|
||||
@mixin blur($color: $content_bg_backdrop, $radius: 15px) {
|
||||
background: $color;
|
||||
|
||||
@include can_backdrop {
|
||||
backdrop-filter: blur($radius);
|
||||
-webkit-backdrop-filter: blur($radius);
|
||||
background-color: transparentize($color, $opacity);
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -156,7 +154,7 @@
|
|||
}
|
||||
|
||||
@mixin sidebar {
|
||||
@include blur();
|
||||
@include blur;
|
||||
}
|
||||
|
||||
@mixin sidebar_content($width: 400px) {
|
||||
|
|
@ -179,11 +177,6 @@
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
@mixin hero_gradient {
|
||||
$color: mix($color_primary, $content_bg, 30%);
|
||||
background: linear-gradient(170deg, lighten($color, 10%), $color);
|
||||
}
|
||||
|
||||
@mixin flow_grid {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
|
@ -256,20 +249,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
@mixin modal_backdrop {
|
||||
@include blur();
|
||||
background: transparentize($content_bg, 0.3)
|
||||
url('../../src/sprites/noise.png');
|
||||
|
||||
@include can_backdrop {
|
||||
@supports (backdrop-filter: blur(5px)) and
|
||||
(background-image: url('../../src/sprites/noise.png')) {
|
||||
background: transparentize($content_bg, 0.5)
|
||||
url('../../src/sprites/noise.png');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin hover_opacity($initial_opacity: 0.5) {
|
||||
opacity: $initial_opacity;
|
||||
transition: opacity 0.25s;
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ $margin: 1em;
|
|||
margin-bottom: $margin;
|
||||
color: $color_primary;
|
||||
font-size: 0.9em;
|
||||
background-color: transparentize($color_primary, 0.9);
|
||||
background-color: $content_bg_success;
|
||||
|
||||
p {
|
||||
margin: 0 $margin;
|
||||
|
|
@ -34,7 +34,7 @@ $margin: 1em;
|
|||
margin-bottom: $margin;
|
||||
|
||||
code {
|
||||
color: transparentize($color_primary, 0.1);
|
||||
color: $content_bg_info;
|
||||
font-family: monospace;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
|
@ -43,10 +43,10 @@ $margin: 1em;
|
|||
p,
|
||||
li {
|
||||
code {
|
||||
background-color: transparentize($color_primary, 0.9);
|
||||
background-color: $content_bg_info;
|
||||
padding: 2px 4px;
|
||||
border-radius: 0.3em;
|
||||
color: transparentize($color_primary, 0.1);
|
||||
color: $gray_25;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue