thegamer/Cable-Desktop
2
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Cleanup colors and focus/active input states

Browse source 
// FREEBIE
This commit is contained in:
lilia 2016-08-31 14:45:23 -07:00
parent 4b9f7d518e
commit 65cb7c0e9c
4 changed files with 104 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
stylesheets/_conversation.scss
View file

@ -4,7 +4,7 @@
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
padding: 0 36px; padding: 0 46px;
-webkit-user-select: text; -webkit-user-select: text;
} }
.conversation-name + .conversation-number { .conversation-name + .conversation-number {

16
stylesheets/_global.scss
View file

@ -145,12 +145,21 @@ button.back {
} }
.paperclip { .paperclip {
width: $button-height; width: 36px;
height: 100%; height: 100%;
@include color-svg('/images/paperclip.svg', $grey); padding: 5px 0 0;
opacity: 0.5; opacity: 0.5;
transform: rotateZ(-45deg); border: none;
background: transparent;
&:before {
content: '';
display: inline-block;
width: $button-height;
height: $button-height;
@include color-svg('/images/paperclip.svg', $grey);
transform: rotateZ(-45deg);
}
&:focus, &:hover { &:focus, &:hover {
opacity: 1.0; opacity: 1.0;
@ -312,7 +321,6 @@ $avatar-size: 44px;
display: block; display: block;
margin: 0; margin: 0;
font-size: 1em; font-size: 1em;
font-weight: 400;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow-x: hidden; overflow-x: hidden;
text-align: left; text-align: left;

49
stylesheets/_themes.scss
View file

@ -22,21 +22,53 @@
} }
} }
$ios-header-border-color: rgba(0,0,0,0.05);
$ios-border-color: rgba(0,0,0,0.1);
.ios { .ios {
#header { #header {
height: $header-height; height: $header-height;
border-bottom: 1px solid rgba(0,0,0,0.05); border-bottom: 1px solid $ios-header-border-color;
border-width: 0 1px 1px 0;
background-color: $grey_l; background-color: $grey_l;
color: $grey_d; color: $grey_d;
h1 { display: none; } h1 { display: none; }
} }
.gutter .content { .gutter {
height: calc(100% - #{$header-height}); border-right: 1px solid $ios-border-color;
.content {
height: calc(100% - #{$header-height});
background: $ios-border-color;
}
.contact {
background: $grey_l;
margin-right: 0;
&.selected {
background: $blue;
color: white;
.last-timestamp {
color: white;
}
}
}
::-webkit-scrollbar-track {
background: $grey_l;
}
} }
.tool-bar { .tool-bar {
float: left; float: left;
padding: 15px; padding: 15px;
} }
input[type=text]:active,
input[type=text]:focus,
input[type=search]:active,
input[type=search]:focus,
input[type=search].active,
form.active {
outline-offset: 0;
outline: -webkit-focus-ring-color auto 5px;
}
input.search { input.search {
border-radius: 5px; border-radius: 5px;
width: 220px; width: 220px;
@ -48,7 +80,8 @@
.conversation-header { .conversation-header {
background-color: $grey_l; background-color: $grey_l;
color: $grey_d; color: $grey_d;
border-color: rgba(0,0,0,0.05); border-color: $ios-header-border-color;
text-align: left;
.conversation-title { .conversation-title {
line-height: $header-height; line-height: $header-height;
@ -64,11 +97,14 @@
.bottom-bar { .bottom-bar {
padding: 15px; padding: 15px;
min-height: 30px; min-height: 30px;
border-top: 1px solid $ios-border-color;
form.send { form.send {
border-radius: 5px; border-radius: 5px;
border: 1px solid $ios-border-color;
} }
} }
.control .content { .control .content {
padding: 10px; padding: 10px;
} }
@ -86,7 +122,7 @@
} }
} }
.incoming .content { .incoming .content {
background-color: #e5e5e5; background-color: #e6e5ea;
color: black; color: black;
float: left; float: left;
} }
@ -122,6 +158,9 @@
color: $grey_d; color: $grey_d;
} }
} }
.contact-details .name {
font-weight: 400;
}
.conversation.placeholder .conversation-header { .conversation.placeholder .conversation-header {
display: none; display: none;
} }

60
stylesheets/manifest.css
View file

@ -149,13 +149,21 @@ button.back {
cursor: pointer; cursor: pointer;
padding-left: 10px; } padding-left: 10px; }
.file-input .paperclip { .file-input .paperclip {
width: 24px; width: 36px;
height: 100%; height: 100%;
-webkit-mask: url("/images/paperclip.svg") no-repeat center; padding: 5px 0 0;
-webkit-mask-size: 100%;
background-color: #616161;
opacity: 0.5; opacity: 0.5;
transform: rotateZ(-45deg); } border: none;
background: transparent; }
.file-input .paperclip:before {
content: '';
display: inline-block;
width: 24px;
height: 24px;
-webkit-mask: url("/images/paperclip.svg") no-repeat center;
-webkit-mask-size: 100%;
background-color: #616161;
transform: rotateZ(-45deg); }
.file-input .paperclip:focus, .file-input .paperclip:hover { .file-input .paperclip:focus, .file-input .paperclip:hover {
opacity: 1.0; } opacity: 1.0; }
.file-input input[type=file] { .file-input input[type=file] {
@ -313,7 +321,6 @@ img.emoji {
display: block; display: block;
margin: 0; margin: 0;
font-size: 1em; font-size: 1em;
font-weight: 400;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow-x: hidden; overflow-x: hidden;
text-align: left; } text-align: left; }
@ -873,7 +880,7 @@ input.search {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
padding: 0 36px; padding: 0 46px;
-webkit-user-select: text; } -webkit-user-select: text; }
.conversation-name + .conversation-number:before { .conversation-name + .conversation-number:before {
@ -1305,15 +1312,37 @@ li.entry .error-icon-container {
.ios #header { .ios #header {
height: 64px; height: 64px;
border-bottom: 1px solid rgba(0, 0, 0, 0.05); border-bottom: 1px solid rgba(0, 0, 0, 0.05);
border-width: 0 1px 1px 0;
background-color: #f3f3f3; background-color: #f3f3f3;
color: #454545; } color: #454545; }
.ios #header h1 { .ios #header h1 {
display: none; } display: none; }
.ios .gutter .content { .ios .gutter {
height: calc(100% - 64px); } border-right: 1px solid rgba(0, 0, 0, 0.1); }
.ios .gutter .content {
height: calc(100% - 64px);
background: rgba(0, 0, 0, 0.1); }
.ios .gutter .contact {
background: #f3f3f3;
margin-right: 0; }
.ios .gutter .contact.selected {
background: #2090ea;
color: white; }
.ios .gutter .contact.selected .last-timestamp {
color: white; }
.ios .gutter ::-webkit-scrollbar-track {
background: #f3f3f3; }
.ios .tool-bar { .ios .tool-bar {
float: left; float: left;
padding: 15px; } padding: 15px; }
.ios input[type=text]:active,
.ios input[type=text]:focus,
.ios input[type=search]:active,
.ios input[type=search]:focus,
.ios input[type=search].active,
.ios form.active {
outline-offset: 0;
outline: -webkit-focus-ring-color auto 5px; }
.ios input.search { .ios input.search {
border-radius: 5px; border-radius: 5px;
width: 220px; width: 220px;
@ -1324,7 +1353,8 @@ li.entry .error-icon-container {
.ios .conversation-header { .ios .conversation-header {
background-color: #f3f3f3; background-color: #f3f3f3;
color: #454545; color: #454545;
border-color: rgba(0, 0, 0, 0.05); } border-color: rgba(0, 0, 0, 0.05);
text-align: left; }
.ios .conversation-header .conversation-title { .ios .conversation-header .conversation-title {
line-height: 64px; } line-height: 64px; }
.ios .conversation-header .avatar { .ios .conversation-header .avatar {
@ -1347,9 +1377,11 @@ li.entry .error-icon-container {
background-color: black; } background-color: black; }
.ios .bottom-bar { .ios .bottom-bar {
padding: 15px; padding: 15px;
min-height: 30px; } min-height: 30px;
border-top: 1px solid rgba(0, 0, 0, 0.1); }
.ios .bottom-bar form.send { .ios .bottom-bar form.send {
border-radius: 5px; } border-radius: 5px;
border: 1px solid rgba(0, 0, 0, 0.1); }
.ios .control .content { .ios .control .content {
padding: 10px; } padding: 10px; }
.ios .bubble .content .body { .ios .bubble .content .body {
@ -1361,7 +1393,7 @@ li.entry .error-icon-container {
float: none; float: none;
clear: both; } clear: both; }
.ios .incoming .content { .ios .incoming .content {
background-color: #e5e5e5; background-color: #e6e5ea;
color: black; color: black;
float: left; } float: left; }
.ios .outgoing .content { .ios .outgoing .content {
@ -1393,6 +1425,8 @@ li.entry .error-icon-container {
.android #header.inactive { .android #header.inactive {
background-color: #f3f3f3; background-color: #f3f3f3;
color: #454545; } color: #454545; }
.android .contact-details .name {
font-weight: 400; }
.android .conversation.placeholder .conversation-header { .android .conversation.placeholder .conversation-header {
display: none; } display: none; }
.android .conversation-header.red, .android .bubble.red { .android .conversation-header.red, .android .bubble.red {