diff options
Diffstat (limited to 'apps/comments/src/style/comments.scss')
| -rw-r--r-- | apps/comments/src/style/comments.scss | 261 |
1 files changed, 261 insertions, 0 deletions
diff --git a/apps/comments/src/style/comments.scss b/apps/comments/src/style/comments.scss new file mode 100644 index 00000000000..665051cf065 --- /dev/null +++ b/apps/comments/src/style/comments.scss @@ -0,0 +1,261 @@ +/* + * 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 { + margin-left: 36px; + position: relative; +} + +#commentsTabView .newCommentForm .message { + width: 100%; + padding: 10px; + min-height: 44px; + margin: 0; + + /* Prevent the text from overlapping with the submit button. */ + padding-right: 30px; +} + +#commentsTabView .newCommentForm { + .submit, + .submitLoading { + width: 44px; + height: 44px; + margin: 0; + padding: 13px; + background-color: transparent; + border: none; + opacity: .3; + position: absolute; + bottom: 0; + right: 0; + } +} + +#commentsTabView .deleteLoading { + padding: 14px; + vertical-align: middle; +} + +#commentsTabView .newCommentForm .submit:not(:disabled):hover, +#commentsTabView .newCommentForm .submit:not(:disabled):focus { + opacity: 1; +} + +#commentsTabView .newCommentForm div.message { + resize: none; +} + +#commentsTabView .newCommentForm div.message:empty:before { + content: attr(data-placeholder); + color: grey; +} + +#commentsTabView .comment { + position: relative; + /** padding bottom is little more so that the top and bottom gap look uniform **/ + padding: 10px 0 15px; +} + +#commentsTabView .comments .comment { + border-top: 1px solid var(--color-border); +} + +#commentsTabView .comment .avatar, +.atwho-view-ul * .avatar{ + width: 32px; + height: 32px; + line-height: 32px; + margin-right: 5px; +} + +#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(var(--color-main-background), 0), var(--color-main-background)); + background: -webkit-linear-gradient(rgba(var(--color-main-background), 0), var(--color-main-background)); + background: -o-linear-gradient(rgba(var(--color-main-background), 0), var(--color-main-background)); + background: -ms-linear-gradient(rgba(var(--color-main-background), 0), var(--color-main-background)); + background: linear-gradient(rgba(var(--color-main-background), 0), var(--color-main-background)); + background-repeat: no-repeat; +} + +#commentsTabView .hidden { + display: none !important; +} + +/** set min-height as 44px to ensure that it fits the button sizes. **/ +#commentsTabView .comment .authorRow { + min-height: 44px; +} +#commentsTabView .comment .authorRow .tooltip { + /** because of the padding on the element, the tooltip appear too far up, + adding this brings them closer to the element**/ + margin-top: 5px; +} + +.atwho-view-ul * .avatar-name-wrapper, +#commentsTabView .comment .authorRow { + position: relative; + display: inline-flex; + align-items: center; + width: 100%; +} + +#commentsTabView .comment:not(.newCommentRow) .message .avatar-name-wrapper:not(.currentUser), +#commentsTabView .comment:not(.newCommentRow) .message .avatar-name-wrapper:not(.currentUser) .avatar, +#commentsTabView .comment:not(.newCommentRow) .message .avatar-name-wrapper:not(.currentUser) .avatar img, +#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, +.atwho-view-ul .avatar-name-wrapper .avatar img { + cursor: pointer; +} + +#commentsTabView .comments li .message .atwho-inserted, +#commentsTabView .newCommentForm .atwho-inserted { + .avatar-name-wrapper { + /* Make the wrapper the positioning context of its child contacts + * menu. */ + position: relative; + + display: inline; + vertical-align: top; + background-color: var(--color-background-dark); + border-radius: 50vh; + padding: 1px 7px 1px 1px; + + /* Ensure that the avatar and the user name will be kept together. */ + white-space: nowrap; + + .avatar { + img { + vertical-align: top; + } + height: 16px; + width: 16px; + vertical-align: middle; + padding: 1px; + margin-top: -3px; + margin-left: 0; + margin-right: 2px; + } + strong { + /* Ensure that the user name is shown in bold, as different browsers + * use different font weights for strong elements. */ + font-weight: bold; + } + } + .avatar-name-wrapper.currentUser { + background-color: var(--color-primary); + color: var(--color-primary-text); + } +} + +.atwho-view-ul * .avatar-name-wrapper { + white-space: nowrap; +} +#commentsTabView .comment .author, +#commentsTabView .comment .date { + opacity: .5; +} +#commentsTabView .comment .author { + max-width: 210px; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; +} +#commentsTabView .comment .date { + margin-left: auto; + /** this is to fix the tooltip being too close due to the margin-top applied + to bring the tooltip closer for the action icons **/ + padding: 10px 0px; +} + +#commentsTabView .comments > li:not(.newCommentRow) .message { + padding-left: 40px; + word-wrap: break-word; + overflow-wrap: break-word; +} + +#commentsTabView .comment .action { + opacity: 0.3; + padding: 14px; + display: block; +} + +#commentsTabView .comment .action:hover, +#commentsTabView .comment .action:focus { + opacity: 1; +} + +#commentsTabView .newCommentRow .action-container { + margin-left: auto; +} + +#commentsTabView .comment.disabled .message { + opacity: 0.3; +} + +#commentsTabView .comment.disabled .action { + display: none; +} + +#commentsTabView .message.error { + color: #e9322d; + border-color: #e9322d; + box-shadow: 0 0 6px #f8b9b7; +} + +.app-files .action-comment { + padding: 16px 14px; +} + +#commentsTabView .comment .message .contactsmenu-popover { + left: -6px; + top: 24px; +} |