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