Skip to content

Twitch top bar Tweaks by spider1996

Details

Authorspider1996

LicenseCC0-1.0

Categorytwitch.tv

Created

Updated

Size2.0 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Tweaks some Things from the top bar on Twitch.

Notes

  • Remove three Dots
  • Custom Background Color
  • Custom Searchbar Background Color

Source code

/* ==UserStyle==
@name           Twitch top Menubar Tweaks
@namespace      https://userstyles.world/user/spider1996
@author         Spider1996
@description    `Tweaks some Things from the top Menubar on Twitch.`
@version        1.1.0
@license        CC0-1.0
@preprocessor   stylus
@var number MenuHeight "Menu Height" [0, -300, 300, 1, "px"]
@var checkbox RemoveDots "Remove three Dots in the top bar" 0
@var text TopBarColor "Custom top bar Color (HEX)"  "#0D0D0D"
@var text SearchbarColor "Custom top bar search Color (HEX)"  "#0D0D0D"
==/UserStyle== */
@-moz-document domain("twitch.tv") {

/* Top Menubar height */
        #root > div > div.Layout-sc-1xcs6mc-0.lcpZLv > nav {
            Height: 50px + MenuHeight !important;
        }

        /* Fix Twitch Icon */
        #root > div > div.Layout-sc-1xcs6mc-0.lcpZLv > nav > div > div.Layout-sc-1xcs6mc-0.ebXXcv > a > div > figure > svg {
            height: 40px + MenuHeight !important;
        }

        /* Fix User Icon */
        #root > div > div.Layout-sc-1xcs6mc-0.lcpZLv > nav > div > div.Layout-sc-1xcs6mc-0.jdpzyl > div.Layout-sc-1xcs6mc-0.fNSfLT > div > div > div > div > button > div > div {
            height: 30px + MenuHeight !important;
            width: 30px + MenuHeight !important;
        }

    /* Hide More Dots in Top bar */
    if RemoveDots {
        #root > div > div.Layout-sc-1xcs6mc-0.lcpZLv > nav > div > div.Layout-sc-1xcs6mc-0.ebXXcv > div.Layout-sc-1xcs6mc-0.hKEeil {
            visibility: hidden;
        }
    }

    #root > div > div.Layout-sc-1xcs6mc-0.lcpZLv > nav > div {
        background-color: TopBarColor !important;
        outline-style: solid;
        outline-width: 1px !important;
        outline-color: #262626;
        margin-right: 0px !important;
    }
    #root > div > div.Layout-sc-1xcs6mc-0.lcpZLv > nav > div > div.Layout-sc-1xcs6mc-0.kuGBVB > div > div > div > div > div.Layout-sc-1xcs6mc-0.jNIlkd > div > div > div > div > * {
        background-color: SearchbarColor !important;
    }
}

Reviews

No reviews yet.