commit
a5327d75a4
2 changed files with 502 additions and 0 deletions
@ -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, <svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='16' height='16'><path fill-rule='evenodd' d='M4.72 3.22a.75.75 0 011.06 1.06L2.06 8l3.72 3.72a.75.75 0 11-1.06 1.06L.47 8.53a.75.75 0 010-1.06l4.25-4.25zm6.56 0a.75.75 0 10-1.06 1.06L13.94 8l-3.72 3.72a.75.75 0 101.06 1.06l4.25-4.25a.75.75 0 000-1.06l-4.25-4.25z' fill='white'></path></svg>"); |
|||
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, <svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='16' width='16'><path d='M2.003 2.5a.5.5 0 00-.723-.447l-1.003.5a.5.5 0 00.446.895l.28-.14V6H.5a.5.5 0 000 1h2.006a.5.5 0 100-1h-.503V2.5zM5 3.25a.75.75 0 01.75-.75h8.5a.75.75 0 010 1.5h-8.5A.75.75 0 015 3.25zm0 5a.75.75 0 01.75-.75h8.5a.75.75 0 010 1.5h-8.5A.75.75 0 015 8.25zm0 5a.75.75 0 01.75-.75h8.5a.75.75 0 010 1.5h-8.5a.75.75 0 01-.75-.75zM.924 10.32l.003-.004a.851.851 0 01.144-.153A.66.66 0 011.5 10c.195 0 .306.068.374.146a.57.57 0 01.128.376c0 .453-.269.682-.8 1.078l-.035.025C.692 11.98 0 12.495 0 13.5a.5.5 0 00.5.5h2.003a.5.5 0 000-1H1.146c.132-.197.351-.372.654-.597l.047-.035c.47-.35 1.156-.858 1.156-1.845 0-.365-.118-.744-.377-1.038-.268-.303-.658-.484-1.126-.484-.48 0-.84.202-1.068.392a1.858 1.858 0 00-.348.384l-.007.011-.002.004-.001.002-.001.001a.5.5 0 00.851.525zM.5 10.055l-.427-.26.427.26z' fill='white'></path></svg>"); |
|||
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, <svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='16' height='16'><path fill-rule='evenodd' d='M2.5 2.75a.25.25 0 01.25-.25h10.5a.25.25 0 01.25.25v10.5a.25.25 0 01-.25.25H2.75a.25.25 0 01-.25-.25V2.75zM2.75 1A1.75 1.75 0 001 2.75v10.5c0 .966.784 1.75 1.75 1.75h10.5A1.75 1.75 0 0015 13.25V2.75A1.75 1.75 0 0013.25 1H2.75zm9.03 5.28a.75.75 0 00-1.06-1.06L6.75 9.19 5.28 7.72a.75.75 0 00-1.06 1.06l2 2a.75.75 0 001.06 0l4.5-4.5z' fill='white'></path></svg>"); |
|||
background-size: 18px 18px; |
|||
height: 18px; |
|||
width: 18px; |
|||
padding-left: 2px; |
|||
} |
|||
/*---------------------------------------------------------------------------*/ |
|||
|
|||
|
|||
@ -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; |
|||
} |
|||
*/ |
|||
|
|||
} |
|||
/*---------------------------------------------------------------------------*/ |
|||
|
|||
|
|||
Loading…
Reference in new issue