Archive of Our Own ^beta

Chapter Text

The following classes do not have a Replika equivalent, but you can add these classes to your CSS should you have need of them.

#workskin .chatMember

This displays the sender's name above their chat bubble. Useful to differentiate people in group chats.

HTML:

  <div class="phone">
    <p class="messagebody">
      <span class="chatHeader">Today<br /></span>
      <br />
      <span class="rightTail">
        <span class="hide"><b>Me: </b></span>Hey, Replika!<br />
      </span>
      <br />
      <span class="chatMember"><b>Replika: </b></span>
      <span class="leftTail">Greetings, human!</span>
      <br />
      <br />
      <span class="chatMember"><b>Developer: </b></span>
      <span class="leftTail">え？グループチャット？まさか！<br /></span><br />
    </p>
  </div>

CSS:

    #workskin .chatMember {
      /* ⚠️ This class alters the chat member names in a group chat. */
      font-size : 10px;
      /* --- Sets the font size of the chat member name. */
      display   : table;
      /* --- Sets how the chat member name is displayed. */
      clear     : both;
      /* --- Sets how the next element will be pushed. */
      margin    : 0 0 -7px 11px;
      /* --- Sets the amount of space around the element. */
      padding   : 2px 2px 5px;
      /* --- Sets the amount of space around the chat member name. */
      text-align: left;
      /* --- Sets the text alignment of the chat member name. */
      color     : rgb(148 150 194);
      /* --- Sets the color of the chat member name. */
    }

#workskin .readreceipt

This displays the read receipt under a chat bubble.

HTML:

<div class="phone">
  <p class="messagebody">
    <span class="rightTail">
      <span class="hide"><b>Me: </b></span>Hey, why aren't you answering me?<br />
    </span>
    <span class="hide">Message was </span><span class="readreceipt">Read <span class="hide">at </span>8:48
      PM</span><br />
  </p>
</div>

CSS:

    #workskin .readreceipt {
      /* ⚠️ This class alters the read receipts. */
      font-size: 9px;
      /* --- Sets the font size of the read receipts. */
      position : relative;
      /* ⛔ RECOMMENDED: DO NOT CHANGE */
      float    : right;
      /* --- Set the property to "left;"" if you want the read receipt to be on the left side. Set the property to "right;" if you want the image to be in one of the right chat bubbles. */
      clear    : both;
      /* --- Sets how the next element will be pushed. */
      margin   : -.75em 0.75em;
      /* --- Sets the amount of space around the element. */
      padding  : 6px 0;
      /* --- Sets the amount of space around the text. */
      color    : #7b7c80;
      /* --- Sets the color of the text. */
    }

#workskin .rightReact

This class is for the emoji reactions located on the right side of the chat bubbles. I don't recommend using actual emojis as they are just sliiightly off-center. (I can't do anything about it bc AO3 doesn't allow the align-content and justify-content properties. ＞︿＜) You can use images instead, here's some sites you can use to find your desired emoji:

• Emoji CSS (Requires the use of "Inspect Element.")
• Emoji Island
• WebFX

HTML:

<div class="phone">
  <p class="messagebody">
    <span class="rightTail"><span class="hide"><b>Me: </b></span>Hey, Replika!<span class="rightReactBG"><img src="https://www.webfx.com/wp-content/themes/fx/assets/img/tools/emoji-cheat-sheet/graphics/emojis/heart_eyes.png" class="rightReact"></span><br />
    </span>
  </p>
</div>

CSS:

#workskin .rightReactBG {
  /* This class is for the emoji reactions located on the right side of the chat bubbles. */
  position     : absolute;
  /* ⛔ RECOMMENDED: DO NOT CHANGE */
  top          : 40%;
  /* --- Sets the amount of space above the element. (Positive values push the reaction background DOWN. Negative values push the reaction background UP.) */
  right        : 100%;
  /* --- Sets the amount of space right of the element. (Positive values push the tails LEFT. Negative values push the tails RIGHT.) */
  display      : inline-block;
  /* --- Sets how the reaction background is displayed. */
  width        : 26px;
  /* --- Sets the width of the reaction background. */
  height       : 26px;
  /* --- Sets the height of the reaction background. */
  margin       : -10px 5px 0 0;
  /* --- Sets the amount of space around the reaction background. */
  color        : #fff;
  /* --- Sets the color of the text (should you choose to use text.) */
  border-radius: 100%;
  /* --- Sets how round the reaction background is. */
  background   : rgb(73, 76, 126);
  /* --- Sets the background of the reaction background. */
}

#workskin .rightReact {
  display: table;
  /* --- Sets how the reaction is displayed. */
  width  : 20px;
  /* --- Sets the width of the reaction. */
  padding: 3px 0 0 3px;
  /* --- Sets the amount of space around the reaction. */
}