色票

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

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

.s7mixedmediaviewer .s7colorswatches .s7swatches

色票的CSS屬性

width

色票的寬度。

height

色票的高度。

底部

垂直色票相對於檢視器容器偏移。

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

.s7mixedmediviewer .s7colorswatches .s7swatches { 
 height: 100px;  
}

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

.s7mixedmediaviewer .s7colorswatches .s7swatches .s7thumbcell

CSS屬性

說明

margin

每個縮圖周圍的水準和垂直邊界大小。 實際縮圖間距等於 .s7thumbcell 設定的左右邊界總和。

範例

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

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

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

.s7mixedmediaviewer .s7colorswatches .s7swatches .s7thumb

CSS屬性

說明

寬度

縮圖寬度。

高度

縮圖的高度。

border

縮圖邊框。

注意

縮圖支援state屬性選擇器,可用來將不同的外觀套用至不同的縮圖狀態。 尤其是,state="selected"對應於主視圖中當前顯示的影像的縮略圖,state="default"對應於其餘的縮略圖,而state="over"用於滑鼠懸停。

範例——若要設定56 x 56像素的縮圖,請使用淺灰色預設邊框和深灰色選取的邊框。

.s7mixedmediaviewer .s7colorswatches .s7swatches .s7thumb { 
 width: 56px; 
 height: 56px;  
} 
.s7mixedmediaviewer .s7colorswatches .s7swatches .s7thumb[state="default"] { 
 border: 1px solid #dddddd; 
} 
.s7mixedviewer .s7colorswatches .s7swatches .s7thumb[state="selected"] { 
 border: 1px solid #666666; 
}

左和右捲動按鈕的外觀由下列CSS類別選擇器控制:

.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollleftbutton

.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollrightbutton

無法使用CSS topleftbottomright屬性來定位捲動按鈕。 檢視器邏輯會自動將它們定位。

CSS屬性

說明

寬度

捲動按鈕的寬度。

高度

捲動按鈕的高度。

背景影像

為指定按鈕狀態顯示的影像。

背景位置

如果使用CSS精靈,請放在圖稿精靈內。

請參閱 CSS精靈

注意

此按鈕支援state屬性選擇器,可用來將不同的外觀套用至不同的按鈕狀態:updownoverdisabled

範例——設定56 x 56像素且每種狀態有不同圖稿的捲動按鈕。

.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollleftbutton { 
 background-size: auto; 
 width: 56px; 
 height: 56px; 
} 
.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollleftbutton[state="up"]{ 
background-image:url(images/v2/ScrollLeftButton_up.png); 
} 
.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollleftbutton[state="over"]{ 
 background-image:url(images/v2/ScrollLeftButton_over.png); 
} 
.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollleftbutton[state="down"]{ 
 background-image:url(images/v2/ScrollLeftButton_down.png); 
} 
.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollleftbutton[state="disabled"]{ 
 background-image:url(images/v2/ScrollLeftButton_disabled.png); 
} 
.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollrightbutton { 
 background-size: auto; 
 width: 56px; 
 height: 56px; 
} 
.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollrightbutton[state="up"]{ 
background-image:url(images/v2/ScrollRightButton_up.png); 
} 
.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollrightbutton[state="over"]{ 
 background-image:url(images/v2/ScrollRightButton_over.png); 
} 
.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollrightbutton[state="down"]{ 
 background-image:url(images/v2/ScrollRightButton_down.png); 
} 
.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollrightbutton[state="disabled"]{ 
 background-image:url(images/v2/ScrollRightButton_disabled.png); 
}

本頁內容

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now