design.css

/*# ##### #*/
/*# Basic #*/
/*# ##### #*/

* {
	margin: 0;
	padding: 0;
	font-size: 100%;
  	word-wrap: break-word;
}

html {
	background-color: #fff;
}

body {
	color: #292f33;

	height: 100%;
	overflow: hidden;
	overflow-y: visible;

	z-index: 100;

	font-weight: 0;
}


/* # ##### #*/
/* # Links #*/
/* # ##### #*/

a {
	font-weight: 600;
	color: #292f33;
	transition: all 0.2s ease-in-out;
}
a:hover {
	color: #00cccc;
}

/* # #### #*/
/* # Line #*/
/* # #### #*/

div.line {
	padding: 0.05em 0.5em;
	position: relative;

	letter-spacing: 0.03em;
	line-height: 1.2em;
}

/*Used for private messages*/
div.line.top{
	padding-top: 0.5em;
}
div.line.bottom{
	padding-bottom: 0.5em;
}

div.line[ltype='debug']{
	padding: 0.5em 0.5em;
}


/* # #### #*/
/* # Time #*/
/* # #### #*/

span.time {
	float: right;

	letter-spacing: 0.1em;
	line-height: 1.2em;
	font-weight: 600;

	color: #292f33;
}


div.line[ltype='debug'] .time {
	color: #FFF;
}

div.line[ltype='join'] span.time,
div.line[ltype='part'] span.time,
div.line[ltype='quit'] span.time,
div.line[ltype='topic'] span.time,
div.line[ltype='nick'] span.time,
div.line[ltype='mode'] span.time {
	color: #888;
}

/* # ############## #*/
/* # Message Format #*/
/* # ############## #*/

span.senderContainer {
	display: table-cell;
	text-align: right;
	vertical-align: middle;

	min-width: 10em;
	max-width: 10em;
	width: 10em;
	line-height: 1.2em;

	font-weight: 600;

	position: absolute;
	left: 0;
	top: 0.5em;
	bottom: 0;

	overflow: hidden;
}

span.message[ltype='privmsg'],
span.message[ltype='action'] {
	display: flex;
	align-items: center;

	padding-left: 10em;
	padding-right: 0.5em;

	line-height: 1.2em;

	word-break: word;
}


div.line[ltype='join'],
div.line[ltype='part'],
div.line[ltype='quit'],
div.line[ltype='topic'],
div.line[ltype='nick'],
div.line[ltype='mode'] {
	color: #888;
	padding: 0.3em 0.3em;
	padding-left: 10em;
	background-color: #fff;
}


div.line[ltype='debug'] {
	padding-left: 10.3em;
	color: #FFF;
	background-color: #DADADA;
}

div.line[ltype='action'] .innerMessage {
	font-style: italic;
}


div.line span.inline_nickname {
	font-weight: bolder;
	font-weight: 600;
}


/* ########### #*/
/* # Topic Bar #*/
/* ########### #*/

div#topic_bar {
	position: fixed;
	z-index: 200;

	top: 0;
	left: 0;
	right: 0;

	padding: 1em 1em;

	color: white;
	background-color: #3B485A;


	font-size: 1em;
	line-height: 1.1em;
	font-weight: 600;

	text-align: center;
}

div#topic_bar a{
	color: white;
}

/* # ###### #*/
/* # Images #*/
/* # ###### #*/

span.inlineImageCell {
	display: block !important;
	margin: 0.3em;
}

img {
	display: block;
	transition: all 0.5s ease;

	max-width: 100%;
}

img:hover {
	filter: blur(1px);
	transform: scale(1.3);
}

div.imageWrapper {
	display: block;
	overflow: hidden;
}


/* ########## */
/* # Colors # */
/* ########## */

div.greyBackground {
	background-color: #FAFAFA;
}

/* # ########## #*/
/* # Highlights #*/
/* # ########## #*/

div.line[highlight="true"] {
	background-color: #00cccc;
	color: #fff;
}

div.line[highlight="true"] span.time {
	color: #fff;
}


/* # ########## #*/
/* # Animations #*/
/* # ########## #*/

span.letterCorrection{
	animation: letterCorrection 0.2s cubic-bezier(0,.92,.81,.78);
}

@keyframes letterCorrection {
	0%{
		opacity: 0;
		padding-left: 10em;
	}
	100%{
		opacity: 1;
		padding-left: 0;
	}
}

div.lineCorrection {
	animation: lineCorrection 0.8s cubic-bezier(.5,.2,.6,1.25);
}

@keyframes lineCorrection {
	0%{
		background-color: rgba(0, 204, 204, 0);
	}
	20%{
		background-color: rgba(0, 204, 204, 0.7);
	}
	100%{
		background-color: rgba(0, 204, 204, 0);
	}
}

/* # ############## #*/
/* # Loading Screen #*/
/* # ############## #*/


div#loading_screen {

	z-index: 250;

	position: fixed;

	top: 0;
	left: 0;

	width: 100%;
	height: 100%;

	background-color: #FFF;

	display: flex;
	align-items: center;
	justify-content: center;

	opacity: 1;
	transition: opacity 0.5s ease-in-out;
}

/* Credit: http://projects.lukehaas.me/css-loaders/
   A spinning circle to indicate loading in pure CSS */

div.spinner {
  margin: 0 auto;
  font-size: 0.8em;
  position: relative;
  border-top: 0.5em solid rgba(0, 204, 204, 0.2);
  border-right: 0.5em solid rgba(0, 204, 204, 0.2);
  border-bottom: 0.5em solid rgba(0, 204, 204, 0.2);
  border-left: 0.5em solid #00cccc;
  transform: translateZ(0);
  animation: loading 1s infinite linear;
}
div.spinner,
div.spinner:after {
  border-radius: 50%;
  width: 5em;
  height: 5em;
}

@keyframes loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}