Hide distractions while on twitch :)
also funky background
Twitch distraction hider by j0lol
Details
Authorj0lol
LicenseCC Zero
Categorytwitch
Created
Updated
Code size39 kB
Code checksumf934bca
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
may not work i guess
say if it breaks for u
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name 6/1/2022, 9:41:26 PM
@namespace github.com/openstyles/stylus
@version 1.0.0
@description A new userstyle
@author Me
@var checkbox darkForced "Forced Dark Mode" 0
@var checkbox topNav "Hide Top Navigation" 0
@var checkbox description "Hide Description" 0
@var checkbox descriptionBG "Funky background behind description" 0
@var checkbox overlay "Hide Overlay" 0
@var checkbox chat "Hide Chat" 0
@var checkbox sideBar "Hide Sidebar" 0
@preprocessor stylus
==/UserStyle== */
@-moz-document domain("twitch.tv") {
/* Top Nav */
if topNav {
.InjectLayout-sc-588ddc-0.hYNOFf.top-nav {
display: none;
}
}
if sideBar {
/* Sidebar */
#sideNav {
display: none;
}
}
if description {
/* Distracting descriptions */
.InjectLayout-sc-588ddc-0.jauWhH.right-column__toggle-visibility.toggle-visibility__right-column,
.eLwvPK,
.jUcRho,
.ckXJcK,
.Layout-sc-nxg1ff-0.edHZcU,
.Layout-sc-nxg1ff-0.gcwIMz > *:nth-child(2),
.Layout-sc-nxg1ff-0.gcwIMz > *:nth-child(3) {
display: none !important;
}
}
if overlay {
/* annoying video overlay stuff */
.passthrough-events,
.top-bar {
display: none !important;
}
/* Small description container*/
.channel-info-content > *:nth-child(2) {
min-height: 0 !important;
}
}
if chat {
/* Remove chat */
#\36 c214c43fdfe19792cabab721e476e49 {
display: none;
}
/* Fix player running away */
.InjectLayout-sc-588ddc-0 .persistent-player {
left: 0 !important;
}
/* uhh */
.channel-root--hold-chat + .persistent-player,
.channel-root--watch-chat + .persistent-player,
.channel-root__info--with-chat .channel-info-content,
.channel-root__player--with-chat {
width: calc(100%);
}
}
if descriptionBG {
/* Hide background, make funny background */
.Layout-sc-nxg1ff-0.gtnaNI > * {
transform: scale(1) !important;
background: #2220
}
.channel-info-content,
.channel-root__info.channel-info-content,
.channel-root--watch .channel-root__info,
.channel-root {
background-color: #0000 !important;
}
.Layout-sc-nxg1ff-0.VqjQw.root-scrollable__wrapper {
background: #111 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAEpElEQVR4nO2dW3LiQBAEE8kmOPae2w7j/ZjFa0CAHi1N16jqABMZlf2pKB1Op9MfgnI8Hun7Puq5q5zPZz4+Pvj+/g55z6yFs4t6zIWWqLBeOEMOwIWWqLD+5lx8AC60RIX1lnPRAbjQEhXWIc7ZB+BCS1RYH3HOOgAXWqLC+oxz8gG40BIV1leckw7AhZaosI7hHH0ALrREhXUs56gDcKElKqxTOF8egAstUWGdyvn0AFxoiQrrHM6HB+BCS1RY53IOHoALLVFhXcJ5dwAutESFdSnn1QG40BIV1gjOnwNwoSUqrFGcHbjQS1RYIzk7F1qiwhrN2e29UNBhXYPzLeSlm3x9ffH5+Zm+UNi3/L7v4z4KvcTydeTDwk/CbmP5WvIh8AAsX08+BB2A5WvKh4ADOJ/Plh+cLTkXHYBKoaDDujXn7ANQKRR0WGtwzjoAlUJBh7UW5+QDUCkUdFhrck46AJVCQYe1NufoA6gNOiUqrBk4Rx1ABtCxUWHNwvnyALKAjokKaybOpweQCfRVVFizcT48gGygz6LCmpFz8AAygj6KCmtWzrsDyAo6FBXWzJxXB5AZ9DYqrNk5fw4gO+jvqLAqcHagAXqJCqsKZ6cCCjqlqnACdCqgKqWqcEL5kqtTAFUpVYUTinxPxQZGhRP+y4eAbwItX4cTruWDp2IXR4UT7uWDp2IXRYUThuWDp2JnR4UTHssHT8XOigonPJcPnoqdHBVOeC0fPBU7KSqcME4+eCp2dFQ4Ybx88FTsqKhwwjT54KnYl1HhhOnywVOxT6PCCfPkg6diH0aFE+bLB0/FDkaFE5bJB0/F3kWFE5bLB0/FXkWFE2Lkg6dif6LCCXHywVOxgA4nxMo/HA6eilXhhHj5x+MxfikUdEpV4YSV5Hdd/AGolKrCCevJh+CpWJVSVThhXfkQeAAqpapwwvryIegAVEpV4YRt5EPQVKxCqSqcsJ182MlUrAonbCsfdjAVq8IJ28uHxqdiVTihjnxoeCpWhRPqyYdGp2JVOKGufGhwKlaFE+rLh8amYlU4IYd8aGgqVoUT8siHRqZiVTghl3xoYCpWhRPyyQfxqVgVTsgpH4SnYlU4Ia98EJ2KVeGE3PJBcCpWhRPyywexqVgVTtCQD/Cm8t9fy1/l+106y4+NknyJqVjLX09++qlYy19XPiSeirX89eVD0qlYy99GPiScirX87eRDsqlYy99WPiSairX87eVDkqlYy68jHxJMxVp+PflQeSrW8uvKh4pTsZZfXz5Umoq1/BzyocJUrOXnkQ8bT8Vafi75sOFUrOXnkw8bTcVafk75sMFUrOXnlQ8rT8Vafm75sOJUrOXnl7/aVKzla8h/f3/f71IoWH7f97yFvPgvlq8hf5WpWMvXkw87WwoFyw+firV8Xfmwk6VQsPzwqVjL15cPjS+FguWHT8VafjvyodGlULD88KlYy29PPjS2FAr1C52SDKzNLIVCjkLHJgtrE0uhkKfQMcnEKr8UCrkKfZVsrNJLoZCv0GfJyCq7FAo5C32UrKySS6GQt9ChZGaVWwqF3IXeJjur1FIo5C/0dxRYO8vfr3yAv3rECG2I4F0DAAAAAElFTkSuQmCC') !important;
}
}
/* No-cookie dark mode */
if forceDark {
:root {
--color-background-button: var(--color-twitch-purple-7);
--color-background-button-hover: var(--color-twitch-purple-8);
--color-background-button-focus: var(--color-twitch-purple-8);
--color-background-button-active: var(--color-twitch-purple-7);
--color-background-button-purchase: var(--color-opac-b-5);
--color-background-button-status: var(--color-background-button-success);
--color-background-button-status-hover: var(--color-background-button-error-hover);
--color-background-button-status-focus: var(--color-background-button-error-hover);
--color-background-button-status-active: var(--color-background-button-error-active);
--color-background-button-success-focus: var(--color-green-darker);
--color-background-button-alert: var(--color-red);
--color-background-button-alert-hover: var(--color-red-darker);
--color-background-button-alert-focus: var(--color-red-darker);
--color-background-button-alert-active: var(--color-red);
--color-background-button-overlay: var(--color-transparent);
--color-background-button-overlay-hover: var(--color-opac-w-1);
--color-background-button-overlay-focus: var(--color-opac-w-1);
--color-background-button-overlay-active: transparent;
--color-background-interactable-alpha-hover: var(--color-opac-w-4);
--color-background-interactable-alpha-active: var(--color-opac-w-5);
--color-background-interactable-alpha-selected: var(--color-opac-w-3);
--color-text-button: var(--color-white);
--color-text-button-hover: var(--color-white);
--color-text-button-focus: var(--color-white);
--color-text-button-active: var(--color-white);
--color-text-button-secondary-hover: var(--color-hinted-grey-6);
--color-text-button-secondary-focus: var(--color-hinted-grey-6);
--color-text-button-secondary-active: var(--color-hinted-grey-6);
--color-text-button-text-hover: var(--color-opac-w-1);
--color-text-button-text-focus: var(--color-opac-w-1);
--color-text-button-text-active: var(--color-opac-p-2);
--color-text-button-status: var(--color-white);
--color-text-button-status-hover: var(--color-white);
--color-text-button-status-focus: var(--color-white);
--color-text-button-status-active: var(--color-white);
--color-text-button-success-hover: var(--color-black);
--color-text-button-success-focus: var(--color-black);
--color-text-button-success-active: var(--color-black);
--color-text-button-alert: var(--color-black);
--color-text-button-alert-hover: var(--color-black);
--color-text-button-alert-focus: var(--color-black);
--color-text-button-alert-active: var(--color-black);
--color-text-button-overlay: var(--color-white);
--color-text-button-overlay-hover: var(--color-white);
--color-text-button-overlay-focus: var(--color-white);
--color-text-button-overlay-active: var(--color-white);
--color-text-interactable: currentColor;
--color-text-interactable-hover: var(--color-white);
--color-text-interactable-active: var(--color-white);
--color-text-interactable-inverted: var(--color-white);
--color-text-input-focus: transparent;
--color-border-button: var(--color-twitch-purple-7);
--color-border-button-hover: var(--color-twitch-purple-8);
--color-border-button-focus: var(--color-twitch-purple-9);
--color-border-button-active: var(--color-twitch-purple-8);
--color-border-button-disabled: var(--color-opac-w-1);
--color-border-button-status: var(--color-green);
--color-border-button-status-hover: var(--color-red-darker);
--color-border-button-status-focus: var(--color-red-darker);
--color-border-button-status-active: var(--color-red);
--color-border-button-success: var(--color-green);
--color-border-button-success-hover: var(--color-green);
--color-border-button-success-focus: var(--color-green);
--color-border-button-success-active: var(--color-green);
--color-border-button-alert: var(--color-red);
--color-border-button-alert-hover: var(--color-red-darker);
--color-border-button-alert-focus: var(--color-red-darker);
--color-border-button-alert-active: var(--color-red);
--color-border-button-overlay: var(--color-transparent);
--color-border-button-overlay-hover: var(--color-transparent);
--color-border-button-overlay-focus: var(--color-opac-w-6);
--color-border-button-overlay-active: var(--color-opac-w-9);
--color-border-button-overlay-bordered: var(--color-white);
--color-border-interactable-selected: var(--color-twitch-purple-10);
--shadow-input: inset 0 0 0 1px var(--color-twitch-purple-5);
--shadow-input-error: 0 0 0 1px var(--color-border-error);
--shadow-input-focus: 0 0 10px -2px var(--color-border-brand);
--shadow-input-error...