From f857e7e527d54233455f3a3025305410218f9404 Mon Sep 17 00:00:00 2001 From: karolinaszczur Date: Wed, 18 Sep 2013 19:40:00 +0200 Subject: [PATCH] [ux] make log in form consistent with apps.andyet.com, further centralization of form styles --- public/css/app/aux.styl | 31 +++-------------- public/css/app/forms.styl | 28 ++++++++++++++- public/css/otalk.css | 73 ++++++++++++++++++++++----------------- views/login.jade | 30 ++++++++-------- 4 files changed, 89 insertions(+), 73 deletions(-) diff --git a/public/css/app/aux.styl b/public/css/app/aux.styl index bd4281f..a4d6253 100644 --- a/public/css/app/aux.styl +++ b/public/css/app/aux.styl @@ -11,42 +11,21 @@ margin: auto margin-top: 5% padding: 20px - background-color: white + background: white width: 75% - - label - display: block - margin-bottom: 5px - font-size: 13px - font-weight: bold - color: #777 + roundall(3px) input width: 100% margin-bottom: 15px - borderbox() - 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 + margin-top: 0 color: #222 padding-bottom: 10px - border-bottom: 1px solid #f8f8f8 + border-bottom: 1px solid lighten($grayOutline, 50%) diff --git a/public/css/app/forms.styl b/public/css/app/forms.styl index 654b894..0cc03ab 100644 --- a/public/css/app/forms.styl +++ b/public/css/app/forms.styl @@ -5,6 +5,7 @@ input[type=text], input[type=email], input[type=search], input[type=password], t background: white border: 1px solid $grayOutline font-size: 0.8em + color: $baseText borderbox() transition: border .2s ease-in 0 @@ -23,4 +24,29 @@ input[type=search]:focus, input[type=password]:focus, textarea:focus outline: none - border: 1px solid lighten($activeBlue, 50%) \ No newline at end of file + border: 1px solid lighten($activeBlue, 50%) + +label + display: block + margin-bottom: 5px + font-size: 13px + font-weight: bold + color: $baseText + +button, a.button + display: inline-block + text-decoration: none + text-align: center + roundall(3px) + border: none + height: 35px + padding: 0 1em + color: white + background: $activeBlue + line-height: 35px + font-size: 14px + font-weight: bold + cursor: pointer + + &:hover + background: darken($activeBlue, 30%) \ No newline at end of file diff --git a/public/css/otalk.css b/public/css/otalk.css index 7930286..973e841 100644 --- a/public/css/otalk.css +++ b/public/css/otalk.css @@ -688,51 +688,27 @@ body #menu { margin: auto; margin-top: 5%; padding: 20px; - background-color: #fff; + background: #fff; width: 75%; -} -#loginbox label { - display: block; - margin-bottom: 5px; - font-size: 13px; - font-weight: bold; - color: #777; -} -#loginbox input { - width: 100%; - margin-bottom: 15px; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} -#loginbox button, -#loginbox .andyetLogin { - text-decoration: none; - text-align: center; -moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; -o-border-radius: 3px; -border-radius: 3px; border-radius: 3px; - border: none; - height: 35px; - padding: 0 1em; - color: #fff; - background-color: #7ec6e2; - line-height: 35px; - font-size: 16px; - cursor: pointer; } -#loginbox .andyetLogin { - display: block; +#loginbox input { + width: 100%; + margin-bottom: 15px; +} +#loginbox a.button { float: right; - font-size: 14px; } #loginbox h2 { + margin-top: 0; color: #222; padding-bottom: 10px; - border-bottom: 1px solid #f8f8f8; + border-bottom: 1px solid #f2f2f2; } input[type=text], input[type=email], @@ -750,6 +726,7 @@ textarea { background: #fff; border: 1px solid #e4e4e4; font-size: 0.8em; + color: #565656; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; @@ -777,3 +754,35 @@ textarea:focus { outline: none; border: 1px solid #78daff; } +label { + display: block; + margin-bottom: 5px; + font-size: 13px; + font-weight: bold; + color: #565656; +} +button, +a.button { + display: inline-block; + text-decoration: none; + text-align: center; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + -khtml-border-radius: 3px; + -o-border-radius: 3px; + -border-radius: 3px; + border-radius: 3px; + border: none; + height: 35px; + padding: 0 1em; + color: #fff; + background: #00aeef; + line-height: 35px; + font-size: 14px; + font-weight: bold; + cursor: pointer; +} +button:hover, +a.button:hover { + background: #007aa7; +} diff --git a/views/login.jade b/views/login.jade index 1d7bbdf..a4fb247 100644 --- a/views/login.jade +++ b/views/login.jade @@ -1,21 +1,23 @@ extends layout block content - section#loginbox.content - a.andyetLogin(href="/oauth/login") have an &yet account? - h2 Log in - form - .fieldContainer - label(for='username') JID - input(type='text', id='jid', name='jid', placeholder='you@aweso.me', tabindex='1', autofocus) - .fieldContainer - label(for='password') Password - input(type='password', id='password', name='password', placeholder='•••••••••••••', tabindex='2') - .fieldContainer - label(for='wsURL') WebSocket URL - input(type='text', id='wsURL', name='wsURL', placeholder='wss://aweso.me:5281/xmpp-websocket', tabindex='3') + section#loginbox.content + h2 + | Log in + a.button(href="/oauth/login") Have an &yet account? - button(type='submit', tabindex='3') Go! + form + .fieldContainer + label(for='username') JID + input(type='text', id='jid', name='jid', placeholder='you@aweso.me', tabindex='1', autofocus) + .fieldContainer + label(for='password') Password + input(type='password', id='password', name='password', placeholder='•••••••••••••', tabindex='2') + .fieldContainer + label(for='wsURL') WebSocket URL + input(type='text', id='wsURL', name='wsURL', placeholder='wss://aweso.me:5281/xmpp-websocket', tabindex='3') + + button(type='submit', tabindex='3') Go! block scripts script(src="/js/login.js")