azikx/userstyles
azikx/userstyles
1
0
Fork 0
mirror of https://git.sr.ht/~azikx/userstyles synced 2024-10-30 11:06:19 +00:00
Code Activity
userstyles/twitch/twitch.user.css
azikx 7a548adb0b update 
2024-10-08 20:49:12 +09:00

675 lines
19 KiB
CSS
Raw Blame History

/* ==UserStyle==
@name Twitch paradisa
@namespace github.com/axax-loll/userstyles/
@homepageURL https://github.com/axax-loll/userstyles/tree/main
@version 1.0.1
@updateURL https://github.com/axax-loll/userstyles/tree/main/twitch/twitch.user.css
@supportURL https://github.com/axax-loll/userstyles/tree/main
@description Paradise for Twitch
@author azikx
@license MIT
@preprocessor less
@var select darkFlavor "Dark Flavor" ["paradisa:paradisa"]
@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"]
==/UserStyle== */
@-moz-document domain("twitch.tv") {
.tw-root--theme-dark {
#paradisa(@darkFlavor, @accentColor);
}
#paradisa(@lookup, @accent) {
@rosewater: @paradisa[@@lookup][@rosewater];
@flamingo: @paradisa[@@lookup][@flamingo];
@pink: @paradisa[@@lookup][@pink];
@mauve: @paradisa[@@lookup][@mauve];
@red: @paradisa[@@lookup][@red];
@maroon: @paradisa[@@lookup][@maroon];
@peach: @paradisa[@@lookup][@peach];
@yellow: @paradisa[@@lookup][@yellow];
@green: @paradisa[@@lookup][@green];
@teal: @paradisa[@@lookup][@teal];
@sky: @paradisa[@@lookup][@sky];
@sapphire: @paradisa[@@lookup][@sapphire];
@blue: @paradisa[@@lookup][@blue];
@lavender: @paradisa[@@lookup][@lavender];
@text: @paradisa[@@lookup][@text];
@subtext1: @paradisa[@@lookup][@subtext1];
@subtext0: @paradisa[@@lookup][@subtext0];
@overlay2: @paradisa[@@lookup][@overlay2];
@overlay1: @paradisa[@@lookup][@overlay1];
@overlay0: @paradisa[@@lookup][@overlay0];
@surface2: @paradisa[@@lookup][@surface2];
@surface1: @paradisa[@@lookup][@surface1];
@surface0: @paradisa[@@lookup][@surface0];
@base: @paradisa[@@lookup][@base];
@mantle: @paradisa[@@lookup][@mantle];
@crust: @paradisa[@@lookup][@crust];
@accent-color: @paradisa[@@lookup][@@accent];
color-scheme: if(@lookup = latte, light, dark);
::selection {
background-color: fade(@accent-color, 30%);
}
input,
textarea {
&::placeholder {
color: @subtext0 !important;
}
}
body {
background-color: @base;
}
&,
.tw-dialog-layer {
--color-background-input-focus: @crust;
--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;
--color-border-input: @base;
--color-text-button-primary: @crust;
--color-text-overlay: @base;
--color-text-base: @subtext1;
--color-text-alt: @text;
--color-text-alt-2: @text;
--color-text-interactable-selected: @crust;
--color-background-alt-2: @crust;
--color-text-tag: @text;
--color-background-button-secondary-default: @crust;
--color-background-button-secondary-hover: @surface0;
--color-background-tag-default: @mantle;
--color-background-tag-hover: @crust;
--color-background-float: @mantle;
--color-background-body: @base;
--color-background-base: @mantle;
--color-background-alt: @mantle;
--color-background-input: @crust;
--color-brand-muted-cupcake: @pink;
--color-brand-muted-mint: @green;
--color-brand-muted-sky: @sky;
--color-brand-muted-blush: @peach;
--color-brand-muted-canary: @peach;
--color-brand-muted-lavender: @lavender;
--color-brand-muted-mustard: @yellow;
--color-brand-muted-emerald: @green;
--color-brand-muted-coral: @peach;
--color-brand-muted-ocean: @blue;
--color-brand-accent-grape: @mauve;
--color-brand-accent-dragonfruit: @flamingo;
--color-brand-accent-carrot: @peach;
--color-brand-accent-sun: @peach;
--color-brand-accent-lime: @green;
--color-brand-accent-turquoise: @sky;
--color-brand-accent-eggplant: @mauve;
--color-brand-accent-wine: @flamingo;
--color-brand-accent-slime: @green;
--color-brand-accent-seafoam: @green;
--color-brand-accent-cherry: @red;
--color-brand-accent-marine: @blue;
--color-brand-accent-seaweed: @teal;
--color-brand-accent-fiji: @green;
--color-brand-accent-blueberry: @blue;
--color-brand-accent-arctic: @sky;
--color-brand-accent-highlighter: @yellow;
--color-brand-accent-flamingo: @flamingo;
--color-brand-accent-ruby: @red;
--color-brand-accent-punch: @flamingo;
--color-brand-accent-creamsicle: @yellow;
--color-red: @maroon;
--color-red-darker: @red;
--color-orange: @peach;
--color-yellow: @yellow;
--color-green: @green;
--color-green-darker: @green;
--color-blue: @blue;
--color-prime-blue: @blue;
--color-magenta: @flamingo;
--color-error: @red;
--color-warn: @yellow;
--color-success: @green;
--color-white: @text;
--color-black: @crust;
--color-info: @blue;
--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-orange-7: @yellow;
--color-orange-8: @yellow;
--color-orange-9: @yellow;
--color-orange-10: @yellow;
--color-orange-11: @yellow;
--color-orange-12: @yellow;
--color-orange-13: @yellow;
--color-yellow-6: @peach;
--color-yellow-7: @peach;
--color-yellow-8: @peach;
--color-yellow-9: @peach;
--color-yellow-10: @peach;
--color-yellow-11: @peach;
--color-yellow-12: @peach;
--color-yellow-13: @peach;
--color-yellow-14: @peach;
--color-yellow-15: @peach;
--color-green-5: @green;
--color-green-6: @green;
--color-green-7: @green;
--color-green-8: @green;
--color-green-9: @green;
--color-green-10: @green;
--color-green-11: @green;
--color-green-12: @green;
--color-green-13: @green;
--color-green-14: @green;
--color-green-15: @teal;
--color-cyan-9: @sapphire;
--color-cyan-10: @sapphire;
--color-cyan-11: @sapphire;
--color-cyan-12: @sapphire;
--color-cyan-13: @sapphire;
--color-cyan-14: @sapphire;
--color-cyan-15: @sky;
--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-blue-10: @sky;
--color-blue-11: @sky;
--color-magenta-5: @flamingo;
--color-magenta-6: @flamingo;
--color-magenta-7: @flamingo;
--color-magenta-8: @flamingo;
--color-magenta-9: @flamingo;
--color-magenta-10: @flamingo;
--color-magenta-11: @pink;
--color-magenta-12: @pink;
--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-red-11: @peach;
--color-red-12: @peach;
--color-twitter: @blue;
--color-facebook: @blue;
--color-reddit: @peach;
--color-snapchat: @yellow;
--color-instagram: @blue;
--color-youtube: @red;
--color-paypal: @blue;
--color-paypal-blue: @blue;
--color-paypal-yellow: @yellow;
--color-venmo: @blue;
--color-vk: @blue;
--color-amazon: @yellow;
--color-background-button-text-hover: @surface0;
--color-text-accessible-red: @accent-color;
--color-border-input-checkbox: @subtext0;
--color-border-input-checkbox-hover: @text;
--color-text-label: @text;
--color-border-input-hover: @surface0;
--color-opac-b-14: @crust;
--color-text-button-overlay: @text !important;
--color-background-range-overlay-fill: @text !important;
--color-text-button-overlay-hover: @text !important;
--color-text-tooltip: @base !important;
--color-background-tooltip: @text !important;
--color-hinted-grey-2: @surface0;
--color-hinted-grey-15: @text;
--color-background-overlay-alt: @mantle;
--color-background-button-overlay-primary-hover: @subtext1;
--color-background-button-overlay-text-hover: @crust;
--color-border-overlay: @surface0;
--color-background-button-disabled: @surface0;
--color-text-button-disabled: @subtext0;
}
&,
[class*="ScTokenOverrideCSSVars"] {
--color-text-link: @blue;
--color-text-link-active: @sky;
--color-text-link-focus: @sky;
--color-text-link-hover: @sky;
--color-text-link-visited: @lavender;
}
&,
[class*="ScAccentRegionCssVars"] {
--color-accent: @accent-color;
}
/* Hardcoded accent color */
[style="color: rgb(160, 84, 255);"] {
color: @accent-color !important;
}
/* 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 !important;
}
/* `Pinned message` popup */
div.pinned-chat__pinned-by svg {
color: @text;
}
p.pinned-chat__message {
span {
color: @text !important;
}
a {
color: @accent-color;
}
}
/* `Intended for certain audiences` label */
div[data-a-target="content-classification-warning-disclosure-overlay"] p {
color: @text;
}
/* `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;
}
path[d="m18 17 4-4V2H6v15h4v4l4-4h4zM12 6h2v6h-2V6zm7 0h-2v6h2V6z"] {
fill: @mantle;
}
/* `Is video buffering?` warning */
div.low-latency-notification p {
color: @text;
}
/* `Includes paid promotion` label */
div.disclosure-card p,
div.disclosure-card svg {
color: @text;
}
/* Raiding popup */
div[data-test-selector="raid-banner"] {
color: @text;
}
/* `Predict with Channel Points` popup */
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;
}
/* TODO: ensure that the poll does not default to this */
div[data-test-selector="header-content"] p {
color: @text !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;
}
/* ??? */
div.happening-now-disable-prompt p {
color: @text !important;
}
/* Gifting sub popup */
div.mystery-gift-chat-banner {
span {
color: @accent-color;
}
p {
color: @text;
}
}
/* VOD metadata */
div.tw-media-card-stat {
color: @text;
}
/* DMCA warning */
div.muted-segments-alert__content p {
color: @text;
}
/* VOD time labels */
div.vod-seekbar-time-labels p {
color: @text !important;
}
/* VOD timestamp */
div.vod-seekbar-preview-overlay__wrapper p {
color: @text !important;
}
/* Seekbar segment */
div[data-test-selector="seekbar-interaction-area__interactionArea"]
span[data-test-selector="seekbar-segment__segment"] {
background: @accent-color !important;
}
/* Seekbar DMCA muted segment */
div[data-test-selector="seekbar-interaction-area__interactionArea"]
span[data-test-selector="seekbar-segment__segment"][style*="background-color: rgba(212, 73, 73, 0.5);"] {
background: @red !important;
}
/* Seekbar buffered segment */
div[data-test-selector="seekbar-interaction-area__interactionArea"]
span[data-test-selector="seekbar-segment__segment"][style*="background-color: rgba(255, 255, 255, 0.85);"] {
background: @overlay2 !important;
}
/* Recent VOD title */
div.player-overlay-background h4 {
color: @subtext0 !important;
}
a.offline-recommendations-video-card p {
color: @text;
}
/* Offline screen follow panel */
div[data-test-selector="follow-panel-overlay"] p {
color: @text !important;
}
div[data-test-selector="follow-panel-overlay"] button div {
color: @crust !important;
}
/* Front page warning sign */
div.content-overlay-gate__content[data-a-target="player-overlay-content-gate"]
div.content-overlay-icon
svg {
color: @red;
}
/* Front page age warning */
div.content-overlay-gate__content[data-a-target="player-overlay-content-gate"]
p.content-overlay-gate__allow-pointers {
color: @red !important;
}
/* Front page age selector */
div[data-a-target="player-overlay-age-gate-form"] select {
color: @text;
}
/* Following usercard */
div[data-a-target="user-card-modal"] p {
color: @text !important;
}
/* PiP username */
div.mini-overlay__title span {
color: @text;
}
/* Viewercard username */
div.viewer-card-header__display-name h4 {
color: @accent-color !important;
}
/* Viewercard metadata */
div.viewer-card-header__display-name svg:not(button svg) {
color: @subtext1;
}
div.viewer-card-header__display-name p {
color: @text !important;
}
/* Extension name */
div[aria-describedby="popover-extensions-body"] h6 {
color: @text;
}
/* Extension description */
div.extensions-popover-view-layout__body p {
color: @text;
}
/* Extension service buttons */
div.extensions-popover-view-layout__body svg {
color: @subtext0;
}
div.extensions-popover-view-layout__body div {
color: @text;
}
/* Extension overlay */
.extension-view__iframe {
color-scheme: light;
}
.carousel-metadata {
background: @crust;
}
.carousel-metadata--fadeout {
background: @crust;
}
.chat-line__timestamp {
color: @subtext0;
}
.chat-line__message-body--highlighted {
background-color: @accent-color;
color: @crust;
border-color: @accent-color;
}
.chat-scrollable-area__message-container {
background-color: @mantle;
}
.side-nav-card__link:hover {
background: @surface0 !important;
}
.footer {
background: @crust;
}
.whispers-list-item--selected,
.whispers-list-item:hover {
background-color: @surface0;
}
.thread-header__title-bar-container--focused {
background-color: @mantle;
}
.thread-header__title-bar-container {
background: @mantle;
}
.thread-header__click-area:focus .thread-header__title-bar-container {
background-color: @mantle;
}
.navigation-link {
color: @text;
&:hover,
.active {
color: @accent-color;
}
}
.navigation-link__active-indicator {
background-color: @accent-color !important;
}
.chat-room {
background: @mantle;
}
div.pinned-chat__highlight-card div.highlight {
background: @mantle;
}
h4,
h5 {
color: @text;
}
.server-message-alert {
border-color: @red !important;
border-left-color: @red !important;
}
.server-message-alert__icon {
color: @red !important;
}
/* Predictions */
.fixed-prediction-button {
color: @mantle !important;
.channel-points-icon svg {
color: @mantle !important;
}
&.fixed-prediction-button--disabled {
color: @text !important;
.channel-points-icon svg {
color: @text !important;
}
}
}
[style*="rgb(255, 255, 255)"] {
color: @base !important;
}
[style="color: rgb(56, 122, 255);"] {
color: @blue !important;
}
[style="color: rgb(245, 0, 155);"] {
color: @pink !important;
}
.fixed-prediction-button--blue,
[style*="background-color: rgb(56, 122, 255);"],
[style*="background: rgb(56, 122, 255);"] {
background-color: @blue !important;
}
.fixed-prediction-button--pink,
[style*="background-color: rgb(245, 0, 155);"],
[style*="background: rgb(245, 0, 155);"] {
background-color: @pink !important;
}
input[disabled] {
background-color: @surface0;
}
.chat-wysiwyg-input__placeholder {
color: @subtext0;
}
button[aria-label="Play"],
button[aria-label="Pause"] {
+ div svg {
color: @subtext0;
}
}
[data-a-target="video-ad-label"],
[data-a-target="video-ad-countdown"] {
color: @text !important;
}
/* Verified badge checkmark */
path[fill="#fff"] {
fill: @crust !important;
}
/* Override for logo icon */
.tw-animated-glitch-logo {
--color-white: @crust;
}
/* Modals */
.modal__content {
color: @text;
}
}
}
@-moz-document domain("dashboard.twitch.tv") {
.tw-root--theme-dark {
#paradisa(@darkFlavor);
}
#paradisa(@lookup) {
@base: @paradisa[@@lookup][@base];
@mantle: @paradisa[@@lookup][@mantle];
.simplebar-content {
background-color: @mantle;
}
.scrollable-area--suppress-scroll-x > .simplebar-scroll-content,
.scrollable-area--suppress-scroll-x
> .simplebar-scroll-content
> .simplebar-content {
background-color: @base;
}
}
}
/* prettier-ignore */
@paradisa: {
@paradisa: { @rosewater: #BBB6B6; @flamingo: #A988B0; @pink: #A988B0; @mauve: #A988B0; @red: #B66467; @maroon: #B66467; @peach: #B66467; @yellow: #D9BC8C; @green: #8C977D; @teal: #8AA6A2; @sky: #8AA6A2; @sapphire: #8DA3B9; @blue: #8DA3B9; @lavender: #8DA3B9; @text: #E8E3E3; @subtext1: #BBB6B6; @subtext0: #BBB6B6; @overlay2: #424242; @overlay1: #424242; @overlay0: #424242; @surface2: #2E2E2E; @surface1: #2E2E2E; @surface0: #2E2E2E; @base: #151515; @mantle: #1F1F1F; @crust: #1F1F1F; };
}
View git blame Copy permalink