Changeset View
Changeset View
Standalone View
Standalone View
webroot/rsrc/css/application/differential/changeset-view.css
| /** | /** | ||||
| * @provides differential-changeset-view-css | * @provides differential-changeset-view-css | ||||
| * @requires phui-inline-comment-view-css | |||||
| */ | */ | ||||
| .differential-changeset { | .differential-changeset { | ||||
| position: relative; | position: relative; | ||||
| margin: 0; | margin: 0; | ||||
| padding-top: 32px; | padding-top: 32px; | ||||
| overflow-x: auto; | overflow-x: auto; | ||||
| } | } | ||||
| Show All 36 Lines | .differential-diff col.copy { | ||||
| width: 0.5%; | width: 0.5%; | ||||
| } | } | ||||
| .differential-diff col.cov { | .differential-diff col.cov { | ||||
| width: 1%; | width: 1%; | ||||
| } | } | ||||
| .differential-diff td { | .differential-diff td { | ||||
| vertical-align: top; | vertical-align: top; | ||||
| white-space: pre-wrap; | white-space: pre-wrap; | ||||
| word-wrap: break-word; | word-wrap: break-word; | ||||
| padding: 0 8px 1px; | padding: 0 8px 1px; | ||||
| line-height: 16px; | line-height: 16px; | ||||
| } | } | ||||
| .device .differential-diff td { | .device .differential-diff td { | ||||
| padding: 0 4px 1px; | padding: 0 4px 1px; | ||||
| } | } | ||||
| .device .differential-diff .inline td { | |||||
| padding: 4px; | |||||
| } | |||||
| .differential-diff td .zwsp { | .differential-diff td .zwsp { | ||||
| position: absolute; | position: absolute; | ||||
| width: 0; | width: 0; | ||||
| } | } | ||||
| .differential-diff th { | .differential-diff th { | ||||
| text-align: right; | text-align: right; | ||||
| padding: 2px 6px 0px 0px; | padding: 2px 6px 0px 0px; | ||||
| vertical-align: top; | vertical-align: top; | ||||
| background: {$lightbluebackground}; | background: {$lightbluebackground}; | ||||
| color: {$bluetext}; | color: {$bluetext}; | ||||
| cursor: pointer; | cursor: pointer; | ||||
| border-right: 1px solid {$thinblueborder}; | border-right: 1px solid {$thinblueborder}; | ||||
| overflow: hidden; | overflow: hidden; | ||||
| -moz-user-select: -moz-none; | -moz-user-select: -moz-none; | ||||
| -khtml-user-select: none; | -khtml-user-select: none; | ||||
| -webkit-user-select: none; | -webkit-user-select: none; | ||||
| -ms-user-select: none; | -ms-user-select: none; | ||||
| user-select: none; | user-select: none; | ||||
| } | } | ||||
| .differential-diff th.selected { | .differential-diff th.selected { | ||||
| background: {$hovergrey}; | background-color: {$sh-yellowbackground}; | ||||
| } | } | ||||
| .differential-changeset-immutable .differential-diff th { | .differential-changeset-immutable .differential-diff th { | ||||
| cursor: auto; | cursor: auto; | ||||
| } | } | ||||
| .differential-diff td.old { | .differential-diff td.old { | ||||
| background: #ffd0d0; | background: #ffd0d0; | ||||
| ▲ Show 20 Lines • Show All 99 Lines • ▼ Show 20 Lines | |||||
| .device .differential-diff td.show-context, | .device .differential-diff td.show-context, | ||||
| .device .differential-diff td.differential-shield { | .device .differential-diff td.differential-shield { | ||||
| padding: 6px 0; | padding: 6px 0; | ||||
| } | } | ||||
| .differential-diff td.show-more, | .differential-diff td.show-more, | ||||
| .differential-diff td.differential-shield { | .differential-diff td.differential-shield { | ||||
| font: {$basefont}; | font: {$basefont}; | ||||
| font-size: 12px; | font-size: 12px; | ||||
| white-space: normal; | white-space: normal; | ||||
| } | } | ||||
| .differential-diff td.show-more { | .differential-diff td.show-more { | ||||
| text-align: center; | text-align: center; | ||||
| color: {$bluetext}; | color: {$bluetext}; | ||||
| } | } | ||||
| Show All 25 Lines | .differential-diff .differential-image-diff td { | ||||
| padding: 8px; | padding: 8px; | ||||
| } | } | ||||
| .differential-image-stage { | .differential-image-stage { | ||||
| overflow: auto; | overflow: auto; | ||||
| } | } | ||||
| .differential-meta-notice { | .differential-meta-notice { | ||||
| border-top: 1px solid {$yellow}; | border-top: 1px solid {$sh-lightyellowborder}; | ||||
| border-bottom: 1px solid {$yellow}; | border-bottom: 1px solid {$sh-lightyellowborder}; | ||||
| background-color: {$lightyellow}; | background-color: {$sh-yellowbackground}; | ||||
| padding: 12px; | padding: 12px; | ||||
| } | } | ||||
| .differential-meta-notice + .differential-diff { | .differential-meta-notice + .differential-diff { | ||||
| border-top: none; | border-top: none; | ||||
| } | } | ||||
| .differential-changeset h1 { | .differential-changeset h1 { | ||||
| font-size: 15px; | font-size: 15px; | ||||
| padding: 2px 0 12px 12px; | padding: 2px 0 12px 12px; | ||||
| line-height: 18px; | line-height: 18px; | ||||
| } | } | ||||
| .device-phone .differential-changeset h1 { | .device-phone .differential-changeset h1 { | ||||
| word-break: break-word; | word-break: break-word; | ||||
| margin-right: 8px; | margin-right: 8px; | ||||
| } | } | ||||
| .differential-reticle { | .differential-reticle { | ||||
| background: {$lightyellow}; | background-color: {$sh-yellowbackground}; | ||||
| border: 1px solid {$yellow}; | border: 1px solid {$sh-yellowborder}; | ||||
| position: absolute; | position: absolute; | ||||
| opacity: 0.5; | opacity: 0.5; | ||||
| top: 0px; | top: 0; | ||||
| left: 0px; | left: 0; | ||||
| box-sizing: border-box; | box-sizing: border-box; | ||||
| } | } | ||||
| .differential-inline-comment, | .differential-diff .inline td { | ||||
| .differential-inline-comment-edit { | padding: 8px 12px; | ||||
| 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 { | .differential-loading { | ||||
| padding: 0; | border-top: 1px solid {$yellow}; | ||||
| } | border-bottom: 1px solid {$yellow}; | ||||
| background-color: {$lightyellow}; | |||||
| .differential-inline-comment-unsaved-draft { | padding: 12px; | ||||
| background: #f1f1f1; | text-align: center; | ||||
| 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 { | .differential-collapse-undo { | ||||
| background: {$lightblue}; | color: {$darkbluetext}; | ||||
| padding: 12px; | |||||
| border: 1px solid {$blue}; | border: 1px solid {$blue}; | ||||
| text-align: center; | |||||
| background-color: {$lightblue}; | |||||
| } | } | ||||
| .differential-inline-comment-synthetic .differential-inline-comment-head { | .differential-collapse-undo a { | ||||
| border-bottom: 1px solid {$blueborder}; | font-weight: bold; | ||||
| } | |||||
| .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; | |||||
| } | |||||
| input.differential-inline-done[type="checkbox"] { | |||||
| margin: 0; | |||||
| display: inline; | |||||
| cursor: pointer; | |||||
| } | } | ||||
| input.differential-inline-done[disabled="disabled"] { | .differential-file-icon-header .phui-icon-view { | ||||
| cursor: auto; | display: inline-block; | ||||
| margin: 0 6px 2px 0; | |||||
| vertical-align: middle; | |||||
| font-size: 14px; | |||||
| } | } | ||||
| .device-phone .differential-file-icon-header .phui-icon-view { | |||||
| .differential-inline-comment-edit-body .aphront-form-input { | display: none; | ||||
| margin: 0; | |||||
| width: 100%; | |||||
| } | } | ||||
| .differential-changeset-buttons { | .differential-changeset-buttons { | ||||
| float: right; | float: right; | ||||
| margin-right: 16px; | margin-right: 16px; | ||||
| } | } | ||||
| .device-phone .differential-changeset-buttons { | .device-phone .differential-changeset-buttons { | ||||
| Show All 21 Lines | .differential-property-table td.oval { | ||||
| width: 50%; | width: 50%; | ||||
| } | } | ||||
| .differential-property-table td.nval { | .differential-property-table td.nval { | ||||
| background: #d0ffd0; | background: #d0ffd0; | ||||
| width: 50%; | width: 50%; | ||||
| } | } | ||||
| .differential-inline-undo { | |||||
| padding: 4px; | |||||
| text-align: center; | |||||
| background: {$lightyellow}; | |||||
| border: 1px solid {$yellow}; | |||||
| margin: 3px 0 1px; | |||||
| color: {$darkgreytext}; | |||||
| font: {$basefont}; | |||||
| font-size: 12px; | |||||
| } | |||||
| .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; | |||||
| } | |||||
| tr.differential-inline-hidden { | tr.differential-inline-hidden { | ||||
| display: none; | display: none; | ||||
| } | } | ||||
| tr.differential-inline-loading { | tr.differential-inline-loading { | ||||
| opacity: 0.5; | 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; | |||||
| } | |||||
| .inline-is-done { | |||||
| opacity: 0.75; | |||||
| } | |||||
| .inline-state-is-draft input.differential-inline-done[type="checkbox"] { | |||||
| /* TODO: Possibly style this. */ | |||||
| } | |||||