链接共享

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

链接共享按钮的外观由以下CSS类选择器控制：

.s7smartcropvideoviewer .s7linkshare

链接共享工具的CSS属性

width

按钮宽度。

height

按钮高度。

背景图像

为给定按钮状态显示的图像。

背景位置

在图稿Sprite中放置（如果使用CSS Sprite）。

请参阅 CSS Sprite .

注意

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

可以通过设置 display:none 其CSS类上的CSS属性。

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

示例 — 要设置一个28 x 28像素的链接共享按钮，并针对四个不同按钮状态中的每个状态显示一个不同的图像：

.s7smartcropvideoviewer .s7linkshare {
 width:28px;
 height:28px;
}
.s7smartcropvideoviewer .s7linkshare[state='up'] {
background-image:url(images/v2/LinkShare_dark_up.png);
}
.s7smartcropvideoviewer .s7linkshare[state='over'] {
background-image:url(images/v2/LinkShare_dark_over.png);
}
.s7smartcropvideoviewer .s7linkshare[state='down'] {
background-image:url(images/v2/LinkShare_dark_down.png);
}
.s7smartcropvideoviewer .s7linkshare[state='disabled'] {
background-image:url(images/v2/LinkShare_dark_disabled.png);
}

当对话框处于活动状态时，将覆盖网页的背景叠加通过以下CSS类选择器进行控制：

.s7smartcropvideoviewer .s7linkdialog .s7backoverlay

背景叠加的CSS属性

不透明度

背景叠加的不透明度。

背景颜色

背景叠加图的颜色。

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

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

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

.s7smartcropvideoviewer .s7linkdialog .s7dialog

对话框的CSS属性

边框半径

对话框边框半径，以防对话框占用整个浏览器。

背景颜色

对话框背景颜色。

宽度

应为未设置或设置为100%，在这种情况下，对话框将占据整个浏览器窗口（在触屏设备上首选此模式）。

高度

应为未设置或设置为100%，在这种情况下，对话框将占据整个浏览器窗口（在触屏设备上首选此模式）。

示例 — 要设置对话框以使用整个浏览器窗口并在触屏设备上具有白色背景，请执行以下操作：

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

对话框标题由图标、标题文本和关闭按钮组成。 标题容器通过

.s7smartcropvideoviewer .s7linkdialog .s7dialogheader

对话框标题的CSS属性

填充

标题内容的内边距。

图标和标题文本将封装在通过

.s7smartcropvideoviewer .s7linkdialog .s7dialogheader .s7dialogline

对话框行的CSS属性

填充

标题图标和标题的内边距

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

.s7smartcropvideoviewer .s7linkdialog .s7dialogheadericon

对话框标题图标的CSS属性

宽度

图标宽度。

高度

图标高度。

背景图像

图标图像。

背景位置

在图稿Sprite中放置（如果使用CSS Sprite）。

请参阅 CSS Sprite .

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

.s7smartcropvideoviewer .s7linkdialog .s7dialogheadertext

对话框标题文本的CSS属性

字体粗细

字体粗细。

字体大小

字体高度。

字体系列

字体系列。

填充

内部文本内边距。

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

.s7smartcropvideoviewer .s7linkdialog .s7closebutton

关闭按钮的CSS属性

顶端

相对于标题容器的垂直按钮位置。

右

相对于标题容器的水平按钮位置。

宽度

按钮宽度。

高度

按钮高度。

填充

按钮的内边距。

背景图像

按钮图像。

背景位置

在图稿Sprite中放置（如果使用CSS Sprite）。

请参阅 CSS Sprite .

注意

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

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

示例 — 要设置一个对话框标题，其中包含内边距、22 x 12像素图标和粗体16点标题。 最后，一个28 x 28像素的“关闭”按钮，它位于距对话框容器顶部两个像素和距离对话框容器右侧两个像素的位置：

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

对话框页脚由“取消”按钮组成。 使用以下CSS类选择器控制页脚容器：

.s7smartcropvideoviewer .s7linkdialog .s7dialogfooter

对话框页脚的CSS属性

边界

用于以可视方式将页脚与对话框其余部分分开的边框。

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

.s7smartcropvideoviewer .s7linkdialog .s7dialogbuttoncontainer

对话框按钮容器的CSS属性

填充

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

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

.s7smartcropvideoviewer .s7linkdialog .s7dialogactionbutton

该按钮仅在桌面系统上可用。

“全选”按钮的CSS属性

宽度

按钮宽度。

高度

按钮高度。

color

每个状态的按钮文本颜色。

背景颜色

每个状态的按钮背景颜色。

注意

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

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

.s7smartcropvideoviewer .s7linkdialog .s7dialogcancelbutton

对话框取消按钮的CSS属性

宽度

按钮宽度。

高度

按钮高度。

颜色

每个状态的按钮文本颜色。

背景颜色

每个状态的按钮背景颜色。

注意

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

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

.s7smartcropvideoviewer .s7linkdialog .s7dialogfooter .s7button

按钮的CSS属性

字体粗细

按钮字体粗细。

字体大小

按钮字体大小。

字体系列

按钮字体系列。

行高

按钮内的文本高度。 影响垂直对齐。

框阴影

投影。

边距右侧

右按钮边距。

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

示例 — 要设置一个具有64 x 34取消按钮的对话框页脚，且每个按钮状态的文本颜色和背景颜色不同：

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

主对话框区域（在页眉和页脚之间）包含对话框内容。 在所有情况下，组件都会管理此区域的宽度，因为无法在CSS中设置它。 主对话框区域通过以下CSS类选择器进行控制：

.s7smartcropvideoviewer .s7linkdialog .s7dialogviewarea

对话框查看区域的CSS属性

高度

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

背景颜色

主对话框区域的背景颜色。

margin

外边距。

示例 — 要将主对话框区域设置为300像素高、具有10像素边距并使用白色背景：

.s7smartcropvideoviewer .s7linkdialog .s7dialogviewarea {
 background-color:#ffffff;
 margin:10px;
 height:300px;
}

所有表单内容（如标签和输入字段）都位于通过

.s7smartcropvideoviewer .s7linkdialog .s7dialogbody

对话框主体的CSS属性

填充

内边距。

示例 — 将表单内容设置为具有十个像素内边距：

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

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

.s7smartcropvideoviewer .s7linkdialog .s7dialoglabel

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

对话框标签的CSS属性。 ​

字体粗细

标签字体粗细。

字体大小

标签字体大小。

字体系列

标记字体系列。

颜色

标签文本颜色。

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

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

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

使用以下CSS类选择器控制链接顶部显示的文本副本大小：

.s7smartcropvideoviewer .s7linkdialog .s7dialoginputwide

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

宽度

文本宽度。

填充

内边距。

示例 — 将文本副本设置为430像素宽，并在底部填充10个像素：

.s7smartcropvideoviewer .s7linkdialog .s7dialoginputwide {
    padding-bottom: 10px;
    width: 430px;
}

共享链接封装在容器中，并使用以下CSS类选择器进行控制：

.s7smartcropvideoviewer .s7linkdialog .s7dialoginputcontainer

对话框输入容器的CSS属性

边界

共享链接容器周围的边框。

填充

内边距。

示例 — 要在嵌入代码文本周围设置一个像素灰度边框，并且其内边距为9像素，请执行以下操作：

.s7smartcropvideoviewer .s7linkdialog .s7dialoginputcontainer {
    border: 1px solid #CCCCCC;
    padding: 9px;
}

共享链接本身由以下CSS类选择器控制：

.s7smartcropvideoviewer .s7linkdialog .s7dialoglink

对话框共享链接的CSS属性

宽度

共享链接宽度。

示例 — 将共享链接设置为450像素宽：

.s7smartcropvideoviewer .s7linkdialog .s7dialoglink {
    width: 450px;
}

在此页面上