gpttemp
This commit is contained in:
14
code/public/static/css/modules/pager/_pager_base.css
Normal file
14
code/public/static/css/modules/pager/_pager_base.css
Normal 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;
|
||||
}
|
||||
129
code/public/static/css/modules/pager/pager.css
Normal file
129
code/public/static/css/modules/pager/pager.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;
|
||||
}
|
||||
3
code/public/static/css/modules/pager/pager_01.css
Normal file
3
code/public/static/css/modules/pager/pager_01.css
Normal 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;}
|
||||
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;
|
||||
}
|
||||
18
code/public/static/css/modules/pager/pager_block.css
Normal file
18
code/public/static/css/modules/pager/pager_block.css
Normal 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; }
|
||||
}
|
||||
9
code/public/static/css/modules/pager/pager_input.css
Normal file
9
code/public/static/css/modules/pager/pager_input.css
Normal 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; }
|
||||
}
|
||||
9
code/public/static/css/modules/pager/pager_minimal.css
Normal file
9
code/public/static/css/modules/pager/pager_minimal.css
Normal 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);
|
||||
}
|
||||
17
code/public/static/css/modules/pager/pager_pill.css
Normal file
17
code/public/static/css/modules/pager/pager_pill.css
Normal 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; }
|
||||
}
|
||||
Reference in New Issue
Block a user