commit a5327d75a445779851b96ade865a82c0094726de Author: George Parsehyan Date: Sat Jun 5 21:07:17 2021 +0200 init commit diff --git a/userchrome.css b/userchrome.css new file mode 100644 index 0000000..d628d11 --- /dev/null +++ b/userchrome.css @@ -0,0 +1,224 @@ +/* For styling the entire Joplin app (except the rendered Markdown, which is defined in `userstyle.css`) */ +/***************************************************************************** + * Styling for Dark Theme * + * * + * For styling the entire Joplin app (except the rendered Markdown, * + * which is defined in `userstyle.css`) * + *****************************************************************************/ + +:root { + --editor-heading-color: #569CD6; + --editor-heading-font-weight: bold; /* not used */ + --editor-heading-font-size: 1.1em; /* not used */ + --editor-code-color: greenyellow; + --editor-text-in-brackets-color: #f9ee98; /* yellowish */ + --editor-text-in-parens-color: #dddddd; /* lightgrey */ + --editor-strong-color: #2c78b6; + --editor-emphasis-color: #2c78b6; + --editor-emphasis-font-style: italic; + --editor-list-element-color: deepskyblue; + --editor-checkbox-color: lightgrey; + --editor-checkbox-checked-color: #FFCB6B; /* orange */ + --editor-selected-text-bgcolor: #0663d3; /* blue */ +} +/* not used: to take effect the proper section must be uncommented */ + +/*------ Editor: Headings ---------------------------------------------------*/ +.cm-header { + color: var(--editor-heading-color) !important; +} +/*---------------------------------------------------------------------------*/ + +/*------ Editor: inline code and codeblocks ---------------------------------*/ +pre.CodeMirror-line span[role="presentation"] span.cm-comment { + color: var(--editor-code-color) !important; +} +/*---------------------------------------------------------------------------*/ + +/*------ Editor: text in brackets [ ] ---------------------------------------*/ +.cm-link-text { + color: var(--editor-text-in-brackets-color) !important; +} +/*---------------------------------------------------------------------------*/ + +/*------ Editor: text/link in parens ( ) ------------ ----------------------*/ +.cm-string.cm-url { + color: var(--editor-text-in-parens-color) !important; +} +/*---------------------------------------------------------------------------*/ + +/*------ Editor: strong -----------------------------------------------------*/ +.cm-strong { + color: var(--editor-strong-color) !important; +} +/*---------------------------------------------------------------------------*/ + +/*------ Editor: italics ----------------------------------------------------*/ +.cm-em { + color: var(--editor-emphasis-color) !important; +} +/*---------------------------------------------------------------------------*/ + +/*------ Editor: list elements and checkbox elements ------------------------*/ +.cm-variable-2, .cm-variable-3, .cm-keyword { + color: var(--editor-list-element-color) !important; +} +/*---------------------------------------------------------------------------*/ + +/*------ Editor: checkbox [ ] and [x] ---------------------------------------*/ +.cm-meta { + color: var(--editor-checkbox-checked-color) !important; +} +.cm-property { + color: var(--editor-checkbox-checked-color) !important; +} +/*---------------------------------------------------------------------------*/ + +/*------ Editor: selected text background color -----------------------------*/ +.CodeMirror-selected { + background: var(--editor-selected-text-bgcolor) !important; +} +/*---------------------------------------------------------------------------*/ + +/*------ Notebook and note list panes: Dim items ----------------------------*/ +/* +a.list-item { + color: #A3A79F !important; +} + +.fas.fa-caret-right, .fas.fa-caret-down { + color: #575856 !important; +} + +.note-list input[type="checkbox"i] { + opacity: .5; +} +*/ +/*---------------------------------------------------------------------------*/ + +/*------ Notebook pane: use lines for notebook tree -------------------------*/ +/* +.folders i.fas.fa-caret-right, .folders i.fas.fa-caret-down { + padding-right: 3px !important; +} + +.folders .list-item-container { + margin: 0 !important; +} + +.folders a.list-item { + border-left: 1px solid #575856 !important; + padding-left: 9px; + margin: 0 !important; +} +*/ +/*---------------------------------------------------------------------------*/ + +/*------ Remove New notebook button -----------------------------------------*/ +/* +#react-root > div > div > div.resizableLayoutItem.rli-root > div.resizableLayoutItem.rli-sideBar > div > div > div:nth-child(1) > div:nth-child(1) > button { + display: none; +} +*/ +/*---------------------------------------------------------------------------*/ + +/*------ Remove New to-do button --------------------------------------------*/ +/* +button[title="New to-do"] { + display: none; +} +*/ +/*---------------------------------------------------------------------------*/ + +/*------ Remove New note button ---------------------------------------------*/ +/* +button[title="New note"] { + display: none; +} +*/ +/*---------------------------------------------------------------------------*/ + +/*------ Remove Code View button --------------------------------------------*/ +/* +div.editor-toolbar div button { + display: none !important; +} +*/ +/*---------------------------------------------------------------------------*/ + +/*------ Remove Spellcheck button -------------------------------------------*/ +/* +a[title="Spell checker"] { + display: none; +} +*/ +/*---------------------------------------------------------------------------*/ + +/*------ Input fields: Search (global, local), Note Title -------------------*/ +/* .header input { */ +input { + border-radius: 14px !important; + border: 1px solid rgb(85, 85, 85); + outline: none; + /* + background-color: #888888 !important; + */ +} +/*---------------------------------------------------------------------------*/ + +/*------ Attachment pane: make first 2 columns easier to read ---------------*/ +#react-root > div > div > div:nth-child(1) > div:nth-child(2) > table > tbody > tr > td.titleCell, +#react-root > div > div > div:nth-child(1) > div:nth-child(2) > table > tbody > tr > td:nth-child(2) { + font-size: unset !important; +} +/*---------------------------------------------------------------------------*/ + +/*------ Sync button --------------------------------------------------------*/ +/* Add button background, add rounded corners */ +div.side-bar > div > button { + background-color: #25282E !important; + border-radius: 16px !important; +} + +/* Outline colour change on hover */ +div.side-bar > div > button:hover { + border: 1px solid #3B74DF !important; + border-radius: 16px !important; +} + +/* Prevent button text color changing on hover */ + div.side-bar > div > button > span { + color: #FFFFFF !important; +} +/*---------------------------------------------------------------------------*/ + +/*------ Toolbar buttons ----------------------------------------------------*/ +.icon-code:before { + display: block; + content: url("data:image/svg+xml;charset=UTF-8, "); + background-size: 18px 18px; + height: 18px; + width: 18px; + padding-left: 3px; +} + +.icon-numbered-list:before { + display: block; + content: url("data:image/svg+xml;charset=UTF-8, "); + background-size: 18px 18px; + height: 18px; + width: 18px; + padding-left: 3px; +} + +.icon-to-do-list:before { + display: block; + content: url("data:image/svg+xml;charset=UTF-8, "); + background-size: 18px 18px; + height: 18px; + width: 18px; + padding-left: 2px; +} +/*---------------------------------------------------------------------------*/ + + diff --git a/userstyle.css b/userstyle.css new file mode 100644 index 0000000..889b0d1 --- /dev/null +++ b/userstyle.css @@ -0,0 +1,278 @@ +/* For styling the rendered Markdown */ +/***************************************************************************** + * Styling for Dark Theme * + * * + * Rendered Markdown * + * Application styling is defined in `userchrome.css` * + *****************************************************************************/ + +:root { + --font-size: 13px; + --mark-bgcolor: #BBDD66; /* greenish */ + --search-result-bgcolor: #F3B717; /* amber */ + --current-search-result-bgcolor: #CF3F00; /* red */ + --preformatted-text-bgcolor: #282c34; /* darkgray */ + --heading-bgcolor: #444444; /* gray */ + --heading-print-bgcolor: #eeeeee; /* lightgray */ +} + +/*------ Change the font size to 13px ---------------------------------------*/ +body, th, td, p.inline-code { + font-size: var(--font-size); +} +/*---------------------------------------------------------------------------*/ + +/*------ Better inline code size --------------------------------------------*/ +.inline-code { + font-size: 1em; +} +/*---------------------------------------------------------------------------*/ + +/*------ Colors for different mark tags -------------------------------------*/ +/* ==mark== */ +mark { + background-color: var(--mark-bgcolor); + padding: 1px 2px; +} +/* occurrences of search term */ +mark[data-markjs] { + background-color: var(--search-result-bgcolor); + padding: 0; +} +/* current search term (local search) */ +mark[data-markjs].mark-selected { + background-color: var(--current-search-result-bgcolor); +} +/*---------------------------------------------------------------------------*/ + +/*------ align checkbox to the first line (baseline) ------------------------*/ +li.md-checkbox .checkbox-wrapper { + align-items: baseline; +} +/*---------------------------------------------------------------------------*/ + +/*------ Add background and padding to preformatted text --------------------*/ +pre { + padding: 0.5em; + background: var(--preformatted-text-bgcolor); +} +/*---------------------------------------------------------------------------*/ + +/*------ Headings: change background and padding ----------------------------*/ +h1, h2, h3, h4, h5, h6 { + background-color: var(--heading-bgcolor); + padding-bottom: .1em; + padding-top: .2em; + padding-left: .4em; + border-bottom: unset; +} +/*---------------------------------------------------------------------------*/ + +/*------ Headings: Use nested counters --------------------------------------*/ +body { counter-reset: h1counter; } +h1 { counter-reset: h2counter; } +h2 { counter-reset: h3counter; } +h3 { counter-reset: h4counter; } +h4 { counter-reset: h5counter; } +h5 { counter-reset: h6counter; } +h6 {} + +h1:before { + counter-increment: h1counter; + content: counter(h1counter) ".\0000a0\0000a0"; +} + +h2:before { + counter-increment: h2counter; + content: counter(h1counter) "." counter(h2counter) ".\0000a0\0000a0"; +} + +h3:before { + counter-increment: h3counter; + content: counter(h1counter) "." counter(h2counter) "." counter(h3counter) ".\0000a0\0000a0"; +} + +h4:before { + counter-increment: h4counter; + content: counter(h1counter) "." counter(h2counter) "." counter(h3counter) "." counter(h4counter) ".\0000a0\0000a0"; +} + +h5:before { + counter-increment: h5counter; + content: counter(h1counter) "." counter(h2counter) "." counter(h3counter) "." counter(h4counter) "." counter(h5counter) ".\0000a0\0000a0"; +} + +h6:before { + counter-increment: h6counter; + content: counter(h1counter) "." counter(h2counter) "." counter(h3counter) "." counter(h4counter) "." counter(h5counter) "." counter(h6counter) ".\0000a0\0000a0"; +} +/*---------------------------------------------------------------------------*/ + +/*------ TOC: Use nested counters for list items ----------------------------*/ +.table-of-contents ol { + counter-reset: list-item; +} +.table-of-contents li { + display: block; counter-increment: list-item; +} +.table-of-contents li:before { + content: counters(list-item,'.') '.\0000a0'; +} +/*---------------------------------------------------------------------------*/ + +/*------ TOC: Make TOC a fixed height and scrollable ------------------------*/ +/* +.table-of-contents { + overflow-y: auto; + height: 18em; +} +*/ +/*---------------------------------------------------------------------------*/ + +/*------ TOC: Sidebar (move mouse to right edge) ----------------------------*/ +@media not print { + + nav.table-of-contents ul { + list-style-type: none; + margin-top: 0px; + margin-bottom: 0px; + } + + nav.table-of-contents>ul { + top: 5px; + right: 0px; + z-index: 99; + + font-size: 12px; + position: fixed; + padding: 15px; + + border-radius: 10px 0px 0px 10px; + margin: 0px; + + overflow: hidden; + height: 90%; + width: 5px; + transition: .2s; + } + + nav.table-of-contents::after { + content: "[TOC - move your cursor to the right edge]"; + color: #dddddd; + } + + nav.table-of-contents>ul:hover { + background: #444444; + box-shadow: -5px 0px 10px 0px rgba(211,211,211,0.75); + + width: 40%; + color: none; + overflow: scroll; + } + + nav.table-of-contents>ul:hover::before { + content: "TABLE OF CONTENTS"; + } + + nav.table-of-contents>ul:hover li { + display: list-item; + } + + nav.table-of-contents li { + display: none; + white-space: nowrap; + overflow: hidden; + margin: 0px; + padding: 0px; + } + + nav.table-of-contents a { + text-decoration: none !important; + } + +} +/*---------------------------------------------------------------------------*/ + +/*------ Katex: Make font (symbols and formulas) bigger ---------------------*/ +/* +.katex { + font-size: 1.6em; +} +*/ +/*---------------------------------------------------------------------------*/ + +/*------ set general link color (includes TOC links) ------------------------*/ +/* +a { + color: #a6a6ff; +} +*/ +/*---------------------------------------------------------------------------*/ + +/*------ change the color of INTERNAL links ---------------------------------*/ +/* +a[data-resource-id] { + color: #d28fff; +} +*/ +/*---------------------------------------------------------------------------*/ + +/*------ change other resource link icons color to internal link color ------*/ +/* +.resource-icon { + background-color: #d28fff; +} +*/ +/*---------------------------------------------------------------------------*/ + +/*------ do not display the Joplin resource icon ----------------------------*/ +/* +.resource-icon.fa-joplin { + display: none; +} +*/ +/*---------------------------------------------------------------------------*/ + +/*------ Better alignment for resource icons --------------------------------*/ +.resource-icon { + top: .4em !important; +} +/*---------------------------------------------------------------------------*/ + +/*------ thinner outline for links and sections -----------------------------*/ +a, summary { + outline-width: 3px; +} +/*---------------------------------------------------------------------------*/ + +/*------ no outline for sections --------------------------------------------*/ +summary { + outline: none; +} +/*---------------------------------------------------------------------------*/ + +/*------ Print: Adjustments for printing and PDF export ---------------------*/ +@media print { + + /* reset background and padding for preformatted text */ + pre { + padding: unset; + background: unset; + } + + /* lighter background for headings */ + h1, h2, h3, h4, h5, h6 { + background-color: var(--heading-print-bgcolor); + } + + /* do not print note title (or when exporting to PDF) */ + /* + .exported-note-title { + display: none !important; + } + */ + +} +/*---------------------------------------------------------------------------*/ + +