mirror of
https://github.com/moparisthebest/kaiwa
synced 2024-11-12 04:25:05 -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 () {
|
||||
if (client.sessionStarted) {
|
||||
client.disconnect();
|
||||
// We'll make this a setting later
|
||||
//return "End active session?";
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
<header>
|
||||
<img id="logo" src="/images/logo.png" alt="OTalk" />
|
||||
</header>
|
||||
<section id="loginbox" class="content">
|
||||
<section class="box connect">
|
||||
<h2>Connecting...</h2>
|
||||
</section>
|
||||
</body>
|
||||
|
||||
@ -13,7 +13,7 @@ exports.pages = {};
|
||||
exports.body = function anonymous(locals) {
|
||||
var buf = [];
|
||||
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("");
|
||||
};
|
||||
@ -22,7 +22,7 @@ exports.body = function anonymous(locals) {
|
||||
exports.head = function anonymous(locals) {
|
||||
var buf = [];
|
||||
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("");
|
||||
};
|
||||
|
||||
@ -6,9 +6,14 @@ body
|
||||
aside#menu
|
||||
nav.main
|
||||
li
|
||||
a(href="/logout") Logout
|
||||
a(href="/logout", class="button") Logout
|
||||
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
|
||||
h1 Roster
|
||||
nav
|
||||
|
||||
@ -1,2 +1,3 @@
|
||||
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")
|
||||
|
||||
@ -1,30 +1,8 @@
|
||||
@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)
|
||||
gotham()
|
||||
font-family: 'Gotham SSm A', 'Gotham SSm B', Helvetica, Arial, sans-serif
|
||||
font-style: normal
|
||||
|
||||
roundall($round)
|
||||
-moz-border-radius: $round
|
||||
@ -34,27 +12,6 @@ roundall($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)))
|
||||
@ -129,34 +86,17 @@ borderbox()
|
||||
box-sizing: border-box
|
||||
|
||||
// avatars
|
||||
avatarLG()
|
||||
width: 50px
|
||||
height: 50px
|
||||
roundall: 3px
|
||||
|
||||
avatarMD()
|
||||
avatarLarge()
|
||||
width: 30px
|
||||
height: 30px
|
||||
roundall: 3px
|
||||
roundall(50px)
|
||||
|
||||
avatarSM()
|
||||
avatarSmall()
|
||||
width: 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
|
||||
webkit-transition-fix()
|
||||
|
||||
@ -1,30 +1,20 @@
|
||||
// colors
|
||||
|
||||
$header = #404040
|
||||
$bodybg = #202020
|
||||
$activeBlue = #00aeef
|
||||
$actionPink = #ec008c
|
||||
|
||||
$red = #c80000
|
||||
$text = #333
|
||||
$subtext = #777
|
||||
$sidebarBg = #0b1316
|
||||
$sidebarActive = #1f2d49
|
||||
|
||||
$pink = #EB008B
|
||||
$ltgray = #EBECEC
|
||||
$dkgray = #202020
|
||||
$blue = #00aeef
|
||||
$dkblue = #006991
|
||||
$baseText = #565656
|
||||
$textSecondary = #b7b7b7
|
||||
|
||||
$grayBackground = #f7f7f7
|
||||
$grayOutline = #e4e4e4
|
||||
|
||||
// font sizes
|
||||
|
||||
$fontLG = 20px
|
||||
$fontMD = 16px
|
||||
$fontSM = 13px
|
||||
$fontLarge = 20px
|
||||
$fontMedium = 14px
|
||||
$fontSmall = 12px
|
||||
|
||||
|
||||
// dimensions
|
||||
|
||||
$base = 10px
|
||||
$seven = 7 * $base
|
||||
$five = 5 * $base
|
||||
$three = 3 * $base
|
||||
$page = 38 * $base
|
||||
|
||||
@ -1,63 +1,51 @@
|
||||
.aux
|
||||
background: $grayBackground
|
||||
|
||||
header
|
||||
margin-top: 10%
|
||||
margin-top: 8%
|
||||
text-align: center
|
||||
|
||||
#logo
|
||||
margin: auto
|
||||
|
||||
#loginbox
|
||||
.box
|
||||
position: relative
|
||||
margin: auto
|
||||
margin-top: 5%
|
||||
padding: 20px
|
||||
background-color: white
|
||||
padding: 20px 0
|
||||
background: white
|
||||
width: 75%
|
||||
roundall(3px)
|
||||
|
||||
label
|
||||
display: block
|
||||
margin-bottom: 5px
|
||||
font-size: 13px
|
||||
font-weight: bold
|
||||
color: #777
|
||||
&.connect
|
||||
padding: 20px
|
||||
text-align: center
|
||||
|
||||
h2
|
||||
padding: 0
|
||||
|
||||
.head, .content
|
||||
padding: 0 20px
|
||||
|
||||
.head
|
||||
margin-bottom: 20px
|
||||
border-bottom: 1px solid lighten($grayOutline, 50%)
|
||||
|
||||
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
|
||||
a.button
|
||||
float: right
|
||||
font-size: 14px
|
||||
|
||||
h2
|
||||
color: #222
|
||||
padding-bottom: 10px
|
||||
border-bottom: 1px solid #f8f8f8
|
||||
margin: 0
|
||||
padding-bottom: 20px
|
||||
|
||||
|
||||
@media screen and (min-width: 768px)
|
||||
|
||||
.box
|
||||
width: 50%
|
||||
|
||||
|
||||
|
||||
@ -18,24 +18,17 @@
|
||||
|
||||
header
|
||||
padding: 5px
|
||||
gradient: #e1e4e6 #cacdce
|
||||
shadow: rgba(#000,0.1) 2px 1px 5px
|
||||
border-bottom: 1px solid #aaa
|
||||
border-bottom: 2px solid $grayOutline
|
||||
position: fixed
|
||||
right: 0px
|
||||
left: 156px
|
||||
left: 181px
|
||||
z-index: 10
|
||||
font-size: 14px
|
||||
borderbox()
|
||||
color: #222
|
||||
font-weight: normal
|
||||
font-size: 11px
|
||||
background: $grayBackground
|
||||
|
||||
.avatar
|
||||
margin-right: 5px
|
||||
roundall: 5px
|
||||
width: 30px
|
||||
height: 30px
|
||||
avatarLarge()
|
||||
position: absolute
|
||||
top: 11px
|
||||
left: 11px
|
||||
@ -48,12 +41,27 @@
|
||||
font-size: 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
|
||||
background: #ecf0f2
|
||||
background: lighten($activeBlue, 97%)
|
||||
font-weight: normal
|
||||
margin: 0px
|
||||
padding: 0px
|
||||
padding-top: 150px
|
||||
padding-top: 130px
|
||||
overflow-y: auto
|
||||
overflow-x: hidden
|
||||
position: relative
|
||||
@ -71,8 +79,10 @@
|
||||
display: block
|
||||
borderbox()
|
||||
|
||||
&:last-child .message
|
||||
border: none
|
||||
|
||||
.message
|
||||
color: #33404c
|
||||
font-size: 12px
|
||||
margin: 0px
|
||||
padding: 7px 11px
|
||||
@ -80,15 +90,15 @@
|
||||
padding-right: 11px
|
||||
min-width: 20px
|
||||
width: 100%
|
||||
border-bottom: 1px solid #ccc
|
||||
border-bottom: 1px solid lighten($activeBlue, 90%)
|
||||
borderbox()
|
||||
|
||||
&.mine
|
||||
background: #eaf7ff
|
||||
border-bottom: 1px solid #bbe0fa
|
||||
background: white
|
||||
border-bottom: 1px solid lighten($grayOutline, 10%)
|
||||
|
||||
.timestamp
|
||||
color: #bbe0fa
|
||||
color: darken($grayOutline, 20%)
|
||||
|
||||
&.delayed
|
||||
.timestamp:before
|
||||
@ -106,28 +116,24 @@
|
||||
color: #111
|
||||
|
||||
.timestamp
|
||||
font-size: 12px
|
||||
color: #bbb
|
||||
font-size: 10px
|
||||
font-weight: bold
|
||||
color: lighten($activeBlue, 50%)
|
||||
float: right
|
||||
display: block
|
||||
margin-right: 15px
|
||||
|
||||
.chatBox
|
||||
borderbox()
|
||||
border-top: 1px solid rgba(0,0,0,.08)
|
||||
border-top: 1px solid $grayOutline
|
||||
bottom: 0px
|
||||
position: fixed
|
||||
right: 0px
|
||||
left: 156px
|
||||
left: 181px
|
||||
z-index: 200
|
||||
|
||||
form
|
||||
gradient: #e1e4e6 #cacdce
|
||||
background: $grayBackground
|
||||
padding: 11px
|
||||
border-top: 1px solid #fff
|
||||
border-left: 1px solid #ddd
|
||||
border-right: 1px solid #ddd
|
||||
|
||||
.formwrap
|
||||
borderbox()
|
||||
@ -136,25 +142,14 @@
|
||||
position: relative
|
||||
|
||||
textarea
|
||||
background-color: #fff
|
||||
width: 100%
|
||||
position: relative
|
||||
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
|
||||
background: white
|
||||
|
||||
&.editing
|
||||
background-color: yellow
|
||||
background-color: #fffcea
|
||||
border: 1px solid #efe391
|
||||
color: #d2bd2d
|
||||
|
||||
@ -23,16 +23,16 @@
|
||||
top: 0px;
|
||||
position: fixed
|
||||
background-color: #333
|
||||
border-bottom: 1px solid #000
|
||||
width: 100%
|
||||
z-index: 9999
|
||||
z-index: 100
|
||||
text-align: center
|
||||
|
||||
span.message
|
||||
display: inline-block
|
||||
padding: 0px 10px
|
||||
font-weight: bold
|
||||
font-size: 24px
|
||||
font-size: $fontLarge
|
||||
color: white
|
||||
|
||||
button
|
||||
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'
|
||||
|
||||
body
|
||||
background: #ecf0f2
|
||||
color: #222
|
||||
font-family: 'Lucdia Grande', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, sans-serif
|
||||
font-size: 17px
|
||||
font-weight: 500
|
||||
background: white
|
||||
color: $baseText
|
||||
gotham()
|
||||
font-size: 16px
|
||||
font-weight: 400
|
||||
-webkit-font-smoothing: antialiased
|
||||
|
||||
#pages
|
||||
h1, h2, h3, h4
|
||||
color: darken($baseText, 30%)
|
||||
|
||||
#pages
|
||||
position: absolute
|
||||
top: 0px
|
||||
right: 0px
|
||||
left: 156px
|
||||
left: 181px
|
||||
borderbox()
|
||||
|
||||
#menu
|
||||
width: 155px
|
||||
|
||||
@ -6,96 +6,122 @@
|
||||
top: 0px
|
||||
bottom: 0px
|
||||
left: 0px
|
||||
width: 155px
|
||||
background-color: #1c232d
|
||||
width: 180px
|
||||
background-color: $sidebarBg
|
||||
z-index: 300
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
webkit-transition-fix()
|
||||
noselect()
|
||||
shadow: #000 1px 0px 1px
|
||||
|
||||
.main
|
||||
margin-bottom: 10px
|
||||
li
|
||||
list-style-type: none
|
||||
padding: 5px
|
||||
line-height: 12px
|
||||
margin: 10px 0 5px 0
|
||||
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
|
||||
background-color: #2a323f
|
||||
|
||||
a
|
||||
color: #666
|
||||
|
||||
a
|
||||
text-decoration: none
|
||||
font-size: 12px
|
||||
color: #777
|
||||
|
||||
background: lighten($sidebarActive, 10%)
|
||||
|
||||
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
|
||||
font-size: 10px
|
||||
margin: 0
|
||||
padding: 20px 10px
|
||||
color: white
|
||||
text-transform: uppercase
|
||||
|
||||
#roster,
|
||||
#bookmarks
|
||||
li
|
||||
list-style-type: none
|
||||
padding: 11px
|
||||
padding: 7px 25px 7px 10px
|
||||
margin: 0px
|
||||
position: relative
|
||||
min-height: 20px
|
||||
font-size: 11px
|
||||
min-height: 15px
|
||||
font-size: $fontSmall
|
||||
color: #fff
|
||||
|
||||
&:nth-child(2n)
|
||||
background-color: #1e252f
|
||||
cursor: pointer
|
||||
transition: all .3s ease-in 0
|
||||
-webkit-transition: all .3s ease-in 0
|
||||
-moz-transition: all .3s ease-in 0
|
||||
|
||||
&:hover
|
||||
background-color: #2a323f
|
||||
background: $sidebarActive
|
||||
|
||||
&.hasUnread .unread
|
||||
display: block
|
||||
|
||||
&.online,
|
||||
&.chat
|
||||
border-left: 2px solid green
|
||||
border-left: 3px solid #427a00
|
||||
|
||||
&.dnd
|
||||
border-left: 2px solid red
|
||||
border-left: 3px solid #c50041
|
||||
|
||||
&.away,
|
||||
&.xa
|
||||
border-left: 2px solid orange
|
||||
border-left: 3px solid #f57900
|
||||
|
||||
&.offline
|
||||
border-left: 2px solid #222
|
||||
color: #aaa
|
||||
border-left: none
|
||||
|
||||
&.offline:not(:hover)
|
||||
.name
|
||||
color: darken($textSecondary, 40%)
|
||||
|
||||
.status
|
||||
color: darken($textSecondary, 65%)
|
||||
|
||||
img
|
||||
opacity: .25
|
||||
|
||||
.status
|
||||
color: #777
|
||||
&.activeContact, &.offline.activeContact
|
||||
background: white
|
||||
font-weight: bold
|
||||
|
||||
&.activeContact
|
||||
gradient: #35c8ff #00aeef
|
||||
border-top: 1px solid #8de0ff
|
||||
border-bottom: 1px solid #004a65
|
||||
.name
|
||||
color: $baseText
|
||||
|
||||
&.composing, &.paused
|
||||
|
||||
&:after
|
||||
content: ''
|
||||
position: absolute
|
||||
top: 50%
|
||||
right: 15px
|
||||
height: 8px
|
||||
width: 8px
|
||||
margin-top: -4px
|
||||
roundall(10px)
|
||||
|
||||
&.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
|
||||
border-right: 4px solid #666
|
||||
&:after
|
||||
background: $textSecondary
|
||||
|
||||
img
|
||||
opacity: 1
|
||||
@ -103,42 +129,48 @@
|
||||
.avatar
|
||||
vertical-align: top
|
||||
margin-right: 5px
|
||||
margin-top: -10px
|
||||
position: absolute
|
||||
left: 5px
|
||||
top: 5px
|
||||
width: 30px
|
||||
height: 30px
|
||||
roundall: 5px
|
||||
shadow: rgba(0,0,0,0.5) -1px -1px 1px
|
||||
left: 10px
|
||||
top: 50%
|
||||
avatarSmall()
|
||||
noselect()
|
||||
|
||||
.name
|
||||
margin: 0px
|
||||
margin-left: 40px
|
||||
font-weight: bold
|
||||
text-shadow: rgba(0,0,0,0.5) -1px -1px 1px
|
||||
margin-left: 30px
|
||||
line-height: 20px
|
||||
color: white
|
||||
text-overflow: ellipsis
|
||||
overflow: hidden
|
||||
width: 70%
|
||||
|
||||
.status
|
||||
color: #ccc
|
||||
color: $textSecondary
|
||||
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
|
||||
line-height: 12px
|
||||
margin: 0
|
||||
margin-left: 30px
|
||||
|
||||
&:not(:empty)
|
||||
margin-top: -2px
|
||||
|
||||
.unread
|
||||
display: none
|
||||
color: white
|
||||
padding-left: 5px
|
||||
padding-right: 5px
|
||||
roundall: 11px
|
||||
padding: 2px 5px
|
||||
roundall(20px)
|
||||
position: absolute
|
||||
top: 20px
|
||||
left: 20px
|
||||
top: 8px
|
||||
right: 10px
|
||||
font-size: 10px
|
||||
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
|
||||
color: lighten($sidebarActive, 30%)
|
||||
background: $sidebarActive
|
||||
|
||||
@keyframes pulsate
|
||||
0%
|
||||
opacity: 1.0
|
||||
50%
|
||||
opacity: 0.5
|
||||
100%
|
||||
opacity: 1.0
|
||||
@ -246,25 +246,29 @@ td {
|
||||
zoom: 1;
|
||||
}
|
||||
body {
|
||||
background: #ecf0f2;
|
||||
color: #222;
|
||||
font-family: 'Lucdia Grande', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
font-size: 17px;
|
||||
font-weight: 500;
|
||||
background: #fff;
|
||||
color: #565656;
|
||||
font-family: 'Gotham SSm A', 'Gotham SSm B', Helvetica, Arial, sans-serif;
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
body #pages {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
color: #3c3c3c;
|
||||
}
|
||||
#pages {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
left: 156px;
|
||||
left: 181px;
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body #menu {
|
||||
width: 155px;
|
||||
}
|
||||
#connectionOverlay {
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
@ -290,16 +294,16 @@ body #menu {
|
||||
top: 0px;
|
||||
position: fixed;
|
||||
background-color: #333;
|
||||
border-bottom: 1px solid #000;
|
||||
width: 100%;
|
||||
z-index: 9999;
|
||||
z-index: 100;
|
||||
text-align: center;
|
||||
}
|
||||
#connectionStatus span.message {
|
||||
display: inline-block;
|
||||
padding: 0px 10px;
|
||||
font-weight: bold;
|
||||
font-size: 24px;
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
}
|
||||
#connectionStatus button {
|
||||
padding: 5px 8px;
|
||||
@ -311,8 +315,8 @@ body #menu {
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
width: 155px;
|
||||
background-color: #1c232d;
|
||||
width: 180px;
|
||||
background-color: #0b1316;
|
||||
z-index: 300;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
@ -323,59 +327,62 @@ body #menu {
|
||||
-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 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
#menu .main li {
|
||||
list-style-type: none;
|
||||
padding: 5px;
|
||||
line-height: 12px;
|
||||
margin: 10px 0 5px 0;
|
||||
text-align: center;
|
||||
}
|
||||
#menu .main li:hover {
|
||||
background-color: #2a323f;
|
||||
#menu .main li:last-child {
|
||||
margin: 0;
|
||||
}
|
||||
#menu .main li:hover a {
|
||||
color: #666;
|
||||
#menu .main li svg {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 10px;
|
||||
margin-top: -13px;
|
||||
fill: #fff;
|
||||
}
|
||||
#menu .main li a {
|
||||
text-decoration: none;
|
||||
font-size: 12px;
|
||||
color: #777;
|
||||
position: relative;
|
||||
width: 130px;
|
||||
}
|
||||
#menu .main li .button {
|
||||
background: #1f2d49;
|
||||
}
|
||||
#menu .main li .button:hover {
|
||||
background: #2b3f65;
|
||||
}
|
||||
#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;
|
||||
font-size: 10px;
|
||||
margin: 0;
|
||||
padding: 20px 10px;
|
||||
color: #fff;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
#roster li,
|
||||
#bookmarks li {
|
||||
list-style-type: none;
|
||||
padding: 11px;
|
||||
padding: 7px 25px 7px 10px;
|
||||
margin: 0px;
|
||||
position: relative;
|
||||
min-height: 20px;
|
||||
font-size: 11px;
|
||||
min-height: 15px;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
}
|
||||
#roster li:nth-child(2n),
|
||||
#bookmarks li:nth-child(2n) {
|
||||
background-color: #1e252f;
|
||||
cursor: pointer;
|
||||
-webkit-transition: all 0.3s ease-in 0;
|
||||
-o-transition: all 0.3s ease-in 0;
|
||||
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,
|
||||
#bookmarks li:hover {
|
||||
background-color: #2a323f;
|
||||
background: #1f2d49;
|
||||
}
|
||||
#roster li.hasUnread .unread,
|
||||
#bookmarks li.hasUnread .unread {
|
||||
@ -385,46 +392,75 @@ body #menu {
|
||||
#bookmarks li.online,
|
||||
#roster li.chat,
|
||||
#bookmarks li.chat {
|
||||
border-left: 2px solid #008000;
|
||||
border-left: 3px solid #427a00;
|
||||
}
|
||||
#roster li.dnd,
|
||||
#bookmarks li.dnd {
|
||||
border-left: 2px solid #f00;
|
||||
border-left: 3px solid #c50041;
|
||||
}
|
||||
#roster li.away,
|
||||
#bookmarks li.away,
|
||||
#roster li.xa,
|
||||
#bookmarks li.xa {
|
||||
border-left: 2px solid #ffa500;
|
||||
border-left: 3px solid #f57900;
|
||||
}
|
||||
#roster li.offline,
|
||||
#bookmarks li.offline {
|
||||
border-left: 2px solid #222;
|
||||
color: #aaa;
|
||||
border-left: none;
|
||||
}
|
||||
#roster li.offline img,
|
||||
#bookmarks li.offline img {
|
||||
#roster li.offline:not(:hover) .name,
|
||||
#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;
|
||||
}
|
||||
#roster li.offline .status,
|
||||
#bookmarks li.offline .status {
|
||||
color: #777;
|
||||
}
|
||||
#roster li.activeContact,
|
||||
#bookmarks 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;
|
||||
#bookmarks li.activeContact,
|
||||
#roster li.offline.activeContact,
|
||||
#bookmarks li.offline.activeContact {
|
||||
background: #fff;
|
||||
font-weight: bold;
|
||||
}
|
||||
#roster li.composing,
|
||||
#bookmarks li.composing {
|
||||
border-right: 4px solid #ffa500;
|
||||
#roster li.activeContact .name,
|
||||
#bookmarks li.activeContact .name,
|
||||
#roster li.offline.activeContact .name,
|
||||
#bookmarks li.offline.activeContact .name {
|
||||
color: #565656;
|
||||
}
|
||||
#roster li.paused,
|
||||
#bookmarks li.paused {
|
||||
border-right: 4px solid #666;
|
||||
#roster li.composing:after,
|
||||
#bookmarks li.composing:after,
|
||||
#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,
|
||||
#bookmarks li img {
|
||||
@ -434,20 +470,18 @@ body #menu {
|
||||
#bookmarks li .avatar {
|
||||
vertical-align: top;
|
||||
margin-right: 5px;
|
||||
margin-top: -10px;
|
||||
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;
|
||||
left: 10px;
|
||||
top: 50%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
-moz-border-radius: 30px;
|
||||
-webkit-border-radius: 30px;
|
||||
-khtml-border-radius: 30px;
|
||||
-o-border-radius: 30px;
|
||||
-border-radius: 30px;
|
||||
border-radius: 30px;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
@ -457,44 +491,108 @@ body #menu {
|
||||
}
|
||||
#roster li .name,
|
||||
#bookmarks li .name {
|
||||
margin: 0px;
|
||||
margin-left: 40px;
|
||||
font-weight: bold;
|
||||
text-shadow: rgba(0,0,0,0.5) -1px -1px 1px;
|
||||
margin-left: 30px;
|
||||
line-height: 20px;
|
||||
color: #fff;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
width: 70%;
|
||||
}
|
||||
#roster li .status,
|
||||
#bookmarks li .status {
|
||||
color: #ccc;
|
||||
color: #b7b7b7;
|
||||
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;
|
||||
line-height: 12px;
|
||||
margin: 0;
|
||||
margin-left: 30px;
|
||||
}
|
||||
#roster li .status:not(:empty),
|
||||
#bookmarks li .status:not(:empty) {
|
||||
margin-top: -2px;
|
||||
}
|
||||
#roster li .unread,
|
||||
#bookmarks 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;
|
||||
padding: 2px 5px;
|
||||
-moz-border-radius: 20px;
|
||||
-webkit-border-radius: 20px;
|
||||
-khtml-border-radius: 20px;
|
||||
-o-border-radius: 20px;
|
||||
-border-radius: 20px;
|
||||
border-radius: 20px;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
top: 8px;
|
||||
right: 10px;
|
||||
font-size: 10px;
|
||||
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;
|
||||
color: #43629e;
|
||||
background: #1f2d49;
|
||||
}
|
||||
@-moz-keyframes pulsate {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
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 {
|
||||
padding-top: 0px;
|
||||
@ -517,35 +615,26 @@ body #menu {
|
||||
}
|
||||
.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;
|
||||
border-bottom: 2px solid #e4e4e4;
|
||||
position: fixed;
|
||||
right: 0px;
|
||||
left: 156px;
|
||||
left: 181px;
|
||||
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;
|
||||
background: #f7f7f7;
|
||||
}
|
||||
.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;
|
||||
-moz-border-radius: 50px;
|
||||
-webkit-border-radius: 50px;
|
||||
-khtml-border-radius: 50px;
|
||||
-o-border-radius: 50px;
|
||||
-border-radius: 50px;
|
||||
border-radius: 50px;
|
||||
position: absolute;
|
||||
top: 11px;
|
||||
left: 11px;
|
||||
@ -558,12 +647,32 @@ body #menu {
|
||||
font-size: 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 {
|
||||
background: #ecf0f2;
|
||||
background: #f7fdff;
|
||||
font-weight: normal;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
padding-top: 150px;
|
||||
padding-top: 130px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
position: relative;
|
||||
@ -585,8 +694,10 @@ body #menu {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.messages li:last-child .message {
|
||||
border: none;
|
||||
}
|
||||
.messages .message {
|
||||
color: #33404c;
|
||||
font-size: 12px;
|
||||
margin: 0px;
|
||||
padding: 7px 11px;
|
||||
@ -594,17 +705,17 @@ body #menu {
|
||||
padding-right: 11px;
|
||||
min-width: 20px;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #ccc;
|
||||
border-bottom: 1px solid #e4f8ff;
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.messages .message.mine {
|
||||
background: #eaf7ff;
|
||||
border-bottom: 1px solid #bbe0fa;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #e7e7e7;
|
||||
}
|
||||
.messages .message.mine .timestamp {
|
||||
color: #bbe0fa;
|
||||
color: #b6b6b6;
|
||||
}
|
||||
.messages .message.delayed .timestamp:before {
|
||||
content: '@ ';
|
||||
@ -620,32 +731,26 @@ body #menu {
|
||||
color: #111;
|
||||
}
|
||||
.messages .message .timestamp {
|
||||
font-size: 12px;
|
||||
color: #bbb;
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
color: #78daff;
|
||||
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);
|
||||
border-top: 1px solid #e4e4e4;
|
||||
bottom: 0px;
|
||||
position: fixed;
|
||||
right: 0px;
|
||||
left: 156px;
|
||||
left: 181px;
|
||||
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));
|
||||
background: #f7f7f7;
|
||||
padding: 11px;
|
||||
border-top: 1px solid #fff;
|
||||
border-left: 1px solid #ddd;
|
||||
border-right: 1px solid #ddd;
|
||||
}
|
||||
.chatBox .formwrap {
|
||||
-moz-box-sizing: border-box;
|
||||
@ -656,37 +761,17 @@ body #menu {
|
||||
position: relative;
|
||||
}
|
||||
.chatBox textarea {
|
||||
background-color: #fff;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
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;
|
||||
background: #fff;
|
||||
}
|
||||
.chatBox textarea.editing {
|
||||
background-color: #ff0;
|
||||
background-color: #fffcea;
|
||||
border: 1px solid #efe391;
|
||||
color: #d2bd2d;
|
||||
}
|
||||
.uploadRegion {
|
||||
font-size: 12px;
|
||||
@ -703,50 +788,124 @@ body #menu {
|
||||
.uploadRegion input {
|
||||
width: 100%;
|
||||
}
|
||||
.aux {
|
||||
background: #f7f7f7;
|
||||
}
|
||||
.aux header {
|
||||
margin-top: 10%;
|
||||
margin-top: 8%;
|
||||
text-align: center;
|
||||
}
|
||||
#logo {
|
||||
margin: auto;
|
||||
}
|
||||
#loginbox {
|
||||
.box {
|
||||
position: relative;
|
||||
margin: auto;
|
||||
margin-top: 5%;
|
||||
padding: 20px;
|
||||
background-color: #fff;
|
||||
padding: 20px 0;
|
||||
background: #fff;
|
||||
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;
|
||||
margin-bottom: 5px;
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
color: #777;
|
||||
color: #565656;
|
||||
}
|
||||
#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;
|
||||
a.button {
|
||||
line-height: 35px;
|
||||
}
|
||||
#loginbox input:focus {
|
||||
border: 1px solid #a7d9eb;
|
||||
outline: 0px;
|
||||
}
|
||||
#loginbox button,
|
||||
#loginbox .andyetLogin {
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
button,
|
||||
a.button {
|
||||
display: inline-block;
|
||||
font-family: 'Gotham SSm A', 'Gotham SSm B', Helvetica, Arial, sans-serif;
|
||||
font-style: normal;
|
||||
-moz-border-radius: 3px;
|
||||
-webkit-border-radius: 3px;
|
||||
-khtml-border-radius: 3px;
|
||||
@ -755,20 +914,17 @@ body #menu {
|
||||
border-radius: 3px;
|
||||
border: none;
|
||||
height: 35px;
|
||||
min-width: 80px;
|
||||
padding: 0 1em;
|
||||
color: #fff;
|
||||
background-color: #7ec6e2;
|
||||
line-height: 35px;
|
||||
font-size: 16px;
|
||||
background: #00aeef;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
#loginbox .andyetLogin {
|
||||
display: block;
|
||||
float: right;
|
||||
font-size: 14px;
|
||||
}
|
||||
#loginbox h2 {
|
||||
color: #222;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #f8f8f8;
|
||||
button:hover,
|
||||
a.button:hover {
|
||||
background: #007aa7;
|
||||
}
|
||||
|
||||
@ -7,3 +7,4 @@
|
||||
@import 'app/chat'
|
||||
@import 'app/settings'
|
||||
@import 'app/aux'
|
||||
@import 'app/forms'
|
||||
|
||||
@ -4,7 +4,7 @@ html
|
||||
title OTalk
|
||||
|
||||
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")
|
||||
block head
|
||||
body.aux
|
||||
|
||||
@ -1,9 +1,14 @@
|
||||
extends layout
|
||||
|
||||
block content
|
||||
section#loginbox.content
|
||||
a.andyetLogin(href="/oauth/login") have an &yet account?
|
||||
h2 Log in
|
||||
section#loginbox.content.box
|
||||
.head
|
||||
h2
|
||||
| Log in
|
||||
a.button(href="/oauth/login") Have an &yet account?
|
||||
|
||||
.content
|
||||
|
||||
form
|
||||
.fieldContainer
|
||||
label(for='username') JID
|
||||
|
||||
Loading…
Reference in New Issue
Block a user