Nuanciers principaux main-swatches
Les nuanciers principaux se composent d’une ligne de miniatures avec des boutons de défilement facultatifs sur les côtés gauche et droit. Les boutons de défilement ne sont visibles sur le bureau que si toutes les miniatures ne peuvent pas tenir dans la largeur du conteneur. Sur les appareils mobiles, ou si les miniatures peuvent tenir dans la largeur du conteneur, les boutons de défilement ne s’affichent pas.
L’aspect du conteneur d’échantillons est contrôlé avec le sélecteur de classe CSS :
.s7mixedmediaviewer .s7swatches
Propriétés CSS des échantillons
Exemple : pour configurer des échantillons avec une hauteur de 100 pixels.
.s7mixedmediviewer .s7swatches {
height: 100px;
}
L’espacement entre les miniatures d’échantillon est contrôlé avec le sélecteur de classe CSS suivant :
.s7mixedmediaviewer .s7swatches .s7thumbcell
Exemple
Pour définir un espacement de dix pixels verticalement et horizontalement.
.s7mixedmediaviewer .s7swatches .s7thumbcell {
margin: 5px;
}
L’aspect de la miniature individuelle est contrôlé par le sélecteur de classe CSS suivant :
.s7mixedmediaviewer .s7swatches .s7thumb
state, qui peut être utilisé pour appliquer différents habillages à différents états de miniature. En particulier, state="selected" correspond à la miniature de l’image actuellement affichée dans la vue principale, state="default" correspond au reste des miniatures et state="over" est utilisé lorsque vous pointez dessus avec la souris.Exemple : pour configurer des miniatures de 56 x 56 pixels, elles doivent avoir une bordure par défaut gris clair et une bordure sélectionnée gris foncé.
.s7mixedmediaviewer .s7swatches .s7thumb {
width: 56px;
height: 56px;
}
.s7mixedmediaviewer .s7swatches .s7thumb[state="default"] {
border: 1px solid #dddddd;
}
.s7mixedviewer .s7swatches .s7thumb[state="selected"] {
border: 1px solid #666666;
}
Le type de la ressource s’affiche sous la forme d’une icône superposée à l’image miniature et est contrôlé par le sélecteur de classe CSS suivant :
.s7mixedmediaviewer .s7swatches .s7thumb .s7thumboverlay
Le recouvrement prend en charge le sélecteur d’attributs type avec les valeurs possibles suivantes : image (pour les images uniques), swatchset (pour les visionneuses d’échantillons), spinset (pour les visionneuses à 360°) et video (pour les vidéos uniques ou les visionneuses de vidéos adaptatives).
Exemple - pour configurer les recouvrements d’icônes pour les visionneuses à 360°, les visionneuses d’échantillons et les vidéos :
.s7mixedmediaviewer .s7swatches .s7thumb .s7thumboverlay[type="swatchset"] {
background-image: url(images/v2/ThumbOverlaySwatchSet.png);
}
.s7mixedmediaviewer .s7swatches .s7thumb .s7thumboverlay[type="spinset"] {
background-image: url(images/v2/ThumbOverlaySpinSet.png);
}
.s7mixedmediaviewer .s7swatches .s7thumb .s7thumboverlay[type="video"] {
background-image: url(images/v2/ThumbOverlayVideo.png);
}
L’aspect des boutons de défilement gauche et droit est contrôlé à l’aide des sélecteurs de classe CSS suivants :
.s7mixedmediaviewer .s7swatches .s7scrollleftbutton
.s7mixedmediaviewer .s7swatches .s7scrollrightbutton
Il n’est pas possible de positionner des boutons de défilement à l’aide des propriétés CSS top, left, bottom et right. Au lieu de cela, la logique de la visionneuse les positionne automatiquement.
Positionnez à l’intérieur d’un sprite d’illustration si des sprites CSS sont utilisés.
Voir desSprites CSS.
state, qui peut être utilisé pour appliquer différents habillages à différents états de bouton : up, down, over et disabled.Les info-bulles des boutons peuvent être localisées. Voir Localisation des éléments de l’interface utilisateur pour plus d’informations.
Exemple : pour configurer des boutons de défilement de 56 x 56 pixels avec des illustrations différentes pour chaque état.
.s7mixedmediaviewer .s7swatches .s7scrollleftbutton {
background-size: auto;
width: 56px;
height: 56px;
}
.s7mixedmediaviewer .s7swatches .s7scrollleftbutton[state="up"]{
background-image:url(images/v2/ScrollLeftButton_up.png);
}
.s7mixedmediaviewer .s7swatches .s7scrollleftbutton[state="over"]{
background-image:url(images/v2/ScrollLeftButton_over.png);
}
.s7mixedmediaviewer .s7swatches .s7scrollleftbutton[state="down"]{
background-image:url(images/v2/ScrollLeftButton_down.png);
}
.s7mixedmediaviewer .s7swatches .s7scrollleftbutton[state="disabled"]{
background-image:url(images/v2/ScrollLeftButton_disabled.png);
}
.s7mixedmediaviewer .s7swatches .s7scrollrightbutton {
background-size: auto;
width: 56px;
height: 56px;
}
.s7mixedmediaviewer .s7swatches .s7scrollrightbutton[state="up"]{
background-image:url(images/v2/ScrollRightButton_up.png);
}
.s7mixedmediaviewer .s7swatches .s7scrollrightbutton[state="over"]{
background-image:url(images/v2/ScrollRightButton_over.png);
}
.s7mixedmediaviewer .s7swatches .s7scrollrightbutton[state="down"]{
background-image:url(images/v2/ScrollRightButton_down.png);
}
.s7mixedmediaviewer .s7swatches .s7scrollrightbutton[state="disabled"]{
background-image:url(images/v2/ScrollRightButton_disabled.png);
}