嵌入共用

嵌入共用工具由添加到「社交共用」面板的按鈕和激活工具時顯示的模式對話框組成。 按鈕的位置完全由社交共用工具管理。

嵌入共用按鈕的外觀由以下CSS類選擇器控制：

.s7videoviewer .s7embedshare

嵌入共用工具的CSS屬性

width	按鈕寬度。
height	按鈕高度。
背景影像	為給定按鈕狀態顯示的影像。
背景位置	如果使用CSS浮雕，則在圖稿浮雕內定位。 請參閱 CSS繁體 。

可以通過設定來從「社交共用」面板中刪除按鈕 display:none CSS類上的CSS屬性。

按鈕工具提示可以本地化。 請參閱 用戶介面元素的本地化 的子菜單。

示例 — 要設定28 x 28像素的嵌入共用按鈕，並為四個不同按鈕狀態中的每個狀態顯示不同的影像：

.s7videoviewer .s7embedshare {
 width:28px;
 height:28px;
}
.s7videoviewer .s7embedshare[state='up'] {
background-image:url(images/v2/EmbedShare_dark_up.png);
}
.s7videoviewer .s7embedshare[state='over'] {
background-image:url(images/v2/EmbedShare_dark_over.png);
}
.s7videoviewer .s7embedshare[state='down'] {
background-image:url(images/v2/EmbedShare_dark_down.png);
}
.s7videoviewer .s7embedshare[state='disabled'] {
background-image:url(images/v2/EmbedShare_dark_disabled.png);
}

當對話框處於活動狀態時覆蓋網頁的背景覆蓋層由以下CSS類選擇器控制：

.s7videoviewer .s7embeddialog .s7backoverlay

背景覆蓋的CSS屬性

不透明度	背景覆蓋不透明度。
背景色	背景覆蓋顏色。

示例 — 要設定背景覆蓋，使其為灰色且不透明度為70%:

.s7videoviewer .s7embeddialog .s7backoverlay {
 opacity:0.7;
 background-color:#222222;
}

預設情況下，模式對話框會以案頭系統螢幕的中心顯示，並在觸摸設備上獲取整個網頁區域。 在所有情況下，對話框的定位和大小由元件管理。 對話框由以下CSS類選擇器控制：

.s7videoviewer .s7embeddialog .s7dialog

對話框的CSS屬性

邊界半徑	對話框邊框半徑，以防對話框不佔用整個瀏覽器。
背景色	對話框背景顏色。
寬度	應取消設定，或設定為100%，在這種情況下，對話框將佔據整個瀏覽器窗口（此模式在觸摸設備上是首選模式）。
高度	應取消設定，或設定為100%，在這種情況下，對話框將佔據整個瀏覽器窗口（此模式在觸摸設備上是首選模式）。

示例 — 要設定對話框以使用整個瀏覽器窗口並在觸摸設備上具有白色背景：

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

對話框標題由表徵圖、標題文本和關閉按鈕組成。 集箱容器由

.s7videoviewer .s7embeddialog .s7dialogheader

對話框標題的CSS屬性

填補

標題內容的內填充。

表徵圖和標題文本被包裝到由

.s7videoviewer .s7embeddialog .s7dialogheader .s7dialogline

對話框行的CSS屬性

填補	標題表徵圖和標題的內填充

標題表徵圖由以下CSS類選擇器控制

.s7videoviewer .s7embeddialog .s7dialogheadericon

對話框標題表徵圖的CSS屬性

寬度	表徵圖寬度。
高度	表徵圖高度。
背景影像	表徵圖影像。
背景位置	如果使用CSS浮雕，則在圖稿浮雕內定位。 請參閱 CSS繁體 。

標題由以下CSS類選擇器控制：

.s7videoviewer .s7embeddialog .s7dialogheadertext

對話框標題文本的CSS屬性

字型粗細	字型粗細。
字型大小	字型高度。
字型系列	字型系列。
填補	內部文本填充。

關閉按鈕由以下CSS類選擇器控制：

.s7videoviewer .s7embeddialog .s7closebutton

關閉按鈕的CSS屬性

頂部	垂直按鈕相對於標題容器的位置。
右側	水準按鈕相對於標題容器的位置。
寬度	按鈕寬度。
高度	按鈕高度。
填補	按鈕的內填充。
背景影像	每個狀態的按鈕影像。
背景位置	如果使用CSS浮雕，則在圖稿浮雕內定位。 請參閱 CSS繁體 。

「關閉」(Close)按鈕工具提示和對話框標題可以本地化。 請參閱 用戶介面元素的本地化 的子菜單。

示例 — 要設定帶填充的對話框標題，24 x 14像素表徵圖，加粗16點標題。 最後，一個28 x 28像素的關閉按鈕，從頂部放置兩個像素，從對話框容器右側放置兩個像素：

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

對話框頁腳由「取消」按鈕組成。 頁腳容器由以下CSS類選擇器控制：

.s7videoviewer .s7embeddialog .s7dialogfooter

對話框頁腳的CSS屬性

border

可用於將頁腳與對話框其餘部分視覺分離的邊框。

頁腳具有保持按鈕的內部容器。 它由以下CSS類選擇器控制：

.s7videoviewer .s7embeddialog .s7dialogbuttoncontainer

對話框按鈕容器的CSS屬性

填補	頁腳和按鈕之間的內填充。

「全選」按鈕由以下CSS類選擇器控制：

.s7videoviewer .s7embeddialog .s7dialogactionbutton

該按鈕僅在案頭系統上可用。

「全選」按鈕的CSS屬性

寬度	按鈕寬度。
高度	按鈕高度。
color	每個狀態的按鈕文本顏色。
背景色	每個狀態的按鈕背景顏色。

「取消」按鈕由以下CSS類選擇器控制：

.s7videoviewer .s7embeddialog .s7dialogcancelbutton

「取消」對話框的CSS屬性按鈕

寬度	按鈕寬度。
高度	按鈕高度。
顏色	每個狀態的按鈕文本顏色。
背景色	每個狀態的按鈕背景顏色。

此外，兩個按鈕共用公用CSS類，這些類可包含其他對話框按鈕相同的CSS設定：

.s7videoviewer .s7embeddialog .s7dialogfooter .s7button

按鈕的CSS屬性

字型粗細	按鈕字型粗細。
字型大小	按鈕字型大小。
字型系列	按鈕字型系列。
線高	按鈕內的文本高度。 影響垂直對齊。
框陰影	投影。
邊距右	右按鈕邊距。

按鈕工具提示可以本地化。 請參閱 用戶介面元素的本地化 的子菜單。

示例 — 要設定一個對話框頁腳，其中按64 x 34取消按鈕，每個按鈕狀態的文本顏色和背景顏色不同：

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

主對話框區域（頁眉和頁腳之間）包含右側的可滾動對話內容和滾動面板。 在所有情況下，元件都管理此區域的寬度，無法在CSS中設定它。 主對話框區域由以下CSS類選擇器控制：

.s7videoviewer .s7embeddialog .s7dialogviewarea

對話框查看區域的CSS屬性

高度	主對話框區域的高度。 只有在對話框在案頭模式下工作時才應指定該對話框。 當對話框的大小為佔用整個瀏覽器窗口時，它不適用。
背景色	主對話框區域的背景顏色。
margin	外邊距。

示例 — 要將主對話框區域設定為300像素高度、具有10像素邊距並使用白色背景：

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

所有表單內容（如標籤和輸入欄位）都駐留在由

.s7videoviewer .s7embeddialog .s7dialogbody

如果此容器的高度似乎大於主對話框區域，則元件會自動啟用垂直滾動。

對話框主體的CSS屬性

填補

內填充。

示例 — 要將表單內容設定為具有十個像素填充：

.s7videoviewer .s7embeddialog .s7dialogbody {
    padding: 10px;
}

對話框窗體中的所有靜態標籤都由

.s7videoviewer .s7embeddialog .s7dialoglabel

此類不適於控制標籤大小或位置，因為您可以將其應用於表單用戶介面不同位置的文本。

對話框標籤的CSS屬性。 ​

字型粗細	標籤字型粗細。
字型大小	標籤字型大小。
字型系列	標籤字型系列。
顏色	標籤文本顏色。

對話框標籤工具提示可以本地化。 請參閱 用戶介面元素的本地化 的子菜單。

示例 — 將所有標籤設定為灰色，用9像素字型加粗：

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

嵌入代碼頂部顯示的文本副本的大小由以下CSS類選擇器控制：

.s7videoviewer .s7embeddialog .s7dialoginputwide

對話框輸入範圍欄位的CSS屬性

寬度	輸入欄位寬度。
填補	內填充。

示例 — 將文本副本設定為寬430像素，並在底部填充10像素：

.s7videoviewer .s7embeddialog .s7dialoginputwide {
    padding-bottom: 10px;
    width: 430px;
}

嵌入代碼包裝到容器中，並使用以下CSS類選擇器進行控制：

.s7videoviewer .s7embeddialog .s7dialoginputcontainer

對話框輸入容器的CSS屬性

寬度	嵌入代碼容器的寬度。
邊界	嵌入代碼容器周圍的邊框。
填補	內填充。

示例 — 要在嵌入代碼文本週圍設定一個像素灰度邊框，請使其寬度為430像素，並使用十像素填充：

.s7videoviewer .s7embeddialog .s7dialoginputcontainer {
    border: 1px solid #CCCCCC;
    padding: 10px;
    width: 430px;
}

實際嵌入代碼文本由以下CSS類選擇器控制：

.s7videoviewer .s7embeddialog .s7dialoginputcontainer

對話框輸入容器的CSS屬性

換行

換行樣式。

示例 — 設定嵌入代碼，以便使用 break-word 換行：

.s7videoviewer .s7embeddialog .s7dialogmessage {
    word-wrap: break-word;
}

嵌入大小標籤和下拉清單位於對話框底部，並放入由以下CSS類選擇器控制的容器中：

.s7videoviewer .s7embeddialog .s7dialogembedsizepanel

對話框嵌入大小面板的CSS屬性

填補

內填充。

示例 — 要設定嵌入大小面板，使其具有十個填充像素：

.s7videoviewer .s7embeddialog .s7dialogembedsizepanel {
    padding: 10px;
}

嵌入大小標籤的大小和對齊方式由以下CSS類選擇器控制：

.s7videoviewer .s7embeddialog .s7dialogembedsizepanel

對話框嵌入大小面板的CSS屬性

垂直對齊	垂直標籤對齊。
寬度	標籤寬度。

示例 — 將嵌入大小標籤設定為上對齊和80像素寬：

.s7videoviewer .s7embeddialog .s7dialogembedsizelabel {
    vertical-align: top;
    width: 80px;
}

嵌入大小組合框的寬度由以下CSS類選擇器控制：

.s7videoviewer .s7embeddialog .s7combobox

組合框的CSS屬性

寬度

組合框寬度。

示例 — 要將顯示預定義項時的嵌入大小組合框設定為300像素寬，顯示自定義大小時設定為110像素寬：

.s7videoviewer .s7embeddialog .s7combobox[expanded="true"] {
    width: 300px;
}
.s7videoviewer .s7embeddialog .s7combobox[expanded="false"] {
    width: 110px;
}

組合框文本的高度由特殊的內部元素定義，並由以下CSS類選擇器控制：

.s7videoviewer .s7embeddialog .s7combobox .s7comboboxtext

組合框文本的CSS屬性

高度

組合框文本高度。

示例 — 將嵌入大小組合框文本高度設定為40像素：

.s7videoviewer .s7embeddialog .s7combobox .s7comboboxtext {
    height: 40px;
}

組合框右側有一個「下拉」按鈕，它由以下CSS類選擇器控制：

.s7videoviewer .s7embeddialog .s7combobox .s7comboboxbutton

組合框按鈕的CSS屬性

頂部	組合框內的垂直按鈕位置。
右側	組合框內的水準按鈕位置。
寬度	按鈕寬度。
高度	按鈕高度。
背景影像	每個狀態的按鈕影像。
背景位置	如果使用CSS浮雕，則在圖稿浮雕內定位。 請參閱 CSS繁體 。

此按鈕支援 state 屬性選擇器，可用於將不同外觀應用於不同按鈕狀態。

示例 — 將「下拉」按鈕設定為28 x 28像素，並為每個狀態提供單獨的影像：

.s7videoviewer .s7embeddialog .s7combobox .s7comboboxbutton {
 width:28px;
 height:28px;
}
.s7videoviewer .s7embeddialog .s7combobox .s7comboboxbutton[state='up'] {
 background-image:url(images/sdk/cboxbtndn_up.png);
}
.s7videoviewer .s7embeddialog .s7combobox .s7comboboxbutton[state='over'] {
 background-image:url(images/sdk/cboxbtndn_over.png);
}
.s7videoviewer .s7embeddialog .s7combobox .s7comboboxbutton[state='down'] {
 background-image:url(images/sdk/cboxbtndn_over.png);
}
.s7videoviewer .s7embeddialog .s7combobox .s7comboboxbutton[state='disabled'] {
 background-image:url(images/sdk/cboxbtndn_up.png);
}

開啟組合框時顯示嵌入大小清單的面板由以下CSS類選擇器控制：

.s7videoviewer .s7embeddialog .s7comboboxdropdown

面板的尺寸和位置由部件控制。 無法通過CSS更改它。

組合框的CSS屬性

邊界

面板邊框。

示例 — 要將組合框面板設定為具有一個像素灰度邊框：

.s7videoviewer .s7embeddialog .s7comboboxdropdown {
    border: 1px solid #CCCCCC;
}

下拉面板中由以下CSS類選擇器控制的單個項：

.s7videoviewer .s7embeddialog .s7dropdownitemanchor

下拉項錨點的CSS屬性

背景色

項目背景。

示例 — 要將組合框面板項設定為白色背景：

.s7videoviewer .s7embeddialog .s7dropdownitemanchor {
    background-color: #FFFFFF;
}

組合框面板中選定項左側顯示的複選標籤，該面板由以下CSS類選擇器控制：

.s7videoviewer .s7embeddialog .s7checkmark

複選標籤框的CSS屬性

寬度	表徵圖寬度。
高度	表徵圖高度。
背景影像	項目影像。
背景位置	如果使用CSS浮雕，則在圖稿浮雕內定位。 請參閱 CSS繁體 。

示例 — 將複選標籤表徵圖設定為25 x 25像素：

.s7videoviewer .s7embeddialog .s7checkmark {
    background-image: url("images/sdk/cboxchecked.png");
    height: 25px;
    width: 25px;
}

在嵌入大小組合框中選擇「自定義大小」選項時，該對話框在右側顯示兩個額外的輸入欄位，以允許用戶輸入自定義嵌入大小。 這些欄位包裝在由以下CSS類選擇器控制的容器中：

.s7videoviewer .s7embeddialog .s7dialogcustomsizepanel

對話框自定義大小面板的CSS屬性

左側	距離嵌入大小組合框的距離。

示例 — 要將自定義大小的輸入欄位面板設定為組合框右側的20像素：

.s7videoviewer .s7embeddialog .s7dialogcustomsizepanel {
    left: 20px;
}

每個自定義大小輸入欄位都包裝在一個容器中，該容器呈現邊框並設定欄位之間的邊距。 它由以下CSS類選擇器控制：

.s7videoviewer .s7embeddialog .s7dialogcustomsize

對話框的CSS屬性自定義大小

邊界	輸入欄位周圍的邊框。
寬度	輸入欄位寬度。
邊緣	輸入欄位邊距。
填補	輸入欄位填充。

示例 — 要將自定義大小的輸入欄位設定為具有一個像素的灰度邊框、邊距、填充和70像素寬：

.s7videoviewer .s7embeddialog .s7dialogcustomsize {
    border: 1px solid #CCCCCC;
    margin-right: 20px;
    padding-left: 2px;
    padding-right: 2px;
    width: 70px;
}

如果需要垂直滾動，則捲動條將呈現在對話框右邊緣附近的面板中，該對話框由以下CSS類選擇器控制：

.s7videoviewer .s7embeddialog .s7dialogscrollpanel

對話框滾動面板的CSS屬性

寬度

滾動面板寬度。

示例 — 將滾動面板設定為44像素寬

.s7videoviewer .s7embeddialog .s7dialogscrollpanel {
    width: 44px;
}

捲動條區域的外觀由以下CSS類選擇器控制：

.s7videoviewer .s7embeddialog .s7scrollbar

捲動條的CSS屬性

寬度	捲動條寬度。
頂部	垂直捲動條從滾動面板頂部偏移。
底部	垂直捲動條從滾動面板的底部偏移。
右側	水準捲動條從滾動面板的右邊緣偏移。

示例 — 要設定寬度為28像素的捲動條，並且從滾動面板的頂部、右側和底部有八個像素邊距：

.s7videoviewer .s7embeddialog .s7scrollbar {
    bottom: 8px;
    right: 8px;
    top: 8px;
    width: 28px;
}

捲動條軌道是頂部和底部滾動按鈕之間的區域。 該元件自動設定軌道的位置和高度。 使用以下CSS類選擇器控制磁軌

.s7videoviewer .s7embeddialog .s7scrollbar .s7scrolltrack

捲動條軌道的CSS屬性

寬度	軌道寬度。
背景色	跟蹤背景顏色。

示例 — 要設定寬度為28像素且具有灰色背景的捲動條軌道：

.s7videoviewer .s7embeddialog .s7scrollbar .s7scrolltrack {
width:28px;
background-color: #B2B2B2;
}

捲動條拇指在滾動軌道區域內垂直移動。 其垂直位置完全由分量邏輯控制。 但是，拇指高度不會根據內容的數量動態變化。 拇指高度和其他方面可以使用以下CSS類選擇器配置：

.s7videoviewer .s7embeddialog .s7scrollbar .s7scrollthumb

捲動條拇指的CSS屬性

寬度	拇指寬度。
高度	拇指高。
上填充	軌道頂部之間的垂直填充。
填充底部	軌道底部之間的垂直填充。
背景影像	為給定的拇指狀態顯示的影像。

示例 — 要設定一個28 x 45像素的捲動條拇指，該拇指的頂部和底部有10個像素邊距，並且每種狀態都有不同的圖稿：

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

頂部和底部滾動按鈕的外觀由以下CSS類選擇器控制：

.s7videoviewer .s7embeddialog .s7scrollbar .s7scrollupbutton

.s7videoviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton

無法使用CSS上、左、下和右屬性定位滾動按鈕。 相反，查看器邏輯自動定位它們。

頂部和底部滾動按鈕的CSS屬性

寬度	按鈕寬度。
高度	按鈕高度。
背景影像	為給定按鈕狀態顯示的影像。
背景位置	如果使用CSS浮雕，則在圖稿浮雕內定位。 請參閱 CSS繁體 。

按鈕工具提示可以本地化。 請參閱 用戶介面元素的本地化 的子菜單。

示例 — 設定28 x 32像素且每種狀態具有不同圖稿的滾動按鈕：

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