From 22f5abd708f746cf136181dcfeb42f80d9e80830 Mon Sep 17 00:00:00 2001 From: Nicolas Constant Date: Tue, 30 Apr 2024 19:43:17 -0400 Subject: [PATCH] better borders --- .../left-side-bar.component.scss | 4 +-- .../stream-overlay.component.scss | 14 ++++---- .../streams-main-display.component.scss | 10 ++++-- src/app/themes/implementations/default.ts | 13 +++++++ src/app/themes/implementations/light.ts | 36 ++++++++++++++----- src/sass/_commons.scss | 7 ++-- src/sass/_variables.scss | 14 ++++++++ 7 files changed, 74 insertions(+), 24 deletions(-) diff --git a/src/app/components/left-side-bar/left-side-bar.component.scss b/src/app/components/left-side-bar/left-side-bar.component.scss index 230efe62..a3afc14d 100644 --- a/src/app/components/left-side-bar/left-side-bar.component.scss +++ b/src/app/components/left-side-bar/left-side-bar.component.scss @@ -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); } } diff --git a/src/app/components/stream/stream-overlay/stream-overlay.component.scss b/src/app/components/stream/stream-overlay/stream-overlay.component.scss index a33eb851..db895bea 100644 --- a/src/app/components/stream/stream-overlay/stream-overlay.component.scss +++ b/src/app/components/stream/stream-overlay/stream-overlay.component.scss @@ -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; diff --git a/src/app/pages/streams-main-display/streams-main-display.component.scss b/src/app/pages/streams-main-display/streams-main-display.component.scss index 96bb0546..022a0cb7 100644 --- a/src/app/pages/streams-main-display/streams-main-display.component.scss +++ b/src/app/pages/streams-main-display/streams-main-display.component.scss @@ -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); } } \ No newline at end of file diff --git a/src/app/themes/implementations/default.ts b/src/app/themes/implementations/default.ts index 6083932a..f4a8d0e0 100644 --- a/src/app/themes/implementations/default.ts +++ b/src/app/themes/implementations/default.ts @@ -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", } }; \ No newline at end of file diff --git a/src/app/themes/implementations/light.ts b/src/app/themes/implementations/light.ts index 84907a5e..3d4aef2f 100644 --- a/src/app/themes/implementations/light.ts +++ b/src/app/themes/implementations/light.ts @@ -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", } }; \ No newline at end of file diff --git a/src/sass/_commons.scss b/src/sass/_commons.scss index 6b7c89fa..254f1348 100644 --- a/src/sass/_commons.scss +++ b/src/sass/_commons.scss @@ -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; } } diff --git a/src/sass/_variables.scss b/src/sass/_variables.scss index 9692feeb..30e75154 100644 --- a/src/sass/_variables.scss +++ b/src/sass/_variables.scss @@ -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%));