Actions

Work Header

Rating:
Archive Warning:
Categories:
Fandom:
Additional Tags:
Language:
English
Stats:
Published:
2026-04-18
Words:
1,864
Chapters:
1/1
Comments:
4
Kudos:
29
Bookmarks:
6
Hits:
736

Obsidian Kintsugi (Responsive) AO3 Skin

Summary:

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

Work Text:

Obsidian Kintsugi (Responsive) AO3 Site Skin Preview Image

Obsidian Kintsugi (Responsive) AO3 Site Skin Desktop Preview Gif

Obsidian Kintsugi (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

Apr.18.2026:
To be added on observational notices.

Jun.15.2026:[TikTok Tutorial]
Tutorial Link.


CSS

#outer .region {
  background: rgba(8, 8, 8, 0.90);
}

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

div #header.region,
#outer #footer,
.toggled form {
  background: url("https://static.tumblr.com/0fultrp/V4Zs4czua/5459923.jpg");
  background-repeat: no-repeat;
  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-color: rgba(41, 41, 41, 0.50);
  color: #91989e;
  box-shadow: 10px 10px 50px 15px black;
  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;
}

#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(38, 38, 38, 0.75);
  outline: 0;
}

#skin_ie_condition,
#skin_role,
#work_search_language_id,
#work_search_sort_column,
#work_author_attributes_ids,
#work_work_skin_id,
#work_language_id,
#site_search_tooltip,
p.notice,
.index a:hover {
  color: #f8f4e8;
  background: #464b4f;
}

select.decorated option:checked,
select.decorated option:hover {
  box-shadow: 0 0 10px 100px #ccb680 inset;
}

.filters .indicator:before {
  background: #363636;
  color: #ffffff;
  display: inline-block;
  border: 1px solid;
  margin-right: 0.25em;
  text-align: center;
  background-image: linear-gradient(#fff4e5 2%, #c5a478 95%, #7e4805 100%);
}

#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(38, 38, 38,0.75);
  outline: 0;
}

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

#header ul.primary {
  background: transparent;
  background-repeat: no-repeat;
  background-size: cover;
}

#header ul.primary,
#dashboard ul,
dl.meta,
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: #ccb680;
  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: #ccb680;
}

.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;
}

.wrapper {
  color: #babec2;
  border-radius: 10px;
}

.wrapper a.tag {
  color: #6a7278;
}

.wrapper a.tag:hover {
  color: #b8860b;
}

dl.work.meta.group {
  border: 1px solid #6a7278;
}

#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: linear-gradient(192deg,rgba(186, 190, 194, 0.5) 50%, rgba(70, 75, 79, 0.5) 100%);
  border: 0;
  box-shadow: none;
  outline: 0;
}

dl.index dd {
  background: none;
}

.current:hover {
  background: linear-gradient(192deg,rgba(186, 190, 194, 0.5) 50%, rgba(70, 75, 79, 0.5) 100%);
}

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

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

#footer a {
  color: #a0815f;
}

#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: #464b4f;
  color: #babec2;
  outline: 0;
}

.splash .favorite li:nth-of-type(odd) a:hover,
.splash .favorite li:nth-of-type(odd) a:focus {
  background: #464b4f;
  color: #babec2;
  outline: 0;
}

#header #greeting img,
#header .heading a,
#header .heading a:visited,
#header .user a:hover,
#header .user .open a:focus,
#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: #ccb680;
  outline: 0;
  box-shadow: 0;
}

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

#dashboard,
#dashboard.own,
.error,
.comment_error,
.kudos_error,
#header .actions .current,
.qtip-content {
  border-style: solid;
  border-image: linear-gradient(to right, #babec2, #464B4F) 1;
}

.comment h4.byline,
ul.abbreviated.comment.group .icon,
ul.abbreviated.comment.group .icon:focus,
ul.abbreviated.comment.group .icon:hover {
  border-bottom: 0px;
  background: transparent;
}

.comment h4.byline,
ul.abbreviated.comment.group .icon.a,
ul.abbreviated.comment.group .icon.a:hover,
ul.abbreviated.comment.group .icon.a:focus {
  background: transparent;
  border: 0px;
}

.icon,
.comment div.icon {
  border-radius: 50%;
  border: 0;
}

input[type=radio] {
  accent-color: #b8860b;
}

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: #b8860b;
  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: #babec2;
  outline: 0;
  box-shadow: none;
}

#header .primary.navigation.actions a:hover,
#header .dropdown .menu a:hover,
ul.navigation.actions li:hover {
  color: #b8860b;
  outline: 0;
  box-shadow: none;
}

a,
.actions a:visited,
.action a:link,
.action a:visited,
.listbox .heading a:visited,
div.primary.header.module a,
div.primary.header.module a:hover {
  color: #ccb680;
}

span.series .divider {
  color: #babec2;
  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: #464b4f;
  background-image: linear-gradient(to right, #464b4f, #222222);
  border-color: transparent;
  color: #ccb680;
  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: #222222;
  background-image: linear-gradient(to right, #222222, #464b4f);
  color: #ccb680;
  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;
}

#header .actions a,
#footer .secondary a {
  text-shadow: none;
  color: #babec2;
  background: none;
  outline: 0;
}

h2.heading a {
  text-decoration: none;
  border-bottom: 0;
}

div.primary.header.module {
  font-style: italic;
  text-shadow: none;
  color: #babec2;
  border-radius: 10px;
  background: linear-gradient(192deg,rgba(186, 190, 194, 0.5) 50%, rgba(70, 75, 79, 0.5) 100%);
  outline: 0;
}

outer .group .heading,
fieldset.listbox .heading,
.userstuff .heading,
.heading,
.userstuff h2 {
  text-shadow: none;
  color: #b8860b;
  background: none;
  outline: 0;
}

#footer .group .heading {
  text-shadow: none;
  text-align: center;
  padding: 5px;
  color: #ccb680;
  background: #222222;
  background-image: linear-gradient(to right, #222222, #464b4f);
  outline: 0;
  border-radius: 5%;
}

#footer .group .heading:hover {
  background: #222222;
  background-image: linear-gradient(to right, #464b4f, #222222);
}

#footer li.module.group {
  background: #080808;
  background-color: rgba(8, 8, 8, 0.85);
  outline: 0;
  border-radius: 5%;
  box-shadow: 10px 10px 50px 15px black;
}

#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: #ccb680;
}

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

.announcement .userstuff a:visited {
  color: #91989e;
}

.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(38, 38, 38, 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: #020202;
  background: #ccb680;
}

::selection {
  color: #020202;
  background: #ccb680;
}

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

::-webkit-scrollbar-track {
  background: #020202;
  background-image: linear-gradient(#222222, #020202);
}

::-webkit-scrollbar-thumb {
  background: #ccb680;
  background-image: linear-gradient(#ccb680, #b8860b);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #fff6d8;
  background-image: linear-gradient(#fff6d8, #b8860b);
}

Work Skin CSS

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

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

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

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

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

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

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

#workskin #chapters hr.goldwaves {
  border: 0;
  height: 20px;
  background: url("https://static.tumblr.com/0fultrp/gLntdmg4d/goldwaves.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: #020202;
  background: #ccb680;
}

#workskin ::selection {
  color: #020202;
  background: #ccb680;
}

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

#workskin ::-webkit-scrollbar-track {
  background: #020202;
  background-image: linear-gradient(#222222, #020202);
}

#workskin ::-webkit-scrollbar-thumb {
  background: #ccb680;
  background-image: linear-gradient(#ccb680, #b8860b);
  border-radius: 10px;
}

#workskin ::-webkit-scrollbar-thumb:hover {
  background: #fff6d8;
  background-image: linear-gradient(#fff6d8, #b8860b);
}

#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(41, 41, 41, 0.50);
  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 ♥