Tweaks for the left sidebar on Twitch
Twitch left sidebar Tweaks by spider1996
Details
Authorspider1996
LicenseCC0-1.0
Categorytwitch.tv
Created
Updated
Size4.3 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
- Hide "For You"
- Custom Margin for Stream Links
- Custom Sidebar width
- Custom Height for Stream Links
- Custom Background Color
- Hide "collapse" button
- Hide scrollbar and disable scrolling
FFZ Deck Sidebar only:
- Smaller Sidebar padding for Stream Links
- Custom Height for Stream Links
- Custom Sidebar Design
Source code
/* ==UserStyle==
@name Twitch left sidebar Tweaks
@namespace https://userstyles.world/user/spider1996
@author Spider1996
@description `Tweaks some Things from the left sidebar on Twitch.`
@version 1.1.1
@license CC0-1.0
@preprocessor stylus
@var checkbox HideForYou "Hide For You" 0
@var checkbox HideMinimizeButton "Hide Minimize Button" 0
@var number CustomMarginLeft "Custom Margin" [0, -20, 15, 1, "px"]
@var checkbox EnableCustomWidth "Enable Custom Width" 0
@var number CustomWidth "Custom Width" [240, 0, 300, 1, "px"]
@var number CustomHeight "Custom Height" [5, 0, 300, 1, "px"]
@var text BackgroundColor "Custom Background Color (HEX)" "#1A1A1A"
@var checkbox HideSidebarScrollbar "Hide scrollbar and disable scrolling" 0
@var checkbox BorderShown "Separate Channels with line" 0
@var checkbox HideGroupStream "Hide Profile Pictures of Group Streams" 0
==/UserStyle== */
@-moz-document domain("twitch.tv") {
if (HideForYou) {
/* Hide for you in the left sidebar */
#side-nav > div > div.Layout-sc-1xcs6mc-0.capulb > div.Layout-sc-1xcs6mc-0.eCDqNH.side-nav__title {
visibility: hidden;
height: 0;
padding: 0 !important;
margin: 0 !important;
}
/* Hide sort button */
#side-nav > div > div.Layout-sc-1xcs6mc-0.capulb > div:nth-child(3) > div.Layout-sc-1xcs6mc-0.cXbKiY.followed-side-nav-header.followed-side-nav-header--expanded > button > div > div.Layout-sc-1xcs6mc-0.kIApQR {
visibility: hidden;
margin: 0 !important;
}
}
if(HideMinimizeButton) {
#root > div > div.Layout-sc-1xcs6mc-0.lcpZLv > div > div:nth-child(1) > div > div > div > div > div.simplebar-scroll-content > div > div > div.Layout-sc-1xcs6mc-0.eeRiXn.collapse-toggle {
visibility: hidden;
}
}
/* Custom sidebar margin */
#side-nav > div > div.Layout-sc-1xcs6mc-0.capulb > * > div.InjectLayout-sc-1i43xsx-0.hWukFy.tw-transition-group > * > div > div > a {
margin-left: CustomMarginLeft;
padding-top: CustomHeight !important;
padding-bottom: CustomHeight !important;
if(BorderShown) {
border: 1px;
border-color: #282828 #000000 #000000;
border-style: solid;
}
}
#side-nav > div > div.Layout-sc-1xcs6mc-0.capulb > div:nth-child(3) > div.Layout-sc-1xcs6mc-0.cXbKiY.followed-side-nav-header.followed-side-nav-header--expanded > button > div > div.Layout-sc-1xcs6mc-0.jHPCGQ,
#side-nav > div > div.Layout-sc-1xcs6mc-0.capulb > div:nth-child(4) > div.Layout-sc-1xcs6mc-0.jcRhzk.side-nav-header {
margin-left: (CustomMarginLeft + 20) !important;
margin-top: CustomHeight !important;
margin-bottom: CustomHeight !important;
}
if(EnableCustomWidth) {
@media (min-width: 1200px) {
/* Custom Width */
#root > div > div.Layout-sc-1xcs6mc-0.lcpZLv > div > div:nth-child(1) > div {
width: CustomWidth;
}
}
}
/* Custom background color */
#root > div > div.Layout-sc-1xcs6mc-0.lcpZLv > div > div:nth-child(1) > div {
--color-background-alt: BackgroundColor;
}
/* Hide scrollbar */
if(HideSidebarScrollbar) {
#root > div > div.Layout-sc-1xcs6mc-0.lcpZLv > div > div:nth-child(1) > div > div > div > div > div.simplebar-scroll-content {
overflow: hidden;
}
#root > div > div.Layout-sc-1xcs6mc-0.lcpZLv > div > div:nth-child(1) > div > div > div > div > div.simplebar-track.vertical {
overflow: hidden;
width: 0px;
}
}
/* Hide Group Stream Profile Pictures */
if(HideGroupStream) {
#side-nav > div > div.Layout-sc-1xcs6mc-0.capulb > div:nth-child(3) > div.InjectLayout-sc-1i43xsx-0.hWukFy.tw-transition-group > * > div > div > a > div.ScTokenOverrideCSSVars-sc-13alv3m-0.gXjhoK {
visibility: hidden;
width: 0px;
}
}
}