1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-12-02 11:42:42 +01:00
phorge-phorge/webroot/rsrc/css/layout/phabricator-source-code-view.css
epriestley 5b3a351852 Use pseudoelements, not Zero Width Space, to implement copy/paste behavior in Paste/Diffusion
Summary:
Depends on D19348. Ref T13105. When copying text from Paste or Diffusion, we'd like to copy only source, not line numbers.

We currently accomplish this with zero-width spaces plus a trigger that fires on "copy" in Paste and Diffusion. This is quite gross.

In the new-style Harbormaster logs, we use an approach that seems slightly better: CSS psuedoelements.

This isn't a complete solution (see also PHI504 / T5032) but puts us in a slightly better place.

Use it in Paste/Files/Diffusion too.

This gives us good behavior in all browsers in Files and Paste.

This gives us good behavior in Chrome and Firefox in Diffusion. Safari will copy (but not visually select) blame information in Diffusion. I think we can live with that for now.

Test Plan: Selected and copy/pasted stuff in Diffusion, Files, and Paste. Got good behavior everywhere except Safari + Diffusion.

Reviewers: amckinley

Reviewed By: amckinley

Maniphest Tasks: T13105

Differential Revision: https://secure.phabricator.com/D19349
2018-04-11 17:28:46 -07:00

125 lines
2.6 KiB
CSS

/**
* @provides phabricator-source-code-view-css
*/
.phabricator-source-code-container {
overflow-x: auto;
overflow-y: hidden;
border: 1px solid {$paste.border};
border-radius: 3px;
}
.phui-oi .phabricator-source-code-container {
margin-left: 8px;
}
.phabricator-source-code {
white-space: pre-wrap;
padding: 2px 8px 1px;
width: 100%;
background: #ffffff;
}
.phabricator-source-line {
background-color: {$paste.highlight};
text-align: right;
border-right: 1px solid {$paste.border};
color: {$sh-yellowtext};
}
.phabricator-source-line > a::before {
/* Render the line numbers as a pseudo-element so they don't get copied. */
content: attr(data-n);
}
th.phabricator-source-line a,
th.phabricator-source-line span {
display: block;
padding: 2px 6px 1px 12px;
}
th.phabricator-source-line a {
color: {$darkbluetext};
}
th.phabricator-source-line a:hover {
background: {$paste.border};
text-decoration: none;
}
.phabricator-source-highlight .phabricator-source-code {
background: {$paste.highlight};
}
.phabricator-source-highlight .phabricator-source-line {
background: {$paste.border};
}
.phabricator-source-code-summary {
padding-bottom: 8px;
}
/* If a Paste has enormously long lines, truncate them in the summary on the
list page. They'll be fully visible on the Paste itself. */
.phabricator-source-code-summary .phabricator-source-code-container {
overflow-x: hidden;
}
.phabricator-source-code-summary .phabricator-source-code {
white-space: nowrap;
}
.phabricator-source-blame-skip,
.phabricator-source-blame-info {
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
.phabricator-source-blame-skip {
min-width: 28px;
border-right: 1px solid {$thinblueborder};
}
.phabricator-source-blame-info {
white-space: nowrap;
min-width: 130px;
border-right: 1px solid {$paste.border};
padding-right: 8px;
vertical-align: middle;
color: #ffffff;
}
.phabricator-source-blame-info a {
color: {$darkbluetext};
text-shadow: 1px 1px rgba(0, 0, 0, 0.111);
}
.phabricator-source-blame-skip a {
/* Give the user a larger click target. */
display: block;
padding: 2px 8px;
}
.phabricator-source-blame-skip a .phui-icon-view {
color: {$darkbluetext};
}
.device-desktop .phabricator-source-blame-skip a:hover {
background: {$bluebackground};
}
.phabricator-source-blame-author {
display: inline-block;
vertical-align: middle;
padding: 0;
margin: 0 6px 0 8px;
width: 16px;
height: 16px;
background-size: 100% 100%;
background-repeat: no-repeat;
}