Post your current Custom CSS (with comments)!


#1

I want to see what people use.

/* Images are shrunk to 50 pixel thumbnails */

.node-displayed-image {
    max-width: 50px;
    max-height: 50px;
}

/* Hovering over an image thumbnail enbiggens it */

.node-displayed-image:hover { 
    max-width: 100%;
    max-height: 100%;  }

/* Hides all tags (though they still respond to search) */

.Node-openNote{ display: none; }
.ref .Node-openNote{ display: block; }
.node-tag[href="#"] { display:none; }
.ref .node-tag[href="#"] { display:block; }

/* Prevents pregnant bullets from transforming into + on mouseover */

.Node-self.is-collapsed.is-parent > .Node-bullet:before {
  content: "\e90c";
}
.AppContainer:not(.is-using-bullet-to-zoom) .Node-self.is-parent.is-collapsed.is-hovering > .Node-bullet:before {
  content: "\e90c";
}
.AppContainer:not(.is-using-bullet-to-zoom) .Node-self.is-parent.is-hovering > .Node-bullet:before {
  content: "\e90c";
}

/* Hides all the sidebars and icons until you mouse over them, for max minimalism */

.LeftPaneSlidebarContainer,
.LeftPaneSplitter,
.AppHeader,
.DocumentTools-icon
 {
    opacity: 0;
}
.LeftPaneSlidebarContainer:hover,
.LeftPaneSplitter:hover,
.AppHeader:hover,
.DocumentTools-icon:hover
{
    opacity: 1;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

#2

What do you use to insert this CSS?


#3


#4

Thank you very much for these CSS Snippets!!! I especially LOVE the minimalism hack :wink:


#5

I did not play with it myself but thank you for showing your snippets. They are awesome!


#6

The only thing I’m using it for is to make the highlighting of the active item higher-contrast.

.Node-content:focus,
.Node-renderedContent:focus,
.Node-note:focus,
.Node-renderedNote:focus
{
color: rgba(0, 0, 0, 1);
background: rgba(0, 0, 0, .09);
}


#7

Shrink #!, #_ & @_ tags by 50%

.node-tag[title^="Filter #_"] { 
 color: blue;
 # background-color: red;
 font-size:50%;
 text-decoration:none;
}

.node-tag[title^="Filter #!"] { 
 color: blue;
 # background-color: red;
 font-size:50%;
 text-decoration:none;
}

.node-tag[title^="Filter @_"] { 
 color: blue;
 # background-color: red;
 font-size:50%;
 text-decoration:none;
}

Make container width a bit bigger

.DocumentContainer.is-centerDocument .Document, 
.DocumentContainer.is-centerDocument .DocumentBreadcrumb {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

Bold Titles

.Node.is-currentRoot > .Node-self
{
font-weight: bold;
}

Pretty Underline

* {
    text-decoration-skip-ink: auto;
}

#8

I use Notes a lot. Sometimes I write a complete article inside. I just made some basic tweaks to make the text bigger.

.Node-self.is-contentRendered .Node-content, .Node-self.is-noteRendered .Node-note, .Node-renderedNote, .Node-noteContainer
{
font-size: 115%;
font-weight: normal;
line-height: 130%;
}
.Node-note.needsclick
{
font-size: 120%;
font-weight: normal;
line-height: 130%
}