★ AO3 site skin
WilliamEst Dainty

A soft cream-and-navy skin for Archive of Our Own. Rounded cards, pill buttons and tags, dashed chapter titles, and little butterfly, guitar, puppy and shark icons. Comes with a matching dark version.
site skin
light + dark
copy & paste install
free to use
Get the CSS ↓How to install
Preview & copy

Pick a version, check the preview, then copy its CSS.
1,218 lines · 22.3 KB
Archive of Our Own ^betaHi, westie!
FandomsBrowseSearchAboutsearch…
Your skin is now in use.
Can You Stay With Me? by a_westie
You Maniac (TV)
Dean/MothFluffElevator ConfessionsSlow Burn
“Wait, I’ll love you like crazy.” A sample summary, set the way the skin sets yours.
Words: 4,210Chapters: 3/?Kudos: 312
Chapter 1
BookmarkKudos ♥
williamest-dainty-light.css
Download
html,
body {
  background-color: #faf6ec;
  color: #2b2b3a;
  font-family: "Anthropic Sans", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

#outer {
  background-color: #faf6ec;
  color: #2b2b3a;
}

#outer {
  background-image: radial-gradient(#f1e1dc 2.5px, transparent 3px);
  background-size: 22px 22px;
}

#inner,
#main {
  background-color: transparent;
  border: none;
  box-shadow: none;
  color: #2b2b3a;
}

a,
a:link {
  color: #2c3e66;
}

a:visited {
  color: #6b4a6f;
}

a:hover,
a:focus {
  color: #a8322d;
}

#header {
  background: #fffdf7;
  background-image: none;
  border: none;
  border-bottom: 1.5px solid #c9d5ec;
  border-radius: 0 0 26px 26px;
  box-shadow: none;
  padding-bottom: 0.8em;
}

#header .heading,
#header .heading a {
  color: #2c3e66;
  font-family: "Anthropic Serif", Georgia, "Times New Roman", Times, serif;
  font-weight: normal;
}

#header .heading sup {
  color: #6b7183;
}

#header .user a,
#header .user a:visited,
#header .actions a {
  color: #6b7183;
}

#header .user a:hover {
  color: #a8322d;
}

#header .primary {
  background: transparent;
  background-image: none;
  border: none;
  box-shadow: none;
}

#header .primary a.dropdown-toggle,
#header .primary > li > a {
  background: #fffdf7;
  color: #2c3e66;
  border: 1.5px solid #c9d5ec;
  border-radius: 999px;
  padding: 0.3em 0.9em;
  margin: 0.2em 0.15em;
  box-shadow: none;
}

#header .primary a.dropdown-toggle:hover,
#header .primary > li > a:hover,
#header .primary .open a.dropdown-toggle {
  background: #a8322d;
  color: #faf6ec;
  border-color: #a8322d;
}

#header .dropdown .menu {
  background: #fffdf7;
  border: 1.5px solid #c9d5ec;
  border-radius: 16px;
  box-shadow: none;
  overflow: hidden;
}

#header .dropdown .menu li,
#header .dropdown .menu a {
  background: #fffdf7;
  color: #2c3e66;
  border: none;
  border-radius: 0;
}

#header .dropdown .menu a:hover {
  background: #f7e4e1;
  color: #a8322d;
}

#header .search input {
  background: #faf6ec;
  color: #2b2b3a;
  border: 1.5px solid #c9d5ec;
  border-radius: 999px;
  box-shadow: none;
  padding: 0.3em 0.9em;
}

#header .search .button,
#header .search input[type="submit"] {
  background: #2c3e66;
  color: #faf6ec;
  border: none;
  border-radius: 999px;
}

#header .heading a {
  font-style: italic;
  font-weight: normal;
}

#header .primary a.dropdown-toggle:hover,
#header .primary > li > a:hover,
#header .primary .open a.dropdown-toggle {
  background: #f7e4e1;
  color: #a8322d;
  border-color: #a8322d;
}

#dashboard,
#dashboard.own {
  background: transparent;
  border: none;
  box-shadow: none;
}

#dashboard ul {
  border: none;
  margin: 0 0 0.6em;
  padding: 0;
}

#dashboard li {
  display: inline-block;
  margin: 0 0.2em 0.45em 0;
  border: none;
}

#dashboard a,
#dashboard span {
  display: inline-block;
  background: #e8eef8;
  color: #2c3e66;
  border: none;
  border-radius: 999px;
  padding: 0.35em 0.9em;
  box-shadow: none;
  text-align: left;
}

#dashboard a:hover {
  background: #f7e4e1;
  color: #a8322d;
}

#dashboard .current,
#dashboard span.current {
  background: #a8322d;
  color: #faf6ec;
  border-radius: 999px;
}

.notice,
.comment_notice,
.kudos_notice,
.flash.notice,
.flash.error,
.caution {
  background: #f7e4e1;
  color: #2b2b3a;
  border: none;
  border-radius: 18px;
  box-shadow: none;
  padding: 0.8em 1em;
}

.notice:before {
  content: "\2605  ";
  color: #a8322d;
}

h2.heading,
.landmark {
  font-family: "Anthropic Serif", Georgia, "Times New Roman", Times, serif;
  color: #2c3e66;
  font-weight: normal;
  border: none;
}

h3.heading {
  font-family: "Anthropic Serif", Georgia, "Times New Roman", Times, serif;
  color: #2c3e66;
  font-weight: normal;
  border: none;
  background: transparent;
}

h3.heading:before {
  content: "\2605";
  display: inline-block;
  width: 1.7em;
  height: 1.7em;
  line-height: 1.7em;
  text-align: center;
  border-radius: 50%;
  background: #f7e4e1;
  color: #a8322d;
  margin-right: 0.45em;
  font-size: 0.85em;
}

.preface h3.heading:before,
.blurb h3.heading:before,
#workskin h3.heading:before,
.filters h3.heading:before {
  content: none;
}

.primary.header .icon,
div.primary.header p.icon {
  border: 2px dashed #a8322d;
  border-radius: 50%;
  background: #fffdf7;
  overflow: hidden;
  box-shadow: none;
}

.primary.header .icon img {
  border-radius: 50%;
}

.primary.header h2.heading {
  font-family: "Anthropic Serif", Georgia, "Times New Roman", Times, serif;
  color: #2c3e66;
  border: none;
}

.blurb,
li.blurb {
  background: #fffdf7;
  border: 1.5px solid #c9d5ec;
  border-radius: 20px;
  padding: 1em 1.1em;
  margin-bottom: 1em;
  box-shadow: none;
}

.blurb a {
  text-decoration: none;
}

.blurb h4.heading {
  font-family: "Anthropic Serif", Georgia, "Times New Roman", Times, serif;
  color: #6b7183;
  font-weight: normal;
  font-size: 1.2em;
}

.blurb h4.heading a {
  color: #2c3e66;
}

.blurb h4.heading a[rel="author"] {
  color: #a8322d;
}

.blurb h5.fandoms,
.blurb h5.fandoms a {
  font-family: "Anthropic Serif", Georgia, "Times New Roman", Times, serif;
  color: #6b7183;
  font-weight: normal;
}

.blurb .datetime {
  color: #6b7183;
  font-size: 0.85em;
}

.blurb blockquote.summary,
.blurb .summary {
  font-family: "Anthropic Serif", Georgia, "Times New Roman", Times, serif;
  font-size: 1.05em;
  line-height: 1.7;
  color: #2b2b3a;
  border: none;
}

ul.tags li,
dl.meta dd ul.commas li {
  display: inline-block;
  margin: 0 0.25em 0.45em 0;
}

ul.tags.commas li:after,
dl.meta dd ul.commas li:after {
  content: none;
}

.tags a.tag,
dl.meta dd a.tag {
  display: inline-block;
  background: #e8eef8;
  color: #2c3e66;
  border: none;
  border-radius: 999px;
  padding: 0.2em 0.75em;
  text-decoration: none;
}

.tags li.warnings a.tag,
.tags li.warnings strong a,
.tags li.relationships a.tag,
dl.meta dd.warning a.tag,
dl.meta dd.relationship a.tag {
  background: #f7e4e1;
  color: #a8322d;
  font-weight: normal;
}

.tags a.tag:hover,
dl.meta dd a.tag:hover {
  background: #a8322d;
  color: #faf6ec;
}

dl.stats {
  border: none;
}

dl.stats dt {
  color: #6b7183;
}

dl.stats dd {
  display: inline-block;
  background: #faf6ec;
  color: #6b7183;
  border-radius: 999px;
  padding: 0.1em 0.6em;
}

li.bookmark div.user,
.bookmark .user.module {
  background: transparent;
  border: none;
  border-top: 1.5px dotted #c9d5ec;
  border-radius: 0;
  box-shadow: none;
}

.actions a,
.actions a:link,
.actions a:visited,
.action,
.actions input,
.actions button,
input[type="submit"],
button {
  background: #fffdf7;
  background-image: none;
  color: #2c3e66;
  border: 1.5px solid #c9d5ec;
  border-radius: 999px;
  box-shadow: none;
  font-family: "Anthropic Sans", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  padding: 0.3em 0.9em;
}

.actions a:hover,
.action:hover,
.actions input:hover,
.actions button:hover,
input[type="submit"]:hover,
button:hover {
  background: #a8322d;
  color: #faf6ec;
  border-color: #a8322d;
}

li.bookmark .actions a,
.blurb .actions a {
  border: none;
  background: transparent;
  color: #6b7183;
  padding: 0 0.3em;
}

li.bookmark .actions a:hover,
.blurb .actions a:hover {
  background: transparent;
  color: #a8322d;
}

#kudo_submit,
#new_kudo input[type="submit"] {
  background: #a8322d;
  color: #faf6ec;
  border-color: #a8322d;
}

form.filters,
.filters {
  background: #fffdf7;
  border: 1.5px solid #c9d5ec;
  border-radius: 20px;
  box-shadow: none;
  padding: 0.9em;
}

form.filters fieldset,
form.filters dl,
form.filters dd,
form.filters dt,
form.filters ul,
.filters fieldset,
.filters dl {
  background: transparent;
  border: none;
  box-shadow: none;
}

form.filters .submit input,
.filters .submit input {
  width: 100%;
  background: #a8322d;
  color: #faf6ec;
  border: none;
}

fieldset,
fieldset fieldset,
fieldset dl,
form dl,
form dl dl {
  background: transparent;
  border: none;
  box-shadow: none;
}

input,
textarea,
select {
  background-color: #faf6ec;
  color: #2b2b3a;
  border: 1.5px solid #c9d5ec;
  border-radius: 14px;
  box-shadow: none;
}

ul.work.navigation.actions {
  text-align: center;
}

dl.work.meta,
dl.meta {
  background: #fffdf7;
  border: 1.5px solid #c9d5ec;
  border-radius: 20px;
  box-shadow: none;
  padding: 0.8em 1em;
}

dl.meta dt {
  color: #6b7183;
  font-weight: normal;
}

dl.meta dd {
  color: #2b2b3a;
}

.comment,
li.comment {
  background: #fffdf7;
  border: 1.5px solid #c9d5ec;
  border-radius: 20px;
  box-shadow: none;
}

#workskin {
  max-width: 42em;
  margin: 0 auto;
  background: #fffdf7;
  border: 1.5px solid #c9d5ec;
  border-radius: 24px;
  padding: 1.5em 1.4em;
}

#workskin,
.userstuff,
#chapters .userstuff {
  font-family: "Anthropic Serif", Georgia, "Times New Roman", Times, serif;
  font-size: 1.08em;
  line-height: 1.85;
  color: #2b2b3a;
}

#workskin .preface .title,
.preface h2.title {
  font-family: "Anthropic Serif", Georgia, "Times New Roman", Times, serif;
  color: #2c3e66;
  font-weight: normal;
  text-align: center;
  font-size: 2em;
  border: none;
}

.preface h3.byline,
.preface h3.byline a {
  text-align: center;
  color: #a8322d;
  font-family: "Anthropic Serif", Georgia, "Times New Roman", Times, serif;
  font-weight: normal;
}

.preface .summary {
  background: #f7e4e1;
  border-radius: 16px;
  padding: 0.8em 1em;
  margin: 1em 0 0.6em;
}

.preface .notes {
  background: #e8eef8;
  border-radius: 16px;
  padding: 0.8em 1em;
  margin: 0.6em 0;
}

.preface .summary h3.heading,
.preface .notes h3.heading {
  font-family: "Anthropic Sans", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 0.8em;
  border: none;
}

.preface .summary h3.heading {
  color: #a8322d;
}

.preface .notes h3.heading {
  color: #2c3e66;
}

.preface .summary blockquote,
.preface .notes blockquote {
  border: none;
  margin: 0.3em 0 0;
  padding: 0;
  font-family: "Anthropic Serif", Georgia, "Times New Roman", Times, serif;
}

.preface .summary blockquote {
  font-style: italic;
}

#workskin .chapter .preface,
#chapters .chapter .preface {
  text-align: center;
  border: none;
}

#workskin .chapter .preface h3.title,
#chapters .chapter .preface h3.title,
.chapter h3.title {
  display: inline-block;
  margin: 1.5em auto 1em;
  padding: 0.35em 1.1em;
  background-color: #faf6ec;
  border: 2px dashed #a8322d;
  border-radius: 999px;
  font-family: "Anthropic Serif", Georgia, "Times New Roman", Times, serif;
  font-size: 1.15em;
  font-weight: normal;
  color: #2c3e66;
  text-align: center;
}

#workskin .chapter .preface h3.title:before,
.chapter h3.title:before {
  content: "\2605  ";
  color: #a8322d;
}

#workskin .chapter .preface h3.title:after,
.chapter h3.title:after {
  content: "  \2605";
  color: #a8322d;
}

#workskin .chapter .preface h3.title a,
.chapter h3.title a {
  color: #2c3e66;
  text-decoration: none;
  border: none;
}

#workskin .preface,
#workskin .preface.group {
  border: none;
}

#workskin .chapter .preface .summary,
#workskin .chapter .preface .notes {
  text-align: left;
}

#kudos {
  text-align: center;
  color: #6b7183;
  background-color: #fffdf7;
  border: 1.5px solid #c9d5ec;
  border-radius: 20px;
  padding: 0.9em 1em;
  margin: 1em 0;
  font-size: 0.9em;
  line-height: 1.7;
}

#kudos a {
  color: #2c3e66;
  text-decoration: none;
  border: none;
}

#kudos a:hover {
  color: #a8322d;
}

#kudos h4,
#kudos img {
  display: none;
}

#feedback .actions {
  text-align: center;
}

dl.work.meta dl.stats {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0.3em 0 0;
}

dl.work.meta dl.stats dt {
  display: inline;
  float: none;
  width: auto;
  color: #6b7183;
  font-size: 0.85em;
  margin: 0 0.2em 0 0;
  padding: 0;
}

dl.work.meta dl.stats dd {
  display: inline-block;
  float: none;
  width: auto;
  background-color: #faf6ec;
  color: #2b2b3a;
  border-radius: 999px;
  padding: 0.1em 0.65em;
  margin: 0 0.6em 0.45em 0;
}

#workskin .preface .summary,
#workskin .preface .notes,
#workskin .preface.group .summary,
#workskin .preface.group .notes {
  margin: 0.8em 0;
  width: auto;
  max-width: none;
}

#workskin .preface .summary blockquote,
#workskin .preface .notes blockquote,
#workskin .preface .notes p {
  margin: 0.3em 0 0;
  padding: 0;
  width: auto;
}

#workskin .preface.group h2.title.heading,
#workskin .preface h2.title {
  font-size: 1.9em;
  line-height: 1.2;
  margin-top: 0.3em;
}

#kudos p.kudos {
  background-image: none;
  padding-left: 0;
  margin: 0;
}

#kudos p.kudos:before {
  content: "\2605  ";
  color: #a8322d;
}

#bookmark-form,
.post.bookmark,
form#bookmark-form,
div.dynamic {
  background-color: #fffdf7;
  border: 1.5px solid #c9d5ec;
  border-radius: 20px;
  box-shadow: none;
}

#footer ul.navigation,
#footer .group {
  border: none;
}

#footer a {
  text-decoration: none;
}

#main {
  padding-left: 0.9em;
  padding-right: 0.9em;
}

#header .search input[type="text"],
#header .search input#site_search,
#header .search .text {
  background-color: #faf6ec;
  border: 1.5px solid #c9d5ec !important;
  border-radius: 999px;
}

#header .heading a {
  font-size: 1.1em;
}

#header ul.user {
  font-size: 0.85em;
}

ul.work.navigation.actions li a,
ul.work.navigation.actions li button {
  font-size: 0.85em;
  padding: 0.3em 0.8em;
}

dl.work.meta dt {
  font-size: 0.8em;
  color: #6b7183;
  margin-top: 0.4em;
}

dl.work.meta dd {
  border-bottom: 1.5px dotted #c9d5ec;
  padding-bottom: 0.5em;
  margin-bottom: 0.3em;
}

dl.work.meta dd.stats {
  border-bottom: none;
}

#workskin .preface .module,
#workskin .preface .summary.module,
#workskin .preface .notes.module,
#workskin .summary,
#workskin .notes {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: auto !important;
  max-width: none !important;
  float: none !important;
}

#workskin .preface .summary.module {
  background-color: #f7e4e1;
  border-radius: 16px;
  padding: 0.8em 1em;
}

#workskin .preface .notes.module {
  background-color: #e8eef8;
  border-radius: 16px;
  padding: 0.8em 1em;
}

#workskin .summary blockquote,
#workskin .notes blockquote,
#workskin .summary .userstuff,
#workskin .notes .userstuff {
  margin: 0.3em 0 0 !important;
  padding: 0 !important;
  width: auto !important;
}

#workskin .preface .summary h3.heading:before {
  content: "\2726  ";
}

#workskin .preface .notes h3.heading:before {
  content: "\266B  ";
}

#workskin .preface .summary h3.heading:before,
#workskin .preface .notes h3.heading:before {
  display: inline;
  width: auto;
  height: auto;
  line-height: inherit;
  background: transparent;
  margin: 0;
  font-size: 1em;
  border-radius: 0;
}

#workskin .preface .summary h3.heading:before {
  color: #a8322d;
}

#workskin .preface .notes h3.heading:before {
  color: #2c3e66;
}

#header .heading a {
  font-size: 1.3em;
}

#header .primary {
  padding-top: 0.3em;
}

#header .search input[type="text"],
#header .search input#site_search {
  min-width: 12em;
}

ul.work.navigation.actions,
dl.work.meta,
#workskin,
#feedback,
#comments_placeholder,
#add_comment_placeholder {
  max-width: 46em;
  margin-left: auto;
  margin-right: auto;
}

ul.work.navigation.actions {
  display: block;
  text-align: center;
  float: none;
}

ul.work.navigation.actions li {
  float: none;
  display: inline-block;
  margin: 0 0.15em 0.4em;
}

ul.work.navigation.actions li a,
ul.work.navigation.actions li input,
ul.work.navigation.actions li button,
ul.work.navigation.actions input[type="submit"] {
  font-size: 0.85em;
  padding: 0.3em 0.85em;
  line-height: 1.4;
}

dl.work.meta {
  padding: 1em 1.3em;
  margin-bottom: 1.4em;
}

dl.work.meta dt {
  font-size: 0.82em;
}

#workskin {
  padding: 2em 2.2em;
}

#workskin .preface,
#workskin .preface.group,
#workskin div.preface.group {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: auto !important;
}

#workskin div.preface.group div.summary.module,
#workskin div.preface.group div.notes.module {
  margin: 0.8em 0 !important;
  width: auto !important;
}

#workskin .preface.group h2.title.heading,
#workskin .preface h2.title {
  font-size: 2.2em;
  margin-bottom: 0.2em;
}

#workskin .preface h3.byline {
  margin-bottom: 1.2em;
}

#workskin .chapter .preface h3.title,
#chapters .chapter .preface h3.title {
  margin: 2em auto 1.4em;
}

#chapters .userstuff p {
  margin: 0 0 1.1em;
}

.pagination a,
.pagination span {
  border-radius: 999px;
}

.pagination a:hover,
.pagination .current {
  background: #a8322d;
  color: #faf6ec;
  border-color: #a8322d;
}

#footer {
  background: #fffdf7;
  background-image: none;
  color: #6b7183;
  border: none;
  border-top: 1.5px solid #c9d5ec;
  border-radius: 26px 26px 0 0;
  font-family: "Anthropic Sans", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

#footer a,
#footer .heading {
  color: #6b7183;
}

#footer a:hover {
  color: #a8322d;
}

#header .heading img.logo {
  display: none;
}

#header .heading a {
  display: inline-block;
  background-image: url("https://i.ibb.co/k62ttWJZ/logo-light.png");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 84px auto;
  padding-left: 96px;
  min-height: 46px;
  line-height: 46px;
}

.preface h2.title:before {
  content: "";
  display: block;
  height: 42px;
  margin: 0 auto 0.7em;
  background-image: url("https://i.ibb.co/k62ttWJZ/logo-light.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 42px;
}

#header .primary > li > a:before,
#header .primary a.dropdown-toggle:before {
  content: "";
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  vertical-align: -0.2em;
  width: 15px;
  height: 15px;
  margin-right: 6px;
}

#header .primary > li:nth-of-type(1) > a:before {
  background-image: url("https://i.ibb.co/q31KDH11/butterfly-light.png");
}

#header .primary > li:nth-of-type(2) > a:before {
  background-image: url("https://i.ibb.co/s9HRYFc3/guitar-light.png");
}

#header .primary > li:nth-of-type(3) > a:before {
  background-image: url("https://i.ibb.co/LX7PwYgB/puppy-light.png");
}

#header .primary > li:nth-of-type(4) > a:before {
  background-image: url("https://i.ibb.co/0p2K086B/shark-light.png");
}

#dashboard ul:before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #f7e4e1;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 17px 17px;
  vertical-align: middle;
  margin: 0 0.5em 0.45em 0;
}

#dashboard ul:nth-of-type(1):before {
  background-image: url("https://i.ibb.co/LX7PwYgB/puppy-light.png");
}

#dashboard ul:nth-of-type(2):before {
  background-image: url("https://i.ibb.co/s9HRYFc3/guitar-light.png");
}

#dashboard ul:nth-of-type(3):before {
  background-image: url("https://i.ibb.co/q31KDH11/butterfly-light.png");
}

#dashboard ul:nth-of-type(4):before {
  background-image: url("https://i.ibb.co/0p2K086B/shark-light.png");
}

.notice:before {
  content: "";
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  vertical-align: -0.2em;
  width: 17px;
  height: 17px;
  margin-right: 8px;
  background-image: url("https://i.ibb.co/q31KDH11/butterfly-light.png");
}

h3.heading:before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #f7e4e1;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 17px 17px;
  vertical-align: middle;
  margin-right: 0.45em;
  background-image: url("https://i.ibb.co/0p2K086B/shark-light.png");
}

.preface h3.heading:before,
.blurb h3.heading:before,
.filters h3.heading:before {
  content: none;
  background-image: none;
}

#workskin .preface .summary h3.heading:before {
  content: "";
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  vertical-align: -0.2em;
  width: 14px;
  height: 14px;
  margin-right: 6px;
  background-color: transparent;
  border-radius: 0;
  background-image: url("https://i.ibb.co/q31KDH11/butterfly-light.png");
}

#workskin .preface .notes h3.heading:before {
  content: "";
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  vertical-align: -0.2em;
  width: 14px;
  height: 14px;
  margin-right: 6px;
  background-color: transparent;
  border-radius: 0;
  background-image: url("https://i.ibb.co/s9HRYFc3/guitar-light.png");
}

dl.work.meta:before {
  content: "";
  display: block;
  height: 28px;
  margin: 0.1em 0 0.8em;
  background-image: url("https://i.ibb.co/qL32hC4g/strip-light.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 26px;
}

#workskin .chapter .preface h3.title:before,
.chapter h3.title:before {
  content: "";
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  vertical-align: -0.2em;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  background-image: url("https://i.ibb.co/LX7PwYgB/puppy-light.png");
}

#workskin .chapter .preface h3.title:after,
.chapter h3.title:after {
  content: "";
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  vertical-align: -0.2em;
  width: 19px;
  height: 16px;
  margin-left: 8px;
  background-image: url("https://i.ibb.co/0p2K086B/shark-light.png");
}

#feedback:before {
  content: "";
  display: block;
  height: 30px;
  margin: 2em 0 1.4em;
  background-image: url("https://i.ibb.co/qL32hC4g/strip-light.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 28px;
}

#kudos p.kudos:before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #f7e4e1;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 17px 17px;
  vertical-align: middle;
  margin-right: 0.5em;
  background-image: url("https://i.ibb.co/LX7PwYgB/puppy-light.png");
}

#add_comment h4.heading:before,
#add_comment_placeholder h4.heading:before {
  content: "";
  display: inline-block;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: #f7e4e1;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 15px 15px;
  vertical-align: middle;
  margin-right: 0.5em;
  background-image: url("https://i.ibb.co/s9HRYFc3/guitar-light.png");
}

#footer:before {
  content: "";
  display: block;
  height: 26px;
  margin: 1.4em auto 0.6em;
  background-image: url("https://i.ibb.co/qL32hC4g/strip-light.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 24px;
}
Install on AO3

Takes about a minute. You need to be logged in.
Open your skins
Log in to AO3, open your Dashboard, then choose Skins in the sidebar.
Create a site skin
Select Create Site Skin and leave the type set to Site Skin.
Name it
Give it a title you'll recognise, like “WilliamEst Dainty · Light”.
Paste the CSS
Copy the version you want above, paste it into the CSS box, then select Submit.
Use it
On your new skin's page, select Use. AO3 reloads in the new look.
Want both versions?Make a second skin with the dark CSS. Switch between them any time from Dashboard → Skins.
Back to normalOn the same Skins page, choose Revert to Default Skin to go back to the standard AO3 look.
Some works look different?Authors can style their own works. To see every work in this skin, turn off creator styles in your AO3 preferences.
WilliamEst Dainty

Preview & copy

Install on AO3

Open your skins

Create a site skin

Name it

Paste the CSS

Use it
