Compartilhamento social

Por padrão, a ferramenta de compartilhamento em redes sociais é exibida no canto superior direito. Consiste em um botão e um painel que se expande quando o usuário clica ou toca em um botão e contém ferramentas de compartilhamento individuais.

A posição e o tamanho da ferramenta de compartilhamento social na interface do usuário do visualizador são controlados com o seguinte:

.s7interactivevideoviewer .s7socialshare

Propriedades CSS da ferramenta de compartilhamento em redes sociais

Exemplo

Para configurar uma ferramenta de compartilhamento em redes sociais, posicionada a quatro pixels da parte superior e a cinco pixels da direita do contêiner de visualização e dimensionada para 28 x 28 pixels.

.s7interactivevideoviewer .s7socialshare {
 top:4px;
 right:5px;
 width:28px;
 height:28px;
}

A aparência do botão de ferramenta de compartilhamento em redes sociais é controlada com o seguinte seletor de classe CSS:

.s7interactivevideoviewer .s7socialshare .s7socialbutton

Propriedades CSS do botão de ferramenta de compartilhamento em redes sociais

A dica de ferramenta do botão pode ser localizada. Consulte Localização dos elementos da interface do usuário.

Exemplo

Para configurar um botão de ferramenta de compartilhamento em redes sociais que exiba uma imagem diferente para cada um dos quatro estados de botão diferentes.

.s7interactivevideoviewer .s7socialshare .s7socialbutton[state='up'] {
background-image:url(images/v2/SocialShare_video_dark_up.png);
}
.s7interactivevideoviewer .s7socialshare .s7socialbutton[state='over'] {
background-image:url(images/v2/SocialShare_dark_over.png);
}
.s7interactivevideoviewer .s7socialshare .s7socialbutton[state='down'] {
background-image:url(images/v2/SocialShare_dark_down.png);
}
.s7interactivevideoviewer .s7socialshare .s7socialbutton[state='disabled'] {
background-image:url(images/v2/SocialShare_dark_disabled.png);
}

A aparência do painel que contém os ícones individuais de compartilhamento em redes sociais é controlada com o seguinte seletor de classe CSS:

.s7interactivevideoviewer .s7socialshare .s7socialsharepanel

Propriedades CSS do painel compartilhamento em redes sociais

Exemplo

Para configurar um painel para ter cor transparente:

.s7interactivevideoviewer .s7socialshare .s7socialsharepanel {
 background-color: transparent;
}