server/apps/comments/css/comments.css
Daniel Calviño Sánchez 107952ff00 Fix cursor for author row and avatars in comments
When it was on an author row the cursor was shown as a pointer, even if
clicking on the author row itself does nothing. On the other hand,
avatars used the default cursor, even if clicking on them either shows
the contacts menu (in the case of the author row, only when the avatar
is for a different user than the current one) or inserts a mention (for
avatars shown in the list of suggested mentions), depending on the case.

Now, the author row uses the default cursor, and avatars (and their
associated user name) use a pointer cursor if clicking on them will
trigger an action (either showing the contacts menu or inserting a
mention).

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
2017-11-26 23:56:03 +01:00

198 lines
4.2 KiB
CSS

/*
* 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;
word-wrap: break-word;
overflow-wrap: break-word;
}
#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;
}
#commentsTabView .comment .message .avatar-name-wrapper,
#commentsTabView .comment .message .avatar-name-wrapper .avatar,
#commentsTabView .comment .authorRow .avatar:not(.currentUser),
#commentsTabView .comment .authorRow .author:not(.currentUser) {
cursor: pointer;
}
.atwho-view-ul .avatar-name-wrapper,
.atwho-view-ul .avatar-name-wrapper .avatar {
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;
}