_admin.scss (20125B)
1 2 @import 'variables'; 3 @import 'mixins'; 4 5 @function url-friendly-colour( $color ) { 6 @return '%23' + str-slice( '#{ $color }', 2, -1 ); 7 } 8 9 body { 10 background: $body-background; 11 } 12 13 14 /* Links */ 15 16 a { 17 color: $link; 18 19 &:hover, 20 &:active, 21 &:focus { 22 color: $link-focus; 23 } 24 } 25 26 #post-body .misc-pub-post-status:before, 27 #post-body #visibility:before, 28 .curtime #timestamp:before, 29 #post-body .misc-pub-revisions:before, 30 span.wp-media-buttons-icon:before { 31 color: currentColor; 32 } 33 34 .wp-core-ui .button-link { 35 color: $link; 36 37 &:hover, 38 &:active, 39 &:focus { 40 color: $link-focus; 41 } 42 } 43 44 .media-modal .delete-attachment, 45 .media-modal .trash-attachment, 46 .media-modal .untrash-attachment, 47 .wp-core-ui .button-link-delete { 48 color: #a00; 49 } 50 51 .media-modal .delete-attachment:hover, 52 .media-modal .trash-attachment:hover, 53 .media-modal .untrash-attachment:hover, 54 .media-modal .delete-attachment:focus, 55 .media-modal .trash-attachment:focus, 56 .media-modal .untrash-attachment:focus, 57 .wp-core-ui .button-link-delete:hover, 58 .wp-core-ui .button-link-delete:focus { 59 color: #dc3232; 60 } 61 62 /* Forms */ 63 64 input[type=checkbox]:checked::before { 65 content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27#{url-friendly-colour($form-checked)}%27%2F%3E%3C%2Fsvg%3E"); 66 } 67 68 input[type=radio]:checked::before { 69 background: $form-checked; 70 } 71 72 .wp-core-ui input[type="reset"]:hover, 73 .wp-core-ui input[type="reset"]:active { 74 color: $link-focus; 75 } 76 77 input[type="text"]:focus, 78 input[type="password"]:focus, 79 input[type="color"]:focus, 80 input[type="date"]:focus, 81 input[type="datetime"]:focus, 82 input[type="datetime-local"]:focus, 83 input[type="email"]:focus, 84 input[type="month"]:focus, 85 input[type="number"]:focus, 86 input[type="search"]:focus, 87 input[type="tel"]:focus, 88 input[type="text"]:focus, 89 input[type="time"]:focus, 90 input[type="url"]:focus, 91 input[type="week"]:focus, 92 input[type="checkbox"]:focus, 93 input[type="radio"]:focus, 94 select:focus, 95 textarea:focus { 96 border-color: $highlight-color; 97 box-shadow: 0 0 0 1px $highlight-color; 98 } 99 100 101 /* Core UI */ 102 103 .wp-core-ui { 104 105 .button { 106 border-color: #7e8993; 107 color: #32373c; 108 } 109 110 .button.hover, 111 .button:hover, 112 .button.focus, 113 .button:focus { 114 border-color: darken( #7e8993, 5% ); 115 color: darken( #32373c, 5% ); 116 } 117 118 .button.focus, 119 .button:focus { 120 border-color: #7e8993; 121 color: darken( #32373c, 5% ); 122 box-shadow: 0 0 0 1px #32373c; 123 } 124 125 .button:active { 126 border-color: #7e8993; 127 color: darken( #32373c, 5% ); 128 box-shadow: none; 129 } 130 131 .button.active, 132 .button.active:focus, 133 .button.active:hover { 134 border-color: $button-color; 135 color: darken( #32373c, 5% ); 136 box-shadow: inset 0 2px 5px -3px $button-color; 137 } 138 139 .button.active:focus { 140 box-shadow: 0 0 0 1px #32373c; 141 } 142 143 @if ( $low-contrast-theme != "true" ) { 144 .button, 145 .button-secondary { 146 color: $highlight-color; 147 border-color: $highlight-color; 148 } 149 150 .button.hover, 151 .button:hover, 152 .button-secondary:hover{ 153 border-color: darken($highlight-color, 10); 154 color: darken($highlight-color, 10); 155 } 156 157 .button.focus, 158 .button:focus, 159 .button-secondary:focus { 160 border-color: lighten($highlight-color, 10); 161 color: darken($highlight-color, 20);; 162 box-shadow: 0 0 0 1px lighten($highlight-color, 10); 163 } 164 165 .button-primary { 166 &:hover { 167 color: #fff; 168 } 169 } 170 } 171 172 .button-primary { 173 @include button( $button-color ); 174 } 175 176 .button-group > .button.active { 177 border-color: $button-color; 178 } 179 180 .wp-ui-primary { 181 color: $text-color; 182 background-color: $base-color; 183 } 184 .wp-ui-text-primary { 185 color: $base-color; 186 } 187 188 .wp-ui-highlight { 189 color: $menu-highlight-text; 190 background-color: $menu-highlight-background; 191 } 192 .wp-ui-text-highlight { 193 color: $menu-highlight-background; 194 } 195 196 .wp-ui-notification { 197 color: $menu-bubble-text; 198 background-color: $menu-bubble-background; 199 } 200 .wp-ui-text-notification { 201 color: $menu-bubble-background; 202 } 203 204 .wp-ui-text-icon { 205 color: $menu-icon; 206 } 207 } 208 209 210 /* List tables */ 211 @if $low-contrast-theme == "true" { 212 .wrap .page-title-action:hover { 213 color: $menu-text; 214 background-color: $menu-background; 215 } 216 } @else { 217 .wrap .page-title-action, 218 .wrap .page-title-action:active { 219 border: 1px solid $highlight-color; 220 color: $highlight-color; 221 } 222 223 .wrap .page-title-action:hover { 224 color: darken($highlight-color, 10); 225 border-color: darken($highlight-color, 10); 226 } 227 228 .wrap .page-title-action:focus { 229 border-color: lighten($highlight-color, 10); 230 color: darken($highlight-color, 20);; 231 box-shadow: 0 0 0 1px lighten($highlight-color, 10); 232 } 233 } 234 235 .view-switch a.current:before { 236 color: $menu-background; 237 } 238 239 .view-switch a:hover:before { 240 color: $menu-bubble-background; 241 } 242 243 244 /* Admin Menu */ 245 246 #adminmenuback, 247 #adminmenuwrap, 248 #adminmenu { 249 background: $menu-background; 250 } 251 252 #adminmenu a { 253 color: $menu-text; 254 } 255 256 #adminmenu div.wp-menu-image:before { 257 color: $menu-icon; 258 } 259 260 #adminmenu a:hover, 261 #adminmenu li.menu-top:hover, 262 #adminmenu li.opensub > a.menu-top, 263 #adminmenu li > a.menu-top:focus { 264 color: $menu-highlight-text; 265 background-color: $menu-highlight-background; 266 } 267 268 #adminmenu li.menu-top:hover div.wp-menu-image:before, 269 #adminmenu li.opensub > a.menu-top div.wp-menu-image:before { 270 color: $menu-highlight-icon; 271 } 272 273 274 /* Active tabs use a bottom border color that matches the page background color. */ 275 276 .about-wrap .nav-tab-active, 277 .nav-tab-active, 278 .nav-tab-active:hover { 279 background-color: $body-background; 280 border-bottom-color: $body-background; 281 } 282 283 284 /* Admin Menu: submenu */ 285 286 #adminmenu .wp-submenu, 287 #adminmenu .wp-has-current-submenu .wp-submenu, 288 #adminmenu .wp-has-current-submenu.opensub .wp-submenu, 289 #adminmenu a.wp-has-current-submenu:focus + .wp-submenu { 290 background: $menu-submenu-background; 291 } 292 293 #adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after, 294 #adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after { 295 border-right-color: $menu-submenu-background; 296 } 297 298 #adminmenu .wp-submenu .wp-submenu-head { 299 color: $menu-submenu-text; 300 } 301 302 #adminmenu .wp-submenu a, 303 #adminmenu .wp-has-current-submenu .wp-submenu a, 304 #adminmenu a.wp-has-current-submenu:focus + .wp-submenu a, 305 #adminmenu .wp-has-current-submenu.opensub .wp-submenu a { 306 color: $menu-submenu-text; 307 308 &:focus, &:hover { 309 color: $menu-submenu-focus-text; 310 } 311 } 312 313 314 /* Admin Menu: current */ 315 316 #adminmenu .wp-submenu li.current a, 317 #adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a, 318 #adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a { 319 color: $menu-submenu-current-text; 320 321 &:hover, &:focus { 322 color: $menu-submenu-focus-text; 323 } 324 } 325 326 ul#adminmenu a.wp-has-current-submenu:after, 327 ul#adminmenu > li.current > a.current:after { 328 border-right-color: $body-background; 329 } 330 331 #adminmenu li.current a.menu-top, 332 #adminmenu li.wp-has-current-submenu a.wp-has-current-submenu, 333 #adminmenu li.wp-has-current-submenu .wp-submenu .wp-submenu-head, 334 .folded #adminmenu li.current.menu-top { 335 color: $menu-current-text; 336 background: $menu-current-background; 337 } 338 339 #adminmenu li.wp-has-current-submenu div.wp-menu-image:before, 340 #adminmenu a.current:hover div.wp-menu-image:before, 341 #adminmenu li.current div.wp-menu-image:before, 342 #adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image:before, 343 #adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image:before, 344 #adminmenu li:hover div.wp-menu-image:before, 345 #adminmenu li a:focus div.wp-menu-image:before, 346 #adminmenu li.opensub div.wp-menu-image:before { 347 color: $menu-current-icon; 348 } 349 350 351 /* Admin Menu: bubble */ 352 353 #adminmenu .awaiting-mod, 354 #adminmenu .update-plugins { 355 color: $menu-bubble-text; 356 background: $menu-bubble-background; 357 } 358 359 #adminmenu li.current a .awaiting-mod, 360 #adminmenu li a.wp-has-current-submenu .update-plugins, 361 #adminmenu li:hover a .awaiting-mod, 362 #adminmenu li.menu-top:hover > a .update-plugins { 363 color: $menu-bubble-current-text; 364 background: $menu-bubble-current-background; 365 } 366 367 368 /* Admin Menu: collapse button */ 369 370 #collapse-button { 371 color: $menu-collapse-text; 372 } 373 374 #collapse-button:hover, 375 #collapse-button:focus { 376 color: $menu-submenu-focus-text; 377 } 378 379 /* Admin Bar */ 380 381 #wpadminbar { 382 color: $menu-text; 383 background: $menu-background; 384 } 385 386 #wpadminbar .ab-item, 387 #wpadminbar a.ab-item, 388 #wpadminbar > #wp-toolbar span.ab-label, 389 #wpadminbar > #wp-toolbar span.noticon { 390 color: $menu-text; 391 } 392 393 #wpadminbar .ab-icon, 394 #wpadminbar .ab-icon:before, 395 #wpadminbar .ab-item:before, 396 #wpadminbar .ab-item:after { 397 color: $menu-icon; 398 } 399 400 #wpadminbar:not(.mobile) .ab-top-menu > li:hover > .ab-item, 401 #wpadminbar:not(.mobile) .ab-top-menu > li > .ab-item:focus, 402 #wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus, 403 #wpadminbar.nojs .ab-top-menu > li.menupop:hover > .ab-item, 404 #wpadminbar .ab-top-menu > li.menupop.hover > .ab-item { 405 color: $menu-submenu-focus-text; 406 background: $menu-submenu-background; 407 } 408 409 #wpadminbar:not(.mobile) > #wp-toolbar li:hover span.ab-label, 410 #wpadminbar:not(.mobile) > #wp-toolbar li.hover span.ab-label, 411 #wpadminbar:not(.mobile) > #wp-toolbar a:focus span.ab-label { 412 color: $menu-submenu-focus-text; 413 } 414 415 #wpadminbar:not(.mobile) li:hover .ab-icon:before, 416 #wpadminbar:not(.mobile) li:hover .ab-item:before, 417 #wpadminbar:not(.mobile) li:hover .ab-item:after, 418 #wpadminbar:not(.mobile) li:hover #adminbarsearch:before { 419 color: $menu-submenu-focus-text; 420 } 421 422 423 /* Admin Bar: submenu */ 424 425 #wpadminbar .menupop .ab-sub-wrapper { 426 background: $menu-submenu-background; 427 } 428 429 #wpadminbar .quicklinks .menupop ul.ab-sub-secondary, 430 #wpadminbar .quicklinks .menupop ul.ab-sub-secondary .ab-submenu { 431 background: $menu-submenu-background-alt; 432 } 433 434 #wpadminbar .ab-submenu .ab-item, 435 #wpadminbar .quicklinks .menupop ul li a, 436 #wpadminbar .quicklinks .menupop.hover ul li a, 437 #wpadminbar.nojs .quicklinks .menupop:hover ul li a { 438 color: $menu-submenu-text; 439 } 440 441 #wpadminbar .quicklinks li .blavatar, 442 #wpadminbar .menupop .menupop > .ab-item:before { 443 color: $menu-icon; 444 } 445 446 #wpadminbar .quicklinks .menupop ul li a:hover, 447 #wpadminbar .quicklinks .menupop ul li a:focus, 448 #wpadminbar .quicklinks .menupop ul li a:hover strong, 449 #wpadminbar .quicklinks .menupop ul li a:focus strong, 450 #wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover > a, 451 #wpadminbar .quicklinks .menupop.hover ul li a:hover, 452 #wpadminbar .quicklinks .menupop.hover ul li a:focus, 453 #wpadminbar.nojs .quicklinks .menupop:hover ul li a:hover, 454 #wpadminbar.nojs .quicklinks .menupop:hover ul li a:focus, 455 #wpadminbar li:hover .ab-icon:before, 456 #wpadminbar li:hover .ab-item:before, 457 #wpadminbar li a:focus .ab-icon:before, 458 #wpadminbar li .ab-item:focus:before, 459 #wpadminbar li .ab-item:focus .ab-icon:before, 460 #wpadminbar li.hover .ab-icon:before, 461 #wpadminbar li.hover .ab-item:before, 462 #wpadminbar li:hover #adminbarsearch:before, 463 #wpadminbar li #adminbarsearch.adminbar-focused:before { 464 color: $menu-submenu-focus-text; 465 } 466 467 #wpadminbar .quicklinks li a:hover .blavatar, 468 #wpadminbar .quicklinks li a:focus .blavatar, 469 #wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover > a .blavatar, 470 #wpadminbar .menupop .menupop > .ab-item:hover:before, 471 #wpadminbar.mobile .quicklinks .ab-icon:before, 472 #wpadminbar.mobile .quicklinks .ab-item:before { 473 color: $menu-submenu-focus-text; 474 } 475 476 #wpadminbar.mobile .quicklinks .hover .ab-icon:before, 477 #wpadminbar.mobile .quicklinks .hover .ab-item:before { 478 color: $menu-icon; 479 } 480 481 482 /* Admin Bar: search */ 483 484 #wpadminbar #adminbarsearch:before { 485 color: $menu-icon; 486 } 487 488 #wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-search #adminbarsearch input.adminbar-input:focus { 489 color: $menu-text; 490 background: $adminbar-input-background; 491 } 492 493 /* Admin Bar: recovery mode */ 494 495 #wpadminbar #wp-admin-bar-recovery-mode { 496 color: $adminbar-recovery-exit-text; 497 background-color: $adminbar-recovery-exit-background; 498 } 499 500 #wpadminbar #wp-admin-bar-recovery-mode .ab-item, 501 #wpadminbar #wp-admin-bar-recovery-mode a.ab-item { 502 color: $adminbar-recovery-exit-text; 503 } 504 505 #wpadminbar .ab-top-menu > #wp-admin-bar-recovery-mode.hover >.ab-item, 506 #wpadminbar.nojq .quicklinks .ab-top-menu > #wp-admin-bar-recovery-mode > .ab-item:focus, 507 #wpadminbar:not(.mobile) .ab-top-menu > #wp-admin-bar-recovery-mode:hover > .ab-item, 508 #wpadminbar:not(.mobile) .ab-top-menu > #wp-admin-bar-recovery-mode > .ab-item:focus { 509 color: $adminbar-recovery-exit-text; 510 background-color: $adminbar-recovery-exit-background-alt; 511 } 512 513 /* Admin Bar: my account */ 514 515 #wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar > a img { 516 border-color: $adminbar-avatar-frame; 517 background-color: $adminbar-avatar-frame; 518 } 519 520 #wpadminbar #wp-admin-bar-user-info .display-name { 521 color: $menu-text; 522 } 523 524 #wpadminbar #wp-admin-bar-user-info a:hover .display-name { 525 color: $menu-submenu-focus-text; 526 } 527 528 #wpadminbar #wp-admin-bar-user-info .username { 529 color: $menu-submenu-text; 530 } 531 532 533 /* Pointers */ 534 535 .wp-pointer .wp-pointer-content h3 { 536 background-color: $highlight-color; 537 border-color: darken( $highlight-color, 5% ); 538 } 539 540 .wp-pointer .wp-pointer-content h3:before { 541 color: $highlight-color; 542 } 543 544 .wp-pointer.wp-pointer-top .wp-pointer-arrow, 545 .wp-pointer.wp-pointer-top .wp-pointer-arrow-inner, 546 .wp-pointer.wp-pointer-undefined .wp-pointer-arrow, 547 .wp-pointer.wp-pointer-undefined .wp-pointer-arrow-inner { 548 border-bottom-color: $highlight-color; 549 } 550 551 552 /* Media */ 553 554 .media-item .bar, 555 .media-progress-bar div { 556 background-color: $highlight-color; 557 } 558 559 .details.attachment { 560 box-shadow: 561 inset 0 0 0 3px #fff, 562 inset 0 0 0 7px $highlight-color; 563 } 564 565 .attachment.details .check { 566 background-color: $highlight-color; 567 box-shadow: 0 0 0 1px #fff, 0 0 0 2px $highlight-color; 568 } 569 570 .media-selection .attachment.selection.details .thumbnail { 571 box-shadow: 0 0 0 1px #fff, 0 0 0 3px $highlight-color; 572 } 573 574 575 /* Themes */ 576 577 .theme-browser .theme.active .theme-name, 578 .theme-browser .theme.add-new-theme a:hover:after, 579 .theme-browser .theme.add-new-theme a:focus:after { 580 background: $highlight-color; 581 } 582 583 .theme-browser .theme.add-new-theme a:hover span:after, 584 .theme-browser .theme.add-new-theme a:focus span:after { 585 color: $highlight-color; 586 } 587 588 .theme-section.current, 589 .theme-filter.current { 590 border-bottom-color: $menu-background; 591 } 592 593 body.more-filters-opened .more-filters { 594 color: $menu-text; 595 background-color: $menu-background; 596 } 597 598 body.more-filters-opened .more-filters:before { 599 color: $menu-text; 600 } 601 602 body.more-filters-opened .more-filters:hover, 603 body.more-filters-opened .more-filters:focus { 604 background-color: $menu-highlight-background; 605 color: $menu-highlight-text; 606 } 607 608 body.more-filters-opened .more-filters:hover:before, 609 body.more-filters-opened .more-filters:focus:before { 610 color: $menu-highlight-text; 611 } 612 613 /* Widgets */ 614 615 .widgets-chooser li.widgets-chooser-selected { 616 background-color: $menu-highlight-background; 617 color: $menu-highlight-text; 618 } 619 620 .widgets-chooser li.widgets-chooser-selected:before, 621 .widgets-chooser li.widgets-chooser-selected:focus:before { 622 color: $menu-highlight-text; 623 } 624 625 626 /* Nav Menus */ 627 628 .nav-menus-php .item-edit:focus:before { 629 box-shadow: 630 0 0 0 1px lighten($button-color, 10), 631 0 0 2px 1px $button-color; 632 } 633 634 635 /* Responsive Component */ 636 637 div#wp-responsive-toggle a:before { 638 color: $menu-icon; 639 } 640 641 .wp-responsive-open div#wp-responsive-toggle a { 642 // ToDo: make inset border 643 border-color: transparent; 644 background: $menu-highlight-background; 645 } 646 647 .wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a { 648 background: $menu-submenu-background; 649 } 650 651 .wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before { 652 color: $menu-icon; 653 } 654 655 /* TinyMCE */ 656 657 .mce-container.mce-menu .mce-menu-item:hover, 658 .mce-container.mce-menu .mce-menu-item.mce-selected, 659 .mce-container.mce-menu .mce-menu-item:focus, 660 .mce-container.mce-menu .mce-menu-item-normal.mce-active, 661 .mce-container.mce-menu .mce-menu-item-preview.mce-active { 662 background: $highlight-color; 663 } 664 665 /* Customizer */ 666 .wp-core-ui { 667 #customize-controls .control-section:hover > .accordion-section-title, 668 #customize-controls .control-section .accordion-section-title:hover, 669 #customize-controls .control-section.open .accordion-section-title, 670 #customize-controls .control-section .accordion-section-title:focus { 671 color: $link; 672 border-left-color: $button-color; 673 } 674 675 .customize-controls-close:focus, 676 .customize-controls-close:hover, 677 .customize-controls-preview-toggle:focus, 678 .customize-controls-preview-toggle:hover { 679 color: $link; 680 border-top-color: $button-color; 681 } 682 683 .customize-panel-back:hover, 684 .customize-panel-back:focus, 685 .customize-section-back:hover, 686 .customize-section-back:focus { 687 color: $link; 688 border-left-color: $button-color; 689 } 690 691 .customize-screen-options-toggle:hover, 692 .customize-screen-options-toggle:active, 693 .customize-screen-options-toggle:focus, 694 .active-menu-screen-options .customize-screen-options-toggle, 695 #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:hover, 696 #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:active, 697 #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:focus { 698 color: $link; 699 } 700 701 .customize-screen-options-toggle:focus:before, 702 #customize-controls .customize-info .customize-help-toggle:focus:before, 703 &.wp-customizer button:focus .toggle-indicator:before, 704 .menu-item-bar .item-delete:focus:before, 705 #available-menu-items .item-add:focus:before, 706 #customize-save-button-wrapper .save:focus, 707 #publish-settings:focus { 708 box-shadow: 709 0 0 0 1px lighten($button-color, 10), 710 0 0 2px 1px $button-color; 711 } 712 713 #customize-controls .customize-info.open .customize-help-toggle, 714 #customize-controls .customize-info .customize-help-toggle:focus, 715 #customize-controls .customize-info .customize-help-toggle:hover { 716 color: $link; 717 } 718 719 .control-panel-themes .customize-themes-section-title:focus, 720 .control-panel-themes .customize-themes-section-title:hover { 721 border-left-color: $button-color; 722 color: $link; 723 } 724 725 .control-panel-themes .theme-section .customize-themes-section-title.selected:after { 726 background: $button-color; 727 } 728 729 .control-panel-themes .customize-themes-section-title.selected { 730 color: $link; 731 } 732 733 #customize-theme-controls .control-section:hover > .accordion-section-title:after, 734 #customize-theme-controls .control-section .accordion-section-title:hover:after, 735 #customize-theme-controls .control-section.open .accordion-section-title:after, 736 #customize-theme-controls .control-section .accordion-section-title:focus:after, 737 #customize-outer-theme-controls .control-section:hover > .accordion-section-title:after, 738 #customize-outer-theme-controls .control-section .accordion-section-title:hover:after, 739 #customize-outer-theme-controls .control-section.open .accordion-section-title:after, 740 #customize-outer-theme-controls .control-section .accordion-section-title:focus:after { 741 color: $link; 742 } 743 744 .customize-control .attachment-media-view .button-add-media:focus { 745 background-color: #fbfbfc; 746 border-color: $button-color; 747 border-style: solid; 748 box-shadow: 0 0 0 1px $button-color; 749 outline: 2px solid transparent; 750 } 751 752 .wp-full-overlay-footer .devices button:focus, 753 .wp-full-overlay-footer .devices button.active:hover { 754 border-bottom-color: $button-color; 755 } 756 757 .wp-full-overlay-footer .devices button:hover:before, 758 .wp-full-overlay-footer .devices button:focus:before { 759 color: $button-color; 760 } 761 762 .wp-full-overlay .collapse-sidebar:hover, 763 .wp-full-overlay .collapse-sidebar:focus { 764 color: $button-color; 765 } 766 767 .wp-full-overlay .collapse-sidebar:hover .collapse-sidebar-arrow, 768 .wp-full-overlay .collapse-sidebar:focus .collapse-sidebar-arrow { 769 box-shadow: 770 0 0 0 1px lighten($button-color, 10), 771 0 0 2px 1px $button-color; 772 } 773 774 &.wp-customizer .theme-overlay .theme-header .close:focus, 775 &.wp-customizer .theme-overlay .theme-header .close:hover, 776 &.wp-customizer .theme-overlay .theme-header .right:focus, 777 &.wp-customizer .theme-overlay .theme-header .right:hover, 778 &.wp-customizer .theme-overlay .theme-header .left:focus, 779 &.wp-customizer .theme-overlay .theme-header .left:hover { 780 border-bottom-color: $button-color; 781 color: $link; 782 } 783 }