Campioni principali main-swatches
I campioni principali sono costituiti da una riga di miniature con pulsanti di scorrimento opzionali sul lato sinistro e destro. I pulsanti di scorrimento sono visibili sul desktop solo se tutte le miniature non rientrano nella larghezza del contenitore. Sui dispositivi mobili o se le miniature possono rientrare nella larghezza del contenitore, i pulsanti di scorrimento non vengono visualizzati.
L’aspetto del contenitore campioni è controllato con il selettore di classe CSS:
.s7mixedmediaviewer .s7swatches
Proprietà CSS dei campioni
Esempio: per impostare campioni con altezza di 100 pixel.
.s7mixedmediviewer .s7swatches {
height: 100px;
}
La spaziatura tra le miniature dei campioni è controllata dal seguente selettore di classe CSS:
.s7mixedmediaviewer .s7swatches .s7thumbcell
Esempio
Per impostare la spaziatura su dieci pixel sia in verticale che in orizzontale.
.s7mixedmediaviewer .s7swatches .s7thumbcell {
margin: 5px;
}
L’aspetto della singola miniatura viene controllato con il seguente selettore di classe CSS:
.s7mixedmediaviewer .s7swatches .s7thumb
state, che può essere utilizzato per applicare skin diversi a stati di miniature diversi. In particolare, state="selected" corrisponde alla miniatura dell'immagine attualmente visualizzata nella visualizzazione principale, state="default" corrisponde al resto delle miniature e state="over" viene utilizzato al passaggio del mouse.Esempio: per impostare miniature di 56 x 56 pixel, con un bordo predefinito grigio chiaro e un bordo selezionato grigio scuro.
.s7mixedmediaviewer .s7swatches .s7thumb {
width: 56px;
height: 56px;
}
.s7mixedmediaviewer .s7swatches .s7thumb[state="default"] {
border: 1px solid #dddddd;
}
.s7mixedviewer .s7swatches .s7thumb[state="selected"] {
border: 1px solid #666666;
}
Il tipo di risorsa viene visualizzato come icona sopra l’immagine miniatura ed è controllato dal seguente selettore di classe CSS:
.s7mixedmediaviewer .s7swatches .s7thumb .s7thumboverlay
La sovrapposizione supporta il selettore di attributi type con i seguenti valori possibili: image (per immagini singole), swatchset (per set di campioni), spinset (per set 360 gradi) e video (per video singoli o set di video adattivi).
Esempio: per impostare le sovrapposizioni di icone per set 360 gradi, set di campioni e video:
.s7mixedmediaviewer .s7swatches .s7thumb .s7thumboverlay[type="swatchset"] {
background-image: url(images/v2/ThumbOverlaySwatchSet.png);
}
.s7mixedmediaviewer .s7swatches .s7thumb .s7thumboverlay[type="spinset"] {
background-image: url(images/v2/ThumbOverlaySpinSet.png);
}
.s7mixedmediaviewer .s7swatches .s7thumb .s7thumboverlay[type="video"] {
background-image: url(images/v2/ThumbOverlayVideo.png);
}
L’aspetto dei pulsanti di scorrimento sinistro e destro è controllato dai seguenti selettori di classi CSS:
.s7mixedmediaviewer .s7swatches .s7scrollleftbutton
.s7mixedmediaviewer .s7swatches .s7scrollrightbutton
Impossibile posizionare i pulsanti di scorrimento utilizzando le proprietà CSS top, left, bottom e right. Al contrario, la logica di visualizzazione li posiziona automaticamente.
Posizionate all'interno dello sprite del disegno, se vengono utilizzati gli sprite CSS.
Vedere sprite CSS.
state, che può essere utilizzato per applicare interfacce diverse a diversi stati di pulsante: up, down, over e disabled.Le descrizioni dei pulsanti possono essere localizzate. Per ulteriori informazioni, vedere Localizzazione degli elementi dell'interfaccia utente.
Esempio: per impostare pulsanti di scorrimento di 56 x 56 pixel con grafica diversa per ogni stato.
.s7mixedmediaviewer .s7swatches .s7scrollleftbutton {
background-size: auto;
width: 56px;
height: 56px;
}
.s7mixedmediaviewer .s7swatches .s7scrollleftbutton[state="up"]{
background-image:url(images/v2/ScrollLeftButton_up.png);
}
.s7mixedmediaviewer .s7swatches .s7scrollleftbutton[state="over"]{
background-image:url(images/v2/ScrollLeftButton_over.png);
}
.s7mixedmediaviewer .s7swatches .s7scrollleftbutton[state="down"]{
background-image:url(images/v2/ScrollLeftButton_down.png);
}
.s7mixedmediaviewer .s7swatches .s7scrollleftbutton[state="disabled"]{
background-image:url(images/v2/ScrollLeftButton_disabled.png);
}
.s7mixedmediaviewer .s7swatches .s7scrollrightbutton {
background-size: auto;
width: 56px;
height: 56px;
}
.s7mixedmediaviewer .s7swatches .s7scrollrightbutton[state="up"]{
background-image:url(images/v2/ScrollRightButton_up.png);
}
.s7mixedmediaviewer .s7swatches .s7scrollrightbutton[state="over"]{
background-image:url(images/v2/ScrollRightButton_over.png);
}
.s7mixedmediaviewer .s7swatches .s7scrollrightbutton[state="down"]{
background-image:url(images/v2/ScrollRightButton_down.png);
}
.s7mixedmediaviewer .s7swatches .s7scrollrightbutton[state="disabled"]{
background-image:url(images/v2/ScrollRightButton_disabled.png);
}