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