LBRYFoundation/lbry-desktop
1
0
Fork 0
mirror of https://github.com/LBRYFoundation/lbry-desktop.git synced 2025-09-11 21:19:43 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

only add gradient to bottom of channel cover

Browse source
This commit is contained in:
Sean Yesmunt 2020-06-18 11:28:30 -04:00
parent fa246a7f1f
commit 7f6c5c544e
2 changed files with 19 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
ui/page/channel/view.jsx
View file

@ -186,6 +186,7 @@ function ChannelPage(props: Props) {
)} )}
</div> </div>
</div> </div>
<div className="channel-cover__gradient" />
</header> </header>
<Tabs onChange={onTabChange} index={tabIndex}> <Tabs onChange={onTabChange} index={tabIndex}>
<TabList className="tabs__list--channel-page"> <TabList className="tabs__list--channel-page">

19
ui/scss/component/_channel.scss
View file

@ -15,7 +15,6 @@ $metadata-z-index: 1;
align-self: flex-start; align-self: flex-start;
position: absolute; position: absolute;
object-fit: cover; object-fit: cover;
filter: brightness(60%);
} }
.channel-cover, .channel-cover,
@ -32,6 +31,24 @@ $metadata-z-index: 1;
} }
} }
.channel-cover__gradient {
width: 100%;
height: 100%;
position: absolute;
&:after {
position: absolute;
bottom: 0;
opacity: 1;
content: '';
height: 100%;
left: 0;
right: 0;
width: 100%;
background: linear-gradient(0deg, #0d0d0d 0, transparent 65%);
}
}
.channel-thumbnail { .channel-thumbnail {
display: flex; display: flex;
height: 5rem; height: 5rem;