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

Propriedade CSS	Descrição
cor do fundo	Cor da sobreposição.
opacidade	Opacidade da cor.

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 tamanho médio e grande. 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

width

Largura do espaço do resultado da pesquisa.

Exemplo - para configurar um painel de resultados de pesquisa com largura 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

preenchimento

Preenchimento em torno da caixa de entrada.

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

.s7ecatalogsearchviewer .s7searchpanel .s7searchinput

Propriedades CSS do campo de entrada de pesquisa

altura	Altura do campo de entrada de pesquisa.
preenchimento à esquerda	O preenchimento interno entre os limites do campo de entrada e o texto de entrada.
border	Borda do campo de entrada de pesquisa.
margem	Margem do campo de entrada de pesquisa
tamanho da fonte	Tamanho da fonte do texto.

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

largura	Largura do botão de entrada de pesquisa.
altura	Altura do botão de entrada de pesquisa.
imagem de fundo	O URL para a imagem do ícone de "vidro de aparência".
tamanho do plano de fundo	O tamanho do ícone de "vidro de aparência".
border	Borda do botão de entrada de pesquisa.
margem	Margem 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. Também mostra ao usuário uma mensagem quando a pesquisa 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

color	Cor do texto.
família de fontes	Nome da fonte do texto.
alinhamento de fonte	Alinhamento horizontal do texto.
tamanho da fonte	Tamanho do texto da fonte.

OBSERVAÇÃO

Esse painel de texto oferece suporte ao seletor de atributos state, que pode ser usado para aplicar estilos diferentes a mensagens de texto diferentes. Em particular, state='prompt' corresponde ao prompt de texto mostrado quando o painel é chamado pela primeira vez; state='results' corresponde ao texto com informações sobre ocorrências de pesquisa; e state='no_results' corresponde ao texto mostrado quando a consulta de pesquisa não retornou nenhum resultado.

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

margem

O tamanho da margem vertical em torno de cada miniatura. O espaçamento real da miniatura é igual à soma das margens superior e inferior definidas para .s7thumbcell .

Exemplo - para configurar um espaçamento de 10 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

largura	Largura da miniatura.
altura	Altura da miniatura.
border	Borda 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

color	Cor do texto.
família de fontes	Nome da fonte do texto.
tamanho da fonte	Tamanho da fonte do texto.

Exemplo - para configurar rótulos que usam fonte Helvetica, cinza e 12 pixels:

.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

largura	Largura do botão de rolagem.
altura	Altura do botão de rolagem.
imagem de fundo	A imagem exibida para um determinado estado de botão.
posição de fundo	Posição dentro da estrutura de arte, se os sprites CSS forem usados. Consulte também Sprites CSS .

OBSERVAÇÃO

Esse botão suporta o seletor de atributos state, que pode ser usado para aplicar skins diferentes aos estados dos botões "up", "down", "over" e "disabled".

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 para cima que tenha 125 x 35 pixels e 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);