Documentation Index
Fetch the complete documentation index at: https://docs.martan.app/llms.txt
Use this file to discover all available pages before exploring further.
Os widgets podem ser customizados usando CSS variables, permitindo que você adapte as cores, espaçamentos e tipografia para combinar com o design da sua loja.
Variáveis CSS Disponíveis
Cores
| Variável | Descrição |
|---|
--rw-primary-color | Cor primária (botões, links) |
--rw-text-color | Cor do texto principal |
--rw-text-secondary | Cor do texto secundário |
--rw-border-color | Cor das bordas |
--rw-bg-color | Cor de fundo |
--rw-bg-secondary | Cor de fundo secundária |
--rw-star-color | Cor das estrelas preenchidas |
--rw-star-empty | Cor das estrelas vazias |
--rw-progress-bar-color | Cor das barras de progresso (distribuição de estrelas) |
Espaçamentos
| Variável | Descrição |
|---|
--rw-spacing-xs | Espaçamento extra pequeno |
--rw-spacing-sm | Espaçamento pequeno |
--rw-spacing-md | Espaçamento médio |
--rw-spacing-lg | Espaçamento grande |
--rw-spacing-xl | Espaçamento extra grande |
Tipografia
| Variável | Descrição |
|---|
--rw-font-family | Família de fontes |
--rw-font-size-base | Tamanho de fonte base |
--rw-font-size-sm | Tamanho de fonte pequeno |
--rw-font-size-lg | Tamanho de fonte grande |
Outros
| Variável | Descrição |
|---|
--rw-border-radius | Raio das bordas |
--rw-shadow | Sombra padrão |
--rw-shadow-md | Sombra média |
Exemplo de Customização
<style>
martan-reviews {
--rw-primary-color: #10b981;
--rw-star-color: #f59e0b;
--rw-progress-bar-color: #f59e0b;
--rw-bg-color: #ffffff;
--rw-text-color: #1f2937;
--rw-font-family: 'Arial', sans-serif;
}
martan-rating {
--rw-star-color: #f59e0b;
--rw-text-color: #1f2937;
--rw-text-secondary: #6b7280;
}
</style>
<style>
/* Customização apenas para o widget de reviews */
martan-reviews {
--rw-primary-color: #10b981;
}
/* Customização apenas para o widget de rating */
martan-rating {
--rw-star-color: #f59e0b;
}
/* Customização apenas para o widget de questions */
martan-questions {
--rw-primary-color: #3b82f6;
}
</style>
Customização Global
Para aplicar customizações a todos os widgets:
<style>
:root {
--rw-primary-color: #10b981;
--rw-star-color: #f59e0b;
--rw-text-color: #1f2937;
--rw-font-family: 'Inter', sans-serif;
}
</style>
