[Summary view] [Print] [Text view]

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