This commit is contained in:
make
2025-12-31 00:49:32 +08:00
parent ae57b68f99
commit eb8c097777
709 changed files with 39727 additions and 1041 deletions

View File

@@ -0,0 +1,14 @@
.__PFX__-pager {
display:flex;
justify-content:center;
gap:8px;
margin:24px 0;
}
.__PFX__-pager a {
text-decoration:none;
cursor:pointer;
}
.__PFX__-pager a.disabled {
pointer-events:none;
opacity:.4;
}

View File

@@ -0,0 +1,129 @@
/* Pager base: __PFX__ replaced by CssBuilder
Colors do NOT hardcode: relies on CSS vars you set from theme:
--c-primary --c-accent --c-bg --c-bg-soft --c-text-primary --c-text-secondary --c-border
*/
.__PFX__-pager{
--pg-gap: 8px;
--pg-pad: 6px 10px;
--pg-r: 12px;
--pg-bd: var(--c-border, rgba(0,0,0,.12));
--pg-fg: var(--c-text-primary, #111);
--pg-fg2: var(--c-text-secondary, #666);
--pg-bg: var(--c-bg-soft, #f1f5f9);
--pg-ac: var(--c-primary, #3b82f6);
--pg-ac2: var(--c-accent, #f97316);
display:flex;
align-items:center;
justify-content:center;
gap: var(--pg-gap);
margin: 18px 0;
color: var(--pg-fg);
flex-wrap: wrap;
}
.__PFX__-pager .__PFX__-pg{
display:flex;
align-items:center;
justify-content:center;
gap: var(--pg-gap);
padding: 0;
margin: 0;
list-style:none;
flex-wrap: wrap;
}
.__PFX__-pager .__PFX__-pg-it{ display:inline-flex; }
.__PFX__-pager .__PFX__-pg-a{
display:inline-flex;
align-items:center;
justify-content:center;
padding: var(--pg-pad);
border: 1px solid var(--pg-bd);
background: var(--pg-bg);
color: var(--pg-fg);
border-radius: var(--pg-r);
text-decoration:none;
line-height: 1;
min-width: 34px;
user-select:none;
transition: filter .15s ease, transform .15s ease;
}
.__PFX__-pager a.__PFX__-pg-a:hover{ filter: brightness(0.98); transform: translateY(-1px); }
.__PFX__-pager .__PFX__-pg-it.is-current .__PFX__-pg-a{
background: color-mix(in srgb, var(--pg-ac) 18%, var(--pg-bg));
border-color: color-mix(in srgb, var(--pg-ac) 55%, var(--pg-bd));
color: color-mix(in srgb, var(--pg-ac) 85%, var(--pg-fg));
font-weight: 600;
}
.__PFX__-pager .__PFX__-pg-it.is-disabled .__PFX__-pg-a,
.__PFX__-pager .__PFX__-pg-a[aria-disabled="true"]{
opacity: .45;
cursor: not-allowed;
pointer-events:none;
}
.__PFX__-pager .__PFX__-pg-summary{
font-size: 12px;
color: var(--pg-fg2);
padding: 4px 10px;
border: 1px dashed color-mix(in srgb, var(--pg-bd) 80%, transparent);
border-radius: 999px;
}
/* Tone (0-4) */
.__PFX__-pager.tone0{ --pg-bg: var(--c-bg-soft, #f1f5f9); }
.__PFX__-pager.tone1{ --pg-bg: color-mix(in srgb, var(--c-bg, #fff) 86%, var(--pg-ac) 14%); }
.__PFX__-pager.tone2{ --pg-bg: color-mix(in srgb, var(--c-bg, #fff) 88%, var(--pg-ac2) 12%); }
.__PFX__-pager.tone3{ --pg-bg: color-mix(in srgb, var(--c-bg, #fff) 92%, var(--pg-bd) 8%); }
.__PFX__-pager.tone4{ --pg-bg: color-mix(in srgb, var(--c-bg, #fff) 82%, var(--pg-ac) 18%); }
/* Variant knobs (v0..v19) */
.__PFX__-pager.v0 { --pg-r: 12px; --pg-gap: 8px; }
.__PFX__-pager.v1 { --pg-r: 999px; --pg-gap: 8px; }
.__PFX__-pager.v2 { --pg-r: 8px; --pg-gap: 10px; --pg-pad: 7px 12px; }
.__PFX__-pager.v3 { --pg-r: 4px; --pg-gap: 10px; --pg-pad: 7px 12px; }
.__PFX__-pager.v4 { --pg-r: 16px; --pg-gap: 6px; --pg-pad: 6px 10px; }
.__PFX__-pager.v5 { --pg-r: 999px; --pg-gap: 6px; --pg-pad: 6px 12px; }
.__PFX__-pager.v6 { --pg-r: 10px; --pg-gap: 12px; --pg-pad: 8px 12px; }
.__PFX__-pager.v7 { --pg-r: 14px; --pg-gap: 6px; --pg-pad: 6px 10px; }
.__PFX__-pager.v8 { --pg-r: 6px; --pg-gap: 8px; --pg-pad: 6px 10px; }
.__PFX__-pager.v9 { --pg-r: 999px; --pg-gap: 12px; --pg-pad: 8px 14px; }
.__PFX__-pager.v10{ --pg-r: 10px; --pg-gap: 6px; --pg-pad: 5px 10px; }
.__PFX__-pager.v11{ --pg-r: 18px; --pg-gap: 6px; --pg-pad: 5px 12px; }
.__PFX__-pager.v12{ --pg-r: 4px; --pg-gap: 14px; --pg-pad: 8px 12px; }
.__PFX__-pager.v13{ --pg-r: 12px; --pg-gap: 14px; --pg-pad: 8px 12px; }
.__PFX__-pager.v14{ --pg-r: 999px;--pg-gap: 10px; --pg-pad: 7px 14px; }
.__PFX__-pager.v15{ --pg-r: 8px; --pg-gap: 6px; --pg-pad: 6px 9px; }
.__PFX__-pager.v16{ --pg-r: 16px; --pg-gap: 10px; --pg-pad: 6px 12px; }
.__PFX__-pager.v17{ --pg-r: 999px;--pg-gap: 4px; --pg-pad: 6px 12px; }
.__PFX__-pager.v18{ --pg-r: 6px; --pg-gap: 4px; --pg-pad: 6px 10px; }
.__PFX__-pager.v19{ --pg-r: 14px; --pg-gap: 12px; --pg-pad: 8px 14px; }
/* Family subtle tweaks */
.__PFX__-pager.f02 .__PFX__-pg-a{ border-style: dashed; }
.__PFX__-pager.f03 .__PFX__-pg-a{ border-width: 2px; }
.__PFX__-pager.f04 .__PFX__-pg-a{ background: color-mix(in srgb, var(--pg-bg) 78%, transparent); backdrop-filter: blur(2px); }
.__PFX__-pager.f05 .__PFX__-pg-a{ min-width: 38px; }
/* Jumper */
.__PFX__-pager .__PFX__-pg-jump{ display:flex; align-items:center; gap:8px; margin-left: 10px; }
.__PFX__-pager .__PFX__-pg-jump label{ font-size: 12px; color: var(--pg-fg2); }
.__PFX__-pager .__PFX__-pg-inp{
width: 74px;
padding: 6px 10px;
border-radius: 10px;
border: 1px solid var(--pg-bd);
background: var(--pg-bg);
color: var(--pg-fg);
}
.__PFX__-pager .__PFX__-pg-btn{
padding: 6px 12px;
border-radius: 10px;
border: 1px solid color-mix(in srgb, var(--pg-ac) 55%, var(--pg-bd));
background: color-mix(in srgb, var(--pg-ac) 16%, var(--pg-bg));
color: color-mix(in srgb, var(--pg-ac) 85%, var(--pg-fg));
cursor:pointer;
}

View File

@@ -0,0 +1,3 @@
/* Family 01: classic numeric */
.__PFX__-pager.f01 .__PFX__-pg-a{border-radius:999px;}
.__PFX__-pager.f01 .__PFX__-pg-it.is-edge .__PFX__-pg-a{font-weight:600;}

View File

@@ -0,0 +1,129 @@
/* Pager base: __PFX__ replaced by CssBuilder
Colors do NOT hardcode: relies on CSS vars you set from theme:
--c-primary --c-accent --c-bg --c-bg-soft --c-text-primary --c-text-secondary --c-border
*/
.__PFX__-pager{
--pg-gap: 8px;
--pg-pad: 6px 10px;
--pg-r: 12px;
--pg-bd: var(--c-border, rgba(0,0,0,.12));
--pg-fg: var(--c-text-primary, #111);
--pg-fg2: var(--c-text-secondary, #666);
--pg-bg: var(--c-bg-soft, #f1f5f9);
--pg-ac: var(--c-primary, #3b82f6);
--pg-ac2: var(--c-accent, #f97316);
display:flex;
align-items:center;
justify-content:center;
gap: var(--pg-gap);
margin: 18px 0;
color: var(--pg-fg);
flex-wrap: wrap;
}
.__PFX__-pager .__PFX__-pg{
display:flex;
align-items:center;
justify-content:center;
gap: var(--pg-gap);
padding: 0;
margin: 0;
list-style:none;
flex-wrap: wrap;
}
.__PFX__-pager .__PFX__-pg-it{ display:inline-flex; }
.__PFX__-pager .__PFX__-pg-a{
display:inline-flex;
align-items:center;
justify-content:center;
padding: var(--pg-pad);
border: 1px solid var(--pg-bd);
background: var(--pg-bg);
color: var(--pg-fg);
border-radius: var(--pg-r);
text-decoration:none;
line-height: 1;
min-width: 34px;
user-select:none;
transition: filter .15s ease, transform .15s ease;
}
.__PFX__-pager a.__PFX__-pg-a:hover{ filter: brightness(0.98); transform: translateY(-1px); }
.__PFX__-pager .__PFX__-pg-it.is-current .__PFX__-pg-a{
background: color-mix(in srgb, var(--pg-ac) 18%, var(--pg-bg));
border-color: color-mix(in srgb, var(--pg-ac) 55%, var(--pg-bd));
color: color-mix(in srgb, var(--pg-ac) 85%, var(--pg-fg));
font-weight: 600;
}
.__PFX__-pager .__PFX__-pg-it.is-disabled .__PFX__-pg-a,
.__PFX__-pager .__PFX__-pg-a[aria-disabled="true"]{
opacity: .45;
cursor: not-allowed;
pointer-events:none;
}
.__PFX__-pager .__PFX__-pg-summary{
font-size: 12px;
color: var(--pg-fg2);
padding: 4px 10px;
border: 1px dashed color-mix(in srgb, var(--pg-bd) 80%, transparent);
border-radius: 999px;
}
/* Tone (0-4) */
.__PFX__-pager.tone0{ --pg-bg: var(--c-bg-soft, #f1f5f9); }
.__PFX__-pager.tone1{ --pg-bg: color-mix(in srgb, var(--c-bg, #fff) 86%, var(--pg-ac) 14%); }
.__PFX__-pager.tone2{ --pg-bg: color-mix(in srgb, var(--c-bg, #fff) 88%, var(--pg-ac2) 12%); }
.__PFX__-pager.tone3{ --pg-bg: color-mix(in srgb, var(--c-bg, #fff) 92%, var(--pg-bd) 8%); }
.__PFX__-pager.tone4{ --pg-bg: color-mix(in srgb, var(--c-bg, #fff) 82%, var(--pg-ac) 18%); }
/* Variant knobs (v0..v19) */
.__PFX__-pager.v0 { --pg-r: 12px; --pg-gap: 8px; }
.__PFX__-pager.v1 { --pg-r: 999px; --pg-gap: 8px; }
.__PFX__-pager.v2 { --pg-r: 8px; --pg-gap: 10px; --pg-pad: 7px 12px; }
.__PFX__-pager.v3 { --pg-r: 4px; --pg-gap: 10px; --pg-pad: 7px 12px; }
.__PFX__-pager.v4 { --pg-r: 16px; --pg-gap: 6px; --pg-pad: 6px 10px; }
.__PFX__-pager.v5 { --pg-r: 999px; --pg-gap: 6px; --pg-pad: 6px 12px; }
.__PFX__-pager.v6 { --pg-r: 10px; --pg-gap: 12px; --pg-pad: 8px 12px; }
.__PFX__-pager.v7 { --pg-r: 14px; --pg-gap: 6px; --pg-pad: 6px 10px; }
.__PFX__-pager.v8 { --pg-r: 6px; --pg-gap: 8px; --pg-pad: 6px 10px; }
.__PFX__-pager.v9 { --pg-r: 999px; --pg-gap: 12px; --pg-pad: 8px 14px; }
.__PFX__-pager.v10{ --pg-r: 10px; --pg-gap: 6px; --pg-pad: 5px 10px; }
.__PFX__-pager.v11{ --pg-r: 18px; --pg-gap: 6px; --pg-pad: 5px 12px; }
.__PFX__-pager.v12{ --pg-r: 4px; --pg-gap: 14px; --pg-pad: 8px 12px; }
.__PFX__-pager.v13{ --pg-r: 12px; --pg-gap: 14px; --pg-pad: 8px 12px; }
.__PFX__-pager.v14{ --pg-r: 999px;--pg-gap: 10px; --pg-pad: 7px 14px; }
.__PFX__-pager.v15{ --pg-r: 8px; --pg-gap: 6px; --pg-pad: 6px 9px; }
.__PFX__-pager.v16{ --pg-r: 16px; --pg-gap: 10px; --pg-pad: 6px 12px; }
.__PFX__-pager.v17{ --pg-r: 999px;--pg-gap: 4px; --pg-pad: 6px 12px; }
.__PFX__-pager.v18{ --pg-r: 6px; --pg-gap: 4px; --pg-pad: 6px 10px; }
.__PFX__-pager.v19{ --pg-r: 14px; --pg-gap: 12px; --pg-pad: 8px 14px; }
/* Family subtle tweaks */
.__PFX__-pager.f02 .__PFX__-pg-a{ border-style: dashed; }
.__PFX__-pager.f03 .__PFX__-pg-a{ border-width: 2px; }
.__PFX__-pager.f04 .__PFX__-pg-a{ background: color-mix(in srgb, var(--pg-bg) 78%, transparent); backdrop-filter: blur(2px); }
.__PFX__-pager.f05 .__PFX__-pg-a{ min-width: 38px; }
/* Jumper */
.__PFX__-pager .__PFX__-pg-jump{ display:flex; align-items:center; gap:8px; margin-left: 10px; }
.__PFX__-pager .__PFX__-pg-jump label{ font-size: 12px; color: var(--pg-fg2); }
.__PFX__-pager .__PFX__-pg-inp{
width: 74px;
padding: 6px 10px;
border-radius: 10px;
border: 1px solid var(--pg-bd);
background: var(--pg-bg);
color: var(--pg-fg);
}
.__PFX__-pager .__PFX__-pg-btn{
padding: 6px 12px;
border-radius: 10px;
border: 1px solid color-mix(in srgb, var(--pg-ac) 55%, var(--pg-bd));
background: color-mix(in srgb, var(--pg-ac) 16%, var(--pg-bg));
color: color-mix(in srgb, var(--pg-ac) 85%, var(--pg-fg));
cursor:pointer;
}

View File

@@ -0,0 +1,18 @@
/* Block family */
.__PFX__-pager.pg-block .__PFX__-pg{ gap: 10px; }
.__PFX__-pager.pg-block .__PFX__-pg-a{
border-radius: 6px;
min-width: 40px;
padding: 8px 12px;
}
.__PFX__-pager.pg-block .__PFX__-pg-it.is-current .__PFX__-pg-a{
outline: 2px solid color-mix(in srgb, var(--pg-ac) 55%, transparent);
outline-offset: 1px;
}
.__PFX__-pager.pg-block .__PFX__-pg-it.is-edge .__PFX__-pg-a{
border-width: 2px;
}
@media (min-width:960px){
.__PFX__-pager.pg-block{ --pg-gap:12px; }
.__PFX__-pager.pg-block .__PFX__-pg-a{ min-width: 44px; }
}

View File

@@ -0,0 +1,9 @@
/* Input family */
.__PFX__-pager.pg-input{ justify-content:center; }
.__PFX__-pager.pg-input .__PFX__-pg{ align-items:center; }
.__PFX__-pager.pg-input .__PFX__-pg-a{ border-radius: 10px; }
.__PFX__-pager.pg-input .__PFX__-pg-jump{ margin-left: 12px; }
.__PFX__-pager.pg-input .__PFX__-pg-inp{ width: 76px; }
@media (max-width:560px){
.__PFX__-pager.pg-input .__PFX__-pg-jump{ width:100%; justify-content:center; margin-left:0; }
}

View File

@@ -0,0 +1,9 @@
/* Minimal family */
.__PFX__-pager.pg-minimal .__PFX__-pg{ gap: 10px; }
.__PFX__-pager.pg-minimal .__PFX__-pg-a{ background: transparent; }
.__PFX__-pager.pg-minimal .__PFX__-pg-it.is-current .__PFX__-pg-a{
background: color-mix(in srgb, var(--pg-ac) 10%, transparent);
}
.__PFX__-pager.pg-minimal .__PFX__-pg-it:not(.is-current) .__PFX__-pg-a{
border-color: color-mix(in srgb, var(--pg-bd) 65%, transparent);
}

View File

@@ -0,0 +1,17 @@
/* Pill family (__PFX__ replaced by CssBuilder) */
.__PFX__-pager.pg-pill{ justify-content:center; }
.__PFX__-pager.pg-pill .__PFX__-pg-a{
border-radius: 999px;
padding: 7px 14px;
}
.__PFX__-pager.pg-pill .__PFX__-pg-it.is-edge .__PFX__-pg-a{
background: color-mix(in srgb, var(--pg-bg) 70%, transparent);
border-style: dashed;
}
.__PFX__-pager.pg-pill .__PFX__-pg-it.is-current .__PFX__-pg-a{
box-shadow: 0 1px 0 color-mix(in srgb, var(--pg-ac) 25%, transparent) inset;
}
@media (max-width:520px){
.__PFX__-pager.pg-pill{ --pg-gap:6px; }
.__PFX__-pager.pg-pill .__PFX__-pg-a{ min-width: 32px; padding: 7px 12px; }
}