AO3 Work Skin - Disco Elysium

/* Sets default text color & bg color. Handles gray sidebars, bg tick marks. */
#workskin {
  background-color: #222222;
  color: #cfd5bf;
  background-image: repeating-linear-gradient(180deg, #939593 0, #939593 1.25em, transparent 0, transparent 1.75cm), repeating-linear-gradient(180deg, #5d6163 0, #545758 2px, transparent 0, transparent .5cm), linear-gradient(90deg, #616364 0, #616364 .75em, transparent .75em), linear-gradient(270deg, #616364 0, #616364 .75em, transparent .75em), repeating-linear-gradient(180deg, #393734 0, #393734 2px, transparent 0, transparent 2.5cm), repeating-linear-gradient(180deg, #393734 0, #393734 2px, transparent 0, transparent .5cm);
  background-position: 100% 0, 0 20px, 0 0, 0 0, 0 10px, 0 10px;
  background-size: .2em 100%, .3em 100%, 100% 100%, 100% 100%, 2.25em 100%, 1.2em 100%;
  background-repeat: no-repeat;
}

/* Planchette thingy on left + fake scrollbar. Adds spacing to prevent work text butting up against background details.
   Using ".userstuff.module" / "#chapters div.userstuff" makes sure notes/endnotes don't get squeezed. */
#workskin #chapters div.userstuff,
#workskin .userstuff.module {
  background-image: conic-gradient(from 170deg, rgba(112, 112, 92, .5) 0, rgba(112, 112, 92, .5) 5.5%, transparent 5.5%), conic-gradient(from 170deg, rgba(112, 112, 92, .5) 0, rgba(112, 112, 92, .5) 5.5%, transparent 5.5%), conic-gradient(from 170deg, rgba(112, 112, 92, .5) 0, rgba(112, 112, 92, .5) 5.5%, transparent 5.5%), radial-gradient(.35em .35em, #d5d5c7 0, #d5d5c7 .3em, transparent .35em), linear-gradient(270deg, transparent 0, transparent 1.8em, #616364 1.8em, #616364 1.925em, transparent 1.925em), linear-gradient(270deg, transparent 0, transparent 1.2em, #222 1.2em, #222 2.6em, transparent 2.6em), radial-gradient(0.6em 0.5em, #222 0, #222 0.35em, transparent 0.375em), radial-gradient(0.6em 0.5em, #616364 0, #616364 0.5em, transparent 0.525em), radial-gradient(0.6em 0.5em, #222 0, #222 0.35em, transparent 0.375em), radial-gradient(0.6em 0.5em, #616364 0, #616364 0.5em, transparent 0.525em);
  background-position: 1.5em 0, 1.5em 45%, 1.5em 90%, 100% 100%, 0 50%, 100% 50%, 100% 0, 100% 0, 100% 100%, 100% 100%;
  background-size: .4em 7.5em, .4em 7.5em, .4em 7.5em, 3.725em 5%, 100% 98%, 3.725em 98%, 3.725em 2%, 3.725em 2%, 3.725em 2%, 3.725em 2%;
  background-repeat: no-repeat;
  padding: 0 2.6em;
  width: auto;
}

/* If people are using a site skin w/ custom bg, this ensures summary/notes are the same color as rest of work */
#workskin .group {
  background: #222222;
  color: #cfd5bf;
}

/* Padding on bg details makes long words in title more likely to break weirdly on mobile.
   This restores left-right margin space to title. */
#workskin .preface h2.title {
  margin: .429em -1em;
}

#workskin a,
#workskin ul.associations li {
  color: #cfd5bf;
}

/* For no background at all, delete everything before this comment. See Light Mode section for more. */

/* Selectors setting text indents ↓ */
#workskin #chapters div.userstuff p,
#workskin .userstuff.module p {
  text-indent: -1em;
  margin-left: 1em;
}

#workskin #chapters div.userstuff .indent,
#workskin .userstuff.module .indent {
  text-indent: 0em;
  margin-left: 1em;
}

/* Hides stuff. For readability with workskins turned off */
#workskin .hide {
  display: none;
}

/* Makes dialogue tags bold, ensures they’re all-caps */
#workskin .neutral,
#workskin .int, #workskin .intellect,
#workskin .psy, #workskin .psyche,
#workskin .fys, #workskin .physique,
#workskin .mot, #workskin .motorics {
  text-transform: uppercase;
  font-weight: bold;
}

/* Selectors setting text color ↓ */
#workskin .you {
  color: #c3d2db;
}

#workskin .int,
#workskin .intellect {
  color: #5cc1d7;
}

#workskin .psy,
#workskin .psyche {
  color: #7556cf;
}

#workskin .fys,
#workskin .physique {
  color: #cb476a;
}

#workskin .mot,
#workskin .motorics {
  color: #e3b734;
}

#workskin .check {
  color: #9c9686;
}

#workskin .task {
  color: #93b885;
}

/* For horizontal rules that match the DE aesthetic ↓ */
#workskin hr {
  border: none;
  margin: 2.625em auto 3.0025em auto;
}

#workskin hr:before {
  content: "⎯⎯⎯ ◵ ⎯⎯⎯";
  display: block;
  text-align: center;
  font-size: 1.1em;
}

/* Formats the "End ▉" block ↓ */
#workskin .disco-end {
  background-color: #8f2710;
  display: block;
  width: 97%;
  box-sizing: border-box;
  margin: auto;
  padding: .1em;
}

#workskin .disco-end::after {
  content: 'END \0000a0▉';
  font-family: Dobra, "Dobra Light", Roboto, Arial, sans-serif;
  font-weight: 300;
  font-size: 1.75em;
  padding-left: .75em;
}

/* Selectors for question list/dialogue tree formatting ↓ */
#workskin li {
  color: #222222;
}

/* Makes numbers different color from text */
#workskin li.dialogue::marker,
#workskin li.dialogue-fin::marker {
  color: #cfd5bf;
}

/* Automates hyphens after numbers (1. - ) */
#workskin li.dialogue::before,
#workskin li.dialogue-fin::before,
#workskin span.whitecheck::before,
#workskin span.whitecheck-locked::before,
#workskin span.redcheck::before {
  content: '-\000a0';
  color: inherit;
}

#workskin li, /* Tightens spacing between checks/dialogue */
#workskin .dialogue,
#workskin li.dialogue,
#workskin .dialogue-fin,
#workskin li.dialogue-fin {
  margin-top: 0;
  margin-bottom: 0;
}

#workskin .dialogue,
#workskin li.dialogue {
  color: #d7431b;
  padding: 0.4em 0.4em 0.4em 0;
}

#workskin .dialogue-fin,
#workskin li.dialogue-fin {
  color: #93341a;
  padding: 0.4em 0.4em 0.4em 0;
}

#workskin .dialogue-check,
#workskin li.dialogue-check {
  margin-top: 0.5em;
  margin-bottom: -0.5em;
  position: relative;
  z-index: 0;
}

#workskin .whitecheck,
#workskin .whitecheck-locked,
#workskin .redcheck {
  border-top-right-radius: 20px 20px;
  border-top-left-radius: 20px 20px;
  border-bottom-right-radius: 30px 190px; /* Creates asymmetrical corners */
  border-bottom-left-radius: 30px 190px;
  color: #222222;
  margin-left: -1.75em; /* Stretches background color over number */
  padding: 0.5em 0.5em 0.5em 1.75em;
  display: inline-block;
  line-height: 1.5em;
  width: 90%;
  position: relative;
  z-index: -9;
  vertical-align: text-top;
  top: -0.5em;
}

#workskin .whitecheck {
  background-color: #cdc5b8;
}

#workskin .whitecheck-locked {
  background-color: #cdc5b8;
  color: #7a7468;
}

#workskin .redcheck {
  background-color: #d64121;
}

/* Hover/mouseover effects for dialogue. Delete everything after this comment to turn the effect off. */
#workskin .whitecheck:hover,
#workskin li.dialogue-check:hover > .whitecheck {
  background-color: #868070;
  color: #fefbf4;
}

#workskin .redcheck:hover,
#workskin li.dialogue:hover,
#workskin li.dialogue-fin:hover,
#workskin li.dialogue-check:hover,
#workskin li.dialogue-check:hover > .redcheck {
  color: #fefbf4;
}