style.css

/**
 * Change "Host 2.0" bar and VoD bar to be the same width as the video player
 */
b-vod-bar,
b-host-bar {
	padding: 8px 16px 0 16px!important;
}

/**
 * Make the "Host 2.0"/Offline VoD chat tabs flexible
 */
b-channel-chat-tabs,
bui-tab-bar {
	justify-content: center!important;
}

b-channel-chat-tabs bui-tab-bar .bui-tab-underline,
bui-tab-bar .bui-tab-underline[_ngcontent-c13] {
	width: 34.2%!important;
}

bui-tab-bar bui-tab-label {
	min-width: 140px!important;
	width: 100%!important;
}

/**
 * Remove the padding from the left/right of chat tabs
 */
b-channel-chat-tabs, bui-tab-bar {
	padding: 0!important;
	padding-left: 0!important;
	padding-right: 0!important;
}

/**
 * Add border to chat messages
 */
.message-container > * {
	border-bottom: 2px solid rgba(228, 238, 242, 0.12);
}

/**
 * Remove border from last chat message
 */
.message-container > *:last-child {
	border-bottom: 0;
}

/**
 * Alternate the background color of chat messages
 */
.message-container > *:nth-child(even):not([class]) {
	background-color: rgba(228, 238, 242, 0.06);
}

/**
 * Remove fixed height from timestamp
 * Change color to white
 * Move timestamp up 1px to not make the bottom border look odd
 * Remove bottom margin
 */
.timestamp {
	color: #FFFFFF!important;
	height: auto!important;
	margin-bottom: 0!important;
	margin-top: -1px!important;
}

/**
 * Remove border from timestamps
 */
.timestamp:before {
	border-bottom: 0!important;
}

/**
 * Move timestamp to the middle of chat
 * Add background to timestamps
 * Change width to 100%
 */
.timestamp > * {
	background-color: rgba(228, 238, 242, 0.12);
	opacity: 1!important;
	padding: 2px;
	text-align: center;
	width: 100%;
}

/**
 * Hide timestamps if they are the last child in the chat
 */
.timestamp:last-child {
	display: none!important;
}

/**
 * Change opacity on timestamps
 */
.timestamp span {
	opacity: 0.75!important;
}

/**
 * Enlarge chat avatars
 */
b-channel-chat-messages b-channel-chat-message {
	padding: 3px 6px 3px calc(33px + 10px)!important;
	min-height: calc(48px + 6px);
}

b-channel-chat-messages b-channel-chat-author .image {
	width: calc(34px + 2px)!important;
	height: calc(34px + 2px)!important;
	left: calc(-34px - 6px)!important;
	top: calc(8px - 34px/2)!important;
	margin-top: 0!important;
	border-radius: 3px!important;
}

b-channel-chat-messages b-channel-chat-author .image b-avatar,
b-channel-chat-messages b-channel-chat-author .image b-avatar img {
	width: calc(33px)!important;
	height: calc(33px)!important;
	border-radius: 3px!important;
}

b-channel-chat-messages b-channel-chat-author .image {
	top: 4px!important;
}

b-channel-chat-messages b-channel-chat-message .body {
	display: inherit!important;
}

/**
 * Move chat messages onto their own line
 * Remove some margin from the top so each message doesn't take up a huge amount of space
 */
b-channel-chat-messages b-channel-chat-message .textComponent:nth-child(2):before {
	content: " ";
	display: block;
	visibility: hidden;
}

/**
 * Add a background to the "streaming now" browse bar on the homepage
 * Lighten up the font color for increased visibility
 */
.browse-list-container > h1 {
	background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.08), rgba(255,255,255,0));
	color: #DADADA;
}