181 lines
2.8 KiB
SCSS
181 lines
2.8 KiB
SCSS
// C O N T A I N E R S
|
|
|
|
.media-grid { // sass-lint:disable-line no-empty-rulesets
|
|
}
|
|
|
|
.media-list { // sass-lint:disable-line no-empty-rulesets
|
|
}
|
|
|
|
.media-row { // sass-lint:disable-line no-empty-rulesets
|
|
}
|
|
|
|
|
|
|
|
.media {
|
|
position: relative;
|
|
|
|
// M O D I F I E R S
|
|
|
|
&--large {
|
|
display: flex;
|
|
font-size: 1.5rem;
|
|
|
|
.media__info {
|
|
width: calc(100% - 20rem);
|
|
margin-left: var(--spacing-s); // 1rem;
|
|
}
|
|
|
|
.media__thumb {
|
|
width: 40rem;
|
|
margin-bottom: var(--spacing-s); // 1rem;
|
|
}
|
|
}
|
|
|
|
&--placeholder {
|
|
> * {
|
|
@include placeholder;
|
|
}
|
|
|
|
.media__channel,
|
|
.media__date,
|
|
.media__title {
|
|
min-height: 1rem;
|
|
}
|
|
|
|
.media__channel {
|
|
width: 70%;
|
|
}
|
|
|
|
.media__date {
|
|
width: 30%;
|
|
}
|
|
|
|
.media__title {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
&--small {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
&:not(:last-of-type) {
|
|
margin-bottom: var(--spacing-s); // 1rem;
|
|
}
|
|
|
|
.media__info {
|
|
width: 50%;
|
|
padding-left: var(--spacing-s); // 1rem;
|
|
}
|
|
|
|
.media__properties {
|
|
bottom: -1.5rem; left: calc(-100% - 1.5rem);
|
|
position: absolute;
|
|
}
|
|
|
|
.media__thumb {
|
|
width: 50%;
|
|
}
|
|
|
|
.media__title {
|
|
height: 3rem;
|
|
line-height: 1.33;
|
|
}
|
|
}
|
|
|
|
&--wide { // .media--search-result
|
|
display: flex;
|
|
|
|
&:not(:last-of-type) {
|
|
margin-bottom: var(--spacing-m); // 1.5rem;
|
|
}
|
|
|
|
.media__info {
|
|
width: calc(100% - 20rem);
|
|
margin-left: var(--spacing-s); // 1rem;
|
|
}
|
|
|
|
.media__properties {
|
|
bottom: -5.5rem; left: -20rem;
|
|
position: absolute;
|
|
}
|
|
|
|
.media__text { // .media__subtext
|
|
padding-top: var(--spacing-s); // 1rem;
|
|
}
|
|
|
|
.media__thumb {
|
|
width: 20rem;
|
|
}
|
|
|
|
.media__title {
|
|
font-size: 1.5rem;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// C H I L D R E N
|
|
|
|
&__actions {
|
|
display: flex;
|
|
padding-top: var(--spacing-m); // 2rem;
|
|
padding-bottom: var(--spacing-m); // 2rem;
|
|
}
|
|
|
|
&__content { // sass-lint:disable-line no-empty-rulesets
|
|
}
|
|
|
|
&__date { // sass-lint:disable-line no-empty-rulesets
|
|
}
|
|
|
|
&__info {
|
|
word-wrap: break-word;
|
|
|
|
[data-mode="dark"] & {
|
|
border-color: rgba($lbry-gray-5, 0.2);
|
|
}
|
|
}
|
|
|
|
&__message {
|
|
padding: var(--spacing-s); // 1rem;
|
|
font-size: 0.9rem;
|
|
white-space: normal;
|
|
}
|
|
|
|
&__properties {
|
|
vertical-align: top;
|
|
|
|
> *:not(:last-child) {
|
|
margin-right: var(--spacing-xs); // 0.5rem;
|
|
}
|
|
|
|
&:not(:empty) {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
&__property { // sass-lint:disable-line no-empty-rulesets
|
|
}
|
|
|
|
&__subtitle {
|
|
position: relative;
|
|
}
|
|
|
|
&__text {
|
|
font-size: 2.5rem;
|
|
|
|
[data-mode="dark"] & {
|
|
color: $lbry-white;
|
|
}
|
|
}
|
|
|
|
&__thumb {
|
|
@include thumbnail;
|
|
}
|
|
|
|
&__title {
|
|
font-weight: 600;
|
|
white-space: normal;
|
|
}
|
|
}
|