overleaf/services/web/frontend/stylesheets/app/editor/review-panel.less
Alexandre Bourdin 57cd6b4754 Merge pull request #3843 from overleaf/ab-comment-linebreak
Add CSS property to display line-breaks in review comments

GitOrigin-RevId: aa499556c0c50d042450e0421a55d51c9a097a29
2021-03-31 02:05:01 +00:00

1149 lines
22 KiB
Text

@rp-base-font-size: 12px;
@rp-small-font-size: 10px;
@rp-icon-large-size: 18px;
@rp-bg-blue: #dadfed;
@rp-bg-dim-blue: #fafafa;
@rp-highlight-blue: #8a96b5;
@rp-border-grey: #d9d9d9;
@rp-green: #2c8e30;
@rp-green-on-dark: rgba(37, 107, 41, 0.5);
@rp-red: #c5060b;
@rp-yellow: #f3b111;
@rp-yellow-on-dark: rgba(194, 93, 11, 0.5);
@rp-grey: #aaaaaa;
@rp-type-blue: #6b7797;
@rp-type-darkgrey: #3f3f3f;
@rp-entry-ribbon-width: 4px;
@rp-entry-arrow-width: 6px;
@rp-semibold-weight: 600;
@review-panel-width: 230px;
@review-off-width: 22px;
@rp-toolbar-height: 32px;
@rp-entry-animation-speed: 0.3s;
.rp-button() {
display: block; // IE doesn't do flex with inline items.
background-color: @rp-highlight-blue;
color: #fff;
text-align: center;
line-height: 1.3;
user-select: none;
border: 0;
&:hover,
&:focus {
outline: 0;
background-color: darken(@rp-highlight-blue, 5%);
text-decoration: none;
color: #fff;
}
&[disabled] {
background-color: tint(@rp-highlight-blue, 50%);
&:hover,
&:focus {
background-color: tint(@rp-highlight-blue, 50%);
}
}
}
.rp-collapse-arrow() {
display: inline-block;
transform: rotateZ(0deg);
transition: transform 0.15s ease;
&-on {
transform: rotateZ(-90deg);
}
}
#review-panel {
display: block;
.rp-size-expanded & {
display: flex;
flex-direction: column;
width: @review-panel-width;
overflow: visible;
border-left-width: 1px;
}
.rp-size-mini & {
width: @review-off-width;
z-index: 6;
border-left-width: 1px;
}
position: absolute;
top: 32px;
bottom: 0px;
right: 0px;
background-color: @rp-bg-blue;
border-left: solid 0px @rp-border-grey;
font-size: @rp-base-font-size;
color: @rp-type-blue;
z-index: 6;
}
.loading-panel {
.rp-size-expanded & {
right: @review-panel-width;
}
}
.review-panel-toolbar {
display: none;
.rp-size-expanded & {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 5px;
}
.rp-unsupported & {
display: none;
}
position: relative;
border-bottom: 1px solid @rp-border-grey;
background-color: @rp-bg-dim-blue;
text-align: center;
z-index: 3;
flex-basis: 32px;
flex-shrink: 0;
}
.review-panel-toolbar-label {
cursor: pointer;
text-align: right;
flex-grow: 1;
}
.review-panel-toolbar-icon-on {
margin-right: 5px;
color: @red;
}
.review-panel-toolbar-label-disabled {
cursor: auto;
margin-right: 5px;
}
.review-panel-toolbar-spinner {
margin-left: 5px;
}
.rp-tc-state {
position: absolute;
top: 100%;
left: 0;
right: 0;
overflow: hidden;
list-style: none;
padding: 0 5px;
margin: 0;
border-bottom: 1px solid @rp-border-grey;
background-color: @rp-bg-dim-blue;
text-align: left;
}
.rp-tc-state-collapse {
.rp-collapse-arrow;
margin-left: 5px;
}
.rp-tc-state-item {
display: flex;
align-items: center;
padding: 3px 0;
&:last-of-type {
padding-bottom: 5px;
}
}
.rp-tc-state-separator {
border-bottom: 1px solid @rp-border-grey;
}
.rp-tc-state-item-everyone {
border-bottom: 1px solid @rp-border-grey;
color: @red;
}
.rp-tc-state-item-name {
flex-grow: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: @rp-semibold-weight;
}
.rp-tc-state-item-name-disabled {
opacity: 0.35;
}
.rp-tc-state-item-guests {
color: @blue;
}
.rp-entry-list {
display: none;
width: 100%;
.rp-size-expanded &,
.rp-size-mini & {
display: block;
}
.rp-unsupported & {
display: none;
}
.rp-state-current-file & {
position: absolute;
top: 0;
bottom: 0;
padding-bottom: 52px;
}
.rp-state-overview & {
flex-grow: 2;
overflow-y: auto;
}
}
.rp-entry-list-inner {
position: relative;
}
.rp-entry-indicator {
display: none;
.rp-size-mini & {
display: block;
}
.rp-size-mini &-add-comment {
display: none;
}
position: absolute;
left: 2px;
right: 2px;
text-align: center;
background-color: @rp-highlight-blue;
border-radius: 3px;
color: #fff;
cursor: pointer;
transition: top @rp-entry-animation-speed, left 0.1s, right 0.1s;
.no-animate & {
transition: none;
}
&-focused {
left: 0px;
right: 4px;
z-index: 1;
}
}
.rp-entry-wrapper {
&:hover .rp-entry-insert,
&:hover .rp-entry-delete,
&:hover .rp-entry-aggregate,
&:hover .rp-entry-comment {
display: block;
}
}
.rp-entry {
.rp-state-current-file & {
position: absolute;
width: @review-panel-width;
}
.rp-state-current-file-mini & {
display: none;
left: @review-off-width + @rp-entry-arrow-width;
box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.2);
z-index: 1;
&::before {
content: '';
position: absolute;
top: -(@review-off-width + @rp-entry-arrow-width);
right: -(@review-off-width + @rp-entry-arrow-width);
bottom: -(@review-off-width + @rp-entry-arrow-width);
left: -(2 * @rp-entry-arrow-width + 2);
z-index: -1;
}
&::after {
.triangle(
left,
@rp-entry-arrow-width,
@rp-entry-arrow-width * 1.5,
inherit
);
top: (@review-off-width / 2) - @rp-entry-arrow-width;
left: -(@rp-entry-ribbon-width + @rp-entry-arrow-width);
content: '';
}
}
.rp-state-current-file-mini.rp-layout-left & {
left: auto;
right: @review-off-width + @rp-entry-arrow-width;
border-left-width: 0;
border-right-width: @rp-entry-ribbon-width;
border-right-style: solid;
&::before {
left: -(@review-off-width + @rp-entry-arrow-width);
right: -(2 * @rp-entry-arrow-width + 2);
}
&::after {
.triangle(
right,
@rp-entry-arrow-width,
@rp-entry-arrow-width * 1.5,
inherit
);
right: -(@rp-entry-ribbon-width + @rp-entry-arrow-width);
left: auto;
}
}
.rp-state-current-file-expanded & {
visibility: hidden;
left: 5px;
right: 5px;
width: auto;
&-focused {
left: -2px;
right: 12px;
z-index: 1;
}
&-add-comment {
right: auto;
&.rp-entry-adding-comment {
right: 5px;
}
}
&-bulk-actions {
right: auto;
}
}
.rp-state-overview & {
border-radius: 0;
border-bottom: solid 1px @rp-border-grey;
cursor: pointer;
}
.resolved-comments-dropdown & {
position: static;
margin-bottom: 5px;
}
border-left: solid @rp-entry-ribbon-width transparent;
border-radius: 3px;
background-color: #fff;
transition: top @rp-entry-animation-speed, left 0.1s, right 0.1s;
.no-animate & {
transition: none;
}
&-insert,
&-aggregate {
border-color: @rp-green;
}
&-delete {
border-color: @rp-red;
}
&-comment {
border-color: @rp-yellow;
}
&-comment-resolving {
top: 4px;
left: 6px;
opacity: 0;
z-index: 3;
transform: scale(0.1);
transform-origin: 0 0;
transition: top 0.35s ease-out, left 0.35s ease-out,
transform 0.35s ease-out, opacity 0.35s ease-out 0.2s;
}
&-comment-resolved {
border-color: @rp-grey;
background-color: #efefef;
}
&-add-comment {
background-color: transparent;
right: auto;
border-left-width: 0;
&.rp-entry-adding-comment {
background-color: #fff;
right: 5px;
border-left-width: 3px;
border-left-color: @rp-yellow;
}
}
&-bulk-actions {
background-color: transparent;
right: auto;
border-left-width: 0;
}
}
.rp-entry-body {
display: flex;
align-items: center;
padding: 4px 5px;
}
.rp-entry-action-icon {
font-size: @rp-icon-large-size;
padding: 0 3px;
line-height: 0;
.rp-state-overview & {
display: none;
}
}
.rp-entry-details {
line-height: 1.4;
margin-left: 5px;
// We need to set any low-enough flex base size (0px), making it growable (1) and non-shrinkable (0).
// This is needed to ensure that IE makes the element fill the available space.
flex: 1 0 1px;
overflow-x: auto;
.rp-state-overview & {
margin-left: 0;
}
}
.rp-entry-metadata {
font-size: @rp-small-font-size;
}
.rp-entry-user {
font-weight: @rp-semibold-weight;
font-style: normal;
}
.rp-comment-actions {
a {
color: @rp-type-blue;
}
}
.rp-content-highlight {
color: @rp-type-darkgrey;
font-weight: @rp-semibold-weight;
text-decoration: none;
del& {
text-decoration: line-through;
}
}
.rp-entry-actions {
display: flex;
.rp-state-overview .rp-entry-list & {
display: none;
}
}
.rp-entry-button {
.rp-button();
flex: 1 1 50%;
border-right: solid 1px #fff;
padding: 2px 0;
&:last-child {
border-bottom-right-radius: 3px;
border-right-width: 0;
}
.rp-state-current-file-mini.rp-layout-left & {
&:first-child {
border-bottom-left-radius: 3px;
}
&:last-child {
border-bottom-right-radius: 0;
}
}
}
.rp-comment {
margin: 2px 5px;
padding-bottom: 3px;
line-height: 1.4;
border-bottom: solid 1px @rp-border-grey;
&:last-child {
margin-bottom: 2px;
border-bottom-width: 0;
}
.rp-state-overview .rp-entry-list & {
margin: 4px 5px;
&:first-child {
margin-top: 0;
padding-top: 4px;
}
}
}
.rp-comment-content {
margin: 0;
color: @rp-type-darkgrey;
overflow-x: auto; // Long words, like links can overflow without this.
white-space: pre-wrap;
}
.rp-comment-resolver {
color: @rp-type-blue;
}
.rp-comment-resolver-content {
font-style: italic;
margin: 0;
}
.rp-comment-reply {
padding: 0 5px;
}
.rp-add-comment-btn,
.rp-bulk-actions-btn {
.rp-button();
display: inline-block;
padding: 5px 10px;
border-radius: 3px;
.rp-in-editor-widgets & {
display: block;
white-space: nowrap;
border-radius: 0;
&:last-child {
border-bottom-left-radius: 3px;
}
}
}
.rp-bulk-actions-btn {
border-radius: 0;
&:first-child {
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
&:last-child {
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
margin-left: 1px;
}
}
.rp-new-comment {
padding: 5px;
}
.rp-comment-input {
width: 100%;
font-size: @rp-base-font-size;
padding: 2px 5px;
border-radius: 3px;
border: solid 1px @rp-border-grey;
resize: vertical;
color: @rp-type-darkgrey;
background-color: #fff;
margin-top: 3px;
overflow-x: hidden;
min-height: 3em;
max-height: 400px;
}
.rp-icon-delete {
display: inline-block;
line-height: 1;
font-style: normal;
font-size: 0.8em;
text-decoration: line-through;
font-weight: @rp-semibold-weight;
&::before {
content: 'Ab';
}
}
.rp-resolved-comment {
border-left: solid @rp-entry-ribbon-width @rp-yellow;
border-radius: 3px;
background-color: #fff;
margin-bottom: 5px;
}
.rp-resolved-comment-context {
background-color: lighten(@rp-yellow, 35%);
padding: 4px 5px;
}
.rp-resolved-comment-context-file {
font-weight: @rp-semibold-weight;
}
.rp-resolved-comment-context-quote {
color: #000;
font-family: @font-family-monospace;
margin: 0;
}
.rp-entry-callout {
transition: top @rp-entry-animation-speed, height @rp-entry-animation-speed;
.rp-state-current-file & {
position: absolute;
border-top: 1px solid grey;
border-right: 1px dashed grey;
&::after {
content: '';
position: absolute;
top: -1px;
left: 3px;
bottom: 0;
border-bottom: 1px solid grey;
}
}
.rp-state-current-file-expanded & {
width: 3px;
&::after {
width: 3px;
}
}
.rp-state-current-file-mini & {
width: 1px;
&::after {
width: 1px;
}
}
.rp-state-overview & {
display: none;
}
.rp-state-current-file &-inverted {
border-top: none;
border-bottom: 1px solid grey;
&::after {
top: 0px;
bottom: -1px;
border-top: 1px solid grey;
border-bottom: none;
}
}
.rp-state-current-file &-insert {
border-color: @rp-green;
&::after {
border-color: @rp-green;
}
}
.rp-state-current-file &-delete {
border-color: @rp-red;
&::after {
border-color: @rp-red;
}
}
.rp-state-current-file &-comment {
border-color: @rp-yellow;
&::after {
border-color: @rp-yellow;
}
}
.rp-size-mini &-add-comment {
display: none;
}
}
.rp-overview-file-header {
padding: 2px 5px;
border-top: solid 1px @rp-border-grey;
border-bottom: solid 1px @rp-border-grey;
background-color: @rp-bg-dim-blue;
margin-top: 10px;
font-weight: @rp-semibold-weight;
text-align: center;
cursor: pointer;
}
.rp-overview-file-num-entries {
font-weight: normal;
font-size: 0.9em;
}
.rp-overview-file-header-collapse {
.rp-collapse-arrow;
float: left;
}
.rp-overview-file-entries {
overflow: hidden;
}
.rp-comment-wrapper {
transition: 0.35s opacity ease-out 0.2s;
&-resolving {
opacity: 0;
}
}
.rp-loading,
.rp-empty {
text-align: center;
padding: 5px;
}
.rp-nav {
display: none;
flex-shrink: 0;
.rp-size-expanded & {
display: flex;
}
.rp-unsupported & {
display: none;
}
.rp-state-current-file & {
position: absolute;
bottom: 0;
}
width: 100%;
font-size: @rp-icon-large-size;
text-align: center;
background-color: @rp-bg-dim-blue;
border-top: solid 1px @rp-border-grey;
z-index: 2;
}
.rp-nav-item {
display: block;
color: lighten(@rp-type-blue, 25%);
flex: 0 0 50%;
border-top: solid 3px transparent;
padding-bottom: 2px;
&:hover,
&:focus {
text-decoration: none;
color: @rp-type-blue;
}
&-active {
color: @rp-type-blue;
border-top: solid 3px @rp-highlight-blue;
}
}
.rp-nav-label {
display: block;
font-size: @rp-base-font-size;
}
#editor {
.rp-size-mini & {
right: @review-off-width;
.ace-editor-body {
overflow: visible;
.ace_scrollbar-v {
right: -@review-off-width;
}
}
}
.rp-size-expanded & {
right: @review-panel-width;
left: 0px;
width: auto;
}
.rp-state-current-file-expanded & {
.ace-editor-body {
overflow: visible;
.ace_scrollbar-v {
right: -@review-panel-width;
}
}
}
}
#editor-rich-text {
.rp-size-expanded & {
right: @review-panel-width;
}
}
.rp-toggle {
display: inline-block;
vertical-align: middle;
padding-left: 5px;
}
.rp-toggle-hidden-input {
display: none;
+ .rp-toggle-btn {
display: block;
width: 3.5em;
height: 1.75em;
position: relative;
outline: 0;
margin: 0;
font-weight: normal;
cursor: pointer;
user-select: none;
padding: 1px;
background-color: @rp-highlight-blue;
border: 1px solid #fff;
border-radius: 0.875em;
transition: background 0.15s ease, border-color 0.15s ease;
&::before {
content: '';
display: block;
width: 50%;
height: 100%;
position: relative;
left: 0;
background-color: #fff;
border-radius: 0.875em;
transition: background-color 0.15s ease, color 0.15s ease, left 0.15s ease;
}
}
&:checked + .rp-toggle-btn {
background-color: @red;
border-color: #fff;
&::before {
left: 50%;
background-color: #fff;
}
}
&:disabled + .rp-toggle-btn {
cursor: default;
opacity: 0.35;
}
}
.rp-unsupported-msg-wrapper {
display: none;
.rp-size-expanded.rp-unsupported & {
display: block;
}
height: 100%;
.rp-unsupported-msg {
display: flex;
width: @review-panel-width - 40px;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 0 auto;
text-align: center;
.rp-unsupported-msg-title {
font-size: 1.3em;
margin-top: 13px;
}
}
}
.ace-editor-wrapper {
.track-changes-marker-callout {
border-radius: 0;
position: absolute;
.rp-state-overview &,
.rp-loading-threads & {
display: none;
}
}
.track-changes-added-marker-callout {
border-bottom: 1px dashed @rp-green;
z-index: 1;
}
.track-changes-comment-marker-callout {
border-bottom: 1px dashed @rp-yellow;
}
.track-changes-deleted-marker-callout {
border-bottom: 1px dashed @rp-red;
}
.track-changes-marker {
border-radius: 0;
position: absolute;
.rp-loading-threads & {
display: none;
}
z-index: 6; // Appear above text selection
}
.track-changes-comment-marker {
background-color: @rp-yellow;
opacity: 0.3;
}
.track-changes-added-marker {
background-color: @rp-green;
opacity: 0.3;
}
.track-changes-deleted-marker {
border-left: 2px dotted @rp-red;
margin-left: -1px;
}
.ace_dark {
.track-changes-comment-marker {
background-color: @rp-yellow-on-dark;
}
.track-changes-added-marker {
background-color: @rp-green-on-dark;
}
}
}
.cm-editor-wrapper {
@rp-yellow-for-cm: fade(
@rp-yellow,
40%
); // Get the RGBA colour with transparency
@rp-green-for-cm: fade(
@rp-green,
40%
); // Get the RGBA colour with transparency
.track-changes-marker {
border-radius: 0;
}
.track-changes-added-marker {
// Uses rgba so not to affect the opacity of the text - doesn't layer like ace
background-color: @rp-green-for-cm;
color: black;
}
.track-changes-deleted-marker {
border-left: 2px dotted #c5060b;
// Commented out styles for callout to be reimplemented later
// border-bottom: 1px dashed #c5060b;
// width: 100%;
}
.track-changes-comment-marker {
// Uses rgba so not to affect the opacity of the text - doesn't layer like ace
background-color: @rp-yellow-for-cm;
color: black;
}
.track-changes-added-marker.track-changes-comment-marker {
background-color: mix(@rp-yellow-for-cm, @rp-green-for-cm);
}
}
.review-icon {
display: inline-block;
background: url('/img/ol-icons/review-icon-dark-theme.svg') top/30px no-repeat;
width: 30px;
&::before {
content: '\00a0'; // Non-breakable space. A non-breakable character here makes this icon work like font-awesome.
}
}
a when (@is-overleaf-light = true) {
.review-icon {
background: url('/img/ol-icons/review-icon-light-theme.svg') top/30px
no-repeat;
}
&.active,
&:active {
.review-icon {
background: url('/img/ol-icons/review-icon-dark-theme.svg') top/30px
no-repeat;
}
}
}
.resolved-comments-toggle {
font-size: 14px;
color: lighten(@rp-type-blue, 25%);
border: solid 1px @rp-border-grey;
border-radius: 3px;
padding: 0 4px;
display: block;
height: 22px;
width: 22px;
line-height: 1.4;
&:hover,
&:focus {
text-decoration: none;
color: @rp-type-blue;
}
}
.resolved-comments-backdrop {
display: none;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
&-visible {
display: block;
}
}
.resolved-comments-dropdown {
display: none;
position: absolute;
width: 300px;
left: -150px;
max-height: ~'calc(100vh - 100px)';
margin-top: @rp-entry-arrow-width * 1.5;
margin-left: 1em;
background-color: @rp-bg-blue;
text-align: left;
align-items: stretch;
justify-content: center;
border-radius: 3px;
box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.3);
z-index: 1;
&::before {
content: '';
.triangle(
top,
@rp-entry-arrow-width * 3,
@rp-entry-arrow-width * 1.5,
@rp-bg-blue
);
top: -@rp-entry-ribbon-width * 2;
left: 50%;
margin-left: -@rp-entry-arrow-width * 0.75;
}
&-open {
display: flex;
}
}
.resolved-comments-scroller {
flex: 0 0 auto; // Can't use 100% in the flex-basis key here, IE won't account for padding.
width: 100%; // We need to set the width explicitly, as flex-basis won't work.
max-height: ~'calc(100vh - 100px)'; // We also need to explicitly set the max-height, IE won't compute the flex-determined height.
padding: 5px;
overflow-y: auto;
}
.rp-collapse-toggle {
color: @rp-type-blue;
font-weight: @rp-semibold-weight;
&:hover,
&:focus {
color: darken(@rp-type-blue, 5%);
text-decoration: none;
}
}
.rp-in-editor-widgets {
position: absolute;
top: 0;
right: 0;
font-size: 11px;
z-index: 2;
.rp-size-mini & {
right: @review-off-width;
}
.rp-size-expanded &,
.rp-unsupported & {
display: none;
}
}
.rp-track-changes-indicator {
display: block;
padding: 5px 10px;
background-color: rgba(240, 240, 240, 0.9);
color: @rp-type-blue;
text-align: center;
border-bottom-left-radius: 3px;
white-space: nowrap;
&.rp-track-changes-indicator-on-dark {
background-color: rgba(88, 88, 88, 0.8);
color: #fff;
&:hover,
&:focus {
background-color: rgba(88, 88, 88, 1);
color: #fff;
}
}
&:hover,
&:focus {
outline: 0;
text-decoration: none;
background-color: rgba(240, 240, 240, 1);
color: @rp-type-blue;
}
}
.review-panel-toggler {
display: none;
position: absolute;
top: 0;
bottom: 0;
width: 10px;
opacity: 0.5;
color: @rp-highlight-blue;
z-index: 1;
background-color: transparent;
transition: background 0.1s;
.rp-size-mini &,
.rp-size-expanded & {
display: block;
}
.rp-unsupported & {
display: none;
}
.rp-size-expanded & {
&::after {
content: '\f105';
}
}
&:hover,
&:focus {
color: @rp-highlight-blue;
background-color: #fff;
}
&::after {
content: '\f104';
font-family: FontAwesome;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 16px;
display: block;
position: absolute;
top: 50%;
width: 100%;
text-align: center;
margin-top: -0.5em;
}
}
// Helper class for elements which aren't treated as flex-items by IE10, e.g:
// * inline items;
// * unknown elements (elements which aren't standard DOM elements, such as custom element directives)
.rp-flex-block {
display: block;
}