Personalização do arquivo threeds.css - Folhas de Estilo em Cascata (CSS)

O modal exibido no desafio de autenticação 3DS 2.0 é customizável. Para personalizá-lo, é possível substituir o arquivo threeds.css por outro, contanto que o novo arquivo siga a estrutura de código fornecida abaixo. Certifique-se de preservar os mesmos nomes de classe e a lógica de estilo para assegurar o correto funcionamento do modal.

Apresentação do Modal

Na autenticação 3DS 2.0, as dimensões do desafio são padronizadas através de um número inteiro fornecido no campo challengeWindowSize. É por meio desse parâmetro que o tamanho do conteúdo no desafio é replicado. Este campo é um parâmetro na chamada da função esitefDoPayment no JavaScript do Carat. Se nenhum valor for fornecido, automaticamente será configurado um valor padrão com base no tamanho da tela do comprador. A seguir estão os valores possíveis para utilização:

valor	dimensões
`1`	250 x 400
`2`	390 x 400
`3`	500 x 600
`4`	600 x 400

Arquivo threeds.css#

Modal padrão

.modal-challenge {
  display: block;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateY(-100%);
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  border-radius: 10px;
  opacity: 0;
  transition: transform 0.3s ease-out, opacity 0.6s ease;
}

Propriedade	Valor	Descrição
`display`	block	Define o modal para ser exibido como um bloco.
`position`	fixed	Define a posição fixa do modal na tela.
`top`	50%	Posiciona o modal no centro da tela.
`left`	50%	Posiciona o modal no centro da tela.
`transform`	translate(-50%, -50%) translateY(-100%)	Move o modal para cima (fora da tela) usando transformações.
`background-color`	#fff	Define a cor de fundo do modal como branco.
`border`	1px solid #ccc	Adiciona uma borda sólida de 1 pixel com cor cinza claro.
`box-shadow`	0 4px 8px rgba(0, 0, 0, 0.1)	Adiciona uma sombra ao redor do modal para dar uma sensação de elevação.
`z-index`	1000	Define a ordem de empilhamento do modal (quão acima ele está em relação a outros elementos).
`border-radius`	10px	Adiciona cantos arredondados ao modal.
`opacity`	0	Inicialmente, o modal é transparente.
`transition`	transform 0.3s ease-out, opacity 0.6s ease	Adiciona uma transição suave para transformações e opacidade

Abertura do modal

.modal-challenge.open {
  transform: translate(-50%, -50%) translateY(0);
  opacity: 1;
}

Propriedade	Valor	Descrição
`transform`	translate(-50%, -50%) translateY(0)	Move o modal para a posição central da tela.
`opacity`	1	Torna o modal completamente opaco quando aberto.

Sobreposição (inicialmente transparente)

.overlay-challenge {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  z-index: 999;
}

Propriedade	Valor	Descrição
`display`	block	Torna a sobreposição visível.
`position`	fixed	Define a posição fixa da sobreposição
`top`	0	Sobreposição no topo da tela.
`left`	0	Sobreposição à esquerda da tela.
`width`	100%	Define a largura da sobreposição para cobrir a tela inteira.
`height`	100%	Define a altura da sobreposição para cobrir a tela inteira.
`background-color`	rgba(0, 0, 0, 0)	Inicialmente, a sobreposição é transparente.
`z-index`	999	Define a ordem de empilhamento da sobreposição.

Adicionando à sobreposição quando o modal estiver aberto

.overlay-challenge.open {
  background-color: rgba(0, 0, 0, 0.3);
}

Propriedade	Valor	Descrição
`background-color`	rgba(0, 0, 0, 0.3)	Torna a sobreposição semi-transparente quando o modal está aberto.

Home

Arquivo threeds.css#