summaryrefslogtreecommitdiffstats
path: root/css
diff options
context:
space:
mode:
Diffstat (limited to 'css')
-rw-r--r--css/bubbles.css94
-rw-r--r--css/styles.css20
2 files changed, 111 insertions, 3 deletions
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
diff --git a/css/styles.css b/css/styles.css
index 8ad12a0..a06c906 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -28,8 +28,12 @@ body {
}
nav {
- background: var(--color-primary);
- border-bottom: 10px solid var(--color-accent);
+ background: var(--color-primary);
+ border-bottom: 10px solid var(--color-accent);
+ position: sticky;
+ left: 0;
+ top: 0;
+ z-index: 69; /* choose a number, any number */
}
.hidden {
@@ -147,4 +151,14 @@ a.collection-item {
.input-field textarea:not([readonly]):focus {
border-bottom: 1px solid var(--color-primary) !important;
box-shadow: 0 1px 0 0 var(--color-primary) !important;
-} \ No newline at end of file
+}
+
+.chat-sticky-input {
+ position: fixed;
+ left: 0;
+ bottom: 0;
+ width: 100%;
+ background-color: white;
+ text-align: center;
+ z-index: 60;
+}