645f8ef452
* Add ICON.INFO - "i" within a circle. Basically, an inverted ICON.ALERT. * Posts: restore "Tip unlock | Claim details" component ## Issue 5882: tip unlock + claim id detials missing from markdown posts view ## Notes The easiest solution would be to put `FileDescription` into posts, but I think that goes against the clean up of the Post layout, where the focus should be on the content. The faded style of the File Details section seems too distracting, plus we don't want the File Description anyway. Fixed by: - Make the existing "LBC amount" clickable to show credit details. An additional padlock will appear if the content is yours and you have tips to unlock. - Add an "info" icon beside it to show file details. These "link" buttons are usually lit, but I dimmed it in this case to make them stand out less. Again, focusing on Post content instead of buttons.
113 lines
1.9 KiB
SCSS
113 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-staked__wrapper {
|
|
background-color: var(--color-background);
|
|
}
|
|
|
|
.channel-thumbnail {
|
|
@include handleChannelGif(2.5rem);
|
|
}
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
width: 100%;
|
|
padding: var(--spacing-s);
|
|
}
|
|
}
|
|
|
|
.post__title {
|
|
font-size: 2rem;
|
|
line-height: 1.2;
|
|
margin-top: 0;
|
|
margin-bottom: var(--spacing-m);
|
|
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 {
|
|
.button--link {
|
|
margin-right: var(--spacing-s);
|
|
}
|
|
|
|
.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);
|
|
width: 75%;
|
|
|
|
.tag {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
|
|
.post__date {
|
|
display: block;
|
|
margin-top: var(--spacing-s);
|
|
font-size: var(--font-small);
|
|
color: var(--color-help);
|
|
}
|
|
|
|
.file-render--document {
|
|
font-size: var(--font-large);
|
|
height: auto;
|
|
max-height: none;
|
|
overflow: auto;
|
|
margin-bottom: var(--spacing-l);
|
|
}
|