bondage-college-mirr/BondageClub/CSS/chat.css

.chat-room-sep {
  padding-left: 3px !important;
  border-bottom: min(0.4vh, 0.2vw) black solid !important;
  border-top: min(0.4vh, 0.2vw) black solid !important;
  position: sticky !important;
  overflow: visible !important;
  top: 0%;
  z-index: 1;
}

.chat-room-sep:has(.chat-room-sep-collapse[aria-expanded="false"]):not(.chat-room-sep-last) {
  border-bottom: unset !important;
}

.chat-room-sep-div {
  width: auto;
  height: 100%;
  display: grid;
  grid-template-columns: 6% auto;
  gap: min(0.4vh, 0.2vw);
  justify-items: center;
  margin-right: 6%;
  background-color: black;
}

.chat-room-sep-div > button {
  width: 100%;
  height: 100%;
  color: gray;
  background-color: var(--base-color);
}

.chat-room-sep-header {
  user-select: all !important;
  align-content: center;
  justify-content: center;
  display: flex;
}

.chat-room-sep-image {
  max-width: 50px;
  max-height: 50px;
  width: 1em;
  height: 1em;
  aspect-ratio: 1 / 1;
  background: gray;
  margin-block: 0.1em;
}

.chat-room-no-copy {
  user-select: none;
}

.chat-room-sep-collapse {
  font-weight: bold;
  text-align: center;
}

#chat-room-div {
  --button-size: min(8vh, 4vw);

  /* Do NOT use min-/max-content for grid rows, as this will cause serious lag related to layour recomputing once the chat log starts to fill up */
  display: grid;
  grid-template-rows: 89.6% 10%;
  gap: 0.4%;
}

#TextAreaChatLog {
  background-color: white;
  border: 1px solid black;
  word-wrap: break-word;
  padding: 0 !important;
  overflow-y: scroll;
}

#chat-room-bot {
  --button-color: white;

  display: grid;
  grid-template:
    "chat-input chat-buttons-div chat-buttons-collapse chat-length" min-content
    "chat-input chat-buttons-div chat-buttons-collapse chat-buttons" min-content
    / auto min-content min-content min-content;
  border: min(0.2vh, 0.1vw) inset black;
  background-color: white;
  column-gap: min(0.4vh, 0.2vw);
}

#chat-room-bot:has(#InputChat:invalid) {
  box-shadow: 0 0 3px 2px #c22;
}

#chat-room-bot:has(#InputChat:focus) {
  outline: 2px solid rgb(0, 96, 223);
  box-shadow: 0 0 0 3px white;
  border-radius: 1px;
}

#chat-room-buttons-div {
  grid-area: chat-buttons-div;
  width: 0;
  border-left: min(0.2vh, 0.1vw) inset black;
  justify-self: center;
}
#chat-room-reply-indicator-text {
  color: var(--base-font-color);
  text-overflow: ellipsis;
  text-wrap: nowrap;
  overflow: hidden;
  flex: 1;
  line-height: 1.6em;
  border: min(0.2vh, 0.1vw) solid black;
  border-right: none;
  user-select: none
}
#chat-room-reply-indicator:not(.hidden) {
  background-color: var(--base-color, #eee);
  position: absolute;
  transform: translateY(-105%);
  width: 100%;
  display: flex;
  height: 1.6em;
}
#InputChat {
  grid-area: chat-input;
  min-height: var(--button-size);
  max-height: calc(4 * var(--button-size));
  font: inherit;
  scrollbar-width: none;
  background: unset;
  color: unset;
  border: unset;
  outline: unset;
}
#chat-room-reply-indicator-close::before {
  content: "❌";
}
#chat-room-reply-indicator-close {
  background-color: var(--base-color, #eee);
  border: min(0.2vh, 0.1vw) solid black;
  cursor: pointer;
  aspect-ratio: 1;
}
#InputChat:focus {
  scrollbar-width: auto;
}

#InputChatLength {
  grid-area: chat-length;
  justify-self: end;
  align-self: flex-end;
  user-select: none;
  padding-right: min(0.5vh, 0.25vw);
}

#InputChatLength.invalid {
  color: #FF0000;
}

#chat-room-buttons-collapse {
  grid-area: chat-buttons-collapse;
  height: 100%;
  width: fit-content;
  font-weight: bold;
}

@media (hover: hover) {
  #chat-room-buttons-collapse:hover {
    background-color: var(--hover-color);
  }
}

#chat-room-buttons-collapse:active,
#chat-room-buttons-collapse[data-active] {
  background-color: var(--hover-color);
}

#chat-room-buttons-collapse:disabled {
  cursor: auto;
  background-color: unset;
  color: var(--disabled-color);
}

#chat-room-buttons {
  grid-area: chat-buttons;
  display: grid;
  direction: rtl;
  align-items: end;
  justify-self: end;
  align-self: flex-end;
  grid-template-columns: repeat(3, min-content);
  grid-template-rows: repeat(auto-fit, min-content);
  gap: min(0.4vh, 0.2vw);
  padding: min(0.4vh, 0.2vw);
}

.chat-room-button {
  height: var(--button-size);
  width: var(--button-size);
}

.chat-room-button::before {
  content: "";
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-position: center;
  background-color: var(--button-color);
  background-blend-mode: multiply;
  background-size: contain;
  mask-position: center;
  mask-size: contain;
}

@media (hover: hover) {
  .chat-room-button:hover::before {
    background-color: var(--hover-color);
  }
}

.chat-room-button:disabled::before,
.chat-room-button[aria-disabled="true"]::before {
  background-color: var(--disabled-color);
}

.chat-room-button:active::before,
.chat-room-button[data-active]::before {
  background-color: var(--hover-color);
}

#chat-room-send::before {
  background-image: url("../Icons/Chat.png");
  mask-image: url("../Icons/Chat.png");
}

.ChatMessage {
  position: relative;
  padding-left: 0.4em;
  overflow: hidden;
}

.ChatMessage::before {
  content: attr(data-time);
  float: right;
  color: gray;
  font-style: italic;
  font-size: 0.5em;
  margin-right: 0.2em;
}

.ChatMessage::after {
  content: attr(data-sender);
  position: absolute;
  color: gray;
  font-size: 0.3em;
  top: 1.6em;
  right: 0.2em;
}

.ChatMessageAction,
.ChatMessageEmote,
.ChatMessageActivity {
  --base-color: white;
  --label-color: rgb(128, 128, 128);

  background-color: var(--base-color);
}
.chat-room-message-reply::before {
  content: "↱";
  position: relative;
  top: 4px
}
.chat-room-message-reply {
  display: block;
  color: gray;
  width: 100%;
  font-size: 0.75em;
  text-align: left;
}
.ChatMessageName {
  text-shadow: 0.05em 0.05em black;
  color: var(--label-color);
  user-select: text;
}

.ChatMessageName:hover {
  color: black;
  text-shadow: 0.05em 0.05em var(--label-color);
}

.ChatMessageAction,
.ChatMessageActivity {
  color: gray;
}

.ChatMessageEmote {
  color: gray;
  font-style: italic;
}

.ChatMessageWhisper {
  font-style: italic;
  color: silver;
}

#TextAreaChatLog[data-shrinknondialogue=true] .ChatMessageEmote {
  font-size: 0.75em;
}

#TextAreaChatLog[data-colortheme=dark],
#TextAreaChatLog[data-colortheme="dark2"] {
  background-color: #111;
  color: #eee;
  --base-color: #111;
  --base-font-color: #eee;
}

#TextAreaChatLog[data-colortheme="dark"]~#chat-room-bot,
#TextAreaChatLog[data-colortheme="dark2"]~#chat-room-bot {
  --button-color: #eee;
  --base-color: #111;
  --base-font-color: #eee;
  background-color: #111;
  border-color: rgba(0, 0, 0, 0.25);
  color: #eee;
}

#TextAreaChatLog[data-colortheme="dark"]~#chat-room-buttons-div,
#TextAreaChatLog[data-colortheme="dark2"]~#chat-room-buttons-div {
  
  border-left: min(0.2vh, 0.1vw) inset rgba(0, 0, 0, 0.25);
}

@media (hover: hover) {
  #TextAreaChatLog[data-colortheme="dark"] .chat-room-sep-header:hover,
  #TextAreaChatLog[data-colortheme="dark2"] .chat-room-sep-header:hover,
  #TextAreaChatLog[data-colortheme="dark"] .chat-room-sep-collapse:hover,
  #TextAreaChatLog[data-colortheme="dark2"] .chat-room-sep-collapse:hover {
    color: #eee;
  }

  #TextAreaChatLog[data-colortheme="dark"] .chat-room-sep-header:hover > .chat-room-sep-image,
  #TextAreaChatLog[data-colortheme="dark2"] .chat-room-sep-header:hover > .chat-room-sep-image {
    background-color: #eee;
  }

  #TextAreaChatLog[data-colortheme="light"] .chat-room-sep-header:hover,
  #TextAreaChatLog[data-colortheme="light2"] .chat-room-sep-header:hover,
  #TextAreaChatLog[data-colortheme="light"] .chat-room-sep-collapse:hover,
  #TextAreaChatLog[data-colortheme="light2"] .chat-room-sep-collapse:hover {
    color: black;
  }

  #TextAreaChatLog[data-colortheme="light"] .chat-room-sep-header:hover > .chat-room-sep-image,
  #TextAreaChatLog[data-colortheme="light2"] .chat-room-sep-header:hover > .chat-room-sep-image {
    background-color: black;
  }
}

#TextAreaChatLog[data-colortheme="dark"] .chat-room-sep-div>.button:active,
#TextAreaChatLog[data-colortheme="dark2"] .chat-room-sep-div>.button:active,
#TextAreaChatLog[data-colortheme="dark"] .chat-room-sep-div>.button[data-active],
#TextAreaChatLog[data-colortheme="dark2"] .chat-room-sep-div>.button[data-active] {
  color: #eee;
}

#TextAreaChatLog[data-colortheme="light"] .chat-room-sep-div>.button:active,
#TextAreaChatLog[data-colortheme="light2"] .chat-room-sep-div>.button:active,
#TextAreaChatLog[data-colortheme="light"] .chat-room-sep-div>.button[data-active],
#TextAreaChatLog[data-colortheme="light2"] .chat-room-sep-div>.button[data-active] {
  color: black;
}

#TextAreaChatLog[data-colortheme="dark"] .ChatMessageName {
  text-shadow: 0.05em 0.05em white;
}

#TextAreaChatLog[data-colortheme="light2"] .ChatMessageName {
  text-shadow: 0 0 0.12em rgba(0, 0, 0, .5);
}

#TextAreaChatLog[data-colortheme="dark2"] .ChatMessageName {
  text-shadow: 0 0 0.12em rgba(255, 255, 255, .4);
}

#TextAreaChatLog[data-colortheme="light"][data-colornames=false] .ChatMessageName:hover {
  text-shadow: 0.05em 0.05em black;
}

#TextAreaChatLog[data-colortheme="dark"] .ChatMessageName:hover {
  color: white;
  text-shadow: 0.05em 0.05em var(--label-color);
}

#TextAreaChatLog[data-colortheme="dark"][data-colornames=false] .ChatMessageName:hover {
  text-shadow: 0.05em 0.05em white;
  outline: black;
}

#TextAreaChatLog[data-colortheme="light2"] .ChatMessageName:hover {
  color: black;
  text-shadow: 0 0 0.12em var(--label-color);
}

#TextAreaChatLog[data-colortheme="light2"][data-colornames=false] .ChatMessageName:hover {
  text-shadow: 0 0 0.12em black;
}

#TextAreaChatLog[data-colortheme="dark2"] .ChatMessageName:hover {
  color: white;
  text-shadow: 0 0 0.12em var(--label-color);
}

#TextAreaChatLog[data-colortheme="dark2"][data-colornames=false] .ChatMessageName:hover {
  text-shadow: 0 0 0.12em white;
}

#TextAreaChatLog[data-colortheme=dark] .ChatMessageWhisper,
#TextAreaChatLog[data-colortheme="dark2"] .ChatMessageWhisper {
  color: gray;
}

#TextAreaChatLog[data-colortheme="dark2"] .ChatMessage,
#TextAreaChatLog[data-colortheme="light2"] .ChatMessage {
  line-height: 1.4em;
  padding: 0.1em;
  padding-right: 2em;
}

#TextAreaChatLog[data-colortheme="light2"] .ChatMessage {
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
}

#TextAreaChatLog[data-colortheme="dark2"] .ChatMessage {
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

#TextAreaChatLog[data-colortheme="dark2"] .ChatMessageEmote,
#TextAreaChatLog[data-colortheme="dark2"] .ChatMessageAction,
#TextAreaChatLog[data-colortheme="dark2"] .ChatMessageActivity,
#TextAreaChatLog[data-colortheme="light2"] .ChatMessageEmote,
#TextAreaChatLog[data-colortheme="light2"] .ChatMessageAction,
#TextAreaChatLog[data-colortheme="light2"] .ChatMessageActivity {
  font-size: 0.8em;
}

#TextAreaChatLog[data-colortheme="dark2"] .ChatMessage::before,
#TextAreaChatLog[data-colortheme="dark2"] .ChatMessage::after,
#TextAreaChatLog[data-colortheme="light2"] .ChatMessage::before,
#TextAreaChatLog[data-colortheme="light2"] .ChatMessage::after {
  position: absolute;
  float: none;
  line-height: 1;
  font-size: 0.5em;
  right: 0.2em;
}

#TextAreaChatLog[data-colortheme="dark2"] .ChatMessage::before,
#TextAreaChatLog[data-colortheme="light2"] .ChatMessage::before {
  top: 0.4em;
}

#TextAreaChatLog[data-colortheme="dark2"] .ChatMessage::after,
#TextAreaChatLog[data-colortheme="light2"] .ChatMessage::after {
  top: 1.6em;
}

#TextAreaChatLog[data-enterleave=smaller] .ChatMessageEnterLeave {
  font-size: 0.5em;
  text-align: center;
}

#TextAreaChatLog[data-shrinknondialogue=true] .ChatMessageNonDialogue {
  font-size: 0.5em;
  text-align: center;
}

#TextAreaChatLog[data-enterleave=hidden] .ChatMessageEnterLeave {
  display: none;
}

#TextAreaChatLog[data-membernumbers=never] .ChatMessage::after,
#TextAreaChatLog[data-membernumbers=onmouseover] .ChatMessage::after {
  display: none;
}

#TextAreaChatLog[data-membernumbers=onmouseover] .ChatMessage:hover::after {
  display: block;
}

#TextAreaChatLog[data-displaytimestamps=false] .ChatMessage::before {
  display: none;
}

#TextAreaChatLog[data-displaytimestamps=false] .ChatMessage::after {
  top: 0;
}

#TextAreaChatLog[data-colornames=false] .ChatMessageName {
  color: inherit !important;
  text-shadow: none;
  font-weight: bold;
}

#TextAreaChatLog[data-coloractions=false] .ChatMessageAction,
#TextAreaChatLog[data-coloremotes=false] .ChatMessageEmote,
#TextAreaChatLog[data-coloractivities=false] .ChatMessageActivity {
  background-color: var(--base-color) !important;
}

#TextAreaChatLog[data-whitespace=preserve] {
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

#TextAreaChatLog[data-colortheme="light"] .ChatMessageAction,
#TextAreaChatLog[data-colortheme="light2"] .ChatMessageAction,
#TextAreaChatLog[data-colortheme="light"] .ChatMessageEmote,
#TextAreaChatLog[data-colortheme="light2"] .ChatMessageEmote,
#TextAreaChatLog[data-colortheme="light"] .ChatMessageActivity,
#TextAreaChatLog[data-colortheme="light2"] .ChatMessageActivity {
  --base-color: white;
}

#TextAreaChatLog[data-colortheme="dark"] .ChatMessageAction,
#TextAreaChatLog[data-colortheme="dark2"] .ChatMessageAction,
#TextAreaChatLog[data-colortheme="dark"] .ChatMessageEmote,
#TextAreaChatLog[data-colortheme="dark2"] .ChatMessageEmote,
#TextAreaChatLog[data-colortheme="dark"] .ChatMessageActivity,
#TextAreaChatLog[data-colortheme="dark2"] .ChatMessageActivity {
  --base-color: #111;
}

.ReplyButton {
  text-decoration: none;
  font-style: normal;
  display: inline;
  cursor: pointer;
  font-size: smaller;
  margin-top: 3px;
  margin-bottom: 3px;
}

.chat-room-changelog {
  background-color: #D696FF;
  white-space: normal;
  font: inherit;
  overflow: visible;
}

.chat-room-changelog + .chat-room-changelog {
  border-top: min(0.4vh, 0.2vw) solid black;
}

#TextAreaChatLog[data-colortheme="dark"] > .chat-room-changelog,
#TextAreaChatLog[data-colortheme="dark2"] > .chat-room-changelog {
  background-color: #481D64;
}

.chat-room-changelog ul {
  margin: unset;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  padding-left: 1em;
  padding-right: 1em;
}

.chat-room-changelog h1,
.chat-room-changelog h2,
.chat-room-changelog h3,
.chat-room-changelog h4,
.chat-room-changelog h5,
.chat-room-changelog h6,
.chat-room-changelog [role="heading"] {
  font-size: inherit;
  margin: unset;
  padding: 0.25em;
  text-align: center;
}

.chat-room-changelog img {
  max-height: 100%;
  max-width: 100%;
}

.chat-room-changelog a {
  color: #003f91;
}

#TextAreaChatLog[data-colortheme="dark"] > .chat-room-changelog a,
#TextAreaChatLog[data-colortheme="dark2"] > .chat-room-changelog a {
  color: #a9ceff;
}

.chat-room-changelog a:visited {
  color: #380091;
}

#TextAreaChatLog[data-colortheme="dark"] > .chat-room-changelog a:visited,
#TextAreaChatLog[data-colortheme="dark2"] > .chat-room-changelog a:visited {
  color: #3d91ff;
}

.chat-room-changelog-button {
  height: 1em;
  width: 1em;
}

.chat-room-changelog-button > .button-label {
  font-size: smaller;
  color: #003f91;
}

#TextAreaChatLog[data-colortheme="dark"] .chat-room-changelog-button > .button-label,
#TextAreaChatLog[data-colortheme="dark2"] .chat-room-changelog-button > .button-label {
  color: #a9ceff;
}

.chat-room-changelog-button:hover > .button-label,
.chat-room-changelog-button[data-active] > .button-label {
  color: #380091;
}

#TextAreaChatLog[data-colortheme="dark"] .chat-room-changelog-button:hover > .button-label,
#TextAreaChatLog[data-colortheme="dark2"] .chat-room-changelog-button:hover > .button-label,
#TextAreaChatLog[data-colortheme="dark"] .chat-room-changelog-button[data-active] > .button-label,
#TextAreaChatLog[data-colortheme="dark2"] .chat-room-changelog-button[data-active] > .button-label {
  color: #3d91ff;
}

.chat-room-changelog-header-div {
  align-items: center;
  display: flex;
  justify-content: center;
}

.chat-room-changelog-header-div > span[aria-hidden="true"] {
  width: 0.5em;
  text-align: center;
  user-select: none;
}

.chat-room-changelog-header-div:has([aria-expanded="false"]) ~ * {
  display: none;
}

.chat-room-changelog-image {
	border: min(0.3vh, 0.15vw) solid black;
	display: block;
	line-height: 0;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

@supports (height: 100dvh) {
  #chat-room-div {
    --button-size: min(8dvh, 4dvw);
  }

  .chat-room-changelog-image {
    border: min(0.3dvh, 0.15dvw) solid black;
  }

  .chat-room-changelog + .chat-room-changelog {
    border-top: min(0.4dvh, 0.2dvw) solid black;
  }
}

@supports (background-color: color-mix(in srgb, black 50%, transparent)) {
  .chat-room-sep-div > button {
    background-color: color-mix(in srgb, var(--base-color) 90%, var(--label-color) 10%);
  }

  .ChatMessageAction,
  .ChatMessageEmote,
  .ChatMessageActivity {
    background-color: color-mix(in srgb, var(--base-color) 90%, var(--label-color) 10%);
  }
}