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
84body.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
189table.diff {
190 table-layout: fixed;
191 width: 100%;
192 white-space: pre-wrap;
193}
194
195table.diff col.content {
196 width: auto;
197}
198
199table.diff col.content.diffsplit {
200 width: 48%;
201}
202
203table.diff col.diffsplit.middle {
204 width: auto;
205}
206
207table.diff col.ltype {
208 width: 30px;
209}
210
211table.diff tr {
212 background-color: transparent;
213}
214
215table.diff td,
216table.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
225table.diff td h1,
226table.diff td h2,
227table.diff td h3,
228table.diff td h4,
229table.diff td h5,
230table.diff td h6 {
231 margin: 0;
232}
233
234table.diff .diff-deletedline del,
235table.diff .diff-addedline ins {
236 text-decoration: none;
237}
238
239table.diff .diff-deletedline {
240 position: relative;
241 background-color: #fcf0f1;
242}
243
244table.diff .diff-deletedline del {
245 background-color: #ffabaf;
246}
247
248table.diff .diff-addedline {
249 position: relative;
250 background-color: #edfaef;
251}
252
253table.diff .diff-deletedline .dashicons,
254table.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
264table.diff .diff-addedline .dashicons {
265 /* Compensate the vertically non-centered plus glyph. */
266 top: 0.92857143em;
267}
268
269table.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
433div.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 content: "\f229" / '';
498 font: normal 18px/1 dashicons;
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 content: "\f139" / '';
517}
518
519.wp-slider .ui-slider-handle.to-handle:before {
520 content: "\f141";
521 content: "\f141" / '';
522}
523
524.rtl .wp-slider .ui-slider-handle.from-handle:before {
525 content: "\f141";
526 content: "\f141" / '';
527}
528
529.rtl .wp-slider .ui-slider-handle.to-handle:before {
530 content: "\f139";
531 content: "\f139" / '';
532 right: -1px;
533}
534
535.wp-slider .ui-slider-range {
536 position: absolute;
537 font-size: 0.7em;
538 display: block;
539 border: 0;
540 background-color: transparent;
541 background-image: none;
542}
543
544.wp-slider.ui-slider-horizontal {
545 height: 0.7em;
546}
547
548.wp-slider.ui-slider-horizontal .ui-slider-handle {
549 top: -.25em;
550 margin-left: -.6em;
551}
552
553.wp-slider.ui-slider-horizontal .ui-slider-range {
554 top: 0;
555 height: 100%;
556}
557
558.wp-slider.ui-slider-horizontal .ui-slider-range-min {
559 left: 0;
560}
561
562.wp-slider.ui-slider-horizontal .ui-slider-range-max {
563 right: 0;
564}
565
566/* =Media Queries
567-------------------------------------------------------------- */
568
569/**
570 * HiDPI Displays
571 */
572@media print,
573 (min-resolution: 120dpi) {
574 .revision-tick.completed-false {
575 background-image: url(../images/spinner-2x.gif);
576 }
577}
578
579@media screen and (max-width: 600px) {
580 .revisions-meta .author-card:not(.comparing-two-revisions .author-card) {
581 display: flex;
582 flex-direction: column;
583 width: fit-content;
584 gap: 16px;
585 }
586
587 .comparing-two-revisions .revisions-meta .restore-revision {
588 margin-top: 16px;
589 }
590
591 .revisions-controls {
592 padding-top: 0;
593 }
594
595 .revision-toggle-compare-mode {
596 position: relative;
597 padding: 1rem 0;
598 }
599}
600
601@media screen and (max-width: 782px) {
602 #diff-next-revision,
603 #diff-previous-revision {
604 margin-top: -1em;
605 }
606
607 .revisions-buttons {
608 overflow: hidden;
609 margin-bottom: 15px;
610 }
611
612 .revisions-controls,
613 .comparing-two-revisions .revisions-controls {
614 height: fit-content;
615 }
616
617 .revisions-tooltip {
618 bottom: 155px;
619 z-index: 2;
620 }
621
622 .comparing-two-revisions .revisions-tooltip {
623 bottom: 200px;
624 }
625
626 .diff-meta {
627 overflow: hidden;
628 }
629
630 table.diff {
631 -ms-word-break: break-all;
632 word-break: break-all;
633 word-wrap: break-word;
634 }
635
636 .diff-meta input.restore-revision {
637 margin-top: 0;
638 }
639}
640