Design Experiments - Version 1.2

Version Description

  • Adds the "Darker Field Borders and New Buttons" experiment.
Download this release

Release Info

Developer kjellr
Plugin Icon 128x128 Design Experiments
Version 1.2
Comparing to
See all releases

Code changes from version 1.1 to 1.2

css/new-focus-states-and-buttons.css ADDED
@@ -0,0 +1,315 @@
1
+ /*
2
+ Title: Darker Field Borders and New Buttons
3
+ Description: Combining changes from Trac issues #47153, #34904, and #47477
4
+ PR: https://github.com/WordPress/design-experiments/pull/14
5
+ */
6
+ /*
7
+ * https://core.trac.wordpress.org/attachment/ticket/47153/47153.3.diff
8
+ * Note: This also applies these changes to the .media-frame fields too.
9
+ */
10
+ .wrap .add-new-h2,
11
+ .wrap .add-new-h2:active,
12
+ .wrap .page-title-action,
13
+ .wrap .page-title-action:active {
14
+ border: 1px solid #7e8993;
15
+ box-shadow: 0 0 0 transparent;
16
+ }
17
+
18
+ #screen-meta-links .show-settings {
19
+ border: 1px solid #7e8993;
20
+ border-radius: 0 0 4px 4px;
21
+ box-shadow: 0 0 0 transparent;
22
+ transition: box-shadow 0.1s linear;
23
+ }
24
+
25
+ input[type="text"],
26
+ input[type="password"],
27
+ input[type="checkbox"],
28
+ input[type="color"],
29
+ input[type="date"],
30
+ input[type="datetime"],
31
+ input[type="datetime-local"],
32
+ input[type="email"],
33
+ input[type="month"],
34
+ input[type="number"],
35
+ input[type="search"],
36
+ input[type="radio"],
37
+ input[type="tel"],
38
+ input[type="text"],
39
+ input[type="time"],
40
+ input[type="url"],
41
+ input[type="week"],
42
+ select,
43
+ textarea,
44
+ .media-frame input[type=email], .media-frame input[type=number], .media-frame input[type=password], .media-frame input[type=search], .media-frame input[type=text], .media-frame input[type=url], .media-frame select, .media-frame textarea {
45
+ padding: 6px 8px;
46
+ box-shadow: 0 0 0 transparent;
47
+ transition: box-shadow 0.1s linear;
48
+ border-radius: 4px;
49
+ border: 1px solid #7e8993;
50
+ }
51
+
52
+ input[type="text"]:focus,
53
+ input[type="password"]:focus,
54
+ input[type="color"]:focus,
55
+ input[type="date"]:focus,
56
+ input[type="datetime"]:focus,
57
+ input[type="datetime-local"]:focus,
58
+ input[type="email"]:focus,
59
+ input[type="month"]:focus,
60
+ input[type="number"]:focus,
61
+ input[type="search"]:focus,
62
+ input[type="tel"]:focus,
63
+ input[type="text"]:focus,
64
+ input[type="time"]:focus,
65
+ input[type="url"]:focus,
66
+ input[type="week"]:focus,
67
+ input[type="checkbox"]:focus,
68
+ input[type="radio"]:focus,
69
+ select:focus,
70
+ textarea:focus {
71
+ box-shadow: inherit;
72
+ }
73
+
74
+ input[type="radio"] {
75
+ border-radius: 50%;
76
+ }
77
+
78
+ /*
79
+ * https://core.trac.wordpress.org/attachment/ticket/34904/34904.6.diff
80
+ * Note: All instances of #a1acb5 borders have been replaced with #7e8993 to match the form field borders.
81
+ */
82
+ .wrap .add-new-h2,
83
+ .wrap .add-new-h2:active,
84
+ .wrap .page-title-action,
85
+ .wrap .page-title-action:active {
86
+ border: 1px solid #7e8993;
87
+ background: #fff;
88
+ color: #006799;
89
+ /* some of these controls are button elements and don't inherit from links */
90
+ }
91
+
92
+ .wrap .add-new-h2:hover,
93
+ .wrap .page-title-action:hover {
94
+ background: #f3f5f6;
95
+ border-color: #7e8993;
96
+ color: #006799;
97
+ }
98
+
99
+ .page-title-action:focus {
100
+ color: #016087;
101
+ }
102
+
103
+ .wrap .page-title-action:focus {
104
+ border-color: #006799;
105
+ box-shadow: 0 0 0 1px #006799;
106
+ }
107
+
108
+ input[type="text"]:focus,
109
+ input[type="password"]:focus,
110
+ input[type="color"]:focus,
111
+ input[type="date"]:focus,
112
+ input[type="datetime"]:focus,
113
+ input[type="datetime-local"]:focus,
114
+ input[type="email"]:focus,
115
+ input[type="month"]:focus,
116
+ input[type="number"]:focus,
117
+ input[type="search"]:focus,
118
+ input[type="tel"]:focus,
119
+ input[type="text"]:focus,
120
+ input[type="time"]:focus,
121
+ input[type="url"]:focus,
122
+ input[type="week"]:focus,
123
+ input[type="checkbox"]:focus,
124
+ input[type="radio"]:focus,
125
+ select:focus,
126
+ textarea:focus {
127
+ border-color: #006799;
128
+ box-shadow: 0 0 0 1px #006799;
129
+ }
130
+
131
+ .wp-core-ui .button,
132
+ .wp-core-ui .button-secondary {
133
+ color: #006799;
134
+ border-color: #7e8993;
135
+ background: #fff;
136
+ box-shadow: none;
137
+ }
138
+
139
+ .wp-core-ui .button.hover,
140
+ .wp-core-ui .button:hover,
141
+ .wp-core-ui .button-secondary:hover,
142
+ .wp-core-ui .button.focus,
143
+ .wp-core-ui .button:focus,
144
+ .wp-core-ui .button-secondary:focus {
145
+ background: #f3f5f6;
146
+ border-color: #7e8993;
147
+ color: #006799;
148
+ }
149
+
150
+ .wp-core-ui .button.focus,
151
+ .wp-core-ui .button:focus,
152
+ .wp-core-ui .button-secondary:focus {
153
+ background: #f3f5f6;
154
+ border-color: #006799;
155
+ color: #016087;
156
+ box-shadow: 0 0 0 1px #006799;
157
+ }
158
+
159
+ .wp-core-ui .button.active,
160
+ .wp-core-ui .button.active:hover,
161
+ .wp-core-ui .button:active,
162
+ .wp-core-ui .button-secondary:active {
163
+ background: #eee;
164
+ border-color: #999;
165
+ transform: translateY(1px);
166
+ box-shadow: none;
167
+ }
168
+
169
+ .wp-core-ui .button.active:focus {
170
+ border-color: #5b9dd9;
171
+ box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5), 0 0 3px rgba(0, 115, 170, 0.8);
172
+ }
173
+
174
+ .wp-core-ui .button[disabled],
175
+ .wp-core-ui .button:disabled,
176
+ .wp-core-ui .button.disabled,
177
+ .wp-core-ui .button-secondary[disabled],
178
+ .wp-core-ui .button-secondary:disabled,
179
+ .wp-core-ui .button-secondary.disabled,
180
+ .wp-core-ui .button-disabled {
181
+ color: #a0a5aa !important;
182
+ border-color: #ddd !important;
183
+ background: #f7f7f7 !important;
184
+ box-shadow: none !important;
185
+ text-shadow: 0 1px 0 #fff !important;
186
+ cursor: default;
187
+ transform: none !important;
188
+ }
189
+
190
+ .wp-core-ui .button-primary {
191
+ background: #006799;
192
+ border-color: #006799;
193
+ color: #fff;
194
+ text-decoration: none;
195
+ }
196
+
197
+ .wp-core-ui .button-primary.hover,
198
+ .wp-core-ui .button-primary:hover,
199
+ .wp-core-ui .button-primary.focus,
200
+ .wp-core-ui .button-primary:focus {
201
+ background: #46799a;
202
+ border-color: #46799a;
203
+ color: #fff;
204
+ }
205
+
206
+ .wp-core-ui .button-primary.focus,
207
+ .wp-core-ui .button-primary:focus {
208
+ box-shadow: 0 0 0 1px #fff, 0 0 0 3px #006799;
209
+ }
210
+
211
+ .wp-core-ui .button-primary.active,
212
+ .wp-core-ui .button-primary.active:hover,
213
+ .wp-core-ui .button-primary.active:focus,
214
+ .wp-core-ui .button-primary:active {
215
+ background: #006799;
216
+ border-color: #006799;
217
+ transform: translateY(1px);
218
+ box-shadow: none;
219
+ }
220
+
221
+ .wp-core-ui .button-primary[disabled],
222
+ .wp-core-ui .button-primary:disabled,
223
+ .wp-core-ui .button-primary-disabled,
224
+ .wp-core-ui .button-primary.disabled {
225
+ color: #66C6E4 !important;
226
+ background: #008EC2 !important;
227
+ border-color: #008EC2 !important;
228
+ box-shadow: none !important;
229
+ text-shadow: none !important;
230
+ cursor: default;
231
+ }
232
+
233
+ .wp-core-ui .button-group > .button-primary + .button {
234
+ border-left: 0;
235
+ }
236
+
237
+ .wp-core-ui .button-group > .button:active {
238
+ transform: translateY(0);
239
+ }
240
+
241
+ /*
242
+ * Select control adjustments
243
+ * Partially from: https://core.trac.wordpress.org/attachment/ticket/47477/47477.3.diff
244
+ */
245
+ .wp-admin select,
246
+ .media-modal-content .media-frame select.attachment-filters {
247
+ font-size: 13px;
248
+ line-height: 1;
249
+ color: #555;
250
+ border-radius: 3px;
251
+ padding: 2px 24px 2px 8px;
252
+ min-height: 28px;
253
+ -webkit-appearance: none;
254
+ /* The SVG is arrow-down-alt2 from Dashicons. */
255
+ background: #fff url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E") no-repeat right 4px top 50%;
256
+ background-size: 16px 16px;
257
+ }
258
+
259
+ .wp-admin select:hover {
260
+ background-color: #f3f5f6;
261
+ color: #006799;
262
+ }
263
+
264
+ .wp-admin select:focus {
265
+ background-color: #f3f5f6;
266
+ border-color: #006799;
267
+ color: #016087;
268
+ box-shadow: 0 0 0 1px #006799;
269
+ }
270
+
271
+ .wp-admin select:active {
272
+ background-color: #eee;
273
+ border-color: #999;
274
+ box-shadow: none;
275
+ }
276
+
277
+ /*
278
+ * Additional Adjustments
279
+ */
280
+ #menu-management .menu-edit, #menu-settings-column .accordion-container, .comment-ays, .feature-filter, .imgedit-group, .manage-menus, .menu-item-handle, .popular-tags, .stuffbox, .widget-inside, .widget-top, .widgets-holder-wrap, .wp-editor-container, p.popular-tags, table.widefat,
281
+ .wp-filter,
282
+ .widefat thead td, .widefat thead th,
283
+ .widefat tfoot td, .widefat tfoot th,
284
+ .postbox, .postbox .hndle, .stuffbox .hndle,
285
+ .theme-browser .theme,
286
+ #screen-meta-links .screen-meta-active,
287
+ .health-check-accordion,
288
+ .card,
289
+ .welcome-panel,
290
+ .updated,
291
+ #message {
292
+ border-color: #ccd0d4;
293
+ }
294
+
295
+ .notice,
296
+ #update-nag, .update-nag {
297
+ border-right: 1px solid #ccd0d4;
298
+ border-top: 1px solid #ccd0d4;
299
+ border-bottom-color: #ccd0d4;
300
+ }
301
+
302
+ #screen-meta-links .show-settings {
303
+ border-top: none;
304
+ }
305
+
306
+ .editor-post-title__input {
307
+ border-radius: 0;
308
+ }
309
+
310
+ .wp-person a:focus .gravatar, a:focus, a:focus .media-icon img,
311
+ .wp-core-ui .button-link:focus,
312
+ #screen-meta-links .show-settings:focus {
313
+ outline: 1px dotted #6c7781;
314
+ box-shadow: none;
315
+ }
index.php CHANGED
@@ -4,7 +4,7 @@
4
* Plugin Name: Design Experiments
5
* Plugin URI: https://github.com/wordpress/design-experiments/
6
* Description: WP-Admin design experiments from the WordPress.org Design Team
7
- * Version: 1.1
8
* Author: The WordPress.org Design Team
9
* Text Domain: design-experiments
10
*/
4
* Plugin Name: Design Experiments
5
* Plugin URI: https://github.com/wordpress/design-experiments/
6
* Description: WP-Admin design experiments from the WordPress.org Design Team
7
+ * Version: 1.2
8
* Author: The WordPress.org Design Team
9
* Text Domain: design-experiments
10
*/
readme.txt CHANGED
@@ -24,6 +24,9 @@ An important disclaimer: This plugin is called experimental for a reason. It is
24
25
== Changelog ==
26
27
= 1.1 =
28
* Adds the Animated Menu Hovers experiment.
29
24
25
== Changelog ==
26
27
+ = 1.2 =
28
+ * Adds the "Darker Field Borders and New Buttons" experiment.
29
+
30
= 1.1 =
31
* Adds the Animated Menu Hovers experiment.
32
sass/new-focus-states-and-buttons.scss ADDED
@@ -0,0 +1,331 @@
1
+ /*
2
+ Title: Darker Field Borders and New Buttons
3
+ Description: Combining changes from Trac issues #47153, #34904, and #47477
4
+ PR: https://github.com/WordPress/design-experiments/pull/14
5
+ */
6
+
7
+ /*
8
+ * https://core.trac.wordpress.org/attachment/ticket/47153/47153.3.diff
9
+ * Note: This also applies these changes to the .media-frame fields too.
10
+ */
11
+
12
+ .wrap .add-new-h2, /* deprecated */
13
+ .wrap .add-new-h2:active, /* deprecated */
14
+ .wrap .page-title-action,
15
+ .wrap .page-title-action:active {
16
+ border: 1px solid #7e8993;
17
+ box-shadow: 0 0 0 transparent;
18
+ }
19
+
20
+ #screen-meta-links .show-settings {
21
+ border: 1px solid #7e8993;
22
+ border-radius: 0 0 4px 4px;
23
+ box-shadow: 0 0 0 transparent;
24
+ transition: box-shadow 0.1s linear;
25
+ }
26
+
27
+ input[type="text"],
28
+ input[type="password"],
29
+ input[type="checkbox"],
30
+ input[type="color"],
31
+ input[type="date"],
32
+ input[type="datetime"],
33
+ input[type="datetime-local"],
34
+ input[type="email"],
35
+ input[type="month"],
36
+ input[type="number"],
37
+ input[type="search"],
38
+ input[type="radio"],
39
+ input[type="tel"],
40
+ input[type="text"],
41
+ input[type="time"],
42
+ input[type="url"],
43
+ input[type="week"],
44
+ select,
45
+ textarea,
46
+ .media-frame input[type=email], .media-frame input[type=number], .media-frame input[type=password], .media-frame input[type=search], .media-frame input[type=text], .media-frame input[type=url], .media-frame select, .media-frame textarea {
47
+ padding: 6px 8px;
48
+ box-shadow: 0 0 0 transparent;
49
+ transition: box-shadow 0.1s linear;
50
+ border-radius: 4px;
51
+ border: 1px solid #7e8993;
52
+ }
53
+
54
+ input[type="text"]:focus,
55
+ input[type="password"]:focus,
56
+ input[type="color"]:focus,
57
+ input[type="date"]:focus,
58
+ input[type="datetime"]:focus,
59
+ input[type="datetime-local"]:focus,
60
+ input[type="email"]:focus,
61
+ input[type="month"]:focus,
62
+ input[type="number"]:focus,
63
+ input[type="search"]:focus,
64
+ input[type="tel"]:focus,
65
+ input[type="text"]:focus,
66
+ input[type="time"]:focus,
67
+ input[type="url"]:focus,
68
+ input[type="week"]:focus,
69
+ input[type="checkbox"]:focus,
70
+ input[type="radio"]:focus,
71
+ select:focus,
72
+ textarea:focus {
73
+ box-shadow: inherit;
74
+ }
75
+
76
+ input[type="radio"] {
77
+ border-radius: 50%;
78
+ }
79
+
80
+ /*
81
+ * https://core.trac.wordpress.org/attachment/ticket/34904/34904.6.diff
82
+ * Note: All instances of #a1acb5 borders have been replaced with #7e8993 to match the form field borders.
83
+ */
84
+
85
+ .wrap .add-new-h2, /* deprecated */
86
+ .wrap .add-new-h2:active, /* deprecated */
87
+ .wrap .page-title-action,
88
+ .wrap .page-title-action:active {
89
+ border: 1px solid #7e8993;
90
+ background: #fff;
91
+ color: #006799; /* some of these controls are button elements and don't inherit from links */
92
+ }
93
+
94
+ .wrap .add-new-h2:hover, /* deprecated */
95
+ .wrap .page-title-action:hover {
96
+ background: #f3f5f6;
97
+ border-color: #7e8993;
98
+ color: #006799;
99
+ }
100
+
101
+ .page-title-action:focus {
102
+ color: #016087;
103
+ }
104
+
105
+ .wrap .page-title-action:focus {
106
+ border-color: #006799;
107
+ box-shadow: 0 0 0 1px #006799;
108
+ }
109
+
110
+ input[type="text"]:focus,
111
+ input[type="password"]:focus,
112
+ input[type="color"]:focus,
113
+ input[type="date"]:focus,
114
+ input[type="datetime"]:focus,
115
+ input[type="datetime-local"]:focus,
116
+ input[type="email"]:focus,
117
+ input[type="month"]:focus,
118
+ input[type="number"]:focus,
119
+ input[type="search"]:focus,
120
+ input[type="tel"]:focus,
121
+ input[type="text"]:focus,
122
+ input[type="time"]:focus,
123
+ input[type="url"]:focus,
124
+ input[type="week"]:focus,
125
+ input[type="checkbox"]:focus,
126
+ input[type="radio"]:focus,
127
+ select:focus,
128
+ textarea:focus {
129
+ border-color: #006799;
130
+ box-shadow: 0 0 0 1px #006799;
131
+ }
132
+
133
+ .wp-core-ui .button,
134
+ .wp-core-ui .button-secondary {
135
+ color: #006799;
136
+ border-color: #7e8993;
137
+ background: #fff;
138
+ box-shadow: none;
139
+ }
140
+
141
+ .wp-core-ui .button.hover,
142
+ .wp-core-ui .button:hover,
143
+ .wp-core-ui .button-secondary:hover,
144
+ .wp-core-ui .button.focus,
145
+ .wp-core-ui .button:focus,
146
+ .wp-core-ui .button-secondary:focus {
147
+ background: #f3f5f6;
148
+ border-color: #7e8993;
149
+ color: #006799;
150
+ }
151
+
152
+ .wp-core-ui .button.focus,
153
+ .wp-core-ui .button:focus,
154
+ .wp-core-ui .button-secondary:focus {
155
+ background: #f3f5f6;
156
+ border-color: #006799;
157
+ color: #016087;
158
+ box-shadow: 0 0 0 1px #006799;
159
+ }
160
+
161
+ .wp-core-ui .button.active,
162
+ .wp-core-ui .button.active:hover,
163
+ .wp-core-ui .button:active,
164
+ .wp-core-ui .button-secondary:active {
165
+ background: #eee;
166
+ border-color: #999;
167
+ transform: translateY(1px);
168
+ box-shadow: none;
169
+ }
170
+
171
+ .wp-core-ui .button.active:focus {
172
+ border-color: #5b9dd9;
173
+ box-shadow:
174
+ inset 0 2px 5px -3px rgba(0, 0, 0, 0.5),
175
+ 0 0 3px rgba(0, 115, 170, 0.8);
176
+ }
177
+
178
+ .wp-core-ui .button[disabled],
179
+ .wp-core-ui .button:disabled,
180
+ .wp-core-ui .button.disabled,
181
+ .wp-core-ui .button-secondary[disabled],
182
+ .wp-core-ui .button-secondary:disabled,
183
+ .wp-core-ui .button-secondary.disabled,
184
+ .wp-core-ui .button-disabled {
185
+ color: #a0a5aa !important;
186
+ border-color: #ddd !important;
187
+ background: #f7f7f7 !important;
188
+ box-shadow: none !important;
189
+ text-shadow: 0 1px 0 #fff !important;
190
+ cursor: default;
191
+ transform: none !important;
192
+ }
193
+
194
+ .wp-core-ui .button-primary {
195
+ background: #006799;
196
+ border-color: #006799;
197
+ color: #fff;
198
+ text-decoration: none;
199
+ }
200
+
201
+ .wp-core-ui .button-primary.hover,
202
+ .wp-core-ui .button-primary:hover,
203
+ .wp-core-ui .button-primary.focus,
204
+ .wp-core-ui .button-primary:focus {
205
+ background: #46799a;
206
+ border-color: #46799a;
207
+ color: #fff;
208
+ }
209
+
210
+ .wp-core-ui .button-primary.focus,
211
+ .wp-core-ui .button-primary:focus {
212
+ box-shadow: 0 0 0 1px #fff, 0 0 0 3px #006799;
213
+ }
214
+
215
+ .wp-core-ui .button-primary.active,
216
+ .wp-core-ui .button-primary.active:hover,
217
+ .wp-core-ui .button-primary.active:focus,
218
+ .wp-core-ui .button-primary:active {
219
+ background: #006799;
220
+ border-color: #006799;
221
+ transform: translateY(1px);
222
+ box-shadow: none;
223
+ }
224
+
225
+ .wp-core-ui .button-primary[disabled],
226
+ .wp-core-ui .button-primary:disabled,
227
+ .wp-core-ui .button-primary-disabled,
228
+ .wp-core-ui .button-primary.disabled {
229
+ color: #66C6E4 !important;
230
+ background: #008EC2 !important;
231
+ border-color: #008EC2 !important;
232
+ box-shadow: none !important;
233
+ text-shadow: none !important;
234
+ cursor: default;
235
+ }
236
+
237
+ .wp-core-ui .button-group > .button-primary + .button {
238
+ border-left: 0;
239
+ }
240
+
241
+ .wp-core-ui .button-group > .button:active {
242
+ transform: translateY(0);
243
+ }
244
+
245
+ /*
246
+ * Select control adjustments
247
+ * Partially from: https://core.trac.wordpress.org/attachment/ticket/47477/47477.3.diff
248
+ */
249
+
250
+ .wp-admin select,
251
+ .media-modal-content .media-frame select.attachment-filters {
252
+ font-size: 13px;
253
+ line-height: 1;
254
+ color: #555;
255
+ border-radius: 3px;
256
+ padding: 2px 24px 2px 8px;
257
+ min-height: 28px;
258
+ -webkit-appearance: none;
259
+ /* The SVG is arrow-down-alt2 from Dashicons. */
260
+ background: #fff url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E') no-repeat right 4px top 50%;
261
+ background-size: 16px 16px;
262
+ }
263
+
264
+ .wp-admin select:hover {
265
+ background-color: #f3f5f6;
266
+ color: #006799;
267
+ }
268
+
269
+ .wp-admin select:focus {
270
+ background-color: #f3f5f6;
271
+ border-color: #006799;
272
+ color: #016087;
273
+ box-shadow: 0 0 0 1px #006799
274
+ }
275
+
276
+ .wp-admin select:active {
277
+ background-color: #eee;
278
+ border-color: #999;
279
+ box-shadow: none;
280
+ }
281
+
282
+ /*
283
+ * Additional Adjustments
284
+ */
285
+
286
+ // Darken container/card borders to offset the dark fields.
287
+
288
+ #menu-management .menu-edit, #menu-settings-column .accordion-container, .comment-ays, .feature-filter, .imgedit-group, .manage-menus, .menu-item-handle, .popular-tags, .stuffbox, .widget-inside, .widget-top, .widgets-holder-wrap, .wp-editor-container, p.popular-tags, table.widefat,
289
+ .wp-filter,
290
+ .widefat thead td, .widefat thead th,
291
+ .widefat tfoot td, .widefat tfoot th,
292
+ .postbox, .postbox .hndle, .stuffbox .hndle,
293
+ .theme-browser .theme,
294
+ #screen-meta-links .screen-meta-active,
295
+ .health-check-accordion,
296
+ .card,
297
+ .welcome-panel,
298
+ .updated,
299
+ #message {
300
+ border-color: #ccd0d4;
301
+ }
302
+
303
+ // Darken notice borders
304
+
305
+ .notice,
306
+ #update-nag, .update-nag {
307
+ border-right: 1px solid #ccd0d4;
308
+ border-top: 1px solid #ccd0d4;
309
+ border-bottom-color: #ccd0d4;
310
+ }
311
+
312
+ // Remove the top rounded border for the meta links at the top of the screen.
313
+
314
+ #screen-meta-links .show-settings {
315
+ border-top: none;
316
+ }
317
+
318
+ // Fix the rounded corners on the post title in Gutenberg.
319
+
320
+ .editor-post-title__input {
321
+ border-radius: 0;
322
+ }
323
+
324
+ // Borrow Gutenberg-like outlines on focus.
325
+
326
+ .wp-person a:focus .gravatar, a:focus, a:focus .media-icon img,
327
+ .wp-core-ui .button-link:focus,
328
+ #screen-meta-links .show-settings:focus {
329
+ outline: 1px dotted #6c7781;
330
+ box-shadow: none;
331
+ }