[Summary view] [Print] [Text view]

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