Condivisione collegamenti

Lo strumento di condivisione dei collegamenti è costituito da un pulsante aggiunto al pannello Condivisione social e dalla finestra di dialogo modale che viene visualizzata quando lo strumento viene attivato. La posizione del pulsante è completamente gestita dallo strumento di condivisione social network.

L'aspetto del pulsante di condivisione del collegamento è controllato con il seguente selettore di classe CSS:

.s7video360viewer .s7linkshare

Proprietà CSS dello strumento di condivisione dei collegamenti

È possibile rimuovere il pulsante dal pannello Condivisione social impostando la proprietà display:none CSS nella relativa classe CSS.

La descrizione comando del pulsante può essere localizzata. Consulta Localizzazione degli elementi dell'interfaccia utente.

Esempio : per impostare un pulsante di condivisione del collegamento che sia di 28 x 28 pixel e visualizzare un’immagine diversa per ciascuno dei quattro stati diversi del pulsante:

.s7video360viewer .s7linkshare { 
 width:28px; 
 height:28px; 
} 
.s7video360viewer .s7linkshare[state='up'] { 
background-image:url(images/v2/LinkShare_dark_up.png); 
} 
.s7video360viewer .s7linkshare[state='over'] { 
background-image:url(images/v2/LinkShare_dark_over.png); 
} 
.s7video360viewer .s7linkshare[state='down'] { 
background-image:url(images/v2/LinkShare_dark_down.png); 
} 
.s7video360viewer .s7linkshare[state='disabled'] { 
background-image:url(images/v2/LinkShare_dark_disabled.png); 
}

La sovrapposizione di sfondo che copre la pagina web quando la finestra di dialogo è attiva viene controllata con il seguente selettore di classe CSS:

.s7video360viewer .s7linkdialog .s7backoverlay

Proprietà CSS della sovrapposizione di sfondo

Esempio : per impostare una sovrapposizione di sfondo grigio con opacità del 70%:

.s7video360viewer .s7linkdialog .s7backoverlay { 
 opacity:0.7; 
 background-color:#222222; 
}

Per impostazione predefinita, la finestra di dialogo modale viene visualizzata centrata sullo schermo sui sistemi desktop e occupa l’intera area della pagina web sui dispositivi touch. In tutti i casi, il posizionamento e il dimensionamento della finestra di dialogo vengono gestiti dal componente. La finestra di dialogo viene controllata con il seguente selettore di classe CSS:

.s7video360viewer .s7linkdialog .s7dialog

Proprietà CSS della finestra di dialogo

Esempio : per impostare la finestra di dialogo in modo da utilizzare l’intera finestra del browser e avere uno sfondo bianco sui dispositivi touch:

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

L’intestazione della finestra di dialogo è costituita da un’icona, un testo del titolo e un pulsante Chiudi. Il contenitore di intestazione è controllato con il seguente selettore di classe CSS:

.s7video360viewer .s7linkdialog .s7dialogheader

Proprietà CSS dell’intestazione della finestra di dialogo

L’icona e il testo del titolo vengono racchiusi in un contenitore aggiuntivo controllato con il seguente selettore di classe CSS:

.s7video360viewer .s7linkdialog .s7dialogheader .s7dialogline

Proprietà CSS della riga di dialogo

L’icona Intestazione è controllata dal seguente selettore di classe CSS

.s7video360viewer .s7linkdialog .s7dialogheadericon

Proprietà CSS dell’icona di intestazione della finestra di dialogo

Il titolo dell’intestazione è controllato con il seguente selettore di classe CSS:

.s7video360viewer .s7linkdialog .s7dialogheadertext

Proprietà CSS del testo dell’intestazione della finestra di dialogo

Il pulsante Chiudi è controllato con il seguente selettore di classe CSS:

.s7video360viewer .s7linkdialog .s7closebutton

Proprietà CSS del pulsante di chiusura

È possibile localizzare la descrizione del pulsante Chiudi e il titolo della finestra di dialogo. Consulta Localizzazione degli elementi dell'interfaccia utente.

Esempio : per impostare un’intestazione della finestra di dialogo con spaziatura, icona 22 x 12 pixel e titolo in grassetto a 16 punti. Infine, un pulsante Chiudi da 28 x 28 pixel posizionato a due pixel dalla parte superiore e a due pixel dalla parte destra del contenitore della finestra di dialogo:

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

Il piè di pagina della finestra di dialogo è costituito da un pulsante Annulla . Il contenitore piè di pagina è controllato con il seguente selettore di classe CSS:

.s7video360viewer .s7linkdialog .s7dialogfooter

Proprietà CSS del piè di pagina della finestra di dialogo

Il piè di pagina dispone di un contenitore interno che mantiene il pulsante. È controllato con il seguente selettore di classe CSS:

.s7video360viewer .s7linkdialog .s7dialogbuttoncontainer

Proprietà CSS del contenitore pulsanti della finestra di dialogo

Il pulsante Seleziona tutto è controllato con il seguente selettore di classe CSS:

.s7video360viewer .s7linkdialog .s7dialogactionbutton

Il pulsante è disponibile solo sui sistemi desktop.

Proprietà CSS del pulsante Seleziona tutto

Il pulsante Annulla è controllato con il seguente selettore di classe CSS:

.s7video360viewer .s7linkdialog .s7dialogcancelbutton

Proprietà CSS del pulsante Annulla della finestra di dialogo

Inoltre, entrambi i pulsanti condividono una classe CSS comune che può contenere impostazioni CSS uguali per altri pulsanti della finestra di dialogo:

.s7video360viewer .s7linkdialog .s7dialogfooter .s7button

Proprietà CSS del pulsante

Le descrizioni dei pulsanti possono essere localizzate. Consulta Localizzazione degli elementi dell'interfaccia utente.

Esempio : per impostare un piè di pagina di una finestra di dialogo con un pulsante Annulla 64 x 34, con colori di testo e di sfondo diversi per ogni stato del pulsante:

.s7video360viewer .s7linkdialog .s7dialogfooter { 
    border-top: 1px solid #909090; 
} 
.s7video360viewer .s7linkdialog .s7dialogbuttoncontainer { 
    padding-bottom: 6px; 
    padding-top: 10px; 
} 
.s7video360viewer .s7linkdialog .s7dialogfooter .s7button { 
    box-shadow: 1px 1px 1px #999999; 
    color: #FFFFFF; 
    font-size: 9pt; 
    font-weight: bold; 
    line-height: 34px; 
    margin-right: 10px; 
} 
.s7video360viewer .s7linkdialog .s7dialogcancelbutton { 
 width:64px; 
 height:34px; 
} 
.s7video360viewer .s7linkdialog .s7dialogcancelbutton[state='up'] { 
 background-color:#666666; 
 color:#dddddd; 
} 
.s7video360viewer .s7linkdialog .s7dialogcancelbutton[state='down'] { 
 background-color:#555555; 
 color:#ffffff; 
} 
.s7video360viewer .s7linkdialog .s7dialogcancelbutton[state='over'] { 
 background-color:#555555; 
 color:#ffffff; 
} 
.s7video360viewer .s7linkdialog .s7dialogcancelbutton[state='disabled'] { 
 background-color:#b2b2b2; 
 color:#dddddd; 
} 
.s7video360viewer .s7linkdialog .s7dialogactionbutton { 
 width:82px; 
 height:34px; 
} 
.s7video360viewer .s7linkdialog .s7dialogactionbutton[state='up'] { 
 background-color:#333333; 
 color:#dddddd; 
} 
.s7video360viewer .s7linkdialog .s7dialogactionbutton[state='down'] { 
 background-color:#222222; 
 color:#cccccc; 
} 
.s7video360viewer .s7linkdialog .s7dialogactionbutton[state='over'] { 
 background-color:#222222; 
 color:#cccccc; 
} 
.s7video360viewer .s7linkdialog .s7dialogactionbutton[state='disabled'] { 
 background-color:#b2b2b2; 
 color:#dddddd; 
}

L’area della finestra di dialogo principale (tra l’intestazione e il piè di pagina) contiene il contenuto della finestra di dialogo. In tutti i casi, il componente gestisce la larghezza dell’area, non è possibile impostarla in CSS. L’area di dialogo principale è controllata dal seguente selettore di classe CSS:

.s7video360viewer .s7linkdialog .s7dialogviewarea

Proprietà CSS dell’area di visualizzazione della finestra di dialogo

Esempio : per impostare un'area della finestra di dialogo principale su un'altezza di 300 pixel, avere un margine di 10 pixel e utilizzare uno sfondo bianco:

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

Tutto il contenuto del modulo, ad esempio etichette e campi di input, risiede all’interno di un contenitore controllato con il seguente selettore di classe CSS:

.s7video360viewer .s7linkdialog .s7dialogbody

Proprietà CSS del corpo della finestra di dialogo

Esempio : per impostare il contenuto del modulo con una spaziatura di dieci pixel:

.s7interactivevideoviewer .s7linkdialog .s7dialogbody { 
    padding: 10px; 
}

Tutte le etichette statiche nel modulo della finestra di dialogo vengono controllate con

.s7video360viewer .s7linkdialog .s7dialoglabel

Questa classe non è adatta per controllare la dimensione o la posizione dell'etichetta perché è possibile applicarla a testi in varie posizioni dell'interfaccia utente del modulo.

Proprietà CSS dell’etichetta della finestra di dialogo.

Le etichette della finestra di dialogo possono essere localizzate. Consulta Localizzazione degli elementi dell'interfaccia utente.

Esempio : per impostare tutte le etichette in modo che siano grigie, in grassetto con un font di nove pixel:

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

La dimensione della copia di testo visualizzata sopra il collegamento è controllata dal seguente selettore di classe CSS:

.s7video360viewer .s7linkdialog .s7dialoginputwide

Proprietà CSS del campo di input a livello di finestra di dialogo

Esempio : per impostare una copia di testo con una larghezza di 430 pixel e una spaziatura di 10 pixel nella parte inferiore:

.s7video360viewer .s7linkdialog .s7dialoginputwide { 
    padding-bottom: 10px; 
    width: 430px; 
}

Il collegamento di condivisione viene racchiuso in un contenitore e controllato con il seguente selettore di classe CSS:

.s7video360viewer .s7linkdialog .s7dialoginputcontainer

Proprietà CSS del contenitore di input della finestra di dialogo

Esempio : per impostare un bordo grigio di un pixel intorno al testo del codice da incorporare e avere nove pixel di spaziatura:

.s7video360viewer .s7linkdialog .s7dialoginputcontainer { 
    border: 1px solid #CCCCCC; 
    padding: 9px; 
}

Il collegamento di condivisione stesso è controllato con il seguente selettore di classe CSS:

.s7video360viewer .s7linkdialog .s7dialoglink

Proprietà CSS del collegamento di condivisione finestra di dialogo

Esempio : per impostare il collegamento di condivisione su una larghezza di 450 pixel:

.s7video360viewer .s7linkdialog .s7dialoglink { 
    width: 450px; 
}