mirror of
https://we.phorge.it/source/phorge.git
synced 2025-01-03 19:31:02 +01:00
7705f452d2
Summary: Ref T2009. Right now, when you mouse over a line number, we change the cursor to a "pointer", but that's the only hint we provide about the existence of inline comments. Occasionally, users have reported confusion around how to leave inline comments. Try to increase discoverability by showing the line reticle when you hover over the line. (I could take this or leave it, but it seems OK / not annoying after 15 seconds of playing with it.) Test Plan: Waved cursor over line numbers, attempted to test all the editor/noncontiguous/across-files cases. Reviewers: btrahan, chad Reviewed By: btrahan Subscribers: epriestley Maniphest Tasks: T2009 Differential Revision: https://secure.phabricator.com/D12010
485 lines
9.7 KiB
CSS
485 lines
9.7 KiB
CSS
/**
|
|
* @provides differential-changeset-view-css
|
|
*/
|
|
|
|
.differential-changeset {
|
|
position: relative;
|
|
margin: 0;
|
|
padding-top: 32px;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.device-phone .differential-changeset {
|
|
overflow-x: scroll;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
.differential-diff {
|
|
background: #fff;
|
|
width: 100%;
|
|
border-top: 1px solid {$lightblueborder};
|
|
border-bottom: 1px solid {$lightblueborder};
|
|
table-layout: fixed;
|
|
}
|
|
|
|
.differential-diff.diff-2up {
|
|
min-width: 780px;
|
|
}
|
|
|
|
.differential-diff col.num {
|
|
width: 45px;
|
|
}
|
|
|
|
.device .differential-diff.diff-1up col.num {
|
|
width: 32px;
|
|
}
|
|
|
|
.differential-diff.diff-2up col.left,
|
|
.differential-diff.diff-2up col.right {
|
|
width: 49.25%;
|
|
}
|
|
|
|
.differential-diff.diff-1up col.unified {
|
|
width: 99.5%;
|
|
}
|
|
|
|
.differential-diff col.copy {
|
|
width: 0.5%;
|
|
}
|
|
|
|
.differential-diff col.cov {
|
|
width: 1%;
|
|
}
|
|
|
|
.differential-diff td {
|
|
vertical-align: top;
|
|
white-space: pre-wrap;
|
|
word-wrap: break-word;
|
|
padding: 0 8px 1px;
|
|
line-height: 16px;
|
|
}
|
|
|
|
.device .differential-diff td {
|
|
padding: 0 4px 1px;
|
|
}
|
|
|
|
.differential-diff td .zwsp {
|
|
position: absolute;
|
|
width: 0;
|
|
}
|
|
|
|
.differential-diff th {
|
|
text-align: right;
|
|
padding: 2px 6px 0px 0px;
|
|
vertical-align: top;
|
|
background: {$lightbluebackground};
|
|
color: {$bluetext};
|
|
cursor: pointer;
|
|
border-right: 1px solid {$thinblueborder};
|
|
overflow: hidden;
|
|
|
|
-moz-user-select: -moz-none;
|
|
-khtml-user-select: none;
|
|
-webkit-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.differential-diff th.selected {
|
|
background: {$hovergrey};
|
|
}
|
|
|
|
.differential-changeset-immutable .differential-diff th {
|
|
cursor: auto;
|
|
}
|
|
|
|
.differential-diff td.old {
|
|
background: #ffd0d0;
|
|
}
|
|
|
|
.differential-diff td.new {
|
|
background: #d0ffd0;
|
|
}
|
|
|
|
.differential-diff td.old-rebase {
|
|
background: #ffeeee;
|
|
}
|
|
|
|
.differential-diff td.new-rebase {
|
|
background: #eeffee;
|
|
}
|
|
|
|
.differential-diff td.old-full,
|
|
.differential-diff td.old span.bright {
|
|
background: #ffaaaa;
|
|
}
|
|
|
|
.differential-diff td.new-full,
|
|
.differential-diff td.new span.bright {
|
|
background: #aaffaa;
|
|
}
|
|
|
|
.differential-diff td.copy {
|
|
min-width: 0.5%;
|
|
width: 0.5%;
|
|
padding: 0;
|
|
}
|
|
|
|
.differential-diff td.new-copy,
|
|
.differential-diff td.new-copy span.bright {
|
|
background: {$lightyellow};
|
|
}
|
|
|
|
.differential-diff td.new-move,
|
|
.differential-diff td.new-move span.bright {
|
|
background: {$yellow};
|
|
}
|
|
|
|
.differential-diff td.comment {
|
|
background: #dddddd;
|
|
}
|
|
|
|
.differential-diff td.cov {
|
|
padding: 0;
|
|
}
|
|
|
|
.diffusion-source td.cov {
|
|
padding: 0 8px;
|
|
}
|
|
|
|
td.cov-U {
|
|
background: #dd8866;
|
|
}
|
|
|
|
td.cov-C {
|
|
background: #66bbff;
|
|
}
|
|
|
|
td.cov-N {
|
|
background: #ddeeff;
|
|
}
|
|
|
|
td.cov-X {
|
|
background: #aa00aa;
|
|
}
|
|
|
|
td.cov-I {
|
|
background: {$lightgreybackground};
|
|
}
|
|
|
|
.differential-diff td.source-cov-C,
|
|
.differential-diff td.source-cov-C span.bright {
|
|
background: #cceeff;
|
|
}
|
|
|
|
.differential-diff td.source-cov-U,
|
|
.differential-diff td.source-cov-U span.bright {
|
|
background: #ffbb99;
|
|
}
|
|
|
|
.differential-diff td.source-cov-N,
|
|
.differential-diff td.source-cov-N span.bright {
|
|
background: #f3f6ff;
|
|
}
|
|
|
|
.differential-diff td.show-more,
|
|
.differential-diff th.show-context-line,
|
|
.differential-diff td.show-context,
|
|
.differential-diff td.differential-shield {
|
|
background: {$lightbluebackground};
|
|
padding: 12px 0;
|
|
border-top: 1px solid {$thinblueborder};
|
|
border-bottom: 1px solid {$thinblueborder};
|
|
}
|
|
|
|
.device .differential-diff td.show-more,
|
|
.device .differential-diff th.show-context-line,
|
|
.device .differential-diff td.show-context,
|
|
.device .differential-diff td.differential-shield {
|
|
padding: 6px 0;
|
|
}
|
|
|
|
.differential-diff td.show-more,
|
|
.differential-diff td.differential-shield {
|
|
font: {$basefont};
|
|
font-size: 12px;
|
|
white-space: normal;
|
|
}
|
|
|
|
.differential-diff td.show-more {
|
|
text-align: center;
|
|
color: {$bluetext};
|
|
}
|
|
|
|
.differential-diff th.show-context-line {
|
|
padding-right: 6px;
|
|
}
|
|
|
|
.differential-diff td.show-context {
|
|
padding-left: 14px;
|
|
}
|
|
|
|
.differential-diff td.differential-shield {
|
|
text-align: center;
|
|
}
|
|
|
|
.differential-diff td.differential-shield a {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.differential-diff .differential-image-diff {
|
|
background-image: url(/rsrc/image/checker_light.png);
|
|
}
|
|
|
|
.differential-diff .differential-image-diff:hover {
|
|
background-image: url(/rsrc/image/checker_dark.png);
|
|
}
|
|
|
|
.differential-diff .differential-image-diff td {
|
|
padding: 8px;
|
|
}
|
|
|
|
.differential-image-stage {
|
|
overflow: auto;
|
|
}
|
|
|
|
.differential-meta-notice {
|
|
border-top: 1px solid {$yellow};
|
|
border-bottom: 1px solid {$yellow};
|
|
background-color: {$lightyellow};
|
|
padding: 12px;
|
|
}
|
|
|
|
.differential-meta-notice + .differential-diff {
|
|
border-top: none;
|
|
}
|
|
|
|
.differential-changeset h1 {
|
|
font-size: 15px;
|
|
padding: 2px 0 12px 12px;
|
|
line-height: 18px;
|
|
}
|
|
|
|
.device-phone .differential-changeset h1 {
|
|
word-break: break-word;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.differential-reticle {
|
|
background: {$lightyellow};
|
|
border: 1px solid {$yellow};
|
|
position: absolute;
|
|
opacity: 0.5;
|
|
top: 0px;
|
|
left: 0px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.differential-inline-comment,
|
|
.differential-inline-comment-edit {
|
|
background: #ffffee;
|
|
border: 1px solid #ccccaa;
|
|
font: {$basefont};
|
|
font-size: 12px;
|
|
margin: 6px 0px;
|
|
padding: 8px 10px;
|
|
width: 100%;
|
|
-moz-box-sizing: border-box;
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
white-space: normal;
|
|
}
|
|
|
|
.differential-inline-comment-edit .aphront-form-control-textarea {
|
|
padding: 0;
|
|
}
|
|
|
|
.differential-inline-comment-unsaved-draft {
|
|
background: #f1f1f1;
|
|
border: 1px dashed {$greytext};
|
|
}
|
|
|
|
.differential-inline-comment-head {
|
|
font-weight: bold;
|
|
color: #333333;
|
|
border-bottom: 1px solid rgba(204,204,170,0.37);
|
|
padding-bottom: 4px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.differential-inline-comment-unsaved-draft .differential-inline-comment-head {
|
|
border-bottom: 1px solid #aaaaaa;
|
|
}
|
|
|
|
.differential-inline-comment-synthetic {
|
|
background: {$lightblue};
|
|
border: 1px solid {$blue};
|
|
}
|
|
|
|
.differential-inline-comment-synthetic .differential-inline-comment-head {
|
|
border-bottom: 1px solid {$blueborder};
|
|
}
|
|
|
|
|
|
.differential-inline-comment-links,
|
|
.differential-inline-comment-line {
|
|
font-weight: normal;
|
|
font-style: italic;
|
|
color: {$greytext};
|
|
float: right;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.differential-inline-comment-links {
|
|
margin-left: 8px;
|
|
font-style: normal;
|
|
}
|
|
|
|
.differential-inline-comment-edit-body .aphront-form-input {
|
|
margin: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.differential-changeset-buttons {
|
|
float: right;
|
|
margin-right: 16px;
|
|
}
|
|
|
|
.device-phone .differential-changeset-buttons {
|
|
float: none;
|
|
margin: 0 0 8px 4px;
|
|
}
|
|
|
|
.differential-changeset-buttons a.button {
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.differential-property-table {
|
|
margin: 12px;
|
|
background: {$lightgreybackground};
|
|
border: 1px solid {$lightblueborder};
|
|
border-bottom: 1px solid {$blueborder};
|
|
}
|
|
|
|
.differential-property-table td em {
|
|
color: {$lightgreytext};
|
|
}
|
|
|
|
.differential-property-table td.oval {
|
|
background: #ffd0d0;
|
|
width: 50%;
|
|
}
|
|
|
|
.differential-property-table td.nval {
|
|
background: #d0ffd0;
|
|
width: 50%;
|
|
}
|
|
|
|
.differential-inline-undo {
|
|
padding: 4px;
|
|
text-align: center;
|
|
background: #ffeeaa;
|
|
margin: 3px 0 1px;
|
|
font: 12px;
|
|
color: 444444;
|
|
}
|
|
|
|
.differential-inline-undo a {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.differential-inline-comment-edit {
|
|
padding: 10px;
|
|
}
|
|
|
|
.differential-inline-comment-edit-buttons {
|
|
padding: 4px 0 0 0;
|
|
}
|
|
|
|
.differential-inline-comment-edit-buttons button {
|
|
float: right;
|
|
margin-left: 6px;
|
|
}
|
|
|
|
.differential-inline-comment-edit-title {
|
|
font-weight: bold;
|
|
color: #333333;
|
|
padding-bottom: 2px;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
/* When the inline editor is active, disable all the other inline comment links
|
|
on the page ("Edit", "Reply", "Delete", etc). The goal here is to prevent
|
|
issues where you open up multiple editors and run into problems with
|
|
assumptions about modalness. They are disabled explicitly by the JS, but
|
|
render them in a disabled state as well.
|
|
*/
|
|
.inline-editor-active .differential-inline-comment-links a,
|
|
.inline-editor-active .differential-inline-comment-links a:hover,
|
|
.inline-editor-active .differential-inline-comment-links a:active {
|
|
color: {$lightgreytext};
|
|
cursor: normal;
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* Create a wide band of color behind the inline edit interface so it is easy
|
|
to find by skimming the page while scrolling.
|
|
*/
|
|
tr.inline-comment-splint {
|
|
background: #f9f1d5;
|
|
}
|
|
|
|
tr.differential-inline-hidden {
|
|
display: none;
|
|
}
|
|
|
|
tr.differential-inline-loading {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
|
|
/* 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-loading {
|
|
border-top: 1px solid {$yellow};
|
|
border-bottom: 1px solid {$yellow};
|
|
background-color: {$lightyellow};
|
|
padding: 12px;
|
|
text-align: center;
|
|
}
|
|
|
|
.differential-collapse-undo {
|
|
background: #FFE;
|
|
color: #000;
|
|
padding: 1em 0em;
|
|
border: 1px solid #CCA;
|
|
text-align: center;
|
|
background-color: #FFE;
|
|
}
|
|
|
|
.differential-collapse-undo a {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.differential-file-icon-header .phui-icon-view {
|
|
display: inline-block;
|
|
margin: 0 6px 2px 0;
|
|
vertical-align: middle;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.device-phone .differential-file-icon-header .phui-icon-view {
|
|
display: none;
|
|
}
|