Some really quick hacked together Stylish styles for Lemmy, sort of in the style of old.reddit.com
Some really quick hacked together Stylish styles for Lemmy, sort of in the style of old.reddit.com
h5, .h5{
font-size: 1rem !important;
}
.post-title h5{
font-size:0.9rem !important;
}
.btn {
font-size:0.75rem !important;
}
#app > .mt-4 > .container-lg hr.my-3 {
display: none;
}
#app > div > .container-lg {
max-width: 100% !important;
}
#app > nav > .container-lg {
max-width: 100% !important;
}
.post-listing{
background-color: rgba(255,255,255,0.023);
margin: 0.4rem 0 !important;
padding: 0.3rem 1rem !important;
border: solid 1px rgba(255,255,255,0.2);
border-radius:0.5rem;
}
/* user profile listing */
.container-lg > .row > .col-12 > div > div > .comments > .comment {
/*background-color: rgba(255,255,255,0.023);
margin: 0.4rem 0 !important;
padding: 0.3rem 1rem !important;
border: solid 1px rgba(255,255,255,0.2);
border-radius:0.5rem;*/
}
.container-lg > .row > .col-12 > div > div > .comments > .comment > .details{
/*padding:0 !important;
margin:0 !important;*/
}
.container-lg > .row > .col-12 > div > div > .comments > .comment > .details > div > div:first-child{
display:flex !important;
width:100%;
}
.container-lg > .row > .col-12 > div > div > .comments > .comment > .details > div > div:first-child > a.mr-2{
flex:1;
}
/* bottom row of post listing right (comments, star, etc.) */
.post-listing .row .col-12 .d-flex:last-child{
margin-bottom:0 !important;
}
.post-listing picture img.rounded-circle{
width:1.25rem;
height:1.25rem;
}
.post-listing .d-none .row .col-sm-2 {
max-width:150px;
}
.post-listing .d-none .row .col-sm-9 {
display:flex;
align-items:center;
}
#app > .mt-4.p-0.fl-1 {
margin-top:0rem !important;
}
#app > .mt-4 > .container-lg {
margin:0;
padding:0;
}
/* post index layout */
#app > .mt-4 > .container-lg > .row {
display: flex;
flex-wrap:nowrap;
margin: 0 !important;
}
#app > .mt-4 > .container-lg > .row > main {
display: flex;
flex-wrap:wrap;
flex-basis:calc(100% - 450px);
max-width:100%;
}
/* post layout */
#app > .mt-4 > .container-lg > .row > aside{
display: flex;
flex-basis:450px;
font-size:0.7rem;
}
#app > .mt-4 > .container-lg > .row > .col-md-8 {
width:calc(100% - 450px);
}
#app > .mt-4 > .container-lg > .row > .col-md-4 {
width:450px;
}
.comments .comments {
border-left: solid 1px rgba(255,255,255,0.15);
}
.comment {
margin-left: 1rem !important;
}
.comment .details > div > div > .md-div > p {
font-size:0.9rem;
}
.comment .comment-node {
background-color:rgba(255,255,255,0.028);
border:solid 1px rgba(255,255,255,0.3);
margin-bottom:3px;
padding:0.25rem 0.5rem !important;
border-radius:0.5rem;
}
.comment-node > .ml-2 {
margin:0 !important;
}
.main-content-wrapper{
width:100%;
}
.vote-bar{
max-width:80px;
}
.navbar-light .navbar-nav .nav-link {
background-color: rgba(255,255,255,0.03);
margin-right: 0.5rem;
}
I'll probably keep tweaking these, stay tuned.
This is cool, have you considered contributing it to lemmy-ui as a theme? https://github.com/LemmyNet/lemmy-ui/tree/main/src/assets/css/themes
Worth a shot, bit of work to be done besides just the CSS
cheers for this
i detest having content centered, so having this style + 80% magnification definitely sates my burning hatred for modern ui design
This is great, thank you! It feels more like old-reddit, as you said, and I think having this option would make it even easier for people to transition to Lemmy. Well done!
Thanks. But how can we use this?
You use an extension like Stylish to graft the CSS onto your favorite Lemmy instance's CSS. Until they move everything around and it breaks at least.
Oh that's exactly what I've been wanting! Just added it into my instance's default theme. Thanks!
Might want to create a git repo for this (maybe other themes) and get it converted to a full fledged theme for lemmy. I tacked your changes onto the end of the darkly-red theme and seems to look nice. I was just too lazy to remove the bits from the original theme. A git repo would be good though since a lot of the responses suggest coming back for updates. Git will let people know if there is a change and they can see what they are as they change.
Yeah, I'm working on pushing some changes into lemmy-ui right now to make themes in general work. It might not even be far from there to getting user-contributed themes baked into the main lemmy-ui and being user selectable.
Note Lemmy has a serious lack of properly marked up HTML, things like ".post-listing .title" don't exist so there are nasty CSS selectors included here.
I added this to make the gap between posts smaller.
.my-3 { margin-bottom: 0.2rem !important; margin-top: 0.2rem !important; }edit: For some reason this doesn't seem to work on some instances, not sure why.
If you're looking for the hr my CSS is actually hiding those and doing margin+padding on the posts:
#app > .mt-4 > .container-lg hr.my-3 { display: none; }although the selector may be too specific. IDK what "my-3" is but figured it might be too general.
Yeah it's the hr, which somehow i can still see. I have the same css on startrek.website and while it's still not hidden there, setting the margin does work, but not on lemmy.world for some reason. I can see that both sites have the same class for the hr (my-3), so i'm kinda stumped at the moment.
I also added the following to change the width and spacing of columns, and again it works on startrek.website, but not on lemmy.world. It's really strange.
.container,.container-lg,.container-md,.container-sm,.container-xl { max-width:1540px } .col-md-4 { flex: 0 0 25%; max-width: 25% } .col-md-8 { flex: 0 0 75%; max-width: 75% }
Honestly I, like most casual users, don't care about the drama. I'll go with both but mainly use whatever is more active and user friendly. I think it's silly how much stake into this the bandwagon has put into it. If you're not a developer or a mod that has put a lot of time into it it doesn't really affect the rest of us.
I personally like how things are currently. A local front page for the instance I’m apart of and a front page of communities I subscribe to. If I want to see what’s going on in other instances I can go visit those.
This doesn't change that, it's just that user styles only apply to a specific domain (usually).