| Status | ||
|---|---|---|
|
에디터 CSS 변수를 활용하여 에디터 UI 색을 CSS 변수를 활용하여 자유롭게 커스터마이징 설정 할 수 있습니다.
해당 기능은 Chrome, Edge, Safari, Firefox 등 최신 브라우저에서 정상 작동합니다.
...
| 적용 전 | 적용 후 |
|---|---|
|
|
설정할 수 있는 CSS 변수 목록
분류 | CSS 변수 | 예시 값 | 설명 | |
|---|---|---|---|---|
에디터 | --se-editor-border | #39b6b8 | 에디터 바깥 테두리 색 |
|
--se-editor-contents-fg | #39b6b8 | 에디터 편집영역 텍스트 색 | ||
--se-editor-contents-bg | #39b6b8 | 에디터 편집영역 배경 색 | ||
--se-editor-shadow | 0px 0px 1px 1px rgba(0, 0, 0, 0.8) | 에디터 바깥 그림자 | ||
--se-editor-header-shadow | 0px 0px 1px 1px rgba(0, 0, 0, 0.8) | 에디터 헤더(메뉴/툴바 영역) 그림자 | ||
메뉴 | --se-menu-bar-fg | #39b6b8 | 메뉴바 텍스트 색 |
|
--se-menu-bar-bg | #39b6b8 | 메뉴바 배경 색 | ||
--se-menu-bar-hover-bg | #39b6b8 | 메뉴바 버튼 마우스 오버시 색 | ||
--se-menu-bar-active-bg | #39b6b8 | 메뉴바 버튼 활성화 색 | ||
--se-menu-items-border | #39b6b8 | 메뉴가 열렸을 때 보여지는 메뉴 목록 레이어 테두리 색 | ||
--se-menu-items-fg | #39b6b8 | 메뉴가 열렸을 때 보여지는 메뉴 목록 레이어 아이콘&텍스트 색 | ||
--se-menu-items-bg | #39b6b8 | 메뉴가 열렸을 때 보여지는 메뉴 목록 레이어 배경 색 | ||
| --se-menu-items-hover-bg | #39b6b8 | 메뉴가 열렸을 때 보여지는 메뉴 목록 레이어의 버튼 마우스 오버시 색 | ||
| --se-menu-items-active-bg | #39b6b8 | 메뉴가 열렸을 때 보여지는 메뉴 목록 레이어의 버튼 활성화 색 | ||
--se-menu-items-shadow | 0px 0px 1px 1px rgba(0, 0, 0, 0.8) | 메뉴가 열렸을 때 보여지는 메뉴 목록 레이어 그림자 | ||
툴&리사이즈 바 | --se-toolbar-fg | #39b6b8 | 툴&리사이즈 바 아이콘&텍스트 색 |
|
--se-toolbar-bg | #39b6b8 | 툴&리사이즈 바 배경 색 | ||
--se-toolbar-border | #39b6b8 | 툴&리사이즈 바 테두리 색 | ||
--se-toolbar-active-bg | #39b6b8 | 툴바 버튼/드롭다운 활성화 색 | ||
--se-toolbar-hover-bg | #39b6b8 | 툴바 버튼/드롭다운 마우스 오버시 색 | ||
--se-toolbar-dropdown-menu-fg | #39b6b8 | 툴바 드롭다운이 열렸을 때 보여지는 메뉴 목록 레이어의 아이콘&텍스트 색 |
| |
| --se-toolbar-dropdown-menu-bg | #39b6b8 | 툴바 드롭다운이 열렸을 때 보여지는 메뉴 목록 레이어의 배경 색 | ||
| --se-toolbar-dropdown-menu-border | #39b6b8 | 툴바 드롭다운이 열렸을 때 보여지는 메뉴 목록 레이어의 테두리 색 | ||
--se-toolbar-dropdown-menu-active-bg | #39b6b8 | 툴바 드롭다운이 열렸을 때 보여지는 메뉴 목록 레이어의 버튼 활성화 색 | ||
--se-toolbar-dropdown-menu-hover-bg | #39b6b8 | 툴바 드롭다운이 열렸을 때 보여지는 메뉴 목록 레이어의 마우스 오버시 색 | ||
--se-toolbar-dropdown-menu-shadow | 0px 0px 1px 1px rgba(0, 0, 0, 0.8) | 툴바 드롭다운이 열렸을 때 보여지는 메뉴 목록 레이어의 그림자 | ||
툴팁 | --se-tooltip-fg | #39b6b8 | 툴팁 레이어의 텍스트 색 |
|
| --se-tooltip-bg | #39b6b8 | 툴팁 레이어의 배경 색 | ||
--se-tooltip-border | #39b6b8 | 툴팁 레이어의 테두리 색 | ||
--se-tooltip-shadow | 0px 0px 1px 1px rgba(0, 0, 0, 0.8) | 툴팁 레이어의 그림자 | ||
다이얼로그 & 팝업 | --se-dialog-title-fg | #39b6b8 | 다이얼로그 제목 텍스트 색 |
|
--se-dialog-tab-menu-fg | #39b6b8 | 다이얼로그&팝업 탭 메뉴 아이콘&텍스트 색 | ||
--se-dialog-tab-menu-border | #39b6b8 | 다이얼로그&팝업 탭 메뉴 테두리 색 | ||
--se-dialog-tab-menu-hover-bg | #39b6b8 | 다이얼로그&팝업 탭 메뉴 마우스 오버시 색 | ||
--se-dialog-tab-menu-non-active-fg | #39b6b8 | 다이얼로그&팝업 비활성화된 탭 메뉴 아이콘&텍스트 색 | ||
--se-dialog-tab-menu-non-active-bg | #39b6b8 | 다이얼로그&팝업 비활성화된 탭 메뉴 배경 색 | ||
--se-dialog-fg | #39b6b8 | 다이얼로그&팝업 텍스트 색 | ||
--se-dialog-bg | #39b6b8 | 다이얼로그&팝업 배경 색 | ||
--se-dialog-border | #39b6b8 | 다이얼로그&팝업 테두리 색 | ||
--se-dialog-button-fg | #39b6b8 | 다이얼로그&팝업 하단 버튼 텍스트 색 | ||
--se-dialog-button-bg | #39b6b8 | 다이얼로그&팝업 하단 버튼 배경 색 | ||
--se-dialog-button-border | #39b6b8 | 다이얼로그&팝업 하단 포인트 버튼 테두리 색 | ||
--se-dialog-button-point-fg | #39b6b8 | 다이얼로그&팝업 하단 포인트 버튼 텍스트 색 | ||
--se-dialog-button-point-bg | #39b6b8 | 다이얼로그&팝업 하단 포인트 버튼 배경 색 | ||
--se-dialog-shadow | 0px 0px 1px 1px rgba(0, 0, 0, 0.8) | 다이얼로그&팝업 그림자 | ||
--se-dialog-shadow-reversed | 0px 0px 1px 1px rgba(0, 0, 0, 0.8) | 다이얼로그&팝업 그림자 (뒤집혔을 때) | ||
다이얼로그 UI 컴포넌트 | --se-ui-component-fg | #39b6b8 | 다이얼로그&팝업 UI 컴포넌트 아이콘&텍스트 색 |
|
--se-ui-component-bg | #39b6b8 | 다이얼로그&팝업 UI 컴포넌트 배경 색 | ||
--se-ui-component-border | #39b6b8 | 다이얼로그&팝업 UI 컴포넌트 테두리 색 | ||
--se-ui-component-focus-border | #39b6b8 | 다이얼로그&팝업 UI 컴포넌트 포커스 되었을 때 테두리 색 | ||
| --se-ui-component-placeholder | #39b6b8 | 다이얼로그&팝업 UI 컴포넌트의 Placeholder 색 | ||
--se-ui-component-active-bg | #39b6b8 | 다이얼로그&팝업 UI 컴포넌트 활성화 배경 색 | ||
--se-ui-component-hover-bg | #39b6b8 | 다이얼로그&팝업 UI 컴포넌트 마우스 오버시 배경 색 | ||
--se-ui-component-point-active-bg | #39b6b8 | 다이얼로그&팝업 UI 컴포넌트 포인트 활성화 배경 색 | ||
--se-ui-component-point-active-border | #39b6b8 | 다이얼로그&팝업 UI 컴포넌트 포인트 활성화 테두리 색 | ||
| --se-ui-component-menu-fg | #39b6b8 | 다이얼로그&팝업 UI 컴포넌트 메뉴 목록 레이어의 아이콘&텍스트 색 | ||
| --se-ui-component-menu-bg | #39b6b8 | 다이얼로그&팝업 UI 컴포넌트 메뉴 목록 레이어의 배경 색 | ||
| --se-ui-component-menu-border | #39b6b8 | 다이얼로그&팝업 UI 컴포넌트 메뉴 목록 레이어의 테두리 색 | ||
| --se-ui-component-menu-active-bg | #39b6b8 | 다이얼로그&팝업 UI 컴포넌트 메뉴 목록 레이어의 버튼 마우스 오버시 배경 색 | ||
| --se-ui-component-menu-hover-bg | #39b6b8 | 다이얼로그&팝업 UI 컴포넌트 메뉴 목록 레이어의 버튼 활성화 배경 색 | ||
--se-ui-component-menu-shadow | 0px 0px 1px 1px rgba(0, 0, 0, 0.8) | 다이얼로그&팝업 UI 컴포넌트 메뉴 목록 레이어의 그림자 | ||
눈금자 | --se-ruler-division | #39b6b8 | 눈금자 구분선 색 |
|
--se-ruler-number | ||||
#39b6b8래 | 눈금자 숫자 색 | |
--se-ruler-bg | #39b6b8 | 눈금자 비활성화 영역 색 |
--se-ruler-active-bg | #39b6b8 | 눈금자 활성화 영역 색 |
셀렉션 | --se-selection |
|---|
rgba(57, 182, 184, 0.4) | 텍스트 셀렉션 색 |
|
--se- |
formula-selection | #39b6b8 | 표 수식 범위 셀렉션 테두리 색 |
--se-multi-selection-bg |
rgba(57, 182, 184, 0.2) | AP 객체 멀티 셀렉션 배경 색 | |||
--se-multi-selection-border | #39b6b8 | AP 객체 멀티 셀렉션 테두리 색 | ||
모바일 핸들 | --se-mobile-handle | #39b6b8 | 모바일 셀렉션 핸들 색 | |
|---|---|---|---|---|
테이블 핸들 | --se-table-handle-bar | #39b6b8 | 테이블 핸들 바 색 |
|
--se-table-handle-bar-active | #39b6b8 | 활성화된 테이블 핸들 바 색 | ||
--se-table-handle-select-all | #39b6b8 | 테이블 핸들의 전체선택 버튼 색 | ||
--se-table-handle-resize | #39b6b8 | 테이블 핸들의 리사이즈 버튼 색 | ||
--se-table-handle-text | #39b6b8 | 테이블 핸들의 열(A, B, C, ...)/행(1, 2, 3, ...) 머리글 텍스트 | ||
--se-table-formula-label | #39b6b8 | 테이블에서 수식이 있는 셀 표식 색 | ||
드로잉 오브젝트 핸들 | --se-resize-handle-border | #39b6b8 | 드로잉 오브젝트 핸들 테두리 색 |
|
--se-resize-handle-dot | #39b6b8 | 드로잉 오브젝트 핸들의 크기 조절 손잡이 색 | ||
--se-resize-handle-rotation | #39b6b8 | 드로잉 오브젝트 핸들의 회전 손잡이 색 | ||
--se-resize-handle-adj | #39b6b8 | 드로잉 오브젝트 핸들의 도형 조절점 손잡이 색 | ||
--se-resize-handle-connector | #39b6b8 | 드로잉 오브젝트 핸들의 |
테이블 수식 표시
--se-table-formula-label
#39b6b8
선도형 연결점 색 | ||||
대체 이미지 & | --se-alternative-image-fg | #39b6b8 | 대체 이미지/비디오 아이콘 색 |
|
|---|---|---|---|---|
--se-alternative-image-bg | #39b6b8 | 대체 이미지/비디오 배경 색 | ||
--se-alternative-image-border | #39b6b8 | 대체 이미지/비디오 테두리 색 | ||
레이어 속성 버튼 | --se-property-button-fg | #39b6b8 | 레이어 속성 버튼 아이콘 색 |
|
--se-property-button-bg | #39b6b8 | 레이어 속성 버튼 배경 색 | ||
--se-property-button-border | #39b6b8 | 레이어 속성 버튼 테두리 색 |
