lbry-desktop/ui/scss/component/_card.scss

.card {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--card-max-width);
  background: var(--card-bg);
  box-shadow: var(--box-shadow-layer);
  border-radius: var(--card-radius);
  margin-bottom: var(--card-margin);
  overflow: auto;
}
.card--obscured
{
  position: relative;
}
.card--obscured .card__inner {
  filter: blur( var(--nsfw-blur-intensity) );
}
.card__title-primary,
.card__title-identity,
.card__content,
.card__subtext,
.card__actions {
  padding: 0 var(--card-padding);
}
.card--small {
  .card__title-primary,
  .card__title-identity,
  .card__actions,
  .card__content,
  .card__subtext {
    padding: 0 calc(var(--card-padding) / 2);
  }
}
.card__title-primary {
  margin-top: var(--card-margin);
  margin-bottom: var(--card-margin);
}
.card__title-identity {
  margin-top: $spacing-vertical * 1/3;
  margin-bottom: $spacing-vertical * 1/3;
}
.card__actions {
  margin-top: var(--card-margin);
  margin-bottom: var(--card-margin);
}
.card__actions--bottom {
  margin-top: $spacing-vertical * 1/3;
  margin-bottom: $spacing-vertical * 1/3;
}
.card__actions--form-submit {
  margin-top: $spacing-vertical;
  margin-bottom: var(--card-margin);
}
.card__content {
  margin-top: var(--card-margin);
  margin-bottom: var(--card-margin);
}
$font-size-subtext-multiple: 0.82;
.card__subtext {
  color: var(--color-meta-light);
  font-size: calc( var(--font-size-subtext-multiple) * 1.0em );
  margin-top: $spacing-vertical * 1/3;
  margin-bottom: $spacing-vertical * 1/3;
}
.card__subtext--allow-newlines {
  white-space: pre-wrap;
}
.card__subtext--two-lines {
  height: calc( var(--font-size) * var(--font-size-subtext-multiple) * var(--font-line-height) * 2); /*this is so one line text still has the proper height*/
}
.card-overlay {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  padding: 20px;
  background-color: var(--color-dark-overlay);
  color: #fff;
  display: flex;
  align-items: center;
  font-weight: 600;
}

.card__link {
  display: block;
}
.card--link {
  transition: transform 120ms ease-in-out;
}
.card--link:hover {
  position: relative;
  z-index: 1;
  box-shadow: var(--box-shadow-focus);
  transform: scale(var(--card-link-scaling)) translateX(var(--card-hover-translate));
  transform-origin: 50% 50%;
  overflow-x: visible;
  overflow-y: visible
}
.card--link:hover ~ .card--link {
  transform: translateX(calc(var(--card-hover-translate) * 2));
}

.card__media {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

.card__media--autothumb {
  position: relative
}
.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
}

.card__media--autothumb .card__autothumb__text {
  font-size: 2.0em;
  width: 100%;
  color: #ffffff;
  text-align: center;
  position: absolute;
  top: 36%
}
.card--small {
  width: var(--card-small-width);
  overflow-x: hidden;
  white-space: normal;
}
.card--small .card__media {
  height: calc( var(--card-small-width) * 9 / 16);
}

.card--form {
  width: calc( var(--input-width) + var(--card-padding) * 2);
}

.card__subtitle {
  color: var(--color-help);
  font-size: 0.85em;
  line-height: calc( var(--font-line-height) * 1 / 0.85);
}

.card-series-submit
{
  margin-left: auto;
  margin-right: auto;
  max-width: var(--card-max-width);
  padding: $spacing-vertical / 2;
}

.card-row {
  + .card-row {
    margin-top: $spacing-vertical * 1/3;
  }
}

$padding-top-card-hover-hack: 20px;
$padding-right-card-hover-hack: 30px;

.card-row__items {
  width: 100%;
  overflow: hidden;

  /*hacky way to give space for hover */
  padding-top: $padding-top-card-hover-hack;
  margin-top: -1 * $padding-top-card-hover-hack;
  padding-right: $padding-right-card-hover-hack;
  margin-right: -1 * $padding-right-card-hover-hack;
  > .card {
    vertical-align: top;
    display: inline-block;
  }
  > .card + .card {
    margin-left: $spacing-vertical / 3;
  }
}

.card-row--small {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  min-width: var(--card-small-width);
  margin-right: $spacing-vertical;
}
.card-row__header {
  margin-bottom: $spacing-vertical / 3;
}

.card-row__scrollhouse {
  position: relative;
  /*hacky way to give space for hover */
  padding-right: $padding-right-card-hover-hack;
}

.card-row__nav {
  position: absolute;
  padding: 0 var(--card-margin);
  height: 100%;
  top: calc( $padding-top-card-hover-hack - var(--card-margin) );
}
.card-row__nav .card-row__scroll-button {
  background: var(--card-bg);
  color: var(--color-help);
  box-shadow: var(--box-shadow-layer);
  padding: $spacing-vertical $spacing-vertical / 2;
  position: absolute;
  cursor: pointer;
  left: 0;
  top: 36%;
  z-index: 2;
  opacity: 0.8;
  transition: transform 60ms ease-in-out;

  &:hover {
    opacity: 1.0;
    transform: scale(calc( var(--card-link-scaling) * 1.1));
  }
}
.card-row__nav--left {
  left: 0;
}
.card-row__nav--right {
  right: 0;
}

.card__icon-featured-content {
  color: orangered;
}

/*
if we keep doing things like this, we should add a real grid system, but I'm going to be a selective dick about it - Jeremy
 */
.card-grid {
  $margin-card-grid: $spacing-vertical * 2/3;
  display:flex;
  flex-wrap: wrap;
  > .card {
    width: $width-page-constrained / 2 - $margin-card-grid / 2;
    flex-grow:1;
  }
  > .card:nth-of-type(2n - 1):not(:last-child) {
    margin-right: $margin-card-grid;
  }
}