Archive of Our Own

Chapter Text

Work Text (HTML):

<details class="log">
  <summary class="button">
    <span class="show-hide">Pesterlog</span>
  </summary>
  <!-- Put your dialog here using your preferred method -->
  <div class="dialog">
    <p class="dirk">TT: Jake.</p>
    <p class="jake">GT: Whats up dirk?</p>
    <p class="dirk">TT: Didn't we have this conversation already?</p>
    <p class="jake">GT: Nope, we—hey wait, yeah we did!</p>
  </div>
</details>

Work Skin (CSS):

/* Button Stuff */
#workskin .button {
  border-radius: 4px;
  border: 1px solid #BBBBBB;
  margin: 1px auto;
  background: linear-gradient(#FFFFFF, #dbdbdb);
  box-shadow: inset 0px -1px #c9c9c9;
  color: #2a2a2a;
  padding: 2px;
  list-style: none;
  display: block;
  text-align: center;
  width: fit-content;
  cursor: pointer;
}

#workskin .button:hover {
  background: grey;
}

/* Show/Hide text */
#workskin .button > .show-hide::before {
  content: "Show ";
}

#workskin details[open] > summary > .show-hide::before {
  content: "Hide ";
}

/* Background */
#workskin .log {
  background: #eeeeee;
  border: gray dashed 0.5px;
}

/* Formats the dialog so you don't have to do each manually */
#workskin .dialog {
  font-weight: bold;
  font-family: "Courier New","CourierPrime",courier,monospace;
  line-height: 1.35;
  padding-right: 2.7em;
  padding-left: 2.7em;
  padding-bottom: 0.7em;
}

#workskin .dialog p {
  margin: 0;
}

/* Add whatever characters you're using. We already did the formatting in the dialog class, so just the colours is okay. */
#workskin .dirk {
  color: #f2a400;
}

#workskin .jake {
  color: #1f9400;
}

Output