/* * style.css — CSS thuần cho những thứ Tailwind CDN không lo được. * * Bốn nhóm: * 1. Animation lật thẻ 3D * 2. Spinner khi chờ API * 3. Tinh chỉnh riêng cho điện thoại (vùng bấm, chống chọn text khi vuốt) * 4. Vài tiện ích nhỏ (line-clamp, kéo thả, scrollbar) * * Dark mode KHÔNG nằm ở đây — Tailwind lo bằng class `dark` trên * (xem base.html). File này chỉ dùng `.dark ...` cho phần CSS thuần. */ /* ================================================================== */ /* 1. LẬT THẺ 3D */ /* ================================================================== */ /* * Cấu trúc HTML (xem flashcard.html): * #card-area -> perspective (đặt inline trong template) * .flip-card -> phần tử quay * .flip-face.flip-front * .flip-face.flip-back * * Cách hoạt động: cả .flip-card quay 180deg quanh trục Y. Mặt sau được * đặt sẵn ở rotateY(180deg) nên khi thẻ quay xong thì nó hướng về người xem. */ .flip-card { transform-style: preserve-3d; transition: transform 0.45s cubic-bezier(0.4, 0.2, 0.2, 1); transform: rotateY(0deg); } .flip-card.is-flipped { transform: rotateY(180deg); } .flip-face { /* Hai mặt xếp CHỒNG lên nhau, không phải cạnh nhau */ position: absolute; inset: 0; width: 100%; /* Không có dòng này thì thấy xuyên qua mặt sau (chữ bị lộn ngược) */ backface-visibility: hidden; -webkit-backface-visibility: hidden; } /* Cả hai mặt đều phải cuộn được: mặt sau vì có câu ví dụ + ghi chú + nội dung AI sinh thêm; mặt trước vì nghĩa chi tiết của một số từ dài tới 3-4 dòng, trên điện thoại nhỏ sẽ vượt quá chiều cao thẻ. */ .flip-front, .flip-back { overflow-y: auto; -webkit-overflow-scrolling: touch; } .flip-back { transform: rotateY(180deg); } /* * Safari cũ trên iOS bỏ qua backface-visibility trong một số trường hợp, * làm hai mặt đè lên nhau thành mờ mờ. Ẩn hẳn mặt không hoạt động bằng * visibility là cách chắc chắn nhất. */ .flip-card:not(.is-flipped) .flip-back, .flip-card.is-flipped .flip-front { visibility: hidden; } /* Tôn trọng thiết lập "giảm chuyển động" của hệ điều hành */ @media (prefers-reduced-motion: reduce) { .flip-card { transition: none; } } /* ================================================================== */ /* 2. SPINNER */ /* ================================================================== */ .spinner, .spinner-sm { display: inline-block; border-radius: 9999px; border-style: solid; border-color: rgb(203 213 225); /* slate-300 */ border-top-color: rgb(37 99 235); /* blue-600 */ animation: spin 0.7s linear infinite; } .spinner { width: 2rem; height: 2rem; border-width: 3px; } .spinner-sm { width: 0.9rem; height: 0.9rem; border-width: 2px; vertical-align: -0.1em; } .dark .spinner, .dark .spinner-sm { border-color: rgb(71 85 105); /* slate-600 */ border-top-color: rgb(96 165 250); /* blue-400 */ } @keyframes spin { to { transform: rotate(360deg); } } /* ================================================================== */ /* 3. ĐIỆN THOẠI */ /* ================================================================== */ /* * Vùng bấm tối thiểu 44px — mốc của Apple HIG và WCAG 2.5.5. * Áp riêng cho pointer thô (ngón tay), không áp cho chuột, để bố cục * desktop không bị phình ra vô cớ. */ @media (pointer: coarse) { button, a[href], select, summary, input[type="checkbox"] { min-height: 44px; } /* Ô đáp án trắc nghiệm cần rộng hơn nữa: bấm sai vì ngón tay to sẽ bị tính là trả lời sai — hậu quả nặng hơn bấm sai nút thường. */ .option-btn, .rating-btn { min-height: 52px; } /* Trừ các nút icon nhỏ trong thẻ (🔊 cạnh câu ví dụ) — bắt chúng cao 44px sẽ làm vỡ dòng chữ Hán bên cạnh. */ .flip-face button.text-sm, .flip-face button.text-lg { min-height: 0; padding: 0.35rem 0.5rem; } } /* * Vuốt để chuyển thẻ: nếu không tắt chọn text thì vuốt trên chữ Hán cỡ lớn * sẽ bôi đen chữ thay vì chuyển thẻ, và trên iOS còn hiện menu Copy/Look Up. */ #card-area, #rating-bar, #q-sortable { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } /* Chặn iOS tự phóng to khi focus vào input — chỉ xảy ra khi font < 16px */ @media (max-width: 640px) { input, select, textarea { font-size: 16px; } } /* Chặn cuộn ngang do lỡ tràn (chữ Hán dài, bảng, thẻ kéo thả) */ html, body { overflow-x: hidden; } /* Tắt highlight xanh khi tap trên Android */ * { -webkit-tap-highlight-color: transparent; } /* Chữ Hán cỡ lớn: giãn nhẹ để nhìn rõ nét chữ — đúng nhu cầu "hay quên mặt chữ" */ .font-zh { letter-spacing: 0.02em; } /* ================================================================== */ /* 4. TIỆN ÍCH NHỎ */ /* ================================================================== */ /* line-clamp: Tailwind CDN có sẵn class này, nhưng khai báo lại để chắc chắn hoạt động cả khi CDN chưa tải xong (mất mạng giữa lúc mở trang). */ .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Thẻ đang được kéo trong bài thi sắp xếp câu (SortableJS gán class này) */ #q-sortable > div:active { transform: scale(1.05); } .sortable-chosen { border-color: rgb(37 99 235) !important; } /* Ô kéo thả rỗng: nhắc người dùng đây là vùng thả được */ #q-sortable:empty::after { content: "Đang tải các thẻ từ..."; color: rgb(148 163 184); font-size: 0.8rem; } /* Scrollbar mảnh cho mặt sau thẻ (desktop) */ .flip-back::-webkit-scrollbar { width: 6px; } .flip-back::-webkit-scrollbar-thumb { background: rgb(203 213 225); border-radius: 3px; } .dark .flip-back::-webkit-scrollbar-thumb { background: rgb(71 85 105); } /* Viền focus rõ ràng khi dùng bàn phím (Tab), không hiện khi bấm chuột */ :focus-visible { outline: 2px solid rgb(37 99 235); outline-offset: 2px; } .dark :focus-visible { outline-color: rgb(96 165 250); } /* Thẻ kbd trong phần gợi ý bàn phím */ kbd { font-family: ui-monospace, monospace; font-size: 0.7rem; border-color: rgb(203 213 225); } .dark kbd { border-color: rgb(71 85 105); } /* Khi in (ví dụ muốn in danh sách từ yếu ra giấy mang vào xưởng) */ @media print { header, nav, #rating-bar, #toast-box, button { display: none !important; } .flip-card, .flip-face { position: static; transform: none !important; visibility: visible !important; } }