You can also use create named links, where you choose the displayed text. These
work within Phabricator or on the internet at large:
[[/herald/transcript/ | Herald Transcripts]]
[[http://www.boring-legal-documents.com/ | exciting legal documents]]
Markdown-style links are also supported:
[Toil](http://www.trouble.com)
= Linking to Objects =
You can link to Phabricator objects, such as Differential revisions, Diffusion
commits and Maniphest tasks, by mentioning the name of an object:
D123 # Link to Differential revision D123
rX123 # Link to SVN commit 123 from the "X" repository
rXaf3192cd5 # Link to Git commit "af3192cd5..." from the "X" repository.
# You must specify at least 7 characters of the hash.
T123 # Link to Maniphest task T123
You can also link directly to a comment in Maniphest and Differential:
T123#4 # Link to comment #4 of T123
See the Phabricator configuraton setting `remarkup.ignored-object-names` to
modify this behavior.
= Embedding Objects
You can also generate full-name references to some objects by using braces:
{D123} # Link to Differential revision D123 with the full name
{T123} # Link to Maniphest task T123 with the full name
These references will also show when an object changes state (for instance, a
task or revision is closed). Some types of objects support rich embedding.
== Linking to Project Tags
Projects can be linked to with the use of a hashtag `#`. This works by default
using the name of the Project (lowercase, underscored). Additionally you
can set multiple additional hashtags by editing the Project details.
#qa, #quality_assurance
== Embedding Mocks (Pholio)
You can embed a Pholio mock by using braces to refer to it:
{M123}
By default the first four images from the mock set are displayed. This behavior
can be overridden with the **image** option. With the **image** option you can
provide one or more image IDs to display.
You can set the image (or images) to display like this:
{M123, image=12345}
{M123, image=12345 & 6789}
== Embedding Pastes
You can embed a Paste using braces:
{P123}
You can adjust the embed height with the `lines` option:
{P123, lines=15}
You can highlight specific lines with the `highlight` option:
{P123, highlight=15}
{P123, highlight="23-25, 31"}
== Embedding Images
You can embed an image or other file by using braces to refer to it:
{F123}
In most interfaces, you can drag-and-drop an image from your computer into the
text area to upload and reference it.
Some browsers (e.g. Chrome) support uploading an image data just by pasting them
from clipboard into the text area.
You can set file display options like this:
{F123, layout=left, float, size=full, alt="a duckling"}
-Valid options are:
+Valid options for all files are:
- **layout** left (default), center, right, inline, link (render a link
instead of a thumbnail for images)
+ - **name** with `layout=link` or for non-images, use this name for the link
+ text
+ - **alt** Provide alternate text for assistive technologies.
+
+Image files support these options:
+
- **float** If layout is set to left or right, the image will be floated so
text wraps around it.
- **size** thumb (default), full
- - **name** with `layout=link` or for non-images, use this name for the link
- text
- **width** Scale image to a specific width.
- **height** Scale image to a specific height.
- - **alt** Provide alternate text for assistive technologies.
+
+Audio and video files support these options:
+
+ - **media**: Specify the media type as `audio` or `video`. This allows you
+ to disambiguate how file format which may contain either audio or video
+ should be rendered.
+ - **loop**: Loop this media.
+ - **autoplay**: Automatically begin playing this media.
== Embedding Countdowns
You can embed a countdown by using braces:
{C123}
= Quoting Text =
To quote text, preface it with an `>`:
> This is quoted text.
This appears like this:
> This is quoted text.
= Embedding Media =
If you set a configuration flag, you can embed media directly in text:
- **remarkup.enable-embedded-youtube**: allows you to paste in YouTube videos
and have them render inline.
This option is disabled by default because it has security and/or
silliness implications. Carefully read the description before enabling it.
= Image Macros =
You can upload image macros (More Stuff -> Macro) which will replace text
strings with the image you specify. For instance, you could upload an image of a
dancing banana to create a macro named "peanutbutterjellytime", and then any
time you type that string on a separate line it will be replaced with the image
of a dancing banana.
= Memes =
You can also use image macros in the context of memes. For example, if you
have an image macro named `grumpy`, you can create a meme by doing the
following:
{meme, src = grumpy, above = toptextgoeshere, below = bottomtextgoeshere}
By default, the font used to create the text for the meme is `tuffy.ttf`. For
the more authentic feel of `impact.ttf`, you simply have to place the Impact
TrueType font in the Phabricator subfolder `/resources/font/`. If Remarkup
detects the presence of `impact.ttf`, it will automatically use it.
= Mentioning Users =
In Differential and Maniphest, you can mention another user by writing:
@username
When you submit your comment, this will add them as a CC on the revision or task
if they aren't already CC'd.
Icons
=====
You can add icons to comments using the `{icon ...}` syntax. For example:
{icon camera}
This renders: {icon camera}
You can select a color for icons:
{icon camera color=blue}
This renders: {icon camera color=blue}
For a list of available icons and colors, check the UIExamples application.
(The icons are sourced from
[[ http://fortawesome.github.io/Font-Awesome/ | FontAwesome ]], so you can also
browse the collection there.)
You can add `spin` to make the icon spin:
{icon cog spin}
This renders: {icon cog spin}
= Phriction Documents =
You can link to Phriction documents with a name or path:
Make sure you sign and date your [[legal/Letter of Marque and Reprisal]]!
By default, the link will render with the document title as the link name.
With a pipe (`|`), you can retitle the link. Use this to mislead your
opponents:
Check out these [[legal/boring_documents/ | exciting legal documents]]!
Links to pages which do not exist are shown in red. Links to pages which exist
but which the viewer does not have permission to see are shown with a lock
icon, and the link will not disclose the page title.
If you begin a link path with `./` or `../`, the remainder of the path will be
evaluated relative to the current wiki page. For example, if you are writing
content for the document `fruit/` a link to `[[./guava]]` is the same as a link
to `[[fruit/guava]]` from elsewhere.
Relative links may use `../` to transverse up the document tree. From the
`produce/vegetables/` page, you can use `[[../fruit/guava]]` to link to the
`produce/fruit/guava` page.
Relative links do not work when used outside of wiki pages. For example,
you can't use a relative link in a comment on a task, because there is no
reasonable place for the link to start resolving from.
When documents are moved, relative links are not automatically updated: they
are preserved as currently written. After moving a document, you may need to
review and adjust any relative links it contains.
= Literal Blocks =
To place text in a literal block use `%%%`:
%%%Text that won't be processed by remarkup
[[http://www.example.com | example]]
%%%
Remarkup will not process the text inside of literal blocks (other than to
escape HTML and preserve line breaks).
= Tables =
Remarkup supports simple table syntax. For example, this:
```
| Fruit | Color | Price | Peel?
| ----- | ----- | ----- | -----
| Apple | red | `$0.93` | no
| Banana | yellow | `$0.19` | **YES**
```
...produces this:
| Fruit | Color | Price | Peel?
| ----- | ----- | ----- | -----
| Apple | red | `$0.93` | no
| Banana | yellow | `$0.19` | **YES**
Remarkup also supports a simplified HTML table syntax. For example, this:
```
| Fruit |
Color |
Price |
Peel? |
| Apple |
red |
`$0.93` |
no |
| Banana |
yellow |
`$0.19` |
**YES** |
```
...produces this:
| Fruit |
Color |
Price |
Peel? |
| Apple |
red |
`$0.93` |
no |
| Banana |
yellow |
`$0.19` |
**YES** |
Some general notes about this syntax:
- your tags must all be properly balanced;
- your tags must NOT include attributes (`` is OK, ` | ` is
not);
- you can use other Remarkup rules (like **bold**, //italics//, etc.) inside
table cells.
Navigation Sequences
====================
You can use `{nav ...}` to render a stylized navigation sequence when helping
someone to locate something. This can be useful when writing documentation.
For example, you could give someone directions to purchase lemons:
{nav icon=home, name=Home >
Grocery Store >
Produce Section >
icon=lemon-o, name=Lemons}
To render this example, use this markup:
```
{nav icon=home, name=Home >
Grocery Store >
Produce Section >
icon=lemon-o, name=Lemons}
```
In general:
- Separate sections with `>`.
- Each section can just have a name to add an element to the navigation
sequence, or a list of key-value pairs.
- Supported keys are `icon`, `name`, `type` and `href`.
- The `type` option can be set to `instructions` to indicate that an element
is asking the user to make a choice or follow specific instructions.
= Fullscreen Mode =
Remarkup editors provide a fullscreen composition mode. This can make it easier
to edit large blocks of text, or improve focus by removing distractions. You can
exit **Fullscreen** mode by clicking the button again or by pressing escape.
diff --git a/webroot/rsrc/css/core/remarkup.css b/webroot/rsrc/css/core/remarkup.css
index b4fa18ac8d..085fddf876 100644
--- a/webroot/rsrc/css/core/remarkup.css
+++ b/webroot/rsrc/css/core/remarkup.css
@@ -1,651 +1,662 @@
/**
* @provides phabricator-remarkup-css
*/
.phabricator-remarkup {
line-height: 1.51em;
word-break: break-word;
}
.phabricator-remarkup p {
margin: 0 0 12px;
}
.PhabricatorMonospaced,
.phabricator-remarkup .remarkup-code-block .remarkup-code {
font: 11px/15px "Menlo", "Consolas", "Monaco", monospace;
}
.platform-windows .PhabricatorMonospaced,
.platform-windows .phabricator-remarkup .remarkup-code-block .remarkup-code {
font: 12px/15px "Menlo", "Consolas", "Monaco", monospace;
}
.phabricator-remarkup .remarkup-code-block {
margin: 12px 0;
white-space: pre;
}
.phabricator-remarkup .remarkup-code-header {
padding: 6px 12px;
font-size: 13px;
font-weight: bold;
background: rgba({$alphablue},0.08);
display: inline-block;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.phabricator-remarkup .code-block-counterexample .remarkup-code-header {
background-color: {$sh-redbackground};
}
.phabricator-remarkup .remarkup-code-block .remarkup-code-header + pre {
border-top-left-radius: 0;
}
.phabricator-remarkup .remarkup-code-block pre {
background: rgba({$alphablue},0.08);
display: block;
color: #000;
overflow: auto;
padding: 12px;
border-radius: 3px;
}
.phabricator-remarkup pre.remarkup-counterexample {
background-color: {$sh-redbackground};
}
.phabricator-remarkup tt.remarkup-monospaced {
color: #000;
background: rgba({$alphablue},0.1);
padding: 1px 4px;
border-radius: 3px;
white-space: pre-wrap;
}
/* NOTE: You can currently produce this with [[link | `name`]]. Restore the
link color. */
.phabricator-remarkup a tt.remarkup-monospaced {
color: {$anchor};
}
.phabricator-remarkup .remarkup-header tt.remarkup-monospaced {
font-weight: normal;
}
.phabricator-remarkup ul.remarkup-list {
list-style: disc;
margin: 12px 0 12px 30px;
}
.phabricator-remarkup ol.remarkup-list {
list-style: decimal;
margin: 12px 0 12px 30px;
}
.phabricator-remarkup ol ol.remarkup-list {
list-style: upper-alpha;
}
.phabricator-remarkup ol ol ol.remarkup-list {
list-style: lower-alpha;
}
.phabricator-remarkup ol ol ol ol.remarkup-list {
list-style: lower-roman;
}
.phabricator-remarkup .remarkup-list-with-checkmarks .remarkup-checked-item,
.phabricator-remarkup .remarkup-list-with-checkmarks .remarkup-unchecked-item {
list-style: none;
margin-left: -18px;
}
.phabricator-remarkup .remarkup-list-with-checkmarks input {
margin-right: 2px;
opacity: 1;
}
.phabricator-remarkup .remarkup-list-with-checkmarks .remarkup-checked-item {
text-decoration: line-through;
}
.phabricator-remarkup ul.remarkup-list ol.remarkup-list,
.phabricator-remarkup ul.remarkup-list ul.remarkup-list,
.phabricator-remarkup ol.remarkup-list ol.remarkup-list,
.phabricator-remarkup ol.remarkup-list ul.remarkup-list {
margin: 4px 0 4px 24px;
}
.phabricator-remarkup .remarkup-list-item {
line-height: 1.7em;
}
.phabricator-remarkup li.phantom-item,
.phabricator-remarkup li.phantom-item {
list-style-type: none;
}
.phabricator-remarkup h1.remarkup-header {
font-size: 24px;
line-height: 1.625em;
margin: 24px 0 4px;
}
.phabricator-remarkup h2.remarkup-header {
font-size: 20px;
line-height: 1.5em;
margin: 20px 0 4px;
}
.phabricator-remarkup h3.remarkup-header {
font-size: 18px;
line-height: 1.375em;
margin: 20px 0 4px;
}
.phabricator-remarkup h4.remarkup-header {
font-size: 16px;
line-height: 1.25em;
margin: 12px 0 4px;
}
.phabricator-remarkup h5.remarkup-header {
font-size: 15px;
line-height: 1.125em;
margin: 8px 0 4px;
}
.phabricator-remarkup h6.remarkup-header {
font-size: 14px;
line-height: 1em;
margin: 4px 0;
}
.phabricator-remarkup blockquote {
border-left: 3px solid {$sh-blueborder};
color: {$darkbluetext};
font-style: italic;
margin: 4px 0 12px 0;
padding: 8px 12px;
background-color: {$lightbluebackground};
}
.phabricator-remarkup blockquote *:last-child {
margin-bottom: 0;
}
.phabricator-remarkup blockquote blockquote {
background-color: rgba(175,175,175, .1);
}
.phabricator-remarkup blockquote em {
/* In blockquote bodies, default text is italic so emphasized text should
be normal. */
font-style: normal;
}
.phabricator-remarkup blockquote div.remarkup-reply-head {
font-style: normal;
padding-bottom: 4px;
}
.phabricator-remarkup blockquote div.remarkup-reply-head em {
/* In blockquote headers, default text is normal so emphasized text should
be italic. See T10686. */
font-style: italic;
}
.phabricator-remarkup blockquote div.remarkup-reply-head
.phui-tag-core {
background-color: transparent;
border: none;
padding: 0;
color: {$darkbluetext};
}
.phabricator-remarkup img.remarkup-proxy-image {
max-width: 640px;
max-height: 640px;
}
.phabricator-remarkup audio {
display: block;
margin: 16px auto;
min-width: 240px;
width: 50%;
}
+video.phabricator-media {
+ background: {$greybackground};
+}
+
+.phabricator-remarkup video {
+ display: block;
+ margin: 0 auto;
+ min-width: 240px;
+ width: 90%;
+}
+
.phabricator-remarkup-mention-exists {
font-weight: bold;
background: #e6f3ff;
}
.phabricator-remarkup-mention-disabled {
font-weight: bold;
background: #dddddd;
}
.phui-remarkup-preview .phabricator-remarkup-mention-unknown,
.aphront-panel-preview .phabricator-remarkup-mention-unknown {
font-weight: bold;
background: #ffaaaa;
}
.phabricator-remarkup .phriction-link {
font-weight: bold;
}
.phabricator-remarkup .phriction-link-missing {
color: {$red};
}
.phabricator-remarkup .phriction-link-lock {
color: {$greytext};
}
.phabricator-remarkup-mention-nopermission .phui-tag-core {
background: {$lightgreybackground};
color: {$lightgreytext};
}
.phabricator-remarkup .remarkup-note {
margin: 16px 0;
padding: 12px;
border-left: 3px solid {$blue};
background: {$lightblue};
}
.phabricator-remarkup .remarkup-warning {
margin: 16px 0;
padding: 12px;
border-left: 3px solid {$yellow};
background: {$lightyellow};
}
.phabricator-remarkup .remarkup-important {
margin: 16px 0;
padding: 12px;
border-left: 3px solid {$red};
background: {$lightred};
}
.phabricator-remarkup .remarkup-note .remarkup-monospaced,
.phabricator-remarkup .remarkup-important .remarkup-monospaced,
.phabricator-remarkup .remarkup-warning .remarkup-monospaced {
background-color: rgba(150,150,150,.2);
}
.phabricator-remarkup .remarkup-note-word {
font-weight: bold;
color: {$darkbluetext};
}
.phabricator-remarkup-toc {
float: right;
border-left: 1px solid {$lightblueborder};
background: #fff;
width: 160px;
padding-left: 8px;
margin: 0 0 4px 8px;
}
.phabricator-remarkup-toc-header {
font-size: 13px;
line-height: 13px;
color: {$darkbluetext};
font-weight: bold;
margin-bottom: 4px;
}
.phabricator-remarkup-toc ul {
padding: 0;
margin: 0;
list-style: none;
overflow: hidden;
}
.phabricator-remarkup-toc ul ul {
margin: 0 0 0 8px;
}
.phabricator-remarkup-toc ul li {
padding: 0;
margin: 0;
font-size: 12px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.phabricator-remarkup-embed-layout-right {
text-align: right;
}
.phabricator-remarkup-embed-layout-center {
text-align: center;
}
.phabricator-remarkup-embed-layout-inline {
display: inline;
}
.phabricator-remarkup-embed-float-right {
float: right;
margin: .5em 1em 0;
}
.phabricator-remarkup-embed-layout-link {
padding-left: 20px;
background: url(/rsrc/image/icon/fatcow/page_white_put.png) 0 0 no-repeat;
}
.phabricator-remarkup-embed-float-left {
float: left;
margin: .5em 1em 0;
}
.phabricator-remarkup-embed-image {
display: inline-block;
border: 3px solid white;
box-shadow: 1px 1px 2px rgba({$alphablack}, 0.20);
}
.phabricator-remarkup-embed-image-full,
.phabricator-remarkup-embed-image-wide {
display: inline-block;
max-width: 100%;
}
.phabricator-remarkup-embed-image-full img,
.phabricator-remarkup-embed-image-wide img {
height: auto;
max-width: 100%;
}
.phabricator-remarkup .remarkup-table-wrap {
overflow-x: auto;
}
.phabricator-remarkup table.remarkup-table {
border-collapse: separate;
border-spacing: 1px;
background: {$lightblueborder};
margin: 12px 0;
word-break: normal;
}
.phabricator-remarkup table.remarkup-table th {
font-weight: bold;
padding: 4px 6px;
background: {$lightbluebackground};
}
.phabricator-remarkup table.remarkup-table td {
background: #ffffff;
padding: 3px 6px;
}
body div.phabricator-remarkup.remarkup-has-toc
.phabricator-remarkup-toc + .remarkup-header {
margin-top: 0;
padding-top: 0;
}
body .phabricator-standard-page div.phabricator-remarkup *:first-child,
body .phabricator-standard-page div.phabricator-remarkup .remarkup-header + * {
margin-top: 0;
}
body div.phabricator-remarkup > *:last-child {
margin-bottom: 0;
}
.remarkup-assist-textarea {
border-left-color: {$blueborder};
border-right-color: {$blueborder};
border-bottom-color: {$blueborder};
border-top-color: {$thinblueborder};
border-radius: 0;
box-shadow: none;
-webkit-box-shadow: none;
/* Set line height explicitly so the metrics and the real textarea
are forced to the same value. */
line-height: 1.25em;
/* Prevent Safari and Chrome users from dragging the textarea any wider,
because the top bar won't resize along with it. */
resize: vertical;
}
var.remarkup-assist-textarea {
/* This is an invisible element used to measure the size of text in the
textarea so we can float typeaheads over the cursor position. */
display: block;
border-color: orange;
box-sizing: border-box;
padding: 4px 6px;
white-space: pre-wrap;
visibility: hidden;
}
.remarkup-assist-textarea:focus {
border: 1px solid rgba(82, 168, 236, 0.8);
}
.remarkup-assist-bar {
height: 26px;
border-width: 1px 1px 0;
border-style: solid;
border-top-color: {$blueborder};
border-left-color: {$blueborder};
border-right-color: {$blueborder};
background: {$lightbluebackground};
overflow: hidden;
}
.remarkup-assist-button {
display: block;
padding: 4px 5px;
float: left;
}
.remarkup-assist-button:hover {
background-color: rgba(100,100,100,.15);
}
.remarkup-assist-button:hover .phui-icon-view.phui-font-fa {
color: {$darkbluetext};
}
.remarkup-assist-button:active {
outline: none;
}
.remarkup-assist-button:focus {
outline: none;
}
.remarkup-assist-separator {
display: block;
float: left;
margin: 7px 4px;
height: 14px;
width: 0px;
border-right: 1px solid #cccccc;
}
.remarkup-interpreter-error {
padding: 8px;
border: 1px solid {$sh-redborder};
background-color: {$sh-redbackground};
}
.remarkup-cowsay {
white-space: pre-wrap;
}
.remarkup-figlet {
white-space: pre-wrap;
}
.remarkup-assist {
width: 14px;
height: 14px;
overflow: hidden;
text-align: center;
vertical-align: middle;
}
.remarkup-assist-right {
float: right;
}
.jx-order-mask {
background: white;
opacity: 1.0;
}
.remarkup-control-fullscreen-mode {
position: fixed;
top: -1px;
bottom: -1px;
left: -1px;
right: -1px;
}
.remarkup-control-fullscreen-mode textarea.remarkup-assist-textarea {
position: absolute;
top: 27px;
left: 0;
right: 0;
bottom: 0;
/* NOTE: This doesn't work in Firefox, there's a JS behavior to correct it. */
height: auto;
border-width: 1px 0 0 0;
outline: none;
resize: none;
}
.phabricator-image-macro-hero {
margin: auto;
max-width: 95%;
}
.phabricator-remarkup-macro {
height: auto;
max-width: 100%;
}
.remarkup-nav-sequence-arrow {
color: {$lightgreytext};
}
.phabricator-remarkup hr {
background: {$thinblueborder};
margin: 24px 0;
clear: both;
}
.phabricator-remarkup .remarkup-highlight {
background-color: {$lightviolet};
padding: 0 4px;
}
.remarkup-inline-preview {
display: block;
position: relative;
background: #fff;
overflow-y: auto;
box-sizing: border-box;
width: 100%;
border: 1px solid {$sky};
resize: vertical;
padding: 4px 6px;
}
.remarkup-control-fullscreen-mode .remarkup-inline-preview {
resize: none;
}
.remarkup-inline-preview * {
resize: none;
}
.remarkup-assist-button.preview-active {
background: {$sky};
}
.remarkup-assist-button.preview-active .phui-icon-view {
color: #ffffff;
}
.remarkup-assist-button.preview-active:hover .phui-icon-view {
color: {$lightsky};
}
.device .remarkup-assist-nodevice {
display: none;
}
.phuix-autocomplete {
position: absolute;
width: 300px;
box-shadow: {$dropshadow};
background: #ffffff;
border: 1px solid {$lightgreyborder};
border-radius: 3px;
}
.phuix-autocomplete-head {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 6px 8px;
background: {$lightgreybackground};
color: {$darkgreytext};
border-radius: 3px;
}
.phuix-autocomplete-head .phui-icon-view {
margin-right: 4px;
color: {$lightgreytext};
}
.phuix-autocomplete-echo {
margin-left: 4px;
color: {$lightgreytext};
}
.phuix-autocomplete-list a.jx-result {
display: block;
padding: 5px 8px;
font-size: {$normalfontsize};
border-top: 1px solid {$thinblueborder};
font-weight: bold;
color: {$darkgreytext};
}
.phuix-autocomplete-list a.jx-result .phui-icon-view {
margin-right: 4px;
color: {$lightbluetext};
}
.phuix-autocomplete-list a.jx-result:hover {
text-decoration: none;
background: {$sh-bluebackground};
color: #000;
}
.phuix-autocomplete-list a.jx-result.focused,
.phuix-autocomplete-list a.jx-result.focused:hover {
background: {$sh-bluebackground};
color: #000;
}
diff --git a/webroot/rsrc/css/phui/phui-property-list-view.css b/webroot/rsrc/css/phui/phui-property-list-view.css
index ab250a3cc5..da6ff63dff 100644
--- a/webroot/rsrc/css/phui/phui-property-list-view.css
+++ b/webroot/rsrc/css/phui/phui-property-list-view.css
@@ -1,214 +1,221 @@
/**
* @provides phui-property-list-view-css
*/
.phui-property-list-view .keyboard-shortcuts-available {
float: right;
height: 16px;
margin: 12px 10px -28px 0px;
padding: 0px 20px 0px 0px;
vertical-align: middle;
color: {$greytext};
text-align: right;
font-size: {$smallestfontsize};
background:
url('/rsrc/image/icon/fatcow/key_question.png') right center no-repeat;
}
.device .keyboard-shortcuts-available {
display: none;
}
.phui-property-group-noninitial,
.phui-property-list-section-noninitial {
border-color: {$thinblueborder};
border-style: solid;
border-width: 1px 0 0;
}
.device-desktop .phui-property-list-container {
padding: 12px 0 12px 0;
width: 100%;
}
.device .phui-property-list-container {
padding: 12px 0 4px 0;
}
.phui-property-list-key {
color: {$bluetext};
font-weight: bold;
overflow: hidden;
white-space: nowrap;
}
.device-desktop .phui-property-list-key {
width: 12%;
margin-left: 1%;
text-align: right;
float: left;
clear: left;
margin-bottom: 4px;
}
.device-desktop .phui-property-list-has-actions .phui-property-list-key {
width: 18%;
}
.phui-property-list-properties-wrap.phui-property-list-stacked {
width: auto;
float: none;
}
.device .phui-property-list-key,
.phui-property-list-stacked .phui-property-list-properties
.phui-property-list-key {
padding-left: 4px;
text-align: left;
margin-left: 0;
width: auto;
float: none;
}
.phui-property-list-value {
color: {$darkgreytext};
}
.device-desktop .phui-property-list-value {
width: 84%;
margin-left: 1%;
float: left;
margin-bottom: 4px;
}
.device-desktop .phui-property-list-has-actions .phui-property-list-value {
width: 78%;
}
.device .phui-property-list-value,
.phui-property-list-stacked .phui-property-list-properties
.phui-property-list-value {
padding: 0 8px;
margin-bottom: 8px;
width: auto;
word-break: break-word;
float: none;
}
.phui-property-list-section-header {
color: {$bluetext};
padding: 16px 4px 0px;
text-transform: uppercase;
font-weight: 700;
border-color: {$thinblueborder};
border-style: solid;
border-width: 1px 0 0;
}
.phui-property-list-container + .phui-property-list-text-content {
border-color: {$thinblueborder};
border-style: solid;
border-width: 1px 0 0;
}
.phui-property-list-section-noninitial .phui-property-list-section-header {
border-top: none;
}
.device .phui-property-list-section-header {
padding-left: 4px;
}
.phui-property-list-section-header-icon .phui-icon-view {
display: inline-block;
margin: -2px 4px -2px 0;
}
.phui-property-list-text-content {
padding: 16px 4px;
overflow: hidden;
}
.phui-property-list-raw-content {
padding: 0px;
overflow: hidden;
}
/* In the common case where we immediately follow a header, move back up 30px
so we snuggle next to the header. */
.device-desktop .phui-header-view
+ .phabricator-action-list-view {
margin-top: -30px;
}
.device-desktop .phui-header-view
+ .phabricator-action-list-view
+ .phui-property-list-view {
margin-top: 0px;
}
.phui-property-list-image {
margin: auto;
max-width: 95%;
}
.phui-property-list-audio {
display: block;
margin: 16px auto;
width: 50%;
min-width: 240px;
}
+.phui-property-list-video {
+ display: block;
+ margin: 0 auto;
+ width: 90%;
+ min-width: 240px;
+}
+
/* When tags appear in property lists, give them a little more vertical
spacing. */
.phui-property-list-view .phui-tag-view {
margin: 2px 0;
}
.phui-property-list-has-actions .phui-property-list-properties-wrap {
float: left;
width: 78%;
}
.device .phui-property-list-properties-wrap {
width: auto;
border: none;
float: none;
overflow: auto;
}
.phui-property-list-actions {
width: 20%;
float: right;
margin-right: 12px;
border-left: 1px solid {$thinblueborder};
}
!print .phui-property-list-actions {
display: none;
}
.device .phui-property-list-actions {
float: none;
width: auto;
margin: -12px 0 12px 0;
border: none;
}
.phui-property-list-image-content img {
margin: 20px auto;
background: url('/rsrc/image/checker_light.png');
}
.device-desktop .phui-property-list-image-content img:hover {
background: url('/rsrc/image/checker_dark.png');
}
/* - Dashboards ------------------------------------------------------------ */
.dashboard-panel .phui-property-list-section {
border-left: 1px solid {$lightblueborder};
border-right: 1px solid {$lightblueborder};
border-bottom: 1px solid {$blueborder};
}
|