Färgrutor
Skapat för:
- Utvecklare
- Användare
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 .s7miniatyrcell . |
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. |
| kant | Miniatyrens kantlinje. |
NOTEstate 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.
NOTEstate 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);
}