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

268 lines
4.5 KiB
SCSS
Raw Normal View History

2018-05-07 06:59:33 +02:00
.markdown-preview {
> :first-child {
margin-top: 0;
}
2019-11-14 21:02:15 +01:00
> *:last-child {
margin-bottom: 0;
}
2020-04-01 22:00:09 +02:00
@media (max-width: $breakpoint-small) {
font-size: var(--font-base);
}
// Headers
2018-05-11 22:58:30 +02:00
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
2020-06-01 19:03:19 +02:00
margin-bottom: var(--spacing-m);
2020-09-17 17:32:31 +02:00
font-weight: bold;
2020-01-06 19:32:35 +01:00
&:not(:first-child) {
2020-06-01 19:03:19 +02:00
margin-top: var(--spacing-l);
2020-01-06 19:32:35 +01:00
}
}
h1 {
font-size: 1.7em;
2020-01-06 19:32:35 +01:00
}
h2 {
font-size: 1.5em;
2020-01-06 19:32:35 +01:00
}
h3 {
font-size: 1.4em;
2020-01-06 19:32:35 +01:00
}
h4 {
font-size: 1.3em;
2020-01-06 19:32:35 +01:00
}
h5 {
font-size: 1.2em;
2020-01-06 19:32:35 +01:00
}
h6 {
2020-06-16 22:23:49 +02:00
font-size: 1em;
2018-05-11 22:58:30 +02:00
}
2018-05-07 06:59:33 +02:00
2020-09-17 17:32:31 +02:00
&.markdown-preview--description {
h1 {
font-size: 1.2em;
}
h2 {
font-size: 1.1em;
}
h3 {
font-size: 1em;
}
h4 {
font-size: 0.9em;
}
h5 {
font-size: 0.8em;
}
h6 {
font-size: 0.7em;
}
}
2020-03-21 03:36:52 +01:00
dl,
ul,
ol,
pre,
table {
2020-06-01 19:03:19 +02:00
margin-top: var(--spacing-m);
2020-03-21 03:36:52 +01:00
}
2020-06-01 19:03:19 +02:00
blockquote {
white-space: normal;
2020-06-01 19:03:19 +02:00
p:first-child {
margin-top: 0;
}
}
2020-03-21 03:36:52 +01:00
// Tables
2018-05-30 20:12:54 +02:00
table {
margin-bottom: 1.2rem;
2020-06-01 19:03:19 +02:00
padding: var(--spacing-m);
2019-08-06 22:04:55 +02:00
word-break: normal;
tr {
td,
th,
td:first-of-type,
th:first-of-type,
td:last-of-type,
th:last-of-type {
2020-06-01 19:03:19 +02:00
padding: var(--spacing-s) var(--spacing-m);
2020-04-09 19:32:03 +02:00
}
}
th {
border-bottom: 2px solid var(--color-border);
letter-spacing: 0.1rem;
text-align: left;
text-transform: uppercase;
}
tr {
&:not(:last-of-type) {
td {
border-bottom: 1px solid var(--color-border);
}
}
2018-05-30 20:12:54 +02:00
}
}
2018-05-07 06:59:33 +02:00
// Image
img:not(.channel-thumbnail__custom) {
2020-06-01 19:03:19 +02:00
margin-bottom: var(--spacing-m);
padding-top: var(--spacing-m);
max-height: var(--inline-player-max-height);
2020-01-06 19:32:35 +01:00
object-position: left;
@media (max-width: $breakpoint-small) {
font-size: 0.8em;
}
2018-07-27 02:24:00 +02:00
}
.img__zoomable {
cursor: pointer; // 'zoom-in' would be ideal, but browser-dependant.
}
// Horizontal Rule
2018-05-30 20:12:54 +02:00
hr {
margin-bottom: 2rem;
position: relative;
top: 1rem;
border: 1px solid var(--color-editor-hr-preview);
2018-05-30 20:12:54 +02:00
}
2018-05-07 06:59:33 +02:00
// Code blocks
2018-11-30 06:49:02 +01:00
pre {
white-space: normal;
background: transparent;
2020-04-08 17:03:41 +02:00
word-break: break-all;
code {
margin-bottom: var(--spacing-m);
padding: var(--spacing-s) var(--spacing-s) calc(var(--spacing-s) - 2px);
display: block;
white-space: pre-wrap;
}
2018-11-30 06:49:02 +01:00
}
// Inline code
2018-05-30 20:12:54 +02:00
code {
color: var(--color-editor-inline-code-fg-preview);
background-color: var(--color-editor-inline-code-bg-preview);
display: inline-block;
border-radius: 0.2rem;
2019-11-22 22:13:00 +01:00
font-size: var(--font-small);
padding: calc(var(--spacing-xxs) - 4px) var(--spacing-xxs) calc(var(--spacing-xxs) - 5px);
}
2019-12-04 19:07:40 +01:00
a {
@extend .button--link;
}
2019-06-17 22:32:38 +02:00
a,
button {
2018-07-22 23:28:33 +02:00
display: inline-block;
2019-06-17 22:32:38 +02:00
.button__label {
white-space: normal;
}
2018-07-22 23:28:33 +02:00
}
2019-03-24 02:59:09 +01:00
button {
white-space: normal;
text-align: left;
}
2019-06-09 08:57:51 +02:00
.preview-link__url {
font-size: var(--font-xxsmall);
margin-top: 0;
padding-left: var(--spacing-xs);
background-color: black;
color: var(--color-gray-2);
width: 100%;
flex: 1;
border-bottom-left-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius);
border-top-left-radius: 0;
border-top-right-radius: 0;
height: 2rem;
line-height: 2rem;
2020-10-28 17:21:23 +01:00
.button__label {
white-space: nowrap;
}
&:hover {
text-decoration: underline;
color: var(--color-gray-2);
}
&:before {
content: '';
position: absolute;
bottom: 2rem;
left: 0;
right: 0;
height: 90px;
background: linear-gradient(to top, #000000, #00000000 70%);
}
}
2019-06-09 08:57:51 +02:00
.preview-link {
2019-06-21 03:00:52 +02:00
padding: 0;
margin: 0;
padding-right: var(--spacing-s);
2019-11-22 22:13:00 +01:00
background-color: var(--color-primary-alt);
2019-06-09 08:57:51 +02:00
display: block;
align-items: center;
2019-06-21 03:00:52 +02:00
word-break: break-all;
overflow: hidden;
border-radius: var(--border-radius);
.claim-preview {
border: 0;
background: transparent;
}
.media__subtitle {
display: block;
}
2019-06-09 08:57:51 +02:00
}
.claim-preview-metadata {
padding: var(--spacing-s) 0;
}
2019-06-21 03:00:52 +02:00
.preview-link__thumbnail {
width: 12rem;
border-top-right-radius: 0;
border-top-left-radius: 0;
border-bottom-right-radius: 0;
2019-06-21 03:00:52 +02:00
}
.preview-link__thumbnail--channel {
width: 8rem;
}
2019-06-21 03:00:52 +02:00
.preview-link__description {
2020-06-01 19:03:19 +02:00
margin-top: var(--spacing-s);
2019-06-09 08:57:51 +02:00
}
.file-viewer__embedded-header {
2021-04-26 21:19:17 +02:00
padding: var(--spacing-xxs);
}
2018-05-07 06:59:33 +02:00
}
2019-12-06 21:57:07 +01:00
.editor-preview {
background-color: var(--color-input-bg);
}