电子邮件共享

电子邮件共享工具由添加到Social共享面板的按钮和激活工具时显示的模式对话框组成。 按钮的位置完全由Social共享工具管理。

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

.s7smartcropvideoviewer .s7emailshare

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

width	按钮的宽度。
height	按钮的高度。
背景图像	为给定按钮状态显示的图像。
背景位置	在图稿Sprite中放置（如果使用CSS Sprite）。 请参阅 CSS Sprite .

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

可以通过设置 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属性

不透明度	背景叠加的不透明度。
背景颜色	背景叠加图的颜色。

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

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

默认情况下，模态对话框以桌面系统的屏幕居中显示，并在触屏设备上占据整个网页区域。 在所有情况下，对话框的定位和大小调整均由组件进行管理。 使用以下CSS类选择器控制对话框：

.s7smartcropvideoviewer .s7emaildialog .s7dialog

对话框的CSS属性

边框半径	对话框边框半径（如果对话框不占用整个浏览器窗口）；
背景颜色	对话框背景颜色；
宽度	应取消设置，或设置为100%，在这种情况下，对话框将占据整个浏览器窗口（在触屏设备上首选此模式）；
高度	应为未设置，或设置为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属性

宽度	图标宽度。
高度	图标高度。
背景图像	图标图像。
背景位置	在图稿Sprite中放置（如果使用CSS Sprite）。 请参阅 CSS Sprite .

通过以下CSS类选择器控制标题：

.s7smartcropvideoviewer .s7emaildialog .s7dialogheadertext

对话框标题文本的CSS属性

字体粗细	字体粗细。
字体大小	字体高度。
字体系列	字体系列。
填充	内部文本内边距。

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

.s7smartcropvideoviewer .s7emaildialog .s7closebutton

关闭按钮的CSS属性

顶端	相对于标题容器的垂直按钮位置。
右	相对于标题容器的水平按钮位置。
宽度	按钮宽度。
高度	按钮高度。
填充	按钮的内边距。
背景图像	按钮图像。
背景位置	在图稿Sprite中放置（如果使用CSS Sprite）。 请参阅 CSS Sprite .

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

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

.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属性

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

使用以下CSS类选择器控制“发送电子邮件”按钮：

.s7smartcropvideoviewer .s7emaildialog .s7dialogactionbutton

对话框操作按钮的CSS属性

宽度	按钮宽度。
高度	按钮高度。
颜色	每个状态的按钮文本颜色。
背景颜色	每个状态的按钮背景颜色。

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

.s7smartcropvideoviewer .s7emaildialog .s7dialogfooter .s7button

按钮的CSS属性

字体粗细	按钮字体粗细。
字体大小	按钮字体大小。
字体系列	按钮字体系列。
行高	按钮内的文本高度。 影响垂直对齐。
框阴影	投影。
边距右侧	右按钮边距。

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

示例 — 要设置一个对话框页脚，其中显示64 x 34 “Cancel（取消）”按钮和82 x 34 “Send Email（发送电子邮件）”按钮。 最后，每种按钮状态的文本颜色和背景颜色是不同的：

.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属性

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

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

.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属性

填充

内线填充。

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

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

对话框表单中的所有静态标签均使用

.s7smartcropvideoviewer .s7emaildialog .s7dialoglabel

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

对话框标签的CSS属性。 ​

字体粗细	标签字体粗细。
字体大小	标签字体大小。
字体系列	标记字体系列。
颜色	标签文本颜色。

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

示例 — 要将所有标签设置为灰色、粗体，且字体为9像素，请执行以下操作：

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

在表单输入字段左侧显示的所有静态标签都通过以下方式进行控制：

.s7smartcropvideoviewer .s7emaildialog .s7dialoginputlabel

对话框输入标签的CSS属性

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

示例 — 要将输入字段标签设置为宽度为50像素、右对齐、内边距为10像素、右侧边距为10像素：

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

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

.s7smartcropvideoviewer .s7emaildialog .s7dialoginputcontainer

对话框输入容器的CSS属性

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

从对话框主体左至右边缘的标签扩展的大多数输入字段（包括“from”字段和“message”字段）都通过以下方式进行控制：

.s7smartcropvideoviewer .s7emaildialog .s7dialoginputwide

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

宽度

输入字段宽度。

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

.s7smartcropvideoviewer .s7emaildialog .s7dialoginputshort

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

宽度

输入字段宽度。

示例 — 将表单设置为在所有输入字段周围具有一个像素灰边框，其中九个像素的填充。 若要为验证失败的字段使用相同的红色边框，则输入字段的宽度为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属性

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

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

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

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

.s7smartcropvideoviewer .s7emaildialog .s7dialogaddemailbutton

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

高度	按钮高度。
颜色	每个状态的按钮文本颜色。
背景图像	按钮图像。
背景位置	按钮图像在按钮区域内的位置。
字体粗细	按钮字体粗细。
字体大小	按钮字体大小。
字体系列	按钮字体系列。
行高	按钮内的文本高度。 影响垂直对齐。
text-align	水平文本对齐方式。
填充	内边距。

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

示例 — 要将“Add Ather Email Address”按钮设置为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属性删除电子邮件按钮

宽度	按钮宽度。
高度	按钮高度。
背景图像	按钮图像。
背景位置	在图稿Sprite中放置（如果使用CSS Sprite）。 请参阅 CSS Sprite .

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

示例 — 要将“删除”按钮设置为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属性

宽度	缩略图宽度。
高度	缩略图高度。
垂直对齐	垂直对齐缩览图。
填充	内边距。

示例 — 要将缩略图设置为90 x 60像素，并以10个填充像素为顶对齐：

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

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

.s7smartcropvideoviewer .s7emaildialog .s7dialoginfopanel

对话框信息面板的CSS属性

宽度

面板宽度。

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

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

通过以下CSS类选择器控制内容标题：

.s7smartcropvideoviewer .s7emaildialog .s7dialogtitle

对话框标题的CSS属性

边距	外边距。
字体粗细	字体粗细。
字体大小	字体大小.
字体系列	字体系列。

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

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

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

.s7smartcropvideoviewer .s7emaildialog .s7dialogorigin

对话框内容源的CSS属性

边距	外边距。
字体粗细	字体粗细。
字体大小	字体大小.
字体系列	字体系列。

示例 — 将内容原点设置为具有十像素边距：

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

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

.s7smartcropvideoviewer .s7emaildialog .s7dialogdescription

对话框内容描述的CSS属性

边距	外边距。
字体粗细	字体粗细。
字体大小	字体大小.
字体系列	字体系列。

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

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

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

.s7smartcropvideoviewer .s7emaildialog .s7dialogerrormessage

对话框错误消息的CSS属性

背景图像	错误图标。 默认为感叹号。
背景位置	消息区域内的错误图标位置。
颜色	消息文本颜色。
字体粗细	字体粗细。
字体大小	字体大小.
字体系列	字体系列。
行高	消息内的文本高度。 影响垂直对齐。
填充	内边距。

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

示例 — 要设置消息以使用十点粗体字体，其行高为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属性

宽度

滚动面板宽度。

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

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

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

.s7smartcropvideoviewer .s7emaildialog .s7scrollbar

滚动条的CSS属性

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

示例 — 要设置宽28像素的滚动条，从滚动面板的上、右和下方各设置8像素的边距：

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

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

.s7smartcropvideoviewer .s7emaildialog .s7scrollbar .s7scrolltrack

滚动跟踪的CSS属性

宽度	轨道宽度。
背景颜色	跟踪背景颜色。

示例 — 要设置宽28像素且背景为灰色的滚动条轨道，请执行以下操作：

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

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

.s7smartcropvideoviewer .s7emaildialog .s7scrollbar .s7scrollthumb

滚动条缩览图的CSS属性

宽度	拇指宽度。
高度	拇指高度。
padding-top	轨道顶部之间的垂直边距。
padding-bottom	轨道底部之间的垂直边距。
背景图像	为给定的拇指状态显示的图像。
背景位置	在图稿Sprite中放置（如果使用CSS Sprite）。 请参阅 CSS Sprite .

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

示例 — 要设置滚动条缩览图，该缩览图为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属性

宽度	按钮宽度。
高度	按钮高度。
背景图像	为给定按钮状态显示的图像。
背景位置	在图稿Sprite中放置（如果使用CSS Sprite）。 请参阅 CSS Sprite .

示例 — 设置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);
}