lbry-desktop/ui/scss/component/_post.scss
jessopb 3034f4ce6c
bring in styles (#7542)
* bring in ody styles; modify; cleanup

* workflow

* workflow

* v0.52.6-alpha.teststyles.1

* fix hook

* v0.52.6-alpha.teststyles.2

* style fixes

* fix pagination styling

* v0.52.6-alpha.teststyles.3

* wallet icon was bad

* restore deploy script

* fixes

* fix player close button

* modal inputs

* cleanup

* cleanup

* fix staked indicator

* fix profile menu button skel delay

* fix view-all-playlists hover

* fix overlay buttons on collection page

* fix header buttons
2022-04-17 13:04:56 -04:00

115 lines
1.9 KiB
SCSS

.post {
$card-bg: var(--color-card-background);
$bg: var(--color-background);
@include font-serif;
.card {
border: 0;
&:after {
content: '';
display: block;
height: 20rem;
background-image: linear-gradient(to top, $bg, $card-bg);
}
}
}
.post {
height: 100%;
width: 43rem;
margin-left: auto;
margin-right: auto;
max-width: unset;
min-width: unset;
.channel-thumbnail {
@include handleChannelGif(2.5rem);
}
@media (max-width: $breakpoint-small) {
width: 100%;
}
}
.post__title {
font-size: 2rem;
line-height: 1.2;
margin-top: 0;
margin-bottom: var(--spacing-s);
font-weight: var(--font-weight-bold);
:first-child {
display: inline-block;
margin-right: var(--spacing-s);
}
@media (min-width: $breakpoint-small) {
margin-top: var(--spacing-xl);
font-size: 3rem;
line-height: 1;
}
}
.post__info {
@include font-sans;
display: flex;
align-items: center;
justify-content: space-between;
line-height: 0;
margin-bottom: var(--spacing-l);
font-size: var(--font-small);
.credit-amount {
margin-right: var(--spacing-s);
}
}
.post__info--expanded {
margin-bottom: var(--spacing-s);
}
.post__info--grouped {
display: flex;
.button--link {
margin-right: var(--spacing-s);
}
.button--link:last-of-type {
margin-right: 0;
}
.dim {
color: var(--color-text-subtitle);
stroke: var(--color-text-subtitle);
}
}
.post__info--credit-details {
@include font-sans;
margin-top: var(--spacing-l);
margin-bottom: var(--spacing-l);
.tag {
margin-top: 0;
}
}
.post__date {
display: flex;
font-size: var(--font-small);
color: var(--color-help);
.date_time {
color: var(--color-text-subtitle);
margin-right: var(--spacing-m);
font-size: var(--font-small);
}
}
.file-render--document {
font-size: var(--font-large);
height: auto;
max-height: none;
overflow: auto;
margin-bottom: var(--spacing-l);
}