[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  }
 687  
 688  #wpadminbar #adminbarsearch .adminbar-button {
 689      display: none;
 690  }
 691  
 692  /**
 693   * Command Palette
 694   */
 695  #wpadminbar #wp-admin-bar-command-palette kbd {
 696      background: transparent;
 697  }
 698  
 699  /* Flip the search icon direction on LTR */
 700  #wpadminbar #wp-admin-bar-command-palette .ab-icon svg,
 701  #wpadminbar #adminbarsearch .ab-icon svg {
 702      transform: scaleX(-1) /*rtl:none*/;
 703  }
 704  
 705  /**
 706   * Customize support classes
 707   */
 708  .no-customize-support .hide-if-no-customize,
 709  .customize-support .hide-if-customize,
 710  .no-customize-support #wpadminbar .hide-if-no-customize,
 711  .no-customize-support.wp-core-ui .hide-if-no-customize,
 712  .no-customize-support .wp-core-ui .hide-if-no-customize,
 713  .customize-support #wpadminbar .hide-if-customize,
 714  .customize-support.wp-core-ui .hide-if-customize,
 715  .customize-support .wp-core-ui .hide-if-customize {
 716      display: none;
 717  }
 718  
 719  /**
 720   * Skip link
 721   */
 722  #wpadminbar .screen-reader-text,
 723  #wpadminbar .screen-reader-text span {
 724      border: 0;
 725      clip-path: inset(50%);
 726      height: 1px;
 727      margin: -1px;
 728      overflow: hidden;
 729      padding: 0;
 730      position: absolute;
 731      width: 1px;
 732      /* Many screen reader and browser combinations announce broken words as they would appear visually. */
 733      word-wrap: normal !important;
 734      word-break: normal !important;
 735  }
 736  
 737  #wpadminbar .screen-reader-shortcut {
 738      position: absolute;
 739      top: -1000em;
 740      left: 6px;
 741      height: auto;
 742      width: auto;
 743      display: block;
 744      font-size: 14px;
 745      font-weight: 600;
 746      padding: 15px 23px 14px;
 747      background: #f0f0f1;
 748      color: #2271b1;
 749      z-index: 100000;
 750      line-height: normal;
 751      text-decoration: none;
 752  }
 753  
 754  #wpadminbar .screen-reader-shortcut:focus {
 755      top: 7px;
 756      background: #f0f0f1;
 757      box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
 758  }
 759  
 760  /**
 761   * Media Queries
 762   */
 763  @media screen and (max-width: 782px) {
 764      html {
 765          --wp-admin--admin-bar--height: 46px;
 766      }
 767  
 768      /* Toolbar Touchification*/
 769      html #wpadminbar {
 770          height: 46px;
 771          min-width: 240px; /* match the min-width of the body in wp-admin/css/common.css */
 772      }
 773  
 774      #wpadminbar * {
 775          font-size: 14px;
 776          font-weight: 400;
 777          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 778          line-height: 2.28571428;
 779      }
 780  
 781      #wpadminbar .quicklinks > ul > li > a,
 782      #wpadminbar .quicklinks .ab-empty-item {
 783          padding: 0;
 784          height: 46px;
 785          line-height: 3.28571428;
 786          width: auto;
 787      }
 788  
 789      #wpadminbar .ab-icon {
 790          font: 40px/1 dashicons !important;
 791          margin: 0;
 792          padding: 0;
 793          width: 52px;
 794          height: 46px;
 795          text-align: center;
 796      }
 797  
 798      #wpadminbar .ab-icon.svg-icon {
 799          width: 52px;
 800      }
 801  
 802      /* Dashicons back-compat: give `::before` with `content` the size of the SVG icon. */
 803      #wpadminbar .ab-icon.svg-icon::before {
 804          font-size: 32px;
 805      }
 806  
 807      #wpadminbar .ab-icon.svg-icon svg {
 808          width: 32px;
 809          height: 32px;
 810      }
 811  
 812      #wpadminbar .ab-icon::before {
 813          text-align: center;
 814      }
 815  
 816      #wpadminbar .ab-submenu {
 817          padding: 0;
 818      }
 819  
 820      #wpadminbar #wp-admin-bar-site-name a.ab-item,
 821      #wpadminbar #wp-admin-bar-my-sites a.ab-item,
 822      #wpadminbar #wp-admin-bar-my-account a.ab-item {
 823          text-overflow: clip;
 824      }
 825  
 826      #wpadminbar .quicklinks .menupop ul li .ab-item,
 827      #wpadminbar .quicklinks .menupop ul li a strong,
 828      #wpadminbar .quicklinks .menupop.hover ul li .ab-item,
 829      #wpadminbar.nojs .quicklinks .menupop:hover ul li .ab-item,
 830      #wpadminbar .shortlink-input {
 831          line-height: 1.6;
 832      }
 833  
 834      #wpadminbar .ab-label {
 835          border: 0;
 836          clip-path: inset(50%);
 837          height: 1px;
 838          margin: -1px;
 839          overflow: hidden;
 840          padding: 0;
 841          position: absolute;
 842          width: 1px;
 843          /* Many screen reader and browser combinations announce broken words as they would appear visually. */
 844          word-wrap: normal !important;
 845          word-break: normal !important;
 846      }
 847  
 848      #wpadminbar .menupop li:hover > .ab-sub-wrapper,
 849      #wpadminbar .menupop li.hover > .ab-sub-wrapper {
 850          margin-top: -46px;
 851      }
 852  
 853      #wpadminbar .ab-top-menu .menupop .ab-sub-wrapper .menupop > .ab-item {
 854          padding-right: 30px;
 855      }
 856  
 857      #wpadminbar .menupop .menupop > .ab-item::before {
 858          top: 10px;
 859          right: 6px;
 860      }
 861  
 862      #wpadminbar .ab-top-menu > .menupop > .ab-sub-wrapper .ab-item {
 863          font-size: 16px;
 864          padding: 8px 16px;
 865      }
 866  
 867      #wpadminbar .ab-top-menu > .menupop > .ab-sub-wrapper a:empty {
 868          display: none;
 869      }
 870  
 871      /* WP logo */
 872      #wpadminbar #wp-admin-bar-wp-logo > .ab-item {
 873          padding: 0;
 874      }
 875  
 876      #wpadminbar #wp-admin-bar-wp-logo > .ab-item .ab-icon {
 877          padding: 0;
 878          width: 52px;
 879          height: 46px;
 880          text-align: center;
 881          vertical-align: top;
 882      }
 883  
 884      #wpadminbar .ab-icon,
 885      #wpadminbar .ab-item::before {
 886          padding: 0;
 887      }
 888  
 889      /* My Sites and "Site Title" menu */
 890      #wpadminbar #wp-admin-bar-my-sites > .ab-item,
 891      #wpadminbar #wp-admin-bar-site-name > .ab-item,
 892      #wpadminbar #wp-admin-bar-site-editor > .ab-item,
 893      #wpadminbar #wp-admin-bar-customize > .ab-item,
 894      #wpadminbar #wp-admin-bar-edit > .ab-item,
 895      #wpadminbar #wp-admin-bar-my-account > .ab-item {
 896          text-indent: 100%;
 897          white-space: nowrap;
 898          overflow: hidden;
 899          width: 52px;
 900          padding: 0;
 901          color: #a7aaad; /* @todo not needed? this text is hidden */
 902          position: relative;
 903      }
 904  
 905      #wpadminbar > #wp-toolbar > #wp-admin-bar-root-default .ab-icon,
 906      #wpadminbar > #wp-toolbar > #wp-admin-bar-root-default .ab-icon.svg-icon,
 907      #wpadminbar .ab-icon,
 908      #wpadminbar .ab-icon.svg-icon,
 909      #wpadminbar .ab-item::before {
 910          padding: 0;
 911          margin-right: 0;
 912      }
 913  
 914      /*
 915       * Flex prevents `text-indent` from hiding the site title, and is unused here
 916       * since the icon is positioned absolutely below.
 917       */
 918      #wpadminbar #wp-admin-bar-site-name.has-site-icon > .ab-item {
 919          display: block;
 920      }
 921  
 922      #wpadminbar #wp-admin-bar-site-name > .ab-item img.site-icon {
 923          position: absolute;
 924          top: 9px;
 925          left: 12px;
 926          width: 28px;
 927          height: 28px;
 928          max-width: 28px;
 929          max-height: 28px;
 930          min-width: 28px;
 931          min-height: 28px;
 932          margin: 0;
 933          border-radius: 4px;
 934      }
 935  
 936      #wpadminbar #wp-admin-bar-appearance {
 937          margin-top: 0;
 938      }
 939  
 940      /* Search */
 941      #wpadminbar #wp-admin-bar-search {
 942          display: none;
 943      }
 944  
 945      /* Updates */
 946      #wpadminbar #wp-admin-bar-updates {
 947          text-align: center;
 948      }
 949  
 950      /* Comments and Command Palette */
 951      #wpadminbar #wp-admin-bar-comments .ab-icon,
 952      #wpadminbar #wp-admin-bar-command-palette .ab-icon {
 953          margin: 0;
 954      }
 955  
 956      /* My Account */
 957      #wpadminbar #wp-admin-bar-my-account > a {
 958          position: relative;
 959          white-space: nowrap;
 960          text-indent: 150%; /* More than 100% indentation is needed since this element has padding */
 961          width: 28px;
 962          padding: 0 10px;
 963          overflow: hidden; /* Prevent link text from forcing horizontal scrolling on mobile */
 964      }
 965  
 966      #wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar > a img {
 967          position: absolute;
 968          top: 12px;
 969          right: 10px;
 970          width: 28px;
 971          height: 28px;
 972          border-radius: 50%;
 973      }
 974  
 975      #wpadminbar #wp-admin-bar-my-account > .ab-item .ab-icon.svg-icon {
 976          position: absolute;
 977          top: 0;
 978          right: 0;
 979      }
 980  
 981      #wpadminbar #wp-admin-bar-user-actions.ab-submenu {
 982          padding: 0;
 983      }
 984  
 985      #wpadminbar #wp-admin-bar-user-actions.ab-submenu img.avatar {
 986          display: none;
 987      }
 988  
 989      #wpadminbar #wp-admin-bar-my-account.with-avatar #wp-admin-bar-user-actions > li {
 990          margin: 0;
 991      }
 992  
 993      #wpadminbar #wp-admin-bar-user-info .display-name {
 994          height: auto;
 995          font-size: 16px;
 996          line-height: 1.5;
 997          color: #f0f0f1;
 998      }
 999  
1000      #wpadminbar #wp-admin-bar-user-info .howdy {
1001          white-space: normal;
1002          overflow-wrap: anywhere;
1003      }
1004  
1005      #wpadminbar #wp-admin-bar-user-info a {
1006          padding-top: 4px;
1007      }
1008  
1009      #wpadminbar #wp-admin-bar-user-info .username {
1010          line-height: 0.8 !important;
1011          margin-bottom: -2px;
1012      }
1013  
1014      /* Show only default top level items */
1015      #wp-toolbar > ul > li {
1016          display: none;
1017      }
1018  
1019      #wpadminbar li#wp-admin-bar-menu-toggle,
1020      #wpadminbar li#wp-admin-bar-wp-logo,
1021      #wpadminbar li#wp-admin-bar-my-sites,
1022      #wpadminbar li#wp-admin-bar-updates,
1023      #wpadminbar li#wp-admin-bar-site-name,
1024      #wpadminbar li#wp-admin-bar-site-editor,
1025      #wpadminbar li#wp-admin-bar-customize,
1026      #wpadminbar li#wp-admin-bar-new-content,
1027      #wpadminbar li#wp-admin-bar-edit,
1028      #wpadminbar li#wp-admin-bar-comments,
1029      #wpadminbar li#wp-admin-bar-my-account,
1030      #wpadminbar li#wp-admin-bar-command-palette {
1031          display: block;
1032      }
1033  
1034      /* Allow dropdown list items to appear normally */
1035      #wpadminbar li:hover ul li,
1036      #wpadminbar li.hover ul li,
1037      #wpadminbar li:hover ul li:hover ul li {
1038          display: list-item;
1039      }
1040  
1041      /* Override default min-width so dropdown lists aren't stretched
1042          to 100% viewport width at responsive sizes. */
1043      #wpadminbar .ab-top-menu > .menupop > .ab-sub-wrapper {
1044          min-width: fit-content;
1045      }
1046  
1047      #wpadminbar ul#wp-admin-bar-root-default > li {
1048          margin-right: 0;
1049      }
1050  
1051      /* Experimental fix for touch toolbar dropdown positioning */
1052      #wpadminbar .ab-top-menu,
1053      #wpadminbar .ab-top-secondary,
1054      #wpadminbar #wp-admin-bar-wp-logo,
1055      #wpadminbar #wp-admin-bar-my-sites,
1056      #wpadminbar #wp-admin-bar-site-name,
1057      #wpadminbar #wp-admin-bar-updates,
1058      #wpadminbar #wp-admin-bar-comments,
1059      #wpadminbar #wp-admin-bar-new-content,
1060      #wpadminbar #wp-admin-bar-edit,
1061      #wpadminbar #wp-admin-bar-my-account,
1062      #wpadminbar #wp-admin-bar-command-palette {
1063          position: static;
1064      }
1065  
1066      .network-admin #wpadminbar ul#wp-admin-bar-top-secondary > li#wp-admin-bar-my-account {
1067          margin-right: 0;
1068      }
1069  
1070      /* Realign arrows on taller responsive submenus */
1071  
1072      #wpadminbar .ab-top-secondary .menupop .menupop > .ab-item::before {
1073          top: 10px;
1074          left: 0;
1075      }
1076  }
1077  
1078  /* Smartphone */
1079  @media screen and (max-width: 600px) {
1080      #wpadminbar {
1081          position: absolute;
1082      }
1083  
1084      #wp-responsive-overlay {
1085          position: fixed;
1086          top: 0;
1087          left: 0;
1088          width: 100%;
1089          height: 100%;
1090          z-index: 400;
1091      }
1092  
1093      #wpadminbar .ab-top-menu > .menupop > .ab-sub-wrapper {
1094          width: 100%;
1095          left: 0;
1096      }
1097  
1098      #wpadminbar .menupop .menupop > .ab-item::before {
1099          display: none;
1100      }
1101  
1102      #wpadminbar #wp-admin-bar-wp-logo.menupop .ab-sub-wrapper {
1103          margin-left: 0;
1104      }
1105  
1106      #wpadminbar .ab-top-menu > .menupop li > .ab-sub-wrapper {
1107          margin: 0;
1108          /* Make submenus full-width at this size */
1109          width: 100%;
1110          position: static;
1111          box-shadow: none;
1112      }
1113  
1114      #wpadminbar .ab-top-menu > .menupop li > .ab-sub-wrapper .ab-item {
1115          font-size: 16px;
1116          padding: 6px 15px 19px 30px;
1117      }
1118  
1119      #wpadminbar li:hover ul li ul li {
1120          display: list-item;
1121      }
1122  
1123      #wpadminbar li#wp-admin-bar-wp-logo,
1124      #wpadminbar li#wp-admin-bar-updates {
1125          display: none;
1126      }
1127  }
1128  
1129  /* Very narrow screens */
1130  @media screen and (max-width: 400px) {
1131      #wpadminbar li#wp-admin-bar-comments {
1132          display: none;
1133      }
1134  }