lbry-desktop/src/ui/scss/component/_markdown-preview.scss

121 lines
1.9 KiB
SCSS

.markdown-preview {
// Headers
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: 600;
margin-bottom: var(--spacing-medium);
padding-top: var(--spacing-medium);
}
// Paragraphs
p {
font-size: 1.15rem;
margin-bottom: var(--spacing-medium);
// word-break: break-all;
svg {
width: 1rem;
height: 1rem;
margin-left: 0.2rem;
position: relative;
top: 1px;
}
}
// Strikethrough text
del {
}
// Tables
table {
margin-bottom: 1.2rem;
padding: var(--spacing-medium);
tr {
td,
th,
td:first-of-type,
th:first-of-type,
td:last-of-type,
th:last-of-type {
padding: var(--spacing-medium);
}
}
}
// Image
img {
margin-bottom: var(--spacing-medium);
padding-top: var(--spacing-medium);
}
// Horizontal Rule
hr {
margin-bottom: 2rem;
position: relative;
top: 1rem;
}
// Code
pre {
white-space: normal;
}
code {
margin-bottom: var(--spacing-medium);
padding: var(--spacing-medium);
background-color: $lbry-gray-1;
color: $lbry-gray-5;
display: block;
font-family: Consolas, 'Lucida Console', 'Source Sans', monospace;
}
a,
button {
display: inline-block;
.button__label {
white-space: normal;
}
}
button {
white-space: normal;
text-align: left;
}
.preview-link {
padding: 0;
margin: 1rem 0;
background-color: rgba($lbry-teal-5, 0.1);
border-left: 0.5rem solid $lbry-teal-5;
display: block;
align-items: center;
word-break: break-all;
overflow: hidden;
.claim-preview {
border: 0;
background: transparent;
}
.media__subtitle {
display: block;
}
}
.preview-link__thumbnail {
width: 12rem;
}
.preview-link__description {
margin-top: var(--spacing-small);
}
}