主色票由一列縮圖影像組成,左側和右側有選用的捲動按鈕。 如果所有縮圖都無法符合容器的寬度,捲動按鈕只會顯示在案頭上。 在行動裝置上,或如果縮圖可符合容器寬度,則不會顯示捲動按鈕。
色票容器的外觀由CSS類別選擇器控制:
.s7mixedmediaviewer .s7swatches
色票的CSS屬性
height |
色票的高度。 |
底部 |
垂直色票相對於檢視器容器偏移。 |
示例——設定高度為100像素的色板。
.s7mixedmediviewer .s7swatches {
height: 100px;
}
使用下列CSS類別選擇器控制色票縮圖之間的間距:
.s7mixedmediaviewer .s7swatches .s7thumbcell
CSS屬性 |
說明 |
---|---|
margin |
每個縮圖周圍的水準和垂直邊界大小。 實際縮圖間距等於 .s7thumbcell 設定的左右邊界總和。 |
範例
將間距設定為垂直和水準10個像素。
.s7mixedmediaviewer .s7swatches .s7thumbcell {
margin: 5px;
}
個別縮圖的外觀由下列CSS類別選擇器控制:
.s7mixedmediaviewer .s7swatches .s7thumb
CSS屬性 |
說明 |
---|---|
width |
縮圖寬度。 |
高度 |
縮圖的高度。 |
border |
縮圖邊框。 |
縮圖支援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
CSS屬性 |
說明 |
---|---|
寬度 |
圖示覆蓋的寬度。 |
高度 |
圖示覆蓋的高度。 |
覆蓋支援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精靈,請放在圖稿精靈內。 請參閱 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);
}