Compartilhamento em redes sociais

A ferramenta de compartilhamento social aparece no canto superior direito por padrão. Consiste em um botão e um painel que é expandido 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:

.s7smartcropvideoviewer .s7socialshare

Propriedades CSS da ferramenta de compartilhamento social

top

Posição vertical da ferramenta de compartilhamento em redes sociais em relação ao contêiner do visualizador.

left

Posição horizontal da ferramenta de compartilhamento social em relação ao contêiner do visualizador.

width

A largura da ferramenta de compartilhamento social.

altura

A altura da ferramenta de compartilhamento social.

Exemplo - configure uma ferramenta de compartilhamento social que esteja posicionada em quatro pixels da parte superior e em cinco pixels à direita do contêiner do visualizador e seja dimensionada para 28 x 28 pixels.

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

A aparência do botão de ferramenta de compartilhamento social é controlada pelo seguinte seletor de classe CSS:

.s7smartcropvideoviewer .s7socialshare .s7socialbutton

Propriedades CSS do botão social

imagem de fundo

A imagem exibida para um determinado estado de botão.

posição de fundo

Posição dentro da estrutura de arte, se os sprites CSS forem usados.

Consulte Sprites CSS .

OBSERVAÇÃO

Esse botão suporta state seletor de atributos, que pode ser usado para aplicar capas diferentes a estados de botão diferentes.

A dica de ferramenta do botão pode ser localizada. Consulte Localização dos elementos da interface do usuário para obter mais informações.

Exemplo - configure um botão de ferramenta de compartilhamento social que exibe uma imagem diferente para cada um dos quatro estados de botão diferentes.

.s7smartcropvideoviewer .s7socialshare .s7socialbutton[state='up'] {
background-image:url(images/v2/SocialShare_video_dark_up.png);
}
.s7smartcropvideoviewer .s7socialshare .s7socialbutton[state='over'] {
background-image:url(images/v2/SocialShare_dark_over.png);
}
.s7smartcropvideoviewer .s7socialshare .s7socialbutton[state='down'] {
background-image:url(images/v2/SocialShare_dark_down.png);
}
.s7smartcropvideoviewer .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 social é controlada pelo seguinte seletor de classe CSS:

.s7smartcropvideoviewer .s7socialshare .s7socialsharepanel

Propriedades de CSS do painel de compartilhamento social

cor do fundo

A cor de plano de fundo do painel.

Exemplo - configure um painel para ter uma cor transparente:

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

Nesta página