← All changes | css/smush.css +40 -139 3.6.0 → 4.7.0 View file →

		@@ -57,9 +57,9 @@
57	57	left: 20px;
58	58	transform: translatey(-50%);
59	59	}
60	60
61		-.wpo-fieldgroup .compression_server input[type=radio] ~ label h4 {
	61	+.wpo-fieldgroup .compression_server input[type=radio] + div#wpo-resmushit-details h4 {
62	62	color: #23282D;
63	63	margin-top: 0;
64	64	margin-bottom: 0.9em;
65	65	font-size: 1.2em;
		@@ -64,9 +64,9 @@
64	64	margin-bottom: 0.9em;
65	65	font-size: 1.2em;
66	66	}
67	67
68		-.wpo-fieldgroup .compression_server label {
	68	+.wpo-fieldgroup .compression_server div#wpo-resmushit-details {
69	69	display: block;
70	70	position: relative;
71	71	box-sizing: border-box;
72	72	height: 100%;
		@@ -74,9 +74,9 @@
74	74	text-align: left;
75	75	box-shadow: 0px 3px 10px -2px hsla(150, 5%, 65%, 0.5);
76	76	}
77	77
78		-.wpo-fieldgroup .compression_server input[type=radio] + label {
	78	+.wpo-fieldgroup .compression_server input[type=radio] + div#wpo-resmushit-details {
79	79	padding: 20px;
80	80	border: 2px solid #FFF;
81	81	padding-left: 65px;
82	82	position: relative;
		@@ -83,9 +83,9 @@
83	83	border-radius: 5px;
84	84	color: #82868B;
85	85	}
86	86
87		-.wpo-fieldgroup .compression_server input[type=radio] + label::before {
	87	+.wpo-fieldgroup .compression_server input[type=radio] + div#wpo-resmushit-details::before {
88	88	content: "";
89	89	display: block;
90	90	position: absolute;
91	91	top: 0;
		@@ -97,23 +97,26 @@
97	97	.wpo-fieldgroup .save-options {
98	98	margin: 10px 0;
99	99	}
100	100
101		-.wpo-fieldgroup .compression_server input[type=radio]:focus + label,
102		-.wpo-fieldgroup .compression_server input[type=radio] + label:hover {
	101	+.wpo-fieldgroup .compression_server input[type=radio]:focus + div#wpo-resmushit-details,
	102	+.wpo-fieldgroup .compression_server input[type=radio] + div#wpo-resmushit-details:hover {
103	103	border-color: rgba(0, 134, 184, 0.38);
104	104	}
105	105
106		-.wpo-fieldgroup .compression_server input[type=radio]:focus + label {
	106	+.wpo-fieldgroup .compression_server input[type=radio]:focus + div#wpo-resmushit-details,
	107	+.wpo-fieldgroup .compression_server input[type=radio] + div#wpo-resmushit-details:active {
107	108	box-shadow: 0px 3px 10px -2px #5B9DD9;
108	109	}
109	110
110		-.wpo-fieldgroup .compression_server input[type=radio]:focus + label h4 {
	111	+.wpo-fieldgroup .compression_server input[type=radio]:focus + div#wpo-resmushit-details h4,
	112	+.wpo-fieldgroup .compression_server input[type=radio] + div#wpo-resmushit-details:focus h4,
	113	+.wpo-fieldgroup .compression_server input[type=radio] + div#wpo-resmushit-details:active h4 {
111	114	color: #0086B9;
112	115	}
113	116
114		-.wpo-fieldgroup .compression_server input[type=radio]:checked + label,
115		-.wpo-fieldgroup .compression_server input[type=radio]:checked + label:hover {
	117	+.wpo-fieldgroup .compression_server input[type=radio]:checked + div#wpo-resmushit-details,
	118	+.wpo-fieldgroup .compression_server input[type=radio]:checked + div#wpo-resmushit-details:hover {
116	119	border-color: #0086B9;
117	120	}
118	121
119	122	@media only screen and (max-width: 700px) {
		@@ -205,8 +208,14 @@
205	208	border-radius: 50%;
206	209	cursor: pointer;
207	210	}
208	211
	212	+#smush-complete-summary .wpo-save-btn-container {
	213	+ -ms-flex-pack: center;
	214	+ justify-content: center;
	215	+ margin: 10px 0;
	216	+}
	217	+
209	218	.modal-message-text {
210	219	margin: 0 25px;
211	220	}
212	221
		@@ -214,9 +223,9 @@
214	223	margin: 10px;
215	224	}
216	225
217	226	#smush-backup-delete-days {
218		- width: 50px;
	227	+ width: 70px;
219	228	margin: 0 8px;
220	229	}
221	230
222	231	img#wpo_smush_delete_backup_spinner {
		@@ -365,10 +374,15 @@
365	374	height: 16px;
366	375	vertical-align: middle;
367	376	color: #444;
368	377	transition: 0.2s all;
	378	+ position: relative;
369	379	}
370	380
	381	+.wp-version-7 .wpo-fieldgroup .button.wpo-toggle-advanced-options span.dashicons {
	382	+ top: -6px;
	383	+}
	384	+
371	385	.wpo-fieldgroup .wpo-toggle-advanced-options span.text {
372	386	background: #F2F4F4;
373	387	z-index: 1;
374	388	position: relative;
		@@ -409,8 +423,12 @@
409	423	.wpo-fieldgroup .button.wpo-toggle-advanced-options.opened span.dashicons {
410	424	transform: rotate(180deg);
411	425	}
412	426
	427	+.wp-version-7 .wpo-fieldgroup .button.wpo-toggle-advanced-options.opened span.dashicons {
	428	+ top: 4px;
	429	+}
	430	+
413	431	.wpo-fieldgroup .wpo-advanced-options {
414	432	display: none;
415	433	}
416	434
		@@ -565,9 +583,9 @@
565	583	text-align: center;
566	584	}
567	585
568	586	#smush-complete-summary #summary-message {
569		- margin: 15px auto;
	587	+ padding: 15px;
570	588	}
571	589
572	590	img#wpo_smush_images_clear_stats_spinner {
573	591	width: 20px;
		@@ -696,10 +714,9 @@
696	714	padding-top: 15px;
697	715	text-align: right;
698	716	}
699	717
700		-.media-frame-content .attachment-compat .compat-item,
701		-.compat-field-wpo_compress_image {
	718	+.media-frame-content .attachment-compat .compat-item {
702	719	overflow: visible !important;
703	720	}
704	721
705	722	/** Smush popup content **/
		@@ -721,12 +738,8 @@
721	738	margin-bottom: 5px;
722	739	margin-top: 10px;
723	740	}
724	741
725		-.wpo-smush-compress-popup-content label {
726		- display: block;
727		-}
728		-
729	742	.wpo-smush-compress-popup-content .wpo-advanced-options {
730	743	display: none;
731	744	}
732	745
		@@ -742,40 +755,8 @@
742	755	.wpo-smush-media-library-column .wpo_restore_single_image {
743	756	margin-bottom: 5px;
744	757	}
745	758
746		-.compat-field-wpo_compress_image {
747		- border-top: 1px solid #DDD;
748		-}
749		-
750		-.compat-field-wpo_compress_image span.dashicons {
751		- text-align: left;
752		- float: none;
753		- min-height: 0;
754		- padding-top: 2px;
755		-}
756		-
757		-.compat-field-wpo_compress_image td.field {
758		- width: auto;
759		- float: none;
760		-}
761		-
762		-.compat-field-wpo_compress_image td.field [data-tooltip] {
763		- display: none;
764		-}
765		-
766		-.compat-field-wpo_compress_image th.label {
767		- text-align: left;
768		- min-width: 0;
769		- float: none;
770		- margin: 0;
771		-}
772		-
773		-.compat-field-wpo_compress_image th.label label span {
774		- font-weight: 500;
775		- text-align: left;
776		-}
777		-
778	759	/* fix for elementor restore button position */
779	760	.wpo_restore_single_image .alignright {
780	761	float: right;
781	762	}
		@@ -799,98 +780,18 @@
799	780
800	781	/**
801	782	* Tooltip Styles
802	783	*/
803		-/* Add this attribute to the element that needs a tooltip */
804		-#smush-metabox-inside-wrapper [data-tooltip],
805		-.wpo-fieldgroup [data-tooltip] {
806		- position: relative;
807		- cursor: pointer;
808		- line-height: 18px;
809		-}
810		-
811		-#smush-metabox-inside-wrapper .wpo_restore_single_image .restore-icon [data-tooltip] {
812		- display: inline;
813		- padding-top: 1px;
814		-}
815		-
816		-#smush-metabox-inside-wrapper .wpo_restore_single_image .restore-icon [data-tooltip]:before {
817		- margin-left: -110px;
818		- bottom: 100%;
819		-}
820		-
821		-#smush-metabox-inside-wrapper .wpo_restore_single_image .restore-icon [data-tooltip]:after {
822		- bottom: 100%;
823		-}
824		-
825		-/* Hide the tooltip content by default */
826		-#smush-metabox-inside-wrapper [data-tooltip]:before,
827		-#smush-metabox-inside-wrapper [data-tooltip]:after,
828		-.wpo-fieldgroup [data-tooltip]:before,
829		-.wpo-fieldgroup [data-tooltip]:after {
830		- visibility: hidden;
831		- -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
832		- filter: opacity(0%);
833		- opacity: 0;
834		- pointer-events: none;
835		-}
836		-
837		-/* Position tooltip above the element */
838		-#smush-metabox-inside-wrapper [data-tooltip]:before,
839		-.wpo-fieldgroup [data-tooltip]:before {
840		- position: absolute;
841		- bottom: 150%;
842		- left: 50%;
843		- margin-bottom: 5px;
844		- margin-left: -140px;
845		- padding: 12px;
846		- width: 275px;
847		- z-index: 9999;
848		- border-radius: 3px;
849		- background-color: #000;
850		- background-color: hsla(0, 0%, 20%, 0.95);
	784	+.ui-tooltip.ui-widget-content {
	785	+ background: #1D2327;
851	786	color: #FFF;
852		- content: attr(data-tooltip);
853		- text-align: center;
854		- font-size: 0.85rem;
855		- font-weight: 400;
856		- line-height: 1.4;
857		-}
858		-
859		-#smush-metabox-inside-wrapper [data-tooltip]:before {
860		- margin-left: -280px;
861		-}
862		-
863		-/* Triangle hack to make tooltip look like a speech bubble */
864		-#smush-metabox-inside-wrapper [data-tooltip]:after,
865		-.wpo-fieldgroup [data-tooltip]:after {
866		- position: absolute;
867		- bottom: 150%;
868		- left: 50%;
869		- margin-left: -5px;
870		- width: 0;
871		- border-top: 5px solid #000;
872		- border-top: 5px solid hsla(0, 0%, 20%, 0.9);
873		- border-right: 5px solid transparent;
874		- border-left: 5px solid transparent;
875		- content: " ";
876		- font-size: 0;
877		- line-height: 0;
878		-}
879		-
880		-/* Show tooltip content on hover */
881		-#smush-metabox-inside-wrapper [data-tooltip]:hover:before,
882		-#smush-metabox-inside-wrapper [data-tooltip]:hover:after,
883		-.wpo-fieldgroup [data-tooltip]:hover:before,
884		-.wpo-fieldgroup [data-tooltip]:hover:after,
885		-#smush-metabox-inside-wrapper [data-tooltip]:focus:before,
886		-#smush-metabox-inside-wrapper [data-tooltip]:focus:after,
887		-.wpo-fieldgroup [data-tooltip]:focus:before,
888		-.wpo-fieldgroup [data-tooltip]:focus:after {
889		- visibility: visible;
890		- -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
891		- filter: opacity(100%);
892		- opacity: 1;
	787	+ border-radius: 4px;
	788	+ padding: 6px 10px;
	789	+ font-size: 13px;
	790	+ max-width: 260px;
	791	+ line-height: 1.3;
	792	+ z-index: 999990;
	793	+ box-shadow: none;
893	794	}
894	795
895	796	/**
896	797	* Animation needed for smush