You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
156 lines
2.7 KiB
156 lines
2.7 KiB
|
|
// Default Markdown Preview styles
|
|
|
|
// These are the default Markdown Preview styles.
|
|
// They use the syntax-variables to adapt to the color scheme of syntax themes.
|
|
|
|
|
|
@import "syntax-variables";
|
|
|
|
.markdown-preview:not([data-use-github-style]) {
|
|
|
|
@fg: @syntax-text-color;
|
|
@bg: @syntax-background-color;
|
|
|
|
@fg-accent: @syntax-cursor-color;
|
|
@fg-strong: contrast(@bg, darken(@fg, 32%), lighten(@fg, 32%));
|
|
@fg-subtle: contrast(@fg, lighten(@fg, 16%), darken(@fg, 16%));
|
|
|
|
@border: contrast(@bg, lighten(@bg, 16%), darken(@bg, 16%));
|
|
|
|
@margin: 1.5em;
|
|
|
|
|
|
padding: 2em;
|
|
font-size: 1.2em;
|
|
color: @fg;
|
|
background-color: @bg;
|
|
overflow: auto;
|
|
|
|
& > :first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
|
|
// Headings --------------------
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
line-height: 1.2;
|
|
margin-top: @margin;
|
|
margin-bottom: @margin/3;
|
|
color: @fg-strong;
|
|
}
|
|
|
|
h1 { font-size: 2.4em; font-weight: 300; }
|
|
h2 { font-size: 1.8em; font-weight: 400; }
|
|
h3 { font-size: 1.5em; font-weight: 500; }
|
|
h4 { font-size: 1.2em; font-weight: 600; }
|
|
h5 { font-size: 1.1em; font-weight: 600; }
|
|
h6 { font-size: 1.0em; font-weight: 600; }
|
|
|
|
|
|
// Emphasis --------------------
|
|
|
|
strong {
|
|
color: @fg-strong;
|
|
}
|
|
|
|
del {
|
|
color: @fg-subtle;
|
|
}
|
|
|
|
|
|
// Link --------------------
|
|
|
|
a,
|
|
a code {
|
|
color: @fg-accent;
|
|
}
|
|
|
|
|
|
// Images --------------------
|
|
|
|
img {
|
|
max-width: 100%;
|
|
}
|
|
|
|
|
|
// Paragraph --------------------
|
|
|
|
& > p {
|
|
margin-top: 0;
|
|
margin-bottom: @margin;
|
|
}
|
|
|
|
|
|
// List --------------------
|
|
|
|
& > ul,
|
|
& > ol {
|
|
margin-bottom: @margin;
|
|
}
|
|
|
|
|
|
// Blockquotes --------------------
|
|
|
|
blockquote {
|
|
margin: @margin 0;
|
|
font-size: inherit;
|
|
color: @fg-subtle;
|
|
border-color: @border;
|
|
border-width: 4px;
|
|
}
|
|
|
|
|
|
// HR --------------------
|
|
|
|
hr {
|
|
margin: @margin*2 0;
|
|
border-top: 2px dashed @border;
|
|
background: none;
|
|
}
|
|
|
|
|
|
// Table --------------------
|
|
|
|
table {
|
|
margin: @margin 0;
|
|
}
|
|
|
|
th {
|
|
color: @fg-strong;
|
|
}
|
|
|
|
th,
|
|
td {
|
|
padding: .66em 1em;
|
|
border: 1px solid @border;
|
|
}
|
|
|
|
|
|
// Code --------------------
|
|
|
|
code {
|
|
color: @fg-strong;
|
|
background-color: contrast(@syntax-background-color, lighten(@syntax-background-color, 8%), darken(@syntax-background-color, 6%));
|
|
}
|
|
|
|
atom-text-editor {
|
|
margin: @margin 0;
|
|
padding: 1em;
|
|
font-size: .92em;
|
|
border-radius: 3px;
|
|
background-color: contrast(@syntax-background-color, lighten(@syntax-background-color, 4%), darken(@syntax-background-color, 4%));
|
|
}
|
|
|
|
|
|
// KBD --------------------
|
|
|
|
kbd {
|
|
color: @fg-strong;
|
|
border: 1px solid @border;
|
|
border-bottom: 2px solid darken(@border, 6%);
|
|
background-color: contrast(@syntax-background-color, lighten(@syntax-background-color, 8%), darken(@syntax-background-color, 6%));
|
|
}
|
|
|
|
}
|