| :root{ | |
| --bg:#f7f9fc; --card:#ffffff; --ink:#222; --line:#e5e7eb; --thead:#f1f3f6; --brand:#0d6efd; | |
| } | |
| html,body{height:100%} | |
| body{ | |
| font-family:"Tahoma", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; | |
| margin:0; background:var(--bg); color:var(--ink); | |
| } | |
| .theme-btn{ | |
| position:fixed; inset-inline-start:14px; inset-block-start:14px; z-index:20; | |
| } | |
| .container{max-width:1000px; margin:28px auto 24px; padding:0 14px;} | |
| h1{text-align:center; font-size:24px; color:#2c3e50; margin:6px 0 8px;} | |
| .credit{text-align:center; font-size:14px; color:#666; margin-bottom:14px;} | |
| .count{font-weight:700; text-align:center; margin:8px 0 12px;} | |
| .tools{display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; margin:6px 0 10px;} | |
| .search-wrap{position:relative; flex:1; min-width:240px; max-width:560px;} | |
| #searchBox{ | |
| width:100%; padding:12px 40px 12px 12px; | |
| border:1px solid var(--line); border-radius:10px; font-size:16px; background:#fff; | |
| transition:border-color .2s, box-shadow .2s; | |
| } | |
| #searchBox:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(13,110,253,.12);} | |
| .clear-btn{ | |
| position:absolute; right:8px; top:50%; transform:translateY(-50%); | |
| width:28px; height:28px; border:none; border-radius:6px; background:transparent; cursor:pointer; color:#888; font-size:16px; | |
| } | |
| .btn{padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:#fff; cursor:pointer; font-size:14px;} | |
| .card{ | |
| background:var(--card); border:1px solid var(--line); border-radius:16px; | |
| box-shadow:0 10px 22px rgba(13,110,253,0.06), 0 3px 8px rgba(0,0,0,0.05); | |
| padding:12px; | |
| } | |
| .table-wrap{overflow-x:auto;} | |
| table{ | |
| width:100%; min-width:540px; border-collapse:collapse; background:var(--card); | |
| box-shadow:0 2px 6px rgba(0,0,0,.05); | |
| } | |
| thead th{ | |
| position:sticky; top:0; z-index:1; | |
| background:var(--thead); color:#333; font-weight:700; text-align:center; | |
| padding:14px 10px; border-bottom:2px solid var(--line); | |
| } | |
| td{ | |
| padding:14px 10px; | |
| text-align:center; vertical-align:middle; border-bottom:1px solid var(--line); | |
| } | |
| tbody tr:nth-child(even) td{background:rgba(0,0,0,.02);} | |
| tbody tr:hover td{background:#eaf2fd; transition:background .2s;} | |
| th.thin, td.thin{width:36px;} | |
| .color-bar{display:inline-block; width:12px; height:12px; border-radius:3px; margin-left:6px; vertical-align:middle;} | |
| mark.hl{background:#fff59d; padding:0 2px; border-radius:2px;} | |
| .pagination{margin:16px 2px 2px; text-align:center;} | |
| .pagination .page-btn{ | |
| background:var(--brand); color:#fff; border:none; | |
| margin:0 5px; padding:12px 18px; font-size:16px; | |
| border-radius:10px; cursor:pointer; transition:background .2s, transform .05s; | |
| } | |
| .pagination .page-btn:hover{background:#0b5ed7;} | |
| .pagination .page-btn:active{transform:scale(.98);} | |
| .pagination .page-btn:disabled{background:#c7cfdb; cursor:not-allowed;} | |
| .pagination .page-btn.ghost{background:#fff; color:#333; border:1px solid var(--line);} | |
| .pagination .dots{margin:0 6px; color:#888;} | |
| .skeleton .sk-row{ | |
| height:16px; margin:10px auto; max-width:680px; border-radius:8px; | |
| background:linear-gradient(90deg, #eef2f6, #f7f9fc, #eef2f6); | |
| background-size:200% 100%; animation:sk 1.2s infinite linear; | |
| } | |
| @keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}} | |
| .no-results{ | |
| text-align:center; font-size:18px; color:#888; padding:26px 8px; | |
| } | |
| .footer{text-align:center; color:#888; font-size:13px; margin:24px 0 30px;} | |
| .dark{ | |
| --bg:#0e1116; --card:#151a22; --ink:#e9eef6; --line:#273142; --thead:#1b2330; --brand:#6ea8fe; | |
| } | |
| .sr-only{ | |
| position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; | |
| } | |
| @media (max-width:768px){ | |
| th,td{font-size:14px; padding:12px 8px;} | |
| h1{font-size:20px;} | |
| .theme-btn{inset-inline-start:10px; inset-block-start:10px;} | |
| .table-wrap { | |
| width: 100%; | |
| overflow-x: auto; | |
| -webkit-overflow-scrolling: touch; | |
| } | |
| @media (max-width: 768px) { | |
| table { | |
| min-width: 100%; | |
| table-layout: auto; | |
| } | |
| th, td { | |
| font-size: 14px; | |
| padding: 10px 6px; | |
| white-space: nowrap; | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| th, td { | |
| font-size: 12px; | |
| padding: 8px 4px; | |
| } | |
| } | |
| table thead th:nth-child(1), | |
| table tbody td:nth-child(1){ | |
| white-space: nowrap; | |
| word-break: keep-all; | |
| direction: ltr; | |
| text-align: center; | |
| } | |
| @media (max-width: 768px){ | |
| table{ table-layout: fixed; } | |
| thead th:nth-child(1), tbody td:nth-child(1){ width: 84px; } | |
| thead th:nth-child(2), tbody td:nth-child(2){ width: auto; } | |
| th, td{ font-size: 14px; padding: 12px 8px; } | |
| } | |
| @media (max-width: 480px){ | |
| thead th:nth-child(1), tbody td:nth-child(1){ width: 72px; } | |
| th, td{ font-size: 13px; padding: 10px 6px; } | |
| } | |
| table thead th:nth-child(2), | |
| table tbody td:nth-child(2){ | |
| white-space: normal; | |
| word-break: break-word; | |
| } | |
| .table-wrap{ | |
| overflow-x: auto; | |
| -webkit-overflow-scrolling: touch; | |
| } | |