Not sure if this has been mentioned elsewhere but I finally figured a way to move on from the speed dial geometry hook without having to change the zoom on the UI.

I don't like them so square but you can fool around with this for desired results.

.dials { zoom: 120%; } .dials .dial .thumbnail-image { border-radius: 6px; width: 110% !important; height: 90% !important; min-width: auto !important; }

0_1504765724043_2017-09-07_509.png

This will make the dial titles an overlay for the above code

.dials .dial .button-title { background-color: var(--colorBgDark) !important; min-width: 110%; margin-top: -55px; border-radius: 0 0 5px 5px; padding: 5px 10px 5px 3px; font-size: 85%; opacity: .9 !important; } .dials .dial:hover .button-title { transform: scale(1.028,1); margin-top: -52px; } .dials .dial .editable-title-container>input, .dials .dial .editable-title-container>input:active { margin-top: -45px; min-width: 110%; font-size: 85%; border-radius: 0 0 5px 5px !important; padding: 8px 10px 10px 3px !important; border-color: transparent !important; }

0_1504766049113_2017-09-07_512.png

@array
そうでしたか！解決し良かったです。

@luetage I appreciate the credit but, to be fair, all I said was that I had confused the ::after pseudo element for a box shadow when I initially tried to style the panel 😉

Also, here are some changes I've made to my css:

.theme-dark #switch button svg {fill: var(--colorFg);} .theme-dark #switch button.active svg, #switch button.active svg { fill: var(--colorFg); } #switch button.active, #switch button.active:hover { background: #fff !important; } .theme-dark #switch button.active, .theme-dark #switch #switch button.active, #switch button.active:hover { background-color: var(--colorBgLightIntense) !important; }

Essentially, if user decides to use a dark theme, SVGs in the panel adopt that theme's foreground color, and the active button in the panel adopts the theme's background color. It's a better user experience, imho