wp-admin/css/revisions.css

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