링크 공유 link-share
링크 공유 도구는 소셜 공유 패널에 추가된 버튼과 도구가 활성화될 때 표시되는 모달 대화 상자로 구성됩니다. 버튼의 위치는 소셜 공유 도구에서 완전히 관리됩니다.
링크 공유 버튼의 모양은 다음 CSS 클래스 선택기로 제어합니다.
.s7video360viewer .s7linkshare
링크 공유 도구의 CSS 속성
state
특성 선택기를 지원하며, 이 선택기는 다른 단추 상태에 다른 스킨을 적용하는 데 사용할 수 있습니다.CSS 클래스에서 display:none
CSS 속성을 설정하여 소셜 공유 패널에서 단추를 제거할 수 있습니다.
단추 도구 설명을 현지화할 수 있습니다. 사용자 인터페이스 요소의 로컬라이제이션을 참조하세요.
예 - 28 x 28픽셀이고 네 개의 서로 다른 버튼 상태에 대해 각각 다른 이미지를 표시하는 링크 공유 단추를 설정하려면 다음을 수행합니다.
.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);
}
대화 상자가 활성 상태일 때 웹 페이지를 덮는 배경 오버레이는 다음 CSS 클래스 선택기로 제어됩니다.
.s7video360viewer .s7linkdialog .s7backoverlay
백그라운드 오버레이의 CSS 속성
예 - 배경 오버레이를 70%의 불투명도로 회색으로 설정하려면 다음을 수행합니다.
.s7video360viewer .s7linkdialog .s7backoverlay {
opacity:0.7;
background-color:#222222;
}
기본적으로 모달 대화 상자는 데스크탑 시스템에서 화면 중앙에 표시되며 터치 디바이스에서 전체 웹 페이지 영역을 가져옵니다. 모든 경우 대화 상자의 위치 지정 및 크기 조정은 구성 요소에 의해 관리됩니다. 이 대화 상자는 다음 CSS 클래스 선택기로 제어됩니다.
.s7video360viewer .s7linkdialog .s7dialog
대화 상자의 CSS 속성
예 - 전체 브라우저 창을 사용하고 터치 장치에 흰색 배경을 포함하도록 대화 상자를 설정하려면:
.s7video360viewer.s7touchinput .s7linkdialog .s7dialog {
width:100%;
height:100%;
background-color: #ffffff;
}
대화 상자 머리글은 아이콘, 제목 텍스트 및 닫기 단추로 구성됩니다. 헤더 컨테이너는 다음 CSS 클래스 선택기로 제어됩니다.
.s7video360viewer .s7linkdialog .s7dialogheader
대화 상자 헤더의 CSS 속성
아이콘과 제목 텍스트는 다음 CSS 클래스 선택기로 제어되는 추가 컨테이너에 래핑됩니다.
.s7video360viewer .s7linkdialog .s7dialogheader .s7dialogline
대화 상자의 CSS 속성
헤더 아이콘은 다음 CSS 클래스 선택기로 제어됩니다
.s7video360viewer .s7linkdialog .s7dialogheadericon
대화 상자 헤더 아이콘의 CSS 속성
헤더 제목은 다음 CSS 클래스 선택기로 제어됩니다.
.s7video360viewer .s7linkdialog .s7dialogheadertext
대화 상자 헤더 텍스트의 CSS 속성
닫기 단추는 다음 CSS 클래스 선택기로 제어합니다.
.s7video360viewer .s7linkdialog .s7closebutton
닫기 단추 속성의 CSS
state
특성 선택기를 지원하며, 이 선택기는 다른 단추 상태에 다른 스킨을 적용하는 데 사용할 수 있습니다.닫기 단추 도구 팁과 대화 상자 제목을 현지화할 수 있습니다. 사용자 인터페이스 요소의 로컬라이제이션을 참조하세요.
예 - 패딩, 22 x 12픽셀 아이콘, 굵게, 16포인트 제목을 사용하여 대화 상자 헤더를 설정합니다. 그리고 마지막으로 대화 상자 컨테이너의 위쪽에서 2픽셀, 오른쪽에서 2픽셀에 각각 배치된 28x28픽셀 닫기 단추입니다.
.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);
}
대화 상자 바닥글은 취소 단추로 구성됩니다. 바닥글 컨테이너는 다음 CSS 클래스 선택기로 제어됩니다.
.s7video360viewer .s7linkdialog .s7dialogfooter
대화 상자 바닥글 속성의 CSS
바닥글에는 단추를 유지하는 내부 컨테이너가 있습니다. 다음 CSS 클래스 선택기를 사용하여 제어됩니다.
.s7video360viewer .s7linkdialog .s7dialogbuttoncontainer
대화 상자 단추 컨테이너의 CSS 속성
모두 선택 단추는 다음 CSS 클래스 선택기로 제어됩니다.
.s7video360viewer .s7linkdialog .s7dialogactionbutton
버튼은 데스크탑 시스템에서만 사용할 수 있습니다.
모두 선택 단추의 CSS 속성
state
특성 선택기를 지원하며, 이 선택기는 다른 단추 상태에 다른 스킨을 적용하는 데 사용할 수 있습니다.취소 단추는 다음 CSS 클래스 선택기로 제어됩니다.
.s7video360viewer .s7linkdialog .s7dialogcancelbutton
대화 상자의 CSS 속성 취소 단추
state
특성 선택기를 지원하며, 이 선택기는 다른 단추 상태에 다른 스킨을 적용하는 데 사용할 수 있습니다.또한 두 버튼은 다른 대화 상자 버튼에 대해 동일한 CSS 설정을 포함할 수 있는 공통 CSS 클래스를 공유합니다.
.s7video360viewer .s7linkdialog .s7dialogfooter .s7button
단추의 CSS 속성
버튼 도구 팁은 현지화할 수 있습니다. 사용자 인터페이스 요소의 로컬라이제이션을 참조하세요.
예 - 64 x 34 취소 단추가 있는 대화 상자 바닥글을 설정하려면 텍스트 색상과 배경색이 각 단추 상태에 따라 다릅니다.
.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;
}
머리글과 바닥글 사이의 기본 대화 상자 영역에는 대화 상자 내용이 포함됩니다. 모든 경우 구성 요소는 이 영역의 너비를 관리합니다. CSS에서는 이 영역을 설정할 수 없습니다. 기본 대화 상자 영역은 다음 CSS 클래스 선택기로 제어됩니다.
.s7video360viewer .s7linkdialog .s7dialogviewarea
대화 상자 보기 영역의 CSS
예 - 기본 대화 상자 영역을 300픽셀 높이로 설정하려면 10픽셀 여백을 사용하고 흰색 배경을 사용합니다.
.s7video360viewer .s7linkdialog .s7dialogviewarea {
background-color:#ffffff;
margin:10px;
height:300px;
}
레이블 및 입력 필드와 같은 모든 양식 콘텐츠는 다음 CSS 클래스 선택기로 제어되는 컨테이너 내에 있습니다.
.s7video360viewer .s7linkdialog .s7dialogbody
대화 상자 본문의 CSS
예 - 10픽셀 패딩을 포함하도록 양식 콘텐츠를 설정하려면:
.s7interactivevideoviewer .s7linkdialog .s7dialogbody {
padding: 10px;
}
대화 상자 양식의 모든 정적 레이블은
.s7video360viewer .s7linkdialog .s7dialoglabel
이 클래스는 양식 사용자 인터페이스의 여러 위치에 있는 텍스트에 적용할 수 있으므로 레이블 크기나 위치를 제어하기에 적합하지 않습니다.
대화 상자 레이블의 CSS 속성.
대화 상자 레이블을 현지화할 수 있습니다. 사용자 인터페이스 요소의 로컬라이제이션을 참조하세요.
예 - 9픽셀 글꼴을 사용하여 모든 레이블을 회색으로 굵게 설정하려면 다음을 수행합니다.
.s7video360viewer .s7linkdialog .s7dialoglabel {
color: #666666;
font-size: 9pt;
font-weight: bold;
}
링크 위에 표시되는 텍스트 사본의 크기는 다음 CSS 클래스 선택기로 제어합니다.
.s7video360viewer .s7linkdialog .s7dialoginputwide
대화 상자 입력 전체 필드의 CSS 속성
예 - 텍스트 복사본을 너비 430픽셀로 설정하고 아래쪽에 10픽셀 패딩이 있도록 설정하려면 다음을 수행하십시오.
.s7video360viewer .s7linkdialog .s7dialoginputwide {
padding-bottom: 10px;
width: 430px;
}
공유 링크는 컨테이너로 래핑되고 다음 CSS 클래스 선택기로 제어됩니다.
.s7video360viewer .s7linkdialog .s7dialoginputcontainer
대화 상자 입력 컨테이너의 CSS 속성
예 - 포함 코드 텍스트 주위에 1픽셀 회색 테두리를 설정하고 9픽셀 패딩을 사용하려면:
.s7video360viewer .s7linkdialog .s7dialoginputcontainer {
border: 1px solid #CCCCCC;
padding: 9px;
}
공유 링크 자체는 다음 CSS 클래스 선택기로 제어됩니다.
.s7video360viewer .s7linkdialog .s7dialoglink
대화 상자 공유 링크의 CSS 속성
예 - 공유 링크를 450픽셀 너비로 설정하려면:
.s7video360viewer .s7linkdialog .s7dialoglink {
width: 450px;
}