[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  }
 313  
 314  .diff-meta-from {
 315      display: none;
 316  }
 317  
 318  .comparing-two-revisions .diff-meta-from {
 319      display: block;
 320  }
 321  
 322  .revisions-tooltip {
 323      position: absolute;
 324      bottom: 105px;
 325      margin-right: 0;
 326      margin-left: -69px;
 327      z-index: 0;
 328      max-width: 350px;
 329      min-width: 130px;
 330      padding: 8px 4px;
 331      display: none;
 332      opacity: 0;
 333  }
 334  
 335  .revisions-tooltip.flipped {
 336      margin-left: 0;
 337      margin-right: -70px;
 338  }
 339  
 340  .revisions.pinned .revisions-tooltip {
 341      display: none !important;
 342  }
 343  
 344  .comparing-two-revisions .revisions-tooltip {
 345      bottom: 145px;
 346  }
 347  
 348  .revisions-tooltip-arrow {
 349      width: 70px;
 350      height: 15px;
 351      overflow: hidden;
 352      position: absolute;
 353      left: 0;
 354      margin-left: 35px;
 355      bottom: -15px;
 356  }
 357  
 358  .revisions-tooltip.flipped .revisions-tooltip-arrow {
 359      margin-left: 0;
 360      margin-right: 35px;
 361      left: auto;
 362      right: 0;
 363  }
 364  
 365  .revisions-tooltip-arrow > span {
 366      content: "";
 367      position: absolute;
 368      left: 20px;
 369      top: -20px;
 370      width: 25px;
 371      height: 25px;
 372      transform: rotate(45deg);
 373  }
 374  
 375  .revisions-tooltip.flipped .revisions-tooltip-arrow > span {
 376      left: auto;
 377      right: 20px;
 378  }
 379  
 380  .revisions-tooltip,
 381  .revisions-tooltip-arrow > span {
 382      border: 1px solid #dcdcde;
 383      background-color: #fff;
 384  }
 385  
 386  .revisions-tooltip {
 387      display: none;
 388  }
 389  
 390  .arrow {
 391      width: 70px;
 392      height: 16px;
 393      overflow: hidden;
 394      position: absolute;
 395      left: 0;
 396      margin-left: -35px;
 397      bottom: 90px;
 398      z-index: 10000;
 399  }
 400  
 401  .arrow:after {
 402      z-index: 9999;
 403      background-color: #fff;
 404      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 405  }
 406  
 407  .arrow.top {
 408      top: -16px;
 409      bottom: auto;
 410  }
 411  
 412  .arrow.left {
 413      left: 20%;
 414  }
 415  
 416  .arrow:after {
 417      content: "";
 418      position: absolute;
 419      left: 20px;
 420      top: -20px;
 421      width: 25px;
 422      height: 25px;
 423      transform: rotate(45deg);
 424  }
 425  
 426  .revisions-tooltip,
 427  .revisions-tooltip-arrow:after {
 428      border-width: 1px;
 429      border-style: solid;
 430  }
 431  
 432  div.revisions-controls > .wp-slider > .ui-slider-handle {
 433      margin-left: -10px;
 434  }
 435  
 436  .rtl div.revisions-controls > .wp-slider > .ui-slider-handle {
 437      margin-right: -10px;
 438  }
 439  
 440  /* jQuery UI Slider */
 441  .wp-slider.ui-slider {
 442      position: relative;
 443      border: 1px solid #dcdcde;
 444      text-align: left;
 445      cursor: pointer;
 446  }
 447  
 448  .wp-slider .ui-slider-handle {
 449      border-radius: 50%;
 450      height: 18px;
 451      margin-top: -5px;
 452      outline: none;
 453      padding: 2px;
 454      position: absolute;
 455      width: 18px;
 456      z-index: 2;
 457      touch-action: none;
 458  }
 459  
 460  .wp-slider .ui-slider-handle {
 461      background: #f6f7f7;
 462      border: 1px solid #c3c4c7;
 463      box-shadow: 0 1px 0 #c3c4c7;
 464  }
 465  
 466  .wp-slider .ui-slider-handle:hover,
 467  .wp-slider .ui-slider-handle.ui-state-hover {
 468      background: #f6f7f7;
 469      border-color: #8c8f94;
 470  }
 471  
 472  .wp-slider .ui-slider-handle:active,
 473  .wp-slider .ui-slider-handle.ui-state-active {
 474      background: #f0f0f1;
 475      border-color: #8c8f94;
 476      box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5);
 477      transform: translateY(1px);
 478  }
 479  
 480  .wp-slider .ui-slider-handle:focus,
 481  .wp-slider .ui-slider-handle.ui-state-focus {
 482      background: #f0f0f1;
 483      border-color: #8c8f94;
 484      box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
 485      /* Only visible in Windows High Contrast mode */
 486      outline: 2px solid transparent;
 487  }
 488  
 489  .wp-slider .ui-slider-handle:before {
 490      background: none;
 491      position: absolute;
 492      top: 2px;
 493      left: 2px;
 494      color: #50575e;
 495      content: "\f229";
 496      content: "\f229" / '';
 497      font: normal 18px/1 dashicons;
 498      -webkit-font-smoothing: antialiased;
 499      -moz-osx-font-smoothing: grayscale;
 500  }
 501  
 502  .wp-slider .ui-slider-handle:hover:before,
 503  .wp-slider .ui-slider-handle.ui-state-hover:before {
 504      color: #1d2327;
 505  }
 506  
 507  .wp-slider .ui-slider-handle.from-handle:before,
 508  .wp-slider .ui-slider-handle.to-handle:before {
 509      font-size: 20px !important;
 510      margin: -1px 0 0 -1px;
 511  }
 512  
 513  .wp-slider .ui-slider-handle.from-handle:before {
 514      content: "\f139";
 515      content: "\f139" / '';
 516  }
 517  
 518  .wp-slider .ui-slider-handle.to-handle:before {
 519      content: "\f141";
 520      content: "\f141" / '';
 521  }
 522  
 523  .rtl .wp-slider .ui-slider-handle.from-handle:before {
 524      content: "\f141";
 525      content: "\f141" / '';
 526  }
 527  
 528  .rtl .wp-slider .ui-slider-handle.to-handle:before {
 529      content: "\f139";
 530      content: "\f139" / '';
 531      right: -1px;
 532  }
 533  
 534  .wp-slider .ui-slider-range {
 535      position: absolute;
 536      font-size: 0.7em;
 537      display: block;
 538      border: 0;
 539      background-color: transparent;
 540      background-image: none;
 541  }
 542  
 543  .wp-slider.ui-slider-horizontal {
 544      height: 0.7em;
 545  }
 546  
 547  .wp-slider.ui-slider-horizontal .ui-slider-handle {
 548      top: -.25em;
 549      margin-left: -.6em;
 550  }
 551  
 552  .wp-slider.ui-slider-horizontal .ui-slider-range {
 553      top: 0;
 554      height: 100%;
 555  }
 556  
 557  .wp-slider.ui-slider-horizontal .ui-slider-range-min {
 558      left: 0;
 559  }
 560  
 561  .wp-slider.ui-slider-horizontal .ui-slider-range-max {
 562      right: 0;
 563  }
 564  
 565  /* =Media Queries
 566  -------------------------------------------------------------- */
 567  
 568  /**
 569   * HiDPI Displays
 570   */
 571  @media print,
 572    (min-resolution: 120dpi) {
 573      .revision-tick.completed-false {
 574          background-image: url(../images/spinner-2x.gif);
 575      }
 576  }
 577  
 578  @media screen and (max-width: 600px) {
 579      .revisions-meta .author-card:not(.comparing-two-revisions .author-card) {
 580          display: flex;
 581          flex-direction: column;
 582          width: fit-content;
 583          gap: 16px;
 584      }
 585  
 586      .comparing-two-revisions .revisions-meta .restore-revision {
 587          margin-top: 16px;
 588      }
 589  
 590      .revisions-controls {
 591          padding-top: 0;
 592      }
 593  
 594      .revision-toggle-compare-mode {
 595          position: relative;
 596          padding: 1rem 0;
 597      }
 598  }
 599  
 600  @media screen and (max-width: 782px) {
 601      #diff-next-revision,
 602      #diff-previous-revision {
 603          margin-top: -1em;
 604      }
 605  
 606      .revisions-buttons {
 607          overflow: hidden;
 608          margin-bottom: 15px;
 609      }
 610  
 611      .revisions-controls,
 612      .comparing-two-revisions .revisions-controls {
 613          height: fit-content;
 614      }
 615  
 616      .revisions-tooltip {
 617          bottom: 155px;
 618          z-index: 2;
 619      }
 620  
 621      .comparing-two-revisions .revisions-tooltip {
 622          bottom: 200px;
 623      }
 624  
 625      .diff-meta {
 626          overflow: hidden;
 627      }
 628  
 629      table.diff {
 630          -ms-word-break: break-all;
 631          word-break: break-all;
 632          word-wrap: break-word;
 633      }
 634  }