Homepage customization

In this page, you will find the CSS code for the Homepage example:

/* Homepage CSS */

/* Filter & title */

.small-app-home__content > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) {
 color: white;
}

.small-app-home__content > div:nth-child(1) > div:nth-child(1) {
 background-color: #016938 !important;
}

/* Section title */

.category__name__content {
 color: #016938;
}

/* Section separator */

.category__name::after,
.category__name::before {
 background-color: #016938 !important;
 height: 3px !important;
 border-radius: 4px !important;
 opacity: 1 !important;
}

.category__name::after {
 margin-left: 10px;
}

.category__name::before {
 margin-right: 10px;
}

/* Tile */

.smart-home-tile {
 border-radius: 16px !important;
 box-shadow: 0px 5px 10px #016938;
}

[data-testid="filter-icon"] {
 bottom: 8px !important;
 right: 8px !important;
 border-radius: 8px;
}

.tc-value__value,
.tc-value__unit,
.tile-line__selected-value {
 color: #37AF45;
}

.tile-content__name {
 color: #016938;
}

/* Tile line chart */

.widget-line-spot-point {
 fill: #016938;
}

.tile-line__selected-date {
 background-color: rgba(0,0,0,0) !important;
 color: #37AF45;
}

.tile-line__line {
 stroke: #37AF45;
}

/* Tile leaderboard */

.horizontal-bar-chart__label {
 color: #37AF45;
 font-size: 14px !important;
}

.horizontal-bar__bar--complement,
.horizontal-bar__bar {
 rx: 4;
 ry: 4;
}

.horizontal-bar__bar-value {
 fill: #37AF45;
}

.horizontal-bar__bar--complement {
 fill: #F0FFF4;
}