Mastodon
/
Sengi-Windows-MacOS-Linux
mirror of https://github.com/NicolasConstant/sengi
1
0
Fork 0
Code Issues Releases Wiki Activity

compiling colors

This commit is contained in:
Nicolas Constant 2024-04-27 14:41:40 -04:00
parent 56ba0b3213
commit 6c9f284940
8 changed files with 66 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/components/floating-column/manage-account/my-account/list-editor/list-account/list-account.component.scss
View File

@ -34,7 +34,7 @@
&--remove {
color: $font-link-primary;
&:hover{
color: lighten($font-link-primary, 40);
color: color(font-link-primary-lighter-40);
}
}
}

2
src/app/components/floating-column/manage-account/my-account/list-editor/list-editor.component.scss
View File

@ -9,7 +9,7 @@
&__search {
color: #fff;
background-color: darken($color-primary, 4);
background-color: color(color-primary-darker-4);
border: 2px solid $color-primary;
width: calc(100%);
padding: 3px 5px;

14
src/app/components/floating-column/manage-account/my-account/my-account.component.scss
View File

@ -30,7 +30,7 @@ $button-width: $list-width/2;
color: #fff;
&:hover {
background-color: lighten($color-primary, 15);
background-color: color(color-primary-lighter-15);
}
}
@ -62,13 +62,13 @@ $button-width: $list-width/2;
&--disabled {
cursor: default;
background-color: darken($color-primary, 4);
background-color: color(color-primary-darker-4);
width: calc(100% - #{$button-width} - 1px);
//outline: 1px solid greenyellow;
&:hover {
background-color: darken($color-primary, 4);
background-color: color(color-primary-darker-4);
}
}
@ -91,13 +91,13 @@ $button-width: $list-width/2;
&--disabled {
cursor: default;
background-color: darken($color-primary, 4);
background-color: color(color-primary-darker-4);
width: calc(100% - #{$button-width} * 3 - 3px);
//outline: 1px solid greenyellow;
&:hover {
background-color: darken($color-primary, 4);
background-color: color(color-primary-darker-4);
}
}
@ -112,13 +112,13 @@ $button-width: $list-width/2;
&:hover {
color: #fff;
background-color: lighten($color-primary, 15);
background-color: color(color-primary-lighter-15);
}
}
&--new-list-title {
color: #fff;
background-color: darken($color-primary, 4);
background-color: color(color-primary-darker-4);
border: 2px solid $color-primary;
width: calc(100% - #{$list-width}/2 - 1px);
padding: 3px 5px;

2
src/app/components/stream/stream-edition/stream-edition.component.scss
View File

@ -51,7 +51,7 @@
}
&:hover {
color: darken($font-color-primary, 20);
color: color(font-color-primary-darker-20);
}
}
}

4
src/app/themes/theme.service.ts
View File

@ -12,6 +12,10 @@ export class ThemeService {
activeTheme = new BehaviorSubject<ThemeTypeEnum>(ThemeTypeEnum.default);
constructor() {
this.setTheme(this.active);
}
getAvailableThemes(): Theme[] {
return this.availableThemes;
}

14
src/app/themes/theme.ts
View File

@ -13,7 +13,12 @@ export const defaultTheme: Theme = {
name: "default",
type: ThemeTypeEnum.default,
properties: {
"--foreground-default": "white",
"--font-color-primary": "#e8eaf3",
"--font-color-secondary-value": "#fff",
"--font-link-primary": "#595c67",
"--font-link-primary-hover": "#8f93a2",
"--color-primary": "#141824",
"--color-secondary": "#090b10",
}
};
@ -21,6 +26,11 @@ export const lightTheme: Theme = {
name: "light",
type: ThemeTypeEnum.light,
properties: {
"--foreground-default": "black",
"--font-color-primary": "#000",
"--font-color-secondary-value": "#000",
"--font-link-primary": "#000",
"--font-link-primary-hover": "#000",
"--color-primary": "#fff",
"--color-secondary": "#fff",
}
};

6
src/sass/_buttons.scss
View File

@ -63,10 +63,10 @@
&--disabled {
cursor: default;
background-color: darken($color-primary, 4);
background-color: color(color-primary-darker-4);
&:hover {
background-color: darken($color-primary, 4);
background-color: color(color-primary-darker-4);
}
}
@ -81,7 +81,7 @@
color: #fff;
&:hover {
background-color: lighten($color-primary, 15);
background-color: color(color-primary-lighter-15);
}
}

46
src/sass/_variables.scss
View File

@ -1,9 +1,36 @@
$font-color-primary: #e8eaf3;
$font-color-secondary: darken(#fff, 25);
$font-link-primary: #595c67;
$font-link-primary-hover: #8f93a2;
$color-primary: #141824;
$color-secondary: #090b10;
:root {
--font-color-primary: #e8eaf3;
//--font-color-secondary: #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-hover: #8f93a2;
--color-primary: #141824;
--color-secondary: #090b10;
--color-primary-lighter-5: hsl(from var(--color-primary) h s calc(l + 5%));
--color-primary-lighter-15: hsl(from var(--color-primary) h s calc(l + 15%));
--color-primary-lighter-20: hsl(from var(--color-primary) h s calc(l + 20%));
--color-primary-darker-4: hsl(from var(--color-primary) h s calc(l - 4%));
--font-color-primary-darker-20: hsl(from var(--font-color-primary) h s calc(l - 20%));
--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-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: color(font-color-secondary);
$font-link-primary: color(font-link-primary); // #595c67;
$font-link-primary-hover: color(font-link-primary-hover);// #8f93a2;
$color-primary: var(--color-primary); // #141824;
$color-secondary: var(--color-secondary); // #090b10;
$column-color: #0f111a;
$column-header-background-color: #0c0c10;
@ -43,8 +70,9 @@ $separator-color:$color-primary;
$button-size: 30px;
$button-color: darken(white, 30);
$button-color-hover: white;
$button-background-color: $color-primary;
$button-background-color-hover: lighten($color-primary, 20);
$button-background-color: --color-primary;
//$button-background-color-hover: lighten($color-primary, 20);
$button-background-color-hover: color(color-primary-lighter-20);
$button-border-color: #303957;
@ -86,7 +114,7 @@ $autosuggest-entry-color-hover: #e2e2e2;
$autosuggest-entry-handle-color-hover: #ffffff;
$scrollbar-color: #08090d;
$scrollbar-color-thumb: lighten($color-primary, 5);
$scrollbar-color-thumb: color(color-primary-lighter-5);
$poll-editor-background: #3e455f;
$poll-editor-background: #32384d;