Skip to content

Twitch.tv Compact Left Panel by pabli

Screenshot of Twitch.tv Compact Left Panel

Details

Authorpabli

LicenseMIT

Categorytwitch.tv

Created

Updated

Size7.5 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Customizable compact left panel for Twitch.tv

Notes

☕ Support me on ko-fi

Features:

  • Change width
  • Show left panel on hover over the edge (useful in Theatre Mode)
  • Hide channel without unfollowing
  • Square avatars
  • Hide headers, red dot
  • Display lines with alternating background colors
  • Change colors of background and text
  • Features for Twitch previews extension:
    • Put YT/FB channels under the Followed channels
    • Set the text color for favorite/youtube/facebook channels (useful when headers are hidden)

You can change all of that stuff in ⚙️ Configure

Chrome/Edge 105+, Opera 91+ or your browser has to support :has() selector.

How to enable :has() in Firefox:

  • go to about:config
  • search for layout.css.has-selector.enabled
  • set it to True and restart the browser

Source code

/* ==UserStyle==
@name         Twitch Compact Left Panel
@namespace    https://github.com/pabli24
@version      1.5.1
@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          text     hch    "Hide channel"                                      "'ChannelName1, ChannelName2'"
@var          checkbox square "Square avatars □"                                  1
@var          checkbox colap  "Hide Collapse button ⟻"                           1
@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+ or your browser has to support :has() selector. https://caniuse.com/css-has
// How to enable :has() in Firefox:
// - go to about:config
// - search for layout.css.has-selector.enabled
// - set it to True and restart the browser

@-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
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
	}
}

}

Reviews

No reviews yet.