User:Supergrey1/ box.css

@media screen and (min-width: 700px) {
    .box-float-left {
        position: relative;
        left: -5px;
        clear: left;
    }

    .box-float-right {
        float: right;
        clear: right;
    }
    
    .userboxes-intro {
        max-width: 240px;
    }
}

.font-cursive {
    font-family: 'Kaiti TC', 'AR PL UKai TW', 'AR PL UKai TW MBE', 'AR PL UKai HK', DFKai-SB, 'TW\-Kai', KaiTi, serif;
    line-height: 1.25em;
}

.font-cursive:lang(zh-Hans-CN),
.font-cursive:lang(zh-Hans-MY),
.font-cursive:lang(zh-Hans-SG) {
    font-family: "Kaiti SC", STKaiti, "AR PL UKai CN", "AR PL KaitiM GB", KaiTi, KaiTi_GB2312, serif;
}
.font-cursive big {
	font-size: larger;
}

.userboxes-group-120 {
    display: grid;
    grid-column-gap: 4px;
    grid-template-columns: repeat(auto-fill,118px);
    margin-bottom: -10px;
}

.userboxes-group-240 {
    display: grid;
    grid-column-gap: 4px;
    grid-template-columns: repeat(auto-fill,240px);
    margin-bottom: 4px;
}

.userboxes-group-120 table,
.userboxes-group-240 table {
    margin-top: 0;
    margin-bottom: 0;
}
.userboxes-intro {
    margin-top: 10px;
    margin-bottom: -10px;
}


.userbox {
    border-width: 1px;
    border-style: solid;
    border-collapse: collapse;
}

.userbox_left {
    height: 45px;
    width: 45px;
    padding: 0 1px 0 0;
    text-align: center;
}

.userbox_right {
    height: 45px;
    padding: 0 5px;
    font-size: .85em;
    line-height: 1.1em;
}

.box-reddit {
    position: relative;
}
.div-reddit {
    padding-left: 40px !important;
}
.div-reddit .mw-collapsible-caption {
    text-align: left !important;
}
.box-reddit br {
    display: none;
}
.buttons-reddit {
    position: absolute;
    left: 10px;
    top: 10px;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 2px;
}
.buttons-reddit span {
    filter: invert(58%) sepia(5%) saturate(174%) hue-rotate(161deg) brightness(93%) contrast(89%);
}
.buttons-reddit span:first-of-type:hover {
    filter: invert(22%) sepia(72%) saturate(6119%) hue-rotate(24deg) brightness(98%) contrast(100%);
}
.buttons-reddit span:last-of-type:hover {
    filter: invert(44%) sepia(21%) saturate(1589%) hue-rotate(188deg) brightness(98%) contrast(81%);
}
.buttons-reddit #buttons-sep {
    color: #1A1A1B;
    font-size: 12px;
    font-weight: 700;
    height: 16px;
}
.div-reddit #reddit-caption {
    font-size: 20px;
    font-weight: 500;
}
.div-reddit #reddit-posted-by {
    font-size: 12px;
    font-weight: 400;
    color: #787C7E;
    cursor: pointer;
}
.div-reddit #reddit-posted-by span:hover {
    text-decoration: underline;
}
.div-reddit #reddit-tags {
    font-weight: 500;
    font-size: 12px;
    display: flex;
    flex-direction: row;
    gap: 5px;
}
.div-reddit #reddit-tags div {
    background: #f8f9fa;
    border-radius: 5px;
    padding: 1px 3px;
    cursor: pointer;
}
.div-reddit #reddit-tags div:hover {
    background: #eee;
}
.text-reddit p {
    border-bottom: 1px #EDEFF1 solid;
    padding-bottom: 10px;
    margin-bottom: 20px;
}
.text-reddit dl {
    position: relative;
}
.text-reddit dl dd {
    padding-left: 23px;
    border-left: 2px #EDEFF1 solid;
    margin-left: 18px;
    font-size: 14px;
    font-weight: 400;
    padding-top: 20px;
    position: relative;
}
.text-reddit dl dd span {
    font-size: 12px;
    font-weight: 400;
    color: #7c7c7c;
}
.text-reddit dl dd span:after {
    content: '\a';
    display: block;
    margin-bottom: 5px;
}
.text-reddit dl dd img {
    filter: brightness(0) saturate(100%);
    opacity: .4;
}
.text-reddit dl dd span span:after {
    display: inherit;
}
.text-reddit dl dd span .user-line .username {
    font-weight: 500;
    color: #1A1A1B;
    cursor: pointer;
}
.text-reddit dl dd span .user-line .username:hover {
    text-decoration: underline;
}
.text-reddit dl dd span .user-avatar {
    background: #f8f9fa;
    width: 28px;
    height: 28px;
    position: absolute;
    left: -20px;
    border-radius: 50%;
    text-align: center;
    line-height: 22px;
    border: 5px white solid;
    top: -10px;
}
.text-reddit dl dd span .user-avatar:hover {
    opacity: .8;
}
.text-reddit dl dd span .user-line {
    padding-top: 10px;
    position: absolute;
    top: -10px;
}
.text-reddit dl dd dl dd {
    margin-top: 15px;
    margin-bottom: 15px;
}
.text-reddit .user-at {
    font-size: inherit;
    cursor: pointer;
}
.text-reddit .user-at:hover {
    text-decoration: underline;
}

.text-sigwall ol li {
    margin-bottom: 5px;
    border-bottom: 1px dashed #ccc;
    padding-bottom: 5px;
}

.text-bookmarks #text-bookmarks-scrollarea {
  overflow: scroll;
  height: 300px;
}
.text-bookmarks ul li {
    margin-left: 1.25em;
    padding-left: .25em;
}
.text-bookmarks ul li ol {
    margin-left: 1em;
    margin-bottom: .5em;
}
.text-bookmarks .div-col,
.text-bookmarks ul {
    margin-top: -.5em;
}
.text-bookmarks ul li dl dd {
  margin: 5px 0 10px 0;
  border: 1px dashed #ccc;
  padding: 10px;
  font-size: 80%;
}
.text-bookmarks ul li dl dd ul,
.text-bookmarks ul li dl dd dl {
  margin: 0 !important;
}
.text-bookmarks hr {
    border-bottom: 1px dashed #ccc;
    background: transparent;
    margin: .5em 0;
}
.text-bookmarks #hr-notelist {
    /*margin-top: 1.5em;*/
    border-bottom: 1px dashed #787C7E;
}
.text-bookmarks .notelist {
    color: #787C7E;
    margin-bottom: -1.5em;
}
.text-bookmarks .notelist ol {
    margin-left: 1.25em;
}
.text-bookmarks .notelist .mw-cite-backlink {
    display: none;
}
.text-bookmarks .collapsible-list .mw-collapsible-content {
    margin-top: 10px !important;
}

#essays-dpl-empty {
  display: none;
  color: #787C7E;
  margin-top: -2.1em;
  margin-left: 3em;
}
#essays-dpl:empty + #essays-dpl-empty {
  display: block;
}