/* ============================================================================= assets/css/forex-moi.css — PHỦ GIAO DIỆN MỚI LÊN MÀN PHÂN TÍCH FOREX VÌ SAO LÀ CSS CHỨ KHÔNG PHẢI VIẾT LẠI Màn phân tích là nơi engine Elliott vẽ sóng ba tầng lên canvas, cùng khối kịch bản, kế hoạch giao dịch, bản đồ cấp sóng, bảng kiểm quy tắc. Tất cả sinh ra từ template string trong `forex.js` (281KB). Viết lại tầng vẽ đó là việc nhiều tuần — và tôi đã thử một lần rồi làm mất phần vẽ sóng. File này đi đường khác: KHÔNG đụng một dòng logic nào, chỉ ánh xạ lại lớp trình bày. Rủi ro chức năng bằng không — CSS không thể làm sai một con số. HAI KỸ THUẬT LÀM NÊN TOÀN BỘ FILE NÀY: 1. ĐỔI HAI BIẾN, ĐƯỢC CẢ MODULE. `forex.css` dùng `var(--radius)` và `var(--shadow)` ở hàng trăm chỗ. Nâng bo góc 6px → 12px và thay đổ bóng cũ bằng bóng mềm của hệ mới là mọi thẻ trong module đổi dáng cùng lúc, không cần chạm tới từng selector. 2. TIỀN TỐ `.fxt` CHO MỌI LUẬT. CSS của forex được chèn vào lúc chạy nên nó nằm SAU file này — cùng độ ưu tiên thì nó thắng. Thêm `.fxt` phía trước đưa độ ưu tiên lên (0,2,0) so với (0,1,0), nên không cần `!important` chỗ nào. Đồng thời khoá luôn phạm vi: không luật nào rò ra màn gia đình. THỨ TỰ NẠP BẮT BUỘC: sau tokens.css và terminal.css (cần biến của chúng). ========================================================================== */ /* ----------------------------------------------------------------------------- 1. HAI BIẾN ĐỔI DÁNG CẢ MODULE -------------------------------------------------------------------------- */ .fxt{ --radius:12px; --shadow:0 1px 2px rgba(15,26,46,.05),0 4px 16px rgba(15,26,46,.06); } /* ----------------------------------------------------------------------------- 2. THANH CÔNG CỤ VÀ THANH TRẠNG THÁI Bản cũ nhồi mã cặp tiền, khung thời gian, trạng thái nguồn và bộ tab vào một dải chật. Bộ tab đã ẩn (terminal có thanh 4 tab riêng), nên phần còn lại được thở ra và xếp thành thẻ như mọi khối khác. -------------------------------------------------------------------------- */ .fxt .fx-toolbar{ gap:var(--s2); padding:var(--s3); margin-bottom:var(--s3); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); } .fxt .fx-controls{gap:var(--s2)} .fxt .fx-symbol-locked{ font-size:var(--fs-sm);font-weight:var(--fw-bold); letter-spacing:.02em;color:var(--navy); } .fxt .fx-feed{ font-size:var(--fs-xs); padding:var(--s1) var(--s2); border-radius:var(--r-pill); background:var(--surface-2); } .fxt .fx-pro-strip, .fxt .fx-core-bar, .fxt .fx-workstation-bar{ gap:var(--s2); padding:var(--s2) var(--s3); background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius); margin-bottom:var(--s2); } /* ----------------------------------------------------------------------------- 3. THẺ — nguồn gốc của cảm giác "phần mềm thật" Mọi khối lớn nhận cùng một công thức: nền surface, viền mảnh, bo 12px, bóng mềm, padding theo nhịp 4px. Bản cũ mỗi khối một kiểu padding 8/9/10px. -------------------------------------------------------------------------- */ .fxt .fx-chart-panel, .fxt .fx-side>.panel, .fxt .fx-scenarios, .fxt .fx-plan, .fxt .fx-degree-map, .fxt .fx-wave-audit, .fxt .fx-key-map, .fxt .fx-score-bridge, .fxt .fx-position-management, .fxt .fx-memory-sync, .fxt .fx-snapshot-panel, .fxt .fx-learning-card, .fxt .fx-journal-item, .fxt .fx-metric{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:var(--s3); } .fxt .fx-chart-panel{padding:var(--s2);overflow:hidden} .fxt .fx-chart-wrap{border-radius:var(--r-md);overflow:hidden} .fxt .fx-panel-title{ font-size:var(--fs-sm);font-weight:var(--fw-bold); color:var(--navy);letter-spacing:-.01em; margin-bottom:var(--s2); } /* Khoảng cách giữa các khối trong cột phải. Bản cũ dán sát nhau nên không phân biệt được đâu là hết khối này, đâu là đầu khối sau. */ .fxt .fx-side{gap:var(--s3)} .fxt .fx-analysis-grid{gap:var(--s3)} /* ----------------------------------------------------------------------------- 4. KỊCH BẢN ELLIOTT — danh sách chọn được Mỗi kịch bản là một BUTTON. Vùng chạm phải đủ 44px, và cái đang chọn phải nhìn ra ngay bằng vạch màu bên trái chứ không chỉ bằng viền đậm hơn một chút. -------------------------------------------------------------------------- */ .fxt .fx-scenario{ min-height:var(--tap); padding:var(--s3); border-radius:var(--r-md); border:1px solid var(--line); background:var(--surface); transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease); } .fxt .fx-scenario:active{transform:scale(.995)} .fxt .fx-scenario.active, .fxt .fx-scenario[aria-pressed="true"]{ border-color:var(--blue); border-left:3px solid var(--blue); background:var(--blue-soft); } .fxt .fx-scenario-title{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--navy)} .fxt .fx-scenario-meta{font-size:var(--fs-xs);color:var(--muted);gap:var(--s1) var(--s3)} .fxt .fx-prob-detail{ font-size:var(--fs-xs);color:var(--muted); padding:var(--s2);margin-top:var(--s2); background:var(--surface-2);border-radius:var(--r-sm); } .fxt .fx-next-wave{ border-radius:var(--r-sm); padding:var(--s2); font-size:var(--fs-xs); } /* ----------------------------------------------------------------------------- 5. KẾ HOẠCH GIAO DỊCH — khối quan trọng nhất màn hình Hướng lệnh được nâng lên thành nhãn lớn có vạch màu; các mức giá xếp thành ô vuông đọc lướt được thay vì một danh sách dòng chữ nhỏ. -------------------------------------------------------------------------- */ .fxt .fx-plan-direction{ font-size:var(--fs-lg);font-weight:var(--fw-bold); letter-spacing:-.01em; padding:var(--s2) var(--s3); border-radius:var(--r-md); margin-bottom:var(--s2); } .fxt .fx-route, .fxt .fx-trigger{ font-size:var(--fs-sm);line-height:1.45; color:var(--text); padding:var(--s2) 0; } .fxt .fx-plan-grid{gap:var(--s2)} .fxt .fx-level{ padding:var(--s2); border-radius:var(--r-sm); background:var(--surface-2); font-variant-numeric:tabular-nums; } .fxt .fx-level b, .fxt .fx-level strong{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--navy)} .fxt .fx-warning{ font-size:var(--fs-xs); padding:var(--s2); border-radius:var(--r-sm); line-height:1.45; } /* ----------------------------------------------------------------------------- 6. NÚT VÀ Ô NHẬP — theo đúng luật vùng chạm 44px của hệ mới -------------------------------------------------------------------------- */ .fxt .fx-primary, .fxt .fx-secondary, .fxt .fx-work-btn, .fxt .fx-core-tool, .fxt .fx-tool{ min-height:var(--tap); padding:0 var(--s3); border-radius:var(--r-sm); font-size:var(--fs-sm);font-weight:var(--fw-bold); display:inline-flex;align-items:center;justify-content:center;gap:var(--s1); transition:transform var(--dur-fast) var(--ease); } .fxt .fx-primary{background:var(--blue);border:1px solid var(--blue);color:#fff} .fxt .fx-secondary{background:var(--surface);border:1px solid var(--line-strong);color:var(--navy)} .fxt .fx-primary:active, .fxt .fx-secondary:active{transform:scale(.98)} .fxt .fx-plan-actions{gap:var(--s2);margin-top:var(--s3)} /* Thanh công cụ vẽ: nút nhỏ nhưng vùng chạm vẫn phải đủ. */ .fxt .fx-tool, .fxt .fx-core-tool{min-width:var(--tap);padding:0 var(--s2)} .fxt .fx-select, .fxt .fx-input{ min-height:var(--tap); padding:0 var(--s3); border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface-2); font-size:var(--fs-sm); outline:0; } .fxt .fx-select:focus, .fxt .fx-input:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)} .fxt .fx-field{gap:var(--s1)} .fxt .fx-form-grid{gap:var(--s3)} /* ----------------------------------------------------------------------------- 7. NHÃN, CHIP, BẢNG KIỂM -------------------------------------------------------------------------- */ .fxt .fx-chip, .fxt .fx-tag, .fxt .fx-score, .fxt .fx-degree, .fxt .fx-validity{ padding:var(--s1) var(--s2); border-radius:var(--r-pill); font-size:var(--fs-xs);font-weight:var(--fw-bold); white-space:nowrap; } .fxt .fx-audit-grid{gap:var(--s1)} .fxt .fx-audit-rule{ padding:var(--s2); border-radius:var(--r-sm); font-size:var(--fs-xs); line-height:1.45; } .fxt .fx-degree-card{ padding:var(--s2); border-radius:var(--r-sm); background:var(--surface-2); border:1px solid var(--line); } .fxt .fx-metrics{gap:var(--s2)} .fxt .fx-readings, .fxt .fx-indicators{gap:var(--s1) var(--s2);font-size:var(--fs-xs)} /* ----------------------------------------------------------------------------- 8. KHỐI GẬP —
mà forex.js dùng cho phần bằng chứng -------------------------------------------------------------------------- */ .fxt .fx-side details, .fxt .fx-plan details, .fxt .fx-wave-audit details{ border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface-2); margin-top:var(--s2); overflow:hidden; } .fxt .fx-side details>summary, .fxt .fx-plan details>summary, .fxt .fx-wave-audit details>summary{ min-height:var(--tap); display:flex;align-items:center; padding:0 var(--s3); font-size:var(--fs-sm);font-weight:var(--fw-bold); color:var(--navy); cursor:pointer; } .fxt .fx-side details[open]>summary{border-bottom:1px solid var(--line)} /* ----------------------------------------------------------------------------- 9. KHỐI RỖNG VÀ GIÁ TRỰC TIẾP -------------------------------------------------------------------------- */ .fxt .fx-empty{ padding:var(--s5) var(--s4); text-align:center; font-size:var(--fs-sm);color:var(--muted); } .fxt .fx-live-price{ font-variant-numeric:tabular-nums; font-weight:var(--fw-bold); } /* ----------------------------------------------------------------------------- 10. ĐIỆN THOẠI — nơi app này được dùng nhiều nhất Một cột thật, không phải hai cột bị bóp. Và nới lề trái/phải để nội dung không dính sát mép màn hình. -------------------------------------------------------------------------- */ @media (max-width:820px){ .fxt .fx-analysis-grid, .fxt .fx-journal-layout, .fxt .fx-learning-layout, .fxt .fx-form-grid{grid-template-columns:minmax(0,1fr)} .fxt .fx-plan-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .fxt .fx-metrics{grid-template-columns:repeat(2,minmax(0,1fr))} .fxt__legacy{padding:0 var(--s3) var(--s4)} /* Biểu đồ: bản cũ ép min-height 480px trong chế độ tập trung — trên điện thoại nó đẩy khối kế hoạch xuống quá sâu, phải cuộn mới thấy quyết định. */ .fxt .fx-chart-wrap{min-height:0;height:44vh} }