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
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
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
state som kan användas för att tillämpa olika skal på olika miniatyrlägen. I synnerhet motsvarar state="selected" miniatyrbilden för den bild som visas i huvudvyn, state="default" motsvarar resten av miniatyrbilderna och state="over" används vid hovring med 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-egenskaperna top, left, bottom och right. I stället placerar visningsprogramlogiken dem automatiskt.
Placera inuti en teckningssprite, om CSS-sprites används.
Se CSS-fragment.
state som kan användas för att tillämpa olika skal på olika knapplägen: up, down, over och 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);
}