109 |
109 |
110 #the-comment-list td.comment img { |
110 #the-comment-list td.comment img { |
111 max-width: 100%; |
111 max-width: 100%; |
112 } |
112 } |
113 |
113 |
|
114 /* Screen meta exception for when the "Dashboard" heading is missing or located below the Welcome Panel. */ |
|
115 .index-php #screen-meta-links { |
|
116 margin: 0 0 8px 20px; |
|
117 } |
|
118 |
114 /* Welcome Panel */ |
119 /* Welcome Panel */ |
115 .welcome-panel { |
120 .welcome-panel { |
116 position: relative; |
121 position: relative; |
117 overflow: auto; |
122 overflow: auto; |
118 margin: 16px 0; |
123 margin: 16px 0; |
119 padding: 23px 10px 0; |
124 background-color: #e7ebfd; |
120 border: 1px solid #c3c4c7; |
125 font-size: 14px; |
121 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); |
126 line-height: 1.3; |
122 background: #fff; |
127 clear: both; |
123 font-size: 13px; |
|
124 line-height: 1.7; |
|
125 } |
128 } |
126 |
129 |
127 .welcome-panel h2 { |
130 .welcome-panel h2 { |
128 margin: 0; |
131 margin: 0; |
129 font-size: 21px; |
132 font-size: 48px; |
|
133 font-weight: 600; |
|
134 line-height: 1.25; |
|
135 } |
|
136 |
|
137 .welcome-panel h3 { |
|
138 margin: 0; |
|
139 font-size: 20px; |
130 font-weight: 400; |
140 font-weight: 400; |
131 line-height: 1.2; |
141 line-height: 1.4; |
132 } |
|
133 |
|
134 .welcome-panel h3 { |
|
135 margin: 1.33em 0 0; |
|
136 font-size: 16px; |
|
137 } |
|
138 |
|
139 .welcome-panel li { |
|
140 font-size: 14px; |
|
141 } |
142 } |
142 |
143 |
143 .welcome-panel p { |
144 .welcome-panel p { |
144 color: #646970; |
145 font-size: inherit; |
145 } |
146 line-height: inherit; |
146 |
147 } |
147 .welcome-panel li a { |
148 |
|
149 .welcome-panel-header { |
|
150 --about-header-image-width: 521px; |
|
151 --about-header-bg-width: calc(var(--about-header-image-width) * 0.55); |
|
152 --about-header-bg-offset-inline: 2rem; |
|
153 |
|
154 position: relative; |
|
155 } |
|
156 |
|
157 .welcome-panel-header-image { |
|
158 position: absolute; |
|
159 top: -1rem; |
|
160 left: var(--about-header-bg-offset-inline); |
|
161 bottom: 0; |
|
162 width: var(--about-header-bg-width); |
|
163 height: auto; |
|
164 } |
|
165 |
|
166 .welcome-panel-header-image svg { |
|
167 width: 100%; |
|
168 height: auto; |
|
169 } |
|
170 |
|
171 .welcome-panel-header a { |
|
172 color: inherit; |
|
173 } |
|
174 |
|
175 .welcome-panel-header a:focus, |
|
176 .welcome-panel-header a:hover { |
|
177 color: inherit; |
148 text-decoration: none; |
178 text-decoration: none; |
149 } |
179 } |
150 |
180 |
151 .welcome-panel .about-description { |
181 .welcome-panel-header a:focus, |
152 font-size: 16px; |
182 .welcome-panel .welcome-panel-close:focus { |
153 margin: 0; |
183 outline-color: currentColor; |
|
184 outline-offset: 1px; |
|
185 box-shadow: none; |
|
186 } |
|
187 |
|
188 .welcome-panel-header p { |
|
189 margin: 0.5em 0 0; |
|
190 font-size: 20px; |
|
191 line-height: 1.4; |
154 } |
192 } |
155 |
193 |
156 .welcome-panel .welcome-panel-close { |
194 .welcome-panel .welcome-panel-close { |
157 position: absolute; |
195 position: absolute; |
158 top: 10px; |
196 top: 10px; |
159 left: 10px; |
197 left: 10px; |
160 padding: 10px 21px 10px 15px; |
198 padding: 10px 24px 10px 15px; |
161 font-size: 13px; |
199 font-size: 13px; |
162 line-height: 1.23076923; /* Chrome rounding, needs to be 16px equivalent */ |
200 line-height: 1.23076923; /* Chrome rounding, needs to be 16px equivalent */ |
163 text-decoration: none; |
201 text-decoration: none; |
|
202 z-index: 1; /* Raise above the version image. */ |
164 } |
203 } |
165 |
204 |
166 .welcome-panel .welcome-panel-close:before { |
205 .welcome-panel .welcome-panel-close:before { |
167 position: absolute; |
206 position: absolute; |
168 top: 8px; |
207 top: 8px; |
169 right: 0; |
208 right: 0; |
170 transition: all .1s ease-in-out; |
209 transition: all .1s ease-in-out; |
171 } |
210 content: '\f335'; |
172 |
211 font-size: 24px; |
|
212 color: #1d2327; |
|
213 } |
|
214 |
|
215 .welcome-panel .welcome-panel-close { |
|
216 color: #1d2327; |
|
217 } |
|
218 |
|
219 .welcome-panel .welcome-panel-close:hover, |
|
220 .welcome-panel .welcome-panel-close:focus, |
|
221 .welcome-panel .welcome-panel-close:hover::before, |
|
222 .welcome-panel .welcome-panel-close:focus::before { |
|
223 color: #2271b1; |
|
224 } |
|
225 |
|
226 /* @deprecated 5.9.0 -- Button removed from panel. */ |
173 .wp-core-ui .welcome-panel .button.button-hero { |
227 .wp-core-ui .welcome-panel .button.button-hero { |
174 margin: 15px 0 3px 13px; |
228 margin: 15px 0 3px 13px; |
175 padding: 12px 36px; |
229 padding: 12px 36px; |
176 height: auto; |
230 height: auto; |
177 line-height: 1.4285714; |
231 line-height: 1.4285714; |
178 white-space: normal; |
232 white-space: normal; |
179 } |
233 } |
180 |
234 |
181 .welcome-panel-content { |
235 .welcome-panel-content { |
182 margin-right: 13px; |
236 min-height: 400px; |
|
237 display: flex; |
|
238 flex-direction: column; |
|
239 justify-content: space-between; |
|
240 } |
|
241 |
|
242 .welcome-panel-header { |
|
243 box-sizing: border-box; |
|
244 margin-right: auto; |
|
245 margin-left: auto; |
183 max-width: 1500px; |
246 max-width: 1500px; |
|
247 width: 100%; |
|
248 padding: 48px 48px 80px 0; |
|
249 padding-left: calc(var(--about-header-bg-width) + (var(--about-header-bg-offset-inline) * 2)); |
184 } |
250 } |
185 |
251 |
186 .welcome-panel .welcome-panel-column-container { |
252 .welcome-panel .welcome-panel-column-container { |
|
253 box-sizing: border-box; |
|
254 width: 100%; |
187 clear: both; |
255 clear: both; |
188 position: relative; |
256 display: grid; |
189 } |
257 z-index: 1; |
190 |
258 padding: 48px; |
191 .welcome-panel .welcome-panel-column { |
259 grid-template-columns: repeat(3, 1fr); |
192 width: 32%; |
260 gap: 32px; |
193 min-width: 200px; |
261 align-self: flex-end; |
194 float: right; |
262 background: #fff; |
195 } |
263 } |
196 |
264 |
197 .welcome-panel .welcome-panel-column:first-child { |
265 [class*="welcome-panel-icon"] { |
198 width: 36%; |
266 height: 60px; |
199 } |
267 width: 60px; |
200 |
268 background-color: #1d2327; |
201 .welcome-panel-column p.hide-if-no-customize { |
269 background-position: center; |
202 margin-top: 10px; |
270 background-size: 24px 24px; |
203 } |
271 background-repeat: no-repeat; |
204 |
272 border-radius: 100%; |
205 .welcome-panel-column p { |
273 } |
206 margin-top: 7px; |
274 |
207 color: #3c434a; |
275 .welcome-panel-column { |
208 } |
276 display: grid; |
209 |
277 grid-template-columns: min-content 1fr; |
|
278 gap: 24px; |
|
279 } |
|
280 |
|
281 .welcome-panel-icon-pages { |
|
282 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M7 13.8h6v-1.5H7v1.5zM18 16V4c0-1.1-.9-2-2-2H6c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2zM5.5 16V4c0-.3.2-.5.5-.5h10c.3 0 .5.2.5.5v12c0 .3-.2.5-.5.5H6c-.3 0-.5-.2-.5-.5zM7 10.5h8V9H7v1.5zm0-3.3h8V5.8H7v1.4zM20.2 6v13c0 .7-.6 1.2-1.2 1.2H8v1.5h11c1.5 0 2.7-1.2 2.7-2.8V6h-1.5z' /%3E%3C/svg%3E"); |
|
283 } |
|
284 |
|
285 .welcome-panel-icon-layout { |
|
286 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M18 5.5H6a.5.5 0 00-.5.5v3h13V6a.5.5 0 00-.5-.5zm.5 5H10v8h8a.5.5 0 00.5-.5v-7.5zm-10 0h-3V18a.5.5 0 00.5.5h2.5v-8zM6 4h12a2 2 0 012 2v12a2 2 0 01-2 2H6a2 2 0 01-2-2V6a2 2 0 012-2z' /%3E%3C/svg%3E"); |
|
287 } |
|
288 |
|
289 .welcome-panel-icon-styles { |
|
290 background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M12 4c-4.4 0-8 3.6-8 8v.1c0 4.1 3.2 7.5 7.2 7.9h.8c4.4 0 8-3.6 8-8s-3.6-8-8-8zm0 15V5c3.9 0 7 3.1 7 7s-3.1 7-7 7z' /%3E%3C/svg%3E"); |
|
291 } |
|
292 |
|
293 /* @deprecated 5.9.0 -- Section removed from welcome panel. */ |
210 .welcome-panel .welcome-widgets-menus { |
294 .welcome-panel .welcome-widgets-menus { |
211 line-height: 1.14285714; |
295 line-height: 1.14285714; |
212 } |
296 } |
213 |
297 |
|
298 /* @deprecated 5.9.0 -- Lists removed from welcome panel. */ |
214 .welcome-panel .welcome-panel-column ul { |
299 .welcome-panel .welcome-panel-column ul { |
215 margin: 0.8em 0 1em 1em; |
300 margin: 0.8em 0 1em 1em; |
216 } |
301 } |
217 |
302 |
|
303 /* @deprecated 5.9.0 -- Lists removed from welcome panel. */ |
|
304 .welcome-panel li { |
|
305 font-size: 14px; |
|
306 } |
|
307 |
|
308 /* @deprecated 5.9.0 -- Lists removed from welcome panel. */ |
|
309 .welcome-panel li a { |
|
310 text-decoration: none; |
|
311 } |
|
312 |
|
313 /* @deprecated 5.9.0 -- Lists removed from welcome panel. */ |
218 .welcome-panel .welcome-panel-column li { |
314 .welcome-panel .welcome-panel-column li { |
219 line-height: 1.14285714; |
315 line-height: 1.14285714; |
220 list-style-type: none; |
316 list-style-type: none; |
221 padding: 0 0 8px; |
317 padding: 0 0 8px; |
222 } |
318 } |
223 |
319 |
|
320 /* @deprecated 5.9.0 -- Icons removed from welcome panel. */ |
224 .welcome-panel .welcome-icon { |
321 .welcome-panel .welcome-icon { |
225 background: transparent !important; |
322 background: transparent !important; |
226 } |
323 } |
227 |
324 |
228 /* Welcome Panel and Right Now common Icons style */ |
325 /* Welcome Panel and Right Now common Icons style */ |
229 |
326 |
|
327 /* @deprecated 5.9.0 -- Icons removed from welcome panel. */ |
230 .welcome-panel .welcome-icon:before, |
328 .welcome-panel .welcome-icon:before, |
231 #dashboard_right_now li a:before, |
329 #dashboard_right_now li a:before, |
232 #dashboard_right_now li span:before, |
330 #dashboard_right_now li span:before, |
233 #dashboard_right_now .search-engines-info:before { |
331 #dashboard_right_now .search-engines-info:before { |
234 color: #646970; |
332 color: #646970; |
243 vertical-align: top; |
341 vertical-align: top; |
244 } |
342 } |
245 |
343 |
246 /* Welcome Panel specific Icons styles */ |
344 /* Welcome Panel specific Icons styles */ |
247 |
345 |
|
346 /* @deprecated 5.9.0 -- Icons removed from welcome panel. */ |
248 .welcome-panel .welcome-write-blog:before, |
347 .welcome-panel .welcome-write-blog:before, |
249 .welcome-panel .welcome-edit-page:before { |
348 .welcome-panel .welcome-edit-page:before { |
250 content: "\f119"; |
349 content: "\f119"; |
251 top: -3px; |
350 top: -3px; |
252 } |
351 } |
253 |
352 |
|
353 /* @deprecated 5.9.0 -- Icons removed from welcome panel. */ |
254 .welcome-panel .welcome-add-page:before { |
354 .welcome-panel .welcome-add-page:before { |
255 content: "\f132"; |
355 content: "\f132"; |
256 top: -1px; |
356 top: -1px; |
257 } |
357 } |
258 |
358 |
|
359 /* @deprecated 5.9.0 -- Icons removed from welcome panel. */ |
259 .welcome-panel .welcome-setup-home:before { |
360 .welcome-panel .welcome-setup-home:before { |
260 content: "\f102"; |
361 content: "\f102"; |
261 top: -1px; |
362 top: -1px; |
262 } |
363 } |
263 |
364 |
|
365 /* @deprecated 5.9.0 -- Icons removed from welcome panel. */ |
264 .welcome-panel .welcome-view-site:before { |
366 .welcome-panel .welcome-view-site:before { |
265 content: "\f115"; |
367 content: "\f115"; |
266 top: -2px; |
368 top: -2px; |
267 } |
369 } |
268 |
370 |
|
371 /* @deprecated 5.9.0 -- Icons removed from welcome panel. */ |
269 .welcome-panel .welcome-widgets-menus:before { |
372 .welcome-panel .welcome-widgets-menus:before { |
270 content: "\f116"; |
373 content: "\f116"; |
271 top: -2px; |
374 top: -2px; |
272 } |
375 } |
273 |
376 |
|
377 /* @deprecated 5.9.0 -- Icons removed from welcome panel. */ |
274 .welcome-panel .welcome-widgets:before { |
378 .welcome-panel .welcome-widgets:before { |
275 content: "\f538"; |
379 content: "\f538"; |
276 top: -2px; |
380 top: -2px; |
277 } |
381 } |
278 |
382 |
|
383 /* @deprecated 5.9.0 -- Icons removed from welcome panel. */ |
279 .welcome-panel .welcome-menus:before { |
384 .welcome-panel .welcome-menus:before { |
280 content: "\f163"; |
385 content: "\f163"; |
281 top: -2px; |
386 top: -2px; |
282 } |
387 } |
283 |
388 |
|
389 /* @deprecated 5.9.0 -- Icons removed from welcome panel. */ |
284 .welcome-panel .welcome-comments:before { |
390 .welcome-panel .welcome-comments:before { |
285 content: "\f117"; |
391 content: "\f117"; |
286 top: -1px; |
392 top: -1px; |
287 } |
393 } |
288 |
394 |
|
395 /* @deprecated 5.9.0 -- Icons removed from welcome panel. */ |
289 .welcome-panel .welcome-learn-more:before { |
396 .welcome-panel .welcome-learn-more:before { |
290 content: "\f118"; |
397 content: "\f118"; |
291 top: -1px; |
398 top: -1px; |
292 } |
399 } |
293 |
400 |
1212 display: block; |
1331 display: block; |
1213 } |
1332 } |
1214 } |
1333 } |
1215 |
1334 |
1216 @media screen and (max-width: 870px) { |
1335 @media screen and (max-width: 870px) { |
1217 .welcome-panel .welcome-panel-column, |
1336 /* @deprecated 5.9.0 -- Lists removed from welcome panel. */ |
1218 .welcome-panel .welcome-panel-column:first-child { |
|
1219 display: block; |
|
1220 float: none; |
|
1221 width: 100%; |
|
1222 } |
|
1223 |
|
1224 .welcome-panel .welcome-panel-column li { |
1337 .welcome-panel .welcome-panel-column li { |
1225 display: inline-block; |
1338 display: inline-block; |
1226 margin-left: 13px; |
1339 margin-left: 13px; |
1227 } |
1340 } |
1228 |
1341 |
|
1342 /* @deprecated 5.9.0 -- Lists removed from welcome panel. */ |
1229 .welcome-panel .welcome-panel-column ul { |
1343 .welcome-panel .welcome-panel-column ul { |
1230 margin: 0.4em 0 0; |
1344 margin: 0.4em 0 0; |
1231 } |
1345 } |
1232 |
1346 |
1233 } |
1347 } |
1234 |
1348 |
|
1349 @media screen and (max-width: 1180px) and (min-width: 783px) { |
|
1350 .welcome-panel-column { |
|
1351 grid-template-columns: 1fr; |
|
1352 } |
|
1353 |
|
1354 [class*="welcome-panel-icon"] { |
|
1355 display: none; |
|
1356 } |
|
1357 } |
|
1358 |
1235 @media screen and (max-width: 782px) { |
1359 @media screen and (max-width: 782px) { |
1236 #dashboard-widgets h2 { |
1360 .welcome-panel-header { |
1237 padding: 12px; |
1361 --about-header-bg-width: calc(var(--about-header-image-width) * 0.4); |
1238 } |
1362 --about-header-bg-offset-inline: 1rem; |
1239 |
1363 } |
1240 #dashboard_recent_comments #the-comment-list .comment-item .avatar { |
1364 |
1241 height: 30px; |
1365 .welcome-panel-header-image { |
1242 width: 30px; |
1366 top: 2rem; |
1243 margin: 4px 0 5px 10px; |
1367 } |
1244 } |
1368 |
1245 |
1369 .welcome-panel .welcome-panel-column-container { |
1246 .community-events-toggle-location { |
1370 grid-template-columns: 1fr; |
1247 height: 38px; |
1371 box-sizing: border-box; |
1248 vertical-align: baseline; |
1372 padding: 32px; |
1249 } |
1373 width: 100%; |
1250 |
1374 } |
1251 .community-events-form .regular-text { |
1375 |
1252 height: 32px; |
1376 .welcome-panel .welcome-panel-column-content { |
1253 } |
1377 max-width: 520px; |
1254 |
1378 } |
1255 #community-events-submit { |
1379 |
1256 margin-bottom: 0; |
|
1257 /* Override .wp-core-ui .button */ |
|
1258 vertical-align: top; |
|
1259 } |
|
1260 |
|
1261 .community-events-form label, |
|
1262 #dashboard-widgets .community-events-cancel.button-link { |
|
1263 /* Same properties as the submit button for cross-browsers alignment. */ |
|
1264 font-size: 14px; |
|
1265 line-height: normal; |
|
1266 height: auto; |
|
1267 padding: 6px 0; |
|
1268 border: 1px solid transparent; |
|
1269 } |
|
1270 |
|
1271 .community-events .spinner { |
|
1272 margin-top: 7px; |
|
1273 } |
|
1274 } |
|
1275 |
|
1276 /* Smartphone */ |
|
1277 @media screen and (max-width: 600px) { |
|
1278 /* Keep the close icon from overlapping the Welcome text. */ |
1380 /* Keep the close icon from overlapping the Welcome text. */ |
1279 .welcome-panel .welcome-panel-close { |
1381 .welcome-panel .welcome-panel-close { |
1280 overflow: hidden; |
1382 overflow: hidden; |
1281 text-indent: 40px; |
1383 text-indent: 40px; |
1282 white-space: nowrap; |
1384 white-space: nowrap; |
1285 padding: 5px; |
1387 padding: 5px; |
1286 top: 5px; |
1388 top: 5px; |
1287 left: 5px; |
1389 left: 5px; |
1288 } |
1390 } |
1289 |
1391 |
1290 /* Make the close icon larger for tappability. */ |
1392 .welcome-panel .welcome-panel-close::before { |
1291 .welcome-panel .welcome-panel-close:before { |
|
1292 font-size: 20px; |
|
1293 top: 5px; |
1393 top: 5px; |
1294 right: -35px; |
1394 right: -35px; |
|
1395 } |
|
1396 |
|
1397 #dashboard-widgets h2 { |
|
1398 padding: 12px; |
|
1399 } |
|
1400 |
|
1401 #dashboard_recent_comments #the-comment-list .comment-item .avatar { |
|
1402 height: 30px; |
|
1403 width: 30px; |
|
1404 margin: 4px 0 5px 10px; |
|
1405 } |
|
1406 |
|
1407 .community-events-toggle-location { |
|
1408 height: 38px; |
|
1409 vertical-align: baseline; |
|
1410 } |
|
1411 |
|
1412 .community-events-form .regular-text { |
|
1413 height: 32px; |
|
1414 } |
|
1415 |
|
1416 #community-events-submit { |
|
1417 margin-bottom: 0; |
|
1418 /* Override .wp-core-ui .button */ |
|
1419 vertical-align: top; |
|
1420 } |
|
1421 |
|
1422 .community-events-form label, |
|
1423 #dashboard-widgets .community-events-cancel.button-link { |
|
1424 /* Same properties as the submit button for cross-browsers alignment. */ |
|
1425 font-size: 14px; |
|
1426 line-height: normal; |
|
1427 height: auto; |
|
1428 padding: 6px 0; |
|
1429 border: 1px solid transparent; |
|
1430 } |
|
1431 |
|
1432 .community-events .spinner { |
|
1433 margin-top: 7px; |
|
1434 } |
|
1435 } |
|
1436 |
|
1437 /* Smartphone */ |
|
1438 @media screen and (max-width: 600px) { |
|
1439 .welcome-panel-header { |
|
1440 padding: 32px 32px 64px; |
|
1441 } |
|
1442 |
|
1443 .welcome-panel-header-image { |
|
1444 display: none; |
|
1445 } |
|
1446 } |
|
1447 |
|
1448 @media screen and (max-width: 480px) { |
|
1449 .welcome-panel-column { |
|
1450 gap: 16px; |
|
1451 } |
|
1452 } |
|
1453 |
|
1454 @media screen and (max-width: 360px) { |
|
1455 .welcome-panel-column { |
|
1456 grid-template-columns: 1fr; |
|
1457 } |
|
1458 |
|
1459 [class*="welcome-panel-icon"] { |
|
1460 display: none; |
1295 } |
1461 } |
1296 } |
1462 } |
1297 |
1463 |
1298 @media screen and (min-width: 355px) { |
1464 @media screen and (min-width: 355px) { |
1299 .community-events .event-info { |
1465 .community-events .event-info { |