Help:Custom Css

[code]

/* Make the "Add" button on the ai_tags page larger */

.c-ai-tags article button {

height: 50px;

width: 100%;

}

[/code]

[code]

/* Fix height of media asset previews on /ai_tags */

.c-ai-tags .media-asset-preview-150 > div:first-of-type { height: 150px; }

.c-ai-tags .media-asset-preview-180 > div:first-of-type { height: 180px; }

.c-ai-tags .media-asset-preview-225 > div:first-of-type { height: 225px; }

.c-ai-tags .media-asset-preview-270 > div:first-of-type { height: 270px; }

.c-ai-tags .media-asset-preview-360 > div:first-of-type { height: 360px; }

.c-ai-tags .media-asset-preview-720 > div:first-of-type { height: 720px; }

[/code]

[code]

/* Make ai-tagging thumbnails disappear after clicking "Add" */

div#c-ai-tags article.media-asset-preview:has(.button-outline-danger),

div#c-ai-tags article.media-asset-preview:has(.tag-type-3),

div#c-ai-tags article.media-asset-preview:has(.tag-type-4),

div#c-ai-tags article.media-asset-preview:has(a[data-tag-name*="rating"], a[data-tag-name="striped_legwear"], a[data-tag-name="bangs"], a[data-tag-name="fishnet_legwear"], a[data-tag-name="ground_vehicle"], a[data-tag-name="white_legwear"], a[data-tag-name="silver_hair"], a[data-tag-name="black_legwear"]) {

display: none;

}

[/code]

[code]

/* Make ai-tagging thumbnails unclickable */

#a-index > div.media-asset-gallery.media-asset-gallery-360 > div > article > div.flex-auto.flex.items-center > a {

pointer-events: none;

}

[/code]

[code]

/* Enable the ai-tags column on post upload and edit */

.ai-tags-related-tags-column.hidden {

display: initial !important;

}

[/code]

[code]

/* Show a checkerboard pattern behind transparent images */

#image, .media-asset-image {

--checkerboard: repeating-conic-gradient(transparent 0% 25%, #77789244 0% 50%) 0 0 / 32px 32px;

background: var(--checkerboard);

}

/* Show a darker/lighter checkerboard behind the image on hover, depending on light/dark theme.

• (It would be nice to use :active instead but that conflicts with the note toggle)
• /

body[data-current-user-theme="light"] #image:hover,

body[data-current-user-theme="light"] .media-asset-image:hover {

background: var(--checkerboard), var(--grey-9);

}

body[data-current-user-theme="dark"] #image:hover,

body[data-current-user-theme="dark"] .media-asset-image:hover {

background: var(--checkerboard), var(--white);

}

@media (prefers-color-scheme: dark) {

#image:hover, .media-asset-image:hover {

background: var(--checkerboard), var(--white);

}

}

[/code]

[code]

/* Hide "upload for approval" checkbox */

#c-uploads .post_is_pending { display: none; }

[/code]

[code]

/* Hide redundant "no posts found" on IQDB search */

.iqdb-posts > .post-gallery > p {

display: none;

}

[/code]

[code]

/* Blur e- and q-rated posts */

.post-preview[data-rating="e"] .post-preview-image, .post-preview[data-rating="q"] .post-preview-image {

filter: blur(10px) brightness(0.5);

transform: translateZ(0);

}

.post-preview[data-rating="e"] .post-preview-image:hover, .post-preview[data-rating="q"] .post-preview-image:hover {

filter: blur(0px) brightness(1);

transform: translateZ(0);

}

[/code]

[code]

/* Show a checkmark next to the artist tag on self-uploads, like e621.

• Does not work on firefox by default, but can be enabled.
• Requires support for the :has CSS selector https://caniuse.com/css-has
• /

#c-posts #a-show:has(.image-container[data-tags*="self-upload"]) #tag-list .tag-type-1 .search-tag:after {

content: " ";

padding: 0 .275em;

margin: 0 .25rem;

-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M244 340a28 28 0 0 1-40 0l-64-64a28 28 0 0 1 40-40l44 44 108-108a28 28 0 0 1 40 40L244 340zm268-84a256 256 0 1 1-512 0 256 256 0 0 1 512 0zM256 48a208 208 0 1 0 0 416 208 208 0 0 0 0-416z'/%3E%3C/svg%3E");

mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M244 340a28 28 0 0 1-40 0l-64-64a28 28 0 0 1 40-40l44 44 108-108a28 28 0 0 1 40 40L244 340zm268-84a256 256 0 1 1-512 0 256 256 0 0 1 512 0zM256 48a208 208 0 1 0 0 416 208 208 0 0 0 0-416z'/%3E%3C/svg%3E");

-webkit-mask-repeat: no-repeat;

mask-repeat: no-repeat;

-webkit-mask-position: center;

mask-position: center;

background-color: var(--text-color);

}

[/code]

[code]

/* Keep mode menu on screen when scrolling */

#mode-box {

position: sticky;

top: 0;

background: var(--body-background-color);

z-index: 1;

}

[/code]

[code]

/* Enable flagged posts to have red borders for non-approvers. */

body[data-current-user-is-approver=false] .post-preview.post-status-flagged:not(.mod-queue-preview) .post-preview-image {

border-color: var(--preview-flagged-color);

}

body[data-current-user-is-approver=false] .post-preview.post-status-has-children.post-status-flagged:not(.mod-queue-preview) .post-preview-image {

border-color: var(--preview-has-children-color) var(--preview-flagged-color) var(--preview-flagged-color) var(--preview-has-children-color);

}

body[data-current-user-is-approver=false] .post-preview.post-status-has-parent.post-status-flagged:not(.mod-queue-preview) .post-preview-image {

border-color: var(--preview-has-parent-color) var(--preview-flagged-color) var(--preview-flagged-color) var(--preview-has-parent-color);

}

body[data-current-user-is-approver=false] .post-preview.post-status-has-children.post-status-has-parent.post-status-flagged:not(.mod-queue-preview) .post-preview-image {

border-color: var(--preview-has-children-color) var(--preview-flagged-color) var(--preview-flagged-color) var(--preview-has-parent-color);

}

body[data-post-is-flagged=true] .post-notice-pending {

background: var(--post-deleted-notice-background) !important;

}

[/code]

[code]

/* Sticky sidebar */

.sidebar-container {

display: grid;

grid-template-columns: min-content;

grid-auto-flow: column;

}

#sidebar {

height: 100vh;

overflow: scroll;

position: sticky;

top: 0;

/* padding-bottom: (#app-name-header + 2 * line-height + 4 * padding) + #page padding

• allows fully scrolling sidebar without scrolling main content
• /

padding-bottom: calc((42px + 2 * 1.25em + 4 * 6px) + 1rem);

}

[/code]

[code]

/* Screen-wide search bar adapted from BrokenEagle */

@media screen and (min-width: 661px){

/* Position the main side bar down and make it relative to allow absolute positioning. */

#c-posts #sidebar {

margin-top: 2.5em;

position: relative;

}

/* Push the content area down so that it doesn't overlap with the search bar. */

#c-posts #content {

margin-top: 2.5em;

}

/* Move the search box down. */

#c-posts #search-box {

position: absolute;

top: -2.5em;

}

/*Hide search header*/

#c-posts #search-box h2 {

display: none;

}

/*Screen-wide search bar*/

#c-posts #search-box-form,

#c-posts #tags {

width: 95vw;

}

}

[/code]

[code]

/* Un-tabify the upload form */

.c-uploads #form .tab-list {

display: none;

}

#c-uploads #form .tab-panel {

display: unset;

}

#c-uploads #form .tab-panels {

display: flex;

flex-direction: column;

}

/* Re-order tabs */

.tags-tab { order: 4; }

.source-tab { order: 2; }

.similar-tab { order: 3; }

.help-tab { order: 1; }

[/code]

[code]

/* highlight deprecated tags in the tag list */

[data-is-deprecated='true'] a, a[data-is-deprecated='true'] {

color: var(--low-post-count-color) !important;

}

[/code]

[code]

/* Blur instead of hiding blacklisted preview */

.post-preview.blacklisted-active {

display: block !important;

}

.post-preview.blacklisted-active .post-animation-icon {

z-index: 1;

}

.post-preview.blacklisted-active img {

filter: blur(10px) brightness(0.5);

/* Fix render bug in Safari https://github.com/mdn/browser-compat-data/issues/17726#issuecomment-1286324855 */

transform: translateZ(0);

}

.post-preview.blacklisted-active:hover img {

filter: blur(0px) brightness(1);

transition: .3s all;

}

[/code]

[code]

/* Show banned status on post previews */

article[data-flags*="banned"] .post-preview-link:before {

content: "BANNED";

color: var(--preview-icon-color);

background: rgba(192 0 4 / 70%); /* --red-6 */

position: absolute;

bottom: .125rem;

right: .125rem;

padding: .125rem;

margin: .125rem;

border-radius: .25rem;

line-height: 1;

font-size: var(--text-xs);

font-weight: bold;

font-family: var(--arial-font);

}

[/code]

[code]

body[data-mode-menu="edit"] { --post-mode-menu-active-post-outline-color: var(--azure-2) }

body[data-mode-menu="tag-script"] { --post-mode-menu-active-post-outline-color: #ffff00 }

body[data-mode-menu="add-fav"] { --post-mode-menu-active-post-outline-color: var(--magenta-3) }

body[data-mode-menu="remove-fav"] { --post-mode-menu-active-post-outline-color: var(--red-3) }

[/code]

[code]

/* Disable level-based username colors */

.user { color: var(--link-color) !important }

[/code]

[code]

/* Make usernames bold */

div.author-name {

font-weight: bold;

}

[/code]

[code]

/* Recolor admin usernames to rainbow, and nnt to Italy */

a.user-owner, a.user-admin {

background-image: linear-gradient(to left, violet, indigo, blue, green, yellow, orange, red);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

color: transparent !important;

}

/* NNT to 🇮🇹 */

a.user-owner { color: var(--user-admin-color); }

a[href="/users/508240"] {

background: linear-gradient(to left, #ce2b37 0%, #ce2b37 35%, #f1f2f1 35%, #f1f2f1 65%, #009246 65%, #009246 100%);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

color: transparent !important;

}

/* Recolor Unbreakable to Kemo */

a.user-owner { color: var(--user-admin-color); }

a[href="/users/430030"] {

background: #ffeac3;

background: linear-gradient(to right, #ffeac3 0%,#ffeac3 33%,#889833 33%,#889833 66%,#993460 66%,#993460 100%);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

color: transparent !important;

}

[/code]

[code]

/* Change username colors back to oldbooru colors: approvers in green, moderators in orange */

a.user-banned {color:red!important;}

a.user-gold { color: var(--user-gold-color); }

a.user-platinum { color: var(--user-platinum-color); }

a.user-builder { color: var(--user-builder-color); }

a.user-post-uploader { color: var(--magenta-3); }

.user-tooltip-badge-contributor { background-color: var(--magenta-3) !important; }

a.user-post-approver { color: var(--user-moderator-color); }

.user-tooltip-badge-approver { background-color: var(--user-moderator-color) !important; }

a.user-moderator { color: var(--orange-3); }

.user-tooltip-badge-moderator { background-color: var(--orange-3) !important; }

[/code]

[code]

/* Color rainbow animation for builders */

.user-builder { color: #e6c9ff !important; animation: hue 5s infinite linear; }

@keyframes hue {

from { filter: hue-rotate(0deg); }

to { filter: hue-rotate(360deg); }

}

.user-contributor { color: #e6c9ff !important; animation: hue 5s infinite linear; }

@keyframes hue {

from { filter: hue-rotate(0deg); }

to { filter: hue-rotate(360deg); }

}

[/code]

[code]

/*Show unrestricted upload permission as underline*/

.user-contributor { text-decoration:underline;}

/*Show approval permission green check mark*/

.user-approver::after { content:"✓"; color:green; font-size:80%; display:inline-block; padding-left:0.5em;}

/*Show banned users with strikethrough*/

.user-banned { text-decoration:line-through;}

[/code]

[code]

/* Indicate whether a comment was bumped or not bumped */

.comment menu:before {

font-size: 0.8em;

font-weight: bold;

}

[data-do-not-bump-post="true"] menu:before {

content: "(unbumped)";

color: #C44;

}

[data-do-not-bump-post="false"] menu:before {

content: "(bumped)";

color: #0AA;

}

[/code]

[code]

/* Spoiler uploaders in the modqueue */

#c-modqueue #content .user:not(:hover) {

background: black;

color: black;

}

[/code]

[code]

#c-modqueue img.h-4 {

height: 2rem

}

#c-modqueue article .text-xs div {

align-items: center;

display: flex;

}

[/code]

[code]

/* Highlight posts with warning tags in the modqueue grid view

• (The CSS doesn't include tags that implicate other warning tags)
• /

#c-modqueue .posts-container article[data-tags~='third-party_edit'],

#c-modqueue .posts-container article[data-tags~='screenshot'],

#c-modqueue .posts-container article[data-tags~='anime_screencap'],

#c-modqueue .posts-container article[data-tags~='duplicate'],

#c-modqueue .posts-container article[data-tags~='image_sample'],

#c-modqueue .posts-container article[data-tags~='md5_mismatch'],

#c-modqueue .posts-container article[data-tags~='resized'],

#c-modqueue .posts-container article[data-tags~='ai-generated']

{

background-color: var(--modqueue-tag-warning-color) !important;

}

[/code]

[code]

/* Hide the top danbooru logo and name */

#app-name-header { display: none }

[/code]

[code]

/*Hide the top danbooru logo*/

#app-logo { display: none; }

[/code]

[code]

/* Hide the Log Out button */

#subnav-log-out-link { display: none; }

[/code]

[code]

/* Custom theme. Dark-orange dark-mode theme */

body.dark, body[data-current-user-theme="dark"] {

--grey-0: #f6f6f6;

--grey-1: #e8e8e8;

--grey-2: #d1d1d1;

--grey-3: #ababab;

--grey-4: #919191;

--grey-5: #777777;

--grey-6: #5b5b5b;

--grey-7: #3f3f3f;

--grey-8: #2c2c2c;

--grey-9: #191919;

--link-color: #ff4500;

--link-hover-color: #f47464;

--collection-pool-color: var(--link-color);

--collection-pool-hover-color: var(--link-hover-color);

--text-color: var(--grey-3);

--header-color: var(--grey-2);

--post-resized-notice-background: var(--post-search-notice-background);

--notice-info-background: var(--post-search-notice-background);

--post-child-notice-background: var(--post-search-notice-background);

--post-parent-notice-background: var(--post-search-notice-background);

--notice-info-border-color: var(--grey-5);

--form-input-background: var(--grey-8);

--form-input-text-color: var(--grey-3);

--form-input-border-color: var(--grey-6);

--form-button-background: var(--grey-3);

--form-button-border-color: var(--grey-5);

}

[/code]

[code]

/* Custom theme. OLED dark-mode theme */

body.dark, body[data-current-user-theme="dark"] {

--grey-0: #e8e8e8;

--grey-1: #d1d1d1;

--grey-2: #ababab;

--grey-3: #919191;

--grey-4: #777777;

--grey-5: #5b5b5b;

--grey-6: #3f3f3f;

--grey-7: #2c2c2c;

--grey-8: #191919;

--grey-9: #000000;

--link-color: #ff4500;

--link-hover-color: #f47464;

--collection-pool-color: var(--link-color);

--collection-pool-hover-color: var(--link-hover-color);

--text-color: var(--grey-2);

--header-color: var(--grey-1);

--post-resized-notice-background: var(--post-search-notice-background);

--notice-info-background: var(--post-search-notice-background);

--post-child-notice-background: var(--post-search-notice-background);

--post-parent-notice-background: var(--post-search-notice-background);

--notice-info-border-color: var(--grey-5);

--form-input-background: var(--grey-8);

--form-input-text-color: var(--grey-3);

--form-input-border-color: var(--grey-6);

--form-button-background: var(--grey-3);

--form-button-border-color: var(--grey-5);

}

[/code]

[code]

/* Custom theme. Grey/dark on desktop, OLED dark on mobile */

body.dark, body[data-current-user-theme="dark"] {

--grey-0: #f6f6f6;

--grey-1: #e8e8e8;

--grey-2: #d1d1d1;

--grey-3: #ababab;

--grey-4: #919191;

--grey-5: #777777;

--grey-6: #5b5b5b;

--grey-7: #3f3f3f;

--grey-8: #2c2c2c;

--grey-9: #191919;

--link-color: #ff4500;

--link-hover-color: #f47464;

--collection-pool-color: var(--link-color);

--collection-pool-hover-color: var(--link-hover-color);

--text-color: var(--grey-3);

--header-color: var(--grey-2);

--post-resized-notice-background: var(--post-search-notice-background);

--notice-info-background: var(--post-search-notice-background);

--post-child-notice-background: var(--post-search-notice-background);

--post-parent-notice-background: var(--post-search-notice-background);

--notice-info-border-color: var(--grey-5);

--form-input-background: var(--grey-8);

--form-input-text-color: var(--grey-3);

--form-input-border-color: var(--grey-6);

--form-button-background: var(--grey-3);

--form-button-border-color: var(--grey-5);

}

@media (max-width: 660px) {

body.dark, body[data-current-user-theme="dark"] {

--grey-0: #e8e8e8;

--grey-1: #d1d1d1;

--grey-2: #ababab;

--grey-3: #919191;

--grey-4: #777777;

--grey-5: #5b5b5b;

--grey-6: #3f3f3f;

--grey-7: #2c2c2c;

--grey-8: #191919;

--grey-9: #000000;

--text-color: var(--grey-2);

--header-color: var(--grey-1);

}

[/code]

[code]

/* =========== Color Palettes =========== */

/*

*

• 𝗖 𝗢 𝗟 𝗢 𝗥
• v 1.9.1

*

• ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

:root {

/* General

• ─────────────────────────────────── */

--oc-white: #ffffff;

--oc-black: #000000;

/* Gray

• ─────────────────────────────────── */

--oc-gray-0: #f8f9fa;

--oc-gray-1: #f1f3f5;

--oc-gray-2: #e9ecef;

--oc-gray-3: #dee2e6;

--oc-gray-4: #ced4da;

--oc-gray-5: #adb5bd;

--oc-gray-6: #868e96;

--oc-gray-7: #495057;

--oc-gray-8: #343a40;

--oc-gray-9: #212529;

/* Red

• ─────────────────────────────────── */

--oc-red-0: #fff5f5;

--oc-red-1: #ffe3e3;

--oc-red-2: #ffc9c9;

--oc-red-3: #ffa8a8;

--oc-red-4: #ff8787;

--oc-red-5: #ff6b6b;

--oc-red-6: #fa5252;

--oc-red-7: #f03e3e;

--oc-red-8: #e03131;

--oc-red-9: #c92a2a;

/* Pink

• ─────────────────────────────────── */

--oc-pink-0: #fff0f6;

--oc-pink-1: #ffdeeb;

--oc-pink-2: #fcc2d7;

--oc-pink-3: #faa2c1;

--oc-pink-4: #f783ac;

--oc-pink-5: #f06595;

--oc-pink-6: #e64980;

--oc-pink-7: #d6336c;

--oc-pink-8: #c2255c;

--oc-pink-9: #a61e4d;

/* Grape

• ─────────────────────────────────── */

--oc-grape-0: #f8f0fc;

--oc-grape-1: #f3d9fa;

--oc-grape-2: #eebefa;

--oc-grape-3: #e599f7;

--oc-grape-4: #da77f2;

--oc-grape-5: #cc5de8;

--oc-grape-6: #be4bdb;

--oc-grape-7: #ae3ec9;

--oc-grape-8: #9c36b5;

--oc-grape-9: #862e9c;

/* Violet

• ─────────────────────────────────── */

--oc-violet-0: #f3f0ff;

--oc-violet-1: #e5dbff;

--oc-violet-2: #d0bfff;

--oc-violet-3: #b197fc;

--oc-violet-4: #9775fa;

--oc-violet-5: #845ef7;

--oc-violet-6: #7950f2;

--oc-violet-7: #7048e8;

--oc-violet-8: #6741d9;

--oc-violet-9: #5f3dc4;

/* Indigo

• ─────────────────────────────────── */

--oc-indigo-0: #edf2ff;

--oc-indigo-1: #dbe4ff;

--oc-indigo-2: #bac8ff;

--oc-indigo-3: #91a7ff;

--oc-indigo-4: #748ffc;

--oc-indigo-5: #5c7cfa;

--oc-indigo-6: #4c6ef5;

--oc-indigo-7: #4263eb;

--oc-indigo-8: #3b5bdb;

--oc-indigo-9: #364fc7;

/* Blue

• ─────────────────────────────────── */

--oc-blue-0: #e7f5ff;

--oc-blue-1: #d0ebff;

--oc-blue-2: #a5d8ff;

--oc-blue-3: #74c0fc;

--oc-blue-4: #4dabf7;

--oc-blue-5: #339af0;

--oc-blue-6: #228be6;

--oc-blue-7: #1c7ed6;

--oc-blue-8: #1971c2;

--oc-blue-9: #1864ab;

/* Cyan

• ─────────────────────────────────── */

--oc-cyan-0: #e3fafc;

--oc-cyan-1: #c5f6fa;

--oc-cyan-2: #99e9f2;

--oc-cyan-3: #66d9e8;

--oc-cyan-4: #3bc9db;

--oc-cyan-5: #22b8cf;

--oc-cyan-6: #15aabf;

--oc-cyan-7: #1098ad;

--oc-cyan-8: #0c8599;

--oc-cyan-9: #0b7285;

/* Teal

• ─────────────────────────────────── */

--oc-teal-0: #e6fcf5;

--oc-teal-1: #c3fae8;

--oc-teal-2: #96f2d7;

--oc-teal-3: #63e6be;

--oc-teal-4: #38d9a9;

--oc-teal-5: #20c997;

--oc-teal-6: #12b886;

--oc-teal-7: #0ca678;

--oc-teal-8: #099268;

--oc-teal-9: #087f5b;

/* Green

• ─────────────────────────────────── */

--oc-green-0: #ebfbee;

--oc-green-1: #d3f9d8;

--oc-green-2: #b2f2bb;

--oc-green-3: #8ce99a;

--oc-green-4: #69db7c;

--oc-green-5: #51cf66;

--oc-green-6: #40c057;

--oc-green-7: #37b24d;

--oc-green-8: #2f9e44;

--oc-green-9: #2b8a3e;

/* Lime

• ─────────────────────────────────── */

--oc-lime-0: #f4fce3;

--oc-lime-1: #e9fac8;

--oc-lime-2: #d8f5a2;

--oc-lime-3: #c0eb75;

--oc-lime-4: #a9e34b;

--oc-lime-5: #94d82d;

--oc-lime-6: #82c91e;

--oc-lime-7: #74b816;

--oc-lime-8: #66a80f;

--oc-lime-9: #5c940d;

/* Yellow

• ─────────────────────────────────── */

--oc-yellow-0: #fff9db;

--oc-yellow-1: #fff3bf;

--oc-yellow-2: #ffec99;

--oc-yellow-3: #ffe066;

--oc-yellow-4: #ffd43b;

--oc-yellow-5: #fcc419;

--oc-yellow-6: #fab005;

--oc-yellow-7: #f59f00;

--oc-yellow-8: #f08c00;

--oc-yellow-9: #e67700;

/* Orange

• ─────────────────────────────────── */

--oc-orange-0: #fff4e6;

--oc-orange-1: #ffe8cc;

--oc-orange-2: #ffd8a8;

--oc-orange-3: #ffc078;

--oc-orange-4: #ffa94d;

--oc-orange-5: #ff922b;

--oc-orange-6: #fd7e14;

--oc-orange-7: #f76707;

--oc-orange-8: #e8590c;

--oc-orange-9: #d9480f;

}

html,

body[data-current-user-theme="light"] {

--body-background-color: var(--oc-pink-0);

--text-color: var(--oc-pink-9);

--inverse-text-color: var(--oc-pink-0);

--muted-text-color: var(--oc-pink-7);

--header-color: var(--grey-9);

--link-color: var(--oc-red-6);

--link-hover-color: var(--oc-red-4);

--default-border-color: var(--oc-pink-1);

--success-color: var(--oc-green-5);

--warning-color: var(--oc-yellow-3);

--error-color: var(--oc-red-7);

--success-hover-color: var(--oc-green-3);

--warning-hover-color: var(--oc-yellow-2);

--error-hover-color: var(--oc-red-5);

--error-background-color: var(--oc-red-2);

--success-background-color: var(--oc-green-1);

--target-background: var(--oc-yellow-0);

--subnav-menu-background-color: var(--oc-pink-1);

--responsive-menu-background-color: var(--oc-pink-1);

--card-background-color: var(--body-background-color);

--form-input-text-color: var(--text-color);

--form-input-background: var(--body-background-color);

--form-input-border-color: var(--oc-pink-2);

--form-input-placeholder-text-color: var(--oc-pink-4);

--form-input-validation-error-border-color: var(--oc-red-4);

--form-input-validation-error-text-color: var(--oc-red-6);

--form-button-text-color: var(--text-color);

--form-button-disabled-text-color: var(--oc-pink-5);

--form-button-background: var(--oc-pink-1);

--form-button-border-color: var(--oc-pink-2);

--form-button-hover-background: var(--oc-pink-0);

--form-button-hover-box-shadow-color: var(--oc-pink-5);

--form-button-active-background: var(--oc-pink-2);

--button-text-color: var(--inverse-text-color);

--button-disabled-color: var(--muted-text-color);

--button-primary-background-color: var(--link-color);

--button-primary-hover-background-color: var(--link-hover-color);

--button-danger-background-color: var(--warning-color);

--button-danger-hover-background-color: var(--warning-hover-color);

--button-outline-primary-color: var(--link-color);

--button-outline-danger-color: var(--warning-hover-color);

--quick-search-form-background: var(--body-background-color);

/* To–Do But Irrelevant */

/*

--user-upgrade-basic-background-color: var(--blue-0);

--user-upgrade-gold-background-color: var(--yellow-1);

--user-upgrade-platinum-background-color: var(--blue-1);

• /

/*

--table-header-border-color: var(--grey-6);

--table-row-border-color: var(--grey-2);

--table-row-hover-background: var(--blue-1);

--table-even-row-background: var(--grey-0);

--preview-pending-color: var(--blue-5);

--preview-flagged-color: var(--red-5);

--preview-deleted-color: var(--grey-9);

--preview-has-children-color: var(--green-3);

--preview-has-parent-color: var(--yellow-3);

--preview-selected-color: rgba(0 0 0 / 15%);

--preview-icon-color: var(--inverse-text-color);

--preview-icon-background: rgba(0 0 0 / 70%);

--media-asset-placeholder-background-color: var(--grey-1);

--modqueue-tag-warning-color: var(--red-1);

--uploads-dropzone-background: var(--grey-1);

--uploads-dropzone-progress-bar-foreground-color: var(--link-color);

--uploads-dropzone-progress-bar-background-color: var(--link-hover-color);

--forum-vote-up-color: var(--green-5);

--forum-vote-meh-color: var(--orange-3);

--forum-vote-down-color: var(--red-5);

--forum-topic-status-new-color: var(--red-5);

--forum-topic-status-pending-color: var(--blue-5);

--forum-topic-status-approved-color: var(--green-5);

--forum-topic-status-rejected-color: var(--red-5);

--moderation-report-text-color: var(--red-5);

--moderation-report-background-color: var(--red-1);

--comment-sticky-background-color: var(--blue-0);

--post-tooltip-background-color: var(--body-background-color);

--post-tooltip-border-color: var(--grey-2);

--post-tooltip-header-background-color: var(--blue-0);

--post-tooltip-info-color: var(--muted-text-color);

--post-tooltip-scrollbar-background: var(--grey-4);

--post-tooltip-scrollbar-thumb-color: var(--grey-5);

--post-tooltip-scrollbar-track-background: var(--grey-1);

--user-tooltip-positive-feedback-color: var(--orange-3);

--user-tooltip-negative-feedback-color: var(--red-5);

--autocomplete-selected-background-color: var(--blue-1);

--autocomplete-border-color: var(--grey-2);

--autocomplete-tag-autocorrect-underline: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAHElEQVQYV2NkQAL/GRj+M4IJBgY4zQhSABMEsQHMOAgCT5YN9gAAAABJRU5ErkJggg==");

--diff-list-added-color: var(--green-5);

--diff-list-removed-color: var(--red-5);

--diff-list-obsolete-added-color: var(--green-7);

--diff-list-obsolete-removed-color: var(--red-7);

--wiki-page-versions-diff-del-background: var(--red-2);

--wiki-page-versions-diff-ins-background: var(--green-2);

--post-notice-border-color: var(--grey-2);

--post-parent-notice-background: var(--green-0);

--post-child-notice-background: var(--yellow-0);

--post-pending-notice-background: var(--blue-1);

--post-banned-notice-background: var(--red-1);

--post-deleted-notice-background: var(--red-1);

--post-resized-notice-background: var(--magenta-1);

--post-search-notice-background: var(--grey-1);

--post-artist-commentary-container-background: var(--grey-0);

--post-artist-commentary-container-border-color: var(--grey-1);

--post-upvote-color: var(--link-color);

--post-downvote-color: var(--red-5);

--note-body-background: #ffffee;

--note-body-text-color: var(--black);

--note-body-border-color: var(--black);

--note-box-border-color: var(--black);

--note-box-shadow: 0 0 0 1px white;

--unsaved-note-box-border-color: var(--red-4);

--movable-note-box-border-color: var(--blue-5);

--note-preview-border-color: var(--red-4);

--note-preview-background: var(--note-body-background);

--note-highlight-color: var(--blue-5);

--note-tn-color: var(--muted-text-color);

--series-pool-color: var(--copyright-tag-color);

--series-pool-hover-color: var(--copyright-tag-hover-color);

--collection-pool-color: var(--general-tag-color);

--collection-pool-hover-color: var(--general-tag-hover-color);

--fetch-source-data-border-color: var(--grey-2);

--post-mode-menu-active-post-outline-color: var(--blue-2);

--post-mode-menu-translation-background: var(--blue-2);

--tag-count-color: var(--muted-text-color);

--low-post-count-color: var(--red-5);

--remove-favorite-button: var(--red-4);

--ugoira-seek-slider-background: var(--grey-0);

--ugoira-seek-slider-progressbar-background: var(--white);

--keyboard-shortcut-color: var(--inverse-text-color);

--keyboard-shortcut-background-color: var(--grey-6);

--login-link-color: var(--red-5);

--footer-border-color: var(--grey-1);

--divider-border-color: var(--grey-1);

--divider-border-hover-color: var(--grey-3);

--jquery-ui-widget-content-background: var(--body-background-color);

--jquery-ui-widget-content-text-color: var(--text-color);

--notice-error-background: var(--red-1);

--notice-error-border-color: var(--red-2);

--notice-info-background: var(--yellow-0);

--notice-info-border-color: var(--yellow-1);

--dtext-blockquote-border-color: var(--grey-4);

--dtext-hr-color: var(--grey-2);

--dtext-code-background: var(--grey-1);

--dtext-details-background-color: var(--grey-0);

--dtext-details-summary-background-color: var(--grey-1);

--dtext-details-summary-hover-background-color: var(--grey-2);

--dtext-details-summary-text-color: var(--header-color);

--dtext-spoiler-background-color: var(--text-color);

--dtext-spoiler-hover-color: var(--inverse-text-color);

--wiki-page-other-name-background-color: var(--grey-1);

--paginator-arrow-background-color: var(--inverse-text-color);

--paginator-arrow-color: var(--link-color);

--asset-paginator-link-color: var(--link-color);

--asset-paginator-link-hover-color: var(--link-color);

--asset-paginator-background-color: var(--white);

--asset-paginator-background-hover-color: var(--white);

--artist-tag-color: var(--red-6);

--artist-tag-hover-color: var(--red-5);

--copyright-tag-color: var(--magenta-6);

--copyright-tag-hover-color: var(--magenta-5);

--character-tag-color: var(--green-4);

--character-tag-hover-color: var(--green-3);

--general-tag-color: var(--link-color);

--general-tag-hover-color: var(--link-hover-color);

--meta-tag-color: var(--orange-3);

--meta-tag-hover-color: var(--orange-2);

--user-admin-color: var(--red-5);

--user-moderator-color: var(--character-tag-color);

--user-builder-color: var(--copyright-tag-color);

--user-platinum-color: var(--grey-5);

--user-gold-color: var(--meta-tag-color);

--user-member-color: var(--general-tag-color);

--user-restricted-color: var(--general-tag-color);

--user-banned-color: var(--grey-8);

--user-verified-email-color: var(--green-4);

--user-unverified-email-color: var(--yellow-2);

--news-updates-background: var(--grey-0);

--news-updates-border-color: var(--grey-1);

--inactive-artist-url-color: var(--red-6);

--inactive-artist-url-hover-color: var(--red-5);

--banned-artist-label-color: var(--red-5);

--deleted-artist-label-color: var(--grey-6);

• /

}

/* variables that aren't defined in the dark theme fall back to the :root theme */

/*

@mixin dark-theme {

--body-background-color: var(--grey-9);

--text-color: var(--grey-2);

--inverse-text-color: var(--grey-0);

--muted-text-color: var(--grey-4);

--header-color: var(--grey-1);

--link-color: var(--azure-4);

--link-hover-color: var(--azure-3);

--success-color: var(--green-4);

--warning-color: var(--yellow-3);

--error-color: var(--red-4);

--success-hover-color: var(--green-3);

--warning-hover-color: var(--yellow-2);

--error-hover-color: var(--red-3);

--default-border-color: var(--grey-7);

--error-background-color: var(--red-9);

--success-background-color: var(--green-9);

--target-background: var(--azure-8);

--subnav-menu-background-color: var(--grey-8);

--responsive-menu-background-color: var(--grey-8);

--card-background-color: var(--grey-8);

--form-input-text-color: var(--grey-2);

--form-input-background: var(--grey-7);

--form-input-border-color: var(--grey-5);

--form-input-placeholder-text-color: var(--grey-3);

--form-input-validation-error-border-color: var(--red-4);

--form-input-validation-error-text-color: var(--red-5);

--form-button-text-color: var(--grey-9);

--form-button-disabled-text-color: var(--grey-5);

--form-button-background: var(--grey-2);

--form-button-border-color: var(--grey-4);

--form-button-hover-background: var(--grey-0);

--form-button-hover-box-shadow-color: var(--grey-5);

--form-button-active-background: var(--grey-3);

--button-text-color: var(--white);

--button-disabled-color: var(--grey-4);

--button-primary-background-color: var(--link-color);

--button-primary-hover-background-color: var(--link-hover-color);

--button-danger-background-color: var(--red-4);

--button-danger-hover-background-color: var(--red-3);

--button-outline-primary-color: var(--azure-4);

--button-outline-danger-color: var(--red-4);

--quick-search-form-background: var(--grey-9);

--user-upgrade-basic-background-color: var(--grey-8);

--user-upgrade-gold-background-color: var(--grey-7);

--user-upgrade-platinum-background-color: var(--blue-9);

--table-header-border-color: var(--grey-7);

--table-row-border-color: var(--grey-7);

--table-even-row-background: var(--grey-8);

--table-row-hover-background: var(--grey-7);

--preview-pending-color: var(--azure-4);

--preview-flagged-color: var(--red-5);

--preview-deleted-color: var(--grey-3);

--preview-has-children-color: var(--green-3);

--preview-has-parent-color: var(--orange-3);

--preview-selected-color: rgba(255 255 255 / 25%);

--media-asset-placeholder-background-color: var(--grey-8);

--modqueue-tag-warning-color: var(--red-7);

--uploads-dropzone-background: var(--grey-7);

--uploads-dropzone-progress-bar-foreground-color: var(--link-color);

--uploads-dropzone-progress-bar-background-color: var(--link-hover-color);

--forum-vote-up-color: var(--green-4);

--forum-vote-meh-color: var(--yellow-2);

--forum-vote-down-color: var(--red-4);

--forum-topic-status-new-color: var(--red-3);

--forum-topic-status-pending-color: var(--azure-3);

--forum-topic-status-approved-color: var(--green-3);

--forum-topic-status-rejected-color: var(--red-3);

--moderation-report-text-color: var(--red-4);

--moderation-report-background-color: var(--red-9);

--comment-sticky-background-color: var(--azure-8);

--post-tooltip-background-color: var(--grey-8);

--post-tooltip-border-color: var(--grey-7);

--post-tooltip-header-background-color: var(--grey-8);

--post-tooltip-info-color: var(--grey-2);

--post-tooltip-scrollbar-background: var(--grey-4);

--post-tooltip-scrollbar-thumb-color: var(--grey-5);

--post-tooltip-scrollbar-track-background: var(--grey-1);

--user-tooltip-positive-feedback-color: var(--yellow-1);

--user-tooltip-negative-feedback-color: var(--red-1);

--autocomplete-selected-background-color: var(--grey-7);

--autocomplete-border-color: var(--grey-4);

--diff-list-added-color: var(--green-4);

--diff-list-removed-color: var(--red-4);

--diff-list-obsolete-added-color: var(--green-6);

--diff-list-obsolete-removed-color: var(--red-6);

--wiki-page-versions-diff-del-background: var(--red-8);

--wiki-page-versions-diff-ins-background: var(--green-8);

--post-notice-border-color: var(--grey-7);

--post-parent-notice-background: var(--green-8);

--post-child-notice-background: var(--yellow-8);

--post-pending-notice-background: var(--blue-8);

--post-banned-notice-background: var(--red-8);

--post-deleted-notice-background: var(--red-8);

--post-resized-notice-background: var(--purple-8);

--post-search-notice-background: var(--grey-8);

--post-artist-commentary-container-background: var(--grey-8);

--post-artist-commentary-container-border-color: var(--grey-7);

--post-upvote-color: var(--link-color);

--post-downvote-color: var(--red-4);

--unsaved-note-box-border-color: var(--red-5);

--movable-note-box-border-color: var(--blue-5);

--note-preview-border-color: var(--red-5);

--note-highlight-color: var(--blue-5);

--series-pool-color: var(--copyright-tag-color);

--series-pool-hover-color: var(--copyright-tag-hover-color);

--collection-pool-color: var(--general-tag-color);

--collection-pool-hover-color: var(--general-tag-hover-color);

--fetch-source-data-border-color: var(--grey-4);

--post-mode-menu-active-post-outline-color: var(--azure-4);

--post-mode-menu-translation-background: var(--blue-8);

--low-post-count-color: var(--red-4);

--remove-favorite-button: var(--red-4);

--ugoira-seek-slider-background: var(--grey-2);

--ugoira-seek-slider-progressbar-background: var(--grey-0);

--keyboard-shortcut-color: var(--grey-0);

--keyboard-shortcut-background-color: var(--grey-7);

--login-link-color: var(--red-4);

--footer-border-color: var(--grey-7);

--divider-border-color: var(--grey-7);

--divider-border-hover-color: var(--grey-6);

--jquery-ui-widget-content-text-color: var(--text-color);

--jquery-ui-widget-content-background: var(--grey-8);

--notice-error-background: var(--red-8);

--notice-error-border-color: var(--red-7);

--notice-info-background: var(--azure-8);

--notice-info-border-color: var(--azure-6);

--dtext-blockquote-border-color: var(--grey-4);

--dtext-hr-color: var(--grey-7);

--dtext-code-background: var(--grey-8);

--dtext-details-background-color: var(--grey-8);

--dtext-details-summary-background-color: var(--grey-7);

--dtext-details-summary-hover-background-color: var(--grey-6);

--dtext-details-summary-text-color: var(--text-color);

--dtext-spoiler-background-color: black;

--dtext-spoiler-hover-color: var(--grey-0);

--wiki-page-other-name-background-color: var(--grey-8);

--paginator-arrow-background-color: var(--grey-0);

--paginator-arrow-color: var(--link-color);

--asset-paginator-link-color: var(--white);

--asset-paginator-link-hover-color: var(--white);

--asset-paginator-background-color: var(--grey-9);

--asset-paginator-background-hover-color: var(--grey-8);

--artist-tag-color: var(--red-3);

--artist-tag-hover-color: var(--red-2);

--copyright-tag-color: var(--purple-3);

--copyright-tag-hover-color: var(--purple-2);

--character-tag-color: var(--green-3);

--character-tag-hover-color: var(--green-2);

--general-tag-color: var(--azure-4);

--general-tag-hover-color: var(--azure-3);

--meta-tag-color: var(--yellow-2);

--meta-tag-hover-color: var(--yellow-1);

--user-admin-color: var(--artist-tag-color);

--user-moderator-color: var(--character-tag-color);

--user-builder-color: var(--copyright-tag-color);

--user-platinum-color: var(--grey-3);

--user-gold-color: var(--meta-tag-color);

--user-member-color: var(--general-tag-color);

--user-restricted-color: var(--general-tag-color);

--user-banned-color: var(--grey-6);

--user-verified-email-color: var(--green-3);

--user-unverified-email-color: var(--yellow-2);

--news-updates-background: var(--grey-7);

--news-updates-border-color: var(--grey-6);

--inactive-artist-url-color: var(--red-4);

--inactive-artist-url-hover-color: var(--red-3);

--banned-artist-label-color: var(--red-5);

--deleted-artist-label-color: var(--grey-6);

}

body[data-current-user-theme="dark"] {

@include dark-theme;

}

@media (prefers-color-scheme: dark) {

body {

@include dark-theme;

}

}

• /

/* =========== Styles =========== */

/* Base styles & variables */

:root {

--base-border-radius: .7em;

}

/* Rainbow staff names */

a.user-owner,

a.user-admin {

background: linear-gradient(to right, orange, yellow, green, cyan, blue, violet);

background: linear-gradient(to right, hsl(0, 100%, 50%), hsl(60, 100%, 50%), hsl(120, 100%, 50%), hsl(180, 100%, 50%), hsl(300, 100%, 50%));

background-clip: text;

color: transparent;

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

animation: hue 5s infinite linear;

}

@keyframes hue {

from {

filter: hue-rotate(0deg);

}

to {

filter: hue-rotate(360deg);

}

}

/* Round fav button */

div#c-posts .fav-buttons button.ui-button {

padding: .5em;

border-radius: 100%;

height: 42px;

width: 42px;

}

/* Danbooru Logo */

header#top #app-name-header,

#app-name {

color: var(--red-5);

font-family: "Gabriola", "Segoe Print", cursive, ui-sans-serif, sans-serif;

}

#app-name {

color: var(--red-7);

}

header#top nav#nav li.current>a {

border-radius: var(--base-border-radius) var(--base-border-radius) 0 0;

}

header#top nav#nav menu#subnav-menu {

border-radius: var(--base-border-radius);

}

section#search-box form #tags {

border-radius: var(--base-border-radius) 0 0 var(--base-border-radius);

}

section#search-box form button#search-box-submit {

border-radius: 0 var(--base-border-radius) var(--base-border-radius) 0;

}

.notice,

div#c-posts div#a-show section#content #artist-commentary,

#content>section.image-container picture>img,

.post-gallery img.post-preview-image,

img.post-preview-image,

input,

input[type=submit],

select,

textarea {

border-radius: var(--base-border-radius);

}

/* ugly hack to fix awkward overflow on initial sizes… please send help */

.prose::after {

content: "\00a0";

}

[/code]

[code]

/* Custom theme. Pink pastel light theme */

a.user-owner,

a.user-admin {

background: linear-gradient(to right, orange , yellow, green, cyan, blue, violet);

background-clip: text;

color: transparent;

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

}

:root {

--body-font: cursive;

}

html {

--pink-0: #fff0f6;

--pink-1: #ffdeeb;

--pink-2: #fcc2d7;

--pink-3: #faa2c1;

--pink-4: #f783ac;

--pink-5: #f06595;

--pink-6: #e64980;

--pink-7: #d6336c;

--pink-8: #c2255c;

--pink-9: #a61e4d;

}

html, body[data-current-user-theme="light"] {

--body-background-color: var(--pink-0);

--text-color: var(--pink-9);

--inverse-text-color: var(--pink-0);

--muted-text-color: var(--pink-7);

--header-color: var(--text-color);

--link-color: var(--red-6);

--link-hover-color: var(--red-4);

--default-border-color: var(--pink-1);

--error-background-color: var(--red-1);

--success-background-color: var(--green-1);

--target-background: var(--yellow-0);

--subnav-menu-background-color: var(--pink-1);

--responsive-menu-background-color: var(--pink-1);

--form-input-text-color: var(--text-color);

--form-input-background: var(--body-background-color);

--form-input-border-color: var(--pink-2);

--form-input-placeholder-text-color: var(--pink-4);

--form-input-validation-error-border-color: var(--red-4);

--form-input-validation-error-text-color: var(--red-5);

--form-button-text-color: var(--text-color);

--form-button-disabled-text-color: var(--pink-5);

--form-button-background: var(--pink-1);

--form-button-border-color: var(--pink-2);

--form-button-hover-background: var(--pink-0);

--form-button-hover-box-shadow-color: var(--pink-5);

--form-button-active-background: var(--pink-2);

--button-primary-text-color: var(--white);

--button-primary-background-color: var(--link-color);

--button-primary-hover-background-color: var(--link-hover-color);

--button-primary-disabled-color: var(--pink-5);

--button-outline-primary-color: var(--link-color);

--quick-search-form-background: var(--body-background-color);

--user-upgrade-basic-background-color: var(--blue-0);

--user-upgrade-gold-background-color: var(--yellow-1);

--user-upgrade-platinum-background-color: var(--blue-1);

--table-header-border-color: var(--pink-6);

--table-row-border-color: var(--pink-2);

--table-row-hover-background: var(--purple-1);

--table-even-row-background: var(--pink-1);

--preview-pending-color: var(--blue-5);

--preview-flagged-color: var(--red-5);

--preview-deleted-color: var(--grey-9);

--preview-has-children-color: var(--green-3);

--preview-has-parent-color: var(--yellow-3);

--preview-selected-color: rgba(0, 0, 0, 0.15);

--preview-icon-color: var(--inverse-text-color);

--preview-icon-background: rgba(0, 0, 0, 0.7);

--media-asset-placeholder-background-color: var(--pink-1);

--modqueue-tag-warning-color: var(--red-1);

--file-upload-component-background-color: var(--body-background-color);

--uploads-dropzone-background: var(--pink-1);

--uploads-dropzone-progress-bar-foreground-color: var(--link-color);

--uploads-dropzone-progress-bar-background-color: var(--link-hover-color);

--forum-vote-up-color: var(--green-5);

--forum-vote-meh-color: var(--orange-3);

--forum-vote-down-color: var(--red-5);

--forum-topic-status-new-color: var(--red-5);

--forum-topic-status-pending-color: var(--blue-5);

--forum-topic-status-approved-color: var(--green-5);

--forum-topic-status-rejected-color: var(--red-5);

--moderation-report-text-color: var(--red-5);

--moderation-report-background-color: var(--red-1);

--comment-sticky-background-color: var(--blue-0);

--post-tooltip-background-color: var(--body-background-color);

--post-tooltip-border-color: var(--pink-2);

--post-tooltip-header-background-color: var(--pink-0);

--post-tooltip-info-color: var(--muted-text-color);

--post-tooltip-scrollbar-background: var(--pink-4);

--post-tooltip-scrollbar-thumb-color: var(--pink-5);

--post-tooltip-scrollbar-track-background: var(--pink-1);

--user-tooltip-positive-feedback-color: var(--orange-3);

--user-tooltip-negative-feedback-color: var(--red-5);

--autocomplete-selected-background-color: var(--purple-1);

--autocomplete-border-color: var(--pink-2);

--autocomplete-tag-autocorrect-underline: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAHElEQVQYV2NkQAL/GRj+M4IJBgY4zQhSABMEsQHMOAgCT5YN9gAAAABJRU5ErkJggg==);

--diff-list-added-color: var(--green-5);

--diff-list-removed-color: var(--red-5);

--diff-list-obsolete-added-color: var(--green-7);

--diff-list-obsolete-removed-color: var(--red-7);

--wiki-page-versions-diff-del-background: var(--red-2);

--wiki-page-versions-diff-ins-background: var(--green-2);

--post-notice-border-color: var(--grey-2);

--post-parent-notice-background: var(--green-0);

--post-child-notice-background: var(--yellow-0);

--post-pending-notice-background: var(--blue-1);

--post-banned-notice-background: var(--red-1);

--post-deleted-notice-background: var(--red-1);

--post-resized-notice-background: var(--magenta-1);

--post-search-notice-background: var(--pink-1);

--post-artist-commentary-container-background: var(--pink-0);

--post-artist-commentary-container-border-color: var(--pink-1);

--post-upvote-color: var(--link-color);

--post-downvote-color: var(--red-5);

--note-body-background: #FFE;

--note-body-text-color: var(--black);

--note-body-border-color: var(--black);

--note-box-border-color: var(--black);

--note-box-shadow: 0 0 0 1px white;

--unsaved-note-box-border-color: var(--red-4);

--movable-note-box-border-color: var(--blue-5);

--note-preview-border-color: var(--red-4);

--note-preview-background: var(--note-body-background);

--note-highlight-color: var(--blue-5);

--note-tn-color: var(--muted-text-color);

--series-pool-color: var(--copyright-tag-color);

--series-pool-hover-color: var(--copyright-tag-hover-color);

--collection-pool-color: var(--general-tag-color);

--collection-pool-hover-color: var(--general-tag-hover-color);

--fetch-source-data-border-color: var(--pink-2);

--post-mode-menu-active-post-outline-color: var(--purple-2);

--post-mode-menu-translation-background: var(--purple-2);

--tag-count-color: var(--muted-text-color);

--low-post-count-color: var(--red-5);

--remove-favorite-button: var(--red-4);

--ugoira-seek-slider-background: var(--purple-0);

--ugoira-seek-slider-progressbar-background: var(--white);

--keyboard-shortcut-color: var(--inverse-text-color);

--keyboard-shortcut-background-color: var(--pink-6);

--login-link-color: var(--red-5);

--footer-border-color: var(--pink-1);

--divider-border-color: var(--pink-2);

--jquery-ui-widget-content-background: var(--body-background-color);

--jquery-ui-widget-content-text-color: var(--text-color);

--notice-error-background: var(--red-1);

--notice-error-border-color: var(--red-2);

--notice-info-background: var(--yellow-0);

--notice-info-border-color: var(--yellow-1);

--dtext-blockquote-border-color: var(--purple-4);

--dtext-code-background: var(--purple-1);

--dtext-expand-border: 1px solid var(--purple-3);

--dtext-spoiler-background-color: var(--text-color);

--dtext-spoiler-hover-color: var(--inverse-text-color);

--wiki-page-other-name-background-color: var(--purple-1);

--paginator-arrow-background-color: var(--inverse-text-color);

--paginator-arrow-color: var(--link-color);

--artist-tag-color: var(--purple-6);

--artist-tag-hover-color: var(--purple-5);

--copyright-tag-color: var(--azure-6);

--copyright-tag-hover-color: var(--azure-5);

--character-tag-color: var(--green-6);

--character-tag-hover-color: var(--green-5);

--general-tag-color: var(--link-color);

--general-tag-hover-color: var(--link-hover-color);

--meta-tag-color: var(--orange-6);

--meta-tag-hover-color: var(--orange-5);

/*--user-admin-color: var(--red-5);*/

--user-moderator-color: var(--character-tag-color);

--user-builder-color: var(--copyright-tag-color);

--user-platinum-color: var(--grey-7);

--user-gold-color: DarkGoldenrod;

--user-member-color: var(--general-tag-color);

--user-restricted-color: var(--pink-7);

--user-banned-color: Chocolate;

--user-verified-email-color: var(--green-4);

--user-unverified-email-color: var(--yellow-2);

/* #TODO */

--news-updates-background: var(--grey-0);

--news-updates-border-color: var(--grey-1);

--related-tags-container-background: var(--grey-0);

--selected-related-tag-background-color: var(--link-color);

--selected-related-tag-color: var(--inverse-text-color);

--inactive-artist-url-color: var(--red-6);

--inactive-artist-url-hover-color: var(--red-5);

--banned-artist-label-color: var(--red-5);

--deleted-artist-label-color: var(--grey-6);

}

div#c-posts .fav-buttons button.ui-button {

padding: .5em;

border-radius: 100%;

}

header#top #app-name-header {

color: var(--red-5);

}

[/code]

[code]

@keyframes huehue {

0% { filter: hue-rotate(0deg); }

50% { filter: hue-rotate(100deg); }

100% { filter: hue-rotate(0deg); }

}

a { animation: huehue 8s infinite;

}

[/code]