Twitch.tv Compact Left Panel by pabli

/* ==UserStyle==
@name         Twitch Compact Left Panel
@namespace    https://github.com/pabli24
@version      1.5.2
@description  Smaller left panel on twitch.tv
@author       Pabli
@license      MIT
@preprocessor stylus
@var          number   wdth   "Width (rem)"                                       ['rem', 16, 0, null, 0.1]
@var          number   wdthcl "Width when collapsed (rem)"                        ['rem', 4, 0, null, 0.1]
@var          select   hide   "Show left panel on hover"                          ["Disabled", "Enabled", "thm:In Theatre Mode*"]
@var          number   hideo  "➥ Opacity on hover"                               [0.9, 0, 1, 0.1]
@var          checkbox hchif  "Hide channels"                                     1
@var          text     hch    ""                                                  "'ChannelName1, ChannelName2'"
@var          checkbox square "Square avatars □"                                  1
@var          checkbox colap  "Hide Collapse button ⟻"                           0
@var          checkbox heade  "Hide Headers"                                      1
@var          checkbox dot    "Hide Red dot 🔴"                                   1
@var          checkbox hoff   "Hide Offline channels"                             0
@var          checkbox bgs    "Alternating Background (can impact performance)"   0
@var          color    bgsc   ""                                                  rgba(128, 128, 128, .06)
@var          checkbox bg     "Background color"                                  0
@var          color    bgc    ""                                                  #000
@var          checkbox bgh    "Background color on hover"                         0
@var          color    bghc   ""                                                  #222
@var          checkbox namet  "Channel name text color"                           0
@var          color    namec  ""                                                  #fff
@var          checkbox live   "Viewer count text color"                           1
@var          color    livec  ""                                                  #ff8282
@var          checkbox gamet  "Game name text color"                              0
@var          color    gamec  ""                                                  #aaa
@var          number   a0     "■ --- Previews (For TTV & YT) EXTENSION --- ■"     [0,0,0]
@var          checkbox fav    "Channel name text color in 'Favorite Channels'"    1
@var          color    favc   ""                                                  #bbd011
@var          checkbox yt     "Channel name text color in 'YouTube Channels'"     1
@var          color    ytc    ""                                                  #ff4e45
@var          checkbox fbg    "Channel name text color in 'FB Gaming Channels'"   1
@var          color    fbgc   ""                                                  #06f
@var          checkbox under  "Put YT/FB channels under the Followed channels"    0
@var          checkbox tsh    "TWITCH STATS BY STREAM CHARTS EXTENSION - Hide 'Top clips of followed channels'" 0
==/UserStyle== */

// Chrome/Edge 105+, Opera 91+, Firefox 121+ or your browser has to support :has() selector. https://caniuse.com/css-has

@-moz-document domain("twitch.tv") {
im = !important

if heade {
	#tp_favorites_section, #tp_YTsidebar_section, #tp_FBsidebar_section {
		> div > [style*="color: grey"] {
			display: none im
		}
	}
	.followed-side-nav-header, .side-nav__title, .side-nav-header {
		display: none im
	}
}
else {
	.collapse-toggle {
		top: 2rem im
	}
}
.collapse-toggle {
	right: -1.3rem im
	if colap {display: none im}
}

.side-nav {
	width: wdth
}
.side-nav--collapsed:not(.side-nav--hover-exp) {
	width: wdthcl
}

// dots ...
[data-a-target="side-nav-card-metadata"] > div > p {
	text-overflow: clip im
	overflow: unset im
}

if live {
	.side-nav-card__live-status > div > div > span {
		color: livec im
	}
}
if dot {
	.tw-channel-status-indicator {
		display: none im
	}
}

.side-nav-header {
	margin: 0 0.2rem im
	padding-top: 0 im
}
.followed-side-nav-header, .followed-side-nav-header--expanded, [data-a-target="side-nav-header-expanded"] {
	margin: 0 im
}
// For you
#side-nav > div > div > div.side-nav__title {
	display: none 
}

[data-a-target="side-nav-card-metadata"] {
	margin-left: 0.2rem im
}
.side-nav-card__link {
	height: 3.4rem
	padding: 0 0.2rem im
}
.side-nav-card__live-status {
	min-width: 0 im
	margin-left: 0 im
}
.kaXoQh {
	margin-left: 0.2rem im
}

.side-nav-card__link > * {
	height: 100%
	margin: 0 im
}
[data-a-target="side-nav-game-title"] > p {
	position: absolute
}

// show less show more
.side-nav-show-more-toggle__button {
	padding: 0 im
}

#side-nav\.find-friends {
	height: 2.2rem im
}

if hide != Disabled {
	thmode = hide == thm ? ":has(.channel-root__scroll-area--theatre-mode)" : ""
	body{thmode} {
		> .previews_app_previewDiv {
			z-index: 9999 im
		}
		div:has(>.side-nav), div[style="z-index: 10;"] {
			z-index: 99999 im
		}
		.side-nav, .side-nav--collapsed:not(.side-nav--hover-exp) {
			position: fixed im
			top: 0 im
			width: 1rem
			opacity: 0
			transition: width 0.3s, opacity 0.5s
			&:hover {
				width: wdth
				opacity: hideo
			}
		}
		.side-nav--collapsed:not(.side-nav--hover-exp):hover {
			width: wdthcl
		}
	}
}

// hide channel without unfollowing
if hchif {
	t = ''
	if hch != 'ChannelName1, ChannelName2' {
		hch = split(',', replace('^\s+|\s+(?=,)|(?<=,)\s+|\s+$', '', hch))
		for n in hch {
			t += '[title="'+ n +'" i],'
		}
		.side-nav-section > div > .tw-transition:has(:is({t})) {
			display none im
		}
	}
}

if hoff {
	#side-nav > div > div > div > div > div:has(.side-nav-card__avatar--offline) {
		display none im
	}
}

if square {
	.tw-image-avatar, .tw-avatar, .tw-halo, .tw-halo:before {
		border-radius: 0 im
	}
}

if namet {
	.side-nav-card__title > p {
		color: namec im
	}
}
if gamet {
	.side-nav-card__metadata > p {
		color: gamec im
	}
}
if bg {
	.tw-root--theme-dark .side-nav__overlay-wrapper, .side-nav__overlay-wrapper, .side-bar-contents {
		background: bgc im
	}
}
if bgs {
	//.side-nav-card[style="display: none;"] --> Previews (For TTV & YT) Sidebar Favorite Channels - Hide favorite channels from followed list
	#side-nav .tw-transition-group > div:nth-child(odd of :not(:has(:is({t} .side-nav-card[style="display: none;"])))) {
		background: bgsc im
	}
}

if bgh {
	.tw-root--theme-dark .side-nav-card__link:hover, .side-nav-card__link:hover {
		background: bghc im
	}
}
// Previews (For TTV & YT) extension
body > .previews_app_previewDiv:not([style*="margin-left: 6rem"]) {
	margin-left: wdth + 1 im
}
.tp-tooltip-sidebar {
	height: auto
}
if fav {
	#tp_favorites_section [data-a-target="side-nav-title"] {
		color: favc im
	}
}
if yt {
	#tp_YTsidebar_section [data-a-target="side-nav-title"] {
		color: ytc im
	}
}
if fbg {
	#tp_FBsidebar_section [data-a-target="side-nav-title"] {
		color: fbgc im
	}
}
if under {
	#side-nav > div > div {
		display: flex
		flex-direction: column
	}
	#tp_favorites_section {
		order: -5 im
	}
	#side-nav > div > div > div:not([aria-label]) + div[aria-label]:not([id]) {
		order: -4 im
	}
	#side-nav > div > div > div:has(.followed-side-nav-header):not([id]) {
		order: -4 im
	}
	#tp_YTsidebar_section {
		order: -3 im
	}
	#tp_FBsidebar_section {
		order: -2 im
	}

}
// Twitch Stats by Streams Charts Extension
// Top clips of followed channels
if tsh {
	.sc-t_sidebar-info {
		display: none
	}
}

}