Skip to content

Roll20 GM View Enhancements by kinchj

Write a review Install Get Stylus

Details

Authorkinchj

LicenseNo License

CategoryRoll20

Created

Updated

Size17 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Roll20 CSS enhancements for myself as GM

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...

Reviews

No reviews yet.