Partage de lien link-share

L’outil Partage de liens se compose d’un bouton ajouté au panneau Partage sur les réseaux sociaux et à la boîte de dialogue modale qui s’affiche lorsque l’outil est activé. La position du bouton est entièrement gérée par l’outil de partage sur les réseaux sociaux.

L’aspect du bouton de partage de lien est contrôlé par le sélecteur de classe CSS suivant :

.s7video360viewer .s7linkshare

Propriétés CSS de l’outil de partage de liens

Il est possible de supprimer le bouton du panneau Partage sur les réseaux sociaux en définissant display:none propriété CSS sur sa classe CSS.

L’info-bulle du bouton peut être localisée. Voir Localisation des éléments de l’interface utilisateur.

Exemple : pour configurer un bouton de partage de lien de 28 x 28 pixels qui affiche une image différente pour chacun des quatre états de bouton différents :

.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);
}

Le recouvrement d’arrière-plan qui couvre la page web lorsque la boîte de dialogue est active est contrôlé par le sélecteur de classe CSS suivant :

.s7video360viewer .s7linkdialog .s7backoverlay

Propriétés CSS du recouvrement d’arrière-plan

Exemple - pour configurer une superposition d’arrière-plan en gris avec une opacité de 70 % :

.s7video360viewer .s7linkdialog .s7backoverlay {
 opacity:0.7;
 background-color:#222222;
}

Par défaut, la boîte de dialogue modale s’affiche centrée sur l’écran sur les ordinateurs de bureau et occupe toute la zone de la page web sur les appareils tactiles. Dans tous les cas, le positionnement et le dimensionnement de la boîte de dialogue sont gérés par le composant . La boîte de dialogue est contrôlée avec le sélecteur de classe CSS suivant :

.s7video360viewer .s7linkdialog .s7dialog

Propriétés CSS de la boîte de dialogue

Exemple - pour configurer la boîte de dialogue afin qu’elle utilise toute la fenêtre du navigateur et présente un arrière-plan blanc sur les appareils tactiles :

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

L’en-tête de la boîte de dialogue se compose d’une icône, d’un texte de titre et d’un bouton Fermer. Le conteneur d’en-tête est contrôlé avec le sélecteur de classe CSS suivant :

.s7video360viewer .s7linkdialog .s7dialogheader

Propriétés CSS de l’en-tête de boîte de dialogue

L’icône et le texte du titre sont enveloppés dans un conteneur supplémentaire contrôlé par le sélecteur de classe CSS suivant :

.s7video360viewer .s7linkdialog .s7dialogheader .s7dialogline

Propriétés CSS de la ligne de boîte de dialogue

L’icône d’en-tête est contrôlée avec le sélecteur de classe CSS suivant

.s7video360viewer .s7linkdialog .s7dialogheadericon

Propriétés CSS de l’icône d’en-tête de boîte de dialogue

Le titre de l’en-tête est contrôlé avec le sélecteur de classe CSS suivant :

.s7video360viewer .s7linkdialog .s7dialogheadertext

Propriétés CSS du texte de l’en-tête de boîte de dialogue

Le bouton Fermer est contrôlé avec le sélecteur de classe CSS suivant :

.s7video360viewer .s7linkdialog .s7closebutton

Propriétés CSS de l’ du bouton Fermer

L’info-bulle du bouton Fermer et le titre de la boîte de dialogue peuvent être localisés. Voir Localisation des éléments de l’interface utilisateur.

Exemple - Pour configurer un en-tête de boîte de dialogue avec marge intérieure, icône de 22 x 12 pixels et titre en gras de 16 points. Enfin, un bouton Fermer de 28 x 28 pixels positionné à deux pixels du haut et à deux pixels de la droite du conteneur de boîte de dialogue :

.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);
}

Le pied de la boîte de dialogue se compose d’un bouton Annuler. Le conteneur de pied de page est contrôlé avec le sélecteur de classe CSS suivant :

.s7video360viewer .s7linkdialog .s7dialogfooter

Propriétés CSS du ​ de pied de boîte de dialogue

Le pied de page comporte un conteneur interne qui conserve le bouton. Il est contrôlé avec le sélecteur de classe CSS suivant :

.s7video360viewer .s7linkdialog .s7dialogbuttoncontainer

Propriétés CSS du conteneur de boutons de boîte de dialogue

Le bouton Tout sélectionner est contrôlé avec le sélecteur de classe CSS suivant :

.s7video360viewer .s7linkdialog .s7dialogactionbutton

Ce bouton n'est disponible que sur les ordinateurs de bureau.

Propriétés CSS du bouton Tout sélectionner

Le bouton Annuler est contrôlé avec le sélecteur de classe CSS suivant :

.s7video360viewer .s7linkdialog .s7dialogcancelbutton

Propriétés CSS de la boîte de dialogue, bouton Annuler

En outre, les deux boutons partagent une classe CSS commune qui peut contenir des paramètres CSS identiques pour les autres boutons de boîte de dialogue :

.s7video360viewer .s7linkdialog .s7dialogfooter .s7button

Propriétés CSS du bouton

Les info-bulles des boutons peuvent être localisées. Voir Localisation des éléments de l’interface utilisateur.

Exemple - pour configurer le pied de page d’une boîte de dialogue avec un bouton Annuler de 64 x 34, avec une couleur de texte et des couleurs d’arrière-plan différentes pour chaque état de bouton :

.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;
}

La zone de dialogue principale, entre l’en-tête et le pied de page, contient le contenu de la boîte de dialogue. Dans tous les cas, le composant gère la largeur de cette zone ; il n’est pas possible de la définir au format CSS. La zone de dialogue principale est contrôlée avec le sélecteur de classe CSS suivant :

.s7video360viewer .s7linkdialog .s7dialogviewarea

Propriétés CSS de la zone d’affichage de la boîte de dialogue

Exemple - pour configurer une zone de boîte de dialogue principale pour qu’elle ait une hauteur de 300 pixels, une marge de 10 pixels et un arrière-plan blanc :

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

Tout le contenu d’un formulaire, tel que les libellés et les champs de saisie, réside dans un conteneur contrôlé par le sélecteur de classe CSS suivant :

.s7video360viewer .s7linkdialog .s7dialogbody

Propriétés CSS du corps de la boîte de dialogue

Exemple - pour configurer le contenu d’un formulaire avec une marge intérieure de dix pixels :

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

Tous les libellés statiques du formulaire de boîte de dialogue sont contrôlés par

.s7video360viewer .s7linkdialog .s7dialoglabel

Cette classe ne convient pas pour contrôler la taille ou la position des libellés, car vous pouvez l’appliquer à des textes à différents endroits de l’interface utilisateur du formulaire.

Propriétés CSS du libellé de la boîte de dialogue. ​

Les libellés de la boîte de dialogue peuvent être localisés. Voir Localisation des éléments de l’interface utilisateur.

Exemple - pour configurer tous les libellés sur gris, en gras avec une police de neuf pixels :

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

La taille de la copie de texte affichée au-dessus du lien est contrôlée avec le sélecteur de classe CSS suivant :

.s7video360viewer .s7linkdialog .s7dialoginputwide

Propriétés CSS du champ de saisie de la boîte de dialogue

Exemple - pour définir la copie de texte sur une largeur de 430 pixels et une marge intérieure de 10 pixels en bas :

.s7video360viewer .s7linkdialog .s7dialoginputwide {
    padding-bottom: 10px;
    width: 430px;
}

Le lien de partage est encapsulé dans un conteneur et contrôlé avec le sélecteur de classe CSS suivant :

.s7video360viewer .s7linkdialog .s7dialoginputcontainer

Propriétés CSS du conteneur d’entrée de boîte de dialogue

Exemple - pour définir une bordure grise d’un pixel autour du texte du code incorporé et disposer de neuf pixels de marge intérieure :

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

Le lien de partage lui-même est contrôlé avec le sélecteur de classe CSS suivant :

.s7video360viewer .s7linkdialog .s7dialoglink

Propriétés CSS du lien de partage de boîte de dialogue

Exemple - pour définir le lien de partage sur une largeur de 450 pixels :

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