Las muestras de color constan de una fila de imágenes en miniatura con botones de desplazamiento opcionales en el lado izquierdo y derecho. Las muestras de color solo están visibles en el escritorio si todas las miniaturas no se ajustan al ancho del contenedor. En dispositivos móviles, o si las miniaturas pueden ajustarse al ancho del contenedor, no se muestran los botones de desplazamiento.
El aspecto del contenedor de muestras se controla con el selector de clase CSS:
.s7mixedmediaviewer .s7colorswatches .s7swatches
Propiedades CSS de las muestras de color
width |
Ancho de las muestras. |
height |
Altura de las muestras. |
parte inferior |
Las muestras verticales se desplazan en relación con el contenedor del visor. |
Ejemplo: para configurar muestras con una altura de 100 píxeles.
.s7mixedmediviewer .s7colorswatches .s7swatches {
height: 100px;
}
El espaciado entre las miniaturas de muestra se controla con el siguiente selector de clase CSS:
.s7mixedmediaviewer .s7colorswatches .s7swatches .s7thumbcell
CSS, propiedad |
Descripción |
---|---|
margin |
El tamaño de los márgenes horizontal y vertical alrededor de cada miniatura. El espaciado en miniatura real es igual a la suma de los márgenes izquierdo y derecho establecidos para .s7thumbcell . |
Ejemplo
Configurar el espaciado en diez píxeles tanto vertical como horizontalmente.
.s7mixedmediaviewer .s7colorswatches .s7swatches .s7thumbcell {
margin: 5px;
}
El aspecto de la miniatura individual se controla con el siguiente selector de clase CSS:
.s7mixedmediaviewer .s7colorswatches .s7swatches .s7thumb
CSS, propiedad |
Descripción |
---|---|
width |
Anchura de la miniatura. |
height |
Altura de la miniatura. |
borde |
Borde de la miniatura. |
La miniatura es compatible con el state
selector de atributos, que se puede utilizar para aplicar diferentes aspectos a distintos estados de miniaturas. En particular, state="selected"
corresponde a la miniatura de la imagen que se muestra actualmente en la vista principal, state="default"
corresponde al resto de miniaturas y state="over"
se utiliza al pasar el ratón por encima.
Ejemplo: para configurar miniaturas de 56 x 56 píxeles, tenga un borde predeterminado de gris claro y un borde seleccionado de gris oscuro.
.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;
}
El aspecto de los botones de desplazamiento izquierdo y derecho se controla con los siguientes selectores de clase CSS:
.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollleftbutton
.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollrightbutton
No es posible colocar botones de desplazamiento mediante CSS top
, left
, bottom
y right
propiedades. En su lugar, la lógica del visor los coloca automáticamente.
CSS, propiedad |
Descripción |
---|---|
width |
Anchura del botón de desplazamiento. |
height |
Altura del botón de desplazamiento. |
imagen de fondo |
Imagen que se muestra para un estado de botón determinado. |
posición de fondo |
Sitúe dentro de la ilustración sprite, si se utilizan sprites CSS. Consulte Sprites CSS . |
Este botón admite la variable state
selector de atributos, que se puede utilizar para aplicar diferentes aspectos a distintos estados de botones: up
, down
, over
y disabled
.
Ejemplo: para configurar botones de desplazamiento de 56 x 56 píxeles y que tengan distintas ilustraciones 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);
}