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