Archive of Our Own ^beta

Chapter Text

Demo

Red and white checks:

The Code

For details on how to create a work skin and apply it to your fic, see this official AO3 guide. Once you’ve got one up and going, copy and paste the following into it. You can also get it at Pastebin.

(Note that my comments (between the /* */) will disappear once you save the work skin. They’re mostly just me reminding myself what all my margin/padding properties were for because that’s always the first thing I forget about a stylesheet.)

/* 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;
}

/* 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;
}

Details/Walkthrough

The selectors are as follows:

• int / intellect – for Intellect-related skills (Harry’s are Logic, Encyclopedia, Rhetoric, Drama, Conceptualization, and Visual Calculus)
• psy / psyche – for Psyche-related skills (Volition, Inland Empire, Empathy, Authority, Esprit de Corps, and Suggestion)
• fys / physique – for Physique-related skills (Endurance, Pain Threshold, Physical Instrument, Electrochemistry, Shivers, and Half Light)
• mot / motorics – for Motorics-related skills (Hand/Eye Coordination, Perception, Reaction Speed, Savoir Faire, Interfacing, and Composure)
• you – for dialogue said directly by the player
• neutral – for non-Skill dialogue
• check – for the passive skill check indicators, i.e. [Medium: Failure]
• dialogue and dialogue-fin – for dialogue options; dialogue is for "unasked" questions and dialogue-fin is for questions that have been asked already
• task – for Item Gained, Task Gained/Updated/Completed, and XP Gained lines
• redcheck, whitecheck, and whitecheck-locked – for the active red and white checks
• indent – for a secondary paragraph, i.e. for when the narration goes on for long enough that there’s a paragraph break, creating a paragraph without a dialogue tag of its own
• disco-end – for the big “end” block/button

Using the Selectors

Example:

Example work code:

<p><span class="psy">INLAND EMPIRE</span> – You should totally sing karaoke here, the first chance you get. Your emotions need to be expressed. People need to know of your vast, oceanic soul.</p>

<p class="you"><span class="neutral">YOU</span> – My soul's cubic content is obscured by the hangover.</p>

<p><span class="psy">INLAND EMPIRE</span> – Of course. At this point, precise measurements of your soul can only be performed from the outside. It needs to be heard.</p>

<p class="indent"><span class="hide">INLAND EMPIRE – </span>Through a PA system.</p>

<p class="indent"><span class="hide">INLAND EMPIRE – </span>By other people.</p>

<p><span class="fys">HALF LIGHT</span> <span class="check">[Medium: Success]</span> – Whether they like it or not. Ram it up their adrenaline gland. Violently express yourself.</p>

<ol>

   <li class="dialogue-fin">This goes well with a theory I'm developing: that I'm a down-on-my-luck superstar person.</li>

   <li class="dialogue">What should I sing, when it comes to it?</li>

</ol>

<p class="you"><span class="neutral">YOU</span> – What should I sing, when it comes to it?</p>

<p><span class="psy">Inland Empire</span> – You should sing the sad, small church song, duh. Thought it was obvious...</p>

<p class="you"><span class="neutral">YOU</span> – Of course! They'll really get a gauge on my soul with that one.</p>

<p><span class="psy">Inland Empire</span> – Serves them right! Wipe that smirk off their face with your sad, tragic small church song. Who's laughing now? No one.</p>

<p class="task">TASK GAINED: Sing karaoke</p>

<div class="disco-end"></div>

Most paragraphs are formatted like Inland Empire and Half Light’s, with a <span> element around the dialogue tag. Paragraphs without a dialogue tag are indented by attaching the indent selector to the <p> element — <p class="indent">.

YOU paragraphs and task lines are a little different because the entire paragraph is a different color, not just the nametag. Attach the selector to the <p> element (<p class="you">) rather than wrapping the line in a <span class="you"> tag to keep your code cleaner. (Same for the dialogue options; more on them in the next section.) Then make sure that "YOU" is bolded by wrapping it in <span class="neutral"></span>. (You could use <strong> instead; however, if you do that, the "You" lines will be the only thing bolded for people reading with work skins turned off, and it’ll look weird.)

Notice the <span class="hide">INLAND EMPIRE – </span> code on the indented paragraphs. This is something I like to do for the secondary paragraphs without regular dialogue tags. With the work skin turned on, any text with class hide will be, well, hidden from view. But if someone is browsing with work skins off, the text within will be visible to them, making it clear those paragraphs are still Inland Empire talking. (You can check this out by scrolling up, hitting "Hide Creator’s Style", and scrolling back down to this section’s example.) Optional — you can just use indent — but I think it’s a nice touch. Of course, if you’re doing a mixed game format style with prose interludes, no need to bother with indented paragraphs or hidden dialogue tags at all. The selectors are your oyster.

As a final just-for-fun touch, the “End” block can be popped in wherever you want; just insert the code <div class="disco-end"></div> anywhere, no need to write anything inside the div.

Dialogue & Red/White Checks

Example:

Example work code:

<ol>

  <li class="dialogue-fin">Look at the zoning plan.</li>

  <li class="dialogue-fin">"Kim, what do you think of this?"</li>

  <li class="dialogue-check"><span class="whitecheck">[Logic - Challenging 11] Try to find a loophole in the deal.</span></li>

  <li class="dialogue-check"><span class="whitecheck-locked">[Locked] Try to find a loophole in the deal.</span></li>

  <li class="dialogue-check"><span class="redcheck">[Interfacing - Challenging 12] Okay, let's do this! (Commence the forgery.)</span></li>

  <li class="dialogue">Put the documents back in the envelope. [Leave.]</li>

</ol>

Some notes:

• Every list item needs a class expressing the type of dialogue, i.e. dialogue, dialogue-fin, and dialogue-check. These need to go on the <li> elements, not <span> elements, or the number will be the wrong color.
• For checks, use <span> elements with a whitecheck, whitecheck-locked, or redcheck class.
• The hyphens after numbers are automatic for all dialogue options.

There’s a few different ways writers like to indicate which option in a dialogue tree Harry ends up choosing, but with this skin the best way to do indicate it is probably to write it out below the list of choices in a YOU paragraph.

For silly reasons*, the hyphen after the numbers is automatic for dialogue/dialogue-fin options BUT you have to add it manually on red, white, and locked white checks. Sorry. (* Namely, using ::before and ::marker to do the hyphens rather than counter() (banned on AO3) causes the background of the span element to be stacked above the ::marker element, hiding the number. As far as I know ::marker can’t be used with z-index, leaving me slightly stymied for a way to automate the numbering. If someone can figure this out without resorting to faking the ol with divs (something I avoided doing because using ol is better for readers with work skins turned off and also using div means you have to do numbers manually), my hat is off to you.)

EDIT 26-Apr-2023: I figured it out! You can set position: relative for the li and span classes, then set their relative z-indexes to stack properly. The ::before tidbit, which is where the actual hyphen is stored, needs to be set to the span rather than the li or else it kinda goes a bit crazy; then just a little margin/padding jiggering after that to get everything to line up. Since the parent element (in this case the li) is now on top of the child element (the actual color blocks), you can then set hover on the parent element and use the child combinator (li:hover > span) to only change the styling of the child element.

Background Options / Light Mode

If you don’t want the extra details in the background, you can replace the first two CSS rules with one of the following alternatives.

No scrollbar or left-side pointer mark:

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

#workskin #chapters div.userstuff,
#workskin .userstuff.module {
  padding: 0 2.6em;
  width: auto;
}

Gray sidebars only:

#workskin { 
  background-color: #222222;
  color: #cfd5bf;
  background-image:linear-gradient(90deg, #616364 0, #616364 .75em, transparent .75em), linear-gradient(270deg, #616364 0, #616364 .75em, transparent .75em);
  background-position: 0 0, 0 0;
  background-size: 100% 100%, 100% 100%;
  background-repeat: no-repeat;
}

#workskin #chapters div.userstuff,
#workskin .userstuff.module {
  padding: 0 2.6em;
  width: auto;
}

Just the dark background, no extra details:

#workskin { 
  background-color: #222222;
  color: #cfd5bf;
}

#workskin #chapters div.userstuff,
#workskin .userstuff.module {
  padding: 0 2.6em;
  width: auto;
}

If the dark background isn’t your style at all, you can delete the first five CSS rules entirely (see the comment in the CSS code). Most of the selectors show up reasonably well on a light background:

To change the colors of the numbers on dialogue options from white to black, you will want to find the rules targeting ::marker and ::before and change them to the following:

#workskin li.dialogue::marker, 
#workskin li.dialogue-fin::marker {
  color: #000000;
}

#workskin li.dialogue::before,
#workskin li.dialogue-fin::before {
  content: '-\000a0';
  color: #000000;
}

The redcheck and whitecheck hovers are still readable, but if you want to turn off specifically the dialogue/dialogue-fin hovers for contrast reasons, delete the comma and the selector #workskin li:hover from the final CSS rule so it appears like so:

#workskin .redcheck:hover {
  color: #fefbf4;
}

For a more subtle but higher-contrast version of intellect, psyche, physique, motorics, you, task and check, the hex codes for the “grayed-out” versions work well. They’ll show up like this:

Replace some or all of their CSS rules with the following:

#workskin .you {
  color: #737d83;
}

#workskin .int,
#workskin .intellect {
  color: #258ba1;
}

#workskin .psy,
#workskin .psyche {
  color: #463578;
}

#workskin .fys,
#workskin .physique {
  color: #762d40;
}

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

#workskin .check {
  color: #514d44;
}

#workskin .task {
  color: #6d8663;
}

Serif Font Options

I chose not to make the typeface a serif by default because AO3’s default typeface is easier to read than most of the good substitutes for Sina Nova, and I don’t think the serif is a crucial part of the aesthetic. However, if you’re committed, I have a serviceable font stack for you. (Also, you can get Sina Nova yourself legally for free here at FontSquirrel.) Add the following two lines to the first CSS rule:

  font-family: "Sina Nova", "Libre Baskerville", Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Bookman Old Style", "Times New Roman", serif; 
  font-size: 1.1em;

And this is what it will look like on your machine:

font-size: 1.1em; is a compromise between Sina Nova being an oddly small typeface and the other fonts in the stack (which people are more likely to have installed) being larger. Feel free to bump it up if it’s still too small for you; 1.3em is about as high as I’d go, keeping in mind that 2em is title-size.

Final note: if you like the little dividers I threw in here and used in la bibliothéconomie, tack this onto the end of the workskin. I didn’t put them in by default because they’re my invention & not exactly in the spirit of “replicate the Disco Elysium text precisely”, but they’re cute. I like that ◵ / U+25F5 looks a bit like the device on Kim’s jacket.

#workskin hr {
  border: none;
  margin: 2.625em auto 3.0025em auto;
}

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

Chapter Text

KIM KITSURAGI – “That would just escalate tensions. No captain would sign off on it. Solving one murder isn’t worth a conflict between the RCM and the Débardeurs’ Union.”

“In fact, even the *death* of two detectives might not warrant an all-out war. So let’s keep a cool head, okay?”

HALF LIGHT [Medium: Success] – He’s not exaggerating about that mortal danger. Just calmly factoring it in. Your fists clench and your pulse rises uncomfortably.

1. “Why do we need to talk to them?”
2. “What do you mean ‘rowdy’?”
3. “Are those the men Garte told us about yesterday?”
4. “There are so many of them. Maybe we should call in reinforcements?”
5. “Let’s roll.” [Leave.]

YOU – “Let’s roll.”

KIM KITSURAGI – “One more thing before we do…” He glances at the booth again. “We don’t have to talk to them immediately. We can walk right past them, continue with our business.”

AUTHORITY [Easy: Success] – Good. A power move. *Purposefully* concentrate on something else first.

REACTION SPEED [Easy: Success] – Yeah — streetwise. Zoom right past, do it on your own terms.

LOGIC [Easy: Success] – But… aren’t you *curious* to know what they have to say about the murder?

KIM KITSURAGI – “They’re in no hurry to leave — they think they own the place… Anyway, I leave that choice to you. Whatever you decide is fine by me.”

TASK COMPLETED: Find out who is in the Union Box

 

This is the version I used for la bibliothéconomie, and I’m going to level with you: this is a way hackier implementation than the other one. The original margin spacing on the beginning and ending divs has already broken once since I finished the style in January 2022 and had to be redone, so I really can’t make any guarantees here.

Other than that, the biggest difference between the FELD Playback version and the default version is the default version’s background is contiguous from the title all the way down to the endnotes, while the FELD Playback background applies only to the body text of a chapter, as shown below (click on images to see full-size).

Unlike in the default version, where you don’t have to do anything to make the background happen, for this one you have to set up <div> elements for the background and the two FELD overlays (it’s only three divs, but still). If you have multiple chapters, you’ll have to add the divs to every chapter.

All the selectors work the same way as with the default version. You can also make this work skin’s typeface serif the same way as with the other one. The only things that don’t work are the background options: there’s no simplified FELD or light-mode FELD.

FELD Playback Code

Create a new workskin (don’t add it into a workskin already containing the default version) and copy-paste the contents of this Pastebin into it. The unique selectors in this workskin are:

• feld-overlay-start – the beginning overlay
• feld-body – surrounds the main body of the chapter
• feld-overlay-end – final overlay

And you’ll use them in your fic like so:

<div class="feld-overlay-start"></div>

<div class="feld-body">

  <p><span class="neutral">HTML TUTORIAL</span> – Your fic chapter goes in here.</p>

  <p class="you"><span class="neutral">YOU</span> – Makes perfect sense. [Finish thought.]</p>

</div>

<div class="feld-overlay-end"></div>

Note that AO3 adds a <p> element before each <div> automatically. The spacing in the CSS assumes the presence of these extra <p> elements; you shouldn’t need to add them yourself, but if for some reason AO3 is being wonky about it, double-check that your code looks something like this:

<p></p><div class="feld-overlay-start"></div>

<p></p><div class="feld-body">

  <p><span class="neutral">HTML TUTORIAL</span> – Your fic chapter goes in here.</p>

  <p class="you"><span class="neutral">YOU</span> – Makes perfect sense. [Finish thought.]</p>

</div>

<p></p><div class="feld-overlay-end"></div>