You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
224 lines
9.2 KiB
224 lines
9.2 KiB
/* 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;
|
|
}
|
|
/*---------------------------------------------------------------------------*/
|
|
|
|
|