(User stylesheet) Twitter: show @usernames instead of display names

twitter-show-usernames.css

@namespace url(http://www.w3.org/1999/xhtml);

/* (CC-BY) Storlek - https://twitter.com/SwedishForSize
Drop this into Stylish or similar. */

@-moz-document domain("twitter.com") {

  .context .pretty-link,
  .social-context .pretty-link,
  .stream-item-activity-line-notification .pretty-link {
    /* normally just make it black like most text. */
    font-size: 1px;
    letter-spacing: -1px;
    visibility: hidden;
  }
  .context .pretty-link {
    /* "<user> retweeted" or "<user> follows" prior to a tweet
    these are never underlined, and inherit the color of the parent element */
  }
  .social-context .pretty-link {
    /* "Followed by <user>" in the "Who to follow" list
    (in this case, the text is wrapped in a <b> within the <a>)
    these are underlined on hover, and use the standard link color;
    the <a> gets a grey style and the <b> is actually what gets the link color
    ... which is kind of a bummer, because we can't grab the href= attribute from within
    styling the <b> inside it - so we end up losing the link color; and it's also not
    really possible to restore the link color from the greyish that it's styled to.
    so instead, we'll just use black so it stands out at least a little. */
    color: black;
  }
  .stream-item-activity-line-notification .pretty-link {
    /* "<user> followed you / retweeted you / etc."
    (in this case, the text is wrapped in a <strong> within the <a>)
    these are bold and black, and are underlined and link-color on hover. */
    color: black;
  }
  .social-context .pretty-link:hover:after,
  .stream-item-activity-line-notification .pretty-link:hover:after {
    text-decoration: underline;
  }
  .stream-item-activity-line-notification .pretty-link:after {
    /* let's not style the @ bold, it's a bit unwieldy */
    font-weight: bold;
  }

  .pretty-link:before,
  .pretty-link:after {
    font-size: 13px;
    letter-spacing: normal;
    visibility: visible;
  }
  /* the notifications page uses a slightly larger font */
  .stream-item-activity-line-notification .pretty-link:before,
  .stream-item-activity-line-notification .pretty-link:after {
    font-size: 14px;
  }

  .context .pretty-link:before,
  .social-context .pretty-link:before,
  .stream-item-activity-line-notification .pretty-link:before {
    content: '@';
  }
  .context .pretty-link:after,
  .social-context .pretty-link:after,
  .stream-item-activity-line-notification .pretty-link:after {
    content: attr(href);
    /* shove the leading slash in the url over, and hide it */
    text-indent: -4px;
    /* not sure why it needs to be nudged up like this, and especially why it needs
    four POINT FIVE pixels of nudging. css is bizarre */
    margin-bottom: 4.5px;
    overflow-x: hidden;
    display: inline-block;
    vertical-align: bottom;
  }
}