아이템 수정

/* ⭐⭐⭐ 수정 페이지 전용 스타일 ⭐⭐⭐ */ /* 1. 우측 패널 레이아웃 */ .right-panel { padding: 1.5rem !important; overflow-y: auto !important; } /* 2. 아이템 상세 컨테이너 */ #item-detail-container { padding: 0 !important; overflow-y: visible !important; height: auto !important; } #item-detail-container > div { min-height: auto !important; max-width: none !important; margin: 0 !important; } #item-detail-container.note-container > div { max-width: none !important; padding: 0 !important; box-shadow: none !important; } /* 3. 콘텐츠 컨테이너 */ .content-container { max-width: 1200px; width: 100%; margin: 0 auto; } /* 4. 좌측 패널 아이템 클릭 비활성화 */ .item-list-item { pointer-events: none !important; cursor: default !important; } /* 5. Resizer 숨김 */ #resizer { display: none !important; } /* 6. Footer bar 숨김 */ .footer-bar { display: none !important; } /* 7. 카드 */ .card { border: 1px solid var(--color-border); background-color: var(--bg-body); margin-bottom: 2rem; } .card-header { padding: 1rem 1.5rem; background-color: #007bff; color: white; } .card-body { padding: 2rem; } /* 8. 폼 간격 */ .mb-3 { margin-bottom: 1.5rem !important; } .mb-4 { margin-bottom: 2rem !important; } /* 9. 파일 업로드 */ .file-upload-zone { border: 2px dashed #aeb7c7; border-radius: 0.75rem; padding: 0.6rem 1rem; text-align: center; cursor: pointer; transition: all 0.3s ease; color: #6c757d; background-color: var(--bg-primary-panel); margin-bottom: 0.5rem; } .file-upload-zone:hover { border-color: var(--color-highlight); background-color: var(--bg-secondary); } .file-list { list-style: none; padding: 0; margin: 0.5rem 0; } .file-item { display: flex; align-items: center; justify-content: space-between; background: var(--bg-secondary); border: 1px solid var(--color-border); border-radius: 0.5rem; padding: 0.75rem 1rem; margin-bottom: 0.5rem; } .file-item .file-details { flex-grow: 1; padding-right: 1rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .file-item .file-details input { background-color: var(--bg-body); border: 1px solid var(--color-border); padding: 0.375rem 0.75rem; border-radius: 0.25rem; color: var(--color-text); flex-grow: 1; min-width: 150px; } .remove-file-btn { background: none; border: none; color: #dc3545; font-size: 1.3rem; cursor: pointer; transition: transform 0.2s; padding: 0; margin-left: 0.5rem; } .remove-file-btn:hover { transform: scale(1.2); } /* 10. 태그 자동완성 */ .tag-input-container { position: relative; } .tag-suggestions { position: absolute; top: 100%; left: 0; right: 0; background: var(--bg-body); border: 1px solid var(--color-border); border-radius: 0.5rem; box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 1000; max-height: 200px; overflow-y: auto; display: none; } .tag-suggestion-item { padding: 0.75rem 1rem; cursor: pointer; border-bottom: 1px solid var(--color-border); font-size: 0.9rem; color: var(--color-text); } .tag-suggestion-item:last-child { border-bottom: none; } .tag-suggestion-item:hover, .tag-suggestion-item.active { background-color: var(--color-item-selected); } .autocomplete-popup { position: absolute; z-index: 1000; background-color: var(--bg-body); border: 1px solid var(--color-border); border-radius: 0.5rem; max-height: 200px; overflow-y: auto; display: none; padding: 0.5rem; box-shadow: 0 4px 12px rgba(0,0,0,0.15); } .autocomplete-item { padding: 0.5rem 1rem; cursor: pointer; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--color-text); border-radius: 0.25rem; } .autocomplete-item:hover, .autocomplete-item.active { background-color: var(--color-item-selected); } /* 11. 태그 표시 */ .current-tags { margin-top: 0.5rem; display: flex; flex-wrap: wrap; gap: 0.25rem; } .tag-item { display: inline-flex; align-items: center; background: var(--bg-secondary); padding: 0.25rem 0.75rem; border-radius: 1rem; font-size: 0.85rem; border: 1px solid var(--color-border); } .tag-item .remove-tag { margin-left: 0.5rem; cursor: pointer; color: var(--color-text-secondary); font-size: 1.1rem; line-height: 1; } .tag-item .remove-tag:hover { color: #dc3545; } /* 12. 이미지 갤러리 */ .image-gallery-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 1rem; } .image-thumbnail { width: 100%; height: 120px; object-fit: cover; border-radius: 0.5rem; cursor: pointer; transition: transform 0.2s; border: 2px solid var(--color-border); } .image-thumbnail:hover { transform: scale(1.05); border-color: var(--color-highlight); } /* 13. 조건부 필드 */ .conditional-fields { display: none; } .conditional-fields.show { display: block; } /* 14. 폼 컨트롤 */ .form-control, .form-select { background-color: var(--bg-body); color: var(--color-text); border-color: var(--color-border); } .form-control:focus, .form-select:focus { background-color: var(--bg-body); color: var(--color-text); border-color: var(--color-highlight); box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25); } .form-control:disabled { background-color: var(--bg-secondary); } textarea.form-control { min-height: 200px; } #memo { min-height: 80px !important; } /* 15. 버튼 */ .btn-primary { background-color: #007bff; border-color: #007bff; } .btn-primary:hover { background-color: #0056b3; border-color: #0056b3; } /* 16. 모달 */ .modal-content { background-color: var(--bg-body); color: var(--color-text); } .modal-header { border-bottom-color: var(--color-border); } .modal-footer { border-top-color: var(--color-border); } [data-theme^="dark"] .modal-header .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } /* 17. 토스트 */ .toast.bg-success { background-color: #28a745 !important; } .toast.bg-danger { background-color: #dc3545 !important; } /* 18. 반응형 */ @media (max-width: 768px) { .content-container { max-width: 100%; padding: 0; } .card-body { padding: 1rem; } .right-panel { padding: 1rem !important; } } /* 19. 라벨 */ .form-label { color: var(--color-text); font-weight: 600; margin-bottom: 0.5rem; } /* 20. 파일 썸네일 */ .file-item img { border-radius: 4px; object-fit: cover; } /* 21. 링크 관리 스타일 */ .link-input-container { position: relative; } .link-suggestions { position: absolute; top: 100%; left: 0; right: 0; background: var(--bg-primary-panel); border: 1px solid var(--color-border); border-radius: 0.5rem; box-shadow: 0 4px 12px rgba(0,0,0, var(--shadow-intensity)); max-height: 200px; overflow-y: auto; display: none; z-index: 1000; } .link-suggestion-item { padding: 0.75rem 1rem; cursor: pointer; border-bottom: 1px solid var(--color-border); color: var(--color-text); } .link-suggestion-item:last-child { border-bottom: none; } .link-suggestion-item:hover, .link-suggestion-item.active { background-color: var(--bg-secondary); } .selected-links .badge { font-size: 0.9rem; padding: 0.5rem 0.75rem; }

목록 로딩 중...

아이템 수정

아이템 타입 선택

제목

내용

URL 주소

첨부 파일

새 파일을 추가하려면 선택하거나 여기에 드래그하세요

현재 타입은 파일을 지원하지 않습니다.

태그

폴더

아이템 메모

연관 아이템

본문의 [[아이템명]]은 자동 감지됩니다. 추가 연관 아이템을 검색하여 선택하세요.

취소