fix various colors
This commit is contained in:
parent
ce6ed17812
commit
11a3753f33
|
@ -34,7 +34,7 @@
|
||||||
&--remove {
|
&--remove {
|
||||||
color: $font-link-primary;
|
color: $font-link-primary;
|
||||||
&:hover{
|
&:hover{
|
||||||
color: color(font-link-primary-lighter-40);
|
color: var(--font-link-primary-lighter-40);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -9,7 +9,7 @@
|
||||||
|
|
||||||
&__search {
|
&__search {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
background-color: color(color-primary-darker-4);
|
background-color: var(--color-primary-darker-4);
|
||||||
border: 2px solid var(--color-primary);
|
border: 2px solid var(--color-primary);
|
||||||
width: calc(100%);
|
width: calc(100%);
|
||||||
padding: 3px 5px;
|
padding: 3px 5px;
|
||||||
|
|
|
@ -30,7 +30,7 @@ $button-width: $list-width/2;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: color(color-primary-lighter-15);
|
background-color: var(--color-primary-lighter-15);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -62,13 +62,13 @@ $button-width: $list-width/2;
|
||||||
|
|
||||||
&--disabled {
|
&--disabled {
|
||||||
cursor: default;
|
cursor: default;
|
||||||
background-color: color(color-primary-darker-4);
|
background-color: var(--color-primary-darker-4);
|
||||||
|
|
||||||
width: calc(100% - #{$button-width} - 1px);
|
width: calc(100% - #{$button-width} - 1px);
|
||||||
//outline: 1px solid greenyellow;
|
//outline: 1px solid greenyellow;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: color(color-primary-darker-4);
|
background-color: var(--color-primary-darker-4);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -91,13 +91,13 @@ $button-width: $list-width/2;
|
||||||
|
|
||||||
&--disabled {
|
&--disabled {
|
||||||
cursor: default;
|
cursor: default;
|
||||||
background-color: color(color-primary-darker-4);
|
background-color: var(--color-primary-darker-4);
|
||||||
|
|
||||||
width: calc(100% - #{$button-width} * 3 - 3px);
|
width: calc(100% - #{$button-width} * 3 - 3px);
|
||||||
//outline: 1px solid greenyellow;
|
//outline: 1px solid greenyellow;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: color(color-primary-darker-4);
|
background-color: var(--color-primary-darker-4);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -112,13 +112,13 @@ $button-width: $list-width/2;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
background-color: color(color-primary-lighter-15);
|
background-color: var(--color-primary-lighter-15);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&--new-list-title {
|
&--new-list-title {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
background-color: color(color-primary-darker-4);
|
background-color: var(--color-primary-darker-4);
|
||||||
border: 2px solid var(--color-primary);
|
border: 2px solid var(--color-primary);
|
||||||
width: calc(100% - #{$list-width}/2 - 1px);
|
width: calc(100% - #{$list-width}/2 - 1px);
|
||||||
padding: 3px 5px;
|
padding: 3px 5px;
|
||||||
|
|
|
@ -51,7 +51,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: color(font-color-primary-darker-20);
|
color: var(--font-color-primary-darker-20);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
|
@ -26,7 +26,7 @@ export class ThemeService {
|
||||||
|
|
||||||
setTheme(theme: Theme){
|
setTheme(theme: Theme){
|
||||||
this.setActiveTheme(theme);
|
this.setActiveTheme(theme);
|
||||||
this.activeTheme.next(theme.type);
|
this.activeTheme.next(theme.theme_type);
|
||||||
}
|
}
|
||||||
|
|
||||||
// isDarkTheme(): boolean {
|
// isDarkTheme(): boolean {
|
||||||
|
|
|
@ -63,10 +63,10 @@
|
||||||
|
|
||||||
&--disabled {
|
&--disabled {
|
||||||
cursor: default;
|
cursor: default;
|
||||||
background-color: color(color-primary-darker-4);
|
background-color: var(--color-primary-darker-4);
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: color(color-primary-darker-4);
|
background-color: var(--color-primary-darker-4);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -81,7 +81,7 @@
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: color(color-primary-lighter-15);
|
background-color: var(--color-primary-lighter-15);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -26,6 +26,7 @@
|
||||||
|
|
||||||
.flexcroll {
|
.flexcroll {
|
||||||
scrollbar-color: $scrollbar-color-thumb #0f111a;
|
scrollbar-color: $scrollbar-color-thumb #0f111a;
|
||||||
|
scrollbar-color: #090b10 #0f111a;
|
||||||
scrollbar-width: thin;
|
scrollbar-width: thin;
|
||||||
|
|
||||||
scrollbar-face-color: $scrollbar-color;
|
scrollbar-face-color: $scrollbar-color;
|
||||||
|
|
|
@ -1,13 +1,14 @@
|
||||||
:root {
|
:root {
|
||||||
--font-color-primary: #e8eaf3;
|
--font-color-primary: #e8eaf3;
|
||||||
//--font-color-secondary: #fff;
|
//--font-color-secondary: #fff;
|
||||||
--font-color-secondary-value: #fff;
|
--font-color-secondary-value: #fff;
|
||||||
--font-color-secondary: hsl(from var(--font-color-secondary-value) h s calc(l - 25%));
|
|
||||||
--font-link-primary: #595c67;
|
--font-link-primary: #595c67;
|
||||||
--font-link-primary-hover: #8f93a2;
|
--font-link-primary-hover: #8f93a2;
|
||||||
--color-primary: #141824;
|
--color-primary: #141824;
|
||||||
--color-secondary: #090b10;
|
--color-secondary: #090b10;
|
||||||
|
|
||||||
|
--font-color-secondary: hsl(from var(--font-color-secondary-value) h s calc(l - 25%));
|
||||||
|
|
||||||
--color-primary-lighter-5: hsl(from var(var(--color-primary)) h s calc(l + 5%));
|
--color-primary-lighter-5: hsl(from var(var(--color-primary)) h s calc(l + 5%));
|
||||||
--color-primary-lighter-15: hsl(from var(var(--color-primary)) h s calc(l + 15%));
|
--color-primary-lighter-15: hsl(from var(var(--color-primary)) h s calc(l + 15%));
|
||||||
--color-primary-lighter-20: hsl(from var(var(--color-primary)) h s calc(l + 20%));
|
--color-primary-lighter-20: hsl(from var(var(--color-primary)) h s calc(l + 20%));
|
||||||
|
@ -18,17 +19,13 @@
|
||||||
--font-link-primary-lighter-40: hsl(from var(--font-link-primary-lighter-40) h s calc(l + 40%));
|
--font-link-primary-lighter-40: hsl(from var(--font-link-primary-lighter-40) h s calc(l + 40%));
|
||||||
}
|
}
|
||||||
|
|
||||||
@function color($color-name) {
|
|
||||||
@return var(--#{$color-name});
|
|
||||||
}
|
|
||||||
|
|
||||||
$font-color-primary: var(--font-color-primary); // #e8eaf3;
|
$font-color-primary: var(--font-color-primary); // #e8eaf3;
|
||||||
//$font-color-secondary: darken(var(--font-color-secondary), 25) ;// darken(#fff, 25);
|
//$font-color-secondary: darken(var(--font-color-secondary), 25) ;// darken(#fff, 25);
|
||||||
//$font-color-secondary: hsl(from var(--font-color-secondary) h s calc(l - 25%));
|
//$font-color-secondary: hsl(from var(--font-color-secondary) h s calc(l - 25%));
|
||||||
$font-color-secondary: color(font-color-secondary);
|
$font-color-secondary: var(--font-color-secondary);
|
||||||
|
|
||||||
$font-link-primary: color(font-link-primary); // #595c67;
|
$font-link-primary: var(--font-link-primary); // #595c67;
|
||||||
$font-link-primary-hover: color(font-link-primary-hover);// #8f93a2;
|
$font-link-primary-hover: var(--font-link-primary-hover);// #8f93a2;
|
||||||
//$color-primary: var(var(--color-primary)); // #141824;
|
//$color-primary: var(var(--color-primary)); // #141824;
|
||||||
//$color-secondary: var(--color-secondary); // #090b10;
|
//$color-secondary: var(--color-secondary); // #090b10;
|
||||||
|
|
||||||
|
@ -72,7 +69,7 @@ $button-color: darken(white, 30);
|
||||||
$button-color-hover: white;
|
$button-color-hover: white;
|
||||||
$button-background-color: var(--color-primary);
|
$button-background-color: var(--color-primary);
|
||||||
//$button-background-color-hover: lighten($color-primary, 20);
|
//$button-background-color-hover: lighten($color-primary, 20);
|
||||||
$button-background-color-hover: color(color-primary-lighter-20);
|
$button-background-color-hover: var(--color-primary-lighter-20);
|
||||||
$button-border-color: #303957;
|
$button-border-color: #303957;
|
||||||
|
|
||||||
|
|
||||||
|
@ -114,7 +111,7 @@ $autosuggest-entry-color-hover: #e2e2e2;
|
||||||
$autosuggest-entry-handle-color-hover: #ffffff;
|
$autosuggest-entry-handle-color-hover: #ffffff;
|
||||||
|
|
||||||
$scrollbar-color: #08090d;
|
$scrollbar-color: #08090d;
|
||||||
$scrollbar-color-thumb: color(color-primary-lighter-5);
|
$scrollbar-color-thumb: var(--color-primary-lighter-5);
|
||||||
|
|
||||||
$poll-editor-background: #3e455f;
|
$poll-editor-background: #3e455f;
|
||||||
$poll-editor-background: #32384d;
|
$poll-editor-background: #32384d;
|
||||||
|
|
Loading…
Reference in New Issue