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 templates = require('../templates');
|
||||
var ContactListItem = require('../views/contactListItem');
|
||||
var Message = require('../views/message');
|
||||
var MessageModel = require('../models/message');
|
||||
|
||||
|
|
@ -16,22 +15,36 @@ module.exports = BasePage.extend({
|
|||
this.render();
|
||||
},
|
||||
events: {
|
||||
'keydown #chatBuffer': 'handleKeyDown',
|
||||
'keyup #chatBuffer': 'handleKeyUp'
|
||||
'keydown textarea': 'handleKeyDown',
|
||||
'keyup textarea': 'handleKeyUp'
|
||||
},
|
||||
srcBindings: {
|
||||
avatar: 'header .avatar'
|
||||
},
|
||||
textBindings: {
|
||||
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 () {
|
||||
this.renderAndBind();
|
||||
this.typingTimer = null;
|
||||
this.$chatInput = this.$('#chatBuffer');
|
||||
this.$messageList = this.$('#conversation');
|
||||
this.renderCollection(this.model.messages, Message, this.$('#conversation'));
|
||||
this.$chatInput = this.$('.chatBox textarea');
|
||||
this.$messageList = this.$('.messages');
|
||||
this.renderCollection(this.model.messages, Message, this.$('.messages'));
|
||||
this.registerBindings();
|
||||
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>
|
||||
<body class="aux">
|
||||
<header>
|
||||
<img id="logo" src="/logo.png" alt="OTalk" />
|
||||
<img id="logo" src="/images/logo.png" alt="OTalk" />
|
||||
</header>
|
||||
<section id="loginbox" class="content">
|
||||
<h2>Connecting...</h2>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ exports.pages = {};
|
|||
exports.body = function anonymous(locals) {
|
||||
var buf = [];
|
||||
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("");
|
||||
};
|
||||
|
|
@ -90,7 +90,7 @@ exports.misc.growlMessage = function anonymous(locals) {
|
|||
exports.pages.chat = function anonymous(locals) {
|
||||
var buf = [];
|
||||
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("");
|
||||
};
|
||||
|
|
@ -99,7 +99,7 @@ exports.pages.chat = function anonymous(locals) {
|
|||
exports.pages.main = function anonymous(locals) {
|
||||
var buf = [];
|
||||
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("");
|
||||
};
|
||||
|
|
@ -113,15 +113,6 @@ exports.pages.signin = function anonymous(locals) {
|
|||
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
|
||||
if (typeof module !== "undefined" && typeof module.exports !== "undefined") {
|
||||
|
|
|
|||
|
|
@ -1,17 +1,18 @@
|
|||
body
|
||||
.wrap
|
||||
#connectionOverlay
|
||||
aside#connectionStatus
|
||||
button.reconnect Reconnect
|
||||
span.message disconnected
|
||||
header#me
|
||||
img.avatar
|
||||
p.status
|
||||
#connectionOverlay
|
||||
aside#connectionStatus
|
||||
button.reconnect Reconnect
|
||||
span.message disconnected
|
||||
aside#menu
|
||||
nav.main
|
||||
li
|
||||
a(href="/logout") Logout
|
||||
li
|
||||
a(href="/") Settings
|
||||
nav#contactList
|
||||
section#pages
|
||||
footer
|
||||
section#roster
|
||||
h1 Roster
|
||||
nav
|
||||
section#bookmarks
|
||||
h1 Bookmarks
|
||||
nav
|
||||
section#pages
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
li.contact
|
||||
img.avatar(src=contact.avatar)
|
||||
.name=contact.displayName
|
||||
.unread=contact.unreadCount
|
||||
.status=contact.status
|
||||
img.avatar(src=contact.avatar)
|
||||
.name=contact.displayName
|
||||
.unread=contact.unreadCount
|
||||
.status=contact.status
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
li
|
||||
.message
|
||||
span.timestamp=message.created
|
||||
p.body=message.body
|
||||
.message
|
||||
span.timestamp=message.created
|
||||
p.body=message.body
|
||||
|
|
|
|||
|
|
@ -4,4 +4,4 @@
|
|||
if title
|
||||
h1= title
|
||||
if description
|
||||
p= description
|
||||
p= description
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
section.page.chat
|
||||
header.contactInfo
|
||||
img.avatar(width=30, height=30)
|
||||
h1.name
|
||||
#tzo
|
||||
ul#conversation
|
||||
div#chatInput
|
||||
form
|
||||
textarea#chatBuffer(name='chatInput', type='text', placeholder='Send a message...', autocomplete='off')
|
||||
section.conversation
|
||||
header
|
||||
img.avatar
|
||||
h1.name
|
||||
.tzo
|
||||
ul.messages
|
||||
.chatBox
|
||||
form
|
||||
textarea(name='chatInput', type='text', placeholder='Send a message...', autocomplete='off')
|
||||
|
|
|
|||
|
|
@ -1,6 +1,4 @@
|
|||
section.page.main
|
||||
button.enableAlerts Enable alerts
|
||||
button.enableAlerts Enable alerts
|
||||
|
||||
section.notifications
|
||||
h1 Notifications
|
||||
ul
|
||||
h1 This space intentionally blank
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
section.page.signin
|
||||
div#loginForm
|
||||
form
|
||||
label JID:
|
||||
input(type="text", id="jid", placeholder="you@aweso.me")
|
||||
label Password:
|
||||
input(type="password", id="password")
|
||||
label WebSocket URL:
|
||||
input(type="text", id="wsURL", placeholder="wss://aweso.me:5281/xmpp-websocket")
|
||||
input(type="submit", value="Connect")
|
||||
div#loginForm
|
||||
form
|
||||
label JID:
|
||||
input(type="text", id="jid", placeholder="you@aweso.me")
|
||||
label Password:
|
||||
input(type="password", id="password")
|
||||
label WebSocket URL:
|
||||
input(type="text", id="wsURL", placeholder="wss://aweso.me:5281/xmpp-websocket")
|
||||
input(type="submit", value="Connect")
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
.page
|
||||
|
|
@ -24,13 +24,13 @@ module.exports = HumanView.extend({
|
|||
avatar: '.avatar'
|
||||
},
|
||||
events: {
|
||||
'click': 'goChat'
|
||||
'click': 'handleClick'
|
||||
},
|
||||
render: function () {
|
||||
this.renderAndBind({contact: this.model});
|
||||
return this;
|
||||
},
|
||||
goChat: function () {
|
||||
handleClick: function () {
|
||||
app.navigate('chat/' + this.model.jid);
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ module.exports = HumanView.extend({
|
|||
$('head').append(templates.head());
|
||||
$('body').removeClass('aux');
|
||||
this.renderAndBind();
|
||||
this.renderCollection(me.contacts, ContactListItem, this.$('#contactList'));
|
||||
this.renderCollection(me.contacts, ContactListItem, this.$('#roster nav'));
|
||||
return this;
|
||||
},
|
||||
handleLinkClick: function (e) {
|
||||
|
|
|
|||
|
|
@ -13,10 +13,10 @@ module.exports = HumanView.extend({
|
|||
},
|
||||
classBindings: {
|
||||
mine: '.message',
|
||||
receiptReceived: '',
|
||||
acked: '',
|
||||
delayed: '',
|
||||
edited: ''
|
||||
receiptReceived: '.message',
|
||||
acked: '.message',
|
||||
delayed: '.message',
|
||||
edited: '.message'
|
||||
},
|
||||
textBindings: {
|
||||
body: '.body',
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
||||
|
||||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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'
|
||||
],
|
||||
stylesheets: [
|
||||
__dirname + '/public/style.css'
|
||||
__dirname + '/public/css/otalk.css'
|
||||
],
|
||||
browserify: {
|
||||
debug: false
|
||||
|
|
|
|||
|
|
@ -5,13 +5,13 @@ html
|
|||
|
||||
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
|
||||
body.aux
|
||||
header
|
||||
img#logo(src="/logo.png", alt="OTalk")
|
||||
img#logo(src="/images/logo.png", alt="OTalk")
|
||||
block content
|
||||
|
||||
script(src='/zepto.js')
|
||||
script(src='/js/zepto.js')
|
||||
script(src='//static.andyet.com/tag.js')
|
||||
block scripts
|
||||
|
|
|
|||
|
|
@ -18,4 +18,4 @@ block content
|
|||
button(type='submit', tabindex='3') Go!
|
||||
|
||||
block scripts
|
||||
script(src="/login.js")
|
||||
script(src="/js/login.js")
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
extends layout
|
||||
|
||||
block scripts
|
||||
script(src="/logout.js")
|
||||
script(src="/js/logout.js")
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
extends layout
|
||||
|
||||
block scripts
|
||||
script(src="/oauthLogin.js")
|
||||
script(src="/js/oauthLogin.js")
|
||||
|
|
|
|||
Loading…
Reference in New Issue