prettier hacker news.css

userscript.js

// ==UserScript==
// @name         Hacker News score tagger
// @namespace    http://tampermonkey.net/
// @version      2025-01-24
// @description  try to take over the world!
// @author       vladde
// @match        https://news.ycombinator.com/*
// @icon         https://news.ycombinator.com/y18.svg
// @grant        none
// ==/UserScript==

document.querySelectorAll('span.score').forEach(e => {
    let score = Number(e.innerHTML.split(" ")[0])
    let scoreClass = undefined
    if (score >= 1000) {
        scoreClass = 'epic'
    } else if (score >= 500) {
        scoreClass = 'cool'
    }

    if (scoreClass) {
        e.parentElement
            .parentElement
            .parentElement
            .previousElementSibling
            .classList.add('hn-' + scoreClass)
    }
})

userstyle.css

@-moz-document url-prefix("prettier hacker news") {
:root {
  color-scheme: light dark;

  --hn-content-spacing: 12px;
  --hn-header-background: #ff6600;
  --hn-content-background: #f6f6ef;
  --hn-primary: black;
  --hn-secondary: #828282;
}

:root {
  --hn-palette-0: #000000;
  --hn-palette-1: #5a5a5a;
  --hn-palette-2: #737373;
  --hn-palette-3: #828282;
  --hn-palette-4: #888888;
  --hn-palette-5: #9c9c9c;
  --hn-palette-6: #aeaeae;
  --hn-palette-7: #bebebe;
  --hn-palette-8: #cecece;
  --hn-palette-9: #dddddd;
  --hn-red: #a30000;
}

@media (prefers-color-scheme: dark) {
  :root {
    background: #000;
    --hn-header-background: #f06000;
    --hn-content-background: #111;
    --hn-primary: #d3d3d0;
  }
  
  :root {
    --hn-palette-0: #d3d3d0;
    --hn-palette-1: #c0c0be;
    --hn-palette-2: #aeaeac;
    --hn-palette-3: #9c9c9a;
    --hn-palette-4: #8a8a88;
    --hn-palette-5: #787876;
    --hn-palette-6: #666664;
    --hn-palette-7: #545452;
    --hn-palette-8: #424240;
    --hn-palette-9: #2c2c2a;
    --hn-red: #ff4d4d;
  }
}

.c00, .c00 a:link { color: var(--hn-palette-0);  }
.c5a, .c5a a:link, .c5a a:visited { color: var(--hn-palette-1);  }
.c73, .c73 a:link, .c73 a:visited { color: var(--hn-palette-2);  }
.c82, .c82 a:link, .c82 a:visited { color: var(--hn-palette-3);  }
.c88, .c88 a:link, .c88 a:visited { color: var(--hn-palette-4);  }
.c9c, .c9c a:link, .c9c a:visited { color: var(--hn-palette-5);  }
.cae, .cae a:link, .cae a:visited { color: var(--hn-palette-6);  }
.cbe, .cbe a:link, .cbe a:visited { color: var(--hn-palette-7);  }
.cce, .cce a:link, .cce a:visited { color: var(--hn-palette-8);  }
.cdd, .cdd a:link, .cdd a:visited { color: var(--hn-palette-9);  }
.ca2 { color: var(--hn-red); }


/* colors of everything (dark+light) */
a:link, .admin td {
  color: var(--hn-primary);
}

.comhead a, .subtext a {
  color: var(--hn-secondary);
}

#hnmain {
  min-width: unset;
  background: var(--hn-content-background);
}


/* fix spacing on *almost* small viewports */
@media (max-width: 795px) {
  #hnmain {
    width: 100%;
  }
}


/* spacing */
body {
  margin: 0;
}

#pagespace,
.spacer {
  display: none;
}


/* hide ads */
#hnmain:not(:has(#pagespace[title="jobs"])) tr.athing:not(:has(.votelinks)) {
  opacity: 0.2;

  & + tr,
  & + tr + tr {
    opacity: 0.2;
  }
}


/* header */
#hnmain > tbody > tr:nth-child(1) > td {
  /* remove background color, so we can add padding for spacing */
  background: none;

  & a {
    /* ensure all links stay black */
    color: black;
  }

  & > table {
    border-spacing: 8px;
    background-color: var(--hn-header-background);
    margin-block-end: calc(var(--hn-content-spacing) / 2);

    /* ensure current date or title (if present) is not wrapped and has spacing */
    & > tbody > tr > td:nth-child(2) > span.pagetop > font {
      white-space: nowrap;
      line-height: 1.5;
    }

    /* do not wrap user / logout */
    & > tbody > tr > td:last-child > .pagetop {
      white-space: nowrap;
    }
  }

  /* trunc… longer usernames */
  & a#me {
    display: inline-block;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
  }
}

/* footer */
/* only footers have that weird spacing gif */
#hnmain > tbody > tr:last-of-type > td:has(img[src="s.gif"]) {
  /* remove everything except the footer content (spacing and jank separator) */
  & > :not(:last-child) {
    display: none;
  }

  & > :last-child {
    border-top: 2px solid var(--hn-header-background);
    padding-block-start: var(--hn-content-spacing);
    margin-block-start: var(--hn-content-spacing);
  }
}

/* content */
#hnmain > tbody > tr:nth-child(3) > td > table {
  /* make links use all available space */
  width: 100%;

  /* use as little space as possible for ranking and voting columns */
  & tr.athing > td:nth-of-type(-n+2) {
    width: 0;
  }

  /* leading spacing for each row */
  & tr.athing > td:nth-of-type(1) {
    padding-inline-start: 8px;
  }

  /* vertical spacing for rows, split up into two parts: */
  /* add top spacing for first row … */
  & tr.athing:not(.comtr) > td {
    padding-block-start: calc(var(--hn-content-spacing) / 2);
  }

  /* … and add bottom spacing for the following row */
  & tr.athing:not(.comtr) + tr > td {
    padding-block-end: calc(var(--hn-content-spacing) / 2);
  }
}

/* single post / comment */
table.fatitem {
  /* highlighting breaks up on borders, so remove those */
  border-spacing: 0;
}

/* comments (/newcomments) */
/* the only way to see if we're on the comments section is the check the title of #pagespace. yuck. */
#pagespace[title='New Comments'] + tr > td > table > tbody > tr > td {
  padding-block: var(--hn-content-spacing);
}

/* comment threads (/threads?id=…, comments in /item?id=…) */
tr.athing.comtr > td > table {
  padding-block: calc(var(--hn-content-spacing) / 4);
}

}

@-moz-document url-prefix("https://news.ycombinator.com/") {
/*** additional spice (TEST) ***/
.toptext, .comment {
  max-width: 70ch;
  line-height: 1.5;
}

.ind {
  padding-inline-end: 8px;
  border-inline-end: 1px solid currentColor;
  opacity: 0.2;
}
}

@-moz-document url-prefix("https://news.ycombinator.com/") {
/* specifically for highlighting – requires my javascript snippet */
/* remove this section if you don't have it */
:root {
  /* --hn-nice: #e7e7e0; */
  --hn-cool: #dfdbcc;
  --hn-epic: wheat;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* --hn-nice: #21201e; */
    --hn-cool: #332e2a;
    --hn-epic: #41301f;
  }
}

tr.hn-cool,
tr.hn-cool + tr {
  background: var(--hn-cool);
}

tr.hn-epic,
tr.hn-epic + tr {
  background: var(--hn-epic);
}

}