From 4c2b2ce7df390bec4af633be53ac9bc65cc9cc9d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Calvi=C3=B1o=20S=C3=A1nchez?= Date: Tue, 3 Oct 2017 12:19:49 +0200 Subject: Add chat view to sidebar tab MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The CSS was copied from the Comments app. Signed-off-by: Daniel Calviño Sánchez --- css/comments.css | 185 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 185 insertions(+) create mode 100644 css/comments.css (limited to 'css/comments.css') diff --git a/css/comments.css b/css/comments.css new file mode 100644 index 000000000..09771b4e9 --- /dev/null +++ b/css/comments.css @@ -0,0 +1,185 @@ +/* + * Copyright (c) 2016 + * + * This file is licensed under the Affero General Public License version 3 + * or later. + * + * See the COPYING-README file. + * + */ + +#commentsTabView .emptycontent { + margin-top: 0; +} + +#commentsTabView .newCommentForm { + position: relative; + margin-bottom: 20px; +} + +#commentsTabView .newCommentForm .message { + width: calc(100% - 81px); /* 36 (left margin) + 30 (right padding) + 15 (right padding of surrounding box) */ + margin-left: 36px; + padding-right: 30px; + display: block; +} + +#commentsTabView .newCommentForm .submit { + position: absolute; + bottom: 0px; + right: 8px; + width: 30px; + margin: 0; + padding: 7px 9px; + background-color: transparent; + border: none; + opacity: .3; +} +#commentsTabView .newCommentForm .submit:hover, +#commentsTabView .newCommentForm .submit:focus { + opacity: 1; +} + +#commentsTabView .newCommentForm .submitLoading { + background-position: left; +} + +#commentsTabView .newCommentForm .cancel { + margin-right: 6px; +} + +#commentsTabView .newCommentForm div.message { + resize: none; +} + +#commentsTabView .newCommentForm div.message:empty:before { + content: attr(data-placeholder); + color: grey; +} + +#commentsTabView .comment { + position: relative; + margin-bottom: 30px; +} + +#commentsTabView .comment .avatar, +.atwho-view-ul * .avatar{ + width: 32px; + height: 32px; + line-height: 32px; +} + +#commentsTabView .comment .message .avatar, +.atwho-view-ul * .avatar +{ + display: inline-block; +} + +#activityTabView li.comment.collapsed .activitymessage, +#commentsTabView .comment.collapsed .message { + white-space: pre-wrap; +} + +#activityTabView li.comment.collapsed .activitymessage, +#commentsTabView .comment.collapsed .message { + max-height: 70px; + overflow: hidden; +} + +#activityTabView li.comment .message-overlay, +#commentsTabView .comment .message-overlay { + display: none; +} + +#activityTabView li.comment.collapsed .message-overlay, +#commentsTabView .comment.collapsed .message-overlay { + display: block; + position: absolute; + z-index: 2; + height: 50px; + pointer-events: none; + left: 0; + right: 0; + bottom: 0; + background: -moz-linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1)); + background: -webkit-linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1)); + background: -o-linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1)); + background: -ms-linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1)); + background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1)); + filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#00FFFFFF', endColorstr='#FFFFFFFF'); + background-repeat: no-repeat; +} + +#commentsTabView .authorRow>div { + display: inline-block; + vertical-align: middle; +} + +#commentsTabView .authorRow>div.hidden { + display: none !important; +} + +#commentsTabView .comments li .message .avatar-name-wrapper, +.atwho-view-ul * .avatar-name-wrapper, +#commentsTabView .comment .authorRow { + position: relative; + cursor: pointer; +} + +.atwho-view-ul * .avatar-name-wrapper { + white-space: nowrap; +} + +#commentsTabView .comment .author, +#commentsTabView .comment .date { + opacity: .5; +} +#commentsTabView .comment .author { + margin-left: 5px; +} +#commentsTabView .comment .date { + position: absolute; + right: 0; + top: 5px; +} + +#commentsTabView .comments li .message { + padding-left: 40px; +} + +#commentsTabView .comment .action { + opacity: 0; + vertical-align: middle; + display: inline-block; +} + +#commentsTabView .comment:hover .action { + opacity: 0.3; +} + +#commentsTabView .comment .action:hover { + opacity: 1; +} + +#commentsTabView .comment .action.delete { + position: absolute; + right: 0; +} + +#commentsTabView .comment.disabled { + opacity: 0.3; +} + +#commentsTabView .comment.disabled .action { + visibility: hidden; +} + +#commentsTabView .message.error { + color: #e9322d; + border-color: #e9322d; + box-shadow: 0 0 6px #f8b9b7; +} + +.app-files .action-comment { + padding: 16px 14px; +} -- cgit v1.2.3