Archive of Our Own (BETA)

CSS

/* SKIN: Reversi */
/* DESCRIPTION: 
Light on dark with blue key, default skin 
 Please DO copy and reuse and modify this code any way you like!
# code adapted from 'colour flip combos' by lim @ ao3*/
/*note to intrepid skinsers: there is an external bug in our CSS parser plugin meaning we can't use gradients (or actually multiple background instances),
which is obviously excessively vexing. 
Until the developer fixes this, I'm working around by inheriting the AO3 button gradient and tinting it with diffused, positioned box shadows. Anyway, this is why these buttons don't have iterated backgrounds - the parser just eats them!*/
/*regions, groups, elements*/
#outer .region,
#ibox_wrapper #ibox_content,
.post fieldset fieldset {
  background: none;
}

body,
.group,
.group .group,
.region,
.flash,
fieldset,
fieldset fieldset ul,
form dl,
textarea,
#main .verbose legend,
.verbose fieldset,
.notice,
ul.notes,
input,
textarea,
table,
th,
td:hover,
tr:hover,
.symbol .question:hover,
#ibox_wrapper {
  background: #333;
  color: #eee;
  border-color: #222;
  outline: #111;
  box-shadow: none;
}

.group.listbox,
input:focus,
textarea:focus,
li.relationships,
.group.listbox .index,
#dashboard a:hover,
th,
.secondary,
.thread .even {
  background: #2a2a2a;
}

#header ul.primary,
#footer,
.toggled form {
  background: url("/images/skins/textures/tiles/black-noise.jpg");
}

#header ul.primary,
#footer,
#dashboard ul,
dl.meta,
.group.listbox,
#main li.blurb,
form blockquote.userstuff,
div.comment,
li.comment,
.toggled form,
form dl dt,
#inner .module .heading,
.bookmark .status span {
  border-color: #555;
}

.group.listbox,
#main li.blurb,
.wrapper,
.secondary,
form blockquote.userstuff,
.thread .comment,
.toggled form {
  box-shadow: 1px 1px 3px #000;
}

#dashboard .current,
.actions a:active,
#outer .current,
a.current,
.current a:visited,
span.unread,
.replied,
span.claimed,
dl.index dd,
.own,
.draft,
.draft .unread,
.child,
.unwrangled,
.unreviewed {
  background: #000;
  border-color: #555;
  box-shadow: -1px -1px 3px #000;
}

input,
textarea {
  box-shadow: inset 0 1px 2px #000;
}

li.blurb,
.blurb .blurb,
.listbox .index,
.dashboard .listbox .index {
  box-shadow: inset 1px 1px 3px #000;
}


/* key colour to blue */
.autocomplete .dropdown ul li:hover,
li.selected,
a.tag:hover,
.symbol .question {
  background: #5998D6;
  color: #111;
}

#header #greeting img,
#header h1 a,
#header fieldset,
#header form,
#header p,
#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 a:link,
.blurb h4 img,
.system .latest h3,
.system div.news h3,
.required,
.error,
a.cloud7,
a.cloud8,
#footer .actions .secondary a {
  color: #5998D6;
}

#greeting .icon,
#dashboard.own,
.error,
.comment_error,
.LV_invalid,
.LV_invalid_field,
input.LV_invalid_field:hover,
input.LV_invalid_field:active,
textarea.LV_invalid_field:hover,
textarea.LV_invalid_field:active,
#header .actions .current {
  border-color: #5998D6;
}


/*links and buttons*/
a,
a:link,
a.tag,
#dashboard a,
#dashboard .current,
.heading,
.group .heading {
  color: #fff;
}

a:visited,
.actions a:visited {
  color: #999;
}

.actions a,
.action,
.actions input,
input[type="submit"],
button,
.current,
.actions label,
#header .actions a,
#header input[type="submit"] {
  background: #555;
  border-color: #222;
  color: #eee;
  box-shadow: inset 0 -8px 4px #232323, inset 0 8px 7px #555;
  text-shadow: none;
}

.actions a:hover,
.actions input:hover,
#dashboard a:hover {
  color: #999;
  border-color: #000;
  box-shadow: inset 2px 2px 2px #000;
}

.actions a:active,
.current,
a.current,
.current a:visited {
  color: #fff;
  background: #555;
  border-color: #fff;
  box-shadow: inset 1px 1px 3px #333;
}

.delete a,
span.delete {
  box-shadow: -1px -1px 2px rgba(255,255,255.25);
}

ul.required-tags,
.bookmark .status span,
.blurb .icon {
  opacity: 0.9;
  border: 0;
}


/*zeroing*/
#outer .group .heading,
.heading {
  text-shadow: none;
  color: #fff;
  background: none;
}

fieldset fieldset {
  box-shadow: none;
}