From b17f7d6299fa3076ac4520881536a902b9a47c24 Mon Sep 17 00:00:00 2001 From: Syndamia Date: Sun, 27 Nov 2022 11:53:03 +0200 Subject: [config/joplin] Added userchrome and userstyle css files --- .config/joplin-desktop/userchrome.css | 30 ++++ .config/joplin-desktop/userstyle.css | 302 ++++++++++++++++++++++++++++++++++ 2 files changed, 332 insertions(+) create mode 100644 .config/joplin-desktop/userchrome.css create mode 100644 .config/joplin-desktop/userstyle.css (limited to '.config') diff --git a/.config/joplin-desktop/userchrome.css b/.config/joplin-desktop/userchrome.css new file mode 100644 index 0000000..29ce612 --- /dev/null +++ b/.config/joplin-desktop/userchrome.css @@ -0,0 +1,30 @@ +/* For styling the entire Joplin app (except the rendered Markdown, which is defined in `userstyle.css`) */ + +/* CSS for the Dark theme to make the CodeMirror editor mimic the scheme of the old ACE editor */ + +span.cm-header { + color: #CF6A4C; + font-size: inherit !important; + } + +span.cm-link-text, span.cm-strong, span.cm-em { + color: #8F9D6A !important; + font-style: normal; + font-weight: normal; + } + +span.cm-variable-2, span.cm-hr { + color: #F9EE98 !important; + } + +span.cm-meta, span.cm-property { + color: #7587A6 !important; + } + + span.cm-string.cm-url { + color: #DDDDDD !important; + } + +span.cm-comment { + color: #DAD085 !important; + } diff --git a/.config/joplin-desktop/userstyle.css b/.config/joplin-desktop/userstyle.css new file mode 100644 index 0000000..5f02386 --- /dev/null +++ b/.config/joplin-desktop/userstyle.css @@ -0,0 +1,302 @@ +/* For styling the rendered Markdown */ + +:root { + --fg-color: #ffeede; + --bg-color: #262626; + --fg-selection-color: #001121; + --bg-selection-color: #81949f; + --border-color: #777; + --blockquote-color: #919191; + --blockquote-border-color: #919191; + --header-color: #d49408; + --accent-line-color: #d47408; + --strong-color: #c35b5b; + --a-color: #cd81a7; + --a-hover-color: #eeaacd; + --code-bg-color: #414141; + --pre-bg-color: #414141; + --em-color: #e17b08; + --table-border-color: #777; + --tr-bg-color: #262626; + --alternating-row-color: #353535; +} + +/* Custom mouse text selection colors */ + +::-moz-selection { + color: var(--fg-selection-color); + background: var(--bg-selection-color); +} + +::selection { + color: var(--fg-selection-color); + background: var(--bg-selection-color); +} + +/* Global */ + +body { + min-height: calc(100vh - 16px); + color: var(--fg-color); + background-color: var(--bg-color); + border-color: var(--border-color); +} + +body, td, th { + font: 18px 'Open Sans', sans-serif; + line-height: 1.5em; +} + +img { + max-width: 100%; + box-sizing: border-box; + image-rendering: crisp-edges; +} + +img, hr { + border: 1px solid var(--border-color); +} + +strong { + color: var(--strong-color); +} + +a, a strong { + text-decoration: none; + color: var(--a-color); + border-bottom: 1px dashed; +} + +a:hover, a strong:hover { + color: var(--a-hover-color); +} + +a * { + color: var(--fg-color); +} + +sup a { + border: none; +} + +i, em { + color: var(--em-color); +} + +article { + flex: 1; + max-width: 52.7em; /* Equivalent to 50em on 19px font-size */ + min-height: calc(100vh - 228px); + overflow: auto; + padding: 0 0.4em; + box-sizing: border-box; +} + +ul, ol { + padding-inline-start: 30px; +} + +h1, h2, h3, h4, h5, h6, b { + color: var(--header-color); + border-color: var(--border-color); +} + +h1 { + font-size: 1.7em; + line-height: 1.2em; + margin-block-end: 0.5em; +} + +h1:not(:first-child), hr ~ h1 { + margin-top: 4em; +} + +h2 { + margin-top: 3em; +} + +h1::before, h2::before, h3::before, h4::before, h5::before { + content: "\2550 "; + color: var(--border-color); +} + +h1::after, h2::after, h3::after, h4::after, h5::after { + color: var(--border-color); +} + +h1::after { + content: " \2550 \2550 \2550 \2550 \2550"; +} + +h2::after { + content: " \2550 \2550 \2550"; +} + +h3::after { + content: " \2550"; +} + +h4 { + border-bottom: 2px solid var(--border-color); +} + +/* Show link icon next to headings */ + +h3, h4, h5, h6 { + margin-block-start: 1.25em; + margin-block-end: 0.16em; + line-height: 1.25em; +} + +h2 + a, h3 + a, h4 + a, h5 + a, h6 + a { + display: inline; + border: none !important; +} + +h2 + a img, h3 + a img, h4 + a img, h5 + a img, h6 + a img { + height: 1.3em; + border: none; + vertical-align: text-top; +} + +h2 + a img, h3 + a img, h4 + a img, h5 + a img, h6 + a img, .icon, .file-icon, .file-wrapper > summary { + /* Since link images are made for dark mode, and have white-ish foreground, + * this filter makes them black (when in light mode) + */ + filter: none; +} + + /* The following CSS is a modified version of sindresorhus's github-markdown-css repo: https://github.com/sindresorhus/github-markdown-css */ + +code, pre { + font-family: monospace; + font-size: 1em; +} + +code { + padding: .2em .4em; + margin: 0; + font-size: 85%; + background-color: var(--code-bg-color); + border-radius: 3px; +} + +pre code { + display: inline; + padding: 0; + margin: 0; + overflow: visible; + line-height: inherit; + word-wrap: normal; + background-color: var(--code-bg-color); + border: 0; +} + +pre > code { + padding: 0; + margin: 0; + font-size: 100%; + word-break: normal; + white-space: pre; + background-color: inherit; + border: 0; +} + +pre { + padding: 16px; + overflow: auto; + font-size: 85%; + line-height: 1.45; + background-color: var(--pre-bg-color); + border-radius: 3px; + margin: 0; + word-break: normal; + word-wrap: normal; +} + +table { + border-spacing: 0; + border-collapse: collapse; + margin-top: 10px; + margin-bottom: 10px; + width: 100%; + overflow: auto; +} + +table td, table th { + word-break: normal !important; +} + +table td:not(:empty) { + padding: 0.5em; +} + +table th:not(:empty) { + font-size: 1.1em; + padding: 0.2em; + font-weight: 600; +} + +table code { + white-space: normal; + font-size: 0.7em; +} + +table td:not(:first-of-type), table th:not(:first-of-type) { + border-left: 2px dashed var(--table-border-color); +} + +table tr:not(:first-of-type) { + background-color: var(--tr-bg-color); +} + +thead tr { + border-bottom: 2px dashed var(--table-border-color); +} + +table tr:nth-child(2n), thead tr { + background-color: var(--alternating-row-color); +} + +blockquote { + margin: 0; + margin-top: 0; + margin-bottom: 16px; + padding: 0 1em; + color: var(--blockquote-color); + border-left: .25em solid var(--blockquote-border-color); +} + +blockquote > :first-child { + margin-top: 0; +} + +blockquote > :last-child { + margin-bottom: 0; +} + +dt { + font-size: 1.2em; +} + +dt * { + vertical-align: middle; +} + +dt a { + border: none; +} + +dt img, .svg { + max-height: 1em; + box-sizing: border-box; +} + +dd { + margin-bottom: 1em; + line-height: 1.5em; +} + +dd code { + font-size: 0.8em; +} -- cgit v1.2.3