Some really quick hacked together Stylish styles for Lemmy, sort of in the style of old.reddit.com ()

submitted 1 year ago* (last edited 1 year ago) by dx1@lemmy.world to c/lemmyworld@lemmy.world

21 comments fedilink hide all child comments

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.

you are viewing a single comment's thread
view the rest of the comments

[-] ifDogsCouldTalk@lemmy.click 2 points 1 year ago

Thanks. But how can we use this?