mirror of
https://github.com/moparisthebest/kaiwa
synced 2024-12-01 13:42:16 -05:00
Merge branch 'redesign'
Conflicts: clientapp/app.js public/css/otalk.css
This commit is contained in:
Lance Stout
commit
f520e1b456
@ -54,8 +54,6 @@ module.exports = {
|
|||||||
window.onbeforeunload = function () {
|
window.onbeforeunload = function () {
|
||||||
if (client.sessionStarted) {
|
if (client.sessionStarted) {
|
||||||
client.disconnect();
|
client.disconnect();
|
||||||
// We'll make this a setting later
|
|
||||||
//return "End active session?";
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -9,7 +9,7 @@
|
|||||||
<header>
|
<header>
|
||||||
<img id="logo" src="/images/logo.png" alt="OTalk" />
|
<img id="logo" src="/images/logo.png" alt="OTalk" />
|
||||||
</header>
|
</header>
|
||||||
<section id="loginbox" class="content">
|
<section class="box connect">
|
||||||
<h2>Connecting...</h2>
|
<h2>Connecting...</h2>
|
||||||
</section>
|
</section>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
@ -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 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>');
|
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" class="button">Logout</a></li><li><a href="/" class="button"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 25 25" height="25" width="25"><g transform="scale(0.4)"><path d="M37.418,34.3c-2.1-2.721-2.622-6.352-1.292-9.604c0.452-1.107,1.104-2.1,1.902-2.951 c-0.753-0.877-1.573-1.697-2.507-2.387l-2.609,1.408c-1.05-0.629-2.194-1.112-3.414-1.421l-0.845-2.833 c-0.75-0.112-1.512-0.188-2.287-0.188c-0.783,0-1.54,0.075-2.288,0.188l-0.851,2.833c-1.215,0.309-2.355,0.792-3.41,1.421 l-2.614-1.408c-1.229,0.912-2.318,2-3.228,3.231l1.404,2.612c-0.628,1.053-1.11,2.193-1.419,3.411l-2.832,0.849 c-0.114,0.75-0.187,1.508-0.187,2.287c0,0.778,0.073,1.537,0.187,2.286l2.832,0.848c0.309,1.22,0.791,2.36,1.419,3.413l-1.404,2.61 c0.909,1.231,1.999,2.321,3.228,3.231l2.614-1.406c1.055,0.628,2.195,1.11,3.41,1.42l0.851,2.832 c0.748,0.114,1.505,0.188,2.288,0.188c0.775,0,1.537-0.074,2.287-0.188l0.845-2.832c1.224-0.31,2.364-0.792,3.414-1.42l0.062,0.033 l2.045-3.02L37.418,34.3z M26.367,36.776c-2.777,0-5.027-2.253-5.027-5.027c0-2.775,2.25-5.028,5.027-5.028 c2.774,0,5.024,2.253,5.024,5.028C31.391,34.523,29.141,36.776,26.367,36.776z"></path><path d="M51.762,24.505l-1.125-0.459l-1.451,3.55c-0.814,1.993-2.832,3.054-4.505,2.37l-0.355-0.144 c-1.673-0.686-2.37-2.856-1.558-4.849l1.451-3.551l-1.125-0.46c-2.225,0.608-4.153,2.2-5.092,4.501 c-1.225,2.997-0.422,6.312,1.771,8.436l-2.958,6.812l-2.204,3.249l-0.007,2.281l5.275,2.154l1.593-1.633l0.7-3.861l2.901-6.836 c3.049,0.018,5.947-1.785,7.174-4.779C53.186,28.983,52.924,26.499,51.762,24.505z"></path></g></svg>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("");
|
||||||
};
|
};
|
||||||
@ -22,7 +22,7 @@ exports.body = function anonymous(locals) {
|
|||||||
exports.head = function anonymous(locals) {
|
exports.head = function anonymous(locals) {
|
||||||
var buf = [];
|
var buf = [];
|
||||||
with (locals || {}) {
|
with (locals || {}) {
|
||||||
buf.push('<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0"/><meta name="apple-mobile-web-app-capable" content="yes"/>');
|
buf.push('<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0"/><meta name="apple-mobile-web-app-capable" content="yes"/><link rel="stylesheet" type="text/css" href="//cloud.typography.com/7773252/657662/css/fonts.css"/>');
|
||||||
}
|
}
|
||||||
return buf.join("");
|
return buf.join("");
|
||||||
};
|
};
|
||||||
|
|||||||
@ -6,9 +6,14 @@ body
|
|||||||
aside#menu
|
aside#menu
|
||||||
nav.main
|
nav.main
|
||||||
li
|
li
|
||||||
a(href="/logout") Logout
|
a(href="/logout", class="button") Logout
|
||||||
li
|
li
|
||||||
a(href="/") Settings
|
a(href="/", class="button")
|
||||||
|
svg(version='1.1', xmlns='http://www.w3.org/2000/svg', xmlns:xlink='http://www.w3.org/1999/xlink', viewbox="0 0 25 25", height="25", width="25")
|
||||||
|
g(transform='scale(0.4)')
|
||||||
|
path(d='M37.418,34.3c-2.1-2.721-2.622-6.352-1.292-9.604c0.452-1.107,1.104-2.1,1.902-2.951 c-0.753-0.877-1.573-1.697-2.507-2.387l-2.609,1.408c-1.05-0.629-2.194-1.112-3.414-1.421l-0.845-2.833 c-0.75-0.112-1.512-0.188-2.287-0.188c-0.783,0-1.54,0.075-2.288,0.188l-0.851,2.833c-1.215,0.309-2.355,0.792-3.41,1.421 l-2.614-1.408c-1.229,0.912-2.318,2-3.228,3.231l1.404,2.612c-0.628,1.053-1.11,2.193-1.419,3.411l-2.832,0.849 c-0.114,0.75-0.187,1.508-0.187,2.287c0,0.778,0.073,1.537,0.187,2.286l2.832,0.848c0.309,1.22,0.791,2.36,1.419,3.413l-1.404,2.61 c0.909,1.231,1.999,2.321,3.228,3.231l2.614-1.406c1.055,0.628,2.195,1.11,3.41,1.42l0.851,2.832 c0.748,0.114,1.505,0.188,2.288,0.188c0.775,0,1.537-0.074,2.287-0.188l0.845-2.832c1.224-0.31,2.364-0.792,3.414-1.42l0.062,0.033 l2.045-3.02L37.418,34.3z M26.367,36.776c-2.777,0-5.027-2.253-5.027-5.027c0-2.775,2.25-5.028,5.027-5.028 c2.774,0,5.024,2.253,5.024,5.028C31.391,34.523,29.141,36.776,26.367,36.776z')
|
||||||
|
path(d='M51.762,24.505l-1.125-0.459l-1.451,3.55c-0.814,1.993-2.832,3.054-4.505,2.37l-0.355-0.144 c-1.673-0.686-2.37-2.856-1.558-4.849l1.451-3.551l-1.125-0.46c-2.225,0.608-4.153,2.2-5.092,4.501 c-1.225,2.997-0.422,6.312,1.771,8.436l-2.958,6.812l-2.204,3.249l-0.007,2.281l5.275,2.154l1.593-1.633l0.7-3.861l2.901-6.836 c3.049,0.018,5.947-1.785,7.174-4.779C53.186,28.983,52.924,26.499,51.762,24.505z')
|
||||||
|
| Settings
|
||||||
section#roster
|
section#roster
|
||||||
h1 Roster
|
h1 Roster
|
||||||
nav
|
nav
|
||||||
|
|||||||
@ -1,2 +1,3 @@
|
|||||||
meta(name="viewport", content="width=device-width,initial-scale=1.0,maximum-scale=1.0")
|
meta(name="viewport", content="width=device-width,initial-scale=1.0,maximum-scale=1.0")
|
||||||
meta(name="apple-mobile-web-app-capable", content="yes")
|
meta(name="apple-mobile-web-app-capable", content="yes")
|
||||||
|
link(rel="stylesheet", type="text/css", href="//cloud.typography.com/7773252/657662/css/fonts.css")
|
||||||
|
|||||||
@ -1,30 +1,8 @@
|
|||||||
@import _variables
|
@import _variables
|
||||||
|
|
||||||
helv()
|
gotham()
|
||||||
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif
|
font-family: 'Gotham SSm A', 'Gotham SSm B', Helvetica, Arial, sans-serif
|
||||||
|
font-style: normal
|
||||||
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)
|
roundall($round)
|
||||||
-moz-border-radius: $round
|
-moz-border-radius: $round
|
||||||
@ -34,27 +12,6 @@ roundall($round)
|
|||||||
-border-radius: $round
|
-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()
|
calc()
|
||||||
if current-property
|
if current-property
|
||||||
add-property(current-property[0], s('-webkit-calc(%s)', unquote(arguments)))
|
add-property(current-property[0], s('-webkit-calc(%s)', unquote(arguments)))
|
||||||
@ -129,34 +86,17 @@ borderbox()
|
|||||||
box-sizing: border-box
|
box-sizing: border-box
|
||||||
|
|
||||||
// avatars
|
// avatars
|
||||||
avatarLG()
|
|
||||||
width: 50px
|
|
||||||
height: 50px
|
|
||||||
roundall: 3px
|
|
||||||
|
|
||||||
avatarMD()
|
avatarLarge()
|
||||||
width: 30px
|
width: 30px
|
||||||
height: 30px
|
height: 30px
|
||||||
roundall: 3px
|
roundall(50px)
|
||||||
|
|
||||||
avatarSM()
|
avatarSmall()
|
||||||
width: 20px
|
width: 20px
|
||||||
height: 20px
|
height: 20px
|
||||||
roundall: 3px
|
roundall(30px)
|
||||||
|
|
||||||
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
|
// this if for the content flash and hardware acceleration bugs in webkit
|
||||||
webkit-transition-fix()
|
webkit-transition-fix()
|
||||||
|
|||||||
@ -1,30 +1,20 @@
|
|||||||
// colors
|
// colors
|
||||||
|
|
||||||
$header = #404040
|
$activeBlue = #00aeef
|
||||||
$bodybg = #202020
|
$actionPink = #ec008c
|
||||||
|
|
||||||
$red = #c80000
|
$sidebarBg = #0b1316
|
||||||
$text = #333
|
$sidebarActive = #1f2d49
|
||||||
$subtext = #777
|
|
||||||
|
|
||||||
$pink = #EB008B
|
$baseText = #565656
|
||||||
$ltgray = #EBECEC
|
$textSecondary = #b7b7b7
|
||||||
$dkgray = #202020
|
|
||||||
$blue = #00aeef
|
|
||||||
$dkblue = #006991
|
|
||||||
|
|
||||||
|
$grayBackground = #f7f7f7
|
||||||
|
$grayOutline = #e4e4e4
|
||||||
|
|
||||||
// font sizes
|
// font sizes
|
||||||
|
|
||||||
$fontLG = 20px
|
$fontLarge = 20px
|
||||||
$fontMD = 16px
|
$fontMedium = 14px
|
||||||
$fontSM = 13px
|
$fontSmall = 12px
|
||||||
|
|
||||||
|
|
||||||
// dimensions
|
|
||||||
|
|
||||||
$base = 10px
|
|
||||||
$seven = 7 * $base
|
|
||||||
$five = 5 * $base
|
|
||||||
$three = 3 * $base
|
|
||||||
$page = 38 * $base
|
|
||||||
|
|||||||
@ -1,63 +1,51 @@
|
|||||||
.aux
|
.aux
|
||||||
|
background: $grayBackground
|
||||||
|
|
||||||
header
|
header
|
||||||
margin-top: 10%
|
margin-top: 8%
|
||||||
text-align: center
|
text-align: center
|
||||||
|
|
||||||
#logo
|
#logo
|
||||||
margin: auto
|
margin: auto
|
||||||
|
|
||||||
#loginbox
|
.box
|
||||||
position: relative
|
position: relative
|
||||||
margin: auto
|
margin: auto
|
||||||
margin-top: 5%
|
margin-top: 5%
|
||||||
padding: 20px
|
padding: 20px 0
|
||||||
background-color: white
|
background: white
|
||||||
width: 75%
|
width: 75%
|
||||||
|
roundall(3px)
|
||||||
|
|
||||||
label
|
&.connect
|
||||||
display: block
|
padding: 20px
|
||||||
margin-bottom: 5px
|
text-align: center
|
||||||
font-size: 13px
|
|
||||||
font-weight: bold
|
h2
|
||||||
color: #777
|
padding: 0
|
||||||
|
|
||||||
|
.head, .content
|
||||||
|
padding: 0 20px
|
||||||
|
|
||||||
|
.head
|
||||||
|
margin-bottom: 20px
|
||||||
|
border-bottom: 1px solid lighten($grayOutline, 50%)
|
||||||
|
|
||||||
input
|
input
|
||||||
width: 100%
|
width: 100%
|
||||||
display: block
|
|
||||||
height: 35px
|
|
||||||
font-size: 14px
|
|
||||||
padding: 10px 0.5em
|
|
||||||
margin-bottom: 15px
|
margin-bottom: 15px
|
||||||
background-color: #f9fafa
|
|
||||||
border: 1px solid #eeeeee
|
|
||||||
color: #2e2d2d
|
|
||||||
borderbox()
|
|
||||||
|
|
||||||
&:focus
|
a.button
|
||||||
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
|
float: right
|
||||||
font-size: 14px
|
|
||||||
|
|
||||||
h2
|
h2
|
||||||
color: #222
|
margin: 0
|
||||||
padding-bottom: 10px
|
padding-bottom: 20px
|
||||||
border-bottom: 1px solid #f8f8f8
|
|
||||||
|
|
||||||
|
@media screen and (min-width: 768px)
|
||||||
|
|
||||||
|
.box
|
||||||
|
width: 50%
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -18,24 +18,17 @@
|
|||||||
|
|
||||||
header
|
header
|
||||||
padding: 5px
|
padding: 5px
|
||||||
gradient: #e1e4e6 #cacdce
|
border-bottom: 2px solid $grayOutline
|
||||||
shadow: rgba(#000,0.1) 2px 1px 5px
|
|
||||||
border-bottom: 1px solid #aaa
|
|
||||||
position: fixed
|
position: fixed
|
||||||
right: 0px
|
right: 0px
|
||||||
left: 156px
|
left: 181px
|
||||||
z-index: 10
|
z-index: 10
|
||||||
font-size: 14px
|
|
||||||
borderbox()
|
borderbox()
|
||||||
color: #222
|
background: $grayBackground
|
||||||
font-weight: normal
|
|
||||||
font-size: 11px
|
|
||||||
|
|
||||||
.avatar
|
.avatar
|
||||||
margin-right: 5px
|
margin-right: 5px
|
||||||
roundall: 5px
|
avatarLarge()
|
||||||
width: 30px
|
|
||||||
height: 30px
|
|
||||||
position: absolute
|
position: absolute
|
||||||
top: 11px
|
top: 11px
|
||||||
left: 11px
|
left: 11px
|
||||||
@ -48,12 +41,27 @@
|
|||||||
font-size: 14px
|
font-size: 14px
|
||||||
line-height: 14px
|
line-height: 14px
|
||||||
|
|
||||||
|
.tzo:not(:empty)
|
||||||
|
position: absolute
|
||||||
|
right: 15px
|
||||||
|
top: 50%
|
||||||
|
height: 20px
|
||||||
|
margin-top: -10px
|
||||||
|
padding: 0 5px
|
||||||
|
roundall(3px)
|
||||||
|
text-transform: uppercase
|
||||||
|
font-size: 9px
|
||||||
|
font-weight: bold
|
||||||
|
line-height: 20px
|
||||||
|
color: lighten($baseText, 30%)
|
||||||
|
background: $grayOutline
|
||||||
|
|
||||||
.messages
|
.messages
|
||||||
background: #ecf0f2
|
background: lighten($activeBlue, 97%)
|
||||||
font-weight: normal
|
font-weight: normal
|
||||||
margin: 0px
|
margin: 0px
|
||||||
padding: 0px
|
padding: 0px
|
||||||
padding-top: 150px
|
padding-top: 130px
|
||||||
overflow-y: auto
|
overflow-y: auto
|
||||||
overflow-x: hidden
|
overflow-x: hidden
|
||||||
position: relative
|
position: relative
|
||||||
@ -71,8 +79,10 @@
|
|||||||
display: block
|
display: block
|
||||||
borderbox()
|
borderbox()
|
||||||
|
|
||||||
|
&:last-child .message
|
||||||
|
border: none
|
||||||
|
|
||||||
.message
|
.message
|
||||||
color: #33404c
|
|
||||||
font-size: 12px
|
font-size: 12px
|
||||||
margin: 0px
|
margin: 0px
|
||||||
padding: 7px 11px
|
padding: 7px 11px
|
||||||
@ -80,15 +90,15 @@
|
|||||||
padding-right: 11px
|
padding-right: 11px
|
||||||
min-width: 20px
|
min-width: 20px
|
||||||
width: 100%
|
width: 100%
|
||||||
border-bottom: 1px solid #ccc
|
border-bottom: 1px solid lighten($activeBlue, 90%)
|
||||||
borderbox()
|
borderbox()
|
||||||
|
|
||||||
&.mine
|
&.mine
|
||||||
background: #eaf7ff
|
background: white
|
||||||
border-bottom: 1px solid #bbe0fa
|
border-bottom: 1px solid lighten($grayOutline, 10%)
|
||||||
|
|
||||||
.timestamp
|
.timestamp
|
||||||
color: #bbe0fa
|
color: darken($grayOutline, 20%)
|
||||||
|
|
||||||
&.delayed
|
&.delayed
|
||||||
.timestamp:before
|
.timestamp:before
|
||||||
@ -106,28 +116,24 @@
|
|||||||
color: #111
|
color: #111
|
||||||
|
|
||||||
.timestamp
|
.timestamp
|
||||||
font-size: 12px
|
font-size: 10px
|
||||||
color: #bbb
|
|
||||||
font-weight: bold
|
font-weight: bold
|
||||||
|
color: lighten($activeBlue, 50%)
|
||||||
float: right
|
float: right
|
||||||
display: block
|
display: block
|
||||||
margin-right: 15px
|
|
||||||
|
|
||||||
.chatBox
|
.chatBox
|
||||||
borderbox()
|
borderbox()
|
||||||
border-top: 1px solid rgba(0,0,0,.08)
|
border-top: 1px solid $grayOutline
|
||||||
bottom: 0px
|
bottom: 0px
|
||||||
position: fixed
|
position: fixed
|
||||||
right: 0px
|
right: 0px
|
||||||
left: 156px
|
left: 181px
|
||||||
z-index: 200
|
z-index: 200
|
||||||
|
|
||||||
form
|
form
|
||||||
gradient: #e1e4e6 #cacdce
|
background: $grayBackground
|
||||||
padding: 11px
|
padding: 11px
|
||||||
border-top: 1px solid #fff
|
|
||||||
border-left: 1px solid #ddd
|
|
||||||
border-right: 1px solid #ddd
|
|
||||||
|
|
||||||
.formwrap
|
.formwrap
|
||||||
borderbox()
|
borderbox()
|
||||||
@ -136,25 +142,14 @@
|
|||||||
position: relative
|
position: relative
|
||||||
|
|
||||||
textarea
|
textarea
|
||||||
background-color: #fff
|
|
||||||
width: 100%
|
width: 100%
|
||||||
|
position: relative
|
||||||
height: 30px
|
height: 30px
|
||||||
border: 1px solid #ccc
|
|
||||||
border-top-color: #bbb
|
|
||||||
roundall: 5px
|
|
||||||
innerShadow: rgba(0,0,0,.1) 0 -1px 3px
|
|
||||||
line-height: 18px
|
line-height: 18px
|
||||||
outline: none
|
|
||||||
resize: none
|
|
||||||
color: #222f3b
|
|
||||||
font-size: 14px
|
|
||||||
-webkit-font-smoothing: antialiased
|
|
||||||
padding: 5px
|
padding: 5px
|
||||||
borderbox()
|
background: white
|
||||||
|
|
||||||
&:focus
|
|
||||||
border-color: #bbb
|
|
||||||
border-top-color: #aaa
|
|
||||||
|
|
||||||
&.editing
|
&.editing
|
||||||
background-color: yellow
|
background-color: #fffcea
|
||||||
|
border: 1px solid #efe391
|
||||||
|
color: #d2bd2d
|
||||||
|
|||||||
@ -23,16 +23,16 @@
|
|||||||
top: 0px;
|
top: 0px;
|
||||||
position: fixed
|
position: fixed
|
||||||
background-color: #333
|
background-color: #333
|
||||||
border-bottom: 1px solid #000
|
|
||||||
width: 100%
|
width: 100%
|
||||||
z-index: 9999
|
z-index: 100
|
||||||
text-align: center
|
text-align: center
|
||||||
|
|
||||||
span.message
|
span.message
|
||||||
display: inline-block
|
display: inline-block
|
||||||
padding: 0px 10px
|
padding: 0px 10px
|
||||||
font-weight: bold
|
font-weight: bold
|
||||||
font-size: 24px
|
font-size: $fontLarge
|
||||||
|
color: white
|
||||||
|
|
||||||
button
|
button
|
||||||
padding: 5px 8px
|
padding: 5px 8px
|
||||||
|
|||||||
61
public/css/app/forms.styl
Normal file
61
public/css/app/forms.styl
Normal file
@ -0,0 +1,61 @@
|
|||||||
|
// Forms and Buttons
|
||||||
|
|
||||||
|
input[type=text], input[type=email], input[type=search], input[type=password], textarea
|
||||||
|
-webkit-appearance: none
|
||||||
|
roundall(3px)
|
||||||
|
padding: 0 10px
|
||||||
|
background: white
|
||||||
|
border: 1px solid $grayOutline
|
||||||
|
font-size: $fontSmall
|
||||||
|
color: $baseText
|
||||||
|
borderbox()
|
||||||
|
gotham()
|
||||||
|
-webkit-font-smoothing: antialiased
|
||||||
|
-webkit-appearance: none
|
||||||
|
|
||||||
|
transition: border .2s ease-in 0
|
||||||
|
-webkit-transition: border .2s ease-in 0
|
||||||
|
-moz-transition: border .2s ease-in 0
|
||||||
|
|
||||||
|
input[type=text], input[type=email], input[type=search], input[type=password]
|
||||||
|
height: 35px
|
||||||
|
|
||||||
|
textarea
|
||||||
|
resize: none
|
||||||
|
|
||||||
|
input[type=text]:focus,
|
||||||
|
input[type=email]:focus,
|
||||||
|
input[type=search]:focus,
|
||||||
|
input[type=password]:focus,
|
||||||
|
textarea:focus
|
||||||
|
outline: none
|
||||||
|
border: 1px solid lighten($activeBlue, 50%)
|
||||||
|
|
||||||
|
label
|
||||||
|
display: block
|
||||||
|
margin-bottom: 5px
|
||||||
|
font-size: 13px
|
||||||
|
font-weight: bold
|
||||||
|
color: $baseText
|
||||||
|
|
||||||
|
a.button
|
||||||
|
line-height: 35px
|
||||||
|
|
||||||
|
button, a.button
|
||||||
|
display: inline-block
|
||||||
|
gotham()
|
||||||
|
roundall(3px)
|
||||||
|
border: none
|
||||||
|
height: 35px
|
||||||
|
min-width: 80px
|
||||||
|
padding: 0 1em
|
||||||
|
color: white
|
||||||
|
background: $activeBlue
|
||||||
|
font-size: $fontSmall
|
||||||
|
font-weight: bold
|
||||||
|
text-decoration: none
|
||||||
|
text-align: center
|
||||||
|
cursor: pointer
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
background: darken($activeBlue, 30%)
|
||||||
@ -2,19 +2,19 @@
|
|||||||
@import '../_mixins'
|
@import '../_mixins'
|
||||||
|
|
||||||
body
|
body
|
||||||
background: #ecf0f2
|
background: white
|
||||||
color: #222
|
color: $baseText
|
||||||
font-family: 'Lucdia Grande', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, sans-serif
|
gotham()
|
||||||
font-size: 17px
|
font-size: 16px
|
||||||
font-weight: 500
|
font-weight: 400
|
||||||
-webkit-font-smoothing: antialiased
|
-webkit-font-smoothing: antialiased
|
||||||
|
|
||||||
#pages
|
h1, h2, h3, h4
|
||||||
|
color: darken($baseText, 30%)
|
||||||
|
|
||||||
|
#pages
|
||||||
position: absolute
|
position: absolute
|
||||||
top: 0px
|
top: 0px
|
||||||
right: 0px
|
right: 0px
|
||||||
left: 156px
|
left: 181px
|
||||||
borderbox()
|
borderbox()
|
||||||
|
|
||||||
#menu
|
|
||||||
width: 155px
|
|
||||||
|
|||||||
@ -6,96 +6,122 @@
|
|||||||
top: 0px
|
top: 0px
|
||||||
bottom: 0px
|
bottom: 0px
|
||||||
left: 0px
|
left: 0px
|
||||||
width: 155px
|
width: 180px
|
||||||
background-color: #1c232d
|
background-color: $sidebarBg
|
||||||
z-index: 300
|
z-index: 300
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
webkit-transition-fix()
|
webkit-transition-fix()
|
||||||
noselect()
|
noselect()
|
||||||
shadow: #000 1px 0px 1px
|
|
||||||
|
|
||||||
.main
|
.main
|
||||||
|
margin-bottom: 10px
|
||||||
li
|
li
|
||||||
list-style-type: none
|
list-style-type: none
|
||||||
padding: 5px
|
margin: 10px 0 5px 0
|
||||||
line-height: 12px
|
text-align: center
|
||||||
|
|
||||||
|
&:last-child
|
||||||
|
margin: 0
|
||||||
|
|
||||||
|
svg
|
||||||
|
position: absolute
|
||||||
|
top: 50%
|
||||||
|
left: 10px
|
||||||
|
margin-top: -13px
|
||||||
|
fill: white
|
||||||
|
|
||||||
|
a
|
||||||
|
position: relative
|
||||||
|
width: 130px
|
||||||
|
|
||||||
|
.button
|
||||||
|
background: $sidebarActive
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
background-color: #2a323f
|
background: lighten($sidebarActive, 10%)
|
||||||
|
|
||||||
a
|
|
||||||
color: #666
|
|
||||||
|
|
||||||
a
|
|
||||||
text-decoration: none
|
|
||||||
font-size: 12px
|
|
||||||
color: #777
|
|
||||||
|
|
||||||
|
|
||||||
h1
|
h1
|
||||||
font-size: 11px
|
font-size: 10px
|
||||||
margin: 0px
|
margin: 0
|
||||||
margin-bottom: 1px
|
padding: 20px 10px
|
||||||
padding: 5px
|
color: white
|
||||||
color: #222
|
text-transform: uppercase
|
||||||
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,
|
#roster,
|
||||||
#bookmarks
|
#bookmarks
|
||||||
li
|
li
|
||||||
list-style-type: none
|
list-style-type: none
|
||||||
padding: 11px
|
padding: 7px 25px 7px 10px
|
||||||
margin: 0px
|
margin: 0px
|
||||||
position: relative
|
position: relative
|
||||||
min-height: 20px
|
min-height: 15px
|
||||||
font-size: 11px
|
font-size: $fontSmall
|
||||||
color: #fff
|
color: #fff
|
||||||
|
cursor: pointer
|
||||||
&:nth-child(2n)
|
transition: all .3s ease-in 0
|
||||||
background-color: #1e252f
|
-webkit-transition: all .3s ease-in 0
|
||||||
|
-moz-transition: all .3s ease-in 0
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
background-color: #2a323f
|
background: $sidebarActive
|
||||||
|
|
||||||
&.hasUnread .unread
|
&.hasUnread .unread
|
||||||
display: block
|
display: block
|
||||||
|
|
||||||
&.online,
|
&.online,
|
||||||
&.chat
|
&.chat
|
||||||
border-left: 2px solid green
|
border-left: 3px solid #427a00
|
||||||
|
|
||||||
&.dnd
|
&.dnd
|
||||||
border-left: 2px solid red
|
border-left: 3px solid #c50041
|
||||||
|
|
||||||
&.away,
|
&.away,
|
||||||
&.xa
|
&.xa
|
||||||
border-left: 2px solid orange
|
border-left: 3px solid #f57900
|
||||||
|
|
||||||
&.offline
|
&.offline
|
||||||
border-left: 2px solid #222
|
border-left: none
|
||||||
color: #aaa
|
|
||||||
|
&.offline:not(:hover)
|
||||||
|
.name
|
||||||
|
color: darken($textSecondary, 40%)
|
||||||
|
|
||||||
|
.status
|
||||||
|
color: darken($textSecondary, 65%)
|
||||||
|
|
||||||
img
|
img
|
||||||
opacity: .25
|
opacity: .25
|
||||||
|
|
||||||
.status
|
&.activeContact, &.offline.activeContact
|
||||||
color: #777
|
background: white
|
||||||
|
font-weight: bold
|
||||||
|
|
||||||
&.activeContact
|
.name
|
||||||
gradient: #35c8ff #00aeef
|
color: $baseText
|
||||||
border-top: 1px solid #8de0ff
|
|
||||||
border-bottom: 1px solid #004a65
|
&.composing, &.paused
|
||||||
|
|
||||||
|
&:after
|
||||||
|
content: ''
|
||||||
|
position: absolute
|
||||||
|
top: 50%
|
||||||
|
right: 15px
|
||||||
|
height: 8px
|
||||||
|
width: 8px
|
||||||
|
margin-top: -4px
|
||||||
|
roundall(10px)
|
||||||
|
|
||||||
&.composing
|
&.composing
|
||||||
border-right: 4px solid orange
|
&:after
|
||||||
|
background: #f57900
|
||||||
|
animation: pulsate 1.5s infinite ease-in
|
||||||
|
-webkit-animation: pulsate 1.5s infinite ease-in
|
||||||
|
-moz-animation: pulsate 1.5s infinite ease-in
|
||||||
|
|
||||||
&.paused
|
&.paused
|
||||||
border-right: 4px solid #666
|
&:after
|
||||||
|
background: $textSecondary
|
||||||
|
|
||||||
img
|
img
|
||||||
opacity: 1
|
opacity: 1
|
||||||
@ -103,42 +129,48 @@
|
|||||||
.avatar
|
.avatar
|
||||||
vertical-align: top
|
vertical-align: top
|
||||||
margin-right: 5px
|
margin-right: 5px
|
||||||
|
margin-top: -10px
|
||||||
position: absolute
|
position: absolute
|
||||||
left: 5px
|
left: 10px
|
||||||
top: 5px
|
top: 50%
|
||||||
width: 30px
|
avatarSmall()
|
||||||
height: 30px
|
|
||||||
roundall: 5px
|
|
||||||
shadow: rgba(0,0,0,0.5) -1px -1px 1px
|
|
||||||
noselect()
|
noselect()
|
||||||
|
|
||||||
.name
|
.name
|
||||||
margin: 0px
|
margin-left: 30px
|
||||||
margin-left: 40px
|
line-height: 20px
|
||||||
font-weight: bold
|
color: white
|
||||||
text-shadow: rgba(0,0,0,0.5) -1px -1px 1px
|
text-overflow: ellipsis
|
||||||
|
overflow: hidden
|
||||||
|
width: 70%
|
||||||
|
|
||||||
.status
|
.status
|
||||||
color: #ccc
|
color: $textSecondary
|
||||||
font-size: 10px
|
font-size: 10px
|
||||||
font-style: italic
|
line-height: 12px
|
||||||
font-weight: 600
|
margin: 0
|
||||||
margin: 0px
|
margin-left: 30px
|
||||||
margin-left: 40px
|
|
||||||
text-shadow: rgba(0,0,0,0.5) 1px 1px 1px
|
&:not(:empty)
|
||||||
|
margin-top: -2px
|
||||||
|
|
||||||
.unread
|
.unread
|
||||||
display: none
|
display: none
|
||||||
color: white
|
color: white
|
||||||
padding-left: 5px
|
padding: 2px 5px
|
||||||
padding-right: 5px
|
roundall(20px)
|
||||||
roundall: 11px
|
|
||||||
position: absolute
|
position: absolute
|
||||||
top: 20px
|
top: 8px
|
||||||
left: 20px
|
right: 10px
|
||||||
|
font-size: 10px
|
||||||
text-align: center
|
text-align: center
|
||||||
font-weight: bold
|
color: lighten($sidebarActive, 30%)
|
||||||
background-color: red
|
background: $sidebarActive
|
||||||
border: 1px solid white
|
|
||||||
text-shadow: rgba(0,0,0,0.5) 1px 1px 1px
|
@keyframes pulsate
|
||||||
shadow: rgba(0,0,0,0.5) 1px 1px 1px
|
0%
|
||||||
|
opacity: 1.0
|
||||||
|
50%
|
||||||
|
opacity: 0.5
|
||||||
|
100%
|
||||||
|
opacity: 1.0
|
||||||
@ -246,25 +246,29 @@ td {
|
|||||||
zoom: 1;
|
zoom: 1;
|
||||||
}
|
}
|
||||||
body {
|
body {
|
||||||
background: #ecf0f2;
|
background: #fff;
|
||||||
color: #222;
|
color: #565656;
|
||||||
font-family: 'Lucdia Grande', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
font-family: 'Gotham SSm A', 'Gotham SSm B', Helvetica, Arial, sans-serif;
|
||||||
font-size: 17px;
|
font-style: normal;
|
||||||
font-weight: 500;
|
font-size: 16px;
|
||||||
|
font-weight: 400;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
}
|
}
|
||||||
body #pages {
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4 {
|
||||||
|
color: #3c3c3c;
|
||||||
|
}
|
||||||
|
#pages {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0px;
|
top: 0px;
|
||||||
right: 0px;
|
right: 0px;
|
||||||
left: 156px;
|
left: 181px;
|
||||||
-moz-box-sizing: border-box;
|
-moz-box-sizing: border-box;
|
||||||
-webkit-box-sizing: border-box;
|
-webkit-box-sizing: border-box;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
body #menu {
|
|
||||||
width: 155px;
|
|
||||||
}
|
|
||||||
#connectionOverlay {
|
#connectionOverlay {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0px;
|
top: 0px;
|
||||||
@ -290,16 +294,16 @@ body #menu {
|
|||||||
top: 0px;
|
top: 0px;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
background-color: #333;
|
background-color: #333;
|
||||||
border-bottom: 1px solid #000;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
z-index: 9999;
|
z-index: 100;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
#connectionStatus span.message {
|
#connectionStatus span.message {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 0px 10px;
|
padding: 0px 10px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-size: 24px;
|
font-size: 20px;
|
||||||
|
color: #fff;
|
||||||
}
|
}
|
||||||
#connectionStatus button {
|
#connectionStatus button {
|
||||||
padding: 5px 8px;
|
padding: 5px 8px;
|
||||||
@ -311,8 +315,8 @@ body #menu {
|
|||||||
top: 0px;
|
top: 0px;
|
||||||
bottom: 0px;
|
bottom: 0px;
|
||||||
left: 0px;
|
left: 0px;
|
||||||
width: 155px;
|
width: 180px;
|
||||||
background-color: #1c232d;
|
background-color: #0b1316;
|
||||||
z-index: 300;
|
z-index: 300;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
@ -323,59 +327,62 @@ body #menu {
|
|||||||
-moz-user-select: none;
|
-moz-user-select: none;
|
||||||
-ms-user-select: none;
|
-ms-user-select: none;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
-webkit-box-shadow: #000 1px 0px 1px;
|
}
|
||||||
-moz-box-shadow: #000 1px 0px 1px;
|
#menu .main {
|
||||||
box-shadow: #000 1px 0px 1px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
#menu .main li {
|
#menu .main li {
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
padding: 5px;
|
margin: 10px 0 5px 0;
|
||||||
line-height: 12px;
|
text-align: center;
|
||||||
}
|
}
|
||||||
#menu .main li:hover {
|
#menu .main li:last-child {
|
||||||
background-color: #2a323f;
|
margin: 0;
|
||||||
}
|
}
|
||||||
#menu .main li:hover a {
|
#menu .main li svg {
|
||||||
color: #666;
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 10px;
|
||||||
|
margin-top: -13px;
|
||||||
|
fill: #fff;
|
||||||
}
|
}
|
||||||
#menu .main li a {
|
#menu .main li a {
|
||||||
text-decoration: none;
|
position: relative;
|
||||||
font-size: 12px;
|
width: 130px;
|
||||||
color: #777;
|
}
|
||||||
|
#menu .main li .button {
|
||||||
|
background: #1f2d49;
|
||||||
|
}
|
||||||
|
#menu .main li .button:hover {
|
||||||
|
background: #2b3f65;
|
||||||
}
|
}
|
||||||
#menu h1 {
|
#menu h1 {
|
||||||
font-size: 11px;
|
font-size: 10px;
|
||||||
margin: 0px;
|
margin: 0;
|
||||||
margin-bottom: 1px;
|
padding: 20px 10px;
|
||||||
padding: 5px;
|
color: #fff;
|
||||||
color: #222;
|
text-transform: uppercase;
|
||||||
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,
|
#roster li,
|
||||||
#bookmarks li {
|
#bookmarks li {
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
padding: 11px;
|
padding: 7px 25px 7px 10px;
|
||||||
margin: 0px;
|
margin: 0px;
|
||||||
position: relative;
|
position: relative;
|
||||||
min-height: 20px;
|
min-height: 15px;
|
||||||
font-size: 11px;
|
font-size: 12px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
cursor: pointer;
|
||||||
#roster li:nth-child(2n),
|
-webkit-transition: all 0.3s ease-in 0;
|
||||||
#bookmarks li:nth-child(2n) {
|
-o-transition: all 0.3s ease-in 0;
|
||||||
background-color: #1e252f;
|
transition: all 0.3s ease-in 0;
|
||||||
|
-moz-transition: all 0.3s ease-in 0;
|
||||||
|
-webkit-transition: all 0.3s ease-in 0;
|
||||||
|
-moz-transition: all 0.3s ease-in 0;
|
||||||
}
|
}
|
||||||
#roster li:hover,
|
#roster li:hover,
|
||||||
#bookmarks li:hover {
|
#bookmarks li:hover {
|
||||||
background-color: #2a323f;
|
background: #1f2d49;
|
||||||
}
|
}
|
||||||
#roster li.hasUnread .unread,
|
#roster li.hasUnread .unread,
|
||||||
#bookmarks li.hasUnread .unread {
|
#bookmarks li.hasUnread .unread {
|
||||||
@ -385,46 +392,75 @@ body #menu {
|
|||||||
#bookmarks li.online,
|
#bookmarks li.online,
|
||||||
#roster li.chat,
|
#roster li.chat,
|
||||||
#bookmarks li.chat {
|
#bookmarks li.chat {
|
||||||
border-left: 2px solid #008000;
|
border-left: 3px solid #427a00;
|
||||||
}
|
}
|
||||||
#roster li.dnd,
|
#roster li.dnd,
|
||||||
#bookmarks li.dnd {
|
#bookmarks li.dnd {
|
||||||
border-left: 2px solid #f00;
|
border-left: 3px solid #c50041;
|
||||||
}
|
}
|
||||||
#roster li.away,
|
#roster li.away,
|
||||||
#bookmarks li.away,
|
#bookmarks li.away,
|
||||||
#roster li.xa,
|
#roster li.xa,
|
||||||
#bookmarks li.xa {
|
#bookmarks li.xa {
|
||||||
border-left: 2px solid #ffa500;
|
border-left: 3px solid #f57900;
|
||||||
}
|
}
|
||||||
#roster li.offline,
|
#roster li.offline,
|
||||||
#bookmarks li.offline {
|
#bookmarks li.offline {
|
||||||
border-left: 2px solid #222;
|
border-left: none;
|
||||||
color: #aaa;
|
|
||||||
}
|
}
|
||||||
#roster li.offline img,
|
#roster li.offline:not(:hover) .name,
|
||||||
#bookmarks li.offline img {
|
#bookmarks li.offline:not(:hover) .name {
|
||||||
|
color: #6e6e6e;
|
||||||
|
}
|
||||||
|
#roster li.offline:not(:hover) .status,
|
||||||
|
#bookmarks li.offline:not(:hover) .status {
|
||||||
|
color: #404040;
|
||||||
|
}
|
||||||
|
#roster li.offline:not(:hover) img,
|
||||||
|
#bookmarks li.offline:not(:hover) img {
|
||||||
opacity: 0.25;
|
opacity: 0.25;
|
||||||
}
|
}
|
||||||
#roster li.offline .status,
|
|
||||||
#bookmarks li.offline .status {
|
|
||||||
color: #777;
|
|
||||||
}
|
|
||||||
#roster li.activeContact,
|
#roster li.activeContact,
|
||||||
#bookmarks li.activeContact {
|
#bookmarks li.activeContact,
|
||||||
background: #35c8ff;
|
#roster li.offline.activeContact,
|
||||||
background-image: -moz-linear-gradient(top, #35c8ff, #00aeef);
|
#bookmarks li.offline.activeContact {
|
||||||
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #35c8ff), color-stop(1, #00aeef));
|
background: #fff;
|
||||||
border-top: 1px solid #8de0ff;
|
font-weight: bold;
|
||||||
border-bottom: 1px solid #004a65;
|
|
||||||
}
|
}
|
||||||
#roster li.composing,
|
#roster li.activeContact .name,
|
||||||
#bookmarks li.composing {
|
#bookmarks li.activeContact .name,
|
||||||
border-right: 4px solid #ffa500;
|
#roster li.offline.activeContact .name,
|
||||||
|
#bookmarks li.offline.activeContact .name {
|
||||||
|
color: #565656;
|
||||||
}
|
}
|
||||||
#roster li.paused,
|
#roster li.composing:after,
|
||||||
#bookmarks li.paused {
|
#bookmarks li.composing:after,
|
||||||
border-right: 4px solid #666;
|
#roster li.paused:after,
|
||||||
|
#bookmarks li.paused:after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
right: 15px;
|
||||||
|
height: 8px;
|
||||||
|
width: 8px;
|
||||||
|
margin-top: -4px;
|
||||||
|
-moz-border-radius: 10px;
|
||||||
|
-webkit-border-radius: 10px;
|
||||||
|
-khtml-border-radius: 10px;
|
||||||
|
-o-border-radius: 10px;
|
||||||
|
-border-radius: 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
#roster li.composing:after,
|
||||||
|
#bookmarks li.composing:after {
|
||||||
|
background: #f57900;
|
||||||
|
animation: pulsate 1.5s infinite ease-in;
|
||||||
|
-webkit-animation: pulsate 1.5s infinite ease-in;
|
||||||
|
-moz-animation: pulsate 1.5s infinite ease-in;
|
||||||
|
}
|
||||||
|
#roster li.paused:after,
|
||||||
|
#bookmarks li.paused:after {
|
||||||
|
background: #b7b7b7;
|
||||||
}
|
}
|
||||||
#roster li img,
|
#roster li img,
|
||||||
#bookmarks li img {
|
#bookmarks li img {
|
||||||
@ -434,20 +470,18 @@ body #menu {
|
|||||||
#bookmarks li .avatar {
|
#bookmarks li .avatar {
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
|
margin-top: -10px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 5px;
|
left: 10px;
|
||||||
top: 5px;
|
top: 50%;
|
||||||
width: 30px;
|
width: 20px;
|
||||||
height: 30px;
|
height: 20px;
|
||||||
-moz-border-radius: 5px;
|
-moz-border-radius: 30px;
|
||||||
-webkit-border-radius: 5px;
|
-webkit-border-radius: 30px;
|
||||||
-khtml-border-radius: 5px;
|
-khtml-border-radius: 30px;
|
||||||
-o-border-radius: 5px;
|
-o-border-radius: 30px;
|
||||||
-border-radius: 5px;
|
-border-radius: 30px;
|
||||||
border-radius: 5px;
|
border-radius: 30px;
|
||||||
-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-touch-callout: none;
|
||||||
-webkit-user-select: none;
|
-webkit-user-select: none;
|
||||||
-khtml-user-select: none;
|
-khtml-user-select: none;
|
||||||
@ -457,44 +491,108 @@ body #menu {
|
|||||||
}
|
}
|
||||||
#roster li .name,
|
#roster li .name,
|
||||||
#bookmarks li .name {
|
#bookmarks li .name {
|
||||||
margin: 0px;
|
margin-left: 30px;
|
||||||
margin-left: 40px;
|
line-height: 20px;
|
||||||
font-weight: bold;
|
color: #fff;
|
||||||
text-shadow: rgba(0,0,0,0.5) -1px -1px 1px;
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
width: 70%;
|
||||||
}
|
}
|
||||||
#roster li .status,
|
#roster li .status,
|
||||||
#bookmarks li .status {
|
#bookmarks li .status {
|
||||||
color: #ccc;
|
color: #b7b7b7;
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
font-style: italic;
|
line-height: 12px;
|
||||||
font-weight: 600;
|
margin: 0;
|
||||||
margin: 0px;
|
margin-left: 30px;
|
||||||
margin-left: 40px;
|
}
|
||||||
text-shadow: rgba(0,0,0,0.5) 1px 1px 1px;
|
#roster li .status:not(:empty),
|
||||||
|
#bookmarks li .status:not(:empty) {
|
||||||
|
margin-top: -2px;
|
||||||
}
|
}
|
||||||
#roster li .unread,
|
#roster li .unread,
|
||||||
#bookmarks li .unread {
|
#bookmarks li .unread {
|
||||||
display: none;
|
display: none;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
padding-left: 5px;
|
padding: 2px 5px;
|
||||||
padding-right: 5px;
|
-moz-border-radius: 20px;
|
||||||
-moz-border-radius: 11px;
|
-webkit-border-radius: 20px;
|
||||||
-webkit-border-radius: 11px;
|
-khtml-border-radius: 20px;
|
||||||
-khtml-border-radius: 11px;
|
-o-border-radius: 20px;
|
||||||
-o-border-radius: 11px;
|
-border-radius: 20px;
|
||||||
-border-radius: 11px;
|
border-radius: 20px;
|
||||||
border-radius: 11px;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 20px;
|
top: 8px;
|
||||||
left: 20px;
|
right: 10px;
|
||||||
|
font-size: 10px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-weight: bold;
|
color: #43629e;
|
||||||
background-color: #f00;
|
background: #1f2d49;
|
||||||
border: 1px solid #fff;
|
}
|
||||||
text-shadow: rgba(0,0,0,0.5) 1px 1px 1px;
|
@-moz-keyframes pulsate {
|
||||||
-webkit-box-shadow: rgba(0,0,0,0.5) 1px 1px 1px;
|
0% {
|
||||||
-moz-box-shadow: rgba(0,0,0,0.5) 1px 1px 1px;
|
opacity: 1;
|
||||||
box-shadow: rgba(0,0,0,0.5) 1px 1px 1px;
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@-webkit-keyframes pulsate {
|
||||||
|
0% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@-o-keyframes pulsate {
|
||||||
|
0% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@-ms-keyframes pulsate {
|
||||||
|
0% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes pulsate {
|
||||||
|
0% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.page.chat {
|
.page.chat {
|
||||||
padding-top: 0px;
|
padding-top: 0px;
|
||||||
@ -517,35 +615,26 @@ body #menu {
|
|||||||
}
|
}
|
||||||
.conversation header {
|
.conversation header {
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
background: #e1e4e6;
|
border-bottom: 2px solid #e4e4e4;
|
||||||
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;
|
position: fixed;
|
||||||
right: 0px;
|
right: 0px;
|
||||||
left: 156px;
|
left: 181px;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
font-size: 14px;
|
|
||||||
-moz-box-sizing: border-box;
|
-moz-box-sizing: border-box;
|
||||||
-webkit-box-sizing: border-box;
|
-webkit-box-sizing: border-box;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
color: #222;
|
background: #f7f7f7;
|
||||||
font-weight: normal;
|
|
||||||
font-size: 11px;
|
|
||||||
}
|
}
|
||||||
.conversation header .avatar {
|
.conversation header .avatar {
|
||||||
margin-right: 5px;
|
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;
|
width: 30px;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
|
-moz-border-radius: 50px;
|
||||||
|
-webkit-border-radius: 50px;
|
||||||
|
-khtml-border-radius: 50px;
|
||||||
|
-o-border-radius: 50px;
|
||||||
|
-border-radius: 50px;
|
||||||
|
border-radius: 50px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 11px;
|
top: 11px;
|
||||||
left: 11px;
|
left: 11px;
|
||||||
@ -558,12 +647,32 @@ body #menu {
|
|||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 14px;
|
line-height: 14px;
|
||||||
}
|
}
|
||||||
|
.conversation header .tzo:not(:empty) {
|
||||||
|
position: absolute;
|
||||||
|
right: 15px;
|
||||||
|
top: 50%;
|
||||||
|
height: 20px;
|
||||||
|
margin-top: -10px;
|
||||||
|
padding: 0 5px;
|
||||||
|
-moz-border-radius: 3px;
|
||||||
|
-webkit-border-radius: 3px;
|
||||||
|
-khtml-border-radius: 3px;
|
||||||
|
-o-border-radius: 3px;
|
||||||
|
-border-radius: 3px;
|
||||||
|
border-radius: 3px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-size: 9px;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 20px;
|
||||||
|
color: #898989;
|
||||||
|
background: #e4e4e4;
|
||||||
|
}
|
||||||
.messages {
|
.messages {
|
||||||
background: #ecf0f2;
|
background: #f7fdff;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
margin: 0px;
|
margin: 0px;
|
||||||
padding: 0px;
|
padding: 0px;
|
||||||
padding-top: 150px;
|
padding-top: 130px;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
position: relative;
|
position: relative;
|
||||||
@ -585,8 +694,10 @@ body #menu {
|
|||||||
-webkit-box-sizing: border-box;
|
-webkit-box-sizing: border-box;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
.messages li:last-child .message {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
.messages .message {
|
.messages .message {
|
||||||
color: #33404c;
|
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
margin: 0px;
|
margin: 0px;
|
||||||
padding: 7px 11px;
|
padding: 7px 11px;
|
||||||
@ -594,17 +705,17 @@ body #menu {
|
|||||||
padding-right: 11px;
|
padding-right: 11px;
|
||||||
min-width: 20px;
|
min-width: 20px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-bottom: 1px solid #ccc;
|
border-bottom: 1px solid #e4f8ff;
|
||||||
-moz-box-sizing: border-box;
|
-moz-box-sizing: border-box;
|
||||||
-webkit-box-sizing: border-box;
|
-webkit-box-sizing: border-box;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
.messages .message.mine {
|
.messages .message.mine {
|
||||||
background: #eaf7ff;
|
background: #fff;
|
||||||
border-bottom: 1px solid #bbe0fa;
|
border-bottom: 1px solid #e7e7e7;
|
||||||
}
|
}
|
||||||
.messages .message.mine .timestamp {
|
.messages .message.mine .timestamp {
|
||||||
color: #bbe0fa;
|
color: #b6b6b6;
|
||||||
}
|
}
|
||||||
.messages .message.delayed .timestamp:before {
|
.messages .message.delayed .timestamp:before {
|
||||||
content: '@ ';
|
content: '@ ';
|
||||||
@ -620,32 +731,26 @@ body #menu {
|
|||||||
color: #111;
|
color: #111;
|
||||||
}
|
}
|
||||||
.messages .message .timestamp {
|
.messages .message .timestamp {
|
||||||
font-size: 12px;
|
font-size: 10px;
|
||||||
color: #bbb;
|
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
color: #78daff;
|
||||||
float: right;
|
float: right;
|
||||||
display: block;
|
display: block;
|
||||||
margin-right: 15px;
|
|
||||||
}
|
}
|
||||||
.chatBox {
|
.chatBox {
|
||||||
-moz-box-sizing: border-box;
|
-moz-box-sizing: border-box;
|
||||||
-webkit-box-sizing: border-box;
|
-webkit-box-sizing: border-box;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
border-top: 1px solid rgba(0,0,0,0.08);
|
border-top: 1px solid #e4e4e4;
|
||||||
bottom: 0px;
|
bottom: 0px;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
right: 0px;
|
right: 0px;
|
||||||
left: 156px;
|
left: 181px;
|
||||||
z-index: 200;
|
z-index: 200;
|
||||||
}
|
}
|
||||||
.chatBox form {
|
.chatBox form {
|
||||||
background: #e1e4e6;
|
background: #f7f7f7;
|
||||||
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;
|
padding: 11px;
|
||||||
border-top: 1px solid #fff;
|
|
||||||
border-left: 1px solid #ddd;
|
|
||||||
border-right: 1px solid #ddd;
|
|
||||||
}
|
}
|
||||||
.chatBox .formwrap {
|
.chatBox .formwrap {
|
||||||
-moz-box-sizing: border-box;
|
-moz-box-sizing: border-box;
|
||||||
@ -656,37 +761,17 @@ body #menu {
|
|||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
.chatBox textarea {
|
.chatBox textarea {
|
||||||
background-color: #fff;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
height: 30px;
|
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;
|
line-height: 18px;
|
||||||
outline: none;
|
|
||||||
resize: none;
|
|
||||||
color: #222f3b;
|
|
||||||
font-size: 14px;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
-moz-box-sizing: border-box;
|
background: #fff;
|
||||||
-webkit-box-sizing: border-box;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
.chatBox textarea:focus {
|
|
||||||
border-color: #bbb;
|
|
||||||
border-top-color: #aaa;
|
|
||||||
}
|
}
|
||||||
.chatBox textarea.editing {
|
.chatBox textarea.editing {
|
||||||
background-color: #ff0;
|
background-color: #fffcea;
|
||||||
|
border: 1px solid #efe391;
|
||||||
|
color: #d2bd2d;
|
||||||
}
|
}
|
||||||
.uploadRegion {
|
.uploadRegion {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
@ -703,50 +788,124 @@ body #menu {
|
|||||||
.uploadRegion input {
|
.uploadRegion input {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
.aux {
|
||||||
|
background: #f7f7f7;
|
||||||
|
}
|
||||||
.aux header {
|
.aux header {
|
||||||
margin-top: 10%;
|
margin-top: 8%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
#logo {
|
#logo {
|
||||||
margin: auto;
|
margin: auto;
|
||||||
}
|
}
|
||||||
#loginbox {
|
.box {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
margin-top: 5%;
|
margin-top: 5%;
|
||||||
padding: 20px;
|
padding: 20px 0;
|
||||||
background-color: #fff;
|
background: #fff;
|
||||||
width: 75%;
|
width: 75%;
|
||||||
|
-moz-border-radius: 3px;
|
||||||
|
-webkit-border-radius: 3px;
|
||||||
|
-khtml-border-radius: 3px;
|
||||||
|
-o-border-radius: 3px;
|
||||||
|
-border-radius: 3px;
|
||||||
|
border-radius: 3px;
|
||||||
}
|
}
|
||||||
#loginbox label {
|
.box.connect {
|
||||||
|
padding: 20px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.box.connect h2 {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.box .head,
|
||||||
|
.box .content {
|
||||||
|
padding: 0 20px;
|
||||||
|
}
|
||||||
|
.box .head {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
border-bottom: 1px solid #f2f2f2;
|
||||||
|
}
|
||||||
|
.box input {
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
.box a.button {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
.box h2 {
|
||||||
|
margin: 0;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
}
|
||||||
|
@media screen and (min-width: 768px) {
|
||||||
|
.box {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
input[type=text],
|
||||||
|
input[type=email],
|
||||||
|
input[type=search],
|
||||||
|
input[type=password],
|
||||||
|
textarea {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
-moz-border-radius: 3px;
|
||||||
|
-webkit-border-radius: 3px;
|
||||||
|
-khtml-border-radius: 3px;
|
||||||
|
-o-border-radius: 3px;
|
||||||
|
-border-radius: 3px;
|
||||||
|
border-radius: 3px;
|
||||||
|
padding: 0 10px;
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid #e4e4e4;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #565656;
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-family: 'Gotham SSm A', 'Gotham SSm B', Helvetica, Arial, sans-serif;
|
||||||
|
font-style: normal;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
-webkit-transition: border 0.2s ease-in 0;
|
||||||
|
-o-transition: border 0.2s ease-in 0;
|
||||||
|
transition: border 0.2s ease-in 0;
|
||||||
|
-moz-transition: border 0.2s ease-in 0;
|
||||||
|
-webkit-transition: border 0.2s ease-in 0;
|
||||||
|
-moz-transition: border 0.2s ease-in 0;
|
||||||
|
}
|
||||||
|
input[type=text],
|
||||||
|
input[type=email],
|
||||||
|
input[type=search],
|
||||||
|
input[type=password] {
|
||||||
|
height: 35px;
|
||||||
|
}
|
||||||
|
textarea {
|
||||||
|
resize: none;
|
||||||
|
}
|
||||||
|
input[type=text]:focus,
|
||||||
|
input[type=email]:focus,
|
||||||
|
input[type=search]:focus,
|
||||||
|
input[type=password]:focus,
|
||||||
|
textarea:focus {
|
||||||
|
outline: none;
|
||||||
|
border: 1px solid #78daff;
|
||||||
|
}
|
||||||
|
label {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: #777;
|
color: #565656;
|
||||||
}
|
}
|
||||||
#loginbox input {
|
a.button {
|
||||||
width: 100%;
|
line-height: 35px;
|
||||||
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 {
|
button,
|
||||||
border: 1px solid #a7d9eb;
|
a.button {
|
||||||
outline: 0px;
|
display: inline-block;
|
||||||
}
|
font-family: 'Gotham SSm A', 'Gotham SSm B', Helvetica, Arial, sans-serif;
|
||||||
#loginbox button,
|
font-style: normal;
|
||||||
#loginbox .andyetLogin {
|
|
||||||
text-decoration: none;
|
|
||||||
text-align: center;
|
|
||||||
-moz-border-radius: 3px;
|
-moz-border-radius: 3px;
|
||||||
-webkit-border-radius: 3px;
|
-webkit-border-radius: 3px;
|
||||||
-khtml-border-radius: 3px;
|
-khtml-border-radius: 3px;
|
||||||
@ -755,20 +914,17 @@ body #menu {
|
|||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
border: none;
|
border: none;
|
||||||
height: 35px;
|
height: 35px;
|
||||||
|
min-width: 80px;
|
||||||
padding: 0 1em;
|
padding: 0 1em;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
background-color: #7ec6e2;
|
background: #00aeef;
|
||||||
line-height: 35px;
|
font-size: 12px;
|
||||||
font-size: 16px;
|
font-weight: bold;
|
||||||
|
text-decoration: none;
|
||||||
|
text-align: center;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
#loginbox .andyetLogin {
|
button:hover,
|
||||||
display: block;
|
a.button:hover {
|
||||||
float: right;
|
background: #007aa7;
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
#loginbox h2 {
|
|
||||||
color: #222;
|
|
||||||
padding-bottom: 10px;
|
|
||||||
border-bottom: 1px solid #f8f8f8;
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -7,3 +7,4 @@
|
|||||||
@import 'app/chat'
|
@import 'app/chat'
|
||||||
@import 'app/settings'
|
@import 'app/settings'
|
||||||
@import 'app/aux'
|
@import 'app/aux'
|
||||||
|
@import 'app/forms'
|
||||||
|
|||||||
@ -4,7 +4,7 @@ html
|
|||||||
title OTalk
|
title OTalk
|
||||||
|
|
||||||
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", type="text/css", href="//cloud.typography.com/7773252/657662/css/fonts.css")
|
||||||
link(rel="stylesheet", href="/css/otalk.css")
|
link(rel="stylesheet", href="/css/otalk.css")
|
||||||
block head
|
block head
|
||||||
body.aux
|
body.aux
|
||||||
|
|||||||
@ -1,9 +1,14 @@
|
|||||||
extends layout
|
extends layout
|
||||||
|
|
||||||
block content
|
block content
|
||||||
section#loginbox.content
|
section#loginbox.content.box
|
||||||
a.andyetLogin(href="/oauth/login") have an &yet account?
|
.head
|
||||||
h2 Log in
|
h2
|
||||||
|
| Log in
|
||||||
|
a.button(href="/oauth/login") Have an &yet account?
|
||||||
|
|
||||||
|
.content
|
||||||
|
|
||||||
form
|
form
|
||||||
.fieldContainer
|
.fieldContainer
|
||||||
label(for='username') JID
|
label(for='username') JID
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user