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

Conversation subscreens share a header

Browse source 
// FREEBIE
This commit is contained in:
lilia 2016-03-21 15:37:53 -07:00
parent c8aa2246dc
commit 234f937bc7
11 changed files with 128 additions and 189 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

80
background.html
View file

@ -42,40 +42,40 @@
<p> {{ content }}</p> <p> {{ content }}</p>
</script> </script>
<script type='text/x-tmpl-mustache' id='conversation'> <script type='text/x-tmpl-mustache' id='conversation'>
<div class='panel'> <div class='conversation-header'
<div class='conversation-header' style='background-color: {{ avatar.color }}'>
style='background-color: {{ avatar.color }}'> <div class='header-buttons'>
<div class='header-buttons'> <div class='vertical-align'>
<div class='vertical-align'> <button class='back hide'></button>
<div class='conversation-menu menu'> <div class='conversation-menu menu'>
<button class='hamburger'></button> <button class='hamburger'></button>
<ul class='menu-list'> <ul class='menu-list'>
{{#group}} {{#group}}
<li><a class='view-members'>{{ view-members }}</a></li> <li><a class='view-members'>{{ view-members }}</a></li>
<!-- <li><a class='update-group'>Update group</a></li> --> <!-- <li><a class='update-group'>Update group</a></li> -->
<!-- <li><a class='leave-group'>Leave group</a></li> --> <!-- <li><a class='leave-group'>Leave group</a></li> -->
{{/group}} {{/group}}
{{^group}} {{^group}}
<li><a class='end-session'>{{ end-session }}</a></li> <li><a class='end-session'>{{ end-session }}</a></li>
<li><a class='verify-identity'>{{ verify-identity }}</a></li> <li><a class='verify-identity'>{{ verify-identity }}</a></li>
{{/group}} {{/group}}
<li><a class='destroy'>{{ destroy }}</a></li> <li><a class='destroy'>{{ destroy }}</a></li>
</ul> </ul>
</div>
</div> </div>
</div> </div>
<span class='conversation-title'> </div>
{{ #name }} <span class='conversation-title'>
<span class='conversation-name'>{{ name }}</span> {{ #name }}
{{ /name }} <span class='conversation-name'>{{ name }}</span>
{{ #number }} {{ /name }}
<span class='conversation-number'>{{ number }}</span> {{ #number }}
{{ /number }} <span class='conversation-number'>{{ number }}</span>
</span> {{ /number }}
{{> avatar }} </span>
</div> {{> avatar }}
</div>
<div class='discussion-container'> <div class='main panel'>
<div class='discussion-container container'>
<div class='bar-container hide'> <div class='bar-container hide'>
<div class='bar active progress-bar-striped progress-bar'></div> <div class='bar active progress-bar-striped progress-bar'></div>
</div> </div>
@ -191,10 +191,6 @@
Sorry, your attachment has a type, {{type}}, that is not currently supported. Sorry, your attachment has a type, {{type}}, that is not currently supported.
</script> </script>
<script type='text/x-tmpl-mustache' id='message-detail'> <script type='text/x-tmpl-mustache' id='message-detail'>
<div class='conversation-header'>
<button class='back'></button>
<span class='conversation-title'>{{ title }}</span>
</div>
<div class='container'> <div class='container'>
{{ #hasRetry }} {{ #hasRetry }}
<div class='hasRetry clearfix'> <div class='hasRetry clearfix'>
@ -235,19 +231,9 @@
</div> </div>
</script> </script>
<script type='text/x-tmpl-mustache' id='group-member-list'> <script type='text/x-tmpl-mustache' id='group-member-list'>
<div class='conversation-header'> <div class='container'></div>
<button class='back'></button>
<span class='conversation-title'>{{ members }}</span>
</div>
<div class='container'>
<div class='scrollable'></div>
</div>
</script> </script>
<script type='text/x-tmpl-mustache' id='key-verification'> <script type='text/x-tmpl-mustache' id='key-verification'>
<div class='conversation-header'>
<button class='back'></button>
<span class='conversation-title'>{{ verifyIdentity }}</span>
</div>
<div class='container'> <div class='container'>
<p> {{theirIdentity}} </p> <p> {{theirIdentity}} </p>
{{ ^their_key }} {{ ^their_key }}

10
js/models/conversations.js
View file

@ -366,12 +366,10 @@
if (this.avatarUrl) { if (this.avatarUrl) {
return { url: this.avatarUrl, color: color }; return { url: this.avatarUrl, color: color };
} else if (this.isPrivate()) { } else if (this.isPrivate()) {
var content; return {
if (!title) { color: color,
content = '#'; content: title ? title.trim()[0] : '#'
} };
var content = title.trim()[0];
return { content: content, color: color };
} else { } else {
return { url: '/images/group_default.png', color: color }; return { url: '/images/group_default.png', color: color };
} }

22
js/views/conversation_view.js
View file

@ -95,7 +95,8 @@
'click .choose-file': 'focusMessageField', 'click .choose-file': 'focusMessageField',
'loadMore .message-list': 'fetchMessages', 'loadMore .message-list': 'fetchMessages',
'focus .send-message': 'focusBottomBar', 'focus .send-message': 'focusBottomBar',
'blur .send-message': 'unfocusBottomBar' 'blur .send-message': 'unfocusBottomBar',
'click .back': 'resetPanel'
}, },
unfocusBottomBar: function() { unfocusBottomBar: function() {
@ -179,13 +180,16 @@
}, },
listenBack: function(view) { listenBack: function(view) {
this.$('.panel').hide(); this.panel = view;
view.$el.prependTo(this.el); this.$('.main.panel, .menu').hide();
this.listenToOnce(view, 'back', function(e) { this.$('.back').show();
view.remove(); view.$el.insertBefore(this.$('.panel'));
this.$('.panel').show(); },
this.$el.trigger('force-resize'); resetPanel: function() {
}.bind(this)); this.panel.remove();
this.$('.main.panel, .menu').show();
this.$('.back').hide();
this.$el.trigger('force-resize');
}, },
closeMenu: function(e) { closeMenu: function(e) {
@ -283,7 +287,7 @@
$bottomBar.outerHeight( $bottomBar.outerHeight(
this.$messageField.outerHeight() + this.$messageField.outerHeight() +
$attachmentPreviews.outerHeight() + 10); $attachmentPreviews.outerHeight() + 12);
this.view.scrollToBottomIfNeeded(); this.view.scrollToBottomIfNeeded();
}, },

4
js/views/group_member_list_view.js
View file

@ -6,7 +6,7 @@
window.Whisper = window.Whisper || {}; window.Whisper = window.Whisper || {};
Whisper.GroupMemberList = Whisper.View.extend({ Whisper.GroupMemberList = Whisper.View.extend({
className: 'group-member-list', className: 'group-member-list panel',
templateName: 'group-member-list', templateName: 'group-member-list',
initialize: function() { initialize: function() {
this.render(); this.render();
@ -15,7 +15,7 @@
className: 'members' className: 'members'
}); });
this.member_list_view.render(); this.member_list_view.render();
this.$('.scrollable').append(this.member_list_view.el); this.$('.container').append(this.member_list_view.el);
}, },
render_attributes: { render_attributes: {
members: i18n('members') members: i18n('members')

2
js/views/key_verification_view.js
View file

@ -6,7 +6,7 @@
window.Whisper = window.Whisper || {}; window.Whisper = window.Whisper || {};
Whisper.KeyVerificationView = Whisper.View.extend({ Whisper.KeyVerificationView = Whisper.View.extend({
className: 'key-verification', className: 'key-verification panel',
templateName: 'key-verification', templateName: 'key-verification',
events: { events: {
'click .back': 'goBack' 'click .back': 'goBack'

2
js/views/message_detail_view.js
View file

@ -28,7 +28,7 @@
}); });
Whisper.MessageDetailView = Whisper.View.extend({ Whisper.MessageDetailView = Whisper.View.extend({
className: 'message-detail', className: 'message-detail panel',
templateName: 'message-detail', templateName: 'message-detail',
initialize: function(options) { initialize: function(options) {
this.view = new Whisper.MessageView({model: this.model}); this.view = new Whisper.MessageView({model: this.model});

35
stylesheets/_conversation.scss
View file

@ -1,6 +1,6 @@
.conversation-title { .conversation-title {
display: block; display: block;
line-height: $header-height; line-height: $button-height;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -20,11 +20,11 @@
height: 100%; height: 100%;
.panel { .panel {
height: 100%; height: calc(100% - #{$header-height});
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.discussion-container { .container {
flex-grow: 1; flex-grow: 1;
position: relative; position: relative;
@ -45,12 +45,6 @@
} }
} }
.group-member-list,
.new-group-update,
.message-detail, .key-verification {
height: 100%;
}
.key-verification { .key-verification {
background: white; background: white;
@ -67,16 +61,9 @@
.placeholder { .placeholder {
font-weight: bold; font-weight: bold;
} }
.container {
height: calc(100% - (#{$header-height} + 5px + 1px + 4px));
}
} }
.message-detail { .message-detail {
.container {
height: calc(100% - (#{$header-height} + 4px));
}
.key-conflict-dialogue, .key-conflict-dialogue,
.hasRetry { .hasRetry {
background: #F3F3A7; background: #F3F3A7;
@ -236,14 +223,8 @@
font-size: smaller; font-size: smaller;
} }
.group-member-list {
.container {
height: calc(100% - #{$header-height});
}
}
.new-group-update { .new-group-update {
.container { height: calc(100% - #{$header-height} - 85px); } .container { height: calc(100% - #{$button-height} - 85px); }
} }
.private .entry .avatar, .private .entry .avatar,
@ -264,7 +245,7 @@
margin-right: 3px; margin-right: 3px;
} }
.message-detail, .message-container,
.message-list { .message-list {
list-style: none; list-style: none;
@ -559,14 +540,10 @@
} }
} }
form, input, textarea {
height: 100%;
}
.send-message { .send-message {
display: block; display: block;
width: calc(100% - #{$button-width}); width: calc(100% - #{$button-width});
min-height: $header-height - 1px; min-height: $button-height - 1px;
max-height: 100px; max-height: 100px;
padding: 10px; padding: 10px;
border: 0; border: 0;

30
stylesheets/_global.scss
View file

@ -40,24 +40,18 @@ body {
h1 { h1 {
margin: 0; margin: 0;
line-height: 64px; line-height: $header-height;
padding-left: 20px; padding-left: 20px;
font-size: 22px; font-size: 22px;
font-weight: normal; font-weight: normal;
} }
} }
.title-text {
height: $header-height;
line-height: $header-height;
font-family: $roboto-light;
}
.conversation-header button, .conversation-header button,
.title-bar button { .title-bar button {
width: $header-height; width: $button-height;
height: $header-height; height: $button-height;
line-height: $header-height; line-height: $button-height;
padding: 0; padding: 0;
border: 0; border: 0;
outline: 0; outline: 0;
@ -65,13 +59,11 @@ body {
button { cursor: pointer; } button { cursor: pointer; }
button.back { .inactive button.back {
float: left;
background: url('/images/back.png') no-repeat center center; background: url('/images/back.png') no-repeat center center;
}
& + .title-text { button.back {
text-indent: -$header-height; background: url('/images/back_white.png') no-repeat center center;
}
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
@ -91,7 +83,7 @@ button.back {
height: 0; height: 0;
.vertical-align { .vertical-align {
height: 64px; height: $header-height;
vertical-align: middle; vertical-align: middle;
display: table-cell; display: table-cell;
} }
@ -106,8 +98,8 @@ button.back {
float: right; float: right;
.hamburger { .hamburger {
width: $header-height; width: $button-height;
height: $header-height; height: $button-height;
background: url('/images/menu.png') no-repeat center; background: url('/images/menu.png') no-repeat center;
vertical-align: middle; vertical-align: middle;

10
stylesheets/_index.scss
View file

@ -26,7 +26,7 @@
.socket-status { .socket-status {
float: right; float: right;
line-height: $header-height; line-height: $button-height;
* { * {
display: inline; display: inline;
@ -55,7 +55,7 @@
} }
.conversation-header { .conversation-header {
height: 64px; height: $header-height;
text-align: center; text-align: center;
color: white; color: white;
background-color: #999999; background-color: #999999;
@ -99,8 +99,8 @@ input.search {
button.show-new-conversation { button.show-new-conversation {
float: right; float: right;
height: $header-height; height: $button-height;
width: $header-height; width: $button-height;
border: 0; border: 0;
outline: 0; outline: 0;
font: 300 36px $roboto; font: 300 36px $roboto;
@ -113,7 +113,7 @@ input.search {
} }
input.search { input.search {
height: $header-height; height: $button-height;
width: 100%; width: 100%;
padding: 10px; padding: 10px;
border: solid 1px $grey_l; border: solid 1px $grey_l;

3
stylesheets/_variables.scss
View file

@ -29,7 +29,8 @@ $grey_d: #454545;
$roboto: Roboto, 'Helvetica Neue', Arial, Helvetica, sans-serif; $roboto: Roboto, 'Helvetica Neue', Arial, Helvetica, sans-serif;
$roboto-light: Roboto-Light, 'Helvetica Neue', Arial, Helvetica, sans-serif; $roboto-light: Roboto-Light, 'Helvetica Neue', Arial, Helvetica, sans-serif;
$header-height: 36px; $header-height: 64px;
$button-height: 36px;
$header-color: $blue; $header-color: $blue;
$bubble-border-radius: 20px; $bubble-border-radius: 20px;

119
stylesheets/manifest.css
View file

@ -51,11 +51,6 @@ body {
font-size: 22px; font-size: 22px;
font-weight: normal; } font-weight: normal; }
.title-text {
height: 36px;
line-height: 36px;
font-family: Roboto-Light, "Helvetica Neue", Arial, Helvetica, sans-serif; }
.conversation-header button, .conversation-header button,
.title-bar button { .title-bar button {
width: 36px; width: 36px;
@ -68,11 +63,11 @@ body {
button { button {
cursor: pointer; } cursor: pointer; }
button.back { .inactive button.back {
float: left;
background: url("/images/back.png") no-repeat center center; } background: url("/images/back.png") no-repeat center center; }
button.back + .title-text {
text-indent: -36px; } button.back {
background: url("/images/back_white.png") no-repeat center center; }
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 10px; } width: 10px; }
@ -642,15 +637,15 @@ input.search {
background-color: #ffffff; background-color: #ffffff;
height: 100%; } height: 100%; }
.conversation .panel { .conversation .panel {
height: 100%; height: calc(100% - 64px);
display: flex; display: flex;
flex-direction: column; } flex-direction: column; }
.conversation .panel .discussion-container { .conversation .panel .container {
flex-grow: 1; flex-grow: 1;
position: relative; } position: relative; }
.conversation .panel .discussion-container .bar-container { .conversation .panel .container .bar-container {
height: 5px; } height: 5px; }
.conversation .panel .discussion-container .message-list { .conversation .panel .container .message-list {
position: absolute; position: absolute;
top: 0; top: 0;
height: 100%; height: 100%;
@ -659,11 +654,6 @@ input.search {
padding: 2em 20px 0; padding: 2em 20px 0;
overflow-y: auto; } overflow-y: auto; }
.group-member-list,
.new-group-update,
.message-detail, .key-verification {
height: 100%; }
.key-verification { .key-verification {
background: white; } background: white; }
.key-verification p { .key-verification p {
@ -675,11 +665,7 @@ input.search {
font-family: monospace; } font-family: monospace; }
.key-verification .placeholder { .key-verification .placeholder {
font-weight: bold; } font-weight: bold; }
.key-verification .container {
height: calc(100% - (36px + 5px + 1px + 4px)); }
.message-detail .container {
height: calc(100% - (36px + 4px)); }
.message-detail .key-conflict-dialogue, .message-detail .key-conflict-dialogue,
.message-detail .hasRetry { .message-detail .hasRetry {
background: #F3F3A7; background: #F3F3A7;
@ -797,9 +783,6 @@ input.search {
.group-update { .group-update {
font-size: smaller; } font-size: smaller; }
.group-member-list .container {
height: calc(100% - 36px); }
.new-group-update .container { .new-group-update .container {
height: calc(100% - 36px - 85px); } height: calc(100% - 36px - 85px); }
@ -818,14 +801,14 @@ input.search {
font-size: smaller; font-size: smaller;
margin-right: 3px; } margin-right: 3px; }
.message-detail, .message-container,
.message-list { .message-list {
list-style: none; } list-style: none; }
.message-detail li, .message-container li,
.message-list li { .message-list li {
max-width: 800px; max-width: 800px;
margin: 0 auto 16px; } margin: 0 auto 16px; }
.message-detail li::after, .message-container li::after,
.message-list li::after { .message-list li::after {
visibility: hidden; visibility: hidden;
display: block; display: block;
@ -833,7 +816,7 @@ input.search {
content: " "; content: " ";
clear: both; clear: both;
height: 0; } height: 0; }
.message-detail .bubble, .message-container .bubble,
.message-list .bubble { .message-list .bubble {
position: relative; position: relative;
left: -2px; left: -2px;
@ -846,56 +829,56 @@ input.search {
margin-left: 8px; margin-left: 8px;
max-width: 30em; } max-width: 30em; }
@media (max-width: 899px) { @media (max-width: 899px) {
.message-detail .bubble, .message-container .bubble,
.message-list .bubble { .message-list .bubble {
max-width: calc(100% - 45px); } } max-width: calc(100% - 45px); } }
.message-detail .bubble .content, .message-container .bubble .content,
.message-list .bubble .content { .message-list .bubble .content {
-webkit-user-select: text; -webkit-user-select: text;
white-space: pre-wrap; } white-space: pre-wrap; }
.message-detail .bubble .content a, .message-container .bubble .content a,
.message-list .bubble .content a { .message-list .bubble .content a {
word-break: break-all; } word-break: break-all; }
.message-detail .bubble p, .message-container .bubble p,
.message-list .bubble p { .message-list .bubble p {
margin: 0; } margin: 0; }
.message-detail .meta, .message-container .meta,
.message-list .meta { .message-list .meta {
margin-top: 3px; margin-top: 3px;
float: right; float: right;
cursor: pointer; } cursor: pointer; }
.message-detail .meta .timestamp, .message-detail .meta .status, .message-container .meta .timestamp, .message-container .meta .status,
.message-list .meta .timestamp, .message-list .meta .timestamp,
.message-list .meta .status { .message-list .meta .status {
opacity: 0.5; } opacity: 0.5; }
.message-detail .meta:hover .timestamp, .message-detail .meta:hover .status, .message-container .meta:hover .timestamp, .message-container .meta:hover .status,
.message-list .meta:hover .timestamp, .message-list .meta:hover .timestamp,
.message-list .meta:hover .status { .message-list .meta:hover .status {
opacity: 1.0; } opacity: 1.0; }
.message-detail .meta:hover .timestamp, .message-container .meta:hover .timestamp,
.message-list .meta:hover .timestamp { .message-list .meta:hover .timestamp {
text-decoration: underline; } text-decoration: underline; }
.message-detail .status, .message-container .status,
.message-list .status { .message-list .status {
float: right; float: right;
width: 18px; width: 18px;
height: 1em; } height: 1em; }
.message-detail .sent .status, .message-container .sent .status,
.message-list .sent .status { .message-list .sent .status {
display: inline-block; display: inline-block;
background: url("/images/check-white.png"); } background: url("/images/check-white.png"); }
.message-detail .delivered .status, .message-container .delivered .status,
.message-list .delivered .status { .message-list .delivered .status {
display: inline-block; display: inline-block;
background: url("/images/double-check-white.png"); } background: url("/images/double-check-white.png"); }
.message-detail .pending .status, .message-container .pending .status,
.message-list .pending .status { .message-list .pending .status {
display: inline-block; display: inline-block;
background: none; } background: none; }
.message-detail .pending .status:before, .message-container .pending .status:before,
.message-list .pending .status:before { .message-list .pending .status:before {
content: '...'; } content: '...'; }
.message-detail .error .status, .message-container .error .status,
.message-list .error .status { .message-list .error .status {
position: relative; position: relative;
display: inline-block; display: inline-block;
@ -904,102 +887,102 @@ input.search {
opacity: 1 !important; opacity: 1 !important;
background: url("/images/error_red.png") no-repeat; background: url("/images/error_red.png") no-repeat;
cursor: pointer; } cursor: pointer; }
.message-detail .incoming .avatar, .message-detail .incoming .bubble, .message-container .incoming .avatar, .message-container .incoming .bubble,
.message-list .incoming .avatar, .message-list .incoming .avatar,
.message-list .incoming .bubble { .message-list .incoming .bubble {
float: left; } float: left; }
.message-detail .incoming .bubble, .message-container .incoming .bubble,
.message-list .incoming .bubble { .message-list .incoming .bubble {
color: #454545; color: #454545;
background-color: #f3f3f3; } background-color: #f3f3f3; }
.message-detail .incoming .bubble::before, .message-container .incoming .bubble::before,
.message-list .incoming .bubble::before { .message-list .incoming .bubble::before {
left: -10px; left: -10px;
border-right: 10px solid white; } border-right: 10px solid white; }
.message-detail .incoming .bubble::after, .message-container .incoming .bubble::after,
.message-list .incoming .bubble::after { .message-list .incoming .bubble::after {
left: -8px; left: -8px;
border-right: 8px solid #f3f3f3; } border-right: 8px solid #f3f3f3; }
.message-detail .outgoing .avatar, .message-detail .outgoing .bubble, .message-container .outgoing .avatar, .message-container .outgoing .bubble,
.message-list .outgoing .avatar, .message-list .outgoing .avatar,
.message-list .outgoing .bubble { .message-list .outgoing .bubble {
float: right; } float: right; }
.message-detail .outgoing .bubble, .message-container .outgoing .bubble,
.message-list .outgoing .bubble { .message-list .outgoing .bubble {
clear: left; clear: left;
color: white; color: white;
background-color: #2090ea; } background-color: #2090ea; }
.message-detail .outgoing .bubble .meta, .message-container .outgoing .bubble .meta,
.message-list .outgoing .bubble .meta { .message-list .outgoing .bubble .meta {
color: white; } color: white; }
.message-detail .outgoing .bubble::before, .message-container .outgoing .bubble::before,
.message-list .outgoing .bubble::before { .message-list .outgoing .bubble::before {
right: -10px; right: -10px;
border-left: 10px solid white; } border-left: 10px solid white; }
.message-detail .outgoing .bubble::after, .message-container .outgoing .bubble::after,
.message-list .outgoing .bubble::after { .message-list .outgoing .bubble::after {
right: -8px; right: -8px;
border-left: 8px solid #2090ea; } border-left: 8px solid #2090ea; }
.message-detail .outgoing .bubble .attachments a, .message-detail .outgoing .bubble .content a, .message-container .outgoing .bubble .attachments a, .message-container .outgoing .bubble .content a,
.message-list .outgoing .bubble .attachments a, .message-list .outgoing .bubble .attachments a,
.message-list .outgoing .bubble .content a { .message-list .outgoing .bubble .content a {
color: #f3f3f3; } color: #f3f3f3; }
.message-detail .outgoing .bubble .content::selection, .message-detail .outgoing .bubble .content a::selection, .message-container .outgoing .bubble .content::selection, .message-container .outgoing .bubble .content a::selection,
.message-list .outgoing .bubble .content::selection, .message-list .outgoing .bubble .content::selection,
.message-list .outgoing .bubble .content a::selection { .message-list .outgoing .bubble .content a::selection {
color: #454545; color: #454545;
background: white; } background: white; }
.message-detail .outgoing .bubble .content::-moz-selection, .message-detail .outgoing .bubble .content a::-moz-selection, .message-container .outgoing .bubble .content::-moz-selection, .message-container .outgoing .bubble .content a::-moz-selection,
.message-list .outgoing .bubble .content::-moz-selection, .message-list .outgoing .bubble .content::-moz-selection,
.message-list .outgoing .bubble .content a::-moz-selection { .message-list .outgoing .bubble .content a::-moz-selection {
color: #454545; color: #454545;
background: white; } background: white; }
.message-detail .control .bubble .content, .message-container .control .bubble .content,
.message-list .control .bubble .content { .message-list .control .bubble .content {
font-style: italic; } font-style: italic; }
.message-detail .control .bubble::before, .message-detail .control .bubble::after, .message-container .control .bubble::before, .message-container .control .bubble::after,
.message-list .control .bubble::before, .message-list .control .bubble::before,
.message-list .control .bubble::after { .message-list .control .bubble::after {
display: none; } display: none; }
.message-detail .attachments a, .message-container .attachments a,
.message-list .attachments a { .message-list .attachments a {
font-style: italic; font-style: italic;
display: block; display: block;
padding: 1em; padding: 1em;
background-color: #ccc; } background-color: #ccc; }
.message-detail .attachments img, .message-detail .attachments audio, .message-detail .attachments video, .message-container .attachments img, .message-container .attachments audio, .message-container .attachments video,
.message-list .attachments img, .message-list .attachments img,
.message-list .attachments audio, .message-list .attachments audio,
.message-list .attachments video { .message-list .attachments video {
max-width: 100%; max-width: 100%;
max-height: 300px; } max-height: 300px; }
.message-detail .attachments video, .message-container .attachments video,
.message-list .attachments video { .message-list .attachments video {
background: black; background: black;
min-height: 300px; } min-height: 300px; }
.message-detail .attachments img, .message-container .attachments img,
.message-list .attachments img { .message-list .attachments img {
cursor: pointer; } cursor: pointer; }
.message-detail .outgoing .avatar, .message-container .outgoing .avatar,
.message-list .outgoing .avatar { .message-list .outgoing .avatar {
display: none; } display: none; }
.message-detail .avatar, .message-container .avatar,
.message-list .avatar { .message-list .avatar {
height: 36px; height: 36px;
width: 36px; width: 36px;
line-height: 36px; } line-height: 36px; }
.message-detail .end-session, .message-container .end-session,
.message-list .end-session { .message-list .end-session {
font: small; font: small;
font-style: italic; font-style: italic;
opacity: 0.8; } opacity: 0.8; }
.message-detail .bubble .error-message, .message-container .bubble .error-message,
.message-list .bubble .error-message { .message-list .bubble .error-message {
font-style: italic; } font-style: italic; }
.message-detail .key-conflict, .message-container .key-conflict,
.message-list .key-conflict { .message-list .key-conflict {
padding: 15px 10px; } padding: 15px 10px; }
.message-detail .key-conflict button, .message-container .key-conflict button,
.message-list .key-conflict button { .message-list .key-conflict button {
margin-top: 5px; } margin-top: 5px; }
@ -1050,8 +1033,6 @@ input.search {
cursor: pointer; } cursor: pointer; }
.bottom-bar .send-btn::before { .bottom-bar .send-btn::before {
content: '+'; } content: '+'; }
.bottom-bar form, .bottom-bar input, .bottom-bar textarea {
height: 100%; }
.bottom-bar .send-message { .bottom-bar .send-message {
display: block; display: block;
width: calc(100% - 36px); width: calc(100% - 36px);