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