diff --git a/src/app/components/stream/status/status.component.scss b/src/app/components/stream/status/status.component.scss index 45edca6b..319b1f8c 100644 --- a/src/app/components/stream/status/status.component.scss +++ b/src/app/components/stream/status/status.component.scss @@ -34,10 +34,6 @@ } .status-selected { - background-color: #0f111a; - background-color: desaturate(lighten(#0f111a, 5%), 4%); - background-color: #0a0a10; - background-color: #1e2734; background-color: $selected-status; } @@ -80,41 +76,25 @@ padding-top: 1px; } &--bot { - background-color: rgb(0, 225, 255); - background-color: rgb(0, 159, 180); - background-color: rgb(0, 114, 129); + background-color: var(--label-bot); } &--xpost { - background-color: rgb(255, 153, 0); - background-color: rgb(189, 113, 0); - background-color: rgb(156, 94, 0); + background-color: var(--label-xpost); } &--thread { - background-color: rgb(0, 187, 84); - background-color: rgb(0, 136, 61); - background-color: rgb(0, 114, 51); + background-color: var(--label-thread); } &--discuss { - background-color: rgb(90, 0, 143); + background-color: var(--label-discuss); } &--old { - background-color: rgb(150, 0, 0); + background-color: var(--label-old); } &--remote { - background-color: rgb(161, 64, 140); - background-color: rgb(33, 69, 136); - background-color: rgb(38, 77, 148); + background-color: var(--label-remote); } &--edited { - background-color: rgb(167, 0, 153); - background-color: rgb(0, 128, 167); - background-color: rgb(65, 65, 71); - background-color: rgb(144, 184, 0); - background-color: rgb(82, 105, 0); - - background-color: rgb(95, 95, 95); - - // color: black; + background-color: var(--label-edited); } } &__name { @@ -183,13 +163,8 @@ border-radius: 4px; - // color: #6d8fd3; - // color: #7282a1; - // color: #838da1; - color: #919bb1; - // background-color: #273149; - // background-color: #1f273a; - background-color: #171d2b; + color: var(--status-content-warning-closed-color); + background-color: var(--status-content-warning-closed-background); } &--title { diff --git a/src/app/components/stream/stream-statuses/stream-statuses.component.scss b/src/app/components/stream/stream-statuses/stream-statuses.component.scss index 8fc38c3f..c72f1573 100644 --- a/src/app/components/stream/stream-statuses/stream-statuses.component.scss +++ b/src/app/components/stream/stream-statuses/stream-statuses.component.scss @@ -12,7 +12,7 @@ position: relative; z-index: 1; display: inline-block; - border-bottom: 1px solid black; + border-bottom: 1px solid var(--stream-toot-load-buffer-border); padding: 10px; margin: 0; text-align: center; @@ -22,14 +22,14 @@ color: $status-secondary-color; &:hover { - color: white; + color: var(--stream-toot-load-buffer-color-hover); text-decoration: none; } } &__error { padding: 20px 20px 0 20px; - color: rgb(255, 113, 113); + color: var(--stream-toot-error); } &__content { @@ -47,8 +47,7 @@ height: 25px; position: absolute; top: -15px; - background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)); - background: radial-gradient(ellipse at center, rgba(150, 192, 255, 0.514), rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)); + background: radial-gradient(ellipse at center, var(--stream-new-notification-1), var(--stream-new-notification-2), var(--stream-new-notification-3)); transition: all .5s; opacity: 0; @@ -60,7 +59,7 @@ &__status:not(:last-child) { - border: solid #06070b; + border: solid var(--stream-toot-status-not-last-child-border); border-width: 0 0 1px 0; } &__remove-cw { @@ -72,13 +71,7 @@ padding: 5px; height: 45px; - &--button { - - - // width: calc(80%); - // margin-left: 40%; - // transform: translateX(-40%); - + &--button { transition: all .2s; text-decoration: none; padding: 5px 5px; @@ -88,17 +81,13 @@ border: 3px $status-secondary-color double; border: 0; - background-color: var(--color-secondary); background-color: $status-secondary-color; // background-color: rgb(238, 238, 238); - color: white; + color: var(--stream-remove-cw-color); &:hover{ - background-color: $status-secondary-color; - background-color: rgb(238, 238, 238); - color: black; - - //border: 3px $hover-color double; + background-color: var(--stream-remove-cw-background-hover); + color: var(--stream-remove-cw-color-hover); } } } diff --git a/src/app/components/stream/stream.component.scss b/src/app/components/stream/stream.component.scss index 1d083f79..e5b45f00 100644 --- a/src/app/components/stream/stream.component.scss +++ b/src/app/components/stream/stream.component.scss @@ -20,7 +20,7 @@ &__stream-header { position: relative; width: $stream-column-width; - border-bottom: 1px solid #222736; + border-bottom: 1px solid var(--stream-column-border); } &__open-menu { width: $stream-header-height - 10px; @@ -31,11 +31,10 @@ right: 5px; &:hover &--icon { - color: darken(whitesmoke, 30); + color: var(--stream-column-icon-hover); } &--icon { - color: whitesmoke; // float: left; - // position: relative; + color: var(--stream-column-icon); position: absolute; top: 4px; left: 8px; diff --git a/src/app/themes/implementations/default.ts b/src/app/themes/implementations/default.ts index 53f1c8eb..201ccd5d 100644 --- a/src/app/themes/implementations/default.ts +++ b/src/app/themes/implementations/default.ts @@ -72,5 +72,35 @@ export const defaultTheme: Theme = { "--settings-text-input-background": "#242836", "--settings-text-input-foreground": "white", "--settings-text-input-border": "#32384d", + + "--stream-column-icon": "whitesmoke", + "--stream-column-icon-hover": "#acacac", + "--stream-column-border": "#222736", + + "--label-bot": "#007281", + "--label-xpost": "#9c5e00", + "--label-thread": "#007233", + "--label-discuss": "#5a008f", + "--label-old": "#960000", + "--label-remote": "#264d94", + "--label-edited": "#5f5f5f", + + "--status-content-warning-closed-color": "#919bb1", + "--status-content-warning-closed-background": "#171d2b", + + "--stream-new-notification-1": "#96c0ff83", + "--stream-new-notification-2": "#ffffff00", + "--stream-new-notification-3": "#ffffff00", + + "--stream-remove-cw-background-hover": "#eeeeee", + "--stream-remove-cw-color-hover": "black", + "--stream-remove-cw-color": "white", + + "--stream-toot-error": "#ff7171", + + "--stream-toot-load-buffer-color-hover": "white", + "--stream-toot-load-buffer-border": "black", + + "--stream-toot-status-not-last-child-border": "#06070b", } }; \ No newline at end of file diff --git a/src/app/themes/implementations/light.ts b/src/app/themes/implementations/light.ts index d7f89a4f..d46ac014 100644 --- a/src/app/themes/implementations/light.ts +++ b/src/app/themes/implementations/light.ts @@ -8,8 +8,9 @@ export const lightTheme: Theme = { "--font-color-secondary": "#bfbfbf", "--font-link-primary": "#595c67", "--font-link-primary-hover": "#8f93a2", - "--color-primary": "#141824", - "--color-secondary": "#090b10", + + "--color-primary": "#ffffff", + "--color-secondary": "#e6ebf0", "--column-color": "#0f111a", "--column-header-background-color": "#0c0c10", @@ -18,7 +19,7 @@ export const lightTheme: Theme = { "--btn-primary-color": "#444f74", "--btn-primary-font-color": "white", "--status-primary-color": "#fff", - "--status-secondary-color": "#4e5572", + "--status-secondary-color": "#292c37", "--status-links-color": "#d9e1e8", "--boost-color": "#5098eb", "--update-color": "#95e470", @@ -29,7 +30,7 @@ export const lightTheme: Theme = { "--button-color-hover": "white", "--button-border-color": "#303957", - "--column-background": "#0f111a", + "--column-background": "#f6f7f9", "--card-border-color": "#2b344d", @@ -72,5 +73,35 @@ export const lightTheme: Theme = { "--settings-text-input-background": "#242836", "--settings-text-input-foreground": "white", "--settings-text-input-border": "#32384d", + + "--stream-column-icon": "whitesmoke", + "--stream-column-icon-hover": "#acacac", + "--stream-column-border": "#222736", + + "--label-bot": "#007281", + "--label-xpost": "#9c5e00", + "--label-thread": "#007233", + "--label-discuss": "#5a008f", + "--label-old": "#960000", + "--label-remote": "#264d94", + "--label-edited": "#5f5f5f", + + "--status-content-warning-closed-color": "#919bb1", + "--status-content-warning-closed-background": "#171d2b", + + "--stream-new-notification-1": "#96c0ff83", + "--stream-new-notification-2": "#ffffff00", + "--stream-new-notification-3": "#ffffff00", + + "--stream-remove-cw-background-hover": "#eeeeee", + "--stream-remove-cw-color-hover": "black", + "--stream-remove-cw-color": "white", + + "--stream-toot-error": "#ff7171", + + "--stream-toot-load-buffer-color-hover": "white", + "--stream-toot-load-buffer-border": "black", + + "--stream-toot-status-not-last-child-border": "#06070b", } }; \ No newline at end of file diff --git a/src/sass/_variables.scss b/src/sass/_variables.scss index 745f2696..23184096 100644 --- a/src/sass/_variables.scss +++ b/src/sass/_variables.scss @@ -68,7 +68,35 @@ --settings-text-input-foreground: white; --settings-text-input-border: #32384d; + --stream-column-icon: whitesmoke; + --stream-column-icon-hover: #acacac; //darken(whitesmoke, 30); + --stream-column-border: #222736; + --label-bot: #007281; + --label-xpost: #9c5e00; + --label-thread: #007233; + --label-discuss: #5a008f; + --label-old: #960000; + --label-remote: #264d94; + --label-edited: #5f5f5f; + + --status-content-warning-closed-color: #919bb1; + --status-content-warning-closed-background: #171d2b; + + --stream-new-notification-1: #96c0ff83; + --stream-new-notification-2: #ffffff00; + --stream-new-notification-3: #ffffff00; + + --stream-remove-cw-background-hover: #eeeeee; + --stream-remove-cw-color-hover: black; + --stream-remove-cw-color: white; + + --stream-toot-error: #ff7171; + + --stream-toot-load-buffer-color-hover: white; + --stream-toot-load-buffer-border: black; + + --stream-toot-status-not-last-child-border: #06070b; --color-primary-lighter-5: hsl(from var(var(--color-primary)) h s calc(l + 5%));