Actions

Work Header

Rating:
Archive Warning:
Category:
Fandoms:
Additional Tags:
Language:
English
Stats:
Published:
2026-07-07
Words:
2,177
Chapters:
1/1
Comments:
41
Kudos:
233
Bookmarks:
58
Hits:
5,117

☆ Starfall [AO3 Site Skin] ☆

Summary:

☆ Starfall ☆

A dark mode AO3 skin inspired by the night sky 🌌.

Includes:

  • Soft glow effect
  • Starry banner
  • Redesigned profile dashboard
  • Custom stat icons
  • Mobile & desktop-friendly styling
  • Installation guide for AO3 skins!

Inspired By:

  • 🌌🌌🌌
  • Constellations by thevalkyrieflies
  • Neos by ZerafinaCSS (AO3)

Notes:

a/n: hey!! thanks for using my skin, it means the world to me! ✨🪐

i’m debating adding custom icons (like the rating, relationship, completion, etc..) so it fits the theme better. if this is something you’d be interested in, lmk in the comments!!

(See the end of the work for more notes.)

Work Text:

─── ⋆⋅☆⋅⋆ ───
✦ Starfall ✦
An AO3 Skin By im_lia
─── ⋆⋅☆⋅⋆ ───


✦ Skin Preview ✦

Click To Expand

Starfall Site Skin (Desktop Home)
Starfall Site Skin (Desktop Fic Search)
Starfall Skin - Mobile AppearanceStarfall - Tag Appearance


✦ How to Apply Skins: Instructions ✦

Click To Expand
  1. Go to your profile dashboard and navigate to the side bar where it says "Skins"
  2. Click on "Create Site Skin"
  3. Name it something unique (Like "Starfall - [your username]")
  4. Copy the ENTIRE code into the textbox where it says "CSS"
  5. Scroll down to the bottom of the page and click submit
  6. Scroll down to the very bottom of the page you were redirected to, and click on "Use"
  7. And you're done!! Enjoy the skin!


✦ CSS Code ✦

/*============================
Starfall - AO3 Skin By Lia

- Skin: Starfall
- Author: Lia (she/her)
- AO3 Profile: im_lia
- Posted: March 9th, 2026
- Updated: June 19th, 2026
============================*/

/* ========= Variables ========= */
:root {
--bg-dark: #0d0e1f;
--bg-deep: #151726;
--bg-card: #1e2235;
--bg-mid: #424c5e;
--accent: #a8c7f7;
--accent-dim: #76859b;
--accent-freeform: #829bc2;
--glow: 0px 0px 7px #a8c7f7;
--glow-sm: 0px 0px 3px #a8c7f7;
--radius-small: 4px;
--radius-mid: 8px;
--radius-big: 12px;
--radius-btn: 20px;
--radius-tag: 6px;
}

/* ========= Global ========= */
html, body {
background: var(--bg-dark) !important;
}

#outer,
#outer.wrapper {
background: var(--bg-dark);
color: var(--accent);
}

#main a {
color: var(--accent-dim);
}

* {
scrollbar-color: var(--accent) var(--bg-deep);
scrollbar-width: thin;
}

/* ========= Header ========= */
#header {
background-image: url("https://i.pinimg.com/736x/93/5a/33/935a33b7fe78da207ed8fc3ca90fdcc4.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
background-color: var(--bg-deep);
}

#header .heading {
height: 15em;
}

#header .primary {
background: var(--bg-dark);
box-shadow: var(--glow);
}

#header .logo,
#header .heading sup {
visibility: visible;
filter: brightness(0) invert(1) sepia(1) saturate(5) hue-rotate(180deg);
}

#header h1,
#header h1 a {
color: var(--accent) !important;
text-shadow: 0 0 10px rgba(168, 199, 247, 0.7);
}

#header h2 {
background: var(--accent) !important;
color: var(--bg-dark);
box-shadow: var(--glow);
}

#header .heading a {
color: var(--bg-deep);
text-shadow: 0px 0px 15px var(--accent);
}

#greeting img.icon {
display: none;
}

#header .primary .actions a,
#header .primary .actions li a,
#header ul.navigation.actions li a,
#header .actions a,
#greeting a.dropdown-toggle {
background: transparent !important;
border: none !important;
box-shadow: none !important;
color: var(--accent) !important;
}

#greeting .menu,
#header .dropdown .menu,
#header .dropdown:hover a {
background: var(--bg-dark);
box-shadow: var(--glow);
border-radius: var(--radius-mid);
}

.dropdown {
background: var(--bg-dark);
border-radius: var(--radius-mid);
}

/* Search */
#header li.search {
position: relative;
display: flex;
align-items: center;
}

#header li.search::before {
display: none;
}

#header #search .text,
.search [role="tooltip"] {
background: var(--bg-dark);
box-shadow: var(--glow);
color: var(--accent) !important;
border: 1px solid var(--bg-dark);
border-radius: var(--radius-btn);
width: 12em;
padding-left: 0.75em;
}

form.search input[type=text],
form.search input[type=submit],
.autocomplete div.dropdown ul {
background: var(--bg-dark) !important;
border: none;
box-shadow: var(--glow);
color: var(--accent);
display: block;
border-radius: var(--radius-mid);
}

/* Mobile header */
@media (max-width: 600px) {
.primary.header.module {
position: relative !important;
padding-top: 50px !important;
}

.primary .icon {
position: absolute !important;
top: 0 !important;
left: 0 !important;
}

.primary.header.module ul.navigation.actions {
float: none !important;
display: block !important;
width: 100% !important;
padding-left: 0 !important;
margin: 0.5em 0 0 0 !important;
text-align: left !important;
}

.primary.header.module ul.navigation.actions li {
display: inline-block !important;
float: none !important;
margin: 0.2em !important;
}

.primary.header.module ul.navigation.actions li a,
.primary.header.module ul.navigation.actions li input[type="submit"] {
font-size: 100% !important;
padding: 0.2em 0.5em !important;
}
}

/* ========= Dashboard ========= */
#dashboard,
#dashboard.own {
border-top: 5px solid var(--accent);
border-bottom: 5px solid var(--accent);
box-shadow: none;
}

#dashboard a {
color: var(--accent-dim);
transition: color 0.2s;
text-decoration: none;
}

#dashboard ul li a {
border: none !important;
box-shadow: none !important;
border-radius: var(--radius-small);
transition: color 0.2s;
}

#dashboard a:hover,
#dashboard ul li a:hover,
#dashboard ul li a:focus {
background: linear-gradient(135deg, #a8c7f733, #4a7abf55) !important;
border-left: 3px solid var(--accent) !important;
color: var(--accent) !important;
box-shadow: none;
text-decoration: none;
border-radius: var(--radius-small);
}

#dashboard .module h3,
#dashboard h3 {
background: var(--accent) !important;
color: var(--bg-dark) !important;
box-shadow: none !important;
}

.current,
#dashboard .current {
background: var(--accent) !important;
color: var(--bg-dark) !important;
box-shadow: var(--glow) !important;
border-radius: var(--radius-small);
font-weight: bold;
border-left: none !important;
padding-left: 0.75em !important;
}

/* ========= Buttons & Actions ========= */
.actions a,
.actions a:focus,
.actions a:link,
.actions a:visited,
.actions input:focus,
.actions li a,
.actions li input,
.actions li input[type="submit"],
.actions li label,
.action:focus,
.action:link,
.own .actions a,
.own input[type="submit"],
input[type="submit"],
ul.navigation.actions li a,
a.action {
background: transparent !important;
border: 1px solid var(--accent) !important;
color: var(--accent) !important;
box-shadow: var(--glow-sm) !important;
border-radius: var(--radius-btn);
text-decoration: none !important;
}

span.submit.actions input.button {
display: none;
}

span.delete {
background: var(--accent);
box-shadow: var(--glow);
border-radius: var(--radius-small);
}

span.delete a {
color: var(--bg-dark) !important;
font-weight: bold;
}

/* Work/chapter buttons */
ul.work.navigation.actions button,
ul.work.navigation.actions button.collapsed,
li.chapter button,
li.mark button[type="submit"],
li.download button,
li.bookmark button,
form[action*="mark_as_read"] button[type="submit"] {
background: transparent !important;
border: 1px solid var(--accent) !important;
color: var(--accent) !important;
box-shadow: var(--glow-sm) !important;
border-radius: var(--radius-btn) !important;
font-size: 1em !important;
padding: 0.25em 0.75em !important;
}

/* Chapter index */
ul#chapter_index.expandable.secondary {
background: var(--bg-dark) !important;
border: 1px solid var(--accent) !important;
box-shadow: var(--glow) !important;
padding: 0.5em !important;
border-radius: var(--radius-mid) !important;
}

ul#chapter_index select {
background: var(--bg-dark) !important;
color: var(--accent) !important;
border: 1px solid var(--accent) !important;
box-shadow: var(--glow-sm) !important;
border-radius: var(--radius-small) !important;
}

ul#chapter_index button {
background: transparent !important;
border: 1px solid var(--accent) !important;
color: var(--accent) !important;
box-shadow: var(--glow-sm) !important;
border-radius: var(--radius-btn) !important;
}

/* ========= Forms ========= */
form dl,
fieldset,
fieldset fieldset,
fieldset fieldset fieldset,
fieldset fieldset dl dl,
dd.hideme,
form blockquote.userstuff,
input,
select,
select:focus,
textarea,
span.symbol.question {
background: var(--bg-dark) !important;
color: var(--accent) !important;
border: 1px solid var(--accent);
box-shadow: var(--glow);
border-radius: var(--radius-mid);
}

.own {
background: var(--bg-dark) !important;
color: var(--accent) !important;
border: 1px solid var(--accent);
box-shadow: none;
border-radius: var(--radius-mid);
}

label,
label.required,
.autocomplete li.added,
.post .meta dd ul li.added {
color: var(--accent);
}

form.verbose legend,
.verbose form legend {
background: var(--accent);
color: var(--bg-deep) !important;
box-shadow: var(--glow);
border-radius: var(--radius-small);
}

.ui-sortable li,
.dynamic form,
div.dynamic {
background: var(--bg-dark);
border: 1px solid var(--accent);
border-radius: var(--radius-mid);
}

/* Listbox (dashboard modules) */
.listbox .index {
background: var(--bg-dark);
}

.listbox,
fieldset fieldset.listbox {
background: var(--bg-card);
box-shadow: var(--glow);
border-radius: var(--radius-big);
}

.listbox h3 {
padding: 0.5em 0.75em !important;
}

.listbox h3,
.listbox h3 a {
color: var(--accent) !important;
}

/* Filters */
form.filters {
position: sticky;
top: 2vh;
max-height: 96vh;
overflow-y: scroll;
border: none !important;
box-shadow: none !important;
}

form.filters:not(:hover) {
scrollbar-color: transparent transparent;
}

.filters fieldset,
.filters .group,
.filters dl,
.filters dd,
.filters dt {
border: none !important;
box-shadow: none !important;
background: transparent !important;
}

.filters .expander {
background: url("https://64.media.tumblr.com/55bf0c446ff42c1e540e284f3053c838/96ac613e2494df28-fa/s75x75_c1/8ca02eec81402fcafe2b9706f27c478e46e50b8b.png") left center no-repeat;
color: var(--accent) !important;
font-weight: bold;
}

.filters .expanded .expander {
background: url("https://64.media.tumblr.com/bc4316019f28c4f7319fdda9fa5ef6e3/b069339f02afb632-6b/s75x75_c1/ed512a784a5845c4981c2bfcb6b711126ba7504e.png") left center no-repeat;
}

#main .filters,
#main .filters fieldset,
#main .filters .group,
#main .filters dl,
#main .filters dd,
#main .filters dt,
#main .filters legend,
#main .filters label,
#main .filters input,
#main .filters select {
background: var(--bg-dark) !important;
color: var(--accent) !important;
border-color: var(--accent) !important;
}

#main #filters,
.filters-head,
.sort-and-filter,
#sort-and-filter {
background: var(--bg-dark) !important;
color: var(--accent) !important;
border: none !important;
box-shadow: none !important;
}

#main .filters select option {
background: var(--bg-dark) !important;
color: var(--accent) !important;
}

#main .filters input[type="text"] {
background: var(--bg-deep) !important;
color: var(--accent) !important;
border: 1px solid var(--accent) !important;
border-radius: var(--radius-small);
}

/* ========= Tags ========= */
.warnings .tag,
.work .warning a.tag,
dd.warning.tags a {
background: var(--accent);
border: 1px solid var(--accent);
border-radius: var(--radius-tag);
color: var(--bg-deep) !important;
font-weight: bold;
padding: 0 2px;
box-shadow: var(--glow-sm);
}

.relationships .tag,
.work .relationships a.tag,
dd.relationship.tags a {
background: none;
color: var(--accent) !important;
font-weight: bold;
text-shadow: 0px 0px 3px var(--accent);
}

.freeforms .tag,
.work .freeform a.tag,
dd.freeform.tags a,
dd.character.tags a,
.characters .tag {
color: var(--accent-freeform) !important;
}

.tag:hover,
a.tag:hover {
color: var(--accent) !important;
background: var(--bg-mid) !important;
border-color: var(--accent) !important;
border-radius: var(--radius-tag);
text-decoration: none !important;
}

/* ========= Work Blurbs ========= */
li.blurb {
background: var(--bg-deep) !important;
border: none;
box-shadow: none;
border-radius: var(--radius-big);
}

li.blurb:hover {
box-shadow: var(--glow) !important;
transition: box-shadow 0.2s ease;
}

li.blurb.group,
li.blurb .group {
background: var(--bg-card) !important;
}

.blurb h4 a,
.blurb h4,
.blurb h3 a,
.blurb h3,
li.blurb h4 a,
li.blurb h4 {
color: var(--accent) !important;
text-decoration: none;
}

h4.heading.byline {
background: var(--accent);
color: var(--bg-deep) !important;
border-radius: var(--radius-small);
}

dl.meta {
border: 1px solid var(--accent);
box-shadow: none;
border-radius: var(--radius-big);
}

/* ========= Stats Icons ========= */
dl.stats {
display: flex;
flex-wrap: wrap;
justify-content: right;
column-gap: 0.9em;
}

dl.stats dt {
display: none !important;
}

dl.stats dd {
display: flex;
align-items: center;
position: relative;
font-size: inherit;
}

dl.stats dd::before {
display: inline-block;
width: 1em;
height: 1em;
margin-right: 0.4em;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
content: "";
transform: translate(0, 1px);
filter: brightness(0) saturate(100%) invert(79%) sepia(28%) saturate(500%) hue-rotate(185deg) brightness(105%) contrast(95%) opacity(85%);
}

dl.stats dd::after {
display: none;
position: absolute;
top: 1.6em;
left: 50%;
transform: translateX(-50%);
z-index: 99999;
padding: 0.3em 0.5em;
border: 1px solid var(--accent);
border-radius: var(--radius-small);
box-shadow: var(--glow-sm);
background: var(--bg-dark);
color: var(--accent);
font-size: 0.75em;
line-height: 1;
white-space: nowrap;
}

dl.stats dd:hover::after {
display: inline-block;
}

dl.stats dd.language::before { background-image: url("https://zerafinacss.github.io/ao3/stats-icons/language-01.png"); }
dl.stats dd.language::after { content: "Language"; }
dl.stats dd.words::before { background-image: url("https://zerafinacss.github.io/ao3/stats-icons/words-01.png"); }
dl.stats dd.words::after { content: "Words"; }
dl.stats dd.chapters::before { background-image: url("https://zerafinacss.github.io/ao3/stats-icons/chapters-01.png"); }
dl.stats dd.chapters::after { content: "Chapters"; }
dl.stats dd.collections::before { background-image: url("https://zerafinacss.github.io/ao3/stats-icons/collection-01.png"); }
dl.stats dd.collections::after { content: "Collections"; }
dl.stats dd.comments::before { background-image: url("https://zerafinacss.github.io/ao3/stats-icons/comments-01.png"); }
dl.stats dd.comments::after { content: "Comments"; }
dl.stats dd.kudos::before { background-image: url("https://zerafinacss.github.io/ao3/stats-icons/kudos-01.png"); }
dl.stats dd.kudos::after { content: "Kudos"; }
dl.stats dd.bookmarks::before { background-image: url("https://zerafinacss.github.io/ao3/stats-icons/bookmarks-01.png"); }
dl.stats dd.bookmarks::after { content: "Bookmarks"; }
dl.stats dd.hits::before { background-image: url("https://zerafinacss.github.io/ao3/stats-icons/hits-01.png"); }
dl.stats dd.hits::after { content: "Hits"; }
dl.stats dd.published::before { background-image: url("https://zerafinacss.github.io/ao3/stats-icons/published-01.png"); }
dl.stats dd.published::after { content: "Published"; }
dl.stats dd.status::before { background-image: url("https://zerafinacss.github.io/ao3/stats-icons/updated-01.png"); }
dl.stats dd.status::after { content: "Updated"; }

/* ========= Comments ========= */
li.comment {
border: 1px solid var(--accent);
border-radius: var(--radius-big);
}

.comment div.icon {
border-bottom: 5px solid var(--accent);
box-shadow: var(--glow);
border-radius: var(--radius-mid);
}

.thread .even {
background: var(--bg-mid);
}

.unread {
background: var(--bg-dark);
border: 5px dashed var(--accent) !important;
}

span.unread {
background: var(--accent);
color: var(--bg-deep) !important;
border-radius: var(--radius-small);
}

span.replied {
background: var(--bg-dark);
color: var(--accent);
border: 2px solid var(--accent);
box-shadow: var(--glow);
border-radius: var(--radius-small);
}

span.indicator::before {
box-shadow: var(--glow);
}

/* ========= Notices & Alerts ========= */
.notice,
.comment_notice,
.kudos_notice,
ul.notes,
.caution,
.error,
.comment_error,
.kudos_error,
.alert.flash {
background: var(--accent);
box-shadow: var(--glow) !important;
color: var(--bg-dark);
border: none;
border-radius: var(--radius-mid);
}

.notice a,
.comment_notice a,
.kudos_notice a,
ul.notes a,
.caution a,
.error a,
.comment_error a,
.kudos_error a,
.alert.flash a {
color: var(--bg-mid) !important;
font-weight: bold;
}

/* ========= Splash / Home ========= */
.splash .module h3 {
color: var(--accent);
border-bottom: 2px solid var(--accent);
}

.splash .favorite li:nth-of-type(2n+1) a {
background: var(--accent);
box-shadow: var(--glow);
color: var(--bg-dark) !important;
font-weight: bold;
font-variant: small-caps;
border-radius: var(--radius-tag);
}

.splash .favorite li:nth-of-type(2n+2) a {
color: var(--accent);
font-weight: bold;
font-variant: small-caps;
font-size: 110%;
}

.splash .favorite li:nth-of-type(2n+1) a:hover,
.splash .favorite li:nth-of-type(2n+2) a:hover {
background: var(--bg-mid);
color: var(--accent);
font-weight: bold;
font-variant: small-caps;
border-radius: var(--radius-tag);
}

/* ========= Stats ========= */
#stat_chart svg rect:first-of-type {
opacity: 60%;
}

#stat_chart g[clip-path^=url] > g:nth-of-type(2) rect,
#stat_chart svg g:nth-of-type(2) > g rect:last-of-type,
#stat_chart g[clip-path^=url] > g:nth-of-type(2) rect:first-of-type {
filter: hue-rotate(140deg);
opacity: 80% !important;
}

.statistics .index li:nth-of-type(2n) {
background: var(--bg-dark);
border: 1px solid var(--accent);
border-radius: var(--radius-small);
}

/* ========= Misc ========= */
.reading h4.viewed,
dl.index dd,
table,
th,
dt.child {
background: var(--bg-dark);
}

.draft {
background: var(--bg-dark);
color: var(--accent);
border: 2px dashed var(--accent);
box-shadow: var(--glow);
border-radius: var(--radius-big);
}

.draft .wrapper {
background: var(--bg-dark);
border: 1px solid var(--accent);
border-radius: var(--radius-mid);
}

.event .userstuff {
background: var(--accent);
border: 1px solid var(--accent);
border-radius: var(--radius-mid);
}

h3 {
border-bottom-color: #a8c7f7 !important;
}

/* ========= Footer ========= */
#footer {
background: var(--bg-mid);
color: var(--accent);
border-top: 3px solid var(--accent);
box-shadow: var(--glow);
}

#footer a,
#footer .heading,
#footer .heading a {
background: transparent !important;
border: none !important;
box-shadow: none !important;
color: var(--accent) !important;
border-radius: 0 !important;
}

/* ========= Modal ========= */
#modal {
background: var(--bg-dark);
color: var(--accent);
border: 2px solid var(--accent);
box-shadow: var(--glow);
border-radius: var(--radius-big);
}


✦ Changelog ✦

April 28th, 2026
  • Rounded corners
  • Added a fill to fics for improved readability
April 29th, 2026
  • Added "Date Posted" & "Date Updated" Icons
  • Added hover glow effect to fics/blurbs
April 30th, 2026
  • Fixed dashboard mobile appearance
June 19th, 2026
  • Fixed white gradient that appeared on Safari

Notes:

Thank you so so much for using my skin!! It means the world to me 🤍

I'd love it if you told me your thoughts in the comments, or any issues/bugs you found while using it :) Until next time <3