[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

    /* remove the slash menu placeholder on new rem */
    .rich-text-editor-placeholder {
    	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:

  • 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 */
    }
    
    Leaner bullets*

    By @MAB941009. Use this or “More compact compact editor line spacing”

    /* leaner bullets */
    #hierarchy-editor .rem-container--compact .EditorContainer {
    	margin-bottom: -4.5px; /* -2.5px is the default, can go as low as -6.5px */
    	margin-top: -4.5px; /* -2.5px is the default, can go as low as -6.5px */
    }
    

    Before and after:

    More compact compact editor line spacing*

    Use this or “Leaner bullets”

    /* more compact compact editor line spacing  */
    #hierarchy-editor .rem-container--compact .EditorContainer, #hierarchy-editor .rem-container--compact .rem-text { /* the native "Editor line spacing" setting has to be set to "Compact" */
    	padding-bottom: 2px; /* 2.5px is the default "Compact", 4px is the default "Default", 5px is the default "Spacious" */
    	padding-top: 2px; /* 2.5px is the default "Compact", 4px is the default "Default", 5px is the default "Spacious" */
    }
    

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

    Line height in rem text
    /* line height in rem text */
    .rem-container {
    	--line-height: normal; /* 24px is the default */
    }
    

    Before:


    After:

    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

    /* Shorten space before rem reference portals */
    .rem-hierarchy-bottom {
    	height: 20px; /* 300px is the default */
    }
    

    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 {
    	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*/
    }
    

    Before:image
    After:-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 “Show breadcrumbs on multiple lines if needed”

    /* 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

    Show breadcrumbs on multiple lines if needed*

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

    /* show breadcrumbs on multiple lines if needed */
    .document-header-top-bar {
    height: fit-content;
    }
    .document-header-top-bar > div > div {
    flex-wrap: wrap;
    }
    

    Before:image
    After:-- image

9 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: