Länkresurs link-share

Länkdelningsverktyget består av en knapp som läggs till på panelen Dela via sociala medier och den modala dialogruta som visas när verktyget aktiveras. Knappens position hanteras helt av verktyget för social delning.

Utseendet på knappen för länkdelning styrs med följande CSS-klassväljare:

.s7video360viewer .s7linkshare

CSS-egenskaper för länkdelningsverktyget

width
Knappbredd.
height
Knapphöjd.
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.

Det går att ta bort knappen från panelen Dela via inställningen display:none CSS-egenskap i dess CSS-klass.

Knappens funktionsbeskrivning kan lokaliseras. Se Lokalisering av användargränssnittselement.

Exempel - om du vill ställa in en knapp för länkdelning som är 28 x 28 pixlar och visar olika bilder för de fyra olika knapplägena:

.s7video360viewer .s7linkshare {
 width:28px;
 height:28px;
}
.s7video360viewer .s7linkshare[state='up'] {
background-image:url(images/v2/LinkShare_dark_up.png);
}
.s7video360viewer .s7linkshare[state='over'] {
background-image:url(images/v2/LinkShare_dark_over.png);
}
.s7video360viewer .s7linkshare[state='down'] {
background-image:url(images/v2/LinkShare_dark_down.png);
}
.s7video360viewer .s7linkshare[state='disabled'] {
background-image:url(images/v2/LinkShare_dark_disabled.png);
}

Bakgrundsövertäckningen som täcker webbsidan när den aktiva dialogrutan styrs med följande CSS-klassväljare:

.s7video360viewer .s7linkdialog .s7backoverlay

CSS-egenskaper för bakgrundsövertäckningen

opacitet
Opacitet för bakgrundsövertäckning.
background-color
Bakgrundsövertäckningsfärg.

Exempel - om du vill ställa in en bakgrundsövertäckning som grå med 70 % opacitet:

.s7video360viewer .s7linkdialog .s7backoverlay {
 opacity:0.7;
 background-color:#222222;
}

Som standard visas den modala dialogrutan centrerat på skärmen på stationära datorer och tar hela webbsidans område på touchenheter. I samtliga fall hanteras placeringen och storleken på dialogrutan av komponenten. Dialogrutan styrs av följande CSS-klassväljare:

.s7video360viewer .s7linkdialog .s7dialog

CSS-egenskaper i dialogrutan

border-radius
Dialogrutans kantradie, om dialogrutan inte tar hela webbläsaren.
background-color
Dialogrutans bakgrundsfärg.
width
Ska antingen vara unset eller inställd på 100 %, vilket innebär att dialogrutan tar hela webbläsarfönstret (det här läget rekommenderas på pekenheter).
height
Ska antingen vara unset eller inställd på 100 %, vilket innebär att dialogrutan tar hela webbläsarfönstret (det här läget rekommenderas på pekenheter).

Exempel - för att ställa in dialogrutan så att den använder hela webbläsarfönstret och har en vit bakgrund på enheter med pekskärm:

.s7video360viewer.s7touchinput .s7linkdialog .s7dialog {
 width:100%;
 height:100%;
background-color: #ffffff;
}

Dialogrutans rubrik består av en ikon, en titeltext och en stängningsknapp. Rubrikbehållaren styrs med följande CSS-klassväljare:

.s7video360viewer .s7linkdialog .s7dialogheader

CSS-egenskaper för dialogrutans rubrik

utfyllnad
Inre utfyllnad för rubrikinnehåll.

Ikonen och rubriktexten placeras i en extra behållare som styrs med följande CSS-klassväljare:

.s7video360viewer .s7linkdialog .s7dialogheader .s7dialogline

CSS-egenskaper för dialograden

utfyllnad
Inre utfyllnad för rubrikikonen och titeln

Rubrikikonen styrs med följande CSS-klassväljare

.s7video360viewer .s7linkdialog .s7dialogheadericon

CSS-egenskaper för dialogrutans rubrikikon

width
Ikonens bredd.
height
Ikonhöjd.
background-image
Ikonbild.
background-position

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

Se CSS-fragment.

Rubriken styrs med följande CSS-klassväljare:

.s7video360viewer .s7linkdialog .s7dialogheadertext

CSS-egenskaper för rubriktexten i dialogrutan

font-weight
Teckenbredd.
font-size
Teckenhöjd.
font-family
Teckensnittsfamilj.
utfyllnad
Intern textutfyllnad.

Stängningsknappen styrs med följande CSS-klassväljare:

.s7video360viewer .s7linkdialog .s7closebutton

CSS-egenskaper för stängningsknappen

top
Lodrät knappposition i förhållande till rubrikbehållare.
höger
Vågrät knappposition i förhållande till rubrikbehållare.
width
Knappbredd.
height
Knapphöjd.
utfyllnad
Knappens inre utfyllnad.
background-image
Knappbild för varje lä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.

Knappbeskrivningen Stäng och dialogrutans titel kan lokaliseras. Se Lokalisering av användargränssnittselement.

Exempel - om du vill ställa in en dialogruterubrik med utfyllnad, 22 x 12 pixlar, med en fet 16 punkters rubrik. Slutligen en stängningsknapp på 28 x 28 pixlar som placeras två pixlar uppifrån och två pixlar från höger om dialogrutan:

.s7video360viewer .s7linkdialog .s7dialogheader {
 padding: 10px;
}
.s7video360viewer .s7linkdialog .s7dialogheader .s7dialogline {
 padding: 10px 10px 2px;
}
.s7video360viewer .s7linkdialog .s7dialogheadericon {
    background-image: url("images/sdk/dlglink_cap.png");
    height: 12px;
    width: 22px;
}
.s7video360viewer .s7linkdialog .s7dialogheadertext {
    font-size: 16pt;
    font-weight: bold;
    padding-left: 16px;
}
.s7video360viewer .s7linkdialog .s7closebutton {
 top:2px;
 right:2px;
 padding:8px;
 width:28px;
 height:28px;
}
.s7video360viewer .s7linkdialog .s7closebutton[state='up'] {
 background-image:url(images/sdk/close_up.png);
}
.s7video360viewer .s7linkdialog .s7closebutton[state='over'] {
 background-image:url(images/sdk/close_over.png);
}
.s7video360viewer .s7linkdialog .s7closebutton[state='down'] {
 background-image:url(images/sdk/close_down.png);
}
.s7video360viewer .s7linkdialog .s7closebutton[state='disabled'] {
 background-image:url(images/sdk/close_disabled.png);
}

Sidfoten i dialogrutan består av en Avbryt-knapp. Sidfotsbehållaren styrs med följande CSS-klassväljare:

.s7video360viewer .s7linkdialog .s7dialogfooter

CSS-egenskaper för dialogrutans sidfot

border
Kant som du kan använda för att visuellt separera sidfoten från resten av dialogrutan.

Sidfoten har en inre behållare som behåller knappen. Den styrs med följande CSS-klassväljare:

.s7video360viewer .s7linkdialog .s7dialogbuttoncontainer

CSS-egenskaper för behållaren för dialogruteknappen

utfyllnad
Inre utfyllnad mellan sidfoten och knappen.

Knappen Markera alla styrs med följande CSS-klassväljare:

.s7video360viewer .s7linkdialog .s7dialogactionbutton

Knappen är bara tillgänglig på stationära datorer.

CSS-egenskaper för knappen Markera alla

width
Knappbredd.
height
Knapphöjd.
färg
Knapptextfärg för varje läge.
background-color
Knappbakgrundsfärg för varje läge.
NOTE
Knappen Markera allt har stöd för state attributväljare, som kan användas för att tillämpa olika skal på olika knapplägen.

Knappen Avbryt styrs med följande CSS-klassväljare:

.s7video360viewer .s7linkdialog .s7dialogcancelbutton

CSS-egenskaper för knappen Avbryt i dialogrutan

width
Knappbredd.
height
Knapphöjd.
färg
Knapptextfärg för varje läge.
background-color
Knappbakgrundsfärg för varje läge.
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.

Båda knapparna har dessutom en gemensam CSS-klass som kan innehålla CSS-inställningar som är desamma för andra dialogruteknappar:

.s7video360viewer .s7linkdialog .s7dialogfooter .s7button

CSS-egenskaper för knappen

font-weight
Knappens teckensnittsbredd.
font-size
Knappens teckenstorlek.
font-family
Knappteckensnittsfamilj.
line-height
Texthöjd inuti knappen. Påverkar lodrät justering.
box-shadow
Skugga.
marginal-höger
Högerknappsmarginal.

Knappens tips kan lokaliseras. Se Lokalisering av användargränssnittselement.

Exempel - om du vill ställa in en sidfot i en dialogruta med en Avbryt-knapp på 64 x 34, där textfärgen och bakgrundsfärgerna är olika för varje knappläge:

.s7video360viewer .s7linkdialog .s7dialogfooter {
    border-top: 1px solid #909090;
}
.s7video360viewer .s7linkdialog .s7dialogbuttoncontainer {
    padding-bottom: 6px;
    padding-top: 10px;
}
.s7video360viewer .s7linkdialog .s7dialogfooter .s7button {
    box-shadow: 1px 1px 1px #999999;
    color: #FFFFFF;
    font-size: 9pt;
    font-weight: bold;
    line-height: 34px;
    margin-right: 10px;
}
.s7video360viewer .s7linkdialog .s7dialogcancelbutton {
 width:64px;
 height:34px;
}
.s7video360viewer .s7linkdialog .s7dialogcancelbutton[state='up'] {
 background-color:#666666;
 color:#dddddd;
}
.s7video360viewer .s7linkdialog .s7dialogcancelbutton[state='down'] {
 background-color:#555555;
 color:#ffffff;
}
.s7video360viewer .s7linkdialog .s7dialogcancelbutton[state='over'] {
 background-color:#555555;
 color:#ffffff;
}
.s7video360viewer .s7linkdialog .s7dialogcancelbutton[state='disabled'] {
 background-color:#b2b2b2;
 color:#dddddd;
}
.s7video360viewer .s7linkdialog .s7dialogactionbutton {
 width:82px;
 height:34px;
}
.s7video360viewer .s7linkdialog .s7dialogactionbutton[state='up'] {
 background-color:#333333;
 color:#dddddd;
}
.s7video360viewer .s7linkdialog .s7dialogactionbutton[state='down'] {
 background-color:#222222;
 color:#cccccc;
}
.s7video360viewer .s7linkdialog .s7dialogactionbutton[state='over'] {
 background-color:#222222;
 color:#cccccc;
}
.s7video360viewer .s7linkdialog .s7dialogactionbutton[state='disabled'] {
 background-color:#b2b2b2;
 color:#dddddd;
}

Dialogrutans huvudområde (mellan sidhuvudet och sidfoten) innehåller dialogruteinnehåll. I samtliga fall hanterar komponenten bredden på det här området - det går inte att ange den i CSS. Huvudområdet i dialogrutan styrs med följande CSS-klassväljare:

.s7video360viewer .s7linkdialog .s7dialogviewarea

CSS-egenskaper i dialogrutans visningsområde

height
Höjden på området i huvuddialogrutan. Den ska bara anges när dialogrutan fungerar i skrivbordsläge. Det är inte tillämpligt när dialogrutans storlek ändras så att den upptar hela webbläsarfönstret.
background-color
Bakgrundsfärgen i huvuddialogrutan.
marginal
Yttre marginal.

Exempel - om du vill ställa in ett huvudområde i dialogrutan till 300 pixlar högt, har en marginal på 10 pixlar och använder en vit bakgrund:

.s7video360viewer .s7linkdialog .s7dialogviewarea {
 background-color:#ffffff;
 margin:10px;
 height:300px;
}

Allt formulärinnehåll, till exempel etiketter och inmatningsfält, finns inuti en behållare som styrs med följande CSS-klassväljare:

.s7video360viewer .s7linkdialog .s7dialogbody

CSS-egenskaper för dialogrutans brödtext

utfyllnad
Inre utfyllnad.

Exempel - för att ställa in formulärinnehåll så att det har utfyllnad på tio pixlar:

.s7interactivevideoviewer .s7linkdialog .s7dialogbody {
    padding: 10px;
}

Alla statiska etiketter i dialogruteformuläret styrs med

.s7video360viewer .s7linkdialog .s7dialoglabel

Den här klassen är inte lämplig för att styra etikettens storlek eller placering eftersom du kan använda den på texter på olika ställen i användargränssnittet.

CSS-egenskaper för dialogruteetiketten

font-weight
Etikettens teckensnittsbredd.
font-size
Teckensnittsstorlek för etikett.
font-family
Etikettteckensnittsfamilj.
färg
Textfärg för etikett.

Dialogruteetiketterna kan lokaliseras. Se Lokalisering av användargränssnittselement.

Exempel - för att ställa in alla etiketter så att de är grå, fet med ett teckensnitt på nio pixlar:

.s7video360viewer .s7linkdialog .s7dialoglabel {
    color: #666666;
    font-size: 9pt;
    font-weight: bold;
}

Storleken på textkopian som visas ovanpå länken styrs av följande CSS-klassväljare:

.s7video360viewer .s7linkdialog .s7dialoginputwide

CSS-egenskaper för dialogrutans inmatningsfält

width
Textbredd.
utfyllnad
Inre utfyllnad.

Exempel - om du vill att textkopian ska vara 430 pixlar bred och ha 10 pixlar utfyllnad längst ned:

.s7video360viewer .s7linkdialog .s7dialoginputwide {
    padding-bottom: 10px;
    width: 430px;
}

Delningslänken kapslas i en behållare och styrs med följande CSS-klassväljare:

.s7video360viewer .s7linkdialog .s7dialoginputcontainer

CSS-egenskaper för dialogrutans indatabehållare

border
Kant runt delningslänkens behållare.
utfyllnad
Inre utfyllnad.

Exempel - om du vill ange en grå kant på en pixel runt inbäddningskoden och ha nio pixlar utfyllnad:

.s7video360viewer .s7linkdialog .s7dialoginputcontainer {
    border: 1px solid #CCCCCC;
    padding: 9px;
}

Själva delningslänken styrs med följande CSS-klassväljare:

.s7video360viewer .s7linkdialog .s7dialoglink

CSS-egenskaper för länken för delning av dialogruta

width
Dela länkbredd.

Exempel - om du vill att delningslänken ska vara 450 pixlar bred:

.s7video360viewer .s7linkdialog .s7dialoglink {
    width: 450px;
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8