Twitch.tv Compact Left Panel by pabli

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