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

@import "../global";

$padding-card-horizontal: $spacing-vertical * 2/3;

.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__actions,
.card__content,
.card__subtext {
  padding: 0 $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;
}
.card__title-identity {
  margin-top: $spacing-vertical * 1/3;
  margin-bottom: $spacing-vertical * 1/3;
}
.card__actions {
  margin-top: $spacing-vertical * 2/3;
}
.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: $spacing-vertical * 2/3;
}
.card__content {
  margin-top: $spacing-vertical * 2/3;
  margin-bottom: $spacing-vertical * 2/3;
}
.card__subtext {
  color: $color-meta-light;
  font-size: 0.82em;
  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 * 0.82 * $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);
  transform-origin: 50% 50%;
  overflow-x: visible;
  overflow-y: visible;
}

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

$width-card-small: $spacing-vertical * 10;
$height-card-small: $spacing-vertical * 15;

.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 {
    vertical-align: top;
    display: inline-block;
    margin-right: $spacing-vertical / 3;
  }
  + .card-row {
    margin-top: $spacing-vertical * 1/3;
  }
}
.card-row--small {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;

  /*hacky way to give space for hover */
  padding-left: 20px;
  margin-left: -20px;
  padding-right: 20px;
  margin-right: -20px;
}
.card-row__header {
  margin-bottom: $spacing-vertical / 3;
}