cb6a044584
* Publish button: use spinner instead of "Publishing..." Looks better, plus the preview could take a while sometimes. * Refactor `doPublish`. No functional change This is to allow `doPublish` to accept a custom payload as an input (for resuming uploads), instead of always resolving it from the redux data. * Add doPublishResume * Support resume-able upload via tus ## Issue 38 Handle resumable file upload ## Notes Since we can't serialize a File object, we'll need to the user to re-select the file to resume. * Exclude "modified date" for Firefox/Android ## Issue It appears that the modification date of the Android file changes when selected, so that file was deemed "different" when trying to resume upload. ## Change Exclude modification date for now. Let's assume a smart user. * Move 'currentUploads' to 'publish' reducer `publish` is currently rehydrated, so we can ride on that and don't need to store the `currentUploads` in `localStorage` for persistence. This would allow us to store Markdown Post data too, as `localStorage` has a 5MB limit per app. We could have also made `webReducer` rehydrate, but in this repo, there is no need to split it to another reducer. It also makes more sense to be part of publish anyway (at least to me). This change is mostly moving items between files, with the exception of 1. An additional REHYDRATE in the publish reducer to clean up the tusUploader. 2. Not clearing `currentUploads` in CLEAR_PUBLISH. * Restore v1 code for livestream replay, etc. v2 (tus) does not handle `remote_url`, so the app still needs v1 for that. Since we'll still have v1 code, use v1 for previews as well.
878 lines
16 KiB
SCSS
878 lines
16 KiB
SCSS
.claim-list {
|
|
.claim-preview__wrapper {
|
|
border-bottom: 1px solid var(--color-border);
|
|
}
|
|
}
|
|
|
|
.claim-list__header {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
margin: var(--spacing-m) 0;
|
|
margin-top: 0;
|
|
font-size: var(--font-body);
|
|
|
|
.spinner {
|
|
margin-left: var(--spacing-m);
|
|
}
|
|
}
|
|
|
|
.claim-list__dropdown {
|
|
padding: 0 var(--spacing-m);
|
|
padding-right: var(--spacing-xl);
|
|
background-position: right var(--spacing-m) center;
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
.claim-list__header-label {
|
|
position: absolute;
|
|
transform: translateY(-130%);
|
|
font-size: var(--font-xsmall);
|
|
color: var(--color-text-subtitle);
|
|
overflow: visible;
|
|
|
|
.icon {
|
|
margin-right: var(--spacing-xs);
|
|
stroke: var(--color-text-subtitle);
|
|
}
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
position: static;
|
|
transform: none;
|
|
}
|
|
}
|
|
|
|
.claim-list__conjuction {
|
|
color: var(--color-text-subtitle);
|
|
font-size: var(--font-small);
|
|
}
|
|
|
|
.claim-list__alt-controls {
|
|
align-self: flex-start;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-left: auto;
|
|
|
|
& > * {
|
|
margin-left: var(--spacing-s);
|
|
}
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.claim-list__alt-controls--wrap {
|
|
@extend .claim-list__alt-controls;
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
}
|
|
|
|
.claim-preview__wrapper {
|
|
@include font-sans;
|
|
padding: var(--spacing-m);
|
|
list-style: none;
|
|
|
|
&:hover {
|
|
.claim__menu-button {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.claim-preview__wrapper--notice {
|
|
background-color: var(--color-notice);
|
|
}
|
|
|
|
.claim-preview__wrapper--inline {
|
|
padding: 0;
|
|
}
|
|
|
|
.claim-preview__wrapper--small {
|
|
padding: var(--spacing-s);
|
|
|
|
.button--uri-indicator {
|
|
max-width: 12rem;
|
|
}
|
|
}
|
|
|
|
.claim-preview {
|
|
flex: 1;
|
|
display: flex;
|
|
position: relative;
|
|
overflow: visible;
|
|
|
|
&:not(.claim-preview--inline):not(.claim-preview--pending):not(.claim-preview--inactive) {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.media__thumb {
|
|
overflow: hidden;
|
|
$width: var(--file-list-thumbnail-width);
|
|
width: $width;
|
|
@include handleClaimListGifThumbnail($width);
|
|
|
|
flex-shrink: 0;
|
|
margin-right: var(--spacing-m);
|
|
}
|
|
|
|
.media__thumb-placeholder-text {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: var(--spacing-m);
|
|
}
|
|
|
|
.channel-thumbnail {
|
|
@include handleChannelGif(6rem);
|
|
}
|
|
|
|
// show watch later button and duration divs when hovered
|
|
&:hover {
|
|
.claim-preview__hover-actions {
|
|
display: block;
|
|
}
|
|
.claim-preview__file-property-overlay {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
font-size: 14px;
|
|
|
|
.channel-thumbnail {
|
|
@include handleChannelGif(4rem);
|
|
}
|
|
}
|
|
}
|
|
|
|
.claim-preview__empty {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.claim-preview--large {
|
|
border: none;
|
|
min-height: 8rem;
|
|
|
|
&:hover {
|
|
background-color: transparent;
|
|
}
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
min-height: 4rem;
|
|
}
|
|
|
|
.media__thumb {
|
|
width: 14rem;
|
|
@include handleClaimListGifThumbnail(14rem);
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
min-height: 5rem;
|
|
width: 8rem;
|
|
}
|
|
}
|
|
|
|
.channel-thumbnail {
|
|
width: 7.5rem;
|
|
@include handleChannelGif(7.5rem);
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
width: 5rem;
|
|
@include handleChannelGif(5rem);
|
|
}
|
|
}
|
|
|
|
.claim-preview__text {
|
|
height: 7.5rem;
|
|
}
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
.channel-thumbnail {
|
|
@include handleChannelGif(6rem);
|
|
}
|
|
|
|
.claim-preview__text {
|
|
height: 3.5rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.claim-preview--small {
|
|
.channel-thumbnail {
|
|
@include handleChannelGif(4rem);
|
|
}
|
|
|
|
.media__subtitle {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
|
|
.claim-preview--pending {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.claim-preview--padded {
|
|
padding: var(--spacing-s);
|
|
}
|
|
|
|
.claim-preview--inline {
|
|
.channel-thumbnail {
|
|
@include handleChannelGif(3rem);
|
|
|
|
@media (min-width: $breakpoint-small) {
|
|
@include handleChannelGif(var(--channel-thumbnail-width--small));
|
|
}
|
|
}
|
|
|
|
.claim-preview__actions {
|
|
align-self: flex-end;
|
|
margin-bottom: auto;
|
|
width: auto;
|
|
}
|
|
|
|
.claim-preview__text {
|
|
width: 100%;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
}
|
|
|
|
@media (max-width: $breakpoint-xsmall) {
|
|
.claim-preview__actions {
|
|
.claim-preview__primary-actions {
|
|
.button {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.claim-preview__text {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.claim-preview__title {
|
|
font-weight: var(--font-weight-bold);
|
|
font-size: var(--font-body);
|
|
margin-right: var(--spacing-l);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
max-width: 100%;
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.claim-preview__channel-sub-count {
|
|
color: var(--color-text-subtitle);
|
|
font-size: var(--font-small);
|
|
}
|
|
|
|
.claim-preview__custom-properties {
|
|
text-align: right;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.claim-preview-metadata {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
}
|
|
|
|
.claim-preview-metadata-sub-upload {
|
|
position: relative;
|
|
//margin-left: 4px;
|
|
display: flex;
|
|
text-align: left;
|
|
}
|
|
|
|
.claim-preview-info {
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.claim-preview-info,
|
|
.claim-preview-properties {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.claim-preview__actions {
|
|
align-self: flex-end;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
|
|
@media (min-width: $breakpoint-small) {
|
|
flex-direction: row;
|
|
}
|
|
}
|
|
|
|
.claim-preview__primary-actions {
|
|
@extend .section__actions;
|
|
margin-right: 0;
|
|
margin-top: var(--spacing-s);
|
|
|
|
&:first-child {
|
|
.button {
|
|
margin-top: var(--spacing-s);
|
|
}
|
|
}
|
|
}
|
|
|
|
.claim-preview__actions--header {
|
|
@extend .claim-preview__actions;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.claim-preview__button {
|
|
margin-left: 2rem;
|
|
}
|
|
|
|
.claim-preview-properties {
|
|
align-items: flex-end;
|
|
flex: 1;
|
|
font-size: var(--font-small);
|
|
color: var(--color-text-subtitle);
|
|
}
|
|
|
|
.claim-upload {
|
|
flex: 1;
|
|
display: flex;
|
|
position: relative;
|
|
overflow: visible;
|
|
padding: var(--spacing-m);
|
|
|
|
.media__thumb {
|
|
width: var(--file-list-thumbnail-width);
|
|
flex-shrink: 0;
|
|
margin-right: var(--spacing-m);
|
|
}
|
|
}
|
|
|
|
.claim-upload__progress--label {
|
|
font-size: var(--font-small);
|
|
color: var(--color-text-subtitle);
|
|
}
|
|
|
|
.claim-upload__progress--outer {
|
|
width: 100%;
|
|
}
|
|
|
|
.claim-upload__progress--inner {
|
|
background: var(--color-primary-alt);
|
|
padding: var(--spacing-xxs);
|
|
}
|
|
|
|
//
|
|
// The _other_ way to view claims
|
|
// A grid of tiles
|
|
// It should probably go into it's own file once we add more to it
|
|
//
|
|
.claim-grid {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
list-style: none;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.claim-grid__wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
&:not(:first-of-type) {
|
|
margin-top: var(--spacing-l);
|
|
}
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
&:not(:first-of-type) {
|
|
margin-top: var(--spacing-m);
|
|
}
|
|
}
|
|
}
|
|
|
|
.claim-grid__header {
|
|
margin-bottom: var(--spacing-m);
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.button {
|
|
&:hover {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
.icon__wrapper {
|
|
width: 0.5rem;
|
|
height: 0.5rem;
|
|
background-color: var(--color-primary-alt);
|
|
margin-right: var(--spacing-m);
|
|
|
|
.icon {
|
|
stroke: var(--color-primary);
|
|
}
|
|
|
|
@media (min-width: $breakpoint-small) {
|
|
height: 1.5rem;
|
|
width: 1.5rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.claim-grid__header--between {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.claim-grid__title {
|
|
font-weight: 300;
|
|
font-size: var(--font-large);
|
|
margin-right: var(--spacing-m);
|
|
display: flex;
|
|
}
|
|
|
|
.claim-grid__title-span {
|
|
display: flex;
|
|
}
|
|
|
|
.claim-grid__title--empty {
|
|
color: var(--color-text-help);
|
|
margin-left: var(--spacing-s);
|
|
}
|
|
|
|
.claim-grid__title--first {
|
|
text-align: center;
|
|
width: 100%;
|
|
margin-bottom: var(--spacing-l);
|
|
|
|
.no-evil {
|
|
font-size: var(--font-heading);
|
|
}
|
|
}
|
|
|
|
.claim-grid__title--secondary {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.claim-grid__help {
|
|
margin-bottom: 12px;
|
|
|
|
svg {
|
|
stroke: var(--color-text-subtitle);
|
|
}
|
|
}
|
|
|
|
.claim-preview--tile {
|
|
margin-bottom: var(--spacing-m);
|
|
margin-right: 0;
|
|
margin-top: 0;
|
|
margin-left: var(--spacing-m);
|
|
justify-content: flex-start;
|
|
list-style: none;
|
|
|
|
.media__thumb {
|
|
border-bottom-right-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
}
|
|
|
|
&:hover {
|
|
cursor: pointer;
|
|
|
|
.claim__menu-button {
|
|
opacity: 1;
|
|
}
|
|
.collection-preview__overlay-thumbs {
|
|
opacity: 1;
|
|
transition: 0.3s;
|
|
}
|
|
}
|
|
|
|
@media (min-width: $breakpoint-large) {
|
|
$width: calc((100% - var(--spacing-m) * 5) / 6);
|
|
width: $width;
|
|
@include handleClaimTileGifThumbnail($width);
|
|
|
|
&:first-child,
|
|
&:nth-child(6n + 1) {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
@media (max-width: $breakpoint-large) and (min-width: $breakpoint-medium) {
|
|
$width: calc((100% - var(--spacing-m) * 3) / 4);
|
|
width: $width;
|
|
@include handleClaimTileGifThumbnail($width);
|
|
|
|
&:first-child,
|
|
&:nth-child(4n + 1) {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
@media (max-width: $breakpoint-medium) and (min-width: $breakpoint-small) {
|
|
$width: calc((100vw - var(--side-nav-width--micro) - var(--spacing-xl) * 3) / 3);
|
|
width: $width;
|
|
@include handleClaimTileGifThumbnail($width);
|
|
|
|
&:first-child,
|
|
&:nth-child(3n + 1) {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
$width: 100%;
|
|
width: $width;
|
|
@include handleClaimTileGifThumbnail($width);
|
|
margin-left: 0;
|
|
|
|
&:not(:first-child) {
|
|
margin-top: var(--spacing-s);
|
|
}
|
|
}
|
|
}
|
|
|
|
.claim-tile__title {
|
|
position: relative;
|
|
padding: var(--spacing-s);
|
|
padding-right: var(--spacing-xl);
|
|
padding-bottom: 0;
|
|
margin-bottom: var(--spacing-s);
|
|
|
|
font-weight: 600;
|
|
color: var(--color-text);
|
|
font-size: var(--font-small);
|
|
min-height: 2rem;
|
|
|
|
@media (min-width: $breakpoint-small) {
|
|
min-height: 2.5rem;
|
|
}
|
|
}
|
|
|
|
.claim-tile__info {
|
|
display: flex;
|
|
margin-top: var(--spacing-s);
|
|
border-top: 1px solid var(--color-border);
|
|
color: var(--color-subtitle);
|
|
padding: var(--spacing-s);
|
|
|
|
.channel-thumbnail {
|
|
@include handleChannelGif(2.1rem);
|
|
margin-right: var(--spacing-s);
|
|
}
|
|
}
|
|
|
|
.claim-tile-collection__info {
|
|
display: flex;
|
|
color: var(--color-subtitle);
|
|
|
|
.channel-thumbnail {
|
|
@include handleChannelGif(2.1rem);
|
|
margin-right: var(--spacing-s);
|
|
}
|
|
}
|
|
|
|
.claim-tile__about {
|
|
font-size: var(--font-xsmall);
|
|
color: var(--color-text-subtitle);
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
|
|
> * {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.claim-tile__publishes {
|
|
font-size: var(--font-xsmall);
|
|
}
|
|
|
|
.claim-tile__about--channel {
|
|
@extend .claim-tile__about;
|
|
flex: 1;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: var(--font-body);
|
|
}
|
|
|
|
.claim-tile__about--counts {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.claim-preview__file-property-overlay {
|
|
position: absolute;
|
|
bottom: var(--spacing-xxs);
|
|
right: var(--spacing-xxs);
|
|
background-color: var(--color-black);
|
|
padding: 0.3rem;
|
|
border-radius: var(--border-radius);
|
|
z-index: 2;
|
|
opacity: 0.7;
|
|
|
|
// show full opacity for touch devices
|
|
@media (pointer: fine), (pointer: coarse) {
|
|
opacity: 0.85;
|
|
}
|
|
|
|
.file-properties {
|
|
color: var(--color-white);
|
|
}
|
|
|
|
.file-price {
|
|
padding: 0.1rem;
|
|
}
|
|
}
|
|
|
|
.claim-preview__claim-property-overlay {
|
|
position: absolute;
|
|
bottom: var(--spacing-xxs);
|
|
right: var(--spacing-xxs);
|
|
background-color: var(--color-black);
|
|
padding: 0.3rem;
|
|
border-radius: var(--border-radius);
|
|
opacity: 0.7;
|
|
z-index: 2;
|
|
|
|
.claim-preview__overlay-properties {
|
|
color: var(--color-white);
|
|
}
|
|
|
|
.file-price {
|
|
padding: 0.1rem;
|
|
}
|
|
}
|
|
|
|
.claim-preview__collection-wrapper {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
left: 0;
|
|
z-index: 2;
|
|
overflow: hidden;
|
|
}
|
|
|
|
// show duration and watch later button when hovered
|
|
.claim-preview--tile {
|
|
&:hover {
|
|
.claim-preview__hover-actions {
|
|
display: block;
|
|
}
|
|
.claim-preview__file-property-overlay {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.claim-preview__repost-author {
|
|
transform: translateY(calc(var(--spacing-xs) * -1));
|
|
font-size: var(--font-xsmall);
|
|
color: var(--color-text-subtitle);
|
|
}
|
|
|
|
.claim-preview__repost-icon {
|
|
margin-right: var(--spacing-xxs);
|
|
margin-bottom: -1px; // Offset it slightly because it doesn't look aligned next to all lowercase text + the @ from a channel
|
|
}
|
|
|
|
.claim-tile__repost-author {
|
|
margin: var(--spacing-s);
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
// div that displays watch later button
|
|
.claim-preview__hover-actions {
|
|
// if the user is using a mouse
|
|
@media (pointer: fine) {
|
|
display: none;
|
|
}
|
|
|
|
// if the user doesn't have a pointer (mouse etc) hide watch later button
|
|
@media (pointer: none), (pointer: coarse) {
|
|
display: none !important;
|
|
}
|
|
|
|
position: relative;
|
|
float: right;
|
|
top: var(--spacing-xxs);
|
|
margin-right: var(--spacing-xxs);
|
|
|
|
& > * {
|
|
color: var(--color-text);
|
|
background-color: var(--color-black);
|
|
border-radius: var(--border-radius);
|
|
padding: var(--spacing-xxs);
|
|
margin-right: 0;
|
|
&:hover {
|
|
background-color: var(--color-button-alt-bg);
|
|
}
|
|
}
|
|
|
|
.button--file-action,
|
|
.download-text {
|
|
display: block;
|
|
margin: 0 0;
|
|
padding: var(--spacing-xxs) var(--spacing-xxs);
|
|
height: unset;
|
|
|
|
// label (with 'Add' text) hidden by default
|
|
.button__label {
|
|
color: var(--color-text);
|
|
font-size: var(--font-small);
|
|
display: none;
|
|
}
|
|
|
|
// show the additional watch later text (Add) when hovered
|
|
&:hover {
|
|
.button__label {
|
|
display: inline;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.claim-preview__active {
|
|
background-color: var(--color-card-background-highlighted);
|
|
}
|
|
|
|
.claim-preview__live {
|
|
.claim-preview__file-property-overlay {
|
|
opacity: 1; // The original 0.7 is not visible over bright thumbnails
|
|
color: var(--color-white-alt);
|
|
background-color: var(--color-live);
|
|
}
|
|
|
|
.file-properties {
|
|
font-weight: var(--font-weight-bold);
|
|
margin-top: 2px; // Even out bottom spacing due to all caps "LIVE".
|
|
}
|
|
}
|
|
|
|
.claim-link {
|
|
@include font-sans;
|
|
position: relative;
|
|
}
|
|
|
|
.claim-preview__null-label {
|
|
margin: auto;
|
|
}
|
|
|
|
.claim-preview__channel-staked {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.channel-thumbnail {
|
|
@include handleChannelGif(1.4rem);
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
.claim-tile__header {
|
|
position: relative;
|
|
|
|
.claim__menu-button {
|
|
right: 0.2rem;
|
|
}
|
|
}
|
|
|
|
.menu__button {
|
|
&.claim__menu-button {
|
|
position: absolute;
|
|
top: var(--spacing-xs);
|
|
right: var(--spacing-xs);
|
|
}
|
|
|
|
&.claim__menu-button--inline {
|
|
position: relative;
|
|
@extend .button--alt;
|
|
width: var(--height-button);
|
|
padding: 0;
|
|
border-radius: var(--border-radius);
|
|
align-self: flex-end;
|
|
}
|
|
}
|
|
|
|
@media (min-width: $breakpoint-small) {
|
|
.claim-preview--tile:not(:hover),
|
|
.claim-preview__wrapper:not(:hover) {
|
|
.claim__menu-button:not(:focus):not([aria-expanded='true']) {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.claim-preview__overlay-properties {
|
|
display: flex;
|
|
position: relative;
|
|
align-items: center;
|
|
color: var(--color-text-help);
|
|
white-space: nowrap;
|
|
font-size: var(--font-xsmall);
|
|
line-height: 1.2;
|
|
margin-left: 0;
|
|
margin-top: auto;
|
|
|
|
& > *:not(:last-child) {
|
|
margin-right: var(--spacing-xxs);
|
|
}
|
|
}
|
|
|
|
.claim-preview__overlay-properties--small {
|
|
line-height: 0.9;
|
|
font-size: var(--font-xxsmall);
|
|
}
|
|
|
|
.claim__tags {
|
|
font-size: var(--font-xsmall);
|
|
line-height: 1.2;
|
|
margin-left: 0;
|
|
margin-top: auto;
|
|
position: relative;
|
|
|
|
.tag {
|
|
@media (max-width: $breakpoint-xsmall) {
|
|
display: none;
|
|
}
|
|
font-size: var(--font-xsmall);
|
|
}
|
|
|
|
& > *:not(:last-child) {
|
|
margin-right: var(--spacing-xxs);
|
|
}
|
|
}
|
|
|
|
.claim__tags--large {
|
|
flex-wrap: wrap;
|
|
margin-left: 0;
|
|
|
|
& > * {
|
|
margin-top: var(--spacing-s);
|
|
}
|
|
}
|
|
|
|
.web-upload-item.claim-preview {
|
|
@media (max-width: $breakpoint-small) {
|
|
display: block;
|
|
|
|
.media__thumb {
|
|
margin-bottom: var(--spacing-s);
|
|
}
|
|
|
|
.claim-preview-metadata {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|