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

295 lines
6.2 KiB
SCSS
Raw Normal View History

2017-04-10 14:32:40 +02:00
.card {
margin-left: auto;
margin-right: auto;
2017-08-18 07:37:35 +02:00
max-width: var(--card-max-width);
background: var(--card-bg);
box-shadow: var(--box-shadow-layer);
2017-08-18 07:37:35 +02:00
border-radius: var(--card-radius);
margin-bottom: var(--card-margin);
2017-04-10 14:32:40 +02:00
overflow: auto;
2017-10-12 05:37:36 +02:00
user-select: text;
2017-09-17 22:33:52 +02:00
//below added to prevent scrollbar on long titles when show page loads, would prefer a cleaner CSS solution
overflow-x: hidden;
2017-04-10 14:32:40 +02:00
}
.card--obscured
{
position: relative;
}
.card--obscured .card__inner {
2017-08-18 07:37:35 +02:00
filter: blur( var(--nsfw-blur-intensity) );
2017-04-10 14:32:40 +02:00
}
2017-07-20 00:13:19 +02:00
.card__title-primary,
.card__title-identity,
.card__content,
2017-08-26 05:21:26 +02:00
.card__subtext,
.card__actions {
2017-08-18 07:37:35 +02:00
padding: 0 var(--card-padding);
2017-07-20 00:13:19 +02:00
}
.card--small {
.card__title-primary,
.card__title-identity,
.card__actions,
.card__content,
.card__subtext {
2017-08-19 03:09:45 +02:00
padding: 0 calc(var(--card-padding) / 2);
2017-07-20 00:13:19 +02:00
}
}
.card__title-primary {
2017-08-18 07:37:35 +02:00
margin-top: var(--card-margin);
2017-09-07 00:03:09 +02:00
margin-bottom: var(--card-margin);
2017-04-10 14:32:40 +02:00
}
2017-09-17 18:43:18 +02:00
.card__title-primary .meta {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
2017-04-10 14:32:40 +02:00
.card__title-identity {
2017-10-10 06:53:50 +02:00
margin: 16px 0;
2017-04-10 14:32:40 +02:00
}
.card__actions {
2017-08-18 07:37:35 +02:00
margin-top: var(--card-margin);
2017-09-07 00:03:09 +02:00
margin-bottom: var(--card-margin);
2017-10-12 05:37:36 +02:00
user-select: none;
2017-04-10 14:32:40 +02:00
}
.card__actions--bottom {
margin-top: $spacing-vertical * 1/3;
margin-bottom: $spacing-vertical * 1/3;
2017-10-03 06:08:25 +02:00
border-top: var(--divider);
2017-04-10 14:32:40 +02:00
}
.card__actions--form-submit {
margin-top: $spacing-vertical;
2017-08-18 07:37:35 +02:00
margin-bottom: var(--card-margin);
2017-04-10 14:32:40 +02:00
}
.card__action--right {
float: right;
}
2017-04-10 14:32:40 +02:00
.card__content {
2017-08-18 07:37:35 +02:00
margin-top: var(--card-margin);
margin-bottom: var(--card-margin);
2017-09-17 22:33:52 +02:00
table:not(:last-child) {
margin-bottom: var(--card-margin);
}
2017-04-10 14:32:40 +02:00
}
2017-07-29 20:12:13 +02:00
$font-size-subtext-multiple: 0.82;
2017-04-10 14:32:40 +02:00
.card__subtext {
2017-08-18 07:37:35 +02:00
color: var(--color-meta-light);
font-size: calc( var(--font-size-subtext-multiple) * 1.0em );
2017-07-17 16:50:07 +02:00
margin-top: $spacing-vertical * 1/3;
margin-bottom: $spacing-vertical * 1/3;
2017-04-10 14:32:40 +02:00
}
2017-04-13 20:52:26 +02:00
.card__subtext--allow-newlines {
white-space: pre-wrap;
}
2017-04-10 14:32:40 +02:00
.card__subtext--two-lines {
2017-08-18 07:37:35 +02:00
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*/
2017-04-10 14:32:40 +02:00
}
.card-overlay {
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
padding: 20px;
2017-08-19 01:35:52 +02:00
background-color: var(--color-dark-overlay);
2017-04-10 14:32:40 +02:00
color: #fff;
display: flex;
align-items: center;
font-weight: 600;
}
2017-04-12 04:01:45 +02:00
.card__link {
2017-04-10 14:32:40 +02:00
display: block;
cursor: pointer;
2017-04-12 04:01:45 +02:00
}
2017-07-11 21:41:37 +02:00
.card--link {
transition: transform 0.2s var(--animation-style);
2017-07-11 21:41:37 +02:00
}
2017-04-12 04:01:45 +02:00
.card--link:hover {
position: relative;
z-index: 1;
2017-08-18 07:37:35 +02:00
box-shadow: var(--box-shadow-focus);
transform: scale(var(--card-link-scaling)) translateX(var(--card-hover-translate));
2017-04-12 04:01:45 +02:00
transform-origin: 50% 50%;
overflow-x: visible;
overflow-y: visible
}
.card--link:hover ~ .card--link {
2017-08-19 01:35:52 +02:00
transform: translateX(calc(var(--card-hover-translate) * 2));
2017-04-12 04:01:45 +02:00
}
.card__media {
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
2017-04-10 14:32:40 +02:00
}
2017-07-14 01:18:28 +02:00
.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;
}
2017-04-10 14:32:40 +02:00
.card--small {
2017-08-18 07:37:35 +02:00
width: var(--card-small-width);
2017-04-12 04:01:45 +02:00
overflow-x: hidden;
white-space: normal;
2017-04-10 14:32:40 +02:00
}
.card--small .card__media {
2017-08-18 07:37:35 +02:00
height: calc( var(--card-small-width) * 9 / 16);
2017-04-10 14:32:40 +02:00
}
2017-07-19 01:00:13 +02:00
.card--form {
2017-08-19 01:35:52 +02:00
width: calc( var(--input-width) + var(--card-padding) * 2);
2017-07-19 01:00:13 +02:00
}
2017-04-10 14:32:40 +02:00
.card__subtitle {
2017-08-18 07:37:35 +02:00
color: var(--color-help);
2017-04-10 14:32:40 +02:00
font-size: 0.85em;
2017-08-18 07:37:35 +02:00
line-height: calc( var(--font-line-height) * 1 / 0.85);
2017-04-10 14:32:40 +02:00
}
.card-series-submit
{
margin-left: auto;
margin-right: auto;
2017-08-18 07:37:35 +02:00
max-width: var(--card-max-width);
2017-04-10 14:32:40 +02:00
padding: $spacing-vertical / 2;
}
.card-row {
+ .card-row {
margin-top: $spacing-vertical * 1/3;
}
}
2017-08-18 07:37:35 +02:00
2017-07-29 20:12:13 +02:00
$padding-top-card-hover-hack: 20px;
2017-07-29 20:34:02 +02:00
$padding-right-card-hover-hack: 30px;
2017-08-18 07:37:35 +02:00
.card-row__items {
2017-07-29 20:12:13 +02:00
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;
2017-07-29 20:34:02 +02:00
padding-right: $padding-right-card-hover-hack;
margin-right: -1 * $padding-right-card-hover-hack;
2017-04-10 14:32:40 +02:00
> .card {
vertical-align: top;
display: inline-block;
}
2017-07-29 20:12:13 +02:00
> .card + .card {
2017-10-09 05:37:37 +02:00
margin-left: 16px;
2017-04-10 14:32:40 +02:00
}
}
2017-07-29 20:34:02 +02:00
2017-04-12 04:01:45 +02:00
.card-row--small {
overflow: hidden;
2017-04-12 04:01:45 +02:00
white-space: nowrap;
width: 100%;
2017-09-07 00:03:09 +02:00
min-width: var(--card-small-width);
2017-09-01 10:08:15 +02:00
margin-right: $spacing-vertical;
2017-04-12 04:01:45 +02:00
}
2017-04-10 14:32:40 +02:00
.card-row__header {
2017-10-05 06:18:29 +02:00
margin-bottom: 16px;
}
2017-07-29 20:12:13 +02:00
.card-row__scrollhouse {
position: relative;
/*hacky way to give space for hover */
2017-09-01 10:08:15 +02:00
padding-right: $padding-right-card-hover-hack;
2017-07-29 20:12:13 +02:00
}
.card-row__nav {
position: absolute;
2017-08-18 07:37:35 +02:00
padding: 0 var(--card-margin);
2017-07-29 20:12:13 +02:00
height: 100%;
2017-08-18 07:37:35 +02:00
top: calc( $padding-top-card-hover-hack - var(--card-margin) );
}
.card-row__nav .card-row__scroll-button {
2017-08-18 07:37:35 +02:00
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;
2017-07-29 20:12:13 +02:00
opacity: 0.8;
transition: transform 0.2s var(--animation-style);
&:hover {
opacity: 1.0;
2017-08-18 07:37:35 +02:00
transform: scale(calc( var(--card-link-scaling) * 1.1));
}
}
2017-07-29 20:12:13 +02:00
.card-row__nav--left {
left: 0;
}
2017-07-29 20:12:13 +02:00
.card-row__nav--right {
right: 0;
}
2017-07-30 00:56:08 +02:00
2017-08-26 05:21:26 +02:00
/*
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;
}
2017-08-31 15:12:03 +02:00
> .card:nth-of-type(2n - 1):not(:last-child) {
2017-08-26 05:21:26 +02:00
margin-right: $margin-card-grid;
}
2017-10-03 06:08:25 +02:00
}