sunhat/themes/typora/ia_typora.css
2024-06-04 13:34:53 -07:00

310 lines
5.2 KiB
CSS

:root {
--accent-color: #aeb1b5; /* #'s before H1-3 */
--background-color: white;
--border-color: #ddd;
--code-bg-color: #f8f8f8;
--font-color: #42464c;
--header-color: #222324;
--link-color: #2077b2;
--control-text-color: #667176;
--side-bar-bg-color: #fafafa;
--body-font: iAWriterMonoS-Regular, monospace, Roboto;
--border-radius: 2px;
--document-horizontal-margin: 80px;
--document-padding-x: 10ch;
--font-size: 20px;
--h1-fontsize: 20px; /* 1,5 rem = 24px */
--h2-fontsize: 20px; /* 1,375 rem = 22px */
--h3-fontsize: 20px; /* 1,25 rem = 20px */
--h4-fontsize: 20px; /* 1,125 rem = 18px */
--line-height: 1.8;
--main-content-margin: 0 auto;
--main-content-max-width: 85ch;
--monospace-font-size: 20px;
--monospace-font: iAWriterMonoS-Regular, monospace;
--monospace-line-height: 1.6;
--monospace: var(--monospace-font); /* Fixes source code mode */
--nav-width: 200px;
--vertical-padding: 40px;
}
/* Narrow layout styles */
@media (max-width: 640px) {
:root {
--document-padding-x: 4ch;
}
}
html {
font-size: var(--font-size);
background-color: var(--background-color);
}
html,
body {
color: var(--font-color);
font-family: var(--body-font);
line-height: var(--line-height);
}
#write {
/* size of writing area: */
padding-left: var(--document-padding-x);
padding-right: var(--document-padding-x);
max-width: var(--main-content-max-width);
box-sizing: border-box;
}
/**
* ---------------------
* Block Elements
*/
/* yaml */
pre.md-meta-block {
background-color: var(--background-color);
padding-bottom: .5rem;
color: var(--accent-color);
border-bottom: 2px solid var(--border-color);
font-family: var(--monospace-font);
}
/* headings */
h1, h2, h3 {
font-weight: bold;
color: var(--header-color);
}
h1 {
margin-top: 1rem;
margin-bottom: 1rem;
font-size: var(--h1-fontsize);
}
h1:not(:first-child) {
margin-top: 1rem;
}
h2 {
margin-top: 1rem;
margin-bottom: 0rem;
font-size: var(--h2-fontsize);
}
h3 {
margin-top: 1rem;
margin-bottom: 0rem;
font-size: var(--h3-fontsize);
}
h4, h5, h6 {
color: var(--header-color);
margin-top: 1rem;
margin-bottom: 0rem;
font-size: 1rem;
}
h4 {
font-size: var(--h4-fontsize);
}
h6 {
color: var(--control-text-color);
}
h1::before,
h2::before,
h3::before {
font-weight: 400;
text-align: right;
width: 5ch;
padding-right: 1ch;
margin-left: -5ch;
color: var(--accent-color);
display: inline-block;
}
h1::before {
content: '#';
}
h2::before {
content: '##';
}
h3::before {
content: '###';
}
h1 tt,
h1 code {
font-size: inherit;
}
h2 tt,
h2 code {
font-size: inherit;
}
h3 tt,
h3 code {
font-size: inherit;
}
h4 tt,
h4 code {
font-size: inherit;
}
h5 tt,
h5 code {
font-size: inherit;
}
h6 tt,
h6 code {
font-size: inherit;
}
/* table */
table {
margin-top: 1rem;
margin-bottom: 1rem;
}
table tr:nth-child(2n),
thead {
background-color: var(--side-bar-bg-color);
}
td,
th {
border-style: solid;
border-color: var(--border-color);
border-width: 1px;
padding: .35rem .7rem
}
li p {
margin: 0;
}
.task-list {
padding-left: 0;
}
.task-list-item {
padding-left: 1.5em;
margin-bottom: 0rem;
}
#write input[type='checkbox'] {
margin-top: 5px;
}
blockquote {
margin: 1rem 0;
padding-left: 2ch;
margin-left: .5ch;
position: relative;
overflow: hidden;
border-left: 2px solid var(--border-color);
color: var(--accent-color);
}
/* horizontal line */
hr {
border: none;
border-bottom: 2px solid var(--border-color);
margin-top: 1.4rem;
margin-bottom: 1.4rem;
}
p {
margin: 2rem 0;
}
/**
* Code Fences
* see http:/*support.typora.io/Code-Block-Styles
*/
.cm-s-inner .CodeMirror-gutters {
background: var(--code-bg-color);
}
.code-tooltip {
box-shadow: none;
border-radius: var(--border-radius);
background-color: var(--code-bg-color);
border-color: var(--border-color);
border-style: solid;
border-width: 1px;
}
.code-tooltip input {
outline: none;
width: 20ch;
}
.md-fences .code-tooltip {
bottom: -1.8rem;
padding: none;
}
.md-fences.md-focus .cm-s-inner {
/* Remove bottom right border radius when tooltip is shown */
border-bottom-right-radius: 0;
}
/* code tooltip autocomplete list */
.autoComplt-hint {
background-color: transparent !important;
margin: 0 !important;
padding: 0.125rem 0.375rem !important;
color: var(--text-color) !important;
line-height: var(--line-height) !important;
height: 1.4rem !important;
}
.autoComplt-hint-selected {
background-color: var(--link-color) !important;
color: var(--background-color) !important;
}
/* basic styles */
.md-fences,
code,
tt {
border: 1px solid var(--border-color);
background-color: var(--code-bg-color);
font-family: var(--monospace-font);
font-size: var(--monospace-font-size);
border-radius: .25rem;
padding: 0 .125rem;
line-height: var(--monospace-line-height);
}
.md-fences {
margin-bottom: 18px;
margin-top: 15px;
padding: 0.2em 1em;
padding-top: 8px;
padding-bottom: 6px;
}
a {
color: var(--link-color);
}
/**
* Control UI (optional)
*/
.outline-item:hover {
color: var(--header-color);
}
#write div.md-toc-tooltip {
background-color: var(--background-color);
}