Rinjae
188 lines
4.7 KiB
CSS
188 lines
4.7 KiB
CSS
/**
|
|
* Summernote Custom Styles
|
|
* - 이미지 리사이징, 레이아웃, 다이얼로그 스타일 등
|
|
*/
|
|
|
|
/* 에디터 이미지 스타일 */
|
|
.note-editable img {
|
|
max-width: 100%;
|
|
cursor: pointer;
|
|
}
|
|
.note-editable img.note-image-resizing {
|
|
outline: 2px solid #007bff;
|
|
}
|
|
|
|
/* 이미지 리사이즈 핸들 스타일 */
|
|
.note-control-sizing {
|
|
display: block !important;
|
|
}
|
|
.note-control-holder {
|
|
position: relative;
|
|
}
|
|
.note-control-holder .note-control-sizing {
|
|
position: absolute;
|
|
width: 10px;
|
|
height: 10px;
|
|
border: 1px solid #333;
|
|
background-color: #fff;
|
|
}
|
|
|
|
/* 코드뷰 모드 가로 사이즈 고정 */
|
|
.note-editor.note-frame {
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
min-width: 0 !important;
|
|
box-sizing: border-box !important;
|
|
overflow: hidden !important;
|
|
display: block !important;
|
|
}
|
|
.note-editor .note-editing-area {
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
min-width: 0 !important;
|
|
box-sizing: border-box !important;
|
|
overflow: hidden !important;
|
|
}
|
|
.note-editor .note-codable {
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
min-width: 0 !important;
|
|
box-sizing: border-box !important;
|
|
resize: vertical !important;
|
|
white-space: pre-wrap !important;
|
|
word-wrap: break-word !important;
|
|
word-break: break-all !important;
|
|
overflow-x: hidden !important;
|
|
overflow-y: auto !important;
|
|
overflow-wrap: break-word !important;
|
|
}
|
|
|
|
/* Summernote 부모 컨테이너 오버플로우 방지 */
|
|
.table_row td .note-editor,
|
|
td .note-editor,
|
|
div .note-editor {
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
}
|
|
|
|
/* 테이블 레이아웃 고정 - Summernote 포함 테이블 */
|
|
.table_row {
|
|
table-layout: fixed !important;
|
|
width: 100% !important;
|
|
}
|
|
|
|
/* Summernote가 있는 td 스타일 */
|
|
td:has(.note-editor) {
|
|
overflow: hidden !important;
|
|
word-break: break-all !important;
|
|
}
|
|
|
|
/* IE/구형 브라우저 대응 - summernote 래퍼 클래스 */
|
|
.summernote-wrapper {
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
/* 이미지 다이얼로그 버튼 overflow 수정 */
|
|
.note-image-dialog .note-modal-footer {
|
|
padding: 10px 15px !important;
|
|
overflow: visible !important;
|
|
}
|
|
.note-image-dialog .note-modal-content {
|
|
overflow: visible !important;
|
|
}
|
|
.note-image-dialog .note-btn {
|
|
margin: 0 !important;
|
|
}
|
|
|
|
/* 이미지 업로드 안내 문구 스타일 */
|
|
.image-upload-guide {
|
|
margin: 0 0 15px 0;
|
|
padding: 10px 12px;
|
|
background: #e8f4fd;
|
|
border: 1px solid #b8daff;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
color: #004085;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.image-upload-guide i.material-icons {
|
|
font-size: 16px;
|
|
margin-right: 6px;
|
|
color: #0056b3;
|
|
}
|
|
.image-upload-guide strong {
|
|
color: #0056b3;
|
|
}
|
|
|
|
/* 색상 팔레트 UI overflow 수정 */
|
|
.note-editor .note-toolbar {
|
|
overflow: visible !important;
|
|
}
|
|
.note-editor .note-btn-group {
|
|
overflow: visible !important;
|
|
}
|
|
.note-editor .note-toolbar .note-color.open .note-dropdown-menu {
|
|
min-width: 340px !important;
|
|
overflow: visible !important;
|
|
display: flex !important;
|
|
flex-wrap: nowrap !important;
|
|
}
|
|
.note-editor .note-holder {
|
|
overflow: visible !important;
|
|
}
|
|
|
|
/* 색상 팔레트 2컬럼 레이아웃 유지 */
|
|
.note-editor .note-toolbar .note-color .note-dropdown-menu .note-palette {
|
|
display: inline-block !important;
|
|
vertical-align: top !important;
|
|
width: auto !important;
|
|
min-width: 160px !important;
|
|
margin: 0 5px !important;
|
|
flex-shrink: 0 !important;
|
|
}
|
|
.note-editor .note-toolbar .note-color .note-dropdown-menu .note-palette .note-palette-title {
|
|
margin: 0 0 5px 0 !important;
|
|
font-size: 12px !important;
|
|
font-weight: bold !important;
|
|
}
|
|
.note-editor .note-toolbar .note-color .note-dropdown-menu .note-palette .note-color-palette {
|
|
width: auto !important;
|
|
}
|
|
|
|
/* 드롭다운 메뉴 위치 조정 */
|
|
.note-editor .note-dropdown-menu {
|
|
z-index: 1050 !important;
|
|
}
|
|
|
|
/* 전체화면 모드 배경색 */
|
|
.note-editor.note-frame.fullscreen,
|
|
.note-editor.note-airframe.fullscreen {
|
|
background-color: #fff !important;
|
|
}
|
|
.note-editor.note-frame.fullscreen .note-editable,
|
|
.note-editor.note-airframe.fullscreen .note-editable {
|
|
background-color: #fff !important;
|
|
}
|
|
|
|
/* 이미지 다이얼로그 수정 */
|
|
.note-modal .note-modal-content {
|
|
overflow: hidden !important;
|
|
}
|
|
.note-modal .note-modal-footer {
|
|
overflow: hidden !important;
|
|
height: auto !important;
|
|
padding: 10px 15px !important;
|
|
}
|
|
.note-modal .note-modal-footer .note-btn {
|
|
float: right !important;
|
|
margin: 0 !important;
|
|
}
|
|
.note-modal .note-modal-footer::after {
|
|
content: "" !important;
|
|
display: table !important;
|
|
clear: both !important;
|
|
}
|