/* ============================================================================= TRANG CÔNG (đăng nhập, lỗi, từ chối) — vị trí hộp đăng nhập do quản trị đặt, và hình thức của chính hộp đăng nhập. ADR-0021. Nạp SAU site.css và control-chung.css trong _LayoutCong.cshtml. Tệp riêng chứ không nhập vào site.css vì hai lẽ: • site.css đang có lượt sửa khác giữ, tách ra thì hai việc không giành tệp; • nạp sau thì đè được các luật .khoi-cong của site.css mà không phải sửa chúng. Ba ràng buộc của site.css vẫn còn nguyên hiệu lực ở đây: • không style="" nội tuyến (chính sách style-src 'self'); • không :has(), không color-mix(), không @container — Firefox ESR 102 bỏ qua lặng lẽ; • KHÔNG đổi kích thước hay bố cục của control dùng chung từ khung chứa (GD-32): tệp này không đặt width/height/padding cho .nut, .o-nhap, .o-xo, .o-tick. --------------------------------------------------------------------------- 1. VỊ TRÍ HỘP ĐĂNG NHẬP — MỘT CƠ CHẾ, HAI THIẾT LẬP --------------------------------------------------------------------------- Bốn vị trí (trai · phai · tren · duoi) × hai loại màn hình (rộng · điện thoại) = tám cấu hình. Chúng được khai bằng BIẾN CSS chứ không bằng tám khối luật: mỗi vị trí chỉ đặt giá trị cho bốn biến, còn hình học (grid-template-columns, max-width, order, gap) viết ĐÚNG MỘT LẦN ở khối .khoi-cong bên dưới. Vì sao phải làm thế chứ không dùng thẳng @media. Bản XEM TRƯỚC trên trang /quan-tri/nhan-dien phải hiện được bố cục ĐIỆN THOẠI trong lúc cửa sổ quản trị đang rộng 1600 điểm ảnh. @media hỏi bề rộng CỬA SỔ, không hỏi bề rộng khung chứa, nên nó không bao giờ đúng cho bản xem trước; @container thì bị cấm (Firefox ESR 102 bỏ qua lặng lẽ). Tách "bộ giá trị" khỏi "cách chọn bộ giá trị" cho phép trang thật chọn bằng @media còn khung xem trước chọn bằng lớp — mà hình học chỉ có một bản, không thể trôi khỏi nhau. ============================================================================= */ /* --- 1a0. Căn giữa trong một vùng CUỘN phải dùng LỀ TỰ ĐỘNG ----------------- .noi-dung-giua là vùng cuộn (overflow-y:auto) và căn giữa bằng align-items:center. Khi nội dung cao hơn vùng — màn hình thấp, hoặc bố cục xếp dọc (tren/duoi) — cách đó đẩy phần thừa ra CẢ HAI phía, và phần tràn phía TRÊN không cuộn tới được vì scrollTop không nhận giá trị âm: đầu hộp đăng nhập bị cắt và không cách nào kéo lên xem. Thấy rõ ở khung xem trước 1280×720 với vị trí "trên". Lề tự động không có tật đó: đặc tả flexbox quy lề tự động về 0 khi chỗ trống âm, nên nội dung dính mép trên và cuộn được hết. */ .noi-dung-giua { align-items: flex-start; } .noi-dung-giua > .khoi-cong { margin: auto; } /* --- 1a. Hình học: viết một lần, đọc từ biến ------------------------------- Khối dựng bằng FLEX chứ không bằng grid. Hai lẽ: • hai khối ở đây không phải lưới khoá–giá trị mà là hai mảng nội dung có nhu cầu bề rộng KHÁC nhau, nên phải khai bề rộng theo nội dung (GD-27) — flex cho phép hộp đăng nhập giữ 380px cố định còn khối giới thiệu ăn phần còn lại; • ở màn hẹp, flex-wrap gộp hai cột về một cột bằng chính phép đo của mình khi hết chỗ, nên KHÔNG phải đẻ thêm một mốc @media thứ hai để lệch với mốc 860px. */ .khoi-cong { display: flex; flex-direction: var(--bc-huong); flex-wrap: var(--bc-quan); align-items: var(--bc-canh); max-width: var(--bc-toi-da); gap: var(--bc-khe); } .khoi-cong > .cong-gioi-thieu { order: var(--bc-tt-gt); flex: var(--bc-co-gt); min-width: 0; } .khoi-cong > .the-cong { order: var(--bc-tt-the); flex: var(--bc-co-the); min-width: 0; } /* --- 1b. Bốn bộ giá trị cho MÀN HÌNH RỘNG --------------------------------- Hai cột: hộp đăng nhập giữ ĐÚNG 380px (bề rộng đọc thoải mái của một biểu mẫu hai trường — rộng hơn thì ô nhập dài ra vô ích), khối giới thiệu ăn hết chỗ còn lại. */ .bc-r-phai { --bc-huong-r: row; --bc-quan-r: nowrap; --bc-canh-r: center; --bc-co-gt-r: 1 1 0; --bc-co-the-r: 0 0 380px; --bc-toi-da-r: 900px; --bc-khe-r: var(--kc-8); --bc-tt-gt-r: 1; --bc-tt-the-r: 2; } .bc-r-trai { --bc-huong-r: row; --bc-quan-r: nowrap; --bc-canh-r: center; --bc-co-gt-r: 1 1 0; --bc-co-the-r: 0 0 380px; --bc-toi-da-r: 900px; --bc-khe-r: var(--kc-8); --bc-tt-gt-r: 2; --bc-tt-the-r: 1; } /* Xếp dọc: bó về 560px. Để nguyên 900px thì dòng chữ giới thiệu dài 900px — quá 90 ký tự một dòng, mắt lạc dòng khi xuống dòng (ngưỡng đọc 45–75 ký tự). */ .bc-r-tren { --bc-huong-r: column; --bc-quan-r: nowrap; --bc-canh-r: stretch; --bc-co-gt-r: 0 0 auto; --bc-co-the-r: 0 0 auto; --bc-toi-da-r: 560px; --bc-khe-r: var(--kc-6); --bc-tt-gt-r: 2; --bc-tt-the-r: 1; } .bc-r-duoi { --bc-huong-r: column; --bc-quan-r: nowrap; --bc-canh-r: stretch; --bc-co-gt-r: 0 0 auto; --bc-co-the-r: 0 0 auto; --bc-toi-da-r: 560px; --bc-khe-r: var(--kc-6); --bc-tt-gt-r: 1; --bc-tt-the-r: 2; } /* --- 1c. Bốn bộ giá trị cho ĐIỆN THOẠI ------------------------------------ Hai cột ở màn hẹp: cho phép XUỐNG DÒNG. Còn đủ chỗ cho hai khối 260px thì hai cột, hết chỗ thì mỗi khối một dòng — ngưỡng nằm trong chính phép đo của flex, không phải một mốc @media nữa. Khi gộp về một dòng, thứ tự vẫn theo lựa chọn: "trái" → hộp đứng trước, "phải" → hộp đứng sau. Tỉ lệ 3:2 nghiêng về hộp đăng nhập, KHÔNG chia đều: hộp có ô nhập và nút nên cần bề rộng hơn khối chữ giới thiệu bên cạnh. */ .bc-h-trai { --bc-huong-h: row; --bc-quan-h: wrap; --bc-canh-h: center; --bc-co-gt-h: 2 1 260px; --bc-co-the-h: 3 1 260px; --bc-toi-da-h: 900px; --bc-khe-h: var(--kc-5); --bc-tt-gt-h: 2; --bc-tt-the-h: 1; } .bc-h-phai { --bc-huong-h: row; --bc-quan-h: wrap; --bc-canh-h: center; --bc-co-gt-h: 2 1 260px; --bc-co-the-h: 3 1 260px; --bc-toi-da-h: 900px; --bc-khe-h: var(--kc-5); --bc-tt-gt-h: 1; --bc-tt-the-h: 2; } .bc-h-tren { --bc-huong-h: column; --bc-quan-h: nowrap; --bc-canh-h: stretch; --bc-co-gt-h: 0 0 auto; --bc-co-the-h: 0 0 auto; --bc-toi-da-h: 420px; --bc-khe-h: var(--kc-6); --bc-tt-gt-h: 2; --bc-tt-the-h: 1; } .bc-h-duoi { --bc-huong-h: column; --bc-quan-h: nowrap; --bc-canh-h: stretch; --bc-co-gt-h: 0 0 auto; --bc-co-the-h: 0 0 auto; --bc-toi-da-h: 420px; --bc-khe-h: var(--kc-6); --bc-tt-gt-h: 1; --bc-tt-the-h: 2; } /* --- 1d. Chọn bộ nào có hiệu lực ------------------------------------------ TRANG THẬT: theo bề rộng cửa sổ, mốc 860px — ĐÚNG mốc @media mà site.css đã dùng cho .khoi-cong. Không đặt mốc mới. */ @media (min-width: 861px) { .bc-cong { --bc-huong: var(--bc-huong-r); --bc-quan: var(--bc-quan-r); --bc-canh: var(--bc-canh-r); --bc-co-gt: var(--bc-co-gt-r); --bc-co-the: var(--bc-co-the-r); --bc-toi-da: var(--bc-toi-da-r); --bc-khe: var(--bc-khe-r); --bc-tt-gt: var(--bc-tt-gt-r); --bc-tt-the: var(--bc-tt-the-r); } } @media (max-width: 860px) { .bc-cong { --bc-huong: var(--bc-huong-h); --bc-quan: var(--bc-quan-h); --bc-canh: var(--bc-canh-h); --bc-co-gt: var(--bc-co-gt-h); --bc-co-the: var(--bc-co-the-h); --bc-toi-da: var(--bc-toi-da-h); --bc-khe: var(--bc-khe-h); --bc-tt-gt: var(--bc-tt-gt-h); --bc-tt-the: var(--bc-tt-the-h); } } /* KHUNG XEM TRƯỚC: bắt buộc một chế độ, không hỏi bề rộng cửa sổ. Chỉ gán biến — không chép lại một dòng hình học nào, nên xem trước không thể lệch bản thật. */ .bc-buoc-rong { --bc-huong: var(--bc-huong-r); --bc-quan: var(--bc-quan-r); --bc-canh: var(--bc-canh-r); --bc-co-gt: var(--bc-co-gt-r); --bc-co-the: var(--bc-co-the-r); --bc-toi-da: var(--bc-toi-da-r); --bc-khe: var(--bc-khe-r); --bc-tt-gt: var(--bc-tt-gt-r); --bc-tt-the: var(--bc-tt-the-r); } .bc-buoc-hep { --bc-huong: var(--bc-huong-h); --bc-quan: var(--bc-quan-h); --bc-canh: var(--bc-canh-h); --bc-co-gt: var(--bc-co-gt-h); --bc-co-the: var(--bc-co-the-h); --bc-toi-da: var(--bc-toi-da-h); --bc-khe: var(--bc-khe-h); --bc-tt-gt: var(--bc-tt-gt-h); --bc-tt-the: var(--bc-tt-the-h); } /* site.css giấu dấu và danh sách điểm nhấn, và căn giữa chữ, khi màn dưới 861px. Bản xem trước chế độ điện thoại phải giấu đúng bấy nhiêu, nếu không quản trị nhìn thấy một trang KHÁC trang mà người dùng điện thoại thật sẽ thấy. */ .bc-buoc-hep .cong-dau, .bc-buoc-hep .cong-diem { display: none; } .bc-buoc-hep .cong-gioi-thieu { text-align: center; } /* --- 1e. Giữ chữ giới thiệu đọc được ở MỌI vị trí ------------------------- .cong-mo-ta của site.css bó 46ch và căn trái. Khi khối giới thiệu xếp dọc và căn giữa (tren/duoi, hoặc chế độ điện thoại) thì bó 46ch làm khối lệch hẳn sang trái trong một vùng đã căn giữa. */ .bc-r-tren .cong-gioi-thieu, .bc-r-duoi .cong-gioi-thieu { text-align: center; } .bc-r-tren .cong-mo-ta, .bc-r-duoi .cong-mo-ta, .bc-buoc-hep .cong-mo-ta { max-width: none; } .bc-r-tren .cong-dau, .bc-r-duoi .cong-dau { justify-content: center; } .bc-r-tren .cong-diem, .bc-r-duoi .cong-diem { max-width: 46ch; margin: 0 auto; text-align: left; } /* Cùng luật cho TRANG THẬT ở chế độ điện thoại (site.css đã có; nhắc lại ở đây chỉ phần .cong-mo-ta vì luật 46ch của nó không nằm trong khối @media nào). */ @media (max-width: 860px) { .bc-cong .cong-mo-ta { max-width: none; } } /* ============================================================================= 1f. CHỮ GIỚI THIỆU TRÊN NỀN HOẠ TIẾT Đo trên ảnh chụp trang đăng nhập THẬT: ẩn khối nội dung đi rồi lấy điểm ảnh SÁNG NHẤT trong đúng hình chữ nhật của TỪNG DÒNG CHỮ (đo cả khối là đo lẫn những chỗ không có chữ nào). Ở 1440 điểm ảnh: chỉ dải chuyển sắc, không hoạ tiết ... rgb( 20, 47,113) hoạ tiết bản cũ ................... rgb(113,128,159) → chữ TRẮNG chỉ 3,89:1, còn #a9c1f5 của dòng tên cơ quan chỉ 2,16:1 Nguyên nhân nằm ở CHÍNH HOẠ TIẾT chứ không ở màu chữ: nhiều lớp mờ chồng lên nhau đúng chỗ có chữ, cộng lại thành một lớp trắng dày khoảng 0,40 trên sàn. Nên sửa ở gốc — hạ đồng loạt độ mờ trong `nen-dang-nhap.svg` còn 0,6 lần, xem chú thích trong chính tệp SVG — chứ KHÔNG phủ thêm một lớp tối lên trên. Phủ tối là chữa triệu chứng: nó làm cả trang xỉn đi mà vẫn để nguyên chỗ sáng nhất là chỗ sáng nhất. Ở đây chỉ còn việc nâng chữ giới thiệu lên hai tông sáng sẵn có của hệ (--xanh-nhat #eff4ff gần trắng quá, mất bậc so với tiêu đề, nên không dùng). Số đo sau khi hạ hoạ tiết: xem bảng trong ADR-0021. */ .cong-mo-ta { color: #e7eeff; } .cong-diem > li { color: #e7eeff; } .cong-co-quan { color: #dce8ff; } /* ============================================================================= 2. HÌNH THỨC HỘP ĐĂNG NHẬP --------------------------------------------------------------------------- Mọi màu lấy từ biến :root của site.css / control-chung.css — không có màu lạ. Số đo tương phản (tính theo WCAG 2.1, nền thẻ #ffffff): tiêu đề --chu #16202e ........ 16,40:1 nhãn ô #334155 .............. 10,35:1 (control-chung) chữ trong ô #1e293b ........... 14,63:1 (control-chung) phụ đề + chân thẻ #475569 ...... 7,58:1 (trước: #64748b = 4,76:1) viền ô nhập #8a94a3 ............ 3,07:1 (control-chung; ngưỡng 3:1 cho thành phần) nút: chữ trắng trên #1d4ed8 .... 6,70:1 dải nhấn #1d4ed8 trên trắng .... 6,70:1 ============================================================================= */ .the-cong { /* Nới đệm 24 → 32: thẻ này là việc DUY NHẤT của trang, không phải một thẻ trong màn hình nhập liệu dày. Đệm rộng là thứ tách nó khỏi nền và làm nó ra dáng hộp. */ padding: var(--kc-7); /* Viền cũ là rgba(255,255,255,.5) — trắng trên nền trắng, tức không có viền, mép thẻ phụ thuộc hoàn toàn vào bóng. Thay bằng một vòng tối rất nhạt: mép thẻ hiện rõ cả khi người dùng tắt hiệu ứng bóng hoặc in ra giấy. */ border: 1px solid rgba(15, 23, 42, .08); /* Dải nhấn 4px ở đỉnh thẻ, màu chính của hệ thống. Nó làm hai việc: neo mắt vào đúng chỗ bắt đầu đọc, và nối hộp đăng nhập với dải đầu trang mà người dùng sẽ thấy ngay sau khi vào được. Dựng bằng border-top chứ không bằng ::before để không đẻ thêm một lớp phủ lên vùng bấm. */ border-top: 4px solid var(--xanh); border-radius: var(--bo-3); } /* Tiêu đề lên một bậc (22 → 26px): trên trang đăng nhập nó là tiêu đề DUY NHẤT, không cạnh tranh với tiêu đề trang nào khác, và phải đọc được từ xa ở máy trạm treo tường. */ .the-cong h1 { font-size: var(--cc-8); line-height: 1.25; letter-spacing: -0.01em; color: var(--chu); } /* Phụ đề và chân thẻ: 12–13px là cỡ nhỏ, nên nâng tương phản từ 4,76:1 lên 7,58:1. 4,76:1 chỉ vừa đủ ngưỡng AA — với chữ 12px thì "vừa đủ" là chưa đủ. */ .the-cong-phu { color: #475569; margin-bottom: var(--kc-6); } .the-cong-chan { color: #475569; } /* Thông báo trong hộp (phiên bị thu hồi, sai mật khẩu) phải nằm TRÊN biểu mẫu và cách nó ra, chứ không dính vào nhãn ô đầu tiên. */ .the-cong > .loi, .the-cong > .canh-bao, .the-cong > .thanh-cong { margin: 0 0 var(--kc-4); } /* Dòng "ghi nhớ đăng nhập" đứng riêng một tầng, cách ô mật khẩu đúng một bậc khoảng cách — trước đây nó dính ngay dưới ô nên đọc thành phần của ô mật khẩu. */ .the-cong .o-ghi-nho { margin-top: var(--kc-2); } @media (max-width: 860px) { /* Màn hẹp trả đệm về 24px: 32px mỗi bên ăn mất 64px trong 390px bề ngang. */ .the-cong { padding: var(--kc-6); } .the-cong h1 { font-size: var(--cc-7); } } /* Cùng một điều chỉnh cho khung xem trước chế độ điện thoại. */ .bc-buoc-hep .the-cong { padding: var(--kc-6); } .bc-buoc-hep .the-cong h1 { font-size: var(--cc-7); }