I use the Stylish extension to handle some of this; These work for me and my screen/setup. Not sure how they'll work for anyone else. But they should help you to adjust some things. You can use Stylish's import feature from it's editor. Cheers roll20 forums(mainly just darkens the background and makes some other adjustments for my aging eyeballs) @-moz-document url-prefix("<a href="https://app.roll20.net/forum" rel="nofollow">https://app.roll20.net/forum</a>"), url-prefix("<a href="https://app.roll20.net/campaigns" rel="nofollow">https://app.roll20.net/campaigns</a>"), url-prefix("<a href="https://app.roll20dev.net/campaigns" rel="nofollow">https://app.roll20dev.net/campaigns</a>"), url-prefix("<a href="https://app.roll20.net/vault" rel="nofollow">https://app.roll20.net/vault</a>"), url-prefix("<a href="https://app.roll20.net/private_message" rel="nofollow">https://app.roll20.net/private_message</a>"), url-prefix("<a href="https://app.roll20dev.net/forum/" rel="nofollow">https://app.roll20dev.net/forum/</a>") {
body {
background-color: #000 !important;
}
.topbar .full,
.topbar .simple {
background-color: rgb(150, 150, 150) ;
}
.menu a:hover {
background: transparent !important;
}
.container h1, .container h2, .container h3, .container h4, .container h5, .container h6 {
color: #008EB9 !important;
}
.container {
background-color: #FFF !important;
}
.topbar .row:first-child {
padding-top: 5px !important;
padding-bottom: 5px !important;
}
.topbar .row:first-child img {
height: 40px !important;
}
.topbar .row,
.topbar .menu-hider,
.topbar .btn-group {
background: auto;
}
.homegamelist .gameinfo {
font-size: 16px !important;
}
.forum a {
color: #51B0E0 !important;
}
.redactor_editor a {
color: #51B0E0 !important;
}
.redactor_editor, .redactor_editor:focus {
background: transparent !important;
}
.redactor_box .redactor_editor, .redactor_box .redactor_editor:focus {
color: black !important;
font-size: 15px !important;
}
.h-feed {
background: #ebecee;
}
.jumbointro .col-md-4 h2 {
display: none;
}
p {
color: inherit;
}
.chosen-container {
width: 100%!important;
height: 4em !important;
}
.posts .postcontent, .posts .post .redactor_box {
font-size: 15px !important;
font-family: Verdana !important;
width: 850px !important;
border: 1px solid #a9a9a9;
border-radius: 5px;
padding: 1em;
}
}
editor and api (shrinks the editor window and hides much of the stuff I don't need to see after I initially set my game settings) @-moz-document url-prefix("<a href="https://app.roll20.net/campaigns/campaignsettings/" rel="nofollow">https://app.roll20.net/campaigns/campaignsettings/</a>") {
body {
background-color: #FAFAFA;
margin-top: -925px !important;
}
.globalfooter {
display: none !important;
}
.btn-primary {
margin-top: -50px !important;
}
.ace-monokai .ace_scroller {
background-color: #000 !important;
}
ace_editor {
font-family: 'Source Code Pro', 'Monaco', monospace !important;
font-size: 14px !important;
}
.topbar .btn-row {
background-color: #FFF !important;
height: 42px !important;
top: 874px !important;
}
.nav-tabs {
margin-top: 0px;
height: 30px;
}
.nav-tabs>li.active>a,
.nav-tabs>li.active>a:hover,
.nav-tabs>li.active>a:focus {
background-color: #FFC0CB;
}
.ace_editor {
font-family: 'Source Code Pro', 'Monaco', 'Menlo', 'Ubuntu Mono', 'Droid Sans Mono', 'Consolas', monospace;
font-size: 14px;
}
.tab-content>.active {
height: 380px !important;
}
.tab-content .editor {
height: 380px !important;
}
}
I also have a style for the vtt (adjusts page settings window, quickbar and makes locks the journal header tabs in place). /*macro quickbar */
#macrobar {
height: auto !important;
width: 92% !important;
background-color: rgba(0, 0, 0, 0.44) !important;
text-align: center !important;
margin-left: 60px !important;
}
#macrobar_macros {
white-space: normal !important;
margin-left: 1% !important;
margin-right: 1% !important;
padding-bottom: 0px !important;
}
#macrobar .macrobox {
margin: 2px !important;
}
/*ability tokens */
#secondary-toolbar {
width: 78% !important;
opacity:1 !important;
background-color: rgba(0, 0, 0, 0.44) !important;
}
#page-toolbar {
background-color: rgba(0,0,0,0.50) !important;
width: 80% !important;
height: 400px !important;
}
#page-toolbar .container {
width: 100% !important;
height: 400px !important;
white-space: normal !important;
padding-left: 5% !important;
padding-right: 5% !important;
}
.ui-dialog.dialog-collapsed {
opacity: .60 !important;
}
div[id="stats"]{
opacity: 0.3 !important;
}
.charsheet .sheet-pf-wrapper {
margin-top: 10px !important;
}
.nav-tabs {
z-index: 100000 !important;
position: fixed !important;
background-color: #f0f8ff !important;
margin:-10px 0 0 0 !important;
height: 2em !important;
}
.nav-tabs:hover {
opacity: 1.0 !important;
}
.nav-tabs>li>a {
padding-top: 6px !important;
font-size: 1.2em !important;
margin-top: -5px !important;
}
div.span6,
div.span12 {
margin-top:60px !important;
}
/* show mic with names only */
#textchat-notifier {
position: absolute !important;
top: -25px !important;
border: 2px solid #F00 !important;
opacity: .75 !important;
}
.namesonly .video {
display: inherit !important;
min-height: 0px !important;
height: 0px !important;
}
.namesonly .OT_widget-container {
display: none !important;
}
.namesonly #publisher_video {
top: -34px !important;
}
/* large cards */
#playerzone .deckhands .hand .handcontainer {
width: 600px !important;
}
.hand .handcontainer .cardinhand img {
max-width: 200px !important;
max-height: 400px !important;
}
/* status window */
#radial-menu .markermenu.open {
width: 280px !important;
height: 276px !important;
top: -38px;
overflow-y: auto;
}
.
