/* File: apps.css — App: icon + tên app, ô chọn App có icon (task-21). Dùng chung ở mọi trang hiện app: Danh sách key, Tạo / Sửa / Xoá / Khôi phục key, Quản lý App (danh sách, Thêm / Sửa, Xoá). - Icon: ảnh vuông bo góc, cỡ theo class app-icon-. App chưa có icon dùng 1 ảnh mặc định (assets/images/app-icon-default.svg) — cùng kiểu ở mọi nơi. Ảnh icon thật chỉ đọc qua apps-icon.php (cần đăng nhập). - Ô chọn dùng chung (assets/js/panel-select.js — task-48: MỌI gốc hiện như cũ. */ /* ---------- Icon + tên app ---------- */ .app-icon { --kp-ai: 24px; --kp-cap: .74em; display: inline-block; flex: 0 0 auto; border-radius: 22%; background: var(--bs-light); object-fit: cover; vertical-align: calc((var(--kp-cap) - var(--kp-ai)) / 2) !important; } /* task-51: tâm ảnh = tâm CHỮ HOA của chữ cạnh nó (như icon Lucide — kp-icons.css) */ .app-icon-20 { --kp-ai: 20px; width: 20px; height: 20px; } .app-icon-24 { --kp-ai: 24px; width: 24px; height: 24px; } .app-icon-40 { --kp-ai: 40px; width: 40px; height: 40px; } .app-icon-48 { --kp-ai: 48px; width: 48px; height: 48px; } .app-icon-64 { --kp-ai: 64px; width: 64px; height: 64px; } /* Icon + tên chảy như chữ thường: icon đứng đầu dòng đầu, tên xuống dòng giữa các từ (cột App hẹp 96px ở Danh sách key không bị bẻ giữa từ); chỉ bẻ giữa từ khi 1 từ dài hơn cả dòng. */ .app-inline { overflow-wrap: break-word; } .app-inline > .app-icon { margin-right: .375rem; } /* ---------- Ô chọn App có icon ---------- */ .app-select { position: relative; } /* Ô là ô chọn này — tên dài (tên ngân hàng…) xuống dòng, không cắt "…" ở mọi khổ */ .app-select-list { position: absolute; top: calc(100% + 2px); left: 0; z-index: 6; min-width: 100%; width: max-content; max-width: min(24rem, calc(100vw - 2rem)); max-height: 16rem; margin: 0; padding: .25rem; overflow-y: auto; overscroll-behavior: contain; list-style: none; background: var(--bs-secondary-bg); border: 1px solid var(--kp-ctl2, var(--bs-border-color)); border-radius: .5rem; box-shadow: var(--kp-dlg-shadow, 0 .5rem 1rem rgba(0, 0, 0, .15)); } .app-select-list[hidden] { display: none; } .app-select-list.is-up { top: auto; bottom: calc(100% + 2px); } .app-select-option { display: flex; align-items: center; gap: .5rem; padding: .375rem .5rem; /* task-60: lề trái 8 px = lề nút (12 px) − đệm danh sách (4 px) → logo + chữ của dòng trong danh sách THẲNG CỘT với ô đóng (trước 10 px: lệch 2 px) */ border-radius: .375rem; cursor: pointer; user-select: none; touch-action: manipulation; } .app-select-option .app-select-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; } .app-select-option .app-select-spacer { flex: 0 0 24px; width: 24px; height: 24px; } /* task-51: ô chọn App — nút / mục là khung flex (căn giữa theo chiều dọc), không cần nhích */ .app-select-lead-gap { display: inline-block; width: calc(1.2em + .5em); height: 1px; vertical-align: baseline; } /* task-53: khe logo (1,2 em) + khoảng 0,5 em = chữ thẳng cột với dòng có logo — nút đóng + danh sách */ @supports (width: round(1px, 1px)) { .app-select-lead-gap { width: calc(round(1.2em, var(--kp-px, 1px)) + .5em); } } .app-select-option .app-select-check { flex: 0 0 auto; margin-left: .25rem; color: var(--bs-primary); visibility: hidden; } .app-select-option[aria-selected="true"] { font-weight: 600; } .app-select-option[aria-selected="true"] .app-select-check { visibility: visible; } .app-select-option.is-active { background: var(--kp-sel-bg, rgba(var(--bs-primary-rgb), .1)); color: var(--kp-sel-fg, inherit); box-shadow: inset 0 0 0 1px var(--kp-ctl-hot, transparent); } .app-select-option[aria-selected="true"] { background: var(--kp-sel-bg, transparent); color: var(--kp-sel-fg, inherit); } .app-select-option .app-select-check { color: var(--kp-ctl-hot, var(--bs-primary)); } /* tiêu đề nhóm (): chữ nhỏ, không chọn được */ .app-select-group { padding: .5rem .625rem .125rem; font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--bs-secondary-color); pointer-events: none; } .app-select-group:first-child { padding-top: .25rem; } /* icon nền tảng đứng đầu mục (ô chọn "Nền tảng") */ .app-select-lead { display: inline; } /* task-53: logo đứng đầu mục là .kp-plat NỘI DÒNG trong chữ (theme.css mục 7) — không còn hộp flex riêng (hộp flex căn giữa lệch đường chân chữ tới 0,8 px) */ /* trạng thái ô chọn (Bổ sung 3): rê chuột = viền đậm hơn; focus = viền + vòng; mở = viền đậm */ .app-select > .app-select-btn:hover:not(:disabled) { border-color: var(--kp-ctl2-hot, var(--bs-border-color)); } .app-select > .app-select-btn:focus-visible, .app-select > .app-select-btn[aria-expanded="true"] { border-color: var(--kp-ctl-hot, var(--bs-primary)); box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .22); outline: 0; } .app-select-option[aria-disabled="true"] { color: var(--bs-secondary-color); cursor: default; } @media (max-width: 991.98px), (pointer: coarse) { /* Màn hình cảm ứng (< 992px, hoặc máy tính bảng xoay ngang — task-29): chữ >= 16px (iOS không tự phóng to), mục chạm cao >= 44px. */ .app-select > .app-select-btn { min-height: 44px; font-size: 16px; } /* tên app dài: xuống dòng trong nút (thấy đủ tên), không cắt "…" (task-29) */ .app-select-btn .app-select-text { white-space: normal; overflow-wrap: anywhere; } .app-select-option { min-height: 44px; font-size: 16px; } } /* task-60 mục 6: khối thông tin app (Sửa app / Bảo trì app). Giá trị là link cao ≥ 44 px (chạm): chữ của link nằm Ở ĐẦU hộp chạm (không giữa) → thẳng hàng với dòng đầu của nhãn; 2 link "Số key" mỗi link 1 dòng (trong
), mỗi link vẫn cao 44 px */ @media (max-width: 991.98px), (pointer: coarse) { .kp-info-dl dd > a, .kp-info-dl dd > div > a { display: inline-flex; align-items: flex-start; justify-content: flex-start; min-width: 44px; min-height: 44px; } }