"Sunny Forest" skin

[enigel]

I've been working on this since skins were in development - it proved pretty handy for testing, incidentally *g* - and getting to know various parts of the Archive CSS needed to change what I wanted.

I wanted to green-tint the Archive, and get rid of the greys in some areas, while keeping it pleasant and not strident. A dash of intense yellow here and there enlivens the look, hence the name.

I thought it might be useful for others, so while it's not quite ready for public sharing on AO3, I'm sharing it here. Feel free to improve, derive, inspire yourself and so on. It would be lovely if you shared the results with the community, so we can all have more pretty. :)


Homepage view:


Works index view:



(The greeting block is bigger because I combined it with my accessibility skin Big Greeting Everywhere - the last block of CSS.)

#header {
  background: #003D00;
  color: #FFFFF0;
}

.navigation a,
.navigation a:link,
#home-header .navigation a,
#home-header .navigation a:link {
  color: #246B24;
}

.navigation a:visited {
  color: #99CC99;
}

.navigation a:hover,
#home-header .navigation a:hover {
  background: #246B24 !important;
  color: #FFFFB8;
}

#main .navigation a:visited {
  color: #003D00;
}


/* LINKS */
a,
a:link {
  color: #246B24;
}

a:visited {
  color: #99CC99;
}

a:hover {
  background: #246B24;
  color: #FFFFB8;
}


/* BASIC */
.own {
  background: #EBFFC2;
  color: #003D00;
}

h3 {
  background-color: #196619 !important;
  color: #FFFFE6 !important;
}

#main .preface h3 {
  background-color: white !important;
  color: #196619 !important;
}

.notice,
.comment-notice {
  background-color: #F0FFE0;
  color: #003D00;
  border: 1px solid #E0FFC2;
}

.comment-error {
  background-color: #F5D6CC;
  color: #7A1F00;
  border: 1px solid #EBAD99;
}

.byline {
  color: #668033;
}

#main dl.meta {
  color: #003D00;
  background: #FFFFE6;
}

.stats dt,
dd {
  color: #295200;
}


/* TAGS */
a.tag,
a.tag:link {
  color: black;
}

a.tag:visited {
  color: #111;
}

a.tag:hover {
  background: #246B24;
  color: #FFFFB8;
}


/* COMMENTS */
.comment .odd,
.thread .odd {
  background: #FFFFE6;
}

.comment .even,
.thread .even {
  background: #F0FFE0;
}


/* FILTERS */
.filters,
.filters dt {
  background-color: #FFFFAD !important;
}

form.filters {
  border: 1px solid #FFFF75;
}

.filters legend {
  color: #295200;
}

.filters dt:hover {
  background-color: #B2B26B !important;
}


/* FORMS */
#work-form fieldset,
#work-form fieldset.meta,
.draft,
.draft .wrapper {
  background: #F5FFE0;
}

.draft {
  border: 2px dashed #F5FFE0;
}

div.auto_complete ul li.selected {
  background: #FFD119;
  color: #364712;
}


/* DASHBOARD */
#dashboard ul {
  border: 0;
}

#dashboard a,
#dashboard span {
  color: #196619;
}

#dashboard span.current {
  background-color: #EBFFC2 !important;
  color: #196619 !important;
}

#dashboard a:hover,
#dashboard li:hover,
#dashboard.admin-posts a:hover {
  background: #FFD119;
  color: #364712;
}


/* BLURBS */
.blurb dl.stats {
  background-color: #EBFFC2;
  color: #003D00;
}

.own dl.stats {
  background-color: white;
}

.works-own .own dl.stats {
  background-color: #EBFFC2;
}

.blurb .relationships {
  background: #EBFFC2;
  color: #8F2400;
}

.blurb h4 a:link {
  color: #246B24;
}

.blurb h4 a:visited {
  color: #99CC99;
}

.blurb h4 a:hover {
  background: #FFD119;
  color: #364712;
}

.navigation a:hover,
.submit a:hover,
.submit input:hover,
.navigation input:hover {
  background: #FFD119 !important;
  color: #364712;
}

.navigation input {
  color: #003D00;
}

#header a:hover {
  color: #FFFFB8;
  background: #003D00;
}

#header h1 a:hover {
  color: #FFD119;
  background: #003D00;
}

.current,
.current a:visited {
  color: #FFFFB8 !important;
  background: #003D00 !important;
}

.current a:hover {
  color: #FFFFB8 !important;
  background: #246B24 !important;
}

#header #login a:hover,
#header #greeting a:hover {
  color: #FFD119;
}

table {
  background: #E6FFCC;
}


/* HOME PAGE */
#home-header h1 {
  color: #ffd119;
}

#home-header .navigation a,
#home-header .navigation .current {
  background-color: #FFE680;
  border: 1px solid #FFDB4D;
}

.open-beta-box {
  background: white;
}

.open-beta-box h1,
.open-beta-box h2,
.open-beta-box p {
  color: #D17519;
}

.sidebar-box {
  background-color: #004700;
}

.sidebar-box h3 {
  background-color: #004700 !important;
  color: #FFD119 !important;
}

.sidebar-box a,
.sidebar-box a:link {
  color: #FFFFE6;
}

.sidebar-box a:hover {
  color: #FFFFB8;
}


/* GREETING SIZE */
#greeting .login {
  font-size: 2em;
}

#login a {
  font-size: 1.2em;
}

#login-block {
  font-size: 1em;
}

#home-header #greeting .login {
  font-size: 1.8em;
}

#home-header #login a {
  font-size: 1em;
}