lbry-desktop/ui/scss/component/_card.scss
2017-10-11 21:37:36 -06:00

294 lines
6.2 KiB
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;
user-select: text;
//below added to prevent scrollbar on long titles when show page loads, would prefer a cleaner CSS solution
overflow-x: hidden;
}
.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-primary .meta {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.card__title-identity {
margin: 16px 0;
}
.card__actions {
margin-top: var(--card-margin);
margin-bottom: var(--card-margin);
user-select: none;
}
.card__actions--bottom {
margin-top: $spacing-vertical * 1/3;
margin-bottom: $spacing-vertical * 1/3;
border-top: var(--divider);
}
.card__actions--form-submit {
margin-top: $spacing-vertical;
margin-bottom: var(--card-margin);
}
.card__action--right {
float: right;
}
.card__content {
margin-top: var(--card-margin);
margin-bottom: var(--card-margin);
table:not(:last-child) {
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;
cursor: pointer;
}
.card--link {
transition: transform 0.2s var(--animation-style);
}
.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__indicators {
float: right;
}
.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: 16px;
}
}
.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: 16px;
}
.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 0.2s var(--animation-style);
&: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;
}
/*
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;
}
}