Partage email email-share

L’outil de partage de courrier électronique se compose d’un bouton ajouté au panneau de partage de Social 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 Social.

L’apparence du bouton de partage de courrier électronique est contrôlée par le sélecteur de classe CSS suivant :

.s7videoviewer .s7emailshare

Propriétés CSS de l’outil de partage de courrier électronique.

Ce bouton prend en charge le sélecteur d’attributs state , qui peut être utilisé pour appliquer différents habillages à différents états de bouton.

Il est possible de supprimer le bouton du panneau de partage Social en définissant display:none la propriété CSS sur sa classe CSS.

L’info-bulle du bouton peut être localisée. Pour plus d’informations, voir Localisation des éléments de l’interface utilisateur.

Exemple - pour configurer un bouton de partage de courrier électronique de 28 x 28 pixels et qui affiche une image différente pour chacun des quatre états différents du bouton.

.s7videoviewer .s7emailshare {
 width:28px;
 height:28px;
}
.s7videoviewer .s7emailshare[state='up'] {
background-image:url(images/v2/EmailShare_dark_up.png);
}
.s7videoviewer .s7emailshare[state='over'] {
background-image:url(images/v2/EmailShare_dark_over.png);
}
.s7videoviewer .s7emailshare[state='down'] {
background-image:url(images/v2/EmailShare_dark_down.png);
}
.s7videoviewer .s7emailshare[state='disabled'] {
background-image:url(images/v2/EmailShare_dark_disabled.png);
}

La superposition d’arrière-plan, qui couvre la page Web lorsque la boîte de dialogue est active, est contrôlée par le sélecteur de classe CSS suivant :

.s7videoviewer .s7emaildialog .s7backoverlay

Propriétés CSS du recouvrement arrière

Exemple - Pour définir le recouvrement d’arrière-plan de manière à ce qu’il soit gris avec un taux d’opacité de 70 % :

.s7videoviewer .s7emaildialog .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 par le sélecteur de classe CSS suivant :

.s7videoviewer .s7emaildialog .s7dialog

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

Exemple - pour configurer la boîte de dialogue afin d’utiliser toute la fenêtre du navigateur et d’avoir un fond blanc sur les appareils tactiles :

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

L’en-tête de 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é par le sélecteur de classe CSS suivant :

.s7videoviewer .s7emaildialog .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 .

.s7videoviewer .s7emaildialog .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

.s7videoviewer .s7emaildialog .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é par le sélecteur de classe CSS suivant :

.s7videoviewer .s7emaildialog .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 :

.s7videoviewer .s7emaildialog .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. Pour plus d’informations, voir Localisation des éléments de l’interface utilisateur.

Exemple - Pour configurer l’en-tête de boîte de dialogue avec un remplissage, une icône de 24 x 17 pixels, un titre en gras de 16 points et un bouton de fermeture de 28 x 28 pixels. Enfin, positionnez-le à deux pixels du haut et à deux pixels de la droite du conteneur de dialogue :

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

Le pied de page de boîte de dialogue se compose des boutons « annuler » et « envoyer un e-mail ». Le conteneur de pied de page est contrôlé par le sélecteur de classe CSS suivant :

.s7videoviewer .s7emaildialog .s7dialogfooter

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

Le pied de page a un conteneur intérieur qui conserve les deux boutons. Elle est contrôlée par le sélecteur de classe CSS suivant :

.s7videoviewer .s7emaildialog .s7dialogbuttoncontainer

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

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

.s7videoviewer .s7emaildialog .s7dialogcancelbutton

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

Le bouton Envoyer un courrier électronique est contrôlé par le sélecteur de classe CSS suivant :

.s7videoviewer .s7emaildialog .s7dialogactionbutton

Propriétés CSS du bouton d’action de boîte de dialogue

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 :

.s7videoviewer .s7emaildialog .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 pour plus d’informations.

Exemple - pour configurer un pied de page de boîte de dialogue avec un bouton Annuler 64 x 34 et un bouton Envoyer un courrier électronique de 82 x 34, la couleur du texte et la couleur d’arrière-plan étant différentes pour chaque état du bouton :

.s7videoviewer .s7emaildialog .s7dialogfooter {
    border-top: 1px solid #909090;
}
.s7videoviewer .s7emaildialog .s7dialogbuttoncontainer {
    padding-bottom: 6px;
    padding-top: 10px;
}
.s7videoviewer .s7emaildialog .s7dialogfooter .s7button {
    box-shadow: 1px 1px 1px #999999;
    color: #FFFFFF;
    font-size: 9pt;
    font-weight: bold;
    line-height: 34px;
    margin-right: 10px;
}
.s7videoviewer .s7emaildialog .s7dialogcancelbutton {
 width:64px;
 height:34px;
}
.s7videoviewer .s7emaildialog .s7dialogcancelbutton[state='up'] {
 background-color:#666666;
 color:#dddddd;
}
.s7videoviewer .s7emaildialog .s7dialogcancelbutton[state='down'] {
 background-color:#555555;
 color:#ffffff;
}
.s7videoviewer .s7emaildialog .s7dialogcancelbutton[state='over'] {
 background-color:#555555;
 color:#ffffff;
}
.s7videoviewer .s7emaildialog .s7dialogcancelbutton[state='disabled'] {
 background-color:#b2b2b2;
 color:#dddddd;
}
.s7videoviewer .s7emaildialog .s7dialogactionbutton {
 width:82px;
 height:34px;
}
.s7videoviewer .s7emaildialog .s7dialogactionbutton[state='up'] {
 background-color:#333333;
 color:#dddddd;
}
.s7videoviewer .s7emaildialog .s7dialogactionbutton[state='down'] {
 background-color:#222222;
 color:#cccccc;
}
.s7videoviewer .s7emaildialog .s7dialogactionbutton[state='over'] {
 background-color:#222222;
 color:#cccccc;
}
.s7videoviewer .s7emaildialog .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 défilante et le panneau de défilement sur la droite. Dans tous les cas, le composant gère la largeur de cette zone, il n’est pas possible de la définir dans CSS. La zone de dialogue principale est contrôlée par le sélecteur de classe CSS suivant :

.s7videoviewer .s7emaildialog .s7dialogviewarea

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

Exemple : pour définir la zone de la boîte de dialogue principale de manière à ce qu’elle ait initialement une hauteur de 300 pixels et une hauteur de 100 pixels lorsque le message de confirmation s’affiche, ayez une marge de dix pixels et utilisez un fond blanc :

.s7videoviewer .s7emaildialog .s7dialogviewarea {
 background-color:#ffffff;
 margin:10px;
 height:300px;
}
.s7videoviewer .s7emaildialog .s7dialogviewarea[state='sendsuccess'] {
 height:100px;
}

Tout le contenu du formulaire (tels que les libellés et les champs de saisie) réside dans un conteneur contrôlé par

.s7videoviewer .s7emaildialog .s7dialogbody

Si la hauteur de ce conteneur semble supérieure à la zone de boîte de dialogue principale, un défilement vertical est activé automatiquement par le composant.

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

Exemple : pour configurer le contenu d’un formulaire avec un remplissage de dix pixels :

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

Le formulaire de boîte de dialogue est rempli ligne par ligne, chaque ligne portant une partie du contenu du formulaire (comme une étiquette et un champ de saisie de texte). La ligne de formulaire unique est contrôlée par le sélecteur de classe CSS suivant :

.s7videoviewer .s7emaildialog .s7dialogbody .s7dialogline

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

Exemple - pour configurer un formulaire de boîte de dialogue avec un remplissage de dix pixels pour chaque ligne :

.s7videoviewer .s7emaildialog .s7dialogbody .s7dialogline {
    padding: 10px;
}

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

.s7videoviewer .s7emaildialog .s7dialoglabel

Cette classe ne convient pas au contrôle de la taille ou de la position des étiquettes, car vous pouvez l’appliquer à des textes situés à 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 pour plus d’informations.

Exemple : pour définir toutes les étiquettes de manière à ce qu’elles soient grises, en gras avec une police de neuf pixels :

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

Toutes les étiquettes statiques affichées à gauche des champs de saisie du formulaire sont contrôlées par :

.s7videoviewer .s7emaildialog .s7dialoginputlabel

Propriétés CSS de l’étiquette d’entrée de la boîte de dialogue

Exemple : pour configurer des libellés de champ de saisie d’une largeur de 50 pixels, alignés à droite, avec une marge de remplissage de dix pixels et une marge de dix pixels sur la droite :

.s7videoviewer .s7emaildialog .s7dialoginputlabel {
    margin-right: 10px;
    padding: 10px;
    text-align: right;
    width: 50px;
}

Chaque champ de saisie de formulaire est enveloppé dans le conteneur, ce qui vous permet d’appliquer une bordure personnalisée autour du champ de saisie. Il est contrôlé avec le sélecteur de classe CSS suivant :

.s7videoviewer .s7emaildialog .s7dialoginputcontainer

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

La plupart des champs de saisie qui s’étendent du libellé à gauche jusqu’au bord droit du corps de la boîte de dialogue (qui inclut le champ « de » et le champ « message ») sont contrôlés avec :

.s7videoviewer .s7emaildialog .s7dialoginputwide

Propriétés CSS du champ largeur d’entrée de la boîte de dialogue

Le champ de saisie « À » est plus étroit car il alloue de l’espace pour le bouton « Supprimer l’e-mail » à droite. Elle est contrôlée par le sélecteur de classe CSS suivant :

.s7videoviewer .s7emaildialog .s7dialoginputshort

Propriétés CSS de la boîte de dialogue Champ court d’entrée

Exemple - Pour configurer un formulaire avec une bordure grise d’un pixel avec neuf pixels de remplissage autour de tous les champs de saisie. Pour avoir la même bordure en rouge pour les champs qui n’ont pas été validés, pour avoir un champ d’entrée « À » de 250 pixels de large et le reste des champs d’entrée d’une largeur de 300 pixels :

.s7videoviewer .s7emaildialog .s7dialoginputcontainer {
    border: 1px solid #CCCCCC;
    padding: 9px;
}
.s7videoviewer .s7emaildialog .s7dialoginputcontainer[state="verifyerror"] {
    border: 1px solid #FF0000;
}
.s7videoviewer .s7emaildialog .s7dialoginputshort {
    width: 250px;
}
.s7videoviewer .s7emaildialog .s7dialoginputwide {
    width: 300px;
}

Le champ de saisie des messages électroniques est également contrôlé par :

.s7videoviewer .s7emaildialog .s7dialogmessage

Cette classe permet de définir des propriétés spécifiques pour l’élément sous-jacent TEXTAREA .

Propriétés CSS du message de boîte de dialogue

Exemple : pour configurer un message électronique de 50 pixels de haut et utiliser le break-word retour automatique à la ligne :

.s7videoviewer .s7emaildialog .s7dialogmessage {
    height: 50px;
    word-wrap: break-word;
}

Le bouton « Ajouter une autre adresse e-mail » permet à un utilisateur d’ajouter plus d’un destinataire dans le formulaire de courrier électronique. Elle est contrôlée par le sélecteur de classe CSS suivant :

.s7videoviewer .s7emaildialog .s7dialogaddemailbutton

Propriétés CSS de la boîte de dialogue Bouton Ajouter une adresse électronique

L’info-bulle du bouton peut être localisée. Pour plus d’informations, voir Localisation des éléments de l’interface utilisateur.

Exemple - pour définir le bouton « Ajouter une autre adresse e-mail » de 25 pixels de haut, utilisez une police en gras de 12 points avec alignement à droite et une couleur et une image de texte différentes pour chaque état :

.s7videoviewer .s7emaildialog .s7dialogaddemailbutton {
 text-align:right;
 font-size:12pt;
 font-weight:bold;
 background-position:left center;
 line-height:25px;
 padding-left:30px;
 height:25px;
}
.s7videoviewer .s7emaildialog .s7dialogaddemailbutton[state='up'] {
 color:#666666;
 background-image:url(images/sdk/dlgaddplus_up.png);
}
.s7videoviewer .s7emaildialog .s7dialogaddemailbutton[state='down'] {
 color:#000000;
 background-image:url(images/sdk/dlgaddplus_over.png);
}
.s7videoviewer .s7emaildialog .s7dialogaddemailbutton[state='over'] {
 color:#000000;
 text-decoration:underline;
 background-image:url(images/sdk/dlgaddplus_over.png);
}
.s7videoviewer .s7emaildialog .s7dialogaddemailbutton[state='disabled'] {
 color:#666666;
 background-image:url(images/sdk/dlgaddplus_up.png);
}

Le bouton « Supprimer » permet à un utilisateur de supprimer des destinataires supplémentaires du formulaire électronique. Il est contrôlé avec le sélecteur de classe CSS suivant :

.s7videoviewer .s7emaildialog .s7dialogremoveemailbutton

Les propriétés CSS de la boîte de dialogue suppriment le bouton e-mail

L’info-bulle du bouton peut être localisée. Pour plus d’informations, voir Localisation des éléments de l’interface utilisateur.

Exemple - pour configurer un bouton « Supprimer » de 25 x 25 pixels et utiliser une image différente pour chaque état :

.s7videoviewer .s7emaildialog .s7dialogremoveemailbutton {
 width:25px;
 height:25px;
}
.s7videoviewer .s7emaildialog .s7dialogremoveemailbutton[state='up'] {
 background-image:url(images/sdk/dlgremove_up.png);
}
.s7videoviewer .s7emaildialog .s7dialogremoveemailbutton[state='over'] {
 background-image:url(images/sdk/dlgremove_over.png);
}
.s7videoviewer .s7emaildialog .s7dialogremoveemailbutton[state='down'] {
 background-image:url(images/sdk/dlgremove_over.png);
}
.s7videoviewer .s7emaildialog .s7dialogremoveemailbutton[state='disabled'] {
 background-image:url(images/sdk/dlgremove_up.png);
}

Le contenu partagé s’affiche au bas du corps de la boîte de dialogue et comprend une miniature, un titre, une URL d’origine et une description. Il est emballé dans un récipient contrôlé par :

.s7videoviewer .s7emaildialog .s7dialogbody .s7dialogcontent

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

Exemple - Pour configurer un conteneur inférieur de sorte qu’il ait une bordure pointillée d’un pixel sans remplissage :

.s7videoviewer .s7emaildialog .s7dialogbody .s7dialogcontent {
    border: 1px dotted #A0A0A0;
    padding: 0;
}

L’image miniature est contrôlée par le sélecteur de classe CSS suivant :

.s7videoviewer .s7emaildialog .s7dialogthumbnail

La propriété background-image est définie par la logique du composant.

Propriétés CSS de l’image miniature de la boîte de dialogue

Exemple : pour configurer la miniature de 90 x 60 pixels et alignée en haut avec dix pixels de remplissage :

.s7videoviewer .s7emaildialog .s7dialogthumbnail {
    height: 60px;
    padding: 10px;
    vertical-align: top;
    width: 90px;
}

Le titre, l’origine et la description du contenu sont ensuite regroupés dans un panneau à droite de la miniature du contenu. Elle est contrôlée par le sélecteur de classe CSS suivant :

.s7videoviewer .s7emaildialog .s7dialoginfopanel

Propriétés CSS du panneau d’informations de la boîte de dialogue

Exemple - Pour configurer un panneau d’informations sur le contenu de 300 pixels de large :

.s7videoviewer .s7emaildialog .s7dialoginfopanel {
    width: 300px;
}

Le titre du contenu est contrôlé par le sélecteur de classe CSS suivant :

.s7videoviewer .s7emaildialog .s7dialogtitle

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

Exemple : pour configurer un titre de contenu de sorte qu’il utilise une police en gras et une marge de dix pixels :

.s7videoviewer .s7emaildialog .s7dialogtitle {
    font-weight: bold;
    margin: 10px;
}

L’origine du contenu est contrôlée avec le sélecteur de classe CSS suivant :

.s7videoviewer .s7emaildialog .s7dialogorigin

Propriétés CSS du ​ d’origine du contenu de la boîte de dialogue

Exemple - pour configurer l’origine du contenu afin qu’elle ait une marge de dix pixels :

.s7videoviewer .s7emaildialog .s7dialogorigin {
    margin: 10px;
}

La description du contenu est contrôlée avec le sélecteur de classe CSS suivant :

.s7videoviewer .s7emaildialog .s7dialogdescription

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

Exemple : pour définir une description de contenu de manière à avoir une marge de dix pixels et utiliser une police de neuf points :

.s7videoviewer .s7emaildialog .s7dialogdescription {
    font-size: 9pt;
    margin: 10px;
}

Lorsqu’un utilisateur entre des données d’entrée incorrectes et que la validation en ligne échoue, ou lorsque la boîte de dialogue doit générer une erreur ou un message de confirmation lors de l’envoi du formulaire, un message s’affiche en haut du corps de la boîte de dialogue. Il est contrôlé avec le sélecteur de classe CSS suivant :

.s7videoviewer .s7emaildialog .s7dialogerrormessage

Propriétés CSS du message d’erreur de boîte de dialogue

Le message d’erreur peut être localisé. Pour plus d’informations, voir Localisation des éléments de l’interface utilisateur.

Exemple - Pour définir un message afin d’utiliser une police en gras dix points. Et, il doit avoir une hauteur de ligne de 25 pixels, un remplissage de 20 pixels sur la gauche, utiliser une icône de point d’exclamation, du texte rouge en cas d’erreur, et pas d’icône et du texte vert en cas de succès :

.s7videoviewer .s7emaildialog .s7dialogerrormessage[state="verifyerror"] {
    background-image: url("images/sdk/dlgerrimg.png");
    color: #FF0000;
}
.s7videoviewer .s7emaildialog .s7dialogerrormessage[state="senderror"] {
    background-image: url("images/sdk/dlgerrimg.png");
    color: #FF0000;
}
.s7videoviewer .s7emaildialog .s7dialogerrormessage[state="sendsuccess"] {
    background-image: none;
    color: #00B200;
}
.s7videoviewer .s7emaildialog .s7dialogerrormessage {
    background-position: left center;
    font-size: 10pt;
    font-weight: bold;
    line-height: 25px;
    padding-left: 20px;
}

Si un défilement vertical est nécessaire, la barre de défilement est rendue dans le panneau situé près du bord droit de la boîte de dialogue, qui est contrôlé par le sélecteur de classe CSS suivant :

.s7videoviewer .s7emaildialog .s7dialogscrollpanel

Propriétés CSS du panneau de défilement de la boîte de dialogue

Exemple : pour configurer un panneau de défilement de 44 pixels de large :

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

L’aspect de la zone de la barre de défilement est contrôlé par le sélecteur de classe CSS suivant :

.s7videoviewer .s7emaildialog .s7scrollbar

Propriétés CSS de la barre de défilement

Exemple : pour configurer une barre de défilement de 28 pixels de large, avec une marge de huit pixels à partir du haut, de la droite et du bas du panneau de défilement :

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

La piste de la barre de défilement correspond à la zone située entre les boutons de défilement supérieur et inférieur. Le composant définit automatiquement la position et la hauteur de la piste. La piste est contrôlée par le sélecteur de classe CSS suivant :

.s7videoviewer .s7emaildialog .s7scrollbar .s7scrolltrack

Propriétés CSS de la piste de défilement

Exemple : pour configurer une piste de barre de défilement de 28 pixels de large sur un arrière-plan gris :

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

Le curseur de la barre de défilement se déplace verticalement dans la zone de piste de défilement. Sa position verticale est entièrement contrôlée par la logique du composant, mais la hauteur du pouce ne change pas dynamiquement en fonction de la quantité de contenu. Vous pouvez configurer la hauteur du pouce et d’autres aspects avec le sélecteur de classe CSS suivant :

.s7videoviewer .s7emaildialog .s7scrollbar .s7scrollthumb

Propriétés CSS du curseur de la barre de défilement

Les info-bulles des boutons peuvent être localisées. Pour plus d’informations, voir Localisation des éléments de l’interface utilisateur.

Exemple : pour configurer une barre de défilement de 28 x 45 pixels, avec une marge de dix pixels en haut et en bas et une illustration différente pour chaque état :

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

L’apparence des boutons de défilement supérieur et inférieur est contrôlée par les sélecteurs de classe CSS suivants :

.s7videoviewer .s7emaildialog .s7scrollbar .s7scrollupbutton

.s7videoviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton

Propriétés CSS des boutons de défilement supérieur et inférieur

Exemple : pour configurer des boutons de défilement de 28 x 32 pixels avec des illustrations différentes pour chaque état :

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