Taehoon
25f6ee2055
- UI/UX: 메일 리스트 영역 너비 확장(400px), 검색 및 날짜 선택 영역 여백 조정 - 기능: 탭별 샘플 데이터 동적 렌더링, 메일 검색 및 초기화 기능 구현 - 기능: 메일 선택 시 본문 내용 동적 업데이트 연동 - 기능: 메일 개별 삭제(텍스트 버튼) 및 체크박스를 이용한 다중 삭제 기능 추가 - UI: 메일 쓰기 및 주소록 버튼 하단 고정 레이아웃 적용
478 lines
8.5 KiB
CSS
478 lines
8.5 KiB
CSS
/* Mail Manager Layout */
|
|
.mail-wrapper {
|
|
display: flex;
|
|
height: calc(100vh - 36px);
|
|
margin-top: 36px;
|
|
background: #fff;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.mail-sidebar {
|
|
display: none; /* 사이드바 삭제 */
|
|
}
|
|
|
|
.mail-list-area {
|
|
width: 400px;
|
|
border-right: 1px solid var(--border-color);
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
background: #fff;
|
|
position: relative;
|
|
}
|
|
|
|
/* 탭 가로 배치 복구 */
|
|
.mail-tabs {
|
|
display: flex;
|
|
border-bottom: 1px solid var(--border-color);
|
|
background: #f8f9fa;
|
|
flex-shrink: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.mail-tab {
|
|
flex: 1;
|
|
padding: 12px 0;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
font-weight: 700;
|
|
color: #a0aec0;
|
|
font-size: 11px;
|
|
transition: all 0.2s ease;
|
|
border-bottom: 2px solid transparent;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.mail-tab:hover {
|
|
background: #edf2f7;
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.mail-tab.active {
|
|
color: var(--primary-color);
|
|
border-bottom: 2px solid var(--primary-color);
|
|
background: #fff;
|
|
}
|
|
|
|
/* 검색창 여백 및 간격 조정 */
|
|
.search-bar {
|
|
padding: 16px 24px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
background: #fff;
|
|
flex-shrink: 0;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
/* 상단 선택 액션바 */
|
|
.mail-bulk-actions {
|
|
display: none;
|
|
padding: 8px 16px;
|
|
background: #f7fafc;
|
|
border-bottom: 1px solid var(--border-color);
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.mail-bulk-actions.active {
|
|
display: flex;
|
|
}
|
|
|
|
/* 메일리스트 컨테이너 */
|
|
.mail-items-container {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding-bottom: 60px; /* 하단 고정 버튼 공간 확보 */
|
|
}
|
|
|
|
/* 메일 아이템 스타일 */
|
|
.mail-item {
|
|
padding: 16px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
cursor: pointer;
|
|
transition: 0.2s;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.mail-item:hover {
|
|
background: var(--bg-muted);
|
|
}
|
|
|
|
.mail-item.active {
|
|
background: #E9EEED;
|
|
border-left: 4px solid var(--primary-color);
|
|
}
|
|
|
|
.mail-item-checkbox {
|
|
width: 16px;
|
|
height: 16px;
|
|
cursor: pointer;
|
|
margin-right: 12px;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.mail-item-content {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.mail-item-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.mail-date {
|
|
font-size: 11px;
|
|
color: var(--text-sub);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* 텍스트형 삭제 버튼 스타일 */
|
|
.btn-mail-delete {
|
|
background: #f7fafc;
|
|
border: 1px solid var(--border-color);
|
|
color: #718096;
|
|
cursor: pointer;
|
|
font-size: 10px;
|
|
padding: 2px 8px;
|
|
transition: all 0.2s;
|
|
border-radius: 4px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.btn-mail-delete:hover {
|
|
color: #e53e3e;
|
|
background: #fff5f5;
|
|
border-color: #feb2b2;
|
|
}
|
|
|
|
/* 하단 버튼 고정 */
|
|
.address-book-footer {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
padding: 12px 16px;
|
|
border-top: 1px solid var(--border-color);
|
|
background: #fff;
|
|
flex-shrink: 0;
|
|
z-index: 5;
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.mail-content-area {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow-y: auto;
|
|
border-right: 1px solid var(--border-color);
|
|
}
|
|
|
|
/* Mail Preview & Toggle Handle */
|
|
.mail-preview-area {
|
|
width: 0;
|
|
background: #f1f3f5;
|
|
display: flex;
|
|
flex-direction: column;
|
|
transition: all 0.3s ease;
|
|
overflow: visible;
|
|
position: relative;
|
|
border-left: 0px solid transparent;
|
|
}
|
|
|
|
.mail-preview-area.active {
|
|
width: 500px;
|
|
border-left: 1px solid var(--border-color);
|
|
}
|
|
|
|
.mail-preview-area > *:not(.preview-toggle-handle) {
|
|
opacity: 0;
|
|
transition: opacity 0.2s;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.mail-preview-area.active > * {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.preview-toggle-handle {
|
|
position: absolute;
|
|
left: -20px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 20px;
|
|
height: 60px;
|
|
background: var(--primary-color);
|
|
color: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
border-radius: 8px 0 0 8px;
|
|
font-size: 10px;
|
|
box-shadow: -2px 0 5px rgba(0,0,0,0.1);
|
|
z-index: 10;
|
|
}
|
|
|
|
.preview-toggle-handle:hover {
|
|
background: var(--primary-lv-8);
|
|
}
|
|
|
|
.preview-header {
|
|
padding: 12px 16px;
|
|
background: #fff;
|
|
border-bottom: 1px solid var(--border-color);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.preview-header h3 {
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.preview-content {
|
|
flex: 1;
|
|
padding: 20px;
|
|
overflow-y: auto;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.a4-container {
|
|
width: 100%;
|
|
background: #fff;
|
|
box-shadow: 0 0 20px rgba(0,0,0,0.1);
|
|
position: relative;
|
|
aspect-ratio: 1 / 1.414; /* A4 Ratio */
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.preview-placeholder {
|
|
color: var(--text-sub);
|
|
font-size: 13px;
|
|
text-align: center;
|
|
padding: 20px;
|
|
}
|
|
|
|
.preview-image {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.mail-content-header {
|
|
padding: var(--space-lg);
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.mail-body {
|
|
padding: var(--space-lg);
|
|
line-height: 1.6;
|
|
min-height: 200px;
|
|
}
|
|
|
|
/* Attachments & AI Analysis */
|
|
.attachment-area {
|
|
padding: var(--space-lg);
|
|
border-top: 1px solid var(--border-color);
|
|
background: var(--bg-muted);
|
|
}
|
|
|
|
.attachment-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-md);
|
|
background: #fff;
|
|
padding: var(--space-sm) var(--space-md);
|
|
border-radius: var(--radius-lg);
|
|
border: 1px solid var(--border-color);
|
|
margin-bottom: var(--space-sm);
|
|
cursor: pointer;
|
|
transition: 0.2s;
|
|
}
|
|
|
|
.attachment-item:hover {
|
|
border-color: var(--primary-color);
|
|
box-shadow: var(--box-shadow);
|
|
}
|
|
|
|
.attachment-item.active {
|
|
background: var(--primary-lv-0);
|
|
border-color: var(--primary-color);
|
|
}
|
|
|
|
.file-icon {
|
|
font-size: 20px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.file-details {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.file-name {
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.file-size {
|
|
font-size: 10px;
|
|
color: var(--text-sub);
|
|
}
|
|
|
|
.btn-group {
|
|
display: flex;
|
|
gap: var(--space-xs);
|
|
flex: 1;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.btn-upload {
|
|
padding: 6px 12px;
|
|
border-radius: 4px;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
color: #fff;
|
|
}
|
|
|
|
.btn-ai {
|
|
background: var(--ai-gradient);
|
|
}
|
|
|
|
.btn-normal {
|
|
background: var(--primary-color);
|
|
}
|
|
|
|
.ai-recommend {
|
|
font-size: 11px;
|
|
padding: 2px 6px;
|
|
border-radius: 4px;
|
|
font-weight: 700;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.ai-recommend.smart-mode {
|
|
background: linear-gradient(135deg, #f6f8ff 0%, #f0f4ff 100%);
|
|
color: #4a69bd;
|
|
border: 1px solid #d1d9ff;
|
|
}
|
|
|
|
.ai-recommend.manual-mode {
|
|
background: var(--hover-bg);
|
|
color: var(--text-sub);
|
|
border: 1px dashed var(--border-color);
|
|
font-weight: 400;
|
|
}
|
|
|
|
.path-display {
|
|
cursor: pointer;
|
|
padding: 4px 10px;
|
|
border-radius: 6px;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.file-log-area {
|
|
display: none;
|
|
width: 100%;
|
|
margin-top: 10px;
|
|
background: #1a202c;
|
|
border-radius: 4px;
|
|
padding: 12px;
|
|
font-family: monospace;
|
|
font-size: 11px;
|
|
color: #cbd5e0;
|
|
}
|
|
|
|
.file-log-area.active {
|
|
display: block;
|
|
}
|
|
|
|
.log-line {
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.log-success {
|
|
color: #48bb78;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.log-info {
|
|
color: #63b3ed;
|
|
}
|
|
|
|
/* Toggle Switch */
|
|
.switch {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 34px;
|
|
height: 20px;
|
|
}
|
|
|
|
.switch input {
|
|
opacity: 0;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
.slider {
|
|
position: absolute;
|
|
cursor: pointer;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: #ccc;
|
|
transition: .4s;
|
|
border-radius: 20px;
|
|
}
|
|
|
|
.slider:before {
|
|
position: absolute;
|
|
content: "";
|
|
height: 14px;
|
|
width: 14px;
|
|
left: 3px;
|
|
bottom: 3px;
|
|
background-color: white;
|
|
transition: .4s;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
input:checked+.slider {
|
|
background: var(--ai-gradient);
|
|
}
|
|
|
|
input:checked+.slider:before {
|
|
transform: translateX(14px);
|
|
}
|
|
|
|
.ai-toggle-wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: var(--text-sub);
|
|
}
|
|
|
|
input:checked~.ai-label {
|
|
color: #6d3dc2;
|
|
}
|