I tweaked a bit @ao3commentoftheday's peach site skin to make it strawberry themed because I love it but I was in need of a cute pink skin and I'm so in love with it (and proud of myself)
All credits goes to them for most of it though! I really just mostly changed that pattern and the color scheme
Edit: the rating square things aren't here because I also used a skin that changes it to something clearer if you need it written, I also changed it to fit the strawberry theme
CSS under the cut for those who want it
#outer {
background: linear-gradient(90deg, rgba(250, 162, 192, 1) 0%, rgba(255, 224, 236, 1) 100%);
}
#header .primary {
background: #ff75aa;
background-repeat: repeat;
box-shadow: none;
}
#search .button,
#header .logo {
display: none;
}
#header .heading a,
#greeting img.icon {
visibility: hidden;
}
#header #search .text {
background: #ffe4ed;
border: none;
box-shadow: none;
width: 7em;
}
#header h1.heading a::before {
content: " 🍓🍓🍓";
visibility: visible;
}
.splash .module h3 {
border-bottom: none;
}
#header .menu,
#small_login {
background: #ffe4e9;
box-shadow: none;
width: 20em;
}
#greeting .user > li a {
color: #a10a4b;
}
#header .menu li,
.splash .news li {
border-bottom: none;
}
img[src$="/images/lockblue.png"] {
content: url("https://iili.io/qndep4I.png") !important;
height: 14px !important;
width: auto !important;
filter: brightness(0) saturate(100%) invert(38%) sepia(71%) saturate(2770%) hue-rotate(317deg) brightness(86%) contrast(88%) !important;
}
#header .actions a:hover,
#header .dropdown:hover a.dropdown-toggle,
#header .menu li a {
background: none;
color: #cc145b !important;
}
#footer {
background: #ff759c;
}
#main {
color: #cf1160;
}
#main a {
color: #b30749;
}
.splash .favorite li:nth-of-type(2n+1) a {
background: #ffe4ed;
border: 1px solid #ffe4ed;
border-radius: 5px;
}
.splash .favorite li:nth-of-type(2n+1) a:hover,
.splash .favorite li:nth-of-type(2n+2) a:hover {
background: #f4367c;
border: 1px solid #f4367c;
border-radius: 5px;
color: #fff !important;
}
.resp-sharing-button--twitter,
a.resp-sharing-button__link {
color: #fff !important;
}
.listbox,
fieldset,
fieldset dl dl,
fieldset fieldset fieldset,
fieldset fieldset dl dl,
dd.hideme,
form blockquote.userstuff,
.dynamic form {
background: url("https://iili.io/qnJucWN.jpg");
background-repeat: repeat;
border: 4px solid #fff;
box-shadow: none;
}
form dl {
background: #ffe4ec;
border: 2px solid #fff;
box-shadow: none;
}
input,
textarea {
border: 1px solid #f4367c;
box-shadow: none;
}
input:focus,
select:focus,
textarea:focus {
background: #ffe4ed;
}
form dt {
border-bottom: 1px solid #fff;
}
form dd.required {
color: #8e053a;
}
.LV_invalid {
background: #ffa8c1;
border: 1px solid #fff;
color: #f4367f;
box-shadow: none;
}
.LV_invalid_field,
input.LV_invalid_field:hover,
input.LV_invalid_field:active,
textarea.LV_invalid_field:hover,
textarea.LV_invalid_field:active {
border: 1px solid #8e053a;
}
.autocomplete div.dropdown ul {
background: #fff;
border: 1px solid #f4367f;
color: #f4367c;
box-shadow: none;
}
.autocomplete .dropdown ul li:hover,
.autocomplete .dropdown li.selected {
background: #f43678;
color: #fff;
}
.required .autocomplete,
.autocomplete .notice {
color: #f43685;
}
.ui-sortable li {
background: #ffa8d2;
border: 2px solid #fff;
box-shadow: none;
}
.ui-sortable li:hover {
background: #ff75b3;
border: 2px solid #fff;
box-shadow: none;
}
.ui-draggable form {
box-shadow: none;
}
.notice,
.comment_notice,
.kudos_notice,
ul.notes,
.caution,
.error,
.comment_error,
.kudos_error,
.alert.flash,
.LV_invalid {
background: rgba(230, 72, 154, 0.12);
border-radius: 8px;
border: 2px solid #ed74b1;
box-shadow: 0px 0px 0px 0px rgba(247,17,140,0.9);
padding: 1em;
color: #fff;
}
#modal {
background: #ffe4f1;
border: 4px solid #ff75b3;
box-shadow: none;
}
#modal .content {
border-bottom: none;
}
.actions a:visited,
.action:visited,
.action a:link,
.action a:visited {
color: #f3bad3;
}
.actions a:hover,
.actions input:hover,
.actions a:focus,
.actions input:focus,
label.action:hover,
.action:hover,
.action:focus {
color: #f43688;
border-top: none;
border-left: none;
box-shadow: none;
background: #f3bacd;
}
.actions a:active,
.current,
a.current,
a:link.current,
.current a:visited {
color: #fff;
background: #ff75a5;
border-color: #fff;
box-shadow: none;
}
.actions label.disabled {
background: #ff75aa;
}
.actions .disabled select {
color: #fff;
border-color: #fff;
}
.delete a,
span.delete {
color: #f43685;
box-shadow: none;
}
.secondary {
background: #fff;
border: 2px solid #f43685;
box-shadow: none;
}
.own,
.draft,
.draft .wrapper,
.unread,
.child,
.unwrangled,
.unreviewed {
background: #ffe4ed !important;
}
.draft {
border: 2px dashed #ff759e;
}
span.unread,
.replied,
span.claimed,
.actions span.defaulted {
background: #f3bacd;
color: #f43685;
border: 1px solid #fff;
border-bottom: none;
}
.actions span.defaulted {
color: #8e053e;
}
.draggable,
.droppable,
span.requested,
.nominations .rejected {
color: #8e053c;
}
.nominations .approved {
background: #ffe4ea;
}
.nominations .rejected {
background: #f3bad1;
}
span.offered.requested {
color: #ffe4ea;
}
.wrapper {
box-shadow: none;
}
dl.index dd {
background: #f3bad0;
}
p.kudos {
background: url("https://iili.io/qnJpiNf.png");
background-repeat: no-repeat;
}
#kudos_message.kudos_error,
#kudos_message.notice {
font-size: 1pt;
color: #000 !important;
}
#kudos_message.notice::before {
font-size: 14pt !important;
color: #9e0547 !important;
content: "Thank you for giving some love 🍓 to this fic";
padding: 1em;
}
#kudos_message.kudos_error::before {
font-size: 14pt !important;
color: #9e0547 !important;
content: "You already left kudos here 🍓";
padding: 1em;
}
.statistics .index li:nth-of-type(even) {
background: #f3bad2;
}
fieldset fieldset.listbox {
background: #ffe4ed;
border: 2px solid #ff75aa;
box-shadow: none;
}
.listbox>.heading,
.listbox .heading a:visited {
color: #8D1035;
}
.listbox .index {
background: #ffe4ed;
box-shadow: none;
}
dl.meta {
border: 2px solid #f4367f;
background: #ffe4ed;
}
.actions a,
.actions a,
.action,
input[type="submit"],
button,
.actions label,
.actions a,
.actions a:link,
.action,
.action:link,
.actions input,
input[type=submit],
button,
.actions label {
background: #ffe4ed;
border: 1px solid #f4368c;
text-shadow: none;
color: #f4368c;
}
.current,
#dashboard .current {
background: #f4368c;
border: 1px solid #fff;
text-shadow: none;
color: #fff;
}
#dashboard.own {
border-top: none;
border-bottom: none;
}
#dashboard a {
color: #f4368c !important;
}
#dashboard a:hover {
background: #ff75ba;
}
label {
color: #f4368c;
}
li.blurb,
fieldset ul {
background: #ffe4ea !important;
border: 2px solid #fff;
}
#header h2.collections,
.reading h4.viewed,
dl.index {
background: #ffe4ea;
color: #9c084a;
}
.comment h4.byline {
background: #f5b3ce;
border-bottom: 2px solid #fff;
}
.comment div.icon {
border-bottom: 5px solid #ff75af;
}
li.comment {
border: 2px solid #fff;
background: #f5b3ce;
}
li.comment ul.actions {
background: transparent !important;
border: none !important;
}
#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 {
opacity: 50% !important;
}
h5.fandoms.heading a,
.fandom .tag,
.work .fandom a.tag {
font-variant: small-caps;
}
.warnings .tag,
.work .warning a.tag {
background: #8e0540;
border: 1px solid #8e0540;
border-radius: 5px;
color: #fff !important;
padding-left: .5em;
padding-right: .5em;
}
.relationships .tag,
.work .relationships a.tag {
background: #f4368f;
border: 1px solid #f4368f;
border-radius: 5px;
color: #fff !important;
font-weight: bold;
padding-left: .5em;
padding-right: .5em;
}
.characters .tag,
.work .characters a.tag {
background: #ff75b1;
border: 1px solid #ff75b1;
border-radius: 5px;
color: #fff !important;
font-weight: bold;
padding-left: .5em;
padding-right: .5em;
}
.freeforms .tag,
.work .freeforms a.tag {
color: #f43685 !important;
}
.commas li:after {
content: none;
}
ul.tags {
line-height: 190%;
}
(THIS ISNT PART OF THE CODE)
edit : I've been given a link to fix the buttons (not made for this skins specifically)
it seems to be somewhat working but i know nothing about CSS so i'm struggling to adapt it to this site skin, however if you do know then it can help you
here it is
