Roll20 CSS enhancements for myself as GM
Roll20 GM View Enhancements by kinchj
Details
Authorkinchj
LicenseNo License
CategoryRoll20
Created
Updated
Size17 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 Roll20 GM View Enhancements
@version 20230426.19.55
@namespace userstyles.world/user/kinchj
@description Roll20 CSS enhancements for myself as GM
@author kinchj
@license No License
==/UserStyle== */
@-moz-document regexp("https://app.roll20.*.net/editor/.*") {
/* Radial Menu Emojis */
/* Bar 1: HP */
#radial-menu .button.button-3:after {
content: "❤️";
position: relative;
color: white;
font-size: 13px;
top: -45px;
left: -10px;
border-radius: 25px 25px 25px 25px;
padding: 2px;
background-color: #000;
}
/* Bar 2: AC */
#radial-menu .button.button-4:after {
content: "🛡️";
position: relative;
color: white;
font-size: 13px;
top: -45px;
left: -10px;
border-radius: 25px 25px 25px 25px;
padding: 2px;
background-color: #000;
}
/* Bar 3: Passive Perception */
#radial-menu .button.button-5:after {
content: "👀";
position: relative;
color: white;
font-size: 13px;
top: -45px;
left: -10px;
border-radius: 25px 25px 25px 25px;
padding: 2px;
background-color: #000;
}
/* Alternative emoji for 'Speed' */
/* content: "👟"; */
}
@-moz-document regexp("https://app.roll20.*.net/editor/.*") {
/* Token Action Toolbar Location Override*/
#secondary-toolbar {
top: 265px !important;
}
}
@-moz-document regexp("https://app.roll20.*.net/editor/.*") {
/* Token Action - Add Color to Buttons */
.btn {
--GM-button-color: 1px solid red !important;
}
/* 🎛️ */
.btn[data-macroid="-M4MqKQpTCRs8I6I65Rh|-NA5KtQnCt5FIGFWNVXi"],
.btn[data-macroid="-NHV_Bp5gmlPUKvhwghw|-NHWOa3bNQLP8oWwu4UE"]{
background-color: purple !important;
background-image: none !important;
}
/* 📋 */
.btn[data-macroid="-M4MqKQpTCRs8I6I65Rh|-NA5KtQokKcS1aYytCtS"],
.btn[data-macroid="-NHV_Bp5gmlPUKvhwghw|-NHWOa3bNQLP8oWwu4UF"] {
background-color: #7e2d40 !important;
background-image: none !important;
border: var(--GM-button-color)
}
/* 🎲 */
.btn[data-macroid="-M4MqKQpTCRs8I6I65Rh|-NA5KtQpClJd5y6nFfFg"],
.btn[data-macroid="-NHV_Bp5gmlPUKvhwghw|-NHWOa3cAGrQP1gBxaEw"] {
background-color: teal !important;
background-image: none !important;
border: var(--GM-button-color)
}
/* ⚔️ */
.btn[data-macroid="-M4MqKQpTCRs8I6I65Rh|-NA5KtQq7uZnqx3Ti1lM"],
.btn[data-macroid="-NHV_Bp5gmlPUKvhwghw|-NHWOa3cAGrQP1gBxaEy"] {
background-color: red !important;
background-image: none !important;
border: var(--GM-button-color)
}
/* ❇️ */
.btn[data-macroid="-M4MqKQpTCRs8I6I65Rh|-NA5KtQrzlK2FMyzf37f"],
.btn[data-macroid="-NHV_Bp5gmlPUKvhwghw|-NHWOa3d99pNBfnnMWjM"] {
background-color: purple !important;
background-image: none !important;
border: var(--GM-button-color)
}
/* ☠️ */
.btn[data-macroid="-M4MqKQpTCRs8I6I65Rh|-MUKXA9nmDj5z-9uTGVq"],
.btn[data-macroid="-NHV_Bp5gmlPUKvhwghw|-NHWQDim5SBB8VYz6M-n"] {
background-color: #000000 !important;
background-image: none !important;
border: var(--GM-button-color)
}
/* 💭 */
.btn[data-macroid="-M4MqKQpTCRs8I6I65Rh|-M_iUrMxgPsn2a8Xa3kp"],
.btn[data-macroid="-NHV_Bp5gmlPUKvhwghw|-NHWRBuY_aNQEDEc3hBW"] {
background-color: #6aa84f !important;
background-image: none !important;
border: var(--GM-button-color)
}
/* 🚪 */
.btn[data-macroid="-M4MqKQpTCRs8I6I65Rh|-MQLGNh4_efiWuFXfi1F"],
.btn[data-macroid="-NHV_Bp5gmlPUKvhwghw|-NHWRxKNdpN_SpPirUK2"] {
background-color: #39D !important;
background-image: none !important;
border: var(--GM-button-color)
}
/* 🛡️ */
.btn[data-macroid="-M4MqKQpTCRs8I6I65Rh|-N1OyIhkXPfZq94KfaQu"] {
background-color: purple !important;
background-image: none !important;
border: var(--GM-button-color)
}
/* 🧚 */
.btn[data-macroid="-M4MqKQpTCRs8I6I65Rh|-MVKbWM-Hq66NNshUTIk"] {
background-color: purple !important;
background-image: none !important;
border: var(--GM-button-color)
}
/* 🫥 */
.btn[data-macroid="-M4MqKQpTCRs8I6I65Rh|-NRGm_gsg55jZ6bXFCkh"] {
background-color: white !important;
background-image: none !important;
border: var(--GM-button-color)
}
}
@-moz-document regexp("https://app.roll20.*.net/editor/.*") {
/* Token Settings Popup Window */
/* Remove Whitespace */
div.tokeneditor__col {
padding-top: 0px
}
/* Tooltip Dialogue Box Position (if not removed) */
.dialog.largedialog.tokeneditor .basic.tab-pane.tokeneditor__details small {
position: relative;
top: -99px;
}
body > div > div > div > div > div.tokeneditor__details > div.tokeneditor__row {
margin-top: 0px !important;
}
body > div > div > div > div > div > div > div > div.tokeneditor__container-tooltip.tooltip_disable_box {
z-index: 2
}
div.basic.tab-pane.tokeneditor__details > div.tokendescription.w-100 {
width: 151px;
z-index: 1
}
/* Optional - Remove Tooltip Dialogue Box */
.tokendescription,
div.basic.tab-pane.tokeneditor__details > div.tokeneditor__row,
div.basic.tab-pane.tokeneditor__details > hr:nth-child(2),
.dialog.largedialog.tokeneditor .basic.tab-pane.tokeneditor__details small {
display: none;
}
/* Shrink whitespace between horizontal lines */
div.prototype.tab-pane > div > hr,
div.basic.tab-pane.tokeneditor__details > hr {
margin: 1px;
}
/* Adjust whitespace below horizontal lines above 'Total Light' */
div.token_light > hr:nth-child(5) {
padding-bottom: 10px;
}
/* Remove Convert DL alert & Advanced & Legacy Settings */
div.prototype.tab-pane > div.alert.alert-info,
div.token_light > div.token_light,
div.token_light > hr:nth-child(8) {
display: none;
}
}
@-moz-document regexp("https://app.roll20.*.net/editor/.*") {
/* GM Compact Page Tab */
#page-toolbar {
height: 290px;
max-height: 100% !important;
width: calc(100% - 375px) !important;
overflow: hidden;
left: 40px;
}
#page-toolbar.closed {
height: auto !important;
top: -1320px !important;
/*this custom css seems to interfere with the JS based animation of the toolbar opening and closing. This makes sure that the page toolbar is properly placed when closed*/
}
#page-toolbar .container {
width: auto;
white-space: normal;
/* height: 300px; */
}
/* #page-toolbar .height {height: 300px !important } */
#page-toolbar .container {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
height: 100%;
padding-left: 0;
padding-right: 0;
}
#page-toolbar .pages {
flex-wrap: wrap !important;
}
#page-toolbar .pages .availablepage {
margin-left: 5px;
margin-right: 5px;
margin-top: 5px;
margin-bottom: 5px;
width: 80px;
}
#page-toolbar .pages .availablepage img.pagethumb {
left: 50%;
margin-top: 0;
max-height: 75px;
max-width: 75px;
position: absolute;
top: 5px;
transform: translate(-50%);
}
#page-toolbar .pages .availablepage span {
bottom: 0;
max-height: 100%;
overflow-wrap: anywhere;
position: absolute;
white-space: normal;
}
#page-toolbar .handle.showtip {
position: fixed;
top: 2px !important;
right: 335px !important;
}
#page-toolbar > div.handle.showtip {
border-radius: 3px;
}
}
@-moz-document regexp("https://app.roll20.*.net/editor/.*") {
/* 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;
}
}
@-moz-document regexp("https://app.roll20.*.net/editor/.*") {
/* Rollable Token Delete Table Button */
/* Wide Button */
/*
[class*="deleterollabletable"] { position:fixed !important; bottom:8px !important; right: 15px; width: 147px; padding: 4px 0px; overflow: clip; }
*/
/* Small Button */
[class*="deleterollabletable"] {
position: fixed !important;
bottom: 8px !important;
right: 105px;
width: 30px;
height: 30px;
padding: 0px 0px;
white-space: normal;
font-size: 8px;
line-height: 10px;
}
}
@-moz-document regexp("https://app.roll20.*.net/editor/.*") {
/* Right Sidebar - Hide Menu Items Override */
#settings-accordion > div:nth-child(7) {
display: block;
}
/* Move Exit Button back to Bottom */
#settings-categories {
flex-direction: column !important;
}
/* Remove 'Rejoin as Player' button */
#rejoin-exit > a {
display: none;
}
}
@-moz-document regexp("https://app.roll20.*.net/editor/.*") {
/* NPC Toggle Button */
/* Optional Code to keep NPC Toggle Button always visible */
.licensecontainer .npc_toggle[value="1"] ~ .npc .npc_options-flag:not(:checked) ~ .npc_options > div:not(:nth-child(30)) {
display: none !important;
}
div.container.npc > div.npc_options,
div.container.npc > div.npc_options > div:nth-child(30) {
display: block !important;
}
div.page.options,
input[type=radio].tab-button.options:not(:checked) ~ div.page.options > div.body,
input[type=radio].tab-button.options:not(:checked) ~ div.page.options > div.body > div.col.col3,
input[type=radio].tab-button.options:not(:checked) ~ div.page.options > div.body > div.col.col3 > div.general_options,
input[type=radio].tab-button.options:not(:checked) ~ div.page.options > div.body > div.col.co...