链接共享 :headding-anchor:link-share
链接共享工具由添加到“社交”共享面板的按钮以及激活该工具时显示的模式对话框组成。 按钮的位置完全由社交共享工具管理。
链接共享按钮的外观由以下CSS类选择器控制：
.s7videoviewer .s7linkshare
链接共享工具的 CSS属性
state属性选择器，可用于将不同的外观应用于不同的按钮状态。可以通过在社交共享面板的CSS类中设置display:none CSS属性来删除该按钮。
按钮工具提示可以本地化。 有关详细信息，请参阅用户界面元素的本地化。
示例 — 设置一个28 x 28像素的链接共享按钮，并针对四种不同的按钮状态分别显示不同的图像：
.s7videoviewer .s7linkshare {
width:28px;
height:28px;
}
.s7videoviewer .s7linkshare[state='up'] {
background-image:url(images/v2/LinkShare_dark_up.png);
}
.s7videoviewer .s7linkshare[state='over'] {
background-image:url(images/v2/LinkShare_dark_over.png);
}
.s7videoviewer .s7linkshare[state='down'] {
background-image:url(images/v2/LinkShare_dark_down.png);
}
.s7videoviewer .s7linkshare[state='disabled'] {
background-image:url(images/v2/LinkShare_dark_disabled.png);
}
使用以下CSS类选择器可控制对话框处于活动状态时覆盖网页的背景叠加：
.s7videoviewer .s7linkdialog .s7backoverlay
背景叠加的 CSS属性
示例 — 要将背景叠加设置为具有70%不透明度的灰色，请执行以下操作：
.s7videoviewer .s7linkdialog .s7backoverlay {
opacity:0.7;
background-color:#222222;
}
默认情况下，模式对话框会以桌面系统屏幕的中心位置显示，并在触控设备上显示整个网页区域。 在所有情况下，对话框的位置和大小都由组件管理。 使用以下CSS类选择器控制该对话框：
.s7videoviewer .s7linkdialog .s7dialog
对话框的CSS属性
示例 — 设置对话框以使用整个浏览器窗口并在触控设备上使用白色背景：
.s7videoviewer .s7touchinput .s7linkdialog .s7dialog {
width:100%;
height:100%;
background-color: #ffffff;
}
对话框标题由图标、标题文本和关闭按钮组成。 标题容器的控制方式
.s7videoviewer .s7linkdialog .s7dialogheader
对话框标头的 CSS属性
图标和标题文本将封装在一个额外的容器中，由控制
.s7videoviewer .s7linkdialog .s7dialogheader .s7dialogline
对话框行的CSS属性
标题图标由以下CSS类选择器控制
.s7videoviewer .s7linkdialog .s7dialogheadericon
对话框标题图标的CSS属性
标题标题由以下CSS类选择器控制：
.s7videoviewer .s7linkdialog .s7dialogheadertext
对话框标题文本的CSS属性
使用以下CSS类选择器控制“关闭”按钮：
.s7videoviewer .s7linkdialog .s7closebutton
关闭按钮的 CSS属性
state属性选择器，可用于将不同的外观应用于不同的按钮状态。可以本地化“关闭”按钮工具提示和对话框标题。 有关详细信息，请参阅用户界面元素的本地化。
示例 — 要设置带有内边距的对话框标题，请设置22 x 12像素图标和粗体16点标题。 最后，一个28 x 28像素的“关闭”按钮，它位于对话框容器顶部两个像素和右侧两个像素的位置：
.s7videoviewer .s7linkdialog .s7dialogheader {
padding: 10px;
}
.s7videoviewer .s7linkdialog .s7dialogheader .s7dialogline {
padding: 10px 10px 2px;
}
.s7videoviewer .s7linkdialog .s7dialogheadericon {
background-image: url("images/sdk/dlglink_cap.png");
height: 12px;
width: 22px;
}
.s7videoviewer .s7linkdialog .s7dialogheadertext {
font-size: 16pt;
font-weight: bold;
padding-left: 16px;
}
.s7videoviewer .s7linkdialog .s7closebutton {
top:2px;
right:2px;
padding:8px;
width:28px;
height:28px;
}
.s7videoviewer .s7linkdialog .s7closebutton[state='up'] {
background-image:url(images/sdk/close_up.png);
}
.s7videoviewer .s7linkdialog .s7closebutton[state='over'] {
background-image:url(images/sdk/close_over.png);
}
.s7videoviewer .s7linkdialog .s7closebutton[state='down'] {
background-image:url(images/sdk/close_down.png);
}
.s7videoviewer .s7linkdialog .s7closebutton[state='disabled'] {
background-image:url(images/sdk/close_disabled.png);
}
对话框页脚包含“取消”按钮。 使用以下CSS类选择器控制页脚容器：
.s7videoviewer .s7linkdialog .s7dialogfooter
对话框页脚的CSS属性
页脚具有用于保存按钮的内部容器。 可使用以下CSS类选择器来控制分类：
.s7videoviewer .s7linkdialog .s7dialogbuttoncontainer
对话框按钮容器的CSS属性
全选按钮由以下CSS类选择器控制：
.s7videoviewer .s7linkdialog .s7dialogactionbutton
该按钮仅在桌面系统上可用。
“全选”按钮的 CSS属性
state属性选择器，该选择器可用于将不同的外观应用于不同的按钮状态。使用以下CSS类选择器可控制“取消”按钮：
.s7videoviewer .s7linkdialog .s7dialogcancelbutton
对话框取消按钮的 CSS属性
state属性选择器，可用于将不同的外观应用于不同的按钮状态。此外，这两个按钮共享公用的CSS类，该类可以包含与其他对话框按钮相同的CSS设置：
.s7videoviewer .s7linkdialog .s7dialogfooter .s7button
按钮的 CSS属性
可以本地化按钮工具提示。 有关详细信息，请参阅用户界面元素的本地化。
示例 — 使用64 x 34 Cancel按钮设置对话框页脚，每种按钮状态的文本颜色和背景颜色不同：
.s7videoviewer .s7linkdialog .s7dialogfooter {
border-top: 1px solid #909090;
}
.s7videoviewer .s7linkdialog .s7dialogbuttoncontainer {
padding-bottom: 6px;
padding-top: 10px;
}
.s7videoviewer .s7linkdialog .s7dialogfooter .s7button {
box-shadow: 1px 1px 1px #999999;
color: #FFFFFF;
font-size: 9pt;
font-weight: bold;
line-height: 34px;
margin-right: 10px;
}
.s7videoviewer .s7linkdialog .s7dialogcancelbutton {
width:64px;
height:34px;
}
.s7videoviewer .s7linkdialog .s7dialogcancelbutton[state='up'] {
background-color:#666666;
color:#dddddd;
}
.s7videoviewer .s7linkdialog .s7dialogcancelbutton[state='down'] {
background-color:#555555;
color:#ffffff;
}
.s7videoviewer .s7linkdialog .s7dialogcancelbutton[state='over'] {
background-color:#555555;
color:#ffffff;
}
.s7videoviewer .s7linkdialog .s7dialogcancelbutton[state='disabled'] {
background-color:#b2b2b2;
color:#dddddd;
}
.s7videoviewer .s7linkdialog .s7dialogactionbutton {
width:82px;
height:34px;
}
.s7videoviewer .s7linkdialog .s7dialogactionbutton[state='up'] {
background-color:#333333;
color:#dddddd;
}
.s7videoviewer .s7linkdialog .s7dialogactionbutton[state='down'] {
background-color:#222222;
color:#cccccc;
}
.s7videoviewer .s7linkdialog .s7dialogactionbutton[state='over'] {
background-color:#222222;
color:#cccccc;
}
.s7videoviewer .s7linkdialog .s7dialogactionbutton[state='disabled'] {
background-color:#b2b2b2;
color:#dddddd;
}
主对话框区域位于页眉和页脚之间，包含对话框内容。 在任何情况下，组件都管理此区域的宽度 — 无法在CSS中设置此区域。 主对话框区域由以下CSS类选择器控制：
.s7videoviewer .s7linkdialog .s7dialogviewarea
对话框查看区域的 CSS属性
示例 — 要将主对话框区域设置为300像素高度，具有十像素边距，并使用白色背景：
.s7videoviewer .s7linkdialog .s7dialogviewarea {
background-color:#ffffff;
margin:10px;
height:300px;
}
所有表单内容（如标签和输入字段）都驻留在由控制的容器中
.s7videoviewer .s7linkdialog .s7dialogbody
对话框正文的 CSS属性
示例 — 要将表单内容设置为具有十个像素的填充：
.s7videoviewer .s7linkdialog .s7dialogbody {
padding: 10px;
}
对话框表单中的所有静态标签都由控制
.s7videoviewer .s7linkdialog .s7dialoglabel
此类不适合控制标签大小或位置，因为您可以将其应用于表单用户界面各个位置的文本。
对话框标签的 CSS属性。
可以本地化对话框标签。 有关详细信息，请参阅用户界面元素的本地化。
示例 — 将所有标签设置为灰色，粗体带九像素字体：
.s7videoviewer .s7linkdialog .s7dialoglabel {
color: #666666;
font-size: 9pt;
font-weight: bold;
}
显示在链接顶部的文本副本的大小可通过以下CSS类选择器进行控制：
.s7videoviewer .s7linkdialog .s7dialoginputwide
对话框输入范围字段的 CSS属性
示例 — 将文本副本的宽度设置为430像素，并在底部填充10像素：
.s7videoviewer .s7linkdialog .s7dialoginputwide {
padding-bottom: 10px;
width: 430px;
}
共享链接将封装在容器中，并使用以下CSS类选择器进行控制：
.s7videoviewer .s7linkdialog .s7dialoginputcontainer
对话框输入容器的 CSS属性
示例 — 要在嵌入代码文本周围设置一个像素灰色边框，并且边框间距为9像素：
.s7videoviewer .s7linkdialog .s7dialoginputcontainer {
border: 1px solid #CCCCCC;
padding: 9px;
}
共享链接本身可通过以下CSS类选择器进行控制：
.s7videoviewer .s7linkdialog .s7dialoglink
对话框共享链接的 CSS属性
示例 — 将共享链接设置为450像素宽：
.s7videoviewer .s7linkdialog .s7dialoglink {
width: 450px;
}