Twitch.tv Compact Left Panel by pabli

Details
Authorpabli
LicenseMIT
Created atFebruary 1, 2022 20:34
Updated atMay 12, 2022 23:01
Applies totwitch.tv
Statistics
Learn how we calculate statistics in the FAQ.
Total views122
Total installs1118
Weekly installs60
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.History
Daily snapshots of style statistics.
Source code
/* ==UserStyle==
@name Twitch Compact Left Panel
@namespace https://github.com/pabli24
@version 1.3.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 checkbox hide "Show left panel on hover over edge (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
==/UserStyle== */
@-moz-document domain("twitch.tv") {
im = !important
if heade == 0 {
#tp_favorites_section, #tp_YTsidebar_section, #tp_FBsidebar_section {
> div > [style*="color: grey"], /.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
//border-top: 1px solid #656565
}
.side-nav-card__live-status {
min-width: 0 im
margin-left: 0 im
}
// show less show more
.side-nav-show-more-toggle__button {
padding: 0 im
}
#side-nav\.find-friends {
height: 2.2rem im
}
if hide {
.twitch_previews_previewDiv {
z-index: 9999 im
}
#sideNav {
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-bar-contents > div > div > div > div > div:nth-child(odd):not(.side-nav-header) {
background: rgba(255,255,255,.05) !important; im
}
}
if bgh {
.tw-root--theme-dark .side-nav-card__link:hover, .side-nav-card__link:hover {
background: bghc im
}
}
// Twitch Previews extension
.twitch_previews_previewDiv:not([style*="margin-left: 6rem"]) {
margin-left: wdth + 1 im
}
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-bar-contents > div > div {
display: flex
flex-direction: column
}
.side-bar-contents > div > div > div {
order: 5
}
#tp_favorites_section {
order: 1 im
}
#tp_YTsidebar_section {
order: 3 im
}
#tp_FBsidebar_section {
order: 4 im
}
.side-bar-contents > div > div > div[id] + div:not([id]) {
order: 2 im
}
}
}