From 4a8c7ddfbf3a24c3e543a8e5a8d2ea9311290c01 Mon Sep 17 00:00:00 2001 From: Tim Date: Tue, 13 Jun 2023 23:07:35 +0200 Subject: [PATCH] refactor: style multiselects --- src/App/styles.less | 10 ++++--- src/common/Multiselect/styles.less | 28 ++++++++++--------- src/routes/Addons/styles.less | 1 - src/routes/Discover/styles.less | 1 - src/routes/Library/styles.less | 2 +- .../MetaDetails/StreamsList/styles.less | 7 ++--- .../VideosList/SeasonsBar/styles.less | 7 ++--- src/routes/Settings/styles.less | 2 +- 8 files changed, 29 insertions(+), 29 deletions(-) diff --git a/src/App/styles.less b/src/App/styles.less index 996441475..7892a98d4 100644 --- a/src/App/styles.less +++ b/src/App/styles.less @@ -31,6 +31,7 @@ --primary-foreground-color: rgba(255, 255, 255, 1); --primary-overlay-color: rgba(255, 255, 255, 0.1); --primary-accent-color: rgb(123, 91, 245); + --secondary-accent-color: rgba(34, 179, 101, 1); --border-radius: 0.75rem; } @@ -52,7 +53,7 @@ overflow: hidden; word-break: break-word; scrollbar-width: thin; - scrollbar-color: @color-secondaryvariant2-light1 @color-background-dark2; + scrollbar-color: var(--primary-overlay-color) transparent; } ::-webkit-scrollbar { @@ -61,15 +62,16 @@ } ::-webkit-scrollbar-thumb { - background-color: @color-secondaryvariant2-light1; + border-radius: var(--scroll-bar-size); + background-color: var(--primary-overlay-color); &:hover { - background-color: @color-secondaryvariant2-light2; + background-color: var(--primary-accent-color); } } ::-webkit-scrollbar-track { - background-color: @color-background-dark2; + background-color: transparent; } svg { diff --git a/src/common/Multiselect/styles.less b/src/common/Multiselect/styles.less index b838ea069..0554ddf69 100644 --- a/src/common/Multiselect/styles.less +++ b/src/common/Multiselect/styles.less @@ -11,16 +11,14 @@ display: flex; flex-direction: row; align-items: center; - padding: 0 1rem; - background-color: @color-background; + height: 2.75rem; + padding: 0 1.5rem; + border-radius: 2.75rem; + background-color: var(--primary-overlay-color); &:global(.active) { - .label { - color: @color-surface-light5-90; - } - .icon { - color: @color-surface-light5-90; + transform: rotate(180deg); } } @@ -28,7 +26,7 @@ flex: 1; max-height: 2.4em; font-weight: 500; - color: @color-secondaryvariant1-90; + color: var(--primary-foreground-color); } .icon { @@ -36,7 +34,8 @@ width: 1rem; height: 1rem; margin-left: 1rem; - color: @color-secondaryvariant1-90; + color: var(--primary-foreground-color); + opacity: 0.4; } .popup-menu-container { @@ -46,12 +45,14 @@ .modal-container, .popup-menu-container { .menu-container { + border-radius: var(--border-radius); + background-color: var(--tertiary-background-color); + .option-container { display: flex; flex-direction: row; align-items: center; padding: 1rem; - background-color: @color-background; &:global(.selected) { .icon { @@ -60,13 +61,13 @@ } &:hover, &:focus { - background-color: @color-background-light2; + background-color: var(--primary-overlay-color); } .label { flex: 1; max-height: 4.8em; - color: @color-surface-light5-90; + color: var(--primary-foreground-color); } .icon { @@ -76,7 +77,8 @@ height: 0.5rem; border-radius: 100%; margin-left: 1rem; - background-color: @color-accent3-90; + background-color: var(--secondary-accent-color); + opacity: 1; } } diff --git a/src/routes/Addons/styles.less b/src/routes/Addons/styles.less index c21f64c29..e8d71b29d 100644 --- a/src/routes/Addons/styles.less +++ b/src/routes/Addons/styles.less @@ -84,7 +84,6 @@ flex-grow: 0; flex-shrink: 1; flex-basis: 15rem; - height: 3.5rem; margin-right: 1.5rem; .multiselect-menu-container { diff --git a/src/routes/Discover/styles.less b/src/routes/Discover/styles.less index e5cf9dfe5..82b5f0c00 100644 --- a/src/routes/Discover/styles.less +++ b/src/routes/Discover/styles.less @@ -50,7 +50,6 @@ .select-input { flex: 0 1 15rem; - height: 3.5rem; &:not(:first-child) { margin-left: 1.5rem; diff --git a/src/routes/Library/styles.less b/src/routes/Library/styles.less index d28bc5ca4..e89aef06e 100644 --- a/src/routes/Library/styles.less +++ b/src/routes/Library/styles.less @@ -42,7 +42,7 @@ flex-grow: 0; flex-shrink: 1; flex-basis: 15rem; - height: 3.5rem; + height: 2.75rem; &:not(:last-child) { margin-right: 1.5rem; diff --git a/src/routes/MetaDetails/StreamsList/styles.less b/src/routes/MetaDetails/StreamsList/styles.less index d21f6f2c1..afdbcd96d 100644 --- a/src/routes/MetaDetails/StreamsList/styles.less +++ b/src/routes/MetaDetails/StreamsList/styles.less @@ -43,20 +43,19 @@ .select-input-container { flex: 0 0 auto; - height: 3.5rem; margin: 1em 1em 0 1em; background: none; &:hover, &:focus, &:global(.active) { - background-color: @color-background; + background-color: var(--primary-overlay-color); } & >.multiselect-label { - color: @color-surface-light5-90; + color: var(--primary-foreground-color); } & >.multiselect-icon { - color: @color-surface-light5-90; + color: var(--primary-foreground-color); } .multiselect-menu-container { diff --git a/src/routes/MetaDetails/VideosList/SeasonsBar/styles.less b/src/routes/MetaDetails/VideosList/SeasonsBar/styles.less index f5f5e3527..56113fde7 100644 --- a/src/routes/MetaDetails/VideosList/SeasonsBar/styles.less +++ b/src/routes/MetaDetails/VideosList/SeasonsBar/styles.less @@ -61,19 +61,18 @@ .seasons-popup-label-container { flex: 0 1 auto; - height: 3.5rem; background: none; &:hover, &:focus, &:global(.active) { - background-color: @color-background; + background-color: var(--primary-overlay-color); } &>.multiselect-label { - color: @color-surface-light5-90; + color: var(--primary-foreground-color); } &>.multiselect-icon { - color: @color-surface-light5-90; + color: var(--primary-foreground-color); } .multiselect-menu-container { diff --git a/src/routes/Settings/styles.less b/src/routes/Settings/styles.less index cbd940c73..dbdb51f71 100644 --- a/src/routes/Settings/styles.less +++ b/src/routes/Settings/styles.less @@ -219,7 +219,7 @@ } .option-input-container { - padding: 1rem; + padding: 1rem 1.5rem; &.button-container { justify-content: center;