Operating system
Windows
Joplin version
3.0.12
Desktop version info
Joplin 3.0.12 (prod, win32)
Client ID: 55ce0b2fbc8e4c0c8c573a6923b41b59
Sync Version: 3
Profile Version: 47
Keychain Supported: Yes
Revision: a64d6e3
Backup: 1.4.1
Better Code Blocks: 1.1.0
CodeMirror Line Numbers: 2.0.0
Ez Table: 1.0.2
Favorites: 1.3.2
Insert Date: 1.0.1
Note list (Preview): 0.0.1
Note list and sidebar toggle buttons: 1.0.3
Note Tabs: 1.4.0
Outline: 1.5.13
Paste Special: 1.1.2
Persistent Editor Layout: 2.2.0
Remove Images: 0.0.2
Reset Checkboxes: 1.0.1
Rich Markdown: 0.14.1
Search & Replace: 2.2.0
Table Formatter Plugin: 1.2.1
Templates: 2.4.0
What issue do you have?
I just now upgraded to 3.0.12. Prior to that I was on 2.x.
My end goal is to condense the notebook list so I can see more notebooks listed on the screen at a time. I fixed this using CSS successfully prior to 3.x. If there is a new and improved way to do this in 3.x I'm happy to switch to that. But all that gap around the notebook names is really pointless for me.
I had the following css in userchrome.css that changes the font size of the notebook list.
div.note-list-item > .content > .title > span {
/* font-size: 14px; */
/* font-weight:400; */
font-size:.9em!important;
font-family:"Fira Sans";
font-stretch: extra-condensed!important;
}
.note-count-label {
font-size:.5rem!important;
}
/*reduces the height of list items in sidebars*/
div.sidebar div.list-item-container {
height:16px!important;
}
But now there is a blank, dead area in the bottom half of the notebook list. Please see the attached screenshot.
I can tell that what I'm calling the dead area covers up the end of the tags list.
Can someone please advise on how to make the notebook list condensed without having this dead area at the bottom?
Screenshots
Here is my entire `userchrome.css` file
/* For styling the entire Joplin app (except the rendered Markdown, which is defined in `userstyle.css`) */
.CodeMirror * { font-variant-ligatures: none; }
.CodeMirror.cm-s-dracula.CodeMirror-wrap {
background-color: rgba(0, 0, 0, 0.77) !important;
}
div.editor-toolbar a.button.disabled {
display: none;
}
/*Tool bar button removal experiment*/
div.editor-toolbar div button {
display: none !important;
}
div.editor-toolbar{
display:none!important}
div.sc-fzpjYC.ilNLPL div.editor-toolbar{
display:inherit!important}
div.editor-toolbar div a[title="Bold"],
div.editor-toolbar div a[title="Italic"],
div.editor-toolbar div a[title="Hyperlink"],
div.editor-toolbar div a[title="Code"],
div.editor-toolbar div a[title="Attach file"],
div.editor-toolbar div a[title="Bulleted List"],
div.editor-toolbar div a[title="Numbered List"],
div.editor-toolbar div a[title="Checkbox"],
div.editor-toolbar div a[title="Heading"],
div.editor-toolbar div a[title="Horizontal Rule"],
div.editor-toolbar div a[title="Insert Date Time"],
div.editor-toolbar div a[title="Insert Date"],
div.editor-toolbar div a[title="Spell checker"],
/* div.editor-toolbar div a[title="Note properties"],*/
div.editor-toolbar div a[title="Back"],
div.editor-toolbar div a[title="Forward"],
.updated-time-label {
display:none !important;
}
div.sc-fznLPX.kbvovF { /*search and new note bar*/
opacity:.2!important;
}
/*remove sync area*/
div.sidebar div:nth-of-type(2) {
display: none;
}
/*resize sidebar items*/
div.note-list-item > .content > .title > span {
/* font-size: 14px; */
/* font-weight:400; */
font-size:.9em!important;
font-family:"Fira Sans";
font-stretch: extra-condensed!important;
}
.note-count-label {
font-size:.5rem!important;
}
/*reduces the height of list items in sidebars*/
div.sidebar div.list-item-container {
height:16px!important;
}
/*END OF REDUCING SIDEBAR ITEM SPACING*/
::-webkit-scrollbar-thumb{
background: silver
}
::-webkit-scrollbar-track{
border: 4px solid black
}
div.editor-toolbar{
padding:0px!important;
}
div.editor-toolbar *{
font-size:1em;
}
/*selected item in notebook and note list*/
div.selected {
background:#AECEFF!important;
}
div.selected * {
font-weight:bold!important;
color:black!important;
}
/*??? not sure what this does????????????????????????????????????????*/
.cm-s-material-darker .cm-property{
color:#5B5B5B!important;
}
/* /*NOTE LIST -and- NOTEBOOK LIST*/ */
div.item-list *, a.list-item {
font-family:"Fira Sans";
font-weight:400!important;
font-stretch: extra-condensed!important;
font-weight:bold;
}
/*style note list*/
div.note-list div.list-item-container *{
font-size:.9em!important;
}
/*NOTEBOOK LIST*/
div.list-item-depth-0 {
padding-left:0px;
}
div.list-item-depth-1 {
padding-left:10px;
}
div.list-item-depth-1 .list-item::before{
content:"∙";
}
div.list-item-depth-2 {
padding-left:20px;
}
div.list-item-depth-2 .list-item::before{
content:"-";
}
div.list-item-depth-3 {
padding-left:30px;
}
div.list-item-depth-3 .list-item::before{
content:"–";
}
div.list-item-depth-4 {
padding-left:40px;
}
div.list-item-container a span {
padding-right:0px;
padding-left:5px!important;
font-family:"Fira Sans"!important;
font-weight:400!important;
font-stretch: extra-condensed!important;
}
/a.list-item div {
padding-left:3px;
font-size:.8em;
opacity: 0.3;
font-family:"Fira Sans"!important;
font-stretch: extra-condensed!important;
}
/*background color of tags*/
.tag-list span{
background-color:purple!important;
color:white!important;
padding:2px!important;
}
/*remove "click here to add tags"*/
.tag-list+span{
display:none;
}
/*-------------------------------------- E D I T O R C H R O M E -----------------------------------------------*/
/* .title-input{ */
/* border-bottom:solid 1px gray!important; */
/* } */
/*toggle arrow*/
.CodeMirror-guttermarker-subtle {
font-size:1.5em;
color:purple!important
}
.CodeMirror-activeline
/*was .CodeMirror-activeline-background*/
{
background: #021C22 !important;
}
/* Real CodeMirror line numbers */
.CodeMirror-gutters {
background: none !important;
border: none !important;
}
.CodeMirror-linenumber {
color: rgba(150, 150, 150, 0.4) !important;
Padding-right:6px;
}
/*-----------------------------------S T Y L I N G O F T E X T ------------------------------------------------------ */
/* Render horizontal lines (made with \-\-\- or \*\*\*) as an actual line across the editor. */
.cm-hr {
border-top: 3px solid #777;
display: block;
line-height: 0px;
}
/*REMOVE TOKENS ON UNACTIVE LINES*/
/*
.cm-rm-ins.cm-rm-ins-token,
.cm-strong.cm-rm-strong-token,
.cm-rm-highlight-token,
.cm-em.cm-rm-em-token,
.cm-header.cm-header-1.cm-rm-header-token,
.cm-header.cm-header-2.cm-rm-header-token,
.cm-header.cm-header-3.cm-rm-header-token
{
*/
/*display:none;*/
/*
color:transparent!important;
}
*/
.CodeMirror-activeline .cm-rm-ins.cm-rm-ins-token,
.CodeMirror-activeline .cm-strong.cm-rm-strong-token,
.CodeMirror-activeline .cm-rm-highlight-token,
.CodeMirror-activeline .cm-em.cm-rm-em-token,
.CodeMirror-activeline .cm-header.cm-header-1.cm-rm-header-token,
.CodeMirror-activeline .cm-header.cm-header-2.cm-rm-header-token,
.CodeMirror-activeline .cm-header.cm-header-3.cm-rm-header-token
{
display:inherit;
color:inherit!important;
}
/* end---REMOVE TOKENS ON UNACTIVE LINES*/
/*make markdown tokens for list into dots*/
.cm-overlay.cm-rm-list-token.cm-overlay.cm-rm-em-token
{
color: transparent !important;
background-color: #DECB6B!important;
height: 6px;
width: 6px;
border-radius: 50%;
display: inline-block;
vertical-align: bottom;
margin: 0 0px 8px 8px;
}
/*lists*/
.cm-variable-2, .cm-variable-3, .cm-keyword {
color: green !important;
}
/*de-emphasize markdown markup*/
/*
.cm-overlay.cm-search-marker.cm-overlay.cm-rm-highlight-token, .cm-strong.cm-rm-strong-token, .cm-em.cm-rm-em-token, .cm-rm-ins.cm-rm-ins-token {
background: none!important;
color: #4B505B!important;
}
*/
.cm-rm-ins {
text-decoration:none!important;
background-color:#CC0000;
color:black!important;
font-weight:bold!important;
}
.cm-rm-link {
text-decoration:underline
}
.cm-strong {
color:red!important;
font-weight: bolder!important;
}
/*strikethrough checked boxes*/
span.cm-rm-checkbox.cm-property + span.cm-rm-checkbox ~ span.cm-rm-checkbox {
text-decoration: line-through;
color:#5B5B5B!important;
}
/*HEADER STYLES*/
.cm-header-1{
color: #794BBB!important;
font-weight:bold;
}
.cm-header-2{
color: #BD93F9!important;
}
.cm-header-3, .cm-header-4, .cm-header-5, .cm-header-6 {
color:#CBBBE1!important;
font-style:italic;
}
.cm-header-1 {
/* line-height: 200% !important;*/
display: inline-block;
margin-top:.8em;
margin-bottom:.3em;
}
/* --------------------- colorized tables -------------------- */
.cm-tabcolor-row { }
.cm-tabcolor-header {font-weight: bolder;}
.cm-tabcolor-col1 {background-color: transparent !important; color: #0e6efd !important;}
.cm-tabcolor-col2 {background-color: transparent !important; color: #ffc108 !important;}
.cm-tabcolor-col3 {background-color: transparent !important; color: #dc3545 !important;}
.cm-tabcolor-col4 {background-color: transparent !important; color: #0dcaf0 !important;}
.cm-tabcolor-col5 {background-color: transparent !important; color: #198754 !important;}
.cm-tabcolor-col6 {background-color: transparent !important; color: #212529 !important;}
.cm-tabcolor-col7 {background-color: transparent !important; color: #0e6efd !important;}
.cm-tabcolor-col8 {background-color: transparent !important; color: #ffc108 !important;}
.cm-tabcolor-col9 {background-color: transparent !important; color: #dc3545 !important;}
/* ---------------TESTING---------------------*/
.CodeMirror-cursor {
/* cursor */
border-left: 3px solid #656565 !important;
border-right: none !important;
width: 0 !important;
}
.tag-bar {
height:22px!important;
padding: 0px 4px 0px 4px!important;
}
/*codeblock*/
/* div.cm-jn-code-block-background.CodeMirror-linebackground, */
/* pre.cm-jn-code-block.CodeMirror-line */
/* { */
/* background-color:rgba(0, 0, 0, 0.84)!important; */
/* padding-left:20px!important; */
/* caret-color: red!important; */
/* } */
pre.cm-jn-code-block.CodeMirror-line::selection
{
background: yellow!important;
}
/* .cm-def{color:DarkGoldenRod!important;} */
/* .cm-operator{color:PowderBlue!important;} */
/* .cm-property{color:orange!important;} */
/* .cm-string.cm-jn-monospace{color:crimson!important;font-style:italic} */
/* .cm-variable{color:violet!important;} */
/* .cm-undefined{color:cornsilk!important;} */
/* .cm-atom{color:Turquoise!important;} */
/* .cm-attribute{color:salmon!important;} */
/* .cm-tag{color:YellowGreen!important;} */
/* .cm-keyword{color:Orange!important;font-weight:bold} */
/* .cm-comment.cm-jn-monospace{color:PaleGreen!important;font-style:italic}/*needed because same class is used outside code blocks*/ */
/* pre.cm-jn-code-block.CodeMirror-line span .cm-null.cm-jn-monospace{color:thistle!important;} */
.cm-comment.cm-jn-inline-code.cm-jn-monospace{
color:black!important;
font-style:normal!important;
}
/* pre.cm-rm-code-block.CodeMirror-line, pre, code { */
/* font-family: 'Fira Code'!important; */
/* font-weight:normal!important; */
/* } */
/* code outside of code block*/
.cm-comment{
color:gray!important;
}
div.item-link-metadata {
color:red!important;
}
span.cm-link-text.cm-rm-link{
font-weight:bold!important;
color:gray!important;
}
pre.cm-jn-code-block {
font-weight:bold;
white-space:pre-wrap;
}