@hue: 120;

body
{
	background-color: hsl(@hue, 0%, 6.125%);
	color: hsl(@hue, 0%, 93.75%);
	
	font-family: monospace;
	font-size: 1.25em;
}

input,textarea,button
{
	font-size: 1.25em;
}

button, input[type="submit"]
{
	background-color: hsl(@hue, 50%, 37.5%);
	color: hsl(@hue, 0%, 100%);
	
	border: none;
	border-radius: 4px;
	
	padding: 8px;
	
	cursor: pointer;
}

label
{
	display: block;
	font-size: 1.0em;
	font-weight: bold;
	text-transform: capitalize;
}

.field
{
	display: block;
	margin: 16px 0;
}

.event > *
{
	display: inline-block;
}

.event_time
{
	margin: 0 2px;
	
	color: hsl(@hue, 0%, 75%);
	
	&:before
	{
		content: "<";
	}
	
	&:after
	{
		content: ">";
	}
}

.event_sender
{
	margin: 0 2px;
	
	font-weight: bold;
	
	&:before
	{
		content: "[";
	}
	
	&:after
	{
		content: "]";
	}
}

.pane
{
	background-color: hsl(@hue, 0%, 12.5%);
	
	height: 75vh;
	overflow-y: auto;
	
	list-style-type: none;
	
	border: 1px solid hsl(@hue, 0%, 50%);
	margin: 4px;
	padding: 8px;
	
	& > li
	{
		margin: 4px 0;
	}
}

#head
{
	text-align: right;
}

#middle
{
	display: flex;
	flex-direction: row;
	
	& #history {flex: 4;}	
	& #users {flex: 1;}
}

#message
{
	// height: 40px;
	width: 80%;
	
	border: none;
	
	background-color: hsl(@hue, 0%, 25%);
	color: hsl(@hue, 0%, 100%);
	
	padding: 8px;
	margin: 4px;
}

body
{
	&:not(.offline):not(.checking):not(.online)
	{
		& #connect {display: none;}
		& #wait {display: none;}
		& #main {display: none;}
	}
	
	&.offline
	{
		& #connect {}
		& #wait {display: none;}
		& #main {display: none;}
	}
	
	&.checking
	{
		& #connect {display: none;}
		& #wait {}
		& #main {display: none;}
	}
	
	&.online
	{
		& #connect {display: none;}
		& #wait {display: none;}
		& #main {}
	}
}