←back to thread

Two HN Announcements

(blog.ycombinator.com)
698 points tilt | 3 comments | | HN request time: 0.265s | source
1. blakeyrat ◴[] No.10300342[source]
If improvements are in the pipeline, can you make the "vote up" link not look like a disclosure triangle?

I've hit that thing by accident several times trying to expand open comments because it's the exact same icon most applications use for disclosure triangles, and it's at the exact same part of the post most sites put it-- and there's no way to undo an accidental click of it (as far as I am aware.)

Just a suggestion.

replies(2): >>10300826 #>>10302744 #
2. sjwright ◴[] No.10300826[source]
And while you're at it, maybe replace the gifs with unicode? ▲ ▼
3. jcr ◴[] No.10302744[source]
Using the "Stylish" plugin or similar custom CSS injection, you can substantially change how vote links look, along with adding space between their placement.

My vote links read '▲sig' for up-vote (signal), and empty line of separation, and then '▼din' for down-vote (noise).

  /* remove arrow background images */
  /* XXX Bug in chrome/webkit requires padding or margin */
  div[title="upvote"],
  div[title="downvote"] {
    margin:  0px !important;
    padding: 0px !important;
    padding-right: 1ex !important;
    text-align: center !important;
    display: inline !important;
    white-space: pre;
    background: none !important;
    background-image:  none !important;
    -moz-transform:    none !important;
    -webkit-transform: none !important;
    -o-transform:      none !important;
    -ms-transform:     none !important;
    transform:         none !important;
    /* width: 6ex !important; */
    /* width: 1ex !important; */
    /* margin-right: 10px !important; */
  }
  /* use unicode text arrows */
  div[title="upvote"]:after {
    content: '▲sig' !important;
  }
  div[title="downvote"]:after {
    content: '\A\A▼din' !important;
  }
  /* color unicode arrow text green-up, red-down */
  a[id^="up"] {
    color: #009900 !important;
  }
  a[id^="down"] {
    color: #990000 !important;
  }
  /* highlight arrows on hover */
  a[id^="up"]:hover {
    color: #00ff00 !important;
  }
  a[id^="down"]:hover {
    color: #ff0000 !important;
  }