/* CXHiL 全站自訂樣式。深淺色以 切換(static/js/theme.js)。
v1.2 UI 改版:--cx-* 設計 tokens 與 shell(側欄/頂列/底部導覽)在本檔統一定義。 */
/* ===== 設計 tokens(v1.2,T2)===== */
:root {
--cx-bg: #f4f6f9;
--cx-surface: #ffffff;
--cx-surface-2: #f8fafc;
--cx-border: #e5e7eb;
--cx-text: #1f2933;
--cx-text-muted: #5b6b7f; /* 對白底 6.2:1 */
--cx-primary: #2563eb; /* 品牌色:僅主操作與重點狀態 */
--cx-primary-contrast: #ffffff;
--cx-success: #15803d; --cx-success-bg: #dcfce7;
--cx-warning: #92400e; --cx-warning-bg: #fef3c7;
--cx-danger: #b91c1c; --cx-danger-bg: #fee2e2;
--cx-info: #0e7490; --cx-info-bg: #cffafe;
--cx-radius-sm: 8px; --cx-radius: 12px; --cx-radius-lg: 14px;
--cx-shadow-sm: 0 1px 3px rgba(15, 23, 42, .08);
--cx-shadow: 0 4px 18px rgba(15, 23, 42, .07);
--cx-focus-ring: 0 0 0 2px var(--cx-surface), 0 0 0 4px var(--cx-primary);
--cx-sidebar-bg: #1f2933;
--cx-sidebar-text: #cbd5e1;
--cx-sidebar-heading: #7c8ba1;
--cx-sidebar-active-bg: #2563eb;
--cx-sidebar-active-text: #ffffff;
--cx-topbar-h: 56px;
--cx-bottomnav-h: 60px;
}
[data-bs-theme="dark"] {
--cx-bg: #141920;
--cx-surface: #1d242e;
--cx-surface-2: #212936;
--cx-border: #394150;
--cx-text: #e6eaf0;
--cx-text-muted: #98a6ba;
--cx-primary: #5b8def;
--cx-primary-contrast: #0d1117;
--cx-success: #4ade80; --cx-success-bg: #143620;
--cx-warning: #fbbf24; --cx-warning-bg: #3a2c10;
--cx-danger: #f87171; --cx-danger-bg: #3b1414;
--cx-info: #38bdf8; --cx-info-bg: #0c2f3b;
--cx-shadow-sm: 0 1px 3px rgba(0, 0, 0, .4);
--cx-shadow: 0 4px 18px rgba(0, 0, 0, .45);
--cx-sidebar-bg: #10151c;
--cx-sidebar-text: #aab7c8;
--cx-sidebar-heading: #64748b;
--cx-sidebar-active-bg: #2563eb;
--cx-sidebar-active-text: #ffffff;
}
/* 全域 focus 可見性(鍵盤操作) */
.cx-shell a:focus-visible,
.cx-shell button:focus-visible,
.cx-shell input:focus-visible,
.cx-shell select:focus-visible,
.cx-shell textarea:focus-visible,
.cx-shell [tabindex]:focus-visible {
outline: none;
box-shadow: var(--cx-focus-ring);
border-radius: var(--cx-radius-sm);
}
/* ===== v2 Shell(T5/T6)===== */
body.cx-shell {
background: var(--cx-bg);
color: var(--cx-text);
}
/* 頂部工具列 */
.cx-topbar {
position: sticky;
top: 0;
z-index: 1030;
height: var(--cx-topbar-h);
display: flex;
align-items: center;
gap: .5rem;
padding: 0 1rem;
background: var(--cx-surface);
border-bottom: 1px solid var(--cx-border);
}
.cx-topbar h1 {
font-size: 1.15rem;
font-weight: 700;
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cx-topbar .btn,
.cx-bottomnav a {
min-width: 44px;
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* 管理員側欄:<992px 為 offcanvas 抽屜,≥992px 固定左欄 */
.cx-sidebar {
background: var(--cx-sidebar-bg);
color: var(--cx-sidebar-text);
width: 240px;
}
.cx-sidebar .cx-sidebar-brand {
display: block;
padding: 1rem 1.25rem;
font-weight: 800;
letter-spacing: .05em;
color: #fff;
text-decoration: none;
}
.cx-sidebar .cx-nav-heading {
padding: .85rem 1.25rem .25rem;
font-size: .72rem;
letter-spacing: .08em;
color: var(--cx-sidebar-heading);
}
.cx-sidebar .cx-nav-link {
display: flex;
align-items: center;
gap: .6rem;
padding: .55rem 1.25rem;
min-height: 44px;
color: var(--cx-sidebar-text);
text-decoration: none;
border-left: 3px solid transparent;
}
.cx-sidebar .cx-nav-link:hover {
color: #fff;
background: rgba(255, 255, 255, .06);
}
.cx-sidebar .cx-nav-link.active {
color: var(--cx-sidebar-active-text);
background: var(--cx-sidebar-active-bg);
border-left-color: #fff;
font-weight: 700;
}
.cx-sidebar .cx-sidebar-footer {
margin-top: auto;
border-top: 1px solid rgba(255, 255, 255, .1);
padding-top: .5rem;
}
@media (min-width: 992px) {
.cx-shell-admin .cx-sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
display: flex !important;
flex-direction: column;
overflow-y: auto;
visibility: visible;
transform: none;
}
.cx-shell-admin .cx-main-wrap {
margin-left: 240px;
}
}
/* 一般使用者底部導覽(<992px) */
.cx-bottomnav {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 1030;
display: flex;
height: calc(var(--cx-bottomnav-h) + env(safe-area-inset-bottom, 0px));
padding-bottom: env(safe-area-inset-bottom, 0px);
background: var(--cx-surface);
border-top: 1px solid var(--cx-border);
}
.cx-bottomnav a {
flex: 1;
flex-direction: column;
gap: 2px;
font-size: .72rem;
color: var(--cx-text-muted);
text-decoration: none;
}
.cx-bottomnav a.active {
color: var(--cx-primary);
font-weight: 700;
}
.cx-bottomnav a.cx-bottomnav-primary {
color: var(--cx-primary);
}
.cx-bottomnav a.disabled {
color: var(--cx-border);
pointer-events: none;
}
.cx-bottomnav .cx-bottomnav-icon {
font-size: 1.25rem;
line-height: 1;
}
@media (max-width: 991.98px) {
.cx-shell-user main.cx-main {
padding-bottom: calc(var(--cx-bottomnav-h) + env(safe-area-inset-bottom, 0px) + 1rem);
}
}
/* ===== 共用元件(T3)===== */
.cx-card {
background: var(--cx-surface);
border: 1px solid var(--cx-border);
border-radius: var(--cx-radius);
box-shadow: var(--cx-shadow-sm);
}
.cx-stat-card {
display: block;
padding: .85rem 1rem;
text-decoration: none;
color: inherit;
height: 100%;
}
.cx-stat-card .cx-stat-value {
font-size: 1.5rem;
font-weight: 800;
line-height: 1.2;
}
.cx-stat-card .cx-stat-label {
color: var(--cx-text-muted);
font-size: .82rem;
}
a.cx-stat-card:hover {
border-color: var(--cx-primary);
}
.cx-todo {
display: flex;
align-items: center;
gap: .75rem;
padding: .7rem 1rem;
text-decoration: none;
color: inherit;
}
.cx-todo + .cx-todo {
border-top: 1px solid var(--cx-border);
}
.cx-todo:hover {
background: var(--cx-surface-2);
}
.cx-todo .cx-todo-count {
font-size: 1.2rem;
font-weight: 800;
min-width: 3rem;
text-align: center;
border-radius: var(--cx-radius-sm);
padding: .15rem .4rem;
}
.cx-pill {
display: inline-flex;
align-items: center;
gap: .3rem;
min-width: 44px;
justify-content: center;
padding: .2rem .55rem;
border-radius: 999px;
font-size: .78rem;
font-weight: 700;
}
.cx-pill-success { background: var(--cx-success-bg); color: var(--cx-success); }
.cx-pill-warning { background: var(--cx-warning-bg); color: var(--cx-warning); }
.cx-pill-danger { background: var(--cx-danger-bg); color: var(--cx-danger); }
.cx-pill-info { background: var(--cx-info-bg); color: var(--cx-info); }
.cx-pill-muted { background: var(--cx-surface-2); color: var(--cx-text-muted); border: 1px solid var(--cx-border); }
.cx-empty {
text-align: center;
padding: 2.5rem 1rem;
color: var(--cx-text-muted);
}
.cx-empty .cx-empty-icon {
font-size: 2.2rem;
margin-bottom: .5rem;
}
.cx-page-header {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .75rem;
margin-bottom: 1rem;
}
.cx-page-header h1,
.cx-page-header h2 {
font-size: 1.35rem;
font-weight: 800;
margin: 0;
}
.cx-progress {
background: var(--cx-surface-2);
}
/* ===== 我的工作台:資產卡片與「只看未盤」CSS-only 切換(Phase 4)===== */
.cx-asset-card {
display: flex;
gap: .75rem;
padding: .75rem;
align-items: center;
margin-bottom: .5rem;
}
.cx-asset-card img,
.cx-asset-card .cx-asset-noimg {
width: 64px;
height: 64px;
object-fit: cover;
border-radius: var(--cx-radius-sm);
border: 1px solid var(--cx-border);
background: var(--cx-surface-2);
flex-shrink: 0;
}
.cx-asset-card .cx-asset-noimg {
display: flex;
align-items: center;
justify-content: center;
color: var(--cx-text-muted);
font-size: .72rem;
}
.cx-asset-card .cx-asset-body {
flex-grow: 1;
min-width: 0;
}
/* 只看未盤:純 CSS(:has);不支援的舊瀏覽器退化為顯示全部,不影響功能 */
#my-assets:has(#cx-only-unconfirmed:checked) .cx-asset-confirmed {
display: none;
}
.cx-scan-cta {
display: flex;
align-items: center;
justify-content: center;
gap: .5rem;
min-height: 56px;
font-size: 1.1rem;
font-weight: 700;
}
.border-dashed { border-style: dashed !important; }
#theme-toggle {
line-height: 1;
min-width: 2.2rem;
}
/* ============ v1.5:新增資產共用表單(offcanvas 面板與獨立頁) ============ */
/* Django 預設 widget 無 class,以容器選擇器套 Bootstrap 風格,深淺色皆用變數 */
.cx-asset-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]),
.cx-asset-form select,
.cx-asset-form textarea {
display: block;
width: 100%;
padding: .4rem .7rem;
font-size: .95rem;
line-height: 1.5;
color: var(--bs-body-color);
background: var(--bs-body-bg);
border: 1px solid var(--cx-border);
border-radius: .5rem;
}
.cx-asset-form input:focus,
.cx-asset-form select:focus,
.cx-asset-form textarea:focus {
outline: 0;
border-color: #86b7fe;
box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .15);
}
.cx-asset-form textarea {
min-height: 90px;
}
.cx-asset-form input[type="file"] {
width: 100%;
font-size: .9rem;
}
/* 新增資產 offcanvas:大型右側面板 */
#assetCreateOffcanvas {
--bs-offcanvas-width: min(760px, 96vw);
}
/* ============ v1.8:掃碼盤點頁(base_v2 版) ============ */
.cx-scan-page {
max-width: 960px;
}
.cx-readonly-display {
background: var(--bs-secondary-bg);
color: var(--cx-text);
border: 1px solid var(--cx-border);
border-radius: .5rem;
padding: .45rem .7rem;
min-height: 38px;
word-break: break-word;
}
.cx-readonly-note {
font-size: .82rem;
color: #dc3545;
margin-top: 4px;
}
.cx-scan-locked {
opacity: .72;
}
.cx-scan-locked input,
.cx-scan-locked select,
.cx-scan-locked textarea {
cursor: not-allowed;
}
.cx-scan-actionbar {
position: sticky;
bottom: 0;
z-index: 10;
display: flex;
gap: .5rem;
justify-content: center;
flex-wrap: wrap;
background: var(--bs-body-bg);
border-top: 1px solid var(--cx-border);
padding: .9rem 0;
margin-top: 1rem;
}
@media (max-width: 991.98px) {
/* 一般使用者手機有固定底部導覽:操作列停在導覽之上 */
.cx-shell-user .cx-scan-actionbar {
bottom: calc(var(--cx-bottomnav-h) + env(safe-area-inset-bottom, 0px));
}
}
@media (max-width: 576px) {
.cx-scan-actionbar .btn {
flex: 1 1 100%;
}
}
/* ============ v1.7 Phase 1:共用圖片燈箱與縮圖按鈕 ============ */
.asset-thumb-btn {
padding: 0;
border: 0;
background: none;
border-radius: 8px;
cursor: zoom-in;
line-height: 0;
}
.asset-thumb-btn:focus-visible {
outline: 3px solid #86b7fe;
outline-offset: 2px;
}
.cx-lightbox {
position: fixed;
inset: 0;
z-index: 100000; /* 高於 offcanvas(1045),面板內也可開圖 */
display: flex;
align-items: center;
justify-content: center;
}
.cx-lightbox-backdrop {
position: absolute;
inset: 0;
background: rgba(10, 14, 20, .82);
}
.cx-lightbox-panel {
position: relative;
width: min(1100px, 96vw);
height: min(85vh, 900px);
display: flex;
flex-direction: column;
}
.cx-lightbox-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .5rem;
padding: .5rem .25rem;
}
.cx-lightbox-caption {
color: #fff;
font-weight: 700;
font-family: Consolas, Monaco, monospace;
margin-right: auto;
}
.cx-lightbox-actions {
display: flex;
gap: .35rem;
}
.cx-lightbox-actions .btn {
min-height: 44px; /* 觸控目標 */
}
.cx-lightbox-stage {
position: relative;
flex: 1;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
}
.cx-lightbox-stage img {
max-width: 100%;
max-height: 100%;
user-select: none;
touch-action: none;
transition: transform .08s linear;
}
.cx-lightbox-status {
position: absolute;
inset: auto;
text-align: center;
}
body.cx-lightbox-open {
overflow: hidden; /* 燈箱開啟時鎖頁面捲動 */
}
/* ============ v1.7 Phase 5:側欄分類收合 ============ */
.cx-sidebar .cx-nav-group-btn {
display: flex;
width: 100%;
align-items: center;
gap: .4rem;
padding: .85rem 1.25rem .35rem;
background: none;
border: 0;
color: var(--cx-sidebar-heading);
font-size: .72rem;
letter-spacing: .08em;
text-align: left;
cursor: pointer;
}
.cx-sidebar .cx-nav-group-btn:hover {
color: #fff;
}
.cx-sidebar .cx-nav-group-btn:focus-visible {
outline: 2px solid #86b7fe;
outline-offset: -2px;
border-radius: 4px;
}
.cx-nav-group-chevron {
display: inline-block;
transition: transform .15s ease;
}
.cx-nav-group-btn[aria-expanded="true"] .cx-nav-group-chevron {
transform: rotate(90deg);
}
.cx-nav-group {
display: none;
}
.cx-nav-group.show {
display: block;
}