AgentSkillsCN

ui-overlays-scroll

对对话框、下拉菜单与滚动条进行样式化处理——务必彻底完善，避免遗留未经适配的系统组件。当您新增模态框、下拉菜单、弹出式提示，或构建可滚动区块时，可选用此方法。

SKILL.md
--- frontmatter
name: ui-overlays-scroll
description: Стилизация окошек, выпадашек и скролла — доводить до конца, не оставлять неадаптированные системные элементы. Use when adding modals, dropdowns, popovers, or scrollable blocks.

UI: окошки, выпадашки, скролл

Правило

При добавлении окошек (модалки, popover), выпадающих списков или скроллируемых блоков — сразу дорабатываем до конца. Не оставляем белые, неадаптированные, системные элементы: скроллбары, рамки, стрелки и т.п.

When to Use

  • •Добавление модальных окон
  • •Добавление выпадающих списков (dropdown)
  • •Добавление popover / tooltip
  • •Любой блок с overflow-y: auto или overflow-x: auto

Скроллбар — стилизация

Для тёмной темы Путеводителя:

Firefox

css
scrollbar-width: thin;
scrollbar-color: rgba(139, 0, 255, 0.5) rgba(255, 255, 255, 0.06);

Chrome / Edge / Safari (WebKit)

css
.element::-webkit-scrollbar {
  width: 6px;  /* или height для горизонтального */
}
.element::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 3px;
}
.element::-webkit-scrollbar-thumb {
  background: rgba(139, 0, 255, 0.45);
  border-radius: 3px;
}
.element::-webkit-scrollbar-thumb:hover {
  background: rgba(139, 0, 255, 0.6);
}

Цвета — в тон фона (тёмные, с акцентным цветом для thumb). Для золотой темы — rgba(255, 215, 0, ...).

Reference