鏈路共用

連結分享工具由新增至Social分享面板的按鈕和在工具啟動時顯示的模態對話方塊組成。 按鈕的位置由Social分享工具完全管理。

連結共用按鈕的外觀是透過下列CSS類別選擇器來控制：

.s7videoviewer .s7linkshare

連結共用工具的CSS屬性

您可在Social共用面板的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屬性

「關閉」按鈕工具提示和對話框標題可以本地化。 如需詳細資訊，請參閱使用者介面元素的本地化。

範例——若要設定對話框標題，其中包含間距、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屬性

使用下列CSS類別選擇器控制「取消」按鈕：

.s7videoviewer .s7linkdialog .s7dialogcancelbutton

對話框取消按鈕的CSS屬性

此外，這兩個按鈕共用相同的通用CSS類別，可包含其他對話方塊按鈕相同的CSS設定：

.s7videoviewer .s7linkdialog .s7dialogfooter .s7button

按鈕的CSS屬性

按鈕工具提示可以本地化。 如需詳細資訊，請參閱使用者介面元素的本地化。

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

.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像素高、有10像素邊界，並使用白色背景：

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

所有表單內容（如標籤和輸入欄位）都位於

.s7videoviewer .s7linkdialog .s7dialogbody

對話方塊內文的CSS屬性

範例——若要設定表單內容，使其有10個像素間距：

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

對話框表單中的所有靜態標籤都由

.s7videoviewer .s7linkdialog .s7dialoglabel

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

對話方塊標籤的CSS屬性。

對話框標籤可以本地化。 如需詳細資訊，請參閱使用者介面元素的本地化。

範例——若要將所有標籤設為灰色、粗體及9像素字型：

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

範例——若要在內嵌程式碼文字周圍設定一個像素灰色邊框，並有九個像素的間距：

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

共用連結本身會使用下列CSS類別選擇器加以控制：

.s7videoviewer .s7linkdialog .s7dialoglink

對話框的CSS屬性共用連結

範例——將共用連結設定為450像素寬：

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