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

MetaItem styles updated

Browse source
This commit is contained in:
nklhrstv 2020-03-02 16:40:41 +02:00
parent b644186d2a
commit 1fa6010355
2 changed files with 23 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/common/MetaItem/MetaItem.js
View file

@ -82,12 +82,9 @@ const MetaItem = React.memo(({ className, type, name, poster, posterShape, playI
{ {
(typeof name === 'string' && name.length > 0) || (Array.isArray(options) && options.length > 0) ? (typeof name === 'string' && name.length > 0) || (Array.isArray(options) && options.length > 0) ?
<div className={styles['title-bar-container']}> <div className={styles['title-bar-container']}>
{ <div className={styles['title-label']}>
typeof name === 'string' && name.length > 0 ? {typeof name === 'string' && name.length > 0 ? name : ''}
<div className={styles['title-label']}>{name}</div> </div>
:
null
}
{ {
Array.isArray(options) && options.length > 0 ? Array.isArray(options) && options.length > 0 ?
<Multiselect <Multiselect
@ -97,6 +94,7 @@ const MetaItem = React.memo(({ className, type, name, poster, posterShape, playI
onOpen={onMenuOpen} onOpen={onMenuOpen}
onClose={onMenuClose} onClose={onMenuClose}
onSelect={menuOnSelect} onSelect={menuOnSelect}
tabIndex={-1}
onClick={menuOnClick} onClick={menuOnClick}
/> />
: :

71
src/common/MetaItem/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;
} }
@ -14,39 +16,12 @@
} }
.meta-item-container { .meta-item-container {
position: relative; padding: 0.8rem;
overflow: visible; overflow: visible;
&:hover, &:focus, &:global(.active), &:global(.selected) { &:hover, &:focus, &:global(.active), &:global(.selected) {
outline-style: none; outline-style: none;
background-color: @color-background-light3;
&::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
outline-style: solid;
outline-width: var(--focus-outline-size);
outline-color: var(--color-surfacelighter);
outline-offset: calc(-1 * var(--focus-outline-size));
pointer-events: none;
content: "";
}
.title-bar-container {
background-color: var(--color-surfacelight);
.title-label {
color: var(--color-backgrounddarker);
}
.menu-label-container {
.icon {
fill: var(--color-backgrounddarker);
}
}
}
} }
&.poster-shape-poster { &.poster-shape-poster {
@ -70,7 +45,7 @@
.poster-container { .poster-container {
position: relative; position: relative;
z-index: 0; z-index: 0;
background-color: var(--color-backgroundlight); background-color: @color-background;
.poster-image-layer { .poster-image-layer {
position: absolute; position: absolute;
@ -96,7 +71,7 @@
flex: none; flex: none;
width: 80%; width: 80%;
height: 50%; height: 50%;
fill: var(--color-surfacelight20); fill: @color-background-light3;
} }
} }
@ -113,14 +88,14 @@
display: block; display: block;
width: 100%; width: 100%;
height: 100%; height: 100%;
filter: drop-shadow(0 0 0.5rem var(--color-backgroundlight)); filter: drop-shadow(0 0 0.5rem @color-background);
.play-icon-circle-centered-background { .play-icon-circle-centered-background {
fill: var(--color-surfacelighter); fill: @color-accent4;
} }
.play-icon-circle-centered-icon { .play-icon-circle-centered-icon {
fill: var(--color-primary); fill: @color-surface-light5;
} }
} }
} }
@ -131,11 +106,11 @@
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: -1; z-index: -1;
background-color: var(--color-backgroundlighter); background-color: @color-background-light2;
.progress-bar { .progress-bar {
height: 0.5rem; height: 0.4rem;
background-color: var(--color-primary); background-color: @color-primaryvariant1;
} }
} }
} }
@ -144,39 +119,31 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: flex-end;
height: 2.8rem; height: 2.8rem;
background-color: var(--color-backgroundlight);
overflow: visible; overflow: visible;
.title-label { .title-label {
flex: 1; flex: 1;
max-height: 2.4em; max-height: 2.4em;
padding-left: 0.5rem; padding-left: 0.5rem;
color: var(--color-surfacelighter); color: @color-surface-light5-90;
&:only-child { &:only-child {
padding-right: 0.5rem; padding-right: 0.5rem;
} }
} }
.menu-label-container { .menu-label-container {
flex: none; flex: none;
width: 2.8rem; width: 1.5rem;
height: 2.8rem; height: 2.8rem;
padding: 0.75rem; padding: 1rem 0;
background-color: transparent;
&:hover, &:global(.active) {
background-color: var(--color-surface80);
}
.icon { .icon {
display: block; display: block;
width: 100%; width: 100%;
height: 100%; height: 100%;
fill: var(--color-surfacelighter); fill: @color-surface-light1;
} }
.popup-menu-container { .popup-menu-container {
@ -188,15 +155,15 @@
.multiselect-option-container { .multiselect-option-container {
padding: 0.5rem; padding: 0.5rem;
background-color: var(--color-surfacelighter); background-color: @color-surface-light5;
&:hover, &:focus { &:hover, &:focus {
outline: none; outline: none;
background-color: var(--color-surfacelight); background-color: @color-surface;
} }
.multiselect-option-label { .multiselect-option-label {
color: var(--color-backgrounddarker); color: @color-background-dark5;
} }
} }
} }