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

color theme applied to multiselect

Browse source
This commit is contained in:
nklhrstv 2020-03-04 11:59:37 +02:00
parent 1fa6010355
commit 209dad82be
1 changed files with 11 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,3 +1,5 @@
@import (reference) '~stremio-colors/dist/less/stremio-colors.less';
:import('~stremio/common/Popup/styles.less') { :import('~stremio/common/Popup/styles.less') {
popup-menu-container: menu-container; popup-menu-container: menu-container;
} }
@ -7,24 +9,12 @@
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
padding: 0 1rem; padding: 0 1rem;
background-color: var(--color-backgroundlighter); background-color: @color-background;
&:global(.active) {
background-color: var(--color-surfacelight);
.label {
color: var(--color-backgrounddarker);
}
.icon {
fill: var(--color-backgrounddarker);
}
}
.label { .label {
flex: 1; flex: 1;
max-height: 2.4em; max-height: 2.4em;
color: var(--color-surfacelighter); color: @color-surface-light5;
} }
.icon { .icon {
@ -32,7 +22,7 @@
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
margin-left: 1rem; margin-left: 1rem;
fill: var(--color-surfacelighter); fill: @color-surface-light5;
} }
.popup-menu-container { .popup-menu-container {
@ -47,24 +37,22 @@
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
padding: 1rem; padding: 1rem;
background-color: var(--color-backgroundlighter); background-color: @color-background;
&:global(.selected) { &:global(.selected) {
background-color: var(--color-surfacedarker);
.icon { .icon {
display: block; display: block;
} }
} }
&:hover, &:focus { &:hover, &:focus {
background-color: var(--color-surfacedark); background-color: @color-background-light2;
} }
.label { .label {
flex: 1; flex: 1;
max-height: 4.8em; max-height: 4.8em;
color: var(--color-surfacelighter); color: @color-surface-light5;
} }
.icon { .icon {
@ -73,7 +61,7 @@
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
margin-left: 1rem; margin-left: 1rem;
fill: var(--color-surfacelighter); fill: @color-surface-light5;
} }
} }
@ -83,7 +71,7 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 1rem; padding: 1rem;
background-color: var(--color-backgroundlighter); background-color: @color-background;
.label { .label {
flex-grow: 0; flex-grow: 0;
@ -91,7 +79,7 @@
flex-basis: auto; flex-basis: auto;
font-size: 1.2rem; font-size: 1.2rem;
text-align: center; text-align: center;
color: var(--color-surfacelighter); color: @color-surface-light5;
} }
} }
} }