Skip to content

Instantly share code, notes, and snippets.

@fnky

fnky/news.ycombinator.com.css

Last active January 13, 2023 23:32
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save fnky/4138a3610d5a53be6eaada083acd4be8 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save fnky/4138a3610d5a53be6eaada083acd4be8 to your computer and use it in GitHub Desktop.
Download ZIP
Stylus Dark theme for Hacker News
Raw
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment