templates

Note: After publishing, you may have to bypass your browser's cache to see the changes.

.dialoguebox {
  display: flex;
  gap: 1em;
  align-items: center;
  width: 32em;
}
.page-content .dialoguebox { margin: 1em auto; } /* Overwrite Fandom CSS */
.dialoguebox p { margin: 0; }  /* Overwrite Fandom CSS */
.dialoguebox-txt {
  position: relative;
  background-color: var(--theme-page-background-color--secondary);
  padding: 1ex;
  border-radius: 1ex;
}
.dialoguebox-txt:after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 0;
  border: 1em solid transparent;
  border-right-color: var(--theme-page-background-color--secondary);
  border-left: 0;
  margin-top: -1em;
  margin-left: -1ex;
}
.dialoguebox.rev { flex-flow: row-reverse; }
.dialoguebox.rev .dialoguebox-txt:after {
  right: 0;
  left: unset;
  border: 1em solid transparent;
  border-left-color: var(--theme-page-background-color--secondary);
  border-right: 0;
  margin-right: -1ex;
}
.dialoguebox.add { display: block; }
.dialoguebox.add .dialoguebox-txt:after { display: none; }