[Summary view] [Print] [Text view]

   1  /**
   2   * @provides phui-timeline-view-css
   3   */
   4  
   5  .phui-timeline-view {
   6    padding: 0 16px;
   7    background-image: url('/rsrc/image/BFCFDA.png');
   8    background-repeat: repeat-y;
   9    background-position: 94px;
  10  }
  11  
  12  .device-tablet .phui-timeline-view {
  13    background-position: 31px;
  14  }
  15  
  16  .device-phone .phui-timeline-view {
  17    padding: 0;
  18    background-position: 24px;
  19  }
  20  
  21  .phui-timeline-major-event .phui-timeline-group {
  22    border-left: 1px solid {$lightblueborder};
  23    border-right: 1px solid {$lightblueborder};
  24  }
  25  
  26  .device-desktop .phui-timeline-event-view {
  27    margin-left: 62px;
  28    position: relative;
  29  }
  30  
  31  .device-desktop .phui-timeline-event-view.phui-timeline-minor-event {
  32    margin-left: 65px;
  33  }
  34  
  35  .device-desktop .phui-timeline-spacer {
  36    min-height: 16px;
  37  }
  38  
  39  .device-desktop .phui-timeline-event-view.the-worlds-end {
  40    background: {$lightblueborder};
  41    width: 9px;
  42    height: 9px;
  43    border-radius: 2px;
  44    margin-left: 74px;
  45  }
  46  
  47  .device-desktop .phui-timeline-wedge {
  48    border-bottom: 1px solid {$lightblueborder};
  49    position: absolute;
  50    width: 12px;
  51  }
  52  
  53  .device-phone .phui-timeline-minor-event,
  54  .device-tablet .phui-timeline-minor-event {
  55    padding-left: 3px;
  56  }
  57  
  58  .phui-timeline-major-event .phui-timeline-content {
  59    border-top: 1px solid {$lightblueborder};
  60    border-bottom: 1px solid {$lightblueborder};
  61  }
  62  
  63  .phui-timeline-title {
  64    line-height: 18px;
  65    min-height: 18px;
  66    position: relative;
  67    color: {$bluetext};
  68  }
  69  
  70  .phui-timeline-minor-event .phui-timeline-title {
  71    padding: 4px 8px 4px 33px;
  72  }
  73  
  74  .phui-timeline-title a {
  75    font-weight: bold;
  76    color: {$darkbluetext};
  77  }
  78  
  79  .device-desktop .phui-timeline-wedge {
  80    left: -12px;
  81  }
  82  
  83  .device-desktop .phui-timeline-major-event .phui-timeline-wedge {
  84    top: 24px;
  85  }
  86  
  87  .device-desktop .phui-timeline-minor-event .phui-timeline-wedge {
  88    top: 12px;
  89    left: -18px;
  90    width: 20px;
  91  }
  92  
  93  .phui-timeline-image {
  94    background-repeat: no-repeat;
  95    position: absolute;
  96    border-radius: 3px;
  97  }
  98  
  99  .device-desktop .phui-timeline-major-event .phui-timeline-image {
 100    width: 50px;
 101    height: 50px;
 102    top: 0px;
 103    left: -62px;
 104  }
 105  
 106  .device-desktop .phui-timeline-minor-event .phui-timeline-image {
 107    width: 26px;
 108    height: 26px;
 109    background-size: 26px auto;
 110    left: -41px;
 111  }
 112  
 113  .phui-timeline-major-event .phui-timeline-title {
 114    background: {$lightgreybackground};
 115    min-height: 18px;
 116  }
 117  
 118  .phui-timeline-title {
 119    padding: 5px 8px;
 120    overflow-x: auto;
 121    overflow-y: hidden;
 122  }
 123  
 124  .phui-timeline-title-with-icon {
 125    padding-left: 38px;
 126  }
 127  
 128  .phui-timeline-title-with-menu {
 129    padding-right: 36px;
 130  }
 131  
 132  .phui-timeline-view .phui-icon-view.phui-timeline-token {
 133    vertical-align: middle;
 134    margin-right: 4px;
 135  }
 136  
 137  .phui-timeline-token.strikethrough {
 138    position: relative;
 139  }
 140  
 141  .phui-timeline-token.strikethrough:before {
 142    position: absolute;
 143    content: "";
 144    left: 0;
 145    top: 50%;
 146    right: 0;
 147    border-top: 3px solid;
 148    border-color: {$darkbluetext};
 149  
 150    -webkit-transform:rotate(-40deg);
 151    -moz-transform:rotate(-40deg);
 152    -ms-transform:rotate(-40deg);
 153    -o-transform:rotate(-40deg);
 154    transform:rotate(-40deg);
 155  }
 156  
 157  .phui-timeline-major-event .phui-timeline-content
 158    .phui-timeline-core-content {
 159    padding: 16px 12px;
 160    line-height: 18px;
 161    background: #fff;
 162  }
 163  
 164  .phui-timeline-core-content {
 165    overflow-x: auto;
 166  }
 167  
 168  .phui-timeline-core-content .comment-deleted {
 169    font-style: italic;
 170  }
 171  
 172  .device .phui-timeline-event-view {
 173    min-height: 23px;
 174    position: relative;
 175  }
 176  
 177  .device-phone .phui-timeline-event-view {
 178    margin: 0 8px;
 179  }
 180  
 181  .device .phui-timeline-image {
 182    display: none;
 183  }
 184  
 185  .device .phui-timeline-spacer {
 186    min-height: 8px;
 187    border-width: 0;
 188  }
 189  
 190  .phui-timeline-spacer.phui-timeline-spacer-bold {
 191    border-bottom: 4px solid {$lightblueborder};
 192    margin: 0;
 193  }
 194  
 195  .phui-timeline-spacer-bold + .phui-timeline-spacer {
 196    background-color: #ebecee;
 197  }
 198  
 199  .phui-timeline-icon-fill {
 200    position: absolute;
 201    width: 30px;
 202    height: 30px;
 203    background-color: {$lightblueborder};
 204    top: 0;
 205    left: 0;
 206    text-align: center;
 207  }
 208  
 209  .phui-icon-view.phui-timeline-icon:before {
 210    font-size: 14px;
 211  }
 212  
 213  .phui-timeline-minor-event .phui-timeline-icon-fill {
 214    height: 26px;
 215    width: 26px;
 216    border-radius: 3px;
 217  }
 218  
 219  .phui-timeline-icon-fill .phui-timeline-icon {
 220    margin-top: 7px;
 221  }
 222  
 223  .phui-timeline-minor-event .phui-timeline-icon-fill .phui-timeline-icon {
 224    margin-top: 6px;
 225  }
 226  
 227  .phui-timeline-extra,
 228  .phui-timeline-extra .phabricator-content-source-view {
 229    font-size: 11px;
 230    font-weight: normal;
 231    color: {$lightbluetext};
 232  }
 233  
 234  .phui-timeline-title .phui-timeline-extra a {
 235    font-weight: normal;
 236    color: {$bluetext};
 237  }
 238  
 239  .device-desktop .phui-timeline-extra {
 240    float: right;
 241  }
 242  
 243  .device .phui-timeline-extra {
 244    display: inline-block;
 245    line-height: 16px;
 246    margin-left: 8px;
 247    white-space: nowrap;
 248  }
 249  
 250  .device-phone .phui-timeline-extra {
 251    display: block;
 252    margin: 0;
 253  }
 254  
 255  .phui-timeline-icon-fill-red {
 256    background-color: {$red};
 257  }
 258  
 259  .phui-timeline-icon-fill-orange {
 260    background-color: {$orange};
 261  }
 262  
 263  .phui-timeline-icon-fill-yellow {
 264    background-color: {$yellow};
 265  }
 266  
 267  .phui-timeline-icon-fill-green {
 268    background-color: {$green};
 269  }
 270  
 271  .phui-timeline-icon-fill-sky {
 272    background-color: {$sky};
 273  }
 274  
 275  .phui-timeline-icon-fill-blue {
 276    background-color: {$blue};
 277  }
 278  
 279  .phui-timeline-icon-fill-indigo {
 280    background-color: {$indigo};
 281  }
 282  
 283  .phui-timeline-icon-fill-violet {
 284    background-color: {$violet};
 285  }
 286  
 287  .phui-timeline-icon-fill-grey {
 288    background-color: #888;
 289  }
 290  
 291  .phui-timeline-icon-fill-black {
 292    background-color: #333;
 293  }
 294  
 295  .phui-timeline-shell.anchor-target {
 296    background: {$lightyellow};
 297    padding: 4px;
 298    margin: -4px;
 299  }
 300  
 301  .phui-timeline-preview-header {
 302    background: #e0e3ec;
 303    color: {$darkgreytext};
 304    padding: 4px 1.25%;
 305    border: solid {$blueborder} 1px 0;
 306  }
 307  
 308  .phui-timeline-change-details {
 309    padding: 10px 0;
 310    border-style: solid;
 311    border-color: #efefef;
 312    border-width: 1px 0;
 313  }
 314  
 315  .phui-timeline-older-transactions-are-hidden {
 316    background: {$lightyellow};
 317    border: 1px solid {$yellow};
 318    text-align: center;
 319    padding: 12px;
 320    color: {$darkgreytext};
 321  }
 322  
 323  .device-phone .phui-timeline-older-transactions-are-hidden {
 324    margin: 0 8px;
 325  }
 326  
 327  
 328  .phui-timeline-title .phui-timeline-extra-information a {
 329    font-weight: normal;
 330    color: {$bluetext};
 331  }
 332  
 333  .phui-timeline-comment-actions .phui-icon-view {
 334    width: 16px;
 335    height: 16px;
 336    font-size: 16px;
 337    text-align: center;
 338    overflow: hidden;
 339  }
 340  
 341  .phui-timeline-menu {
 342    position: absolute;
 343    right: 3px;
 344    top: 4px;
 345    width: 28px;
 346    height: 22px;
 347    text-align: center;
 348    line-height: 22px;
 349    font-size: 15px;
 350    border-left: 1px solid {$lightblueborder};
 351  }
 352  
 353  .phui-timeline-menu:focus {
 354    outline: none;
 355  }
 356  
 357  .phui-timeline-menu .phui-icon-view {
 358    color: {$lightgreytext};
 359  }
 360  
 361  a.phui-timeline-menu .phui-icon-view {
 362    color: {$bluetext};
 363  }
 364  
 365  .device-desktop a.phui-timeline-menu:hover .phui-icon-view {
 366    color: {$darkgreytext};
 367  }
 368  
 369  .phui-timeline-menu.phuix-dropdown-open {
 370    background: {$hovergrey};
 371  }