143 lines
3.2 KiB
SCSS
143 lines
3.2 KiB
SCSS
.placeholder {
|
|
@include placeholder;
|
|
}
|
|
|
|
.placeholder__wrapper {
|
|
width: 100%;
|
|
}
|
|
|
|
.placeholder {
|
|
&.claim-preview--tile {
|
|
background-color: unset;
|
|
.claim-tile__info {
|
|
.channel-thumbnail {
|
|
margin-top: unset;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.claim-preview__wrapper {
|
|
background-color: rgba(var(--color-header-background-base), 0.5);
|
|
margin-bottom: var(--spacing-xxs);
|
|
|
|
.media__thumb {
|
|
width: calc(var(--file-list-thumbnail-width) * 1.2);
|
|
@media (max-width: $breakpoint-small) {
|
|
width: calc(var(--file-list-thumbnail-width) * 0.8) !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.media__thumb {
|
|
border-radius: var(--border-radius-thumbnail);
|
|
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0) inset;
|
|
}
|
|
|
|
.claim-preview__title {
|
|
width: 45%;
|
|
margin-top: 2px;
|
|
min-height: var(--font-body);
|
|
background-color: var(--color-text);
|
|
border-radius: var(--border-radius);
|
|
opacity: 0.2;
|
|
@media (max-width: $breakpoint-small) {
|
|
width: 94%;
|
|
}
|
|
}
|
|
.claim-preview__title_b {
|
|
@extend .claim-preview__title;
|
|
display: none;
|
|
width: 68%;
|
|
margin-bottom: 9px;
|
|
@media (max-width: $breakpoint-small) {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.claim-tile__about {
|
|
.media__subtitle {
|
|
display: block;
|
|
margin-top: calc(var(--spacing-s));
|
|
width: 16%;
|
|
height: var(--font-xsmall);
|
|
background-color: var(--color-text);
|
|
border-radius: var(--border-radius);
|
|
opacity: 0.1;
|
|
@media (max-width: $breakpoint-small) {
|
|
width: 82%;
|
|
}
|
|
}
|
|
.media__subtitle_b {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin-top: 4px;
|
|
width: 14%;
|
|
height: var(--font-xsmall);
|
|
background-color: var(--color-text);
|
|
border-radius: var(--border-radius);
|
|
opacity: 0.1;
|
|
@media (max-width: $breakpoint-small) {
|
|
width: 56%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.claim-tile__title {
|
|
border-radius: var(--border-radius);
|
|
width: 95%;
|
|
margin-left: 0;
|
|
margin-top: calc(var(--spacing-s) - 1px);
|
|
min-height: var(--font-small);
|
|
background-color: var(--color-text);
|
|
opacity: 0.2;
|
|
}
|
|
.claim-tile__title_b {
|
|
border-radius: var(--border-radius);
|
|
width: 65%;
|
|
margin-left: 0;
|
|
margin-top: var(--spacing-xxs);
|
|
min-height: var(--font-small);
|
|
background-color: var(--color-text);
|
|
opacity: 0.2;
|
|
margin-bottom: calc(var(--spacing-s) + 4px);
|
|
}
|
|
|
|
.claim-tile__info {
|
|
.channel-thumbnail {
|
|
margin-top: 8px;
|
|
width: 2.1rem;
|
|
height: 2.1rem;
|
|
background-color: var(--color-placeholder-background);
|
|
}
|
|
.claim-tile__about {
|
|
width: 70%;
|
|
.button__content {
|
|
height: var(--font-xsmall);
|
|
width: 40%;
|
|
background-color: var(--color-text);
|
|
opacity: 0.1;
|
|
border-radius: var(--border-radius);
|
|
margin-top: 2px;
|
|
}
|
|
.claim-tile__about--counts {
|
|
height: var(--font-xsmall);
|
|
width: 35%;
|
|
background-color: var(--color-text);
|
|
opacity: 0.1;
|
|
border-radius: var(--border-radius);
|
|
margin-top: 4px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
.media__thumb {
|
|
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0) inset;
|
|
}
|
|
}
|
|
}
|
|
|
|
.placeholder--text-document {
|
|
@include placeholder;
|
|
height: 60vh;
|
|
}
|