← All changes | src/Shared/lib/media-views.js +22 -2 3.1.2 → trunk View file →

		@@ -29,8 +29,18 @@
29	29
30	30	return `${rule.selectorText} { ${declarations.join('; ')}; }`;
31	31	};
32	32
	33	+// A <style> tag resolves core's relative url() against the page, so they 404.
	34	+const rebaseUrls = (css, base) =>
	35	+ css.replace(/url\((["']?)([^"')]+)\1\)/g, (match, _quote, url) => {
	36	+ try {
	37	+ return `url("${new URL(url, base).href}")`;
	38	+ } catch {
	39	+ return match;
	40	+ }
	41	+ });
	42	+
33	43	const getCustomMediaViewsCss = () => {
34	44	const link = document.getElementById('media-views-css');
35	45	if (!link) return null;
36	46
		@@ -37,12 +47,19 @@
37	47	const processedRules = processRules(link.sheet?.cssRules);
38	48
39	49	if (!processedRules?.length) return null;
40	50
41		- const css = processedRules.join('\n');
	51	+ const css = rebaseUrls(processedRules.join('\n'), link.href);
42	52
43	53	const additionalCSS = `
44	54	div:has(> .media-modal) {z-index: 999999 !important}
	55	+
	56	+ /* A host page's <meta name="color-scheme"> otherwise dark-renders wp.media's inputs and scrollbars. */
	57	+ .media-modal,
	58	+ .media-modal-backdrop {
	59	+ color-scheme: only light !important;
	60	+ }
	61	+
45	62	.media-frame {
46	63	h1, h2, h3, h4, h5, h6 {
47	64	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
48	65	color: #1d2327 !important;
		@@ -55,10 +72,13 @@
55	72	.media-sidebar {
56	73	color: #646970 !important;
57	74	}
58	75
	76	+ /* Core leaves these uncolored, so they take the theme's foreground. */
59	77	.media-search-input-label,
60		- .load-more-count {
	78	+ .load-more-count,
	79	+ label[for="media-attachment-filters"],
	80	+ label[for="media-attachment-date-filters"] {
61	81	color: #3c434a !important;
62	82	}
63	83	}
64	84	`;