mirror of
https://github.com/moparisthebest/kaiwa
synced 2024-11-22 01:02:23 -05:00
Refactor everything to use stylus
This commit is contained in:
Lance Stout
parent
1b89ec1a3e
commit
e435c178c8
@ -3,7 +3,6 @@
|
|||||||
|
|
||||||
var BasePage = require('./base');
|
var BasePage = require('./base');
|
||||||
var templates = require('../templates');
|
var templates = require('../templates');
|
||||||
var ContactListItem = require('../views/contactListItem');
|
|
||||||
var Message = require('../views/message');
|
var Message = require('../views/message');
|
||||||
var MessageModel = require('../models/message');
|
var MessageModel = require('../models/message');
|
||||||
|
|
||||||
@ -16,22 +15,36 @@ module.exports = BasePage.extend({
|
|||||||
this.render();
|
this.render();
|
||||||
},
|
},
|
||||||
events: {
|
events: {
|
||||||
'keydown #chatBuffer': 'handleKeyDown',
|
'keydown textarea': 'handleKeyDown',
|
||||||
'keyup #chatBuffer': 'handleKeyUp'
|
'keyup textarea': 'handleKeyUp'
|
||||||
},
|
},
|
||||||
srcBindings: {
|
srcBindings: {
|
||||||
avatar: 'header .avatar'
|
avatar: 'header .avatar'
|
||||||
},
|
},
|
||||||
textBindings: {
|
textBindings: {
|
||||||
displayName: 'header .name',
|
displayName: 'header .name',
|
||||||
formattedTZO: 'header #tzo'
|
formattedTZO: 'header .tzo'
|
||||||
|
},
|
||||||
|
show: function (animation) {
|
||||||
|
BasePage.prototype.show.apply(this, [animation]);
|
||||||
|
client.sendMessage({
|
||||||
|
to: this.model.lockedResource || this.model.jid,
|
||||||
|
chatState: 'active'
|
||||||
|
});
|
||||||
|
},
|
||||||
|
hide: function () {
|
||||||
|
BasePage.prototype.hide.apply(this);
|
||||||
|
client.sendMessage({
|
||||||
|
to: this.model.lockedResource || this.model.jid,
|
||||||
|
chatState: 'inactive'
|
||||||
|
});
|
||||||
},
|
},
|
||||||
render: function () {
|
render: function () {
|
||||||
this.renderAndBind();
|
this.renderAndBind();
|
||||||
this.typingTimer = null;
|
this.typingTimer = null;
|
||||||
this.$chatInput = this.$('#chatBuffer');
|
this.$chatInput = this.$('.chatBox textarea');
|
||||||
this.$messageList = this.$('#conversation');
|
this.$messageList = this.$('.messages');
|
||||||
this.renderCollection(this.model.messages, Message, this.$('#conversation'));
|
this.renderCollection(this.model.messages, Message, this.$('.messages'));
|
||||||
this.registerBindings();
|
this.registerBindings();
|
||||||
return this;
|
return this;
|
||||||
},
|
},
|
||||||
|
|||||||
@ -1,17 +0,0 @@
|
|||||||
"use strict";
|
|
||||||
|
|
||||||
var BasePage = require('pages/base');
|
|
||||||
var templates = require('templates');
|
|
||||||
|
|
||||||
|
|
||||||
module.exports = BasePage.extend({
|
|
||||||
template: templates.pages.wrapper,
|
|
||||||
initialize: function (spec) {
|
|
||||||
this.url = spec.url;
|
|
||||||
},
|
|
||||||
render: function () {
|
|
||||||
this.basicRender();
|
|
||||||
this.$el.load(this.url);
|
|
||||||
return this;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
@ -7,7 +7,7 @@
|
|||||||
</head>
|
</head>
|
||||||
<body class="aux">
|
<body class="aux">
|
||||||
<header>
|
<header>
|
||||||
<img id="logo" src="/logo.png" alt="OTalk" />
|
<img id="logo" src="/images/logo.png" alt="OTalk" />
|
||||||
</header>
|
</header>
|
||||||
<section id="loginbox" class="content">
|
<section id="loginbox" class="content">
|
||||||
<h2>Connecting...</h2>
|
<h2>Connecting...</h2>
|
||||||
|
|||||||
@ -13,7 +13,7 @@ exports.pages = {};
|
|||||||
exports.body = function anonymous(locals) {
|
exports.body = function anonymous(locals) {
|
||||||
var buf = [];
|
var buf = [];
|
||||||
with (locals || {}) {
|
with (locals || {}) {
|
||||||
buf.push('<body><div class="wrap"><div id="connectionOverlay"><aside id="connectionStatus"><button class="reconnect">Reconnect</button><span class="message">disconnected</span></aside></div><header id="me"><img class="avatar"/><p class="status"></p></header><nav class="main"><li><a href="/logout">Logout</a></li><li><a href="/">Settings</a></li></nav><nav id="contactList"></nav><section id="pages"></section><footer></footer></div></body>');
|
buf.push('<body><div id="connectionOverlay"><aside id="connectionStatus"><button class="reconnect">Reconnect</button><span class="message">disconnected</span></aside></div><aside id="menu"><nav class="main"><li><a href="/logout">Logout</a></li><li><a href="/">Settings</a></li></nav><section id="roster"><h1>Roster</h1><nav></nav></section><section id="bookmarks"><h1>Bookmarks</h1><nav></nav></section></aside><section id="pages"></section></body>');
|
||||||
}
|
}
|
||||||
return buf.join("");
|
return buf.join("");
|
||||||
};
|
};
|
||||||
@ -90,7 +90,7 @@ exports.misc.growlMessage = function anonymous(locals) {
|
|||||||
exports.pages.chat = function anonymous(locals) {
|
exports.pages.chat = function anonymous(locals) {
|
||||||
var buf = [];
|
var buf = [];
|
||||||
with (locals || {}) {
|
with (locals || {}) {
|
||||||
buf.push('<section class="page chat"><header class="contactInfo"><img width="30" height="30" class="avatar"/><h1 class="name"></h1><div id="tzo"></div></header><ul id="conversation"></ul><div id="chatInput"><form><textarea id="chatBuffer" name="chatInput" type="text" placeholder="Send a message..." autocomplete="off"></textarea></form></div></section>');
|
buf.push('<section class="page chat"><section class="conversation"><header><img class="avatar"/><h1 class="name"></h1><div class="tzo"></div></header><ul class="messages"></ul><div class="chatBox"><form><textarea name="chatInput" type="text" placeholder="Send a message..." autocomplete="off"></textarea></form></div></section></section>');
|
||||||
}
|
}
|
||||||
return buf.join("");
|
return buf.join("");
|
||||||
};
|
};
|
||||||
@ -99,7 +99,7 @@ exports.pages.chat = function anonymous(locals) {
|
|||||||
exports.pages.main = function anonymous(locals) {
|
exports.pages.main = function anonymous(locals) {
|
||||||
var buf = [];
|
var buf = [];
|
||||||
with (locals || {}) {
|
with (locals || {}) {
|
||||||
buf.push('<section class="page main"><button class="enableAlerts">Enable alerts</button><section class="avatar"><img id="settingsAvatar"/></section><section class="notifications"><h1>Notifications</h1><ul></ul></section></section>');
|
buf.push('<section class="page main"><button class="enableAlerts">Enable alerts</button><h1>This space intentionally blank</h1></section>');
|
||||||
}
|
}
|
||||||
return buf.join("");
|
return buf.join("");
|
||||||
};
|
};
|
||||||
@ -113,15 +113,6 @@ exports.pages.signin = function anonymous(locals) {
|
|||||||
return buf.join("");
|
return buf.join("");
|
||||||
};
|
};
|
||||||
|
|
||||||
// wrapper.jade compiled template
|
|
||||||
exports.pages.wrapper = function anonymous(locals) {
|
|
||||||
var buf = [];
|
|
||||||
with (locals || {}) {
|
|
||||||
buf.push('<div class="page"></div>');
|
|
||||||
}
|
|
||||||
return buf.join("");
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
// attach to window or export with commonJS
|
// attach to window or export with commonJS
|
||||||
if (typeof module !== "undefined" && typeof module.exports !== "undefined") {
|
if (typeof module !== "undefined" && typeof module.exports !== "undefined") {
|
||||||
|
|||||||
@ -1,17 +1,18 @@
|
|||||||
body
|
body
|
||||||
.wrap
|
|
||||||
#connectionOverlay
|
#connectionOverlay
|
||||||
aside#connectionStatus
|
aside#connectionStatus
|
||||||
button.reconnect Reconnect
|
button.reconnect Reconnect
|
||||||
span.message disconnected
|
span.message disconnected
|
||||||
header#me
|
aside#menu
|
||||||
img.avatar
|
|
||||||
p.status
|
|
||||||
nav.main
|
nav.main
|
||||||
li
|
li
|
||||||
a(href="/logout") Logout
|
a(href="/logout") Logout
|
||||||
li
|
li
|
||||||
a(href="/") Settings
|
a(href="/") Settings
|
||||||
nav#contactList
|
section#roster
|
||||||
|
h1 Roster
|
||||||
|
nav
|
||||||
|
section#bookmarks
|
||||||
|
h1 Bookmarks
|
||||||
|
nav
|
||||||
section#pages
|
section#pages
|
||||||
footer
|
|
||||||
|
|||||||
@ -1,9 +1,10 @@
|
|||||||
section.page.chat
|
section.page.chat
|
||||||
header.contactInfo
|
section.conversation
|
||||||
img.avatar(width=30, height=30)
|
header
|
||||||
|
img.avatar
|
||||||
h1.name
|
h1.name
|
||||||
#tzo
|
.tzo
|
||||||
ul#conversation
|
ul.messages
|
||||||
div#chatInput
|
.chatBox
|
||||||
form
|
form
|
||||||
textarea#chatBuffer(name='chatInput', type='text', placeholder='Send a message...', autocomplete='off')
|
textarea(name='chatInput', type='text', placeholder='Send a message...', autocomplete='off')
|
||||||
|
|||||||
@ -1,6 +1,4 @@
|
|||||||
section.page.main
|
section.page.main
|
||||||
button.enableAlerts Enable alerts
|
button.enableAlerts Enable alerts
|
||||||
|
|
||||||
section.notifications
|
h1 This space intentionally blank
|
||||||
h1 Notifications
|
|
||||||
ul
|
|
||||||
|
|||||||
@ -1 +0,0 @@
|
|||||||
.page
|
|
||||||
@ -24,13 +24,13 @@ module.exports = HumanView.extend({
|
|||||||
avatar: '.avatar'
|
avatar: '.avatar'
|
||||||
},
|
},
|
||||||
events: {
|
events: {
|
||||||
'click': 'goChat'
|
'click': 'handleClick'
|
||||||
},
|
},
|
||||||
render: function () {
|
render: function () {
|
||||||
this.renderAndBind({contact: this.model});
|
this.renderAndBind({contact: this.model});
|
||||||
return this;
|
return this;
|
||||||
},
|
},
|
||||||
goChat: function () {
|
handleClick: function () {
|
||||||
app.navigate('chat/' + this.model.jid);
|
app.navigate('chat/' + this.model.jid);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|||||||
@ -18,7 +18,7 @@ module.exports = HumanView.extend({
|
|||||||
$('head').append(templates.head());
|
$('head').append(templates.head());
|
||||||
$('body').removeClass('aux');
|
$('body').removeClass('aux');
|
||||||
this.renderAndBind();
|
this.renderAndBind();
|
||||||
this.renderCollection(me.contacts, ContactListItem, this.$('#contactList'));
|
this.renderCollection(me.contacts, ContactListItem, this.$('#roster nav'));
|
||||||
return this;
|
return this;
|
||||||
},
|
},
|
||||||
handleLinkClick: function (e) {
|
handleLinkClick: function (e) {
|
||||||
|
|||||||
@ -13,10 +13,10 @@ module.exports = HumanView.extend({
|
|||||||
},
|
},
|
||||||
classBindings: {
|
classBindings: {
|
||||||
mine: '.message',
|
mine: '.message',
|
||||||
receiptReceived: '',
|
receiptReceived: '.message',
|
||||||
acked: '',
|
acked: '.message',
|
||||||
delayed: '',
|
delayed: '.message',
|
||||||
edited: ''
|
edited: '.message'
|
||||||
},
|
},
|
||||||
textBindings: {
|
textBindings: {
|
||||||
body: '.body',
|
body: '.body',
|
||||||
|
|||||||
164
public/css/_mixins.styl
Normal file
164
public/css/_mixins.styl
Normal file
@ -0,0 +1,164 @@
|
|||||||
|
@import _variables
|
||||||
|
|
||||||
|
helv()
|
||||||
|
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif
|
||||||
|
|
||||||
|
shadow($color, $x, $y, $blur)
|
||||||
|
-webkit-box-shadow: $color $x $y $blur
|
||||||
|
-moz-box-shadow: $color $x $y $blur
|
||||||
|
box-shadow: $color $x $y $blur
|
||||||
|
|
||||||
|
innerShadow($color, $x, $y, $blur)
|
||||||
|
-moz-box-shadow: inset $color $x $y $blur
|
||||||
|
-webkit-box-shadow: inset $color $x $y $blur
|
||||||
|
box-shadow: inset $color $x $y $blur
|
||||||
|
|
||||||
|
gradient($top, $bottom)
|
||||||
|
background: $top
|
||||||
|
background-image: -moz-linear-gradient(top, $top, $bottom)
|
||||||
|
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, $top),color-stop(1, $bottom))
|
||||||
|
|
||||||
|
radial($inner, $outer)
|
||||||
|
background: $inner
|
||||||
|
background-image: -webkit-radial-gradient(center center, circle cover, $inner, $outer)
|
||||||
|
background-image: -moz-radial-gradient(center center, circle cover, $inner, $outer)
|
||||||
|
background-image: -ms-radial-gradient(center center, circle cover, $inner, $outer)
|
||||||
|
background-image: -o-radial-gradient(center center, circle cover, $inner, $outer)
|
||||||
|
background-image: radial-gradient(center center, circle cover, $inner, $outer)
|
||||||
|
|
||||||
|
roundall($round)
|
||||||
|
-moz-border-radius: $round
|
||||||
|
-webkit-border-radius: $round
|
||||||
|
-khtml-border-radius: $round
|
||||||
|
-o-border-radius: $round
|
||||||
|
-border-radius: $round
|
||||||
|
border-radius: $round
|
||||||
|
|
||||||
|
round($roundtl, $roundtr, $roundbr, $roundbl)
|
||||||
|
-webkit-border-top-left-radius: $roundtl
|
||||||
|
-webkit-border-top-right-radius: $roundtr
|
||||||
|
-webkit-border-bottom-left-radius: $roundbl
|
||||||
|
-webkit-border-bottom-right-radius: $roundbr
|
||||||
|
-moz-border-radius-topleft: $roundtl
|
||||||
|
-moz-border-radius-topright: $roundtr
|
||||||
|
-moz-border-radius-bottomleft: $roundbl
|
||||||
|
-moz-border-radius-bottomright: $roundbr
|
||||||
|
-border-top-left-radius: $roundtl
|
||||||
|
-border-top-right-radius: $roundtr
|
||||||
|
-border-bottom-left-radius: $roundbl
|
||||||
|
-border-bottom-right-radius: $roundbr
|
||||||
|
border-top-left-radius: $roundtl
|
||||||
|
border-top-right-radius: $roundtr
|
||||||
|
border-bottom-left-radius: $roundbl
|
||||||
|
border-bottom-right-radius: $roundbr
|
||||||
|
|
||||||
|
textShadow($color, $x, $y, $blur)
|
||||||
|
text-shadow: $color $x $y $blur
|
||||||
|
|
||||||
|
calc()
|
||||||
|
if current-property
|
||||||
|
add-property(current-property[0], s('-webkit-calc(%s)', unquote(arguments)))
|
||||||
|
add-property(current-property[0], s('-moz-calc(%s)', unquote(arguments)))
|
||||||
|
add-property(current-property[0], s('-ms-calc(%s)', unquote(arguments)))
|
||||||
|
add-property(current-property[0], s('-o-calc(%s)', unquote(arguments)))
|
||||||
|
s('calc(%s)', unquote(arguments))
|
||||||
|
else
|
||||||
|
error('calc() must be used within a property')
|
||||||
|
|
||||||
|
noselect()
|
||||||
|
-webkit-touch-callout: none
|
||||||
|
-webkit-user-select: none
|
||||||
|
-khtml-user-select: none
|
||||||
|
-moz-user-select: none
|
||||||
|
-ms-user-select: none
|
||||||
|
user-select: none
|
||||||
|
|
||||||
|
turn($deg)
|
||||||
|
-moz-transform: rotate($deg)
|
||||||
|
-webkit-transform: rotate($deg)
|
||||||
|
-o-transform: rotate($deg)
|
||||||
|
transform: rotate($deg)
|
||||||
|
|
||||||
|
transform($param)
|
||||||
|
-webkit-transform: $param
|
||||||
|
-moz-transform: $param
|
||||||
|
-ms-transform: $param
|
||||||
|
transform: $param
|
||||||
|
|
||||||
|
transition($attr, $dur, $timing, $delay)
|
||||||
|
-webkit-transition: $attr $dur $timing $delay
|
||||||
|
-o-transition: $attr $dur $timing $delay
|
||||||
|
transition: $attr $dur $timing $delay
|
||||||
|
-moz-transition: $attr $dur $timing $delay
|
||||||
|
|
||||||
|
flip-horizontal()
|
||||||
|
-moz-transform: scaleX(-1)
|
||||||
|
-webkit-transform: scaleX(-1)
|
||||||
|
-o-transform: scaleX(-1)
|
||||||
|
transform: scaleX(-1)
|
||||||
|
-ms-filter: fliph
|
||||||
|
filter: fliph
|
||||||
|
|
||||||
|
flip-vertical()
|
||||||
|
-moz-transform: scaleY(-1)
|
||||||
|
-webkit-transform: scaleY(-1)
|
||||||
|
-o-transform: scaleY(-1)
|
||||||
|
transform: scaleY(-1)
|
||||||
|
-ms-filter: flipv
|
||||||
|
filter: flipv
|
||||||
|
|
||||||
|
colorDot($color)
|
||||||
|
display: block
|
||||||
|
height: 10px
|
||||||
|
width: 10px
|
||||||
|
gradient: $color + #777 $color + #000
|
||||||
|
border-radius: 25px
|
||||||
|
border-bottom: 1px solid rgba(0,0,0,1)
|
||||||
|
border-top: 1px solid rgba(255,255,255,.9)
|
||||||
|
|
||||||
|
imagesprite($width, $height, $sx, $x, $y)
|
||||||
|
background-repeat: none
|
||||||
|
width: ($width)px
|
||||||
|
height: ($height)px
|
||||||
|
background-image: url("/images/sprite.png")
|
||||||
|
background-position: ($sx * $x * -1)px ($sx * $y * -1)px
|
||||||
|
|
||||||
|
borderbox()
|
||||||
|
-moz-box-sizing: border-box
|
||||||
|
-webkit-box-sizing: border-box
|
||||||
|
box-sizing: border-box
|
||||||
|
|
||||||
|
// avatars
|
||||||
|
avatarLG()
|
||||||
|
width: 50px
|
||||||
|
height: 50px
|
||||||
|
roundall: 3px
|
||||||
|
|
||||||
|
avatarMD()
|
||||||
|
width: 30px
|
||||||
|
height: 30px
|
||||||
|
roundall: 3px
|
||||||
|
|
||||||
|
avatarSM()
|
||||||
|
width: 20px
|
||||||
|
height: 20px
|
||||||
|
roundall: 3px
|
||||||
|
|
||||||
|
avatarOverlay()
|
||||||
|
content: ""
|
||||||
|
height: 100%
|
||||||
|
width: 100%
|
||||||
|
position: absolute
|
||||||
|
top: 0
|
||||||
|
left: 0
|
||||||
|
display: block
|
||||||
|
z-index: 70
|
||||||
|
background: -moz-linear-gradient(top, rgba(255,255,255,.1) 0%, rgba(247,247,247,.1) 10%, rgba(247,247,247,.1) 94%, rgba(229,229,229,.1) 100%)
|
||||||
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.1)), color-stop(10%,rgba(247,247,247,.1)), color-stop(94%,rgba(247,247,247,.1)), color-stop(100%,rgba(229,229,229,.1)))
|
||||||
|
background: -webkit-linear-gradient(top, rgba(255,255,255,.1) 0%,rgba(247,247,247,.1) 10%,rgba(247,247,247,.1) 94%,rgba(229,229,229,.1) 100%)
|
||||||
|
background: linear-gradient(top, rgba(255,255,255,.1) 0%,rgba(247,247,247,.1) 10%,rgba(247,247,247,.1) 94%,rgba(229,229,229,.1) 100%)
|
||||||
|
|
||||||
|
// this if for the content flash and hardware acceleration bugs in webkit
|
||||||
|
webkit-transition-fix()
|
||||||
|
-webkit-backface-visibility: hidden
|
||||||
|
//-webkit-transform: translateZ(0)
|
||||||
210
public/css/_reset.styl
Normal file
210
public/css/_reset.styl
Normal file
@ -0,0 +1,210 @@
|
|||||||
|
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section
|
||||||
|
display: block
|
||||||
|
|
||||||
|
audio, canvas, video
|
||||||
|
display: inline-block
|
||||||
|
*display: inline
|
||||||
|
*zoom: 1
|
||||||
|
|
||||||
|
audio:not([controls])
|
||||||
|
display: none
|
||||||
|
|
||||||
|
[hidden]
|
||||||
|
display: none
|
||||||
|
|
||||||
|
html
|
||||||
|
font-size: 100%
|
||||||
|
-webkit-text-size-adjust: 100%
|
||||||
|
-ms-text-size-adjust: 100%
|
||||||
|
|
||||||
|
html, button, input, select, textarea
|
||||||
|
font-family: sans-serif
|
||||||
|
color: #222
|
||||||
|
|
||||||
|
body
|
||||||
|
margin: 0
|
||||||
|
font-size: 1em
|
||||||
|
line-height: 1.4
|
||||||
|
|
||||||
|
a
|
||||||
|
color: #00e
|
||||||
|
|
||||||
|
a:visited
|
||||||
|
color: #551a8b
|
||||||
|
|
||||||
|
a:hover
|
||||||
|
color: #06e
|
||||||
|
|
||||||
|
a:focus
|
||||||
|
outline: thin dotted
|
||||||
|
|
||||||
|
a:hover, a:active
|
||||||
|
outline: 0
|
||||||
|
|
||||||
|
abbr[title]
|
||||||
|
border-bottom: 1px dotted
|
||||||
|
|
||||||
|
b, strong
|
||||||
|
font-weight: bold
|
||||||
|
|
||||||
|
blockquote
|
||||||
|
margin: 1em 40px
|
||||||
|
|
||||||
|
dfn
|
||||||
|
font-style: italic
|
||||||
|
|
||||||
|
hr
|
||||||
|
display: block
|
||||||
|
height: 1px
|
||||||
|
border: 0
|
||||||
|
border-top: 1px solid #ccc
|
||||||
|
margin: 1em 0
|
||||||
|
padding: 0
|
||||||
|
|
||||||
|
ins
|
||||||
|
background: #ff9
|
||||||
|
color: #000
|
||||||
|
text-decoration: none
|
||||||
|
|
||||||
|
mark
|
||||||
|
background: #ff0
|
||||||
|
color: #000
|
||||||
|
font-style: italic
|
||||||
|
font-weight: bold
|
||||||
|
|
||||||
|
pre, code, kbd, samp
|
||||||
|
font-family: monospace, serif
|
||||||
|
_font-family: 'courier new', monospace
|
||||||
|
font-size: 1em
|
||||||
|
|
||||||
|
pre
|
||||||
|
white-space: pre-wrap
|
||||||
|
word-wrap: break-word
|
||||||
|
|
||||||
|
q
|
||||||
|
quotes: none
|
||||||
|
|
||||||
|
q:before, q:after
|
||||||
|
content: none
|
||||||
|
|
||||||
|
small
|
||||||
|
font-size: 85%
|
||||||
|
|
||||||
|
sub, sup
|
||||||
|
font-size: 75%
|
||||||
|
line-height: 0
|
||||||
|
position: relative
|
||||||
|
vertical-align: baseline
|
||||||
|
|
||||||
|
sup
|
||||||
|
top: -0.5em
|
||||||
|
|
||||||
|
sub
|
||||||
|
bottom: -0.25em
|
||||||
|
|
||||||
|
ul, ol
|
||||||
|
margin: 1em 0
|
||||||
|
padding: 0 0 0 40px
|
||||||
|
|
||||||
|
dd
|
||||||
|
margin: 0 0 0 40px
|
||||||
|
|
||||||
|
nav ul, nav ol
|
||||||
|
list-style: none
|
||||||
|
list-style-image: none
|
||||||
|
margin: 0
|
||||||
|
padding: 0
|
||||||
|
|
||||||
|
img
|
||||||
|
border: 0
|
||||||
|
-ms-interpolation-mode: bicubic
|
||||||
|
vertical-align: middle
|
||||||
|
|
||||||
|
svg:not(:root)
|
||||||
|
overflow: hidden
|
||||||
|
|
||||||
|
figure
|
||||||
|
margin: 0
|
||||||
|
|
||||||
|
form
|
||||||
|
margin: 0
|
||||||
|
|
||||||
|
fieldset
|
||||||
|
border: 0
|
||||||
|
margin: 0
|
||||||
|
padding: 0
|
||||||
|
|
||||||
|
label
|
||||||
|
cursor: pointer
|
||||||
|
|
||||||
|
legend
|
||||||
|
border: 0
|
||||||
|
*margin-left: -7px
|
||||||
|
padding: 0
|
||||||
|
white-space: normal
|
||||||
|
|
||||||
|
button, input, select, textarea
|
||||||
|
font-size: 100%
|
||||||
|
margin: 0
|
||||||
|
vertical-align: baseline
|
||||||
|
*vertical-align: middle
|
||||||
|
|
||||||
|
button, input
|
||||||
|
line-height: normal
|
||||||
|
|
||||||
|
button, input[type="button"], input[type="reset"], input[type="submit"]
|
||||||
|
cursor: pointer
|
||||||
|
-webkit-appearance: button
|
||||||
|
*overflow: visible
|
||||||
|
|
||||||
|
button[disabled], input[disabled]
|
||||||
|
cursor: default
|
||||||
|
|
||||||
|
input[type="checkbox"], input[type="radio"]
|
||||||
|
box-sizing: border-box
|
||||||
|
padding: 0
|
||||||
|
*width: 13px
|
||||||
|
*height: 13px
|
||||||
|
|
||||||
|
input[type="search"]
|
||||||
|
-webkit-appearance: textfield
|
||||||
|
-moz-box-sizing: content-box
|
||||||
|
-webkit-box-sizing: content-box
|
||||||
|
box-sizing: content-box
|
||||||
|
|
||||||
|
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button
|
||||||
|
-webkit-appearance: none
|
||||||
|
|
||||||
|
button::-moz-focus-inner, input::-moz-focus-inner
|
||||||
|
border: 0
|
||||||
|
padding: 0
|
||||||
|
|
||||||
|
textarea
|
||||||
|
overflow: auto
|
||||||
|
vertical-align: top
|
||||||
|
resize: vertical
|
||||||
|
|
||||||
|
input:valid, textarea:valid
|
||||||
|
|
||||||
|
input:invalid, textarea:invalid
|
||||||
|
background-color: #f0dddd
|
||||||
|
|
||||||
|
table
|
||||||
|
border-collapse: collapse
|
||||||
|
border-spacing: 0
|
||||||
|
|
||||||
|
td
|
||||||
|
vertical-align: top
|
||||||
|
|
||||||
|
|
||||||
|
.clearfix:before, .clearfix:after
|
||||||
|
content: "\0020"
|
||||||
|
display: block
|
||||||
|
height: 0
|
||||||
|
visibility: hidden
|
||||||
|
|
||||||
|
.clearfix:after
|
||||||
|
clear: both
|
||||||
|
|
||||||
|
.clearfix
|
||||||
|
zoom: 1
|
||||||
30
public/css/_variables.styl
Normal file
30
public/css/_variables.styl
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
// colors
|
||||||
|
|
||||||
|
$header = #404040
|
||||||
|
$bodybg = #202020
|
||||||
|
|
||||||
|
$red = #c80000
|
||||||
|
$text = #333
|
||||||
|
$subtext = #777
|
||||||
|
|
||||||
|
$pink = #EB008B
|
||||||
|
$ltgray = #EBECEC
|
||||||
|
$dkgray = #202020
|
||||||
|
$blue = #00aeef
|
||||||
|
$dkblue = #006991
|
||||||
|
|
||||||
|
|
||||||
|
// font sizes
|
||||||
|
|
||||||
|
$fontLG = 20px
|
||||||
|
$fontMD = 16px
|
||||||
|
$fontSM = 13px
|
||||||
|
|
||||||
|
|
||||||
|
// dimensions
|
||||||
|
|
||||||
|
$base = 10px
|
||||||
|
$seven = 7 * $base
|
||||||
|
$five = 5 * $base
|
||||||
|
$three = 3 * $base
|
||||||
|
$page = 38 * $base
|
||||||
63
public/css/app/aux.styl
Normal file
63
public/css/app/aux.styl
Normal file
@ -0,0 +1,63 @@
|
|||||||
|
.aux
|
||||||
|
header
|
||||||
|
margin-top: 10%
|
||||||
|
text-align: center
|
||||||
|
|
||||||
|
#logo
|
||||||
|
margin: auto
|
||||||
|
|
||||||
|
#loginbox
|
||||||
|
position: relative
|
||||||
|
margin: auto
|
||||||
|
margin-top: 5%
|
||||||
|
padding: 20px
|
||||||
|
background-color: white
|
||||||
|
width: 75%
|
||||||
|
|
||||||
|
label
|
||||||
|
display: block
|
||||||
|
margin-bottom: 5px
|
||||||
|
font-size: 13px
|
||||||
|
font-weight: bold
|
||||||
|
color: #777
|
||||||
|
|
||||||
|
input
|
||||||
|
width: 100%
|
||||||
|
display: block
|
||||||
|
height: 35px
|
||||||
|
font-size: 14px
|
||||||
|
padding: 10px 0.5em
|
||||||
|
margin-bottom: 15px
|
||||||
|
background-color: #f9fafa
|
||||||
|
border: 1px solid #eeeeee
|
||||||
|
color: #2e2d2d
|
||||||
|
borderbox()
|
||||||
|
|
||||||
|
&:focus
|
||||||
|
border: 1px solid #a7d9eb
|
||||||
|
outline: 0px
|
||||||
|
|
||||||
|
button, .andyetLogin
|
||||||
|
text-decoration: none
|
||||||
|
text-align: center
|
||||||
|
roundall: 3px
|
||||||
|
border: none
|
||||||
|
height: 35px
|
||||||
|
padding: 0 1em
|
||||||
|
color: white
|
||||||
|
background-color: #7ec6e2
|
||||||
|
line-height: 35px
|
||||||
|
font-size: 16px
|
||||||
|
cursor: pointer
|
||||||
|
|
||||||
|
.andyetLogin
|
||||||
|
display: block
|
||||||
|
float: right
|
||||||
|
font-size: 14px
|
||||||
|
|
||||||
|
h2
|
||||||
|
color: #222
|
||||||
|
padding-bottom: 10px
|
||||||
|
border-bottom: 1px solid #f8f8f8
|
||||||
|
|
||||||
|
|
||||||
160
public/css/app/chat.styl
Normal file
160
public/css/app/chat.styl
Normal file
@ -0,0 +1,160 @@
|
|||||||
|
@import '../_variables'
|
||||||
|
@import '../_mixins'
|
||||||
|
|
||||||
|
.page.chat
|
||||||
|
padding-top: 0px
|
||||||
|
height: 100%
|
||||||
|
borderbox()
|
||||||
|
|
||||||
|
.conversation
|
||||||
|
position: relative
|
||||||
|
bottom: 0px
|
||||||
|
left: 0px
|
||||||
|
right: 0px
|
||||||
|
padding: 0px
|
||||||
|
height: 100%
|
||||||
|
width: 100%
|
||||||
|
borderbox()
|
||||||
|
|
||||||
|
header
|
||||||
|
padding: 5px
|
||||||
|
gradient: #e1e4e6 #cacdce
|
||||||
|
shadow: rgba(#000,0.1) 2px 1px 5px
|
||||||
|
border-bottom: 1px solid #aaa
|
||||||
|
position: fixed
|
||||||
|
right: 0px
|
||||||
|
left: 156px
|
||||||
|
z-index: 10
|
||||||
|
font-size: 14px
|
||||||
|
borderbox()
|
||||||
|
color: #222
|
||||||
|
font-weight: normal
|
||||||
|
font-size: 11px
|
||||||
|
|
||||||
|
.avatar
|
||||||
|
margin-right: 5px
|
||||||
|
roundall: 5px
|
||||||
|
width: 30px
|
||||||
|
height: 30px
|
||||||
|
position: absolute
|
||||||
|
top: 11px
|
||||||
|
left: 11px
|
||||||
|
vertical-align: top
|
||||||
|
|
||||||
|
.name
|
||||||
|
margin: 15px
|
||||||
|
padding: 0px
|
||||||
|
margin-left: 45px
|
||||||
|
font-size: 14px
|
||||||
|
line-height: 14px
|
||||||
|
|
||||||
|
.messages
|
||||||
|
background: #ecf0f2
|
||||||
|
font-weight: normal
|
||||||
|
margin: 0px
|
||||||
|
padding: 0px
|
||||||
|
padding-top: 150px
|
||||||
|
overflow-y: auto
|
||||||
|
overflow-x: hidden
|
||||||
|
position: relative
|
||||||
|
bottom: 75px
|
||||||
|
width: 100%
|
||||||
|
borderbox()
|
||||||
|
|
||||||
|
li
|
||||||
|
position: relative
|
||||||
|
z-index: 1
|
||||||
|
list-style: none
|
||||||
|
margin: 0px
|
||||||
|
padding: 0px
|
||||||
|
width: 100%
|
||||||
|
display: block
|
||||||
|
borderbox()
|
||||||
|
|
||||||
|
.message
|
||||||
|
color: #33404c
|
||||||
|
font-size: 12px
|
||||||
|
margin: 0px
|
||||||
|
padding: 7px 11px
|
||||||
|
display: inline-block
|
||||||
|
padding-right: 11px
|
||||||
|
min-width: 20px
|
||||||
|
width: 100%
|
||||||
|
border-bottom: 1px solid #ccc
|
||||||
|
borderbox()
|
||||||
|
|
||||||
|
&.mine
|
||||||
|
background: #eaf7ff
|
||||||
|
border-bottom: 1px solid #bbe0fa
|
||||||
|
|
||||||
|
.timestamp
|
||||||
|
color: #bbe0fa
|
||||||
|
|
||||||
|
&.delayed
|
||||||
|
.timestamp:before
|
||||||
|
content: '@ '
|
||||||
|
|
||||||
|
&.edited
|
||||||
|
.timestamp:before
|
||||||
|
content: 'edited '
|
||||||
|
|
||||||
|
.body
|
||||||
|
display: inline
|
||||||
|
word-break: break-word
|
||||||
|
padding: 0px
|
||||||
|
margin: 0px
|
||||||
|
color: #111
|
||||||
|
|
||||||
|
.timestamp
|
||||||
|
font-size: 12px
|
||||||
|
color: #bbb
|
||||||
|
font-weight: bold
|
||||||
|
float: right
|
||||||
|
display: block
|
||||||
|
margin-right: 15px
|
||||||
|
|
||||||
|
.chatBox
|
||||||
|
borderbox()
|
||||||
|
border-top: 1px solid rgba(0,0,0,.08)
|
||||||
|
bottom: 0px
|
||||||
|
position: fixed
|
||||||
|
right: 0px
|
||||||
|
left: 156px
|
||||||
|
z-index: 200
|
||||||
|
|
||||||
|
form
|
||||||
|
gradient: #e1e4e6 #cacdce
|
||||||
|
padding: 11px
|
||||||
|
border-top: 1px solid #fff
|
||||||
|
border-left: 1px solid #ddd
|
||||||
|
border-right: 1px solid #ddd
|
||||||
|
|
||||||
|
.formwrap
|
||||||
|
borderbox()
|
||||||
|
width: 100%
|
||||||
|
padding-right: 80px
|
||||||
|
position: relative
|
||||||
|
|
||||||
|
textarea
|
||||||
|
background-color: #fff
|
||||||
|
width: 100%
|
||||||
|
height: 30px
|
||||||
|
border: 1px solid #ccc
|
||||||
|
border-top-color: #bbb
|
||||||
|
roundall: 5px
|
||||||
|
innerShadow: rgba(0,0,0,.1) 0 -1px 3px
|
||||||
|
line-height: 18px
|
||||||
|
outline: none
|
||||||
|
resize: none
|
||||||
|
color: #222f3b
|
||||||
|
font-size: 14px
|
||||||
|
-webkit-font-smoothing: antialiased
|
||||||
|
padding: 5px
|
||||||
|
borderbox()
|
||||||
|
|
||||||
|
&:focus
|
||||||
|
border-color: #bbb
|
||||||
|
border-top-color: #aaa
|
||||||
|
|
||||||
|
&.editing
|
||||||
|
background-color: yellow
|
||||||
40
public/css/app/connectionStatus.styl
Normal file
40
public/css/app/connectionStatus.styl
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
@import '../_variables'
|
||||||
|
@import '../_mixins'
|
||||||
|
|
||||||
|
#connectionOverlay
|
||||||
|
position: fixed
|
||||||
|
top: 0px
|
||||||
|
left: 0px
|
||||||
|
width: 100%
|
||||||
|
height: 100%
|
||||||
|
background: rgba(0, 0, 0, 0.5)
|
||||||
|
z-index: 1000
|
||||||
|
transition: all .25s linear 0
|
||||||
|
|
||||||
|
&.connected
|
||||||
|
height: 0px
|
||||||
|
|
||||||
|
#connectionStatus
|
||||||
|
top: -51px
|
||||||
|
|
||||||
|
#connectionStatus
|
||||||
|
height: 50px
|
||||||
|
line-height: 50px
|
||||||
|
top: 0px;
|
||||||
|
position: fixed
|
||||||
|
background-color: #333
|
||||||
|
border-bottom: 1px solid #000
|
||||||
|
width: 100%
|
||||||
|
z-index: 9999
|
||||||
|
text-align: center
|
||||||
|
|
||||||
|
span.message
|
||||||
|
display: inline-block
|
||||||
|
padding: 0px 10px
|
||||||
|
font-weight: bold
|
||||||
|
font-size: 24px
|
||||||
|
|
||||||
|
button
|
||||||
|
padding: 5px 8px
|
||||||
|
position: relative
|
||||||
|
top: -3px
|
||||||
20
public/css/app/layout.styl
Normal file
20
public/css/app/layout.styl
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
@import '../_variables'
|
||||||
|
@import '../_mixins'
|
||||||
|
|
||||||
|
body
|
||||||
|
background: #ecf0f2
|
||||||
|
color: #222
|
||||||
|
font-family: 'Lucdia Grande', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, sans-serif
|
||||||
|
font-size: 17px
|
||||||
|
font-weight: 500
|
||||||
|
-webkit-font-smoothing: antialiased
|
||||||
|
|
||||||
|
#pages
|
||||||
|
position: absolute
|
||||||
|
top: 0px
|
||||||
|
right: 0px
|
||||||
|
left: 156px
|
||||||
|
borderbox()
|
||||||
|
|
||||||
|
#menu
|
||||||
|
width: 155px
|
||||||
143
public/css/app/roster.styl
Normal file
143
public/css/app/roster.styl
Normal file
@ -0,0 +1,143 @@
|
|||||||
|
@import '../_variables'
|
||||||
|
@import '../_mixins'
|
||||||
|
|
||||||
|
#menu
|
||||||
|
position: fixed
|
||||||
|
top: 0px
|
||||||
|
bottom: 0px
|
||||||
|
left: 0px
|
||||||
|
width: 155px
|
||||||
|
background-color: #1c232d
|
||||||
|
z-index: 300
|
||||||
|
overflow-y: auto;
|
||||||
|
overflow-x: hidden;
|
||||||
|
webkit-transition-fix()
|
||||||
|
noselect()
|
||||||
|
shadow: #000 1px 0px 1px
|
||||||
|
|
||||||
|
.main
|
||||||
|
li
|
||||||
|
list-style-type: none
|
||||||
|
padding: 5px
|
||||||
|
line-height: 12px
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
background-color: #2a323f
|
||||||
|
|
||||||
|
a
|
||||||
|
color: #666
|
||||||
|
|
||||||
|
a
|
||||||
|
text-decoration: none
|
||||||
|
font-size: 12px
|
||||||
|
color: #777
|
||||||
|
|
||||||
|
|
||||||
|
h1
|
||||||
|
font-size: 11px
|
||||||
|
margin: 0px
|
||||||
|
margin-bottom: 1px
|
||||||
|
padding: 5px
|
||||||
|
color: #222
|
||||||
|
border-top: 1px solid #fff
|
||||||
|
border-bottom: 1px solid #aaa
|
||||||
|
gradient: #e1e4e6 #cacdce
|
||||||
|
shadow: rgba(0,0,0,0.75) 2px 1px 5px
|
||||||
|
text-shadow: #fff 1px 1px 1px
|
||||||
|
|
||||||
|
#roster
|
||||||
|
li
|
||||||
|
list-style-type: none
|
||||||
|
padding: 11px
|
||||||
|
margin: 0px
|
||||||
|
position: relative
|
||||||
|
min-height: 20px
|
||||||
|
font-size: 11px
|
||||||
|
color: #fff
|
||||||
|
|
||||||
|
&:nth-child(2n)
|
||||||
|
background-color: #1e252f
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
background-color: #2a323f
|
||||||
|
|
||||||
|
&.hasUnread .unread
|
||||||
|
display: block
|
||||||
|
|
||||||
|
&.online,
|
||||||
|
&.chat
|
||||||
|
border-left: 2px solid green
|
||||||
|
|
||||||
|
&.dnd
|
||||||
|
border-left: 2px solid red
|
||||||
|
|
||||||
|
&.away,
|
||||||
|
&.xa
|
||||||
|
border-left: 2px solid orange
|
||||||
|
|
||||||
|
&.offline
|
||||||
|
border-left: 2px solid #222
|
||||||
|
color: #aaa
|
||||||
|
|
||||||
|
img
|
||||||
|
opacity: .25
|
||||||
|
|
||||||
|
.status
|
||||||
|
color: #777
|
||||||
|
|
||||||
|
&.activeContact
|
||||||
|
gradient: #35c8ff #00aeef
|
||||||
|
border-top: 1px solid #8de0ff
|
||||||
|
border-bottom: 1px solid #004a65
|
||||||
|
|
||||||
|
&.composing
|
||||||
|
border-right: 4px solid orange
|
||||||
|
|
||||||
|
&.paused
|
||||||
|
border-right: 4px solid #666
|
||||||
|
|
||||||
|
img
|
||||||
|
opacity: 1
|
||||||
|
|
||||||
|
.avatar
|
||||||
|
vertical-align: top
|
||||||
|
margin-right: 5px
|
||||||
|
position: absolute
|
||||||
|
left: 5px
|
||||||
|
top: 5px
|
||||||
|
width: 30px
|
||||||
|
height: 30px
|
||||||
|
roundall: 5px
|
||||||
|
shadow: rgba(0,0,0,0.5) -1px -1px 1px
|
||||||
|
noselect()
|
||||||
|
|
||||||
|
.name
|
||||||
|
margin: 0px
|
||||||
|
margin-left: 40px
|
||||||
|
font-weight: bold
|
||||||
|
text-shadow: rgba(0,0,0,0.5) -1px -1px 1px
|
||||||
|
|
||||||
|
.status
|
||||||
|
color: #ccc
|
||||||
|
font-size: 10px
|
||||||
|
font-style: italic
|
||||||
|
font-weight: 600
|
||||||
|
margin: 0px
|
||||||
|
margin-left: 40px
|
||||||
|
text-shadow: rgba(0,0,0,0.5) 1px 1px 1px
|
||||||
|
|
||||||
|
.unread
|
||||||
|
display: none
|
||||||
|
color: white
|
||||||
|
padding-left: 5px
|
||||||
|
padding-right: 5px
|
||||||
|
roundall: 11px
|
||||||
|
position: absolute
|
||||||
|
top: 20px
|
||||||
|
left: 20px
|
||||||
|
text-align: center
|
||||||
|
font-weight: bold
|
||||||
|
background-color: red
|
||||||
|
border: 1px solid white
|
||||||
|
text-shadow: rgba(0,0,0,0.5) 1px 1px 1px
|
||||||
|
shadow: rgba(0,0,0,0.5) 1px 1px 1px
|
||||||
739
public/css/otalk.css
Normal file
739
public/css/otalk.css
Normal file
@ -0,0 +1,739 @@
|
|||||||
|
article,
|
||||||
|
aside,
|
||||||
|
details,
|
||||||
|
figcaption,
|
||||||
|
figure,
|
||||||
|
footer,
|
||||||
|
header,
|
||||||
|
hgroup,
|
||||||
|
nav,
|
||||||
|
section {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
audio,
|
||||||
|
canvas,
|
||||||
|
video {
|
||||||
|
display: inline-block;
|
||||||
|
*display: inline;
|
||||||
|
*zoom: 1;
|
||||||
|
}
|
||||||
|
audio:not([controls]) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
[hidden] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
html {
|
||||||
|
font-size: 100%;
|
||||||
|
-webkit-text-size-adjust: 100%;
|
||||||
|
-ms-text-size-adjust: 100%;
|
||||||
|
}
|
||||||
|
html,
|
||||||
|
button,
|
||||||
|
input,
|
||||||
|
select,
|
||||||
|
textarea {
|
||||||
|
font-family: sans-serif;
|
||||||
|
color: #222;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 1em;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
color: #00e;
|
||||||
|
}
|
||||||
|
a:visited {
|
||||||
|
color: #551a8b;
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
color: #06e;
|
||||||
|
}
|
||||||
|
a:focus {
|
||||||
|
outline: thin dotted;
|
||||||
|
}
|
||||||
|
a:hover,
|
||||||
|
a:active {
|
||||||
|
outline: 0;
|
||||||
|
}
|
||||||
|
abbr[title] {
|
||||||
|
border-bottom: 1px dotted;
|
||||||
|
}
|
||||||
|
b,
|
||||||
|
strong {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
blockquote {
|
||||||
|
margin: 1em 40px;
|
||||||
|
}
|
||||||
|
dfn {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
hr {
|
||||||
|
display: block;
|
||||||
|
height: 1px;
|
||||||
|
border: 0;
|
||||||
|
border-top: 1px solid #ccc;
|
||||||
|
margin: 1em 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
ins {
|
||||||
|
background: #ff9;
|
||||||
|
color: #000;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
mark {
|
||||||
|
background: #ff0;
|
||||||
|
color: #000;
|
||||||
|
font-style: italic;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
pre,
|
||||||
|
code,
|
||||||
|
kbd,
|
||||||
|
samp {
|
||||||
|
font-family: monospace, serif;
|
||||||
|
_font-family: 'courier new', monospace;
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
pre {
|
||||||
|
white-space: pre-wrap;
|
||||||
|
word-wrap: break-word;
|
||||||
|
}
|
||||||
|
q {
|
||||||
|
quotes: none;
|
||||||
|
}
|
||||||
|
q:before,
|
||||||
|
q:after {
|
||||||
|
content: none;
|
||||||
|
}
|
||||||
|
small {
|
||||||
|
font-size: 85%;
|
||||||
|
}
|
||||||
|
sub,
|
||||||
|
sup {
|
||||||
|
font-size: 75%;
|
||||||
|
line-height: 0;
|
||||||
|
position: relative;
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
sup {
|
||||||
|
top: -0.5em;
|
||||||
|
}
|
||||||
|
sub {
|
||||||
|
bottom: -0.25em;
|
||||||
|
}
|
||||||
|
ul,
|
||||||
|
ol {
|
||||||
|
margin: 1em 0;
|
||||||
|
padding: 0 0 0 40px;
|
||||||
|
}
|
||||||
|
dd {
|
||||||
|
margin: 0 0 0 40px;
|
||||||
|
}
|
||||||
|
nav ul,
|
||||||
|
nav ol {
|
||||||
|
list-style: none;
|
||||||
|
list-style-image: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
border: 0;
|
||||||
|
-ms-interpolation-mode: bicubic;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
svg:not(:root) {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
figure {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
form {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
fieldset {
|
||||||
|
border: 0;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
label {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
legend {
|
||||||
|
border: 0;
|
||||||
|
*margin-left: -7px;
|
||||||
|
padding: 0;
|
||||||
|
white-space: normal;
|
||||||
|
}
|
||||||
|
button,
|
||||||
|
input,
|
||||||
|
select,
|
||||||
|
textarea {
|
||||||
|
font-size: 100%;
|
||||||
|
margin: 0;
|
||||||
|
vertical-align: baseline;
|
||||||
|
*vertical-align: middle;
|
||||||
|
}
|
||||||
|
button,
|
||||||
|
input {
|
||||||
|
line-height: normal;
|
||||||
|
}
|
||||||
|
button,
|
||||||
|
input[type="button"],
|
||||||
|
input[type="reset"],
|
||||||
|
input[type="submit"] {
|
||||||
|
cursor: pointer;
|
||||||
|
-webkit-appearance: button;
|
||||||
|
*overflow: visible;
|
||||||
|
}
|
||||||
|
button[disabled],
|
||||||
|
input[disabled] {
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
input[type="checkbox"],
|
||||||
|
input[type="radio"] {
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0;
|
||||||
|
*width: 13px;
|
||||||
|
*height: 13px;
|
||||||
|
}
|
||||||
|
input[type="search"] {
|
||||||
|
-webkit-appearance: textfield;
|
||||||
|
-moz-box-sizing: content-box;
|
||||||
|
-webkit-box-sizing: content-box;
|
||||||
|
box-sizing: content-box;
|
||||||
|
}
|
||||||
|
input[type="search"]::-webkit-search-decoration,
|
||||||
|
input[type="search"]::-webkit-search-cancel-button {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
}
|
||||||
|
button::-moz-focus-inner,
|
||||||
|
input::-moz-focus-inner {
|
||||||
|
border: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
textarea {
|
||||||
|
overflow: auto;
|
||||||
|
vertical-align: top;
|
||||||
|
resize: vertical;
|
||||||
|
}
|
||||||
|
input:valid,
|
||||||
|
textarea:valid,
|
||||||
|
input:invalid,
|
||||||
|
textarea:invalid {
|
||||||
|
background-color: #f0dddd;
|
||||||
|
}
|
||||||
|
table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
border-spacing: 0;
|
||||||
|
}
|
||||||
|
td {
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
.clearfix:before,
|
||||||
|
.clearfix:after {
|
||||||
|
content: "\0020";
|
||||||
|
display: block;
|
||||||
|
height: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
.clearfix:after {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
.clearfix {
|
||||||
|
zoom: 1;
|
||||||
|
}
|
||||||
|
#menu {
|
||||||
|
position: fixed;
|
||||||
|
top: 0px;
|
||||||
|
bottom: 0px;
|
||||||
|
left: 0px;
|
||||||
|
width: 155px;
|
||||||
|
background-color: #1c232d;
|
||||||
|
z-index: 300;
|
||||||
|
overflow-y: auto;
|
||||||
|
overflow-x: hidden;
|
||||||
|
-webkit-backface-visibility: hidden;
|
||||||
|
-webkit-touch-callout: none;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-khtml-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
-webkit-box-shadow: #000 1px 0px 1px;
|
||||||
|
-moz-box-shadow: #000 1px 0px 1px;
|
||||||
|
box-shadow: #000 1px 0px 1px;
|
||||||
|
}
|
||||||
|
#menu .main li {
|
||||||
|
list-style-type: none;
|
||||||
|
padding: 5px;
|
||||||
|
line-height: 12px;
|
||||||
|
}
|
||||||
|
#menu .main li:hover {
|
||||||
|
background-color: #2a323f;
|
||||||
|
}
|
||||||
|
#menu .main li:hover a {
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
#menu .main li a {
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #777;
|
||||||
|
}
|
||||||
|
#menu h1 {
|
||||||
|
font-size: 11px;
|
||||||
|
margin: 0px;
|
||||||
|
margin-bottom: 1px;
|
||||||
|
padding: 5px;
|
||||||
|
color: #222;
|
||||||
|
border-top: 1px solid #fff;
|
||||||
|
border-bottom: 1px solid #aaa;
|
||||||
|
background: #e1e4e6;
|
||||||
|
background-image: -moz-linear-gradient(top, #e1e4e6, #cacdce);
|
||||||
|
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #e1e4e6), color-stop(1, #cacdce));
|
||||||
|
-webkit-box-shadow: rgba(0,0,0,0.75) 2px 1px 5px;
|
||||||
|
-moz-box-shadow: rgba(0,0,0,0.75) 2px 1px 5px;
|
||||||
|
box-shadow: rgba(0,0,0,0.75) 2px 1px 5px;
|
||||||
|
text-shadow: #fff 1px 1px 1px;
|
||||||
|
}
|
||||||
|
#roster li {
|
||||||
|
list-style-type: none;
|
||||||
|
padding: 11px;
|
||||||
|
margin: 0px;
|
||||||
|
position: relative;
|
||||||
|
min-height: 20px;
|
||||||
|
font-size: 11px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
#roster li:nth-child(2n) {
|
||||||
|
background-color: #1e252f;
|
||||||
|
}
|
||||||
|
#roster li:hover {
|
||||||
|
background-color: #2a323f;
|
||||||
|
}
|
||||||
|
#roster li.hasUnread .unread {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
#roster li.online,
|
||||||
|
#roster li.chat {
|
||||||
|
border-left: 2px solid #008000;
|
||||||
|
}
|
||||||
|
#roster li.dnd {
|
||||||
|
border-left: 2px solid #f00;
|
||||||
|
}
|
||||||
|
#roster li.away,
|
||||||
|
#roster li.xa {
|
||||||
|
border-left: 2px solid #ffa500;
|
||||||
|
}
|
||||||
|
#roster li.offline {
|
||||||
|
border-left: 2px solid #222;
|
||||||
|
color: #aaa;
|
||||||
|
}
|
||||||
|
#roster li.offline img {
|
||||||
|
opacity: 0.25;
|
||||||
|
}
|
||||||
|
#roster li.offline .status {
|
||||||
|
color: #777;
|
||||||
|
}
|
||||||
|
#roster li.activeContact {
|
||||||
|
background: #35c8ff;
|
||||||
|
background-image: -moz-linear-gradient(top, #35c8ff, #00aeef);
|
||||||
|
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #35c8ff), color-stop(1, #00aeef));
|
||||||
|
border-top: 1px solid #8de0ff;
|
||||||
|
border-bottom: 1px solid #004a65;
|
||||||
|
}
|
||||||
|
#roster li.composing {
|
||||||
|
border-right: 4px solid #ffa500;
|
||||||
|
}
|
||||||
|
#roster li.paused {
|
||||||
|
border-right: 4px solid #666;
|
||||||
|
}
|
||||||
|
#roster li img {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
#roster li .avatar {
|
||||||
|
vertical-align: top;
|
||||||
|
margin-right: 5px;
|
||||||
|
position: absolute;
|
||||||
|
left: 5px;
|
||||||
|
top: 5px;
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
-moz-border-radius: 5px;
|
||||||
|
-webkit-border-radius: 5px;
|
||||||
|
-khtml-border-radius: 5px;
|
||||||
|
-o-border-radius: 5px;
|
||||||
|
-border-radius: 5px;
|
||||||
|
border-radius: 5px;
|
||||||
|
-webkit-box-shadow: rgba(0,0,0,0.5) -1px -1px 1px;
|
||||||
|
-moz-box-shadow: rgba(0,0,0,0.5) -1px -1px 1px;
|
||||||
|
box-shadow: rgba(0,0,0,0.5) -1px -1px 1px;
|
||||||
|
-webkit-touch-callout: none;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-khtml-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
#roster li .name {
|
||||||
|
margin: 0px;
|
||||||
|
margin-left: 40px;
|
||||||
|
font-weight: bold;
|
||||||
|
text-shadow: rgba(0,0,0,0.5) -1px -1px 1px;
|
||||||
|
}
|
||||||
|
#roster li .status {
|
||||||
|
color: #ccc;
|
||||||
|
font-size: 10px;
|
||||||
|
font-style: italic;
|
||||||
|
font-weight: 600;
|
||||||
|
margin: 0px;
|
||||||
|
margin-left: 40px;
|
||||||
|
text-shadow: rgba(0,0,0,0.5) 1px 1px 1px;
|
||||||
|
}
|
||||||
|
#roster li .unread {
|
||||||
|
display: none;
|
||||||
|
color: #fff;
|
||||||
|
padding-left: 5px;
|
||||||
|
padding-right: 5px;
|
||||||
|
-moz-border-radius: 11px;
|
||||||
|
-webkit-border-radius: 11px;
|
||||||
|
-khtml-border-radius: 11px;
|
||||||
|
-o-border-radius: 11px;
|
||||||
|
-border-radius: 11px;
|
||||||
|
border-radius: 11px;
|
||||||
|
position: absolute;
|
||||||
|
top: 20px;
|
||||||
|
left: 20px;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: bold;
|
||||||
|
background-color: #f00;
|
||||||
|
border: 1px solid #fff;
|
||||||
|
text-shadow: rgba(0,0,0,0.5) 1px 1px 1px;
|
||||||
|
-webkit-box-shadow: rgba(0,0,0,0.5) 1px 1px 1px;
|
||||||
|
-moz-box-shadow: rgba(0,0,0,0.5) 1px 1px 1px;
|
||||||
|
box-shadow: rgba(0,0,0,0.5) 1px 1px 1px;
|
||||||
|
}
|
||||||
|
.page.chat {
|
||||||
|
padding-top: 0px;
|
||||||
|
height: 100%;
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.conversation {
|
||||||
|
position: relative;
|
||||||
|
bottom: 0px;
|
||||||
|
left: 0px;
|
||||||
|
right: 0px;
|
||||||
|
padding: 0px;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.conversation header {
|
||||||
|
padding: 5px;
|
||||||
|
background: #e1e4e6;
|
||||||
|
background-image: -moz-linear-gradient(top, #e1e4e6, #cacdce);
|
||||||
|
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #e1e4e6), color-stop(1, #cacdce));
|
||||||
|
-webkit-box-shadow: rgba(0,0,0,0.1) 2px 1px 5px;
|
||||||
|
-moz-box-shadow: rgba(0,0,0,0.1) 2px 1px 5px;
|
||||||
|
box-shadow: rgba(0,0,0,0.1) 2px 1px 5px;
|
||||||
|
border-bottom: 1px solid #aaa;
|
||||||
|
position: fixed;
|
||||||
|
right: 0px;
|
||||||
|
left: 156px;
|
||||||
|
z-index: 10;
|
||||||
|
font-size: 14px;
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
color: #222;
|
||||||
|
font-weight: normal;
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
||||||
|
.conversation header .avatar {
|
||||||
|
margin-right: 5px;
|
||||||
|
-moz-border-radius: 5px;
|
||||||
|
-webkit-border-radius: 5px;
|
||||||
|
-khtml-border-radius: 5px;
|
||||||
|
-o-border-radius: 5px;
|
||||||
|
-border-radius: 5px;
|
||||||
|
border-radius: 5px;
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
position: absolute;
|
||||||
|
top: 11px;
|
||||||
|
left: 11px;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
.conversation header .name {
|
||||||
|
margin: 15px;
|
||||||
|
padding: 0px;
|
||||||
|
margin-left: 45px;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 14px;
|
||||||
|
}
|
||||||
|
.messages {
|
||||||
|
background: #ecf0f2;
|
||||||
|
font-weight: normal;
|
||||||
|
margin: 0px;
|
||||||
|
padding: 0px;
|
||||||
|
padding-top: 150px;
|
||||||
|
overflow-y: auto;
|
||||||
|
overflow-x: hidden;
|
||||||
|
position: relative;
|
||||||
|
bottom: 75px;
|
||||||
|
width: 100%;
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.messages li {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
list-style: none;
|
||||||
|
margin: 0px;
|
||||||
|
padding: 0px;
|
||||||
|
width: 100%;
|
||||||
|
display: block;
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.messages .message {
|
||||||
|
color: #33404c;
|
||||||
|
font-size: 12px;
|
||||||
|
margin: 0px;
|
||||||
|
padding: 7px 11px;
|
||||||
|
display: inline-block;
|
||||||
|
padding-right: 11px;
|
||||||
|
min-width: 20px;
|
||||||
|
width: 100%;
|
||||||
|
border-bottom: 1px solid #ccc;
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.messages .message.mine {
|
||||||
|
background: #eaf7ff;
|
||||||
|
border-bottom: 1px solid #bbe0fa;
|
||||||
|
}
|
||||||
|
.messages .message.mine .timestamp {
|
||||||
|
color: #bbe0fa;
|
||||||
|
}
|
||||||
|
.messages .message.delayed .timestamp:before {
|
||||||
|
content: '@ ';
|
||||||
|
}
|
||||||
|
.messages .message.edited .timestamp:before {
|
||||||
|
content: 'edited ';
|
||||||
|
}
|
||||||
|
.messages .message .body {
|
||||||
|
display: inline;
|
||||||
|
word-break: break-word;
|
||||||
|
padding: 0px;
|
||||||
|
margin: 0px;
|
||||||
|
color: #111;
|
||||||
|
}
|
||||||
|
.messages .message .timestamp {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #bbb;
|
||||||
|
font-weight: bold;
|
||||||
|
float: right;
|
||||||
|
display: block;
|
||||||
|
margin-right: 15px;
|
||||||
|
}
|
||||||
|
.chatBox {
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-top: 1px solid rgba(0,0,0,0.08);
|
||||||
|
bottom: 0px;
|
||||||
|
position: fixed;
|
||||||
|
right: 0px;
|
||||||
|
left: 156px;
|
||||||
|
z-index: 200;
|
||||||
|
}
|
||||||
|
.chatBox form {
|
||||||
|
background: #e1e4e6;
|
||||||
|
background-image: -moz-linear-gradient(top, #e1e4e6, #cacdce);
|
||||||
|
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #e1e4e6), color-stop(1, #cacdce));
|
||||||
|
padding: 11px;
|
||||||
|
border-top: 1px solid #fff;
|
||||||
|
border-left: 1px solid #ddd;
|
||||||
|
border-right: 1px solid #ddd;
|
||||||
|
}
|
||||||
|
.chatBox .formwrap {
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 100%;
|
||||||
|
padding-right: 80px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.chatBox textarea {
|
||||||
|
background-color: #fff;
|
||||||
|
width: 100%;
|
||||||
|
height: 30px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-top-color: #bbb;
|
||||||
|
-moz-border-radius: 5px;
|
||||||
|
-webkit-border-radius: 5px;
|
||||||
|
-khtml-border-radius: 5px;
|
||||||
|
-o-border-radius: 5px;
|
||||||
|
-border-radius: 5px;
|
||||||
|
border-radius: 5px;
|
||||||
|
-moz-box-shadow: inset rgba(0,0,0,0.1) 0 -1px 3px;
|
||||||
|
-webkit-box-shadow: inset rgba(0,0,0,0.1) 0 -1px 3px;
|
||||||
|
box-shadow: inset rgba(0,0,0,0.1) 0 -1px 3px;
|
||||||
|
line-height: 18px;
|
||||||
|
outline: none;
|
||||||
|
resize: none;
|
||||||
|
color: #222f3b;
|
||||||
|
font-size: 14px;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
padding: 5px;
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.chatBox textarea:focus {
|
||||||
|
border-color: #bbb;
|
||||||
|
border-top-color: #aaa;
|
||||||
|
}
|
||||||
|
.chatBox textarea.editing {
|
||||||
|
background-color: #ff0;
|
||||||
|
}
|
||||||
|
#connectionOverlay {
|
||||||
|
position: fixed;
|
||||||
|
top: 0px;
|
||||||
|
left: 0px;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(0,0,0,0.5);
|
||||||
|
z-index: 1000;
|
||||||
|
-webkit-transition: all 0.25s linear 0;
|
||||||
|
-o-transition: all 0.25s linear 0;
|
||||||
|
transition: all 0.25s linear 0;
|
||||||
|
-moz-transition: all 0.25s linear 0;
|
||||||
|
}
|
||||||
|
#connectionOverlay.connected {
|
||||||
|
height: 0px;
|
||||||
|
}
|
||||||
|
#connectionOverlay.connected #connectionStatus {
|
||||||
|
top: -51px;
|
||||||
|
}
|
||||||
|
#connectionStatus {
|
||||||
|
height: 50px;
|
||||||
|
line-height: 50px;
|
||||||
|
top: 0px;
|
||||||
|
position: fixed;
|
||||||
|
background-color: #333;
|
||||||
|
border-bottom: 1px solid #000;
|
||||||
|
width: 100%;
|
||||||
|
z-index: 9999;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
#connectionStatus span.message {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0px 10px;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
#connectionStatus button {
|
||||||
|
padding: 5px 8px;
|
||||||
|
position: relative;
|
||||||
|
top: -3px;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
background: #ecf0f2;
|
||||||
|
color: #222;
|
||||||
|
font-family: 'Lucdia Grande', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||||
|
font-size: 17px;
|
||||||
|
font-weight: 500;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
}
|
||||||
|
body #pages {
|
||||||
|
position: absolute;
|
||||||
|
top: 0px;
|
||||||
|
right: 0px;
|
||||||
|
left: 156px;
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
body #menu {
|
||||||
|
width: 155px;
|
||||||
|
}
|
||||||
|
.aux header {
|
||||||
|
margin-top: 10%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
#logo {
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
#loginbox {
|
||||||
|
position: relative;
|
||||||
|
margin: auto;
|
||||||
|
margin-top: 5%;
|
||||||
|
padding: 20px;
|
||||||
|
background-color: #fff;
|
||||||
|
width: 75%;
|
||||||
|
}
|
||||||
|
#loginbox label {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #777;
|
||||||
|
}
|
||||||
|
#loginbox input {
|
||||||
|
width: 100%;
|
||||||
|
display: block;
|
||||||
|
height: 35px;
|
||||||
|
font-size: 14px;
|
||||||
|
padding: 10px 0.5em;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
background-color: #f9fafa;
|
||||||
|
border: 1px solid #eee;
|
||||||
|
color: #2e2d2d;
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
#loginbox input:focus {
|
||||||
|
border: 1px solid #a7d9eb;
|
||||||
|
outline: 0px;
|
||||||
|
}
|
||||||
|
#loginbox button,
|
||||||
|
#loginbox .andyetLogin {
|
||||||
|
text-decoration: none;
|
||||||
|
text-align: center;
|
||||||
|
-moz-border-radius: 3px;
|
||||||
|
-webkit-border-radius: 3px;
|
||||||
|
-khtml-border-radius: 3px;
|
||||||
|
-o-border-radius: 3px;
|
||||||
|
-border-radius: 3px;
|
||||||
|
border-radius: 3px;
|
||||||
|
border: none;
|
||||||
|
height: 35px;
|
||||||
|
padding: 0 1em;
|
||||||
|
color: #fff;
|
||||||
|
background-color: #7ec6e2;
|
||||||
|
line-height: 35px;
|
||||||
|
font-size: 16px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
#loginbox .andyetLogin {
|
||||||
|
display: block;
|
||||||
|
float: right;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
#loginbox h2 {
|
||||||
|
color: #222;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
border-bottom: 1px solid #f8f8f8;
|
||||||
|
}
|
||||||
8
public/css/otalk.styl
Normal file
8
public/css/otalk.styl
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
@import '_reset'
|
||||||
|
@import '_variables'
|
||||||
|
@import '_mixins'
|
||||||
|
@import 'app/roster'
|
||||||
|
@import 'app/chat'
|
||||||
|
@import 'app/connectionStatus'
|
||||||
|
@import 'app/layout'
|
||||||
|
@import 'app/aux'
|
||||||
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.7 KiB |
419
public/style.css
419
public/style.css
@ -1,419 +0,0 @@
|
|||||||
html, body {
|
|
||||||
font-family: 'lucida grande';
|
|
||||||
font-size: 11px;
|
|
||||||
padding: 0px;
|
|
||||||
margin: 0px;
|
|
||||||
background-color: #ecf0f2;
|
|
||||||
color: #2e2d2d;
|
|
||||||
}
|
|
||||||
|
|
||||||
#pages {
|
|
||||||
margin-left: 156px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#log {
|
|
||||||
padding: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#connectionOverlay {
|
|
||||||
z-index: 5000;
|
|
||||||
left: 0px;
|
|
||||||
top: 0px;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
background-color: rgba(0, 0, 0, .5);
|
|
||||||
}
|
|
||||||
|
|
||||||
#connectionOverlay {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#me {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav.main {
|
|
||||||
background-color: #1C232D;
|
|
||||||
width: 156px;
|
|
||||||
border-right: 1px solid black;
|
|
||||||
padding: 5px;
|
|
||||||
margin: 0px;
|
|
||||||
text-align: center;
|
|
||||||
box-sizing: border-box;
|
|
||||||
-moz-box-sizing: border-box;
|
|
||||||
position: fixed;
|
|
||||||
bottom: 0px;
|
|
||||||
left: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav.main li {
|
|
||||||
display: inline-block;
|
|
||||||
margin: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav.main a {
|
|
||||||
display: block;
|
|
||||||
text-decoration: none;
|
|
||||||
text-align: center;
|
|
||||||
border-radius: 3px;
|
|
||||||
border: none;
|
|
||||||
height: 20px;
|
|
||||||
padding: 0 5px;
|
|
||||||
color: white;
|
|
||||||
background-color: #333;
|
|
||||||
line-height: 20px;
|
|
||||||
font-size: 12px;
|
|
||||||
cursor: pointer;
|
|
||||||
box-sizing: border-box;
|
|
||||||
-moz-box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
#contactList {
|
|
||||||
top: 0px;
|
|
||||||
bottom: 40px;
|
|
||||||
width: 155px;
|
|
||||||
background-color: #1C232D;
|
|
||||||
position: fixed;
|
|
||||||
overflow-y: auto;
|
|
||||||
overflow-x: hidden;
|
|
||||||
padding: 0px;
|
|
||||||
margin: 0px;
|
|
||||||
border-right: 1px solid black;
|
|
||||||
color: #efefef;
|
|
||||||
text-shadow: 1px 1px 1px #444;
|
|
||||||
}
|
|
||||||
|
|
||||||
#contactList > li {
|
|
||||||
list-style-type: none;
|
|
||||||
padding: 10px;
|
|
||||||
margin: 0px;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
#contactList li:nth-child(2n) {
|
|
||||||
background-color: #1e252f;
|
|
||||||
}
|
|
||||||
|
|
||||||
#contactList li:hover {
|
|
||||||
background-color: #2a323f;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact {
|
|
||||||
min-height: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact .avatar {
|
|
||||||
vertical-align: top;
|
|
||||||
margin-right: 5px;
|
|
||||||
border-radius: 5px;
|
|
||||||
width: 30px;
|
|
||||||
height: 30px;
|
|
||||||
position: absolute;
|
|
||||||
left: 5px;
|
|
||||||
top: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact .name {
|
|
||||||
margin: 0px;
|
|
||||||
margin-left: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact .status {
|
|
||||||
color: #ccc;
|
|
||||||
font-style: italic;
|
|
||||||
font-size: 10px;
|
|
||||||
margin: 0px;
|
|
||||||
margin-left: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact.offline img {
|
|
||||||
opacity: 0.25;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact.online img, .contact.chat img {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact.dnd img {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact.away img, .contact.xa img {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact.online, .contact.chat {
|
|
||||||
border-left: 2px solid green;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact.away {
|
|
||||||
border-left: 2px solid orange;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact.dnd {
|
|
||||||
border-left: 2px solid red;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact.xa {
|
|
||||||
border-left: 2px solid orange;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact.offline {
|
|
||||||
border-left: 2px solid #222;
|
|
||||||
color: #aaa;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact.composing {
|
|
||||||
border-right: 4px solid orange;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact.paused {
|
|
||||||
border-right: 4px solid #666;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact.offline .status {
|
|
||||||
color: #777;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact.activeContact {
|
|
||||||
background-color: #35c8ff;
|
|
||||||
background-image: -moz-linear-gradient(top, #35c8ff, #00aeef);
|
|
||||||
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #35c8ff), color-stop(1, #00aeef));
|
|
||||||
}
|
|
||||||
|
|
||||||
.chatView {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
#conversation {
|
|
||||||
background: #ecf0f2;
|
|
||||||
box-sizing: border-box;
|
|
||||||
-moz-box-sizing: border-box;
|
|
||||||
bottom: 0;
|
|
||||||
margin: 0;
|
|
||||||
padding-bottom: 30px;
|
|
||||||
max-width: 100%;
|
|
||||||
padding: 0;
|
|
||||||
overflow-x: hidden;
|
|
||||||
position: relative;
|
|
||||||
margin-top: 50px;
|
|
||||||
padding-top: 50px;
|
|
||||||
bottom: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#conversation li {
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
list-style: none;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
width: 100%;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
#conversation .message {
|
|
||||||
color: #33404c;
|
|
||||||
font-size: 11px;
|
|
||||||
padding: 7px 10px;
|
|
||||||
display: inline-block;
|
|
||||||
margin: 0;
|
|
||||||
padding-right: 10px;
|
|
||||||
min-width: 20px;
|
|
||||||
width: 100%;
|
|
||||||
border-bottom: 1px solid #ccc;
|
|
||||||
/* background: #f1fce7; */
|
|
||||||
}
|
|
||||||
|
|
||||||
#conversation .body {
|
|
||||||
display: inline;
|
|
||||||
word-break: break-word;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
color: #111;
|
|
||||||
}
|
|
||||||
|
|
||||||
#conversation .message.mine {
|
|
||||||
background: #EAF7FF;
|
|
||||||
border-bottom: 1px solid #BBE0FA;
|
|
||||||
}
|
|
||||||
|
|
||||||
#conversation .timestamp {
|
|
||||||
font-size: 11px;
|
|
||||||
color: #bbb;
|
|
||||||
font-weight: bold;
|
|
||||||
float: right;
|
|
||||||
display: block;
|
|
||||||
margin-right: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#conversation .mine .timestamp {
|
|
||||||
color: #BBE0FA;
|
|
||||||
}
|
|
||||||
|
|
||||||
.delayed .timestamp:before {
|
|
||||||
content: '@ '
|
|
||||||
}
|
|
||||||
|
|
||||||
.edited .timestamp:before {
|
|
||||||
content: 'edited '
|
|
||||||
}
|
|
||||||
|
|
||||||
.contactInfo {
|
|
||||||
padding: 5px;
|
|
||||||
background-color: #e1e4e6;
|
|
||||||
background-image: -moz-linear-gradient(top, #e1e4e6, #cacdce);
|
|
||||||
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #e1e4e6), color-stop(1, #cacdce));
|
|
||||||
-webkit-box-shadow: color 2px 1px 5px;
|
|
||||||
-moz-box-shadow: rgba(0,0,0,0.1) 2px 1px 5px;
|
|
||||||
box-shadow: rgba(0,0,0,0.1) 2px 1px 5px;
|
|
||||||
border-bottom: 1px solid #aaa;
|
|
||||||
min-height: 30px;
|
|
||||||
position: fixed;
|
|
||||||
top: 0px;
|
|
||||||
width: 100%;
|
|
||||||
z-index: 1000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contactInfo .avatar {
|
|
||||||
float: left;
|
|
||||||
margin-right: 5px;
|
|
||||||
border-radius: 5px;
|
|
||||||
width: 30px;
|
|
||||||
height: 30px;
|
|
||||||
position: absolute;
|
|
||||||
top: 10px;
|
|
||||||
left: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contactInfo .name {
|
|
||||||
margin-left: 45px;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact .unread {
|
|
||||||
display: none;
|
|
||||||
color: white;
|
|
||||||
width: 20px;
|
|
||||||
border-radius: 10px;
|
|
||||||
position: absolute;
|
|
||||||
top: 20px;
|
|
||||||
left: 20px;
|
|
||||||
text-align: center;
|
|
||||||
background-color: red;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact.hasUnread .unread {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
#chatInput {
|
|
||||||
position: fixed;
|
|
||||||
bottom: 0px;
|
|
||||||
left: 156px;
|
|
||||||
right: 0px;
|
|
||||||
z-index: 100;
|
|
||||||
background: #ecf0f2;
|
|
||||||
}
|
|
||||||
|
|
||||||
#chatInput form {
|
|
||||||
background-color: #e1e4e6;
|
|
||||||
background-image: -moz-linear-gradient(top, #e1e4e6, #cacdce);
|
|
||||||
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #e1e4e6), color-stop(1, #cacdce));
|
|
||||||
padding: 10px;
|
|
||||||
z-index: 1000;
|
|
||||||
border-top: 1px solid #fff;
|
|
||||||
border-left: 1px solid #ddd;
|
|
||||||
border-right: 1px solid #ddd;
|
|
||||||
}
|
|
||||||
|
|
||||||
#chatBuffer {
|
|
||||||
width: 100%;
|
|
||||||
padding: 5px;
|
|
||||||
height: 30px;
|
|
||||||
line-height: 20px;
|
|
||||||
font-size: 13px;
|
|
||||||
resize: none;
|
|
||||||
outline: none;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border-top-color: #bbb;
|
|
||||||
border-radius: 5px;
|
|
||||||
-moz-box-sizing: border-box;
|
|
||||||
box-sizing: border-box;
|
|
||||||
font-family: 'lucida grande';
|
|
||||||
}
|
|
||||||
|
|
||||||
#chatBuffer.editing {
|
|
||||||
background-color: yellow;
|
|
||||||
}
|
|
||||||
|
|
||||||
#loginbox {
|
|
||||||
position: relative;
|
|
||||||
margin: auto;
|
|
||||||
margin-top: 5%;
|
|
||||||
padding: 20px;
|
|
||||||
background-color: white;
|
|
||||||
width: 75%;
|
|
||||||
}
|
|
||||||
#loginbox label {
|
|
||||||
display: block;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
font-size: 13px;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #777;
|
|
||||||
}
|
|
||||||
#loginbox input {
|
|
||||||
width: 100%;
|
|
||||||
display: block;
|
|
||||||
height: 35px;
|
|
||||||
font-size: 14px;
|
|
||||||
padding: 10px 0.5em;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
background-color: #f9fafa;
|
|
||||||
border: 1px solid #eeeeee;
|
|
||||||
color: #2e2d2d;
|
|
||||||
box-sizing: border-box;
|
|
||||||
-moz-box-sizing: border-box;
|
|
||||||
}
|
|
||||||
#loginbox input:focus {
|
|
||||||
border: 1px solid #a7d9eb;
|
|
||||||
outline: 0px;
|
|
||||||
}
|
|
||||||
button, .andyetLogin {
|
|
||||||
text-decoration: none;
|
|
||||||
text-align: center;
|
|
||||||
border-radius: 3px;
|
|
||||||
border: none;
|
|
||||||
height: 35px;
|
|
||||||
padding: 0 1em;
|
|
||||||
color: white;
|
|
||||||
background-color: #7ec6e2;
|
|
||||||
line-height: 35px;
|
|
||||||
font-size: 16px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
#loginbox h2 {
|
|
||||||
padding-bottom: 10px;
|
|
||||||
border-bottom: 1px solid #f8f8f8
|
|
||||||
}
|
|
||||||
.andyetLogin {
|
|
||||||
display: block;
|
|
||||||
float: right;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
.aux header {
|
|
||||||
margin-top: 10%;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
#logo {
|
|
||||||
margin: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.enableAlerts {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.enableAlerts.shouldAskForAlertsPermission {
|
|
||||||
display: block;
|
|
||||||
font-size: 12px;
|
|
||||||
height: 20px;
|
|
||||||
line-height: 20px;
|
|
||||||
}
|
|
||||||
@ -28,7 +28,7 @@ var clientApp = new Moonboots({
|
|||||||
__dirname + '/clientapp/libraries/stanza.io.js'
|
__dirname + '/clientapp/libraries/stanza.io.js'
|
||||||
],
|
],
|
||||||
stylesheets: [
|
stylesheets: [
|
||||||
__dirname + '/public/style.css'
|
__dirname + '/public/css/otalk.css'
|
||||||
],
|
],
|
||||||
browserify: {
|
browserify: {
|
||||||
debug: false
|
debug: false
|
||||||
|
|||||||
@ -5,13 +5,13 @@ html
|
|||||||
|
|
||||||
meta(name="viewport", content="width=device-width, initial-scale=1, user-scalable=no")
|
meta(name="viewport", content="width=device-width, initial-scale=1, user-scalable=no")
|
||||||
|
|
||||||
link(rel="stylesheet", href="/styles.css")
|
link(rel="stylesheet", href="/css/otalk.css")
|
||||||
block head
|
block head
|
||||||
body.aux
|
body.aux
|
||||||
header
|
header
|
||||||
img#logo(src="/logo.png", alt="OTalk")
|
img#logo(src="/images/logo.png", alt="OTalk")
|
||||||
block content
|
block content
|
||||||
|
|
||||||
script(src='/zepto.js')
|
script(src='/js/zepto.js')
|
||||||
script(src='//static.andyet.com/tag.js')
|
script(src='//static.andyet.com/tag.js')
|
||||||
block scripts
|
block scripts
|
||||||
|
|||||||
@ -18,4 +18,4 @@ block content
|
|||||||
button(type='submit', tabindex='3') Go!
|
button(type='submit', tabindex='3') Go!
|
||||||
|
|
||||||
block scripts
|
block scripts
|
||||||
script(src="/login.js")
|
script(src="/js/login.js")
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
extends layout
|
extends layout
|
||||||
|
|
||||||
block scripts
|
block scripts
|
||||||
script(src="/logout.js")
|
script(src="/js/logout.js")
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
extends layout
|
extends layout
|
||||||
|
|
||||||
block scripts
|
block scripts
|
||||||
script(src="/oauthLogin.js")
|
script(src="/js/oauthLogin.js")
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user