1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-12-05 05:02:44 +01:00
phorge-phorge/webroot/rsrc/css/application/differential/phui-inline-comment.css

508 lines
11 KiB
CSS
Raw Normal View History

/**
* @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;
}