Share your CSS, discuss themes/styles/the site's default look/whatever.
I just picked random elements and edited them until it worked, because I couldn't take this GNOMEd infinite whitespace new reddit look even for 30 minutes. My CSS is garbage, relies on a 1080p desktop browser, is probably full of code that does nothing or doesn't need to be as specific, might actually break one or two site functions, etc. but at least it doesn't violate my eyes anymore.
There is a list of defined colors (like --primary-dark1) that comes from the theme, but I don't see how to change them manually except one by one using more CSS. I use the default ("TheMotte") one.
Keep in mind, de gustibus non est disputandum. I'm mostly posting this so others can iterate faster and make proper good-looking themes. If you want to have slim text without the cringe inconsistent layout/color changes and are in a hurry, reading the comments and deleting the sections you don't want should most likely work.
/*unbold buttons*/
.btn {
font-weight: 400 !important;
}
/*hide "is a reply to comment by" link on every single subcomment*/
div > .ml-2 {
display: none !important;
}
/*reorder upvote buttons / userinfo / contents*/
.comment-anchor {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 0px 8px;
padding: 1px;
}
.comment-anchor div:nth-child(1) {
order: 1;
}
.comment-anchor div:nth-child(2) {
order: 3;
flex: 1 100%;
}
.comment-anchor div:nth-child(3) {
order: 2;
}
/*colors*/
body > .container {
background-color: #C0C0C8 !important;
}
#thread, #userpage {
background-color: #C0C0C8;
}
.comment-section {
background-color: #F0F0F8;
}
/*add borders, make slim*/
.comment {
margin-top: 0.1rem !important;
border: 1px solid var(--primary-dark1);
margin-bottom: 1px;
}
.comment .comment-collapse-desktop {
padding-right: 8px !important;
border-left: 1px solid var(--primary-dark1) !important;
}
/*small gap between comments for readability*/
.comment-section > .comment {
margin-bottom: 5px;
}
/*smaller font, spacing, limit post width*/
p {
font-size: 12px;
margin-top: 0.4rem;
margin-bottom: 0.4rem;
max-width: 900px;
}
/*misc whitespace removal*/
body > .container {
max-width: 1850px;
}
.comment-collapse-icon {
margin-left: -2px;
}
.upvote-button, .downvote-button {
padding-left: 1px !important;
padding-right: 1px !important;
}
.user-info {
margin-bottom: 0 !important;
}
.comment .comment-body .comment-text {
margin-bottom: 0.1rem;
padding-right: 1px !important;
padding-top: 1px !important;
}
blockquote {
padding-top: 0;
padding-bottom: 0;
padding-left: 0.3rem;
}
blockquote > p {
padding-top: 0;
padding-bottom: 0;
margin-top: 0;
margin-bottom: 0;
}
.comment-body > .comment-anchor {
padding: 1px;
}
.comment-actions {
padding: 1px;
margin: -3px;
}
Jump in the discussion.
No email address required.
Notes -
I think this is as good as I am able and willing to do.
I simplified the CSS that I previously had running via a third-party extension so that it could now also work on phones.
The biggest limitation I found, besides my complete lack of experience, was the 4000 character limit for your custom CSS. The code is ugly and I couldn't fit in comments.
There are obviously bugs and inconsistencies. When in mobile view, for example, the reply icon and ellipses under comments are not correctly sized. Etc.
Screenshots of the phone view, since desktop looks pretty much the same:
https://i.imgur.com/ETmtedp.png
https://i.imgur.com/WBBTI1G.png
CSS: https://pastebin.com/uEpiS39e
Edit: Apparently you can compress code!!
More options
Context Copy link