mirror of
https://github.com/moparisthebest/kaiwa
synced 2025-01-13 22:58:01 -05:00
[ux] start porting colors
This commit is contained in:
karolinaszczur
parent
bdfd344f45
commit
db2372f128
@ -1,16 +1,47 @@
|
||||
// colors
|
||||
// Blues
|
||||
|
||||
$activeBlue = #00aeef
|
||||
$actionPink = #ec008c
|
||||
$blue-saturated-darker = #0B1316
|
||||
$blue-saturated-dark = #0f2034
|
||||
$blue-saturated = #192a47
|
||||
$blue-saturated-light = #34465a
|
||||
$blue-saturated-lighter = #6c7f95
|
||||
|
||||
$sidebarBg = #0b1316
|
||||
$sidebarActive = #1f2d49
|
||||
$blue = #12acef
|
||||
$blue-light = lighten($blue, 50%)
|
||||
$blue-lighter = lighten($blue, 90%)
|
||||
|
||||
$baseText = #565656
|
||||
$textSecondary = #b7b7b7
|
||||
// Monochromatic
|
||||
|
||||
$grayBackground = #f7f7f7
|
||||
$grayOutline = #e4e4e4
|
||||
$gray-dark = #2d2d2d
|
||||
$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
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
.aux
|
||||
background: $grayBackground
|
||||
background: lighten($gray-light, 93%)
|
||||
|
||||
header
|
||||
margin-top: 8%
|
||||
@ -33,7 +33,7 @@
|
||||
|
||||
.head
|
||||
margin-bottom: 20px
|
||||
border-bottom: 1px solid lighten($grayOutline, 50%)
|
||||
border-bottom: 1px solid lighten($gray-lighter, 50%)
|
||||
|
||||
input
|
||||
width: 100%
|
||||
|
||||
@ -29,20 +29,20 @@ $callHeight = 80px
|
||||
margin: 0
|
||||
|
||||
&.incoming
|
||||
background: $activeBlue
|
||||
background: $blue
|
||||
.callTime
|
||||
display: none
|
||||
.callerName:before
|
||||
content: "Incoming Call: "
|
||||
|
||||
&.waiting
|
||||
background: $activeBlue
|
||||
background: $blue
|
||||
|
||||
.spinner div
|
||||
background-color: #fff
|
||||
|
||||
&.calling
|
||||
background: $activeBlue
|
||||
background: $blue
|
||||
.callTime
|
||||
display: none
|
||||
.callerName:before
|
||||
@ -56,7 +56,7 @@ $callHeight = 80px
|
||||
&.ending
|
||||
.callerName:before
|
||||
content: "Call ending with: "
|
||||
background: $grayBackground
|
||||
background: lighten($gray-light, 93%)
|
||||
|
||||
.callActions
|
||||
position: absolute
|
||||
|
||||
@ -16,13 +16,13 @@
|
||||
|
||||
header
|
||||
padding: 5px
|
||||
border-bottom: 2px solid $grayOutline
|
||||
border-bottom: 2px solid $gray-lighter
|
||||
position: fixed
|
||||
right: 0px
|
||||
left: 201px
|
||||
z-index: 10
|
||||
borderbox()
|
||||
background: $grayBackground
|
||||
background: lighten($gray-light, 93%)
|
||||
|
||||
.avatar
|
||||
margin-right: 5px
|
||||
@ -55,8 +55,8 @@
|
||||
font-size: $font-size-smaller
|
||||
font-weight: $font-weight-bold
|
||||
line-height: 20px
|
||||
color: lighten($baseText, 30%)
|
||||
background: $grayOutline
|
||||
color: lighten($gray, 30%)
|
||||
background: $gray-lighter
|
||||
|
||||
.call
|
||||
margin-top: 10px
|
||||
@ -76,14 +76,14 @@
|
||||
top: 60px
|
||||
left: 10px
|
||||
height: 50%
|
||||
border: 2px solid $grayOutline
|
||||
border: 2px solid $gray-lighter
|
||||
|
||||
.local
|
||||
position: absolute
|
||||
bottom: 10px
|
||||
right: 10px
|
||||
height: 20%
|
||||
border: 2px solid $grayOutline
|
||||
border: 2px solid $gray-lighter
|
||||
transform(scaleX(-1))
|
||||
|
||||
.buttons
|
||||
@ -120,7 +120,7 @@
|
||||
min-height: 50px
|
||||
display: table
|
||||
borderbox()
|
||||
border-bottom: 1px solid $grayOutline
|
||||
border-bottom: 1px solid $gray-lighter
|
||||
|
||||
&:last-of-type
|
||||
border: none
|
||||
@ -154,13 +154,13 @@
|
||||
borderbox()
|
||||
|
||||
&:not(.mine)
|
||||
color: $activeBlue
|
||||
color: $blue
|
||||
|
||||
&.mine
|
||||
background: white
|
||||
|
||||
.timestamp
|
||||
color: darken($grayOutline, 20%)
|
||||
color: darken($gray-lighter, 20%)
|
||||
|
||||
&.delayed
|
||||
.timestamp:before
|
||||
@ -171,7 +171,7 @@
|
||||
content: 'edited '
|
||||
|
||||
&.pending
|
||||
color: lighten($baseText, 50%)
|
||||
color: lighten($gray, 50%)
|
||||
|
||||
.body
|
||||
display: inline
|
||||
@ -180,7 +180,7 @@
|
||||
.timestamp
|
||||
font-size: $font-size-smaller
|
||||
font-weight: $font-weight-bold
|
||||
color: lighten($activeBlue, 50%)
|
||||
color: lighten($blue, 50%)
|
||||
float: right
|
||||
display: block
|
||||
|
||||
@ -189,7 +189,7 @@
|
||||
|
||||
.chatBox
|
||||
borderbox()
|
||||
border-top: 1px solid $grayOutline
|
||||
border-top: 1px solid $gray-lighter
|
||||
bottom: 0px
|
||||
position: fixed
|
||||
right: 0px
|
||||
@ -197,7 +197,7 @@
|
||||
z-index: 200
|
||||
|
||||
form
|
||||
background: $grayBackground
|
||||
background: lighten($gray-light, 93%)
|
||||
padding: 11px
|
||||
|
||||
.formwrap
|
||||
|
||||
@ -5,9 +5,9 @@ input[type=text], input[type=email], input[type=search], input[type=password], t
|
||||
roundall(3px)
|
||||
padding: 0 10px
|
||||
background-color: white
|
||||
border: 1px solid $grayOutline
|
||||
border: 1px solid $gray-lighter
|
||||
font-size: $font-size-small
|
||||
color: $baseText
|
||||
color: $gray
|
||||
borderbox()
|
||||
font-family: $font-family-gotham
|
||||
-webkit-font-smoothing: antialiased
|
||||
@ -30,14 +30,14 @@ input[type=password]:focus,
|
||||
textarea:focus,
|
||||
.main .status:focus
|
||||
outline: none
|
||||
border: 1px solid lighten($activeBlue, 50%)
|
||||
border: 1px solid lighten($blue, 50%)
|
||||
|
||||
label
|
||||
display: block
|
||||
margin-bottom: 5px
|
||||
font-size: 13px
|
||||
font-weight: $font-weight-bold
|
||||
color: $baseText
|
||||
color: $gray
|
||||
|
||||
a.button
|
||||
line-height: 35px
|
||||
@ -51,7 +51,7 @@ button, a.button
|
||||
min-width: 80px
|
||||
padding: 0 1em
|
||||
color: white
|
||||
background: $activeBlue
|
||||
background: $blue
|
||||
font-size: $font-size-small
|
||||
font-weight: $font-weight-bold
|
||||
text-decoration: none
|
||||
@ -62,7 +62,7 @@ button, a.button
|
||||
outline: none
|
||||
|
||||
&:hover
|
||||
background: darken($activeBlue, 30%)
|
||||
background: darken($blue, 30%)
|
||||
|
||||
.installFirefox, .addContact
|
||||
margin-left: 5px
|
||||
@ -3,14 +3,14 @@
|
||||
|
||||
body
|
||||
background: white
|
||||
color: $baseText
|
||||
color: $gray
|
||||
font-family: $font-family-gotham
|
||||
font-size: $font-size-base
|
||||
font-weight: 400
|
||||
-webkit-font-smoothing: antialiased
|
||||
|
||||
h1, h2, h3, h4
|
||||
color: darken($baseText, 30%)
|
||||
color: darken($gray, 30%)
|
||||
|
||||
h3
|
||||
margin-top: 0
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
bottom: 0px
|
||||
left: 0px
|
||||
width: 200px
|
||||
background-color: $sidebarBg
|
||||
background-color: $blue-saturated-darker
|
||||
z-index: 300
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
@ -36,10 +36,10 @@
|
||||
width: 150px
|
||||
|
||||
.button
|
||||
background: $sidebarActive
|
||||
background: $blue-saturated
|
||||
|
||||
&:hover
|
||||
background: lighten($sidebarActive, 10%)
|
||||
background: $blue-saturated-light
|
||||
|
||||
h1
|
||||
font-size: $font-size-small
|
||||
@ -106,10 +106,10 @@
|
||||
|
||||
&.offline:not(:hover)
|
||||
.name
|
||||
color: darken($textSecondary, 40%)
|
||||
color: darken($gray-light, 40%)
|
||||
|
||||
.status
|
||||
color: darken($textSecondary, 65%)
|
||||
color: darken($gray-light, 65%)
|
||||
|
||||
img
|
||||
opacity: .25
|
||||
@ -119,7 +119,7 @@
|
||||
font-weight: $font-weight-bold
|
||||
|
||||
.name
|
||||
color: $baseText
|
||||
color: $gray
|
||||
|
||||
&.composing
|
||||
&:after
|
||||
@ -129,12 +129,12 @@
|
||||
|
||||
&.paused
|
||||
&:after
|
||||
background: $textSecondary
|
||||
background: $gray-light
|
||||
|
||||
&.idle
|
||||
padding-right: 15px
|
||||
.name
|
||||
color: $textSecondary
|
||||
color: $gray-light
|
||||
max-width: 60%
|
||||
|
||||
.user
|
||||
@ -164,7 +164,7 @@
|
||||
overflow: hidden
|
||||
|
||||
.status
|
||||
color: $textSecondary
|
||||
color: $gray-light
|
||||
font-size: $font-size-smaller
|
||||
font-weight: 400
|
||||
line-height: 12px
|
||||
@ -189,7 +189,7 @@
|
||||
display: inline-block
|
||||
margin-left: 5px
|
||||
font-size: $font-size-small
|
||||
color: darken($textSecondary, 50%)
|
||||
color: darken($gray-light, 50%)
|
||||
|
||||
#bookmarks
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
|
||||
.main > div
|
||||
padding: 20px
|
||||
border-bottom: 1px solid $grayOutline
|
||||
border-bottom: 1px solid $gray-lighter
|
||||
|
||||
.status
|
||||
padding: 10px
|
||||
@ -16,8 +16,8 @@
|
||||
font-size: $font-size-small
|
||||
roundall(3px)
|
||||
margin: 10px 0
|
||||
color: $textSecondary
|
||||
background: $grayBackground
|
||||
color: $gray-light
|
||||
background: lighten($gray-light, 93%)
|
||||
|
||||
p
|
||||
margin: 0
|
||||
|
||||
@ -272,10 +272,10 @@ h3 {
|
||||
width: 150px;
|
||||
}
|
||||
#menu .main li .button {
|
||||
background: #1f2d49;
|
||||
background: #192a47;
|
||||
}
|
||||
#menu .main li .button:hover {
|
||||
background: #2b3f65;
|
||||
background: #34465a;
|
||||
}
|
||||
#menu h1 {
|
||||
font-size: 12px;
|
||||
@ -318,7 +318,7 @@ h3 {
|
||||
}
|
||||
#roster li:hover,
|
||||
#bookmarks li:hover {
|
||||
background: #1f2d49;
|
||||
background: $sidebarActive;
|
||||
}
|
||||
#roster li.online:not(.idle):after,
|
||||
#bookmarks li.online:not(.idle):after,
|
||||
@ -362,11 +362,11 @@ h3 {
|
||||
}
|
||||
#roster li.offline:not(:hover) .name,
|
||||
#bookmarks li.offline:not(:hover) .name {
|
||||
color: #6e6e6e;
|
||||
color: #515151;
|
||||
}
|
||||
#roster li.offline:not(:hover) .status,
|
||||
#bookmarks li.offline:not(:hover) .status {
|
||||
color: #404040;
|
||||
color: #2f2f2f;
|
||||
}
|
||||
#roster li.offline:not(:hover) img,
|
||||
#bookmarks li.offline:not(:hover) img {
|
||||
@ -393,7 +393,7 @@ h3 {
|
||||
}
|
||||
#roster li.paused:after,
|
||||
#bookmarks li.paused:after {
|
||||
background: #b7b7b7;
|
||||
background: #878787;
|
||||
}
|
||||
#roster li.idle,
|
||||
#bookmarks li.idle {
|
||||
@ -401,7 +401,7 @@ h3 {
|
||||
}
|
||||
#roster li.idle .name,
|
||||
#bookmarks li.idle .name {
|
||||
color: #b7b7b7;
|
||||
color: #878787;
|
||||
max-width: 60%;
|
||||
}
|
||||
#roster li.idle .user,
|
||||
@ -449,7 +449,7 @@ h3 {
|
||||
}
|
||||
#roster li .status,
|
||||
#bookmarks li .status {
|
||||
color: #b7b7b7;
|
||||
color: #878787;
|
||||
font-size: 10px;
|
||||
font-weight: 400;
|
||||
line-height: 12px;
|
||||
@ -481,7 +481,7 @@ h3 {
|
||||
display: inline-block;
|
||||
margin-left: 5px;
|
||||
font-size: 12px;
|
||||
color: #5c5c5c;
|
||||
color: #444;
|
||||
}
|
||||
#bookmarks .name {
|
||||
padding: 5px 10px 5px 40px;
|
||||
@ -570,7 +570,7 @@ h3 {
|
||||
}
|
||||
.conversation header {
|
||||
padding: 5px;
|
||||
border-bottom: 2px solid #e4e4e4;
|
||||
border-bottom: 2px solid #eee;
|
||||
position: fixed;
|
||||
right: 0px;
|
||||
left: 201px;
|
||||
@ -625,7 +625,7 @@ h3 {
|
||||
font-weight: 800;
|
||||
line-height: 20px;
|
||||
color: #898989;
|
||||
background: #e4e4e4;
|
||||
background: #eee;
|
||||
}
|
||||
.conversation header .call {
|
||||
margin-top: 10px;
|
||||
@ -648,14 +648,14 @@ h3 {
|
||||
top: 60px;
|
||||
left: 10px;
|
||||
height: 50%;
|
||||
border: 2px solid #e4e4e4;
|
||||
border: 2px solid #eee;
|
||||
}
|
||||
.conversation header .activeCall .local {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
height: 20%;
|
||||
border: 2px solid #e4e4e4;
|
||||
border: 2px solid #eee;
|
||||
-webkit-transform: scaleX(-1);
|
||||
-moz-transform: scaleX(-1);
|
||||
-ms-transform: scaleX(-1);
|
||||
@ -696,7 +696,7 @@ h3 {
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid #e4e4e4;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.messages li:last-of-type {
|
||||
border: none;
|
||||
@ -739,13 +739,13 @@ h3 {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.messages .message:not(.mine) {
|
||||
color: #00aeef;
|
||||
color: #12acef;
|
||||
}
|
||||
.messages .message.mine {
|
||||
background: #fff;
|
||||
}
|
||||
.messages .message.mine .timestamp {
|
||||
color: #b6b6b6;
|
||||
color: #bebebe;
|
||||
}
|
||||
.messages .message.delayed .timestamp:before {
|
||||
content: '@ ';
|
||||
@ -763,7 +763,7 @@ h3 {
|
||||
.messages .message .timestamp {
|
||||
font-size: 10px;
|
||||
font-weight: 800;
|
||||
color: #78daff;
|
||||
color: #88d5f7;
|
||||
float: right;
|
||||
display: block;
|
||||
}
|
||||
@ -774,7 +774,7 @@ h3 {
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
border-top: 1px solid #e4e4e4;
|
||||
border-top: 1px solid #eee;
|
||||
bottom: 0px;
|
||||
position: fixed;
|
||||
right: 0px;
|
||||
@ -808,7 +808,7 @@ h3 {
|
||||
}
|
||||
.main > div {
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid #e4e4e4;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.main > div .status {
|
||||
padding: 10px;
|
||||
@ -826,7 +826,7 @@ h3 {
|
||||
-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
margin: 10px 0;
|
||||
color: #b7b7b7;
|
||||
color: #878787;
|
||||
background: #f7f7f7;
|
||||
}
|
||||
.uploadRegion p {
|
||||
@ -883,7 +883,7 @@ h3 {
|
||||
}
|
||||
.box .head {
|
||||
margin-bottom: 20px;
|
||||
border-bottom: 1px solid #f2f2f2;
|
||||
border-bottom: 1px solid #f7f7f7;
|
||||
}
|
||||
.box input {
|
||||
width: 100%;
|
||||
@ -919,7 +919,7 @@ textarea,
|
||||
border-radius: 3px;
|
||||
padding: 0 10px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #e4e4e4;
|
||||
border: 1px solid #eee;
|
||||
font-size: 12px;
|
||||
color: #565656;
|
||||
-moz-box-sizing: border-box;
|
||||
@ -952,7 +952,7 @@ input[type=password]:focus,
|
||||
textarea:focus,
|
||||
.main .status:focus {
|
||||
outline: none;
|
||||
border: 1px solid #78daff;
|
||||
border: 1px solid #88d5f7;
|
||||
}
|
||||
label {
|
||||
display: block;
|
||||
@ -978,7 +978,7 @@ a.button {
|
||||
min-width: 80px;
|
||||
padding: 0 1em;
|
||||
color: #fff;
|
||||
background: #00aeef;
|
||||
background: #12acef;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
text-decoration: none;
|
||||
@ -991,7 +991,7 @@ a.button:focus {
|
||||
}
|
||||
button:hover,
|
||||
a.button:hover {
|
||||
background: #007aa7;
|
||||
background: #0b79a9;
|
||||
}
|
||||
.installFirefox,
|
||||
.addContact {
|
||||
@ -1030,7 +1030,7 @@ a.button:hover {
|
||||
margin: 0;
|
||||
}
|
||||
#calls .call.incoming {
|
||||
background: #00aeef;
|
||||
background: #12acef;
|
||||
}
|
||||
#calls .call.incoming .callTime {
|
||||
display: none;
|
||||
@ -1039,13 +1039,13 @@ a.button:hover {
|
||||
content: "Incoming Call: ";
|
||||
}
|
||||
#calls .call.waiting {
|
||||
background: #00aeef;
|
||||
background: #12acef;
|
||||
}
|
||||
#calls .call.waiting .spinner div {
|
||||
background-color: #fff;
|
||||
}
|
||||
#calls .call.calling {
|
||||
background: #00aeef;
|
||||
background: #12acef;
|
||||
}
|
||||
#calls .call.calling .callTime {
|
||||
display: none;
|
||||
@ -1054,7 +1054,7 @@ a.button:hover {
|
||||
content: "Calling: ";
|
||||
}
|
||||
#calls .call.accepted {
|
||||
background: #1f2d49;
|
||||
background: $sidebarActive;
|
||||
}
|
||||
#calls .call.accepted .callerName:before {
|
||||
content: "On Call: ";
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
CACHE MANIFEST
|
||||
# 0.0.1 1382540896499
|
||||
# 0.0.1 1382550861581
|
||||
|
||||
CACHE:
|
||||
/app.js
|
||||
|
||||
Loading…
Reference in New Issue
Block a user