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