/* ============================================================ Misc pages CSS — gom CSS inline của các trang lẻ nhỏ. Bundle load global nên các selector ở đây được giữ đặc thù (class có tiền tố / ID / scope) để không leak sang trang khác. ============================================================ */ /* ------------------------------------------------------------- Views/Account/Login.cshtml (trang standalone, Layout=null — không load bundle; misc-pages.css được trực tiếp trong của Login. Rule body được scope theo body.login-page để không đổi nền các trang khác qua bundle.) ------------------------------------------------------------- */ body.login-page { background-color: var(--ds-ground, #f8f9fa); color: var(--ds-ink, #2b2422); } .login-container { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; } .login-card { width: 100%; max-width: 400px; padding: 2rem; border-radius: 10px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); background-color: var(--ds-surface, #fff); } .login-header { text-align: center; margin-bottom: 2rem; } .login-logo { height: 80px; margin-bottom: 1rem; object-fit: cover; } /* Tiêu đề "Đăng Nhập": trước đây thừa hưởng màu mặc định nên chìm hẳn trên nền tối. */ .login-header h2 { color: var(--ds-ink, #2b2422); font-size: 1.5rem; font-weight: 600; margin: 0; } .login-card .form-label { color: var(--ds-muted, #6b615c); font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin-bottom: .35rem; } .login-card .form-check-label { color: var(--ds-ink, #2b2422); font-size: .9rem; } /* ------------------------------------------------------------- Views/Home/EmbedReport.cshtml ------------------------------------------------------------- */ #reportContainer { height: 100%; width: 100%; } /* ------------------------------------------------------------- Views/Request/EmployeeReport.cshtml (selector element/Bootstrap generic được scope dưới #resultsContainer — nơi bảng báo cáo render qua AJAX — để không leak toàn site.) ------------------------------------------------------------- */ #resultsContainer .card-body h2 { margin: 0; font-weight: bold; } #resultsContainer .collapse td { background-color: #f8f9fa; } #resultsContainer .table-sm th, #resultsContainer .table-sm td { padding: 0.5rem; } /* ------------------------------------------------------------- Views/SendMailLog/_SendMailDetailTable.cshtml (partial) (dùng ID #success-tab / #fail-tab — rất đặc thù, không leak.) ------------------------------------------------------------- */ /* Tab Thành Công (semantic ok) — dùng tokens design system (warm) */ .nav-pills .nav-link#success-tab { background-color: var(--ds-ok-bg); color: var(--ds-ok); border-radius: var(--ds-radius-sm); font-weight: 500; } .nav-pills .nav-link.active#success-tab { background-color: var(--ds-ok) !important; color: #fff !important; font-weight: 600; } /* Tab Thất Bại (semantic crit) */ .nav-pills .nav-link#fail-tab { background-color: var(--ds-crit-bg); color: var(--ds-crit); border-radius: var(--ds-radius-sm); font-weight: 500; } .nav-pills .nav-link.active#fail-tab { background-color: var(--ds-crit) !important; color: #fff !important; font-weight: 600; } /* ------------------------------------------------------------- Views/Shared/_RequestDetailBody.cshtml (partial) (dùng tiền tố .rd-* — đặc thù, không leak.) ------------------------------------------------------------- */ .rd-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; } .rd-head h1 { font-size: 1.15rem; margin: 0 0 .2rem; letter-spacing: -.02em; font-weight: 700; } .rd-head .rd-sub { color: var(--ds-muted); font-size: .82rem; } .rd-dl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 24px; } .rd-dl.cols4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 900px) { .rd-dl.cols4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .rd-dl.cols4 { grid-template-columns: 1fr; } } .rd-dl .rd-item.full { grid-column: 1 / -1; } .rd-dl .rd-item.span2 { grid-column: span 2; } .rd-dl dt { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ds-muted); margin-bottom: 3px; } .rd-dl dd { margin: 0; font-size: 14px; } .rd-dl dd.big { font-size: 16px; font-weight: 600; } .rd-section + .rd-section { margin-top: 1.5rem; } .rd-section-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ds-muted); margin-bottom: .75rem; } .rd-tl { position: relative; padding-left: 26px; } .rd-tl::before { content: ""; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 2px; background: var(--ds-line); } .rd-tl-item { position: relative; padding: 0 0 18px; } .rd-tl-item:last-child { padding-bottom: 0; } .rd-tl-dot { position: absolute; left: -22px; top: 2px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--ds-line); } .rd-tl-dot.ok { background: var(--ds-ok); } .rd-tl-dot.warn { background: var(--ds-warn); } .rd-tl-dot.crit { background: var(--ds-crit); } .rd-tl-dot.wait { background: var(--ds-line); } .rd-tl-title { font-weight: 600; font-size: 13.5px; } .rd-tl-meta { font-size: 12px; color: var(--ds-muted); margin-top: 1px; }