Amostras de cores color-swatches

As amostras de cores consistem em uma linha de imagens em miniatura com botões de rolagem opcionais no lado esquerdo e direito. As amostras de cores só estarão visíveis na área de trabalho se nenhuma miniatura couber na largura do contêiner. Em dispositivos móveis, ou se as miniaturas puderem se ajustar à largura do contêiner, os botões de rolagem não serão exibidos.

A aparência do contêiner de amostras é controlada com o seletor de classe CSS:

.s7mixedmediaviewer .s7colorswatches .s7swatches

Propriedades CSS das amostras de cores

largura
A largura das amostras.
altura
A altura das amostras.
bottom
O deslocamento das amostras verticais em relação ao contêiner do visualizador.

Exemplo - para configurar amostras com uma altura de 100 pixels.

.s7mixedmediviewer .s7colorswatches .s7swatches {
 height: 100px;
}

O espaçamento entre as miniaturas de amostra é controlado com o seguinte seletor de classe CSS:

.s7mixedmediaviewer .s7colorswatches .s7swatches .s7thumbcell

Propriedade CSS
Descrição
margem
O tamanho da margem horizontal e vertical ao redor de cada miniatura. O espaçamento real da miniatura é igual à soma das margens esquerda e direita definidas para .s7thumbcell .

Exemplo

Para definir o espaçamento como dez pixels, vertical e horizontalmente.

.s7mixedmediaviewer .s7colorswatches .s7swatches .s7thumbcell {
 margin: 5px;
}

A aparência da miniatura individual é controlada com o seguinte seletor de classe CSS:

.s7mixedmediaviewer .s7colorswatches .s7swatches .s7thumb

Propriedade CSS
Descrição
largura
Largura da miniatura.
altura
Altura da miniatura.
borda
Borda da miniatura.
NOTE
A miniatura suporta o state seletor de atributos, que pode ser usado para aplicar capas diferentes a estados de miniatura diferentes. Em especial, state="selected" corresponde à miniatura da imagem que está sendo exibida na exibição principal, state="default" corresponde ao restante das miniaturas e state="over" é usado ao passar o mouse.

Exemplo - para configurar miniaturas com 56 x 56 pixels, tem uma borda padrão cinza-claro e uma borda selecionada cinza-escuro.

.s7mixedmediaviewer .s7colorswatches .s7swatches .s7thumb {
 width: 56px;
 height: 56px;
}
.s7mixedmediaviewer .s7colorswatches .s7swatches .s7thumb[state="default"] {
 border: 1px solid #dddddd;
}
.s7mixedviewer .s7colorswatches .s7swatches .s7thumb[state="selected"] {
 border: 1px solid #666666;
}

A aparência dos botões de rolagem para a esquerda e para a direita é controlada com os seguintes seletores de classe CSS:

.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollleftbutton

.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollrightbutton

Não é possível posicionar botões de rolagem usando CSS top, left, bottom, e right propriedades. Em vez disso, a lógica do visualizador as posiciona automaticamente.

Propriedade CSS
Descrição
largura
Largura do botão de rolagem.
altura
Altura do botão de rolagem.
background-image
A imagem exibida para um determinado estado de botão.
background-position

Posicionar dentro da imagem de arte-final, se as imagens CSS forem usadas.

Consulte Sprites CSS.

NOTE
Esse botão oferece suporte ao state seletor de atributo, que pode ser usado para aplicar capas diferentes a estados de botão diferentes: up, down, over, e disabled.

Exemplo - para configurar botões de rolagem com 56 x 56 pixels e que tenham um trabalho artístico diferente para cada estado.

.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollleftbutton {
 background-size: auto;
 width: 56px;
 height: 56px;
}
.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollleftbutton[state="up"]{
background-image:url(images/v2/ScrollLeftButton_up.png);
}
.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollleftbutton[state="over"]{
 background-image:url(images/v2/ScrollLeftButton_over.png);
}
.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollleftbutton[state="down"]{
 background-image:url(images/v2/ScrollLeftButton_down.png);
}
.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollleftbutton[state="disabled"]{
 background-image:url(images/v2/ScrollLeftButton_disabled.png);
}
.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollrightbutton {
 background-size: auto;
 width: 56px;
 height: 56px;
}
.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollrightbutton[state="up"]{
background-image:url(images/v2/ScrollRightButton_up.png);
}
.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollrightbutton[state="over"]{
 background-image:url(images/v2/ScrollRightButton_over.png);
}
.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollrightbutton[state="down"]{
 background-image:url(images/v2/ScrollRightButton_down.png);
}
.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollrightbutton[state="disabled"]{
 background-image:url(images/v2/ScrollRightButton_disabled.png);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8