交互式色板 interactive-swatches
如果在配置中将交互式数据传递给查看器，则交互式样本面板会显示在视频内容旁边。 它由顶部的横幅组成，用于呈现“单击查看”等文本、由一个或多个交互式样本组成的列和两个滚动按钮（仅在桌面系统上可用）。
在桌面系统和触控设备上，交互色板以横向方向在视频内容的右侧垂直呈现。 在纵向的触控设备上，它们以水平样本行的形式显示在查看器底部。
以下CSS类选择器控制交互式样本面板的位置和方向：
.s7interactivevideoviewer .s7interactiveswatches
交互式样本的CSS属性 css-properties-of-the-interactive-swatches
交互式样本面板的运行时位置和方向由上述CSS属性组合定义，如下所示：
- 要在查看器底部水平呈现交互式色板，请将高度设置为绝对像素值；将左右方向设置为0像素；将宽度方向设置为width方向，将右方向设置为top方向设置为auto方向。
- 要垂直渲染交互式样本到视频内容的右侧，请将宽度设置为绝对像素；将右和上设置为0像素；将高度设置为“左”，将下设置为“自动”。
可以使用此样式的CSS标记来实现交互式样本面板的自适应放置。
示例 example
将交互式样本面板设置为在触控设备上以横向在查看器底部水平渲染。 此外，在所有其他情况下，要垂直显示在视频内容的右侧，请执行以下操作：
.s7interactivevideoviewer.s7touchinput.s7device_landscape .s7interactiveswatches,
.s7interactivevideoviewer.s7mouseinput .s7interactiveswatches {
width:120px;
height:auto;
right:0px;
top:0px;
left:auto;
bottom:auto;
}
.s7interactivevideoviewer.s7touchinput.s7device_portrait .s7interactiveswatches {
width:auto;
height:136px;
right:auto;
top:auto;
left:0px;
bottom:0px;
}
横幅的大小和位置由交互式样本组件根据使用CSS应用的其他样式进行管理，并且无法显式设置。
以下CSS类选择器控制横幅面板的外观：
.s7interactivevideoviewer .s7interactiveswatches .s7banner
横幅面板的CSS属性 css-properties-of-the-banner-panel
可以对横幅工具提示进行本地化。 有关详细信息，请参阅用户界面元素的本地化。
示例 section-e8caea0a303c425a8a637c2a47c06355
要设置具有深灰色背景、浅灰色两个像素边框和白色文本水平居中的横幅，请执行以下操作：
.s7interactivevideoviewer .s7interactiveswatches .s7banner {
background-color: #222222;
border-bottom: 2px solid #444444;
color: #ffffff;
text-align: center;
}
以下CSS类选择器控制样本的外观：
.s7interactivevideoviewer .s7interactiveswatches .s7swatches
样本区域的CSS属性 css-properties-of-the-swatches-area
示例 section-9cadd62a09fd44a280f55ff42437e416
要设置具有深灰色背景的色板区域：
.s7interactivevideoviewer .s7interactiveswatches .s7swatches {
background-color: #222222;
}
以下CSS类选择器控制样本缩略图之间的间距：
.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumbcell
样本缩略图间距的CSS属性 css-properties-of-the-swatches-thumbnail-spacing
示例 section-39fb270b7e494a9d99e6e8f6890ec53c
要将垂直间距设置为10像素，请执行以下操作：
.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumbcell {
margin: 5px;
}
以下CSS类选择器控制各个缩略图的外观：
.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumb
单个缩略图外观的CSS属性 css-properties-of-the-appearance-of-individual-thumbnails
state属性选择器，您可以使用它来将不同的外观应用于不同的缩略图状态。 特别是，state="selected"对应于当前所选图像的缩略图；state="default"对应于其余缩略图；state="over"用于鼠标悬停操作。示例 section-69fec189ffaa440b97b6b846c320b75b
要设置100 x 75像素的缩略图，请执行以下操作：
.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumb {
width:100px;
height:75px;
}
以下CSS类选择器控制缩略图标签的外观：
.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7label
缩略图标签外观的CSS属性 css-properties-of-the-appearance-of-the-thumbnail-label
示例 section-eb141eb6c1154183baa69796edb90536
要设置标签以使用左对齐、白色、12像素、Helvetica®字体和下边框，请执行以下操作：
.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7label {
border-bottom: 1px solid #e9e9e9;
text-align: left;
color: #ffffff;
font-family: Helvetica,sans-serif;
font-size: 12px;
}
以下CSS类选择器控制上下滚动按钮的外观：
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton
.s7interactivevideoviewer .s7interactiveswatches .s7scrolldownbutton
无法使用CSS top、left、bottom和right属性来定位滚动按钮；相反，查看器逻辑会自动定位它们。
上下滚动按钮外观的CSS属性 css-properties-of-the-appearance-of-the-up-and-down-scroll-buttons
state属性选择器，您可以使用它来将不同的外观应用于按钮状态：“up”、“down”、“over”和“disabled”。可以本地化按钮工具提示。 有关详细信息，请参阅用户界面元素的本地化。
示例 section-e6ce4fa084b84288bc7583342b2c510c
要设置60 x 36像素的向上滚动按钮，请针对每种状态使用不同的图稿，并从组件的Sprite图像中获得该图稿：
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton {
background-size: 120px;
width: 60px;
height: 36px;
}
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton[state] {
background-image: url(images/v2/InteractiveSwatches_light_sprite.png);
}
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton[state='up'] { background-position: -60px -684px; }
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton[state='over'] { background-position: -0px -684px; }
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton[state='down'] { background-position: -60px -648px; }
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton[state='disabled'] { background-position: -0px -648px; }