feat: add frontend/src/styles/mail.css
This commit is contained in:
parent
0237fe6604
commit
e93c7c1d5b
148
frontend/src/styles/mail.css
Normal file
148
frontend/src/styles/mail.css
Normal file
@ -0,0 +1,148 @@
|
|||||||
|
/* zioinfo-mail 웹메일 스타일 */
|
||||||
|
:root {
|
||||||
|
--primary: #003366;
|
||||||
|
--primary-light: #004c99;
|
||||||
|
--accent: #00A0C8;
|
||||||
|
--bg: #f0f2f5;
|
||||||
|
--surface: #ffffff;
|
||||||
|
--surface2: #f8f9fa;
|
||||||
|
--border: #e0e4e8;
|
||||||
|
--text: #1a2332;
|
||||||
|
--text-muted: #6b7a8d;
|
||||||
|
--unread-bg: #eef4ff;
|
||||||
|
--selected-bg: #dbeafe;
|
||||||
|
--danger: #dc2626;
|
||||||
|
--success: #16a34a;
|
||||||
|
--shadow: 0 1px 4px rgba(0,0,0,.08);
|
||||||
|
--shadow-md: 0 4px 16px rgba(0,0,0,.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
* { box-sizing: border-box; margin: 0; padding: 0 }
|
||||||
|
body { font-family: 'Pretendard', -apple-system, sans-serif; font-size: 14px; color: var(--text); background: var(--bg) }
|
||||||
|
|
||||||
|
/* ── 로그인 ── */
|
||||||
|
.login-page { min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#001f4d 0%,#003a7a 50%,#005c99 100%) }
|
||||||
|
.login-box { background:var(--surface); border-radius:16px; padding:40px; width:400px; box-shadow:var(--shadow-md) }
|
||||||
|
.login-logo { display:flex; align-items:center; gap:16px; margin-bottom:32px }
|
||||||
|
.logo-mark { font-size:40px }
|
||||||
|
.logo-title { font-size:20px; font-weight:700; color:var(--primary) }
|
||||||
|
.logo-sub { font-size:13px; color:var(--text-muted) }
|
||||||
|
.login-form { display:flex; flex-direction:column; gap:16px }
|
||||||
|
.form-group label { display:block; font-size:13px; font-weight:600; color:var(--text-muted); margin-bottom:6px }
|
||||||
|
.form-group input { width:100%; padding:10px 14px; border:1.5px solid var(--border); border-radius:8px; font-size:14px; outline:none; transition:.2s }
|
||||||
|
.form-group input:focus { border-color:var(--accent) }
|
||||||
|
.login-error { color:var(--danger); font-size:13px; background:#fef2f2; padding:10px; border-radius:8px }
|
||||||
|
.btn-login { padding:12px; background:var(--primary); color:#fff; border:none; border-radius:8px; font-size:15px; font-weight:600; cursor:pointer; transition:.2s }
|
||||||
|
.btn-login:hover:not(:disabled) { background:var(--primary-light) }
|
||||||
|
.btn-login:disabled { opacity:.6 }
|
||||||
|
.login-footer { text-align:center; color:var(--text-muted); font-size:12px; margin-top:20px }
|
||||||
|
|
||||||
|
/* ── 앱 레이아웃 ── */
|
||||||
|
.mail-app { display:flex; flex-direction:column; height:100vh; overflow:hidden }
|
||||||
|
.mail-header { display:flex; align-items:center; gap:16px; padding:0 20px; height:54px; background:var(--primary); color:#fff; flex-shrink:0; box-shadow:0 2px 8px rgba(0,0,0,.2) }
|
||||||
|
.header-brand { display:flex; align-items:center; gap:8px; font-weight:700; font-size:16px; flex-shrink:0 }
|
||||||
|
.header-icon { font-size:20px }
|
||||||
|
.header-center { flex:1 }
|
||||||
|
.header-actions { display:flex; align-items:center; gap:10px; flex-shrink:0 }
|
||||||
|
.btn-compose { background:var(--accent); color:#fff; border:none; padding:7px 14px; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer }
|
||||||
|
.btn-compose:hover { opacity:.9 }
|
||||||
|
.btn-refresh,.btn-icon { background:transparent; color:#fff; border:1px solid rgba(255,255,255,.3); padding:6px 10px; border-radius:6px; cursor:pointer }
|
||||||
|
.header-user { font-size:13px; opacity:.85 }
|
||||||
|
.btn-logout { background:transparent; color:rgba(255,255,255,.7); border:1px solid rgba(255,255,255,.2); padding:5px 10px; border-radius:6px; font-size:12px; cursor:pointer }
|
||||||
|
.btn-logout:hover { background:rgba(255,255,255,.1) }
|
||||||
|
|
||||||
|
.mail-body { display:flex; flex:1; overflow:hidden }
|
||||||
|
|
||||||
|
/* ── 사이드바 ── */
|
||||||
|
.mail-sidebar { width:200px; flex-shrink:0; background:var(--surface); border-right:1px solid var(--border); overflow-y:auto; padding:8px 0 }
|
||||||
|
.folder-tree-title { padding:12px 16px 6px; font-size:11px; font-weight:700; color:var(--text-muted); letter-spacing:.05em; text-transform:uppercase }
|
||||||
|
.folder-item { display:flex; align-items:center; gap:8px; width:100%; padding:8px 16px; background:none; border:none; cursor:pointer; font-size:13px; color:var(--text); text-align:left; border-radius:0; transition:.15s }
|
||||||
|
.folder-item:hover { background:var(--bg) }
|
||||||
|
.folder-item.active { background:var(--selected-bg); color:var(--primary); font-weight:600 }
|
||||||
|
.folder-icon { font-size:15px }
|
||||||
|
.folder-name { flex:1 }
|
||||||
|
.folder-badge { background:var(--accent); color:#fff; border-radius:10px; padding:1px 7px; font-size:11px; font-weight:700 }
|
||||||
|
|
||||||
|
/* ── 메일 목록 ── */
|
||||||
|
.mail-list-pane { width:300px; flex-shrink:0; border-right:1px solid var(--border); display:flex; flex-direction:column; overflow:hidden }
|
||||||
|
.mail-list { display:flex; flex-direction:column; height:100% }
|
||||||
|
.mail-list-header { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-bottom:1px solid var(--border); font-size:12px; color:var(--text-muted); flex-shrink:0 }
|
||||||
|
.mail-count { font-weight:600 }
|
||||||
|
.mail-items { flex:1; overflow-y:auto; list-style:none }
|
||||||
|
.mail-item { position:relative; padding:12px 14px; border-bottom:1px solid var(--border); cursor:pointer; transition:.15s }
|
||||||
|
.mail-item:hover { background:var(--surface2) }
|
||||||
|
.mail-item.unread { background:var(--unread-bg) }
|
||||||
|
.mail-item.selected { background:var(--selected-bg) }
|
||||||
|
.mail-item-top { display:flex; justify-content:space-between; margin-bottom:4px }
|
||||||
|
.mail-sender { font-size:13px; font-weight:600; color:var(--text); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
|
||||||
|
.mail-item.unread .mail-sender { color:var(--primary) }
|
||||||
|
.mail-date { font-size:11px; color:var(--text-muted); flex-shrink:0; margin-left:8px }
|
||||||
|
.mail-item-subject { font-size:13px; font-weight:500; margin-bottom:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
|
||||||
|
.mail-item.unread .mail-item-subject { font-weight:700 }
|
||||||
|
.mail-item-preview { font-size:12px; color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding-right:24px }
|
||||||
|
.mail-size { float:right; font-size:11px }
|
||||||
|
.btn-delete { position:absolute; right:10px; top:50%; transform:translateY(-50%); opacity:0; background:none; border:none; cursor:pointer; font-size:14px }
|
||||||
|
.mail-item:hover .btn-delete { opacity:.5 }
|
||||||
|
.btn-delete:hover { opacity:1 !important }
|
||||||
|
.mail-list-loading,.mail-list-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; height:200px; color:var(--text-muted); gap:12px }
|
||||||
|
.empty-icon { font-size:40px }
|
||||||
|
.pagination { display:flex; align-items:center; justify-content:center; gap:12px; padding:10px; border-top:1px solid var(--border); flex-shrink:0 }
|
||||||
|
.pagination button { padding:4px 10px; border:1px solid var(--border); border-radius:4px; cursor:pointer; background:var(--surface) }
|
||||||
|
.pagination button:disabled { opacity:.4; cursor:default }
|
||||||
|
|
||||||
|
/* ── 메일 본문 ── */
|
||||||
|
.mail-view-pane { flex:1; overflow:hidden; display:flex; flex-direction:column }
|
||||||
|
.mail-view { display:flex; flex-direction:column; height:100%; overflow-y:auto }
|
||||||
|
.mail-view-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; color:var(--text-muted); gap:12px }
|
||||||
|
.mail-view-header { padding:20px 24px; border-bottom:1px solid var(--border); background:var(--surface); flex-shrink:0 }
|
||||||
|
.mail-subject { font-size:18px; font-weight:700; color:var(--text); margin-bottom:14px }
|
||||||
|
.mail-meta { display:flex; flex-direction:column; gap:6px; font-size:13px }
|
||||||
|
.meta-label { font-weight:600; color:var(--text-muted); width:80px; display:inline-block }
|
||||||
|
.mail-actions { display:flex; gap:8px; margin-top:14px }
|
||||||
|
.btn-reply,.btn-forward { padding:7px 14px; border:1px solid var(--border); border-radius:6px; cursor:pointer; background:var(--surface); font-size:13px }
|
||||||
|
.btn-reply:hover,.btn-forward:hover { background:var(--bg) }
|
||||||
|
.mail-attachments { padding:12px 24px; background:var(--surface2); border-bottom:1px solid var(--border) }
|
||||||
|
.attach-title { font-size:12px; font-weight:600; color:var(--text-muted); margin-bottom:8px }
|
||||||
|
.attach-list { display:flex; flex-wrap:wrap; gap:8px }
|
||||||
|
.attach-item { display:flex; align-items:center; gap:4px; padding:6px 12px; background:var(--surface); border:1px solid var(--border); border-radius:6px; text-decoration:none; color:var(--primary); font-size:12px }
|
||||||
|
.attach-item:hover { background:var(--bg) }
|
||||||
|
.attach-size { color:var(--text-muted) }
|
||||||
|
.mail-body-content { flex:1; padding:20px 24px; overflow-y:auto }
|
||||||
|
.mail-html-body { line-height:1.6; max-width:100%; overflow-x:auto }
|
||||||
|
.mail-html-body img { max-width:100% }
|
||||||
|
.mail-text-body { white-space:pre-wrap; font-family:inherit; line-height:1.7; color:var(--text) }
|
||||||
|
|
||||||
|
/* ── 검색 ── */
|
||||||
|
.search-bar { display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.15); border-radius:8px; padding:6px 12px; max-width:400px }
|
||||||
|
.search-bar input { background:none; border:none; color:#fff; font-size:13px; outline:none; width:200px }
|
||||||
|
.search-bar input::placeholder { color:rgba(255,255,255,.6) }
|
||||||
|
.search-icon { font-size:14px; opacity:.8 }
|
||||||
|
.search-clear { background:none; border:none; color:rgba(255,255,255,.7); cursor:pointer; font-size:12px }
|
||||||
|
|
||||||
|
/* ── 작성 ── */
|
||||||
|
.compose-overlay { position:fixed; inset:0; background:rgba(0,0,0,.4); display:flex; align-items:center; justify-content:center; z-index:1000 }
|
||||||
|
.compose-box { background:var(--surface); border-radius:12px; width:620px; max-width:95vw; max-height:90vh; display:flex; flex-direction:column; box-shadow:var(--shadow-md) }
|
||||||
|
.compose-header { display:flex; justify-content:space-between; align-items:center; padding:14px 20px; border-bottom:1px solid var(--border); font-weight:600; font-size:15px }
|
||||||
|
.compose-close { background:none; border:none; cursor:pointer; font-size:18px; color:var(--text-muted) }
|
||||||
|
.compose-fields { padding:8px 20px; display:flex; flex-direction:column; gap:2px }
|
||||||
|
.compose-field { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--border) }
|
||||||
|
.compose-field label { font-size:12px; font-weight:600; color:var(--text-muted); width:70px; flex-shrink:0 }
|
||||||
|
.compose-field input { flex:1; border:none; font-size:13px; outline:none }
|
||||||
|
.compose-from { font-size:13px; color:var(--text-muted) }
|
||||||
|
.btn-cc-toggle { background:none; border:1px solid var(--border); border-radius:4px; padding:3px 8px; font-size:11px; cursor:pointer; color:var(--text-muted) }
|
||||||
|
.compose-body { flex:1; min-height:280px; padding:16px 20px; border:none; border-top:1px solid var(--border); font-size:14px; font-family:inherit; outline:none; resize:none; line-height:1.6 }
|
||||||
|
.compose-error { margin:0 20px; padding:8px 12px; background:#fef2f2; color:var(--danger); border-radius:6px; font-size:13px }
|
||||||
|
.compose-success { margin:0 20px; padding:8px 12px; background:#f0fdf4; color:var(--success); border-radius:6px; font-size:13px }
|
||||||
|
.compose-footer { display:flex; gap:10px; padding:14px 20px; border-top:1px solid var(--border) }
|
||||||
|
.btn-send { padding:9px 20px; background:var(--primary); color:#fff; border:none; border-radius:8px; font-size:14px; font-weight:600; cursor:pointer }
|
||||||
|
.btn-send:hover:not(:disabled) { background:var(--primary-light) }
|
||||||
|
.btn-send:disabled { opacity:.6 }
|
||||||
|
.btn-cancel { padding:9px 14px; background:none; border:1px solid var(--border); border-radius:8px; font-size:14px; cursor:pointer; color:var(--text-muted) }
|
||||||
|
|
||||||
|
/* ── 반응형 ── */
|
||||||
|
@media (max-width:768px) {
|
||||||
|
.mail-sidebar { display:none }
|
||||||
|
.mail-list-pane { width:100%; border-right:none }
|
||||||
|
.mail-view-pane { display:none }
|
||||||
|
.header-title { display:none }
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user