86

I modified the CSS found here and created another dark mode version, I tried to create a tree-list type navigation with a minimal look.

Instructions:
add [toc] in your Joplin document
copy the CSS into userstyle.css found under Options > Appearance
close all instances of Joplin and relaunch & move the mouse cursor to the upper corner in the read panel (just under the first heading)

nav.table-of-contents ul {
	margin-top: 0px;
	margin-bottom: 0px;
}

nav.table-of-contents>ul {
 	top: 41px;
	right: 0px;
	z-index: 99;
	
	font-size: 12px;
	position: fixed;
	padding: 15px;
	
	border-radius: 3px 0px 0px 3px;
	margin: 0px;
	
	overflow: hidden;
	min-height: 15%;
	width: 5px;
	transition: .2s;
}

nav.table-of-contents::after {
    content: ' \25C4';
    color: #555555;
    right: 0;
    position: absolute;
    top: 28px;
}

nav.table-of-contents>ul:hover {
	background: #1d2024e3;
	box-shadow: -5px 0px 10px 0px rgba(0,0,0,0.15);

	min-width: 260px;
	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;
	list-style-position: inside;
	line-height: 1.3em;
}

nav.table-of-contents li {
	display: none;
	white-space: nowrap;
	overflow: hidden;
	margin: 0px;
	padding: 0px;
}

ul li {
    display: list-item;
	list-style-position: inside;
	line-height: 1.3em;
}

nav.table-of-contents ul {
	margin-left: 1.01em;
}

nav.table-of-contents>ul {
    list-style-type: none;
}

/*
nav.table-of-contents>ul {
    list-style-type: '┏ ';
}
*/

nav.table-of-contents>ul ul {
    list-style-type: '┣ ';
}

nav.table-of-contents>ul ul li:last-child {
    list-style-type: '┣ ';
}

nav.table-of-contents>ul ul ul {
    list-style-type: '┣ ';
}

nav.table-of-contents>ul ul ul li:last-child {
    list-style-type: '┗ ';
}



/* 
nav.table-of-contents>ul {
    list-style-type: '┏ ';
}


ul ul::before {
	content: ' \00A0';
    letter-spacing: 0.9em;
    position: absolute;
    margin-left: -7px;
    margin-top: 0.2em;
    text-decoration: overline;
}
*/

nav.table-of-contents li a {
    text-decoration: none;
}

nav.table-of-contents li a:hover {
    text-decoration: underline;
}
6 Likes