keejef
/
session-desktop
mirror of https://github.com/oxen-io/session-desktop
2
0
Fork 0
Code Issues 8 Projects Releases Wiki Activity

Cleanup colors and focus/active input states

Browse Source 
// FREEBIE
pull/749/head
lilia 9 years ago
parent 4b9f7d518e
commit 65cb7c0e9c
4 changed files with 105 additions and 24 deletions
Show Stats Download Patch File Download Diff File

2
stylesheets/_conversation.scss
Unescape Escape View File

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

18
stylesheets/_global.scss
Unescape Escape View File

@ -145,12 +145,21 @@ button.back {
}
.paperclip {
width: $button-height;
width: 36px;
height: 100%;
@include color-svg('/images/paperclip.svg', $grey);
padding: 5px 0 0;
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 {
opacity: 1.0;
@ -312,7 +321,6 @@ $avatar-size: 44px;
display: block;
margin: 0;
font-size: 1em;
font-weight: 400;
text-overflow: ellipsis;
overflow-x: hidden;
text-align: left;

49
stylesheets/_themes.scss
Unescape Escape 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 {
#header {
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;
color: $grey_d;
h1 { display: none; }
}
.gutter .content {
height: calc(100% - #{$header-height});
.gutter {
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 {
float: left;
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 {
border-radius: 5px;
width: 220px;
@ -48,7 +80,8 @@
.conversation-header {
background-color: $grey_l;
color: $grey_d;
border-color: rgba(0,0,0,0.05);
border-color: $ios-header-border-color;
text-align: left;
.conversation-title {
line-height: $header-height;
@ -64,11 +97,14 @@
.bottom-bar {
padding: 15px;
min-height: 30px;
border-top: 1px solid $ios-border-color;
form.send {
border-radius: 5px;
border: 1px solid $ios-border-color;
}
}
.control .content {
padding: 10px;
}
@ -86,7 +122,7 @@
}
}
.incoming .content {
background-color: #e5e5e5;
background-color: #e6e5ea;
color: black;
float: left;
}
@ -122,6 +158,9 @@
color: $grey_d;
}
}
.contact-details .name {
font-weight: 400;
}
.conversation.placeholder .conversation-header {
display: none;
}

60
stylesheets/manifest.css
Unescape Escape View File

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

Write Preview
Loading…
Cancel
Save