← All changes | modules/likes/style.css +55 -41 12.7.3 → 16.3-a.1 View file →

		@@ -3,9 +3,9 @@
3	3	*/
4	4
5	5	/* Master container */
6	6	#jp-post-flair {
7		- padding-top: .5em;
	7	+ padding-top: 0.5em;
8	8	}
9	9
10	10	/* Overall Sharedaddy block title */
11	11	div.sharedaddy,
		@@ -18,12 +18,12 @@
18	18	margin: 0 0 1em 0;
19	19	display: inline-block;
20	20	line-height: 1.2;
21	21	font-size: 9pt;
22		- font-weight: bold;
	22	+ font-weight: 700;
23	23	}
24	24
25		-div.sharedaddy h3.sd-title:before {
	25	+div.sharedaddy h3.sd-title::before {
26	26	content: "";
27	27	display: block;
28	28	width: 100%;
29	29	min-width: 30px;
		@@ -32,22 +32,8 @@
32	32	}
33	33
34	34
35	35	/* Toolbar */
36		-#wpadminbar li#wp-admin-bar-admin-bar-likes-widget {
37		- width: 61px;
38		- overflow: hidden;
39		-}
40		-
41		-#wpadminbar iframe.admin-bar-likes-widget {
42		- width: 61px;
43		- height: 28px;
44		- min-height: 28px;
45		- border-width: 0px;
46		- position: absolute;
47		- top: 0;
48		-}
49		-
50	36	div.jetpack-likes-widget-wrapper {
51	37	width: 100%;
52	38	min-height: 50px; /* Previous height, 60px */
53	39	position: relative; /* Need to abs position placeholder and iframe so there isn't a jarring jump */
		@@ -69,14 +55,17 @@
69	55
70	56	#likes-other-gravatars {
71	57	display: none;
72	58	position: absolute;
73		- padding: 10px 10px 12px 10px;
74		- background-color: #2e4453;
75		- border-width: 0;
76		- box-shadow: 0 0 10px #2e4453;
77		- box-shadow: 0 0 10px rgba(46,68,83,.6);
78		- min-width: 130px;
	59	+ padding: 9px 12px 10px 12px;
	60	+ background-color: #fff;
	61	+ border: solid 1px #dcdcde;
	62	+ border-radius: 4px;
	63	+ box-shadow: none;
	64	+ min-width: 220px;
	65	+ max-height: 240px;
	66	+ height: auto;
	67	+ overflow: auto;
79	68	z-index: 1000;
80	69	}
81	70
82	71	#likes-other-gravatars * {
		@@ -83,10 +72,11 @@
83	72	line-height: normal;
84	73	}
85	74
86	75	#likes-other-gravatars .likes-text {
87		- color: white;
	76	+ color: #101517;
88	77	font-size: 12px;
	78	+ font-weight: 500;
89	79	padding-bottom: 8px;
90	80	}
91	81
92	82	#likes-other-gravatars ul,
		@@ -107,38 +97,64 @@
107	97	max-height: 190px;
108	98	}
109	99
110	100	#likes-other-gravatars ul.wpl-avatars li {
111		- width: 32px;
112		- height: 32px;
113		- float: left;
114		- margin: 0 5px 5px 0;
	101	+ width: 196px;
	102	+ height: 28px;
	103	+ float: none;
	104	+ margin: 0 0 4px 0;
115	105	}
116	106
117	107	#likes-other-gravatars ul.wpl-avatars li a {
118	108	margin: 0 2px 0 0;
119	109	border-bottom: none !important;
120		- display: block;
	110	+ display: flex;
	111	+ align-items: center;
	112	+ gap: 8px;
	113	+ text-decoration: none;
121	114	}
122	115
	116	+#likes-other-gravatars ul.wpl-avatars li a span {
	117	+ font-size: 12px;
	118	+ color: #2c3338;
	119	+ overflow: hidden;
	120	+ text-overflow: ellipsis;
	121	+ white-space: nowrap;
	122	+}
	123	+
123	124	#likes-other-gravatars ul.wpl-avatars li a img {
124	125	background: none;
125	126	border: none;
	127	+ border-radius: 50%;
126	128	margin: 0 !important;
127		- padding: 0 !important;
	129	+ padding: 1px !important;
128	130	position: static;
	131	+ box-sizing: border-box;
129	132	}
130	133
131	134	div.sd-box {
132	135	border-top: 1px solid #dcdcde;
133		- border-top: 1px solid rgba(0,0,0,.13);
	136	+ border-top: 1px solid rgba(0, 0, 0, 0.13);
134	137	}
135	138
136		-.entry-content .post-likes-widget, .post-likes-widget,
	139	+
	140	+.jetpack-likes-widget-unloaded .likes-widget-placeholder,
	141	+.jetpack-likes-widget-loading .likes-widget-placeholder,
	142	+.jetpack-likes-widget-loaded iframe {
	143	+ display: block;
	144	+}
	145	+
	146	+.jetpack-likes-widget-loaded .likes-widget-placeholder,
	147	+.jetpack-likes-widget-unloaded iframe,
	148	+.jetpack-likes-widget-loading iframe {
	149	+ display: none;
	150	+}
	151	+
	152	+.entry-content .post-likes-widget,
	153	+.post-likes-widget,
137	154	.comment-likes-widget {
138	155	margin: 0;
139	156	border-width: 0;
140		- display: block;
141	157	}
142	158
143	159	/* Loading text */
144	160	.post-likes-widget-placeholder,
		@@ -151,16 +167,16 @@
151	167	.comment-likes-widget-placeholder {
152	168	height: 18px;
153	169	position: absolute;
154	170	display: flex;
155		- font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
	171	+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
156	172	}
157	173
158	174	.comment-likes-widget-placeholder::before {
159		- color: #2EA2CC;
	175	+ color: #2ea2cc;
160	176	width: 16px;
161	177	height: 16px;
162		- content: '';
	178	+ content: "";
163	179	display: inline-block;
164	180	position: relative;
165	181	top: 3px;
166	182	padding-right: 5px;
		@@ -172,11 +188,8 @@
172	188	.post-likes-widget-placeholder .button {
173	189	display: none; /* Let's not show a dummy like button, let's just make a great button experience once it's loaded */
174	190	}
175	191
176		-.post-likes-widget-placeholder .button span {
177		-}
178		-
179	192	.post-likes-widget-placeholder .loading,
180	193	.comment-likes-widget-placeholder .loading {
181	194	color: #999;
182	195	font-size: 12px;
		@@ -185,9 +198,9 @@
185	198	.comment-likes-widget-placeholder .loading {
186	199	padding-left: 5px;
187	200	margin-top: 4px;
188	201	align-self: center;
189		- color: #4E4E4E;
	202	+ color: #4e4e4e;
190	203	}
191	204
192	205	/* Like Special cases (display on it's own) */
193	206	div.sharedaddy.sd-like-enabled .sd-like h3 {
		@@ -205,9 +218,9 @@
205	218	width: 100%;
206	219	}
207	220
208	221
209		-/* Make ratings block. @todo: make !important unnecessary by removing inline style */
	222	+/* Make ratings block. @todo: remove inline style so !important is not needed */
210	223	.pd-rating,
211	224	.cs-rating {
212	225	display: block !important;
213	226	}
		@@ -218,8 +231,9 @@
218	231	display: none;
219	232	}
220	233
221	234	@media print {
	235	+
222	236	.jetpack-likes-widget-wrapper {
223	237	display: none;
224	238	}
225	239	}