Hi Shabeer,
Indeed the review colors from options are not aplicable in Web Author. We use 10 colors and assign them cyclically to authors (from CSS). A comment of the N-th author has a class "Nauthor". If you want to change the colors from CSS you have to take into account the fact that there are two places were a comment or change is rendered: in editor and in Review side panel (so your customization must match both cases).
Here are the two less files content that we use to define review colors:
- for editor:
Code: Select all
.marker-colors(@r, @g, @b) {
&.oxy-marker[data-type="CHANGE_INSERT"] .oxy-imgwrapper:before,
&.oxy-marker[data-type="CHANGE_DELETE"] .oxy-imgwrapper:before {
background: linear-gradient(0deg, rgba(@r, @g, @b, 1) 2px, transparent 0px) repeat-x;
background-size: 50% 50%;
}
&.oxy-marker[data-type="CHANGE_INSERT"] .oxy-imgwrapper:before {
background-position: 0 100%;
}
&.oxy-marker[data-type="CHANGE_DELETE"] .oxy-imgwrapper:before {
background-position: 100% 0;
}
&.oxy-sentinel-marker[data-subtype="split"].oxy-end-sentinel-marker,
&.oxy-marker[data-type="CHANGE_INSERT"],
&.oxy-marker[data-type="CHANGE_DELETE"] {
color: rgba(@r, @g, @b, 1) ;
}
&.oxy-marker[data-type="COMMENT"],
&.oxy-marker[data-type="CUSTOM_HIGHLIGHT"] {
&, .oxy-imgwrapper:before {
background-color: rgba(@r, @g, @b, 0.2);
}
}
}
[class*="0author"] { .marker-colors(0, 0, 255); }
[class*="1author"] { .marker-colors(128, 0, 0); }
[class*="2author"] { .marker-colors(154, 58, 168); }
[class*="3author"] { .marker-colors(165, 197, 1); }
[class*="4author"] { .marker-colors(200, 81, 0); }
[class*="5author"] { .marker-colors(102, 102, 102); }
[class*="6author"] { .marker-colors(2, 110, 2); }
[class*="7author"] { .marker-colors(164, 160, 0); }
[class*="8author"] { .marker-colors(0, 204, 204); }
[class*="9author"] { .marker-colors(40, 170, 255); }
/**
* Replies should have transparent background.
*/
.oxy-marker.oxy-marker[data-level] {
background-color: transparent;
}
- for Review panel:
Code: Select all
@media only screen {
.review-panel-content.done {
color: #d0d0d0 !important;
}
// The same color is used in multiple places - use a mixin.
.review-panel-colors(@r, @g, @b) {
&.change_insert,
&.change_delete,
&.change_attribute_inserted,
&.change_attribute_deleted,
&.change_attribute_modified {
&.review-panel-item > .review-panel-content {
color: rgb(@r, @g, @b);
}
}
}
[class*="0author"] {
.review-panel-colors(0, 0, 255);
}
[class*="1author"] {
.review-panel-colors(128, 0, 0);
}
[class*="2author"] {
.review-panel-colors(154, 58, 168);
}
[class*="3author"] {
.review-panel-colors(165, 197, 1);
}
[class*="4author"] {
.review-panel-colors(200, 81, 0);
}
[class*="5author"] {
.review-panel-colors(102, 102, 102);
}
[class*="6author"] {
.review-panel-colors(2, 110, 2);
}
[class*="7author"] {
.review-panel-colors(164, 160, 0);
}
[class*="8author"] {
.review-panel-colors(0, 204, 204);
}
[class*="9author"] {
.review-panel-colors(40, 170, 255);
}
}
Best Regards,
Mihaela