/* * Trang doc chuong (PC) - nut cuon len dau, thanh danh sach chuong, va vi tri * nut bao loi. * * File RIENG chu khong sua p.css: p.css co BOM o dau file va dang duoc dung * chung, con day la mot lop de len tren. Nap SAU p.css trong template. * * BOI CANH MAU: vung doc co nen xam giua rgb(85,85,85) o CA hai theme - do * that tren trang, khong phai suy tu CSS. Chi va thanh dau moi doi mau * theo theme. Vi vay cac phan tu o day lay mau nen chinh tu mot bang co dinh * hop voi nen xam, va chi tinh chinh nhe o che do toi. */ /* ===================================================================== 1. NUT CUON LEN DAU ===================================================================== */ /* Truoc day trang doc chuong KHONG co nut nay - da kiem tren trang that: khong mot phan tu nao khop .index-right-float / [class*=gotop] / #backTop. Cac trang khac co no qua pub/base.html, nhung trang doc chuong khong ke thua base (no co / rieng) nen bi bo sot. Chuong dai 71.000px thi cuon tay ve dau la mot quang duong that. */ .tt-gotop { position: fixed; right: 26px; bottom: 34px; z-index: 60; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; padding: 0; border: 1px solid rgba(255, 255, 255, .18); border-radius: 50%; background: rgba(32, 34, 40, .82); color: #fff; cursor: pointer; /* Mo san, khong nhan su kien chuot, va dich xuong mot chut. JS go class .is-off khi da cuon du xa. Dung opacity+transform thay vi display:none de co hieu ung vao/ra. */ opacity: 1; transform: translateY(0); transition: opacity .22s ease, transform .22s ease, background-color .18s ease; /* Nen mo phia sau: nut nam de tren anh truyen, ma anh thi mau gi cung co. Khong co lop nay thi mui ten chim mat tren nhung trang anh sang. */ -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 4px 14px rgba(0, 0, 0, .35); } .tt-gotop.is-off { opacity: 0; transform: translateY(12px); pointer-events: none; } .tt-gotop:hover { background: #fd113a; border-color: #fd113a; } .tt-gotop:active { transform: translateY(2px); } .tt-gotop svg { width: 20px; height: 20px; display: block; } :where(html[data-theme="dark"]) .tt-gotop { background: rgba(18, 20, 25, .86); border-color: rgba(255, 255, 255, .12); } /* Nguoi da bat "giam chuyen dong" trong he dieu hanh: bo hieu ung va cuon thang. Cuon muot qua 71.000px la mot quang duong dai - voi nguoi nhay cam chuyen dong thi no thuc su kho chiu, khong phai chuyen tham my. */ @media (prefers-reduced-motion: reduce) { .tt-gotop { transition: none; } } /* ===================================================================== 2. THANH DANH SACH CHUONG ===================================================================== */ /* * VAN DE DA DO DUOC TREN TRANG THAT (1440x900): * * .sidebar-main top:165px, bottom:200px -> cao 535px * .sidebar-content -> cao 495px, overflow:hidden * .mCustomScrollBox slimScroll ep height:560px, scrollHeight 990px * * Tuc la khung cuon (560px) CAO HON o chua no (495px), ma o chua lai * overflow:hidden. Hau qua: 65px duoi cung bi cat mat, VA thanh cuon cua * slimScroll - duoc dat ben trong khung 560px - cung nam trong phan bi cat * nen khong bao gio nhin thay. Truyen nay co 22 chuong, chi khoang 11 chuong * voi toi duoc; phan con lai khong co dau hieu nao cho biet la con. * * Cach sua: bo han slimScroll o day va dung cuon that cua trinh duyet. Mot * thu vien de tao thanh cuon gia, roi thanh cuon gia do bi cat mat - thay * bang overflow-y:auto la het, va con bo duoc mot file JS khoi trang. * * bottom cung doi tu 200px xuong 24px: 200px kia khong che gi ca, no chi lam * danh sach ngan lai vo co. */ .read-section.sidebar-main { top: 76px; bottom: 24px; width: 236px; left: -236px; border-radius: 0 10px 10px 0; box-shadow: 4px 0 24px rgba(0, 0, 0, .38); overflow: visible; /* Truot bang CSS thay cho jQuery .animate(): mot phep chuyen tiep chay o luong hop thanh cua trinh duyet, con .animate() thi dat lai thuoc tinh left o moi khung hinh tu JavaScript. Tren trang dang cuon 98 tam anh thi khac biet nhin thay duoc. */ transition: left .22s ease; } @media (prefers-reduced-motion: reduce) { .read-section.sidebar-main { transition: none; } } /* Dau thanh: truoc day la mot dai #333 cao 40px RONG KHONG - hai the ben trong deu khong co noi dung. Gio no mang tieu de, so chuong va nut dong, tuc la co ly do ton tai. */ .read-section .sidebar-header { display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 0 8px 0 14px; background: #2b2d33; border-top-right-radius: 10px; color: #fff; font-size: 14px; } .sidebar-title { font-weight: 600; white-space: nowrap; } .sidebar-count { margin-left: 6px; color: #9aa0aa; font-weight: 400; font-size: 12px; } .sidebar-close { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: #b7bcc4; font-size: 20px; line-height: 1; cursor: pointer; } .sidebar-close:hover { background: rgba(255, 255, 255, .1); color: #fff; } /* Bo padding-left:20px cua p.css - no day danh sach lech khoi thanh, do duoc .mCustomScrollBox bat dau o x=-192 trong khi thanh o x=-212. */ .read-section .sidebar-content { top: 44px; bottom: 0; padding-left: 0; background: #34363c; border-bottom-right-radius: 10px; overflow: hidden; } /* Cuon THAT, thay cho slimScroll. height:100% de no dung bang o chua - day chinh la cho ban cu sai (560px trong mot o 495px). */ .read-section .mCustomScrollBox { width: 100%; height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #6a6e78 transparent; } .read-section .mCustomScrollBox::-webkit-scrollbar { width: 8px; } .read-section .mCustomScrollBox::-webkit-scrollbar-thumb { background: #6a6e78; border-radius: 4px; } .read-section .mCustomScrollBox::-webkit-scrollbar-thumb:hover { background: #868b96; } .read-section .mCustomScrollBox ul { margin: 0; padding: 6px 0; list-style: none; } .read-section .sidebar-content li a { display: block; padding: 9px 14px; color: #c9ccd2; font-size: 13px; line-height: 1.4; text-decoration: none; border-left: 3px solid transparent; } .read-section .sidebar-content li a:hover { background: rgba(255, 255, 255, .07); color: #fff; } /* Chuong dang doc: truoc day chi doi mau chu sang cam, rat de truot mat trong mot danh sach dai. Them nen va vach trai de no bat len ngay. */ .read-section .sidebar-content li a.active { background: rgba(253, 17, 58, .14); border-left-color: #fd113a; color: #ff6b85; font-weight: 600; } /* --- Tay keo ------------------------------------------------------------ */ /* * Ban cu ve chu "CHƯƠNG" doc bang mot khoi rong 12px cong khoang HAI MUOI * khai bao !important (word-break, hyphens, white-space o du cac tien to) de * ep moi chu xuong mot dong. writing-mode lam dung viec do bang mot dong, va * ra ket qua deu hon - chu khong bi lech theo be rong tung ky tu. * * Vung bam cung rong ra: 12px la mot muc tieu chuot rat kho trung. */ .read-section .sidebar-btn { right: -34px; top: 50%; width: 34px; height: auto; margin-top: -62px; padding: 14px 0; display: flex; flex-direction: column; align-items: center; gap: 8px; background: #2b2d33; color: #d2d5db; border-radius: 0 8px 8px 0; box-shadow: 2px 0 10px rgba(0, 0, 0, .3); transition: background-color .18s ease, color .18s ease; } .read-section .sidebar-btn:hover { background: #fd113a; color: #fff; } .sidebar-btn-icon { width: 16px; height: 16px; display: block; flex: 0 0 auto; } .sidebar-btn-text { writing-mode: vertical-rl; text-orientation: upright; letter-spacing: 2px; font-size: 13px; line-height: 1; white-space: nowrap; } /* ===================================================================== 3. NUT BAO LOI CHUONG - KHOANG CACH ===================================================================== */ /* * .header .shareBtn co `padding: 0 32px` tu pc_read.css. Do tren trang that: * o boc rong 204px trong khi nut ben trong chi 120px, nen giua "Bao loi * chuong" (ket thuc x=1012) va "Quet de doc" (bat dau x=1084) la 72px - gap * ba lan khoang cach 20px ma hang nut dinh dat, va nhin nhu hai nut khong * lien quan gi den nhau. * * Bo padding di thi khoang cach do chinh `gap` cua flex quyet dinh, va hai * nut dung canh nhau dung nhu y muon ban dau. */ .header .shareBtn { padding: 0; display: flex; align-items: center; }