moparisthebest/kaiwa
1
0
Fork 0
mirror of https://github.com/moparisthebest/kaiwa synced 2025-01-14 07:08:06 -05:00
Code Issues Releases Wiki Activity

[ux] start porting colors

Browse Source
This commit is contained in:
karolinaszczur 2013-10-23 19:57:46 +02:00
parent bdfd344f45
commit db2372f128
10 changed files with 110 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
public/css/_variables.styl
View File

@ -1,16 +1,47 @@
// colors // Blues
$activeBlue = #00aeef $blue-saturated-darker = #0B1316
$actionPink = #ec008c $blue-saturated-dark = #0f2034
$blue-saturated = #192a47
$blue-saturated-light = #34465a
$blue-saturated-lighter = #6c7f95
$sidebarBg = #0b1316 $blue = #12acef
$sidebarActive = #1f2d49 $blue-light = lighten($blue, 50%)
$blue-lighter = lighten($blue, 90%)
$baseText = #565656 // Monochromatic
$textSecondary = #b7b7b7
$grayBackground = #f7f7f7 $gray-dark = #2d2d2d
$grayOutline = #e4e4e4 $gray = #565656
$gray-light = #878787
$gray-lighter = #eeeeee
// Pinks
$pink = #ec008c
$pink-light = #f8bee0
$pink-lighter = #fce8f1
// Greens
$green = #43bb6e
$green-light = lighten($green, 70%)
$green-lighter = lighten($green, 94%)
// Reds
$red = #de0a32
$red-light = lighten($red, 80%)
$red-lighter = lighten($red, 97%)
// Orange
$orange = #f18902
$orange-light = lighten($orange, 50%)
$orange-lighter = lighten($orange, 85%)
// Font families
$font-family-gotham = 'Gotham SSm A', 'Gotham SSm B', Helvetica, Arial, sans-serif $font-family-gotham = 'Gotham SSm A', 'Gotham SSm B', Helvetica, Arial, sans-serif

4
public/css/app/aux.styl
View File

@ -1,5 +1,5 @@
.aux .aux
background: $grayBackground background: lighten($gray-light, 93%)
header header
margin-top: 8% margin-top: 8%
@ -33,7 +33,7 @@
.head .head
margin-bottom: 20px margin-bottom: 20px
border-bottom: 1px solid lighten($grayOutline, 50%) border-bottom: 1px solid lighten($gray-lighter, 50%)
input input
width: 100% width: 100%

8
public/css/app/callbar.styl
View File

@ -29,20 +29,20 @@ $callHeight = 80px
margin: 0 margin: 0
&.incoming &.incoming
background: $activeBlue background: $blue
.callTime .callTime
display: none display: none
.callerName:before .callerName:before
content: "Incoming Call: " content: "Incoming Call: "
&.waiting &.waiting
background: $activeBlue background: $blue
.spinner div .spinner div
background-color: #fff background-color: #fff
&.calling &.calling
background: $activeBlue background: $blue
.callTime .callTime
display: none display: none
.callerName:before .callerName:before
@ -56,7 +56,7 @@ $callHeight = 80px
&.ending &.ending
.callerName:before .callerName:before
content: "Call ending with: " content: "Call ending with: "
background: $grayBackground background: lighten($gray-light, 93%)
.callActions .callActions
position: absolute position: absolute

26
public/css/app/chat.styl
View File

@ -16,13 +16,13 @@
header header
padding: 5px padding: 5px
border-bottom: 2px solid $grayOutline border-bottom: 2px solid $gray-lighter
position: fixed position: fixed
right: 0px right: 0px
left: 201px left: 201px
z-index: 10 z-index: 10
borderbox() borderbox()
background: $grayBackground background: lighten($gray-light, 93%)
.avatar .avatar
margin-right: 5px margin-right: 5px
@ -55,8 +55,8 @@
font-size: $font-size-smaller font-size: $font-size-smaller
font-weight: $font-weight-bold font-weight: $font-weight-bold
line-height: 20px line-height: 20px
color: lighten($baseText, 30%) color: lighten($gray, 30%)
background: $grayOutline background: $gray-lighter
.call .call
margin-top: 10px margin-top: 10px
@ -76,14 +76,14 @@
top: 60px top: 60px
left: 10px left: 10px
height: 50% height: 50%
border: 2px solid $grayOutline border: 2px solid $gray-lighter
.local .local
position: absolute position: absolute
bottom: 10px bottom: 10px
right: 10px right: 10px
height: 20% height: 20%
border: 2px solid $grayOutline border: 2px solid $gray-lighter
transform(scaleX(-1)) transform(scaleX(-1))
.buttons .buttons
@ -120,7 +120,7 @@
min-height: 50px min-height: 50px
display: table display: table
borderbox() borderbox()
border-bottom: 1px solid $grayOutline border-bottom: 1px solid $gray-lighter
&:last-of-type &:last-of-type
border: none border: none
@ -154,13 +154,13 @@
borderbox() borderbox()
&:not(.mine) &:not(.mine)
color: $activeBlue color: $blue
&.mine &.mine
background: white background: white
.timestamp .timestamp
color: darken($grayOutline, 20%) color: darken($gray-lighter, 20%)
&.delayed &.delayed
.timestamp:before .timestamp:before
@ -171,7 +171,7 @@
content: 'edited ' content: 'edited '
&.pending &.pending
color: lighten($baseText, 50%) color: lighten($gray, 50%)
.body .body
display: inline display: inline
@ -180,7 +180,7 @@
.timestamp .timestamp
font-size: $font-size-smaller font-size: $font-size-smaller
font-weight: $font-weight-bold font-weight: $font-weight-bold
color: lighten($activeBlue, 50%) color: lighten($blue, 50%)
float: right float: right
display: block display: block
@ -189,7 +189,7 @@
.chatBox .chatBox
borderbox() borderbox()
border-top: 1px solid $grayOutline border-top: 1px solid $gray-lighter
bottom: 0px bottom: 0px
position: fixed position: fixed
right: 0px right: 0px
@ -197,7 +197,7 @@
z-index: 200 z-index: 200
form form
background: $grayBackground background: lighten($gray-light, 93%)
padding: 11px padding: 11px
.formwrap .formwrap

12
public/css/app/forms.styl
View File

@ -5,9 +5,9 @@ input[type=text], input[type=email], input[type=search], input[type=password], t
roundall(3px) roundall(3px)
padding: 0 10px padding: 0 10px
background-color: white background-color: white
border: 1px solid $grayOutline border: 1px solid $gray-lighter
font-size: $font-size-small font-size: $font-size-small
color: $baseText color: $gray
borderbox() borderbox()
font-family: $font-family-gotham font-family: $font-family-gotham
-webkit-font-smoothing: antialiased -webkit-font-smoothing: antialiased
@ -30,14 +30,14 @@ input[type=password]:focus,
textarea:focus, textarea:focus,
.main .status:focus .main .status:focus
outline: none outline: none
border: 1px solid lighten($activeBlue, 50%) border: 1px solid lighten($blue, 50%)
label label
display: block display: block
margin-bottom: 5px margin-bottom: 5px
font-size: 13px font-size: 13px
font-weight: $font-weight-bold font-weight: $font-weight-bold
color: $baseText color: $gray
a.button a.button
line-height: 35px line-height: 35px
@ -51,7 +51,7 @@ button, a.button
min-width: 80px min-width: 80px
padding: 0 1em padding: 0 1em
color: white color: white
background: $activeBlue background: $blue
font-size: $font-size-small font-size: $font-size-small
font-weight: $font-weight-bold font-weight: $font-weight-bold
text-decoration: none text-decoration: none
@ -62,7 +62,7 @@ button, a.button
outline: none outline: none
&:hover &:hover
background: darken($activeBlue, 30%) background: darken($blue, 30%)
.installFirefox, .addContact .installFirefox, .addContact
margin-left: 5px margin-left: 5px

4
public/css/app/layout.styl
View File

@ -3,14 +3,14 @@
body body
background: white background: white
color: $baseText color: $gray
font-family: $font-family-gotham font-family: $font-family-gotham
font-size: $font-size-base font-size: $font-size-base
font-weight: 400 font-weight: 400
-webkit-font-smoothing: antialiased -webkit-font-smoothing: antialiased
h1, h2, h3, h4 h1, h2, h3, h4
color: darken($baseText, 30%) color: darken($gray, 30%)
h3 h3
margin-top: 0 margin-top: 0

20
public/css/app/roster.styl
View File

@ -7,7 +7,7 @@
bottom: 0px bottom: 0px
left: 0px left: 0px
width: 200px width: 200px
background-color: $sidebarBg background-color: $blue-saturated-darker
z-index: 300 z-index: 300
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
@ -36,10 +36,10 @@
width: 150px width: 150px
.button .button
background: $sidebarActive background: $blue-saturated
&:hover &:hover
background: lighten($sidebarActive, 10%) background: $blue-saturated-light
h1 h1
font-size: $font-size-small font-size: $font-size-small
@ -106,10 +106,10 @@
&.offline:not(:hover) &.offline:not(:hover)
.name .name
color: darken($textSecondary, 40%) color: darken($gray-light, 40%)
.status .status
color: darken($textSecondary, 65%) color: darken($gray-light, 65%)
img img
opacity: .25 opacity: .25
@ -119,7 +119,7 @@
font-weight: $font-weight-bold font-weight: $font-weight-bold
.name .name
color: $baseText color: $gray
&.composing &.composing
&:after &:after
@ -129,12 +129,12 @@
&.paused &.paused
&:after &:after
background: $textSecondary background: $gray-light
&.idle &.idle
padding-right: 15px padding-right: 15px
.name .name
color: $textSecondary color: $gray-light
max-width: 60% max-width: 60%
.user .user
@ -164,7 +164,7 @@
overflow: hidden overflow: hidden
.status .status
color: $textSecondary color: $gray-light
font-size: $font-size-smaller font-size: $font-size-smaller
font-weight: 400 font-weight: 400
line-height: 12px line-height: 12px
@ -189,7 +189,7 @@
display: inline-block display: inline-block
margin-left: 5px margin-left: 5px
font-size: $font-size-small font-size: $font-size-small
color: darken($textSecondary, 50%) color: darken($gray-light, 50%)
#bookmarks #bookmarks

6
public/css/app/settings.styl
View File

@ -3,7 +3,7 @@
.main > div .main > div
padding: 20px padding: 20px
border-bottom: 1px solid $grayOutline border-bottom: 1px solid $gray-lighter
.status .status
padding: 10px padding: 10px
@ -16,8 +16,8 @@
font-size: $font-size-small font-size: $font-size-small
roundall(3px) roundall(3px)
margin: 10px 0 margin: 10px 0
color: $textSecondary color: $gray-light
background: $grayBackground background: lighten($gray-light, 93%)
p p
margin: 0 margin: 0

58
public/css/otalk.css
View File

@ -272,10 +272,10 @@ h3 {
width: 150px; width: 150px;
} }
#menu .main li .button { #menu .main li .button {
background: #1f2d49; background: #192a47;
} }
#menu .main li .button:hover { #menu .main li .button:hover {
background: #2b3f65; background: #34465a;
} }
#menu h1 { #menu h1 {
font-size: 12px; font-size: 12px;
@ -318,7 +318,7 @@ h3 {
} }
#roster li:hover, #roster li:hover,
#bookmarks li:hover { #bookmarks li:hover {
background: #1f2d49; background: $sidebarActive;
} }
#roster li.online:not(.idle):after, #roster li.online:not(.idle):after,
#bookmarks li.online:not(.idle):after, #bookmarks li.online:not(.idle):after,
@ -362,11 +362,11 @@ h3 {
} }
#roster li.offline:not(:hover) .name, #roster li.offline:not(:hover) .name,
#bookmarks li.offline:not(:hover) .name { #bookmarks li.offline:not(:hover) .name {
color: #6e6e6e; color: #515151;
} }
#roster li.offline:not(:hover) .status, #roster li.offline:not(:hover) .status,
#bookmarks li.offline:not(:hover) .status { #bookmarks li.offline:not(:hover) .status {
color: #404040; color: #2f2f2f;
} }
#roster li.offline:not(:hover) img, #roster li.offline:not(:hover) img,
#bookmarks li.offline:not(:hover) img { #bookmarks li.offline:not(:hover) img {
@ -393,7 +393,7 @@ h3 {
} }
#roster li.paused:after, #roster li.paused:after,
#bookmarks li.paused:after { #bookmarks li.paused:after {
background: #b7b7b7; background: #878787;
} }
#roster li.idle, #roster li.idle,
#bookmarks li.idle { #bookmarks li.idle {
@ -401,7 +401,7 @@ h3 {
} }
#roster li.idle .name, #roster li.idle .name,
#bookmarks li.idle .name { #bookmarks li.idle .name {
color: #b7b7b7; color: #878787;
max-width: 60%; max-width: 60%;
} }
#roster li.idle .user, #roster li.idle .user,
@ -449,7 +449,7 @@ h3 {
} }
#roster li .status, #roster li .status,
#bookmarks li .status { #bookmarks li .status {
color: #b7b7b7; color: #878787;
font-size: 10px; font-size: 10px;
font-weight: 400; font-weight: 400;
line-height: 12px; line-height: 12px;
@ -481,7 +481,7 @@ h3 {
display: inline-block; display: inline-block;
margin-left: 5px; margin-left: 5px;
font-size: 12px; font-size: 12px;
color: #5c5c5c; color: #444;
} }
#bookmarks .name { #bookmarks .name {
padding: 5px 10px 5px 40px; padding: 5px 10px 5px 40px;
@ -570,7 +570,7 @@ h3 {
} }
.conversation header { .conversation header {
padding: 5px; padding: 5px;
border-bottom: 2px solid #e4e4e4; border-bottom: 2px solid #eee;
position: fixed; position: fixed;
right: 0px; right: 0px;
left: 201px; left: 201px;
@ -625,7 +625,7 @@ h3 {
font-weight: 800; font-weight: 800;
line-height: 20px; line-height: 20px;
color: #898989; color: #898989;
background: #e4e4e4; background: #eee;
} }
.conversation header .call { .conversation header .call {
margin-top: 10px; margin-top: 10px;
@ -648,14 +648,14 @@ h3 {
top: 60px; top: 60px;
left: 10px; left: 10px;
height: 50%; height: 50%;
border: 2px solid #e4e4e4; border: 2px solid #eee;
} }
.conversation header .activeCall .local { .conversation header .activeCall .local {
position: absolute; position: absolute;
bottom: 10px; bottom: 10px;
right: 10px; right: 10px;
height: 20%; height: 20%;
border: 2px solid #e4e4e4; border: 2px solid #eee;
-webkit-transform: scaleX(-1); -webkit-transform: scaleX(-1);
-moz-transform: scaleX(-1); -moz-transform: scaleX(-1);
-ms-transform: scaleX(-1); -ms-transform: scaleX(-1);
@ -696,7 +696,7 @@ h3 {
-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-bottom: 1px solid #e4e4e4; border-bottom: 1px solid #eee;
} }
.messages li:last-of-type { .messages li:last-of-type {
border: none; border: none;
@ -739,13 +739,13 @@ h3 {
box-sizing: border-box; box-sizing: border-box;
} }
.messages .message:not(.mine) { .messages .message:not(.mine) {
color: #00aeef; color: #12acef;
} }
.messages .message.mine { .messages .message.mine {
background: #fff; background: #fff;
} }
.messages .message.mine .timestamp { .messages .message.mine .timestamp {
color: #b6b6b6; color: #bebebe;
} }
.messages .message.delayed .timestamp:before { .messages .message.delayed .timestamp:before {
content: '@ '; content: '@ ';
@ -763,7 +763,7 @@ h3 {
.messages .message .timestamp { .messages .message .timestamp {
font-size: 10px; font-size: 10px;
font-weight: 800; font-weight: 800;
color: #78daff; color: #88d5f7;
float: right; float: right;
display: block; display: block;
} }
@ -774,7 +774,7 @@ h3 {
-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 #e4e4e4; border-top: 1px solid #eee;
bottom: 0px; bottom: 0px;
position: fixed; position: fixed;
right: 0px; right: 0px;
@ -808,7 +808,7 @@ h3 {
} }
.main > div { .main > div {
padding: 20px; padding: 20px;
border-bottom: 1px solid #e4e4e4; border-bottom: 1px solid #eee;
} }
.main > div .status { .main > div .status {
padding: 10px; padding: 10px;
@ -826,7 +826,7 @@ h3 {
-border-radius: 3px; -border-radius: 3px;
border-radius: 3px; border-radius: 3px;
margin: 10px 0; margin: 10px 0;
color: #b7b7b7; color: #878787;
background: #f7f7f7; background: #f7f7f7;
} }
.uploadRegion p { .uploadRegion p {
@ -883,7 +883,7 @@ h3 {
} }
.box .head { .box .head {
margin-bottom: 20px; margin-bottom: 20px;
border-bottom: 1px solid #f2f2f2; border-bottom: 1px solid #f7f7f7;
} }
.box input { .box input {
width: 100%; width: 100%;
@ -919,7 +919,7 @@ textarea,
border-radius: 3px; border-radius: 3px;
padding: 0 10px; padding: 0 10px;
background-color: #fff; background-color: #fff;
border: 1px solid #e4e4e4; border: 1px solid #eee;
font-size: 12px; font-size: 12px;
color: #565656; color: #565656;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
@ -952,7 +952,7 @@ input[type=password]:focus,
textarea:focus, textarea:focus,
.main .status:focus { .main .status:focus {
outline: none; outline: none;
border: 1px solid #78daff; border: 1px solid #88d5f7;
} }
label { label {
display: block; display: block;
@ -978,7 +978,7 @@ a.button {
min-width: 80px; min-width: 80px;
padding: 0 1em; padding: 0 1em;
color: #fff; color: #fff;
background: #00aeef; background: #12acef;
font-size: 12px; font-size: 12px;
font-weight: 800; font-weight: 800;
text-decoration: none; text-decoration: none;
@ -991,7 +991,7 @@ a.button:focus {
} }
button:hover, button:hover,
a.button:hover { a.button:hover {
background: #007aa7; background: #0b79a9;
} }
.installFirefox, .installFirefox,
.addContact { .addContact {
@ -1030,7 +1030,7 @@ a.button:hover {
margin: 0; margin: 0;
} }
#calls .call.incoming { #calls .call.incoming {
background: #00aeef; background: #12acef;
} }
#calls .call.incoming .callTime { #calls .call.incoming .callTime {
display: none; display: none;
@ -1039,13 +1039,13 @@ a.button:hover {
content: "Incoming Call: "; content: "Incoming Call: ";
} }
#calls .call.waiting { #calls .call.waiting {
background: #00aeef; background: #12acef;
} }
#calls .call.waiting .spinner div { #calls .call.waiting .spinner div {
background-color: #fff; background-color: #fff;
} }
#calls .call.calling { #calls .call.calling {
background: #00aeef; background: #12acef;
} }
#calls .call.calling .callTime { #calls .call.calling .callTime {
display: none; display: none;
@ -1054,7 +1054,7 @@ a.button:hover {
content: "Calling: "; content: "Calling: ";
} }
#calls .call.accepted { #calls .call.accepted {
background: #1f2d49; background: $sidebarActive;
} }
#calls .call.accepted .callerName:before { #calls .call.accepted .callerName:before {
content: "On Call: "; content: "On Call: ";

2
public/x-manifest.cache
View File

@ -1,5 +1,5 @@
CACHE MANIFEST CACHE MANIFEST
# 0.0.1 1382540896499 # 0.0.1 1382550861581
CACHE: CACHE:
/app.js /app.js