[Summary view] [Print] [Text view]

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