Referência de estilos de banner e terço inferior

Esta referência documenta todos os tipos de banner e os estilos de animação dos terços inferiores (Animated Caption).

Banner básico com dois campos de texto.

Propriedade	Descrição
Primary Text (texto principal)	Título principal (máx. 54 caracteres)
Secondary Text (texto secundário)	Subtítulo/descrição (máx. 200 caracteres)
Ticker (texto rolante)	Desativado

Banner com texto rolante para avisos.

Propriedade	Descrição
Primary Text	Título principal (máx. 54 caracteres)
Secondary Text	Conteúdo rolante (máx. 1000 caracteres)
Ticker	Ativado
Direction (direção)	Direção da animação

Direções do ticker:

ltr - Da esquerda para a direita
rtl - Da direita para a esquerda

{
  idx: string,           // Unique identifier
  title: string,         // Primary text
  text: string,          // Secondary text
  ticker: boolean,       // Is ticker mode
  direction: string,     // 'ltr' or 'rtl'
  order: number,         // Display order
}

Estilos de animação dos terços inferiores (Animated Captions)

A galeria de estilos de legenda animada

15 estilos de animação disponíveis para terços inferiores/placas de nome.

Estilos padrão (ra_dc_1 a ra_dc_8)

ID	Nome do estilo	Descrição
`ra_dc_1`	Classic Bar	Barra colorida com logo, nome e cargo
`ra_dc_2`	Two Line	Nome em cima, cargo embaixo
`ra_dc_3`	Minimal	Layout limpo em duas linhas
`ra_dc_4`	Single Line + Bar	Nome com barra de destaque
`ra_dc_5`	Decorative	Várias linhas de destaque
`ra_dc_6`	Bold	Design marcante
`ra_dc_7`	Modern	Layout contemporâneo
`ra_dc_8`	Professional	Estilo corporativo

Variações verticais (ra_dc_9_v a ra_dc_11_v)

ID	Nome do estilo	Descrição
`ra_dc_9_v`	Vertical 1	Layout pensado para retrato
`ra_dc_10_v`	Vertical 2	Alternativa para retrato
`ra_dc_11_v`	Vertical 3	Retrato compacto

Estilos adicionais

ID	Nome do estilo	Descrição
`ra_dc_12`	Extended	Design de largura total
`ra_dc_14`	Stylized	Layout de destaque exclusivo
`ra_dc_15`	Contemporary	Moderno e minimalista

Configuração do terço inferior

Origens de posição (tOrigin)

Valor	Posição
`t_origin_tl`	Superior esquerdo
`t_origin_tc`	Superior central
`t_origin_tr`	Superior direito
`t_origin_bl`	Inferior esquerdo
`t_origin_bc`	Inferior central
`t_origin_br`	Inferior direito

Origens de transformação CSS

tOriginList: {
  't_origin_tl': 'left top',
  't_origin_tc': 'center top',
  't_origin_tr': 'right top',
  't_origin_bl': 'left bottom',
  't_origin_bc': 'center bottom',
  't_origin_br': 'right bottom',
}

Configurações de cor

Propriedade	Descrição
`color`	Cor de destaque principal (barras, linhas)
`color2`	Cor do texto

Configurações de logo

Propriedade	Descrição
`uselogo`	Booleano - mostra/oculta o logo
`logo`	URL da imagem do logo

Estrutura de dados do terço inferior

{
  animationType: string,    // 'ra_dc_1' through 'ra_dc_15'
  tOrigin: string,          // Position origin
  color: string,            // Primary color (hex)
  color2: string,           // Text color (hex)
  uselogo: boolean,         // Show logo
  logo: string,             // Logo URL
}

Estados da animação

Entrada/saída

Os terços inferiores entram e saem com animação usando classes CSS:

.appear - Animação de entrada ativa
.disappear - Animação de saída ativa

Transições de cena

.scene_transition_not_finished - Durante a troca de cena
.banner_or_comment_is_shown - Quando está ativo

Limites de caracteres

Campo	Padrão	Ticker
Primary Text	54	54
Secondary Text	200	1000

Cores de validação

Normal: cor de texto padrão
Aviso: #fc6d72 (vermelho) quando passa do limite

Elementos da interface

Elemento	Rótulo
Campo de título	Placeholder “Primary Text”
Campo de texto	Placeholder “Secondary Text”
Contador de caracteres	“Characters X/54”
Caixa de seleção do ticker	“Ticker (Scrolling text)”
Seletor de direção	“Animation direction”
Botão de criar	“Create”
Botão de limpar	“Clear”

Botão do painel de banners

Estado	Rótulo
Fechado	“Create Banner” (com ícone +)
Aberto	“Close”

Referência de estilos de banner e terço inferior

Tipos de banner

Banner padrão

Banner ticker

Estrutura de dados do banner