revisions.css (10028B)
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 tbody tr td:nth-child(2) { 190 width: 4%; 191 } 192 193 table.diff { 194 table-layout: fixed; 195 width: 100%; 196 white-space: pre-wrap; 197 } 198 199 table.diff col.content { 200 width: auto; 201 } 202 203 table.diff col.content.diffsplit { 204 width: 48%; 205 } 206 207 table.diff col.diffsplit.middle { 208 width: auto; 209 } 210 211 table.diff col.ltype { 212 width: 30px; 213 } 214 215 table.diff tr { 216 background-color: transparent; 217 } 218 219 table.diff td, 220 table.diff th { 221 font-family: Consolas, Monaco, monospace; 222 font-size: 14px; 223 line-height: 1.57142857; 224 padding: 0.5em 0.5em 0.5em 2em; 225 vertical-align: top; 226 word-wrap: break-word; 227 } 228 229 table.diff td h1, 230 table.diff td h2, 231 table.diff td h3, 232 table.diff td h4, 233 table.diff td h5, 234 table.diff td h6 { 235 margin: 0; 236 } 237 238 table.diff .diff-deletedline del, 239 table.diff .diff-addedline ins { 240 text-decoration: none; 241 } 242 243 table.diff .diff-deletedline { 244 position: relative; 245 background-color: #fcf0f1; 246 } 247 248 table.diff .diff-deletedline del { 249 background-color: #ffabaf; 250 } 251 252 table.diff .diff-addedline { 253 position: relative; 254 background-color: #edfaef; 255 } 256 257 table.diff .diff-deletedline .dashicons, 258 table.diff .diff-addedline .dashicons { 259 position: absolute; 260 top: 0.85714286em; 261 left: 0.5em; 262 width: 1em; 263 height: 1em; 264 font-size: 1em; 265 line-height: 1; 266 } 267 268 table.diff .diff-addedline .dashicons { 269 /* Compensate the vertically non-centered plus glyph. */ 270 top: 0.92857143em; 271 } 272 273 table.diff .diff-addedline ins { 274 background-color: #68de7c; 275 } 276 277 .diff-meta { 278 padding: 5px; 279 clear: both; 280 min-height: 32px; 281 } 282 283 .diff-title strong { 284 line-height: 2.46153846; 285 min-width: 60px; 286 text-align: right; 287 float: left; 288 margin-right: 5px; 289 } 290 291 .revisions-controls .author-card .author-info { 292 font-size: 12px; 293 line-height: 1.33333333; 294 } 295 296 .revisions-controls .author-card .avatar, 297 .revisions-controls .author-card .author-info { 298 float: left; 299 margin-left: 6px; 300 margin-right: 6px; 301 } 302 303 .revisions-controls .author-card .byline { 304 display: block; 305 font-size: 12px; 306 } 307 308 .revisions-controls .author-card .avatar { 309 vertical-align: middle; 310 } 311 312 .diff-meta input.restore-revision { 313 float: right; 314 margin-left: 6px; 315 margin-right: 6px; 316 margin-top: 2px; 317 } 318 319 .diff-meta-from { 320 display: none; 321 } 322 323 .comparing-two-revisions .diff-meta-from { 324 display: block; 325 } 326 327 .revisions-tooltip { 328 position: absolute; 329 bottom: 105px; 330 margin-right: 0; 331 margin-left: -69px; 332 z-index: 0; 333 max-width: 350px; 334 min-width: 130px; 335 padding: 8px 4px; 336 display: none; 337 opacity: 0; 338 } 339 340 .revisions-tooltip.flipped { 341 margin-left: 0; 342 margin-right: -70px; 343 } 344 345 .revisions.pinned .revisions-tooltip { 346 display: none !important; 347 } 348 349 .comparing-two-revisions .revisions-tooltip { 350 bottom: 145px; 351 } 352 353 .revisions-tooltip-arrow { 354 width: 70px; 355 height: 15px; 356 overflow: hidden; 357 position: absolute; 358 left: 0; 359 margin-left: 35px; 360 bottom: -15px; 361 } 362 363 .revisions-tooltip.flipped .revisions-tooltip-arrow { 364 margin-left: 0; 365 margin-right: 35px; 366 left: auto; 367 right: 0; 368 } 369 370 .revisions-tooltip-arrow > span { 371 content: ""; 372 position: absolute; 373 left: 20px; 374 top: -20px; 375 width: 25px; 376 height: 25px; 377 transform: rotate(45deg); 378 } 379 380 .revisions-tooltip.flipped .revisions-tooltip-arrow > span { 381 left: auto; 382 right: 20px; 383 } 384 385 .revisions-tooltip, 386 .revisions-tooltip-arrow > span { 387 border: 1px solid #dcdcde; 388 background-color: #fff; 389 } 390 391 .revisions-tooltip { 392 display: none; 393 } 394 395 .arrow { 396 width: 70px; 397 height: 16px; 398 overflow: hidden; 399 position: absolute; 400 left: 0; 401 margin-left: -35px; 402 bottom: 90px; 403 z-index: 10000; 404 } 405 406 .arrow:after { 407 z-index: 9999; 408 background-color: #fff; 409 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); 410 } 411 412 .arrow.top { 413 top: -16px; 414 bottom: auto; 415 } 416 417 .arrow.left { 418 left: 20%; 419 } 420 421 .arrow:after { 422 content: ""; 423 position: absolute; 424 left: 20px; 425 top: -20px; 426 width: 25px; 427 height: 25px; 428 transform: rotate(45deg); 429 } 430 431 .revisions-tooltip, 432 .revisions-tooltip-arrow:after { 433 border-width: 1px; 434 border-style: solid; 435 } 436 437 div.revisions-controls > .wp-slider > .ui-slider-handle { 438 margin-left: -10px; 439 } 440 441 .rtl div.revisions-controls > .wp-slider > .ui-slider-handle { 442 margin-right: -10px; 443 } 444 445 /* jQuery UI Slider */ 446 .wp-slider.ui-slider { 447 position: relative; 448 border: 1px solid #dcdcde; 449 text-align: left; 450 cursor: pointer; 451 } 452 453 .wp-slider .ui-slider-handle { 454 border-radius: 50%; 455 height: 18px; 456 margin-top: -5px; 457 outline: none; 458 padding: 2px; 459 position: absolute; 460 width: 18px; 461 z-index: 2; 462 touch-action: none; 463 } 464 465 .wp-slider .ui-slider-handle, 466 .wp-slider .ui-slider-handle.focus { 467 background: #f6f7f7; 468 border: 1px solid #c3c4c7; 469 box-shadow: 0 1px 0 #c3c4c7; 470 } 471 472 .wp-slider .ui-slider-handle:hover, 473 .wp-slider .ui-slider-handle.ui-state-hover { 474 background: #f6f7f7; 475 border-color: #8c8f94; 476 } 477 478 .wp-slider .ui-slider-handle:active, 479 .wp-slider .ui-slider-handle.ui-state-active { 480 background: #f0f0f1; 481 border-color: #8c8f94; 482 box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5); 483 transform: translateY(1px); 484 } 485 486 .wp-slider .ui-slider-handle:before { 487 background: none; 488 position: absolute; 489 top: 2px; 490 left: 2px; 491 color: #50575e; 492 content: "\f229"; 493 font: normal 18px/1 dashicons; 494 speak: never; 495 -webkit-font-smoothing: antialiased; 496 -moz-osx-font-smoothing: grayscale; 497 } 498 499 .wp-slider .ui-slider-handle:hover:before, 500 .wp-slider .ui-slider-handle.ui-state-hover:before { 501 color: #1d2327; 502 } 503 504 .wp-slider .ui-slider-handle.from-handle:before, 505 .wp-slider .ui-slider-handle.to-handle:before { 506 font-size: 20px !important; 507 margin: -1px 0 0 -1px; 508 } 509 510 .wp-slider .ui-slider-handle.from-handle:before { 511 content: "\f139"; 512 } 513 514 .wp-slider .ui-slider-handle.to-handle:before { 515 content: "\f141"; 516 } 517 518 .rtl .wp-slider .ui-slider-handle.from-handle:before { 519 content: "\f141"; 520 } 521 522 .rtl .wp-slider .ui-slider-handle.to-handle:before { 523 content: "\f139"; 524 right: -1px; 525 } 526 527 .wp-slider .ui-slider-range { 528 position: absolute; 529 font-size: 0.7em; 530 display: block; 531 border: 0; 532 background-color: transparent; 533 background-image: none; 534 } 535 536 .wp-slider.ui-slider-horizontal { 537 height: 0.7em; 538 } 539 540 .wp-slider.ui-slider-horizontal .ui-slider-handle { 541 top: -.25em; 542 margin-left: -.6em; 543 } 544 545 .wp-slider.ui-slider-horizontal .ui-slider-range { 546 top: 0; 547 height: 100%; 548 } 549 550 .wp-slider.ui-slider-horizontal .ui-slider-range-min { 551 left: 0; 552 } 553 554 .wp-slider.ui-slider-horizontal .ui-slider-range-max { 555 right: 0; 556 } 557 558 /* =Media Queries 559 -------------------------------------------------------------- */ 560 561 /** 562 * HiDPI Displays 563 */ 564 @media print, 565 (-webkit-min-device-pixel-ratio: 1.25), 566 (min-resolution: 120dpi) { 567 .revision-tick.completed-false { 568 background-image: url(../images/spinner-2x.gif); 569 } 570 } 571 572 @media screen and (max-width: 782px) { 573 #diff-next-revision, 574 #diff-previous-revision { 575 margin-top: -1em; 576 } 577 578 .revisions-buttons { 579 overflow: hidden; 580 margin-bottom: 15px; 581 } 582 583 .revisions-controls, 584 .comparing-two-revisions .revisions-controls { 585 height: 170px; 586 } 587 588 .revisions-tooltip { 589 bottom: 130px; 590 z-index: 2; 591 } 592 593 .diff-meta { 594 overflow: hidden; 595 } 596 597 table.diff { 598 -ms-word-break: break-all; 599 word-break: break-all; 600 word-wrap: break-word; 601 } 602 603 .diff-meta input.restore-revision { 604 margin-top: 0; 605 } 606 }