use less, topbar (wip) also warkdown

1 files changed, 89 insertions, 0 deletions

diff --git a/styles.less b/styles.less
new file mode 100644
index 0000000..b1938ea
--- /dev/null
+++ b/styles.less
@@ -0,0 +1,89 @@
+/* i have no idea what im doing so */
+body {
+    /* why */
+    margin: 0;
+	height: 100vh;
+}
+
+.main {
+	height: 100%;
+	width: 100%;
+	line-break: anywhere;
+	word-break: break-all;
+}
+
+.channel {
+	flex-grow: 1;
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	overflow: auto;
+}
+
+.messages {
+	flex-grow: 1;
+}
+
+.topbar {
+	background: white;
+	position: sticky;
+	top: 0;
+	display: flex;
+	justify-content: space-between;
+}
+
+.topbar.hidden {
+	display: none;
+}
+
+.messageInput {
+	background: white;
+	position: sticky;
+	bottom: 0;
+}
+
+.messageInputForm {
+	display: flex;
+}
+
+.reply {
+	color: #000000aa
+}
+
+.attachment {
+	max-height: 25vw;
+	max-width: 25vw;
+	width: auto;
+	height: auto;
+}
+
+#messageInput {
+	flex-grow: 1;
+}
+
+.messageInput.disabled {
+    display: none;
+}
+
+.message {
+	p, h1, h2, h3, h4, h5, h6 {
+		margin: 0;
+	}
+}
+
+.message-header {
+	display: flex;
+	justify-content: space-between;
+	.username {
+		font-size: 1.3em;
+	}
+	.action-buttons {
+		display: none;
+	}
+}
+.message:hover {
+	background: #0004;
+	.action-buttons {
+		display: block;
+	}
+}
\ No newline at end of file