no-pointer

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

No Pointer

无指针

Use the established Studio interaction convention for clickable controls:

Set
```
cursor: 'default'
```
; do not use
```
cursor: 'pointer'
```
.
Drive purely visual hover styling through
```
HOVERABLE_CLASS_NAME
```
and
```
hoverableStyle()
```
from
```
packages/studio/src/helpers/hoverable.ts
```
. Do not add React hover state for color or background changes.
Keep the background unchanged unless the surrounding component already uses a shared background-hover convention. For a text-only action, use
```
TRANSPARENT
```
for both
```
idleBackground
```
and
```
hoverBackground
```
.
Use
```
LIGHT_TEXT
```
(
```
#A6A7A9
```
) as the idle color and
```
WHITE
```
(
```
white
```
) as the hover color. Icons and nested text must follow the same state; inspect the element that paints the pixels if the Studio CSS reset blocks inheritance.

为可点击控件使用既定的 Studio 交互规范：

设置
```
cursor: 'default'
```
；不要使用
```
cursor: 'pointer'
```
。
通过
```
packages/studio/src/helpers/hoverable.ts
```
中的
```
HOVERABLE_CLASS_NAME
```
和
```
hoverableStyle()
```
实现纯视觉悬停样式。不要添加 React hover 状态来控制颜色或背景变化。
除非周围的组件已经使用共享的背景悬停规范，否则保持背景不变。对于仅包含文本的操作，
```
idleBackground
```
和
```
hoverBackground
```
均使用
```
TRANSPARENT
```
。
使用
```
LIGHT_TEXT
```
（
```
#A6A7A9
```
）作为空闲状态颜色，使用
```
WHITE
```
（
```
white
```
）作为悬停状态颜色。图标和嵌套文本必须遵循相同状态；如果 Studio CSS reset 阻止了样式继承，请检查实际绘制像素的元素。

Focus styling

焦点样式

Remove the default outline and pointer-focus shadow, but preserve a visible keyboard focus indicator. Add

FOCUS_VISIBLE_ONLY_CLASS_NAME

from

packages/studio/src/helpers/hoverable.ts

to the control alongside

HOVERABLE_CLASS_NAME

. The shared class implements this pattern:

css

.__remotion-focus-visible-only:focus {
  outline: none;
  box-shadow: none;
}

.__remotion-focus-visible-only:focus-visible {
  box-shadow: ${FOCUS_BOX_SHADOW};
}

Never remove the

:focus-visible

indicator. Keep hidden actions out of the tab order until they are discoverable.

移除默认轮廓和指针焦点阴影，但保留可见的键盘焦点指示器。将

packages/studio/src/helpers/hoverable.ts

中的

FOCUS_VISIBLE_ONLY_CLASS_NAME

与

HOVERABLE_CLASS_NAME

一添加到控件上。共享类实现以下模式：

css

.__remotion-focus-visible-only:focus {
  outline: none;
  box-shadow: none;
}

.__remotion-focus-visible-only:focus-visible {
  box-shadow: ${FOCUS_BOX_SHADOW};
}

绝不移除

:focus-visible

指示器。在隐藏操作可被发现之前，不要将其加入 Tab 顺序。

Verify

验证

In a running Studio, check the control's computed styles in all relevant states:

idle and hovered cursor:
```
default
```
;
idle color:
```
rgb(166, 167, 169)
```
;
hovered color:
```
rgb(255, 255, 255)
```
;
pointer focus: no outline or box shadow;
keyboard
```
Tab
```
focus: the standard
```
FOCUS_BOX_SHADOW
```
is visible.

For Studio code changes, run:

bash

bunx turbo run make --filter='@remotion/studio'
bunx turbo run lint test --filter='@remotion/studio'

在运行中的 Studio 中，检查控件在所有相关状态下的计算样式：

空闲和悬停状态的光标：
```
default
```
；
空闲状态颜色：
```
rgb(166, 167, 169)
```
；
悬停状态颜色：
```
rgb(255, 255, 255)
```
；
指针焦点：无轮廓或 box shadow；
键盘
```
Tab
```
焦点：可见的标准
```
FOCUS_BOX_SHADOW
```
。

对于 Studio 代码更改，请运行：

bash

bunx turbo run make --filter='@remotion/studio'
bunx turbo run lint test --filter='@remotion/studio'