mirror of
https://github.com/smogon/pokemon-showdown-client.git
synced 2026-09-08 11:59:08 -05:00
Stub new client
This commit is contained in:
Guangcong Luo
BIN
fx/client-bg.jpg
Normal file
BIN
fx/client-bg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 111 KiB |
BIN
fx/client-topbar-bg.png
Normal file
BIN
fx/client-topbar-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
@@ -4,7 +4,7 @@
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
||||
<title>Showdown!</title>
|
||||
<link rel="shortcut icon" href="//play.pokemonshowdown.com/favicon.ico" id="dynamic-favicon" />
|
||||
<link rel="stylesheet" href="//play.pokemonshowdown.com/style/sim.css?" />
|
||||
<link rel="stylesheet" href="/style/client.css" />
|
||||
<link rel="stylesheet" href="//play.pokemonshowdown.com/style/sim-types.css" />
|
||||
<link rel="stylesheet" href="//play.pokemonshowdown.com/style/battle.css?" />
|
||||
<link rel="stylesheet" href="//play.pokemonshowdown.com/style/utilichart.css" />
|
||||
@@ -17,6 +17,9 @@
|
||||
psim: /^(.*)\.psim\.us$/i.exec(document.location.hostname)
|
||||
};
|
||||
</script>
|
||||
<!--[if lte IE 8]><script>
|
||||
Config.oldie = true;
|
||||
</script><![endif]-->
|
||||
<script>
|
||||
var _gaq = _gaq || [];
|
||||
if (!Config.psim) {
|
||||
@@ -31,9 +34,6 @@
|
||||
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
|
||||
})();
|
||||
</script>
|
||||
<!--[if lte IE 8]><script>
|
||||
Config.oldie = true;
|
||||
</script><![endif]-->
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@@ -54,28 +54,12 @@
|
||||
</script>
|
||||
<![endif]-->
|
||||
|
||||
<div id="simheader">
|
||||
<h1 style="margin-top:2px;margin-right:10em;padding-top:0;"><img src="//play.pokemonshowdown.com/pokemonshowdownbeta.png" alt="Pokemon Showdown! (beta)" /></h1>
|
||||
</div>
|
||||
<div id="leftbarbg"><div><span></span></div></div>
|
||||
<div id="leftbar">
|
||||
<div>
|
||||
<a id="tabtab-lobby" class="cur" href="#" onclick="return selectTab('lobby');">Lobby</a>
|
||||
</div>
|
||||
<div id="header" class="header">
|
||||
<img class="logo" src="//play.pokemonshowdown.com/pokemonshowdownbeta.png" alt="Pokemon Showdown! (beta)" /> <ul class="tabbar"></ul>
|
||||
</div>
|
||||
<div id="main">
|
||||
<div id="loading-message" style="padding:20px">Initializing... <noscript>Surprise, surprise, this requires JavaScript</noscript></div>
|
||||
<div id="loading-message" class="mainmessage">Initializing... <noscript>FAILED<br /><br />Pokemon Showdown requires JavaScript.</noscript></div>
|
||||
</div>
|
||||
<div id="lobbychat" class="lobbychat"></div>
|
||||
<div id="userbar">
|
||||
<em>Connecting...</em>
|
||||
</div>
|
||||
<div id="backbutton">
|
||||
<div><button onclick="return selectTab('lobby');">« Lobby</button></div>
|
||||
</div>
|
||||
<div id="overlay" style="display:none"></div>
|
||||
<div id="tooltipwrapper"><div class="tooltipinner"></div></div>
|
||||
<div id="foehint"></div>
|
||||
<script>
|
||||
document.getElementById('loading-message').innerHTML += ' DONE<br />Loading libraries...';
|
||||
</script>
|
||||
@@ -88,6 +72,8 @@
|
||||
soundManager.setup({url: '//play.pokemonshowdown.com/swf/'});
|
||||
</script>
|
||||
<script src="//play.pokemonshowdown.com/js/html-sanitizer-minified.js"></script>
|
||||
<script src="/js/lib/lodash.compat.js"></script>
|
||||
<script src="/js/lib/backbone.js"></script>
|
||||
|
||||
<script>
|
||||
document.getElementById('loading-message').innerHTML += ' DONE<br />Loading client...';
|
||||
@@ -99,17 +85,17 @@
|
||||
<script src="//play.pokemonshowdown.com/data/pokedex-mini.js?"></script>
|
||||
<script src="//play.pokemonshowdown.com/js/battle.js?"></script>
|
||||
<script src="//play.pokemonshowdown.com/js/sockjs-0.3.min.js"></script>
|
||||
<script src="//play.pokemonshowdown.com/js/teambuilder.js?"></script>
|
||||
<script src="//play.pokemonshowdown.com/js/ladder.js?"></script>
|
||||
<script src="//play.pokemonshowdown.com/js/sim.js?"></script>
|
||||
|
||||
<script src="/js/client.js"></script>
|
||||
<script src="/js/client-mainmenu.js"></script>
|
||||
<script src="/js/client-teambuilder.js"></script>
|
||||
<script src="/js/client-ladder.js"></script>
|
||||
<script>
|
||||
if (!teams) Config.down = true;
|
||||
if (Config.down) overlay('down');
|
||||
var app = new App();
|
||||
</script>
|
||||
|
||||
|
||||
<script src="//play.pokemonshowdown.com/data/learnsets.js?"></script>
|
||||
|
||||
|
||||
<script src="//play.pokemonshowdown.com/data/graphics.js?"></script>
|
||||
<script src="//play.pokemonshowdown.com/data/pokedex.js?"></script>
|
||||
<script src="//play.pokemonshowdown.com/data/formats-data.js?"></script>
|
||||
@@ -118,13 +104,10 @@
|
||||
<script src="//play.pokemonshowdown.com/data/abilities.js?"></script>
|
||||
<script src="//play.pokemonshowdown.com/data/formats.js?"></script>
|
||||
<script src="//play.pokemonshowdown.com/data/typechart.js?"></script>
|
||||
|
||||
|
||||
<script src="//play.pokemonshowdown.com/js/utilichart.js?"></script>
|
||||
|
||||
|
||||
<script src="//play.pokemonshowdown.com/data/aliases.js?" async="async"></script>
|
||||
<script>
|
||||
updateResize();
|
||||
if (init) init();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
11
js/client-ladder.js
Normal file
11
js/client-ladder.js
Normal file
@@ -0,0 +1,11 @@
|
||||
(function($) {
|
||||
|
||||
var LadderRoom = this.LadderRoom = this.Room.extend({
|
||||
initialize: function() {
|
||||
// left menu
|
||||
var buf = '<div class="mainmessage"><p>Insert ladder here</p>';
|
||||
this.$el.addClass('ps-room-light').html(buf);
|
||||
}
|
||||
});
|
||||
|
||||
}).call(this, jQuery);
|
||||
33
js/client-mainmenu.js
Normal file
33
js/client-mainmenu.js
Normal file
@@ -0,0 +1,33 @@
|
||||
(function($) {
|
||||
|
||||
var MainMenuRoom = this.MainMenuRoom = this.Room.extend({
|
||||
events: {
|
||||
'click .button': 'clickButton'
|
||||
},
|
||||
initialize: function() {
|
||||
// left menu
|
||||
var buf = '<div class="leftmenu"><div class="mainmenu"><p><button class="button big" value="search"><strong>Look for a battle</strong></button></p></div>';
|
||||
buf += '<div class="mainmenu"><p><button class="button" value="teambuilder">Teambuilder</button></p><p><button class="button" value="ladder">Ladder</button></p></div></div>';
|
||||
|
||||
// right menu
|
||||
buf += '<div class="rightmenu"><div class="mainmenu"><p><button class="button" value="lobby">Join lobby chat</button></p></div></div>';
|
||||
this.$el.html(buf);
|
||||
},
|
||||
clickButton: function(e) {
|
||||
e.preventDefault();
|
||||
var $target = $(e.currentTarget);
|
||||
switch ($target.val()) {
|
||||
case 'lobby':
|
||||
app.joinRoom('lobby');
|
||||
break;
|
||||
case 'teambuilder':
|
||||
app.joinRoom('teambuilder');
|
||||
break;
|
||||
case 'ladder':
|
||||
app.joinRoom('ladder');
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
}).call(this, jQuery);
|
||||
11
js/client-teambuilder.js
Normal file
11
js/client-teambuilder.js
Normal file
@@ -0,0 +1,11 @@
|
||||
(function($) {
|
||||
|
||||
var TeambuilderRoom = this.TeambuilderRoom = this.Room.extend({
|
||||
initialize: function() {
|
||||
// left menu
|
||||
var buf = '<div class="mainmessage"><p>Insert teambuilder here</p>';
|
||||
this.$el.addClass('ps-room-light').html(buf);
|
||||
}
|
||||
});
|
||||
|
||||
}).call(this, jQuery);
|
||||
228
js/client.js
Normal file
228
js/client.js
Normal file
@@ -0,0 +1,228 @@
|
||||
(function($) {
|
||||
|
||||
Config.defaultserver = {
|
||||
server: 'sim.smogon.com',
|
||||
serverid: 'dev',
|
||||
serverport: 8001,
|
||||
serverprotocol: 'ws',
|
||||
registered: true
|
||||
};
|
||||
Config.sockjsprefix = '/showdown';
|
||||
Config.root = '/';
|
||||
|
||||
var User = this.User = Backbone.Model.extend({
|
||||
defaults: {
|
||||
name: "Guest",
|
||||
registered: false,
|
||||
named: false,
|
||||
avatar: 0
|
||||
}
|
||||
});
|
||||
|
||||
var App = this.App = Backbone.Router.extend({
|
||||
root: '/',
|
||||
routes: {
|
||||
'*path': 'dispatchFragment'
|
||||
},
|
||||
initialize: function() {
|
||||
window.app = this;
|
||||
$('#main').html('');
|
||||
this.initializeRooms();
|
||||
this.user = new User();
|
||||
this.topbar = new Topbar({el: $('#header')});
|
||||
Backbone.history.start({pushState: true});
|
||||
this.addRoom('');
|
||||
},
|
||||
dispatchFragment: function(fragment) {
|
||||
this.joinRoom(fragment||'');
|
||||
},
|
||||
/**
|
||||
* Send to sim server
|
||||
*/
|
||||
send: function(data, type) {
|
||||
if (!this.socket) return;
|
||||
if (typeof data === 'object') {
|
||||
if (type) data.type = type;
|
||||
this.socket.send($.toJSON(data));
|
||||
} else {
|
||||
this.socket.send('|'+data);
|
||||
}
|
||||
},
|
||||
/**
|
||||
* Receive from sim server
|
||||
*/
|
||||
receive: function() {
|
||||
//
|
||||
},
|
||||
|
||||
// Room management
|
||||
|
||||
initializeRooms: function() {
|
||||
this.rooms = {};
|
||||
},
|
||||
curRoom: null,
|
||||
curSideRoom: null,
|
||||
joinRoom: function(id, type) {
|
||||
if (this.rooms[id]) {
|
||||
this.focusRoom(id);
|
||||
return this.rooms[id];
|
||||
}
|
||||
|
||||
var room = this.addRoom(id, type);
|
||||
this.focusRoom(id);
|
||||
return room;
|
||||
},
|
||||
addRoom: function(id, type) {
|
||||
if (this.rooms[id]) return this.rooms[id];
|
||||
|
||||
var el = $('<div class="ps-room" style="display:none"></div>').appendTo('body');
|
||||
type = type || {
|
||||
'': MainMenuRoom,
|
||||
'teambuilder': TeambuilderRoom,
|
||||
'ladder': LadderRoom
|
||||
}[id];
|
||||
if (!type) type = ChatRoom;
|
||||
var room = this.rooms[id] = new type({
|
||||
id: id,
|
||||
el: el
|
||||
});
|
||||
return room;
|
||||
},
|
||||
focusRoom: function(id) {
|
||||
var room = this.rooms[id];
|
||||
if (!room) return false;
|
||||
if (this.curRoom === room || this.curSideRoom === room) return true;
|
||||
|
||||
if (this.curRoom) {
|
||||
this.curRoom.hide();
|
||||
this.curRoom = null;
|
||||
}
|
||||
this.curRoom = room;
|
||||
this.curRoom.show();
|
||||
|
||||
app.navigate(id);
|
||||
this.topbar.updateTabbar();
|
||||
return;
|
||||
},
|
||||
leaveRoom: function(id) {
|
||||
var room = this.rooms[id];
|
||||
if (!room) return false;
|
||||
if (room.requestLeave && !room.requestLeave()) return false;
|
||||
return this.removeRoom(id);
|
||||
},
|
||||
removeRoom: function(id) {
|
||||
var room = this.rooms[id];
|
||||
if (room) {
|
||||
if (room === this.curRoom) this.focusRoom('');
|
||||
delete this.rooms[id];
|
||||
room.destroy();
|
||||
this.topbar.updateTabbar();
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
var Topbar = this.Topbar = Backbone.View.extend({
|
||||
events: {
|
||||
'click a': 'click'
|
||||
},
|
||||
initialize: function() {
|
||||
this.$el.html('<img class="logo" src="//play.pokemonshowdown.com/pokemonshowdownbeta.png" alt="Pokemon Showdown! (beta)" /><div class="tabbar maintabbar"></div><div class="tabbar sidetabbar" style="display:none"></div>');
|
||||
this.$tabbar = this.$('.maintabbar');
|
||||
this.$sidetabbar = this.$('.sidetabbar');
|
||||
this.updateTabbar();
|
||||
},
|
||||
'$tabbar': null,
|
||||
updateTabbar: function() {
|
||||
var curId = '';
|
||||
if (app.curRoom) curId = app.curRoom.id;
|
||||
var buf = '<ul><li><a class="button'+(curId===''?' cur':'')+'" href="'+app.root+'"><i class="icon-home"></i> Home</a></li></ul>';
|
||||
var atLeastOne = false;
|
||||
for (var id in app.rooms) {
|
||||
if (!id) continue;
|
||||
var name = id;
|
||||
if (id === 'lobby') name = '<i class="icon-comments-alt"></i> Lobby chat';
|
||||
else if (id === 'teambuilder') name = '<i class="icon-edit"></i> Teambuilder';
|
||||
else if (id === 'ladder') name = '<i class="icon-list-ol"></i> Ladder';
|
||||
if (!atLeastOne) {
|
||||
buf += ' <ul>';
|
||||
atLeastOne = true;
|
||||
}
|
||||
buf += '<li><a class="button'+(curId===id?' cur':'')+' closable" href="'+app.root+id+'">'+name+'</a><a class="closebutton" href="'+app.root+id+'"><i class="icon-remove-sign"></i></a></li>';
|
||||
}
|
||||
if (atLeastOne) buf += '</ul>';
|
||||
this.$tabbar.html(buf);
|
||||
},
|
||||
click: function(e) {
|
||||
e.preventDefault();
|
||||
var $target = $(e.currentTarget);
|
||||
var id = $target.attr('href');
|
||||
if (id.substr(0, app.root.length) === app.root) {
|
||||
id = id.substr(app.root.length);
|
||||
}
|
||||
if ($target.hasClass('closebutton')) {
|
||||
app.leaveRoom(id);
|
||||
} else {
|
||||
app.focusRoom(id);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
var Room = this.Room = Backbone.View.extend({
|
||||
|
||||
// communication
|
||||
|
||||
/**
|
||||
* Send to sim server
|
||||
*/
|
||||
send: function(data, type) {
|
||||
if (!app.socket) return;
|
||||
if (typeof data === 'object') {
|
||||
if (type) data.type = type;
|
||||
data.room = this.id;
|
||||
app.socket.send($.toJSON(data));
|
||||
} else {
|
||||
app.socket.send(''+this.id+'|'+data);
|
||||
}
|
||||
},
|
||||
/**
|
||||
* Receive from sim server
|
||||
*/
|
||||
receive: function(data) {
|
||||
//
|
||||
},
|
||||
|
||||
// graphical
|
||||
|
||||
show: function() {
|
||||
this.$el.show();
|
||||
this.focus();
|
||||
},
|
||||
hide: function() {
|
||||
this.blur();
|
||||
this.$el.hide();
|
||||
},
|
||||
focus: function() {},
|
||||
blur: function() {},
|
||||
|
||||
// allocation
|
||||
|
||||
destroy: function() {
|
||||
this.remove();
|
||||
delete this.app;
|
||||
}
|
||||
});
|
||||
|
||||
var ChatRoom = this.ChatRoom = Room.extend({
|
||||
initialize: function() {
|
||||
var buf = '<div class="chat-log"><div class="inner"></div><div class="inner-after"></div></div><div class="chat-log-add">Connecting...</div>';
|
||||
this.$el.addClass('ps-room-light').html(buf);
|
||||
app.user.on('change', this.updateUser, this);
|
||||
},
|
||||
updateUser: function() {
|
||||
//
|
||||
}
|
||||
});
|
||||
|
||||
}).call(this, jQuery);
|
||||
1571
js/lib/backbone.js
Normal file
1571
js/lib/backbone.js
Normal file
File diff suppressed because it is too large
Load Diff
5516
js/lib/lodash.compat.js
Normal file
5516
js/lib/lodash.compat.js
Normal file
File diff suppressed because it is too large
Load Diff
295
style/client.css
Normal file
295
style/client.css
Normal file
@@ -0,0 +1,295 @@
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body {
|
||||
color: white;
|
||||
font-size: 11pt;
|
||||
font-family: Verdana, Helvetica, Arial, sans-serif;
|
||||
|
||||
/* license: CC-BY source: http://commons.wikimedia.org/wiki/File:%22La_piedra%22_(2809466426).jpg */
|
||||
background: #546bac url(/fx/client-bg.jpg) no-repeat center center fixed;
|
||||
-webkit-background-size: cover;
|
||||
-moz-background-size: cover;
|
||||
-o-background-size: cover;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
/* HEADER */
|
||||
|
||||
.header {
|
||||
position: relative;
|
||||
height: 50px;
|
||||
background: url(/fx/client-topbar-bg.png) repeat-x left top scroll;
|
||||
}
|
||||
.header h1 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.header .logo {
|
||||
float: left;
|
||||
margin: 2px 0 0 2px;
|
||||
}
|
||||
|
||||
.tabbar {
|
||||
position: absolute;
|
||||
bottom: -8px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
display: block;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0 0 0 10px;
|
||||
text-align: left;
|
||||
|
||||
color: white;
|
||||
text-shadow: 0 1px 0 black;
|
||||
font-size: 10pt;
|
||||
}
|
||||
.tabbar:after {
|
||||
content: "";
|
||||
display: block;
|
||||
height: 6px;
|
||||
background: #f8f8f8;
|
||||
border: solid 1px #AAAAAA;
|
||||
margin: 4px 0 0 -10px;
|
||||
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
|
||||
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,.2);
|
||||
}
|
||||
.tabbar.maintabbar {
|
||||
padding-left: 150px;
|
||||
}
|
||||
.tabbar.maintabbar:after {
|
||||
margin-left: -150px;
|
||||
}
|
||||
.tabbar li,
|
||||
.tabbar ul {
|
||||
display: inline;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.tabbar a.button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
text-shadow: 0 1px 0 rgba(255,255,255,.4);
|
||||
border-radius: 5px;
|
||||
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2), inset 0 -1px 2px rgba(255,255,255,1);
|
||||
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2), inset 0 -1px 2px rgba(255,255,255,1);
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,.2), inset 0 -1px 2px rgba(255,255,255,1);
|
||||
white-space: nowrap;
|
||||
|
||||
/* default colors */
|
||||
color: #222222;
|
||||
text-shadow: 0 1px 0 white;
|
||||
border: solid 1px #AAAAAA;
|
||||
background: #e3e3e3;
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#e3e3e3));
|
||||
background: -moz-linear-gradient(top, #f6f6f6, #e3e3e3);
|
||||
background: linear-gradient(top, #f6f6f6, #e3e3e3);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f6f6', endColorstr='#e3e3e3');
|
||||
|
||||
position: relative;
|
||||
padding: 3px 10px 3px 10px;
|
||||
margin: 0 -1px 0 0;
|
||||
top: 1px;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
font-size: 14px;
|
||||
}
|
||||
.tabbar a.button:hover {
|
||||
background: #cfcfcf;
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#cfcfcf));
|
||||
background: -moz-linear-gradient(top, #f2f2f2, #cfcfcf);
|
||||
background: linear-gradient(top, #f2f2f2, #cfcfcf);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2f2f2', endColorstr='#cfcfcf');
|
||||
border-color: #606060;
|
||||
|
||||
z-index: 10;
|
||||
}
|
||||
.tabbar a.button:active {
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#cfcfcf), to(#f2f2f2));
|
||||
background: -moz-linear-gradient(top, #cfcfcf, #f2f2f2);
|
||||
background: linear-gradient(top, #cfcfcf, #f2f2f2);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cfcfcf', endColorstr='#f2f2f2');
|
||||
}
|
||||
.tabbar a.button.cur,
|
||||
.tabbar a.button.cur:hover {
|
||||
color: #777777;
|
||||
background: #f8f8f8;
|
||||
box-shadow: none;
|
||||
border-color: #AAAAAA;
|
||||
border-bottom: 0;
|
||||
cursor: default;
|
||||
padding-top: 3px;
|
||||
padding-bottom: 5px;
|
||||
top: 0px;
|
||||
}
|
||||
.tabbar li:first-child a.button {
|
||||
border-top-left-radius: 5px;
|
||||
}
|
||||
.tabbar li:last-child a.button {
|
||||
border-top-right-radius: 5px;
|
||||
}
|
||||
.tabbar a.closable {
|
||||
padding-right: 25px;
|
||||
}
|
||||
.tabbar .closebutton {
|
||||
display: inline-block;
|
||||
margin: 0 0 0 -20px;
|
||||
width: 20px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
position: relative;
|
||||
z-index: 11;
|
||||
top: 1px;
|
||||
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
color: #777777;
|
||||
text-shadow: none;
|
||||
}
|
||||
.tabbar a.cur + .closebutton {
|
||||
top: 0;
|
||||
}
|
||||
.tabbar .closebutton:hover {
|
||||
color: black;
|
||||
}
|
||||
|
||||
/* ROOMS */
|
||||
|
||||
.ps-room {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 58px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch,
|
||||
overflow-scrolling: touch,
|
||||
}
|
||||
.ps-room.ps-room-left {
|
||||
}
|
||||
.ps-room.ps-room-right {
|
||||
}
|
||||
.ps-room.ps-room-light {
|
||||
background: rgba(242,247,250,.85);
|
||||
color: black;
|
||||
}
|
||||
|
||||
/* MAIN MENU */
|
||||
|
||||
.leftmenu {
|
||||
float: left;
|
||||
}
|
||||
.rightmenu {
|
||||
float: right;
|
||||
}
|
||||
.mainmessage,
|
||||
.mainmenu {
|
||||
display: block;
|
||||
padding: 10px 15px;
|
||||
margin: 40px 40px 0 40px;
|
||||
max-width: 360px;
|
||||
border-radius: 20px;
|
||||
|
||||
background: rgba(201, 207, 219, .6);
|
||||
color: black;
|
||||
}
|
||||
.mainmenu {
|
||||
background: rgba(201, 207, 219, .4);
|
||||
width: 240px;
|
||||
text-align: center;
|
||||
}
|
||||
.rightmenu .mainmenu {
|
||||
margin-left: 0;
|
||||
}
|
||||
.mainmessage p,
|
||||
.mainmenu p {
|
||||
margin: 10px 0;
|
||||
}
|
||||
.mainmenu .button {
|
||||
box-sizing: border-box;
|
||||
font: 12pt Verdana, sans-serif;
|
||||
|
||||
display: inline-block;
|
||||
padding: 5px 7px 3px 7px;
|
||||
|
||||
width: 200px;
|
||||
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
text-shadow: 0 -1px 0 hsl(210,40%,10%);
|
||||
border-radius: 5px;
|
||||
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2), inset 0 1px 1px rgba(255,255,255,.8);
|
||||
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2), inset 0 1px 1px rgba(255,255,255,.8);
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,.2), inset 0 1px 1px rgba(255,255,255,.8);
|
||||
|
||||
/* default colors */
|
||||
color: #FFFFFF;
|
||||
border: solid 1px #AAAAAA;
|
||||
background: #779EC5;
|
||||
background: hsl(210,40%,62%);
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(hsl(210,40%,72%)), to(hsl(210,40%,52%)));
|
||||
background: -moz-linear-gradient(top, hsl(210,40%,72%), hsl(210,40%,52%));
|
||||
background: linear-gradient(top, hsl(210,40%,72%), hsl(210,40%,52%));
|
||||
border-color: hsl(210,40%,40%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f6f6', endColorstr='#e3e3e3');
|
||||
}
|
||||
.mainmenu button.big {
|
||||
width: 230px;
|
||||
padding: 7px 7px 5px 7px;
|
||||
font-size: 14pt;
|
||||
}
|
||||
.mainmenu .button:hover {
|
||||
background: #5485B6;
|
||||
background: hsl(210,40%,52%);
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(hsl(210,40%,62%)), to(hsl(210,40%,42%)));
|
||||
background: -moz-linear-gradient(top, hsl(210,40%,62%), hsl(210,40%,42%));
|
||||
background: linear-gradient(top, hsl(210,40%,62%), hsl(210,40%,42%));
|
||||
border-color: hsl(210,40%,21%);
|
||||
}
|
||||
.mainmenu .button:active {
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,.2), inset 0 -1px 1px rgba(255,255,255,.3), inset 0 1px 1px rgba(0,0,0,.4);
|
||||
background: #406B96;
|
||||
background: hsl(210,40%,42%);
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(hsl(210,40%,42%)), to(hsl(210,40%,58%)));
|
||||
background: -moz-linear-gradient(top, hsl(210,40%,42%), hsl(210,40%,58%));
|
||||
background: linear-gradient(top, hsl(210,40%,42%), hsl(210,40%,58%));
|
||||
border-color: hsl(210,40%,21%);
|
||||
}
|
||||
.mainmenu .button.disabled,
|
||||
.mainmenu .button.disabled:hover,
|
||||
.mainmenu .button.disabled:active {
|
||||
background: #EEEEEE;
|
||||
border: 1px solid #CCCCCC;
|
||||
color: #BBBBBB;
|
||||
text-shadow: none;
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,.1);
|
||||
}
|
||||
|
||||
/* CHAT */
|
||||
|
||||
.chat-log {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 40px;
|
||||
}
|
||||
.chat-log-add {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 36px;
|
||||
padding: 3px 4px 0 4px;
|
||||
border-top: 1px solid #AAAAAA;
|
||||
}
|
||||
Reference in New Issue
Block a user