[Summary view] [Print] [Text view]

   1  html {
   2      --wp-admin--admin-bar--height: 32px;
   3      scroll-padding-top: var(--wp-admin--admin-bar--height);
   4  }
   5  
   6  #wpadminbar * {
   7      height: auto;
   8      width: auto;
   9      margin: 0;
  10      padding: 0;
  11      position: static;
  12      text-shadow: none;
  13      text-transform: none;
  14      letter-spacing: normal;
  15      font-size: 13px;
  16      font-weight: 400;
  17      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  18      font-style: normal;
  19      line-height: 2.46153846;
  20      border-radius: 0;
  21      box-sizing: content-box;
  22      transition: none;
  23      -webkit-font-smoothing: subpixel-antialiased; /* Prevent Safari from switching to standard antialiasing on hover */
  24      -moz-osx-font-smoothing: auto; /* Prevent Firefox from inheriting from themes that use other values */
  25  }
  26  
  27  /*
  28   * Guard SVG icons from the above reset and third-party styles,
  29   * so each element falls back to its own SVG attributes.
  30   */
  31  #wpadminbar .ab-icon.svg-icon svg,
  32  #wpadminbar .ab-icon.svg-icon svg *,
  33  #wpadminbar .quicklinks li div.blavatar svg,
  34  #wpadminbar .quicklinks li div.blavatar svg * {
  35      stroke: revert-layer;
  36      stroke-width: revert-layer;
  37  }
  38  
  39  #wpadminbar .ab-icon.svg-icon svg *,
  40  #wpadminbar .quicklinks li div.blavatar svg * {
  41      fill: revert-layer;
  42      width: revert-layer;
  43      height: revert-layer;
  44  }
  45  
  46  .rtl #wpadminbar * {
  47      font-family: Tahoma, sans-serif;
  48  }
  49  
  50  html:lang(he-il) .rtl #wpadminbar * {
  51      font-family: Arial, sans-serif;
  52  }
  53  
  54  #wpadminbar .ab-empty-item {
  55      cursor: default;
  56      outline: none;
  57  }
  58  
  59  #wpadminbar .ab-empty-item,
  60  #wpadminbar a.ab-item,
  61  #wpadminbar > #wp-toolbar span.ab-label,
  62  #wpadminbar > #wp-toolbar span.noticon {
  63      color: #f0f0f1;
  64  }
  65  
  66  #wpadminbar #wp-admin-bar-site-name a.ab-item,
  67  #wpadminbar #wp-admin-bar-my-sites a.ab-item {
  68      white-space: nowrap;
  69  }
  70  
  71  #wpadminbar ul li::before,
  72  #wpadminbar ul li::after {
  73      content: normal;
  74  }
  75  
  76  #wpadminbar a,
  77  #wpadminbar a:hover,
  78  #wpadminbar a img,
  79  #wpadminbar a img:hover {
  80      border: none;
  81      text-decoration: none;
  82      background: none;
  83      box-shadow: none;
  84  }
  85  
  86  #wpadminbar a:focus,
  87  #wpadminbar a:active,
  88  #wpadminbar input[type="text"],
  89  #wpadminbar input[type="password"],
  90  #wpadminbar input[type="number"],
  91  #wpadminbar input[type="search"],
  92  #wpadminbar input[type="email"],
  93  #wpadminbar input[type="url"],
  94  #wpadminbar select,
  95  #wpadminbar textarea,
  96  #wpadminbar div {
  97      box-shadow: none;
  98  }
  99  
 100  #wpadminbar a:focus {
 101      outline-offset: -1px;
 102      /* Only visible in Windows High Contrast mode */
 103      outline: 2px solid transparent;
 104  }
 105  
 106  #wpadminbar {
 107      direction: ltr;
 108      color: #c3c4c7;
 109      font-size: 13px;
 110      font-weight: 400;
 111      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 112      line-height: 2.46153846;
 113      height: 32px;
 114      position: fixed;
 115      top: 0;
 116      left: 0;
 117      width: 100%;
 118      min-width: 600px; /* match the min-width of the body in wp-admin/css/common.css */
 119      z-index: 99999;
 120      background: #1d2327;
 121      /* Only visible in Windows High Contrast mode */
 122      outline: 1px solid transparent;
 123  }
 124  
 125  #wpadminbar .ab-sub-wrapper,
 126  #wpadminbar ul,
 127  #wpadminbar ul li {
 128      background: none;
 129      clear: none;
 130      list-style: none;
 131      margin: 0;
 132      padding: 0;
 133      position: relative;
 134      text-indent: 0;
 135      z-index: 99999;
 136  }
 137  
 138  #wpadminbar ul#wp-admin-bar-root-default > li {
 139      margin-right: 0;
 140  }
 141  
 142  #wpadminbar .quicklinks ul {
 143      text-align: left;
 144  }
 145  
 146  #wpadminbar li {
 147      float: left;
 148  }
 149  
 150  #wpadminbar .quicklinks a,
 151  #wpadminbar .quicklinks .ab-empty-item,
 152  #wpadminbar .shortlink-input {
 153      height: 32px;
 154      display: block;
 155      padding: 0 10px;
 156      margin: 0;
 157  }
 158  
 159  #wpadminbar .quicklinks > ul > li > a {
 160      padding: 0 8px 0 7px;
 161  }
 162  
 163  #wpadminbar .menupop .ab-sub-wrapper,
 164  #wpadminbar .shortlink-input {
 165      margin: 0;
 166      padding: 0;
 167      box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
 168      background: #2c3338;
 169      display: none;
 170      position: absolute;
 171      float: none;
 172  }
 173  
 174  #wpadminbar .ab-top-menu > .menupop > .ab-sub-wrapper {
 175      min-width: 100%;
 176  }
 177  
 178  #wpadminbar .ab-top-secondary .menupop .ab-sub-wrapper {
 179      right: 0;
 180      left: auto;
 181  }
 182  
 183  #wpadminbar .ab-submenu {
 184      padding: 6px 0;
 185  }
 186  
 187  #wpadminbar .selected .shortlink-input {
 188      display: block;
 189  }
 190  
 191  #wpadminbar .quicklinks .menupop ul li {
 192      float: none;
 193  }
 194  
 195  #wpadminbar .quicklinks .menupop ul li a strong {
 196      font-weight: 600;
 197  }
 198  
 199  #wpadminbar .quicklinks .menupop ul li .ab-item,
 200  #wpadminbar .quicklinks .menupop ul li a strong,
 201  #wpadminbar .quicklinks .menupop.hover ul li .ab-item,
 202  #wpadminbar.nojs .quicklinks .menupop:hover ul li .ab-item,
 203  #wpadminbar .shortlink-input {
 204      line-height: 2;
 205      height: 26px;
 206      white-space: nowrap;
 207      min-width: 140px;
 208  }
 209  
 210  #wpadminbar .shortlink-input {
 211      width: 200px;
 212  }
 213  
 214  #wpadminbar.nojs li:hover > .ab-sub-wrapper,
 215  #wpadminbar li.hover > .ab-sub-wrapper {
 216      display: block;
 217      /* Only visible in Windows High Contrast mode */
 218      outline: 1px solid transparent;
 219  }
 220  
 221  #wpadminbar .menupop li:hover > .ab-sub-wrapper,
 222  #wpadminbar .menupop li.hover > .ab-sub-wrapper {
 223      margin-left: 100%;
 224      margin-top: -32px;
 225  }
 226  
 227  #wpadminbar .ab-top-secondary .menupop li:hover > .ab-sub-wrapper,
 228  #wpadminbar .ab-top-secondary .menupop li.hover > .ab-sub-wrapper {
 229      margin-left: 0;
 230      left: inherit;
 231      right: 100%;
 232  }
 233  
 234  #wpadminbar:not(.mobile) .ab-top-menu > li > .ab-item:focus,
 235  #wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus,
 236  #wpadminbar:not(.mobile) .ab-top-menu > li:hover > .ab-item,
 237  #wpadminbar .ab-top-menu > li.hover > .ab-item {
 238      background: #2c3338;
 239      color: #72aee6;
 240  }
 241  
 242  #wpadminbar:not(.mobile) > #wp-toolbar li:hover span.ab-label,
 243  #wpadminbar > #wp-toolbar li.hover span.ab-label,
 244  #wpadminbar:not(.mobile) > #wp-toolbar a:focus span.ab-label {
 245      color: #72aee6;
 246  }
 247  
 248  #wpadminbar > #wp-toolbar > #wp-admin-bar-root-default .ab-icon,
 249  #wpadminbar .ab-icon,
 250  #wpadminbar .ab-item::before,
 251  .wp-admin-bar-arrow {
 252      position: relative;
 253      float: left;
 254      font: 400 20px/1 dashicons;
 255      padding: 4px 0;
 256      -webkit-font-smoothing: antialiased;
 257      -moz-osx-font-smoothing: grayscale;
 258      background-image: none !important;
 259      margin-right: 6px;
 260  }
 261  
 262  #wpadminbar > #wp-toolbar > #wp-admin-bar-root-default .ab-icon.svg-icon,
 263  #wpadminbar .ab-icon.svg-icon {
 264      margin-right: 4px;
 265  }
 266  
 267  #wpadminbar .ab-icon.svg-icon {
 268      display: flex;
 269      align-items: center;
 270      width: 24px;
 271      overflow: hidden;
 272  }
 273  
 274  /* Dashicons back-compat: allow `::before` with `content` to fill the slot and push the SVG icon out of view. */
 275  #wpadminbar .ab-icon.svg-icon::before {
 276      flex: 0 0 100%;
 277      box-sizing: border-box;
 278      text-indent: 0;
 279  }
 280  
 281  #wpadminbar .ab-icon.svg-icon svg {
 282      flex: none;
 283      width: 24px;
 284      height: 24px;
 285      margin: auto;
 286      fill: currentColor;
 287  }
 288  
 289  #wpadminbar .ab-icon,
 290  #wpadminbar .ab-item::before {
 291      position: relative;
 292      color: #a7aaad;
 293      color: rgba(240, 246, 252, 0.6);
 294      transition: color 0.1s ease-in-out;
 295  }
 296  
 297  #wpadminbar .ab-icon::before {
 298      position: relative;
 299      color: inherit;
 300  }
 301  
 302  #wpadminbar .ab-label {
 303      display: inline-block;
 304      height: 32px;
 305  }
 306  
 307  #wpadminbar .ab-submenu .ab-item {
 308      color: #c3c4c7;
 309      color: rgba(240, 246, 252, 0.7);
 310  }
 311  
 312  #wpadminbar .quicklinks .menupop ul li a,
 313  #wpadminbar .quicklinks .menupop ul li a strong,
 314  #wpadminbar .quicklinks .menupop.hover ul li a,
 315  #wpadminbar.nojs .quicklinks .menupop:hover ul li a {
 316      color: #c3c4c7;
 317      color: rgba(240, 246, 252, 0.7);
 318  }
 319  
 320  #wpadminbar .quicklinks .menupop ul li a:hover,
 321  #wpadminbar .quicklinks .menupop ul li a:focus,
 322  #wpadminbar .quicklinks .menupop ul li a:hover strong,
 323  #wpadminbar .quicklinks .menupop ul li a:focus strong,
 324  #wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover > a,
 325  #wpadminbar .quicklinks .menupop.hover ul li a:hover,
 326  #wpadminbar .quicklinks .menupop.hover ul li a:focus,
 327  #wpadminbar .quicklinks .menupop.hover ul li div[tabindex]:hover,
 328  #wpadminbar .quicklinks .menupop.hover ul li div[tabindex]:focus,
 329  #wpadminbar.nojs .quicklinks .menupop:hover ul li a:hover,
 330  #wpadminbar.nojs .quicklinks .menupop:hover ul li a:focus,
 331  #wpadminbar li:hover .ab-icon,
 332  #wpadminbar li:hover .ab-item::before,
 333  #wpadminbar li a:focus .ab-icon,
 334  #wpadminbar li .ab-item:focus::before,
 335  #wpadminbar li .ab-item:focus .ab-icon,
 336  #wpadminbar li.hover .ab-icon,
 337  #wpadminbar li.hover .ab-item::before,
 338  #wpadminbar li #adminbarsearch.adminbar-focused .ab-icon {
 339      color: #72aee6;
 340  }
 341  
 342  /* Dashicons back-compat: inherit the hover and focus color of the link, so color schemes that only color `::before` still reach SVG icons. */
 343  @media screen and (min-width: 783px) {
 344      #wpadminbar li:hover > .ab-item > :where(.ab-icon.svg-icon),
 345      #wpadminbar li.hover > .ab-item > :where(.ab-icon.svg-icon),
 346      #wpadminbar li > .ab-item:focus > .ab-icon:where(.svg-icon) {
 347          color: inherit;
 348      }
 349  }
 350  
 351  #wpadminbar.mobile .quicklinks .ab-icon,
 352  #wpadminbar.mobile .quicklinks .ab-item::before {
 353      color: #c3c4c7;
 354  }
 355  
 356  #wpadminbar.mobile .quicklinks .hover .ab-icon,
 357  #wpadminbar.mobile .quicklinks .hover .ab-item::before {
 358      color: #72aee6;
 359  }
 360  
 361  #wpadminbar .menupop .menupop > .ab-item .wp-admin-bar-arrow::before,
 362  #wpadminbar .ab-top-secondary .menupop .menupop > .ab-item::before {
 363      position: absolute;
 364      font: 400 17px/1 dashicons;
 365      -webkit-font-smoothing: antialiased;
 366      -moz-osx-font-smoothing: grayscale;
 367  }
 368  
 369  #wpadminbar .menupop .menupop > .ab-item {
 370      display: block;
 371      padding-right: 2em;
 372  }
 373  
 374  #wpadminbar .menupop .menupop > .ab-item .wp-admin-bar-arrow::before {
 375      top: 1px;
 376      right: 10px;
 377      padding: 4px 0;
 378      content: "\f139";
 379      content: "\f139" / "";
 380      color: inherit;
 381  }
 382  
 383  #wpadminbar .ab-top-secondary .menupop .menupop > .ab-item {
 384      padding-left: 2em;
 385      padding-right: 1em;
 386  }
 387  
 388  #wpadminbar .ab-top-secondary .menupop .menupop > .ab-item .wp-admin-bar-arrow::before {
 389      top: 1px;
 390      left: 6px;
 391      content: "\f141";
 392      content: "\f141" / "";
 393  }
 394  
 395  #wpadminbar .quicklinks .menupop ul.ab-sub-secondary {
 396      display: block;
 397      position: relative;
 398      right: auto;
 399      margin: 0;
 400      box-shadow: none;
 401  }
 402  
 403  #wpadminbar .quicklinks .menupop ul.ab-sub-secondary,
 404  #wpadminbar .quicklinks .menupop ul.ab-sub-secondary .ab-submenu {
 405      background: #3c434a;
 406  }
 407  
 408  #wpadminbar .quicklinks .menupop .ab-sub-secondary > li > a:hover,
 409  #wpadminbar .quicklinks .menupop .ab-sub-secondary > li .ab-item:focus a {
 410      color: #72aee6;
 411  }
 412  
 413  #wpadminbar .quicklinks a span#ab-updates {
 414      background: #f0f0f1;
 415      color: #2c3338;
 416      display: inline;
 417      padding: 2px 5px;
 418      font-size: 10px;
 419      font-weight: 600;
 420      border-radius: 10px;
 421  }
 422  
 423  #wpadminbar .quicklinks a:hover span#ab-updates {
 424      background: #fff;
 425      color: #000;
 426  }
 427  
 428  #wpadminbar .ab-top-secondary {
 429      float: right;
 430  }
 431  
 432  #wpadminbar ul li:last-child,
 433  #wpadminbar ul li:last-child .ab-item {
 434      box-shadow: none;
 435  }
 436  
 437  /**
 438   * Recovery Mode
 439   */
 440  #wpadminbar #wp-admin-bar-recovery-mode {
 441      color: #fff;
 442      background-color: #d63638;
 443  }
 444  
 445  #wpadminbar .ab-top-menu > #wp-admin-bar-recovery-mode.hover > .ab-item,
 446  #wpadminbar.nojq .quicklinks .ab-top-menu > #wp-admin-bar-recovery-mode > .ab-item:focus,
 447  #wpadminbar:not(.mobile) .ab-top-menu > #wp-admin-bar-recovery-mode:hover > .ab-item,
 448  #wpadminbar:not(.mobile) .ab-top-menu > #wp-admin-bar-recovery-mode > .ab-item:focus {
 449      color: #fff;
 450      background-color: #d63638;
 451  }
 452  
 453  /**
 454   * My Account
 455   */
 456  #wp-admin-bar-my-account > ul {
 457      min-width: 198px;
 458  }
 459  
 460  #wp-admin-bar-my-account:not(.with-avatar) > .ab-item {
 461      display: inline-block;
 462  }
 463  
 464  #wpadminbar #wp-admin-bar-my-account > .ab-item .ab-icon {
 465      float: right;
 466      margin-left: 6px;
 467      margin-right: 0;
 468  }
 469  
 470  #wp-admin-bar-my-account.with-avatar > ul {
 471      min-width: 270px;
 472  }
 473  
 474  #wpadminbar #wp-admin-bar-user-actions > li {
 475      margin-left: 16px;
 476      margin-right: 16px;
 477  }
 478  
 479  #wpadminbar #wp-admin-bar-user-actions.ab-submenu {
 480      padding: 6px 0 12px;
 481  }
 482  
 483  #wpadminbar #wp-admin-bar-my-account.with-avatar #wp-admin-bar-user-actions > li {
 484      margin-left: 88px;
 485  }
 486  
 487  #wpadminbar #wp-admin-bar-user-info {
 488      margin-top: 6px;
 489      margin-bottom: 15px;
 490      height: auto;
 491      background: none;
 492  }
 493  
 494  #wp-admin-bar-user-info .avatar {
 495      position: absolute;
 496      left: -72px;
 497      top: 4px;
 498      width: 64px;
 499      height: 64px;
 500      border-radius: 50%;
 501  }
 502  
 503  #wpadminbar #wp-admin-bar-user-info a {
 504      background: none;
 505      height: auto;
 506  }
 507  
 508  #wpadminbar #wp-admin-bar-user-info span {
 509      background: none;
 510      padding: 0;
 511      height: 18px;
 512  }
 513  
 514  #wpadminbar #wp-admin-bar-user-info .display-name,
 515  #wpadminbar #wp-admin-bar-user-info .username {
 516      display: block;
 517  }
 518  
 519  #wpadminbar #wp-admin-bar-user-info .username[hidden] {
 520      display: none;
 521  }
 522  
 523  #wpadminbar #wp-admin-bar-user-info .howdy .user-display-name {
 524      font: inherit;
 525  }
 526  
 527  #wpadminbar #wp-admin-bar-user-info .username {
 528      color: #a7aaad;
 529      font-size: 11px;
 530  }
 531  
 532  #wpadminbar #wp-admin-bar-my-account.with-avatar > .ab-empty-item img,
 533  #wpadminbar #wp-admin-bar-my-account.with-avatar > a img {
 534      width: auto;
 535      height: 20px;
 536      padding: 0;
 537      border: 1px solid #2c353b;
 538      border-radius: 50%;
 539      background: #f0f0f1;
 540      line-height: 1.84615384;
 541      vertical-align: middle;
 542      margin: -4px 0 0 6px;
 543      float: none;
 544      display: inline;
 545  }
 546  
 547  /**
 548   * WP Logo
 549   */
 550  #wpadminbar #wp-toolbar #wp-admin-bar-wp-logo > .ab-item .ab-icon {
 551      margin-right: 0;
 552  }
 553  
 554  #wpadminbar #wp-admin-bar-wp-logo > .ab-item {
 555      padding: 0 7px;
 556  }
 557  
 558  /*
 559   * My Sites & Site Title
 560   */
 561  #wpadminbar .quicklinks li .blavatar {
 562      display: inline-block;
 563      vertical-align: middle;
 564      line-height: 0;
 565      color: #f0f0f1;
 566  }
 567  
 568  #wpadminbar .quicklinks li a:hover .blavatar,
 569  #wpadminbar .quicklinks li a:focus .blavatar,
 570  #wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover > a .blavatar {
 571      color: #72aee6;
 572  }
 573  
 574  #wpadminbar .quicklinks li img.blavatar {
 575      height: 16px;
 576      width: 16px;
 577      margin: 0 8px 2px -2px;
 578      border-radius: 2px;
 579  }
 580  
 581  #wpadminbar .quicklinks li div.blavatar svg {
 582      display: inline-block;
 583      height: 16px;
 584      width: 16px;
 585      margin: 0 8px 0 -2px;
 586      fill: currentColor;
 587      position: relative;
 588      top: -2px;
 589  }
 590  
 591  #wpadminbar #wp-admin-bar-appearance {
 592      margin-top: -12px;
 593  }
 594  
 595  #wpadminbar #wp-admin-bar-site-name.has-site-icon > .ab-item {
 596      display: flex;
 597      align-items: center;
 598      gap: 6px;
 599  }
 600  
 601  #wpadminbar #wp-admin-bar-site-name.has-site-icon > .ab-item > .ab-icon {
 602      display: none;
 603  }
 604  
 605  /* The adminbar icon needs additional styling to prevent 3rd party styles from overriding the size. */
 606  #wpadminbar #wp-admin-bar-site-name > .ab-item img.site-icon {
 607      width: 20px;
 608      height: 20px;
 609      max-width: 20px;
 610      max-height: 20px;
 611      min-width: 20px;
 612      min-height: 20px;
 613      border-radius: 2px;
 614  }
 615  
 616  /**
 617   * Updates
 618   */
 619  #wpadminbar #wp-admin-bar-updates.spin .ab-icon svg {
 620      animation: rotation 2s infinite linear;
 621  }
 622  
 623  @media (prefers-reduced-motion: reduce) {
 624      #wpadminbar #wp-admin-bar-updates.spin .ab-icon svg {
 625          animation: none;
 626      }
 627  }
 628  
 629  /**
 630   * Search
 631   */
 632  #wpadminbar #wp-admin-bar-search .ab-item {
 633      padding: 0;
 634      background: transparent;
 635  }
 636  
 637  #wpadminbar #adminbarsearch {
 638      position: relative;
 639      height: 32px;
 640      padding: 0 2px;
 641      z-index: 1;
 642  }
 643  
 644  #wpadminbar #adminbarsearch .ab-icon {
 645      position: absolute;
 646      top: 0;
 647      left: 5px;
 648      z-index: 20;
 649      pointer-events: none;
 650  }
 651  
 652  /* The admin bar search field needs to reset many styles that might be inherited from the active Theme CSS. See ticket #40313. */
 653  #wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-search #adminbarsearch input.adminbar-input {
 654      display: inline-block;
 655      float: none;
 656      position: relative;
 657      z-index: 30;
 658      font-size: 13px;
 659      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 660      line-height: 1.84615384;
 661      text-indent: 0;
 662      height: 24px;
 663      width: 24px;
 664      max-width: none;
 665      padding: 0 3px 0 24px;
 666      margin: 0;
 667      color: #c3c4c7;
 668      background-color: rgba(255, 255, 255, 0);
 669      border: none;
 670      outline: none;
 671      cursor: pointer;
 672      box-shadow: none;
 673      box-sizing: border-box;
 674      transition-duration: 400ms;
 675      transition-property: width, background;
 676      transition-timing-function: ease;
 677  }
 678  
 679  #wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-search #adminbarsearch input.adminbar-input:focus {
 680      z-index: 10;
 681      color: #000;
 682      width: 200px;
 683      background-color: rgba(255, 255, 255, 0.9);
 684      cursor: text;
 685      border: 0;
 686      /* Only visible in Windows High Contrast mode */
 687      outline: 2px solid transparent;
 688  }
 689  
 690  #wpadminbar #adminbarsearch .adminbar-button {
 691      display: none;
 692  }
 693  
 694  /**
 695   * Command Palette
 696   */
 697  #wpadminbar #wp-admin-bar-command-palette kbd {
 698      background: transparent;
 699  }
 700  
 701  /* Flip the search icon direction on LTR */
 702  #wpadminbar #wp-admin-bar-command-palette .ab-icon svg,
 703  #wpadminbar #adminbarsearch .ab-icon svg {
 704      transform: scaleX(-1) /*rtl:none*/;
 705  }
 706  
 707  /**
 708   * Customize support classes
 709   */
 710  .no-customize-support .hide-if-no-customize,
 711  .customize-support .hide-if-customize,
 712  .no-customize-support #wpadminbar .hide-if-no-customize,
 713  .no-customize-support.wp-core-ui .hide-if-no-customize,
 714  .no-customize-support .wp-core-ui .hide-if-no-customize,
 715  .customize-support #wpadminbar .hide-if-customize,
 716  .customize-support.wp-core-ui .hide-if-customize,
 717  .customize-support .wp-core-ui .hide-if-customize {
 718      display: none;
 719  }
 720  
 721  /**
 722   * Skip link
 723   */
 724  #wpadminbar .screen-reader-text,
 725  #wpadminbar .screen-reader-text span {
 726      border: 0;
 727      clip-path: inset(50%);
 728      height: 1px;
 729      margin: -1px;
 730      overflow: hidden;
 731      padding: 0;
 732      position: absolute;
 733      width: 1px;
 734      /* Many screen reader and browser combinations announce broken words as they would appear visually. */
 735      word-wrap: normal !important;
 736      word-break: normal !important;
 737  }
 738  
 739  #wpadminbar .screen-reader-shortcut {
 740      position: absolute;
 741      top: -1000em;
 742      left: 6px;
 743      height: auto;
 744      width: auto;
 745      display: block;
 746      font-size: 14px;
 747      font-weight: 600;
 748      padding: 15px 23px 14px;
 749      background: #f0f0f1;
 750      color: #2271b1;
 751      z-index: 100000;
 752      line-height: normal;
 753      text-decoration: none;
 754  }
 755  
 756  #wpadminbar .screen-reader-shortcut:focus {
 757      top: 7px;
 758      background: #f0f0f1;
 759      box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
 760  }
 761  
 762  /**
 763   * Media Queries
 764   */
 765  @media screen and (max-width: 782px) {
 766      html {
 767          --wp-admin--admin-bar--height: 46px;
 768      }
 769  
 770      /* Toolbar Touchification*/
 771      html #wpadminbar {
 772          height: 46px;
 773          min-width: 240px; /* match the min-width of the body in wp-admin/css/common.css */
 774      }
 775  
 776      #wpadminbar * {
 777          font-size: 14px;
 778          font-weight: 400;
 779          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 780          line-height: 2.28571428;
 781      }
 782  
 783      #wpadminbar .quicklinks > ul > li > a,
 784      #wpadminbar .quicklinks .ab-empty-item {
 785          padding: 0;
 786          height: 46px;
 787          line-height: 3.28571428;
 788          width: auto;
 789      }
 790  
 791      #wpadminbar .ab-icon {
 792          font: 40px/1 dashicons !important;
 793          margin: 0;
 794          padding: 0;
 795          width: 52px;
 796          height: 46px;
 797          text-align: center;
 798      }
 799  
 800      #wpadminbar .ab-icon.svg-icon {
 801          width: 52px;
 802      }
 803  
 804      /* Dashicons back-compat: give `::before` with `content` the size of the SVG icon. */
 805      #wpadminbar .ab-icon.svg-icon::before {
 806          font-size: 32px;
 807      }
 808  
 809      #wpadminbar .ab-icon.svg-icon svg {
 810          width: 32px;
 811          height: 32px;
 812      }
 813  
 814      #wpadminbar .ab-icon::before {
 815          text-align: center;
 816      }
 817  
 818      #wpadminbar .ab-submenu {
 819          padding: 0;
 820      }
 821  
 822      #wpadminbar #wp-admin-bar-site-name a.ab-item,
 823      #wpadminbar #wp-admin-bar-my-sites a.ab-item,
 824      #wpadminbar #wp-admin-bar-my-account a.ab-item {
 825          text-overflow: clip;
 826      }
 827  
 828      #wpadminbar .quicklinks .menupop ul li .ab-item,
 829      #wpadminbar .quicklinks .menupop ul li a strong,
 830      #wpadminbar .quicklinks .menupop.hover ul li .ab-item,
 831      #wpadminbar.nojs .quicklinks .menupop:hover ul li .ab-item,
 832      #wpadminbar .shortlink-input {
 833          line-height: 1.6;
 834      }
 835  
 836      #wpadminbar .ab-label {
 837          border: 0;
 838          clip-path: inset(50%);
 839          height: 1px;
 840          margin: -1px;
 841          overflow: hidden;
 842          padding: 0;
 843          position: absolute;
 844          width: 1px;
 845          /* Many screen reader and browser combinations announce broken words as they would appear visually. */
 846          word-wrap: normal !important;
 847          word-break: normal !important;
 848      }
 849  
 850      #wpadminbar .menupop li:hover > .ab-sub-wrapper,
 851      #wpadminbar .menupop li.hover > .ab-sub-wrapper {
 852          margin-top: -46px;
 853      }
 854  
 855      #wpadminbar .ab-top-menu .menupop .ab-sub-wrapper .menupop > .ab-item {
 856          padding-right: 30px;
 857      }
 858  
 859      #wpadminbar .menupop .menupop > .ab-item::before {
 860          top: 10px;
 861          right: 6px;
 862      }
 863  
 864      #wpadminbar .ab-top-menu > .menupop > .ab-sub-wrapper .ab-item {
 865          font-size: 16px;
 866          padding: 8px 16px;
 867      }
 868  
 869      #wpadminbar .ab-top-menu > .menupop > .ab-sub-wrapper a:empty {
 870          display: none;
 871      }
 872  
 873      /* WP logo */
 874      #wpadminbar #wp-admin-bar-wp-logo > .ab-item {
 875          padding: 0;
 876      }
 877  
 878      #wpadminbar #wp-admin-bar-wp-logo > .ab-item .ab-icon {
 879          padding: 0;
 880          width: 52px;
 881          height: 46px;
 882          text-align: center;
 883          vertical-align: top;
 884      }
 885  
 886      #wpadminbar .ab-icon,
 887      #wpadminbar .ab-item::before {
 888          padding: 0;
 889      }
 890  
 891      /* My Sites and "Site Title" menu */
 892      #wpadminbar #wp-admin-bar-my-sites > .ab-item,
 893      #wpadminbar #wp-admin-bar-site-name > .ab-item,
 894      #wpadminbar #wp-admin-bar-site-editor > .ab-item,
 895      #wpadminbar #wp-admin-bar-customize > .ab-item,
 896      #wpadminbar #wp-admin-bar-edit > .ab-item,
 897      #wpadminbar #wp-admin-bar-my-account > .ab-item {
 898          text-indent: 100%;
 899          white-space: nowrap;
 900          overflow: hidden;
 901          width: 52px;
 902          padding: 0;
 903          color: #a7aaad; /* @todo not needed? this text is hidden */
 904          position: relative;
 905      }
 906  
 907      #wpadminbar > #wp-toolbar > #wp-admin-bar-root-default .ab-icon,
 908      #wpadminbar > #wp-toolbar > #wp-admin-bar-root-default .ab-icon.svg-icon,
 909      #wpadminbar .ab-icon,
 910      #wpadminbar .ab-icon.svg-icon,
 911      #wpadminbar .ab-item::before {
 912          padding: 0;
 913          margin-right: 0;
 914      }
 915  
 916      /*
 917       * Flex prevents `text-indent` from hiding the site title, and is unused here
 918       * since the icon is positioned absolutely below.
 919       */
 920      #wpadminbar #wp-admin-bar-site-name.has-site-icon > .ab-item {
 921          display: block;
 922      }
 923  
 924      #wpadminbar #wp-admin-bar-site-name > .ab-item img.site-icon {
 925          position: absolute;
 926          top: 9px;
 927          left: 12px;
 928          width: 28px;
 929          height: 28px;
 930          max-width: 28px;
 931          max-height: 28px;
 932          min-width: 28px;
 933          min-height: 28px;
 934          margin: 0;
 935          border-radius: 4px;
 936      }
 937  
 938      #wpadminbar #wp-admin-bar-appearance {
 939          margin-top: 0;
 940      }
 941  
 942      /* Search */
 943      #wpadminbar #wp-admin-bar-search {
 944          display: none;
 945      }
 946  
 947      /* Updates */
 948      #wpadminbar #wp-admin-bar-updates {
 949          text-align: center;
 950      }
 951  
 952      /* Comments and Command Palette */
 953      #wpadminbar #wp-admin-bar-comments .ab-icon,
 954      #wpadminbar #wp-admin-bar-command-palette .ab-icon {
 955          margin: 0;
 956      }
 957  
 958      /* My Account */
 959      #wpadminbar #wp-admin-bar-my-account > a {
 960          position: relative;
 961          white-space: nowrap;
 962          text-indent: 150%; /* More than 100% indentation is needed since this element has padding */
 963          width: 28px;
 964          padding: 0 10px;
 965          overflow: hidden; /* Prevent link text from forcing horizontal scrolling on mobile */
 966      }
 967  
 968      #wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar > a img {
 969          position: absolute;
 970          top: 12px;
 971          right: 10px;
 972          width: 28px;
 973          height: 28px;
 974          border-radius: 50%;
 975      }
 976  
 977      #wpadminbar #wp-admin-bar-my-account > .ab-item .ab-icon.svg-icon {
 978          position: absolute;
 979          top: 0;
 980          right: 0;
 981      }
 982  
 983      #wpadminbar #wp-admin-bar-user-actions.ab-submenu {
 984          padding: 0;
 985      }
 986  
 987      #wpadminbar #wp-admin-bar-user-actions.ab-submenu img.avatar {
 988          display: none;
 989      }
 990  
 991      #wpadminbar #wp-admin-bar-my-account.with-avatar #wp-admin-bar-user-actions > li {
 992          margin: 0;
 993      }
 994  
 995      #wpadminbar #wp-admin-bar-user-info .display-name {
 996          height: auto;
 997          font-size: 16px;
 998          line-height: 1.5;
 999          color: #f0f0f1;
1000      }
1001  
1002      #wpadminbar #wp-admin-bar-user-info .howdy {
1003          white-space: normal;
1004          overflow-wrap: anywhere;
1005      }
1006  
1007      #wpadminbar #wp-admin-bar-user-info a {
1008          padding-top: 4px;
1009      }
1010  
1011      #wpadminbar #wp-admin-bar-user-info .username {
1012          line-height: 0.8 !important;
1013          margin-bottom: -2px;
1014      }
1015  
1016      /* Show only default top level items */
1017      #wp-toolbar > ul > li {
1018          display: none;
1019      }
1020  
1021      #wpadminbar li#wp-admin-bar-menu-toggle,
1022      #wpadminbar li#wp-admin-bar-wp-logo,
1023      #wpadminbar li#wp-admin-bar-my-sites,
1024      #wpadminbar li#wp-admin-bar-updates,
1025      #wpadminbar li#wp-admin-bar-site-name,
1026      #wpadminbar li#wp-admin-bar-site-editor,
1027      #wpadminbar li#wp-admin-bar-customize,
1028      #wpadminbar li#wp-admin-bar-new-content,
1029      #wpadminbar li#wp-admin-bar-edit,
1030      #wpadminbar li#wp-admin-bar-comments,
1031      #wpadminbar li#wp-admin-bar-my-account,
1032      #wpadminbar li#wp-admin-bar-command-palette {
1033          display: block;
1034      }
1035  
1036      /* Allow dropdown list items to appear normally */
1037      #wpadminbar li:hover ul li,
1038      #wpadminbar li.hover ul li,
1039      #wpadminbar li:hover ul li:hover ul li {
1040          display: list-item;
1041      }
1042  
1043      /* Override default min-width so dropdown lists aren't stretched
1044          to 100% viewport width at responsive sizes. */
1045      #wpadminbar .ab-top-menu > .menupop > .ab-sub-wrapper {
1046          min-width: fit-content;
1047      }
1048  
1049      #wpadminbar ul#wp-admin-bar-root-default > li {
1050          margin-right: 0;
1051      }
1052  
1053      /* Experimental fix for touch toolbar dropdown positioning */
1054      #wpadminbar .ab-top-menu,
1055      #wpadminbar .ab-top-secondary,
1056      #wpadminbar #wp-admin-bar-wp-logo,
1057      #wpadminbar #wp-admin-bar-my-sites,
1058      #wpadminbar #wp-admin-bar-site-name,
1059      #wpadminbar #wp-admin-bar-updates,
1060      #wpadminbar #wp-admin-bar-comments,
1061      #wpadminbar #wp-admin-bar-new-content,
1062      #wpadminbar #wp-admin-bar-edit,
1063      #wpadminbar #wp-admin-bar-my-account,
1064      #wpadminbar #wp-admin-bar-command-palette {
1065          position: static;
1066      }
1067  
1068      .network-admin #wpadminbar ul#wp-admin-bar-top-secondary > li#wp-admin-bar-my-account {
1069          margin-right: 0;
1070      }
1071  
1072      /* Realign arrows on taller responsive submenus */
1073  
1074      #wpadminbar .ab-top-secondary .menupop .menupop > .ab-item::before {
1075          top: 10px;
1076          left: 0;
1077      }
1078  }
1079  
1080  /* Smartphone */
1081  @media screen and (max-width: 600px) {
1082      #wpadminbar {
1083          position: absolute;
1084      }
1085  
1086      #wp-responsive-overlay {
1087          position: fixed;
1088          top: 0;
1089          left: 0;
1090          width: 100%;
1091          height: 100%;
1092          z-index: 400;
1093      }
1094  
1095      #wpadminbar .ab-top-menu > .menupop > .ab-sub-wrapper {
1096          width: 100%;
1097          left: 0;
1098      }
1099  
1100      #wpadminbar .menupop .menupop > .ab-item::before {
1101          display: none;
1102      }
1103  
1104      #wpadminbar #wp-admin-bar-wp-logo.menupop .ab-sub-wrapper {
1105          margin-left: 0;
1106      }
1107  
1108      #wpadminbar .ab-top-menu > .menupop li > .ab-sub-wrapper {
1109          margin: 0;
1110          /* Make submenus full-width at this size */
1111          width: 100%;
1112          position: static;
1113          box-shadow: none;
1114      }
1115  
1116      #wpadminbar .ab-top-menu > .menupop li > .ab-sub-wrapper .ab-item {
1117          font-size: 16px;
1118          padding: 6px 15px 19px 30px;
1119      }
1120  
1121      #wpadminbar li:hover ul li ul li {
1122          display: list-item;
1123      }
1124  
1125      #wpadminbar li#wp-admin-bar-wp-logo,
1126      #wpadminbar li#wp-admin-bar-updates {
1127          display: none;
1128      }
1129  }
1130  
1131  /* Very narrow screens */
1132  @media screen and (max-width: 400px) {
1133      #wpadminbar li#wp-admin-bar-comments {
1134          display: none;
1135      }
1136  }