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 . |
Esse botão suporta state
seletor de atributos, que pode ser usado para aplicar capas diferentes a estados de botão diferentes.
É 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 . |
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 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 Selecionar tudo suporta o state
seletor de atributos, 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:
.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. |
O botão Cancelar é compatível com o state
seletor de atributos, 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 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. |
A caixa de combinação suporta o expanded
seletor de atributos com possíveis valores de true
e false
. O true
é usado quando a caixa de combinação exibe um dos tamanhos incorporados predefinidos, portanto, deve ter toda a largura disponível. O false
é usado quando a opção de tamanho personalizado está selecionada na caixa de combinação; portanto, deve ser reduzido para permitir espaço para campos de entrada de largura e altura personalizados.
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. |
O polegar suporta o state
seletor de atributos, que pode ser usado para aplicar diferentes capas a diferentes estados de polegar: up
, down
, over
e disabled
.
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 . |
Esses botões suportam o state
seletor de atributos, que pode ser usado para aplicar diferentes capas a diferentes estados de botão: 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 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);
}