Поддержка корпоративного стиля на платформе Directum RX

Кастомизация основного стиля приложения

Начиная с версии Directum RX 3.4 в веб-клиенте существует возможность частичной кастомизации внешнего вида. Кастомизация оттенков интерфейса системы выполняется с помощью переопределения css-стилей.

Создадим набор файлов со стилями:

• custom-theme.css (базовые стили)
• custom-theme-night.css (базовые стили для ночной темы)
• custom-theme-ie.css (базовые стили для Internet Explorer).

В файлах должен быть указан «селектор», имя селектора может быть любым. В рамках данного селектора необходимо переопределить значения css-переменных. Если необходимо стилизовать конкретный элемент на странице (например, добавить состояние focus для элемента кнопки), необходимо воспользоваться возможностью создавать вложенные селекторы.

Пример custom-theme.css:

.custom-theme {
  /* Цвета шапки */
  --theme_head-background: #1d2226;
}
 
.custom-theme .button:focus {
  /* Цвет рамки при нажатии на кнопку */
  outline: 1px solid #a1c1fb;
}

Если необходимо стилизовать темную тему, нужно к имени селектора, добавить night-theme:

.custom-theme.night-theme {
  --theme_head-background: white;
  …
}

.custom-theme .header {
  background-color: red;
}
 
.custom-theme .button {
  background-color: red;
}

<?xml version="1.0" encoding="utf-8"?>
<settings>
  <import from="api\_ConfigSettings.xml" />
  <var name="CUSTOM_THEME_NAME" value="custom-theme" />
 
  <block name="CUSTOM_THEMES_CSS">
    <theme cssPath="custom/custom-theme.css" />
    <theme cssPath="custom/custom-theme-night.css" />
    <theme cssPath="custom/custom-theme-ie.css" internetExplorer="true"/>
  </block>
</settings>

.custom-theme {
  /* Цвет шапки */
  --theme_head-background: #1d2226;
  /* Цвет ленты */	
  --theme_ribbon-background: #1d2226;
  /* Цвет навигационной панели */	
  --theme_navigation-background: #2e352e;
  /* Цвет основного фона */
  --theme_primary-light: #d7c2af;
}

.custom-theme .button {
  /* Цвет фона кнопок */
  background: #2e352e;
  /* Цвет текста кнопок */
  color: #f63e2e; 
}
 
.custom-theme .button:focus {
  /* Цвет рамки при нажатии кнопок */
  outline: 2px solid #f63e2e;
}

<var name="CUSTOM_ICONS_PATH" value="custom\images" />