mirror of
https://github.com/muerwre/vault-frontend.git
synced 2025-04-25 12:56:41 +07:00
Добавил тему "Веспера"
This commit is contained in:
muerwre
GitHub
parent
5d34090238
commit
aee4b662d5
148 changed files with 1331 additions and 1338 deletions
|
|
@ -1,70 +1,45 @@
|
|||
// color 0, 0, 68 is pretty cool, btw
|
||||
$red: #ff3344;
|
||||
$yellow: #ffd60f;
|
||||
$dark_blue: #592071;
|
||||
$blue: #582cd0;
|
||||
$green: #00d2b9;
|
||||
$olive: #8bc12a;
|
||||
$orange: #ff7549;
|
||||
$grass: #41800d;
|
||||
$wisegreen: #007962;
|
||||
$lightgreen: lighten(adjust_hue($wisegreen, -30deg), 10%);
|
||||
$soft_blue: #3c75ff;
|
||||
// main definitions (move to --vars)
|
||||
$color_primary: var(--color_primary);
|
||||
$color_danger: var(--color_danger);
|
||||
$color_online: var(--color_online);
|
||||
$color_offline: var(--color_offline);
|
||||
$color_link: var(--color_link);
|
||||
$color_flow: var(--color_flow);
|
||||
$color_lab: var(--color_lab);
|
||||
$color_boris: var(--color_boris);
|
||||
$color_like: var(--color_like);
|
||||
|
||||
$primary: $red;
|
||||
$secondary: $wisegreen;
|
||||
// gradients (move to --vars)
|
||||
$danger_gradient: var(--danger_gradient);
|
||||
$info_gradient: var(--info_gradient);
|
||||
$warning_gradient: var(--warning_gradient);
|
||||
$primary_gradient: var(--primary_gradient);
|
||||
$magic_gradient: var(--magic_gradient);
|
||||
$global_loader_gradient: var(--global_loader_gradient);
|
||||
$flow_gradient: var(--flow_gradient);
|
||||
$lab_gradient: var(--lab_gradient);
|
||||
|
||||
$red_gradient: linear-gradient(165deg, $orange -50%, $red 150%);
|
||||
$yellow_gradient: linear-gradient(165deg, $yellow -50%, $red 150%);
|
||||
$blue_gradient: linear-gradient(170deg, $blue, $dark_blue);
|
||||
$green_gradient: linear-gradient(
|
||||
170deg,
|
||||
$lightgreen -50%,
|
||||
$wisegreen 150%
|
||||
);
|
||||
$purple_gradient: linear-gradient(170deg, $red, $dark_blue);
|
||||
$cyan_gradient: linear-gradient(260deg, $soft_blue -50%, #7b2653 150%);
|
||||
// backgrounds (move to --vars)
|
||||
$content_bg: var(--content_bg);
|
||||
$content_bg_dark: var(--content_bg_dark);
|
||||
$content_bg_darker: var(--content_bg_darker);
|
||||
$content_bg_light: var(--content_bg_light);
|
||||
$content_bg_lighter: var(--content_bg_lighter);
|
||||
$content_bg_lightest: var(--content_bg_lightest);
|
||||
|
||||
$red_gradient_alt: linear-gradient(170deg, #ff4545, #d2004c);
|
||||
$purple_gradient_alt: linear-gradient(90deg, #442294, #ff4545);
|
||||
$content_bg_success: var(--content_bg_success);
|
||||
$content_bg_info: var(--content_bg_info);
|
||||
$content_bg_danger: var(--content_bg_danger);
|
||||
$content_bg_backdrop: var(--content_bg_backdrop);
|
||||
|
||||
$main_gradient: $green_gradient;
|
||||
// white shades (move to --vars)
|
||||
$white: var(--white);
|
||||
$gray_25: var(--gray_25);
|
||||
$gray_50: var(--gray_50);
|
||||
$gray_75: var(--gray_75);
|
||||
$gray_90: var(--gray_90);
|
||||
|
||||
// $main_bg_color: darken(#2c2b2b, 4%);
|
||||
$main_bg_color: darken(#332f2d, 6%);
|
||||
$main_text_color: white;
|
||||
|
||||
$content_bg: darken($main_bg_color, 0%);
|
||||
$content_bg_secondary: darken($content_bg, 2%);
|
||||
$lab_post_bg: lighten($content_bg, 4%);
|
||||
|
||||
$cell_bg: lighten($main_bg_color, 0%);
|
||||
$card_bg: lighten($main_bg_color, 0%);
|
||||
|
||||
$text_normal: 16px;
|
||||
$text_small: 14px;
|
||||
$text_big: 20px;
|
||||
$text_sign: 22px;
|
||||
|
||||
$button_bg_color: $red_gradient;
|
||||
|
||||
$inset_bg: linear-gradient(135deg, darken($content_bg, 2%), $content_bg);
|
||||
$comment_bg: lighten($content_bg, 2%);
|
||||
|
||||
$panel_bg: transparent;
|
||||
$node_bg: darken($content_bg, 2%);
|
||||
$node_image_bg: darken($main_bg_color, 4%);
|
||||
$node_title_background: darken($main_bg_color, 8%);
|
||||
|
||||
$editor_bg: $content_bg;
|
||||
$editor_panel_bg: darken($editor_bg, 4%);
|
||||
$cell_shade: lighten($content_bg, 10%);
|
||||
$scroll_color: $red_gradient;
|
||||
$scroll_inactive_opacity: 0.5;
|
||||
|
||||
$side_pane_btn_color: lighten($main_bg_color, 0%);
|
||||
|
||||
$node_buttons_bg: darken($main_bg_color, 6%);
|
||||
|
||||
$tag_bg: lighten($main_bg_color, 4%);
|
||||
$menu_bg: lighten($main_bg_color, 4%);
|
||||
// global
|
||||
$page_background: var(--page-background);
|
||||
$page_background_top: var(--page-background-top);
|
||||
$boris_background: var(--boris-background);
|
||||
|
|
|
|||
|
|
@ -1,3 +1,6 @@
|
|||
@use './themes/default' as theme_default;
|
||||
@use './themes/horizon' as theme_horizon;
|
||||
|
||||
@import 'src/styles/variables';
|
||||
@import 'photoswipe/dist/photoswipe';
|
||||
@import 'photoswipe/dist/default-skin/default-skin';
|
||||
|
|
@ -10,16 +13,18 @@
|
|||
@import 'swiper/css/zoom';
|
||||
@import 'swiper/css/navigation';
|
||||
|
||||
@include theme_default.apply();
|
||||
@include theme_horizon.apply();
|
||||
|
||||
html {
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background: darken($main_bg_color, 12%);
|
||||
min-height: 100vh;
|
||||
background: url('../../src/sprites/noise.png') $main_bg_color;
|
||||
color: $main_text_color;
|
||||
background: $page_background;
|
||||
color: $white;
|
||||
font: $font_16_regular;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
fill: white;
|
||||
|
|
@ -33,8 +38,7 @@ body {
|
|||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
background: url('../../src/sprites/noise_top.png') 0% 0%;
|
||||
background-size: 600px 600px;
|
||||
background: $page_background_top;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
|
@ -65,11 +69,11 @@ body {
|
|||
}
|
||||
|
||||
.todo {
|
||||
background-color: $red;
|
||||
background-color: $color_danger;
|
||||
}
|
||||
|
||||
.done {
|
||||
background-color: $green;
|
||||
background-color: $color_primary;
|
||||
}
|
||||
|
||||
h2 {
|
||||
|
|
@ -77,12 +81,12 @@ h2 {
|
|||
}
|
||||
|
||||
.username {
|
||||
color: $wisegreen;
|
||||
color: $color_link;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $primary;
|
||||
color: $color_link;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
@import "fonts";
|
||||
@import 'fonts';
|
||||
|
||||
$input_height: 40px;
|
||||
$input_text_color: #bbbbbb;
|
||||
$input_shadow: inset transparentize(white, 0.9) 0 0 0 1px;
|
||||
$input_shadow_error: inset $red 0 0 0 1px;
|
||||
$input_shadow: inset $gray_90 0 0 0 1px;
|
||||
$input_shadow_error: inset $color_danger 0 0 0 1px;
|
||||
$input_shadow_filled: $input_shadow;
|
||||
$input_font: $font_16_medium;
|
||||
$input_placeholder_font: $font_16_medium;
|
||||
$input_bg_color: darken($content_bg, 2%);
|
||||
$input_bg_color: $content_bg_dark;
|
||||
$input_grey_color: #444444;
|
||||
|
|
|
|||
|
|
@ -1,25 +1,19 @@
|
|||
|
||||
@use "sass:math";
|
||||
@use 'sass:math';
|
||||
|
||||
@mixin outer_shadow() {
|
||||
box-shadow:
|
||||
inset transparentize(white, 0.95) 1px 1px,
|
||||
transparentize(black, 0.8) 1px 1px,
|
||||
transparentize(black, 0.6) 0 1px 5px;
|
||||
box-shadow: inset $gray_90 1px 1px, transparentize(black, 0.8) 1px 1px,
|
||||
transparentize(black, 0.6) 0 1px 5px;
|
||||
}
|
||||
|
||||
// same as outer shadow, but higher
|
||||
@mixin dropdown_shadow {
|
||||
box-shadow:
|
||||
inset transparentize(white, 0.95) 1px 1px,
|
||||
transparentize(black, 0.8) 1px 1px,
|
||||
transparentize(black, 0.6) 5px 5px 10px;
|
||||
box-shadow: inset $gray_90 1px 1px, transparentize(black, 0.8) 1px 1px,
|
||||
transparentize(black, 0.6) 5px 5px 10px;
|
||||
}
|
||||
|
||||
@mixin row_shadow() {
|
||||
&:not(:last-child) {
|
||||
box-shadow: transparentize(white, 0.95) 0 1px,
|
||||
inset transparentize(black, 0.8) 0 -1px;
|
||||
box-shadow: $gray_90 0 1px, inset transparentize(black, 0.8) 0 -1px;
|
||||
}
|
||||
|
||||
&:only-child {
|
||||
|
|
@ -28,10 +22,8 @@
|
|||
}
|
||||
|
||||
@mixin inner_shadow() {
|
||||
box-shadow:
|
||||
inset transparentize(white, 0.95) -1px -1px,
|
||||
inset transparentize(black, 0.9) 1px 1px,
|
||||
inset transparentize(black, 0.9) 0 0 10px;
|
||||
box-shadow: inset $gray_90 -1px -1px, inset transparentize(black, 0.9) 1px 1px,
|
||||
inset transparentize(black, 0.9) 0 0 10px;
|
||||
}
|
||||
|
||||
@mixin inner_shadow_active() {
|
||||
|
|
@ -39,12 +31,12 @@
|
|||
transition: background-color 250ms;
|
||||
|
||||
&:hover {
|
||||
background: transparentize(white, 0.95);
|
||||
background: $gray_90;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin input_shadow() {
|
||||
box-shadow: inset transparentize(white, 0.92) 0 -1px, inset transparentize(black, 0.8) 0 1px;
|
||||
box-shadow: inset $gray_90 0 -1px, inset transparentize(black, 0.8) 0 1px;
|
||||
}
|
||||
|
||||
@mixin modal_mixin() {
|
||||
|
|
@ -66,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;
|
||||
|
|
@ -104,7 +96,7 @@
|
|||
@content;
|
||||
|
||||
& > * {
|
||||
margin: $gap*0.5 0 !important;
|
||||
margin: $gap * 0.5 0 !important;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0 !important;
|
||||
|
|
@ -117,27 +109,27 @@
|
|||
}
|
||||
|
||||
@mixin can_backdrop {
|
||||
@supports ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))) {
|
||||
@supports (
|
||||
(-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))
|
||||
) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin title_with_line {
|
||||
font: $font_14_semibold;
|
||||
text-transform: uppercase;
|
||||
color: transparentize(white, 0.3);
|
||||
color: $gray_25;
|
||||
flex-direction: row;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -149,7 +141,7 @@
|
|||
& > :global(.line) {
|
||||
flex: 1;
|
||||
height: 2px;
|
||||
background: transparentize(white, 0.95);
|
||||
background: $gray_90;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -162,12 +154,10 @@
|
|||
}
|
||||
|
||||
@mixin sidebar {
|
||||
@include blur();
|
||||
@include blur;
|
||||
}
|
||||
|
||||
@mixin sidebar_content(
|
||||
$width: 400px,
|
||||
) {
|
||||
@mixin sidebar_content($width: 400px) {
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
|
|
@ -187,15 +177,6 @@
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
@mixin lab_gradient {
|
||||
background: linear-gradient(darken($dark_blue, 0%), darken($blue, 30%));
|
||||
}
|
||||
|
||||
@mixin hero_gradient {
|
||||
$color: mix($wisegreen, $content_bg, 30%);
|
||||
background: linear-gradient(170deg, lighten($color, 10%), $color);
|
||||
}
|
||||
|
||||
@mixin flow_grid {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
|
@ -244,8 +225,12 @@
|
|||
|
||||
@mixin appear {
|
||||
@keyframes __appear {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
animation: __appear 0.25s forwards;
|
||||
|
|
@ -264,17 +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;
|
||||
|
|
@ -292,25 +266,25 @@
|
|||
|
||||
[data-popper-placement*='bottom'] & {
|
||||
border-width: 0 10px 10px 10px;
|
||||
border-color: transparent transparent lighten($menu_bg, 6%) transparent;
|
||||
border-color: transparent transparent $content_bg_lightest transparent;
|
||||
top: -10px;
|
||||
}
|
||||
|
||||
[data-popper-placement*='top'] & {
|
||||
border-width: 10px 10px 0 10px;
|
||||
border-color: lighten($menu_bg, 6%) transparent transparent transparent;
|
||||
border-color: $content_bg_lightest transparent transparent transparent;
|
||||
bottom: -10px;
|
||||
}
|
||||
|
||||
[data-popper-placement*='right'] & {
|
||||
border-width: 10px 10px 10px 0;
|
||||
border-color: transparent lighten($menu_bg, 6%) transparent transparent;
|
||||
border-color: transparent $content_bg_lightest transparent transparent;
|
||||
left: -10px;
|
||||
}
|
||||
|
||||
[data-popper-placement*='left'] & {
|
||||
border-width: 10px 0 10px 10px;
|
||||
border-color: transparent transparent transparent lighten($menu_bg, 6%);
|
||||
border-color: transparent transparent transparent $content_bg_lightest;
|
||||
right: -10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,29 +1,29 @@
|
|||
@use "sass:math";
|
||||
@use 'sass:math';
|
||||
|
||||
@import "../variables";
|
||||
@import '../variables';
|
||||
|
||||
$margin: 1em;
|
||||
|
||||
.wrapper {
|
||||
blockquote {
|
||||
border-left: 4px solid $wisegreen;
|
||||
border-left: 4px solid $color_primary;
|
||||
padding: $margin * 0.5 0;
|
||||
margin-bottom: $margin;
|
||||
color: $wisegreen;
|
||||
color: $color_primary;
|
||||
font-size: 0.9em;
|
||||
background-color: transparentize($wisegreen, 0.9);
|
||||
background-color: $content_bg_success;
|
||||
|
||||
p {
|
||||
margin: 0 $margin;
|
||||
}
|
||||
|
||||
&+blockquote {
|
||||
& + blockquote {
|
||||
margin-top: -$margin;
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
background-color: transparentize($blue, 0.9);
|
||||
background-color: $content_bg_info;
|
||||
font-family: monospace;
|
||||
font-size: 0.8em;
|
||||
border-radius: 2px;
|
||||
|
|
@ -34,18 +34,19 @@ $margin: 1em;
|
|||
margin-bottom: $margin;
|
||||
|
||||
code {
|
||||
color: transparentize($wisegreen, 0.1);
|
||||
color: $gray_50;
|
||||
font-family: monospace;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
}
|
||||
|
||||
p, li {
|
||||
p,
|
||||
li {
|
||||
code {
|
||||
background-color: transparentize($blue, 0.9);
|
||||
background-color: $content_bg_info;
|
||||
padding: 2px 4px;
|
||||
border-radius: 0.3em;
|
||||
color: transparentize($wisegreen, 0.1);
|
||||
color: $gray_25;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
}
|
||||
|
|
@ -55,7 +56,11 @@ $margin: 1em;
|
|||
margin-bottom: $margin;
|
||||
}
|
||||
|
||||
h5, h4, h3, h2, h1 {
|
||||
h5,
|
||||
h4,
|
||||
h3,
|
||||
h2,
|
||||
h1 {
|
||||
line-height: 1.2em;
|
||||
margin: $margin * 1.5 0 $margin * 0.5;
|
||||
|
||||
|
|
|
|||
81
src/styles/themes/_default.scss
Normal file
81
src/styles/themes/_default.scss
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
// palette (use inside)
|
||||
|
||||
$_yellow: #ffd60f;
|
||||
$_dark_blue: #592071;
|
||||
$_blue: #582cd0;
|
||||
$_green: #00d2b9;
|
||||
$_wisegreen: #007962;
|
||||
$_olive: #6cb337;
|
||||
$_red: #ff3344;
|
||||
$_orange: #ff7549;
|
||||
$_lightgreen: lighten(adjust_hue(#007962, -30deg), 10%);
|
||||
$_soft_blue: #3c75ff;
|
||||
$_brown: #23201f;
|
||||
|
||||
@mixin apply {
|
||||
:root {
|
||||
// main definitions (move to --vars)
|
||||
--color_primary: #{$_wisegreen};
|
||||
--color_danger: #{$_red};
|
||||
--color_online: #{$_olive};
|
||||
--color_offline: #{$_red};
|
||||
--color_link: #{$_red};
|
||||
--color_like: #{$_red};
|
||||
--color_flow: #{$_red};
|
||||
--color_lab: #{$_blue};
|
||||
--color_boris: #{$_wisegreen};
|
||||
|
||||
// gradients (move to --vars)
|
||||
--danger_gradient: linear-gradient(165deg, #{$_orange} -50%, #{$_red} 150%);
|
||||
--info_gradient: linear-gradient(170deg, #{$_blue}, #{$_dark_blue});
|
||||
--warning_gradient: linear-gradient(
|
||||
165deg,
|
||||
#{$_yellow} -50%,
|
||||
#{$_red} 150%
|
||||
);
|
||||
--primary_gradient: linear-gradient(
|
||||
170deg,
|
||||
#{$_lightgreen} -50%,
|
||||
#{$_wisegreen} 150%
|
||||
);
|
||||
--magic_gradient: linear-gradient(
|
||||
260deg,
|
||||
#{$_soft_blue} -50%,
|
||||
#7b2653 150%
|
||||
);
|
||||
--global_loader_gradient: linear-gradient(
|
||||
90deg,
|
||||
#{$_dark_blue},
|
||||
#{$_soft_blue},
|
||||
#{$_dark_blue}
|
||||
);
|
||||
--flow_gradient: var(--danger_gradient);
|
||||
--lab_gradient: var(--info_gradient);
|
||||
|
||||
// backgrounds (move to --vars)
|
||||
--content_bg: #{$_brown};
|
||||
--content_bg_dark: #{darken($_brown, 2%)};
|
||||
--content_bg_darker: #{darken($_brown, 4%)};
|
||||
--content_bg_light: #{lighten($_brown, 2%)};
|
||||
--content_bg_lighter: #{lighten($_brown, 4%)};
|
||||
--content_bg_lightest: #{lighten($_brown, 6%)};
|
||||
|
||||
--content_bg_success: #{transparentize($_wisegreen, 0.7)};
|
||||
--content_bg_info: #{transparentize($_blue, 0.5)};
|
||||
--content_bg_danger: #{transparentize($_red, 0.5)};
|
||||
--content_bg_backdrop: #{transparentize($_brown, 0.2)};
|
||||
|
||||
// white shades (move to --vars)
|
||||
--white: white;
|
||||
--gray_25: #{transparentize(white, 0.25)};
|
||||
--gray_50: #{transparentize(white, 0.5)};
|
||||
--gray_75: #{transparentize(white, 0.75)};
|
||||
--gray_90: #{transparentize(white, 0.95)};
|
||||
|
||||
// page background
|
||||
--page-background: url('/images/noise.png') 0% 0% #{$_brown};
|
||||
--page-background-top: 600px 600px url('/images/noise_top.png') 0% 0%;
|
||||
--boris-background: 50% 0 / cover no-repeat
|
||||
url('../../sprites/boris_bg.svg');
|
||||
}
|
||||
}
|
||||
92
src/styles/themes/_horizon.scss
Normal file
92
src/styles/themes/_horizon.scss
Normal file
|
|
@ -0,0 +1,92 @@
|
|||
// palette (use inside)
|
||||
|
||||
$_yellow: #ffd60f;
|
||||
$_dark_blue: #592071;
|
||||
$_blue: #582cd0;
|
||||
$_green: #00d2b9;
|
||||
$_wisegreen: #007962;
|
||||
$_olive: #6cb337;
|
||||
$_red: #ff3344;
|
||||
$_orange: #ff7549;
|
||||
$_lightgreen: lighten(adjust_hue(#007962, -30deg), 10%);
|
||||
$_soft_blue: #7693d6;
|
||||
|
||||
$_cold: #1c1e26;
|
||||
$_accent: #e95678;
|
||||
$_mandarine: #f09483;
|
||||
$_lemon: #fab795;
|
||||
$_ocean: #25b0bc;
|
||||
|
||||
@mixin apply {
|
||||
:root.theme-horizon {
|
||||
// main definitions (move to --vars)
|
||||
--color_primary: #{$_accent};
|
||||
--color_danger: #{$_red};
|
||||
--color_online: #{$_ocean};
|
||||
--color_offline: #{$_mandarine};
|
||||
--color_link: #{$_ocean};
|
||||
--color_like: #{$_lemon};
|
||||
--color_flow: #{$_red};
|
||||
--color_lab: #{$_blue};
|
||||
--color_boris: #{$_wisegreen};
|
||||
|
||||
// gradients (move to --vars)
|
||||
--danger_gradient: linear-gradient(165deg, #{$_orange} -50%, #{$_red} 150%);
|
||||
--info_gradient: linear-gradient(170deg, #{$_ocean}, #{$_soft_blue});
|
||||
|
||||
--warning_gradient: linear-gradient(
|
||||
165deg,
|
||||
#{$_yellow} -50%,
|
||||
#{$_red} 150%
|
||||
);
|
||||
|
||||
--primary_gradient: linear-gradient(
|
||||
170deg,
|
||||
#{$_mandarine} -150%,
|
||||
#{$_accent} 100%
|
||||
);
|
||||
|
||||
--magic_gradient: linear-gradient(
|
||||
260deg,
|
||||
#{$_accent} -50%,
|
||||
#{$_orange} 150%
|
||||
);
|
||||
|
||||
--global_loader_gradient: linear-gradient(
|
||||
90deg,
|
||||
#{$_lemon},
|
||||
#{$_accent},
|
||||
#{$_mandarine}
|
||||
);
|
||||
--flow_gradient: var(--primary_gradient);
|
||||
--lab_gradient: var(--info_gradient);
|
||||
|
||||
// backgrounds (move to --vars)
|
||||
--content_bg: #{$_cold};
|
||||
--content_bg_dark: #{darken($_cold, 2%)};
|
||||
--content_bg_darker: #{darken($_cold, 4%)};
|
||||
--content_bg_light: #{lighten($_cold, 2%)};
|
||||
--content_bg_lighter: #{lighten($_cold, 4%)};
|
||||
--content_bg_lightest: #{lighten($_cold, 6%)};
|
||||
|
||||
--content_bg_success: #{transparentize($_accent, 0.7)};
|
||||
--content_bg_info: #{transparentize($_lemon, 0.7)};
|
||||
--content_bg_danger: #{transparentize($_red, 0.5)};
|
||||
--content_bg_backdrop: #{transparentize($_cold, 0.2)};
|
||||
|
||||
// white shades (move to --vars)
|
||||
--white: white;
|
||||
--gray_25: #{transparentize(white, 0.25)};
|
||||
--gray_50: #{transparentize(white, 0.5)};
|
||||
--gray_75: #{transparentize(white, 0.75)};
|
||||
--gray_90: #{transparentize(white, 0.95)};
|
||||
|
||||
// page background
|
||||
--page-background: 50% 50% / cover no-repeat url('/images/horizon_bg.svg') #{darken(
|
||||
$_cold,
|
||||
4%
|
||||
)} fixed;
|
||||
--page-background-top: none;
|
||||
--boris-background: linear-gradient(#{$_ocean} -200%, transparent 50%);
|
||||
}
|
||||
}
|
||||
|
|
@ -15,7 +15,6 @@ $lab_gap: $gap * 2;
|
|||
$lab_gap_mobile: $gap * 2;
|
||||
$grid_line: 5px;
|
||||
$content_width: $cell * 5 + $grid_line * 4;
|
||||
$spc: $gap * 2;
|
||||
$comment_height: 72px;
|
||||
$bar_height: 64px;
|
||||
$page_top_offset: 32px;
|
||||
|
|
@ -24,7 +23,7 @@ $radius: 8px;
|
|||
$cell_radius: $radius;
|
||||
$panel_radius: $radius;
|
||||
$dialog_radius: $radius * 2;
|
||||
$placeholder_bg: transparentize(white, 0.96);
|
||||
$placeholder_bg: $gray_90;
|
||||
|
||||
$info_height: 24px;
|
||||
$limited_width: 940px;
|
||||
|
|
@ -33,13 +32,14 @@ $panel_size: 64px;
|
|||
$node_title_height: $panel_size;
|
||||
$upload_button_height: 52px;
|
||||
|
||||
$shadow_depth_1: transparentize(black, 0.8) 0 1px, inset transparentize(white, 0.98) 0 1px;
|
||||
$shadow_depth_2: transparentize(black, 0.8) 0 2px, inset transparentize(white, 0.98) 0 1px;
|
||||
$shadow_depth_1: transparentize(black, 0.8) 0 1px, inset $gray_90 0 1px;
|
||||
$shadow_depth_2: transparentize(black, 0.8) 0 2px, inset $gray_90 0 1px;
|
||||
|
||||
$comment_shadow: $shadow_depth_2;
|
||||
$node_shadow: transparentize(black, 0.8) 0 2px, transparentize(black, 0.8) 0 2px 4px;
|
||||
$node_shadow: transparentize(black, 0.8) 0 2px,
|
||||
transparentize(black, 0.8) 0 2px 4px;
|
||||
|
||||
$tag_height: 26px;
|
||||
|
||||
$login_dialog_padding: $gap $gap 30px $gap;
|
||||
$sidebar_border: transparentize(white, 0.95);
|
||||
$sidebar_border: $gray_90;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue