overleaf/services/web/public/stylesheets/app/editor/review-panel.less
2017-11-28 10:49:04 +00:00

1082 lines
20 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);
}
}
.triangle(@_, @width, @height, @color) {
position: absolute;
border-color: transparent;
border-style: solid;
width: 0;
height: 0;
}
.triangle(top, @width, @height, @color) {
border-width: 0 @width/2 @height @width/2;
border-bottom-color: @color;
border-left-color: transparent;
border-right-color: transparent;
}
.triangle(bottom, @width, @height, @color) {
border-width: @height @width/2 0 @width/2;
border-top-color: @color;
border-left-color: transparent;
border-right-color: transparent;
}
.triangle(right, @width, @height, @color) {
border-width: @height/2 0 @height/2 @width;
border-left-color: @color;
border-top-color: transparent;
border-bottom-color: transparent;
}
.triangle(left, @width, @height, @color) {
border-width: @height/2 @width @height/2 0;
border-right-color: @color;
border-top-color: transparent;
border-bottom-color: transparent;
}
#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: 0px;
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;
}
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: .35;
}
.rp-tc-state-item-guests {
color: @blue;
}
.rp-entry-list {
display: none;
width: 100%;
.rp-size-expanded &,
.rp-size-mini & {
display: block;
}
.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, .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(.1);
transform-origin: 0 0;
transition: top .35s ease-out, left .35s ease-out, transform .35s ease-out, opacity .35s ease-out .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.
}
.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;
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: .35s opacity ease-out .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-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;
}
}
}
}
.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: .875em;
transition: background .15s ease, border-color 0.15s ease;
&::before {
content: '';
display: block;
width: 50%;
height: 100%;
position: relative;
left: 0;
background-color: #FFF;
border-radius: .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: .35;
}
}
.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;
}
}
}
.review-icon {
display: inline-block;
background: url('/img/review-icon-sprite.png') top/30px no-repeat;
width: 30px;
&::before {
content: '\00a0'; // Non-breakable space. A non-breakable character here makes this icon work like font-awesome.
}
.toolbar .btn-full-height:hover & {
background-position-y: -30px;
}
.toolbar .btn-full-height.active &,
.toolbar .btn-full-height:active & {
background-position-y: -60px;
}
@media (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
background-image: url('/img/review-icon-sprite@2x.png');
}
}
.review-icon when (@is-overleaf) {
background-position-y: -60px;
.toolbar .btn-full-height:hover & {
background-position-y: -60px;
}
}
.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, .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 * .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 & {
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, .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-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;
}