电子邮件共享

电子邮件共享工具包含一个添加到“社交”共享面板的按钮，以及激活该工具时显示的模式对话框。 按钮的位置完全由社交共享工具管理。

电子邮件共享按钮的外观由以下CSS类选择器控制：

.s7smartcropvideoviewer .s7emailshare

电子邮件共享工具的CSS属性

width	按钮的宽度。
height	按钮的高度。
background-image	针对给定按钮状态显示的图像。
background-position	如果使用CSS sprite，则定位在图稿sprite内。 参见 CSS脚本 .

此按钮支持 state 属性选择器，可用于将不同的外观应用于不同的按钮状态。

可以通过设置从Social共享面板中删除按钮 display:none CSS属性的CSS类。

可对按钮工具提示进行本地化。 参见 用户界面元素的本地化 了解更多信息。

示例 — 设置一个28 x 28像素的电子邮件共享按钮，该按钮为四种不同的按钮状态中的每种状态显示不同的图像。

.s7smartcropvideoviewer .s7emailshare {
 width:28px;
 height:28px;
}
.s7smartcropvideoviewer .s7emailshare[state='up'] {
background-image:url(images/v2/EmailShare_dark_up.png);
}
.s7smartcropvideoviewer .s7emailshare[state='over'] {
background-image:url(images/v2/EmailShare_dark_over.png);
}
.s7smartcropvideoviewer .s7emailshare[state='down'] {
background-image:url(images/v2/EmailShare_dark_down.png);
}
.s7smartcropvideoviewer .s7emailshare[state='disabled'] {
background-image:url(images/v2/EmailShare_dark_disabled.png);
}

使用以下CSS类选择器控制对话框处于活动状态时覆盖网页的背景叠加：

.s7smartcropvideoviewer .s7emaildialog .s7backoverlay

背面叠加的CSS属性

不透明度	背景叠加不透明度。
background-color	背景叠加颜色。

示例 — 要将背景叠加设置为具有70%不透明度的灰色，请执行以下操作：

.s7smartcropvideoviewer .s7emaildialog .s7backoverlay {
 opacity:0.7;
 background-color:#222222;
}

默认情况下，模式对话框会以桌面系统屏幕的中心位置显示，并在触控设备上显示整个网页区域。 在所有情况下，对话框的位置和大小都由组件管理。 该对话框由以下CSS类选择器控制：

.s7smartcropvideoviewer .s7emaildialog .s7dialog

对话框的CSS属性

border-radius	对话框边框半径（如果对话框未占用整个浏览器窗口）；
background-color	对话框背景颜色；
width	应取消设置或设置为100%，在这种情况下，对话框会占用整个浏览器窗口（触控设备首选此模式）；
height	应取消设置或设置为100%，在这种情况下，对话框会占用整个浏览器窗口（触控设备首选此模式）。

示例 — 设置对话框以使用整个浏览器窗口并在触控设备上使用白色背景：

.s7smartcropvideoviewer .s7touchinput .s7emaildialog .s7dialog {
 width:100%;
 height:100%;
background-color: #ffffff;
}

对话框标题由图标、标题文本和关闭按钮组成。 标头容器由以下CSS类选择器控制

.s7smartcropvideoviewer .s7emaildialog .s7dialogheader

对话框标题的CSS属性

填充	标头内容的内部填充。

图标和标题文本将封装在一个由控制的额外容器中

.s7smartcropvideoviewer .s7emaildialog .s7dialogheader .s7dialogline

对话框行的CSS属性

填充	标题图标和标题的内边距

标头图标由以下CSS类选择器控制

.s7smartcropvideoviewer .s7emaildialog .s7dialogheadericon

对话框标题图标的CSS属性

width	图标宽度。
height	图标高度。
background-image	图标图像。
background-position	如果使用CSS sprite，则定位在图稿sprite内。 参见 CSS脚本 .

标头标题由以下CSS类选择器控制：

.s7smartcropvideoviewer .s7emaildialog .s7dialogheadertext

对话框标题文本的CSS属性

font-weight	字体粗细。
font-size	字体高度。
font-family	字体系列。
填充	内部文本填充。

“关闭”按钮由以下CSS类选择器控制：

.s7smartcropvideoviewer .s7emaildialog .s7closebutton

关闭按钮的​CSS属性

顶端	相对于标题容器的垂直按钮位置。
右	相对于标题容器的水平按钮位置。
width	按钮宽度。
height	按钮高度。
填充	按钮的内边距。
background-image	每个状态的按钮图像。
background-position	如果使用CSS sprite，则定位在图稿sprite内。 参见 CSS脚本 .

可以本地化“关闭”按钮工具提示和对话框标题。 参见 用户界面元素的本地化 了解更多信息。

示例 — 要设置带内边距的对话框标题，请设置24 x 17像素图标和粗体16点标题。 最后，一个28 x 28像素的“关闭”按钮，位于对话框容器顶部的2个像素和右侧的2个像素：

.s7smartcropvideoviewer .s7emaildialog .s7dialogheader {
 padding: 10px;
}
.s7smartcropvideoviewer .s7emaildialog .s7dialogheader .s7dialogline {
 padding: 10px 10px 2px;
}
.s7smartcropvideoviewer .s7emaildialog .s7dialogheadericon {
    background-image: url("images/sdk/dlgemail_cap.png");
    height: 17px;
    width: 24px;
}
.s7smartcropvideoviewer .s7emaildialog .s7dialogheadertext {
    font-size: 16pt;
    font-weight: bold;
    padding-left: 16px;
}
.s7smartcropvideoviewer .s7emaildialog .s7closebutton {
 top:2px;
 right:2px;
 padding:8px;
 width:28px;
 height:28px;
}
.s7smartcropvideoviewer .s7emaildialog .s7closebutton[state='up'] {
 background-image:url(images/sdk/close_up.png);
}
.s7smartcropvideoviewer .s7emaildialog .s7closebutton[state='over'] {
 background-image:url(images/sdk/close_over.png);
}
.s7smartcropvideoviewer .s7emaildialog .s7closebutton[state='down'] {
 background-image:url(images/sdk/close_down.png);
}
.s7smartcropvideoviewer .s7emaildialog .s7closebutton[state='disabled'] {
 background-image:url(images/sdk/close_disabled.png);
}

对话框页脚包含“取消”和“发送电子邮件”按钮。 页脚容器由以下CSS类选择器控制：

.s7smartcropvideoviewer .s7emaildialog .s7dialogfooter

对话框页脚的CSS属性

边界	可用于在视觉上分隔页脚和对话框其余部分的边框。

页脚具有保留两个按钮的内部容器。 它通过以下CSS类选择器进行控制：

.s7smartcropvideoviewer .s7emaildialog .s7dialogbuttoncontainer

对话框按钮容器的CSS属性

填充	页脚和按钮之间的内边距。

“取消”按钮由以下CSS类选择器控制：

.s7smartcropvideoviewer .s7emaildialog .s7dialogcancelbutton

对话框取消按钮的CSS属性

width	按钮宽度。
height	按钮高度。
color	每个状态的按钮文本颜色。
background-color	每个状态的按钮背景颜色。

发送电子邮件按钮由以下CSS类选择器控制：

.s7smartcropvideoviewer .s7emaildialog .s7dialogactionbutton

对话框操作按钮的CSS属性

width	按钮宽度。
height	按钮高度。
color	每个状态的按钮文本颜色。
background-color	每个状态的按钮背景颜色。

此外，这两个按钮共享公用的CSS类，该类可以包含与其他对话框按钮相同的CSS设置：

.s7smartcropvideoviewer .s7emaildialog .s7dialogfooter .s7button

按钮的CSS属性

font-weight	按钮字体粗细。
font-size	按钮字体大小。
font-family	按钮字体系列。
line-height	按钮内的文本高度。 影响垂直对齐。
box-shadow	投影。
右边距	右按钮边距。

可对按钮工具提示进行本地化。 参见 用户界面元素的本地化 了解更多信息。

示例 — 设置一个对话框页脚，其中具有64 x 34取消按钮和82 x 34发送电子邮件按钮。 最后，每个按钮状态的文本颜色和背景颜色是不同的：

.s7smartcropvideoviewer .s7emaildialog .s7dialogfooter {
    border-top: 1px solid #909090;
}
.s7smartcropvideoviewer .s7emaildialog .s7dialogbuttoncontainer {
    padding-bottom: 6px;
    padding-top: 10px;
}
.s7smartcropvideoviewer .s7emaildialog .s7dialogfooter .s7button {
    box-shadow: 1px 1px 1px #999999;
    color: #FFFFFF;
    font-size: 9pt;
    font-weight: bold;
    line-height: 34px;
    margin-right: 10px;
}
.s7smartcropvideoviewer .s7emaildialog .s7dialogcancelbutton {
 width:64px;
 height:34px;
}
.s7smartcropvideoviewer .s7emaildialog .s7dialogcancelbutton[state='up'] {
 background-color:#666666;
 color:#dddddd;
}
.s7smartcropvideoviewer .s7emaildialog .s7dialogcancelbutton[state='down'] {
 background-color:#555555;
 color:#ffffff;
}
.s7smartcropvideoviewer .s7emaildialog .s7dialogcancelbutton[state='over'] {
 background-color:#555555;
 color:#ffffff;
}
.s7smartcropvideoviewer .s7emaildialog .s7dialogcancelbutton[state='disabled'] {
 background-color:#b2b2b2;
 color:#dddddd;
}
.s7smartcropvideoviewer .s7emaildialog .s7dialogactionbutton {
 width:82px;
 height:34px;
}
.s7smartcropvideoviewer .s7emaildialog .s7dialogactionbutton[state='up'] {
 background-color:#333333;
 color:#dddddd;
}
.s7smartcropvideoviewer .s7emaildialog .s7dialogactionbutton[state='down'] {
 background-color:#222222;
 color:#cccccc;
}
.s7smartcropvideoviewer .s7emaildialog .s7dialogactionbutton[state='over'] {
 background-color:#222222;
 color:#cccccc;
}
.s7smartcropvideoviewer .s7emaildialog .s7dialogactionbutton[state='disabled'] {
 background-color:#b2b2b2;
 color:#dddddd;
}

主对话框区域（在页眉和页脚之间）右侧包含可滚动的对话框内容和滚动面板。 在所有情况下，组件都会管理此区域的宽度，因此无法在CSS中设置此区域。 主对话框区域由以下CSS类选择器控制：

.s7smartcropvideoviewer .s7emaildialog .s7dialogviewarea

对话框查看区域的​CSS属性

height	主对话框区域的高度。 仅当对话框在桌面模式下工作时，才应指定它。 当调整对话框的大小以占据整个浏览器窗口时，此选项不适用。
background-color	主对话框区域的背景颜色。
margin	外边距。

示例 — 要将主对话框区域最初设置为300像素高度，在显示确认消息时设置为100像素高度，具有十像素边距，并使用白色背景：

.s7smartcropvideoviewer .s7emaildialog .s7dialogviewarea {
 background-color:#ffffff;
 margin:10px;
 height:300px;
}
.s7smartcropvideoviewer .s7emaildialog .s7dialogviewarea[state='sendsuccess'] {
 height:100px;
}

所有表单内容（如标签和输入字段）都驻留在由控制的容器中

.s7smartcropvideoviewer .s7emaildialog .s7dialogbody

如果此容器的高度看起来大于主对话框区域，则组件会自动启用垂直滚动。

对话框正文的​CSS属性

填充

内边距。

示例 — 要将表单内容设置为具有十个像素的填充：

.s7smartcropvideoviewer .s7emaildialog .s7dialogbody {
    padding: 10px;
}

对话框表单是逐行在线填写的，其中每行都包含表单内容的一部分（如标签和文本输入字段）。 使用以下CSS类选择器控制单个表单行：

.s7smartcropvideoviewer .s7emaildialog .s7dialogbody .s7dialogline

对话框行的CSS属性

填充

内边距。

示例 — 要设置对话框表单，使每行具有十个像素填充：

.s7smartcropvideoviewer .s7emaildialog .s7dialogbody .s7dialogline {
    padding: 10px;
}

对话框表单中的所有静态标签都由控制

.s7smartcropvideoviewer .s7emaildialog .s7dialoglabel

此类不适合控制标签大小或位置，因为您可以将其应用于表单用户界面各个位置的文本。

对话框标签的​CSS属性。 ​

font-weight	标签字体粗细。
font-size	标签字体大小。
font-family	标签字体系列。
color	标签文本颜色。

可以本地化对话框标签。 参见 用户界面元素的本地化 了解更多信息。

示例 — 要将所有标签设置为灰色、粗体加九像素字体：

.s7smartcropvideoviewer .s7emaildialog .s7dialoglabel {
    color: #666666;
    font-size: 9pt;
    font-weight: bold;
}

所有显示在表单输入字段左侧的静态标签都由以下内容控制：

.s7smartcropvideoviewer .s7emaildialog .s7dialoginputlabel

对话框输入标签的CSS属性

width	静态标签的宽度。
text-align	水平文本对齐方式。
margin	静态标签边距。
填充	静态标签填充。

示例 — 要将输入字段标签设置为50像素宽度，请右对齐，有10个像素的边距，右边有10个像素的边距：

.s7smartcropvideoviewer .s7emaildialog .s7dialoginputlabel {
    margin-right: 10px;
    padding: 10px;
    text-align: right;
    width: 50px;
}

每个表单输入字段都包装在容器中，以便您在输入字段周围应用自定义边框。 它通过以下CSS类选择器进行控制：

.s7smartcropvideoviewer .s7emaildialog .s7dialoginputcontainer

对话框输入容器的CSS属性

边界	输入字段容器周围的边框。
填充	内边距。

从对话框正文左边缘的标签到右边缘展开的大多数输入字段（包括“发件人”字段和“消息”字段）都由以下字段控制：

.s7smartcropvideoviewer .s7emaildialog .s7dialoginputwide

对话框输入范围字段的CSS属性

width

输入字段宽度。

“收件人”输入字段较窄，因为它为右侧的“删除电子邮件”按钮分配了空间。 它通过以下CSS类选择器进行控制：

.s7smartcropvideoviewer .s7emaildialog .s7dialoginputshort

对话框输入短字段的CSS属性

width

输入字段宽度。

示例 — 设置表单使其有一个像素灰色边框，在所有输入字段周围有九个像素的填充。 对于验证失败的字段，要以红色显示相同的边框，要以250像素宽的“至”输入字段，其余输入字段以300像素宽显示：

.s7smartcropvideoviewer .s7emaildialog .s7dialoginputcontainer {
    border: 1px solid #CCCCCC;
    padding: 9px;
}
.s7smartcropvideoviewer .s7emaildialog .s7dialoginputcontainer[state="verifyerror"] {
    border: 1px solid #FF0000;
}
.s7smartcropvideoviewer .s7emaildialog .s7dialoginputshort {
    width: 250px;
}
.s7smartcropvideoviewer .s7emaildialog .s7dialoginputwide {
    width: 300px;
}

电子邮件输入字段也可通过以下进行控制：

.s7smartcropvideoviewer .s7emaildialog .s7dialogmessage

此类允许您为基础应用程序设置特定属性 TEXTAREA 元素。

对话框消息的CSS属性

height	消息高度。
自动换行	文字环绕样式。

示例 — 将电子邮件设置为高50像素并使用 break-word 自动换行：

.s7smartcropvideoviewer .s7emaildialog .s7dialogmessage {
    height: 50px;
    word-wrap: break-word;
}

“添加其他电子邮件地址”按钮允许用户在电子邮件表单中添加多个收件人。 它通过以下CSS类选择器进行控制：

.s7smartcropvideoviewer .s7emaildialog .s7dialogaddemailbutton

对话框的CSS属性“添加电子邮件地址”按钮

height	按钮高度。
color	每个状态的按钮文本颜色。
background-image	每个状态的按钮图像。
background-position	按钮图像在按钮区域中的位置。
font-weight	按钮字体粗细。
font-size	按钮字体大小。
font-family	按钮字体系列。
line-height	按钮内的文本高度。 影响垂直对齐方式。
text-align	水平文本对齐方式。
填充	内边距。

可对按钮工具提示进行本地化。 参见 用户界面元素的本地化 了解更多信息。

示例 — 要将“添加其他电子邮件地址”按钮设置为25像素高，请使用具有正确对齐方式的12点粗体字体，并为每种状态使用不同的文本颜色和图像：

.s7smartcropvideoviewer .s7emaildialog .s7dialogaddemailbutton {
 text-align:right;
 font-size:12pt;
 font-weight:bold;
 background-position:left center;
 line-height:25px;
 padding-left:30px;
 height:25px;
}
.s7smartcropvideoviewer .s7emaildialog .s7dialogaddemailbutton[state='up'] {
 color:#666666;
 background-image:url(images/sdk/dlgaddplus_up.png);
}
.s7smartcropvideoviewer .s7emaildialog .s7dialogaddemailbutton[state='down'] {
 color:#000000;
 background-image:url(images/sdk/dlgaddplus_over.png);
}
.s7smartcropvideoviewer .s7emaildialog .s7dialogaddemailbutton[state='over'] {
 color:#000000;
 text-decoration:underline;
 background-image:url(images/sdk/dlgaddplus_over.png);
}
.s7smartcropvideoviewer .s7emaildialog .s7dialogaddemailbutton[state='disabled'] {
 color:#666666;
 background-image:url(images/sdk/dlgaddplus_up.png);
}

通过“删除”按钮，用户可以从电子邮件表单中删除额外的地址。 它通过以下CSS类选择器进行控制：

.s7smartcropvideoviewer .s7emaildialog .s7dialogremoveemailbutton

对话框的CSS属性删除电子邮件按钮

width	按钮宽度。
height	按钮高度。
background-image	每个状态的按钮图像。
background-position	如果使用CSS sprite，则定位在图稿sprite内。 参见 CSS脚本 .

可对按钮工具提示进行本地化。 参见 用户界面元素的本地化 了解更多信息。

示例 — 将“删除”按钮设置为25 x 25像素，并为每种状态使用不同的图像：

.s7smartcropvideoviewer .s7emaildialog .s7dialogremoveemailbutton {
 width:25px;
 height:25px;
}
.s7smartcropvideoviewer .s7emaildialog .s7dialogremoveemailbutton[state='up'] {
 background-image:url(images/sdk/dlgremove_up.png);
}
.s7smartcropvideoviewer .s7emaildialog .s7dialogremoveemailbutton[state='over'] {
 background-image:url(images/sdk/dlgremove_over.png);
}
.s7smartcropvideoviewer .s7emaildialog .s7dialogremoveemailbutton[state='down'] {
 background-image:url(images/sdk/dlgremove_over.png);
}
.s7smartcropvideoviewer .s7emaildialog .s7dialogremoveemailbutton[state='disabled'] {
 background-image:url(images/sdk/dlgremove_up.png);
}

要共享的内容显示在对话框正文的底部，并包括缩略图、标题、原始URL和描述。 它会包装在容器中，并受以下控制：

.s7smartcropvideoviewer .s7emaildialog .s7dialogbody .s7dialogcontent

对话框内容的​CSS属性

边界	容器边框。
填充	内边距。

示例 — 设置底部容器以使其有一个像素点状边框并且没有边距：

.s7smartcropvideoviewer .s7emaildialog .s7dialogbody .s7dialogcontent {
    border: 1px dotted #A0A0A0;
    padding: 0;
}

使用以下CSS类选择器控制缩略图图像：

.s7smartcropvideoviewer .s7emaildialog .s7dialogthumbnail

此 background-image 属性由组件逻辑设置。

对话框缩略图图像的CSS属性

width	缩略图宽度。
height	缩略图高度。
vertical-align	垂直对齐缩略图。
填充	内边距。

示例 — 将缩略图设置为90 x 60像素，并且顶部对齐十个像素：

.s7smartcropvideoviewer .s7emaildialog .s7dialogthumbnail {
    height: 60px;
    padding: 10px;
    vertical-align: top;
    width: 90px;
}

内容标题、来源和描述进一步分组到内容缩略图右侧的面板中。 它通过以下CSS类选择器进行控制：

.s7smartcropvideoviewer .s7emaildialog .s7dialoginfopanel

对话框信息面板的CSS属性

width

面板宽度。

示例 — 将内容信息面板设置为300像素宽：

.s7smartcropvideoviewer .s7emaildialog .s7dialoginfopanel {
    width: 300px;
}

使用以下CSS类选择器控制内容标题：

.s7smartcropvideoviewer .s7emaildialog .s7dialogtitle

对话框标题的CSS属性

margin	外边距。
font-weight	字体粗细。
font-size	字体大小.
font-family	字体系列。

示例 — 要设置内容标题以使用粗体字体并具有十像素边距，请执行以下操作：

.s7smartcropvideoviewer .s7emaildialog .s7dialogtitle {
    font-weight: bold;
    margin: 10px;
}

使用以下CSS类选择器控制内容来源：

.s7smartcropvideoviewer .s7emaildialog .s7dialogorigin

对话框内容源​的​CSS属性

margin	外边距。
font-weight	字体粗细。
font-size	字体大小.
font-family	字体系列。

示例 — 要将内容原点设置为具有十像素边距，请执行以下操作：

.s7smartcropvideoviewer .s7emaildialog .s7dialogorigin {
    margin: 10px;
}

内容描述由以下CSS类选择器控制：

.s7smartcropvideoviewer .s7emaildialog .s7dialogdescription

对话框内容描述的CSS属性

margin	外边距。
font-weight	字体粗细。
font-size	字体大小.
font-family	字体系列。

示例 — 将内容描述设置为具有十像素边距并使用九点字体：

.s7smartcropvideoviewer .s7emaildialog .s7dialogdescription {
    font-size: 9pt;
    margin: 10px;
}

当用户输入不正确的输入数据且内联验证失败时，或者在提交表单时对话框必须呈现错误或确认消息时，对话框正文顶部会显示消息。 它通过以下CSS类选择器进行控制：

.s7smartcropvideoviewer .s7emaildialog .s7dialogerrormessage

对话框的CSS属性错误消息

background-image	错误图标。 缺省值为感叹号。
background-position	错误图标在消息区域中的位置。
color	消息文本颜色。
font-weight	字体粗细。
font-size	字体大小.
font-family	字体系列。
line-height	消息中的文本高度。 影响垂直对齐。
填充	内边距。

错误消息可以本地化。 参见 用户界面元素的本地化 了解更多信息。

示例 — 要设置消息以使用10点粗体字体，请在左侧使用25像素行高和20像素填充。 此外，请使用感叹号图标，如果出现错误，请使用红色文本；如果成功，则使用无图标和绿色文本：

.s7smartcropvideoviewer .s7emaildialog .s7dialogerrormessage[state="verifyerror"] {
    background-image: url("images/sdk/dlgerrimg.png");
    color: #FF0000;
}
.s7smartcropvideoviewer .s7emaildialog .s7dialogerrormessage[state="senderror"] {
    background-image: url("images/sdk/dlgerrimg.png");
    color: #FF0000;
}
.s7smartcropvideoviewer .s7emaildialog .s7dialogerrormessage[state="sendsuccess"] {
    background-image: none;
    color: #00B200;
}
.s7smartcropvideoviewer .s7emaildialog .s7dialogerrormessage {
    background-position: left center;
    font-size: 10pt;
    font-weight: bold;
    line-height: 25px;
    padding-left: 20px;
}

如果需要垂直滚动，滚动条将在对话框右边缘附近的面板中渲染，它通过以下CSS类选择器控制：

.s7smartcropvideoviewer .s7emaildialog .s7dialogscrollpanel

对话框滚动面板的CSS属性

width

滚动面板宽度。

示例 — 将滚动面板设置为宽44像素：

.s7smartcropvideoviewer .s7emaildialog .s7dialogscrollpanel {
    width: 44px;
}

滚动条区域的外观由以下CSS类选择器控制：

.s7smartcropvideoviewer .s7emaildialog .s7scrollbar

滚动条的CSS属性

width	滚动条宽度。
顶端	垂直滚动条从滚动面板顶部偏移。
底部	垂直滚动条从滚动面板的底部偏移。
右	水平滚动条从滚动面板的右边缘偏移。

示例 — 要设置一个宽度为28像素的滚动条，滚动面板的顶部、右侧和底部各有8像素的边距：

.s7smartcropvideoviewer .s7emaildialog .s7scrollbar {
    bottom: 8px;
    right: 8px;
    top: 8px;
    width: 28px;
}

滚动条轨道是上下滚动按钮之间的区域。 组件会自动设置轨道的位置和高度。 使用以下CSS类选择器控制跟踪：

.s7smartcropvideoviewer .s7emaildialog .s7scrollbar .s7scrolltrack

滚动轨道的CSS属性

width	轨道宽度。
background-color	轨道背景颜色。

示例 — 要设置宽度为28像素且背景为灰色的滚动条轨道：

.s7smartcropvideoviewer .s7emaildialog .s7scrollbar .s7scrolltrack {
width:28px;
background-color: #B2B2B2;
}

滚动条缩略图在滚动轨道区域中垂直移动。 其垂直位置完全由组件逻辑控制，但缩略图高度不会根据内容量动态变化。 您可以使用以下CSS类选择器配置缩略图高度和其他方面：

.s7smartcropvideoviewer .s7emaildialog .s7scrollbar .s7scrollthumb

滚动条缩略图的CSS属性

width	缩略图宽度。
height	缩略图高度。
上内边距	轨道顶部之间的垂直边距。
底部填充	轨道底部之间的垂直边距。
background-image	在给定缩略图状态中显示的图像。
background-position	如果使用CSS sprite，则定位在图稿sprite内。 参见 CSS脚本 .

可对按钮工具提示进行本地化。 参见 用户界面元素的本地化 了解更多信息。

示例 — 要设置滚动条缩略图，其大小为28 x 45像素，上下各有10像素边距，并且每种状态的图稿不同：

.s7smartcropvideoviewer .s7emaildialog .s7scrollbar .s7scrollthumb {
    height: 45px;
    padding-bottom: 10px;
    padding-top: 10px;
    width: 28px;
}
.s7smartcropvideoviewer .s7emaildialog .s7scrollbar .s7scrollthumb[state="up"] {
 background-image:url("images/sdk/scrollbar_thumb_up.png");
}
.s7smartcropvideoviewer .s7emaildialog .s7scrollbar .s7scrollthumb[state="down"] {
 background-image:url("images/sdk/scrollbar_thumb_down.png");
}
.s7smartcropvideoviewer .s7emaildialog .s7scrollbar .s7scrollthumb[state="over"] {
 background-image:url("images/sdk/scrollbar_thumb_over.png");
}
.s7smartcropvideoviewer .s7emaildialog .s7scrollbar .s7scrollthumb[state="disabled"] {
 background-image:url("images/sdk/scrollbar_thumb_disabled.png");
}

顶部和底部滚动按钮的外观由以下CSS类选择器控制：

.s7smartcropvideoviewer .s7emaildialog .s7scrollbar .s7scrollupbutton

.s7smartcropvideoviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton

顶部和底部滚动按钮的CSS属性

width	按钮宽度。
height	按钮高度。
background-image	针对给定按钮状态显示的图像。
background-position	如果使用CSS sprite，则定位在图稿sprite内。 参见 CSS脚本 .

示例 — 设置像素为28 x 32的滚动按钮，并为每种状态设置不同的图稿：

.s7smartcropvideoviewer .s7emaildialog .s7scrollbar .s7scrollupbutton {
 width:28px;
 height:32px;
}
.s7smartcropvideoviewer .s7emaildialog .s7scrollbar .s7scrollupbutton[state='up'] {
background-image:url(images/sdk/scroll_up_up.png);
}
.s7smartcropvideoviewer .s7emaildialog .s7scrollbar .s7scrollupbutton[state='over'] {
 background-image:url(images/sdk/scroll_up_over.png);
}
.s7smartcropvideoviewer .s7emaildialog .s7scrollbar .s7scrollupbutton[state='down'] {
 background-image:url(images/sdk/scroll_up_down.png);
}
.s7smartcropvideoviewer .s7emaildialog .s7scrollbar .s7scrollupbutton[state='disabled'] {
 background-image:url(images/sdk/scroll_up_disabled.png);
}
.s7smartcropvideoviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton {
 width:28px;
 height:32px;
}
.s7smartcropvideoviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton[state='up'] {
 background-image:url(images/sdk/scroll_down_up.png);
}
.s7smartcropvideoviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton[state='over'] {
 background-image:url(images/sdk/scroll_down_over.png);
}
.s7smartcropvideoviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton[state='down'] {
 background-image:url(images/sdk/scroll_down_down.png);
}
.s7smartcropvideoviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton[state='disabled'] {
 background-image:url(images/sdk/scroll_down_disabled.png);
}