Rinjae
384 lines
9.4 KiB
CSS
384 lines
9.4 KiB
CSS
/**
|
|
* Editor Content Styles (editor-content.css)
|
|
*
|
|
* Summernote 에디터로 작성된 HTML 콘텐츠의 공통 스타일
|
|
* 관리자포탈/개발자포탈 양쪽에서 동일하게 사용
|
|
*
|
|
* 사용법:
|
|
* - 관리자포탈: Summernote .note-editable에 .editor-content 클래스 추가
|
|
* - 개발자포탈: 콘텐츠 wrapper에 .editor-content 클래스 추가
|
|
*
|
|
* @version 1.0.0
|
|
* @date 2025-12-30
|
|
*/
|
|
|
|
/* ==========================================================================
|
|
CSS Reset + 기본 설정
|
|
========================================================================== */
|
|
|
|
.editor-content {
|
|
all: revert;
|
|
font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
|
|
font-size: 16px !important;
|
|
font-weight: 400 !important;
|
|
line-height: 1.8 !important;
|
|
color: #1A1A2E !important;
|
|
word-wrap: break-word;
|
|
text-align: left !important;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
헤딩 (Headings)
|
|
========================================================================== */
|
|
|
|
.editor-content h1 {
|
|
font-size: 20px !important;
|
|
font-weight: 700 !important;
|
|
margin: 32px 0 16px !important;
|
|
line-height: 1.4 !important;
|
|
color: #1A1A2E !important;
|
|
}
|
|
|
|
.editor-content h1:first-child {
|
|
margin-top: 0 !important;
|
|
}
|
|
|
|
.editor-content h2 {
|
|
font-size: 18px !important;
|
|
font-weight: 700 !important;
|
|
margin: 24px 0 8px !important;
|
|
line-height: 1.4 !important;
|
|
color: #1A1A2E !important;
|
|
}
|
|
|
|
.editor-content h3 {
|
|
font-size: 16px !important;
|
|
font-weight: 600 !important;
|
|
margin: 16px 0 8px !important;
|
|
line-height: 1.4 !important;
|
|
color: #1A1A2E !important;
|
|
}
|
|
|
|
.editor-content h4,
|
|
.editor-content h5,
|
|
.editor-content h6 {
|
|
font-size: 16px !important;
|
|
font-weight: 600 !important;
|
|
margin: 16px 0 8px !important;
|
|
line-height: 1.4 !important;
|
|
color: #1A1A2E !important;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
단락 (Paragraphs)
|
|
========================================================================== */
|
|
|
|
.editor-content p {
|
|
margin-bottom: 16px !important;
|
|
line-height: 1.8 !important;
|
|
font-size: 16px !important;
|
|
}
|
|
|
|
.editor-content p:last-child {
|
|
margin-bottom: 0 !important;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
리스트 (Lists) - 글로벌 reset 대응
|
|
========================================================================== */
|
|
|
|
.editor-content ul {
|
|
list-style-type: disc !important;
|
|
padding-left: 32px !important;
|
|
margin: 16px 0 !important;
|
|
}
|
|
|
|
.editor-content ol {
|
|
list-style-type: decimal !important;
|
|
padding-left: 32px !important;
|
|
margin: 16px 0 !important;
|
|
}
|
|
|
|
.editor-content li {
|
|
margin-bottom: 8px !important;
|
|
line-height: 1.8 !important;
|
|
font-size: 16px !important;
|
|
}
|
|
|
|
.editor-content li:last-child {
|
|
margin-bottom: 0 !important;
|
|
}
|
|
|
|
/* 중첩 리스트 */
|
|
.editor-content ul ul {
|
|
list-style-type: circle !important;
|
|
margin: 8px 0 !important;
|
|
}
|
|
|
|
.editor-content ul ul ul {
|
|
list-style-type: square !important;
|
|
}
|
|
|
|
.editor-content ol ol {
|
|
list-style-type: lower-alpha !important;
|
|
margin: 8px 0 !important;
|
|
}
|
|
|
|
.editor-content ol ol ol {
|
|
list-style-type: lower-roman !important;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
테이블 (Tables)
|
|
========================================================================== */
|
|
|
|
.editor-content table {
|
|
width: 100% !important;
|
|
border-collapse: collapse !important;
|
|
margin: 24px 0 !important;
|
|
border: 1px solid #E2E8F0 !important;
|
|
border-radius: 8px !important;
|
|
overflow: hidden !important;
|
|
font-size: 14px !important;
|
|
}
|
|
|
|
.editor-content th,
|
|
.editor-content td {
|
|
border: 1px solid #E2E8F0 !important;
|
|
padding: 8px 16px !important;
|
|
text-align: left !important;
|
|
vertical-align: top !important;
|
|
}
|
|
|
|
.editor-content th {
|
|
background: #EFF6FF !important;
|
|
font-weight: 600 !important;
|
|
color: #1A1A2E !important;
|
|
}
|
|
|
|
.editor-content tr:hover {
|
|
background: #F8FAFC !important;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
링크 (Links)
|
|
========================================================================== */
|
|
|
|
.editor-content a {
|
|
color: #0049b4 !important;
|
|
text-decoration: underline !important;
|
|
transition: color 0.3s ease !important;
|
|
}
|
|
|
|
.editor-content a:hover {
|
|
color: #003080 !important;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
인용문 (Blockquote)
|
|
========================================================================== */
|
|
|
|
.editor-content blockquote {
|
|
border-left: 4px solid #0049b4 !important;
|
|
padding: 16px 24px !important;
|
|
margin: 24px 0 !important;
|
|
background: #F8FAFC !important;
|
|
font-style: italic !important;
|
|
color: #64748B !important;
|
|
border-radius: 0 8px 8px 0 !important;
|
|
}
|
|
|
|
.editor-content blockquote p {
|
|
margin-bottom: 0 !important;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
이미지 (Images)
|
|
========================================================================== */
|
|
|
|
.editor-content img {
|
|
max-width: 100% !important;
|
|
height: auto !important;
|
|
border-radius: 8px !important;
|
|
margin-top: 16px !important;
|
|
margin-bottom: 16px !important;
|
|
/* margin-left, margin-right는 인라인 스타일로 정렬 제어 */
|
|
}
|
|
|
|
/* ==========================================================================
|
|
코드 (Code)
|
|
========================================================================== */
|
|
|
|
.editor-content code {
|
|
background: #F8FAFC !important;
|
|
padding: 2px 6px !important;
|
|
border-radius: 4px !important;
|
|
font-family: 'Fira Code', 'Courier New', monospace !important;
|
|
font-size: 0.9em !important;
|
|
color: #0049b4 !important;
|
|
}
|
|
|
|
.editor-content pre {
|
|
background: #F8FAFC !important;
|
|
border: 1px solid #E2E8F0 !important;
|
|
border-radius: 8px !important;
|
|
padding: 16px !important;
|
|
overflow-x: auto !important;
|
|
margin: 16px 0 !important;
|
|
}
|
|
|
|
.editor-content pre code {
|
|
background: transparent !important;
|
|
padding: 0 !important;
|
|
color: #1A1A2E !important;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
구분선 (Horizontal Rule)
|
|
========================================================================== */
|
|
|
|
.editor-content hr {
|
|
border: none !important;
|
|
border-top: 1px solid #E2E8F0 !important;
|
|
margin: 32px 0 !important;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
텍스트 강조 (Text Emphasis)
|
|
========================================================================== */
|
|
|
|
.editor-content strong,
|
|
.editor-content b {
|
|
font-weight: 700 !important;
|
|
}
|
|
|
|
.editor-content em,
|
|
.editor-content i {
|
|
font-style: italic !important;
|
|
}
|
|
|
|
.editor-content u {
|
|
text-decoration: underline !important;
|
|
}
|
|
|
|
.editor-content s,
|
|
.editor-content strike,
|
|
.editor-content del {
|
|
text-decoration: line-through !important;
|
|
}
|
|
|
|
.editor-content mark {
|
|
background-color: #FEF3C7 !important;
|
|
padding: 0 2px !important;
|
|
}
|
|
|
|
.editor-content sub {
|
|
vertical-align: sub !important;
|
|
font-size: 0.8em !important;
|
|
}
|
|
|
|
.editor-content sup {
|
|
vertical-align: super !important;
|
|
font-size: 0.8em !important;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
반응형 (Responsive)
|
|
========================================================================== */
|
|
|
|
@media (max-width: 768px) {
|
|
.editor-content {
|
|
font-size: 14px !important;
|
|
}
|
|
|
|
.editor-content h1 {
|
|
font-size: 18px !important;
|
|
}
|
|
|
|
.editor-content h2 {
|
|
font-size: 16px !important;
|
|
}
|
|
|
|
.editor-content h3,
|
|
.editor-content h4,
|
|
.editor-content h5,
|
|
.editor-content h6 {
|
|
font-size: 14px !important;
|
|
}
|
|
|
|
.editor-content p,
|
|
.editor-content li {
|
|
font-size: 14px !important;
|
|
}
|
|
|
|
.editor-content table {
|
|
font-size: 12px !important;
|
|
}
|
|
|
|
.editor-content th,
|
|
.editor-content td {
|
|
padding: 4px 8px !important;
|
|
}
|
|
|
|
.editor-content ul,
|
|
.editor-content ol {
|
|
padding-left: 24px !important;
|
|
}
|
|
|
|
.editor-content blockquote {
|
|
padding: 8px 16px !important;
|
|
}
|
|
|
|
.editor-content pre {
|
|
padding: 8px !important;
|
|
}
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Summernote 이미지 업로드 UI
|
|
========================================================================== */
|
|
|
|
/* 이미지 업로드 로딩 인디케이터 */
|
|
.image-upload-loading {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background: rgba(0, 73, 180, 0.9);
|
|
color: #fff;
|
|
padding: 12px 24px;
|
|
border-radius: 8px;
|
|
font-size: 14px;
|
|
z-index: 1000;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
animation: pulse 1.5s infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.7; }
|
|
}
|
|
|
|
/* 이미지 다이얼로그 업로드 안내 */
|
|
.image-upload-guide {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 12px 16px;
|
|
background: #EFF6FF;
|
|
border: 1px solid #BFDBFE;
|
|
border-radius: 8px;
|
|
margin-bottom: 16px;
|
|
font-size: 13px;
|
|
color: #1E40AF;
|
|
}
|
|
|
|
.image-upload-guide .material-icons {
|
|
font-size: 18px;
|
|
color: #3B82F6;
|
|
}
|
|
|
|
.image-upload-guide strong {
|
|
font-weight: 600;
|
|
}
|