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

111 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;
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-02-15 02:52:10 +01:00
.media__title {
2019-11-22 22:13:00 +01:00
margin-bottom: var(--spacing-medium);
}
.media__title-text {
overflow: hidden;
text-overflow: ellipsis;
2019-11-07 20:39:22 +01:00
font-weight: var(--font-weight-bold);
2019-02-15 02:52:10 +01:00
white-space: normal;
2019-07-21 23:31:22 +02:00
font-size: var(--font-title);
2019-11-22 22:13:00 +01:00
display: inline;
}
2019-12-09 18:25:13 +01:00
.media__title-badge {
2019-11-22 22:13:00 +01:00
float: right;
margin-left: var(--spacing-small);
margin-top: 5px;
}
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;
}
2019-11-22 22:13:00 +01:00
}
.media__uri--inline {
@extend .media__uri;
position: relative;
transform: none;
2019-03-28 17:53:13 +01:00
}
2019-07-21 23:31:22 +02:00
.media__uri--large {
margin-bottom: var(--spacing-medium);
}
.media__insufficient-credits {
padding: 10px;
}
// 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);
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;
}
.media__subtitle--large {
display: block;
> button {
display: block;
}
}
.media__subtitle__channel {
2019-11-07 20:39:22 +01:00
font-weight: var(--font-weight-bold);
2019-06-27 08:18:45 +02:00
margin: var(--spacing-small) 0;
}
.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 {
@extend .section__actions;
display: flex;
justify-content: space-between;
margin-top: 0;
}