Greasy Fork

Since maybe yesterday, the control buttons become weird.
It's probably some code in the "scale down" section. If I delete the 7 lines code, the buttons would become better aligned.
Does anyone else see this kind of issue?

Got a solution:
css += ".ytp-mute-button.ytp-button { height: 33px; padding: 2px !important; }";
You can tweak the numbers to adjust the size and position of the icon.

Got a solution:
css += ".ytp-mute-button.ytp-button { height: 33px; padding: 2px !important; }";
You can tweak the numbers to adjust the size and position of the icon.

Forgot to mention, this is just for the volume icon.

Got a solution:
css += ".ytp-mute-button.ytp-button { height: 33px; padding: 2px !important; }";
You can tweak the numbers to adjust the size and position of the icon.

Forgot to mention, this is just for the volume icon.

Excellent. That was really bothering me. :} Thanks for this!

Didn't really know what I was doing, but I modified one line and added a couple, and the 'loop' button is now the correct size in non-fullscreen mode and almost perfect in fullscreen mode, and the 'volume slider handle' is now centered in fullscreen mode as it is in non-fullscreen mode. I stuck these, and @Salt Sugar's css += ".ytp-mute-button.ytp-button { height: 33px; padding: 2px !important; }"; fix in the 'YtNewUIFix.prototype.fixBigMode = function (css)' section, although this may not be right:

css += ".ytp-big-mode .ytp-volume-slider-handle { width: 12px; height: 12px; border-radius: 6px; margin-top: -16px; }\n"; // changed 'margin-top: -6px' to 'margin-top: -16px' to center 'volume slider handle' in fullscreen mode
css += ".it-player-button.ytp-button { height: 33px; padding: 2px !important; }"; // added this line to fix 'loop' button size in non-fullscreen mode
css += ".ytp-big-mode .it-player-button { height: 36px; margin-top: -7px; }\n"; // added this line to improve 'loop' button size in fullscreen mode

I'd be happy to hear any further improvements on my changes. Hope this helps someone

I moved my additions and changes around, but I don't see any differences from where I had placed them initially. These minor adjustments look good to me. This is what I ended up with:

YtNewUIFix.prototype.fixControls = function (css) {
    // additons made by arubamon (https://greasyfork.org/en/users/786863-arubamon)
    css += ".ytp-mute-button.ytp-button { height: 33px; padding: 2px !important; }"; // fixed size of volume icon in non-fullscreen mode, thanks to Salt Sugar (https://greasyfork.org/en/users/396207-salt-sugar)
    css += ".it-player-button.ytp-button { height: 33px; padding: 2px !important; }"; // resized and repositioned loop button for non-fullscreen mode by arubamon (https://greasyfork.org/en/users/786863-arubamon)
    css += ".ytp-volume-slider-handle { width: 12px; height: 12px; border-radius: 6px; margin-top: -7px; }\n"; // resized and repositioned volume slider handle for non-fullscreen mode by arubamon (https://greasyfork.org/en/users/786863-arubamon)
    if (this.isEmbedded && this.addWatchLater) {
        css += ".ytp-watch-later-button { margin: 0!important; }\n";
    }
    return css;
};

YtNewUIFix.prototype.fixBigMode = function (css) {
    // additons made by arubamon (https://greasyfork.org/en/users/786863-arubamon)
    css += ".ytp-big-mode .it-player-button { height: 39px; border-radius: 0px; margin-top: -10px; }\n"; // resized and repositioned loop button for fullscreen mode by arubamon (https://greasyfork.org/en/users/786863-arubamon)
    return css;
};