リンク共有 link-share
リンク共有ツールは、ソーシャル共有パネルに追加されたボタンと、ツールがアクティベートされたときに表示されるモーダルダイアログボックスで構成されます。 ボタンの位置は、ソーシャル共有ツールで完全に管理されます。
リンク共有ボタンの外観は、次の CSS クラスセレクターで制御します。
.s7video360viewer .s7linkshare
リンク共有ツールの CSS プロパティ
state
属性セレクターをサポートしています。CSS クラスに CSS プロパティを設定することで、ソーシャル共有パネルからボタン display:none
削除することができます。
ボタンのツールチップはローカライズできます。 ユーザーインターフェイス要素のローカライゼーションを参照してください。
例 – 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 ポイントのタイトルのダイアログボックスヘッダーを設定します。 最後に、ダイアログボックスのコンテナの上から 2 ピクセル、右から 2 ピクセルの位置にある 28 x 28 ピクセルの「閉じる」ボタンを選択します。
.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;
}