[Summary view] [Print] [Text view]

   1  /**
   2   * @provides differential-changeset-view-css
   3   */
   4  
   5  .differential-changeset {
   6    position: relative;
   7    margin: 0;
   8    padding-top: 32px;
   9    overflow-x: auto;
  10  }
  11  
  12  .device-phone .differential-changeset {
  13    overflow-x: scroll;
  14    -webkit-overflow-scrolling: touch;
  15  }
  16  
  17  .differential-diff {
  18    background: #fff;
  19    width: 100%;
  20    min-width: 780px;
  21    border-top: 1px solid {$lightblueborder};
  22    border-bottom: 1px solid {$lightblueborder};
  23    table-layout: fixed;
  24  }
  25  
  26  .differential-diff col.num {
  27    width: 45px;
  28  }
  29  
  30  .differential-diff col.left,
  31  .differential-diff col.right {
  32    width: 49.25%;
  33  }
  34  
  35  .differential-diff col.copy {
  36    width: 0.5%;
  37  }
  38  
  39  .differential-diff col.cov {
  40    width: 1%;
  41  }
  42  
  43  .differential-diff td {
  44    vertical-align:     top;
  45    white-space:        pre-wrap;
  46    word-wrap:          break-word;
  47    padding:            0 8px 1px;
  48    line-height:        16px;
  49  }
  50  
  51  .differential-diff td .zwsp {
  52    position: absolute;
  53    width: 0;
  54  }
  55  
  56  .differential-diff th {
  57    text-align:         right;
  58    padding:            2px 6px 0px 0px;
  59    vertical-align:     top;
  60    background:         {$lightbluebackground};
  61    color:              {$bluetext};
  62    cursor:             pointer;
  63    border-right:       1px solid {$thinblueborder};
  64    font-size:          11px;
  65    overflow:           hidden;
  66  
  67    -moz-user-select:     -moz-none;
  68    -khtml-user-select:   none;
  69    -webkit-user-select:  none;
  70    -ms-user-select:      none;
  71    user-select:          none;
  72  }
  73  
  74  .differential-changeset-immutable .differential-diff th {
  75    cursor: auto;
  76  }
  77  
  78  .differential-diff td.old {
  79    background: #ffd0d0;
  80  }
  81  
  82  .differential-diff td.new {
  83    background: #d0ffd0;
  84  }
  85  
  86  .differential-diff td.old-rebase {
  87    background: #ffeeee;
  88  }
  89  
  90  .differential-diff td.new-rebase {
  91    background: #eeffee;
  92  }
  93  
  94  .differential-diff td.old-full,
  95  .differential-diff td.old span.bright {
  96    background: #ffaaaa;
  97  }
  98  
  99  .differential-diff td.new-full,
 100  .differential-diff td.new span.bright {
 101    background: #aaffaa;
 102  }
 103  
 104  .differential-diff td.copy {
 105    min-width: 0.5%;
 106    width: 0.5%;
 107    padding: 0;
 108  }
 109  
 110  .differential-diff td.new-copy,
 111  .differential-diff td.new-copy span.bright {
 112    background: {$lightyellow};
 113  }
 114  
 115  .differential-diff td.new-move,
 116  .differential-diff td.new-move span.bright {
 117    background: {$yellow};
 118  }
 119  
 120  .differential-diff td.comment {
 121    background: #dddddd;
 122  }
 123  
 124  .differential-diff td.cov {
 125    padding: 0;
 126  }
 127  
 128  .diffusion-source td.cov {
 129    padding: 0 8px;
 130  }
 131  
 132  td.cov-U {
 133    background: #dd8866;
 134  }
 135  
 136  td.cov-C {
 137    background: #66bbff;
 138  }
 139  
 140  td.cov-N {
 141    background: #ddeeff;
 142  }
 143  
 144  td.cov-X {
 145    background: #aa00aa;
 146  }
 147  
 148  td.cov-I {
 149    background: {$lightgreybackground};
 150  }
 151  
 152  .differential-diff td.source-cov-C,
 153  .differential-diff td.source-cov-C span.bright {
 154    background: #cceeff;
 155  }
 156  
 157  .differential-diff td.source-cov-U,
 158  .differential-diff td.source-cov-U span.bright {
 159    background: #ffbb99;
 160  }
 161  
 162  .differential-diff td.source-cov-N,
 163  .differential-diff td.source-cov-N span.bright {
 164    background: #f3f6ff;
 165  }
 166  
 167  
 168  
 169  .differential-diff td.show-more,
 170  .differential-diff th.show-context-line,
 171  .differential-diff td.show-context,
 172  .differential-diff td.differential-shield {
 173    background: {$lightbluebackground};
 174    padding: 12px 0;
 175    border-top: 1px solid {$thinblueborder};
 176    border-bottom: 1px solid {$thinblueborder};
 177  }
 178  
 179  .differential-diff td.show-more,
 180  .differential-diff td.differential-shield {
 181    font-family: "Helvetica Neue", "Arial", sans-serif;
 182    font-size:   12px;
 183    white-space: normal;
 184  }
 185  
 186  .differential-diff td.show-more {
 187    text-align: center;
 188    color: {$bluetext};
 189  }
 190  
 191  .differential-diff th.show-context-line {
 192    padding-right: 6px;
 193  }
 194  
 195  .differential-diff td.show-context {
 196    padding-left: 14px;
 197  }
 198  
 199  .differential-diff td.differential-shield {
 200    text-align: center;
 201  }
 202  
 203  .differential-diff td.differential-shield a {
 204    font-weight: bold;
 205  }
 206  
 207  .differential-diff .differential-image-diff {
 208    background-image: url(/rsrc/image/checker_light.png);
 209  }
 210  
 211  .differential-diff .differential-image-diff:hover {
 212    background-image: url(/rsrc/image/checker_dark.png);
 213  }
 214  
 215  .differential-diff .differential-image-diff td {
 216    padding: 8px;
 217  }
 218  
 219  .differential-image-stage {
 220    overflow: auto;
 221  }
 222  
 223  .differential-meta-notice {
 224    border-top: 1px solid {$yellow};
 225    border-bottom: 1px solid {$yellow};
 226    background-color: {$lightyellow};
 227    padding: 12px;
 228  }
 229  
 230  .differential-meta-notice + .differential-diff {
 231    border-top: none;
 232  }
 233  
 234  .differential-changeset h1 {
 235    font-size: 15px;
 236    padding: 2px 0 12px 12px;
 237    line-height: 18px;
 238  }
 239  
 240  .device-phone .differential-changeset h1 {
 241    word-break: break-word;
 242    margin-right: 8px;
 243  }
 244  
 245  .differential-reticle {
 246    background: {$lightyellow};
 247    border: 1px solid {$yellow};
 248    position: absolute;
 249    opacity: 0.5;
 250    top: 0px;
 251    left: 0px;
 252  }
 253  
 254  .differential-inline-comment,
 255  .differential-inline-comment-edit {
 256    background:         #ffffee;
 257    border:             1px solid #ccccaa;
 258    font-family:        "Helvetica Neue", "Arial", sans-serif;
 259    font-size:          12px;
 260    margin:             6px 0px;
 261    padding:            8px 10px;
 262    width:              100%;
 263    -moz-box-sizing:    border-box;
 264    -webkit-box-sizing: border-box;
 265    box-sizing:         border-box;
 266    overflow:           hidden;
 267    white-space:        normal;
 268  }
 269  
 270  .differential-inline-comment-edit .aphront-form-control-textarea {
 271    padding: 0;
 272  }
 273  
 274  .differential-inline-comment-unsaved-draft {
 275    background: #f1f1f1;
 276    border: 1px dashed {$greytext};
 277  }
 278  
 279  .differential-inline-comment-head {
 280    font-weight:  bold;
 281    color:        #333333;
 282    border-bottom:  1px solid rgba(204,204,170,0.37);
 283    padding-bottom: 4px;
 284    margin-bottom:  8px;
 285  }
 286  
 287  .differential-inline-comment-unsaved-draft .differential-inline-comment-head {
 288    border-bottom: 1px solid #aaaaaa;
 289  }
 290  
 291  .differential-inline-comment-synthetic {
 292    background: {$lightblue};
 293    border: 1px solid {$blue};
 294  }
 295  
 296  .differential-inline-comment-synthetic .differential-inline-comment-head {
 297    border-bottom: 1px solid {$blueborder};
 298  }
 299  
 300  
 301  .differential-inline-comment-links,
 302  .differential-inline-comment-line {
 303    font-weight:  normal;
 304    font-style:   italic;
 305    color:        {$greytext};
 306    float:        right;
 307    white-space:  nowrap;
 308  }
 309  
 310  .differential-inline-comment-links {
 311    margin-left:  8px;
 312    font-style:   normal;
 313  }
 314  
 315  .differential-inline-comment-edit-body .aphront-form-input {
 316    margin: 0;
 317    width: 100%;
 318  }
 319  
 320  .differential-changeset-buttons {
 321    float: right;
 322    margin-right: 16px;
 323  }
 324  
 325  .device-phone .differential-changeset-buttons {
 326    float: none;
 327    margin: 0 0 8px 4px;
 328  }
 329  
 330  .differential-changeset-buttons a.button {
 331    margin-left: 8px;
 332  }
 333  
 334  .differential-property-table {
 335    margin: 12px;
 336    background: {$lightgreybackground};
 337    border: 1px solid {$lightblueborder};
 338    border-bottom: 1px solid {$blueborder};
 339  }
 340  
 341  .differential-property-table td em {
 342    color: {$lightgreytext};
 343  }
 344  
 345  .differential-property-table td.oval {
 346    background: #ffd0d0;
 347    width: 50%;
 348  }
 349  
 350  .differential-property-table td.nval {
 351    background: #d0ffd0;
 352    width: 50%;
 353  }
 354  
 355  .differential-inline-undo {
 356    padding: 4px;
 357    text-align: center;
 358    background: #ffeeaa;
 359    margin: 3px 0 1px;
 360    font: 12px;
 361    color: 444444;
 362  }
 363  
 364  .differential-inline-undo a {
 365    font-weight: bold;
 366  }
 367  
 368  .differential-inline-comment-edit {
 369    padding: 10px;
 370  }
 371  
 372  .differential-inline-comment-edit-buttons {
 373    padding: 4px 0 0 0;
 374  }
 375  
 376  .differential-inline-comment-edit-buttons button {
 377    float: right;
 378    margin-left: 6px;
 379  }
 380  
 381  .differential-inline-comment-edit-title {
 382    font-weight:    bold;
 383    color:          #333333;
 384    padding-bottom: 2px;
 385    margin-bottom:  6px;
 386  }
 387  
 388  /*  When the inline editor is active, disable all the other inline comment links
 389      on the page ("Edit", "Reply", "Delete", etc). The goal here is to prevent
 390      issues where you open up multiple editors and run into problems with
 391      assumptions about modalness. They are disabled explicitly by the JS, but
 392      render them in a disabled state as well.
 393  */
 394  .inline-editor-active .differential-inline-comment-links a,
 395  .inline-editor-active .differential-inline-comment-links a:hover,
 396  .inline-editor-active .differential-inline-comment-links a:active {
 397    color: {$lightgreytext};
 398    cursor: normal;
 399    text-decoration: none;
 400  }
 401  
 402  /*  Create a wide band of color behind the inline edit interface so it is easy
 403      to find by skimming the page while scrolling.
 404  */
 405  tr.inline-comment-splint {
 406    background: #f9f1d5;
 407  }
 408  
 409  tr.differential-inline-hidden {
 410    display: none;
 411  }
 412  
 413  tr.differential-inline-loading {
 414    opacity: 0.5;
 415  }
 416  
 417  
 418  /*  In the document, the anchor is positioned inside the inline comment, but
 419      this makes the browser jump into the comment so the top isn't visible.
 420      Instead, artificially position it a bit above the comment so we'll jump a
 421      bit before the comment. This allows us to see the entire comment (and
 422      generally the commented-on lines, at least in the case of one or two-line
 423      comments) after the jump.
 424  */
 425  .differential-inline-comment-anchor {
 426    position: absolute;
 427    display: block;
 428    margin-top: -72px;
 429  }
 430  
 431  .differential-loading {
 432    border-top: 1px solid {$yellow};
 433    border-bottom: 1px solid {$yellow};
 434    background-color: {$lightyellow};
 435    padding: 12px;
 436    text-align: center;
 437  }
 438  
 439  .differential-collapse-undo {
 440    background: #FFE;
 441    color: #000;
 442    padding: 1em 0em;
 443    border: 1px solid #CCA;
 444    text-align: center;
 445    background-color: #FFE;
 446  }
 447  
 448  .differential-collapse-undo a {
 449    font-weight: bold;
 450  }
 451  
 452  .differential-file-icon-header .phui-icon-view {
 453    display: inline-block;
 454    margin: 0 6px 2px 0;
 455    vertical-align: middle;
 456    font-size: 14px;
 457  }
 458  
 459  .device-phone .differential-file-icon-header .phui-icon-view {
 460    display: none;
 461  }