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