Painel de resultados da pesquisa

O painel de resultados da pesquisa consiste na caixa de entrada da pesquisa na parte superior e na área principal onde as mensagens informativas ou os resultados da pesquisa são exibidos.

Propriedades CSS da área principal do visualizador

Quando o painel está ativo, a interface do usuário do visualizador é coberta com um preenchimento semitransparente. A cor e a opacidade desse preenchimento são controladas pelo seguinte seletor de classe CSS:

.s7ecatalogviewer .s7searchpanel .s7backoverlay

O painel de resultados da pesquisa sempre ocupa toda a altura disponível do visualizador. No entanto, é possível configurar a largura. É possível definir a largura como um valor absoluto de pixel, que é uma configuração padrão para pontos de interrupção de médio e grande porte. Ou você pode definir a largura como 100% para fazer com que o painel de resultados de pesquisa ocupe toda a área do visualizador. A largura do painel é controlada pelo seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7searchpanel .s7searchresultspace

Propriedade CSS do espaço do resultado da pesquisa

Exemplo - para configurar um painel de resultados de pesquisa de 250 pixels em pontos de interrupção de tamanho grande e médio e usar um painel de tamanho completo em um ponto de interrupção de tamanho pequeno:

.s7ecatalogsearchviewer.s7size_large .s7searchpanel .s7searchresultspanel, .s7ecatalogsearchviewer.s7size_medium .s7searchpanel .s7searchresultspanel {
 width:250px;
}
.s7ecatalogsearchviewer.s7size_small .s7searchpanel .s7searchresultspanel {
 width:100%;
}

A parte superior do painel de resultados da pesquisa é dedicada à caixa de entrada da pesquisa. O preenchimento nas laterais da caixa de entrada é controlado pelo seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7searchpanel .s7searchinputcontainer

Propriedades CSS do contêiner de entrada de pesquisa

O campo de entrada de pesquisa é controlado pelo seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7searchpanel .s7searchinput

Propriedades CSS do campo de entrada de pesquisa

Exemplo - para configurar um campo de entrada de pesquisa com altura de 0 pixel e fonte de texto de 14 pixels:

.s7ecatalogsearchviewer .s7searchpanel .s7searchinput {
 padding-left:5px;
 height:30px;
 font-size:14px;
}

O botão de pesquisa à esquerda do campo de entrada de pesquisa no formulário do "vidro de aparência" por padrão é controlado pelo seguinte seletor de classe CSS:

 .s7ecatalogsearchviewer .s7searchpanel .s7searchinputbutton

Propriedades CSS do botão de entrada de pesquisa

Exemplo - Para configurar um botão de pesquisa com ícone de "vidro de aparência" de 26 x 26 pixels; 30 pixels de tamanho com uma borda de 1 pixel:

.s7ecatalogsearchviewer .s7searchpanel .s7searchinputbutton {
 width:30px;
 height:30px;
 background-size:26px 26px;
 background-image: url(images/v2/Search_form_field.png);
 font-size:14px;
 border: 1px solid #696969;
}

O painel de resultados da pesquisa pode exibir um prompt textual quando o recurso é chamado pela primeira vez. E também mostra uma mensagem quando a pesquisa de um usuário não retornou nenhum resultado. Em todos os casos, o texto aparece na parte principal do painel de resultados da pesquisa e é controlado pelo seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7searchpanel .s7searchinfo

Propriedades CSS das informações de pesquisa

O texto da mensagem pode ser localizado. Consulte Localização dos elementos da interface do usuário para obter mais informações.

Exemplo - Para configurar um painel de texto que use uma fonte cinza de 18 pixels:

.s7ecatalogsearchviewer .s7searchpanel .s7searchinfo {
 font-size: 18px;
 color: #696969;
}

Os resultados da pesquisa são renderizados como uma única coluna ou linha de miniaturas para páginas com ocorrências de pesquisa. O espaçamento entre as miniaturas dos resultados da pesquisa é controlado com o seguinte seletor de classe CSS:

.ecatalogsearchviewer .s7searchpanel .s7swatches .s7thumbcell

Propriedades CSS das células de miniatura

Exemplo - Para configurar um espaçamento de dez pixels:

.s7ecatalogsearchviewer .s7searchpanel .s7swatches .s7thumbcell {
 margin: 5px;
}

A aparência de miniaturas individuais é controlada com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7searchpanel .s7swatches .s7thumb

Propriedades CSS da miniatura

Exemplo - Para configurar miniaturas com 215 x 129 pixels, tenha uma borda padrão cinza-claro e uma borda cinza-escura selecionada:

.s7ecatalogsearchviewer .s7searchpanel .s7swatches .s7thumb {
 width: 215px;
 height: 129px;
}

A aparência do rótulo de miniatura é controlada com o seguinte seletor de classe CSS:

 .s7ecatalogsearchviewer
.s7searchpanel .s7swatches .s7label

Propriedades CSS do rótulo

Exemplo - Para configurar rótulos que usam fontes Helvetica® de 12 pixels, cinza:

.s7ecatalogsearchviewer .s7searchpanel .s7swatches .s7label {
 font-family: Helvetica,sans-serif;
 color: #4c4c4c;
 font-size: 12px;
}

Em sistemas que usam entrada de mouse, dois botões de rolagem são exibidos na parte inferior do painel de resultados da pesquisa para que o usuário role pelos resultados da pesquisa. A aparência dos botões de rolagem para cima e para baixo é controlada pelos seguintes seletores de classe CSS:

.s7ecatalogsearchviewer .s7searchpanel .s7scrollupbutton
.s7ecatalogsearchviewer .s7searchpanel .s7scrolldownbutton

Não é possível posicionar botões de rolagem usando propriedades CSS superior, esquerda, inferior e direita. Em vez disso, a lógica do visualizador os posiciona automaticamente.

Propriedades CSS dos botões de rolagem para cima e para baixo

As dicas de ferramentas do botão podem ser localizadas. Consulte Localização dos elementos da interface do usuário para obter mais informações.

Exemplo - Para configurar um botão de rolagem que tenha 125 x 35 pixels e tenha uma arte-final diferente para cada estado:

.s7ecatalogsearchviewer .s7searchpanel .s7scrollupbutton {
 width:125px;
 height:35px;
}
.s7ecatalogsearchviewer .s7searchpanel .s7scrollupbutton[state='up'] {
 background-image:url(images/sdk/searchpanel_scroll_up_up.png);
}
.s7ecatalogsearchviewer .s7searchpanel .s7scrollupbutton[state='over'] {
 background-image:url(images/sdk/searchpanel_scroll_up_over.png);
}
.s7ecatalogsearchviewer .s7searchpanel .s7scrollupbutton[state='down'] {
 background-image:url(images/sdk/searchpanel_scroll_up_down.png);
}
.s7ecatalogsearchviewer .s7searchpanel .s7scrollupbutton[state='disabled'] {
 background-image:url(images/sdk/searchpanel_scroll_up_disabled.png);
}
.s7ecatalogsearchviewer .s7searchpanel .s7scrolldownbutton {
 width:125px;
 height:35px;
}
.s7ecatalogsearchviewer .s7searchpanel .s7scrolldownbutton[state='up'] {
 background-image:url(images/sdk/searchpanel_scroll_down_up.png);
}
.s7ecatalogsearchviewer .s7searchpanel .s7scrolldownbutton[state='over'] {
 background-image:url(images/sdk/searchpanel_scroll_down_over.png);
}
.s7ecatalogsearchviewer .s7searchpanel .s7scrolldownbutton[state='down'] {
 background-image:url(images/sdk/searchpanel_scroll_down_down.png);
}
.s7ecatalogsearchviewer .s7searchpanel .s7scrolldownbutton[state='disabled'] {
 background-image:url(images/sdk/searchpanel_scroll_down_disabled.png);