1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-11-26 00:32:42 +01:00
phorge-phorge/webroot/rsrc/css/layout/phabricator-source-code-view.css
bob 17befe9bca Fix source code viewer background color when using Dark Mode in Diffusion
Summary:
This CSS fix replaces the hard coded white background value by the diff.background CSS variable. This is a proposal
to address this issue but it may be a good idea to create a different CSS variable (for instance source.background)
in order to avoid any potential side effect in the future.

| Before  | After   |
|---------|---------|
|{F333617}|{F333618}|

Fix : T15056

Test Plan:
- Flush all Phorge caches
- Sign in
- Open a diffusion repository
- Open any file
- Check that viewer background color is consistent with the theme.

Reviewers: O1 Blessed Committers, valerio.bozzolan

Reviewed By: O1 Blessed Committers, valerio.bozzolan

Subscribers: tobiaswiese, valerio.bozzolan, Matthew, Cigaryno

Differential Revision: https://we.phorge.it/D25396
2023-08-17 10:31:51 +02:00

133 lines
2.8 KiB
CSS

/**
* @provides phabricator-source-code-view-css
*/
.phabricator-source-code-container {
overflow-x: auto;
overflow-y: hidden;
border: 1px solid {$paste.border};
}
.phui-oi .phabricator-source-code-container {
margin-left: 8px;
}
.phabricator-source-code {
white-space: pre-wrap;
padding: 2px 8px 1px;
width: 100%;
background: {$diff.background};
}
.phabricator-source-line {
background-color: {$paste.highlight};
text-align: right;
border-right: 1px solid {$paste.border};
color: {$sh-yellowtext};
white-space: nowrap;
-webkit-user-select: none;
user-select: none;
}
.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-coverage-highlight .phabricator-source-code,
.phabricator-source-highlight .phabricator-source-code {
background: {$paste.highlight};
}
.phabricator-source-coverage-highlight .phabricator-source-line,
.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 {
-webkit-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.05);
}
.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;
}
th.phabricator-source-coverage {
padding: 0 8px;
border-left: 1px solid {$thinblueborder};
background: {$lightgreybackground};
cursor: w-resize;
}