Actions

Work Header

Rating:
Archive Warning:
Fandom:
Character:
Additional Tags:
Language:
English
Series:
Part 5 of F1 site skins
Stats:
Published:
2026-08-04
Words:
1,526
Chapters:
1/1
Comments:
2
Kudos:
4
Bookmarks:
2
Hits:
318

Kimi Antonelli site skin

Summary:

This is a Kimi Antonelli site skin, with turquoise to white background. The colors are generally pretty light.

Notes:

HOW TO USE THIS SKIN:

1. Log in and go to your dashboard.

2. Go to skins.

3. Go to create site skin.

4. Give it an unique name, like your username.

5. Copy the code below and paste it in the CSS field.

6. Go on submit.

7. Scroll down and go on use.

DISCLAIMER: This skin only looks good on ipads or tablets not on phones. My coding is not perfect so this code might be longer then necessary.

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

Work Text:

:root {
--white: #0d0d0f;
--black: #D5F8FF;
--blue: #27A48D;
}

#header {
background-image: url("https://cdn.phototourl.com/free/2026-08-04-f15f388e-f6f2-4e80-b25f-213c6ad50f49.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
background-color: var(--black);
}

#header .heading {
height: 15em;
}

#header .primary {
background: var(--black);
box-shadow: 0px 0px 20px var(--blue);
}

#header .logo {
display: none;
}

#header .heading a {
opacity: 0;
}

body {
font-family: Georgia, sans-serif;
}

#workskin,
.userstuff,
.userstuff p,
.summary,
.summary .userstuff,
dl.meta,
.blurb,
.blurb .summary,
#main,
#main h2,
#main h3,
#main h4,
#main label,
#main legend {
color: var(--white) !important;
}

#outer.wrapper,
.filtering .filters #leave_filters {
background: url("https://cdn.phototourl.com/free/2026-08-04-e1d4548f-229b-4a03-a143-96287471ca95.jpg");
background-size: contain;
background-position: center;
background-repeat: repeat;
background-color: var(--black);
}

#outer.wrapper {
background-attachment: fixed;
}

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

#main a:hover {
background: var(--blue);
color: var(--white);
}

#greeting a.dropdown-toggle,
#header .actions a {
color: var(--white) !important;
text-shadow: 0px 0px 3px var(--black);
}

#greeting .menu,
#header .dropdown .menu,
#header .dropdown:hover a {
background: var(--black);
box-shadow: 0px 0px 15px var(--blue);
}

#greeting img.icon {
width: 40px;
height: 40px;
}

#header #search .text,
.search [role="tooltip"] {
background: var(--black);
box-shadow: 0px 0px 15px var(--blue);
color: var(--white) !important;
border: 1px solid var(--blue);
}

form.search input[type=text],
form.search input[type=submit],
.autocomplete div.dropdown ul {
background: var(--black) !important;
border: none;
box-shadow: 0px 0px 15px var(--blue);
color: var(--white);
}

.notice,
.comment_notice,
.kudos_notice,
ul.notes,
.caution,
.error,
.comment_error,
.kudos_error,
.alert.flash {
background: var(--blue);
color: var(--black);
box-shadow: 0px 0px 15px var(--blue);
}

.actions a,
.actions a:focus,
.actions input:focus,
.action:focus,
.actions button,
.actions li input,
.actions li input[type="submit"],
input[type="submit"],
.actions li label,
ul.navigation.actions li a,
.action:link,
.actions a:link {
background: var(--black);
border: 1px solid var(--blue);
color: var(--white);
box-shadow: 0px 0px 10px var(--blue);
border-radius: 5px;
}

.current,
#dashboard .current {
background: var(--blue) !important;
color: var(--black) !important;
}

#dashboard.own {
border-top: 5px solid var(--blue);
border-bottom: 5px solid var(--blue);
box-shadow: 0px 0px 15px var(--blue);
}

#dashboard a {
color: var(--blue );
}

#dashboard a:hover {
background: var(--blue );
color: var(--blue) !important;
}

dl.meta {
border: 1px solid var(--blue);
box-shadow: 0px 0px 15px var(--blue);
}

.listbox,
fieldset fieldset.listbox {
background: var(--blue);
}

form dl,
fieldset,
input,
select,
textarea,
.own {
background: var(--black) !important;
color: var(--white) !important;
border: 1px solid var(--blue);
}

#footer {
background: var(--black);
color: var(--white);
border-top: 3px solid var(--blue);
box-shadow: 0px 0px 15px var(--blue);
}

#footer a,
#footer .heading {
color: var(--blue);
}

h4.heading.byline {
background: transparent;
border: 5 px solid var(--white);
color: var(--white) !important;
}

li.comment {
border: 1px solid var(--blue);
}

.unread {
background: var(--black);
border: 5px dashed var(--blue) !important;
}

span.unread {
background: var(--blue);
color: var(--black) !important;
}

.comment div.icon {
box-shadow: 0px 0px 15px var(--white);
}

.filters .expander {
color: var(--blue) !important;
font-weight: bold;
}

.blurb h4 a:visited {
background: rgba(38, 72, 171, 0.15);
box-shadow: inset 0 0 0 2px var(--blue);
padding: 2px 6px;
border-radius: 4px;
display: inline-block;
}

.relationships .tag,
.work .relationships a.tag,
dd.relationship.tags a {
background: none;
border: 1px solid var(--blue);
color: var(--white) !important;
box-shadow: 0px 0px 15px var(--blue);
padding: 2px 4px;
}

.comment,
li.comment,
.comment .comment,
.comment .userstuff,
.comment blockquote,
.comment .posted,
.comment .icon {
background: transparent !important;
}

.site-skin-metadata {
content: "==================================================

- Skin: Replace the AO3 Icons 2.0 (Color scheme: Reversi/Berry Blue)
- Author: ZerafinaCSS [https://tumblr.com/zerafinacss]
- Instructions: https://ao3.org/works/57331222
- Repository: https://github.com/ZerafinaCSS/Replace-the-AO3-Icons-2.0
- License: MIT
- Updated: 2026-Mar-21 11:10 UTC

==========================================================";
}

ul.required-tags,
.bookmark .status span,
.blurb .icon {
opacity: 1 !important;
}

img[src$="/images/skins/iconsets/default/icon_user.png"] {
box-sizing: border-box;
border: 1.5px solid #ddd;
background: #5998d6 content-box;
content: url("https://zerafinacss.github.io/ao3/icons/user-default-01.png");
}

.comment .icon .anonymous {
box-sizing: border-box;
border: 1.5px solid #00000025;
background: url("https://zerafinacss.github.io/ao3/icons/anon-01.png"),
#6e6e6e border-box;
background-size: cover;
}

.comment .icon .visitor {
box-sizing: border-box;
border: 1.5px solid #00000025;
background: url("https://zerafinacss.github.io/ao3/icons/user-visitor-01.png"),
#6e6e6e border-box;
background-size: cover;
}

img[src$="/images/skins/iconsets/default/icon_collection.png"] {
box-sizing: border-box;
border: 1.5px solid #00000025;
background: linear-gradient(transparent, #ffffff50 45% 55%, transparent),
#616c90 border-box;
content: url("https://zerafinacss.github.io/ao3/icons/collection-01.png");
}

.tagset .primary .icon,
.tag .primary .icon,
.index .tagset .icon {
box-sizing: border-box;
border: 1.5px solid #00000025;
background: url("https://zerafinacss.github.io/ao3/icons/tag-01.png"),
linear-gradient(transparent, #ffffff50 45% 55%, transparent),
#5998d6 border-box;
background-size: cover;
}

.index .mystery .icon {
box-sizing: border-box;
border: 1.5px solid #ddd;
box-shadow: inset 0 0 0 3px #fff;
background: url("https://zerafinacss.github.io/ao3/icons/anon-01.png"),
linear-gradient(transparent, #ffffff50 45% 55%, transparent)
#616c90 content-box;
background-size: cover;
}

.admin .primary .icon {
box-sizing: border-box;
border: 1.5px solid #00000099;
background: url("https://zerafinacss.github.io/ao3/icons/admin-01.png")
no-repeat,
linear-gradient(#ffffff40, transparent)
#5998d6 border-box;
background-size: cover;
}

.skins .primary .icon:not(:has(a .icon)),
.index .skins .icon:not(:has(a .icon)) {
box-sizing: border-box;
border: 1.5px solid #ddd;
background: url("https://zerafinacss.github.io/ao3/icons/skins-01.png"),
#5998d6 border-box;
background-size: cover;
}

#symbols-key dl img,
#bookmark-symbols-key img {
width: 0 !important;
height: 0 !important;
padding: 25px 0 0 25px;
}

.blurb ul.required-tags li a > span,
.bookmark p.status a > span,
.bookmark p.status .count,
#symbols-key dl img,
#bookmark-symbols-key img {
box-sizing: border-box;
border: 1px solid;
background-size: cover;
background-origin: border-box;
}

.required-tags .rating-notrated,
.required-tags .category-none,
.required-tags .warning-no,
.bookmark p.status .count,
img[src$="/images/skins/iconsets/default/rating-notrated.png"],
img[src$="/images/skins/iconsets/default/category-none.png"],
img[src$="/images/skins/iconsets/default/warning-no.png"] {
color: #00000040;
background: #ffffffcc;
}

.required-tags .rating-general-audience,
img[src$="/images/skins/iconsets/default/rating-general-audience.png"] {
color: #0000001a;
background: url("https://zerafinacss.github.io/ao3/icons/rating-gen-01.png"),
#08b3bc;
}

.required-tags .rating-teen,
img[src$="/images/skins/iconsets/default/rating-teen.png"] {
color: #0000001a;
background: url("https://zerafinacss.github.io/ao3/icons/rating-teen-01.png"),
#5998d6;
}

.required-tags .rating-mature,
img[src$="/images/skins/iconsets/default/rating-mature.png"] {
color: #0000001a;
background: url("https://zerafinacss.github.io/ao3/icons/rating-mature-01.png"),
#e8689b;
}

.required-tags .rating-explicit,
img[src$="/images/skins/iconsets/default/rating-explicit.png"] {
color: #0000001a;
background: url("https://zerafinacss.github.io/ao3/icons/rating-explicit-01.png"),
#a13374;
}

.required-tags .category-femslash,
img[src$="/images/skins/iconsets/default/category-femslash.png"] {
color: #0000001a;
background: url("https://zerafinacss.github.io/ao3/icons/category-ff-01.png"),
#e8689b;
}

.required-tags .category-het,
img[src$="/images/skins/iconsets/default/category-het.png"] {
color: #0000001a;
background: url("https://zerafinacss.github.io/ao3/icons/category-mf-01.png"),
#a13374;
}

.required-tags .category-gen,
img[src$="/images/skins/iconsets/default/category-gen.png"] {
color: #0000001a;
background: url("https://zerafinacss.github.io/ao3/icons/category-gen-01.png"),
#08b3bc;
}

.required-tags .category-slash,
img[src$="/images/skins/iconsets/default/category-slash.png"] {
color: #0000001a;
background: url("https://zerafinacss.github.io/ao3/icons/category-mm-01.png"),
#5998d6;
}

.required-tags .category-multi,
img[src$="/images/skins/iconsets/default/category-multi.png"] {
color: #0000001a;
background: conic-gradient(from 270deg, #08b3bc 25%, #a13374 25% 50%, #5998d6 50% 75%, #e8689b 75%);
}

.required-tags .category-other,
img[src$="/images/skins/iconsets/default/category-other.png"] {
color: #0000001a;
background: url("https://zerafinacss.github.io/ao3/icons/category-other-01.png"),
#6e6e6e;
}

.required-tags .warning-choosenotto,
img[src$="/images/skins/iconsets/default/warning-choosenotto.png"] {
color: #0000001a;
background: url("https://zerafinacss.github.io/ao3/icons/warning-choosenotto-01.png"),
#e8689b;
}

.required-tags .warning-yes,
img[src$="/images/skins/iconsets/default/warning-yes.png"] {
color: #0000001a;
background: url("https://zerafinacss.github.io/ao3/icons/warning-yes-01.png"),
#a13374;
}

.required-tags .external-work,
img[src$="/images/skins/iconsets/default/warning-external-work.png"] {
color: #0000001a;
background: url("https://zerafinacss.github.io/ao3/icons/warning-external-work-01.png"),
#5998d6;
}

.required-tags .complete-no,
img[src$="/images/skins/iconsets/default/complete-no.png"] {
color: #0000001a;
background: url("https://zerafinacss.github.io/ao3/icons/complete-no-01.png"),
#a13374;
}

.required-tags .complete-yes,
img[src$="/images/skins/iconsets/default/complete-yes.png"] {
color: #0000001a;
background: url("https://zerafinacss.github.io/ao3/icons/complete-yes-01.png"),
#08b3bc;
}

.status .rec,
img[src$="/images/skins/iconsets/default/bookmark-rec.png"] {
color: #0000001a;
background: url("https://zerafinacss.github.io/ao3/icons/bookmark-rec-01.png"),
#5998d6;
}

.status .public,
img[src$="/images/skins/iconsets/default/bookmark-public.png"] {
color: #0000001a;
background: url("https://zerafinacss.github.io/ao3/icons/bookmark-public-01.png"),
#5998d6;
}

.status .private,
img[src$="/images/skins/iconsets/default/bookmark-private.png"] {
color: #0000001a;
background: url("https://zerafinacss.github.io/ao3/icons/bookmark-locked-01.png"),
#000;
font-size: 0;
}

.status .private .text {
background: none;
}

.status .hidden,
img[src$="/images/skins/iconsets/default/bookmark-hidden.png"] {
color: #0000001a;
background: url("https://zerafinacss.github.io/ao3/icons/bookmark-locked-01.png"),
#e8689b;
}

a.rss span {
padding: 0;
background: none;
}

.actions li a.rss {
display: inline-flex;
align-content: center;
align-items: center;
column-gap: 0.3em;
}

.actions li a.rss::before {
box-sizing: border-box;
width: 0.85em;
height: 0.85em;
border: 1px solid var(--icon-border1);
border-radius: 2px;
background: url("https://zerafinacss.github.io/ao3/icons/rss-01.png")
#e8689b;
background-size: cover;
content: "";
}

p.kudos {
background: none;
}

div:has(> p.kudos)::before {
position: absolute;
width: 55px;
height: 55px;
background: url("https://zerafinacss.github.io/ao3/icons/kudos-01.png");
background-size: cover;
content: "";
filter: invert(62%) sepia(14%) saturate(1799%) hue-rotate(172deg) brightness(90%) contrast(86%);
}

img[src$="/images/lockblue.png"] {
content: url("https://zerafinacss.github.io/ao3/icons/lock-01.png");
filter: brightness(0) saturate(100%) invert(62%) sepia(14%) saturate(1799%) hue-rotate(172deg) brightness(90%) contrast(86%);
}

img[src$="/images/lockred.png"] {
content: url("https://zerafinacss.github.io/ao3/icons/lock-01.png");
filter: brightness(0) saturate(100%) invert(58%) sepia(88%) saturate(942%) hue-rotate(297deg) brightness(92%) contrast(99%);
}

#header .logo {
content: url("/images/logo.png");
}

Notes:

If you want any other driver/character, just write it in the comments and write which color you want and if you want anything else<333

Series this work belongs to: