Interaktiva färgrutor interactive-swatches

Panelen för interaktiva färgrutor visas bredvid videoinnehållet om interaktiva data skickades till användaren i konfigurationen. Den består av en banderoll längst upp som återger text, till exempel"Klicka för att visa", en kolumn med en eller flera interaktiva färgrutor och två rullningsknappar (endast tillgängligt på datorer).

På datorer och pekenheter återges interaktiva färgrutor lodrätt till höger om videoinnehållet i liggande orientering. På touchenheter med stående orientering visas de längst ned i visningsprogrammet som en vågrät rad med färgrutor.

Följande CSS-klassväljare styr platsen och orienteringen för den interaktiva färgrutepanelen:

.s7interactivevideoviewer .s7interactiveswatches

CSS-egenskaper för interaktiva färgrutor css-properties-of-the-interactive-swatches

Körningsplatsen och orienteringen för den interaktiva färgrutepanelen definieras av en kombination av ovanstående CSS-egenskaper enligt följande:

Det går att använda CSS-markörer med den här stilen för att få en adaptiv placering av den interaktiva färgrutepanelen.

Exempel example

Om du vill konfigurera en interaktiv färgrutepanel så att den återges vågrätt längst ned i visningsprogrammet på enheter med pekskärm i liggande orientering. Och för att visa det lodrätt till höger om videoinnehållet i alla andra fall:

.s7interactivevideoviewer.s7touchinput.s7device_landscape .s7interactiveswatches,
.s7interactivevideoviewer.s7mouseinput .s7interactiveswatches {
 width:120px;
 height:auto;
 right:0px;
 top:0px;
 left:auto;
 bottom:auto;
}
.s7interactivevideoviewer.s7touchinput.s7device_portrait .s7interactiveswatches {
 width:auto;
 height:136px;
 right:auto;
 top:auto;
 left:0px;
 bottom:0px;
}

Banderollens storlek och position hanteras av den interaktiva färgrutekomponenten baserat på andra format som används med CSS och kan inte anges explicit.

Följande CSS-klassväljare styr utseendet på banderollpanelen:

.s7interactivevideoviewer .s7interactiveswatches .s7banner

CSS-egenskaper för banderollpanelen css-properties-of-the-banner-panel

Banderollverktygstipset kan lokaliseras. Mer information finns i Lokalisering av användargränssnittselement.

Exempel section-e8caea0a303c425a8a637c2a47c06355

Så här ställer du in en banderoll med mörkgrå bakgrund, en ljusgrå kant på två pixlar och den vita texten centrerad vågrätt:

.s7interactivevideoviewer .s7interactiveswatches .s7banner {
    background-color: #222222;
    border-bottom: 2px solid #444444;
    color: #ffffff;
    text-align: center;
}

Följande CSS-klassväljare styr färgrutornas utseende:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches

CSS-egenskaper för färgruteområdet css-properties-of-the-swatches-area

Exempel section-9cadd62a09fd44a280f55ff42437e416

Så här ställer du in färgruteområdet med mörkgrå bakgrund:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches {
    background-color: #222222;
}

Följande CSS-klassväljare styr mellanrummet mellan miniatyrbilder av färgrutor:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumbcell

CSS-egenskaper för färgrutornas miniatyrmellanrum css-properties-of-the-swatches-thumbnail-spacing

Exempel section-39fb270b7e494a9d99e6e8f6890ec53c

Så här anger du ett lodrätt avstånd på tio pixlar:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumbcell {
 margin: 5px;
}

Följande CSS-klassväljare styr utseendet på enskilda miniatyrbilder:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumb

CSS-egenskaper för utseendet på enskilda miniatyrbilder css-properties-of-the-appearance-of-individual-thumbnails

Exempel section-69fec189ffaa440b97b6b846c320b75b

Så här ställer du in miniatyrbilder som är 100 x 75 pixlar:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumb {
 width:100px;
 height:75px;
}

Följande CSS-klassväljare styr utseendet på miniatyrbildetiketten:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7label

CSS-egenskaper för miniatyretikettens utseende css-properties-of-the-appearance-of-the-thumbnail-label

Exempel section-eb141eb6c1154183baa69796edb90536

Så här ställer du in etiketter som ska använda vänsterjusterad, vit, 12 pixlar i Helvetica®-teckensnittet och en nederkant:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7label {
 border-bottom: 1px solid #e9e9e9;
 text-align: left;
color: #ffffff;
font-family: Helvetica,sans-serif;
font-size: 12px;
}

Följande CSS-klassväljare styr utseendet på upp- och nedrullningsknapparna:

.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton

.s7interactivevideoviewer .s7interactiveswatches .s7scrolldownbutton

Det går inte att placera rullningsknapparna med CSS-egenskaperna top, left, bottom och right. I stället placeras de automatiskt av visningsprogramlogiken.

CSS-egenskaper för uppåt- och nedrullningsknapparnas utseende css-properties-of-the-appearance-of-the-up-and-down-scroll-buttons

Knappens tips kan lokaliseras. Mer information finns i Lokalisering av användargränssnittselement.

Exempel section-e6ce4fa084b84288bc7583342b2c510c

Om du vill ställa in en rullningsknapp som är 60 x 36 pixlar har du olika teckningar för varje läge och tar den teckningen från komponentens sprite-bild:

.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton {
 background-size: 120px;
 width: 60px;
 height: 36px;
}
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton[state] {
 background-image: url(images/v2/InteractiveSwatches_light_sprite.png);
}
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton[state='up'] { background-position: -60px -684px; }
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton[state='over'] { background-position: -0px -684px; }
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton[state='down'] { background-position: -60px -648px; }
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton[state='disabled'] { background-position: -0px -648px; }