Стили приложения

Вы можете изменить цвета приложения и портала документации, например привести их к фирменному стилю компании.

Стили задаются в приложении.
Стили применяются только в конкретном приложении — браузерном или десктопном — на конкретном устройстве.
Стилями можно поделиться с коллегами, а также опубликовать их на портал документации.

Чтобы задать стили, перейдите в настройки пространства и нажмите CSS-стили.

Как задать цвета

Цветовые переменные используют компоненты HSL без функции hsl(): тон, насыщенность и светлоту. Например, фиолетовый цвет hsl(262 83% 58%) нужно записать как 262 83% 58%.

Задайте переменные светлой темы в селекторе #custom-style, а темной — в .dark #custom-style.

Пример стилей

#custom-style {
	/* Акцентные элементы и основной текст */
	--primary-accent: 262 83% 58%;
	--primary-accent-hover: 263 70% 50%;
	--primary-fg: 240 10% 12%;

	/* Поверхности и границы */
	--primary-bg: 270 40% 98%;
	--primary-bg-hover: 270 35% 94%;
	--primary-border: 262 30% 82%;
	--secondary-bg: 0 0% 100%;
	--sidebar-bg: 270 40% 97%;

	/* Состояния */
	--status-info: 262 83% 58%;
	--status-info-fg: 262 83% 45%;
}

.dark #custom-style {
	--primary-accent: 263 90% 75%;
	--primary-accent-hover: 263 85% 82%;
	--primary-fg: 270 40% 96%;
	--primary-bg: 260 18% 10%;
	--primary-bg-hover: 260 15% 18%;
	--primary-border: 260 12% 35%;
	--secondary-bg: 260 20% 7%;
	--sidebar-bg: 260 18% 10%;
}

Формат значения

Не оборачивайте значение переменной в hsl(), rgb() или #. Компоненты приложения сами преобразуют его в цвет.

Основные переменные

Переменная	Что меняет
`--primary-accent`	Основной акцент: активные элементы, выделения и управляющие элементы.
`--primary-accent-hover`	Основной акцент при наведении.
`--primary-fg`	Основной текст и иконки.
`--primary-border`	Выраженные границы элементов.
`--primary-bg`	Основной фон элементов и областей.
`--primary-bg-hover`	Основной фон при наведении или выборе.
`--secondary-accent`	Дополнительный акцент.
`--secondary-fg`	Второстепенный текст и иконки.
`--secondary-border`	Нейтральные границы и разделители.
`--secondary-bg`	Фон карточек, полей и других элементов поверх основного фона.
`--secondary-bg-hover`	Второстепенный фон при наведении или выборе.
`--tertiary-accent`	Менее заметные акцентные элементы.
`--muted`	Приглушенный текст и иконки.
`--sidebar-bg`	Фон левой и правой боковых панелей.

Статусы

Для ошибок, предупреждений, успешных действий и информационных сообщений используется одинаковый набор окончаний. Вместо {status} укажите error, warning, success или info.

Переменная	Что меняет
`--status-{status}`	Основной цвет статуса.
`--status-{status}-fg`	Текст и иконки статуса.
`--status-{status}-hover`	Цвет статуса при наведении.
`--status-{status}-primary-border`	Выраженная граница статуса.
`--status-{status}-secondary-border`	Нейтральная граница статуса.
`--status-{status}-primary-bg`	Выраженный фон статуса.
`--status-{status}-bg`	Основной фон статуса.
`--status-{status}-bg-hover`	Фон статуса при наведении.

Для нейтрального статуса доступны --status-default, --status-default-hover, --status-default-muted, --status-default-border, --status-default-bg-hover, --status-default-bg и --status-default-fg.

Для фиолетового статуса доступны --status-purple, --status-purple-primary-bg и --status-purple-bg.

Полные наборы переменных:

Ошибка: --status-error, --status-error-fg, --status-error-hover, --status-error-primary-border, --status-error-secondary-border, --status-error-primary-bg, --status-error-bg, --status-error-bg-hover.
Предупреждение: --status-warning, --status-warning-fg, --status-warning-hover, --status-warning-primary-border, --status-warning-secondary-border, --status-warning-primary-bg, --status-warning-bg, --status-warning-bg-hover.
Успешное действие: --status-success, --status-success-fg, --status-success-hover, --status-success-primary-border, --status-success-secondary-border, --status-success-primary-bg, --status-success-bg, --status-success-bg-hover.
Информация: --status-info, --status-info-fg, --status-info-hover, --status-info-primary-border, --status-info-secondary-border, --status-info-primary-bg, --status-info-bg, --status-info-bg-hover.

В темной теме также объявлена переменная --colors-secondary-accent для дополнительного акцента.

Прозрачные цвета

Переменные --alpha-90, --alpha-80, --alpha-70, --alpha-60, --alpha-50, --alpha-40, --alpha-30, --alpha-20 и --alpha-10 задают фон с соответствующей непрозрачностью.

Дополнительно доступны:

--alpha-high-80 — контрастный цвет с непрозрачностью 80%.
--alpha-05-hover — прозрачный фон при наведении в светлой теме.
--alpha-03-hover — прозрачный фон при наведении в темной теме.
--alpha-accent-primary — прозрачный основной акцент.
--alpha-accent-secondary — прозрачный дополнительный акцент.

Именованная палитра

Именованные цвета используются для выделения контента. Для каждого имени можно задать отдельное значение светлой и темной темы:

--peony, --garnet, --cinnamon, --caramel, --hazel, --honey, --lemon, --olive, --sage, --mint, --bazil, --spruce, --aqua, --azure, --tiffany, --marine, --turquoise, --frost, --bosphorus, --lavender, --orchid, --lilac, --plume, --velvet.

Цвета графиков

Переменные --chart-1, --chart-2, --chart-3, --chart-4 и --chart-5 задают последовательность цветов для графиков.

Базовая палитра

Базовые переменные можно использовать как значения других переменных через var(). Они содержат HSL-компоненты.

Zinc: --tailwind-colors-zinc-50, --tailwind-colors-zinc-100, --tailwind-colors-zinc-200, --tailwind-colors-zinc-300, --tailwind-colors-zinc-400, --tailwind-colors-zinc-500, --tailwind-colors-zinc-600, --tailwind-colors-zinc-700, --tailwind-colors-zinc-800, --tailwind-colors-zinc-900, --tailwind-colors-zinc-950.
Red: --tailwind-colors-red-50, --tailwind-colors-red-100, --tailwind-colors-red-200, --tailwind-colors-red-300, --tailwind-colors-red-500, --tailwind-colors-red-600, --tailwind-colors-red-700, --tailwind-colors-red-800, --tailwind-colors-red-900, --tailwind-colors-red-950.
Amber: --tailwind-colors-amber-500, --tailwind-colors-amber-600, --tailwind-colors-amber-700.
Orange: --tailwind-colors-orange-50, --tailwind-colors-orange-100, --tailwind-colors-orange-200, --tailwind-colors-orange-300.
Yellow: --tailwind-colors-yellow-800, --tailwind-colors-yellow-900, --tailwind-colors-yellow-950.
Green: --tailwind-colors-green-50, --tailwind-colors-green-100, --tailwind-colors-green-200, --tailwind-colors-green-300, --tailwind-colors-green-500, --tailwind-colors-green-600, --tailwind-colors-green-700, --tailwind-colors-green-800, --tailwind-colors-green-900, --tailwind-colors-green-950.
Purple: --tailwind-colors-purple-50, --tailwind-colors-purple-500, --tailwind-colors-purple-700, --tailwind-colors-purple-950.
Sky: --tailwind-colors-sky-50, --tailwind-colors-sky-100, --tailwind-colors-sky-200, --tailwind-colors-sky-300, --tailwind-colors-sky-500, --tailwind-colors-sky-600, --tailwind-colors-sky-700, --tailwind-colors-sky-800, --tailwind-colors-sky-900, --tailwind-colors-sky-950.
White: --tailwind-colors-base-white.

#custom-style {
	--primary-accent: var(--tailwind-colors-purple-700);
}

Логотип главной страницы

Вы можете задать логотип в левом верхнем углу главной страницы. Нажмите название пространства, затем нажмите .

Логотип можно добавить для темной и светлой темы.
Если логотип добавлен только для светлой темы, он также используется для темной.
Логотип должен быть в формате SVG.
Максимальный размер — 500 КБ.
Высота логотипа по умолчанию ограничена 40 px. Ее можно изменить с помощью CSS.

Логотип каталога

Логотип каталога хранится в репозитории и задается в системном файле. По умолчанию он отображается в правом верхнем углу карточки каталога.

Чтобы изменить логотип одного каталога, укажите каталог в атрибуте [data-catalog-card="имя-каталога"], затем задайте положение и размер:
```
[data-catalog-card="gramax"] .catalog-title-logo {
    height: 5.5rem;
    top: 0.5rem;
    right: 0;
}
```
Чтобы изменить логотипы всех каталогов, задайте стили без атрибута каталога:
```
.catalog-title-logo {
    height: 5.5rem;
    top: 0.5rem;
    right: 0;
}
```

Настройки

Группировка каталогов