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.
278 lines
7.7 KiB
278 lines
7.7 KiB
/* 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;
|
|
}
|
|
*/
|
|
|
|
}
|
|
/*---------------------------------------------------------------------------*/
|
|
|
|
|