← All changes | css/smush.css +26 -91 4.5.4 → 4.7.0 View file →

		@@ -208,8 +208,14 @@
208	208	border-radius: 50%;
209	209	cursor: pointer;
210	210	}
211	211
	212	+#smush-complete-summary .wpo-save-btn-container {
	213	+ -ms-flex-pack: center;
	214	+ justify-content: center;
	215	+ margin: 10px 0;
	216	+}
	217	+
212	218	.modal-message-text {
213	219	margin: 0 25px;
214	220	}
215	221
		@@ -217,9 +223,9 @@
217	223	margin: 10px;
218	224	}
219	225
220	226	#smush-backup-delete-days {
221		- width: 50px;
	227	+ width: 70px;
222	228	margin: 0 8px;
223	229	}
224	230
225	231	img#wpo_smush_delete_backup_spinner {
		@@ -368,10 +374,15 @@
368	374	height: 16px;
369	375	vertical-align: middle;
370	376	color: #444;
371	377	transition: 0.2s all;
	378	+ position: relative;
372	379	}
373	380
	381	+.wp-version-7 .wpo-fieldgroup .button.wpo-toggle-advanced-options span.dashicons {
	382	+ top: -6px;
	383	+}
	384	+
374	385	.wpo-fieldgroup .wpo-toggle-advanced-options span.text {
375	386	background: #F2F4F4;
376	387	z-index: 1;
377	388	position: relative;
		@@ -412,8 +423,12 @@
412	423	.wpo-fieldgroup .button.wpo-toggle-advanced-options.opened span.dashicons {
413	424	transform: rotate(180deg);
414	425	}
415	426
	427	+.wp-version-7 .wpo-fieldgroup .button.wpo-toggle-advanced-options.opened span.dashicons {
	428	+ top: 4px;
	429	+}
	430	+
416	431	.wpo-fieldgroup .wpo-advanced-options {
417	432	display: none;
418	433	}
419	434
		@@ -568,9 +583,9 @@
568	583	text-align: center;
569	584	}
570	585
571	586	#smush-complete-summary #summary-message {
572		- margin: 15px auto;
	587	+ padding: 15px;
573	588	}
574	589
575	590	img#wpo_smush_images_clear_stats_spinner {
576	591	width: 20px;
		@@ -765,98 +780,18 @@
765	780
766	781	/**
767	782	* Tooltip Styles
768	783	*/
769		-/* Add this attribute to the element that needs a tooltip */
770		-#smush-metabox-inside-wrapper [data-tooltip],
771		-.wpo-fieldgroup [data-tooltip] {
772		- position: relative;
773		- cursor: pointer;
774		- line-height: 18px;
775		-}
776		-
777		-#smush-metabox-inside-wrapper .wpo_restore_single_image .restore-icon [data-tooltip] {
778		- display: inline;
779		- padding-top: 1px;
780		-}
781		-
782		-#smush-metabox-inside-wrapper .wpo_restore_single_image .restore-icon [data-tooltip]:before {
783		- margin-left: -110px;
784		- bottom: 100%;
785		-}
786		-
787		-#smush-metabox-inside-wrapper .wpo_restore_single_image .restore-icon [data-tooltip]:after {
788		- bottom: 100%;
789		-}
790		-
791		-/* Hide the tooltip content by default */
792		-#smush-metabox-inside-wrapper [data-tooltip]:before,
793		-#smush-metabox-inside-wrapper [data-tooltip]:after,
794		-.wpo-fieldgroup [data-tooltip]:before,
795		-.wpo-fieldgroup [data-tooltip]:after {
796		- visibility: hidden;
797		- -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
798		- filter: opacity(0%);
799		- opacity: 0;
800		- pointer-events: none;
801		-}
802		-
803		-/* Position tooltip above the element */
804		-#smush-metabox-inside-wrapper [data-tooltip]:before,
805		-.wpo-fieldgroup [data-tooltip]:before {
806		- position: absolute;
807		- bottom: 150%;
808		- left: 50%;
809		- margin-bottom: 5px;
810		- margin-left: -140px;
811		- padding: 12px;
812		- width: 275px;
813		- z-index: 9999;
814		- border-radius: 3px;
815		- background-color: #000;
816		- background-color: hsla(0, 0%, 20%, 0.95);
	784	+.ui-tooltip.ui-widget-content {
	785	+ background: #1D2327;
817	786	color: #FFF;
818		- content: attr(data-tooltip);
819		- text-align: center;
820		- font-size: 0.85rem;
821		- font-weight: 400;
822		- line-height: 1.4;
823		-}
824		-
825		-#smush-metabox-inside-wrapper [data-tooltip]:before {
826		- margin-left: -280px;
827		-}
828		-
829		-/* Triangle hack to make tooltip look like a speech bubble */
830		-#smush-metabox-inside-wrapper [data-tooltip]:after,
831		-.wpo-fieldgroup [data-tooltip]:after {
832		- position: absolute;
833		- bottom: 150%;
834		- left: 50%;
835		- margin-left: -5px;
836		- width: 0;
837		- border-top: 5px solid #000;
838		- border-top: 5px solid hsla(0, 0%, 20%, 0.9);
839		- border-right: 5px solid transparent;
840		- border-left: 5px solid transparent;
841		- content: " ";
842		- font-size: 0;
843		- line-height: 0;
844		-}
845		-
846		-/* Show tooltip content on hover */
847		-#smush-metabox-inside-wrapper [data-tooltip]:hover:before,
848		-#smush-metabox-inside-wrapper [data-tooltip]:hover:after,
849		-.wpo-fieldgroup [data-tooltip]:hover:before,
850		-.wpo-fieldgroup [data-tooltip]:hover:after,
851		-#smush-metabox-inside-wrapper [data-tooltip]:focus:before,
852		-#smush-metabox-inside-wrapper [data-tooltip]:focus:after,
853		-.wpo-fieldgroup [data-tooltip]:focus:before,
854		-.wpo-fieldgroup [data-tooltip]:focus:after {
855		- visibility: visible;
856		- -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
857		- filter: opacity(100%);
858		- 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;
859	794	}
860	795
861	796	/**
862	797	* Animation needed for smush