userstyle.css

/* ==UserStyle==
@name         LemmyES (WIP)
@version      0.0.1
@namespace    userstyles.world/user/weaveester
@description  A style for Lemmy inspires by old.reddit.com and RES.
@author       weavejester
@license      MIT
==/UserStyle== */

@-moz-document domain("lemmy.world"), domain("lemmy.ml"), domain("beehaw.org"), domain("feddit.de") {
:root {
    --bg-comment-odd: white;
    --bg-comment-even: #f7f7f7;
    --link-default: #0000ee;
    --link-visited: #800080;
}

.container, .container-lg, .container-md, .container-sm, .container-xl {
    max-width: none;
}

.navbar-nav.my-2 {
    margin-top: .1rem !important;
    margin-bottom: .1rem !important;
}

.md-div h2 {
    font-size: 16pt;
}

.md-div {
    font-size: 11pt;
}

.btn {
    padding: .1rem .4rem;
    border-radius: .2rem;
}

.card {
    border-radius: .2rem;
}

.card-body {
    padding: 1rem;
}

.btn-sm {
    line-height: 1;
}

.custom-select {
    padding: .1rem .7rem;
    height: 1.90rem;
    border-radius: .2rem;
}

.img-icon {
    display: none;
}

.post-title h5 {
    font-size: 13pt;
    margin-bottom: 0.2rem;
}

.post-title h5 a {
    color: var(--link-default) !important;
}

.post-title h5 a:visited {
    color: var(--link-visited) !important;
}

.post-listing ul.list-inline.small {
    font-size: 9pt;
    margin-bottom: 0 !important;
    line-height: 1;
    height: 1rem;
}

.post-listing .text-muted {
    font-size: 9pt;
}

.post-listing .text-info {
    color: #666 !important;
}

.post-listing .list-inline-item .mx-1 {
    margin: 0 !important;
}

.post-listing .icon-inline {
    margin-bottom: 2px;
    height: .9em;
    width: .9em;
}

.post-listing .col-sm-2 {
    max-width: 6em;
}

.post-listing .downvote {
    margin-top: -.8rem;
}

.post-listing a.text-body:hover div.thumbnail {
    background-color: #eee !important;
}

hr.my-3 {
    margin-top: .6rem !important;
    margin-bottom: .6rem !important;
}

.vote-bar {
    max-width: 4em;
}

.col-md-4 {
    flex: 0 1 21em;
    max-width: 21em;
}

.col-md-8 {
    flex: 1 0 auto;
    max-width: calc(100% - 21em);
}

.comment {
    position: relative;
    margin-left: 0 !important;
    margin-top: .7rem;
    margin-bottom: .7rem;
    border: solid 1px #e0e0e0;
    border-radius: .2rem;
}

.comments > .comment {
    padding-left: 0;
}

.comments .comments > .comment::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 2px;
    z-index: 3;
}

.comment .details {
    padding-left: 2.3rem;
    padding-right: .5rem;
}

/** Up and down vote icons for comments **/

.comment button[data-tippy-content="Upvote"] {
    position: absolute;
    top: 0;
    left: 0;
}

.comment button[data-tippy-content="Downvote"] {
    position: absolute;
    top: 2.2rem;
    left: 0;
}

.comment a.pointer {
    position: absolute;
    top: 1.5rem;
    left: 0;
    text-align: center;
    width: 2.15rem;
}

.comment button .ml-1 {
    display: none;
}

.comment .comment {
    margin-left: 1.5rem !important;
    margin-right: 0.5rem;
}

.comment .ml-2 {
    margin-left: 0 !important;
}

.comment .py-2 {
    padding-top: .1rem !important;
    padding-bottom: .1rem !important;
}

.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: var(--bg-comment-even);
}

.comment .comment::before,
.comment .comment .comment .comment::before,
.comment .comment .comment .comment .comment .comment::before, 
.comment .comment .comment .comment .comment .comment .comment .comment::before,
.comment .comment .comment .comment .comment .comment .comment .comment .comment .comment::before {
    background-color: var(--bg-comment-even);
}

.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: var(--bg-comment-odd);
}

.comment::before,
.comment .comment .comment::before,
.comment .comment .comment .comment .comment::before,
.comment .comment .comment .comment .comment .comment .comment::before,
.comment .comment .comment .comment .comment .comment .comment .comment .comment::before {
    background-color: var(--bg-comment-odd);
}
}