130 lines
4.8 KiB
CSS
130 lines
4.8 KiB
CSS
/* 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;
|
|
}
|