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;
}
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:
After:-
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---------:
My override of “Compact” to 1.5px:
Obviously, feel free to combine with the smaller font and/or use an even smaller value. Here’s the combined comparison.
Before: 
After: –
I suspect the boldness of everything has something to do with font weights, will keep digging away as I am able.
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;
}
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:
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:
After:
Same declaration can be added to headers to bring them under control as well (they are also 700 by default).
Before:
After:–
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:
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
So I made it shorter
.document--ltr {
padding-left:32.5px!important;
}
.document-sidebar--collapsed--vertical {
height: 5%;
}
Sorry, could you expand a little? What’s the problem this is solving?
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.
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
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 …
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.
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!
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!
same concern here because I’m printing my notes on notebook paper and that’s a lot of space wasted 
I tried to update this wiki in the Requests section, and to add a section “Make elements more prominent”. I hope I didn’t mess up anything! I might suggest renaming this page to be more general, "CSS snippets to adjust compactness and minimalness: 
Edited the edits, renamed the topic. Please don’t add stuff that doesn’t have to do with the goals: Hannes’ kanban is an additional feature.
No problem! Sorry about that!
This is really useful! Just wondering if you know how to reduce the minimum size an image can be resized to? Line height doesn’t have any effect.
Is there a way to hide the “Flashcards” and “Edit Later” in the Sidebar? I never need those things and that’s prime real estate for me.
