gpttemp
This commit is contained in:
make
129
code/public/static/css/modules/pager/pager_base.css
Normal file
129
code/public/static/css/modules/pager/pager_base.css
Normal 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;
|
||||
}
|
||||
Reference in New Issue
Block a user