31
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.
I added this to make the gap between posts smaller.
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:
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.
One of the versions I had up had ">" instead of ">". Current version should be working on startrek.website.
Also you probably need semicolons on each line with a property assignment.
I can't believe i left out semicolons. Sadly it changed nothing though. But it's weird, as i continued to screw with it, i refreshed after some random change, and suddenly everything worked. Then i refreshed again and it went back to not working. No changes, just another refresh. And i do see my values in the live css in the inspector. That seems to indicate that reality as i perceive it is a lie and i'm likely the subject of an experiment that's being conducted by beings living in a reality that's outside the realm of my awareness or comprehension.