dms

3 files changed, 178 insertions, 2 deletions

diff --git a/public/css/chat.css b/public/css/chat.css
new file mode 100644
index 0000000..1092a39
--- /dev/null
+++ b/public/css/chat.css
@@ -0,0 +1,172 @@
+.spacer {
+    margin-bottom: 3.5em !important;
+}
+
+#cent {
+    display: flex;
+    width: 100%;
+    height: calc(100vh - 3.5em);
+    flex-direction: row;
+}
+
+#sidebar {
+    height: 100%;
+    width: 20%;
+    min-width: 25em;
+    display: flex;
+    flex-direction: column;
+}
+
+#sidebar>span {
+    display: block;
+    width: 100%;
+    text-align: center;
+    font-size: 1.5em;
+    margin: .5em 0;
+}
+
+#center {
+    height: 100%;
+    width: calc(100vw - 20%);
+    max-width: calc(100vw - 25em);
+}
+
+.room {
+    width: calc (100% - 1rem);
+    height: 3rem;
+    display: flex;
+    position: relative;
+    flex-direction: row;
+    padding: .5rem 1rem;
+}
+
+.room:hover, .current {
+    background-color: var(--hover);
+}
+
+.room-icon {
+    border-radius: 3rem;
+    height: 3rem;
+    width: 3rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-weight: 1000;
+    font-size: 1.5rem;
+}
+
+.room-name {
+    display: flex;
+    height: 3rem;
+    margin-left: 1rem;
+    align-items: center;
+}
+
+.roomDisplay {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    position: relative;
+}
+
+.roomDisplayCenter {
+    display: flex;
+    width: calc(100% - 25em);
+    height: 100%;
+    flex-direction: column;
+}
+
+.roomDisplayPeople {
+    width: 25em;
+    height: 100%;
+    overflow-y: scroll;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+}
+
+.roomDisplayPeople>span {
+    display: block;
+    width: 100%;
+    text-align: center;
+    font-size: 1.5em;
+    margin: .5em 0em;
+}
+
+.person {
+    width: 20em;
+}
+
+.person img, .person .profile {
+    height: 7em;
+    width: 7em;
+}
+
+.person .info {
+    margin: 5px;
+}
+
+.person .ltext {
+    font-size: 18px;
+}
+
+.person .gtext {
+    font-size: 12px;
+}
+
+.roomDisplay .messages {
+    flex: 1;
+    margin-left: 1rem;
+    display: flex;
+    flex-direction: column-reverse;
+    overflow-y: scroll;
+}
+
+.roomDisplay .messageContent {
+    flex-grow: 0;
+    width: auto;
+    margin-bottom: .5rem;
+    display: block;
+    height: fit-content;
+    overflow: none;
+}
+
+.roomDisplay .messageContent[contenteditable]:empty::before {
+  content: "Send an unencrypted message";
+  color: gray;
+}
+
+.addUser[contenteditable]:empty::before {
+  content: "Type email to add user";
+  color: gray;
+}
+
+.addRoom[contenteditable]:empty::before {
+  content: "Type name to create room";
+  color: gray;
+}
+
+.message {
+    display: flex;
+    flex-direction: row;
+    height: fit-content;
+    padding: .5rem;
+}
+
+.message-pfp {
+    flex-grow: 0;
+    height: 3rem;
+    width: 3rem;
+    margin-right: 1rem;
+}
+
+.message-pfp img {
+    width: 100%;
+    height: 100%;
+    border-radius: 3rem;
+}
+
+.message-content {
+    flex-grow: 0;
+}
diff --git a/public/css/home.css b/public/css/home.css
index f467aba..f21d201 100644
--- a/public/css/home.css
+++ b/public/css/home.css
@@ -184,4 +184,4 @@ body {
     width: calc(100% - 20px);
     background-color: var(--secondary);
     font-family: sfpro;
-}
\ No newline at end of file
+}
diff --git a/public/css/main.css b/public/css/main.css
index 352a3b4..c8ff1d7 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -14,6 +14,10 @@ body {
     --popup: #ffffffcc;
 }
 
+textarea {
+    resize: none
+}
+
 body {
     background-color: var(--primary);
     width: 100%;
@@ -130,7 +134,7 @@ footer {
     background-color: var(--primary);
 }
 
-input {
+input, .input {
     flex: 1;
     font-family: sfpro;
     background-color: var(--primary);