Site CSS Layout Broken
Whoever is doing the CSS coding for Twitch site layout, really needs to be fired, because it seems to get more broken every day. It's gotten pretty broken to the point now where black borders are cutting off part of the site, video player controls being out of view, and icons being oversized and misaligned to where they should be.
Video Player Controls being out of view is a huge problem, and I noticed its an issue in either Firefox or Chrome/Vivaldi. I've had to use CSS Overrides with Stylus extension JUST to bring back the video player controls because of the bad CSS coding that's been going on with Twitch. I'm by no means a CSS coding professional, but I can see bad CSS when I see it.
Firefox → https://www.dropbox.com/s/y93sw0oid4v2sjh/flameshot_2021-02-24__11_05_24_AM.png?dl=0
Vivaldi (with my CSS override fix) → https://www.dropbox.com/s/qi29xdh99i38or8/flameshot_2021-02-24__11_08_28_AM.png?dl=0
This is Chrome/Vivaldi BEFORE my CSS override fix → https://www.dropbox.com/s/dxkedaulvtpqgj5/flameshot_2021-02-24__11_21_56_AM.png?dl=0
Here's Firefox after my CSS override fix → https://www.dropbox.com/s/8g9hbcflxkusys0/flameshot_2021-02-24__11_14_52_AM.png?dl=0
it still looks bad even with my CSS overrides, because there's too many things that override the little things, and too many CSS elements using the !important
on everything, this is just bad CSS coding if you're using !important
for everything like this.
Without the necessary changes needed it's going to look terrible, misaligned and out of place with weird stuff in places where it shouldn't. Here's what my CSS overrides have been using with Stylus;
.channel-root + .persistent-player[style] {
top: 0px;
left: 0px;
position: fixed;
width: 150%;
max-width: calc(100% - 280px);
max-height: calc(100% - 130px);
overflow: hidden;
z-index: 5;
height: auto;
transition: transform 0.3s ease 0s;
transform-origin: center top;
transform: scale(1);
}
.side-nav-card__link img {
width: 28px;
height: 28px;
position: absolute;
margin: 0px -3px
}
.chat-line__message-emote, .chat-line__message--emote-button {
margin: 0px 1px 0px;
position: relative;
vertical-align: baseline;
overflow: visible;
}
.tw-inline .tw-relative .tw-tooltip__container .emote-button {
position: fixed;
margin: 0px 19px 0px;
}
/*
.tw-border-radius-rounded {
border-radius: 9000px;
border-radius: var(--border-radius-rounded);
}
*/
.user-avatar-animated__halo {
height: 76px;
width: 76px;
}
Something really needs to be done to fix up the CSS code of the site, because at this rate its just going to be completely broken and unusable, and no amount of CSS override fixes will be able to fix it.