lbry-desktop/src/renderer/scss/component/_card.scss

.card {
  margin-left: auto;
  margin-right: auto;
  border-radius: var(--card-radius);
  user-select: text;
  display: flex;
  position: relative;
  flex-direction: column;
  max-width: var(--card-max-width);
}

.card > h1 {
  word-wrap: break-word;
}

.card--section {
  background-color: var(--card-bg);
  padding: $spacing-vertical;
  margin-top: $spacing-vertical * 2/3;
  box-shadow: var(--box-shadow-layer);
}

.card--small {
  white-space: normal;

  .card__media {
    padding-top: var(--video-aspect-ratio);
  }

  .card__media-text {
    // for the weird padding required for dynamic height
    // this lets the text sit in the middle instead of the bottom
    margin-top: calc(var(--video-aspect-ratio) * -1);
  }

  .channel-name {
    font-size: 12px;

    @media only screen and (min-width: $medium-breakpoint) {
      font-size: 14px;
      padding-top: 4px;
    }
  }
}

.card--link {
  cursor: pointer;
}

.card--pending {
  opacity: 0.5;
}

.card--wallet-balance {
  background: url('../../../static/img/stripe-background.png') no-repeat;
  background-size: cover;
  color: var(--card-wallet-color);
  justify-content: space-between;

  .card__title,
  .card__subtitle {
    color: var(--card-wallet-color);
  }
}

.card--disabled {
  opacity: 0.3;
  pointer-events: none;
}

.card__media {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-color: var(--color-placeholder);
}

.card__media--no-img {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.card__media--nsfw {
  background-color: var(--color-error);
}

.card__title-identity {
  color: var(--text-color);
}

.card__title-identity--file {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .icon {
    margin: 0 $spacing-vertical * 1/3;
  }
}

.card__title-identity-icons {
  display: flex;
  align-items: center;
  align-self: flex-start;
}

.card__title {
  font-size: 18px;
  color: var(--text-color);
}

.card__title--small {
  font-size: 14px;
  line-height: 18px;
  padding-top: $spacing-vertical / 3;

  @media only screen and (min-width: $large-breakpoint) {
    font-size: 16px;
  }
}

.card__title--file {
  font-family: 'metropolis-bold';
  font-size: 28px;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 5px;
  font-size: 18px;
}

.card__subtitle {
  margin: 0;
  font-size: 14px;
  font-family: 'metropolis-medium';
  color: var(--card-text-color);

  .icon {
    margin-top: $spacing-vertical * 1/6;

    &:not(:first-of-type) {
      margin: 0 $spacing-vertical * 1/3;
    }
  }
}

.card__subtitle-price {
  padding-top: $spacing-vertical * 1/3;
}

.card__meta {
  color: var(--color-help);
  font-size: 14px;
  font-family: 'metropolis-medium';
  padding-top: $spacing-vertical * 2/3;
}

// .card-media__internal__links should always be inside a card
.card {
  .card-media__internal-links {
    position: absolute;
    top: $spacing-vertical * 2/3;
    right: $spacing-vertical * 2/3;
  }
}

.card--small {
  .card-media__internal-links {
    top: $spacing-vertical * 1/3;
    right: $spacing-vertical * 1/3;
  }
}

// Channel info with buttons on the right side
.card__channel-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: $spacing-width 0 0;
}

.card__channel-info--large {
  padding-top: 0;
  padding-bottom: $spacing-vertical * 2/3;
}

.card__content {
  margin-top: $spacing-vertical * 2/3;
}

.card__content--extra-padding {
  margin-top: $spacing-vertical * 3/2;
}

.card__subtext-title {
  color: var(--text-color);
  font-size: calc(var(--font-size-subtext-multiple) * 1.2em);

  &:not(:first-of-type) {
    margin-top: $spacing-vertical * 3/2;
  }
}

.card__subtext {
  font-size: calc(var(--font-size-subtext-multiple) * 1em);
  padding-top: $spacing-vertical * 1/3;
  word-break: break-word;
  font-family: 'metropolis-medium';
}

.card__subtext--small {
  font-size: calc(var(--font-size-subtext-multiple) * 0.8em);
}

.card__actions {
  margin-top: $spacing-vertical * 2/3;
  display: flex;

  &:not(.card__actions--vertical) {
    .btn:nth-child(n + 2),
    // For buttons wrapped in a tooltip
    .tooltip:nth-child(n + 2) {
      margin-left: $spacing-vertical / 3;
    }
  }
}

.card__actions--no-margin {
  margin-top: 0;
}

.card__actions--vertical {
  flex-direction: column;
  margin-top: 0;
  align-items: flex-end;

  .btn:not(:first-child) {
    margin-top: $spacing-vertical * 1/3;
  }
}

.card__actions--center {
  align-items: center;
  justify-content: center;

  .btn {
    margin: 0 $spacing-vertical / 3;
  }
}

.card__actions-top-corner {
  position: absolute;
  top: $spacing-vertical;
  right: $spacing-vertical;
}

.card__actions--end {
  justify-content: flex-end;
}

.card__actions--between {
  justify-content: space-between;
  flex-wrap: wrap;
}

/*
 .card-row is used on the discover page
 It is a list of cards that extend past the right edge of the screen
 There are left/right arrows to scroll the cards and view hidden content
*/
.card-row {
  white-space: nowrap;
  width: 100%;
  padding-top: $spacing-vertical;

  &:first-of-type {
    padding-top: 0;
  }

  &:last-of-type {
    padding-bottom: $spacing-vertical * 2/3;
  }
}

.card-row__header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  // specific padding-left styling is needed here
  // this needs to be used on a page with noPadding
  // doing so allows the content to scroll to the edge of the screen
  padding-left: $spacing-width;
}

.card-row__title {
  display: flex;
  align-items: center;
  font-size: 18px;
  line-height: 24px;

  @media only screen and (min-width: $medium-breakpoint) {
    font-size: 20px;
  }
}

.card-row__scroll-btns {
  display: flex;
  padding-right: $spacing-width;
}

.card-row__scrollhouse {
  padding-top: $spacing-vertical * 2/3;
  overflow: hidden;

  .card {
    display: inline-block;
    vertical-align: top;
    overflow-y: visible;
    // 31 px to handle to padding between cards
    width: calc((100% / 4) - 34px);

    @media only screen and (min-width: $medium-breakpoint) {
      width: calc((100% / 6) - 29px);
    }

    @media only screen and (min-width: $large-breakpoint) {
      width: calc((100% / 8) - 27px);
    }
  }

  .card:not(:first-of-type) {
    margin-left: 20px;
  }

  .card:first-of-type {
    margin-left: $spacing-width;
  }

  .card:last-of-type {
    margin-right: $spacing-width;
  }
}

.card-row__message {
  padding: 0 $spacing-width;
  white-space: normal;
}

/*
  How cards are displayed in lists
*/
.card__list {
  .card {
    display: inline-block;
    vertical-align: top;
    margin-bottom: $spacing-vertical * 3/2;

    @media only screen and (max-width: $medium-breakpoint) {
      width: calc((100% / 4) - (60px / 4)); // 60px === 20px margin-right * three cards

      &:not(:nth-child(4n + 1)) {
        margin-left: 20px;
      }
    }

    @media only screen and (min-width: $medium-breakpoint) and (max-width: $large-breakpoint) {
      width: calc((100% / 6) - (100px / 6));

      &:not(:nth-child(6n + 1)) {
        margin-left: 20px;
      }
    }

    @media only screen and (min-width: $large-breakpoint) {
      width: calc((100% / 8) - (140px / 8));

      &:not(:nth-child(8n + 1)) {
        margin-left: 20px;
      }
    }
  }
}

.card__list--rewards {
  .card {
    display: inline-block;
    width: calc(50% - 10px);
    margin-bottom: 20px;
    vertical-align: top;

    &:not(:nth-child(2n + 1)) {
      margin-left: 20px;
    }
  }
}

.card__success-msg {
  border-left: 2px solid var(--success-msg-border);
  color: var(--success-msg-color);
  background-color: var(--success-msg-bg);
  padding: $spacing-vertical * 1/3;
  margin: $spacing-vertical * 1/3 0;
}

.card__media--autothumb {
  color: red !important;
}

.card__media {
  &.card__media--autothumb.purple {
    background-color: #9c27b0;
  }
  &.card__media--autothumb.red {
    background-color: #e53935;
  }
  &.card__media--autothumb.pink {
    background-color: #e91e63;
  }
  &.card__media--autothumb.indigo {
    background-color: #3f51b5;
  }
  &.card__media--autothumb.blue {
    background-color: #2196f3;
  }
  &.card__media--autothumb.light-blue {
    background-color: #039be5;
  }
  &.card__media--autothumb.cyan {
    background-color: #00acc1;
  }
  &.card__media--autothumb.teal {
    background-color: #009688;
  }
  &.card__media--autothumb.green {
    background-color: #43a047;
  }
  &.card__media--autothumb.yellow {
    background-color: #ffeb3b;
  }
  &.card__media--autothumb.orange {
    background-color: #ffa726;
  }
}