기업 분위기로 모양을 통일하기 위해 OIA(Oracle Intelligent Advisor)(이전의 Oracle Policy Automation) 인터뷰를 스타일링할 수 있습니다.
design.css 파일에서 다음 CSS 클래스 선택기를 구성할 수 있습니다. 모든 클래스 선택기에는 접두어 “scs-opainterview-”가 붙습니다.
각 클래스는 지정된 구성요소의 모든 스타일을 정의합니다. 클래스는 완전히 제어되며 기존 OIA 스타일은 사용되지 않습니다.
| 선택기 | 적용 대상 | 설명 |
|---|---|---|
| interview | interview | 인터뷰 영역은 머리글, 바닥글 및 탐색 영역을 포함한 전체 인터뷰 콘텐츠로 구성됩니다. |
| interviewContent | 인터뷰 콘텐츠 | 인터뷰 콘텐츠 영역에는 화면 제목과 콘트롤이 포함되지만 머리글, 바닥글 및 탐색 영역은 제외됩니다. |
| screenTitleBlock | 화면 제목 블록 | 화면 제목 블록은 화면 제목을 포함하는 영역과 함께 해당 행에 포함된 다른 위젯(예: 화면 드롭다운 목록 및/또는 다음 및 뒤로 단추)으로 구성됩니다. |
| screenTitle | 화면 제목 | 화면 제목 영역은 화면 제목을 포함하는 영역입니다. |
| nextButton | 다음 단추 | 다음 단추입니다. |
| backButton | 뒤로 단추 | 뒤로 단추입니다. |
| restartButton | 재시작 단추 | 재시작 단추입니다. |
| exitButton | 종료 단추 | 종료 단추입니다. |
| header | header | 머리글 영역입니다. |
| footer | footer | 바닥글 영역입니다. |
| question | 질문 텍스트 | 질문 텍스트의 스타일입니다. |
| control | 콘트롤의 컨테이너 | 콘트롤을 포함하는 요소의 스타일입니다. |
| label | 레이블 콘트롤 | 레이블 콘트롤의 스타일입니다. |
| controlError | 모든 콘트롤 | 오류 텍스트 컨테이너의 스타일입니다. |
| controlErrorText | 모든 콘트롤 | 오류 텍스트 범위의 스타일입니다. |
| textInput | 단일 행 텍스트 상자, 비밀번호 및 마스크 | 텍스트 입력 콘트롤의 스타일입니다. |
| textAreaInput | 다중 행 텍스트 상자 | 다중 행 텍스트 입력 콘트롤의 스타일입니다. |
| calendarInput | 달력 | 달력 입력 콘트롤의 스타일입니다. 달력 아이콘의 색상을 변경할 수 있는 iconColor 필드와 달력 아이콘을 표시해야 하는지 여부를 나타내는 keepIcon 필드를 지원합니다. |
| dropDownInput | 드롭다운 목록 | 드롭다운 목록 입력 콘트롤의 스타일입니다. |
| filterDropDownInput | 필터링된 드롭다운 목록 | 필터링된 드롭다운 목록 입력 콘트롤의 스타일입니다. 드롭다운 화살표의 색상을 변경할 수 있는 iconColor 필드를 지원합니다. |
| listInput | 고정 목록 | 고정 목록 입력 콘트롤의 스타일입니다. |
| radioInput | 라디오 단추 | 라디오 단추 입력 콘트롤의 스타일입니다. borderColor 및 fillColor 옵션으로 스타일링할 수 있습니다. iconType 속성은 사용된 아이콘의 유형을 변경할 수 있습니다. 현재 지원되는 대체 옵션은 'tick' 및 'fill'뿐입니다. |
| checkboxInput | 체크박스 | 체크박스 입력 콘트롤의 스타일입니다. borderColor 및 fillColor 옵션으로 스타일링할 수 있습니다. iconType 속성은 사용된 아이콘의 유형을 변경할 수 있습니다. 현재 지원되는 대체 옵션은 'square' 및 'fill'뿐입니다. |
| autoCompleteInput | 사용자정의 검색 | customSearch 확장을 사용할 때 autocomplete 필드의 스타일입니다. |
| captchaInput | CAPTCHA 입력 필드 | 사용자가 CAPTCHA를 입력하는 입력 필드의 스타일입니다. |
| signatureInput | 서명 콘트롤 | 서명 콘트롤의 스타일입니다. 서명 펜 잉크를 변경할 수 있는 추가 inkColor 필드를 지원합니다. |
| explanationHeader | 설명 콘트롤 | 설명 콘트롤에 대한 최상위 레벨의 확장 가능한 헤더의 스타일입니다. |
| explanationText | 설명 콘트롤 | 확장된 설명 콘트롤 텍스트의 스타일입니다. |
| signatureClearButton | 서명 콘트롤 | 서명 콘트롤에서 지우기 단추의 스타일입니다. |
| uploadAddButton | 업로드 콘트롤 | 업로드 콘트롤에서 추가 단추의 스타일입니다. |
| entityRemoveButton | 엔티티 수집 콘트롤 | 엔티티 수집 콘트롤입니다. |
design.css에 정의된 스타일 확장과 예제
.scs-opainterview-interviewContent {
background-color: beige;
}
.scs-opainterview-screenTitleBlock {
background-color: bisque;
}
.scs-opainterview-screenTitle {
font-style: italic;
font-size: 20px;
}
.scs-opainterview-nextButton {
color: darkgreen;
}
.scs-opainterview-backButton {
color: crimson;
}
.scs-opainterview-question {
color: green;
}
.scs-opainterview-control {
background-color: cornflowerblue;
}
.scs-opainterview-label {
color:aqua;
}
.scs-opainterview-textInput {
color: red;
cursor:crosshair;
}
.scs-opainterview-radioInput {
background-color: pink;
}
.scs-opainterview-checkboxInput {
cursor: pointer;
}