lbry-desktop/ui/scss/component/_channel.scss
Sean Yesmunt 2e87b2fd22 odysee
Naomi

comment websockets

increase slow mode time to 5 seconds

fix to prevent duplicate comments

update livestream details

fix channel

pin electron boom

fix rebase

prune unused icons

updating meme

updating meme

update livestream for naomi

fix rebase

DigitalCashNetwork

remove electroboom pin

Slavguns

Joel

So he can edit his claims

add streamTypes param to claimTilesDiscover so following section can search for all types of content

fix typo

update meme

fixes

publish page fixes

pending

fix notifications

fix comments finally

fix claim preview

no mature for simplesite

Revert "no mature for simplesite"

This reverts commit 9f89242d85.

fix livestream preview click

no mature on simple site

try fixing invite page crash

probably needs more changes.
2021-03-26 18:47:28 -04:00

419 lines
8.2 KiB
SCSS

$cover-z-index: 0;
$metadata-z-index: 1;
.channel-cover {
position: relative;
background-image: linear-gradient(to right, #637ad2, #318794 80%);
display: flex;
align-items: flex-end;
box-sizing: content-box;
color: #fff;
}
.channel-cover__custom {
z-index: $cover-z-index;
align-self: flex-start;
position: absolute;
object-fit: cover;
}
.channel-cover,
.channel-cover__custom {
min-height: var(--cover-photo-height);
height: 100%;
width: 100%;
border-top-left-radius: var(--card-radius);
border-top-right-radius: var(--card-radius);
border: 1px sold var(--color-border);
border-bottom: none;
@media (max-width: $breakpoint-small) {
// Yikes
// I, Sean Yesmunt, take full responsibility for this monster
min-height: calc(var(--cover-photo-height) + 2 * var(--spacing-xl) + var(--spacing-m));
}
}
.channel-cover__custom--waiting {
background-color: var(--color-gray-5);
width: 100%;
height: 100%;
position: absolute;
}
.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 {
display: flex;
position: relative;
height: 5rem;
width: 5rem;
background-size: cover;
margin-right: var(--spacing-m);
}
.channel-thumbnail--resolving {
background-color: var(--color-gray-3);
}
.channel-thumbnail--small {
height: 3rem;
width: 3rem;
}
.chanel-thumbnail--waiting {
background-color: var(--color-gray-5);
border-radius: var(--border-radius);
padding-top: 4rem;
padding-left: 1rem;
padding-right: 1rem;
}
.channel__thumbnail--channel-page {
position: absolute;
height: var(--channel-thumbnail-width);
width: var(--channel-thumbnail-width);
left: var(--spacing-m);
top: 4rem;
margin-top: var(--spacing-l);
box-shadow: var(--card-box-shadow);
@media (max-width: $breakpoint-small) {
top: 0;
margin-top: var(--spacing-m);
}
}
.channel-thumbnail__custom {
width: 100%;
object-fit: cover;
font-size: 1px; // To hide the alt text on firefox;
}
.channel-thumbnail__default {
width: 80%;
height: 80%;
margin-left: auto;
margin-right: auto;
align-self: flex-end;
}
.channel-thumbnail,
.channel-thumbnail__custom {
border-radius: var(--card-radius);
}
.channel-thumbnail__default--0 {
background-color: #748ffc;
}
.channel-thumbnail__default--1 {
background-color: #ffa855;
}
.channel-thumbnail__default--2 {
background-color: #339af0;
}
.channel-thumbnail__default--3 {
background-color: #ec8383;
}
.channel-thumbnail__default--4 {
background-color: #ccc;
}
.channel__primary-info {
// Ensure the profile pic/title sit ontop of the default cover background
z-index: $metadata-z-index;
// Jump over the thumbnail photo because it is absolutely positioned
// Then add normal page spacing, _then_ add the actual padding
padding-left: calc(var(--channel-thumbnail-width) + var(--spacing-xl));
padding-right: var(--spacing-m);
padding-bottom: var(--spacing-m);
margin-top: var(--spacing-xl);
min-width: 0;
width: 100%;
@media (max-width: $breakpoint-small) {
padding-left: var(--spacing-m);
margin-top: calc(var(--channel-thumbnail-width) + var(--spacing-l));
}
}
.channel__title {
display: inline;
margin-right: var(--spacing-s);
overflow: hidden;
text-overflow: ellipsis;
font-size: xx-large;
font-weight: var(--font-weight-bold);
// Quick hack to get this to work
// We should have a generic style for "header with button next to it"
.button {
margin-left: var(--spacing-xs);
}
@media (max-width: $breakpoint-small) {
padding-top: var(--spacing-xl);
}
}
.channel__meta {
display: flex;
justify-content: space-between;
align-items: flex-end;
.button {
height: auto;
}
}
.channel__quick-actions {
display: flex;
flex-direction: row;
margin-left: var(--spacing-m);
position: absolute;
top: 0;
right: var(--spacing-m);
margin-top: var(--spacing-m);
z-index: $metadata-z-index;
flex-wrap: wrap;
font-size: var(--font-base);
> .button,
> .button-group .button {
padding: 0 var(--spacing-s);
}
> .button,
> .button-group {
&:not(:last-child) {
margin-right: var(--spacing-m);
}
}
.button-group .button {
&:not(:last-child) {
margin-right: 0;
}
}
@media (max-width: $breakpoint-small) {
flex-direction: column;
> .button,
> .button-group {
margin-right: 0;
margin-bottom: var(--spacing-xs);
margin-left: auto;
// Needed for specificity above
&:not(:last-child) {
margin-right: 0;
}
}
}
}
.channel__edit-thumb {
position: absolute;
top: 0;
left: var(--spacing-l);
margin-top: calc(var(--spacing-m) * 7);
z-index: $metadata-z-index;
> * {
padding: 0 var(--spacing-xs);
&:not(:last-child) {
margin-right: var(--spacing-m);
}
}
@media (max-width: $breakpoint-small) {
margin-top: 0;
.button {
margin-top: var(--spacing-l);
}
}
}
.channel-name--inline {
margin-left: var(--spacing-xs);
}
.menu__list.channel__list {
margin-top: var(--spacing-xs);
margin-left: 0;
padding: 0;
border-radius: var(--border-radius);
background: transparent;
max-height: 15rem;
overflow-y: scroll;
[role='menuitem'] {
margin: 0;
&[data-selected] {
background: transparent;
.channel__list-item,
.channel-staked__wrapper {
background-color: var(--color-card-background-highlighted);
}
}
&:first-child {
.channel__list-item {
border-top: 1px solid var(--color-border);
border-top-left-radius: var(--border-radius);
border-top-right-radius: var(--border-radius);
}
}
&:last-child {
.channel__list-item {
border-bottom-left-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius);
}
}
.channel__list-item {
padding-right: calc(var(--spacing-xl) + var(--spacing-s) * 2);
border-left: 1px solid var(--color-border);
border-right: 1px solid var(--color-border);
}
}
}
.channel__list-item {
display: flex;
align-items: center;
background-color: var(--color-card-background);
padding: var(--spacing-s);
border-bottom: 1px solid var(--color-border);
overflow: hidden;
.channel-thumbnail {
height: 2rem;
width: 2rem;
}
.icon {
color: var(--color-menu-icon);
}
.icon__wrapper {
padding: 0;
height: 2rem;
width: 2rem;
margin-right: var(--spacing-m);
border-radius: var(--border-radius);
}
&:hover {
background-color: var(--color-card-background-highlighted);
}
}
.channel__list-item--selected {
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
.icon--ChevronDown {
margin-left: var(--spacing-l);
}
}
.channel__list-text {
font-weight: var(--font-weight-bold);
color: var(--color-text);
}
.channel__selector {
margin-bottom: var(--spacing-m);
@media (min-width: $breakpoint-small) {
margin-bottom: var(--spacing-l);
}
}
.channel-staked__tooltip {
display: flex;
align-items: center;
line-height: 1rem;
}
.channel-staked__tooltip-text {
margin-left: var(--spacing-xs);
font-size: var(--font-xsmall);
}
.channel-staked__wrapper {
display: flex;
position: absolute;
padding: 0.2rem;
bottom: -0.75rem;
left: -0.8rem;
background-color: var(--color-card-background);
border-radius: 50%;
}
.channel-staked__wrapper--large {
position: relative;
background-color: transparent;
display: inline-block;
bottom: auto;
left: auto;
top: var(--spacing-xs);
margin-left: var(--spacing-s);
padding: 0;
}
.channel-staked__wrapper--inline {
position: relative;
background-color: transparent;
display: inline-block;
bottom: auto;
left: auto;
top: var(--spacing-xs);
padding: 0;
}
.channel-staked__indicator {
margin-left: 2px;
z-index: 3;
fill: var(--color-gray-3);
}
.channel-staked__indicator--controlling {
fill: #00eaff;
}
.channel-staked__amount {
display: inline-block;
font-size: var(--font-xxsmall);
margin-left: var(--spacing-s);
.credit-amount {
color: var(--color-gray-3);
}
}