Compartilhamento incorporado

A ferramenta de compartilhamento integrado consiste em um botão adicionado ao painel Compartilhamento social e a caixa de diálogo modal que é exibida quando a ferramenta é ativada. A posição do botão é totalmente gerenciada pela ferramenta de compartilhamento Social .

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

.s7smartcropvideoviewer .s7embedshare

Propriedades CSS da ferramenta de compartilhamento incorporada

width	Largura do botão.
altura	Altura do botão.
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 .

É possível remover o botão do painel Compartilhamento do Social ao configurar display:none Propriedade CSS na 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 Incorporar compartilhamento com 28 x 28 pixels e exibir uma imagem diferente para cada um dos quatro estados de botão diferentes:

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

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

.s7smartcropvideoviewer .s7embeddialog .s7backoverlay

Propriedades CSS da sobreposição em segundo plano

opacidade	Opacidade da sobreposição em segundo plano.
cor do fundo	Cor da sobreposição do plano de fundo.

Exemplo - para configurar uma sobreposição de plano de fundo para ficar cinza com 70% de opacidade:

.s7smartcropvideoviewer .s7embeddialog .s7backoverlay {
 opacity:0.7;
 background-color:#222222;
}

Por padrão, a caixa de diálogo modal é exibida centralizada na tela em sistemas de desktop e leva 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:

.s7smartcropvideoviewer .s7embeddialog .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 o navegador inteiro.
cor do fundo	Cor de fundo da caixa de diálogo.
largura	Deve ser desativado ou definido como 100%, nesse caso, a caixa de diálogo ocupa toda a janela do navegador (esse modo é preferencial em dispositivos de toque).
altura	Deve ser desativado ou definido como 100%, nesse caso, a caixa de diálogo ocupa toda a janela do navegador (esse modo é preferencial em dispositivos de toque).

Exemplo - para configurar a caixa de diálogo para usar toda a janela do navegador e ter um plano de fundo branco em dispositivos de toque:

.s7smartcropvideoviewer .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

.s7smartcropvideoviewer .s7embeddialog .s7dialogheader

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

preenchimento

Preenchimento interno para o conteúdo do cabeçalho.

O ícone e o texto do título são vinculados em um contêiner extra controlado com

.s7smartcropvideoviewer .s7embeddialog .s7dialogheader .s7dialogline

Propriedades CSS da linha de diálogo

preenchimento

Preenchimento interno para o ícone e o título do cabeçalho

O ícone Cabeçalho é controlado com o seguinte seletor de classe CSS

.s7smartcropvideoviewer .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.
posição de fundo	Posição dentro da estrutura de arte, se os sprites CSS forem usados. Consulte Sprites CSS .

O título do cabeçalho é controlado com o seguinte seletor de classe CSS:

.s7smartcropvideoviewer .s7embeddialog .s7dialogheadertext

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

font-weight	Espessura da fonte.
tamanho da fonte	Altura da fonte.
família de fontes	Família de fontes.
preenchimento	Preenchimento de texto interno.

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

.s7smartcropvideoviewer .s7embeddialog .s7closebutton

Propriedades CSS do botão Fechar ​

top	Posição do botão vertical em relação ao contêiner de cabeçalho.
right	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.
posição de fundo	Posição dentro da estrutura de arte, se os sprites CSS forem usados. Consulte Sprites CSS .

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 um cabeçalho de caixa de diálogo com preenchimento, ícone de 24 x 14 pixels, título de 16 pontos em negrito e botão Fechar de 28 x 28 pixels. Finalmente, coloque-o posicionado dois pixels da parte superior e dois pixels da direita do contêiner da caixa de diálogo:

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

.s7smartcropvideoviewer .s7embeddialog .s7dialogfooter

Propriedades CSS do rodapé da caixa de diálogo ​

border

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. É controlado com o seguinte seletor de classe CSS:

.s7smartcropvideoviewer .s7embeddialog .s7dialogbuttoncontainer

Propriedades CSS do contêiner do 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:

.s7smartcropvideoviewer .s7embeddialog .s7dialogactionbutton

O botão só está disponível em sistemas de desktop.

Propriedades CSS do botão Selecionar tudo

largura	Largura do botão.
altura	Altura do botão.
color	Cor do texto do botão para cada estado.
cor do fundo	Cor de fundo do botão para cada estado.

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

.s7smartcropvideoviewer .s7embeddialog .s7dialogcancelbutton

Propriedades CSS do botão Cancelar da caixa de diálogo

largura	Largura do botão.
altura	Altura do botão.
color	Cor do texto do botão para cada estado.
cor do fundo	Cor de fundo do botão para cada estado.

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 de caixa de diálogo:

.s7smartcropvideoviewer .s7embeddialog .s7dialogfooter .s7button

Propriedades CSS do botão

font-weight	Espessura 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 de caixa	Sombra.
margem direita	Margem do botão direito.

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 de 64 x 34, com cor de texto e cor de plano de fundo diferentes para cada estado de botão:

.s7smartcropvideoviewer .s7embeddialog .s7dialogfooter {
    border-top: 1px solid #909090;
}
.s7smartcropvideoviewer .s7embeddialog .s7dialogbuttoncontainer {
    padding-bottom: 6px;
    padding-top: 10px;
}
.s7smartcropvideoviewer .s7embeddialog .s7dialogfooter .s7button {
    box-shadow: 1px 1px 1px #999999;
    color: #FFFFFF;
    font-size: 9pt;
    font-weight: bold;
    line-height: 34px;
    margin-right: 10px;
}
.s7smartcropvideoviewer .s7embeddialog .s7dialogcancelbutton {
 width:64px;
 height:34px;
}
.s7smartcropvideoviewer .s7embeddialog .s7dialogcancelbutton[state='up'] {
 background-color:#666666;
 color:#dddddd;
}
.s7smartcropvideoviewer .s7embeddialog .s7dialogcancelbutton[state='down'] {
 background-color:#555555;
 color:#ffffff;
}
.s7smartcropvideoviewer .s7embeddialog .s7dialogcancelbutton[state='over'] {
 background-color:#555555;
 color:#ffffff;
}
.s7smartcropvideoviewer .s7embeddialog .s7dialogcancelbutton[state='disabled'] {
 background-color:#b2b2b2;
 color:#dddddd;
}
.s7smartcropvideoviewer .s7embeddialog .s7dialogactionbutton {
 width:82px;
 height:34px;
}
.s7smartcropvideoviewer .s7embeddialog .s7dialogactionbutton[state='up'] {
 background-color:#333333;
 color:#dddddd;
}
.s7smartcropvideoviewer .s7embeddialog .s7dialogactionbutton[state='down'] {
 background-color:#222222;
 color:#cccccc;
}
.s7smartcropvideoviewer .s7embeddialog .s7dialogactionbutton[state='over'] {
 background-color:#222222;
 color:#cccccc;
}
.s7smartcropvideoviewer .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 da caixa de diálogo rolável e o painel de rolagem à direita. Em todos os casos, o componente gerencia a largura dessa área, não é possível defini-la em CSS. A área de diálogo principal é controlada com o seguinte seletor de classe CSS:

.s7smartcropvideoviewer .s7embeddialog .s7dialogviewarea

Propriedades CSS da área de visualizaçã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 funcionar no modo de desktop. Não é aplicável quando a caixa de diálogo é dimensionada para ocupar toda a janela do navegador.
cor do 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 para ter 300 pixels de altura, tenha uma margem de dez pixels e use um plano de fundo branco:

.s7smartcropvideoviewer .s7embeddialog .s7dialogviewarea {
 background-color:#ffffff;
 margin:10px;
 height:300px;
}

Todo o conteúdo do formulário (como rótulos e campos de entrada) reside em um contêiner controlado com

.s7smartcropvideoviewer .s7embeddialog .s7dialogbody

Se a altura desse contêiner parecer ser maior que a área da caixa de diálogo principal, uma rolagem vertical é 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 o preenchimento de dez pixels:

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

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

.s7smartcropvideoviewer .s7embeddialog .s7dialoglabel

Essa classe não é adequada para controlar o tamanho ou a posição do rótulo, pois você pode aplicá-lo a textos em vários lugares 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.
tamanho da fonte	Tamanho da fonte do rótulo.
família de fontes	Rotular família de fontes.
color	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:

.s7smartcropvideoviewer .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:

.s7smartcropvideoviewer .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:

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

O código incorporado é encapsulado em um contêiner e controlado com o seguinte seletor de classe CSS:

.s7smartcropvideoviewer .s7embeddialog .s7dialoginputcontainer

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

largura	A largura do contêiner de código incorporado.
border	Borda em torno do contêiner de código incorporado.
preenchimento	Preenchimento interno.

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

.s7smartcropvideoviewer .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:

.s7smartcropvideoviewer .s7embeddialog .s7dialoginputcontainer

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

quebra automática

Estilo de quebra automática de palavra.

Exemplo - Para configurar o código incorporado a ser usado break-word quebra automática de palavra:

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

Incorporar rótulo de tamanho e lista suspensa estão na parte inferior da caixa de diálogo e são colocados em um contêiner controlado com o seguinte seletor de classe CSS:

.s7smartcropvideoviewer .s7embeddialog .s7dialogembedsizepanel

Propriedades CSS do painel de tamanho da incorporação da caixa de diálogo

preenchimento

Preenchimento interno.

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

.s7smartcropvideoviewer .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:

.s7smartcropvideoviewer .s7embeddialog .s7dialogembedsizepanel

Propriedades CSS do painel de tamanho da incorporação da caixa de diálogo

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

Exemplo - para definir o rótulo de tamanho incorporado para ser alinhado no topo e 80 pixels de largura:

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

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

.s7smartcropvideoviewer .s7embeddialog .s7combobox

Propriedades CSS da caixa de combinação

largura

Largura da caixa de combinação.

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

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

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

.s7smartcropvideoviewer .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 do tamanho de incorporação como 40 pixels:

.s7smartcropvideoviewer .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:

.s7smartcropvideoviewer .s7embeddialog .s7combobox .s7comboboxbutton

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

top	Posição vertical do botão dentro da caixa de combinação.
right	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.
posição de fundo	Posição dentro da estrutura de arte, se os sprites CSS forem usados. Consulte Sprites CSS .

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

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

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

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

.s7smartcropvideoviewer .s7embeddialog .s7comboboxdropdown

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

Propriedades CSS da caixa de combinação suspensa

border

Borda do painel.

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

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

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

.s7smartcropvideoviewer .s7embeddialog .s7dropdownitemanchor

Propriedades CSS da âncora suspensa do item

cor do fundo

Plano de fundo do item.

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

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

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

.s7smartcropvideoviewer .s7embeddialog .s7checkmark

Propriedades CSS da caixa de seleção

largura	Largura do ícone.
altura	Altura do ícone.
imagem de fundo	Imagem do item.
posição de fundo	Posição dentro da estrutura de arte, se os sprites CSS forem usados. Consulte Sprites CSS .

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

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

Quando a opção "Tamanho personalizado" é selecionada na caixa de combinação de tamanho incorporado, a caixa de diálogo exibe dois campos de entrada extras à direita para permitir que o usuário insira um tamanho de incorporação personalizado. Esses campos são vinculados em um contêiner controlado pelo seguinte seletor de classe CSS:

.s7smartcropvideoviewer .s7embeddialog .s7dialogcustomsizepanel

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

left	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:

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

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

.s7smartcropvideoviewer .s7embeddialog .s7dialogcustomsize

Propriedades CSS do tamanho personalizado da caixa de diálogo

border	Borda em torno 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 terem uma borda cinza, margem, preenchimento de um pixel e 70 pixels de largura:

.s7smartcropvideoviewer .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:

.s7smartcropvideoviewer .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 largura de 44 pixels

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

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

.s7smartcropvideoviewer .s7embeddialog .s7scrollbar

Propriedades de CSS da barra de rolagem

largura	Largura da barra de rolagem.
top	O deslocamento vertical da barra de rolagem na parte superior do painel de rolagem.
bottom	O deslocamento vertical da barra de rolagem na parte inferior do painel de rolagem.
right	O deslocamento da barra de rolagem horizontal a partir da borda direita do painel de rolagem.

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

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

O rastreamento 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

.s7smartcropvideoviewer .s7embeddialog .s7scrollbar .s7scrolltrack

Propriedades CSS do rastreamento da barra de rolagem

largura	Largura da faixa.
cor do fundo	Rastrear a cor do plano de fundo.

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

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

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

.s7smartcropvideoviewer .s7embeddialog .s7scrollbar .s7scrollthumb

Propriedades de CSS da barra de rolagem

largura	Largura do polegar.
altura	Altura do polegar.
parte superior do preenchimento	O preenchimento vertical entre a parte superior da faixa.
parte inferior do preenchimento	O preenchimento vertical entre a parte inferior da faixa.
imagem de fundo	A imagem exibida para um determinado estado de polegar.

Exemplo - para configurar um polegar da barra de rolagem que seja 28 x 45 pixels, tenha uma margem de dez pixels na parte superior e inferior e tenha uma arte-final diferente para cada estado:

.s7smartcropvideoviewer .s7embeddialog .s7scrollbar .s7scrollthumb {
    height: 45px;
    padding-bottom: 10px;
    padding-top: 10px;
    width: 28px;
}
.s7smartcropvideoviewer .s7embeddialog .s7scrollbar .s7scrollthumb[state="up"] {
 background-image:url("images/sdk/scrollbar_thumb_up.png");
}
.s7smartcropvideoviewer .s7embeddialog .s7scrollbar .s7scrollthumb[state="down"] {
 background-image:url("images/sdk/scrollbar_thumb_down.png");
}
.s7smartcropvideoviewer .s7embeddialog .s7scrollbar .s7scrollthumb[state="over"] {
 background-image:url("images/sdk/scrollbar_thumb_over.png");
}
.s7smartcropvideoviewer .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 pelos seguintes seletores de classe CSS:

.s7smartcropvideoviewer .s7embeddialog .s7scrollbar .s7scrollupbutton

.s7smartcropvideoviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton

Não é possível posicionar botões de rolagem usando propriedades CSS superior, esquerda, inferior e direita. Em vez disso, a lógica do visualizador os 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.
posição de fundo	Posição dentro da estrutura de arte, se os sprites CSS forem usados. Consulte Sprites CSS .

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 que são 28 x 32 pixels e têm arte-final diferente para cada estado:

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