tildes.css

:root {
    --font-sans: "IBM Plex Sans", Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;
    --font-mono: "IBM Plex Mono", Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
    --font-serif: "IBM Plex Serif", Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;

    --main: #fbfbfb;
    --secondary: #ececec;
    --semi-transparent: #0000000f;
    --text: #282A36;
    --link: #0087af;
    --link-other: #6272A4;
    --highlight: #8BE9FD;
    --gold: #F1FA8C;
    --alert: #FF5555;
    --current: #FF5555;
    --owncomment: #FF5555;


    --lightback: #44475A;
    --white: #F8F8F2;
    --comment: #6272A4;
    --cyan: #8BE9FD;
    --green: #50FA7B;
    --orange: #FFB86C;
    --pink: #FF79C6;
    --purple: #BD93F9;
    --red: #FF5555;
    --yellow: #F1FA8C;
}


/* Main */
body {
    background: var(--main);
    color: var(--text);
    font-family: var(--font-sans);
}

#site-header {
    background-color: var(--main);
    position: fixed;
    min-width: 100%;
    padding: 10px 20px;
    z-index: 99999;
}
main,
#sidebar {
    padding-top: 53px;
}
#sidebar p,
p,
.topic,
.site-header-logo,
body .site-header-logo,
body .site-header-logo:visited,
body .site-header-context,
body .site-header-context:visited {
    color: var(--text);
    font-size: .7rem;
}
body > main,
body #sidebar {
    background-color: var(--main);
}

body a:link,
body .nav .nav-item a,
body a.link-group:visited,
body a.link-group:active,
body .nav .nav-item a:hover,
body .nav .nav-item a:visited,
body a.link-user:visited,
body a.link-group:visited,
body .btn.btn-link {
    color: var(--link)
}

body a:hover,
body a:active,
body a:visited {
    color: var(--link-other);
}

body .nav .nav-item.active a {
    color: var(--current)
}

body .tab .tab-item.active a,
body .tab .tab-item.active button {
    background-color: var(--secondary);
    color: var(--link);
    border-bottom-color: var(--link);
}
body .topic-listing > li:nth-of-type(2n) {
    background-color: var(--semi-transparent);
}
body .label-topic-tag {
    opacity: .70
}
body .comment-header {
    background-color: var(--semi-transparent)
}
body .btn {
    color: var(--link);
    border-color: var(--link);
}
body .btn.btn-primary {
    background-color: var(--link);
    border-color: var(--link);
}
.topic .topic-title,
.group-short-description,
.nav .nav .nav-item,
#sidebar {
    font-size: 0.7rem;
}

body .is-topic-official h1 a,
body .is-topic-official h1 a:visited {
    color: var(--link)
}
body .is-topic-official {
    border-left-color: var(--alert)
}

/* Post Actions */
.topic .topic-actions {
    text-align: center;
}
.topic-actions .btn {
    font-size: 0pt;
}

.topic-actions .btn:before {
    content: "...";
    font-size: .5rem;
}

/* Voting */
body .topic-voting.btn-used,
body .topic-voting.btn-used:hover {
    background-color: var(--link);
    border-color: var(--link);
    color: var(--main)
}
.topic .topic-metadata,
footer.topic-info {
    font-size: .6rem
}
.topic .topic-text-excerpt,
.topic .topic-text-excerpt summary {
    font-size: 0.5rem;
    /*display:none;*/
    /* hide summaries */
}

/* Article */
code {
    font-family: var(--font-mono);
    font-size: .9em
}
pre code {
    font-size: .6rem!important;
    line-height: 1rem!important;
    border-left: 2px solid var(--link-other);
    font-family: var(--font-mono);
    background-image: linear-gradient(var(--secondary) 50%, #ffffff 50%);
    background-position: 0 4px;
    background-size: auto 40px;
    padding: 5px 5px 5px 20px;
}
body .comment:target > .comment-itself,
body .is-comment-new > .comment-itself {
    border-left-color: var(--highlight)
}
body .is-comment-exemplary > .comment-itself {
    border: none;
}
body .is-comment-exemplary > .comment-itself header.comment-header {
    background-color: var(--gold)
}

body .btn-post-action-used {
    color: var(--link-other);
    text-decoration: none;
}

.topic-content-type:not(:first-child)::before {
    content: "-"
}
.topic-content-type:not(:last-child)::after {
    content: ""
}
textarea.form-input {
    height: 12rem;
}

/* User */
.is-comment-mine > .comment-itself {
    border-left: 3px solid var(--owncomment)!important;
}
.topic-info-source a[href*='/tomf'],
.is-comment-mine > .comment-itself > header > .link-user {
    color: var(--main)!important;
    background: var(--owncomment);
    padding: 3px 6px 3px 6px;
    border-radius: 7px;
}
.comment .is-comment-by-op .comment-itself {
    border-left-color: var(--text)
}
.bg-none {
    color: var(--text);
    border: none;
    font-size: .7rem;
}

.user-label,
.bg-none {
    padding: 0px;
    position: relative;
    left: 5px;
    font-size: 0.5rem!important;
    margin: 0px;
    border-radius: 0px;
}
.comment-text .user-label {
    display: none;
}

#site-header .logged-in-user-alert {
    margin-right: 1rem;
    background-color: var(--owncomment);
    padding: 0px 10px;
    color: var(--main);
}

.is-comment-by-op > .comment-itself .comment-user-info {
    font-weight: normal;
    font-size: 0.5rem;
}

/* Bookmark / Ignore Menu */
.topic-actions .menu li button {
    color: var(--text)
}
.topic-actions .menu li button[data-ic-put-to*='bookmark']:before {
    content: "★";
    display: inline;
    padding-right: 5px;
    color: var(--text)
}
.topic-actions .menu li button[data-ic-put-to*='ignore']:before {
    content: "✖";
    display: inline;
    padding-right: 5px;
    color: var(--text)
}

.topic-actions .menu {
    min-width: 100px;
}

body .label-topic-tag-nsfw a:visited, 
body .label-topic-tag[class*="label-topic-tag-nsfw-"] a,
body .label-topic-tag-spoiler a,
body .label-topic-tag-spoiler, 
body .label-topic-tag[class*="label-topic-tag-spoiler-"]{background-color:var(--alert);color:#FFF;font-weight:normal;opacity:1;}