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

100 lines
1.8 KiB
SCSS
Raw Normal View History

// M E D I A
2019-02-15 02:52:10 +01:00
// T H U M B
2019-02-15 02:52:10 +01:00
.media__thumb {
@include thumbnail;
position: relative;
border-radius: var(--card-radius);
2019-07-21 23:31:22 +02:00
object-fit: cover;
2019-12-09 18:25:13 +01:00
background-color: var(--color-placeholder-background);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
// M E D I A
2019-02-15 02:52:10 +01:00
// T I T L E
2019-03-28 17:53:13 +01:00
.media__uri {
2019-11-22 22:13:00 +01:00
position: absolute;
transform: translateY(-130%);
font-size: var(--font-xsmall);
color: var(--color-text-subtitle);
2019-12-18 06:27:08 +01:00
@media (max-width: $breakpoint-small) {
position: static;
transform: none;
2020-04-01 22:42:56 +02:00
margin-bottom: var(--spacing-xsmall);
2020-05-11 16:50:32 +02:00
max-width: 100%;
white-space: nowrap;
2019-12-18 06:27:08 +01:00
}
2020-02-12 20:10:35 +01:00
// This is terrible and should not be removed
.icon {
margin-right: var(--spacing-xsmall) / 2;
margin-bottom: -0.08rem;
}
2019-11-22 22:13:00 +01:00
}
.media__uri--inline {
@extend .media__uri;
position: relative;
transform: none;
overflow: hidden;
text-overflow: ellipsis;
2019-03-28 17:53:13 +01:00
}
2020-02-11 20:04:51 +01:00
.media__uri--right {
@extend .media__uri;
right: 0;
}
// M E D I A
// S U B T I T L E
.media__subtitle {
2019-06-27 22:27:38 +02:00
align-self: flex-start;
2019-11-22 22:13:00 +01:00
color: var(--color-text-subtitle);
2020-01-08 20:20:30 +01:00
font-size: var(--font-small);
2019-02-18 18:24:56 +01:00
2019-11-22 22:13:00 +01:00
svg {
stroke: var(--color-text-subtitle);
2019-02-18 18:24:56 +01:00
}
}
2019-11-22 22:13:00 +01:00
.media__subtitle--between {
@extend .media__subtitle;
display: flex;
justify-content: space-between;
align-items: center;
}
.media__info-text {
2019-05-30 03:32:06 +02:00
word-break: break-word;
&:not(:last-of-type) {
2019-11-22 22:13:00 +01:00
margin-bottom: var(--spacing-medium);
}
2019-11-22 22:13:00 +01:00
&.media__info-text--constrained {
max-width: 50rem;
2019-05-30 03:32:06 +02:00
}
}
2019-11-22 22:13:00 +01:00
.media__actions {
display: flex;
2020-02-10 21:49:43 +01:00
flex-wrap: wrap;
2019-11-22 22:13:00 +01:00
justify-content: space-between;
margin-top: 0;
2020-01-06 19:32:35 +01:00
@media (max-width: $breakpoint-small) {
justify-content: flex-start;
padding-top: var(--spacing-small);
> * {
margin-right: var(--spacing-small);
margin-bottom: var(--spacing-small);
}
}
2020-01-06 19:32:35 +01:00
}