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
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
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
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.
Posicionar dentro da imagem de arte-final, se as imagens CSS forem usadas.
Consulte Sprites CSS.
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);
}