Show Off Your Style 2: The Stylening!

Oh. This is a thread. Somehow I missed it. I'll share some things just so I don't feel left out.

Query input fits to popup.

.ui-dialog-content.ui-widget-content > p > strong + input {width: 100% !important; width: -moz-available !important; width: -webkit-fill-available !important; width: fill-available !important;}

Actually, nobody probably needs the rest of those snippets. I'll post some more things later. I'm revamping PFC with more modern css but I don't remember how far along that project is.

Thanks Mik and Noon (Sounds like a buddy cop movie). If either of you decide to upload these to userstyles.org, post the link and I'll put it in the index post.

Edited the Hide Roll20 Interface style to account for new zoom slider controls. If you install using the Userstyle link, you will receive automatic notification of changes. Most styles have the install link in the top index post.

Show Time Stamps in Chat Archive

This one was pulled from a forum post made by Noon. I take no credit. However, I have tested it and it does work.

Time stamps are not normally displayed in chat archives. This style makes them visible

Code:

.textchatcontainer .message .tstamp {
    		display: block !important;
	}

[Install]

Tweaks for D&D 5e by Roll20 (OGL) sheet

Edited 2-25-20 to keep up with sheet changes
Edited 3-31-20 to fix expanded spell display
Edited 4-27-20 with tweaks by Ludovic

This style makes numerous quality of life tweaks to the official Roll20 sheet. CAUTION: Since the sheet is under constant development, parts may become superfluous or detrimental over time. So this style is made modular with each section commented so that users can adjust display. 

There are two main sections.

Core

A few tweaks have been made to the front page to tighten it up and to reduce the size of the add and edit buttons at the bottom of each list.

Spell Sheet

Lots of changes here. This section:

• Enlarges the word Cantrips on Spell Sheet to match spell slot sizes
• Tightens the list overall
  
• Tightens space between spell levels
  
• Moves innate field up to spell name line (previously it had its own line—huge waste of space)
  
• Fixes display of innate field (It now displays small in all caps to be more similar to the components)
• Changes Ritual tag to Green, making it easier to spot
• Changes Concentration tag to Blue, making it easier to spot
• Displays spell names in a more familiar D&D style (This section can be easily tweaked)
• Changes Spell background to yellow in edit mode (to make it clear that it is in edit mode)
• Changes Spell background to parchment in display mode. (Remove background-image line if you want this to just be blue)
• Boldens spell name in display mode 

At the end of the style is a section I expect to be removed as soon as the death saves and hit dice sections are revisited. This  last section just cleans those up.

Before and after on spell sheet:

The Code

/* CORE PAGE */
/* Makes description of equipment legible and enlarges edit box */
.charsheet .sheet-item .sheet-subitem .sheet-subtextarea {
    line-height: 13px;
    font-size: 11px;
    height: 96px;
}

/*Tightens Features and Traits?*/
.charsheet .sheet-col3 .sheet-textbox .sheet-display {
    padding: 0px 0px 5px 10px;
    margin-bottom: 0px !important;
}
/* makes edit and add buttons less obtrusive */
.charsheet .repcontrol .repcontrol_add:before,
.charsheet .repcontrol .repcontrol_edit:after {
    background-color: #fff;
    border: 1px solid #fff;
    color: #bbb;
    padding: 0px;
}



/* SPELL PAGE */
/* Enlarges the word Cantrips on Spell Sheet */
.charsheet .sheet-cantrips span {
    font-size: 14px;
    line-height: 14px;
}

/*tightens list*/
.charsheet .sheet-spell {
    margin-bottom: 0px;
    background-color: #fff;
    border-bottom: 1px solid #ddd;
    ;
}

/*Tightens space between spell levels*/
.charsheet .sheet-spell-container {
    min-height: 30px;
}

.charsheet .sheet-spell .sheet-display button[type=roll].sheet-spellcard {
    width : 85%;
    border-bottom: 0px solid #fff;
}

  .sheet-row  .charsheet .sheet-3colrow  {
    display: inline-block !important;
    vertical-align:bottom !important;
}

.ui-dialog .charsheet .sheet-row .sheet-details{
        display:block !important;

}

/* Fixes display of innate field*/
.charsheet .sheet-spells .sheet-innate {
    color: #666;
    display: inline !important;
    font-size: 9px;
    text-transform: uppercase;
    font-weight: bolder;
    margin-left: -1px !important;
}

/* Gets rid of comma*/
.charsheet .sheet-innate:before {
    content: ", ";
    color: #fff;
}


/* Changes Ritual tag to Green */
.charsheet span.sheet-spellritual {
    background-color: #019515;
}

/* Changes Concentration tag to Blue */
.charsheet span.sheet-spellconcentration {
    background-color: #015e95;
}

/* Fancy spell names*/
.charsheet .sheet-spell .sheet-display span.sheet-spellname {
    font-size: 16px;
    font-family: "Times New Roman", Times, serif;
    text-transform: capitalize;
    font-variant: small-caps;
    color: #7e2d40;
    font-weight: bolder;
    margin-right: 0px;

}


/* Changes Spell background to yellow in edit mode */
.charsheet .sheet-spell .sheet-wrapper .sheet-options-flag:checked ~ .sheet-options {
    display: inherit;
    background-color: #f9f6ca;
    padding: 5px;
    margin: 10px 5px 10px 5px;
}

/* Changes Spell background to parchment in display mode */
.charsheet .sheet-spell .sheet-details {
    background-image: url('https://i.imgur.com/vjL1blE.jpg');
    /*defaults to blue if image link is broken*/
    background-color: #eafbff;
    padding: 5px;
    display: grid !important;
    margin: 10px 5px 10px 5px;
}

/* Boldens spall name in display mode */
.charsheet .sheet-spell .sheet-details span[name="attr_spellname"] {
    font-weight: bolder;
}


/* TEMPORARY SECTION */
/* START Remove these after sheet is fixed on death saves*/
div.sheet-hdice-dsaves-container:nth-child(4) > div:nth-child(2) > button:nth-child(3) {
    /* margin-top: 6px; */
    margin-top: 0px !important;
}
div.sheet-row-container:nth-child(1) {
    margin-top: 2px !important;
}
div.sheet-row-container:nth-child(2) {
    margin-top: 2px !important;
}

.charsheet .sheet-hdice-dsaves-container input[type=number] {
    padding-top: 0px !important;
}

.sheet-roll-hitdie > select:nth-child(3) {
    font-size: 1px !important;
    width: 25px !important;
}
.charsheet .sheet-subcontainer .sheet-roll-hitdie button[type=roll]{
    margin-left: 15px;
}
/* END Remove these after sheet is fixed on death saves*/

Talk to Yourself Banner

Currently when using the "/talktomyself" command, the notification is chunky and in the way of other content. It could also be a touch more obvious. This fixes that problem.

Before and After:

Code:

#textchat-notifier
  {
    position: relative;
      width:100%;
    top: 0px;
      text-align: center;
    background-color: rgb(162, 0, 0);
    color: rgb(255, 255, 255);
    padding: 0px 0px;
    font-size: .7em;
    line-height: 1.0em;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 10px 10px 10px 10px;
    border-top: 0;
  }
.compendium-removed-expansions {
display:none;
}
.textchatcontainer .by {
    font-weight: bold;
    position: relative;
    left: -5px;
    font-size:11px;
    color:#888;
}
#textchat-input {
    padding-top: 0px;
    border-top: 0px;
}

EDITED for changes to Roll20 code 9-22

Thats a great idea. i dont use talktomyself very often, but when i do i often forget its on.

Zoom Slider Tweaks

For those who don't like the size of the new zoomslider, I offer two options. The first basically just makes it all a bit more compact and reduces the opacity. The second is an option to turn it off altogether.

Reduced Zoomslider:

Before:

After:

Code:

.zoomplus, .zoomminus {
    font-size: 7px;
}
#zoomclick{
  opacity: 0.8;
}
#zoomclick .btn {
    width: 2.8px;
    height: 5px;
    padding-left: 8px;
}
#zoomslider a.ui-slider-handle.ui-state-default.ui-corner-all {
    left: -.5em;
    height: 10px;
    width: 16px;
}
.zoomValue {
    font-size: 12px;
    font-family:"arial black";
    background-color: #22222247;
    padding: 0px;
}

And if you want to get rid of it altogether, use this:

#zoomclick{
  display: none !important;
}

Snippet: Hide Coins

This is just a snippet, written for RavenKnight. All it does is hide the coin images on the OGL sheet:

.sheet-container:not(.sheet-npc) .sheet-coin .sheet-label {
    background-image:none !important;
}

Hello,

I bring a modest stone, a simple line of css to correct a small error in the character sheet "D&D 5E by Roll20", in the code of "Tool Proficiencies". Blocking access to cadena and add.

Correctif pour D&D 5E by Roll20

.sheet-tool_proficiencies .sheet-label {
    position: relative !important;
}

Nothing extraordinary, but it can save the game.

Looks like it's very helpful in games where the translation text causes a problem. Thanks.

Keith, or anyone else, have you noticed an issue with stylish loading your styles extremely slow (sometimes causing the thick black boxes to appear I believe)? Is there any way around this? Maybe loading the styles you want into one big .js file and manually adding it to stylish?

Display issues have been reported with the advent of today's sheet update (D&D 5th Edition by Roll20) . I don't think it is related to Stylus, but it's easy enough to test by toggling off all styles.

BTW, I don't know if that was a typo, but if you have a choice between Stylus and Stylish, I would recommend Stylus. Stylus was created in response to  reports of privacy violation by Stylish.

Good evening,

I published the code on Stylish to make things easier.

https://userstyles.org/styles/181067/roll20-correctif-pour-d-d5e-translated-sheet-fix

Thanks for the reply

Install link added.

Here's two styles I find useful for interacting with the sheet sandbox, Game Settings page, and API script pages to move the save (and disable/delete) buttons to a more easily accessible position, and keeping them accessible.

Sheet Sandbox & Game Settings Button Mover

Set to apply to URLS starting with: https://app.roll20.net/sheetsandbox/settings and https://app.roll20.net/campaigns/campaignsettings

#settingsform{
    display:grid;
    grid-template-rows:auto;
}
#settingsform > hr{
    display:none;
}
#settingsform .btn.btn-primary.primarysubmit{
    grid-row-start:1;
    place-self:start;
    position:sticky;
    top:0;
    left:0;
}

Before & After:

API Scripts button mover

Set to apply to URLS starting with: https://app.roll20.net/campaigns/scripts

.script.tab-pane.active,
.preview{
    display:grid;
    grid-template-rows:auto;
    grid-template-columns:auto auto auto;
    grid-column-gap:1em;
}
.script.tab-pane.active > *,
.preview > *{
    grid-column:1 / -1;
}
.script.tab-pane.active > .pull-right{
    grid-column:3/4;
    grid-row:1/2;
    place-self:end;
    position:sticky;
    top:0;
    left:0;
}
.script.tab-pane.active > .btn.active.togglescript,
.script.tab-pane.active > .btn.inactive.togglescript{
    grid-column:2/3;
    grid-row:1/2;
    place-self:end;
    position:sticky;
    top:0;
    left:0;
}
.script.tab-pane.active > .btn.btn-primary.savescript{
    grid-column:1/2;
    grid-row:1/2;
    place-self:start;
    position:sticky;
    top:0;
    left:0;
}
.preview > div:last-of-type{
    grid-row:1/2;
    position:sticky;
    top:0;
    left:0;
    background-color:white;
}
.restartsandbox{
    place-self:start;
}

Before & After:

EDIT: Added information on what URLs they should apply to

EDIT: Added stickiness to the enable script button

Those are fantastic, especially the second one! Thanks for sharing!

Yeah, that second one is so good.

Very helpful thread. Thank you

keithcurtis said:

Tweaks for D&D 5e by Roll20 (OGL) sheet

This style makes numerous quality of life tweaks to the official Roll20 sheet. CAUTION: Since the sheet is under constant development, parts may become superfluous or detrimental over time. So this style is made modular with each section commented so that users can adjust display. 

Something seems to have changed with the OGL sheet (or something) to affect this one in the past couple of days.

Now in the spell section, all the spell names have the last 3 letters cut off and replaced with an ellipsis. Also, the spacing seems to have grown between the spells. I tried reducing the font size of the spell names, and although it did reduce the font size it didn't resolve the problem at all. See my screen capture below.

Thanks for the heads up. I'll have to see what I can do to fix it tonight.

It's mostly fixed. The expanded spell has some line break issues that I can't seem to resolve without breaking the innate field that displays after the spell name. The former is readable, and I think people tend to look more at the collapsed spell, so that's what I gave priority to. If anyone who really knows CSS wants to look at it, I wouldn't complain.

Thanks; that's much better!

This should be published by roll20 to every new user!  I just installed a bunch of these and it's AMAZING!!!  I have so much more screen now!  You guys are the absolute best.  If I were a billionaire I would totally buy you houses.

Quick, everyone buy lottery tickets for Omegaman! It's a foolproof plan!

Fixed the expanded spell display on the D&D 5e by Roll20 (OGL) sheet style.

Hide Toolbar Buttons

Use this one with caution. The intent is to use this to hide specific toolbar buttons, but the default installation hides ALL buttons. Install and then delete the code blocks for the buttons you wish to keep. If you install and do not edit the code, this will hide every button on the toolbar. There are better ways to do that. The use case for this is for people who do not want or need particular buttons, such as the dice roller, or the help button:

Example, to hide the dice roller and help button as shown in the screenshot, you would remove all code blocks but these:

#diceroller {
display: none !important;
}
#helpsite {
display: none !important;
}

Full Code:

#select {
  display: none !important;
}
#editinglayer {
  display: none !important;
}
#drawingtools {
  display: none !important;
}
#fxtools {
  display: none !important;
}
#zoompanel {
  display: none !important;
}
#measure {
  display: none !important;
}
#fogcontrols {
  display: none !important;
}
#startrounds {
  display: none !important;
}
#diceroller {
  display: none !important;
}
#helpsite {
  display: none !important;
}

Installation instructions and link in top post.

Hide the broken Aura Tool-tips that are currently showing up when editing forum posts.

@-moz-document url-prefix("https://app.roll20.net/forum/post"), url-prefix("http://app.roll20.net/forum/post") {
.ui-tooltip.ui-widget.ui-corner-all.ui-widget-content {
    display: none !important;
}
}

Hopefully this gets fixed sometime soon.

I recently installed Hide Roll20 Interface and bumped into a problem. When hiding playerzone, it hides the macro bar as well. I can't seem to figure out the fix to this as the IDs for avatars and users are randomly generated upon launching the game. I'd like to keep my macro bar, but I really don't need to see the other players...

Try this:

#playerzone .player {
display: none !important;
}

Note that the player avatars are needed to use the Split the Party feature (https://wiki.roll20.net/Page_Toolbar#Split_the_Party). Just remember that you can just temporarily turn off styles in Stylus, move players, then turn the style back on.

keithcurtis said:

It's mostly fixed. The expanded spell has some line break issues that I can't seem to resolve without breaking the innate field that displays after the spell name. The former is readable, and I think people tend to look more at the collapsed spell, so that's what I gave priority to. If anyone who really knows CSS wants to look at it, I wouldn't complain.

Hi Keith,

This slight CSS modification is correcting the weird effect at the end of the spell name and the ellipsis is activated for long spell names only :

/* Fixes display of innate field*/
.charsheet .sheet-spells .sheet-innate {
    color: #666;
    display: inline !important;
    font-size: 9px;
    text-transform: uppercase;
    font-weight: bolder;
    margin-left: -1px !important;
}

.charsheet .sheet-spell .sheet-display button[type=roll].sheet-spellcard 
{
    width : 85%;
    border-bottom: 0px solid #fff;
}

Those are both good fixes, thanks. I need to do a little bit more work on this style before I update it, though. I've noticed that it breaks a few things for NPC display. Works great for players, though.

keithcurtis said:

Those are both good fixes, thanks. I need to do a little bit more work on this style before I update it, though. I've noticed that it breaks a few things for NPC display. Works great for players, though.

A comma at the wrong place ?

.sheet-row .charsheet .sheet-3colrow  {
    display: inline-block !important;
    vertical-align:bottom !important;
}

That did it! Thanks for those bits. I have updated the master style.

keithcurtis said:

Try this:

#playerzone .player {
display: none !important;
}

That worked perfectly, thank you!

Hi all, fantastic work contained in this thread, and I've almost immediately started benefitting from some of these (the talk to myself change is divine, Keith!) but also have come over to post an issue I spotted with one of them.

The Macro Editing Tweak by Mike deBoston is the style that got me to actually install Stylus, as I have some extensive macro lists and the editing window is a nightmare.

But I noticed that it warps the macro quick-bar as well, both with and without the compact macro bar style included.

Here's a screenshot explaining it with a thousand words:

^{(toggle-insanity just turns "talk to myself" on and off; I swear it's harmless!)}

Any ideas what can be done to remedy this? (I'm not even basic-level competent at CSS, or I'd take a crack at editing the tweak myself...)

It doesn't do that on mine. The issue is the large gray box around ability-check? Or the larger translucent box below the token macro bar?

Yeah, each of the macros gets the large box around it when the mouse hovers over, and the smaller blue-and-white-outline square to the right of the translucent area appears with the style on.

It's not really a problem, as I can ofc just turn the style off while I'm playing

Hey, guys. I work on one more dark style. It is not a tweak, actually it full color and font rework with slight positioning fixes. At this moment it is alpha version (with bunch of bug, i guess).

The style works well with standart 5e charsheet.

To install directly with Stylus click this:

Stylus - Roll20 Dark Cobalt

Source code you can find at the github:

https://github.com/shevernitskiy/roll20darkcobalt

Does anyone have a tweak that will change the default width of the Status marker icon menu in-game?  Ever since the Custom Icons makeover, I have problems with it going off the bottom edge of the screen for any tokens that are in the lower portion of the screen, and then I have to scroll everything up in order to access them.

Anthony said:

Does anyone have a tweak that will change the default width of the Status marker icon menu in-game?  Ever since the Custom Icons makeover, I have problems with it going off the bottom edge of the screen for any tokens that are in the lower portion of the screen, and then I have to scroll everything up in order to access them.

If you mean status chooser in radial menu (set your values):

#radial-menu .markermenu.open {

        width: 230px;

        height: 225px;

        border-radius: 15px;

    }

I don't think so. It appears to be drawn by Canvas, like the rest of the VTT elements (ex: tokens, maps,  and bubbles), and doesn't lie on top like the toolbars and other interface controls. I don't think it can be altered by tweaking a CSS setting, and would probably require something like a specialized browser extension.

Radial menu  - html+css. You can change it.

Look at my variant.

Kirill S. said:

If you mean status chooser in radial menu (set your values):

#radial-menu .markermenu.open {

        width: 230px;

        height: 225px;

        border-radius: 15px;

    }

That's it!!  Thank you!  Now....what did you do to get such nice status bubbles and radial menus?

This code should work...

You can use Ruda font from google fonts (@import or @font-face or simply install it to your OS) 

or set your choise in variable --font-number

#radial-menu {
        --color-bg-dark: #1c1d28;
        --color-text-disabled: #888994;
        --color-element-bg: #373a52;
        --color-red: #f85212;
        --color-green: #78ff10;
        --color-blue: #0c6be7;
        --color-yellow: #fc0;
        --font-number: "Ruda", sans-serif;
	}
    #radial-menu .button {
        background: var(--color-element-bg) !important;
        border: 0px;
    }
    #radial-menu .button.button-1 {
        border-radius: 0px 0px 25px 25px;
    }
    #radial-menu .button.button-2 {
        border-radius: 25px 25px 0px 0px;
    }
    #radial-menu .button.button-1,
    #radial-menu .button.button-2 {
        box-shadow: 0px 0px 5px var(--color-text-disabled);
        left: 95px;
    }
    #radial-menu .button.button-2 {
        top: -5px;
    }
    #radial-menu .button.button-1 {
        top: 33px;
    }
    #radial-menu .button.button-3,
    #radial-menu .button.button-4,
    #radial-menu .button.button-5 {
        left: -60px;
    }
    #radial-menu .button.button-3 {
        box-shadow: 0px 0px 5px var(--color-text-disabled),
            inset 0px 0px 5px var(--color-green),
            inset 0px 0px 10px var(--color-green),
            inset 0px 0px 15px var(--color-green) !important;
        top: 15px;
    }
    #radial-menu .button.button-4 {
        box-shadow: 0px 0px 5px var(--color-text-disabled),
            inset 0px 0px 5px var(--color-blue),
            inset 0px 0px 10px var(--color-blue),
            inset 0px 0px 15px var(--color-blue) !important;
        top: 60px;
    }
    #radial-menu .button.button-5 {
        box-shadow: 0px 0px 5px var(--color-text-disabled),
            inset 0px 0px 5px var(--color-red),
            inset 0px 0px 10px var(--color-red),
            inset 0px 0px 15px var(--color-red) !important;
        top: -30px;
    }
    #radial-menu .button div.inner {
        background: none;
        color: var(--color-text-primary);
        font-family: var(--font-number);
        font-weight: 800;
        margin-top: 5px;
        text-shadow: 0px 0px 5px var(--color-bg-dark),
            0px 0px 2px var(--color-bg-dark), 0px 0px 2px var(--color-bg-dark);
    }
    #radial-menu .button.button-1 div.inner,
    #radial-menu .button.button-2 div.inner {
        margin-top: 2px;
    }
    #radial-menu .button div.inner span {
        font-size: 24px !important;
    }
    #radial-menu .markermenu {
        background: var(--color-element-bg) !important;
        box-shadow: 0px 0px 5px var(--color-text-disabled);
    }
    #radial-menu .markermenu .markercolor,
    #radial-menu .markermenu .markericon {
        border: 5px;
    }
    #radial-menu .markermenu.open {
        width: 230px;
        height: 225px;
        border-radius: 15px;
    }
    #radial-menu .markermenu .markericon.active,
    #radial-menu .markermenu .markercolor.active {
        outline: 2px dashed var(--color-yellow);
        outline-offset: -2px;
        border: 0px;
        background-color: var(--color-yellow);
        border-radius: 5px;
    }
    #radial-menu .markermenu .markercolor.dead {
        color: var(--color-red);
        top: -2px;
    }

That's cool! I stopped checking as soon as I realized I couldn't right-click->Inspect on it.

I imagine you defined it elsewhere in your dark style, but I think for that style above to stand alone, you need to add something like:

        --color-text-primary: #fff;

keithcurtis said:

I imagine you defined it elsewhere in your dark style, but I think for that style above to stand alone, you need to add something like:

        --color-text-primary: #fff;

to your color definitions?

I think, i missed that var above, sorry :)

--color-text-primary: #ecedf6;

Kirill S. said:

This code should work...

You can use Ruda font from google fonts (@import or @font-face or simply install it to your OS) 

or set your choise in variable --font-number

#radial-menu {
        --color-bg-dark: #1c1d28;
        --color-text-disabled: #888994;
        --color-element-bg: #373a52;
        --color-red: #f85212;
        --color-green: #78ff10;
        --color-blue: #0c6be7;
        --color-yellow: #fc0;
        --font-number: "Ruda", sans-serif;
	}
    #radial-menu .button {
        background: var(--color-element-bg) !important;
        border: 0px;
    }
    #radial-menu .button.button-1 {
        border-radius: 0px 0px 25px 25px;
    }
    #radial-menu .button.button-2 {
        border-radius: 25px 25px 0px 0px;
    }
    #radial-menu .button.button-1,
    #radial-menu .button.button-2 {
        box-shadow: 0px 0px 5px var(--color-text-disabled);
        left: 95px;
    }
    #radial-menu .button.button-2 {
        top: -5px;
    }
    #radial-menu .button.button-1 {
        top: 33px;
    }
    #radial-menu .button.button-3,
    #radial-menu .button.button-4,
    #radial-menu .button.button-5 {
        left: -60px;
    }
    #radial-menu .button.button-3 {
        box-shadow: 0px 0px 5px var(--color-text-disabled),
            inset 0px 0px 5px var(--color-green),
            inset 0px 0px 10px var(--color-green),
            inset 0px 0px 15px var(--color-green) !important;
        top: 15px;
    }
    #radial-menu .button.button-4 {
        box-shadow: 0px 0px 5px var(--color-text-disabled),
            inset 0px 0px 5px var(--color-blue),
            inset 0px 0px 10px var(--color-blue),
            inset 0px 0px 15px var(--color-blue) !important;
        top: 60px;
    }
    #radial-menu .button.button-5 {
        box-shadow: 0px 0px 5px var(--color-text-disabled),
            inset 0px 0px 5px var(--color-red),
            inset 0px 0px 10px var(--color-red),
            inset 0px 0px 15px var(--color-red) !important;
        top: -30px;
    }
    #radial-menu .button div.inner {
        background: none;
        color: var(--color-text-primary);
        font-family: var(--font-number);
        font-weight: 800;
        margin-top: 5px;
        text-shadow: 0px 0px 5px var(--color-bg-dark),
            0px 0px 2px var(--color-bg-dark), 0px 0px 2px var(--color-bg-dark);
    }
    #radial-menu .button.button-1 div.inner,
    #radial-menu .button.button-2 div.inner {
        margin-top: 2px;
    }
    #radial-menu .button div.inner span {
        font-size: 24px !important;
    }
    #radial-menu .markermenu {
        background: var(--color-element-bg) !important;
        box-shadow: 0px 0px 5px var(--color-text-disabled);
    }
    #radial-menu .markermenu .markercolor,
    #radial-menu .markermenu .markericon {
        border: 5px;
    }
    #radial-menu .markermenu.open {
        width: 230px;
        height: 225px;
        border-radius: 15px;
    }
    #radial-menu .markermenu .markericon.active,
    #radial-menu .markermenu .markercolor.active {
        outline: 2px dashed var(--color-yellow);
        outline-offset: -2px;
        border: 0px;
        background-color: var(--color-yellow);
        border-radius: 5px;
    }
    #radial-menu .markermenu .markercolor.dead {
        color: var(--color-red);
        top: -2px;
    }

Hi Krill, I have adapted your code to suite my style better but can't figure out how to get the radial bar input boxes to pop up to the side of the radial bars.

Any ideas?

My code is below.

#radial-menu {
        --color-text-primary: #b3b3b3;
        --color-bg-dark: #1c1111;
        --color-text-disabled: #150d0d;
        --color-element-bg: #372828;
        --color-red: #f85212;
        --color-green: #78ff10;
        --color-blue: #0c6be7;
        --color-yellow: #fc0;
        --font-number: "Ruda", sans-serif;
	}
    #radial-menu .button {
        background: var(--color-element-bg) !important;
        border: 0px;
    }
    #radial-menu .button.button-1 {
        border-radius: 0px 0px 25px 25px;
    }
    #radial-menu .button.button-2 {
        border-radius: 25px 25px 0px 0px;
    }
    #radial-menu .button.button-1,
    #radial-menu .button.button-2 {
        box-shadow: 0px 0px 5px var(--color-text-disabled);
        left: 75px;
    }
    #radial-menu .button.button-2 {
        top: -5px;
    }
    #radial-menu .button.button-1 {
        top: 34px;
    }
    #radial-menu .button.button-3,
    #radial-menu .button.button-4,
    #radial-menu .button.button-5 {
        left: -45px;
    }
    #radial-menu .button.button-3 {
        box-shadow: 0px 0px 5px var(--color-text-disabled),
            inset 0px 0px 5px var(--color-green),
            inset 0px 0px 10px var(--color-green),
            inset 0px 0px 15px var(--color-green) !important;
        top: 15px;
    }
    #radial-menu .button.button-4 {
        box-shadow: 0px 0px 5px var(--color-text-disabled),
            inset 0px 0px 5px var(--color-blue),
            inset 0px 0px 10px var(--color-blue),
            inset 0px 0px 15px var(--color-blue) !important;
        top: 55px;
    }
    #radial-menu .button.button-5 {
        box-shadow: 0px 0px 5px var(--color-text-disabled),
            inset 0px 0px 5px var(--color-red),
            inset 0px 0px 10px var(--color-red),
            inset 0px 0px 15px var(--color-red) !important;
        top: -25px;
    }
    #radial-menu .button div.inner {
        background: none;
        color: var(--color-text-primary);
        font-family: var(--font-number);
        font-weight: 800;
        margin-top: 5px;
        text-shadow: 0px 0px 5px var(--color-bg-dark),
            0px 0px 2px var(--color-bg-dark), 0px 0px 2px var(--color-bg-dark);
    }
    #radial-menu .button.button-1 div.inner,
    #radial-menu .button.button-2 div.inner {
        margin-top: 2px;
    }
    #radial-menu .button div.inner span {
        font-size: 18px !important;
    }
    #radial-menu .markermenu {
        background: var(--color-element-bg) !important;
        box-shadow: 0px 0px 5px var(--color-text-disabled);
    }
    #radial-menu .markermenu .markercolor,
    #radial-menu .markermenu .markericon {
        border: 5px;
    }
    #radial-menu .markermenu.open {
        width: 235px;
        height: 225px;
        border-radius: 15px;
    }
    #radial-menu .markermenu .markericon.active,
    #radial-menu .markermenu .markercolor.active {
        outline: 2px dashed var(--color-yellow);
        outline-offset: -2px;
        border: 0px;
        background-color: var(--color-yellow);
        border-radius: 5px;
    }
    #radial-menu .markermenu .markercolor.dead {
        color: var(--color-red);
        top: -2px;
    }

These are the input boxes I mean: