mirror of
https://we.phorge.it/source/phorge.git
synced 2024-11-25 08:12:40 +01:00
10f241352d
Summary: Ref T13513. When rendering an inline suggestion for display, use highlighting and diffing. Test Plan: {F7495053} Maniphest Tasks: T13513 Differential Revision: https://secure.phabricator.com/D21277
507 lines
11 KiB
CSS
507 lines
11 KiB
CSS
/**
|
|
* @provides phui-inline-comment-view-css
|
|
*/
|
|
|
|
.differential-diff td.anchor-target {
|
|
background: {$lightyellow};
|
|
}
|
|
|
|
/* In the document, the anchor is positioned inside the inline comment, but
|
|
this makes the browser jump into the comment so the top isn't visible.
|
|
Instead, artificially position it a bit above the comment so we'll jump a
|
|
bit before the comment. This allows us to see the entire comment (and
|
|
generally the commented-on lines, at least in the case of one or two-line
|
|
comments) after the jump.
|
|
*/
|
|
.differential-inline-comment-anchor {
|
|
position: absolute;
|
|
display: block;
|
|
margin-top: -72px;
|
|
}
|
|
|
|
.differential-inline-comment-content {
|
|
overflow: auto;
|
|
}
|
|
|
|
.differential-inline-comment,
|
|
.differential-inline-comment-edit {
|
|
font: {$basefont};
|
|
-moz-box-sizing: border-box;
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
white-space: normal;
|
|
border-radius: 3px;
|
|
margin: 8px 12px;
|
|
background: {$page.content};
|
|
border: 1px solid {$blueborder};
|
|
}
|
|
|
|
.device .differential-inline-comment {
|
|
margin: 4px;
|
|
}
|
|
|
|
.inline-state-is-draft {
|
|
border: 1px dashed {$greyborder};
|
|
}
|
|
|
|
.differential-inline-comment-head {
|
|
font-weight: bold;
|
|
color: {$darkbluetext};
|
|
padding: 4px 5px 4px 8px;
|
|
|
|
background: {$lightbluebackground};
|
|
border-bottom: 1px solid {$blueborder};
|
|
}
|
|
|
|
.differential-inline-comment-content {
|
|
padding: 12px;
|
|
}
|
|
|
|
.inline-state-is-draft .differential-inline-comment-head {
|
|
border-bottom: 1px dashed {$lightgreyborder};
|
|
background-color: {$lightgreybackground};
|
|
}
|
|
|
|
/* Tighten up spacing on replies */
|
|
.differential-inline-comment.inline-comment-is-reply {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.differential-inline-comment .inline-head-right {
|
|
float: right;
|
|
padding-right: 4px;
|
|
}
|
|
|
|
.differential-inline-comment .inline-head-right .button {
|
|
vertical-align: top;
|
|
}
|
|
|
|
.differential-inline-comment .inline-head-left {
|
|
float: left;
|
|
padding: 4px;
|
|
}
|
|
|
|
.device-phone .differential-inline-comment .inline-head-left {
|
|
float: none;
|
|
}
|
|
|
|
.device-phone .differential-inline-comment .inline-head-right {
|
|
margin: 12px 0 4px 4px;
|
|
}
|
|
|
|
.device-phone .differential-inline-comment .inline-head-right .mml {
|
|
margin: 0 4px 0 0;
|
|
}
|
|
|
|
|
|
/* - Sythetic Comment ---------------------------------------------------------
|
|
|
|
Comments left by our robot overlords.
|
|
|
|
*/
|
|
|
|
.differential-inline-comment.differential-inline-comment-synthetic {
|
|
border: 1px solid {$blue};
|
|
}
|
|
|
|
.differential-inline-comment.differential-inline-comment-synthetic
|
|
.differential-inline-comment-head {
|
|
border-bottom: 1px solid {$blueborder};
|
|
background-color: {$lightblue};
|
|
}
|
|
|
|
.differential-inline-comment.differential-inline-comment-synthetic
|
|
.differential-inline-comment-head {
|
|
padding-bottom: 4px;
|
|
}
|
|
|
|
/* - Ghost Comment ------------------------------------------------------------
|
|
|
|
Comments from older or newer versions of the changeset.
|
|
|
|
*/
|
|
|
|
.differential-inline-comment.inline-comment-ghost {
|
|
border: 1px solid {$lightgreyborder};
|
|
opacity: 0.75;
|
|
}
|
|
|
|
.differential-inline-comment.inline-comment-ghost
|
|
.differential-inline-comment-head {
|
|
border-bottom: 1px solid {$lightgreyborder};
|
|
background-color: {$lightgreybackground};
|
|
}
|
|
|
|
/* - New/Edit Inline Comment --------------------------------------------------
|
|
|
|
Styles for when you are creating or editing an inline comment.
|
|
|
|
*/
|
|
|
|
.differential-inline-comment .done-label {
|
|
display: inline-block;
|
|
color: {$sh-yellowicon};
|
|
padding: 4px;
|
|
}
|
|
|
|
.differential-inline-comment.inline-state-is-draft .done-label,
|
|
.differential-inline-comment.inline-comment-ghost .done-label {
|
|
color: {$lightgreytext};
|
|
}
|
|
|
|
/* - New/Edit Inline Comment --------------------------------------------------
|
|
|
|
Styles for when you are creating or editing an inline comment.
|
|
|
|
*/
|
|
|
|
.differential-inline-comment-edit-body .aphront-form-input {
|
|
margin: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.differential-inline-comment-edit {
|
|
padding: 8px;
|
|
}
|
|
|
|
.differential-inline-comment-edit-buttons {
|
|
padding: 8px 0 0 0;
|
|
}
|
|
|
|
.differential-inline-comment-edit-buttons button {
|
|
float: right;
|
|
margin-left: 6px;
|
|
}
|
|
|
|
.differential-inline-comment-edit-title {
|
|
font-weight: bold;
|
|
color: {$darkbluetext};
|
|
padding: 4px 0 12px;
|
|
font-size: {$biggerfontsize};
|
|
}
|
|
|
|
.differential-inline-comment-edit {
|
|
background-color: {$lightgreybackground};
|
|
border: 1px solid {$lightgreyborder};
|
|
}
|
|
|
|
.differential-inline-comment-edit .remarkup-assist-textarea {
|
|
border-left-color: {$lightgreyborder};
|
|
border-right-color: {$lightgreyborder};
|
|
border-bottom-color: {$greyborder};
|
|
}
|
|
|
|
.differential-inline-comment-edit .remarkup-assist-bar {
|
|
border-left-color: {$lightgreyborder};
|
|
border-right-color: {$lightgreyborder};
|
|
border-top-color: {$lightgreyborder};
|
|
}
|
|
|
|
.differential-inline-comment-edit .aphront-form-control-textarea {
|
|
padding: 0;
|
|
}
|
|
|
|
|
|
/* - Action Buttons -----------------------------------------------------------
|
|
|
|
Reply, Edit, Delete, View, Button Bars...
|
|
|
|
*/
|
|
|
|
.differential-inline-comment .differential-inline-done-label {
|
|
border-color: {$gentle.highlight.border};
|
|
color: {$bluetext};
|
|
}
|
|
|
|
.differential-inline-comment.inline-state-is-draft
|
|
.differential-inline-done-label,
|
|
.differential-inline-comment.inline-state-is-draft
|
|
.button.simple,
|
|
.differential-inline-comment.inline-comment-ghost
|
|
.button.simple {
|
|
color: {$lightgreytext};
|
|
}
|
|
|
|
/* - Done Button --------------------------------------------------------------
|
|
|
|
Default colors, hovers, checked styles for the Done Button.
|
|
|
|
*/
|
|
|
|
.differential-inline-done-label {
|
|
border: 1px solid {$sh-yellowborder};
|
|
border-radius: 3px;
|
|
display: inline-block;
|
|
padding: 3px 8px 4px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.differential-inline-done-label .differential-inline-done {
|
|
margin: 0 6px 0 0;
|
|
display: inline;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.differential-inline-comment.inline-is-done
|
|
.differential-inline-done-label {
|
|
background-color: {$page.content};
|
|
border-color: {$lightblueborder};
|
|
color: {$sky};
|
|
opacity: 1;
|
|
}
|
|
|
|
.device-desktop .differential-inline-comment.inline-is-done
|
|
.differential-inline-done-label:hover {
|
|
background-color: {$page.content};
|
|
color: {$sky};
|
|
}
|
|
|
|
.differential-inline-comment.inline-is-done .differential-inline-comment-head
|
|
.button-done {
|
|
color: {$sky};
|
|
}
|
|
|
|
.differential-inline-comment.inline-is-done {
|
|
border-color: {$thingreyborder};
|
|
}
|
|
|
|
.differential-inline-comment.inline-is-done
|
|
.differential-inline-comment-head {
|
|
background-color: {$lightgreybackground};
|
|
border-bottom-color: {$thingreyborder};
|
|
}
|
|
|
|
.differential-inline-comment.inline-is-done .differential-inline-comment-head
|
|
.button.simple {
|
|
border-color: {$lightgreyborder};
|
|
color: {$lightgreytext};
|
|
}
|
|
|
|
.differential-inline-comment.inline-is-done .differential-inline-comment-head
|
|
.differential-inline-done-label {
|
|
color: {$sky};
|
|
background-color: {$page.content};
|
|
border-color: {$sky};
|
|
}
|
|
|
|
/* - Inline State is Draft ----------------------------------------------------
|
|
|
|
The Unsubmitted state of the comment / done checkbox styles.
|
|
|
|
*/
|
|
|
|
.differential-inline-comment .inline-draft-text {
|
|
display: none;
|
|
}
|
|
|
|
.differential-inline-comment.inline-state-is-draft .inline-draft-text {
|
|
display: inline-block;
|
|
}
|
|
|
|
.inline-state-is-draft .differential-inline-done-label {
|
|
border-style: dashed;
|
|
}
|
|
|
|
|
|
/* - Undo ---------------------------------------------------------------------
|
|
|
|
A wild undo box appears!
|
|
|
|
*/
|
|
|
|
.differential-inline-undo {
|
|
padding: 8px;
|
|
margin: 4px 12px;
|
|
text-align: center;
|
|
background: {$sh-yellowbackground};
|
|
border: 1px solid {$sh-yellowborder};
|
|
color: {$darkgreytext};
|
|
font: {$basefont};
|
|
font-size: {$normalfontsize};
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.differential-inline-undo a {
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* - Spooky Ghost UI -----------------------------------------------------------
|
|
|
|
Hide your codez.
|
|
|
|
*/
|
|
|
|
.inline-comment-ghost .differential-inline-comment-head {
|
|
padding-left: 40px;
|
|
}
|
|
|
|
.ghost-icon {
|
|
background: rgba({$alphagrey},.07);
|
|
float: left;
|
|
padding: 2px 4px 2px 2px;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.ghost-icon .phui-icon-view {
|
|
padding: 8px 7px;
|
|
font-size: 16px;
|
|
color: {$lightbluetext};
|
|
}
|
|
|
|
.device-desktop .ghost-icon .phui-icon-view:hover {
|
|
color: {$fire};
|
|
}
|
|
|
|
.differential-inline-comment.inline-comment-ghost
|
|
.differential-inline-comment-head {
|
|
position: relative;
|
|
}
|
|
|
|
.differential-inline-comment.inline-comment-ghost
|
|
.differential-inline-done-label,
|
|
.differential-inline-comment.inline-comment-ghost {
|
|
border-color: {$lightgreyborder};
|
|
color: {$lightgreytext};
|
|
}
|
|
|
|
|
|
/* - Hiding Inlines ------------------------------------------------------------
|
|
*/
|
|
|
|
.reveal-inline {
|
|
color: {$lightbluetext};
|
|
margin: 4px 0;
|
|
display: none;
|
|
}
|
|
|
|
.inline-hidden .reveal-inline {
|
|
display: block;
|
|
}
|
|
|
|
.inline-hidden .differential-inline-comment {
|
|
display: none;
|
|
}
|
|
|
|
.differential-inline-summary {
|
|
background: {$lightgreybackground};
|
|
padding: 2px 16px;
|
|
color: {$lightgreytext};
|
|
display: none;
|
|
font: {$basefont};
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.device .differential-inline-summary {
|
|
padding-left: 4px;
|
|
padding-right: 4px;
|
|
}
|
|
|
|
.inline-hidden .differential-inline-summary {
|
|
display: block;
|
|
}
|
|
|
|
.reveal-inline span.phui-icon-view {
|
|
color: {$lightbluetext};
|
|
}
|
|
|
|
.reveal-inline:hover span.phui-icon-view {
|
|
color: {$darkbluetext};
|
|
}
|
|
|
|
.inline-button-divider {
|
|
border-left: 1px solid rgba({$alphagrey},.25);
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.differential-inline-comment-synthetic .inline-button-divider {
|
|
border: none;
|
|
}
|
|
|
|
.inline-comment-element .differential-inline-comment-head {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.inline-comment-selected .inline-comment-element {
|
|
border-color: {$yellow};
|
|
background: {$gentle.highlight.background};
|
|
}
|
|
|
|
.inline-comment-selected .inline-comment-element
|
|
.differential-inline-comment-head {
|
|
background: {$lightyellow};
|
|
border-color: {$yellow};
|
|
}
|
|
|
|
.inline-suggestion {
|
|
display: none;
|
|
margin: 0 -8px;
|
|
}
|
|
|
|
.has-suggestion .inline-suggestion {
|
|
display: block;
|
|
}
|
|
|
|
.differential-inline-comment-edit-buttons button.inline-button-left {
|
|
float: left;
|
|
margin: 0 6px 0 0;
|
|
}
|
|
|
|
.inline-suggestion-table {
|
|
table-layout: fixed;
|
|
width: 100%;
|
|
margin-bottom: 8px;
|
|
white-space: pre-wrap;
|
|
background: {$greybackground};
|
|
border-width: 1px 0;
|
|
border-style: solid;
|
|
border-color: {$lightgreyborder};
|
|
}
|
|
|
|
textarea.inline-suggestion-input {
|
|
width: 100%;
|
|
height: auto;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.inline-suggestion-line-cell {
|
|
text-align: right;
|
|
background: {$darkgreybackground};
|
|
width: 36px;
|
|
color: {$greytext};
|
|
border-right: 1px solid {$lightgreyborder};
|
|
}
|
|
|
|
.inline-suggestion-table td.inline-suggestion-input-cell {
|
|
padding: 8px 4px;
|
|
}
|
|
|
|
.inline-suggestion-table td.inline-suggestion-text-cell {
|
|
/* This is attempting to align the text in the textarea with the text on
|
|
the surrounding context lines. */
|
|
padding: 0 8px 0 11px;
|
|
}
|
|
|
|
.inline-suggestion-view {
|
|
padding: 4px 0;
|
|
white-space: pre-wrap;
|
|
background: {$lightgreybackground};
|
|
margin: 0 -12px 8px;
|
|
border-width: 1px 0;
|
|
border-style: solid;
|
|
border-color: {$lightgreyborder};
|
|
}
|
|
|
|
.diff-1up-simple-table {
|
|
width: 100%;
|
|
table-layout: fixed;
|
|
}
|
|
|
|
.diff-1up-simple-table > tbody > tr > td {
|
|
padding-left: 12px;
|
|
padding-right: 12px;
|
|
}
|