Cool Gradients

yukimayari

Summary:

AO3 site skin in purple and teal gradients. Font is Lucida Sans (or other sans serif) in black on a background gradient from white to teal to purple. AO3 logo is replaced by Archive of our own. Header and footer are both a purple to teal gradient. Dropdowns are white backgrounds with black text. Forms have a pale teal blue background. Buttons have a flat white background with no outline. Tags are in purple except for relationship tags which are bolded and teal blue. Comments have a semi-transparent background with each comment in a thread getting a gradually more opaque background. Filter menu has a transparent background with white buttons.

Inspired by the site skin "Just Girly Things" by memorizingthedigitsofpi.

CSS Code:

#header .logo {
  display: none;
}

#header .primary {
  box-shadow: none;
}

#header .heading sup {
  visibility: hidden;
}

#header h1.heading a::before {
  margin-left: 1em;
  font-weight: bold;
  content: "Archive";
  color: #66b2b2;
}

#header .heading sup::before {
  font-family: "Lucida Handwriting", cursive;
  content: " of our own";
  color: #6B00D7;
  visibility: visible;
}

#header h1.heading span {
  display: none;
}

#main .listbox {
  background: #66b2b2;
  border-color: #fff;
  box-shadow: none;
}

#main .listbox .index {
  box-shadow: none;
}

#main .reading h4.viewed,
.comment h4.byline {
  background: transparent;
}

#comment li.comment,
.thread {
  background: rgba(255, 255, 255, 0.2);
}

.group.listbox,
fieldset fieldset.listbox,
#main li.blurb,
.wrapper,
#dashboard .secondary,
.secondary,
form blockquote.userstuff,
.thread .comment,
.toggled form {
  box-shadow: none;
  background: transparent;
}

#header input[type="submit"],
#dashboard .actions a,
#dashboard .actions a:visited,
#dashboard .current,
#main .actions a,
#main .actions a:visited,
#main .action,
#main .actions input,
#main input[type="submit"],
#main button,
#main .current,
#main .actions label {
  background: #fff;
  color: #000 !important;
  border-color: #fff;
}

h1,
h2,
h3,
h4,
h5,
h6,
.heading {
  font-family: 'Lucida Sans', sans-serif;
  border-bottom: none;
  font-weight: normal;
  position: initial;
}

body,
input,
.toggled form,
.dynamic form,
.secondary,
.dropdown,
button,
blockquote,
.filters dt,
.filters dd,
.filters input[type="submit"],
.filters .expander,
.bookmark .user .meta,
.datetime,
a.work,
span.symbol,
.splash .news .meta,
select {
  font-family: 'Lucida Sans', sans-serif;
}

#new_work_search,
fieldset fieldset.listbox {
  background: transparent;
  outline: none;
  box-shadow: none;
}

#new_bookmark_search,
fieldset {
  background: transparent;
  outline: none;
  box-shadow: none;
}

#new_people_search,
fieldset {
  background: transparent;
  outline: none;
  box-shadow: none;
}

#main .verbose fieldset,
fieldset fieldset.listbox {
  background: #b2d8d8;
  outline: none;
  box-shadow: none;
}

#main .verbose legend,
fieldset fieldset.listbox {
  background: #fff;
  outline: none;
  box-shadow: none;
}

.blurb .datetime {
  position: initial;
  text-align: right;
  margin-top: 5px;
}

.blurb h4.heading,
.blurb .header .heading {
  margin: 0;
}

.blurb ul.required-tags {
  position: initial;
  top: initial;
  text-align: left;
  display: inline-block;
  width: 100%;
  margin: auto;
}

.blurb ul.required-tags li + li + li,
.blurb ul.required-tags li + li + li + li {
  position: initial;
  left: initial;
}

.blurb ul.required-tags li {
  display: inline-flex;
}

.blurb ul.tags {
  background: none;
  padding: 2px;
}

li.relationships a,
.work .relationship a.tag {
  background: none;
}

li.blurb .relationships {
  font-weight: bold;
}

.warnings .tag,
.work .warning a.tag {
  font-weight: bold;
  color: #6B00D7;
}

.relationships .tag,
.work .relationships a.tag {
  color: #66b2b2;
}

.characters .tag,
.work .characters a.tag {
  font-style: italic;
  color: #6B00D7;
}

.freeforms .tag,
.work .freeforms a.tag {
  font-style: italic;
  color: #6B00D7;
}

.comment h4.byline {
  padding: 0.25em;
}

.abbreviated h4.byline {
  padding-left: 0.25em;
}

body,
#header,
#header ul.primary {
  background-image: linear-gradient(to bottom, #6B00D7, #66b2b2);
  background-size: contain;
}

#header .actions a:hover,
#header .actions a:focus,
#header .dropdown:hover a,
#header .open a {
  background: #fff;
}

#header,
#outer.wrapper {
  background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(178,216,216,1) 31%, rgba(220,208,255,1) 62%, rgba(255,255,255,1) 100%);
  background-size: 10000px 10000px;
  background-repeat: repeat;
}

#main .unread {
  background: #dcd0ff;
}

#dashboard,
#dashboard.own {
  border-bottom: 5px solid #66b2b2;
  border-top: 5px solid #66b2b2;
}

#footer {
  background-image: linear-gradient(to bottom, #66b2b2, #6B00D7);
  background-size: contain;
}

↑ Top