7 background: $body-background;
23 #media-upload a.del-link:hover,
24 div.dashboard-widget-submit input:hover,
26 .subsubsub a.current:hover {
33 input[type=checkbox]:checked:before {
37 input[type=radio]:checked:before {
38 background: $form-checked;
41 .wp-core-ui input[type="reset"]:hover,
42 .wp-core-ui input[type="reset"]:active {
51 @include button( $button-color );
56 background-color: $base-color;
63 color: $menu-highlight-text;
64 background-color: $menu-highlight-background;
66 .wp-ui-text-highlight {
67 color: $menu-highlight-background;
71 color: $menu-bubble-text;
72 background-color: $menu-bubble-background;
74 .wp-ui-text-notification {
75 color: $menu-bubble-background;
86 .wrap .add-new-h2:hover, /* deprecated */
87 .wrap .page-title-action:hover,
88 .tablenav .tablenav-pages a:hover,
89 .tablenav .tablenav-pages a:focus {
91 background-color: $menu-background;
94 .view-switch a.current:before {
95 color: $menu-background;
98 .view-switch a:hover:before {
99 color: $menu-bubble-background;
108 background: $menu-background;
115 #adminmenu div.wp-menu-image:before {
120 #adminmenu li.menu-top:hover,
121 #adminmenu li.opensub > a.menu-top,
122 #adminmenu li > a.menu-top:focus {
123 color: $menu-highlight-text;
124 background-color: $menu-highlight-background;
127 #adminmenu li.menu-top:hover div.wp-menu-image:before,
128 #adminmenu li.opensub > a.menu-top div.wp-menu-image:before {
129 color: $menu-highlight-icon;
133 /* Active tabs use a bottom border color that matches the page background color. */
135 .about-wrap h2 .nav-tab-active,
137 .nav-tab-active:hover {
138 background-color: $body-background;
139 border-bottom-color: $body-background;
143 /* Admin Menu: submenu */
145 #adminmenu .wp-submenu,
146 #adminmenu .wp-has-current-submenu .wp-submenu,
147 #adminmenu .wp-has-current-submenu.opensub .wp-submenu,
148 .folded #adminmenu .wp-has-current-submenu .wp-submenu,
149 #adminmenu a.wp-has-current-submenu:focus + .wp-submenu {
150 background: $menu-submenu-background;
153 #adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after {
154 border-right-color: $menu-submenu-background;
157 #adminmenu .wp-submenu .wp-submenu-head {
158 color: $menu-submenu-text;
161 #adminmenu .wp-submenu a,
162 #adminmenu .wp-has-current-submenu .wp-submenu a,
163 .folded #adminmenu .wp-has-current-submenu .wp-submenu a,
164 #adminmenu a.wp-has-current-submenu:focus + .wp-submenu a,
165 #adminmenu .wp-has-current-submenu.opensub .wp-submenu a {
166 color: $menu-submenu-text;
169 color: $menu-submenu-focus-text;
174 /* Admin Menu: current */
176 #adminmenu .wp-submenu li.current a,
177 #adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a,
178 #adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a {
179 color: $menu-submenu-current-text;
182 color: $menu-submenu-focus-text;
186 ul#adminmenu a.wp-has-current-submenu:after,
187 ul#adminmenu > li.current > a.current:after {
188 border-right-color: $body-background;
191 #adminmenu li.current a.menu-top,
192 #adminmenu li.wp-has-current-submenu a.wp-has-current-submenu,
193 #adminmenu li.wp-has-current-submenu .wp-submenu .wp-submenu-head,
194 .folded #adminmenu li.current.menu-top {
195 color: $menu-current-text;
196 background: $menu-current-background;
199 #adminmenu li.wp-has-current-submenu div.wp-menu-image:before,
200 #adminmenu a.current:hover div.wp-menu-image:before,
201 #adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image:before,
202 #adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image:before,
203 #adminmenu li:hover div.wp-menu-image:before,
204 #adminmenu li a:focus div.wp-menu-image:before,
205 #adminmenu li.opensub div.wp-menu-image:before,
206 .ie8 #adminmenu li.opensub div.wp-menu-image:before {
207 color: $menu-current-icon;
211 /* Admin Menu: bubble */
213 #adminmenu .awaiting-mod,
214 #adminmenu .update-plugins {
215 color: $menu-bubble-text;
216 background: $menu-bubble-background;
219 #adminmenu li.current a .awaiting-mod,
220 #adminmenu li a.wp-has-current-submenu .update-plugins,
221 #adminmenu li:hover a .awaiting-mod,
222 #adminmenu li.menu-top:hover > a .update-plugins {
223 color: $menu-bubble-current-text;
224 background: $menu-bubble-current-background;
228 /* Admin Menu: collapse button */
231 color: $menu-collapse-text;
234 #collapse-menu:hover {
235 color: $menu-collapse-focus-text;
238 #collapse-button div:after {
239 color: $menu-collapse-icon;
242 #collapse-menu:hover #collapse-button div:after {
243 color: $menu-collapse-focus-icon;
251 background: $menu-background;
254 #wpadminbar .ab-item,
255 #wpadminbar a.ab-item,
256 #wpadminbar > #wp-toolbar span.ab-label,
257 #wpadminbar > #wp-toolbar span.noticon {
261 #wpadminbar .ab-icon,
262 #wpadminbar .ab-icon:before,
263 #wpadminbar .ab-item:before,
264 #wpadminbar .ab-item:after {
268 #wpadminbar:not(.mobile) .ab-top-menu > li:hover > .ab-item,
269 #wpadminbar:not(.mobile) .ab-top-menu > li > .ab-item:focus,
270 #wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus,
271 #wpadminbar.nojs .ab-top-menu > li.menupop:hover > .ab-item,
272 #wpadminbar .ab-top-menu > li.menupop.hover > .ab-item {
273 color: $menu-submenu-focus-text;
274 background: $menu-submenu-background;
277 #wpadminbar:not(.mobile) > #wp-toolbar li:hover span.ab-label,
278 #wpadminbar:not(.mobile) > #wp-toolbar li.hover span.ab-label,
279 #wpadminbar:not(.mobile) > #wp-toolbar a:focus span.ab-label {
280 color: $menu-submenu-focus-text;
283 #wpadminbar:not(.mobile) li:hover .ab-icon:before,
284 #wpadminbar:not(.mobile) li:hover .ab-item:before,
285 #wpadminbar:not(.mobile) li:hover .ab-item:after,
286 #wpadminbar:not(.mobile) li:hover #adminbarsearch:before {
287 color: $menu-highlight-icon;
291 /* Admin Bar: submenu */
293 #wpadminbar .menupop .ab-sub-wrapper {
294 background: $menu-submenu-background;
297 #wpadminbar .quicklinks .menupop ul.ab-sub-secondary,
298 #wpadminbar .quicklinks .menupop ul.ab-sub-secondary .ab-submenu {
299 background: $menu-submenu-background-alt;
302 #wpadminbar .ab-submenu .ab-item,
303 #wpadminbar .quicklinks .menupop ul li a,
304 #wpadminbar .quicklinks .menupop.hover ul li a,
305 #wpadminbar.nojs .quicklinks .menupop:hover ul li a {
306 color: $menu-submenu-text;
309 #wpadminbar .quicklinks li .blavatar,
310 #wpadminbar .menupop .menupop > .ab-item:before {
314 #wpadminbar .quicklinks .menupop ul li a:hover,
315 #wpadminbar .quicklinks .menupop ul li a:focus,
316 #wpadminbar .quicklinks .menupop ul li a:hover strong,
317 #wpadminbar .quicklinks .menupop ul li a:focus strong,
318 #wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover > a,
319 #wpadminbar .quicklinks .menupop.hover ul li a:hover,
320 #wpadminbar .quicklinks .menupop.hover ul li a:focus,
321 #wpadminbar.nojs .quicklinks .menupop:hover ul li a:hover,
322 #wpadminbar.nojs .quicklinks .menupop:hover ul li a:focus,
323 #wpadminbar li:hover .ab-icon:before,
324 #wpadminbar li:hover .ab-item:before,
325 #wpadminbar li a:focus .ab-icon:before,
326 #wpadminbar li .ab-item:focus:before,
327 #wpadminbar li.hover .ab-icon:before,
328 #wpadminbar li.hover .ab-item:before,
329 #wpadminbar li:hover #adminbarsearch:before,
330 #wpadminbar li #adminbarsearch.adminbar-focused:before {
331 color: $menu-submenu-focus-text;
334 #wpadminbar .quicklinks li a:hover .blavatar,
335 #wpadminbar .quicklinks li a:focus .blavatar,
336 #wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover > a .blavatar,
337 #wpadminbar .menupop .menupop > .ab-item:hover:before,
338 #wpadminbar.mobile .quicklinks .ab-icon:before,
339 #wpadminbar.mobile .quicklinks .ab-item:before {
340 color: $menu-submenu-focus-text;
343 #wpadminbar.mobile .quicklinks .hover .ab-icon:before,
344 #wpadminbar.mobile .quicklinks .hover .ab-item:before {
349 /* Admin Bar: search */
351 #wpadminbar #adminbarsearch:before {
355 #wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-search #adminbarsearch input.adminbar-input:focus {
357 background: $adminbar-input-background;
360 /* Admin Bar: my account */
362 #wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar > a img {
363 border-color: $adminbar-avatar-frame;
364 background-color: $adminbar-avatar-frame;
367 #wpadminbar #wp-admin-bar-user-info .display-name {
371 #wpadminbar #wp-admin-bar-user-info a:hover .display-name {
372 color: $menu-submenu-focus-text;
375 #wpadminbar #wp-admin-bar-user-info .username {
376 color: $menu-submenu-text;
382 .wp-pointer .wp-pointer-content h3 {
383 background-color: $highlight-color;
384 border-color: darken( $highlight-color, 5% );
387 .wp-pointer .wp-pointer-content h3:before {
388 color: $highlight-color;
391 .wp-pointer.wp-pointer-top .wp-pointer-arrow,
392 .wp-pointer.wp-pointer-top .wp-pointer-arrow-inner,
393 .wp-pointer.wp-pointer-undefined .wp-pointer-arrow,
394 .wp-pointer.wp-pointer-undefined .wp-pointer-arrow-inner {
395 border-bottom-color: $highlight-color;
402 .media-progress-bar div {
403 background-color: $highlight-color;
406 .details.attachment {
408 inset 0 0 0 3px #fff,
409 inset 0 0 0 7px $highlight-color;
412 .attachment.details .check {
413 background-color: $highlight-color;
414 box-shadow: 0 0 0 1px #fff, 0 0 0 2px $highlight-color;
417 .media-selection .attachment.selection.details .thumbnail {
419 0px 0px 0px 1px #fff,
420 0px 0px 0px 3px $highlight-color;
422 0px 0px 0px 1px #fff,
423 0px 0px 0px 3px $highlight-color;
429 .theme-browser .theme.active .theme-name,
430 .theme-browser .theme.add-new-theme a:hover:after,
431 .theme-browser .theme.add-new-theme a:focus:after {
432 background: $highlight-color;
435 .theme-browser .theme.add-new-theme a:hover span:after,
436 .theme-browser .theme.add-new-theme a:focus span:after {
437 color: $highlight-color;
440 .theme-section.current,
441 .theme-filter.current {
442 border-bottom-color: $menu-background;
445 body.more-filters-opened .more-filters {
447 background-color: $menu-background;
450 body.more-filters-opened .more-filters:before {
454 body.more-filters-opened .more-filters:hover,
455 body.more-filters-opened .more-filters:focus {
456 background-color: $menu-highlight-background;
457 color: $menu-highlight-text;
460 body.more-filters-opened .more-filters:hover:before,
461 body.more-filters-opened .more-filters:focus:before {
462 color: $menu-highlight-text;
467 .widgets-chooser li.widgets-chooser-selected {
468 background-color: $menu-highlight-background;
469 color: $menu-highlight-text;
472 .widgets-chooser li.widgets-chooser-selected:before,
473 .widgets-chooser li.widgets-chooser-selected:focus:before {
474 color: $menu-highlight-text;
479 #customize-theme-controls .widget-area-select .selected {
480 background-color: $menu-highlight-background;
481 color: $menu-highlight-text;
484 #customize-footer-actions .devices button:focus {
485 border-bottom-color: $highlight-color;
488 /* Responsive Component */
490 div#wp-responsive-toggle a:before {
494 .wp-responsive-open div#wp-responsive-toggle a {
495 // ToDo: make inset border
496 border-color: transparent;
497 background: $menu-highlight-background;
500 .wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a {
501 background: $menu-submenu-background;
504 .wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before {
510 .mce-container.mce-menu .mce-menu-item:hover,
511 .mce-container.mce-menu .mce-menu-item.mce-selected,
512 .mce-container.mce-menu .mce-menu-item:focus,
513 .mce-container.mce-menu .mce-menu-item-normal.mce-active,
514 .mce-container.mce-menu .mce-menu-item-preview.mce-active {
515 background: $highlight-color;