overleaf/services/web/public/stylesheets/app/editor/review-panel.less

515 lines
8.8 KiB
Text
Raw Normal View History

2016-11-09 11:36:06 -05:00
@rp-base-font-size : 12px;
2016-11-10 12:19:41 -05:00
@rp-small-font-size : 10px;
2016-11-10 05:19:52 -05:00
@rp-icon-large-size : 22px;
2016-11-09 10:39:01 -05:00
2016-11-09 11:36:06 -05:00
@rp-bg-blue : #dadfed;
@rp-bg-dim-blue : #fafafa;
@rp-highlight-blue : #8a96b5;
2016-11-09 10:39:01 -05:00
2016-11-09 11:36:06 -05:00
@rp-border-grey : #d9d9d9;
2016-11-09 10:39:01 -05:00
2016-11-09 11:36:06 -05:00
@rp-green : #2c8e30;
@rp-dim-green : #cae3cb;
@rp-red : #c5060b;
@rp-dim-red : #f3cdce;
@rp-yellow : #f3b111;
@rp-dim-yellow : #ffe9b2;
2016-11-09 10:39:01 -05:00
2016-11-09 11:36:06 -05:00
@rp-type-blue : #6b7797;
@rp-type-darkgrey : #3f3f3f;
@rp-entry-ribbon-width : 4px;
@rp-entry-arrow-width : 4px;
2016-11-10 05:19:52 -05:00
@rp-semibold-weight : 600;
2016-11-09 11:36:06 -05:00
@review-panel-width : 230px;
@review-off-width : 22px;
2016-10-13 09:22:23 -04:00
@rp-toolbar-height: 32px;
.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: none;
.rp-size-expanded & {
display: flex;
flex-direction: column;
width: @review-panel-width;
overflow: hidden;
}
.rp-size-mini & {
display: block;
width: @review-off-width;
overflow: hidden;
}
position: absolute;
top: 0px;
bottom: 0px;
right: 0px;
2016-11-09 10:39:01 -05:00
background-color: @rp-bg-blue;
border-left: solid 1px @rp-border-grey;
2016-11-09 11:36:06 -05:00
font-size: @rp-base-font-size;
color: @rp-type-blue;
}
.review-panel-toolbar {
2016-11-15 05:34:39 -05:00
display: none;
.rp-size-expanded & {
display: block;
}
.rp-state-current-file & {
position: absolute;
top: 0;
left: 0;
right: 0;
}
height: @rp-toolbar-height;
padding: 6px;
2016-11-09 10:39:01 -05:00
border-bottom: 1px solid @rp-border-grey;
background-color: @rp-bg-dim-blue;
text-align: center;
z-index: 2;
}
.rp-entry-list {
.rp-size-expanded & {
width: @review-panel-width;
}
.rp-size-mini & {
width: @review-off-width;
}
.rp-state-current-file & {
position: absolute;
top: 0;
bottom: 0;
}
.rp-state-overview & {
flex-grow: 2;
overflow-y: auto;
}
}
.rp-entry-list-inner {
position: relative;
2016-11-15 05:34:39 -05:00
}
.rp-entry-indicator {
display: none;
.rp-size-mini & {
display: block;
}
2016-11-15 05:34:39 -05:00
position: absolute;
left: 2px;
right: 2px;
2016-11-15 05:34:39 -05:00
text-align: center;
background-color: @rp-highlight-blue;
border-radius: 3px;
color: #FFF;
cursor: pointer;
transition: top 0.3s, left 0.1s, right 0.1s;
&-focused {
left: 0px;
right: 4px;
z-index: 1;
}
}
2016-11-15 05:34:39 -05:00
.rp-entry-wrapper {
&:hover > .rp-entry-insert,
&:hover > .rp-entry-delete,
&:hover > .rp-entry-comment {
2016-11-15 05:34:39 -05:00
display: block;
}
}
2016-11-10 05:19:52 -05:00
.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);
&::before {
.triangle(left, @rp-entry-arrow-width, 6px, inherit);
top: (@review-off-width / 2) - @rp-entry-arrow-width;
left: -(@rp-entry-ribbon-width + @rp-entry-arrow-width);
content: '';
}
}
.rp-state-current-file-expanded & {
left: 5px;
right: 5px;
width: auto;
&-focused {
left: 0px;
right: 10px;
z-index: 1;
}
&-add-comment {
right: auto;
&.rp-entry-adding-comment {
right: 5px;
}
}
}
.rp-state-overview & {
margin: 5px;
}
2016-11-09 11:36:06 -05:00
border-left: solid @rp-entry-ribbon-width transparent;
border-radius: 3px;
background-color: #FFF;
2016-11-14 07:47:46 -05:00
transition: top 0.3s, left 0.1s, right 0.1s;
2016-11-09 11:00:02 -05:00
&-insert {
border-color: @rp-green;
2016-11-09 11:00:02 -05:00
}
&-delete {
border-color: @rp-red;
2016-11-09 11:00:02 -05:00
}
2016-11-10 12:19:41 -05:00
&-comment {
border-color: @rp-yellow;
2016-11-10 12:19:41 -05:00
}
2016-11-14 06:19:00 -05:00
&-add-comment {
2016-11-14 06:19:00 -05:00
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;
}
}
}
2016-11-15 05:34:39 -05:00
2016-11-10 05:19:52 -05:00
.rp-entry-header {
2016-11-09 11:36:06 -05:00
display: flex;
align-items: center;
2016-11-10 12:19:41 -05:00
padding: 5px;
2016-11-10 05:19:52 -05:00
}
.rp-entry-action-icon {
font-size: @rp-icon-large-size;
2016-11-10 10:08:41 -05:00
padding: 0 5px;
2016-11-10 12:19:41 -05:00
line-height: 0;
2016-11-09 11:36:06 -05:00
}
2016-11-10 05:19:52 -05:00
.rp-entry-metadata {
2016-11-09 11:36:06 -05:00
flex-grow: 1;
padding: 0 5px;
line-height: 1.2;
2016-11-09 11:36:06 -05:00
}
.rp-entry-metadata-line {
margin: 0;
}
2016-11-09 11:36:06 -05:00
2016-11-10 05:19:52 -05:00
.rp-entry-body {
2016-11-10 12:19:41 -05:00
padding: 5px;
2016-11-09 11:36:06 -05:00
}
.rp-content-highlight {
color: @rp-type-darkgrey;
font-weight: @rp-semibold-weight;
text-decoration: none;
.rp-entry-delete & {
text-decoration: line-through;
}
}
2016-11-09 11:36:06 -05:00
2016-11-10 05:19:52 -05:00
.rp-entry-actions {
2016-11-10 10:08:41 -05:00
display: flex;
2016-11-09 11:36:06 -05:00
}
2016-11-10 10:08:41 -05:00
.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;
}
}
2016-11-09 11:36:06 -05:00
2016-11-10 12:19:41 -05:00
.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;
2016-11-10 12:19:41 -05:00
}
}
}
.rp-comment-body {
position: relative;
background-color: currentColor;
flex-grow: 1;
padding: 2px 5px;
margin-left: 9px;
2016-11-10 12:19:41 -05:00
border-radius: 3px;
&::after {
content: "\25C4";
2016-11-10 12:19:41 -05:00
position: absolute;
top: 3px;
left: -9px;
2016-11-10 12:19:41 -05:00
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;
}
2016-11-14 06:19:00 -05:00
.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;
}
2016-11-10 12:19:41 -05:00
.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;
}
2016-11-09 11:36:06 -05:00
2016-11-10 05:19:52 -05:00
.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';
}
}
2016-11-10 05:19:52 -05:00
.rp-entry-callout {
.rp-state-current-file & {
2016-11-09 12:10:58 -05:00
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;
2016-11-09 12:10:58 -05:00
}
.rp-state-current-file &-inverted {
2016-11-14 07:47:46 -05:00
border-top: none;
border-bottom: 1px solid grey;
&::after {
2016-11-14 07:47:46 -05:00
top: 0px;
bottom: -1px;
border-top: 1px solid grey;
border-bottom: none;
}
}
.rp-state-current-file &-insert {
2016-11-10 10:08:41 -05:00
border-color: @rp-green;
&::after {
2016-11-10 10:08:41 -05:00
border-color: @rp-green;
2016-11-09 12:10:58 -05:00
}
}
.rp-state-current-file &-delete {
2016-11-10 10:08:41 -05:00
border-color: @rp-red;
&::after {
2016-11-10 10:08:41 -05:00
border-color: @rp-red;
2016-11-09 12:10:58 -05:00
}
}
.rp-state-current-file &-comment {
2016-11-10 10:08:41 -05:00
border-color: @rp-yellow;
&::after {
2016-11-10 10:08:41 -05:00
border-color: @rp-yellow;
2016-11-09 12:10:58 -05:00
}
}
}
2016-11-16 07:31:47 -05:00
.rp-nav {
display: flex;
flex-shrink: 0;
.rp-size-mini & {
display: none;
}
.rp-state-current-file & {
position: absolute;
bottom: 0;
}
2016-11-16 07:31:47 -05:00
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;
2016-11-16 07:31:47 -05:00
}
.rp-nav-item {
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;
2016-10-13 09:22:23 -04:00
.ace-editor-body {
overflow: visible;
.ace_scrollbar-v {
right: -@review-off-width;
2016-10-13 09:22:23 -04:00
}
}
2016-10-11 09:24:01 -04:00
}
.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;
}
2016-11-16 07:31:47 -05:00
}
}
}