This CSS will change the font and colors back to how it was before. I've also decreased the font-sizes in some areas, also changed size and color of scroll.
Fix Twitch Redesign 2020 and scroll size up by greendev
Details
Authorgreendev
LicenseNo License
Categorytwitch.tv
Created
Updated
Size3.8 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
This CSS will change the font and colors back to how it was before. I've also decreased the font-sizes in some areas, also changed size and color of scroll.
Source code
/* ==UserStyle==
@name Fix Twitch Redesign 2020 (Dark Mode)
@namespace USO Archive
@author jaaneh
@description `This CSS will change the font and colors back to how it was before. I've also decreased the font-sizes in some areas, also changed size of scroll.`
@version 20201124.11.55
@license CC-BY-NC-ND-4.0
@preprocessor uso
==/UserStyle== */
@-moz-document domain('www.twitch.tv'), domain('clips.twitch.tv') {
:root {
--color-background-body: #0F0E11 !important;
--color-background-base: #0F0E11 !important;
--color-border-input: #212126 !important;
--color-border-base: #252525 !important;
--color-background-accent: #1d2537 !important;
--color-background-accent-alt-2: #1d2537 !important;
--color-background-input: #212126 !important;
--color-background-input-focus: #212126 !important;
--color-background-alt: #0F0E11 !important;
--color-background-alt-2: #212126 !important;
}
::selection {
background-color: #772ce8;
color: #fff;
}
.tw-root--theme-dark {
--color-background-interactable-alpha-hover: #212126 !important;
--color-background-interactable-alpha-active: #212126 !important;
}
body {
font-family: Verdana, Helvetica, sans-serif !important;
}
.tw-root--theme-dark .channel-root__right-column,
.tw-root--theme-dark .chat-room {
background: var(--color-background-body);
}
.tw-root--theme-dark .chat-viewers__pane {
background: var(--color-background-body);
}
.tw-absolute.tw-hover-accent-effect__corner.tw-hover-accent-effect__corner--top.tw-left-0.tw-top-0,
.tw-absolute.tw-bottom-0.tw-hover-accent-effect__corner.tw-hover-accent-effect__corner--bottom.tw-right-0 {
display: none;
}
div.channel-info-bar__content-top.tw-flex.tw-flex-wrap.tw-justify-content-between.tw-mg-b-05.tw-sm-flex-nowrap > div.tw-flex-grow-1.tw-flex-shrink-1.tw-overflow-hidden.tw-pd-r-2 {
flex-grow: 0 !important;
flex-shrink: 0 !important;
}
.tw-root--hover .tw-hover-accent-effect:hover .tw-hover-accent-effect__children {
transform: none;
}
div.tw-absolute.tw-block.tw-bottom-0.tw-left-0.tw-mg-r-1.whispers.whispers--right-column-expanded-beside > div:nth-child(2) > div > div > div > button {
background-color: var(--color-background-alt-2) !important;
}
.tw-c-background-alt-2 {
background-color: var(--color-background-alt)!important;
}
.tw-root--theme-dark .side-nav__overlay-wrapper,
.side-nav__overlay-wrapper,
.tw-root--theme-dark .directory-header-new__banner-cover,
.tw-root--theme-dark .channel-header,
.tw-root--theme-dark body,
.tw-c-background-base,
.tw-root--theme-dark .clips-top-nav-user,
.channel-header {
background: #0F0E11 !important;
}
.tw-elevation-1 {
box-shadow: none !important;
border-bottom: 1px solid #252525 !important;
}
h1 {
font-size: 4.5rem !important;
}
div.channel-header .tw-mg-l-05.tw-sm-mg-l-1.tw-visible {
white-space: nowrap;
}
div.channel-header p.tw-font-size-5 {
white-space: nowrap;
}
.tw-nowrap {
white-space: nowrap;
}
.tw-semibold,
.tw-strong,
h2[data-a-target="stream-title"] {
font-weight: 300!important;
}
.simplebar-scrollbar {
background: #7302bb !important; width: 1.6rem !important; border: 1px solid #ad6cff !important;;
}
.chat-line__message:focus-within .chat-line__message-highlight, .chat-line__message:focus .chat-line__message-highlight, .chat-line__message:hover .chat-line__message-highlight,
.ffz-notice-line:focus-within .chat-line__message-highlight, .ffz-notice-line:hover .chat-line__message-highlight, .ffz-notice-line:focus .chat-line__message-highlight {
background: transparent;
}
}