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 : configurer des échantillons d’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 l’espacement sur dix pixels à la fois verticalement et horizontalement.

.s7mixedmediaviewer .s7swatches .s7thumbcell {
 margin: 5px;
}

L’apparence de la miniature individuelle est contrôlée par le sélecteur de classe CSS suivant :

.s7mixedmediaviewer .s7swatches .s7thumb

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 ressource s’affiche sous la forme d’une icône superposée à une 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 séries d’échantillons), spinset (pour les visionneuses à 360°) et video (pour les vidéos uniques ou les visionneuses de vidéos adaptatives).

Exemple : pour configurer le recouvrement d’icônes pour les visionneuses à 360°, les séries 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’apparence des boutons de défilement gauche et droit est contrôlée par les sélecteurs de classe CSS suivants :

.s7mixedmediaviewer .s7swatches .s7scrollleftbutton

.s7mixedmediaviewer .s7swatches .s7scrollrightbutton

Il est impossible de positionner les boutons de défilement à l’aide de CSS top, left, bottomet right des propriétés. Au lieu de cela, la logique de la visionneuse les positionne automatiquement.

Les info-bulles des boutons peuvent être localisées. Pour plus d’informations, voir Localisation des éléments de l’interface utilisateur.

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