Многие из вас уже знают, что новый форк Apache Superset выступает в роли BI-конструктора для Битрикс24 CRM. После того как вы сверстаете компоненты для своего дашборда и поэкспериментируете с цветовыми схемами, сможете увидеть результат на общей панели. Superset предлагает два способа оформления вашего дашборда: выбор встроенных цветовых схем или использование собственного CSS-кода. В этой статье мы подробно рассмотрим второй вариант — создание CSS, а также разберём, какие классы в нём используются.

Сначала давайте определимся с первым вариантом. Где искать и где менять? Ответ: Дашборды 🖋️Переход в режим редактирования ➡️ . . . ➡️Редактировать свойства ➡️Выбор цветовой схемы из встроенных.

А теперь рассмотрим более гибкий вариант через кодинг CSS. Написать CSS не проблема, но прежде вам надо знать основные классы, которые описывают как общую страницу дашборда, так и компонентов. В открытых источниках я не нашел полного описания, хотя можно было б пройтись по классам Ant Design, плюс есть справка от Битрикса (см. ниже). После недолгих изысканий в этой области привожу вам список действенных классов для манипуляциями настройками дашборда. Применение пользовательского стиля особенно критично, если у вас есть требования к брендированному представлению UI дашбордов. Тогда без CSS не обойтись. Для вставки пользовательского CSS вам необходимо перейти: Дашборды 🖋️Переход в режим редактирования ➡️ . . . ➡️Редактировать CSS.

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

/* CSS Template for Birtix Apache Superset Dashboard */
.dashboard-component-header{
  flex-direction: column;
  border-radius: 5px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  justify-content: center;
  color:#0062c2;
}
/* Header */
.dashboard-component-header span {
    font-weight: bold;
}
.dashboard-header {
    position: relative;
}
.dashboard-header:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, #006CE7, #D8ECF5);
}
/* Dashboard */
.dashboard {
    background: #FFF;
}
/* Tabs */
.ant-tabs .ant-tabs-nav {
    background: #D8ECF5;
}
.ant-tabs .dashboard-component-tabs-content {
    background: #D8ECF5;
}
.ant-tabs .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
    color: #188cff;
}
.ant-tabs .ant-tabs-tab:hover {
    color: #006CE7;
}
.ant-tabs .ant-tabs-ink-bar {
    background: #006CE7;
}
/* Card */
.dashboard .chart-header {
    font-size: 18px;
    font-weight: bold;
}
.dashboard .dashboard-component-chart-holder {
  border: 1px solid #DEEBEE;
  background: #FFF;
  border-radius: 5px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* Card dots */
.dashboard .dot {
    background: #006CE7;
}
.dashboard .ant-dropdown-trigger:hover .dot {
    background: #188cff;
}
/* Buttons */
.dashboard .ant-btn.superset-button {
    background: #006CE7;
    color: #fff;
}
.dashboard .ant-btn.superset-button:not([disabled]):hover {
    background: #188cff;
}
/* Filters */
.dashboard .filters-inactive {
    background: #0062c2;
}
.dashboard .filters-inactive:hover {
    background: #188cff;
}
.dashboard .filter-counts {
    background: #0062c2;
}

.dashboard .filter-counts:hover {
    background: #188cff;
}
.dashboard .filter-counts .anticon+span {
    padding-left: 4px;
    font-size: 0.9em;
    font-weight: normal;
}
/* Filters box */
.ant-popover-inner-content {
    padding-left: 8px;
    padding-right: 8px;
}
.ant-collapse-content-box span,
.ant-collapse-content-box div {
    color: #000;
}
.ant-collapse-content-box button i svg {
    color: #000;
    opacity: 0.25;
}
.ant-collapse-content-box button:hover i svg {
    opacity: 1;
}
.filterStatusPopover .ant-popover-inner {
    background: #FFF;
}
.filterStatusPopover .ant-popover-arrow {
    display: none;
}
.filterStatusPopover.ant-popover {
    padding: 0;
}
/* Options box */
.dashboard .ant-dropdown-menu-item,
.ant-dropdown-menu-submenu-title {
    font-weight: bold;
}
/* Table */
.table tbody tr:nth-child(2n-1) {
    background: #EEE;
}

Здесь привожу черновой вариант (не очень красивый), вам же необходимо изменить, дописать свои параметры классов. Не забывайте сохранить свое творение и вы сразу увидите результат.