Twitch.tv Compact Left Panel by pabli

Twitch.tv Compact Left Panel screenshot
Install Get Stylus Write a review

Details

Authorpabli

LicenseMIT

Created

Updated

Categorytwitch.tv

Statistics

Learn how we calculate statistics in the FAQ.

Total views

Total installs

Weekly installs

Weekly updates

Description

Compact left panel for Twitch.tv

Features:

  • Change width
  • Show left panel on hover over the edge (useful in Theatre Mode)
  • 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

☕ Support me on ko-fi

Notes

Userstyle doesn't have notes.

Source code

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

}

Reviews

No reviews yet.