not so initial commit

public/pfps/dicor_files/index.css

@@ -0,0 +1,209 @@
+/* src/style.css */
+:root {
+  --brand-color: #a200ff;
+}
+
+* {
+  margin: 0;
+}
+
+html {
+  color: #fff;
+  background-color: #333;
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+.mentions {
+  color: #fff;
+  display: flex;
+  background-color: #ff1717;
+  border-radius: 50%;
+  justify-content: center;
+  align-items:  center;
+  width: 15px;
+  height: 15px;
+  padding: 2px;
+  font-size: 14px;
+}
+
+.channel-bar {
+  position: absolute;
+  width: 200px;
+  padding: 5px;
+  right: calc(100% - 250px);
+}
+
+.pillWrapper {
+  contain: layout size;
+  display: flex;
+  overflow: hidden;
+  position: relative;
+  justify-content: flex-start;
+  align-items:  center;
+  width: 8px;
+  height: 100%;
+}
+
+.pill {
+  opacity: 0;
+  background-color: #fff;
+  border-radius: 0 4px 4px 0;
+  width: 8px;
+  height: 0;
+  transition: height .2s, translate .3s, opacity .1s;
+}
+
+.pill.unread {
+  opacity: 1;
+  height: 8px;
+}
+
+.pill.hover {
+  opacity: 1;
+  height: 20px;
+}
+
+.pill.open {
+  opacity: 1;
+  height: 40px;
+}
+
+.channel .mentions {
+  position: relative;
+  bottom: 27px;
+  left: 85%;
+}
+
+.channel .pillWrapper {
+  position: relative;
+  height: 17px;
+  top: 9px;
+  right: 2px;
+}
+
+.channel .channelname {
+  position: relative;
+  top: -10px;
+  left: 10px;
+}
+
+.server-bar {
+  position: absolute;
+  width: 50px;
+  left: 0;
+}
+
+.guild {
+  width: 40px;
+  height: 40px;
+  font-size: 12px;
+}
+
+.guild .guildname {
+  position: relative;
+  top: -20px;
+  right: -10px;
+}
+
+.guild .pillWrapper {
+  position: relative;
+  top: 9px;
+  right: 2px;
+}
+
+.messages {
+  overflow: hidden scroll;
+  position: absolute;
+  width: calc(100% - 250px);
+  height: calc(100% - 44px);
+  padding: 5px;
+  right: 0;
+}
+
+.message {
+  position: relative;
+  margin-bottom: 2px;
+  margin-left: 50px;
+}
+
+.message.bottom {
+  margin-bottom: 15px;
+}
+
+.message.sending {
+  color: #777;
+}
+
+.message.mentionsyou {
+  background-color: #b87d00;
+}
+
+.message .messagePfp {
+  position: absolute;
+  cursor: pointer;
+  border-radius: 100%;
+  left: -50px;
+}
+
+.message .messagePfp:active {
+  top: 1px;
+}
+
+.message .messageAuthor span {
+  cursor: pointer;
+  max-width: -moz-fit-content;
+  max-width: fit-content;
+  font-weight: 600;
+}
+
+.message .messageAuthor span:hover {
+  text-decoration: underline;
+}
+
+.message .messageAuthor .messageTimestamp {
+  font-weight: initial;
+  color: #777;
+  display: inline;
+  font-size: 10px;
+}
+
+.message .messageContent {
+  position: relative;
+  top: -1px;
+}
+
+.message .mention {
+  display: inline;
+  cursor: pointer;
+  background-color: #0099ff54;
+  border-radius: 3px;
+  padding: 2px;
+}
+
+.message .mention:hover {
+  background-color: #0099ff79;
+}
+
+.message .badge {
+  background-color: var(--badge-color);
+  display: inline;
+  border-radius: 10%;
+  max-width: -moz-fit-content;
+  max-width: fit-content;
+  padding: 2px;
+  font-size: 8pt;
+}
+
+.textbox {
+  position: absolute;
+  background-color: #222;
+  width: calc(100% - 250px);
+  padding: 3px;
+  bottom: 5px;
+  right: 5px;
+}
+
+.editor:empty:before {
+  content: attr(data-text);
+  color: gray;
+}