[Wiki] CSS snippets to make things more compact and information dense and/or less visually obtrusive

The goals: have as much usable information visible on the screen at the same time as possible and remove any information that is not needed or extraneous visual elements.

Large Image (open in new tab) comparison with the default 1.4 look after applying most snippets (as of 11 October 2021)

Before:


After:

User guide: either create individual blocks for each snippet or paste all your chosen ones into a single code block. Snippets that have * after their name have alternatives, pick and use one. Values may be edited to your preference, see the comments in the snippet for details.
Contributor guide: write in the snippet under the appropriate category, matching the formatting of others (name in a comment before the rule, default and other relevant values in comments to the right of the changed value if possible) and leaving a link to the original post if it exists. Ideally, add a before/after image comparison.

The snippets. Click to unfold or fold.

  • Removing elements

    Remove the slash menu placeholder on new rem

    By @M_Young, update for 1.8.52 by UMNiK

    /* remove the slash menu placeholder on new rem */
    .absolute.pointer-events-none.select-none.rn-clr-content-tertiary.left-0 {
    	display: none;
    }
    

    Before and after: CleanShot 2021-09-27-mKlsKBmu

    Hide the “Flashcards” and “Edit Later” in the Sidebar

    By @Achyut_Morang

    /* Hide the “Flashcards” and “Edit Later” in the Sidebar  */
    div.flex.items-center.mb-1.h-\[32px\].overflow-hidden.text-gray-60 {
    	display: none;
    }
    

    Before:


    After:

    Hide "Today's Note" in the sidebar

    By jamesb

    /* Hide "Today's Note" in the sidebar  */
    div[data-label="Today's Note"] {
    	display: none;
    }
    
    Hide automatic search portals in hover preview

    By @TaQuangKhoi

    /* Hide automatic search portals in hover preview */
    #document-hover-preview__popup .tree-node--automatic-search-portal-header,
    #document-hover-preview__popup .portal-tree-node-box--no-margin-left,
    #document-hover-preview__popup .portal-tree-node-box--enable-buttons,
    #document-hover-preview__popup .hierarchy-editor__search-portal-section  {
    	display: none;
    }
    

    Before: image
    After: image

    Declutter aliases - show them only when needed

    By @liberated_potato and @hannesfrank

    /* Declutter aliases - show them only when needed */
    /* Hide the aliases container if it is inside a child */
    .tree-node--children [data-rem-container-property~="aliases"] {
        display : none;
     }  
    
    /* Hide the aliases container if it is inside a reference context menu (the one you get when you hover over a rem reference) */
     .rn-popup__content [data-rem-container-property~="aliases"] {
        display : none;
     }   
    
    Remove the selected text popup toolbar

    By @TaQuangKhoi.

    /* Remove the selected text popup toolbar */
    .button-group {
    	display: none;
    }
    
    Remove the count of multiline children in queue

    By @Anisha.

    /* Remove the count of multiline children in queue */
     #hierarchy-editor > div.pl-\[0px\].transition-none > div > div:nth-child(2) > div > div.tree-node--parent.flex-grow > span > div > div.rn-editor__rem__body__text.flex.box-border.rem-text.min-h-\[16\.67px\].text-base.leading-\[var\(--line-height\)\].font-inter.transition-fontsizebgcolor.duration-\[0\.05s\] > div > span {
    	display: none;
    } 
    
    Minimalistic theme with persistent focus mode

    By domyyy. Will show elements when hovering over them.

    /* Minimalistic theme with persistent focus mode */
    .fade-on-hide-ui:not(:hover) {
    	opacity: 0;
    	transition: opacity 0.3s ease-in-out;
    }
    
    .rem-button__container:hover * {
    	opacity: 1;
    }
    
    .rem-bullet__container {
    	opacity: 0.05;
    	transition: opacity 1s;
    }
    
    .remHierarchyTop {
    	/*  */
    	pointer-events: none;
    }
    
    .rem-hierarchy-bottom {
    	pointer-events: none;
    } 
    
    #hierarchy-editor .TreeNode {
    	border-color: transparent;
    	border-left-style: dashed;
    	transition: border-color 1s;
    }
    
    /*
    #hierarchy-editor .TreeNode:hover {
    	border-color: #cacad9;
    }
    */
    
    #hierarchy-editor .TreeNode:hover .TreeNode {
    	border-color: #cacad9;
    	transition: border-color 0.3s;
    }
    
    #hierarchy-editor .TreeNode:hover .rem-bullet__container {
    	opacity: 0.4;
    	transition: opacity 0.3s;
    }
    
    rem-container--focused {
    
    }
    
    .multiple-windows__document::-webkit-scrollbar {
    	width: 10px;
    	height: 10px;
    }
    
    .multiple-windows__document::-webkit-scrollbar-thumb:window-inactive {
    	background: none;
    }
    
    .multiple-windows__document::-webkit-scrollbar-thumb {
    	background-color: #cccccc16;
    	/*background-clip: content-box;*/
    	min-width: 32px;
    	min-height: 32px;
    	border-radius: 5px;
    }
    
    .multiple-windows__document::-webkit-scrollbar-thumb:hover {
    	background-color: #cccccc70;
    	transition: 1s;
    }
    
    /*
    .popup-menu {
    	filter: invert(90.2%) hue-rotate(180deg);
    }
    */
    
    .dark-mode .pdfViewer.removePageBorders {
    	/* color: #e6e6e8; */
    	filter: invert(9.8%);
    }
    
    /*
    .dark-mode .pdfViewer.removePageBorders.PdfHighlighter__highlight-layer {
    	filter: invert(100%) hue-rotate(180deg);
    } */
    
    .PdfHighlighter .pdfViewer {
    	background-color: transparent;
    }
    
    /* tiled windows */
    /*
    #multiple-windows .multiple-windows__document, .tile__document::-webkit-scrollbar {
    	width: 10px;
    	height: 10px;
    }
    
    #multiple-windows .multiple-windows__document, .tile__document::-webkit-scrollbar-thumb {
    	background-color: #cccccc40;
    	min-width: 32px;
    	min-height: 32px;
    	border-radius: 5px;
    }
    
    #multiple-windows .multiple-windows__document, .tile__document::-webkit-scrollbar-thumb:hover {
    	background-color: #cccccc70;
    	transition: 1s;
    }
    
    #content .mosaic-window-toolbar.draggable {
    	box-shadow: none !important;
    	
    }
    
    .mosaic-window-controls {
    	opacity: 0;
    }
    
    .mosaic-window-toolbar:hover .mosaic-window-controls {
    	opacity: 1;
    }
    
    .mosaic.mosaic-blueprint-theme .mosaic-preview .mosaic-window-toolbar, .mosaic.mosaic-blueprint-theme .mosaic-window .mosaic-window-toolbar: {
    	border: none;
    	box-shadow: none;
    }
    
    .mosaic-tile {
    	--tw-border-opacity: 0;
    }
    */
    /* end */
    
    .PdfHighlighter::-webkit-scrollbar {
    	width: 10px;
    	height: 10px;
    }
    
    .PdfHighlighter::-webkit-scrollbar-thumb {
    	background-color: #cccccc40;
    	/*background-clip: content-box;*/
    	min-width: 32px;
    	min-height: 32px;
    	border-radius: 5px;
    }
    
    .PdfHighlighter::-webkit-scrollbar-thumb:hover {
    	background-color: #cccccc70;
    	transition: 1s;
    }
    
    .navigation-bar {
    	border-radius: 5px;
    }
    
    .pdf-viewer__header {
    	border-radius: 5px;
    	opacity: 0;
    	transition: opacity 0.3s ease-in-out;
    }
    
    .pdf-viewer__header:hover {
    	transition: opacity 0.3s ease-in-out;
    	opacity: 1;
    }
    
    Remove the placeholder space between title and rem below

    By Jakob.

    /* Remove the placeholder space between title and rem below */
    .rn-add-rem-button--top {
        display: none;
    } 
    
  • Reducing whitespace around or between elements

    Less whitespace in the left margin

    By @MAB941009 with a fix by @TaQuangKhoi

    /* less whitespace in the left margin */
    .document--ltr {
    	padding-left: 0px; /* 48px is the default, 0px will push the six dot menu halfway past the edge if the rem has an arrow, 32.5px will just reduce the margin */
    }
    .document-sidebar--collapsed--vertical {
    	height: 5%; /* removes unused vertical sidebar hover area when used with windowed panes */
    }
    
    Tighter sidebar

    By @steveaw

    /* tighter sidebar */
    #document-sidebar div {
    	padding-top: 1px; /* 0px for an even more severe effect */
    	padding-bottom: 1px; /* 0px for an even more severe effect */
    }
    
    Compact leading

    By Martin (increased 16>18 and comment by UMNiK).

    /* Compact leading */
    body {
    	--rn-line-height: 18px; /* 16px is the default text size */
    }
    

    Before: image
    After:image

    Less space between rem's bullet and text
    /* less space between rem's bullet and text */
    .hierarchy-editor--ltr .rem-text {
    	padding-left: 20px; /* 24px is the default */
    }
    

    Before:image
    After:image

    Shorten space before rem reference portals

    By @TaQuangKhoi, updated by UMNiK

    /* Shorten space before rem reference portals */
    .rn-add-rem-button {
    	height: 2rem; /* Default is 15rem*/
    }
    

    After:

  • Making elements themselves smaller or less prominent

    Smaller and less bold headers

    Headers selectors and other styling examples by @hannesfrank

    /* smaller and less bold headers */
    .rem-text.rem-header--1 {
    	font-size: 22px; /* regular text size is 16px */
    	font-family: Segoe UI; /* Inter is the default */
    	font-weight: 500; /* 700 is the default */
    }
    
    .rem-text.rem-header--2 {
    
    	font-size: 20px; /* regular text size is 16px */
    	font-family: Segoe UI; /* Inter is the default */
    	font-weight: 500; /* 700 is the default */
    }
    
    .rem-text.rem-header--3 {
    	font-size: 18px; /* regular text size is 16px */
    	font-family: Segoe UI; /* Inter is the default */
    	font-weight: 500; /* 700 is the default */
    }
    

    Before:image
    After:–image

    Smaller zoomed in rem title
    /* smaller zoomed in rem title */
    .document-title{
    	font-size: 20px;
    	--line-height: normal;
    }
    




    Less bold document title
    /* less bold document title */
    .font-bold {
    	font-weight: 500; /* 700 is the default*/
    }
    

    Before:image
    After:image

    Less bold bold text in document title
    /* less bold bold text in document title */
    .document-title .bold {
    	font-weight: 700; /* default is 850 */
    }
    

    Before:


    After:

    Smaller source and tags fields

    By @ako

    #DropToOpenAsDocument > div > *:not(#DocumentTitle) {
      zoom: 80%;
    }
    
    Smaller and more condensed font
    /* smaller and more condensed font */
    .rem-text { /* regular notes */
    	font-family: "Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; /* "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; is the default */
    	/*overriding font-size here will also override it in the zoomed in rem, default is 16px*/
    }
    .font-inter { /* queue */
    	font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, sans-serif; /* Inter, -apple-system, BlinkMacSystemFont, Roboto, Helvetica, sans-serif; is the default */
    }
    

    Before:image
    image

    After:-image
    image

    Set the concept bold

    By @TaQuangKhoi

    /* set the concept bold */
    .concept_rem_type{
    	font-weight: 600; /* default is 600  */
    }
    
    Set the text bold to be as bold as the default concept bold
    /* set the text bold to be as bold as the default concept bold */
    .bold {
    	font-weight: 600; /* default is 700 */
    }
    
  • Making hidden elements more visible

    Add a scrollbar to show all breadcrumbs if needed*

    by @Browneyedsoul Use this or “Multi Line Breadcrumbs”

    /* add a scrollbar to show all breadcrumbs if needed */
    .document-header-top-bar > div {
       overflow-x: auto;
    }
    

    Before:image
    After: https://i.imgur.com/xpsBlIe.mp4

    Multi Line Breadcrumbs*

    by @Browneyedsoul Use this or “Add a scrollbar to show all breadcrumbs if needed”

    /* Multi Line Breadcrumbs */
    .document-header-top-bar {
    	height: fit-content;
    }
    .document-header-top-bar > div > div {
    	flex-wrap: wrap;
    	overflow-wrap: normal;
    }	
    .document-header-top-bar .flex-nowrap {flex-wrap: wrap;}
    .document-header-top-bar .flex {display: inline;}
    

    Before:image
    After:-- image

    Show indent line in the sidebar

    by @Euan_Ong Comparison pictures in the topic.

    	#document-sidebar .accordion.ui.fluid {
    		background:
    			linear-gradient(#cacad9 0 0) 17px,
    			linear-gradient(#cacad9 0 0) 43px,
    			linear-gradient(#cacad9 0 0) 69px,
    			linear-gradient(#cacad9 0 0) 95px,
    			linear-gradient(#cacad9 0 0) 121px,
    			linear-gradient(#cacad9 0 0) 147px,
    			linear-gradient(#cacad9 0 0) 173px,
    			linear-gradient(#cacad9 0 0) 199px,
    			linear-gradient(#cacad9 0 0) 225px,
    			linear-gradient(#cacad9 0 0) 251px,
    			linear-gradient(#cacad9 0 0) 277px,
    			linear-gradient(#cacad9 0 0) 303px,
    			linear-gradient(#cacad9 0 0) 329px,
    			linear-gradient(#cacad9 0 0) 355px,
    			linear-gradient(#cacad9 0 0) 381px,
    			linear-gradient(#cacad9 0 0) 407px;
    		background-size: 1px 100%;
    		background-repeat: no-repeat;
    	}
    
    	#document-sidebar .title.p-2 {
    		background: white;
    	}
    
    	#document-sidebar .p-2:not(:hover) {
    		background: white;
    	}
    
    Always visible toggle button for collapsed rem

    by Jakob
    Have to change rgb color codes for Dark Mode.

     /* Always visible toggle button for collapsed rem */
    .rem-button__container:has(.rem-bullet--hidden-children):before {
        position: absolute;
        pointer-events: none;
        left: 26px;
        width: 20px;
        height: 20px;
        transform: rotate(-90deg);
        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='rgb(145, 145, 168)' viewBox='0 0 20 20' data-icon='toggle' class='inline-block group-hover:text-gray-40 dark:group-hover:text-gray-80 transition fill-current text-gray-15 dark:text-gray-50 rotate-0' style='width: 20px; min-width: 20px; height: 20px; min-height: 20px;'%3E%3Cpath d='M5.79515 9.25169L9.10157 12.5581C9.59944 13.056 10.4037 13.056 10.9016 12.5581L14.208 9.25169C15.0123 8.44742 14.4378 7.06869 13.3016 7.06869H6.68878C5.5526 7.06869 4.99089 8.44742 5.79515 9.25169Z'%3E%3C/path%3E%3C/svg%3E");
    }
    
    svg[data-icon=toggle] {
        color: rgb(145, 145, 168);
    } 
    

    image
    image

12 Likes
.document--ltr {
    padding-left: 32.5px !important
}

Name: Unknown (yet to invent a name :grinning:)
Desc.: Reduces the white space between the outliner and the sidebar.


Thanks @UMNiK. I’m with you. Here’s a snippet I created last week to reduce white space between the outliner and the sidebar.

My knowledge base hasn’t exploded yet, so it seems to safe for general consumption. Caveat emptor, still. I’ll continue posting as I figure out more changes we can make to recreate a compact look.

4 Likes
.rich-text-editor-placeholder {
display: none;
}

Name: Also unknown :sweat_smile:
Desc.: Removes “Type / for commands” text on empty bullet points. A side effect is, the “Untitled” text of unnamed Rem is also removed.
Visual comparison: CleanShot 2021-09-27-mKlsKBmu
Source: RemNote 1.4 Redesign Miscellaneous Questions - #20 by M_Young


Not relevant to compactness, instead to further the minimal interface preference.

2 Likes

Tighter sidebar, courtesy of @steveaw . 0 may be a bit too severe, try 1 px as well.

/* tighter sidebar */
#document-sidebar div {
	padding-top: 0px;
	padding-bottom: 0px;
}
1 Like
#hierarchy-editor .rem-container--compact .EditorContainer {
margin-bottom: -4.5px;
margin-top: -4.5px;
}

Name: CleanShot 2021-10-02-JnWDiHIi Leaner Bullets
Desc.: This snippet reduces space between bullet points by decreasing the size of the margins both above and below each individual bullet point. The smaller you go, the less white space you have. For example, -6.5px would be even smaller than mine. By default, RemNote (1.4) has these set to -2.5px.
Visual comparison:


Here’s another. I suspect this one will be of the greatest value to most people. Especially those who preferred the slimmer look of patch 1.3 and prior.

3 Likes

At least a partial fix to zoomed in rem - now they are less enormous, but still a bit too bold for my tastes. Alas, leaving the line height up to the browser doesn’t work for headers (or I’m doing something wrong).

/* smaller zoomed in rem title */
.document-title{
	font-size: 22px;
	--line-height: normal;
}




3 Likes

Looks like the font is an easy enough fix - just edited out the new one from the front of the value (doesn’t look the size needs changing). Would be lovely to get a confirmation from someone who has 1.3 installed that that was indeed the case, i.e. what were the exact values then. The current default values for reference: font-family: "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; and font-size: 16px;. For some reason headers won’t take Segoe UI instead of their current Inter, or else they do take it and are just getting bolded so much that it doesn’t seem to do much.

/* Smaller and more condensed font */
.rem-text {
	font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"
}

Before:image
After:-image

Also a bit of a twist on the fix to the space between rem in the editor, this time using the same properties as the native “interface - editor line spacing” options do. Keep in mind that they change the selector name, so make sure you set yours to “Compact”. For reference, the option names correspond to these values: “Compact” = 2.5px, “Default” = 4px, “Spacious” = 5px. If using other minifying snippets (especially line height), use 2px to maintain separation.

/* less space between rem using the native setting's properties */
#hierarchy-editor .rem-container--compact .EditorContainer, #hierarchy-editor .rem-container--compact .rem-text {
    padding-bottom: 1.5px;
    padding-top: 1.5px;
}

Native “Compact” of 2.5px---------:image
My override of “Compact” to 1.5px:image

Obviously, feel free to combine with the smaller font and/or use an even smaller value. Here’s the combined comparison.
Before: image
After: –image

I suspect the boldness of everything has something to do with font weights, will keep digging away as I am able.

3 Likes

You might wanna try zoom property like so.

/* All Remnote */
#content {
  zoom: 80%;
}

But zoom doesn’t work on Firefox, according to the documentation.

Here’s some selectors you might wanna use individually.

CSS in the image:

/* All Remnote */
#content {
  zoom: 80%;
}

/* Each pane */
#document {
  max-width: 900px;
  background-color: darkgrey;
}

/* Title, Source and Tags */
#DropToOpenAsDocument {
}

/* Title */
#DocumentTitle {
  background-color: lightgreen;
}

/* Source and Tags */
#DropToOpenAsDocument > div > *:not(#DocumentTitle) {
  zoom: 80%;
  background-color: lightblue;
}
2 Likes

Thanks, but that’s just a bit too brute-force for my tastes - hopefully there is a more elegant solution to reducing the space these new elements take up. Great work getting those selectors though!

Another piece of the puzzle: line height inside rem, default is 24px.

/* line height in text, overriding a variable */
.rem-container {
	--line-height: normal;
}

Before:


After:

Also edited the document title snippet to use the property name with dashes to directly override.

A snippet to make the zoomed in rem less bold, default is 700 (which should be regular bold, but seems a bit much to me).

/* less bold document title */
.font-bold {
    font-weight: 500;
}

Before:image
After:image

Same declaration can be added to headers to bring them under control as well (they are also 700 by default).
Before:image
After:–image

Some more selectors, for concepts and for general in-text bold, thanks to @TaQuangKhoi and to myself.

/* set the concept bold */
.concept_rem_type{
	font-weight: 600; /* default is 600  */
}
/* set the text bold to be as bold as the default concept bold */
.bold {
    font-weight: 600; /* default is 700 */
}

Another de-bolder, for bolded text in zoomed in rem.

/* less bold bold text in document title */
.document-title .bold {
    font-weight: 700; /* default is 850 */
}

Before:

After:

2 Likes

I have been using this snippet for a while and I found a problem when using Windowed Panes with hidden Sidebar…
.document-sidebar--collapsed--vertical is so long.

You will have trouble using these buttons when they are near the left margin of remnote
image
So I made it shorter

.document--ltr {
	padding-left:32.5px!important;
}
.document-sidebar--collapsed--vertical {
	height: 5%;
}
2 Likes

Sorry, could you expand a little? What’s the problem this is solving?

2 Likes

I’m both appreciative and confused. Could you show a before and after screenshot, illustrating the problem? The more of your screen captured, the better.

1 Like

Sorry about confusion, I have recorded a video and embed it to my previous post, you can watch it… This problem just happens when you hide the Sidebar and use Windowed Panes

1 Like

Seems like it might be worth reporting as a Windowed Panes-specific bug?

This bug only occurs when we use the code above that makes the space between the sidebar and the .document--ltr smaller. If you don’t use this code, RN works fine. . So, I don’t think it is a bug…

But I don’t know why this .document-sidebar--collapsed--vertical is so long. If you are in RemNote 1.3 or below, this class can be used for show the sidebar when we move the cursor near the left margin …

2 Likes

Ah, an oversight then. Still, might be worth telling the team to remove the unused stuff to avoid it causing problems in edge cases like this one.

2 Likes

Is there a way to reduce this space? (Between title and Source and Tags). Also, what is the :hover for the “Show Source”? I never know where to click, so I have to wave the mouse around. It’s one thing I would like visible, if possible. Thanks!

3 Likes

Updated the OP with a new snippet for space between a bullet and its rem text and made it into an actual wiki. Contributors welcome!

1 Like

same concern here because I’m printing my notes on notebook paper and that’s a lot of space wasted :frowning: