Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-11 21:27:05 +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-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 {

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

@ -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;
}
}

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

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

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

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

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

@ -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;

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

@ -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 {

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

@ -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 {

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

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