Wrote CSS for a chatbox

2021-03-17 03:44:38 +11:00
parent e288a43519
commit 8561219542
7 changed files with 783 additions and 16 deletions
@@ -0,0 +1,62 @@
+.chat {
+	position: fixed;
+	bottom: 23px;
+	right: 28px;
+	width: 280px;
+	border: solid;
+	border-color: black;
+	border-width: 2px;
+	background-color: #CCC;
+	display: inline-block;
+	max-height: calc(50vh - 23px);
+}
+
+.chat > button.open {
+	color: white;
+	background-color: grey;
+}
+
+.chat > button.send {
+	color: white;
+	background-color: green;
+}
+
+.chat > button.close {
+	color: black;
+	background-color: red;
+}
+
+.chat > button {
+	width: 100%;
+	height: 2em;
+	opacity: 0.8;
+}
+
+.chat > button:hover {
+	opacity: 1;
+}
+
+.chat > .input {
+	width: calc(100% - 10px);
+	height: 2em;
+}
+
+.chat > .log {
+	min-height: 300px;
+}
+
+.chat > .log .username {
+	font-weight: bold;
+}
+
+.chat .scrollable {
+	margin: 0;
+	padding: 10px;
+	min-height: 280px;
+	max-height: calc(50vh - 23px - 20px - 6em);
+	overflow-y: scroll;
+}
+
+.chat ul {
+	list-style: none;
+}