Twitch.tv Compact Left Panel by pabli

/* ==UserStyle==
@name           Twitch Compact Left Panel
@namespace      https://github.com/pabli24
@version        1.3.0
@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 over edge (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
==/UserStyle== */

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

if heade == 0 {
	#tp_favorites_section, #tp_YTsidebar_section, #tp_FBsidebar_section {
		> div > [style*="color: grey"], /.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
	//border-top: 1px solid #656565
}
.side-nav-card__live-status {
	min-width: 0 im
	margin-left: 0 im
}
// show less show more
.side-nav-show-more-toggle__button {
	padding: 0 im
}

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

if hide {
	.twitch_previews_previewDiv {
		z-index: 9999 im
	}
	#sideNav {
		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-bar-contents > div > div > div > div > div:nth-child(odd):not(.side-nav-header) {
		background: rgba(255,255,255,.05) !important; im
	}
}
if bgh {
	.tw-root--theme-dark .side-nav-card__link:hover, .side-nav-card__link:hover {
		background: bghc im
	}
}
// Twitch Previews extension
.twitch_previews_previewDiv:not([style*="margin-left: 6rem"]) {
	margin-left: wdth + 1 im
}
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-bar-contents > div > div {
		display: flex
		flex-direction: column
	}
	.side-bar-contents > div > div > div {
		order: 5
	}
	#tp_favorites_section {
		order: 1 im
	}
	#tp_YTsidebar_section {
		order: 3 im
	}
	#tp_FBsidebar_section {
		order: 4 im
	}
	.side-bar-contents > div > div > div[id] + div:not([id]) {
		order: 2 im
	}
}

}