Actions

Work Header

Rating:
Archive Warning:
Categories:
Fandom:
Additional Tags:
Language:
English
Stats:
Published:
2020-12-07
Words:
1,527
Chapters:
1/1
Comments:
11
Kudos:
125
Bookmarks:
47
Hits:
3,235

Crimson Perfume (Responsive) AO3 Skin

Summary:

An attractive Crimson Rose Perfume Inspired Site Skin; Edited by Hinata28h, based from Reversi by AO3.

Nov.28.2021: Small Update Inside

Work Text:

Crimson Perfume (Responsive) AO3 Site Skin Preview Image

Crimson Perfume (Responsive) AO3 Site Skin Desktop Preview Gif

Crimson Perfume (Responsive) AO3 Site Skin Mobile Preview Gif

Crimson Perfume (Responsive)

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


Rules

There are none since this was a modified edit. Maybe 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

Dec.07.2020: Scrollbars Added
Dec.07.2020: Overflow-y Class Added
Dec.17.2020: Work Skin Added
> Recommended that the alternative <hr> class tags remain for Work Skin to be seen.
> [text-indent] from #chapters removed as it was interrupting the [center] feature.

Dec.23.2020: [text-Indent] & [p.center] Class Added
> [text-indent] for #workskin #chapters div.userstuff p has been re-added.
> [p.center] class for #workskin #chapters div.userstuff p has been added.
> Use <p class="center">text</p> to ensure [text-indent] is not used.

Mar.01.2021:[li.blurb .tags] Class Added
> [li.blurb .tags] code originally by Xparrot

Sept.02.2021:[p class "blkqt" changed to "bqt"] Class Renamed
> Be sure to correct that if you have used this class directly.

Nov.28.2021:["listbox" class adjusted] Class Modified
> Fandom listboxes have been unified in sizing. Adjustment of previous margin and padding gaps fixed.


CSS

#outer .region {
  background: rgba(21,7,21,0.75);
}

#inner {
  background: #210309 url("https://static.tumblr.com/0fultrp/yYAqkwqme/repeating-pattern-backgrounds-tumblr.jpg");
  padding: 24px 16px;
}

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

body,
.group,
.group .group,
.region,
.flash,
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,
div.dynamic,
.dynamic form,
#ui-datepicker-div,
.ui-datepicker table {
  background: #210309;
  color: pink;
  border-color: crimson;
  outline: #0a0103;
  box-shadow: none;
  padding: 5px;
}

#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,
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(33,3,9,.5);
  outline: 0;
}

#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: #0a0103;
  outline: 0;
}

#main a:hover,
.menu a:hover {
  color: #fff;
}

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

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

#header ul.primary,
#footer,
#dashboard ul,
dl.meta,
.group.listbox,
fieldset fieldset.listbox,
#main li.blurb,
form blockquote.userstuff,
div.comment,
li.comment,
.toggled form,
form dl dt,
#inner .module .heading,
.bookmark .status span,
.splash .news li,
.filters .group dt.bookmarker {
  border-color: pink;
}

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

.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,
.own,
.draft,
.draft .unread,
.child,
.unwrangled,
.unreviewed,
.ui-sortable li:hover {
  background: #000;
  border-color: crimson;
  box-shadow: none;
  outline: 0;
}

dl.index dd {
  background: none;
}

. current:hover {
  background: #500716;
}

input,
textarea {
  box-shadow: none;
  outline: 0;
}

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

#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: #b34b5a;
  color: #0a0103;
  outline: 0;
}

.splash .favorite li:nth-of-type(odd) a:hover,
.splash .favorite li:nth-of-type(odd) a:focus {
  background: #b34b5a;
  color: #0a0103;
  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,
a.cloud7,
a.cloud8,
#footer .actions .secondary a,
#tos_prompt .heading {
  color: #b34b5a;
  outline: 0;
}

#greeting .icon,
#dashboard,
#dashboard.own,
.error,
.comment_error,
.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,
#header .actions .current,
.qtip-content {
  border-color: #b34b5a;
}

a,
a:link,
a.tag,
#header a,
#header a:visited,
#header .current,
#dashboard a,
#dashboard span,
#dashboard .current,
.heading,
.group .heading,
.filters dt a:hover {
  color: #ae88aa;
  outline: 0;
}

#header .primary .open a,
#header .primary.navigation.actions a,
#header .primary .dropdown a:focus,
#header #search input:focus,
#header #search input:hover {
  color: #fff;
  outline: 0;
}

#header .primary.navigation.actions a:hover {
  color: #b34b5a;
}

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

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

.actions a:hover,
.actions input:hover,
#dashboard a:hover,
.actions a:focus,
.actions input:focus,
#dashboard a:focus {
  background: #500716;
  color: #eee;
  border-color: #000;
  box-shadow: none;
  outline: 0;
}

.actions a:active,
.current,
a.current,
.current a:visited {
  color: crimson;
  background: pink;
  border-color: #fff;
  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: #fff;
  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: crimson;
}

.mce-container input:focus {
  background: rgb(80,7,22);
}

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

.announcement .userstuff a:visited {
  color: #b76e79;
}

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

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

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

.userstuff hr,
#chapters hr {
  border: 1px dotted crimson;
}

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

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

#chapters .overflow {
  border: 1px dotted crimson;
  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: crimson;
  background: black;
}

::selection {
  color: crimson;
  background: black;
}

::-webkit-scrollbar {
  height: 15px;
  width: 15px;
  border: 5px solid rgb(80,7,22);
  background: rgb(220,20,60);
}

::-webkit-scrollbar-thumb {
  background: rgb(220,20,60) padding-box;
  border: solid rgb(80,7,22);
  border-width: 6px 0;
}

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

Work Skin CSS


#workskin #chapters hr {
  border: 1px dotted crimson;
}

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

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

#workskin #chapters hr.scissors:after {
  content: '\002702';
  display: inline-block;
  position: relative;
  top: -12px;
  left: 40px;
  color: #dc143c;
  font-size: 18px;
}

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

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

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

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

#workskin #chapters hr.redorb {
  background: url("https://static.tumblr.com/0fultrp/aUMqlh7kw/dark_red_orb_by_kayosa-stock.gif") no-repeat top center;
  background-size: contain;
  display: block;
  height: 18px;
  border: 0;
  position: relative;
}

#workskin #chapters hr.redorb:before,
#workskin #chapters hr.redorb:after {
  content: '';
  display: block;
  position: absolute;
  background: #0a0103;
  height: 2px;
  top: 8px;
}

#workskin #chapters hr.redorb:before {
  left: 0;
  right: 50%;
  margin-right: 10px;
}

#workskin #chapters hr.redorb:after {
  right: 0;
  left: 50%;
  margin-left: 10px;
}

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

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

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

#workskin #chapters blockquote {
  border-left: 1px dotted crimson;
  padding-left: 5px;
}

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

#workskin #chapters .overflow {
  border: 1px dotted crimson;
  margin-bottom: 10px;
  width: 100%;
  height: 200px;
  overflow-y: scroll;
  -webkit-user-select: all;
  user-select: all;
}

#workskin ::-moz-selection {
  color: crimson;
  background: black;
}

#workskin ::selection {
  color: crimson;
  background: black;
}

#workskin ::-webkit-scrollbar {
  height: 15px;
  width: 15px;
  border: 5px solid rgb(80,7,22);
  background: rgb(220,20,60);
}

#workskin ::-webkit-scrollbar-thumb {
  background: rgb(220,20,60) padding-box;
  border: solid rgb(80,7,22);
  border-width: 6px 0;
}

#workskin audio {
  width: 50%;
}

#workskin audio:focus {
  outline: none;
}

♥ Enjoy ♥