Page MenuHomePhabricator
Differential D12171 Diff 29291 webroot/rsrc/css/application/differential/phui-inline-comment.css

Changeset View

Standalone View

View Options

webroot/rsrc/css/application/differential/phui-inline-comment.css

  • This file was added.
/**
* @provides phui-inline-comment-view-css
*/
.differential-comment-list .anchor-target {
background-color: #ffffdd;
border-color: #ffff00;
}
/* 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-inline-comment-content {
overflow: auto;
}
.differential-inline-comment,
.differential-inline-comment-edit {
background: #fff;
border: 1px solid {$sh-yellowborder};
font: {$basefont};
margin: 0;
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
white-space: normal;
border-radius: 3px;
}
.differential-inline-comment-unsaved-draft {
border: 1px solid {$lightgreyborder};
}
.differential-inline-comment-head {
font-weight: bold;
color: {$darkbluetext};
border-bottom: 1px solid {$sh-lightyellowborder};
padding: 4px 5px 2px 12px;
background-color: {$sh-yellowbackground};
}
.device-desktop .differential-inline-comment .button.simple:hover
.phui-icon-view,
.device-desktop .differential-inline-comment .button.simple:hover {
color: {$sky};
}
.differential-inline-comment-content {
padding: 12px;
}
.differential-inline-comment-unsaved-draft .differential-inline-comment-head {
border-bottom: 1px solid {$lightgreyborder};
background-color: {$lightgreybackground};
}
/* Tighten up spacing on replies */
.differential-inline-comment.inline-comment-is-reply {
margin-top: -4px;
}
.differential-inline-comment .inline-head-right {
float: right;
}
.differential-inline-comment .inline-head-right .button {
vertical-align: top;
}
.differential-inline-comment .inline-head-left {
float: left;
padding: 5px 0;
}
.device-phone .differential-inline-comment .inline-head-left {
float: none;
}
.device-phone .differential-inline-comment .inline-head-right {
float: none;
}
.device-phone .differential-inline-comment .inline-head-right .mml {
margin: 0 4px 0 0;
}
.device-phone .differential-inline-comment .differential-inline-comment-head {
padding: 0px 0px 4px 8px;
}
/* - Sythetic Comment ---------------------------------------------------------
Comments left by our robot overlords.
*/
.differential-inline-comment.differential-inline-comment-synthetic {
border: 1px solid {$blue};
}
.differential-inline-comment.differential-inline-comment-synthetic
.differential-inline-comment-head {
border-bottom: 1px solid {$blueborder};
background-color: {$lightblue};
}
.differential-inline-comment.differential-inline-comment-synthetic
.button.simple {
border-color: {$blue};
}
.differential-inline-comment.differential-inline-comment-synthetic
.button.simple .phui-icon-view {
color: {$blue};
}
.differential-inline-comment.differential-inline-comment-synthetic
.differential-inline-comment-head {
padding-bottom: 4px;
}
/* - New/Edit Inline Comment --------------------------------------------------
Styles for when you are creating or editing an inline comment.
*/
.differential-inline-comment-edit-body .aphront-form-input {
margin: 0;
width: 100%;
}
.differential-inline-comment-edit {
padding: 8px;
}
.differential-inline-comment-edit-buttons {
padding: 8px 0 0 0;
}
.differential-inline-comment-edit-buttons button {
float: right;
margin-left: 6px;
}
.differential-inline-comment-edit-title {
font-weight: bold;
color: {$darkbluetext};
padding: 4px 0 12px;
font-size: 14px;
}
.differential-inline-comment-unsaved-draft .phui-button-bar .button {
border-color: {$lightgreyborder};
}
.differential-inline-comment-unsaved-draft .phui-button-bar .phui-icon-view {
color: {$lightgreytext};
}
.differential-inline-comment-edit {
background-color: {$lightgreybackground};
border: 1px solid {$lightgreyborder};
}
.differential-inline-comment-edit .remarkup-assist-textarea {
border-left-color: {$lightgreyborder};
border-right-color: {$lightgreyborder};
border-bottom-color: {$greyborder};
}
.differential-inline-comment-edit .remarkup-assist-bar {
border-left-color: {$lightgreyborder};
border-right-color: {$lightgreyborder};
border-top-color: {$lightgreyborder};
}
.differential-inline-comment-edit .aphront-form-control-textarea {
padding: 0;
}
/* - Action Buttons -----------------------------------------------------------
Reply, Edit, Delete, View, Button Bars...
*/
.differential-inline-comment .differential-inline-done-label,
.differential-inline-comment .button.simple {
border-color: {$sh-yellowborder};
color: {$sh-yellowicon};
}
.differential-inline-comment .button.simple .phui-icon-view {
color: {$sh-yellowicon};
}
.differential-inline-comment.differential-inline-comment-unsaved-draft
.differential-inline-done-label,
.differential-inline-comment.differential-inline-comment-unsaved-draft
.button.simple {
border-color: {$lightgreyborder};
color: {$lightgreytext};
}
.differential-inline-comment.differential-inline-comment-unsaved-draft
.button.simple .phui-icon-view {
color: {$lightgreytext};
}
.device-desktop .differential-inline-comment-unsaved-draft
a.button.simple:hover {
border-color: {$lightgreyborder};
}
/* - Done Button --------------------------------------------------------------
Default colors, hovers, checked styles for the Done Button.
*/
.differential-inline-done-label {
border: 1px solid {$sh-yellowborder};
border-radius: 3px;
display: inline-block;
overflow: hidden;
margin-left: 8px;
padding: 3px 8px 4px;
cursor: pointer;
}
.differential-inline-done-label .differential-inline-done {
margin: 0 6px 0 0;
display: inline;
cursor: pointer;
}
input.differential-inline-done[disabled="disabled"] {
cursor: auto;
}
.device-desktop .differential-inline-comment.inline-is-done
.differential-inline-done-label:hover,
.device-desktop .differential-inline-comment
.differential-inline-done-label:hover {
background-color: #fff;
color: {$sky};
border-color: {$lightblueborder};
}
.differential-inline-comment .differential-inline-comment-head
.differential-inline-done-label.done-is-disabled {
color: {$sh-yellowtext};
border-color: {$sh-yellowborder};
opacity: .5;
}
.differential-inline-comment.differential-inline-comment-unsaved-draft
.differential-inline-done-label.done-is-disabled {
color: {$lightgreytext};
border-color: {$lightgreyborder};
opacity: .5;
}
.device-desktop
.differential-inline-comment.differential-inline-comment-unsaved-draft
.differential-inline-done-label.done-is-disabled:hover {
background-color: transparent;
cursor: auto;
}
.differential-inline-comment
.differential-inline-done-label.done-is-disabled {
border-color: {$sh-lightyellowborder};
color: {$sh-yellowtext};
}
.device-desktop .differential-inline-comment
.differential-inline-done-label.done-is-disabled:hover {
background-color: transparent;
cursor: auto;
}
.differential-inline-comment.inline-is-done
.differential-inline-done-label {
background-color: #fff;
border-color: {$lightblueborder};
color: {$sky} !important;
opacity: 1;
}
.device-desktop .differential-inline-comment.inline-is-done
.differential-inline-done-label:hover {
background-color: #fff;
color: {$sky};
}
/* - Inline Is Done -----------------------------------------------------------
Is Done for Diff Author = grey, for Diff Viewer = yellow.
*/
.differential-inline-comment.inline-is-done {
border-color: {$lightgreyborder};
}
.differential-inline-comment.inline-is-done
.differential-inline-comment-head {
background-color: {$lightgreybackground};
border-bottom-color: {$lightgreyborder};
}
.differential-inline-comment.inline-is-done .differential-inline-comment-head
.button.simple,
.differential-inline-comment.inline-is-done .differential-inline-comment-head
.differential-inline-done-label {
border-color: {$lightgreyborder};
color: {$lightgreytext};
}
.differential-inline-comment.inline-is-done
.button.simple .phui-icon-view {
color: {$lightgreytext};
}
/* - Unsaved Draft ------------------------------------------------------------
The Unsubmitted state of the comment / done checkbox styles.
*/
.differential-inline-comment .inline-draft-text {
display: none;
}
.differential-inline-comment.differential-inline-comment-unsaved-draft
.inline-draft-text {
display: inline-block;
}
/* - Undo ---------------------------------------------------------------------
A wild undo box appears!
*/
.differential-inline-undo {
padding: 8px;
text-align: center;
background: {$sh-yellowbackground};
border: 1px solid {$sh-yellowborder};
margin: 4px 0;
color: {$darkgreytext};
font: {$basefont};
font-size: 13px;
border-radius: 3px;
}
.differential-inline-undo a {
font-weight: bold;
}
Phabricator · Built by Phacility