diff src/chat.css @ 60:3521166513b3

finish invite
author Franklin Schmidt <fschmidt@gmail.com>
date Tue, 04 Mar 2025 20:31:00 -0700
parents 323ddacc1593
children afd5ab5b02a2
line wrap: on
line diff
--- a/src/chat.css	Tue Mar 04 08:22:45 2025 -0700
+++ b/src/chat.css	Tue Mar 04 20:31:00 2025 -0700
@@ -7,16 +7,10 @@
 }
 
 div[chat_content] {
-	margin-left: 3%;
-	margin-right: 3%;
 	display: flex;
 	height: calc(100% - 32px);
 }
 
-div[chats] {
-	overflow-y: auto;
-}
-
 div[chats] > div {
 	margin-top: 2px;
 	margin-bottom: 2px;
@@ -40,6 +34,10 @@
 	justify-content: space-between;
 }
 
+div[chat_content][show="intro"] div[posts] {
+	display: none;
+}
+
 div[posts] > * {
 	padding-right: 3vw;
 }
@@ -67,14 +65,19 @@
 	margin-bottom: 16px;
 }
 
-[intro] {
+div[intro] {
+	width: 100%;
 	display: flex;
 	flex-direction: column;
 	align-items: center;
 }
 
-[intro] input[type=email] {
+div[intro] form {
+	max-width: 100%;
+}
+div[intro] input[type=email] {
 	width: 250px;
+	max-width: 100%;
 }
 
 div[who] {
@@ -170,12 +173,19 @@
 		margin-right: 0;
 	}
 
+	div[chat_content][show="chats"] div[intro],
+	div[chat_content][show="posts"] div[intro] {
+		display: none;
+	}
+
 	div[chats] {
+		overflow-y: auto;
 		width: 250px;
 		padding-right: 8px;
 		flex-shrink: 0;
 	}
 
+	div[intro],
 	div[posts] {
 		padding-left: 8px;
 		border-left: 1px solid grey;
@@ -187,15 +197,40 @@
 }
 
 @media (max-width: 699px) {
+	div[chat_content][show="intro"],
+	div[chat_content][show="chats"] {
+		flex-direction: column;
+		overflow-y: auto;
+	}
+	div[chat_content][show="posts"] {
+		margin-left: 3%;
+	}
+
 	div[chat_content][show="chats"] div[posts],
+	div[chat_content][show="posts"] div[intro],
 	div[chat_content][show="posts"] div[chats] {
 		display: none;
 	}
 
+	div[chats],
+	div[intro] {
+		padding-left: 3%;
+		padding-right: 3%;
+	}
+
 	div[chats] {
 		width: 100%;
 	}
 
+	div[intro] {
+		margin-top: 20px;
+		border-top: 1px solid grey;
+	}
+
+	div[intro] [or] {
+		display: none;
+	}
+
 	div[chat_content][show="posts"] {
 		margin-right: 0;
 	}