Свой CSS

Токенов хватает на палитру, но не на пластику: кнопки-пилюли, другая толщина подчёркивания активной вкладки, полоса слева у выбранного задания. Для этого есть theme.css — сырой CSS, который подключается последним.

theme.json

{ "css": "theme.css" }

Цепляйтесь за data-sql, а не за классы

Классы — внутреннее дело приложения и меняются вместе с ним. Атрибуты data-sql — публичный контракт: имена не переименовываются, список только пополняется.

theme.css

/* Кнопки-пилюли */
[data-sql="check"],
[data-sql="run"] {
  border-radius: 999px;
  padding-left: 18px;
  padding-right: 18px;
  font-weight: 600;
}

/* Активное задание — полоса слева, а не заливка:
   длинный список сплошных плашек нечитаем */
[data-sql="task-item"].active {
  box-shadow: inset 3px 0 0 var(--accent);
}

/* Активная вкладка панели — линия потолще */
[data-sql="panel-tab"][data-state="active"] {
  border-bottom-width: 3px;
  border-bottom-color: var(--accent);
}

Список точек

Область	Атрибуты
каркас	app, sidebar, work, panel, panel-body
боковая полоса	brand, progress, search, task-list, task-group, task-item, sidebar-actions, theme-toggle
задание	task-head, statement, hint, bookmark
редактор	editor-bar, run, check
панель	panel-tabs, panel-tab, panel-expand, table-layout
данные	result-table, diff-table, schema-card, history-list
сообщения	banner
прочие экраны	about

Состояния приходят атрибутом data-state:

Где	Значения
task-item	passed, failed, untouched
panel-tab	active
banner	passed, failed
bookmark	on, off

/* Решённые задания — приглушить, чтобы взгляд цеплялся за нерешённые */
[data-sql="task-item"][data-state="passed"] .nav-title {
  opacity: 0.65;
}

Почему ваш CSS выигрывает без !important

Стили приложения разложены по слоям каскада: tokens, base, components, app, theme. Файл темы подключается отдельным тегом и попадает во внешний слой, который сильнее любого именованного. Одной специфичности селектора достаточно — приоритеты можно не подкручивать.

Что стоит и чего не стоит делать

Стоит. Пользоваться токенами внутри своего CSS: var(--accent) вместо шестнадцатеричного кода — тогда светлая и тёмная схемы останутся согласованными.

Стоит. Держать файл коротким. Тема на тридцать строк переживает обновления; тема на триста повторяет вёрстку приложения и ломается вместе с ней.

Не стоит. Менять раскладку — display, grid-template, position каркасных элементов. Приложение адаптивно, и своя раскладка сломается на первом же нестандартном экране.

Не стоит. Прятать элементы через display: none. Скрытая кнопка проверки не отменяет проверку, а делает задание нерешаемым.

Отладка

http://localhost:8766/?theme=off

Открывает приложение в дефолтном оформлении, не удаляя тему из пака. Сломалось в обоих режимах — дело в приложении; сломалось только с темой — в theme.css.

Проблемы разбора темы видны в логе сервера:

docker compose logs runner | grep -i theme