Actions

Work Header

Rating:
Archive Warning:
Categories:
Fandom:
Additional Tags:
Language:
English
Stats:
Published:
2021-09-02
Words:
1,565
Chapters:
1/1
Comments:
8
Kudos:
137
Bookmarks:
51
Hits:
6,730

Ocean Pearl (Responsive) AO3 Skin

Summary:

An attractive Ocean Pearl Inspired Skin; Based from Reversi by AO3 and my other work Crimson Perfume.

Work Text:

Ocean Pearl (Responsive) AO3 Site Skin Preview Image

Ocean Pearl (Responsive) AO3 Site Skin Desktop Preview Gif

Ocean (Responsive) AO3 Site Skin Mobile Preview Gif

Ocean Pearl (Responsive)

Must be logged in to view. C&P code below. THIS IS A SITE SKIN.


Rules

There are none since this was a modified edit. Maybe subscribe or bookmark to check updates.
Users are allowed to modify this edit however they like.

Recommended Resources

Notepad++ (for code writing, save file as ".css")
ColorHexa (for color codes)
W3Schools (CSS code help)

Updates

Sept.02.2021:
SITE SKIN: Element [ol.work.index.group] added to fix spacing issue.
WORK SKIN: Added

Nov.28.2021:
SITE SKIN: Element [listbox] modified to fix margin and padding spacing issue in Fandoms pages.

Jun.15.2026:[TikTok Tutorial]
> Tutorial Link.


CSS

#outer .region {
  background: rgba(173, 216, 230,0.85);
}

#inner {
  background: #add8e6 url("https://static.tumblr.com/0fultrp/pDhqt88h5/5159221.jpg");
  padding: 24px 40px;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

#footer .group,
.post fieldset fieldset,
fieldset fieldset {
  background: none;
}

body,
.group .group,
.region,
fieldset,
fieldset fieldset ul,
form dl,
textarea,
#main .verbose legend,
.verbose fieldset,
.notice,
ul.notes,
input,
textarea,
table,
th,
td:hover,
tr:hover,
.symbol .question:hover,
#modal,
.ui-sortable li,
.required .autocomplete,
.autocomplete .notice,
.system .intro,
.comment_error,
.kudos_error,
div.dynamic,
.dynamic form,
#ui-datepicker-div,
.ui-datepicker table {
  background: rgb(232, 244, 248);
  color: #153a45;
  outline: #5f9ea0;
  box-shadow: none;
  border-color: transparent;
  border-radius: 10px;
  padding: 5px;
}

dl.subscription.index.group {
  padding: 15px 0 0 15px;
}

ol.work.index.group {
  padding-left: -3.5%;
  padding-right: -3.5%;
}

.alphabet .listbox li,
.media .listbox,
li.medium.listbox.group {
  margin-left: 2.25%;
  margin-right: 1.125%;
}

li.medium.listbox.group {
  height: 275px;
  max-width: 100%;
  min-width: 35%;
}

height: 275px; width: 100%; .LV_invalid,
.LV_invalid_field,
input.LV_invalid_field:hover,
input.LV_invalid_field:active,
textarea.LV_invalid_field:hover,
textarea.LV_invalid_field:active {
  border-color: 1px solid #900;
  box-shadow: none;
}

form .notice,
form ul.notes {
  box-shadow: none;
}

#header {
  margin: 0;
  padding: 0;
  position: relative;
  border-bottom: 1px solid #eee8aa;
}

#header .actions a:hover,
#header .actions a:focus,
#header .dropdown:hover a,
#header .open a,
#header .menu,
#small_login,
#header .dropdown:hover .current + .menu,
.group.listbox,
dl.work.meta.group,
div.preface.group,
fieldset fieldset.listbox,
form blockquote.userstuff,
input:focus,
textarea:focus,
li.relationships a,
.group.listbox .index,
.dashboard fieldset fieldset.listbox .index,
#dashboard a:hover,
th,
#dashboard .secondary,
.secondary,
.thread .even,
.system .tweet_list li,
.ui-datepicker tr:hover {
  background: rgba(232, 244, 248,0.75);
  outline: 0;
}

.index a:hover {
  color: #e8f4f8;
  background: #5998D6;
}

#header .dropdown .menu a:hover,
#header .dropdown .menu a:focus,
.splash .favorite li:nth-of-type(odd) a,
.ui-datepicker td:hover,
#tos_prompt .heading,
#tos_prompt [disabled] {
  background: rgba(173, 216, 230,0.75);
  outline: 0;
}

#outer,
.javascript,
.statistics .index li:nth-of-type(even),
#tos_prompt,
.announcement input[type="submit"] {
  background: #add8e6;
  padding: 0;
}

#header ul.primary,
#outer #footer,
.toggled form {
  background: url("https://static.tumblr.com/0fultrp/ZcFqt9goo/qi2kz0h.png");
  background-repeat: no-repeat;
  background-size: cover;
}

#header ul.primary,
#dashboard ul,
dl.meta,
dl.work.meta.group,
div.preface.group,
fieldset fieldset.listbox,
#main li.blurb,
div.comment,
li.comment,
.toggled form,
form dl dt,
#inner .module .heading,
.bookmark .status span,
.splash .news li,
.filters .group dt.bookmarker {
  border-color: #eee8aa;
  border-radius: 10px;
}

ul.abbreviated.comment.group .icon {
  height: 100px;
  width: 100px;
  padding: 10px 0 10px 0;
}

span.posted.datetime {
  margin-top: 10px;
}

#footer,
.group.listbox,
form blockquote.userstuff {
  border-color: #eee8aa;
}

.status.unread {
  background: transparent;
}

.group.listbox,
fieldset fieldset.listbox,
#main li.blurb,
.wrapper,
#dashboard .secondary,
.secondary,
form blockquote.userstuff,
.thread .comment,
.toggled form {
  box-shadow: none;
}

#dashboard .current,
.actions a:active,
#outer .current,
a.current,
.current a:visited,
span.unread,
.replied,
span.claimed,
dl.index dd,
.own,
.draft,
.draft .unread,
.child,
.unwrangled,
.unreviewed,
.ui-sortable li:hover {
  background: #d8f5ff;
  border: 0;
  box-shadow: none;
  outline: 0;
}

dl.index dd {
  background: none;
}

.current:hover {
  background: #d8f5ff;
}

input,
textarea {
  box-shadow: none;
  outline: 0;
  border: 1px solid #8fbbbd;
}

li.blurb,
.blurb .blurb,
.listbox .index,
fieldset fieldset.listbox,
.dashboard .listbox .index {
  box-shadow: none;
}

#footer a {
  color: #5f7ea0;
}

#footer a:hover,
#footer a:focus,
.autocomplete .dropdown ul li:hover,
li.selected,
a.tag:hover,
.listbox .heading a.tag:visited:hover,
.symbol .question,
.qtip-content {
  background: #5998D6;
  color: #00003f;
  outline: 0;
}

.splash .favorite li:nth-of-type(odd) a:hover,
.splash .favorite li:nth-of-type(odd) a:focus {
  background: #5998D6;
  color: #00003f;
  outline: 0;
}

#header #greeting img,
#header .heading a,
#header .heading a:visited,
#header .user a:hover,
#header .user a:focus,
#header .user .current,
#header fieldset,
#header form,
#header p,
#dashboard a:hover,
.actions a:hover,
.actions input:hover .delete a,
span.delete,
span.unread,
.replied,
span.claimed,
.draggable,
.droppable,
span.requested,
a.work,
.blurb h4 a:link,
.blurb h4 img,
.splash .module h3,
.splash .browse li a:before,
.required,
.error,
.comment_error,
.kudos_error,
a.cloud7,
a.cloud8,
h5.fandoms.heading a:hover,
#footer .actions .secondary a,
#tos_prompt .heading {
  color: #153a45;
  outline: 0;
  box-shadow: 0;
}

.fandoms.heading,
li.blurb .tags {
  max-height: 120px;
  overflow-y: auto;
}

#greeting .icon,
#dashboard,
#dashboard.own,
.error,
.comment_error,
.kudos_error,
#header .actions .current,
.qtip-content {
  border-color: #5998D6;
}

a,
a:link,
a.tag,
#header a,
#header a:visited,
#header .current,
#header #search input:focus,
#header #search input:hover,
#dashboard a,
#dashboard span,
#dashboard .current,
.heading,
.group .heading,
.filters dt a:hover {
  color: #00003f;
  outline: 0;
}

#header .primary .open a,
#header .primary.navigation.actions,
#header .primary.navigation.actions a,
#header .primary .dropdown:hover a,
#header .primary .dropdown a:focus,
#header #search input:focus,
#header #search input:hover {
  color: #00003f;
  outline: 0;
  box-shadow: none;
}

#header .primary.navigation.actions a:hover,
#header .dropdown .menu a:hover,
ul.navigation.actions li:hover {
  color: #5998D6;
}

a:visited,
.actions a:visited,
.action a:link,
.action a:visited,
.listbox .heading a:visited,
span.series .divider {
  color: #b8860b;
  outline: 0;
}

.actions a,
.actions a:link,
.action,
.action:link,
.actions input,
label.actions,
.submit input,
.advanced_skin_open.action.hidden,
input[type="submit"],
button,
.current,
.actions label,
#header .actions a {
  background: #eee8aa;
  border-color: transparent;
  color: #b8860b;
  box-shadow: none;
  text-shadow: none;
  outline: 0;
}

.actions a:hover,
.actions input:hover,
#dashboard a:hover,
.actions a:focus,
.actions input:focus,
.submit input:hover,
label.action:hover,
.advanced_skin_open.action.hidden:hover,
#dashboard a:focus {
  background: #add8e6;
  color: #5998D6;
  border-color: transparent;
  box-shadow: none;
  outline: 0;
}

.actions a:active,
.current,
a.current,
.current a:visited {
  color: #00003f;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  outline: 0;
}

.delete a,
span.delete {
  box-shadow: none;
  outline: 0;
}

ul.required-tags,
.bookmark .status span,
.blurb .icon {
  opacity: 0.9;
  border: 0;
}

#outer .group .heading,
#header .actions a,
#footer .secondary a,
fieldset.listbox .heading,
.userstuff .heading,
.heading,
.userstuff h2 {
  text-shadow: none;
  color: #00003f;
  background: none;
  outline: 0;
}

#header .actions a,
fieldset fieldset,
.mce-container button,
.filters .expander {
  box-shadow: none;
  outline: 0;
}

fieldset fieldset.listbox {
  outline: none;
}

form dd.required {
  color: #b8860b;
}

.mce-container input:focus {
  background: #eee8aa;
}

.announcement .userstuff a,
.announcement .userstuff a:link,
.announcement .userstuff a:visited:hover {
  color: #00003f;
  outline: 0;
}

.announcement .userstuff a:visited {
  color: #5998D6;
}

.announcement .userstuff a:hover,
.announcement .userstuff a:focus {
  color: #b8860b;
  outline: 0;
}

.event.announcement .userstuff a,
.filters .expander {
  color: #b8860b;
  outline: 0;
}

.userstuff,
#chapters {
  font-family: Verdana;
}

.userstuff hr,
#chapters hr {
  border: 1px solid #daa520;
}

.userstuff blockquote,
#chapters blockquote {
  border-left: 1px solid #daa520;
  padding-left: 5px;
}

#chapters blockquote p.bqt {
  text-indent: 0 !important;
}

#chapters .overflow {
  border: 1px solid #daa520;
  border-radius: 10px;
  background: rgba(238, 232, 170, 0.5);
  margin-bottom: 10px;
  width: 100%;
  height: 200px;
  overflow-y: scroll;
  -webkit-user-select: all;
  user-select: all;
}

img.center {
  max-width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

::-moz-selection {
  color: #b8860b;
  background: #eee8aa;
}

::selection {
  color: #b8860b;
  background: #eee8aa;
}

::-webkit-scrollbar {
  height: 15px;
  width: 15px;
}

::-webkit-scrollbar-track {
  background: #add8e6;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: #d8f5ff;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #eee8aa;
}

Work Skin CSS

#workskin #chapters hr {
  border: 1px solid #b8860b;
}

#workskin #chapters hr.double {
  border: 0;
  border-top: 5px double #b8860b;
}

#workskin #chapters hr.aster {
  background: none;
  border: 0;
  margin: auto;
  text-indent: 0 !important;
}

#workskin #chapters hr.aster::after {
  content: '* * * ⚪ * * *';
  display: block;
  color: #b8860b;
  text-align: center;
}

#workskin #chapters hr.shine {
  border: 0;
  border-top: 1px dashed #b8860b;
}

#workskin #chapters hr.shine:after {
  content: '\2604';
  display: inline-block;
  position: relative;
  top: -13px;
  left: 40px;
  color: #b8860b;
  font-size: 25px;
}

#workskin #chapters hr.pearla {
  border: 0;
  height: 20px;
  background: url("https://static.tumblr.com/0fultrp/oRwqtajqf/pearl_div1.png") no-repeat top center;
  background-size: contain;
  display: block;
  position: relative;
}

#workskin #chapters hr.pearlb {
  border: 0;
  height: 20px;
  background: url("https://static.tumblr.com/0fultrp/XTiqtajsh/pearl_div2.png") no-repeat top center;
  background-size: contain;
  display: block;
  position: relative;
}

#workskin #chapters hr.pearlc {
  border: 0;
  height: 20px;
  background: url("https://static.tumblr.com/0fultrp/uVSqtajsw/pearl_div3.png") no-repeat top center;
  background-size: contain;
  display: block;
  position: relative;
}

#workskin #chapters hr.pearld {
  border: 0;
  height: 20px;
  background: url("https://static.tumblr.com/0fultrp/R0Wqtajtj/pearl_div4.png") no-repeat top center;
  background-size: contain;
  display: block;
  position: relative;
}

#workskin #chapters hr.pearle {
  border: 0;
  height: 20px;
  background: url("https://static.tumblr.com/0fultrp/wPXqtaju3/pearl_div5.png") no-repeat top center;
  background-size: contain;
  display: block;
  position: relative;
}

#workskin audio {
  width: 50%;
}

#workskin audio:focus {
  outline: none;
}

#workskin ::-moz-selection {
  color: #b8860b;
  background: #eee8aa;
}

#workskin ::selection {
  color: #b8860b;
  background: #eee8aa;
}

#workskin ::-webkit-scrollbar {
  height: 15px;
  width: 15px;
}

#workskin ::-webkit-scrollbar-track {
  background: #add8e6;
  border-radius: 10px;
}

#workskin ::-webkit-scrollbar-thumb {
  background: #d8f5ff;
  border-radius: 10px;
}

#workskin ::-webkit-scrollbar-thumb:hover {
  background: #eee8aa;
}

#workskin #chapters p span.typewriter {
  font-family: Consolas !important;
}

#workskin .userstuff blockquote,
#workskin #chapters blockquote {
  border-left: 1px solid #daa520;
  padding-left: 5px;
}

#workskin #chapters blockquote p.bqt {
  text-indent: 0 !important;
}

#workskin #chapters .overflow {
  border: 1px solid #daa520;
  border-radius: 10px;
  background: rgba(238, 232, 170, 0.5);
  margin-bottom: 10px;
  width: 100%;
  height: 200px;
  overflow-y: scroll;
  -webkit-user-select: all;
  user-select: all;
}

#workskin #chapters .overflow p {
  display: block;
  text-indent: 0 !important;
}

#workskin #chapters div.userstuff p {
  text-indent: 30px;
}

#workskin #chapters div.userstuff p.center {
  display: block;
  text-align: center;
  text-indent: 0 !important;
}

#workskin img.center {
  max-width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

♥ Enjoy ♥