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

Posted under e621 Tools and Applications

I just saw that on the advanced settings there is a "Custom CSS Style" which would apply to the whole site.

Tho I'm too lazy to write some CSS so I would like to get some CSS style written if you guys have any to give (for testing).

Thanks in advance! ;)

html body img {
  -ms-interpolation-mode: nearest-neighbor;
}

makes pixel art scale better when zooming in.

post[deleted=true] > a:after {
    background-image:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,1) 45%, rgba(0,0,0,1) 55%, rgba(0,0,0,0) 60%, rgba(0,0,0,0) 100%);
    color: red;
	content: "YOU DIED";
	font-family: "Times New Roman";
}

div.avatar div[data-status="deleted"] a, article[data-flags="deleted"] a, div.profile-avatar div[data-status="deleted"] a {
    justify-content: center;
    position: relative;
    display: flex;
}

div.avatar div[data-status="deleted"] a:after, article[data-flags="deleted"] a:after, div.profile-avatar div[data-status="deleted"] a:after {
    background-image:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,1) 45%, rgba(0,0,0,1) 55%, rgba(0,0,0,0) 60%, rgba(0,0,0,0) 100%);
    color: red;
    content: "YOU DIED";
    position: absolute;
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    font-family: "Times New Roman";
    letter-spacing: 3px;
    font-size: 1.5rem;
    text-shadow: 1px 1px 0px #000000, 1px 0px 0px #000000, 0px 1px 0px #000, -1px -1px 0px #000;
}

Changes the "DELETED" banner on deleted posts to say "YOU DIED".

a#re-enable-all-blacklists::before {
  content: "⚠️";
}

a#re-enable-all-blacklists {
  background: rgba(255, 0, 0, 0.5);
  border-radius: 4px;
  padding: 4px 8px 4px 2px;
}

styling to make it more obvious when my blacklist is disabled.

article.comment menu li:nth-of-type(7):nth-last-of-type(3) a::before,
article.comment menu li:nth-of-type(9):nth-last-of-type(3) a::before {
  content: "⚠️";
}

article.comment menu li:nth-of-type(7):nth-last-of-type(3) a,
article.comment menu li:nth-of-type(9):nth-last-of-type(3) a {
  background: rgba(255, 0, 0, 0.5);
  border-radius: 4px;
  padding: 4px 8px 4px 2px;
}

styling to make the "report" button on comments more obvious.

/* Make the custom CSS style box bigger */
#user_custom_style {min-height:400px; width:100%;}

/* Add more space on wiki pages */
#wiki-page-body {margin: 2em 0 2em 0;}

/* Fix to keep profile from breaking? */
.about-section p {word-break: break-word}

/* Move Reply/Edit and Report/Hide away from each other in forum */
.forum-post div.content-menu li:nth-child(2n):not([class]) {
    float: right; font-size:80%;
}

/* Star on favorited images */
article[data-is-favorited=true]::before, article[data-is-favorited=true]::after {
    width: 20px;
    height: 20px;
    background: linear-gradient(45deg, #ffeb3b, #ff5722);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);

    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    display: block;
    z-index: 11;
}
article[data-is-favorited=true]::after {
    background: linear-gradient(45deg, #3F51B5, #2196F3);
    z-index: 10;
    transform: scale(1.5);
}

So far, these recommendations do work pretty well! (Nice one with the "YOU DIED" CSS code for deleted posts lol)

Might take more recommendations if I receive more. And thanks to both janitors for giving some! ;)

/* Make search inputs ("Search Options") wider */
.simple_form div.input input[type="text"] {max-width: 95%; width: 26rem; padding-left: 0.2rem;}

New profile design is live, so I did a couple more CSS snippets.

div#c-users div#a-show>div {
  max-width: initial;
}

div#c-users div#a-show .posts-section .profile-sample-posts {
  justify-content: space-evenly;
}

Makes profile pages use your display's full width if needed, spaces posts out evenly.

Updated

/* Highlight current page number */
.page.current {background-color: rgba(0, 0, 0, 0.2); font-weight: bold;}

Here is my code to center some pages restricted to the left, like the user setting page :

/* Align at center pages restricted to left */

/* #a-site-map in "More", .theme-form and .theme-variable-form for "theme settings", #a-terms-of-service in "Rules" */
#a-site-map, .theme-form, .theme-variable-form, #a-terms-of-service {
	margin-left: auto;
	margin-right: auto;
}

/* user settings page */
#c-users #a-edit {
	display:grid;
	place-content:center;
}

/* connexion page */
#a-new {
	place-content: center;
}

/* Shortcuts page (create centered grid) */
#a-keyboard-shortcuts {
	display: grid;
	grid-template-columns: repeat(5, max-content);
	place-content: center;
}
/* Make h1 take full line of Shortcuts grid */
#a-keyboard-shortcuts > h1 {
	grid-column: 1 / -1;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1em;
}

Here is the rest of my grey CSS theme :

/* Colors */
body {
	background-color: #252525;
	--color-background: #252525;
	--color-foreground: #414141;
	--color-foreground-darken: #333;
	--color-section: #595959;
	--color-section-lighten-5: #6c6c6c;
	--color-section-lighten-10: #777;
	--color-dtext-section: #999;
}


/* Header (old) */
header#top menu.main, footer#page-footer {
	background-color: #373737;
}
header#top menu, header#top menu.main li.current a {
	background-color: var(--color-section);
}
/* Header search */
.navigation input {
	background-color: var(--color-foreground-darken);
}


/* Footer */
footer.footer-wrapper {
	background: none;
}


/* Page listing (end of content) */
/* Make selected page clearer */
nav.pagination .page.current {
	font-weight: bold;
	background-color: var(--color-section-lighten-5);
}


/* Inputs places */
input, textarea, textarea:focus, select {
	background-color: var(--color-foreground);
	color: var(--color-text);
	border: 1px solid var(--color-section);
	border-radius: 0.4em;
}
.dtext-formatter[data-editing="true"] .dtext-formatter-charcount {
	color: var(--color-text);
}
/* Input from left sidebar (.search and .sidebar in list and #sidebar in content) */
.search textarea, .sidebar select, #sidebar textarea {
	background-color: var(--color-foreground-darken);
}


/* Other (old) */
article.post-preview .desc, div#c-posts div.nav-notice, .comment-post-grid,
div#c-posts div.notice.notice-child, div#c-posts div.notice.notice-parent,
div#c-users div#a-show .profile-stats,
div#c-posts div#a-show .pool-nav, div#c-posts div#a-show .set-nav,
div#c-posts div.notice.notice-pending,
table.striped thead tr, table.table thead tr,
.ui-widget-content,
.desc {
	background-color: var(--color-section);
}

div.related-tags {
	background-color: var(--color-foreground);
}

table.striped tbody tr, table.table tbody tr {
	background-color: #4d4d4d;
	border-bottom: 1px solid #aaa;
}
table.striped tbody tr:hover, table.table tbody tr:hover {
	background-color: #5e5e5e;
}

.styled-dtext blockquote, .styled-dtext div.expandable, .styled-dtext details, .styled-dtext pre {
	background: linear-gradient(#7d7d7d, #575757);
}

.button.btn-neutral, .button.score-neutral {
	background: linear-gradient(#7b7b7b, #4f4e4e);
}
.button.btn-neutral:hover, .button.score-neutral:hover {
	background: linear-gradient(#8e8e8e, #515151);
}

div#notice {
	border: 2px solid #919191;
}
div#c-posts div.notice.notice-resized,
div#c-posts div.notice.notice-child, div#c-posts div.notice.notice-parent {
	border: 0px;
}

.box-section {
	background: none;
}

A part of it probably doesn't do anything now (after website UI update).
I have written those myself.