@rp-base-font-size : 12px; @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; @review-panel-width : 230px; #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: -30px; // Hide scroll bar overflow-y: scroll; } .review-entry-list { position: relative; width: @review-panel-width;; } .review-entry { position: absolute; padding-left: @rp-entry-ribbon-width; border-left: solid @rp-entry-ribbon-width transparent; border-radius: 3px; margin: 0 6px; background-color: #FFF; max-width: 148px; word-wrap: break-word; &-insert { border-left-color: @rp-green; } &-delete { border-left-color: @rp-red; } } .review-entry-header { display: flex; &-action-icon { } &-metadata { flex-grow: 1; } &-avatar { } } .review-entry-body { } .review-entry-actions { } .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; } }