Stylus Dark theme for Hacker News

news.ycombinator.com.css

:root {
  --color-scale-black: hsl(0, 0%, 3.5%);
  --color-scale-white: #ffffff;
  --color-scale-gray-1: hsl(0, 0%, 8.5%);
  --color-scale-gray-2: hsl(0, 0%, 11.0%);
  --color-scale-gray-3: hsl(0, 0%, 13.6%);
  --color-scale-gray-4: hsl(0, 0%, 15.8%);
  --color-scale-gray-5: hsl(0, 0%, 17.9%);
  --color-scale-gray-6: hsl(0, 0%, 20.5%);
  --color-scale-gray-7: hsl(0, 0%, 24.3%);
  --color-scale-gray-8: hsl(0, 0%, 31.2%);
  --color-scale-gray-9: hsl(0, 0%, 43.9%);
  --color-scale-gray-10: hsl(0, 0%, 49.4%);
  --color-scale-gray-11: hsl(0, 0%, 62.8%);
  --color-scale-gray-12: hsl(0, 0%, 93.0%);
  --color-scale-blue-1: hsl(212, 35.0%, 9.2%);
  --color-scale-blue-2: hsl(216, 50.0%, 11.8%);
  --color-scale-blue-3: hsl(214, 59.4%, 15.3%);
  --color-scale-blue-4: hsl(214, 65.8%, 17.9%);
  --color-scale-blue-5: hsl(213, 71.2%, 20.2%);
  --color-scale-blue-6: hsl(212, 77.4%, 23.1%);
  --color-scale-blue-7: hsl(211, 85.1%, 27.4%);
  --color-scale-blue-8: hsl(211, 89.7%, 34.1%);
  --color-scale-blue-9: hsl(206, 100%, 50.0%);
  --color-scale-blue-10: hsl(209, 100%, 60.6%);
  --color-scale-blue-11: hsl(210, 100%, 66.1%);
  --color-scale-blue-12: hsl(206, 98.0%, 95.8%);

  --color-bg-default: var(--color-scale-gray-1);
  --color-fg-default: var(--color-scale-gray-12);
  --color-fg-muted: var(--color-scale-gray-9);
  --color-fg-subtle: var(--color-scale-gray-11);

  --color-page-header-bg: var(--color-scale-blue-1);

  --color-input-text: var(--color-scale-gray-12);
  --color-input-bg: var(--color-scale-gray-1);
  --color-input-border: var(--color-scale-gray-5);
  --color-input-focus-border: var(--color-scale-gray-7);

  --color-btn-text: var(--color-scale-gray-11);
  --color-btn-bg: var(--color-scale-gray-4);
  --color-btn-border: var(--color-scale-gray-5);
  --color-btn-shadow: 0 1px 0 rgba(27, 31, 36, 0.04);
  --color-btn-inset-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
  --color-btn-hover-bg: var(--color-scale-gray-1);
  --color-btn-hover-border: var(--color-scale-gray-2);
  --color-btn-active-bg: var(--color-scale-gray-3);
  --color-btn-active-border: var(--color-scale-gray-4);
  --color-btn-selected-bg: hsla(220, 14%, 94%, 1);
  --color-btn-focus-bg: var(--color-scale-gray-11);
  --color-btn-focus-border: var(--color-scale-gray-7);
  --color-btn-focus-shadow: 0 0 0 3px rgba(9, 105, 218, 0.3);
  --color-btn-shadow-active: inset 0 0.15em 0.3em rgba(27, 31, 36, 0.15);
  --color-btn-shadow-input-focus: 0 0 0 0.2em rgba(9, 105, 218, 0.3);

  --color-text-list-number: var(--color-scale-gray-10);

  --color-link-text: var(--color-scale-gray-12);
  --color-link-visited-text: var(--color-scale-gray-10);
  --color-link-hover-text: var(--color-scale-gray-11);

  --color-subtext: var(--color-scale-gray-8);
  --color-subtext-link-text: var(--color-scale-gray-10);
  --color-subtext-link-visited-text: var(--color-scale-gray-8);
  --color-subtext-link-hover-text: var(--color-scale-gray-10);

  --body-font-size: 14px;
  --caption1-font-size: 12px;

  --default-transition: 150ms ease-in-out;
  --subtle-transition: 80ms ease-in-out;

  font-size: var(--body-font-size);
}

html {
  color-scheme: dark;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  font-size: var(--body-font-size, 14px);
  line-height: 1.5;
  color: var(--color-fg-default);
  background-color: var(--color-bg-default);
  width: min(120ch, 100vw - 1rem);
  margin: 0 auto;
  padding: 1rem 0;
}

/**
 * Main container
 */
#hnmain {
  background-color: transparent;
  min-width: auto;
  padding: 0;
  width: 100%;
}

/**
 * Top-level selectors
 */
td {
  font: inherit;
  font-size: var(--body-font-size);
  color: var(--color-fg-muted);
}

.admin td {
  font: inherit;
  font-size: var(--body-font-size);
}

.subtext td {
  font: inherit;
  font-size: var(--caption1-font-size);
}

input {
  font: inherit;
  color: var(--color-input-text);
  background-color: var(--color-input-bg);
  border: 1px solid var(--color-input-border);
  border-radius: 6px;
  padding: 3px 6px;
  transition: var(--subtle-transition);
  transition-property: color, box-shadow, border-color;
  outline: 0;
}

input:focus {
  border-color: var(--color-input-focus-border);
  box-shadow: var(--color-btn-focus-shadow);
}

input[type="submit"] {
  font: inherit;
  color: var(--color-btn-text);
  background-color: var(--color-btn-bg);
  border: 1px solid var(--color-btn-border);
}

input[type="submit"]:active {
  background-color: var(--color-btn-active-bg);
  border-color: var(--color-btn-active-border);
}

input[type="submit"]:focus {
  background-color: var(--color-btn-focus-bg);
  border-color: var(--color-btn-focus-border);
}

textarea {
  font: inherit;
  font-size: var(--body-font-size);
  border: 1px solid var(--color-input-border);
  background: var(--color-input-bg);
  border-radius: 6px;
  outline: none;
  padding: 6px;
  transition: var(--subtle-transition);
  transition-property: color, box-shadow, border-color;
}

textarea:focus {
  border-color: var(--color-input-focus-border);
  box-shadow: var(--color-btn-focus-shadow);
}

/**
 * Links
 */
a:link {
  color: var(--color-link-text);
  text-decoration: none;
}
a:hover {
  color: var(--color-link-hover-text);
}
a:visited {
  color: var(--color-link-visited-text);
  text-decoration: none;
}

.default {
  font: inherit;
  font-size: var(--body-font-size);
  color: var(--color-fg-default);
}

.default p {
  line-height: 1.75;
}

.admin {
  font: inherit;
  font-size: var(--body-font-size);
  color: var(--color-fg-default);
}

/**
 * Titles and title numbers.
 */
.title {
  font: inherit;
  font-size: var(--body-font-size);
  color: var(--color-text-list-number);
  overflow: hidden;
}

.title a {
  color: var(--color-link-text);
  transition: var(--subtle-transition);
  transition-property: color;
}

.title a:hover {
  color: var(--color-link-hover-text);
}

.title a:visited {
  color: var(--color-link-visited-text);
}

.rank {
  font: inherit;
  font-variant-numeric: tabular-nums;
}

.subtext {
  font: inherit;
  font-size: var(--caption1-font-size);
  color: var(--color-fg-muted);
  line-height: 1.5;
}

.yclinks {
  font: inherit;
  font-size: var(--body-font-size);
  color: var(--color-fg-muted);
}

.yclinks a:link,
.yclinks a:visited {
  color: var(--color-link-visited-text);
}

/**
 * Page header
 */
.pagetop {
  font: inherit;
  font-size: var(--body-font-size);
  color: inherit;
  line-height: 1.5;
}

.comment {
  font: inherit;
  font-size: var(--body-font-size);
  line-height: 1.5;
}

.hnname {
  margin-right: 5px;
}

.reply a {
  font: inherit;
  font-size: 13px;
  text-decoration: none;
  color: var(--color-btn-text) !important;
  background-color: var(--color-btn-bg);
  border: 1px solid var(--color-btn-border);
  border-radius: 6px;
  padding: 3px 6px;
  transition: var(--subtle-transition);
  transition-property: color, box-shadow, border-color;
  outline: 0;
  cursor: default;
  user-select: none;
}

.reply a:active {
  background-color: var(--color-btn-active-bg);
  border-color: var(--color-btn-active-border);
}

.reply a:focus {
  background-color: var(--color-btn-focus-bg);
  border-color: var(--color-btn-focus-border);
}

.reply p {
  line-height: 2 !important;
}

.reply u, .reply a {
  text-decoration: none !important;
}

/**
 * Comment styles
 */
.c00,
.c00 a:link {
  color: var(--color-fg-default);
}
.c00 a:visited {
  color: var(--color-link-visited-text);
}
.c5a,
.c5a a:link,
.c5a a:visited {
  color: #5a5a5a;
}
.c73,
.c73 a:link,
.c73 a:visited {
  color: #737373;
}
.c82,
.c82 a:link,
.c82 a:visited {
  color: #828282;
}
.c88,
.c88 a:link,
.c88 a:visited {
  color: #888888;
}
.c9c,
.c9c a:link,
.c9c a:visited {
  color: #9c9c9c;
}
.cae,
.cae a:link,
.cae a:visited {
  color: #aeaeae;
}
.cbe,
.cbe a:link,
.cbe a:visited {
  color: #bebebe;
}
.cce,
.cce a:link,
.cce a:visited {
  color: #cecece;
}
.cdd,
.cdd a:link,
.cdd a:visited {
  color: #dddddd;
}

.pagetop a:visited {
  color: var(--color-link-visited-text);
}
.topsel a:link,
.topsel a:visited {
  color: var(--color-link-text);
}

.subtext a:link,
.subtext a:visited {
  color: var(--color-subtext-link-text);
}
.subtext a:hover {
  text-decoration: underline;
}

/**
 * Comment heads and braces `()` in domains within titles.
 */
.comhead {
  font: inherit;
  font-size: var(--caption1-font-size);
  color: var(--color-fg-subtle);
  line-height: 1.5;
}

.comhead a:link {
  color: var(--color-fg-subtle);
}
.comhead a:hover {
  text-decoration: underline;
}


.hnmore {
  text-decoration: underline;
}
.hnmore a:link,
a:visited {
  color: var(--color-link-visited-text);
}
.hnmore a:hover {
  color: var(--color-link-hover-text);
}

a.morelink:link,
a.morelink:visited {
  color: var(--color-fg-muted);
}

a.morelink:hover {
  color: var(--color-link-hover-text);
}

.default p {
  margin-top: 8px;
  margin-bottom: 0px;
  line-height: 1.5;
}

.pagebreak {
  page-break-before: always
}

pre {
  overflow: auto;
  padding: 2px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: "JetBrains Mono", Menlo, monospace;
  font-size: 0.9375em;
  line-height: 1.5;
}

pre:hover {
  overflow: auto;
}

.votearrow {
  width: 0px;
  height: 0px;
  border: 0px;
  margin: 0;
  background: none;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 12px solid var(--color-fg-muted);
  transition: var(--subtle-transition);
  transition-property: border-bottom-color;
}

.votelinks a:hover .votearrow {
  border-bottom-color: var(--color-fg-subtle);
}

.votelinks a {
  display: inline-block;
  margin: 0 4px;
  padding: 3px 4px;
}

.votelinks.nosee div.votearrow.rotate180 {
  display: none;
}

table.padtab td {
  padding: 0px 10px;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
  .votearrow {
    background: none;
  }
}

@media only screen and (min-width: 300px) and (max-width: 750px) {
  .votelinks {
    min-width: auto;
  }

  .votearrow {
    transform: none;
  }
}

/**
 * Special: Ads, items without vote buttons
 */
tr.athing:not(.comtr):has(img[src="s.gif"]),
tr.athing:not(.comtr):has(img[src="s.gif"]) + tr {
  opacity: 0.15;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}

.spacer {
  height: 8px !important;
}


.comment-tree,
.comment-tree table {
  border-spacing: 0px;
  border-collapse: separate;
}

.comtr {
  position: relative;
  transition: var(--subtle-transition);
  transition-property: background-color;
}

.comtr:hover {
  background-color: hsl(208deg, 40%, 11%);
}


.comtr > td {
  position: relative;
  padding: 0;
}

.comtr td:nth-child(3) {
  padding: 2px 0;
}

.comtr .votelinks .votearrow {
  transform: scale(0.9) translateY(2px);
}

.comtr .votelinks a {
  margin: 0;
}

* {
  -webkit-user-select: none;
  user-select: none;
}

.commtext,
.commtext > i,
.commtext > p,
.commtext > a,
.commtext > p i,
.commtext > p a,
.commtext code,
.athing .title a,
.sitebit,
.sitebit .sitestr {
  -webkit-user-select: text;
  user-select: text;
}

/*
 * TODO: Would love to be able to select the last .comtr
 * in a thread to apply fading linear gradient to the lines
 *
 * Since all .comtr are on one level in the DOM, the only way
 * I can think of to select them, would be to match against
 * elements that :has a `.ind` with a certain [indent=""] attribute
 * that is not followed by an element with an indent equal to or higher.
*/
.comtr ~ .comtr .ind {
  position: relative;
  background-image: linear-gradient(to right, var(--color-scale-gray-6) 1px, transparent 1px),
  linear-gradient(to bottom, var(--color-scale-gray-5) 1px, transparent 1px);
  background-size: 40px 100%, 100% 100%;
  background-position: 0 0;
}

.comtr:not(:first-child) {
  background-image: linear-gradient(to bottom, var(--color-scale-gray-5) 1px, transparent 1px);
  background-size: 100% 100%;
  background-position: 0 0;
}

/* 
.comtr:has(.ind[indent="0"]) {
  background-color: rgba(0, 51, 102, 0.02);
}

.comtr:has(.ind[indent="1"]) {
  background-color: rgba(0, 51, 102, 0.04);
}

.comtr:has(.ind[indent="2"]) {
  background-color: rgba(0, 51, 102, 0.06);
}

.comtr:has(.ind[indent="3"]) {
  background-color: rgba(0, 51, 102, 0.08);
}

.comtr:has(.ind[indent="4"]) {
  background-color: rgba(0, 51, 102, 0.1);
}

.comtr:has(.ind[indent="5"]) {
  background-color: rgba(0, 51, 102, 0.12);
}

.comtr:has(.ind[indent="6"]) {
  background-color: rgba(0, 51, 102, 0.14);
}

.comtr:has(.ind[indent="7"]) {
  background-color: rgba(0, 51, 102, 0.16);
}

.comtr:has(.ind[indent="8"]) {
  background-color: rgba(0, 51, 102, 0.18);
}

.comtr:has(.ind[indent="9"]) {
  background-color: rgba(0, 51, 102, 0.2);
}

.comtr:has(.ind[indent="10"]) {
  background-color: rgba(0, 51, 102, 0.22);
}

.comtr:has(.ind[indent="11"]) {
  background-color: rgba(0, 51, 102, 0.24);
}

.comtr:has(.ind[indent="12"]) {
  background-color: rgba(0, 51, 102, 0.26);
}

.comtr:has(.ind[indent="13"]) {
  background-color: rgba(0, 51, 102, 0.28);
}

.comtr:has(.ind[indent="14"]) {
  background-color: rgba(0, 51, 102, 0.3);
}

.comtr:has(.ind[indent="15"]) {
  background-color: rgba(0, 51, 102, 0.32);
}
 */
.comtr .votelinks {
  position: relative;
  border-spacing: 0;
  border-collapse: separate;
  padding: 0;
  margin: 0;
}

.comtr .votelinks a {
  position: relative;
  left: -9.5px;
  top: 1px;
  display: inline-block;
  margin: 0;
  padding: 4px 2px;
  background-color: var(--color-bg-default);
}

.comtr:hover .votelinks a {
  background-color: hsl(208deg, 40%, 11%);
}

/* .comtr ~ .comtr .ind::after, */
/* .comtr ~ .comtr .ind::before, */
.comtr .votelinks::before {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  content: " ";
  border-right: 1px solid var(--color-scale-gray-6);
}

.comtr .votelinks::before {
  bottom: 0;
  top: 24px;
  left: -2px;
}

/**
 * Page header
 */
#hnmain > tbody > tr:first-child {
  opacity: 0.5;
  transition: var(--default-transition);
  transition-property: opacity;
}

#hnmain > tbody > tr:first-child:hover {
  opacity: 1;
}

#hnmain > tbody > tr:first-child > td {
  background: none;
}


#hnmain > tbody > tr:first-child > td > table {
  padding: 8px !important;
}

/**
 * Footer
 */
#hnmain > tbody > tr:not(:has(.fatitem)):last-child {
  opacity: 0.5;
  transition: var(--default-transition);
  transition-property: opacity;
}

#hnmain > tbody > tr:not(:has(.fatitem)):last-child:hover {
  opacity: 1;
}

/**
 * Footer line
 */
#hnmain > tbody > tr:not(:has(.fatitem)):last-child table {
  display: none;
}