顏色色板

顏色色板由一行縮覽圖影像組成，左側和右側帶有可選滾動按鈕。 僅當所有縮略圖都不能容納到容器的寬度中時，顏色色板才在案頭上可見。 在移動設備上，或如果縮覽圖可以容納在容器寬度中，則不顯示滾動按鈕。

使用CSS類選擇器控制色板容器的外觀：

.s7mixedmediaviewer .s7colorswatches .s7swatches

顏色色板的CSS屬性

width

色板的寬度。

height

色板的高度。

底部

垂直色板相對於查看器容器偏移。

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

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

使用以下CSS類選擇器控制色板縮略圖之間的間距：

.s7mixedmediaviewer .s7colorswatches .s7swatches .s7thumbcell

CSS屬性

說明

margin

每個縮覽圖周圍的水準和垂直邊距的大小。 實際縮略圖間距等於為設定的左邊距和右邊距的和 .s7拇指單元 。

範例

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

.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定位滾動按鈕 top。 left。 bottom, right 屬性。 相反，查看器邏輯自動定位它們。

CSS屬性

說明

寬度

滾動按鈕的寬度。

高度

滾動按鈕的高度。

背景影像

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

背景位置

如果使用CSS浮雕，則在圖稿浮雕內定位。

請參閱 CSS繁體 。

注意

此按鈕支援 state 屬性選擇器，可用於將不同外觀應用於不同的按鈕狀態： up。 down。 over, disabled。

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

本頁內容