版主,cloudflare的新UI显示有问题

cloudflare新UI上的菜单和窗口背景全是透明的,导致上下层文字重叠的问题是内核低了吗?

S8F8ry

是这个官网面板里的 UI 吗？




我平时也有在用，没看到有什么窗口或菜单透明导致文本重叠的问题，还是说它有另一套新的 UI 但我这没有更新到。

方便截图看看是怎样的透明重叠吗？另外在安全模式(按下 Alt+F，在所展开菜单中的"帮助"中选择"以安全模式重新启动")里的表现也一样吗？

哦,忘记说了,版本是5.1(118),因为5.2不能用ech所以我还在用5.1.
比如点个编辑,弹出的框背景是完全透明,导致弹窗中的文字和后面的文字重叠显示

S8F8ry

游客 27.26.224.x 发表于 2026-6-21 18:06
哦,忘记说了,版本是5.1(118),因为5.2不能用ech所以我还在用5.1.
比如点个编辑,弹出的框背景是完全透明,导致 ...

与 Goolge AI Studio弹窗底色变透明 里的原因一样，5.1 版本里不支持 CSS 的 light-dark() 函数。只能是使用样式类的插件(如 Stylus)给网站添加类似的样式：

1. @media (prefers-color-scheme: light) {
   
2.     :root,
   
3.     :host {
   
4.         --text-color-kumo-default: var(--color-neutral-900, oklch(21% .006 285.885));
   
5.         --text-color-kumo-inverse: var(--color-neutral-100, oklch(97% 0 0));
   
6.         --text-color-kumo-strong: var(--color-neutral-950, oklch(14.5% 0 0));
   
7.         --text-color-kumo-subtle: var(--color-neutral-500, oklch(55.6% 0 0));
   
8.         --text-color-kumo-inactive: var(--color-neutral-300, oklch(87% 0 0));
   
9.         --text-color-kumo-placeholder: var(--color-neutral-400, oklch(70.8% 0 0));
   
10.         --text-color-kumo-brand: #f6821f;
    
11.         --text-color-kumo-link: var(--color-blue-800, oklch(42.4% .199 265.638));
    
12.         --text-color-kumo-info: var(--color-blue-800, oklch(42.4% .199 265.638));
    
13.         --text-color-kumo-success: var(--color-emerald-800, oklch(43.2% .095 166.913));
    
14.         --text-color-kumo-danger: var(--color-red-700, oklch(50.5% .213 27.518));
    
15.         --text-color-kumo-warning: var(--color-yellow-800, oklch(47.6% .114 61.907));
    
16.         --text-color-kumo-badge-orange-subtle: var(--color-orange-800, oklch(47% .157 37.304));
    
17.         --text-color-kumo-badge-teal-subtle: var(--color-teal-800, oklch(43.7% .078 188.216));
    
18.         --text-color-kumo-badge-neutral-subtle: var(--color-neutral-800, oklch(26.9% 0 0));
    
19.         --text-color-kumo-badge-inverted: var(--color-white, #fff);
    
20. 
    
21.         --color-kumo-canvas: var(--color-kumo-neutral-25, oklch(98.75% 0 0));
    
22.         --color-kumo-elevated: var(--color-kumo-neutral-75, oklch(98% 0 0));
    
23.         --color-kumo-recessed: var(--color-kumo-neutral-125, oklch(96% 0 0));
    
24.         --color-kumo-base: var(--color-white, #fff);
    
25.         --color-kumo-tint: var(--color-neutral-100, oklch(97% 0 0));
    
26.         --color-kumo-contrast: var(--color-kumo-neutral-975, oklch(8.5% 0 0));
    
27.         --color-kumo-overlay: var(--color-kumo-neutral-50, oklch(97.5% 0 0));
    
28.         --color-kumo-control: var(--color-white, #fff);
    
29.         --color-kumo-interact: var(--color-neutral-300, oklch(87% 0 0));
    
30.         --color-kumo-fill: var(--color-neutral-200, oklch(92.2% 0 0));
    
31.         --color-kumo-fill-hover: var(--color-kumo-neutral-125, oklch(96.5% 0 0));
    
32.         --color-kumo-brand: oklch(57.72% .2324 260);
    
33.         --color-kumo-brand-hover: var(--color-blue-700, oklch(48.8% .243 264.376));
    
34.         --color-kumo-line: oklch(14.5% 0 0/.1);
    
35.         --color-kumo-hairline: var(--color-kumo-neutral-150, oklch(93.5% 0 0));
    
36.         --color-kumo-focus: var(--color-kumo-neutral-950, oklch(15% 0 0));
    
37.         --color-kumo-shadow-edge: oklch(0% 0 0/.12);
    
38.         --color-kumo-shadow-drop: oklch(0% 0 0/.08);
    
39.         --color-kumo-tip-shadow: var(--color-gray-200, oklch(92.8% .006 264.531));
    
40.         --color-kumo-tip-stroke: transparent;
    
41. 
    
42.         --color-kumo-info-tint: var(--color-blue-100, oklch(93.2% .032 255.585));
    
43.         --color-kumo-info: var(--color-blue-500, oklch(68.5% .169 237.323));
    
44.         --color-kumo-warning-tint: var(--color-yellow-100, oklch(97.3% .071 103.193));
    
45.         --color-kumo-warning: var(--color-yellow-500, oklch(79.5% .184 86.047));
    
46.         --color-kumo-danger-tint: var(--color-red-100, oklch(93.6% .032 17.717));
    
47.         --color-kumo-danger: var(--color-red-500, oklch(63.7% .237 25.331));
    
48.         --color-kumo-success-tint: var(--color-emerald-100, oklch(95% .052 163.051));
    
49.         --color-kumo-success: var(--color-emerald-600, oklch(59.6% .145 163.225));
    
50. 
    
51.         --color-kumo-banner-info: oklch(93.2% .032 255.585/.7);
    
52.         --color-kumo-banner-warning: var(--color-yellow-100, oklch(97.3% .071 103.193));
    
53. 
    
54.         --color-kumo-badge-red: var(--color-red-600, oklch(57.7% .245 27.325));
    
55.         --color-kumo-badge-orange: var(--color-orange-650, oklch(81.5% .197 76));
    
56.         --color-kumo-badge-purple: var(--color-purple-600, oklch(60% .118 184.704));
    
57.         --color-kumo-badge-teal: var(--color-teal-650, oklch(54.9% .096 184.565));
    
58.         --color-kumo-badge-blue: var(--color-blue-600, oklch(54.6% .245 262.881));
    
59.         --color-kumo-badge-neutral: var(--color-neutral-500, oklch(55.6% 0 0));
    
60.         --color-kumo-badge-inverted: var(--color-neutral-950, oklch(14.5% 0 0));
    
61. 
    
62.         --text-color-surface: var(--color-neutral-900, oklch(21% .006 285.885));
    
63.         --text-color-label: var(--color-neutral-600, oklch(43.9% 0 0));
    
64.         --text-color-muted: var(--color-neutral-500, oklch(55.6% 0 0));
    
65.         --text-color-disabled: var(--color-neutral-400, oklch(70.8% 0 0));
    
66.         --text-color-brand: #f6821f;
    
67.         --text-color-info: var(--color-blue-800, oklch(42.4% .199 265.638));
    
68.         --text-color-error: var(--color-red-500, oklch(63.7% .237 25.331));
    
69.         --text-color-alert: var(--color-yellow-800, oklch(47.6% .114 61.907));
    
70. 
    
71.         --color-tooltip-border: var(--color-gray-200, oklch(92.8% .006 264.531));
    
72.         --color-surface: var(--color-white, #fff);
    
73.         --color-surface-2: var(--color-neutral-25, oklch(99% 0 0));
    
74.         --color-layer-card-primary: var(--color-white, #fff);
    
75.         --color-surface-elevated: var(--color-white, #fff);
    
76.         --color-surface-secondary: var(--color-neutral-50, oklch(98.5% 0 0));
    
77.         --color-active: var(--color-neutral-400, oklch(70.8% 0 0));
    
78.         --color-muted: var(--color-neutral-100, oklch(97% .001 106.424));
    
79.         --color-secondary: var(--color-white, #fff);
    
80.         --color-subtle: var(--color-neutral-50, oklch(98.5% 0 0));
    
81.         --color-accent: var(--color-neutral-150, oklch(96% 0 0));
    
82.         --color-color: var(--color-neutral-200, oklch(92.2% 0 0));
    
83.         --color-color-2: var(--color-neutral-200, oklch(92.2% 0 0));
    
84.         --color-color-3: var(--color-neutral-100, oklch(97% 0 0));
    
85.         --color-hover: var(--color-neutral-300, oklch(87% 0 0));
    
86.         --color-primary: oklch(57.72% .2324 260);
    
87.         --color-info: var(--color-blue-500, oklch(62.3% .214 259.815));
    
88.         --color-info-selection: var(--color-blue-300, oklch(80.9% .105 251.813));
    
89.         --color-alert-selection: var(--color-yellow-300, oklch(90.5% .182 98.111));
    
90.         --color-error: var(--color-red-500, oklch(63.7% .237 25.331));
    
91.         --color-error-selection: var(--color-red-300, oklch(80.8% .114 19.571));
    
92.     }
    
93. }
    
94. 
    
95. @media (prefers-color-scheme: dark) {
    
96.     :root,
    
97.     :host {
    
98.         --text-color-kumo-default: var(--color-neutral-100, oklch(97% 0 0));
    
99.         --text-color-kumo-inverse: var(--color-neutral-900, oklch(20.5% 0 0));
    
100.         --text-color-kumo-strong: var(--color-neutral-50, oklch(98.5% 0 0));
     
101.         --text-color-kumo-subtle: var(--color-neutral-400, oklch(70.8% 0 0));
     
102.         --text-color-kumo-inactive: var(--color-neutral-600, oklch(43.9% 0 0));
     
103.         --text-color-kumo-placeholder: var(--color-neutral-500, oklch(55.6% 0 0));
     
104.         --text-color-kumo-brand: #f6821f;
     
105.         --text-color-kumo-link: var(--color-blue-400, oklch(70.7% .165 254.624));
     
106.         --text-color-kumo-info: var(--color-blue-400, oklch(70.7% .165 254.624));
     
107.         --text-color-kumo-success: var(--color-emerald-200, oklch(90.5% .093 164.15));
     
108.         --text-color-kumo-danger: var(--color-red-400, oklch(70.4% .191 22.216));
     
109.         --text-color-kumo-warning: var(--color-yellow-400, oklch(85.2% .199 91.936));
     
110.         --text-color-kumo-badge-orange-subtle: var(--color-orange-200, oklch(90.1% .076 70.697));
     
111.         --text-color-kumo-badge-teal-subtle: var(--color-teal-200, oklch(91% .096 180.426));
     
112.         --text-color-kumo-badge-neutral-subtle: var(--color-neutral-200, oklch(92.2% 0 0));
     
113.         --text-color-kumo-badge-inverted: var(--color-black, #000);
     
114. 
     
115.         --color-kumo-canvas: var(--color-kumo-neutral-1000, oklch(10% 0 0));
     
116.         --color-kumo-elevated: var(--color-kumo-neutral-975, oklch(12% 0 0));
     
117.         --color-kumo-recessed: var(--color-kumo-neutral-950, oklch(15% 0 0));
     
118.         --color-kumo-base: var(--color-kumo-neutral-925, oklch(17% 0 0));
     
119.         --color-kumo-tint: var(--color-kumo-neutral-800, oklch(26.9% 0 0));
     
120.         --color-kumo-contrast: var(--color-kumo-neutral-25, oklch(98.5% 0 0));
     
121.         --color-kumo-overlay: var(--color-neutral-800, oklch(26.9% 0 0));
     
122.         --color-kumo-control: var(--color-neutral-900, oklch(21% .006 285.885));
     
123.         --color-kumo-interact: var(--color-neutral-700, oklch(37.1% 0 0));
     
124.         --color-kumo-fill: var(--color-neutral-800, oklch(26.9% 0 0));
     
125.         --color-kumo-fill-hover: var(--color-neutral-800, oklch(37.1% 0 0));
     
126.         --color-kumo-brand: oklch(57.72% .2324 260);
     
127.         --color-kumo-brand-hover: var(--color-blue-700, oklch(48.8% .243 264.376));
     
128.         --color-kumo-line: var(--color-kumo-neutral-750, oklch(32% 0 0));
     
129.         --color-kumo-hairline: var(--color-neutral-800, oklch(26.9% 0 0));
     
130.         --color-kumo-focus: var(--color-kumo-neutral-150, oklch(93.5% 0 0));
     
131.         --color-kumo-shadow-edge: oklch(100% 0 0/.1);
     
132.         --color-kumo-shadow-drop: oklch(0% 0 0/.3);
     
133.         --color-kumo-tip-shadow: transparent;
     
134.         --color-kumo-tip-stroke: var(--color-neutral-800, oklch(26.9% 0 0));
     
135. 
     
136.         --color-kumo-info-tint: var(--color-blue-900, oklch(37.9% .146 265.522));
     
137.         --color-kumo-info: var(--color-blue-400, oklch(70.7% .165 254.624));
     
138.         --color-kumo-warning-tint: var(--color-yellow-700, oklch(55.4% .135 66.442));
     
139.         --color-kumo-warning: var(--color-yellow-400, oklch(85.2% .199 91.936));
     
140.         --color-kumo-danger-tint: var(--color-red-900, oklch(39.6% .141 25.723));
     
141.         --color-kumo-danger: var(--color-red-400, oklch(70.4% .191 22.216));
     
142.         --color-kumo-success-tint: var(--color-emerald-900, oklch(37.8% .077 168.94));
     
143.         --color-kumo-success: var(--color-emerald-400, oklch(76.5% .177 163.223));
     
144. 
     
145.         --color-kumo-banner-info: oklch(37.9% .146 265.522/.5);
     
146.         --color-kumo-banner-warning: oklch(55.4% .135 66.442/.5);
     
147. 
     
148.         --color-kumo-badge-red: var(--color-red-700, oklch(50.5% .213 27.518));
     
149.         --color-kumo-badge-orange: var(--color-orange-650, oklch(81.5% .197 76));
     
150.         --color-kumo-badge-purple: var(--color-purple-700, oklch(50.8% .118 165.612));
     
151.         --color-kumo-badge-teal: var(--color-teal-700, oklch(51.1% .096 186.391));
     
152.         --color-kumo-badge-blue: var(--color-blue-700, oklch(48.8% .243 264.376));
     
153.         --color-kumo-badge-neutral: var(--color-neutral-600, oklch(43.9% 0 0));
     
154.         --color-kumo-badge-inverted: var(--color-white, #fff);
     
155. 
     
156.         --text-color-surface: var(--color-neutral-100, oklch(97% 0 0));
     
157.         --text-color-label: var(--color-neutral-400, oklch(70.8% 0 0));
     
158.         --text-color-muted: var(--color-neutral-50, oklch(98.5% 0 0));
     
159.         --text-color-disabled: var(--color-neutral-400, oklch(70.8% 0 0));
     
160.         --text-color-brand: #f6821f;
     
161.         --text-color-info: var(--color-blue-400, oklch(70.7% .165 254.624));
     
162.         --text-color-error: var(--color-red-400, oklch(70.4% .191 22.216));
     
163.         --text-color-alert: var(--color-yellow-400, oklch(85.2% .199 91.936));
     
164. 
     
165.         --color-tooltip-border: var(--color-neutral-800, oklch(26.9% 0 0));
     
166.         --color-surface: var(--color-black, #000);
     
167.         --color-surface-2: var(--color-neutral-950, oklch(14.5% 0 0));
     
168.         --color-layer-card-primary: var(--color-neutral-950, oklch(14.5% 0 0));
     
169.         --color-surface-elevated: var(--color-neutral-850, oklch(23% 0 0));
     
170.         --color-surface-secondary: #000;
     
171.         --color-active: var(--color-neutral-600, oklch(43.9% 0 0));
     
172.         --color-muted: var(--color-neutral-500, oklch(55.3% .013 58.071));
     
173.         --color-secondary: var(--color-neutral-900, oklch(21% .006 285.885));
     
174.         --color-subtle: var(--color-neutral-800, oklch(26.9% 0 0));
     
175.         --color-accent: var(--color-neutral-850, oklch(23% 0 0));
     
176.         --color-color: var(--color-neutral-800, oklch(26.9% 0 0));
     
177.         --color-color-2: var(--color-neutral-700, oklch(37.1% 0 0));
     
178.         --color-color-3: var(--color-neutral-800, oklch(26.9% 0 0));
     
179.         --color-hover: var(--color-neutral-700, oklch(37.1% 0 0));
     
180.         --color-primary: oklch(57.72% .2324 260);
     
181.         --color-info: var(--color-blue-700, oklch(48.8% .243 264.376));
     
182.         --color-info-selection: var(--color-blue-900, oklch(37.9% .146 265.522));
     
183.         --color-alert-selection: var(--color-yellow-900, oklch(42.1% .095 57.708));
     
184.         --color-error: var(--color-red-700, oklch(50.5% .213 27.518));
     
185.         --color-error-selection: var(--color-red-900, oklch(39.6% .141 25.723));
     
186.     }
     
187. }

复制代码