mirror of
https://we.phorge.it/source/phorge.git
synced 2024-09-20 09:18:48 +02:00
b4de56ef4b
Summary: assume at least 360px for a given code pane. that's about when the comment box starts fighting back anyway. we'll use the yet-to-be-built one page render for the narrow viewport cases. This address the cases as laid out in T2005. It fails the "MMMMM" case pretty horribly. However, if there is a space it works just fine and presumably folks are stretching out their windows on big glorious monitors at 160 characters wide or whatever. Re-factored things just a tad but figure I'll take a nice big chunk of "renderer" to move forward T2009 Test Plan: looked at all sorts of funky diffs Reviewers: epriestley Reviewed By: epriestley CC: chad, aran, Korvin Maniphest Tasks: T2005 Differential Revision: https://secure.phabricator.com/D4083
444 lines
9.3 KiB
CSS
444 lines
9.3 KiB
CSS
/**
|
|
* @provides differential-changeset-view-css
|
|
*/
|
|
|
|
.differential-review-stage {
|
|
margin: 0 2em 0 2em;
|
|
}
|
|
|
|
.differential-changeset {
|
|
z-index: 2;
|
|
position: relative;
|
|
}
|
|
|
|
.differential-diff {
|
|
background: transparent;
|
|
width: 100%;
|
|
}
|
|
|
|
.differential-diff td {
|
|
min-width: 320px;
|
|
/*
|
|
Disable ligatures in Firefox. Firefox 3 has fancypants ligature support, but
|
|
it gets applied to monospaced fonts, which sucks because it means that the
|
|
"fi" ligature only takes up one character, e.g. It's probably the font's
|
|
fault that it even specifies ligatures (seriously, what the hell?) but
|
|
that's hard to fix and this is "easy" to "fix": custom letter spacing
|
|
disables ligatures, as long as it's at least 0.008333-repeating pixels of
|
|
custom letter spacing. I have no idea where this number comes from, but note
|
|
that .83333.. = 5/6. -epriestley
|
|
*/
|
|
letter-spacing: 0.0083334px;
|
|
vertical-align: top;
|
|
white-space: pre-wrap;
|
|
padding: 0 8px 1px;
|
|
line-height: 16px;
|
|
}
|
|
|
|
.differential-diff th {
|
|
text-align: right;
|
|
padding: 2px 6px 0px 0px;
|
|
width: 4%;
|
|
min-width: 45px;
|
|
max-width: 4%;
|
|
vertical-align: top;
|
|
background: #eeeeee;
|
|
color: #888888;
|
|
cursor: pointer;
|
|
border-style: solid;
|
|
border-width: 0px 1px;
|
|
border-color: #eeeeee #999999 #eeeeee #dddddd;
|
|
font-size: 11px;
|
|
overflow: hidden;
|
|
|
|
-moz-user-select: -moz-none;
|
|
-khtml-user-select: none;
|
|
-webkit-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
.differential-diff td.left {
|
|
width: 45%;
|
|
}
|
|
|
|
.differential-diff td.right,
|
|
.differential-diff td.right1 {
|
|
width: 43%;
|
|
}
|
|
|
|
.differential-diff td.right2 {
|
|
width: 44.3%;
|
|
}
|
|
.differential-diff td.right3 {
|
|
width: 45%;
|
|
}
|
|
|
|
.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.7%;
|
|
width: 0.7%;
|
|
padding: 0;
|
|
}
|
|
|
|
.differential-diff td.new-copy,
|
|
.differential-diff td.new-copy span.bright {
|
|
background: #ffffaa;
|
|
}
|
|
|
|
.differential-diff td.new-move,
|
|
.differential-diff td.new-move span.bright {
|
|
background: #eeee44;
|
|
}
|
|
|
|
.differential-diff td.comment {
|
|
background: #dddddd;
|
|
}
|
|
|
|
.differential-diff td.cov {
|
|
min-width: 1.3%;
|
|
width: 1.3%;
|
|
padding: 0;
|
|
}
|
|
|
|
td.cov-U {
|
|
background: #dd8866;
|
|
}
|
|
|
|
td.cov-C {
|
|
background: #66bbff;
|
|
}
|
|
|
|
td.cov-N {
|
|
background: #ddeeff;
|
|
}
|
|
|
|
td.cov-X {
|
|
background: #aa00aa;
|
|
}
|
|
|
|
.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: #ffffee;
|
|
padding: 1em 0em;
|
|
border: 1px solid #ccccaa;
|
|
}
|
|
|
|
.differential-diff td.show-more,
|
|
.differential-diff td.differential-shield {
|
|
font-family: "Verdana";
|
|
font-size: 11px;
|
|
white-space: normal;
|
|
}
|
|
|
|
.differential-diff td.show-more {
|
|
text-align: center;
|
|
color: #999966;
|
|
}
|
|
|
|
.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-meta-notice {
|
|
border: 1px solid #ffdd99;
|
|
background: #ffeeaa;
|
|
font-family: "Verdana";
|
|
font-size: 11px;
|
|
padding: 1em;
|
|
margin: 0 0 6px 0;
|
|
}
|
|
|
|
.differential-changeset h1 {
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
padding: 2px 0 8px;
|
|
}
|
|
|
|
.differential-changeset {
|
|
margin: 0.5em 0;
|
|
padding: 10px 0px 20px;
|
|
}
|
|
|
|
.differential-reticle {
|
|
background: #ffeeaa;
|
|
border: 1px solid #ffcc00;
|
|
position: absolute;
|
|
z-index: 2;
|
|
opacity: 0.5;
|
|
top: 0px;
|
|
left: 0px;
|
|
}
|
|
|
|
.differential-inline-comment,
|
|
.differential-inline-comment-edit {
|
|
background: #f9f9f1;
|
|
border: 1px solid #aaaa88;
|
|
font-family: Verdana;
|
|
font-size: 11px;
|
|
margin: 6px 0px;
|
|
padding: 8px 10px;
|
|
width: 100%;
|
|
-moz-box-sizing: border-box;
|
|
-webkit-box-sizing: border-box;
|
|
overflow: hidden;
|
|
white-space: normal;
|
|
}
|
|
|
|
.differential-inline-comment-unsaved-draft {
|
|
background: #f1f1f1;
|
|
border: 1px dashed #666666;
|
|
}
|
|
|
|
.differential-inline-comment-head {
|
|
font-weight: bold;
|
|
color: #333333;
|
|
border-bottom: 1px solid #ccccaa;
|
|
padding-bottom: 6px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.differential-inline-comment-unsaved-draft .differential-inline-comment-head {
|
|
border-bottom: 1px solid #aaaaaa;
|
|
}
|
|
|
|
.differential-inline-comment-synthetic {
|
|
background: #efffff;
|
|
border: 1px solid #20dfdf;
|
|
}
|
|
|
|
.differential-inline-comment-synthetic .differential-inline-comment-head {
|
|
border-bottom: 1px solid #20dfdf;
|
|
}
|
|
|
|
|
|
.differential-inline-comment-links,
|
|
.differential-inline-comment-line {
|
|
font-weight: normal;
|
|
font-style: italic;
|
|
color: #666666;
|
|
float: right;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.differential-inline-comment-links {
|
|
margin-left: 8px;
|
|
font-style: normal;
|
|
}
|
|
|
|
|
|
.differential-inline-comment-edit-textarea {
|
|
width: 99%;
|
|
height: 12em;
|
|
}
|
|
|
|
.differential-changeset-buttons {
|
|
float: right;
|
|
}
|
|
|
|
.differential-changeset-buttons a.button {
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.differential-property-table {
|
|
width: auto;
|
|
margin: .75em auto;
|
|
background: #e3e3e3;
|
|
}
|
|
|
|
.differential-property-table th {
|
|
text-align: right;
|
|
width: 10em;
|
|
font-weight: bold;
|
|
color: #666666;
|
|
white-space: nowrap;
|
|
padding: 4px 8px;
|
|
border-right: 1px solid #666666;
|
|
}
|
|
|
|
.differential-property-table td {
|
|
padding: 4px 8px;
|
|
width: 35em;
|
|
}
|
|
|
|
.differential-property-table td em {
|
|
color: #888888;
|
|
}
|
|
|
|
.differential-property-table tr.property-table-header th,
|
|
.differential-property-table tr.property-table-header td {
|
|
text-align: center;
|
|
font-weight: bold;
|
|
border-bottom: 1px solid #666666;
|
|
}
|
|
|
|
.differential-property-table td.oval {
|
|
background: #ffd0d0;
|
|
}
|
|
|
|
.differential-property-table td.nval {
|
|
background: #d0ffd0;
|
|
}
|
|
|
|
.differential-property-table tr.property-table-header td.oval {
|
|
background: #ffaaaa;
|
|
}
|
|
|
|
.differential-property-table tr.property-table-header td.nval {
|
|
background: #aaffaa;
|
|
}
|
|
|
|
.differential-inline-undo {
|
|
padding: 4px;
|
|
text-align: center;
|
|
background: #ffeeaa;
|
|
margin: 3px 0 1px;
|
|
font: 11px "Verdana";
|
|
color: 444444;
|
|
}
|
|
|
|
.differential-inline-undo a {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.differential-inline-comment-edit {
|
|
padding: 8px 18px 8px 12px;
|
|
}
|
|
|
|
.differential-inline-comment-edit-buttons {
|
|
padding: 2px 0px;
|
|
}
|
|
|
|
.differential-inline-comment-edit-buttons button {
|
|
float: right;
|
|
margin-left: 6px;
|
|
}
|
|
|
|
.differential-inline-comment-edit-title {
|
|
font-weight: bold;
|
|
color: #333333;
|
|
border-bottom: 1px solid #ccccaa;
|
|
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: #888888;
|
|
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 a {
|
|
color: #3b5998;
|
|
}
|
|
|
|
.differential-loading {
|
|
color: #999966;
|
|
background: #ffffee;
|
|
border: 1px solid #ccccaa;
|
|
padding: 1em;
|
|
text-align: center;
|
|
font-size: 11px;
|
|
}
|