silver skin by Alekin Pavel (initial commit)

src/messenger/webim/styles/silver/chat.css

@@ -0,0 +1,360 @@
+html, body {
+	height: 100%;
+}
+body {
+	margin: 0;
+	padding: 0;
+	font: normal 11px Tahoma;
+	line-height: 1;
+	background: transparent !important;
+}
+.body {
+	min-width: 500px;
+}
+a {
+	text-decoration: underline;
+	color: #008AD9;
+}
+a:hover {
+	text-decoration: none;
+}
+img {
+	vertical-align: bottom;
+	border: 0 none;
+}
+.clear {
+	clear: both;
+	height: 0;
+	font-size: 0;
+	line-height: 0;
+}
+
+/* layout chat */
+#top {
+	position: relative;
+	padding: 5px 14px;
+	background: #FFF url("images/topbg.gif") scroll repeat-x 0 100%;
+	_zoom:1; /* IE6 fix */
+}
+#chatheader {
+	position: relative;
+	padding: 0 10px;
+	background: #F1F2F2 url("images/chatheaderbg.gif") scroll repeat-x 0 0;
+	_zoom:1; /* IE6 fix */
+}
+#chat {
+	padding: 0 10px;
+	background: #F1F2F2;
+}
+#message {
+	padding: 0 10px;
+	background: #F1F2F2;
+}
+#send {
+	padding: 0 10px 5px;
+	background: #FFF url("images/bottombg.gif") scroll repeat-x 0 0;
+}
+#footer {
+	width: 400px;
+	margin: 0 auto;
+	padding-top: 5px;
+	text-align: center;
+	color: #999;
+}
+#footer a {
+	color: #999;
+}
+/* ----------- */
+
+/* #chatheader */
+#chatheader .bgc {
+	background: #FFF url("images/chatheaderbgc.gif") scroll repeat-x 0 0;
+}
+#chatheader .bgl {
+	background: transparent url("images/chatheaderbgl.gif") scroll no-repeat 0 0;
+	_zoom:1; /* IE6 fix */
+}
+#chatheader .bgr {
+	height: 42px;
+	background: transparent url("images/chatheaderbgr.gif") scroll no-repeat 100% 0;
+}
+#logo {
+	font: normal 17px Arial;
+	color: #495151;
+}
+#logo a {
+	text-decoration: none;
+}
+#page-title {
+	position: absolute;
+	right: 14px;
+	bottom: 5px;
+	text-align: right;
+}
+/* ----------- */
+
+/* buttons & username */
+.buttons {
+	position: absolute;
+	top: 15px;
+	right: 25px;
+}
+.tplimage {
+	width: 16px;
+	height: 16px;
+	margin: 0 0 0 11px;
+	background: transparent url("images/buttons.gif") scroll no-repeat 0 0;
+}
+.empty {
+	width: 2px;
+	height: 16px;
+	margin: 0 0 0 11px;
+}
+.fontreduce {
+	background-position: -160px -16px;
+}
+a:hover .fontreduce {
+	background-position: -160px 0;
+}
+.fontenlarge {
+	background-position: -176px -16px;
+}
+a:hover .fontenlarge {
+	background-position: -176px 0;
+}
+.iemail {
+	background-position: -32px -16px;
+}
+a:hover .iemail {
+	background-position: -32px 0;
+}
+.isend {
+	background-position: -96px -16px;
+}
+a:hover .isend {
+	background-position: -96px 0;
+}
+.ihistory {
+	background-position: -112px -16px;
+}
+a:hover .ihistory {
+	background-position: -112px 0;
+}
+.isound {
+	background-position: -48px -16px;
+}
+a:hover .isound {
+	background-position: -48px 0;
+}
+.inosound {
+	background-position: -64px -16px;
+}
+a:hover .inosound {
+	background-position: -64px 0;
+}
+.irefresh {
+	background-position: -80px -16px;
+}
+a:hover .irefresh {
+	background-position: -80px 0;
+}
+.issl {
+	background-position: -144px -16px;
+}
+a:hover .issl {
+	background-position: -144px 0;
+}
+.iclosewin {
+	background-position: -128px -16px;
+}
+a:hover .iclosewin {
+	background-position: -128px 0;
+}
+.iexec {
+	background-position: 0 -16px;
+}
+a:hover .iexec {
+	background-position: 0 0;
+}
+.ichangeuser {
+	background-position: -16px -16px;
+}
+a:hover .ichangeuser {
+	background-position: -16px 0;
+}
+#changename1 {
+	position: absolute;
+	top: 12px;
+	left: 25px;
+	height: 24px;
+	padding: 0 0 0 35px;
+	font-size: 14px;
+}
+.input-name {
+	width: 95px;
+	height: 16px;
+	padding: 3px;
+	background: #FFF url("images/input_name.gif") scroll no-repeat 0 0;
+	_background-color: transparent;
+}
+#uname {
+	width: 95px;
+	height: 16px;
+	margin: 0;
+	padding: 0;
+	border: 0 none;
+	font: normal 12px Tahoma;
+}
+.changename {
+	position: absolute;
+	top: 3px;
+	right: -27px;
+}
+#changename2 {
+	position: absolute;
+	top: 12px;
+	left: 25px;
+	height: 24px;
+	padding-top: 2px;
+	font-size: 14px;
+}
+#unamelink {
+	margin-left: 35px;
+	font: normal 12px Tahoma;
+}
+.you {
+	position: absolute;
+	bottom: 6px;
+	left: 0;
+}
+.you2 {
+	position: absolute;
+	bottom: 8px;
+	left: 0;
+}
+/* ------------------ */
+
+/* #chat */
+#chat .bgl {
+	background: #FFF url("images/chatbgl.gif") scroll repeat-y 0 0;
+}
+#chat .bgr {
+	background: transparent url("images/chatbgr.gif") scroll repeat-y 100% 0;
+}
+#chat .sdwbgc {
+	background: transparent url("images/sdwbgc.png") scroll repeat-x 0 100%;
+}
+#chat .sdwbgl {
+	background: transparent url("images/sdwbgl.png") scroll no-repeat 0 100%;
+}
+#chat .sdwbgr {
+	position: relative;
+	padding: 0 4px 38px;
+	background: transparent url("images/sdwbgr.png") scroll no-repeat 100% 100%;
+	_zoom:1; /* IE6 fix */
+}
+#inf {
+	position: absolute;
+	bottom: 20px;
+	left: 14px;
+	font-size: 12px;
+	color: #333;
+}
+#avatar-wrapper {
+	position: absolute;
+	top: 0;
+	right: 4px;
+	width: 120px;
+	background: #EEE url("images/avatarbg.gif") scroll repeat-y 100% 0;
+}
+#avatarwnd {
+	width: 100px;
+	height: 100px;
+	margin: 10px auto 0 auto;
+	text-align: center;
+	background: transparent url("images/avatar.jpg") scroll no-repeat 50% 10px;
+	line-height: 0;
+	font-size: 0;
+}
+#content {
+	padding: 10px;
+	font: normal 10px Tahoma;
+	line-height: 1.8em;
+	color: #999;
+}
+#content .minf {
+	font-size: 1.1em;
+	color: #7BAA0F;
+}
+#content .mhidden, 
+#content .mevent {
+	font-size: 1.1em;
+}
+#content .nagent {
+	font-size: 1.1em;
+	font-weight: bold;
+	color: #000;
+}
+#content .nuser {
+	font-size: 1.1em;
+	font-weight: bold;
+	color: #DA251D;
+}
+#content .magent, 
+#content .muser {
+	font-size: 1.1em;
+	color: #000;
+}
+/* ----- */
+
+/* #message */
+#message .bgc {
+	background: #FFF url("images/message.png") scroll repeat-x 0 -95px;
+}
+#message .bgl {
+	background: transparent url("images/message.png") scroll no-repeat 0 0;
+}
+#message .bgr {
+	height: 58px;
+	padding: 14px 14px 23px;
+	background: transparent url("images/message.png") scroll no-repeat 100% -190px;
+}
+#msgwnd {
+	overflow: auto;
+	width: 100%;
+	height: 100%;
+	margin: 0;
+	padding: 0;
+	font: normal 12px Tahoma;
+	border: 0 none;
+	background: transparent;
+	resize: none; /* disable resize textarea in google chrome, safari and firefox 4 */
+}
+/* -------- */
+
+/* #send */
+#postmessage {
+}
+#sndmessagelnk {
+	float: right;
+	width: 190px;
+	height: 33px;
+	font: normal 17px Arial;
+	line-height: 30px;
+	text-align: center;
+	text-decoration: none;
+	color: #495151;
+	background: url("images/submit.gif") no-repeat 0 0 transparent;
+}
+#sndmessagelnk:hover {
+	color: #000;
+	background: url("images/submit.gif") no-repeat -190px 0 transparent;
+}
+#predefined-wrapper {
+	float: left;
+	padding: 5px 0 0 3px;
+}
+#predefined {
+	width: 200px;
+}
+/* ----- */

src/messenger/webim/styles/silver/templates/agentchat.tpl

@@ -0,0 +1 @@
+${include:chat.tpl}

src/messenger/webim/styles/silver/templates/agentrochat.tpl

@@ -0,0 +1 @@
+${include:chat.tpl}

src/messenger/webim/styles/silver/templates/chat.tpl

@@ -0,0 +1,175 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
+<head>
+	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
+	<title>${msg:chat.window.title.agent}</title>	
+	<link rel="shortcut icon" href="${webimroot}/images/favicon.ico" type="image/x-icon" />
+	<link rel="stylesheet" type="text/css" href="${tplroot}/chat.css" media="all" />
+	<script type="text/javascript" src="${webimroot}/js/${jsver}/common.js"></script>
+	<script type="text/javascript" src="${webimroot}/js/${jsver}/brws.js"></script>
+	<script type="text/javascript">
+		<!--
+		var threadParams = {
+			servl:"${webimroot}/thread.php",wroot:"${webimroot}",frequency:${page:frequency},${if:user}user:"true",${endif:user}threadid:${page:ct.chatThreadId},token:${page:ct.token},cssfile:"${tplroot}/chat.css",ignorectrl:${page:ignorectrl}
+		};
+		var stxt = 10;
+		function getClientHeight() {
+			return document.compatMode=='CSS1Compat' || !window.opera?document.documentElement.clientHeight:document.body.clientHeight;
+		}
+		function getClientWidth() {
+			return document.compatMode=='CSS1Compat' || !window.opera?document.documentElement.clientWidth:document.body.clientWidth;
+		}
+		function setTrueHeight() {
+			chatHeight = getClientHeight();
+			someHeight = chatHeight-document.getElementById("top").offsetHeight-document.getElementById("chatheader").offsetHeight-document.getElementById("message").offsetHeight-document.getElementById("send").offsetHeight-1;
+			document.getElementById("chat").style.height = (someHeight) + "px";
+			document.getElementById("chatwnd").style.height = (someHeight-38) + "px";
+			${if:user}
+				document.getElementById("avatar-wrapper").style.height = (someHeight-39) + "px";
+			${endif:user}
+
+			chatWidth = getClientWidth();
+			${if:user}
+				someWidth = chatWidth-28-120;
+			${else:user}
+				someWidth = chatWidth-28;
+			${endif:user}
+			document.getElementById("chatwnd").style.width = (someWidth) + "px";
+		}
+		function enlargeFontSize() {
+			stxt += 2;
+			if (stxt > 14) {
+				stxt = 14;
+			}
+			window.chatwnd.document.getElementById("content").style.fontSize = (stxt) + "px";
+		}
+		function reduceFontSize() {
+			stxt -= 2;
+			if (stxt < 8) {
+				stxt = 8;
+			}
+			window.chatwnd.document.getElementById("content").style.fontSize = (stxt) + "px";
+		}
+		window.onresize = setTrueHeight;		
+		//-->
+	</script>
+	<script type="text/javascript" src="${webimroot}/js/${jsver}/chat.js"></script>
+</head>
+<body class="body">
+	<div id="top">
+		<div id="logo">
+			${if:ct.company.chatLogoURL}
+				${if:webimHost}
+					<a onclick="window.open('${page:webimHost}');return false;" href="${page:webimHost}">
+						<img onload="setTrueHeight();" src="${page:ct.company.chatLogoURL}" alt=""/>
+					</a>
+				${else:webimHost}
+					<img onload="setTrueHeight();" src="${page:ct.company.chatLogoURL}" alt=""/>
+				${endif:webimHost}
+			${else:ct.company.chatLogoURL}
+				${if:webimHost}
+					<a onclick="window.open('${page:webimHost}');return false;" href="${page:webimHost}">
+						<img onload="setTrueHeight();" src="${webimroot}/images/webimlogo.gif" alt=""/>
+					</a>
+				${else:webimHost}
+					<img onload="setTrueHeight();" src="${webimroot}/images/webimlogo.gif" alt=""/>
+				${endif:webimHost}
+			${endif:ct.company.chatLogoURL}
+			&nbsp;
+			<div id="page-title">${page:chat.title}</div>
+		</div>
+	</div>
+	<div id="chatheader">
+		<div class="bgc"><div class="bgl"><div class="bgr">
+			${if:agent}
+				<div id="changename2">
+					${if:historyParams}
+						${msg:chat.window.chatting_with}
+						<a href="${page:historyParamsLink}" target="_blank" title="${msg:page.analysis.userhistory.title}" onclick="this.newWindow = window.open('${page:historyParamsLink}', 'UserHistory', 'toolbar=0,scrollbars=0,location=0,statusbar=1,menubar=0,width=703,height=380,resizable=1');this.newWindow.focus();this.newWindow.opener=window;return false;">${page:ct.user.name}</a>
+					${else:historyParams}
+						${msg:chat.window.chatting_with} <strong>${page:ct.user.name}</strong>
+					${endif:historyParams}
+				</div>
+			${endif:agent}
+			${if:user}
+				${if:canChangeName}
+					<div id="changename1" style="display:${page:displ1};">
+						<div class="you">${msg:chat.client.name}</div>
+						<div class="input-name"><input id="uname" type="text" size="12" value="${page:ct.user.name}" class="username" /></div>
+						<a class="changename" href="javascript:void(0)" onclick="return false;" title="${msg:chat.client.changename}"><img class="tplimage iexec" src="${webimroot}/images/free.gif" alt="&gt;&gt;" /></a>
+					</div>
+					<div id="changename2" style="display:${page:displ2};">
+						<div class="you2">${msg:chat.client.name}</div>
+						<a id="unamelink" href="javascript:void(0)" onclick="return false;" title="${msg:chat.client.changename}">${page:ct.user.name}</a>
+						<a class="changename" href="javascript:void(0)" onclick="return false;" title="${msg:chat.client.changename}"><img class="tplimage ichangeuser" src="${webimroot}/images/free.gif" alt="" /></a>
+					</div>
+				${else:canChangeName}
+					<div id="changename1"><div id="you">${msg:chat.client.name}&nbsp;${page:ct.user.name}</div></div>
+				${endif:canChangeName}
+			${endif:user}
+			<div class="buttons">
+				<a href="javascript:void(0)" onclick="reduceFontSize();"><img class="tplimage fontreduce" src="${webimroot}/images/free.gif" alt="Reduce font&nbsp;" /></a>
+				<a href="javascript:void(0)" onclick="enlargeFontSize();"><img class="tplimage fontenlarge" src="${webimroot}/images/free.gif" alt="Enlarge font&nbsp;" /></a>
+				<img class="empty" src="${webimroot}/images/free.gif" alt="" />
+				${if:user}
+					<a href="${page:mailLink}&amp;style=${styleid}" target="_blank" title="${msg:chat.window.toolbar.mail_history}" onclick="this.newWindow = window.open('${page:mailLink}&amp;style=${styleid}', 'ForwardMail', 'toolbar=0,scrollbars=0,location=0,statusbar=1,menubar=0,width=603,height=254,resizable=0'); if (this.newWindow != null) {this.newWindow.focus();this.newWindow.opener=window;}return false;"><img class="tplimage iemail" src="${webimroot}/images/free.gif" alt="Mail&nbsp;"/></a>
+				${endif:user}
+				${if:agent}
+					${if:canpost}
+						<a href="${page:redirectLink}&amp;style=${styleid}" title="${msg:chat.window.toolbar.redirect_user}"><img class="tplimage isend" src="${webimroot}/images/free.gif" alt="Redirect&nbsp;" /></a>
+					${endif:canpost}
+					${if:historyParams}
+						<a href="${page:historyParamsLink}" target="_blank" title="${msg:page.analysis.userhistory.title}" onclick="this.newWindow = window.open('${page:historyParamsLink}', 'UserHistory', 'toolbar=0,scrollbars=0,location=0,statusbar=1,menubar=0,width=720,height=480,resizable=1');this.newWindow.focus();this.newWindow.opener=window;return false;"><img class="tplimage ihistory" src="${webimroot}/images/free.gif" alt="History&nbsp;"/></a>
+					${endif:historyParams}
+				${endif:agent}
+				<a id="togglesound" href="javascript:void(0)" onclick="return false;" title="Turn off sound"><img id="soundimg" class="tplimage isound" src="${webimroot}/images/free.gif" alt="Sound&nbsp;" /></a>
+				<a id="refresh" href="javascript:void(0)" onclick="return false;" title="${msg:chat.window.toolbar.refresh}"><img class="tplimage irefresh" src="${webimroot}/images/free.gif" alt="Refresh&nbsp;" /></a>
+				${if:sslLink}
+					<a href="${page:sslLink}&amp;style=${styleid}" title="SSL" ><img class="tplimage issl" src="${webimroot}/images/free.gif" alt="SSL&nbsp;"/></a>
+				${endif:sslLink}
+				<a class="closethread" href="javascript:void(0)" onclick="return false;" title="${msg:chat.window.close_title}"><img class="tplimage iclosewin" src="${webimroot}/images/free.gif" alt="${msg:chat.window.close_title}"/></a>
+			</div>
+		</div></div></div>
+	</div>
+	<div id="chat">
+		<div class="bgl"><div class="bgr"><div class="sdwbgc"><div class="sdwbgl"><div class="sdwbgr">
+			<iframe onload="setTrueHeight();" id="chatwnd" name="chatwnd" src="${if:neediframesrc}${webimroot}/images/blank.html${endif:neediframesrc}" frameborder="0" style="overflow:auto;">
+				Sorry, your browser does not support iframes; try a browser that supports W3 standards.
+			</iframe>
+			<div id="inf">
+				<div id="engineinfo" style="display:none;"></div>
+				<div id="typingdiv" style="display:none;">${msg:typing.remote}</div>
+			</div>
+			${if:user}
+				<div id="avatar-wrapper">
+					<div id="avatarwnd">&nbsp;</div>
+				</div>
+			${endif:user}
+			</div></div></div></div></div>
+	</div>
+	<div id="message">
+	${if:canpost}
+		<div class="bgc"><div class="bgl"><div class="bgr">
+			<textarea id="msgwnd" class="message" tabindex="0" rows="4" cols="10"></textarea>
+		</div></div></div>
+	${endif:canpost}
+	</div>
+	<div id="send">
+	${if:canpost}
+		<div id="postmessage">
+			<div id="predefined-wrapper">
+				${if:agent}
+					<select id="predefined" size="1" class="answer">
+					<option>${msg:chat.window.predefined.select_answer}</option>
+					${page:predefinedAnswers}
+					</select>
+				${endif:agent}
+			</div>
+			<a id="sndmessagelnk" href="javascript:void(0)" onclick="return false;" title="${msg:chat.window.send_message}">${msg:chat.window.send_message_short,send_shortcut}</a>
+			<div class="clear">&nbsp;</div>
+		</div>
+	${endif:canpost}
+		<div id="footer">${msg:chat.window.poweredby} <a id="poweredByLink" href="http://mibew.org" title="Mibew Community" target="_blank">mibew.org</a></div>
+	</div>
+</body>
+</html>