Customizable compact left panel for Twitch.tv
Twitch.tv Compact Left Panel by pabli

Details
Authorpabli
LicenseMIT
Categorytwitch.tv
Created
Updated
Size7.8 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
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.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 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" 1
@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 !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 != 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
}
}
}