← All changes | assets/css/desktop-files.css +27 -51 1.1.1 → 1.1.13 View file →

		@@ -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;
		@@ -415,9 +376,9 @@
415	376	right: 14px;
416	377	top: 44px;
417	378	width: 18px;
418	379	height: 18px;
419		- border-radius: 50%;
	380	+ border-radius: var( --os-tile-shortcut-radius, 50% );
420	381	background: var( --os-tile-shortcut-bg, rgba( 0, 0, 0, 0.65 ) );
421	382	color: var( --os-tile-shortcut-fg, #fff );
422	383	font-size: 11px;
423	384	line-height: 18px;
		@@ -760,11 +721,12 @@
760	721	border-inline-start: 1px solid var( --os-ui-border, #dcdcde );
761	722	color: var( --os-fg-on-light, var( --os-ui-fg, #1d2327 ) );
762	723	}
763	724
764		-/* Selected file tile — light-blue accent on the wallpaper, soft
765		- * accent inside light-context windows. Variable-driven so plugins
766		- * 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. */
767	729	.os-file-tile--selected,
768	730	.os-file-tile--selected:hover {
769	731	background: var(
770	732	--os-tile-selected-bg,
		@@ -769,9 +731,9 @@
769	731	background: var(
770	732	--os-tile-selected-bg,
771	733	rgba( 34, 113, 177, 0.18 )
772	734	);
773		- box-shadow: inset 0 0 0 1px
	735	+ box-shadow: inset 0 0 0 var( --os-tile-selected-ring-width, 1px )
774	736	var( --os-tile-focus-ring, var( --wp-admin-theme-color, #2271b1 ) );
775	737	}
776	738
777	739	/* Inside a folder window the selected highlight should read on
		@@ -1044,9 +1006,9 @@
1044	1006	* rebound by any light-context scope (folder window, My
1045	1007	* WordPress, …) so all surfaces share one source of truth.
1046	1008	*/
1047	1009	.os-file-tile__label {
1048		- font-size: 12px;
	1010	+ font-size: var( --os-tile-label-font-size, 12px );
1049	1011	line-height: 1.2;
1050	1012	/* Follows the tile rather than restating its width, so a section
1051	1013	* that re-points `--os-tile-w` (image-led sections do) gets a
1052	1014	* label that grows with the tile instead of staying narrow. */
		@@ -1061,8 +1023,22 @@
1061	1023	font-weight: var( --os-tile-label-weight, 400 );
1062	1024	text-shadow: var( --os-tile-label-shadow, 0 1px 2px rgba( 0, 0, 0, 0.5 ) );
1063	1025	-webkit-font-smoothing: var( --os-tile-label-smoothing, auto );
1064	1026	-moz-osx-font-smoothing: grayscale;
	1027	+ /* A plate behind the caption, for a desk that labels its icons on
	1028	+ * a white box rather than with a halo. */
	1029	+ background: var( --os-tile-label-bg, transparent );
	1030	+ padding-inline: var( --os-tile-label-padding, 0 );
	1031	+}
	1032	+
	1033	+/* A selected tile can mark its caption instead of (or as well as)
	1034	+ * its plate: inverted text on a highlight, the way older desks did. */
	1035	+.os-file-tile--selected .os-file-tile__label {
	1036	+ background: var( --os-tile-label-selected-bg, var( --os-tile-label-bg, transparent ) );
	1037	+ color: var(
	1038	+ --os-tile-label-selected-color,
	1039	+ var( --os-tile-label-color, var( --os-tile-fg, #fff ) )
	1040	+ );
1065	1041	}
1066	1042
1067	1043	/*
1068	1044	* DragManager ghost element (the visual that follows the cursor