9faca8da2b
i18n messages, handle error case max copy copy update @lbry/components and tweak range styles sigfigs error catching and cleanup apply review changes style table and unlock button handle tip errors separate fileDescription from fileDetails make expandable cards ui tweaks tweak copy, style, behavior remove unused strings forgot an important line
235 lines
4.3 KiB
SCSS
235 lines
4.3 KiB
SCSS
.card {
|
|
background-color: var(--color-card-background);
|
|
position: relative;
|
|
border-radius: var(--card-radius);
|
|
overflow: hidden;
|
|
border: 1px solid var(--color-border);
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
margin-bottom: var(--spacing-medium);
|
|
}
|
|
}
|
|
|
|
.card--disabled {
|
|
opacity: 0.3;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.card--section {
|
|
position: relative;
|
|
padding: var(--spacing-large);
|
|
}
|
|
|
|
.card--reward-total {
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
color: var(--color-white);
|
|
font-size: var(--font-large);
|
|
font-weight: var(--font-weight-bold);
|
|
}
|
|
|
|
.card--inline {
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--card-radius);
|
|
margin-bottom: var(--spacing-medium);
|
|
|
|
&:last-of-type {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.card--claim-preview-wrap {
|
|
@extend .card;
|
|
margin: var(--spacing-xlarge) 0;
|
|
min-width: 35rem;
|
|
}
|
|
|
|
.card--data {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.card__actions {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: var(--spacing-large);
|
|
|
|
&:only-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
> *:not(:last-child) {
|
|
margin-right: var(--spacing-medium);
|
|
}
|
|
}
|
|
|
|
.card__section--flex {
|
|
@extend .section__flex;
|
|
padding: var(--spacing-medium) var(--spacing-large);
|
|
}
|
|
|
|
.card__actions--inline {
|
|
@extend .card__actions;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.card__actions--between {
|
|
@include between;
|
|
}
|
|
|
|
.card__actions--center {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.card-stack {
|
|
.card:not(:last-of-type) {
|
|
margin-bottom: var(--spacing-large);
|
|
}
|
|
}
|
|
|
|
.card__list {
|
|
column-count: 2;
|
|
column-gap: var(--spacing-large);
|
|
display: block;
|
|
|
|
.card {
|
|
display: inline-block;
|
|
margin-bottom: var(--spacing-large);
|
|
}
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
column-count: 1;
|
|
.card {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
.card__message {
|
|
border-left: 0.5rem solid;
|
|
padding: var(--spacing-medium) var(--spacing-medium) var(--spacing-medium) var(--spacing-large);
|
|
background-color: var(--color-primary-alt);
|
|
border-color: var(--color-primary);
|
|
}
|
|
|
|
.card__message--error {
|
|
background-color: var(--color-error);
|
|
border-color: var(--color-text-error);
|
|
}
|
|
|
|
.card__message--failure {
|
|
background-color: var(--color-error);
|
|
border-color: var(--color-text-error);
|
|
}
|
|
|
|
.card__title {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
font-size: var(--font-title);
|
|
font-weight: var(--font-weight-light);
|
|
|
|
& > *:not(:last-child) {
|
|
margin-right: var(--spacing-medium);
|
|
}
|
|
}
|
|
|
|
.card__title.card__title--deprecated {
|
|
margin-bottom: var(--spacing-small);
|
|
}
|
|
|
|
.card__title--between {
|
|
@extend .card__title;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
& > *:not(:last-child) {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
.card__media--nsfw {
|
|
background-color: black;
|
|
}
|
|
|
|
.card__header {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
|
|
.icon__wrapper {
|
|
margin-right: var(--spacing-large);
|
|
}
|
|
}
|
|
|
|
.card__header--between {
|
|
@extend .card__header;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.card__title {
|
|
font-size: var(--font-title);
|
|
font-weight: var(--font-weight-light);
|
|
display: block;
|
|
|
|
/* .badge rule inherited from file page prices, should be refactored */
|
|
.badge {
|
|
float: right;
|
|
margin-left: var(--spacing-small);
|
|
margin-top: 8px; // should be flex'd, but don't blame me! I just moved it down 3px
|
|
}
|
|
}
|
|
|
|
.card__subtitle {
|
|
color: var(--color-text-subtitle);
|
|
margin: var(--spacing-small) 0;
|
|
font-size: var(--font-body);
|
|
}
|
|
|
|
.card__body {
|
|
padding: var(--spacing-large);
|
|
&:not(.card__body--no-title) {
|
|
padding-top: 0;
|
|
}
|
|
&.card__body--table {
|
|
padding: 0;
|
|
border-top: 1px solid var(--color-border);
|
|
}
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
padding: var(--spacing-large);
|
|
}
|
|
}
|
|
|
|
.card__main-actions {
|
|
padding: var(--spacing-large);
|
|
padding-bottom: 0;
|
|
margin-bottom: var(--spacing-large);
|
|
border-top: 1px solid var(--color-border);
|
|
}
|
|
|
|
.card__body--with-icon,
|
|
.card__main-actions--with-icon {
|
|
padding-left: 7.5rem;
|
|
}
|
|
|
|
.card__data-subtitle {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
:not(:first-child) {
|
|
margin-left: var(--spacing-small);
|
|
}
|
|
}
|
|
|
|
.card__header,
|
|
.card__body,
|
|
.card__main-actions {
|
|
@media (max-width: $breakpoint-small) {
|
|
padding: var(--spacing-small);
|
|
padding-bottom: 0;
|
|
margin: 0;
|
|
margin-bottom: var(--spacing-small);
|
|
}
|
|
}
|