tildes.css

/*
    Buttons were spread out weirdly.
*/

.topic-info {
    grid-auto-columns: max-content;
    grid-column-gap: 1rem;
}

/*
    Navigation should have a bit more focus so people are more likely to spot it
*/
.tab-listing-order {
    font-size: 0.7rem;
}

.form-listing-options label, 
.form-listing-options select {
    font-size: 0.7rem;
}


/* 
   Give topics a bit more breathing room so it is easier to differentiate them and browse through them. 
*/
.topic-listing > li {
    margin: 0 0 0.2rem 0;
}

.topic {
    padding: 0.4rem;
}


/* 
    Having the vote count buttons jump around on expanding text is a bit annoying.
*/
.topic-voting {
    margin: 0.3rem 0.3rem auto 0.3rem;
}



/*
   Text is the main content here so it probably shouldn't be as tiny as it is now. 
*/

.topic .topic-text-excerpt {
    font-size: 0.8rem;
}

/*
    Expanded text is given a background so it stands out from the rest of the page a bit drawing focus and making it easier to read. 
*/
body .topic-text-excerpt[open] {
    background-color: #eeeeee;
}

body.theme-light .topic-text-excerpt[open] {
    background-color: #eee8d5;

}


body.theme-dark .topic-text-excerpt[open] {
    background-color: #073642;

}

body.theme-black .topic-text-excerpt[open] {
    background-color: #151515;

}



/* 
   To make it fit properly with a background I also made some adjustments to the margins in that area. 
*/

body .topic-text-excerpt[open] summary {
    margin: 0.4rem;
}
body .topic-text-excerpt[open] p {
    margin: 0 0.8rem 0.4rem 0.8rem;
}

body .topic-text-excerpt[open] p:first-of-type {
    margin-top: 0.4rem;
}




/*
   This affects comment background and might have more to do with personal taste. I do however think that formatting nested comments like this makes conversations easier to follow. 

   As a note, I did it now with borders around comments which makes things more clear. It still works very well without borders but then the darker background should be adjusted slightly to be a tad darker. 
*/

.topic-comments>.comment {
    margin-right: 0rem;
}

.comment-replies {
    border-left: 0;
}

/* Default white theme */
body .comment[data-comment-depth="0"],
body .comment .comment .comment,
body .comment .comment .comment .comment .comment,
body .comment .comment .comment .comment .comment .comment .comment,
body .comment .comment .comment .comment .comment .comment .comment .comment .comment {
    background-color: #fff;
    border: solid 1px #c8c8c8;
    

}

.comment .comment,
.comment .comment .comment .comment,
.comment .comment .comment .comment .comment .comment,
.comment .comment .comment .comment .comment .comment .comment .comment,
.comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
    background-color: #f5f5f5;
    border: solid 1px #c8c8c8;;
    margin-right: 0.3rem;
    
}

/* Light theme */
body.theme-light .comment[data-comment-depth="0"],
body.theme-light .comment .comment .comment,
body.theme-light .comment .comment .comment .comment .comment,
body.theme-light .comment .comment .comment .comment .comment .comment .comment,
body.theme-light .comment .comment .comment .comment .comment .comment .comment .comment .comment {
    background-color: #fdf6e3;
    border: solid 1px #eee8d5;
    

}

body.theme-light .comment .comment,
body.theme-light .comment .comment .comment .comment,
body.theme-light .comment .comment .comment .comment .comment .comment,
body.theme-light .comment .comment .comment .comment .comment .comment .comment .comment,
body.theme-light .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
    background-color: #eee8d5;
    border: solid 1px #eee8d5;;
    margin-right: 0.3rem;
    
}


/* Dark theme */
body.theme-dark .comment[data-comment-depth="0"],
body.theme-dark .comment .comment .comment,
body.theme-dark .comment .comment .comment .comment .comment,
body.theme-dark .comment .comment .comment .comment .comment .comment .comment,
body.theme-dark .comment .comment .comment .comment .comment .comment .comment .comment .comment {
    background-color: #002b36;
    border: solid 1px #073642;
    

}

body.theme-dark .comment .comment,
body.theme-dark .comment .comment .comment .comment,
body.theme-dark .comment .comment .comment .comment .comment .comment,
body.theme-dark .comment .comment .comment .comment .comment .comment .comment .comment,
body.theme-dark .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
    background-color: #073642;
    border: solid 1px #073642;
    margin-right: 0.3rem;
    
}


/* Black theme */

body.theme-black .comment[data-comment-depth="0"],
body.theme-black .comment .comment .comment,
body.theme-black .comment .comment .comment .comment .comment,
body.theme-black .comment .comment .comment .comment .comment .comment .comment,
body.theme-black .comment .comment .comment .comment .comment .comment .comment .comment .comment {
    background-color: #000;
    border: solid 1px #222;
    

}

body.theme-black .comment .comment,
body.theme-black .comment .comment .comment .comment,
body.theme-black .comment .comment .comment .comment .comment .comment,
body.theme-black .comment .comment .comment .comment .comment .comment .comment .comment,
body.theme-black .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
    background-color: #151515;
    border: solid 1px #222;;
    margin-right: 0.3rem;
}




/*
   I also removed the header background. 
    Comment starts are already easy to differentiate and removing the background serves to make it a bit cleaner and helps the collapse button as it didn't really match the header. 
*/


body.theme-light .comment header,
body.theme-dark .comment header,
body.theme-black .comment header,
body .comment header {
    background-color: transparent;
}


/* 
   There was simply too much margin between paragraphs in comments breaking text up a bit. 
*/ 
.comment p {
    margin: 0 0 0.2rem;
}


/*
    Collapse buttons really didn't look like they belonged on mobile.  
    Note: I was going to them differently on desktop as they have more margin there but actually liked the result there as well. 
    If you don't this is also needed.
    @media (min-width: 840px) {
        button.btn.btn-comment-collapse {
            border-width: 0.05rem
        }
    }
*/

button.btn.btn-comment-collapse {
    border-width: 0 0.05rem 0.05rem 0;
}

.is-comment-collapsed button.btn.btn-comment-collapse {
    border-width: 0 0.05rem 0 0;
}