色板 color-swatches
颜色样本由一行缩略图图像组成,在左侧和右侧具有可选的滚动按钮。 仅当所有缩略图都不适合容器的宽度时,颜色样本才在桌面上可见。 在移动设备上,或者如果缩略图可以适合容器宽度,则不会显示滚动按钮。
样本容器的外观由CSS类选择器控制:
.s7mixedmediaviewer .s7colorswatches .s7swatches
颜色样本的 CSS属性
示例 — 设置高度为100像素的样本。
.s7mixedmediviewer .s7colorswatches .s7swatches {
height: 100px;
}
样本缩略图之间的间距由以下CSS类选择器控制:
.s7mixedmediaviewer .s7colorswatches .s7swatches .s7thumbcell
CSS属性
说明
边距
每个缩略图周围的水平和垂直边距的大小。 实际缩略图间距等于为 .s7缩略图设置的左右边距之和。
示例
将间距设置为垂直和水平十像素。
.s7mixedmediaviewer .s7colorswatches .s7swatches .s7thumbcell {
margin: 5px;
}
单个缩略图的外观可通过以下CSS类选择器进行控制:
.s7mixedmediaviewer .s7colorswatches .s7swatches .s7thumb
CSS属性
说明
宽度
缩略图的宽度。
高度
缩略图的高度。
边框
缩略图的边框。
NOTE
缩略图支持
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 sprite,则定位在图稿sprite中。
请参阅 CSS Sprite。
NOTE
此按钮支持
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);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8