AutoButton weirdness (Big Buttons)

Yesterday it was fine, but loading up Roll20 today, Oosh's Auto Buttons looked like this. The buttons got a growth spurt.  I've not changed the script or touched it at all. Zoom is 100%. I've tried turning Stylus off, and have asked two other GM's who use the script to test it out. They got the same result of the big buttons in their own games.  I can't find why they've suddenly changed. They still work and all, just I preferred them as they were, neat and small. Any information as to the cause or a fix would be appreciated.

I also can confirm I took this picture this morning.

Something changed in Roll20's styles that is affecting how the scaling for these styles works out.&nbsp; You can find fix details here:&nbsp;<a href="https://app.roll20.net/forum/permalink/11548182/" rel="nofollow">https://app.roll20.net/forum/permalink/11548182/</a>

The problem is that, that solution won't work for me. I don't use stylus. I think the CSS Style of the script needs to be modify, but I can't find which will affect this. I tried to change some of the values for font and line high on the script (Autobuttons - line 262), but that does nothing.

So playing with the code, I found the solution. On the code look for the CSS Style area, on the line that contains "buttonContainer" modify the Hight: to 1.5rem and the width: to 1.5rem. this will reduce the size of the boxes. See picture below.

Playing around with those lines I got it back to a nice, neat state. These are the three lines I played with randomly until they became the below picture. outer: `position: relative; vertical-align: middle; font-family: pictos; display: block; background: #f4e6b6; border: 1px solid black; height: auto; line-height: 34px; text-align: center; border-radius: 2px;`, rollName: `font-family: arial; font-size: 1.1rem; color: black; font-style:italic; font-weight: bold; position:relative; overflow: hidden; display: inline-block; line-height: 1.2rem; margin: 1px 1px 1px 1px; text-align: left; left: 0px; top: 5px;`, buttonContainer: `display: inline-block; text-align: center; vertical-align: middle; line-height: 26px; margin: 5px 3px 5px 3px; height: 1.8rem; width: 1.8rem; border: #8c6700 1px solid; box-shadow: 1px 1px 1px #805200; border-radius: 0px; background-color: whitesmoke; position: relative;`,

Bianca said: Hello! We released a fix for roll templates but not specifically buttons; did that fix the size? If not, I'll be sure to let the team know! It did not.

Warlord said: So playing with the code, I found the solution. On the code look for the CSS Style area, on the line that contains "buttonContainer" modify the Hight: to 1.5rem and the width: to 1.5rem. this will reduce the size of the boxes. See picture below. I got most of it fixed, but the icons inside are still pretty big. Do you happen to know which value to edit to fix that?

Bianca said: Hello! We released a fix for roll templates but not specifically buttons; did that fix the size? If not, I'll be sure to let the team know! Can Confirm, still big.

Merit said: I got most of it fixed, but the icons inside are still pretty big. Do you happen to know which value to edit to fix that? You edited the container but not the text itself. The Container is now 1.5, but the text is still 1.8.

@Merit Most of it is by adjusting the fint-size and line-height on the&nbsp;&nbsp; crit:, &nbsp; crit2:, &nbsp; full:, &nbsp;etc... mostly you need to play with it I will post the number I used.

Warlord said: @Merit Most of it is by adjusting the fint-size and line-height on the&nbsp;&nbsp; crit:, &nbsp; crit2:, &nbsp; full:, &nbsp;etc... mostly you need to play with it I will post the number I used. Thank you!

Ive tried everything nothing is working its just stopping the API

Here are the lines I replaced. Try these: &nbsp; const styles = { &nbsp; &nbsp; error: `color: red; font-weight: bold;`, &nbsp; &nbsp; outer: `position: relative; vertical-align: middle; font-family: pictos; display: block; background: #f4e6b6; border: 1px solid black; height: auto; line-height: 34px; text-align: center; border-radius: 2px;`, &nbsp; &nbsp; rollName: `font-family: arial; font-size: 1.1rem; color: black; font-style:italic; font-weight: bold; position:relative; overflow: hidden; display: block; line-height: 0.9rem; margin: 1px 0px 0px 0px; white-space: nowrap; text-align: left; left: 2px;`, &nbsp; &nbsp; buttonContainer: `display: inline-block; text-align: center; vertical-align: middle; line-height: 26px; margin: auto 5px auto 5px; height: 1.95rem; width: 1.95rem; border: #8c6700 1px solid; box-shadow: 0px 0px 3px #805200; border-radius: 5px; background-color: whitesmoke; position: relative;`, &nbsp; &nbsp; buttonShared: `background-color: transparent; border: none; border-radius: 5px; padding: 0px; width: 100%; height: 100%; overflow: hidden; white-space: nowrap; position: absolute; top: 0; left: 0; text-decoration: none;`, &nbsp; &nbsp; crit: `color: darkred; font-size: 2.18rem; line-height: 1.73rem; text-shadow: 0px 0px 2px black;`, &nbsp; &nbsp; crit2: `color: #ff4040; font-size: 1.35rem; line-height: 1.8rem;`, &nbsp; &nbsp; full: `color: darkred; font-size: 1.8rem; line-height: 1.73rem; text-shadow: 0px 0px 2px black;`, &nbsp; &nbsp; half: `color: black; font-family: pictos three; font-size: 1.95rem; line-height: 2.25rem; text-shadow: 0px 0px 2px black;`, &nbsp; &nbsp; halfSmall: `color: black; font-family: pictos three; font-size: 1.65rem; line-height: 2.1rem; text-shadow: 0px 0px 1px black;`, &nbsp; &nbsp; half2: `color: whitesmoke; font-family: cursive; font-size: 0.68rem; line-height: 1.95rem;`, &nbsp; &nbsp; critHalf: `color: #d51d1d; font-family: pictos three; font-size: 2.24rem; line-height: 2.1rem; text-shadow: 0px 0px 2px black;`, &nbsp; &nbsp; healFull: `color: green; font-size: 1.8rem; line-height: 2.73rem; text-shadow: 0px 0px 2px black;`, &nbsp; &nbsp; damageLabel: `font-family: cursive; font-size: 0.9rem; font-weight: bolder; color: #f2c8c8; line-height: 1.8rem;`, &nbsp; &nbsp; healLabel: `color: #cdf7d1; font-family:cursive; font-size: 1.35rem; font-weight:bold; line-height: 1.65rem; text-shadow: 0px 0px 2px white;`, &nbsp; &nbsp; resist: ` font-family: pictos three; font-size: 1.95rem; line-height: 2.1rem; text-shadow: 0px 0px 2px black; color: #003f82;`, &nbsp; &nbsp; resistSmall: ` font-family: pictos three; font-size: 1.65rem; line-height: 2.1rem; color: #003f82; text-shadow: 0px 0px 1px black;`, &nbsp; &nbsp; resistLabel: `font-family: cursive; font-size: 0.75rem; line-height: 1.95rem; `, ...