顏色色板由一行縮覽圖影像組成,左側和右側帶有可選滾動按鈕。 僅當所有縮略圖都不能容納到容器的寬度中時,顏色色板才在案頭上可見。 在移動設備上,或如果縮覽圖可以容納在容器寬度中,則不顯示滾動按鈕。
使用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);
}