1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-26 05:16:41 +07:00

Добавил тему "Веспера"

This commit is contained in:
muerwre 2022-08-14 15:19:54 +07:00 committed by GitHub
parent 5d34090238
commit aee4b662d5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
148 changed files with 1331 additions and 1338 deletions

View file

@ -1,4 +1,4 @@
@import "src/styles/variables";
@import 'src/styles/variables';
.wrap {
display: flex;
@ -15,9 +15,9 @@
}
.button {
color: $red !important;
color: $color_danger !important;
svg {
fill: $red !important;
fill: $color_danger !important;
}
}

View file

@ -1,4 +1,4 @@
@import "src/styles/variables";
@import 'src/styles/variables';
.button {
fill: white;
@ -24,6 +24,6 @@
.description {
font: $font_12_regular;
color: transparentize(white, 0.6);
color: $gray_75;
white-space: nowrap;
}

View file

@ -1,10 +1,10 @@
@import "src/styles/variables.scss";
@import 'src/styles/variables.scss';
div.block {
@include inner_shadow_active;
cursor: pointer;
background: $inset_bg;
background: linear-gradient(135deg, $content_bg_dark, $content_bg);
padding: $gap;
border-radius: $radius;
display: flex;

View file

@ -1,10 +1,10 @@
@import "src/styles/variables";
@import 'src/styles/variables';
.badge {
padding: $gap;
text-align: center;
border-radius: $radius;
color: $red;
color: $color_danger;
padding: $gap * 4 $gap;
text-transform: uppercase;
font: $font_18_semibold;

View file

@ -1,8 +1,8 @@
@import "src/styles/variables";
@import 'src/styles/variables';
.placeholder {
height: 320px;
background: transparentize(black, 0.8);
background: $content_bg_dark;
border: $radius $radius 0 0;
@include outer_shadow();
@ -11,6 +11,6 @@
justify-content: center;
svg {
fill: transparentize(white, 0.95);
fill: $gray_90;
}
}

View file

@ -1,4 +1,4 @@
@import "src/styles/variables.scss";
@import 'src/styles/variables.scss';
.wrapper {
border-radius: $radius;
@ -15,7 +15,7 @@
left: 50%;
bottom: $gap * 2;
transform: translate(-50%, 0);
background: darken($content_bg, 4%);
background: $content_bg_darker;
width: auto;
padding: 5px 10px;
border-radius: 10px;
@ -82,7 +82,6 @@
}
}
}
}
.slide.slide {
@ -127,9 +126,7 @@
:global(.swiper-slide-active) & {
box-shadow: transparentize(black, 0.9) 0 10px 5px 4px,
transparentize(black, 0.7) 0 5px 5px,
transparentize(white, 0.95) 0 -1px 2px,
transparentize(white, 0.95) 0 -1px;
transparentize(black, 0.7) 0 5px 5px, $gray_90 0 -1px 2px, $gray_90 0 -1px;
}
@include tablet {

View file

@ -1,4 +1,4 @@
@import "src/styles/variables";
@import 'src/styles/variables';
.wrap {
user-select: none;
@ -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%;
@ -49,7 +49,7 @@
transform: translate(-50%, -50%);
font: $font_18_semibold;
text-transform: uppercase;
color: darken(white, 75%);
color: $gray_75;
height: 20px;
margin-top: 0 !important;
text-align: center;

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

View file

@ -1,7 +1,7 @@
@import "src/styles/variables";
@import 'src/styles/variables';
.item {
background: lighten($content_bg, 2%) 50% 50% no-repeat;
background: $content_bg_light 50% 50% no-repeat;
padding-bottom: 100%;
border-radius: $cell_radius;
cursor: pointer;
@ -29,7 +29,8 @@ div.thumb {
}
}
.letters, .title {
.letters,
.title {
@include outer_shadow;
position: absolute;
@ -41,7 +42,7 @@ div.thumb {
width: 100%;
height: 100%;
font: $font_24_semibold;
color: transparentize(white, 0.5);
color: $gray_50;
border-radius: $cell_radius;
}
@ -53,7 +54,7 @@ div.thumb {
justify-content: flex-start;
word-break: break-word;
overflow: hidden;
color: transparentize(white, 0.3);
color: $gray_25;
.large & {
font: $font_14_semibold;

View file

@ -1,33 +1,4 @@
@import "src/styles/variables";
@mixin button {
margin: 0 $gap;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
svg {
fill: darken(white, 50%);
transition: fill 0.25s;
}
&:hover {
svg {
fill: $red;
}
}
&::after {
content: ' ';
flex: 0 0 6px;
height: $gap;
width: 6px;
border-radius: 4px;
background: transparentize(black, 0.7);
margin-left: $gap * 2;
}
}
@import 'src/styles/variables';
.wrap {
display: flex;
@ -75,7 +46,7 @@
.name {
font: $font_12_regular;
color: transparentize(white, 0.5);
color: $gray_50;
text-transform: lowercase;
@include tablet {
@ -83,40 +54,11 @@
}
}
.btn {
flex: 1;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
fill: transparentize(white, 0.5);
}
.panel {
flex: 1;
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);
@ -154,16 +96,16 @@
opacity: 1;
svg {
fill: $red;
fill: $color_like;
}
.like_count {
color: $red;
color: $color_like;
}
}
&:hover {
fill: $red;
fill: $color_like;
animation: pulse 0.75s infinite;
.like_count {
@ -179,11 +121,11 @@
bottom: 0;
opacity: 1;
transition: opacity 0.25s, color 0.25s;
background: $node_bg;
background: $content_bg_dark;
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;
}
@ -198,6 +140,7 @@
}
.button {
color: white;
@include hover_opacity;
color: white;
cursor: pointer;
}