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,
#footer .group,
.post fieldset fieldset,
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,
#modal,
.ui-sortable li,
.required .autocomplete,
.autocomplete .notice,
.system .intro {
  background: #333;
  color: #eee;
  border-color: #222;
  outline: #111;
  box-shadow: none;
}

#header .actions a:hover,
#header .actions a:focus,
#header .dropdown:hover a,
#header .open a,
#header .menu,
#small_login,
#header .dropdown:hover .current + .menu,
.group.listbox,
fieldset fieldset.listbox,
form blockquote.userstuff,
input:focus,
textarea:focus,
li.relationships,
.group.listbox .index,
.dashboard fieldset fieldset.listbox .index,
#dashboard a:hover,
th,
.secondary,
.thread .even,
.system .tweet_list li {
  background: #2a2a2a;
}

#header .dropdown .menu a:hover,
#header .dropdown .menu a:focus,
.system .tweet_list li:nth-child(even) {
  background: #111;
}

.statistics .index .even {
  background: #333;
}

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

#header ul.primary,
#footer,
#dashboard ul,
dl.meta,
.group.listbox,
fieldset fieldset.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,
fieldset fieldset.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,
.ui-sortable li:hover {
  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,
fieldset fieldset.listbox,
.dashboard .listbox .index {
  box-shadow: inset 1px 1px 3px #000;
}


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

#header #greeting img,
#header .heading a,
#header .heading a:visited,
#header .user a:hover,
#header .user a:focus,
#header .user .current,
#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,
.system .tweets 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,
#header a,
#header a:visited,
#header .current,
#header .primary .open a,
#header .primary .dropdown:hover a,
#header .primary .dropdown a:focus,
#dashboard a,
#dashboard .current,
.heading,
.group .heading,
.filters dt a:hover {
  color: #fff;
}

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

.actions a,
.action,
.actions input,
input[type="submit"],
button,
.current,
.actions label,
#header .actions a,
#header input[type="submit"],
#header .search input[type="text"] {
  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,
#header .search input[type="text"]:hover,
#header .search input[type="submit"]:hover,
.actions a:focus,
.actions input:focus,
#dashboard a:focus,
#header .search input[type="text"]:focus,
#header .search input[type="submit"]:focus {
  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,
#header .actions a,
#footer .secondary a,
fieldset.listbox .heading,
.userstuff .heading,
.heading,
.userstuff h2 {
  text-shadow: none;
  color: #fff;
  background: none;
}

#header .actions a,
fieldset fieldset {
  box-shadow: none;
}

fieldset fieldset.listbox {
  outline: none;
}

fieldset fieldset {
  box-shadow: none;
}