← All changes | css/smush.css +72 -126 3.2.22 → 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;
		@@ -665,25 +683,29 @@
665	683	#smush-metabox-inside-wrapper .wpo-toggle-advanced-options.opened ~ .wpo-advanced-options {
666	684	display: block !important;
667	685	}
668	686
669		-#smush-metabox-inside-wrapper .smush-options.custom_compression span {
	687	+#smush-metabox-inside-wrapper .smush-options.custom_compression span,
	688	+.wpo-smush-compress-popup-content .smush-options.custom_compression span {
670	689	display: block;
671	690	max-width: 30%;
672	691	clear: both;
673	692	}
674	693
675		-#smush-metabox-inside-wrapper input#custom_compression_slider {
	694	+#smush-metabox-inside-wrapper input#custom_compression_slider,
	695	+.wpo-smush-compress-popup-content input#custom_compression_slider {
676	696	display: block;
677	697	clear: both;
678	698	width: 100%;
679	699	}
680	700
681		-#smush-metabox-inside-wrapper .smush-options.custom_compression span.alignleft {
	701	+#smush-metabox-inside-wrapper .smush-options.custom_compression span.alignleft,
	702	+.wpo-smush-compress-popup-content .smush-options.custom_compression span.alignleft {
682	703	float: left;
683	704	}
684	705
685		-#smush-metabox-inside-wrapper .smush-options.custom_compression span.alignright {
	706	+#smush-metabox-inside-wrapper .smush-options.custom_compression span.alignright,
	707	+.wpo-smush-compress-popup-content .smush-options.custom_compression span.alignright {
686	708	float: right;
687	709	text-align: right;
688	710	}
689	711
		@@ -692,45 +714,49 @@
692	714	padding-top: 15px;
693	715	text-align: right;
694	716	}
695	717
696		-.media-frame-content .attachment-compat .compat-item,
697		-.compat-field-wpo_compress_image {
	718	+.media-frame-content .attachment-compat .compat-item {
698	719	overflow: visible !important;
699	720	}
700	721
701		-.compat-field-wpo_compress_image {
702		- border-top: 1px solid #DDD;
	722	+/** Smush popup content **/
	723	+.wpo-smush-compress-popup-content {
	724	+ text-align: left;
	725	+ padding: 20px;
703	726	}
704	727
705		-.compat-field-wpo_compress_image span.dashicons {
706		- text-align: left;
707		- float: none;
708		- min-height: 0;
709		- padding-top: 2px;
	728	+.wpo-smush-compress-popup-content .wpo-toggle-advanced-options {
	729	+ margin-top: 20px;
710	730	}
711	731
712		-.compat-field-wpo_compress_image td.field {
713		- width: auto;
714		- float: none;
	732	+.wpo-smush-compress-popup-content h3 {
	733	+ margin-top: 0;
	734	+ text-align: center;
715	735	}
716	736
717		-.compat-field-wpo_compress_image td.field [data-tooltip] {
	737	+.wpo-smush-compress-popup-content h4 {
	738	+ margin-bottom: 5px;
	739	+ margin-top: 10px;
	740	+}
	741	+
	742	+.wpo-smush-compress-popup-content .wpo-advanced-options {
718	743	display: none;
719	744	}
720	745
721		-.compat-field-wpo_compress_image th.label {
722		- text-align: left;
723		- min-width: 0;
724		- float: none;
725		- margin: 0;
	746	+.wpo-smush-compress-popup-content .wpo-toggle-advanced-options.opened + .wpo-advanced-options {
	747	+ display: block;
726	748	}
727	749
728		-.compat-field-wpo_compress_image th.label label span {
729		- font-weight: 500;
730		- text-align: left;
	750	+/* Smush Media Library column */
	751	+.wpo-smush-media-library-column .wpo-smush-compress-popup-btn {
	752	+ margin-bottom: 5px;
731	753	}
732	754
	755	+.wpo-smush-media-library-column .wpo_restore_single_image {
	756	+ margin-bottom: 5px;
	757	+}
	758	+
733	759	/* fix for elementor restore button position */
734	760	.wpo_restore_single_image .alignright {
735	761	float: right;
736	762	}
		@@ -754,98 +780,18 @@
754	780
755	781	/**
756	782	* Tooltip Styles
757	783	*/
758		-/* Add this attribute to the element that needs a tooltip */
759		-#smush-metabox-inside-wrapper [data-tooltip],
760		-.wpo-fieldgroup [data-tooltip] {
761		- position: relative;
762		- cursor: pointer;
763		- line-height: 18px;
764		-}
765		-
766		-#smush-metabox-inside-wrapper .wpo_restore_single_image .restore-icon [data-tooltip] {
767		- display: inline;
768		- padding-top: 1px;
769		-}
770		-
771		-#smush-metabox-inside-wrapper .wpo_restore_single_image .restore-icon [data-tooltip]:before {
772		- margin-left: -110px;
773		- bottom: 100%;
774		-}
775		-
776		-#smush-metabox-inside-wrapper .wpo_restore_single_image .restore-icon [data-tooltip]:after {
777		- bottom: 100%;
778		-}
779		-
780		-/* Hide the tooltip content by default */
781		-#smush-metabox-inside-wrapper [data-tooltip]:before,
782		-#smush-metabox-inside-wrapper [data-tooltip]:after,
783		-.wpo-fieldgroup [data-tooltip]:before,
784		-.wpo-fieldgroup [data-tooltip]:after {
785		- visibility: hidden;
786		- -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
787		- filter: opacity(0%);
788		- opacity: 0;
789		- pointer-events: none;
790		-}
791		-
792		-/* Position tooltip above the element */
793		-#smush-metabox-inside-wrapper [data-tooltip]:before,
794		-.wpo-fieldgroup [data-tooltip]:before {
795		- position: absolute;
796		- bottom: 150%;
797		- left: 50%;
798		- margin-bottom: 5px;
799		- margin-left: -140px;
800		- padding: 12px;
801		- width: 275px;
802		- z-index: 9999;
803		- border-radius: 3px;
804		- background-color: #000;
805		- background-color: hsla(0, 0%, 20%, 0.95);
	784	+.ui-tooltip.ui-widget-content {
	785	+ background: #1D2327;
806	786	color: #FFF;
807		- content: attr(data-tooltip);
808		- text-align: center;
809		- font-size: 0.85rem;
810		- font-weight: 400;
811		- line-height: 1.4;
812		-}
813		-
814		-#smush-metabox-inside-wrapper [data-tooltip]:before {
815		- margin-left: -280px;
816		-}
817		-
818		-/* Triangle hack to make tooltip look like a speech bubble */
819		-#smush-metabox-inside-wrapper [data-tooltip]:after,
820		-.wpo-fieldgroup [data-tooltip]:after {
821		- position: absolute;
822		- bottom: 150%;
823		- left: 50%;
824		- margin-left: -5px;
825		- width: 0;
826		- border-top: 5px solid #000;
827		- border-top: 5px solid hsla(0, 0%, 20%, 0.9);
828		- border-right: 5px solid transparent;
829		- border-left: 5px solid transparent;
830		- content: " ";
831		- font-size: 0;
832		- line-height: 0;
833		-}
834		-
835		-/* Show tooltip content on hover */
836		-#smush-metabox-inside-wrapper [data-tooltip]:hover:before,
837		-#smush-metabox-inside-wrapper [data-tooltip]:hover:after,
838		-.wpo-fieldgroup [data-tooltip]:hover:before,
839		-.wpo-fieldgroup [data-tooltip]:hover:after,
840		-#smush-metabox-inside-wrapper [data-tooltip]:focus:before,
841		-#smush-metabox-inside-wrapper [data-tooltip]:focus:after,
842		-.wpo-fieldgroup [data-tooltip]:focus:before,
843		-.wpo-fieldgroup [data-tooltip]:focus:after {
844		- visibility: visible;
845		- -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
846		- filter: opacity(100%);
847		- 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;
848	794	}
849	795
850	796	/**
851	797	* Animation needed for smush