Färgrutor color-swatches

Färgrutor består av en rad med miniatyrbilder med rullningsknappar till vänster och höger. Färgrutor visas bara på skrivbordet om alla miniatyrbilder inte får plats i behållarens bredd. På mobila enheter, eller om miniatyrbilder får plats i behållarbredden, visas inte rullningsknappar.

Utseendet på färgrutebehållaren styrs med CSS-klassväljaren:

.s7mixedmediaviewer .s7colorswatches .s7swatches

CSS-egenskaper för färgrutorna

width
Färgrutornas bredd.
height
Färgrutornas höjd.
nederkant
Den lodräta färgrutans förskjutning i förhållande till visningsprogrammets behållare.

Exempel - för att ställa in färgrutor med en höjd på 100 pixlar.

.s7mixedmediviewer .s7colorswatches .s7swatches {
 height: 100px;
}

Avståndet mellan färgrutans miniatyrbilder styrs med följande CSS-klassväljare:

.s7mixedmediaviewer .s7colorswatches .s7swatches .s7thumbcell

CSS-egenskap
Beskrivning
marginal
Storleken på den vågräta och lodräta marginalen runt varje miniatyrbild. Det faktiska mellanrummet för miniatyrbilder är lika med summan av vänster och höger marginaluppsättning för .s7thumbcell .

Exempel

Om du vill ange avstånd till tio pixlar både lodrätt och vågrätt.

.s7mixedmediaviewer .s7colorswatches .s7swatches .s7thumbcell {
 margin: 5px;
}

Utseendet på den enskilda miniatyrbilden styrs av följande CSS-klassväljare:

.s7mixedmediaviewer .s7colorswatches .s7swatches .s7thumb

CSS-egenskap
Beskrivning
width
Miniatyrbildens bredd.
height
Höjden på miniatyrbilden.
border
Miniatyrens kantlinje.
NOTE
Miniatyrbilden har stöd för state attributväljare, som kan användas för att tillämpa olika skal på olika miniatyrlägen. Särskilt gäller följande: state="selected" motsvarar miniatyrbilden för den bild som visas i huvudvyn, state="default" motsvarar resten av miniatyrbilderna, och state="over" används vid hovring av musen.

Exempel - Om du vill ställa in miniatyrbilder som är 56 x 56 pixlar har du en ljusgrå standardkant och en mörkgrå markerad kant.

.s7mixedmediaviewer .s7colorswatches .s7swatches .s7thumb {
 width: 56px;
 height: 56px;
}
.s7mixedmediaviewer .s7colorswatches .s7swatches .s7thumb[state="default"] {
 border: 1px solid #dddddd;
}
.s7mixedviewer .s7colorswatches .s7swatches .s7thumb[state="selected"] {
 border: 1px solid #666666;
}

Utseendet på vänster och höger rullningsknapp styrs av följande CSS-klassväljare:

.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollleftbutton

.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollrightbutton

Det går inte att placera rullningsknappar med CSS top, left, bottomoch right egenskaper. I stället placerar visningsprogramlogiken dem automatiskt.

CSS-egenskap
Beskrivning
width
Bredd på rullningsknappen.
height
Höjden på rullningsknappen.
background-image
Bilden som visas för ett visst knappläge.
background-position

Placera inuti en teckningssprite, om CSS-sprites används.

Se CSS-fragment.

NOTE
Den här knappen har stöd för state attributväljare, som kan användas för att tillämpa olika skal på olika knapplägen: up, down, overoch disabled.

Exempel - för att ställa in rullningsknappar som är 56 x 56 pixlar och har olika teckningar för varje läge.

.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollleftbutton {
 background-size: auto;
 width: 56px;
 height: 56px;
}
.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollleftbutton[state="up"]{
background-image:url(images/v2/ScrollLeftButton_up.png);
}
.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollleftbutton[state="over"]{
 background-image:url(images/v2/ScrollLeftButton_over.png);
}
.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollleftbutton[state="down"]{
 background-image:url(images/v2/ScrollLeftButton_down.png);
}
.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollleftbutton[state="disabled"]{
 background-image:url(images/v2/ScrollLeftButton_disabled.png);
}
.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollrightbutton {
 background-size: auto;
 width: 56px;
 height: 56px;
}
.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollrightbutton[state="up"]{
background-image:url(images/v2/ScrollRightButton_up.png);
}
.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollrightbutton[state="over"]{
 background-image:url(images/v2/ScrollRightButton_over.png);
}
.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollrightbutton[state="down"]{
 background-image:url(images/v2/ScrollRightButton_down.png);
}
.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollrightbutton[state="disabled"]{
 background-image:url(images/v2/ScrollRightButton_disabled.png);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8