Settings for twitch
TwitchUPO by drafwodgaming
Details
Authordrafwodgaming
LicenseNONE
Categorytwitchupo
Created
Updated
Code size21 kB
Code checksum473f12e0
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Userstyle doesn't have notes.Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name TwitchUPO
@namespace Twitch
@author drafwod
@description Settings for Twitch (on dark theme)
@version 1.1
@license NONE
@preprocessor less
@var select ThemeSelector "Choose Theme" ["breeze:Breeze", "modern_slate:Slate"];
@var checkbox RemoveBits "Remove Bits" 0
@var checkbox BlurOnStreamPreview "Blur On Stream Preview" 0
@var checkbox RemoveStories "Remove Stories" 0
@var checkbox RemovePowerUps "Remove Power-Ups" 0
@var checkbox RemoveDots "Remove three Dots in the top bar" 0
@var checkbox SquareAvatars "Square Avatars" 0
@var checkbox RemoveTags "Remove Tags" 0
@var checkbox UpdatedChat "Improve Chat" 0
==/UserStyle== */
@-moz-document url-prefix("https://www.twitch.tv/") {
.SquareAvatarStyles();
.UpdatedChatStyles();
.RemoveDots();
.BlurOnStreamPreview();
.RemoveBits();
.RemoveTags();
.RemoveStories();
.RemovePowerUps();
.tw-root--theme-dark {
#theme(@ThemeSelector);
}
#theme(@themeKey) {
@subcolor0: @theme[@@themeKey][@subcolor0];
@subcolor1: @theme[@@themeKey][@subcolor1];
@subcolor2-links: @theme[@@themeKey][@subcolor2-links];
@subcolor3: @theme[@@themeKey][@subcolor3];
@subcolor4-tags: @theme[@@themeKey][@subcolor4-tags];
@subcolor5-btn: @theme[@@themeKey][@subcolor5-btn];
@subcolor6-tag-2: @theme[@@themeKey][@subcolor6-tag-2];
@text-primary: @theme[@@themeKey][@color-text-primary];
@text-secondary: @theme[@@themeKey][@color-text-secondary];
@subtext0: @theme[@@themeKey][@subtext0];
@bg-primary: @theme[@@themeKey][@color-bg-primary];
@bg-secondary: @theme[@@themeKey][@color-bg-secondary];
@accent-color: @theme[@@themeKey][@color-accent];
@surface0: @theme[@@themeKey][@surface0];
@blue: @theme[@@themeKey][@blue];
::selection {
color: #1c1c1c;
background: fade(@accent-color, 30%);
}
/*.chat-shell{font-size:1.1em}*/
div,
h1,
h2,
h3,
h4,
h5,
h6,
body {
font-family: arial !important
}
* {
font-family: arial !important
}
&,
.tw-dialog-layer {
--color-background-input-focus: @subcolor3;
--color-background-interactable-hover: @surface0;
--color-background-interactable-alpha-hover: @surface0;
--color-background-button-text-default: null !important;
--color-background-pill-subtle: @subtext0;
--color-text-input-placeholder: @text-primary;
--color-border-input: @bg-primary;
--color-border-input-hover: @surface0;
--color-text-button-primary: @subcolor5-btn;
--color-text-overlay: @text-secondary;
--color-text-base: @subtext0;
--color-text-alt: @text-primary;
--color-text-alt-2: @text-primary;
--color-text-interactable-selected: @subcolor3;
--color-background-alt-2: @subcolor3;
--color-text-tag: @subcolor6-tag-2;
--color-background-tag-default: @bg-primary;
--color-background-tag-hover: @subcolor4-tags;
--color-background-input: @subcolor3;
--color-background-button-secondary-default: @subcolor3;
--color-background-button-secondary-hover: @surface0;
--color-background-float: @bg-secondary;
--color-background-body: @bg-primary;
--color-background-base: @bg-secondary;
--color-background-alt: @bg-secondary;
--color-background-input: @subcolor3;
--color-brand-muted-ocean: @blue;
--color-brand-accent-marine: @blue;
--color-brand-accent-blueberry: @blue;
--color-blue: @blue;
--color-prime-blue: @blue;
--color-info: @blue;
--color-blue-4: @blue;
--color-blue-5: @blue;
--color-blue-6: @blue;
--color-blue-7: @blue;
--color-blue-8: @blue;
--color-blue-9: @blue;
--color-twitter: @blue;
--color-facebook: @blue;
--color-instagram: @blue;
--color-venmo: @blue;
--color-vk: @blue;
--color-white: @text-primary;
--color-black: @subcolor3;
--color-twitch-purple: @accent-color;
--color-twitch-purple-4: @accent-color;
--color-twitch-purple-5: @accent-color;
--color-twitch-purple-6: @accent-color;
--color-twitch-purple-7: @accent-color;
--color-twitch-purple-8: @accent-color;
--color-twitch-purple-9: @accent-color;
--color-twitch-purple-10: @accent-color;
--color-twitch-purple-11: @accent-color;
--color-twitch-purple-12: @accent-color;
--color-red-4: @accent-color;
--color-red-5: @accent-color;
--color-red-6: @accent-color;
--color-red-7: @accent-color;
--color-red-8: @accent-color;
--color-red-9: @accent-color;
--color-red-10: @accent-color;
--color-background-button-text-hover: @surface0;
--color-text-accessible-red: @accent-color;
--color-border-input-checkbox: @subtext0;
--color-border-input-checkbox-hover: @text-primary;
--color-text-label: @text-primary;
--color-border-input-hover: @surface0;
--color-opac-b-14: @subcolor3;
--color-text-button-overlay: @text-primary !important;
--color-background-range-overlay-fill: @text-primary !important;
--color-text-button-overlay-hover: @text-primary !important;
--color-text-tooltip: @bg-primary !important;
--color-background-tooltip: @text-primary !important;
--color-hinted-grey-2: @surface0;
--color-hinted-grey-15: @text-primary;
--color-background-overlay-alt: @bg-secondary;
--color-background-button-overlay-primary-hover: @subtext0;
--color-background-button-overlay-text-hover: @subcolor3;
--color-border-overlay: @surface0;
--color-background-button-disabled: @surface0;
--color-text-button-disabled: @subtext0;
--color-paypal: @blue;
--color-paypal-blue: @blue;
}
&,
[class*="ScTokenOverrideCSSVars"] {
--color-text-link: @subcolor2-links;
--color-text-link-active: darken(@subcolor2-links, 3%);
--color-text-link-focus: darken(@subcolor2-links, 3%);
--color-text-link-hover: darken(@subcolor2-links, 3%);
--color-text-link-visited: @subcolor2-links;
} // Twitch Icon Delete Background
.ScFace-sc-mx5axi-4 {
fill: @bg-secondary !important;
}
&,
[class*="ScAccentRegionCssVars"] {
--color-accent: @accent-color;
}
/* Hardcoded accent color */
[style="color: rgb(160, 84, 255);"] {
color: @accent-color !important;
}
.tw-tag {
border: 1px solid @subcolor4-tags;
border-radius: 5px;
&:hover {
color: #0e0e10;
}
}
/* Full screened video player title & description */
p[data-test-selector="stream-info-card-component__subtitle"],
p[data-test-selector="stream-info-card-component__description"] {
color: @text-primary !important;
}
/* `Pinned message` popup */
div.pinned-chat__pinned-by svg {
color: @text-primary;
}
p.pinned-chat__message {
span {
color: @text-primary !important;
}
a {
color: @accent-color;
}
}
/* `Intended for certain audiences` label */
div[data-a-target="content-classification-warning-disclosure-overlay"] p {
color: @text-primary;
}
/* `Hype Train` popup */
div.hype-train-progress-bar-info-view__level-container p,
div.hype-train-approaching-view__leftSide p,
div.hype-train-expanded-layout p,
div.hype-train-expanded-layout svg {
color: @text-primary;
}
path[d="m18 17 4-4V2H6v15h4v4l4-4h4zM12 6h2v6h-2V6zm7 0h-2v6h2V6z"] {
fill: @bg-secondary;
}
div.low-latency-notification p {
color: @text-primary;
}
/* `Includes paid promotion` label */
div.disclosure-card p,
div.disclosure-card svg {
color: @text-primary;
}
/* Raiding popup */
div[data-test-selector="raid-banner"] {
color: @text-primary;
}
div[data-test-selector="expanded-content"] p,
p[data-test-selector="community-prediction-highlight-header__top-predictors"],
p[data-test-selector="community-prediction-highlight-body__outcome-title"] {
color: @text-primary;
}
div[data-test-selector="header-content"] p {
color: @text-primary !important;
}
div.channel-points-icon svg,
div[data-test-selector="header-content"] span,
div[data-test-selector="community-prediction-highlight-body__outcome-points"] span {
color: @accent-color;
}
button[data-test-selector="community-prediction-highlight-header__how-to-play"],
button[data-test-selector="community-prediction-highlight-header__terms-and-conditions"],
button[data-test-selector="community-prediction-highlight-header__send-feedback"],
button[data-test-selector="community-prediction-highlight-header__dismiss-message"] {
color: @text-primary;
}
div.mystery-gift-chat-banner {
span {
color: @accent-color;
}
p {
color: @text-primary;
}
}
/* VOD metadata */
div.tw-media-card-stat {
color: @text-primary;
}
/* DMCA warning */
div.muted-segments-alert__content p {
color: @text-primary;
}
/* VOD time labels */
div.vod-seekbar-time-labels p {
color: @text-primary !important;
}
/* VOD timestamp */
div.vod-seekbar-preview-overlay__wrapper p {
color: @text-primary !important;
}
/* Recent VOD title */
div.player-overlay-background h4 {
color: @subtext0 !important;
}
a.offline-recommendations-video-card p {
color: @text-primary;
}
/* Offline screen follow panel */
div[data-test-selector="follow-panel-overlay"] p {
color: @text-primary !important;
}
div[data-test-selector="follow-panel-overlay"] button div {
color: @subcolor3 !important;
}
/* Front page age selector */
div[data-a-target="player-overlay-age-gate-form"] select {
color: @text-primary;
}
/* Following usercard */
div[data-a-target="user-card-modal"] p {
color: @text-primary !important;
}
/* PiP username */
div.mini-overlay__title span {
color: @text-primary;
}
/* Viewercard username */
div.viewer-card-header__display-name h4 {
color: @accent-color !important;
}
div.viewer-card-header__display-name svg:not(button svg) {
color: @subtext0;
}
div.viewer-card-header__display-name p {
color: @text-primary !important;
}
/* Extension name */
div[aria-describedby="popover-extensions-body"] h6 {
color: @text-primary;
}
/* Extension description */
div.extensions-popover-view-layout__body p {
...