← All changes | css/dashboard-widget.css +59 -72 12.0.3 → 16.3-a.1 View file →

		@@ -1,55 +1,50 @@
1		-@charset "UTF-8";
2		-/*
3		-The MIT License (MIT)
4		-
5		-Copyright © 2011–2015 thoughtbot, inc.
6		-
7		-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
8		-documentation files (the “Software”), to deal in the Software without restriction, including without limitation the
9		-rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit
10		-persons to whom the Software is furnished to do so, subject to the following conditions:
11		-
12		-The above copyright notice and this permission notice shall be included in all copies or substantial
13		-portions of the Software.
14		-
15		-THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE
16		-WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
17		-COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
18		-OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
19		-
20		-https://github.com/thoughtbot/bourbon
21		-*/
	1	+/**
	2	+ * $gray color functions:
	3	+ *
	4	+ * color.adjust( $gray, $lightness: 10% )
	5	+ * color.adjust( $gray, $lightness: 20% )
	6	+ * color.adjust( $gray, $lightness: 30% )
	7	+ * color.adjust( $gray, $lightness: -10% )
	8	+ * color.adjust( $gray, $lightness: -20% )
	9	+ * color.adjust( $gray, $lightness: -30% )
	10	+ *
	11	+ * See wordpress.com/design-handbook/colors/ for more info.
	12	+ */
22	13	:root {
23	14	--font-title-large: 36px;
24	15	--font-title-small: 24px;
25	16	--font-body: 16px;
26	17	--font-label: 12px;
27		- --jp-black: #000000;
	18	+ --jp-black: #000;
28	19	--jp-black-80: #2c3338;
29		- --jp-white: #ffffff;
	20	+ --jp-white: #fff;
30	21	--jp-white-off: #f9f9f6;
31	22	--jp-gray: #dcdcde;
32		- --jp-gray-0: #F6F7F7;
	23	+ --jp-gray-0: #f6f7f7;
33	24	--jp-gray-5: #dcdcde;
34	25	--jp-gray-10: #c3c4c7;
35		- --jp-gray-20: #A7AAAD;
	26	+ --jp-gray-20: #a7aaad;
36	27	--jp-gray-30: #8c8f94;
37		- --jp-gray-40: #787C82;
	28	+ --jp-gray-40: #787c82;
38	29	--jp-gray-50: #646970;
39		- --jp-gray-60: #50575E;
	30	+ --jp-gray-60: #50575e;
40	31	--jp-gray-70: #3c434a;
41		- --jp-gray-80: #2C3338;
	32	+ --jp-gray-80: #2c3338;
42	33	--jp-gray-90: #1d2327;
43	34	--jp-gray-100: #101517;
44	35	--jp-gray-off: #e2e2df;
	36	+ --jp-yellow-5: #f5e6b3;
45	37	--jp-yellow-10: #f2cf75;
46		- --jp-red-0: #F7EBEC;
47		- --jp-red-50: #D63638;
48		- --jp-red-60: #B32D2E;
49		- --jp-red-80: #8A2424;
	38	+ --jp-yellow-40: #c08c00;
	39	+ --jp-orange-20: #faa754;
	40	+ --jp-blue-5: #ced9f2;
	41	+ --jp-red-0: #f7ebec;
	42	+ --jp-red-50: #d63638;
	43	+ --jp-red-60: #b32d2e;
	44	+ --jp-red-80: #8a2424;
50	45	--jp-red: #d63639;
51		- --jp-pink: #C9356E;
	46	+ --jp-pink: #c9356e;
52	47	--jp-green-0: #f0f2eb;
53	48	--jp-green-5: #d0e6b8;
54	49	--jp-green-10: #9dd977;
55	50	--jp-green-20: #64ca43;
		@@ -61,11 +56,13 @@
61	56	--jp-green-80: #004515;
62	57	--jp-green-90: #003010;
63	58	--jp-green-100: #001c09;
64	59	--jp-green: #069e08;
	60	+ --jp-green-mint: #d3f6d5;
65	61	--jp-green-primary: var(--jp-green-40);
66	62	--jp-green-secondary: var(--jp-green-30);
67	63	--jp-border-radius: 4px;
	64	+ --jp-border-radius-rna: 8px;
68	65	--jp-menu-border-height: 1px;
69	66	--jp-underline-thickness: 2px;
70	67	--jp-modal-padding-large: 32px;
71	68	--jp-modal-padding: 24px;
		@@ -75,11 +72,8 @@
75	72	--jp-button-radius: 4px;
76	73	--jp-gap: 16px;
77	74	}
78	75
79		-#jetpack_summary_widget {
80		- /* Widget settings */
81		-}
82	76	#jetpack_summary_widget * {
83	77	box-sizing: border-box;
84	78	}
85	79	#jetpack_summary_widget h2.hndle span {
		@@ -95,12 +89,15 @@
95	89	}
96	90	#jetpack_summary_widget pre.stats-widget-error {
97	91	overflow: scroll;
98	92	}
99		-#jetpack_summary_widget .js-toggle-stats_dashboard_widget_control .toggle-indicator:before {
	93	+#jetpack_summary_widget {
	94	+ /* Widget settings */
	95	+}
	96	+#jetpack_summary_widget .js-toggle-stats_dashboard_widget_control .toggle-indicator::before {
100	97	content: "\f111";
101	98	display: inline-block;
102		- font: normal 20px/1 dashicons;
	99	+ font: 400 20px/1 dashicons;
103	100	}
104	101	#jetpack_summary_widget .inside {
105	102	margin: 0;
106	103	padding: 0;
		@@ -116,9 +113,8 @@
116	113	#jetpack_summary_widget .inside #dashboard_stats {
117	114	box-sizing: border-box;
118	115	width: 100%;
119	116	padding: 0 10px;
120		- /* Widget graph contents */
121	117	}
122	118	#jetpack_summary_widget .inside #dashboard_stats.is-loading {
123	119	display: none;
124	120	}
		@@ -127,8 +123,11 @@
127	123	}
128	124	#jetpack_summary_widget .inside #dashboard_stats #stats-graph {
129	125	margin: 0;
130	126	}
	127	+#jetpack_summary_widget .inside #dashboard_stats {
	128	+ /* Widget graph contents */
	129	+}
131	130	#jetpack_summary_widget .inside #dashboard_stats #stat-chart {
132	131	background: none !important;
133	132	}
134	133	#jetpack_summary_widget .inside #dashboard_stats #stats-info {
		@@ -151,10 +150,13 @@
151	150	margin: 0 0 0.5em 0;
152	151	}
153	152	#jetpack_summary_widget .inside #dashboard_stats #stats-info p {
154	153	margin: 0 0 0.25em;
155		- color: #999;
	154	+ color: var(--jp-gray-40);
156	155	}
	156	+#jetpack_summary_widget .inside #dashboard_stats #stats-info p.nothing {
	157	+ color: var(--jp-gray-60);
	158	+}
157	159	#jetpack_summary_widget .inside #dashboard_stats #stats-info p.widget-loading {
158	160	margin: 1em 0 0;
159	161	color: #333;
160	162	}
		@@ -175,13 +177,22 @@
175	177	box-shadow: 0 4px 40px 0 rgba(0, 0, 0, 0.04);
176	178	padding: 1em 1.5em 1em 1.5em;
177	179	overflow: hidden;
178	180	display: grid;
179		- gap: 1em 1em;
180		- grid-template-areas: "header header" "posts searches";
	181	+ row-gap: 1em;
	182	+ grid-template-areas: "header" "content";
	183	+ grid-template-rows: min-content min-content;
	184	+}
	185	+#jetpack_summary_widget .stats-info-content {
	186	+ grid-area: content;
	187	+ display: grid;
	188	+ grid-template-areas: "posts searches";
181	189	grid-template-columns: 1fr 1fr;
182		- grid-template-rows: min-content min-content;
	190	+ column-gap: 1em;
183	191	}
	192	+#jetpack_summary_widget .stats-info-content .stats-section {
	193	+ min-width: 0;
	194	+}
184	195	#jetpack_summary_widget #stats-info .stats-info-header {
185	196	grid-area: header;
186	197	display: flex;
187	198	justify-content: space-between;
		@@ -258,35 +269,8 @@
258	269	}
259	270	#jetpack_summary_widget .wpcom-connect .actions small a {
260	271	color: #999;
261	272	}
262		-#jetpack_summary_widget .button-jetpack {
263		- background: #069e08;
264		- border-color: #046d06;
265		- color: white;
266		- box-shadow: inset 0 1px 0 #09e80c, 0 1px 0 rgba(0, 0, 0, 0.15);
267		-}
268		-#jetpack_summary_widget .button-jetpack:hover, #jetpack_summary_widget .button-jetpack:focus {
269		- background: #058507;
270		- border-color: #035404;
271		- color: white;
272		- box-shadow: inset 0 1px 0 #08cf0a;
273		-}
274		-#jetpack_summary_widget .button-jetpack:focus {
275		- box-shadow: inset 0 1px 0 #08cf0a, 0 0 0 1px #4f94d4, 0 0 2px 1px rgba(30, 140, 190, 0.8);
276		-}
277		-#jetpack_summary_widget .button-jetpack:active {
278		- background: #046d06;
279		- border-color: #035404;
280		- color: white;
281		- box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5), 0 0 0 1px #4f94d4, 0 0 2px 1px rgba(30, 140, 190, 0.8);
282		-}
283		-#jetpack_summary_widget .button-jetpack[disabled], #jetpack_summary_widget .button-jetpack:disabled, #jetpack_summary_widget .button-jetpack.button-primary-disabled, #jetpack_summary_widget .button-jetpack.disabled {
284		- color: #c7d1c7 !important;
285		- background: #057706 !important;
286		- border-color: #035404 !important;
287		- text-shadow: none !important;
288		-}
289	273	#jetpack_summary_widget footer {
290	274	background: var(--jp-white-off);
291	275	overflow: hidden;
292	276	}
		@@ -305,9 +289,9 @@
305	289	padding: 1em 1.5em 1em 1.5em;
306	290	}
307	291	#jetpack_summary_widget footer h3 {
308	292	font-size: 1em;
309		- font-weight: normal;
	293	+ font-weight: 400;
310	294	margin: 0 0 0.25em 0;
311	295	padding: 0;
312	296	}
313	297	#jetpack_summary_widget footer p.blocked-count {
		@@ -338,9 +322,12 @@
338	322	}
339	323	#jetpack_summary_widget footer .footer-links span {
340	324	float: right;
341	325	}
342		-#jetpack_summary_widget footer .button-jetpack {
	326	+#jetpack_summary_widget footer .button {
	327	+ background: var(--jp-black);
	328	+ border-color: var(--jp-black);
	329	+ color: var(--jp-white);
343	330	margin-top: 8px;
344	331	}
345	332
346	333	/* Hide the widget title's SVG in the Screen Options tab */