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

refactoring colors

This commit is contained in:
Nicolas Constant 2024-05-06 21:05:26 -04:00
parent 6026892b11
commit 9c654e1ebd
12 changed files with 165 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/components/floating-column/add-new-account/add-new-account.component.scss
View File

@ -114,15 +114,15 @@ $comrade_red: #a50000;
margin: 20px 0 0 0; margin: 20px 0 0 0;
& a { & a {
color: #ffcc00; color: var(--floating-column-add-account-faq);
text-decoration: underline; text-decoration: underline;
&:hover { &:hover {
color: #ffe88a; color: var(--floating-column-add-account-faq-hover);
} }
} }
&__warning { &__warning {
color: #ffdc52; color: var(--floating-column-add-account-faq-warning);
} }
} }

2
src/app/components/floating-column/floating-column.component.scss
View File

@ -34,7 +34,7 @@
display: block; display: block;
float: right; float: right;
font-size: 14px; font-size: 14px;
color: white; color: var(--floating-column-close-button);
margin: 5px 5px 0 0; margin: 5px 5px 0 0;
width: 40px; width: 40px;

6
src/app/components/floating-column/manage-account/direct-messages/direct-messages.component.scss
View File

@ -10,7 +10,7 @@
margin-left: 31px; margin-left: 31px;
padding-top: 3px; padding-top: 3px;
float: left; float: left;
color: #5098eb; color: var(--floating-column-manage-account-dm-icon);
} }
&__avatar { &__avatar {
@ -24,8 +24,6 @@
.stream-toots__status { .stream-toots__status {
&:not(:last-child) { &:not(:last-child) {
border-bottom: 1px solid #4e5572; border-bottom: 1px solid var(--floating-column-manage-account-dm-stream-border);
border-bottom: 1px solid #2f3444;
border-bottom: 1px solid #232733;
} }
} }

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

@ -14,7 +14,7 @@ $account-header-height: 60px;
padding-right: 10px; padding-right: 10px;
padding-bottom: 5px; padding-bottom: 5px;
height: $account-header-height; //border-top: 1px solid #222736; height: $account-header-height; //border-top: 1px solid #222736;
border-bottom: 1px solid #222736; border-bottom: 1px solid var(--floating-column-manage-account-header-border);
&--button { &--button {
// outline: 1px greenyellow solid; // outline: 1px greenyellow solid;
margin-top: 20px; margin-top: 20px;
@ -34,15 +34,15 @@ $account-header-height: 60px;
color: $font-link-primary-hover; color: $font-link-primary-hover;
} }
&--selected { &--selected {
color: whitesmoke; color: var(--floating-column-manage-account-header-selected);
&:hover { &:hover {
color: whitesmoke; color: var(--floating-column-manage-account-header-selected-hover);
} }
} }
&--notification { &--notification {
color: rgb(250, 152, 41); color: var(--floating-column-manage-account-header-notification);
&:hover { &:hover {
color: rgb(255, 185, 106); color: var(--floating-column-manage-account-header-notification-hover);
} }
} }
} }

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

@ -15,7 +15,7 @@ $button-width: $list-width/2;
padding-right: 10px; padding-right: 10px;
font-size: $small-font-size; font-size: $small-font-size;
padding-bottom: 20px; padding-bottom: 20px;
outline: 1px dotted greenyellow; //outline: 1px dotted greenyellow;
} }
&__label { &__label {
@ -27,7 +27,7 @@ $button-width: $list-width/2;
&__blue { &__blue {
background-color: var(--color-primary); background-color: var(--color-primary);
color: #fff; color: var(--floating-column-manage-account-myaccount-blue);
&:hover { &:hover {
background-color: var(--color-primary-lighter-15); background-color: var(--color-primary-lighter-15);
@ -35,12 +35,12 @@ $button-width: $list-width/2;
} }
&__red { &__red {
$red-button-color: rgb(65, 3, 3); $red-button-color: var(--floating-column-manage-account-myaccount-red-background);
background-color: $red-button-color !important; background-color: $red-button-color !important;
color: #fff; color: var(--floating-column-manage-account-myaccount-red);
&:hover { &:hover {
background-color: lighten($red-button-color, 15) !important; background-color: var(--floating-column-manage-account-myaccount-red-background-hover) !important;
} }
} }
@ -107,17 +107,16 @@ $button-width: $list-width/2;
float: right; float: right;
padding: 5px 10px; padding: 5px 10px;
background-color: var(--color-primary); background-color: var(--color-primary);
color: #fff;
color: $font-color-secondary; color: $font-color-secondary;
&:hover { &:hover {
color: #fff; color: var(--floating-column-manage-account-myaccount-list-button-hover);
background-color: var(--color-primary-lighter-15); background-color: var(--color-primary-lighter-15);
} }
} }
&--new-list-title { &--new-list-title {
color: #fff; color: var(--floating-column-manage-account-myaccount-list-new);
background-color: var(--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);
@ -153,7 +152,7 @@ $button-width: $list-width/2;
&__text { &__text {
display: block; display: block;
margin: 0 6px 9px 6px; margin: 0 6px 9px 6px;
color: rgb(140, 152, 173); color: var(--floating-column-manage-account-myaccount-advanced-text);
} }
&__input { &__input {

10
src/app/components/floating-column/manage-account/notifications/notification/notification.component.scss
View File

@ -27,7 +27,7 @@
&:not(:last-child) { &:not(:last-child) {
border: solid #06070b; border: solid var(--floating-column-manage-account-notification-border);
border-width: 0 0 1px 0; border-width: 0 0 1px 0;
} }
} }
@ -68,7 +68,7 @@ $acccount-info-left: 70px;
position: absolute; position: absolute;
top: 7px; top: 7px;
left: $acccount-info-left; left: $acccount-info-left;
color: whitesmoke; color: var(--floating-column-manage-account-notification-follow-account-display-name);
} }
&:hover &__display-name { &:hover &__display-name {
@ -100,20 +100,20 @@ $acccount-info-left: 70px;
padding: 2px; padding: 2px;
text-align: center; text-align: center;
color: rgb(182, 182, 182); color: var(--floating-column-manage-account-notification-follow-request-link);
transition: all .2s; transition: all .2s;
// outline: 1px dotted greenyellow; // outline: 1px dotted greenyellow;
&--check { &--check {
&:hover { &:hover {
color: greenyellow; color: var(--floating-column-manage-account-notification-follow-request-link-validate);
} }
} }
&--cross { &--cross {
&:hover { &:hover {
color: orangered; color: var(--floating-column-manage-account-notification-follow-request-link-refuse);
} }
} }
} }

74
src/app/components/floating-column/manage-account/notifications/notifications.component.scss
View File

@ -10,82 +10,10 @@
&__error { &__error {
padding: 20px 20px 0 20px; padding: 20px 20px 0 20px;
color: rgb(255, 113, 113); color: var(--floating-column-manage-account-notification-stream-error);
} }
&__notification { &__notification {
position: relative; position: relative;
} }
// &--icon {
// position: absolute;
// top: 5px;
// left: 43px;
// text-align: center;
// width: 20px;
// // outline: 1px dotted greenyellow;
// }
// &--label {
// margin: 0 10px 0 $avatar-column-space;
// padding-top: 5px;
// }
// &:not(:last-child) {
// border: solid #06070b;
// border-width: 0 0 1px 0;
// }
// }
// &__link {
// color: $status-links-color;
// }
// &__status {
// display: block;
// // opacity: 0.65;
// }
} }
// .followed {
// color: $boost-color;
// }
// .follow-account {
// padding: 5px;
// height: 60px;
// width: calc(100%);
// overflow: hidden;
// display: block;
// position: relative;
// text-decoration: none;
// &__avatar {
// float: left;
// margin: 0 0 0 10px;
// width: 45px;
// height: 45px;
// border-radius: 2px;
// }
// $acccount-info-left: 70px;
// &__display-name {
// position: absolute;
// top: 7px;
// left: $acccount-info-left;
// color: whitesmoke;
// }
// &:hover &__display-name {
// text-decoration: underline;
// }
// &__acct {
// position: absolute;
// top: 27px;
// left: $acccount-info-left;
// font-size: 13px;
// color: $status-links-color;
// }
// }

2
src/app/components/floating-column/search/search.component.scss
View File

@ -107,7 +107,7 @@ $search-form-height: 70px;
border-radius: 2px; border-radius: 2px;
display: block; display: block;
padding: 5px; padding: 5px;
color: white; color: var(--floating-column-search-result-hashtag);
text-decoration: none; text-decoration: none;
transition: all .3s; transition: all .3s;

28
src/app/components/floating-column/settings/settings.component.scss
View File

@ -19,10 +19,10 @@
padding: 0 5px; padding: 0 5px;
&__link { &__link {
color: rgb(161, 161, 161); color: var(--floating-column-settings-version);
&:hover { &:hover {
color: #fff; color: var(--floating-column-settings-version-hover);
} }
} }
} }
@ -48,7 +48,7 @@
&__text { &__text {
display: block; display: block;
margin: 0 6px 9px 6px; margin: 0 6px 9px 6px;
color: rgb(140, 152, 173); color: var(--floating-column-settings-subsection-text);
} }
&__input { &__input {
@ -60,7 +60,7 @@
margin: 0 0 5px 5px; margin: 0 0 5px 5px;
& a { & a {
color: white; color: var(--floating-column-settings-subsection-title);
font-weight: bold; font-weight: bold;
text-decoration: underline; text-decoration: underline;
} }
@ -77,7 +77,7 @@
.language { .language {
&__warning { &__warning {
color: orange; color: var(--floating-column-settings-language-warning);
} }
&__entry { &__entry {
@ -132,9 +132,9 @@
padding: 3px 0; padding: 3px 0;
margin-left: 5px; margin-left: 5px;
background-color: #32384d; background-color: var(--floating-column-settings-sound-select-background);
color: white; color: var(--floating-column-settings-sound-select-color);
border: 1px solid #32384d; border: 1px solid var(--floating-column-settings-sound-select-border);
} }
&__play { &__play {
@ -145,12 +145,12 @@
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
background-color: #1f2330; background-color: var(--floating-column-settings-sound-play-background);
color: white; color: var(--floating-column-settings-sound-play-color);
-webkit-appearance: none; -webkit-appearance: none;
&:hover { &:hover {
background-color: #32384d; background-color: var(--floating-column-settings-sound-play-background-hover);
} }
} }
} }
@ -164,11 +164,11 @@
text-align: center; text-align: center;
color: white; color: var(--floating-column-settings-toggle-lock);
background-color: #1f2330; background-color: var(--floating-column-settings-toggle-lock-background);
&:hover { &:hover {
text-decoration: none; text-decoration: none;
background-color: #32384d; background-color: var(--floating-column-settings-toggle-lock-background-hover);
} }
} }

40
src/app/themes/implementations/default.ts
View File

@ -148,5 +148,45 @@ export const defaultTheme: Theme = {
"--profile-fields-border": "#000000", "--profile-fields-border": "#000000",
"--profile-lock": "#808080", "--profile-lock": "#808080",
"--profile-fields-background": "#0b0d13", "--profile-fields-background": "#0b0d13",
"--floating-column-close-button": "#ffffff",
"--floating-column-add-account-faq": "#ffcc00",
"--floating-column-add-account-faq-hover": "#ffe88a",
"--floating-column-add-account-faq-warning": "#ffdc52",
"--floating-column-search-result-hashtag": "#ffffff",
"--floating-column-settings-version": "#a1a1a1",
"--floating-column-settings-version-hover": "#ffffff",
"--floating-column-settings-subsection-text": "#8c98ad",
"--floating-column-settings-subsection-title": "#ffffff",
"--floating-column-settings-language-warning": "#ffa500",
"--floating-column-settings-sound-select-background": "#32384d",
"--floating-column-settings-sound-select-color": "#ffffff",
"--floating-column-settings-sound-select-border": "#32384d",
"--floating-column-settings-sound-play-background": "#1f2330",
"--floating-column-settings-sound-play-color": "#ffffff",
"--floating-column-settings-sound-play-background-hover": "#32384d",
"--floating-column-settings-toggle-lock": "#ffffff",
"--floating-column-settings-toggle-lock-background": "#1f2330",
"--floating-column-settings-toggle-lock-background-hover": "#32384d",
"--floating-column-manage-account-header-border": "#222736",
"--floating-column-manage-account-header-selected": "#f5f5f5",
"--floating-column-manage-account-header-selected-hover": "#f5f5f5",
"--floating-column-manage-account-header-notification": "#fa9829",
"--floating-column-manage-account-header-notification-hover": "#ffb96a",
"--floating-column-manage-account-dm-icon": "#5098eb",
"--floating-column-manage-account-dm-stream-border": "#232733",
"--floating-column-manage-account-myaccount-blue": "#ffffff",
"--floating-column-manage-account-myaccount-red": "#ffffff",
"--floating-column-manage-account-myaccount-red-background": "#410303",
"--floating-column-manage-account-myaccount-red-background-hover": "#4a0303",
"--floating-column-manage-account-myaccount-list-button-hover": "#ffffff",
"--floating-column-manage-account-myaccount-list-new": "#ffffff",
"--floating-column-manage-account-myaccount-advanced-text": "#8c98ad",
"--floating-column-manage-account-notification-stream-error": "#ff7171",
"--floating-column-manage-account-notification-border": "#06070b",
"--floating-column-manage-account-notification-follow-account-display-name": "#f5f5f5",
"--floating-column-manage-account-notification-follow-request-link": "#b6b6b6",
"--floating-column-manage-account-notification-follow-request-link-validate": "#adff2f",
"--floating-column-manage-account-notification-follow-request-link-refuse": "#ff4500",
} }
}; };

44
src/app/themes/implementations/light.ts
View File

@ -25,7 +25,7 @@ export const lightTheme: Theme = {
"--btn-primary-font-color": "white", "--btn-primary-font-color": "white",
"--status-primary-color": "#2d3134", "--status-primary-color": "#2d3134",
"--status-secondary-color": "#292c37", "--status-secondary-color": "#292c37",
"--status-links-color": "#d9e1e8", "--status-links-color": "#457aa2",
"--boost-color": "#5098eb", "--boost-color": "#5098eb",
"--update-color": "#95e470", "--update-color": "#95e470",
"--favorite-color": "#ffc16f", "--favorite-color": "#ffc16f",
@ -37,7 +37,7 @@ export const lightTheme: Theme = {
"--column-background": "#f6f7f9", "--column-background": "#f6f7f9",
"--card-border-color": "#2b344d", "--card-border-color": "#b5c2d1",
"--context-menu-background": "#ffffff", "--context-menu-background": "#ffffff",
"--context-menu-background-hover": "#d7dfeb", "--context-menu-background-hover": "#d7dfeb",
@ -155,5 +155,45 @@ export const lightTheme: Theme = {
"--profile-fields-border": "#9ca7b3", "--profile-fields-border": "#9ca7b3",
"--profile-lock": "#808080", "--profile-lock": "#808080",
"--profile-fields-background": "#e9edf1", "--profile-fields-background": "#e9edf1",
"--floating-column-close-button": "#ffffff",
"--floating-column-add-account-faq": "#ffcc00",
"--floating-column-add-account-faq-hover": "#ffe88a",
"--floating-column-add-account-faq-warning": "#ffdc52",
"--floating-column-search-result-hashtag": "#ffffff",
"--floating-column-settings-version": "#a1a1a1",
"--floating-column-settings-version-hover": "#ffffff",
"--floating-column-settings-subsection-text": "#8c98ad",
"--floating-column-settings-subsection-title": "#ffffff",
"--floating-column-settings-language-warning": "#ffa500",
"--floating-column-settings-sound-select-background": "#32384d",
"--floating-column-settings-sound-select-color": "#ffffff",
"--floating-column-settings-sound-select-border": "#32384d",
"--floating-column-settings-sound-play-background": "#1f2330",
"--floating-column-settings-sound-play-color": "#ffffff",
"--floating-column-settings-sound-play-background-hover": "#32384d",
"--floating-column-settings-toggle-lock": "#ffffff",
"--floating-column-settings-toggle-lock-background": "#1f2330",
"--floating-column-settings-toggle-lock-background-hover": "#32384d",
"--floating-column-manage-account-header-border": "#222736",
"--floating-column-manage-account-header-selected": "#f5f5f5",
"--floating-column-manage-account-header-selected-hover": "#f5f5f5",
"--floating-column-manage-account-header-notification": "#fa9829",
"--floating-column-manage-account-header-notification-hover": "#ffb96a",
"--floating-column-manage-account-dm-icon": "#5098eb",
"--floating-column-manage-account-dm-stream-border": "#232733",
"--floating-column-manage-account-myaccount-blue": "#ffffff",
"--floating-column-manage-account-myaccount-red": "#ffffff",
"--floating-column-manage-account-myaccount-red-background": "#410303",
"--floating-column-manage-account-myaccount-red-background-hover": "#4a0303",
"--floating-column-manage-account-myaccount-list-button-hover": "#ffffff",
"--floating-column-manage-account-myaccount-list-new": "#ffffff",
"--floating-column-manage-account-myaccount-advanced-text": "#8c98ad",
"--floating-column-manage-account-notification-stream-error": "#ff7171",
"--floating-column-manage-account-notification-border": "#06070b",
"--floating-column-manage-account-notification-follow-account-display-name": "#f5f5f5",
"--floating-column-manage-account-notification-follow-request-link": "#b6b6b6",
"--floating-column-manage-account-notification-follow-request-link-validate": "#adff2f",
"--floating-column-manage-account-notification-follow-request-link-refuse": "#ff4500",
} }
}; };

42
src/sass/_variables.scss
View File

@ -145,6 +145,48 @@
--profile-lock: #808080; --profile-lock: #808080;
--profile-fields-background: #0b0d13; --profile-fields-background: #0b0d13;
--floating-column-close-button: #ffffff; //TODO
--floating-column-add-account-faq: #ffcc00;
--floating-column-add-account-faq-hover: #ffe88a;
--floating-column-add-account-faq-warning: #ffdc52;
--floating-column-search-result-hashtag: #ffffff;
--floating-column-settings-version: #a1a1a1;
--floating-column-settings-version-hover: #ffffff;
--floating-column-settings-subsection-text: #8c98ad;
--floating-column-settings-subsection-title: #ffffff;
--floating-column-settings-language-warning: #ffa500;
--floating-column-settings-sound-select-background: #32384d;
--floating-column-settings-sound-select-color: #ffffff;
--floating-column-settings-sound-select-border: #32384d;
--floating-column-settings-sound-play-background: #1f2330;
--floating-column-settings-sound-play-color: #ffffff;
--floating-column-settings-sound-play-background-hover: #32384d;
--floating-column-settings-toggle-lock: #ffffff;
--floating-column-settings-toggle-lock-background: #1f2330;
--floating-column-settings-toggle-lock-background-hover: #32384d;
--floating-column-manage-account-header-border: #222736;
--floating-column-manage-account-header-selected: #f5f5f5;
--floating-column-manage-account-header-selected-hover: #f5f5f5;
--floating-column-manage-account-header-notification: #fa9829;
--floating-column-manage-account-header-notification-hover: #ffb96a;
--floating-column-manage-account-dm-icon: #5098eb;
--floating-column-manage-account-dm-stream-border: #232733;
--floating-column-manage-account-myaccount-blue: #ffffff;
--floating-column-manage-account-myaccount-red: #ffffff;
--floating-column-manage-account-myaccount-red-background: #410303;
--floating-column-manage-account-myaccount-red-background-hover: #4a0303;
--floating-column-manage-account-myaccount-list-button-hover: #ffffff;
--floating-column-manage-account-myaccount-list-new: #ffffff;
--floating-column-manage-account-myaccount-advanced-text: #8c98ad;
--floating-column-manage-account-notification-stream-error: #ff7171;
--floating-column-manage-account-notification-border: #06070b;
--floating-column-manage-account-notification-follow-account-display-name: #f5f5f5;
--floating-column-manage-account-notification-follow-request-link: #b6b6b6;
--floating-column-manage-account-notification-follow-request-link-validate: #adff2f;
--floating-column-manage-account-notification-follow-request-link-refuse: #ff4500;
--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%));