/* ===================================================================== * MÀU THƯƠNG HIỆU DROPMALL * * Lấy trực tiếp từ logo (upload/media/logodropmal.png): * vàng #FFC622 - xám #696C65 * * Đổi màu thương hiệu ở ĐÚNG MỘT CHỖ: khối --brand-* ngay bên dưới. * Tệp này nạp NGAY SAU bootstrap.min.css ở cả trang bán hàng và CRM, * và ánh xạ lại toàn bộ màu "primary" của Bootstrap sang màu vàng. * Trang quản trị chạy theme riêng (Sash) nên khai màu ở * administrator/assets/css/custom.css - cùng bộ mã màu này. * * --------------------------------------------------------------- * QUY TẮC BẮT BUỘC KHI DÙNG MÀU VÀNG * * #FFC622 chỉ được dùng làm NỀN. Chữ đè lên nền vàng phải lấy màu * tối --brand-ink. * * chữ trắng trên #FFC622 -> tương phản 1,57 : 1 KHÔNG ĐỌC ĐƯỢC * chữ #1B2431 trên #FFC622 -> tương phản 9,94 : 1 đạt AAA * * Mức tối thiểu của WCAG AA là 4,5:1, nên chữ trắng trên vàng vừa * sai chuẩn vừa lóa mắt khi xem ngoài trời hoặc trên màn hình rẻ tiền. * * Muốn dùng sắc vàng làm CHỮ trên nền trắng thì phải lấy --brand-text * (#8A6100, 5,54:1), không được lấy màu vàng gốc (1,57:1). * ================================================================== */ :root{ /* --- màu gốc từ logo --- */ --brand: #FFC622; /* vàng logo - chỉ làm NỀN */ --brand-grey: #696C65; /* xám của dấu « trong logo */ /* --- các sắc độ dùng cho trạng thái --- */ --brand-hover: #F0B400; --brand-active: #D89E00; --brand-soft: #FFF4D4; /* nền nhạt cho nhãn, vùng nhấn */ --brand-line: #F2D98A; /* viền nhạt cùng tông */ /* --- màu chữ --- */ --brand-ink: #1B2431; /* chữ đặt TRÊN nền vàng 9,94:1 */ --brand-text: #8A6100; /* sắc vàng đủ đậm để LÀM CHỮ trên nền trắng 5,54:1 */ --brand-text-2: #6B4B00; /* đậm hơn, dùng khi rê chuột 7,98:1 */ --brand-dark: #26231E; /* nền tối ấm hợp với vàng - chữ trắng 15,65:1 */ --brand-rgb: 255,198,34; --brand-text-rgb: 138,97,0; /* --- ánh xạ vào biến của Bootstrap 5.3 --- */ --bs-primary: #FFC622; --bs-primary-rgb: 255,198,34; --bs-link-color: var(--brand-text); --bs-link-color-rgb: 138,97,0; --bs-link-hover-color: var(--brand-text-2); --bs-link-hover-color-rgb: 107,75,0; } /* ===================================================================== * NÚT * Bootstrap 5.3 dựng nút bằng biến --bs-btn-*, nên chỉ cần khai lại * các biến đó, không phải ghi đè từng thuộc tính bằng !important. * ================================================================== */ .btn-primary{ --bs-btn-color: var(--brand-ink); --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand); --bs-btn-hover-color: var(--brand-ink); --bs-btn-hover-bg: var(--brand-hover); --bs-btn-hover-border-color: var(--brand-hover); --bs-btn-focus-shadow-rgb: var(--brand-rgb); --bs-btn-active-color: var(--brand-ink); --bs-btn-active-bg: var(--brand-active); --bs-btn-active-border-color: var(--brand-active); --bs-btn-disabled-color: var(--brand-ink); --bs-btn-disabled-bg: var(--brand); --bs-btn-disabled-border-color: var(--brand); } .btn-outline-primary{ --bs-btn-color: var(--brand-text); --bs-btn-border-color: var(--brand-text); --bs-btn-hover-color: var(--brand-ink); --bs-btn-hover-bg: var(--brand); --bs-btn-hover-border-color: var(--brand); --bs-btn-focus-shadow-rgb: var(--brand-rgb); --bs-btn-active-color: var(--brand-ink); --bs-btn-active-bg: var(--brand); --bs-btn-active-border-color: var(--brand); --bs-btn-disabled-color: var(--brand-text); --bs-btn-disabled-border-color: var(--brand-text); } .btn-link{ --bs-btn-color: var(--brand-text); --bs-btn-hover-color: var(--brand-text-2); --bs-btn-active-color: var(--brand-text-2); } /* ===================================================================== * TIỆN ÍCH MÀU * Mỗi chỗ đặt nền vàng đều kèm màu chữ tối - không để rơi vào * màu chữ trắng mặc định của Bootstrap. * ================================================================== */ .text-primary, .text-primary-emphasis, .link-primary{ color:var(--brand-text)!important; } .link-primary:hover, .link-primary:focus{ color:var(--brand-text-2)!important; } .bg-primary, .text-bg-primary, .badge.bg-primary{ background-color:var(--brand)!important; color:var(--brand-ink)!important; } .bg-primary-subtle{ background-color:var(--brand-soft)!important; } .border-primary{ --bs-border-opacity:1; border-color:var(--brand)!important; } .border-primary-subtle{ border-color:var(--brand-line)!important; } /* ===================================================================== * Ô NHẬP LIỆU * ================================================================== */ .form-control:focus, .form-select:focus, .form-check-input:focus{ border-color:var(--brand-hover); box-shadow:0 0 0 .25rem rgba(var(--brand-rgb),.35); } .form-check-input:checked{ background-color:var(--brand); border-color:var(--brand-active); } /* Dấu tích và chấm tròn mặc định của Bootstrap màu TRẮNG, đặt trên nền vàng thì gần như tàng hình. Vẽ lại bằng màu tối --brand-ink. */ .form-check-input:checked[type="checkbox"]{ background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%231B2431' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"); } .form-check-input:checked[type="radio"]{ background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%231B2431'/%3e%3c/svg%3e"); } .form-switch .form-check-input:checked{ background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%231B2431'/%3e%3c/svg%3e"); } .form-range::-webkit-slider-thumb{ background-color:var(--brand); } .form-range::-moz-range-thumb{ background-color:var(--brand); } /* ===================================================================== * ĐIỀU HƯỚNG, DANH SÁCH, PHÂN TRANG * ================================================================== */ .pagination{ --bs-pagination-color: var(--brand-text); --bs-pagination-hover-color: var(--brand-ink); --bs-pagination-hover-bg: var(--brand-soft); --bs-pagination-focus-color: var(--brand-ink); --bs-pagination-focus-bg: var(--brand-soft); --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(var(--brand-rgb),.35); --bs-pagination-active-color: var(--brand-ink); --bs-pagination-active-bg: var(--brand); --bs-pagination-active-border-color:var(--brand); } .nav-pills{ --bs-nav-pills-link-active-bg: var(--brand); --bs-nav-pills-link-active-color:var(--brand-ink); } .nav-tabs .nav-link.active{ color:var(--brand-text); } .dropdown-menu{ --bs-dropdown-link-active-bg: var(--brand); --bs-dropdown-link-active-color:var(--brand-ink); } .list-group{ --bs-list-group-active-bg: var(--brand); --bs-list-group-active-border-color:var(--brand); --bs-list-group-active-color: var(--brand-ink); --bs-list-group-action-hover-bg: var(--brand-soft); } .accordion{ --bs-accordion-active-bg: var(--brand-soft); --bs-accordion-active-color: var(--brand-text-2); --bs-accordion-btn-focus-box-shadow:0 0 0 .25rem rgba(var(--brand-rgb),.35); } .progress{ --bs-progress-bar-bg: var(--brand); --bs-progress-bar-color:var(--brand-ink); } .alert-primary{ --bs-alert-bg: var(--brand-soft); --bs-alert-border-color:var(--brand-line); --bs-alert-color: #5F4300; --bs-alert-link-color: var(--brand-text-2); } .spinner-border.text-primary, .spinner-grow.text-primary{ color:var(--brand-active)!important; } /* Chấm chỉ vị và mũi tên của carousel vốn màu trắng - giữ nguyên, nhưng nếu tấm ảnh nền sáng thì cần lớp phủ tối, xem .shop-slider-cap. */