lbry-desktop/src/ui/scss/component/_channel.scss

$cover-z-index: 0;
$metadata-z-index: 1;

.channel-cover {
  background-image: linear-gradient(to right, $lbry-indigo-4, $lbry-cyan-5 80%);
  display: flex;
  align-items: flex-end;
  box-sizing: content-box;
  color: $lbry-white;
}

.channel-cover__custom {
  z-index: $cover-z-index;
  align-self: flex-start;
  position: absolute;
  object-fit: cover;
  filter: brightness(60%);
}

.channel-cover,
.channel-cover__custom {
  height: var(--cover-photo-height);
  width: 100%;
}

.channel-thumbnail {
  position: absolute;
  display: flex;
  left: var(--spacing-main-padding);
  height: var(--channel-thumbnail-size);
  width: var(--channel-thumbnail-size);
  background-size: cover;
  box-shadow: 0px 8px 40px -3px $lbry-black;
}

.channel-thumbnail__custom {
  width: 100%;
  object-fit: cover;
}

.channel-thumbnail__default {
  width: 80%;
  height: 80%;
  margin-left: auto;
  margin-right: auto;
  align-self: flex-end;
  margin-bottom: -1px;
}

.channel-thumbnail,
.channel-thumbnail__custom {
  border-radius: var(--card-radius);
}

.channel-thumbnail__default--1 {
  background-color: $lbry-indigo-3;
}
.channel-thumbnail__default--2 {
  background-color: $lbry-orange-2;
}
.channel-thumbnail__default--3 {
  background-color: $lbry-blue-3;
}
.channel-thumbnail__default--4 {
  background-color: $lbry-red-1;
}

.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
  margin-left: calc(var(--channel-thumbnail-size) + var(--spacing-main-padding));
  padding-left: var(--spacing-vertical-large);
  padding-bottom: var(--spacing-vertical-medium);
}

.channel__title {
  font-size: 3rem;
  font-weight: 800;
}

.channel__url {
  font-size: 1.2rem;
  margin-top: -0.25rem;
  color: rgba($lbry-white, 0.75);
}