About:Custom Css Style Wiki

Custom CSS (cascade style sheet) is a way to change the look and (to an extent) the functionality of a website. Using CSS, you can customize the way that danbooru looks for you. Applying custom CSS will not change the looks of the site for other members, nor when you are logged out.

Below is a non-exhaustive list of custom CSS, which can be applied by copy-pasting the code into your account settings under "Advanced" -> "Custom CSS style".

AI tags page

Increase the size of the "Add" button on the ai_tags page

/* Make the "Add" button on the ai_tags page larger */
.c-ai-tags article button {
  height: 50px;
  width: 100%;
}

Fix height of media asset thumbnails on the ai_tags page

/* 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; }

Make thumbnails disappear after clicking "Add" on the ai_tags page

/* 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;
}

Make thumbnails unclickable on the ai_tags page

/* 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;
}

View, upload and edit posts

Enable colored thumbnail borders on mobile

/* Enable colored thumbnail borders on mobile */
.post-preview .post-preview-image {
  border: 2px solid transparent !important;
}
.post-preview.post-status-has-children .post-preview-image {
  border-color: var(--preview-has-children-color) !important;
}
.post-preview.post-status-has-parent .post-preview-image {
  border-color: var(--preview-has-parent-color) !important;
}
.post-preview.post-status-has-children.post-status-has-parent .post-preview-image {
  border-color: var(--preview-has-children-color) var(--preview-has-parent-color) var(--preview-has-parent-color) var(--preview-has-children-color) !important;
}
.post-preview.post-status-deleted .post-preview-image {
  border-color: var(--preview-deleted-color) !important;
}
.post-preview.post-status-has-children.post-status-deleted .post-preview-image {
  border-color: var(--preview-has-children-color) var(--preview-deleted-color) var(--preview-deleted-color) var(--preview-has-children-color) !important;
}
.post-preview.post-status-has-parent.post-status-deleted .post-preview-image {
  border-color: var(--preview-has-parent-color) var(--preview-deleted-color) var(--preview-deleted-color) var(--preview-has-parent-color) !important;
}
.post-preview.post-status-has-children.post-status-has-parent.post-status-deleted .post-preview-image {
  border-color: var(--preview-has-children-color) var(--preview-deleted-color) var(--preview-deleted-color) var(--preview-has-parent-color) !important;
}
.post-preview.post-status-pending:not(.mod-queue-preview) .post-preview-image,
.post-preview.post-status-flagged:not(.mod-queue-preview) .post-preview-image {
  border-color: var(--preview-pending-color) !important;
}
.post-preview.post-status-has-children.post-status-pending:not(.mod-queue-preview) .post-preview-image,
.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-pending-color) var(--preview-pending-color) var(--preview-has-children-color) !important;
}
.post-preview.post-status-has-parent.post-status-pending:not(.mod-queue-preview) .post-preview-image,
.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-pending-color) var(--preview-pending-color) var(--preview-has-parent-color) !important;
}
.post-preview.post-status-has-children.post-status-has-parent.post-status-pending:not(.mod-queue-preview) .post-preview-image,
.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-pending-color) var(--preview-pending-color) var(--preview-has-parent-color) !important;
}
body[data-current-user-is-approver="true"] .post-preview.post-status-flagged .post-preview-image {
  border-color: var(--preview-flagged-color) !important;
}
body[data-current-user-is-approver="true"] .post-preview.post-status-has-children.post-status-flagged .post-preview-image {
  border-color: var(--preview-has-children-color) var(--preview-flagged-color) var(--preview-flagged-color) var(--preview-has-children-color) !important;
}
body[data-current-user-is-approver="true"] .post-preview.post-status-has-parent.post-status-flagged .post-preview-image {
  border-color: var(--preview-has-parent-color) var(--preview-flagged-color) var(--preview-flagged-color) var(--preview-has-parent-color) !important;
}
body[data-current-user-is-approver="true"] .post-preview.post-status-has-children.post-status-has-parent.post-status-flagged .post-preview-image {
  border-color: var(--preview-has-children-color) var(--preview-flagged-color) var(--preview-flagged-color) var(--preview-has-parent-color) !important;
}

Show the ai-tags column on the upload page and in the post edit section

/* Enable the ai-tags column on post upload and edit */
.ai-tags-related-tags-column.hidden {
    display: initial !important;
}

Show a checkerboard pattern behind transparent images

/* Show a checkerboard pattern behind transparent images */
#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)
 */
html #image:hover, body[data-current-user-theme="light"] #image:hover {
    background: var(--checkerboard), var(--grey-9);
}
body[data-current-user-theme="dark"] #image:hover {
    background: var(--checkerboard), var(--white);
}
@media (prefers-color-scheme: dark) {
    #image:hover {
        background: var(--checkerboard), var(--white);
    }
}

Hide "upload for approval" checkbox on the upload page

/* Hide "upload for approval" checkbox */
#c-uploads .post_is_pending { display: none; }

Hide the redundant "no post found" message on the upload page's IQDB section

/* Hide redundant "no posts found" on IQDB search */
.iqdb-posts > .post-gallery > p {
  display: none;
}

Blur e- and q-rated thumbnails and unblur them on mouse-over

/* 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);
}

Show a checkmark next to the artist tag if the post is a self-upload

/* 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);
}

Keep 'mode-box' on screen while scrolling

/* Keep mode menu on screen when scrolling */
#mode-box {
  position: sticky;
  top: 0;
  background: var(--body-background-color);
  z-index: 1;
}

Add a red border to the thumbnails of flagged posts

/* 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;
}

Make the sidebar sticky

/* 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);
}

Screen-wide search bar (does not work in combination w/ DanbooruEX)

/* 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;
    }
}

Un-tabify / linearize the upload form

/* 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; }

Highlight (in red) deprecated tags in the tag list

/* highlight deprecated tags in the tag list */
[data-is-deprecated='true'] a, a[data-is-deprecated='true'] {
  color: var(--low-post-count-color) !important;
}

Blur instead of hiding blacklisted posts

/* 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;
}

Show banned status on post previews

/* 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);
}

Usernames

Disable level-based username colors (example: builder is purple)

/* Disable level-based username colors */
.user { color: var(--link-color) !important }

Make usernames on post comments and forum posts bold

/* Make usernames bold */
div.author-name {
  font-weight: bold;
}

Recolor admin usernames to rainbow, NNT to Italy, and Unbreakable to Kemo

/* 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;
}

Revert approver usernames to green and moderators to orange, as on oldbooru

/* 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; }

Recolor builders and contributor usernames to an animated rainbow

/* 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); }
}

Style usernames depending on permissions

/*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;}

Comments

Indicate whether a comment was bumped or not

/* 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;
}

Modqueue

Hide (spoiler) the uploader's username in the modqueue

/* Spoiler uploaders in the modqueue */
#c-modqueue #content .user:not(:hover) {
  background: black;
  color: black;
}

Make site icons larger on the modqueue

#c-modqueue img.h-4 {
  height: 2rem
}
#c-modqueue article .text-xs div {
  align-items: center; 
  display: flex;
}

Highlight posts with warning tags (e.g. third_party_edit, screenshot, ai_generated) in the modqueue grid view

/* 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;
}

Custom themes

Hide the logo and name "Danbooru" from the top of the page

/* Hide the top danbooru logo and name */
#app-name-header { display: none }

Hide only the logo from the top of the page

/*Hide the top danbooru logo*/
#app-logo { display: none; }

Hide the Log Out button

/* Hide the Log Out button */
#subnav-log-out-link { display: none; }

Dark-orange theme by user #480070

/* 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);
}

OLED black theme by user #480070

/* 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);
}

Dark on desktop & OLED dark on mobile, by user #480070

/* 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);
}

Tea pink theme, by user #722297

/* =========== 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";
}

Pink pastel light theme by user #722297

/* 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);
}

Make thumbnails and links flash rainbow