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

@import "../global";

$padding-card-horizontal: $spacing-vertical * 2/3;
$translate-card-hover: 10px;
$width-card-small: $spacing-vertical * 10;

.card {
  margin-left: auto;
  margin-right: auto;
  max-width: $width-page-constrained;
  background: $color-bg;
  box-shadow: $box-shadow-layer;
  border-radius: 2px;
  margin-bottom: $spacing-vertical * 2/3;
  overflow: auto;
}
.card--obscured
{
  position: relative;
}
.card--obscured .card__inner {
  filter: blur($blur-intensity-nsfw);
}
.card__title-primary,
.card__title-identity,
.card__content,
.card__subtext,
.card__actions {
  padding-left: $padding-card-horizontal;
  padding-right: $padding-card-horizontal;
}
.card--small {
  .card__title-primary,
  .card__title-identity,
  .card__actions,
  .card__content,
  .card__subtext {
    padding: 0 $padding-card-horizontal / 2;
  }
}
.card__title-primary {
  margin-top: $spacing-vertical * 2/3;
  margin-bottom: $spacing-vertical * 2/3;
}
.card__title-identity {
  margin-top: $spacing-vertical * 1/3;
  margin-bottom: $spacing-vertical * 1/3;
}
.card__actions {
  margin-top: $spacing-vertical * 2/3;
  margin-bottom: $spacing-vertical * 2/3;
}
.card__content {
  margin-top: $spacing-vertical * 2/3;
  margin-bottom: $spacing-vertical * 2/3;
}
$font-size-subtext-multiple: 0.82;
.card__subtext {
  color: $color-meta-light;
  font-size: $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: $font-size * $font-size-subtext-multiple * $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: rgba(128, 128, 128, 0.8);
  color: #fff;
  display: flex;
  align-items: center;
  font-weight: 600;
}

$card-link-scaling: 1.1;
.card__link {
  display: block;
}
.card--link {
  transition: transform 120ms ease-in-out;
}
.card--link:hover {
  position: relative;
  z-index: 1;
  box-shadow: $box-shadow-focus;
  transform: scale($card-link-scaling) translateX($translate-card-hover);
  transform-origin: 50% 50%;
  overflow-x: visible;
  overflow-y: visible
}
.card--link:hover ~ .card--link {
  transform: translateX($translate-card-hover * 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: $width-card-small;
  overflow-x: hidden;
  white-space: normal;
}
.card--small .card__media {
  height: $width-card-small * 9 / 16;
}

.card--form {
  width: $width-input-text + $padding-card-horizontal * 2;
}

.card__subtitle {
  color: $color-help;
  font-size: 0.85em;
  line-height: $font-line-height * 1 / 0.85;
}

.card-series-submit
{
  margin-left: auto;
  margin-right: auto;
  max-width: $width-page-constrained;
  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;
  /*hacky way to give space for hover */
  padding-right: $padding-right-card-hover-hack;
}
.card-row__header {
  margin-bottom: $spacing-vertical / 3;
}

.card-row__scrollhouse {
  position: relative;
}

.card-row__nav {
  position: absolute;
  padding: 0 $spacing-vertical * 2 / 3;
  height: 100%;
  top: $padding-top-card-hover-hack - $spacing-vertical * 2 / 3;
}
.card-row__nav .card-row__scroll-button {
  background: $color-bg;
  color: $color-help;
  box-shadow: $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($card-link-scaling * 1.1)
  }
}
.card-row__nav--left {
  left: 0;
}
.card-row__nav--right {
  right: -1 * $padding-right-card-hover-hack;
}

.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;
  }
}