YouTube_Discord-like_Live_chat.user.css

/* ==UserStyle==
@name           YouTube Discord-like Live chat
@namespace      github.com/openstyles/stylus
@version        1.0.3
@description    Dark-theme based on Discord, works only for pop-up chat :^)
@author         moh@yutsuku.net
@var checkbox fontEnable "Font enabled" 1
@var text     fontSize   "Font size"    2.1em
==/UserStyle== */

@-moz-document regexp("https?://[^/]+?youtube\\.com/live_chat.*is_popout=1.*") {
	:root {
  		--main-bg-color: hsla(220, 8%, 23%, 1);
		--main-bg-border-color: hsla(220, 8%, 19%, 1);
		--main-color: hsla(220, 3%, 87%, 1);
		
		--input-bg-color: hsla(210, 8%, 26%, 1);
		--input-bg-border-color: hsla(220, 8%, 19%, 1);
		--input-bg-border-color-highlight: hsl(220, 8%, 33%);
		
		--input-bg-color-focus: hsla(210, 8%, 29%, 1);
		--input-bg-border-color-focus: hsla(220, 8%, 14%, 1);
		--input-bg-border-color-highlight-focus: hsla(220, 8%, 38%, 1);
		

		--name-moderator-color: #5f84f1;
		
		--button-bg-color: #3ba55d;
		--button-color: hsla(220, 3%, 87%, 1);
		
		--yt-emoji-picker-category-background-color: hsla(220, 8%, 23%, 1);
		
	}
	
	ytd-sponsorships-live-chat-header-renderer *
	{
		--yt-live-chat-sponsor-color: inherit !important;
	}

	
	* {
		background: var(--main-bg-color);
		color: var(--main-color) !important;
		font-size: var(--fontSize) !important;
		box-sizing: border-box !important;
	}

	yt-interaction,
	.underline.tp-yt-paper-input-container,
	#underline
    {
        display: none !important;
	}
	
	yt-live-chat-text-input-field-renderer *,
	yt-emoji-picker-category-renderer,
	iron-input *
	{
		background: var(--input-bg-color) !important;
	}
	yt-live-chat-text-input-field-renderer *:focus,
	iron-input *:focus
	{
		background: var(--input-bg-color-focus) !important;
	}
	::placeholder
	{
		color: var(--main-color) !important;
	} 
	
	yt-live-chat-message-input-renderer,
	#search-panel.yt-emoji-picker-renderer
	{
		background: inherit;
		border-top: 1px solid var(--main-bg-border-color);
	}
	
	#author-name.moderator.yt-live-chat-author-chip
	{
		color: var(--name-moderator-color) !important;
		font-size: var(--chat-font-size) !important;
	}
	
	#send-button *,
	yt-icon-button#show-more, yt-icon-button#show-more *,
	yt-button-renderer *
	{
		background:  var(--button-bg-color) !important;
		color: var(--button-color) !important;
	}
	
	yt-live-chat-message-renderer.yt-live-chat-message-input-renderer
	{
		opacity: 1;
	}
	
	/** fix superchats **/
	yt-live-chat-paid-sticker-renderer *
	{
		background: var(--yt-live-chat-paid-sticker-chip-background-color) !important;
		color: var(--yt-live-chat-paid-sticker-chip-text-color) !important;
	}
	
	yt-live-chat-paid-message-renderer *
	{
		background: var(--yt-live-chat-paid-message-background-color) !important;
		color: var(--yt-live-chat-paid-message-color) !important;
	}
	
	yt-live-chat-membership-item-renderer *
	{
		background: var(--yt-button-payment-background-color) !important;
		color: var(--yt-live-chat-sponsor-text-color) !important;
	}
	
	/** fix membership gifts **/
	ytd-sponsorships-live-chat-header-renderer *
	{
		background: var(--yt-live-chat-sponsor-color) !important;
	}
	
	/** fix author highlight **/
	yt-live-chat-author-chip[is-highlighted] #author-name.owner.yt-live-chat-author-chip,
	#author-name.owner.yt-live-chat-author-chip
	{
    	background-color: var(--yt-live-chat-author-chip-owner-background-color) !important;
    	color: var(--yt-live-chat-author-chip-owner-text-color) !important;
	}
	
	/** highlight moderator **/
	yt-live-chat-author-chip #author-name.moderator.yt-live-chat-author-chip
	{
    	background-color: var(--yt-live-chat-moderator-color) !important;
    	color: var(--button-color) !important;
	}
	
	/** input boxes **/
	input.tp-yt-paper-input,
	yt-live-chat-text-input-field-renderer #input.yt-live-chat-text-input-field-renderer
	{
		border: 1px solid var(--input-bg-border-color) !important;
		border-bottom: none !important;
		box-shadow: inset 0px -2px 0px 0px var(--input-bg-border-color-highlight) !important;
	}
	input.tp-yt-paper-input:focus,
	yt-live-chat-text-input-field-renderer #input.yt-live-chat-text-input-field-renderer:focus
	{
		border-color: var(--input-bg-border-color-focus) !important;
		box-shadow: inset 0px -2px 0px 0px var(--input-bg-border-color-highlight-focus) !important;
	
	}
	
	/** buttons **/
	yt-icon-button
	{
		background: var(--button-bg-color) !important;
	}
	yt-icon-button * 
	{
		background: inherit !important;
		color: var(--button-color) !important;
	}
	
	/** ytc addon support **/
	#ytc-filter,
	#ytc-filter .vc-toolbar
	{
		background: var(--main-bg-color) !important;
		color: var(--main-color) !important;
		font-size: var(--fontSize) !important;
	}
	
	#ytc-filter button
	{
		background: var(--button-bg-color) !important;
		border: none !important;
	}
}