/* ========================================================== ATOSY ERP INFORMATION ANCESTOR FREEZE V1 ========================================================== */ /* * Disable visual của sticky T46 cũ. */ body.atosy-view-information #information-full-page #information-level1-sticky-v46, body.atosy-view-information #information-full-page #information-level1-sticky-v46.atosy-old-sticky-disabled { display: none !important; } /* ========================================================== STACK ========================================================== */ body.atosy-view-information #information-full-page #information-category-tree #information-ancestor-freeze-v1 { display: none; position: sticky !important; top: 0 !important; z-index: 300 !important; width: 100% !important; height: var( --freeze-height, 0px ) !important; min-height: var( --freeze-height, 0px ) !important; max-height: var( --freeze-height, 0px ) !important; margin: 0 0 calc( -1 * var( --freeze-height, 0px ) ) 0 !important; padding: 0 !important; box-sizing: border-box !important; overflow: visible !important; pointer-events: none; } body.atosy-view-information #information-full-page #information-category-tree #information-ancestor-freeze-v1.is-visible { display: block !important; } /* ========================================================== FROZEN ROW ========================================================== */ body.atosy-view-information #information-full-page .information-ancestor-freeze-row-v1 { width: 100% !important; height: 49px !important; min-height: 49px !important; max-height: 49px !important; margin: 0 !important; padding: 2px 0 !important; box-sizing: border-box !important; display: grid !important; grid-template-columns: 30px minmax( 0, 1fr ) !important; align-items: center !important; background: #0a3b89 !important; border: 0 !important; opacity: 1 !important; pointer-events: auto; box-shadow: 0 5px 13px rgba( 0, 22, 72, .16 ) !important; } /* ========================================================== LABEL ========================================================== */ body.atosy-view-information #information-full-page .information-ancestor-freeze-label-v1 { width: calc( 100% - 4px ) !important; height: 44px !important; min-height: 44px !important; margin: 0 !important; padding: 0 12px !important; box-sizing: border-box !important; display: block !important; overflow: hidden !important; border: 1px solid #65b8ff !important; border-radius: 14px !important; background: linear-gradient( 135deg, #268cff 0%, #236fdf 52%, #1c57c4 100% ) !important; color: #ffffff !important; opacity: 1 !important; font-size: 13px !important; font-weight: 850 !important; line-height: 42px !important; text-align: left !important; text-overflow: ellipsis !important; white-space: nowrap !important; text-shadow: 0 1px 1px rgba( 0, 0, 0, .18 ) !important; box-shadow: inset 0 1px 0 rgba( 255, 255, 255, .14 ), 0 4px 12px rgba( 0, 66, 180, .16 ) !important; cursor: pointer !important; } /* * Level 1 vẫn 15px như đã chốt. */ body.atosy-view-information #information-full-page .information-ancestor-freeze-row-v1.level-1 .information-ancestor-freeze-label-v1 { font-size: 15px !important; } /* * Indent các cấp frozen. */ body.atosy-view-information #information-full-page .information-ancestor-freeze-row-v1.level-2 .information-ancestor-freeze-label-v1 { padding-left: 20px !important; } body.atosy-view-information #information-full-page .information-ancestor-freeze-row-v1.level-3 .information-ancestor-freeze-label-v1 { padding-left: 28px !important; } body.atosy-view-information #information-full-page .information-ancestor-freeze-row-v1.level-4 .information-ancestor-freeze-label-v1 { padding-left: 36px !important; } body.atosy-view-information #information-full-page .information-ancestor-freeze-row-v1.level-5 .information-ancestor-freeze-label-v1 { padding-left: 44px !important; } body.atosy-view-information #information-full-page .information-ancestor-freeze-row-v1.level-6 .information-ancestor-freeze-label-v1 { padding-left: 52px !important; } body.atosy-view-information #information-full-page .information-ancestor-freeze-row-v1.level-7 .information-ancestor-freeze-label-v1 { padding-left: 60px !important; } /* ========================================================== TOGGLE ========================================================== */ body.atosy-view-information #information-full-page .information-ancestor-freeze-toggle-v1 { width: 30px !important; height: 44px !important; margin: 0 !important; padding: 0 !important; display: grid !important; place-items: center !important; border: 0 !important; background: #0a3b89 !important; color: #d9efff !important; opacity: 1 !important; box-shadow: none !important; font-size: 17px !important; cursor: pointer !important; } /* ========================================================== T54 — N-1 ANCESTOR FREEZE SAFETY ========================================================== */ /* * Tree phải là scroll/sticky context. */ body.atosy-view-information #information-full-page #information-category-tree { position: relative !important; } /* * Freeze stack. */ body.atosy-view-information #information-full-page #information-category-tree #information-ancestor-freeze-v1 { position: sticky !important; top: 0 !important; z-index: 500 !important; } /* * Chỉ hiện khi JS xác định ancestor đã đi qua đầu tree. */ body.atosy-view-information #information-full-page #information-category-tree #information-ancestor-freeze-v1:not(.is-visible) { display: none !important; } body.atosy-view-information #information-full-page #information-category-tree #information-ancestor-freeze-v1.is-visible { display: block !important; } /* * Giữ toàn bộ frozen rows opaque, * không liquid/transparency. */ body.atosy-view-information #information-full-page .information-ancestor-freeze-row-v1 { background: #0a3b89 !important; opacity: 1 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } body.atosy-view-information #information-full-page .information-ancestor-freeze-label-v1 { background: linear-gradient( 135deg, #268cff 0%, #236fdf 52%, #1c57c4 100% ) !important; color: #ffffff !important; opacity: 1 !important; mix-blend-mode: normal !important; } /* * Cấp 1 đã chốt 15px. */ body.atosy-view-information #information-full-page .information-ancestor-freeze-row-v1.level-1 .information-ancestor-freeze-label-v1 { font-size: 15px !important; } /* * Cấp 2 -> N-1 giữ hierarchy nhỏ hơn. */ body.atosy-view-information #information-full-page .information-ancestor-freeze-row-v1:not(.level-1) .information-ancestor-freeze-label-v1 { font-size: 13px !important; } /* * Kill old single-Level1 sticky completely. */ body.atosy-view-information #information-full-page #information-level1-sticky-v46 { display: none !important; } /* T55 STICKY ANCESTOR BACKDROP CLEANUP START */ /* * Mục tiêu: * - Giữ freeze N-1 như hiện tại * - Xóa hình chữ nhật nền phía sau các ancestor đang freeze * - Chỉ giữ lại pill/label gradient để nhìn sạch như Subject */ /* 1) Xóa nền / viền / shadow của toàn bộ wrapper sticky phía sau */ body.atosy-view-information #information-full-page #information-category-tree .information-category-node, body.atosy-view-information #information-full-page #information-category-tree .information-category-node-row { background: transparent !important; box-shadow: none !important; border-color: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* 2) Xóa pseudo element nếu nó đang tạo hình chữ nhật phía sau */ body.atosy-view-information #information-full-page #information-category-tree .information-category-node::before, body.atosy-view-information #information-full-page #information-category-tree .information-category-node::after, body.atosy-view-information #information-full-page #information-category-tree .information-category-node-row::before, body.atosy-view-information #information-full-page #information-category-tree .information-category-node-row::after { content: none !important; display: none !important; background: transparent !important; box-shadow: none !important; border: 0 !important; } /* 3) Các container do module freeze sinh ra cũng phải hoàn toàn trong suốt */ body.atosy-view-information #information-full-page #information-category-tree [class*="ancestor-freeze"], body.atosy-view-information #information-full-page #information-category-tree [class*="sticky-open"], body.atosy-view-information #information-full-page #information-category-tree [class*="sticky-freeze"], body.atosy-view-information #information-full-page #information-category-tree [class*="freeze-stack"], body.atosy-view-information #information-full-page #information-category-tree [class*="freeze-item"] { background: transparent !important; box-shadow: none !important; border: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* 4) Giữ chính pill label nổi lên rõ ràng */ body.atosy-view-information #information-full-page #information-category-tree .information-category-label { position: relative !important; z-index: 2 !important; } /* 5) Nếu ancestor frozen / selected thì chỉ chính label có visual */ body.atosy-view-information #information-full-page #information-category-tree .information-category-node.is-selected > .information-category-node-row .information-category-label, body.atosy-view-information #information-full-page #information-category-tree .information-category-node-row.is-selected .information-category-label, body.atosy-view-information #information-full-page #information-category-tree .information-category-label.is-selected { opacity: 1 !important; background: linear-gradient(180deg, #2f88ff 0%, #2467dd 100%) !important; border: 1px solid rgba(112, 190, 255, 0.55) !important; box-shadow: 0 6px 18px rgba(30, 104, 232, 0.18) !important; } /* 6) Nếu sticky ancestor row có overflow hay mask gây nền đè thì bỏ luôn */ body.atosy-view-information #information-full-page #information-category-tree .information-category-node-row { overflow: visible !important; } /* T55 STICKY ANCESTOR BACKDROP CLEANUP END */ /* ========================================================== T56 — FROZEN N-1 PATH = SELECTED CARD VISUAL ========================================================== */ /* * Mục tiêu: * * 1. Wrapper freeze hoàn toàn trong suốt. * 2. Không còn rectangle lớn phía sau. * 3. MỖI ancestor frozen có 1 card gradient riêng. * 4. Nhìn giống trạng thái selected của cây phân loại. */ /* ========================================================== 1. STACK WRAPPER — TRANSPARENT ========================================================== */ body.atosy-view-information #information-full-page #information-category-tree #information-ancestor-freeze-v1 { background: transparent !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* ========================================================== 2. EACH FROZEN ROW — NO RECTANGLE ========================================================== */ body.atosy-view-information #information-full-page .information-ancestor-freeze-row-v1 { background: transparent !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; overflow: visible !important; } /* ========================================================== 3. TOGGLE AREA — TRANSPARENT ========================================================== */ body.atosy-view-information #information-full-page .information-ancestor-freeze-toggle-v1 { background: transparent !important; border: 0 !important; box-shadow: none !important; color: #b9ddff !important; opacity: 1 !important; } /* ========================================================== 4. FROZEN LABEL = BLUE SELECTED CARD ========================================================== */ body.atosy-view-information #information-full-page .information-ancestor-freeze-label-v1 { display: flex !important; align-items: center !important; width: calc( 100% - 4px ) !important; min-width: 0 !important; height: 44px !important; min-height: 44px !important; margin: 0 !important; padding: 0 13px !important; box-sizing: border-box !important; border: 1px solid rgba( 91, 183, 255, .92 ) !important; border-radius: 14px !important; background: linear-gradient( 135deg, #2e91ff 0%, #2879ed 48%, #2365d9 100% ) !important; color: #ffffff !important; opacity: 1 !important; font-weight: 850 !important; line-height: 1.2 !important; text-align: left !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; text-shadow: 0 1px 1px rgba( 0, 25, 80, .28 ) !important; box-shadow: inset 0 1px 0 rgba( 255, 255, 255, .20 ), 0 5px 14px rgba( 0, 74, 190, .22 ) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; mix-blend-mode: normal !important; } /* ========================================================== 5. LEVEL 1 TYPOGRAPHY ========================================================== */ body.atosy-view-information #information-full-page .information-ancestor-freeze-row-v1.level-1 .information-ancestor-freeze-label-v1 { font-size: 15px !important; font-weight: 900 !important; } /* ========================================================== 6. LEVEL 2 -> N-1 TYPOGRAPHY ========================================================== */ body.atosy-view-information #information-full-page .information-ancestor-freeze-row-v1:not(.level-1) .information-ancestor-freeze-label-v1 { font-size: 13px !important; font-weight: 800 !important; } /* ========================================================== 7. KEEP HIERARCHY INDENT ========================================================== */ body.atosy-view-information #information-full-page .information-ancestor-freeze-row-v1.level-2 .information-ancestor-freeze-label-v1 { padding-left: 20px !important; } body.atosy-view-information #information-full-page .information-ancestor-freeze-row-v1.level-3 .information-ancestor-freeze-label-v1 { padding-left: 28px !important; } body.atosy-view-information #information-full-page .information-ancestor-freeze-row-v1.level-4 .information-ancestor-freeze-label-v1 { padding-left: 36px !important; } body.atosy-view-information #information-full-page .information-ancestor-freeze-row-v1.level-5 .information-ancestor-freeze-label-v1 { padding-left: 44px !important; } body.atosy-view-information #information-full-page .information-ancestor-freeze-row-v1.level-6 .information-ancestor-freeze-label-v1 { padding-left: 52px !important; } body.atosy-view-information #information-full-page .information-ancestor-freeze-row-v1.level-7 .information-ancestor-freeze-label-v1 { padding-left: 60px !important; } /* ========================================================== 8. NO PSEUDO BACKDROP ========================================================== */ body.atosy-view-information #information-full-page .information-ancestor-freeze-row-v1::before, body.atosy-view-information #information-full-page .information-ancestor-freeze-row-v1::after, body.atosy-view-information #information-full-page .information-ancestor-freeze-label-v1::before, body.atosy-view-information #information-full-page .information-ancestor-freeze-label-v1::after { content: none !important; display: none !important; } /* ========================================================== 9. DO NOT CHANGE REAL SELECTED NODE ========================================================== */ /* * Cấp N thật đang được chọn trong tree vẫn sử dụng * visual selected hiện tại của Information Classification. * * T56 chỉ style clone N-1. */ /* T56 END */ /* ========================================================== T58 — FROZEN N-1 EXACT 49PX GEOMETRY ========================================================== */ /* * JS đang dùng: * * const ROW_HEIGHT = 49; * * Vì vậy CSS cũng PHẢI dùng chính xác 49px/cấp. * * Không: * - margin giữa row * - gap giữa row * - min-height > 49px */ /* ========================================================== 1. FREEZE STACK ========================================================== */ body.atosy-view-information #information-full-page #information-category-tree #information-ancestor-freeze-v1 { display: block !important; position: sticky !important; top: 0 !important; z-index: 500 !important; width: 100% !important; height: var( --freeze-height, 0px ) !important; min-height: var( --freeze-height, 0px ) !important; max-height: var( --freeze-height, 0px ) !important; margin: 0 0 calc( -1 * var( --freeze-height, 0px ) ) 0 !important; padding: 0 !important; gap: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible !important; pointer-events: none !important; } body.atosy-view-information #information-full-page #information-category-tree #information-ancestor-freeze-v1:not(.is-visible) { display: none !important; } body.atosy-view-information #information-full-page #information-category-tree #information-ancestor-freeze-v1.is-visible { display: block !important; } /* ========================================================== 2. EACH FROZEN ROW = EXACTLY 49PX ========================================================== */ body.atosy-view-information #information-full-page .information-ancestor-freeze-row-v1 { display: grid !important; grid-template-columns: 30px minmax( 0, 1fr ) !important; align-items: center !important; width: 100% !important; height: 49px !important; min-height: 49px !important; max-height: 49px !important; margin: 0 !important; padding: 2px 0 !important; box-sizing: border-box !important; background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible !important; pointer-events: auto !important; } /* ========================================================== 3. TOGGLE COLUMN ========================================================== */ body.atosy-view-information #information-full-page .information-ancestor-freeze-toggle-v1 { width: 30px !important; min-width: 30px !important; height: 45px !important; min-height: 45px !important; margin: 0 !important; padding: 0 !important; display: grid !important; place-items: center !important; background: transparent !important; border: 0 !important; box-shadow: none !important; color: #d7ecff !important; font-size: 16px !important; line-height: 1 !important; opacity: 1 !important; } /* ========================================================== 4. SELECTED BLUE GRADIENT CARD ========================================================== */ body.atosy-view-information #information-full-page .information-ancestor-freeze-label-v1 { display: flex !important; align-items: center !important; width: calc( 100% - 4px ) !important; height: 44px !important; min-height: 44px !important; max-height: 44px !important; margin: 0 !important; padding: 0 14px !important; box-sizing: border-box !important; border: 1px solid rgba( 93, 185, 255, .90 ) !important; border-radius: 14px !important; background: linear-gradient( 180deg, #3695ff 0%, #2879ed 52%, #2261d2 100% ) !important; color: #ffffff !important; opacity: 1 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; line-height: 1.15 !important; text-align: left !important; box-shadow: inset 0 1px 0 rgba( 255, 255, 255, .20 ), 0 5px 14px rgba( 0, 65, 180, .20 ) !important; text-shadow: 0 1px 1px rgba( 0, 20, 70, .20 ) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; mix-blend-mode: normal !important; } /* ========================================================== 5. LEVEL 1 ========================================================== */ body.atosy-view-information #information-full-page .information-ancestor-freeze-row-v1.level-1 .information-ancestor-freeze-label-v1 { font-size: 15px !important; font-weight: 900 !important; } /* ========================================================== 6. LEVEL 2 -> N-1 ========================================================== */ body.atosy-view-information #information-full-page .information-ancestor-freeze-row-v1:not(.level-1) .information-ancestor-freeze-label-v1 { font-size: 13px !important; font-weight: 850 !important; } /* ========================================================== 7. INDENT HIERARCHY ========================================================== */ body.atosy-view-information #information-full-page .information-ancestor-freeze-row-v1.level-2 .information-ancestor-freeze-label-v1 { padding-left: 20px !important; } body.atosy-view-information #information-full-page .information-ancestor-freeze-row-v1.level-3 .information-ancestor-freeze-label-v1 { padding-left: 28px !important; } body.atosy-view-information #information-full-page .information-ancestor-freeze-row-v1.level-4 .information-ancestor-freeze-label-v1 { padding-left: 36px !important; } body.atosy-view-information #information-full-page .information-ancestor-freeze-row-v1.level-5 .information-ancestor-freeze-label-v1 { padding-left: 44px !important; } body.atosy-view-information #information-full-page .information-ancestor-freeze-row-v1.level-6 .information-ancestor-freeze-label-v1 { padding-left: 52px !important; } body.atosy-view-information #information-full-page .information-ancestor-freeze-row-v1.level-7 .information-ancestor-freeze-label-v1 { padding-left: 60px !important; } /* ========================================================== 8. NO BACKDROP RECTANGLE / PSEUDO ========================================================== */ body.atosy-view-information #information-full-page .information-ancestor-freeze-row-v1::before, body.atosy-view-information #information-full-page .information-ancestor-freeze-row-v1::after, body.atosy-view-information #information-full-page .information-ancestor-freeze-label-v1::before, body.atosy-view-information #information-full-page .information-ancestor-freeze-label-v1::after { content: none !important; display: none !important; } /* ========================================================== T58 END ========================================================== */