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

refactor(MetaItem): update style

Browse source
This commit is contained in:
Tim 2023-10-24 14:41:35 +02:00
parent 863f0c75b3
commit 293bd7dce5
2 changed files with 27 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -87,6 +87,7 @@ const MetaItem = React.memo(({ className, type, name, poster, posterShape, progr
onPlayClick ?
<div title={t('CONTINUE_WATCHING')} className={styles['play-icon-layer']} onClick={onPlayClick}>
<Icon className={styles['play-icon']} name={'play'} />
<div className={styles['play-icon-outer']} />
<div className={styles['play-icon-background']} />
</div>
:

35
src/common/MetaItem/styles.less
View file

@ -18,7 +18,7 @@
play-icon-circle-centered-icon: icon;
}
@play-icon-size: 3.75rem;
@play-icon-size: 4rem;
.meta-item-container {
padding: 1rem;
@ -40,7 +40,9 @@
}
.play-icon-layer {
color: var(--secondary-accent-color);
.play-icon-outer {
color: transparent;
}
.play-icon-background {
background-color: var(--secondary-accent-color);
@ -162,19 +164,29 @@
justify-content: center;
height: @play-icon-size;
width: @play-icon-size;
color: var(--primary-foreground-color);
box-shadow: 0 0 0 0.15rem currentColor;
border-radius: 100%;
transition: color 0.1s ease-in;
transition: transform 0.1s ease-out;
.play-icon {
z-index: 1;
z-index: 2;
position: relative;
height: 2rem;
width: 2rem;
height: 2.25rem;
width: 2.25rem;
color: var(--primary-foreground-color);
}
.play-icon-outer {
z-index: 1;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
color: var(--primary-foreground-color);
box-shadow: 0 0 0 0.15rem currentColor inset;
border-radius: 100%;
transition: color 0.1s ease-in;
}
.play-icon-background {
z-index: 0;
position: absolute;
@ -183,9 +195,14 @@
left: 0;
right: 0;
background-color: var(--primary-background-color);
border-radius: 100%;
opacity: 0.4;
transition: all 0.1s ease-in;
}
&:hover {
transform: scale(1.075);
}
}
.progress-bar-layer {