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

116 lines
1.8 KiB
SCSS
Raw Normal View History

2018-05-07 06:59:33 +02:00
.markdown-preview {
// Headers
2018-05-11 22:58:30 +02:00
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
2018-10-17 21:42:05 +02:00
font-weight: 600;
margin-bottom: var(--spacing-vertical-medium);
padding-top: var(--spacing-vertical-medium);
2018-05-11 22:58:30 +02:00
}
2018-05-07 06:59:33 +02:00
// Paragraphs
2018-05-30 20:12:54 +02:00
p {
font-size: 1.15rem;
margin-bottom: var(--spacing-vertical-medium);
2018-05-30 20:12:54 +02:00
white-space: pre-line;
2019-01-24 19:09:27 +01:00
word-break: break-all;
svg {
width: 1rem;
height: 1rem;
margin-left: 0.2rem;
position: relative;
top: 1px;
}
2018-05-30 20:12:54 +02:00
}
2018-05-30 05:08:37 +02:00
// Strikethrough text
2018-05-30 20:12:54 +02:00
del {
}
2018-05-07 06:59:33 +02:00
// Tables
2018-05-30 20:12:54 +02:00
table {
margin-bottom: 1.2rem;
padding: var(--spacing-vertical-medium);
tr {
td,
th,
td:first-of-type,
th:first-of-type,
td:last-of-type,
th:last-of-type {
padding: var(--spacing-vertical-medium);
}
2018-05-30 20:12:54 +02:00
}
}
2018-05-07 06:59:33 +02:00
// Image
2018-07-27 02:24:00 +02:00
img {
margin-bottom: var(--spacing-vertical-medium);
padding-top: var(--spacing-vertical-medium);
2018-07-27 02:24:00 +02:00
}
// Horizontal Rule
2018-05-30 20:12:54 +02:00
hr {
width: 100%;
height: 1px;
background-color: $lbry-gray-1;
margin-bottom: 2rem;
position: relative;
top: 1rem;
2019-02-13 17:27:20 +01:00
html[data-mode='dark'] & {
background-color: rgba($lbry-gray-5, 0.2);
}
2018-05-30 20:12:54 +02:00
}
2018-05-07 06:59:33 +02:00
// Code
2018-11-30 06:49:02 +01:00
pre {
white-space: normal;
}
2018-05-30 20:12:54 +02:00
code {
margin-bottom: var(--spacing-vertical-medium);
padding: var(--spacing-vertical-medium);
2018-10-17 19:14:24 +02:00
background-color: $lbry-gray-1;
color: $lbry-gray-5;
2018-10-17 19:14:24 +02:00
display: block;
2018-05-30 20:12:54 +02:00
font-family: Consolas, 'Lucida Console', 'Source Sans', monospace;
}
2018-06-11 00:32:30 +02:00
a {
color: $lbry-blue-1;
2018-07-22 23:28:33 +02:00
display: inline-block;
}
// Lists
2018-07-22 23:28:33 +02:00
ul,
ol {
margin-bottom: var(--spacing-vertical-medium);
> li {
list-style-position: outside;
}
2018-07-22 23:28:33 +02:00
}
ul {
list-style: initial;
}
li {
margin-left: var(--spacing-vertical-large);
2018-10-17 19:14:24 +02:00
2018-07-22 23:28:33 +02:00
p {
2018-06-11 00:32:30 +02:00
display: inline-block;
2018-07-22 23:28:33 +02:00
}
}
2018-05-07 06:59:33 +02:00
}