Kick improvements by pabli

/* ==UserStyle==
@name         Kick improvements
@namespace    https://github.com/pabli24
@version      1.0.9
@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          "Square avatars" [0, -1, 50, 1, "%"]

@var checkbox _hideTopSection         "MAIN PAGE - Hide top section with autoplaying channel previews" 0

@var number   _navbarHeight           "NAVBAR - height" [-1, -1, null, 1, "px"]

@var number   _h0                     "▼ PLAYER ▼" [0,0,0]
@var checkbox _volumeSlider           "- Volume slider always visible" 0
@var checkbox _theatreModeSidebar     "- Show sidebar on hover in theatre mode" 0

@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" [-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" [-1, -1, null, 1, "px"]
@var number   _chatWidthTheatreMode   "- Width in theatre mode" [-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 {
			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: 10px
			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 _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/'+ n +'" i]')
			}
			t = join(",", t)
			s('body>div>div a:is('+ t +'),.group\/card:has(a:is('+ t +')){display: none}')
		}
	}
	
	if _hideGamblingCategory {
		gamba = filter('slots, casino-simulator, casino-boss-simulator, poker, poker-club, sports-betting, crypto-and-trading, table-games, the-four-kings-casino-and-slots, hd-poker-texas-holdem-casino, blooming-business-casino, dice')
		t = ()
		for n in gamba {
			push(t,'[href="/category/'+ n +'" i]')
		}
		t = join(",", t)
		s('body>div>div a:is('+ t +'),.group\/card:has(a:is('+ t +')){display: none}')
		
		a[data-test="directory-card-gambling"] {
			display: none
		}
	}
	
	if _favorite {
		t = ()
		if _favChannels != 'ChannelName1, ChannelName2' {
			_favChannels = filter(_favChannels)
			for n in _favChannels {
				push(t,'[href="/'+ n +'" i]')
			}
			t = join("\,", t)
			if _favTop {
				#sidebar-wrapper > div > div > section > div:first-child {
					order: -2 i
				}
				#sidebar-wrapper > div > div > section > a:is({t}) {
					order: -1 i
				}
			}
			#sidebar-wrapper > div > div > section > a:is({t}) > div > div > span:first-child {
				color: _favColor i
			}
			if _favIcon != "" {
				#sidebar-wrapper > div > div > section > a:is({t}) > div > div > span:first-child::before {
					content: _favIcon
				}
			}
		}
	}
	
}