tildes-theme-variables-test

:root {    

/* Fairly Standard Dracula */

    --background:       #282a36;
    --alternate:        #44475a;
    --foreground:       #f8f8f2;
    --fg-dark:          #6272a4;
    --fg-darkalt:       #8d98bb;
    --border:           #6272a4;
    --comment:          #6272a4; 

    --link:             #8be9fd;
    --hover:            #ff5555;
    --visited:          #bd93f9;
    --alert:            #ffb86c;
    --button:           #8be9fd;
    --button-text:      #282a36;
    --cyan:             #8be9fd;
    --green:            #50fa7b;
    --orange:           #ffb86c;
    --pink:             #ff79c6;
    --purple:           #bd93f9;
    --red:              #ff5555;
    --yellow:           #f1fa8c;

    --label-joke:       #50fa7b;
    --label-noise:      #f1fa8c;
    --label-offtopic:   #ff79c6;
    --label-malice:     #ff5555;
    --label-color:      #FFFFFF;    
    --label-nsfw:       #FF5555;
    --label-spoiler:    #f1fa8c;
    --black:            #000000;
    --white:            #FFFFFF; 

    --owncomment:       #FF5555;

/* Based on Cyberpunk Neon -- made in under three minutes 

    --background:	     #000b1e;
    --alternate:	     #07172f;
    --foreground:	     #d7d7d5;
    --fg-dark:	         #0abdc6;
    --fg-darkalt:	     #711c91;
    --border:	         #0abdc6;
    --comment:	         #0abdc6;

    --link:	             #00b8ff;
    --hover:	         #ea00d9;
    --visited:	         #711c91;
    --alert:	         #ea00d9;
    --button:	         #00b8ff;
    --button-text:	     #000b1e;
    --cyan:	             #0abdc6;
    --green:	         #00ff00;
    --orange:	         #ea00d9;
    --pink:	             #ea00d9;
    --purple:	         #711c91;
    --red:	             #ea00d9;
    --yellow:	         #f1fa8c;

    --label-joke:	     #00ff00;
    --label-noise:	     #f1fa8c;
    --label-offtopic:    #d7d7d5;
    --label-malice:	     #ea00d9;
    --label-color:	     #d7d7d5;
    --label-nsfw:	     #ea00d9;
    --label-spoiler:     #ea00d9;
    --black:	         #000b1e;
    --white:	         #d7d7d5;

    --owncomment:	     #0abdc6;


    */
    
    
    --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 Theme */

body {
  color: var(--foreground);
  background-color: var(--alternate); }
  body * {
    border-color: var(--border); }
  body a {
    color: var(--link); }
    body a:hover {
      color: var(--hover); }
    body a:visited {
      color: var(--visited); }
    body a code {
      color: var(--link); }
      body a code:hover {
        text-decoration: underline; }
    body a:visited code {
      color: var(--visited); }
  body a.link-user:visited,
  body a.link-group:visited {
    color: var(--link); }
  body a.logged-in-user-alert {
    color: var(--alert); }
    body a.logged-in-user-alert:visited {
      color: var(--alert); }
  body .highlight .syntax-c {
    color: var(--comment); }
  body .highlight .syntax-k {
    color: var(--pink); }
  body .highlight .syntax-o {
    color: var(--comment); }
  body .highlight .syntax-x {
    color: var(--red); }
  body .highlight .syntax-cm {
    color: var(--comment); }
  body .highlight .syntax-cp {
    color: var(--comment); }
  body .highlight .syntax-c1 {
    color: var(--comment); }
  body .highlight .syntax-cs {
    color: var(--comment); }
  body .highlight .syntax-gd {
    color: var(--comment); }
  body .highlight .syntax-ge {
    font-style: italic; }
  body .highlight .syntax-gr {
    color: var(--red); }
  body .highlight .syntax-gh {
    color: var(--red); }
  body .highlight .syntax-gi {
    color: var(--comment); }
  body .highlight .syntax-gs {
    font-weight: bold; }
  body .highlight .syntax-gu {
    color: var(--red); }
  body .highlight .syntax-kc {
    color: var(--red); }
  body .highlight .syntax-kd {
    color: var(--pink); }
  body .highlight .syntax-kn {
    color: var(--comment); }
  body .highlight .syntax-kp {
    color: var(--comment); }
  body .highlight .syntax-kr {
    color: var(--pink); }
  body .highlight .syntax-kt {
    color: var(--pink); }
  body .highlight .syntax-m {
    color: var(--comment); }
  body .highlight .syntax-s {
    color: var(--comment); }
  body .highlight .syntax-nb {
    color: var(--cyan); }
  body .highlight .syntax-nc {
    color: var(--pink); }
  body .highlight .syntax-no {
    color: var(--red); }
  body .highlight .syntax-nd {
    color: var(--pink); }
  body .highlight .syntax-ni {
    color: var(--cyan); }
  body .highlight .syntax-ne {
    color: var(--cyan); }
  body .highlight .syntax-nf {
    color: var(--cyan); }
  body .highlight .syntax-nt {
    color: var(--pink); }
  body .highlight .syntax-nv {
    color: var(--pink); }
  body .highlight .syntax-ow {
    color: var(--comment); }
  body .highlight .syntax-mf {
    color: var(--purple); }
  body .highlight .syntax-mh {
    color: var(--purple); }
  body .highlight .syntax-mi {
    color: var(--purple); }
  body .highlight .syntax-mo {
    color: var(--purple); }
  body .highlight .syntax-sb {
    color: var(--yellow); }
  body .highlight .syntax-sc {
    color: var(--yellow); }
  body .highlight .syntax-sd {
    color: var(--comment); }
  body .highlight .syntax-s2 {
    color: var(--yellow); }
  body .highlight .syntax-se {
    color: var(--red); }
  body .highlight .syntax-sh {
    color: var(--comment); }
  body .highlight .syntax-si {
    color: var(--yellow); }
  body .highlight .syntax-sx {
    color: var(--yellow); }
  body .highlight .syntax-sr {
    color: var(--red); }
  body .highlight .syntax-s1 {
    color: var(--yellow); }
  body .highlight .syntax-ss {
    color: var(--yellow); }
  body .highlight .syntax-bp {
    color: var(--pink); }
  body .highlight .syntax-vc {
    color: var(--pink); }
  body .highlight .syntax-vg {
    color: var(--pink); }
  body .highlight .syntax-vi {
    color: var(--pink); }
  body .highlight .syntax-il {
    color: var(--comment); }
  body blockquote {
    border-color: var(--foreground);
    background-color:  var(--background);}
  body code,
  body pre {
    color: var(--foreground);
    background-color: var(--background); }
  body main {
    background-color: var(--background); }
  body meter {
    background: var(--alternate); }
    body meter::-webkit-meter-bar {
      background: var(--alternate); }
    body meter::-webkit-meter-optimum-value {
      background: var(--green); }
    body meter:-moz-meter-optimum::-moz-meter-bar {
      background: var(--green); }
    body meter::-webkit-meter-suboptimum-value {
      background: var(--cyan); }
    body meter:-moz-meter-sub-optimum::-moz-meter-bar {
      background: var(--cyan); }
    body meter::-webkit-meter-even-less-good-value {
      background: var(--red); }
    body meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
      background: var(--red); }
  body tbody tr:nth-of-type(2n + 1) {
    background-color: var(--alternate); }
  body .table th {
    border-bottom-color: var(--foreground); }
  body .form-autocomplete .menu {
    background-color: var(--alternate); }
  body .breadcrumb .breadcrumb-item {
    color: var(--fg-dark); }
    body .breadcrumb .breadcrumb-item:not(:last-child) a {
      color: var(--fg-dark) }
    body .breadcrumb .breadcrumb-item:not(:first-child)::before {
      color: var(--fg-dark); }
    body .breadcrumb .breadcrumb-item:last-child a {
      color: var(--cyan); }
  body .btn {
    color: var(--cyan);
    background-color: transparent;
    border-color: var(--cyan); }
    body .btn:hover {
      background-color: rgba(139, 233, 253, 0.2); }
  body .btn-light {
    color: var(--fg-dark);
    border-color: var(--fg-dark); }
    body .btn-light:hover {
      color: var(--cyan); }
  body .btn.btn-link {
    color: var(--cyan);
    background-color: transparent;
    border-color: transparent; }
    body .btn.btn-link:hover {
      color: var(--cyan); }
  body .btn.btn-primary {
    color: var(--button-text);
    background-color: var(--button);
    border-color: var(--button); }
    body .btn.btn-primary:hover {
      background-color: var(--alternate);
      border-color: var(--button-text); }
    body .btn.btn-primary:visited {
        color: var(--button);}
  body .btn-used {
    color: var(--button);
    border-color: var(--button); }
    body .btn-used:hover {
      background-color: var(--button);
      border-color: var(--button);
      color: var(--background); }
  body .btn-post-action {
    color: var(--foreground); }
    body .btn-post-action:hover {
      color: var(--foreground); }
  body .btn-post-action-used {
    color: var(--button); }
  body .btn-comment-label-exemplary {
    color: var(--cyan);
    border-color: var(--cyan); }
    body .btn-comment-label-exemplary:hover {
      color: var(--cyan); }
    body .btn-comment-label-exemplary.btn-used:hover {
      background-color: var(--cyan);
      color: var(--label-color); }
  body .btn-comment-label-joke {
    color: var(--label-joke);
    border-color: var(--label-joke); }
    body .btn-comment-label-joke:hover {
      color: var(--label-joke); }
    body .btn-comment-label-joke.btn-used:hover {
      background-color: var(--label-joke);
      color: var(--label-color); }
  body .btn-comment-label-noise {
    color: var(--label-noise);
    border-color: var(--label-noise); }
    body .btn-comment-label-noise:hover {
      color: var(--label-noise); }
    body .btn-comment-label-noise.btn-used:hover {
      background-color: var(--label-noise);
      color: var(--label-color); }
  body .btn-comment-label-offtopic {
    color: var(--label-offtopic);
    border-color: var(--label-offtopic); }
    body .btn-comment-label-offtopic:hover {
      color: var(--label-offtopic); }
    body .btn-comment-label-offtopic.btn-used:hover {
      background-color: var(--label-offtopic);
      color: var(--label-color); }
  body .btn-comment-label-malice {
    color: var(--label-malice);
    border-color: var(--label-malice); }
    body .btn-comment-label-malice:hover {
      color: var(--label-malice); }
    body .btn-comment-label-malice.btn-used:hover {
      background-color: var(--label-malice);
      color: var(--label-color); }
  body .chip {
    background-color: var(--alternate);
    color: var(--foreground); }
    body .chip.active {
      background-color: var(--cyan);
      color: var(--black); }
      body .chip.active .btn {
        color: var(--black); }
    body .chip.error {
      background-color: var(--alert);
      color: var(--foreground); }
      body .chip.error .btn {
        color: var(--foreground); }
  body .comment-branch-counter {
    color: var(--fg-dark); }
  body .comment-nav-link,
  body .comment-nav-link:visited {
    color: var(--fg-dark); }
  body .comment-removed-warning {
    color: var(--yellow); }
  body .label-comment-exemplary {
    padding: 0 0.2rem;
    line-height: 0.9rem;
    background-color: transparent;
    color: var(--cyan);
    border: 1px solid var(--cyan); }
    body .label-comment-exemplary a,
    body .label-comment-exemplary a:hover,
    body .label-comment-exemplary a:visited {
      color: var(--cyan); }
  body .label-comment-joke {
    padding: 0 0.2rem;
    line-height: 0.9rem;
    background-color: transparent;
    color: var(--label-joke);
    border: 1px solid var(--label-joke); }
    body .label-comment-joke a,
    body .label-comment-joke a:hover,
    body .label-comment-joke a:visited {
      color: var(--label-joke); }
  body .label-comment-noise {
    padding: 0 0.2rem;
    line-height: 0.9rem;
    background-color: transparent;
    color: var(--label-noise);
    border: 1px solid var(--label-noise); }
    body .label-comment-noise a,
    body .label-comment-noise a:hover,
    body .label-comment-noise a:visited {
      color: var(--label-noise); }
  body .label-comment-offtopic {
    padding: 0 0.2rem;
    line-height: 0.9rem;
    background-color: transparent;
    color: var(--label-offtopic);
    border: 1px solid var(--label-offtopic); }
    body .label-comment-offtopic a,
    body .label-comment-offtopic a:hover,
    body .label-comment-offtopic a:visited {
      color: var(--label-offtopic); }
  body .label-comment-malice {
    padding: 0 0.2rem;
    line-height: 0.9rem;
    background-color: transparent;
    color: var(--label-malice);
    border: 1px solid var(--label-malice); }
    body .label-comment-malice a,
    body .label-comment-malice a:hover,
    body .label-comment-malice a:visited {
      color: var(--label-malice); }
  body .is-comment-collapsed:not(:target) .comment-header, body .is-comment-collapsed-individual:not(:target) > .comment-itself .comment-header {
    background-color: var(--alternate)}
  body .comment-header {
    color: var(--foreground);
    background-color: var(--alternate) }
  body .comment:target > .comment-itself {
    border-left-color: var(--yellow); }
  body .divider[data-content]::after {
    color: var(--foreground);
    background-color: var(--background); }
  body .donation-goal-meter-over-goal {
    background: var(--cyan); }
    body .donation-goal-meter-over-goal::-webkit-meter-bar {
      background: var(--cyan); }
  body .empty-subtitle {
    color: var(--fg-dark); }
  body .form-autocomplete .form-autocomplete-input .form-input {
    border-color: transparent; }
  body .form-input {
    color: var(--foreground);
    background-color: var(--alternate); } /* search */
  body .form-input:not(:placeholder-shown):invalid {
    border-color: var(--alert); }
    body .form-input:not(:placeholder-shown):invalid:focus {
      box-shadow: 0 0 0 1px var(--alert); }
    body .form-input:not(:placeholder-shown):invalid + .form-input-hint {
      color: var(--alert); }
body .form-input[readonly] {background-color:var(--alternate);border-color:var(--border);}
  body .form-select:not([multiple]):not([size]) {
    background-color: var(--alternate); } /* period alternate on front page */
  body .input-group-addon {
    background-color: var(--alternate);
    color: var(--foreground); }
  body .label-topic-tag {
    padding: 0; }
    body .label-topic-tag a,
    body .label-topic-tag a:hover,
    body .label-topic-tag a:visited {
      color: var(--foreground); }
  body .label-topic-tag-nsfw,
  body .label-topic-tag[class*="label-topic-tag-nsfw-"] {
    padding: 0 0.2rem;
    line-height: 0.9rem;
    background-color: transparent;
    color: var(--label-nsfw);
    border: 1px solid var(--label-nsfw); }
    body .label-topic-tag-nsfw a,
    body .label-topic-tag-nsfw a:hover,
    body .label-topic-tag-nsfw a:visited,
    body .label-topic-tag[class*="label-topic-tag-nsfw-"] a,
    body .label-topic-tag[class*="label-topic-tag-nsfw-"] a:hover,
    body .label-topic-tag[class*="label-topic-tag-nsfw-"] a:visited {
      color: var(--label-nsfw); }
  body .label-topic-tag-spoiler,
  body .label-topic-tag[class*="label-topic-tag-spoiler-"] {
    padding: 0 0.2rem;
    line-height: 0.9rem;
    background-color: transparent;
    color: var(--label-spoiler);
    border: 1px solid var(--label-spoiler); }
    body .label-topic-tag-spoiler a,
    body .label-topic-tag-spoiler a:hover,
    body .label-topic-tag-spoiler a:visited,
    body .label-topic-tag[class*="label-topic-tag-spoiler-"] a,
    body .label-topic-tag[class*="label-topic-tag-spoiler-"] a:hover,
    body .label-topic-tag[class*="label-topic-tag-spoiler-"] a:visited {
      color: var(--label-spoiler); }
  body .link-no-visited-color:visited {
    color: var(--cyan); }
  body .logged-in-user-username,
  body .logged-in-user-username:visited {
    color: var(--foreground); }
  body .menu {
    background-color: var(--background);
    border-color: var(--alternate); }
  body .message header {
    color: var(--foreground);
    background-color: var(--alternate); }
  body .nav .nav-item a {
    color: var(--cyan); }
    body .nav .nav-item a:hover {
      color: var(--hover); }
  body .nav .nav-item.active a {
    color: var(--cyan); }
  body .settings-list a:visited {
    color: var(--cyan); }
  body .sidebar-controls {
    background-color: var(--alternate); }
  body #sidebar {
    background-color: var(--background); }
  body #site-footer a:visited {
    color: var(--cyan); }
  body .site-header-context,
  body .site-header-context:visited {
    color: var(--foreground); }
  body .site-header-logo,
  body .site-header-logo:visited {
    color: var(--foreground); }
  body .site-header-sidebar-button.badge[data-badge]::after {
    background-color: var(--alert); }
  body .tab .tab-item a {
    color: var(--foreground); }
  body .tab .tab-item.active a,
  body .tab .tab-item.active button {
    color: var(--cyan);
    border-bottom-color: var(--cyan); }
  body .text-error {
    color: var(--alert); }
  body .text-secondary {
    color: var(--foreground); } /* what is this? */
  body .text-warning {
    color: var(--alert); }
  body .text-wiki h1 a,
  body .text-wiki h2 a,
  body .text-wiki h3 a,
  body .text-wiki h4 a,
  body .text-wiki h5 a,
  body .text-wiki h6 a {
    color: var(--foreground); }
  body .toast {
    color: var(--foreground);
    background-color: var(--alternate); }
  body .toast-warning {
    border-color: var(--alert);
    color: var(--alert);
    background-color: transparent; }
  body .topic-actions .btn-post-action {
    color: var(--cyan); }
    body .topic-actions .btn-post-action:hover {
      background-color: var(--secondary); }
  body .topic-actions .btn-post-action-used {
    color: var(--purple); } /* what is this? */
  body .topic-listing > li:nth-of-type(2n) {
    color: var(--foreground);
    background-color: var(--alternate); }
  body .topic-full-byline {
    color: var(--fg-dark); }
  body .topic-full-tags {
    color: var(--fg-dark); }
    body .topic-full-tags a {
      color: var(--fg-dark); }
  body .topic-info-comments-new {
    color: var(--alert); }
  body .topic-info-source-scheduled {
    color: var(--fg-dark); }
  body .topic-log-entry-time {
    color: var(--fg-dark); }
  body .topic-text-excerpt {
    color: var(--fg-dark); }
  body .topic-listing li:nth-of-type(2n) .topic-text-excerpt {
    color: var(--fg-darkalt); }
  body .topic-text-excerpt summary::after {
      color: var(--fg-dark); }
  body .topic-listing li:nth-of-type(2n) .topic-text-excerpt summary::after {
      color: var(--fg-darkalt); }
    body .topic-text-excerpt[open] {
      color: var(--foreground); }
  body .topic-voting.btn-used {
    border-color: transparent; }
    body .topic-voting.btn-used:hover {
      background-color: var(--button);
      border-color: var(--button); }
  body .is-comment-deleted,
  body .is-comment-removed {
    color: var(--alternate); }
  body .is-comment-mine > .comment-itself {
    border-left-color: var(--owncomment); }
  body .is-comment-new > .comment-itself {
    border-left-color: var(--alert); }
  body .is-comment-new .comment-text {
    color: var(--foreground); }
  body .is-comment-exemplary > .comment-itself {
    border-left-color: var(--cyan); }
  body .is-message-mine,
  body .is-topic-mine {
    border-left-color: var(--owncomment); }
  body .is-topic-official {
    border-left-color: var(--alert); }
    body .is-topic-official h1 a,
    body .is-topic-official h1 a:visited {
      color: var(--alert); }

/* Tweaks */

/* Sticky Header */

#site-header {
    background-color: var(--alternate);
    position: fixed;
    min-width: 100%;
    padding: 10px 20px;
    z-index: 99999;
}
main,
#sidebar {
    padding-top: 52px;
}


/* Other Font Stack */

body {font-family: var(--font-sans);  }
pre, pre code {font-family: var(--font-mono);  }

/* Smaller Actions Menu  */
.topic-actions .menu {
    min-width: 100px;
}
.topic .topic-actions {
    text-align: center;
}
.topic-actions .btn {
    font-size: 0pt;
}
.topic-actions .btn:before {
    content: "☉";
    font-size: .5rem;
}
.topic-actions .menu li button {
    color: var(--foreground)
}
.topic-actions .menu li button[data-ic-put-to*='bookmark']:before {
    content: "★";
    display: inline;
    padding-right: 5px;
    color: var(--foreground)
}
.topic-actions .menu li button[data-ic-put-to*='ignore']:before {
    content: "✖";
    display: inline;
    padding-right: 5px;
    color: var(--foreground)
}

/* Highlight Self */

.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;
}

/* Larger Text Area */

textarea.form-input {
    height: 12rem;
}

/* Minor Replacements */
.topic-content-type:not(:first-child)::before {
    content: "-"
}
.topic-content-type:not(:last-child)::after {
    content: ""
}
/* Exemplary Highlight */
body .is-comment-exemplary > .comment-itself header.comment-header {
    background-color: var(--yellow)
}

body .topic-voting.btn-used,
body .topic-voting.btn-used:hover {
    background-color: var(--link);
    border-color: var(--link);
    color: var(--background)
}

/* Font Size */

#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,
.bg-none,.topic .topic-title,
.group-short-description,
.nav .nav .nav-item,
#sidebar {
    font-size: .7rem;
}
.topic .topic-info {
    font-size: 0.6rem;
}

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