Skip to content

Instantly share code, notes, and snippets.

@boringparty

boringparty/tildes-theme-variables-test

Last active January 15, 2020 09:04
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save boringparty/06f7d9b65e9b3ccaabba327e69cd7862 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save boringparty/06f7d9b65e9b3ccaabba327e69cd7862 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment