xmpp.chapril.org-conversejs/mockup/less/mockup.less

// overrides for the base css of converse/inverse

@link-color: #007bff;
@bg-color: #578ea9;

body {
	.brand-heading {
		margin: auto;
        font-size: 6em;
        font-weight: bold;
		.icon-conversejs {
            font-size: 0.88em;
        }
	}
}

.converse-bg {
	position:relative; height:100vh; text-align:center; color:#fff;
	.brand-heading { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); }
}

#conversejs {

	&.fullscreen {
		width:100%; height:100%; right:0; bottom:0; color:@text-color;
		&.login {
			width:calc(~"100vw - 20px"); height:calc(~"100vh - 20px"); margin:10px;
			#controlbox #login-dialog {
				height:100%; border-radius:5px;
				.brand-heading { font-size:6em; }
				.converse-form { margin:0; padding:3em 2em 3em; }
			}
		}
		&.chatbox {
			margin:0;
			.chatbox { width:100%; }
			.chatbox .box-flyout { width:100%; height:100vh; }
		}
		#controlbox {
			width:100%; margin-right:0;
			.box-flyout { width:100%; }
			.controlbox-pane { height:100vh; border-radius:0; }
		}
		.chatroom .box-flyout .chatroom-body .chat-area { height:calc(~"100vh - 95px"); }
	}

	.chatbox {
		.chat-content { padding:0.5em; }
		.chat-body {
			background:#fff;
			.chat-message {
				margin:0.3em;
				canvas { vertical-align:middle; background:#777; }
				.chat-msg-me canvas { background:@bg-color; }
				.chat-msg-them canvas { background:#e77051; }
				.chat-msg-author { float:none; }
			}
		}
		form.sendXMPPMessage {
			textarea { resize:none; border:none; border-top-left-radius:0; border-top-right-radius:0; }
			.chat-toolbar {
				a, li.toggle-toolbar-menu { color:@text-color; }
			}
		}
	}

	.chatroom .box-flyout .chatroom-body {
		.chat-area {
			min-width:100%; height:395px;
			.chat-content { padding:0.5em; }
		}
		.chat-info { color:#fff; line-height:normal; }
		.occupants {
			.chatroom-features { bottom:0; width:auto; }
			ul li.feature { float:left; margin-right:0.5em; padding-right:0; font-size:1em; cursor:help; }
		}
	}

	#users {
		position:relative;
		#chatrooms {
			padding-bottom:5px; border-bottom:1px solid #aaa;
			.rooms-list-container dl.rooms-list {
				.available-chatroom, .open-chatroom { padding:0.1em 0; }
				a + a { line-height:22px; }
			}
		}
		#chatrooms, #contacts { margin-top:0.75em; }
		.userinfo {
			padding-bottom:10px; border-bottom:1px solid #aaa;
			.username { margin-left:5px; }
			.d-flex { margin-bottom:2px; }
		}
		&.controlbox-pane { height:450px; text-align:left; }
		.chatbox-btn { margin:0; color:@link-color; }
	}
}

@media screen and (max-width: 575px) {
	body {
		.brand-heading { font-size:3.75em; }
	}

	#conversejs {
		&.fullscreen.login, & {
			#controlbox #login-dialog .brand-heading { font-size:3.75em; }
		}
		.chatbox .chat-body { border-radius:7px; }
		.flyout { border-radius:4px; }
	}
}

@media screen and (max-width: 767px) {
	#conversejs {
		left:0; margin:0;
		&.fullscreen {
			&.chatbox {
				> .chatbox, .chatroom { width:calc(~"100% - 50px"); }
				&.sidebar-open {
					#controlbox #users { display:block; }
					> .chatbox:not(#controlbox), .chatroom { display:none; }
				}
				.chatbox .box-flyout { left:0; }
			}
		}
		&.login {
			margin:10px;
			#controlbox {
				margin:0;
				.controlbox-pane { font-size:1.15em; }
				&.chatbox { width:100%; }
			}
			.chatbox .box-flyout { height:calc(~"100vh - 20px"); width:100%; bottom:0; left:0; }
		}
		&.sidebar-open {
			#controlbox #users { display:block; }
			> .chatbox:not(#controlbox) { display:none; }
		}

		#controlbox {
			#users {
				position:absolute; top:0; left:50px; display:none;
				width:calc(~"100% - 50px");
			}
			.box-flyout { width:100%; left:0; }
			.sidebar { display:block; }
		}

		#users.controlbox-pane { height:100vh; }
		#login-dialog .pure-form.converse-form { padding:3em 2em 3em; }
		> .chatbox { width:calc(~"100% - 50px"); }
		.chatbox .chat-body .chat-message .chat-msg-author { white-space:normal; }
		.chatbox .box-flyout {
			left:50px; bottom:0; width:calc(~"100% - 50px"); height:100vh; box-shadow:none;
			.chatroom-body .chat-area { height:calc(~"100vh - 55px"); }
		}
	}
}

@media screen and (min-width: 576px) {
	#conversejs {
		.offset-sm-2 { margin-left: 16.666667%; }
	}
}

@media screen and (min-width: 768px) {
	#conversejs {
		.offset-md-2 { margin-left: 16.666667%; }
		.offset-md-3 { margin-left: 25%; }
	}
}

@media screen and (min-width: 992px) {
	#conversejs {
		.offset-lg-2 { margin-left: 16.666667%; }
		.offset-lg-3 { margin-left: 25%; }
	}
}

@media screen and (min-width: 1200px) {
	#conversejs {
		.offset-xl-2 { margin-left: 16.666667%; }
	}
}

@media screen and (max-height: 450px) {
	#conversejs { left:0; }
}

@media screen and (max-width: 480px) {
	#conversejs { width:auto; }
}