Hacker News looks terrible. This style makes Hacker News look a whole lot better!
Improved Hacker News by colebot
Details
Authorcolebot
LicenseCC BY-SA - Creative Commons Attribution-ShareAlike
Categorynews.ycombinator.com
Created
Updated
Size1.9 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
v.1.0.0-
I built this style in about 15 minutes.
Source code
/* ==Userstyle==
@name Better Hacker News
@namespace news.ycombinator.com
@version 1.0.0
@description Hacker News looks terrible. This style makes Hacker News look a whole lot better!
@author Cole Ruth
==/Userstyle== */
@-moz-document domain("news.ycombinator.com") {
body {
background-color: #e0e0e0;
font-family: sans-serif;
}
#hnmain {
background-color: white;
box-shadow: 0 0 15px #cecece;
padding: 10px;
border-radius: 18px;
}
#hnmain > tbody > tr:nth-child(1) {
display: none;
}
#hnmain > tbody > tr:nth-child(2) > td {
padding: 10px;
border-radius: 10px;
background: linear-gradient(90deg, #ff6600, #ff4400)
}
#hnmain > tbody > tr:nth-child(2) > td > table > tbody > tr > td:first-child {
padding-right: 10px!important;
}
#hnmain > tbody > tr:nth-child(2) > td > table > tbody > tr {
text-transform: capitalize;
}
.pagetop,
.pagetop a:link {
color: white;
}
.pagetop a:visited {
color: white;
}
#pagespace {
height: 20px!important;
}
.spacer {
height: 15px!important;
}
.athing .votelinks a .votearrow {
margin-left: 5px;
margin-right: 8px
}
.title:has(.morelink) {
padding: 10px 0;
margin-bottom: 15px;
display: inline-block;
}
.morelink {
background-color: #e0e0e0;
padding: 10px;
border-radius: 10px;
}
.morelink:hover {
background-color: #cecece;
}
.morelink:visited {
color: black;
}
.morelink::after {
content: "▶";
margin-left: 8px;
}
form {
background-color: white;
padding: 10px;
border-radius: 10px;
display: inline-block;
box-shadow: 0 0 15px #cecece;
text-transform: capitalize;
}
textarea,
button,
input {
background-color: #e0e0e0;
border: none;
border-radius: 5px;
padding: 10px;
text-transform: capitalize;
}
a[href=forgot] {
display: block;
}
}