主色票

主色票由一列縮圖影像組成，左側和右側有選用的捲動按鈕。 如果所有縮圖都無法符合容器的寬度，捲動按鈕只會顯示在案頭上。 在行動裝置上，或如果縮圖可符合容器寬度，則不會顯示捲動按鈕。

色票容器的外觀由CSS類別選擇器控制：

.s7mixedmediaviewer .s7swatches

色票的CSS屬性

示例——設定高度為100像素的色板。

.s7mixedmediviewer .s7swatches { 
 height: 100px;  
}

使用下列CSS類別選擇器控制色票縮圖之間的間距：

.s7mixedmediaviewer .s7swatches .s7thumbcell

範例

將間距設定為垂直和水準10個像素。

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

個別縮圖的外觀由下列CSS類別選擇器控制：

.s7mixedmediaviewer .s7swatches .s7thumb

範例——若要設定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屬性來定位捲動按鈕。 檢視器邏輯會自動將它們定位。

按鈕工具提示可以本地化。 如需詳細資訊，請參閱使用者介面元素的本地化。

範例——設定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); 
}