295 lines
6.2 KiB
SCSS
295 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;
|
|
}
|
|
}
|