design.css

/* Basic Body Structure - Solarized Dark 2.0, based on Solarized Dark 1.0, based on Sapientia 1.3 */

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

body {
	color: #586e75;
	height: 100%;
 	z-index: 100;
	font-size: 15pt;
	overflow: hidden;
	overflow-y: visible;
	background-color: #002b36;
	font-family: "HelveticaNeue";
}

body div#body_home {
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	z-index: 100;
	max-height: 99.99%;
	position: absolute;
	opacity: 0; /* Set by JavaScript */
	-webkit-transition: opacity 0.8s linear;
}

body[viewtype=channel] div#body_home {
	max-height: 96.5%;
}

body .line {
 	margin-top: -1px;
	clear: both;
}

body[dir=rtl] .sender {
	display: inline-block;
}

/* Loading Screen */

body div#loading_screen {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -11px;
	margin-left: -150px;
	width: 300px;
	height: 21px;
	font-size: 18px;
	background: #002b36;
	border: 1px solid #073642;
	border-radius: 5px;
	padding: 5px;
	padding-left: 10px;
	opacity: 1; /* Set by JavaScript */
	-webkit-transition: opacity 0.8s linear;
}

/* Time */

body[dir=ltr] .time {
	color: #586e75;
	white-space: nowrap; 
}

body[dir=rtl] .time {
	color: #586e75;
	white-space: nowrap; 
	padding-left: 0.4em;
	display: inline-block;
}

/* Encryption Lock */

.encryptionLock img {
	float: right;
	margin: 0;
	padding: 0;
	height: 11px;
	margin-top: 2px;
	padding-left: 10px;
}

/* Links */

a {
	color: #268bd2;
	border-color: #268bd2;
	text-decoration: none;
	border-bottom: dotted 1px;
}

a:hover {
	color: #2da2ea;
	border-color: #2da2ea;
}

/* Topic Bar */

#topic_bar {
	top: 0;
	left: 0;
	right: 0;
	color: #586e75;
	z-index: 400;
	opacity: 0; /* Set by JavaScript */
	line-height: 145%;
	position: fixed;
	background: #073642;
	padding: 2px 0.5em 3px;
	border-bottom: 1px solid #000a0c;
	-webkit-box-shadow: 0 1px 5px #000a0c;
	-webkit-transition: opacity 0.8s linear;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* Topic bar hover additions contributed with permission from the project:
	<https://github.com/hbang/Simplified-Light-Modifications> */

#topic_bar:hover {
	overflow: visible;
	white-space: normal;
}

#topic_bar a,
#topic_bar span.channel {
	color: #839496;
	border-color: #839496;
}

#topic_bar a:hover {
	color: #93a1a1;
	border-color: #93a1a1;
}

/* Images */

.inlineImageCell {
	overflow: auto;
	display: block;
	margin-top: 15px;
	margin-bottom: 12px;
}

.inlineImageCell .image {
	display: inline-block;
	float: left;
	margin-right: 12px;
	margin-left: 10px;
	min-width: 40px;
	max-width: 90%;
}

.inlineImageCell .closeButton {
	cursor: pointer;
	border-radius: 5px;
	border: 2px solid #a1a1a1;
	color: #a1a1a1;
	display: inline-block;
	line-height: 14px;
	font-size: 15px;
	font-family: "Helvetica Neue" !important;
	text-indent: 7px;
	width: 16px;
	height: 16px;
	float: left;
	padding-right: 7px;
	padding-left: 0px;
}

html[systemversion^="10.9"] .inlineImageCell .closeButton,
html[systemversion^="10.8"] .inlineImageCell .closeButton {
	line-height: 13px;
}

/* 
body a img {
	border: 0;
}

body img {
	display: block;
	max-width: 95%;
	margin: 15px 15px 12px 15px;
}
 */

/* Remember Line */

div[id=mark] {
	clear: both;
	position: relative;
	z-index: 295;
	margin-top: -1px;
	border-bottom: 1px dashed;
	border-color: rgba(88,110,117,0.5);
	-webkit-transition: 0.2s linear;
}

/* Historic Line */

#historic_messages {
	display: inline-block;
	margin: 0;
	padding: 0;
	opacity: 0.6;
}

/* NOTICE/CTCP/WALLOPS */

body div.line[ltype*=ctcp],
body div.line[ltype*=notice],
body div.line[ltype*=wallops] {
	color: #dc322f;
  	z-index: 191;
	background: rgba(203,75,22,.2);
  	position: relative;
 	padding: 2px 5px 2px 5px;
	border-top: 1px solid rgba(203,75,22,.3);
	border-bottom: 1px solid rgba(203,75,22,.3);
}

body div.line[ltype*=ctcp] a,
body div.line[ltype*=notice] a,
body div.line[ltype*=wallops] a {
	color: #dc322f;
	border-color: #dc322f;
}

body div.line[ltype*=ctcp] a:hover,
body div.line[ltype*=notice] a:hover,
body div.line[ltype*=wallops] a:hover {
	color: #cb4b16;
	border-color: #cb4b16;
}

body div[ltype*=notice] .sender {
	color: #cb4b16;
	font-weight: 700;
}

/* SELECTED USER MESSAGES */

.sender {
	cursor: pointer;
}

body div.line[ltype*=privmsg]:not(.selectedUser),
body div.line[ltype*=action]:not(.selectedUser) {
    transition-property: border-top, border-bottom, background-color;
	transition-duration: 0.5s, 0.5s, 0.5s;
}

body div.line[ltype*=privmsg] .time:not(.selectedUser),
body div.line[ltype*=action] .time:not(.selectedUser) {
    transition: color 0.5s;
}

body div.line.selectedUser[highlight=false] .time {
    transition: color 0.5s ease-in;
/*	color: #000;*/
}

body div.line.selectedUser[highlight=false] {
    transition-property: border-top, border-bottom, background-color;
	transition-duration: 0.5s, 0.5s, 0.5s;

  	z-index: 190;
  	position: relative;
	border-top: 1px solid #2AA198 !important;
	border-bottom: 1px solid #2AA198 !important;
  	background-color: #0D3330 !important;
}

/* PRIVMSG */

body div.line[ltype*=privmsg][highlight=false] {
	padding: 2px 5px 2px 5px;
	border-top: 1px solid transparent;
	border-bottom: 1px solid transparent;
/*	background-color: none;*/
}

body div.line[ltype*=privmsg][highlight=true],
body div.line[ltype*=action][highlight=true] {
	font-weight: normal;
 	padding: 2px 5px 2px 5px;
	border-top: 1px solid #994C00;
	border-bottom: 1px solid #994C00;
  	background-color: #2d1e10 !important;
}

body div[ltype*="privmsg"] .message {
	color: #aaa;
}

body div[ltype*=privmsg][mtype*=myself] .message {
	color: #839496;
}

body div[ltype*=privmsg] .sender {
	font-weight: 700;
}

/* ACTION */

body div.line[ltype*=action] {
 	padding: 3px 5px 3px 5px;
}

body div[ltype*="action"] .message {
	color: #aaa;
}

body div[ltype*=action] .sender {
	font-weight: 700;
}

body div[ltype*=action][mtype*=myself] .sender,
body div[ltype*=action][mtype*=myself] .message {
	color: #839496;
}

body[dir=ltr] div[ltype*=action] .sender:before {
	content: "\2022";
	margin-right: 0.4em;
}

body[dir=ltr] div[ltype*=action] .sender:after {
	content: "";
  	/* margin-right: 0.4em; */
}

body[dir=rtl] div[ltype*=action] .sender:before {
	content: "\2022";
	margin-left: 0.4em;
}

body[dir=rtl] div[ltype*=action] .sender:after {
	content: "";
  	/* margin-left: 0.4em; */
}

/* DEBUG/INVITE */

body div.line[ltype*=invite],
body div.line[ltype*=debug],
body div.line[ltype*=rawhtml],
body div.line[ltype*=dcc-file-transfer],
body div.line[ltype*=off-the-record-encryption-status] {
	color: #586e75;
  	z-index: 190;
	background: #073642;
  	position: relative;
 	padding: 2px 5px 2px 5px;
	border-top: 1px solid #002b36;
	border-bottom: 1px solid #002b36;
}

/* off-the-record-encryption-status Message Event */
body div.line[ltype*=off-the-record-encryption-status] .message {
/* 	color: #ff0000; */
	font-weight: 700;
}

/* Message of the Day (MOTD) */
/* 720, 721, 722 are used by ShadowIRCd for Oper MOTD. */
/* 372, 375, 376 are normal MOTD shared by several IRCds. */ 

body div.line[command="372"],
body div.line[command="721"] {
	border: none;
	padding-top: 3px;
	padding-bottom: 3px;
}

body div.line[command="375"],
body div.line[command="720"] { /* Start. */
	border-bottom: none;
	padding-top: 2px;
	padding-bottom: 3px;
}

body div.line[command="376"],
body div.line[command="722"] { /* End. */
	border-top: none;
	padding-top: 3px;
	padding-bottom: 3px;
}

body div.line[command="372"] .message,
body div.line[command="375"] .message,
body div.line[command="376"] .message 
body div.line[command="720"] .message,
body div.line[command="721"] .message,
body div.line[command="722"] .message {
	font-family: "Menlo" !important;
}

/* GENERAL EVENT */

body div.line[ltype*=join],
body div.line[ltype*=part],
body div.line[ltype*=kick],
body div.line[ltype*=quit],
body div.line[ltype*=kill],
body div.line[ltype*=nick],
body div.line[ltype*=mode],
body div.line[ltype*=topic],
body div.line[ltype*=website] {
 	padding: 3px 5px 3px 5px;
	color: #586e75;
}

body[dir=ltr] div[ltype*=join] .message:before {
	content: "→";
  	color: #859900;
  	/* margin-right: 0.4em; */
}

body[dir=ltr] div[ltype*=kick] .message:before,
body[dir=ltr] div[ltype*=part] .message:before,
body[dir=ltr] div[ltype*=quit] .message:before {
	content: "←";
  	color: #dc322f;
  	/* margin-right: 0.4em; */
}

body[dir=ltr] div[ltype*=nick] .message:before {
	content:"•";
  	color: #859900;
  	/* margin-right: 0.4em; */
}

body[dir=rtl] div[ltype*=join] .message:before {
	content: "→";
  	color: #859900;
  	/* margin-left: 0.4em; */
}

body[dir=rtl] div[ltype*=kick] .message:before,
body[dir=rtl] div[ltype*=part] .message:before,
body[dir=rtl] div[ltype*=quit] .message:before {
	content: "←";
  	color: #dc322f;
  	/* margin-left: 0.4em; */
}

body[dir=rtl] div[ltype*=nick] .message:before {
	content:"•";
  	color: #859900;
  	/* margin-left: 0.4em; */
}

/* Nickname Colors */

body .inline_nickname {
	font-weight: 700;
}

body div[ltype*=privmsg] .sender[mtype*=myself] { 
	color: #839496; 
}

body .sender[mtype*=normal][colornumber='0'], 
body .inline_nickname[colornumber='0'] { 
	color: #b58900; 
}

body .sender[mtype*=normal][colornumber='1'], 
body .inline_nickname[colornumber='1'] { 
	color: #cb4b16; 
}

body .sender[mtype*=normal][colornumber='2'], 
body .inline_nickname[colornumber='2'] { 
	color: #dc322f; 
}

body .sender[mtype*=normal][colornumber='3'], 
body .inline_nickname[colornumber='3'] { 
	color: #d33682; 
}

body .sender[mtype*=normal][colornumber='4'], 
body .inline_nickname[colornumber='4'] { 
	color: #6c71c4; 
}

body .sender[mtype*=normal][colornumber='5'], 
body .inline_nickname[colornumber='5'] { 
	color: #268bd2; 
}

body .sender[mtype*=normal][colornumber='6'],
body .inline_nickname[colornumber='6'] { 
	color: #2aa198; 
}

body .sender[mtype*=normal][colornumber='7'], 
body .inline_nickname[colornumber='7'] { 
	color: #859900; 
}

body .sender[mtype*=normal][colornumber='8'],
body .inline_nickname[colornumber='8'] { 
	color: #b58900; 
}

body .sender[mtype*=normal][colornumber='9'], 
body .inline_nickname[colornumber='9'] { 
	color: #93a1a1; 
}

body .sender[mtype*=normal][colornumber='10'], 
body .inline_nickname[colornumber='10'] { 
	color: #cb4b16; 
}

body .sender[mtype*=normal][colornumber='11'], 
body .inline_nickname[colornumber='11'] { 
	color: #dc322f; 
}

body .sender[mtype*=normal][colornumber='12'], 
body .inline_nickname[colornumber='12'] { 
	color: #d33682; 
}

body .sender[mtype*=normal][colornumber='13'], 
body .inline_nickname[colornumber='13'] { 
	color: #6c71c4; 
}

body .sender[mtype*=normal][colornumber='14'], 
body .inline_nickname[colornumber='14'] { 
	color: #268bd2; 
}

body .sender[mtype*=normal][colornumber='15'], 
body .inline_nickname[colornumber='15'] { 
	color: #2aa198;
}

body .sender[mtype*=normal][colornumber='16'], 
body .inline_nickname[colornumber='16'] { 
	color: #859900;
}

body .sender[mtype*=normal][colornumber='17'], 
body .inline_nickname[colornumber='17'] { 
	color: #93a1a1;
}

body .sender[mtype*=normal][colornumber='18'], 
body .inline_nickname[colornumber='18'] { 
	color: #839496;
}

body .sender[mtype*=normal][colornumber='19'], 
body .inline_nickname[colornumber='19'] { 
	color: #93a1a1;
}

body .sender[mtype*=normal][colornumber='20'], 
body .inline_nickname[colornumber='20'] { 
	color: #b58900;
}

body .sender[mtype*=normal][colornumber='21'], 
body .inline_nickname[colornumber='21'] { 
	color: #cb4b16;
}

body .sender[mtype*=normal][colornumber='22'], 
body .inline_nickname[colornumber='22'] { 
	color: #dc322f;
}

body .sender[mtype*=normal][colornumber='23'], 
body .inline_nickname[colornumber='23'] { 
	color: #d33682;
}

body .sender[mtype*=normal][colornumber='24'], 
body .inline_nickname[colornumber='24'] { 
	color: #6c71c4;
}

body .sender[mtype*=normal][colornumber='25'], 
body .inline_nickname[colornumber='25'] { 
	color: #268bd2;
}

body .sender[mtype*=normal][colornumber='26'], 
body .inline_nickname[colornumber='26'] { 
	color: #2aa198;
}

body .sender[mtype*=normal][colornumber='27'], 
body .inline_nickname[colornumber='27'] { 
	color: #859900;
}

body .sender[mtype*=normal][colornumber='28'], 
body .inline_nickname[colornumber='28'] { 
	color: #839496;
}

body .sender[mtype*=normal][colornumber='29'], 
body .inline_nickname[colornumber='29'] { 
	color: #93a1a1;
}

body .sender[mtype*=normal][colornumber='30'], 
body .inline_nickname[colornumber='30'] { 
	color: #b58900;
}