File size: 4,952 Bytes
405b9b5 5442503 ba59cdf 5442503 405b9b5 5442503 405b9b5 5442503 405b9b5 5442503 405b9b5 5442503 466b55b 589b109 a97dde4 b405141 6592fb2 8b3226f 405b9b5 8b3226f 405b9b5 8b3226f 405b9b5 8b3226f 405b9b5 8b3226f 405b9b5 8b3226f 6592fb2 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 |
: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;
}
|