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. |
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 . |
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 arte-final 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);
}