CSS Fixes Part 2 - Onenote/Evernote Style bulleting


#1

Here’s a CSS fix that might be easier for people to read.

I find the vertical lines distracting so I removed all but the first 2 in the current view

Next, I like evernote/ onenote bulletpoint styling. It has different bulletpoint indicators depending on how far deep your bulletpoints are. This is what they look like;

My implementation is a mix of dynalist bullet folding with some evernote/onenote bulletpoint styling

add this to your stylish.css file

/*==================================*/
/* Bulletpoint Styling and Border-Left */
/*==================================*/

/* Remove all Vertical lines except first 2 in current view */
.Node.is-currentRoot .Node .Node .Node > .Node-children {
    border-left: 0px !important;
}
/* Make Remaining Lines Green */
.Node.is-currentRoot .Node .Node-children {
    border-left: 1px dotted green !important;
}
/* Hide All Bulletpoints (1st and 2nd in current view) */
.Node.is-currentRoot .Node .Node-bullet:before {
	visibility: hidden;
}
/* Displays Any Collapsed bulletpoint */
.Node.is-currentRoot .Node .is-collapsed>.Node-bullet:before {
 	color:red;
    visibility: visible;
}
/* Overrides 3rd Bulletpoint in current view */
.Node.is-currentRoot .Node .Node .Node .Node-bullet:before {
	visibility: visible;
}

/* Overrides 4th Bulletpoint in current view */
.Node.is-currentRoot .Node .Node .Node .Node .Node-bullet:before {
	content: "◯";
    visibility: visible;
}
/* Overrides 5th Bulletpoint in current view */
.Node.is-currentRoot .Node .Node .Node .Node .Node .Node-bullet:before {
	content: "■";
    visibility: visible;
}
/* Overrides 6th Bulletpoint in current view */
.Node.is-currentRoot .Node .Node .Node .Node .Node .Node .Node-bullet:before {
	content: "☐";
    visibility: visible;
}
/* Overrides 7th Bulletpoint in current view */
.Node.is-currentRoot .Node .Node .Node .Node .Node .Node .Node .Node-bullet:before {
	content: "◆";
    visibility: visible;
}


#2

Nice touch. It would be great to develop this further. Thank you.


#3

I’m trying this out @Vincent_Tang and would like to understand the design concept behind it. Why would the first two levels have a line, rather than a bullet? One issue I’ve found is that it is not possible to see if a 1st or 2nd order item is collapsed or not.
Thanks.


#4

I think of the first two lines in any document as if they were a “Table of contents” . The first level bulletpoint is like the chapter, 2nd bulletpoint is a subchapter.

Everything else is kind of whatever, they behave more similarly to actual traditional “bulletpoints” in something like onenote, evernote, etc.

Also I rarely zoom into things, so there’s that too

I think I forgot to include that fix. I have it on here, must’ve forgotten to put it. I updated the code above so it should work now