Topic: Any recommendation for the "Custom CSS style" ?

/* (Post) Displays uploader above the image 25-09-05 */
#image-container:before {content: "\aUploader: " attr(data-uploader)}
#image-container #image {display: block}
.content:has(#image-and-nav) {padding-top: 0}
#nav-links-top {margin-bottom: 0}

/* It is recommended to choose either option [1] or [2] */

/* [1](Search thumbs) Displays uploader's name next to score 25-09-05 */
@media only screen and (min-width: 50rem) {
#posts article .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}}
#posts article.thumbnail:after {content: attr(data-uploader); position: absolute; font-size: 70%; color: var(--color-tag-general); bottom: 0; right: 3px} }

/* [2](Search thumbs) Displays uploader's name in the top right corner 25-09-05 */
article.thumbnail:after {content: attr(data-uploader); position: absolute; font-size: 70%; top: 0; right: 0; padding: 0 0.2rem; background-color: var(--color-section); border-radius: 0 0 0 3px; transition: 0.05s;}
article.thumbnail:hover:after {opacity: 0}

/* (Comments, Forum) Moves Report and Hide to the right, removes Report on own messages 25-09-05 */
li:has(.comment-hide-link), li:has(.forum-post-hide-link), .comment-post-grid menu li:last-of-type {float: right; font-size: 90%}
menu:has(.comment-hide-link, .forum-post-hide-link) li:last-of-type {display: none}

/* (Comments, Forum) Icons for buttons on messages 25-09-05 */
.reply-link:before, .subnav-reply-link:before {content: "↪️"}
.edit_comment_link:before, .edit_forum_post_link:before {content: "✒️"}
.comment-hide-link:before, .forum-post-hide-link:before {content: "❌"}
.comment-post-grid menu li:last-of-type a:before {content: "⚠️"}

/* (User page) Icons for uploads section 25-09-05 */
.profile-sample-links a:before {padding-right: 2px}
.profile-sample-links a:nth-child(1):before{content: "🖼️"}
.profile-sample-links a:nth-child(2):before{content: "❌"}
.profile-sample-links a:nth-child(3):before{content: "🔄"}
.profile-sample-links a:nth-child(4):before{content: "✋"}
.profile-comments-link:before {content: "💬"}

/* (Site) Icons for navigation bar 25-09-05 */
@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-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: "🗂️"}
}

/* (New Upload, Post/Edit) Displays tag checklist on hover over tag inputs 25-09-05 */
:root {--checklist: "artist year signature \A species \A character/count \A\A form \A biped/quadruped/... \A\A pose/position \A view_direction \A look_direction \A bdsm_stuff \A\A nude/fully_clothed \A\A bg_color \A shaded/flat_colors \A non-mammal_*"}
@media only screen and (min-width: 50rem) {
#c-uploads .col2:hover:before, #edit:hover:before {
content: var(--checklist); white-space: pre; position: fixed; bottom: 40%; transform: translate(-107%, 50%); background: var(--color-section-lighten-5); box-shadow: 0 2px 4px -1px var(--color-background); padding: .4rem .6rem; border-radius: .25rem; z-index: 10; line-height: 110%}
#c-uploads .col2:after {content: ""; display: block; height: 100%} }
/* Displays checklist constantly on mobile */
@media only screen and (max-width: 50rem) {
#tag-string-editor:before, .col2:has(#post_artist,#post_species,#post_content,#post_tags):before
{content: var(--checklist); display: block; background-color: antiquewhite; color: black; padding: .2rem .3rem; margin: .1rem 0; outline: 1px solid gray; border-radius: .1rem} }

/* (Search) Displays summary of Help:Cheatsheet on hover over [search help] 25-09-05 */
.post-search-help:hover:after {content: " Group AND: ( ~cat ~tiger ~leopard ) ( ~dog ~wolf ) \A order: (can be reversed with -* or *_asc) \A  id score favcount comment_count comment_bumped \A  mpixels filesize landscape 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 User-Based Metatags  \A  user_id: user: fav/favoritedby: voted: votedup/upvote: \A  voteddown/downvote: approver: deletedby: \A  comm/commenter: noter: noteupdater: \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 rating: \A  safe/s questionable/q explicit/e \A type: \A  jpg png gif mp4 swf webm \A Image Size \A  width: height: mpixels: ratio: filesize: filesize: \A status: \A  pending active deleted flagged modqueue any \A date: \A  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 Parents and Children \A  ischild:true/false isparent:true/false parent:1234 parent:none \A Other \A  pool: set: md5: duration: \A Other (true/false) \A  hassource: hasdescription: ratinglocked: notelocked: inpool: \A  pending_replacements: artverified: \A Ranges \A  10..15  11,12,13  >21  <21  >=21  <=21";
white-space: pre; position: absolute; background: var(--color-section); box-shadow: 0 2px 4px -1px var(--color-background); padding: .2rem .3rem; border-radius: .25rem; z-index: 10; @media only screen and (min-width: 50rem) {left: 98%; top: -7%}
@media only screen and (max-width: 50rem) {right: 50%; transform: translate(50%, 3.5rem)}}

/* (DText fields) Displays summary of Help:DText on hover over formatting buttons 25-09-05 */
.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 var(--color-background); 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}

/* (Post) Unhides mobile "View" button from popup, changes it to icon 25-09-20 */
@media only screen and (max-width: 50rem) {
#ptbr-wrapper .ptbr-favorite-button, #ptbr-wrapper .ptbr-etc-toggle {padding: .5rem 0}
.ptbr-fullscreen {display: revert}
.ptbr-fullscreen-button {font-size: 0; min-width: 2rem; position: relative}
.ptbr-fullscreen-button:before {content: "⛶"; font-size: 1.75rem; position: absolute; left: unset; right: unset; top: unset}
.ptbr-etc-menu .ptbr-etc-fullscreen {display: none}
#ptbr-wrapper .ptbr-resize select {max-width: 22vw} }

/* (Post/Edit) Makes "Submit" button static on mobile 25-09-05 */
@media only screen and (max-width: 50rem) {.edit-submit {position: static} }

/* (Post) Fixes mobile bug that stretches the page horizontally when editing tags 25-09-05 */
@media only screen and (max-width: 50rem) {*:has(#edit) {max-width: 97.7vw} }

/* (Tag lists) Hides quick blacklist, + and -. Highlights ? on desktop 25-09-05 */
.tag-list-quick-blacklist, .tag-list-inc, .tag-list-exl {display: none}
@media only screen and (min-width: 50rem) {.tag-list-wiki {padding: 0 .5rem; background-color: var(--color-section); border-radius: 20%; outline: 1px solid var(--color-foreground); outline-offset: -1px; max-height: 1.1rem}}

/* (Pages with "Search Options") Makes search fields wider 25-09-05 */
.simple_form div.input input[type="text"] {max-width: 95%; width: 26rem; padding-left: 0.2rem}

/* (DText fields) Adds horizontal scrolling when text styling buttons overflow 25-09-05 */
.dtext-formatter-buttons {overflow: auto}

/* (DText fields) Increases height 25-09-20 */
.dtext-formatter textarea {min-height: 20rem}

/* (New Upload) Minimizes wasted horizontal space in uploader, shrinks text and widens tag fields 25-10-03 */
div#page:has(#uploader) {margin: 0; .col.box-section {margin: 0 0 1.5rem} #preview-sidebar {margin: 0 0 1.5rem 5px; padding: 5px}}
div#c-uploads div#a-new .col2 {flex: 3 1 0}

/* (New Upload) Increases height on some tag fields 25-09-20 */
textarea#post_artist {min-height: 25rem}
textarea#post_content {min-height: 10rem}

/* (New Upload) Hides "Before uploading" section 25-09-20 */
#c-uploads #a-new .section {display: none} #uploader .flex-grid-outer {padding: 0}

/* (New Upload) Hides explanations that might get longer than tag fields 25-09-20 */
.flex-grid:has(#post_species) .col div {display: none}
.flex-grid:has(.rating-e) .col div {font-size: 0%; & a {font-size: .85rem}}

/* (Post) Hides [<Prev Search: Next>] above image (not pool navigation) 25-09-20 */
.nav-block.search-seq-nav {display: none}

/* (Post/Edit, Wiki/Edit) Makes "Edit Reason" input wider 25-09-20 */
input#post_edit_reason, input#wiki_page_edit_reason {width: 99%}

/* (Tag preview) Removes minimum height 25-09-22 */
.tag-preview {height: unset}

/* (Tag preview) More compact Show/Hide button 25-09-20 */
#tag-string-editor { @media only screen and (min-width: 65rem) {
.tag-preview-area {position: relative; margin-bottom: 0}
.tag-preview-area > a {position: absolute; right: 1%} } }

/* (Settings/Advanced) Makes the Frequent Tags box taller and wider 25-09-22 */
#user_favorite_tags {min-height: 150px; min-width: 95vw}

/* (Settings/Advanced) Makes the custom CSS style box taller and wider 25-09-20 */
#user_custom_style {min-height: 5500px; min-width: 95vw}

/* (Thumbs) Sets "Card Size" to "Large" by default 25-09-23 */
body[data-st-size="l"] section.posts-container {--thumb-image-size: 200px; --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-mobile-size: 50vw;
 @media (max-width: 50rem) {grid-template-columns: repeat(2,1fr)} }
.ssc-body-g.stm-toggle {& [for="ssc-card-medium"] {order: 1; font-size: 0%; &:before {content: "Large"; font-size: 1rem}}
& [for="ssc-card-large"] {font-size: 0%; &:before {content: "Medium"; font-size: 1rem} } &:has([for="ssc-card-large"]) svg {display: none} }
 .stm-toggle label:not(:checked + label) {&:nth-of-type(2) {border-radius: 0 0 .25rem .25rem} &:last-of-type {border-radius: 0} }

/* (Thumbs) 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"} }

/* (New Upload/Sources) Prevents movement of "Add another source" button by swapping it with source field, changes - to ✖ 25-09-24 */
.col2:has(.upload-source-list) {display: flex; flex-direction: column}
.upload-source-more {order: -1; margin-bottom: .25rem; .upload-source-add {border-radius: .25rem; padding: .25rem .3rem}}
.source_warning {order: 1; margin-bottom: 0}
.upload-source-row {& input {margin-right: 1px} & button {font-size: 0%; &:before {content: "✖"; font-size: 1rem; vertical-align: middle}}}

/* It is recommended to choose only one option */

/* [1](New Upload/File) Prevents interference to quick URL pasting caused by the delay of "Uploads from x are permitted" popup 25-09-25 */
.linkinput-wrapper {min-height: 4.5rem}

/* [2](New Upload/File) Moves sources under cursor after file URL is added (for "Prevents movement of Add another source" styles) 25-09-25 */
.fileinput-wrapper {padding-top: 1.5rem} .linkinput-wrapper {min-height: 4.5rem}

/* [3](New Upload/File) Prevents file/URL field from moving when URL is added 25-09-05 */
.uploader-file-input {position: relative; min-height: 10.5em;}
.linkinput-wrapper {position: absolute; bottom: 0; width: 100%;}
.whitelist-warning-disallowed {position: absolute; bottom: 100%;}

/* [1](New Upload/Preview) Limits preview height to viewport size, zooms in on hover 25-09-05 */
@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}} }

/* [2](New Upload/Preview) More compact image preview and dimensions 25-09-05 */
.upload_preview_container.in-sidebar {top: 0;}
.upload_preview_dims {position: absolute; background: black; padding: 0 0.1em; transition: 0.1s}
.upload_preview_container div:hover .upload_preview_dims {opacity: 0;}
#preview-sidebar .upload_preview_dims:hover {opacity: 1}

/* (Post) Underlines, moves up in list tags with low post count, increases threshold for "low count" 25-09-20 */
.general-tag-list {[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)} }}

/* (Search thumbs) Red outline, striped background if form, gender, or character count tags are missing 25-09-24 */
#posts article {&: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"]),
&: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"]),
&:not([data-tags~="solo"],[data-tags~="duo"],[data-tags~="group"],[data-tags~="zero_pictured"])
{outline: 2px dashed #a30; border-radius: 3px; background: repeating-linear-gradient(135deg, var(--color-foreground), var(--color-foreground) 1rem, var(--color-section) 1rem, var(--color-section) 2rem)} }

/* (Post/Tag list, Tag Preview) Text warning, striped background if important tags are missing 25-09-24 */
#tag-list, .tag-preview-area[disabled="false"] {--no-tags-list-bg: repeating-linear-gradient(135deg, var(--color-foreground), var(--color-foreground) 1rem, var(--color-section) 1rem, var(--color-section) 2rem);
 --no-tags-preview-bg: repeating-linear-gradient(135deg, var(--color-section-lighten-5), var(--color-section-lighten-5) 1rem, var(--color-section-lighten-10) 1rem, var(--color-section-lighten-10) 2rem); position: relative;
 &:before {content: var(--no-tags1,"") var(--no-form,"") var(--no-gender,"") var(--no-count,"") var(--no-tags2,"");
 font-weight: bold; color: var(--palette-text-red); position: absolute; margin-left: -.3rem; z-index: 10; top: -.9rem; background: var(--color-foreground)} }
#page .tag-preview-area {&:before {right: 0; top: 0; padding: 1px; border-radius: 0 3px}; & .tag-preview {background-attachment: local} } 
/* + If form tags are missing 25-09-24 */
.sidebar, .tag-preview-area {&:not(:has([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"])) {--no-tags1: "⚠️No"; --no-form: " form"; --no-tags2: "⚠️"; & #tag-list {background: var(--no-tags-list-bg)}; & .tag-preview {background: var(--no-tags-preview-bg)}} }
/* + If gender tags are missing 25-09-24 */
.sidebar, .tag-preview-area {&:not(:has([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"])) {--no-tags1: "⚠️No"; --no-gender: " gender"; --no-tags2: "⚠️"; & #tag-list {background: var(--no-tags-list-bg)}; & .tag-preview {background: var(--no-tags-preview-bg)}} }
/* + If character count tags are missing 25-09-24 */
.sidebar, .tag-preview-area {&:not(:has([data-name="solo"],[data-name="duo"],[data-name="group"],[data-name="zero_pictured"])) {--no-tags1: "⚠️No"; --no-count: " count"; --no-tags2: "⚠️"; & #tag-list {background: var(--no-tags-list-bg)}; & .tag-preview {background: var(--no-tags-preview-bg)}} }

/* (Post/Tag list, Tag preview) Gives checkmark, green background, and moves body type tags up in list 25-09-25 */
.general-tag-list .tag-list-item, .species-tag-list .tag-list-item, .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"]) {position: relative; order: -10; background: #343; & .tag-list-wiki {order: -1; padding: 0 .2rem}; & .tag-list-search, .tag-list-count {padding: 0 0 0 .1rem}; & .tag-list-count {font-size: 75%}; &:before {content: "☑"; color: yellow} } }

/* (Post/Tag list, Tag preview) Gives checkmark, purple background, and moves gender tags up in list 25-09-25 */
.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"]) {position: relative; order: -15; background: #114; & .tag-list-wiki {order: -1; padding: 0 .2rem}; & .tag-list-search, .tag-list-count {padding: 0 0 0 .1rem}; & .tag-list-count {font-size: 75%}; &:before {content: "☑"; color: fuchsia} } }

/* (Post/Tag list, Tag preview) Gives checkmark, green background, and moves character count tags up in list 25-09-24 */
.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"]) {position: relative; order: -5; background: #031; & .tag-list-wiki {order: -1; padding: 0 .2rem}; & .tag-list-search, .tag-list-count {padding: 0 0 0 .1rem}; & .tag-list-count {font-size: 75%}; &:before {content: "☑"; color: aqua} } }

/* (Post) Adds color samples to "color" tags, moves them to the bottom of the list 25-09-20 */
.general-tag-list {--ord: 10; --bg: rgba(0,0,0,.1); --cont: "⬤";
[data-name^="black_"] {order: var(--ord); background: var(--bg); &:before {content: var(--cont); color: black}}
[data-name^="blonde_"] {order: var(--ord); background: var(--bg); &:before {content: var(--cont); color: yellow}}
[data-name^="blue_"] {order: var(--ord); background: var(--bg); &:before {content: var(--cont); color: blue}}
[data-name^="brown_"] {order: var(--ord); background: var(--bg); &:before {content: var(--cont); color: #654321}}
[data-name^="dark_"] {order: var(--ord); background: var(--bg); &:before {content: var(--cont); color: dimgrey}}
[data-name^="gold_"],[data-name^="golden_"] {order: var(--ord); background: var(--bg); &:before {content: var(--cont); color: gold}}
[data-name^="green_"] {order: var(--ord); background: var(--bg); &:before {content: var(--cont); color: green}}
[data-name^="grey_"] {order: var(--ord); background: var(--bg); &:before {content: var(--cont); color: grey}}
[data-name^="light_"] {order: var(--ord); background: var(--bg); &:before {content: var(--cont); color: silver}}
[data-name^="monotone_"] {order: var(--ord); background: var(--bg); &:before {content: "⚪︎"}}
[data-name^="multicolored_"],[data-name^="rainbow_"] {order: var(--ord); background: var(--bg); &:before {content: var(--cont); color: rgba(0,0,0,0); background: linear-gradient(in hsl longer hue 90deg, red 0 100%); border-radius: 100%; width: .75rem; height: .75rem; align-self: center}}
[data-name^="orange_"] {order: var(--ord); background: var(--bg); &:before {content: var(--cont); color: orange}}
[data-name^="pink_"] {order: var(--ord); background: var(--bg); &:before {content: var(--cont); color: pink}}
[data-name^="purple_"] {order: var(--ord); background: var(--bg); &:before {content: var(--cont); color: purple}}
[data-name^="red_"] {order: var(--ord); background: var(--bg); &:before {content: var(--cont); color: red}}
[data-name^="silver_"] {order: var(--ord); background: var(--bg); &:before {content: var(--cont); color: silver}}
[data-name^="tan_"] {order: var(--ord); background: var(--bg); &:before {content: var(--cont); color: tan}}
[data-name^="teal_"] {order: var(--ord); background: var(--bg); &:before {content: var(--cont); color: teal}}
[data-name^="two_tone_"] {order: var(--ord); background: var(--bg); &:before {content: "◐"}}
[data-name^="white_"] {order: var(--ord); background: var(--bg); &:before {content: var(--cont); color: white}}
[data-name^="yellow_"] {order: var(--ord); background: var(--bg); &:before {content: var(--cont); color: yellow}} }

/* It is recommended to choose one option */

/* [1](Post/Edit) Displays image and editing form like in uploader - side-by side, with sticky image (50% split, adjustable) 25-10-03 */
@media (min-width: 50rem) {#page:has(li.active #post-edit-link) {margin: .25rem .25rem 0;
 & .content {grid-template-columns: 50% 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[src*="sample"] {max-height: 100vh}} #note-container {display: none} .fit-window-vertical {max-height: 100vh}} } } } }

/* [2](Post/Edit) Displays image and editing form side-by side, makes image sticky (like in uploader) ⇩ adjust split here 25-09-26 */
@media (min-width: 50rem) {#a-show .content {&:has(li.active #post-edit-link) {grid-template-columns: 50% auto; display: grid; height: fit-content; & > *:not(#edit, #image-and-nav) {z-index: 1}
& #post-sections > li, .blacklist-ui > * {background: var(--color-section-lighten-5); padding: 0 .4em 0 .1em; border-radius: 3px} & #image-and-nav {position: sticky; top: 0}
& #ptbr-wrapper {position: sticky; bottom: 0} & #edit {grid-column: 2; min-width: 0; grid-row: 1 / 15; & #form {border-radius: 0 0 3px 3px} & div:has([href="/wiki_pages/e621:tags"]) {display: none}}
&:has(#edit:hover) {& > *:not(#image-and-nav, #edit) {display: none}} } } }

/* [3](Post/Edit) Moves editing form to the right of image when "Fullscreen mode" is enabled (and tag list is hidden) 25-09-25 */
@media only screen and (min-width: 50rem) {body[data-st-fullscreen="true"] {& .search {margin: 0}; &:has(li.active #post-edit-link) {& #edit {position: absolute; right: 0; width: calc(53vw - 1rem); margin-top: -1.2rem} & .content {position: relative; &>*:not(#edit) {max-width: calc(47vw - 3rem)}}} & .search-controls {right: unset; left: 11rem} } }

/* [4](Post/Edit) Moves editing form to the right of image permanently 25-09-25 */
@media only screen and (min-width: 1400px) {body:has(li.active #post-edit-link)  {#page {margin: 0; & .content {padding: 0; max-width: 850px} } #edit {position: absolute; right: 1px; max-width: calc(100vw - 852px - 17rem); margin-top: -2.2rem} } }

/* (Related tags) Adds horizontal scrolling to related tags, prevents them from stretching mobile upload form 25-09-30 */
.related-tags {overflow-x: scroll}
#uploader .related-tags {max-width: 90vw}

/* (Related tags) Prevents long quick tags list from squeezing image preview on New Upload page 25-09-25 */
@media (min-width: 1100px) {#uploader .col.box-section {max-width: 48%;} }

/* (Related tags) Lines up tags by removing step created by section label 25-10-01 */
.related-section .related-items {&:nth-of-type(n+2):before {content: "f"; opacity: 0} .related-title {white-space: nowrap}}

/* [1](Related tags) Makes clickable area wider (unobtrusive version) 25-10-04 */
.related-item {background: var(--color-section); a {display: flex; width: 100%; &:focus {z-index: 1} &:after {content: ""; width: 100%; background: var(--color-section)}}}

/* [2](Related tags) Makes clickable area wider 25-10-01 */
.related-item a {display: inline-block; width: 100%}

/* (Related tags) Adds checkboxes, changes selection to translucent white 25-10-01 */
.related-item {white-space: nowrap; display: flex; padding: 0 3px 0 1px; &:before {content: "☐"; padding-right: 2px}
&:has(a.tag-active) {&:before, a {content: "☑"; background: rgba(255,255,255,0.1)}} }

/* (Tag preview) Displays + to the left of implied tags 25-09-21 */
.tag-preview {padding-left: .8rem; grid-template-columns: repeat(auto-fill,15rem)}
.tag-preview-tag {margin-right: 1rem; &:before {position: absolute; right: 100%}; &[data-implied="true"] {position: relative; & .implied {font-size: 85%}; &:before {content: "+"; color: white} } }

/* (Tag preview) Red number for tags with low post count 25-09-21 */
.tag-preview-area {[data-count="1"],[data-count="2"],[data-count="3"],[data-count="4"],[data-count="5"] {.post-count {color: var(--palette-text-red)}}}

/* (Tag preview) Yellow outline if tags with low post count, red if invalid or empty 25-09-21 */
.tag-preview-area:has([data-category="0"][data-count="1"],[data-category="0"][data-count="2"],[data-category="0"][data-count="3"],[data-category="0"][data-count="4"],[data-category="0"][data-count="5"]) {outline: yellow 2px dashed; outline-offset: 2px;}
#page .tag-preview-area:has(.empty, .invalid) {outline: var(--palette-text-red) 2px dashed; outline-offset: 2px;}

/* (Tag preview) Moves invalid or empty tags on top of list 25-09-21 */
.tag-preview-tag:has(.empty, .invalid) {order: -15; a {text-decoration: underline dotted}}

25-09-21 (Tag preview) ➕Highlighting of tags with low post count. Warning about tags with low post count, invalid tags and empty tags. Move invalid and empty tags on top of list.
         (Post/Tag list, Tag preview) ✒️Expanded warning about missing gender/form tags to Tag preview.

25-09-22 (Tag preview) ➕Remove base height. (Settings/Advanced) ➕Resize Frequent Tags field.

25-09-23 (Thumbs) ➕Options to set "Card Size" and "Image Crop" to different values by default. ✒️Tweaks to highlighting of posts with missing gender/form.

25-09-24 (Search thumbs) ✒️Highlighting of posts with missing tags now uses the same outline for every category. ➕Added highlighting for posts with missing character count.
         (Post/Tag list, Tag Preview) ➕Added warning about missing character count. ✒️Changed warning about missing tags to text+background. ➕Expanded warning about missing tags to Tag preview.

25-09-25 (New Upload/Sources) ✒️Updated "Prevent movement of Add another source button" and related styles.
         (Related tags)➕Prevent overly long quick tags list from squeezing upload preview. Add horizontal scrolling to related tags.
         (Post/Edit)➕Two options to display image and tag editor side-by-side, since detached edit mode is gone (crude prototypes for now, will improve later).

25-09-26 (Search, Post) ➕Prevent "Fullscreen mode" and "Search settings" buttons from moving. (Site/tables)➕Make clickable area taller.
         (Post/Edit)➕More finished side-by-side editing option, with scrolling image.

25-09-28 (Post/Edit)➕Final version of side-by-side editing: similar to uploader, with editor on the left and image on the right. (Site/tables)✒️Improved narrow screen appearance.

25-10-01 (Forum, Comments)➕User avatar/info scrolling.

25-10-03 (Post index/Edit mode)➕Make form scroll, widen submit button. (Post/Edit)✒️"Sample (850px)" fits to height in side-by side editing, image scrolls all the way down.
         (Related tags)✒️Changed how alignment, wider clickable area and checkboxes work.