Combines several Roll20 mods to make interface more compact and readable.
Increases size of the macro bar for better use.
Condenses player names/avatars down to side, optimal for games with lots of players.
Condenses the journal and removes excess white space.
etc.
1/7/2023, 5:37:27 PM by johnsubiaco
Details
Authorjohnsubiaco
LicenseNo License
Categoryroll20.net
Created
Updated
Size13 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Userstyle doesn't have notes.Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name johns roll20 css
@namespace github.com/openstyles/stylus
@version 1.0.0
@description Compendium of roll20 styles
@author Divers Hands
==/UserStyle== */
@-moz-document domain("roll20.net") {
/* Uncomment and edit to customize Background Color */
/* body.no-touch {
background: none;/
background-color: #211;
} */
/* Fix height and spacing of macrobar */
#macrobar_macros {
white-space: normal;
}
#macrobar {
height: auto;
width: 80%;
left: 120px;
}
/* Resize Initiative Window, bold active turn */
#initiativewindow {
padding: 0px 0px;
overflow-x: auto
}
#initiativewindow ul li {
padding: 0px 1px 0px 0px;
min-height: 15px
}
#initiativewindow ul li img {
max-width: 20px;
max-height: 18px;
padding: 0px 3px 0px 0px;
}
#initiativewindow ul li span.initiative {
font-size: 16px;
padding: 0px;
min-height: 12px
}
#initiativewindow ul li span.name {
font-size: 12px;
padding-top: 1px
}
#initiativewindow ul li:first-of-type img {
max-width: 32px;
max-height: 30px;
padding: 0px 3px 0px 0px;
}
#initiativewindow ul li:first-of-type span.name {
font-weight: bold;
font-size: 14px;
color: darkgreen;
}
#initiativewindow ul li:first-of-type span.initiative {
font-size: 20px;
color: darkgreen;
padding: 5px 0px 0px 0px
}
#initiativewindow input {
font-size: 14px;
height: 10px;
max-width: 15px;
top: 0px;
text-align: right;
}
.ui-dialog-titlebar {
padding: 1px 5px;
font-size: 8px;
}
.ui-dialog .ui-dialog-title {
margin-top: 0px;
margin-bottom: 0px;
padding: 0px
}
.ui-dialog .ui-dialog-titlebar-close {
top: 50%;
width: 19px;
margin: -10px 0 0 0;
padding: 1px;
height: 6px;
font-size: 7px;
line-height: 7.5px;
}
.ui-dialog .ui-dialog-titlebar-close span {
display: block;
margin: 1px;
text-indent: 9999px
}
.ui-dialog .ui-dialog-buttonpane {
border-width: 1px 0 0 0;
margin: .05em 0 0 0;
background-color: #f5f5f5;
padding: 1px 10px 1px;
}
.ui-dialog .ui-dialog-buttonpane button {
margin: .05em .04em .05em 0;
}
/* GM Turn Tracker Turn Order Settings */
#initiativewindow_settings {
height: initial !important;
}
#initiativewindow_settings > p > small {
display: none;
}
#initiativewindow_settings > p > br:nth-child(6) {
display: none;
}
#initiativewindow_settings > p > input.customformula {
margin-top: 5px;
}
div#initiativewindow_settings p:nth-child(1) {
display: block;
}
/* sort options */
div#initiativewindow_settings p:nth-child(2) {
display: block;
}
/* numerically */
div#initiativewindow_settings p:nth-child(3) {
display: none;
}
/* alphabetically */
div#initiativewindow_settings p:nth-child(4) {
display: none;
}
/* card suit */
div#initiativewindow_settings p:nth-child(6) {
display: block;
}
/* custom item */
div#initiativewindow_settings hr {
display: none;
}
/* Delete Button Size & Position */
#initiativewindow > ul > li:first-child > div.controls {
top: 0px;
left: 1px;
padding: 4px 8px;
}
#initiativewindow > ul > li:not(:first-child) > div.controls {
top: -1px;
left: 0px;
padding: 1px 5px 2px 3px;
font-size: 18px;
}
/* Left Toolbar */
/* Move Toolbar Down */
#floatingtoolbar {
position: fixed;
top: 43px !important;
/* add 38px (81px) if under Page Tab button */
left: 5px !important;
}
/* Dark Mode Toggle adjustments */
/* Dark Mode Position */
.dark-mode-switch {
position: fixed;
top: 18px !important;
/* add 38px (56px) if under Page Tab button */
left: 3px !important;
width: 30px;
}
/* Dark Mode Remove Tooltip */
.dark-mode-switch > span.tooltiptext {
display: none;
}
/* Dark Mode Resize button */
.dark-mode-slider {
width: 36px;
height: 22px;
}
/* Dark Mode Resize Moon Button */
.dark-mode-slider > svg {
top: 2px;
left: 2px;
height: 18px;
width: 18px;
}
/* Dark Mode Resize White Circle Behind Moon Button */
span.dark-mode-slider::before {
top: 2px;
left: 2px;
height: 18px;
width: 18px;
}
/* Dark Mode Fix button movement */
input:checked + .dark-mode-slider:before,
input:checked + .dark-mode-slider svg {
transform: translateX(13px);
}
/* Consolidate the toolbar */
/* DISPLAY THESE */
/*
#select,
#editinglayer,
#drawingtools,
#fogcontrols.udl.hide,
#measure,
#startrounds
*/
/* HIDE THESE */
#fxtools,
#zoompanel,
#placelight,
#diceroller,
#helpsite {
display: none !important;
}
/* Zoom Slider */
#zoomclick:not(.zoomvalue) {
position: fixed;
left: 2px;
height: 0px;
}
.zoomValue {
display: block;
font-size: 12px;
font-family: "arial black";
background-color: #22222247;
padding: 0px;
position: absolute;
top: 1px !important;
}
.zoomplus,
.zoomminus {
display: none !important;
font-size: 7px;
}
#zoomclick .btn {
display: none !important;
}
#zoomslider {
display: none !important;
}
#zoomslider a.ui-slider-handle.ui-state-default.ui-corner-all {
display: none !important;
}
/* Smaller font for Chat Bar */
.textchatcontainer .content {
line-height: normal;
font-size: .95em;
}
#whoistyping {
padding: 1px;
}
.textchatcontainer .message {
line-height: 1.25em;
font-size: .95em;
padding-left: 45px;
padding-right: 3px;
padding-bottom: 10px;
top: 0px;
}
/* Compact layout for Journal & Sidebar */
#rightsidebar > ul.tabmenu {
right: 0px;
}
.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: #eee !important;
}
.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;
}
#journal > div.content.searchbox {
float: left;
margin: 0px;
padding-bottom: 0px;
padding-right: 0px;
width: calc(100% - 90px);
}
#journal > div.content.searchbox > input {
min-width: 152px;
width: calc(100% - 80px);
}
#journal > div > button.superadd.btn {
margin-bottom: 9px;
margin-top: 5px;
line-height: 17px;
}
/* Player Names fix */
#avatarContainer {
margin-bottom: -17px;
padding-bottom: 0px;
padding-left: 0px;
width: 1%;
}
.player .playername {
text-align: left;
padding-left: 5px;
font-size: 12px;
}
#playerzone #avatarContainer .player {
min-width: 125px;
max-width: 250px;
}
div.playername.player-bookmark.ui-draggable,
.color_picker,
.playercolor {
width: 100%;
border-radius: 12px;
}
/* Smaller avatars above player names if avatars are enabled */
/* "Small" setting */
#playerzone.smallvideo .video {
height: 50px;
width: 50px;
}
/* "Regular" setting */
.player .video {
height: 75px;
width: 75px;
}
/* "Large" setting */
#playerzone.largevideo .video {
height: 120px;
width: 120px;
}
/* Adjust Color Picker popup window */
#color_selector {
position: fixed;
height: 70px;
top: auto !important;
bottom: 55px !important;
left: 130px !important;
width: 600px !important;
}
#color_custom > label {
display: inline-block;
}
#color_value {
width: 60px !important;
}
/*
Roll20, New Card, show full size
...