メインスウォッチ main-swatches
メインスウォッチは、左側と右側にオプションのスクロールボタンを備えたサムネイル画像の行で構成されます。 スクロール ボタンは、すべてのサムネールがコンテナの幅に収まらない場合にのみ、デスクトップに表示されます。 モバイルデバイスでは、サムネールがコンテナ幅に収まる場合、スクロールボタンは表示されません。
スウォッチコンテナの外観は、CSS クラスセレクターで制御されます。
.s7mixedmediaviewer .s7swatches
スウォッチのCSS プロパティ
例 – 100 ピクセルの高さのスウォッチを設定します。
.s7mixedmediviewer .s7swatches {
height: 100px;
}
スウォッチのサムネール間の間隔は、次のCSS クラスセレクターで制御されます。
.s7mixedmediaviewer .s7swatches .s7thumbcell
例
垂直方向および水平方向の間隔を10 ピクセルに設定する。
.s7mixedmediaviewer .s7swatches .s7thumbcell {
margin: 5px;
}
個々のサムネールの外観は、次のCSS クラスセレクターで制御されます。
.s7mixedmediaviewer .s7swatches .s7thumb
state属性セレクターをサポートしています。このセレクターを使用すると、異なるサムネール状態に異なるスキンを適用できます。 特に、state="selected"は現在メインビューに表示されている画像のサムネールに対応し、state="default"は残りのサムネールに対応し、state="over"はマウスオーバーで使用されます。例 – 56 x 56 ピクセルのサムネールを設定するには、明るいグレーのデフォルトの境界線と、濃いグレーの選択した境界線があります。
.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;
}
アセットのタイプは、サムネール画像の上にアイコンを重ねて表示され、次のCSS クラスセレクターで制御されます。
.s7mixedmediaviewer .s7swatches .s7thumb .s7thumboverlay
オーバーレイは、次の可能な値でtype属性セレクターをサポートしています：image （単一の画像の場合）、swatchset （スウォッチセットの場合）、spinset （スピンセットの場合）、video （単一ビデオまたはアダプティブビデオセットの場合）。
例 – スピンセット、スウォッチセット、ビデオのアイコンオーバーレイを設定するには：
.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);
}
左右のスクロールボタンの外観は、次のCSS クラスセレクターで制御されます。
.s7mixedmediaviewer .s7swatches .s7scrollleftbutton
.s7mixedmediaviewer .s7swatches .s7scrollrightbutton
CSS top、left、bottom、rightのプロパティを使用してスクロールボタンを配置することはできません。 代わりに、ビューアリジックによって自動的に配置されます。
CSS スプライトを使用する場合は、アートワークスプライト内に配置します。
CSS スプライトを参照してください。
state属性セレクターをサポートしています。このセレクターを使用すると、異なるスキンを異なるボタンの状態（up、down、over、およびdisabled）に適用できます。ボタンツールのヒントはローカライズできます。 詳しくは、 ユーザーインターフェイス要素のローカライゼーション を参照してください。
例 – 56 x 56 ピクセルで、状態ごとに異なるアートワークを持つスクロールボタンを設定します。
.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);
}