mirror of
https://we.phorge.it/source/phorge.git
synced 2024-11-10 17:02:41 +01:00
3da020b493
Summary: These remarkup spans bleed into other areas, but afaik they only seem to be needed on the bright rule. Also normalized the height of the label, which changed when we changed button size. Test Plan: Review many diffs and inline comments. If this rule altered something else I can't find, let me know? Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin, epriestley Differential Revision: https://secure.phabricator.com/D12657
452 lines
10 KiB
CSS
452 lines
10 KiB
CSS
/**
|
|
* @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;
|
|
}
|
|
|
|
.inline-state-is-draft {
|
|
border: 1px dashed {$greyborder};
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.inline-state-is-draft .differential-inline-comment-head {
|
|
border-bottom: 1px dashed {$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;
|
|
}
|
|
|
|
/* - Ghost Comment ------------------------------------------------------------
|
|
|
|
Comments from older or newer versions of the changeset.
|
|
|
|
*/
|
|
|
|
.differential-inline-comment.inline-comment-ghost {
|
|
border: 1px solid {$lightgreyborder};
|
|
opacity: 0.75;
|
|
}
|
|
|
|
.differential-inline-comment.inline-comment-ghost
|
|
.differential-inline-comment-head {
|
|
border-bottom: 1px solid {$lightgreyborder};
|
|
background-color: {$lightgreybackground};
|
|
}
|
|
|
|
.differential-inline-comment.inline-comment-ghost
|
|
.button.simple .phui-icon-view {
|
|
color: {$lightgreytext};
|
|
}
|
|
|
|
/* - New/Edit Inline Comment --------------------------------------------------
|
|
|
|
Styles for when you are creating or editing an inline comment.
|
|
|
|
*/
|
|
|
|
.differential-inline-comment .done-label {
|
|
display: inline-block;
|
|
color: {$sh-yellowicon};
|
|
padding: 4px;
|
|
}
|
|
|
|
.differential-inline-comment.inline-state-is-draft .done-label,
|
|
.differential-inline-comment.inline-comment-ghost .done-label {
|
|
color: {$lightgreytext};
|
|
}
|
|
|
|
/* - 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;
|
|
}
|
|
|
|
.inline-state-is-draft .phui-button-bar .button {
|
|
border-color: {$lightgreyborder};
|
|
}
|
|
|
|
.inline-state-is-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.inline-state-is-draft
|
|
.differential-inline-done-label,
|
|
.differential-inline-comment.inline-state-is-draft
|
|
.button.simple,
|
|
.differential-inline-comment.inline-comment-ghost
|
|
.button.simple {
|
|
border-color: {$lightgreyborder};
|
|
color: {$lightgreytext};
|
|
}
|
|
|
|
.differential-inline-comment.inline-state-is-draft
|
|
.button.simple .phui-icon-view {
|
|
color: {$lightgreytext};
|
|
}
|
|
|
|
.device-desktop .inline-state-is-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;
|
|
padding: 4px 8px 5px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.differential-inline-done-label .differential-inline-done {
|
|
margin: 0 6px 0 0;
|
|
display: inline;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.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.inline-is-done
|
|
.differential-inline-done-label {
|
|
background-color: #fff;
|
|
border-color: {$lightblueborder};
|
|
color: {$sky};
|
|
opacity: 1;
|
|
}
|
|
|
|
.device-desktop .differential-inline-comment.inline-is-done
|
|
.differential-inline-done-label:hover {
|
|
background-color: #fff;
|
|
color: {$sky};
|
|
}
|
|
|
|
.differential-inline-comment.inline-is-done .differential-inline-comment-head
|
|
.button-done {
|
|
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 {
|
|
border-color: {$lightgreyborder};
|
|
color: {$lightgreytext};
|
|
}
|
|
|
|
.differential-inline-comment.inline-is-done .differential-inline-comment-head
|
|
.differential-inline-done-label {
|
|
color: {$sky};
|
|
background-color: #fff;
|
|
border-color: {$sky};
|
|
}
|
|
|
|
.differential-inline-comment.inline-is-done
|
|
.button.simple .phui-icon-view {
|
|
color: {$lightgreytext};
|
|
}
|
|
|
|
|
|
|
|
/* - Inline State is Draft ----------------------------------------------------
|
|
|
|
The Unsubmitted state of the comment / done checkbox styles.
|
|
|
|
*/
|
|
|
|
.differential-inline-comment .inline-draft-text {
|
|
display: none;
|
|
}
|
|
|
|
.differential-inline-comment.inline-state-is-draft .inline-draft-text {
|
|
display: inline-block;
|
|
}
|
|
|
|
.inline-state-is-draft .differential-inline-done-label {
|
|
border-style: dashed;
|
|
}
|
|
|
|
|
|
/* - 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;
|
|
}
|
|
|
|
/* - Spooky Ghost UI -----------------------------------------------------------
|
|
|
|
Hide your codez.
|
|
|
|
*/
|
|
|
|
.inline-comment-ghost .differential-inline-comment-head {
|
|
padding-left: 40px;
|
|
}
|
|
|
|
.ghost-icon {
|
|
background: {$darkgreybackground};
|
|
float: left;
|
|
margin-right: 8px;
|
|
padding: 2px 4px 2px 2px;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.ghost-icon .phui-icon-view {
|
|
padding: 7px;
|
|
font-size: 15px;
|
|
color: {$lightbluetext};
|
|
}
|
|
|
|
.device-desktop .ghost-icon .phui-icon-view:hover {
|
|
color: {$sky};
|
|
}
|
|
|
|
.inline-comment-ghost .differential-inline-comment-content {
|
|
display: none;
|
|
}
|
|
|
|
.inline-comment-ghost.ghost-is-expanded .differential-inline-comment-content {
|
|
display: block;
|
|
}
|
|
|
|
.differential-inline-comment.inline-comment-ghost
|
|
.differential-inline-comment-head {
|
|
border-bottom-color: transparent;
|
|
position: relative;
|
|
}
|
|
|
|
.differential-inline-comment.inline-comment-ghost.ghost-is-expanded
|
|
.differential-inline-comment-head {
|
|
border-bottom-color: {$thinblueborder};
|
|
position: relative;
|
|
}
|
|
|
|
.differential-inline-comment.inline-comment-ghost
|
|
.differential-inline-done-label,
|
|
.differential-inline-comment.inline-comment-ghost {
|
|
border-color: {$lightgreyborder};
|
|
color: {$lightgreytext};
|
|
}
|