Blue Archive Work Skin

RangHo Lee

Summary:

A work skin for fics based on Blue Archive.

Use the blockquote element with the momotalk class to typeset MomoTalk chat messages. See the example below.

Yuuka 유우카

안녕하세요, 선생님. 유우카입니다.

Yuuka 유우카

저 기억하고 계시죠?

아아, 당연하지.

Yuuka 유우카

뭐, 그럼 다행이구요.

Yuuka 유우카

선생님의 연락처를 받아두길 잘했네요.

모모톡으로 연락드린 건 다름이 아니라⋯⋯.

지난번 샬레 탈환 당시 사용했던 탄환의 경비 처리가 늦어지고 있어서요.

Yuuka 유우카

경비는 언제쯤 청구받을 수 있을까요?

이쪽에서 처리해야 하는 거였어⋯⋯?

Yuuka 유우카

물론이죠. 탄환도 공짜는 아니니까요.

청구서를 작성해서 보내주시면 총학생회에서

대신 잔금을 치러줄 거예요.

청구서는 어떻게 써야 하지⋯⋯.

Yuuka 유우카

청구서 양식이라면 밀레니엄 학원에서 쓰는 것이 있어요.

다음에 샬레를 방문할 때 가져다드릴게요.

도와줘서 고마워.

Yuuka 유우카

어려운 일도 아닌걸요.

그럼 좋은 하루 되세요.

#workskin {
  --momotalk-profile-size: 4rem;
  --momotalk-profile-border-radius: calc(var(--momotalk-profile-size) / 2);
  --momotalk-profile-chat-margin: calc(var(--momotalk-profile-size) * 1.25);
}

#workskin blockquote.momotalk {
  position: relative;
  width: fit-content;
  max-width: 75%;
  margin: 1.5em auto;
  margin-inline: 0;
  padding: 0;
  border-inline: none;
  font-family: "경기천년제목OTF", "GyeonggiTitleOTF", "경기천년제목TTF", "GyeonggiTitleTTF", "경기천년제목", "GyeonggiTitle", sans-serif;
}

#workskin blockquote.momotalk > p {
  display: block;
  margin: 0.25em auto;
  padding: 0.75em;
  border-radius: 0.5em;
}

#workskin blockquote.momotalk.student {
  margin-left: 1em;
  margin-right: auto;
}

#workskin blockquote.momotalk.student > img {
  position: absolute;
  width: var(--momotalk-profile-size);
  height: var(--momotalk-profile-size);
  border-radius: var(--momotalk-profile-border-radius);
  object-fit: cover;
  object-position: center;
}

#workskin blockquote.momotalk.student > span {
  font-weight: bold;
}

#workskin blockquote.momotalk.student > img ~ span {
  margin-left: var(--momotalk-profile-chat-margin);
}

#workskin blockquote.momotalk.student > p {
  color: #ffffff;
  background: #4c5b70;
}

#workskin blockquote.momotalk.student > img ~ p {
  margin-left: var(--momotalk-profile-chat-margin);
}

#workskin blockquote.momotalk.student > p:first-of-type::before {
  content: '';
  position: absolute;
  left: -0.8em;
  width: 0;
  height: 0;
  border: solid 0.5em transparent;
  border-right-color: #4c5b70;
}

#workskin blockquote.momotalk.student > img ~ p::before {
  margin-left: var(--momotalk-profile-chat-margin);
}

#workskin blockquote.momotalk.sensei {
  margin-left: auto;
  margin-right: 1em;
}

#workskin blockquote.momotalk.sensei > p {
  color: #ffffff;
  background: #4a8aca;
}

#workskin blockquote.momotalk.sensei > p:first-of-type::after {
  content: '';
  position: absolute;
  right: -0.8em;
  width: 0;
  height: 0;
  border: solid 0.5em transparent;
  border-left-color: #4a8aca;
}