Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-21 07:32:02 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor: style multiselects

Browse source
This commit is contained in:
Tim 2023-06-13 23:07:35 +02:00
parent c5aa6575a8
commit 4a8c7ddfbf
8 changed files with 29 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/App/styles.less
View file

@ -31,6 +31,7 @@
--primary-foreground-color: rgba(255, 255, 255, 1); --primary-foreground-color: rgba(255, 255, 255, 1);
--primary-overlay-color: rgba(255, 255, 255, 0.1); --primary-overlay-color: rgba(255, 255, 255, 0.1);
--primary-accent-color: rgb(123, 91, 245); --primary-accent-color: rgb(123, 91, 245);
--secondary-accent-color: rgba(34, 179, 101, 1);
--border-radius: 0.75rem; --border-radius: 0.75rem;
} }
@ -52,7 +53,7 @@
overflow: hidden; overflow: hidden;
word-break: break-word; word-break: break-word;
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-color: @color-secondaryvariant2-light1 @color-background-dark2; scrollbar-color: var(--primary-overlay-color) transparent;
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
@ -61,15 +62,16 @@
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background-color: @color-secondaryvariant2-light1; border-radius: var(--scroll-bar-size);
background-color: var(--primary-overlay-color);
&:hover { &:hover {
background-color: @color-secondaryvariant2-light2; background-color: var(--primary-accent-color);
} }
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
background-color: @color-background-dark2; background-color: transparent;
} }
svg { svg {

28
src/common/Multiselect/styles.less
View file

@ -11,16 +11,14 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
padding: 0 1rem; height: 2.75rem;
background-color: @color-background; padding: 0 1.5rem;
border-radius: 2.75rem;
background-color: var(--primary-overlay-color);
&:global(.active) { &:global(.active) {
.label {
color: @color-surface-light5-90;
}
.icon { .icon {
color: @color-surface-light5-90; transform: rotate(180deg);
} }
} }
@ -28,7 +26,7 @@
flex: 1; flex: 1;
max-height: 2.4em; max-height: 2.4em;
font-weight: 500; font-weight: 500;
color: @color-secondaryvariant1-90; color: var(--primary-foreground-color);
} }
.icon { .icon {
@ -36,7 +34,8 @@
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
margin-left: 1rem; margin-left: 1rem;
color: @color-secondaryvariant1-90; color: var(--primary-foreground-color);
opacity: 0.4;
} }
.popup-menu-container { .popup-menu-container {
@ -46,12 +45,14 @@
.modal-container, .popup-menu-container { .modal-container, .popup-menu-container {
.menu-container { .menu-container {
border-radius: var(--border-radius);
background-color: var(--tertiary-background-color);
.option-container { .option-container {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
padding: 1rem; padding: 1rem;
background-color: @color-background;
&:global(.selected) { &:global(.selected) {
.icon { .icon {
@ -60,13 +61,13 @@
} }
&:hover, &:focus { &:hover, &:focus {
background-color: @color-background-light2; background-color: var(--primary-overlay-color);
} }
.label { .label {
flex: 1; flex: 1;
max-height: 4.8em; max-height: 4.8em;
color: @color-surface-light5-90; color: var(--primary-foreground-color);
} }
.icon { .icon {
@ -76,7 +77,8 @@
height: 0.5rem; height: 0.5rem;
border-radius: 100%; border-radius: 100%;
margin-left: 1rem; margin-left: 1rem;
background-color: @color-accent3-90; background-color: var(--secondary-accent-color);
opacity: 1;
} }
} }

1
src/routes/Addons/styles.less
View file

@ -84,7 +84,6 @@
flex-grow: 0; flex-grow: 0;
flex-shrink: 1; flex-shrink: 1;
flex-basis: 15rem; flex-basis: 15rem;
height: 3.5rem;
margin-right: 1.5rem; margin-right: 1.5rem;
.multiselect-menu-container { .multiselect-menu-container {

1
src/routes/Discover/styles.less
View file

@ -50,7 +50,6 @@
.select-input { .select-input {
flex: 0 1 15rem; flex: 0 1 15rem;
height: 3.5rem;
&:not(:first-child) { &:not(:first-child) {
margin-left: 1.5rem; margin-left: 1.5rem;

2
src/routes/Library/styles.less
View file

@ -42,7 +42,7 @@
flex-grow: 0; flex-grow: 0;
flex-shrink: 1; flex-shrink: 1;
flex-basis: 15rem; flex-basis: 15rem;
height: 3.5rem; height: 2.75rem;
&:not(:last-child) { &:not(:last-child) {
margin-right: 1.5rem; margin-right: 1.5rem;

7
src/routes/MetaDetails/StreamsList/styles.less
View file

@ -43,20 +43,19 @@
.select-input-container { .select-input-container {
flex: 0 0 auto; flex: 0 0 auto;
height: 3.5rem;
margin: 1em 1em 0 1em; margin: 1em 1em 0 1em;
background: none; background: none;
&:hover, &:focus, &:global(.active) { &:hover, &:focus, &:global(.active) {
background-color: @color-background; background-color: var(--primary-overlay-color);
} }
& >.multiselect-label { & >.multiselect-label {
color: @color-surface-light5-90; color: var(--primary-foreground-color);
} }
& >.multiselect-icon { & >.multiselect-icon {
color: @color-surface-light5-90; color: var(--primary-foreground-color);
} }
.multiselect-menu-container { .multiselect-menu-container {

7
src/routes/MetaDetails/VideosList/SeasonsBar/styles.less
View file

@ -61,19 +61,18 @@
.seasons-popup-label-container { .seasons-popup-label-container {
flex: 0 1 auto; flex: 0 1 auto;
height: 3.5rem;
background: none; background: none;
&:hover, &:focus, &:global(.active) { &:hover, &:focus, &:global(.active) {
background-color: @color-background; background-color: var(--primary-overlay-color);
} }
&>.multiselect-label { &>.multiselect-label {
color: @color-surface-light5-90; color: var(--primary-foreground-color);
} }
&>.multiselect-icon { &>.multiselect-icon {
color: @color-surface-light5-90; color: var(--primary-foreground-color);
} }
.multiselect-menu-container { .multiselect-menu-container {

2
src/routes/Settings/styles.less
View file

@ -219,7 +219,7 @@
} }
.option-input-container { .option-input-container {
padding: 1rem; padding: 1rem 1.5rem;
&.button-container { &.button-container {
justify-content: center; justify-content: center;