mirror of
https://github.com/muerwre/vault-frontend.git
synced 2025-04-26 05:16:41 +07:00
Добавил тему "Веспера"
This commit is contained in:
parent
5d34090238
commit
aee4b662d5
148 changed files with 1331 additions and 1338 deletions
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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,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;
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue