A ferramenta Compartilhamento de links consiste em um botão adicionado ao painel Compartilhamento em redes sociais e à caixa de diálogo modal que é exibida quando a ferramenta é ativada. A posição do botão é totalmente gerenciada pela ferramenta Compartilhamento em redes sociais.
A aparência do botão de compartilhamento de link é controlada com o seguinte seletor de classe CSS:
.s7video360viewer .s7linkshare
Propriedades CSS da ferramenta de compartilhamento de links
largura |
Largura do botão. |
altura |
Altura do botão. |
background-image |
A imagem exibida para um determinado estado de botão. |
background-position |
Posicionar dentro da imagem de arte-final, se as imagens CSS forem usadas. Consulte Sprites CSS . |
Esse botão oferece suporte ao state
seletor de atributo, que pode ser usado para aplicar capas diferentes a estados de botão diferentes.
É possível remover o botão do painel Compartilhamento em redes sociais configurando display:none
Propriedade CSS em sua classe CSS.
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 compartilhamento de link com 28 x 28 pixels e exibir uma imagem diferente para cada um dos quatro estados de botão diferentes:
.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);
}
A sobreposição de plano de fundo que cobre a página da Web quando a caixa de diálogo ativa é controlada com o seguinte seletor de classe CSS:
.s7video360viewer .s7linkdialog .s7backoverlay
Propriedades CSS da sobreposição do plano de fundo
opacidade |
Opacidade de sobreposição de plano de fundo. |
background-color |
Cor de sobreposição do plano de fundo. |
Exemplo - para configurar uma sobreposição de plano de fundo para ficar cinza com 70% de opacidade:
.s7video360viewer .s7linkdialog .s7backoverlay {
opacity:0.7;
background-color:#222222;
}
Por padrão, a caixa de diálogo modal é exibida centralizada na tela em sistemas desktop e ocupa toda a área da página da Web em dispositivos de toque. Em todos os casos, o posicionamento e o dimensionamento da caixa de diálogo são gerenciados pelo componente. A caixa de diálogo é controlada com o seguinte seletor de classe CSS:
.s7video360viewer .s7linkdialog .s7dialog
Propriedades CSS da caixa de diálogo
border-radius |
Raio da borda da caixa de diálogo, caso a caixa de diálogo não use todo o navegador. |
background-color |
Cor de fundo da caixa de diálogo. |
largura |
Deve ser desdefinido ou definido como 100%, nesse caso, a caixa de diálogo usa toda a janela do navegador (esse modo é preferível em dispositivos de toque). |
altura |
Deve ser desdefinido ou definido como 100%, nesse caso, a caixa de diálogo usa toda a janela do navegador (esse modo é preferível em dispositivos de toque). |
Exemplo - para configurar a caixa de diálogo para usar toda a janela do navegador e ter um fundo branco em dispositivos de toque:
.s7video360viewer.s7touchinput .s7linkdialog .s7dialog {
width:100%;
height:100%;
background-color: #ffffff;
}
O cabeçalho da caixa de diálogo consiste em um ícone, um texto de título e um botão Fechar. O contêiner de cabeçalho é controlado com o seguinte seletor de classe CSS:
.s7video360viewer .s7linkdialog .s7dialogheader
Propriedades CSS do cabeçalho da caixa de diálogo
preenchimento |
Preenchimento interno para conteúdo de cabeçalho. |
O ícone e o texto do título são colocados em um container extra controlado com o seguinte seletor de classe CSS:
.s7video360viewer .s7linkdialog .s7dialogheader .s7dialogline
Propriedades CSS da linha de diálogo
preenchimento |
Preenchimento interno para o ícone e título do cabeçalho |
O ícone de cabeçalho é controlado com o seguinte seletor de classe CSS
.s7video360viewer .s7linkdialog .s7dialogheadericon
Propriedades CSS do ícone de cabeçalho da caixa de diálogo
largura |
Largura do ícone. |
altura |
Altura do ícone. |
background-image |
Imagem do ícone. |
background-position |
Posicionar dentro da imagem de arte-final, se as imagens CSS forem usadas. Consulte Sprites CSS . |
O título do cabeçalho é controlado com o seguinte seletor de classe CSS:
.s7video360viewer .s7linkdialog .s7dialogheadertext
Propriedades CSS do texto do cabeçalho da caixa de diálogo
font-weight |
Peso da fonte. |
font-size |
Altura da fonte. |
font-family |
Família da fonte. |
preenchimento |
Preenchimento de texto interno. |
O botão Fechar é controlado com o seguinte seletor de classe CSS:
.s7video360viewer .s7linkdialog .s7closebutton
Propriedades CSS do botão Fechar
top |
Posição vertical do botão em relação ao contêiner de cabeçalho. |
direita |
Posição do botão horizontal em relação ao contêiner de cabeçalho. |
largura |
Largura do botão. |
altura |
Altura do botão. |
preenchimento |
Preenchimento interno do botão. |
background-image |
Imagem do botão para cada estado. |
background-position |
Posicionar dentro da imagem de arte-final, se as imagens CSS forem usadas. Consulte Sprites CSS . |
Esse botão oferece suporte ao state
seletor de atributo, que pode ser usado para aplicar capas diferentes a estados de botão diferentes.
A dica de ferramenta do botão Fechar e o título da caixa de diálogo podem ser localizados. Consulte Localização dos elementos da interface do usuário.
Exemplo - para configurar um cabeçalho de caixa de diálogo com preenchimento, ícone de 22 x 12 pixels, com um título negrito de 16 pontos. E, finalmente, um botão Fechar de 28 x 28 pixels posicionado a dois pixels da parte superior e a dois pixels da direita do contêiner da caixa de diálogo:
.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);
}
O rodapé da caixa de diálogo consiste em um botão Cancelar. O contêiner de rodapé é controlado com o seguinte seletor de classe CSS:
.s7video360viewer .s7linkdialog .s7dialogfooter
Propriedades CSS do rodapé da caixa de diálogo
borda |
Borda que você pode usar para separar visualmente o rodapé do restante da caixa de diálogo. |
O rodapé tem um contêiner interno que mantém o botão. Ele é controlado com o seguinte seletor de classe CSS:
.s7video360viewer .s7linkdialog .s7dialogbuttoncontainer
Propriedades CSS do contêiner de botão da caixa de diálogo
preenchimento |
Preenchimento interno entre o rodapé e o botão. |
O botão Selecionar tudo é controlado com o seguinte seletor de classe CSS:
.s7video360viewer .s7linkdialog .s7dialogactionbutton
O botão só está disponível em sistemas desktop.
Propriedades CSS do botão Selecionar tudo
largura |
Largura do botão. |
altura |
Altura do botão. |
cor |
Cor do texto do botão para cada estado. |
background-color |
Cor do plano de fundo do botão para cada estado. |
O botão Selecionar tudo é compatível com a state
seletor de atributo, que pode ser usado para aplicar capas diferentes a estados de botão diferentes.
O botão Cancelar é controlado com o seguinte seletor de classe CSS:
.s7video360viewer .s7linkdialog .s7dialogcancelbutton
Propriedades CSS do botão Cancelar da caixa de diálogo
largura |
Largura do botão. |
altura |
Altura do botão. |
cor |
Cor do texto do botão para cada estado. |
background-color |
Cor do plano de fundo do botão para cada estado. |
Esse botão oferece suporte ao state
seletor de atributo, que pode ser usado para aplicar capas diferentes a estados de botão diferentes.
Além disso, ambos os botões compartilham uma classe CSS comum, que pode conter configurações CSS que são as mesmas para outros botões da caixa de diálogo:
.s7video360viewer .s7linkdialog .s7dialogfooter .s7button
Propriedades CSS do botão
font-weight |
Peso da fonte do botão. |
font-size |
Tamanho da fonte do botão. |
font-family |
Família de fontes do botão. |
altura da linha |
Altura do texto dentro do botão. Afeta o alinhamento vertical. |
box-shadow |
Sombra projetada. |
margem direita |
Margem direita do botão. |
As dicas de ferramentas do botão podem ser localizadas. Consulte Localização dos elementos da interface do usuário.
Exemplo - para configurar um rodapé de caixa de diálogo com um botão Cancelar 64 x 34, com cores de texto e cores de fundo diferentes para cada estado do botão:
.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;
}
A área principal da caixa de diálogo (entre o cabeçalho e o rodapé) contém conteúdo da caixa de diálogo. Em todos os casos, o componente gerencia a largura dessa área; não é possível defini-la no CSS. A área de diálogo principal é controlada com o seguinte seletor de classe CSS:
.s7video360viewer .s7linkdialog .s7dialogviewarea
Propriedades CSS da área de exibição da caixa de diálogo
altura |
A altura da área da caixa de diálogo principal. Ela deve ser especificada somente quando a caixa de diálogo funciona no modo desktop. Não é aplicável quando a caixa de diálogo é dimensionada para ocupar toda a janela do navegador. |
background-color |
A cor de fundo da área da caixa de diálogo principal. |
margem |
Margem externa. |
Exemplo - para configurar uma área da caixa de diálogo principal com altura de 300 pixels, ter uma margem de 10 pixels e usar um plano de fundo branco:
.s7video360viewer .s7linkdialog .s7dialogviewarea {
background-color:#ffffff;
margin:10px;
height:300px;
}
Todo o conteúdo do formulário - como rótulos e campos de entrada - reside dentro de um container controlado com o seguinte seletor de classe CSS:
.s7video360viewer .s7linkdialog .s7dialogbody
Propriedades CSS do corpo da caixa de diálogo
preenchimento |
Preenchimento interno. |
Exemplo - para configurar o conteúdo do formulário para ter o preenchimento de dez pixels:
.s7interactivevideoviewer .s7linkdialog .s7dialogbody {
padding: 10px;
}
Todos os rótulos estáticos no formulário da caixa de diálogo são controlados com
.s7video360viewer .s7linkdialog .s7dialoglabel
Essa classe não é adequada para controlar o tamanho ou a posição do rótulo porque você pode aplicá-la a textos em vários locais da interface do usuário do formulário.
Propriedades CSS do rótulo da caixa de diálogo
font-weight |
Espessura da fonte do rótulo. |
font-size |
Tamanho da fonte do rótulo. |
font-family |
Família de fontes do rótulo. |
cor |
Cor do texto do rótulo. |
Os rótulos da caixa de diálogo podem ser localizados. Consulte Localização dos elementos da interface do usuário.
Exemplo - para configurar todos os rótulos para serem cinza, negrito com uma fonte de nove pixels:
.s7video360viewer .s7linkdialog .s7dialoglabel {
color: #666666;
font-size: 9pt;
font-weight: bold;
}
O tamanho da cópia de texto exibida na parte superior do link é controlado com o seguinte seletor de classe CSS:
.s7video360viewer .s7linkdialog .s7dialoginputwide
Propriedades CSS do campo de entrada da caixa de diálogo
largura |
Largura do texto. |
preenchimento |
Preenchimento interno. |
Exemplo - para definir uma cópia de texto com 430 pixels de largura e um preenchimento de 10 pixels na parte inferior:
.s7video360viewer .s7linkdialog .s7dialoginputwide {
padding-bottom: 10px;
width: 430px;
}
O link de compartilhamento é colocado em um container e controlado com o seguinte seletor de classe CSS:
.s7video360viewer .s7linkdialog .s7dialoginputcontainer
Propriedades CSS do container de entrada da caixa de diálogo
borda |
Borda ao redor do contêiner de link compartilhado. |
preenchimento |
Preenchimento interno. |
Exemplo - para definir uma borda cinza de um pixel em torno do texto do código incorporado e ter nove pixels de preenchimento:
.s7video360viewer .s7linkdialog .s7dialoginputcontainer {
border: 1px solid #CCCCCC;
padding: 9px;
}
O próprio link de compartilhamento é controlado com o seguinte seletor de classe CSS:
.s7video360viewer .s7linkdialog .s7dialoglink
Propriedades CSS do link de compartilhamento da caixa de diálogo
largura |
Compartilhar a largura do link. |
Exemplo - para definir o link de compartilhamento para ter 450 pixels de largura:
.s7video360viewer .s7linkdialog .s7dialoglink {
width: 450px;
}