♡ vegetablearian's website ♡


Site skins!!!

Some of these are more user-friendly than others.

Archive of Our Own

This is a constant work in progress. I love that AO3 let you upload custom css - I hate how heavily styled the site is by default. I am constantly undoing the most insane shit. I wish they would let me start from a nice fresh nude unstyled site!

My priorities are: pretty colours (no grey!!) and easy-read tag lists.

Your own bookmarks have a fun heart background... because you love them :) Other people's are a more muted darker turquoise. It should be easy to style both the same way if you prefer one or the other!

This screenshot also shows the tag formatting: there's a line break between relationships and characters to make them even easier to discern at a glance. Tags won't split over lines - this isn't a problem in any of my fandoms, but may be with long two language character names/large poly relationships?

Warnings are big and clear; freeforms have been demoted to little shitty hard to read things because of all the people who think it's okay to talk in them. Apologies to people who use freeforms appropriately and sparingly, but what can you do!


I partially forgive the author of these fics for the tag talking because they're excellent. A 3am Phone Call and The Collision in Cardiozone HQ, both by glittermilk :)


In the author page, you can see my settings for this cool userscript that lets you highlight a list of fandoms. I've added every fandom I write for, along with some others I like to read in. You can choose highlighting, bold, or both, and you can also give individual fandoms individual colours! The default for the skin is grey, indicating disappointment that an author you're interested in doesn't write exclusively in your fandoms :)

You can see more tags here on your own (my own!) author page, along with the buttons!

Pretty similar in a tag search. (I have to help fill that tag! Only 2 works... so sad...)

And finally, the reason we come to the site: fanfics! The relationship/character tags are coloured the same way as they are on other pages, but there's less need to differentiate or make things easier to read, because the wider (taller?) formatting on this page does it for us.

Summaries and author's notes have been condensed and centered, to better differentiate them from the fic itself.

Finally, there's a subtle (compared to everything else I have done) gradient across the fic itself, which makes it more fun to look at, but isn't distracting! And the nice wide margins also make it easier to read.


body {
	color: rebeccapurple;
	background-color: deepskyblue;
}

#header .dropdown:hover .current + .menu,
#header .actions a:hover,
#header .dropdown:hover a,
#header .dropdown:hover .menu a:hover {
	background: mediumpurple !important;
	color: white !important;
}

#header .menu {
	background: mediumpurple;
}

#small_login,
#header .open a,
.search span.tip,
#header .dropdown ul.dropdown-menu a,
#dashboard .current {
	background-image: linear-gradient(to bottom right, hotpink, mediumorchid) !important;
	color: white !important;
}

#outer {
	background-color:deepskyblue;
	background-image: radial-gradient(circle at 100% 150%, deepskyblue 24%, white 24%, white 28%, deepskyblue 28%, deepskyblue 36%, white 36%, white 40%, transparent 40%, transparent), radial-gradient(circle at 0    150%, deepskyblue 24%, white 24%, white 28%, deepskyblue 28%, deepskyblue 36%, white 36%, white 40%, transparent 40%, transparent),	radial-gradient(circle at 50%  100%, white 10%, deepskyblue 10%, deepskyblue 23%, white 23%, white 30%, deepskyblue 30%, deepskyblue 43%, white 43%, white 50%, deepskyblue 50%, deepskyblue 63%, white 63%, white 71%, transparent 71%, transparent), radial-gradient(circle at 100% 50%, white 5%, deepskyblue 5%, deepskyblue 15%, white 15%, white 20%, deepskyblue 20%, deepskyblue 29%, white 29%, white 34%, deepskyblue 34%, deepskyblue 44%, white 44%, white 49%, transparent 49%, transparent), radial-gradient(circle at 0    50%, white 5%, deepskyblue 5%, deepskyblue 15%, white 15%, white 20%, deepskyblue 20%, deepskyblue 29%, white 29%, white 34%, deepskyblue 34%, deepskyblue 44%, white 44%, white 49%, transparent 49%, transparent);
	background-size: 100px 50px;
}

li.blurb,
.listbox li.blurb,
fieldset,
form dl,
.dashboard .own {
	border-color: #838aff;
	background-image: linear-gradient(to bottom right, aquamarine, turquoise);
	box-shadow: none;
}

#dashboard.own,
#dashboard ul {
	border: none !important;
}

#dashboard a {
	border: 1px solid !important;
}

.listbox,
.listbox .index,
.dashboard .listbox .index {
	background: #d9cfff;
	padding: 1.5em 1em;
	border-color: rebeccapurple;
	box-shadow: none;
}

dl.meta {
	background-image: linear-gradient(to bottom right, aquamarine, turquoise);
	padding: 1.5em 1em;
	border-color: darkturquoise;
	box-shadow: none;
}

#main {
	padding: 0 8em;
}

#workskin {
	background-image: repeating-radial-gradient(circle,#f2e6fa,lavender,#f0daff);
	padding: 1.5em 4em;
	border-color: rebeccapurple;
	box-shadow: none;
	color: #49246f;
}

#workskin * {
	background: transparent;
	box-shadow: none;
	color: #49246f;
}

#header,
#footer ul.actions {
	background-image: linear-gradient(to bottom right, hotpink, hotpink, mediumorchid, mediumpurple);
	min-height: 0;
	margin: 0;
	box-shadow: none;
}

#greeting img.icon {
	height: 2em;
	width: 2em;
	margin-top: 10px;
	border-radius: 25px;
}

#header h1 img {
	display: none;
}

#header .heading a {
	font-size: 2em;
	line-height: 1.75em;
	color: white;
	text-shadow: 1px 1px 3px rebeccapurple;
	padding-left: 0.5em;
	padding-top: 1em;
}

#header ul.primary {
	background: none;
	display: block;
	margin-top: 0.7em;
	text-align: right;
}

#header .actions a,
#header .current,
#header #search .button,
#header fieldset,
#header .primary {
	background: none;
	color: white;
	box-shadow: none;
}

#header .current {
	background: rebeccapurple !important;
}

#header .user a {
	padding-bottom: 0.5em;
	padding-top: 15px;
	border: 1px solid rebeccapurple !important;
	background: mediumpurple !important;
}

#header .user.current {
	padding-bottom: 0.5em;
	padding-top: 15px;
}

#header .menu li {
	background: transparent;
	border-color: mediumpurple !important;
}

.actions a, .actions a:link,
.current,
.flash,
.actions input {
	background-image: none !important;
	background: rebeccapurple !important;
	border-color: white !important;
	color: white !important;
}

.autocomplete .dropdown ul li:hover,
li.selected {
	color: turquoise !important;
}

.comment {
	border-color: mediumpurple !important;
}

.thread.odd {
	background: aquamarine;
}

.thread.even {
	background: turquoise;
}

.comment h4.byline {
	background: skyblue;
}

.commas li::after {
	content: " ";
}

a.tag {
	border-bottom: none;
	line-height: 1.75;
}

a.tag:hover,
.listbox .heading a.tag:visited:hover {
	background: mediumpurple;
}

a.tag > li a {
	text-decoration: none;
}

li.warnings a {
	background: deepskyblue;
	color: white;
}

li.warnings a, li.relationships a, li.characters a {
	white-space: nowrap;
}

li.warnings a, li.relationships a, li.characters a, .relationship.tags > ul > li, .character.tags > ul > li {
	padding: 0 0.5em
}

li.relationships a, .relationship.tags > ul > li {
	background-image: linear-gradient(to bottom right,#e9e9ff,#bab0de);
	color: rebeccapurple;
}

li.characters a, .character.tags > ul > li {
	background-image: linear-gradient(to bottom right,lightcyan,lightskyblue);
	color: darkslateblue;
}

li.freeforms a {
	background: transparent;
	color: steelblue;
	font-size: 0.75em;
}

.relationships + .characters::before {
	content: " ";
	display: block;
}

.actions a:hover,
.actions input:hover,
.actions a:focus,
.actions input:focus,
label.action:hover,
.action:hover,
.action:focus {
	color: mediumpurple;
	border-top: 1px solid mediumpurple;
	border-left: 1px solid mediumpurple;
}

li.blurb,
.wrapper,
.flash,
.listbox {
	box-shadow: none;
}

.splash .favorite li:nth-of-type(2n+1) a{
	background: lavender!important;
}

.splash .module h3 {
	border-bottom: 1px solid lavender;
	color: rebeccapurple;
	font-size: 1.714em;
}

#dashboard a:hover,
.actions a:hover,
.actions input:hover,
.delete a,
span.delete,
span.unread,
.replied,
span.claimed,
.draggable,
.droppable,
span.requested,
a.work,
.blurb h4 img,
.system .latest h3,
.system div.news h3,
.system .tweets h3,
.required,
.error,
a.cloud7,
a.cloud8 {
	color: rebeccapurple!important;
	background: lavender!important;
}

.splash .favorite li:nth-of-type(2n+1) a:hover, .splash .favorite li:nth-of-type(2n+1) a:focus  {
	color: lavender!important;
	background: rebeccapurple!important;
}

.blurb h4 a:link {
	color: rebeccapurple !important;
}

#footer a {
	color: white !important;
	background: none !important;
}

.own.user.module {
	width: auto;
}

a,
a:link {
	color: royalblue;
}

a:visited {
	color: darkslateblue;
}

.index.group > li > a {
	color: white;
	background: #9385a2;
	padding: 0 1em;
}

.notes {
	background: white;
	padding: 1em;
}

h1, h2, h3, h4, h5, h6, .heading, pre, .note {
	padding: 0.5em 25px;
	display: inline-block;
	margin-bottom: 5px!important;
}

h1, h2, pre, .note{
	background: deepskyblue;
	color: white;
}

h3, h4, h5, h6 {
	background: transparent;
	color: rebeccapurple;
}

.listbox > .heading, .listbox .heading a:visited {
	color: rebeccapurple;
}

h1, h2 {
	border: white solid 4px;
	font-weight: bold!important;
	box-shadow: 2px 2px 2px #5391ae;
	margin-bottom: 5px!important;
}

.header.module > h4, .header.module > h5 {
	padding: 0!important;
}

.header.module > h4 {
	font-size: 1.8em;
}

.preface h3 {
	border: none!important;
}

div.preface {
	padding: 1em 0;
	margin: 0;
	text-align: center;
}

div.preface * {
	padding: 0!important;
	margin: 0.25em 0 0 0!important;
	min-height: auto!important;
}

#work_endnotes, div[role=article] {
	border-top: rebeccapurple 1px solid;
}

.landmark {
	display: none!important;
}

.primary.header.module h2 {
	border: white solid 4px!important;
}

.header.module h4, .header.module h5 {
	border: none!important;
	box-shadow: none!important;
}

#footer .heading, .byline, .header, {
	background: transparent!important;
}

.favorite.module, .news.module, .bio.module, {
	background: #ffffffe6;
}

.tweets {
	display: none;
}

.reading h4.viewed {
	background: transparent!important;
}

.statistics .index li {
	border: thistle 1px dotted;
	background: #ffffff45!important;	
}

#stat_chart g[clip-path^=url] > g:nth-of-type(2) rect,
#stat_chart svg g:nth-of-type(2) > g rect:last-of-type {
    filter: hue-rotate(275deg);
    opacity: 80%;
}

.comment.even, .comment.odd, #kudos {
	background: lightskyblue;
}

/* bookmarks */

.own.user.module.group {
	background:
		radial-gradient(circle closest-side at 60% 43%, brown 26%, rgba(187,0,51,0) 27%),radial-gradient(circle closest-side at 40% 43%, brown 26%, rgba(187,0,51,0) 27%),radial-gradient(circle closest-side at 40% 22%, crimson 45%, rgba(221,51,85,0) 46%),radial-gradient(circle closest-side at 60% 22%, crimson 45%, rgba(221,51,85,0) 46%),radial-gradient(circle closest-side at 50% 35%, crimson 30%, rgba(221,51,85,0) 31%),radial-gradient(circle closest-side at 60% 43%, brown 26%, rgba(187,0,51,0) 27%) 50px 50px,radial-gradient(circle closest-side at 40% 43%, brown 26%, rgba(187,0,51,0) 27%) 50px 50px,radial-gradient(circle closest-side at 40% 22%, crimson 45%, rgba(221,51,85,0) 46%) 50px 50px,radial-gradient(circle closest-side at 60% 22%, crimson 45%, rgba(221,51,85,0) 46%) 50px 50px,radial-gradient(circle closest-side at 50% 35%, crimson 30%, rgba(221,51,85,0) 31%) 50px 50px;
	background-color:brown;
	background-size:100px 100px;
	border-color: brown;
}

.own.user.module.group * {
	color: white!important;
	text-shadow: 1px 1px maroon;
}

.own.user.module.group .actions a, .own.user.module.group .actions a:link {
	background: brown!important;
}

.bookmark .user {
	background: turquoise;
	box-shadow: none;
	border-color: darkturquoise;
}

/* missing backgrounds */

#main > p, .index.group > dt, ol.tag.index.group, .admin, .support {
	background: white;
}

The stuff about shifting the stat page chart hue is from this tumblr post, and the super cool patterned backgrounds are from this site, which has a bunch more!

The problem with the nice wide margins is that they don't work on titchy mobile screens. For mobile-friendliness (to be able to read more than a column of like 3 words), you need a second skin:


#main {
  padding: 0 1em;
}

#workskin {
  padding: 1.5em 1em;
}

.dashboard .index {
  float: left;
}

In the advanced settings, under media, tick "only screen and (max-width: 42em)", and make the main skin a parent. Now, this is the skin that you use, if you need it (otherwise just use the first one). Have fun!


Tumblr

This one is more difficult! You need to be using Firefox, to take advantage of its userContent.css. You're also going to have to block a bunch of elements and idk which exactly, but you will see them because they will be ~ruining everything~. Try this list, formatted for AdBlocker Ultimate:


tumblr.com###base-container > div.D5eCV:nth-child(2) > div.gPQR5:last-child > div.e1knl:last-child > aside > div > div.ZN143:first-child > div.YOf31:last-child > div.S3HC8:nth-child(2) > div
tumblr.com##.B15CE
tumblr.com##.B15CE
tumblr.com##.CCtDO
tumblr.com##.Cewkz
tumblr.com##.FZkjV
tumblr.com##.FZkjV
tumblr.com##.HphhS
tumblr.com##.HphhS
tumblr.com##.I6Y3s
tumblr.com##.LQ3tN, .K6fAK
tumblr.com##.LaNhI
tumblr.com##.Rp8gp, .Qj_pr, .GxBzU
tumblr.com##.TGnTP
tumblr.com##.TRX6J.IeXII
tumblr.com##.aJgDC
tumblr.com##.bjtTv
tumblr.com##.d_FyU
tumblr.com##.erLM8
tumblr.com##.iGLU3
tumblr.com##.iGLU3
tumblr.com##.jxu4l
tumblr.com##.quD2R
tumblr.com##.tDrb8
tumblr.com##.tDrb8
tumblr.com##span.EvhBA.f68ED.a6sXh

Your browser window also needs to be about 1200px wide for the sidebar to work right. Yeah, this is a hackjob! But maybe you can use it as a base.

Design principles here are: put animated gifs everywhere, hide all recommended/etc stuff, hide names of blogs you aren't following (they are still there for you to mouseover if you want), hide notes (still there to click on, if you know where - bottom left), tags are smaller and centred

Replace the "your inspiring message here" with whatever you want... or leave it, up to you. And that's where to find the urls of my inspirational posters of sad buff Boone fanart and an Asja Boros illustration, if you for some reason don't want to look at them constantly whenever you're on tumblr.

This is a spring theme. Probably you will be able to change all the img urls to summer things/whatever you next want as your theme, or maybe by then tumblr will have renamed all the elements. I tried to get around this a little bit with all that 1st child-stuff but it's a bit hit-and-miss, also I'm lazy! But enjoy!


@-moz-document url-prefix(https://www.tumblr.com/) {
/* 
75, 0, 130 = indigo > darker than darkgreen
248, 248, 255 = ghostwhite > ivory
102, 51, 153 = rebeccapurple > green
230, 230, 250 = lavender > honeydew
147, 112, 219 = medium purple > green
 */
:root{
	--accent: 75, 0, 130!important;
	--black: 75, 0, 130!important;
	--white: 248, 248, 255!important;
	--follow: 230, 230, 250!important;
	--white-on-dark: 248, 248, 255!important;
	--navy: 102, 51, 153!important;
}
::selection {
	background: hotpink;
	color: white;
}
/* sidebar */
body>div>div>div:nth-child(2)>div:nth-child(2)>div:nth-child(2)::before{
	display: block;
	content: "your inspiring message here";
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: url(https://64.media.tumblr.com/78bb3824ae02c42e2f435318c0cbe7dd/80d6de250866e506-13/s1280x1920/25bdab0365eb78793b113b411904402b7832511c.jpg);
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: top 555px right 94px;
	background-size: 30%;
	position: absolute;
	color: white;
	text-shadow: 0px 0px 2px hotpink, 0px 0px 2px hotpink, 0px 0px 2px hotpink;
	text-align: center;
}

body>div>div>div:nth-child(2)>div:nth-child(2)>div:nth-child(2){
	background-image: url(https://64.media.tumblr.com/54709cb78915b5c7bc13c72aaab78443/49f63725164e7c63-a2/s1280x1920/26389579c154aa1387e594a4923a47a90117539a.jpg);
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: top 93px right 110px;
	background-size: 28%;
	position: relative;
}
/* bg */
#base-container>div:nth-child(2){
	background:url(https://64.media.tumblr.com/eba9d406577f56033326f38c61fdba1f/591e9f25cb5a59ce-9e/s1280x1920/44e19855209e8945e25fe3148f1a75ff49cc7ec9.gifv)!important;
	background-size: 40%!important;
	background-position: center!important;
}
body{
	background-color: rebeccapurple!important;
}

/* header, new post bar */
body>div>div>div:nth-child(2)>div:nth-child(1){
	background-image: linear-gradient(to bottom right, #4bca04, #0b9520)!important;
	postion:relative;
	height:45px!important;
}
._3kR_{
	height: 45px!important;
}
body>div>div>div:nth-child(2)>div:nth-child(1)::after{
	content: ' ';
	display: block;
	height: 30px;
	left: 0;
	right: 0;
	top: 41px;
	opacity: 0.9;
	position: absolute;
	background-image: url(https://64.media.tumblr.com/74274b9b8ea52643ec4c112e6322f246/c747fb181cd132d9-85/s250x400/741151441644eb917210a40bd96873768cae4fa7.gifv);
}
body>div>div>div:nth-child(2)>div:nth-child(1)::before{
	content: ' ';
	display: block;
	height: 25px;
	left: 0;
	right: 0;
	top: 10px;
	position: absolute;
	background-image: url(https://64.media.tumblr.com/d17ca1127b772f0b5d3aa26388692a14/c747fb181cd132d9-f2/s400x600/957155c6d13ebc099fe56c6178ce4b14865dbeef.gifv);
}

.wttFd{
	/*background-color: rgba(190, 135, 227, 0.42) !important;
	margin-bottom: 40px!important;*/
	display:none!important;
}
/* post spacing, outline */
body>div>div>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>main>div:nth-child(4)>div:nth-child(2)>div{
	margin-bottom: 53px!important;
	box-shadow: 0px 0px 7px darkred;
}
/* post header, blogname */
.BjErQ{
	background:url(https://64.media.tumblr.com/7fefbb9a3678822e8d9f61408d627adb/6280b9e9bcd815e0-ff/s1280x1920/8c7bccf768b7d38b9ce2ab18e8f207ee3e786424.png);
	background-color:rgba(0,0,0,0)!important;
	background-size: 100%;
	background-position:45% 50%;
	opacity:0.8;
	margin-bottom: 0px!important;
}
body{
	--post-header-vertical-padding:1px!important;
}
.u2tXn{
	margin-top:0!important;
	padding-top:0!important;
	border-top:none!important;
}
/* move op back up */
.ffqNn:not(:last-child){
	margin-top: -19px!important;
}
body>div>div>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>main>div:nth-child(4)>div:nth-child(2)>div>div>div>article>header>div>div:nth-child(1)>div:nth-child(1)>div>div>span{
	color: white!important;
	text-shadow: 0px 0px 2px darkgreen, 0px 0px 2px darkgreen, 0px 0px 2px darkgreen, 2px 2px 6px deeppink;
}

/* post footer, text bottom margin */
.gstmW{
	margin-top:0!important;
	padding-top:0px!important;
	position:relative;
	height: 10px!important;
}
.MCavR{
	padding-top:0px!important;
	padding-bottom:0px!important;
	margin-top:0px!important;
	border: none!important;
}
.hAFp3 {
	margin: 12px 0!important;
	text-align: center!important;
	font-size: 0.8em!important;
}
.tOKgq{margin-top:0px!important}
.tOKgq.G6mnk{
	background: url(https://64.media.tumblr.com/36e272d8e61c1506f6c9c9c3c729c766/591e9f25cb5a59ce-a4/s1280x1920/d5de119031724c27fda9e51e1d214b561c327f83.png), url(https://64.media.tumblr.com/7fefbb9a3678822e8d9f61408d627adb/6280b9e9bcd815e0-ff/s1280x1920/8c7bccf768b7d38b9ce2ab18e8f207ee3e786424.png);
	background-position: 50% 50%;);
	height: 50px;
	background-repeat: repeat-x, repeat;
/*	background-size: 32px 24px, 150%;*/
}

.tOKgq.G6mnk::before, .tOKgq.G6mnk::after{
	content: ' ';
	display: block;
	position: absolute;
	background-image: url(https://64.media.tumblr.com/78976f677ff751f43a34172c80cf871c/591e9f25cb5a59ce-99/s500x750/5eb02d345c78846886ec435c6a9d3d05f1eb45a4.gifv);
	background-position: center;
	height:16px;
}

.tOKgq.G6mnk::after{
	left: 0;
	right: 0;
	bottom: -5px;
}

.tOKgq.G6mnk::before{
	left: 0;
	right: 0;
	bottom: 38px;
}


	
.k31gt {
	margin-bottom: 0px!important;
	margin-top: 10px!important;
}
/* post bg, no txt/img bg */
.FtjPK{
	background-image: linear-gradient(to bottom right, #fff8fc, #f2cceb, #d9b6fb)!important;
}
.t5G6U{
	background: none!important;
}

.u2tXn,.qYXF9{
	background-color:transparent!important;
}
/* stronger text: post, tags */
.k31gt,a.KSDLH{
	color: rebeccapurple!important;
}
/* highlight followed poster av */
.JZ10N>.nZ9l5{
	position:relative;
}
.JZ10N>.nZ9l5::before{
	position:absolute;
	background-image:linear-gradient(to bottom right, #ffdcf0, #b6dbfb);
	content: ' ';
	top:0;
	left:0;
	bottom:0;
	right:0;
	transform: scale(1.2);
	opacity: 0.8;
}
.JZ10N>.nZ9l5::after{
	position:absolute;
	background-image:url(https://64.media.tumblr.com/07d2bdaaa744434b5239ca064a003f0a/591e9f25cb5a59ce-14/s250x400/568afe3b5b415d2bf368f55772d591f87a21b35c.gifv);
	background-size: 100%;
	content: ' ';
	top:0;
	left:0;
	bottom:0;
	right:0;
	transform: scale(1.2);
}

/* weaker element: op, notes */
.QkCNg,.zrO3e{
	opacity:0.1;
}
/* op padding, bg */
.q4Pce{
	margin-bottom: 0px !important;
	padding-bottom: 0px !important;
}
.fAAi8{
	margin-top:0!important;
	margin-bottom:1px!important;
	background-image: url(https://64.media.tumblr.com/45cc1458eb0b7ed4501adfe4cc92092b/427b7bb6eb6f3db9-33/s540x810/987c8036e2c6e5112653e11f25a07b74c27a9baa.gifv);
	background-repeat: repeat-x;
	background-color: transparent;
	height: 26px;
}
/* hide element: source, follow */
.jxQkY, .rmjNp{display:none!important;}

/* invisible text: rb-from */
.eLzSX{
	color:transparent!important;
}
/* invisible small av new DOESN'T WORK */
div.j4akp[style~="38px"]{
	display:none!important;
}
/* smaller hidden post, weak tags/button, no desc */
.W0ros{
	height: 170px!important;
	opacity:0.1!important;
}
p.uamX1{
	display:none!important;
}

/* sponsored */
.moatContainer{display:none!important;}

/* moving datestamp */
.pVS0A{
	margin-top: -20px!important;
	margin-left: 400px!important;
}

/* activity mini-headers */

.Gt2Q9 {
	background-image: url(https://64.media.tumblr.com/d17ca1127b772f0b5d3aa26388692a14/c747fb181cd132d9-f2/s400x600/957155c6d13ebc099fe56c6178ce4b14865dbeef.gifv);
	background-repeat: no-repeat;
	background-position: center;
}


/* trying to fix new notes */

.G6mnk .yTb5J {
	margin-top: -5px!important;
	background: aliceblue;
	position: absolute;
	z-index: 1;
}


}


DuckDuckGo

This is another userContent.css job, and you'll also need to block a bunch of nonsense intrusive elements. Try this list, formatted for AdBlocker Ultimate (or you could totally just smack them all in your stylesheet with a display:none... but I am too lazy sorry):


duckduckgo.com##.footer
duckduckgo.com##.related-searches, .t-m
duckduckgo.com##.text_promo, .header--text_promo
duckduckgo.com##.header__clickable, .js-hl-button
duckduckgo.com###duckbar_static > li.zcm__item:last-child
duckduckgo.com###duckbar_static > li.zcm__item:nth-child(4)
duckduckgo.com###duckbar_static > li.zcm__item:nth-child(3)
duckduckgo.com##.js-feedback-btn-wrap
duckduckgo.com##.badge-link, .badge-link--full, .js-badge-link
duckduckgo.com##.content-info
duckduckgo.com##.onboarding-ed__slide, .onboarding-ed__slide-1, .js-onboarding-ed-slide, .js-onboarding-ed-slide-1
duckduckgo.com###faq
duckduckgo.com##.onboarding-ed__arrow-teaser__alpinist
duckduckgo.com##.onboarding-ed__arrow-teaser, .js-onboarding-ed-teaser
duckduckgo.com##.tag-home__item
duckduckgo.com###logo_homepage_link
duckduckgo.com##.onboarding-ed, .js-onboarding-ed


@-moz-document domain("duckduckgo.com") {
	body, .body--home, .site-wrapper--home{
		background-image:
		radial-gradient(closest-side, transparent 0%, transparent 75%, #B6CC66 76%, #B6CC66 85%, #EDFFDB 86%, #EDFFDB 94%, #FFFFFF 95%, #FFFFFF 103%, #D9E6A7 104%, #D9E6A7 112%, #798B3C 113%, #798B3C 121%, #FFFFFF 122%, #FFFFFF 130%, #E0EAD7 131%, #E0EAD7 140%),
		radial-gradient(closest-side, transparent 0%, transparent 75%, #B6CC66 76%, #B6CC66 85%, #EDFFDB 86%, #EDFFDB 94%, #FFFFFF 95%, #FFFFFF 103%, #D9E6A7 104%, #D9E6A7 112%, #798B3C 113%, #798B3C 121%, #FFFFFF 122%, #FFFFFF 130%, #E0EAD7 131%, #E0EAD7 140%)!important;
		background-size: 110px 110px!important;
		background-color: #C8D3A7!important;
		background-position: 0 0, 55px 55px!important;
	}
	.results--main, .sidebar-modules, .js-sidebar-modules {
		background: #fafffa;
	}
	.is-vertical-tabs-exp .header-wrap {
		background-color: #D9E6A7!important;
	}

}

Patterned background from this site!