diff --git a/clientapp/app.js b/clientapp/app.js index 238d41a..8c8e7c9 100644 --- a/clientapp/app.js +++ b/clientapp/app.js @@ -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?"; } }; diff --git a/clientapp/template.html b/clientapp/template.html index 061f61e..f2ade71 100644 --- a/clientapp/template.html +++ b/clientapp/template.html @@ -9,7 +9,7 @@
-
+

Connecting...

diff --git a/clientapp/templates.js b/clientapp/templates.js index daf4c4a..084eedc 100644 --- a/clientapp/templates.js +++ b/clientapp/templates.js @@ -13,7 +13,7 @@ exports.pages = {}; exports.body = function anonymous(locals) { var buf = []; with (locals || {}) { - buf.push('
'); + buf.push('
'); } return buf.join(""); }; @@ -22,7 +22,7 @@ exports.body = function anonymous(locals) { exports.head = function anonymous(locals) { var buf = []; with (locals || {}) { - buf.push(''); + buf.push(''); } return buf.join(""); }; diff --git a/clientapp/templates/body.jade b/clientapp/templates/body.jade index af33d67..be67cf0 100644 --- a/clientapp/templates/body.jade +++ b/clientapp/templates/body.jade @@ -1,18 +1,23 @@ body - #connectionOverlay - aside#connectionStatus - button.reconnect Reconnect - span.message disconnected - aside#menu - nav.main - li - a(href="/logout") Logout - li - a(href="/") Settings - section#roster - h1 Roster - nav - section#bookmarks - h1 Bookmarks - nav - section#pages + #connectionOverlay + aside#connectionStatus + button.reconnect Reconnect + span.message disconnected + aside#menu + nav.main + li + a(href="/logout", class="button") Logout + 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(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 + section#bookmarks + h1 Bookmarks + nav + section#pages diff --git a/clientapp/templates/head.jade b/clientapp/templates/head.jade index 1e8c5f4..8bdd8be 100644 --- a/clientapp/templates/head.jade +++ b/clientapp/templates/head.jade @@ -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") diff --git a/public/css/_mixins.styl b/public/css/_mixins.styl index fc6d60b..f37b099 100644 --- a/public/css/_mixins.styl +++ b/public/css/_mixins.styl @@ -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() diff --git a/public/css/_variables.styl b/public/css/_variables.styl index 5d70147..15bd439 100644 --- a/public/css/_variables.styl +++ b/public/css/_variables.styl @@ -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 diff --git a/public/css/app/aux.styl b/public/css/app/aux.styl index fdc90dc..3e742f1 100644 --- a/public/css/app/aux.styl +++ b/public/css/app/aux.styl @@ -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% diff --git a/public/css/app/chat.styl b/public/css/app/chat.styl index ae46453..d6680c7 100644 --- a/public/css/app/chat.styl +++ b/public/css/app/chat.styl @@ -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 diff --git a/public/css/app/connectionStatus.styl b/public/css/app/connectionStatus.styl index 215e57c..0469c5f 100644 --- a/public/css/app/connectionStatus.styl +++ b/public/css/app/connectionStatus.styl @@ -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 diff --git a/public/css/app/forms.styl b/public/css/app/forms.styl new file mode 100644 index 0000000..8a2aef6 --- /dev/null +++ b/public/css/app/forms.styl @@ -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%) \ No newline at end of file diff --git a/public/css/app/layout.styl b/public/css/app/layout.styl index 5077da8..ea3e14b 100644 --- a/public/css/app/layout.styl +++ b/public/css/app/layout.styl @@ -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 - position: absolute - top: 0px - right: 0px - left: 156px - borderbox() +h1, h2, h3, h4 + color: darken($baseText, 30%) - #menu - width: 155px +#pages + position: absolute + top: 0px + right: 0px + left: 181px + borderbox() diff --git a/public/css/app/roster.styl b/public/css/app/roster.styl index 19c7c0a..a0a5ed3 100644 --- a/public/css/app/roster.styl +++ b/public/css/app/roster.styl @@ -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 - &:hover - background-color: #2a323f + &:last-child + margin: 0 - a - color: #666 + svg + position: absolute + top: 50% + left: 10px + margin-top: -13px + fill: white a - text-decoration: none - font-size: 12px - color: #777 + position: relative + width: 130px + .button + background: $sidebarActive + + &:hover + 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 \ No newline at end of file diff --git a/public/css/otalk.css b/public/css/otalk.css index f1da549..2acdba5 100644 --- a/public/css/otalk.css +++ b/public/css/otalk.css @@ -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; } diff --git a/public/css/otalk.styl b/public/css/otalk.styl index 05affc5..88eed45 100644 --- a/public/css/otalk.styl +++ b/public/css/otalk.styl @@ -7,3 +7,4 @@ @import 'app/chat' @import 'app/settings' @import 'app/aux' +@import 'app/forms' diff --git a/views/layout.jade b/views/layout.jade index 6fac019..017e69e 100644 --- a/views/layout.jade +++ b/views/layout.jade @@ -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 diff --git a/views/login.jade b/views/login.jade index 1d7bbdf..48d7b52 100644 --- a/views/login.jade +++ b/views/login.jade @@ -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