[Summary view] [Print] [Text view]

   1  /**
   2   * @provides phabricator-remarkup-css
   3   */
   4  
   5  .phabricator-remarkup {
   6    line-height: 1.45em;
   7  }
   8  
   9  .phabricator-remarkup p {
  10    margin: 0 0 12px;
  11  }
  12  
  13  .phabricator-remarkup p:last-child {
  14    margin-bottom: 0;
  15  }
  16  
  17  .phabricator-remarkup .remarkup-code-block {
  18    margin: 12px;
  19    white-space: pre;
  20    font-family: "Monaco", monospace;
  21    font-size: 10px;
  22  }
  23  
  24  .phabricator-remarkup .remarkup-code-header {
  25    padding: 6px 8px;
  26    background: {$lightyellow};
  27    color: rgba(0,0,0,.75);
  28    font-weight: bold;
  29    display: inline-block;
  30    border-top: 1px solid {$yellow};
  31    border-left: 1px solid {$yellow};
  32    border-right: 1px solid {$yellow};
  33    margin-bottom: -1px;
  34  }
  35  
  36  .phabricator-remarkup .remarkup-code-block pre {
  37    background: {$lightyellow};
  38    border: 1px solid {$yellow};
  39    display: block;
  40    color: #000000;
  41    overflow: auto;
  42    padding: 8px;
  43    font-family: "Monaco", monospace;
  44  }
  45  
  46  .phabricator-remarkup pre.remarkup-counterexample {
  47    border: 1px solid {$red};
  48    background-color: {$lightred};
  49  }
  50  
  51  .phabricator-remarkup tt.remarkup-monospaced {
  52    color: #333333;
  53    background: #ebebeb;
  54    padding: 0 4px;
  55    white-space: pre-wrap;
  56  }
  57  
  58  /* NOTE: You can currently produce this with [[link | `name`]]. Restore the
  59     link color. */
  60  .phabricator-remarkup a tt.remarkup-monospaced {
  61    color: #18559d;
  62  }
  63  
  64  .phabricator-remarkup ul.remarkup-list {
  65    list-style: disc;
  66    margin: 12px 0 12px 30px;
  67  }
  68  
  69  .phabricator-remarkup ol.remarkup-list {
  70    list-style: decimal;
  71    margin: 12px 0 12px 30px;
  72  }
  73  
  74  .phabricator-remarkup .remarkup-list-with-checkmarks {
  75    list-style: none;
  76    margin-left: 18px;
  77  }
  78  
  79  .phabricator-remarkup .remarkup-list-with-checkmarks input {
  80    margin-right: 2px;
  81  }
  82  
  83  .phabricator-remarkup .remarkup-list-with-checkmarks .remarkup-checked-item {
  84    color: {$greytext};
  85  }
  86  
  87  .phabricator-remarkup ul.remarkup-list ol.remarkup-list,
  88  .phabricator-remarkup ul.remarkup-list ul.remarkup-list,
  89  .phabricator-remarkup ol.remarkup-list ol.remarkup-list,
  90  .phabricator-remarkup ol.remarkup-list ul.remarkup-list {
  91    margin: 4px 0 4px 24px;
  92  }
  93  
  94  .phabricator-remarkup li.phantom-item,
  95  .phabricator-remarkup li.phantom-item {
  96    list-style-type: none;
  97  }
  98  
  99  .phabricator-remarkup h1.remarkup-header:first-child,
 100  .phabricator-remarkup h2.remarkup-header:first-child,
 101  .phabricator-remarkup h3.remarkup-header:first-child,
 102  .phabricator-remarkup h4.remarkup-header:first-child,
 103  .phabricator-remarkup h5.remarkup-header:first-child,
 104  .phabricator-remarkup h6.remarkup-header:first-child {
 105    margin-top: 0;
 106  }
 107  
 108  .phabricator-remarkup h1.remarkup-header:last-child,
 109  .phabricator-remarkup h2.remarkup-header:last-child,
 110  .phabricator-remarkup h3.remarkup-header:last-child,
 111  .phabricator-remarkup h4.remarkup-header:last-child,
 112  .phabricator-remarkup h5.remarkup-header:last-child,
 113  .phabricator-remarkup h6.remarkup-header:last-child {
 114    margin-bottom: 0;
 115  }
 116  
 117  .phabricator-remarkup h1.remarkup-header {
 118    font-size: 1.625em;
 119    line-height: 1.625em;
 120    margin: 8px 0;
 121  }
 122  
 123  .phabricator-remarkup h2.remarkup-header {
 124    font-size: 1.5em;
 125    line-height: 1.5em;
 126    margin: 8px 0;
 127  }
 128  
 129  .phabricator-remarkup h3.remarkup-header {
 130    font-size: 1.375em;
 131    line-height: 1.375em;
 132    margin: 8px 0;
 133  }
 134  
 135  .phabricator-remarkup h4.remarkup-header {
 136    font-size: 1.25em;
 137    line-height: 1.25em;
 138    margin: 8px 0;
 139  }
 140  
 141  .phabricator-remarkup h5.remarkup-header {
 142    font-size: 1.125em;
 143    line-height: 1.125em;
 144    margin: 4px 0;
 145  }
 146  
 147  .phabricator-remarkup h6.remarkup-header {
 148    font-size: 1em;
 149    line-height: 1em;
 150    margin: 4px 0;
 151  }
 152  
 153  .phabricator-remarkup blockquote {
 154    border-left: 3px solid {$lightbluetext};
 155    color: {$bluetext};
 156    font-style:  italic;
 157    margin: 4px 0 12px 0;
 158    padding: 8px 12px;
 159    background-color: #F8F9FC;
 160  }
 161  
 162  .phabricator-remarkup blockquote blockquote {
 163    background-color: rgba(175,175,175, .1);
 164  }
 165  
 166  .phabricator-remarkup blockquote em {
 167    font-style: normal;
 168  }
 169  
 170  .phabricator-remarkup blockquote div.remarkup-reply-head {
 171    font-style: normal;
 172    padding-bottom: 4px;
 173  }
 174  
 175  .phabricator-remarkup blockquote div.remarkup-reply-head
 176    .phui-tag-core {
 177    background-color: transparent;
 178    border: none;
 179    padding: 0;
 180    color: {$darkbluetext};
 181  }
 182  
 183  .phabricator-remarkup img.remarkup-proxy-image {
 184    max-width: 640px;
 185    max-height: 640px;
 186  }
 187  
 188  .phabricator-remarkup audio {
 189    display: block;
 190    margin: 16px auto;
 191    min-width: 240px;
 192    width: 50%;
 193  }
 194  
 195  .phabricator-remarkup-mention-exists {
 196    font-weight: bold;
 197    background: #e6f3ff;
 198  }
 199  
 200  .phabricator-remarkup-mention-disabled {
 201    font-weight: bold;
 202    background: #dddddd;
 203  }
 204  
 205  .phui-remarkup-preview .phabricator-remarkup-mention-unknown,
 206  .aphront-panel-preview .phabricator-remarkup-mention-unknown {
 207    font-weight: bold;
 208    background: #ffaaaa;
 209  }
 210  
 211  .phabricator-remarkup .remarkup-note {
 212    margin: 16px 0;
 213    padding: 12px;
 214    border-left: 3px solid {$blue};
 215    background: {$lightblue};
 216  }
 217  
 218  .phabricator-remarkup .remarkup-warning {
 219    margin: 16px 0;
 220    padding: 12px;
 221    border-left: 3px solid {$yellow};
 222    background: {$lightyellow};
 223  }
 224  
 225  .phabricator-remarkup .remarkup-important {
 226    margin: 16px 0;
 227    padding: 12px;
 228    border-left: 3px solid {$red};
 229    background: {$lightred};
 230  }
 231  
 232  .phabricator-remarkup .remarkup-note .remarkup-monospaced,
 233  .phabricator-remarkup .remarkup-important .remarkup-monospaced,
 234  .phabricator-remarkup .remarkup-warning .remarkup-monospaced {
 235    background-color: rgba(150,150,150,.2);
 236  }
 237  
 238  .phabricator-remarkup .remarkup-note-word {
 239    font-weight: bold;
 240    color: {$darkbluetext};
 241  }
 242  
 243  .phabricator-remarkup-toc {
 244    float: right;
 245    border-left: 1px solid {$lightblueborder};
 246    background: #fff;
 247    width: 160px;
 248    padding-left: 8px;
 249    margin: 0 0 4px 8px;
 250  }
 251  
 252  .phabricator-remarkup-toc-header {
 253    font-size: 13px;
 254    line-height: 12px;
 255    color: {$darkbluetext};
 256    font-weight: bold;
 257    margin-bottom: 4px;
 258  }
 259  
 260  .phabricator-remarkup-toc ul {
 261    padding: 0;
 262    margin: 0;
 263    list-style: none;
 264    overflow: hidden;
 265  }
 266  
 267  .phabricator-remarkup-toc ul ul {
 268    margin: 0 0 0 8px;
 269  }
 270  
 271  .phabricator-remarkup-toc ul li {
 272    padding: 0;
 273    margin: 0;
 274    font-size: 13px;
 275    overflow: hidden;
 276    text-overflow: ellipsis;
 277    white-space: nowrap;
 278  }
 279  
 280  .phabricator-remarkup-embed-layout-right {
 281    text-align: right;
 282  }
 283  
 284  .phabricator-remarkup-embed-layout-center {
 285    text-align: center;
 286  }
 287  
 288  .phabricator-remarkup-embed-layout-inline {
 289    display: inline;
 290  }
 291  
 292  .phabricator-remarkup-embed-float-right {
 293    float: right;
 294    margin: .5em 1em 0;
 295  }
 296  
 297  .phabricator-remarkup-embed-layout-link {
 298    padding-left: 20px;
 299    background: url(/rsrc/image/icon/fatcow/page_white_put.png) 0 0 no-repeat;
 300  }
 301  
 302  .phabricator-remarkup-embed-float-left {
 303    float: left;
 304    margin: .5em 1em 0;
 305  }
 306  
 307  .phabricator-remarkup-embed-image {
 308    display: inline-block;
 309    border: 3px solid white;
 310    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.20);
 311  }
 312  
 313  .phabricator-remarkup-embed-image-full {
 314    display: inline-block;
 315  }
 316  
 317  .phabricator-remarkup-embed-image-full img {
 318    max-width: 100%;
 319  }
 320  
 321  .phabricator-remarkup table.remarkup-table {
 322    border-collapse: separate;
 323    border-spacing: 1px;
 324    background: #d3d3d3;
 325    margin: 12px 0;
 326  }
 327  
 328  .phabricator-remarkup table.remarkup-table th {
 329    font-weight: bold;
 330    padding: 3px 6px;
 331    background: #e3e3e3;
 332  }
 333  
 334  .phabricator-remarkup table.remarkup-table td {
 335    background: #ffffff;
 336    padding: 3px 6px;
 337  }
 338  
 339  .remarkup-assist-textarea {
 340    border-left-color: {$blueborder};
 341    border-right-color: {$blueborder};
 342    border-bottom-color: {$blueborder};
 343    border-top-color: {$thinblueborder};
 344    border-radius: 0;
 345  
 346    box-shadow: none;
 347    -webkit-box-shadow: none;
 348  
 349    /* Set line height explicitly so the metrics <var /> and the real textarea
 350       are forced to the same value. */
 351    line-height: 1.25em;
 352  
 353    /* Prevent Safari and Chrome users from dragging the textarea any wider,
 354       because the top bar won't resize along with it. */
 355    resize: vertical;
 356  }
 357  
 358  var.remarkup-assist-textarea {
 359    /* This is an invisible element used to measure the size of text in the
 360       textarea so we can float typeaheads over the cursor position. */
 361    display: block;
 362    border-color: orange;
 363    box-sizing: border-box;
 364    padding: 4px 6px;
 365    white-space: pre-wrap;
 366    visibility: hidden;
 367  }
 368  
 369  .remarkup-assist-textarea:focus {
 370    border: 1px solid rgba(82, 168, 236, 0.8);
 371  }
 372  
 373  .remarkup-assist-bar {
 374    height: 26px;
 375    border-width: 1px 1px 0;
 376    border-style: solid;
 377    border-top-color: {$blueborder};
 378    border-left-color: {$blueborder};
 379    border-right-color: {$blueborder};
 380  
 381    background: {$lightbluebackground};
 382    overflow: hidden;
 383  }
 384  
 385  .remarkup-assist-button {
 386    display: block;
 387    padding: 5px;
 388    float: left;
 389  }
 390  
 391  .remarkup-assist-button:hover {
 392    background-color: rgba(100,100,100,.15);
 393  }
 394  
 395  .remarkup-assist-button:hover .phui-icon-view.phui-font-fa {
 396    color: {$darkbluetext};
 397  }
 398  
 399  .remarkup-assist-button:active {
 400    outline: none;
 401  }
 402  
 403  .remarkup-assist-button:focus {
 404    outline: none;
 405  }
 406  
 407  .remarkup-assist-separator {
 408    display: block;
 409    float: left;
 410  
 411    margin: 7px 4px;
 412    height: 14px;
 413  
 414    width: 0px;
 415    border-right: 1px solid #cccccc;
 416  }
 417  
 418  .remarkup-interpreter-error {
 419    padding: 8px;
 420    border: 1px solid {$red};
 421    background-color: {$lightred};
 422  }
 423  
 424  .remarkup-cowsay {
 425    white-space: pre-wrap;
 426  }
 427  
 428  .remarkup-figlet {
 429    white-space: pre-wrap;
 430  }
 431  
 432  .remarkup-assist {
 433    width: 14px;
 434    height: 14px;
 435    overflow: hidden;
 436    text-align: center;
 437    vertical-align: middle;
 438  }
 439  
 440  .remarkup-assist-right {
 441    float: right;
 442  }
 443  
 444  .jx-order-mask {
 445    background: #ffffff;
 446    opacity: 1.0;
 447  }
 448  
 449  .remarkup-control-fullscreen-mode {
 450    position: fixed;
 451    top: -1px;
 452    bottom: -1px;
 453    left: -1px;
 454    right: -1px;
 455  }
 456  
 457  .remarkup-control-fullscreen-mode textarea.remarkup-assist-textarea {
 458    position: absolute;
 459    top: 27px;
 460    left: 0;
 461    right: 0;
 462    bottom: 0;
 463    /* NOTE: This doesn't work in Firefox, there's a JS behavior to correct it. */
 464    height: auto;
 465    border-width: 1px 0 0 0;
 466    outline: none;
 467  }
 468  
 469  .phabricator-image-macro-hero {
 470    margin: auto;
 471    max-width: 95%;
 472  }
 473  
 474  .remarkup-nav-sequence-arrow {
 475    color: {$lightgreytext};
 476  }