Uso compartido de correo electrónico

La herramienta para compartir correo electrónico 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 la gestiona completamente la herramienta Compartir en Social.

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

.s7videoviewer .s7emailshare

Propiedades CSS de la herramienta para compartir correo electrónico

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

Colocar dentro de la ilustración sprite, si se utilizan sprites CSS.

Consulte Sprites CSS .

Este botón admite el selector de atributos state, que puede utilizarse para aplicar diferentes apariencias a distintos estados de botones.

Es posible quitar el botón del panel Compartir en Social estableciendo la propiedad display:none CSS en su clase CSS.

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

Ejemplo: para configurar un botón de uso compartido de correo electrónico de 28 x 28 píxeles y que muestre una imagen diferente para cada uno de los cuatro estados de botón diferentes.

.s7videoviewer .s7emailshare { 
 width:28px; 
 height:28px; 
} 
.s7videoviewer .s7emailshare[state='up'] { 
background-image:url(images/v2/EmailShare_dark_up.png); 
} 
.s7videoviewer .s7emailshare[state='over'] { 
background-image:url(images/v2/EmailShare_dark_over.png); 
} 
.s7videoviewer .s7emailshare[state='down'] { 
background-image:url(images/v2/EmailShare_dark_down.png); 
} 
.s7videoviewer .s7emailshare[state='disabled'] { 
background-image:url(images/v2/EmailShare_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 .s7emaildialog .s7backoverlay

Propiedades CSS de la superposición posterior

opacidad

Opacidad de superposición de fondo.

background-color

Color de superposición de fondo.

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

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

De forma predeterminada, el cuadro de diálogo modal se muestra centrado en la pantalla en los sistemas de escritorio y toma todo 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 .s7emaildialog .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 utilice toda la ventana del explorador);

background-color

Color de fondo del cuadro de diálogo;

width

Se debe desactivar o establecer en 100 %, en cuyo caso el cuadro de diálogo ocupa toda la ventana del navegador (este modo es preferible en dispositivos táctiles);

height

Se debe desactivar o establecer en 100 %, en cuyo caso el cuadro de diálogo toma toda la ventana del navegador (este modo es preferible en dispositivos táctiles).

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

.s7videoviewer .s7touchinput .s7emaildialog .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 del encabezado se controla con el siguiente selector de clase CSS

.s7videoviewer .s7emaildialog .s7dialogheader

Propiedades CSS del encabezado del cuadro de diálogo

relleno

Relleno interior para el contenido del encabezado.

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

.s7videoviewer .s7emaildialog .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 .s7emaildialog .s7dialogheadericon

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

width

Ancho del icono.

height

Altura del icono.

background-image

Imagen de icono.

background-position

Colocar dentro de la ilustración sprite, si se utilizan sprites CSS.

Consulte Sprites CSS .

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

.s7videoviewer .s7emaildialog .s7dialogheadertext

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

font-peso

Peso de fuentes.

font-size

Altura de 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 .s7emaildialog .s7closebutton

Propiedades CSS del botón de cierre

parte superior

Posición vertical del botón con respecto al contenedor del encabezado.

derecha

Posición horizontal del botón con respecto 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

Colocar dentro de la ilustración sprite, si se utilizan sprites CSS.

Consulte Sprites CSS .

NOTA

Este botón admite el selector de atributos state, que puede utilizarse para aplicar diferentes apariencias a distintos estados de botones.

Se pueden localizar la información del botón Cerrar y el título del cuadro de diálogo. Consulte Localización de los 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 17 píxeles, título de 16 puntos en negrita y botón de cierre de 28 x 28 píxeles colocado 2 píxeles desde la parte superior y 2 píxeles desde la derecha del contenedor de diálogo:

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

El pie de página del cuadro de diálogo consta de los botones "cancelar" y "enviar correo electrónico". El contenedor de pie de página se controla con el siguiente selector de clase CSS:

.s7videoviewer .s7emaildialog .s7dialogfooter

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

borde

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

El pie de página tiene un contenedor interior que mantiene ambos botones. Se controla con el siguiente selector de clase CSS:

.s7videoviewer .s7emaildialog .s7dialogbuttoncontainer

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

relleno

Relleno interior entre el pie de página y los botones.

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

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

NOTA

Este botón admite el selector de atributos state, que puede utilizarse para aplicar diferentes apariencias a distintos estados de botones.

El botón Enviar correo electrónico se controla con el siguiente selector de clase CSS:

.s7videoviewer .s7emaildialog .s7dialogactionbutton

Propiedades CSS del botón de acción 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.

NOTA

Este botón admite el selector de atributos state, que puede utilizarse para aplicar diferentes apariencias a distintos estados de botones.

Además, ambos botones comparten la misma clase CSS común que puede contener la configuración CSS que es la misma para otros botones de cuadro de diálogo:

.s7videoviewer .s7emaildialog .s7dialogfooter .s7button

Propiedades CSS del botón

font-peso

Peso de fuente del botón.

font-size

Tamaño de fuente del botón.

font-family

Familia de fuentes de botón.

line-height

Altura del texto dentro del botón. Afecta a la alineación vertical.

box-Shadow

Sombra paralela.

margin-right

Margen del botón derecho.

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

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

.s7videoviewer .s7emaildialog .s7dialogfooter { 
    border-top: 1px solid #909090; 
} 
.s7videoviewer .s7emaildialog .s7dialogbuttoncontainer { 
    padding-bottom: 6px; 
    padding-top: 10px; 
} 
.s7videoviewer .s7emaildialog .s7dialogfooter .s7button { 
    box-shadow: 1px 1px 1px #999999; 
    color: #FFFFFF; 
    font-size: 9pt; 
    font-weight: bold; 
    line-height: 34px; 
    margin-right: 10px; 
} 
.s7videoviewer .s7emaildialog .s7dialogcancelbutton { 
 width:64px; 
 height:34px; 
} 
.s7videoviewer .s7emaildialog .s7dialogcancelbutton[state='up'] { 
 background-color:#666666; 
 color:#dddddd; 
} 
.s7videoviewer .s7emaildialog .s7dialogcancelbutton[state='down'] { 
 background-color:#555555; 
 color:#ffffff; 
} 
.s7videoviewer .s7emaildialog .s7dialogcancelbutton[state='over'] { 
 background-color:#555555; 
 color:#ffffff; 
} 
.s7videoviewer .s7emaildialog .s7dialogcancelbutton[state='disabled'] { 
 background-color:#b2b2b2; 
 color:#dddddd; 
} 
.s7videoviewer .s7emaildialog .s7dialogactionbutton { 
 width:82px; 
 height:34px; 
} 
.s7videoviewer .s7emaildialog .s7dialogactionbutton[state='up'] { 
 background-color:#333333; 
 color:#dddddd; 
} 
.s7videoviewer .s7emaildialog .s7dialogactionbutton[state='down'] { 
 background-color:#222222; 
 color:#cccccc; 
} 
.s7videoviewer .s7emaildialog .s7dialogactionbutton[state='over'] { 
 background-color:#222222; 
 color:#cccccc; 
} 
.s7videoviewer .s7emaildialog .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 el panel de desplazamiento de la derecha. En todos los casos, el componente administra la anchura de esta área, no es posible configurarla en CSS. El área de diálogo principal se controla con el siguiente selector de clase CSS:

.s7videoviewer .s7emaildialog .s7dialogviewarea

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

height

Altura del área del cuadro de diálogo principal. Solo debe especificarse cuando el cuadro de diálogo funciona en modo de escritorio. No es aplicable cuando el cuadro de diálogo está ajustado para ocupar toda la ventana del explorador.

background-color

Color de fondo del área del cuadro de diálogo principal.

margin

Margen exterior.

NOTA

El área del cuadro de diálogo principal admite el selector de atributos state opcional. Se establece en sendsuccess cuando se envía el formulario de correo electrónico y el cuadro de diálogo muestra un mensaje de confirmación. Siempre que el mensaje de confirmación sea pequeño, este selector de atributos se puede utilizar para reducir la altura del cuadro de diálogo cuando se muestra dicho mensaje de confirmación.

Ejemplo: para configurar el área del cuadro de diálogo principal para que tenga una altura inicial de 300 píxeles y una altura de 100 píxeles cuando se muestre el mensaje de confirmación, tenga un margen de diez píxeles y utilice un fondo blanco:

.s7videoviewer .s7emaildialog .s7dialogviewarea { 
 background-color:#ffffff; 
 margin:10px; 
 height:300px; 
} 
.s7videoviewer .s7emaildialog .s7dialogviewarea[state='sendsuccess'] { 
 height:100px; 
}

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

.s7videoviewer .s7emaildialog .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 cuerpo del cuadro de diálogo

relleno

Relleno interior.

Ejemplo: para configurar el contenido del formulario con un margen de diez píxeles:

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

El formulario de cuadro de diálogo se rellena línea a línea, donde cada línea tiene una parte del contenido del formulario (como una etiqueta y un campo de entrada de texto). La línea de un solo formulario se controla con el siguiente selector de clase CSS:

.s7videoviewer .s7emaildialog .s7dialogbody .s7dialogline

Propiedades CSS de la línea del cuadro de diálogo

relleno

Relleno de línea interior.

Ejemplo: para configurar un formulario de cuadro de diálogo con un margen de diez píxeles para cada línea:

.s7videoviewer .s7emaildialog .s7dialogbody .s7dialogline { 
    padding: 10px; 
}

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

.s7videoviewer .s7emaildialog .s7dialoglabel

Esta clase no es adecuada para controlar el tamaño o la posición de las etiquetas, ya que se puede aplicar a textos en varios lugares de la interfaz de usuario del formulario.

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

font-peso

Peso de fuentes de etiquetas.

font-size

Tamaño de fuente de la etiqueta.

font-family

Familia de fuentes de etiquetas.

color

Color del texto de la etiqueta.

Las etiquetas del cuadro de diálogo se pueden localizar. Consulte Localización de los elementos de la interfaz de usuario para obtener más información.

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

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

Todas las etiquetas estáticas que se muestran a la izquierda de los campos de entrada del formulario se controlan con:

.s7videoviewer .s7emaildialog .s7dialoginputlabel

Propiedades CSS de la etiqueta de entrada del cuadro de diálogo

width

Ancho de la etiqueta estática.

text-align

Alineación de texto horizontal.

margin

Margen de etiqueta estático.

relleno

Relleno estático de etiquetas.

Ejemplo: para configurar las etiquetas de campo de entrada con una anchura de 50 píxeles, alineación a la derecha, con diez píxeles de relleno y un margen de diez píxeles a la derecha:

.s7videoviewer .s7emaildialog .s7dialoginputlabel { 
    margin-right: 10px; 
    padding: 10px; 
    text-align: right; 
    width: 50px; 
}

Cada campo de entrada de formulario se ajusta al contenedor, que le permite aplicar un borde personalizado alrededor del campo de entrada. Se controla con el siguiente selector de clase CSS:

.s7videoviewer .s7emaildialog .s7dialoginputcontainer

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

borde

Borde alrededor del contenedor del campo de entrada.

relleno

Relleno interior.

NOTA

El contenedor de campo de entrada admite el selector de atributos state opcional. Se establece en verifyerror cuando el usuario comete un error en el formato de datos de entrada y falla la validación en línea. Este selector de atributos se puede utilizar para resaltar datos incorrectos introducidos por el usuario en el formulario.

La mayoría de los campos de entrada que se extienden desde la etiqueta de la izquierda hasta el borde derecho del cuerpo del cuadro de diálogo (que incluye el campo "de" y el campo "de mensaje") se controlan con:

.s7videoviewer .s7emaildialog .s7dialoginputwide

Propiedades CSS del campo ancho de entrada del cuadro de diálogo

width

Ancho del campo de entrada.

El campo de entrada "A" es más estrecho porque asigna espacio al botón "eliminar correo electrónico" de la derecha. Se controla con el siguiente selector de clase CSS:

.s7videoviewer .s7emaildialog .s7dialoginputshort

Propiedades CSS del campo corto de entrada del cuadro de diálogo

width

Ancho del campo de entrada.

Ejemplo: para configurar un formulario con un borde gris de un píxel con nueve píxeles de relleno alrededor de todos los campos de entrada; para tener el mismo borde en color rojo para los campos en los que se ha producido un error de validación, para tener 250 píxeles de ancho en el campo de entrada "To" y para el resto de los campos de entrada 300 píxeles de ancho:

.s7videoviewer .s7emaildialog .s7dialoginputcontainer { 
    border: 1px solid #CCCCCC; 
    padding: 9px; 
} 
.s7videoviewer .s7emaildialog .s7dialoginputcontainer[state="verifyerror"] { 
    border: 1px solid #FF0000; 
} 
.s7videoviewer .s7emaildialog .s7dialoginputshort { 
    width: 250px; 
} 
.s7videoviewer .s7emaildialog .s7dialoginputwide { 
    width: 300px; 
}

El campo de entrada de mensajes de correo electrónico también se controla con:

.s7videoviewer .s7emaildialog .s7dialogmessage

Esta clase le permite establecer propiedades específicas para el elemento subyacente TEXTAREA.

Propiedades CSS del mensaje del cuadro de diálogo

height

Altura del mensaje.

ajuste de palabras

Estilo de ajuste de palabras.

Ejemplo: para configurar un mensaje de correo electrónico con una altura de 50 píxeles y utilizar break-word ajuste de texto:

.s7videoviewer .s7emaildialog .s7dialogmessage { 
    height: 50px; 
    word-wrap: break-word; 
}

El botón "Añadir otra dirección de correo electrónico" permite al usuario agregar más de una dirección de correo electrónico. Se controla con el siguiente selector de clase CSS:

.s7videoviewer .s7emaildialog .s7dialogaddemailbutton

Propiedades CSS del cuadro de diálogo Agregar botón de dirección de correo electrónico

height

Altura del botón.

color

Color del texto del botón para cada estado.

background-image

Imagen de botón para cada estado.

background-position

Posición de la imagen del botón dentro del área del botón.

font-peso

Peso de fuente del botón.

font-size

Tamaño de fuente del botón.

font-family

Familia de fuentes de botón.

line-height

Altura del texto dentro del botón. Afecta a la alineación vertical.

text-align

Alineación de texto horizontal.

relleno

Relleno interior.

NOTA

Este botón admite el selector de atributos state, que puede utilizarse para aplicar diferentes apariencias a distintos estados de botones.

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

Ejemplo: para configurar el botón "Añadir otra dirección de correo electrónico" en 25 píxeles de alto, utilice una fuente en negrita de 12 puntos con alineación a la derecha y un color e imagen de texto diferente para cada estado:

.s7videoviewer .s7emaildialog .s7dialogaddemailbutton { 
 text-align:right; 
 font-size:12pt; 
 font-weight:bold; 
 background-position:left center; 
 line-height:25px; 
 padding-left:30px; 
 height:25px; 
} 
.s7videoviewer .s7emaildialog .s7dialogaddemailbutton[state='up'] { 
 color:#666666; 
 background-image:url(images/sdk/dlgaddplus_up.png); 
} 
.s7videoviewer .s7emaildialog .s7dialogaddemailbutton[state='down'] { 
 color:#000000; 
 background-image:url(images/sdk/dlgaddplus_over.png); 
} 
.s7videoviewer .s7emaildialog .s7dialogaddemailbutton[state='over'] { 
 color:#000000; 
 text-decoration:underline; 
 background-image:url(images/sdk/dlgaddplus_over.png); 
} 
.s7videoviewer .s7emaildialog .s7dialogaddemailbutton[state='disabled'] { 
 color:#666666; 
 background-image:url(images/sdk/dlgaddplus_up.png); 
}

El botón "Eliminar" permite al usuario eliminar direcciones adicionales del formulario de correo electrónico. Se controla con el siguiente selector de clase CSS:

.s7videoviewer .s7emaildialog .s7dialogremoveemailbutton

Propiedades CSS del cuadro de diálogo quitar botón de correo electrónico

width

Ancho del botón.

height

Altura del botón.

background-image

Imagen de botón para cada estado.

background-position

Colocar dentro de la ilustración sprite, si se utilizan sprites CSS.

Consulte Sprites CSS .

NOTA

Este botón admite el selector de atributos state, que puede utilizarse para aplicar diferentes apariencias a distintos estados de botones.

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

Ejemplo: para configurar un botón "Eliminar" para que sea de 25 x 25 píxeles y utilizar una imagen diferente para cada estado:

.s7videoviewer .s7emaildialog .s7dialogremoveemailbutton { 
 width:25px; 
 height:25px; 
} 
.s7videoviewer .s7emaildialog .s7dialogremoveemailbutton[state='up'] { 
 background-image:url(images/sdk/dlgremove_up.png); 
} 
.s7videoviewer .s7emaildialog .s7dialogremoveemailbutton[state='over'] { 
 background-image:url(images/sdk/dlgremove_over.png); 
} 
.s7videoviewer .s7emaildialog .s7dialogremoveemailbutton[state='down'] { 
 background-image:url(images/sdk/dlgremove_over.png); 
} 
.s7videoviewer .s7emaildialog .s7dialogremoveemailbutton[state='disabled'] { 
 background-image:url(images/sdk/dlgremove_up.png); 
}

El contenido que se comparte se muestra en la parte inferior del cuerpo del cuadro de diálogo e incluye una miniatura, un título, una dirección URL de origen y una descripción. Se envuelve en contenedor controlado con:

.s7videoviewer .s7emaildialog .s7dialogbody .s7dialogcontent

Propiedades CSS del contenido del cuadro de diálogo

borde

Borde del contenedor.

relleno

Relleno interior.

Ejemplo: para configurar un contenedor inferior con un borde punteado de un píxel y sin relleno:

.s7videoviewer .s7emaildialog .s7dialogbody .s7dialogcontent { 
    border: 1px dotted #A0A0A0; 
    padding: 0; 
}

La imagen en miniatura se controla con el siguiente selector de clase CSS:

.s7videoviewer .s7emaildialog .s7dialogthumbnail

La propiedad background-image se establece mediante la lógica del componente.

Propiedades CSS de la imagen en miniatura del cuadro de diálogo

width

Ancho de la miniatura.

height

Altura de la miniatura.

vertical-align

Miniatura de alineación vertical.

relleno

Relleno interior.

Ejemplo: para configurar una miniatura de 90 x 60 píxeles y la alineación superior con diez píxeles de relleno:

.s7videoviewer .s7emaildialog .s7dialogthumbnail { 
    height: 60px; 
    padding: 10px; 
    vertical-align: top; 
    width: 90px; 
}

El título del contenido, el origen y la descripción se agrupan en un panel a la derecha de la miniatura de contenido. Se controla con el siguiente selector de clase CSS:

.s7videoviewer .s7emaildialog .s7dialoginfopanel

Propiedades CSS del panel de información del cuadro de diálogo

width

Ancho del panel.

Ejemplo: para configurar un panel de información de contenido con una anchura de 300 píxeles:

.s7videoviewer .s7emaildialog .s7dialoginfopanel { 
    width: 300px; 
}

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

.s7videoviewer .s7emaildialog .s7dialogtitle

Propiedades CSS del título del cuadro de diálogo

margin

Margen exterior.

font-peso

Peso de fuentes.

font-size

Tamaño de fuente.

font-family

Familia de fuentes.

Ejemplo: para configurar un título de contenido para usar fuente en negrita y tener un margen de diez píxeles:

.s7videoviewer .s7emaildialog .s7dialogtitle { 
    font-weight: bold; 
    margin: 10px; 
}

El origen de contenido se controla con el siguiente selector de clase CSS:

.s7videoviewer .s7emaildialog .s7dialogorigin

Propiedades CSS del origen de contenido del cuadro de diálogo

margin

Margen exterior.

font-peso

Peso de fuentes.

font-size

Tamaño de fuente.

font-family

Familia de fuentes.

Ejemplo: para configurar el origen de contenido para que tenga un margen de diez píxeles:

.s7videoviewer .s7emaildialog .s7dialogorigin { 
    margin: 10px; 
}

La descripción del contenido se controla con el siguiente selector de clase CSS:

.s7videoviewer .s7emaildialog .s7dialogdescription

Propiedades CSS de la descripción del contenido del cuadro de diálogo

margin

Margen exterior.

font-peso

Peso de fuentes.

font-size

Tamaño de fuente.

font-family

Familia de fuentes.

Ejemplo: para configurar una descripción de contenido con un margen de diez píxeles y utilizar una fuente de nueve puntos:

.s7videoviewer .s7emaildialog .s7dialogdescription { 
    font-size: 9pt; 
    margin: 10px; 
}

Cuando un usuario introduce datos de entrada incorrectos y se produce un error en la validación en línea, o cuando el cuadro de diálogo necesita mostrar un error o un mensaje de confirmación cuando se envía el formulario, se muestra un mensaje en la parte superior del cuerpo del cuadro de diálogo. Se controla con el siguiente selector de clase CSS:

.s7videoviewer .s7emaildialog .s7dialogerrormessage

Propiedades CSS del mensaje de error del cuadro de diálogo

background-image

Icono de error. El valor predeterminado es un signo de exclamación.

background-position

Posición del icono de error dentro del área del mensaje.

color

Color del texto del mensaje.

font-peso

Peso de fuentes.

font-size

Tamaño de fuente.

font-family

Familia de fuentes.

line-height

Altura del texto dentro del mensaje. Afecta a la alineación vertical.

relleno

Relleno interior.

NOTA

Este mensaje admite el selector de atributos state con los siguientes valores posibles: verifyerror, senderror y sendsuccess. verifyerror se configura cuando se muestra un mensaje debido a un error de validación de entrada en línea; senderror se configura cuando un servicio de correo electrónico back-end informa de un error; sendsuccess se configura cuando el correo electrónico se envía correctamente. De este modo, es posible aplicar un estilo diferente al mensaje en función del estado del cuadro de diálogo.

El mensaje de error se puede localizar. Consulte Localización de los elementos de la interfaz de usuario para obtener más información.

Ejemplo: para configurar un mensaje para que utilice una fuente en negrita de diez puntos, tenga una altura de línea de 25 píxeles, un margen de 20 píxeles a la izquierda, utilice un icono de signo de exclamación, texto rojo en caso de error y sin icono y texto verde en caso de éxito:

.s7videoviewer .s7emaildialog .s7dialogerrormessage[state="verifyerror"] { 
    background-image: url("images/sdk/dlgerrimg.png"); 
    color: #FF0000; 
} 
.s7videoviewer .s7emaildialog .s7dialogerrormessage[state="senderror"] { 
    background-image: url("images/sdk/dlgerrimg.png"); 
    color: #FF0000; 
} 
.s7videoviewer .s7emaildialog .s7dialogerrormessage[state="sendsuccess"] { 
    background-image: none; 
    color: #00B200; 
} 
.s7videoviewer .s7emaildialog .s7dialogerrormessage { 
    background-position: left center; 
    font-size: 10pt; 
    font-weight: bold; 
    line-height: 25px; 
    padding-left: 20px; 
}

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

.s7videoviewer .s7emaildialog .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 para que tenga 44 píxeles de ancho:

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

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

.s7videoviewer .s7emaildialog .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 de la barra de desplazamiento vertical 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 con una anchura de 28 píxeles, un margen de ocho píxeles desde la parte superior, derecha e inferior del panel de desplazamiento:

.s7videoviewer .s7emaildialog .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. El seguimiento se controla con el siguiente selector de clase CSS:

.s7videoviewer .s7emaildialog .s7scrollbar .s7scrolltrack

Propiedades CSS de la pista de desplazamiento

width

Ancho de la pista.

background-color

Color de fondo de la pista.

Ejemplo: para configurar una pista de barra de desplazamiento con una anchura de 28 píxeles y un fondo gris:

.s7videoviewer .s7emaildialog .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 del pulgar no cambia dinámicamente según la cantidad de contenido. Puede configurar la altura de la miniatura y otros aspectos con el siguiente selector de clase CSS:

.s7videoviewer .s7emaildialog .s7scrollbar .s7scrollthumb

Propiedades CSS de la miniatura de la barra de desplazamiento

width

La anchura del pulgar.

height

La altura del pulgar.

padding-top

El margen vertical entre la parte superior de la pista.

relleno-inferior

El margen vertical entre la parte inferior de la pista.

background-image

Imagen que se muestra para un estado de miniatura determinado.

background-position

Colocar dentro de la ilustración sprite, si se utilizan sprites CSS.

Consulte Sprites CSS .

NOTA

Thumb admite el selector de atributos state, que se puede utilizar para aplicar diferentes apariencias a diferentes estados de pulgar: up, down, over y disabled.

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

Ejemplo: para configurar el pulgar de la barra de desplazamiento de 28 x 45 píxeles, tiene un margen de diez píxeles en la parte superior e inferior y tiene una ilustración diferente para cada estado:

.s7videoviewer .s7emaildialog .s7scrollbar .s7scrollthumb { 
    height: 45px; 
    padding-bottom: 10px; 
    padding-top: 10px; 
    width: 28px; 
} 
.s7videoviewer .s7emaildialog .s7scrollbar .s7scrollthumb[state="up"] { 
 background-image:url("images/sdk/scrollbar_thumb_up.png"); 
} 
.s7videoviewer .s7emaildialog .s7scrollbar .s7scrollthumb[state="down"] { 
 background-image:url("images/sdk/scrollbar_thumb_down.png"); 
} 
.s7videoviewer .s7emaildialog .s7scrollbar .s7scrollthumb[state="over"] { 
 background-image:url("images/sdk/scrollbar_thumb_over.png"); 
} 
.s7videoviewer .s7emaildialog .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 .s7emaildialog .s7scrollbar .s7scrollupbutton
.s7videoviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton  
  

Propiedades CSS de los botones de desplazamiento superior e inferior

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

Colocar dentro de la ilustración sprite, si se utilizan sprites CSS.

Consulte Sprites CSS .

NOTA

Estos botones admiten el selector de atributos state, que se puede utilizar para aplicar diferentes apariencias a diferentes estados de botón: up, down, over y disabled.

Ejemplo: para configurar botones de desplazamiento de 28 x 32 píxeles y con diferentes ilustraciones para cada estado:

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

En esta página

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free