source/style.less (9a1bfce) - wirc-frontend.git

style.less

@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: 2px;
	
	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;
	}
}

body
{
	&
	{
		& #connect {display: none;}
		& #wait {display: none;}
		& #main {display: none;}
	}
	
	&.offline
	{
		& #connect {display: initial !important;}
	}
	
	&.connecting
	{
		& #wait {display: initial !important;}
	}
	
	&.online
	{
		& #main {display: initial !important;}
	}
}

#head
{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	
	& > #head_left
	{
		flex: 1;
		text-align: left;
	}
	
	& > #head_right
	{
		flex: 1;
		text-align: right;
	}
}

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

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

#main > form
{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	
	& > #message {flex: 7;}
	& > #send {flex: 1;}
}

wirc-frontend.git

[mod] pack model stuff into dedicated variable