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

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) ?
<div className={styles['title-bar-container']}>
{
typeof name === 'string' && name.length > 0 ?
<div className={styles['title-label']}>{name}</div>
:
null
}
<div className={styles['title-label']}>
{typeof name === 'string' && name.length > 0 ? name : ''}
</div>
{
Array.isArray(options) && options.length > 0 ?
<Multiselect
@ -97,6 +94,7 @@ const MetaItem = React.memo(({ className, type, name, poster, posterShape, playI
onOpen={onMenuOpen}
onClose={onMenuClose}
onSelect={menuOnSelect}
tabIndex={-1}
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') {
popup-menu-container: menu-container;
}
@ -14,39 +16,12 @@
}
.meta-item-container {
position: relative;
padding: 0.8rem;
overflow: visible;
&:hover, &:focus, &:global(.active), &:global(.selected) {
outline-style: none;
&::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);
}
}
}
background-color: @color-background-light3;
}
&.poster-shape-poster {
@ -70,7 +45,7 @@
.poster-container {
position: relative;
z-index: 0;
background-color: var(--color-backgroundlight);
background-color: @color-background;
.poster-image-layer {
position: absolute;
@ -96,7 +71,7 @@
flex: none;
width: 80%;
height: 50%;
fill: var(--color-surfacelight20);
fill: @color-background-light3;
}
}
@ -113,14 +88,14 @@
display: block;
width: 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 {
fill: var(--color-surfacelighter);
fill: @color-accent4;
}
.play-icon-circle-centered-icon {
fill: var(--color-primary);
fill: @color-surface-light5;
}
}
}
@ -131,11 +106,11 @@
bottom: 0;
left: 0;
z-index: -1;
background-color: var(--color-backgroundlighter);
background-color: @color-background-light2;
.progress-bar {
height: 0.5rem;
background-color: var(--color-primary);
height: 0.4rem;
background-color: @color-primaryvariant1;
}
}
}
@ -144,39 +119,31 @@
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
height: 2.8rem;
background-color: var(--color-backgroundlight);
overflow: visible;
.title-label {
flex: 1;
max-height: 2.4em;
padding-left: 0.5rem;
color: var(--color-surfacelighter);
color: @color-surface-light5-90;
&:only-child {
padding-right: 0.5rem;
}
}
.menu-label-container {
flex: none;
width: 2.8rem;
width: 1.5rem;
height: 2.8rem;
padding: 0.75rem;
background-color: transparent;
&:hover, &:global(.active) {
background-color: var(--color-surface80);
}
padding: 1rem 0;
.icon {
display: block;
width: 100%;
height: 100%;
fill: var(--color-surfacelighter);
fill: @color-surface-light1;
}
.popup-menu-container {
@ -188,15 +155,15 @@
.multiselect-option-container {
padding: 0.5rem;
background-color: var(--color-surfacelighter);
background-color: @color-surface-light5;
&:hover, &:focus {
outline: none;
background-color: var(--color-surfacelight);
background-color: @color-surface;
}
.multiselect-option-label {
color: var(--color-backgrounddarker);
color: @color-background-dark5;
}
}
}