From 3fd55d3389e5d1d496a62bbb7ee95234c304ca8e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Anton=20L=2E=20=C5=A0ijanec?= <sijanecantonluka@gmail.com>
Date: Sun, 5 Apr 2020 20:23:30 +0200
Subject: chats.js not done yet

---
 css/bubbles.css | 94 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 94 insertions(+)
 create mode 100644 css/bubbles.css

(limited to 'css/bubbles.css')

diff --git a/css/bubbles.css b/css/bubbles.css
new file mode 100644
index 0000000..8a19ff1
--- /dev/null
+++ b/css/bubbles.css
@@ -0,0 +1,94 @@
+/* obviously stolen, source https://codepen.io/swards/pen/gxQmbj */
+.chat {
+  width: 100%;
+	border-left: solid 1px #EEE;
+	border-right: solid 1px #EEE;
+	/* border-bottom: solid 1px #EEE; */
+  display: flex;
+  flex-direction: column;
+  padding: 10px;
+}
+
+.messages {
+  margin-top: 30px;
+  display: flex;
+  flex-direction: column;
+}
+
+.message {
+  border-radius: 20px;
+  padding: 8px 15px;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  display: inline-block;
+}
+
+.yours {
+  align-items: flex-start;
+}
+
+.yours .message {
+  margin-right: 25%;
+  background-color: #eee;
+  position: relative;
+}
+
+.yours .message.last:before {
+  content: "";
+  position: absolute;
+  z-index: 0;
+  bottom: 0;
+  left: -7px;
+  height: 20px;
+  width: 20px;
+  background: #eee;
+  border-bottom-right-radius: 15px;
+}
+.yours .message.last:after {
+  content: "";
+  position: absolute;
+  z-index: 1;
+  bottom: 0;
+  left: -10px;
+  width: 10px;
+  height: 20px;
+  background: white;
+  border-bottom-right-radius: 10px;
+}
+
+.mine {
+  align-items: flex-end;
+}
+
+.mine .message {
+  color: white;
+  margin-left: 25%;
+  background: linear-gradient(to bottom, var(--color-primary) 0%, var(--color-secondary) 100%);
+  background-attachment: fixed;
+  position: relative;
+}
+
+.mine .message.last:before {
+  content: "";
+  position: absolute;
+  z-index: 0;
+  bottom: 0;
+  right: -8px;
+  height: 20px;
+  width: 20px;
+  background: linear-gradient(to bottom, var(--color-primary) 0%, var(--color-secondary) 100%);
+  background-attachment: fixed;
+  border-bottom-left-radius: 15px;
+}
+
+.mine .message.last:after {
+  content: "";
+  position: absolute;
+  z-index: 1;
+  bottom: 0;
+  right: -10px;
+  width: 10px;
+  height: 20px;
+  background: white;
+  border-bottom-left-radius: 10px;
+}
\ No newline at end of file
-- 
cgit v1.2.3