Skip to content

Kick improvements by pabli

Screenshot of Kick improvements

Details

Authorpabli

LicenseMIT

Categorykick

Created

Updated

Size8.2 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Kick.com improvements

Notes

Source code

/* ==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
				}
			}
		}
	}
	
}

Reviews

No reviews yet.