← All changes | build/styles/block-library/playlist/style.css +203 -23 23.2.2 → trunk View file →

		@@ -1,10 +1,22 @@
1	1	.waveform-player {
2	2	font-family: inherit;
3	3	color: inherit;
4		- line-height: 1.4;
	4	+ line-height: var(--waveform-line-height, 1.4);
	5	+ --wfp-accent: #71717a;
	6	+ --wfp-button-color: rgba(255, 255, 255, .9);
	7	+ --wfp-text-color: #ffffff;
	8	+ --wfp-text-secondary-color: rgba(255, 255, 255, .6);
	9	+ --wfp-btn-artwork-color: rgba(255, 255, 255, .9);
	10	+ --wfp-btn-artwork-scrim: rgba(0, 0, 0, .5);
5	11	}
6	12
	13	+.waveform-player.waveform-theme-light {
	14	+ --wfp-button-color: rgba(0, 0, 0, .8);
	15	+ --wfp-text-color: #333333;
	16	+ --wfp-text-secondary-color: rgba(0, 0, 0, .6);
	17	+}
	18	+
7	19	.waveform-player * {
8	20	box-sizing: border-box;
9	21	}
10	22
		@@ -10,26 +22,26 @@
10	22
11	23	.waveform-body {
12	24	display: flex;
13	25	flex-direction: column;
14		- gap: 8px;
	26	+ gap: var(--waveform-body-gap, 8px);
15	27	}
16	28
17	29	.waveform-track {
18	30	display: flex;
19	31	align-items: center;
20		- gap: 12px;
	32	+ gap: var(--waveform-track-gap, 12px);
21	33	position: relative;
22	34	}
23	35
24	36	.waveform-btn {
25		- width: 36px;
26		- height: 36px;
27		- min-width: 36px;
28		- border-radius: 50%;
	37	+ width: var(--wfp-btn-size, 36px);
	38	+ height: var(--wfp-btn-size, 36px);
	39	+ min-width: var(--wfp-btn-size, 36px);
	40	+ border-radius: var(--wfp-btn-radius, 50%);
29	41	border: 2px solid currentColor;
30	42	background: transparent;
31		- color: inherit;
	43	+ color: var(--wfp-button-color, inherit);
32	44	cursor: pointer;
33	45	display: flex;
34	46	align-items: center;
35	47	justify-content: center;
		@@ -43,8 +55,27 @@
43	55	opacity: 1;
44	56	transform: scale(1.05);
45	57	}
46	58
	59	+.waveform-btn-minimal {
	60	+ width: calc(var(--wfp-btn-size, 36px) * 1.1);
	61	+ height: calc(var(--wfp-btn-size, 36px) * 1.1);
	62	+ min-width: calc(var(--wfp-btn-size, 36px) * 1.1);
	63	+ border: none;
	64	+ border-radius: 0;
	65	+ opacity: 0.7;
	66	+}
	67	+
	68	+.waveform-btn-minimal:hover:not(:disabled) {
	69	+ opacity: 1;
	70	+ transform: none;
	71	+}
	72	+
	73	+.waveform-btn.waveform-btn-minimal svg {
	74	+ width: calc(var(--wfp-btn-size, 36px) * 0.94);
	75	+ height: calc(var(--wfp-btn-size, 36px) * 0.94);
	76	+}
	77	+
47	78	.waveform-btn:disabled {
48	79	cursor: not-allowed;
49	80	opacity: 0.3;
50	81	}
		@@ -57,14 +88,48 @@
57	88	height: 100%;
58	89	}
59	90
60	91	.waveform-btn svg {
61		- width: 16px;
62		- height: 16px;
	92	+ width: calc(var(--wfp-btn-size, 36px) * 0.45);
	93	+ height: calc(var(--wfp-btn-size, 36px) * 0.45);
63	94	fill: currentColor;
64	95	display: block;
65	96	}
66	97
	98	+.waveform-btn-has-artwork {
	99	+ --wfp-btn-size: 64px;
	100	+ --wfp-btn-radius: 8px;
	101	+ position: relative;
	102	+ overflow: hidden;
	103	+ border: none;
	104	+ color: var(--wfp-btn-artwork-color);
	105	+}
	106	+
	107	+.waveform-btn > .waveform-btn-artwork {
	108	+ display: block;
	109	+ position: absolute;
	110	+ inset: 0;
	111	+ width: 100%;
	112	+ height: 100%;
	113	+ object-fit: cover;
	114	+ pointer-events: none;
	115	+ z-index: 0;
	116	+}
	117	+
	118	+.waveform-btn-has-artwork:after {
	119	+ content: "";
	120	+ position: absolute;
	121	+ inset: 0;
	122	+ background: var(--wfp-btn-artwork-scrim);
	123	+ pointer-events: none;
	124	+ z-index: 1;
	125	+}
	126	+
	127	+.waveform-btn-has-artwork > :not(.waveform-btn-artwork) {
	128	+ position: relative;
	129	+ z-index: 2;
	130	+}
	131	+
67	132	.waveform-icon-play svg {
68	133	margin-left: 1px;
69	134	}
70	135
		@@ -76,8 +141,12 @@
76	141	min-width: 0;
77	142	width: 100%;
78	143	}
79	144
	145	+.waveform-container:focus-visible {
	146	+ outline: 2px solid currentColor;
	147	+}
	148	+
80	149	.waveform-container canvas {
81	150	display: block;
82	151	width: 100%;
83	152	height: 100%;
		@@ -103,8 +172,9 @@
103	172	min-width: 0;
104	173	}
105	174
106	175	.waveform-title {
	176	+ color: var(--wfp-text-color);
107	177	white-space: nowrap;
108	178	overflow: hidden;
109	179	text-overflow: ellipsis;
110	180	font-weight: 500;
		@@ -109,9 +179,10 @@
109	179	text-overflow: ellipsis;
110	180	font-weight: 500;
111	181	}
112	182
113		-.waveform-subtitle {
	183	+.waveform-artist {
	184	+ color: var(--wfp-text-secondary-color);
114	185	font-size: 11px;
115	186	white-space: nowrap;
116	187	overflow: hidden;
117	188	text-overflow: ellipsis;
		@@ -117,8 +188,9 @@
117	188	text-overflow: ellipsis;
118	189	}
119	190
120	191	.waveform-time {
	192	+ color: var(--wfp-text-secondary-color);
121	193	font-size: 11px;
122	194	white-space: nowrap;
123	195	flex-shrink: 0;
124	196	}
		@@ -123,8 +195,9 @@
123	195	flex-shrink: 0;
124	196	}
125	197
126	198	.waveform-bpm {
	199	+ color: var(--wfp-text-secondary-color);
127	200	font-size: 11px;
128	201	white-space: nowrap;
129	202	flex-shrink: 0;
130	203	display: inline-flex;
		@@ -180,8 +253,14 @@
180	253	width: 4px;
181	254	z-index: 20;
182	255	}
183	256
	257	+.waveform-marker.active {
	258	+ width: 4px;
	259	+ background: currentColor;
	260	+ z-index: 10;
	261	+}
	262	+
184	263	.waveform-marker-tooltip {
185	264	position: absolute;
186	265	bottom: calc(100% + 4px);
187	266	left: 50%;
		@@ -197,12 +276,54 @@
197	276	transition: opacity 0.2s;
198	277	z-index: 1000;
199	278	}
200	279
201		-.waveform-marker:hover .waveform-marker-tooltip {
	280	+.waveform-marker:hover .waveform-marker-tooltip, .waveform-marker.show-label .waveform-marker-tooltip {
202	281	opacity: 1;
203	282	}
204	283
	284	+.waveform-hover-time {
	285	+ position: absolute;
	286	+ bottom: calc(100% + 4px);
	287	+ transform: translate(-50%);
	288	+ background: rgba(0, 0, 0, 0.9019607843);
	289	+ color: #fff;
	290	+ padding: 3px 7px;
	291	+ border-radius: 4px;
	292	+ font-size: 11px;
	293	+ font-variant-numeric: tabular-nums;
	294	+ white-space: nowrap;
	295	+ pointer-events: none;
	296	+ opacity: 0;
	297	+ transition: opacity 0.15s;
	298	+ z-index: 1000;
	299	+}
	300	+
	301	+.waveform-seek-handle {
	302	+ position: absolute;
	303	+ top: 50%;
	304	+ left: 0;
	305	+ width: 11px;
	306	+ height: 11px;
	307	+ border-radius: 50%;
	308	+ background: #fff;
	309	+ box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3490196078);
	310	+ transform: translate(-50%, -50%) scale(0);
	311	+ opacity: 0;
	312	+ transition: opacity 0.12s ease, transform 0.12s ease;
	313	+ pointer-events: none;
	314	+ z-index: 6;
	315	+}
	316	+
	317	+.waveform-seek-handle.is-visible {
	318	+ opacity: 1;
	319	+ transform: translate(-50%, -50%) scale(1);
	320	+}
	321	+
	322	+.waveform-seek-handle.is-active {
	323	+ transform: translate(-50%, -50%) scale(1.25);
	324	+}
	325	+
205	326	.waveform-btn:focus-visible {
206	327	outline: 2px solid currentColor;
207	328	outline-offset: 2px;
208	329	}
		@@ -271,15 +392,15 @@
271	392	color: #fff;
272	393	}
273	394
274	395	.speed-option.active {
275		- background: rgba(168, 85, 247, 0.2);
276		- color: #a855f7;
	396	+ background: rgba(255, 255, 255, 0.1607843137);
	397	+ color: #fff;
277	398	font-weight: 600;
278	399	}
279	400
280	401	.waveform-player.waveform-focused {
281		- outline: 2px solid rgba(168, 85, 247, 0.5);
	402	+ outline: 2px solid var(--wfp-accent);
282	403	outline-offset: 2px;
283	404	border-radius: 4px;
284	405	}
285	406
		@@ -287,12 +408,26 @@
287	408	outline: none;
288	409	}
289	410
290	411	.waveform-player:focus-visible {
291		- outline: 1px solid rgba(168, 85, 247, 0.3);
	412	+ outline: 1px solid var(--wfp-accent);
292	413	outline-offset: 1px;
293	414	}
294	415
	416	+.waveform-layout-preview .waveform-meta {
	417	+ display: none !important;
	418	+}
	419	+
	420	+.waveform-layout-preview .waveform-info {
	421	+ justify-content: center;
	422	+}
	423	+
	424	+.waveform-layout-preview .waveform-text {
	425	+ flex: 0 1 auto;
	426	+ align-items: center;
	427	+ text-align: center;
	428	+}
	429	+
295	430	.waveform-player.waveform-focused {
296	431	outline: none;
297	432	}
298	433
		@@ -317,11 +452,11 @@
317	452	}
318	453
319	454	@media (max-width: 480px) {
320	455	.waveform-btn {
321		- width: 32px;
322		- height: 32px;
323		- min-width: 32px;
	456	+ width: var(--wfp-btn-size, 32px);
	457	+ height: var(--wfp-btn-size, 32px);
	458	+ min-width: var(--wfp-btn-size, 32px);
324	459	}
325	460	.waveform-container {
326	461	min-height: 50px;
327	462	}
		@@ -327,15 +462,21 @@
327	462	}
328	463	.waveform-info {
329	464	font-size: 12px;
330	465	}
331		- .waveform-subtitle, .waveform-time, .waveform-bpm {
	466	+ .waveform-artist, .waveform-time, .waveform-bpm {
332	467	font-size: 10px;
333	468	}
334	469	}
	470	+@media (prefers-reduced-motion: reduce) {
	471	+ .waveform-player *, .waveform-player *:before, .waveform-player *:after {
	472	+ transition-duration: 0.01ms !important;
	473	+ animation-duration: 0.01ms !important;
	474	+ animation-iteration-count: 1 !important;
	475	+ }
	476	+}
335	477	.wp-block-playlist {
336		- overflow: hidden;
337		- overflow: clip;
	478	+ box-sizing: border-box;
338	479	}
339	480	.wp-block-playlist .wp-block-playlist__waveform-player {
340	481	width: 100%;
341	482	margin: var(--wp--preset--spacing--20, 0.625em) 0;
		@@ -340,13 +481,18 @@
340	481	width: 100%;
341	482	margin: var(--wp--preset--spacing--20, 0.625em) 0;
342	483	position: relative;
343	484	}
	485	+.wp-block-playlist .wp-block-playlist__waveform-player:focus-visible {
	486	+ outline: revert;
	487	+ outline-offset: revert;
	488	+}
344	489	.wp-block-playlist .waveform-track {
345	490	height: 100px;
346	491	gap: 0;
347	492	}
348	493	.wp-block-playlist .waveform-btn {
	494	+ border: none;
349	495	border-radius: 0;
350	496	border-end-start-radius: 0.125rem;
351	497	border-start-start-radius: 0.125rem;
352	498	width: 100px;
		@@ -357,14 +503,45 @@
357	503	}
358	504	.wp-block-playlist .waveform-btn:hover:not(:disabled) {
359	505	transform: none;
360	506	}
	507	+.wp-block-playlist .waveform-btn svg {
	508	+ width: 3rem;
	509	+ height: 3rem;
	510	+}
	511	+.wp-block-playlist .waveform-btn .waveform-icon-pause svg {
	512	+ width: 2.625rem;
	513	+ height: 2.625rem;
	514	+}
	515	+.wp-block-playlist .waveform-player.has-play-button-artwork .waveform-btn {
	516	+ background-image: var(--wp--playlist--play-button-artwork);
	517	+ background-position: center;
	518	+ background-size: cover;
	519	+ color: #fff;
	520	+}
	521	+.wp-block-playlist .waveform-player.has-play-button-artwork .waveform-btn svg {
	522	+ filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
	523	+}
	524	+.wp-block-playlist .waveform-player.has-play-button-artwork .waveform-btn svg path {
	525	+ fill: #fff !important;
	526	+}
361	527	.wp-block-playlist .waveform-track.waveform-align-bottom .waveform-btn {
362	528	margin-bottom: 0;
363	529	}
364		-.wp-block-playlist .waveform-subtitle {
	530	+.wp-block-playlist .waveform-btn:focus-visible,
	531	+.wp-block-playlist .waveform-container:focus-visible {
	532	+ outline: revert;
	533	+ outline-offset: revert;
	534	+}
	535	+.wp-block-playlist .waveform-artist {
365	536	opacity: 0.7;
366	537	}
	538	+.wp-block-playlist .waveform-info,
	539	+.wp-block-playlist .waveform-artist,
	540	+.wp-block-playlist .waveform-title,
	541	+.wp-block-playlist .waveform-time {
	542	+ font-size: inherit;
	543	+}
367	544	.wp-block-playlist .wp-block-playlist__tracklist {
368	545	margin: 0;
369	546	padding-left: 0;
370	547	list-style: none;
		@@ -372,9 +549,12 @@
372	549	.wp-block-playlist .wp-block-playlist__tracklist.wp-block-playlist__tracklist-is-hidden {
373	550	display: none;
374	551	}
375	552	.wp-block-playlist .wp-block-playlist__tracklist.wp-block-playlist__tracklist-artist-is-hidden .wp-block-playlist-track__artist {
	553	+ display: none;
	554	+}
	555	+.wp-block-playlist .wp-block-playlist__tracklist.wp-block-playlist__tracklist-length-is-hidden .wp-block-playlist-track__length {
376	556	display: none;
377	557	}
378	558	.wp-block-playlist .wp-block-playlist__tracklist.wp-block-playlist__tracklist-show-numbers {
379	559	counter-reset: playlist-track;
380	560	}