リンク共有 link-share
リンク共有ツールは、ソーシャル共有パネルに追加されるボタンと、このツールがアクティブになったときに表示されるモーダルダイアログボックスで構成されます。 ボタンの位置は、Social 共有ツールで完全に管理されます。
リンク共有ボタンの外観は、以下の CSS クラスセレクターを使用して制御します。
.s7video360viewer .s7linkshare
リンク共有ツールの CSS プロパティ
state
属性セレクター。ボタンの状態ごとに異なるスキンを適用するのに使用できます。このボタンを Social 共有パネルから削除するには、 display:none
CSS プロパティを CSS クラスに設定する。
ボタンのツールチップはローカライズできます。 詳しくは、 ユーザーインターフェイス要素のローカライゼーション.
例 — 28 x 28 ピクセルで、4 つのボタンの状態ごとに異なる画像を表示するリンク共有ボタンを設定するには、次のように記述します。
.s7video360viewer .s7linkshare {
width:28px;
height:28px;
}
.s7video360viewer .s7linkshare[state='up'] {
background-image:url(images/v2/LinkShare_dark_up.png);
}
.s7video360viewer .s7linkshare[state='over'] {
background-image:url(images/v2/LinkShare_dark_over.png);
}
.s7video360viewer .s7linkshare[state='down'] {
background-image:url(images/v2/LinkShare_dark_down.png);
}
.s7video360viewer .s7linkshare[state='disabled'] {
background-image:url(images/v2/LinkShare_dark_disabled.png);
}
アクティブなダイアログボックスが以下の CSS クラスセレクターを使用して制御されている場合に、Web ページを覆う背景オーバーレイ。
.s7video360viewer .s7linkdialog .s7backoverlay
背景オーバーレイの CSS プロパティ
例 — 不透明度が 70 %のグレーの背景オーバーレイを設定するには、次の手順を実行します。
.s7video360viewer .s7linkdialog .s7backoverlay {
opacity:0.7;
background-color:#222222;
}
デフォルトでは、モーダルダイアログボックスはデスクトップシステムの画面の中央に表示され、タッチデバイスの Web ページ領域全体に表示されます。 どの場合でも、ダイアログボックスの位置とサイズはコンポーネントによって管理されます。 このダイアログボックスは、以下の CSS クラスセレクターを使用して制御します。
.s7video360viewer .s7linkdialog .s7dialog
ダイアログボックスの CSS プロパティ
例 — タッチデバイスでブラウザーウィンドウ全体を使用し、背景が白いダイアログボックスを設定するには、次の手順を実行します。
.s7video360viewer.s7touchinput .s7linkdialog .s7dialog {
width:100%;
height:100%;
background-color: #ffffff;
}
ダイアログボックスのヘッダーは、アイコン、タイトルテキストおよび閉じるボタンで構成されます。 ヘッダーコンテナは、以下の CSS クラスセレクターを使用して制御します。
.s7video360viewer .s7linkdialog .s7dialogheader
ダイアログボックスヘッダーの CSS プロパティ
アイコンとタイトルテキストは、以下の CSS クラスセレクターを使用して制御する追加のコンテナにまとめられます。
.s7video360viewer .s7linkdialog .s7dialogheader .s7dialogline
ダイアログの行の CSS プロパティ
ヘッダーのアイコンは、以下の CSS クラスセレクターを使用して制御します。
.s7video360viewer .s7linkdialog .s7dialogheadericon
ダイアログボックスヘッダーのアイコンの CSS プロパティ
ヘッダーのタイトルは、以下の CSS クラスセレクターを使用して制御します。
.s7video360viewer .s7linkdialog .s7dialogheadertext
ダイアログボックスのヘッダーテキストの CSS プロパティ
閉じるボタンは、以下の CSS クラスセレクターを使用して制御します。
.s7video360viewer .s7linkdialog .s7closebutton
閉じるボタンの CSS プロパティ
state
属性セレクター。ボタンの状態ごとに異なるスキンを適用するのに使用できます。「閉じる」ボタンのツールチップとダイアログボックスのタイトルは、ローカライズできます。 詳しくは、 ユーザーインターフェイス要素のローカライゼーション.
例 — パディングを含むダイアログボックスヘッダー、22 x 12 ピクセルのアイコン、太字の 16 ポイントのタイトルを含むダイアログボックスヘッダーを設定します。 最後に、28 x 28 ピクセルの「閉じる」ボタンを使用します。このボタンは、ダイアログボックスコンテナの上から 2 ピクセル、右から 2 ピクセルの位置に配置します。
.s7video360viewer .s7linkdialog .s7dialogheader {
padding: 10px;
}
.s7video360viewer .s7linkdialog .s7dialogheader .s7dialogline {
padding: 10px 10px 2px;
}
.s7video360viewer .s7linkdialog .s7dialogheadericon {
background-image: url("images/sdk/dlglink_cap.png");
height: 12px;
width: 22px;
}
.s7video360viewer .s7linkdialog .s7dialogheadertext {
font-size: 16pt;
font-weight: bold;
padding-left: 16px;
}
.s7video360viewer .s7linkdialog .s7closebutton {
top:2px;
right:2px;
padding:8px;
width:28px;
height:28px;
}
.s7video360viewer .s7linkdialog .s7closebutton[state='up'] {
background-image:url(images/sdk/close_up.png);
}
.s7video360viewer .s7linkdialog .s7closebutton[state='over'] {
background-image:url(images/sdk/close_over.png);
}
.s7video360viewer .s7linkdialog .s7closebutton[state='down'] {
background-image:url(images/sdk/close_down.png);
}
.s7video360viewer .s7linkdialog .s7closebutton[state='disabled'] {
background-image:url(images/sdk/close_disabled.png);
}
ダイアログボックスのフッターは、「キャンセル」ボタンで構成されます。 フッターコンテナは、以下の CSS クラスセレクターを使用して制御します。
.s7video360viewer .s7linkdialog .s7dialogfooter
ダイアログボックスフッターの CSS プロパティ
フッターには、ボタンを保持する内部コンテナがあります。 これは、以下の CSS クラスセレクターを使用して制御します。
.s7video360viewer .s7linkdialog .s7dialogbuttoncontainer
ダイアログボックスのボタンコンテナの CSS プロパティ
「すべて選択」ボタンは、以下の CSS クラスセレクターを使用して制御します。
.s7video360viewer .s7linkdialog .s7dialogactionbutton
「 」ボタンはデスクトップシステムでのみ使用できます。
「すべて選択」ボタンの CSS プロパティ
state
属性セレクター。ボタンの状態ごとに異なるスキンを適用するのに使用できます。「キャンセル」ボタンは、以下の CSS クラスセレクターを使用して制御します。
.s7video360viewer .s7linkdialog .s7dialogcancelbutton
ダイアログボックスの CSS プロパティキャンセルボタン
state
属性セレクター。ボタンの状態ごとに異なるスキンを適用するのに使用できます。また、両方のボタンは共通の CSS クラスを共有します。このクラスには、他のダイアログボックスのボタンと同じ CSS 設定を含めることができます。
.s7video360viewer .s7linkdialog .s7dialogfooter .s7button
ボタンの CSS プロパティ
ボタンのツールチップはローカライズできます。 詳しくは、 ユーザーインターフェイス要素のローカライゼーション.
例 - 64 x 34 の [ キャンセル ] ボタンを含むダイアログボックスフッターを設定するには、ボタンの状態ごとに異なるテキスト色と背景色を使用します。
.s7video360viewer .s7linkdialog .s7dialogfooter {
border-top: 1px solid #909090;
}
.s7video360viewer .s7linkdialog .s7dialogbuttoncontainer {
padding-bottom: 6px;
padding-top: 10px;
}
.s7video360viewer .s7linkdialog .s7dialogfooter .s7button {
box-shadow: 1px 1px 1px #999999;
color: #FFFFFF;
font-size: 9pt;
font-weight: bold;
line-height: 34px;
margin-right: 10px;
}
.s7video360viewer .s7linkdialog .s7dialogcancelbutton {
width:64px;
height:34px;
}
.s7video360viewer .s7linkdialog .s7dialogcancelbutton[state='up'] {
background-color:#666666;
color:#dddddd;
}
.s7video360viewer .s7linkdialog .s7dialogcancelbutton[state='down'] {
background-color:#555555;
color:#ffffff;
}
.s7video360viewer .s7linkdialog .s7dialogcancelbutton[state='over'] {
background-color:#555555;
color:#ffffff;
}
.s7video360viewer .s7linkdialog .s7dialogcancelbutton[state='disabled'] {
background-color:#b2b2b2;
color:#dddddd;
}
.s7video360viewer .s7linkdialog .s7dialogactionbutton {
width:82px;
height:34px;
}
.s7video360viewer .s7linkdialog .s7dialogactionbutton[state='up'] {
background-color:#333333;
color:#dddddd;
}
.s7video360viewer .s7linkdialog .s7dialogactionbutton[state='down'] {
background-color:#222222;
color:#cccccc;
}
.s7video360viewer .s7linkdialog .s7dialogactionbutton[state='over'] {
background-color:#222222;
color:#cccccc;
}
.s7video360viewer .s7linkdialog .s7dialogactionbutton[state='disabled'] {
background-color:#b2b2b2;
color:#dddddd;
}
メインダイアログ領域(ヘッダーとフッターの間)には、ダイアログのコンテンツが含まれます。 どの場合でも、コンポーネントはこの領域の幅を管理します。CSS で設定することはできません。 ダイアログのメイン領域は、以下の CSS クラスセレクターを使用して制御します。
.s7video360viewer .s7linkdialog .s7dialogviewarea
ダイアログボックス表示領域の CSS プロパティ
例 — 高さが 300 ピクセルで、マージンが 10 ピクセルで、白の背景を使用するダイアログボックスのメイン領域を設定するには、次の手順を実行します。
.s7video360viewer .s7linkdialog .s7dialogviewarea {
background-color:#ffffff;
margin:10px;
height:300px;
}
すべてのフォームコンテンツ(ラベル、入力フィールドなど)は、コンテナ内に配置され、以下の CSS クラスセレクターを使用して制御します。
.s7video360viewer .s7linkdialog .s7dialogbody
ダイアログボックスの本体の CSS プロパティ
例 - 10 ピクセルのパディングを持つフォームコンテンツを設定するには:
.s7interactivevideoviewer .s7linkdialog .s7dialogbody {
padding: 10px;
}
ダイアログボックスフォーム内のすべての静的ラベルは、を使用して制御します。
.s7video360viewer .s7linkdialog .s7dialoglabel
このクラスは、フォームユーザーインターフェイスの様々な場所のテキストに適用できるので、ラベルのサイズや位置の制御には適していません。
ダイアログボックスのラベルの CSS プロパティ
ダイアログボックスのラベルはローカライズできます。 詳しくは、 ユーザーインターフェイス要素のローカライゼーション.
例 — グレー、太字、9 ピクセルのフォントにすべてのラベルを設定するには、次のように記述します。
.s7video360viewer .s7linkdialog .s7dialoglabel {
color: #666666;
font-size: 9pt;
font-weight: bold;
}
リンクの上部に表示されるテキストコピーのサイズは、以下の CSS クラスセレクターを使用して制御します。
.s7video360viewer .s7linkdialog .s7dialoginputwide
ダイアログボックスの入力全体のフィールドの CSS プロパティ
例 — テキストコピーの幅を 430 ピクセルに設定し、下に 10 ピクセルのパディングを持たせるには、次のように記述します。
.s7video360viewer .s7linkdialog .s7dialoginputwide {
padding-bottom: 10px;
width: 430px;
}
共有リンクはコンテナにラップされ、以下の CSS クラスセレクターを使用して制御します。
.s7video360viewer .s7linkdialog .s7dialoginputcontainer
ダイアログボックスの入力コンテナの CSS プロパティ
例 — 埋め込みコードテキストの周囲に 1 ピクセルのグレーの境界線を設定し、9 ピクセルのパディングを持つには、次のように記述します。
.s7video360viewer .s7linkdialog .s7dialoginputcontainer {
border: 1px solid #CCCCCC;
padding: 9px;
}
共有リンク自体は、以下の CSS クラスセレクターを使用して制御します。
.s7video360viewer .s7linkdialog .s7dialoglink
ダイアログボックス共有リンクの CSS プロパティ
例 — 共有リンクの幅を 450 ピクセルに設定するには:
.s7video360viewer .s7linkdialog .s7dialoglink {
width: 450px;
}