Customizable compact left panel for Twitch.tv
Twitch.tv Compact Left Panel by pabli
![Screenshot of Twitch.tv Compact Left Panel](https://userstyles.world/preview/3045/1.jpeg)
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+, Firefox 121+ or your browser has to support :has() selector.
Source code
/* ==UserStyle==
@name Twitch Compact Left Panel
@namespace https://github.com/pabli24
@version 1.5.2
@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 checkbox hchif "Hide channels" 1
@var text hch "" "'ChannelName1, ChannelName2'"
@var checkbox square "Square avatars □" 1
@var checkbox colap "Hide Collapse button ⟻" 0
@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+, Firefox 121+ or your browser has to support :has() selector. https://caniuse.com/css-has
@-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
if hchif {
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
}
}
}