Incrustar recurso compartido embed-share

La herramienta Compartir incrustada consiste en un botón agregado al panel Compartir en redes sociales y el cuadro de diálogo modal que se muestra cuando se activa la herramienta. La posición del botón se administra completamente mediante la herramienta Compartir en redes sociales.

El aspecto del botón para compartir incrustado se controla con el siguiente selector de clase CSS:

.s7videoviewer .s7embedshare

Propiedades CSS de la herramienta de uso compartido de incrustación

width
Ancho del botón.
height
Altura del botón.
background-image
Imagen que se muestra para un estado de botón determinado.
background-position

Coloque dentro del icono de ilustración si se utilizan iconos CSS.

Consulte Sprites CSS.

NOTE
Este botón admite el state selector de atributos, que se puede utilizar para aplicar distintos aspectos a distintos estados de botón.

Es posible quitar el botón del panel Compartir en redes sociales mediante la configuración display:none Propiedad CSS en su clase CSS.

La información del objeto del botón se puede localizar. Consulte Localización de elementos de la interfaz de usuario para obtener más información.

Ejemplo: Para configurar un botón de uso compartido incrustado de 28 x 28 píxeles y mostrar una imagen diferente para cada uno de los cuatro estados de botón 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);
}

La superposición de fondo que cubre la página web cuando el cuadro de diálogo está activo, se controla con el siguiente selector de clase CSS:

.s7videoviewer .s7embeddialog .s7backoverlay

Propiedades CSS de la superposición de fondo

opacidad
Opacidad de superposición de fondo.
background-color
Color de superposición de fondo.

Ejemplo: para configurar una superposición de fondo para que sea gris con una opacidad del 70 %:

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

De forma predeterminada, el cuadro de diálogo modal se muestra centrado en la pantalla de los sistemas de escritorio y ocupa toda el área de la página web en los dispositivos táctiles. En todos los casos, el componente gestiona la colocación y el tamaño del cuadro de diálogo. El cuadro de diálogo se controla con el siguiente selector de clase CSS:

.s7videoviewer .s7embeddialog .s7dialog

Propiedades CSS del cuadro de diálogo

border-radius
Radio del borde del cuadro de diálogo, en caso de que el cuadro de diálogo no ocupe todo el explorador.
background-color
Color de fondo del cuadro de diálogo.
width
Debe estar desconfigurado o configurado al 100 %, en cuyo caso el cuadro de diálogo ocupa toda la ventana del explorador (este modo es preferido en dispositivos táctiles).
height
Debe estar desconfigurado o configurado al 100 %, en cuyo caso el cuadro de diálogo ocupa toda la ventana del explorador (este modo es preferido en dispositivos táctiles).

Ejemplo: para configurar el cuadro de diálogo para que utilice toda la ventana del explorador y tenga un fondo blanco en los dispositivos táctiles:

.s7videoviewer .s7touchinput .s7embeddialog .s7dialog {
 width:100%;
 height:100%;
background-color: #ffffff;
}

El encabezado del cuadro de diálogo consta de un icono, un texto de título y un botón de cierre. El contenedor de encabezado se controla con

.s7videoviewer .s7embeddialog .s7dialogheader

Propiedades CSS del encabezado del cuadro de diálogo

relleno
Relleno interno del contenido del encabezado.

El icono y el texto del título se envuelven en un contenedor adicional controlado con

.s7videoviewer .s7embeddialog .s7dialogheader .s7dialogline

Propiedades CSS de la línea de diálogo

relleno
Relleno interior para el icono y el título del encabezado

El icono de encabezado se controla con el siguiente selector de clase CSS

.s7videoviewer .s7embeddialog .s7dialogheadericon

Propiedades CSS del icono del encabezado del cuadro de diálogo

width
Ancho del icono.
height
Altura del icono.
background-image
Imagen del icono.
background-position

Coloque dentro del icono de ilustración si se utilizan iconos CSS.

Consulte Sprites CSS.

El título del encabezado se controla con el siguiente selector de clase CSS:

.s7videoviewer .s7embeddialog .s7dialogheadertext

Propiedades CSS del texto del encabezado del cuadro de diálogo

font-weight
Grosor de fuente.
font-size
Altura de la fuente.
font-family
Familia de fuentes.
relleno
Relleno de texto interno.

El botón Cerrar se controla con el siguiente selector de clase CSS:

.s7videoviewer .s7embeddialog .s7closebutton

Propiedades CSS del ​ de botón Cerrar

parte superior
Posición vertical del botón en relación con el contenedor de encabezado.
derecha
Posición horizontal del botón relativa al contenedor del encabezado.
width
Ancho del botón.
height
Altura del botón.
relleno
Relleno interior del botón.
background-image
Imagen de botón para cada estado.
background-position

Coloque dentro del icono de ilustración si se utilizan iconos CSS.

Consulte Sprites CSS.

NOTE
Este botón admite el state selector de atributos, que se puede utilizar para aplicar distintos aspectos a distintos estados de botón.

Se puede localizar la información del objeto del botón Cerrar y el título del cuadro de diálogo. Consulte Localización de elementos de la interfaz de usuario para obtener más información.

Ejemplo: Para configurar el encabezado del cuadro de diálogo con relleno, icono de 24 x 14 píxeles, título en negrita de 16 puntos. Y finalmente, un botón de cierre de 28 x 28 píxeles, colocado a dos píxeles de la parte superior, y a dos píxeles de la derecha del contenedor de cuadro 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);
}

El pie de página del cuadro de diálogo consiste en el botón "cancelar". El contenedor de pie de página se controla con el siguiente selector de clase CSS:

.s7videoviewer .s7embeddialog .s7dialogfooter

Propiedades CSS de la ​ de pie de página del cuadro de diálogo

borde
Borde que se puede utilizar para separar visualmente el pie de página del resto del cuadro de diálogo.

El pie de página tiene un contenedor interno que mantiene el botón. Se controla con el siguiente selector de clase CSS:

.s7videoviewer .s7embeddialog .s7dialogbuttoncontainer

Propiedades CSS del contenedor de botones del cuadro de diálogo

relleno
Relleno interno entre el pie de página y el botón.

El botón Seleccionar todo se controla con el siguiente selector de clase CSS:

.s7videoviewer .s7embeddialog .s7dialogactionbutton

El botón sólo está disponible en sistemas de escritorio.

Propiedades CSS del botón Seleccionar todo

width
Ancho del botón.
height
Altura del botón.
color
Color del texto del botón para cada estado.
background-color
Color de fondo del botón para cada estado.
NOTE
El botón Seleccionar todo admite el state selector de atributos, que se puede utilizar para aplicar distintos aspectos a distintos estados de botón.

El botón Cancelar se controla con el siguiente selector de clase CSS:

.s7videoviewer .s7embeddialog .s7dialogcancelbutton

Propiedades CSS del botón Cancelar del cuadro de diálogo

width
Ancho del botón.
height
Altura del botón.
color
Color del texto del botón para cada estado.
background-color
Color de fondo del botón para cada estado.
NOTE
El botón Cancel es compatible con state selector de atributos, que se puede utilizar para aplicar distintos aspectos a distintos estados de botón.

Además, ambos botones comparten una clase CSS común que puede contener configuraciones de CSS iguales para otros botones de cuadro de diálogo:

.s7videoviewer .s7embeddialog .s7dialogfooter .s7button

Propiedades CSS del botón

font-weight
Grosor de fuente del botón.
font-size
Tamaño de fuente del botón.
font-family
Familia de fuentes Button.
altura de línea
Altura del texto dentro del botón. Afecta a la alineación vertical.
caja-sombra
Sombra paralela.
margin-right
Margen del botón derecho.

La información sobre herramientas de los botones se puede localizar. Consulte Localización de elementos de la interfaz de usuario para obtener más información.

Ejemplo: para configurar un pie de página de cuadro de diálogo con un botón Cancelar de 64 x 34, con un color de texto y un color de fondo diferentes para cada estado de botón:

.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;
}

El área de diálogo principal (entre el encabezado y el pie de página) contiene contenido de cuadro de diálogo desplazable y panel de desplazamiento a la derecha. En todos los casos, el componente administra la anchura de esta área, no es posible establecerla en CSS. El área del cuadro de diálogo principal se controla con el siguiente selector de clase CSS:

.s7videoviewer .s7embeddialog .s7dialogviewarea

Propiedades CSS de la ​ del área de visualización del cuadro de diálogo

height
Alto del área del cuadro de diálogo principal. Sólo debe especificarse cuando el cuadro de diálogo funciona en modo escritorio. No es aplicable cuando el tamaño del cuadro de diálogo es tal que ocupa toda la ventana del explorador.
background-color
Color de fondo del área del cuadro de diálogo principal.
margin
Margen exterior.

Ejemplo: para configurar un área de cuadro de diálogo principal con una altura de 300 píxeles, tener un margen de diez píxeles y utilizar un fondo blanco:

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

Todo el contenido del formulario (como etiquetas y campos de entrada) reside dentro de un contenedor controlado con

.s7videoviewer .s7embeddialog .s7dialogbody

Si la altura de este contenedor parece ser mayor que el área del cuadro de diálogo principal, el componente activa automáticamente un desplazamiento vertical.

Propiedades CSS del ​ de cuerpo del cuadro de diálogo

relleno
Relleno interior.

Ejemplo: para configurar el contenido del formulario para que tenga un relleno de diez píxeles:

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

Todas las etiquetas estáticas del formulario de cuadro de diálogo se controlan con

.s7videoviewer .s7embeddialog .s7dialoglabel

Esta clase no es adecuada para controlar el tamaño o la posición de la etiqueta porque puede aplicarla a textos en varios lugares de la interfaz de usuario del formulario.

Propiedades CSS de la etiqueta del cuadro de diálogo. ​

font-weight
Grosor de fuente de etiqueta.
font-size
Tamaño de fuente de etiqueta.
font-family
Familia de fuentes de etiquetas.
color
Color de texto de etiqueta.

La información sobre herramientas de etiquetas del cuadro de diálogo se puede localizar. Consulte Localización de elementos de la interfaz de usuario para obtener más información.

Ejemplo: para configurar todas las etiquetas como grises, negrita con una fuente de nueve píxeles:

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

El tamaño de la copia de texto que se muestra encima del código incrustado se controla con el siguiente selector de clases CSS:

.s7videoviewer .s7embeddialog .s7dialoginputwide

Propiedades CSS del campo de toda la entrada del cuadro de diálogo

width
Ancho del campo de entrada.
relleno
Relleno interior.

Ejemplo: para definir que la copia de texto tenga un ancho de 430 píxeles y un relleno de diez píxeles en la parte inferior:

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

El código incrustado se envuelve en un contenedor y se controla con el siguiente selector de clase CSS:

.s7videoviewer .s7embeddialog .s7dialoginputcontainer

Propiedades CSS del contenedor de entrada del cuadro de diálogo

width
La anchura del contenedor de código incrustado.
borde
Borde alrededor del contenedor de código incrustado.
relleno
Relleno interior.

Ejemplo: para establecer un borde gris de un píxel alrededor del texto del código incrustado, hágalo de 430 píxeles de ancho y tenga un relleno de diez píxeles:

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

El texto del código incrustado real se controla con el siguiente selector de clase CSS:

.s7videoviewer .s7embeddialog .s7dialoginputcontainer

Propiedades CSS del contenedor de entrada del cuadro de diálogo

ajuste de palabras
Estilo de ajuste de palabras.

Ejemplo: Para configurar el código incrustado de modo que se utilice break-word ajuste de palabras:

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

La etiqueta de tamaño incrustado y la lista desplegable se encuentran en la parte inferior del cuadro de diálogo y se colocan en un contenedor controlado con el siguiente selector de clase CSS:

.s7videoviewer .s7embeddialog .s7dialogembedsizepanel

Propiedades CSS del panel de tamaño incrustado del cuadro de diálogo

relleno
Relleno interior.

Ejemplo: para configurar un panel de tamaño de incrustación de modo que tenga diez píxeles de relleno:

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

El tamaño y la alineación de la etiqueta de tamaño de incrustación se controlan con el siguiente selector de clase CSS:

.s7videoviewer .s7embeddialog .s7dialogembedsizepanel

Propiedades CSS del panel de tamaño incrustado del cuadro de diálogo

vertical-align
Alineación de etiqueta vertical.
width
Anchura de etiqueta.

Ejemplo: para establecer la etiqueta de tamaño de incrustación para que esté alineada en la parte superior y tenga un ancho de 80 píxeles:

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

La anchura del cuadro combinado de tamaño incrustado se controla con el siguiente selector de clase CSS:

.s7videoviewer .s7embeddialog .s7combobox

Propiedades CSS del cuadro combinado

width
Ancho del cuadro combinado.
NOTE
El cuadro combinado admite expanded selector de atributos con posibles valores de true y false. El true se utiliza cuando el cuadro combinado muestra uno de los tamaños de incrustación predefinidos, por lo que debe tener todo el ancho disponible. El false se utiliza cuando se selecciona la opción tamaño personalizado en el cuadro combinado, por lo que debe reducirse para permitir espacio para los campos de entrada de ancho y alto personalizados.

Ejemplo: Para establecer el cuadro combinado de tamaño de incrustación en 300 píxeles de ancho cuando se muestra un elemento predefinido y 110 píxeles de ancho cuando se muestra un tamaño personalizado:

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

La altura del texto del cuadro combinado se define mediante un elemento interno especial y se controla con el siguiente selector de clase CSS:

.s7videoviewer .s7embeddialog .s7combobox .s7comboboxtext

Propiedades CSS del texto del cuadro combinado

height
Altura del texto del cuadro combinado.

Ejemplo: para establecer la altura del texto del cuadro combinado de tamaño de incrustación en 40 píxeles:

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

El cuadro combinado tiene un botón "desplegable" a la derecha y se controla con el siguiente selector de clase CSS:

.s7videoviewer .s7embeddialog .s7combobox .s7comboboxbutton

Propiedades CSS del botón de cuadro combinado

parte superior
Posición del botón vertical dentro del cuadro combinado.
derecha
Posición del botón horizontal dentro del cuadro combinado.
width
Ancho del botón.
height
Altura del botón.
background-image
Imagen de botón para cada estado.
background-position

Coloque dentro del icono de ilustración si se utilizan iconos CSS.

Consulte Sprites CSS.

Este botón admite el state selector de atributos, que se puede utilizar para aplicar distintos aspectos a distintos estados de botón.

Ejemplo: para establecer un botón "desplegable" en 28 x 28 píxeles y tener una imagen independiente 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);
}

El panel con la lista de tamaños de incrustación mostrados cuando se abre el cuadro combinado, se controla con el siguiente selector de clase CSS:

.s7videoviewer .s7embeddialog .s7comboboxdropdown

El componente controla el tamaño y la posición del panel. No es posible cambiarlo a través de CSS.

Propiedades CSS de la lista desplegable del cuadro combinado

borde
Borde del panel.

Ejemplo: para configurar el panel de cuadro combinado para que tenga un borde gris de un píxel:

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

Un solo elemento en un panel desplegable que se controla con el siguiente selector de clase CSS:

.s7videoviewer .s7embeddialog .s7dropdownitemanchor

Propiedades CSS del anclaje del elemento desplegable

background-color
Fondo del elemento.

Ejemplo: para configurar el elemento del panel del cuadro combinado para que tenga un fondo blanco:

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

Una marca de verificación que se muestra a la izquierda del elemento seleccionado dentro del panel de cuadro combinado y que se controla con el siguiente selector de clase CSS:

.s7videoviewer .s7embeddialog .s7checkmark

Propiedades CSS de la casilla de verificación

width
Ancho del icono.
height
Altura del icono.
background-image
Imagen del elemento.
background-position

Coloque dentro del icono de ilustración si se utilizan iconos CSS.

Consulte Sprites CSS.

Por ejemplo, para definir el icono de marca de verificación en 25 x 25 píxeles:

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

Cuando se selecciona la opción "Tamaño personalizado" en el cuadro combinado de tamaño de incrustación, el cuadro de diálogo muestra dos campos de entrada adicionales a la derecha para permitir que el usuario introduzca un tamaño de incrustación personalizado. Estos campos se encapsulan en un contenedor que se controla con el siguiente selector de clase CSS:

.s7videoviewer .s7embeddialog .s7dialogcustomsizepanel

Propiedades CSS del panel de tamaño personalizado del cuadro de diálogo

izquierda
Distancia desde el cuadro combinado de tamaño incrustado.

Ejemplo: para establecer el panel de campos de entrada de tamaño personalizado en 20 píxeles a la derecha del cuadro combinado:

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

Cada campo de entrada de tamaño personalizado está envuelto en un contenedor que representa un borde y establece el margen entre los campos. Se controla con el siguiente selector de clase CSS:

.s7videoviewer .s7embeddialog .s7dialogcustomsize

Propiedades CSS del tamaño personalizado del cuadro de diálogo

borde
Borde alrededor del campo de entrada.
width
Ancho del campo de entrada.
margin
Margen del campo de entrada.
relleno
Relleno del campo de entrada.

Ejemplo: Para establecer que los campos de entrada de tamaño personalizado tengan un borde gris de un píxel, un margen, un relleno y un ancho de 70 píxeles:

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

Si es necesario el desplazamiento vertical, la barra de desplazamiento se representa en el panel cerca del borde derecho del cuadro de diálogo, que se controla con el siguiente selector de clase CSS:

.s7videoviewer .s7embeddialog .s7dialogscrollpanel

Propiedades CSS del panel de desplazamiento del cuadro de diálogo

width
Ancho del panel de desplazamiento.

Ejemplo: para configurar un panel de desplazamiento con un ancho de 44 píxeles

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

El aspecto del área de la barra de desplazamiento se controla con el siguiente selector de clase CSS:

.s7videoviewer .s7embeddialog .s7scrollbar

Propiedades CSS de la barra de desplazamiento

width
Ancho de la barra de desplazamiento.
parte superior
Desplazamiento de la barra de desplazamiento vertical desde la parte superior del panel de desplazamiento.
parte inferior
Desplazamiento vertical de la barra desde la parte inferior del panel de desplazamiento.
derecha
Desplazamiento de la barra de desplazamiento horizontal desde el borde derecho del panel de desplazamiento.

Ejemplo: para configurar una barra de desplazamiento que tenga 28 píxeles de ancho y un margen de ocho píxeles desde la parte superior, derecha e inferior del panel de desplazamiento:

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

La pista de la barra de desplazamiento es el área entre los botones de desplazamiento superior e inferior. El componente establece automáticamente la posición y la altura de la pista. La pista se controla con el siguiente selector de clase CSS

.s7videoviewer .s7embeddialog .s7scrollbar .s7scrolltrack

Propiedades CSS del seguimiento de barras de desplazamiento

width
Anchura de la pista.
background-color
Rastrear color de fondo.

Ejemplo: para configurar una pista de barra de desplazamiento que tenga 28 píxeles de ancho y un fondo gris:

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

El pulgar de la barra de desplazamiento se mueve verticalmente dentro de un área de seguimiento de desplazamiento. Su posición vertical está totalmente controlada por la lógica del componente. Sin embargo, la altura de la miniatura no cambia dinámicamente según la cantidad de contenido. La altura de la miniatura y otros aspectos se pueden configurar con el siguiente selector de clases CSS:

.s7videoviewer .s7embeddialog .s7scrollbar .s7scrollthumb

Propiedades CSS del miniatura de la barra de desplazamiento

width
Ancho de la miniatura.
height
Altura del pulgar.
relleno superior
El margen vertical entre la parte superior de la pista.
padding-bottom
El margen vertical entre la parte inferior de la pista.
background-image
La imagen mostrada para un estado de miniatura determinado.
NOTE
La miniatura admite state selector de atributos, que se puede utilizar para aplicar diferentes aspectos a diferentes estados de la miniatura: up, down, over, y disabled.

Ejemplo: para configurar un miniatura de barra de desplazamiento de 28 x 45 píxeles, tiene un margen de diez píxeles en la parte superior e inferior y tiene ilustraciones diferentes 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");
}

El aspecto de los botones de desplazamiento superior e inferior se controla con los siguientes selectores de clase CSS:

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

No es posible colocar botones de desplazamiento mediante las propiedades CSS top, left, bottom y right. En su lugar, la lógica del visor los coloca automáticamente.

Propiedades CSS de los botones de desplazamiento superior e inferior

width
Ancho del botón.
height
Altura del botón.
background-image
Imagen mostrada para un estado de botón determinado.
background-position

Coloque dentro del icono de ilustración si se utilizan iconos CSS.

Consulte Sprites CSS.

NOTE
Estos botones admiten el state selector de atributos, que se puede utilizar para aplicar diferentes aspectos a distintos estados de botones: up, down, over, y disabled.

La información sobre herramientas de los botones se puede localizar. Consulte Localización de elementos de la interfaz de usuario para obtener más información.

Ejemplo: para configurar botones de desplazamiento de 28 x 32 píxeles con ilustraciones diferentes 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