Kick improvements by pabli

/* ==UserStyle==
@name         Kick improvements
@namespace    https://github.com/pabli24
@version      1.1.0
@description  Kick.com improvements
@author       Pabli (https://ko-fi.com/pabli)
@homepageURL  https://userstyles.world/style/18122/kick-improvements
@supportURL   https://userstyles.world/style/18122/kick-improvements
@license      MIT
@preprocessor stylus

@var checkbox _hideChannel            "❌ Hide channels:" 0
@var text     _channel                "" "'eddie, trainwreckstv'"
@var checkbox _hideCategory           "❌ Hide categories:" 0
@var text     _category               "" "'asmr, body-art'"
@var checkbox _hideGamblingCategory   "❌ Hide all gambling categories" 0

@var checkbox _changeBg               "Change background color" 0
@var color    _bg                     "" #000

@var number   _squareAvatars          "Avatars border radius (0-50%)" [-1, -1, 50, 1, "%"]

@var checkbox _hideTopSection         "Hide top section with autoplaying channel previews from the main page" 0

@var number   _navbarHeight           "Navbar height (px)" [-1, -1, null, 1, "px"]

@var number   _h0                     "▼ PLAYER ▼" [0,0,0]
@var checkbox _volumeSlider           "- Volume slider always visible" 1
@var checkbox _theatreModeSidebar     "- Show sidebar on hover in theatre mode" 1
@var checkbox _theatreModeNav         "- Show navbar on hover in theatre mode" 1
@var select   _theatreModeStreamInfo  "- Show stream info (title, game, views, etc.) on hover in theatre mode" ["0:OFF", "1:ON*", "2:ON - Minimal"]

@var number   _h1                     "▼ SIDEBAR ▼" [0,0,0]
@var checkbox _homeToNavbar           "- Move 'Home Browse Following' to navbar" 0
@var checkbox _sidebarHideOffline     "- Hide offline channels" 0
@var checkbox _sidebarHideRecommended "- Hide recommended channels" 0
@var checkbox _sidebarFullGameNames   "- Fully visible game names..." 0
@var checkbox _sidebarLiveDot         "- Hide green circles 🟢" 0
@var checkbox _sidebarViewerCount     "- Green viewer count" 0
@var checkbox _sidebarNoPadding       "- Smaller padding" 0
@var number   _sidebarWidth           "- Width (px)" [-1, -1, null, 1, "px"]

@var checkbox _favorite               "- ⭐ Favorite channels" 0
@var text     _favChannels            "" "'ChannelName1, ChannelName2'"
@var checkbox _favTop                 "- Favorite channels at the top of the following list" 1
@var color    _favColor               "- Favorite channels name text color" #ffd700
@var text     _favIcon                "- Favorite channels icon (e.g. ★ ♥ 🖈 📌 ❤️)" "'⭐'"

@var number   _h2                     "▼ CHAT ▼" [0,0,0]
@var checkbox _hideTopChat            "- Hide top panel" 0
@var checkbox _hideTopGifters         "- Hide Lifetime Top Gifters" 0
@var checkbox _chatNoPadding          "- Smaller padding" 0
@var number   _chatWidth              "- Width (px)" [-1, -1, null, 1, "px"]
@var number   _chatWidthTheatreMode   "- Width in theatre mode (px)" [-1, -1, null, 1, "px"]

@var number   _p1                     "☕ ko-fi.com/pabli - If you like this style and would like to support me, you can buy me a coffee. Thank You!" [0,0,0,1]

==/UserStyle== */

i = !important

@-moz-document domain("kick.com") {
	
	:root {
		if _navbarHeight != -1px {
			--navbar-height: _navbarHeight // 60px
		}
		if _sidebarWidth != -1px {
			--sidebar-expanded-width: _sidebarWidth // 256px
		}
		if _chatWidth != -1px {
			--chat-width: _chatWidth // 340px
		}
		if _chatWidthTheatreMode != -1px {
			[data-theatre="true"] {
				--chat-width: _chatWidthTheatreMode // 340px
			}
		}
	}
	
	if _homeToNavbar {
		nav {
			z-index: 401 i
		}
		#sidebar-wrapper {
			> ul {
				position: fixed
				z-index: 500 i
				top: 0
				left: var(--sidebar-expanded-width)
				margin: 0
				padding: 0
				width: auto
				height: var(--navbar-height)
				flex-direction: row
				align-items: center
			}
			&.w-\\[var\\(--sidebar-collapsed-width\\)\\] > ul {
				gap: 20px
			}
			div.w-full.px-3 { // hr
				display: none
			}
			> div > div > * {
				padding-top: 0
			}
		}
		if _theatreModeSidebar {
			[data-theatre="true"] #sidebar-wrapper > ul {
				display: none
			}
		}
	}
	
	if _homeScroll {
		#sidebar-wrapper {
			overflow-y: auto;
			scrollbar-width: none;
			.overflow-y-auto {
				overflow-y: unset;
			}
		}
	}
	
	if _changeBg {
		:root, html {
			background: _bg
		}
		:root {
			--background-color: _bg
		}
		.bg-surface-lower {
			background-color: _bg
		}
		.bg-grey-950, .bg-\\[\\#141517\\] {
			background-color: _bg
		}
		#sidebar-wrapper + button.bg-grey-950 {
			opacity: 0.5
		}
		.\\\!bg-surface-tint {
			background-color: rgba(255, 255, 255, .1) i
		}
	}
	
	if _squareAvatars != -1 {
		img.rounded-full, div:has(> img.rounded-full) > div, #channel-avatar, div:has(> #channel-avatar) {
			border-radius: _squareAvatars
		}
	}
	
	if _hideTopSection {
		#main-container > main > div > div > div.justify-between:first-child:has(.aspect-video) {
			display: none i
		}
	}
	
	if _volumeSlider {
		.group\\/volume .betterhover\\:group-hover\\/volume\\:flex {
			display: flex
		}
	}
	
	if _theatreModeSidebar {
		[data-theatre="true"] #sidebar-wrapper {
			display: block i
			position: fixed
			opacity: 0
			width: 15px
			transition: width 0.3s, opacity 0.5s
			&:hover {
				opacity: 0.9
				width: var(--sidebar-expanded-width)
			}
			&.w-\\[var\\(--sidebar-collapsed-width\\)\\]:hover {
				width: var(--sidebar-collapsed-width)
			}
		}
	}
	
	if _theatreModeNav {
		.group\\/main[data-theatre="true"] nav.group-data-\\[theatre\\=true\\]\\/main\\:\\\!hidden {
			display: flex i
			position: fixed
			width: 100%
			opacity: 0
			top: calc(-1 * var(--navbar-height) + 15px)
			transition: top 0.3s, opacity 0.5s
			&:hover {
				opacity: 1
				top: 0
			}
		}
	}
	
	if _theatreModeStreamInfo != 0 {
		[data-theatre="true"] #channel-content > div:first-child {
			width: calc(100vw - var(--chat-width))
			background: rgba(0, 0, 0, .4)
			background: linear-gradient(180deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%)
			padding: 1.25rem
			position: fixed
			top: 0
			left: 0
			z-index: 300
			opacity: 0
			transition: opacity 0.4s
			pointer-events: none
			> * {
				pointer-events: all
				width: fit-content
			}
			h1, .text-primary, .text-subtle, .text-neutral {
				text-shadow: 1px 1px 1px #000
			}
			.text-subtle, // viewers
			> div:first-child > div:last-child > div:last-child > :not(a:first-child) { // tags
				color: #fff
			}
		}
		[data-theatre="true"] main:hover #channel-content > div:first-child {
			opacity: 1
		}
		
		if _theatreModeStreamInfo == 2 {
			[data-theatre="true"] #channel-content > div:first-child {
				gap: 0
				justify-content: flex-start
				flex-direction: column
				background: transparent
				filter: drop-shadow(-1px -1px 10px #000) drop-shadow(0px 0px 10px #000) drop-shadow(1px 1px 10px #000)
				> div:first-child { // LEFT
					> div:first-child { // Avatar
						//display: none
					}
					> div:last-child > div:last-child > :not(a:first-child) { // tags
						display: none
					}
				}
				> div:last-child { // RIGHT
					> div:first-child { // follow sub buttons
						display: none
					}
					> div:last-child > :not(div:first-child) { // share report buttons
						display: none
					}
					> div { // viewcount to the left
						align-self: flex-start
						padding-left: 5rem
					}
				}
			@supports (anchor-name: none) { // Category and viewcount next to each other
				[data-theatre="true"] #channel-content > div:first-child > div:first-child > div:last-child > div:last-child { // category
					width: fit-content
					anchor-name: --category-viewers
				}
				[data-theatre="true"] #channel-content > div:first-child > div:last-child > div:last-child > div:first-child { // viewcount
					position: fixed
					position-anchor: --category-viewers
					position-area: right
					margin-left: 0.5rem
				}
			}
			}
		}
	}
	
	if _hideTopChat {
		#channel-chatroom > div.items-center:first-child {
			display: none
		}
	}
	
	if _hideTopGifters {
		#channel-chatroom > div > div[class="overflow-hidden"] {
			display: none
		}
	}
	
	if _chatNoPadding {
		#chatroom-messages > div > div
		#chatroom-messages > div > div > div {
			padding-left: 1px i
			padding-right: 1px i
		}
	}
	
	if _sidebarNoPadding {
		#sidebar-wrapper > ul,
		#sidebar-wrapper > div > div > * {
			padding: 2px i
		}
		#sidebar-wrapper section > * {
			padding: 2px
			gap: 2px
			height: auto
		}
	}
	
	if _sidebarFullGameNames {
		#sidebar-wrapper span.text-subtle.truncate.text-xs.font-bold.leading-normal {
			width: fit-content
		}
	}
	
	if _sidebarLiveDot {
		#sidebar-wrapper .rounded-full.bg-green-500 {
			display: none
		}
	}
	
	if _sidebarViewerCount {
		#sidebar-wrapper .rounded-full.bg-green-500 + span.text-sm {
			color: rgb(83, 252, 24)
		}
	}
	
	if _sidebarHideOffline {
		#sidebar-wrapper > div > div > section > a:has(> div > svg.fill-grey-700) {
			display: none
		}
	}
	
	if _sidebarHideRecommended {
		#sidebar-wrapper > div.no-scrollbar > div > {
			section:last-of-type,
			div:last-of-type {
				display: none
			}
		}
	}
	
	filter(a) {
		a = split(',', replace('^\s+|\s+(?=,)|(?<=,)\s+|\s+$', '', a))
		b = ()
		for n in a {
			if n != '' {
				push(b, n)
			}
		}
		return b
	}
	
	if _hideChannel {
		t = ()
		if _channel != '' {
			_channel = filter(_channel)
			for n in _channel {
				push(t,'[href="/'+ n +'" i]')
			}
			t = join(",", t)
			s('body>div>div a:is('+ t +'),.group\/card:has(a:is('+ t +')){display: none}')
		}
	}
	
	if _hideCategory {
		t = ()
		if _category != '' {
			_category = filter(_category)
			for n in _category {
				push(t,'[href="/category/'...