电子邮件共享工具由添加到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 . |
此按钮支持 state
属性选择器,用于将不同的外观应用于不同的按钮状态。
“关闭”按钮工具提示和对话框标题可以本地化。 请参阅 用户界面元素的本地化 以了解更多信息。
示例 — 要设置带有内边距、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 |
每个状态的按钮文本颜色。 |
背景颜色 |
每个状态的按钮背景颜色。 |
此按钮支持 state
属性选择器,用于将不同的外观应用于不同的按钮状态。
使用以下CSS类选择器控制“发送电子邮件”按钮:
.s7smartcropvideoviewer .s7emaildialog .s7dialogactionbutton
对话框操作按钮的CSS属性
宽度 |
按钮宽度。 |
高度 |
按钮高度。 |
颜色 |
每个状态的按钮文本颜色。 |
背景颜色 |
每个状态的按钮背景颜色。 |
此按钮支持 state
属性选择器,用于将不同的外观应用于不同的按钮状态。
此外,两个按钮共享常用的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 |
外边距。 |
主对话框区域支持可选 state
属性选择器。 它设置为 sendsuccess
提交电子邮件表单后,对话框会显示确认消息。 只要确认消息较小,此属性选择器就可用于在显示此确认消息时降低对话框高度。
示例 — 要将主对话框区域设置为初始高度为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属性
边界 |
输入字段容器周围的边框。 |
填充 |
内边距。 |
输入字段容器支持可选 state
属性选择器。 它设置为 verifyerror
当用户在输入数据格式中出错且内联验证失败时。 此属性选择器可用于突出显示表单中不正确的用户输入。
从对话框主体左至右边缘的标签扩展的大多数输入字段(包括“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 |
水平文本对齐方式。 |
填充 |
内边距。 |
此按钮支持 state
属性选择器,用于将不同的外观应用于不同的按钮状态。
按钮工具提示可进行本地化。 请参阅 用户界面元素的本地化 以了解更多信息。
示例 — 要将“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 . |
此按钮支持 state
属性选择器,用于将不同的外观应用于不同的按钮状态。
按钮工具提示可进行本地化。 请参阅 用户界面元素的本地化 以了解更多信息。
示例 — 要将“删除”按钮设置为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属性
背景图像 |
错误图标。 默认为感叹号。 |
背景位置 |
消息区域内的错误图标位置。 |
颜色 |
消息文本颜色。 |
字体粗细 |
字体粗细。 |
字体大小 |
字体大小. |
字体系列 |
字体系列。 |
行高 |
消息内的文本高度。 影响垂直对齐。 |
填充 |
内边距。 |
此消息支持 state
属性选择器,其可能值如下: verifyerror
, senderror
和 sendsuccess
. 值 verifyerror
在因内联输入验证失败而显示消息时设置。 值 senderror
后端电子邮件服务报告错误时设置。 的 sendsuccess
值会在成功发送电子邮件时设置。 这样,根据对话框状态可以以不同的方式设置消息样式。
错误消息可以本地化。 请参阅 用户界面元素的本地化 以了解更多信息。
示例 — 要设置消息以使用十点粗体字体,其行高为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 . |
拇指支持 state
属性选择器,用于将不同的外观应用于不同的拇指状态: up
, down
, over
和 disabled
.
可以对按钮工具提示进行本地化。 请参阅 用户界面元素的本地化 以了解更多信息。
示例 — 要设置滚动条缩览图,该缩览图为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 . |
这些按钮支持 state
属性选择器,用于将不同的外观应用于不同的按钮状态: up
, down
, over
和 disabled
.
示例 — 设置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);
}