Commit 6c7b43b3 authored by 神楽坂玲奈's avatar 神楽坂玲奈

rooms

parent e1186b5f
// Generated by CoffeeScript 1.4.0
(function() {
var Room, Rooms, Server,
__hasProp = {}.hasOwnProperty,
__extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
__bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
Server = (function(_super) {
__extends(Server, _super);
function Server() {
return Server.__super__.constructor.apply(this, arguments);
}
Server.configure("Server", "name", "ip", "port", "index");
Server.extend(Spine.Model.Ajax);
Server.url = "/servers.json";
return Server;
})(Spine.Model);
Room = (function(_super) {
__extends(Room, _super);
function Room() {
return Room.__super__.constructor.apply(this, arguments);
}
Room.configure("Room", "name", "status");
return Room;
})(Spine.Model);
Rooms = (function(_super) {
__extends(Rooms, _super);
function Rooms() {
this.render = __bind(this.render, this);
Rooms.__super__.constructor.apply(this, arguments);
Room.bind("refresh", this.render);
}
Rooms.prototype.render = function() {
return this.html($('#room_template').tmpl(_.sortBy(Room.all(), this.sort)));
};
Rooms.prototype.sort = function(room) {
return [room.status === "wait" ? 0 : 1];
};
return Rooms;
})(Spine.Controller);
$(document).ready(function() {
var rooms;
Candy.init('/http-bind/', {
core: {
debug: false,
autojoin: ['mycard@conference.my-card.in']
},
view: {
resources: '/vendor/stylesheets/candy/',
language: 'cn'
}
});
Candy.Core.connect('zh99998测试80@my-card.in', 'zh112998');
rooms = new Rooms({
el: $('#rooms')
});
Server.one("refresh", function() {
var websocket, wsServer;
wsServer = 'ws://mycard-server.my-card.in:9998';
websocket = new WebSocket(wsServer);
websocket.onopen = function() {
return console.log("Connected to WebSocket server.");
};
websocket.onclose = function() {
return console.log("Disconnected");
};
websocket.onmessage = function(evt) {
var room, _i, _len;
console.log('Retrieved data from server: ' + evt.data);
rooms = JSON.parse(evt.data);
for (_i = 0, _len = rooms.length; _i < _len; _i++) {
room = rooms[_i];
if (room._deleted) {
if (Room.exists(room.id)) {
Room.find(room.id).destroy();
}
}
}
return Room.refresh((function() {
var _j, _len1, _results;
_results = [];
for (_j = 0, _len1 = rooms.length; _j < _len1; _j++) {
room = rooms[_j];
if (!room._deleted) {
_results.push(room);
}
}
return _results;
})());
};
return websocket.onerror = function(evt) {
return console.log('Error occured: ' + evt.data);
};
});
return Server.fetch();
});
}).call(this);
body{background:#fbfbfb;}
/*顶部*/
.card_top{margin:0;height:80px;width:100%;border-bottom:1px solid #dddddd;box-shadow:0px 1px 5px #dddddd;background:#ffffff;}
.card_logo{
width:216px;height:69px;padding:0px 0 0 25px;float:left;
img{margin:10px 0 0 0;border-right:1px solid #dddddd;padding:0 15px 0 0;}
}
.card_form{
float:left;height:60px;margin:0 0 0 10px;padding:20px 0 0 0;
select{color:#147CC3;padding:4px 5px;width:120px;font-size:12px;margin:8px 0 0 11px;float:left;}
input[type=button]{background:#147CC3;border:none;border-radius:5px;width:90px;color:#ffffff;height:24px;margin:8px 0 0 25px;cursor:pointer;}
}
.log_reg{
float:right;font-size:12px;padding:34px 25px 0 0;
a{
color:#666666;text-decoration:none;
&.login{color:#147CC3;}
}
span{color:#cccccc;}
}
/*中央*/
.card_center{padding:20px;}
#rooms{float:left;}
.online_list{
float:left;max-width:210px;height:100%;border:1px solid #dddddd;padding:0 0 10px 0;
ul{
background:#ffffff;overflow-y:hidden;position:relative;
&:hover{overflow-y:scroll;}
li{
border-top:1px solid #dddddd;padding:8px 8px;height:32px;
&.online_botttom{background:url(../images/gradual_change.png) repeat-x;height:10px;bottom:0;position:fixed;width:160px;padding:0 8px;border:none;}
img{height:32px;width:32px;float:left;}span{line-height:32px;font-size:12px;padding:0 0 0 10px;float:left;}
&:hover{background:#eeeeee;}
}
}
}
.online_title{height:20px;background:#f9f9f9;width:190px;font-size:14px;line-height:16px;padding:10px 10px;color:#147CC3;}
AddDefaultCharset UTF-8
Options +MultiViews
RewriteEngine On
RewriteRule http-bind/ http://chat.my-card.in:5280/http-bind/ [P]
\ No newline at end of file
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>mycard rooms</title>
<meta name="description" content="mycard在线大厅">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<link rel="stylesheet" href="/vendor/stylesheets/normalize.css">
<link rel="stylesheet/less" type="text/css" href="/assets/stylesheets/rooms.less" media="all" />
<script type="text/javascript" src="/vendor/javascripts/less-1.3.1.min.js"></script>
<script src="/vendor/javascripts/modernizr-2.6.2.min.js"></script>
<script id="room_template" type="text/x-jquery-tmpl">
<div class="room" id="room_${id}">
<span class="room_name">${name}</span>
<span class="room_id">${id}</span>
<div class="room_users" />
{{each users}}
<div class="user">
<span class="user_name">${name}</span>
</div>
{{/each}}
</div>
</div>
</script>
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<div class="card_top">
<div class="card_logo">
<img src="/assets/images/logo.png" alt="" />
</div>
<div class="card_form">
<select name="" id="">
<option value="">选择分区</option>
<option value=""></option>
<option value=""></option>
</select>
<input type="button" value="建立房间" />
</div>
<div class="log_reg">
<a href="">注册</a>
<span>&nbsp;&nbsp;|&nbsp;&nbsp;</span>
<a class="login" href="">登录</a>
</div>
</div>
<div class="card_center">
<div id="rooms"></div>
<div class="online_list">
<div class="online_title">在线用户</div>
<ul>
<li>
<img src="/assets/images/hs1.jpg" alt="" /><span>Yolua Mesiade</span>
</li>
<li>
<img src="/assets/images/hs1.jpg" alt="" /><span>Yolua Mesiade</span>
</li>
<li>
<img src="/assets/images/hs1.jpg" alt="" /><span>Yolua Mesiade</span>
</li>
<li>
<img src="/assets/images/hs1.jpg" alt="" /><span>Yolua Mesiade</span>
</li>
<li>
<img src="/assets/images/hs1.jpg" alt="" /><span>Yolua Mesiade</span>
</li>
<li>
<img src="/assets/images/hs1.jpg" alt="" /><span>Yolua Mesiade</span>
</li>
<li>
<img src="/assets/images/hs1.jpg" alt="" /><span>Yolua Mesiade</span>
</li>
<li>
<img src="/assets/images/hs1.jpg" alt="" /><span>Yolua Mesiade</span>
</li>
<li>
<img src="/assets/images/hs1.jpg" alt="" /><span>Yolua Mesiade</span>
</li>
<li>
<img src="/assets/images/hs1.jpg" alt="" /><span>Yolua Mesiade</span>
</li>
<li>
<img src="/assets/images/hs1.jpg" alt="" /><span>Yolua Mesiade</span>
</li>
<li>
<img src="/assets/images/hs1.jpg" alt="" /><span>Yolua Mesiade</span>
</li>
<li>
<img src="/assets/images/hs1.jpg" alt="" /><span>Yolua Mesiade</span>
</li>
<li>
<img src="/assets/images/hs1.jpg" alt="" /><span>Yolua Mesiade</span>
</li>
<li>
<img src="/assets/images/hs1.jpg" alt="" /><span>Yolua Mesiade</span>
</li>
<li>
<img src="/assets/images/hs1.jpg" alt="" /><span>Yolua Mesiade</span>
</li>
<li>
<img src="/assets/images/hs1.jpg" alt="" /><span>Yolua Mesiade</span>
</li>
<li>
<img src="/assets/images/hs1.jpg" alt="" /><span>Yolua Mesiade</span>
</li>
<li>
<img src="/assets/images/hs1.jpg" alt="" /><span>Yolua Mesiade</span>
</li>
<!-- <li class="online_botttom"></li> -->
</ul>
</div>
<div style="clear:left;"></div>
</div>
<div id="candy" style="top:auto;height:260px;"></div>
<script src="/vendor/javascripts/jquery-1.8.2.min.js"></script>
<script src="/vendor/javascripts/jquery.tmpl.min.js"></script>
<!--<script src="/vendor/javascripts/plugins.js"></script>-->
<script src="/vendor/javascripts/spine/spine.js"></script>
<script src="/vendor/javascripts/spine/ajax.js"></script>
<script src="/vendor/javascripts/spine/relation.js"></script>
<script src="/vendor/javascripts/underscore-min.js"></script>
<link rel="stylesheet" type="text/css" href="/vendor/stylesheets/candy/default.css" />
<script type="text/javascript" src="/vendor/javascripts/candy.libs.min.js"></script>
<script type="text/javascript" src="/vendor/javascripts/candy.min.js"></script>
<script src="/assets/javascripts/rooms.js"></script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<!--<script>
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>-->
</body>
</html>
<!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>Candy - Chats are not dead yet</title>
<link rel="stylesheet/less" type="text/css" href="/assets/stylesheets/rooms.less" media="all" />
<script type="text/javascript" src="/vendor/javascripts/less-1.3.1.min.js"></script>
<script type="text/javascript" src="/vendor/javascripts/jquery-1.8.2.min.js"></script>
<!--<link rel="stylesheet" type="text/css" href="assets/stylesheets/css_clear.css" />-->
<link rel="stylesheet" type="text/css" href="/vendor/stylesheets/candy/default.css" />
<script type="text/javascript" src="http://benpickles.github.com/js-model/dist/js-model-0.11.0.min.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.rc.1.js"></script>
<script type="text/javascript" src="/vendor/javascripts/candy.libs.min.js"></script>
<script type="text/javascript" src="/vendor/javascripts/candy.min.js"></script>
<!--<script type="text/javascript" src="dump.js"></script>-->
<script type="text/javascript">
$(document).ready(function(){
var pageHight = (document.documentElement.clientHeight)-450;
// alert(pageHight);
$(".online_list ul").height(pageHight);
});
</script>
<script type="text/javascript">
var Room = Model("room", function(){
this.include({
users: function(){
var id = this.id()
return User.select(function(){
return this.attr("room_id") == id
})
}
})
})
var User = Model("user", function(){
this.include({
room: function(){
var room_id = this.attr("room_id")
return Room.detect(function(){
return this.id() == room_id
})
}
})
})
$(document).ready(function(){
var room_template = Handlebars.compile($("#room-template").html())
var render = function(room){
var r = room.attributes
r["users"] = room.users().map(function(){
return this.attributes
})
return room_template(r)
}
Room.bind('add', function(room){
$('#rooms').append(render(room))
})
Room.bind('remove', function(room){
$("#room_" + room.id()).remove()
})
var update = function(servers){
servers.find('server').each(function(){
$(this).children('room').each(function(){
var id = $(this).attr('id')
if($(this).attr('_deleted')){
var room = Room.detect(function(){return id == this.id()})
if(room){
room.destroy()
}
}else{
var room = new Room(get_attributes(this))
var users = room.users().all()
for(var i in users){
users[i].destroy()
}
$(this).children('user').each(function(){
user = new User(get_attributes(this))
user.attr('room_id', room.id())
user.save()
})
room.save()
room.bind('update', function(){
$('#room_' + this.id()).html(render(this))
})
}
})
})
}
Candy.init('/http-bind/', {
core: { debug: false, autojoin: ['mycard@conference.my-card.in'] },
view: { resources: '/vendor/stylesheets/candy/', language: 'cn' }
});
Candy.Core.connect('zh99998@my-card.in', 'zh112998');
var old_presence = Candy.Core.Event.Jabber.Room.Presence
var old_message = Candy.Core.Event.Jabber.Room.Message
Candy.Core.Event.Jabber.Room.Presence = function(msg){old_presence(msg); update(msg)}
Candy.Core.Event.Jabber.Room.Message = function(msg){old_message(msg); update(msg)}
});
function get_attributes(element){
var result = {}
for(var i in element.attributes) {
result[element.attributes[i].nodeName] = element.attributes[i].nodeValue
}
return result
}
</script>
<script id="room-template" type="text/x-handlebars-template">
<div class="room" id="room_{{id}}">
<span class="room[name]">{{name}}</span>
<span class="room[id]">{{id}}</span>
<div class="room[users]" />
{{#each users}}
<div class="user">
<span class="user[name]">{{name}}</span>
</div>
{{/each}}
</div>
</div>
</script>
</head>
<body>
<div class="card_top">
<div class="card_logo">
<img src="assets/images/logo.png" alt="" />
</div>
<div class="card_form">
<select name="" id="">
<option value="">选择分区</option>
<option value=""></option>
<option value=""></option>
</select>
<input type="button" value="建立房间" />
</div>
<div class="log_reg">
<a href="">注册</a>
<span>&nbsp;&nbsp;|&nbsp;&nbsp;</span>
<a class="login" href="">登录</a>
</div>
</div>
<div class="card_center">
<div id="rooms"></div>
<div class="online_list">
<div class="online_title">在线用户</div>
<ul>
<li>
<img src="assets/images/hs1.jpg" alt="" /><span>Yolua Mesiade</span>
</li>
<li>
<img src="assets/images/hs1.jpg" alt="" /><span>Yolua Mesiade</span>
</li>
<li>
<img src="assets/images/hs1.jpg" alt="" /><span>Yolua Mesiade</span>
</li>
<li>
<img src="assets/images/hs1.jpg" alt="" /><span>Yolua Mesiade</span>
</li>
<li>
<img src="assets/images/hs1.jpg" alt="" /><span>Yolua Mesiade</span>
</li>
<li>
<img src="assets/images/hs1.jpg" alt="" /><span>Yolua Mesiade</span>
</li>
<li>
<img src="assets/images/hs1.jpg" alt="" /><span>Yolua Mesiade</span>
</li>
<li>
<img src="assets/images/hs1.jpg" alt="" /><span>Yolua Mesiade</span>
</li>
<li>
<img src="assets/images/hs1.jpg" alt="" /><span>Yolua Mesiade</span>
</li>
<li>
<img src="assets/images/hs1.jpg" alt="" /><span>Yolua Mesiade</span>
</li>
<li>
<img src="assets/images/hs1.jpg" alt="" /><span>Yolua Mesiade</span>
</li>
<li>
<img src="assets/images/hs1.jpg" alt="" /><span>Yolua Mesiade</span>
</li>
<li>
<img src="assets/images/hs1.jpg" alt="" /><span>Yolua Mesiade</span>
</li>
<li>
<img src="assets/images/hs1.jpg" alt="" /><span>Yolua Mesiade</span>
</li>
<li>
<img src="assets/images/hs1.jpg" alt="" /><span>Yolua Mesiade</span>
</li>
<li>
<img src="assets/images/hs1.jpg" alt="" /><span>Yolua Mesiade</span>
</li>
<li>
<img src="assets/images/hs1.jpg" alt="" /><span>Yolua Mesiade</span>
</li>
<li>
<img src="assets/images/hs1.jpg" alt="" /><span>Yolua Mesiade</span>
</li>
<li>
<img src="assets/images/hs1.jpg" alt="" /><span>Yolua Mesiade</span>
</li>
<!-- <li class="online_botttom"></li> -->
</ul>
</div>
<div style="clear:left;"></div>
</div>
<div id="candy" style="top:auto;height:260px;"></div>
</body>
</html>
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
/**
* Chat CSS
*
* @author Michael <michael.weibel@gmail.com>
* @author Patrick <patrick.stadler@gmail.com>
* @copyright 2011 Amiado Group AG, All rights reserved.
*/
html, body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
#candy {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
background-color: #ccc;
color: #333;
overflow: hidden;
}
a {
color: #333;
text-decoration: none;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
#chat-tabs {
list-style: none;
margin: 0 200px 0 0;
padding: 0;
overflow: auto;
overflow-y: hidden;
}
#chat-tabs li {
margin: 0;
float: left;
position: relative;
border-right: 1px solid #aaa;
white-space: nowrap;
}
#chat-tabs li a {
background-color: #ddd;
padding: 6px 50px 4px 10px;
display: inline-block;
color: #666;
height: 20px;
}
#chat-tabs li.active a {
background-color: white;
color: black;
}
#chat-tabs li a.transition {
position: absolute;
top: 0;
right: 0;
padding: 0;
width: 35px;
height: 30px;
background: url(img/tab-transitions.png) repeat-y left;
}
#chat-tabs li a.close {
background-color: transparent;
position: absolute;
top: 0;
right: 0;
height: auto;
padding: 5px;
margin: 1px 5px 0 2px;
color: #999;
}
#chat-tabs li.active a.transition {
color: gray;
background: url(img/tab-transitions.png) repeat-y -50px;
}
#chat-tabs li a.close:hover, #chat-tabs li.active a.close:hover {
color: black;
}
#chat-tabs li .unread {
color: white;
background-color: #9b1414;
padding: 2px 4px;
font-weight: bold;
font-size: 10px;
position: absolute;
top: 6px;
right: 22px;
border-radius: 3px;
}
#chat-tabs li.offline a.label {
text-decoration: line-through;
}
#chat-toolbar {
position: fixed;
bottom: 0;
right: 0;
font-size: 11px;
color: #666;
width: 200px;
height: 24px;
padding-top: 7px;
border-top: 1px solid #aaa;
background-color: #d9d9d9;
display: none;
}
#chat-toolbar li {
width: 16px;
height: 16px;
margin-left: 5px;
float: left;
display: inline-block;
cursor: pointer;
background-position: top left;
background-repeat: no-repeat;
}
#chat-toolbar #emoticons-icon {
background-image: url(img/action/emoticons.png);
}
#chat-toolbar .context {
background-image: url(img/action/settings.png);
display: none;
}
.role-moderator #chat-toolbar .context, .affiliation-owner #chat-toolbar .context {
display: inline-block;
}
#chat-sound-control {
background-image: url(img/action/sound-off.png);
}
#chat-sound-control.checked {
background-image: url(img/action/sound-on.png);
}
#chat-autoscroll-control {
background-image: url(img/action/autoscroll-off.png);
}
#chat-autoscroll-control.checked {
background-image: url(img/action/autoscroll-on.png);
}
#chat-statusmessage-control {
background: url(img/action/statusmessage-off.png);
}
#chat-statusmessage-control.checked {
background: url(img/action/statusmessage-on.png);
}
#chat-toolbar .usercount {
background-image: url(img/action/usercount.png);
cursor: default;
padding-left: 20px;
width: auto;
margin-right: 5px;
float: right;
}
.usercount span {
display: inline-block;
padding: 1px 3px;
background-color: #ccc;
font-weight: bold;
border-radius: 3px;
}
.room-pane {
display: none;
}
.roster-pane {
position: absolute;
overflow: auto;
top: 0;
right: 0;
bottom: 0;
width: 200px;
margin: 30px 0 32px 0;
}
.roster-pane .user {
cursor: pointer;
padding: 4px 7px;
font-size: 12px;
margin: 0 4px 2px 4px;
opacity: 0;
display: none;
color: #666;
clear: both;
height: 15px;
background-color: #ddd;
}
.roster-pane .user:hover {
background-color: #eee;
}
.roster-pane .user.status-ignored {
cursor: default;
}
.roster-pane .user.me {
font-weight: bold;
cursor: default;
}
.roster-pane .user.me:hover {
background-color: #ddd;
}
.roster-pane .label {
float: left;
width: 110px;
overflow: hidden;
white-space: nowrap;
}
.roster-pane li {
width: 16px;
height: 16px;
float: right;
display: block;
margin-left: 3px;
background-repeat: no-repeat;
background-position: center;
}
.roster-pane li.role {
cursor: default;
display: none;
}
.roster-pane li.role-moderator {
background-image: url(img/roster/role-moderator.png);
display: block;
}
.roster-pane li.affiliation-owner {
background-image: url(img/roster/affiliation-owner.png);
display: block;
}
.roster-pane li.ignore {
background-image: url(img/roster/ignore.png);
display: none;
}
.roster-pane .status-ignored li.ignore {
display: block;
}
.roster-pane .me li.context {
display: none;
}
.roster-pane li.context {
background-image: url(img/action/menu.png);
cursor: pointer;
}
.roster-pane li.context:hover {
background-color: #ccc;
border-radius: 4px;
}
.message-pane-wrapper {
clear: both;
overflow: auto;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: auto;
width: auto;
margin: 30px 200px 32px 0;
background-color: white;
font-size: 13px;
}
.message-pane {
margin: 0;
padding: 5px 10px 2px 10px;
}
.message-pane dt {
width: 55px;
float: left;
color: #888;
font-size: 10px;
text-align: right;
padding-top: 4px;
}
.message-pane dd {
overflow: auto;
padding: 2px 0 1px 130px;
margin: 0 0 2px 0;
white-space: -o-pre-wrap; /* Opera */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
.message-pane dd .label {
font-weight: bold;
white-space: nowrap;
display: block;
margin-left: -125px;
width: 120px;
float: left;
overflow: hidden;
}
.message-pane .subject {
color: #a00;
font-weight: bold;
}
.message-pane .adminmessage {
color: #a00;
font-weight: bold;
}
.message-pane .infomessage {
color: #888;
font-style: italic;
padding-left: 5px;
}
.message-pane .emoticon {
vertical-align: text-bottom;
height: 15px;
width: 15px;
}
.message-form-wrapper {
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: auto;
margin-right: 200px;
border-top: 1px solid #ccc;
background-color: #f2f2f2;
height: 31px;
}
.message-form {
position: fixed;
bottom: 0;
left: 0;
right: 0;
margin-right: 320px;
padding: 0;
}
.message-form input {
border: 0 none;
padding: 5px 10px;
font-size: 14px;
width: 100%;
display: block;
outline-width: 0;
background-color: #f2f2f2;
}
.message-form input.submit {
cursor: pointer;
background-color: #ccc;
color: #666;
position: fixed;
bottom: 0;
right: 0;
margin: 3px 203px 3px 3px;
padding: 5px 7px;
width: auto;
font-size: 12px;
line-height: 12px;
height: 25px;
font-weight: bold;
border-radius: 10px;
}
#tooltip {
position: absolute;
z-index: 10;
display: none;
margin: 18px -18px 2px -2px;
color: white;
font-size: 11px;
padding: 5px 0;
background: url(img/tooltip-arrows.gif) no-repeat left bottom;
}
#tooltip div {
background-color: black;
padding: 2px 5px;
zoom: 1;
}
#context-menu {
position: absolute;
z-index: 10;
display: none;
padding: 15px 10px;
margin: 8px -28px -8px -12px;
background: url(img/context-arrows.gif) no-repeat left bottom;
}
#context-menu ul {
background-color: black;
color: white;
font-size: 12px;
padding: 2px;
zoom: 1;
}
#context-menu li {
padding: 3px 5px 3px 20px;
line-height: 12px;
cursor: pointer;
margin-bottom: 2px;
background: 1px no-repeat;
white-space: nowrap;
}
#context-menu li:hover {
background-color: #666;
}
#context-menu li:last-child {
margin-bottom: 0;
}
#context-menu .private {
background-image: url(img/action/private.png);
}
#context-menu .ignore {
background-image: url(img/action/ignore.png);
}
#context-menu .unignore {
background-image: url(img/action/unignore.png);
}
#context-menu .kick {
background-image: url(img/action/kick.png);
}
#context-menu .ban {
background-image: url(img/action/ban.png);
}
#context-menu .subject {
background-image: url(img/action/subject.png);
}
#context-menu .emoticons {
padding-left: 5px;
width: 85px;
white-space: normal;
}
#context-menu .emoticons:hover {
background-color: transparent;
}
#context-menu .emoticons img {
cursor: pointer;
margin: 3px;
height: 15px;
width: 15px;
}
#chat-modal {
background: url(img/modal-bg.png);
width: 300px;
padding: 20px 5px;
color: white;
font-size: 16px;
position: fixed;
left: 50%;
top: 50%;
margin-left: -155px;
margin-top: -45px;
text-align: center;
display: none;
z-index: 100;
border-radius: 5px;
}
#chat-modal-overlay {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 90;
background-image: url(img/overlay.png);
}
#chat-modal.modal-login {
display: block;
margin-top: -100px;
}
#chat-modal-spinner {
display: none;
margin-left: 15px;
}
#chat-modal form {
margin: 15px 0;
}
#chat-modal label, #chat-modal input, #chat-modal select {
display: block;
float: left;
line-height: 26px;
font-size: 16px;
margin: 5px 0;
}
#chat-modal input, #chat-modal select {
padding: 2px;
line-height: 16px;
width: 150px;
}
#chat-modal label {
text-align: right;
padding-right: 1em;
clear: both;
width: 100px;
}
#chat-modal input.button {
float: none;
display: block;
margin: 5px auto;
clear: both;
position: relative;
top: 10px;
width: 200px;
}
#chat-modal .close {
position: absolute;
right: 0;
display: none;
padding: 0 5px;
margin: -17px 3px 0 0;
color: white;
border-radius: 3px;
}
#chat-modal .close:hover {
background-color: #333;
}
Simple Smileys is a set of 49 clean, free as in freedom, Public Domain smileys.
For more packages or older versions, visit http://simplesmileys.org
/*! normalize.css v1.0.1 | MIT License | git.io/normalize */
/* ==========================================================================
HTML5 display definitions
========================================================================== */
/*
* Corrects `block` display not defined in IE 6/7/8/9 and Firefox 3.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
display: block;
}
/*
* Corrects `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
*/
audio,
canvas,
video {
display: inline-block;
*display: inline;
*zoom: 1;
}
/*
* Prevents modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/*
* Addresses styling for `hidden` attribute not present in IE 7/8/9, Firefox 3,
* and Safari 4.
* Known issue: no IE 6 support.
*/
[hidden] {
display: none;
}
/* ==========================================================================
Base
========================================================================== */
/*
* 1. Corrects text resizing oddly in IE 6/7 when body `font-size` is set using
* `em` units.
* 2. Prevents iOS text size adjust after orientation change, without disabling
* user zoom.
*/
html {
font-size: 100%; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
-ms-text-size-adjust: 100%; /* 2 */
}
/*
* Addresses `font-family` inconsistency between `textarea` and other form
* elements.
*/
html,
button,
input,
select,
textarea {
font-family: sans-serif;
}
/*
* Addresses margins handled incorrectly in IE 6/7.
*/
body {
margin: 0;
}
/* ==========================================================================
Links
========================================================================== */
/*
* Addresses `outline` inconsistency between Chrome and other browsers.
*/
a:focus {
outline: thin dotted;
}
/*
* Improves readability when focused and also mouse hovered in all browsers.
*/
a:active,
a:hover {
outline: 0;
}
/* ==========================================================================
Typography
========================================================================== */
/*
* Addresses font sizes and margins set differently in IE 6/7.
* Addresses font sizes within `section` and `article` in Firefox 4+, Safari 5,
* and Chrome.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
h2 {
font-size: 1.5em;
margin: 0.83em 0;
}
h3 {
font-size: 1.17em;
margin: 1em 0;
}
h4 {
font-size: 1em;
margin: 1.33em 0;
}
h5 {
font-size: 0.83em;
margin: 1.67em 0;
}
h6 {
font-size: 0.75em;
margin: 2.33em 0;
}
/*
* Addresses styling not present in IE 7/8/9, Safari 5, and Chrome.
*/
abbr[title] {
border-bottom: 1px dotted;
}
/*
* Addresses style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome.
*/
b,
strong {
font-weight: bold;
}
blockquote {
margin: 1em 40px;
}
/*
* Addresses styling not present in Safari 5 and Chrome.
*/
dfn {
font-style: italic;
}
/*
* Addresses styling not present in IE 6/7/8/9.
*/
mark {
background: #ff0;
color: #000;
}
/*
* Addresses margins set differently in IE 6/7.
*/
p,
pre {
margin: 1em 0;
}
/*
* Corrects font family set oddly in IE 6, Safari 4/5, and Chrome.
*/
code,
kbd,
pre,
samp {
font-family: monospace, serif;
_font-family: 'courier new', monospace;
font-size: 1em;
}
/*
* Improves readability of pre-formatted text in all browsers.
*/
pre {
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word;
}
/*
* Addresses CSS quotes not supported in IE 6/7.
*/
q {
quotes: none;
}
/*
* Addresses `quotes` property not supported in Safari 4.
*/
q:before,
q:after {
content: '';
content: none;
}
/*
* Addresses inconsistent and variable font size in all browsers.
*/
small {
font-size: 80%;
}
/*
* Prevents `sub` and `sup` affecting `line-height` in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
/* ==========================================================================
Lists
========================================================================== */
/*
* Addresses margins set differently in IE 6/7.
*/
dl,
menu,
ol,
ul {
margin: 1em 0;
}
dd {
margin: 0 0 0 40px;
}
/*
* Addresses paddings set differently in IE 6/7.
*/
menu,
ol,
ul {
padding: 0 0 0 40px;
}
/*
* Corrects list images handled incorrectly in IE 7.
*/
nav ul,
nav ol {
list-style: none;
list-style-image: none;
}
/* ==========================================================================
Embedded content
========================================================================== */
/*
* 1. Removes border when inside `a` element in IE 6/7/8/9 and Firefox 3.
* 2. Improves image quality when scaled in IE 7.
*/
img {
border: 0; /* 1 */
-ms-interpolation-mode: bicubic; /* 2 */
}
/*
* Corrects overflow displayed oddly in IE 9.
*/
svg:not(:root) {
overflow: hidden;
}
/* ==========================================================================
Figures
========================================================================== */
/*
* Addresses margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
*/
figure {
margin: 0;
}
/* ==========================================================================
Forms
========================================================================== */
/*
* Corrects margin displayed oddly in IE 6/7.
*/
form {
margin: 0;
}
/*
* Define consistent border, margin, and padding.
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/*
* 1. Corrects color not being inherited in IE 6/7/8/9.
* 2. Corrects text not wrapping in Firefox 3.
* 3. Corrects alignment displayed oddly in IE 6/7.
*/
legend {
border: 0; /* 1 */
padding: 0;
white-space: normal; /* 2 */
*margin-left: -7px; /* 3 */
}
/*
* 1. Corrects font size not being inherited in all browsers.
* 2. Addresses margins set differently in IE 6/7, Firefox 3+, Safari 5,
* and Chrome.
* 3. Improves appearance and consistency in all browsers.
*/
button,
input,
select,
textarea {
font-size: 100%; /* 1 */
margin: 0; /* 2 */
vertical-align: baseline; /* 3 */
*vertical-align: middle; /* 3 */
}
/*
* Addresses Firefox 3+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
button,
input {
line-height: normal;
}
/*
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Corrects inability to style clickable `input` types in iOS.
* 3. Improves usability and consistency of cursor style between image-type
* `input` and others.
* 4. Removes inner spacing in IE 7 without affecting normal text inputs.
* Known issue: inner spacing remains in IE 6.
*/
button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button; /* 2 */
cursor: pointer; /* 3 */
*overflow: visible; /* 4 */
}
/*
* Re-set default cursor for disabled elements.
*/
button[disabled],
input[disabled] {
cursor: default;
}
/*
* 1. Addresses box sizing set to content-box in IE 8/9.
* 2. Removes excess padding in IE 8/9.
* 3. Removes excess padding in IE 7.
* Known issue: excess padding remains in IE 6.
*/
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
*height: 13px; /* 3 */
*width: 13px; /* 3 */
}
/*
* 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
* 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
* (include `-moz` to future-proof).
*/
input[type="search"] {
-webkit-appearance: textfield; /* 1 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box; /* 2 */
box-sizing: content-box;
}
/*
* Removes inner padding and search cancel button in Safari 5 and Chrome
* on OS X.
*/
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/*
* Removes inner padding and border in Firefox 3+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/*
* 1. Removes default vertical scrollbar in IE 6/7/8/9.
* 2. Improves readability and alignment in all browsers.
*/
textarea {
overflow: auto; /* 1 */
vertical-align: top; /* 2 */
}
/* ==========================================================================
Tables
========================================================================== */
/*
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment