| @@ -538,12 +538,12 @@ | ||
| 538 | 538 | flex-direction: column; |
| 539 | 539 | gap: 6px; |
| 540 | 540 | } |
| 541 | 541 | |
| 542 | -/* Tile corner buttons: rename on the leading edge, close on the | |
| 542 | +/* Tile corner buttons: edit on the leading edge, close on the | |
| 543 | 543 | * trailing one, otherwise identical. */ |
| 544 | 544 | .os-overview-top-bar__tile-close, |
| 545 | -.os-overview-top-bar__tile-rename { | |
| 545 | +.os-overview-top-bar__tile-edit { | |
| 546 | 546 | position: absolute; |
| 547 | 547 | top: 4px; |
| 548 | 548 | width: 18px; |
| 549 | 549 | height: 18px; |
| @@ -562,9 +562,9 @@ | ||
| 562 | 562 | border: none; |
| 563 | 563 | padding: 0; |
| 564 | 564 | } |
| 565 | 565 | |
| 566 | -.os-overview-top-bar__tile-rename { | |
| 566 | +.os-overview-top-bar__tile-edit { | |
| 567 | 567 | inset-inline-start: 4px; |
| 568 | 568 | } |
| 569 | 569 | |
| 570 | 570 | .os-overview-top-bar__tile-close { |
| @@ -573,12 +573,12 @@ | ||
| 573 | 573 | |
| 574 | 574 | .os-overview-top-bar__tile-wrapper:is( :hover, :focus-within ) |
| 575 | 575 | :is( |
| 576 | 576 | .os-overview-top-bar__tile-close, |
| 577 | - .os-overview-top-bar__tile-rename | |
| 577 | + .os-overview-top-bar__tile-edit | |
| 578 | 578 | ), |
| 579 | 579 | .os-overview-top-bar__tile-close:focus-visible, |
| 580 | -.os-overview-top-bar__tile-rename:focus-visible { | |
| 580 | +.os-overview-top-bar__tile-edit:focus-visible { | |
| 581 | 581 | opacity: 1; |
| 582 | 582 | } |
| 583 | 583 | |
| 584 | 584 | .os-overview-top-bar__tile-close:hover { |
| @@ -589,36 +589,26 @@ | ||
| 589 | 589 | /* |
| 590 | 590 | * The desk's actions — a column below the tile, separated by the |
| 591 | 591 | * wrapper's gap. Not over the preview: the preview is the tile's |
| 592 | 592 | * picture of the desk, and a bar laid across it covers the one thing |
| 593 | - * the tile is there to show. Not the corners either — rename and | |
| 594 | - * close have those — and these two are the actions that need a word, | |
| 595 | - * because no glyph says "rebuild this desk" or "change what it is". | |
| 593 | + * the tile is there to show. Not the corners either — edit and close | |
| 594 | + * have those — and Restore needs a word, because no glyph says | |
| 595 | + * "rebuild this desk". | |
| 596 | 596 | * |
| 597 | - * Two rows. **Restore** is always visible, but only painted on a desk | |
| 598 | - * with something to restore, so its absence is information. **Edit** | |
| 599 | - * is revealed on hover and keyboard focus, like rename and close: it | |
| 600 | - * is a way to change the desk rather than a thing about it, and a row | |
| 601 | - * of Edit buttons at rest would make the bar read as a form. The | |
| 602 | - * column reserves both rows' height whether or not either is present, | |
| 603 | - * so every tile box stays on the same line. | |
| 597 | + * **Restore** is always visible, but only painted on a desk with | |
| 598 | + * something to restore, so its absence is information. Once any desk | |
| 599 | + * on the bar can restore, every column reserves the row, so every | |
| 600 | + * tile box stays on the same line. | |
| 604 | 601 | */ |
| 605 | 602 | .os-overview-top-bar__tile-actions { |
| 606 | 603 | display: flex; |
| 607 | 604 | flex-direction: column; |
| 608 | 605 | gap: 4px; |
| 609 | - /* | |
| 610 | - * One 22px row: Edit, which every desk has. Reserving two here | |
| 611 | - * made every bar as tall as its most elaborate desk, so a user | |
| 612 | - * with no workspaces at all paid a row of empty space under every | |
| 613 | - * tile for a button none of their desks could show. | |
| 614 | - */ | |
| 615 | - min-height: 22px; | |
| 616 | 606 | } |
| 617 | 607 | |
| 618 | -/* Two 22px rows and the gap, once some desk on the bar can restore. */ | |
| 608 | +/* One 22px row, once some desk on the bar can restore. */ | |
| 619 | 609 | .os-overview-top-bar__list--restorable .os-overview-top-bar__tile-actions { |
| 620 | - min-height: 48px; | |
| 610 | + min-height: 22px; | |
| 621 | 611 | } |
| 622 | 612 | |
| 623 | 613 | .os-overview-top-bar__tile-action { |
| 624 | 614 | display: flex; |
| @@ -652,9 +642,9 @@ | ||
| 652 | 642 | |
| 653 | 643 | .os-overview-top-bar__tile-action:hover { |
| 654 | 644 | background: var( --os-ui-accent, #f252fc ); |
| 655 | 645 | border-color: var( --os-ui-accent, #f252fc ); |
| 656 | - color: var( --os-ui-fg-on-accent, #fff ); | |
| 646 | + color: var( --os-ui-accent-ink, var( --os-ui-fg-on-accent, #fff ) ); | |
| 657 | 647 | } |
| 658 | 648 | |
| 659 | 649 | .os-overview-top-bar__tile-action:focus-visible { |
| 660 | 650 | outline: 2px solid var( --wp-admin-theme-color, #2271b1 ); |
| @@ -660,19 +650,8 @@ | ||
| 660 | 650 | outline: 2px solid var( --wp-admin-theme-color, #2271b1 ); |
| 661 | 651 | outline-offset: 2px; |
| 662 | 652 | } |
| 663 | 653 | |
| 664 | -/* Edit rests hidden; the wrapper's hover / focus brings it up. */ | |
| 665 | -.os-overview-top-bar__tile-edit { | |
| 666 | - opacity: 0; | |
| 667 | -} | |
| 668 | - | |
| 669 | -.os-overview-top-bar__tile-wrapper:is( :hover, :focus-within ) | |
| 670 | - .os-overview-top-bar__tile-edit, | |
| 671 | -.os-overview-top-bar__tile-edit:focus-visible { | |
| 672 | - opacity: 1; | |
| 673 | -} | |
| 674 | - | |
| 675 | 654 | @media ( prefers-reduced-motion: reduce ) { |
| 676 | 655 | .os-overview-top-bar__tile-action { |
| 677 | 656 | transition: none; |
| 678 | 657 | } |
| @@ -677,11 +656,11 @@ | ||
| 677 | 656 | transition: none; |
| 678 | 657 | } |
| 679 | 658 | } |
| 680 | 659 | |
| 681 | -.os-overview-top-bar__tile-rename:hover { | |
| 660 | +.os-overview-top-bar__tile-edit:hover { | |
| 682 | 661 | background: var( --os-ui-accent, #f252fc ); |
| 683 | - color: var( --os-ui-fg-on-accent, #fff ); | |
| 662 | + color: var( --os-ui-accent-ink, var( --os-ui-fg-on-accent, #fff ) ); | |
| 684 | 663 | } |
| 685 | 664 | |
| 686 | 665 | /* |
| 687 | 666 | * The label while it is being edited. Neutral hairline, not the |
