I use a CSS chrome script called 'Stylus', based on the recommendations of some folks on these forums. For awhile I was using something called 'Roll20 Tighter Sidebars'. The code is here. .dd-list .journalitem .name, .dd-list .library-item .name {
top: 0px;
}
.dd-list .journalitem .token, .dd-list .library-item .token {
top: 0px;
}
.dd-item .folder-title {
background-color: #535353 !important;
color: #fdf9eb;
}
.dd-content {
padding: 0px;
}
#compendium .searchroot .dd-item .dd-content .token img {
padding: 0px;
max-width: 19px;
max-height: 19px;
}
#compendium .searchroot .dd-item .dd-content .token {
top: 0px;
}
#compendium .searchroot .dd-item .dd-content .sourcefooter {
width: 18px;
height: 18px;
position: absolute;
top: 0px;
right: 0;
font-size: 6px;
}
.expandcontroller {
position: relative;
bottom:10px;
}
#compendium .searchroot .dd-item .dd-content .sourcefooter {
font-size: 12px;
}
.inapp .sourcefooter,.inapp.expansion3 .sourcefooter, .inapp.expansion9 .sourcefooter, .inapp.expansion13 .sourcefooter, .inapp.expansion16 .sourcefooter {
background-size: 15px 10px;
background-image:none;
padding-top: 5px;
top: 0px !important;
}
.dd-item, .dd-empty, .dd-placeholder {
min-height: 21px;
font-size: 12px;
line-height: 20px;
}
.dd-list .handout img, .dd-list .archivetable img, .dd-list .journalitem img, .dd-list .library-item img{
max-width: 20px;
max-height: 20px;
}
.dd-item>button {
height: 16px;
margin: 0px;
font-size: 14px;
top: 0px;
}
.dd-handle {
top: 0px;
width: 20px;
padding: 0px 10px;
} However, with the dark mode update, you get a weird cascading list for unopened Folders in the journal tab. I scoured through the 'inspect' css styles, and tracked the problem down to a CSS property that's been applied to a bunch of things called "box-sizing: content-box". When unchecked, for some reason the lists go back to working normally with the extra Stylus styling. However, when unchecked, a number of other stylings get wonky as Roll20 uses that property for a number of other things. So my question is, is there a way to isolate that property for just the right sidebar, or would I have to turn it off globally? And can I do so with an external CSS thing like stylus and some !important property or something? Or does anyone know what might be causing that in the Stylus code? From what I could tell it had something to do with the properties applied to: .dd-item, .dd-empty, .dd-placeholder Thanks! Some screenshots of checked and unchecked 'box-sizing: content-box' <a href="https://www.dropbox.com/s/r9806rviuhps780/Screen%20Shot%202023-06-23%20at%205.02.02%20PM.png?dl=0" rel="nofollow">https://www.dropbox.com/s/r9806rviuhps780/Screen%20Shot%202023-06-23%20at%205.02.02%20PM.png?dl=0</a> <a href="https://www.dropbox.com/s/dzwgtgqrgsvivxv/Screen%20Shot%202023-06-23%20at%205.02.00%20PM.png?dl=0" rel="nofollow">https://www.dropbox.com/s/dzwgtgqrgsvivxv/Screen%20Shot%202023-06-23%20at%205.02.00%20PM.png?dl=0</a>
