CharInsert failure to load properly after installation

[spring plover]

hm looks like charinsert changed to using input instead of a at some point
just change the .mw-charinsert-buttons a to .mw-charinsert-buttons input (there should be 3 u have to change)
and also change the border on .mw-charinsert-buttons input to 2px #bcd outset
and also add margin-bottom:0 to .client-js .mw-edittools-section input[type="button"]

[past magnet]

Looks now like this, but it's only the buttons. Wish there were a way to add the green box the picture has up there.

And for some reason, looks different (and slightly vertically stretched) Why this happens?

Also, I did not expected this button design; I though they had a jade gradient with a bluish shadow.

[spring plover]

🤷 i just did it by the screenshot, the result from the css on that page is just different from the screenshot they show
also add margin-top:0 to really get rid of the gap
nothing in the css on that page makes the green bg either, add this

#mw-edittools-charinsert {
background-color: #e8ffe8;
border-color: #58c858;
}
``` and also add !important to the border line from before

[past magnet]

It would more useful If I place margin: 0;, instead?

[past magnet]

Also, the buttons have gaps when being used.

I want to attempt to modify them, but I need to understand every code in here (what's their function or something):

[past magnet]

Tried to check both versions with 'inspect' tool, but found nothing.

and the margin property only removes the gap between the buttons and the green box, but doesn't explain about the weird stretchment.

WAIT

I don't think the stretch is for the box... It's caused due the buttons size.

[past magnet]

Is there a way to place a limited size of the buttons in the chart?

[spring plover]

298 is the entire green box
306 is each of the little buttons
316 is what happens when the buttons are clicked/hovered
322 makes the "basic characters" dropdown inline with the buttons
326 also refers to the little buttons right now, but it probably meant something else before, since buttons used to be <a> and not <input>

tbh, get rid of the stuff under 326, and just put

margin:0;
padding:1px;

[past magnet]

It now looks much better! But I have a remaining problem...

The border: Outset property doesn't work when I click on a button. If I attempt to put it aside like "border-line: outset;", it breaks the button's appearance.

The buttons just remain on inset mode.

btw, If "Hover" is the state when I place the pointer over the button, "active" is the state when I click the button, right?

is there a way to color the inset and onset gray borders?

[spring plover]

add !important to border-style:inset too, since now the normal button border has a !important too

[past magnet]

It worked! cool!

[past magnet]

I'm going to personalize it like this picture.

[past magnet]

i'm almost done, but I want to know if there's a way to remove the rounded corners...

[spring plover]

add border-radius 0 to the .mw-charinsert-buttons input line