mirror of
https://github.com/muerwre/vault-frontend.git
synced 2025-04-25 04:46:40 +07:00
replaced colors
This commit is contained in:
parent
f6b76055d3
commit
f943ef31dd
15 changed files with 42 additions and 32 deletions
|
@ -30,10 +30,10 @@
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
|
|
||||||
&.open {
|
&.open {
|
||||||
color: $color_danger;
|
color: $color_offline;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.closed {
|
&.closed {
|
||||||
color: $green;
|
color: $color_online;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -20,7 +20,7 @@
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
background: linear-gradient(90deg, $dark_blue, $soft_blue, $dark_blue);
|
background: $global_loader_gradient;
|
||||||
animation: spin infinite 1s linear;
|
animation: spin infinite 1s linear;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -18,7 +18,7 @@ $pad_usual: $content_bg_lightest;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
|
|
||||||
.danger & {
|
.danger & {
|
||||||
background: $color_danger_slate;
|
background: $content_bg_danger;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -30,7 +30,7 @@ $pad_usual: $content_bg_lightest;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
&.danger {
|
&.danger {
|
||||||
box-shadow: inset $color_danger_slate 0 0 0 2px;
|
box-shadow: inset $content_bg_danger 0 0 0 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.with_title {
|
&.with_title {
|
||||||
|
|
|
@ -40,7 +40,7 @@
|
||||||
|
|
||||||
&.lab {
|
&.lab {
|
||||||
&::after {
|
&::after {
|
||||||
background: $blue;
|
background: $color_lab;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -234,7 +234,7 @@
|
||||||
|
|
||||||
.primary {
|
.primary {
|
||||||
@include outer_shadow;
|
@include outer_shadow;
|
||||||
background: $color_primary_gradient;
|
background: $primary_gradient;
|
||||||
}
|
}
|
||||||
|
|
||||||
.danger {
|
.danger {
|
||||||
|
@ -248,7 +248,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.lab {
|
.lab {
|
||||||
background: $blue;
|
background: $color_lab;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flat {
|
.flat {
|
||||||
|
|
|
@ -17,7 +17,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&.has_error {
|
&.has_error {
|
||||||
box-shadow: inset $color_danger 0 0 0 1px;
|
box-shadow: inset $content_bg_danger 0 0 0 1px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -38,7 +38,7 @@
|
||||||
padding: 0 $gap * 0.5;
|
padding: 0 $gap * 0.5;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
color: white;
|
color: white;
|
||||||
background-color: $color_danger;
|
background-color: $content_bg_danger;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
right: $gap * 0.5;
|
right: $gap * 0.5;
|
||||||
transform: translate(0, 50%);
|
transform: translate(0, 50%);
|
||||||
|
@ -66,6 +66,6 @@
|
||||||
.focused.has_error &,
|
.focused.has_error &,
|
||||||
.not_empty.has_error & {
|
.not_empty.has_error & {
|
||||||
color: white;
|
color: white;
|
||||||
background-color: $color_danger;
|
background-color: $content_bg_danger;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -53,7 +53,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&.lab {
|
&.lab {
|
||||||
background-color: $blue;
|
background-color: $color_lab;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.danger {
|
&.danger {
|
||||||
|
|
|
@ -100,7 +100,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.bar {
|
.bar {
|
||||||
background: $color_primary_gradient;
|
background: $primary_gradient;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
height: 10px;
|
height: 10px;
|
||||||
left: 0;
|
left: 0;
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
@import "src/styles/variables.scss";
|
@import 'src/styles/variables.scss';
|
||||||
|
|
||||||
img.image {
|
img.image {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
@ -47,14 +47,14 @@ img.image {
|
||||||
right: 30px;
|
right: 30px;
|
||||||
bottom: 40px;
|
bottom: 40px;
|
||||||
opacity: 0.4;
|
opacity: 0.4;
|
||||||
color: $orange;
|
color: $color_offline;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
fill: $orange;
|
fill: currentColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__text {
|
&__text {
|
||||||
|
|
|
@ -46,7 +46,7 @@
|
||||||
color: white;
|
color: white;
|
||||||
|
|
||||||
&.green {
|
&.green {
|
||||||
background: $color_primary_gradient;
|
background: $primary_gradient;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.orange {
|
&.orange {
|
||||||
|
|
|
@ -54,7 +54,7 @@ $big: 1.2;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:global(.green) {
|
&:global(.green) {
|
||||||
background: $color_primary_gradient;
|
background: $primary_gradient;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:global(.black) {
|
&:global(.black) {
|
||||||
|
|
|
@ -123,7 +123,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&.lab::after {
|
&.lab::after {
|
||||||
background: lighten($blue, 10%);
|
background: lighten($color_lab, 10%);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.boris::after {
|
&.boris::after {
|
||||||
|
|
|
@ -4,18 +4,18 @@ $dark_blue: #592071;
|
||||||
$blue: #582cd0;
|
$blue: #582cd0;
|
||||||
$green: #00d2b9;
|
$green: #00d2b9;
|
||||||
$wisegreen: #007962;
|
$wisegreen: #007962;
|
||||||
$olive: #8bc12a;
|
$olive: #6cb337;
|
||||||
$red: #ff3344;
|
$red: #ff3344;
|
||||||
$orange: #ff7549;
|
$orange: #ff7549;
|
||||||
$color_primary: #007962;
|
|
||||||
$lightgreen: lighten(adjust_hue(#007962, -30deg), 10%);
|
$lightgreen: lighten(adjust_hue(#007962, -30deg), 10%);
|
||||||
$soft_blue: #3c75ff;
|
$soft_blue: #3c75ff;
|
||||||
$color_danger_slate: mix(#ff3344, #23201f, 60%);
|
$brown: #23201f;
|
||||||
|
|
||||||
// main definitions (move to --vars)
|
// main definitions (move to --vars)
|
||||||
$color_primary: $wisegreen;
|
$color_primary: $wisegreen;
|
||||||
$color_danger: $red;
|
$color_danger: $red;
|
||||||
$color_online: $olive;
|
$color_online: $olive;
|
||||||
|
$color_offline: $red;
|
||||||
$color_link: $red;
|
$color_link: $red;
|
||||||
$color_flow: $red;
|
$color_flow: $red;
|
||||||
$color_lab: $blue;
|
$color_lab: $blue;
|
||||||
|
@ -24,20 +24,30 @@ $color_lab: $blue;
|
||||||
$danger_gradient: linear-gradient(165deg, $orange -50%, $color_danger 150%);
|
$danger_gradient: linear-gradient(165deg, $orange -50%, $color_danger 150%);
|
||||||
$info_gradient: linear-gradient(170deg, $blue, $dark_blue);
|
$info_gradient: linear-gradient(170deg, $blue, $dark_blue);
|
||||||
$warning_gradient: linear-gradient(165deg, $yellow -50%, $color_danger 150%);
|
$warning_gradient: linear-gradient(165deg, $yellow -50%, $color_danger 150%);
|
||||||
$color_primary_gradient: linear-gradient(
|
$primary_gradient: linear-gradient(
|
||||||
170deg,
|
170deg,
|
||||||
$lightgreen -50%,
|
$lightgreen -50%,
|
||||||
$color_primary 150%
|
$color_primary 150%
|
||||||
);
|
);
|
||||||
$magic_gradient: linear-gradient(260deg, $soft_blue -50%, #7b2653 150%);
|
$magic_gradient: linear-gradient(260deg, $soft_blue -50%, #7b2653 150%);
|
||||||
|
$global_loader_gradient: linear-gradient(
|
||||||
|
90deg,
|
||||||
|
$dark_blue,
|
||||||
|
$soft_blue,
|
||||||
|
$dark_blue
|
||||||
|
);
|
||||||
|
|
||||||
// backgrounds (move to --vars)
|
// backgrounds (move to --vars)
|
||||||
$content_bg: #23201f;
|
$content_bg: $brown;
|
||||||
$content_bg_dark: darken($content_bg, 2%);
|
$content_bg_dark: darken($brown, 2%);
|
||||||
$content_bg_darker: darken($content_bg, 4%);
|
$content_bg_darker: darken($brown, 4%);
|
||||||
$content_bg_light: lighten($content_bg, 2%);
|
$content_bg_light: lighten($brown, 2%);
|
||||||
$content_bg_lighter: lighten($content_bg, 4%);
|
$content_bg_lighter: lighten($brown, 4%);
|
||||||
$content_bg_lightest: lighten($content_bg, 6%);
|
$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%);
|
||||||
|
|
||||||
// white shades (move to --vars)
|
// white shades (move to --vars)
|
||||||
$white: white;
|
$white: white;
|
||||||
|
|
|
@ -23,7 +23,7 @@ $margin: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
pre {
|
pre {
|
||||||
background-color: transparentize($blue, 0.9);
|
background-color: $content_bg_lighter;
|
||||||
font-family: monospace;
|
font-family: monospace;
|
||||||
font-size: 0.8em;
|
font-size: 0.8em;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
|
@ -43,7 +43,7 @@ $margin: 1em;
|
||||||
p,
|
p,
|
||||||
li {
|
li {
|
||||||
code {
|
code {
|
||||||
background-color: transparentize($blue, 0.9);
|
background-color: transparentize($color_primary, 0.9);
|
||||||
padding: 2px 4px;
|
padding: 2px 4px;
|
||||||
border-radius: 0.3em;
|
border-radius: 0.3em;
|
||||||
color: transparentize($color_primary, 0.1);
|
color: transparentize($color_primary, 0.1);
|
||||||
|
|
|
@ -15,7 +15,7 @@ div.toast.error {
|
||||||
}
|
}
|
||||||
|
|
||||||
div.toast.success {
|
div.toast.success {
|
||||||
background: $color_primary_gradient;
|
background: $primary_gradient;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.toast.info {
|
div.toast.info {
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue