1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-09-20 17:28:51 +02:00
phorge-phorge/webroot/rsrc/css/application/differential/changeset-view.css
epriestley aba209e999 Hide the Differential scroll objective list on trackpad systems
Summary:
Ref T12733. In the longer run I'd like to just push this out from the edge, but that currently gets us into trouble since we start bumping into content. On my system, the trackpad scrollbar also expands in size when moused over, so the minimum number of pixels we need to push it out is approximatley 15px. This hits body content and the persistent chat.

For now, just disable this element on trackpad systems.

Test Plan:
Disconnected all USB peripherals, quit and relaunched Safari, saw no objective list.

Reconnected mouse, relaunched Safari, saw objective list.

Reviewers: chad

Reviewed By: chad

Maniphest Tasks: T12733

Differential Revision: https://secure.phabricator.com/D17974
2017-05-20 07:56:21 -07:00

443 lines
8 KiB
CSS

/**
* @provides differential-changeset-view-css
* @requires phui-inline-comment-view-css
*/
.differential-changeset {
position: relative;
margin: 0;
padding-top: 16px;
overflow-x: auto;
/* Fixes what seems to be a layout bug in Firefox which causes scrollbars,
to appear unpredictably, see discussion in T7690. */
overflow-y: hidden;
}
.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: 1px 8px;
}
.device .differential-diff td {
padding: 1px 4px;
}
.differential-diff td .zwsp {
position: absolute;
width: 0;
}
.differential-diff th {
text-align: right;
padding: 1px 6px 1px 0;
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;
}
.prose-diff {
padding: 12px 0;
white-space: pre-wrap;
color: {$greytext};
}
.prose-diff-frame {
padding: 12px;
}
.prose-diff span.old,
.prose-diff span.new {
padding: 0 2px;
}
.prose-diff span.old,
.prose-diff span.new {
color: {$darkgreytext};
}
.differential-changeset-immutable .differential-diff th {
cursor: auto;
}
.differential-diff th.old {
border-right-color: {$old-bright};
}
.differential-diff th.new {
border-right-color: {$new-bright};
}
.differential-diff td.old {
background: {$old-background};
}
.differential-diff td.new {
background: {$new-background};
}
.differential-diff td.old-rebase {
background: #ffeeee;
}
.differential-diff td.new-rebase {
background: #eeffee;
}
.differential-diff td.old span.bright,
.differential-diff td.old-full,
.prose-diff span.old {
background: {$old-bright};
}
.differential-diff td.new span.bright,
.differential-diff td.new-full,
.prose-diff span.new {
background: {$new-bright};
}
.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: {$copy-background};
}
.differential-diff td.new-move,
.differential-diff td.new-move span.bright {
background: {$move-background};
}
.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: {$smallerfontsize};
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 {$sh-lightyellowborder};
border-bottom: 1px solid {$sh-lightyellowborder};
background-color: {$sh-yellowbackground};
padding: 12px;
}
.differential-meta-notice + .differential-diff {
border-top: none;
}
.differential-changeset h1 {
font-size: {$biggestfontsize};
padding: 2px 0 20px 12px;
line-height: 20px;
color: #000;
}
.device-phone .differential-changeset h1 {
word-break: break-word;
margin-right: 8px;
}
.differential-reticle {
background-color: {$sh-yellowbackground};
border: 1px solid {$sh-yellowborder};
position: absolute;
opacity: 0.5;
top: 0;
left: 0;
box-sizing: border-box;
pointer-events: none;
}
.differential-diff .inline > td {
padding: 0;
}
.differential-loading {
border-top: 1px solid {$yellow};
border-bottom: 1px solid {$yellow};
background-color: {$lightyellow};
padding: 12px;
text-align: center;
}
.differential-collapse-undo {
color: {$darkbluetext};
padding: 12px;
border: 1px solid {$blue};
text-align: center;
background-color: {$lightblue};
margin: 8px;
}
.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;
}
.differential-changeset-buttons {
float: right;
margin-right: 12px;
}
.device-phone .differential-changeset-buttons .button .phui-button-text {
visibility: hidden;
width: 0;
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%;
}
tr.differential-inline-hidden {
display: none;
}
tr.differential-inline-loading {
opacity: 0.5;
}
.differential-review-stage {
position: relative;
}
.diff-banner {
position: fixed;
top: 0;
left: 0;
right: 0;
background: rgba(255, 255, 255, 0.95);
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
border-bottom: 1px solid {$lightgreyborder};
padding: 12px 18px;
vertical-align: middle;
font-weight: bold;
font-size: {$biggerfontsize};
}
.diff-banner .phui-icon-view {
margin-right: 4px;
}
.diff-banner-path {
color: {$greytext};
}
.scroll-objective-list {
position: fixed;
right: 0;
width: 24px;
top: 48px;
bottom: 48px;
background: rgba(255, 255, 255, 0.50);
border-style: solid;
border-color: rgba(255, 255, 255, 0.95);
border-width: 1px 0 1px 1px;
box-shadow: -1px 0 2px rgba(255, 255, 255, 0.25);
overflow: hidden;
}
.scroll-objective-list.has-aesthetic-scrollbar {
/* For now, hide this element on systems with aesthetic scrollbars. */
display: none;
}
.scroll-objective {
display: block;
position: absolute;
box-sizing: border-box;
cursor: pointer;
left: 8px;
}
.scroll-objective .phui-icon-view {
text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.25);
display: block;
height: 14px;
}