From 0c2157bd0ae79604b85773f1884dd4f0de3e528e Mon Sep 17 00:00:00 2001 From: benjamin Date: Mon, 9 Mar 2026 16:47:08 +0100 Subject: [PATCH] color palette rework --- .../list/list-item/list-item.component.less | 5 +- .../songs/song-list/song-list.component.less | 13 +++--- .../navigation/filter/filter.component.less | 7 +-- .../navigation/link/link.component.less | 8 ++-- .../navigation/navigation.component.less | 6 +-- .../components/button/button.component.less | 8 +++- .../components/card/card.component.less | 15 ++++-- src/styles/styles.less | 46 ++++++++++++++++--- 8 files changed, 78 insertions(+), 30 deletions(-) diff --git a/src/app/modules/shows/list/list-item/list-item.component.less b/src/app/modules/shows/list/list-item/list-item.component.less index 20ec12b..af771b7 100644 --- a/src/app/modules/shows/list/list-item/list-item.component.less +++ b/src/app/modules/shows/list/list-item/list-item.component.less @@ -10,10 +10,11 @@ } cursor: pointer; + transition: var(--transition); &:hover { - background: var(--primary-color); - color: #fff; + background: var(--hover-background); + color: var(--text); } } diff --git a/src/app/modules/songs/song-list/song-list.component.less b/src/app/modules/songs/song-list/song-list.component.less index 7da8650..8aee505 100644 --- a/src/app/modules/songs/song-list/song-list.component.less +++ b/src/app/modules/songs/song-list/song-list.component.less @@ -9,13 +9,14 @@ } cursor: pointer; + transition: var(--transition); &:hover { - background: var(--primary-color); - color: #fff; + background: var(--hover-background); + color: var(--text); .warning { - color: #fff; + color: var(--danger); } } } @@ -31,13 +32,13 @@ } .neutral { - color: #888; + color: var(--text-soft); } .warning { - color: #ba3500; + color: var(--danger); } .success { - color: #307501; + color: var(--success); } diff --git a/src/app/widget-modules/components/application-frame/navigation/filter/filter.component.less b/src/app/widget-modules/components/application-frame/navigation/filter/filter.component.less index b58870f..e20d2bd 100644 --- a/src/app/widget-modules/components/application-frame/navigation/filter/filter.component.less +++ b/src/app/widget-modules/components/application-frame/navigation/filter/filter.component.less @@ -2,13 +2,14 @@ input { font-size: 16px; background: transparent; border: none; - border-bottom: 1px solid #888; - color: #888; - transition: all 300ms ease-in-out; + border-bottom: 1px solid var(--text-soft); + color: var(--text-soft); + transition: var(--transition); &:focus { outline: none; border-bottom: 1px solid var(--primary-color); + color: var(--text-inverse); } @media screen and (max-width: 500px) { diff --git a/src/app/widget-modules/components/application-frame/navigation/link/link.component.less b/src/app/widget-modules/components/application-frame/navigation/link/link.component.less index 57e2ee4..b1c260e 100644 --- a/src/app/widget-modules/components/application-frame/navigation/link/link.component.less +++ b/src/app/widget-modules/components/application-frame/navigation/link/link.component.less @@ -9,7 +9,7 @@ a { box-sizing: border-box; background: transparent; transition: var(--transition); - border-color: #222; + border-color: transparent; fa-icon { display: inline-block; @@ -24,8 +24,9 @@ a { } &:hover { - opacity: 0.9; - border-bottom: 5px solid #555; + opacity: 1; + color: var(--primary-hover); + border-bottom: 5px solid var(--hover-background); fa-icon { transform: scale(1.2); @@ -35,6 +36,7 @@ a { &.active { border-bottom: 5px solid var(--primary-color); opacity: 1; + color: var(--text-inverse); fa-icon { transform: scale(1.3); diff --git a/src/app/widget-modules/components/application-frame/navigation/navigation.component.less b/src/app/widget-modules/components/application-frame/navigation/navigation.component.less index 801b77e..21fa589 100644 --- a/src/app/widget-modules/components/application-frame/navigation/navigation.component.less +++ b/src/app/widget-modules/components/application-frame/navigation/navigation.component.less @@ -8,12 +8,12 @@ nav { left: 0; right: 0; height: 50px; - background: #222b; - color: #fff; + background: var(--navigation-background); + color: var(--text-inverse); z-index: 1; box-shadow: 0px -5px 20px 4px rgba(0, 0, 0, 0.39), 1px 0px 6px 4px rgba(0, 0, 0, 0.53); backdrop-filter: blur(10px); - transition: all 300ms ease-in-out; + transition: var(--transition); display: flex; align-items: flex-end; diff --git a/src/app/widget-modules/components/button/button.component.less b/src/app/widget-modules/components/button/button.component.less index 7704009..8059cdd 100644 --- a/src/app/widget-modules/components/button/button.component.less +++ b/src/app/widget-modules/components/button/button.component.less @@ -1,5 +1,11 @@ button { - color: #373b44; + color: var(--text); + transition: var(--transition); + + &:hover { + color: var(--primary-active); + } + @media screen and (max-width: 860px) { font-size: 30px; } diff --git a/src/app/widget-modules/components/card/card.component.less b/src/app/widget-modules/components/card/card.component.less index 3c2c396..aa6da2c 100644 --- a/src/app/widget-modules/components/card/card.component.less +++ b/src/app/widget-modules/components/card/card.component.less @@ -3,18 +3,20 @@ .card { margin: 20px; border-radius: 8px; - background: #fffc; + background: var(--surface); backdrop-filter: blur(15px); + border: 1px solid var(--surface-border); overflow: hidden; width: 800px; position: relative; + color: var(--text); @media screen and (max-width: 860px) { width: 100vw; border-radius: 0; - background: #ffff; + background: var(--surface-strong); margin: 0; - color: #000; + color: var(--text); } &.padding { @@ -25,9 +27,9 @@ &.fullscreen { border-radius: 0; - background: #ffff; + background: var(--surface-strong); margin: 0; - color: #000; + color: var(--text); position: fixed; left: 0; right: 0; @@ -44,6 +46,7 @@ margin-bottom: 20px; margin-right: 20px; opacity: 0.7; + color: var(--text); padding-left: 20px; padding-top: 20px; } @@ -54,6 +57,7 @@ margin-bottom: 20px; margin-right: 20px; opacity: 0.7; + color: var(--text-muted); padding-left: 20px; padding-top: 20px; } @@ -68,4 +72,5 @@ right: 10px; top: 15px; opacity: 0.7; + color: var(--text-muted); } diff --git a/src/styles/styles.less b/src/styles/styles.less index ab8a73a..274e35d 100644 --- a/src/styles/styles.less +++ b/src/styles/styles.less @@ -1,8 +1,31 @@ :root { - --color-primary: #4286f4; - --color-primary-light: #639af3; - --primary-color: #4286f4; - --navigation-background: #fffffff1; + --bg-deep: #292e49; + --bg-mid: #536976; + --bg-soft: #bbd2c5; + + --surface: rgba(244, 247, 245, 0.88); + --surface-strong: rgba(255, 255, 255, 0.96); + --surface-dark: rgba(30, 36, 52, 0.72); + --surface-border: rgba(41, 46, 73, 0.16); + + --text: #1f2433; + --text-muted: #5f6b73; + --text-soft: #7a858c; + --text-inverse: #f7fbff; + + --color-primary: #6f8f95; + --color-primary-light: #85a4aa; + --primary-color: #6f8f95; + --primary-hover: #85a4aa; + --primary-active: #5b797e; + --accent-color: #7fd1b9; + + --success: #4e9b6f; + --warning: #d79a55; + --danger: #c96b72; + + --navigation-background: rgba(30, 36, 52, 0.72); + --hover-background: rgba(111, 143, 149, 0.16); --transition: all 300ms ease-in-out; } @@ -15,9 +38,9 @@ body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; font-size: 14px; - color: #333; + color: var(--text); - background: linear-gradient(39deg, #292e49, #536976, #bbd2c5); + background: linear-gradient(39deg, var(--bg-deep), var(--bg-mid), var(--bg-soft)); overflow: auto; } @@ -39,6 +62,15 @@ a { width: 100%; } +.mat-mdc-icon-button { + color: var(--primary-color) !important; + transition: var(--transition); + + &:hover { + color: var(--primary-active) !important; + } +} + .content > *:not(router-outlet) { display: flex; @@ -53,7 +85,7 @@ a { .btn-icon { opacity: 0.2; - transition: all 300ms ease-in-out; + transition: var(--transition); &:hover { opacity: 1;