← All changes | includes/widgets/Image_Comparison/style.css +37 -7 51.1.81 → 51.1.87 View file →

		@@ -2,27 +2,54 @@
2	2	display: grid;
3	3	place-content: center;
4	4	position: relative;
5	5	overflow: hidden;
6		- width: fit-content;
	6	+ width: 100%;
7	7	--position: 50%;
8	8	}
9	9
10	10	.king-addons-image-comparison-container {
11	11	position: relative;
	12	+ display: grid;
	13	+ width: 100%;
	14	+ max-height: inherit;
12	15	}
13	16
14		-.king-addons-image-comparison-container img {
	17	+.king-addons-image-comparison-image-after,
	18	+.king-addons-image-comparison-image-before {
	19	+ grid-area: 1 / 1;
	20	+}
	21	+
	22	+.king-addons-image-comparison-image-after {
	23	+ max-height: inherit;
	24	+}
	25	+
	26	+.king-addons-image-comparison-image-after img {
	27	+ display: block;
15	28	width: 100%;
	29	+ height: auto;
	30	+ max-width: 100%;
	31	+ max-height: inherit;
	32	+ object-position: left center;
	33	+}
	34	+
	35	+.king-addons-image-comparison-image-before {
	36	+ position: relative;
	37	+ z-index: 1;
	38	+ width: 100%;
16	39	height: 100%;
17		- object-fit: none;
18		- object-position: left;
	40	+ overflow: hidden;
	41	+ clip-path: inset(0 calc(100% - var(--position)) 0 0);
19	42	}
20	43
21		-.king-addons-image-comparison-image-before {
	44	+.king-addons-image-comparison-image-before img {
	45	+ display: block;
22	46	position: absolute;
23	47	inset: 0;
24		- width: var(--position);
	48	+ width: 100%;
	49	+ height: 100%;
	50	+ max-width: none;
	51	+ object-position: left center;
25	52	}
26	53
27	54	.king-addons-image-comparison-slider {
28	55	position: absolute;
		@@ -30,8 +57,9 @@
30	57	cursor: pointer;
31	58	opacity: 0;
32	59	width: 100%;
33	60	height: 100%;
	61	+ z-index: 3;
34	62	}
35	63
36	64	.king-addons-image-comparison-slider:focus-visible ~ .king-addons-image-comparison-slider-button {
37	65	outline: 5px solid black;
		@@ -45,8 +73,9 @@
45	73	height: 100%;
46	74	left: var(--position);
47	75	transform: translateX(-50%);
48	76	pointer-events: none;
	77	+ z-index: 2;
49	78	}
50	79
51	80	.king-addons-image-comparison-slider-button {
52	81	position: absolute;
		@@ -56,5 +85,6 @@
56	85	top: 50%;
57	86	left: var(--position);
58	87	transform: translate(-50%, -50%);
59	88	pointer-events: none;
60		-}
	89	+ z-index: 2;
	90	+}