CoastalCommitsPastes/client/styles/markdown.css
2022-03-26 22:35:34 -07:00

115 lines
2.2 KiB
CSS

article {
max-width: var(--main-content);
margin: 0 auto;
line-height: 1.9;
}
article > * + * {
margin-top: 2em;
}
article video,
article img {
max-width: 100%;
width: auto;
display: block;
}
article [id]::before {
content: "";
display: block;
height: var(--gap-half);
margin-top: calc(var(--gap-half) * -1);
visibility: hidden;
}
/* Lists */
article ul {
padding: 0;
list-style-position: inside;
list-style-type: circle;
}
article ol {
padding: 0;
list-style-position: inside;
}
article ul li.reset {
display: flex;
align-items: flex-start;
list-style-type: none;
margin-left: -0.5rem;
}
article ul li.reset .check {
display: flex;
align-items: center;
margin-right: 0.51rem;
}
/* Checkbox */
input[type="checkbox"] {
vertical-align: middle;
appearance: none;
display: inline-block;
background-origin: border-box;
user-select: none;
flex-shrink: 0;
height: 1rem;
width: 1rem;
background-color: var(--bg);
color: var(--fg);
border: 1px solid var(--fg);
border-radius: 3px;
}
input[type="checkbox"]:checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='black' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3e%3c/svg%3e");
border-color: transparent;
background-color: currentColor;
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
}
html[data-theme="light"] input[type="checkbox"]:checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3e%3c/svg%3e");
}
input[type="checkbox"]:focus {
outline: none;
border-color: var(--fg);
}
/* Code Snippets */
.token-line:not(:last-child) {
min-height: 1.4rem;
}
article *:not(pre) > code {
font-weight: 500;
font-family: var(--font-sans);
}
article li > p {
display: inline-block;
padding: 0;
margin: 0;
}
article code > * {
font-family: var(--font-mono);
}
article pre {
overflow-x: auto;
border-radius: var(--inline-radius);
line-height: 1.8;
padding: 1rem;
font-size: 0.875rem;
}