Twitch.tv Compact Left Panel by pabli

/* ==UserStyle==
@name         Twitch Compact Left Panel
@namespace    https://github.com/pabli24
@version      1.3.6
@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          checkbox hide   "Show left panel on hover (useful in Theatre Mode)" 0
@var          number   hideo  "➥ Opacity on hover"                               [0.9, 0, 1, 0.1]
@var          checkbox square "Square avatars □"                                  1
@var          checkbox colap  "Collapse button ⟻"                                1
@var          checkbox heade  "Headers"                                           0
@var          checkbox dot    "Red dot 🔴"                                        0
@var          checkbox bgs    "Display lines with alternating background colors"  1
@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     "■ --- TWITCH PREVIEWS 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== */

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

if heade == 0 {
	#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 == 0 {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 == 0 {
	.tw-channel-status-indicator {
		display: none im
	}
}

.side-nav-header {
	margin: 0 0.2rem im
	padding-top: 0 im
}
[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 !important;
}

.side-nav-card__link > * {
	height: 100%
}
[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 {
	body > .previews_app_previewDiv {
		z-index: 9999 im
	}
	#side-nav, div[style="z-index: 10;"] {
		z-index: 99999 im
	}
	.side-nav, .side-nav--collapsed:not(.side-nav--hover-exp) {
		position: fixed
		top: 0
		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
	}
}

if square {
	.tw-image-avatar, .channel-info-content .tw-halo, .channel-info-content .tw-halo:before, .tw-avatar {
		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 > div > div > div > div > div:nth-child(odd):not(.side-nav-header) {
		background: rgba(255,255,255,.05) im
	}
}
if bgh {
	.tw-root--theme-dark .side-nav-card__link:hover, .side-nav-card__link:hover {
		background: bghc im
	}
}
// Twitch Previews 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
	}
	#side-nav > div > div > div {
		order: 5
	}
	#tp_favorites_section {
		order: 1 im
	}
	#tp_YTsidebar_section {
		order: 3 im
	}
	#tp_FBsidebar_section {
		order: 4 im
	}
	#side-nav > div > div > div:not([aria-label]) + div[aria-label]:not([id]) {
		order: 2 im
	}
	#side-nav > div > div > div:has([data-test-selector="followed-channel"]):not([id]) {
		order: 2 im
	}
}
// Twitch Stats by Streams Charts Extension
// Top clips of followed channels
if tsh {
	.sc-t_sidebar-info {
		display: none;
	}
}

}