Incorporar compartilhamento embed-share

A ferramenta de compartilhamento incorporada consiste em um botão adicionado ao painel Compartilhamento em redes sociais e à caixa de diálogo modal 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 incorporado é controlada com o seguinte seletor de classe CSS:

.s7videoviewer .s7embedshare

Propriedades CSS da ferramenta de compartilhamento de inserção

largura
Largura do botão.
altura
Altura do botão.
imagem de fundo
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.

NOTE
Este botão oferece suporte ao seletor de atributos state, 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 definindo a propriedade CSS display:none em sua classe CSS.

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 - Para configurar um botão de compartilhamento incorporado com 28 x 28 pixels e exibir uma imagem diferente para cada um dos quatro estados de botão diferentes:

.s7videoviewer .s7embedshare {
 width:28px;
 height:28px;
}
.s7videoviewer .s7embedshare[state='up'] {
background-image:url(images/v2/EmbedShare_dark_up.png);
}
.s7videoviewer .s7embedshare[state='over'] {
background-image:url(images/v2/EmbedShare_dark_over.png);
}
.s7videoviewer .s7embedshare[state='down'] {
background-image:url(images/v2/EmbedShare_dark_down.png);
}
.s7videoviewer .s7embedshare[state='disabled'] {
background-image:url(images/v2/EmbedShare_dark_disabled.png);
}

A sobreposição de plano de fundo que cobre a página da Web quando a caixa de diálogo está ativa é controlada com o seguinte seletor de classe CSS:

.s7videoviewer .s7embeddialog .s7backoverlay

Propriedades CSS da sobreposição de plano de fundo

opacidade
Opacidade de sobreposição de plano de fundo.
cor de fundo
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:

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

.s7videoviewer .s7embeddialog .s7dialog

Propriedades CSS da caixa de diálogo

raio da borda
Raio da borda da caixa de diálogo, caso a caixa de diálogo não use todo o navegador.
cor de fundo
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:

.s7videoviewer .s7touchinput .s7embeddialog .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

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

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

.s7videoviewer .s7embeddialog .s7dialogheadericon

Propriedades CSS do ícone de cabeçalho da caixa de diálogo

largura
Largura do ícone.
altura
Altura do ícone.
imagem de fundo
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:

.s7videoviewer .s7embeddialog .s7dialogheadertext

Propriedades CSS do texto do cabeçalho da caixa de diálogo

espessura da fonte
Peso da fonte.
tamanho da fonte
Altura da fonte.
Família de fontes
Família da fonte.
preenchimento
Preenchimento de texto interno.

O botão Fechar é controlado com o seguinte seletor de classe CSS:

.s7videoviewer .s7embeddialog .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.
imagem de fundo
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.

NOTE
Este botão oferece suporte ao seletor de atributos state, 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 para obter mais informações.

Exemplo - Para configurar o cabeçalho da caixa de diálogo com preenchimento, ícone de 24 x 14 pixels, título de 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:

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

O rodapé da caixa de diálogo consiste no botão "cancelar". O contêiner de rodapé é controlado com o seguinte seletor de classe CSS:

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

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

.s7videoviewer .s7embeddialog .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.
cor de fundo
Cor do plano de fundo do botão para cada estado.
NOTE
O botão Selecionar tudo oferece suporte ao seletor de atributos state, 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:

.s7videoviewer .s7embeddialog .s7dialogcancelbutton

Propriedades CSS do botão de cancelamento 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.
cor de fundo
Cor do plano de fundo do botão para cada estado.
NOTE
O botão Cancelar oferece suporte ao seletor de atributos state, 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:

.s7videoviewer .s7embeddialog .s7dialogfooter .s7button

Propriedades CSS do botão

espessura da fonte
Peso da fonte do botão.
tamanho da fonte
Tamanho da fonte do botão.
Família de fontes
Família de fontes do botão.
altura da linha
Altura do texto dentro do botão. Afeta o alinhamento vertical.
sombra-caixa
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 para obter mais informações.

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 plano de fundo diferentes para cada estado de botão:

.s7videoviewer .s7embeddialog .s7dialogfooter {
    border-top: 1px solid #909090;
}
.s7videoviewer .s7embeddialog .s7dialogbuttoncontainer {
    padding-bottom: 6px;
    padding-top: 10px;
}
.s7videoviewer .s7embeddialog .s7dialogfooter .s7button {
    box-shadow: 1px 1px 1px #999999;
    color: #FFFFFF;
    font-size: 9pt;
    font-weight: bold;
    line-height: 34px;
    margin-right: 10px;
}
.s7videoviewer .s7embeddialog .s7dialogcancelbutton {
 width:64px;
 height:34px;
}
.s7videoviewer .s7embeddialog .s7dialogcancelbutton[state='up'] {
 background-color:#666666;
 color:#dddddd;
}
.s7videoviewer .s7embeddialog .s7dialogcancelbutton[state='down'] {
 background-color:#555555;
 color:#ffffff;
}
.s7videoviewer .s7embeddialog .s7dialogcancelbutton[state='over'] {
 background-color:#555555;
 color:#ffffff;
}
.s7videoviewer .s7embeddialog .s7dialogcancelbutton[state='disabled'] {
 background-color:#b2b2b2;
 color:#dddddd;
}
.s7videoviewer .s7embeddialog .s7dialogactionbutton {
 width:82px;
 height:34px;
}
.s7videoviewer .s7embeddialog .s7dialogactionbutton[state='up'] {
 background-color:#333333;
 color:#dddddd;
}
.s7videoviewer .s7embeddialog .s7dialogactionbutton[state='down'] {
 background-color:#222222;
 color:#cccccc;
}
.s7videoviewer .s7embeddialog .s7dialogactionbutton[state='over'] {
 background-color:#222222;
 color:#cccccc;
}
.s7videoviewer .s7embeddialog .s7dialogactionbutton[state='disabled'] {
 background-color:#b2b2b2;
 color:#dddddd;
}

A área de diálogo principal, entre o cabeçalho e o rodapé, contém conteúdo de diálogo rolável e painel de rolagem à direita. 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:

.s7videoviewer .s7embeddialog .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.
cor de fundo
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 dez pixels e usar um plano de fundo branco:

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

.s7videoviewer .s7embeddialog .s7dialogbody

Se a altura desse contêiner parecer ser maior que a área da caixa de diálogo principal, a rolagem vertical será ativada automaticamente pelo componente.

Propriedades CSS do corpo da caixa de diálogo ​

preenchimento
Preenchimento interno.

Exemplo - para configurar o conteúdo do formulário para ter um preenchimento de dez pixels:

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

Todos os rótulos estáticos no formulário da caixa de diálogo são controlados com

.s7videoviewer .s7embeddialog .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. ​

espessura da fonte
Espessura da fonte do rótulo.
tamanho da fonte
Tamanho da fonte do rótulo.
Família de fontes
Família de fontes do rótulo.
cor
Cor do texto do rótulo.

As dicas de ferramentas dos rótulos da caixa de diálogo podem ser localizadas. Consulte Localização dos elementos da interface do usuário para obter mais informações.

Exemplo - para configurar todos os rótulos para serem cinza, negrito com uma fonte de nove pixels:

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

O tamanho da cópia de texto exibida na parte superior do código incorporado é controlado com o seguinte seletor de classe CSS:

.s7videoviewer .s7embeddialog .s7dialoginputwide

Propriedades CSS do campo de entrada da caixa de diálogo

largura
Largura do campo de entrada.
preenchimento
Preenchimento interno.

Exemplo - para definir a cópia de texto como 430 pixels de largura e ter um preenchimento de dez pixels na parte inferior:

.s7videoviewer .s7embeddialog .s7dialoginputwide {
    padding-bottom: 10px;
    width: 430px;
}

O código incorporado é colocado em um container e controlado com o seguinte seletor de classe CSS:

.s7videoviewer .s7embeddialog .s7dialoginputcontainer

Propriedades CSS do contêiner de entrada da caixa de diálogo

largura
A largura do contêiner do código de inserção.
borda
Borda ao redor do contêiner do código de inserção.
preenchimento
Preenchimento interno.

Exemplo - para definir uma borda cinza de um pixel em torno do texto do código incorporado, torne-o com 430 pixels de largura e tenha um preenchimento de dez pixels:

.s7videoviewer .s7embeddialog .s7dialoginputcontainer {
    border: 1px solid #CCCCCC;
    padding: 10px;
    width: 430px;
}

O texto real do código incorporado é controlado com o seguinte seletor de classe CSS:

.s7videoviewer .s7embeddialog .s7dialoginputcontainer

Propriedades CSS do contêiner de entrada da caixa de diálogo

quebra automática de linha
Estilo de quebra de linha.

Exemplo - Para configurar o código incorporado de modo que seja usada a quebra automática de linha break-word:

.s7videoviewer .s7embeddialog .s7dialogmessage {
    word-wrap: break-word;
}

O rótulo de tamanho incorporado e o menu suspenso estão na parte inferior da caixa de diálogo e são colocados em um container controlado com o seguinte seletor de classe CSS:

.s7videoviewer .s7embeddialog .s7dialogembedsizepanel

Propriedades CSS do painel de tamanho incorporado da caixa de diálogo

preenchimento
Preenchimento interno.

Exemplo - para configurar um painel de tamanho incorporado com dez pixels de preenchimento:

.s7videoviewer .s7embeddialog .s7dialogembedsizepanel {
    padding: 10px;
}

O tamanho e o alinhamento do rótulo de tamanho incorporado são controlados com o seguinte seletor de classe CSS:

.s7videoviewer .s7embeddialog .s7dialogembedsizepanel

Propriedades CSS do painel de tamanho incorporado da caixa de diálogo

alinhamento vertical
Alinhamento vertical do rótulo.
largura
Largura do rótulo.

Exemplo - para definir o rótulo do tamanho incorporado como alinhado na parte superior e com 80 pixels de largura:

.s7videoviewer .s7embeddialog .s7dialogembedsizelabel {
    vertical-align: top;
    width: 80px;
}

A largura da caixa de combinação de tamanho incorporado é controlada com o seguinte seletor de classe CSS:

.s7videoviewer .s7embeddialog .s7combobox

Propriedades CSS da caixa de combinação

largura
Largura da caixa de combinação.
NOTE
A caixa de combinação dá suporte ao seletor de atributos expanded com valores possíveis de true e false. O valor true é usado quando a caixa de combinação exibe um dos tamanhos incorporados predefinidos, portanto deve ter toda a largura disponível. O valor false é usado quando a opção de tamanho personalizado é selecionada na caixa de combinação; portanto, ele deve ser reduzido para permitir espaço para campos de entrada personalizados de largura e altura.

Exemplo - Para definir a caixa de combinação de tamanho incorporado como 300 pixels de largura ao mostrar um item predefinido e 110 pixels de largura ao mostrar um tamanho personalizado:

.s7videoviewer .s7embeddialog .s7combobox[expanded="true"] {
    width: 300px;
}
.s7videoviewer .s7embeddialog .s7combobox[expanded="false"] {
    width: 110px;
}

A altura do texto da caixa de combinação é definida por um elemento interno especial e é controlada com o seguinte seletor de classe CSS:

.s7videoviewer .s7embeddialog .s7combobox .s7comboboxtext

Propriedades CSS do texto da caixa de combinação

altura
Altura do texto da caixa de combinação.

Exemplo - para definir a altura do texto da caixa de combinação de tamanho incorporado como 40 pixels:

.s7videoviewer .s7embeddialog .s7combobox .s7comboboxtext {
    height: 40px;
}

A caixa de combinação tem um botão "suspenso" à direita e é controlada com o seguinte seletor de classe CSS:

.s7videoviewer .s7embeddialog .s7combobox .s7comboboxbutton

Propriedades CSS do botão de caixa de combinação

top
Posição vertical do botão dentro da caixa de combinação.
direita
Posição do botão horizontal dentro da caixa de combinação.
largura
Largura do botão.
altura
Altura do botão.
imagem de fundo
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.

Este botão oferece suporte ao seletor de atributos state, que pode ser usado para aplicar capas diferentes a estados de botão diferentes.

Exemplo - para definir um botão "suspenso" como 28 x 28 pixels e ter uma imagem separada para cada estado:

.s7videoviewer .s7embeddialog .s7combobox .s7comboboxbutton {
 width:28px;
 height:28px;
}
.s7videoviewer .s7embeddialog .s7combobox .s7comboboxbutton[state='up'] {
 background-image:url(images/sdk/cboxbtndn_up.png);
}
.s7videoviewer .s7embeddialog .s7combobox .s7comboboxbutton[state='over'] {
 background-image:url(images/sdk/cboxbtndn_over.png);
}
.s7videoviewer .s7embeddialog .s7combobox .s7comboboxbutton[state='down'] {
 background-image:url(images/sdk/cboxbtndn_over.png);
}
.s7videoviewer .s7embeddialog .s7combobox .s7comboboxbutton[state='disabled'] {
 background-image:url(images/sdk/cboxbtndn_up.png);
}

O painel com a lista de tamanhos incorporados exibidos quando a caixa de combinação é aberta é controlado com o seguinte seletor de classe CSS:

.s7videoviewer .s7embeddialog .s7comboboxdropdown

O tamanho e a posição do painel são controlados pelo componente. Não é possível alterá-lo por meio do CSS.

Propriedades CSS do menu suspenso da caixa de combinação

borda
Borda do painel.

Exemplo - para definir o painel da caixa de combinação para ter uma borda cinza de um pixel:

.s7videoviewer .s7embeddialog .s7comboboxdropdown {
    border: 1px solid #CCCCCC;
}

Um único item em um painel suspenso que é controlado com o seguinte seletor de classe CSS:

.s7videoviewer .s7embeddialog .s7dropdownitemanchor

Propriedades CSS da âncora do item suspenso

cor de fundo
Plano de fundo do item.

Exemplo - para definir o item do painel da caixa de combinação para ter um plano de fundo branco:

.s7videoviewer .s7embeddialog .s7dropdownitemanchor {
    background-color: #FFFFFF;
}

Uma marca de seleção exibida à esquerda do item selecionado dentro do painel da caixa de combinação que é controlado com o seguinte seletor de classe CSS:

.s7videoviewer .s7embeddialog .s7checkmark

Propriedades CSS da caixa de seleção

largura
Largura do ícone.
altura
Altura do ícone.
imagem de fundo
Imagem do item.
background-position

Posicionar dentro da imagem de arte-final, se as imagens CSS forem usadas.

Consulte Sprites CSS.

Exemplo - para definir o ícone de marca de seleção como 25 x 25 pixels:

.s7videoviewer .s7embeddialog .s7checkmark {
    background-image: url("images/sdk/cboxchecked.png");
    height: 25px;
    width: 25px;
}

Quando a opção "Tamanho personalizado" está selecionada na caixa de combinação de tamanho incorporado, a caixa de diálogo exibe dois campos de entrada adicionais à direita para permitir que o usuário insira um tamanho incorporado personalizado. Esses campos são envolvidos em um container controlado com o seguinte seletor de classe CSS:

.s7videoviewer .s7embeddialog .s7dialogcustomsizepanel

Propriedades CSS do painel de tamanho personalizado da caixa de diálogo

saiu de
Distância da caixa de combinação de tamanho incorporado.

Exemplo - para definir o painel de campos de entrada de tamanho personalizado como 20 pixels à direita da caixa de combinação:

.s7videoviewer .s7embeddialog .s7dialogcustomsizepanel {
    left: 20px;
}

Cada campo de entrada de tamanho personalizado é colocado em um container que renderiza uma borda e define a margem entre os campos. Ele é controlado com o seguinte seletor de classe CSS:

.s7videoviewer .s7embeddialog .s7dialogcustomsize

Propriedades CSS do tamanho personalizado da caixa de diálogo

borda
Borda ao redor do campo de entrada.
largura
Largura do campo de entrada.
margem
Margem do campo de entrada.
preenchimento
Preenchimento do campo de entrada.

Exemplo - Para definir os campos de entrada de tamanho personalizado para ter uma borda cinza de um pixel, margem, preenchimento e ter 70 pixels de largura:

.s7videoviewer .s7embeddialog .s7dialogcustomsize {
    border: 1px solid #CCCCCC;
    margin-right: 20px;
    padding-left: 2px;
    padding-right: 2px;
    width: 70px;
}

Se a rolagem vertical for necessária, a barra de rolagem será renderizada no painel próximo à borda direita da caixa de diálogo, que é controlada com o seguinte seletor de classe CSS:

.s7videoviewer .s7embeddialog .s7dialogscrollpanel

Propriedades CSS do painel de rolagem da caixa de diálogo

largura
Largura do painel de rolagem

Exemplo - para configurar um painel de rolagem com 44 pixels de largura

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

A aparência da área da barra de rolagem é controlada com o seguinte seletor de classe CSS:

.s7videoviewer .s7embeddialog .s7scrollbar

Propriedades CSS da barra de rolagem

largura
Largura da barra de rolagem
top
O deslocamento da barra de rolagem vertical na parte superior do painel de rolagem.
inferior
O deslocamento da barra de rolagem vertical na parte inferior do painel de rolagem.
direita
O deslocamento da barra de rolagem horizontal em relação à borda direita do painel de rolagem.

Exemplo - para configurar uma barra de rolagem com 28 pixels de largura e uma margem de oito pixels na parte superior, direita e inferior do painel de rolagem:

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

A faixa da barra de rolagem é a área entre os botões de rolagem superior e inferior. O componente define automaticamente a posição e a altura da faixa. A faixa é controlada com o seguinte seletor de classe CSS

.s7videoviewer .s7embeddialog .s7scrollbar .s7scrolltrack

Propriedades CSS da faixa de barra de rolagem

largura
Largura da faixa.
cor de fundo
Cor do plano de fundo da faixa.

Exemplo - para configurar uma faixa de barra de rolagem com 28 pixels de largura e um plano de fundo cinza:

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

A miniatura da barra de rolagem se move verticalmente em uma área de rastreamento de rolagem. Sua posição vertical é totalmente controlada pela lógica do componente. No entanto, a altura da miniatura não muda dinamicamente, dependendo da quantidade de conteúdo. A altura da miniatura e outros aspectos podem ser configurados com o seguinte seletor de classe CSS:

.s7videoviewer .s7embeddialog .s7scrollbar .s7scrollthumb

Propriedades CSS da miniatura da barra de rolagem

largura
Largura da miniatura.
altura
Altura do polegar.
padding-top
O preenchimento vertical entre o topo da faixa.
preenchimento inferior
O preenchimento vertical entre a parte inferior da faixa.
imagem de fundo
A imagem exibida para um determinado estado de miniatura.
NOTE
A miniatura dá suporte ao seletor de atributos state, que pode ser usado para aplicar capas diferentes a estados de miniatura diferentes: up, down, over e disabled.

Exemplo - para configurar uma miniatura de barra de rolagem com 28 x 45 pixels, tem uma margem de dez pixels na parte superior e inferior e tem um trabalho artístico diferente para cada estado:

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

A aparência dos botões de rolagem superior e inferior é controlada com os seguintes seletores de classe CSS:

.s7videoviewer .s7embeddialog .s7scrollbar .s7scrollupbutton
.s7videoviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton

Não é possível posicionar botões de rolagem usando as propriedades CSS top, left, bottom e right. Em vez disso, a lógica do visualizador as posiciona automaticamente.

Propriedades CSS dos botões de rolagem superior e inferior

largura
Largura do botão.
altura
Altura do botão.
imagem de fundo
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.

NOTE
Estes botões oferecem suporte ao seletor de atributos state, que pode ser usado para aplicar capas diferentes a estados de botão diferentes: up, down, over e disabled.

As dicas de ferramentas do botão podem ser localizadas. Consulte Localização dos elementos da interface do usuário para obter mais informações.

Exemplo - para configurar botões de rolagem com 28 x 32 pixels e que tenham arte-final diferente para cada estado:

.s7videoviewer .s7embeddialog .s7scrollbar .s7scrollupbutton {
 width:28px;
 height:32px;
}
.s7videoviewer .s7embeddialog .s7scrollbar .s7scrollupbutton[state='up'] {
background-image:url(images/sdk/scroll_up_up.png);
}
.s7videoviewer .s7embeddialog .s7scrollbar .s7scrollupbutton[state='over'] {
 background-image:url(images/sdk/scroll_up_over.png);
}
.s7videoviewer .s7embeddialog .s7scrollbar .s7scrollupbutton[state='down'] {
 background-image:url(images/sdk/scroll_up_down.png);
}
.s7videoviewer .s7embeddialog .s7scrollbar .s7scrollupbutton[state='disabled'] {
 background-image:url(images/sdk/scroll_up_disabled.png);
}
.s7videoviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton {
 width:28px;
 height:32px;
}
.s7videoviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton[state='up'] {
 background-image:url(images/sdk/scroll_down_up.png);
}
.s7videoviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton[state='over'] {
 background-image:url(images/sdk/scroll_down_over.png);
}
.s7videoviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton[state='down'] {
 background-image:url(images/sdk/scroll_down_down.png);
}
.s7videoviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton[state='disabled'] {
 background-image:url(images/sdk/scroll_down_disabled.png);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8