| @@ -31,60 +31,21 @@ | ||
| 31 | 31 | * Drop-target highlight — the `data-files-drop-active` attribute |
| 32 | 32 | * is set on the FilesLayer host (desktop area or folder window |
| 33 | 33 | * body) while a shortcut payload is being dragged over it. |
| 34 | 34 | * |
| 35 | - * Marching-ants animation makes the affordance unmissable even | |
| 36 | - * against the busiest wallpaper, and the soft inner glow draws | |
| 37 | - * the eye when the user is "shopping" for a drop target. Both | |
| 38 | - * effects respect prefers-reduced-motion below. | |
| 39 | - * | |
| 40 | - * @since 0.18.0; visuals strengthened in 0.20.0. | |
| 35 | + * A quiet inner glow only. This used to be a dashed, animated | |
| 36 | + * marching-ants frame around the whole wallpaper, and on a full | |
| 37 | + * desktop that read as a large moving grid behind the tile in hand | |
| 38 | + * — loud, and design asked for it to go. The ghost's accept / | |
| 39 | + * reject chip and the per-cell drop preview already say where the | |
| 40 | + * tile will land; the glow just confirms the surface is listening. | |
| 41 | 41 | */ |
| 42 | -@keyframes os-drop-marching-ants { | |
| 43 | - to { | |
| 44 | - background-position: 24px 0, -24px 0, 0 24px, 0 -24px; | |
| 45 | - } | |
| 46 | -} | |
| 47 | - | |
| 48 | 42 | [ data-files-drop-active ] { |
| 49 | 43 | position: relative; |
| 50 | - outline: 3px dashed var( --wp-admin-theme-color, #2271b1 ); | |
| 51 | - outline-offset: -8px; | |
| 52 | - background-image: | |
| 53 | - linear-gradient( | |
| 54 | - 90deg, | |
| 55 | - rgba( 34, 113, 177, 0.45 ) 50%, | |
| 56 | - transparent 0 | |
| 57 | - ), | |
| 58 | - linear-gradient( | |
| 59 | - 90deg, | |
| 60 | - rgba( 34, 113, 177, 0.45 ) 50%, | |
| 61 | - transparent 0 | |
| 62 | - ), | |
| 63 | - linear-gradient( | |
| 64 | - 0deg, | |
| 65 | - rgba( 34, 113, 177, 0.45 ) 50%, | |
| 66 | - transparent 0 | |
| 67 | - ), | |
| 68 | - linear-gradient( | |
| 69 | - 0deg, | |
| 70 | - rgba( 34, 113, 177, 0.45 ) 50%, | |
| 71 | - transparent 0 | |
| 72 | - ); | |
| 73 | - background-repeat: repeat-x, repeat-x, repeat-y, repeat-y; | |
| 74 | - background-size: 12px 3px, 12px 3px, 3px 12px, 3px 12px; | |
| 75 | - background-position: 0 6px, 0 calc( 100% - 6px ), 6px 0, calc( 100% - 6px ) 0; | |
| 76 | 44 | box-shadow: inset 0 0 32px 4px rgba( 34, 113, 177, 0.12 ); |
| 77 | - animation: os-drop-marching-ants 0.6s linear infinite; | |
| 78 | 45 | transition: box-shadow 0.18s ease-out; |
| 79 | 46 | } |
| 80 | 47 | |
| 81 | -@media ( prefers-reduced-motion: reduce ) { | |
| 82 | - [ data-files-drop-active ] { | |
| 83 | - animation: none; | |
| 84 | - } | |
| 85 | -} | |
| 86 | - | |
| 87 | 48 | .os-files-layer { |
| 88 | 49 | position: absolute; |
| 89 | 50 | inset: 0; |
| 90 | 51 | z-index: 0; |
| @@ -606,9 +567,17 @@ | ||
| 606 | 567 | * tile color tokens here so dashicons + labels read against |
| 607 | 568 | * a light background. Plugins / themes can override these |
| 608 | 569 | * same variables at any scope to retint further. */ |
| 609 | 570 | --os-tile-fg: var( --os-fg-on-light, var( --os-ui-fg, #1d2327 ) ); |
| 610 | - --os-tile-fg-muted: rgba( 0, 0, 0, 0.55 ); | |
| 571 | + /* Chains through the palette for the same reason as | |
| 572 | + * `--os-tile-fg` beside it: a bare literal here outranks the | |
| 573 | + * palette's own value and pins every tile's secondary line to | |
| 574 | + * near-black, which disappears the moment the surface is dark. | |
| 575 | + * The literal stays as the pre-brand floor. */ | |
| 576 | + --os-tile-fg-muted: var( | |
| 577 | + --os-folder-window-fg-muted, | |
| 578 | + var( --os-ui-fg-muted, rgba( 0, 0, 0, 0.55 ) ) | |
| 579 | + ); | |
| 611 | 580 | --os-tile-hover-bg: rgba( 0, 0, 0, 0.06 ); |
| 612 | 581 | /* Light-context label rendering — share the same recipe with |
| 613 | 582 | * every other light-bg tile surface (My WordPress, future |
| 614 | 583 | * windows). One set of tokens, no per-surface duplication. */ |
| @@ -752,11 +721,12 @@ | ||
| 752 | 721 | border-inline-start: 1px solid var( --os-ui-border, #dcdcde ); |
| 753 | 722 | color: var( --os-fg-on-light, var( --os-ui-fg, #1d2327 ) ); |
| 754 | 723 | } |
| 755 | 724 | |
| 756 | -/* Selected file tile — light-blue accent on the wallpaper, soft | |
| 757 | - * accent inside light-context windows. Variable-driven so plugins | |
| 758 | - * can retune. */ | |
| 725 | +/* Selected file tile — a fill, and an inset accent ring whose width | |
| 726 | + * the palette decides (0 on OpenStation's, which lifts the tile with | |
| 727 | + * the fill alone; 1px on Legacy). Variable-driven so plugins can | |
| 728 | + * retune. */ | |
| 759 | 729 | .os-file-tile--selected, |
| 760 | 730 | .os-file-tile--selected:hover { |
| 761 | 731 | background: var( |
| 762 | 732 | --os-tile-selected-bg, |
| @@ -761,9 +731,9 @@ | ||
| 761 | 731 | background: var( |
| 762 | 732 | --os-tile-selected-bg, |
| 763 | 733 | rgba( 34, 113, 177, 0.18 ) |
| 764 | 734 | ); |
| 765 | - box-shadow: inset 0 0 0 1px | |
| 735 | + box-shadow: inset 0 0 0 var( --os-tile-selected-ring-width, 1px ) | |
| 766 | 736 | var( --os-tile-focus-ring, var( --wp-admin-theme-color, #2271b1 ) ); |
| 767 | 737 | } |
| 768 | 738 | |
| 769 | 739 | /* Inside a folder window the selected highlight should read on |
