overleaf/services/web/public/stylesheets/app/editor/review-panel.less
2016-11-14 12:47:46 +00:00

330 lines
No EOL
5.4 KiB
Text

@rp-base-font-size : 12px;
@rp-small-font-size : 10px;
@rp-icon-large-size : 22px;
@rp-bg-blue : #dadfed;
@rp-bg-dim-blue : #fafafa;
@rp-highlight-blue : #8a96b5;
@rp-border-grey : #d9d9d9;
@rp-green : #2c8e30;
@rp-dim-green : #cae3cb;
@rp-red : #c5060b;
@rp-dim-red : #f3cdce;
@rp-yellow : #f3b111;
@rp-dim-yellow : #ffe9b2;
@rp-type-blue : #6b7797;
@rp-type-darkgrey : #3f3f3f;
@rp-entry-ribbon-width : 4px;
@rp-semibold-weight : 600;
@review-panel-width : 230px;
@rp-scroller-offset : 30px;
#review-panel {
position: absolute;
width: @review-panel-width;
top: 0px;
bottom: 0px;
right: 0px;
background-color: @rp-bg-blue;
border-left: solid 1px @rp-border-grey;
overflow: hidden;
display: none;
font-size: @rp-base-font-size;
color: @rp-type-blue;
}
.review-panel-toolbar {
height: 32px;
padding: 6px;
border-bottom: 1px solid @rp-border-grey;
background-color: @rp-bg-dim-blue;
text-align: center;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 1;
}
.review-panel-scroller {
position: absolute;
top: 0;
bottom: 0;
left: 0;
// TODO: Use a more cross-browser method of hiding the scroll bar
right: -@rp-scroller-offset; // Hide scroll bar
overflow-y: scroll;
}
.rp-entry-list {
position: relative;
width: @review-panel-width;;
}
.rp-entry {
position: absolute;
left: 5px;
right: 5px;
border-left: solid @rp-entry-ribbon-width transparent;
border-radius: 3px;
background-color: #FFF;
transition: top 0.3s, left 0.1s, right 0.1s;
&-insert {
border-left-color: @rp-green;
}
&-delete {
border-left-color: @rp-red;
}
&-comment {
border-left-color: @rp-yellow;
}
&-focus-position {
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;
}
}
&-focused {
left: 0px;
right: 10px;
z-index: 1;
}
}
.rp-entry-header {
display: flex;
align-items: center;
padding: 5px;
}
.rp-entry-action-icon {
font-size: @rp-icon-large-size;
padding: 0 5px;
line-height: 0;
}
.rp-entry-metadata {
flex-grow: 1;
padding: 0 5px;
line-height: 1.2;
}
.rp-entry-metadata-line {
margin: 0;
}
.rp-entry-body {
padding: 5px;
}
.rp-content-highlight {
color: @rp-type-darkgrey;
font-weight: @rp-semibold-weight;
text-decoration: none;
.rp-entry-delete & {
text-decoration: line-through;
}
}
.rp-entry-actions {
display: flex;
}
.rp-entry-button {
flex: 1 0 50%;
background-color: @rp-highlight-blue;
color: #FFF;
text-align: center;
border-right: solid 1px #FFF;
padding: 2px 0;
&:hover,
&:focus {
background-color: darken(@rp-highlight-blue, 5%);
text-decoration: none;
color: #FFF;
}
&:last-child {
border-bottom-right-radius: 3px;
border-right-width: 0;
}
}
.rp-comment {
display: flex;
align-items: flex-start;
padding: 5px;
&.rp-comment-self .rp-comment-body {
margin-left: 0;
margin-right: 9px;
&::after {
content: "\25BA";
left: auto;
right: -9px;
}
}
}
.rp-comment-body {
position: relative;
background-color: currentColor;
flex-grow: 1;
padding: 2px 5px;
margin-left: 9px;
border-radius: 3px;
&::after {
content: "\25C4";
position: absolute;
top: 3px;
left: -9px;
font-size: 1.2em;
line-height: 1;
}
}
.rp-comment-content {
margin: 0;
color: @rp-type-darkgrey;
}
.rp-comment-metadata {
color: @rp-type-blue;
font-size: @rp-small-font-size;
margin: 0;
}
.rp-comment-reply {
padding: 0 5px;
}
.rp-add-comment-btn {
display: block;
background-color: @rp-highlight-blue;
color: #FFF;
padding: 5px 10px;
border-radius: 3px;
&:hover,
&:focus {
background-color: darken(@rp-highlight-blue, 5%);
text-decoration: none;
color: #FFF;
}
}
.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;
}
.rp-avatar {
border-radius: 3px;
font-weight: @rp-semibold-weight;
font-size: @rp-icon-large-size;
line-height: 1.2;
text-transform: uppercase;
color: #FFF;
width: 1.3em;
height: 1.3em;
text-align: center;
}
.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-entry-callout {
position: absolute;
width: 3px;
border-top: 1px solid grey;
border-right: 1px dashed grey;
&:after {
content: "";
position: absolute;
width: 3px;
top: -1px;
left: 3px;
bottom: 0;
border-bottom: 1px solid grey;
}
&-inverted {
border-top: none;
border-bottom: 1px solid grey;
&:after {
top: 0px;
bottom: -1px;
border-top: 1px solid grey;
border-bottom: none;
}
}
&-insert {
border-color: @rp-green;
&:after {
border-color: @rp-green;
}
}
&-delete {
border-color: @rp-red;
&:after {
border-color: @rp-red;
}
}
&-comment {
border-color: @rp-yellow;
&:after {
border-color: @rp-yellow;
}
}
}
.has-review-panel {
#editor {
right: @review-panel-width;;
left: 0px;
width: auto;
.ace-editor-body {
overflow: visible;
.ace_scrollbar-v {
right: -@review-panel-width;;
}
}
}
#review-panel {
display: block;
}
}