[Summary view] [Print] [Text view]

   1  /*------------------------------------------------------------------------------
   2    11.2 - Post Revisions
   3  ------------------------------------------------------------------------------*/
   4  .revisions-control-frame,
   5  .revisions-diff-frame {
   6      position: relative;
   7  }
   8  
   9  .revisions-diff-frame {
  10      top: 10px;
  11  }
  12  
  13  .revisions-controls {
  14      padding-top: 40px;
  15      z-index: 1;
  16  }
  17  
  18  .revisions-controls input[type="checkbox"] {
  19      position: relative;
  20      top: -1px;
  21      vertical-align: text-bottom;
  22  }
  23  
  24  .revisions.pinned .revisions-controls {
  25      position: fixed;
  26      top: 0;
  27      height: 82px;
  28      background: #fff;
  29      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  30  }
  31  
  32  .revisions-tickmarks {
  33      position: relative;
  34      margin: 0 auto;
  35      height: 0.7em;
  36      top: 7px;
  37      max-width: 70%;
  38      box-sizing: border-box;
  39      background-color: #fff;
  40  }
  41  
  42  .revisions-tickmarks > div {
  43      position: absolute;
  44      height: 100%;
  45      border-left: 1px solid #a7aaad;
  46      box-sizing: border-box;
  47  }
  48  
  49  .revisions-tickmarks > div:first-child {
  50      border-width: 0;
  51  }
  52  
  53  .comparing-two-revisions .revisions-controls {
  54      height: 140px;
  55  }
  56  
  57  .comparing-two-revisions.pinned .revisions-controls {
  58      height: 124px;
  59  }
  60  
  61  .revisions .diff-error {
  62      position: absolute;
  63      text-align: center;
  64      margin: 0 auto;
  65      width: 100%;
  66      display: none;
  67  }
  68  
  69  .revisions.diff-error .diff-error {
  70      display: block;
  71  }
  72  
  73  .revisions .loading-indicator {
  74      position: absolute;
  75      vertical-align: middle;
  76      opacity: 0;
  77      width: 100%;
  78      width: calc( 100% - 30px );
  79      top: 50%;
  80      top: calc( 50% - 10px );
  81      transition: opacity 0.5s;
  82  }
  83  
  84  body.folded .revisions .loading-indicator {
  85      margin-left: -32px;
  86  }
  87  
  88  .revisions .loading-indicator span.spinner {
  89      display: block;
  90      margin: 0 auto;
  91      float: none;
  92  }
  93  
  94  .revisions.loading .loading-indicator {
  95      opacity: 1;
  96  }
  97  
  98  .revisions .diff {
  99      transition: opacity 0.5s;
 100  }
 101  
 102  .revisions.loading .diff {
 103      opacity: 0.5;
 104  }
 105  
 106  .revisions.diff-error .diff {
 107      visibility: hidden;
 108  }
 109  
 110  .revisions-meta {
 111      margin-top: 20px;
 112      background-color: #fff;
 113      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 114      overflow: hidden;
 115  }
 116  
 117  .revisions.pinned .revisions-meta {
 118      box-shadow: none;
 119  }
 120  
 121  .revision-toggle-compare-mode {
 122      position: absolute;
 123      top: 0;
 124      right: 0;
 125  }
 126  
 127  .comparing-two-revisions .revisions-previous,
 128  .comparing-two-revisions .revisions-next,
 129  .revisions-meta .diff-meta-to strong {
 130      display: none;
 131  }
 132  
 133  .revisions-controls .author-card .date {
 134      color: #646970;
 135  }
 136  
 137  .revisions-controls .author-card.autosave {
 138      color: #d63638;
 139  }
 140  
 141  .revisions-controls .author-card .author-name {
 142      font-weight: 600;
 143  }
 144  
 145  .comparing-two-revisions .diff-meta-to strong {
 146      display: block;
 147  }
 148  
 149  .revisions.pinned .revisions-buttons {
 150      padding: 0 11px;
 151  }
 152  
 153  .revisions-previous,
 154  .revisions-next {
 155      position: relative;
 156      z-index: 1;
 157  }
 158  
 159  .revisions-previous {
 160      float: left;
 161  }
 162  
 163  .revisions-next {
 164      float: right;
 165  }
 166  
 167  .revisions-controls .wp-slider {
 168      max-width: 70%;
 169      margin: 0 auto;
 170      top: -3px;
 171  }
 172  
 173  .revisions-diff {
 174      padding: 15px;
 175      background-color: #fff;
 176      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 177  }
 178  
 179  .revisions-diff h3:first-child {
 180      margin-top: 0;
 181  }
 182  
 183  /* Revision meta box */
 184  .post-revisions li img,
 185  #revisions-meta-restored img {
 186      vertical-align: middle;
 187  }
 188  
 189  table.diff {
 190      table-layout: fixed;
 191      width: 100%;
 192      white-space: pre-wrap;
 193  }
 194  
 195  table.diff col.content {
 196      width: auto;
 197  }
 198  
 199  table.diff col.content.diffsplit {
 200      width: 48%;
 201  }
 202  
 203  table.diff col.diffsplit.middle {
 204      width: auto;
 205  }
 206  
 207  table.diff col.ltype {
 208      width: 30px;
 209  }
 210  
 211  table.diff tr {
 212      background-color: transparent;
 213  }
 214  
 215  table.diff td,
 216  table.diff th {
 217      font-family: Consolas, Monaco, monospace;
 218      font-size: 14px;
 219      line-height: 1.57142857;
 220      padding: 0.5em 0.5em 0.5em 2em;
 221      vertical-align: top;
 222      word-wrap: break-word;
 223  }
 224  
 225  table.diff td h1,
 226  table.diff td h2,
 227  table.diff td h3,
 228  table.diff td h4,
 229  table.diff td h5,
 230  table.diff td h6 {
 231      margin: 0;
 232  }
 233  
 234  table.diff .diff-deletedline del,
 235  table.diff .diff-addedline ins {
 236      text-decoration: none;
 237  }
 238  
 239  table.diff .diff-deletedline {
 240      position: relative;
 241      background-color: #fcf0f1;
 242  }
 243  
 244  table.diff .diff-deletedline del {
 245      background-color: #ffabaf;
 246  }
 247  
 248  table.diff .diff-addedline {
 249      position: relative;
 250      background-color: #edfaef;
 251  }
 252  
 253  table.diff .diff-deletedline .dashicons,
 254  table.diff .diff-addedline .dashicons {
 255      position: absolute;
 256      top: 0.85714286em;
 257      left: 0.5em;
 258      width: 1em;
 259      height: 1em;
 260      font-size: 1em;
 261      line-height: 1;
 262  }
 263  
 264  table.diff .diff-addedline .dashicons {
 265      /* Compensate the vertically non-centered plus glyph. */
 266      top: 0.92857143em;
 267  }
 268  
 269  table.diff .diff-addedline ins {
 270      background-color: #68de7c;
 271  }
 272  
 273  .diff-meta {
 274      padding: 5px;
 275      clear: both;
 276      min-height: 32px;
 277  }
 278  
 279  .diff-title strong {
 280      line-height: 2.46153846;
 281      min-width: 60px;
 282      text-align: right;
 283      float: left;
 284      margin-right: 5px;
 285  }
 286  
 287  .revisions-controls .author-card .author-info {
 288      font-size: 12px;
 289      line-height: 1.33333333;
 290  }
 291  
 292  .revisions-controls .author-card .avatar,
 293  .revisions-controls .author-card .author-info {
 294      float: left;
 295      margin-left: 6px;
 296      margin-right: 6px;
 297  }
 298  
 299  .revisions-controls .author-card .byline {
 300      display: block;
 301      font-size: 12px;
 302  }
 303  
 304  .revisions-controls .author-card .avatar {
 305      vertical-align: middle;
 306  }
 307  
 308  .diff-meta input.restore-revision {
 309      float: right;
 310      margin-left: 6px;
 311      margin-right: 6px;
 312      margin-top: 2px;
 313  }
 314  
 315  .diff-meta-from {
 316      display: none;
 317  }
 318  
 319  .comparing-two-revisions .diff-meta-from {
 320      display: block;
 321  }
 322  
 323  .revisions-tooltip {
 324      position: absolute;
 325      bottom: 105px;
 326      margin-right: 0;
 327      margin-left: -69px;
 328      z-index: 0;
 329      max-width: 350px;
 330      min-width: 130px;
 331      padding: 8px 4px;
 332      display: none;
 333      opacity: 0;
 334  }
 335  
 336  .revisions-tooltip.flipped {
 337      margin-left: 0;
 338      margin-right: -70px;
 339  }
 340  
 341  .revisions.pinned .revisions-tooltip {
 342      display: none !important;
 343  }
 344  
 345  .comparing-two-revisions .revisions-tooltip {
 346      bottom: 145px;
 347  }
 348  
 349  .revisions-tooltip-arrow {
 350      width: 70px;
 351      height: 15px;
 352      overflow: hidden;
 353      position: absolute;
 354      left: 0;
 355      margin-left: 35px;
 356      bottom: -15px;
 357  }
 358  
 359  .revisions-tooltip.flipped .revisions-tooltip-arrow {
 360      margin-left: 0;
 361      margin-right: 35px;
 362      left: auto;
 363      right: 0;
 364  }
 365  
 366  .revisions-tooltip-arrow > span {
 367      content: "";
 368      position: absolute;
 369      left: 20px;
 370      top: -20px;
 371      width: 25px;
 372      height: 25px;
 373      transform: rotate(45deg);
 374  }
 375  
 376  .revisions-tooltip.flipped .revisions-tooltip-arrow > span {
 377      left: auto;
 378      right: 20px;
 379  }
 380  
 381  .revisions-tooltip,
 382  .revisions-tooltip-arrow > span {
 383      border: 1px solid #dcdcde;
 384      background-color: #fff;
 385  }
 386  
 387  .revisions-tooltip {
 388      display: none;
 389  }
 390  
 391  .arrow {
 392      width: 70px;
 393      height: 16px;
 394      overflow: hidden;
 395      position: absolute;
 396      left: 0;
 397      margin-left: -35px;
 398      bottom: 90px;
 399      z-index: 10000;
 400  }
 401  
 402  .arrow:after {
 403      z-index: 9999;
 404      background-color: #fff;
 405      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 406  }
 407  
 408  .arrow.top {
 409      top: -16px;
 410      bottom: auto;
 411  }
 412  
 413  .arrow.left {
 414      left: 20%;
 415  }
 416  
 417  .arrow:after {
 418      content: "";
 419      position: absolute;
 420      left: 20px;
 421      top: -20px;
 422      width: 25px;
 423      height: 25px;
 424      transform: rotate(45deg);
 425  }
 426  
 427  .revisions-tooltip,
 428  .revisions-tooltip-arrow:after {
 429      border-width: 1px;
 430      border-style: solid;
 431  }
 432  
 433  div.revisions-controls > .wp-slider > .ui-slider-handle {
 434      margin-left: -10px;
 435  }
 436  
 437  .rtl div.revisions-controls > .wp-slider > .ui-slider-handle {
 438      margin-right: -10px;
 439  }
 440  
 441  /* jQuery UI Slider */
 442  .wp-slider.ui-slider {
 443      position: relative;
 444      border: 1px solid #dcdcde;
 445      text-align: left;
 446      cursor: pointer;
 447  }
 448  
 449  .wp-slider .ui-slider-handle {
 450      border-radius: 50%;
 451      height: 18px;
 452      margin-top: -5px;
 453      outline: none;
 454      padding: 2px;
 455      position: absolute;
 456      width: 18px;
 457      z-index: 2;
 458      touch-action: none;
 459  }
 460  
 461  .wp-slider .ui-slider-handle {
 462      background: #f6f7f7;
 463      border: 1px solid #c3c4c7;
 464      box-shadow: 0 1px 0 #c3c4c7;
 465  }
 466  
 467  .wp-slider .ui-slider-handle:hover,
 468  .wp-slider .ui-slider-handle.ui-state-hover {
 469      background: #f6f7f7;
 470      border-color: #8c8f94;
 471  }
 472  
 473  .wp-slider .ui-slider-handle:active,
 474  .wp-slider .ui-slider-handle.ui-state-active {
 475      background: #f0f0f1;
 476      border-color: #8c8f94;
 477      box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5);
 478      transform: translateY(1px);
 479  }
 480  
 481  .wp-slider .ui-slider-handle:focus,
 482  .wp-slider .ui-slider-handle.ui-state-focus {
 483      background: #f0f0f1;
 484      border-color: #8c8f94;
 485      box-shadow: 0 0 0 2px #2271b1;
 486      /* Only visible in Windows High Contrast mode */
 487      outline: 2px solid transparent;
 488  }
 489  
 490  .wp-slider .ui-slider-handle:before {
 491      background: none;
 492      position: absolute;
 493      top: 2px;
 494      left: 2px;
 495      color: #50575e;
 496      content: "\f229";
 497      font: normal 18px/1 dashicons;
 498      speak: never;
 499      -webkit-font-smoothing: antialiased;
 500      -moz-osx-font-smoothing: grayscale;
 501  }
 502  
 503  .wp-slider .ui-slider-handle:hover:before,
 504  .wp-slider .ui-slider-handle.ui-state-hover:before {
 505      color: #1d2327;
 506  }
 507  
 508  .wp-slider .ui-slider-handle.from-handle:before,
 509  .wp-slider .ui-slider-handle.to-handle:before {
 510      font-size: 20px !important;
 511      margin: -1px 0 0 -1px;
 512  }
 513  
 514  .wp-slider .ui-slider-handle.from-handle:before {
 515      content: "\f139";
 516  }
 517  
 518  .wp-slider .ui-slider-handle.to-handle:before {
 519      content: "\f141";
 520  }
 521  
 522  .rtl .wp-slider .ui-slider-handle.from-handle:before {
 523      content: "\f141";
 524  }
 525  
 526  .rtl .wp-slider .ui-slider-handle.to-handle:before {
 527      content: "\f139";
 528      right: -1px;
 529  }
 530  
 531  .wp-slider .ui-slider-range {
 532      position: absolute;
 533      font-size: 0.7em;
 534      display: block;
 535      border: 0;
 536      background-color: transparent;
 537      background-image: none;
 538  }
 539  
 540  .wp-slider.ui-slider-horizontal {
 541      height: 0.7em;
 542  }
 543  
 544  .wp-slider.ui-slider-horizontal .ui-slider-handle {
 545      top: -.25em;
 546      margin-left: -.6em;
 547  }
 548  
 549  .wp-slider.ui-slider-horizontal .ui-slider-range {
 550      top: 0;
 551      height: 100%;
 552  }
 553  
 554  .wp-slider.ui-slider-horizontal .ui-slider-range-min {
 555      left: 0;
 556  }
 557  
 558  .wp-slider.ui-slider-horizontal .ui-slider-range-max {
 559      right: 0;
 560  }
 561  
 562  /* =Media Queries
 563  -------------------------------------------------------------- */
 564  
 565  /**
 566   * HiDPI Displays
 567   */
 568  @media print,
 569    (min-resolution: 120dpi) {
 570      .revision-tick.completed-false {
 571          background-image: url(../images/spinner-2x.gif);
 572      }
 573  }
 574  
 575  @media screen and (max-width: 782px) {
 576      #diff-next-revision,
 577      #diff-previous-revision {
 578          margin-top: -1em;
 579      }
 580  
 581      .revisions-buttons {
 582          overflow: hidden;
 583          margin-bottom: 15px;
 584      }
 585  
 586      .revisions-controls,
 587      .comparing-two-revisions .revisions-controls {
 588          height: 170px;
 589      }
 590  
 591      .revisions-tooltip {
 592          bottom: 130px;
 593          z-index: 2;
 594      }
 595  
 596      .diff-meta {
 597          overflow: hidden;
 598      }
 599  
 600      table.diff {
 601          -ms-word-break: break-all;
 602          word-break: break-all;
 603          word-wrap: break-word;
 604      }
 605  
 606      .diff-meta input.restore-revision {
 607          margin-top: 0;
 608      }
 609  }