Forked from tsukumijima/TwitterRevertColoring.user.css
Last active
September 1, 2021 23:21
-
-
Save contextnerror/fd5f23560db92f41d15e40d84406c269 to your computer and use it in GitHub Desktop.
Changes twitter UI to the old colors. By tsukumijima, modified to work on the English website.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* ==UserStyle== | |
@name TwitterRevertColoring(English) | |
@description Changes twitter UI to the old colors. By tsukumijima, modified to work on the English website. | |
@namespace https://gist.github.com/contextnerror | |
@updateURL https://gist.githubusercontent.com/contextnerror/fd5f23560db92f41d15e40d84406c269/raw/TwitterRevertColoring.user.css | |
@author tsukumi | |
@version 1.3.6 | |
@license MIT | |
==/UserStyle== */ | |
@-moz-document url-prefix("https://twitter.com/"), url-prefix("https://mobile.twitter.com/") { | |
/* Style overwrite */ | |
/* Color definition */ | |
:root { | |
--color-blue: rgb(29, 161, 242); | |
--color-blue-hover: rgb(26, 145, 218); | |
--color-white: rgb(255, 255, 255); | |
--color-white-hover: rgba(29, 161, 242, 0.1); | |
} | |
/* Each button on the main menu */ | |
nav[role="navigation"][aria-label="Primary"] > * > div > div:nth-child(2) { | |
font-weight: 700; | |
} | |
nav[role="navigation"][aria-label="Primary"] > * > div > div:nth-child(2).r-b88u0q { | |
color: var(--color-blue) !important; | |
} | |
nav[role="navigation"][aria-label="Primary"] > * > div.r-1ydqjzz { | |
background-color: var(--color-white-hover) !important; | |
} | |
/* Each icon of each button in the main menu */ | |
/* Since there was no CSS class that met the conditions, I pushed the SVG path as a clue */ | |
/* Home */ | |
nav[role="navigation"][aria-label="Primary"] > * > div > div:nth-child(1) > svg > g > path[d="M22.58 7.35L12.475 1.897c-.297-.16-.654-.16-.95 0L1.425 7.35c-.486.264-.667.87-.405 1.356.18.335.525.525.88.525.16 0 .324-.038.475-.12l.734-.396 1.59 11.25c.216 1.214 1.31 2.062 2.66 2.062h9.282c1.35 0 2.444-.848 2.662-2.088l1.588-11.225.737.398c.485.263 1.092.082 1.354-.404.263-.486.08-1.093-.404-1.355zM12 15.435c-1.795 0-3.25-1.455-3.25-3.25s1.455-3.25 3.25-3.25 3.25 1.455 3.25 3.25-1.455 3.25-3.25 3.25z"], | |
/* Search for topics */ | |
nav[role="navigation"][aria-label="Primary"] > * > div > div:nth-child(1) > svg > g > path[d="M20.585 9.468c.66 0 1.2-.538 1.2-1.2 0-.662-.54-1.2-1.2-1.2h-3.22l.31-3.547c.027-.318-.07-.63-.277-.875-.206-.245-.495-.396-.822-.425-.65-.035-1.235.432-1.293 1.093l-.326 3.754H9.9l.308-3.545c.06-.658-.43-1.242-1.097-1.302-.665-.05-1.235.43-1.293 1.092l-.325 3.754h-3.33c-.663 0-1.2.538-1.2 1.2 0 .662.538 1.2 1.2 1.2h3.122l-.44 5.064H3.416c-.662 0-1.2.54-1.2 1.2s.538 1.202 1.2 1.202h3.22l-.31 3.548c-.057.657.432 1.24 1.09 1.3l.106.005c.626 0 1.14-.472 1.195-1.098l.327-3.753H14.1l-.308 3.544c-.06.658.43 1.242 1.09 1.302l.106.005c.617 0 1.142-.482 1.195-1.098l.325-3.753h3.33c.66 0 1.2-.54 1.2-1.2s-.54-1.202-1.2-1.202h-3.122l.44-5.064h3.43zm-5.838 0l-.44 5.063H9.253l.44-5.062h5.055z"], | |
/* Search for topics (magnifying glass version)) */ | |
nav[role="navigation"][aria-label="Primary"] > * > div > div:nth-child(1) > svg > g > path[d="M22.06 19.94l-3.73-3.73C19.38 14.737 20 12.942 20 11c0-4.97-4.03-9-9-9s-9 4.03-9 9 4.03 9 9 9c1.943 0 3.738-.622 5.21-1.67l3.73 3.73c.292.294.676.44 1.06.44s.768-.146 1.06-.44c.586-.585.586-1.535 0-2.12zM11 17c-3.308 0-6-2.692-6-6s2.692-6 6-6 6 2.692 6 6-2.692 6-6 6z"], | |
/* Notifications */ | |
nav[role="navigation"][aria-label="Primary"] > * > div > div:nth-child(1) > svg > g > path[d="M21.697 16.468c-.02-.016-2.14-1.64-2.103-6.03.02-2.533-.812-4.782-2.347-6.334-1.375-1.393-3.237-2.164-5.242-2.172h-.013c-2.004.008-3.866.78-5.242 2.172-1.534 1.553-2.367 3.802-2.346 6.333.037 4.332-2.02 5.967-2.102 6.03-.26.194-.366.53-.265.838s.39.515.713.515h4.494c.1 2.544 2.188 4.587 4.756 4.587s4.655-2.043 4.756-4.587h4.494c.324 0 .61-.208.712-.515s-.005-.644-.265-.837zM12 20.408c-1.466 0-2.657-1.147-2.756-2.588h5.512c-.1 1.44-1.29 2.587-2.756 2.587z"], | |
/* Messages */ | |
nav[role="navigation"][aria-label="Primary"] > * > div > div:nth-child(1) > svg > g > path[d="M11.55 12.082c.273.182.627.182.9 0L22 5.716V5.5c0-1.24-1.01-2.25-2.25-2.25H4.25C3.01 3.25 2 4.26 2 5.5v.197l9.55 6.385z"], | |
nav[role="navigation"][aria-label="Primary"] > * > div > div:nth-child(1) > svg > g > path[d="M13.26 13.295c-.383.255-.82.382-1.26.382s-.877-.127-1.26-.383L2 7.452v11.67c0 1.24 1.01 2.25 2.25 2.25h15.5c1.24 0 2.25-1.01 2.25-2.25V7.47l-8.74 5.823z"], | |
/* Bookmarks */ | |
nav[role="navigation"][aria-label="Primary"] > * > div > div:nth-child(1) > svg > g > path[d="M19.9 23.5c-.2 0-.3 0-.4-.1L12 17.9l-7.5 5.4c-.2.2-.5.2-.8.1-.2-.1-.4-.4-.4-.7V5.6c0-1.2 1-2.2 2.2-2.2h12.8c1.2 0 2.2 1 2.2 2.2v17.1c0 .3-.2.5-.4.7 0 .1-.1.1-.2.1z"], | |
/* Lists */ | |
nav[role="navigation"][aria-label="Primary"] > * > div > div:nth-child(1) > svg > g > path[d="M19.75 2H4.25C3.013 2 2 3.013 2 4.25v15.5C2 20.987 3.013 22 4.25 22h15.5c1.237 0 2.25-1.013 2.25-2.25V4.25C22 3.013 20.987 2 19.75 2zM11 16.75H7c-.414 0-.75-.336-.75-.75s.336-.75.75-.75h4c.414 0 .75.336.75.75s-.336.75-.75.75zm6-4H7c-.414 0-.75-.336-.75-.75s.336-.75.75-.75h10c.414 0 .75.336.75.75s-.336.75-.75.75zm0-4H7c-.414 0-.75-.336-.75-.75s.336-.75.75-.75h10c.414 0 .75.336.75.75s-.336.75-.75.75z"], | |
/* Profile */ | |
nav[role="navigation"][aria-label="Primary"] > * > div > div:nth-child(1) > svg > g > path[d="M12.225 12.165c-1.356 0-2.872-.15-3.84-1.256-.814-.93-1.077-2.368-.805-4.392.38-2.826 2.116-4.513 4.646-4.513s4.267 1.687 4.646 4.513c.272 2.024.008 3.46-.806 4.392-.97 1.106-2.485 1.255-3.84 1.255zm5.849 9.85H6.376c-.663 0-1.25-.28-1.65-.786-.422-.534-.576-1.27-.41-1.968.834-3.53 4.086-5.997 7.908-5.997s7.074 2.466 7.91 5.997c.164.698.01 1.434-.412 1.967-.4.505-.985.785-1.648.785z"] | |
{ | |
color: var(--color-blue) !important; | |
} | |
/* Addressed an issue with too small margins on images (thanks misoni) */ | |
[aria-labelledby*="id__"]:not(article):not([data-testid="card.wrapper"]) > div { | |
margin-top: 12px !important; | |
} | |
[aria-labelledby*="id__"]:not(article):not([data-testid="card.wrapper"]) > div > div.r-1s2bzr4 { | |
margin-top: 0px !important; | |
} | |
/* Other black buttons */ | |
/* As a fallback */ | |
div[role="button"][style="background-color: rgb(15, 20, 25);"] { | |
background-color: transparent !important; | |
border-color: var(--color-blue) !important; | |
} | |
div[role="button"][style="background-color: rgb(15, 20, 25);"] > div { | |
color: var(--color-blue) !important; | |
} | |
div[role="button"].r-oelmt8 { | |
background-color: var(--color-white-hover) !important; | |
border-color: var(--color-blue) !important; | |
} | |
div[role="button"].r-oelmt8 > div { | |
color: var(--color-blue) !important; | |
} | |
/* Other black link buttons */ | |
/* ご存知ですか?など */ | |
a[role="link"][target="_blank"][style="background-color: rgb(15, 20, 25);"] { | |
background-color: var(--color-blue) !important; | |
} | |
a[role="link"][target="_blank"].r-oelmt8:hover { | |
background-color: var(--color-blue-hover) !important; | |
} | |
/* Upper right button of the generic modal */ | |
div[aria-modal="true"][aria-labelledby="modal-header"][role="dialog"] > div > div > div > div > div > div:nth-child(3) > div[role="button"], | |
div[aria-modal="true"][aria-labelledby="modal-header"][role="dialog"] > div > div > div > div > div > div:nth-child(3) > div > div[role="button"] { | |
background-color: var(--color-blue) !important; | |
} | |
div[aria-modal="true"][aria-labelledby="modal-header"][role="dialog"] > div > div > div > div > div > div:nth-child(3) > div[role="button"] > div, | |
div[aria-modal="true"][aria-labelledby="modal-header"][role="dialog"] > div > div > div > div > div > div:nth-child(3) > div > div[role="button"] > div { | |
color: var(--color-white) !important; | |
} | |
div[aria-modal="true"][aria-labelledby="modal-header"][role="dialog"] > div > div > div > div > div > div:nth-child(3) > div[role="button"]:hover, | |
div[aria-modal="true"][aria-labelledby="modal-header"][role="dialog"] > div > div > div > div > div > div:nth-child(3) > div > div[role="button"]:hover { | |
background-color: var(--color-blue-hover) !important; | |
} | |
/* User action button */ | |
div[role="button"][data-testid="userActions"] { | |
border-color: var(--color-blue) !important; | |
} | |
div[role="button"][data-testid="userActions"] > div > svg { | |
color: var(--color-blue) !important; | |
} | |
div[role="button"][data-testid="userActions"]:hover { | |
background-color: var(--color-white-hover) !important; | |
} | |
/* DM send (profile) button */ | |
div[role="button"][data-testid="sendDMFromProfile"] { | |
border-color: var(--color-blue) !important; | |
} | |
div[role="button"][data-testid="sendDMFromProfile"] > div > svg { | |
color: var(--color-blue) !important; | |
} | |
div[role="button"][data-testid="sendDMFromProfile"]:hover { | |
background-color: var(--color-white-hover) !important; | |
} | |
/* Notification on button */ | |
div[role="button"][aria-label="Turn on Tweet notifications"] { | |
border-color: var(--color-blue) !important; | |
} | |
div[role="button"][aria-label="Turn on Tweet notifications"] > div > svg { | |
color: var(--color-blue) !important; | |
} | |
div[role="button"][aria-label="Turn on Tweet notifications"]:hover { | |
background-color: var(--color-white-hover) !important; | |
} | |
/* Edit profile button */ | |
a[role="link"][href="/settings/profile"] { | |
border-color: var(--color-blue) !important; | |
} | |
a[role="link"][href="/settings/profile"] > div { | |
color: var(--color-blue) !important; | |
} | |
a[role="link"][href="/settings/profile"]:hover { | |
background-color: var(--color-white-hover) !important; | |
} | |
/* Topic follow button */ | |
div[role="button"][id^="topic-follow-button"] { | |
background-color: transparent !important; | |
border-color: var(--color-blue) !important; | |
} | |
div[role="button"][id^="topic-follow-button"] > div { | |
color: var(--color-blue) !important; | |
} | |
div[role="button"][id^="topic-follow-button"]:hover { | |
background-color: var(--color-white-hover) !important; | |
} | |
div[role="button"][id^="topic-follow-button"].r-1niwhzg.r-1ets6dv { | |
background-color: var(--color-blue) !important; | |
} | |
div[role="button"][id^="topic-follow-button"].r-1ets6dv > div { | |
color: var(--color-white) !important; | |
} | |
div[role="button"][id^="topic-follow-button"].r-12d83nn:hover { | |
background-color: var(--color-blue-hover) !important; | |
} | |
div[role="button"][id^="topic-follow-button"].r-12d83nn:hover > div { | |
color: var(--color-white) !important; | |
} | |
/* Follow topic */ | |
div[data-testid="placementTracking"] div[role="button"][aria-label^="Follow Topic"] { | |
border-color: var(--color-blue) !important; | |
} | |
div[data-testid="placementTracking"] div[role="button"][aria-label^="Follow Topic"] > div { | |
color: var(--color-blue) !important; | |
} | |
/* Following topic */ | |
div[data-testid="placementTracking"] div[role="button"][aria-label^="Following"] { | |
background-color: var(--color-blue) !important; | |
} | |
div[data-testid="placementTracking"] div[role="button"][aria-label^="Following"] > div { | |
color: var(--color-white) !important; | |
} | |
/* Topic (not interested) */ | |
div[aria-label="Timeline: Topics"] div[role="button"][id^="topic-follow-button"]:hover { | |
background-color: var(--color-white-hover) !important; | |
} | |
/* Follow button */ | |
div[role="button"][data-testid$="-follow"] { | |
background-color: transparent !important; | |
border-color: var(--color-blue) !important; | |
} | |
div[role="button"][data-testid$="-follow"] > div, | |
div[role="button"][data-testid$="-follow"] > span > span > span { | |
color: var(--color-blue) !important; | |
} | |
div[role="button"][data-testid$="-follow"]:hover { | |
background-color: var(--color-white-hover) !important; | |
} | |
/* Following button */ | |
div[role="button"][data-testid$="-unfollow"] { | |
background-color: var(--color-blue) !important; | |
border: none !important; | |
} | |
div[role="button"][data-testid$="-unfollow"] > div, | |
div[role="button"][data-testid$="-unfollow"] > span > span > span { | |
color: var(--color-white) !important; | |
} | |
div[role="button"][data-testid$="-unfollow"]:hover { | |
background-color: var(--color-blue-hover) !important; | |
} | |
/* Confirmation dialog approval button */ | |
div[role="button"][data-testid="confirmationSheetConfirm"] { | |
background-color: var(--color-blue) !important; | |
margin-right: 0px; | |
} | |
div[role="button"][data-testid="confirmationSheetConfirm"] > div { | |
color: var(--color-white) !important; | |
} | |
div[role="button"][data-testid="confirmationSheetConfirm"]:hover { | |
background-color: var(--color-blue-hover) !important; | |
} | |
/* Followed lists */ | |
div[aria-label^="Timeline: Your Lists"] div[role="button"]:hover { | |
background-color: var(--color-white-hover) !important; | |
} | |
div[aria-label^="Timeline: Suggested Lists"] div[role="button"]:hover { | |
background-color: var(--color-white-hover) !important; | |
} | |
/* Sugested lists (beginning) */ | |
div[aria-label="Timeline: Suggested Lists"] h1[role="heading"] + div + div a { | |
background-color: var(--color-blue) !important; | |
} | |
div[aria-label="Timeline: Suggested Lists"] h1[role="heading"] + div + div a:hover { | |
background-color: var(--color-blue-hover) !important; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment