Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save justmarkup/126d697ab2db25bd7810 to your computer and use it in GitHub Desktop.
Save justmarkup/126d697ab2db25bd7810 to your computer and use it in GitHub Desktop.
User styles twitter.com
.user-style-justmarkup {
--color1: #118C3C;
--color2: #fff;
--color3: #9FD1B1;
--color4: rgba(0, 0, 0, 0.05);
--color5: rgba(17,140,60,0.25);
--color6: #E7F3EB;
--color7: #C3E2CE;
--color8: #0D7030;
--color9: #0A5424;
--color10: rgba(17,140,60,.5);
--color11: rgba(17,140,60,.8);
--color12: rgba(17, 140, 60, 0.5);
--color13: #70BA8A;
--color14: rgba(17, 140, 60, 0.7);
--color15: rgba(17, 140, 60, .25);
--color16: rgba(17, 140, 60, .1);
--profile-mini: url(https://pbs.twimg.com/profile_banners/20070025/1451740160/mobile);
--profile-big: url(https://pbs.twimg.com/profile_banners/20070025/1451740160/web);
--show-content: none;
--show-boxshadow: none;
}
a,
a:hover,
a:focus,
a:active {
color: #118C3C;
}
.u-textUserColor,
.u-textUserColorHover:hover,
.u-textUserColorHover:focus {
color: #118C3C !important;
}
.u-borderUserColor,
.u-borderUserColorHover:hover,
.u-borderUserColorHover:focus {
border-color: #118C3C !important;
}
.u-bgUserColor,
.u-bgUserColorHover:hover,
.u-bgUserColorHover:focus {
background-color: #118C3C !important;
}
.u-dropdownUserColor > li:hover,
.u-dropdownUserColor > li:focus,
.u-dropdownUserColor > li > button:hover,
.u-dropdownUserColor > li > button:focus {
color: #fff !important;
background-color: #118C3C !important;
}
.u-boxShadowInsetUserColorHover:hover,
.u-boxShadowInsetUserColorHover:focus {
box-shadow: inset 0 0 0 5px #118C3C !important;
}
.macaw-cards-user-styles {
color: #118C3C !important;
}
.u-textUserColorLight {
color: #9FD1B1 !important;
}
.u-borderUserColorLight,
.u-borderUserColorLightFocus:focus,
.u-borderUserColorLightHover:hover,
.u-borderUserColorLightHover:focus {
border-color: #9FD1B1 !important;
}
.u-bgUserColorLight {
background-color: #9FD1B1 !important;
}
.u-boxShadowUserColorLighterFocus:focus {
box-shadow: 0 0 8px rgba(0, 0, 0, 0.05), inset 0 1px 2px rgba(17,140,60,0.25) !important;
}
.u-textUserColorLightest {
color: #E7F3EB !important;
}
.u-borderUserColorLightest {
border-color: #E7F3EB !important;
}
.u-bgUserColorLightest {
background-color: #E7F3EB !important;
}
.u-textUserColorLighter {
color: #C3E2CE !important;
}
.u-borderUserColorLighter {
border-color: #C3E2CE !important;
}
.u-bgUserColorLighter {
background-color: #C3E2CE !important;
}
.u-bgUserColorDarkHover:hover {
background-color: #0D7030 !important;
}
.u-borderUserColorDark {
border-color: #0D7030 !important;
}
.u-bgUserColorDarkerActive:active {
background-color: #0A5424 !important;
}
a,
.btn-link,
.btn-link:focus,
.icon-btn,
.pretty-link b,
.pretty-link:hover s,
.pretty-link:hover b,
.pretty-link:focus s,
.pretty-link:focus b,
/* Account Group */
.metadata a:hover,
.metadata a:focus,
.account-group:hover .fullname,
.account-group:focus .fullname,
.account-summary:focus .fullname,
.message .message-text a,
.stats a strong,
.plain-btn:hover,
.plain-btn:focus,
.dropdown.open .user-dropdown.plain-btn,
.open > .plain-btn,
#global-actions .new:before,
.module .list-link:hover,
.module .list-link:focus,
.UserCompletion-step:hover,
.stats a:hover,
.stats a:hover strong,
.stats a:focus,
.stats a:focus strong,
.profile-modal-header .fullname a:hover,
.profile-modal-header .username a:hover,
.profile-modal-header .fullname a:focus,
.profile-modal-header .username a:focus,
.find-friends-sources li:hover .source,
.stream-item a:hover .fullname,
.stream-item a:focus .fullname,
.stream-item .view-all-supplements:hover,
.stream-item .view-all-supplements:focus,
.tweet .time a:hover,
.tweet .time a:focus,
.tweet .details.with-icn b,
.tweet .details.with-icn .Icon,
.tweet .tweet-geo-text a:hover,
.stream-item:hover .original-tweet .details b,
.stream-item .original-tweet.focus .details b,
.stream-item.open .original-tweet .details b,
.client-and-actions a:hover,
.client-and-actions a:focus,
.dismiss-btn:hover b,
.tweet .context .pretty-link:hover s,
.tweet .context .pretty-link:hover b,
.tweet .context .pretty-link:focus s,
.tweet .context .pretty-link:focus b,
.list .username a:hover,
.list .username a:focus,
.list-membership-container .create-a-list,
.list-membership-container .create-a-list:hover,
.card .list-details a:hover,
.card .list-details a:focus,
.card .card-body:hover .attribution,
.card .card-body .attribution:focus,
.new-tweets-bar,
.onebox .soccer ul.ticker a:hover,
.onebox .soccer ul.ticker a:focus,
.remove-background-btn,
.stream-item-activity-notification .latest-tweet .tweet-row a:hover,
.stream-item-activity-notification .latest-tweet .tweet-row a:focus,
.stream-item-activity-notification .latest-tweet .tweet-row a:hover b,
.stream-item-activity-notification .latest-tweet .tweet-row a:focus b {
color: #118C3C;
}
#global-actions > li > a {
border-bottom-color: #118C3C;
}
#global-actions > li:hover > a,
#global-actions > li > a:focus,
.nav.right-actions > li > a:hover,
.nav.right-actions > li > button:hover,
.nav.right-actions > li > a:focus,
.nav.right-actions > li > button:focus {
color: #118C3C;
}
/* Surpress the new connect glow if in experiment. */
#global-actions .people.new:before {
content: none;
}
/* hover state for found media items */
.FoundMediaSearch--keyboard .FoundMediaSearch-focusable.is-focused {
border-color: #118C3C;
}
/* hover state for photo select button*/
.photo-selector:hover .btn,
.icon-btn:hover,
.icon-btn:active,
.icon-btn.active,
.icon-btn.enabled {
border-color: #118C3C;
border-color: rgba(17,140,60,.5);
color: #118C3C;
}
/* hover state for photo select button*/
.photo-selector:hover .btn,
.icon-btn:hover {
background-image: linear-gradient(rgba(255,255,255,0), rgba(17,140,60,.1));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00FFFFFF', endColorstr='#19118C3C'); /* IE8-9 */
}
.icon-btn.disabled,
.icon-btn.disabled:hover,
.icon-btn[disabled],
.icon-btn[aria-disabled=true] {
color: #118C3C;
}
/* tweet-btn can have primary-btn class as well so the following rules ensure that the correct background color is applied */
.tweet-btn,
.tweet-btn:focus {
background-color: #118C3C;
background: rgba(17,140,60,.8);
}
.tweet-btn:hover,
.tweet-btn:active,
.tweet-btn.active {
background-color: #118C3C;
}
.tweet-btn.btn.disabled,
.tweet-btn.btn.disabled:hover,
.tweet-btn.btn[disabled],
.tweet-btn.btn[aria-disabled=true] {
background: #118C3C;
}
.btn:focus,
.btn.focus,
.Button:focus {
box-shadow:
0 0 0 1px #fff,
0 0 0 3px rgba(17, 140, 60, 0.5);
}
.selected-stream-item:focus {
box-shadow: 0 0 0 3px rgba(17, 140, 60, 0.5);
}
/* highlighting when navigate through timeline stream table view with j & k. */
.js-navigable-stream.stream-table-view .selected-stream-item[tabindex="-1"]:focus {
outline: 3px solid rgba(17, 140, 60, 0.5) !important;
}
/* box-shadow does not work with table tr element */
.js-navigable-stream.stream-table-view .selected-stream-item:focus {
box-shadow: none;
}
/**
* 1. Bring actionable tweet to top when active to ensure border
* highlighting wraps entire tweet. Value must be at least at if not
* higher than the z-index value of ProfileHeading to ensure first
* tweet in timeline receives border on all four sides.
* NOTE: z-index should be 2 to avoid conflicts with .ProfileCanopy and .ProfileCard-avatarLink
*/
.js-stream-item.is-selected:focus .ProfileCard,
.QuoteTweet:hover,
.QuoteTweet:focus,
.QuoteTweet:active,
.activity-user-profile-content:hover,
.activity-user-profile-content:focus,
.activity-user-profile-content:active {
border-color: rgba(17, 140, 60, 0.5);
z-index: 2; /* 1 */
}
.global-dm-nav.new.with-count .dm-new {
background: #fff;
}
.global-dm-nav.new.with-count .dm-new .count-inner {
background: #118C3C;
}
.global-nav .people .count .count-inner {
background: #118C3C;
}
.dropdown-menu li > a:hover,
.dropdown-menu li > a:focus,
.dropdown-menu .dropdown-link:hover,
.dropdown-menu .dropdown-link:focus,
.dropdown-menu .dropdown-link.is-focused,
.dropdown-menu li:hover .dropdown-link,
.dropdown-menu li:focus .dropdown-link,
.dropdown-menu .typeahead-recent-search-item.selected,
.dropdown-menu .typeahead-saved-search-item.selected,
.dropdown-menu .selected a,
.dropdown-menu .dropdown-link.selected {
background-color: #118C3C !important;
}
/* give tweet boxes 10% of the users link color as background */
.home-tweet-box,
.RetweetDialog-commentBox,
.WebToast-box--altColor,
.content-main .conversations-enabled .expansion-container .inline-reply-tweetbox {
background-color: #E7F3EB;
}
.conversations-enabled .inline-reply-caret .caret-inner {
border-bottom-color: #E7F3EB;
}
.top-timeline-tweetbox .timeline-tweet-box .tweet-form.condensed .tweet-box {
color: #118C3C;
}
/* give tweet box containers an outline using the users link color */
.RichEditor {
border-color: #C3E2CE;
}
/* give tweet boxes an outline using the users link color */
.tweet-compose-errors {
border-color: rgba(17,140,60,0.25);
}
input:focus,
textarea:focus,
div[contenteditable="true"]:focus,
div[contenteditable="true"].fake-focus {
border-color: #70BA8A;
box-shadow: inset 0 0 0 1px rgba(17, 140, 60, 0.7);
}
.tweet-box textarea:focus,
.tweet-box input[type=text],
.currently-dragging .tweet-form.is-droppable .tweet-drag-help,
.tweet-box[contenteditable="true"]:focus,
.RichEditor.is-fakeFocus {
border-color: #9FD1B1;
box-shadow: none;
}
s,
.pretty-link:hover s,
.pretty-link:focus s,
.stream-item-activity-notification .latest-tweet .tweet-row a:hover s,
.stream-item-activity-notification .latest-tweet .tweet-row a:focus s {
color: #70BA8A;
}
.vellip,
.vellip:before,
.vellip:after,
.conversation-module > li:after,
.conversation-module > li:before,
.ThreadedConversation-tweet ~ .ThreadedConversation-tweet:before,
.ThreadedConversation-tweet:after,
.ThreadedConversation-viewOther:before,
.ThreadedConversation-unavailableTweet:before,
.ThreadedConversation-unavailableTweet:after {
background-color: #70BA8A;
}
.tweet .sm-reply,
.tweet .sm-rt,
.tweet .sm-fav,
.tweet .sm-image,
.tweet .sm-video,
.tweet .sm-audio,
.tweet .sm-geo,
.tweet .sm-in,
.tweet .sm-trash,
.tweet .sm-more,
.tweet .sm-page,
.tweet .sm-embed,
.tweet .sm-summary,
.tweet .sm-chat,
.timelines-navigation .active .profile-nav-icon,
.timelines-navigation .profile-nav-icon:hover,
.timelines-navigation .profile-nav-link:focus .profile-nav-icon,
.sm-top-tweet,
.metadata a.tweet-geo-text:hover .sm-geo {
background-color: #118C3C;
}
.enhanced-mini-profile .mini-profile .profile-summary {
background-image: url(https://pbs.twimg.com/profile_banners/20070025/1451740160/mobile);
}
.wrapper-profile .profile-card.profile-header .profile-header-inner {
background-image: url(https://pbs.twimg.com/profile_banners/20070025/1451740160/web);
}
#global-tweet-dialog .modal-header {
border-bottom: solid 1px rgba(17, 140, 60, .25);
}
#global-tweet-dialog .modal-tweet-form-container {
background-color: #118C3C;
background: rgba(17, 140, 60, .1);
}
.inline-reply-tweetbox {
background-color: #E7F3EB;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment