style.css

@import url("https://api.fonts.coollabs.io/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap");

:root {
  /* COLORS / THEME */
  --hover: rgba(0, 0, 0, 0.1);
  --accent: #ff1a62;
  --error: #ce1919;
  --servers-bg: #1a1a1a;
  --channels-bg: #141414;
  --foreground: #ffffff;
  --background: #0f0f0f;
  --secondary-background: #1a1a1a;

  /* VARS */
  --border-radius: 5px;
  --img-radius: 5px;
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  background-color: var(--background);
  color: var(--foreground);
  font-family: "Roboto", sans-serif;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img { border-radius: var(--border-radius); }

button,
#input,
.upload-label {
  background-color: var(--secondary-background);
  border: none;
  color: var(--foreground);
  font-size: 0.9em;
  font-family: "Roboto", sans-serif;
  padding: 0.4rem 0.7rem;
}

button {
  cursor: pointer;
}

.login-screen {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

#name,
#desc {
  text-align: center;
}

#name {
  font-size: 4em;
  text-transform: uppercase;
}

.hl { color: var(--accent); }

.login-form {
	width: 450px;
	max-width: 100%;
}

fieldset {
	border:none;
	border-top: 1px solid;
	border-color: #393939;
	padding: 1rem 0;
}

fieldset legend {
	color: #393939;
	font-size: 1.4em;
	padding: 0;
}

.login-sep {
	margin: .7rem 0;
	color: #393939;
	font-weight: bold;
}

#toggleTheme, #toggleToken { outline: none; }

.login-screen input:not(input[type="checkbox"]) {
  color: var(--foreground);
  background: var(--secondary-background);
  border-radius: var(--border-radius);
  line-height: 200%;
  width: 100%;
  border: none;
  padding: 0.3rem .5rem;
  margin: .3rem 0;
}

.login-screen input:focus {
  outline: 1px solid var(--accent);
}

#login-btn {
	width: 100%;
  color: var(--foreground);
  background: var(--secondary-background);
  border-radius: var(--border-radius);
  border: none;
  padding: 0.7rem;
}

#logged {
  display: none;
  -ms-grid-columns: 4rem var(--inner-gap) 14rem var(--inner-gap) 1fr;
  grid-template-columns: 4rem 14rem 1fr;
  height: 100%;
}

#info {
  height: 100%;
  background: var(--servers-bg);
  border-radius: var(--border-radius);
  overflow-y: auto;
}

#servers {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.5rem;
}

#servers button {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  display: -ms-grid;
  display: grid;
  place-content: center;
  padding: 0.1rem;
  border: none;
  border-radius: var(--img-radius);
}

.server {
  width: 45px;
  height: 45px;
  border-radius: var(--img-radius);
  -webkit-box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px,
    rgb(51, 51, 51) 0px 0px 0px 3px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px, rgb(51, 51, 51) 0px 0px 0px 3px;
  -webkit-transition: 0.1s;
  -o-transition: 0.1s;
  -o-object-fit: cover;
     object-fit: cover;
  transition: 0.1s;
}

/* .active-server { */
/*     box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px, var(--accent) 0px 0px 0px 3px; */
/* } */

.server:hover {
  -webkit-box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px,
    var(--accent) 0px 0px 0px 3px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px,
    var(--accent) 0px 0px 0px 3px;
}

.server-hr { width: 20px; }

#chanName { font-size: 1.4em; }

#channels, .channel-category {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.3rem;
}

#channels { gap: 1rem; }

.channel-category summary { cursor: pointer; }

.channel,
#dms {
  border-radius: var(--border-radius);
  border: none;
}

#dms {
  width: 100%;
  background: var(--accent);
  color: var(--foreground);
  font-weight: bold;
  padding: 0.7rem 0;
}

.channel {
	width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 0.4rem 0;
  margin: 0.3rem 0;
  color: var(--foreground);
  font-weight: normal;
  -webkit-transition: 0.1s;
  -o-transition: 0.1s;
  overflow: hidden;
  transition: 0.1s;
  text-align: left;
}

#channels button::before {
  content: "# ";
  font-size: 1.1em;
  padding: 0 0.6rem;
}

#channels button:hover {
  background: var(--hover);
}

.current-channel {
	background: red;
}

#info,
#channelInfo,
#central {
  height: 100%;
}

#central {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

#channelInfo {
  padding: 0 0.4rem;
  border-radius: var(--border-radius);
  background: var(--channels-bg);
  overflow-y: auto;
}

/* -- CHAT -- */
#userProfile {
  display: none;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: var(--servers-bg);
  text-align: center;
}

.profile-top {
  height: 15rem;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 1rem;
  padding: 1rem;
}

.profile-name {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1rem;
}

#profilePicture {
	--ratio: 70px;
	width: var(--ratio);
	height: var(--ratio);
	object-fit: cover;
}

#bio {
  width: 80%;
  max-height: 15rem;
  padding: 0 1rem;
  overflow: auto;
}

.userdata {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.chat-pfp {
  --ratio: 40px;
  width: var(--ratio);
  height: var(--ratio);
  -o-object-fit: cover;
     object-fit: cover;
  cursor: pointer;
}

.username {
	font-weight: bold;
	background: none;
}

.username:hover {
  text-decoration: underline;
}

.app-status {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  color: currentColor;
  opacity: .5;
}

.app-status > * {
  margin: 0;
}

#messages {
  white-space: pre-line;
  overflow: auto;
  -ms-overflow-style: none;
  height: 0;
  overflow-y: scroll;
  -webkit-box-flex: 1;
  -ms-flex: auto;
  flex: auto;
  padding: 1rem 0;
}

.message-display {
  padding: 0.3rem 1rem;
  margin: 0.3rem 0;
}

.message-display:hover {
  background-color: var(--hover);
}

.message-display:hover .reply-btn {
  display: block;
}

.message-content {
  margin-top: 0.3rem;
  margin-bottom: 0;
}

.mention-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.message-attachments {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  align-items: flex-start;
  gap: .3rem;
}

.message-attachments img {
  max-width: 550px;
  max-height: 550px;
  object-fit: contain;
}

.reply-btn {
  display: none;
}

.reply-content {
  color: hsl(0, 0%, 70%);
  font-style: italic;
  padding-top: 0.3rem;
}

#typingBarContainer, 
#typingBarContainer div,
#typingBarContainer > span {
  display: flex;
  align-items: center;
}

#typingBarContainer {
  display: none;
  padding: 1ch;
  gap: .5ch;
}

#typingBarContainer > span {
  gap: 1ch;
}

#typingBarContainer div {
  gap: .5ch;
}

#typingBarContainer img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

#messagebar {
  font-size: 1.3rem;
}

.messagebar-container button,
#input,
.upload-label {
  color: white;
  background-color: var(--secondary-background);
  border: none;
  padding: 0.7rem;
}

#upload {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}

#input {
  width: 100%;
  outline: none;
  font-size: initial;
}

.send-btn {
  padding-left: 1rem;
  padding-right: 1rem;
}

.toolbar {
  display: none;
}

.show-toolbar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.error-container {
  display: none;
  background: var(--error);
  padding: 1rem;
}

.error-content { margin: 0; }

.replying-container {
  background: var(--secondary-background);
}

.replying-content {
  padding: .4rem 1rem;
}

.replying-content::before {
  content: "> ";
}

.replying-container p {
  margin: 0;
}

#messagebar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.mention {
  color: color-mix(in srgb, var(--accent) 70%, white);
  background: #ff1a6354;
  border-radius: 5px;
  padding: 0.1rem .3rem;
  font-weight: bold;
}