Topic: Custom CSS library [25-11-16]

Posted under e621 Tools and Applications

Waydence

Member

List of CSS snippets for user styles with preview images, maintained and checked for intercompatibility.
Starting mostly with ones that I use, but the list will be expanded soon. If you made some custom styles, or have an idea you want to see realized, feel free to contact me here or through discord.

Snippets with numbers in square brackets [1][2][3] are not recommended to be used together.
It is best to maintain the same order of styles as on this page, otherwise some might break.

Tip for Firefox: hold Ctrl while dragging to select cells instead of lines.

Contents

Updated

Waydence

Member

General [25-11-06] ▲ Back to contents

Code Notes
/* (Forum/CSS library) Makes snippets on this page auto-select with one click 25-10-27 */
.list-of-forum-posts:has(article#forum_post_470028) tr td:first-of-type {user-select: all} 		Useful if looking to copy more than a copule
of snippets from this page
/* (Settings/Advanced) Makes the Frequent Tags and custom CSS style boxes taller and wider 25-11-01 */
#user_favorite_tags {min-height: 4000px; min-width: 96vw}
#user_custom_style {min-height: 9000px; min-width: 96vw} 		Put before other styles so it's easy to tell
when you messed something up
/* (Settings/Advanced) Makes Frequent Tags and custom CSS style boxes taller and wider, adds color distinction 25-11-01 */
#c-users #a-edit tabs-content {max-width: unset; tab-group, tab-entry {max-width: 50rem; box-sizing: border-box;
&[name="customization"], &[search="posts tags frequent favorite related"], &[search="customize css styles"] {max-width: unset;
#user_favorite_tags {min-height: 4100px; width: 100%; border-left: .25rem solid var(--color-dtext-section)}
#user_custom_style {min-height: 10300px; width: 100%; border-left: .25rem solid var(--color-danger)}}}} 		Fancy version
/* (Post/Edit, Wiki/Edit) Makes "Edit Reason" input wider 25-09-20 */
input#post_edit_reason, input#wiki_page_edit_reason {width: 99%} 		Preview
/* (Home page) Hides news section 25-10-31 */
.home-section:has(.news-excerpt) {display: none} 		Preview
/* (Main page, Post index, Post, New Upload) Adds a gap between field and search button 25-10-20 */
.home-search, .post-search-form, .upload-source-row {button {margin-left: 1px}} 		Preview
/* (Post index, Post) Narrows the search button on Post index and Post 25-10-20 */
.post-search-form button {padding: .3rem} 		Preview
/* (Time) Displays exact time on hover, replacing "ago" time 25-10-31 */
div, li, #c-forum-topics td, #c-forum-posts td {&:has(> time, > a > time) {overflow: hidden;
time:hover {visibility: hidden; position: relative; &:before {visibility: visible; position: absolute; top: 0; content: attr(title); font-size: 99%; white-space: nowrap}}}} 		Preview
/* (Time) Displays exact time instantly with HTML popup 25-10-31 */
time:hover {position: relative; background: #fff2; &:after {position: absolute; bottom: 100%; z-index: 10; content: attr(title); background: var(--color-section-lighten-10);
border-radius: 5px 5px 5px 0; padding: 2px 5px 2px; box-shadow: 0 2px 4px -1px #000; white-space: nowrap; color: var(--color-text)}
@media only screen and (max-width: 50rem) {position: static; &:after {position: absolute; right: 50%; bottom: unset; transform: translate(50%, -105%); border-radius: 5px}}} 		Preview
/* (Tables, Forum/tag/set/pool listings) Makes clickable area on links taller 25-09-26 */
table.striped td a {padding-top: .5rem; padding-bottom: .5rem} 		Preview
/* (Pages with "Search Options") Widens search fields, adds horizontal scrolling on mobile 25-10-24 */
#searchform {overflow: auto; input { &.string {max-width: 95%; width: 26rem; padding: 1px .3rem} &#search_post_id, &#search_parent_id {width: 6rem}}} 		Preview
/* (Thumbs, Images) Unhides blacklisted favorited posts 25-11-06 */
#image-container, .post-thumbnail {&.blacklisted[data-is-favorited="true"] {
img, video {height: unset; width: unset; padding: 0; background: none; pointer-events: auto}
#note-container[enabled="true"] {display: block; visibility: visible}}}
#c-favorites, #c-popular, #c-posts #a-index {.thumbnail.blacklisted[data-is-favorited="true"] {display: flex;
a {background: rgba(0,0,0,.2); &:before {display: none} img {visibility: visible}}}}
article.thumbnail.blacklisted[data-is-favorited="true"] {a.thm-link:before {display: none} img {visibility: visible}}
/* Adds icons to navigation 25-10-20 */
@media only screen and (min-width: 50rem) {.nav-secondary li > a {padding: 0 0.3rem; gap: 0rem}
#subnav-listing-link:before, #subnav-list-link:before {content: "📜"} #subnav-avoid-posting-link:before, #subnav-avoid-postings-link:before {content: "❌"}
#subnav-new-link:before, #subnav-upload-link:before {content: "➕"}
#subnav-recent-changes-link:before, #subnav-changes-link:before, #subnav-history-link:before, #subnav-newest-link:before, #subnav-tag-history-link:before {content: "⏳"}
#subnav-urls-link:before, #subnav-aliases-link:before, #subnav-alias-listing-link:before, #subnav-tag-aliases-link:before, #subnav-static-link:before {content: "🔗"}
#subnav-help-link:before {content: "❓"} #subnav-hot-link:before {content: "🔥"} #subnav-popular-link:before {content: "📊"}
#subnav-favorites-link:before {content: "❤️"} #blacklist-edit-link:before, #subnav-blacklist-link:before {content: "🚫"}
#subnav-gallery-link:before, #subnav-posts-link:before {content: "🖼️"} #subnav-mine-link:before, #subnav-profile-link:before {content: "🙍‍♂️"}
#subnav-invites-link:before, #subnav-messages-link:before {content: "💌"} #subnav-metasearch-link:before, #subnav-search-link:before {content: "🔍"}
#subnav-implications-link:before, #subnav-implication-listing-link:before, #subnav-tag-implications-link:before {content: "⤵️"}
#subnav-bulk-updates-link:before, #subnav-bur-listing-link:before {content: "🧻"}
#subnav-related-tags-link:before, #subnav-post-relationships-link:before {content: "🔁"} #subnav-cheatsheet-link:before {content: "📋"}
#subnav-mark-all-as-read-link:before, #subnav-approvals-link:before {content: "✅"}
#subnav-reply-link:before {content: "↪️"} #subnav-subscribe-link:before {content: "🔔"} #subnav-edit-tag-type-link:before {content: "🔧"}
#subnav-edit-link:before, #subnav-request-implication-link:before, #subnav-request-alias-link:before, #subnav-request-bur-link:before,
#subnav-request-bulk-update-link:before, #subnav-new-bur-link:before, #subnav-send-message-link:before {content: "✒️"}
#subnav-report-link:before, #subnav-reportcommend-link:before {content: "⚠️"}
#subnav-settings-link:before {content: "⚙️"} #subnav-sign-out-link:before {content: "🔑"} #subnav-revert-to-link:before {content: "↩️"}
#subnav-tags-link:before {content: "#️"} #subnav-upload-whitelist-link:before {content: "🧾"} #subnav-maintainers-link:before {content: "👥"}
#subnav-ratings-link:before {content: "🚦"} #subnav-tag-scripts-link:before {content: "👨‍💻"} #subnav-flags-link:before {content: "🚩"}
#subnav-replacements-link:before {content: "🔄"} #subnav-dtext-link:before {content: "✨"} #subnav-forum-link:before {content: "🗪"}
#subnav-blips-link:before {content: "💬"} #subnav-requests-link:before {content: "🗨️"} #subnav-sets-link:before {content: "🗂️"} } 		Preview

General changelog

25-10-24 ✒️Made post id field wider in "search options"
25-10-27 ➕Unhiding of blacklisted favorited posts ➕One-click snippet selection for this page
25-10-31 ➕Hide news on home page ➕Display exact time on hover
25-11-01 ➕Fancy version of larger Frequent Tags and CSS boxes ✒️Merged simple Frequent Tags and CSS boxes into one entry
25-11-06 ✒️Updated unhide blacklisted favorites
25-11-16 ❌Removed highlight current page as it's redundant now

For Post index and Post ▲ Back to contents

Code Notes
/* (Post index, Post) Makes layout settings buttons sticky when sticky searchbar is off, moves them above searchbar, keeps them in the same position in normal and widescreen modes 25-10-20 */
@media (min-width: 50rem) {body[data-st-stickysearch="false"] {overflow-y: clip;
.post-index .search {display: flex; flex-direction: column; height: 10000%; pointer-events: none; margin: 0; padding-bottom: 0; padding-top: 0; box-shadow: none; & > * {pointer-events: auto}
.post-search-title {margin-left: 4.3rem} .search-controls {position: sticky; z-index: 11; width: fit-content; order: -1; top: 0; margin: 0 0 -1.2rem -.5rem; border-radius: 0.25rem 0;
button:after {content: ""; position: absolute; background: none; top: 0; width: 50%; height: 100%} } } &[data-st-fullscreen="true"] .search-settings-container {inset: 5.2rem auto auto 4.7rem} } }
 Preview (normal)
Preview (widescreen)
/* (Post/Tag list) Removes quick blacklist, + and - buttons 25-10-20 */
.tag-list-inc, .tag-list-exl, .tag-list-actions {display: none} 		Preview
/* (Post/Tag list) Moves tag and its buttons to the left, changes line breaks to overflow (like on sources) 25-10-20 */
@media (min-width: 50rem) {.tag-list {gap: 1px; .tag-list-item {margin-left: -.5rem; width: auto; height: round(1rem,1px);
.tag-list-wiki {background: var(--color-foreground); border-radius: 2px 0 0 2px} .tag-list-search {white-space: nowrap; overflow-x: clip;
&:hover {width: 100%; min-width: fit-content; overflow: visible; z-index: 1; background: var(--color-foreground); border-radius: 0 2px 2px 0}}}}}
 Preview
/* (Post index, Post) Red outline on image if form, gender, character count, purple if penetration tags are missing 25-10-20 */
#posts article, .content:not(:has(li.active #post-edit-link)) #image-container {&:is([data-tags~="penetration"]):not([data-tags*="_penetration"]) img,
&:is([data-tags~="penetration"]):not([data-tags~="anthro_penetrated"],[data-tags~="feral_penetrated"],
[data-tags~="human_penetrated"],[data-tags~="humanoid_penetrated"],[data-tags~="taur_penetrated"]) img,
&:is([data-tags~="penetration"]):not([data-tags~="male_penetrated"],[data-tags~="female_penetrated"],[data-tags~="andromorph_penetrated"],
[data-tags~="gynomorph_penetrated"],[data-tags~="herm_penetrated"],[data-tags~="maleherm_penetrated"],[data-tags~="ambiguous_penetrated"]) img,
&:is([data-tags~="penetration"]):not([data-tags*="penis_in_"],[data-tags*="object_in_"],[data-tags*="sex_toy_in_"],[data-tags*="body_part_in_"],
[data-tags*="tentacle_in_"],[data-tags*="tail_in_"],[data-tags*="_fingering"],[data-name*="_fisting"]) img {outline: 2px dashed white; outline-offset: -1px}
&:not([data-tags~="anthro"],[data-tags~="feral"],[data-tags~="human"],[data-tags~="humanoid"],[data-tags~="taur"],
[data-tags~="animate_inanimate"],[data-tags~="living_machine"],[data-tags~="penis_creature"],[data-tags~="serpentine"],
[data-tags~="tentacle_monster"],[data-tags~="waddling_head"],[data-tags~="robot"],[data-tags~="ambiguous_form"],[data-tags~="zero_pictured"]) img[src],
&:not([data-tags~="ambiguous_gender"],[data-tags~="female"],[data-tags~="andromorph"],[data-tags~="gynomorph"],
[data-tags~="herm"],[data-tags~="maleherm"],[data-tags~="male"],[data-tags~="zero_pictured"]) img[src],
&:not([data-tags~="solo"],[data-tags~="duo"],[data-tags~="group"],[data-tags~="zero_pictured"]) img[src] {outline: 2px dashed #a30; outline-offset: -1px} }
 Preview
/* (Search) Displays summary of Help:Cheatsheet on hover over [search help] 25-10-26 */
.post-search-help:hover:after {content: " Group AND: ( ~cat ~tiger ~leopard ) ( ~dog ~wolf ) \A\A order: (can be reversed with -* or *_asc) \A id score favcount comment_count comment_bumped
\A mpixels filesize landscape portrait change duration random \A comment created updated note tagcount general_tags \A artist_tags contributor_tags copyright_tags character_tags
\A species_tags invalid_tags meta_tags lore_tags md5 \A\A User-Based Metatags \A user_id: user: fav/favoritedby: voted: votedup/upvote:
\A voteddown/downvote: approver: deletedby: \A comm/commenter: noter: noteupdater: \A\A Post-Based Metatags \A id: score: favcount: comment_count: tagcount: gentags:
\A arttags: chartags: copytags: spectags: invtags: lortags: \A metatags: source: description: note: delreason: \A\A rating: safe/s questionable/q explicit/e
\A\A type: jpg png gif mp4 swf webm \A\A Image Size \A width: height: mpixels: ratio: filesize: filesize: \A\A status: pending active deleted flagged modqueue any
\A\A date: 2012-04-27 today day week month year decade \A 5_days_ago 5_weeks_ago 5_months_ago 5_years_ago \A yesterweek yestermonth yesteryear 5_yesteryears_ago
\A\A Parents/children \A ischild:true/false isparent:true/false parent:1234 parent:none \A\A Other \A pool: set: md5: duration: \A\A Other (true/false)
\A hassource: hasdescription: ratinglocked: notelocked: inpool: \A pending_replacements: artverified: \A\A Ranges \A 10..15 11,12,13 >21 <21 >=21 <=21";
white-space: pre; pointer-events:none; position: absolute; background: var(--color-section); box-shadow: 0 2px 4px -1px #000); padding: .2rem .3rem; border-radius: .25rem; z-index: 10;
@media only screen and (min-width: 50rem) {left: 98%; top: -.5rem}
@media only screen and (max-width: 50rem) {right: 50%; transform: translate(50%, 3.5rem)}} body[data-st-fullscreen="true"] .post-search-help:hover:after {left: unset; right: 0; top: 4.5rem} 		Preview

Updated

Waydence

Member

Just for Post index [25-11-16]

Code Notes
/* (Post index/Edit mode) Makes edit form sticky, prevents scrolling to the top when switching between posts, widens "Submit" button 25-10-03 */
#page[data-mode-menu="edit"] {.content {display: grid; #quick-edit-div, #posts {grid-row: 3; grid-column: 1} #posts {margin-top: 19rem; margin-bottom: 50vh}
#quick-edit-div {height: fit-content; position: sticky; top: 0; z-index: 6; &:has(#quick-edit-form[action="/posts"]) {display: block} h1 {display: none}
#quick-edit-form {.input {margin-bottom: 0; display: grid; grid-template-columns: auto 5rem; gap: .2rem; textarea {grid-column: 1/3; max-height: 15rem; width: 99.7%} input {height: 1.5rem} }} }} }
 Preview
/* (Post index/Edit mode) Moves notification out of the way of sticky editing form 25-11-16 */
body[data-st-fullscreen="false"] #page[data-mode-menu="edit"] #notice {left: 1rem; width: unset}
body[data-st-fullscreen="true"] #page[data-mode-menu="edit"] #notice {top: unset; bottom: 1rem}
/* (Post index/Edit mode) Makes notifications translucent when hovering or typing in quick edit form 25-10-31 */
#page[data-mode-menu="edit"]:has(#quick-edit-div:hover, #quick-edit-form #post_tag_string:focus) #notice {opacity: .1}
/* (Post index/Layout Settings) Sets "Card Size" to "Large" by default 25-11-08 */
body[data-st-size="l"] section.posts-container {--thumb-image-size: 200px; --thumb-image-min: 180px; --thumb-image-max: 220px; --thumb-mobile-size: 33vw;
@media (max-width: 50rem) {grid-template-columns: repeat(3,1fr)}}
body[data-st-size="m"] section.posts-container {--thumb-image-size: 256px; --thumb-image-min: 220px; --thumb-image-max: 256px; --thumb-mobile-size: 50vw;
@media (max-width: 50rem) {grid-template-columns: repeat(2,1fr)}}
.ssc-body-g {[for^="ssc-card-"] {svg {display: none}} [for="ssc-card-medium"] {order: 1; font-size: 0} [for="ssc-card-medium"]:before {font-size: 1rem; content: "Large"}
[for="ssc-card-medium"]:not(:checked + label) {border-radius: 0 0 .25rem .25rem} [for="ssc-card-large"] {font-size: 0}
[for="ssc-card-large"]:before {font-size: 1rem; content: "Medium"} [for="ssc-card-large"]:not(:checked + label) {border-radius: 0}}
/* (Post index/Layout Settings) Sets "Image Crop" to "Full" by default 25-09-23 */
body {&[data-st-contain="true"] article.thumbnail img {object-fit: cover} &[data-st-contain="false"] article.thumbnail img {object-fit: contain} }
label.sto-toggle span {font-size: 0%; &:before {font-size: 1rem; vertical-align: middle} &.sto-off:before {content: "Full"} &.sto-on:before {content: "Crop"} }
/* (Post index/Thumbs) Adds scale down effect for clicked thumbs 25-10-20 */
article.thumbnail:has(a:focus) {transform: scale(97%)} 		Preview
/* (Post index) Changes description color for clicked thumbs 25-10-04 */
article.thumbnail:has(a:focus) {.thm-desc, .thm-desc-a {background: var(--color-background)}}
/* [1](Post index/Thumbs) Displays uploader's name next to score 25-09-20 */
@media (min-width: 50rem) {#posts article.thumbnail {.desc {background: var(--color-section); justify-content: left; gap: 0; & span {background: var(--color-section-lighten-5); padding: 0 .125rem}
& .score {border-radius: 0 0 0 3px; padding-left: .5rem} & .rating {border-radius: 0 0 3px 0; padding-right: .5rem}}
&:after {content: attr(data-uploader); position: absolute; font-size: 70%; color: var(--color-tag-general); bottom: 0; right: 3px} }} 		Preview
/* [2](Post index/Thumbs) Displays uploader's name in the top right corner, hides on hover 25-09-05 */
article.thumbnail {&:after {content: attr(data-uploader); position: absolute; font-size: 70%; top: 0; right: 0; padding: 0 0.2rem;
background: var(--color-section); border-radius: 0 2px 0 3px; transition: 0.05s} &:hover:after {opacity: 0}} 		Preview
/* (Post index/Thumbs) Adds golden glow around favorited posts. Settings: {box-shadow: offset_horiz offset_vert blur thickness color} 25-10-26 */
.thumbnail[data-is-favorited="true"] {box-shadow: 0 0 3px 2px #c80, 0 0 3px 1px #c80} 		Preview
/* (Post index/Thumbs) Changes description color to gold on favorited posts 25-11-06 */
.thumbnail[data-is-favorited="true"] .thm-desc-a {background: #c80; gap: 0; span, &:after {background: #530; padding: .25rem .125rem; margin: -.25rem 0}} 		Preview
/* (Post index/Thumbs) Adds P to posts with parents, C with children, U for pending, F for flagged 25-11-06 */
.has-parent, .has-children, .pending, .flagged {.thm-desc-a:after {content: var(--has-parent, "") var(--has-children, "") var(--pending, "") var(--flagged, ""); font-weight: normal}}
.has-parent {--has-parent: "P"} .has-children {--has-children: "C"} .pending {--pending: "U"} .flagged {--flagged: "F"} 		Preview
/* (Post index/Thumbs) Makes description text larger and icons smaller, reduces gaps between them 25-11-06 */
.thm-desc {font-size: .95rem; .thm-desc-a {column-gap: .25rem; .thm-desc-m {gap: .1rem} svg {scale: 95%}}} 		"Preview":
/* (Post index/Thumbs) Makes description text larger and icons smaller, narrows rating and fixes overflow, restores comment count on mobile 25-11-08 */
.thm-desc {grid-template-columns: auto .9rem; font-size: .9rem; .thm-desc-m {gap: 0; svg {width: .7rem; height: .7rem; margin: auto}}
.thm-comments {gap: .1rem; display: flex} .thm-desc-b {padding: 0; margin: auto}}
body[data-st-size="s"], .c-posts.a-show {.thm-desc {grid-template-columns: auto .75rem; font-size: .75rem; .thm-desc-a {padding: .2rem; svg {width: .6rem}}}}
@media (max-width: 580px) {body[data-st-size="s"]:not(.c-posts.a-show) .thm-desc {grid-template-columns: auto 2.2vw; font-size: 2vw;
.thm-desc-a {padding: .5vw} svg {width: 1.7vw} @media (max-width: 500px) {font-size: 2.6vw; .thm-comments {display: none}}}}
@media (max-width: 510px) {body[data-st-size="m"]:not(.c-posts.a-show) .thm-desc {grid-template-columns: auto 2.5vw; font-size: 2.6vw;
.thm-desc-a {padding: .7vw; @media (max-width: 400px) {padding: .4vw}} svg {width: 2vw} }}
@media (max-width: 350px) {body[data-st-size="l"]:not(.c-posts.a-show) .thm-desc {grid-template-columns: auto 4vw; font-size: 4vw}}
/* (Post index/Thumbs) De-emphasizes rating by changing color coding from background to text 25-11-08 */
.thm-desc {grid-template-columns: auto min-content; background: var(--color-section-lighten-5); .thm-desc-a {box-shadow: none} .thm-rating {padding: 0 .1rem; margin: auto .1rem auto 0}}
.thm-rating-s .thm-rating {color: var(--palette-text-green)} .thm-rating-q .thm-rating {color: var(--palette-text-yellow)} .thm-rating-e .thm-rating {color: var(--palette-text-red)}} 		"Preview":
/* (Post index/Thumbs) Collapses letterbox on landscape thumbs, centering them vertically 25-11-06 */
.posts-container {align-items: center; .thm-link {aspect-ratio: unset; max-height: var(--thumb-image-size)}} 		Preview

Post index changelog

25-10-26 ➕Highlighting of favorited posts
25-10-31 ➕Hide notifications when using quick editing form
25-11-06 ➕Hollow star icon for non-favorited posts (replaces text-based one) ➕Post relations display ➕Thumb text and icon resize ➕Collapse letterbox on landscape thumbs ✒️Updated favorited description color
25-11-08 ➕Thumb sizing improvements ➕De-emphasis of thumb rating ✒️Updated large thumbs by default
25-11-16 ➕Move notification out of the way of sticky editor ✒️Improved post relations display ❌Removed hollow star on non-favorites as it's redundant now

Updated

Waydence

Member

Just for Post [25-11-13] ▲ Back to contents

Code Notes
/* (Post) Shows your upvote/downvote above search bar 25-10-20 */
#a-show:has(.ptbr-vote) {.post-search-title:after {content: ""; top: -.5rem; border: 1.4rem solid transparent; position: absolute; transform: scalex(50%); transition: .3s; pointer-events: none}
&:has(.ptbr-vote[data-vote="1"]) .post-search-title:after {border-bottom-color: var(--palette-text-green); top: -1.2rem}
&:has(.ptbr-vote[data-vote="-1"]) .post-search-title:after {border-top-color: var(--palette-background-red); top: .2rem} } 		Preview
/* (Post/Image) Displays uploader, image size, extension, score, favorite status and count above the image 25-10-31 */
#c-posts #a-show .content {padding-top: 0; #image-and-nav {overflow: clip; #nav-links-top {margin-bottom: 0} #image-container {margin-top: 1.2rem; &[data-is-favorited="true"] {--isfavorited: "✮"}
@media (max-width: 50rem) {--spacer: " "} &:before {position: absolute; top: -1.2rem; white-space: nowrap; content: attr(data-uploader) var(--spacer," ⬩ ") attr(data-width) "×" attr(data-height)
var(--spacer," ⬩ ") attr(data-file-ext) var(--spacer," ⬩")" ⇧" attr(data-score) " " var(--isfavorited, "☆") attr(data-fav-count)} }}} 		Preview
/* (Post/Image) Displays uploader below the image 25-11-13 */
#image-and-nav {overflow: clip; #image-container {margin-bottom: 1.2rem} #image-container:after {position: absolute; bottom: -1.2rem; white-space: nowrap; content: attr(data-uploader)}} 		"Preview":
/* (Post) Displays "none provided" in empty list of sources 25-10-31 */
.source-links:not(:has(.source-link)):after {content: "none provided"; color: var(--palette-text-grey)}
/* (Post) Hides search navigation above image - [<Prev Search: Next>], not pool navigation 25-09-20 */
.nav-block.search-seq-nav {display: none} 		Preview
/* (Post) Hides "Before commenting..." message 25-10-31 */
.new-comment h2 {display: none}
/* (Post, Tag preview) Adds color samples to "color" tags, moves them lower in the list 25-10-20 */
.general-tag-list .tag-list-item, .tag-preview-tag[data-category="0"] {--ord: 5; --ordim: 7; .tag-list-wiki, .tag-list-inc, .tag-list-exl {order: -1}
&[data-name^="black_"] {order: var(--ord); &[data-implied] {order: var(--ordim)} & .tag-type-0, & .tag-list-search {padding-left: 0; &:before {content: "     "; clip-path: circle(35%); background: black}}}
&[data-name^="blonde_"] {order: var(--ord); &[data-implied] {order: var(--ordim)} & .tag-type-0, & .tag-list-search {padding-left: 0; &:before {content: "     "; clip-path: circle(35%); background: yellow}}}
&[data-name^="blue_"] {order: var(--ord); &[data-implied] {order: var(--ordim)} & .tag-type-0, & .tag-list-search {padding-left: 0; &:before {content: "     "; clip-path: circle(35%); background: blue}}}
&[data-name^="brown_"] {order: var(--ord); &[data-implied] {order: var(--ordim)} & .tag-type-0, & .tag-list-search {padding-left: 0; &:before {content: "     "; clip-path: circle(35%); background: #654321}}}
&[data-name^="dark_"] {order: var(--ord); &[data-implied] {order: var(--ordim)} & .tag-type-0, & .tag-list-search {padding-left: 0; &:before {content: "     "; clip-path: circle(35%); background: dimgrey}}}
&[data-name^="gold_"],&[data-name^="golden_"] {order: var(--ord); &[data-implied]
{order: var(--ordim)} & .tag-type-0, & .tag-list-search {padding-left: 0; &:before {content: "     "; clip-path: circle(35%); background: gold}}}
&[data-name^="green_"] {order: var(--ord); &[data-implied] {order: var(--ordim)} & .tag-type-0, & .tag-list-search {padding-left: 0; &:before {content: "     "; clip-path: circle(35%); background: green}}}
&[data-name^="grey_"] {order: var(--ord); &[data-implied] {order: var(--ordim)} & .tag-type-0, & .tag-list-search {padding-left: 0; &:before {content: "     "; clip-path: circle(35%); background: grey}}}
&[data-name^="light_"] {order: var(--ord); &[data-implied] {order: var(--ordim)} & .tag-type-0, & .tag-list-search {padding-left: 0; &:before {content: "     "; clip-path: circle(35%); background: silver}}}
&[data-name^="monotone_"] {order: var(--ord); &[data-implied] {order: var(--ordim)} & .tag-type-0, & .tag-list-search {padding-left: 0; &:before {content: "⚪︎"}}}
&[data-name^="multicolored_"],&[data-name^="rainbow_"] {order: var(--ord); &[data-implied] {order: var(--ordim)} & .tag-type-0, & .tag-list-search {padding-left: 0;
&:before {content: "     "; background: linear-gradient(in hsl longer hue 90deg, red 0 100%); clip-path: circle(35%)}}}
&[data-name^="orange_"] {order: var(--ord); &[data-implied] {order: var(--ordim)} & .tag-type-0, & .tag-list-search {padding-left: 0; &:before {content: "     "; clip-path: circle(35%); background: orange}}}
&[data-name^="pink_"] {order: var(--ord); &[data-implied] {order: var(--ordim)} & .tag-type-0, & .tag-list-search {padding-left: 0; &:before {content: "     "; clip-path: circle(35%); background: pink}}}
&[data-name^="purple_"] {order: var(--ord); &[data-implied] {order: var(--ordim)} & .tag-type-0, & .tag-list-search {padding-left: 0; &:before {content: "     "; clip-path: circle(35%); background: purple}}}
&[data-name^="red_"] {order: var(--ord); &[data-implied] {order: var(--ordim)} & .tag-type-0, & .tag-list-search {padding-left: 0; &:before {content: "     "; clip-path: circle(35%); background: red}}}
&[data-name^="silver_"] {order: var(--ord); &[data-implied] {order: var(--ordim)} & .tag-type-0, & .tag-list-search {padding-left: 0; &:before {content: "     "; clip-path: circle(35%); background: silver}}}
&[data-name^="tan_"] {order: var(--ord); &[data-implied] {order: var(--ordim)} & .tag-type-0, & .tag-list-search {padding-left: 0; &:before {content: "     "; clip-path: circle(35%); background: tan}}}
&[data-name^="teal_"] {order: var(--ord); &[data-implied] {order: var(--ordim)} & .tag-type-0, & .tag-list-search {padding-left: 0; &:before {content: "     "; clip-path: circle(35%); background: teal}}}
&[data-name^="two_tone_"] {order: var(--ord); &[data-implied] {order: var(--ordim)} & .tag-type-0, & .tag-list-search {padding-left: 0; &:before {content: "◐"}}}
&[data-name^="white_"] {order: var(--ord); &[data-implied] {order: var(--ordim)} & .tag-type-0, & .tag-list-search {padding-left: 0; &:before {content: "     "; clip-path: circle(35%); background: white}}}
&[data-name^="yellow_"] {order: var(--ord); &[data-implied] {order: var(--ordim)} & .tag-type-0, & .tag-list-search {padding-left: 0; &:before {content: "     "; clip-path: circle(35%); background: yellow}}} } 		Preview
/* (Post) Underlines, moves up in list tags with low post count, increases threshold for "low count" 25-10-20 */
.general-tag-list .tag-list-item {&[data-count="1"],&[data-count="2"],&[data-count="3"],&[data-count="4"],&[data-count="5"]
{order: -1; .tag-list-name {text-decoration: underline dotted}; .tag-list-count {color: var(--palette-text-red)} }}
 Preview
/* (Post/Tag list, Tag preview) Gives body type tags yellow checkmark/background, moves them up in the list, flips tag preview implication popup 25-10-20 */
.general-tag-list .tag-list-item, .species-tag-list .tag-list-item, #page .tag-preview-tag {&:is([data-name*="anthro"],[data-name*="feral"],[data-name*="human"],[data-name*="humanoid"],
[data-name^="taur"],[data-name$="taur"],[data-name="animate_inanimate"],[data-name="living_machine"],[data-name="penis_creature"],[data-name="serpentine"],[data-name="tentacle_monster"],
[data-name="waddling_head"],[data-name="robot"]) {order: -60; background: #f0f00009; &:after {bottom: unset; top: 100%; border-radius: 0 5px 5px 5px}
& .tag-type-0, & .tag-type-5, & .tag-list-search {padding-left: 0; &:before {content: "☑"; color: #ff0} } } } 		Preview
/* (Post/Tag list, Tag preview) Gives gender tags purple checkmark/background, moves them up in the list 25-10-20 */
.general-tag-list .tag-list-item, .tag-preview-tag {&:is([data-name*="ambiguous"],[data-name*="andromorph"],[data-name*="female"],[data-name*="gynomorph"],
[data-name^="herm"],[data-name$="herm"],[data-name*="intersex"],[data-name*="male"],[data-name*="maleherm"],[data-name="zero_pictured"])
{order: -55; background: #f000f009; & .tag-type-0, & .tag-list-search {padding-left: 0; &:before {content: "☑"; color: #f0f} } } } 		^
/* (Post/Tag list, Tag preview) Gives character count tags teal checkmark/background, moves them up in the list 25-10-20 */
.general-tag-list .tag-list-item, .tag-preview-tag {&:is([data-name="solo"],[data-name="solo_focus"],[data-name="duo"],[data-name="duo_focus"],[data-name="group"],
[data-name="trio"],[data-name="trio_focus"],[data-name="large_group"],[data-name="absolutely_everyone"],[data-name="zero_pictured"])
{order: -50; background: #00f0f010; & .tag-type-0, & .tag-list-search {padding-left: 0; &:before {content: "☑"; color: #0ff} } } } 		^
/* (Post/Tag list, Tag preview) Gives penetration tags pink checkmark/background, moves them up in the list 25-10-20 */
.general-tag-list .tag-list-item, .tag-preview-tag {&:is([data-name^="penis_in_"],[data-name^="object_in_"],[data-name^="food_in_"],[data-name^="sex_toy_in_"],[data-name^="dildo_in_"],
[data-name^="double_dildo_in_"],[data-name^="vibrator_in_"],[data-name^="buttplug_in_"],[data-name^="anal_beads_in_"],[data-name^="strapon_in_"],[data-name^="electrode_in_"],
[data-name^="body_part_in_"],[data-name^="horn_in_"],[data-name^="tentacle_in_"],[data-name^="tail_in_"],[data-name$="_fingering"],[data-name^="thumb_in_"],[data-name$="_fisting"],
[data-name$="_knotting"],[data-name$="_threading"]) {order: -45; background: #ffaaaa10; & .tag-type-0, & .tag-list-search {padding-left: 0; &:before {content: "☑"; color: #faa} } } } 		^

Post changes [25-10-23] ▲ Back to contents

Code Notes
/* (Post Changes) Gives more obvious colors to removed-then-readded tags (pink), added-then-removed tags (light green) 25-09-20 */
.diff-list {del.obsolete, del.obsolete a {color: deeppink; text-decoration: line-through} ins.obsolete, ins.obsolete a {color: greenyellow; text-decoration: line-through} } 		"Preview":
/* (Post Changes) Prevents description popup from getting wider than screen 25-09-23 */
#c-post-versions #a-index .desc-popup {min-width: min(400px, 98vw); max-width: min(800px, 98vw)} 		"Preview":

Changelog

25-10-23 ➕Undone tag changes highlighting ➕Mobile-friendly description change popup
25-10-31 ➕Hide "Before commenting..." ➕Display "none provided" in empty source list ✒️Info above image: updated to work with new notes, more info
25-11-13 ➕Re-added uploader below image

Updated

Waydence

Member

Tag editing [25-11-02] ▲ Back to contents

Code Notes
/* [1](Post/Edit) Displays image and editing form like in uploader (45% split on PC, 50% on mobile - zoomed in, can be zoomed out ) 25-11-02 */
#page:has(li.active #post-edit-link) {margin: .25rem 0 0; @media (max-width: 50rem) {width: 200%} .tag-list-item {margin-left: 0}
.content {grid-template-columns: 45% auto; display: grid; column-gap: .25rem; padding: .25rem .25rem var(--content-padding-bottom); align-content: start;
@media (max-width: 50rem) {grid-template-columns: 50% auto}
#edit {min-width: 0; margin-bottom: 100%} & #image-and-nav {grid-column: 2; grid-row: 1 / 15; align-content: start; display: block;
#image-container {height: 100%; #image {position: sticky; top: 0; &.fit-window, &.fit-window-vertical {height: fit-content; max-height: 100vh}} #note-container {display: none} }} }} 		Preview
/* [2](Post/Edit) Displays image and editing form like in uploader (45% split on PC, 50% on mobile - zoomed in permanently) 25-11-02 */
#page:has(li.active #post-edit-link) {margin: .25rem 0 0; .tag-list-item {margin-left: 0}
.content {grid-template-columns: 45% auto; display: grid; column-gap: .25rem; padding: .25rem .25rem var(--content-padding-bottom); align-content: start;
@media (max-width: 50rem) {grid-template-columns: 100% 100%; overflow: scroll; max-height: 90vh;}
#edit {min-width: 0; margin-bottom: 100%} & #image-and-nav {grid-column: 2; grid-row: 1 / 15; align-content: start; display: block;
#image-container {height: 100%; #image {position: sticky; top: 0; &.fit-window, &.fit-window-vertical {height: fit-content; max-height: 100vh}} #note-container {display: none} }} }} 		^
/* [3](Post/Edit) Displays image and editing form like in uploader (45% split on, PC only) 25-11-02 */
@media (min-width: 50rem) {#page:has(li.active #post-edit-link) {margin: .25rem 0 0; .tag-list-item {margin-left: 0}
.content {grid-template-columns: 45% auto; display: grid; column-gap: .25rem; padding: .25rem .25rem var(--content-padding-bottom); align-content: start;
#edit {min-width: 0; margin-bottom: 100%} & #image-and-nav {grid-column: 2; grid-row: 1 / 15; align-content: start; display: block;
#image-container {height: 100%; #image {position: sticky; top: 0; &.fit-window, &.fit-window-vertical {height: fit-content; max-height: 100vh}} #note-container {display: none} }} }}} 		^
/* (Post/Edit, Tag preview) Compacts Autotagger panel, hides "Manually review tags" warning and "Confidence" label 25-10-20 */
.ai-controls-container {order: -5; margin: -.4rem 0; input {width: 50px; height: 22px} .ai-warning-text, label {display: none} }
#edit .ai-controls-container {margin: -1.7rem 0 0 2.7rem} #page #c-uploads #uploader .tag-preview-area {margin-top: -.5rem} 		E6 Autotagger
/* (Tag boxes) Increases padding on left and right side to make text selection easier 25-10-20 */
.tag-textarea {box-sizing: border-box; padding: 1px .3rem}
/* (Post/Edit, New Upload) Adds dynamic checklist to post editor and uploader 25-10-20 */
body {div:has(> .tag-preview-area[disabled="false"]) {
&:before, &:after {background: var(--color-section-lighten-10); padding: .2rem; border-radius: .25rem; outline-offset: -1px;
@media (min-width: 50rem) {position: fixed; z-index: 11; pointer-events: none; white-space: pre; box-shadow: 0 2px 4px -1px #000}
@media (max-width: 50rem) {display: block; margin: .2rem 0; order: 1}}
&:before {inset: var(--mand_pos, auto auto 60% -.2rem); transform: var(--cl_transf, none) ; display: var(--mand_disp, none); line-height: 120%; outline: var(--mand_ol, none); content:
var(--dnp, "") var(--emptyinvalid, "") var(--conditionaldnp, "") var(--newtag, "") var(--lowcount, "") var(--asfgc_disp, "") var(--penetr_disp, "")}
&:after {inset: var(--opt_pos, auto auto 1rem -.2rem); transform: var(--cl_transf, none) ; display: var(--opt_disp, none); outline: var(--opt_ol, none); content:
var(--charname, "☑") "Character name \a" var(--year, "☑") "Year " var(--dated, "☑") "Dated"}
--asfgc_list: var(--artist, "☑") "Artist \a" var(--species, "☑") "Species " var(--form, "☑") "Form \a" var(--gender, "☑") "Gender " var(--charcount, "☑") "Count \a" var(--newline, "");
--penetr_list: "☑Penetration \a" var(--form_penetrated, "☑") "Form penetrated \a" var(--gender_penetrated, "☑") "Gender penetrated \a" var(--penetrated_by, "☑") "By what and where";
&:has(.new) {--newtag: "New tags\a"; --mand_ol: 2px green dashed; --mand_disp: block}
&:has([data-category="0"]:is([data-count="1"],[data-count="2"],[data-count="3"],[data-count="4"],[data-count="5"]))
{--lowcount: "Low count tags\a"; --mand_ol: 2px green dashed; --mand_disp: block}
&:has([class][data-name="conditional_dnp"]) {--conditionaldnp: "! Conditional DNP !\a"; --mand_ol: 2px yellow dashed; --mand_disp: block}
&:has([data-name="penetration"]) {--newline: "\a";
&:not(:has([data-name="anthro_penetrated"],[data-name="feral_penetrated"],[data-name="human_penetrated"],[data-name="humanoid_penetrated"],[data-name="taur_penetrated"]))
{--form_penetrated: "☐"; --mand_ol: 2px yellow dashed; --mand_disp: block; --penetr_disp: var(--penetr_list)}
&:not(:has([data-name="male_penetrated"],[data-name="female_penetrated"],[data-name="andromorph_penetrated"],[data-name="gynomorph_penetrated"],[data-name="herm_penetrated"],
[data-name="maleherm_penetrated"],[data-name="ambiguous_penetrated"])) {--gender_penetrated: "☐"; --mand_ol: 2px yellow dashed; --mand_disp: block; --penetr_disp: var(--penetr_list)}
&:not(:has([data-name^="penis_in_"],[data-name^="object_in_"],[data-name^="sex_toy_in_"],[data-name^="body_part_in_"],[data-name^="tentacle_in_"],[data-name^="tail_in_"],
[data-name$="_fingering"],[data-name$="_fisting"])) {--penetrated_by: "☐"; --mand_ol: 2px yellow dashed; --mand_disp: block; --penetr_disp: var(--penetr_list)}}
&:has([class] .empty, [class] .invalid) {--emptyinvalid: "Empty/invalid tags\a"; --mand_ol: 2px orange dashed; --mand_disp: block}
&:has([class][data-name="avoid_posting"]) {--dnp: "⚠️ Avoid posting ⚠️\a"; --mand_ol: 2px red dashed; --mand_disp: block}
&:not(:has([class][data-category="1"])) {--artist: "☐"; --mand_ol: 2px red dashed; --mand_disp: block; --asfgc_disp: var(--asfgc_list)}
&:not(:has([class][data-category="5"],[class][data-name="zero_pictured"])) {--species: "☐"; --mand_ol: 2px red dashed; --mand_disp: block; --asfgc_disp: var(--asfgc_list)}
&:not(:has([class]:is([data-name="anthro"],[data-name="feral"],[data-name="human"],[data-name="humanoid"],[data-name="taur"],[data-name="animate_inanimate"],
[data-name="living_machine"],[data-name="penis_creature"],[data-name="serpentine"],[data-name="tentacle_monster"],[data-name="waddling_head"],[data-name="robot"],[data-name="ambiguous_form"],
[data-name="zero_pictured"]))) {--form: "☐"; --mand_ol: 2px red dashed; --mand_disp: block; --asfgc_disp: var(--asfgc_list)}
&:not(:has([class]:is([data-name="ambiguous_gender"],[data-name="female"],[data-name="andromorph"],[data-name="gynomorph"],[data-name="herm"],[data-name="maleherm"]
,[data-name="male"],[data-name="zero_pictured"]))) {--gender: "☐"; --mand_ol: 2px red dashed; --mand_disp: block; --asfgc_disp: var(--asfgc_list)}
&:not(:has([class]:is([data-name="solo"],[data-name="duo"],[data-name="group"],[data-name="zero_pictured"])))
{--charcount: "☐"; --mand_ol: 2px red dashed; --mand_disp: block; --asfgc_disp: var(--asfgc_list)}
&:not(:has([class][data-category="4"])) {--charname: "☐"; --opt_ol: 2px green dashed; --opt_disp: block}
&:not(:has([data-category="7"]:is([data-name^="17"],[data-name^="18"],[data-name^="19"],[data-name^="20"]))) {--year: "☐"; --opt_disp: block}
&:not(:has([data-name="dated"])) {--dated: "☐"; --opt_disp: block}}
.tag-preview-area[disabled="true"] a {outline: 2px solid #c005; background: #c005}
&[data-st-fullscreen="false"] #c-posts #a-show, #c-uploads {.post-index:has(.sidebar:hover, .search:hover),
#uploader:has(.flex-grid .col:hover, .flex-grid.border-bottom.over-me:hover) {--mand_pos: auto 100% 60% auto; --opt_pos: auto 100% 1rem auto; --cl_transf: translateX(3px)}}
&[data-st-fullscreen="true"] #c-posts #a-show {--mand_pos: auto .3rem -.2rem auto; --opt_pos: auto 10.3rem -.2rem auto; &:has(#image:hover)
{--mand_pos: 100% .3rem auto auto; --opt_pos: 100% 10.3rem auto auto; --cl_transf: translateY(-3px)}}
.flex-grid.border-bottom.over-me:empty {pointer-events: none} } 		Preview

Tag editing changelog

25-11-02 ✒️Fixed side-by-side editor stretching landscape images

Updated

Waydence

Member

Tag preview ▲ Back to contents

Code Notes
/* (Tag preview) Moves tag preview above tag box 25-10-20 */
#uploader .come-together-now .col2, #tag-string-editor > div {display: flex; flex-direction: column; .tag-preview-area {order: -1; margin: .2rem 0}} 		Preview
/* (Tag preview) Prevents toggle button from jumping around by moving it above above tag preview 25-10-20 */
.tag-preview-area {display: flex; flex-direction: column-reverse; & > a {align-self: end; max-width: fit-content}} 		Preview
/* (Post/Tag preview) Makes toggle button more compact (addon for the two above) 25-10-20 */
#page #edit .tag-preview-area {margin-top: -1rem; & > a {margin-right: 5.3rem}} 		Preview
/* (Tag preview) Adds placeholder if tag preview is enabled but empty 25-10-20 */
.tag-preview-area[disabled="false"]:not(:has(.tag-preview)):before
{display: block; content: "Enter a tag..."; background: var(--color-section-lighten-5); border-radius: 3px; padding: 2px; margin-bottom: .25em; box-sizing: border-box; height: 50vh; max-height: 400px} 		Preview
/* (Tag preview) Moves implied tags down in list 25-10-20 */
.tag-preview-tag[data-implied] {order: 10} 		Preview
/* (Tag preview) Adds icon in front of implied tags 25-10-20 */
.tag-preview-tag {&:before {display: inline-block; content: ""; width: .7rem} &[data-implied]:before {content: "⤷"; color: var(--palette-text-green)}} 		Preview
/* (Tag preview) Hides "implied" text 25-10-20 */
.tag-preview-tag .implied {display: none}
/* (Tag preview) Displays popup about implications instantly using html (works on mobile too) 25-10-20 */
.tag-preview-tag[data-implied] {position: relative; &:hover {background: var(--color-section); &:after {word-spacing: 999px; content: attr(data-implied); position: absolute; pointer-events: none;
z-index: 1; left: 0; bottom: 100%; background: var(--color-section-lighten-10); border-radius: 5px 5px 5px 0; padding: 2px 5px 4px; box-shadow: 0 2px 4px -1px #000} } } 		Preview
/* (Tag preview) Moves up artist, copyright, character, species, meta, lore tags 25-10-20 */
.tag-preview-tag {&[data-category="1"] {order: -40} &[data-category="3"] {order: -35} &[data-category="4"] {order: -30}
&[data-category="5"] {order: -25} &[data-category="7"] {order: -20} &[data-category="8"] {order: -15}}
 Preview
/* (Tag preview) Prevents selection of tag post count 25-10-20 */
.tag-preview-tag .post-count {user-select: none}
/* (Tag preview) Moves tags with low post count higher in list, makes number red 25-10-20 */
#page .tag-preview-tag[data-category="0"] {&[data-count="1"],&[data-count="2"],&[data-count="3"],&[data-count="4"],&[data-count="5"] {order: -65; .post-count {color: var(--palette-text-red)}}}
/* (Tag preview) Moves higher in list, underlines empty, invalid and new tags 25-11-16 */
#page .tag-preview-tag:has(.empty, .invalid, .new) {order: -70; a {text-decoration: underline dotted}}

Updated

Waydence

Member

Related tags ▲ Back to contents

Code Notes
/* (Post/Tag box) Reduces the gap between tag box and related tags 25-10-20 */
#post_tag_string {margin-bottom: 0.05rem}
/* [1](Post/Related tags) Merges toggles into one line (for side-by-side editor) 25-10-20 */
#tag-string-editor .related-tag-functions {margin-bottom: -1.1rem; text-align: end; z-index: 1; pointer-events: none; a {pointer-events: auto}
@media screen and (min-width: 1120px) and (max-width: 1915px) {min-height: 2rem}} 		Preview
/* [2](Post/Related tags) Merges toggles into one line (for normal editor) 25-10-16 */
#tag-string-editor .related-tag-functions {margin-bottom: -1.1rem; text-align: end; z-index: 1; pointer-events: none; a {pointer-events: auto}
@media screen and (min-width: 920px) and (max-width: 1070px), (min-width: 600px) and (max-width: 760px) {min-height: 2rem}} 		^
/* (Related tags) Increases the clickable area of >> toggle 25-10-20 */
#tag-string-editor div:has(.related-tags) h3 {font-size: 0; & a {font-size: 1rem; &:before {content: "Related Tags"}}} 		Preview
/* [1](Related tags) Makes clickable area of tags wider, without widening the background of selected tags 25-10-20 */
.related-item {background: var(--color-section); a {display: flex; white-space: nowrap; &:focus {z-index: 1} &:after {content: ""; width: 100%; background: var(--color-section)}}} 		Preview
/* [2](Related tags) Makes clickable area of tags wider, widening the background of selected tags 25-10-08 */
.related-item {background: var(--color-section); a {display: flex; white-space: nowrap; &:focus {z-index: 1} &:after {content: ""; width: 100%}}} 		Preview
/* (Related tags) Adds checkboxes to tags 25-10-20 */
.related-item {position: relative; background: var(--color-section); padding: 0 3px 0 2px; a {padding-left: .8rem}
&:before {content: "☐"; position: absolute; background: var(--color-section); pointer-events: none} &:has(.tag-active):before {content: "☑"; background: var(--color-active-tag)} --chbox_offs: -.25rem} 		Preview
/* (Related tags) Changes the selection color (#fff is color, 10% is opacity) 25-10-20 */
.related-item:has(.tag-active) {&:before, a {background: color-mix(in oklab, var(--color-section), #fff 10%)}} 		Preview
/* (Related tags) Organizes quick tags in a vertical column on the right; creates a top row of "quick quick tags" 25-10-20 */
.related-tags {overflow-y: auto; height: 85vh; margin: 0; padding: 2.4rem 11rem 0 .3rem; flex-wrap: wrap; position: relative; box-sizing: border-box;
@media (max-width: 50rem) {padding: 5rem 9.5rem 0 .1rem}
.related-section {flex-wrap: wrap; align-content: flex-start; .related-items {width: 100%}
&:not(:first-of-type) {.related-title {position: sticky; z-index: 5; top: -2.4rem; background: var(--color-section-lighten-5)}
@media (max-width: 50rem) {padding: 5px 3px; .related-title {top: -5rem; max-width: 10rem} .related-item {max-width: 10rem; overflow: hidden}}}
&:first-of-type {position: absolute; top: 0; right: 0; z-index: 10; width: 100%; padding: 0 0 8rem; gap: 3px; align-items: flex-end; flex-wrap: nowrap; flex-direction: column; pointer-events: none;
.related-items {padding: 0; margin: 0; position: relative; pointer-events: auto; .related-title {display: none}
&:before {position: absolute; bottom: 100%; margin-left: .3rem; white-space: nowrap; font-weight: bold}
&:has(a[href$="medium_qtd"]) {margin-top: .8rem; &:before {content: "Style"}}
&:has(a[href$="artist_qtd"]) {margin-top: .8rem; &:before {content: "Artist information"}}
&:has(a[href$="bg_qtd"]) {margin-top: .8rem; &:before {content: "Background"}}
&:has(a[href$="text_qtd"]) {margin-top: .8rem; &:before {content: "Text"}}
&:has(a[href$="view_qtd"]) {margin-top: .8rem; &:before {content: "View"}}
&:has(a[href$="portrait_qtd"]) {margin-top: .8rem; &:before {content: "Portrait"}}
&:has(a[href$="clothed_qtd"]) {margin-top: .8rem; &:before {content: "Clothedness"}}
&:has(a[href$="body_qtd"]) {margin-top: .8rem; &:before {content: "Body covering"}}
&:has(a[href$="ctsb_qtd"]) {margin-top: .8rem; &:before {content: "Countershading"}}
&:has(a[href$="scutes_qtd"]) {margin-top: .8rem; &:before {content: "Scutes"}}
&:has(a[href$="featurl_qtd"]) {margin-top: .8rem; &:before {content: "Featureless"}}
&:has(a[href$="horn_qtd"]) {margin-top: .8rem; &:before {content: "Horns"}}
&:has(a[href$="hair_qtd"]) {margin-top: .8rem; &:before {content: "Hair"}}
&:has(a[href$="eart_qtd"]) {margin-top: .8rem; &:before {content: "Ears"}}
&:has(a[href$="eyeh_qtd"]) {margin-top: .8rem; &:before {content: "Eyes"}}
&:has(a[href$="mouth_qtd"]) {margin-top: .8rem; &:before {content: "Mouth"}}
&:has(a[href$="cheek_qtd"]) {margin-top: .8rem; &:before {content: "Cheeks"}}
&:has(a[href$="arm_qtd"]) {margin-top: .8rem; &:before {content: "Arms"}}
&:has(a[href$="fingerc_qtd"]) {margin-top: .8rem; &:before {content: "Fingers"; font-weight: 1; margin-left: 1.1rem}}
&:has(a[href$="wing_qtd"]) {margin-top: .8rem; &:before {content: "Wings"}}
&:has(a[href$="tailt_qtd"]) {margin-top: .8rem; &:before {content: "Tail"}}
&:has(a[href$="legs_qtd"]) {margin-top: .8rem; &:before {content: "Legs"}}
&:has(a[href$="planti_qtd"]) {margin-top: .8rem; &:before {content: "Plantigrade"; font-weight: 1; margin-left: 1.1rem}}
&:has(a[href$="digi_qtd"]) {margin-top: .8rem; &:before {content: "Digitigrade"; font-weight: 1; margin-left: 1.1rem}}
&:has(a[href$="paws_qtd"]) {margin-top: .8rem; &:before {content: "Paws"; font-weight: 1; margin-left: 1.1rem}}
&:has(a[href$="toec_qtd"]) {margin-top: .8rem; &:before {content: "Toes"; font-weight: 1; margin-left: 1.1rem}}
&:has(a[href$="hooves_qtd"]) {margin-top: .8rem; &:before {content: "Hooves"; font-weight: 1; margin-left: 1.1rem}}
&:has(a[href$="nonmammal_qtd"]) {margin-top: .8rem; &:before {content: "Non-mammal"}}
&:has(a[href$="presenting_qtd"]) {margin-top: .8rem; &:before {content: "Presenting"}}
&:has(a[href$="urethra"]) {margin-top: .8rem; &:before {content: "Urethra"}}
&:has(a[href$="penis_qtd"]) {margin-top: .8rem; &:before {content: "Penis"}}
&:has(a[href$="balls_qtd"]) {margin-top: .8rem; &:before {content: "Balls"}}
&:has(a[href$="vulva_qtd"]) {margin-top: .8rem; &:before {content: "Vulva"}}
&:has(a[href$="genital_slit"]) {margin-top: .8rem; &:before {content: "Slit"}}
&:has(a[href$="perineum"]) {margin-top: .8rem; &:before {content: "Perineum"}}
&:has(a[href$="spread_anus"]) {margin-top: .8rem; &:before {content: "Anus"}}
&:has(a[href$="spread_cloaca"]) {margin-top: .8rem; &:before {content: "Cloaca"}}
&:has(a[href$="malepen_qtd"]) {margin-top: .8rem; &:before {content: "Penetration (gender)"}}
&:has(a[href$="anthropen_qtd"]) {margin-top: .8rem; &:before {content: "Penetration (form)"}}
.related-item:has(a[href$="qtd"]) {display: none; & + .related-item {margin-top: 2px; border-top: 1px solid var(--color-foreground); border-radius: 4px} }}
.related-items:not(:has(a[href$="99qtd"])) {max-width: 11rem; margin-right: .5rem; background: var(--color-section); border: 1px solid var(--color-foreground); border-radius: 4px;
@media (max-width: 50rem) {max-width: 9rem; margin-right: 3px}
.related-item {white-space: nowrap; overflow: clip; background: none; border: none; a {outline: none}
a[href*="_penetrating_"] {overflow: hidden; display: flex; justify-content: flex-end}
a[href$="_penetrating_male"] {margin-right: calc(2.3rem + var(--chbox_offs, 0rem))}
a[href$="_penetrating_female"] {margin-right: calc(1.5rem + var(--chbox_offs, 0rem))}
a[href$="_penetrating_andromorph"] {margin-right: calc(-.8rem + var(--chbox_offs, 0rem))}
a[href$="_penetrating_gynomorph"] {margin-right: calc(-.47rem + var(--chbox_offs, 0rem))}
a[href$="_penetrating_herm"] {margin-right: calc(2.15rem + var(--chbox_offs, 0rem))}
a[href$="_penetrating_maleherm"] {margin-right: calc(.1rem + var(--chbox_offs, 0rem))}
a[href$="_penetrating_ambiguous"] {margin-right: calc(-.25rem + var(--chbox_offs, 0rem))}
a[href$="_penetrating_anthro"] {margin-right: calc(1.6rem + var(--chbox_offs, 0rem))}
a[href$="_penetrating_feral"] {margin-right: calc(2.5rem + var(--chbox_offs, 0rem))}
a[href$="_penetrating_human"] {margin-right: calc(1.45rem + var(--chbox_offs, 0rem))}
a[href$="_penetrating_humanoid"] {margin-right: calc(.15rem + var(--chbox_offs, 0rem))}
a[href$="_penetrating_taur"] {margin-right: calc(2.65rem + var(--chbox_offs, 0rem))}}}
.related-items:has(a[href$="99qtd"]) {order: -5; flex-direction: row; flex-wrap: wrap; .related-item {max-width: 100%; background: var(--color-section); margin: 1px 0 0 1px}}
.related-items:has(a[href$="fingerc_qtd"],a[href$="toec_qtd"],a[href$="pen_qtd"]):not(:has(.tag-active[href$="fingers"],.tag-active[href$="toes"],
.tag-active[href*="_penetrating"])) .related-item:has(a[href$="_fingers"],a[href$="_toes"],a[href*="_penetrating_"]) {display: none}
&:not(:has(.tag-active[href*="countershad"])) .related-items:has(a[href*="ctsl_qtd"]) {display: none} }} } .edit-submit.input {z-index: 15} 		Preview
Side-by-side editor recommended.
Quick tags display 15 tags
per one section,
anything more overflows
into the next section.
"qtd" tags are dummy tags
used to pad out shorter sections,
and create dividers when
placed between normal tags.
List of tags for vertical column quick tags

Quick tags display 15 tags per one section, anything more overflows into the next section. "qtd" tags are dummy tags used to pad out shorter sections, and create dividers when placed between normal tags.

solo duo trio group solo_focus duo_focus trio_focus 008qtd 009qtd 010qtd 011qtd 012qtd 013qtd 014qtd 015qtd

zero_pictured 102qtd 103qtd 104qtd 105qtd 106qtd 107qtd 108qtd 109qtd 110qtd 111qtd 112qtd 113qtd 114qtd 115qtd

male female andromorph gynomorph herm maleherm intersex ambiguous_gender 210qtd howto:tag_genders 211qtd 212qtd 213qtd 214qtd 215qtd

anthro feral semi-anthro human humanoid taur serpentine ambiguous_form 310qtd tag_group:body_types 311qtd 312qtd 313qtd 314qtd 315qtd

sketch line_art colored_sketch flat_colors shaded lineless 8medium_qtd digital_drawing_(artwork) digital_painting_(artwork) mixed_media 11medium_qtd 12medium_qtd 13medium_qtd 14medium_qtd 15medium_qtd

artist_name signature artist_logo 5artist_qtd watermark 6artist_qtd 7artist_qtd 8artist_qtd 9artist_qtd 10artist_qtd 11artist_qtd 12artist_qtd 13artist_qtd 14artist_qtd 15artist_qtd

simple_background gradient_background abstract_background 9bg_qtd detailed_background photo_background blurred_background 10bg_qtd inside outside 11bg_qtd 12bg_qtd 13bg_qtd 14bg_qtd 15bg_qtd

	_TEXT_

text english_text 8text_qtd dialogue speech_bubble thought_bubble 9text_qtd text_box character_name 10text_qtd 11text_qtd 12text_qtd 13text_qtd 14text_qtd 15text_qtd

	_VIEW_

front_view side_view rear_view three-quarter_view 9view_qtd bird's-eye_view high-angle_view low-angle_view worm's-eye_view 11view_qtd dutch_angle 12view_qtd 13view_qtd 14view_qtd 15view_qtd

	_PORTRAIT_

headshot_portrait bust_portrait half-length_portrait three-quarter_portrait full-length_portrait 6portrait_qtd 7portrait_qtd 8portrait_qtd 9portrait_qtd 10portrait_qtd 11portrait_qtd 12portrait_qtd 13portrait_qtd 14portrait_qtd 15portrait_qtd

	_POSE_

standing leaning_forward leaning_backward sitting reclining crouching kneeling seiza on_back on_front on_side suspension 13pose_qtd 14pose_qtd 15pose_qtd

	_ACTION_

walking running jumping flying hovering fighting falling sleeping dancing eating kissing licking 13action_qtd 14action_qtd 15action_qtd

	_CLOTHEDNESS_

nude 9clothed_qtd mostly_nude 10clothed_qtd topless bottomless skimpy clothed fully_clothed 11clothed_qtd barefoot 12clothed_qtd 13clothed_qtd 14clothed_qtd 15clothed_qtd

	_BODY_

fur two_tone_fur multicolored_fur 11body_qtd feathers two_tone_feathers multicolored_feathers 12body_qtd scales two_tone_scales multicolored_scales 13body_qtd ventral_scales 14body_qtd 15body_qtd

	_COUNTERSHADING_

countershading reverse_countershading countershade_fur countershade_scales countershade_feathers 6ctsb_qtd 7ctsb_qtd 8ctsb_qtd 9ctsb_qtd 10ctsb_qtd 11ctsb_qtd 12ctsb_qtd 13ctsb_qtd 14ctsb_qtd 15ctsb_qtd

countershade_ears countershade_head countershade_face countershade_neck countershade_arms countershade_hands countershade_wings countershade_torso countershade_butt countershade_tail countershade_legs countershade_thighs countershade_feet 14ctsl_qtd 15ctsl_qtd

	_SCUTES_

scutes scuted_arms scuted_hands scuted_legs scuted_feet 6scutes_qtd 7scutes_qtd 8scutes_qtd 9scutes_qtd 10scutes_qtd 11scutes_qtd 12scutes_qtd 13scutes_qtd 14scutes_qtd 15scutes_qtd

	_FEATURELESS_

featureless_breasts featureless_chest featureless_crotch 4featurl_qtd 5featurl_qtd 6featurl_qtd 7featurl_qtd 8featurl_qtd 9featurl_qtd 10featurl_qtd 11featurl_qtd 12featurl_qtd 13featurl_qtd 14featurl_qtd 15featurl_qtd

	_HORNS_

antlers 9horn_qtd straight_horn 10horn_qtd wavy_horn curved_horn curled_horn spiral_horn 11horn_qtd ridged_horn smooth_horn 12horn_qtd 13horn_qtd 14horn_qtd 15horn_qtd

unicorn_horn 1_horn 2_horns 3_horns 4_horns 5_horns 6_horns 8_horns 9hornc_qtd 10hornc_qtd 11hornc_qtd 12hornc_qtd 13hornc_qtd 14hornc_qtd 15hornc_qtd

	_HAIR_

short_hair medium_hair long_hair 6hair_qtd feather_hair mane 7hair_qtd 8hair_qtd 9hair_qtd 10hair_qtd 11hair_qtd 12hair_qtd 13hair_qtd 14hair_qtd 15hair_qtd

	_EARS_

earhole ear_fins 11eart_qtd floppy_ears pointy_ears prick_ears inner_ear_fluff ear_tuft 12eart_qtd humanoid_ears humanoid_pointy_ears 13eart_qtd long_ears 14eart_qtd 15eart_qtd

ears_back ears_down ears_up ears_front 8ears_qtd notched_ear gauged_ear ear_piercing 9ears_qtd 10ears_qtd 11ears_qtd 12ears_qtd 13ears_qtd 14ears_qtd 15ears_qtd

4_ears 6_ears 8_ears 4earc_qtd 5earc_qtd 6earc_qtd 7earc_qtd 8earc_qtd 9earc_qtd 10earc_qtd 11earc_qtd 12earc_qtd 13earc_qtd 14earc_qtd 15earc_qtd

	_EYES_

eyebrows eyelashes eyebrow_through_hair eyelashes_through_hair eye_through_hair 6eyeh_qtd 7eyeh_qtd 8eyeh_qtd 9eyeh_qtd 10eyeh_qtd 11eyeh_qtd 12eyeh_qtd 13eyeh_qtd 14eyeh_qtd 15eyeh_qtd

slit_pupils horizontal_pupils no_pupils no_sclera empty_eyes glowing_eyes 7eyet_qtd 8eyet_qtd 9eyet_qtd 10eyet_qtd 11eyet_qtd 12eyet_qtd 13eyet_qtd 14eyet_qtd 15eyet_qtd

3_eyes 4_eyes 5_eyes 6_eyes 5eyec_qtd 6eyec_qtd 7eyec_qtd 8eyec_qtd 9eyec_qtd 10eyec_qtd 11eyec_qtd 12eyec_qtd 13eyec_qtd 14eyec_qtd 15eyec_qtd

narrowed_eyes half-closed_eyes eyes_closed 6eyes_qtd one_eye_closed wink 7eyes_qtd 8eyes_qtd 9eyes_qtd 10eyes_qtd 11eyes_qtd 12eyes_qtd 13eyes_qtd 14eyes_qtd 15eyes_qtd

	_MOUTH_

snout whiskers flesh_fang 11mouth_qtd mouth_closed snaggle_tooth blep 12mouth_qtd open_mouth teeth tongue tongue_out 13mouth_qtd 14mouth_qtd 15mouth_qtd 

cheek_tuft cheek_frill cheek_spikes 4cheek_qtd 5cheek_qtd 6cheek_qtd 7cheek_qtd 8cheek_qtd 9cheek_qtd 10cheek_qtd 11cheek_qtd 12cheek_qtd 13cheek_qtd 14cheek_qtd 15cheek_qtd

	_ARMS_

shoulder_tuft elbow_tuft wrist_tuft arm_fin 10arm_qtd 4_arms 6_arms 8_arms 11arm_qtd arms_tied crossed_arms 12arm_qtd 13arm_qtd 14arm_qtd 15arm_qtd

	_FINGERS_

featureless_hands 8fingerc_qtd fingers 2_fingers 3_fingers 4_fingers 5_fingers 6_fingers 9fingerc_qtd 10fingerc_qtd 11fingerc_qtd 12fingerc_qtd 13fingerc_qtd 14fingerc_qtd 15fingerc_qtd

finger_claws fingernails pointy_fingers 7fingert_qtd fingerpads 8fingert_qtd hooved_fingers hoof_hands 9fingert_qtd 10fingert_qtd 11fingert_qtd 12fingert_qtd 13fingert_qtd 14fingert_qtd 15fingert_qtd

	_WINGS_

membranous_wings feathered_wings insect_wings winged_arms 10wing_qtd 4_wings 09wing_qtd wing_claws 11wing_qtd folded_wings spread_wings 12wing_qtd 13wing_qtd 14wing_qtd 15wing_qtd

collarbone 13torso_qtd pecs small_breasts medium_breasts big_breasts 14torso_qtd midriff navel teats 15torso_qtd butt butt_from_the_front big_butt spread_butt

	_TAIL_

tail tapering_tail fluffy_tail short_tail long_tail thin_tail thick_tail 9tailt_qtd tail_tuft 10tailt_qtd 11tailt_qtd 12tailt_qtd 13tailt_qtd 14tailt_qtd 15tailt_qtd

2_tails 3_tails 4_tails 6_tails 9_tails 6tailc_qtd 7tailc_qtd 8tailc_qtd 9tailc_qtd 10tailc_qtd 11tailc_qtd 12tailc_qtd 13tailc_qtd 14tailc_qtd 15tailc_qtd

raised_tail entwined_tails tail_coil 4taila_qtd 5taila_qtd 6taila_qtd 7taila_qtd 8taila_qtd 9taila_qtd 10taila_qtd 11taila_qtd 12taila_qtd 13taila_qtd 14taila_qtd 15taila_qtd

	_LEGS_

biped quadruped 5legs_qtd knee_tuft heel_tuft 6legs_qtd 7legs_qtd 8legs_qtd 9legs_qtd 10legs_qtd 11legs_qtd 12legs_qtd 13legs_qtd 14legs_qtd 15legs_qtd

	_FEET_

plantigrade humanoid_feet soles 4planti_qtd 5planti_qtd 6planti_qtd 7planti_qtd 8planti_qtd 9planti_qtd 10planti_qtd 11planti_qtd 12planti_qtd 13planti_qtd 14planti_qtd 15planti_qtd

digitigrade dewclaw 3digi_qtd 4digi_qtd 5digi_qtd 6digi_qtd 7digi_qtd 8digi_qtd 9digi_qtd 10digi_qtd 11digi_qtd 12digi_qtd 13digi_qtd 14digi_qtd 15digi_qtd

paws underpaw pawpads barely_visible_pawpads plantigrade_pawpads heel_pad 7paws_qtd 8paws_qtd 9paws_qtd 10paws_qtd 11paws_qtd 12paws_qtd 13paws_qtd 14paws_qtd 15paws_qtd

featureless_feet 8toec_qtd toes 2_toes 3_toes 4_toes 5_toes 6_toes 9toec_qtd 10toec_qtd 11toec_qtd 12toec_qtd 13toec_qtd 14toec_qtd 15toec_qtd

toe_claws 4toes_qtd spread_toes curling_toes 5toes_qtd 6toes_qtd 7toes_qtd 8toes_qtd 9toes_qtd 10toes_qtd 11toes_qtd 12toes_qtd 13toes_qtd 14toes_qtd 15toes_qtd

unguligrade underhoof cloven_hooves dewclaw_hooves hooved_plantigrade 6hooves_qtd 7hooves_qtd 8hooves_qtd 9hooves_qtd 10hooves_qtd 11hooves_qtd 12hooves_qtd 13hooves_qtd 14hooves_qtd 15hooves_qtd

	_NON-MAMMAL_

non-mammal_breasts non-mammal_areolas non-mammal_nipples non-mammal_navel non-mammal_balls non-mammal_vulva 7nonmammal_qtd 8nonmammal_qtd 9nonmammal_qtd 10nonmammal_qtd 11nonmammal_qtd 12nonmammal_qtd 13nonmammal_qtd 14nonmammal_qtd 15nonmammal_qtd

	_PRESENTING_

presenting_breasts 9presenting_qtd presenting_hindquarters 10presenting_qtd presenting_vulva presenting_anus presenting_penis presenting_balls presenting_slit 11presenting_qtd presenting_cloaca 12presenting_qtd 13presenting_qtd 14presenting_qtd 15presenting_qtd

	_GENITALS_
	
urethra spread_urethra gaping_urethra 504qtd 505qtd 506qtd 507qtd 508qtd 509qtd 510qtd 511qtd 512qtd 513qtd 514qtd 515qtd

penis erection half-erect flaccid penis_tip fully_sheathed sheath 14penis_qtd 2_penises 15penis_qtd knotted_penis tapering_penis ridged_penis glans humanoid_penis

balls backsack small_balls big_balls 4_balls 6balls_qtd 7balls_qtd 8balls_qtd 9balls_qtd 10balls_qtd 11balls_qtd 12balls_qtd 13balls_qtd 14balls_qtd 15balls_qtd

vulva clitoris spread_vulva gaping_vagina 5vulva_qtd 6vulva_qtd 7vulva_qtd 8vulva_qtd 9vulva_qtd 10vulva_qtd 11vulva_qtd 12vulva_qtd 13vulva_qtd 14vulva_qtd 15vulva_qtd

genital_slit spread_slit 603qtd 604qtd 605qtd 606qtd 607qtd 608qtd 609qtd 610qtd 611qtd 612qtd 613qtd 614qtd 615qtd

perineum 702qtd 703qtd 704qtd 705qtd 706qtd 707qtd 708qtd 709qtd 710qtd 711qtd 712qtd 713qtd 714qtd 715qtd

anus spread_anus gaping_anus 804qtd 805qtd 806qtd 807qtd 808qtd 809qtd 810qtd 811qtd 812qtd 813qtd 814qtd 815qtd

cloaca spread_cloaca gaping_cloaca 904qtd 905qtd 906qtd 907qtd 908qtd 909qtd 910qtd 911qtd 912qtd 913qtd 914qtd 915qtd

	_GENDER_PENETRATION_

male_penetrated 10malepen_qtd male_penetrating male_penetrating_male male_penetrating_female male_penetrating_andromorph male_penetrating_gynomorph male_penetrating_herm male_penetrating_maleherm male_penetrating_ambiguous 11malepen_qtd 12malepen_qtd 13malepen_qtd 14malepen_qtd 15malepen_qtd

female_penetrated 10fempen_qtd female_penetrating female_penetrating_male female_penetrating_female female_penetrating_andromorph female_penetrating_gynomorph female_penetrating_herm female_penetrating_maleherm female_penetrating_ambiguous 11fempen_qtd 12fempen_qtd 13fempen_qtd 14fempen_qtd 15fempen_qtd

andromorph_penetrated 10andrpen_qtd andromorph_penetrating andromorph_penetrating_male andromorph_penetrating_female andromorph_penetrating_andromorph andromorph_penetrating_gynomorph andromorph_penetrating_herm andromorph_penetrating_maleherm andromorph_penetrating_ambiguous 11andrpen_qtd 12andrpen_qtd 13andrpen_qtd 14andrpen_qtd 15andrpen_qtd

gynomorph_penetrated 10gynompen_qtd gynomorph_penetrating gynomorph_penetrating_male gynomorph_penetrating_female gynomorph_penetrating_andromorph gynomorph_penetrating_gynomorph gynomorph_penetrating_herm gynomorph_penetrating_maleherm gynomorph_penetrating_ambiguous 11gynompen_qtd 12gynompen_qtd 13gynompen_qtd 14gynompen_qtd 15gynompen_qtd

herm_penetrated 10hermpen_qtd herm_penetrating herm_penetrating_male herm_penetrating_female herm_penetrating_andromorph herm_penetrating_gynomorph herm_penetrating_herm herm_penetrating_maleherm herm_penetrating_ambiguous 11hermpen_qtd 12hermpen_qtd 13hermpen_qtd 14hermpen_qtd 15hermpen_qtd

maleherm_penetrated 10malehermpen_qtd maleherm_penetrating maleherm_penetrating_male maleherm_penetrating_female maleherm_penetrating_andromorph maleherm_penetrating_gynomorph maleherm_penetrating_herm maleherm_penetrating_maleherm maleherm_penetrating_ambiguous 11malehermpen_qtd 12malehermpen_qtd 13malehermpen_qtd 14malehermpen_qtd 15malehermpen_qtd

ambiguous_penetrated 10ambigpen_qtd ambiguous_penetrating ambiguous_penetrating_male ambiguous_penetrating_female ambiguous_penetrating_andromorph ambiguous_penetrating_gynomorph ambiguous_penetrating_herm ambiguous_penetrating_maleherm ambiguous_penetrating_ambiguous 11ambigpen_qtd 12ambigpen_qtd 13ambigpen_qtd 14ambigpen_qtd 15ambigpen_qtd

	_FORM_PENETRATION_

anthro_penetrated 8anthropen_qtd anthro_penetrating anthro_penetrating_anthro anthro_penetrating_feral anthro_penetrating_human anthro_penetrating_humanoid anthro_penetrating_taur 9anthropen_qtd 10anthropen_qtd 11anthropen_qtd 12anthropen_qtd 13anthropen_qtd 14anthropen_qtd 15anthropen_qtd

feral_penetrated 8feralpen_qtd feral_penetrating feral_penetrating_anthro feral_penetrating_feral feral_penetrating_human feral_penetrating_humanoid feral_penetrating_taur 9feralpen_qtd 10feralpen_qtd 11feralpen_qtd 12feralpen_qtd 13feralpen_qtd 14feralpen_qtd 15feralpen_qtd

human_penetrated 8humanpen_qtd human_penetrating human_penetrating_anthro human_penetrating_feral human_penetrating_human human_penetrating_humanoid human_penetrating_taur 9humanpen_qtd 10humanpen_qtd 11humanpen_qtd 12humanpen_qtd 13humanpen_qtd 14humanpen_qtd 15humanpen_qtd

humanoid_penetrated 8humanoidpen_qtd humanoid_penetrating humanoid_penetrating_anthro humanoid_penetrating_feral humanoid_penetrating_human humanoid_penetrating_humanoid humanoid_penetrating_taur 9humanoidpen_qtd 10humanoidpen_qtd 11humanoidpen_qtd 12humanoidpen_qtd 13humanoidpen_qtd 14humanoidpen_qtd 15humanoidpen_qtd

taur_penetrated 8taurpen_qtd taur_penetrating taur_penetrating_anthro taur_penetrating_feral taur_penetrating_human taur_penetrating_humanoid taur_penetrating_taur 9taurpen_qtd 10taurpen_qtd 11taurpen_qtd 12taurpen_qtd 13taurpen_qtd 14taurpen_qtd 15taurpen_qtd 

	_QUICK_QUICK_TAGS_detected_using_99qtd_

meme
reaction_image
impact_(font)
99qtd

Updated

Waydence

Member

New Upload page ▲ Back to contents

Code Notes
/* (New Upload/Sources) Allows one tab switching between "Paste image URL" and source list by hiding buttnos between them 25-10-20 */
.col.box-section:has(.linkinput input:focus) .upload-source-more {height: 1.5rem; &> * {display: none}}
/* (New Upload) Reduces horizontal margins in uploader 25-10-20 */
#page:has(#uploader) {margin: 0; padding: .25rem; .col.box-section {margin: 0 0 1.5rem; padding: .5rem} #preview-sidebar {margin: 0 0 1.5rem 5px; padding: 5px}} 		Preview
/* (New Upload) Widens image box, shrinks/hides instructional text. Tag boxes stay the same. 25-10-20 */
#uploader {#preview-sidebar {flex-grow: 3} .col.box-section {flex-grow: 2; .col2 {flex-grow: 3.5} .flex-grid {.col {max-width: 7.2rem}
&:has(.upload-source-list, #post_content) {.col div {display: none}} .col div {&:has([href="/wiki_pages/anonymous_artist"]),
&:has(+ div [href="/wiki_pages/tag_what_you_see"]) {display: none} &:has([href="/help/ratings"]) {font-size: 0; height: 1rem; & a {font-size: 1rem}}} }} }
 Preview
/* (New Upload) Makes certain tag boxes taller 25-10-20 */
#post_artist, #post_content, #post_species, #post_tags {min-height: 12rem}
/* [1](New Upload/Image preview) Limits preview height to viewport size, zooms in on hover 25-09-20 */
@media only screen and (min-width: 1100px) {.upload_preview_container.in-sidebar {top: 0}
.upload_preview_container div:not(:hover) .upload_preview_img {max-height: 100vh}
.upload_preview_dims {position: absolute; top: -1.5rem; background: var(--color-section-lighten-5); padding: .2rem .5rem 2rem; border-radius: 3px; z-index: -1; &:empty {display: none}}} 		Preview

Updated

Waydence

Member

Pools [25-11-01] ▲ Back to contents

Code Notes
/* (Pool gallery) Red outline for pools that have no first_page or cover_page tag (only when searching by series) 25-11-01 */
#c-pools #a-gallery:has(option[selected="selected"][value="series"]) article:not([data-tags~="first_page"],[data-tags~="cover_page"]) img {outline: 2px red dashed; outline-offset: -1px}

Blips, Comments, Forum [25-11-01] ▲ Back to contents

Code Notes
/* (Forum listing) Replaces "Sticky:" and "(locked)" text with icons, makes "NEW" text more compact 25-11-01 */
.sticky, .locked-topic {font-size: 0; line-height: 0; &:before {font-size: .9rem}} .sticky:before {content: "📌"} .locked-topic:before {content: "🔒"} .new {margin: 0} 		Preview
/* (Comments, Forum/BUR) Makes clickable area on voting buttons bigger 25-10-20 */
.comment-vote-up-link, .comment-vote-down-link, .forum-vote-up, .forum-vote-meh, .forum-vote-down, .forum-vote-remove {padding: .3rem; margin: -.3rem} 		Preview
/* (Comments, Forum) Makes user avatar/info sticky 25-10-20 */
@media (min-width: 50rem) {.author-info {align-self: start; position: sticky; top: 0}} 		Preview
/* (Blips, Comments, Forum) Moves to the right, shrinks Report and Hide buttons, hides Report button on own messages 25-10-20 */
.comment-post-grid {menu:has(.comment-hide-link, .forum-post-hide-link, a[href$="/hide"]) li:has(a[href^="/tickets/"]) {display: none}
li:has(.comment-hide-link, .forum-post-hide-link, a[href^="/tickets/"], a[href$="/hide"]) {float: right; font-size: 90%}} 		Preview
/* (Blips, Comments, Forum) Adds icons for reply, edit, hide and report buttons 25-10-20 */
.blip, .forum-post, .comment {menu li {.reply-link, .blip-reply-link {&:before {content: "↪️"}} .edit_comment_link, .edit_forum_post_link, a[href$="/edit"] {&:before {content: "✒️"}}
.comment-hide-link, .forum-post-hide-link, a[href$="/hide"] {&:before {content: "❌"}} a[href^="/tickets/"]:before {content: "⚠️"} }} 		Preview
/* (Alias request, Implication request) Makes request labels more helpful 25-10-20 */
#c-tag-alias-requests #a-new label[for$="_name"] {color: var(--color-section); & + input {min-width: 15rem}
&:before {color: var(--color-text)} &[for="tag_alias_request_antecedent_name"]:before {content: "Automatically replace"}
&[for="tag_alias_request_consequent_name"]:before {content: "With"}}
#c-tag-implication-requests #a-new label[for$="_name"] {color: var(--color-section); & + input {min-width: 15rem}
&:before {color: var(--color-text)} &[for="tag_implication_request_antecedent_name"]:before {content: "When adding"}
&[for="tag_implication_request_consequent_name"]:before {content: "Automatically add"}} 		Preview

Blips, Comments, Forum changelog

25-11-01 ➕Highlighting for pools with no first_page or cover_page tag ➕Icons for sticky and locked forum entries

Updated

Waydence

Member

Users, DText, Mobile specific [25-11-01] ▲ Back to contents

Code Notes
/* (User page) Adds icons for uploads section 25-09-20 */
.profile-sample-links {a {&:before {padding-right: 2px} &:nth-child(1):before{content: "🖼️"} &:nth-child(2):before{content: "❌"}
&:nth-child(3):before{content: "🔄"} &:nth-child(4):before{content: "✋"} } .profile-comments-link:before {content: "💬"}}
 Preview
/* (DText box) Adds horizontal scrolling when text styling buttons overflow 25-09-20 */
.dtext-formatter-buttons {overflow: auto}
/* (DText box) Squeezes styling buttons on mobile to prevent overflow 25-10-24 */
@media (max-width: 50rem) { .dtext-formatter {.dtext-formatter-tab {padding: .5rem .25rem}
.dtext-formatter-buttons {gap: .1rem} .dtext-formatter-button-separator:before {margin: 0} } }
/* (DText box) Increases base text box height 25-09-20 */
.dtext-formatter textarea {min-height: 20rem}
/* (DText box) Removes width limit 25-11-01 */
.dtext-formatter {max-width: unset; .dtext-formatter-preview {max-width: unset}}
/* (DText box) Makes width of preview match how it would look in actual comments, forum posts, and wiki pages, adds name/image beside comment/post 25-11-01 */
.comment-post-grid .dtext-formatter {margin: 0 -.75rem; background: var(--color-section)} .edit_wiki_page {margin: 0 -.75rem;
@media (max-width: 50rem) {margin: 0 -.25rem; .dtext-formatter {margin: 0 -.5rem}}}
.new-comment .edit_comment, .edit_blip, .new_forum_post, #new_forum_topic {@media (min-width: 50rem) {padding-left: 165px; position: relative; & > * {transform: translateX(.25rem)}
&:before {content: "Waydence"; font-weight: bold; position: absolute; inset: 0 auto 0 0; width: 165px; box-sizing: border-box; padding: .25rem .5rem;
background: url("http://static1.e621proxy.ru/data/preview/91/c2/91c2b45536a09568106387aded540257.jpg") hsla(0,0%,100%,.05) no-repeat .5rem 1.5rem / auto 150px}}
@media (max-width: 50rem) {margin: 0 -.25rem}} /* Name and avatar have to be set manually */
/* (Post) Unhides mobile "View" button from popup, changes it to icon, hides "Fullscreen" button from context menu 25-09-20 */
@media only screen and (max-width: 50rem) {#ptbr-wrapper {.ptbr-favorite-button, .ptbr-etc-toggle {padding: .5rem 0} .ptbr-resize select {max-width: 22vw}
.ptbr-etc-fullscreen {display: none} .ptbr-fullscreen {display: revert; .ptbr-fullscreen-button {font-size: 0; min-width: 2rem; position: relative;
&:before {content: "⛶"; font-size: 1.75rem; position: absolute; left: unset; right: unset; top: unset} }} }} 		Preview
/* (Post/search navigation) Swaps around "Next" and "Prev" buttons on mobile 25-10-27 */
@media (max-width: 50rem) {.search-seq-nav {.prev {order: 1} .next {order: -1}}} 		Preview
/* (Post/pool navigation) Swaps around "Next"/"Last" and "Prev"/"First" buttons on mobile 25-10-27 */
@media (max-width: 50rem) {.pool-nav {.prev, .first {order: 1} .next, .last {order: -1}}} 		Preview
/* [1-right](Post) Makes mobile navigation ("Image", "Tags/Info", "Comments") sticky when there's 3 or more comments (👇 adjusted here) 25-11-01 */
@media (max-width: 50rem) {#c-posts #a-show .content:has(li.active a[href="#comments"]):has(.list-of-comments .comment + .comment + .comment) {
.mobile-only {align-self: flex-end; display: flex; margin-right: .1rem; padding-bottom: .25rem; box-shadow: 0 0 0 .25rem var(--color-foreground); background: var(--color-foreground);
&:first-of-type {position: sticky; top: 3rem; border-radius: .25rem 0 0 .25rem} &:before {content: ""; width: 1px; background: var(--color-foreground); box-shadow: 0 .25rem var(--color-section)}
&:last-of-type {z-index: 1; margin-top: -1.5rem} li {background: var(--color-section-lighten-5); padding: .25rem; box-shadow: 0 .25rem var(--color-section); a {padding: .25rem 0}
&:first-of-type {order: -1; border-radius: .25rem 0 0 .25rem; a[href="#image-and-nav"]:after {content: "▲"; color: var(--palette-text-green)}}
&:last-of-type {border-radius: 0 .25rem .25rem 0; a[href="#tag-list"]:before {content: "▼"; color: var(--color-tag-artist)} a[href="#comments"]:before {content: "▲"; color: var(--color-tag-species)} }
&:has(a:active) {transform: translateY(.125rem); box-shadow: 0 .125rem var(--color-section); background: var(--color-section-lighten-10)}}} #post-sections {margin-top: -1.75rem; margin-bottom: .4rem}}} 		Preview
/* [2-left](Post) Makes mobile navigation ("Image", "Tags/Info", "Comments") sticky when there's 3 or more comments (👇 adjusted here) 25-11-01 */
@media (max-width: 50rem) {#c-posts #a-show .content:has(li.active a[href="#comments"]):has(.list-of-comments .comment + .comment + .comment) {
.mobile-only {align-self: flex-start; display: flex; margin-left: .1rem; padding-bottom: .25rem; box-shadow: 0 0 0 .25rem var(--color-foreground); background: var(--color-foreground);
&:first-of-type {position: sticky; top: 3rem; border-radius: 0 .25rem .25rem 0} &:before {content: ""; width: 1px; background: var(--color-foreground); box-shadow: 0 .25rem var(--color-section)}
&:last-of-type {z-index: 1; margin-top: -1.5rem} li {background: var(--color-section-lighten-5); padding: .25rem; box-shadow: 0 .25rem var(--color-section); a {padding: .25rem 0}
&:first-of-type {order: -1; border-radius: .25rem 0 0 .25rem; a[href="#image-and-nav"]:after {content: "▲"; color: var(--palette-text-green)}}
&:last-of-type {border-radius: 0 .25rem .25rem 0; a[href="#tag-list"]:before {content: "▼"; color: var(--color-tag-artist)} a[href="#comments"]:before {content: "▲"; color: var(--color-tag-species)} }
&:has(a:active) {transform: translateY(.125rem); box-shadow: 0 .125rem var(--color-section); background: var(--color-section-lighten-10)}}}
#post-sections {margin-top: -1.75rem; margin-bottom: .4rem} #post-sections, .new-comment p {text-align: right}}} 		Preview
/* (Post) Hides mobile navigation when editor is active or there's less than 3 comments (👇 adjusted here) ("Image", "Tags/Info", "Comments") 25-11-01 */
#c-posts #a-show {.content:has(li.active #post-edit-link), &:not(:has(.list-of-comments .comment + .comment + .comment)) {.mobile-only {display: none}}}
/* (Post/Edit) Fixes tag box not getting full width 25-10-20 */
@media (max-width: 50rem) {#post_tag_string {min-width: 100%}}
/* (Post/Edit) Makes "Submit" button static on mobile 25-09-20 */
@media only screen and (max-width: 50rem) {.edit-submit {position: static} }
/* (Post Changes) Redesign that fits on narrow screen, hides locked tags and sources if empty 25-09-24 */
@media (max-width: 50rem) {#c-post-versions #a-index {.post-version {--pv-color-primary: var(--color-section-lighten-5); --pv-color-secondary: none;
grid-template-columns: min-content min-content min-content auto; margin-bottom: 1.5rem; border-color: var(--pv-color-primary); border-radius: 3px; background: var(--pv-color-secondary);
.pv-label {grid-column: 1/3; border: none; padding: .25rem .15rem .25rem .25rem; background: var(--pv-color-secondary); white-space: nowrap; text-align: right; color: var(--palette-text-grey)}
.pv-content {grid-column: 3/5; padding: .25rem .25rem .25rem .15rem} .pv-check, .pv-post, .pv-actions {grid-row: 1; background: var(--pv-color-primary)}
.pv-check {grid-column: 1} .pv-post {grid-column: 2/4; a:before {content: "Post #"; color: var(--color-text); white-space: nowrap}} .pv-actions {grid-column: 4; text-align: right}
.pv-date-label {grid-row: 3} .pv-date {grid-row: 3} .pv-reason-label {grid-row: 4} .pv-reason {grid-row: 4} .pv-description-label {grid-row: 5} .pv-description {grid-row: 5}
.pv-tags-locked-label {grid-row: 6} .pv-tags-locked {grid-row: 6} .pv-tags-label {grid-row: 7} .pv-tags {grid-row: 8} .pv-sources-label {grid-row: 9} .pv-sources {grid-row: 10}
.pv-tags-label, .pv-tags, .pv-sources-label, .pv-sources {grid-column: 1/5; text-align: left; color: var(--color-text)}
.pv-tags-label, .pv-sources-label {padding-left: .75rem; background: var(--pv-color-primary)} .pv-spacer, .pv-post-label {display: none}
&:has(.pv-sources .diff-list:empty) {.pv-sources-label, .pv-sources {display: none}} &:has(.pv-tags-locked .diff-list:empty) {.pv-tags-locked-label, .pv-tags-locked {display: none}} } } } 		Preview
/* (Forum listing) Gives more space to titles by compacting "Last Post", "Created" and "Replies" columns 25-11-01 */
@media (max-width: 50rem) {#c-forum-topics #a-index {td:has(time) {max-width: 7rem; a {word-wrap: anywhere; &:after {content: "\a"; white-space: pre}}
time {white-space: nowrap}} th.created-at + th {position: absolute; right: .3rem}}} 		Preview 
/* (DText fields) Displays summary of Help:DText on hover over formatting buttons 25-09-20 */
.dtext-formatter-buttons:hover:before {content: "Formatting \A  [sup] - superscript \A  [sub] - subscript \A  `code` - inline code \A  [section,expanded=Title] - collapsable \A Links \A  <link> - to escape special characters \A  \"Title\":link - link with title \A  \"Title\":[link] - tilte and special characters \A  [page_name|Title] - wiki link with title \A  post # - link to post \A  post changes # - link to post changes \A  topic # - forum topic \A  comment # - comment on a post \A  blip #  pool #  set #  \A  takedown #  record #  ticket # \A  thumb # - insert image"; white-space: pre; position: absolute; right: 1%; bottom: 101%; background: var(--color-section-lighten-5); box-shadow: 0 2px 4px -1px #000; padding: .2rem .3rem; border-radius: .25rem; z-index: 10} #a-new:not(:has(#uploader)) .dtext-formatter-buttons:hover:before {bottom: unset; right: 1rem; top: 2.5rem}

Preview

Users, DText, Mobile specific changelog

25-10-23 ➕Mobile-specific layout redesign for Post Changes 
25-10-24 ➕Squeeze DText styling buttons on narrower screens ✒️Improvements to Post Changes redesign
25-10-27 ➕Swap next and prev buttons on mobile
25-11-01 ➕Remove DText editor width limit ➕Match DText preview width with final width ➕Compact "Last Post", "Created" and "Replies" columns on mobile forum
         ➕Sticky mobile post navigation ➕Hide mobile post navigation in editor or when less than 3 comments

Updated

Original page: https://e621.net/forum_topics/60052