TL;DR:
Unable to modify size and spacing of elements, because almost everything related to size or spacing is controlled by the Vue.js renderer, not CSS (a horrible thing to do when you intend to make it customizable).
Context:
The new TS6-Client Design wastes a lot of space and is just way to big in my opinion. I thought to myself ‘I can probably change it in Settings → Appearance’. But, everything was already set to small/compact. While in the Settings I noticed the section for User Themes and got the Idea to make my own. Sure enough, all you need is some CSS. And since I am a Frontend-Developer who deals with CSS on a daily basis, I thought to myself ‘this is gonna be an easy fix!’.
now for the BIG Problem(s) at hand
Pretty much all you can do is change colors, backgrounds, some icons maybe and some hover effects.
Why:
Usually the Size of Elements is dictated by the Content and the Spacing is controlled by the margin and padding. But almost everything related to size or spacing is fixed or controlled by the Vue.js renderer, not CSS.
The DOM does not reflect the actual hierarchy of displayed elements, which furthers the problem with positioning, sizing and spacing elements.
All size values are in absolute units (px) and not in relative units (rem), which also makes the problem worse.
The DOM is a absolute mess of wrapper elements.
(the last one is just a nitpic on my part, but still not a good look/thing to do)
TeamSpeak, please change these. Or at least expose the variables used for sizing and spacing available to Custom Themes.
Currently I don`t have the Time and Energy to make a detailed write up with examples and proposal for improvement, but if the Topic gains more interest I could update and expand the Topic.
