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

better borders

This commit is contained in:
Nicolas Constant 2024-04-30 19:43:17 -04:00
parent 65369604d6
commit 22f5abd708
7 changed files with 74 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/components/left-side-bar/left-side-bar.component.scss
View File

@ -10,11 +10,11 @@ $height-button: 40px;
}
.left-bar-link {
color: $font-link-primary;
color: darken(whitesmoke, 17);
color: var(--left-bar-link);
text-decoration: none;
&:hover {
color: $font-link-primary-hover;
color: var(--left-bar-link-hover);
}
}

14
src/app/components/stream/stream-overlay/stream-overlay.component.scss
View File

@ -11,7 +11,8 @@ $header-content-height: 40px;
width: calc(100%);
height: $header-content-height;
background-color: $column-header-background-color;
border-bottom: 1px solid #222736;
//border-bottom: 1px solid #222736;
border-bottom: 1px solid var(--stream-column-border);
display: flex;
}
@ -54,18 +55,17 @@ $header-content-height: 40px;
width: $header-content-height;
height: $header-content-height;
color: #354060;
color: var(--stream-navigation-button);
transition: all .2s;
&:hover {
color: #536599;
color: #7a8dc7;
color: var(--stream-navigation-button-hover);
}
&--focus {
color: whitesmoke;
color: var(--stream-navigation-button-focus);
&:hover {
color: whitesmoke;
color: var(--stream-navigation-button-focus-hover);
}
}
}
@ -113,7 +113,7 @@ $header-content-height: 40px;
&-close {
display: block;
font-size: 13px;
color: white;
color: var(--stream-navigation-close);
&__icon {
position: relative;

10
src/app/pages/streams-main-display/streams-main-display.component.scss
View File

@ -19,8 +19,10 @@
.flexcroll {
scrollbar-color: $scrollbar-color-thumb #0f111a;
scrollbar-color: #090b10 #0f111a;
// scrollbar-color: $scrollbar-color-thumb #0f111a;
// scrollbar-color: #090b10 #0f111a;
//scrollbar-color: var(--scrollbar-color-2) var(--scrollbar-color-3);
scrollbar-color: var(--scrollbar-color-second-2) var(--scrollbar-color-second-3);
scrollbar-width: thin;
scrollbar-face-color: $scrollbar-color;
@ -37,7 +39,9 @@
&::-webkit-scrollbar-thumb {
-webkit-border-radius: 0px;
border-radius: 0px;
background: #08090d;
//background: #08090d;
background: $scrollbar-color-thumb;
-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.5);
}
}

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

@ -56,6 +56,10 @@ export const defaultTheme: Theme = {
"--autosuggest-entry-handle-color-hover": "#ffffff",
"--scrollbar-color": "#08090d",
"--scrollbar-color-2": "#090b10",
"--scrollbar-color-3": "#0f111a",
"--scrollbar-color-second-2": "#090b10",
"--scrollbar-color-second-3": "#0f111a",
"--poll-editor-background": "#fff",
@ -100,10 +104,19 @@ export const defaultTheme: Theme = {
"--stream-remove-cw-color": "white",
"--stream-toot-error": "#ff7171",
"--stream-navigation-button": "#354060",
"--stream-navigation-button-hover": "#7a8dc7",
"--stream-navigation-button-focus": "#f5f5f5",
"--stream-navigation-button-focus-hover": "#f5f5f5",
"--stream-navigation-close": "#ffffff",
"--stream-toot-load-buffer-color-hover": "white",
"--stream-toot-load-buffer-border": "black",
"--stream-toot-status-not-last-child-border": "#06070b",
"--left-bar-link": "#cbcbcb",
"--left-bar-link-hover": "#8f93a2",
}
};

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

@ -1,5 +1,9 @@
import { Theme, ThemeTypeEnum } from "../theme-common";
// Color contour: #bfcad5
// Color header font: #2d3134
// Bottom Separator color: #9ca7b3
export const lightTheme: Theme = {
name: "light",
theme_type: ThemeTypeEnum.light,
@ -18,7 +22,7 @@ export const lightTheme: Theme = {
"--btn-primary-color": "#444f74",
"--btn-primary-font-color": "white",
"--status-primary-color": "#fff",
"--status-primary-color": "#2d3134",
"--status-secondary-color": "#292c37",
"--status-links-color": "#d9e1e8",
"--boost-color": "#5098eb",
@ -46,7 +50,7 @@ export const lightTheme: Theme = {
"--status-editor-color": "#14151a",
"--status-editor-footer-background": "#3e455f",
"--status-editor-footer-link-color": "#e2e2e2",
"--selected-status": "#1e2734",
"--selected-status": "#f2f5f8",
"--autosuggest-background": "#ffffff",
"--autosuggest-entry-background": "#0f111a",
@ -56,7 +60,12 @@ export const lightTheme: Theme = {
"--autosuggest-entry-color-hover": "#e2e2e2",
"--autosuggest-entry-handle-color-hover": "#ffffff",
"--scrollbar-color": "#08090d",
//"--scrollbar-color": "#08090d",
"--scrollbar-color": "#0f0",
"--scrollbar-color-2": "#e3eaef",
"--scrollbar-color-3": "#ffffff00",
"--scrollbar-color-second-2": "#e3eaef",
"--scrollbar-color-second-3": "#bfcad5",
"--poll-editor-background": "#fff",
@ -74,9 +83,9 @@ export const lightTheme: Theme = {
"--settings-text-input-foreground": "white",
"--settings-text-input-border": "#32384d",
"--stream-column-icon": "whitesmoke",
"--stream-column-icon-hover": "#acacac",
"--stream-column-border": "#222736",
"--stream-column-icon": "#2d3134",
"--stream-column-icon-hover": "#646b72",
"--stream-column-border": "#9ca7b3",
"--label-bot": "#007281",
"--label-xpost": "#9c5e00",
@ -89,8 +98,8 @@ export const lightTheme: Theme = {
"--status-content-warning-closed-color": "#919bb1",
"--status-content-warning-closed-background": "#171d2b",
"--stream-edition-background": "#222736",
"--stream-column-selector-color": "whitesmoke",
"--stream-edition-background": "#bfcad5",
"--stream-column-selector-color": "#2d3134",
"--stream-new-notification-1": "#96c0ff83",
"--stream-new-notification-2": "#ffffff00",
@ -101,10 +110,19 @@ export const lightTheme: Theme = {
"--stream-remove-cw-color": "white",
"--stream-toot-error": "#ff7171",
"--stream-navigation-button": "#98a6b3",
"--stream-navigation-button-hover": "#5d6268",
"--stream-navigation-button-focus": "#2d3134",
"--stream-navigation-button-focus-hover": "#2d3134",
"--stream-navigation-close": "#2d3134",
"--stream-toot-load-buffer-color-hover": "white",
"--stream-toot-load-buffer-border": "black",
"--stream-toot-status-not-last-child-border": "#06070b",
"--stream-toot-status-not-last-child-border": "#cedbe7",
"--left-bar-link": "#2d3134",
"--left-bar-link-hover": "#8e9092",
}
};

7
src/sass/_commons.scss
View File

@ -25,9 +25,10 @@
}
.flexcroll {
scrollbar-color: $scrollbar-color-thumb #0f111a;
scrollbar-color: #090b10 #0f111a;
//scrollbar-color: $scrollbar-color-thumb #0f111a;
scrollbar-color: var(--scrollbar-color-2) var(--scrollbar-color-3);
scrollbar-width: thin;
scrollbar-face-color: $scrollbar-color;
scrollbar-shadow-color: $scrollbar-color;
@ -43,7 +44,7 @@
&::-webkit-scrollbar-thumb {
-webkit-border-radius: 0px;
border-radius: 0px;
border-radius: 0px;
background: $scrollbar-color-thumb;
}
}

14
src/sass/_variables.scss
View File

@ -51,6 +51,11 @@
--autosuggest-entry-handle-color-hover: #ffffff;
--scrollbar-color: #08090d;
--scrollbar-color-2: #090b10;
--scrollbar-color-3: #0f111a;
--scrollbar-color-second-2: #090b10;
--scrollbar-color-second-3: #0f111a;
--poll-editor-background: #fff;
@ -96,11 +101,20 @@
--stream-toot-error: #ff7171;
--stream-navigation-button: #354060;
--stream-navigation-button-hover: #7a8dc7;
--stream-navigation-button-focus: #f5f5f5;
--stream-navigation-button-focus-hover: #f5f5f5;
--stream-navigation-close: #ffffff;
--stream-toot-load-buffer-color-hover: white;
--stream-toot-load-buffer-border: black;
--stream-toot-status-not-last-child-border: #06070b;
--left-bar-link: #cbcbcb;
--left-bar-link-hover: #8f93a2;
--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%));