La herramienta Uso compartido de correo electrónico consiste en un botón agregado al panel Uso compartido en Social 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 de uso compartido de Social .
El aspecto del botón de compartir correo electrónico se controla con el siguiente selector de clase CSS:
.s7videoviewer .s7emailshare
Propiedades CSS de la herramienta de uso compartido de correo electrónico
width |
Anchura del botón. |
height |
Altura del botón. |
imagen de fondo |
Imagen que se muestra para un estado de botón determinado. |
posición de fondo |
Sitúe dentro de la ilustración sprite, si se utilizan sprites CSS. Consulte Sprites CSS . |
Este botón admite la variable state
selector de atributos, que se puede utilizar para aplicar diferentes aspectos a distintos estados de botones.
Es posible quitar el botón del panel Compartir en Social configurando display:none
Propiedad CSS en su clase CSS.
La información 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
opacidad |
Opacidad de la 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 de los sistemas de escritorio y toma todo el área de la página web en 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 tome toda la ventana del explorador); |
background-color |
Color de fondo del cuadro de diálogo; |
width |
Debe estar desconfigurado o estar configurado al 100 %, en cuyo caso el cuadro de diálogo toma toda la ventana del navegador (este modo se prefiere en los dispositivos táctiles); |
height |
Debe estar desconfigurado o estar configurado al 100%, en cuyo caso el cuadro de diálogo toma toda la ventana del explorador (este modo se prefiere en los dispositivos táctiles). |
Ejemplo: Configurar el cuadro de diálogo para que utilice toda la ventana del navegador y tenga 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 de encabezado se controla con el siguiente selector de clase CSS
.s7videoviewer .s7emaildialog .s7dialogheader
Propiedades CSS del encabezado del cuadro de diálogo
relleno |
Margen 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 |
Margen 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. |
imagen de fondo |
Icono imagen. |
posición de fondo |
Sitúe 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-weight |
Grosor de fuente. |
font-size |
Altura de la fuente. |
font-family |
Familia de fuentes. |
relleno |
Margen 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 de encabezado. |
derecha |
Posición horizontal del botón en relación con el contenedor de encabezado. |
width |
Ancho del botón. |
height |
Altura del botón. |
relleno |
Margen interior del botón. |
imagen de fondo |
Imagen de botón para cada estado. |
posición de fondo |
Sitúe dentro de la ilustración sprite, si se utilizan sprites CSS. Consulte Sprites CSS . |
Este botón admite la variable state
selector de atributos, que se puede utilizar para aplicar diferentes aspectos a distintos estados de botones.
La información del objeto del botón Cerrar y el título 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 el encabezado del cuadro de diálogo con relleno, icono de 24 x 17 píxeles, título en negrita de 16 puntos y botón de cierre de 28 x 28 píxeles. Y finalmente, posiciónelo dos píxeles desde la parte superior y dos píxeles desde la parte 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 de botones de cuadro de diálogo
relleno |
Margen 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 de botón para cada estado. |
Este botón admite la variable state
selector de atributos, que se puede utilizar para aplicar diferentes aspectos 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 de botón para cada estado. |
Este botón admite la variable state
selector de atributos, que se puede utilizar para aplicar diferentes aspectos a distintos estados de botones.
Además, ambos botones comparten una clase CSS común que puede contener ajustes CSS que son los mismos para otros botones del cuadro de diálogo:
.s7videoviewer .s7emaildialog .s7dialogfooter .s7button
Propiedades CSS del botón
font-weight |
Grosor de la fuente del botón. |
font-size |
Tamaño de fuente del botón. |
font-family |
Familia de fuentes del botón. |
line-height |
Altura del texto dentro del botón. Afecta a la alineación vertical. |
box-Shadow |
Sombra. |
margin-right |
Margen del botón derecho. |
La información sobre herramientas de botones 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 64 x 34 y un botón de envío de correo electrónico 82 x 34, con el color del 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 el contenido del 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 principal del cuadro de diálogo. Solo debe especificarse cuando el cuadro de diálogo funciona en modo de escritorio. No es aplicable cuando el cuadro de diálogo tiene el tamaño necesario para ocupar toda la ventana del explorador. |
background-color |
Color de fondo del área del cuadro de diálogo principal. |
margin |
Margen exterior. |
El área del cuadro de diálogo principal es compatible con el state
selector de atributos. Está configurada en sendsuccess
cuando se envía el formulario por 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 etiquetas y 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 |
Margen interior. |
Ejemplo: Configurar el contenido del formulario para que tenga un relleno de diez píxeles:
.s7videoviewer .s7emaildialog .s7dialogbody {
padding: 10px;
}
El formulario del 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 formulario único 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 |
Margen 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 del 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 porque 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-weight |
Grosor de fuente de la etiqueta. |
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. |
margen |
Margen de etiqueta estático. |
relleno |
Margen de etiqueta estático. |
Ejemplo: para configurar las etiquetas de campo de entrada para que tengan una anchura de 50 píxeles, alineación a la derecha, tengan 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 del formulario está dentro del contenedor, lo que 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 de campos de entrada. |
relleno |
Margen interior. |
El contenedor de campos de entrada es opcional state
selector de atributos. Está configurada en verifyerror
cuando el usuario comete un error en el formato de datos de entrada y la validación en línea falla. 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 "mensaje") se controlan con:
.s7videoviewer .s7emaildialog .s7dialoginputwide
Propiedades CSS del campo de entrada del cuadro de diálogo
width |
Ancho del campo de entrada. |
El campo de entrada "To" es más estrecho porque asigna espacio al botón "remove email" (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: Configurar un formulario para que tenga 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 en la validación, para tener un campo de entrada "To" de 250 píxeles de ancho y el resto de los campos de entrada de 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 permite establecer propiedades específicas para el subyacente TEXTAREA
elemento.
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 para que tenga una altura de 50 píxeles y utilice break-word
ajuste de palabras:
.s7videoviewer .s7emaildialog .s7dialogmessage {
height: 50px;
word-wrap: break-word;
}
El botón "Añadir otra dirección de correo electrónico" permite al usuario añadir más de una dirección en el formulario 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. |
imagen de fondo |
Imagen de botón para cada estado. |
posición de fondo |
Posición de la imagen del botón dentro del área del botón. |
font-weight |
Grosor de la fuente del botón. |
font-size |
Tamaño de fuente del botón. |
font-family |
Familia de fuentes del 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 |
Margen interior. |
Este botón admite la variable state
selector de atributos, que se puede utilizar para aplicar diferentes aspectos a distintos estados de botones.
La información 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" para que tenga 25 píxeles de altura, utilice una fuente en negrita de 12 puntos con alineación derecha y un color de texto e imagen diferentes 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. |
imagen de fondo |
Imagen de botón para cada estado. |
posición de fondo |
Sitúe dentro de la ilustración sprite, si se utilizan sprites CSS. Consulte Sprites CSS . |
Este botón admite la variable state
selector de atributos, que se puede utilizar para aplicar diferentes aspectos a distintos estados de botones.
La información 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 tenga 25 x 25 píxeles y utilice 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 está compartiendo se muestra en la parte inferior del cuerpo del cuadro de diálogo e incluye una miniatura, título, dirección URL de origen y descripción. Se envuelve en un contenedor controlado con:
.s7videoviewer .s7emaildialog .s7dialogbody .s7dialogcontent
Propiedades CSS del contenido del cuadro de diálogo
borde |
Borde del contenedor. |
relleno |
Margen interior. |
Ejemplo: para configurar un contenedor inferior con un borde punteado de un píxel y sin margen:
.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 variable background-image
se establece mediante la lógica del componente.
Propiedades CSS de la imagen en miniatura del cuadro de diálogo
width |
Anchura de las miniaturas. |
height |
Altura de la miniatura. |
alineación vertical |
Miniatura de alineación vertical. |
relleno |
Margen interior. |
Ejemplo: para configurar la miniatura para que sea de 90 x 60 píxeles y alineación superior con diez píxeles de relleno:
.s7videoviewer .s7emaildialog .s7dialogthumbnail {
height: 60px;
padding: 10px;
vertical-align: top;
width: 90px;
}
El título, el origen y la descripción del contenido se agrupan en un panel a la derecha de la miniatura del 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 |
Anchura 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 de contenido se controla con el siguiente selector de clase CSS:
.s7videoviewer .s7emaildialog .s7dialogtitle
Propiedades CSS del título del cuadro de diálogo
margen |
Margen exterior. |
font-weight |
Grosor de fuente. |
font-size |
Tamaño de fuente. |
font-family |
Familia de fuentes. |
Ejemplo: para configurar un título de contenido para utilizar fuentes en negrita y tener un margen de diez píxeles:
.s7videoviewer .s7emaildialog .s7dialogtitle {
font-weight: bold;
margin: 10px;
}
El origen del contenido se controla con el siguiente selector de clase CSS:
.s7videoviewer .s7emaildialog .s7dialogorigin
Propiedades CSS del origen de contenido del cuadro de diálogo
margen |
Margen exterior. |
font-weight |
Grosor de fuente. |
font-size |
Tamaño de fuente. |
font-family |
Familia de fuentes. |
Ejemplo: para configurar el origen del contenido con 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
margen |
Margen exterior. |
font-weight |
Grosor de fuente. |
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 la validación en línea falla, o cuando el cuadro de diálogo debe representar 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
imagen de fondo |
Icono de error. El valor predeterminado es un signo de exclamación. |
posición de fondo |
Posición del icono de error dentro del área del mensaje. |
color |
Color del texto del mensaje. |
font-weight |
Grosor de fuente. |
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 |
Margen interior. |
Este mensaje es compatible con la variable state
selector de atributos con los siguientes valores posibles: verifyerror
, senderror
y sendsuccess
. Selector de atributos verifyerror
se establece cuando se muestra un mensaje debido a un error de validación de entrada en línea; senderror
se establece cuando un servicio de correo electrónico back-end informa de un error; sendsuccess
se establece cuando el correo electrónico se envía correctamente. De este modo, es posible aplicar un estilo diferente al mensaje según el 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: Configurar un mensaje para utilizar una fuente en negrita de diez puntos. Además, debe tener una altura de línea de 25 píxeles, un relleno de 20 píxeles a la izquierda, utilizar un icono de signo de exclamación, texto rojo si hay un error y ningún icono y texto verde si hay é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 representa 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 con una anchura de 44 píxeles:
.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 vertical de la barra de desplazamiento desde la parte superior del panel de desplazamiento. |
parte inferior |
Desplazamiento vertical de la barra de desplazamiento desde la parte inferior del panel de desplazamiento. |
derecha |
Desplazamiento horizontal de la barra de desplazamiento desde el borde derecho del panel de desplazamiento. |
Ejemplo: para configurar una barra de desplazamiento de 28 píxeles de ancho, un margen de ocho píxeles desde la parte superior, derecha y inferior del panel de desplazamiento:
.s7videoviewer .s7emaildialog .s7scrollbar {
bottom: 8px;
right: 8px;
top: 8px;
width: 28px;
}
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 |
El color de fondo de la pista. |
Ejemplo: para configurar una pista de barra de desplazamiento de 28 píxeles de ancho y con un fondo gris:
.s7videoviewer .s7emaildialog .s7scrollbar .s7scrolltrack {
width:28px;
background-color: #B2B2B2;
}
El desplazamiento vertical 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 barra de desplazamiento
width |
La anchura del pulgar. |
height |
La altura del pulgar. |
relleno superior |
El margen vertical entre la parte superior de la pista. |
relleno inferior |
El margen vertical entre la parte inferior de la pista. |
imagen de fondo |
Imagen que se muestra para un estado de pulgar determinado. |
posición de fondo |
Sitúe dentro de la ilustración sprite, si se utilizan sprites CSS. Consulte Sprites CSS . |
La miniatura admite el state
selector de atributos, que se puede utilizar para aplicar diferentes aspectos a distintos estados de la miniatura: up
, down
, over
y disabled
.
La información sobre herramientas de botones se puede localizar. Consulte Localización de los elementos de la interfaz de usuario para obtener más información.
Ejemplo: para configurar el desplazamiento 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 distintas ilustraciones 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. |
imagen de fondo |
Imagen que se muestra para un estado de botón determinado. |
posición de fondo |
Sitúe dentro de la ilustración sprite, si se utilizan sprites CSS. Consulte Sprites CSS . |
Estos botones admiten la función state
selector de atributos, que se puede utilizar para aplicar diferentes aspectos a distintos estados de botones: up
, down
, over
y disabled
.
Ejemplo: para configurar botones de desplazamiento de 28 x 32 píxeles y que tengan distintas 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);
}