Amostras de cores

Última atualização em 2023-11-03
  • Criado para:
  • Developer
    User

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.

OBSERVAÇÃO

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 .

OBSERVAÇÃO

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);
}

Nesta página