Incorpora condivisione embed-share

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

L’aspetto del pulsante di incorporamento della condivisione è controllato dal seguente selettore di classe CSS:

.s7video360viewer .s7embedshare

Proprietà CSS dello strumento di condivisione da incorporare

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

La descrizione comando del pulsante può essere localizzata. Per ulteriori informazioni, vedere Localizzazione degli elementi dell'interfaccia utente.

Esempio - Per impostare un pulsante di condivisione da incorporare di 28 x 28 pixel e visualizzare un'immagine diversa per ciascuno dei quattro stati dei pulsanti:

.s7video360viewer .s7embedshare {
 width:28px;
 height:28px;
}
.s7video360viewer .s7embedshare[state='up'] {
background-image:url(images/v2/EmbedShare_dark_up.png);
}
.s7video360viewer .s7embedshare[state='over'] {
background-image:url(images/v2/EmbedShare_dark_over.png);
}
.s7video360viewer .s7embedshare[state='down'] {
background-image:url(images/v2/EmbedShare_dark_down.png);
}
.s7video360viewer .s7embedshare[state='disabled'] {
background-image:url(images/v2/EmbedShare_dark_disabled.png);
}

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

.s7video360viewer .s7embeddialog .s7backoverlay

Proprietà CSS della sovrapposizione in background

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

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

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

.s7video360viewer .s7embeddialog .s7dialog

Proprietà CSS della finestra di dialogo

Esempio - per impostare la finestra di dialogo in modo che utilizzi l'intera finestra del browser e che abbia uno sfondo bianco sui dispositivi touch:

.s7video360viewer .s7touchinput .s7embeddialog .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 di chiusura. Il contenitore di intestazione è controllato con

.s7video360viewer .s7embeddialog .s7dialogheader

Proprietà CSS dell'intestazione della finestra di dialogo

L’icona e il testo del titolo vengono racchiusi in un contenitore aggiuntivo controllato con quanto segue:

.s7video360viewer .s7embeddialog .s7dialogheader .s7dialogline

Proprietà CSS della riga di dialogo

L’icona dell’intestazione è controllata dal seguente selettore di classe CSS:

.s7video360viewer .s7embeddialog .s7dialogheadericon

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

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

.s7video360viewer .s7embeddialog .s7dialogheadertext

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

Il pulsante Chiudi è controllato dal seguente selettore di classe CSS:

.s7video360viewer .s7embeddialog .s7closebutton

Proprietà CSS del ​ del pulsante Chiudi

La descrizione comando del pulsante può essere localizzata. Per ulteriori informazioni, vedere Localizzazione degli elementi dell'interfaccia utente.

Esempio - Per impostare l'intestazione della finestra di dialogo con riempimento, icona 24 x 14 pixel e un titolo in grassetto a 16 punti. Infine, un pulsante Chiudi di 28 x 28 pixel, posizionato due pixel dalla parte superiore e due pixel dalla destra del contenitore della finestra di dialogo:

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

Il piè di pagina della finestra di dialogo è costituito dal pulsante Annulla. Il contenitore piè di pagina è controllato dal seguente selettore di classe CSS:

.s7video360viewer .s7embeddialog .s7dialogfooter

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

Il piè di pagina contiene un contenitore interno che mantiene il pulsante. Viene controllata con il seguente selettore di classe CSS:

.s7video360viewer .s7embeddialog .s7dialogbuttoncontainer

Proprietà CSS del contenitore del pulsante della finestra di dialogo

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

.s7video360viewer .s7embeddialog .s7dialogactionbutton

Il pulsante è disponibile solo sui sistemi desktop.

Proprietà CSS del pulsante Seleziona tutto

Il pulsante Annulla è controllato dal seguente selettore di classe CSS:

.s7video360viewer .s7embeddialog .s7dialogcancelbutton

Proprietà CSS del pulsante Annulla della finestra di dialogo

Inoltre, entrambi i pulsanti condividono la stessa classe CSS che può contenere impostazioni CSS identiche a quelle degli altri pulsanti della finestra di dialogo:

.s7video360viewer .s7embeddialog .s7dialogfooter .s7button

Proprietà CSS del pulsante

La descrizione comando del pulsante può essere localizzata. Per ulteriori informazioni, vedere Localizzazione degli elementi dell'interfaccia utente.

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

.s7video360viewer .s7embeddialog .s7dialogfooter {
    border-top: 1px solid #909090;
}
.s7video360viewer .s7embeddialog .s7dialogbuttoncontainer {
    padding-bottom: 6px;
    padding-top: 10px;
}
.s7video360viewer .s7embeddialog .s7dialogfooter .s7button {
    box-shadow: 1px 1px 1px #999999;
    color: #FFFFFF;
    font-size: 9pt;
    font-weight: bold;
    line-height: 34px;
    margin-right: 10px;
}
.s7video360viewer .s7embeddialog .s7dialogcancelbutton {
 width:64px;
 height:34px;
}
.s7video360viewer .s7embeddialog .s7dialogcancelbutton[state='up'] {
 background-color:#666666;
 color:#dddddd;
}
.s7video360viewer .s7embeddialog .s7dialogcancelbutton[state='down'] {
 background-color:#555555;
 color:#ffffff;
}
.s7video360viewer .s7embeddialog .s7dialogcancelbutton[state='over'] {
 background-color:#555555;
 color:#ffffff;
}
.s7video360viewer .s7embeddialog .s7dialogcancelbutton[state='disabled'] {
 background-color:#b2b2b2;
 color:#dddddd;
}
.s7video360viewer .s7embeddialog .s7dialogactionbutton {
 width:82px;
 height:34px;
}
.s7video360viewer .s7embeddialog .s7dialogactionbutton[state='up'] {
 background-color:#333333;
 color:#dddddd;
}
.s7video360viewer .s7embeddialog .s7dialogactionbutton[state='down'] {
 background-color:#222222;
 color:#cccccc;
}
.s7video360viewer .s7embeddialog .s7dialogactionbutton[state='over'] {
 background-color:#222222;
 color:#cccccc;
}
.s7video360viewer .s7embeddialog .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 con scorrimento e il pannello di scorrimento a destra. In tutti i casi in cui il componente gestisce la larghezza di quest’area, non è possibile impostarla in CSS. L’area della finestra di dialogo principale è controllata dal seguente selettore di classe CSS:

.s7video360viewer .s7embeddialog .s7dialogviewarea

Proprietà CSS della finestra di dialogo ​ area di visualizzazione

Esempio - per impostare un'area della finestra di dialogo principale di 300 pixel, disporre di un margine di dieci pixel e utilizzare uno sfondo bianco:

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

Tutto il contenuto del modulo (come etichette e campi di input) si trova all’interno di un contenitore controllato con il seguente selettore di classe CSS:

.s7video360viewer .s7embeddialog .s7dialogbody

Se l’altezza del contenitore risulta maggiore dell’area della finestra di dialogo principale, il componente abilita automaticamente uno scorrimento verticale.

Proprietà CSS del ​ del corpo della finestra di dialogo

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

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

Tutte le etichette statiche nel modulo della finestra di dialogo sono controllate da

.s7video360viewer .s7embeddialog .s7dialoglabel

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

Proprietà CSS dell'etichetta della finestra di dialogo. ​

Le etichette delle finestre di dialogo possono essere localizzate. Per ulteriori informazioni, vedere Localizzazione degli elementi dell'interfaccia utente.

Esempio - per impostare tutte le etichette come grigie, in grassetto con un carattere di nove pixel:

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

La dimensione della copia di testo visualizzata sopra il codice di incorporamento è controllata con il seguente selettore di classe CSS:

.s7video360viewer .s7embeddialog .s7dialoginputwide

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

Esempio - per impostare una copia di testo larga 430 pixel e con una spaziatura inferiore di dieci pixel:

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

Il codice di incorporamento viene racchiuso nel contenitore e controllato con il seguente selettore di classe CSS:

.s7video360viewer .s7embeddialog .s7dialoginputcontainer

Proprietà CSS del contenitore di input della finestra di dialogo

Esempio - per impostare un bordo grigio di un pixel attorno al testo del codice da incorporare, impostalo con una larghezza di 430 pixel e una spaziatura di dieci pixel:

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

Il testo effettivo del codice di incorporamento è controllato con il seguente selettore di classe CSS:

.s7video360viewer .s7embeddialog .s7dialoginputcontainer

Proprietà CSS del contenitore di input della finestra di dialogo

Esempio - Per configurare il codice da incorporare per l'utilizzo del ritorno a capo automatico break-word:

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

L’etichetta della dimensione dell’incorporamento e il menu a discesa si trovano nella parte inferiore della finestra di dialogo e vengono inseriti in un contenitore controllato con il seguente selettore di classe CSS:

.s7video360viewer .s7embeddialog .s7dialogembedsizepanel

Proprietà CSS del pannello dimensioni incorporamento della finestra di dialogo

Esempio - per impostare un pannello di dimensioni da incorporare con dieci pixel di spaziatura interna:

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

Le dimensioni e l’allineamento dell’etichetta delle dimensioni di incorporamento sono controllati con il seguente selettore di classe CSS:

.s7video360viewer .s7embeddialog .s7dialogembedsizepanel

Proprietà CSS del pannello dimensioni incorporamento della finestra di dialogo

Esempio - per impostare l'etichetta della dimensione di incorporamento in modo che sia allineata in alto e larga 80 pixel:

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

La larghezza della casella combinata Dimensione incorporamento è controllata dal seguente selettore di classe CSS:

.s7video360viewer .s7embeddialog .s7combobox

Proprietà CSS della casella combinata

Esempio - per impostare la casella combinata delle dimensioni di incorporamento su una larghezza di 300 pixel quando si visualizza un elemento predefinito e su una larghezza di 110 pixel quando si visualizza una dimensione personalizzata:

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

L’altezza del testo della casella combinata è definita da un elemento interno speciale ed è controllata dal seguente selettore di classe CSS:

.s7video360viewer .s7embeddialog .s7combobox .s7comboboxtext

Proprietà CSS del testo della casella combinata

Esempio - per impostare su 40 pixel l'altezza del testo della casella combinata delle dimensioni di incorporamento:

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

La casella combinata ha un pulsante "a discesa" a destra ed è controllata dal seguente selettore di classe CSS:

.s7video360viewer .s7embeddialog .s7combobox .s7comboboxbutton

Proprietà CSS del pulsante Casella combinata

Esempio - per impostare un pulsante a discesa su 28 x 28 pixel e disporre di un'immagine separata per ogni stato:

.s7video360viewer .s7embeddialog .s7combobox .s7comboboxbutton {
 width:28px;
 height:28px;
}
.s7video360viewer .s7embeddialog .s7combobox .s7comboboxbutton[state='up'] {
 background-image:url(images/sdk/cboxbtndn_up.png);
}
.s7video360viewer .s7embeddialog .s7combobox .s7comboboxbutton[state='over'] {
 background-image:url(images/sdk/cboxbtndn_over.png);
}
.s7video360viewer .s7embeddialog .s7combobox .s7comboboxbutton[state='down'] {
 background-image:url(images/sdk/cboxbtndn_over.png);
}
.s7video360viewer .s7embeddialog .s7combobox .s7comboboxbutton[state='disabled'] {
 background-image:url(images/sdk/cboxbtndn_up.png);
}

Il pannello con l’elenco delle dimensioni di incorporamento visualizzate all’apertura della casella combinata è controllato dal seguente selettore di classe CSS:

.s7video360viewer .s7embeddialog .s7comboboxdropdown

Le dimensioni e la posizione del pannello sono controllate dal componente. Non è possibile modificarlo tramite CSS.

Proprietà CSS del menu a discesa della casella combinata

Esempio - per impostare il pannello della casella combinata su un bordo grigio di un pixel:

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

Un singolo elemento in un pannello a discesa controllato con il seguente selettore di classe CSS:

.s7video360viewer .s7embeddialog .s7dropdownitemanchor

Proprietà CSS dell'ancoraggio elemento a discesa

Esempio - per impostare l'elemento del pannello della casella combinata su uno sfondo bianco:

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

Un segno di spunta visualizzato a sinistra dell’elemento selezionato all’interno del pannello della casella combinata controllato con il seguente selettore di classe CSS:

.s7video360viewer .s7embeddialog .s7checkmark

Proprietà CSS della casella segno di spunta

Esempio - per impostare l'icona del segno di spunta su 25 x 25 pixel:

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

Quando nella casella combinata Dimensione incorporamento è selezionata l'opzione "Dimensione personalizzata", nella finestra di dialogo vengono visualizzati due campi di input aggiuntivi a destra per consentire all'utente di immettere una dimensione di incorporamento personalizzata. Tali campi sono racchiusi in un contenitore controllato con il seguente selettore di classe CSS:

.s7video360viewer .s7embeddialog .s7dialogcustomsizepanel

Proprietà CSS del pannello dimensioni personalizzate della finestra di dialogo

Esempio - per impostare la dimensione personalizzata del pannello dei campi di input su 20 pixel a destra della casella combinata:

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

Ogni campo di input delle dimensioni personalizzate viene racchiuso in un contenitore che esegue il rendering di un bordo e imposta il margine tra i campi. Viene controllata con il seguente selettore di classe CSS:

.s7video360viewer .s7embeddialog .s7dialogcustomsize

Proprietà CSS della finestra di dialogo dimensione personalizzata

Esempio - Per impostare le dimensioni personalizzate dei campi di input in modo che abbiano un bordo, un margine, una spaziatura interna di un pixel e una larghezza di 70 pixel:

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

Se è necessario lo scorrimento verticale, la barra di scorrimento viene rappresentata nel pannello accanto al bordo destro della finestra di dialogo, che è controllata dal seguente selettore di classe CSS:

.s7video360viewer .s7embeddialog .s7dialogscrollpanel

Proprietà CSS del pannello di scorrimento della finestra di dialogo

Esempio - per impostare la larghezza di un pannello di scorrimento su 44 pixel

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

L’aspetto dell’area della barra di scorrimento è controllato dal seguente selettore di classe CSS:

.s7video360viewer .s7embeddialog .s7scrollbar

Proprietà CSS della barra di scorrimento

Esempio - per impostare una barra di scorrimento larga 28 pixel con un margine di otto pixel dall'alto, dal basso e dal basso del pannello di scorrimento:

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

La traccia della barra di scorrimento è l'area compresa tra i pulsanti di scorrimento superiore e inferiore. Il componente imposta automaticamente la posizione e l'altezza della traccia. Il brano è controllato con il seguente selettore di classe CSS

.s7video360viewer .s7embeddialog .s7scrollbar .s7scrolltrack

Proprietà CSS del brano della barra di scorrimento

Esempio - per impostare una traccia della barra di scorrimento larga 28 pixel con sfondo grigio:

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

Il pollice della barra di scorrimento si sposta verticalmente all'interno dell'area della traccia di scorrimento. La sua posizione verticale è completamente controllata dalla logica del componente. Tuttavia, l’altezza del pollice non cambia in modo dinamico a seconda della quantità di contenuto. L’altezza del pollice e altri aspetti possono essere configurati con il seguente selettore di classe CSS:

.s7video360viewer .s7embeddialog .s7scrollbar .s7scrollthumb

Proprietà CSS della barra di scorrimento

Esempio - per impostare una barra di scorrimento di 28 x 45 pixel, con un margine di dieci pixel nella parte superiore e inferiore e un disegno diverso per ogni stato:

.s7video360viewer .s7embeddialog .s7scrollbar .s7scrollthumb {
    height: 45px;
    padding-bottom: 10px;
    padding-top: 10px;
    width: 28px;
}
.s7video360viewer .s7embeddialog .s7scrollbar .s7scrollthumb[state="up"] {
 background-image:url("images/sdk/scrollbar_thumb_up.png");
}
.s7video360viewer .s7embeddialog .s7scrollbar .s7scrollthumb[state="down"] {
 background-image:url("images/sdk/scrollbar_thumb_down.png");
}
.s7video360viewer .s7embeddialog .s7scrollbar .s7scrollthumb[state="over"] {
 background-image:url("images/sdk/scrollbar_thumb_over.png");
}
.s7video360viewer .s7embeddialog .s7scrollbar .s7scrollthumb[state="disabled"] {
 background-image:url("images/sdk/scrollbar_thumb_disabled.png");
}

L’aspetto dei pulsanti di scorrimento superiore e inferiore è controllato dai seguenti selettori di classi CSS:

.s7video360viewer .s7embeddialog .s7scrollbar .s7scrollupbutton

.s7video360viewer .s7embeddialog .s7scrollbar .s7scrolldownbutton

Impossibile posizionare i pulsanti di scorrimento utilizzando le proprietà CSS top, left, bottom e right. Al contrario, la logica di visualizzazione li posiziona automaticamente.

Proprietà CSS dei pulsanti di scorrimento superiore e inferiore

Le descrizioni dei pulsanti possono essere localizzate. Per ulteriori informazioni, vedere Localizzazione degli elementi dell'interfaccia utente.

Esempio - per impostare pulsanti di scorrimento di 28 x 32 pixel con grafica diversa per ogni stato:

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